/* The chapter text over the city, in the main site's editorial language:
   Space Grotesk display at 300-400 with one mint word, Space Mono kickers and
   buttons, square corners, thin lines.
   (clear-opening, owner round 4) Under the rig every chapter's copy stands in
   ONE calm place and only fades: a column at the frame's edge over a soft
   shade (left or right, alternating) on wide screens, a sheet at the foot of
   the screen on phones. It never slides across the city: the rig marks a
   chapter .in once the camera has nearly arrived and .leaving as soon as it
   sets off again. The opening (html.eco-opening) is its own stage: the title
   in dark ink over the morning clouds (js/fx/clouds.js), the island far below.
   Without the rig (html.eco-static, no html.eco-rig) the chapters read as a
   plain scrolling article. */
:root {
  --story-ink: #F7F8F6;
  --story-soft: rgba(247, 248, 246, .84);
  --story-dim: rgba(247, 248, 246, .62);
  --story-accent: #50D2C1;
  --story-accent-ink: #06201C;
  --story-line: rgba(207, 231, 224, .34);
  --story-scrim: 3, 24, 20;               /* rgb of the soft dark scrim */
  --story-shadow: 0 1px 2px rgba(2, 18, 15, .45), 0 6px 28px rgba(2, 18, 15, .35);
  --story-pad-x: clamp(20px, 6vw, 104px);
  --story-top: calc(var(--bar-h, 64px) + 13vh);
  --story-ease: cubic-bezier(.2, .72, .12, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --story-accent: #50D2C1; }
}
:root[data-theme="dark"] { --story-accent: #50D2C1; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* a whisper of shade under the header so the bar reads over a bright city */
.tilt-veil { background: linear-gradient(180deg, rgba(var(--story-scrim), .34) 0, rgba(var(--story-scrim), 0) 150px); }

/* ── the story ─────────────────────────────────────────────────────────── */
.story { position: relative; z-index: 10; pointer-events: none; }
/* a fixed-camera or single-view page (module checks) shows the city alone */
html.eco-ready:not(.eco-rig) .story { display: none; }

.chapter {
  position: relative;
  min-height: 140vh;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 0 var(--story-pad-x);
}
.chapter-hero { min-height: 118vh; }
.chapter[data-side="right"] { align-items: flex-end; }
.chapter[data-side="center"] { align-items: center; text-align: center; }

/* the scrim: a soft pool of shade behind the copy, on the copy's side, fading with it */
.chapter::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity 1s ease;
  background:
    radial-gradient(44% 58% at 22% 42%, rgba(var(--story-scrim), .5) 0%, rgba(var(--story-scrim), .2) 60%, rgba(var(--story-scrim), 0) 100%),
    linear-gradient(90deg, rgba(var(--story-scrim), .54) 0%, rgba(var(--story-scrim), .34) 32%, rgba(var(--story-scrim), .12) 50%, rgba(var(--story-scrim), 0) 64%);
}
.chapter[data-side="right"]::before {
  background:
    radial-gradient(44% 58% at 78% 42%, rgba(var(--story-scrim), .5) 0%, rgba(var(--story-scrim), .2) 60%, rgba(var(--story-scrim), 0) 100%),
    linear-gradient(270deg, rgba(var(--story-scrim), .54) 0%, rgba(var(--story-scrim), .34) 32%, rgba(var(--story-scrim), .12) 50%, rgba(var(--story-scrim), 0) 64%);
}
.chapter[data-side="center"]::before {
  background:
    radial-gradient(56% 42% at 50% 26%, rgba(var(--story-scrim), .56) 0%, rgba(var(--story-scrim), .24) 58%, rgba(var(--story-scrim), 0) 100%),
    linear-gradient(180deg, rgba(var(--story-scrim), .3) 0%, rgba(var(--story-scrim), 0) 48%);
}
.chapter-hero::before {
  background:
    radial-gradient(52% 62% at 24% 46%, rgba(var(--story-scrim), .42) 0%, rgba(var(--story-scrim), .14) 60%, rgba(var(--story-scrim), 0) 100%),
    linear-gradient(90deg, rgba(var(--story-scrim), .48) 0%, rgba(var(--story-scrim), .26) 34%, rgba(var(--story-scrim), 0) 62%),
    linear-gradient(0deg, rgba(var(--story-scrim), .28) 0%, rgba(var(--story-scrim), 0) 30%);
}
.chapter.in::before { opacity: 1; }
.chapter.in.leaving::before { opacity: 0; transition-duration: .45s; }

.copy {
  position: sticky; top: var(--story-top);
  margin-top: 26vh;
  width: min(540px, 100%);
  color: var(--story-ink);
  text-shadow: var(--story-shadow);
}
.chapter-hero .copy { margin-top: var(--story-top); width: min(900px, 100%); }
.chapter[data-side="center"] .copy { width: min(860px, 100%); top: calc(var(--bar-h, 64px) + 7vh); }
.copy a { pointer-events: auto; }

/* ── type ── */
.kicker {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 22px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--story-accent);
}
.kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .8; flex: none; }
.chapter[data-side="center"] .kicker { justify-content: center; }

.copy h1, .copy h2 {
  margin: 0;
  font-family: var(--display); font-weight: 300; color: var(--story-ink);
  letter-spacing: -.022em; line-height: 1.02;
  text-wrap: balance;
}
.copy h1 { font-size: clamp(44px, 7.2vw, 100px); line-height: .94; }
.copy h2 { font-size: clamp(34px, 4.3vw, 62px); font-weight: 300; }
.copy h1 em, .copy h2 em { font-style: normal; color: var(--story-accent); font-weight: 300; }
/* (owner 26 Sep: tell it as a story) the chapter's moment, a dateline under the
   kicker: the plates read as pages of one chronicle */
.when { margin: 0; font-family: var(--sans); font-size: 12.5px; font-weight: 400; letter-spacing: .01em; color: var(--story-dim); }

.lede {
  margin: 26px 0 0; max-width: 46ch;
  font-size: clamp(15px, 1.25vw, 18px); line-height: 1.58; color: var(--story-soft);
  letter-spacing: -.003em;
}
.chapter[data-side="center"] .lede { margin-left: auto; margin-right: auto; }

/* ── calls to action: square, mono, brand ── */
.chip, .btn {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 28px; padding: 12px 22px;
  font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0; text-decoration: none;
  border-radius: 999px; text-shadow: none;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.chip { color: var(--story-accent-ink); border: 1px solid var(--story-accent); background: var(--story-accent); }
.chip::after, .btn::after { content: "→"; font-family: var(--sans); font-size: 15px; letter-spacing: 0; transition: transform .25s ease; }
.chip:hover { background: var(--story-ink); color: var(--story-accent-ink); border-color: var(--story-ink); }
.chip:hover::after, .btn:hover::after { transform: translateX(4px); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; }
.ctas .btn { margin-top: 0; }
.btn-primary { background: var(--story-accent); color: var(--story-accent-ink); border: 1px solid var(--story-accent); }
.btn-primary:hover { background: var(--story-ink); border-color: var(--story-ink); }
.btn-ghost { color: var(--story-ink); border: 1px solid var(--story-line); background: rgba(var(--story-scrim), .3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn-ghost:hover { border-color: var(--story-accent); color: var(--story-accent); }
.chip:focus-visible, .btn:focus-visible { outline: 2px solid var(--story-accent); outline-offset: 3px; }

/* ── the reveal: lines fade and rise in turn; heading words rise from a mask ── */
.copy > * { transition: opacity .7s ease, transform 1s var(--story-ease); transition-delay: 0s; }
html.eco-rig .copy > * { opacity: 0; transform: translate3d(0, 22px, 0); }
html.eco-rig .copy > h1, html.eco-rig .copy > h2 { opacity: 1; transform: none; }
.chapter.in .copy > * { opacity: 1; transform: none; }
.chapter.in .copy > :nth-child(1) { transition-delay: .05s; }
.chapter.in .copy > :nth-child(3) { transition-delay: .42s; }
.chapter.in .copy > :nth-child(4) { transition-delay: .56s; }
.chapter:not(.in) .copy > * { transition-duration: .35s, .5s; }

.copy .w { display: inline-block; vertical-align: top; clip-path: inset(-.8em -.5em -.24em -.5em); }
.copy .w > span {
  display: inline-block;
  transition: transform 1s var(--story-ease);
  transition-delay: calc(var(--i, 0) * 55ms + 120ms);
}
html.eco-rig .copy .w > span { transform: translate3d(0, 132%, 0); }
.chapter.in .copy .w > span { transform: none; }
.chapter:not(.in) .copy .w > span { transition-duration: .4s; transition-delay: 0s; }
/* leaving: a quick fade in place (no drop), before the copy slides off its spot */
html.eco-rig .chapter.in.leaving .copy > * { opacity: 0; transform: none; transition-duration: .3s; transition-delay: 0s; }
/* the rig switches the hidden state on without animating it */
html.eco-boot .copy > *, html.eco-boot .copy .w > span, html.eco-boot .chapter::before { transition: none !important; }

/* ── the hero's scroll cue: pinned to the screen, gone at the first scroll ── */
.scroll-cue {
  position: fixed; left: 50%; top: auto; bottom: calc(28px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: grid; justify-items: center; gap: 12px;
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--story-soft);
  text-shadow: var(--story-shadow);
  opacity: 0; transition: opacity .8s ease .9s;
}
.chapter-hero.in .scroll-cue { opacity: 1; }
.chapter-hero:not(.in) .scroll-cue, html.eco-moved .chapter-hero .scroll-cue { opacity: 0; transition: opacity .25s ease 0s; }
.scroll-cue i { position: relative; display: block; width: 1px; height: 46px; background: rgba(247, 248, 246, .28); overflow: hidden; }
.scroll-cue i::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%;
  background: var(--story-accent);
  animation: eco-cue 2.2s cubic-bezier(.6, 0, .3, 1) infinite;
}
@keyframes eco-cue {
  0% { transform: translateY(-110%); }
  70%, 100% { transform: translateY(260%); }
}

/* ── phones: copy at the bottom, full width, the city above it ── */
@media (max-width: 700px), (max-aspect-ratio: 4/5) {
  :root { --story-pad-x: 16px; }
  .chapter, .chapter[data-side="right"], .chapter[data-side="center"] { align-items: stretch; text-align: left; }
  .chapter-hero { min-height: 112vh; }
  .copy, .chapter-hero .copy, .chapter[data-side="center"] .copy {
    position: sticky; top: auto; bottom: calc(22px + env(safe-area-inset-bottom));
    margin-top: auto; margin-bottom: calc(22px + env(safe-area-inset-bottom));
    width: 100%;
  }
  .chapter::before, .chapter[data-side="right"]::before, .chapter[data-side="center"]::before, .chapter-hero::before {
    background: linear-gradient(0deg, rgba(var(--story-scrim), .82) 0%, rgba(var(--story-scrim), .6) 26%, rgba(var(--story-scrim), .18) 46%, rgba(var(--story-scrim), 0) 60%);
  }
  .kicker { font-size: 11px; margin-bottom: 14px; }
  .chapter[data-side="center"] .kicker { justify-content: flex-start; }
  .copy h1 { font-size: clamp(44px, 12vw, 64px); }
  .copy h2 { font-size: clamp(30px, 8.4vw, 42px); line-height: 1.02; }
  .lede { margin-top: 14px; font-size: 15px; line-height: 1.52; }
  .chapter[data-side="center"] .lede { margin-left: 0; }
  .chip { margin-top: 18px; }
  .ctas { justify-content: flex-start; margin-top: 22px; }
  .ctas .btn { flex: 1 1 auto; justify-content: space-between; }
  .scroll-cue { display: none; }

  /* portrait tablets: the same stack, with tablet-sized gutters and type */
  @media (min-width: 600px) {
    :root { --story-pad-x: clamp(24px, 5vw, 48px); }
    .copy h2 { font-size: clamp(34px, 6vw, 52px); }
    .lede { font-size: 16.5px; max-width: 52ch; }
    .ctas .btn { flex: 0 1 auto; min-width: 220px; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .copy > *, .copy .w > span { transition-duration: .01s !important; transition-delay: 0s !important; transform: none !important; }
  .scroll-cue i::after { animation: none; }
  /* no word mask here, so the headings cross-fade with the rest of the copy */
  html.eco-rig .copy > h1, html.eco-rig .copy > h2 { opacity: 0; transition: opacity .2s linear !important; }
  html.eco-rig .chapter.in .copy > h1, html.eco-rig .chapter.in .copy > h2 { opacity: 1; }
  html.eco-rig .chapter.in.leaving .copy > h1, html.eco-rig .chapter.in.leaving .copy > h2 { opacity: 0; }
}

/* ══ the rig's stage (clear-opening, owner round 4) ═══════════════════════════
   Everything below applies only while the rig runs the story. */
html.eco-rig:not(.eco-static) .chapter { min-height: 140vh; }
html.eco-rig:not(.eco-static) .copy {
  position: fixed; top: calc(50% + var(--bar-h, 64px) / 2); left: var(--story-pad-x); right: auto;
  margin: 0; width: min(460px, 32vw);
  transform: translate3d(0, -50%, 0);
}
html.eco-rig:not(.eco-static) .chapter[data-side="right"] .copy { left: auto; right: var(--story-pad-x); }
html.eco-rig:not(.eco-static) .chapter[data-side="center"]:not(.chapter-hero) .copy { left: 0; right: 0; margin: 0 auto; width: min(760px, 70vw); top: calc(var(--bar-h, 64px) + 6vh); transform: none; }
/* invisible copy never takes a click */
html.eco-rig:not(.eco-static) .copy a { pointer-events: none; }
html.eco-rig:not(.eco-static) .chapter.in:not(.leaving) .copy a { pointer-events: auto; }
/* the side column's type: calmer than the old free-floating copy */
html.eco-rig:not(.eco-static) .copy h2 { font-size: clamp(30px, 3.2vw, 50px); line-height: 1.02; }
html.eco-rig:not(.eco-static) .lede { margin-top: 20px; font-size: clamp(15px, 1.08vw, 17px); line-height: 1.6; max-width: 42ch; }
html.eco-rig:not(.eco-static) .kicker { margin-bottom: 18px; }
/* (owner 26 Sep: "take the idea from Hyperliquid's and the Hyper Foundation's own
   sites, in that style") their dark-first language: the copy stands on a deep
   forest-green pane (frosted, the city only softened behind it), large soft
   corners, no border; an Inter eyebrow (number, name, and the chapter's date
   on the right) over a hairline; the headline in a light serif with one
   Hyperliquid-green phrase; Inter body; fully rounded pill buttons. */
html.eco-rig:not(.eco-static) .chapter:not(.chapter-hero) .copy {
  box-sizing: border-box; width: min(480px, 33vw); padding: 32px 38px 36px;
  text-shadow: none;
  /* a lower-third placard: it stands in the near, lens-blurred foreground at the
     frame's lower corner, never across the sharp band where the landmark is */
  top: auto; bottom: max(36px, 6vh); transform: none;
}
html.eco-rig:not(.eco-static) .chapter:not(.chapter-hero) .copy h2 { font-size: clamp(32px, 2.9vw, 46px); }
html.eco-rig:not(.eco-static) .chapter:not(.chapter-hero) .lede { font-size: clamp(14.5px, 1.02vw, 16px); line-height: 1.62; }
.head { display: flex; align-items: baseline; gap: 10px; }
.head .meta { display: contents; }
.head .kicker { margin: 0; }
.head .kicker::before { display: none; }
.head .when { margin: 0 0 0 auto; padding-left: 12px; }
.num { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; color: var(--story-accent); }
.num::after { content: "·"; margin-left: 10px; opacity: .7; }
html.eco-rig:not(.eco-static) .chapter:not(.chapter-hero) .head { padding-bottom: 16px; margin-bottom: 22px; border-bottom: 1px solid rgba(207, 231, 224, .14); }
html.eco-rig:not(.eco-static) .chapter:not(.chapter-hero) .copy::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(165deg, rgba(10, 46, 39, .84) 0%, rgba(4, 26, 22, .8) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(1.1); backdrop-filter: blur(24px) saturate(1.1);
  border-radius: 28px;
  box-shadow: 0 34px 80px -30px rgba(1, 12, 10, .7);
  opacity: 0; transform: translate3d(-10px, 0, 0);
  transition: opacity .6s ease, transform 1s var(--story-ease);
}
html.eco-rig:not(.eco-static) .chapter[data-side="right"] .copy::before { transform: translate3d(10px, 0, 0); }
html.eco-rig:not(.eco-static) .chapter.in .copy::before { opacity: 1; transform: none; }
html.eco-rig:not(.eco-static) .chapter.in.leaving .copy::before { opacity: 0; transition-duration: .3s; transition-delay: 0s; }

/* the column's shade: from the frame's edge, deepest behind the text (a soft
   pool at the copy's height, so white snow or sand behind a line still reads),
   the city clear beyond ~half the frame */
/* (clear-check) the plate carries the reading now: the edge shade is only a
   light cinematic falloff on the copy's side, the city stays bright */
html.eco-rig:not(.eco-static) .chapter::before {
  background:
    radial-gradient(46% 52% at 14% 90%, rgba(var(--story-scrim), .3) 0%, rgba(var(--story-scrim), .1) 60%, rgba(var(--story-scrim), 0) 100%),
    linear-gradient(90deg, rgba(var(--story-scrim), .24) 0%, rgba(var(--story-scrim), .12) 22%, rgba(var(--story-scrim), 0) 40%),
    linear-gradient(180deg, rgba(var(--story-scrim), .14) 0%, rgba(var(--story-scrim), 0) 20%);
}
html.eco-rig:not(.eco-static) .chapter[data-side="right"]::before {
  background:
    radial-gradient(46% 52% at 86% 90%, rgba(var(--story-scrim), .3) 0%, rgba(var(--story-scrim), .1) 60%, rgba(var(--story-scrim), 0) 100%),
    linear-gradient(270deg, rgba(var(--story-scrim), .24) 0%, rgba(var(--story-scrim), .12) 22%, rgba(var(--story-scrim), 0) 40%),
    linear-gradient(180deg, rgba(var(--story-scrim), .14) 0%, rgba(var(--story-scrim), 0) 20%);
}

/* ── the opening: the title in dark ink over the morning clouds ── */
/* (owner 26 Sep: a slower way in, a real stop on the whole island) the hero's
   long scroll; the eco-rig selector matched so the rig's 140vh no longer wins */
html.eco-opening.eco-rig:not(.eco-static) .chapter-hero { min-height: 280vh; }
html.eco-opening .chapter-hero::before { display: none; }
html.eco-opening .chapter-hero .copy {
  top: calc(var(--bar-h, 64px) + 6.5vh); left: 0; right: 0; margin: 0 auto;
  width: min(1120px, 88vw); text-align: center; transform: none;
  color: #0B2A24;
  text-shadow: 0 0 26px rgba(255, 255, 255, .8), 0 0 2px rgba(255, 255, 255, .6);
  transform-origin: 50% 0;
  will-change: opacity, transform;
}
html.eco-opening .chapter-hero .kicker { justify-content: center; color: #016B60; font-weight: 700; }
html.eco-opening .chapter-hero .kicker::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .8; flex: none; }
html.eco-opening .chapter-hero .copy h1 { color: #0B2A24; font-size: clamp(40px, 5.3vw, 86px); line-height: .98; font-weight: 300; }
html.eco-opening .chapter-hero .copy h1 em { color: #0A7A66; font-weight: 400; }
html.eco-opening .chapter-hero .lede { margin: 22px auto 0; max-width: 56ch; color: rgba(11, 42, 36, .82); font-size: clamp(15px, 1.12vw, 18px); text-wrap: balance; }
/* (owner 26 Sep: "fix paragraph") no word left alone on a last line: the plates'
   copy breaks "pretty" (the browser re-flows the last lines to avoid an orphan) */
.lede { text-wrap: pretty; }
.copy h1, .copy h2 { text-wrap: balance; }
html.eco-opening .scroll-cue { color: rgba(11, 42, 36, .7); text-shadow: 0 0 14px rgba(255, 255, 255, .8); }
html.eco-opening .scroll-cue i { background: rgba(11, 42, 36, .2); }
html.eco-opening .scroll-cue i::after { background: #016B60; }

/* the header over the bright sky: dark ink, no shade; back to light over the city */
.eco-logo, .eco-step { transition: color .6s ease; }
.tilt-veil { transition: opacity .6s ease; }
html.eco-sky .eco-logo, html.eco-sky .eco-step { color: #0B2A24; }
html.eco-sky .eco-meter { background: rgba(11, 42, 36, .18); }
html.eco-sky .eco-meter i { background: #016B60; }
html.eco-sky .tilt-veil { opacity: 0; }

/* (notes-opening, the owner: "I like that here it is still empty, no text")
   The first plan shows only the far island, the sea and the clouds: the title
   waits for the first scroll (the rig adds .title-on), comes up over the sky
   with the usual reveal, holds, and the rig lifts it away (scrubbed).
   From then on, through the clouds parting, the approach and the hold on the
   whole city, html.eco-clear: no shade anywhere (no header shade, no vignette:
   rig.js tone()); the shades come back with chapter one's text. */
html.eco-rig.eco-opening .chapter-hero:not(.title-on) .copy > * { opacity: 0; transform: translate3d(0, 22px, 0); transition-duration: .35s, .5s; transition-delay: 0s; }
html.eco-rig.eco-opening .chapter-hero:not(.title-on) .copy .w > span { transform: translate3d(0, 132%, 0); transition-duration: .4s; transition-delay: 0s; }
html.eco-clear .tilt-veil { opacity: 0; }
/* (the old scroll cue stood over the island's busy south shore at the frame's
   foot and read as clutter: the first plan keeps no words at all) */
html.eco-opening .scroll-cue { display: none; }

/* the clouds (js/fx/clouds.js): over the city, under the copy and the bar */
.eco-clouds { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; contain: strict; }
.eco-cloud { position: absolute; left: 0; top: 0; display: block; transform-origin: 50% 50%; will-change: transform, opacity; }
/* the morning haze: pale above (behind the title), a clear window on the island */
.eco-sky-veil {
  position: absolute; inset: 0; will-change: opacity;
  background:
    radial-gradient(40% 36% at 50% 74%, rgba(232, 242, 249, 0) 0%, rgba(232, 242, 249, .16) 55%, rgba(232, 242, 249, .5) 100%),
    linear-gradient(180deg, rgba(236, 244, 250, .92) 0%, rgba(236, 244, 250, .7) 30%, rgba(236, 244, 250, .22) 52%, rgba(236, 244, 250, 0) 66%);
}
.eco-clouds.portrait .eco-sky-veil {
  background:
    radial-gradient(60% 26% at 50% 74%, rgba(232, 242, 249, 0) 0%, rgba(232, 242, 249, .16) 55%, rgba(232, 242, 249, .5) 100%),
    linear-gradient(180deg, rgba(236, 244, 250, .94) 0%, rgba(236, 244, 250, .74) 36%, rgba(236, 244, 250, .2) 56%, rgba(236, 244, 250, 0) 68%);
}
html.eco-static .eco-clouds, html.eco-iso .eco-clouds, html.eco-check .eco-clouds, html.eco-sheet .eco-clouds { display: none; }

/* ── phones: one sheet at the foot of the screen; the title at the top ── */
@media (max-width: 700px), (max-aspect-ratio: 4/5) {
  html.eco-rig:not(.eco-static) .copy,
  html.eco-rig:not(.eco-static) .chapter[data-side="right"] .copy,
  html.eco-rig:not(.eco-static) .chapter[data-side="center"]:not(.chapter-hero) .copy {
    left: 0; right: 0; top: auto; bottom: 0; margin: 0; width: auto; transform: none;
    padding: 0 var(--story-pad-x) calc(26px + env(safe-area-inset-bottom));
  }
  html.eco-rig:not(.eco-static) .copy h2 { font-size: clamp(28px, 7.6vw, 40px); }
  html.eco-rig:not(.eco-static) .lede { margin-top: 12px; font-size: 15px; line-height: 1.52; max-width: 60ch; }
  html.eco-rig:not(.eco-static) .kicker { margin-bottom: 12px; }
  html.eco-rig:not(.eco-static) .chapter:not(.chapter-hero) .copy::before { display: none; }
  /* (clear-check) no plate on phones: the sheet at the foot has its own shade */
  html.eco-rig:not(.eco-static) .chapter:not(.chapter-hero) .copy {
    width: auto; padding: 0 var(--story-pad-x) calc(26px + env(safe-area-inset-bottom)); text-shadow: var(--story-shadow);
    bottom: 0;
  }
  html.eco-rig:not(.eco-static) .chapter:not(.chapter-hero) .copy h2 { font-size: clamp(28px, 7.6vw, 40px); }
  html.eco-rig:not(.eco-static) .chapter:not(.chapter-hero) .lede { font-size: 15px; }
  html.eco-rig:not(.eco-static) .chapter::before,
  html.eco-rig:not(.eco-static) .chapter[data-side="right"]::before {
    background: linear-gradient(0deg, rgba(var(--story-scrim), .86) 0%, rgba(var(--story-scrim), .7) 24%, rgba(var(--story-scrim), .3) 40%, rgba(var(--story-scrim), 0) 54%);
  }
  html.eco-opening .chapter-hero .copy {
    top: calc(var(--bar-h, 56px) + 4vh); bottom: auto; width: auto; padding: 0 var(--story-pad-x); text-align: center;
  }
  html.eco-opening .chapter-hero .copy h1 { font-size: clamp(34px, 9.6vw, 52px); }
  html.eco-opening .chapter-hero .kicker { justify-content: center; }
  html.eco-opening .chapter-hero .lede { margin: 14px auto 0; font-size: 14.5px; }
  html.eco-opening.eco-rig:not(.eco-static) .chapter-hero { min-height: 270vh; }
}
/* the clouds failed to build: no bright haze behind the title, so it keeps the light ink */
html.eco-noclouds .chapter-hero .copy, html.eco-noclouds .chapter-hero .copy h1 { color: var(--story-ink); text-shadow: var(--story-shadow); }
html.eco-noclouds .chapter-hero .copy h1 em, html.eco-noclouds .chapter-hero .kicker { color: var(--story-accent); }
html.eco-noclouds .chapter-hero .lede { color: var(--story-soft); }
html.eco-noclouds.eco-sky .eco-logo, html.eco-noclouds.eco-sky .eco-step { color: var(--paper); }
/* the header's words keep a soft shade over the city and the last clouds (none over the bright sky);
   the clouds sit under the header's own shade (.tilt-veil: same layer, later in the page) */
.eco-logo span, .eco-step { text-shadow: 0 1px 2px rgba(2, 18, 15, .4), 0 0 14px rgba(2, 18, 15, .3); transition: color .6s ease, text-shadow .6s ease; }
html.eco-sky .eco-logo span, html.eco-sky .eco-step { text-shadow: none; }

/* ── explore freely (owner 26 Sep): a small pill at the lower right of the last
   chapter; while exploring, the story's text steps away and a quiet bar at the
   foot shows the controls and the way back ── */
.explore-go, .explore-exit {
  font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0;
  border-radius: 999px; cursor: pointer; padding: 11px 20px;
  transition: opacity .5s ease, transform .5s var(--story-ease), background .25s ease, color .25s ease;
}
.explore-go {
  position: fixed; right: max(24px, 2.4vw); bottom: max(36px, 6vh); z-index: 25;
  color: #04201B; background: var(--story-accent); border: 1px solid var(--story-accent);
  box-shadow: 0 14px 34px -14px rgba(1, 12, 10, .6);
  opacity: 0; transform: translateY(10px); pointer-events: none;
}
html.eco-end:not(.eco-explore) .explore-go { opacity: 1; transform: none; pointer-events: auto; transition-delay: .6s; }
.explore-go:hover { background: var(--story-ink); border-color: var(--story-ink); }
.explore-bar {
  position: fixed; left: 50%; bottom: max(24px, 4vh); z-index: 25; transform: translate(-50%, 12px);
  display: flex; align-items: center; gap: 18px; padding: 8px 8px 8px 22px; border-radius: 999px;
  background: rgba(6, 30, 26, .72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 18px 44px -18px rgba(1, 12, 10, .7);
  opacity: 0; pointer-events: none; transition: opacity .5s ease, transform .5s var(--story-ease);
}
html.eco-explore .explore-bar { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.explore-hint { margin: 0; font-family: var(--sans); font-size: 13px; color: rgba(247, 248, 246, .8); white-space: nowrap; }
.explore-hint .coarse { display: none; }
@media (hover: none) { .explore-hint .fine { display: none; } .explore-hint .coarse { display: inline; } }
.explore-exit { color: var(--story-ink); background: rgba(247, 248, 246, .1); border: 1px solid rgba(247, 248, 246, .25); }
.explore-exit:hover { background: var(--story-accent); color: #04201B; border-color: var(--story-accent); }
html.eco-explore .story { opacity: 0; pointer-events: none; transition: opacity .5s ease; }
html.eco-explore, html.eco-explore body { overflow: hidden; touch-action: none; overscroll-behavior: none; }
html.eco-explore #city { cursor: grab; }
html.eco-explore:active #city { cursor: grabbing; }
@media (max-width: 700px), (max-aspect-ratio: 4/5) {
  .explore-go { right: 16px; bottom: auto; top: calc(var(--bar-h, 56px) + 12px); }
  .explore-bar { left: 16px; right: 16px; transform: translateY(12px); justify-content: space-between; padding-left: 16px; }
  html.eco-explore .explore-bar { transform: none; }
  .explore-hint { white-space: normal; font-size: 12px; }
}

/* ── phones (owner 26 Sep: "perfect on desktop, bad on mobile") ──
   The chapter text no longer lies straight on the busy city under a weak
   gradient: it stands in the same deep forest-green pane as on desktop, a
   floating sheet inset from the screen's edges, compact enough to leave the
   upper ~60% of the screen to the landmark. The header's line is a hairline. */
@media (max-width: 700px), (max-aspect-ratio: 4/5) {
  html.eco-rig:not(.eco-static) .chapter:not(.chapter-hero)::before { background: none; }
  html.eco-rig:not(.eco-static) .chapter:not(.chapter-hero) .copy {
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 18px 20px 20px; text-shadow: none;
  }
  html.eco-rig:not(.eco-static) .chapter:not(.chapter-hero) .copy::before {
    display: block; border-radius: 22px;
    background: linear-gradient(165deg, rgba(10, 46, 39, .88) 0%, rgba(4, 26, 22, .86) 100%);
    -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1);
    box-shadow: 0 20px 50px -24px rgba(1, 12, 10, .75);
    transform: translate3d(0, 10px, 0);
  }
  html.eco-rig:not(.eco-static) .chapter.in .copy::before { transform: none; }
  html.eco-rig:not(.eco-static) .chapter:not(.chapter-hero) .head { padding-bottom: 12px; margin-bottom: 14px; }
  .num, .head .kicker { font-size: 10.5px; }
  .head .when { font-size: 11.5px; }
  html.eco-rig:not(.eco-static) .chapter:not(.chapter-hero) .copy h2 { font-size: clamp(25px, 6.9vw, 32px); line-height: 1.06; }
  html.eco-rig:not(.eco-static) .chapter:not(.chapter-hero) .lede { margin-top: 10px; font-size: 14px; line-height: 1.5; }
  html.eco-rig:not(.eco-static) .chip { margin-top: 16px; padding: 10px 18px; font-size: 13.5px; }
  .ctas { margin-top: 18px; }
  .ctas .btn { flex: 0 0 auto; justify-content: center; padding: 11px 20px; font-size: 13.5px; }
  .eco-meter { height: 1px; background: rgba(255, 255, 255, .08); }
  .tilt-veil { background: linear-gradient(180deg, rgba(var(--story-scrim), .26) 0, rgba(var(--story-scrim), 0) 110px); }
}