/* «Большая история» (/stories/<slug>/) — reusable premium-longform шаблон ББШ.
   Самостоятельная тёмная страница, как /throw-in/ и /museum/: сайтовая шапка
   мешала бы полноэкранному hero и фиксированному progress bar. Данные истории
   лежат в content/stories/<slug>.json, разметку собирает build_story(). */
:root{color-scheme:dark;--bg:#0b0d11;--panel:rgba(14,18,24,.72);--text:#f4f6f8;--muted:#b9c0ca;--dim:#8d97a5;--line:rgba(255,255,255,.12);--accent:#d7b16a;--accent-2:#f3d28f;--max:1240px;--content:760px;--radius:26px;--shadow:0 20px 60px rgba(0,0,0,.35)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;line-height:1.65}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.story-topbar{position:fixed;top:14px;left:18px;z-index:60;display:inline-flex;gap:10px;align-items:center;padding:9px 16px;border-radius:999px;background:rgba(10,12,16,.72);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.story-topbar:hover{border-color:var(--accent);color:var(--accent-2)}

.top-progress{position:fixed;top:0;left:0;width:100%;height:4px;z-index:1000;background:rgba(255,255,255,.05)}
.top-progress__bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 20px rgba(215,177,106,.55)}

.chapter-nav{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;gap:10px}
.chapter-nav a{width:11px;height:11px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.06);transition:.25s ease;position:relative}
.chapter-nav a span{position:absolute;right:20px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:12px;padding:6px 8px;border-radius:999px;background:rgba(10,12,16,.85);color:var(--muted);opacity:0;pointer-events:none;transition:.2s ease;border:1px solid rgba(255,255,255,.08)}
.chapter-nav a:hover span,.chapter-nav a:focus-visible span,.chapter-nav a.active span{opacity:1}
.chapter-nav a.active{background:var(--accent);border-color:var(--accent);transform:scale(1.2);box-shadow:0 0 0 6px rgba(215,177,106,.12)}

.hero{min-height:100svh;position:relative;display:flex;align-items:flex-end;padding:104px 24px 54px;overflow:hidden;background:#0d1116}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,10,.28) 0%,rgba(8,11,14,.58) 55%,rgba(8,11,14,.92) 100%),radial-gradient(circle at top left,rgba(215,177,106,.12),transparent 30%)}
.hero__rules{position:absolute;inset:0;pointer-events:none}
.hero__rules:before,.hero__rules:after{content:"";position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.08)}
.hero__rules:before{left:38%}
.hero__rules:after{left:63%}
.hero__inner{width:min(100%,var(--max));margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;position:relative;z-index:2}
.eyebrow{display:inline-flex;gap:10px;align-items:center;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2);margin-bottom:16px}
.eyebrow::before{content:"";width:36px;height:1px;background:currentColor}
.hero h1{font-size:clamp(3rem,7vw,6.4rem);line-height:.95;margin:0 0 18px;max-width:10ch;letter-spacing:-.04em}
.hero__lead{font-size:clamp(1.02rem,1.8vw,1.3rem);max-width:700px;color:var(--muted);margin-bottom:28px}
.hero__meta{display:flex;flex-wrap:wrap;gap:18px;color:#d2d8e0;font-size:14px}
.hero__card{justify-self:end;width:min(100%,410px);background:var(--panel);border:1px solid rgba(255,255,255,.1);border-radius:24px;overflow:hidden;box-shadow:var(--shadow);backdrop-filter:blur(12px)}
.hero__card-image{aspect-ratio:4/3;overflow:hidden}
.hero__card-image img{height:100%;object-fit:cover}
.hero__card-body{padding:20px 22px 24px}
.hero__card-year{display:inline-block;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-2);margin-bottom:10px}
.hero__card h2{font-size:1.25rem;margin:0 0 10px}
.hero__card p{margin:0;color:var(--muted);font-size:.97rem}

.section{position:relative;padding:110px 24px}
.section--tight{padding-top:70px;padding-bottom:70px}
.container{width:min(100%,var(--max));margin:0 auto}
.content{width:min(100%,var(--content));margin:0 auto}
.content p{font-size:1.08rem;color:#d7dde5;margin:0 0 22px}
.content a{color:var(--accent-2);border-bottom:1px solid rgba(243,210,143,.4)}
.dropcap p:first-of-type::first-letter{float:left;font-size:4.2rem;line-height:.8;padding-right:10px;font-weight:800;color:var(--accent)}
.kicker{color:var(--accent-2);text-transform:uppercase;letter-spacing:.16em;font-size:12px;margin-bottom:14px}
.section h2{font-size:clamp(2rem,4vw,4rem);line-height:.98;margin:0 0 26px;letter-spacing:-.04em;max-width:14ch}

.stats-intro{margin:0 auto 34px;width:min(100%,var(--max))}
.stats-intro .content{margin:0;max-width:var(--content)}

.wide-image{width:min(100%,var(--max));margin:0 auto;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.08)}
.wide-image__frame{position:relative;min-height:68vh;overflow:hidden;background:#131821}
.wide-image__frame img{position:absolute;inset:-6% 0;height:112%;object-fit:cover;will-change:transform}
.wide-image__caption{position:absolute;left:24px;right:24px;bottom:20px;display:flex;justify-content:space-between;gap:20px;background:rgba(8,10,14,.74);border:1px solid rgba(255,255,255,.08);padding:14px 16px;border-radius:16px;font-size:.95rem;color:var(--muted);backdrop-filter:blur(10px)}

.quote-block{width:min(100%,940px);margin:0 auto;padding:38px 24px;display:grid;grid-template-columns:90px 1fr;gap:20px;align-items:start;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
.quote-mark{font-size:6rem;line-height:.8;color:var(--accent);opacity:.7}
.quote-block blockquote{margin:0;font-size:clamp(1.6rem,3vw,3rem);line-height:1.05;letter-spacing:-.03em}
.quote-block figcaption{margin-top:18px;color:var(--muted);font-size:.98rem}

.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;width:min(100%,var(--max));margin:0 auto}
.stat-card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:28px;min-height:220px;box-shadow:var(--shadow)}
.stat-card__value{font-size:clamp(2.6rem,5vw,4.8rem);line-height:.9;font-weight:800;letter-spacing:-.05em;color:var(--accent-2);margin-bottom:14px}
.stat-card h3{margin:0 0 10px;font-size:1.15rem}
.stat-card p{margin:0;color:var(--muted);font-size:.96rem}

.split{width:min(100%,var(--max));margin:0 auto;display:grid;grid-template-columns:.95fr 1.05fr;gap:32px;align-items:center}
.split .content{width:100%;margin:0}
.panel-image{position:relative;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);min-height:620px;background:linear-gradient(170deg,#1b2432,#10151d)}
.panel-image img{position:absolute;inset:0;height:100%;object-fit:cover;object-position:center top}
.floating-note{position:absolute;right:24px;bottom:24px;max-width:260px;padding:18px;background:rgba(255,255,255,.92);color:#0d1015;border-radius:18px;box-shadow:0 20px 40px rgba(0,0,0,.22)}
.floating-note strong{display:block;margin-bottom:8px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#8c6e34}
.floating-note p{margin:0;font-size:.95rem;line-height:1.45;color:#232b37}

.timeline-strip{width:min(100%,var(--max));margin:0 auto;overflow-x:auto;padding-bottom:12px;scrollbar-width:thin}
.timeline{min-width:960px;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;align-items:stretch}
.timeline-card{position:relative;min-height:260px;border-radius:26px;overflow:hidden;background:#121721;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow)}
.timeline-card img{position:absolute;inset:0;height:100%;object-fit:cover;filter:brightness(.72)}
.timeline-card__overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:end;padding:18px;background:linear-gradient(180deg,rgba(8,11,14,0) 0%,rgba(8,11,14,.88) 84%)}
.timeline-card__year{display:inline-flex;align-self:start;padding:8px 10px;border-radius:999px;background:rgba(215,177,106,.16);border:1px solid rgba(215,177,106,.3);color:var(--accent-2);font-size:12px;letter-spacing:.15em;text-transform:uppercase;margin-bottom:12px}
.timeline-card h3{margin:0 0 8px;font-size:1.15rem}
.timeline-card p{margin:0;color:var(--muted);font-size:.95rem}
.timeline-note{width:min(100%,var(--max));margin:14px auto 0;color:var(--dim);font-size:.85rem}

.end-card{width:min(100%,1120px);margin:0 auto;border-radius:32px;padding:44px 28px;background:linear-gradient(135deg,rgba(215,177,106,.08),rgba(255,255,255,.03)),rgba(11,14,19,.9);border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center}
.end-card h2{font-size:clamp(2rem,4vw,3.4rem);line-height:.95;margin:0 0 14px;letter-spacing:-.04em}
.end-card>div>p{margin:0 0 24px;color:var(--muted);max-width:56ch}
.actions{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;justify-content:center;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--text);padding:14px 18px;border-radius:999px;font-weight:600;transition:.25s ease}
.btn:hover{border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.08);transform:translateY(-2px)}
.btn--accent{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#111;border-color:transparent}
.footer-note{color:var(--dim);font-size:13px;margin-top:18px}

.story-footer{width:min(100%,var(--max));margin:0 auto;padding:28px 0 40px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--dim);font-size:13px;border-top:1px solid var(--line)}
.story-footer a{color:var(--accent-2)}

/* Reveal-анимации включаются только когда story.js подтвердил, что работает
   (класс story-js на <html>): без JavaScript контент виден сразу. */
.story-js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.story-js .reveal.is-visible{opacity:1;transform:none}

@media (max-width:1100px){
.hero__inner,.split,.end-card{grid-template-columns:1fr}
.hero__card{justify-self:start;width:min(100%,520px)}
.stats-grid{grid-template-columns:1fr}
.chapter-nav{display:none}
}
@media (max-width:820px){
.hero{padding-top:92px}
.hero__rules{display:none}
.hero__lead{font-size:1rem}
.wide-image__frame{min-height:52vh}
.quote-block{grid-template-columns:1fr}
.quote-mark{font-size:4rem}
.quote-block blockquote{font-size:1.9rem}
.panel-image{min-height:420px}
.timeline{min-width:820px}
}
@media (max-width:560px){
.section{padding:84px 18px}
.section--tight{padding-top:56px;padding-bottom:56px}
.hero{padding-left:18px;padding-right:18px}
.hero__meta{font-size:13px;gap:12px}
.wide-image__caption{flex-direction:column}
.floating-note{left:14px;right:14px;max-width:none}
.actions{flex-direction:column}
.btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.story-js .reveal{opacity:1;transform:none;transition:none}
.btn,.chapter-nav a{transition:none}
.wide-image__frame img{inset:0;height:100%}
}