/* ============================================================
   Twenty Thousand Uncompiled Codebases — shared stylesheet
   Redesign r2 — "the instrument, not the brochure"
   Charcoal field #0C0D0E · Plate (soft white) #F7F7F7 · Vermilion #F04C3A
   The signal color #F5A524 belongs to UNTESTED before it belongs to the brand —
   which is why the mark itself is vermilion, not signal. The logo does not
   spend the colour the register reserves for doubt.
   Vermilion marks structure, amber marks doubt, and they never appear in
   the same component. Brand values are declared in assets/tokens.css.
   Geist (display + body) · Geist Mono (labels, badges, data)
   All text pairs verified ≥ 4.5:1 (see REDESIGN-PLAN.md).
   ============================================================ */

/* ---------- self-hosted fonts (latin subset, variable) ----------
   Vendored so the site renders offline, over file://, and on networks
   that block third-party CDNs. Paths resolve from every page depth. */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/geist-var-latin.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/geist-mono-var-latin.woff2') format('woff2')}

/* ============================================================
   TOKENS
   Dark canvas is the default. `.lt` scopes a bone plate: it only
   re-declares the tokens, so every component works on both grounds.
   Legacy names (--paper, --ink, --redline, --stamp, --card, --rule,
   --graphite) are aliases kept live for pages not yet rebuilt.
   ============================================================ */
:root{
  /* surfaces */
  --void:#0C0D0E; --carbon:#141618; --carbon-2:#1B1E20;
  --line:#26292C; --line-strong:#3B3F43;
  /* text */
  --text:#F7F7F7; --text-2:#A9ABA4; --text-3:#8B8D86;
  /* the reserved doubt token — the evidence register's Untested state and the
     honesty callouts, and nothing else. The brand accent is --verm, declared
     in assets/tokens.css; the two never meet inside one component. */
  --signal:#F5A524; --signal-deep:#7A4E08; --signal-wash:rgba(245,165,36,.07);
  --signal-ink:#0C0D0E;   /* text that sits on a signal fill */
  /* muted data states — never accents. Values live in assets/tokens.css. */
  --sage:var(--slate); --sage-wash:var(--slate-wash);
  --warmgray:var(--stone);
  /* sticky chrome ground */
  --glass:rgba(12,13,14,.92);
  /* type */
  --f-sans:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:144px;
  /* type scale */
  --t-hero:clamp(3rem,8.5vw,7.2rem);
  --t-h2:clamp(1.9rem,4.2vw,3.1rem);
  --t-h3:1.3rem;
  --t-lede:clamp(1.08rem,2vw,1.3rem);
  --t-body:1.0625rem;
  --t-small:.9rem;
  --t-label:.6875rem;
  --t-micro:.625rem;
  /* weights (variable axis) */
  --w-display:640; --w-semi:560; --w-body:400; --w-mono:460; --w-mono-b:580;

  /* ---- legacy aliases (unmigrated pages + embedded CSS) ---- */
  --paper:var(--void); --card:var(--carbon);
  --ink:var(--text); --graphite:var(--text-2);
  --rule:var(--line); --rule-soft:var(--line);
  --redline:var(--verm); --redline-wash:var(--verm-wash);
  --stamp:var(--sage); --stamp-wash:var(--sage-wash);
  --display:var(--f-sans); --body:var(--f-sans); --mono:var(--f-mono);
}

/* ---- the light theme: the whole page becomes the plate ----
   Toggled from the masthead; stored as `lintel-theme`; dark is the default
   and the brand ground. Diagram plates are bone in both themes, so nothing
   drawn ever re-renders — only the field around it flips. */
:root[data-theme="light"]{
  --void:#F7F7F7; --carbon:#EFEDE7; --carbon-2:#F5F3EE;
  --line:#C9C5BB; --line-strong:#8F8B81;
  --text:#141517; --text-2:#5A5B57; --text-3:#6E6F6A;
  --signal:#7A4E08; --signal-deep:#7A4E08; --signal-wash:rgba(122,78,8,.07);
  --signal-ink:#F7F7F7;
  /* --sage / --warmgray follow --slate / --stone, which tokens.css themes */
  --glass:rgba(247,247,247,.92);
}

/* a bone plate — the light sections, used deliberately, not everywhere */
.lt{
  --void:#F7F7F7; --carbon:#EFEDE7; --carbon-2:#F5F3EE;
  --line:#C9C5BB; --line-strong:#8F8B81;
  --text:#141517; --text-2:#5A5B57; --text-3:#6E6F6A;
  --signal:#7A4E08; --signal-deep:#7A4E08; --signal-wash:rgba(122,78,8,.07);
  --signal-ink:#F7F7F7;
  /* --verm / --slate / --stone are re-pointed to their light values by
     the matching .lt rule in assets/tokens.css */
  background:var(--void); color:var(--text);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
:focus-visible{outline:2px solid var(--verm);outline-offset:2px}
html{scroll-padding-top:96px;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
body{margin:0;background:var(--void);color:var(--text);font-family:var(--f-sans);
  font-size:var(--t-body);font-weight:var(--w-body);line-height:1.68;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
@media(max-width:700px){.wrap{padding:0 20px}body{font-size:1rem}}
a{color:var(--text);text-decoration-color:var(--text-3);text-underline-offset:3px}
a:hover{text-decoration-color:var(--verm)}
::selection{background:var(--verm-deep);color:var(--softw)}

/* mono label utility — the small voice of the whole system */
.sheet,.eyebrow,.striphint,.gradekey,.treecap,.chartnote,.timenote,.stacknote,
.stripcap,.stripnote,.mkey,.notecite,.revnote,footer{
  font-family:var(--f-mono);font-weight:var(--w-mono)}

/* ---------- masthead / site navigation ---------- */
.titleblock{border-bottom:1px solid var(--line);font-family:var(--f-mono);
  font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.titleblock .wrap{display:flex;flex-wrap:wrap;gap:8px 34px;padding:16px 32px}
.titleblock b{color:var(--text-2);font-weight:var(--w-mono-b)}
.titleblock a{text-decoration:none;color:var(--text-2)}
.titleblock a:hover{color:var(--verm)}
.sitehead{position:sticky;top:0;z-index:40;background:var(--glass);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.sitehead .wrap{align-items:center;gap:10px 28px}
/* The lockup itself is .lintel-lockup in assets/brand.css: live Geist text,
   mark second, inheriting currentColor — so no second file and no theme swap. */
.brand{display:flex;align-items:center;gap:10px;color:var(--text);
  font-weight:var(--w-mono-b);text-decoration:none;font-size:12px}
.brand:hover{color:var(--verm)}
/* The masthead is a .titleblock, whose mono-caps treatment is inherited by
   everything inside it. The wordmark is sentence case at full text strength,
   so it has to out-specify `.titleblock a` — brand.css's single-class rule
   cannot. Nothing else about the lockup is restated here. */
.titleblock a.lintel-lockup{text-transform:none;color:var(--text)}
.titleblock a.lintel-lockup:hover{color:var(--verm)}
/* theme toggle — mono instrument switch, icon names the theme it switches TO */
.themetoggle{color:var(--text-3);background:transparent;border:1px solid var(--line-strong);
  padding:5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.themetoggle:hover{color:var(--text);border-color:var(--text-2)}
.tt-icon{display:block;width:14px;height:14px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.themetoggle .tt-l{display:none}
:root[data-theme="light"] .themetoggle .tt-d{display:none}
:root[data-theme="light"] .themetoggle .tt-l{display:block}
.nav{display:flex;flex-wrap:wrap;gap:6px 22px;margin-left:auto}
.nav a{color:var(--text-3);text-decoration:none;letter-spacing:.15em;padding-bottom:2px}
.nav a:hover{color:var(--text)}
.nav a[aria-current="page"]{color:var(--text);border-bottom:2px solid var(--verm)}
@media(max-width:700px){.sitehead{position:static}
  .sitehead .wrap{padding:12px 20px;gap:8px 16px}.nav{margin-left:0;width:100%}}

/* ---------- hero ---------- */
/* The ground is the flow field: class bg-flow, from assets/brand.css.
   One token resolves both themes, so there is no second rule here. */
.hero{padding:var(--s9) 0 var(--s6);border-bottom:1px solid var(--line)}
h1.long{font-size:clamp(2.4rem,5.8vw,4.9rem);max-width:26ch}
.eyebrow{font-size:var(--t-label);letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-3);margin:0 0 var(--s6);font-weight:var(--w-mono-b)}
h1{font-family:var(--f-sans);font-weight:var(--w-display);
  font-size:var(--t-hero);line-height:.92;
  letter-spacing:-.04em;margin:0 0 var(--s6);text-transform:uppercase;max-width:14ch}
h1 .thin{font-weight:300;color:var(--text-2);display:block;letter-spacing:-.02em}
h1 .red{color:var(--verm);display:block}
/* The one thing a reader can do. An outside review found every link led to more
   reading and none led to caring — "a project with no list has no constituency
   when it needs one." It is a mailto rather than a capture form on purpose: the
   CSP forbids external requests (connect-src 'self', form-action 'none'), so a
   subscribe box would mean either breaking that rule or faking the button. And
   no date is attached, because the road deliberately schedules nothing that
   depends on a counterparty — promising a month here to sharpen the ask would
   contradict the page above it. */
.ask{margin:var(--s5) 0 0;padding-top:var(--s4);border-top:1px solid var(--line-strong);
  font-size:var(--t-small);line-height:1.65;max-width:70ch;color:var(--text-3)}
.ask b{color:var(--text);font-weight:var(--w-semi)}
.ask a{color:var(--text-2);border-bottom:1px solid var(--verm)}
.ask a:hover{color:var(--text)}

/* One named project, dated. An outside review observed that a document about
   housing contains no people, and prescribed an invented scene — one builder,
   one family, eighteen months. The prescription was refused and the diagnosis
   kept: this project's rule is that nothing enters without a register row, so
   the scene had to be a real building or nothing. It came out of the primary
   source consulted to fix an unrelated citation error (C-009), which is the
   argument for reading your own footnotes. */
.fcase{list-style:none;margin:var(--s6) 0 var(--s5);padding:0;
  border-top:1px solid var(--line-strong)}
.fcase li{display:grid;grid-template-columns:132px 1fr;gap:0 22px;padding:11px 0;
  border-bottom:1px solid var(--line);align-items:baseline}
@media(max-width:640px){.fcase li{grid-template-columns:1fr;gap:4px}}
.fcase .fd{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.06em;
  color:var(--text-3);white-space:nowrap}
.fcase .fe{font-size:.97rem;line-height:1.55;color:var(--text-2)}
.fcase .fe i{display:block;font-style:normal;font-family:var(--f-mono);
  font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--verm);margin-top:5px}
.fcase .fdone .fd,.fcase .fdone .fe{color:var(--text)}
.fsum{font-size:1.02rem;line-height:1.6;max-width:74ch;color:var(--text-2)}
.fsum b{color:var(--text);font-weight:var(--w-semi)}

/* Authorship. An outside review found no name, no email and no bio on any page,
   next to an exhaustive declaration of financial interest, and read the pair as
   evasive rather than modest — correctly. A project asking to be cited has to
   say who is asking. */
.byline{font-size:var(--t-small);line-height:1.65;max-width:62ch;margin:calc(var(--s7)*-1) 0 var(--s7);
  color:var(--text-3)}
.byline b{color:var(--text);font-weight:var(--w-semi)}
.byline a{color:var(--text-2);border-bottom:1px solid var(--line-strong)}
.byline a:hover{color:var(--text);border-bottom-color:var(--verm)}

/* The one sentence a reader can repeat to someone else. It sits between the
   headline and the strip because an outside review found the site explained
   its own vocabulary in an annex five sections down — if a plain-English annex
   is required, the building is not in plain English. Full text ink, not the
   muted standfirst grey: this is the argument, not an introduction to it.
   Deliberately asserts only the format of the rules and the fact of manual
   review. It says nothing about what share of those rules could be checked
   automatically — that is E-039, the register's most load-bearing Untested
   row, and stating it here as fact is exactly the move this site exists to
   not make. The second paragraph (.fixline) states the proposed transaction —
   check, sign, insure, accept — and carries its own disclaimer that no city
   accepts one and no insurer writes one, so the first screen cannot be read
   back as "software checks your plans", which is a different product other
   people already sell. */
.plainly{font-size:clamp(1.12rem,1.9vw,1.42rem);line-height:1.5;font-weight:480;
  max-width:50ch;margin:0 0 var(--s6);color:var(--text);letter-spacing:-.011em}
.plainly.fixline{font-size:clamp(1rem,1.5vw,1.2rem);max-width:58ch;color:var(--text-2);
  margin-top:calc(-1 * var(--s4))}
.plainly.fixline b{color:var(--text);font-weight:var(--w-semi)}
.standfirst{font-size:var(--t-lede);line-height:1.5;font-weight:420;
  max-width:56ch;margin:0 0 var(--s7);color:var(--text-2)}
.standfirst em,.standfirst b{color:var(--text);font-style:normal;font-weight:var(--w-semi)}
/* The story and the thesis are one argument in two registers and share a title.
   Each says which register it is at the top, and points at the other, so the
   choice is made before the reader has spent forty minutes finding out. */
.siblingnote{margin:0 0 var(--s7);font-family:var(--f-mono);font-size:var(--t-label);
  letter-spacing:.06em;line-height:1.8;color:var(--text-3);max-width:62ch}
/* it follows the standfirst, whose bottom margin would otherwise strand it */
.standfirst + .siblingnote{margin-top:calc(var(--s3) - var(--s7))}
.siblingnote b{color:var(--text-2);font-weight:var(--w-mono-b)}
.siblingnote a{color:var(--text);border-bottom:1px solid var(--line-strong)}
.siblingnote a:hover{color:var(--verm);border-color:var(--verm)}
.herolist{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.08em;
  line-height:2.1;color:var(--text-2);max-width:none;
  border-left:2px solid var(--verm);padding-left:var(--s4);margin:0 0 var(--s7)}
.standfirst + .herolist{margin-top:calc(var(--s5) - var(--s7))}
.herolist b{color:var(--verm);font-weight:var(--w-mono-b)}

/* Front matter. The class above was written for ONE sibling note — the story and
   the thesis pointing at each other. Three more arrived, each correctly, and the
   first screen of /story/ became six hundred words of mono caveat in a 62ch column
   with half the page empty beside it. The notes are not the defect; a hero being
   asked to carry them one under another is.
   So: they are grouped, labelled as front matter, and set in two columns below the
   contents plate. Multi-column rather than grid because the notes are wildly
   uneven in length — the objections note is four times the first — and multicol
   balances the columns where a two-track grid would leave a hole. break-inside is
   forbidden so no paragraph is ever split down the middle of a concession. */
.frontnotes{margin:0 0 var(--s7);padding-top:var(--s5);
  border-top:1px solid var(--line-strong)}
.fn-lab{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.2em;
  text-transform:uppercase;color:var(--verm);font-weight:var(--w-mono-b);
  margin:0 0 var(--s5);max-width:none}
/* One column keeps the 62ch measure the base class sets, because a mono note run
   the full width of a 1240px wrap is unreadable. Two columns drop it: the column
   is already narrower than the cap, and enforcing it there would rag the right
   edge of both columns instead of the one it was written to protect. */
.frontnotes .siblingnote{margin:0 0 var(--s5);line-height:1.7;break-inside:avoid}
.frontnotes .siblingnote:last-child{margin-bottom:0}
@media(min-width:900px){
  .frontnotes{column-count:2;column-gap:var(--s8)}
  .frontnotes .siblingnote{max-width:none}
  .fn-lab{column-span:all}
}

/* ---------- sections ---------- */
section{padding:var(--s9) 0;border-bottom:1px solid var(--line)}
@media(max-width:700px){section{padding:var(--s8) 0}.hero{padding:var(--s8) 0 var(--s5)}}
.sheet{font-size:var(--t-label);letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-3);display:flex;gap:16px;align-items:baseline;margin:0 0 var(--s3);
  max-width:none}
.sheet span{white-space:nowrap}
@media(max-width:700px){.sheet{flex-wrap:wrap;gap:4px 16px}.sheet span{white-space:normal}}
/* mono label paragraphs must never inherit the prose measure */
p.lab,.honesty .lab,.spec .lab,.falsify .lab,.plain .lab,.terms .lab{max-width:none}
.sheet span:first-child{color:var(--verm);font-weight:var(--w-mono-b)}
h2{font-family:var(--f-sans);font-weight:var(--w-display);text-transform:uppercase;
  font-size:var(--t-h2);line-height:1;letter-spacing:-.03em;margin:0 0 var(--s5);max-width:26ch}
.lede{font-size:var(--t-lede);line-height:1.55;color:var(--text-2);
  max-width:64ch;margin:0 0 var(--s7)}
.lede b{color:var(--text)}
p{max-width:70ch}
h3.sub{font-family:var(--f-sans);font-weight:var(--w-semi);font-size:var(--t-h3);
  letter-spacing:-.012em;margin:var(--s7) 0 var(--s3);text-transform:none}

/* ============================================================
   DIAGRAM PLATES — the site's photography.
   Diagrams sit on bone plates: crisp artifacts pinned to the dark
   field. This also keeps legacy SVGs (ink-on-light) legible.
   ============================================================ */
.tree,.chartbox,.timebox{
  --void:#F7F7F7; --carbon:#EFEDE7; --line:#C9C5BB; --line-strong:#8F8B81;
  --text:#141517; --text-2:#5A5B57; --text-3:#6E6F6A;
  --signal:#7A4E08;
  /* the plate is light in both themes, so it pins the light brand values */
  --verm:#A8321F; --verm-wash:rgba(168,50,31,.07);
  --slate:#4A5657; --stone:#6E675C;
  --ink:#141517; --graphite:#5A5B57; --rule:#C9C5BB;
  border:1px solid var(--line-strong);background:#F7F7F7;color:#141517;
  padding:var(--s5) var(--s5) var(--s4)}
.tree svg,.chartbox svg,.timebox svg{width:100%;height:auto;display:block}
.treecap,.chartnote,.timenote{font-size:var(--t-micro);color:#5A5B57;letter-spacing:.05em;
  line-height:1.8;margin:var(--s4) 0 0;max-width:none}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line-strong);background:var(--carbon)}
table{border-collapse:collapse;width:100%;min-width:660px;font-size:var(--t-small)}
th{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  text-align:left;padding:12px 16px;border-bottom:1px solid var(--line-strong);
  font-weight:var(--w-mono-b);vertical-align:bottom;color:var(--text-3)}
td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
tr:last-child td{border-bottom:none}
td.sw{font-family:var(--f-mono);font-size:var(--t-label);color:var(--sage);
  font-weight:var(--w-mono);line-height:1.55}
td.code{font-family:var(--f-mono);font-size:var(--t-label);font-weight:var(--w-mono-b);
  color:var(--text);white-space:nowrap}
td.k{font-family:var(--f-mono);font-size:var(--t-label);font-weight:var(--w-mono-b);
  color:var(--text);white-space:nowrap}
td.m{font-family:var(--f-mono);font-size:var(--t-label);color:var(--text-2);line-height:1.6}

/* ---------- pathologies ---------- */
.path{border-top:1px solid var(--line);padding:var(--s5) 0;display:grid;
  grid-template-columns:230px 1fr;gap:var(--s5)}
.path:first-of-type{border-top:1px solid var(--line-strong)}
@media(max-width:760px){.path{grid-template-columns:1fr;gap:8px}}
.path .pn{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.1em;
  text-transform:uppercase;color:var(--text);font-weight:var(--w-mono-b);line-height:1.6}
.path .pn span{display:block;color:var(--text-3);text-transform:none;letter-spacing:.04em;
  font-size:var(--t-micro);margin-top:5px;font-weight:var(--w-mono)}
.path p{margin:0 0 9px;font-size:var(--t-small);line-height:1.6;color:var(--text-2)}
.path p:last-child{margin-bottom:0}
.path .fix{font-family:var(--f-mono);font-size:var(--t-micro);color:var(--sage);
  letter-spacing:.03em;line-height:1.6}

/* ---------- prior art ---------- */
.pa{border-top:1px solid var(--line);padding:var(--s5) 0;display:grid;
  grid-template-columns:200px 1fr;gap:var(--s5)}
.pa:first-of-type{border-top:1px solid var(--line-strong)}
@media(max-width:760px){.pa{grid-template-columns:1fr;gap:8px}}
.pa .who{font-family:var(--f-sans);font-weight:var(--w-semi);font-size:1.05rem;
  letter-spacing:-.012em;line-height:1.2}
.pa .who span{display:block;font-family:var(--f-mono);font-size:var(--t-micro);
  font-weight:var(--w-mono);color:var(--text-3);letter-spacing:.09em;margin-top:5px}
.pa p{margin:0 0 8px;font-size:var(--t-small);line-height:1.6;color:var(--text-2)}
.pa p b{color:var(--text)}
.pa .diag{font-family:var(--f-mono);font-size:var(--t-micro);color:var(--sage);
  letter-spacing:.03em;line-height:1.65}

/* ---------- seven-layer stack ---------- */
.stackgrid{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--s6);align-items:start}
@media(max-width:900px){.stackgrid{grid-template-columns:1fr;gap:var(--s5)}}
.stack{display:flex;flex-direction:column-reverse;border:1px solid var(--line-strong)}
.layer{border-top:1px solid var(--line);padding:15px 18px;cursor:pointer;background:var(--carbon);
  display:flex;gap:14px;align-items:baseline;text-align:left;width:100%;
  font-family:inherit;color:inherit;border-left:3px solid transparent;
  transition:background .12s ease,border-color .12s ease}
.layer:first-child{border-top:none}
.layer:hover{background:var(--carbon-2)}
.layer[aria-pressed="true"]{background:var(--carbon-2);border-left-color:var(--verm)}
.layer[aria-pressed="true"] .lname{color:var(--text)}
.layer:focus-visible{outline:2px solid var(--verm);outline-offset:-2px}
.lid{font-family:var(--f-mono);font-size:var(--t-label);font-weight:var(--w-mono-b);
  color:var(--verm);letter-spacing:.08em;width:26px;flex-shrink:0}
.ltext{flex:1}
.lname{font-family:var(--f-sans);font-weight:var(--w-semi);font-size:1rem;
  letter-spacing:-.014em;display:block;line-height:1.2;color:var(--text-2)}
.layer[aria-pressed="true"] .lsub{color:var(--text-2)}
.lsub{font-family:var(--f-mono);font-size:var(--t-micro);color:var(--text-3);
  letter-spacing:.09em;text-transform:uppercase;margin-top:4px;display:block}
.stacknote{font-size:var(--t-micro);color:var(--text-3);letter-spacing:.05em;
  margin-top:14px;line-height:1.7}
.detail{border:1px solid var(--line-strong);background:var(--carbon);
  padding:var(--s5) var(--s5) var(--s6);position:sticky;top:88px}
@media(max-width:900px){.detail{position:static}}
.detail .dl{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.18em;
  text-transform:uppercase;color:var(--verm);font-weight:var(--w-mono-b);margin-bottom:10px}
.detail h4{font-family:var(--f-sans);font-weight:var(--w-display);font-size:1.4rem;
  letter-spacing:-.026em;margin:0 0 var(--s4);line-height:1.08;text-transform:uppercase}
.detail dt{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.17em;
  text-transform:uppercase;color:var(--text-3);font-weight:var(--w-mono-b);margin-top:18px}
.detail dt:first-of-type{margin-top:0}
.detail dd{margin:6px 0 0;font-size:var(--t-small);line-height:1.6;color:var(--text-2)}
.detail dd.fal{color:var(--verm)}
.detail dd.swap{font-family:var(--f-mono);font-size:var(--t-label);line-height:1.7;color:var(--sage)}

/* ---------- before / after loop ---------- */
.stage{border-top:1px solid var(--line);padding:var(--s5) 0}
.stage:first-of-type{border-top:1px solid var(--line-strong)}
.stage-head{display:flex;gap:16px;align-items:baseline;margin-bottom:18px;flex-wrap:wrap}
.stage-no{font-family:var(--f-mono);font-size:var(--t-label);font-weight:var(--w-mono-b);
  color:var(--text-3);letter-spacing:.1em}
.stage-name{font-family:var(--f-sans);font-weight:var(--w-display);font-size:1.28rem;
  letter-spacing:-.02em;text-transform:uppercase}
.stage-metric{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.06em;
  color:var(--sage);margin-left:auto;background:var(--sage-wash);padding:3px 10px;
  border:1px solid var(--line)}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
@media(max-width:760px){.ba{grid-template-columns:1fr;gap:14px}}
.ba>div{padding:17px 20px;background:var(--carbon);border-left:2px solid var(--line)}
.ba .before,.ba>div.before{border-left-color:var(--verm)}
.ba .after,.ba>div.after{border-left-color:var(--sage)}
.ba h4{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.19em;
  text-transform:uppercase;margin:0 0 10px;font-weight:var(--w-mono-b)}
.ba .before h4{color:var(--verm)}
.ba .after h4{color:var(--sage)}
.ba ul{margin:0;padding-left:17px}
.ba li{font-size:var(--t-small);line-height:1.55;margin-bottom:7px;color:var(--text-2)}
.ba li::marker{color:var(--text-3)}

/* ============================================================
   EVIDENCE GRADES — the honesty system.
   Untested is the most arresting state on the site; the accent
   belongs to it. Confirmed/Supported are muted. Contested is
   visibly unsettled without being alarming.
   ============================================================ */
.grade{display:inline-block;font-family:var(--f-mono);font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;
  font-weight:var(--w-mono-b);border:1px solid;white-space:nowrap;line-height:1.3}
.g-conf{color:var(--sage);background:transparent;border-color:var(--sage)}
.g-supp{color:var(--warmgray);background:transparent;border-color:var(--warmgray)}
.g-open{color:var(--signal-ink);background:var(--signal);border-color:var(--signal)}
.g-cont{color:var(--text);background:transparent;border-color:var(--text-2);border-style:dashed}
.gradekey{font-size:var(--t-micro);color:var(--text-2);line-height:2.4;margin:0 0 var(--s5);
  letter-spacing:.04em;max-width:none}
.gradekey .grade{margin-right:8px}
/* legend layout (evidence page) — a key, rendered as one */
div.gradekey{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));
  gap:10px 40px;line-height:1.6;border:1px solid var(--line);background:var(--carbon);
  padding:16px 20px}
@media(max-width:700px){div.gradekey{grid-template-columns:1fr}}
.gradekey .lg{display:flex;gap:12px;align-items:baseline}
.gradekey .lg .grade{flex-shrink:0;margin-right:0}

/* ---------- red team ---------- */
.rt{border-top:1px solid var(--line);padding:var(--s5) 0}
.rt:first-of-type{border-top:1px solid var(--line-strong)}
.rt .obj{display:flex;gap:12px;align-items:baseline;margin-bottom:12px}
.rt .tag{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.15em;
  text-transform:uppercase;background:var(--signal-deep);color:#FFF6E8;padding:2px 8px;
  font-weight:var(--w-mono-b);flex-shrink:0}
.rt h4{font-family:var(--f-sans);font-weight:var(--w-semi);font-size:1.1rem;margin:0;
  letter-spacing:-.015em;line-height:1.3}
.rt p{color:var(--text-2);font-size:var(--t-small);line-height:1.6}
.rt .response{border-left:2px solid var(--sage);padding-left:18px;margin-top:14px}
.rt .response .rl{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.17em;
  text-transform:uppercase;color:var(--sage);font-weight:var(--w-mono-b);margin-bottom:7px}
.rt .concede{margin-top:12px;padding:12px 16px;background:var(--signal-wash);
  border:1px solid rgba(245,165,36,.30);font-size:var(--t-small);line-height:1.55;color:var(--text-2)}
.rt .concede b{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.15em;
  text-transform:uppercase;color:var(--signal);display:block;margin-bottom:5px}

/* ---------- experiment spec / falsification ---------- */
.spec{border:1px solid var(--line-strong);background:var(--carbon);padding:var(--s6) var(--s5)}
.spec .lab{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.2em;
  text-transform:uppercase;color:var(--signal);font-weight:var(--w-mono-b);margin-bottom:16px}
.spec dt{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.17em;
  text-transform:uppercase;color:var(--text-3);font-weight:var(--w-mono-b);margin-top:20px}
.spec dt:first-of-type{margin-top:0}
.spec dd{margin:6px 0 0;font-size:var(--t-small);line-height:1.6;color:var(--text-2)}
.falsify{border:2px solid var(--signal);background:var(--signal-wash);
  padding:var(--s6) var(--s5);margin-top:var(--s5)}
/* the About page sets the statement as the largest object on the page */
.falsify.grand{padding:var(--s7) var(--s6)}
.falsify.grand p{font-size:clamp(1.15rem,2.1vw,1.55rem);line-height:1.5;max-width:56ch}
.falsify.grand p b{color:var(--signal)}
.falsify .lab{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.2em;
  text-transform:uppercase;color:var(--signal);font-weight:var(--w-mono-b);margin-bottom:14px}
.falsify p{font-size:1.04rem;margin:0 0 12px;line-height:1.62}
.falsify p:last-child{margin-bottom:0}

/* ---------- pull quote ---------- */
.pull{border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);
  padding:var(--s6) 0;margin:var(--s7) 0 0}
.pull p{font-family:var(--f-sans);font-weight:var(--w-display);
  font-size:clamp(1.3rem,3vw,2rem);line-height:1.14;
  letter-spacing:-.028em;margin:0;max-width:28ch;text-transform:uppercase}
.pull p em{font-style:normal;color:var(--verm)}

/* ---------- citations ---------- */
ol.cite{font-size:var(--t-small);line-height:1.65;padding-left:26px;max-width:88ch}
ol.cite li{margin-bottom:13px;color:var(--text-2)}
ol.cite b{color:var(--text);font-weight:var(--w-semi)}
ol.cite li::marker{font-family:var(--f-mono);color:var(--text-3)}
.notecite{font-size:var(--t-label);color:var(--text-3);line-height:1.7;
  border-left:2px solid var(--line-strong);padding-left:16px;margin-bottom:var(--s6);max-width:70ch}

/* ---------- footer ---------- */
footer{padding:var(--s8) 0 var(--s9);font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);line-height:2.2}
footer a{color:var(--text-3)}
footer a:hover{color:var(--verm)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ---------- abstract (five sentences) ---------- */
.abstract{border:1px solid var(--line-strong);background:var(--carbon);
  padding:var(--s6) var(--s5);margin-bottom:var(--s6)}
.abstract ol{margin:0;padding-left:24px}
.abstract li{font-size:1.03rem;line-height:1.6;margin-bottom:14px;max-width:66ch;color:var(--text-2)}
.abstract li:last-child{margin-bottom:0}
.abstract li b{font-weight:var(--w-semi);color:var(--text)}
.abstract li::marker{font-family:var(--f-mono);font-size:.8rem;color:var(--verm);
  font-weight:var(--w-mono-b)}
.ordnote{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.04em;line-height:1.9;
  color:var(--sage);border-left:2px solid var(--sage);background:var(--sage-wash);
  padding:12px 16px;margin:0 0 var(--s6);max-width:72ch}
.ordnote b{color:var(--sage)}
.ordnote a{color:var(--sage)}

/* ---------- number strip ---------- */
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-bottom:var(--s6)}
@media(max-width:820px){.nums{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.nums{grid-template-columns:1fr}}
.num{padding:22px 20px;background:var(--carbon)}
.num .n{font-family:var(--f-sans);font-weight:var(--w-display);font-size:2.2rem;
  letter-spacing:-.045em;line-height:1;color:var(--text);margin-bottom:10px;
  font-variant-numeric:tabular-nums}
.num.g .n{color:var(--sage)}
.num .l{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3);font-weight:var(--w-mono);line-height:1.7}

/* ---------- reading paths + contents (thesis sheet 00) ---------- */
.twocol{display:grid;grid-template-columns:1fr 1.25fr;gap:var(--s6);align-items:start}
@media(max-width:860px){.twocol{grid-template-columns:1fr;gap:var(--s5)}}
.paths .p{border-left:2px solid var(--sage);padding:14px 18px;margin-bottom:14px;
  background:var(--carbon)}
.paths .p b{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--sage);display:block;margin-bottom:6px;
  font-weight:var(--w-mono-b)}
.paths .p span{font-size:var(--t-small);line-height:1.55;color:var(--text-2)}
.toc{border-top:1px solid var(--line-strong)}
.toc div{border-bottom:1px solid var(--line);padding:9px 0;display:grid;
  grid-template-columns:34px 1fr;gap:12px;align-items:baseline}
.toc .s{font-family:var(--f-mono);font-size:var(--t-micro);font-weight:var(--w-mono-b);
  color:var(--verm);letter-spacing:.06em}
.toc .t{font-size:var(--t-small);line-height:1.5;color:var(--text-2)}
.toc .t b{font-weight:var(--w-semi);color:var(--text)}
.toc .t em{font-style:normal;color:var(--text-3);font-size:.86rem}
.toc a{color:inherit;text-decoration:none}
.toc a:hover b{color:var(--verm)}

/* ---------- per-sheet takeaway ---------- */
.takeaway{border-top:1px solid var(--line-strong);margin-top:var(--s7);padding-top:var(--s4);
  display:grid;grid-template-columns:88px 1fr;gap:16px;align-items:baseline;max-width:none}
@media(max-width:600px){.takeaway{grid-template-columns:1fr;gap:6px}}
.takeaway .k{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.17em;
  text-transform:uppercase;color:var(--verm);font-weight:var(--w-mono-b)}
.takeaway .v{font-family:var(--f-sans);font-weight:var(--w-semi);font-size:1.08rem;
  letter-spacing:-.015em;line-height:1.4;max-width:60ch}

/* ---------- city matrix ---------- */
.matrix td.mk{text-align:center;font-family:var(--f-mono);font-size:15px;font-weight:var(--w-mono-b)}
.matrix td.yes{color:var(--sage)}
.matrix td.no{color:var(--text-3)}
.matrix td.part{color:var(--warmgray)}
.matrix th.rot{font-size:var(--t-micro);letter-spacing:.1em;text-align:center;vertical-align:bottom}
.matrix td.city,.matrix th.city{font-family:var(--f-sans);font-weight:var(--w-semi);
  font-size:.98rem;letter-spacing:-.01em;text-align:left}
.matrix td.city span{display:block;font-family:var(--f-mono);font-size:var(--t-micro);
  font-weight:var(--w-mono);color:var(--text-3);letter-spacing:.08em;margin-top:3px}
.mkey{font-size:var(--t-micro);color:var(--text-3);line-height:2;margin:14px 0 0;letter-spacing:.06em}

/* ---------- cycle-time / IRR ---------- */
.irr{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:var(--s5)}
@media(max-width:820px){.irr{grid-template-columns:1fr}}
.irrcard{background:var(--carbon);padding:22px 20px;border:none}
.irrcard .k{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.17em;
  text-transform:uppercase;color:var(--text-3);font-weight:var(--w-mono-b);margin-bottom:12px}
.irrcard .v{font-family:var(--f-sans);font-weight:var(--w-display);font-size:2.5rem;
  letter-spacing:-.04em;line-height:1;margin-bottom:10px;font-variant-numeric:tabular-nums}
.irrcard.a .v{color:var(--warmgray)}
.irrcard.b .v,.irrcard.c .v{color:var(--sage)}
.irrcard p{margin:0;font-size:var(--t-small);line-height:1.55;color:var(--text-2)}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-top:var(--s6)}
@media(max-width:760px){.split2{grid-template-columns:1fr}}
.split2>div{border-left:2px solid var(--line);padding:16px 20px;background:var(--carbon)}
.split2 .sw,.split2>div.sw{border-left-color:var(--sage)}
.split2 .hs,.split2>div.hs{border-left-color:var(--verm)}
.split2 h4{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.19em;
  text-transform:uppercase;margin:0 0 10px;font-weight:var(--w-mono-b)}
.split2 .sw h4{color:var(--sage)}
.split2 .hs h4{color:var(--verm)}
.split2 ul{margin:0;padding-left:17px}
.split2 li{font-size:var(--t-small);line-height:1.55;margin-bottom:7px;color:var(--text-2)}

/* ============================================================
   SITE-SPECIFIC COMPONENTS
   ============================================================ */

/* ---------- the 32-month instrument (landing hero) ----------
   The month squares carry the argument, so the color logic is the
   argument: waiting months are hollow voids, the build is solid bone
   (the part we keep), site work is muted fill. The signal color is
   NOT spent here — it is reserved for what is unproven.            */
.instrument{border:1px solid var(--line-strong);background:var(--carbon);
  padding:var(--s5) var(--s5) var(--s4);margin:var(--s6) 0 0}
.instrument .striphint{display:none;font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);margin:0 0 10px}
.stripscroll{overflow-x:auto}
.stripinner{min-width:680px}
.striptitle{font-family:var(--f-mono);font-size:var(--t-label);font-weight:var(--w-mono-b);
  letter-spacing:.22em;text-transform:uppercase;margin:0 0 12px;color:var(--text-2)}
.striptitle.today .n,.striptitle.compiled .n{color:var(--text);font-variant-numeric:tabular-nums}
.striptitle.compiled{color:var(--sage);margin-top:var(--s6)}
.brk{display:grid;grid-template-columns:repeat(32,1fr);gap:4px;margin-bottom:6px}
.brk>div{position:relative;height:26px}
.brk>div::after{content:'';position:absolute;left:1px;right:1px;bottom:0;height:7px;
  border:1px solid var(--text-3);border-bottom:none}
.brk span{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.09em;
  color:var(--text-2);white-space:nowrap}
.sqrow{display:grid;grid-template-columns:repeat(32,1fr);gap:4px}
.sqrow i{height:52px;display:block;position:relative}
@media(max-width:900px){.sqrow i{height:42px}}
.sqrow .info{border:1px solid var(--line-strong);background:transparent}
.sqrow .site{border:1px solid transparent;background:#4A4A44}
.sqrow .build{border:1px solid transparent;background:var(--text)}
.sqrow .cert{border:1px solid var(--sage);background:var(--sage-wash)}
.sqrow .ghost{grid-column:span 25;border:1px dashed var(--line-strong);background:none;
  display:flex;align-items:center;justify-content:center}
.sqrow .ghost span{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.14em;
  color:var(--text-3);text-align:center;padding:0 8px}
.stripcap{display:flex;justify-content:space-between;gap:14px;font-size:var(--t-micro);
  letter-spacing:.08em;color:var(--text-3);margin-top:10px;text-transform:uppercase}
.stripcap b{font-weight:var(--w-mono-b)}
.stripcap .r b{color:var(--text-2)}
.stripcap .i b{color:var(--text)}
.stripnote{font-size:var(--t-micro);color:var(--text-3);letter-spacing:.04em;
  line-height:1.9;margin:var(--s4) 0 0;max-width:none;padding-bottom:var(--s5)}
.stripnote b{color:var(--text-2)}

/* sequential fill — the site's one memorable moment. Each square is
   revealed once, in month order, then the instrument is still. */
@media (prefers-reduced-motion:no-preference){
  .instrument.arm .sqrow.animate i{opacity:0;transform:scale(.6);
    animation:sq-in .3s cubic-bezier(.2,.7,.3,1) forwards;
    animation-delay:calc(var(--i,0)*36ms)}
  @keyframes sq-in{to{opacity:1;transform:none}}
}
/* hover / keyboard month readout */
.sqrow.animate i:hover,.sqrow.animate i.hot{outline:2px solid var(--text);outline-offset:1px;z-index:2}
.monthread{display:block;min-height:2em;margin:var(--s3) 0 0;max-width:none;
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.06em;color:var(--text-2)}
.monthread span{margin-right:12px}
.monthread .mn{color:var(--text);font-weight:var(--w-mono-b);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.monthread .mp{text-transform:uppercase;letter-spacing:.14em;color:var(--text-3);white-space:nowrap}
@media(max-width:700px){
  .instrument{padding:20px 14px 16px}
  .instrument .striphint{display:block}
  .brk,.sqrow{gap:3px}
  .sqrow i{height:38px}
  .brk span{font-size:.55rem;letter-spacing:.01em}
  .brk>div[style*="span 2"] span{display:none}
  .stripcap{gap:10px;font-size:.58rem}
}

/* ---------- untested chip (hero, pre-scroll honesty) ---------- */
/* The same disclosure that used to sit at word 69 of the landing, moved to word
   ~470 and rewritten. At the top it was a flinch — "read what is unproven
   first", before the reader had asked a question. After the hook, the sentence
   and the scale, the identical facts read as a claim: a count, a named subset,
   and what settles it. Position and posture had to change together; moving it
   alone would only have produced an apology further down the page. */
.stated{font-size:var(--t-lede);line-height:1.55;max-width:62ch;margin:0;
  color:var(--text-2)}
.stated b{color:var(--text);font-weight:var(--w-semi)}
.stated .grade{margin-right:10px;vertical-align:2px}
.unproven{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:0 0 var(--s6)}
.unproven a{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.06em;
  color:var(--text-2);text-decoration:none;border-bottom:1px solid var(--line-strong);
  padding-bottom:2px}
.unproven a:hover{color:var(--text);border-bottom-color:var(--signal)}

/* ---------- honesty panel ---------- */
.honesty{border:2px solid var(--signal);background:
  linear-gradient(var(--signal-wash),var(--signal-wash)) var(--void);
  padding:var(--s6) var(--s5)}
.honesty .lab{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.2em;
  text-transform:uppercase;color:var(--signal);font-weight:var(--w-mono-b);
  margin-bottom:var(--s4)}
.honesty .item{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:baseline;
  padding:14px 0;border-top:1px solid rgba(245,165,36,.28)}
.honesty .item:first-of-type{border-top:none;padding-top:0}
@media(max-width:600px){.honesty .item{grid-template-columns:1fr;gap:6px}}
.honesty .item p{margin:0;font-size:var(--t-small);line-height:1.6;max-width:none;color:var(--text-2)}
.honesty .item p b{font-weight:var(--w-semi);color:var(--text)}
.honesty .close{margin:var(--s4) 0 0;font-family:var(--f-mono);font-size:var(--t-label);
  letter-spacing:.06em;color:var(--text);font-weight:var(--w-mono);line-height:1.9;max-width:none}
.honesty .close a{color:var(--text)}

/* ---------- role cards (/collaborate/) ----------
   The honesty panel, broken into three. Each ask is a separate commitment from
   a different person, so each carries its own frame rather than sharing one.
   The left column names the role instead of repeating the grade: three items
   titled UNTESTED read as three unmeasured claims, which is exactly what this
   component means on / and /solution/, so on a page asking for people it was
   arguing with the h1. The grade moves down beside the ask, where it qualifies
   the row instead of titling it.
   Border is 1px, not the panel's 2px — repeated three times the heavier rule
   stops reading as emphasis and starts reading as noise. */
.roles{display:grid;gap:var(--s5)}
.rcard{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:start;
  border:1px solid var(--signal);padding:var(--s5);
  background:linear-gradient(var(--signal-wash),var(--signal-wash)) var(--void)}
@media(max-width:600px){.rcard{grid-template-columns:1fr;gap:10px;padding:var(--s4)}}
.rcard .role{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.18em;
  text-transform:uppercase;color:var(--signal);font-weight:var(--w-mono-b);
  margin:0;line-height:1.5}
.rcard p{margin:0;font-size:var(--t-small);line-height:1.6;max-width:none;color:var(--text-2)}
.rcard p b{font-weight:var(--w-semi);color:var(--text)}
.rcard .rtitle{font-family:var(--f-sans);font-size:1.05rem;font-weight:var(--w-semi);
  color:var(--text);letter-spacing:-.015em;line-height:1.35;margin:0 0 10px;
  display:flex;gap:20px;align-items:baseline;justify-content:space-between}
.rcard .rcount{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.14em;
  color:var(--text-3);font-weight:var(--w-mono);flex-shrink:0}
.rcard .rdeliv{margin:14px 0 0;padding-left:14px;border-left:2px solid var(--signal)}
.rcard .rdeliv b{display:block;font-family:var(--f-mono);font-size:var(--t-micro);
  letter-spacing:.17em;text-transform:uppercase;color:var(--signal);
  font-weight:var(--w-mono-b);margin-bottom:5px}
.rcard .ract{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:16px 0 0}
.rcard .ract a{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.04em;
  color:var(--text);text-decoration:none;border-bottom:1px solid var(--line-strong);
  padding-bottom:2px}
.rcard .ract a:hover{border-bottom-color:var(--signal)}

/* ============================================================
   RIBBON FIELDS — the site's only decoration.

   The geometry is emitted by tools/ribbon.py and never varies. Everything that
   differs between one field and the next lives here: which palette token it
   paints, how tall the band is, and whether it lights its ground or stains it.

   The blend mode is what makes one asset survive four grounds. `screen` over a
   dark ground reads as a lit form; `multiply` over a bone ground reads as a
   stain in the same colour, at the same angle, from the same light. So the
   field follows the theme toggle, and it also inverts on the act plates, which
   are bone in the dark theme and near-black in the light one — inverted against
   the page, and therefore inverted here too. (Those rules live in build_story.py
   beside the rest of the act-plate CSS.)

   Each field paints its own ground and isolates, rather than blending against
   whatever is behind it. Without that, `screen` inside a transparent box has
   nothing to lighten and silently renders as flat colour.

   No new colour enters the palette here. A tonal variant selects an existing
   token — nothing in ribbon.py knows a hex value.
   ============================================================ */
.ribband{position:relative;overflow:hidden}
.rib{--rib:var(--verm);--rib-ground:var(--void);--rib-o:1;
  position:absolute;inset:0;overflow:hidden;isolation:isolate;pointer-events:none;
  background:var(--rib-ground)}
/* signal is the hot accent; sage is what the site already spends on evidence and
   grades; warmgray is the neutral. Three tones, and they mean what they mean
   everywhere else on the site. */
.rib-sage{--rib:var(--sage)}
.rib-warm{--rib:var(--warmgray)}
.rib-f{position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:var(--rib-o);mix-blend-mode:screen}
:root[data-theme="light"] .rib-f{mix-blend-mode:multiply}
/* the falloff — without it a band ends on a straight cut, which reads as a
   cropped image rather than as a form that continues past the edge */
.rib-v{position:absolute;inset:0;display:block;background:radial-gradient(145% 115% at 30% 26%,
  transparent 12%,
  color-mix(in srgb,var(--rib-ground) 42%,transparent) 58%,
  color-mix(in srgb,var(--rib-ground) 88%,transparent) 100%)}

/* Surfaces. Only the height changes, and each band bleeds to the edges of
   whatever it sits in — a decoration inset by its host's padding reads as a
   picture in a frame, which is the opposite of the intent. */
.rib-hero{height:clamp(132px,19vh,208px);margin-bottom:calc(-1 * var(--s6));
  border-top:1px solid var(--line)}
/* Heights have a floor, and it is not an aesthetic one. The field is cropped to
   cover, so a short band shows a thinner horizontal slice of the same drawing —
   and below roughly 70px the slice no longer contains enough of the bend to
   read as a curve. It reads as a gradient smear instead, which is the one thing
   that would make these look like four unrelated treatments. 44px was tried
   here and was exactly that. */
.door .ribband{height:76px;margin:calc(-1 * var(--s5)) calc(-1 * var(--s5)) var(--s4)}
.door .rib{--rib-ground:var(--carbon)}
.door:hover .rib{--rib-ground:var(--carbon-2)}
.docentry .ribband{grid-column:1/-1;height:72px;margin:calc(-1 * var(--s6)) 0 var(--s3)}
@media(max-width:700px){.rib-hero{height:104px}
  .door .ribband{height:70px}.docentry .ribband{height:70px}}
/* Decoration is not worth a toner budget, and a blurred field prints as a grey
   smear on most office hardware. */
@media print{.ribband{display:none}}

/* ---------- the doors ---------- */
/* The secondary routes under the doors — the deck, the corrections log and the
   document list. Reachable, but not a fifth thing to choose between. */
.alsoline{margin:var(--s4) 0 0;font-family:var(--f-mono);font-size:var(--t-label);
  letter-spacing:.06em;color:var(--text-3);font-weight:var(--w-mono);line-height:1.9;max-width:none}
.alsoline a{color:var(--text)}
.alsoline a:hover{color:var(--verm)}
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
/* Four doors in a three-column grid strand two empty cells beside the last one.
   Two-up is even, and gives the longer door copy the width it wants. */
@media(min-width:1041px){.doors.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1040px){.doors{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.doors{grid-template-columns:1fr}}
.door{background:var(--carbon);padding:var(--s5) var(--s5) var(--s4);
  display:flex;flex-direction:column;text-decoration:none;color:var(--text);
  transition:background .12s ease}
.door:hover{background:var(--carbon-2)}
.door .dn{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-3);font-weight:var(--w-mono-b);margin-bottom:12px}
.door h3{font-family:var(--f-sans);font-weight:var(--w-display);font-size:1.4rem;
  letter-spacing:-.025em;margin:0 0 10px;line-height:1.05;text-transform:uppercase}
.door p{margin:0 0 16px;font-size:var(--t-small);line-height:1.55;color:var(--text-2)}
.door .go{margin-top:auto;padding-top:14px;font-family:var(--f-mono);font-size:var(--t-micro);
  letter-spacing:.12em;color:var(--text-3);font-weight:var(--w-mono-b)}
.door:hover .go{color:var(--verm)}
.door:hover h3{color:var(--text)}

/* ---------- thesis page: sticky TOC rail ---------- */
.pagegrid{display:grid;grid-template-columns:216px 1fr;gap:0;align-items:start}
.stoc{position:sticky;top:0;max-height:100vh;overflow-y:auto;padding:26px 18px 26px 32px;
  border-right:1px solid var(--line);font-family:var(--f-mono)}
.stoc .th{font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-3);font-weight:var(--w-mono-b);margin:0 0 12px}
.stoc a{display:grid;grid-template-columns:26px 1fr;gap:8px;padding:5px 0;color:var(--text-3);
  text-decoration:none;font-size:var(--t-micro);letter-spacing:.05em;line-height:1.5;
  border-left:2px solid transparent;padding-left:8px;margin-left:-10px}
.stoc a .n{color:var(--text-2);font-weight:var(--w-mono-b)}
.stoc a:hover{color:var(--text)}
.stoc a.cur{color:var(--text);font-weight:var(--w-mono-b);border-left-color:var(--verm)}
.stoc a.cur .n{color:var(--verm)}
.sheets{min-width:0}
.sheets section .wrap{padding-left:40px}
@media(max-width:1099px){
  .pagegrid{display:block}
  .stoc{position:sticky;top:0;z-index:30;max-height:none;overflow-x:auto;overflow-y:hidden;
    display:flex;gap:4px;padding:10px 20px;background:var(--glass);
    backdrop-filter:blur(8px);border-right:none;border-bottom:1px solid var(--line);
    white-space:nowrap}
  .stoc .th{display:none}
  .stoc a{display:inline-block;padding:3px 8px;margin-left:0;border-left:none;
    border:1px solid transparent}
  .stoc a .n{margin-right:6px}
  .stoc a .tt{display:none}
  .stoc a.cur{border:1px solid var(--verm);color:var(--text)}
  .sheets section .wrap{padding-left:20px}
}
@media(min-width:1100px) and (max-width:1420px){.sheets .wrap{padding-right:28px}}

/* ---------- evidence register table ---------- */
.ftools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 var(--s4);
  position:sticky;top:52px;z-index:20;background:var(--glass);
  backdrop-filter:blur(8px);padding:12px 0;border-bottom:1px solid var(--line)}
@media(max-width:700px){.ftools{position:static;padding:0;border-bottom:none;background:none}}
.fbtn{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;font-weight:var(--w-mono-b);border:1px solid var(--line-strong);
  background:transparent;color:var(--text-2);padding:7px 12px;cursor:pointer}
.fbtn:hover{border-color:var(--text-2);color:var(--text)}
.fbtn[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--void)}
.fbtn.u[aria-pressed="true"]{background:var(--signal);border-color:var(--signal);color:#0C0D0E}
.fsearch{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.04em;
  border:1px solid var(--line-strong);background:var(--carbon);color:var(--text);
  padding:8px 12px;min-width:230px;flex:1;max-width:380px}
.fsearch::placeholder{color:var(--text-3)}
.fsearch:focus{outline:2px solid var(--verm);outline-offset:-1px}
.fcount{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.1em;
  color:var(--text-2);margin-left:auto;font-variant-numeric:tabular-nums}
.regtable{min-width:1120px;font-size:.84rem}
.regtable th{white-space:nowrap}
.regtable th.sortable{cursor:pointer;user-select:none}
.regtable th.sortable:hover{color:var(--text)}
.regtable th .dir{color:var(--verm)}
.regtable .sortbtn{font:inherit;color:inherit;background:none;border:none;padding:0;
  cursor:pointer;text-transform:inherit;letter-spacing:inherit}
.regtable td{color:var(--text-2)}
.regtable td.id{font-family:var(--f-mono);font-size:var(--t-label);font-weight:var(--w-mono-b);
  color:var(--text);white-space:nowrap}
.regtable td.val{font-family:var(--f-mono);font-size:var(--t-label);line-height:1.6}
.regtable td.src{font-size:.82rem}
.regtable td.meta{font-family:var(--f-mono);font-size:var(--t-micro);color:var(--text-3);
  white-space:nowrap}
.regtable td.use{font-family:var(--f-mono);font-size:var(--t-micro);color:var(--sage)}
.regtable td.note{font-size:.8rem;color:var(--text-3)}
.regtable tr.untested{background:var(--signal-wash);box-shadow:inset 3px 0 0 var(--signal)}
.regtable tr.untested td.id{color:var(--signal)}
.regtable tr.untested td.val{color:var(--signal);font-weight:var(--w-mono-b)}
.gapflag{display:inline-block;font-family:var(--f-mono);font-size:.55rem;letter-spacing:.14em;
  color:#0C0D0E;background:var(--signal);padding:1px 6px;font-weight:var(--w-mono-b);
  margin-left:8px;vertical-align:middle}

/* ---------- ordering page: locks + rail ---------- */
.locks{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin:var(--s5) 0 0}
@media(max-width:860px){.locks{grid-template-columns:1fr}}
.lock{background:var(--carbon);padding:20px 20px;border:none}
.lock .ln{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.18em;
  text-transform:uppercase;color:var(--verm);font-weight:var(--w-mono-b);margin-bottom:8px}
.lock h4{font-family:var(--f-sans);font-weight:var(--w-display);font-size:1.15rem;
  letter-spacing:-.02em;margin:0 0 10px;line-height:1.1;text-transform:uppercase}
.lock p{font-size:var(--t-small);line-height:1.55;margin:0 0 8px;color:var(--text-2)}
.lock .doc{font-family:var(--f-mono);font-size:var(--t-micro);color:var(--text-3);
  letter-spacing:.06em;border-top:1px solid var(--line);padding-top:10px;margin-top:10px;
  line-height:1.7}
.rail{border:1px solid var(--line-strong);background:var(--carbon);
  padding:var(--s5) var(--s5);margin-top:var(--s5);overflow-x:auto}
.rail .row{display:grid;grid-template-columns:130px 1fr 1fr 1fr;gap:0;
  border-top:1px solid var(--line);min-width:540px}
.rail .row:first-child{border-top:none;font-family:var(--f-mono);font-size:var(--t-micro);
  letter-spacing:.15em;text-transform:uppercase;color:var(--text-3);font-weight:var(--w-mono-b)}
.rail .row>div{padding:10px 12px;border-right:1px solid var(--line);font-size:.87rem;
  line-height:1.45;color:var(--text-2)}
.rail .row>div:last-child{border-right:none}
.rail .row .h{font-family:var(--f-mono);font-size:var(--t-micro);font-weight:var(--w-mono-b);
  color:var(--verm);letter-spacing:.07em}
.rail .bind{background:var(--verm-wash);font-weight:var(--w-semi);color:var(--text)}
@media(max-width:760px){.rail .row{grid-template-columns:90px 1fr 1fr 1fr}
  .rail .row>div{padding:8px 8px;font-size:.78rem}}
.revnote{font-size:var(--t-micro);letter-spacing:.05em;line-height:1.9;color:var(--text-3);
  border-left:2px solid var(--line-strong);padding-left:14px;margin:16px 0 0;max-width:76ch}
.revnote b{color:var(--text-2);font-weight:var(--w-mono-b)}
.warn{border-left:2px solid var(--signal);background:var(--signal-wash);
  padding:16px 20px;margin:22px 0;max-width:76ch}
.warn b{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.15em;
  text-transform:uppercase;color:var(--signal);display:block;margin-bottom:6px}
.warn p{margin:0 0 8px;font-size:var(--t-small);line-height:1.55;color:var(--text-2)}
.warn p:last-child{margin-bottom:0}
.note{border-left:2px solid var(--sage);background:var(--sage-wash);
  padding:16px 20px;margin:22px 0;max-width:76ch}
.note b{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.15em;
  text-transform:uppercase;color:var(--sage);display:block;margin-bottom:6px}
.note p{margin:0 0 8px;font-size:var(--t-small);line-height:1.55;color:var(--text-2)}
.note p:last-child{margin-bottom:0}

/* ---------- documents page ---------- */
.docentry{border-top:1px solid var(--line);padding:var(--s6) 0;display:grid;
  grid-template-columns:200px 1fr;gap:var(--s5)}
.docentry:first-of-type{border-top:1px solid var(--line-strong)}
@media(max-width:760px){.docentry{grid-template-columns:1fr;gap:10px}}
.docentry .dm{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.09em;
  color:var(--text-3);line-height:2;text-transform:uppercase}
.docentry .dm b{color:var(--text);font-weight:var(--w-mono-b);display:block}
.docentry h3{font-family:var(--f-sans);font-weight:var(--w-display);font-size:1.35rem;
  letter-spacing:-.022em;margin:0 0 10px;line-height:1.1;text-transform:uppercase}
.docentry p{margin:0 0 14px;font-size:var(--t-small);line-height:1.6;color:var(--text-2)}
.dl-links{display:flex;flex-wrap:wrap;gap:12px}
.dl-links a{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;font-weight:var(--w-mono-b);color:var(--text);text-decoration:none;
  border:1px solid var(--line-strong);padding:9px 14px;
  transition:border-color .12s ease,color .12s ease}
.dl-links a:hover{border-color:var(--verm);color:var(--verm)}
.dl-links a span{color:var(--text-3);font-weight:var(--w-mono);letter-spacing:.06em}
.pdfline{margin:18px 0 0}
/* Pins for #beat-nn URLs minted before beats were named. An empty inline target
   lands the reader at the top of the beat that number used to mean. */
.anchor{display:block;height:0;overflow:hidden}
.pdfnote{display:block;margin-top:8px;font-size:.86rem;color:var(--text-3)}
.pdfbtn{display:inline-block;font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;font-weight:var(--w-mono-b);color:var(--text);text-decoration:none;
  border:1px solid var(--line-strong);padding:9px 14px;
  transition:border-color .12s ease,color .12s ease}
.pdfbtn:hover{border-color:var(--verm);color:var(--verm)}
.pdfbtn span{color:var(--text-3);font-weight:var(--w-mono);letter-spacing:.06em}

/* ---------- about page ---------- */
blockquote.fullquote{margin:0;padding:0}

/* ---------- plain-English gloss ---------- */
.plain{border-left:2px solid var(--sage);background:var(--sage-wash);
  padding:18px 22px;margin:0 0 var(--s7);max-width:64ch}
.plain .lab{font-family:var(--f-mono);font-size:var(--t-micro);font-weight:var(--w-mono-b);
  letter-spacing:.2em;text-transform:uppercase;color:var(--sage);margin:0 0 8px}
.plain p{margin:0;font-size:1.02rem;line-height:1.62;color:var(--text-2)}
.plain p b{color:var(--text)}
.plain p+p{margin-top:10px}

/* ---------- print: the dark system prints as its plate palette ---------- */
@media print{
  :root{
    --void:#ffffff; --carbon:#F5F3EE; --carbon-2:#EFEDE7;
    --line:#C9C5BB; --line-strong:#8F8B81;
    --text:#141517; --text-2:#5A5B57; --text-3:#6E6F6A;
    --signal:#7A4E08; --signal-deep:#7A4E08; --signal-wash:rgba(122,78,8,.07);
    --signal-ink:#F7F7F7;
    --verm:#A8321F; --verm-wash:rgba(168,50,31,.07); --verm-ink:#F7F7F7;
    --slate:#4A5657; --stone:#6E675C;
  }
  body{background:#fff}
  .hero{background-image:none}
  .bg-flow,.bg-flow-wide{background-image:none}
  .sitehead{position:static;background:#fff}
  .g-open,.gapflag{print-color-adjust:exact;-webkit-print-color-adjust:exact}
}

.terms{border:1px solid var(--line);background:var(--carbon);
  padding:var(--s5) var(--s5) var(--s4);margin:var(--s6) 0 0}
.terms .lab{font-family:var(--f-mono);font-size:var(--t-micro);font-weight:var(--w-mono-b);
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);margin:0 0 16px}
.terms dl{display:grid;grid-template-columns:auto 1fr;gap:11px 20px;margin:0;align-items:baseline}
.terms dt{font-family:var(--f-sans);font-weight:var(--w-semi);font-size:.95rem;
  letter-spacing:-.01em;white-space:nowrap;color:var(--text)}
.terms dd{margin:0;font-size:.97rem;line-height:1.6;color:var(--text-2)}
@media(max-width:640px){
  .terms dl{grid-template-columns:1fr;gap:3px}
  .terms dt{margin-top:10px}
  .terms dt:first-child{margin-top:0}
}