/* Farby, typografia a rozostupy: tieto premenné stačia na základný rebranding. */
:root { color-scheme: dark; --bg:#080a0d; --fg:#f2f1ec; --muted:#9a9da3; --accent:#c0d2eb; --line:rgba(255,255,255,.18); --gutter:clamp(24px,5vw,88px); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
a:focus-visible, video:focus-visible { outline:2px solid var(--accent); outline-offset:7px; }
.skip-link { position:fixed; top:12px; left:12px; transform:translateY(-180%); padding:16px; background:var(--fg); color:var(--bg); z-index:100; }
.skip-link:focus { transform:none; }
.header { height:90px; padding:0 var(--gutter); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.wordmark { font-size:25px; letter-spacing:-1.5px; font-weight:800; }.wordmark span { font-size:11px; vertical-align:top; margin-left:5px; }
.header-note,.header-link,.eyebrow,.edition,.intro-bottom a,.stage-top,.chapter-number,.timeline,.specs span,footer { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; }
.header-note { color:var(--muted); }.header-link span { margin-left:16px; }
.intro { padding:50px var(--gutter) 40px; min-height:calc(90svh - 90px); display:flex; flex-direction:column; justify-content:space-between; gap:32px; }
.intro-top,.intro-bottom { display:flex; justify-content:space-between; gap:24px; }.eyebrow { color:var(--accent); }.edition { color:var(--muted); }
h1 { margin:12px 0 24px; font-size:clamp(76px,11.6vw,180px); font-weight:400; line-height:.87; letter-spacing:-.075em; }
em { font-family:Georgia,'Times New Roman',serif; font-weight:400; }
.intro-bottom { align-items:flex-end; }.intro-bottom p { color:var(--muted); font-size:14px; line-height:1.6; margin:0; }.intro-bottom a { padding:12px 0; }.intro-bottom a span { margin-left:30px; font-size:20px; }
/* 420svh - 100svh = 320svh priestoru na animáciu.
   svh udržiava výšku stabilnú pri skrývaní adresného riadka na mobile.
   Predkovia sticky scény nesmú mať overflow:hidden/auto. */
.experience { position:relative; height:420vh; height:420svh; border-block:1px solid var(--line); }
.stage { position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; background:#030405; }
.stage video { width:100%; height:100%; display:block; object-fit:cover; }
.shade { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.4),transparent 30%,transparent 48%,rgba(0,0,0,.88)); }
.stage-top { position:absolute; top:34px; left:var(--gutter); right:var(--gutter); display:flex; justify-content:space-between; gap:20px; }.motion-label { color:#c0c2c7; }
.loading { position:absolute; top:45%; left:var(--gutter); right:var(--gutter); text-align:center; font-size:14px; background:rgba(0,0,0,.7); padding:18px; border-radius:4px; }.loading[hidden] { display:none; }
.caption { position:absolute; bottom:115px; left:var(--gutter); right:var(--gutter); display:flex; align-items:flex-start; gap:32px; pointer-events:none; }.chapter-number { color:var(--muted); padding-top:3px; white-space:nowrap; }.chapter { max-width:530px; }.chapter .eyebrow { margin:0 0 14px; }.chapter h2 { font-size:clamp(36px,4.8vw,72px); font-weight:400; letter-spacing:-.045em; line-height:1.05; margin:0 0 18px; }.chapter>p:last-child { max-width:370px; font-size:14px; line-height:1.6; color:#bec0c5; margin:0; }
.timeline { position:absolute; bottom:30px; left:var(--gutter); right:var(--gutter); }.progress-track { height:1px; background:rgba(255,255,255,.25); }#progress { height:100%; background:var(--fg); transform:scaleX(0); transform-origin:left; }.timeline ol { display:flex; justify-content:space-between; gap:12px; list-style:none; margin:18px 0 0; padding:0; color:#787c84; }.timeline [aria-current] { color:var(--fg); }
.details { padding:100px var(--gutter); }.details-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:70px; margin-top:35px; }.details h2 { font-size:clamp(42px,5vw,76px); font-weight:400; line-height:1.05; letter-spacing:-.05em; margin:0; }.details-grid p { color:var(--muted); font-size:16px; line-height:1.8; margin:0 0 20px; }.back-link { display:inline-block; border-bottom:1px solid var(--line); padding:12px 0; font-size:14px; }.back-link span { margin-left:40px; }.specs { display:grid; grid-template-columns:repeat(3,1fr); margin-top:80px; border-top:1px solid var(--line); }.specs>div { padding:24px 0; }.specs span { display:block; color:var(--muted); margin-bottom:14px; }.specs strong { font-size:18px; font-weight:400; }
footer { display:flex; justify-content:space-between; gap:24px; border-top:1px solid var(--line); padding:26px var(--gutter); font-size:9px; color:var(--muted); line-height:1.8; }footer a { text-decoration:underline; }.noscript { padding:24px; background:#1b2637; }
@media(max-width:700px) { .header { height:74px; }.header-note,.edition { display:none; }.intro { min-height:75svh; padding-top:36px; }h1 { font-size:clamp(76px,17vw,120px); }.intro-bottom { align-items:flex-start; flex-direction:column; gap:18px; }.stage video { object-fit:contain; object-position:center 28%; }.motion-label { font-size:9px; letter-spacing:1px; }.caption { gap:18px; bottom:112px; }.chapter-number { font-size:9px; }.chapter h2 { font-size:37px; }.chapter>p:last-child { font-size:12px; }.timeline { font-size:9px; letter-spacing:.5px; }.details { padding-block:65px; }.details-grid { grid-template-columns:1fr; gap:32px; }.specs { margin-top:44px; gap:15px; }.specs span { font-size:9px; letter-spacing:.5px; }.specs strong { font-size:13px; }footer { flex-direction:column; gap:8px; } }
/* Pri reduced motion zrušíme dlhú scroll sekciu a ponúkneme ovládanie videa. */
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.experience { height:auto; }.stage { position:relative; height:auto; min-height:620px; }.stage video { min-height:420px; height:65svh; object-fit:contain; }.shade { display:none; }.caption { position:relative; inset:auto; padding:25px var(--gutter) 40px; }.timeline,.motion-label,.chapter-number { display:none; }.stage-top { pointer-events:none; } }