/* =========================================================================
   GREA — v3-loom
   MACROSTRUCTURE 14 · Narrative Workflow
   The page is read as one process: the sorbent media train runs intake →
   
   activated carbon → ion-exchange resin → molecular sieve → biochar →
   output → regeneration. The 3D canvas is the diagram of that train and
   the scroll position is the position in it; each stage lights its own bed.
   Delete the canvas and you lose the flow geometry, the bed order and the
   counter-current regeneration loop. It is the index, not decoration.

   Accent: oklch(0.70 0.14 150) — one accent, under 3% of any viewport.
   Faces:  Tomorrow (display) / Geist (body) / Geist Mono (outlier). Three.

   PRE-EMIT SELF-CRITIQUE (1–5)
     Philosophy  4  the shape is the operator's own process, stage by stage
     Hierarchy   5  h1 → train the reader walks → evidence → honesty → terms
     Execution   4  one accent, hairlines, tabular numbers, no gloss
     Specificity 5  Longmont, 24%, NSF/NIH/EPA/DOE/USDA, four named beds
     Restraint   4  no cards, no reveals, no icons, no gradient headline
     Variety     4  a scroll-travelled flow diagram, not a colour-swapped hero
   ========================================================================= */

/* ---------- tokens ---------- */
:root{
  --paper:      oklch(14.5% 0.012 150);
  --paper-hi:   oklch(17%   0.012 150);
  --surf-1:     oklch(18.5% 0.012 150);
  --surf-2:     oklch(22.5% 0.013 150);
  --ink:        oklch(94%   0.008 150);
  --ink-2:      oklch(72%   0.012 150);
  --ink-3:      oklch(60%   0.012 150);
  --ink-4:      oklch(63%   0.012 150);   /* clears 4.5:1 on the label's own 72%-alpha chip */
  --rule:       oklch(32%   0.013 150);
  --rule-soft:  oklch(24%   0.013 150);
  --accent:     oklch(70%   0.14  150);
  --accent-mid: oklch(62%   0.11  150);
  --accent-dim: oklch(50%   0.07  150);
  --spent:      oklch(58%   0.02  75);

  --font-display: "Tomorrow", "Avenir Next", sans-serif;
  --font-body:    "Geist", "Avenir Next", sans-serif;
  --font-mono:    "Geist Mono", "SFMono-Regular", monospace;

  --t-xs: 0.75rem;     /* 12px — mono labels only */
  --t-sm: 0.8125rem;   /* 13px — mono / captions */
  --t-b:  1rem;        /* 16px — body floor */
  --t-1:  1.0625rem;
  --t-2:  1.25rem;
  --t-3:  clamp(1.5rem, 3.2vw, 2.1rem);
  --t-4:  clamp(1.8rem, 4.4vw, 2.75rem);
  --t-h1: clamp(1.95rem, 5.2vw, 3.4rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --micro: 120ms;
  --short: 220ms;
  --long:  420ms;

  --gut: clamp(1.25rem, 4.5vw, 4.5rem);
  --col: 1240px;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; overflow-x:clip }
html{ -webkit-text-size-adjust:100% }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--t-b);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--font-display); font-style:normal; font-weight:500; margin:0; letter-spacing:-0.015em }
p{ margin:0 }
ol,ul,dl{ margin:0; padding:0; list-style:none }
a{ color:inherit }
canvas{ display:block }
table{ border-collapse:collapse }
button,input{ font:inherit }

.mono{ font-family:var(--font-mono); font-size:var(--t-sm); letter-spacing:0.01em }
.num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums }
.ink-hi{ font-weight:500; color:var(--ink) }

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

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:50;
  background:var(--surf-2); color:var(--ink); padding:0.6rem 1rem;
  font-family:var(--font-mono); font-size:var(--t-sm); text-decoration:none;
}
.skip:focus{ left:0.75rem; top:0.75rem }

/* ---------- masthead ---------- */
.masthead{
  position:sticky; top:0; z-index:20;
  background:var(--paper);
  border-bottom:1px solid var(--rule-soft);
}
.masthead__in{
  max-width:var(--col); margin:0 auto;
  padding:0.85rem var(--gut);
  display:flex; align-items:baseline; gap:1rem;
}
.mark{
  font-family:var(--font-display); font-weight:600; font-size:1.0625rem;
  letter-spacing:0.14em; text-decoration:none; color:var(--ink);
  white-space:nowrap;
}
.mark__note{
  font-family:var(--font-mono); font-size:var(--t-sm); color:var(--ink-4);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.masthead__mail{
  margin-left:auto; font-family:var(--font-mono); font-size:var(--t-sm);
  color:var(--ink-2); text-decoration:none; white-space:nowrap;
  transition:color var(--micro) var(--ease-out);
  border-bottom:1px solid var(--rule);
  padding-bottom:1px;
}
.masthead__mail:hover{ color:var(--ink); border-bottom-color:var(--accent) }

/* ---------- hero ---------- */
.hero{
  max-width:var(--col); margin:0 auto;
  padding:clamp(3rem,9vh,6.5rem) var(--gut) clamp(2.5rem,6vh,4.5rem);
}
.hero__g{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,0.85fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.hero h1{
  font-size:var(--t-h1); line-height:1.06; letter-spacing:-0.022em;
  max-width:20ch; overflow-wrap:anywhere; min-width:0;
  text-wrap:balance;
}
.hero__sub{
  margin-top:1.35rem; color:var(--ink-2);
  font-size:var(--t-1); line-height:1.62; max-width:44ch;
}
.hero__lead > *{ animation:rise var(--long) var(--ease-out) both }
.hero__side{ animation:rise var(--long) 120ms var(--ease-out) both }

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

.counts{ border-top:1px solid var(--rule) }
.counts__row{
  display:flex; align-items:baseline; gap:1rem;
  padding:0.7rem 0; border-bottom:1px solid var(--rule-soft);
}
.counts dt{ font-size:var(--t-sm); color:var(--ink-3); min-width:0 }
.counts dd{
  margin-left:auto; font-family:var(--font-display); font-weight:600;
  font-size:1.5rem; line-height:1; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.hero__src{
  margin-top:1rem; font-family:var(--font-mono); font-size:var(--t-sm);
  line-height:1.5; color:var(--ink-4);
}

/* ---------- the train ---------- */
.train{
  max-width:var(--col); margin:0 auto;
  padding:clamp(3.5rem,10vh,7rem) var(--gut) clamp(2rem,5vh,3.5rem);
  border-top:1px solid var(--rule-soft);
}
.train__intro h2{ font-size:var(--t-4); line-height:1.1; max-width:24ch }
.lede{
  margin-top:1.5rem; color:var(--ink-2); font-size:var(--t-1);
  line-height:1.62; max-width:62ch;
}
.train__meta{
  margin-top:1.75rem; display:flex; flex-wrap:wrap; align-items:center;
  gap:0.65rem; color:var(--ink-4);
}
.train__meta .mono{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:0.1em; white-space:nowrap }
.dot{ width:3px; height:3px; border-radius:50%; background:var(--accent-dim); flex:none }

.train__body{
  margin-top:clamp(2.5rem,7vh,4.5rem);
  display:grid; grid-template-columns:minmax(0,45fr) minmax(0,55fr);
  gap:clamp(1.75rem,4vw,3.5rem);
  align-items:start;
}

/* the instrument panel — the diagram itself */
.panel{
  position:sticky; top:4.25rem;
  height:min(78svh, 700px);
  background:var(--surf-1);
  border:1px solid var(--rule);
  overflow:hidden;
}
#loom{ position:absolute; inset:0; width:100%; height:100% }
.panel__frame{
  position:absolute; inset:0; pointer-events:none; z-index:4;
  background:radial-gradient(115% 85% at 50% 40%, transparent 55%, oklch(14.5% 0.012 150 / 0.55) 100%);
}
.panel__hud{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  display:flex; align-items:center; gap:0.85rem;
  padding:0.7rem 0.9rem;
  background:oklch(14.5% 0.012 150 / 0.82);
  border-top:1px solid var(--rule-soft);
}
.hud__idx{
  font-family:var(--font-mono); font-size:var(--t-sm);
  font-variant-numeric:tabular-nums; color:var(--accent); white-space:nowrap;
}
.hud__sep{ color:var(--ink-4); margin:0 0.15rem }
.hud__name{
  font-family:var(--font-display); font-size:0.9375rem; font-weight:500;
  color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hud__ticks{ margin-left:auto; display:flex; gap:3px; flex:none }
.hud__ticks li{
  width:16px; height:4px; border:1px solid var(--rule);
  transition:background-color var(--short) var(--ease-io), border-color var(--short) var(--ease-io);
}
.hud__ticks li.is-on{ background:var(--accent); border-color:var(--accent); color:oklch(18% 0.02 150) }
.hud__ticks li.is-past{ background:var(--accent-dim); border-color:var(--accent-dim) }

.panel__tags{ position:absolute; inset:0; z-index:3; pointer-events:none }
.tag{
  position:absolute; top:0; left:0;
  font-family:var(--font-mono); font-size:var(--t-xs);
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-3);
  padding:1px 5px; white-space:nowrap;
  background:oklch(14.5% 0.012 150 / 0.72);
  transform:translate3d(var(--tx,0), var(--ty,0), 0) translate(-50%,-50%);
  opacity:0;
  transition:opacity var(--short) var(--ease-out);
  will-change:transform;
}
.tag.is-active{ color:var(--accent); opacity:1; background:oklch(14.5% 0.012 150 / 0.9) }
.tag.is-near{ color:var(--ink-3); opacity:1 }
.tag.is-far{ color:var(--ink-4); opacity:1 }

.panel__legend{
  position:absolute; left:0.9rem; top:0.8rem; z-index:5;
  display:flex; align-items:center; gap:0.5rem;
  font-size:var(--t-xs); letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-3); background:oklch(14.5% 0.012 150 / 0.78);
  padding:2px 6px;
}
.legend__key{
  width:22px; height:2px; flex:none;
  background:linear-gradient(90deg, var(--spent) 0%, var(--accent) 100%);
}
.panel__fail{
  position:absolute; inset:auto 1rem 3.5rem 1rem; z-index:6;
  font-family:var(--font-mono); font-size:var(--t-sm); line-height:1.5;
  color:var(--ink-2);
}

/* the seven stages the reader walks through */
.stage{
  padding:clamp(2.5rem,9vh,5.5rem) 0 clamp(2.5rem,9vh,5.5rem) 1.35rem;
  border-top:1px solid var(--rule-soft);
  border-left:1px solid transparent;
  scroll-margin-top:5.5rem;
}
.stage:first-child{ border-top:0; padding-top:0 }
.stage__idx{
  font-size:var(--t-xs); text-transform:uppercase; letter-spacing:0.12em;
  color:var(--ink-4);
  transition:color var(--short) var(--ease-io);
}
.stage__name{
  margin-top:0.5rem; font-size:var(--t-2); line-height:1.2; color:var(--ink);
}
.stage__body{
  margin-top:0.7rem; color:var(--ink-2); font-size:var(--t-1);
  line-height:1.62; max-width:46ch;
}
.stage__surf{
  margin-top:1.15rem; padding-top:0.85rem;
  border-top:1px dashed var(--rule);
  color:var(--ink-3); font-size:0.9375rem; line-height:1.55; max-width:48ch;
}
.stage__surf .mono{
  display:block; font-size:var(--t-xs); text-transform:uppercase;
  letter-spacing:0.12em; color:var(--ink-4); margin-bottom:0.3rem;
}
.stage.is-live{ border-left-color:var(--accent) }
.stage.is-live .stage__idx{ color:var(--accent) }

/* ---------- capabilities ---------- */
.cap{
  max-width:var(--col); margin:0 auto;
  padding:clamp(4rem,11vh,8rem) var(--gut) clamp(3rem,7vh,5rem);
}
.cap h2{ font-size:var(--t-3); max-width:22ch }
.cap__list{ margin-top:clamp(2rem,5vh,3rem) }
.cap__row{
  display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:1.5rem 2.5rem;
  padding:1.05rem 0;
  border-top:1px solid var(--rule-soft);
}
.cap__row:last-child{ border-bottom:1px solid var(--rule-soft) }
.cap__row dt{
  font-family:var(--font-display); font-weight:500; font-size:var(--t-1);
  color:var(--ink);
}
.cap__row dd{ color:var(--ink-2); max-width:52ch; font-size:var(--t-1) }

/* ---------- the holding ---------- */
.hold{
  max-width:var(--col); margin:0 auto;
  padding:clamp(4.5rem,12vh,8.5rem) var(--gut) clamp(3rem,7vh,5rem);
  border-top:1px solid var(--rule-soft);
}
.hold h2{ font-size:var(--t-3); max-width:26ch }
.hold__lede{
  margin-top:1.25rem; color:var(--ink-2); font-size:var(--t-1);
  line-height:1.62; max-width:58ch;
}
.tbl{ width:100%; margin-top:clamp(2rem,5vh,3rem); font-size:0.9375rem }
.tbl th{
  font-family:var(--font-mono); font-weight:400; font-size:var(--t-xs);
  text-transform:uppercase; letter-spacing:0.12em; color:var(--ink-4);
  text-align:left; padding:0 0.9rem 0.6rem 0;
  border-bottom:1px solid var(--rule);
}
.tbl td{
  padding:0.8rem 0.9rem 0.8rem 0;
  border-bottom:1px solid var(--rule-soft);
  vertical-align:top; color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.tbl tbody tr:last-child td{ border-bottom:1px solid var(--rule) }
.tbl__n{ width:2.5rem; color:var(--ink-4); font-family:var(--font-mono) }
.tbl__name{
  font-family:var(--font-display); font-weight:500; color:var(--ink);
  white-space:nowrap;
}
.tbl__dom{ font-family:var(--font-mono); font-size:var(--t-sm) }
.tbl__dom a{ color:var(--ink-2); text-underline-offset:3px; text-decoration-color:var(--rule) }
.tbl__dom a:hover{ text-decoration-color:var(--accent); color:var(--ink) }
.tbl__none{ color:var(--ink-4) }
.hold__foot{
  margin-top:1.35rem; font-family:var(--font-mono); font-size:var(--t-sm);
  color:var(--ink-3); line-height:1.55; max-width:70ch;
}

/* ---------- geography ---------- */
.geo{
  max-width:var(--col); margin:0 auto;
  padding:clamp(3.5rem,9vh,6.5rem) var(--gut);
}
.geo h2{ font-size:var(--t-3); max-width:22ch }
.geo__g{
  margin-top:clamp(2rem,5vh,3rem);
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.5rem);
}
.geo__state + .geo__state{ margin-top:2.25rem; padding-top:2.25rem; border-top:1px solid var(--rule-soft) }
.geo__code{
  font-size:var(--t-xs); letter-spacing:0.18em; color:var(--accent);
  text-transform:uppercase;
}
.geo__name{ margin-top:0.4rem; font-size:var(--t-2); color:var(--ink) }
.geo__state p:not(.geo__code){
  margin-top:0.6rem; color:var(--ink-2); font-size:var(--t-1);
  line-height:1.62; max-width:48ch;
}
.geo__facts{ border-left:1px solid var(--rule-soft); padding-left:clamp(1.25rem,3vw,2.5rem) }
.geo__fact{ padding:0.9rem 0; border-bottom:1px solid var(--rule-soft) }
.geo__fact:first-child{ padding-top:0 }
.geo__fact dt{
  font-family:var(--font-mono); font-size:var(--t-xs); text-transform:uppercase;
  letter-spacing:0.1em; color:var(--ink-4);
}
.geo__fact dd{ margin:0.35rem 0 0; color:var(--ink); font-size:var(--t-1) }
.geo__fact dd.num{ font-family:var(--font-display); font-weight:600; font-size:1.75rem; line-height:1 }

/* ---------- trade-offs ---------- */
.trade{
  max-width:var(--col); margin:0 auto;
  padding:clamp(3rem,7vh,5rem) var(--gut) clamp(4rem,10vh,7rem);
  border-top:1px solid var(--rule-soft);
}
.trade h2{ font-size:var(--t-3); max-width:26ch }
.trade__list{ margin-top:clamp(1.75rem,4vh,2.5rem) }
.trade__list li{
  display:grid; grid-template-columns:minmax(0,11rem) minmax(0,1fr);
  gap:0.6rem 2.5rem; padding:1rem 0;
  border-top:1px solid var(--rule-soft);
}
.trade__list li:last-child{ border-bottom:1px solid var(--rule-soft) }
.trade__list > li > p.mono{
  font-size:var(--t-xs); text-transform:uppercase; letter-spacing:0.12em;
  color:var(--ink-4); padding-top:0.2rem;
}
.trade__list li p:last-child{ color:var(--ink-2); font-size:var(--t-1); max-width:58ch }

/* ---------- engagement ---------- */
.engage{
  max-width:var(--col); margin:0 auto;
  padding:clamp(4rem,10vh,7.5rem) var(--gut) clamp(4rem,10vh,7rem);
  background:var(--paper-hi);
  border-top:1px solid var(--rule-soft);
}
.engage h2{ font-size:var(--t-4); max-width:20ch }
.engage__g{
  margin-top:clamp(1.75rem,4vh,2.5rem);
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(1.75rem,4vw,3.5rem);
}
.engage__pitch{ color:var(--ink-2); font-size:var(--t-2); line-height:1.5; max-width:52ch }
.engage__facts{ border-left:2px solid var(--accent); padding-left:1.25rem }
.engage__fact{ color:var(--ink); font-size:var(--t-1); line-height:1.5 }
.engage__fact + .engage__fact{ margin-top:0.9rem; color:var(--ink-2) }
.engage__cta{ margin-top:clamp(2rem,5vh,3rem); display:flex; flex-wrap:wrap; gap:0.75rem }
.btn{
  display:inline-flex; align-items:center;
  padding:0.8rem 1.4rem; border-radius:2px;
  font-family:var(--font-mono); font-size:var(--t-sm); white-space:nowrap;
  text-decoration:none; background:var(--accent); color:var(--paper);
  border:1px solid var(--accent);
  transition:background-color var(--micro) var(--ease-out), color var(--micro) var(--ease-out),
             border-color var(--micro) var(--ease-out);
}
.btn:hover{ background:oklch(76% 0.14 150); border-color:oklch(76% 0.14 150) }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--rule) }
.btn--ghost:hover{ background:transparent; border-color:var(--ink-3); color:var(--ink) }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--rule) }
.foot__in{
  max-width:var(--col); margin:0 auto;
  padding:clamp(2.5rem,6vh,4rem) var(--gut);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"brand nav" "line nav" "hub nav";
  gap:0.85rem clamp(2rem,5vw,4rem);
  align-items:start;
}
.foot__brand{ grid-area:brand; font-size:1rem; letter-spacing:0.16em; color:var(--ink) }
.foot__line{ grid-area:line; color:var(--ink-3); font-size:0.9375rem; max-width:54ch; line-height:1.6 }
.foot__nav{ grid-area:nav; display:flex; flex-direction:column; gap:0.55rem; align-items:flex-start }
.foot__nav a{
  font-family:var(--font-mono); font-size:var(--t-sm); color:var(--ink-2);
  text-decoration:none; white-space:nowrap;
  border-bottom:1px solid var(--rule);
  transition:color var(--micro) var(--ease-out), border-bottom-color var(--micro) var(--ease-out);
}
.foot__nav a:hover{ color:var(--ink); border-bottom-color:var(--accent) }
.foot__hub{ grid-area:hub; margin-top:0.35rem }
.foot__hub a{
  font-family:var(--font-mono); font-size:var(--t-sm); color:var(--ink-4);
  text-decoration:none; white-space:nowrap;
}
.foot__hub a:hover{ color:var(--accent) }

/* ---------- 1024 and down ---------- */
@media (max-width:1024px){
  .hero__g{ grid-template-columns:minmax(0,1fr); gap:2.5rem }
  .hero h1{ max-width:24ch }
  .counts{ max-width:34rem }
  .geo__g{ grid-template-columns:minmax(0,1fr) }
  .geo__facts{ border-left:0; border-top:1px solid var(--rule-soft); padding-left:0; padding-top:1.25rem }
  .engage__g{ grid-template-columns:minmax(0,1fr) }
  .engage__facts{ border-left-width:2px }
  .cap__row{ grid-template-columns:minmax(0,1fr); gap:0.35rem }
  .trade__list li{ grid-template-columns:minmax(0,1fr); gap:0.3rem }
}

/* ---------- 900 and down: the panel becomes a header band ---------- */
@media (max-width:900px){
  .train__body{ grid-template-columns:minmax(0,1fr); gap:0 }
  .panel{
    top:3.5rem; height:44svh; min-height:250px;
    margin-bottom:1.75rem;
  }
  .tag{ display:none }
  .tag.is-active{ display:block }
  .stage{ padding-left:1.1rem }
  .cap__list{ margin-top:1.5rem }
}

@media (max-width:680px){
  .masthead__in{ padding:0.7rem var(--gut) }
  .mark__note{ display:none }
  /* the twelve-row table becomes a stack of labelled records */
  .tbl,.tbl tbody,.tbl tr,.tbl td{ display:block; width:auto }
  .tbl thead{ display:none }
  .tbl tr{ padding:0.9rem 0; border-bottom:1px solid var(--rule-soft) }
  .tbl tbody tr:last-child{ border-bottom:1px solid var(--rule) }
  .tbl td{ padding:0; border:0 }
  .tbl td::before{
    content:attr(data-label); display:block;
    font-family:var(--font-mono); font-size:var(--t-xs);
    text-transform:uppercase; letter-spacing:0.12em; color:var(--ink-4);
    margin-bottom:0.15rem;
  }
  .tbl td + td{ margin-top:0.55rem }
  .tbl__n{ display:none }
  .tbl__name,.tbl__dom{ white-space:normal }
  .foot__in{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"brand" "line" "nav" "hub";
    gap:1rem;
  }
  .foot__nav{ margin-top:0.25rem }
}

/* ---------- reduced motion: spatial motion collapses to a crossfade ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
    transition-delay:0ms !important;
  }
  .hero__lead > *,.hero__side{ opacity:1; transform:none }
  .tag{ will-change:auto }
}