:root { --ink:#101010; --red:#b30d18; --paper:#f7f6f2; }
* { box-sizing:border-box; }
html { scroll-behavior:auto; }
body { margin:0; background:#050505; color:#fff; font-family:Arial,Helvetica,sans-serif; overflow-x:hidden; }
button { font:inherit; }
.journey { position:relative; height:470vh; }
.stage { position:sticky; top:0; height:100vh; height:100dvh; isolation:isolate; overflow:hidden; background:#000; }
.scene { position:absolute; inset:-1px; display:grid; place-items:center; pointer-events:none; will-change:opacity,filter,transform; }
.scene img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%; max-width:none; user-select:none; -webkit-user-drag:none; }
.front { z-index:1; opacity:1; transform-origin:50% 52%; }
.pov { z-index:2; opacity:0; transform-origin:50% 39%; }
.macro { z-index:3; opacity:0; transform-origin:63% 43%; filter:blur(1.2px) brightness(1.08); }
.whip { position:absolute; z-index:4; inset:-25%; pointer-events:none; opacity:0; transform:translateX(-100%); filter:blur(14px); background:repeating-linear-gradient(112deg,rgba(255,255,255,.02) 0 14px,rgba(255,255,255,.28) 16px 19px,rgba(8,8,8,.8) 22px 35px,rgba(255,255,255,.1) 37px 38px,rgba(0,0,0,.55) 43px 62px); mix-blend-mode:screen; }
.streak { position:absolute; z-index:5; inset:0; pointer-events:none; opacity:0; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.21) 49%,rgba(255,255,255,.03) 57%,transparent 78%); filter:blur(26px); }
.paper-wash { position:absolute; z-index:6; inset:0; background:#f7f6f2; opacity:0; pointer-events:none; }
.grain { position:absolute; z-index:7; inset:0; opacity:.15; pointer-events:none; mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E"); }
.site { position:absolute; z-index:8; inset:0; overflow:auto; background:var(--paper); color:var(--ink); opacity:0; pointer-events:none; transform:translateY(3%) scale(.982); transform-origin:center; will-change:opacity,transform; }
.site-inner { width:min(1440px,100%); min-height:100%; margin:auto; display:flex; flex-direction:column; }
.site-top { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:21px clamp(22px,5vw,80px); border-bottom:1px solid #ccc8c1; }
.brand-small { font-family:Georgia,'Times New Roman',serif; font-weight:800; letter-spacing:-.06em; font-size:25px; white-space:nowrap; }
.brand-small span { color:var(--red); }
.site-nav { display:flex; align-items:center; gap:clamp(14px,2.7vw,45px); flex-wrap:wrap; font-size:12px; text-transform:uppercase; letter-spacing:.095em; font-weight:700; }
.site-nav span { opacity:.65; }
.site-hero { flex:1; padding:clamp(36px,6vh,92px) clamp(22px,5vw,80px) 38px; display:grid; align-content:center; }
.eyebrow { display:flex; align-items:center; gap:13px; text-transform:uppercase; font-size:12px; font-weight:800; letter-spacing:.2em; color:#6b6b6b; }
.eyebrow::before { content:''; width:30px; height:3px; background:var(--red); }
.site-headline { margin:30px 0 14px; font-family:Georgia,'Times New Roman',serif; font-size:clamp(73px,10.4vw,188px); line-height:.79; letter-spacing:-.085em; font-weight:900; }
.site-headline span { display:block; color:var(--red); }
.site-sub { max-width:760px; margin:30px 0 0; font-size:clamp(17px,2vw,27px); line-height:1.35; font-weight:600; letter-spacing:-.035em; }
.site-lower { display:grid; grid-template-columns:1fr 2fr 1fr; gap:32px; border-top:1px solid #bdbab4; padding:22px clamp(22px,5vw,80px) 33px; align-items:start; }
.site-lower .number { color:var(--red); font-weight:800; font-size:14px; }
.site-lower p { margin:0; font-size:12px; line-height:1.5; max-width:400px; color:#555; }
.restart { justify-self:end; background:var(--ink); color:white; border:0; border-radius:0; padding:13px 21px; cursor:pointer; font-weight:800; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.restart:hover { background:var(--red); }
.hud { position:absolute; z-index:10; inset:0; pointer-events:none; color:#fff; font-size:11px; text-transform:uppercase; letter-spacing:.16em; font-weight:700; transition:opacity .2s; }
.skip { pointer-events:auto; position:absolute; top:clamp(14px,3vw,31px); right:clamp(14px,3vw,36px); color:#fff; border:1px solid rgba(255,255,255,.36); background:rgba(0,0,0,.44); padding:12px 17px; cursor:pointer; font-size:11px; text-transform:uppercase; letter-spacing:.13em; }
.skip:hover { background:rgba(255,255,255,.16); }
.hud-bottom { position:absolute; bottom:max(28px,env(safe-area-inset-bottom)); left:clamp(19px,3.5vw,48px); right:clamp(19px,3.5vw,48px); display:flex; align-items:flex-end; gap:26px; }
.progress { flex:1; height:1px; max-width:480px; margin-bottom:10px; background:rgba(255,255,255,.4); position:relative; }
.progress::after { content:''; position:absolute; inset:0 auto 0 0; width:calc(var(--p,0) * 100%); background:#c20a19; height:3px; top:-1px; }
.scroll-cue { white-space:nowrap; opacity:.7; margin-bottom:5px; }
.scroll-cue .arrow { color:#f3323e; margin-left:9px; font-size:17px; }
@media(max-width:700px) {
  .journey { height:400vh; }
  .hud-bottom { gap:12px; }
  .site-top { align-items:flex-start; flex-direction:column; }
  .site-nav { font-size:10px; gap:15px; }
  .site-hero { padding-top:42px; }
  .site-headline { font-size:clamp(58px,15vw,108px); margin:25px 0; }
  .site-sub { margin-top:24px; font-size:18px; }
  .site-lower { grid-template-columns:1fr auto; gap:16px; }
  .site-lower .number { grid-column:1 / -1; }
  .site-lower p { font-size:11px; }
  .restart { padding:11px 12px; font-size:10px; }
}
@media(prefers-reduced-motion:reduce) {
  .journey { height:100vh; }
  .front,.pov,.macro,.whip,.streak,.paper-wash,.grain,.hud { display:none!important; }
  .site { opacity:1!important; transform:none!important; pointer-events:auto!important; }
}