/* =============================================================================
   BINARY GLYPH — THE SITE SHEET (2026-09-26)
   Written from the business card: ink on paper, paper on ink, one voltage, the
   three voices and the instrument voice, one drawn stroke pair. Replaces the
   5,077-line binary-glyph-style.css in full. Every value on the site is named
   in §01 once; components use the names; responsive and print sit last.
   Method: IBM Carbon's type model (one scale, an expressive set for the
   editorial page, a productive set for the instruments), Bringhurst's measure.
   Contrast: every text/ground pair here passes WCAG AA; the meta inks pass AAA.
   No !important anywhere. No third paper except ash, the footer's back cover.
   Order: 00 fonts · 01 tokens · 02 base · 03 layout · 04 chrome · 05 components
   · 06 home · 07 Technical + Creative and In Practice · 08 the duality
   · 09 instruments · 10 focus and motion · 11 responsive · 12 print.
   ============================================================================= */

/* ---- 00 FONTS — self-hosted, woff2, swap. Only the weights the sheet uses. ---- */
@font-face { font-family: 'Tomorrow'; font-weight: 700; font-style: normal; font-display: swap; src: url('/assets/fonts/tomorrow/tomorrow-700.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-weight: 200 900; font-style: normal; font-display: swap; src: url('/assets/fonts/source-serif-4/source-serif-4-roman.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-weight: 200 900; font-style: italic; font-display: swap; src: url('/assets/fonts/source-serif-4/source-serif-4-italic.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('/assets/fonts/jetbrains-mono/jetbrains-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('/assets/fonts/jetbrains-mono/jetbrains-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('/assets/fonts/inter/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('/assets/fonts/inter/inter-500.woff2') format('woff2'); }

/* ---- 01 TOKENS ---- */
:root {
  /* the two grounds */
  --paper: #FAFAF7;
  --ink:   #0A0A0A;
  --ash:   #DCDBD5;   /* the back cover only (the footer). The one third paper, with one job. */

  /* inks on paper (ratio on paper): text never below ink-3 */
  --ink-1: #0A0A0A;   /* 18.9 */
  --ink-2: #2A2A28;   /* 13.8 */
  --ink-3: #56554F;   /*  7.2 meta, AAA */
  --ink-4: #767570;   /*  4.4 placeholders and disabled only */
  --rule:        #D4D2CC;
  --rule-strong: #9A9993;

  /* papers on ink (ratio on ink) */
  --paper-1: #FAFAF7;   /* 18.9 */
  --paper-2: #D9D9D4;   /* 14.0 */
  --paper-3: #A9A8A2;   /*  8.3 meta, AAA */
  --paper-4: #8C8B85;   /*  5.8 */
  --rule-on-ink:        #3A3834;
  --rule-on-ink-strong: #5A5852;

  /* the voltage, a pair for the two grounds; a text step for each */
  --volt:             #C7431C;   /* 4.7 on paper: button ground, numerals, the eyebrow */
  --volt-text:        #A83512;   /* 6.3 on paper: a voltage word in reading */
  --volt-on-ink:      #DC4A1F;   /* 4.8 on ink */
  --volt-on-ink-text: #E8602F;   /* 5.8 on ink */
  --on-volt:          #FAFAF7;

  /* the voices */
  --voice-assert: 'Tomorrow', system-ui, sans-serif;
  --voice-read:   'Source Serif 4', Georgia, serif;
  --voice-meta:   'JetBrains Mono', ui-monospace, monospace;
  --voice-tool:   'Inter', system-ui, sans-serif;

  /* the scale (meta fixed; the rest fluid 390 → 1280) */
  --t-meta:     11px;
  --t-label:    13px;
  --t-small:    clamp(13px, 0.30vw + 0.73rem, 14px);
  --t-body:     clamp(16px, 0.55vw + 0.85rem, 18px);
  --t-essay:    clamp(18px, 0.31vw + 1.05rem, 20px);
  --t-lede:     clamp(18px, 1.05vw + 0.86rem, 22px);
  --t-sub:      clamp(22px, 1.6vw + 1rem, 28px);
  --t-head:     clamp(28px, 2.4vw + 1.1rem, 40px);
  --t-title:    clamp(40px, 3.6vw + 1rem, 64px);
  --t-assert:   clamp(44px, 6vw, 78px);
  --t-assert-2: clamp(38px, 5.4vw, 70px);
  --lh-tight: 0.98; --lh-head: 1.1; --lh-sub: 1.3; --lh-read: 1.6; --lh-meta: 1.6;
  --track-meta: 0.14em; --track-assert: -0.02em; --track-head: -0.015em;
  --w-assert: 700; --w-read: 400; --w-strong: 600; --w-meta: 500; --w-meta-quiet: 400;
  /* the aside register (serif italic): weight 300 only at sub scale and above; at body and below it is 400, never lighter (Steve, 2026-09-26) */

  /* the measures */
  --m-read: 720px; --m-wide: 880px; --m-page: 1280px; --m-meta: 200px; --m-lede: 40ch;
  --rail: var(--m-meta); --rail-gap: var(--s-6);   /* the marginalia column and its gap: ONE value for every section, every width */

  /* the spaces: 4px base, eight steps; tight inside a unit, open between */
  --s-1: 4px; --s-2: 8px; --s-3: 14px; --s-4: 24px; --s-5: 40px; --s-6: 64px; --s-7: 104px; --s-8: 168px;
  --gutter: clamp(16px, 4vw, 68px);

  /* the figure: the card's cross */
  --stroke-rail: 3px; --stroke-cross: 1px;

  /* motion */
  --motion: 180ms; --ease: cubic-bezier(0.2, 0, 0, 1);

  /* the side a section is on; the ink side below re-points every one of these */
  --ground: var(--paper);
  --fg-1: var(--ink-1); --fg-2: var(--ink-2); --fg-3: var(--ink-3); --fg-4: var(--ink-4);
  --line: var(--rule); --line-strong: var(--rule-strong);
  --accent: var(--volt); --accent-text: var(--volt-text);
}
/* the ink side: any section marked data-side="ink", and the components that always sit on it
   (the principal's callouts, the Draper line, the instruments, the Binary half of the duality) */
[data-side="ink"], .principal-callout, .principal-callout-abbreviated, .draper-block, .instrument, .h-cap__head > div:nth-child(2), .h-cap__b, .cap__half--b {
  --ground: var(--ink);
  --fg-1: var(--paper-1); --fg-2: var(--paper-2); --fg-3: var(--paper-3); --fg-4: var(--paper-4);
  --line: var(--rule-on-ink); --line-strong: var(--rule-on-ink-strong);
  --accent: var(--volt-on-ink); --accent-text: var(--volt-on-ink-text);
  background: var(--ground); color: var(--fg-1);
}

/* ---- 02 BASE ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { background: var(--ground); color: var(--fg-1); font: var(--w-read) var(--t-body)/var(--lh-read) var(--voice-read); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, h4 { font-family: var(--voice-read); font-weight: var(--w-read); color: var(--fg-1); text-wrap: balance; }
h1 { font-size: var(--t-title); line-height: var(--lh-head); letter-spacing: var(--track-head); margin-bottom: var(--s-4); }
h2 { font-size: var(--t-head); line-height: var(--lh-head); letter-spacing: var(--track-head); margin-bottom: var(--s-4); }
h3 { font-size: var(--t-sub); line-height: var(--lh-sub); margin-bottom: var(--s-3); }
h4 { font-size: var(--t-lede); line-height: var(--lh-sub); font-weight: var(--w-meta); margin-bottom: var(--s-3); }
p, li, dd, figcaption, blockquote { text-wrap: pretty; }
p { max-width: var(--m-read); margin-bottom: var(--s-4); }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: var(--w-strong); color: var(--fg-1); }
dfn { font-style: italic; font-weight: var(--w-meta); }
a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-color: var(--line-strong); transition: color var(--motion) var(--ease); }
a:hover { color: var(--accent-text); text-decoration-color: currentColor; }
ul, ol { margin-bottom: var(--s-4); padding-left: var(--s-4); max-width: var(--m-read); }
li { margin-bottom: var(--s-2); }
dl { margin-bottom: var(--s-4); }
dt { font: var(--w-meta) var(--t-meta)/var(--lh-meta) var(--voice-meta); text-transform: uppercase; letter-spacing: var(--track-meta); color: var(--fg-3); margin-bottom: var(--s-1); }
dd { margin-bottom: var(--s-4); }
blockquote { font-style: italic; font-weight: 300; font-size: var(--t-sub); line-height: var(--lh-sub); margin: var(--s-6) 0; padding-left: var(--s-4); border-left: var(--stroke-rail) solid var(--fg-1); max-width: var(--m-read); }
blockquote p { font: inherit; }
blockquote cite { display: block; font: var(--w-meta) var(--t-meta)/var(--lh-meta) var(--voice-meta); text-transform: uppercase; letter-spacing: var(--track-meta); color: var(--fg-3); font-style: normal; margin-top: var(--s-3); }
code, kbd, samp, pre { font-family: var(--voice-meta); font-size: 0.9em; }
pre { padding: var(--s-3); border: var(--stroke-cross) solid var(--line); overflow-x: auto; margin-bottom: var(--s-4); }
hr { border: 0; border-top: var(--stroke-cross) solid var(--line); margin: var(--s-6) 0; }
address { font-style: normal; }
img, picture, svg { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; }

/* the meta voice, one rule used everywhere a label is */
.marginalia-meta, .marginalia-bar, .page-tagline, .identity-line, .essay-meta, .essay-byline, .article-byline, .essay-movement-meta, .section-label, .block-label, .detail-label, .sig-label, .epigraph-label, .draper-label, .diagnostic-label, .lexicon-label, .journal-meta, .legal-meta, .legal-contact, .back-link, .footnotes > h2, .footer-group-label, .arc-label, .arc-months span, .arc-ends dt, .check-group-heading, .form-field label, .tool-ref, .inset-label, .menu .num, .menu .t, .h-note, .h-identity, .glyph-leaf__from, .vis-half-sub, .vis-half-count, .vis-legend, .aic-verdict-score, .aic-verdict-host, .aic-section-score, .aic-check-label, .aic-check-pts, .aic-botclass-name, .aic-bot, .readback-source, .readback-row dt, .rv-draft-label, .subscribe-label, .send-intake-note, .plate-label, .databar-l, .legal-content h2, .data-table caption, .data-table thead th { font-family: var(--voice-meta); font-size: var(--t-meta); font-weight: var(--w-meta); line-height: var(--lh-meta); text-transform: uppercase; letter-spacing: var(--track-meta); color: var(--fg-3); }
.num, .marginalia-meta .num, .marginalia-bar .num, .essay-movement-meta .num, .essay-meta .label, .page-tagline, .identity-line, .h-identity { color: var(--accent); }

/* ---- 03 LAYOUT ---- */
.container-page { max-width: var(--m-page); margin: 0 auto; padding: var(--s-4) var(--gutter) 0; }
.container-reading, .movement-body, .essay-movement-body, .legal-content, .journal-content { max-width: var(--m-read); }
.movement-block { display: grid; grid-template-columns: var(--rail) 1fr; gap: var(--s-6) var(--rail-gap); padding: var(--s-6) 0; border-top: var(--stroke-cross) solid var(--line); align-items: baseline; }
.movement-block--cont { border-top: 0; padding-top: 0; }
/* the band: part of a page turned to the ink side, edge to edge; the movement blocks inside carry the spacing,
   and the ground change is the division (no rule on the first block) */
.band { margin: 0 calc(50% - 50vw); padding: 0 var(--gutter); }
.band > .band-in { max-width: calc(var(--m-page) - 2 * var(--gutter)); margin: 0 auto; }
.band .movement-block:first-child { border-top: 0; }
.marginalia-meta .name, .marginalia-meta .num { display: block; }
.marginalia-bar { display: flex; gap: var(--s-4); align-items: baseline; padding: var(--s-4) 0 var(--s-3); border-top: var(--stroke-cross) solid var(--line); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.movement-body .cta-row, .essay-close .cta-row { margin-top: var(--s-4); }

/* ---- 04 CHROME ---- */
.skip-link { position: absolute; top: 0; left: 0; z-index: 100; background: var(--ink); color: var(--paper-1); padding: var(--s-3) var(--s-4); font: var(--w-meta) var(--t-label)/1 var(--voice-meta); text-transform: uppercase; letter-spacing: var(--track-meta); transform: translateY(-100%); transition: transform var(--motion) var(--ease); }
.skip-link:focus { transform: none; }
.site-header { display: flex; justify-content: space-between; align-items: center; padding: var(--s-3) 0 var(--s-4); border-bottom: var(--stroke-cross) solid var(--line); margin-bottom: var(--s-6); position: relative; }
.wordmark { font: var(--w-assert) var(--t-lede)/0.92 var(--voice-assert); text-transform: uppercase; letter-spacing: -0.005em; color: var(--fg-1); text-decoration: none; display: inline-block; }
.wordmark:hover { color: var(--fg-1); }
.wordmark span { display: block; }
.site-nav ul { display: flex; align-items: center; gap: var(--s-5); list-style: none; margin: 0; padding: 0; max-width: none; }
.site-nav li { margin: 0; }
.site-nav a { font: var(--w-meta-quiet) var(--t-meta)/1 var(--voice-meta); text-transform: uppercase; letter-spacing: var(--track-meta); color: var(--fg-3); text-decoration: none; padding: 15px 7px; margin: -15px -7px; }
.site-nav a:hover, .site-nav a[aria-current="page"], .site-nav a.current { color: var(--fg-1); }
.site-nav a.cta { color: var(--fg-1); font-weight: var(--w-meta); }
.site-nav a.cta:hover { color: var(--accent-text); }
.nav-cluster { display: none; }
/* the back cover: ash, the site's record, beneath every page */
.site-footer--sitemap { margin: var(--s-7) calc(50% - 50vw) 0; padding: var(--s-5) 0 var(--s-4); background: var(--ash); color: var(--ink-3); font: var(--w-meta-quiet) var(--t-meta)/1.8 var(--voice-meta); text-transform: uppercase; letter-spacing: var(--track-meta); }
main:has(> .band:last-child) + .site-footer--sitemap { margin-top: 0; }
.footer-in { max-width: var(--m-page); margin: 0 auto; padding: 0 var(--gutter); }
.footer-main { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--s-4); padding-bottom: var(--s-4); border-bottom: var(--stroke-cross) solid var(--ink-1); }
.footer-right { text-align: right; }
.footer-mark, .footer-sig { display: block; font: var(--w-assert) var(--t-small)/1.3 var(--voice-assert); color: var(--ink-1); letter-spacing: 0.02em; margin-bottom: var(--s-1); }
.site-footer--sitemap a { color: var(--ink-2); text-decoration: none; }
.site-footer--sitemap a:hover { color: var(--accent-text); }
.footer-map { display: grid; }
.footer-group { display: grid; grid-template-columns: var(--rail) 1fr; column-gap: var(--rail-gap); align-items: baseline; padding: var(--s-3) 0; border-bottom: var(--stroke-cross) solid var(--rule); }
.footer-group-label { color: var(--ink-1); }
.footer-links { list-style: none; margin: 0; padding: 0; max-width: none; display: flex; flex-wrap: wrap; row-gap: 2px; }
.footer-links li { margin: 0; }
.footer-links li:not(:last-child)::after { content: "\00B7"; color: var(--ink-3); padding: 0 var(--s-2); }
.footer-links a, .footer-legal a { padding: 13px 4px; margin: -13px -4px; white-space: nowrap; }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.footer-legal .sep { color: var(--ink-3); }
.nowrap { white-space: nowrap; }

/* ---- 05 COMPONENTS ---- */
/* the page opening */
.page-title-block { padding: var(--s-6) 0 var(--s-6); max-width: var(--m-wide); }
.page-tagline { margin-bottom: var(--s-4); }
.page-title-block h1 { margin-bottom: var(--s-4); }
.lede { font-style: italic; font-weight: 300; font-size: var(--t-lede); line-height: 1.5; color: var(--fg-2); max-width: var(--m-read); margin-bottom: var(--s-4); }
.article-byline, .essay-byline { display: flex; gap: var(--s-4); flex-wrap: wrap; padding-bottom: var(--s-4); border-bottom: var(--stroke-cross) solid var(--line); margin-bottom: var(--s-5); }
.article-byline .author, .essay-byline .author, .essay-meta .highlight { color: var(--fg-1); }
/* the essay */
.essay-meta { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4); }
.essay-title { font-size: clamp(40px, 4.6vw + 1rem, 80px); line-height: var(--lh-tight); letter-spacing: -0.025em; margin-bottom: var(--s-5); max-width: var(--m-wide); }
.essay-page { max-width: var(--m-wide); padding-top: var(--s-6); }
.essay-movement { margin-bottom: var(--s-7); }
.essay-movement-meta { display: flex; gap: var(--s-4); align-items: baseline; margin-bottom: var(--s-3); }
.essay-movement-meta .name { color: var(--fg-2); }
.essay-movement-body p { font-size: var(--t-essay); color: var(--fg-2); }
.essay-movement-body p strong { color: var(--fg-1); }
.essay-close { margin-top: var(--s-6); padding-top: var(--s-6); border-top: var(--stroke-cross) solid var(--line); }
.essay-close > .context-link:first-child, .editorial-section-list + .context-link { margin-top: 0; padding-top: 0; border-top: 0; }
.editorial-section-list + .context-link { margin-top: var(--s-4); }
.subscribe-wrap { margin: var(--s-6) 0; }
.epigraph { padding: var(--s-5) 0 var(--s-6); margin-bottom: var(--s-6); border-bottom: var(--stroke-cross) solid var(--line); }
.epigraph-label { margin-bottom: var(--s-4); }
.epigraph p { font-style: italic; font-weight: 300; font-size: clamp(22px, 3vw + 0.5rem, 36px); line-height: 1.25; max-width: var(--m-wide); }
/* the lifted line: inside an essay only, drawn with the rail */
.pull-quote { margin: var(--s-6) 0 var(--s-6) calc(-1 * var(--s-4) - var(--stroke-rail)); padding: var(--s-2) 0 var(--s-2) var(--s-4); border-left: var(--stroke-rail) solid var(--fg-1); }
.pull-quote-text, .pull-quote p { font-style: italic; font-weight: 300; font-size: var(--t-sub); line-height: var(--lh-sub); max-width: var(--m-wide); }
.pull-quote strong { font-weight: var(--w-read); font-style: normal; }
/* the principal, on the ink side (§01): full bleed with the copy on the page's content column; inside a
   reading column it bleeds no wider than the page's side margin (720-980px overflowed, found 2026-09-26) */
.principal-callout { display: grid; grid-template-columns: var(--rail) 1fr; column-gap: var(--rail-gap); align-items: baseline; padding: var(--s-6) 0 var(--s-6) calc(50vw - 50%); margin: var(--s-6) calc(50% - 50vw); }
.principal-callout > * { grid-column: 2; margin-left: 0; margin-right: var(--gutter); }
.principal-callout .sig-label { grid-column: 1; grid-row: 1; margin-left: 0; margin-bottom: var(--s-4); color: var(--accent); }   /* the label on the rail, beside the heading (the old margin pushed it into the heading, 2026-09-26) */
.essay-page .principal-callout, .container-reading .principal-callout, .field-note .principal-callout { display: block; margin: var(--s-6) calc(-1 * min(var(--s-5), var(--gutter))); padding: var(--s-5); }
.essay-page .principal-callout > *, .container-reading .principal-callout > *, .field-note .principal-callout > * { margin-right: 0; }
.principal-callout-abbreviated { padding: var(--s-5); margin: var(--s-5) calc(-1 * min(var(--s-5), var(--gutter))); }   /* the ink bleeds, never wider than the page's side margin (720-1000px it ran 9px off both edges, found 2026-09-26) */
.principal-callout h3 { color: var(--fg-1); margin-bottom: var(--s-3); }
.principal-callout p, .principal-callout-abbreviated p { color: var(--fg-1); font-style: italic; }
.callout-head { font-size: var(--t-sub); line-height: var(--lh-sub); color: var(--fg-1); margin-bottom: var(--s-3); font-style: normal; }
.principal-callout .signature, .callout-attribution { margin-top: var(--s-4); padding-top: var(--s-3); border-top: var(--stroke-cross) solid var(--line); font: var(--w-meta) var(--t-label)/1.4 var(--voice-meta); font-style: normal; text-transform: uppercase; letter-spacing: var(--track-meta); color: var(--fg-1); }
.principal-voice p { color: var(--fg-1); }   /* the plain assertion that introduces the principal: roman */
/* the letter: the principal's own voice, so italic (style guide §03: italic means a voice standing apart), marked by the
   card's 3px rail as every quoted voice is; set at the essay size in full ink so italic holds over five paragraphs.
   The copy stays on the content line; the rail sits one indent left of it. */
.letter { margin: var(--s-4) 0 0 calc(-1 * var(--s-4) - var(--stroke-rail)); padding-left: var(--s-4); border-left: var(--stroke-rail) solid var(--fg-1); }
.letter p:not(.principal-sig) { font-style: italic; font-weight: var(--w-read); font-size: var(--t-essay); line-height: 1.65; color: var(--fg-1); max-width: 62ch; }
.letter .principal-sig { max-width: 62ch; }
.principal-sig { margin-top: var(--s-4); padding-top: var(--s-4); border-top: var(--stroke-cross) solid var(--line); font: var(--w-meta) var(--t-label)/1.4 var(--voice-meta); font-style: normal; text-transform: uppercase; letter-spacing: var(--track-meta); color: var(--fg-3); }
/* the plate: a photograph full width, edge to edge, at a held ratio, under an ink tint, carrying its caption
   label alone (Steve, 2026-09-26). Used where the photograph is the thing the page is about (/toledo/ the
   bridge, /about/ the desk). Never a mood band. */
.plate { position: relative; margin: var(--s-7) calc(50% - 50vw) 0; height: clamp(380px, 42vw, 600px); overflow: clip; background: var(--ink); }
.plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--plate-focus, center); border: 0; }
.plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 10, 10, 0.86) 0%, rgba(10, 10, 10, 0.55) 40%, rgba(10, 10, 10, 0.18) 100%); }
.plate figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; margin: 0 auto; max-width: var(--m-page); padding: 0 var(--gutter) var(--s-6); color: var(--paper-1); box-sizing: border-box; }
.plate figcaption .plate-label { display: block; color: var(--volt-on-ink); margin-bottom: var(--s-3); }
.plate--toledo { --plate-focus: center 60%; }
.plate--about { --plate-focus: center 40%; }
.plate + .principal-callout { margin-top: var(--s-6); }
/* the essay furniture */
.draper-block { margin: var(--s-6) 0; padding: var(--s-7) var(--s-6); }
.draper-label { color: var(--accent); margin-bottom: var(--s-5); }
.draper-text { font: var(--w-assert) clamp(32px, 5vw + 0.5rem, 64px)/1 var(--voice-assert); text-transform: uppercase; letter-spacing: var(--track-assert); margin-bottom: var(--s-4); }
.draper-text span { display: block; }
.draper-attribution { color: var(--fg-3); }
.diagnostic-block { margin: var(--s-6) 0; padding: var(--s-6) 0; border-top: var(--stroke-cross) solid var(--line); border-bottom: var(--stroke-cross) solid var(--line); text-align: center; }
.diagnostic-label { margin-bottom: var(--s-4); }
.diagnostic-question { font-style: italic; font-weight: 300; font-size: clamp(26px, 4vw + 0.5rem, 44px); line-height: 1.15; max-width: var(--m-read); margin: 0 auto; }
.diagnostic-question span, .spike-text span { display: block; }
.spike-block { margin: var(--s-6) 0; padding: var(--s-7) 0; border-top: var(--stroke-rail) solid var(--fg-1); border-bottom: var(--stroke-cross) solid var(--line); text-align: center; }
.spike-text { font-style: italic; font-size: clamp(28px, 4.2vw + 0.5rem, 56px); line-height: 1.15; max-width: var(--m-wide); margin: 0 auto; }
.spike-text .spike-cmd { font: var(--w-assert) clamp(26px, 3.4vw + 0.4rem, 50px)/1 var(--voice-assert); font-style: normal; text-transform: uppercase; letter-spacing: var(--track-assert); margin-bottom: var(--s-3); }   /* the close in the brand's two voices: the command in the machine's voice, the turn in the reader's (Steve's two-voice statement, as on the home fold) */
.spike-text .spike-turn { font-weight: 300; color: var(--fg-2); }
/* a sheet lying on the page: hairline box, no offset (the set-apart, the contract, the lexicon) */
.set-apart, .contract-sheet, .lexicon--fold, .matrix-scroll--sheet, .field-note-answer, .subscribe-block { border: var(--stroke-cross) solid var(--line-strong); background: var(--ground); }
.set-apart { padding: var(--s-5) var(--s-4); margin: var(--s-5) 0 var(--s-5) calc(-1 * var(--s-4) - var(--stroke-cross)); }
.set-apart .block-label { margin-bottom: var(--s-3); }
.set-apart h3 { margin-bottom: var(--s-3); }
.contract { position: relative; }
.movement-body .contract { margin: var(--s-5) 0 var(--s-6); max-width: var(--m-wide); }
.movement-body:has(.contract), .movement-body:has(.matrix-scroll), .movement-body:has(.cap__halves) { max-width: none; min-width: 0; }
.contract-sheet { padding: var(--s-5); margin-left: calc(-1 * var(--s-5) - var(--stroke-cross)); }   /* the sheet's copy on the content line; the sheet's edge one indent left of it */
.contract-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); border-bottom: var(--stroke-cross) solid var(--fg-1); padding-bottom: var(--s-2); margin-bottom: var(--s-3); }
.contract-title { font-variant-caps: small-caps; font-weight: var(--w-meta); letter-spacing: 0.08em; }
.contract-clauses { list-style: none; margin: 0; padding: 0; counter-reset: clause; max-width: none; }
.contract-clauses li { counter-increment: clause; position: relative; color: var(--fg-2); padding: var(--s-2) 0 var(--s-2) 2.6em; border-bottom: var(--stroke-cross) solid var(--line); margin: 0; }
.contract-clauses li::before { content: counter(clause) "."; position: absolute; left: 0; top: calc(var(--s-2) + 0.45em); font: var(--w-meta) var(--t-meta)/1 var(--voice-meta); color: var(--fg-3); }
.clause-t { font-weight: var(--w-meta); color: var(--fg-1); }
/* detail rows, labeled lists, tables, faq, notes */
.detail-list { margin: var(--s-4) 0 var(--s-3); border-top: var(--stroke-cross) solid var(--line); }
.movement-body > .detail-list:first-child { margin-top: 0; border-top: 0; }
.detail-list:last-child .detail-row:last-child { border-bottom: 0; }
.detail-list + .context-link, .detail-list + p.italic-close { border-top: 0; padding-top: 0; margin-top: var(--s-3); }
.detail-row { display: grid; grid-template-columns: var(--rail) 1fr; gap: var(--s-4) var(--rail-gap); padding: var(--s-4) 0; border-bottom: var(--stroke-cross) solid var(--line); align-items: baseline; }
.detail-value { font-size: var(--t-lede); line-height: 1.4; margin-bottom: var(--s-2); }
dd.detail-value { margin: 0; }
.detail-note { font-size: var(--t-body); font-style: italic; font-weight: var(--w-read); color: var(--fg-2); }   /* a note that carries terms reads at body weight; only the italic marks it as the aside */
.detail-body { color: var(--fg-2); }
.labeled-list { margin: var(--s-6) 0; }
.labeled-list dt { font: var(--w-meta) var(--t-body)/var(--lh-read) var(--voice-read); text-transform: none; letter-spacing: 0; color: var(--fg-1); margin: 0; }
.labeled-list dt:not(:first-child) { margin-top: var(--s-4); }
.labeled-list dd { color: var(--fg-2); margin: var(--s-1) 0 0; }
.labeled-list dd p + p { margin-top: var(--s-3); }
.data-table { width: 100%; margin: var(--s-6) 0; }
.data-table caption { text-align: left; caption-side: top; padding-bottom: var(--s-3); margin-bottom: var(--s-2); border-bottom: var(--stroke-cross) solid var(--line); }
.caption-hidden, .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.data-table thead th { text-align: left; vertical-align: bottom; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: var(--stroke-cross) solid var(--line-strong); }
.data-table tbody th[scope="row"] { text-align: left; vertical-align: top; font-size: var(--t-small); font-weight: var(--w-meta); color: var(--fg-1); padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: var(--stroke-cross) solid var(--line); white-space: nowrap; }
.data-table td { vertical-align: top; font-size: var(--t-small); line-height: 1.5; color: var(--fg-2); padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: var(--stroke-cross) solid var(--line); }
.data-table th:last-child, .data-table td:last-child { padding-right: 0; }
.data-table--notes tbody th[scope="row"] { white-space: normal; }   /* row labels that carry a sentence wrap */
.data-table--notes td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.faq-block { max-width: var(--m-read); margin: var(--s-6) 0; padding-top: var(--s-4); border-top: var(--stroke-cross) solid var(--line); }
.faq-block > h2 { margin-bottom: var(--s-5); }
.faq-pair { margin-bottom: var(--s-5); }
.faq-pair:last-child { margin-bottom: 0; }
.footnote-ref { font-family: var(--voice-meta); font-size: var(--t-meta); line-height: 0; vertical-align: super; }
.footnote-ref a { color: var(--accent-text); text-decoration: none; font-weight: var(--w-meta); padding: 0 1px; position: relative; }
.footnotes { max-width: var(--m-read); margin: var(--s-6) 0; padding-top: var(--s-4); border-top: var(--stroke-cross) solid var(--line); }
.footnotes > h2 { margin-bottom: var(--s-3); }
.footnotes-list { font-size: var(--t-small); line-height: 1.55; color: var(--fg-3); padding-left: var(--s-4); }
.footnotes-list li { margin-bottom: var(--s-3); }
.footnotes-list li:target { color: var(--fg-1); }
.footnote-backref { margin-left: 0.4em; color: var(--fg-3); text-decoration: none; position: relative; }
/* the data figure (process pages, 2026-09-26): a process page's one figure, a real number, crunched, drawn as a
   typographic bar chart. The bar is the card's stroke (3px on a 1px track); the numeral is the figure's named part
   (Tomorrow, tabular). The rows the page argues are set in ink; the rest recede to meta ink. Source in the mono,
   beneath, never a vendor. */
.stat-fig { margin: var(--s-6) 0; max-width: var(--m-read); }
.stat-fig__label, .stat-fig__source { font-family: var(--voice-meta); font-size: var(--t-meta); font-weight: var(--w-meta); line-height: var(--lh-meta); text-transform: uppercase; letter-spacing: var(--track-meta); color: var(--fg-3); max-width: none; }
.stat-fig__label { padding-bottom: var(--s-2); border-bottom: var(--stroke-cross) solid var(--fg-1); margin-bottom: var(--s-4); }
.stat-fig__rows { list-style: none; margin: 0; padding: 0; display: grid; row-gap: var(--s-4); }
.stat-fig__row { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: var(--s-4); margin: 0; color: var(--fg-3); }
.stat-fig__what { font-size: var(--t-body); line-height: 1.35; padding-bottom: 6px; }
.stat-fig__n { font: var(--w-assert) var(--t-head)/1 var(--voice-assert); font-variant-numeric: tabular-nums; letter-spacing: var(--track-head); padding-bottom: var(--s-1); }
.stat-fig__bar { grid-column: 1 / -1; height: var(--stroke-rail); background: linear-gradient(to right, currentColor calc(var(--v) * 1%), var(--line) 0) bottom / 100% var(--stroke-cross) no-repeat, linear-gradient(to right, currentColor calc(var(--v) * 1%), transparent 0); }
.stat-fig__row--key { color: var(--fg-1); }
.stat-fig__source { margin-top: var(--s-4); text-transform: none; letter-spacing: 0.02em; }
/* the indexes: entry cards */
.editorial-section { padding-top: var(--s-5); margin-bottom: var(--s-7); border-top: var(--stroke-rail) solid var(--fg-1); }
.editorial-section .marginalia-bar { border-top: 0; padding-top: 0; }
.editorial-section-list { list-style: none; padding: 0; margin: 0; max-width: none; }
.editorial-section-list li { margin: 0; }
.entry-card { display: block; text-decoration: none; padding: var(--s-5) 0; border-bottom: var(--stroke-cross) solid var(--line); color: inherit; }
.entry-card:has(> .journal-meta) { display: grid; grid-template-columns: var(--rail) 1fr; gap: var(--s-5) var(--rail-gap); align-items: baseline; }
.journal-meta .label, .journal-meta .date { display: block; }
.journal-title, .field-note-card-question { font-size: var(--t-sub); line-height: var(--lh-sub); color: var(--fg-1); margin-bottom: var(--s-2); transition: color var(--motion) var(--ease); }
.journal-description, .field-note-card-preview { font-style: italic; font-weight: var(--w-read); line-height: 1.5; color: var(--fg-3); }
.entry-card:hover .journal-title, .entry-card:hover .field-note-card-question { color: var(--accent-text); }
.back-link { margin-top: var(--s-6); padding-top: var(--s-4); border-top: var(--stroke-cross) solid var(--line); }
.back-link a { color: var(--fg-2); text-decoration: none; font-weight: var(--w-meta); }
.back-link a:hover { color: var(--accent-text); }
.context-link, p.italic-close { font-style: italic; font-weight: var(--w-read); color: var(--fg-3); max-width: var(--m-read); }
.context-link { margin-top: var(--s-5); padding-top: var(--s-5); border-top: var(--stroke-cross) solid var(--line); }
p.italic-close { margin-top: var(--s-4); }
.context-link a { color: var(--fg-2); }
/* field notes */
.field-note-answer { font-size: var(--t-lede); line-height: 1.5; color: var(--fg-1); padding: var(--s-4); margin: var(--s-5) 0 var(--s-5) calc(-1 * var(--s-4) - var(--stroke-cross)); }
.field-note-reasoning { margin-bottom: var(--s-4); }
.field-note-qualifications { border-top: var(--stroke-cross) solid var(--line); padding-top: var(--s-4); margin: var(--s-4) 0; }
.section-label { margin-bottom: var(--s-3); }
/* the identity line and the fold (introduction and offer pages) */
.identity-line { line-height: 1.6; margin-bottom: var(--s-4); }
.fold-hero { display: grid; grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-5) 0 var(--s-6); align-items: center; }
.fold-thesis { margin: 0; }
.statement-line-1 { display: block; font: var(--w-assert) var(--t-assert)/var(--lh-tight) var(--voice-assert); text-transform: uppercase; letter-spacing: var(--track-assert); color: var(--fg-1); margin-bottom: var(--s-4); }
.statement-line-2 { display: block; font: 300 var(--t-assert-2)/1.02 var(--voice-read); font-style: italic; letter-spacing: -0.02em; color: var(--fg-2); }
/* the fold's ask on an offer page: the one button, and one mono line under it (the same ask as the end) */
.fold-ask { margin-top: var(--s-4); }
.fold-ask .h-note { margin-top: var(--s-2); }
/* the record strip: ink on paper, the stroke pair */
.databar { display: grid; grid-template-columns: repeat(5, 1fr); border-top: var(--stroke-rail) solid var(--fg-1); border-bottom: var(--stroke-cross) solid var(--line); }
.databar-cell { padding: var(--s-4) var(--s-3) var(--s-4) var(--s-4); border-left: var(--stroke-cross) solid var(--line); }   /* a label wraps inside its cell rather than run into the next (at ~1024 five cells cannot hold it on one line) */
.databar-cell:first-child { border-left: 0; padding-left: 0; }
.databar-n { display: block; font: var(--w-assert) var(--t-label)/1.2 var(--voice-assert); text-transform: uppercase; color: var(--fg-1); }
.databar-l { display: block; margin-top: var(--s-1); font-weight: var(--w-meta-quiet); }
/* the lexicon (/about/) */
.lexicon { padding: var(--s-5) 0 var(--s-6); margin-bottom: var(--s-6); }
.lexicon--fold { padding: var(--s-5); margin-bottom: 0; }
.lexicon-label { margin-bottom: var(--s-4); }
.lexicon-word { font-size: var(--t-sub); line-height: 1.15; margin-bottom: var(--s-2); }
.lexicon-phon { font-family: var(--voice-meta); font-size: var(--t-small); color: var(--fg-3); margin-bottom: var(--s-4); }
.lexicon-phon em { font-family: var(--voice-read); font-style: italic; color: var(--fg-2); }
.lexicon-sense { color: var(--fg-2); margin-bottom: var(--s-2); max-width: none; }
.lexicon-sense:last-child { margin-bottom: 0; }
.lexicon-sense .num { font-family: var(--voice-meta); font-size: var(--t-meta); padding-right: var(--s-2); }
.lexicon-pos { white-space: nowrap; }
.lexicon-say { display: inline-block; vertical-align: -5px; padding: 8px; margin: -8px; margin-left: calc(var(--s-2) - 8px); color: var(--fg-1); line-height: 0; }
.lexicon-say svg { display: block; width: 19px; height: 19px; }
.lexicon-say:hover, .lexicon-say.is-playing { color: var(--accent-text); }
/* the print (the principal's portrait) */
.print { margin: var(--s-4) 0 0; max-width: 320px; }
.print-plate img { border: var(--stroke-cross) solid var(--line-strong); }
.print figcaption { margin-top: var(--s-3); font: var(--w-meta-quiet) var(--t-meta)/var(--lh-meta) var(--voice-meta); text-transform: uppercase; letter-spacing: var(--track-meta); color: var(--fg-3); }
/* the arc: the six months as a figure on the page */
.arc { margin: var(--s-5) 0; padding: var(--s-5) 0; border-top: var(--stroke-cross) solid var(--line-strong); border-bottom: var(--stroke-cross) solid var(--line-strong); }
.arc-label { display: flex; justify-content: space-between; margin-bottom: var(--s-3); color: var(--fg-1); max-width: none; }
.arc-months { display: grid; grid-template-columns: repeat(6, 1fr); border-bottom: var(--stroke-cross) solid var(--fg-1); padding-bottom: var(--s-2); margin-bottom: var(--s-3); }
.arc-months span { color: var(--fg-1); }
.arc-row { display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 6px; margin-bottom: 6px; }
.arc-bar { grid-column: var(--from) / calc(var(--to) + 1); border-top: var(--stroke-rail) solid var(--fg-1); padding-top: 6px; min-height: 36px; }
.arc-bar b { display: block; font: var(--w-assert) var(--t-label)/1.3 var(--voice-assert); text-transform: uppercase; letter-spacing: 0.02em; color: var(--fg-1); }
.arc-bar i { display: block; font-style: italic; font-weight: var(--w-read); font-size: var(--t-small); line-height: 1.4; color: var(--fg-2); }
.arc-ends { display: grid; grid-template-columns: repeat(5, 1fr); column-gap: var(--s-3); margin: var(--s-3) 0 0; padding-top: var(--s-3); border-top: var(--stroke-cross) solid var(--line); }
.arc-ends div { display: block; }
.arc-ends dt { color: var(--fg-1); margin-bottom: var(--s-1); }
.arc-ends dd { margin: 0; font-size: var(--t-small); line-height: 1.45; color: var(--fg-2); }
/* the glyph leaf (Technical + Creative) and the deck (/glyphs/) */
.glyph-leaf { margin: var(--s-6) 0 var(--s-6) calc(-1 * var(--s-4) - var(--stroke-rail)); padding: var(--s-5) 0 var(--s-5) var(--s-4); border-left: var(--stroke-rail) solid var(--fg-1); }
.glyph-leaf__tech { font: var(--w-assert) clamp(22px, 2.2vw, 30px)/1.05 var(--voice-assert); text-transform: uppercase; letter-spacing: -0.01em; text-wrap: balance; margin-bottom: var(--s-3); max-width: none; }
.glyph-leaf__edit { font-style: italic; font-weight: 300; font-size: var(--t-sub); line-height: var(--lh-sub); margin-bottom: var(--s-4); max-width: var(--m-wide); }
.glyph-leaf__from { margin: 0; }
.glyph-deck { display: grid; grid-template-columns: 1fr; gap: var(--s-5); margin: var(--s-7) 0; padding: var(--s-5); border: var(--stroke-cross) solid var(--line-strong); }
.glyph-card { container-type: inline-size; position: relative; aspect-ratio: 1; overflow: hidden; text-decoration: none; color: inherit; --card-bg: var(--paper); --card-frame: var(--rule-strong); --card-tech: var(--ink-1); --card-edit: var(--ink-2); --card-seal: var(--ink-1); --card-index: var(--volt-text); background: var(--card-bg); }
.glyph-card:nth-child(even) { --card-bg: var(--ink); --card-frame: var(--rule-on-ink-strong); --card-tech: var(--paper-1); --card-edit: var(--paper-2); --card-seal: var(--paper-1); --card-index: var(--volt-on-ink-text); }
.glyph-card__frame { position: absolute; inset: 5.5cqw; border: var(--stroke-cross) solid var(--card-frame); transition: border-color var(--motion) var(--ease); }
.glyph-card:hover .glyph-card__frame { border-color: var(--volt); }
.glyph-card__index { position: absolute; top: 8.4cqw; right: 8.8cqw; font: var(--w-meta) clamp(11px, 2.4cqw, 14px)/1 var(--voice-meta); letter-spacing: 0.16em; text-transform: uppercase; color: var(--card-index); }
.glyph-card__body { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.6cqw; padding: 13.5cqw 10.5cqw 19cqw; text-align: center; }
.glyph-card__tech { font: var(--w-assert) 7cqw/0.98 var(--voice-assert); text-transform: uppercase; letter-spacing: -0.01em; color: var(--card-tech); }
.glyph-card__tech.is-long { font-size: 5.8cqw; }
.glyph-card__edit { font-style: italic; font-weight: 300; font-size: 4.6cqw; line-height: 1.3; max-width: 64cqw; color: var(--card-edit); }
.glyph-card__seal { position: absolute; bottom: 8.9cqw; left: 50%; transform: translateX(-50%); width: 8.6cqw; line-height: 0; color: var(--card-seal); }
.glyph-card__seal svg { width: 100%; }
.glyph-card__seal svg path { fill: currentColor; }
.in-note { font-style: italic; font-weight: var(--w-read); color: var(--fg-3); }
/* buttons */
.btn-primary { display: inline-flex; align-items: center; min-height: 44px; background: var(--volt); color: var(--on-volt); font: var(--w-meta) var(--t-label)/1 var(--voice-meta); text-transform: uppercase; letter-spacing: var(--track-meta); padding: var(--s-3) var(--s-4); text-decoration: none; border: 0; cursor: pointer; transition: background var(--motion) var(--ease); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--volt-text); color: var(--on-volt); }
.btn-secondary { display: inline-flex; align-items: center; min-height: 44px; background: transparent; color: var(--fg-1); font: var(--w-meta) var(--t-label)/1 var(--voice-meta); text-transform: uppercase; letter-spacing: var(--track-meta); padding: var(--s-3) var(--s-4); text-decoration: none; border: var(--stroke-cross) solid var(--fg-1); cursor: pointer; transition: background var(--motion) var(--ease), color var(--motion) var(--ease); }
.btn-secondary:hover, .btn-secondary:focus-visible { background: var(--fg-1); color: var(--ground); }
/* forms (the intake, the subscribe, the tools) */
.form-field { margin-bottom: var(--s-4); }
.form-field label { display: block; margin-bottom: var(--s-2); }
.label-optional { font-family: var(--voice-read); font-style: italic; font-weight: var(--w-read); text-transform: none; letter-spacing: 0; }
.form-field input, .form-field textarea, .form-field select, .subscribe-input, .rv-draft-text { width: 100%; padding: var(--s-3); font: var(--w-read) var(--t-body)/1.4 var(--voice-read); color: var(--fg-1); background: var(--ground); border: var(--stroke-cross) solid var(--line-strong); border-radius: 0; min-height: 44px; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus, .subscribe-input:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--fg-1); }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--fg-4); }
.form-field textarea { min-height: 140px; resize: vertical; line-height: var(--lh-read); }
.form-field--checkbox label { text-transform: none; letter-spacing: 0; font: var(--w-read) var(--t-body)/1.5 var(--voice-read); color: var(--fg-2); display: flex; align-items: flex-start; gap: 0.6em; cursor: pointer; }
.form-field--checkbox input[type="checkbox"], .form-field--checkbox input[type="radio"] { appearance: none; flex-shrink: 0; width: 1.15em; height: 1.15em; min-height: 0; margin: 0.175em 0 0; padding: 0; position: relative; background: var(--ground); border: 1.5px solid var(--line-strong); border-radius: 0; cursor: pointer; }
.form-field--checkbox input:hover { border-color: var(--fg-1); }
.form-field--checkbox input:checked { background: var(--accent); border-color: var(--accent); }
.form-field--checkbox input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 0.36em; top: 0.14em; width: 0.3em; height: 0.56em; border: solid var(--on-volt); border-width: 0 0.16em 0.16em 0; transform: rotate(45deg); }
.form-field--checkbox input[type="radio"]:checked::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.4em; height: 0.4em; margin: -0.2em 0 0 -0.2em; border-radius: 50%; background: var(--on-volt); }
.form-error, #check-error { color: var(--fg-1); font-weight: var(--w-meta); margin-top: var(--s-4); }
.send-hp, .subscribe-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.subscribe-block { padding: var(--s-5); margin: var(--s-6) 0 0 calc(-1 * var(--s-5) - var(--stroke-cross)); max-width: 560px; }
.subscribe-heading { font-size: var(--t-sub); line-height: var(--lh-sub); margin-bottom: var(--s-2); }
.subscribe-body { color: var(--fg-2); margin-bottom: var(--s-4); }
.subscribe-label { display: block; margin-bottom: var(--s-2); }
.subscribe-input { margin-bottom: var(--s-3); }
.subscribe-error { font-weight: var(--w-meta); margin-bottom: var(--s-3); }
.follow-alt { color: var(--fg-3); margin-top: var(--s-4); }
.cf-turnstile { margin-bottom: var(--s-3); }
.is-hidden { display: none; }
/* legal pages */
.legal-content { margin: var(--s-6) 0 var(--s-7); }
.legal-content h2 { margin-top: var(--s-6); margin-bottom: var(--s-3); padding-top: var(--s-4); border-top: var(--stroke-cross) solid var(--line); text-wrap: balance; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content ul { color: var(--fg-2); }
.legal-content table { width: 100%; margin-bottom: var(--s-4); }
.legal-content .table-wrap { overflow-x: auto; margin-bottom: var(--s-4); }
.legal-content th { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: var(--stroke-cross) solid var(--line-strong); }
.legal-content td { font-size: var(--t-small); padding: var(--s-2) var(--s-3); border-bottom: var(--stroke-cross) solid var(--line); vertical-align: top; }
.legal-meta { margin-bottom: var(--s-6); padding-bottom: var(--s-3); border-bottom: var(--stroke-cross) solid var(--line); }
.legal-contact { margin-top: var(--s-6); padding-top: var(--s-4); border-top: var(--stroke-cross) solid var(--line); line-height: 1.8; }

/* ---- 06 HOME ---- */
.h-fold { --cap-k: calc(var(--rail) + var(--rail-gap) - var(--s-5)); --l3: calc(var(--cap-k) + (100% - var(--cap-k)) / 2 + var(--s-5)); display: grid; grid-template-columns: var(--l3) 1fr; column-gap: 0; align-items: end; padding: var(--s-5) 0 var(--s-6); }
.h-fold > div:first-child { padding-right: var(--s-6); }
.h-identity { margin: 0 0 var(--s-4); }
.h-thesis { font: var(--w-assert) var(--t-assert)/var(--lh-tight) var(--voice-assert); text-transform: uppercase; letter-spacing: var(--track-assert); margin: 0; }
.h-thesis em { display: block; font: 300 var(--t-assert-2)/1.02 var(--voice-read); font-style: italic; text-transform: none; letter-spacing: -0.02em; color: var(--fg-2); margin-top: var(--s-3); }
.h-situation p:not(.fold-ask) { max-width: var(--m-lede); color: var(--fg-2); margin-bottom: var(--s-4); }
.h-note { display: block; font-weight: var(--w-meta-quiet); margin-top: var(--s-3); }
/* capabilities: the duality drawn as rows, one process per row, its two halves across the seam (type in §08) */
.h-cap { row-gap: 0; --cap-k: calc(var(--rail) + var(--rail-gap) - var(--s-5) - var(--stroke-cross)); }   /* a movement block whose figure spans the rail: the row names on the rail line, the Binary copy on 440 (the frame's stroke counted), the Glyph on 908 */
.h-cap__rail { grid-column: 1; }
.h-cap__thesis { grid-column: 2; font: var(--w-assert) var(--t-head)/var(--lh-head) var(--voice-assert); text-transform: uppercase; letter-spacing: -0.01em; margin: 0 0 var(--s-5); max-width: var(--m-wide); }
.h-cap__thesis em { display: block; font: 300 var(--t-sub)/1.2 var(--voice-read); font-style: italic; text-transform: none; letter-spacing: 0; color: var(--fg-2); margin-top: var(--s-2); }
.h-cap__head { grid-column: 1 / -1; display: grid; grid-template-columns: var(--cap-k) 1fr 1fr; margin: 0; }
.h-cap__head > div { padding: var(--s-4) var(--s-5) var(--s-3); }
.h-cap__head > div:nth-child(n+2) { border-top: var(--stroke-cross) solid var(--rule-strong); }
.h-cap__head > div:nth-child(2) { border-left: var(--stroke-cross) solid var(--rule-strong); }
.h-cap__head > div:last-child { border-right: var(--stroke-cross) solid var(--rule-strong); }
.h-cap__rows { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; max-width: none; }
.h-cap__rows li { margin: 0; }
.h-cap__rows a { display: grid; grid-template-columns: var(--cap-k) 1fr 1fr; text-decoration: none; color: inherit; }
.h-cap__rows .h-cap__k { padding: var(--s-4) 0; border-top: var(--stroke-cross) solid var(--line); font-size: var(--t-label); color: var(--fg-1); }
.h-cap__rows li:last-child .h-cap__k { border-bottom: var(--stroke-cross) solid var(--line); }
.h-cap__rows a:hover .h-cap__k { color: var(--accent); }
.h-cap__b, .h-cap__g { padding: var(--s-4) var(--s-5); border-top: var(--stroke-cross) solid var(--line); }
.h-cap__b { font-family: var(--voice-tool); border-left: var(--stroke-cross) solid var(--rule-strong); }
.h-cap__g { border-right: var(--stroke-cross) solid var(--rule-strong); }   /* the frame: one hairline around both halves, as every chamber */
.h-cap__k { display: block; font: var(--w-meta) var(--t-meta)/var(--lh-meta) var(--voice-meta); text-transform: uppercase; letter-spacing: var(--track-meta); color: var(--fg-3); transition: color var(--motion) var(--ease); }
.h-cap__t { display: block; }
.h-cap__d { display: block; max-width: 30em; }
.h-cap__rows li:last-child .h-cap__b, .h-cap__rows li:last-child .h-cap__g { border-bottom: var(--stroke-cross) solid var(--rule-strong); }
.h-cap__hand { grid-column: 2; max-width: var(--m-read); margin: var(--s-6) 0 0; }

/* ---- 07 TECHNICAL + CREATIVE AND IN PRACTICE ---- */
/* Technical + Creative, the depth: each capability opened. The request first, the gate, the two halves, the line. */
.tc-fold .h-thesis { font-size: clamp(36px, 4.6vw, 64px); }
.tc-fold .h-thesis em { font-size: clamp(24px, 2.6vw, 36px); }
.tc-caps { container-type: inline-size; padding: var(--s-6) 0 0; border-top: var(--stroke-cross) solid var(--line); }
.tc-caps__rail { display: grid; grid-template-columns: var(--rail) 1fr; column-gap: var(--rail-gap); margin-bottom: var(--s-4); }
.tc-caps__rail .num { grid-column: 1; }
.tc-caps__list { max-width: none; }
.cap { border-top: var(--stroke-cross) solid var(--line); }
.cap:last-child { border-bottom: var(--stroke-cross) solid var(--line); }
.cap__sum { display: grid; grid-template-columns: var(--rail) 1fr 40px; column-gap: var(--rail-gap); align-items: baseline; padding: var(--s-4) 0; cursor: pointer; list-style: none; }
.cap__sum::-webkit-details-marker { display: none; }
.cap__rail { display: block; }
.cap__num { display: block; font: var(--w-meta) var(--t-meta)/var(--lh-meta) var(--voice-meta); color: var(--accent); letter-spacing: var(--track-meta); }
.cap__k { display: block; font: var(--w-assert) var(--t-label)/1.3 var(--voice-assert); text-transform: uppercase; letter-spacing: 0.02em; color: var(--fg-1); }
.cap__ask { font-style: italic; font-size: var(--t-lede); line-height: 1.3; color: var(--fg-1); max-width: var(--m-read); }
/* the icon: the stroke pair drawn as a plus; the vertical stroke falls away when the row is open */
.cap__icon { position: relative; width: 16px; height: 16px; justify-self: end; align-self: center; }
.cap__icon::before, .cap__icon::after { content: ""; position: absolute; background: var(--fg-1); transition: transform var(--motion) var(--ease), background var(--motion) var(--ease); }
.cap__icon::before { left: 0; right: 0; top: 7px; height: 2px; }
.cap__icon::after { top: 0; bottom: 0; left: 7px; width: 2px; }
.cap[open] .cap__icon::after { transform: scaleY(0); }
.cap__sum:hover .cap__ask, .cap__sum:focus-visible .cap__ask { color: var(--accent-text); }
.cap__sum:hover .cap__icon::before, .cap__sum:hover .cap__icon::after { background: var(--accent); }
.cap[open] .cap__sum { padding-bottom: var(--s-3); }
.cap__body { display: grid; grid-template-columns: var(--rail) 1fr; column-gap: var(--rail-gap); padding: 0 0 var(--s-5); }
.cap__body > * { grid-column: 2; }
.cap__gate { color: var(--fg-2); max-width: var(--m-read); margin-bottom: var(--s-4); }
.cap__line { font-weight: var(--w-strong); color: var(--fg-1); max-width: var(--m-read); }
.cap__body .context-link { margin-top: var(--s-4); padding-top: var(--s-3); }
/* the composite case (Steve, 2026-09-26): the deck's composites, never a real client; four beats stacked
   (situation, seam, both halves, what changed) so the copy stays on the content line */
.cap__case { margin: var(--s-5) 0 var(--s-4); padding-top: var(--s-3); border-top: var(--stroke-cross) solid var(--line); max-width: var(--m-read); }
.cap__case-label { font: var(--w-meta) var(--t-meta)/var(--lh-meta) var(--voice-meta); text-transform: uppercase; letter-spacing: var(--track-meta); color: var(--fg-3); margin: 0 0 var(--s-3); }
.cap__case-beats { margin: 0; }
.cap__case-beats dt { font: var(--w-meta) var(--t-meta)/var(--lh-meta) var(--voice-meta); text-transform: uppercase; letter-spacing: var(--track-meta); color: var(--fg-1); margin-top: var(--s-3); }
.cap__case-beats dd { margin: var(--s-1) 0 0; font-size: var(--t-body); line-height: var(--lh-read); color: var(--fg-2); }
/* the matrix: rows against columns, a mark where a row applies. One component (Steve, 2026-09-26): In Practice
   (the six capabilities across the five phases, on its own rail) and the identity ladder (the dense variant: the
   deliverables by package, in bands, the prices in the head). Open on the page; the head closed by the 3px stroke;
   one set of marks (the dot, the ring, the dash) with a legend under every matrix. */
.matrix { display: grid; grid-template-columns: var(--rail) 1fr; column-gap: var(--rail-gap); margin: 0 0 var(--s-4); }
.matrix > * { grid-column: 2; }
.matrix-scroll { margin: var(--s-5) 0 var(--s-3); overflow-x: auto; -webkit-overflow-scrolling: touch; contain: inline-size; }
.matrix-scroll--sheet { padding: var(--s-3) var(--s-3) 0; margin-left: calc(-1 * var(--s-3) - var(--stroke-cross)); }   /* the frame, if ruled back (the sheet list in §05 draws it): the copy on the content line, the edge one indent left, as every sheet */
.matrix-hint { display: none; margin: var(--s-2) 0 var(--s-5); }
.matrix__table { width: 100%; max-width: var(--m-wide); border-collapse: collapse; }
.matrix__table thead th { text-align: center; vertical-align: bottom; padding: 0 var(--s-2) var(--s-3); border-bottom: var(--stroke-rail) solid var(--fg-1); }
.matrix__table thead th:first-child { text-align: left; padding-left: 0; }
.matrix__ph { display: block; font: var(--w-assert) var(--t-label)/1.3 var(--voice-assert); text-transform: uppercase; letter-spacing: 0.02em; color: var(--fg-1); }
.matrix__price { display: block; font: var(--w-strong) var(--t-body)/1.3 var(--voice-read); color: var(--fg-1); margin-top: var(--s-2); }
.matrix__mo { display: block; font: var(--w-meta-quiet) var(--t-meta)/var(--lh-meta) var(--voice-meta); text-transform: uppercase; letter-spacing: var(--track-meta); color: var(--fg-3); margin-top: var(--s-1); }
.matrix__table tbody th { text-align: left; padding: var(--s-3) var(--s-2) var(--s-3) 0; border-bottom: var(--stroke-cross) solid var(--line); font: var(--w-meta) var(--t-body)/1.3 var(--voice-read); }
.matrix__table tbody th a { text-decoration: none; }
.matrix__table tbody th a:hover { color: var(--accent-text); }
.matrix__table td { text-align: center; vertical-align: middle; padding: var(--s-3) var(--s-2); border-bottom: var(--stroke-cross) solid var(--line); border-left: var(--stroke-cross) solid var(--line); }
.matrix__table .in, .matrix__table .run, .matrix__legend .in, .matrix__legend .run { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; }
.matrix__table .in, .matrix__legend .in { background: var(--fg-1); }
.matrix__table .run, .matrix__legend .run { border: 2px solid var(--fg-1); }
.matrix__table .out, .matrix__legend .out { color: var(--fg-4); font-style: normal; }
.matrix__table .out::before, .matrix__legend .out::before { content: "\2013"; }
.matrix__legend { font: var(--w-meta-quiet) var(--t-meta)/var(--lh-meta) var(--voice-meta); text-transform: uppercase; letter-spacing: var(--track-meta); color: var(--fg-3); margin-top: var(--s-3); }
.matrix__legend i { margin-right: var(--s-1); }
/* the dense variant (the identity ladder) */
.matrix--dense thead th:not(:first-child) { width: 17%; }
.matrix--dense tbody th[scope="row"] { font: var(--w-meta) var(--t-small)/1.4 var(--voice-read); padding: var(--s-2) var(--s-4) var(--s-2) 0; }
.matrix--dense td { padding: var(--s-2); font-size: var(--t-small); }
.matrix__table .matrix__band th { font: var(--w-meta) var(--t-meta)/var(--lh-meta) var(--voice-meta); text-transform: uppercase; letter-spacing: var(--track-meta); color: var(--fg-3); text-align: left; padding: var(--s-4) 0 var(--s-2); border-bottom: var(--stroke-cross) solid var(--line); }
.matrix__table tbody tr:first-child.matrix__band th { padding-top: var(--s-3); }

/* ---- 08 THE DUALITY — one component, wherever it appears (Steve, 2026-09-26): home's capability rows, the
   chambers on Technical + Creative and the process pages. Binary on ink in the system voices (Tomorrow for the
   name, Inter for the body); Glyph on paper in the reading voice (the serif, at the weight that matches).
   Nothing about it is set per page; this block is the rule. ---- */
/* the chambers, measured against their container so the Glyph copy lands on the site's second column line,
   the same line as the fold's */
.movement-block--halves { container-type: inline-size; }
.cap__halves { --cap-k: calc(var(--rail) + var(--rail-gap) - var(--s-5)); --l3: calc(var(--cap-k) + (100cqw - var(--cap-k)) / 2 + var(--s-5)); display: grid; grid-template-columns: calc(var(--l3) - var(--rail) - var(--rail-gap)) 1fr; margin: var(--s-4) 0 var(--s-4) calc(-1 * var(--s-4) - var(--stroke-cross)); border: var(--stroke-cross) solid var(--line-strong); }
.cap__half { padding: var(--s-4); }
.cap__half p { max-width: none; }
/* the label: / Binary / and / Glyph /, with its gloss */
.half-label { font: var(--w-meta) var(--t-meta)/var(--lh-meta) var(--voice-meta); text-transform: uppercase; letter-spacing: var(--track-meta); color: var(--accent); margin: 0 0 var(--s-2); }
.half-gloss { color: var(--fg-3); font-weight: var(--w-meta-quiet); margin-left: var(--s-2); }
/* the name: the Binary name in caps at 82% of the serif's size (level cap heights, level weight); the Glyph name in the serif */
.h-cap__head .half-name, .cap__half .half-name { font: var(--w-assert) calc(var(--t-sub) * 0.82)/var(--lh-head) var(--voice-assert); text-transform: uppercase; letter-spacing: -0.01em; color: var(--fg-1); margin: 0 0 var(--s-3); }
.h-cap__head > div:last-child .half-name, .cap__half--g .half-name { font-family: var(--voice-read); font-weight: var(--w-meta); font-size: var(--t-sub); text-transform: none; letter-spacing: var(--track-head); }
.h-cap__head .half-name { margin-bottom: 0; }
/* the subheads in the rows (home): Performance / Experience */
.h-cap__b .h-cap__t { font: var(--w-assert) var(--t-label)/1.3 var(--voice-assert); text-transform: uppercase; letter-spacing: 0.02em; color: var(--fg-1); margin-bottom: var(--s-2); }
.h-cap__g .h-cap__t { font: var(--w-meta) var(--t-body)/1.3 var(--voice-read); text-transform: none; letter-spacing: 0; color: var(--fg-1); margin-bottom: var(--s-2); }
/* the body */
.h-cap__b .h-cap__d, .cap__half--b p:not(.half-label):not(.half-name) { font: var(--w-read) 16px/1.55 var(--voice-tool); color: var(--fg-2); }
.h-cap__g .h-cap__d, .cap__half--g p:not(.half-label):not(.half-name) { font: var(--w-read) var(--t-body)/1.55 var(--voice-read); color: var(--fg-2); }

/* ---- 09 INSTRUMENTS — the ink side (§01), in Inter ---- */
.instrument { margin: var(--s-6) calc(50% - 50vw); padding: var(--s-6) var(--gutter); }
.instrument > .layer-in { max-width: calc(var(--m-page) - 2 * var(--gutter)); margin: 0 auto; }
.bench { display: grid; grid-template-columns: 8fr 4fr; column-gap: var(--s-6); align-items: start; }
.tool, .readout, .inset, .instrument .form-field label, .instrument .form-field input, .instrument .form-field select, .instrument .form-field textarea, .instrument .check-q legend, .instrument .check-options label, .instrument .form-instruction { font-family: var(--voice-tool); }
.tool { font-feature-settings: "tnum" 1; }
.tool-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); border-bottom: var(--stroke-cross) solid var(--line-strong); padding-bottom: var(--s-2); margin-bottom: var(--s-4); }
.tool-title { font: var(--w-meta) 20px/1.3 var(--voice-tool); color: var(--fg-1); margin: 0; max-width: none; }
.tool-ref { font-family: var(--voice-tool); text-transform: none; letter-spacing: 0; font-size: 12px; }
.tool form { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-4); }
.tool form .form-field--wide, .tool #check-form, .tool #aic-form, .tool #rv-form { grid-column: 1 / -1; display: block; }
.tool #aic-form .form-field, .instrument .form-field textarea { max-width: 560px; }
.instrument .form-field label { font: var(--w-meta) 12px/1.4 var(--voice-tool); text-transform: none; letter-spacing: 0; color: var(--fg-3); }
.instrument .form-field input, .instrument .form-field select, .instrument .form-field textarea, .rv-draft-text { font: var(--w-read) 15px/1.4 var(--voice-tool); background: var(--ground); color: var(--fg-1); border-color: var(--line-strong); }
.instrument .form-field input:focus, .instrument .form-field select:focus, .instrument .form-field textarea:focus { border-color: var(--fg-1); }
.instrument .form-field--checkbox label { font: var(--w-read) 15px/1.4 var(--voice-tool); color: var(--fg-1); }
.instrument .form-field--checkbox input { background: var(--ground); border-color: var(--line-strong); }
.tool-noscript { color: var(--fg-1); margin-bottom: var(--s-4); }
.form-instruction { font-size: 15px; color: var(--fg-1); margin-bottom: var(--s-6); }
.check-group-heading { color: var(--accent); line-height: var(--lh-head); margin: var(--s-6) 0 var(--s-4); text-wrap: balance; }
.check-q { border: 0; border-bottom: var(--stroke-cross) solid var(--line); margin: 0; padding: var(--s-4) 0; min-width: 0; }
.check-q:last-of-type { border-bottom: 0; }
.check-q legend { padding: 0; font: var(--w-meta) 15px/1.4 var(--voice-tool); color: var(--fg-1); }
.check-options { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-3); }
.check-options label { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; font: var(--w-read) 15px/1.4 var(--voice-tool); color: var(--fg-1); padding: 9px 0; margin: -9px 0; }
.check-options input[type="radio"] { margin: 0; accent-color: var(--accent); }
.check-actions { margin: var(--s-4) 0 0; }
.rv-group { border: 0; border-bottom: var(--stroke-cross) solid var(--line); padding: 0 0 var(--s-3); margin: 0 0 var(--s-4); min-width: 0; }
.rv-group legend { color: var(--accent); font: var(--w-meta) var(--t-meta)/var(--lh-meta) var(--voice-meta); text-transform: uppercase; letter-spacing: var(--track-meta); margin-bottom: var(--s-3); }
.rv-group .form-field--checkbox { margin-bottom: var(--s-2); }
.rv-actions { margin-top: var(--s-4); }
.readout { margin-top: var(--s-6); border-top: var(--stroke-cross) solid var(--line-strong); padding-top: var(--s-4); font-feature-settings: "tnum" 1; }
.readout h2 { font: var(--w-meta) 22px/1.3 var(--voice-tool); color: var(--fg-1); margin: var(--s-4) 0 var(--s-3); }
.readout h3 { font: var(--w-meta) 17px/1.3 var(--voice-tool); color: var(--fg-1); }
.readout p, .readout li, .readout dd { font-size: 14px; color: var(--fg-1); }
.readout hr { border-top-color: var(--line); margin: var(--s-4) 0; }
.readout > hr:first-child { display: none; }
.send-intake, .send-status, .send-submit, .send-form > * { grid-column: 1 / -1; }
.readout .data-table, .readout .data-table th, .readout .data-table td { color: var(--fg-1); font-family: var(--voice-tool); font-size: 14px; border-color: var(--line); }
.readout .data-table caption, .readout .data-table thead th { color: var(--fg-3); font-family: var(--voice-tool); text-transform: none; letter-spacing: 0; }
.readout strong { color: var(--accent-text); }
.readout--plate { padding-top: var(--s-4); }
.rv-draft { border-top: var(--stroke-cross) solid var(--line); padding-top: var(--s-3); margin-top: var(--s-3); }
.rv-draft-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-2); }
.rv-draft-label { margin: 0; text-transform: none; letter-spacing: 0; font-family: var(--voice-tool); font-size: 12px; }
.rv-copy { color: var(--fg-1); border-color: var(--line-strong); background: transparent; }
.rv-copy:hover { color: var(--ground); background: var(--fg-1); border-color: var(--fg-1); }
.rv-draft-text { display: block; margin-bottom: var(--s-3); }
.rv-post { margin-top: var(--s-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.rv-post p { margin: 0; }
/* the "about this" beside a tool */
.inset { align-self: start; border: var(--stroke-cross) solid var(--line-strong); padding: var(--s-4); }
.inset p { font: var(--w-read) var(--t-small)/1.55 var(--voice-read); color: var(--fg-1); margin: 0 0 12px; max-width: none; }
.inset .inset-label { color: var(--fg-3); margin: 0 0 12px; }
.inset p + .inset-label, .inset .menu + .inset-label { margin-top: 20px; }
.inset a { color: var(--fg-1); }
.wire-body { padding: 0; }
.menu { list-style: none; margin: 0; padding: 0; max-width: none; }
.menu li { border-bottom: var(--stroke-cross) solid var(--line); padding: 10px 0; margin: 0; }
.menu li:last-child { border-bottom: 0; }
.menu a { text-decoration: none; display: block; }
.menu .num { display: block; margin-bottom: 4px; color: var(--fg-3); }
.menu .t { color: var(--fg-1); }
.menu a:hover .t { color: var(--accent-text); }
/* the visibility map and the AI readback (results, built by the tools' scripts) */
.vis-map { display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; gap: var(--s-5); margin: var(--s-6) 0 var(--s-4); }
.vis-half { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); }
.vis-half-label { font: var(--w-assert) var(--t-small)/1.3 var(--voice-assert); text-transform: uppercase; letter-spacing: 0.02em; color: var(--fg-1); }
.vis-half-sub, .vis-half-count, .vis-legend { color: var(--fg-2); }
.vis-cells { display: grid; grid-template-columns: repeat(7, 26px); gap: 6px; margin: var(--s-2) 0; }
.vis-cell { width: 26px; height: 26px; background: transparent; border: 1.5px solid var(--line-strong); }
.vis-cell--seen { background: var(--fg-1); border-color: var(--fg-1); }
.vis-cell--gap { border-color: var(--fg-2); }
.vis-cell--blind { border-color: var(--accent); }
.vis-slash { align-self: center; padding: 0 var(--s-2); font: var(--w-assert) 2.4rem/1 var(--voice-assert); color: var(--accent); }
.vis-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4); margin-bottom: var(--s-4); }
.vis-legend-item { display: inline-flex; align-items: center; gap: var(--s-1); }
.vis-legend .vis-cell { width: 14px; height: 14px; }
.check-send { margin-top: var(--s-6); padding-top: var(--s-6); border-top: var(--stroke-rail) solid var(--fg-1); }
.send-form { margin-top: var(--s-4); }
.send-intake { margin: var(--s-4) 0; }
.send-intake-note { font-family: var(--voice-tool); text-transform: none; letter-spacing: 0; margin-bottom: var(--s-3); }
.send-submit { justify-self: start; align-self: start; margin-top: var(--s-3); }
.send-status { margin-top: var(--s-3); font-weight: var(--w-meta); }
.aic-verdict { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-3) var(--s-4); padding: var(--s-4) 0 var(--s-5); border-bottom: var(--stroke-cross) solid var(--line); margin-bottom: var(--s-6); }
.aic-verdict-band { font: var(--w-assert) var(--t-sub)/1 var(--voice-assert); text-transform: uppercase; letter-spacing: -0.01em; color: var(--fg-1); }
.aic-verdict-host { margin-left: auto; }
.readback { border: var(--stroke-cross) solid var(--line-strong); padding: var(--s-5); margin-bottom: var(--s-6); }
.readback .block-label { margin-bottom: var(--s-2); }
.readback h3 { margin: 0 0 var(--s-2); }
.readback-note { font-style: italic; font-weight: var(--w-read); font-size: var(--t-small); color: var(--fg-3); max-width: 60ch; margin: 0 0 var(--s-5); }
.readback-list { margin: 0; }
.readback-row { display: grid; grid-template-columns: 160px 1fr; gap: var(--s-4); padding: var(--s-3) 0; border-top: var(--stroke-cross) solid var(--fg-1); }
.readback-row:last-child { border-bottom: var(--stroke-cross) solid var(--fg-1); }
.readback-row dt { color: var(--fg-2); padding-top: 0.35em; }
.readback-row dd { margin: 0; }
.readback-value { display: block; color: var(--fg-1); }
.readback-source { display: block; margin-top: var(--s-1); font-weight: var(--w-meta-quiet); }
.readback-blank { display: block; font-style: italic; font-weight: var(--w-read); color: var(--fg-3); }
.readback-row.is-blank dt { color: var(--accent); }
.aic-section-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: var(--s-5) 0 var(--s-3); }
.aic-section-name { font: var(--w-assert) var(--t-small)/1.3 var(--voice-assert); text-transform: uppercase; letter-spacing: 0.02em; color: var(--fg-1); }
.aic-section-gloss, .aic-botclass-gloss, .aic-cached-note, .aic-disavowal { font-style: italic; font-weight: var(--w-read); font-size: var(--t-small); color: var(--fg-3); max-width: 62ch; }
.aic-checks { margin: 0 0 var(--s-5); }
.aic-check { padding: var(--s-3) 0; border-top: var(--stroke-cross) solid var(--line); }
.aic-check dt { display: grid; grid-template-columns: 20px 1fr auto; gap: var(--s-2); align-items: baseline; text-transform: none; letter-spacing: 0; font-family: var(--voice-read); }
.aic-mark { width: 9px; height: 9px; margin-top: 0.4em; border-radius: 50%; }
.aic-pass .aic-mark { background: var(--fg-3); }
.aic-warn .aic-mark { border: 1px solid var(--fg-2); background: linear-gradient(90deg, var(--fg-2) 50%, transparent 50%); }
.aic-fail .aic-mark { border: 1.5px solid var(--fg-1); }
.aic-info .aic-mark { border: 1px dotted var(--fg-3); }
.aic-check-label { color: var(--fg-1); }
.aic-pass .aic-check-label { color: var(--fg-3); font-weight: var(--w-meta-quiet); }
.aic-check-pts { font-weight: var(--w-meta-quiet); text-transform: none; }
.aic-check dd { margin: var(--s-1) 0 0 calc(20px + var(--s-2)); font-size: var(--t-small); color: var(--fg-2); max-width: 62ch; }
.aic-pass dd { color: var(--fg-3); }
.aic-botclass { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: baseline; margin: var(--s-5) 0 var(--s-2); }
.aic-botclass-name { color: var(--fg-1); }
.aic-bots { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); max-width: none; }
.aic-bot { margin: 0; }
.aic-bot-name { color: var(--fg-1); }
.aic-bot-state { margin-left: var(--s-2); }
.aic-bot.is-blocked .aic-bot-state { color: var(--fg-1); font-weight: var(--w-meta); }
.aic-limits { border: var(--stroke-cross) solid var(--line); padding: var(--s-5); margin: var(--s-6) 0 var(--s-5); }
.aic-limits .block-label { margin-bottom: var(--s-3); }
.aic-limit-list { margin: 0; padding-left: 1.1em; max-width: 62ch; }
.aic-limit-list li { font-size: var(--t-small); color: var(--fg-2); margin-bottom: var(--s-2); }
#aic-result .cta-row { margin-bottom: var(--s-6); }

/* ---- 10 FOCUS AND MOTION ---- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
:focus:not(:focus-visible) { outline: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms; animation-duration: 0ms; scroll-behavior: auto; } }
@media (forced-colors: active) { .form-field--checkbox input { border-color: CanvasText; } .form-field--checkbox input:checked { background: Highlight; border-color: Highlight; } }

/* ---- 11 RESPONSIVE — last on purpose ---- */
@media (max-width: 1023px) {
  :root { --rail: 120px; --rail-gap: var(--s-4); }
}
@media (min-width: 900px) {
  .fold-hero { --cap-k: calc(var(--rail) + var(--rail-gap) - var(--s-5)); --l3: calc(var(--cap-k) + (100% - var(--cap-k)) / 2 + var(--s-5)); grid-template-columns: calc(var(--l3) - var(--s-5) - var(--stroke-cross)) 1fr; column-gap: 0; }   /* the aside's copy on the page's second column line, as on home */
}
@media (max-width: 899px) {
  .site-header { padding-bottom: var(--s-3); }
  body.menu-ready .site-nav ul { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 100vw; background: var(--ground); border-bottom: var(--stroke-cross) solid var(--line); padding: var(--s-3) var(--gutter); z-index: 10; text-align: right; }
  body.menu-ready.nav-open .site-nav ul { display: block; }
  body.menu-ready .site-nav li { display: block; }
  body.menu-ready .site-nav a { display: block; padding: 14px 0; margin: 0; }
  body.menu-ready .nav-cluster { display: flex; gap: var(--s-4); align-items: center; }
  .nav-menu-btn, .nav-menu-cta { font: var(--w-meta) var(--t-meta)/1 var(--voice-meta); text-transform: uppercase; letter-spacing: var(--track-meta); color: var(--fg-1); text-decoration: none; padding: 15px 7px; margin: -15px -7px; background: none; border: 0; cursor: pointer; }
  .nav-menu-cta { color: var(--accent-text); }
  .h-fold { grid-template-columns: 1fr; gap: var(--s-5); padding-top: var(--s-4); }
  .h-fold > div:first-child { padding-right: 0; }
  .h-cap { grid-template-columns: 1fr; }
  .h-cap__rail, .h-cap__thesis, .h-cap__hand { grid-column: 1; }
  .h-cap__head { display: none; }
  .h-cap__rows a { grid-template-columns: 1fr; }
  .h-cap__rows .h-cap__k { padding: var(--s-4) 0 var(--s-2); border-bottom: 0; }
  .h-cap__b { padding: var(--s-4); border: var(--stroke-cross) solid var(--rule-strong); border-bottom: 0; }
  .h-cap__g { padding: var(--s-4); border: var(--stroke-cross) solid var(--rule-strong); border-top: 0; }
  .h-cap__rows li:last-child .h-cap__b { border-bottom: 0; }
  .fold-hero { padding-top: 0; row-gap: var(--s-5); }
  .identity-sep { display: none; }
  .identity-where { display: block; }
  .bench { grid-template-columns: 1fr; row-gap: var(--s-5); }
  .tool form { grid-template-columns: 1fr; }
  .tool-head { flex-wrap: wrap; gap: var(--s-2); }
  .arc-months { display: none; }
  .arc-row { grid-template-columns: 1fr; }
  .arc-bar { grid-column: 1; }
  .arc-ends { grid-template-columns: 1fr; row-gap: var(--s-3); }
  .print { max-width: 240px; }
  .tc-caps__rail { grid-template-columns: 1fr; }
  .cap__sum { grid-template-columns: 1fr 24px; row-gap: var(--s-1); }
  .cap__rail { display: flex; gap: var(--s-2); align-items: baseline; }
  .cap__icon { grid-column: 2; grid-row: 1 / span 3; }
  .cap__ask { grid-column: 1; }
  .cap__body { grid-template-columns: 1fr; }
  .cap__body > * { grid-column: 1; }
  .cap__halves { grid-template-columns: 1fr; margin-left: 0; }
  .matrix { grid-template-columns: 1fr; }
  .matrix > * { grid-column: 1; }
  .matrix__mo { display: none; }
  .matrix__table td, .matrix__table thead th { padding-left: var(--s-1); padding-right: var(--s-1); }
  .matrix--dense thead th { padding-left: var(--s-2); padding-right: var(--s-2); }
  .matrix--dense td { padding: var(--s-2); }
  .matrix--dense .matrix__mo { display: block; }   /* the ladder keeps its windows on phones */
}
@media (max-width: 719px) {
  .movement-block, .entry-card:has(> .journal-meta), .detail-row { grid-template-columns: 1fr; gap: var(--s-3); }
  .marginalia-meta .name, .marginalia-meta .num { display: inline; margin-right: var(--s-2); }
  .databar { grid-template-columns: 1fr 1fr; }
  .databar-cell { border-left: 0; padding-left: 0; }
  .footer-main { flex-direction: column; }
  .footer-right { text-align: left; }
  .footer-group { grid-template-columns: 1fr; gap: var(--s-2) var(--s-3); }
  .footer-links { display: block; }
  .footer-links li:not(:last-child)::after { content: none; }
  .footer-legal { display: grid; grid-template-columns: max-content max-content; column-gap: var(--s-5); row-gap: 6px; }
  .footer-legal .sep { display: none; }
  .principal-callout { display: block; padding: var(--s-4) var(--gutter); }
  .principal-callout > *, .principal-callout .sig-label { margin: 0 0 var(--s-3); }
  .draper-block, .set-apart, .contract-sheet, .glyph-deck, .readback, .aic-limits, .subscribe-block { padding: var(--s-4); }
  .set-apart, .contract-sheet, .matrix-scroll--sheet, .glyph-leaf, .letter, .field-note-answer, .principal-callout-abbreviated, .subscribe-block, .pull-quote, .essay-page .principal-callout, .container-reading .principal-callout, .field-note .principal-callout { margin-left: 0; margin-right: 0; }
  .page-title-block { padding-top: var(--s-5); }
  .data-table, .data-table tbody, .data-table tr { display: block; }
  .data-table caption { display: block; width: 100%; }
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .data-table tr { padding: var(--s-3) 0; border-bottom: var(--stroke-cross) solid var(--line); }
  .data-table th[scope="row"], .data-table td { display: block; padding: var(--s-2) 0; border: 0; white-space: normal; }
  .matrix-scroll .matrix__table { min-width: 620px; }
  .matrix-scroll .matrix__table thead th:first-child, .matrix-scroll .matrix__table tbody th[scope="row"] { position: sticky; left: 0; background: var(--ground); z-index: 1; }
  .matrix-scroll .matrix__table tbody th[scope="row"] { max-width: 44vw; white-space: normal; }
  .matrix-hint { display: block; }
  .matrix { gap: 0; }
  .readback-row { grid-template-columns: 1fr; gap: var(--s-1); }
  .aic-verdict-host { margin-left: 0; width: 100%; }
  .aic-check dt { grid-template-columns: 18px 1fr; }
  .aic-check-pts { grid-column: 2; }
  .footnote-ref a::before, .footnote-backref::before { content: ""; position: absolute; inset: -16px -18px; }
}
@media (min-width: 640px) {
  .glyph-deck { grid-template-columns: repeat(2, 1fr); }
  .glyph-card:nth-child(4n+1), .glyph-card:nth-child(4n+4) { --card-bg: var(--paper); --card-frame: var(--rule-strong); --card-tech: var(--ink-1); --card-edit: var(--ink-2); --card-seal: var(--ink-1); --card-index: var(--volt-text); }
  .glyph-card:nth-child(4n+2), .glyph-card:nth-child(4n+3) { --card-bg: var(--ink); --card-frame: var(--rule-on-ink-strong); --card-tech: var(--paper-1); --card-edit: var(--paper-2); --card-seal: var(--paper-1); --card-index: var(--volt-on-ink-text); }
  .glyph-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--s-5)) / 2); }
}
@media (max-width: 520px) { .vis-slash { display: none; } .vis-map { gap: var(--s-6); } }

/* ---- 12 PRINT ---- */
@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .site-header, .site-footer, .skip-link, .cta-row, .back-link, noscript, .nav-cluster { display: none; }
  [data-side="ink"], .instrument, .principal-callout, .principal-callout-abbreviated, .draper-block, .h-cap__b { background: none; color: #000; --fg-1: #000; --fg-2: #222; --fg-3: #444; }
  a { color: #000; }
  @page { margin: 1.5cm; }
}