/* What is "Design?" — interactive deck styles
   Coordinate space is 1920x1080; #stage is scaled to fit the viewport. */

:root{
  --tnudge: -0.13em;            /* cap-height alignment for text blocks */
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background:#0c0c0c;
  font-family:var(--sans);
  overflow:hidden;
  color:#111;
}

/* ---- viewport / stage ----
   #bleed = full-viewport background layer (images bleed edge-to-edge, cover).
   #viewport/#stage = content, scaled to CONTAIN (never cropped), transparent so #bleed shows through. */
#bleed{ position:fixed; inset:0; z-index:0; overflow:hidden; background:#000; }
#bleed>*{ position:absolute; inset:0; }
#bleed .bleed-img{ width:100%; height:100%; object-fit:cover; object-position:center; }
#viewport{
  position:fixed; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
#frame{ position:relative; overflow:hidden; }
#stage{
  position:absolute; top:0; left:0;
  width:1920px; height:1080px;
  transform-origin:top left;
  overflow:hidden;
  background:transparent;
}

/* ---- image layer ---- */
.layer-img{ position:absolute; inset:0; }
.layer-img img{
  position:absolute;
  display:block;
  user-select:none; -webkit-user-drag:none;
}

/* ---- "Orders of Design" SVG (slide.anim==='orders') — draws each order then the complexity axis ---- */
.orders-svg text{ font-family:var(--sans); }
.orders-svg .ot-title{ fill:#f2f2f2; font-weight:700; font-size:13px; letter-spacing:.3px; }
.orders-svg .ot-sub{ fill:rgba(255,255,255,.55); font-weight:400; font-size:7.5px; }
.orders-svg .ot-brk{ fill:rgba(255,255,255,.62); font-weight:600; font-size:7px; letter-spacing:1.2px; }
.orders-svg .oh{ fill:#ffffff; font-weight:700; font-size:10px; letter-spacing:-0.3px; }
.orders-svg .osub{ fill:rgba(255,255,255,.5); font-weight:400; font-size:6.8px; }
.orders-svg .oord{ fill:#ffffff; font-weight:700; font-size:11px; letter-spacing:-0.2px; }
.orders-svg .okw{ fill:rgba(255,255,255,.88); font-weight:600; font-size:9.5px; }
.orders-svg .onote{ fill:rgba(255,255,255,.45); font-weight:400; font-style:italic; font-size:6.6px; }
.orders-svg .obrk{ stroke:rgba(255,255,255,.32); stroke-width:.6; }
.orders-svg .obrk-d{ stroke-dasharray:4 3; }
.orders-svg .odiv{ stroke:rgba(255,255,255,.22); stroke-width:.6; }
.orders-svg .odiv-d{ stroke-dasharray:4 3; }
.orders-svg .obreak{ stroke:rgba(255,255,255,.85); stroke-width:1.1; }
.orders-svg .obase{ stroke:rgba(255,255,255,.35); stroke-width:.6; }
.orders-svg .oaxis{ stroke:rgba(255,255,255,.4); stroke-width:.8; stroke-linejoin:round; stroke-linecap:round; }
.orders-svg .oaxis-d{ stroke-dasharray:8 5; }
.orders-svg .oell{ fill:none; stroke:rgba(255,255,255,.24); stroke-width:.6; }
.orders-svg .oell-s{ stroke-dasharray:100; stroke-dashoffset:100; }
.orders-svg .og *, .orders-svg .ocol .oh, .orders-svg .ocol .osub, .orders-svg .ocol .oord, .orders-svg .ocol .okw, .orders-svg .ocol .odiv, .orders-svg .ocol .oell-d, .orders-svg .obreak, .orders-svg .oend *{ opacity:0; animation:ofade .55s ease var(--d) both; }
.orders-svg .ocol .oell-s{ animation:odraw .8s ease-out var(--d) both; }
@keyframes ofade{ from{opacity:0} to{opacity:1} }
@keyframes odraw{ from{stroke-dashoffset:100} to{stroke-dashoffset:0} }
/* reverse entry (from #8): show the whole diagram at once, no staggered draw-in */
.orders-svg.nodraw *{ animation:none!important; opacity:1!important; stroke-dashoffset:0!important; }
@media (prefers-reduced-motion: reduce){ .orders-svg *{ animation:none!important; opacity:1!important; stroke-dashoffset:0!important; } }

/* ---- text blocks ---- */
.tb{
  position:absolute;
  font-family:var(--sans);
  white-space:normal;
  transform:translateY(var(--tnudge));
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.tb .u{ font-size:.30em; font-weight:500; letter-spacing:.01em; }
.tb b{ font-weight:700; }
.tb i{ font-style:italic; }

/* ---- firelight FX (opt-in via slide.fx==='firelight') ----
   A radial light field centred on the flame: transparent over the fire
   (always bright), darkening with distance (closer elements stay brighter).
   Two layers on different periods so the flicker never looks like a loop. */
.fx-firelight, .fx-firelight-glow{
  position:absolute; inset:0; pointer-events:none;
}
.fx-firelight{
  background:radial-gradient(128% 114% at 58% 80%,
    rgba(0,0,0,0)    0%,
    rgba(0,0,0,0)    8%,
    rgba(6,3,0,.58)  26%,
    rgba(1,0,0,.85)  58%,
    rgba(0,0,0,.97) 100%);
  animation:fl-dark 6.1s ease-in-out infinite;
  will-change:opacity;
}
.fx-firelight-glow{
  background:radial-gradient(72% 62% at 58% 80%,
    rgba(255,150,45,.42) 0%,
    rgba(255,110,20,.20) 28%,
    rgba(255,80,0,0)     56%);
  mix-blend-mode:screen;
  transform-origin:58% 80%;
  animation:fl-glow 4.3s ease-in-out infinite;
  will-change:opacity, transform;
}
@keyframes fl-dark{
  0%{opacity:.84} 8%{opacity:.62} 15%{opacity:.97} 24%{opacity:.72}
  33%{opacity:.56} 44%{opacity:.93} 56%{opacity:.68} 67%{opacity:1}
  78%{opacity:.60} 89%{opacity:.88} 100%{opacity:.84}
}
@keyframes fl-glow{
  0%{opacity:.55; transform:scale(1.00)}
  11%{opacity:.86; transform:scale(1.05)}
  22%{opacity:.44; transform:scale(0.97)}
  35%{opacity:.78; transform:scale(1.03)}
  48%{opacity:.93; transform:scale(1.07)}
  60%{opacity:.49; transform:scale(0.98)}
  73%{opacity:.82; transform:scale(1.04)}
  86%{opacity:.58; transform:scale(1.00)}
  100%{opacity:.55; transform:scale(1.00)}
}
@media (prefers-reduced-motion: reduce){
  .fx-firelight{ animation:none; opacity:.76; }
  .fx-firelight-glow{ animation:none; opacity:.6; }
}

/* ---- interactive epoch ring (slide.interactive==='ring') ---- */
.ring-wrap{ position:absolute; inset:0; overflow:hidden; font-family:var(--sans); color:#fff; background:transparent; }
.ring-tint{ position:absolute; inset:0; pointer-events:none; background-color:#4b2e83;
  -webkit-mask-image:radial-gradient(135% 125% at 22% 12%, #000 0%, rgba(0,0,0,.7) 38%, transparent 78%);
  mask-image:radial-gradient(135% 125% at 22% 12%, #000 0%, rgba(0,0,0,.7) 38%, transparent 78%);
  opacity:.92; transition:background-color .7s ease; }
.ring-svg{ position:absolute; inset:0; width:1920px; height:1080px; pointer-events:none; }
.ring-svg .ring-hit{ pointer-events:all; cursor:pointer; }
.ring-head{ position:absolute; left:72px; top:540px; transform:translateY(-50%); }
.ring-kicker{ font-size:20px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.ring-date{ position:absolute; right:944px; top:540px; transform:translateY(-50%); text-align:right; font-size:44px; font-weight:600; white-space:nowrap; letter-spacing:-0.01em; }
.ring-info{ position:absolute; left:1184px; top:540px; transform:translateY(-50%); width:680px; }
.ring-ikick{ font-size:18px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:14px; }
.ring-ibn{ margin-top:12px; font-size:15px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.ring-ititle{ font-size:48px; font-weight:800; line-height:1.08; }
.ring-idesc{ margin-top:20px; font-size:31px; line-height:1.4; color:rgba(255,255,255,.82); }
.ring-inum{ margin-top:28px; font-size:17px; font-weight:600; letter-spacing:.18em; color:rgba(255,255,255,.42); }
.ring-photo{ position:absolute; inset:0; opacity:.3; }
.ring-photo img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
/* firelight FX over the backdrop (fire scenes only) — reuses fl-dark / fl-glow */
.ring-fire, .ring-fire-glow{ position:absolute; inset:0; pointer-events:none; display:none; }
.ring-fire{
  background:radial-gradient(130% 116% at var(--fx,40% 58%),
    rgba(0,0,0,0) 0%, rgba(0,0,0,0) 14%, rgba(4,2,0,.30) 42%, rgba(0,0,0,.60) 100%);
  animation:fl-dark 6.1s ease-in-out infinite; will-change:opacity; }
.ring-fire-glow{
  background:radial-gradient(58% 50% at var(--fx,40% 58%),
    rgba(255,150,45,.50) 0%, rgba(255,110,20,.24) 30%, rgba(255,80,0,0) 58%);
  mix-blend-mode:screen; transform-origin:var(--fx,40% 58%);
  animation:fl-glow 4.3s ease-in-out infinite; will-change:opacity, transform; }
@media (prefers-reduced-motion: reduce){ .ring-fire{ animation:none; opacity:.5; } .ring-fire-glow{ animation:none; opacity:.55; } }

/* Big Bang (slide.bb) — plays ONCE: quiet → implode → BOOM → matter expands & decelerates → spinning Earth + orbiting Moon. Black like space. */
.bb{ position:absolute; inset:0; pointer-events:none; overflow:hidden; display:none; background:#000; }
.bb-core,.bb-shock,.bb-matter{ position:absolute; left:50%; top:50%; border-radius:50%; transform:scale(0); }
.bb-core{ width:520px; height:520px; margin:-260px 0 0 -260px;
  background:radial-gradient(circle, #ffffff 0%, #ffffff 8%, #ffe6a8 20%, #ff9a3c 40%, rgba(255,70,0,.35) 60%, rgba(255,40,0,0) 75%);
  animation:bb-core 6s ease-out 1 forwards; will-change:transform,opacity; }
.bb-shock{ width:360px; height:360px; margin:-180px 0 0 -180px;
  border:4px solid rgba(255,235,205,.95); box-shadow:0 0 40px rgba(255,200,140,.5);
  animation:bb-shock 6s cubic-bezier(.12,.7,.25,1) 1 forwards; will-change:transform,opacity; }
.bb-shock2{ border-color:rgba(255,170,110,.7); animation-delay:.4s; }
.bb-matter{ width:1700px; height:1700px; margin:-850px 0 0 -850px; overflow:hidden; mix-blend-mode:screen;
  animation:bb-matter 6.5s cubic-bezier(.1,.62,.2,1) 1 forwards; will-change:transform,opacity; }
.bb-matter img{ width:100%; height:100%; object-fit:cover; display:block; }
.bb-flash{ position:absolute; inset:0; opacity:0;
  background:radial-gradient(circle at 50% 50%, #fff 0%, rgba(255,255,255,.7) 25%, rgba(160,190,255,.25) 50%, rgba(255,255,255,0) 66%);
  animation:bb-flash 6s ease-out 1 forwards; will-change:opacity; }
@keyframes bb-core{ 0%{transform:scale(0);opacity:0} 10%{transform:scale(.02);opacity:.12} 17%{transform:scale(.006);opacity:.95} 21%{transform:scale(.55);opacity:1} 45%{transform:scale(1.7);opacity:.5} 70%{transform:scale(2.4);opacity:0} 100%{transform:scale(2.4);opacity:0} }
@keyframes bb-shock{ 0%,19%{transform:scale(0);opacity:0} 22%{transform:scale(.08);opacity:1} 60%{transform:scale(3.2);opacity:.15} 80%{transform:scale(4.2);opacity:0} 100%{opacity:0} }
@keyframes bb-matter{ 0%,20%{transform:scale(0);opacity:0} 32%{opacity:.7} 72%{transform:scale(1.5);opacity:.32} 92%{transform:scale(1.78);opacity:0} 100%{transform:scale(1.8);opacity:0} }
@keyframes bb-flash{ 0%,18%{opacity:0} 21%{opacity:.92} 28%{opacity:0} 100%{opacity:0} }

/* end scene: spinning Earth + orbiting Moon, sun from upper-left */
.bb-space{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; animation:bb-space 6.5s ease-out 1 forwards; }
@keyframes bb-space{ 0%,60%{opacity:0} 84%,100%{opacity:1} }
.bb-earth{ position:relative; width:300px; height:300px; border-radius:50%; overflow:hidden;
  box-shadow:0 0 70px 10px rgba(90,150,255,.30), inset -44px -34px 90px 14px rgba(0,0,8,.88); }
.bb-earth-surface{ position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(60px 44px at 80px 35%, rgba(70,150,90,.95), transparent 70%),
    radial-gradient(90px 60px at 300px 62%, rgba(80,160,95,.9), transparent 70%),
    radial-gradient(50px 70px at 470px 30%, rgba(95,150,80,.9), transparent 70%),
    radial-gradient(70px 46px at 560px 55%, rgba(70,150,90,.9), transparent 72%),
    linear-gradient(#1b4a8c,#16407a);
  background-size:600px 100%,600px 100%,600px 100%,600px 100%,100% 100%;
  background-repeat:repeat-x; animation:bb-spin 26s linear infinite; }
@keyframes bb-spin{ from{background-position:0 0,0 0,0 0,0 0,0 0} to{background-position:-600px 0,-600px 0,-600px 0,-600px 0,0 0} }
.bb-earth-light{ position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 30% 28%, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 40%),
             linear-gradient(125deg, rgba(0,0,0,0) 40%, rgba(0,0,8,.8) 74%); }
.bb-earth-atmo{ position:absolute; inset:-5px; border-radius:50%; box-shadow:inset 0 0 22px rgba(140,190,255,.5); }
.bb-orbit{ position:absolute; left:50%; top:50%; width:560px; height:560px; margin:-280px 0 0 -280px; border-radius:50%; animation:bb-orbit 16s linear infinite; }
.bb-moon{ position:absolute; left:50%; top:-4px; width:40px; height:40px; margin-left:-20px; border-radius:50%;
  background:radial-gradient(circle at 32% 32%, #e8e8ec, #9a9aa2 60%, #45454d 100%);
  box-shadow:0 0 10px rgba(180,190,210,.4); animation:bb-moon-rev 16s linear infinite; }
@keyframes bb-orbit{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes bb-moon-rev{ from{transform:rotate(0)} to{transform:rotate(-360deg)} }
@media (prefers-reduced-motion: reduce){ .bb-core,.bb-shock,.bb-flash,.bb-matter{ animation:none; opacity:0 } .bb-space{ animation:none; opacity:1 } .bb-earth-surface,.bb-orbit,.bb-moon{ animation:none } }
.ring-ph-label{ font-size:18px; font-weight:600; line-height:1.4; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.6); text-align:center; }
.ring-labels{ position:absolute; inset:0; pointer-events:none; }
.ring-nlabel{ position:absolute; font-size:25px; font-weight:600; color:rgba(255,255,255,.85); white-space:nowrap; }
.ring-nlabel.epoch{ font-size:30px; font-weight:800; color:#fff; }
.ring-photo.show{ animation:ringfadeBg .5s ease both; }
.ring-date.show,.ring-info.show{ animation:ringfadeC .34s ease both; }
@keyframes ringfade{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
@keyframes ringfadeBg{ from{opacity:0;} to{opacity:.3;} }
@keyframes ringfadeC{ from{opacity:0; transform:translateY(calc(-50% + 12px));} to{opacity:1; transform:translateY(-50%);} }
@media (prefers-reduced-motion: reduce){ .ring-date.show,.ring-info.show,.ring-photo.show{ animation:none; } }

/* ---- navigation chrome ---- */
#nav{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  display:none; align-items:center; gap:14px;   /* hidden — navigate with arrow keys / scroll */
  background:rgba(20,20,20,.82); color:#fff;
  padding:8px 14px; border-radius:999px;
  font:500 13px/1 var(--sans);
  z-index:50; backdrop-filter:blur(6px);
  opacity:.25; transition:opacity .2s;
}
#nav:hover{ opacity:1; }
#nav button{
  appearance:none; border:0; cursor:pointer;
  background:transparent; color:#fff;
  font:600 16px/1 var(--sans); padding:6px 8px; border-radius:8px;
}
#nav button:hover{ background:rgba(255,255,255,.14); }
#counter{ min-width:64px; text-align:center; font-variant-numeric:tabular-nums; }
#nav .sep{ width:1px; height:18px; background:rgba(255,255,255,.22); }
#nav .mode{ font-size:12px; opacity:.7; }
body.edit #nav .mode{ opacity:1; color:#ffd166; }

/* hint */
#hint{
  position:fixed; right:14px; top:12px; z-index:50;
  font:500 12px/1.4 var(--sans); color:rgba(255,255,255,.55);
  text-align:right; pointer-events:none;
}

/* ---- edit mode ---- */
body.edit .tb{ outline:1px dashed rgba(40,140,255,.35); outline-offset:2px; cursor:text; }
body.edit .tb:hover{ outline-color:rgba(40,140,255,.85); }
body.edit .tb:focus{ outline:1px solid #2a8cff; background:rgba(40,140,255,.06); }

.imgbtn{
  position:absolute; z-index:30; display:none;
  appearance:none; border:0; cursor:pointer;
  background:rgba(20,20,20,.85); color:#fff;
  font:600 12px/1 var(--sans); padding:6px 9px; border-radius:7px;
}
body.edit .layer-img:hover .imgbtn{ display:block; }

/* ---- overview grid ---- */
#overview{
  position:fixed; inset:0; z-index:80; display:none;
  background:#111; padding:28px; overflow:auto;
}
#overview.on{ display:block; }
#ovgrid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px;
}
.ovcell{
  position:relative; aspect-ratio:16/9; border-radius:8px; overflow:hidden;
  cursor:pointer; background:#fff; outline:2px solid transparent;
}
.ovcell:hover{ outline-color:#2a8cff; }
.ovcell .mini{
  position:absolute; top:0; left:0; width:1920px; height:1080px;
  transform-origin:top left; pointer-events:none;
}
.ovcell .num{
  position:absolute; left:8px; bottom:6px; z-index:2;
  font:700 12px/1 var(--sans); color:#fff;
  background:rgba(0,0,0,.55); padding:3px 6px; border-radius:5px;
}
#overview h2{ color:#fff; font:600 15px/1 var(--sans); margin-bottom:16px; opacity:.7; }

/* ---- "Design Accelerates" chart: draw-on (speed ∝ time spanned), staggered reveals ---- */
@keyframes accdraw{
  0%{stroke-dashoffset:1000} 33%{stroke-dashoffset:844} 53%{stroke-dashoffset:646}
  67%{stroke-dashoffset:460} 78%{stroke-dashoffset:341} 87%{stroke-dashoffset:228}
  94%{stroke-dashoffset:132} 100%{stroke-dashoffset:0}
}
@keyframes accfade{ from{opacity:0} to{opacity:1} }
.acc-line{ stroke-dasharray:1000; stroke-dashoffset:1000; animation:accdraw 4.6s linear forwards; }
.acc-area{ opacity:0; animation:accfade 1.3s ease 3.1s both; }
.acc-fut{ opacity:0; animation:accfade .8s ease 4.5s both; }
.acc-zones{ opacity:0; animation:accfade 1s ease .2s both; }
.acc-node{ opacity:0; animation:accfade .5s ease var(--d) both; }
@media (prefers-reduced-motion: reduce){
  .acc-line,.acc-area,.acc-fut,.acc-zones,.acc-node{ animation:none !important; opacity:1 !important; stroke-dashoffset:0 !important; }
}

/* ---- Jevons paradox chart (n:203): cost/unit collapses while total consumed floods ---- */
.jv-svg text{ font-family:var(--sans); }
@keyframes jvdraw{ to{ stroke-dashoffset:0; } }
@keyframes jvfade{ from{opacity:0} to{opacity:1} }
.jv-cost{ stroke-dasharray:1000; stroke-dashoffset:1000; animation:jvdraw 1.6s ease-out .2s forwards; }
.jv-total{ stroke-dasharray:1000; stroke-dashoffset:1000; animation:jvdraw 2.2s cubic-bezier(.5,0,.9,.35) .6s forwards; }
.jv-area{ opacity:0; animation:jvfade 1.2s ease 2.5s both; }
.jv-lbl{ opacity:0; animation:jvfade .6s ease var(--d) both; }
.jv-cap{ opacity:0; animation:jvfade .5s ease var(--d) both; }
@media (prefers-reduced-motion: reduce){
  .jv-cost,.jv-total,.jv-area,.jv-lbl,.jv-cap{ animation:none !important; opacity:1 !important; stroke-dashoffset:0 !important; }
}

/* ---- Jevons steam-engine vignette (n:203): coal drops in, fire glows, steam puffs, flywheel spins ---- */
@keyframes se-coal{ 0%{transform:translateY(-150px);opacity:0} 10%{opacity:1} 55%{transform:translateY(0);opacity:1} 70%{transform:translateY(6px);opacity:0} 100%{transform:translateY(6px);opacity:0} }
@keyframes se-steam{ 0%{transform:translate(0,0) scale(.4);opacity:0} 25%{opacity:.55} 100%{transform:translate(-10px,-64px) scale(1.7);opacity:0} }
@keyframes se-glow{ 0%,100%{opacity:.45} 50%{opacity:1} }
@keyframes se-spin{ to{transform:rotate(360deg)} }
.se-coal{ animation:se-coal 2.4s ease-in var(--d) infinite; }
.se-steam{ transform-box:fill-box; transform-origin:center; animation:se-steam 2.8s ease-out var(--d) infinite; }
.se-glow{ animation:se-glow 1.6s ease-in-out infinite; }
.se-wheel{ transform-box:fill-box; transform-origin:center; animation:se-spin 3.4s linear infinite; }
@media (prefers-reduced-motion: reduce){
  .se-coal,.se-steam{ opacity:0 !important; animation:none !important; }
  .se-glow{ opacity:.8 !important; animation:none !important; }
  .se-wheel{ animation:none !important; }
}

/* ============================================================
   2027 deep-dive screens (n:210–214) — force visualizations
   ============================================================ */

/* --- 01 Death of Static Layouts: rigid grid reflows into a fluid system --- */
.dl-stage{ position:relative; width:820px; height:470px; }
.dl-tile{ position:absolute; border:1px solid rgba(207,154,78,.28); background:rgba(207,154,78,.06); border-radius:10px; }
.dl-tile::before{ content:""; position:absolute; left:16px; top:16px; width:42%; height:10px; border-radius:5px; background:rgba(255,255,255,.22); }
.dl-tile::after{ content:""; position:absolute; left:16px; top:38px; right:16px; bottom:16px; border-radius:6px; background:rgba(255,255,255,.05); }
.dl-t1{ animation:dl1 9s ease-in-out infinite; }
.dl-t2{ animation:dl2 9s ease-in-out infinite; }
.dl-t3{ animation:dl3 9s ease-in-out infinite; }
.dl-t4{ animation:dl4 9s ease-in-out infinite; }
.dl-t5{ animation:dl5 9s ease-in-out infinite; }
.dl-t6{ animation:dl6 9s ease-in-out infinite; }
@keyframes dl1{ 0%,14%{left:0;top:0;width:260px;height:222px} 44%,70%{left:0;top:0;width:540px;height:308px} 100%{left:0;top:0;width:260px;height:222px} }
@keyframes dl2{ 0%,14%{left:280px;top:0;width:260px;height:222px} 44%,70%{left:560px;top:0;width:260px;height:146px} 100%{left:280px;top:0;width:260px;height:222px} }
@keyframes dl3{ 0%,14%{left:560px;top:0;width:260px;height:222px} 44%,70%{left:560px;top:162px;width:260px;height:146px} 100%{left:560px;top:0;width:260px;height:222px} }
@keyframes dl4{ 0%,14%{left:0;top:248px;width:260px;height:222px} 44%,70%{left:0;top:324px;width:260px;height:146px} 100%{left:0;top:248px;width:260px;height:222px} }
@keyframes dl5{ 0%,14%{left:280px;top:248px;width:260px;height:222px} 44%,70%{left:280px;top:324px;width:260px;height:146px} 100%{left:280px;top:248px;width:260px;height:222px} }
@keyframes dl6{ 0%,14%{left:560px;top:248px;width:260px;height:222px} 44%,70%{left:560px;top:324px;width:260px;height:146px} 100%{left:560px;top:248px;width:260px;height:222px} }
.dl-state{ position:absolute; left:0; bottom:-42px; font-size:19px; font-weight:700; letter-spacing:.16em; }
.dl-state b{ color:#cf9a4e; } .dl-state i{ color:rgba(255,255,255,.35); font-style:normal; }

/* --- 02 Typography Domination: the word IS the layout --- */
.ty-word{ display:block; animation:ty-in 1.1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ty-in{ from{opacity:0; transform:translateY(40px)} to{opacity:1; transform:none} }

/* --- 03 Spatial Computing: curved wall of floating panels in a 3D field --- */
.sp-scene{ position:relative; width:1660px; height:560px; perspective:1500px; perspective-origin:50% 42%; }
.sp-field{ position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(5deg); }
.sp-panel{ position:absolute; left:50%; top:50%; width:300px; height:210px; margin:-105px 0 0 -150px; transform-style:preserve-3d; }
.sp-glass{ position:absolute; inset:0; border-radius:14px; border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(160deg, rgba(90,110,180,.20), rgba(20,20,30,.55)); box-shadow:0 30px 60px rgba(0,0,0,.45);
  backdrop-filter:blur(2px); overflow:hidden; animation:sp-float 7s ease-in-out infinite; }
.sp-glass::before{ content:""; position:absolute; left:14px; top:12px; width:9px; height:9px; border-radius:50%;
  background:#cf9a4e; box-shadow:16px 0 0 rgba(255,255,255,.25), 32px 0 0 rgba(255,255,255,.25); }
.sp-line{ position:absolute; left:14px; height:8px; border-radius:4px; background:rgba(255,255,255,.16); }
.sp-focus .sp-glass{ border-color:rgba(207,154,78,.5); background:linear-gradient(160deg, rgba(120,140,210,.30), rgba(30,28,44,.7)); box-shadow:0 40px 80px rgba(0,0,0,.6), 0 0 40px rgba(207,154,78,.12); }
@keyframes sp-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }
.sp-glasses{ position:absolute; left:50%; bottom:8px; width:230px; margin-left:-115px; transform:translateZ(240px); }
.sp-pinch{ position:absolute; left:50%; top:44%; transform:translateZ(280px); }
.sp-pinch .ring{ position:absolute; left:-30px; top:-30px; width:60px; height:60px; border-radius:50%; border:2px solid rgba(207,154,78,.6); animation:sp-ping 2.6s ease-out infinite; }
@keyframes sp-ping{ 0%{transform:scale(.5);opacity:.9} 100%{transform:scale(1.6);opacity:0} }
.sp-dot{ position:absolute; width:12px; height:12px; border-radius:50%; background:#cf9a4e; box-shadow:0 0 12px rgba(207,154,78,.8); }
.sp-dot.a{ left:-16px; top:-4px; animation:sp-pa 2.6s ease-in-out infinite; }
.sp-dot.b{ left:6px; top:-4px; animation:sp-pb 2.6s ease-in-out infinite; }
@keyframes sp-pa{ 0%,100%{transform:translateX(-6px)} 50%{transform:translateX(2px)} }
@keyframes sp-pb{ 0%,100%{transform:translateX(6px)} 50%{transform:translateX(-2px)} }

/* --- 04 Anti-Screen: tactile knob, switch, sound ripples --- */
.as-knob{ transform-origin:50% 50%; animation:as-turn 5s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes as-turn{ 0%,100%{transform:rotate(-42deg)} 50%{transform:rotate(48deg)} }
.as-switch{ animation:as-slide 3.4s cubic-bezier(.7,0,.3,1) infinite; }
@keyframes as-slide{ 0%,46%{transform:translateX(0)} 54%,100%{transform:translateX(56px)} }
.as-wave{ transform-origin:center; animation:as-ring 3s ease-out infinite; }
.as-wave.w2{ animation-delay:1s } .as-wave.w3{ animation-delay:2s }
@keyframes as-ring{ 0%{opacity:.7; transform:scale(.4)} 100%{opacity:0; transform:scale(1.15)} }

@media (prefers-reduced-motion: reduce){
  .dl-t1,.dl-t2,.dl-t3,.dl-t4,.dl-t5,.dl-t6,.ty-word,.sp-glass,.sp-pinch .ring,.sp-dot,.as-knob,.as-switch,.as-wave{ animation:none !important; }
}

/* ============================================================
   Presenter origins — Venn of parents → me (n:300)
   ============================================================ */
.pv-wrap{position:relative;width:1920px;height:1080px;background:#0a0a0c;overflow:hidden;font-family:var(--sans);color:#fff}
.pv-imgs{position:absolute;inset:0;display:flex}
.pv-col{flex:1;background-size:cover;background-repeat:no-repeat}
.pv-mother{background-color:#16161a;background-position:center 26%;filter:grayscale(1) brightness(.5) contrast(1.22)}
.pv-me{flex:1.2;background-color:#3a2e25;background-size:auto 118%;background-position:14% 24%}
.pv-father{background-color:#16161a;background-position:center 26%;filter:grayscale(1) brightness(.56) contrast(1.2)}
.pv-vig{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(46% 44% at 15% 50%, rgba(10,10,12,.82), rgba(10,10,12,0) 74%),
  radial-gradient(46% 44% at 85% 50%, rgba(10,10,12,.82), rgba(10,10,12,0) 74%),
  linear-gradient(90deg,rgba(10,10,12,.9) 0%,rgba(10,10,12,0) 22%,rgba(10,10,12,0) 78%,rgba(10,10,12,.9) 100%),
  linear-gradient(0deg,rgba(10,10,12,.8),rgba(10,10,12,0) 32%),
  radial-gradient(140% 110% at 50% 32%,rgba(10,10,12,0) 40%,rgba(10,10,12,.5) 100%)}
.pv-venn{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pv-txt{position:absolute}
.pv-eyebrow{font-size:24px;font-weight:600;letter-spacing:.24em;color:#cf9a4e;text-transform:uppercase}
.pv-name{font-size:46px;font-weight:800;letter-spacing:-.01em;line-height:1}
.pv-name small{font-size:19px;font-weight:500;color:rgba(255,255,255,.5);letter-spacing:.04em;margin-left:12px}
.pv-role{font-size:22px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#cf9a4e;margin-top:16px}
.pv-line{font-size:27px;font-weight:400;color:rgba(255,255,255,.9);margin-top:10px}
.pv-loc{font-size:22px;font-weight:400;color:rgba(255,255,255,.6);margin-top:8px}
.pv-me-tag{font-size:34px;font-weight:800;letter-spacing:.08em;color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.9),0 0 6px rgba(0,0,0,.95)}
.pv-coda{font-size:27px;font-weight:400;color:rgba(255,255,255,.72);letter-spacing:.01em;text-align:center;white-space:nowrap}
.pv-coda b{color:#cf9a4e;font-weight:700}

/* ============================================================
   "I grew up on" — three formative influences (n:302)
   ============================================================ */
.gu-wrap{position:relative;width:1920px;height:1080px;background:#0f0f13;overflow:hidden;font-family:var(--sans);color:#fff}
.gu-row{position:absolute;left:130px;right:130px;top:322px;bottom:150px;display:flex;gap:38px}
.gu-panel{flex:1;position:relative;border-radius:16px;overflow:hidden;background:#17171c;box-shadow:0 34px 70px rgba(0,0,0,.55)}
.gu-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s}
.gu-panel:hover .gu-img{transform:scale(1.03)}
.gu-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,6,9,.96) 2%,rgba(6,6,9,.55) 24%,rgba(6,6,9,0) 48%)}
.gu-num{position:absolute;left:26px;top:22px;font-family:var(--sans);font-size:20px;font-weight:700;letter-spacing:.16em;color:rgba(255,255,255,.55)}
.gu-label{position:absolute;left:30px;right:30px;bottom:28px}
.gu-kicker{font-size:30px;font-weight:800;letter-spacing:.06em;color:#fff;line-height:1.05}
.gu-desc{font-size:21px;line-height:1.45;color:rgba(255,255,255,.72);margin-top:12px}
.gu-desc b{color:#cf9a4e;font-weight:700}

/* ============================================================
   ID / IIT lineage — Bauhaus Dessau genealogy (n:304)
   ============================================================ */
.bh-wrap{position:relative;width:1920px;height:1080px;background:#0a0a0c;overflow:hidden;font-family:var(--sans);color:#fff}
.bh-bg{position:absolute;left:0;top:0;width:1920px;height:704px;background-size:cover;background-position:center 58%;background-color:#20242c}
.bh-scrim{position:absolute;left:0;top:0;width:1920px;height:704px;background:
  linear-gradient(90deg,rgba(8,10,14,.86) 0%,rgba(8,10,14,.28) 30%,rgba(8,10,14,.28) 70%,rgba(8,10,14,.86) 100%),
  linear-gradient(0deg,rgba(8,10,14,.55),rgba(8,10,14,.15) 40%)}
.bh-txt{position:absolute;font-size:30px;line-height:1.34;font-weight:500;letter-spacing:.004em;text-shadow:0 1px 10px rgba(0,0,0,.8)}
.bh-txt.r{text-align:right}
.bh-logo{position:absolute;left:396px;top:34px}
.bh-arrows{position:absolute;left:0;top:0;width:1920px;height:704px;pointer-events:none}
.bh-strip{position:absolute;left:0;width:1920px;display:flex;gap:2px;background:#000}
.bh-strip1{top:704px;height:176px}
.bh-strip2{top:882px;height:198px}
.bh-cell{flex:1;display:flex;flex-direction:column;min-width:0;background:#16161a}
.bh-photo{flex:1;background-size:cover;background-position:center 20%;background-color:#2a2a30;min-height:0}
.bh-cap{height:28px;display:flex;align-items:center;justify-content:center;background:#000;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 5px;flex:none}

/* ============================================================
   DePaul undergrad — split screen (Comm Theory | Fine Arts) n:305
   ============================================================ */
.dp-wrap{position:relative;width:1920px;height:1080px;background:#0a0a0c;overflow:hidden;font-family:var(--sans)}
.dp-half{position:absolute;top:0;height:1080px;width:960px;background-size:cover;background-position:center}
.dp-left{left:0;background-color:#1a1a1e}
.dp-right{left:960px;background-color:#cfc4ad}
.dp-seam{position:absolute;left:958px;top:0;width:4px;height:1080px;background:rgba(0,0,0,.35);z-index:2}
.dp-logo{position:absolute;left:960px;top:540px;transform:translate(-50%,-50%);width:236px;height:236px;z-index:4;border-radius:50%;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.dp-logo img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.dp-t{position:absolute;font-weight:800;line-height:.98;letter-spacing:.01em;z-index:3}
.dp-comm{left:46px;top:40px;font-size:72px;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.7)}
.dp-shannon{top:44px;left:520px;width:400px;text-align:right;font-size:46px;font-weight:700;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.7)}
.dp-fine{right:52px;bottom:44px;font-size:72px;text-align:right;color:#161512}

/* ============================================================
   Portfolio screens — wandereye (n:306) & simb.org (n:307)
   ============================================================ */
.pf-wrap{position:relative;width:1920px;height:1080px;background:#000;overflow:hidden;font-family:var(--sans);color:#fff}
.pf-title{position:absolute;left:40px;font-size:40px;font-weight:600;letter-spacing:.005em;z-index:4}
.pf-strip{position:absolute;display:flex;gap:3px}
.pf-strip>div{flex:1;background-size:cover;background-position:center;background-color:#1c1c1c;min-width:0}
.pf-labrow{position:absolute;left:0;width:1920px;display:flex;z-index:3}
.pf-lab{flex:1;text-align:center;font-size:21px;font-weight:400;color:#fff;position:relative;padding:0 10px;line-height:1.2}
.pf-lab .ln{position:absolute;left:50%;width:1px;background:rgba(255,255,255,.5)}
.pf-lab.t .ln{top:104%;height:30px}
.pf-lab.b .ln{bottom:104%;height:30px}
.pf-row{position:absolute;left:0;width:1920px;display:flex;gap:2px}
.pf-cell{flex:1;background-size:cover;background-position:center;background-color:#131313;min-width:0}

/* ===== deck chrome: audio toggle + info FAB + navigation hint ===== */
#chrome{position:fixed;top:22px;right:28px;z-index:60;display:flex;gap:20px;align-items:center}
.ch-btn{border:0;background:none;color:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:4px;transition:color .2s,transform .1s;-webkit-tap-highlight-color:transparent}
.ch-btn:hover{color:rgba(255,255,255,.9)}
.ch-btn:active{transform:scale(.92)}
.ch-btn svg{width:22px;height:22px;display:block}
.ch-btn.off{color:rgba(255,255,255,.35)}
/* the hint FAB emerges from the ⓘ button in #chrome (top right) — small, anchored, scale-out */
#navhint{position:fixed;top:58px;right:24px;transform:scale(.4) translateY(-8px);transform-origin:top right;z-index:60;display:flex;flex-direction:column;gap:9px;padding:13px 16px;border-radius:12px;background:rgba(15,15,19,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 44px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s cubic-bezier(.2,.9,.3,1.15)}
#navhint.show{opacity:1;transform:scale(1) translateY(0);pointer-events:auto}
.nh-row{display:flex;align-items:center;gap:11px}
.nh-keys{display:flex;gap:4px}
.nh-keys .material-symbols-outlined{font-size:14px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;background:rgba(255,255,255,.05)}
.nh-lbl{font-family:var(--sans);font-size:12.5px;letter-spacing:.01em;color:rgba(255,255,255,.82)}
body.edit #chrome,body.edit #navhint{display:none}

/* ===== flat-slide entrance choreography + living background ===== */
#stage.flat .rv{ opacity:0; animation:rvUp .9s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--i,0) * .06s + .04s); will-change:opacity, translate, filter; }
@keyframes rvUp{ 0%{opacity:0; translate:0 30px; filter:blur(8px)} 60%{filter:blur(0)} 100%{opacity:1; translate:0 0; filter:blur(0)} }
#bleed.flat::before{ content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(120% 85% at 12% -8%, rgba(255,255,255,.06), transparent 55%),
            radial-gradient(115% 82% at 106% 108%, rgba(207,154,78,.08), transparent 55%);
  animation:bgDrift 26s ease-in-out infinite alternate; will-change:transform; }
@keyframes bgDrift{ 0%{transform:translate3d(-2.5%,-1.6%,0) scale(1.03)} 100%{transform:translate3d(2.5%,1.6%,0) scale(1.07)} }
#bleed.flat::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.42; mix-blend-mode:overlay;
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:170px; }
@media (prefers-reduced-motion: reduce){ #stage.flat .rv{animation:none; opacity:1} #bleed.flat::before{animation:none} }

/* ===== editorial type mix (flat screens) — display serif against the grotesk ===== */
#stage.flat .tb i{ font-family:'Fraunces','Playfair Display',Georgia,serif; font-style:italic; font-weight:400; letter-spacing:0; }
#stage.flat .ed-wm{ font-family:'Fraunces',Georgia,serif !important; font-weight:300 !important; font-style:italic; letter-spacing:-.005em; }

/* ===== architectural light treatment (screens #3–#6, class="arch") ===== */
.arch{ position:relative; width:1920px; height:1080px; overflow:hidden;
  background:#ece7db; color:#211f1a; font-family:var(--sans);
  --ink:#211f1a; --sub:#585349; --faint:#9a9484; --acc:#b0742a; --line:rgba(33,31,26,.13); }
.arch *{ box-sizing:border-box; }
.arch-grid{ position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/64px 64px,
            linear-gradient(0deg,var(--line) 1px,transparent 1px) 0 0/64px 64px;
  -webkit-mask-image:radial-gradient(125% 105% at 50% 42%,#000 52%,transparent 92%);
  mask-image:radial-gradient(125% 105% at 50% 42%,#000 52%,transparent 92%);
  animation:archFade 1.5s ease .15s forwards; }
@keyframes archFade{ to{opacity:.7} }
.arch-paper{ position:absolute; inset:0; pointer-events:none; opacity:.45; mix-blend-mode:multiply;
  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='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:170px; }
.arch-draw{ position:absolute; inset:0; width:1920px; height:1080px; pointer-events:none; }
.arch-draw [pathLength]{ stroke-dasharray:1; stroke-dashoffset:1; animation:archDraw 1.4s cubic-bezier(.55,0,.1,1) both; }
@keyframes archDraw{ to{stroke-dashoffset:0} }
.arch-el{ position:absolute; opacity:0; animation:archUp .95s cubic-bezier(.16,1,.3,1) both; }
@keyframes archUp{ from{opacity:0; translate:0 24px; filter:blur(6px)} 65%{filter:blur(0)} to{opacity:1; translate:0 0; filter:blur(0)} }
.arch-mono{ font-family:'Space Mono',ui-monospace,monospace; text-transform:uppercase; }
.arch-plate{ font-size:20px; color:var(--faint); letter-spacing:.14em; }
.arch-kick{ font-size:23px; color:var(--acc); letter-spacing:.26em; }
.arch-h{ font-size:152px; font-weight:800; line-height:.96; letter-spacing:-.025em; color:var(--ink); white-space:nowrap; }
.arch-h em{ font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:400; letter-spacing:-.005em; }
.arch-lead{ font-size:41px; line-height:1.4; color:var(--sub); font-weight:400; }
.arch i{ font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:500; color:var(--ink); }
.arch-cols{ display:flex; gap:56px; }
.arch-col{ flex:1; border-left:1px solid var(--line); padding-left:34px; }
.arch-col:first-child{ border-left:0; padding-left:0; }
.arch-clab{ display:block; font-size:18px; color:var(--acc); letter-spacing:.14em; margin-bottom:20px; }
.arch-col p{ font-size:32px; line-height:1.42; color:var(--sub); }
.arch-note{ font-size:41px; line-height:1.45; color:var(--sub); }
.arch-sheet{ font-size:22px; color:var(--faint); letter-spacing:.12em; }
@media (prefers-reduced-motion: reduce){ .arch-grid,.arch-el,.arch-draw [pathLength]{animation:none; opacity:1; stroke-dashoffset:0} .arch-el{opacity:1} }

/* ===== #3–6 as ONE continuous scroll narrative (editorial · dynamic · gritty) ===== */
/* opening (void/credits) — full-viewport, no letterbox */
#opening{ position:fixed; inset:0; z-index:6; display:none; background:#000; }
#opening.on{ display:block; }
#opening #op-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:#000; }
/* formation (DNA helix) — full-viewport; opacity crossfade so define dissolves into the helix elegantly */
#formation{ position:fixed; inset:0; z-index:6; background:#e9e4da; opacity:0; visibility:hidden; transition:opacity .8s ease, visibility 0s linear .8s; }
#formation.on{ opacity:1; visibility:visible; transition:opacity .8s ease; }
#formation #fm-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:#e9e4da; }
#scroll{ position:fixed; inset:0; z-index:6; display:none; overflow-y:auto; overflow-x:hidden;
  background:#e9e4d8; color:#1c1a15; font-family:var(--sans); -webkit-overflow-scrolling:touch;
  --ink:#1c1a15; --sub:#585349; --faint:#a09a89; --acc:#b0742a; }
#scroll.on{ display:block; }
#scroll .et-progress{ position:fixed; top:0; left:0; height:3px; background:var(--acc); width:0; z-index:8; }
#scroll .et-paper{ position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5; mix-blend-mode:multiply;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:150px; }
#scroll .et-noise{ position:fixed; inset:0; pointer-events:none; z-index:1; mix-blend-mode:overlay; opacity:.2;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"); background-size:94px; animation:etFlick .5s steps(3) infinite; }
@keyframes etFlick{ 0%{transform:translate(0,0)} 33%{transform:translate(-2px,1px)} 66%{transform:translate(1px,-2px)} 100%{transform:translate(0,0)} }
#scroll .et-wrap{ position:relative; z-index:2; width:min(1460px,90vw); margin:0 auto; }
.et-act{ position:relative; min-height:116vh; display:flex; flex-direction:column; justify-content:center; padding:15vh 0; }
.et-act.r{ align-items:flex-end; text-align:right; }
.et-word{ position:relative; font-weight:800; font-size:clamp(72px,15vw,262px); line-height:.9; letter-spacing:-.022em; color:var(--ink); margin:0 0 5.4vh; text-transform:uppercase;
  transform:translate(var(--wx,0px),var(--wy,0px)) rotate(var(--wr,0deg)); clip-path:inset(-14% 0 -14% 0);
  transition:transform .55s cubic-bezier(.16,1,.3,1), clip-path 1.05s cubic-bezier(.16,1,.3,1); will-change:transform,clip-path; }
.et-word em{ font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:400; letter-spacing:-.01em; }
/* signature hand-drawn mark — draws itself as the act scrolls through view */
.et-mark{ display:block; width:min(440px,60%); height:60px; margin:-.4vh 0 3.4vh; color:var(--acc); overflow:visible; }
.et-act.r .et-mark{ margin-left:auto; }
.et-mark path{ fill:none; stroke:currentColor; stroke-width:5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--draw,0)); transition:stroke-dashoffset .12s linear; }
.et-body-wrap{ max-width:39em; }
.et-act.r .et-body-wrap{ margin-left:auto; }
.et-lead{ font-size:clamp(25px,2.7vw,46px); line-height:1.32; color:var(--sub); margin-bottom:4vh; }
.et-pt{ font-size:clamp(19px,1.8vw,31px); line-height:1.46; color:var(--sub); margin-bottom:2.6vh; }
.et-pt b{ font-weight:700; color:var(--ink); }
#scroll i{ font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:500; color:var(--ink); }
.et-cite{ font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:clamp(23px,2.1vw,38px); line-height:1.3; color:var(--ink); margin-top:1vh; }
.et-cite span{ display:block; font-family:'Space Mono',ui-monospace,monospace; font-style:normal; font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-top:1.6vh; }
.et-end{ min-height:52vh; display:flex; align-items:center; justify-content:center; padding:6vh 0 12vh; }
.et-continue{ font-family:'Space Mono',monospace; text-transform:uppercase; font-size:15px; letter-spacing:.16em; color:var(--ink); background:none; border:1px solid rgba(28,26,21,.4); border-radius:999px; padding:16px 34px; cursor:pointer; transition:background .2s,color .2s; }
.et-continue:hover{ background:var(--ink); color:#e9e4d8; }
.et-hint{ position:fixed; left:50%; bottom:3.4vh; transform:translateX(-50%); z-index:5; font-family:'Space Mono',monospace; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); animation:etBob 2.2s ease-in-out infinite; }
@keyframes etBob{ 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(7px)} }
/* reveal — bold, varied directional fly-ins (each act eases in as a group) */
.et-rv{ opacity:0; translate:0 66px; filter:blur(9px);
  transition:opacity .95s cubic-bezier(.16,1,.3,1) var(--d,0s), translate 1.15s cubic-bezier(.16,1,.3,1) var(--d,0s), filter .85s ease var(--d,0s);
  will-change:opacity,translate,filter; }
.et-rv.fl{ translate:-100px 0; } .et-rv.fr{ translate:100px 0; }
.et-rv.in{ opacity:1; translate:0 0; filter:blur(0); }
/* the giant word: crisp clip-wipe up (no blur/slide) — reveals from baseline upward */
.et-word.et-rv{ opacity:1; filter:none; translate:0 0; clip-path:inset(114% 0 -14% 0); }
.et-word.et-rv.in{ clip-path:inset(-14% 0 -14% 0); }
body.lightui .ch-btn{ color:rgba(28,26,21,.5); } body.lightui .ch-btn:hover{ color:#141414; }
body.futurelight .ch-btn{ color:rgba(18,24,40,.5); } body.futurelight .ch-btn:hover{ color:rgba(18,24,40,.9); }

/* ---- future-arc left rail: pinned year navigation for #8 onward, scales to viewport ---- */
#futurenav{ position:fixed; left:0; top:0; height:100vh; width:66px; z-index:55; display:none; align-items:center; pointer-events:none;
  color:rgba(255,255,255,.62); font-family:var(--sans); }
#futurenav.on{ display:flex; }
#futurenav.dark{ color:rgba(16,22,38,.72); }
/* the rail spans a fixed share of the viewport height; every tick is placed by % so the
   WHOLE set always fits, no matter how many screens or how short the viewport. */
.fn-rail{ position:relative; height:92vh; width:100%; margin-left:9px; pointer-events:auto; }
.fn-tick{ position:absolute; left:0; transform:translateY(-50%); display:flex; align-items:center; gap:6px;
  background:none; border:0; margin:0; padding:3px 0; cursor:pointer; color:inherit; opacity:.4; transition:opacity .18s; }
.fn-tick:hover{ opacity:1; }
.fn-line{ width:7px; height:1.5px; background:currentColor; border-radius:1px; transition:width .18s, height .18s; flex:0 0 auto; }
.fn-yr{ font-size:8px; font-weight:600; letter-spacing:.06em; opacity:0; transition:opacity .18s; white-space:nowrap; line-height:1; }
.fn-tick.fn-decade .fn-line{ width:12px; }
.fn-tick.fn-decade .fn-yr{ opacity:.58; }
.fn-tick:hover .fn-line{ width:18px; }
.fn-tick:hover .fn-yr{ opacity:1; }
.fn-tick.cur{ opacity:1; }
.fn-tick.cur .fn-line{ width:20px; height:2px; }
.fn-tick.cur .fn-yr{ opacity:1; font-weight:800; }
body.edit #futurenav{ display:none; }
@media (prefers-reduced-motion: reduce){ .et-rv{transition:none;opacity:1;translate:0 0;filter:none} .et-noise{animation:none}
  .et-word{transform:none;transition:none} .et-word.et-rv,.et-word.et-rv.in{clip-path:none} .et-mark path{stroke-dashoffset:0} }