/* ============================================================================
   GREA — v4-monolith
   MACROSTRUCTURE: 07 · Manifesto. One page = one argument, carried as seven
   numbered clauses read in order. 3D role: a vertical spine of those clauses,
   built in real perspective depth in the left margin. The clause numbers exist
   only in that spine (the canvas draws them), the camera dollies with scroll,
   so removing the canvas removes the document's numbering and its positional
   index. Nothing in the scene is decorative: rail = the document's measured
   length, beads = clause and sub-clause divisions, plates = the clauses.

   ACCENT: oklch(0.64 0.19 27) = #e95048 — one accent, under 3% of any viewport
   TYPE:   Big Shoulders Display (display) / Switzer (body) / Space Mono (mono)
   PALETTE (oklch, hue 27 throughout, no pure black or white, no zero chroma):
     paper     oklch(0.155 0.012 27)  #110a09
     surface-1 oklch(0.185 0.013 27)  #181110
     surface-2 oklch(0.215 0.014 27)  #201716
     rule      oklch(0.300 0.014 27)  #352b2a
     plate     oklch(0.360 0.014 27)  #443a39   (non-text: the spine's plates)
     neutral-4 oklch(0.420 0.013 27)  #544b49   (non-text: rail, hairlines)
     muted     oklch(0.610 0.012 27)  #8a817f   5.14:1
     ink-2     oklch(0.740 0.011 27)  #b2a8a7   8.45:1  (body copy)
     ink-1     oklch(0.870 0.009 27)  #dad2d1  13.17:1
     ink       oklch(0.950 0.007 27)  #f3edec  16.88:1  (headings)
     accent    oklch(0.640 0.190 27)  #e95048   5.32:1

   PRE-EMIT SELF-CRITIQUE (NOSLOP §9)
     Philosophy    5  the shape is the argument: seven clauses, one spine, the
                      camera is the reading position. No other page shape fits.
     Hierarchy     4  h1 → clause titles → bodies, with the spine marking the
                      reading line. The top band stays deliberately quiet.
     Execution     4  one accent, three families, roman display type throughout,
                      measured alignment between DOM clauses and 3D plates.
     Specificity   5  $5K/$50K/$1.5K–5K, 7:30 AM MST, 24% AZ credit, Longmont,
                      Groq/SambaNova/Cerebras, Zig/Go/Rust. GREA's alone.
     Restraint     4  no cards, no reveals, no gradients, no icons, no images.
                      Removed: hover glow, scroll reveals, parallax layers.
     Variety       5  a depth-mapped index corridor is not a colour swap: the
                      macrostructure and the 3D job are both unique to this row.

   Scroll is read inside the requestAnimationFrame loop (never a scroll event
   listener); IntersectionObserver drives the active clause and pauses the
   renderer when the page is hidden or the canvas leaves the viewport.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --paper: oklch(0.155 0.012 27);
  --surface-1: oklch(0.185 0.013 27);
  --surface-2: oklch(0.215 0.014 27);
  --rule: oklch(0.3 0.014 27);
  --neutral-4: oklch(0.42 0.013 27);
  --muted: oklch(0.61 0.012 27);
  --ink-2: oklch(0.74 0.011 27);
  --ink-1: oklch(0.87 0.009 27);
  --ink: oklch(0.95 0.007 27);
  --accent: oklch(0.64 0.19 27);
  --accent-deep: oklch(0.47 0.14 27);

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body: "Switzer", "Helvetica Neue", sans-serif;
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --pad: clamp(18px, 4vw, 56px);
  --content: 1180px;
  --gutter: 96px;
  --gap: clamp(16px, 2.6vw, 38px);

  /* the reading line: the y at which a clause plate sits on the spine.
     app.js re-writes this in px so the DOM and the canvas share one number. */
  --read-y: 38vh;
  --num-px: 54px;
  --title-lh: 1;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

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

html,
body { overflow-x: clip; }

html {
  background: var(--paper);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--display);
  font-style: normal;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}

p { margin: 0; min-width: 0; overflow-wrap: anywhere; }

ol, ul, dl, dd, dt { margin: 0; padding: 0; }

a {
  color: var(--ink-1);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 220ms var(--ease-out), text-decoration-color 220ms var(--ease-out);
}

a:hover { color: var(--accent); text-decoration-color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--accent-deep); color: var(--ink); }

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9;
  background: var(--surface-2);
  color: var(--ink);
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  white-space: nowrap;
}
.skip:focus { left: 0; }

/* Render verification only: ?at=N shifts the document the way a scroll would,
   without performing a programmatic scroll (headless Chrome captures a frame
   without one applied). Never active on a normal visit. */
.is-at body > header,
.is-at body > main,
.is-at body > footer { transform: translate3d(0, var(--at-shift, 0px), 0); }

.grid {
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, 1fr);
  column-gap: var(--gap);
  width: min(var(--content), 100% - (var(--pad) * 2));
  margin-inline: auto;
}

/* every direct child of a .grid sits in the second column; the first column is
   the spine's column and stays empty in the DOM. */
.grid > * { grid-column: 2; }

/* ---------- the spine canvas + the reading-line readout ---------- */
.spine {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
}
.spine.is-drawn { opacity: 1; }

.readout {
  position: fixed;
  left: var(--pad);
  bottom: var(--pad);
  z-index: 3;
  display: flex;
  gap: 0.5em;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
}
.readout.is-on { opacity: 1; }
.readout.is-off { opacity: 0; }
.readout__v { color: var(--accent); font-weight: 700; }

/* ---------- masthead ---------- */
.masthead {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: baseline;
  justify-content: space-between;
  width: min(var(--content), 100% - (var(--pad) * 2));
  margin-inline: auto;
  padding-block: 22px 20px;
  border-block-end: 1px solid var(--neutral-4);
}

.mark {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  min-width: 0;
}

.mark__sub {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.masthead__nav {
  display: flex;
  gap: 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.masthead__nav a { white-space: nowrap; text-decoration: none; color: var(--muted); }
.masthead__nav a:hover { color: var(--accent); }

/* ---------- opening ---------- */
.opening { padding-block: clamp(64px, 15vh, 190px) clamp(80px, 18vh, 220px); }

.opening__lead {
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, 1fr);
  column-gap: var(--gap);
  width: min(var(--content), 100% - (var(--pad) * 2));
  margin-inline: auto;
}

.opening h1 {
  grid-column: 2;
  font-size: clamp(2.7rem, 7.4vw, 5.5rem);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.004em;
  max-width: 22ch;
}

.opening__body { margin-top: clamp(28px, 5vh, 64px); }

.opening__col { max-width: 60ch; display: grid; gap: 1.05em; }

.opening__col p { font-size: 1.06rem; color: var(--ink-2); }

.opening__mech {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--muted);
  border-inline-start: 1px solid var(--rule);
  padding-inline-start: 18px;
  font-variant-numeric: tabular-nums;
}

/* the one orchestrated page-load moment; nothing else animates on entry */
.opening__lead h1 { --i: 0; }
.opening__col > p:nth-child(1) { --i: 1; }
.opening__col > p:nth-child(2) { --i: 2; }
.opening__col > p:nth-child(3) { --i: 3; }

.opening__lead h1,
.opening__col > p {
  animation: rise 420ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}

/* ---------- manifesto ---------- */
.manifesto { padding-block-end: clamp(60px, 12vh, 150px); }

.clauses { list-style: none; }

.clause {
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, 1fr);
  column-gap: var(--gap);
  width: min(var(--content), 100% - (var(--pad) * 2));
  margin-inline: auto;
}

/* varied rhythm: no two clauses are spaced the same way */
.clause:nth-child(1) { min-height: 70vh; }
.clause:nth-child(2) { min-height: 60vh; margin-block-start: 12vh; }
.clause:nth-child(3) { min-height: 56vh; margin-block-start: 7vh; }
.clause:nth-child(4) { min-height: 64vh; margin-block-start: 16vh; }
.clause:nth-child(5) { min-height: 58vh; margin-block-start: 9vh; }
.clause:nth-child(6) { min-height: 88vh; margin-block-start: 5vh; }
.clause:nth-child(7) { min-height: 70vh; margin-block-start: 14vh; }

.clause__gutter {
  font-family: var(--mono);
  font-size: var(--num-px);
  line-height: var(--title-lh);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--neutral-4);
  font-variant-numeric: tabular-nums;
  transition: opacity 220ms var(--ease-out);
}

/* the DOM numerals are the no-JS / no-WebGL fallback. When the canvas is alive
   app.js sets .is-live on <html> and the numbers come from the 3D spine. */
.is-live .clause__num { opacity: 0; }

.clause__text { max-width: 62ch; }

.clause__title {
  font-size: clamp(1.9rem, 3.5vw, 2.9rem);
  line-height: 0.98;
  font-weight: 500;
  letter-spacing: -0.002em;
  margin-block-end: 0.5em;
}

.clause__text p + p { margin-block-start: 0.95em; }

.clause__text p { color: var(--ink-2); }

/* the clause that owns the reading line */
.clause.is-here .clause__title { color: var(--ink); }
.clause.is-here .clause__gutter { color: var(--accent); }

/* ---------- live domains ---------- */
.domains { padding-block: clamp(56px, 11vh, 140px) clamp(64px, 13vh, 160px); }

.domains__title {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 0.95;
  font-weight: 500;
  max-width: 18ch;
}

.domains__col { margin-block-start: clamp(26px, 4vh, 54px); max-width: 74ch; }

.domains__list { border-block-start: 1px solid var(--rule); }

.domains__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr);
  column-gap: clamp(16px, 3vw, 40px);
  padding-block: 15px 16px;
  border-block-end: 1px solid var(--rule);
}

.domains__row dt {
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
}
.domains__row dt a { white-space: nowrap; text-decoration-color: var(--neutral-4); }
.domains__row dd { font-size: 15.5px; line-height: 1.6; color: var(--muted); }

.domains__note {
  margin-block-start: 1.6em;
  font-size: 15px;
  line-height: 1.66;
  color: var(--muted);
  max-width: 66ch;
}
.domains__note + .domains__note { margin-block-start: 0.9em; }

/* ---------- footer ---------- */
.foot { padding-block: clamp(48px, 9vh, 110px) clamp(56px, 10vh, 120px); }
.foot .grid { border-block-start: 1px solid var(--rule); padding-block-start: 28px; }

.foot__lead {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.1;
  font-weight: 400;
  color: var(--ink-1);
  max-width: 30ch;
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-block-start: 1.5em;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
}
.foot__links a { white-space: nowrap; }

.foot__fine {
  margin-block-start: 2.2em;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- narrow ---------- */
@media (max-width: 900px) {
  :root { --gutter: 74px; --num-px: 38px; }
  .clause__text { max-width: 60ch; }
  .domains__row { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .clause:nth-child(n) { min-height: 58vh; margin-block-start: 10vh; }
}

@media (max-width: 620px) {
  :root { --gutter: 52px; --gap: 15px; --num-px: 26px; --read-y: 34vh; }
  body { font-size: 16.5px; }
  .mark { font-size: 1.3rem; }
  .mark__sub { display: none; }
  .opening { padding-block: 18vh 16vh; }
  .opening__col p { font-size: 1rem; }
  .opening h1 { max-width: 100%; }
  .clause__title { font-size: clamp(1.7rem, 8vw, 2.3rem); }
  .clause__text { max-width: 100%; }
  .clause__gutter { line-height: 1.15; }
  .clause:nth-child(n) { min-height: 52vh; margin-block-start: 8vh; }
  .domains__title { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .readout { font-size: 10px; letter-spacing: 0.12em; }
  /* link lists need the full measure at this width: elevatementalhealthsupports.com
     is 30 monospace characters and a link may never wrap to two lines */
  .domains .grid { grid-template-columns: minmax(0, 1fr); }
  .domains .grid > * { grid-column: 1; }
  .domains__row dt { font-size: 12.5px; letter-spacing: 0; }
}

@media (max-width: 400px) {
  :root { --gutter: 44px; --num-px: 23px; }
}

/* ---------- reduced motion: no spatial motion, opacity only ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 220ms !important;
    animation-timing-function: linear !important;
    transition-duration: 220ms !important;
  }
  @keyframes rise {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .opening__lead h1,
  .opening__col > p { animation-name: rise; }
}