/* ============================================================
   base.css — рамка, хедър, overlay меню, hero, слотове, движение
   Споделя се от всички страници. Стъпва на дизайна на прототипа (S4).
   ============================================================ */

/* --- Reset --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);color:var(--frost);
  font-family:var(--display);font-weight:300;line-height:1.55;
  font-optical-sizing:auto;overflow-x:hidden;
}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul,ol{list-style:none}

/* --- Език: един елемент носи data-bg и data-en, site.js сменя текста --- */

/* --- Контейнер --- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* --- Типография --- */
h1,h2,h3{font-weight:600;line-height:1.08;letter-spacing:-.01em}
.eyebrow{font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--steel)}
.subtitle{font-family:var(--script);font-style:italic;font-weight:400;
  color:var(--bronze);letter-spacing:.01em}

/* ============================================================
   ГОРНА ЛЕНТА (инжектира се от site.js)
   ============================================================ */
.top{position:fixed;top:0;left:0;right:0;z-index:70;padding:0 var(--pad);
  display:flex;align-items:center;height:76px;transition:background .35s,border-color .35s;
  border-bottom:1px solid transparent}
.top.stuck{background:rgba(10,18,22,.9);backdrop-filter:blur(16px);border-bottom-color:var(--line)}
.logo{display:flex;align-items:center;gap:6px;border:1px solid rgba(234,240,242,.4);
  padding:6px 10px;border-radius:2px;transition:border-color .35s}
.logo b{font-variation-settings:"wdth" 66,"wght" 800;font-size:17px;letter-spacing:.08em}
.logo i{width:5px;height:5px;border-radius:50%;background:var(--bronze);display:block}
.wordmark{position:absolute;left:50%;transform:translateX(-50%);color:var(--frost);
  font-weight:600;font-variation-settings:"wdth" 84,"wght" 600;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;transition:opacity .2s}
.wordmark:hover{opacity:.75}
/* Дребният сериф е уголемен с около една осма на 28.08.2026, заедно с
   преминаването на Playfair към Cormorant. Причината е измерена, не на око:
   x-височината на Cormorant е 0,891 от тази на Playfair при един и същ кегел,
   тоест при еднакво число буквите излизат с една осма по-ниски. На едрите
   надписи това е предимство и точно там се търси, но под около двайсет и пет
   пиксела започва да се чете като недоглеждане. Затова само дребните места
   получават компенсация, а на няколко от тях и тегло 500 вместо 400, защото
   тънкото на дребно избледнява. */
.wordmark em{font-family:var(--script);font-size:18px;letter-spacing:0;text-transform:none;font-weight:500}
.topright{margin-left:auto;display:flex;align-items:center;gap:22px}

/* Език, преработено 24.08.2026 по референция от popovalbert.com/en, точка на
   Камелия: едно квадратче с текущия език и до него знаме на другия, вместо
   два еднакви бутона BG/EN. Квадратчето с кода не е бутон, само показва къде
   си в момента; знамето е кликаемото място, което сменя езика. */
.lang{display:flex;align-items:stretch;border:1px solid rgba(234,240,242,.28);
  border-radius:2px;overflow:hidden}
.lang-code{display:flex;align-items:center;padding:0 8px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  background:var(--frost);color:var(--ink)}
.lang-flag{display:flex;align-items:center;justify-content:center;padding:0 7px;
  border-left:1px solid rgba(234,240,242,.28);opacity:.82;transition:opacity .2s}
.lang-flag:hover{opacity:1}
.lang-flag svg{display:block;width:19px;height:13px}
.burger{padding:8px 0;display:flex;flex-direction:column;gap:5px;width:30px}
.burger span{display:block;height:1.5px;background:var(--frost);width:100%;
  transition:transform .32s,opacity .2s}
body.nav-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* Границата беше 620 и надписът изчезваше на цяла лента ширини, на които
   всъщност има място. Мерено на живо на 03.09.2026: при 560 пиксела
   надписът върви от 197 до 363, логото свършва на 80, а езикът и менюто
   започват на 413, тоест по сто пиксела въздух от двете страни. При 430
   десният му ръб опира контролите с осем пиксела. Затова границата слиза
   на 470, тоест надписът се вижда до последната ширина, на която стои
   чисто, и се маха точно преди да се блъсне. */
@media(max-width:470px){.wordmark{display:none}}

/* Светла страница: тъмен хедър, докато не е „stuck" (тогава фонът е тъмен).
   Изключено докато менюто е отворено (body.nav-open) — фонът зад лентата тогава винаги е
   тъмният overlay, не страницата, така че тъмен текст върху тъмно щеше да изчезва. */
body.light-top:not(.nav-open) .top:not(.stuck) .logo b,
body.light-top:not(.nav-open) .top:not(.stuck) .wordmark{color:var(--ink-on-snow)}
body.light-top:not(.nav-open) .top:not(.stuck) .logo{border-color:rgba(12,20,24,.3)}
body.light-top:not(.nav-open) .top:not(.stuck) .lang{border-color:rgba(12,20,24,.3)}
body.light-top:not(.nav-open) .top:not(.stuck) .lang-code{background:var(--ink-on-snow);color:var(--snow)}
body.light-top:not(.nav-open) .top:not(.stuck) .lang-flag{border-left-color:rgba(12,20,24,.3)}
body.light-top:not(.nav-open) .top:not(.stuck) .burger span{background:var(--ink-on-snow)}

/* ============================================================
   OVERLAY МЕНЮ (цял екран)
   ============================================================ */
/* visibility е добавено на 17.09.2026 от одита. Само с opacity:0 затвореното
   меню оставаше в реда на Tab: след бургера фокусът минаваше през единайсет
   невидими връзки, а екранният четец ги четеше като живи. visibility:hidden
   ги вади от реда и от дървото за четеца, без да разваля избледняването:
   при затваряне visibility се сменя чак след 0,35 секунди, когато opacity е
   стигнала нулата, а при отваряне се сменя веднага. */
.menu{position:fixed;inset:0;z-index:65;background:var(--ink);
  display:flex;align-items:center;padding:var(--pad);opacity:0;pointer-events:none;
  visibility:hidden;transition:opacity .35s,visibility 0s linear .35s}
body.nav-open .menu{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .35s,visibility 0s}
.menu li{overflow:hidden}
/* Колоната с пунктовете не е центрирана като останалото съдържание, а изнесена вляво,
   но не долепена до ръба: балансът е между сегашното централно каре и лявата колона на Sinner.
   Ширината по съдържание е нужна на маската, иначе li-то се разпъва и пътят на плъзгането става огромен. */
.menu .wrap{max-width:none;margin-inline:0;
  padding-left:clamp(var(--pad),12vw,220px);padding-right:var(--pad)}
.menu ol{width:fit-content}
@media(max-width:720px){.menu .wrap{padding-left:var(--pad)}}

/* Появяване отдясно наляво: всеки ред стои изцяло извън своята маска вдясно (translateX 100%)
   и се вкарва на място със стъпка от няколко стотни, така че се подреждат един след друг. */
.menu a{display:flex;align-items:baseline;gap:.25em;padding:8px 0;color:rgba(234,240,242,.3);
  font-variation-settings:"wdth" 108,"wght" 600;font-size:clamp(22px,3.5vw,42px);line-height:1.14;
  transform:translateX(100%);
  /* ПО-БАВНО И ПО-МЕКО, 12.09.2026, по искане на Камелия: дотук редовете се
     изстрелваха, 0,58 секунди със стъпка 0,06. Сега пътят е 0,95 секунди със
     стъпка 0,09, а кривата е същата като при изникването на „Отвъд пистата",
     тоест тръгва бързо и спира дълго. Последният ред сяда на 1,46 секунди. */
  transition:transform .95s cubic-bezier(0,0,.1,.97),color .3s var(--ease)}
body.nav-open .menu a{transform:translateX(0)}
.menu li:nth-child(1) a{transition-delay:.06s}.menu li:nth-child(2) a{transition-delay:.15s}
.menu li:nth-child(3) a{transition-delay:.24s}.menu li:nth-child(4) a{transition-delay:.33s}
.menu li:nth-child(5) a{transition-delay:.42s}.menu li:nth-child(6) a{transition-delay:.51s}
/* Разделение на шрифта, à la Sinner: първата дума фина в курсив, останалото плътно черно с главни букви.
   font-variation-settings се нулира изрично на .mfirst, иначе наследява тежестта на родителя .menu a
   и курсивът излиза тежък вместо грациозен. */
.menu a .mfirst{font-family:var(--script);font-style:italic;font-weight:400;
  font-variation-settings:normal;font-size:.99em;letter-spacing:0;color:inherit}
.menu a .mrest{font-family:var(--display);font-weight:600;
  font-variation-settings:"wdth" 100,"wght" 600;text-transform:uppercase;
  letter-spacing:-.02em;color:inherit}
/* Три нива: неактивно е почти скрито в тъмното, hover и текущата страница светят трайно в бяло */
.menu a:hover{color:var(--frost)}
.menu a[aria-current="page"]{color:var(--frost)}
/* „Моят път" е постоянно бял акорд в менюто, независимо от коя страница се отваря */
.menu a.pinned{color:var(--frost)}

/* Официални профили, вградени в overlay менюто долу вляво, далеч от списъка с пунктове */
.menu-social{position:absolute;left:var(--pad);bottom:var(--pad)}
/* Профилите остават самостоятелен слой в ъгъла, не част от списъка, затова са стъпка по-тихи от него.
   Досега стояха на .8 непрозрачност, тоест по-силно от неактивните пунктове на .3, и дърпаха погледа
   към ъгъла вместо към менюто. Приглушени са само тук, във футъра и в hero-то класът си остава какъвто беше. */
.menu .menu-social a{font-size:10px;color:rgba(234,240,242,.42)}

/* ============================================================
   HERO — начална страница (кино): слайдшоу + гигантско име + бадж
   ============================================================ */
.hero{position:relative;overflow:hidden}
.hero.cine{height:100svh;min-height:600px}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;opacity:0;background-size:cover;background-position:center;
  transition:opacity 1.1s ease}
.slide.on{opacity:1}
.veil{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(10,18,22,.58),rgba(10,18,22,.12) 32%,rgba(10,18,22,.2) 60%,rgba(10,18,22,.86) 96%)}

/* Името и мисълта стоят в лява колона, фигурата на снимката остава свободна вдясно.
   Колоната е нарочно тясна, около четиридесет на сто, и не тръгва от ръба на екрана,
   а ляга на същата вертикална линия като съдържанието на останалите секции. */
.name{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-start;
  padding-left:max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
  padding-right:var(--pad);pointer-events:none}
.name .stack{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(16px,2.2vw,26px)}

/* Заигравка с името: Лора и ХРИСТОВА на един ред, фамилията в размера на малките букви на Лора.
   Името си стои на своята естествена ширина, а мисълта отдолу е нарочно по-тясна. */
.name .lockup{display:flex;flex-wrap:nowrap;white-space:nowrap;
  align-items:baseline;gap:clamp(8px,1.2vw,15px)}
.name .first{font-family:var(--script);font-style:italic;font-weight:400;
  font-size:clamp(38px,5.6vw,76px);line-height:1;letter-spacing:0;
  color:rgba(255,255,255,.97);text-shadow:0 4px 40px rgba(0,0,0,.28);
  opacity:0;animation:nameRise 1.1s var(--ease) .2s forwards}
.name .last{font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 100,"wght" 700;
  font-size:clamp(21px,3.1vw,42px);letter-spacing:.04em;text-transform:uppercase;
  color:rgba(255,255,255,.97);text-shadow:0 4px 40px rgba(0,0,0,.28);
  opacity:0;animation:nameRise 1.1s var(--ease) .38s forwards}

/* Мисълта на Лора под името. Влиза трета, след двете части на името. */
.name .hero-quote{border-left:2px solid var(--bronze);padding-left:clamp(14px,1.7vw,24px);
  width:clamp(260px,32vw,440px);
  max-width:calc(100vw - 2 * var(--pad) - 26px);
  opacity:0;animation:nameRise 1.1s var(--ease) .62s forwards}
.name .hero-quote p{font-family:var(--script);font-style:italic;font-weight:400;
  font-size:clamp(15px,1.95vw,27px);line-height:1.44;color:rgba(255,255,255,.95);
  text-shadow:0 3px 26px rgba(0,0,0,.45)}
.name .hero-quote cite{display:block;margin-top:clamp(10px,1.2vw,16px);
  font-family:var(--mono);font-style:normal;font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(234,240,242,.62)}

/* На тесен екран колоната поема почти цялата ширина, а долният ред слиза под нея. */
@media (max-width:700px){
  .name{align-items:flex-start;padding-top:24svh}
  .name .hero-quote{width:calc(100vw - 2 * var(--pad) - 26px)}
  .name .lockup{flex-wrap:wrap;white-space:normal}
}

/* Hero името се надига леко и се появява при зареждане, „Лора" води, „ХРИСТОВА" я следва на кратка пауза */
@keyframes nameRise{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}

.heroui{position:absolute;left:0;right:0;bottom:0;padding:0 var(--pad) clamp(30px,5vh,54px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;z-index:2}
/* Разстоянието мина от 11 на 14 на 29.08.2026, за да има място зоната за
   докосване да се разшири, без две съседни връзки да се застъпват. Виж
   блока „ЦЕЛИ ЗА ДОКОСВАНЕ“ по-долу. */
.social{display:flex;flex-direction:column;gap:14px}
.social a,.social .soon{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(234,240,242,.8);transition:color .2s,letter-spacing .25s}
.social a:hover{color:#fff;letter-spacing:.24em}
/* Беше .social a.soon. От 29.08.2026 профил без адрес не е връзка, а <span>,
   затова селекторът вече не иска <a>. Виж socialItem в site.js. */
.social .soon{color:rgba(234,240,242,.36);cursor:default}

/* Минималистичен резултатен бадж (à la Sinner) */
.plate{display:grid;grid-template-columns:auto auto auto;border:1px solid rgba(234,240,242,.5);
  background:rgba(10,18,22,.16);backdrop-filter:blur(3px)}
.plate div{padding:11px 15px;border-left:1px solid rgba(234,240,242,.5);
  display:flex;flex-direction:column;justify-content:center}
.plate div:first-child{border-left:0}
.plate span{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;line-height:1.5;white-space:nowrap;color:#fff}
/* СТАРИННИТЕ ЦИФРИ СЕ ВРЪЩАТ, 29.08.2026 вечерта, по избор на Камелия.

   Историята за един ден, за да не се върти в кръг. Сутринта „3" излизаше през
   долния ръб на квадратчето и Камелия го определи като бъг. Тогава клетката
   мина на изправени цифри и това наистина оправи изтичането. Вечерта тя посочи
   „3"-ката от „На пистата", тоест `.p-num`, и каза, че иска ТАЗИ форма, само да
   не се крие, ако излезе извън очертанията.

   Формата, която ѝ харесва, е старинната цифра на Cormorant: тя стъпва като
   малка буква и слиза под основната линия, точно както „р". Тя е и по-хубава,
   и по-характерна. Проблемът никога не е бил в самата цифра, а в кутията: при
   междуредие 1 линията на текста е точно колкото кегела, тоест под основната
   линия не остава нищо и опашката излизаше право върху рамката.

   Затова сега: старинните цифри се връщат (тоест правилото за лининг отпада), а
   междуредието става 1,32. Измерено при кегел 44: „3" се качва 18 пиксела над
   основната линия и слиза 13 под нея, тоест иска 31 пиксела мастило, докато
   кутия от 44 при междуредие 1 ѝ дава само 22 надолу от центъра. При 1,32
   кутията става 58 и опашката ляга вътре с въздух отдолу.

   overflow е изрично visible, за да не може някой да я отреже случайно, дори
   ако някога кутията пак се окаже тясна. Това е буквалното искане на Камелия:
   ако излиза, да се вижда, не да се крие. */
/* Отстъпът мина от 20 на 32 пиксела на 29.08.2026, след като дисциплината се
   изписа цяло. Причината е измерена на живо при Синер. Неговият бадж в hero-то
   е решетка от две редици: горе „ATP" и „#", долу „Singles Ranking", а числото
   „1" стои в собствена клетка, висока колкото целия бадж. Клетката с числото
   заема 27,8 на сто от ширината му.
   При нас, след като „индивид." стана „индивидуално", надписът порасна, а
   клетката с числото не, тоест нейният дял падна на 21,8 на сто и тройката
   започна да изглежда стисната между два по-дълги надписа. При 32 пиксела
   отстъп делът се връща около неговия. */
.plate .medal{padding:0 32px;font-family:var(--script);font-style:italic;font-weight:400;
  font-size:clamp(40px,5.4vw,68px);color:var(--bronze);line-height:1.32;
  align-items:center;justify-content:center;background:rgba(255,255,255,.05);
  overflow:visible;position:relative}
/* Числото на медала оживява само тук, 24.08.2026, вариант В от три предложени:
   преброяване от 0 до истинската стойност при първо зареждане (виж скрипта в
   index.html), плюс тих метален блясък, преминаващ през цифрата на всеки няколко
   секунди, като светлина по медал. И двете спират сами при по-малко анимация.

   Два провалени опита преди този: background-clip:text отслабваше плътния бронз
   визуално, буквата излизаше по-тънка. После overflow:hidden на самото .medal,
   за да не изтича блясъкът извън квадратчето, режеше и самата цифра отгоре,
   защото курсивният script шрифт естествено излиза извън собствената си
   line-height кутия. Сега блясъкът живее в собствен слой, .shine, с точно
   неговите собствени граници изрязани, а „3“-ката е извън него, необрязана,
   точно както преди да съществуваше ефектът. */
/* Числото се вдига с 0,18 от кегела. Причината е в самата старинна цифра: тя
   стъпва на основната линия като малка буква, тоест мастилото ѝ не е центрирано
   в собствената си кутия. Измерено при кегел 44 и междуредие 1,32: без вдигане
   над цифрата остават 25,8 пиксела въздух, а под опашката ѝ само 2,8, тоест тя
   изглежда залепена за долната рамка. С вдигането стават около 18 отгоре и 11
   отдолу, което пази усещането, че цифрата стъпва на линия, но опашката вече
   явно е вътре в квадратчето, а не върху ръба му. */
.plate .medal .num{position:relative;display:inline-block;z-index:1;
  font-size:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;
  letter-spacing:normal;text-transform:none;color:inherit;line-height:inherit;
  transform:translateY(-.18em)}
.plate .medal .shine{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.plate .medal .shine::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(115deg,
    transparent 30%, rgba(255,255,255,.85) 48%, transparent 66%);
  transform:translateX(-140%);
  mix-blend-mode:overlay;
  animation:medalShine 4s ease-in-out 1.6s infinite;
}
/* Пътят на светлината заема същия дял от цикъла, колкото и при седемте
   секунди, тоест самото минаване НЕ става по-бързо, само паузата между две
   минавания се къси. Ако се смени и този дял, отблясъкът започва да свисти. */
@keyframes medalShine{
  0%,68%{transform:translateX(-140%)}
  84%,100%{transform:translateX(140%)}
}
@media(prefers-reduced-motion:reduce){
  .plate .medal .shine{animation:none;display:none}
}

/* МЕДАЛЪТ НА МЯСТОТО НА ЦИФРАТА, 09.09.2026.

   Дотук клетката носеше „3“ в наклонен Cormorant и целият блок правила отгоре
   описва нея: кегел, междуредие, вдигане с 0,18, за да легне опашката вътре.
   Иконката не иска нищо от това, затова `.medal-ikona` ги нулира вместо да ги
   пренаписва: така правилата за цифрата остават непокътнати, ако някой ден се
   върне.

   Отстъпът е 15, не 32. Цифрата е тясна, около 25 пиксела мастило, и иска
   въздух отстрани; кръглият медал е 60 широк и пълни мястото сам. При 15
   клетката излиза 90 пиксела, тоест колкото беше и с цифрата, и целият бадж
   запазва широчината си. Освен това 15 е отстъпът и на другите две клетки. */
.plate .medal.medal-ikona{padding:0 15px;font-size:0;line-height:0}
.plate .medal.medal-ikona svg{display:block;overflow:visible;color:var(--bronze)}

/* ГРАВИРАНЕТО, появяването при първо зареждане.

   Линията се изчертава, вместо да изплува: първо лентата, после ръбът на
   медала, накрая петте пръстена един по един отляво надясно. Смисълът е в
   реда, не в ефекта: така се вижда как знакът се сглобява, а пръстените
   идват последни, тоест окото ги хваща.

   Дължините са 2πr, закръглени нагоре, за да не остава чертичка: ръбът при
   радиус 37 иска 233, пръстенът при 8,6 иска 55, а лентата е права, 32 дълга.
   Пише се на самите елементи, защото всеки има своя дължина. */
.medal-ikona .grav .disk{stroke-dasharray:233;stroke-dashoffset:233}
.medal-ikona .grav .lenta{stroke-dasharray:34;stroke-dashoffset:34}
.medal-ikona .grav g circle{stroke-dasharray:55;stroke-dashoffset:55}
.medal-ikona .grav .disk,
.medal-ikona .grav .lenta,
.medal-ikona .grav g circle{animation:gravirai .62s var(--ease) forwards}
.medal-ikona .grav .disk{animation-delay:.35s}
.medal-ikona .grav .lenta{animation-delay:.6s}
.medal-ikona .grav .p1{animation-delay:.82s}
.medal-ikona .grav .p2{animation-delay:.94s}
.medal-ikona .grav .p3{animation-delay:1.06s}
.medal-ikona .grav .p4{animation-delay:1.18s}
.medal-ikona .grav .p5{animation-delay:1.3s}
.medal-ikona .podloga{opacity:0;animation:podlogaIzliva .8s var(--ease) .35s forwards}
@keyframes gravirai{to{stroke-dashoffset:0}}
@keyframes podlogaIzliva{to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .medal-ikona .grav .disk,
  .medal-ikona .grav .lenta,
  .medal-ikona .grav g circle{animation:none;stroke-dashoffset:0}
  .medal-ikona .podloga{animation:none;opacity:1}
}

/* Долу вдясно: баджът и точно под него кредитът на снимката */
.hero-right{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.credit-inline{font-family:var(--mono);font-size:.62rem;letter-spacing:.05em;
  color:rgba(234,240,242,.85);text-shadow:0 1px 3px rgba(0,0,0,.65)}
@media(max-width:560px){
  /* Премерено на 10.09.2026: .heroui реди социалните вляво и баджа вдясно на
     един ред. На 375 пиксела социалните искат около 110, баджът 299, плюс
     отстоянията, тоест 409 при 375 налични: третата кутийка с медала и
     кредитът под нея излизаха извън екрана. Отгоре на това .heroui седи в
     hero-то с overflow, затова нищо не се виждаше като хоризонтално
     превъртане, тоест грешката беше няма. Долу двете се редят едно под
     друго и баджът получава цялата ширина. */
  /* Hero-то слиза от 100svh на 78svh, колкото са и вътрешните страници
     (.hero.page-hero). Причината е сметната, не на око: при „cover“ от
     широкия кадър се вижда част, равна на формата на екрана, делено на
     формата на кадъра. При 375 на 812 това е 0,46 делено на 1,5, тоест
     31 на сто от ширината на снимката. Затова Лора излизаше извън рамката,
     колкото и да наместваме кадъра: рязането се определя от екрана, а не
     от файла. При 78svh формата става 0,61 и се вижда 41 на сто, тоест с
     една трета повече. Изрезките 2:3 отгоре на това избират КОЯ част. */
  .hero.cine{height:78svh;min-height:580px}
  .heroui{flex-direction:column;align-items:stretch;gap:16px}
  .social{flex-direction:row;flex-wrap:wrap;gap:14px}
  .plate .medal{font-size:44px;padding:0 14px}
  .plate .medal.medal-ikona{padding:0 11px}
  .plate .medal.medal-ikona svg{width:46px;height:56px}
}

/* ============================================================
   КЛЮЧАЛКАТА НА ЗАГЛАВИЯТА, .split
   ============================================================
   Първата дума в наклонен Cormorant, останалите в Archivo с главни букви.
   Това е подписът на сайта. Идва от бургер менюто, където всяко име се
   разглобява така, и оттам мина на заглавията на секции в началната
   страница на 28 и 29.08.2026.

   Стойностите тук са снети от началната страница, тоест от .otp-h2, която
   е одобрена. Установено на 31.08.2026: същата ключалка беше писана трети
   път в na-pistata.html като .split-h2, с тежест 600 вместо 700 и без
   разликата в кегела между двете части. Разминаването не се виждаше, защото
   двете заглавия никога не стоят на един екран.

   Цветът НЕ се задава тук, а се наследява. Същото решение като при .lnk от
   27.08.2026. Така една ключалка работи и на тъмно, и на светло поле.

   Кегелът също не се задава тук, идва от стъпалото по-долу. */
.split{display:flex;align-items:baseline;flex-wrap:wrap;gap:.22em;line-height:1.05}
.split .mfirst{font-family:var(--script);font-style:italic;font-weight:400;
  font-variation-settings:normal;font-size:1.06em;letter-spacing:0}
.split .mrest{font-family:var(--display);font-weight:700;
  font-variation-settings:"wdth" 100,"wght" 700;text-transform:uppercase;
  letter-spacing:-.015em;font-size:.9em}

/* ЗАГЛАВИЕ НА СТРАНИЦА, стъпалата.
   ============================================================
   Едно място за всичките, вместо седем. Измерено на 31.08.2026: заглавието
   на страница беше определено на седем места, четири от които направо в
   самите страници, и се беше разминало. На десктоп не личеше, защото трите
   едри удряха общия си таван. На телефон личеше: „Партньорства" излизаше с
   височина на буквата 23,6 срещу 21,9 на „На пистата" и „Отвъд пистата", а
   „Новини" излизаше 14,8 срещу 13,6 на „Моят път". Екипът гледа от телефон.

   Кое стъпало къде:
   а) .t-page   страница с тъмно начало: На пистата, Отвъд пистата, Партньорства
   б) .t-paper  страница на светло поле: Новини
   в) .l-hero h1    правна страница, по-тих глас, без ключалка
   г) .na-hero h1   отделна новина, най-долното стъпало, без ключалка

   Правните страници и отделните новини остават на един глас, тоест само
   Cormorant, нарочно. Те са документи, не заглавни повърхности, и
   ключалката там би звучала по-силно, отколкото ролята им иска. */
.t-page{font-size:clamp(2.6rem,8vw,6rem)}
/* Долната граница е 2rem, не 2.4rem. Мерено на 31.08.2026 по височината на
   малката буква, не по кегела: при 2.4rem двете стъпала се сливаха на телефон,
   19,7 срещу 18,2, тоест разликата изчезваше точно там, където екипът гледа.
   На десктоп никога не е личало, защото там водят 8vw и 5.6vw. Сега телефонът
   дава 19,7 и 15,1, а правната страница остава на 13,6. */
.t-paper{font-size:clamp(2rem,5.6vw,4rem)}

/* ============================================================
   HERO — вътрешна страница (просто: eyebrow + h1 + subtitle)
   ============================================================ */
.hero.page-hero{display:flex;align-items:flex-end;min-height:78svh;
  padding:0 var(--pad) clamp(48px,9vh,110px)}
.hero.page-hero .media{position:absolute;inset:0;z-index:-1;background:var(--ink2)}
.hero.page-hero .media img,.hero.page-hero .media video{width:100%;height:100%;object-fit:cover}
.hero.page-hero .media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,18,22,.9),rgba(10,18,22,.15) 55%,rgba(10,18,22,.4))}

/* СЪЩОТО КАТО ПРИ НАЧАЛНАТА, 17.09.2026, от одита. Първият слайд носи широкия
   файл в inline style, а preload() в site.js го сменя с 1200 чак след като
   страницата е нарисувана, тоест телефонът теглеше и 2400, и 1200. Прагът е
   1000 пиксела, същият като в preload(): до него JS избира 1200. Правилото
   стои тук, не в hero-slides.css, защото „На пистата" не зарежда онзи файл.
   Без телефонни изрезки, кадърът се намества с background-position, виж
   .focus-lora в na-pistata.html. Ако първият кадър се смени, адресът тук се
   сменя с него, както и preload връзките в главата на страницата. */
@media(max-width:1000px){
  .hero.page-hero .slide[data-src="assets/track/lora-track-hero-04"]{
    background-image:url(../assets/track/lora-track-hero-04-1200.jpg) !important;
  }
}
.hero.page-hero h1{font-size:clamp(2.6rem,8vw,6rem);max-width:14ch}
.hero.page-hero .subtitle{font-size:clamp(1.3rem,3.4vw,2.2rem);margin-top:.2em}

/* Фотокредит — задължителен за всяка NordicFocus снимка: „Photo: NordicFocus" */
.slot .credit,.hero .credit{position:absolute;right:10px;bottom:9px;z-index:3;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.05em;
  color:rgba(234,240,242,.85);text-shadow:0 1px 3px rgba(0,0,0,.65);pointer-events:none}
.hero .credit{right:var(--pad);bottom:14px}
.credit-caption{font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;
  color:var(--steel);margin-top:8px}

/* ============================================================
   МЕДИЙНИ СЛОТОВЕ — фиксирани съотношения, смяна = подмяна на файл
   ============================================================ */
.slot{background:var(--ink2);overflow:hidden;position:relative}
.slot img,.slot video{width:100%;height:100%;object-fit:cover}
.slot.hero-ratio{aspect-ratio:var(--ratio-hero)}
.slot.portrait{aspect-ratio:var(--ratio-portrait)}
.slot.gallery{aspect-ratio:var(--ratio-gallery)}
.slot .placeholder{position:absolute;inset:0;display:grid;place-items:center;
  color:var(--steel);font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;border:1px dashed var(--line)}

/* ============================================================
   СЕКЦИИ — тъмни и СВЕТЛИ (ритъм à la Sinner)
   ============================================================ */
.section{padding:clamp(64px,11vh,140px) 0}
.section.alt{background:var(--ink2)}
.section h2{font-size:clamp(1.8rem,4.4vw,3rem)}

/* СВЕТЛОТО ПОЛЕ Е ЧИСТО БЯЛО, решено 28.08.2026 от Камелия, след като видя
   какво точно се променя по подстраниците. Дотогава беше --snow, сиво-бяло
   #EFF3F4, а началната страница вече беше минала на бяло, тоест сайтът носеше
   два бели тона и разликата личеше при всяко преминаване между страниците.

   Токенът --snow остава непокътнат и още се ползва: полетата с факти в „Троян
   спортува" стъпват на него и са единственото място, където сиво-бялото носи
   смисъл, а не е просто фон. */
.section.light{background:var(--paper);color:var(--ink-on-snow)}

/* Цяла бяла страница. Ползва се на „Отвъд пистата" и предстои на „Троян
   спортува", решено от Камелия на 02.09.2026. Фонът на body се вижда само
   през шевовете между блоковете, но щом всичко отгоре е бяло, тъмният фон
   отдолу произвежда точно онези хартиено тънки сиви линии, които гонихме
   днес. Затова се сменя самият фон, а не се кърпят шевовете.
   Футърът носи собствен тъмен фон и не се засяга.

   ВАЖНО: правилото сменя САМО фона на body. НЕ пипа секциите. Първият опит
   ги пребоядисваше наведнъж с `body.all-light .section` и това счупи
   единайсет надписа: те са писани за тъмна секция, тоест светъл текст, и
   станаха бели върху бяло. Верният начин е всяка секция да получи клас
   `light`, защото той сменя И фона, И цвета, и защото за него вече има
   готови изключения из целия base.css. */
body.all-light{background:var(--paper)}

/* --- ШЕВЪТ МЕЖДУ ДВА СВЕТЛИ БЛОКА, поправено 02.09.2026 ---

   Камелия виждаше тънка сива линия под числата на „На пистата“. В кода там
   няма нищо: нито рамка, нито сянка, нито процеп, а двата блока са с един и
   същи бял цвят и се допират на нула пиксела.

   Причината е друга и е чисто рисуване. Височините на секциите идват от
   clamp с vh и излизат дробни, тоест 415,67 пиксела. При екран с двойна
   плътност такъв ръб пада между два физически пиксела и браузърът оставя
   хартиено тънък процеп. През него прозира фонът на BODY, а той е тъмен.
   Тъмна нишка върху бяло се чете като сива линия.

   Доказано на живо: фонът на body беше боядисан временно в червено и
   линията стана червена.

   Поправката: щом два СВЕТЛИ блока се допират, вторият се качва с един
   пиксел и покрива шева. Един пиксел не се вижда никъде другаде. Прави се
   само между светли съседи. Между светъл и тъмен блок такова качване би
   било видимо, а и там процепът бездруго не личи, защото зад него стои
   същият тъмен цвят. */
.section.light + .section.light,
.section.light + .marquee-band,
.section.light + .cine-band,
.marquee-band + .section.light,
.marquee-band + .cine-band,
.cine-band + .section.light,
.cine-band + .marquee-band{margin-top:-1px}
.section.light .eyebrow{color:var(--steel-dk)}
.section.light h2,.section.light h3{color:var(--ink-on-snow)}
.section.light .lead{color:var(--ink-on-snow)}
.section.light .subtitle{color:var(--bronze)}
.section.paper{background:var(--paper);color:var(--ink-on-snow)}

/* ============================================================
   УВОДИ, три стъпала, мерени по височината на малката буква
   ============================================================
   Измерено на живо на 30.08.2026, на 1536 и на 375 пиксела.

   Кегелът лъже. Cormorant има ниски малки букви, Archivo високи. При
   еднакъв кегел от 48 пиксела височината на „х" е 19 при Cormorant и 24
   при Archivo, тоест разлика от една пета, докато ширината им е
   практически еднаква, 232,4 срещу 231,9 пиксела на думата „характерна".
   Тоест същият кегел дава по-дребна буква, без да спести място.

   Какво имаше преди. Началната страница носеше 48 пиксела в Cormorant,
   тоест височина 19. „На пистата" носеше 40 в Archivo, тоест височина 20.
   Подстраницата надвикваше откриващото изречение на сайта. На телефон
   беше обърнато напълно: началната беше НАЙ-ДРЕБНАТА на целия сайт, с
   височина 10, срещу 11 на „Моят път" и „Отвъд пистата" и 12 на „На
   пистата". А екипът гледа точно от телефон.

   Причината беше една и се повтори пет пъти: само началната страница
   заявяваше семейство. Останалите пет увода мълчаха и падаха на шрифта
   на body, тоест на гротеска, без някой да го е избирал.

   Затова определенията стоят ТУК. Пет еднакви правила, писани поотделно
   в пет файла, се разминаха веднъж и ще се разминат пак.

   Стълбицата, по височина на „х", десктоп и телефон:
   а) уводът на сайта, 19 и 12
   б) уводът на страница, 15 и 11
   в) уводният абзац, 13 и 10

   Първото стъпало, .hook-lead, остава в index.html, защото се ползва
   само там и защото при него стои измерването срещу janniksinner.com.
   Там се пипна само долната граница, от 1,55rem на 1,9rem, за да се
   изправи телефонът. Десктопът му не е докосван. */

/* Второ стъпало: уводът на страница. Кратко твърдение, не абзац.
   Ползва се само на „На пистата". Cormorant, като началната страница,
   защото ролята е същата, само едно стъпало по-долу.

   Разредката е нула, както при .hook-lead. Предишната стойност -0,01em
   беше писана за гротеска и при сериф стеснява без нужда.
   Междуредието е 1,2, а не 1,26: ниските букви на Cormorant искат
   по-стегнат ред, иначе редът се разпада. */
.intro-lead{font-family:var(--script-light);font-style:normal;font-weight:300;
  font-size:clamp(1.7rem,2.5vw,2.4rem);line-height:1.2;
  letter-spacing:0;color:var(--frost)}
/* Изписването дума по дума слага всяка дума в маска с overflow:hidden.
   Дълбочината от 0,08em по-долу е мерена за гротеска. Опашките на
   Cormorant слизат по-надолу и се режеха, затова тук маската е по-дълбока. */
.intro-lead[data-typeset] .w{padding-bottom:.16em;margin-bottom:-.16em}
/* Стъпалото е писано за тъмна секция, оттам --frost. На светла се обръща,
   по същия начин както .subtitle по-горе. Добавено 02.09.2026, когато
   откриващото твърдение на „На пистата" мина в бялата лента. */
.section.light .intro-lead,.section.paper .intro-lead{color:var(--ink-on-snow)}

/* Трето стъпало: уводният абзац. По-дълъг текст, който се чете, затова
   остава в гротеска. Тънък сериф на 190 до 250 знака се чете зле и точно
   това е причината шрифтът тук да е различен нарочно, а не по пропуск.
   Ползва се на „Моят път", „Отвъд пистата", „Троян спортува" и
   „Партньорства и контакт".

   ДОЛНАТА ГРАНИЦА Е 1,3rem, НЕ 1,15rem, и това е мерено, не избрано.
   При 1,15rem уводът излизаше 18,4 пиксела на телефон, тоест височина на
   „х" 9, а обикновеният абзац на същата страница е 17,3 пиксела, също
   височина 9. Уводът преставаше да бъде увод и се сливаше с текста под
   себе си. При 1,3rem е 20,8 пиксела, тоест височина 11, и стъпката над
   текста се вижда. Десктопът не се променя от това: там води 1,7vw. */
/* СЕМЕЙСТВОТО СЕ ОБЯВЯВА И ТУК, 03.09.2026. Коментарът по-горе описва точно
   тази грешка, но я поправи само наполовина: кегелът и теглото слязоха в
   base.css, а семейството остана неказано и уводите пак падаха на шрифта на
   body, тоест на гротеска. Днес се видя на „Троян спортува": уводът беше
   Archivo, а цитатът точно под него Cormorant, тоест два шрифта в един блок.
   Правилото важи и за „За партньори", която ползва същия клас. */
.intro .lead,.ts-lead{font-family:var(--script-light);
  font-size:clamp(1.3rem,1.7vw,1.6rem);font-weight:400;
  line-height:1.5}

/* Бележка за телефона. Там второто и третото стъпало се изравняват, и
   двете на височина 11, защото между обикновения текст с 9 и увода на
   сайта с 12 просто няма място за четири нива. На тесен екран важи само
   едно: началната страница отгоре, двата увода по средата, текстът отдолу.
   Разделянето на второто от третото стъпало е нещо, което се вижда на
   десктоп, 15 срещу 13, и това е достатъчно. */

/* --- Правни страници (светли, документен изглед) --- */
.l-hero{background:var(--paper);color:var(--ink-on-snow);
  padding:clamp(120px,18vh,190px) 0 clamp(28px,5vh,48px)}
.l-hero h1{font-family:var(--script);font-weight:600;letter-spacing:0;
  font-size:clamp(2.2rem,5vw,3.6rem);color:var(--ink-on-snow);margin-top:6px}
.l-hero .updated{margin-top:14px;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--steel-dk)}
.draft-note{background:var(--bronze);color:#160C05;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.04em;padding:12px var(--pad);text-align:center;line-height:1.5}
.legal{max-width:760px;margin-inline:auto}
.legal h2{font-size:clamp(1.25rem,2.5vw,1.75rem);margin:40px 0 12px;color:var(--ink-on-snow)}
.legal h2:first-child{margin-top:0}
.legal p{margin-bottom:14px;line-height:1.7;color:#26343b}
.legal ul{margin:0 0 16px 22px;list-style:disc}
.legal li{margin-bottom:8px;line-height:1.6;color:#26343b}
.legal strong{color:var(--ink-on-snow);font-weight:600}

/* --- Пул-цитат (реални думи на Лора), преизползваем --- */
.pullquote{max-width:840px;margin-inline:auto;text-align:center}
.pullquote p{font-family:var(--script);font-style:italic;font-weight:500;
  font-size:clamp(1.5rem,3.3vw,2.35rem);line-height:1.32;color:var(--frost)}
.pullquote cite{display:block;margin-top:20px;font-family:var(--mono);font-style:normal;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.section.light .pullquote p{color:var(--ink-on-snow)}
.section.light .pullquote cite{color:var(--steel-dk)}

/* --- Бутони --- */
.btn{display:inline-block;font-size:.82rem;letter-spacing:.06em;padding:14px 26px;
  border:1px solid currentColor;border-radius:var(--radius);transition:.3s var(--ease)}
.btn:hover{background:var(--frost);color:var(--ink);border-color:var(--frost)}
.section.light .btn:hover{background:var(--ink-on-snow);color:var(--snow);border-color:var(--ink-on-snow)}
.btn.solid{background:var(--teal);border-color:var(--teal);color:var(--ink);font-weight:600}
.btn.solid:hover{background:transparent;color:var(--frost);border-color:var(--frost)}

/* ============================================================
   ФУТЪР (инжектира се от site.js)
   ============================================================ */
/* Тъмен футър, à la Sinner, поправено 24.08.2026 по точна референция (екранна
   снимка от Камелия на janniksinner.com): фонът е тъмен като hero-то, не бял
   както опитахме първо. Собствен ред горе с лого вляво и wordmark вдясно
   (същият чифт като горния хедър, тук вече в собствените си тъмни цветове,
   не преправени), после голяма пауза, после името и колоните обратно на
   ЕДИН ред, рамо до рамо (както преди днешната поправка), не един под друг.
   Без разделителна линия между лентата горе и реда с името, само въздух,
   точно каквото се вижда на референтния кадър. */
#site-footer{padding:clamp(60px,10vh,110px) var(--pad) 40px;background:var(--ink)}
.f-top{max-width:var(--maxw);margin:0 auto clamp(90px,14vh,170px);
  display:flex;align-items:center;justify-content:space-between}
.f-top .wordmark{position:static;left:auto;transform:none}
.f-wrap{max-width:var(--maxw);margin-inline:auto;display:flex;flex-wrap:wrap;
  justify-content:flex-start;align-items:flex-start;gap:clamp(60px,9vw,150px)}
.f-name{display:flex;align-items:baseline;gap:.22em;font-size:clamp(1.8rem,4.4vw,3.2rem);line-height:1}
.f-name .mfirst{font-family:var(--script);font-style:italic;font-weight:400;color:var(--frost)}
.f-name .mrest{font-family:var(--display);font-weight:600;font-variation-settings:"wdth" 100,"wght" 600;
  text-transform:uppercase;letter-spacing:-.01em;color:var(--frost)}
.f-cols{display:flex;gap:clamp(40px,7vw,90px)}
.f-label{font-family:var(--script);font-style:italic;font-weight:500;font-size:1.14rem;
  color:var(--steel);margin-bottom:14px}
/* Разстоянието мина от 9 на 12 на 29.08.2026, по същата причина като при
   .social, виж блока „ЦЕЛИ ЗА ДОКОСВАНЕ“. */
.f-links{display:flex;flex-direction:column;gap:12px}
/* Двете колонки с профили под общия етикет „Социални мрежи". Отстоянието е
   по-малко от това между разделите в .f-cols, за да се четат като един
   списък в две колонки, а не като два отделни раздела. */
.f-social2{display:flex;gap:clamp(22px,4vw,48px)}
.f-links a,.f-links .soon{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--frost);transition:color .25s var(--ease)}
.f-links a:hover{color:var(--bronze)}
/* Профил без адрес: същият надпис, приглушен, без курсор и без клик.
   Виж socialItem в site.js и бележката при SOCIAL. */
.f-links .soon{color:var(--steel);cursor:default}
#site-footer .rows{max-width:var(--maxw);margin:clamp(40px,6vh,64px) auto 0}
#site-footer .copy{width:100%;color:var(--steel);font-family:var(--mono);
  font-size:.68rem;letter-spacing:.08em;border-top:1px solid var(--line);padding-top:20px}
@media(max-width:620px){.f-wrap{flex-direction:column}.f-cols{gap:40px}}

/* Светъл футър. Включва се с клас light-foot върху body, по същия начин, по
   който light-top прави горната лента тъмна над светъл връх. Ползва се на
   „На пистата" от 26.08.2026, по желание на Камелия.

   Обръщат се четирите роли на цвета: фонът от мастилено на снежно, текстът
   обратно, приглушеното от --steel на --steel-dk, който покрива нормата за
   контраст върху светло, и линиите от --line на --line-dk. Бронзът при hover
   става --bronze-ink по същата причина. */
body.light-foot #site-footer{background:var(--paper)}
body.light-foot #site-footer .f-name .mfirst,
body.light-foot #site-footer .f-name .mrest,
body.light-foot #site-footer .f-links a,
body.light-foot #site-footer .wordmark,
body.light-foot #site-footer .logo b{color:var(--ink-on-snow)}
body.light-foot #site-footer .logo{border-color:rgba(12,20,24,.3)}
body.light-foot #site-footer .f-label{color:var(--steel-dk)}
body.light-foot #site-footer .copy{color:var(--steel-dk);border-top-color:var(--line-dk)}
body.light-foot #site-footer .f-links a:hover{color:var(--bronze-ink)}


/* Скрито за окото, четимо за екранните четци. Живееше в <style> на
   „Троян спортува", изнесено тук на 26.08.2026, когато потрябва и на
   „На пистата" за годините на сезоните. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ВРЪЗКАТА ЗА ПРЕСКАЧАНЕ НА МЕНЮТО, 17.09.2026, от одита. Първият елемент в
   body на всяка страница, води към <main id="sadarzhanie">. Стои над горния
   ръб на екрана и слиза само при фокус от клавиатура, мишката не я вижда.
   Бронзова подложка с тъмен текст, както всяко бронзово копче на сайта,
   защото бронз върху бяло не става за текст. z-index е над хедъра и менюто. */
.skip{position:fixed;left:var(--pad);top:-80px;z-index:120;padding:10px 14px;
  background:var(--bronze);color:var(--ink);font-family:var(--mono);font-size:.72rem;
  font-weight:500;letter-spacing:.12em;text-transform:uppercase;transition:top .2s var(--ease)}
.skip:focus{top:12px;outline:2px solid var(--ink);outline-offset:2px}

/* НАВИГАЦИЯ БЕЗ JAVASCRIPT, 17.09.2026, от одита. Хедърът и футърът се строят
   от site.js, тоест без него страницата нямаше нито една връзка. Блокът стои в
   <noscript> вътре в #site-header и изчезва в мига, в който скриптът пренапише
   хедъра, тоест при включен JavaScript никога не се вижда. Девет връзки: шестте
   от менюто и трите правни, на двата езика, защото без скрипт смяна на езика
   няма. */
.bez-js{padding:14px var(--pad);display:flex;flex-wrap:wrap;gap:8px 18px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  border-bottom:1px solid rgba(234,240,242,.2)}
body.all-light .bez-js{color:var(--ink-on-snow);border-bottom-color:rgba(12,20,24,.2)}
.bez-js a:hover,.bez-js a:focus-visible{color:var(--bronze-ink)}

/* ============================================================
   ИЗПИСВАНЕ ДУМА ПО ДУМА, 26.08.2026
   Всяка дума стои в собствена маска и се вдига отдолу нагоре, със стъпка
   спрямо предната. Стъпката се задава от site.js, функция initTypeset,
   защото отделните елементи за думите се правят там.
   vertical-align:top пази реда от разместване, защото маските са inline-block.
   ============================================================ */
[data-typeset] .w{display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.08em;margin-bottom:-.08em}
[data-typeset] .w > i{display:inline-block;font-style:inherit;font-weight:inherit;
  transform:translateY(115%);transition:transform .9s var(--ease)}
[data-typeset].in .w > i{transform:translateY(0)}
/* Наклонена дума вътре в разглобеното изречение, виж typesetOne. */
[data-typeset] .w.kurs > i{font-style:italic}
/* МАСТИЛОТО СЕ НАЛИВА, 12.09.2026, избрано от Камелия за заключителния цитат
   на „Отвъд пистата". Думите стоят на местата си от първия миг, но съвсем
   бледи, и мастилото им идва една по една. Нищо не се мести: изречението
   просто идва на себе си. Бледото е само преходно състояние. */
[data-typeset="mastilo"] .w{overflow:visible}
[data-typeset="mastilo"] .w > i{transform:none;opacity:.12;
  transition:opacity .9s var(--ease)}
[data-typeset="mastilo"].in .w > i{opacity:1}
@media (prefers-reduced-motion:reduce){
  [data-typeset] .w > i{transform:none;transition:none}
  [data-typeset="mastilo"] .w > i{opacity:1}
}

/* ============================================================
   ДВИЖЕНИЕ — бавни плавни появявания при скрол
   ============================================================ */
.reveal{opacity:0;transform:translateY(var(--reveal-shift));
  transition:opacity var(--reveal-dur) var(--ease),transform var(--reveal-dur) var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .slide{transition:none}
  .name .first,.name .last{opacity:1;transform:none;animation:none}
}

/* ============================================================
   ОГРАДЕН EYEBROW — бронзова чертичка от двете страни
   Живееше дублиран в <style> на index.html и на novini.html.
   Изнесен тук на 25.08.2026, когато потрябва и на страниците на
   отделните новини, тоест на шест места. Едно определение, едно място.
   ============================================================ */
.eyebrow-flanked{display:flex;align-items:center;gap:14px;justify-content:flex-start;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--steel-dk)}
.eyebrow-flanked::before,.eyebrow-flanked::after{content:"";width:26px;height:1px;
  background:var(--bronze)}

/* ============================================================
   СТРАНИЦА НА ОТДЕЛНА НОВИНА (novina-*.html), 25.08.2026
   По модела на popovalbert.com/en/...: снимка, кратък текст на езика на
   читателя, копчета за споделяне, връзка към първоизточника и прелистване
   между новините. Смисълът е англоезичният посетител да получи новината
   на своя език, вместо да се удря в български материал зад линка.
   ============================================================ */
.na-hero{background:var(--paper);color:var(--ink-on-snow);
  padding:clamp(120px,18vh,180px) 0 clamp(22px,4vh,38px)}
.na-hero .wrap{max-width:900px}
.na-hero h1{font-family:var(--script);font-weight:600;letter-spacing:0;line-height:1.14;
  font-size:clamp(1.9rem,4.2vw,3.1rem);color:var(--ink-on-snow);margin-top:12px;max-width:22ch}
.na-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;row-gap:7px;margin-top:18px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel-dk)}
.na-meta > span{white-space:nowrap}
.na-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--bronze);flex:0 0 4px}

.na-sec{padding-top:clamp(16px,3vh,32px)}
.na-wrap{max-width:760px;margin-inline:auto}
.na-figure .slot{margin-bottom:clamp(26px,4vh,40px)}
.na-text p{font-size:clamp(1rem,1.4vw,1.1rem);line-height:1.72;color:var(--ink-on-snow);
  font-weight:300}
.na-text p + p{margin-top:1.1em}
.na-text a{color:var(--bronze);border-bottom:1px solid rgba(192,133,82,.4);
  transition:border-color .3s var(--ease)}
.na-text a:hover{border-bottom-color:var(--bronze)}

/* Подножие: първоизточникът вляво, копчетата за споделяне вдясно. */
.na-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:20px;margin-top:clamp(30px,5vh,46px);padding-top:24px;border-top:1px solid var(--line-dk)}
.na-src{display:inline-flex;align-items:baseline;gap:9px;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze);
  transition:opacity .3s var(--ease)}
.na-src:hover{opacity:.72}
.na-src::after{content:"↗";font-size:.9em;transition:transform .4s var(--ease)}
.na-src:hover::after{transform:translate(2px,-2px)}
/* Езиковата маркировка е нарочно тиха: с една стъпка по-дребен шрифт от
   надписа „Източник", без главни букви, приглушен сив, без разделител.
   Показва се само в английската версия, на български е излишна. */
.na-lang{display:none;font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;
  color:var(--steel-dk);opacity:.62;font-style:normal}
body.en .na-lang{display:inline}

/* Копчета за споделяне: тънки кръгчета, същият език като стрелките на
   новинарската лента. Адресите се сглобяват от site.js при зареждане,
   защото зависят от истинския адрес на страницата. */
.share{display:flex;align-items:center;gap:10px}
.share .sh{width:36px;height:36px;flex:0 0 36px;border-radius:50%;border:1px solid var(--line-dk);
  display:flex;align-items:center;justify-content:center;color:var(--steel-dk);
  background:transparent;transition:.28s var(--ease);padding:0}
.share .sh svg{width:16px;height:16px;display:block}
/* Всяка мрежа стои в собствения си цвят, по искане на Камелия, 25.08.2026.
   В покой цветът е само в знака, кръгчето остава тънко и неутрално, за да не
   се превърне редът в три цветни петна върху иначе монохромна страница.
   При посочване кръгчето се пълни с цвета на мрежата и знакът става бял.
   Стойностите са официалните фирмени цветове на двете марки. */
.share .sh[data-share="facebook"]{color:#1877F2}
.share .sh[data-share="linkedin"]{color:#0A66C2}
.share .sh[data-share="facebook"]:hover{background:#1877F2;border-color:#1877F2;color:#fff}
.share .sh[data-share="linkedin"]:hover{background:#0A66C2;border-color:#0A66C2;color:#fff}
/* Копирането на връзката не е марка, затова остава в езика на сайта, бронз. */
.share .sh[data-share="copy"]:hover,.share .sh[data-share="copy"].copied{
  background:var(--bronze);border-color:var(--bronze);color:var(--ink)}

/* Прелистване между новините, по модела на реферецията: назад, всички, напред. */
.na-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:clamp(34px,6vh,56px);font-family:var(--mono);font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase}
.na-nav a{color:var(--steel-dk);transition:color .3s var(--ease)}
.na-nav a:hover{color:var(--bronze)}
.na-nav .mid{color:var(--ink-on-snow)}

/* ЦЕЛИ ЗА ДОКОСВАНЕ в страницата на новина, 12.09.2026, от прегледа за
   телефон. „Източник", „Всички новини" и двете стрелки за прелистване са
   текстови редове с височина 16 до 18 пиксела, тоест под пръст. Зоната се
   уголемява с невидим слой, не с подложка: така видът и подредбата остават
   същите. Същият похват като точките под кино галерията от 29.08.2026.
   Кръгчетата за споделяне са 36 и стигат до 44. */
@media (pointer:coarse){
  .na-src,.na-nav a,.share .sh{position:relative}
  .na-src::before,.na-nav a::after{content:"";position:absolute;inset:-14px -10px}
  .share .sh::after{content:"";position:absolute;inset:-4px}
}
.na-nav .off{opacity:.32;pointer-events:none}
@media(max-width:560px){
  .na-foot{flex-direction:column;align-items:flex-start}
  .na-nav{font-size:.64rem;letter-spacing:.08em}
}

/* ============================================================
   КИНО ГАЛЕРИЯ (.cine-band)
   Преместена тук от na-pistata.html на 27.08.2026, защото същата секция
   застава и на началната страница и трябва да има един източник.

   Всички селектори са обхванати под .cine-band нарочно, а не оставени
   голи. Причината е конкретна: hero-то на всяка страница носи класа
   .hero.cine, тоест голо правило .cine{display:flex;overflow-x:auto}
   щеше да го счупи навсякъде. Обхващането е и това, което вдига
   тежестта на .cine-title над .section h2 от base.css.
   ============================================================ */
/* ============================================================
   КИНО ГАЛЕРИЯ, втора редакция по модела на janniksinner.com.

   Три числа са свалени от него и пренесени: кадърът заема почти цялата
   височина на екрана, разстоянието между кадрите е нула, а прелистването е
   автоматично и безкрайно. Скоростта е наша, по-бърза от hero-то.

   Височината е --gh, съотношението на всеки кадър е --ar, ширината се смята
   от двете. Затова хоризонталният излиза широк, вертикалният тесен и нито
   един не се реже. Това е и разликата с Синер: при него всичко минава през
   една рамка с изрязване, което му се разминава, защото четиринайсет от
   петнайсетте му кадъра са хоризонтални.
   ============================================================ */
/* Марковото заглавие над лентата. При Синер е SINNER в гротеск и веднага
   след него Official в курсив, изравнено вляво. Тук е центрирано, по желание
   на Камелия, и ползва двата шрифта, които сайтът вече има: Archivo за
   фамилията и Playfair за Official, същата двойка като в подписа на футъра.

   Блясъкът е един светъл откос, който минава през буквите веднъж на девет
   секунди. Направен е с градиент, изрязан по формата на текста, а не със
   сянка или контур, тоест буквите остават чисто бели, когато откосът не е
   върху тях. Ако браузърът не поддържа изрязване по текст, остава плътното
   бяло отгоре и нищо не се губи. */
/* Селекторът нарочно е .section .cine-title, а не само класът: base.css
   носи .section h2 със свой размер и при равна тежест печели той. */
/* Надписът е около осем и половина пъти по-широк от кегела си. За да се
   събира, размерът върви с ширината на екрана, а не с фиксиран максимум,
   който на тесен монитор реже. Измерено на 1024, 1366 и 1440, на двата езика.

   Стойността е 9,5 на сто от ширината, а не 10, нарочно: при 10 резервът на
   1024 пиксела падаше до шест на сто, а ако Archivo или Playfair не се
   заредят и се падне на резервните шрифтове, тези шест на сто могат да не
   стигнат. Сега резервът е около десет на сто навсякъде. */
/* Полето е бяло, а надписът черен, решено 27.08.2026. Дотогава секцията беше
   тъмна с бял надпис. Обръщането е по референцията: при Синер този раздел е на
   бяло, надписът SINNEROfficial е черен и кадрите излизат изпод буквите.

   --zastap е колко от височината на надписа влиза в кадрите. Стойността е
   около трийсет и пет на сто от реда, тоест буквите стъпват в лентата, но
   горните им две трети остават на чисто поле. */
.cine-band{--zastap:clamp(16px,3.2vw,58px);
  background:var(--paper);color:var(--ink-on-snow)}
.cine-band .cine-title{text-align:center;margin:0;
  padding:0 var(--pad);position:relative;z-index:3;
  font-size:clamp(2.2rem,9vw,11rem);line-height:.94;color:var(--ink-on-snow)}
/* Кегелът слезе от 9,5 на 9 на сто от ширината заедно с разредката от
   27.08.2026. Разредката изяде резерва отстрани: измерено при 1500 пиксела
   той падна от около десет на сто на пет и половина, а бележката отгоре
   казва защо десет са нужни. При 9 на сто резервът се връща над десет. */
/* Разредката е поискана от Камелия на 27.08.2026. Дотогава беше отрицателна,
   тоест буквите се събираха една в друга, а двете думи се долепяха. Сега
   буквите дишат, а между HRISTOVA и Official стои чиста четвърт от кегела. */
.cine-band .cine-title .ct-name{font-family:var(--display);font-weight:700;
  font-variation-settings:"wdth" 100,"wght" 700;
  text-transform:uppercase;letter-spacing:.028em}
.cine-band .cine-title em{font-family:var(--script);font-style:italic;font-weight:400;
  text-transform:none;letter-spacing:.01em;margin-left:.24em}

/* Блясъкът отпадна заедно с тъмното поле. Той беше един бял откос, изрязан по
   формата на буквите, тоест имаше смисъл само докато те бяха бели на тъмно.
   Върху черни букви на бяло същият откос ги избелва, не ги подчертава. */

/* Кадрите се качват под буквите. Пелената отгоре е това, което прави застъпването
   четимо: горните осем на сто от кадрите се измерват от почти черно (0,025) до
   почти чисто бяло (1,000), тоест нито черен, нито бял текст държи нормата върху
   всички девет. Бялата пелена вдига най-тъмния кадър до стойност, при която
   черните букви минават 4,5 към 1, а върху светлите кадри просто не се вижда,
   защото полето и без това е бяло. Гасне надолу и няма ръб. */
.cine-band .cine-stage{position:relative;margin-top:calc(-1 * var(--zastap))}
.cine-band .cine-stage::before{content:"";position:absolute;z-index:2;
  left:0;right:0;top:0;height:calc(var(--zastap) * 2.1);pointer-events:none;
  background:linear-gradient(to bottom,
    var(--paper) 0%,
    rgba(255,255,255,.72) 46%,
    rgba(255,255,255,0) 100%)}

.cine-band .cine{--gh:clamp(360px,80svh,900px);
  display:flex;gap:0;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  /* Нула отстъп отляво: първият кадър опира в самия ръб на екрана, без
     ивица фон преди него. По желание на Камелия от 26.08.2026. Преди тук
     левият ръб лягаше на линията на текстовата колона. */
  padding:0;
  /* Лентата се движи сама, тоест лентата за скрол долу само шуми. */
  scrollbar-width:none}
.cine-band .cine::-webkit-scrollbar{display:none}
.cine-band .cine:focus-visible{outline:1px solid var(--bronze);outline-offset:4px}

/* Фонът на рамката е СВЕТЪЛ, не тъмен, и това не е естетика.

   Височината на лентата идва от --gh, тоест от височината на екрана, и при
   повечето прозорци излиза дробна. При екран с двойна плътност долният или
   горният ръб на кадъра пада между два физически пиксела и се показва ивица
   от фона на рамката, широка по-малко от пиксел. Докато фонът беше тъмен, тя
   се четеше като тънка сива линия през цялата лента. Камелия я видя, аз не,
   защото при моята ширина височината излизаше точно кръгла.

   Светъл фон прави същата ивица невидима, защото около лентата е бяло. Той
   продължава да върши и старата си работа, тоест да показва къде стои кадър,
   който още не се е заредил. Същият случай като шева между два светли блока,
   поправен по-рано на 02.09.2026. */
.cine-band .cine figure{flex:0 0 auto;margin:0;scroll-snap-align:start;position:relative;
  width:calc(var(--gh) * var(--ar));height:var(--gh);
  background:var(--snow);overflow:hidden}
.cine-band .cine figure img{width:100%;height:100%;object-fit:cover;display:block}

/* Кредитът е задължителен по договора и затова пътува върху кадъра, както в
   hero-то. Под кадъра вече няма място, разстоянието е нула.

   Тъмната подложка влезе на 26.08.2026, с деветия кадър. Дотогава всички
   кадри бяха тъмни в долния десен ъгъл и стигаше сянка под буквите. Портретът
   от фотосесията е на светъл студиен фон и там измереният контраст падна на
   1,98 към 1 при норма 4,5, тоест кредитът на практика изчезваше, а той е
   договорно задължение, не украса.

   Черно на 50 на сто дига контраста до 4,88 върху най-светлата точка на този
   ъгъл. Слага се на всички кадри, а не само на светлия, защото един кредит,
   който изглежда различно на всеки девети кадър, се чете като грешка. */
.cine-band .cine figure .credit{position:absolute;right:12px;bottom:10px;z-index:2;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.05em;
  color:rgba(234,240,242,.95);pointer-events:none;
  padding:3px 7px;border-radius:2px;background:rgba(6,12,16,.5)}

/* Бутонът: лявата половина е надпис без дясна рамка, дясната е стрелка със
   своя. Двете се четат като един елемент, точно както при Синер, и седят
   върху снимките в долната им трета. */
.cine-band .cine-btn{position:absolute;z-index:3;display:flex;align-items:stretch;
  right:clamp(16px,7vw,150px);bottom:clamp(48px,20%,180px)}
/* Пелена под бутона, добавена 29.08.2026. Дотогава фонът беше прозрачен, а
   надписът и рамката са в --frost, тоест почти бяло. Върху кадрите със сняг и
   светло небе (07 е най-лошият) бутонът просто не се виждаше.
   Плътността не е избрана на око: най-светлият пиксел под него е около
   254,252,254, а за 4,5 към 1 спрямо --frost трябва поне 0,62. При 0,55
   излиза 4,0, тоест под нормата. Същият похват като на кредита отгоре, само
   че там 0,5 стига, защото надписът е по-дребен и не е бутон. */
.cine-band .cb-prev,.cine-band .cb-next{background:rgba(6,12,16,.62);color:var(--frost);cursor:pointer;
  border:3px solid rgba(234,240,242,.85);
  transition:background-color .35s var(--ease),color .35s var(--ease),opacity .35s var(--ease)}
.cine-band .cb-prev{border-right:0;display:flex;flex-direction:column;justify-content:center;
  gap:2px;padding:10px clamp(12px,1.4vw,18px);text-align:left;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  line-height:1.25}
.cine-band .cb-prev em{font-style:italic;text-transform:none;letter-spacing:.06em;font-size:.72rem}
.cine-band .cb-next{display:grid;place-items:center;padding:0 clamp(14px,1.6vw,22px)}
.cine-band .cb-next svg{fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.cine-band .cb-prev:hover,.cine-band .cb-next:hover{background:var(--frost);color:var(--ink)}
.cine-band .cb-prev:focus-visible,.cine-band .cb-next:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}

/* Под лентата стоят само номерата, докъде си стигнал. */
.cine-band .cine-dots{display:flex;flex-wrap:wrap;gap:clamp(10px,1.4vw,18px);
  list-style:none;margin:clamp(18px,2.4vw,28px) 0 0;padding:0}
.cine-band .cd{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  color:var(--steel-dk);background:none;border:0;padding:5px 0 7px;cursor:pointer;
  position:relative;transition:color .35s var(--ease)}
.cine-band .cd::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--bronze);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease)}
.cine-band .cd:hover{color:var(--ink-on-snow)}
.cine-band .cd[aria-current="true"]{color:var(--bronze)}
.cine-band .cd[aria-current="true"]::after{transform:scaleX(1)}
.cine-band .cd:focus-visible{outline:1px solid var(--bronze);outline-offset:3px}

/* ЦЕЛИ ЗА ДОКОСВАНЕ, добавено 29.08.2026.

   Измерено на живо на 375 пиксела: връзките в hero-то са високи 27 пиксела, а
   „X“ е широка осем; същите връзки във футъра са високи 17; номерата на
   галерията са 15 на 27. Минимумът по WCAG 2.2 е 24 на 24 пиксела, тоест три
   от четирите падат под него, а „X“ е практически непопадаема с палец.

   Надписите НЕ растат. Уголемява се само зоната за докосване, през невидим
   слой отгоре. Така нито един отстъп, нито един ритъм по страницата не мърда,
   а на мишка разликата не се усеща изобщо.

   Разширението е ограничено до половината от разстоянието между съседните
   връзки, за да не се застъпват две зони и палецът да не улучва съседа. Затова
   и двете разстояния се вдигат мъничко, 11 на 14 в hero-то и 9 на 12 във
   футъра, което дава по 38 и по 29 пиксела височина. Под 44 сме, но 44 е
   препоръка на Епъл, не норма; нормата 24 е покрита с голяма разлика.

   Самите разстояния са вдигнати там, където са обявени, не тук, за да няма
   два реда за едно и също: виж gap при .social и при .f-links по-горе. */
.social a,.f-links a,.cine-band .cd{position:relative}
.social a::before,.f-links a::before,.cine-band .cd::before{
  content:"";position:absolute;z-index:1}
.social a::before{inset:-7px -12px}
.f-links a::before{inset:-6px -12px}
.cine-band .cd::before{inset:-4px -7px}
/* Езикът и бургерът в горната лента, добавено 12.09.2026 от прегледа за
   телефон: знамето е 34 на 16, бургерът 30 на 31, тоест и двете са под
   пръст. Зоната се уголемява с невидим слой, видът остава същият. Само при
   докосване, за да не се уголемяват целите с мишка. */
@media (pointer:coarse){
  /* Рамката на езика реже с overflow:hidden, тоест невидимата зона трябва да
     може да излезе извън нея. Самото знаме си остава в рамката. */
  .lang{overflow:visible}
  .lang-flag,.burger{position:relative}
  /* z-index, защото съседните слоеве в лентата рисуват отгоре и без него
     невидимата зона не хваща докосването. */
  .lang-flag::before,.burger::before{content:"";position:absolute;inset:-14px -10px;z-index:2}
}

@media (max-width:700px){
  /* На телефон еднаквата височина се предава. При 375 пиксела хоризонталният
     кадър излизаше далеч извън екрана, а идеята на секцията е обратната.
     Тук води ширината: кадърът е най-много 96 на сто от екрана, височината
     следва съотношението. min() разпознава ориентацията сам, без отделен
     клас: за хоризонталния по-малкото е ограничението по ширина, за
     вертикалния собствената му ширина, която и без това е по-тясна. */
  /* „ХРИСТОВАOfficial" е дълъг надпис. При 375 пиксела и общата стойност
     той опира точно в ръба, тоест на по-тесен телефон би преляла. Тук
     получава резерв. */
  .cine-band .cine-title{font-size:clamp(1.4rem,7.9vw,3rem)}

  /* Поправка 27.08.2026, по бележка на Камелия. Дотогава на телефон водеше
     ширината, а височината идваше от съотношението, тоест вертикалният кадър
     увисваше с двеста пиксела по-надолу от хоризонталния и лентата се разпадаше.

     Сега правилото е същото като на голям екран: обща височина, свободна ширина.
     Отпадна и таванът от 96 на сто от екрана. Той беше сложен, за да се вижда
     цял кадър наведнъж, но с обща височина щеше да изяде към половината от
     широките кадри през object-fit. По-добре е да се вижда част от цял кадър,
     отколкото цял екран от изрязан: лентата и без това се плъзга настрани,
     точно както на голям екран. */
  .cine-band .cine{--gh:clamp(300px,56svh,520px);align-items:stretch}
  .cine-band .cine figure{width:calc(var(--gh) * var(--ar));
    height:var(--gh);aspect-ratio:auto}
  /* Тук кадрите вече не са еднакво високи: хоризонталният е 64vw, а
     вертикалният доста повече. Затова бутонът не може да се лепне за долния
     ръб на лентата, там долу под ниския кадър е празно. Мери се от горе, по
     височината на хоризонталния, тоест 96vw делено на 1,5. Така пада върху
     снимка и в двата случая. */
  .cine-band .cine-btn{right:12px;bottom:auto;top:calc(64vw - 66px)}
  .cine-band .cb-prev{font-size:.54rem;padding:8px 10px}
  .cine-band .cb-prev em{font-size:.64rem}
}
@media (prefers-reduced-motion:reduce){
  .cine-band .cine{scroll-behavior:auto}
  .cine-band .cd::after{transition:none}
}

/* ============================================================
   ЛИНК-КУТИЯ (.lnk), въведена 27.08.2026
   Една форма за всяка връзка със стрелка на сайта. Дотогава имаше три
   различни: .hl-btn на началната, .pt-more под лентата с годините и
   .btn на подстраниците, с три различни цвята и три различни стрелки.

   Цветът НЕ се задава тук, а се наследява. Затова кутията излиза черна
   върху светло поле и бяла върху тъмно, без отделни правила за всяко
   място. Рамката и стрелката вървят по currentColor, тоест следват го
   сами. Единственото, което се сменя по контекст, е какво влиза при
   посочване, и то е в две променливи.

   Надписът повтаря разбивката на Синер: първата дума е в курсивния
   сериф, останалото е в гротеска с главни букви и разредка. Двата
   шрифта вече се зареждат от сайта, нов не е добавян.
   ============================================================ */
.lnk{--lnk-hover-bg:var(--frost);--lnk-hover-fg:var(--ink);
  display:inline-flex;align-items:stretch;color:inherit;
  border:1px solid currentColor;
  transition:background-color .35s var(--ease),color .35s var(--ease),
    transform .45s var(--ease)}
.lnk-txt{display:flex;align-items:baseline;gap:.4em;white-space:nowrap;
  padding:12px clamp(15px,1.9vw,23px);border-right:1px solid currentColor;
  font-family:var(--display);font-weight:600;font-size:.72rem;
  letter-spacing:.13em;text-transform:uppercase}
.lnk-txt em{font-family:var(--script);font-style:italic;font-weight:500;
  font-size:1.38em;letter-spacing:.01em;text-transform:none}
/* Открито при проверката на 28.08.2026: <b> носи браузърско „bolder", което
   спрямо 600 на родителя се изчислява на 900. При кегел под дванайсет пиксела
   това излиза тежко и трохесто. Изравнява се с теглото на самата кутия. */
.lnk-txt b{font-weight:inherit;font-variation-settings:"wght" 600}
.lnk-arrow{display:flex;align-items:center;justify-content:center;
  padding:0 clamp(14px,1.7vw,22px)}
.lnk-arrow svg{display:block;fill:none;stroke:currentColor;stroke-width:1.25;
  stroke-linecap:round;stroke-linejoin:round;overflow:visible}
/* СТРЕЛКАТА СЕ ИЗДЪЛЖАВА, 12.09.2026, по искане на Камелия: копчето да кани
   към натискане, но тихо. Дотук цялата стрелка се плъзгаше с 4 пиксела
   вдясно. Сега опашката се удължава от левия си край, а върхът върви пред
   нея, тоест стрелката расте, вместо да се мести. Дебелината на линията не
   расте с нея, това го пази `vector-effect`. Кутията се вдига с 3 пиксела,
   колкото да се усети, че е жива. */
.lnk-arrow svg path{vector-effect:non-scaling-stroke;
  transition:transform .45s var(--ease)}
.lnk-arrow svg path:first-child{transform-origin:1px center}
.lnk:hover{background:var(--lnk-hover-bg);color:var(--lnk-hover-fg);transform:translateY(-3px)}
.lnk:hover .lnk-arrow svg path:first-child{transform:scaleX(1.16)}
.lnk:hover .lnk-arrow svg path:last-child{transform:translateX(5px)}
.lnk:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
/* Върху светло поле посоката се обръща: пълни се с черно и текстът побелява.

   02.09.2026: селекторът беше `.section.light`, тоест искаше и двата класа.
   Секциите на новините и на „Отвъд пистата“ обаче носят само `light`, без
   `section`, затова копчето „Всички новини“ падаше на общото поведение и при
   посочване се пълнеше с мътно светло вместо с черно. „Отвъд пистата“ беше
   спасена от собствения си клас в списъка, новините нямаха такъв. Сега се
   иска само `light` и правилото важи за всяка светла секция, включително за
   тези, които тепърва ще се правят. */
.light .lnk,.paper .lnk,.cine-band .lnk{
  --lnk-hover-bg:var(--ink-on-snow);--lnk-hover-fg:var(--paper)}
@media (prefers-reduced-motion:reduce){
  .lnk,.lnk-arrow svg path{transition:none}
  .lnk:hover{transform:none}
  .lnk:hover .lnk-arrow svg path{transform:none}
  .kv-in.in .lnk-arrow svg path:last-child{animation:none}
}
@media (max-width:520px){
  .lnk-txt{font-size:.64rem;letter-spacing:.1em;padding:11px 14px;
    white-space:normal}
  .lnk-arrow{padding:0 13px}
  .lnk-arrow svg{width:32px}
}


/* ============================================================
   ДВИЖЕЩА СЕ ЛЕНТА С ЕДРИ ДУМИ
   Пренесена тук от index.html на 02.09.2026, когато втора такава
   лента влезе на „На пистата“ с „Състезателни моменти“. Дотогава
   стоеше само на началната и живееше в нейния стилов блок.
   ============================================================ */
.marquee-band{overflow:hidden;background:var(--paper);
  --mq-pad:clamp(22px,4vh,38px);padding:var(--mq-pad) 0}

/* Опитът лентата да сяда на шева между бялото и тъмното е отменен на
   02.09.2026 от Камелия, часове след като го поиска: „прилича на щампа“.
   Целият механизъм с двата слоя е махнат. Защо смесването на цветове не
   работи вътре в анимиран transform стои в дневника от същия ден, за да не
   се предлага пак. */
/* Скоростта мина от 24 на 14 секунди на 29.08.2026 по искане на Камелия,
   тоест лентата минава цял оборот близо два пъти по-бързо. Стойността е една
   и съща за двете ленти нарочно, за да не се разминават на едно и също
   скролване.

   СПИРАЧКАТА ПРИ ПОСОЧВАНЕ Е МАХНАТА, същия ден и по същото искане. Дотогава
   стоеше `.marquee-band:hover .mq-track{animation-play-state:paused}` и това
   беше грешка от същия род като спрените карусели по-рано: лентата минава
   през цялата ширина на екрана, тоест докато читателят върти колелцето
   нагоре или надолу, показалецът почти сигурно стои върху нея и движението
   замръзва, без той да е искал това. Изглежда като счупено, не като
   внимание. Същото решение вече беше взето за галерията на „На пистата" на
   26.08 и за лентата на „Отвъд пистата" на 27.08. */
.mq-track{display:flex;width:max-content;animation:mq-scroll 14s linear infinite}
.mq-phrase{display:flex;align-items:baseline;gap:1.4em;flex:0 0 auto;
  padding-right:clamp(2em,6vw,4em);white-space:nowrap}
/* Малко допълнителен десен отстъп на наклонените думи, отделно от gap:
   наклонените букви клонят надясно и визуално „ядат" разстоянието след
   себе си, най-силно личи при късата „С" преди болтнатата дума. */
.mq-phrase em{font-family:var(--script);font-style:italic;font-weight:500;
  font-size:clamp(2.3rem,9.5vw,11rem);letter-spacing:.008em;margin-right:.12em;
  color:var(--ink-on-snow)}
.mq-phrase b{font-family:var(--display);font-weight:700;font-style:normal;
  font-size:clamp(2.3rem,9.5vw,11rem);letter-spacing:.015em;text-transform:uppercase;
  color:var(--ink-on-snow)}
@keyframes mq-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.mq-track{animation:none}}
@media(max-width:700px){
  .mq-phrase em,.mq-phrase b{font-size:clamp(1.5rem,8.4vw,3rem)}
}


/* ============================================================
   ПЛЪЗГАЧ ЗА ЕДИН КАДЪР, 02.09.2026
   ============================================================
   Мерките са снети на живо от lukas-hofer.com при 1440 пиксела, по изричното
   искане на Камелия да се сменят „както при Люки":

   а) пет кадъра в цикъл, безкраен;
   б) задържане 3000 милисекунди, преход 500;
   в) кадрите се ПЛЪЗГАТ настрани, не се преливат, при него fade е изключено;
   г) стрелките са тънки, 40 на 100 пиксела, ВЪТРЕ в кадъра, на 23 пиксела от
      двата му ръба и вертикално центрирани;
   д) точките са върху кадъра, близо до долния му ръб, центрирани.

   ЕДНА РАЗЛИКА ОТ НЕГО, НАРОЧНА. При Хофер плъзгачът спира при посочване с
   мишката. При нас НЕ спира. Това вече е решавано три пъти на този сайт, на
   26, 27 и 29.08.2026: лентите заемат голяма част от екрана, показалецът
   стои върху тях, докато човек върти колелцето, и движението замръзва без той
   да го е искал. Изглежда като счупено, не като внимание.

   Безкрайността работи с клонинг на първия кадър в края, същото решение като
   при лентата със снимки: щом преходът стигне клонинга, скокът обратно на
   първия се прави без анимация и окото не го хваща, защото насреща стои същият
   кадър. */
/* Слотът е контейнер за заявки, за да могат стрелките и точките да се мерят
   спрямо НЕГО, а не спрямо екрана. Причината е конкретна: при Хофер кадърът е
   564 пиксела широк и стрелка от 40 е седем на сто от него. Нашият ляв кадър
   в подредбата с цитата е 190 широк, тоест същата стрелка би заела една пета
   от кадъра, а двете заедно с отстъпите биха покрили две трети от него. */
.ss{position:relative;overflow:hidden;background:var(--snow);
  container-type:inline-size}
.ss-track{display:flex;height:100%;will-change:transform}
.ss-track.gladko{transition:transform .5s cubic-bezier(.65,.05,.36,1)}
.ss-slide{flex:0 0 100%;margin:0;height:100%}
.ss-slide img,.ss-slide video{display:block;width:100%;height:100%;object-fit:cover}

/* 7,1 и 17,7 на сто са пропорциите на стрелката при Хофер, 40 на 564 и 100
   на 564. Долната граница пази зоната за докосване, горната не позволява на
   широк кадър да получи стрелка колкото врата. */
.ss-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:clamp(26px,7.1cqw,40px);height:clamp(52px,17.7cqw,100px);
  display:grid;place-items:center;
  background:none;border:0;padding:0;cursor:pointer;color:#fff;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.45));
  opacity:.85;transition:opacity .3s var(--ease)}
.ss-arrow:hover{opacity:1}
/* 4,1 на сто е отстъпът при Хофер, 23 на 564. */
.ss-prev{left:clamp(8px,4.1cqw,23px)}
.ss-next{right:clamp(8px,4.1cqw,23px)}
.ss-arrow svg{width:clamp(11px,3.2cqw,18px);height:clamp(21px,6cqw,34px);
  fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}

.ss-dots{position:absolute;left:0;right:0;bottom:clamp(9px,2.8cqw,16px);z-index:3;
  display:flex;justify-content:center;gap:clamp(6px,1.8cqw,10px)}
.ss-dot{width:clamp(5px,1.24cqw,7px);height:clamp(5px,1.24cqw,7px);border-radius:50%;padding:0;border:0;cursor:pointer;
  background:rgba(255,255,255,.45);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));
  transition:background .3s var(--ease),transform .3s var(--ease)}
.ss-dot.sega{background:#fff;transform:scale(1.25)}
/* Зоната за докосване е по-голяма от самата точка, по правилото за целите
   при докосване. Самата точка остава дребна. */
.ss-dot::before{content:"";position:absolute;width:30px;height:30px;
  transform:translate(-11px,-11px)}
.ss-dots{position:absolute}
.ss-dot{position:relative}

/* При изключено движение плъзгачът стои на първия кадър и не тръгва сам.
   Стрелките и точките остават, тоест човек пак може да прелисти. */
@media(prefers-reduced-motion:reduce){
  .ss-track.gladko{transition:none}
}
/* Ако браузърът не разбира заявки към контейнер, cqw се игнорира и остават
   долните граници на clamp, тоест дребни, но работещи стрелки. */

/* ЗАГЛАВИЕТО ИЗНИКВА, 12.09.2026, по искане на Камелия: същият механизъм
   като вратите в колажа на „Отвъд пистата", тоест този на Синер. Кикърът и
   заглавието стоят 20vh по-ниско и влизат за 1,5 секунди с меко спиране,
   заглавието малко след кикъра. Общото `.reveal` вдига само 26 пиксела за
   1,1 секунди, а тук полето е голямо и високото тръгване личи. */
.of-open .of-kiker.reveal,.of-open .of-title.reveal{
  transform:translateY(20vh);
  transition:opacity 1.5s cubic-bezier(0,0,.1,.97),transform 1.5s cubic-bezier(0,0,.1,.97)}
.of-open .of-title.reveal{transition-delay:.12s}
.of-open .of-kiker.reveal.in,.of-open .of-title.reveal.in{transform:none}
@media (prefers-reduced-motion:reduce){
  .of-open .of-kiker.reveal,.of-open .of-title.reveal{transform:none;transition:none}
}

/* ============================================================
   ОТВАРЯНЕ БЕЗ HERO, заглавие по модела на Синер
   ============================================================
   Ползва се на „Отвъд пистата“ и на „Троян спортува“. Стоеше преписано в
   двете страници и се пренесе тук на 02.09.2026, преди да се разминат.
   Днес това вече стана два пъти, с уводите и с движещата се лента.

   КЕГЕЛЪТ Е 14vw, НЕ 16, И ТОВА Е МЕРЕНО. Синер стои на 17vw, защото
   неговите втори думи са къси, тоест COURT и STORY. Нашите са дълги и
   ограничителят е винаги АНГЛИЙСКОТО: „THE TRACK“ издържа 16vw, но
   „PLAYS SPORT“ се пренася над 14,06. Едно число за двете страници, за да не
   се разминават на две съседни отваряния. Ако някога дойде страница с още
   по-дълга втора дума, числото се смята наново, не се гадае. */
/* --- ОТВАРЯНЕТО ПО МОДЕЛА НА СИНЕР, 02.09.2026 ---
   Всички числа са снети на живо от janniksinner.com/off-court при 1440
   пиксела, не са избрани на око. Виж и коментара при самата секция. */
.of-open{padding-top:clamp(70px,11vh,150px);padding-bottom:0}
/* Кикърът е в цвета на мастилото, не в приглушения тон, указано от Камелия
   на 02.09.2026. Причината е видима: той стои сам насред голямо бяло поле, без
   нищо около себе си, и приглушеният тон го прави да изглежда изгасен, а не
   тих. Важи и за „Троян спортува", защото отварянето е едно и също за двете
   страници. */
.of-kiker{font-family:var(--mono);font-size:clamp(.66rem,1.34vw,.86rem);
  letter-spacing:.16em;text-transform:uppercase;text-align:center;
  color:var(--ink-on-snow);margin:0 0 clamp(18px,3.7vh,54px)}

/* 17vw е кегелът на Синер, 245,4 при 1440. Долната граница държи телефона
   четим, горната пази заглавието да не изяде екрана на широк монитор. */
.of-wide{padding-inline:clamp(12px,2.5vw,40px)}
/* 16vw, не 17 като при Синер. Разликата е една: неговото „COURT" е пет
   букви, а нашето „THE TRACK" е девет със шпацията. При 17vw то се пренася
   на два реда. Мерено, не избрано. */
.of-title{margin:0;text-align:center;line-height:1;
  font-size:clamp(2.6rem,14vw,12rem)}
/* Двете думи имат РАЗНИ междуредия, не едно общо, и това не е каприз.
   Наклоненият Cormorant има дълга опашка при „д" и при „у", а „ПИСТАТА" е
   само главни букви и не иска място отдолу. При общо 0,94 двете редови
   кутии се застъпваха и опашката опираше главните букви, най-силно при свит
   екран. Сега горният ред получава своята опашка, долният си остава стегнат,
   а между тях остава въздух при всяка ширина. */
.of-title em,.of-title b{display:block;font-size:inherit}
.of-title em{line-height:1.08}
.of-title b{line-height:.88}
/* Тегло 100 при Синер. Cormorant не слиза под 300, това е най-близкото. */
.of-title em{font-family:var(--script);font-style:italic;font-weight:300;
  color:var(--ink-on-snow)}
/* НЕ 700. При такъв кегел болдът става стена, а при Синер втората дума е
   обикновено тегло. */
.of-title b{font-family:var(--display);font-style:normal;font-weight:400;
  text-transform:uppercase;letter-spacing:-.005em;color:var(--ink-on-snow)}

/* Двойката снимки. Мерки от Синер при 1440: първата 351 широка на левия ръб
   на екрана, втората 351 на 484 и с 192 надолу, тоест 42 на сто от
   височината на първата. Тук са в проценти от ширината, за да важат навсякъде. */

/* ============================================================
   КИНО ГАЛЕРИЯТА НА ТЕЛЕФОН
   ============================================================
   Премерено на 10.09.2026. Кадърът се мери по ВИСОЧИНАТА, тоест
   `width:calc(var(--gh) * var(--ar))`, а --gh идва от височината на екрана.
   На телефон това дава кадър 682 пиксела широк в лента от 375, тоест от
   всяка снимка се вижда малко повече от половината и никога цялата.

   Долу мярката се обръща: широчината става колкото екрана, а височината я
   определя самата снимка през --ar. Така всеки кадър се вижда ЦЯЛ и едно
   плъзгане показва точно една снимка, което е и смисълът на прилепването.

   Височината на лентата я определя най-високият кадър, тоест вертикалният,
   и остава същата при плъзгане: редът е един и височината му е на
   най-високото дете. Затова нищо не подскача. Останалите кадри се центрират
   по вертикала и отгоре и отдолу се вижда светлият фон на рамката, същият,
   който вече пази от онази ивица под пиксел.

   Правилото стои НАКРАЯ на файла нарочно. Селекторът е същият като горе и
   тежестта е равна, тоест печели последният. Това е десетият случай в
   проекта, в който подреждането във файла решава спора, и затова е записан. */
@media(max-width:700px){
  .cine-band .cine{align-items:center}
  /* Таванът е нужен заради един-единствен вертикален кадър: той сам вдигаше
     лентата на 562 пиксела и около всеки от осемте широки оставаше по 156
     пиксела бяло отгоре и отдолу. С таван 1,25 пъти ширината бялото пада на
     около 60, а вертикалните се подрязват с малко. Затова и фокусът е на 30
     на сто от горния ръб, тоест подрязва се от долу и главата остава. */
  .cine-band .cine figure{width:100vw;height:auto;aspect-ratio:var(--ar);
    max-height:calc(100vw * 1.25)}
  .cine-band .cine figure img{object-position:center 30%}
}