/* ============================================================
   BAGMUTSKIY · ВЕЧЕРИНКА — v1
   Фотограф на вечеринку в Москве: клуб, танцпол, гости, ночь.
   Интерфейс тихий. Цвет и энергия — в кадрах, не в хроме.
   База — event-система bagmutskiy, не neon SaaS.

   Фотография ведёт. Два регистра:
   СОБЫТИЕ — тёмная полоса, крупный кадр.
   СЕРВИС  — светлая бумага, типографика.
   ============================================================ */

:root {
  --paper: #f4f2ee;
  --paper-2: #eae6df;
  --paper-3: #fffdf9;
  --ink: #16130f;
  --muted: #5b564e;
  --muted-2: #7d776d;
  --line: #dcd6cb;

  --stage: #0d0b09;
  --stage-2: #17130f;
  --on-stage: #f2eee7;
  --on-stage-muted: #a09a90;
  --line-stage: rgba(255, 255, 255, 0.14);

  --cta: #16130f;
  --cta-hover: #383129;
  --ember: #a5451f;
  --ember-on-stage: #d98a63;

  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --shell: 1240px;
  --rail-w: min(var(--shell), 100% - 2.5rem);
  --edge: max(1.25rem, calc((100vw - var(--shell)) / 2));
  --measure: 34rem;
  --header-h: 56px;
  /* Панель редактора рисует mu-plugin и переопределяет эту переменную
     (36px, на узких 44px). Для посетителя она нулевая. */
  --admin-bar-h: 0px;

  --fs-display: clamp(1.95rem, 4.4vw, 3.6rem);
  --fs-statement: clamp(1.5rem, 3.4vw, 2.65rem);
  --fs-h2: clamp(1.45rem, 2.5vw, 2.05rem);
  --fs-h3: clamp(1.1rem, 1.7vw, 1.35rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-label: 0.6875rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  /* Плавность делает JS только для [data-scroll]: глобальный smooth
     заставляет анимироваться и программные «мгновенные» прыжки. */
  scroll-behavior: auto;
  overflow-x: clip;
}

section[id],
#main,
#main,
#book-form,
[id$="-title"] { scroll-margin-top: calc(var(--admin-bar-h) + var(--header-h) + 2rem); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

a { color: var(--ink); text-underline-offset: 0.18em; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.018em;
  margin: 0;
}

h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

@media (max-width: 899px) {
  h1, h2, h3 { text-wrap: balance; }
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.skip {
  position: absolute; left: -999px; top: 0;
  background: #fff; padding: 0.5rem 1rem; z-index: 100;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

.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;
}

/* ---------- примитивы раскладки ---------- */

.rail { width: var(--rail-w); margin-inline: auto; }
.measure { max-width: var(--measure); }

/* Маленькая прописная метка вместо большого серифного H2 на всех
   служебных секциях: именно она создаёт разницу между
   повествовательными моментами и обычными блоками. */
.label {
  margin: 0 0 0.8rem;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.lead {
  color: var(--muted);
  max-width: var(--measure);
  margin: 0.85rem 0 0;
}

.h-sm { font-size: clamp(1.25rem, 1.9vw, 1.55rem); }
.quiet { color: var(--muted); }
.nums { font-variant-numeric: tabular-nums; }

figcaption {
  margin-top: 0.5rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.01em;
  color: var(--muted);
}
figcaption .num {
  font-variant-numeric: tabular-nums;
  color: var(--ember);
  margin-right: 0.45rem;
}

/* ---------- кнопки и ссылки ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.7rem 1.4rem;
  border: 0; border-radius: 2px;
  background: var(--cta); color: var(--paper-3);
  font: inherit; font-weight: 600; text-decoration: none;
  white-space: nowrap; cursor: pointer;
  transition: background 0.25s var(--ease);
}
.btn:hover { background: var(--cta-hover); color: var(--paper-3); }

.btn-sm { min-height: 42px; padding: 0.5rem 1.15rem; font-size: var(--fs-sm); }

/* Действие есть у каждого тарифа, но у рекомендованного оно на тон громче. */
.btn-quiet {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 38%, transparent);
}
.btn-quiet:hover {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink);
}

.btn-on-stage { background: var(--paper-3); color: var(--ink); }
.btn-on-stage:hover { background: #fff; color: var(--ink); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 34px;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink); text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--line);
  transition: box-shadow 0.25s var(--ease);
}
.link-arrow::after { content: "→"; font-weight: 400; }
.link-arrow:hover { box-shadow: inset 0 -1px 0 var(--ink); }
.link-arrow.quiet { color: var(--muted); font-weight: 400; }
.on-stage .link-arrow,
.link-arrow.on-stage {
  color: var(--on-stage);
  box-shadow: inset 0 -1px 0 var(--line-stage);
}
.on-stage .link-arrow:hover,
.link-arrow.on-stage:hover { box-shadow: inset 0 -1px 0 var(--on-stage); }

.btn:focus-visible,
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}
.no-focus-ring:focus-visible { outline: none; }

/* ---------- шапка ---------- */

.site-header {
  position: sticky;
  top: var(--admin-bar-h);
  z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  transition: box-shadow 0.25s var(--ease);
}
.site-header.is-scrolled { box-shadow: inset 0 -1px 0 var(--line); }

.header-row {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: var(--header-h);
}
.brand {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.nav { display: none; gap: 1.35rem; margin-inline: auto; }
.nav a {
  font-size: var(--fs-sm);
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.nav a:hover { color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.link-quiet { display: none; font-size: var(--fs-sm); color: var(--muted); text-decoration: none; }
.link-quiet:hover { color: var(--ink); }

@media (min-width: 900px) {
  .nav { display: flex; }
  .header-actions { margin-left: 0; }
  .link-quiet { display: inline; }
}

/* ============================================================
   1 · HERO — типографическая колонка + кадры в том же rail,
   что и шапка. Вынос в левый край экрана ломает ось с логотипом.
   На телефоне крупный кадр по-прежнему на всю ширину; подпись
   остаётся на --edge, как бренд в шапке.
   ============================================================ */

.hero { padding: clamp(1.75rem, 4vw, 3.25rem) 0 0; }

.hero-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }

.hero h1 {
  font-size: var(--fs-display);
  line-height: 1.06;
  letter-spacing: -0.025em;
}
.h1-kicker {
  display: block;
  margin-bottom: 0.9rem;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember);
}
.hero-sub {
  margin: 1.15rem 0 0;
  max-width: 30rem;
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  color: var(--muted);
}
.hero-cta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.85rem 1.5rem;
  margin-top: 1.6rem;
}

/* На телефоне первым идёт крупный кадр во всю ширину: страница о
   фотографии обязана показать фотографию раньше, чем закончится текст. */
.hero-media { position: relative; display: grid; gap: 0.75rem; }
.hero-figure { margin: 0; }
.hero-figure img { display: block; width: 100%; }
.hero-figure figcaption { margin-top: 0.5rem; }
.hero-figure-main { margin-inline: calc(-1 * var(--edge)); }
.hero-figure-main figcaption {
  margin-inline: var(--edge);
  padding-inline: 0;
}
.hero-figure-aside img {
  aspect-ratio: 2.35 / 1;
  object-fit: cover;
  object-position: center 42%;
}
/* На телефоне 5:4, кроп влево: группа и зал, не одна фигура в блестящем
   платье. Второй кадр — короткая полоса другого масштаба, чтобы H1
   оставался в первом экране. */
.hero-figure-main img {
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 68% 42%;
}

/* Полоса фактов: узкая, на хайрлайнах, tabular-цифры — тон
   «операционная сводка», а не «стена бейджей». */
.hero-facts {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}
.hero-facts-row {
  display: grid;
  gap: 0 1.5rem;
  padding: 0.9rem 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.hero-facts-row > span {
  padding: 0.3rem 0;
  font-variant-numeric: tabular-nums;
}
.hero-facts-row b { color: var(--ink); font-weight: 600; }

@media (min-width: 640px) {
  .hero-facts-row { grid-template-columns: repeat(2, 1fr); }
  .hero-figure-main { margin-inline: 0; }
  .hero-figure-main figcaption { margin-inline: 0; padding-inline: 0; }
  .hero-figure-main img { aspect-ratio: auto; object-position: center; }
  .hero-figure-aside img { aspect-ratio: auto; }
  .hero-media {
    grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(0.75rem, 1.6vw, 1.25rem);
  }
  .hero-figure-aside { margin-top: clamp(2rem, 6vw, 5rem); }
}

@media (min-width: 900px) {
  .hero { padding-top: clamp(2.5rem, 4vw, 4rem); }
  /* Кадр слева, текст справа — не зеркало корпоративной страницы. */
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    align-items: center;
    gap: clamp(2rem, 3.5vw, 3.5rem);
  }
  .hero-copy { order: 2; }
  .hero-media {
    order: 1;
    margin-left: 0;
    margin-right: 0;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: clamp(0.85rem, 1.4vw, 1.25rem);
  }
  .hero-figure-aside { margin-top: clamp(3.5rem, 8vw, 7rem); }
  .hero-facts-row {
    grid-template-columns: repeat(4, 1fr);
    padding-top: 1rem;
  }
  .hero-facts-row > span + span { padding-left: 1.5rem; box-shadow: inset 1px 0 0 var(--line); }
}

@media (min-width: 1360px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); }
}

/* ============================================================
   Тёмный регистр: общая механика полос СОБЫТИЕ
   ============================================================ */

.on-stage {
  background: var(--stage);
  color: var(--on-stage);
}
.on-stage h1, .on-stage h2, .on-stage h3 { color: var(--on-stage); }
.on-stage .label { color: var(--on-stage-muted); }
.on-stage .lead, .on-stage .quiet { color: var(--on-stage-muted); }
.on-stage figcaption { color: var(--on-stage-muted); }
.on-stage figcaption .num { color: var(--ember-on-stage); }

/* ============================================================
   2 · РАБОТЫ — лента крупных горизонталей во всю ширину
   ============================================================ */

.works { padding: clamp(2.75rem, 6vw, 5rem) 0 clamp(2.25rem, 5vw, 4rem); margin-top: clamp(2.5rem, 5vw, 4rem); }

.works-head {
  display: grid; gap: 0.75rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 900px) {
  .works-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

.strip-wrap { position: relative; }

.strip {
  display: flex;
  /* Кадры почти соприкасаются — лента, как на мужском и dating лендингах,
     а не сетка плиток с зазорами. */
  gap: 2px;
  margin: 0;
  padding: 0 var(--edge) 0.5rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.strip > li { flex: 0 0 auto; scroll-snap-align: start; }
.strip button {
  display: block; padding: 0; border: 0; background: none;
  cursor: zoom-in; color: inherit; font: inherit;
}
.strip img {
  /* На телефоне кадр подрезается до почти квадрата: так люди остаются
     крупными, а следующий кадр заметно выглядывает и лента читается
     как лента. С планшета возвращается непорезанная горизонталь 3:2. */
  height: clamp(17rem, 62vw, 21rem);
  width: 78vw;
  max-width: none;
  object-fit: cover;
}
.strip-nav { display: none; }

@media (min-width: 640px) {
  .strip img {
    height: clamp(16rem, 30vw, 26rem);
    width: auto;
  }
}

@media (min-width: 900px) {
  .strip-nav {
    display: flex; gap: 0.4rem;
    position: absolute; right: var(--edge); bottom: calc(100% + 0.85rem);
  }
  .strip-btn {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 1px solid var(--line-stage); border-radius: 2px;
    background: transparent; color: var(--on-stage);
    font-size: 1.1rem; line-height: 1; cursor: pointer;
    transition: background 0.2s var(--ease);
  }
  .strip-btn:hover { background: rgba(255, 255, 255, 0.09); }
}

.strip-hint {
  margin: 1rem auto 0;
  font-size: var(--fs-xs);
  color: var(--on-stage-muted);
}

/* ============================================================
   ДИАПАЗОН — редакционная мозаика вместо ленты «три корпоратива»
   ============================================================ */

.range { padding: clamp(2.75rem, 6vw, 5rem) 0 clamp(2.25rem, 5vw, 4rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.range-head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

.range-grid {
  display: grid;
  gap: 0.5rem;
  padding-inline: var(--edge);
}
.range-grid figure { min-width: 0; margin: 0; }
.range-grid button {
  display: block; width: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in; color: inherit;
}
.range-grid img {
  width: 100%;
  object-fit: cover;
}
.range-grid figcaption {
  margin-top: 0.45rem;
  font-size: var(--fs-xs);
  color: var(--on-stage-muted);
}

/* 390: крупный → пара → крупный. Не пять одинаковых горизонталей. */
@media (max-width: 639px) {
  .range-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem 0.4rem;
  }
  .rg-1, .rg-4 { grid-column: 1 / -1; }
  .rg-1 img { height: clamp(16.5rem, 62vw, 22rem); }
  .rg-2 img, .rg-3 img { height: clamp(10.5rem, 40vw, 13.5rem); }
  .rg-4 img { height: clamp(13.5rem, 48vw, 17.5rem); }
  .rg-5 { grid-column: 1 / -1; }
  .rg-5 img { height: clamp(11rem, 42vw, 15rem); }
}

@media (min-width: 640px) {
  .range-grid {
    grid-template-columns: repeat(12, 1fr);
    gap: 0.65rem clamp(0.5rem, 1.2vw, 0.9rem);
  }
  .range-grid img { height: auto; aspect-ratio: 3 / 2; }
  .rg-1 { grid-column: span 7; }
  .rg-2 { grid-column: span 5; align-self: end; }
  .rg-3 { grid-column: span 4; }
  .rg-4 { grid-column: span 4; }
  .rg-5 { grid-column: span 4; }
}

/* ============================================================
   МАРШРУТ — типографика, не карточки услуг
   ============================================================ */

.routes { padding: 0 0 clamp(2.5rem, 6vw, 4.5rem); }
.routes .rail { max-width: 40rem; }
.routes-list {
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.routes-list li { border-bottom: 1px solid var(--line); }
.routes-list a {
  display: grid;
  gap: 0.2rem;
  padding: 0.85rem 0;
  text-decoration: none;
  color: inherit;
}
.routes-list h3 {
  display: inline;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  box-shadow: inset 0 -1px 0 transparent;
  transition: box-shadow 0.25s var(--ease);
}
.routes-list h3::after { content: " →"; font-weight: 400; }
.routes-list p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.routes-list a:hover h3 { box-shadow: inset 0 -1px 0 var(--ink); }
.routes-more {
  margin: 1.1rem 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.routes-more a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--line);
}
.routes-more a:hover { box-shadow: inset 0 -1px 0 var(--ink); }

/* Вторая мини-серия: три кадра, компактнее первой. */
.series-b { padding-top: 0; }
.series-b .series-grid { margin-top: 0.5rem; }
@media (min-width: 640px) {
  .sb-1 { grid-column: span 12; }
  .sb-2 { grid-column: span 6; }
  .sb-3 { grid-column: span 6; }
}

/* ============================================================
   3 · ЗАЯВЛЕНИЕ — пауза в прокрутке
   ============================================================ */

.statement { padding: clamp(3.5rem, 9vw, 7.5rem) 0; }
.statement-inner { max-width: 46rem; }
.statement h2 {
  font-size: var(--fs-statement);
  line-height: 1.13;
  letter-spacing: -0.025em;
}
.statement-punch {
  margin: 1.35rem 0 0;
  max-width: 30rem;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  color: var(--muted);
}

/* ============================================================
   4 · БЕЗ ПРОДЮСИРОВАНИЯ
   ============================================================ */

.brief { padding: 0 0 clamp(3rem, 7vw, 5.5rem); }
.brief-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.brief-layout { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); }

.brief-steps { margin: 0; padding: 0; list-style: none; }
.brief-steps li {
  padding: 1.15rem 0;
  border-top: 1px solid var(--line);
}
.brief-steps li:last-child { border-bottom: 1px solid var(--line); }
.brief-when {
  margin: 0 0 0.3rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
  font-variant-numeric: tabular-nums;
}
.brief-steps h3 { margin-bottom: 0.35rem; }
.brief-steps p { color: var(--muted); margin: 0; }

/* На телефоне кадры разъезжаются по разные стороны текста: иначе после
   заявления идёт около тысячи пикселей подряд идущего текста без единой
   фотографии. Обёртка растворяется, чтобы фигуры стали элементами сетки
   секции — список шагов при этом остаётся списком. */
.brief-media { display: contents; }
.brief-media figure { margin: 0; }
.brief-media figure:first-of-type { order: -1; }
.brief-steps { order: 0; }
.brief-media figure:last-of-type { order: 1; }

@media (min-width: 768px) {
  .brief-media { display: grid; gap: 0.75rem; grid-template-columns: 1fr 1fr; align-items: start; }
  .brief-media figure:first-of-type,
  .brief-media figure:last-of-type { order: 0; }
}
@media (min-width: 1000px) {
  .brief-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
  .brief-media { grid-template-columns: 1fr; gap: 1rem; }
  /* Второй кадр меньше и прижат вправо: два кадра в полную ширину колонки
     оказываются выше трёх шагов слева, и под текстом остаётся дыра в пол-экрана.
     Уступ и убирает её, и не даёт сетке читаться как таблица. */
  .brief-media figure:last-child { width: 52%; margin-left: auto; }
}

/* ============================================================
   5 · ЧТО ОКАЖЕТСЯ В ГАЛЕРЕЕ — асимметричная сетка кадров
   ============================================================ */

.coverage { padding: clamp(2.75rem, 6vw, 5rem) 0 clamp(2.5rem, 6vw, 4.5rem); }
.coverage-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

.coverage-grid {
  display: grid;
  gap: 0.75rem;
  padding-inline: var(--edge);
}
.coverage-grid figure { min-width: 0; }
.coverage-grid button {
  display: block; width: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in;
}
.coverage-grid img { width: 100%; }
.coverage-grid figcaption {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--on-stage-muted);
}

@media (max-width: 639px) {
  .coverage-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 0.4rem;
  }
  .cov-1, .cov-4 { grid-column: 1 / -1; }
  .coverage-grid img { height: auto; }
  .cov-1 img, .cov-4 img { aspect-ratio: 3 / 2; object-fit: cover; }
  .cov-2 img, .cov-3 img, .cov-5 img, .cov-6 img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }
}

@media (min-width: 640px) {
  .coverage-grid { grid-template-columns: repeat(12, 1fr); gap: 0.75rem clamp(0.75rem, 1.4vw, 1.1rem); }
  /* 7+5 · 5+7 · 8+4 — ни одна строка не повторяет предыдущую, и самый
     крупный кадр каждой строки достаётся людям, а не оформлению. */
  /* Более низкий кадр в паре прижимается к низу: ступенька уходит вверх и
     читается как вёрстка, а не как пустая дырка под картинкой. */
  .cov-1 { grid-column: span 7; }
  .cov-2 { grid-column: span 5; align-self: end; }
  .cov-3 { grid-column: span 5; align-self: end; }
  .cov-4 { grid-column: span 7; }
  .cov-5 { grid-column: span 8; }
  .cov-6 { grid-column: span 4; align-self: end; }
}

/* ============================================================
   6 · ТЁМНЫЙ ЗАЛ
   ============================================================ */

.lowlight { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.lowlight-grid { display: grid; gap: clamp(1.5rem, 3.5vw, 2.75rem); }
.lowlight-copy { max-width: 30rem; }
.lowlight-frames { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 0.4rem; }
.lowlight-frames img { width: 100%; }
.lowlight-frames figure:first-child { grid-column: span 2; }

@media (min-width: 768px) {
  .lowlight-frames { gap: 0.75rem; }
}
@media (min-width: 1000px) {
  .lowlight-grid { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: center; }
  /* Кадры уходят в правый край: тёмная полоса не имеет правой границы. */
  .lowlight-frames { margin-right: calc(-1 * var(--edge)); }
}

/* ============================================================
   7 · ОДИН КОРПОРАТИВ ЦЕЛИКОМ — редакционная секвенция
   ============================================================ */

.series { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 7vw, 5rem); }
.series-head { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.series-meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem;
  margin: 1rem 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.series-meta span { position: relative; }
.series-meta span + span::before {
  content: "·"; position: absolute; left: -0.75rem; color: var(--line);
}

.series-grid { display: grid; gap: 0.85rem 0.45rem; }
@media (max-width: 639px) {
  .series-grid { grid-template-columns: 1fr 1fr; }
  .ser-1, .ser-7, .ser-9 { grid-column: 1 / -1; }
  .series-grid img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
  .ser-2 img, .ser-3 img, .ser-4 img, .ser-5 img, .ser-6 img, .ser-8 img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }
}
.series-grid figure { min-width: 0; }
.series-grid button {
  display: block; width: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in;
}
.series-grid img { width: 100%; }
/* Нумерация превращает набор кадров в хронологию: читается как
   доказательство охвата вечера, а не как галерея удачных снимков. */
.series-grid figcaption {
  display: flex; align-items: baseline; gap: 0.55rem;
  margin-top: 0.6rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
.ser-num { color: var(--ember); font-variant-numeric: tabular-nums; }

.series-foot {
  display: grid; gap: 0.75rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.series-foot p { max-width: var(--measure); margin: 0; }
@media (min-width: 900px) {
  .series-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}

@media (min-width: 640px) {
  .series-grid { grid-template-columns: repeat(12, 1fr); gap: 1.25rem clamp(0.75rem, 1.4vw, 1.1rem); }
  /* 7+5 · 4+4+4 · 5+7 · 4+8 со сдвигом. Крупные слоты достаются моментам,
     которые читаются издалека; тёмный макро-кадр интерактива работает
     фактурой в тройке, а не разворотом. Финал закрывает секцию большим. */
  .ser-1 { grid-column: span 7; }
  .ser-2 { grid-column: span 5; align-self: end; }
  .ser-3 { grid-column: span 4; }
  .ser-4 { grid-column: span 4; }
  .ser-5 { grid-column: span 4; }
  .ser-6 { grid-column: span 5; align-self: end; }
  .ser-7 { grid-column: span 7; }
  .ser-8 { grid-column: span 4; align-self: end; }
  .ser-9 { grid-column: 5 / span 8; }
}

/* ============================================================
   8 · НАДЁЖНОСТЬ ПОДРЯДЧИКА — тихий операционный блок
   ============================================================ */

.trust {
  background: var(--paper-2);
  padding: clamp(3rem, 7vw, 5.5rem) 0;
}
.trust-head { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.trust-layout { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }

/* Сроки — крупными табличными цифрами, это первое, что ищут глазами. */
.deadlines { display: grid; gap: 1.25rem; }
.deadline {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.deadline-num {
  display: block;
  margin: 0 0 0.15rem;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.deadline-num small {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  margin-left: 0.35rem;
  color: var(--muted);
}
.deadline p { margin: 0.25rem 0 0; color: var(--muted); font-size: var(--fs-sm); }

.facts { margin: 0; }
.facts > div {
  display: grid;
  gap: 0.15rem 1.25rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
}
.facts dt {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.facts dd { margin: 0; font-size: var(--fs-sm); }

@media (min-width: 560px) {
  .facts > div { grid-template-columns: 11rem minmax(0, 1fr); align-items: baseline; }
}
@media (min-width: 768px) {
  .deadlines { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
@media (min-width: 1000px) {
  .trust-layout { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); align-items: start; }
  .deadlines { grid-template-columns: 1fr; }
}

/* ============================================================
   9 · СКОЛЬКО ЧАСОВ И СКОЛЬКО СТОИТ
   ============================================================ */

.pricing { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.pricing-grid { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); }
.pricing-figure { margin-top: 1.5rem; display: none; }

.price-rows { display: grid; }
.price-row {
  display: grid;
  gap: 0.3rem 1.5rem;
  padding: 1.35rem 0;
  border-top: 1px solid var(--line);
  transition: background 0.25s var(--ease);
}
.price-rows .price-row:last-of-type { border-bottom: 1px solid var(--line); }
.price-row.is-picked { background: color-mix(in srgb, var(--ember) 6%, transparent); }

.price-hours {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.price-chip {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.16rem 0.5rem;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ember) 12%, transparent);
  color: var(--ember);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: 0.25em;
}
.price-sum {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.price-sum small { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--muted); white-space: normal; }
.price-desc { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.price-math {
  display: block;
  margin-top: 0.5rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.price-act { margin: 0.5rem 0 0; }

.price-note {
  margin: 1.35rem 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.price-note b { color: var(--ink); font-weight: 600; }

.included { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.4rem 1.5rem; }
.included li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.included li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: color-mix(in srgb, var(--ember) 70%, transparent);
}
.included li b { color: var(--ink); font-weight: 600; }

@media (min-width: 560px) {
  .price-row {
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto;
    align-items: start;
  }
  .price-hours { grid-row: span 2; }
  .price-sum { grid-column: 3; grid-row: 1; text-align: right; }
  .price-desc { grid-column: 2; grid-row: 1; }
  .price-act { grid-column: 2 / span 2; grid-row: 2; margin-top: 0.75rem; }
  .included { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .pricing-grid { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: start; }
  .pricing-figure { display: block; }
  .price-row { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) 11rem; }
  .price-act { grid-column: 3; grid-row: 2; margin-top: 0.75rem; text-align: right; }
}

/* ============================================================
   10 · КОГО СНИМАЛ — названные события вместо цитат

   Ни одного отзыва про корпоратив или мероприятие на сайте нет:
   все 32 отзыва на Яндексе и все 13 скриншотов — про портретные
   и личные съёмки. Придумывать корпоративные цитаты нельзя,
   тащить сюда портретные — подлог. Поэтому социальное
   доказательство здесь другое и проверяемое: названные компании,
   у которых серии уже опубликованы, и агрегат рейтинга.
   ============================================================ */

.clients { padding: clamp(2.75rem, 6vw, 4.5rem) 0; }
.clients-head {
  display: grid; gap: 0.75rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 900px) {
  .clients-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

/* Полосы во всю ширину: название компании набрано поверх кадра, поэтому
   разная высота исходников больше не разваливает выравнивание подписей. */
.client-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.client-list a {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--on-stage);
  background: var(--stage);
}
.client-list img {
  display: block;
  width: 100%;
  height: clamp(13rem, 34vw, 26rem);
  object-fit: cover;
  object-position: center 42%;
  transition: opacity 0.35s var(--ease), transform 0.6s var(--ease);
}
/* Название должно читаться на любом кадре, поэтому затемнение — не декор. */
.client-list a::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(9, 8, 7, 0.72) 0%, rgba(9, 8, 7, 0.34) 46%, rgba(9, 8, 7, 0.1) 100%);
}
.client-label,
.client-go {
  position: absolute;
  z-index: 1;
  left: var(--edge);
}
.client-label { bottom: clamp(1.1rem, 2.6vw, 2rem); display: grid; gap: 0.2rem; }
.client-name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.client-what { font-size: var(--fs-sm); color: var(--on-stage-muted); }
.client-go {
  top: clamp(1.1rem, 2.6vw, 2rem);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--on-stage-muted);
}
.client-go::after { content: " →"; }
.client-list a:hover img { opacity: 0.82; transform: scale(1.012); }
.client-list a:hover .client-go { color: var(--on-stage); }
@media (prefers-reduced-motion: reduce) {
  .client-list a:hover img { transform: none; }
}

.clients-note {
  margin-block: clamp(1.5rem, 3vw, 2.25rem) 0;
  margin-inline: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-stage);
  display: grid; gap: 0.5rem 2rem;
  font-size: var(--fs-sm);
  color: var(--on-stage-muted);
}
.clients-note a { color: var(--on-stage); }
.clients-note b { color: var(--on-stage); font-weight: 600; font-variant-numeric: tabular-nums; }

@media (min-width: 900px) {
  .clients-note { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
}

/* ============================================================
   11 · ФОТОГРАФ
   ============================================================ */

.authority { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.authority-grid { display: grid; gap: 1.5rem; align-items: center; }
.authority-body { max-width: var(--measure); }
.authority-body p { color: var(--muted); }
.authority-body p:first-of-type { color: var(--ink); }

@media (min-width: 768px) {
  .authority-grid { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3rem); }
}
@media (min-width: 1000px) {
  .authority-grid { grid-template-columns: 4rem minmax(0, 18rem) minmax(0, 1fr); }
  .authority-grid > .label { grid-column: 1; align-self: start; margin: 0.35rem 0 0; }
}

/* ============================================================
   12 · FAQ
   ============================================================ */

.faq-section { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem); }
.faq-grid { display: grid; gap: 1.5rem; }
.faq-aside p { font-size: var(--fs-sm); }

.faq details {
  border-top: 1px solid var(--line);
}
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: flex-start; gap: 0.9rem;
  padding: 0.95rem 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  margin-left: auto;
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--muted);
  transition: transform 0.25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p {
  margin: 0 0 1rem;
  padding-right: 2rem;
  color: var(--muted);
  max-width: var(--measure);
}

@media (min-width: 1000px) {
  .faq-grid { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
}

/* ============================================================
   13 · ФИНАЛ — тёмный, с формой и крупным кадром
   ============================================================ */

.final { padding: clamp(3rem, 7vw, 5.5rem) 0 0; }
.final-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.final-copy h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: -0.025em;
}
.final-sub { margin: 0.9rem 0 0; max-width: 28rem; color: var(--on-stage-muted); }

.lead-form { margin-top: 1.75rem; position: relative; }
.form-pick {
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.85rem;
  margin: 0 0 1rem;
  font-size: var(--fs-sm);
  color: var(--on-stage-muted);
}
.form-pick[hidden] { display: none; }
.form-pick strong { color: var(--on-stage); font-weight: 600; }
.form-pick a { color: var(--on-stage-muted); }

.lead-fields { display: grid; gap: 0.85rem; }
.lead-form label { display: block; }
.lead-form label > span {
  display: block;
  margin-bottom: 0.35rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--on-stage-muted);
}
.lead-form input,
.lead-form select {
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line-stage);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--on-stage);
  font: inherit;
}
.lead-form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--on-stage-muted) 50%),
                    linear-gradient(135deg, var(--on-stage-muted) 50%, transparent 50%);
  background-position: calc(100% - 1.05rem) 1.35rem, calc(100% - 0.7rem) 1.35rem;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}
.lead-form select option { color: #111; }
.lead-form input::placeholder { color: rgba(255, 255, 255, 0.34); }
.lead-form input:focus,
.lead-form select:focus { border-color: rgba(255, 255, 255, 0.4); outline: none; }
.lead-form input:focus-visible,
.lead-form select:focus-visible { outline: 2px solid var(--ember-on-stage); outline-offset: 1px; }
.lead-form .btn { margin-top: 1.15rem; }
.form-bait {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}
.form-note { margin: 0.9rem 0 0; font-size: var(--fs-xs); color: var(--on-stage-muted); }
.form-note a { color: var(--on-stage-muted); }
.form-status { margin: 0.9rem 0 0; font-size: var(--fs-sm); }
.form-status[data-state="ok"] { color: #8fd6a8; }
.form-status[data-state="error"] { color: #f0a08a; }
.form-status[data-state="sending"] { color: var(--on-stage-muted); }
.lead-form.is-sending .btn { opacity: 0.6; pointer-events: none; }

.final-direct { margin: 1.5rem 0 0; font-size: var(--fs-sm); color: var(--on-stage-muted); }
.final-direct a { color: var(--on-stage); }

@media (min-width: 560px) {
  .lead-fields { grid-template-columns: 1fr 1fr; }
  .lead-fields label:has([name="event_kind"]) { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .final-grid { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); align-items: center; gap: clamp(2.5rem, 5vw, 4.5rem); }
  .final-figure { margin-right: calc(-1 * var(--edge)); }
}

/* ---------- подвал ---------- */

.site-footer {
  background: var(--stage);
  color: var(--on-stage-muted);
  padding: clamp(2rem, 4vw, 3rem) 0;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  font-size: var(--fs-sm);
}
.footer-row { display: grid; gap: 0.85rem; }
.footer-row p { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.35rem; }
.site-footer a { color: var(--on-stage); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

@media (min-width: 768px) {
  .footer-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
/* ---------- липкая мобильная кнопка ---------- */

.sticky-cta {
  position: fixed;
  left: 0.75rem; right: 0.75rem;
  bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: flex; gap: 0.5rem;
}
.sticky-cta[hidden] { display: none; }
@media (max-width: 899px) {
  body {
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  }
}
.sticky-cta .btn {
  flex: 1;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
}
.sticky-tg {
  display: grid; place-items: center;
  width: 48px;
  border-radius: 2px;
  background: var(--paper-3);
  color: var(--ink);
  font-size: var(--fs-xs); font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
}
@media (min-width: 900px) { .sticky-cta { display: none; } }

/* ---------- лайтбокс ---------- */

/* inset сверху — на --admin-bar-h: под редактором лендинг съезжает вниз, а
   fixed-оверлей остаётся у края окна и накрывает панель редактора. */
.lightbox {
  position: fixed; inset: var(--admin-bar-h) 0 0; z-index: 90;
  display: grid; place-items: center;
  padding: clamp(0.75rem, 3vw, 2.5rem);
  background: rgba(9, 8, 7, 0.95);
}
.lightbox[hidden] { display: none; }
body.lightbox-open {
  overflow: hidden;
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}
.lightbox figure {
  max-width: min(1400px, 100%);
  max-height: 100%;
  display: grid;
  gap: 0.75rem;
  justify-items: center;
}
.lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 8rem - var(--admin-bar-h));
  max-height: calc(100dvh - 8rem - var(--admin-bar-h));
  width: auto;
  object-fit: contain;
}
.lightbox figcaption {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; justify-content: center;
  margin: 0;
  color: var(--on-stage-muted);
  font-size: var(--fs-xs);
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 0; border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--on-stage);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.lightbox-close { top: max(0.75rem, env(safe-area-inset-top, 0px)); right: max(0.75rem, env(safe-area-inset-right, 0px)); font-size: 1.75rem; }
.lightbox-prev { left: 0.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 0.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { background: rgba(255, 255, 255, 0.16); }

@media (min-width: 900px) {
  .lightbox-prev { left: 1.5rem; }
  .lightbox-next { right: 1.5rem; }
}

/* ---------- появление ----------
   Герой сознательно исключён: он обязан быть готов на первом кадре. */

.reveal,
.reveal-mask { will-change: opacity, transform; }
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal-mask {
  opacity: 0;
  clip-path: inset(0 0 12% 0);
  transition: opacity 0.7s var(--ease), clip-path 0.9s var(--ease);
}
.reveal-mask.is-in { opacity: 1; clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-mask { opacity: 1; transform: none; clip-path: none; transition: none; }
}

/* ============================================================
   ВЕЧЕРИНКА — часы, аудитории, тёмная серия
   ============================================================ */

@media (min-width: 640px) {
  .hero-figure-aside { display: block; }
}
@media (max-width: 639px) {
  .hero-figure-aside { display: none; }
}

.hours { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.hours-list {
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}
.hours-list li {
  display: grid;
  gap: 0.25rem 1.25rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--line);
}
.hours-list li:last-child { border-bottom: 1px solid var(--line); }
.hours-list li.is-picked {
  background: color-mix(in srgb, var(--ember) 6%, transparent);
}
.hours .included { margin-top: 1.75rem; }
.hours .price-note { margin-top: 1.1rem; max-width: 40rem; }
.hour-k {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hour-sum {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hour-sum span {
  font-weight: 400;
  color: var(--muted);
}
.hour-copy {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  max-width: 36rem;
}
.hours-note {
  margin: 1.35rem 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  max-width: 40rem;
}
@media (min-width: 700px) {
  .hours-list li {
    grid-template-columns: 8.5rem 8rem minmax(0, 1fr) auto;
    align-items: baseline;
  }
  .hour-act { grid-column: 4; grid-row: 1; }
}
.hour-act { margin: 0.35rem 0 0; }
.hour-act a {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--ink);
}
.hour-act a:hover { color: var(--ember); box-shadow: inset 0 -1px 0 var(--ember); }

.who { padding: clamp(2.75rem, 6vw, 5rem) 0; }
.who-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.who-grid {
  display: grid;
  gap: 1.5rem 1.25rem;
}
.who-card figure { margin: 0 0 0.85rem; }
.who-card img { width: 100%; }
.who-card {
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
.who-card h3 {
  margin: 0 0 0.35rem;
  font-size: var(--fs-h3);
}
.who-card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}
@media (min-width: 768px) {
  .who-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.roles { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.roles-proof {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 0.4rem;
  margin: 1.25rem 0 0;
}
.roles-proof button {
  display: block; width: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in;
}
.roles-proof img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.roles-proof figcaption {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
.roles-list {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.1rem;
}
.roles-list li {
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
.roles-list figure { margin: 0 0 0.85rem; }
.roles-list img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.roles-list li:has(figure) { padding-top: 0; border-top: 0; }
.roles-list strong {
  display: block;
  margin: 0 0 0.2rem;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
}
.roles-list p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
@media (min-width: 768px) {
  .roles-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 1.75rem; }
}

.on-stage .series-foot { border-top-color: var(--line-stage); }
.on-stage .series-meta span + span::before { color: var(--line-stage); }
.on-stage .ser-num { color: var(--ember-on-stage); }
.on-stage .deadline { border-top-color: var(--line-stage); }
.on-stage .deadline-num { color: var(--on-stage); }
.on-stage .deadline-num small { color: var(--on-stage-muted); }
.on-stage .deadline p { color: var(--on-stage-muted); }

@media (min-width: 1000px) {
  .final-solo.final-grid {
    grid-template-columns: minmax(0, 36rem);
  }
}

.experience { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.experience-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.experience-copy { max-width: var(--measure); }
@media (min-width: 900px) {
  .experience-grid { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); align-items: start; }
}

.fast { padding: clamp(3rem, 7vw, 5.5rem) 0; }