/* ============================================================
   Globe-Eco — global stylesheet
   Section order: tokens, reset, utility, hero, placeholder.
   Timing tokens on :root are tunable live in DevTools.
   ============================================================ */

/* --- 1. Design tokens --- */

:root {
  --color-bg-primary: #0E0F0C;
  --color-bg-secondary: #161810;
  --color-bg-tertiary: #1F211A;
  --color-accent-primary: #C8922A;
  --color-accent-secondary: #E8B84B;
  --color-accent-warm: #A67420;
  --color-text-primary: #F2EDE4;
  --color-text-secondary: #B8B0A0;
  --color-text-tertiary: #6E6860;
  --color-border-subtle: #2A2C24;
  --color-border-medium: #3D3F35;

  --font-display: 'Lora', 'Georgia', serif;
  --font-body: 'Inter', 'DM Sans', 'Helvetica Neue', sans-serif;
  --font-data: 'DM Mono', 'JetBrains Mono', 'Courier New', monospace;

  --text-display-hero: clamp(2.4rem, 4.4vw, 4rem);
  --text-display-section: clamp(2rem, 4vw, 3.5rem);
  --text-display-card: clamp(1.5rem, 2.5vw, 2rem);
  --text-display-outcome: clamp(1.4rem, 2.4vw, 2.1rem);
  --text-body-lead: clamp(1.15rem, 1.5vw, 1.4rem);
  --text-hero-aperture: clamp(1.05rem, 1.4vw, 1.25rem);
  --text-hero-resolution: clamp(1.5rem, 2.4vw, 2.1rem);
  --text-hero-proof: clamp(1.05rem, 1.4vw, 1.3rem);
  --text-body-regular: 1rem;
  --text-body-small: 0.875rem;

  /* Hero scroll-prompt motion. Tunable live. */
  --hero-prompt-pulse-duration: 2.4s;

  --content-max-width: 64rem;
  /* Canonical prose measure. 41rem ≈ 66-70ch at body size: the upper
     edge of the optimal reading band. Widened from 38rem 2026-06-03
     (reviewer feedback: column read skinny on wide screens; 41rem
     reduces scroll ~8% with no readability cost). */
  --prose-max-width: 41rem;
  --content-gutter: clamp(1.25rem, 4vw, 3rem);

}

/* --- 2. Reset & global defaults --- */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--font-body);
  font-size: var(--text-body-regular);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.section__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--content-gutter);
}

/* --- 3. Hero — single-frame asset door ---
   Rebuilt 2026-06-04. One viewport: the vibrant plantation beside
   the burn (the contrast is spatial, not scroll-temporal), the
   burn headline + outcomes subhead, then the capital-allocator
   door (asset / write-down / terms). The old two-stage
   broken/corrected device, its dimming filters, hue corrections,
   outcomes panel, scroll prompt, and resolution/proof lines are
   retired. */

.hero {
  position: relative;
  display: grid;
  grid-template-rows: minmax(40vh, 1fr) auto;
  background: var(--color-bg-primary);
  isolation: isolate;
}

.hero {
  min-height: 100svh;
  grid-template-rows: minmax(38vh, 1fr) auto auto;
}

/* --- Hero split-screen photographic zone --- */

.hero__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  /* The photographic zone takes about half the viewport on
     desktop. Slightly more on the broken view to keep the
     scroll prompt visible without crowding. */
  min-height: 48svh;
  overflow: hidden;
}

.hero .hero__split { min-height: 50svh; }

.hero__panel {
  position: relative;
  overflow: hidden;
  margin: 0;
  /* Each panel needs to fill its grid cell — figure default
     margin is reset above but display behavior is preserved. */
  display: flex;
  align-items: flex-end;
  background: var(--color-bg-secondary);
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__sky-ledger {
  /* Left panel ink treatment, v2 (2026-06-04): THE ASSET with the
     two detail lines stacked to its RIGHT, the whole row riding
     the sky-haze band so no line falls onto the treeline. Ink on
     sky, matching the smoke ladder: one typographic system. */
  position: absolute;
  top: 6%;
  left: 5%;
  right: 5%;
  z-index: 2;
  margin: 0;
  display: flex;
  align-items: flex-end;
  gap: clamp(1rem, 2vw, 2rem);
  pointer-events: none;
}

.hero__sky-title {
  font-family: var(--font-data);
  font-size: clamp(1.3rem, 2.2vw, 2.1rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1a1a16;
  text-shadow: 0 0 6px rgba(220, 228, 233, 0.55);
  white-space: nowrap;
}

.hero__sky-stack {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.hero__sky-detail {
  font-family: var(--font-data);
  font-size: clamp(0.8rem, 1.1vw, 1rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #26261f;
  text-shadow: 0 0 5px rgba(220, 228, 233, 0.5);
  white-space: nowrap;
}

/* --- Burn panel: the write-down in the smoke (option C) ---
   Three fragments laddering up the smoke column, dark ink stamped
   on the pale smoke, shrinking as they rise: the value going up
   in smoke, readable in either direction (magnitude up, or
   recurrence down to the fire). Position-tuned to
   husk-burn-clearing.jpg; each fragment's coordinates are custom
   properties for DevTools tuning. object-fit crop keeps the
   center on narrow viewports, so positions are center-biased.
   Below 720px the ladder collapses to the option-A chip (the
   stacked mobile panels are too short for a vertical ladder). */

.hero__smoke-ledger {
  /* Wind pass (2026-06-04): the smoke drifts right-to-left in
     the photograph, so the ladder rides it -- the magnitude sits
     far right where the smoke is whitest, and the fragments step
     up and LEFT as they rise, like the wind is carrying them. */
  --smoke-1-left: 58%;
  --smoke-1-bottom: 26%;
  --smoke-2-left: 48%;
  --smoke-2-bottom: 46%;
  --smoke-3-left: 40%;
  --smoke-3-bottom: 63%;
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  pointer-events: none;
}

.hero__smoke-line {
  position: absolute;
  font-family: var(--font-data);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: #1a1a16;
  text-shadow: 0 0 6px rgba(238, 240, 239, 0.55);
}

.hero__smoke-line--1 {
  left: var(--smoke-1-left);
  bottom: var(--smoke-1-bottom);
  font-size: clamp(1.1rem, 1.9vw, 1.8rem);
  /* The magnitude is the one fragment that must always be read:
     a touch more halo so the dark letters separate from the dark
     husk pile and barrels at the smoke's base. The upper two
     fragments stay fainter on purpose; fighting to see them
     through the smoke is the effect (Matthew, 2026-06-04). */
  text-shadow: 0 0 7px rgba(238, 240, 239, 0.7), 0 0 14px rgba(238, 240, 239, 0.4);
}

.hero__smoke-line--2 {
  left: var(--smoke-2-left);
  bottom: var(--smoke-2-bottom);
  font-size: clamp(0.85rem, 1.4vw, 1.3rem);
  color: #26261f;
  text-shadow: 0 0 5px rgba(238, 240, 239, 0.5);
}

.hero__smoke-line--3 {
  left: var(--smoke-3-left);
  bottom: var(--smoke-3-bottom);
  font-size: clamp(0.7rem, 1.05vw, 1rem);
  color: rgba(38, 38, 31, 0.78);
  text-shadow: 0 0 4px rgba(238, 240, 239, 0.45);
}

/* --- Hero typographic copy block --- */

.hero__content {
  position: relative;
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: clamp(2rem, 5vh, 3.5rem) var(--content-gutter) clamp(2rem, 5vh, 3.5rem);
}

.hero__eyebrow {
  font-family: var(--font-data);
  font-size: var(--text-body-small);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-primary);
  margin-bottom: 1.25rem;
}

/* Grounding variant — used when the eyebrow slot holds a quiet
   prose-rhythm caption (a place/time anchor) rather than a label.
   Flips the full register: body sans, sentence case, neutral
   tracking, muted color. Sized slightly larger to compensate for
   the loss of caps weight. Reads as documentary caption, not as
   marquee label. */
.hero__eyebrow--grounding {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--color-text-secondary);
}

.hero__headline {
  /* Center-axis pass (2026-06-04): the passage from the
     photographs to Section 2 is ceremonial (headline, verdict,
     terms, symmetric diagram), and reads down a centerline. The
     22ch wrap cap was a leftover from the two-stage hero where
     the photo split competed for width; the single-frame hero
     gives the headline the whole field, so it sets on one line. */
  font-family: var(--font-display);
  font-size: var(--text-display-hero);
  font-weight: 400;
  line-height: 1.08;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  margin: 0 auto 1.5rem;
  max-width: none;
  text-align: center;
}

.hero__aperture {
  font-family: var(--font-body);
  font-size: var(--text-hero-aperture);
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: 64ch;
}

.hero__verdict {
  /* The verdict after the charges (added 2026-06-04). Catches the
     "are they blaming the farmer?" objection mid-air and pivots the
     indictment from the man to the mechanism: if he is rational,
     the system that makes burning rational is the defendant. Also
     plants the adoption argument (when the incentive flips, the
     same rationality guarantees the burning stops). Primary color
     against the aperture's secondary; display serif as a deliberate
     register lift; its own beat, not a tail on the list. */
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-text-primary);
  margin: 1.75rem auto 0;
  max-width: 30ch;
  text-align: center;
}

/* --- Hero charges list --- */

.hero__charges {
  /* The indictments, one loss per line (converted from prose
     2026-06-04). The "And" anaphora is the device; the list form
     makes each loss land on its own beat. Body sans, secondary
     color: the charges are the evidence, the verdict below them
     is the headline moment. */
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-family: var(--font-body);
  font-size: var(--text-hero-aperture);
  color: var(--color-text-secondary);
  line-height: 1.45;
  max-width: 64ch;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  text-align: center;
}

/* --- CTA --- */
/* Retained for future use on other surfaces (contact-section three-pathway
   CTA, etc.). The corrected-view CTA was retired 2026-05-18 when the
   bridge line became the funnel into Section 2. */

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-data);
  font-size: var(--text-body-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-secondary);
  padding: 0.85rem 1.4rem;
  border: 1px solid var(--color-accent-primary);
  border-radius: 2px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.hero__cta:hover,
.hero__cta:focus-visible {
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  transform: translateY(-1px);
}

.hero__cta-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.hero__cta:hover .hero__cta-arrow,
.hero__cta:focus-visible .hero__cta-arrow {
  transform: translateY(2px);
}

/* --- 4. Bridge line ---
   The third application of the activation thesis, compressed into
   a single sentence between the corrected view and Section 2
   (Capital Activation). The line is both a literary moment and the
   only forward affordance — there is no corrected-view CTA above it.
   Spec: docs/GE-Hero-Concept-v4.md "Bridge line — locked 2026-05-18".

   The amber underline rule signals "this sentence is also a doorway"
   without collapsing the line into a button. The treatment is
   intentionally distinct from .hero__cta (a bordered button reserved
   for explicit CTAs elsewhere in the page). The bridge line is the
   only place this affordance language appears.
*/

/* --- Proof band (DRAFT 2026-05-29) ---------------------------------
   Threshold proof insert between the hero and the bridge line.
   Visually quiet on purpose: it must ground the hero's claims without
   competing with the hero above or stalling the bridge-line pivot
   below. Copy left, two product photos stacked on the right; stacks
   on mobile. Spec: project_threshold_architecture + project_dormant_asset_frame. */

.proof-band {
  background: var(--color-bg-primary);
  padding: clamp(2rem, 6vh, 4rem) var(--content-gutter) clamp(1rem, 3vh, 2rem);
}

.proof-band__inner {
  /* Reworked 2026-06-05 (option A): single centered column — copy
     on top, photo row beneath, spec strip beneath the photos. The
     old copy-left/photos-right grid left a dead zone under the
     short copy column. Copy and media are both centered on the
     page axis; prose stays left-aligned for readability. */
  max-width: var(--content-max-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 3.5vh, 2.5rem);
}

.proof-band__copy {
  max-width: 46ch;
}

.proof-band__media {
  /* Two product photos at equal register, SIDE BY SIDE (block left,
     board stack right), capped well below content width so they
     read as evidence, not a gallery. Equal 4/3 object-fit:cover
     frames keep the low-res board from advertising its resolution
     next to the high-res block; held until a higher-res board
     re-shoot lands. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  width: min(100%, 44rem);
}

.proof-band__specs[hidden] {
  /* display:grid below would otherwise defeat the hidden attribute;
     strip stays off until measured values land (TODO in index.html). */
  display: none;
}

.proof-band__product {
  margin: 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: 2px;
  overflow: hidden;
  background: var(--color-bg-secondary);
  aspect-ratio: 4 / 3;
}

.proof-band__product--hero { /* the hollow-core block: the engineered-component proof */ }
.proof-band__product--companion { /* the board stack: equal register with the block */ }

.proof-band__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.proof-band__eyebrow {
  font-family: var(--font-data);
  font-size: var(--text-body-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-primary);
  margin: 0 0 0.85rem;
}

.proof-band__lede {
  /* Re-tuned 2026-06-04: the lede now carries the door hook
     (~40 words, was 8), so the 30ch cap that suited a one-line
     epigram would stack it into a tower. Wider measure, one size
     step down, looser leading for a multi-line thesis statement. */
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  line-height: 1.4;
  color: var(--color-text-primary);
  margin: 0 0 1.25rem;
  max-width: 44ch;
}

.proof-band__body {
  font-family: var(--font-body);
  font-size: var(--text-hero-proof);
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0 0 0.9rem;
  max-width: 46ch;
}

.proof-band__body--close {
  margin-bottom: 0;
  color: var(--color-text-primary);
}

.proof-band__pointer {
  display: inline;
  color: var(--color-accent-secondary);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  white-space: nowrap;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

.proof-band__pointer:hover,
.proof-band__pointer:focus-visible {
  color: var(--color-accent-secondary);
  text-decoration-color: var(--color-accent-secondary);
  outline: none;
}

/* --- Proof band: spec strip (HIDDEN until measured values land,
       see TODO in index.html). Receipt line under the photos. --- */

.proof-band__specs {
  list-style: none;
  margin: 0;
  padding: clamp(0.75rem, 2vh, 1.25rem) 0 0;
  border-top: 1px solid var(--color-border-subtle);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  width: min(100%, 44rem); /* match the photo row it receipts */
}

.proof-band__spec {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.proof-band__spec-value {
  font-family: var(--font-data);
  font-size: var(--text-body);
  color: var(--color-text-primary);
}

.proof-band__spec-label {
  font-family: var(--font-data);
  font-size: var(--text-body-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

@media (max-width: 720px) {
  /* Photos stack vertically: block above, boards below. */
  .proof-band__media { grid-template-columns: 1fr; }
  .proof-band__specs { grid-template-columns: repeat(2, 1fr); }
  .proof-band__lede { max-width: none; }
  .proof-band__body { max-width: none; }
}

/* --- Terms band: the door close --- */

.terms-band {
  background: var(--color-bg-primary);
  /* Tightened 2026-06-04: the verdict above and the diagram below
     are the same movement; the dead zones between them were
     breaking the screen into islands. */
  padding: clamp(1rem, 2.5vh, 1.75rem) var(--content-gutter) clamp(0.5rem, 1.5vh, 1rem);
}

.terms-band__inner {
  max-width: var(--content-max-width);
  margin-inline: auto;
}

.terms-band__rule {
  /* The hinge: the visible turn from indictment to offer.
     Centered with the axis (center-axis pass 2026-06-04). */
  width: 6rem;
  margin: 0 auto 1.5rem;
  border: none;
  border-top: 1px solid var(--color-border-medium);
}

.terms-band__eyebrow {
  font-family: var(--font-data);
  font-size: var(--text-body-small);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-primary);
  margin: 0 0 1rem;
  text-align: center;
}

.terms-band__hook {
  /* The terms, serif, a half step under the verdict line: the
     verdict stays the loudest line of the passage, the hook gets
     its authority from the eyebrow above it. */
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.45;
  color: var(--color-text-primary);
  margin: 0 auto 1.25rem;
  max-width: 48ch;
  text-align: center;
}

.terms-band__terms {
  /* The terms in three falling beats (2026-06-04): the thesis
     flows as prose above; these land. Same cadence-stack device
     as the charges and the smoke ladder: the page's signature
     move, at its strongest instance. */
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.35;
  color: var(--color-text-primary);
  margin: 0 auto;
  text-align: center;
}

/* --- Theory-of-change model band ---
   Ported 2026-06-04 from the Technical Briefing v1.0 model page.
   Sits between the proof band and the bridge line: the physical
   key, then the picture of what turning it changes, then the
   funnel into Section 2. The SVG inherits the body font stack
   (no font-family on the SVG element by design) and themes
   entirely through CSS variables, so palette changes propagate. */
.toc-band {
  background: var(--color-bg-primary);
  padding: clamp(1rem, 2.5vh, 2rem) var(--content-gutter) clamp(2rem, 5vh, 3.5rem);
}

.toc-band__inner {
  max-width: var(--content-max-width);
  margin-inline: auto;
}

.toc-band__diagram {
  display: block;
  width: 100%;
  max-width: 50rem;
  height: auto;
  margin-inline: auto;
  font-family: var(--font-body);
}

.toc-band__caption {
  max-width: var(--prose-max-width);
  margin: 1.25rem auto 0;
  font-size: var(--text-body-small);
  line-height: 1.6;
  color: var(--color-text-secondary);
  text-align: center;
}

.toc-band__pointer {
  /* The first briefing scent (2026-06-04): placed where the
     reader has just absorbed the model and is asking whether it
     is rigorous anywhere. Deliberately NOT a link (Matthew): a
     live link here is an exit ramp before the page's best
     material; "downloadable below" promises the artifact and
     keeps the reader descending through the beats that warm the
     download into a conversation. */
  max-width: var(--prose-max-width);
  margin: 0.75rem auto 0;
  font-size: var(--text-body-small);
  line-height: 1.6;
  color: var(--color-text-tertiary);
  text-align: center;
}


@media (max-width: 720px) {
  /* The 800×600 viewBox stays legible down to ~480px wide; below
     that the 10px labels fall under comfortable reading size, so
     let the diagram scroll horizontally at a minimum width rather
     than shrink the type into illegibility. */
  .toc-band__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .toc-band__diagram {
    min-width: 34rem;
  }
}

.bridge {
  display: grid;
  place-items: center;
  /* Padding tightened 2026-05-18 so the bridge line sits within
     or near the same viewport as the corrected-view close.
     Original clamp(3rem, 9vh, 6rem) gave the bridge a standalone
     moment of whitespace but pushed it past the fold on most
     desktops. The line still reads as its own beat because the
     corrected view ends on a proof line set in body type and the
     bridge line is display serif italic — the register shift
     does the separation that whitespace was carrying. */
  padding: clamp(2rem, 5vh, 3.5rem) var(--content-gutter);
  background: var(--color-bg-primary);
}

.bridge__line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--color-text-primary);
  text-align: center;
  max-width: 32ch;

  /* The amber underline rule — the bridge line's signature affordance.
     Sized at 1px so it reads as a deliberate rule rather than a default
     underline. The offset pulls it visibly below the descenders so the
     italic does not sit on top of the rule. */
  text-decoration: underline;
  text-decoration-color: var(--color-accent-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;

  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

.bridge__line:hover,
.bridge__line:focus-visible {
  color: var(--color-accent-secondary);
  text-decoration-color: var(--color-accent-secondary);
  outline: none;
}

/* --- Responsive: mobile collapses the split-screen ---
   Below ~720px the two panels stack vertically. The lens-change
   is still performed by the scroll; the panels become image
   strips above each copy block. */

@media (max-width: 720px) {
  .hero__split {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero__panel { min-height: 32svh; }
  /* Sky ledger on the short stacked mobile panel: same row,
     sizes pulled down. */
  .hero__sky-title { font-size: 1.1rem; }
  .hero__sky-detail { font-size: 0.72rem; }
  /* Smoke ladder collapses to the chip treatment on stacked
     mobile panels (a 32svh strip cannot host a vertical ladder). */
  .hero__smoke-ledger {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0 1rem 1rem auto;
    padding: 0.8rem 1.1rem;
    background: rgba(14, 15, 12, 0.62);
    border: 1px solid rgba(242, 237, 228, 0.22);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    max-width: min(24rem, calc(100% - 2rem));
    pointer-events: auto;
  }
  .hero__smoke-line {
    position: static;
    color: var(--color-text-primary);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
    white-space: normal;
  }
  .hero__smoke-line--1 { font-size: 1.05rem; }
  .hero__smoke-line--2,
  .hero__smoke-line--3 {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    display: inline;
  }
  .hero .hero__split { min-height: 0; }
  .hero { min-height: auto; }
}

/* --- Reduced-motion: kill the scroll-prompt pulse and smooth scroll --- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bridge__line { transition: none; }
}

/* --- 5. Placeholder sections (reusable for unshipped sections) ---
   Reserved for the next not-yet-shipped section in the page
   sequence. Section 3 used this pattern; Section 4 (Cascade)
   will use it next. Retire the block only when no placeholder
   remains in the page architecture. */

.section--placeholder {
  min-height: 60svh;
  display: grid;
  place-items: center;
  padding: 4rem 0;
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border-subtle);
}

.section--placeholder .section__inner { text-align: center; }

.section__placeholder-eyebrow {
  font-family: var(--font-data);
  font-size: var(--text-body-small);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 1rem;
}

.section__placeholder-headline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-display-section);
  color: var(--color-text-primary);
  margin-bottom: 1rem;
}

.section__placeholder-sub {
  font-family: var(--font-body);
  color: var(--color-text-secondary);
  max-width: 56ch;
  margin: 0 auto;
}

/* --- Intentional empty hooks (no rules needed today) ---
   .hero__panel--burn         Hook for burn-panel-specific styling later
                              (custom crop, overlay tint). Inherits the rest.
   Both classes ship on the HTML so future styling can attach without a
   markup change. */

/* --- 6. Section: Capital Activation (Section 2) ---
   The third application of the activation thesis, performed on
   the visitor's own capital. Prose-led section. The hero is
   image-led; Section 2 is the first surface where text carries
   the entire argument. Type system mirrors the hero so the page
   reads as one document, not as two stacked surfaces.
   Spec: docs/GE-Section-2-Capital-Activation-Draft.md v0.4
*/

.section {
  background: var(--color-bg-primary);
  padding: clamp(4rem, 10vh, 7rem) 0;
}

.section--capital {
  /* The diagnostic section sits in the same charcoal as the hero
     so the bridge line and Section 2 read as continuous. Subtle
     top border keeps the section boundary legible without breaking
     the dark continuity. */
  border-top: 1px solid var(--color-border-subtle);
}

.section__inner--prose {
  max-width: var(--prose-max-width);
  margin: 0 auto;
  padding: 0 var(--content-gutter);
}

.section__eyebrow {
  font-family: var(--font-data);
  font-size: var(--text-body-small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-primary);
  margin-bottom: 2.5rem;
}

/* --- Prose blocks --- */

.prose {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  line-height: 1.65;
  color: var(--color-text-primary);
  margin: 0 0 1.5rem;
  letter-spacing: -0.003em;
}

.prose em {
  font-style: italic;
  color: var(--color-accent-secondary);
}

.prose__figure {
  /* The $2.5T figure is the section's single most important number.
     Weighted to anchor the opening paragraph visually. Color shifts
     to amber to mark it as the load-bearing claim, but the weight
     stays modest so it does not read as marketing emphasis. */
  font-weight: 500;
  color: var(--color-accent-secondary);
  font-style: normal;
}

/* The three-sentence syllogism that closes the opening beat:
   "And the problems remain. The abundance of capital is not the
   failure mode. The failure mode is the mechanism." These lines
   carry compressed argumentative weight and earn a slightly more
   prominent register than ordinary prose. Set on their own with
   a touch more space around them. */
.prose--statement {
  font-size: clamp(1.15rem, 1.4vw, 1.35rem);
  line-height: 1.5;
  color: var(--color-text-primary);
  margin: 0 0 2.5rem;
  max-width: 32ch;
}

/* The parallel-construction triplet at the Section 2 hand-off:
   "Three different operations. Three different kinds of abundance.
   One shared machine." Three short sentences ending in nouns,
   parallel structure, no verb in the third clause. Earns its own
   visual register so the triplet reads as a single beat distinct
   from the existence claim ("This instrument exists. It is
   operational today.") above it. Slightly tighter line-height
   preserves the staccato rhythm; the top margin gives the triplet
   breathing room from the existence beat. */
.prose.handoff {
  margin-top: 1.5em;
  line-height: 1.4;
}

/* --- Anchor 11 pull-quote ---
   The set-apart sentence required by the Creative Brief Part 10
   one-anchor-per-section rule. Display serif, left amber border,
   no quote marks. Sits at the section's structural center: the
   diagnostic above resolves into this line; the hand-off into
   Mechanism follows it. */

.anchor-quote {
  margin: 3rem 0;
  padding: 0.5rem 0 0.5rem 1.5rem;
  border-left: 3px solid var(--color-accent-primary);
  border-radius: 0;
}

.anchor-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.25;
  color: var(--color-text-primary);
  letter-spacing: -0.005em;
  margin: 0;
}

/* --- Anchor pull-quote breakout (2026-06-03) ---
   Reviewer feedback: on wide screens the prose column reads as a
   skinny ribbon in a large dark field. Rather than widening body
   text past the readable measure, the five section anchor quotes
   now break OUT of the prose column to punctuate the canvas, the
   way the Beat-2 video and S6 modules already do.

   Technique: negative inline margins, NOT the left:50%/translateX
   hack (that approach failed inside constrained parents; see the
   8b/8e history above). The quotes sit inside the
   41rem prose measure; their wide ancestors run 56rem. Pulling
   (56-41)/2 = 7.5rem per side lands the quote at the 56rem module
   width. Applied only at >=72rem viewports, where the 56rem outer
   is fully realized for the nested quotes AND the full-width S2
   section has the same room, so one rule serves both DOM shapes.
   Below the breakpoint the quotes stay in-column, unchanged. */
@media (min-width: 72rem) {
  .anchor-quote:not(.about__pullquote) {
    margin-left: -7.5rem;
    margin-right: -7.5rem;
  }
}

/* --- Section CTA ---
   The bordered-button variant. Reuses the visual language we
   preserved in CSS from the retired hero CTA. The bridge line
   above the hero uses a distinct affordance (italic + underline
   rule) because it was a literary moment; section CTAs are
   conventional buttons. */

.section__cta-wrap {
  margin: 2.5rem 0 0;
}

.section__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-data);
  font-size: var(--text-body-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-secondary);
  padding: 0.85rem 1.4rem;
  border: 1px solid var(--color-accent-primary);
  border-radius: 2px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.section__cta:hover,
.section__cta:focus-visible {
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  transform: translateY(-1px);
}

.section__cta-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.section__cta:hover .section__cta-arrow,
.section__cta:focus-visible .section__cta-arrow {
  transform: translateY(2px);
}

/* --- Footnotes ---
   Footnotes live at the bottom of the section that references
   them, not in a global page footer. This keeps the footnote
   adjacent to its anchor and avoids the "scroll to the bottom
   of the page to read a footnote" failure mode on long pages.
   The back-arrow returns the reader to the reference point. */

.prose__footnote-ref {
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
  margin-left: 0.1em;
}

.prose__footnote-ref a {
  color: var(--color-accent-primary);
  text-decoration: none;
  border-bottom: 1px dotted var(--color-accent-warm);
  padding: 0 0.15em;
}

.prose__footnote-ref a:hover,
.prose__footnote-ref a:focus-visible {
  color: var(--color-accent-secondary);
  border-bottom-color: var(--color-accent-secondary);
}

.footnotes {
  list-style: none;
  margin: 4rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--color-border-subtle);
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.footnote {
  display: flex;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
}

.footnote__num {
  flex-shrink: 0;
  color: var(--color-accent-primary);
  font-weight: 500;
}

.footnote__body { flex: 1; }

.footnote__back {
  margin-left: 0.4em;
  color: var(--color-accent-primary);
  text-decoration: none;
}

.footnote__back:hover,
.footnote__back:focus-visible {
  color: var(--color-accent-secondary);
}

/* --- Responsive overrides for Section 2 --- */

@media (max-width: 720px) {
  .section { padding: clamp(3rem, 8vh, 5rem) 0; }
  .anchor-quote { margin: 2rem 0; padding-left: 1rem; }
}

/* --- 7. Bridge-spacing tightening (2026-05-18, post-prod-review) ---
   The first production read showed two excessive vertical gaps:
   (a) between the corrected-view close and the bridge line, and
   (b) between the bridge line and Section 2's opening. Both
   gaps were the sum of two stacked block paddings (the closing
   side of one element plus the opening side of the next).
   These overrides collapse those sums into single deliberate
   gaps and make .bridge asymmetric — more breathing room above
   the bridge line than below, because the bridge line is the
   pivot into Section 2 and should feel attached to it, not
   floating between sections.

   Cascade order: these rules sit at the end of the file and win
   against the earlier .bridge and .section--capital declarations
   without removing them. Trail-of-history preserved in the source. */

.bridge {
  /* Asymmetric padding: ~3rem above (separate from the hero's
     proof line), ~1rem below (pull Section 2 up close). The
     bridge line reads as the pivot, and Section 2 reads as the
     answer. Pivot and answer should be visually adjacent. */
  padding: clamp(2.5rem, 5vh, 3.5rem) var(--content-gutter) clamp(0.75rem, 1.5vh, 1.25rem);
}

.section--capital {
  /* Reduce top padding so Section 2 opens close to the bridge
     line. The original 4-7rem top padding was correct for a
     section opening on its own; for a section that opens off
     a pivot above, the section needs to be visually attached
     to the pivot, not separated from it. */
  padding-top: clamp(1.5rem, 3vh, 2.5rem);
}

/* --- 7b. Bridge-spacing tightening, second pass (2026-05-18) ---
   Second-pass bridge spacing (2026-05-18): both .bridge paddings
   reduced further and .section--capital padding-top overridden
   harder. (The corrected-view hero rules this pass also touched
   were retired with the two-stage hero, 2026-06-04.) */


.bridge {
  /* Asymmetric, more aggressive. ~2.25rem above, ~0.5rem below.
     The bridge line should feel attached to Section 2, not
     equidistant from the hero and the section. */
  padding: clamp(1.75rem, 3.5vh, 2.5rem) var(--content-gutter) clamp(0.5rem, 1vh, 0.85rem);
}

.section--capital {
  /* Open close to the bridge line. The section's structural
     boundary is already legible via the 1px top border; padding
     does not need to also do separation work. */
  padding-top: clamp(0.75rem, 1.5vh, 1.25rem);
}

/* ============================================================
   8. Section: The Mechanism (Section 3)
   ------------------------------------------------------------
   Five-beat structure: natural substrate (Beat 1), engineered
   piece (Beat 2), activate/bind/integrate (Beats 3-5). Anchor
   pull-quote, close, CTA.
   Spec: docs/GE-Section-3-Mechanism-Draft.md v0.2 (2026-05-19).
   Two image-bearing beats:
     - Beat 1: legacy coconut-biology diagram, right-aligned float
       at desktop, stacked above prose <720px. Sketch-treatment
       via CSS filters + paper-texture overlay + amber multiply
       layer pushes the legacy diagram toward the editorial-sketch
       register pending the v2 commission.
     - Beat 2: GE-CPU.webm. Breaks out beyond the 38rem prose
       column to a wider 56rem container so the constellation
       reads at scale. Play-once-on-view via intersection-observer
       in js/main.js. Reduced-motion: no autoplay; first frame
       holds as a static still.
   ============================================================ */

/* --- Section container ---
   Continues the dark surface from Section 2. Top border keeps
   the boundary legible; padding is deliberately a touch tighter
   on the top than the bottom so the section opens close to the
   Section 2 hand-off above it. The Section 2 -> Section 3 seam
   that the polish-pass memory flagged resolves here: with the
   placeholder gone and this section's own opening rhythm in
   place, the stacked-padding gap no longer accumulates. */
.section--mechanism {
  border-top: 1px solid var(--color-border-subtle);
  padding-top: clamp(3rem, 7vh, 5rem);
  padding-bottom: clamp(4rem, 10vh, 7rem);
}

/* --- Beat container ---
   Beats are layout containers for image-bearing beats. Plain
   prose beats (3, 4, 5) ride the .section__inner--prose column
   directly without a wrapper. */
.beat {
  margin: 0 0 2.5rem;
}

.beat::after {
  /* Clears the diagram float so the next prose paragraph starts
     below the diagram if any prose tail remains short. */
  content: '';
  display: block;
  clear: both;
}

/* --- Beat 1: biology diagram ---
   Right-aligned float at desktop, full-width above prose at
   mobile. The diagram is the legacy site asset; the sketch-
   treatment is a v1 placeholder that pushes the photograph and
   labels toward the editorial-sketch aesthetic. v2 is a
   commissioned redraw. */
.diagram--biology {
  float: right;
  width: 45%;
  max-width: 22rem;
  margin: 0 0 1rem 2rem;
}

.diagram__frame {
  /* Sketch-treatment v1, layer 1: warm paper ground.
     The background sits beneath the image so when the image
     is desaturated and the paper-overlay layer is multiplied
     on top, the result reads as ink on aged paper rather than
     as a tinted photograph. */
  position: relative;
  background: #ECE4D2;
  padding: 0.75rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1px 0 var(--color-bg-secondary), 0 8px 24px rgba(0, 0, 0, 0.35);
}

.diagram__image {
  /* Sketch-treatment v1, layer 2: image filter stack.
     grayscale pulls the color out, sepia warms the result
     toward paper, contrast strengthens the line work that
     remains in the underlying photograph. The compound result
     is a warm monochrome that will accept the amber overlay
     above without going muddy. */
  filter: grayscale(0.85) sepia(0.18) contrast(1.08) brightness(0.96);
  display: block;
  width: 100%;
}

.diagram__frame::before {
  /* Sketch-treatment v1, layer 3: paper grain.
     A subtle diagonal gradient noise that suggests handmade
     paper texture without an external asset request. Sits above
     the image, beneath the amber tint layer. Low opacity so the
     diagram remains the dominant content. */
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(168, 138, 80, 0.06) 0 1px,
      transparent 1px 3px
    ),
    repeating-linear-gradient(
      45deg,
      rgba(120, 90, 50, 0.04) 0 1px,
      transparent 1px 4px
    );
  pointer-events: none;
  mix-blend-mode: multiply;
}

.diagram__frame::after {
  /* Sketch-treatment v1, layer 4: amber accent.
     A faint amber wash multiplied across the whole frame ties
     the diagram into the brand palette. Kept low so the
     diagram's information layer is preserved; the tint is
     atmospheric rather than dominant. */
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(200, 146, 42, 0.12);
  pointer-events: none;
  mix-blend-mode: multiply;
}

.diagram__caption {
  font-family: var(--font-body);
  font-size: var(--text-body-small);
  font-style: italic;
  line-height: 1.45;
  color: var(--color-text-secondary);
  margin: 0.75rem 0 0;
  text-align: left;
}

/* --- Beat 2: instrument video ---
   Breaks out of the 38rem prose column to a wider container so
   the constellation reads at scale. The video plays once on
   intersection (data-play-once-on-view hook in main.js), holds
   on the final frame, no controls, no audio. Reduced-motion
   fallback handled below. */
.beat--instrument {
  margin-top: 3rem;
}

.instrument-video {
  /* Pull the video out beyond the prose column. Calc resolves
     to a width up to 56rem, centered. Negative margins reach
     past the prose column without breaking the section's outer
     container, because the section padding still bounds them. */
  margin: 0 auto 1.5rem;
  width: 100%;
  max-width: 56rem;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.instrument-video__frame {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02), 0 12px 36px rgba(0, 0, 0, 0.45);
}

.instrument-video__player {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.instrument-video__caption {
  font-family: var(--font-body);
  font-size: var(--text-body-small);
  font-style: italic;
  line-height: 1.45;
  color: var(--color-text-secondary);
  margin: 0.75rem auto 0;
  max-width: var(--prose-max-width);
  padding: 0 var(--content-gutter);
  text-align: center;
}

/* --- Beat 2: reduced-motion fallback ---
   When the visitor prefers reduced motion, the play-once-on-view
   JS short-circuits and never calls play(). The video element
   shows its first decoded frame as a static still. We force
   preload=auto for that case via the data hook so the still
   actually paints. */
@media (prefers-reduced-motion: reduce) {
  .instrument-video__player {
    /* Hint the browser to decode the first frame so it is
       visible without playback. preload="metadata" in HTML keeps
       this conservative for users without reduced-motion. */
  }
}

/* --- Responsive: Beats 1 and 2 collapse to single column --- */

@media (max-width: 720px) {
  .section--mechanism {
    padding-top: clamp(2.5rem, 6vh, 4rem);
  }

  .diagram--biology {
    /* On narrow viewports, the float pattern stops working: the
       prose paragraphs become too short to wrap meaningfully
       around the diagram and the page reads as a broken layout.
       Stack the diagram full-width above the prose. */
    float: none;
    width: 100%;
    max-width: none;
    margin: 0 0 1.5rem;
  }

  .instrument-video {
    /* The desktop breakout (centered + negative margins) becomes
       a non-breakout at mobile widths because the prose column
       is already nearly full-viewport. Reset the transforms. */
    left: auto;
    transform: none;
    width: 100%;
  }

  .instrument-video__caption {
    padding: 0;
  }
}

/* --- 8b. Section 3 layout corrections (2026-05-19, post-prod-read) ---
   First production read showed Beat 1 rendering with the diagram
   at ~25% of the column width and the prose collapsed into a
   ~14rem ribbon. Root cause: .beat--substrate was inheriting the
   38rem max-width from .section__inner--prose, which the float
   then operated inside. The result was a small diagram beside a
   crushed prose column with massive dead margins.

   This block breaks .beat--substrate out to 56rem so it pairs
   with Beat 2's video at the same altitude, re-constrains the
   prose paragraphs inside the beat to ~34rem so the line length
   stays readable, and gives the diagram float real width.

   Cascade order: these rules sit at the end of the file and win
   against the earlier .diagram--biology and .beat declarations
   without removing them. Trail-of-history preserved. */

.beat--substrate {
  /* Break out of the 38rem prose column to a 56rem container,
     mirroring the .instrument-video breakout below it. Centered
     via the same left:50% / translateX(-50%) pattern. */
  width: 100%;
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.beat--substrate .prose {
  /* Re-constrain the prose paragraphs inside the wider beat so
     line length stays in the readable 60-70 character range.
     Without this the prose would run the full 56rem and read
     as a wall of text. */
  max-width: 34rem;
}

.diagram--biology {
  /* Substantial pairing size. 45% of the 56rem container is
     ~25rem; clamped to 22rem to match the desktop spec. The
     prose flows to its left at its own 34rem max-width and
     wraps cleanly. */
  width: 45%;
  max-width: 22rem;
  margin: 0.25rem 0 1rem 2rem;
}

/* --- 8c. Beat 2 video — hide native controls (2026-05-19) ---
   First production read showed the browser's hover-overlay icons
   (picture-in-picture, play, translate-captions) appearing on
   the instrument video. The video is meant to be a passive
   editorial element: it plays once on scroll-in and holds the
   final frame. No interactive affordance is correct.

   Three layers of suppression: HTML attributes block PiP and
   remote-playback at the API level; CSS hides the webkit media
   controls overlay; pointer-events:none on the player prevents
   the hover state that surfaces the icons in the first place. */

.instrument-video__player {
  pointer-events: none;
}

.instrument-video__player::-webkit-media-controls,
.instrument-video__player::-webkit-media-controls-panel,
.instrument-video__player::-webkit-media-controls-play-button,
.instrument-video__player::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
}

/* --- 8d. Responsive override: collapse the Beat 1 breakout ---
   At mobile widths the breakout pattern stops making sense
   because the prose column is already nearly full-viewport.
   Reset the transforms and let the diagram stack above the
   prose (handled by the existing 720px media query for
   .diagram--biology). */

@media (max-width: 720px) {
  .beat--substrate {
    left: auto;
    transform: none;
    max-width: none;
  }
  .beat--substrate .prose {
    max-width: none;
  }
}

/* --- 8e. Section 3 layout restructure (2026-05-19, post-prod-read #2) ---
   The second production read showed the Beat 1 fix from 8b had
   no visual effect. Root cause: .beat--substrate's max-width:56rem
   override was nested inside .section__inner--prose (max-width
   38rem), and a child element cannot exceed its parent's width.
   The 8b transforms shifted the element's paint position but did
   not actually widen its layout box.

   The HTML has been restructured. .section__inner--wide is the
   new 56rem container that holds image-bearing beats. The prose
   beats (3-5, anchor, close, CTA) sit in a nested
   .section__inner--prose-nested wrapper that constrains them to
   38rem inside the 56rem outer. The 8b breakout transforms are
   neutralized here so the cascade doesn't apply them to the
   restructured DOM.

   Cascade order: these rules sit at the end of the file and win
   against the 8b overrides above. Trail-of-history preserved. */

/* The new wide outer container for the mechanism section.
   56rem matches Beat 2's video container width and gives Beat 1
   real room for a substantial diagram float. */
.section__inner--wide {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 var(--content-gutter);
}

/* The nested prose wrapper that constrains beats 3-5, anchor,
   close, and CTA to the canonical 38rem readable measure inside
   the 56rem outer. No outer padding (the outer already paid the
   gutter); centered with auto margins. */
.section__inner--prose-nested {
  max-width: var(--prose-max-width);
  margin: 0 auto;
}

/* Neutralize the 8b breakout transforms.
   With the restructured DOM, .beat--substrate sits directly
   inside the 56rem outer and no longer needs the
   left:50%/translateX(-50%) trick. The 8b rules tried to widen
   the element from inside a 38rem parent; that was the failed
   approach. Reset everything 8b set so the new layout starts
   from a clean baseline. */
.beat--substrate {
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  position: static;
  left: auto;
  transform: none;
}

/* Beat 2 video also retires its breakout transforms.
   Same logic: now that the outer container is 56rem, the
   instrument-video can just be width:100% and centered without
   the position/transform hack. */
.instrument-video {
  position: static;
  left: auto;
  transform: none;
  margin: 0 auto 1.5rem;
}

/* Beat 2 prose wrapper.
   Constrains the prose under the video to 38rem so the video can
   read at 56rem while the prose stays at the canonical measure.
   Sits below the video, centered. */
.beat__prose {
  max-width: var(--prose-max-width);
  margin: 0 auto;
}

/* Diagram refresh, 2026-05-21.
   The biology diagram now floats inside the 38rem prose-nested
   column (matching Section 4's sketch-figure--right pattern) so
   Beat 1's prose left-edge aligns with the rest of the section.
   42% of 38rem is ~16rem max; ~28-30 characters of prose measure
   wraps to its left. */
.diagram--biology {
  float: right;
  width: 42%;
  max-width: 16rem;
  margin: 0.25rem 0 1.25rem 1.5rem;
}

/* Beat container float-clear remains valid post-restructure;
   no override needed. */

/* --- 8f. Responsive: collapse the restructured layout ---
   At <720px both Beat 1 and Beat 2 lose their wide containers
   and stack to single column. The diagram floats are reset and
   the video's 56rem width becomes whatever the viewport allows. */

@media (max-width: 720px) {
  .section__inner--wide {
    max-width: none;
  }
  .section__inner--prose-nested {
    max-width: none;
  }
  .beat__prose {
    max-width: none;
  }
  .diagram--biology {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0 0 1.5rem;
  }
}


/* ============================================================
   9. Section: The Cascade (Section 4)
   ------------------------------------------------------------
   Three-beat time-zoom structure: first deployment lands (Beat 1),
   loops close once at the five-year horizon (Beat 2), decade
   horizon and beyond (Beat 3). Anchor pull-quote, close, CTA.
   Spec: docs/GE-Section-4-Cascade-Draft.md v0.2 (2026-05-20).
   Two image-bearing beats:
     - Beat 1: cascade-loops SVG sketch (placeholder v0.1, hand-
       built sketch-and-amber-wash matching the editorial register
       of Section 3's biology diagram).
     - Beat 2: biodiversity SVG sketch (Philippine Eagle + Tarsier
       at the canopy layer each occupies). Placeholder v0.1.
   Both sketches use .sketch-figure as the framing pattern so they
   share treatment with Section 5's braided-cascade close.
   ============================================================ */

.section--cascade {
  border-top: 1px solid var(--color-border-subtle);
  padding-top: clamp(3rem, 7vh, 5rem);
  padding-bottom: clamp(4rem, 10vh, 7rem);
  /* Slightly warmer surface than the mechanism section. The
     cascade is where the operations become outcomes, and the
     wash carries the brand warmth forward without breaking
     dark-mode continuity. */
  background: var(--color-bg-primary);
}

/* --- Sketch figure: the shared framing pattern -----------------
   Used by Section 4's cascade-loops diagram and biodiversity
   sketch, and by Section 5's braided-cascade close. Pairs an
   inline SVG with caption in the same editorial register as
   Section 3's biology diagram. The SVG itself is hand-built;
   the wrapper provides the paper-ground, the subtle border, and
   the amber atmospheric wash that ties it to the brand palette. */

.sketch-figure {
  margin: 1.5rem auto 2.5rem;
  max-width: 100%;
}

.sketch-figure--right {
  /* Sized to float inside the 38rem prose-nested column,
     leaving ~28-30 characters of measure on the left for the
     prose to wrap around. The sketch is reduced from its earlier
     wider sizing so Beat 1's prose can share the same left edge
     as the rest of the section. */
  float: right;
  width: 42%;
  max-width: 16rem;
  margin: 0.25rem 0 1.25rem 1.5rem;
}

@media (max-width: 720px) {
  .sketch-figure--right {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0 0 1.5rem;
  }
}

.sketch-figure--full {
  width: 100%;
  max-width: 56rem;
  margin: 2rem auto;
}

.sketch-figure__frame {
  position: relative;
  background: #ECE4D2;
  padding: 0.85rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1px 0 var(--color-bg-secondary), 0 8px 24px rgba(0, 0, 0, 0.35);
}

.sketch-figure__frame::before {
  /* Paper-grain overlay matching .diagram__frame::before. */
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(168, 138, 80, 0.06) 0 1px,
      transparent 1px 3px
    ),
    repeating-linear-gradient(
      45deg,
      rgba(120, 90, 50, 0.04) 0 1px,
      transparent 1px 4px
    );
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 1;
}

.sketch-figure__frame::after {
  /* Amber atmospheric wash. */
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(200, 146, 42, 0.10);
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 2;
}

.sketch-figure__svg {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 0;
}

.sketch-figure__caption {
  font-family: var(--font-body);
  font-size: var(--text-body-small);
  font-style: italic;
  line-height: 1.45;
  color: var(--color-text-secondary);
  margin: 0.85rem 0 0;
  text-align: left;
  padding: 0 0.25rem;
}

.sketch-figure--full .sketch-figure__caption {
  text-align: center;
  max-width: var(--prose-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* Section 4 beat structure mirrors Section 3:
   .beat as the float-containing wrapper for image beats, with
   prose flowing left of the right-floated sketch. */

.section--cascade .beat {
  margin: 0 0 2.75rem;
}

.section--cascade .beat::after {
  content: '';
  display: block;
  clear: both;
}

/* Beat heading: the small label that introduces each beat
   ("The first deployment", "The five-year horizon", "The decade
   horizon"). Sits inside the prose flow, weighted to read as a
   subhead without breaking the section's prose register. */
.beat__heading {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  color: var(--color-accent-secondary);
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin: 0 0 1.25rem;
}

.beat__heading--first {
  margin-top: 0;
}


/* ============================================================
   10. Section: The Human Cascade (Section 5)
   ------------------------------------------------------------
   Three-beat structure matching Section 4: first year (Beat 1),
   five-year horizon (Beat 2), decade horizon (Beat 3). One
   image-bearing moment: the closing braided-cascade sketch.
   Spec: docs/GE-Section-5-Human-Cascade-Draft.md v0.1 (2026-05-20).
   ============================================================ */

.section--human-cascade {
  border-top: 1px solid var(--color-border-subtle);
  padding-top: clamp(3rem, 7vh, 5rem);
  padding-bottom: clamp(4rem, 10vh, 7rem);
  background: var(--color-bg-primary);
}

.section--human-cascade .beat {
  margin: 0 0 2.5rem;
}

/* The "you" beats — direct address moments in Section 5 where
   the cascade outcomes land at the second-person register. The
   typographic shift is subtle: italic in the display serif at
   slightly larger size, marking these as load-bearing breath
   points without breaking the prose flow. */
.prose--you {
  font-style: italic;
  color: var(--color-accent-secondary);
  font-size: clamp(1.1rem, 1.35vw, 1.3rem);
  line-height: 1.5;
  margin: 1.5rem 0 1.75rem;
}


/* ============================================================
   11. Section: Scale (Section 6)
   ------------------------------------------------------------
   The page's resolution section. Five beats: one-year outputs
   per CPU, twenty-five-year operational-life outputs, what
   persists past the operating window, one capital partner, the
   buildout tier. Three visual modules:
     - Beat 1 → Beat 2: the seed-tree-produce module (proportional
       hierarchy IS the argument; seed small, tree medium, produce
       large). Prototype at section-6-module-prototype.html.
     - Beat 3: persistence-timeline module (v0.1 placeholder,
       three parallel bars: operating window 0-25yr, solar tail
       0-50yr, carbon tail 0-125yr).
     - Beat 5: scale-tier module (v0.1 placeholder, 1 CPU → 300
       CPU → 10,000 CPU with capital and outputs counted up per
       row).
   Brand-anchor resolution at the close.
   Spec: docs/GE-Section-6-Scale-Draft.md v0.1 (2026-05-21).
   ============================================================ */

.section--scale {
  border-top: 1px solid var(--color-border-subtle);
  padding-top: clamp(3rem, 7vh, 5rem);
  padding-bottom: clamp(5rem, 12vh, 9rem);
  background: var(--color-bg-primary);
}

/* --- Brand anchor close ---
   The final three-beat sentence "The abundance project. Already
   running. Yours to claim." earns its own typographic register:
   display serif, larger size, centered, with a small amber
   marker above and below. Sits at the section's terminal beat,
   visually distinct from the closing prose that precedes it. */
.brand-anchor {
  margin: 4rem auto 3rem;
  max-width: var(--prose-max-width);
  text-align: center;
  padding: 2.5rem 1rem;
  position: relative;
}

.brand-anchor::before,
.brand-anchor::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 3rem;
  height: 1px;
  background: var(--color-accent-primary);
  transform: translateX(-50%);
}

.brand-anchor::before { top: 0; }
.brand-anchor::after { bottom: 0; }

.brand-anchor p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  line-height: 1.3;
  color: var(--color-text-primary);
  letter-spacing: -0.005em;
  margin: 0;
}

.brand-anchor em {
  font-style: italic;
  color: var(--color-accent-secondary);
}

/* Re-locked anchor (2026-06-05): three-layer line + project name
   beneath. The layers line keeps the anchor's display register;
   the name sits under it smaller, in the data font, like a
   signature on the resolution. */
.brand-anchor__layers {
  margin: 0 0 1.1rem;
}

.brand-anchor .brand-anchor__name {
  font-family: var(--font-data);
  font-style: normal;
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-primary);
}


/* The fourth-beat challenge line that sits below the brand
   anchor. The brand anchor is the resolution; the challenge
   hands the moment back to the reader as a direct question.
   Lighter visual treatment than .brand-anchor so the anchor
   itself remains the dominant element. Centered, italic,
   body-weight, smaller. No top/bottom rules (those belong
   to the anchor). Sits between .brand-anchor and the
   terminal .section__cta-wrap. */
.brand-anchor__mechanism {
  /* The mechanism line before the anchor: upright serif, primary
     color, quieter than the anchor it loads but above prose
     register. The em on the payoff clause mirrors the anchor's
     own italic beat. */
  margin: 2.5rem auto 0;
  max-width: var(--prose-max-width);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  line-height: 1.4;
  color: var(--color-text-primary);
}

.brand-anchor__mechanism em {
  font-style: italic;
  color: var(--color-accent-secondary);
}

.brand-anchor__challenge {
  margin: -1rem auto 3rem;
  max-width: var(--prose-max-width);
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.45;
  color: var(--color-text-secondary);
  letter-spacing: -0.003em;
}

.brand-anchor__challenge em {
  font-style: italic;
  color: var(--color-accent-secondary);
}

/* ============================================================
   14. Modules: Dashboard (the tree) + At-scale (the harvest)
   ------------------------------------------------------------
   Replaces the v0.1 .module-cpu seed/tree/produce module. The
   metaphor is preserved (seed -> tree -> harvest) but each
   stage is richer:
   - Seed: $5M cell, unchanged in spirit.
   - Tree: an outputs dashboard with a horizon selector
     (1 year / 5 years / 10 years), seven metric cells laid
     out 3-2-2 to read as a curated dashboard rather than a
     row of equal-weight numbers. Big and bountiful.
   - Harvest: a system-scale module showing the same metrics
     scaling across deployment tiers (1 / 300 / 4,875 /
     10,000 CPUs) at annual rate, matching the prose anchors
     in Beat 5.
   All numeric cells carry final values as text content so
   noscript / screen-reader experience is intact. JS swaps
   values via data-y1 / data-y5 / data-y10 attribute lookup
   on toggle.
   Spec: project_section_6_visual_modules (updated 2026-05-26).
   ============================================================ */

/* --- Shared container shape --- */

.module-dashboard,
.module-harvest {
  margin: 3rem auto;
  max-width: 56rem;
  position: relative;
}

.module-dashboard__label,
.module-harvest__label {
  font-family: var(--font-data);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0 0 1rem;
  text-align: center;
}

.module-dashboard__label em,
.module-harvest__label em {
  font-style: italic;
  color: var(--color-accent-secondary);
}

/* --- Seed cell: small, top of the tree module --- */

.module-dashboard__seed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 1.25rem 1.25rem;
  margin-bottom: 1rem;
  min-height: 5.5rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: 2px;
  background: linear-gradient(
    to bottom,
    rgba(166, 116, 32, 0.04),
    rgba(166, 116, 32, 0.02)
  );
  position: relative;
}

.module-dashboard__seed-label {
  position: absolute;
  top: -0.7em;
  left: 1.25rem;
  padding: 0 0.6rem;
  background: var(--color-bg-primary);
  font-family: var(--font-data);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.module-dashboard__seed-mark {
  width: 1.5rem;
  height: 1.5rem;
  border: 1.5px solid var(--color-accent-warm);
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    var(--color-accent-warm) 0%,
    rgba(166, 116, 32, 0.4) 70%,
    transparent 100%
  );
  flex-shrink: 0;
}

.module-dashboard__seed-figure {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  font-weight: 500;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  line-height: 1;
}

.module-dashboard__seed-caption {
  font-family: var(--font-data);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-left: 0.5rem;
}

/* --- Tree: outputs dashboard with horizon selector --- */

.module-dashboard__tree {
  padding: 2.5rem 1.75rem;
  background: linear-gradient(
    to bottom,
    rgba(200, 146, 42, 0.10),
    rgba(166, 116, 32, 0.06)
  );
  border: 1px solid var(--color-border-medium);
  border-radius: 2px;
  position: relative;
}

.module-dashboard__tree-label {
  position: absolute;
  top: -0.7em;
  left: 1.75rem;
  padding: 0 0.6rem;
  background: var(--color-bg-primary);
  font-family: var(--font-data);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* Horizon toggle: tab-style buttons, centered, generous tap area */

.module-dashboard__toggle {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.5rem 0 2rem;
  flex-wrap: wrap;
}

.module-dashboard__toggle-btn {
  font-family: var(--font-data);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid var(--color-border-medium);
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}

.module-dashboard__toggle-btn:hover {
  color: var(--color-text-primary);
  border-color: var(--color-accent-warm);
}

.module-dashboard__toggle-btn:focus-visible {
  outline: 2px solid var(--color-accent-secondary);
  outline-offset: 2px;
}

.module-dashboard__toggle-btn[aria-pressed="true"] {
  color: var(--color-bg-primary);
  background: var(--color-accent-secondary);
  border-color: var(--color-accent-secondary);
}

/* The 3-2-2 grid. Top row 3 hero cells, middle row 2 secondary,
   bottom row 2 secondary. */

.module-dashboard__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.25rem;
}

.module-dashboard__cell {
  padding: 1.5rem 1.25rem;
  background: rgba(14, 15, 12, 0.35);
  border: 1px solid var(--color-border-subtle);
  border-radius: 2px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.module-dashboard__cell--hero {
  /* Top row: 3 cells across 6 cols = 2 each */
  grid-column: span 2;
  padding: 2rem 1.25rem;
}

.module-dashboard__cell--secondary {
  /* Middle/bottom rows: 2 cells across 6 cols = 3 each */
  grid-column: span 3;
}

.module-dashboard__cell-figure {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-accent-secondary);
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0 0 0.5rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.module-dashboard__cell--hero .module-dashboard__cell-figure {
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
}

.module-dashboard__cell--secondary .module-dashboard__cell-figure {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
}

.module-dashboard__cell-figure--dual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  white-space: normal;
}

.module-dashboard__cell-figure--dual .module-dashboard__cell-figure-sub {
  font-size: 0.65em;
  color: var(--color-text-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-data);
  font-weight: 400;
  margin-top: 0.25rem;
}

.module-dashboard__cell-label {
  font-family: var(--font-data);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  line-height: 1.35;
  margin: 0;
  min-height: 2.2em;
}

/* Smooth value-swap transition on horizon change */

.module-dashboard__cell-figure {
  transition: opacity 240ms ease;
}

.module-dashboard.is-swapping .module-dashboard__cell-figure {
  opacity: 0.35;
}

/* Footnote pointing to 25-year operational-life prose */

.module-dashboard__footnote {
  margin: 1.75rem 0 0;
  font-family: var(--font-data);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  text-align: center;
  line-height: 1.5;
}

/* --- Harvest: at-scale module --- */

.module-harvest {
  margin-top: 4rem;
}

.module-harvest__frame {
  padding: 2.5rem 1.5rem;
  background: linear-gradient(
    to bottom,
    rgba(200, 146, 42, 0.12),
    rgba(166, 116, 32, 0.08)
  );
  border: 1px solid var(--color-border-medium);
  border-radius: 2px;
  position: relative;
}

.module-harvest__frame-label {
  position: absolute;
  top: -0.7em;
  left: 1.5rem;
  padding: 0 0.6rem;
  background: var(--color-bg-primary);
  font-family: var(--font-data);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* Table-like layout: tier columns across the top, metric rows down */

.module-harvest__table {
  display: grid;
  grid-template-columns: minmax(9rem, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: 0.5rem 0.75rem;
  align-items: baseline;
}

.module-harvest__row {
  display: contents;
}

.module-harvest__head {
  font-family: var(--font-data);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border-medium);
  align-self: end;
}

.module-harvest__head--metric {
  text-align: left;
}

.module-harvest__head--tier {
  text-align: center;
}

.module-harvest__head--tier strong {
  display: block;
  font-weight: 500;
  color: var(--color-accent-secondary);
  font-size: 1.15rem;
  letter-spacing: -0.005em;
  text-transform: none;
  font-family: var(--font-display);
  margin-bottom: 0;
}

/* Tooltip-bearing wrapper for tier-count headers. Carries the
   deployment-tier descriptor (the unit / short-term target /
   etc.) as a native title attribute. Subtle dotted underline
   signals hover-available. */
.module-harvest__head-count {
  cursor: help;
  border-bottom: 1px dotted var(--color-border-medium);
  display: inline-block;
  padding-bottom: 0.1rem;
}

/* Subtitle under the left-column header. Smaller, softer than
   the main label. Communicates that the tier columns to its
   right are CPU counts. */
.module-harvest__head-sub {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--color-text-tertiary);
  font-weight: 400;
  margin-top: 0.25rem;
}

.module-harvest__metric-label {
  font-family: var(--font-data);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  padding: 1rem 0;
  border-bottom: 1px dotted var(--color-border-subtle);
}

/* Unit suffix in row label: smaller, softer than the main label
   so '(t)', '(m3)', '($)' reads as metadata, not as a second
   word in the label. Used in harvest module to consolidate
   units into the row labels (lighter cells). */
.module-harvest__unit {
  font-size: 0.85em;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
  font-weight: 400;
  margin-left: 0.2em;
}

.module-harvest__metric-value {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  text-align: center;
  font-size: clamp(0.85rem, 1.15vw, 1rem);
  padding: 1rem 0.15rem;
  border-bottom: 1px dotted var(--color-border-subtle);
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}

.module-harvest__metric-value:last-child {
  color: var(--color-accent-secondary);
}

.module-harvest__row--capital .module-harvest__metric-label,
.module-harvest__row--capital .module-harvest__metric-value {
  border-bottom: none;
  border-top: 1px solid var(--color-border-medium);
  padding-top: 1.25rem;
  margin-top: 0.5rem;
  font-weight: 500;
}

.module-harvest__row--capital .module-harvest__metric-value {
  color: var(--color-accent-secondary);
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
}

/* Subtotal / total row: visually separated from the metric rows
   above by a hairline rule, with the metric label set in display
   serif italic to mark it as a summary, not a measured output.
   Used for the 'total carbon impact' summary that combines the
   direct CO2 removal and the standing-forest offset. */
.module-harvest__row--total .module-harvest__metric-label,
.module-harvest__row--total .module-harvest__metric-value {
  border-bottom: none;
  border-top: 1px dotted var(--color-border-medium);
  padding-top: 1rem;
  margin-top: 0.25rem;
  font-weight: 500;
}

.module-harvest__row--total .module-harvest__metric-label {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: none;
  letter-spacing: -0.005em;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  color: var(--color-text-secondary);
}

.module-harvest__row--total .module-harvest__metric-value {
  color: var(--color-accent-secondary);
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
}

.module-harvest__footnote {
  margin: 1.5rem 0 0;
  font-family: var(--font-data);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  text-align: center;
  line-height: 1.5;
}

/* --- Mobile: stack everything --- */

@media (max-width: 900px) {
  .module-dashboard__tree {
    padding: 2rem 1rem;
  }
  .module-dashboard__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .module-dashboard__cell--hero,
  .module-dashboard__cell--secondary {
    grid-column: auto;
  }
  .module-dashboard__cell {
    text-align: left;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
  }
  .module-dashboard__cell-label {
    min-height: 0;
    text-align: right;
  }
  .module-dashboard__seed {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .module-dashboard__toggle-btn {
    font-size: 0.78rem;
    padding: 0.5rem 0.9rem;
  }

  /* Harvest: collapse to a stacked layout where each tier is a card */
  .module-harvest__frame {
    padding: 2rem 1rem;
  }
  .module-harvest__table {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .module-harvest__row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
  }
  .module-harvest__head--metric,
  .module-harvest__head--tier,
  .module-harvest__metric-label,
  .module-harvest__metric-value {
    font-size: 0.7rem;
    padding: 0.5rem 0.25rem;
  }
  .module-harvest__metric-value {
    font-size: 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .module-dashboard__cell-figure,
  .module-dashboard__toggle-btn {
    transition: none;
  }
}

/* ============================================================
   Contact page (/contact)
   ------------------------------------------------------------
   Single dedicated route. Composition is deliberately spare:
   return-home link, heading, reinforcing line, form, status,
   and a success block. No nav distractions. The page reuses
   the site's color tokens, typography stack, and the section-
   CTA visual language for the submit button.

   Right-arrow hover: the homepage CTAs use down-arrows for
   in-page scroll. The contact CTA (and submit button here) use
   right-arrows for forward navigation. We override the hover
   translate to translateX for any .section__cta whose href
   starts with "/" — the attribute selector keeps in-page CTAs
   on their original down-translate motion.
   Added 2026-05-27.
   ============================================================ */

.contact-page {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  min-height: 100vh;
}

.contact {
  max-width: var(--prose-max-width);
  margin: 0 auto;
  padding: clamp(2rem, 6vh, 5rem) var(--content-gutter) clamp(3rem, 8vh, 6rem);
}

.contact__home-link-wrap {
  margin: 0 0 2.5rem;
}

.contact__home-link {
  font-family: var(--font-data);
  font-size: var(--text-body-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact__home-link:hover,
.contact__home-link:focus-visible {
  color: var(--color-accent-secondary);
}

.contact__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display-section);
  line-height: 1.1;
  color: var(--color-text-primary);
  margin: 0 0 1.5rem;
}

.contact__reinforcing {
  margin: 0 0 2.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--text-body-lead);
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.contact__reinforcing p {
  margin: 0 0 0.9rem;
}

.contact__reinforcing p:last-child {
  margin: 0;
}

.contact__reinforcing em {
  font-style: normal;
  color: var(--color-accent-secondary);
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.contact__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.contact__label {
  font-family: var(--font-data);
  font-size: var(--text-body-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.contact__label-aside {
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-tertiary);
  font-size: 0.75rem;
  margin-left: 0.4rem;
}

.contact__input {
  font-family: var(--font-body);
  font-size: var(--text-body-regular);
  color: var(--color-text-primary);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-medium);
  border-radius: 2px;
  padding: 0.75rem 0.9rem;
  transition: border-color 0.2s ease, background 0.2s ease;
  width: 100%;
}

.contact__input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  background: var(--color-bg-tertiary);
}

.contact__input--textarea {
  resize: vertical;
  min-height: 8rem;
  line-height: 1.5;
  font-family: var(--font-body);
}

.contact__submit-wrap {
  margin: 0.6rem 0 0;
}

.contact__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-data);
  font-size: var(--text-body-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-secondary);
  background: transparent;
  padding: 0.85rem 1.4rem;
  border: 1px solid var(--color-accent-primary);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.contact__submit:hover,
.contact__submit:focus-visible {
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  transform: translateY(-1px);
  outline: none;
}

.contact__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.contact__submit-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.contact__submit:hover .contact__submit-arrow,
.contact__submit:focus-visible .contact__submit-arrow {
  transform: translateX(3px);
}

.contact__form-status {
  margin: 0.4rem 0 0;
  min-height: 1.25rem;
  font-family: var(--font-body);
  font-size: var(--text-body-small);
  color: var(--color-text-secondary);
}

.contact__form-status--error {
  color: #D97757;
}

.contact__success {
  margin: 2rem 0 0;
  padding: 1.6rem 1.6rem 1.8rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-medium);
  border-radius: 2px;
}

.contact__success-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display-card);
  color: var(--color-accent-secondary);
  margin: 0 0 0.8rem;
  line-height: 1.2;
}

.contact__success-line {
  margin: 0 0 0.6rem;
  font-family: var(--font-body);
  font-size: var(--text-body-regular);
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.contact__success-line:last-child {
  margin: 1.2rem 0 0;
}

/* Right-arrow hover override for section CTAs that route to
   another page (any href starting with "/"). The homepage's
   in-page CTAs still use the original translateY motion. */
.section__cta[href^="/"]:hover .section__cta-arrow,
.section__cta[href^="/"]:focus-visible .section__cta-arrow {
  transform: translateX(3px);
}

/* ============================================================
   About page (about.html) — dedicated route reached from
   partner-shared links and any future homepage entry point.
   Composition mirrors the contact-page pattern: a single
   max-width prose column, return-home link in mono register,
   no nav. Distinct from /contact in that the About page
   carries two founder portraits and the full founding
   narrative; the type system, color tokens, and BEM-style
   naming convention are shared.
   Added 2026-05-28.
   ============================================================ */

.about-page {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  min-height: 100vh;
}

.about {
  max-width: 48rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vh, 5rem) var(--content-gutter) clamp(3rem, 8vh, 6rem);
}

.about__home-link-wrap {
  margin: 0 0 3rem;
}

.about__home-link {
  font-family: var(--font-data);
  font-size: var(--text-body-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.about__home-link:hover,
.about__home-link:focus-visible {
  color: var(--color-accent-secondary);
}

.about__eyebrow {
  font-family: var(--font-data);
  font-size: var(--text-body-small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-primary);
  margin: 0 0 1.5rem;
}

/* Three-line display headline. Each line gets its own
   block so the staccato rhythm reads on every viewport;
   the last line is intentionally longer and the smallest
   of the three to let the first two punch and the third
   land as the hook. */
.about__headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  font-size: var(--text-display-section);
  line-height: 1.05;
  color: var(--color-text-primary);
  margin: 0 0 3.5rem;
  letter-spacing: -0.01em;
}

.about__headline-line {
  display: block;
}

.about__headline-line--last {
  font-style: italic;
  font-weight: 300;
  color: var(--color-text-secondary);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  margin-top: 0.4rem;
}

/* Founder and co-founder sections share the same scaffolding.
   Each holds a portrait figure and a prose wrap. On desktop
   the portrait floats; on mobile it stacks above the prose
   at modest width. The float pattern is what gives the page
   its editorial-not-corporate feel: prose wraps the portrait
   rather than the portrait sitting in its own column. */

.about__founder,
.about__cofounder {
  margin: 0 0 3.5rem;
  /* Clearfix so the floated portrait does not break the
     section boundary on viewports where the prose is short. */
  overflow: hidden;
}

.about__section-label {
  font-family: var(--font-data);
  font-size: var(--text-body-small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-primary);
  margin: 0 0 1.5rem;
}

/* Portrait figure. Real founder photography sits inside a
   restrained frame: subtle border, modest rounded corner,
   gentle desaturate so the photo lives inside the dark-mode
   palette without dominating. The caption beneath the
   portrait names the founder and the role in two stacked
   lines, mirroring the contact page's mono-register labels. */

.about__portrait {
  margin: 0 0 1.5rem;
  width: 14rem;
  max-width: 100%;
}

.about__portrait-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  border: 1px solid var(--color-border-medium);
  filter: saturate(0.92) brightness(0.96);
  background: var(--color-bg-secondary);
}

.about__portrait-caption {
  margin: 0.8rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.about__portrait-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.about__portrait-role {
  font-family: var(--font-data);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* Desktop floats. Portrait sits inside the prose column at
   the natural break, prose wraps around it. The float
   variant determines which side; the other side gets margin
   to keep prose breathing room. */
@media (min-width: 640px) {
  .about__portrait--right {
    float: right;
    margin: 0.4rem 0 1.5rem 2rem;
    width: 16rem;
  }
  .about__portrait--left {
    float: left;
    margin: 0.4rem 2rem 1.5rem 0;
    width: 16rem;
  }
}

/* Prose block. Reuses the display-serif voice from
   .prose on the main site, with a slightly tighter line
   height appropriate for the About page's first-person
   register. The accent-amber inline em rule matches the
   site convention so reader expectations are preserved
   across pages. */

.about__prose-wrap {
  /* No max-width here; the parent .about already caps to
     48rem and the portrait float is what controls the
     visual measure of each prose line. */
}

.about__prose {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  line-height: 1.65;
  color: var(--color-text-primary);
  margin: 0 0 1.4rem;
  letter-spacing: -0.003em;
}

.about__prose em {
  font-style: italic;
  color: var(--color-accent-secondary);
}

.about__prose-strong {
  font-weight: 500;
  color: var(--color-text-primary);
}

/* The closing line of Matthew's narrative carries the
   beat shift from "this happened" to "this continues."
   Slightly more weight, slightly more space above, italic
   accent for cadence. */
.about__prose--emphasis {
  font-style: italic;
  font-weight: 300;
  color: var(--color-text-secondary);
  margin-top: 2rem;
  font-size: clamp(1.1rem, 1.35vw, 1.3rem);
}

/* Pull-quote inside the founder narrative. Reuses the
   .anchor-quote rule for the amber left border and serif
   display register; .about__pullquote layers in the
   per-page rhythm (extra top and bottom margin to mark
   the rhythm shift from expectation to immersion). */
.about__pullquote {
  margin: 2.2rem 0 2.2rem;
}

/* Beat 4: closing tie-back and CTA. */

.about__close {
  margin: 4rem 0 0;
  padding: 2.5rem 0 0;
  border-top: 1px solid var(--color-border-subtle);
  text-align: center;
}

.about__close-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  line-height: 1.4;
  color: var(--color-text-secondary);
  margin: 0 0 2.2rem;
  letter-spacing: -0.005em;
}

.about__close-line em {
  font-style: italic;
  color: var(--color-accent-secondary);
}

.about__cta-wrap {
  margin: 0;
}

.about__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-data);
  font-size: var(--text-body-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-secondary);
  background: transparent;
  padding: 0.85rem 1.4rem;
  border: 1px solid var(--color-accent-primary);
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.about__cta:hover,
.about__cta:focus-visible {
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  transform: translateY(-1px);
  outline: none;
}

.about__cta-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.about__cta:hover .about__cta-arrow,
.about__cta:focus-visible .about__cta-arrow {
  transform: translateX(3px);
}

/* ============================================================
   Sketch figure: PNG image variant.

   The v0.1 sketch placeholders were inline SVGs composited
   onto an aged-paper frame with overlaid paper-grain and
   amber wash. The v1 commission ships real Imagen-generated
   pencil-on-cream sketches that already carry their own paper
   warmth and texture, so the frame's paper-grain ::before
   and amber-wash ::after layers are suppressed for .__img
   children; the wash would double-tint and the paper grain
   would compete with the actual paper texture in the image.

   The __img element behaves the same as __svg in layout
   (block, full width, height auto). No filter is applied at
   the page layer — the PNG is monochrome graphite on cream,
   matching the asset-on-disk register the brief locks in.
   When the page later moves to amber-on-charcoal compositing
   per DESIGN.md Section 6 (post-illustrator polish, when
   sketches are delivered as SVG with currentColor strokes),
   the styling will shift; until then, the PNG is shown as
   the cream-paper original.

   Added 2026-05-28 alongside the v1 sketch commission integration.
   ============================================================ */

.sketch-figure__img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 0;
  border-radius: 2px;
}

/* When a sketch frame contains a PNG image rather than the
   inline-SVG placeholder, suppress the paper-grain and amber-wash
   overlay layers. The image carries its own paper warmth. */
.sketch-figure__frame:has(.sketch-figure__img)::before,
.sketch-figure__frame:has(.sketch-figure__img)::after {
  display: none;
}

/* Also drop the cream paper background on the frame when the
   image already shows cream paper — the inner padding becomes
   a thin border around the image rather than an exposed paper
   strip. Same logic applies to the Section 3 .diagram__frame
   when it contains the new sketch-1-biology.png. */
.sketch-figure__frame:has(.sketch-figure__img) {
  background: var(--color-bg-secondary);
  padding: 0;
  border-color: var(--color-border-medium);
}

/* Section 3 biology diagram: the new sketch-1-biology.png
   replaces the v0.1 GE-Coconut-Carbon.png. The .diagram__frame
   was tuned for the older hybrid asset; the new sketch is full
   pencil-on-cream and benefits from the same overlay suppression
   the .sketch-figure__frame gets. The :has() selector matches
   when the diagram is a sketch-1 image (filename anchor). */
.diagram__frame:has(.diagram__image[src*="sketch-1-biology"])::before,
.diagram__frame:has(.diagram__image[src*="sketch-1-biology"])::after {
  display: none;
}

.diagram__frame:has(.diagram__image[src*="sketch-1-biology"]) {
  background: var(--color-bg-secondary);
  padding: 0;
}


/* ====================================================================
   2026-06-05 conversion-first middle restructure components.
   Journey map: GE-Site-Conversion-Journey-Map-v0.1.md (docs repo).
   ==================================================================== */

/* --- Unlinked briefing pointer (every compressed band's tail).
       Deliberately NOT a link: the only briefing links on the page
       are the briefing band and the sticky corner link, so the
       mid-page pointers build appetite without offering an exit
       ramp mid-argument. --- */

.briefing-pointer {
  font-family: var(--font-data);
  font-size: var(--text-body-small);
  color: var(--color-text-tertiary);
  letter-spacing: 0.02em;
}

/* --- Operation cards (Section 3): activate / bind / integrate --- */

.operation-cards {
  list-style: none;
  margin: clamp(1.5rem, 4vh, 2.5rem) auto;
  padding: 0;
  max-width: var(--content-max-width);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.operation-card {
  border: 1px solid var(--color-border-subtle);
  border-radius: 2px;
  background: var(--color-bg-secondary);
  padding: 1.25rem 1.25rem 1.4rem;
}

.operation-card__verb {
  font-family: var(--font-data);
  font-size: var(--text-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-primary);
  margin: 0 0 0.6rem;
}

.operation-card__body {
  font-family: var(--font-body);
  font-size: var(--text-body-small);
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0;
}

@media (max-width: 720px) {
  .operation-cards { grid-template-columns: 1fr; }
}

/* --- Dashboard band (promoted from Section 6) --- */

.section--dashboard {
  /* Quieter vertical rhythm than full sections: it is a module
     band, not a prose chapter. */
  padding-top: clamp(1.5rem, 4vh, 3rem);
  padding-bottom: clamp(1.5rem, 4vh, 3rem);
}

/* --- Briefing band (PRIMARY CONVERSION) --- */

.briefing-band {
  margin: clamp(2rem, 6vh, 4rem) auto;
  max-width: var(--content-max-width);
  border: 1px solid var(--color-border-medium);
  border-radius: 2px;
  background: var(--color-bg-secondary);
}

.briefing-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  align-items: center;
}

.briefing-band__cover {
  display: block;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-tertiary);
  transition: border-color 0.2s ease;
}

.briefing-band__cover:hover,
.briefing-band__cover:focus-visible {
  border-color: var(--color-accent-primary);
  outline: none;
}

.briefing-band__cover-img {
  width: 100%;
  height: auto;
  display: block;
}

.briefing-band__eyebrow {
  font-family: var(--font-data);
  font-size: var(--text-body-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-primary);
  margin: 0 0 0.75rem;
}

.briefing-band__lede {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.4;
  color: var(--color-text-primary);
  margin: 0 0 1rem;
  max-width: 44ch;
}

.briefing-band__mandates {
  font-family: var(--font-body);
  font-size: var(--text-body-small);
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0 0 0.5rem;
  max-width: 52ch;
}

.briefing-band__register {
  font-family: var(--font-data);
  font-size: var(--text-body-small);
  color: var(--color-text-tertiary);
  margin: 0 0 1.25rem;
}

.briefing-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  align-items: center;
  margin: 0;
}

.briefing-band__download {
  font-family: var(--font-data);
  font-size: var(--text-body);
  color: var(--color-bg-primary);
  background: var(--color-accent-primary);
  padding: 0.7rem 1.2rem;
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.briefing-band__download:hover,
.briefing-band__download:focus-visible {
  background: var(--color-accent-secondary);
  outline: none;
}

.briefing-band__contact {
  font-family: var(--font-data);
  font-size: var(--text-body);
  color: var(--color-accent-secondary);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-primary);
  text-underline-offset: 0.2em;
}

@media (max-width: 720px) {
  .briefing-band__inner {
    grid-template-columns: 1fr;
  }
  .briefing-band__cover { max-width: 14rem; margin-inline: auto; }
}

/* --- Sticky quiet corner link to the briefing PDF --- */

.sticky-briefing {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  font-family: var(--font-data);
  font-size: var(--text-body-small);
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-medium);
  border-radius: 2px;
  padding: 0.55rem 0.9rem;
  text-decoration: none;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.25s ease, transform 0.25s ease, color 0.2s ease, border-color 0.2s ease;
  pointer-events: none;
}

.sticky-briefing.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sticky-briefing:hover,
.sticky-briefing:focus-visible {
  color: var(--color-accent-secondary);
  border-color: var(--color-accent-primary);
  outline: none;
}

/* --- Contact: Turnstile widget spacing (2026-06-05) --- */
.contact__turnstile {
  margin: 0.5rem 0 1rem;
  min-height: 65px; /* reserve layout space before the iframe loads */
}