/* sections.css — блоки страницы сверху вниз (PLAN.md §2). Конечное состояние = вид без JS и при reduced;
   что прячет движение до анимации, лежит в scenes.css и js/kit/kit.css только под html.k-motion / html.intro. */

/* ---------- 1. герой (видео на весь экран) ---------- */
.stage__sticky { background: var(--milk); }
.hero { position: relative; height: 100vh; height: calc(100 * var(--vu, 1svh)); color: var(--paper); overflow: clip; }
.hero__media { position: absolute; inset: 0; z-index: 2; overflow: hidden; background: #2b2a24; }
.hero__inner { position: absolute; inset: 0; }
.hero__inner img, .hero__inner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__inner video { z-index: 0; }
/* телефон: вертикальный кадр 608×1080 шире экрана (видно ≈82 %) — сдвиг влево, чтобы жених в профиль оставался в кадре рядом с невестой */
@media (max-width: 899px) { .hero__inner img, .hero__inner video { object-position: 25% 50%; } }
.hero__poster { z-index: 1; }
/* сверху тень под шапкой (ссылки на светлом небе контражура), снизу — под H1 и кнопками.
   Нижний слой в px от низа (текст привязан к низу в px): под подписью, ценой и кнопками ≥ .62 — paper ≥ 4,5:1 даже на белом пикселе,
   под H1 ≥ .49 — ≥ 3:1 на белом; выше H1 спад по косинусу за 130 px (без видимой ступени), лица в верхней части кадра не темнеют (замер ee6-ct, notas.md D6) */
.hero__shade { position: absolute; inset: 0; z-index: 2; --sb: env(safe-area-inset-bottom, 0px);
  background: linear-gradient(to bottom, rgb(28 27 24 / .42) 0, transparent 150px),
    linear-gradient(to top, rgb(28 27 24 / .74) 0, rgb(28 27 24 / .66) calc(360px + var(--sb)), rgb(28 27 24 / .57) calc(500px + var(--sb)), rgb(28 27 24 / .55) calc(516px + var(--sb)), rgb(28 27 24 / .49) calc(533px + var(--sb)), rgb(28 27 24 / .39) calc(549px + var(--sb)), rgb(28 27 24 / .29) calc(565px + var(--sb)), rgb(28 27 24 / .18) calc(581px + var(--sb)), rgb(28 27 24 / .08) calc(598px + var(--sb)), rgb(28 27 24 / .02) calc(614px + var(--sb)), transparent calc(630px + var(--sb))); }
/* v2.0 телефон (сенсор без мыши, слайды): кадр светлый, затемнение только под блоком текста. Прежняя подложка (.74 → 0 за 630 px,
   плюс верх .42) на iPhone 393×659 закрывала почти весь кадр: кадр терял 61 % светимости (ПК — 29–35 %), видео выглядело серым.
   Теперь выше текста кадр как есть (шапка на своём стекле .8), под текстом — ровная тонировка --scrim до верха H1 (у кнопок внизу .66–.68) и мягкий спад
   за 90 px над ним. --txt-top — высота от низа героя до верха блока текста (main.js, после подгонки слайда). Буквам помогает тень
   текста; контраст по пикселям букв на постере и кадрах петли — v20-contrast (notas.md «v2.0 телефон») */
@media (max-width: 899px) and (hover: none) {
  html.k-slides .hero__shade { --scrim: rgb(28 27 24 / .58); background: linear-gradient(to top, rgb(28 27 24 / .68) 0, rgb(28 27 24 / .66) calc(var(--cap, 80px) + 60px + var(--sb)), var(--scrim) calc(var(--cap, 80px) + 150px + var(--sb)), var(--scrim) calc(var(--txt-top, 520px) + 6px), rgb(28 27 24 / .3) calc(var(--txt-top, 520px) + 40px), transparent calc(var(--txt-top, 520px) + 96px)); }
  html.k-slides .hero__text { text-shadow: 0 0 22px rgb(28 27 24 / .5), 0 1px 3px rgb(28 27 24 / .45); }
  html.k-slides :is(.hero__sub, .hero__price, .hero__cta .btn--line) { text-shadow: 0 0 12px rgb(28 27 24 / .7), 0 0 3px rgb(28 27 24 / .6); }
  html.k-slides .hero__cta .btn--paper { text-shadow: none; }
}
/* ПК: текст занимает левые 7/12 — нижний слой гаснет вправо (маска), лицо справа в кадре остаётся в тёплом свете */
@media (min-width: 900px) {
  .hero__shade { background: linear-gradient(to bottom, rgb(28 27 24 / .42) 0, transparent 150px); }
  .hero__shade::before { content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgb(28 27 24 / .72) 0, rgb(28 27 24 / .64) 220px, rgb(28 27 24 / .55) 555px, rgb(28 27 24 / .53) 571px, rgb(28 27 24 / .47) 588px, rgb(28 27 24 / .38) 604px, rgb(28 27 24 / .28) 620px, rgb(28 27 24 / .17) 636px, rgb(28 27 24 / .08) 653px, rgb(28 27 24 / .02) 669px, transparent 685px);
    -webkit-mask-image: linear-gradient(to right, #000 calc(7 / 12 * 100%), rgb(0 0 0 / .35) 88%); mask-image: linear-gradient(to right, #000 calc(7 / 12 * 100%), rgb(0 0 0 / .35) 88%); }
}
.hero__text { position: absolute; z-index: 3; left: var(--gut); right: var(--gut); bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .hero__text { right: auto; width: calc(7 / 12 * 100%); bottom: 64px; } }
.hero__title { font: 500 var(--fs-h1)/1 var(--serif); letter-spacing: -.01em; }
.hero__title em { font-style: italic; }
.hero__sub { margin-top: 20px; }
.hero__price { margin-top: 4px; font-variant-numeric: lining-nums tabular-nums; }
.hero__cta { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 899px) { .hero__cta { padding-right: 56px; } }
/* пауза видео (WCAG 2.2.2): видна над видео и над молочным фоном, пока видео в окошке — у неё своя тёмная подложка */
.hero__pause { position: absolute; z-index: 4; right: var(--gut); bottom: calc(96px + env(safe-area-inset-bottom)); width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgb(247 245 240 / .6); background: rgb(28 27 24 / .55); display: grid; place-items: center; color: var(--paper); }
@media (min-width: 900px) { .hero__pause { bottom: 64px; } }
.hero__pause svg { width: 16px; height: 16px; }
.hero__pause .i-play, .hero__pause[data-state="paused"] .i-pause { display: none; }
.hero__pause[data-state="paused"] .i-play { display: block; }
html:not(.js) .hero__pause { display: none; }   /* без JS видео нет — кнопке нечего делать */
html.lite .hero__pause { display: none; }      /* lite: только постер, ролика нет */

/* ---------- 2. строка-окошко «CADA HISTORIA [видео] TIENE SU LUZ.» ---------- */
.slotline { padding: 14vh var(--gut); text-align: center; }
.slotline__p { font: 500 var(--fs-slot)/1 var(--sans); text-transform: uppercase; letter-spacing: -.01em; margin: 0 auto; }
.sl-g, .sl-l { display: block; }
.k-m { display: inline-block; overflow: clip; vertical-align: top; padding: .12em .08em .06em; margin: -.12em -.08em -.06em; }
.k-m > .w { display: inline-block; }
/* Два варианта сцены: по умолчанию крупное окошко («CADA HISTORIA / кадр / TIENE SU LUZ.»),
   html[data-c3="small"] (?c3=small) — прежнее малое окошко, оставлено для сравнения. */
/* телефон: три строки, окошко отдельной строкой; по умолчанию 4:5 (вертикальное видео без обрезки лиц),
   ширина ограничена высотой экрана, чтобы строки и окошко помещались над капсулой. Второе ограничение — с учётом
   шрифта строки: на широком «телефоне» (700–899) строка ≈60–72 px и «LUZ.» заходила под капсулу (899×900 на 3–6 px);
   блок по центру экрана, сверху и снизу по 68 px (капсула 12 + 56) и 16 px воздуха, две строки + поля окошка ≈2,4 em */
.slot { display: block; position: relative; width: 100%; aspect-ratio: 1 / .56; margin: .18em 0; }
.slot img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) {
  .sl-l { display: inline; }
  html:not([data-c3="small"]) .slot { aspect-ratio: 4 / 5; width: min(100%, calc((calc(100 * var(--vu, 1svh)) - 300px) * .8), calc((calc(100 * var(--vu, 1svh)) - 168px - 2.4 * var(--fs-slot)) * .8)); margin-inline: auto; }
  html:not([data-c3="small"]) .slot img { object-position: 50% 42%; }
}
/* ПК по умолчанию: три строки по центру, окошко 16:9 ≈62 % ширины, высота ограничена экраном
   (две строки по 0,92 em + поля 128 px); шрифт строки ≈140 px на 1440×900 (ориентир Boc/Realevate: кадр ≈25–30 % экрана) */
@media (min-width: 900px) {
  .slotline__p { font-size: min(10vw, calc(15.5 * var(--vu, 1svh)), 11rem); line-height: .92; }
  .sl-g { display: block; text-align: center; }
  .sl-l { display: inline; }
  .slot { width: min(62vw, calc((calc(100 * var(--vu, 1svh)) - 2.08 * min(10vw, calc(15.5 * var(--vu, 1svh)), 11rem) - 128px) * 1.78)); aspect-ratio: 16 / 9; margin: .12em auto; }
  html.k-motion:not([data-c3="small"]) .slotline { padding: 64px var(--gut) 0; }
  /* малое окошко: две ровные строки — «CADA / HISTORIA» справа налево к окошку, «TIENE SU / LUZ.» слева от него;
     окошко ≈26 % ширины окна, высотой в две строки */
  html[data-c3="small"] .slotline__p { display: flex; align-items: center; justify-content: center; gap: .3em; font-size: clamp(3.25rem, .4rem + 5.7vw, 7rem); line-height: .98; }
  html[data-c3="small"] .sl-g { display: flex; flex-direction: column; flex: none; }
  html[data-c3="small"] .sl-l { display: block; }
  html[data-c3="small"] .sl-a { align-items: flex-end; text-align: right; }
  html[data-c3="small"] .sl-b { align-items: flex-start; text-align: left; }
  html[data-c3="small"] .slot { flex: none; width: 27vw; max-width: 560px; height: 2.12em; aspect-ratio: auto; margin: 0; }
}
.inv { position: relative; display: inline-block; }
.inv__bg { position: absolute; inset: -.02em -.08em -.04em; background: var(--brand); }
.inv__ink, .inv__paper { position: relative; }
.inv__paper { position: absolute; left: 0; top: 0; color: var(--paper); }

/* ---------- 3. манифест ---------- */
.manifest { padding: 6vh var(--gut) 6vh; }
.manifest__t { font: 500 var(--fs-manifest)/1.02 var(--sans); text-transform: uppercase; letter-spacing: -.01em; max-width: 16em; padding-top: .12em; }
.manifest__t [data-invert] { background: var(--brand); color: var(--paper); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .06em; }
/* точка держится за последним словом фразы (WebKit на 360 уносил её одну на последнюю строку).
   Без JS перенос между словом и точкой решает общий предок .nobr (nowrap), внутри фразы переносы обычные.
   С JS слова — inline-block, и WebKit переносит между ними при любом white-space: слово-точка получает ширину 0
   и висит за последним словом (висячая пунктуация, ≤0,3 em в поле страницы), переносить её незачем */
.manifest__t .nobr { white-space: nowrap; }
.manifest__t .nobr > [data-invert] { white-space: normal; }
.manifest__t .nobr > .k-word { width: 0; }
.manifest__by { margin-top: 32px; color: var(--mute); }

/* ---------- 4. Historias (без JS и при reduced — вертикальный список серий) ---------- */
.hs__main, .hs__side { overflow: hidden; background: #2b2a24; }
.hs__main img, .hs__side img { width: 100%; height: 100%; object-fit: cover; }
.hs__item { margin-bottom: 64px; }
.hs__main { height: calc(80 * var(--vu, 1svh)); }
.hs__side { display: none; }
.hs__plate { background: var(--plate); color: var(--paper); padding: 28px 32px; }
.hs__plate--static { margin: -48px var(--gut) 0; position: relative; }
.hs__plate h3, .hs__title { font: 500 var(--fs-plate)/1 var(--serif); }
.hs__line, .hs__plate p { color: var(--paper-80); }
.hs__plate p:first-of-type { margin-top: 6px; }
.hs__count { font-variant-numeric: lining-nums tabular-nums; margin-top: 2px; }
.hs__open, .hs__plate--static button { margin-top: 14px; min-height: 44px; display: inline-flex; align-items: center; }
.hs__nav { display: flex; gap: 20px; margin: 10px 0 0; padding: 0 0 6px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.hs__nav::-webkit-scrollbar { display: none; }
.hs__nav button { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em; min-height: 44px; white-space: nowrap; color: var(--paper-80); }
.hs__nav button[aria-current] { color: var(--paper); }
/* сетка серии видна только без JS (с JS её заменяет фокус, картинки не грузятся: display none + lazy) */
.hs__gallery { display: none; }
html:not(.js) .hs__gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 16px var(--gut) 0; }
html:not(.js) .hs__gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
html:not(.js) .hs__plate--static button { display: none; }
@media (min-width: 900px) {
  .hs__item { display: grid; grid-template-columns: 60% 40%; }
  .hs__main, .hs__side { height: calc(90 * var(--vu, 1svh)); }
  .hs__side { display: block; }
  .hs__plate--static { grid-column: 1 / -1; width: 560px; margin: -120px auto 0; }
  html:not(.js) .hs__gallery { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px var(--gut) 0; }
}

/* ---------- 5. Sobre mí, кадры в воздухе ---------- */
.air { position: relative; padding: 12vh var(--gut) 8vh; }
.air__col { position: relative; z-index: 4; max-width: 520px; margin: 0 auto; }
.air__col h2 { font: 500 var(--fs-h2)/1.02 var(--serif); }
.air__col h2 em { font-style: italic; }
.air__col p { margin-top: 20px; text-wrap: pretty; }
.air__ig { display: inline-flex; min-height: 44px; align-items: center; margin-top: 12px; }
.air__field { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 48px; }
.air__it { width: calc(40% - 6px); }
.air__it:nth-child(4n+1), .air__it:nth-child(4n+4) { width: calc(60% - 6px); }
.air__it[data-pc-only] { display: none; }
.air__it figure { overflow: hidden; }
.air__it figure[role="button"] { cursor: pointer; }
.air__it img { width: 100%; height: auto; }
@media (min-width: 900px) {
  /* v0.6: россыпь плотнее и мельче (--y × 0,62 vh, было × 1 vh; ширина × 0,85) — секция ≈1,2 экрана вместо 1,7;
     нижние кадры (y 128–132 → 79–82vh, до 320 px) не заходят на контакты */
  .air { min-height: max(105vh, 79vh + 330px); padding: 0; }
  .air__col { position: absolute; left: 50%; top: 40vh; transform: translateX(-50%); width: 520px; background: var(--milk); padding: 24px 28px; }
  .air__field { display: block; margin: 0; }
  /* left не дальше правого края: крупные кадры (180/250/330) на 900–1300 px иначе обрезались краем окна */
  .air__it, .air__it:nth-child(n) { position: absolute; left: min(var(--x), 100% - var(--w) * .85); top: calc(var(--y) * .62vh); width: calc(var(--w) * .85); }
  .air__it[data-pc-only] { display: block; }
  .air__it[data-z="1"] { z-index: 1; } .air__it[data-z="2"] { z-index: 2; } .air__it[data-z="3"] { z-index: 3; }
}
@media (hover: hover) and (pointer: fine) {
  /* v1.0: вместо зума кадра при наведении (переход transform большой картинки = новый слой + растр: остановки GPU 124–408 мс,
     notas.md «v1.0 лёгкость») — тонкая светлая рамка и метка «Ver» с лупой: только opacity у заранее нарисованных псевдоэлементов */
  .air__it figure[role="button"] { position: relative; }
  .air__it figure[role="button"]::after { content: ""; position: absolute; inset: 0; border: 1.5px solid rgb(247 245 240 / .92); opacity: 0; transition: opacity .18s linear; pointer-events: none; }
  .air__it figure[role="button"]::before { content: "Ver"; position: absolute; z-index: 1; left: 8px; bottom: 8px; height: 30px; padding: 0 11px 0 30px; display: flex; align-items: center;
    font: 500 14px/1 var(--sans); color: var(--paper); background: var(--glass-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.6' fill='none' stroke='%23F7F5F0' stroke-width='1.5'/%3E%3Cpath d='M10.4 10.4L14 14' stroke='%23F7F5F0' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") 10px 50% / 14px no-repeat;
    border-radius: 999px; opacity: 0; transition: opacity .18s linear; pointer-events: none; }
  .air__it figure[role="button"]:is(:hover, :focus-visible)::after, .air__it figure[role="button"]:is(:hover, :focus-visible)::before { opacity: 1; }
}

/* ---------- 2. Precios + калькулятор + Cómo trabajo (на мху) — сразу после окошка: цены и кнопка WhatsApp за ≤3 экрана ---------- */
.precios, .contacto, .foot { background: var(--brand); color: var(--paper); }
.precios { padding: 8vh var(--gut) 7vh; }
@media (max-width: 899px) { .precios { padding-top: 9vh; } }   /* телефон: без пустого тёмного блока над заголовком */
/* ПК ≥1100: слева заголовок и цены, справа калькулятор с кнопкой WhatsApp — в одном экране. «Cómo trabajo» (v0.8) — в слайде манифеста */
@media (min-width: 1100px) {
  .precios__g { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; align-items: start; }
  .precios__g .plist { margin-top: 36px; }
  .precios__g .plist li { padding: 16px 0; }
  .precios__g .calc { margin-top: 0; }
}
.wrap { max-width: 1120px; margin: 0 auto; }
.precios h2, .contacto h2 { font: 500 var(--fs-h2)/1.02 var(--serif); }
.precios .note { margin-top: 10px; color: var(--paper-80); }
.plist { margin-top: 48px; }
.plist li { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; padding: 22px 0; border-top: 1px solid var(--paper-24); }
.plist li:last-child { border-bottom: 1px solid var(--paper-24); }
/* название строки и цена крупнее на ПК (44 / 40 px на 1440: плоскость крупная — типографика под неё), телефон как был (≈22 / 20 px) */
.plist h3 { font: 500 clamp(1.4rem, .6rem + 2.5vw, 2.75rem)/1.1 var(--serif); }
.plist p { grid-column: 1; color: var(--paper-80); }
.plist .p { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: var(--fs-price); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.como { margin-top: 56px; max-width: 1120px; }
.como__h { font: 500 clamp(1.8rem, 1rem + 2.4vw, 3rem)/1.05 var(--serif); }
.como__g { margin-top: 24px; display: grid; gap: 24px; }
@media (min-width: 900px) { .como__g { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.como h4 { font: 500 1.5rem/1.2 var(--serif); }
.como p { margin-top: 6px; color: var(--mute); }   /* v0.8: блок в манифесте, на молочном фоне */
.calc { margin-top: 56px; border-top: 1px solid var(--paper-24); padding-top: 32px; }
.calc h3 { font: 500 clamp(1.8rem, 1rem + 2.4vw, 3rem)/1.05 var(--serif); }
.calc fieldset { border: 0; padding: 0; margin: 24px 0 0; min-width: 0; }
.calc legend, .calc__mes label { display: block; margin-bottom: 10px; padding: 0; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; height: 48px; padding: 0 18px; border: 1px solid rgb(247 245 240 / .5); border-radius: 999px; transition: background-color var(--t-ui), color var(--t-ui); }
.seg input:checked + span { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.seg input:focus-visible + span { outline: 2px solid var(--paper); outline-offset: 3px; }
.calc__mes { margin-top: 24px; }
.calc select { height: 48px; padding: 0 40px 0 18px; border-radius: 999px; color: var(--paper); border: 1px solid rgb(247 245 240 / .5); font: inherit; -webkit-appearance: none; appearance: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F7F5F0' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px; }
.calc select option { color: var(--ink); background: var(--paper); }
html:not(.js) .calc__mes { display: none; }   /* месяцы строит скрипт от текущей даты */
.total { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; }
.total__v { font: 500 clamp(2rem, 1rem + 3vw, 3.5rem)/1 var(--sans); font-variant-numeric: lining-nums tabular-nums; }
.total__n { width: 100%; color: var(--paper-80); }
.calc .btn { margin-top: 24px; }
.calc__ns { margin-top: 12px; }

/* якоря: молочные секции встают под шапку (её высота), цветные и сцены — от самого верха (шапка над ними прозрачная или того же цвета) */
#manifiesto, #sobre-mi { scroll-margin-top: var(--bar); }
@media (min-width: 900px) { #manifiesto, #sobre-mi { scroll-margin-top: 66px; } }
main > section[tabindex="-1"]:focus { outline: none; }   /* фокус после перехода по якорю (для скринридера), без рамки вокруг секции */

/* ---------- 7. Contacto ---------- */
.contacto { padding: 6vh var(--gut); }
.contacto ul { margin: 28px 0; }
.contacto li { padding: 4px 0; }

/* ---------- 8. подвал-wordmark ---------- */
.foot { padding: 6vh var(--gut) calc(96px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .foot { padding-bottom: 40px; } }
.wm { font: 500 100px/.9 var(--serif); text-transform: uppercase; color: var(--paper); }
.wm__t { letter-spacing: .02em; }
.wm__line { height: 1px; background: rgb(247 245 240 / .6); margin-top: 18px; transform-origin: 0 50%; }
/* ПК: слово и линия на ≈98 % ширины окна (по 1vw с краёв, как у Outfit/Casa Gay), ссылки остаются в колонке */
@media (min-width: 900px) { .foot .wm, .foot .wm__line { margin-inline: calc(50% - 50vw + 1vw); } }
.foot__links { display: flex; gap: 24px; margin-top: 24px; }
.foot__links a { text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.foot__small { margin-top: 12px; color: var(--paper-80); font-size: var(--fs-label); }

/* ---------- фокус (слой, С6) ---------- */
.fv { position: fixed; inset: 0; z-index: 90; background: var(--milk); color: var(--ink); display: grid; grid-template-rows: auto 1fr; }
.fv[hidden] { display: none; }
.fv__top { display: flex; justify-content: space-between; align-items: center; padding: 8px var(--gut); gap: 16px; }
.fv__back { min-height: 44px; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em; }
.fv__tabs { display: flex; gap: 18px; }
.fv__tabs button { min-height: 44px; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
.fv__tabs button[aria-selected="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
@media (max-width: 420px) { .fv__tabs { gap: 12px; } .fv__tabs button { letter-spacing: .04em; } }
.fv__view { min-height: 0; overflow: hidden; }
.fv__view[hidden] { display: none !important; }
.fv__view--foto { display: grid; grid-template-rows: 1fr auto 92px; padding: 0 var(--gut) calc(8px + env(safe-area-inset-bottom)); }
.fv__stage { position: relative; min-height: 0; touch-action: pan-y; }
.fv__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.fv__cap { display: flex; justify-content: space-between; padding: 10px 0; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.fv__strip { grid-row: 3; display: flex; gap: 12px; list-style: none; margin: 0; padding: 6px calc(50% - 30px); overflow-x: auto; touch-action: pan-x; scrollbar-width: none; align-items: center; }
.fv__strip li { flex: none; }
.fv__strip button { display: block; width: 60px; height: 80px; opacity: .55; transition: opacity var(--t-ui); }
.fv__strip button[aria-current] { opacity: 1; outline: 1px solid var(--ink); outline-offset: 2px; }
.fv__strip img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .fv__view--foto { grid-template-columns: 88px 1fr; grid-template-rows: 1fr auto; column-gap: 40px; padding-bottom: 16px; }
  .fv__strip { grid-row: 1 / span 2; grid-column: 1; flex-direction: column; overflow-x: hidden; overflow-y: auto; padding: calc(50vh - 120px) 0; touch-action: pan-y; align-items: flex-start; }
  .fv__strip button { width: 64px; height: 86px; }
  .fv__stage { grid-column: 2; max-height: calc(calc(100 * var(--vu, 1svh)) - 160px); }
  .fv__img { max-width: 70vw; margin: 0 auto; }
  .fv__cap { grid-column: 2; }
}
.fv__view--todas, .fv__view--historias { overflow-y: auto; padding: 8px var(--gut) 40px; }
.fv__grid { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 8px; }
@media (min-width: 900px) { .fv__grid { columns: 3; column-gap: 16px; } }
.fv__grid li { break-inside: avoid; margin-bottom: 8px; }
@media (min-width: 900px) { .fv__grid li { margin-bottom: 16px; } }
.fv__grid button { display: block; width: 100%; }
.fv__grid img { width: 100%; height: auto; }
.fv__list { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; }
.fv__list button { position: relative; display: grid; width: 100%; text-align: left; padding: 22px 0; border-top: 1px solid var(--line); }
.fv__lt { font: 500 48px/1 var(--serif); }
.fv__ll { color: var(--mute); margin-top: 6px; }
.fv__lc { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; }
.fv__list img { position: absolute; right: 0; top: 50%; width: 160px; height: auto; transform: translateY(-50%); opacity: 0; transition: opacity var(--t-ui); pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .fv__list button:hover img { opacity: 1; } }

/* ---------- v0.9 просмотр кадров россыпи (js/kit/lightbox.js): слой кадра — transform/clip-path, фон и кнопки — opacity ---------- */
html { scrollbar-gutter: stable; }   /* блокировка прокрутки при просмотре не сдвигает раскладку */
html.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 90; touch-action: none; overscroll-behavior: contain; }
.lb[hidden] { display: none; }
.lb__bg { position: absolute; inset: 0; background: rgb(20 19 17 / .94); opacity: 0; will-change: opacity; }   /* свой слой: прозрачность без перерисовки каждый кадр */
.lb__stage { position: absolute; inset: 0; pointer-events: none; }
.lb__ph { position: absolute; display: block; transform-origin: 0 0; pointer-events: auto; will-change: transform; }   /* постоянный слой, пока просмотр открыт (без перерастра на ходу) */
.lb__ui { position: absolute; inset: 0; pointer-events: none; }
.lb__ui > * { pointer-events: auto; }
.lb__btn, .lb__num { opacity: 0; position: absolute; color: var(--paper); background: var(--glass-bg); border: var(--glass-line); box-shadow: var(--glass-shadow); border-radius: 999px; }
.lb__btn { width: 48px; height: 48px; display: grid; place-items: center; }
.lb__btn svg { width: 22px; height: 22px; }
.lb__btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.lb__x { top: 12px; right: 12px; }
.lb__num { margin: 0; left: 50%; translate: -50% 0; bottom: 18px; padding: 0 16px; height: 40px; display: flex; align-items: center; font-size: 14px; letter-spacing: .04em; font-variant-numeric: lining-nums tabular-nums; }
.lb__prev { left: 12px; bottom: 14px; }
.lb__next { right: 12px; bottom: 14px; }
@media (min-width: 900px) {
  .lb__x { top: 16px; right: 24px; }
  .lb__prev, .lb__next { top: 50%; bottom: auto; translate: 0 -50%; }
  .lb__prev { left: 24px; } .lb__next { right: 24px; }
  .lb__num { top: 20px; bottom: auto; }
}