/* ============ TOKENS ============ */
:root{
  --void:#030303;
  --obsidian:#070605;
  --ink:#0c0a08;
  --char:#141110;
  --bone:#EEE3CF;
  --bone-dim:#b8ad95;
  --mute:#6b6052;
  --mute-2:#423a31;
  --champagne:#D8B785;
  --amber:#E9B766;
  --amber-deep:#c0853a;
  --ember:#8a4e1c;
  --line:rgba(216,183,133,.12);
  --line-strong:rgba(216,183,133,.32);

  --serif:"Cormorant Garamond","Times New Roman",serif;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--void);color:var(--bone);font-family:var(--sans);-webkit-font-smoothing:antialiased;font-weight:300;scroll-behavior:smooth}
body{overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--amber);color:var(--void)}

/* Film grain */
body::before{
  content:"";position:fixed;inset:-50%;pointer-events:none;z-index:120;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .92  0 0 0 0 .83  0 0 0 0 .68  0 0 0 .11 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.38;mix-blend-mode:overlay;
  animation:grainshift 2.4s steps(6) infinite;
}
@keyframes grainshift{
  0%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}50%{transform:translate(1%,-1%)}75%{transform:translate(-1%,2%)}100%{transform:translate(0,0)}
}
/* Vignette */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:100;
  background:radial-gradient(130% 85% at 50% 50%, transparent 45%, rgba(0,0,0,.72) 100%);
}

/* ============ TYPOGRAPHY ============ */
.serif{font-family:var(--serif);font-weight:300;letter-spacing:-.01em}
.serif em,.serif i{font-style:italic}
.mono{font-family:var(--mono);font-weight:400;letter-spacing:.26em;text-transform:uppercase}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--champagne)}
.caption{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}

/* ============ CHROME ============ */
.chrome{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:22px 36px;pointer-events:none;mix-blend-mode:normal}
.chrome>*{pointer-events:auto}
.mark{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-dim)}
.mark .dot{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 16px var(--amber);animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.1)}}
.mark b{color:var(--bone);font-weight:500;letter-spacing:.22em}
.chrome .center{font-family:var(--mono);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--mute)}
.cta-top{border:1px solid var(--line-strong);padding:11px 20px;font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--bone);transition:.5s cubic-bezier(.2,.7,.2,1);backdrop-filter:blur(6px)}
.cta-top:hover{background:var(--amber);color:var(--void);border-color:var(--amber);box-shadow:0 0 30px rgba(233,183,102,.3)}

/* Left: chapter rail */
.rail{position:fixed;left:28px;top:50%;transform:translateY(-50%);z-index:55;display:flex;flex-direction:column;gap:14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;color:var(--mute-2);text-transform:uppercase}
.rail a{display:flex;align-items:center;gap:10px;transition:.4s}
.rail a .bar{width:18px;height:1px;background:var(--line);transition:.4s}
.rail a span.num{opacity:.6}
.rail a.active,.rail a:hover{color:var(--bone)}
.rail a.active .bar{background:var(--amber);width:44px;box-shadow:0 0 14px var(--amber)}
.rail a.active span.num{opacity:1;color:var(--champagne)}

/* Right: progress thread */
.thread{position:fixed;right:26px;top:18vh;bottom:18vh;width:1px;background:var(--line);z-index:55}
.thread .fill{position:absolute;top:0;left:-1px;width:3px;background:linear-gradient(to bottom,transparent,var(--amber) 40%,var(--amber) 60%,transparent);height:0;box-shadow:0 0 20px var(--amber);transition:height .25s linear}
.thread .lbl{position:absolute;right:10px;top:-10px;font-family:var(--mono);font-size:9px;letter-spacing:.3em;color:var(--mute);white-space:nowrap;writing-mode:vertical-rl;transform:rotate(180deg)}

/* ============ SCENES ============ */
section.scene{position:relative;min-height:100vh;overflow:hidden}

/* Reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1.6s cubic-bezier(.2,.7,.2,1),transform 1.6s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.3s}.rv.d3{transition-delay:.48s}.rv.d4{transition-delay:.66s}.rv.d5{transition-delay:.84s}
/* Mask reveal (slides up from behind band) */
.mask{overflow:hidden;display:inline-block}
.mask > span{display:inline-block;transform:translateY(102%);transition:transform 1.4s cubic-bezier(.2,.75,.2,1)}
.mask.in > span{transform:translateY(0)}
.mask.d1>span{transition-delay:.1s}.mask.d2>span{transition-delay:.25s}.mask.d3>span{transition-delay:.4s}.mask.d4>span{transition-delay:.55s}

/* Full-bleed figure helper */
.figure{position:absolute;inset:0;overflow:hidden}
.figure img{width:100%;height:100%;object-fit:cover;object-position:center;will-change:transform,filter;transition:filter 1.8s ease}
.figure::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 90% at 50% 60%, transparent 30%, rgba(0,0,0,.55) 90%);pointer-events:none}
.figure.dark img{filter:brightness(.72) contrast(1.08) saturate(.95)}
.figure.darker img{filter:brightness(.55) contrast(1.12) saturate(.9)}

/* Soft light streaks decoration */
.beams{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.55}
.beams::before,.beams::after{content:"";position:absolute;top:-20%;bottom:-20%;width:1px;background:linear-gradient(180deg,transparent,var(--amber) 40%,var(--amber) 60%,transparent);filter:blur(.5px);opacity:.5}
.beams::before{left:8%}
.beams::after{right:8%}

/* =========================================================
   0 · THRESHOLD / LOADER (plays on load)
   ========================================================= */
#loader{position:fixed;inset:0;z-index:200;background:#000;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:30px;pointer-events:none;transition:opacity 1.4s ease 1.6s, visibility 0s linear 3s}
#loader.done{opacity:0;visibility:hidden}
#loader .lm{font-family:var(--mono);font-size:10px;letter-spacing:.5em;color:var(--mute);text-transform:uppercase}
#loader .lh{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(28px,4vw,52px);color:var(--bone);text-align:center;max-width:22ch;line-height:1.15;opacity:0;animation:lh 1.6s .4s forwards ease-out}
@keyframes lh{to{opacity:1}}
#loader .lbar{width:180px;height:1px;background:rgba(216,183,133,.15);overflow:hidden;position:relative}
#loader .lbar::after{content:"";position:absolute;left:0;top:0;height:100%;width:100%;background:linear-gradient(90deg,transparent,var(--amber),transparent);animation:lbar 2.8s ease-in-out forwards}
@keyframes lbar{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* =========================================================
   1 · HERO — CORRIDOR
   ========================================================= */
#hero{min-height:112vh;padding:0}
#hero .figure img{transform:scale(1.06)}
#hero.in .figure img{transform:scale(1);transition:transform 4s cubic-bezier(.2,.7,.2,1), filter 1.8s ease}
#hero .figure::before{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 70% at 50% 65%, transparent 10%, rgba(3,3,3,.55) 70%),
  linear-gradient(180deg, rgba(3,3,3,.72) 0%, rgba(3,3,3,0) 22%, rgba(3,3,3,0) 55%, rgba(3,3,3,.88) 100%);
  z-index:1}
.hero-body{position:relative;z-index:3;min-height:112vh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 7vw 110px}
.hero-eyebrow{display:flex;gap:18px;align-items:center;margin-bottom:36px;color:var(--champagne);font-family:var(--mono);font-size:10.5px;letter-spacing:.34em;text-transform:uppercase}
.hero-eyebrow .hr{width:54px;height:1px;background:var(--champagne);opacity:.6}
h1.hero-title{font-family:var(--serif);font-weight:300;font-size:clamp(56px,9vw,168px);line-height:.92;letter-spacing:-.025em;max-width:14ch}
h1.hero-title .it{font-style:italic;color:var(--champagne);display:inline-block}
.hero-sub{margin-top:40px;font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.5vw,24px);line-height:1.6;color:var(--bone-dim);max-width:52ch;font-weight:300}
.hero-bottom{margin-top:68px;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.hero-meta{display:flex;gap:52px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--bone-dim)}
.hero-meta span b{color:var(--bone);font-weight:400;display:block;margin-top:6px;font-family:var(--serif);font-style:italic;letter-spacing:.02em;font-size:18px;text-transform:none}
.enter-ind{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--bone-dim)}
.enter-ind .line{width:70px;height:1px;background:linear-gradient(90deg,transparent,var(--amber));position:relative;overflow:hidden}
.enter-ind .line::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--amber),transparent);animation:shim 2.6s ease-in-out infinite}
@keyframes shim{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* =========================================================
   2 · GATEWAY (full-bleed arch with threshold text)
   ========================================================= */
#gateway{height:100vh}
#gateway .figure img{transform:scale(1.1)}
#gateway.in .figure img{transform:scale(1.02);transition:transform 5s cubic-bezier(.2,.7,.2,1)}
#gateway .figure::before{content:"";position:absolute;inset:0;z-index:1;background:
  radial-gradient(40% 50% at 50% 40%, transparent 0%, rgba(0,0,0,.3) 55%, rgba(0,0,0,.85) 100%),
  linear-gradient(180deg,rgba(0,0,0,.7) 0%, transparent 30%, transparent 70%, rgba(0,0,0,.85) 100%)}
.gate-body{position:relative;z-index:2;height:100vh;display:flex;flex-direction:column;justify-content:space-between;padding:100px 7vw 80px}
.gate-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.gate-badge{font-family:var(--mono);font-size:10px;letter-spacing:.38em;color:var(--champagne);text-transform:uppercase}
.gate-center{text-align:center}
.gate-h{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(32px,3.6vw,56px);line-height:1.15;color:var(--bone);max-width:24ch;margin:0 auto;letter-spacing:-.005em}
.gate-h .amber{color:var(--amber)}
.gate-bottom{text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.4em;color:var(--mute);text-transform:uppercase}

/* =========================================================
   3 · COLLAGEN BELIEF
   ========================================================= */
#belief{padding:180px 7vw 160px;background:linear-gradient(180deg,var(--void) 0%,#050504 40%,var(--void) 100%)}
.belief-head{display:grid;grid-template-columns:1fr 1.4fr;gap:80px;align-items:end;margin-bottom:80px}
.act-num{font-family:var(--mono);font-size:10px;letter-spacing:.36em;color:var(--champagne);text-transform:uppercase}
.act-num .sl{color:var(--mute);margin:0 8px}
.act-title{font-family:var(--serif);font-weight:300;font-size:clamp(42px,5.4vw,94px);line-height:.98;letter-spacing:-.015em;max-width:20ch}
.act-title em{font-style:italic;color:var(--champagne)}
.belief-main{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center}
.belief-fig{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line)}
.belief-fig img{width:100%;height:100%;object-fit:cover;filter:brightness(.82) contrast(1.06);transition:transform 1.4s ease}
.belief-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.55));pointer-events:none}
.belief-fig .tag{position:absolute;bottom:18px;left:20px;font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--bone-dim);text-transform:uppercase;z-index:2}
.belief-fig .tag .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--amber);box-shadow:0 0 12px var(--amber);margin-right:10px;vertical-align:middle}
.belief-text h3{font-family:var(--serif);font-weight:300;font-size:clamp(28px,2.8vw,42px);line-height:1.12;color:var(--bone);margin-bottom:28px}
.belief-text h3 em{font-style:italic;color:var(--champagne)}
.belief-text p{font-family:var(--serif);font-size:18px;line-height:1.68;color:var(--bone-dim);margin-bottom:20px;font-weight:300;max-width:40ch}
.rule{width:52px;height:1px;background:var(--champagne);opacity:.7;margin:28px 0}

/* Timeline interlude */
.tl-wrap{margin-top:140px;border-top:1px solid var(--line);padding-top:60px}
.tl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:46px;flex-wrap:wrap}
.tl-head h4{font-family:var(--serif);font-weight:300;font-size:clamp(22px,2.2vw,36px);line-height:1.15;max-width:28ch}
.tl-head h4 em{font-style:italic;color:var(--champagne)}
.tl-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:0;border-top:1px solid var(--line)}
.tl-col{position:relative;padding:36px 14px 18px;border-left:1px solid var(--line);min-height:240px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px}
.tl-col:last-child{border-right:1px solid var(--line)}
.tl-bar{width:100%;background:linear-gradient(180deg,var(--amber) 10%,var(--ember));opacity:.85;transform-origin:bottom;transform:scaleY(0);transition:transform 1.8s cubic-bezier(.2,.7,.2,1);box-shadow:0 -6px 28px rgba(233,183,102,.22)}
.tl-col.in .tl-bar{transform:scaleY(1)}
.tl-val{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--bone)}
.tl-age{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--bone-dim);text-transform:uppercase}
.tl-note{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;color:var(--mute)}

/* =========================================================
   4 · FIRST CRACK (wrong problem wall)
   ========================================================= */
#crack{min-height:110vh}
#crack .figure img{transform:scale(1.04)}
#crack.in .figure img{transform:scale(1);transition:transform 5s cubic-bezier(.2,.7,.2,1)}
#crack .figure::before{content:"";position:absolute;inset:0;z-index:1;background:
  radial-gradient(70% 60% at 30% 50%, transparent 10%, rgba(3,3,3,.85) 85%)}
.crack-body{position:relative;z-index:2;min-height:110vh;display:flex;align-items:center;padding:0 7vw}
.crack-inner{max-width:740px}
.crack-q{font-family:var(--serif);font-weight:300;font-size:clamp(34px,4.4vw,72px);line-height:1.05;letter-spacing:-.015em;color:var(--bone);margin-bottom:42px}
.crack-q em{font-style:italic;color:var(--champagne)}
.crack-verdict{padding-left:22px;border-left:1px solid var(--champagne);font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.4vw,22px);line-height:1.6;color:var(--bone-dim);max-width:52ch}
.crack-verdict b{color:var(--champagne);font-weight:500;font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;display:block;margin-bottom:12px}

/* =========================================================
   5 · SILENT COLLAPSE — hallmarks chamber (full-bleed image + overlay list)
   ========================================================= */
#collapse{min-height:140vh}
#collapse .figure img{transform:scale(1.06)}
#collapse.in .figure img{transform:scale(1);transition:transform 6s cubic-bezier(.2,.7,.2,1)}
#collapse .figure::before{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(3,3,3,.88) 0%,rgba(3,3,3,.45) 22%,rgba(3,3,3,.35) 60%,rgba(3,3,3,.95) 100%)}
.collapse-body{position:relative;z-index:2;min-height:140vh;padding:160px 7vw 160px;display:flex;flex-direction:column;gap:80px}
.collapse-head{display:grid;grid-template-columns:1fr 1.6fr;gap:70px;align-items:end}
.collapse-head h2{font-family:var(--serif);font-weight:300;font-size:clamp(40px,5vw,84px);line-height:1.0;letter-spacing:-.015em;max-width:18ch}
.collapse-head h2 em{font-style:italic;color:var(--champagne)}
.collapse-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:auto}
.hm-group{padding:34px 26px;border:1px solid var(--line);background:rgba(6,5,4,.55);backdrop-filter:blur(6px);transition:.5s;position:relative;overflow:hidden}
.hm-group::before{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--amber),transparent);transform:scaleX(0);transition:transform .8s ease}
.hm-group:hover{border-color:rgba(216,183,133,.3);background:rgba(6,5,4,.75)}
.hm-group:hover::before{transform:scaleX(1)}
.hm-num{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--champagne);text-transform:uppercase;margin-bottom:20px}
.hm-group h3{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.22;color:var(--bone);margin-bottom:16px}
.hm-group h3 em{font-style:italic;color:var(--champagne)}
.hm-list{display:flex;flex-direction:column;gap:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;color:var(--bone-dim);text-transform:uppercase}
.hm-list li{list-style:none;display:flex;align-items:center;gap:10px}
.hm-list li::before{content:"";width:6px;height:1px;background:var(--champagne);flex-shrink:0}

/* =========================================================
   6 · INTERLUDE — portrait in haze
   ========================================================= */
#interlude{min-height:100vh;background:var(--void)}
.int-wrap{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.int-img{position:relative;overflow:hidden}
.int-img img{width:100%;height:100%;object-fit:cover;filter:brightness(.92) contrast(1.04) sepia(.15);transform:scale(1.04);transition:transform 5s ease}
.int-img.in img{transform:scale(1)}
.int-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 50%,rgba(3,3,3,.7))}
.int-text{display:flex;flex-direction:column;justify-content:center;padding:0 8vw;gap:32px}
.int-text .act-num{margin-bottom:8px}
.int-text h2{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(34px,3.8vw,60px);line-height:1.12;color:var(--bone);max-width:20ch}
.int-text h2 .amber{color:var(--champagne)}
.int-text p{font-family:var(--serif);font-size:20px;line-height:1.65;color:var(--bone-dim);max-width:40ch;font-weight:300}

/* =========================================================
   7 · ANTI-AGING vs LONGEVITY (philosophy split)
   ========================================================= */
#philosophy{min-height:110vh}
#philosophy .figure img{transform:scale(1.04)}
#philosophy.in .figure img{transform:scale(1);transition:transform 5s cubic-bezier(.2,.7,.2,1)}
#philosophy .figure::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(3,3,3,.9) 0%,rgba(3,3,3,.28) 30%,rgba(3,3,3,.28) 65%,rgba(3,3,3,.95) 100%)}
.phi-body{position:relative;z-index:2;min-height:110vh;padding:140px 7vw;display:flex;flex-direction:column;justify-content:space-between;gap:60px}
.phi-head{display:grid;grid-template-columns:1fr 1.5fr;gap:60px;align-items:end}
.phi-head h2{font-family:var(--serif);font-weight:300;font-size:clamp(40px,5vw,82px);line-height:1;letter-spacing:-.015em;max-width:22ch}
.phi-head h2 em{font-style:italic;color:var(--champagne)}
.phi-split{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line-strong);position:relative}
.phi-split::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:linear-gradient(180deg,var(--line-strong),var(--amber),var(--line-strong))}
.phi-col{padding:50px 44px;position:relative}
.phi-col .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--mute);margin-bottom:18px}
.phi-col.r .tag{color:var(--champagne)}
.phi-col h3{font-family:var(--serif);font-weight:300;font-size:clamp(30px,3.2vw,48px);line-height:1.05;margin-bottom:24px;letter-spacing:-.01em}
.phi-col.r h3{color:var(--bone)}
.phi-col.l h3{color:var(--bone-dim)}
.phi-col h3 em{font-style:italic}
.phi-col.r h3 em{color:var(--champagne)}
.phi-col .q{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.6;color:var(--bone-dim);max-width:34ch;font-weight:300}
.phi-col.l{opacity:.72}

/* =========================================================
   8 · PLACE WE IGNORED (full-bleed reveal)
   ========================================================= */
#place{min-height:105vh}
#place .figure img{transform:scale(1.08)}
#place.in .figure img{transform:scale(1.01);transition:transform 6s cubic-bezier(.2,.7,.2,1)}
#place .figure::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(60% 60% at 50% 55%, transparent 20%, rgba(0,0,0,.55) 80%)}
.place-body{position:relative;z-index:2;min-height:105vh;display:flex;align-items:center;justify-content:center;padding:140px 7vw;text-align:center}
.place-inner{max-width:1100px}
.place-eye{font-family:var(--mono);font-size:10.5px;letter-spacing:.45em;text-transform:uppercase;color:var(--champagne);margin-bottom:36px}
.place-eye .dotlil{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--amber);box-shadow:0 0 14px var(--amber);margin:0 16px;vertical-align:middle}
.place-h{font-family:var(--serif);font-weight:300;font-size:clamp(44px,6.4vw,112px);line-height:1;letter-spacing:-.025em}
.place-h em{font-style:italic;color:var(--champagne)}
.place-sub{margin-top:48px;font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.5vw,22px);line-height:1.7;color:var(--bone-dim);max-width:56ch;margin-left:auto;margin-right:auto;font-weight:300}

/* =========================================================
   9 · IMMERSION (visitor in network)
   ========================================================= */
#immersion{min-height:100vh}
#immersion .figure img{transform:scale(1.06)}
#immersion.in .figure img{transform:scale(1);transition:transform 6s cubic-bezier(.2,.7,.2,1)}
#immersion .figure::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.3) 35%,transparent 55%,rgba(0,0,0,.85) 100%)}
.imm-body{position:relative;z-index:2;min-height:100vh;display:flex;align-items:center;padding:0 7vw}
.imm-text{max-width:420px}
.imm-text .act-num{margin-bottom:18px}
.imm-text h2{font-family:var(--serif);font-weight:300;font-size:clamp(32px,3.6vw,54px);line-height:1.08;color:var(--bone);margin-bottom:26px;letter-spacing:-.01em}
.imm-text h2 em{font-style:italic;color:var(--champagne)}
.imm-text p{font-family:var(--serif);font-size:18px;line-height:1.65;color:var(--bone-dim);font-weight:300}

/* =========================================================
   10 · DEJ REVEAL — THE ALTAR (climax)
   ========================================================= */
#altar{position:relative;min-height:160vh;background:#000}
.altar-stage{position:sticky;top:0;height:100vh;overflow:hidden}
.altar-stage .figure img{transform:scale(1.02);filter:brightness(.52) contrast(1.1) saturate(1.05)}
.altar-stage.lit .figure img{transform:scale(1);filter:brightness(.88) contrast(1.08) saturate(1.05);transition:transform 4s ease, filter 3s ease}
.altar-overlay{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 7vw}
.altar-eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.5em;text-transform:uppercase;color:var(--champagne);margin-bottom:42px;display:flex;gap:18px;align-items:center;opacity:0;transition:opacity 1.2s ease}
.altar-overlay.show .altar-eyebrow{opacity:1}
.altar-eyebrow .d{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 20px var(--amber)}
.altar-h{font-family:var(--serif);font-weight:300;font-size:clamp(100px,18vw,320px);line-height:.82;letter-spacing:-.04em;color:var(--bone);text-shadow:0 0 60px rgba(233,183,102,.45);opacity:0;transform:translateY(28px);transition:opacity 1.8s cubic-bezier(.2,.7,.2,1) .2s, transform 1.8s cubic-bezier(.2,.7,.2,1) .2s}
.altar-overlay.show .altar-h{opacity:1;transform:none}
.altar-h .dot{color:var(--amber)}
.altar-sub{margin-top:44px;font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.9vw,30px);line-height:1.5;color:var(--champagne);max-width:34ch;opacity:0;transform:translateY(18px);transition:opacity 1.4s ease .8s, transform 1.4s ease .8s}
.altar-overlay.show .altar-sub{opacity:1;transform:none}
.altar-meta{margin-top:56px;display:flex;gap:60px;justify-content:center;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;color:var(--bone-dim);text-transform:uppercase;opacity:0;transition:opacity 1s ease 1.3s}
.altar-overlay.show .altar-meta{opacity:1}
.altar-meta span b{color:var(--champagne);font-family:var(--serif);font-style:italic;font-size:18px;letter-spacing:.02em;text-transform:none;display:block;margin-top:6px;font-weight:400}

/* Altar gradients for readability */
.altar-stage .figure::before{content:"";position:absolute;inset:0;z-index:1;background:
  radial-gradient(55% 70% at 50% 50%, transparent 0%, rgba(0,0,0,.45) 50%, rgba(0,0,0,.85) 100%)}

/* DEJ context block after altar */
.altar-ctx{position:relative;z-index:2;padding:140px 7vw 180px;background:linear-gradient(180deg,var(--void) 0%,#050402 100%)}
.ctx-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.ctx-img{position:relative;aspect-ratio:5/4;overflow:hidden;border:1px solid var(--line)}
.ctx-img img{width:100%;height:100%;object-fit:cover;filter:brightness(.82) contrast(1.06)}
.ctx-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.6));pointer-events:none}
.ctx-text .eyebrow{margin-bottom:26px}
.ctx-text h3{font-family:var(--serif);font-weight:300;font-size:clamp(32px,3.4vw,52px);line-height:1.1;color:var(--bone);margin-bottom:32px;letter-spacing:-.01em}
.ctx-text h3 em{font-style:italic;color:var(--champagne)}
.ctx-text blockquote{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.65;color:var(--bone-dim);padding-left:22px;border-left:1px solid var(--champagne);max-width:42ch;font-weight:300}
.ctx-layers{margin-top:38px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.ctx-layers b{color:var(--champagne);font-family:var(--serif);font-style:italic;font-size:16px;letter-spacing:.02em;text-transform:none;font-weight:400;display:block;margin-top:6px}
.ctx-layers .active{color:var(--amber)}
.ctx-layers .active b{color:var(--amber)}

/* =========================================================
   11 · ABC+E (precision answer)
   ========================================================= */
#abce{padding:180px 7vw 180px;background:#030303;position:relative;overflow:hidden}
#abce::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 50% at 50% 20%, rgba(233,183,102,.07), transparent 70%);pointer-events:none}
.abce-head{display:grid;grid-template-columns:1.2fr .8fr;gap:80px;align-items:end;margin-bottom:80px;position:relative;z-index:2}
.abce-head h2{font-family:var(--serif);font-weight:300;font-size:clamp(38px,4.6vw,78px);line-height:1.02;letter-spacing:-.015em;max-width:20ch}
.abce-head h2 em{font-style:italic;color:var(--champagne)}
.abce-image{position:relative;aspect-ratio:16/9;margin-bottom:80px;overflow:hidden;border:1px solid var(--line)}
.abce-image img{width:100%;height:100%;object-fit:cover;filter:brightness(.88) contrast(1.06)}
.abce-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 65%,rgba(0,0,0,.55))}
.abce-image .tag{position:absolute;left:24px;bottom:18px;font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--bone-dim);text-transform:uppercase;z-index:2}
.formula{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);position:relative;z-index:2}
.mol{background:var(--void);padding:48px 26px 42px;display:flex;flex-direction:column;gap:22px;min-height:300px;position:relative;transition:background .6s}
.mol:hover{background:#080604}
.mol .mol-idx{position:absolute;top:20px;right:22px;font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--mute);text-transform:uppercase}
.mol .sym{font-family:var(--serif);font-weight:300;font-size:68px;line-height:.85;color:var(--champagne);text-shadow:0 0 30px rgba(233,183,102,.25)}
.mol h4{font-family:var(--serif);font-weight:400;font-size:18px;line-height:1.28;color:var(--bone)}
.mol h4 em{font-style:italic}
.mol p{font-family:var(--sans);font-size:12.5px;line-height:1.65;color:var(--bone-dim);font-weight:300}

.manifesto-wall{margin-top:140px;display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:center;position:relative;z-index:2}
.mw-img{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line)}
.mw-img img{width:100%;height:100%;object-fit:cover;filter:brightness(.84) contrast(1.08)}
.mw-img::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 60%, transparent 40%, rgba(0,0,0,.55))}
.mw-text .eyebrow{margin-bottom:22px}
.mw-text blockquote{font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.4vw,38px);line-height:1.32;color:var(--bone);font-style:italic;border-left:1px solid var(--champagne);padding-left:30px;margin-bottom:24px}
.mw-text blockquote em{color:var(--champagne);font-style:italic}
.mw-text cite{font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;color:var(--mute);text-transform:uppercase;font-style:normal}

/* =========================================================
   12 · EVENT EXPERIENCE (product table as atmosphere)
   ========================================================= */
#experience{min-height:110vh;background:#040302}
#experience .figure img{transform:scale(1.05)}
#experience.in .figure img{transform:scale(1);transition:transform 6s cubic-bezier(.2,.7,.2,1)}
#experience .figure::before{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.25) 25%,rgba(0,0,0,.35) 65%,rgba(0,0,0,.92) 100%)}
.exp-body{position:relative;z-index:2;min-height:110vh;padding:150px 7vw;display:flex;flex-direction:column;justify-content:space-between;gap:80px}
.exp-head h2{font-family:var(--serif);font-weight:300;font-size:clamp(40px,5vw,82px);line-height:1;letter-spacing:-.015em;max-width:22ch}
.exp-head h2 em{font-style:italic;color:var(--champagne)}
.exp-head p{font-family:var(--serif);font-size:19px;line-height:1.65;color:var(--bone-dim);max-width:48ch;margin-top:28px;font-weight:300}
.exp-rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.room{padding:36px 30px;border:1px solid var(--line);background:rgba(6,5,4,.55);backdrop-filter:blur(8px);transition:.5s;position:relative;overflow:hidden}
.room:hover{border-color:rgba(216,183,133,.35);transform:translateY(-6px);background:rgba(6,5,4,.8)}
.room-num{font-family:var(--mono);font-size:10px;letter-spacing:.36em;color:var(--champagne);text-transform:uppercase;margin-bottom:80px}
.room h4{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.22;color:var(--bone);margin-bottom:14px}
.room h4 em{font-style:italic;color:var(--champagne)}
.room p{font-family:var(--sans);font-size:13px;line-height:1.6;color:var(--bone-dim)}

/* =========================================================
   13 · REVISION (brand credibility wall)
   ========================================================= */
#revision{padding:180px 7vw;background:linear-gradient(180deg,#040302,var(--void))}
.rev-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:100px;align-items:center}
.rev-img{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line)}
.rev-img img{width:100%;height:100%;object-fit:cover;filter:brightness(.9) contrast(1.04)}
.rev-img::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,transparent 45%,rgba(0,0,0,.5))}
.rev-text .eyebrow{margin-bottom:22px}
.rev-text h2{font-family:var(--serif);font-weight:300;font-size:clamp(40px,4.6vw,74px);line-height:1.02;letter-spacing:-.015em;margin-bottom:36px}
.rev-text h2 em{font-style:italic;color:var(--champagne)}
.rev-text p{font-family:var(--serif);font-size:20px;line-height:1.62;color:var(--bone-dim);font-weight:300;margin-bottom:22px;max-width:52ch}
.rev-stats{margin-top:60px;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.st{border-top:1px solid var(--line);padding-top:22px}
.st .n{font-family:var(--serif);font-weight:300;font-size:clamp(34px,3.2vw,54px);line-height:1;color:var(--bone);letter-spacing:-.02em}
.st .n em{color:var(--champagne);font-style:italic}
.st .l{margin-top:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;color:var(--mute);text-transform:uppercase;line-height:1.5}

/* =========================================================
   14 · FINALE (rare invitation)
   ========================================================= */
#finale{position:relative;min-height:115vh;background:#000;overflow:hidden}
#finale .figure img{transform:scale(1.08);filter:brightness(.58) contrast(1.12) saturate(1)}
#finale.in .figure img{transform:scale(1.02);filter:brightness(.75) contrast(1.1);transition:transform 8s cubic-bezier(.2,.7,.2,1), filter 4s ease}
#finale .figure::before{content:"";position:absolute;inset:0;z-index:1;background:
  radial-gradient(60% 70% at 50% 60%, transparent 10%, rgba(0,0,0,.65) 75%),
  linear-gradient(180deg,rgba(0,0,0,.7),transparent 30%,transparent 70%,rgba(0,0,0,.9))}
.fin-body{position:relative;z-index:2;min-height:115vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:140px 7vw}
.fin-eye{font-family:var(--mono);font-size:10.5px;letter-spacing:.5em;color:var(--champagne);text-transform:uppercase;margin-bottom:44px}
.fin-h{font-family:var(--serif);font-weight:300;font-size:clamp(60px,9vw,172px);line-height:.92;letter-spacing:-.025em}
.fin-h em{font-style:italic;color:var(--champagne)}
.fin-sub{margin-top:40px;font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.7vw,28px);line-height:1.55;color:var(--bone);max-width:42ch;font-weight:300}
.fin-meta{margin-top:90px;display:grid;grid-template-columns:repeat(4,auto);gap:80px;justify-content:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;color:var(--bone-dim);text-transform:uppercase}
.fin-meta span b{display:block;margin-top:8px;font-family:var(--serif);font-style:italic;color:var(--bone);font-size:20px;letter-spacing:.02em;text-transform:none;font-weight:400}
.fin-cta{margin-top:100px;display:inline-flex;align-items:center;gap:24px;padding:26px 56px;border:1px solid var(--champagne);background:transparent;color:var(--bone);font-family:var(--mono);font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;cursor:pointer;transition:.6s cubic-bezier(.2,.7,.2,1);position:relative;overflow:hidden}
.fin-cta::before{content:"";position:absolute;inset:0;background:var(--amber);transform:translateY(100%);transition:transform .7s cubic-bezier(.3,.7,.2,1);z-index:-1}
.fin-cta:hover{color:var(--void);border-color:var(--amber);box-shadow:0 0 50px rgba(233,183,102,.3)}
.fin-cta:hover::before{transform:translateY(0)}
.fin-cta .arr{width:32px;height:1px;background:currentColor;position:relative;transition:.5s}
.fin-cta .arr::after{content:"";position:absolute;right:0;top:-4px;width:9px;height:9px;border-right:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg)}
.fin-cta:hover .arr{width:48px}
.fin-note{margin-top:26px;font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;color:var(--mute);text-transform:uppercase}

footer.foot{padding:50px 7vw 44px;background:#000;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;color:var(--mute);text-transform:uppercase;flex-wrap:wrap;gap:16px}

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
  .rail,.thread{display:none}
  .belief-head,.belief-main,.collapse-head,.phi-head,.abce-head,.manifesto-wall,.rev-grid,.ctx-grid,.int-wrap{grid-template-columns:1fr !important;gap:40px !important}
  .collapse-groups,.exp-rooms{grid-template-columns:1fr}
  .formula{grid-template-columns:repeat(2,1fr)}
  .rev-stats{grid-template-columns:repeat(2,1fr)}
  .phi-split{grid-template-columns:1fr}
  .phi-split::before{left:0;top:50%;right:0;width:100%;height:1px;background:linear-gradient(90deg,var(--line-strong),var(--amber),var(--line-strong))}
  .fin-meta{grid-template-columns:repeat(2,auto);gap:40px}
  .tl-grid{grid-template-columns:repeat(7,1fr);overflow-x:auto}
}
@media (max-width:640px){
  .chrome{padding:14px 18px}
  .chrome .center{display:none}
  section.scene{padding-left:5vw;padding-right:5vw}
  .hero-body,.crack-body,.collapse-body,.phi-body,.place-body,.imm-body,.exp-body,.fin-body{padding-left:5vw;padding-right:5vw}
  .formula,.rev-stats{grid-template-columns:1fr}
  .hero-meta{gap:28px}
  .fin-meta{grid-template-columns:1fr;gap:24px}
}