/* ============================================================
   LONGWAVE — climate-data & satellite analytics
   Dark technical observatory UI. Tokens first (design system).
   ============================================================ */
:root{
  --bg:#07090d;          /* observatory near-black */
  --bg-2:#0a0d13;
  --panel:#0e1319;       /* raised instrument surface */
  --panel-2:#121821;
  --ink:#e6ebf0;         /* cold white */
  --dim:#8b97a5;
  --faint:#515c68;
  --amber:#ff9e2c;       /* heat accent */
  --hot:#ff5e3a;         /* extreme */
  --cool:#3aa0ff;        /* baseline / cold */
  --cool-deep:#2b6fb0;
  --line:rgba(230,235,240,.09);
  --line-2:rgba(230,235,240,.05);
  --max:1280px;
  --ease:cubic-bezier(.16,.84,.28,1);   /* signature: "orbit" — expo-out settle */
  --ease-snap:cubic-bezier(.22,1,.3,1);
  --r:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;font-weight:400;line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
em{font-style:italic}
img{max-width:100%;display:block}
::selection{background:var(--amber);color:#160c00}

/* ---------- fixed decorative layers ---------- */
.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(255,158,44,.06), transparent 60%),
    radial-gradient(90% 70% at 12% 96%, rgba(58,160,255,.06), transparent 58%),
    linear-gradient(var(--line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size:auto,auto,44px 44px,44px 44px;
  -webkit-mask-image:radial-gradient(130% 100% at 50% 0%, #000 55%, transparent 100%);
          mask-image:radial-gradient(130% 100% at 50% 0%, #000 55%, transparent 100%)}
.scanlines{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.35;mix-blend-mode:overlay;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px)}
body>*:not(.bg-grid):not(.scanlines){position:relative;z-index:2}

/* ---------- type scale ---------- */
.eyebrow,.kicker,.hud-pill,.hud-coord,.mono{font-family:"Space Mono",monospace}
.eyebrow,.kicker{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);
  display:inline-flex;align-items:center;gap:.6em}
h1,h2,h3{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:600;letter-spacing:-.02em;line-height:1.03}
.hero-title{font-weight:600;font-size:clamp(2.5rem,7.4vw,5.6rem);line-height:.98;letter-spacing:-.03em}
.hero-title em{color:var(--amber);font-style:normal}
h2{font-size:clamp(1.9rem,4.4vw,3.1rem);font-weight:600}
h3{font-size:1.06rem;font-weight:600;letter-spacing:-.01em}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;
  padding:15px clamp(16px,4vw,40px);
  background:linear-gradient(180deg,rgba(7,9,13,.9),rgba(7,9,13,0));backdrop-filter:blur(6px)}
.brand{display:flex;align-items:center;gap:10px;font-family:"Space Grotesk",sans-serif;font-weight:700;
  font-size:1.02rem;letter-spacing:.16em}
.brand-mark{width:16px;height:16px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px solid rgba(255,158,44,.5);box-shadow:0 0 12px rgba(255,158,44,.35)}
.brand-mark span{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber)}
.nav-links{display:flex;gap:clamp(12px,2vw,26px);align-items:center;font-size:.86rem;color:var(--dim)}
.nav-links a{transition:color .3s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-cta{font-family:"Space Mono",monospace;font-size:.76rem;letter-spacing:.06em;
  border:1px solid var(--line);border-radius:6px;padding:8px 14px;color:var(--ink)!important;
  transition:border-color .3s,background .3s,color .3s}
.nav-cta:hover{border-color:var(--amber);background:rgba(255,158,44,.08)}
@media(max-width:820px){.nav-links a:not(.nav-cta){display:none}}

.pulse{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 0 rgba(255,158,44,.6);
  animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,158,44,.55)}70%{box-shadow:0 0 0 7px rgba(255,158,44,0)}100%{box-shadow:0 0 0 0 rgba(255,158,44,0)}}

/* ---------- hero ---------- */
.hero{max-width:var(--max);margin:0 auto;
  padding:clamp(112px,15vh,168px) clamp(16px,4vw,40px) clamp(48px,7vh,84px);
  display:grid;grid-template-columns:1fr;gap:clamp(32px,4vw,54px);align-items:center}
@media(min-width:980px){.hero{grid-template-columns:1.02fr 1.05fr}}
.eyebrow{margin-bottom:1.4rem}
.hero-sub{max-width:54ch;margin:1.6rem 0 2rem;color:var(--dim);font-size:clamp(1rem,1.2vw,1.12rem)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:8px;padding:12px 22px;font-size:.9rem;font-weight:500;
  border:1px solid var(--line);transition:transform .4s var(--ease),background .3s,border-color .3s,color .3s,box-shadow .3s;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--amber);color:#160c00;border-color:var(--amber);font-weight:600}
.btn-primary:hover{background:#ffb454;box-shadow:0 12px 34px -12px rgba(255,158,44,.6)}
.btn-ghost{color:var(--ink)}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber)}

.hero-mini{margin-top:2.4rem;display:grid;grid-template-columns:repeat(3,auto);gap:clamp(16px,3vw,34px);
  justify-content:start;border-top:1px solid var(--line);padding-top:1.4rem}
.hero-mini dt{font-family:"Space Mono",monospace;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:.4rem}
.hero-mini dd{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:1.3rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hero-mini dd span{font-family:"Space Mono",monospace;font-size:.7rem;color:var(--dim);font-weight:400;margin-left:2px}
@media(max-width:440px){.hero-mini{grid-template-columns:repeat(3,1fr);gap:14px}.hero-mini dd{font-size:1.05rem}}

/* ---------- globe stage ---------- */
.globe-stage{position:relative;width:100%;aspect-ratio:1/1;max-width:600px;margin-inline:auto;
  border-radius:16px;overflow:hidden;
  background:radial-gradient(120% 120% at 50% 42%,#0b111a 0%,#080b10 62%,#06080c 100%);
  box-shadow:inset 0 0 0 1px var(--line),0 50px 100px -60px rgba(0,0,0,.9)}
#globe{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#globe:active{cursor:grabbing}
.globe-stage.dragging #globe{cursor:grabbing}
.globe-fallback{position:absolute;inset:0;display:none;place-items:center}
.globe-fallback svg{width:88%;height:88%}
.no-webgl .globe-fallback,.static-globe .globe-fallback{display:grid}
.no-webgl #globe{display:none}
.globe-hud{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;
  font-family:"Space Mono",monospace;font-size:.62rem;letter-spacing:.08em;color:var(--dim);pointer-events:none}
.hud-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(7,9,13,.6);border:1px solid var(--line);
  padding:5px 9px;border-radius:20px;color:var(--amber);backdrop-filter:blur(4px)}
.hud-coord{background:rgba(7,9,13,.5);border:1px solid var(--line);padding:5px 9px;border-radius:6px;backdrop-filter:blur(4px)}
.metric-card{position:absolute;left:14px;bottom:14px;background:rgba(8,11,16,.66);border:1px solid var(--line);
  border-radius:12px;padding:12px 15px;backdrop-filter:blur(8px);max-width:66%}
.metric-lbl{display:block;font-family:"Space Mono",monospace;font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.metric-val{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(1.9rem,4.6vw,2.7rem);
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.metric-unit{font-size:.5em;color:var(--amber);margin-left:2px}
.metric-sub{display:block;margin-top:6px;font-family:"Space Mono",monospace;font-size:.6rem;letter-spacing:.04em;color:var(--faint)}
.metric-sub .up{color:var(--hot)}
.globe-cap{position:absolute;right:14px;bottom:16px;font-family:"Space Mono",monospace;font-size:.58rem;
  letter-spacing:.06em;color:var(--faint);text-align:right;max-width:36%;pointer-events:none}

/* ---------- section shell ---------- */
section{padding:clamp(64px,10vh,128px) clamp(16px,4vw,40px)}
.section-head{max-width:var(--max);margin:0 auto 2.6rem}
.kicker{margin-bottom:1rem}
.lede{max-width:60ch;margin-top:1rem;color:var(--dim);font-size:1.06rem}

/* ---------- layers ---------- */
.layers{border-top:1px solid var(--line-2)}
.layers-wrap{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:960px){.layers-wrap{grid-template-columns:1.35fr .9fr;align-items:start}}
.layer-panel{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:560px){.layer-panel{grid-template-columns:1fr 1fr}}
.lcard{position:relative;display:flex;gap:14px;align-items:flex-start;text-align:left;width:100%;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;cursor:pointer;
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease);color:inherit;font:inherit}
.lcard:hover{transform:translateY(-3px);border-color:rgba(230,235,240,.2)}
.lcard[aria-pressed=true]{background:var(--panel-2);border-color:var(--lc,var(--amber));
  box-shadow:0 0 0 1px var(--lc,var(--amber)),0 18px 40px -28px var(--lc,var(--amber))}
.lc-swatch{width:38px;height:38px;flex:none;border-radius:9px;position:relative;overflow:hidden;
  background:var(--sw,linear-gradient(135deg,#2b6fb0,#ff9e2c));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.lc-swatch::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 68% 30%,rgba(255,255,255,.5),transparent 42%),
             radial-gradient(circle at 30% 74%,rgba(0,0,0,.35),transparent 46%)}
.lc-body{flex:1;min-width:0}
.lc-name{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:.98rem;letter-spacing:-.01em;display:block}
.lc-desc{color:var(--dim);font-size:.8rem;line-height:1.45;margin-top:3px}
.lc-metric{font-family:"Space Mono",monospace;font-size:.68rem;color:var(--faint);margin-top:8px;letter-spacing:.03em}
.lc-metric b{color:var(--lc,var(--amber));font-weight:700}
.lc-switch{position:absolute;top:14px;right:14px;width:34px;height:19px;border-radius:20px;flex:none;
  background:var(--line);border:1px solid var(--line);transition:background .3s var(--ease)}
.lc-switch::after{content:"";position:absolute;top:1px;left:1px;width:15px;height:15px;border-radius:50%;
  background:var(--faint);transition:transform .3s var(--ease-snap),background .3s}
.lcard[aria-pressed=true] .lc-switch{background:color-mix(in srgb,var(--lc,var(--amber)) 35%,transparent)}
.lcard[aria-pressed=true] .lc-switch::after{transform:translateX(15px);background:var(--lc,var(--amber))}

/* legend */
.legend{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;position:sticky;top:88px}
.legend-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:14px}
.legend-title{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:1.02rem}
.legend-active{font-family:"Space Mono",monospace;font-size:.62rem;letter-spacing:.06em;color:var(--amber);
  border:1px solid var(--line);border-radius:20px;padding:3px 9px}
.legend-scale{height:12px;border-radius:6px;margin-bottom:7px;
  background:linear-gradient(90deg,#2b6fb0,#3aa0ff,#7fb2c9,#d9c48a,#ff9e2c,#ff5e3a,#d8341c);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.legend-ticks{display:flex;justify-content:space-between;font-family:"Space Mono",monospace;font-size:.6rem;
  color:var(--faint);letter-spacing:.04em}
.legend-note{color:var(--dim);font-size:.8rem;line-height:1.5;margin:14px 0}
.legend-read{list-style:none;border-top:1px solid var(--line-2);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.legend-read li{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.8rem;color:var(--dim)}
.legend-read .lr-city{display:flex;align-items:center;gap:8px}
.legend-read .lr-dot{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 6px currentColor}
.legend-read .lr-val{font-family:"Space Mono",monospace;font-size:.76rem;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- signal / warming stripes ---------- */
.signal{border-top:1px solid var(--line-2)}
.chart-card{max-width:var(--max);margin:0 auto;background:var(--panel);border:1px solid var(--line);
  border-radius:calc(var(--r) + 4px);padding:clamp(16px,2.4vw,26px)}
.chart-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.chart-readout{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.ro-year{font-family:"Space Mono",monospace;font-size:1rem;color:var(--dim);letter-spacing:.06em}
.ro-anom{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(1.9rem,4vw,2.6rem);
  line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ro-unit{font-size:.5em;color:var(--amber);margin-left:1px}
.ro-note{font-size:.82rem;color:var(--faint);font-style:italic}
.mini{font-family:"Space Mono",monospace;font-size:.78rem;color:var(--ink);background:transparent;
  border:1px solid var(--line);border-radius:7px;padding:9px 14px;cursor:pointer;transition:border-color .3s,color .3s,background .3s}
.mini:hover{border-color:var(--amber);color:var(--amber)}
.mini[aria-pressed=true]{border-color:var(--amber);color:var(--amber);background:rgba(255,158,44,.08)}
.chart-stage{position:relative;width:100%}
#stripes{width:100%;height:210px;display:block;border-radius:8px}
@media(min-width:700px){#stripes{height:250px}}
.chart-cursor{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);pointer-events:none;
  box-shadow:0 0 8px rgba(230,235,240,.6);opacity:0;transition:opacity .2s}
.chart-card:hover .chart-cursor,.chart-cursor.on{opacity:.85}
.scrub{display:flex;align-items:center;gap:14px;margin-top:18px}
.scrub-end{font-family:"Space Mono",monospace;font-size:.66rem;color:var(--faint);letter-spacing:.06em}
.scrub-range{-webkit-appearance:none;appearance:none;flex:1;height:3px;border-radius:3px;cursor:pointer;
  background:linear-gradient(90deg,var(--cool-deep),var(--cool),#7fb2c9,#d9c48a,var(--amber),var(--hot));outline:none}
.scrub-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--ink);
  border:2px solid var(--bg);box-shadow:0 0 0 1px var(--amber),0 0 12px rgba(255,158,44,.5);transition:transform .15s}
.scrub-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--ink);border:2px solid var(--bg);box-shadow:0 0 0 1px var(--amber)}
.scrub-range:active::-webkit-slider-thumb{transform:scale(1.18)}
.scrub-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--amber)}

/* ---------- stats ---------- */
.stats-band{border-top:1px solid var(--line-2)}
.stats{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:26px 20px}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{border-left:1px solid var(--line);padding-left:16px}
.s-num{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(2rem,4.2vw,3rem);line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.s-suf{font-family:"Space Mono",monospace;font-size:.82rem;color:var(--amber);margin-left:5px}
.s-lbl{display:block;margin-top:8px;font-family:"Space Mono",monospace;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.s-delta{display:inline-block;margin-top:8px;font-family:"Space Mono",monospace;font-size:.62rem;letter-spacing:.04em;color:var(--dim)}
.s-delta.up{color:var(--hot)}

/* ---------- method ---------- */
.method{border-top:1px solid var(--line-2)}
.method-grid{max-width:var(--max);margin:0 auto;list-style:none;display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--line-2);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
@media(min-width:640px){.method-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.method-grid{grid-template-columns:repeat(4,1fr)}}
.mcard{background:var(--bg);padding:clamp(22px,2.6vw,32px);transition:background .4s var(--ease)}
.mcard:hover{background:var(--panel)}
.m-n{font-family:"Space Mono",monospace;font-size:.72rem;color:var(--amber);letter-spacing:.1em}
.mcard h3{margin:12px 0 8px}
.mcard p{color:var(--dim);font-size:.9rem;line-height:1.5}

/* ---------- cta ---------- */
.cta{text-align:center;border-top:1px solid var(--line-2)}
.cta-eyebrow{font-family:"Space Mono",monospace;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:1.2rem}
.cta-line{font-size:clamp(2rem,6vw,4rem);line-height:1.04;max-width:16ch;margin:0 auto}
.cta-line em{color:var(--amber);font-style:normal}
.cta-sub{max-width:52ch;margin:1.5rem auto 2rem;color:var(--dim);font-size:1.02rem}
.cta .hero-actions{justify-content:center}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);padding:clamp(36px,6vh,60px) clamp(16px,4vw,40px)}
.foot-top{max-width:var(--max);margin:0 auto 20px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot-brand{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.2rem;letter-spacing:.16em}
.foot-links{display:flex;gap:18px;font-size:.86rem;color:var(--dim)}
.foot-links a:hover{color:var(--amber)}
.foot-bottom{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:"Space Mono",monospace;font-size:.66rem;color:var(--faint);letter-spacing:.03em}
.foot-bottom a{color:var(--dim)}.foot-bottom a:hover{color:var(--amber)}

/* ---------- reveal + motion ---------- */
.js .reveal{opacity:0;transform:translateY(22px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .hero-title .line{overflow:hidden;display:block}
.js .hero-title .line>span{display:inline-block;transform:translateY(112%);transition:transform 1.05s var(--ease)}
.hero.loaded .hero-title .line>span{transform:translateY(0)}
.hero.loaded .reveal{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.hero .eyebrow{transition-delay:.05s}
.hero .line:nth-child(1)>span{transition-delay:.12s}
.hero .line:nth-child(2)>span{transition-delay:.22s}
.hero .line:nth-child(3)>span{transition-delay:.32s}
.hero .hero-sub{transition-delay:.42s}.hero .hero-actions{transition-delay:.52s}
.hero .hero-mini{transition-delay:.6s}.hero .globe-stage{transition-delay:.3s}

a:focus-visible,.btn:focus-visible,.mini:focus-visible,.lcard:focus-visible,.scrub-range:focus-visible,.nav-cta:focus-visible{
  outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}

@media (prefers-reduced-motion:reduce){
  .reveal,.js .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .hero-title .line>span{transform:none!important;transition:none!important}
  .pulse{animation:none!important}
  *{scroll-behavior:auto!important}
}