/* Base of the page: the fixed canvas, the bar, the loader, and the tokens.
   Chapter styling and motion live in story.css (the rig's file). */
:root {
  --brand: #016B60;
  --brand-deep: #163A31;
  --mint: #9AC7BC;
  --mint-glow: #50D2C1;
  --ink: #0B1A16;
  --paper: #F7F8F6;
  --glass: rgba(8, 26, 22, .38);
  --glass-line: rgba(207, 231, 224, .22);
  /* (owner 26 Sep: "in the style of Hyperliquid and the Hyper Foundation") their
     system: a light serif for display (Teodor 300 there; Newsreader Light, its
     closest free match, here) and Inter for everything functional */
  --display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "Space Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
  --bar-h: 64px;
}
* { box-sizing: border-box; }
html { background: #0E7FB8; }
body { margin: 0; color: var(--paper); font-family: var(--sans); background: #0E7FB8; -webkit-font-smoothing: antialiased; }
/* 100lvh: the canvas always covers the largest viewport, so a phone's toolbar
   sliding away never uncovers a strip of page; main.js sizes the drawing
   buffer from this box, never from innerHeight. */
#city { position: fixed; inset: 0 auto auto 0; width: 100vw; height: 100vh; height: 100lvh; display: block; z-index: 0; }
.tilt-veil { position: fixed; inset: 0; pointer-events: none; z-index: 1; }

.eco-bar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--bar-h); z-index: 20;
  display: flex; align-items: center; gap: 16px; padding: 0 max(16px, env(safe-area-inset-left)) 0 max(16px, env(safe-area-inset-right));
}
/* the site's name, hyperliquidstory.world, as a wordmark (no Launch app button) */
.eco-logo { display: inline-flex; align-items: baseline; color: var(--paper); text-decoration: none; font-family: var(--display); font-size: 21px; font-weight: 350; letter-spacing: -.01em; font-variation-settings: "opsz" 24; }
.eco-logo b { font-weight: 350; color: var(--mint-glow); }
/* the Hyperliquid mark before the name, sitting on its baseline */
.eco-logo { gap: 9px; }
.eco-mark { width: 27px; height: 18px; flex: none; align-self: center; }
.eco-mark path { fill: #97FCE4; }
html.eco-sky .eco-mark path { fill: #0A7A66; }
.eco-nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.eco-meter { width: 120px; height: 2px; background: rgba(255,255,255,.25); position: relative; overflow: hidden; }
.eco-meter i { position: absolute; inset: 0; background: var(--mint); transform-origin: left; transform: scaleX(0); }
.eco-logo:focus-visible { outline: 2px solid var(--mint-glow); outline-offset: 3px; }

/* skip link: out of sight until a keyboard reaches it */
.skip { position: fixed; top: 10px; left: 16px; z-index: 60; padding: 10px 14px; background: var(--mint); color: var(--ink); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transform: translateY(-160%); transition: transform .2s ease; }
.skip:focus, .skip:focus-visible { transform: none; outline: 2px solid var(--mint-glow); outline-offset: 3px; }
#story:focus { outline: none; }

.loader { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 38%, #0F4A40 0%, #072B25 55%, #04161A 100%); transition: opacity .8s ease, visibility .8s; }
.loader.done { opacity: 0; visibility: hidden; }
.loader-in { display: grid; justify-items: center; gap: 14px; }
.loader-in { gap: 18px; padding: 0 24px; text-align: center; }
.hl-mark { width: 96px; height: 64px; overflow: visible; }
.hl-mark path { fill: #97FCE4; transform-origin: 60px 40px; animation: hl-breathe 3.2s ease-in-out infinite; filter: drop-shadow(0 0 18px rgba(151, 252, 228, .35)); }
@keyframes hl-breathe {
  0%, 100% { transform: scale(1, 1) rotate(0deg); }
  25% { transform: scale(1.06, .94) rotate(-2deg); }
  50% { transform: scale(.96, 1.05) rotate(0deg); }
  75% { transform: scale(1.04, .97) rotate(2deg); }
}
.loader-title { margin: 6px 0 0; font-family: var(--display); font-weight: 300; font-size: clamp(30px, 4vw, 52px); line-height: 1.05; letter-spacing: -.02em; color: var(--paper); }
.loader-title em { font-style: normal; color: #97FCE4; }
.loader-fact { margin: 0; min-height: 1.5em; max-width: 60ch; font-family: var(--sans); font-size: 15px; line-height: 1.5; color: rgba(247, 248, 246, .78); transition: opacity .45s ease, transform .45s ease; }
.loader-fact.out { opacity: 0; transform: translateY(6px); }
@media (prefers-reduced-motion: reduce) { .hl-mark path { animation: none; } }
.loader .bar { width: 180px; height: 2px; background: rgba(255,255,255,.18); overflow: hidden; }
.loader .bar i { display: block; height: 100%; background: var(--mint); transform-origin: left; transform: scaleX(0); transition: transform .3s ease; }
.noscript { position: fixed; inset: auto 0 40% 0; text-align: center; }
@media (max-width: 640px) {
  :root { --bar-h: 56px; }
  /* phones: no chapter label, but the meter stays as a hairline along the foot of the bar */
  .eco-nav { display: block; position: absolute; left: 0; right: 0; bottom: 0; transform: none; pointer-events: none; }
  .eco-step { display: none; }
  .eco-meter { display: block; width: 100%; height: 2px; background: rgba(255,255,255,.14); }
}

/* ── the plain-article fallback (index.html window.__ecoStatic) ──
   eco-static: every chapter is shown at once, each on its own soft panel
   (the fixed scrims would otherwise stack). eco-nogl: no city at all (no
   WebGL, or the GPU context is lost for a moment): a brand backdrop instead. */
html.eco-static .chapter::before, html.eco-static .scroll-cue, html.eco-static .eco-nav { display: none; }   /* no rig: nothing drives the cue or the meter */
html.eco-static .copy { padding: 22px 24px 26px; background: rgba(3, 24, 20, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html.eco-nogl #city { visibility: hidden; }
html.eco-nogl .tilt-veil { background: radial-gradient(120% 80% at 70% 20%, rgba(127, 242, 214, .16) 0%, rgba(127, 242, 214, 0) 60%), linear-gradient(180deg, #0E7FB8 0%, #0F5F6E 46%, #0B3A33 100%); }

/* ── checks: ?iso=1 (the pixel-exact comparison camera) shows the render alone ── */
html.eco-sheet .eco-bar, html.eco-sheet .tilt-veil, html.eco-iso .eco-bar, html.eco-iso .tilt-veil, html.eco-iso .story, html.eco-iso .skip, html.eco-iso .loader { display: none !important; }
html.eco-iso, html.eco-iso body { overflow: hidden; background: #1979C4; }