/* Sofia Sans and Sofia Sans Condensed: only the cyrillic and latin subsets are shipped (every page, 393 and 1440 px,
   asks for exactly those four files). cyrillic-ext, latin-ext and greek were removed on 07.10.2026; how to put them back
   is in README.md, section "Шрифтовете". */
/* cyrillic */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/Yq6R-LCVXSLy9uPBwlATrOV6kjouQb5-6g.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/Yq6R-LCVXSLy9uPBwlATrOF6kjouQb4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Sofia Sans Condensed';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url(fonts/r05EGKVS5aVKd567NYXawnFKJaTtoAuLnIcMptH3eXxFSgQ.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Sofia Sans Condensed';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url(fonts/r05EGKVS5aVKd567NYXawnFKJaTtoAuLnIcIptH3eXxF.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   НВЛ - WINBET Супер Волей 26/27. Design system v1.
   White paper, ink type, the league's own navy as the one accent,
   a steel blue for small bright marks, the darkest navy for
   full-bleed bands. Sofia Sans carries
   the Bulgarian letterforms; display leading never drops
   below 1.12 so Й and Ъ keep their air.
   ============================================================ */

:root {
  /* Три основни цвята, всички неутрални и меки (Стефан, 09.10.2026):
       перла  #F5F8FB - фонът на страницата и светлото на стъклото
       мъгла  #DCE6EF - меките площи; по-дълбокият й тон #4E7397 е единственият по-наситен цвят
                        (бутоните „Купи билети", малки акценти) - бяло върху него е 5:1
       шисти  #1E2B37 - текстът
     Никакво червено в дизайна: то остава само в официалните знаци (Суперкупата, точката на
     kupibileti, знамето в логото на лигата), които не се прецветяват. */
  --pearl:   #F5F8FB;
  --mist:    #DCE6EF;
  --slate:   #1E2B37;

  --paper:   #FFFFFF;
  --paper-2: #EAF0F6;   /* мъглата, по-светла: светлите панели */
  --ink:     #1E2B37;
  --ink-2:   #475663;
  --ink-3:   #5E6B77;   /* 5.0:1 on --pearl, 4.6:1 on --paper-2 */
  --line:    rgba(30, 43, 55, .10);
  --line-2:  rgba(30, 43, 55, .18);
  --focus:   #2F4F6E;   /* focus ring: 8:1 on the pearl */

  /* The old names, kept so every rule follows: "volt" is now the deep mist, never a dark block. */
  --volt:      #4E7397;
  --volt-ink:  #FFFFFF;
  --volt-deep: #3E6185;   /* mist-blue text on the pearl: 6:1 */
  --volt-dim:  rgba(78, 115, 151, .12);
  --volt-2:    #5C85AB;   /* soft steel: big numbers, lines, the ball */
  --navy:      #2A3B4A;

  /* how far a panel fades into its neighbour */
  --fade:  72px;
  --dfade: 140px;

  /* every "Купи билети": the deep mist, with a liquid highlight on top */
  --kb:     #4E7397;
  --kb-hov: #45698C;

  /* ---- liquid glass (a web approximation of Apple's material) ---- */
  --glass:        linear-gradient(150deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .46) 100%);
  --glass-rim:    rgba(255, 255, 255, .86);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .35),
                  0 1px 2px rgba(30, 43, 55, .05), 0 22px 48px rgba(30, 43, 55, .10);
  --glass-blur:   blur(20px) saturate(160%);
  /* the same plate for a phone, where nothing blurs: denser, so what lies behind never shows through the text */
  --glass-flat:   linear-gradient(150deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .82) 100%);

  --f-display: "Sofia Sans Condensed", "Sofia Sans", "Arial Narrow", sans-serif;
  --f-body:    "Sofia Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero:    clamp(46px, 9.6vw, 124px);
  --fs-display: clamp(34px, 7.4vw, 84px);
  --fs-h3:      clamp(19px, 4.4vw, 26px);
  --fs-label:   12px;

  --lh-display: 1.14;
  --ls-display: -.02em;
  --ls-label:   .16em;

  --gut: 20px;
  --r-pill: 30px;
  --r-card: 26px;
  --r-photo: 20px;

  --ease:     cubic-bezier(.44, 0, .56, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .2s;
  --t-mid:  .35s;
  --t-slow: .6s;

  --head-h: 64px;
  --w-container: 1240px;
  --sheet: min(90vw, 460px);   /* width of the mobile menu sheets */
}

/* A phone held sideways is wide and very short, so a width-driven display size
   blows the headline up to 80px on a 390px-tall screen. Drive it off the height
   there instead. --vh-lock is the page's own frozen 100vh: app.js writes it once on
   a touch screen (and again on rotation) because a phone's toolbar changes vh, svh
   and lvh while you scroll, and nothing in the flow may follow that. Without the
   script, or with a mouse, it is plain 100vh. */
@media (orientation: landscape) and (max-height: 540px) {
  :root {
    --fs-hero:    clamp(34px, calc(var(--vh-lock, 100vh) * .13), 66px);
    --fs-display: clamp(28px, calc(var(--vh-lock, 100vh) * .10), 52px);
    --head-h: 56px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--pearl);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- Focus ---------- */
/* One ring for every keyboard stop. The browsers' own ring is a pale outline in the
   system accent colour (about 2:1 on white, measured in WebKit), so it is replaced
   instead of patched per component. Dark ink on the light sections, white on the dark
   bands and on the volt strip of the open menu. scroll-margin keeps a stop that was
   scrolled into view clear of the fixed header (Shift+Tab used to land under it) and
   of the bottom edge (the ring was cut off there). */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.menu-open .head :focus-visible { outline-color: #fff; }
:where(a, button, [tabindex]) { scroll-margin: calc(var(--head-h) + 12px) 0 18px; }
main:focus { outline: none; }

/* skip link: first stop on every page, only seen while it has focus */
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 13px 22px; border-radius: var(--r-pill);
  background: var(--volt); color: var(--volt-ink);
  font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  transform: translateY(-220%);
}
.skip:focus { transform: none; }
.skip:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

/* ---------- Type ---------- */

.d1, .d2, .d3 {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  margin: 0;
}
.d1 { font-size: var(--fs-hero); }
.d2 { font-size: var(--fs-display); font-weight: 750; }
.d3 { font-size: var(--fs-h3); font-weight: 700; }

.label {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}

.body  { font-size: 17px; color: var(--ink-2); margin: 0; line-height: 1.65; }
.small { font-size: 14px; color: var(--ink-2); margin: 0; line-height: 1.5; }

.wrap { max-width: var(--w-container); margin-inline: auto; padding-inline: var(--gut); }

/* The tag is a slanted band, not a plain rectangle: both verticals lean at the
   same angle, like a strip of tape laid on the page at speed. clip-path keeps
   the text itself upright - no skew on the letters. */
.chip {
  display: inline-block; padding: 8px 18px 7px;
  background: var(--ink); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1.45;
  letter-spacing: .14em; text-transform: uppercase;
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}
.chip--volt { background: var(--volt); color: var(--volt-ink); }

/* ---------- Buttons ---------- */

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding-inline: 28px;
  border-radius: var(--r-pill);
  font-size: 14px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.btn:active { transform: scale(.975); }
.btn__ico { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; transition: transform var(--t-mid) var(--ease-out); }
.btn:hover .btn__ico { transform: translate(3px, -3px); }

.btn--volt  { background: var(--volt); color: var(--volt-ink); box-shadow: 0 10px 26px rgba(10, 40, 60, .34); }
.btn--volt:hover { background: #14415F; }
.btn--kb {
  color: #fff;
  background: linear-gradient(180deg, #557A9E 0%, var(--kb) 55%, #46698B 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(30, 43, 55, .12), 0 10px 24px rgba(62, 97, 133, .26);
}
.btn--kb:hover { background: linear-gradient(180deg, #4E7397 0%, var(--kb-hov) 55%, #3E6185 100%); }
.btn--ghost { border: 1px solid var(--glass-rim); color: var(--ink); background: rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 16px rgba(30, 43, 55, .06); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(10, 40, 60, .04); }

/* ---------- Liquid glass ---------- */
/* Apple's Liquid Glass is a platform material; on the web it is approximated: a translucent
   plate that blurs and lifts what lies behind it, a bright rim, a soft inner highlight. Where
   the browser cannot blur, or the reader asked for less transparency, the plate turns nearly
   opaque, so the text on it never loses its contrast. Only panels that stand still get the
   blur (never a fixed layer on a phone, where it would be redrawn on every frame of a scroll).
   On a phone no panel blurs at all: eleven blurred layers are eleven textures the phone redraws
   on every frame of a momentum scroll (measured: 85 frames of 384 over 33 ms, against none before the
   glass). There the plate keeps its rim and inner highlight but is denser instead of blurred. */
.skm, .cd__u, .rcard, .cpanel, .kband__card, .quote, .chead, .tfig, .step, .gl {
  background: var(--glass);
  border: 1px solid var(--glass-rim);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
}
@media (hover: none), (max-width: 899px) {
  .skm, .cd__u, .rcard, .cpanel, .kband__card, .quote, .chead, .tfig, .step, .gl {
    background: var(--glass-flat); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .skm, .cd__u, .rcard, .cpanel, .kband__card, .quote, .chead, .tfig, .step, .gl { background: rgba(255, 255, 255, .92); }
}
@media (prefers-reduced-transparency: reduce) {
  .skm, .cd__u, .rcard, .cpanel, .kband__card, .quote, .chead, .tfig, .step, .gl {
    background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* ---------- Arrow line ---------- */

.arrow-line { display: inline-flex; align-items: center; color: var(--ink-3); }
.arrow-line__bar { height: 2px; width: 42px; background: currentColor; transition: width var(--t-slow) var(--ease-out); }
.arrow-line__tip { width: 12px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2; flex: 0 0 auto; }
a:hover .arrow-line { color: var(--ink); }
a:hover .arrow-line__bar { width: 74px; }

/* ---------- Header ---------- */

.head {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--head-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--gut);
  background: rgba(255, 255, 255, 0);
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.head.is-solid {
  background: rgba(245, 248, 251, .66);
  backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  border-bottom-color: rgba(255, 255, 255, .8);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(30, 43, 55, .05);
}
/* Без стъкло на телефон: размазването зад лепкав елемент се рисува наново на всеки кадър скрол.
   Без стъкло няма какво да пази прозрачността: плътно бяло (при .97 сянка от съдържанието
   зад лентата се виждаше на снимка при 390px). Да стои над `.menu-open .head` (еднаква специфичност). */
@media (hover: none), (max-width: 899px) {
  .head.is-solid { background: var(--pearl); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.head__mark {
  display: flex; align-items: center; gap: 11px;
  padding-block: 6px;              /* 38px tall was under the 40px tap target */
  outline-offset: 0;
}
/* The league's own mark. The colours are baked into the file - an <img> is a
   separate document and never inherits currentColor - so the reversed-out
   version is the league's real white logo, swapped in while the menu is open.
   Ratio 2035:637, so a height is enough. */
.head__logo { height: 38px; width: auto; }
.head__logo--w { display: none; }
.head__nav { display: none; gap: 18px; font-size: 13px; font-weight: 600; letter-spacing: .035em; text-transform: uppercase; }
.head__nav a { display: inline-flex; align-items: center; padding: 11px 4px; }
.head__nav a { color: var(--ink-2); transition: color var(--t-fast); }
.head__nav a:hover { color: var(--ink); }
/* on a phone the ticket button lives in the menu instead: the mark alone takes
   three lines, and a button beside it made the strip a scrum */
.head__cta { display: none; }
@media (min-width: 980px) {
  .head__cta { display: inline-flex; height: 44px; padding-inline: 20px; font-size: 12px; }
}

/* seven links: tighten the gaps where the strip is narrowest */
@media (min-width: 980px) and (max-width: 1119px) { .head__nav { gap: 10px; } }

@media (min-width: 980px) {
  .head { padding-inline: 34px; }
  .head__nav { display: flex; }
  .head__logo { height: 44px; }
}

/* ---------- Mobile menu ---------- */

.burger {
  display: flex; align-items: center; gap: 10px;
  width: 44px; height: 44px; justify-content: flex-end; margin-right: -4px;
  color: var(--ink);
}
.burger__ico { position: relative; width: 20px; height: 14px; }
.burger__ico i {
  position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
  transition: transform var(--t-mid) var(--ease-out), top var(--t-fast) var(--ease);
}
.burger__ico i:first-child { top: 2px; }
.burger__ico i:last-child  { top: 10px; }
.menu-open .burger__ico i:first-child { top: 6px; transform: rotate(45deg); }
.menu-open .burger__ico i:last-child  { top: 6px; transform: rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: 70; }
.menu[hidden] { display: none; }
.menu__scrim {
  position: absolute; inset: 0; background: rgba(10, 40, 60, .42);
  opacity: 0; transition: opacity var(--t-mid) var(--ease);
}

/* Two sheets. The volt one is dealt first and holds alone for a beat with the
   league's mark on it; only then does the paper sheet with the links come
   over the top. The hold is what makes it read as a sequence, not a slide. */
.menu__lead, .menu__pane {
  position: absolute; top: 0; bottom: 0; right: 0;
  width: var(--sheet);
  transform: translateX(101%);
}
.menu__lead {
  background: linear-gradient(160deg, #7FA0BF 0%, var(--volt) 100%);
  display: grid; place-items: center;
  transition: transform .34s var(--ease-out) .16s;   /* leaves last on close */
}
.menu__ball {
  width: 42%; max-width: 190px; height: auto;
  opacity: 0; transform: scale(.82) rotate(-24deg);
  transition: opacity .28s var(--ease-out), transform .5s var(--ease-out);
}
.menu__pane {
  /* starts below the header so the volt band keeps the mark and the close
     control on it - the paper sheet never slides under white-on-white type */
  top: var(--head-h);
  background: var(--pearl);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 34px var(--gut) 30px;
  box-shadow: -24px 0 60px rgba(10, 40, 60, .18);
  transition: transform .40s var(--ease-out);        /* leaves first on close */
  overflow-y: auto; overscroll-behavior: contain;
}

.menu.is-open .menu__scrim { opacity: 1; }
.menu.is-open .menu__lead  { transform: none; transition-delay: 0s; }
.menu.is-open .menu__ball  { opacity: 1; transform: none; transition-delay: .13s, .13s; }
.menu.is-open .menu__pane  { transform: none; transition-delay: .46s; }

.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__list li + li { margin-top: 4px; }
.menu__list a {
  display: block; padding: 10px 0;
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(27px, 7.6vw, 38px); line-height: 1.16;
  letter-spacing: -.015em; text-transform: uppercase; color: var(--ink);
  /* each line is wiped up into place rather than faded in */
  opacity: 0; transform: translateY(20px);
  transition: opacity .36s var(--ease-out), transform .42s var(--ease-out), color var(--t-fast);
}
.menu__list a:active { color: var(--volt-deep); }
.menu.is-open .menu__list a { opacity: 1; transform: none; }
.menu.is-open .menu__list li:nth-child(1) a { transition-delay: .60s; }
.menu.is-open .menu__list li:nth-child(2) a { transition-delay: .655s; }
.menu.is-open .menu__list li:nth-child(3) a { transition-delay: .71s; }
.menu.is-open .menu__list li:nth-child(4) a { transition-delay: .765s; }
.menu.is-open .menu__list li:nth-child(5) a { transition-delay: .82s; }
.menu.is-open .menu__list li:nth-child(6) a { transition-delay: .875s; }
.menu.is-open .menu__list li:nth-child(7) a { transition-delay: .93s; }

.menu__foot {
  padding-top: 24px; border-top: 1px solid var(--line);
  opacity: 0; transform: translateY(16px);
  transition: opacity .36s var(--ease-out), transform .42s var(--ease-out);
}
.menu.is-open .menu__foot { opacity: 1; transform: none; transition-delay: .88s; }
.menu__cta { width: 100%; }
.menu__meta {
  margin: 16px 0 0; font-size: 12px; line-height: 1.5;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}

/* While the menu is open the header rides above it, on the volt band: the mark
   and the close control turn white and the ticket button stands down, so the
   top strip belongs to the menu rather than fighting it. */
.menu-open .head { z-index: 80; background: transparent; border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none; }
.menu-open .head__logo--d { display: none; }
.menu-open .head__logo--w { display: block; }
.menu-open .burger { color: #fff; }
/* The sheets stop short of the left edge, so the mark would sit half on the
   page and half on the volt. It travels across with the sheet and lands on the
   panel's own gutter. */
.head__mark { transition: transform .34s var(--ease-out), color var(--t-fast); }
.menu-open .head__mark { transform: translateX(calc(100vw - var(--sheet))); }
.menu-open .head__cta { opacity: 0; pointer-events: none; }
.head__cta { transition: opacity var(--t-fast) var(--ease); }

@media (min-width: 980px) { .burger { display: none; } }
/* no motion preference: the sheets are simply there, no dealing sequence */
@media (prefers-reduced-motion: reduce) {
  .menu__lead, .menu__pane, .menu__ball, .menu__list a, .menu__foot,
  .menu__scrim { transition: none; }
}

/* ---------- Hero: WINBET Суперкупа 26 ---------- */
/* The event is the page: the Supercup's own mark, the dates, a clock to the first serve,
   the three matches and one way to a ticket. Behind it the league's ball turns on its own,
   big and faint - scenery, not a toy: it takes no pointer and no touch, so a swipe that
   starts on it scrolls the page like anywhere else. No player: the league has eleven clubs
   and the front page belongs to all of them. */

.hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center;
  background:
    radial-gradient(56% 50% at 82% 42%, rgba(142, 170, 196, .30) 0%, rgba(142, 170, 196, 0) 72%),
    radial-gradient(40% 40% at 6% 18%, rgba(220, 230, 239, .9) 0%, rgba(220, 230, 239, 0) 70%),
    linear-gradient(180deg, #F9FBFD 0%, var(--pearl) 100%);
}
/* faint court lines on paper - texture, not decoration. They thin out towards the bottom, so the
   hero ends in plain white and the next panel fades in from there without a seam. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(30, 43, 55, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 43, 55, .045) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
.hero__in {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--w-container); margin-inline: auto;
  padding: calc(var(--head-h) + 18px) var(--gut) 40px;
  display: grid; gap: 30px; min-width: 0;
}
.sk__main { min-width: 0; }

/* the official mark is a 472px file: at 236px it is sharp on a 2x phone */
.sk__title { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.sk__logo { width: clamp(188px, 54vw, 236px); height: auto; }
/* "17-18" over "октомври", poster style. The size follows the width AND the height of the
   screen, so on a short laptop the clock and the button still sit in the first view. */
.sk__date {
  display: block;
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(50px, 17.4vw, 92px); line-height: 1.12; letter-spacing: -.015em;
  color: var(--ink);
}
.sk__date span { display: block; }
.sk__where { margin: 10px 0 0; font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--ink-2); }

/* ---- the clock ---- */
/* Four tiles in a fixed grid: the digits are tabular and the tiles do not change width
   as the seconds run, so nothing beside them ever moves. */
.cd { margin-top: 24px; }
.thero .cd { margin-top: 26px; }
.thero .tend { margin-top: 26px; }
.cd[hidden], .cd__lb[hidden], .sk__over[hidden] { display: none; }
.cd__lb {
  margin: 0 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--volt-deep);
}
.cd__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 400px; }
.cd__u {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0;
  padding: 11px 4px 10px; border-radius: 18px; color: var(--ink);
}
.cd__u b {
  font-family: var(--f-display); font-weight: 800; font-size: clamp(30px, 9vw, 42px);
  line-height: 1.12; font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.cd__u i {
  font-style: normal; margin-top: 1px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;   /* 12: qa.py's floor for small text */
  color: var(--ink-3); white-space: nowrap;
}
/* the seconds are the one figure in the deep mist: the eye finds the moving part */
.cd__u--s b { display: block; color: var(--volt-deep); }
/* under reduced motion the clock does not tick by the second (app.js drops the tile too) */
.cd--still .cd__row { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 300px; }
.cd--still .cd__u--s { display: none; }

.sk__over { margin: 22px 0 0; font-size: 17px; font-weight: 600; line-height: 1.5; color: var(--ink-2); max-width: 34ch; }
.sk__over a { color: var(--volt-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ---- the way to a ticket ---- */
.sk__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 26px; }
.btn--xl { height: 60px; padding-inline: 34px; font-size: 15px; }
/* the partner mark on paper: the league's dark ink for the label, kupibileti's own colours */
.partner--ink .partner__lb { color: var(--ink-3); }
.partner--ink .partner__logo { height: 24px; }
@media (max-width: 559px) {
  /* a thumb-wide button on a phone; the partner sits under it, centred on it */
  .sk__buy { flex-direction: column; align-items: stretch; gap: 16px; }
  .sk__buy .btn { width: 100%; }
  .sk__buy .partner { align-items: center; align-self: center; }
}

/* ---- the three matches ---- */
.skm {
  list-style: none; margin: 0; padding: 4px 20px;
  border-radius: var(--r-card);
  min-width: 0;
}
.skm__i { padding: 16px 0 18px; border-bottom: 1px solid var(--line); min-width: 0; }
.skm__i:last-child { border-bottom: 0; }
.skm__when {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.skm__when b { font-weight: 700; min-width: 0; }
.skm__when span {
  font-family: var(--f-display); font-size: 24px; font-weight: 800; line-height: 1.12;
  letter-spacing: 0; color: var(--ink); font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.skm__m { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.skm .team__crest { --cd: 38px; }
.skm .team__n { font-size: 17.5px; overflow-wrap: anywhere; }
.skm .vs { margin: -1px 0 -1px 48px; }
.skm__final {
  font-family: var(--f-display); font-weight: 800; font-size: 34px; line-height: 1.12;
  text-transform: uppercase; letter-spacing: -.01em; color: var(--volt-deep);
}
/* a match already played fades back (app.js keeps it current) */
.skm__i.is-past, .mrow.is-past { opacity: .45; }

/* ---- the ball, behind everything ---- */
.hero__ball {
  position: absolute; z-index: 0; pointer-events: none;
  /* phone: a big faint ball rising behind the top right of the event */
  width: min(132vw, 640px); aspect-ratio: 1 / 1;
  right: max(-46vw, -300px); top: calc(var(--head-h) - 6vw);
  opacity: .42;
  /* no edge anywhere: it thins out under the header and long before the hero ends */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 60%, transparent 90%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 60%, transparent 90%);
}
/* топката се прави след първото рисуване (app.js, startBall): до .is-live кутията е празна */
.hero__ball canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.4s var(--ease-out); }
.hero__ball.is-live canvas { opacity: 1; }

/* Side by side from 900px up, and on a landscape phone: the event on the left, the matches
   on the right over the ball. */
@media (min-width: 900px), (min-width: 560px) and (orientation: landscape) {
  .hero__in {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 44px;
    padding-top: calc(var(--head-h) + 34px); padding-bottom: 60px;
  }
  .sk__logo { width: clamp(236px, 19vw, 280px); }
  .sk__date { font-size: clamp(64px, min(8.4vw, calc(var(--vh-lock, 100vh) * .124)), 124px); }
  .hero__ball {
    width: min(70vw, calc(var(--vh-lock, 100vh) * 1.12), 1040px);
    right: -12vw; top: 53%; translate: 0 -50%;
    opacity: .58;
  }
  .skm { padding: 6px 26px; }
}
@media (min-width: 900px) {
  .hero { min-height: calc(var(--vh-lock, 100vh) * .96); }
  .hero__in { gap: 64px; }
}
/* a phone held sideways is very short: the type and the clock shrink to its height */
@media (orientation: landscape) and (max-height: 540px) {
  .hero__in { padding-top: calc(var(--head-h) + 12px); padding-bottom: 28px; gap: 28px; }
  .sk__logo { width: 180px; }
  .sk__date { font-size: clamp(34px, calc(var(--vh-lock, 100vh) * .11), 60px); }
  .sk__where { font-size: 15px; margin-top: 6px; }
  .cd { margin-top: 14px; }
  .cd__u { padding: 7px 4px 6px; }
  .cd__u b { font-size: 26px; }
  .sk__buy { margin-top: 16px; }
  .btn--xl { height: 52px; }
  .skm__i { padding: 10px 0 12px; }
  .skm__when { margin-bottom: 8px; }
  .skm .team__crest { --cd: 30px; }
  .skm .team__n { font-size: 15.5px; }
}

/* ---- entrance: the mark, the dates, the clock, the button, then the matches ---- */
@media (prefers-reduced-motion: no-preference) {
  .sk__logo  { animation: sk-rise .7s var(--ease-out) .05s both; }
  .sk__date span { animation: sk-line .8s var(--ease-out) both; }
  .sk__date span:first-child { animation-delay: .14s; }
  .sk__date span:last-child  { animation-delay: .24s; }
  .sk__where { animation: sk-rise .7s var(--ease-out) .34s both; }
  .cd__u     { animation: sk-rise .6s var(--ease-out) both; }
  .cd__u:nth-child(1) { animation-delay: .40s; }
  .cd__u:nth-child(2) { animation-delay: .46s; }
  .cd__u:nth-child(3) { animation-delay: .52s; }
  .cd__u:nth-child(4) { animation-delay: .58s; }
  .sk__buy   { animation: sk-rise .7s var(--ease-out) .64s both; }
  .skm__i    { animation: sk-card .8s var(--ease-out) both; }
  .skm__i:nth-child(1) { animation-delay: .30s; }
  .skm__i:nth-child(2) { animation-delay: .42s; }
  .skm__i:nth-child(3) { animation-delay: .54s; }
  /* one soft knock on each new second - the figure, not the page, moves. Two identical keyframes
     take turns (app.js flips data-t), so each second restarts it without a reflow. */
  .cd__u--s b[data-t="0"] { animation: sk-tick-a .42s var(--ease-out); }
  .cd__u--s b[data-t="1"] { animation: sk-tick-b .42s var(--ease-out); }
}
@keyframes sk-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* the date lines come up from behind their own baseline; the negative inset keeps
   the breve of Й and the descenders whole */
@keyframes sk-line {
  from { transform: translateY(42%); clip-path: inset(-20% -4% 100% -4%); }
  to   { transform: none;            clip-path: inset(-20% -4% -20% -4%); }
}
@keyframes sk-card { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes sk-tick-a { from { transform: translateY(-22%); opacity: .35; } to { transform: none; opacity: 1; } }
@keyframes sk-tick-b { from { transform: translateY(-22%); opacity: .35; } to { transform: none; opacity: 1; } }

/* Each hero layer scrolls at its own rate: a scroll-driven CSS animation on the compositor,
   no JS, no scroll listener, so touch scrolling stays exactly as smooth as without it.
   Browsers without support get the still composition. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__ball, .skm {
      animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: scroll(root block);
      animation-range: 0 calc(var(--vh-lock, 100vh) * .9);
    }
    .hero__ball { animation-name: bv-par-ball; }
    @media (min-width: 900px) { .skm { animation-name: bv-par-card; } }
  }
}
@keyframes bv-par-ball { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(-4%, 16%, 0) rotate(-8deg); } }
@keyframes bv-par-card { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -9%, 0); } }

/* ---------- The closing ticket band ---------- */
/* Light like the rest: the ball close-up turns into a soft grey-blue wash (its colours would be
   the loudest thing on the page) and melts away on every edge; the words and the button sit on
   a glass card over it. The band ends in the footer's own mist, so the two read as one. */
.kband {
  position: relative; overflow: hidden; color: var(--ink);
  background: linear-gradient(180deg, var(--pearl) 0, var(--paper-2) var(--fade), var(--mist) 100%);
}
.kband__ph { position: relative; margin: 0; }
.kband__ph img {
  width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: 64% 50%;
  filter: grayscale(1) contrast(.86) brightness(1.12); opacity: .5;
}
.kband__ph { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 62%, transparent 100%);
                     mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 62%, transparent 100%); }
.kband__in { position: relative; z-index: 1; margin-top: -26%; padding-bottom: 56px; }
.kband__card { border-radius: var(--r-card); padding: 26px 22px 28px; }
.kband__t { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.kband__logo { width: 200px; height: auto; border-radius: 10px; }
.kband__t .d2 { display: block; color: var(--ink); font-size: clamp(32px, 8.6vw, 60px); }
@media (min-width: 900px) {
  .kband { display: flex; align-items: center; min-height: 560px; }
  .kband__ph { position: absolute; top: 0; right: 0; bottom: 0; width: 64%;
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0, #000 42%),
      linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image:
      linear-gradient(90deg, transparent 0, #000 42%),
      linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
            mask-composite: intersect; }
  .kband__ph img { height: 100%; aspect-ratio: auto; object-position: 58% 50%; }
  .kband__in { width: 100%; margin-top: 0; padding-block: 90px; }
  .kband__card { max-width: 600px; padding: 40px 42px 42px; }
  .kband__t .d2 { font-size: clamp(40px, 3.9vw, 56px); }
  .kband__logo { width: 236px; }
}

/* ---------- Next match ---------- */
/* Right under the hero. Plain content: nothing moves, nothing ticks. The days are
   written once at load by app.js; the rest is already in the HTML. */
.next { background: linear-gradient(180deg, var(--pearl) 0, var(--paper-2) 26px, var(--paper-2) calc(100% - 26px), var(--pearl) 100%); }
.next__in { display: grid; gap: 22px; padding-block: 30px 32px; }
.next__date {
  margin: 8px 0 0; font-family: var(--f-display); font-weight: 800;
  font-size: clamp(34px, 8vw, 54px); line-height: 1.14; letter-spacing: var(--ls-display); text-transform: uppercase;
}
.next__time { margin: 2px 0 0; font-size: 16px; font-weight: 600; color: var(--ink-2); }
.next__match { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.next__team { display: inline-flex; align-items: center; gap: 14px; min-width: 0; }
.next__crest { --cd: 48px; width: var(--cd); height: var(--cd); object-fit: contain; flex: 0 0 auto; }
.next__n { font-family: var(--f-display); font-weight: 800; font-size: clamp(22px, 5.4vw, 30px); line-height: 1.16; text-transform: uppercase; letter-spacing: var(--ls-display); }
.next__go { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.next__days { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: 24px; line-height: 1.16; text-transform: uppercase; color: var(--volt-deep); }
.next__days:empty { display: none; }
/* .btn sets display, which beats the hidden attribute: the band's button waits empty until the next match has an address */
.next__buy[hidden] { display: none; }
.next__hall { margin: 0 0 10px; font-size: 12.5px; font-weight: 600; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
@media (min-width: 900px) {
  .next__crest { --cd: 56px; }
  .next__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto; align-items: center; gap: 40px; padding-block: 34px; }
  .next__match { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px 22px; }
  .next__go { align-items: flex-end; text-align: right; }
}

/* ---------- Sections ---------- */

.sec { padding: 40px 0; }
.sec__head { margin-bottom: 20px; }
/* the kicker label and the heading under it: one place for the gap (it used to be an
   inline margin-top:12px on every h2 and on the generated pages as well) */
.label + .d2 { margin-top: 12px; }
.sec__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
/* A light panel has no edge: it comes in from the pearl and goes back out to it, so two panels
   meet in a gradient instead of a line. Two soft washes of mist inside it (kept clear of its
   edges, so they never cut) give the glass panels something to blur. */
.sec--gray {
  background:
    radial-gradient(38% 34% at 88% 42%, rgba(142, 170, 196, .22) 0%, rgba(142, 170, 196, 0) 100%),
    radial-gradient(34% 30% at 8% 64%, rgba(185, 204, 221, .30) 0%, rgba(185, 204, 221, 0) 100%),
    linear-gradient(180deg, var(--pearl) 0, var(--paper-2) var(--fade),
      var(--paper-2) calc(100% - var(--fade)), var(--pearl) 100%);
}
.sec:not(.sec--gray) {
  background: radial-gradient(36% 30% at 92% 50%, rgba(185, 204, 221, .22) 0%, rgba(185, 204, 221, 0) 100%);
}

@media (min-width: 900px) { .sec { padding: 60px 0; } .sec__head { margin-bottom: 26px; } :root { --fade: 120px; --dfade: 190px; } }

/* ---------- Silver (the moment) ---------- */

.silver { display: flex; flex-direction: column; gap: 34px; }
.silver__photo {
  position: relative; border-radius: var(--r-photo); overflow: hidden;
  box-shadow: 0 30px 70px rgba(10, 40, 60, .18);
}
.silver__photo img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.silver__cap {
  position: absolute; left: 16px; bottom: 14px; z-index: 2;
  color: #fff; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  text-shadow: 0 1px 3px rgba(6, 24, 42, .6);
}
.silver__body { max-width: 60ch; }

.quote {
  margin: 44px 0 0; padding: 22px 26px;
  border-left: 4px solid var(--volt-2); border-radius: 18px;
  font-size: 18px; line-height: 1.55; color: var(--ink);
}
.quote small { display: block; margin-top: 8px; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

@media (min-width: 900px) {
  .silver { flex-direction: row; align-items: center; gap: 60px; }
  .silver > * { flex: 1; min-width: 0; }
}

/* ---------- Road (timeline) ---------- */

.road { display: grid; gap: 10px; }
.rcard {
  position: relative;
  border-radius: var(--r-card);
  padding: 26px 24px 30px;
  overflow: hidden;
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
.rcard:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(10, 40, 60, .10); }
.rcard__y {
  font-family: var(--f-display); font-weight: 800; font-size: clamp(44px, 12vw, 64px); line-height: 1.12;
  letter-spacing: -.02em; white-space: nowrap; text-transform: uppercase;
}
.rcard__t { font-size: 17px; font-weight: 700; margin-top: 12px; }
.rcard__d { font-size: 14.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.5; }
.rcard--now { background: linear-gradient(150deg, rgba(214, 228, 240, .92) 0%, rgba(255, 255, 255, .55) 100%); }
.rcard--now .rcard__d { color: var(--ink-2); }
.rcard--now .rcard__tag { background: var(--volt-deep); color: #fff; }


.rcard__tag { position: absolute; top: 20px; right: 20px; }
.rcard__logo { height: 62px; width: auto; margin: 0 0 16px; }
.road__note { margin-top: 26px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.road__note p { font-size: 15.5px; }
.road__logo { height: 44px; width: auto; }
/* the sentence stays the headline of the note; the clubs sit under it, smaller */
.road__txt { flex: 1 1 280px; min-width: 0; }
.road__note .road__clubs { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); margin: 6px 0 0; max-width: 64ch; }
/* square club crest: a fixed slot as wide as the wordmark above it, so both notes
   start their text at the same x and the crest reads at the wordmark's visual weight */
.road__note--crest { margin-top: 18px; }
.road__note--crest .road__logo { width: 113px; height: 66px; object-fit: contain; object-position: left center; }

@media (min-width: 900px) { .road { grid-template-columns: 1fr 1fr 1fr; gap: 12px; } }

/* ---------- Season band ---------- */
/* Four photographs read as ONE picture: no gap, no shadow, no lift, no caption.
   They used to be four captioned cards (Разиграване, Прием, Нападение, Защита) that
   behaved like buttons and led nowhere, and a word laid over a photograph is a word
   nobody can press. Now there are no words on the photos; the one link is a text line
   under them (.band__go). The ink behind the grid keeps a fractional column from
   showing a white seam. Radius on the top corners only: the link row and then the
   club grid sit flush underneath, so .cpanel reads as a single panel. The plain
   :focus-visible ring (3px) is the band's own focus ring. .cpanel clips its overflow (the glass
   panel's rounded corners), so the ring of the band, which sits at the panel's top edge, is drawn
   INSIDE the photographs (a ::after two-tone ring) where nothing can clip it. */
.band {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  border-radius: var(--r-photo) var(--r-photo) 0 0; overflow: hidden;
  background: var(--ink);
}
.band { position: relative; }
.cpanel .band:focus-visible { outline: none; }
.cpanel .band:focus-visible::after {   /* a two-tone ring (white, then the focus colour), so it shows on any photograph */
  content: ""; position: absolute; inset: 8px; pointer-events: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--focus);
}
.band img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 640px) { .band { grid-template-columns: repeat(4, 1fr); } }

/* the link row: the same look as .club__go (capitals, deep navy, an arrow that
   nudges on hover), on paper, aligned to the right under the photographs */
.band__go { margin: 0; padding: 0 18px; text-align: right; background: var(--paper); border-bottom: 1px solid var(--line); }
.band__go a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--volt-deep);
}
.band__go i { display: inline-block; font-style: normal; transition: transform var(--t-fast) var(--ease-out); }
.band__go a:focus-visible i { transform: translateX(4px); }
@media (hover: hover) { .band__go a:hover i { transform: translateX(4px); } }

/* ---------- От терена: the photo mosaic ---------- */

.gal { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 8px; }
.gal__item {
  position: relative; margin: 0; border-radius: var(--r-photo); overflow: hidden;
  box-shadow: 0 18px 44px rgba(10, 40, 60, .12);
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
.gal__item:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(10, 40, 60, .18); }
.gal__item:hover img { filter: saturate(1.1) brightness(1.05); }
/* On a phone the mosaic is a single column, so there is no grid to satisfy and
   no reason to crop: every photo keeps its own shape. Forcing 4/3 here took a
   60% band out of the portrait frames and cut the tops of heads off. */
.gal__item img { width: 100%; height: auto; object-fit: cover; }
@media (min-width: 760px) {
  /* three portrait cuts in a row, then the wide draw shot runs the full width
     under them - a spread, no orphan columns. Every box takes its own file's
     ratio (4:5 and 21:9), so the grid never crops a face. */
  .gal { grid-template-columns: repeat(3, 1fr); }
  .gal__item--wide { grid-column: 1 / -1; }
  .gal__item img { height: 100%; }
  .gal__item--wide img { aspect-ratio: 21 / 9; }
  .gal__item:not(.gal__item--wide) img { aspect-ratio: 4 / 5; }
}

/* the league line under the mosaic */
.fed {
  display: flex; gap: 22px; align-items: flex-start;
  margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--line);
}
.fed__ball { width: 52px; height: auto; flex: 0 0 auto; }
.fed__t { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 21px; margin: 0 0 8px; letter-spacing: .01em; line-height: 1.2; }
.fed__d { max-width: 62ch; margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }

/* ---------- Clubs ---------- */
/* Eleven clubs and one count tile make twelve cells, which closes the grid
   cleanly at 2, 3 and 4 columns. No tile is a link (club--static: a plain div, no hover, no press,
   no tab stop), on the homepage and on superkupa.html alike; the club pages in otbor/ are not linked.
   The grid is ONE white panel, not a heap of floating cards: no gap, the radius
   once on the grid, a hairline between cells and no lift on hover (a lift is what
   makes a cell look like a card). The hairline is each cell's own right and bottom
   border; the negative right/bottom margin pushes the last column's and the last
   row's border 1px outside the grid, where overflow:hidden cuts it off - so there
   is never a double line and never a fractional gap, at any width. */
.clubs__hint { margin-top: 14px; font-size: 15.5px; color: var(--ink-3); }
.clubs { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  background: var(--paper); border-radius: var(--r-photo); overflow: hidden;
  box-shadow: 0 0 0 1px var(--line); }   /* the panel's edge on a white section; the homepage's sits on grey */
/* on the homepage the season band and its link row sit on top of the grid: the
   panel's top corners belong to the band, so the grid keeps only the bottom ones */
.cpanel { border-radius: var(--r-photo); overflow: hidden; }
.cpanel .clubs { border-radius: 0; box-shadow: none; background: transparent; }
.cpanel .band__go { background: transparent; border-bottom-color: var(--line); }
.club {
  position: relative; display: flex; margin: 0 -1px -1px 0;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
/* a short last row (the Висша лига has 13 clubs) must not end in a line to nothing */
.club:last-child { border-right-color: transparent; }
.club__a {
  display: flex; flex-direction: column; justify-content: flex-start; gap: 12px;
  width: 100%; padding: 14px 14px 12px;
}
.club__crest {
  --cd: 72px; width: var(--cd); height: var(--cd); object-fit: contain; object-position: left center;
  transition: transform var(--t-mid) var(--ease-out);
}
.club__t { display: flex; flex-direction: column; gap: 6px; }
.club__n {
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(19px, 5.4vw, 26px); line-height: 1.16; letter-spacing: -.005em;
  overflow-wrap: anywhere;
}
.club__c { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.club__go { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--volt-deep); }
.club__go i { display: inline-block; font-style: normal; transition: transform var(--t-fast) var(--ease-out); }
.club--count { background: linear-gradient(150deg, rgba(214, 228, 240, .9) 0%, rgba(255, 255, 255, .4) 100%); color: var(--ink); flex-direction: column; justify-content: flex-end; gap: 6px; padding: 14px 14px 12px; }
.club--count b { font-family: var(--f-display); font-weight: 800; font-size: 56px; line-height: 1.12; color: var(--volt-2); }
.club--count .club__c { color: var(--ink-3); }
@media (min-width: 640px) { .clubs { grid-template-columns: repeat(3, 1fr); } .club__a, .club--count { padding: 16px 18px 14px; } }
@media (min-width: 980px) { .clubs { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Calendar ---------- */
/* Rendered at build time into the HTML (build.py), so the whole season is in
   the markup with JavaScript off. The filter row, the header and the expand
   control only exist once the script has run. */
.cfilter { display: none; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.js .cfilter { display: flex; }
.sec__head + .cfilter { margin-top: 0; }   /* the heading block already leaves the gap */
.cf {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; height: 52px; padding: 7px; border-radius: 16px;
  background: rgba(255, 255, 255, .7); border: 2px solid var(--glass-rim);
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(30, 43, 55, .06);
  transition: opacity var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), transform .18s var(--ease-out);
}
.cf__crest { --cd: 34px; width: var(--cd); height: var(--cd); flex: 0 0 auto; object-fit: contain; }   /* = 52 - 2 x 7 padding - 2 x 2 border */
.cf--all { padding-inline: 20px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cf, .cc { position: relative; }
.cf:active { transform: scale(.94); }
.cf[aria-pressed="true"] { border-color: var(--volt-2); box-shadow: 0 0 0 4px rgba(78, 115, 151, .16); }
/* the chosen chip also carries a check mark, so the state does not rest on colour alone */
.cf[aria-pressed="true"]::after, .cc[aria-pressed="true"]::after {
  content: ""; position: absolute; top: -8px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--volt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.3 6.4l2.4 2.4 5-5.4' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: 0 0 0 2px var(--pearl);
}
.cf--all[aria-pressed="true"] { background: var(--volt); color: #fff; border-color: var(--volt); }
/* with a club chosen, the others sit back at about half strength */
.cfilter[data-sel] .cf:not([aria-pressed="true"]):not(.cf--all) { opacity: .55; }
@media (hover: hover) {
  .cf:hover { border-color: var(--volt-2); opacity: 1 !important; }
}

/* the city filter sits under the club chips: text pills, so it cannot be mistaken for a club */
.cityf { display: none; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.js .cityf { display: flex; }
.cc {
  height: 44px; padding-inline: 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .7); border: 2px solid var(--glass-rim);
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(30, 43, 55, .06);
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  transition: border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), transform .18s var(--ease-out);
}
.cc:active { transform: scale(.95); }
.cc[aria-pressed="true"] { border-color: var(--volt-2); box-shadow: 0 0 0 4px rgba(78, 115, 151, .16); }
.cc--all[aria-pressed="true"] { background: var(--volt); color: #fff; border-color: var(--volt); }
@media (hover: hover) { .cc:hover { border-color: var(--volt-2); } }

.chead {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 18px; padding: 16px 20px; border-radius: var(--r-card);
  animation: bv-pop .4s var(--ease-out) both;
}
.chead[hidden] { display: none; }
.chead__crest { --cd: 64px; width: var(--cd); height: var(--cd); object-fit: contain; flex: 0 0 auto; }
.chead__t { flex: 1 1 200px; min-width: 0; }
.chead__n { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: 28px; line-height: 1.16; text-transform: uppercase; }
.chead__c { margin: 2px 0 0; font-size: 14.5px; color: var(--ink-2); }
.chead__x {
  height: 44px; padding-inline: 18px; border-radius: 999px; border: 1px solid var(--line-2);
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
@media (hover: hover) { .chead__x:hover { border-color: var(--ink); background: rgba(10, 40, 60, .04); } }
@keyframes bv-pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.mlist { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--line); }
.mrow {
  display: grid; align-items: center;
  grid-template-columns: auto auto 1fr auto; grid-template-areas: "d t r r" "m m m b" "h h h h";
  gap: 8px 14px; padding: 16px 0; border-bottom: 1px solid var(--line);
}
.mrow[hidden] { display: none; }
.mrow__d { grid-area: d; display: flex; align-items: baseline; gap: 6px; font-family: var(--f-display); text-transform: uppercase; }
.mrow__d b { font-size: 24px; font-weight: 800; line-height: 1.12; }
.mrow__d i { font-style: normal; font-family: var(--f-body); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; color: var(--ink-3); }
.mrow__d--tbd i { font-size: 13px; letter-spacing: .06em; color: var(--ink-2); }
.mrow__t { grid-area: t; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mrow__d--tbd + .mrow__t { display: none; }
.mrow__r { grid-area: r; justify-self: end; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.mrow__m { grid-area: m; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.team { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.team__crest { --cd: 30px; width: var(--cd); height: var(--cd); object-fit: contain; flex: 0 0 auto; }
/* A crest that is light on light (clubs.LIGHT_CREST: Slavia's is white strokes on a transparent ground,
   invisible on the pearl) sits on a dark round plate. The plate is the image's own box, a circle of the
   crest's slot (--cd, set with each size above), so it is always concentric with the frame that holds it:
   in the 52px chip (2px border, 7px padding, radius 16) the 34px plate leaves the same 9px gap to the
   frame's edge on every side, inner radius 17 = 26 - 9. The padding keeps the drawing inside the circle
   (a 217 x 240 crest at 72% of the slot has a diagonal of 33px in the 34px plate). The slate is the text
   colour, so against the crest's near-white strokes it is about 12:1 (test_a11y.py measures it).
   Written after every crest rule so it wins over their object-position. app.js copies the class
   with the crest to the card of the chosen club and to the next-match band. */
.crest--light {
  box-sizing: border-box; padding: calc(var(--cd, 30px) * .14);
  border-radius: 50%; background: var(--slate); object-position: center;
}
.team__n { font-size: 16.5px; font-weight: 700; line-height: 1.3; }
.vs { margin: -2px 0; font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.mrow__buy { grid-area: b; justify-self: end; align-self: center; height: 44px; padding-inline: 16px; font-size: 12px; }
/* a match that is not on sale has no button: the teams take the whole width, no empty cell is left */
.mrow:not(:has(.mrow__buy)) { grid-template-areas: "d t r r" "m m m m" "h h h h"; }
/* where the match is played: same quiet voice as the round label, on its own line
   under the two teams so the ticket button keeps its cell */
.mrow__h { grid-area: h; min-width: 0; overflow-wrap: anywhere; font-size: 12.5px; font-weight: 600; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.mrow > .mrow__m { align-self: start; }
@media (min-width: 760px) {
  .mrow {
    grid-template-columns: 74px 70px 62px 1fr auto; grid-template-areas: "r d t m b" ". . . h .";
    gap: 0 16px; padding: 14px 0;
  }
  /* no button: a column fewer, so the gap that belonged to the button's column goes too */
  .mrow:not(:has(.mrow__buy)) { grid-template-columns: 74px 70px 62px 1fr; grid-template-areas: "r d t m" ". . . h"; }
  .mrow__r { justify-self: start; }
  .mrow__d { flex-direction: column; gap: 0; align-items: flex-start; line-height: 1.1; }
  .mrow__d b { font-size: 28px; }
  .mrow:has(.mrow__d--tbd) { grid-template-areas: "r d d m b" ". . . h ."; }
  .mrow:has(.mrow__d--tbd):not(:has(.mrow__buy)) { grid-template-areas: "r d d m" ". . . h"; }
  .mrow__h { margin-top: 6px; }
  .mrow__m { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
}
@media (hover: hover) { .mrow:hover { background: rgba(10, 40, 60, .028); } }

/* stagger: JS numbers the arriving rows (--i) and flips data-swap, which swaps
   the animation name so the whole list re-runs even for rows that stayed. A row
   that stays when the list only grows or shrinks, and the rows past the first
   dozen (below the screen), carry data-still and do not play it. */
.js .mlist[data-swap="0"] .mrow { animation: bv-row-a .44s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 35ms); }
.js .mlist[data-swap="1"] .mrow { animation: bv-row-b .44s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 35ms); }
.js .mlist .mrow[data-still] { animation: none; }
@keyframes bv-row-a { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bv-row-b { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.cal__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.cal__foot[hidden] { display: none; }
/* .btn sets display, which beats the hidden attribute: without this the "all matches" button stayed on screen, dead, when a filter left 8 matches or fewer */
.cal__more[hidden] { display: none; }
.cal__count { margin: 0; font-size: 14.5px; color: var(--ink-3); }
.cal__none { margin: 22px 0 0; font-size: 16px; color: var(--ink-2); }
.cal__none[hidden] { display: none; }
.cal__dl { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin: 22px 0 0; }
.cal__dl .btn { height: 46px; padding-inline: 20px; font-size: 13px; }
.cal__dlfor { font-size: 14.5px; color: var(--ink-3); }
/* the league's fantasy game: one quiet line under the calendar, after the match list */

/* ---------- Tickets (the homepage's short block; the page itself is bileti.html + bileti.css) ---------- */


/* ---------- Календарът: бележката под заглавието (и на клубните страници) ---------- */

.prog__note { margin-top: 14px; font-size: 14.5px; color: var(--ink-3); }

/* ---------- News ----------
   An editorial list in the calendar's own grammar: the date in a narrow column,
   the whole headline and its lead beside it, a hairline between items. The
   league's platform cuts these headlines mid-word; here they run to the end. */

.news { border-top: 1px solid var(--line-2); }
.nitem {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
  padding: 26px 0 22px; border-bottom: 1px solid var(--line-2);
}
.nitem__d {
  display: flex; align-items: baseline; gap: 8px; line-height: 1.1;
  font-family: var(--f-display); text-transform: uppercase;
}
.nitem__d b { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.nitem__d i {
  font-style: normal; font-family: var(--f-body); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; color: var(--ink-2);
}
.nitem__b { min-width: 0; }
.nitem__ph { margin: 0 0 20px; border-radius: var(--r-photo); overflow: hidden; }
.nitem__ph img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.nitem__t {
  margin: 0; font-size: clamp(21px, 5.6vw, 26px); font-weight: 750; line-height: 1.22;
  letter-spacing: -.012em; color: var(--ink); text-wrap: balance; overflow-wrap: break-word;
}
.nitem__l { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 64ch; }

@media (min-width: 640px) {
  .nitem { grid-template-columns: 120px minmax(0, 1fr); gap: 0 32px; padding: 32px 0 26px; }
  .nitem__d { flex-direction: column; align-items: flex-start; gap: 0; padding-top: 4px; }
  .nitem__d b { font-size: 30px; }
  .nitem__d i { margin-top: 4px; }
  .nitem__d i span { display: block; }
  .nitem__t { font-size: clamp(22px, 2.9vw, 28px); }
}
@media (min-width: 900px) {
  .nitem { grid-template-columns: 148px minmax(0, 1fr); gap: 0 48px; padding: 40px 0 32px; }
  .nitem__d b { font-size: 36px; }
  .nitem__t { font-size: clamp(25px, 2.3vw, 32px); }
  .nitem--lead .nitem__b { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 0 44px; align-items: start; }
  .nitem--lead .nitem__ph { grid-column: 2; grid-row: 1; margin: 6px 0 0; }
  .nitem--lead .nitem__tx { grid-column: 1; grid-row: 1; }
}

/* ---------- Partner badge ---------- */
/* The negative of the official mark sits straight on the dark panel - a white
   plate behind it would punch a bright hole in the layout. The .bg dot keeps
   the brand red, which is the only colour it needs. */
/* align-items matters here: the default stretch makes the <img> box as wide as
   the label above it, and the SVG then centres its artwork inside that box, so
   the mark looked indented. flex-start pins it to the same left edge. */
.partner { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.partner__lb {
  font-size: 12px; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3);
}
/* the file is 1060x184; a fixed height keeps the ratio true at any size */
.partner__logo {
  height: 21px; width: auto; display: block;
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.partner:hover .partner__logo { transform: translateY(-1px); opacity: .82; }
.partner:focus-visible { border-radius: 3px; }

/* ---------- Footer ---------- */

/* Light as well: it comes up out of the pearl into the mist; after the closing band (which ends
   in the same mist) it simply carries on. The league's dark logo and kupibileti's own colours. */
.foot {
  color: var(--ink); padding: calc(var(--fade) + 44px) 0 34px;
  background: linear-gradient(180deg, var(--pearl) 0, var(--mist) var(--fade), #D3DFEA 100%);
}
.foot--flush { background: linear-gradient(180deg, var(--mist) 0, #D3DFEA 100%); padding-top: 64px; }
.foot__grid { display: flex; flex-direction: column; gap: 36px; }
.foot__lead { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; }
/* the league's own logo (flag colours baked in) */
.foot__logo { height: 56px; width: auto; }
.foot__col p { margin: 4px 0; color: var(--ink-2); font-size: 15px; }
.foot__legal {
  margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line-2);
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  font-size: 12.5px; color: var(--ink-2);   /* --ink-3 is 4.0:1 on the footer's mist, under the 4.5 of small text; --ink-2 is 5.6:1 */
}
@media (min-width: 900px) {
  .foot__grid { flex-direction: row; justify-content: space-between; align-items: flex-end; }
}

/* ---------- Photo strip ---------- */
/* Transform-only marquee, pure CSS: two identical groups, the track slides
   exactly one group and starts over. Every photo shows whole at its own 3:2,
   so nothing in it can be cropped. */
.strip { margin-top: 56px; overflow: hidden; }
.strip__track { display: flex; width: max-content; animation: bv-strip 80s linear infinite; }
.strip__i { display: flex; gap: 14px; padding-right: 14px; flex: 0 0 auto; }
.strip__i img { height: 240px; width: auto; border-radius: var(--r-photo); flex: 0 0 auto; }
@keyframes bv-strip { to { transform: translateX(-50%); } }
@media (min-width: 900px) { .strip__i img { height: 320px; } }
/* pause for a pointer that can hover; a finger never stops it, it just scrolls past */
@media (hover: hover) { .strip:hover .strip__track { animation-play-state: paused; } }
@media (prefers-reduced-motion: reduce) {
  .strip { overflow-x: auto; }
  .strip__i[aria-hidden="true"] { display: none; }
}

/* The loops that never end (both marquees, the float of the hero ball) stand still
   while out of view: app.js puts .is-off on their host, and on the page itself in a
   hidden tab. They carry on from the same place. Deliberately after the rules it
   overrides, and never on the hosts' own scroll-driven animations. */
.strip.is-off .strip__track, html.is-off .strip__track { animation-play-state: paused; }

/* ---------- Scroll-driven motion ---------- */
/* Compositor-side CSS only: no scroll listener, nothing on the main thread.
   Each range is the element's own entry into view, so the longest any of these
   runs is about one element-height of scrolling. Browsers without
   animation-timeline simply show the finished state. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* heading: a short rise and a left-to-right wipe. The inset is negative so
       the Cyrillic breves and descenders are never clipped. */
    .sec__head .d2, .sec__head .label {
      animation: bv-head linear both;
      animation-timeline: view(block);
      animation-range: entry 0% entry 100%;
    }
    @keyframes bv-head {
      from { opacity: 0; transform: translateY(22px); clip-path: inset(-12% 100% -12% -2%); }
      to   { opacity: 1; transform: none;             clip-path: inset(-12% -2% -12% -2%); }
    }
    /* the wide photo strips: a wipe (clip-path only - the figure's own transform
       belongs to the reveal) and, for the marquee, a rise */
    .gal__item--wide {
      animation: bv-wipe linear both;
      animation-timeline: view(block);
      animation-range: entry 0% entry 70%;
    }
    @keyframes bv-wipe {
      from { clip-path: inset(-60px 100% -60px -60px round 20px); }
      to   { clip-path: inset(-60px -60px -60px -60px round 20px); }
    }
    .strip {
      animation: bv-strip-in linear both;
      animation-timeline: view(block);
      animation-range: entry 0% entry 90%;
    }
    @keyframes bv-strip-in {
      from { opacity: 0; transform: translateY(26px); clip-path: inset(0 100% 0 0); }
      to   { opacity: 1; transform: none;             clip-path: inset(0 0 0 0); }
    }
  }
}

/* ---------- Reveal on scroll ----------
   Content is visible by default; .js-anim arms the initial state only when the
   script is actually running, and reveal-hidden must never survive print,
   headless capture or a hidden tab (the Arena lesson). */
.js-anim [data-anim] { opacity: 0; transform: translateY(30px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js-anim [data-anim].is-revealed { opacity: 1; transform: none; }
/* Cards deal in one at a time: 42px of travel and a touch of scale, on a
   .13s step. At 22px and .08s the four of them overlapped so heavily that the
   sequence read as one fade - you could not see them arrive separately. */
.js-anim [data-anim="stagger"] > * {
  opacity: 0; transform: translateY(42px) scale(.965);
  transition: opacity .62s var(--ease-out), transform .72s var(--ease-out);
}
.js-anim [data-anim="stagger"].is-revealed > * { opacity: 1; transform: none; }
.js-anim [data-anim="stagger"].is-revealed > :nth-child(2) { transition-delay: .13s; }
.js-anim [data-anim="stagger"].is-revealed > :nth-child(3) { transition-delay: .26s; }
.js-anim [data-anim="stagger"].is-revealed > :nth-child(4) { transition-delay: .39s; }
.js-anim [data-anim="stagger"].is-revealed > :nth-child(5) { transition-delay: .52s; }
.js-anim [data-anim="stagger"].is-revealed > :nth-child(6) { transition-delay: .65s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js-anim [data-anim], .js-anim [data-anim="stagger"] > * { opacity: 1 !important; transform: none !important; }
}

/* ---------- Club pages (otbor/<slug>.html, written by build.py) ----------
   The header is a plain band on paper: the club's own photo sits beside the
   name where the league published one, and a crest card of the same shape
   takes its place where it did not, so all eleven pages share one layout. */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.thero { padding: calc(var(--head-h) + 14px) 0 64px; }
.tback {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  transition: color var(--t-fast);
}
.tback i { font-style: normal; transition: transform var(--t-fast) var(--ease-out); }
.tback:focus-visible { border-radius: 4px; }
@media (hover: hover) { .tback:hover { color: var(--ink); } .tback:hover i { transform: translateX(-4px); } }

.thero__in { display: grid; gap: 28px; margin-top: 10px; }
.thero__crest { width: 112px; height: 112px; object-fit: contain; object-position: left center; margin: 0 0 22px; }
.thero__h1 { font-size: clamp(40px, 11vw, 64px); overflow-wrap: break-word; }
.thero__meta { margin: 18px 0 0; font-size: 18px; line-height: 1.4; color: var(--ink-2); }
.thero__n { margin: 8px 0 0; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

.tfig { position: relative; margin: 0; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 16 / 9; }
.tfig img { width: 100%; height: 100%; object-fit: cover; }
.tfig--crest { display: grid; place-items: center; border: 1px solid var(--line); }
.tfig--crest img { position: relative; width: auto; height: 58%; max-width: 58%; object-fit: contain; }
/* two quiet rings behind the crest: the ball's outline, not a missing picture */
.tfig--crest::before, .tfig--crest::after {
  content: ""; position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--line); transform: translate(-50%, -50%);
}
.tfig--crest::before { height: 82%; }
.tfig--crest::after { height: 112%; }
@media (max-width: 899px) { .tfig--crest { aspect-ratio: 4 / 3; } }

@media (min-width: 900px) {
  .thero { padding-bottom: 88px; }
  .thero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 56px; align-items: center; }
  .thero__h1 { font-size: clamp(48px, 5.4vw, 84px); }
}

.tnone { margin: 0; max-width: 56ch; padding-left: 16px; border-left: 3px solid var(--volt-2); font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.tnote { margin: 16px 0 0; max-width: 64ch; font-size: 14px; line-height: 1.5; color: var(--ink-3); }

.rost { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: 6px 16px; }
.rtab { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rtab th {
  padding: 14px 10px 12px; text-align: right; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--line-2);
}
.rtab th:nth-child(-n+3) { text-align: left; }
.rtab td { padding: 12px 10px; text-align: right; font-size: 16px; border-bottom: 1px solid var(--line); }
.rtab tbody tr:last-child td { border-bottom: 0; }
.rtab td.rtab__no { width: 64px; text-align: left; font-family: var(--f-display); font-size: 22px; font-weight: 800; line-height: 1.2; }
.rtab td.rtab__n { text-align: left; font-weight: 700; }
.rtab td.rtab__p { text-align: left; color: var(--ink-2); }
.rtab__l { display: none; }
.unsure { margin-left: 2px; color: var(--ink-3); cursor: help; }

@media (max-width: 639px) {
  .rtab, .rtab tbody { display: block; }
  .rtab thead { display: block; position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rtab tr {
    display: grid; grid-template-columns: 40px repeat(4, minmax(0, 1fr)); gap: 2px 8px; padding: 14px 0;
    grid-template-areas: "no n n n n" "no p p p p" ". h y a b";
    border-bottom: 1px solid var(--line);
  }
  .rtab tbody tr:last-child { border-bottom: 0; }
  .rtab td { display: block; padding: 0; border: 0; text-align: left; font-size: 15px; min-width: 0; }
  .rtab td.rtab__no { grid-area: no; width: auto; font-size: 24px; }
  .rtab td.rtab__n { grid-area: n; font-size: 16.5px; line-height: 1.3; overflow-wrap: anywhere; }
  .rtab td.rtab__p { grid-area: p; font-size: 14.5px; }
  .rtab td:nth-child(4) { grid-area: h; }
  .rtab td:nth-child(5) { grid-area: y; }
  .rtab td:nth-child(6) { grid-area: a; }
  .rtab td:nth-child(7) { grid-area: b; }
  .rtab td.rtab__s { margin-top: 8px; font-weight: 700; }
  .rtab__l { display: block; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
  .rtab__cm::after { content: " см"; font-weight: 500; color: var(--ink-2); }
}

.tstaffbox { margin-top: 56px; }
.tstaff { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); }
.tstaff li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.tstaff__n { font-size: 17px; font-weight: 700; }
.tstaff__r { font-size: 15px; color: var(--ink-2); }
@media (min-width: 760px) {
  .tstaff { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
}

.tend { margin: 40px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.team--me .team__n { box-shadow: inset 0 -3px 0 rgba(60, 140, 190, .5); }

/* homepage links to the league pages */
a.club__go { display: inline-flex; align-items: center; min-height: 44px; }
.rcard .club__go { margin-top: 10px; color: var(--volt-deep); }

/* ---------- Дългата страница на телефон ---------- */
/* Тук няма `content-visibility`. Беше на седем секции и на пода (360-449px) и спестяваше около
   4 ms при пълно преизчисляване на стила; скролът, първото и най-голямото рисуване не се
   подобриха нито с милисекунда (WebKit, 390x844, три пробега със и без). Цената беше подскок: докато
   секцията не се нарисува, страницата я смята по ръчно мерено число, а във WebKit (iPhone) числата
   не излизат вярно: на 375 и 390px `#novini` е с 44-46px по-ниска от числото, `#kalendar` с 22px,
   `#turnirite` с 21px, и целият документ с до 123px по-нисък от обявеното (на 390px, мерено на
   09.10). WebKit няма закрепване на скрола, та секция, която се нарисува над екрана (скрол нагоре
   след котва или презареждане насред страницата), бута видимото със същите пиксели. Скрол без подскок
   е по-важен от 4 ms. Не го връщай, без да си мерил във WebKit на всяка ширина от 360 до 449px. */