/* Westwall — presentation layer.
   Art direction: cast concrete, cold light, editorial serif for the prose. */

:root{
  --accent:#b8b2a4;
  --ink:#f4f1ea;
  --muted:#a5a096;
  --dim:#6f6b64;
  --panel:rgba(11,12,13,.60);
  --panel-solid:rgba(9,10,11,.86);
  --hair:rgba(244,241,234,.14);
  --grot:-apple-system,"Helvetica Neue","Inter","Segoe UI",Roboto,system-ui,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --pad:clamp(18px,4vw,54px);
}

*{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0;
  background:#07080a;
  color:var(--ink);
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

#gl{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0}

/* fine static grain over everything, cheap and always on */
#grain{
  position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.16;
  background-image:
    repeating-conic-gradient(rgba(255,255,255,.05) 0% 25%, rgba(0,0,0,.05) 0% 50%);
  background-size:3px 3px;
  mix-blend-mode:overlay;
}

/* ------------------------------------------------------------------ loader */
#loader{
  position:fixed;inset:0;z-index:90;background:#07080a;
  display:grid;place-items:center;transition:opacity .9s ease,visibility .9s;
}
#loader.gone{opacity:0;visibility:hidden}
.loader-inner{width:min(360px,72vw);text-align:center;color:#8d887e}
.loader-mark svg{width:100%;height:auto;color:#6e6a62}
.loader-mark .t{opacity:0;animation:teeth 2.2s ease-in-out infinite}
.t1{animation-delay:0s}.t2{animation-delay:.12s}.t3{animation-delay:.24s}
.t4{animation-delay:.36s}.t5{animation-delay:.48s}
@keyframes teeth{0%,70%,100%{opacity:.12}25%{opacity:1}}
.loader-label{
  margin:26px 0 14px;font-family:var(--grot);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:#7d786f;
}
.loader-bar{height:1px;background:rgba(255,255,255,.12);overflow:hidden}
.loader-bar i{display:block;height:100%;width:30%;background:#cfc9bd;animation:sweep 1.5s ease-in-out infinite}
@keyframes sweep{0%{transform:translateX(-110%)}100%{transform:translateX(360%)}}

/* --------------------------------------------------------------- fallback */
#fallback{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:#0a0b0c;padding:8vw}
#fallback[hidden]{display:none}
#fallback h1{font-family:var(--grot);letter-spacing:.3em;font-size:14px;color:var(--muted)}
#fallback p{max-width:46ch;line-height:1.7;color:var(--muted)}

/* -------------------------------------------------------------- chrome/HUD */
#progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:40;background:rgba(255,255,255,.07)}
#progress i{display:block;height:100%;width:0;background:var(--accent);transition:background .6s linear}

#hud{
  position:fixed;top:0;left:0;right:0;z-index:35;
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:calc(var(--pad) * .62) var(--pad);
  pointer-events:none;mix-blend-mode:normal;
}
.hud-brand{display:flex;flex-direction:column;gap:3px}
.hud-title{
  font-family:var(--grot);font-weight:700;font-size:13px;letter-spacing:.42em;
  text-transform:uppercase;color:var(--ink);text-shadow:0 1px 12px rgba(0,0,0,.8);
}
.hud-sub{
  font-family:var(--grot);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);text-shadow:0 1px 10px rgba(0,0,0,.8);
}
.hud-read{display:flex;gap:22px}
.read-block{text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.read-val{
  font-family:var(--mono);font-size:clamp(15px,2.2vw,22px);font-variant-numeric:tabular-nums;
  color:var(--ink);letter-spacing:.02em;text-shadow:0 1px 14px rgba(0,0,0,.85);line-height:1;
}
.read-lbl{
  font-family:var(--grot);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin-top:5px;
}

/* ------------------------------------------------------------------- rail */
#rail{
  position:fixed;right:calc(var(--pad) * .5);top:50%;transform:translateY(-50%);
  z-index:35;display:flex;flex-direction:column;gap:2px;pointer-events:auto;
}
.rail-item{
  display:flex;align-items:center;justify-content:flex-end;gap:9px;
  background:none;border:0;cursor:pointer;padding:5px 4px;color:var(--dim);
  font-family:var(--grot);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
}
.rail-item span{opacity:0;transform:translateX(6px);transition:.35s;white-space:nowrap;text-shadow:0 1px 8px #000}
.rail-item i{display:block;width:16px;height:1px;background:currentColor;transition:.35s}
.rail-item:hover span{opacity:.75;transform:none}
.rail-item.on{color:var(--accent)}
.rail-item.on i{width:34px;height:2px}
.rail-item.on span{opacity:1;transform:none}

/* ------------------------------------------------------------------ tools */
#tools{
  position:fixed;bottom:calc(var(--pad)*.5);right:var(--pad);z-index:35;
  display:flex;align-items:center;gap:14px;
  font-family:var(--grot);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
}
#tools button{
  background:none;border:1px solid var(--hair);color:var(--dim);cursor:pointer;
  padding:6px 10px;font:inherit;letter-spacing:.18em;text-transform:uppercase;transition:.25s;
}
#tools button:hover{color:var(--ink);border-color:rgba(244,241,234,.4)}
#tools b{color:var(--accent);font-weight:500}
#fps{font-family:var(--mono);letter-spacing:0}

/* sound toggle: the bars only move while it is actually playing */
#audioBtn{display:flex;align-items:center;gap:8px}
#audioBtn.on{color:var(--ink);border-color:rgba(244,241,234,.35)}
#audioBtn .eq{display:flex;align-items:flex-end;gap:2px;height:9px}
#audioBtn .eq i{width:2px;height:2px;background:currentColor;opacity:.45;transition:opacity .3s}
#audioBtn.on .eq i{opacity:1;animation:eq .9s ease-in-out infinite}
#audioBtn.on .eq i:nth-child(1){animation-delay:0s}
#audioBtn.on .eq i:nth-child(2){animation-delay:.16s}
#audioBtn.on .eq i:nth-child(3){animation-delay:.33s}
#audioBtn.on .eq i:nth-child(4){animation-delay:.49s}
@keyframes eq{0%,100%{height:2px}50%{height:9px}}
#audioBtn.nudge{animation:nudge 3.4s ease-in-out 3}
@keyframes nudge{0%,88%,100%{border-color:var(--hair)}94%{border-color:rgba(244,241,234,.55)}}
/* works in the flow layout too, where JS does not drive card opacity */
body.no-text .card{opacity:0 !important;pointer-events:none !important}
#textBtn.off{color:var(--ink);border-color:rgba(244,241,234,.35)}
#textBtn.off b{color:var(--accent)}

/* the year ticks over rather than snapping */
.read-val.tick{animation:tick .42s cubic-bezier(.3,0,.2,1)}
@keyframes tick{
  0%{opacity:0;transform:translateY(-7px)}
  55%{opacity:1}
  100%{opacity:1;transform:none}
}

#scrollhint{
  position:fixed;bottom:calc(var(--pad)*.6);left:var(--pad);z-index:35;
  display:flex;align-items:center;gap:10px;color:var(--dim);
  font-family:var(--grot);font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  transition:opacity .6s;
}
#scrollhint i{display:block;width:44px;height:1px;background:currentColor;position:relative;overflow:hidden}
#scrollhint i::after{
  content:"";position:absolute;inset:0;background:var(--ink);
  animation:hint 2.4s cubic-bezier(.6,0,.2,1) infinite;
}
@keyframes hint{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
#scrollhint.gone{opacity:0}

/* --------------------------------------------------------------- sections */
#scroll{position:relative;z-index:20}
.section{position:relative;min-height:185vh;padding:0 var(--pad)}
/* the three set-piece chapters get room for the scene to play after the text clears */
.section.staged{min-height:290vh}
.section:last-of-type{min-height:120vh}

/* Cards are fixed and cross-faded per frame from the same continuous chapter
   index that drives the camera, so the text and the world move as one thing.
   No CSS transition here on purpose — JS owns opacity/transform every frame. */
.card{
  position:fixed;top:8vh;left:var(--pad);
  width:min(880px,calc(100vw - var(--pad) * 2));
  max-height:86vh;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(244,241,234,.22) transparent;
  padding:clamp(22px,3vw,34px) clamp(20px,3vw,36px) clamp(24px,3vw,34px);
  background:var(--panel);
  backdrop-filter:blur(16px) saturate(.9);
  -webkit-backdrop-filter:blur(16px) saturate(.9);
  border:1px solid var(--hair);
  border-left:2px solid var(--accent);
  box-shadow:0 30px 90px -30px rgba(0,0,0,.9);
  opacity:0;pointer-events:none;
  will-change:opacity,transform;
}
.section:nth-child(even) .card{left:auto;right:var(--pad)}
.card::-webkit-scrollbar{width:5px}
.card::-webkit-scrollbar-thumb{background:rgba(244,241,234,.20)}
.card::-webkit-scrollbar-track{background:transparent}

.c-cols{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(20px,2.4vw,34px);align-items:start}
.c-solo .c-cols{grid-template-columns:1fr}
.c-solo{width:min(620px,100%)}
@media (max-width:1080px){ .c-cols{grid-template-columns:1fr} .card{width:min(620px,100%)} }

.c-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.c-num{
  font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.08em;
}
.c-kicker{
  font-family:var(--grot);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);
}
.c-title{
  font-family:var(--grot);font-weight:700;
  font-size:clamp(21px,2.7vw,31px);line-height:1.14;letter-spacing:-.015em;
  margin:0 0 14px;color:var(--ink);
}
.c-lede{
  font-size:clamp(14.5px,1.5vw,16.5px);line-height:1.58;color:#e3ded4;margin:0 0 4px;
}
.c-lede em{color:var(--accent);font-style:italic}
.c-body{font-size:14px;line-height:1.66;color:#b9b4aa}
.c-body p{margin:12px 0 0}
.c-body strong{color:var(--ink);font-weight:600}
.c-body em{color:#cfc9bd}

/* stats */
.c-stats{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;margin:0 0 4px;background:var(--hair);border:1px solid var(--hair);
}
/* an odd last stat spans the row so the grid never shows a hole */
.c-stats .stat:last-child:nth-child(odd){grid-column:1 / -1}
.stat{background:rgba(8,9,10,.55);padding:12px 12px 11px}
.stat .v{
  font-family:var(--grot);font-weight:700;font-size:clamp(17px,2.1vw,23px);
  line-height:1;color:var(--ink);letter-spacing:-.02em;
}
.stat .u{font-family:var(--grot);font-size:11px;color:var(--accent);margin-left:3px;font-weight:500}
.stat .l{
  display:block;margin-top:7px;font-family:var(--grot);font-size:9px;line-height:1.4;
  letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
}

/* quirk */
.c-quirk{margin-top:20px;padding:15px 16px;background:rgba(255,255,255,.035);border:1px solid var(--hair)}
.c-quirk .q-lbl{
  display:block;font-family:var(--grot);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);margin-bottom:8px;
}
.c-quirk p{margin:0;font-size:13px;line-height:1.62;color:#b3aea4}
.c-quirk em{color:#d6d0c4;font-style:italic}

/* figures */
.c-fig{margin:20px 0 2px;border-top:1px solid var(--hair);padding-top:16px}
.c-fig svg{width:100%;height:auto;display:block;overflow:visible}
.c-fig figcaption{
  margin-top:12px;font-family:var(--grot);font-size:9.5px;line-height:1.6;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);
}
.fig-lbl{font-family:var(--grot);font-size:8px;letter-spacing:.14em;text-transform:uppercase;fill:#8b867d}
.fig-val{font-family:var(--mono);font-size:9px;fill:#cfc9bd}
.fig-key{font-family:var(--grot);font-size:9px;letter-spacing:.1em;fill:#b9b4aa}

/* ------------------------------------------------------------------ hero */
.section.hero{min-height:140vh}
.section.hero .card{
  background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;box-shadow:none;
  left:0;right:0;margin:0 auto;text-align:center;top:24vh;padding:0 var(--pad);
  width:min(1060px,100%);max-height:none;overflow:visible;
}
.hero-eyebrow{
  font-family:var(--grot);font-size:10px;letter-spacing:.5em;text-transform:uppercase;
  color:var(--muted);margin-bottom:clamp(14px,3vw,26px);text-shadow:0 2px 20px #000;
}
.hero-title{
  font-family:var(--grot);font-weight:800;
  font-size:clamp(52px,11.5vw,152px);line-height:.86;letter-spacing:-.045em;
  margin:0;color:#fff;text-shadow:0 10px 60px rgba(0,0,0,.75);
}
.hero-rule{width:64px;height:2px;background:var(--accent);margin:clamp(20px,4vw,38px) auto}
.hero-lede{
  max-width:44ch;margin:0 auto;font-size:clamp(15px,1.8vw,19px);line-height:1.68;
  color:#ded8ce;text-shadow:0 2px 24px rgba(0,0,0,.85);
}

/* ---------------------------------------------------------------- sources */
.section.sources{min-height:auto;padding-bottom:16vh;padding-top:6vh}
.sources-inner{
  width:min(900px,100%);margin:0 auto;background:var(--panel-solid);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--hair);padding:clamp(24px,3.4vw,44px);
}
.sources-inner h2{
  font-family:var(--grot);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--accent);margin:0 0 20px;font-weight:600;
}
.src-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px;background:var(--hair)}
.src-grid a{
  display:block;background:rgba(8,9,10,.6);padding:14px 16px;text-decoration:none;
  color:#b9b4aa;font-size:13px;line-height:1.5;transition:.25s;
}
.src-grid a:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.src-grid a b{display:block;font-family:var(--grot);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin-bottom:6px;font-weight:500}
.src-note{
  margin:26px 0 0;font-size:13px;line-height:1.75;color:var(--dim);max-width:70ch;
}
.src-note strong{color:var(--muted);font-weight:600}
.colophon{
  margin-top:26px;padding-top:20px;border-top:1px solid var(--hair);
  font-family:var(--grot);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
  display:flex;flex-wrap:wrap;gap:6px 22px;
}

/* ---------------------------------------------------------------- mobile */
/* On touch, fixed overlay cards fight the page scroll — put them back in flow
   and let the whole document move. !important beats the per-frame inline styles. */
@media (max-width:820px){
  #rail{display:none}
  .card{
    position:relative !important;top:auto !important;left:auto !important;right:auto !important;
    width:100% !important;max-height:none !important;overflow:visible !important;
    opacity:1 !important;transform:none !important;pointer-events:auto !important;
  }
  .section{min-height:auto;padding:14vh var(--pad);display:flex;align-items:center}
  .section.hero{min-height:100vh;padding-top:22vh}
  #tools{font-size:8px;gap:8px}
  .hud-read{gap:14px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.12s !important}
  #grain{display:none}
}