/* =========================================================
   ШОСТАКОВИЧ И ФУТБОЛ — «Партитура матча»
   Design system: variables, base, layout, components
   ========================================================= */

/* ---------- Fonts ---------- */
/* Typography system, v3: Golos Text for both display/headings (ExtraBold 800
   on the hero, Bold 700 on section heads) and body copy — chosen for its
   properly-drawn Cyrillic (designed by Korolkova/Kuzmin for ParaType) after
   Jost/Inter's Cyrillic proved subpar. Literata kept for italic quote/role
   accents only. See .atmosphere-airy below for the looser "academic" spacing
   variant used on music/Shostakovich/history sections. Pre-typography-v2
   snapshot still at css/styles.pre-typography-backup.css if ever needed. */
@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700;800;900&family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,500;0,7..72,600;0,7..72,700;1,7..72,400;1,7..72,500&display=swap');

/* ---------- Variables ---------- */
:root{
  --navy:#123B70;
  --blue:#1769AA;
  --ice:#A9D9EE;
  --gold:#917B4C;
  --bg:#F5F7F6;
  --ink:#111417;
  --grey:#D8DDE0;
  --white:#FFFFFF;

  --font-display:'Golos Text', 'Arial Narrow', Arial, sans-serif;
  --font-sans:'Golos Text', -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-serif:'Literata', Georgia, 'Times New Roman', serif;

  --container:1400px;
  --gutter:clamp(20px, 4vw, 64px);
  --section-pad:clamp(56px, 9vw, 128px);

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-s:.25s;
  --dur-m:.5s;
  --dur-l:.9s;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4,p,figure,blockquote{margin:0;}
button,input{font-family:inherit;color:inherit;}
button{cursor:pointer;background:none;border:none;}
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
::selection{background:var(--blue);color:var(--white);}

/* ---------- Typography helpers ---------- */
.eyebrow{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue);
  display:inline-flex;
  align-items:center;
  gap:.5em;
}
.eyebrow::before{
  content:"";
  width:1.4em;
  height:1px;
  background:var(--blue);
  display:inline-block;
}
.eyebrow--light{color:var(--ice);}
.eyebrow--light::before{background:var(--ice);}

/* Base = "section header" register (Golos Text Bold 700, calmer tracking).
   .page-hero h1 bumps back up to a punchier ExtraBold register just below;
   .hero-title has its own smaller, quieter rule further down (near .hero). */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-.015em;
  line-height:.98;
  color:var(--ink);
}
h2{font-size:clamp(2rem,4vw,3.4rem);}
h3{font-size:clamp(1.35rem,2.4vw,1.9rem);}
h4{font-size:1.05rem;letter-spacing:.02em;}

/* Заголовок страницы = точная копия .hero-title со стартовой страницы
   (те же вес 700, трекинг -.035em, интерлиньяж .92 и размер — см. ниже). */
.page-hero h1{
  font-weight:700;
  letter-spacing:-.035em;
  line-height:.92;
}

.serif{font-family:var(--font-serif);text-transform:none;}
.lede{
  font-family:var(--font-sans);
  font-size:clamp(1.05rem,1.6vw,1.3rem);
  line-height:1.55;
  color:var(--ink);
  max-width:52ch;
}
.lede--blue{
  position:relative;z-index:1;
  color:var(--navy);
  max-width:85ch;
  font-size:clamp(1.05rem,1.6vw,1.3rem);   /* тот же кегль, что у лида «Юбилей…» (.lede) */
  line-height:1.3;
  padding:14px 0 14px var(--gutter);       /* правый край текста — по правой границе блока */
}
section.timeline-section{padding-top:56px;}
.timeline-section .section-head{position:relative;}
.timeline-section .section-head > .reveal{position:relative;z-index:1;}
.timeline-section .section-head > .lede--blue{
  position:absolute;
  left:calc(100vw / 3 - max(0px, (100vw - var(--container)) / 2) - var(--gutter));
  right:0;
  top:6px;               /* лёгкий оптический сдвиг вниз — компенсирует короткую последнюю строку лида */
  max-width:none;
}
.timeline-section .section-head::before{
  content:"";position:absolute;
  top:-56px;
  left:calc(100vw / 3 - max(0px, (100vw - var(--container)) / 2) - var(--gutter));
  right:calc(-1 * var(--gutter) - max(0px, (100vw - var(--container)) / 2));
  height:var(--fill-height, calc(100% + clamp(32px,5vw,64px) + 56px));
  background:var(--ice);
  z-index:0;
}
.body-text{font-family:var(--font-sans);font-size:1.05rem;line-height:1.65;color:#2b2f33;max-width:64ch;}
.body-text + .body-text{margin-top:1.1em;}

/* «Почему сейчас»: лид длиннее заголовка и при flex-end прижимает заголовок
   вниз. Поднимаем заголовок к верху и смещаем чуть выше лида — эхом того, как
   в таймлайне заголовок «приподнят» относительно своего лида (lede bottom:0). */
#why-now .section-head{align-items:flex-start;}

/* "Academic" atmosphere — looser line-height, a touch of extra letter-
   spacing, more room between paragraphs and before section content. Applied
   to sections about music, Shostakovich and history so those pages read
   closer to a music-publication than the denser hero/football register. */
.atmosphere-airy .body-text,
.atmosphere-airy .lede,
.atmosphere-airy .pillar p,
.atmosphere-airy .city-card p,
.atmosphere-airy .compare-table td{
  line-height:1.75;
  letter-spacing:.01em;
}
.atmosphere-airy .body-text + .body-text{margin-top:1.5em;}
.atmosphere-airy .section-head{margin-bottom:clamp(40px,6vw,80px);}
.caption{
  font-family:var(--font-display);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#6b7378;
}
.num-display{
  font-family:var(--font-display);
  font-weight:900;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  color:var(--ink);
}

/* ---------- Buttons / links ---------- */
.btn-arrow{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:.6em;
  color:var(--navy);
  padding-bottom:.35em;
  border-bottom:1px solid var(--grey);
  transition:border-color var(--dur-s) var(--ease), gap var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.btn-arrow span.arrow{transition:transform var(--dur-s) var(--ease);}
.btn-arrow:hover{border-color:var(--blue);color:var(--blue);gap:.9em;}
.btn-arrow--light{color:var(--white);border-color:rgba(255,255,255,.35);}
.btn-arrow--light:hover{color:var(--ice);border-color:var(--ice);}

.btn-solid{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:.6em;
  background:var(--blue);
  color:var(--white);
  padding:.95em 1.6em;
  border-radius:2px;
  transition:background var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.btn-solid:hover{background:var(--navy);transform:translateY(-1px);}

/* ---------- Staff-line decorative component ---------- */
.staff{
  --lines:5;
  position:relative;
  width:100%;
}
.staff .staff-line{
  height:1px;
  background:currentColor;
  opacity:.35;
  margin-bottom:calc(100% / 22);
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform 1.1s var(--ease);
}
.staff.is-visible .staff-line{transform:scaleX(1);}
.staff .staff-line:nth-child(1){transition-delay:.02s;}
.staff .staff-line:nth-child(2){transition-delay:.09s;}
.staff .staff-line:nth-child(3){transition-delay:.16s;}
.staff .staff-line:nth-child(4){transition-delay:.23s;}
.staff .staff-line:nth-child(5){transition-delay:.3s;margin-bottom:0;}
.staff .staff-note{
  position:absolute;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--blue);
  transform:translate(-50%,-50%) scale(0);
  transition:transform .5s var(--ease) .9s;
}
.staff.is-visible .staff-note{transform:translate(-50%,-50%) scale(1);}

/* ---------- Reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.reveal-strip{clip-path:inset(0 46% 0 46%);transition:clip-path 1s var(--ease);}
.reveal-strip.is-visible{clip-path:inset(0 0 0 0);}
[data-stagger] > *{transition-delay:calc(var(--i,0) * 80ms);}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;left:0;right:0;z-index:100;
  background:var(--bg);
  border-bottom:1px solid var(--grey);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:84px;
}
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.logo-mark{width:30px;height:30px;color:var(--navy);}
.logo-mark line{stroke:currentColor;stroke-width:1.4;}
.logo-mark circle{fill:var(--blue);}
.logo-text{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.72rem;
  line-height:1.35;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--ink);
}
.main-nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px);}
.nav-item{
  position:relative;
  display:flex;align-items:baseline;gap:.4em;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.02em;
  padding:8px 0 14px;
  color:#4c545a;
  transition:color var(--dur-s) var(--ease);
  white-space:nowrap;
}
.nav-item .nav-num{font-weight:800;color:#8b9298;font-size:.75rem;transition:color var(--dur-s) var(--ease);}
.nav-item::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:100%;height:2px;background:var(--blue);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-s) var(--ease);
}
.nav-item:hover{color:var(--ink);}
.nav-item.is-active{color:var(--ink);}
.nav-item.is-active .nav-num{color:var(--blue);}
.nav-item.is-active::after{transform:scaleX(1);}
.header-tools{display:flex;align-items:center;gap:18px;flex-shrink:0;}
.lang-toggle{
  font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:.08em;
  display:flex;align-items:center;gap:.4em;color:#8b9298;
}
.lang-toggle .is-active{color:var(--ink);}
.lang-toggle .divider{color:var(--grey);}
/* Монограмма Шостаковича D–S–C–H в шапке (заменила переключатель RU/EN) */
.dsch-mark{
  font-family:var(--font-display);font-weight:700;font-size:.9rem;letter-spacing:.22em;
  color:var(--blue);padding-left:.22em;user-select:none;
}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:32px;height:32px;}
.nav-burger span{height:1.5px;background:var(--ink);width:100%;transition:transform var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease);}

/* Mobile nav overlay */
@media (max-width:900px){
  .main-nav{
    position:fixed;inset:84px 0 0 0;
    background:var(--navy);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:0;
    padding:0 var(--gutter);
    transform:translateY(-8px);
    opacity:0;visibility:hidden;
    transition:opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease), visibility 0s var(--dur-m);
  }
  .main-nav.is-open{opacity:1;visibility:visible;transform:translateY(0);transition:opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);}
  .nav-item{color:rgba(255,255,255,.6);font-size:1.6rem;padding:14px 0;width:100%;border-bottom:1px solid rgba(255,255,255,.12);}
  .nav-item .nav-num{color:rgba(255,255,255,.4);font-size:1rem;}
  .nav-item.is-active,.nav-item:hover{color:var(--white);}
  .nav-item.is-active .nav-num{color:var(--ice);}
  .nav-burger{display:flex;}
  .nav-burger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .nav-burger.is-open span:nth-child(2){opacity:0;transform:scaleX(0);}
  .nav-burger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
}

/* ---------- Page header (inner pages) ---------- */
.page-hero{
  padding:var(--section-pad) 0 clamp(40px,6vw,72px);
  border-bottom:1px solid var(--grey);
}
.page-hero .page-num{
  font-size:clamp(3.2rem,7vw,5.5rem);
  color:var(--ice);
  line-height:.8;
  margin-bottom:.15em;
}
.page-hero h1{font-size:clamp(2.4rem,5.5vw,4.4rem);}
.page-hero .lede{margin-top:24px;}
.lede-dl{color:var(--blue);border-bottom:1px solid rgba(23,105,170,.45);padding-bottom:1px;transition:color var(--dur-s) var(--ease),border-color var(--dur-s) var(--ease);}
.lede-dl:hover{color:var(--navy);border-color:var(--navy);}

/* ---------- Section shell ---------- */
.section{padding:var(--section-pad) 0;}
.section--border{border-bottom:1px solid var(--grey);}
.section--dark{background:var(--navy);color:var(--white);}
.section--dark h2,.section--dark h3,.section--dark h4{color:var(--white);}
.section--grey{background:#e2e7ec;}
.section--blue{background:var(--blue);}
.section--ice{background:var(--ice);}
.section-head{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;
  margin-bottom:clamp(32px,5vw,64px);
}

/* ---------- Hero (home) ---------- */
.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;
}
.hero{
  display:grid;
  grid-template-columns:1fr minmax(0,1.3fr);
  position:relative;
}
.hero-staff-bottom{
  position:absolute;right:0;top:87%;z-index:2;
  width:0;height:1px;
  background:var(--ice);opacity:.72;
  transition:width .6s var(--ease) 4.1s;
  pointer-events:none;
}
.hero.is-ready .hero-staff-bottom{width:100%;}
.hero-right{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
}
.hero-copy{
  padding:clamp(28px,4vw,56px) var(--gutter) clamp(28px,4vw,56px);
  display:flex;flex-direction:column;justify-content:center;
  position:relative;
}
.hero-title{
  font-size:clamp(2.4rem,5.5vw,4.4rem);
  line-height:.92;
  font-weight:700;
  letter-spacing:-.035em;
  text-align:right;
  align-self:flex-start;
}
.hero-title .line1{display:block;}
.hero-title .line2{display:block;color:var(--navy);}
.hero-divider{
  position:relative;
  height:1.5px;
  margin:96px calc(-1 * var(--gutter)) 22px calc(-1 * var(--gutter));
}
.hd-v{
  position:absolute;left:calc(var(--gutter) - 20px);top:0;
  width:1.5px;height:0;
  background:var(--blue);
  transition:height .9s var(--ease) .2s;
}
.hero-divider .hd-h{
  position:absolute;left:0;top:0;
  width:0;height:1.5px;
  background:var(--blue);
  transition:width 1s var(--ease) 1s;
}
.hero.is-ready .hd-v{height:100%;}
.hero.is-ready .hero-divider .hd-h{width:100%;}
/* Подпись + «2026» в одном ряду: число прижато к правому краю hero-текста
   (margin-left:auto) — даёт блоку чистое правое поле и не зависит от длины
   подписи. flex-wrap роняет «2026» под подпись на узких экранах (раньше при
   left:100% оно уезжало за край и обрезалось overflow-x). */
/* «2026» — в правый нижний угол текстового блока, на ОДНУ базовую линию с
   последней строкой подписи (чистая нижняя строка hero: «…Шостаковича» слева,
   «2026» справа). last baseline равняет по базовой линии последней строки —
   именно поэтому верхний «пустой» полулидинг крупного числа не участвует.
   flex-end оставлен фолбэком для браузеров без поддержки last baseline. */
.hero-tagline-row{
  display:flex;flex-wrap:wrap;
  align-items:flex-end;
  align-items:last baseline;
  gap:16px 22px;margin-top:22px;
}
/* Подпись увеличена через transform:scale — он применяется ПОСЛЕ раскладки,
   поэтому не меняет ни высоту блока, ни положение линеек/стана (ни миллиметра).
   Растёт вниз-вправо из левого-верхнего угла (в пустое место), кегль и
   межстрочный интервал увеличиваются пропорционально. */
.hero-tagline{max-width:34ch;font-size:1.05rem;transform:scale(1.18);transform-origin:left top;}
.hero-season{margin-left:auto;flex-shrink:0;}
.hero-season .num-display{font-size:clamp(2.2rem,5vw,3.4rem);color:var(--ice);line-height:.8;-webkit-text-stroke:1px var(--navy);white-space:nowrap;}

.hero-photo{
  position:relative;
  overflow:hidden;
  background:#0d1013;
  min-height:420px;
}
.hero-video{
  position:absolute;left:0;width:100%;
  top:-11.11%;height:111.11%;
  object-fit:cover;object-position:center;
}
.staff-l1,.staff-l2,.staff-l3,.staff-l4{
  position:absolute;left:0;width:0;height:1px;z-index:2;
  background:var(--ice);opacity:.72;pointer-events:none;
  transition:width .6s var(--ease);
}
.staff-l1{top:60.9%;transition-delay:2s;}
.staff-l2{top:67.4%;transition-delay:2.6s;}
.staff-l3{top:73.9%;transition-delay:3.1s;}
.staff-l4{top:80.4%;transition-delay:3.6s;}
.hero.is-ready .staff-l1,
.hero.is-ready .staff-l2,
.hero.is-ready .staff-l3,
.hero.is-ready .staff-l4{width:100%;}

/* Handwritten fragments — «мысли героя»: 34 обрывка его собственной руки
   (турнирная таблица 1938 — лёд; список сочинений 1926 и нотные записи —
   синий) вспыхивают вокруг человека на экране, никогда не касаясь лица
   (x 36-80 / y 0-60 на максимальном зуме видео), галстука (x 47-64 /
   y 50-100) и самой золотой черты «1» (штрих на x~91-94 / y 32-61).
   Композиция: обе «трибуны» (левая зона и правая кромка) заняты
   мыслями-словами, но ХАОТИЧНО — левые края рваные (сдвиги до 29%),
   вертикальные зазоры неровные, половина фрагментов с поворотами
   -18..+14 — ни один сосед не начинается с той же вертикали.
   Нижняя треть отдана нотному стану: рукописные ключ и триоли (правая
   продублирована вторым экземпляром в середине стана) с группой нот,
   beam-группа якорится низом к линейке l4 (bottom:19.6%), названия
   сочинений идут под станом строками со сдвигом.
   Римские цифры: I — верх слева, III — на стане (по просьбе: вернулась
   «неиспользованная»), V — правее лица, между ним и золотой чертой,
   X — низ слева. Одновременно и подряд не появляются — планировщик
   hwCycle в main.js держит паузу ≥12 c между любыми двумя цифрами.
   Ширина в % от .hero-photo, высота — фикс. px при эталоне 780px;
   раскладка проверена генератором на высотах 420/480/560: зазор между
   любой парой соседей ≥0.75% по одной из осей, включая повороты. */
.hw-note{
  position:absolute;
  max-width:none;
  z-index:3;
  opacity:.88;
  pointer-events:none;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .75s var(--ease);
}
.hw-note.is-on{clip-path:inset(0 0 0 0);}
/* левая «трибуна» — РВАНЫЕ левые края (0.5 / 3.2 / 29.3 / 8.3 / 1.0 /
   15.6 / 29.8 / 2.4 / 15.4 / 14.2), неровные вертикальные зазоры и
   разнонаправленные повороты: ни столбцов, ни строк */
.hw-note--title{top:2.2%;left:0.5%;width:33.5%;height:51.8px;}
.hw-note--zenit{top:16.6%;left:3.2%;width:23.7%;height:28.4px;transform:rotate(-2deg);}
.hw-note--roman-i{top:22.4%;left:29.3%;width:5.9%;height:53.7px;}
.hw-note--lokomotiv-m{top:26.9%;left:8.3%;width:15.1%;height:23.3px;transform:rotate(2deg);}
.hw-note--music-emoll{top:35.4%;left:1%;width:11.5%;height:33.4px;transform:rotate(-4deg);}
.hw-note--music-amoll{top:37.3%;left:15.6%;width:11.5%;height:35.8px;transform:rotate(3deg);}
.hw-note--zenit-logo{top:39.9%;left:29.8%;width:4.1%;height:28.8px;transform:rotate(8deg);}
.hw-note--hdr-mesto{top:47.9%;left:2.4%;width:10.8%;height:47.2px;transform:rotate(-2deg);}
.hw-note--stat-75-20{top:49.5%;left:15.4%;width:10.8%;height:24.6px;transform:rotate(-2deg);}
.hw-note--elektrik{top:57.4%;left:14.2%;width:12.4%;height:14.4px;}
/* нотный стан: рукописные ключ, триоли (вторая — копия правой) и
   группа с рёбрами; между ними — «неиспользованная» римская III */
.hw-note--note-clef{top:64.2%;left:0.9%;width:6.3%;height:97.5px;}
.hw-note--note-trip1{top:62%;left:8.9%;width:8%;height:75.4px;}
.hw-note--roman-iii{top:63.1%;left:19.6%;width:5.9%;height:34.5px;transform:rotate(14deg);}
.hw-note--note-trip2b{top:62.6%;left:28.1%;width:5%;height:70.7px;transform:rotate(-6deg);}
.hw-note--note-beam{bottom:19.6%;left:36.2%;width:10.2%;height:57.3px;}
.hw-note--dinamo-m{top:81.3%;left:12.1%;width:15.1%;height:19.5px;}
.hw-note--music-gdur{top:82.6%;left:28.6%;width:10.8%;height:19.9px;transform:rotate(2deg);}
/* под станом: строки со сдвигом, слева цифра X */
.hw-note--roman-x{bottom:2.6%;left:2.1%;width:5.9%;height:31.3px;transform:rotate(-18deg);}
.hw-note--dinamo-l{top:88.4%;left:10%;width:22.4%;height:19.8px;}
.hw-note--music-fortepyano{top:88.6%;left:33.6%;width:11.5%;height:15.4px;transform:rotate(-2deg);}
.hw-note--music-strekoza{bottom:2.2%;left:12.6%;width:20.3%;height:15.8px;}
.hw-note--stat-35-57{bottom:1.6%;left:35.1%;width:10.8%;height:20.2px;transform:rotate(3deg);}
/* правая кромка над трибуной — до золотой «1», края тоже рваные */
.hw-note--cdka{top:2.3%;left:81.9%;width:15.1%;height:23.7px;transform:rotate(2deg);}
.hw-note--music-opus5{top:9.8%;left:84.6%;width:12.2%;height:45.5px;transform:rotate(-7deg);}
.hw-note--music-opus3{top:22.6%;left:82.2%;width:12.2%;height:38.2px;transform:rotate(-2deg);}
/* правая нижняя четверть — ниже золотой «1»; отступы 66.6/69.3/74.4/68.2 */
.hw-note--spartak-m{top:61.2%;left:66.6%;width:15.1%;height:22.4px;}
.hw-note--hdr-ochki{top:67.7%;left:69.3%;width:10.8%;height:29.2px;}
.hw-note--music-vosem{top:76.05%;left:74.4%;width:15.1%;height:20.4px;}
/* V — правее лица, посередине между ним и золотой чертой «1»
   (сама черта — штрих на ~91-94% ширины — не перекрывается) */
.hw-note--roman-v{top:39.9%;left:82%;width:5.9%;height:49.6px;}
.hw-note--note-trip2{top:67.2%;left:91%;width:5.6%;height:79.1px;}
.hw-note--music-skertso{top:82.15%;left:68.2%;width:20.3%;height:21.5px;transform:rotate(-1deg);}
.hw-note--kubka{bottom:2.8%;left:66.9%;width:29%;height:37.6px;}

.hero-photo::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 20%, rgba(169,217,238,.12), transparent 60%);
  mix-blend-mode:screen;
}

.hero-side{
  background:var(--navy);
  color:var(--white);
  position:relative;
  padding:24px 20px;
  display:flex;flex-direction:column;justify-content:space-between;
  min-width:150px;
}
.hero-side .side-top{display:flex;justify-content:flex-end;}
.hero-side .side-lang{font-family:var(--font-display);font-weight:700;font-size:.7rem;letter-spacing:.1em;color:rgba(255,255,255,.5);}
.hero-side .side-lang .is-active{color:var(--white);}
.hero-side .side-mid{
  flex:1;position:relative;margin:20px 0;
  --glyph-h:calc(112px * 0.9);
}
.hero-photo-num{
  --glyph-w:calc(68px * 0.9);
  position:absolute;top:50%;right:calc(100% - (var(--glyph-w) * 2 / 3));
  transform:translateY(-50%);
  display:flex;align-items:center;gap:14px;white-space:nowrap;
}
.hero-photo-num .num-glyph{
  width:var(--glyph-w);height:var(--glyph-h);max-width:none;flex-shrink:0;
  fill:none;stroke:var(--white);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.hero-photo-num .num-glyph:first-child{stroke:var(--gold);}
/* Голубая подкладка под золотой «1» — тот же штрих, но толще и позади;
   рисуется первым в SVG, поэтому золото ложится поверх. */
.hero-photo-num .num-glyph .num-glyph-back{stroke:var(--ice);stroke-width:3.5;}
.pitch-marks{position:absolute;inset:0;}
.pitch-marks span{position:absolute;border:1px solid rgba(255,255,255,.28);}
.pitch-marks .corner-tl{top:6%;left:0;width:46%;height:70px;border-right:none;border-bottom:none;}
.pitch-marks .circle{
  top:50%;left:50%;width:84px;height:84px;border-radius:50%;
  transform:translate(-50%,-50%);
}
.pitch-marks .circle::after{content:"";position:absolute;top:50%;left:50%;width:5px;height:5px;background:var(--ice);border-radius:50%;transform:translate(-50%,-50%);}
.pitch-marks .corner-bl{bottom:8%;left:0;width:46%;height:70px;border-right:none;border-top:none;}
.hero-side .side-label{
  writing-mode:vertical-rl;
  font-family:var(--font-display);font-weight:700;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ice);position:absolute;right:20px;top:50%;white-space:nowrap;
  transform:translateY(-50%) rotate(180deg);
}
.hero-side .side-years{
  display:flex;flex-direction:column;gap:2px;
  font-size:clamp(1.6rem,2.4vw,2.2rem);
  color:var(--white);
}
.hero-side .side-years span:last-child{color:rgba(255,255,255,.45);}

@media (max-width:1100px){
  .hero{grid-template-columns:1fr;}
  .hero-tagline{transform:none;}
  .hero-right{transform:none;grid-template-columns:1fr;}
  .hero-photo{aspect-ratio:auto;min-height:280px;order:-1;}
  .hero-side{flex-direction:row;align-items:center;min-width:0;padding:16px var(--gutter);}
  .hero-side .side-mid{display:none;}
  .hero-side .side-years{flex-direction:row;gap:10px;font-size:1.4rem;}
}

/* ---------- Timeline (Партитура) ---------- */
.timeline-section{background:var(--white);padding-bottom:0;}
.timeline-wrap{
  display:grid;
  grid-template-columns:minmax(240px,320px) 1fr;
  border-top:1px solid var(--grey);
  border-bottom:1px solid var(--grey);
  transform-origin:top;
  margin-bottom:-26px;             /* компенсируем высоту, «съеденную» scaleY, чтобы подвал сел вплотную под ленту */
}
/* Таймлайн на 5% ниже. Масштаб держим в самих reveal-состояниях: иначе
   .reveal.is-visible{transform:translateY(0)} сбрасывал бы scaleY после анимации
   появления, и лента возвращалась к полной высоте, налезая на подвал. */
.timeline-wrap.reveal{transform:scaleY(0.95) translateY(28px);}
.timeline-wrap.reveal.is-visible{transform:scaleY(0.95) translateY(0);}
/* The legend is one continuous 520px coordinate space, same height as
   .score-viewport (via grid stretch) — its 5 lines sit at the exact same
   y-coordinates as .score-lines so the staff visually runs straight across
   the border between the two blocks, just in a different colour. */
.timeline-legend{
  position:relative;
  padding:0;border-right:1px solid var(--grey);
  background:var(--ice);
}
/* Four colour-coded bands stacked in the legend's 520px coordinate space —
   everything except the 224-288px staff strip (left untouched, still just
   the parent's ice background behind the lines) gets its own background +
   text colour so each part of "how to read this" reads as its own chip. */
.legend-band{position:absolute;left:0;width:100%;}
.legend-band--year{top:0;height:110px;background:var(--navy);}
.legend-band--music{top:110px;height:114px;background:var(--ice);}
.legend-band--football{top:288px;height:72px;background:var(--blue);}
.legend-band--explain{top:360px;bottom:0;background:var(--white);}

/* Current-year readout. JS keeps the number in sync with whichever event
   has most recently crossed the focus line (see updateLegendYear() in
   main.js). */
.legend-counter{padding:24px 28px 0 var(--gutter);}
.legend-counter-label{
  display:block;
  font-family:var(--font-display);font-weight:700;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(169,217,238,.75);
  margin-bottom:2px;
}
.legend-counter-num{
  display:block;
  font-family:var(--font-display);font-weight:700;font-size:2.6rem;line-height:1;
  letter-spacing:-.01em;color:var(--ice);
  font-variant-numeric:tabular-nums;
  /* Fixed-width slot: the box is a constant 4 characters regardless of which
     digits are shown, so the controls beside it never shift when the year
     changes (tabular-nums alone wasn't enough — the display face has
     proportional digits). */
  width:4ch;flex:none;text-align:left;
  transition:opacity .3s ease;
}
.legend-counter-num.is-updating{opacity:.25;}

.legend-staff-lines{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;}
.legend-staff-lines line{stroke:var(--navy);stroke-width:1;opacity:.4;}

.legend-staff-label{
  position:absolute;left:0;width:100%;text-align:center;white-space:nowrap;
  font-family:var(--font-display);font-weight:800;font-size:.82rem;
  letter-spacing:.09em;text-transform:uppercase;
}
.legend-staff-label--music{bottom:24px;color:var(--navy);}
.legend-staff-label--football{top:24px;color:var(--white);}

.legend-explain{
  height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:20px 28px 28px var(--gutter);
}
.legend-explain h3{font-size:1.05rem;margin-bottom:10px;color:var(--navy);}
.legend-hint{margin:0;line-height:1.5;color:rgba(18,59,112,.65);}

/* Scrolling score: 5-line staff, ball-notes above (music) and below (football),
   fixed playhead, perpetual autoplay with hover/drag pause. See js/main.js #score */
.score{width:100%;min-width:0;position:relative;}
.score-viewport{
  position:relative;
  overflow:hidden;
  padding:0;
  cursor:grab;
  touch-action:pan-y;
  -webkit-user-select:none;user-select:none;
}
.score-viewport:active{cursor:grabbing;}
.score-track{position:relative;height:520px;}
.score-lines{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;}
.score-lines line{stroke:var(--grey);stroke-width:1;}

/* Horizontal position (left:0 + a per-frame translateX from JS) and the
   -50%,-50% centering both live in the transform JS writes every frame —
   see applyOffset() in main.js. Only the fixed vertical placement (top) and
   the visual styling stay in CSS. */
.score-year{
  position:absolute;top:256px;left:0;z-index:4;
  background:var(--bg);padding:0 7px;
  line-height:1;
  will-change:transform;
}
.score-year .year-num{
  display:inline-block;
  font-family:var(--font-display);font-weight:800;font-size:.8rem;color:#8b9298;
  letter-spacing:.01em;
  opacity:0;
  transition:color .2s linear;
  will-change:opacity;
}
.score-year.is-active .year-num{color:var(--blue);}

.score-note{position:absolute;left:0;opacity:0;will-change:transform,opacity,filter;}
.score-note .head{
  width:17px;height:17px;border-radius:50%;
  background:var(--bg);border:1.3px solid #9aa1a6;
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s linear;
}
.score-note .head svg{width:100%;height:100%;padding:3px;box-sizing:border-box;}
.score-note .head polygon{fill:var(--ice);}
.score-note.is-active .head{transform:scale(1.3);box-shadow:0 0 0 6px rgba(169,217,238,.45);border-color:var(--ice);}

.score-note--football .head polygon{fill:var(--blue);}
.score-note--football.is-active .head{box-shadow:0 0 0 6px rgba(23,105,170,.22);border-color:var(--blue);}

.score-caption{
  position:absolute;left:0;width:186px;
  font-family:var(--font-serif);font-size:.78rem;line-height:1.3;text-align:center;
  opacity:0;
  will-change:transform,opacity,filter;
}
/* Position (top for football, bottom for music — set per event inline in
   index.html) keeps a fixed 84px gap from each caption's own note, growing
   away from it, rather than sharing one fixed line for the whole category. */
.score-caption--music{color:var(--navy);}
.score-caption--football{color:var(--blue);}

/* Sharp twin stacked on each caption — always full clarity, no blur; JS clips
   it from the right so only the portion past the focus line shows, revealing
   the text left-to-right as it crosses rather than fading the whole block. */
/* Same font-weight as the base (400) on purpose — anything heavier measures
   wider per character in Literata and would wrap the text differently from
   its dim twin underneath, so words could land on different lines between
   the two states. The "bold" read comes from a hairline stroke instead,
   which paints on top of the glyphs without touching layout at all. */
.score-caption-sharp{
  position:absolute;left:0;width:186px;
  font-family:var(--font-serif);font-size:.78rem;line-height:1.3;text-align:center;
  -webkit-text-stroke:.45px currentColor;
  pointer-events:none;
  will-change:transform,clip-path,opacity;
}

/* The line itself is an SVG lens shape (widest + most opaque at the centre
   line, tapering to a point and fading to nothing at top/bottom) rather than
   a flat bar, plus five short "teeth" reaching right at each staff line —
   .score-playhead is just the positioning anchor. The shape isn't symmetric
   inside its own box (the teeth stick out to one side), so it's anchored
   with a fixed pixel offset instead of -50% centering, keeping the line
   itself — not the teeth — exactly on the 44% mark. */
.score-playhead{
  position:absolute;top:0;bottom:0;left:44%;width:12px;margin-left:-4px;
  pointer-events:none;z-index:3;
}
.score-playhead-line{position:absolute;left:0;top:0;width:100%;height:100%;display:block;}

@media (max-width:900px){
  .timeline-wrap{grid-template-columns:1fr;}
  .timeline-legend{border-right:none;border-bottom:1px solid var(--grey);display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px var(--gutter);}
  /* Bands collapse from tall absolute strips into small coloured chips in a
     row — each keeps its own background from the base rule above, only the
     position/size resets here. */
  .legend-band{position:static;width:auto;height:auto;padding:6px 12px;border-radius:4px;}
  .legend-band--year{order:-1;}
  .legend-counter{padding:0;display:flex;align-items:baseline;gap:6px;}
  .legend-counter-label{margin-bottom:0;}
  .legend-counter-num{font-size:1.2rem;}
  .legend-band--year{display:flex;align-items:center;gap:12px;}
  .legend-counter-row{gap:10px;}
  .score-controls{gap:6px;}
  .sc-btn{width:32px;height:32px;font-size:1.25rem;}
  .sc-i{width:17px;height:17px;}
  .legend-staff-lines{display:none;}
  .legend-staff-label{position:static;width:auto;}
  .legend-band--explain{display:none;}
  .score-playhead{left:24%;}
  .score-caption{width:145px;font-size:.7rem;}
  .score-caption-sharp{width:145px;font-size:.7rem;}
}

/* ---------- Teaser cards (home) ---------- */
.teasers{
  display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--grey);
}
.teaser-card{
  min-height:320px;
  display:flex;
  position:relative;overflow:hidden;
  border-right:1px solid var(--grey);
  border-bottom:1px solid var(--grey);
  color:var(--ink);
}
.teaser-card:nth-child(3n){border-right:none;}
.teaser-card:nth-child(2) .teaser-copy{background:var(--grey);}
.teaser-card--wide{grid-column:1 / -1;}
.teaser-card--wide .teaser-copy{width:33%;}
.teaser-card--wide .teaser-img{width:67%;}
.teaser-card--wide .teaser-copy p{max-width:34ch;}

.teaser-copy{width:52%;padding:28px;display:flex;flex-direction:column;position:relative;z-index:2;}
/* Текст крайней-левой карточки садится на общую линию поля (gutter), чтобы
   full-bleed-лента тизеров не создавала «третью» вертикаль слева. Какая
   карточка крайняя слева — зависит от числа колонок, поэтому по брейкпоинтам. */
.teasers .teaser-card:first-child .teaser-copy{padding-left:var(--gutter);}
@media (max-width:900px){
  .teasers .teaser-card:nth-child(odd) .teaser-copy{padding-left:var(--gutter);}
}
@media (max-width:640px){
  .teasers .teaser-copy{padding-left:var(--gutter);}
}
.teaser-copy .num-display{font-size:2.4rem;}
.teaser-copy h4{font-size:1.25rem;margin-top:10px;}
.teaser-copy p{font-family:var(--font-sans);font-size:.92rem;line-height:1.4;margin-top:10px;flex:1;color:inherit;}

.btn-outline{
  align-self:flex-start;margin-top:18px;white-space:nowrap;
  font-family:var(--font-display);font-weight:700;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;
  border:1px solid var(--blue);color:var(--navy);padding:.8em 1.15em;
  transition:background var(--dur-s) var(--ease), color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.teaser-card:hover .btn-outline{background:var(--navy);color:var(--white);border-color:var(--navy);}

.teaser-img{
  width:48%;background-size:cover;background-position:center;
  filter:grayscale(1) contrast(1.05);
  transition:filter .4s var(--ease), transform .4s var(--ease);
}
.teaser-card:hover .teaser-img{filter:grayscale(0) contrast(1.05);transform:scale(1.035);}
/* Карточка 02 (книга): та же анимация, что у 01/03 (cover + лёгкий зум при
   наведении), но цвет НЕ проявляется — книга остаётся ч/б. */
.teaser-card:nth-child(2):hover .teaser-img{filter:grayscale(1) contrast(1.05);}

.teaser-card--dark{background:var(--navy);color:var(--white);}
.teaser-card--dark h4,.teaser-card--dark .num-display{color:var(--white);}
.teaser-card--dark .btn-outline{border-color:rgba(255,255,255,.55);color:var(--white);}
.teaser-card--dark:hover .btn-outline{background:var(--white);color:var(--navy);border-color:var(--white);}
.teaser-card--ice{background:var(--ice);}
/* Непрозрачный фон у подписи (как серый у 02): при ховер-зуме увеличивающееся
   фото уходит ПОД левую часть карточки, а не просвечивает из-под текста. */
.teaser-card--dark .teaser-copy{background:var(--navy);}
.teaser-card--ice .teaser-copy{background:var(--ice);width:53%;}  /* +1%: левый край фото 03 встаёт вровень с блоком «Юбилейный проект» */

@media (max-width:900px){
  .teasers{grid-template-columns:1fr 1fr;}
  .teaser-card{border-right:1px solid var(--grey);}
  .teaser-card:nth-child(2n){border-right:none;}
}
@media (max-width:640px){
  .teasers{grid-template-columns:1fr;}
  .teaser-card{border-right:none !important;min-height:auto;flex-direction:column;}
  .teaser-copy,.teaser-card--wide .teaser-copy{width:100%;}
  .teaser-img,.teaser-card--wide .teaser-img{width:100%;min-height:200px;order:-1;}
  .teaser-card--wide .teaser-copy p{max-width:none;}
}

/* ---------- Photo placeholder ---------- */
.photo{
  position:relative;overflow:hidden;
  background:linear-gradient(155deg,#40464c,#1b1e21 55%,#0d1013);
  min-height:220px;
  filter:grayscale(1) contrast(1.05);
  transition:filter var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
}
.photo:hover{filter:grayscale(.35) contrast(1.05) saturate(1.1) hue-rotate(-6deg);}
.photo .photo-caption{
  position:absolute;left:14px;bottom:12px;z-index:2;
  font-family:var(--font-display);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.photo .photo-frame{
  position:absolute;inset:10px;border:1px solid rgba(255,255,255,.14);pointer-events:none;
}
.photo--ratio-portrait{aspect-ratio:3/4;}
.photo--ratio-square{aspect-ratio:1/1;}
.photo--ratio-wide{aspect-ratio:16/10;}

/* ---------- Архивный документ (телеграмма, письмо, страница дневника) ----------
   Лист лежит в «паспарту» с лёгким наклоном — как настоящий документ,
   вложенный в книгу, а не картинка в рамке. Наклон снимается на hover
   и при prefers-reduced-motion. Подпись состоит из расшифровки (serif,
   как реплика) и служебной строки-легенды. */
.doc-split{
  display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:clamp(32px,5vw,72px);align-items:center;
}
.doc-figure{position:relative;}
/* Сам бланк вырезан по контуру (WebP с альфой), поэтому никакой подложки,
   рамки и box-shadow: прямоугольная тень выдала бы несуществующий белый лист.
   Тень даёт drop-shadow — она идёт по реальному контуру бумаги, включая
   оборванный угол.
   translateZ(0) + will-change держат элемент на собственном композитном слое.
   Без этого связка rotate + filter растеризуется поблочно, и в СТАТИКЕ по
   краям видны прямоугольные швы тайлов со светлой каймой; стоит навести
   курсор — слой уходит на GPU и артефакт пропадает. Здесь слой композитный
   всегда, поэтому картинка одинакова в покое и в движении.
   backface-visibility страхует тот же случай в WebKit. */
.doc-sheet{
  transform:rotate(-1.2deg) translateZ(0);
  filter:drop-shadow(0 14px 26px rgba(17,20,23,.26));
  will-change:transform, filter;
  backface-visibility:hidden;
  transition:transform var(--dur-m) var(--ease), filter var(--dur-m) var(--ease);
}
.doc-sheet img{width:100%;height:auto;display:block;}
/* Обложка книги: лёгкий подъём к курсору, как «оживают» остальные фото */
.book-cover-fig img{transition:transform var(--dur-m) var(--ease);will-change:transform;}
.book-cover-fig:hover img{transform:translateY(-9px) scale(1.015);}
@media (prefers-reduced-motion:reduce){.book-cover-fig:hover img{transform:none;}}
.doc-figure:hover .doc-sheet{
  transform:rotate(0deg) translateZ(0);
  filter:drop-shadow(0 18px 34px rgba(17,20,23,.32));
}
.doc-figure figcaption{margin-top:22px;display:flex;flex-direction:column;gap:10px;}
.doc-quote{
  font-style:italic;font-size:1.02rem;line-height:1.45;color:var(--navy);
  border-left:2px solid var(--ice);padding-left:16px;
}
.doc-meta{
  font-family:var(--font-display);font-size:.7rem;letter-spacing:.07em;
  text-transform:uppercase;color:#6a7076;line-height:1.5;
}
.doc-num{color:var(--blue);font-weight:800;margin-right:.5em;}
@media (max-width:900px){
  .doc-split{grid-template-columns:1fr;}
  .doc-figure{order:-1;}
}
@media (prefers-reduced-motion:reduce){
  .doc-sheet{transform:none;}
}

/* ---------- Project intro / pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--grey);border:1px solid var(--grey);margin-top:40px;}
.pillar{background:var(--white);padding:32px;display:flex;flex-direction:column;}
.pillar .num-display{font-size:2rem;color:var(--ice);-webkit-text-stroke:1px var(--navy);margin-bottom:14px;}
.pillar h4{font-size:1.15rem;margin-bottom:12px;}
.pillar p{font-family:var(--font-sans);font-size:.95rem;color:#3a3f44;flex:1;}
.pillar .btn-arrow{margin-top:18px;}
@media (max-width:900px){.pillars{grid-template-columns:1fr;}}

.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--grey);border-top:1px solid var(--grey);border-bottom:1px solid var(--grey);}
.stat{background:var(--bg);padding:30px 24px;}
.stat .num-display{font-size:clamp(2rem,4vw,3.2rem);color:var(--navy);}
.stat .stat-label{font-family:var(--font-display);font-size:.78rem;letter-spacing:.03em;color:#4c545a;margin-top:8px;max-width:22ch;}
.stat .stat-source{font-family:var(--font-display);font-size:.62rem;letter-spacing:.04em;color:#9aa1a6;margin-top:6px;text-transform:uppercase;}
@media (max-width:900px){.stat-band{grid-template-columns:1fr 1fr;}}
@media (max-width:500px){.stat-band{grid-template-columns:1fr;}}

/* ---------- Goals list ---------- */
.goals{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:20px;}
.goal{border-top:2px solid var(--navy);padding-top:18px;}
.goal .num-display{font-size:1.1rem;color:var(--blue);}
.goal p{font-family:var(--font-sans);font-size:.98rem;margin-top:10px;color:#2b2f33;}
@media (max-width:900px){.goals{grid-template-columns:1fr;}}

/* ---------- Person / hero cards ---------- */
.person-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--grey);border:1px solid var(--grey);}
.person-card{
  background:var(--white);
  display:grid;grid-template-columns:auto 1fr;
  min-height:300px;
  position:relative;overflow:hidden;
}
.person-card .person-num{
  font-size:2.6rem;color:var(--ice);-webkit-text-stroke:1px var(--navy);
  padding:22px 0 0 22px;align-self:flex-start;
}
.person-card .person-photo{min-height:100%;filter:none;}
.person-card:hover .person-photo{filter:none;}
.person-card .person-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;filter:saturate(.68) contrast(1.03);}
.person-card .person-info{
  position:absolute;left:0;right:0;bottom:0;padding:18px 22px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72) 55%);
  color:var(--white);
}
.person-card .person-info h4{color:var(--white);font-size:1.05rem;}
.person-card--ssmsh .person-info h4{line-height:1.15;}
.person-card .person-info .role{font-family:var(--font-serif);font-style:italic;font-size:.85rem;color:var(--ice);margin-top:4px;}
.person-card .person-quote{
  position:absolute;inset:0;padding:22px;
  background:rgba(18,59,112,.94);color:var(--white);
  display:flex;align-items:center;
  font-family:var(--font-serif);font-style:italic;font-size:.95rem;line-height:1.5;
  opacity:0;transform:translateY(10px);
  transition:opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
  pointer-events:none;
}
.person-card:hover .person-quote{opacity:1;transform:translateY(0);}
@media (max-width:900px){.person-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.person-grid{grid-template-columns:1fr;}}

/* ---------- Crew cards (film page) ---------- */
.crew-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--grey);border:1px solid var(--grey);margin-top:20px;}
.crew-card{background:var(--white);padding:26px 28px;display:flex;gap:18px;}
.crew-card .crew-num{font-size:1.6rem;color:var(--grey);flex-shrink:0;}
.crew-card h4{font-size:1.05rem;}
.crew-card .role{font-family:var(--font-serif);font-style:italic;font-size:.88rem;color:var(--blue);margin-top:2px;}
.crew-card p{font-family:var(--font-sans);font-size:.9rem;color:#3a3f44;margin-top:8px;}
.crew-card a.ext-link{font-family:var(--font-display);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--navy);border-bottom:1px solid var(--grey);display:inline-block;margin-top:10px;}
.crew-card a.ext-link:hover{color:var(--blue);border-color:var(--blue);}
@media (max-width:700px){.crew-grid{grid-template-columns:1fr;}}

/* ---------- Режиссёрская экспликация (film) ---------- */
.expo-part{padding:clamp(30px,4vw,52px) 0;border-top:1px solid var(--grey);}
.expo-part:first-of-type{border-top:none;padding-top:clamp(8px,2vw,20px);}
.expo-title{font-size:clamp(1.3rem,2.4vw,1.85rem);}
.expo-mono{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.9rem,4.5vw,3.4rem);letter-spacing:.14em;line-height:1;
  color:var(--ice);-webkit-text-stroke:1px var(--navy);margin-top:10px;
}
.expo-part .body-text{margin-top:18px;max-width:74ch;}
.expo-part .scene-list{margin-top:22px;}
/* Цветовые типы под «Операторское решение»: 4 тонкие линии, суммарно по высоте = буквам DSCH,
   по длине — до конца заголовка (обёртка ужимается по ширине текста h3). */
.expo-cline-head{display:inline-block;max-width:100%;}
.expo-clines{--H:clamp(1.9rem,4.5vw,3.4rem);--g:calc(var(--H)*0.13);--lh:calc((var(--H) - 3*var(--g))/4*1.3);display:flex;flex-direction:column;align-items:flex-start;gap:var(--g);margin-top:10px;}
.expo-cline{display:flex;width:84%;height:var(--lh);min-height:5px;border-radius:3px;overflow:hidden;position:relative;box-shadow:0 1px 0 rgba(18,59,112,.1);}
.expo-cline span{flex:1 1 0;transition:flex .3s var(--ease);}
.expo-cline span:hover{flex:1.9 1 0;}
.expo-cline::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:soft-light;opacity:.45;pointer-events:none;}
/* ---------- Операторская экспликация · Color Script ----------
   --grain — монохромный SVG-шум (fractalNoise), soft-light для плёночности. */
.colorscript,.cdrama,.csummary{
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.colorscript{margin-top:30px;}
.palette-title{
  display:block;font-family:var(--font-display);font-weight:700;font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:18px;
}
/* подсказка над списком линий */
.cscript-hint{font-family:var(--font-sans);font-size:.86rem;color:#6a7076;margin-bottom:6px;}
/* --- цветовая линия: развёртка (details/summary) --- */
.cline{border-top:1px solid var(--grey);}
.cline:first-of-type{border-top:none;}
.cline > summary.cline-head{
  list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:14px;
  padding:clamp(18px,2.5vw,26px) 0;
}
.cline > summary.cline-head::-webkit-details-marker{display:none;}
.cline-headtop{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.cline-num{font-size:1.15rem;color:var(--ice);-webkit-text-stroke:1px var(--navy);}
.cline-name{font-size:clamp(1.1rem,1.9vw,1.45rem);font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;flex:1;min-width:0;}
.cline-share{font-family:var(--font-display);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:#6a7076;}
.cline-chevron{width:10px;height:10px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg);transition:transform .25s var(--ease);flex-shrink:0;}
.cline[open] .cline-chevron{transform:rotate(-135deg);}
.cline-body{padding-bottom:clamp(24px,3vw,40px);}
.cline[open] .cline-body{animation:clineIn .26s var(--ease);}
@keyframes clineIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
/* полоса вдвое ниже — компактный обзор; при наведении на линию подрастает
   только сама полоса (превью цветов), спецификация раскрывается по клику. */
.cline-band{display:flex;height:clamp(46px,6vw,64px);border-radius:6px;overflow:hidden;transition:height .26s var(--ease);}
.cline:hover .cline-band,
.cline[open] .cline-band{height:clamp(88px,11vw,120px);}
.cband-seg{flex:1 1 0;min-width:0;position:relative;overflow:hidden;transition:flex-grow .28s var(--ease);}
.cband-seg:hover{flex-grow:2.2;}
.cband-seg::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:var(--grain);background-size:130px 130px;mix-blend-mode:soft-light;opacity:.6;}
.cband-info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:9px 10px;background:linear-gradient(0deg,rgba(17,20,23,.88),rgba(17,20,23,0));color:#fff;opacity:0;transition:opacity .2s var(--ease);pointer-events:none;display:flex;flex-direction:column;gap:2px;}
.cband-seg:hover .cband-info{opacity:1;}
.cband-name{font-size:.72rem;font-weight:600;line-height:1.2;}
.cband-hsl,.cband-hex{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.6rem;color:rgba(255,255,255,.8);}
.cline-lead{font-family:var(--font-sans);font-size:1rem;line-height:1.6;color:#2b2f33;max-width:78ch;margin-top:0;}
.cline-spec{margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;}
.cspec-row{display:grid;grid-template-columns:118px 1fr;gap:12px;padding:7px 0;border-bottom:1px solid var(--grey);align-items:baseline;}
.cspec-row dt{font-family:var(--font-display);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);}
.cspec-row dd{font-family:var(--font-sans);font-size:.88rem;line-height:1.5;color:#2b2f33;}
/* --- драматургия --- */
.cdrama{margin-top:clamp(44px,5vw,72px);}
.comp-tabs .cdrama,.comp-tabs .csummary{margin-top:0;}
.cdrama-part{display:grid;grid-template-columns:minmax(150px,210px) 1fr;gap:26px;padding:22px 0;border-top:1px solid var(--grey);}
.cdrama-mark{display:flex;flex-direction:column;gap:5px;}
.cdrama-rom{font-family:var(--font-display);font-weight:800;font-size:1.9rem;line-height:1;color:var(--ice);-webkit-text-stroke:1px var(--navy);}
.cdrama-title{font-family:var(--font-serif);font-style:italic;font-size:1.05rem;color:var(--navy);}
.cdrama-spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 34px;}
.cdrama-spec > div{display:grid;grid-template-columns:108px 1fr;gap:10px;align-items:baseline;}
.cdrama-spec dt{font-family:var(--font-display);font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;color:#6a7076;}
.cdrama-spec dd{font-size:.86rem;color:#2b2f33;line-height:1.4;}
/* --- сводка --- */
.csummary{margin-top:clamp(44px,5vw,72px);}
.cstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;margin-bottom:30px;}
.cstat{display:grid;grid-template-columns:190px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--grey);align-items:baseline;}
.cstat dt{font-family:var(--font-display);font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;color:var(--blue);}
.cstat dd{font-size:.88rem;color:#2b2f33;line-height:1.5;}
.cprops{margin-bottom:30px;}
.cprops-label{display:block;font-family:var(--font-display);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:#6a7076;margin-bottom:12px;}
.cprop{display:grid;grid-template-columns:190px 1fr 46px;gap:14px;align-items:center;padding:5px 0;}
.cprop-name{font-size:.86rem;color:#2b2f33;}
.cprop-track{height:8px;background:var(--grey);border-radius:4px;overflow:hidden;}
.cprop-fill{display:block;height:100%;background:var(--blue);}
.cprop-val{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.74rem;color:#6a7076;text-align:right;}
.crecs{display:grid;gap:0;}
.crec{display:grid;grid-template-columns:200px 1fr;gap:18px;padding:13px 0;border-bottom:1px solid var(--grey);align-items:baseline;}
.crec dt{font-family:var(--font-display);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--navy);}
.crec dd{font-size:.9rem;line-height:1.55;color:#2b2f33;}
.cnote{margin-top:30px;font-family:var(--font-serif);font-style:italic;font-size:1.05rem;line-height:1.55;color:var(--navy);border-left:2px solid var(--ice);padding-left:20px;max-width:80ch;}
@media (max-width:760px){
  .cline-spec,.cstats{grid-template-columns:1fr;}
  .cdrama-part{grid-template-columns:1fr;gap:14px;}
  .cdrama-spec{grid-template-columns:1fr;}
  .cstat,.crec{grid-template-columns:1fr;gap:4px;}
  .cprop{grid-template-columns:130px 1fr 40px;gap:10px;}
}
/* DSCH-плеер: кнопка + 4 кликабельные ноты, подсветка при звучании (Web Audio) */
.dsch-player{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;}
.dsch-play{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-weight:700;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--blue);color:var(--navy);padding:.72em 1.15em;border-radius:40px;
  transition:background var(--dur-s) var(--ease),color var(--dur-s) var(--ease),border-color var(--dur-s) var(--ease);
}
.dsch-play:hover{background:var(--navy);color:var(--white);border-color:var(--navy);}
.dsch-play-icon{font-size:.95em;display:inline-flex;align-items:center;position:relative;top:.02em;}
.dsch-play.is-playing{background:var(--blue);color:var(--white);border-color:var(--blue);}
.dsch-notes{display:flex;gap:8px;}
.dsch-note{
  font-family:var(--font-serif);font-style:italic;font-size:1rem;
  min-width:2.9em;padding:.5em .6em;border:1px solid var(--grey);border-radius:6px;
  color:var(--navy);background:var(--white);
  transition:background .12s var(--ease),color .12s var(--ease),border-color .12s var(--ease),transform .12s var(--ease);
}
.dsch-note:hover{border-color:var(--blue);}
.dsch-note.is-playing{background:var(--blue);color:var(--white);border-color:var(--blue);transform:translateY(-3px);}

/* ---------- Provocation / scene list (film) ---------- */
.scene-list{margin-top:10px;border-top:1px solid var(--grey);}
.scene-item{display:grid;grid-template-columns:70px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--grey);}
.scene-item .num-display{font-size:1.1rem;color:var(--blue);}
.scene-item p{font-family:var(--font-sans);font-size:.98rem;color:#2b2f33;}

/* ---------- City cards (lectures) ---------- */
.city-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--grey);border:1px solid var(--grey);margin-top:20px;}
/* Города с партнёрами: карточка-прямоугольник + отчерк и список ПОД ней (наружу) */
.city-grid--4{grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto;column-gap:clamp(16px,1.8vw,26px);row-gap:0;background:none;border:none;}
.city-col{display:grid;grid-template-rows:subgrid;grid-row:span 2;}
.city-grid--4 .city-card{border:1px solid var(--grey);}
@media (max-width:1100px){.city-grid--4{grid-template-columns:repeat(2,1fr);}}
.city-card{background:var(--white);padding:30px 26px;}
.city-card .num-display{font-size:2rem;color:var(--ice);-webkit-text-stroke:1px var(--navy);}
.city-card h3{font-size:1.5rem;margin-top:10px;}
.city-card .city-role{font-family:var(--font-serif);font-style:italic;font-size:.88rem;color:var(--blue);margin-top:6px;}
.city-card p{font-family:var(--font-sans);font-size:.92rem;color:#3a3f44;margin-top:14px;}
.city-card .event-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
/* Партнёры-заведения города: после толстого отчерка (как в блоке целей), мелкими ссылками */
.city-partners{margin-top:20px;padding-top:18px;border-top:2px solid var(--navy);display:flex;flex-direction:column;gap:9px;}
.city-partners a{font-family:var(--font-sans);font-size:.85rem;line-height:1.35;color:#3a3f44;transition:color var(--dur-s) var(--ease);}
.city-partners a:hover{color:var(--blue);}
.city-partners a.pending{color:#9aa1a6;}
.city-partners a.pending:hover{color:#6a7076;}
.event-tag{font-family:var(--font-display);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--navy);border:1px solid var(--grey);padding:6px 10px;border-radius:20px;}
@media (max-width:900px){.city-grid{grid-template-columns:1fr;}}

/* ---------- Абонемент: вкладки на 6 лекций ----------
   Одна лекция на экране: слева архивный объект в .doc-sheet (вырезан по
   контуру, drop-shadow по контуру, лёгкий наклон — как телеграмма в «Книге»),
   справа текст. Наведение на весь раздел выпрямляет лист — одинаково для
   всех вкладок. Размер картинки нормализован: max-height держит все объекты
   в одном визуальном «стандарте» независимо от их пропорций. */
/* Двухцветная шапка раздела во всю ширину страницы (образец — 3.1). Слева
   текст на синем (белым), справа «метка над заголовком» на голубом
   (0.1 / Ключевые даты · Партитура проекта). Цвет доходит до краёв экрана,
   а контент выровнен по контентной колонке через --edge. Блоки встык,
   равной высоты, содержимое центрировано по вертикали. */
.abonement-head{
  --edge:max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,36%);
  gap:0;align-items:stretch;
  margin-bottom:clamp(40px,6vw,72px);
}
.abonement-intro{
  max-width:none;margin:0;
  padding:clamp(20px,2.6vw,36px) clamp(28px,4vw,48px) clamp(20px,2.6vw,36px) var(--edge);
  display:flex;flex-direction:column;justify-content:center;
}
.abonement-headtext{
  padding:clamp(20px,2.6vw,36px) var(--edge) clamp(20px,2.6vw,36px) clamp(28px,4vw,48px);
  display:flex;flex-direction:column;justify-content:center;
}
.abonement-headtext .abonement-tag{margin-bottom:14px;color:var(--navy);}
.abonement-headtext .abonement-tag::before{background:var(--navy);}
/* Зеркальный вариант (секция 3.3): метка+заголовок слева, текст справа —
   колонки и «краевые» отступы меняются местами относительно 3.1. */
.abonement-head--mirror{grid-template-columns:minmax(260px,36%) minmax(0,1fr);}
.abonement-head--mirror .abonement-headtext{padding-left:var(--edge);padding-right:clamp(28px,4vw,48px);}
.abonement-head--mirror .abonement-intro{padding-left:clamp(28px,4vw,48px);padding-right:var(--edge);}
@media (max-width:760px){
  .abonement-head{grid-template-columns:1fr;}
  .abonement-headtext{order:-1;}
}
/* Секция без верхнего отступа — цветная шапка встаёт впритык к линии
   под заголовком страницы. */
.section--flush-top{padding-top:0;}

.tabs-nav{
  display:flex;flex-wrap:wrap;gap:2px 4px;
  border-bottom:1px solid var(--grey);
  margin-bottom:clamp(32px,4vw,56px);
}
.tab-btn{
  display:inline-flex;align-items:baseline;gap:9px;
  padding:13px 18px;position:relative;
  font-family:var(--font-sans);color:#6a7076;
  transition:color var(--dur-s) var(--ease);
}
.tab-btn .tab-num{
  font-family:var(--font-display);font-weight:800;font-size:1rem;
  color:var(--ice);-webkit-text-stroke:.75px var(--navy);
  transition:color var(--dur-s) var(--ease),-webkit-text-stroke var(--dur-s) var(--ease);
}
.tab-btn .tab-title{font-size:.95rem;font-weight:600;white-space:nowrap;}
.tab-btn::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-s) var(--ease);
}
.tab-btn:hover{color:var(--navy);}
.tab-btn.is-active{color:var(--navy);}
.tab-btn.is-active::after{transform:scaleX(1);}
.tab-btn.is-active .tab-num{color:var(--blue);-webkit-text-stroke:0;}
/* «Пауза» на вкладках Перерыв/Реклама — два символа «|» того же .tab-num
   (Golos Text 800, ice + navy-контур): толщина штриха, обводка и интервал
   берутся из самого шрифта, поэтому единообразны с цифрами. Но глиф «|» выше
   цифр и свисает под базовую линию, поэтому подрезаем его по высоте капители
   и сажаем на базовую линию — верх и низ совпадают с цифрами. */
.tab-btn .tab-num--pause{
  display:inline-block;
  overflow:hidden;
  height:.7em;              /* высота цифр (капитель) */
  line-height:.7em;
  padding:0 .1em;           /* воздух под контур крайних штрихов, чтобы не срезался */
  vertical-align:baseline;  /* при overflow≠visible базовая линия = низ бокса */
}

.lecture-panel{display:none;}
.lecture-panel.is-active{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,5vw,64px);align-items:center;
  animation:panelIn .45s var(--ease);
}
@keyframes panelIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.lecture-body{max-width:54ch;}
.lecture-num{
  display:block;font-size:2.4rem;color:var(--ice);
  -webkit-text-stroke:1px var(--navy);line-height:1;
}
.lecture-body h3{font-size:clamp(1.3rem,2.4vw,1.75rem);margin-top:10px;line-height:1.1;}
.lecture-body p{font-family:var(--font-sans);font-size:1rem;line-height:1.62;color:#2b2f33;margin-top:16px;}
.lecture-fig{position:relative;display:flex;justify-content:center;align-items:center;}
/* нормализуем визуальный размер: и портрет-письмо, и ландшафт-ежедневник
   вписаны в один и тот же бокс — не крупнее «стандарта» */
.lecture-fig .doc-sheet img{max-width:100%;max-height:380px;width:auto;height:auto;}
/* один наклон для всех; hover на всю панель выпрямляет — единообразно */
.lecture-fig .doc-sheet{transform:rotate(-1.2deg) translateZ(0);}
.lecture-panel:hover .doc-sheet{transform:rotate(0deg) translateZ(0);}
/* лекция 5 — Diary крупно + таблица внахлёст, обе реагируют на hover панели */
.lecture-fig--stack{padding:0 12% 8% 0;}
.lecture-fig--stack .doc-sheet--table{
  position:absolute;right:2%;bottom:-2%;width:46%;
  transform:rotate(3.5deg) translateZ(0);
}
.lecture-fig--stack .doc-sheet--table img{max-height:220px;}
.lecture-panel:hover .doc-sheet--table{transform:rotate(0deg) translateZ(0);}
@media (max-width:760px){
  .lecture-panel.is-active{grid-template-columns:1fr;gap:22px;}
  .lecture-fig{order:-1;}
  .tab-btn{padding:11px 12px;}
}

/* Вкладки «Композиция» (раздел Фильм) — без картинки, только текст:
   переопределяем сетку панели на простой блок. */
.comp-tabs{margin-top:clamp(28px,4vw,44px);}
.comp-tabs .lecture-panel.is-active{display:block;}
.comp-tabs .lecture-body{max-width:70ch;}
/* Длинные панели «Композиции»: свёрнуты до предела, дальше — по кнопке. */
.comp-tabs .lecture-body{position:relative;}
.comp-tabs .lecture-body.is-clamped{max-height:240px;overflow:hidden;}
.comp-tabs .lecture-body.is-clamped::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5em;
  background:linear-gradient(to bottom, rgba(245,247,246,0), var(--bg));
  pointer-events:none;
}
.lecture-more{
  display:inline-flex;align-items:center;gap:.45em;
  margin-top:18px;padding:0;border:0;background:none;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:.8rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--blue);
  transition:color var(--dur-s) var(--ease);
}
.lecture-more::after{content:"↓";font-size:1em;line-height:1;transition:transform var(--dur-s) var(--ease);}
.lecture-more.is-open::after{transform:rotate(180deg);}
.lecture-more:hover{color:var(--navy);}

/* ---------- Comparison table (archive) ---------- */
.compare-table{width:100%;border-collapse:collapse;margin-top:24px;}
.compare-table thead th{
  font-family:var(--font-display);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  text-align:left;padding:14px 20px;color:var(--white);background:var(--navy);
}
.compare-table thead th:first-child{border-right:1px solid rgba(255,255,255,.2);}
.compare-table tbody td{
  font-family:var(--font-sans);font-size:1rem;padding:18px 20px;border-bottom:1px solid var(--grey);
}
.compare-table tbody td:first-child{border-right:1px solid var(--grey);color:var(--navy);font-weight:600;}
.compare-table tbody tr:hover td{background:var(--bg);}
@media (max-width:640px){
  .compare-table thead{display:none;}
  .compare-table tbody tr{display:block;margin-bottom:14px;border:1px solid var(--grey);}
  .compare-table tbody td{display:block;border:none !important;padding:12px 16px;}
  .compare-table tbody td:first-child{background:var(--bg);}
  .compare-table tbody td::before{
    content:attr(data-label);
    display:block;
    font-family:var(--font-display);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
    color:var(--blue);margin-bottom:4px;
  }
}

/* ---------- Material category cards (archive) ---------- */
.material-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--grey);border:1px solid var(--grey);}
.material-card{background:var(--white);padding:26px 20px;text-align:left;}
.material-card .num-display{font-size:1.6rem;color:var(--blue);}
.material-card h4{font-size:.95rem;margin-top:10px;line-height:1.3;}
@media (max-width:900px){.material-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:500px){.material-grid{grid-template-columns:1fr;}}

/* ---------- Partners ---------- */
.partner-group{margin-bottom:44px;}
.partner-group h3{font-size:1.1rem;color:var(--navy);margin-bottom:18px;padding-bottom:10px;border-bottom:2px solid var(--navy);}
.partner-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--grey);border:1px solid var(--grey);}
.partner-item{
  background:var(--white);padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;
  transition:background var(--dur-s) var(--ease);
}
.partner-item:hover{background:var(--bg);}
/* Плитки в серых секциях («Прокат», «Где найти книгу») — светло-серые, не белые. */
#watch .partner-item,
#stores .partner-item{background:#f0f2f4;}
#watch .partner-item:hover,
#stores .partner-item:hover{background:var(--white);}
/* Карточки городов в серой секции «География» — светло-серые, не белые. */
#cities .city-card{background:#f0f2f4;}
.partner-item .p-arrow{color:var(--grey);transition:transform var(--dur-s) var(--ease), color var(--dur-s) var(--ease);}
.partner-item:hover .p-arrow{color:var(--blue);transform:translateX(4px);}
/* «Пока серым»: партнёрство на согласовании */
.partner-item--pending{color:#9aa1a6;}
.partner-item--pending .p-arrow{color:#cbd0d4;}
.partner-item--pending:hover{color:#6a7076;}
.partner-item--pending:hover .p-arrow{color:#6a7076;}
@media (max-width:700px){.partner-list{grid-template-columns:1fr;}}

/* ---------- Quote block ---------- */
.pull-quote{
  max-width:820px;font-family:var(--font-serif);font-style:italic;
  font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.4;color:var(--ink);
  border-left:2px solid var(--gold);padding-left:clamp(20px,3vw,36px);
}
.pull-quote cite{display:block;margin-top:16px;font-style:normal;font-family:var(--font-display);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);}

/* ---------- Circle nav transition overlay ---------- */
.wipe{
  position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:var(--navy);
  clip-path:circle(0% at var(--wx,50%) var(--wy,50%));
  transition:clip-path .55s var(--ease);
}
.wipe.is-active{clip-path:circle(150% at var(--wx,50%) var(--wy,50%));}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);color:var(--white);}
.footer-top{
  display:grid;grid-template-columns:1.1fr 1fr auto;gap:40px;
  padding-top:56px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.15);
  align-items:center;
}
.newsletter label{font-family:var(--font-display);font-weight:700;font-size:.95rem;letter-spacing:.02em;display:flex;align-items:center;gap:12px;}
.newsletter .ticket-icon{width:22px;height:22px;color:var(--ice);flex-shrink:0;}
.newsletter-field{display:flex;margin-top:16px;border-bottom:1px solid rgba(255,255,255,.4);max-width:360px;}
.newsletter-field input{background:none;border:none;color:var(--white);padding:10px 0;flex:1;font-size:.95rem;}
.newsletter-field input::placeholder{color:rgba(255,255,255,.45);}
.newsletter-field button{color:var(--ice);font-size:1.1rem;padding:10px;transition:transform var(--dur-s) var(--ease);}
.newsletter-field button:hover{transform:translateX(4px);}
.newsletter-note{margin-top:10px;font-family:var(--font-display);font-size:.75rem;letter-spacing:.03em;color:var(--ice);min-height:1em;}
/* Ссылка на Telegram-канал (заменила форму подписки) */
.newsletter-title{font-family:var(--font-display);font-weight:700;font-size:.95rem;letter-spacing:.02em;display:flex;align-items:center;gap:12px;}
.newsletter-title .ticket-icon{width:22px;height:22px;color:var(--ice);flex-shrink:0;}
.tg-link{display:inline-flex;align-items:center;gap:9px;margin-top:16px;padding:11px 20px;border:1px solid rgba(255,255,255,.4);border-radius:4px;color:var(--white);font-family:var(--font-display);font-weight:700;font-size:.9rem;letter-spacing:.02em;transition:border-color var(--dur-s) var(--ease),color var(--dur-s) var(--ease),gap var(--dur-s) var(--ease);}
.tg-link:hover{border-color:var(--ice);color:var(--ice);gap:13px;}
.tg-link .tg-icon{width:18px;height:18px;flex-shrink:0;}
.footer-quote{font-family:var(--font-serif);font-style:italic;font-size:1.05rem;line-height:1.5;color:rgba(255,255,255,.85);}
.footer-quote cite{display:block;margin-top:10px;font-style:normal;font-family:var(--font-display);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ice);}
.footer-social{text-align:right;}
.footer-social>span{font-family:var(--font-display);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.social-icons{display:flex;gap:14px;margin-top:14px;justify-content:flex-end;}
.social-icons a{width:36px;height:36px;border:1px solid rgba(255,255,255,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:border-color var(--dur-s) var(--ease), background var(--dur-s) var(--ease);}
.social-icons a:hover{border-color:var(--ice);background:rgba(255,255,255,.06);}
.social-icons svg{width:16px;height:16px;color:var(--white);}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  padding-top:22px;padding-bottom:22px;
  font-family:var(--font-display);font-size:.72rem;letter-spacing:.03em;color:rgba(255,255,255,.5);
}
@media (max-width:900px){
  .footer-top{grid-template-columns:1fr;text-align:left;}
  .footer-social{text-align:left;}
  .social-icons{justify-content:flex-start;}
}

/* ---------- Аудитория (07) ---------- */
.aud-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--grey);border:1px solid var(--grey);margin-top:clamp(24px,3.5vw,36px);}
.aud-stat{background:var(--white);padding:24px 22px;display:flex;flex-direction:column;gap:8px;}
.aud-stat .num-display{font-size:clamp(1.8rem,3.4vw,2.7rem);color:var(--ice);-webkit-text-stroke:1px var(--navy);line-height:.95;}
.aud-label{font-family:var(--font-sans);font-size:.92rem;line-height:1.4;color:#2b2f33;}
.aud-src{font-family:var(--font-display);font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;color:#8a9096;margin-top:auto;}
.aud-note{font-family:var(--font-serif);font-style:italic;font-size:.98rem;line-height:1.5;color:var(--navy);border-left:2px solid var(--ice);padding-left:18px;margin-top:22px;max-width:76ch;}
.aud-group{margin-top:26px;}
.aud-group:first-child{margin-top:0;}
.aud-group-title{display:block;font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:12px;}
/* Сворачивающиеся группы «Аудитории» (details/summary).
   Между группами — ровно одна разделительная линия (border-top заголовка).
   Последняя строка подгруппы линию не рисует, чтобы не задваивать с линией следующей группы. */
.aud-acc{margin:0;border-top:1px solid var(--grey);}
.aud-acc:last-of-type{border-bottom:1px solid var(--grey);}
/* У верхней группы в раскрытом состоянии верхняя линия убирается (цвет прозрачный — высота не скачет) */
.aud-acc:first-of-type[open]{border-top-color:transparent;}
.aud-acc > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:16px 2px;margin:0;transition:color var(--dur-s) var(--ease);}
.aud-acc > summary::-webkit-details-marker{display:none;}
.aud-acc > summary:hover{color:var(--navy);}
.aud-acc > summary .aud-acc-toggle{margin-left:auto;flex-shrink:0;width:1em;text-align:center;font-family:var(--font-display);font-weight:400;font-size:1.2rem;line-height:1;color:var(--blue);}
.aud-acc:not([open]) > summary .aud-acc-toggle::after{content:"+";}
.aud-acc[open] > summary .aud-acc-toggle::after{content:"\2212";}
.aud-acc > .aud-row:last-child{border-bottom:none;margin-bottom:14px;}
.aud-row{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:20px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--grey);}
.aud-val{font-size:clamp(1.1rem,1.8vw,1.45rem);color:var(--ice);white-space:nowrap;}
.aud-desc{font-family:var(--font-sans);font-size:.92rem;line-height:1.5;color:#2b2f33;}
.aud-targets{display:grid;gap:0;}
.aud-target{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--grey);}
.aud-target-name{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--ink);}
.aud-target-msg{font-family:var(--font-serif);font-style:italic;font-size:1rem;line-height:1.45;color:var(--navy);}
.aud-points{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--grey);border:1px solid var(--grey);}
.aud-point{background:var(--white);padding:24px 22px;display:flex;gap:16px;}
.aud-point-num{font-size:1.8rem;color:var(--ice);-webkit-text-stroke:1px var(--navy);line-height:1;flex-shrink:0;}
.aud-point-body h4{font-size:1.02rem;margin-bottom:8px;}
.aud-point-body p{font-family:var(--font-sans);font-size:.9rem;line-height:1.55;color:#3a3f44;}
.aud-list{margin-top:12px;display:grid;gap:0;}
.aud-list li{list-style:none;font-family:var(--font-sans);font-size:.94rem;line-height:1.5;color:#2b2f33;padding:9px 0 9px 26px;border-bottom:1px solid var(--grey);position:relative;}
.aud-list li::before{content:"×";position:absolute;left:2px;top:9px;color:var(--blue);font-weight:700;}
.aud-doc{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-family:var(--font-display);font-weight:700;font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:var(--navy);border:1px solid var(--blue);padding:.85em 1.3em;border-radius:40px;transition:background var(--dur-s) var(--ease),color var(--dur-s) var(--ease);}
.aud-doc::before{content:"↓";font-size:1.05em;}
.aud-doc:hover{background:var(--navy);color:var(--white);border-color:var(--navy);}
/* Фиксированное числовое поле счётчика (выравнивание влево): число прижато к левому краю,
   итоговая цифра стоит над подписью, а лишний разряд убывает справа без сдвига блока. */
/* Число прижато к правому краю поля шириной 1 символ: единицы стоят у левого края поля
   (над подписью), суффикс вплотную, а старшие разряды переполняют поле ВЛЕВО за границу. */
.count-num{display:inline-flex;justify-content:flex-end;width:1ch;white-space:nowrap;}
/* Вводный «дек» под баннером: подтянут к баннеру, кегль крупнее корпусного */
.aud-lead-section{padding-top:clamp(30px,4vw,52px);}
.aud-intro{font-family:var(--font-sans);font-size:clamp(1.12rem,1.55vw,1.35rem);line-height:1.5;color:var(--ink);max-width:60ch;margin:0 0 clamp(34px,4.5vw,60px);}
/* Синяя полоса с набегающими цифрами: фон во всю ширину, текст — по полю вёрстки «07» */
.aud-band{background:var(--navy);padding:clamp(26px,3.5vw,40px) 0;}

/* ---------- Audience first screen (hero + stats fill one viewport) ---------- */
:root{--header-height:85px;}
.audience-first-screen{min-height:calc(100svh - var(--header-height));display:flex;flex-direction:column;}
.audience-first-screen__intro{flex:1 0 auto;}
.audience-first-screen__stats{flex-shrink:0;}
.aud-band .stat{padding:16px 24px;}
.aud-band .stat:first-child{padding-left:0;}
.aud-band .stat:last-child{padding-right:0;}
.aud-band .stat .num-display{font-size:clamp(2rem,4vw,3.2rem);}
/* KPI-полоса: три сценария, основной прогноз выделен синим */
.aud-kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--grey);border:1px solid var(--grey);margin:0 0 26px;}
.aud-kpi-card{background:var(--white);padding:26px 22px;display:flex;flex-direction:column;gap:8px;}
.aud-kpi-num{font-size:clamp(1.7rem,3.2vw,2.5rem);color:var(--ice);-webkit-text-stroke:1px var(--navy);line-height:.95;white-space:nowrap;}
.aud-kpi-name{font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);}
.aud-kpi-cond{font-family:var(--font-sans);font-size:.82rem;line-height:1.45;color:#6a7076;}
.aud-kpi-card--lead{background:var(--blue);}
.aud-kpi-card--lead .aud-kpi-num{color:var(--white);-webkit-text-stroke:0;}
.aud-kpi-card--lead .aud-kpi-name{color:var(--white);}
.aud-kpi-card--lead .aud-kpi-cond{color:rgba(255,255,255,.82);}
/* каналы у целевых групп */
.aud-target-chan{display:block;font-family:var(--font-display);font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;color:#8a9096;margin-top:5px;}
/* источники */
.aud-sources{margin:0;padding:0;counter-reset:src;}
.aud-sources li{list-style:none;counter-increment:src;position:relative;padding:12px 0 12px 44px;border-bottom:1px solid var(--grey);}
.aud-sources li::before{content:"["counter(src)"]";position:absolute;left:0;top:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem;color:var(--blue);}
.aud-sources a{font-family:var(--font-sans);font-size:.94rem;line-height:1.5;color:var(--ink);border-bottom:1px solid var(--grey);transition:color var(--dur-s) var(--ease),border-color var(--dur-s) var(--ease);}
.aud-sources a:hover{color:var(--blue);border-color:var(--blue);}
.aud-source-url{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.68rem;color:#8a9096;margin-top:4px;word-break:break-all;}
@media (max-width:760px){
  .aud-points{grid-template-columns:1fr;}
  .aud-target{grid-template-columns:1fr;gap:6px;}
  .aud-row{grid-template-columns:1fr;gap:2px;}
  .aud-kpi{grid-template-columns:1fr;}
}

/* ---------- Издатель книги (book.html) ---------- */
/* Логотип во всю высоту блока, центрирован в правом поле */
.pub-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,440px);gap:clamp(28px,5vw,56px);align-items:stretch;}
.pub-logo{margin:0;display:flex;align-items:center;justify-content:center;}
.pub-logo img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;display:block;transition:transform var(--dur-m) var(--ease);will-change:transform;}
.pub-logo:hover img{transform:scale(1.04);}
@media (prefers-reduced-motion:reduce){.pub-logo:hover img{transform:none;}}
.pub-intro{font-family:var(--font-sans);font-size:1.02rem;line-height:1.6;color:#2b2f33;max-width:72ch;margin:0 0 clamp(22px,3vw,32px);}
.pub-intro b{color:var(--navy);font-weight:700;}
/* карточки книг */
/* Горизонтальные карточки: книга слева, текст справа. align-items:start — карточки по контенту
   (без растягивания/пустот), фикс. высота обложки + зарезервированные строки → всё выровнено. */
.pubbooks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start;}
.pubbook{--cov:136px;--cgap:22px;position:relative;display:grid;grid-template-columns:var(--cov) minmax(0,1fr);column-gap:var(--cgap);background:var(--white);border:1px solid var(--grey);border-radius:14px;padding:clamp(18px,1.7vw,24px);}
.pb-cb{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.pubbook-cover{grid-column:1;grid-row:1;display:flex;align-items:flex-start;justify-content:center;}
.pubbook-cover img{width:var(--cov);height:172px;object-fit:contain;object-position:center top;display:block;filter:drop-shadow(0 12px 22px rgba(18,59,112,.2));}
.pubbook-info{grid-column:2;grid-row:1;display:flex;flex-direction:column;min-width:0;}
.pubbook-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;}
.pubbook-author{font-family:var(--font-display);font-weight:700;font-size:.9rem;color:var(--ink);}
.pubbook-year{font-family:var(--font-display);font-weight:700;font-size:.88rem;color:var(--gold);flex-shrink:0;}
.pubbook-title{font-family:var(--font-display);font-weight:700;text-transform:none;font-size:clamp(1.02rem,1vw,1.14rem);line-height:1.22;color:var(--navy);margin:5px 0 0;}
/* «подвал» правой колонки прижат к низу (у нижнего края книги): ISBN над полосой, «Описание» справа */
.pubbook-foot{margin-top:auto;}
.pubbook-isbn{display:block;text-align:right;font-family:var(--font-display);font-weight:500;font-size:.66rem;letter-spacing:.02em;color:#9aa1a6;}
.pubbook-desc-toggle{display:flex;justify-content:flex-end;align-items:center;gap:8px;cursor:pointer;user-select:none;margin-top:9px;padding-top:12px;border-top:1px solid var(--grey);font-family:var(--font-display);font-weight:700;font-size:.88rem;color:var(--navy);transition:color var(--dur-s) var(--ease);}
.pubbook-desc-toggle:hover{color:var(--blue);}
.pub-toggle{width:1em;text-align:center;color:var(--gold);font-weight:700;font-size:1.05em;line-height:1;}
.pb-cb:not(:checked) ~ .pubbook-info .pub-toggle::after{content:"+";}
.pb-cb:checked ~ .pubbook-info .pub-toggle::after{content:"\2212";}
.pb-cb:focus-visible ~ .pubbook-info .pubbook-desc-toggle{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px;}
/* тело описания — отдельный ряд на всю ширину, раскрывается ВНИЗ; «Описание» остаётся на месте */
.pubbook-body{grid-column:1/-1;grid-row:2;display:none;margin-top:14px;font-family:var(--font-sans);font-size:.94rem;line-height:1.6;color:#2b2f33;}
.pb-cb:checked ~ .pubbook-body{display:block;}
.pubbook-body>p{margin:0;}
.pubbook-quote{margin:14px 0 0;padding-left:16px;border-left:2px solid var(--ice);font-family:var(--font-serif);font-style:italic;color:var(--navy);font-size:.95rem;line-height:1.5;}
.pubbook-quote cite{display:block;margin-top:6px;font-style:normal;font-family:var(--font-display);font-weight:600;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:#8a9096;}
/* цитаты «Об издательстве говорят» — мягкие карточки в тон бренда */
.pub-says{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(16px,2vw,24px);align-items:stretch;}
.pub-say{margin:0;display:flex;flex-direction:column;min-height:clamp(320px,26vw,368px);background:rgba(169,217,238,.14);border-radius:16px;padding:clamp(30px,3.2vw,44px);}
.pub-say blockquote{margin:0 0 26px;font-family:var(--font-serif);font-size:1.05rem;line-height:1.62;color:var(--ink);}
.pub-say blockquote::before{content:"\00AB\2009";color:var(--blue);font-weight:600;}
.pub-say figcaption{margin-top:auto;padding-top:18px;border-top:1px solid rgba(18,59,112,.14);}
.pub-say-name{display:block;font-family:var(--font-display);font-weight:700;font-size:.9rem;color:var(--navy);}
.pub-say-role{display:block;margin-top:3px;min-height:2.8em;font-family:var(--font-sans);font-size:.78rem;line-height:1.4;color:#5a6066;}
/* серии — аккордеон */
.pub-series-body{padding:2px 0 16px;font-family:var(--font-sans);font-size:.95rem;line-height:1.6;color:#2b2f33;}
.pub-series-body p{margin:0 0 10px;}
.pub-series-cite{font-family:var(--font-display);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:#8a9096;}
@media (max-width:820px){.pub-head{grid-template-columns:1fr;}.pub-logo{order:-1;justify-content:center;}.pub-logo img{max-height:230px;}}
@media (max-width:1080px){.pubbooks{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:720px){.pubbooks{grid-template-columns:1fr;}}
@media (max-width:460px){.pubbook{grid-template-columns:1fr;}.pubbook-cover{grid-column:1;justify-content:flex-start;margin-bottom:16px;}.pubbook-info{grid-column:1;}.pubbook-body{grid-column:1;}}

/* ---------- Письма поддержки (partners.html) ---------- */
.letters{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;}
.letter-card{display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--white);border:1px solid var(--grey);border-radius:12px;transition:border-color var(--dur-s) var(--ease),transform var(--dur-s) var(--ease),box-shadow var(--dur-s) var(--ease);}
.letter-card:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 10px 24px rgba(18,59,112,.08);}
.letter-ico{flex-shrink:0;width:32px;height:38px;color:var(--blue);display:block;}
.letter-ico svg{width:100%;height:100%;}
.letter-body{display:flex;flex-direction:column;min-width:0;flex:1;}
.letter-name{font-family:var(--font-display);font-weight:700;font-size:.94rem;line-height:1.25;color:var(--ink);}
.letter-role{font-family:var(--font-sans);font-size:.78rem;line-height:1.35;color:#5a6066;margin-top:3px;}
.letter-meta{font-family:var(--font-display);font-weight:600;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:#9aa1a6;margin-top:5px;}
.letter-arrow{flex-shrink:0;color:var(--blue);font-size:1.15rem;transition:transform var(--dur-s) var(--ease);}
.letter-card:hover .letter-arrow{transform:translateX(4px);}

/* ---------- Utility ---------- */
.mt-0{margin-top:0 !important;}
.text-center{text-align:center;}
.hide-mobile{}
@media (max-width:700px){.hide-mobile{display:none;}}

/* ---------- Site mockup (ds.ch prototype) ---------- */
.sitemock{--sm-line:rgba(169,217,238,.32);--sm-fill:rgba(255,255,255,.05);display:flex;gap:clamp(16px,2.4vw,34px);align-items:flex-start;margin-top:34px;}
.sm-desktop{flex:1 1 0;min-width:0;}
.sm-phone{flex:0 0 clamp(188px,19%,236px);}
.sm-browser{border-radius:14px;overflow:hidden;box-shadow:0 28px 58px rgba(9,20,42,.32);border:1px solid rgba(9,20,42,.14);}
.sm-bar{display:flex;align-items:center;gap:12px;background:#e9edf1;padding:10px 15px;border-bottom:1px solid #d6dce2;}
.sm-dots{display:flex;gap:7px;flex:0 0 auto;}
.sm-dots i{width:11px;height:11px;border-radius:50%;background:#c4ccd3;display:block;}
.sm-brak{display:flex;gap:10px;color:#aeb7c0;flex:0 0 auto;font-size:.82rem;font-family:var(--font-sans);}
.sm-addr{flex:1;display:flex;justify-content:center;}
.sm-addr span{background:#fff;border:1px solid #dce2e8;border-radius:8px;font-family:var(--font-sans);font-size:.72rem;color:#586572;padding:5px 34px;display:inline-flex;align-items:center;gap:7px;}
.sm-star{flex:0 0 auto;color:#bcc4cc;font-size:.85rem;}
.sm-screen{background:var(--navy);padding:clamp(15px,2.1vw,28px);}
.sm-top{display:flex;align-items:center;gap:16px;padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,.15);}
.sm-brand{font-family:var(--font-display);font-weight:800;font-size:clamp(1.15rem,2vw,1.7rem);color:#fff;letter-spacing:-.02em;flex:0 0 auto;}
.sm-tag{font-family:var(--font-sans);font-size:.64rem;line-height:1.25;color:rgba(255,255,255,.6);flex:0 0 auto;}
.sm-nav{margin-left:auto;display:flex;gap:clamp(7px,1.3vw,18px);flex-wrap:wrap;justify-content:flex-end;}
.sm-nav a{font-family:var(--font-display);font-weight:500;font-size:.72rem;color:rgba(255,255,255,.8);white-space:nowrap;}
.sm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,13px);margin-top:clamp(13px,1.7vw,20px);}
.sm-card{border:1px solid var(--sm-line);background:var(--sm-fill);border-radius:9px;padding:clamp(9px,1vw,13px);display:flex;flex-direction:column;}
.sm-k{font-family:var(--font-display);font-weight:600;font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ice);}
.sm-thumb{margin-top:9px;border-radius:5px;overflow:hidden;aspect-ratio:16/10;background:#0e2b52;}
.sm-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.sm-thumb--book img{object-fit:contain;padding:7px;}
.sm-more{margin-top:auto;padding-top:11px;font-family:var(--font-display);font-weight:500;font-size:.62rem;color:rgba(255,255,255,.82);display:flex;align-items:center;justify-content:space-between;gap:8px;}
.sm-more .a{color:var(--ice);font-size:.8rem;}
.sm-afd{display:flex;align-items:baseline;gap:7px;margin-top:9px;}
.sm-afd b{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:.85;color:var(--ice);}
.sm-afd span{font-family:var(--font-display);font-weight:600;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72);}
.sm-af-note{font-family:var(--font-sans);font-size:.64rem;line-height:1.3;color:rgba(255,255,255,.82);margin-top:9px;}
.sm-grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1vw,13px);margin-top:clamp(8px,1vw,13px);}
.sm-wide{border:1px solid var(--sm-line);background:var(--sm-fill);border-radius:9px;padding:clamp(11px,1.1vw,15px);display:flex;gap:14px;align-items:center;justify-content:space-between;}
.sm-wtext{min-width:0;}
.sm-wtext p{font-family:var(--font-sans);font-size:.66rem;line-height:1.4;color:rgba(255,255,255,.74);margin-top:7px;max-width:26ch;}
.sm-wart{flex:0 0 34%;aspect-ratio:16/9;border-radius:5px;overflow:hidden;background:#0e2b52;}
.sm-wart img{width:100%;height:100%;object-fit:cover;display:block;}
.sm-wicon{flex:0 0 30%;display:flex;align-items:center;justify-content:center;color:var(--ice);opacity:.85;}
.sm-wicon svg{width:64%;height:auto;}
.sm-phone-frame{border-radius:30px;background:#0c264c;padding:8px;box-shadow:0 28px 58px rgba(9,20,42,.32);border:1px solid rgba(9,20,42,.22);}
.sm-phone-screen{border-radius:23px;overflow:hidden;background:var(--navy);}
.sm-ph-status{display:flex;justify-content:space-between;align-items:center;padding:9px 16px 3px;font-family:var(--font-display);font-weight:600;font-size:.6rem;color:rgba(255,255,255,.85);}
.sm-ph-status .sig{display:flex;gap:4px;align-items:center;}
.sm-ph-top{display:flex;justify-content:space-between;align-items:center;padding:6px 16px 12px;}
.sm-ph-brand{font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:#fff;letter-spacing:-.02em;}
.sm-ph-burger{display:flex;flex-direction:column;gap:3px;}
.sm-ph-burger i{width:17px;height:2px;background:rgba(255,255,255,.85);display:block;border-radius:2px;}
.sm-ph-hero{position:relative;margin:0 12px;border-radius:11px;overflow:hidden;aspect-ratio:16/11;}
.sm-ph-hero img{width:100%;height:100%;object-fit:cover;display:block;}
.sm-ph-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,16,34,.75),transparent 55%);z-index:1;}
.sm-ph-hero figcaption{position:absolute;left:11px;right:11px;bottom:10px;color:#fff;font-family:var(--font-sans);font-weight:500;font-size:.64rem;line-height:1.25;text-shadow:0 1px 6px rgba(0,0,0,.6);z-index:2;}
.sm-ph-menu{padding:10px 16px 16px;}
.sm-ph-menu a{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.1);font-family:var(--font-display);font-weight:500;font-size:.74rem;color:rgba(255,255,255,.9);}
.sm-ph-menu a:last-child{border-bottom:0;}
.sm-ph-menu svg{width:15px;height:15px;color:var(--ice);opacity:.82;flex:0 0 auto;}
.sm-cap{font-family:var(--font-sans);font-size:.84rem;color:#6a7076;margin-top:18px;text-align:center;}
@media (max-width:820px){.sitemock{flex-direction:column;align-items:stretch;}.sm-phone{align-self:center;flex-basis:auto;width:236px;}}
@media (max-width:560px){.sm-grid{grid-template-columns:repeat(2,1fr);}.sm-grid2{grid-template-columns:1fr;}.sm-nav{display:none;}.sm-tag{display:none;}}

/* ---------- Site page: hero brand + two-column illustration ---------- */
.ds-brand{color:var(--blue);font-size:1.32em;font-weight:700;letter-spacing:-.01em;}
.site-two{display:grid;grid-template-columns:1fr clamp(232px,26vw,300px);gap:clamp(28px,4.5vw,64px);align-items:start;}
.site-two-fig{justify-self:end;width:100%;}
.site-two-fig .sm-phone{width:100%;}
.sm-ph-logo{display:flex;align-items:center;gap:9px;}
.sm-ph-mark{width:26px;height:26px;flex:0 0 auto;}
.sm-ph-mark line{stroke:#fff;stroke-width:1.6;}
.sm-ph-mark circle{fill:var(--ice);}
.sm-ph-logo span{font-family:var(--font-display);font-weight:700;font-size:.6rem;line-height:1.25;letter-spacing:.04em;text-transform:uppercase;color:#fff;}
@media (max-width:820px){.site-two{grid-template-columns:1fr;}.site-two-fig{justify-self:center;width:250px;margin-top:6px;}}

/* phone illustration: gentle hover lift, matching site illustrations */
.site-two-fig .sm-phone{transition:transform var(--dur-m) var(--ease);will-change:transform;}
.site-two-fig:hover .sm-phone{transform:translateY(-8px);}
@media (prefers-reduced-motion:reduce){.site-two-fig:hover .sm-phone{transform:none;}}

/* ---------- Participate page ---------- */
.cta-row{display:flex;flex-wrap:wrap;gap:16px 22px;align-items:center;margin-top:clamp(28px,4vw,40px);}
.dash-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;max-width:66ch;}
.dash-list li{position:relative;padding-left:22px;font-family:var(--font-sans);font-size:.98rem;line-height:1.55;color:#2b2f33;}
.dash-list li::before{content:"—";position:absolute;left:0;color:var(--blue);}
.section--ice .dash-list li,.section--ice .give-body p{color:#213043;}
.give{margin-top:4px;}
.give-item{display:grid;grid-template-columns:66px 1fr;gap:24px;padding:clamp(24px,3vw,34px) 0;border-top:1px solid var(--grey);}
.give-item:last-child{border-bottom:1px solid var(--grey);}
.give-num{font-family:var(--font-display);font-weight:800;font-size:2rem;line-height:.9;color:var(--ice);-webkit-text-stroke:1px var(--navy);}
.give-body h3{font-size:1.22rem;color:var(--navy);margin-bottom:12px;}
.give-body p{font-family:var(--font-sans);font-size:1rem;line-height:1.62;color:#2b2f33;max-width:66ch;}
.give-body p + p{margin-top:12px;}
.give-body .dash-list + p{margin-top:14px;}
/* contact form (dark section) */
.join-lede{max-width:60ch;}
.join-lede p{color:rgba(255,255,255,.82);font-family:var(--font-sans);font-size:1.05rem;line-height:1.62;}
.join-lede p + p{margin-top:12px;}
.opt-list{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:13px 30px;}
.opt{display:flex;align-items:flex-start;gap:11px;font-family:var(--font-sans);font-size:.97rem;line-height:1.4;color:rgba(255,255,255,.86);cursor:pointer;}
.opt input{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1.5px solid rgba(255,255,255,.5);border-radius:4px;margin-top:2px;flex:0 0 auto;transition:border-color var(--dur-s) var(--ease),box-shadow var(--dur-s) var(--ease);}
.opt input:checked{border-color:var(--ice);box-shadow:inset 0 0 0 4px var(--ice);}
.opt:hover input{border-color:var(--ice);}
.join-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;margin-top:34px;}
.join-field{display:flex;flex-direction:column;}
.join-field.full{grid-column:1 / -1;}
.join-field label{font-family:var(--font-display);font-weight:600;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ice);margin-bottom:8px;}
.join-field input,.join-field textarea{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);border-radius:3px;color:#fff;padding:12px 14px;font-family:var(--font-sans);font-size:.95rem;width:100%;transition:border-color var(--dur-s) var(--ease);}
.join-field input:focus,.join-field textarea:focus{outline:none;border-color:var(--ice);}
.join-field input::placeholder,.join-field textarea::placeholder{color:rgba(255,255,255,.38);}
.join-field textarea{min-height:120px;resize:vertical;}
.join-submit{margin-top:26px;}
.join-contacts{margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16);}
.join-contacts > p{color:rgba(255,255,255,.7);font-family:var(--font-sans);font-size:.92rem;margin-bottom:14px;}
.join-contacts .jc{display:flex;flex-direction:column;gap:10px;}
.join-contacts .jc p{display:flex;align-items:baseline;gap:.55em;margin:0;}
.join-contacts .jc .lbl{color:rgba(255,255,255,.5);font-family:var(--font-sans);font-size:.9rem;min-width:4.7em;flex:0 0 auto;}
.join-contacts .jc a{color:var(--ice);font-family:var(--font-display);font-weight:600;font-size:1rem;letter-spacing:.01em;transition:color var(--dur-s) var(--ease);}
.join-contacts .jc a:hover{color:#fff;}
@media (max-width:820px){.opt-list{grid-template-columns:1fr;}.join-fields{grid-template-columns:1fr;}.give-item{grid-template-columns:46px 1fr;gap:16px;}.give-num{font-size:1.6rem;}}

/* ---------- Participate: two-column blocks (side cards) ---------- */
.two-col{display:grid;column-gap:clamp(30px,4.5vw,58px);row-gap:32px;align-items:stretch;--edge-gap:calc((100vw - min(100vw, var(--container)))/2 + var(--gutter));}
.two-col--textleft{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);}
.two-col--cardleft{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);}
.two-col--about{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);}
.about-main{min-width:0;}
/* Текст «Петербургской симфонии» верстается до правого поля (как заголовок
   «Почему сейчас»), а не обрывается по 64ch. */
.about-main .body-text{max-width:none;}
/* Правое поле текста «Архитектуры проекта» = левому полю «Петербургской
   симфонии» (там это column-gap), чтобы отступы у разделяющей линии совпадали. */
#about .side-card--bleed-left{padding-right:clamp(30px,4.5vw,58px);}
.get-main,.pt-main{min-width:0;}
.get-main .comp-tabs{margin-top:0;}
.side-card{padding:clamp(24px,3vw,38px);border-radius:5px;}
.side-card .eyebrow{margin-bottom:8px;}
.side-card-title{font-size:clamp(1.3rem,1.9vw,1.65rem);line-height:1.14;margin:6px 0 16px;}
.side-card p{font-family:var(--font-sans);font-size:.96rem;line-height:1.6;}
.side-card p + p{margin-top:13px;}
.side-card--ice{background:var(--ice);}
.side-card--ice .side-card-title{color:var(--navy);}
.side-card--ice p{color:#20303f;}
.side-card--navy{background:var(--navy);color:#fff;}
.side-card--navy .side-card-title{color:#fff;}
.side-card--navy p{color:rgba(255,255,255,.86);}
.side-card .btn-arrow{margin-top:18px;}
.side-card--bleed{border-radius:0;margin-top:calc(-1 * var(--section-pad));margin-bottom:calc(-1 * var(--section-pad));padding-top:var(--section-pad);padding-bottom:var(--section-pad);}
.side-card--bleed-right{margin-right:calc(-1 * var(--edge-gap));padding-right:calc(var(--edge-gap) + clamp(24px,3vw,38px));}
.side-card--bleed-left{margin-left:calc(-1 * var(--edge-gap));padding-left:var(--edge-gap);}
.partner-item--static{cursor:default;}
.partner-item--static:hover{background:var(--white);}
.section--muted{background:#edf0f2;}
.page-hero--navy{background:var(--navy);border-bottom:1px solid rgba(255,255,255,.14);}
.page-hero--navy h1{color:#fff;}
.page-hero--navy .lede{color:rgba(255,255,255,.82);}
.page-hero--navy .ds-brand{color:var(--ice);}
/* Насыщенно-серая шапка страницы — тёмный текст, номер перекрашен в navy. */
.page-hero--grey{background:#cdd4d9;border-bottom-color:rgba(18,59,112,.12);}
.page-hero--grey .page-num{color:var(--ice);}
@media (max-width:900px){.two-col--textleft,.two-col--cardleft,.two-col--about{grid-template-columns:1fr;}.side-card--bleed{margin-top:0;margin-bottom:0;padding-top:clamp(24px,3vw,38px);padding-bottom:clamp(24px,3vw,38px);border-radius:5px;}.side-card--bleed-left,.side-card--bleed-right{margin-left:0;margin-right:0;padding-left:clamp(24px,3vw,38px);padding-right:clamp(24px,3vw,38px);}}

.join-person{font-family:var(--font-display);font-weight:600;font-size:.98rem;color:#fff;margin:0 0 14px;}
.join-person span{color:rgba(255,255,255,.55);font-weight:500;}

/* Обсудить участие — форма слева (шире), заголовок справа */
.join-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:clamp(30px,4.5vw,58px);align-items:start;}
.join-body{grid-column:1;grid-row:1;min-width:0;}
.join-head{grid-column:2;grid-row:1;}
.join-head > .eyebrow, .join-body > .eyebrow{display:flex;margin-bottom:12px;}
@media (max-width:820px){.join-grid{grid-template-columns:1fr;}.join-head{grid-column:auto;grid-row:auto;margin-bottom:26px;}.join-body{grid-column:auto;grid-row:auto;}}

/* Логотип издательства в футере — базовый вид: в кружке, как остальные иконки */
.social-icons a.social-logo img{width:20px;height:20px;object-fit:contain;filter:brightness(0) invert(1);opacity:.92;transition:opacity var(--dur-s) var(--ease),transform var(--dur-s) var(--ease);}
.social-icons a.social-logo:hover img{opacity:1;}

/* ---------- Media collage mosaic (right of «Для медиапартнёров») ---------- */
/* Паттерн коллажа увеличен вдвое (mosaic-2x). ЧТОБЫ ВЕРНУТЬ прежний размер —
   замените в строке ниже mosaic-2x.webp на mosaic.webp. */
.media-mosaic{align-self:stretch;margin-top:calc(-1 * var(--section-pad));margin-bottom:calc(-1 * var(--section-pad));margin-right:calc(-1 * var(--edge-gap));overflow:hidden;background:#0e2b52 url(../img/collage/mosaic-2x.webp) center/cover;filter:grayscale(1);}
@media (max-width:900px){.media-mosaic{margin:22px 0 0 0;height:clamp(220px,50vh,340px);}}

/* Способы участия (список вместо формы) */
.ways-list{display:flex;flex-direction:column;}
.ways-row{display:grid;grid-template-columns:minmax(52px,64px) 1fr;gap:18px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--grey);}
.ways-row:last-child{border-bottom:none;}
.ways-num{font-size:clamp(1.15rem,1.9vw,1.55rem);color:var(--ice);-webkit-text-stroke:1px var(--navy);white-space:nowrap;}
.ways-txt{font-family:var(--font-sans);font-size:.98rem;line-height:1.5;color:#2b2f33;}
@media (max-width:600px){.ways-row{grid-template-columns:1fr;gap:2px;}}
@media (max-width:600px){.ways-list{grid-template-columns:1fr;}}

/* Grey contact card (Сотрудничество) */
.side-card--grey{background:#e2e7ec;}
.side-card--grey .gc-lead{font-family:var(--font-sans);font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.5;color:#2b2f33;}
.side-card--grey .gc-person{font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--navy);margin-top:16px;}
.side-card--grey .gc-person span{color:#6a7076;font-weight:500;}
.side-card--grey .gc-contacts{margin-top:16px;padding-top:20px;border-top:1px solid rgba(18,59,112,.16);display:flex;flex-direction:column;gap:10px;}
.side-card--grey .gc-contacts p{display:flex;align-items:baseline;gap:.55em;margin:0;}
.side-card--grey .gc-contacts .lbl{color:#8a9096;font-family:var(--font-sans);font-size:.9rem;min-width:4.7em;flex:0 0 auto;}
.side-card--grey .gc-contacts a{color:var(--blue);font-family:var(--font-display);font-weight:600;font-size:1rem;transition:color var(--dur-s) var(--ease);}
.side-card--grey .gc-contacts a:hover{color:var(--navy);}

#obsudit .eyebrow{display:flex;}
.side-card--grey .gc-logo{display:flex;align-items:center;gap:12px;margin-top:30px;}

/* ====== ВАРИАНТ: «Сотрудничество» — голубой блок, контакты — белый.
   БЫСТРЫЙ ОТКАТ: удалите блок между этими комментариями
   (вернётся серая карточка контактов на светлой секции). ====== */
#obsudit{background:var(--ice);}
#obsudit .ob-bg{background:#ffffff;}
#obsudit .ways-num{color:var(--navy);-webkit-text-stroke:0;}
/* ====== конец блока быстрого отката ====== */

/* ---------- Обсудить участие: общая сетка строк (контакты слева / список справа) ---------- */
.ob-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);column-gap:clamp(30px,4.5vw,58px);grid-template-rows:auto repeat(6,auto);--edge-gap:calc((100vw - min(100vw, var(--container)))/2 + var(--gutter));}
.ob-bg{grid-column:1;grid-row:1 / -1;background:#e2e7ec;margin-top:calc(-1 * var(--section-pad));margin-bottom:calc(-1 * var(--section-pad));margin-left:calc(-1 * var(--edge-gap));z-index:0;}
.ob-grid > .gc-lead,.ob-grid > .gc-person,.ob-grid > .gc-contacts,.ob-grid > .gc-staff{grid-column:1;position:relative;z-index:1;margin-right:clamp(30px,4vw,60px);}
.ob-grid > .gc-lead{grid-row:1;align-self:start;font-family:var(--font-sans);font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.5;color:#2b2f33;}
.ob-grid > .gc-person{grid-row:5;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:12px;border-bottom:1px solid rgba(18,59,112,.2);font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--navy);}
.ob-grid > .gc-person span{color:#6a7076;font-weight:500;}
.ob-grid > .gc-contacts{grid-row:6 / 8;align-self:start;display:flex;flex-direction:column;gap:11px;padding-top:16px;}
.ob-grid > .gc-contacts p{display:flex;align-items:baseline;gap:.55em;margin:0;}
.ob-grid > .gc-contacts .lbl{color:#8a9096;font-family:var(--font-sans);font-size:.9rem;min-width:4.7em;flex:0 0 auto;}
.ob-grid > .gc-contacts a{color:var(--blue);font-family:var(--font-display);font-weight:600;font-size:1rem;transition:color var(--dur-s) var(--ease);}
.ob-grid > .gc-contacts a:hover{color:var(--navy);}
.ob-grid > .gc-staff{grid-row:2 / 5;align-self:center;height:46px;background:repeating-linear-gradient(to bottom, rgba(18,59,112,.2) 0 1.4px, transparent 1.4px 11.1px);background-clip:content-box;}
.ob-grid > .obsudit-head{grid-column:2;grid-row:1;align-self:start;margin-bottom:8px;}
.ob-grid > .ways-row{grid-column:2;}
@media (max-width:820px){
  .ob-grid{display:flex;flex-direction:column;}
  .ob-bg{display:none;}
  .ob-grid > *{margin-right:0;}
  .ob-grid > .obsudit-head{order:1;}
  .ob-grid > .ways-row{order:2;}
  .ob-grid > .gc-lead{order:3;margin-top:30px;}
  .ob-grid > .gc-staff{order:4;}
  .ob-grid > .gc-person{order:5;justify-content:flex-start;}
  .ob-grid > .gc-contacts{order:6;}
}

/* ---------- Multi-paragraph hover quote ---------- */
.person-quote--multi{flex-direction:column;justify-content:center;align-items:stretch;gap:10px;}
.person-quote--multi p{margin:0;}

/* ---------- Timeline manual controls (filled chips, no border) ---------- */
.score-year .year-num{white-space:nowrap;}
/* Playback controls — sit on the navy year band, to the right of the counter.
   Glyphs echo the year digits (display face, heavy, ice) and stay bare at rest;
   only on hover do they gain a round outline + inverted fill. */
.legend-counter-row{display:flex;align-items:center;gap:13px;}
.score-controls{display:flex;align-items:center;gap:6px;}
.sc-btn{
  width:38px;height:38px;padding:0;border:0;border-radius:50%;background:transparent;
  color:var(--ice);font-family:var(--font-display);font-weight:800;font-size:1.5rem;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background var(--dur-s) var(--ease),color var(--dur-s) var(--ease),box-shadow var(--dur-s) var(--ease);
}
.sc-btn:hover,.sc-btn:focus-visible{
  outline:none;background:var(--ice);color:var(--navy);
  box-shadow:0 0 0 2px var(--navy),0 0 0 3.5px var(--ice);
}
.sc-btn:active{transform:translateY(1px);}
.sc-i{width:21px;height:21px;display:block;position:relative;top:2px;}
.sc-i--pause{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;}
.sc-i--play{display:none;fill:currentColor;stroke:none;}
.score-controls.is-paused .sc-i--pause{display:none;}
.score-controls.is-paused .sc-i--play{display:block;}

/* ============================================================
   МОБИЛЬНЫЕ ПРАВКИ (вертикальные телефоны) — добавлено пакетно
   ============================================================ */

/* (3) Подвал: обязательные симметричные боковые поля */
@media (max-width:900px){
  .site-footer .container{padding-left:var(--gutter)!important;padding-right:var(--gutter)!important;}
}

/* (5,8) Любые двухколоночные блоки текст+изображение — в стек,
   изображение отдельным блоком (сверху/снизу), на всю ширину с полями */
@media (max-width:760px){
  .doc-split{grid-template-columns:1fr!important;}
  .doc-split .doc-figure{order:-1;margin:0 0 26px 0;}
  .doc-split .doc-figure img{width:100%;height:auto;}
  /* Книга: обложка отдельным блоком над текстом, адаптивная, с полями */
  .book-intro-grid{display:block!important;}
  .book-intro-grid .book-cover-fig{margin:0 0 34px 0!important;width:100%;}
  .book-intro-grid .book-cover-fig img{width:70%;max-width:272px;height:auto;display:block;margin:0 auto;}
}

@media (max-width:600px){
  /* (1) Блоки цифр — 2 колонки, одинаковые боковые поля на обеих строках */
  .stat-band{grid-template-columns:1fr 1fr!important;}
  .stat-band .stat{padding:20px 16px!important;}
  .aud-band .stat{padding:16px!important;}
  .aud-kpi{grid-template-columns:1fr 1fr!important;}

  /* (2) Таймлайн «Партитура проекта»: заголовок и лид не наезжают */
  #timeline .section-head{flex-direction:column;align-items:flex-start;gap:14px;}
  #timeline .section-head .lede{max-width:none;}
  .timeline-wrap{margin-top:6px;}

  /* (4) Верх стартовой: отступ H1 → линия соразмерен верхнему */
  .hero-divider{margin-top:40px!important;}

  /* (10) Интервал от партнёров города до следующего города */
  .city-col{margin-bottom:36px;}
  .city-col:last-child{margin-bottom:0;}

  /* (11) participate: «Стать медиапартнёром» ровно под «Обсудить партнёрство» */
  .cta-row{flex-direction:column;align-items:stretch;gap:0;}
  .cta-row .btn-solid{width:100%;text-align:center;justify-content:center;}
  .cta-row .btn-arrow{width:100%;justify-content:center;padding:15px 20px;border-bottom:1px solid var(--grey);}

  /* (12) Медиа-иллюстрация во всю ширину без полей */
  .media-mosaic{margin-left:calc(-1 * var(--gutter))!important;margin-right:calc(-1 * var(--gutter))!important;}

  /* (13) Линейки между текстом и контактами (как в desktop) */
  .ob-grid > .gc-staff{display:block!important;height:46px;margin:26px 0;}

  /* (15) participate: сначала «Содержательное участие», затем «Город как герой проекта» */
  .two-col--cardleft{display:flex;flex-direction:column;}
  .two-col--cardleft > .get-main{order:1;}
  .two-col--cardleft > .side-card--ice{order:2;margin-top:24px;}
}

/* (9) Карточки книг издательства: обложка НЕ перекрывает заголовок/ISBN */
@media (max-width:520px){
  .pubbook{grid-template-columns:1fr!important;}
  .pubbook-cover{grid-column:1!important;grid-row:1!important;justify-content:flex-start;margin-bottom:16px;}
  .pubbook-info{grid-column:1!important;grid-row:2!important;}
  .pubbook-body{grid-column:1!important;grid-row:3!important;}
}

/* (6) Композиция (01 Фильм): вкладки → аккордеон на мобиле */
#composition .comp-tabs .acc-head{
  display:none;width:100%;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 2px;border-top:1px solid var(--grey);
  font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--navy);
  text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
#composition .comp-tabs .acc-head .acc-ico{flex:0 0 auto;width:1em;text-align:center;color:var(--blue);font-size:1.2rem;line-height:1;}
#composition .comp-tabs .acc-head .acc-ico::after{content:"+";}
#composition .comp-tabs .acc-head.is-open .acc-ico::after{content:"\2212";}
@media (max-width:760px){
  #composition .comp-tabs > .tabs-nav{display:none;}
  #composition .comp-tabs .lecture-panel{display:block!important;}
  #composition .comp-tabs .acc-head{display:flex;}
  #composition .comp-tabs .lecture-panel > *:not(.acc-head){display:none;}
  #composition .comp-tabs .lecture-panel.acc-open > *:not(.acc-head){display:block;}
  #composition .lecture-more{display:none!important;}
  #composition .comp-tabs .lecture-body.is-clamped{max-height:none!important;}
  #composition .comp-tabs .lecture-body.is-clamped::after{display:none!important;}
}

/* (14) Мобильный дисклеймер-баннер */
.mobile-note{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:2000;
  display:flex;align-items:center;gap:12px;
  background:var(--navy);color:#fff;border-radius:12px;
  padding:13px 14px;box-shadow:0 8px 30px rgba(0,0,0,.28);
  font-family:var(--font-sans);font-size:.9rem;line-height:1.35;
  transform:translateY(140%);transition:transform .4s var(--ease);
}
.mobile-note.is-shown{transform:translateY(0);}
.mobile-note span{flex:1;}
.mobile-note button{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:1.1rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.mobile-note button:hover{background:rgba(255,255,255,.24);}

/* (15) Перестановка блоков participate на всех «стековых» ширинах */
@media (max-width:900px){
  .two-col--cardleft{display:flex;flex-direction:column;}
  .two-col--cardleft > .get-main{order:1;}
  .two-col--cardleft > .side-card--ice{order:2;margin-top:24px;}
}

/* (доп.) 03 Лекции: панели «как на 01/02» — изображение сверху во всю ширину, текст полной ширины */
@media (max-width:760px){
  .lectures-tabs:not(.comp-tabs) .lecture-fig{width:100%;padding:0;}
  .lectures-tabs:not(.comp-tabs) .lecture-fig .doc-sheet{transform:none!important;width:100%;}
  .lectures-tabs:not(.comp-tabs) .lecture-fig .doc-sheet img{width:100%;max-width:none;height:auto;max-height:64vh;object-fit:contain;}
  .lectures-tabs:not(.comp-tabs) .lecture-body{max-width:none;}
  /* лекция 5: таблица не внахлёст, а под основным изображением */
  .lecture-fig--stack .doc-sheet--table{position:static;width:60%;margin:14px auto 0;transform:none!important;}
  .lecture-fig--stack .doc-sheet--table img{max-height:34vh;}
}

/* (доп.) Главная: «Архитектура проекта» ПОСЛЕ «О проекте / Петербургская симфония» */
@media (max-width:900px){
  .two-col--about{display:flex;flex-direction:column;}
  .two-col--about > .about-main{order:1;}
  .two-col--about > .side-card--ice{order:2;margin-top:24px;}
}

/* (доп.) Таймлайн на мобиле: зона «в фокусе» (слева) шире — примерно как прежняя правая зона */
@media (max-width:900px){
  .score-playhead{left:76%!important;}
}

/* ---- Аккордеон «Композиции»: номер/символ в заголовке ---- */
#composition .comp-tabs .acc-title{display:flex;align-items:baseline;gap:12px;}
#composition .comp-tabs .acc-num{flex:0 0 auto;min-width:1.1em;color:var(--ice);-webkit-text-stroke:.6px var(--navy);font-weight:800;}

/* ---- Таймлайн (вертикальный телефон): голубая подложка, без меток Шостакович/Футбол ---- */
@media (max-width:760px){
  /* Описание таймлайна: из absolute → нормальный текст раздела под заголовком */
  .timeline-section .section-head{display:block;}
  .timeline-section .section-head > .lede--blue{
    position:static;left:auto;right:auto;top:auto;max-width:none;
    padding:0;margin-top:16px;
  }
}
@media (max-width:600px){
  /* Голубая подложка, внутри — синий блок «год» во всю ширину минус поля */
  .timeline-legend{background:var(--ice);padding:16px var(--gutter);display:block;}
  .legend-band--year{background:var(--navy);border-radius:8px;padding:14px 16px;width:100%;display:flex;align-items:center;gap:12px;margin:0;}
  .legend-band--music,.legend-band--football{display:none!important;}
  .legend-staff-label{display:none!important;}
  /* Подвал: вторую строку (юбилей/сезон) на мобиле убираем */
  .footer-bottom p:last-child{display:none;}
}

/* ---- Карточки книг издательства (телефон): ISBN под линией слева, год сверху справа ---- */
@media (max-width:520px){
  /* Линия отчерка — на самой карточке (foot); под ней слева ISBN, справа «Описание» */
  .pubbook-foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--grey);
    display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:12px;}
  .pubbook-isbn{order:0;text-align:left;margin:0;}
  .pubbook-desc-toggle{order:1;margin:0;padding:0;border-top:none;}
}

/* ---- participate: картинка стык в стык с блоком «Принять участие»; 5 линеек стана ---- */
@media (max-width:600px){
  #media{padding-bottom:0!important;}
  #media .media-mosaic{margin-bottom:0!important;}
  #obsudit{background:rgba(169,217,238,.16);}
}
/* Пять линеек стана между текстом и контактами (когда ob-grid стекается) */
@media (max-width:820px){
  .ob-grid > .gc-staff{
    display:block!important;order:4;height:56px;margin:22px 0;
    background-image:repeating-linear-gradient(to bottom, rgba(18,59,112,.45) 0 1.6px, transparent 1.6px 13px)!important;
    background-clip:border-box!important;background-color:transparent!important;
  }
}

/* ---- Тизеры на телефоне: индивидуальное кадрирование, больше высоты ---- */
@media (max-width:640px){
  .teaser-img,.teaser-card--wide .teaser-img{
    min-height:clamp(280px,76vw,400px)!important;
    background-size:cover!important;
  }
  .teaser-card--dark .teaser-img{background-position:center 20%!important;}      /* 01 Фильм — лица сверху */
  .teaser-card:nth-child(2) .teaser-img{background-position:center 48%!important;} /* 02 Книга — по центру */
  .teaser-card--ice .teaser-img{background-position:center 18%!important;}        /* 03 Лекции — прыгун сверху */
}

/* ======= Мобильные доправки (по скриншотам) ======= */
@media (max-width:760px){
  /* (2) Убрать голубую подложку справа за заголовком/описанием таймлайна */
  .timeline-section .section-head::before{display:none!important;}
}
@media (max-width:640px){
  /* (5) Тизер 03: копирайт-колонка на всю ширину (было 53% → текст лез в столбик) */
  .teaser-card--ice .teaser-copy{width:100%;}
  .teaser-card--ice .teaser-copy h4{white-space:nowrap;}
  /* (4) Тизер 02: показать автора сверху книги — сдвигаем кадр выше */
  .teaser-card:nth-child(2) .teaser-img{background-position:center 36%!important;}
}
@media (max-width:600px){
  /* (0) Убрать блок «Подписывайтесь на новости проекта» в подвале на мобиле */
  .site-footer .newsletter{display:none!important;}
}
@media (max-width:820px){
  /* (3) 5 линеек стана реально видимы: растянуть по ширине (было align-self:center → 0 ширины) */
  .ob-grid > .gc-staff{align-self:stretch!important;width:100%!important;}
}
/* (1) Карточки книг: год — в правый верхний угол карточки */
@media (max-width:520px){
  .pubbook-year{position:absolute;top:clamp(16px,4vw,22px);right:clamp(16px,4vw,22px);margin:0;}
}

/* Таймлайн (мобиль): гармоничная раскладка блока «год» — слева «Год 1906», кнопки справа */
@media (max-width:600px){
  .legend-band--year{display:flex;align-items:center;padding:12px 16px;}
  .legend-band--year .legend-counter{display:flex;align-items:center;gap:10px;width:100%;margin:0;}
  .legend-band--year .legend-counter-label{margin:0;line-height:1;}
  .legend-band--year .legend-counter-row{display:flex;align-items:center;gap:12px;flex:1;}
  .legend-band--year .legend-counter-num{font-size:1.5rem;line-height:1;}
  .legend-band--year .score-controls{margin-left:auto;gap:4px;}
}