/* ============================================================
   INVERSION — internal pitch
   Independent, designed palette (NOT sampled from the concept art).
   System: near-monochrome cool bone-on-ink, one signal accent.
   - ink     : cold near-black, the deep/void
   - bone    : cool pale type
   - ash     : muted secondary type
   - frost   : THE accent — "frozen CO2", a bluish white. It is literally
               the colour of the condensation fog riding the gas, so the
               UI signal IS the hazard. Used for marks, numbers, the live
               tideline mark, highlighted words. (Replaces the earlier gold.)
   - warn / alarm : reserved for the CO2 readout's criticality escalation
               (NOMINAL -> CAUTION -> LETHAL). Used only by instruments.
   ============================================================ */
:root{
  --ink-0:#06090b;
  --ink-1:#0b0f12;
  --ink-2:#10151a;
  --ink-3:#161d23;
  --bone:#d9dee6;
  --bone-dim:#aab2bf;
  --ash:#7b838f;
  --ash-dim:#515963;
  --line:rgba(217,222,230,.11);
  --line-2:rgba(217,222,230,.20);
  --frost:#eef2fa;
  --frost-dim:#9aa7bd;
  --frost-glow:rgba(190,210,245,.55);
  --warn:#f1a98e;
  --alarm:#ef5d44;
  --maxw:1320px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--ink-1);color:var(--bone);
  font-family:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{ /* faint static grain on the backdrop only — never over imagery */
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;
  background-image:radial-gradient(#fff .5px,transparent .5px);background-size:3px 3px;
}
::selection{background:var(--frost);color:var(--ink-0);}

h1,h2,h3,.display{
  font-family:"Arial Black","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:900;letter-spacing:-.015em;line-height:.95;text-transform:uppercase;margin:0;
}
a{color:var(--frost);text-decoration:none;}
.mono{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;}

/* ============ FIXED CHROME ============ */
.cornermark{position:fixed;top:22px;left:26px;z-index:45;
  font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ash);pointer-events:none;}
.cornermark b{color:var(--bone);}

.progress{position:fixed;left:0;right:0;bottom:0;height:2px;background:rgba(217,222,230,.06);z-index:50;}
.progress .bar{height:100%;width:0;background:var(--frost);box-shadow:0 0 10px var(--frost-glow);}

/* ============ HUD — live instruments ============ */
.hud{z-index:46;transition:opacity .5s ease;}

/* CO2 criticality — top right */
.co2{position:fixed;top:24px;right:26px;text-align:right;
  font-family:ui-monospace,Menlo,Consolas,monospace;z-index:46;pointer-events:none;}
.co2 .lbl{font-size:10px;letter-spacing:.26em;color:var(--ash-dim);text-transform:uppercase;}
.co2 .val{font-size:28px;font-weight:700;line-height:1;margin:4px 0;color:var(--frost);
  text-shadow:0 0 16px var(--frost-glow);transition:color .5s ease,text-shadow .5s ease;}
.co2 .val .u{font-size:12px;color:var(--ash);}
.co2 .state{display:inline-block;margin-top:7px;font-size:10px;letter-spacing:.22em;font-weight:700;
  padding:3px 9px;border:1px solid currentColor;color:var(--frost);
  transition:color .5s ease,border-color .5s ease;}
.co2.warn .val,.co2.warn .state{color:var(--warn);text-shadow:0 0 16px rgba(241,169,142,.5);}
.co2.lethal .val,.co2.lethal .state{color:var(--alarm);text-shadow:0 0 20px rgba(239,93,68,.6);
  animation:pulse 1.15s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* TIDELINE height mark — left edge */
.gauge{position:fixed;left:26px;top:50%;transform:translateY(-50%);
  width:16px;height:46vh;min-height:280px;z-index:46;pointer-events:none;
  border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(190,210,245,.04),rgba(6,9,11,.5));}
.gauge .fill{position:absolute;left:0;right:0;bottom:0;height:8%;
  background:linear-gradient(180deg,rgba(190,210,245,.55),rgba(190,210,245,.12));
  border-top:2px solid var(--frost);box-shadow:0 0 14px var(--frost-glow);
  transition:height 1s cubic-bezier(.4,0,.2,1),border-color .5s,box-shadow .5s;}
.gauge.warn .fill{border-top-color:var(--warn);box-shadow:0 0 14px rgba(241,169,142,.5);
  background:linear-gradient(180deg,rgba(241,169,142,.5),rgba(241,169,142,.1));}
.gauge.lethal .fill{border-top-color:var(--alarm);box-shadow:0 0 16px rgba(239,93,68,.55);
  background:linear-gradient(180deg,rgba(239,93,68,.5),rgba(239,93,68,.08));}
.gauge .tag{position:absolute;left:50%;bottom:100%;margin-bottom:12px;transform:translateX(-50%) rotate(180deg);
  writing-mode:vertical-rl;font-family:ui-monospace,Menlo,monospace;font-size:9px;letter-spacing:.24em;color:var(--ash);}
.gauge .cap{position:absolute;left:22px;font-family:ui-monospace,Menlo,monospace;font-size:8.5px;
  letter-spacing:.14em;color:var(--ash-dim);white-space:nowrap;}
.gauge .cap.roof{top:-4px;}.gauge .cap.mid{top:46%;}.gauge .cap.street{bottom:-4px;}

@media (max-width:1024px){.gauge{display:none;}}
@media (max-width:560px){.co2{top:16px;right:16px;}.co2 .val{font-size:22px;}}

/* ============ IMAGE PLATE ============
   The concept art is the star: shown WHOLE (never cropped), blown up to
   fill the viewport height, centered, flanked by quiet text that frames
   but never covers it. The HUD instruments sit in the outer gutters. */
.plate{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  gap:clamp(24px,3.5vw,60px);min-height:100svh;padding:11svh clamp(58px,6vw,104px) 9svh;}
.stage{flex:0 1 auto;display:flex;align-items:center;justify-content:center;position:relative;}
.stage img{display:block;width:auto;height:auto;
  max-height:min(92svh,1060px);max-width:min(54vw,700px);
  border:1px solid var(--line-2);
  box-shadow:0 34px 120px rgba(0,0,0,.66),0 0 0 1px rgba(0,0,0,.4);
  background:var(--ink-0);}
.stage::after{ /* whisper-thin offset frame, doesn't touch the image */
  content:"";position:absolute;inset:-12px;border:1px solid var(--line);pointer-events:none;}

.flank{flex:1 1 0;max-width:300px;min-width:0;}
.flank .kick{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--frost);margin-bottom:12px;display:flex;align-items:center;gap:10px;}
.flank .kick::before{content:"";width:22px;height:2px;background:var(--frost-dim);flex:0 0 auto;}
.flank h3{font-family:"Arial Black",Helvetica,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(17px,1.5vw,21px);line-height:1.05;color:var(--bone);margin-bottom:10px;letter-spacing:-.01em;}
.flank p{font-size:14.5px;line-height:1.55;color:var(--ash);margin:0 0 14px;}
.flank p b{color:var(--bone-dim);font-weight:600;}
.flank p:last-child{margin-bottom:0;}

/* ============ HERO (special plate) ============ */
.hero .stage img{max-height:min(94svh,1100px);}
.hero .flank{max-width:380px;}
.eyebrow{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ash);margin-bottom:20px;}
.wordmark{position:relative;display:inline-block;}
.wordmark h1{font-size:clamp(50px,6.6vw,104px);color:var(--bone);letter-spacing:-.03em;line-height:.86;}
.wordmark .ghost{position:absolute;left:0;top:100%;transform:scaleY(-1);
  background:linear-gradient(180deg,var(--frost-glow),transparent 64%);
  -webkit-background-clip:text;background-clip:text;color:transparent;opacity:.85;pointer-events:none;}
.tagline{font-family:"Arial Black",Helvetica,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(16px,1.7vw,22px);line-height:1.04;margin-top:20px;color:var(--bone);}
.tagline .a{color:var(--frost);}
.hero .logline{font-size:clamp(15px,1.2vw,17px);line-height:1.6;color:var(--bone-dim);margin:0 0 22px;}
.hero .logline b{color:var(--bone);}
.pill{display:inline-flex;align-items:center;gap:10px;font-family:ui-monospace,Menlo,monospace;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone);
  border:1px solid var(--line-2);padding:9px 13px;}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--frost);box-shadow:0 0 0 4px rgba(190,210,245,.16);}
.scrollcue{margin-top:26px;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ash);display:flex;align-items:center;gap:9px;}
.scrollcue .arr{animation:bob 1.9s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ============ TEXT SECTIONS (between plates) ============ */
.band{position:relative;z-index:2;padding:clamp(80px,12vh,150px) 0;}
.band.raised{background:linear-gradient(180deg,var(--ink-0),var(--ink-1));border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(58px,6vw,72px);}
.khead{display:flex;align-items:baseline;gap:16px;margin-bottom:22px;}
.kno{font-family:ui-monospace,Menlo,monospace;color:var(--frost);font-weight:700;font-size:13px;letter-spacing:.14em;}
h2.section{font-size:clamp(34px,6vw,76px);color:var(--bone);}
.lead{font-size:clamp(20px,2.6vw,30px);line-height:1.3;max-width:880px;font-weight:600;color:var(--bone);margin-top:14px;}
.lead .hl{color:var(--frost);}
.body{max-width:680px;color:var(--bone-dim);}
.dim{color:var(--ash);}

.formula{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:30px;
  font-family:ui-monospace,Menlo,monospace;font-size:clamp(13px,1.8vw,18px);letter-spacing:.04em;
  text-transform:uppercase;color:var(--ash);}
.formula b{color:var(--bone);font-weight:700;}
.formula .x{color:var(--frost);font-weight:700;}

/* vocabulary */
.vocab{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1px;margin-top:40px;
  background:var(--line);border:1px solid var(--line);}
.vc{background:var(--ink-1);padding:24px;transition:background .3s;}
.vc:hover{background:var(--ink-3);}
.vc .t{font-family:"Arial Black",Helvetica,sans-serif;font-weight:900;text-transform:uppercase;font-size:19px;
  color:var(--bone);letter-spacing:-.01em;}
.vc .t span{color:var(--frost);}
.vc .d{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--ash);}

/* tide cards */
.tide{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:40px;}
.tcard{border:1px solid var(--line);background:var(--ink-2);padding:26px 24px;transition:transform .35s,border-color .35s;}
.tcard:hover{transform:translateY(-5px);border-color:var(--line-2);}
.tcard .cond{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--frost);margin-bottom:13px;display:flex;align-items:center;gap:9px;}
.tcard .cond::before{content:"";width:20px;height:2px;background:var(--frost-dim);}
.tcard h3{font-size:21px;color:var(--bone);margin-bottom:8px;}
.tcard p{font-size:14px;color:var(--ash);margin:0;}
.tcard.surge{border-color:rgba(239,93,68,.4);}
.tcard.surge .cond{color:var(--alarm);}
.tcard.surge .cond::before{background:var(--alarm);}

.creep{margin-top:34px;border:1px solid rgba(190,210,245,.28);background:linear-gradient(90deg,rgba(190,210,245,.07),transparent);
  padding:24px 28px;max-width:860px;}
.creep .h{font-family:"Arial Black",Helvetica,sans-serif;font-weight:900;text-transform:uppercase;color:var(--frost);
  font-size:15px;margin-bottom:8px;}
.creep p{margin:0;color:var(--bone-dim);}

/* triple spine */
.triple{display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px;border:1px solid var(--line);}
.triple .col{padding:30px 26px;border-right:1px solid var(--line);}
.triple .col:last-child{border-right:0;}
.triple .role{font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--frost);margin-bottom:13px;}
.triple .col h3{font-size:clamp(21px,2.5vw,30px);color:var(--bone);margin-bottom:9px;}
.triple .col p{font-size:14px;color:var(--ash);margin:0;}
.triple .col:nth-child(2){background:rgba(190,210,245,.05);}

/* phases */
.phases{margin-top:40px;position:relative;}
.phases::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--ash-dim),var(--frost));opacity:.6;}
.phase{position:relative;padding:18px 0 20px 42px;border-bottom:1px solid var(--line);}
.phase:last-child{border-bottom:0;}
.phase::before{content:"";position:absolute;left:0;top:24px;width:17px;height:17px;border-radius:50%;
  background:var(--ink-1);border:3px solid var(--ash);}
.phase.cap::before{border-color:var(--frost);background:var(--frost);box-shadow:0 0 14px var(--frost-glow);}
.phase .when{font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ash);font-weight:700;}
.phase.cap .when{color:var(--frost);}
.phase h3{font-size:clamp(20px,2.3vw,27px);color:var(--bone);margin:5px 0 7px;}
.phase p{font-size:14.5px;color:var(--ash);margin:0;max-width:780px;}

/* usp */
.usp{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);}
.usp li{background:var(--ink-1);padding:26px 26px 28px;transition:background .3s;}
.usp li:hover{background:var(--ink-3);}
.usp .n{font-family:ui-monospace,Menlo,monospace;color:var(--frost);font-weight:700;font-size:13px;margin-bottom:12px;}
.usp h3{font-size:20px;color:var(--bone);margin-bottom:8px;}
.usp p{font-size:14px;color:var(--ash);margin:0;}
.starts{margin-top:30px;font-family:ui-monospace,Menlo,monospace;font-size:13px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ash);line-height:2;}
.starts .a{color:var(--frost);}
.starts b{color:var(--bone-dim);}

/* closer */
.closer{text-align:center;padding:clamp(110px,18vh,210px) 0;background:linear-gradient(180deg,var(--ink-1),var(--ink-0));border-top:1px solid var(--line);}
.closer h2{font-size:clamp(44px,11vw,150px);color:var(--bone);line-height:.9;}
.closer h2 .a{color:var(--frost);}
.closer .meta{margin-top:38px;display:flex;justify-content:center;gap:14px 44px;flex-wrap:wrap;
  font-family:ui-monospace,Menlo,monospace;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ash);}
.closer .meta b{color:var(--bone);}
.closer .insp{margin:30px auto 0;max-width:780px;font-size:13.5px;color:var(--ash-dim);line-height:1.7;}
.closer .insp b{color:var(--ash);}

/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1);}
.rv.in{opacity:1;transform:none;}
.rv.d1{transition-delay:.07s;}.rv.d2{transition-delay:.14s;}.rv.d3{transition-delay:.21s;}.rv.d4{transition-delay:.28s;}
.stage.rv{transform:translateY(0) scale(.985);}
.stage.rv.in{transform:none;}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .plate{flex-direction:column;gap:30px;padding:96px clamp(18px,5vw,40px) 78px;}
  .stage{order:-1;width:100%;}
  .stage img,.hero .stage img{max-width:92vw;max-height:70svh;}
  .stage::after{inset:-8px;}
  .flank,.hero .flank{max-width:560px;width:100%;}
}
@media (max-width:760px){
  body{font-size:16px;}
  .triple{grid-template-columns:1fr;}
  .triple .col{border-right:0;border-bottom:1px solid var(--line);}
  .wrap{padding:0 clamp(20px,5vw,40px);}
  .cornermark{font-size:10px;left:16px;}
}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none;}
  .scrollcue .arr,.pill .dot,.co2.lethal .val,.co2.lethal .state{animation:none;}
  html{scroll-behavior:auto;}
}