/* =============================================================================
   PRISM II — SECTION COMPONENTS. The essay band, the artefact window, the
   two-column split and the chip row.

   Loads after site_00_foundation, which owns the tokens, the type scale, .wrap,
   .sec, .shead, .eyebrow, .secnum and the button family. Nothing here redefines
   any of those, and nothing here names a literal colour: every value resolves
   through a token so both themes and the light-hue rule are inherited rather
   than restated.

   ONE DEFINITION PER COMPONENT. The mockup this is cut from records that its own
   predecessor declared four components three times each and shipped roughly
   sixty lines that never painted, because the later declaration silently won and
   nobody could tell which one was live. Where the mockup itself declares a
   selector twice — .win .bar picks up its truncation rule seventy lines further
   down — the two are folded into one block here.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   THE ESSAY BAND. A run of hairline-separated readings, each a heading and a
   short passage, optionally followed by an artefact.
   -------------------------------------------------------------------------- */
/* The essay sits inside .wrap, so left to itself its wash and hairlines stop at
   the column edge and the tinted block reads as a card with white margins. The
   negative inline margin runs the band to the viewport edge the way every hero
   does, and the matching padding puts the text back exactly where the column
   was. 50vw counts the scrollbar, so body carries overflow-x: clip (site_00)
   to keep the page from gaining a horizontal scroll. */
.essay {
  padding: 40px calc(50vw - 50%);
  margin-inline: calc(50% - 50vw);
  border-top: 1px solid var(--line);
}
.essay:last-of-type { border-bottom: 1px solid var(--line); }

/* THE BAND HAS TO CLOSE, AND :last-of-type DOES NOT CLOSE IT. That selector
   matches on element TYPE, not class, so it only fires when the last .essay is
   also the last <div> of its parent — true where a band ends a page, false on
   /software-development, where two .sec blocks follow it and the essays ran
   into the next section with no rule at all. The section below draws the line
   instead, at column width, which is what every other section boundary on the
   site is; the essay's own borders are full-bleed and a full-bleed rule here
   would underline the tinted band rather than open the section. */
.essay + .sec { border-top: 1px solid var(--line); }
/* No measure cap on the essay heading (Jason, 2026-09-02): it runs one line
   and wraps only when the column makes it, rather than at 24ch. */
.essay :is(h2, h3) { max-width: none; margin-bottom: 16px; }
/* The essay ordinal sits on the heading's own line (Jason, 2026-09-02), not
   on a line above it: mono, small, mid-cap, and the heading wraps after it. */
.essay :is(h2, h3) .secnum {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--ink3);
  vertical-align: middle;
  margin-right: 1.1em;
}
/* Margin set here explicitly rather than left to the base `p` rule: site_00's
   `p { margin: 0 0 14px }` and Tailwind's own preflight `p { margin: 0 }` are
   the same specificity, tailwind.css loads last in the stylesheet chain (see
   site_00's own header comment on this), and it was winning the tie, so every
   bare <p> in an essay ran into the next one with no gap at all. A class
   selector beats an element selector outright, so setting it here removes the
   tie instead of hoping to win it. */
/* 64ch, NOT 72 (2026-09-03). `ch` is the advance of the zero glyph, which in
   Inter is narrower than its average lowercase letter, so a 72ch cap measured
   ~90 rendered characters a line — past the 75 an eye tracks without losing its
   place, and confirmed at ~90 on all three triad passages by a detector run.
   The unit under-reports and the cap has to be set for what it renders, not for
   what it says. */
.essay p { color: var(--ink2); font-size: 17px; max-width: 64ch; margin: 0 0 16px; }
.essay p:last-child { margin-bottom: 0; }
.essay .art { margin-top: 28px; }

/* -----------------------------------------------------------------------------
   THE MOMENT OF TRUTH. The one customer message the triad below refracts.

   It bleeds to the viewport edge on the essays' own arithmetic, because it is
   the head of that band rather than a card sitting above it: one continuous
   object, message then readings, is what makes the refraction legible. It
   carries the band's opening hairline for the same reason, which is why the
   first .essay after it does not draw one.

   THE QUOTE IS NEWSREADER AND THAT IS NOT A FOURTH USE OF THE SERIF. site_00
   declares four places the human voice appears and "every quotation" is one of
   them; this is the quotation the rule was written for. It takes --clay rather
   than --ember for the same reason .essay.human's heading does — a light hue is
   never a `color`.
   -------------------------------------------------------------------------- */
.moment {
  padding: 44px calc(50vw - 50%) 40px;
  margin-inline: calc(50% - 50vw);
  border-top: 1px solid var(--line);
}
.moment .eyebrow { margin: 0 0 18px; }
/* Quoted at the measure a sentence is read at, not the measure a paragraph is
   set at: this is one line of speech and it has to stay one thought wide. The
   size steps with the viewport so it stays the largest thing in the band at
   every width without ever outrunning the h2s beneath it. */
.moment-q {
  font-family: var(--human);
  font-weight: 400;
  font-size: clamp(21px, 2.6vw, 30px);
  line-height: 1.42;
  letter-spacing: -.008em;
  color: var(--clay);
  max-width: 34ch;
  margin: 0;
  padding: 0;
  border: 0;
  text-wrap: pretty;
}
/* No measure cap here: the line is one sentence and it reads as one sentence
   only if it stays on one line. At 13px mono it is ~92ch, well inside the
   content measure, so it sets flush on a laptop and simply wraps on a phone. */
.moment-note {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink3);
  max-width: none;
  margin: 20px 0 0;
}

/* The band opens on the message, so the first reading after it does not draw a
   second hairline one padding-step below the first. */
.moment + .essay { border-top: 0; }

@media (max-width: 640px) {
  .moment { padding-top: 34px; padding-bottom: 30px; }
  .moment-q { max-width: none; }
}


/* THE ONE PLACE THE SERIF EARNS ITS KEEP, and the reason .human is a modifier
   rather than a tint.

   site_00 declares three type voices and says serif is the human one. The
   moment-of-truth triad is the section that encoding exists for: it claims one
   customer conversation is three things at once — a human moment, a data point,
   a revenue event — and a claim like that is demonstrated typographically or it
   is only being asserted. An earlier draft set all three readings in the same
   face at the same size, which left the section arguing for a distinction it had
   stopped making. Newsreader returns in exactly three places on the whole site;
   this is one of them, and widening it past three would spend the signal.

   So .human takes the serif and its text partner. .machine and .warm take the
   wash alone: a blueprint reading and a product line are not human voices, and
   giving them the face would say they were. --clay carries the type here because
   --apricot is the wash — a light hue is never a `color`. */
.essay.human :is(h2, h3) {
  font-family: var(--human);
  font-weight: 400;
  letter-spacing: -.005em;
  color: var(--clay);
}
.essay.human {
  background: linear-gradient(180deg, color-mix(in srgb, var(--apricot) 34%, var(--bg)), transparent 74%);
}
.essay.machine {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ice) 52%, var(--bg)), transparent 74%);
}
/* The warm wash without the serif. Same ground as the human reading, because it
   sits at the same end of the spectrum; no serif, because nobody is speaking. */
.essay.warm {
  background: linear-gradient(180deg, color-mix(in srgb, var(--apricot) 34%, var(--bg)), transparent 74%);
}

/* AN ESSAY'S OWN INLINE ASK. A text-weight link rather than a second button —
   for the one essay whose claim is directly about a live interactive surface,
   naming it in prose and leaving it unlinked was the weaker choice. 44px
   min-height keeps it a real tap target despite reading as plain mono text. */
.essay .inline-ask {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.essay .inline-ask:hover { text-decoration: underline; text-underline-offset: 3px; }
.essay.human .inline-ask { color: var(--clay); }

/* -----------------------------------------------------------------------------
   THE ARTEFACT WINDOW.

   .win shows the site as a machine receives it — a crawler's view, a retrieval
   result, a block of structured data, the answer an engine returns. It is a
   frame around evidence, and the rule that comes with the frame is that
   EVERYTHING INSIDE ONE MUST BE REAL. The version this replaces showed a
   fabricated answer in which an AI recommended the studio by name, printed on
   the page that sells answer-engine visibility. A critique killed it and was
   right to: a skeptic disproves an invented answer in about thirty seconds, and
   when they do, every true claim standing beside it falls with it. The frame is
   what makes the content look checkable, so the content has to survive checking.

   .bar is the window's chrome and it holds a URL or a query — text with no space
   to wrap into and no natural break. It gets one declaration carrying both the
   layout and the truncation, rather than the mockup's two.
   -------------------------------------------------------------------------- */
.win { background: var(--bg2); border: 1px solid var(--line2); overflow: hidden; }
/* The window's own caption, outside the frame rather than in it: what is inside
   an artefact window is evidence, and a note about the evidence is not evidence.
   Mono because it is the data voice describing a data object. */
.win-note {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink3);
  max-width: 46ch;
  margin: 16px 0 0;
}
.win .bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--ink3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The three window-chrome marks read as traffic lights (Jason, 2026-09-02) — a
   deliberate, narrow exception to two site-wide rules at once: radius belongs
   only to buttons and person photographs, and colour is otherwise a closed
   vocabulary (the spectrum, plus pass/part/miss). macOS's own three hex values,
   because a browser-chrome reference reads as itself only in its own colours. */
.win .bar i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.win .bar i:nth-child(1) { background: #FF5F57; }
.win .bar i:nth-child(2) { background: #FFBD2E; }
.win .bar i:nth-child(3) { background: #28C840; }
.win .body { padding: 18px; font-size: 15px; color: var(--ink2); display: grid; gap: 10px; }
/* A redacted line of body text: the shape of content a machine skipped past. It
   is a bar rather than lorem, because lorem in an artefact window would be
   fabricated content in the one component that may not carry any. */
.win .line { height: 7px; background: var(--bg3); }
.win .q { background: var(--bg); border: 1px solid var(--line); padding: 11px 13px; color: var(--ink); }
.win .code { font-family: var(--mono); font-size: 13px; }
/* The citation pill. Its ink is --clay and its border is that same ink mixed
   down, so the outline tracks the text in both themes instead of being a second
   value somebody has to remember to change. */
.win .cite {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--clay);
  border: 1px solid color-mix(in srgb, var(--clay) 40%, transparent);
  padding: 1px 7px;
  margin-right: 6px;
}

/* -----------------------------------------------------------------------------
   THE VERDICT STAT. The oversized score at the top of an artefact window — "0 of
   3" rather than a sentence, so the finding lands before the row-by-row detail
   does. The number is set in --display at weight 700, deliberately not --human:
   Newsreader is the human voice and is scoped to four uses site-wide, and a bare
   digit isn't one of them. Its colour stays neutral ink rather than a status hue
   for the same reason .tag never floats free of its word — a colour with no word
   beside it says nothing, and here the word is the caption's own sentence. -----
   -------------------------------------------------------------------------- */
.win .verdict-stat {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding-bottom: 16px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.win .verdict-stat .num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--ink);
  flex: none;
}
.win .verdict-stat .num small {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--ink3);
  margin-left: 2px;
}
.win .verdict-stat .cap { font-size: 14px; color: var(--ink2); }
.win .verdict-stat .cap strong { color: var(--ink); font-weight: 600; }

/* -----------------------------------------------------------------------------
   THE ENGINE LEDGER. One row per AI assistant, replacing .finding/.row for this one
   exhibit (that pair stays exactly as it is for pages/_report_cover, which
   still uses it). Each row's mark is the vendor's own logo (i-claude/i-chatgpt/
   i-gemini in shared/_icon_sprite), the same path data already vendored for
   the audit report's PDF (lib/studio/auditor/engine_marks.py) — see that
   sprite's own comment for source and licence. Drawn in one neutral ink
   rather than each vendor's brand colour, matching the report's own rule:
   identification only, no endorsement implied.

   NO BAR. The report's own chart draws a fill proportional to a real count
   ("named in 8 of 40 answers"); this exhibit is a single illustrative example
   with no such number behind each row, and a bar without a real quantity is a
   measurement this page hasn't made — on the one page whose whole pitch is
   that nothing here is invented. The .tag alone carries the finding.
   -------------------------------------------------------------------------- */
.win .engine-bars { display: grid; gap: 12px; }
.win .engine-bars .erow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.win .engine-bars .who {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--ink2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.win .engine-bars .engine-mark { width: 13px; height: 13px; fill: currentColor; stroke: none; flex: none; }
.win .engine-bars .said {
  font-size: 13.5px;
  color: var(--ink3);
  margin: -6px 0 0;
}

/* -----------------------------------------------------------------------------
   THE CHECK ROW. A single pass/fail pairing, reused verbatim wherever the page
   needs one, rather than a fourth visual language per exhibit. The box takes a
   small 4px radius (Jason, 2026-09-02) — a deliberate, narrow exception to the
   site-wide rule that a radius belongs only to buttons and person photographs,
   matching .tag's own rounding below. One pairing per exhibit (per .win), never
   a longer checklist inside one window — the page stopped publishing its own
   full method as a list of chips on 2026-09-02, and a stacked grid of these
   inside a single window would be the same giveaway in a new shape. Job 02
   ("Be usable by AI") shows two separate .win exhibits, one exhibit each for
   the reading failure and the acting failure — still one pairing per window,
   not a relaxation of the rule.
   -------------------------------------------------------------------------- */
.win .check-pair { display: grid; }
.win .check-row { display: flex; gap: 12px; padding: 14px 18px; }
.win .check-row + .check-row { border-top: 1px solid var(--line); }
.win .check-row .box {
  width: 18px;
  height: 18px;
  flex: none;
  border: 1.5px solid;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
  margin-top: 1px;
}
.win .check-row.fail .box { border-color: var(--miss-line); color: var(--miss); }
.win .check-row.pass .box { border-color: var(--pass-line); color: var(--pass); }
.win .check-row .txt strong { display: block; font-size: 14.5px; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.win .check-row .txt span { font-size: 13px; color: var(--ink3); }

/* The line that says what an artefact is and where it came from. Mono, because
   it is a reading rather than narration, and capped at 64ch so it stays a
   caption instead of becoming a second paragraph. Sentence case: it is a
   sentence, and site_00 reserves uppercase for labels short enough to be labels. */
/* .essay p sets 17px with class+element specificity, so a caption inside an
   essay names the element too or it inherits the passage size. */
.caption,
.essay p.caption {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--ink3);
  margin-top: 10px;
  max-width: 64ch;
}
/* A caption under a refraction frame is a caption for BOTH panes, so it centres
   on the frame rather than hanging off its left edge under one of them. The
   64ch cap stays and centres with it — the line is short, and left at
   max-width:none it would run the full bleed width of the essay. */
.split.frame + .caption { text-align: center; margin-inline: auto; }

/* -----------------------------------------------------------------------------
   SPLIT AND STACK. Prose on one side, the artefact it refers to on the other.

   The min-width:0 is not defensive tidying. A grid item's default minimum is its
   content, and .win contains a mono bar set to nowrap and code that does not
   wrap either — so without this the window refuses to shrink below its longest
   URL, the 1fr column it sits in inflates to match, and the prose column beside
   it is squeezed to a ragged ribbon at exactly the widths nobody tests at. Every
   container that holds prose beside an artefact gets it.
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.split > *, .essay > div, .win { min-width: 0; }

.stack { display: grid; gap: 24px; }
.stack > * { min-width: 0; }

/* -----------------------------------------------------------------------------
   CHIPS. A short row of facts under a passage — a stack list, a set of formats,
   the checks a report ran. Mono at the 12px floor, sentence case with only a
   little tracking, because a chip's content is usually a proper noun and
   uppercasing it would destroy real information.
   -------------------------------------------------------------------------- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.chip {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink2);
  border: 1px solid var(--line2);
  padding: 5px 11px;
}

/* -----------------------------------------------------------------------------
   RESPONSIVE

   .split collapses at the same 920 breakpoint site_00 uses to drop the gutter to
   24px, and for the same reason: two 1fr columns with a 56px gutter between them
   put the prose measure under about 40 characters below that width, and an
   artefact window beside it has already been truncating for a while by then.
   Stacked, the passage keeps its measure and the window keeps its full width.
   The gap closes to the stack's own rhythm rather than staying at 56px, which
   reads as a section break once the two are one above the other.
   -------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
   THE REFRACTION FRAME (/software-development, 2026-09-02). One thing, read two
   ways, with the prism on the seam: the page as a person sees it beside the
   page as a machine reads it; the ask a donor met beside what it added up to.
   It replaced two artefact windows of grey skeleton bars, which read as
   placeholder on the one site whose pitch is that every frame is checkable.

   .frame is a MODIFIER on .split, never a restyle of it: .split is the plain
   gapped two-column that home and /customer-intelligence lay prose out with.
   The frame closes the gap and draws the border.
   Everything inside a frame must be true; the machine pane is rendered from
   SeoHelper#schema_excerpt, which reads the graph the layout emits.
   -------------------------------------------------------------------------- */
.split.frame {
  gap: 0;
  /* .split is align-items:start, which is right for prose beside an artefact
     and wrong for a bordered frame: the shorter pane stopped halfway up and
     left its divider and its wash ending in mid-air. A frame's panes are cells
     and cells are the height of the row. */
  align-items: stretch;
  border: 1px solid var(--line2);
  background: var(--bg2);
}
.split.frame > div { padding: 22px 24px; }
.split.frame > div + div { border-left: 1px solid var(--line2); }
.split.frame .lbl {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink3);
}
.split.frame.person > div:first-child .lbl { color: var(--clay); }
/* The result pane is the warm reading of the pair, so it takes the apricot as a
   wash mixed against the frame's own ground, and --clay carries the type. */
.split.frame .result {
  background: linear-gradient(180deg, color-mix(in srgb, var(--apricot) 40%, var(--bg2)), var(--bg2));
}
.split.frame .result .sentence { color: var(--clay); margin-top: 12px; display: block; }
.split.frame .result .foot { font-size: 12px; letter-spacing: .04em; text-transform: none; color: var(--ink3); margin-top: 22px; display: block; }

/* The seam glyph — a prism in miniature centred on the frame's own divide —
   was removed 2026-09-02 (Jason). It read as a white chip pasted over the
   join rather than as the mark: at 52px the drawing is below the size its
   three rays are legible at, and the frame already says "two readings" by
   being two panes. The mark itself still opens the page, in the eyerow. */

/* -----------------------------------------------------------------------------
   A REPRODUCTION IS NOT A CONTROL (2026-09-02, from the Impeccable critique).

   Both refraction frames contain pictures of controls: a `span.btn.primary` in
   the hero miniature, a `div.btn.human` reading "Give now", and four price
   chips with $250 shown selected. Every one of them inherited .btn's
   `cursor: pointer` and its hover swap, so the browser promised a live control
   and a tap returned nothing — on the one page whose argument is that its
   claims are checkable, at the moment a reader has just been won over by a
   community raising money for a home. The mini's pill is worse than a dead
   click on its own: it is pixel-identical to the page's real primary CTA, so a
   visitor who presses it and gets nothing can reasonably conclude the REAL
   button is broken.

   Scoped to .art so it can only ever reach a frame. The pills keep their fill
   and their type, because the reproduction has to look like the page it
   reproduces; what they lose is the two properties that were making a promise.
   Each is also aria-hidden in the markup, so nothing announces a button that
   is not one — see the view.
   -------------------------------------------------------------------------- */
.art .btn { cursor: default; }
.art .btn.primary:hover { background: var(--fill-primary); border-color: var(--fill-primary); }
.art .btn.human:hover   { background: var(--fill-human);   border-color: var(--fill-human); }
.art .chip { cursor: default; }

/* THE HERO IN MINIATURE, and the word miniature is the whole specification: it
   is a picture of this page's own hero at a fraction of its size, not a small
   hero. So it FILLS its pane rather than floating in the top of it (a pane
   that ends halfway up beside a full-height code pane reads as a broken cell),
   and everything inside it steps down together — a 17px headline where the
   real one is 96px, and a button reproduced at the scale a page at this size
   would print it.

   That button is the one place on the site a pill does not clear 44px, and it
   is allowed to because it is NOT AN ACTION: it is a `span`, inside a picture,
   with nothing to press. Every real pill on the page still clears the target,
   and the miniature would be a lie at full size — a 44px control in a 17px
   page is not what a visitor sees.

   The gradient is the same three stops as body.p-software .hero in site_03, at
   the same --hero-k multiplier, so it darkens with the real one; restated here
   rather than shared because the door test matches that hero's selector
   literally. The words come from the view's own hero locals, and a test pins
   the two equal. */
.split.frame > .pane { display: flex; flex-direction: column; }
.mini {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--line);
  padding: 18px 18px 16px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--peri)    calc(28% * var(--hero-k, 1)), var(--bg)) 0%,
      color-mix(in srgb, var(--lilac)   calc(36% * var(--hero-k, 1)), var(--bg)) 48%,
      color-mix(in srgb, var(--apricot) calc(36% * var(--hero-k, 1)), var(--bg)) 100%);
}
.mini .mono { display: block; font-size: 12px; margin-bottom: 14px; }
.mini .h {
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -.01em;
  max-width: 22ch;
  margin: 0 0 18px;
  color: var(--ink);
}
/* margin-top:auto is what makes the miniature fill: the headline holds its
   size and the button falls to the foot of whatever height the pane is. */
.mini .btn {
  margin-top: auto;
  min-height: 0;
  padding: 8px 15px;
  font-size: 13px;
}

/* The machine pane. A pre, because it is structured data and the line breaks are
   its own; keys in the machine's text partner, strings in the person's, and the
   one comment in the caption ink. */
.split.frame .code {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
  color: var(--ink2);
}
.code .k  { color: var(--deep); }
.code .s  { color: var(--clay); }
.code .c  { color: var(--ink3); }
.code .ln { display: inline-block; width: 2.2em; color: var(--ink3); user-select: none; }

/* THE FACTS LEDGER. Three or four short checkable lines beside a passage, in
   the data voice, on the ladder's hairline rhythm. It is what fills the right
   third of an essay that a 62ch passage leaves empty, and it is a ledger
   rather than a second paragraph because these are things to check, not read. */
.facts {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink3);
  border-top: 1px solid var(--line);
  margin-top: 6px;
}
.facts > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.facts b { font-weight: 500; color: var(--ink); text-align: right; }
.facts a { color: var(--accent, var(--plum)); text-decoration: underline; text-underline-offset: 3px; }
.facts .pass { color: var(--pass); }

.chip.on { border-color: var(--clay); color: var(--clay); }

@media (max-width: 920px) {
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split.frame { gap: 0; }
  .split.frame > div + div { border-left: 0; border-top: 1px solid var(--line2); }
  .seam { display: none; }
}

/* -----------------------------------------------------------------------------
   THE THIRD VOICE.

   site_02 already sets .essay.human's heading in Newsreader, because the triad's
   human reading has to BE a human reading rather than merely say it is. This is
   the other half of that argument: the data reading is set in the data voice.

   The triad is the one section on the site where the typography IS the claim. It
   asserts that one customer conversation is three things at once — a human
   moment, a data point, a revenue event — and the previous design set all three
   in one face at one size, so the section stated a distinction it had stopped
   demonstrating. That is the same failure mode as an over-claim.

   The revenue reading takes no rule of its own: it is the display face, which is
   the voice the studio narrates in, and that is the point — revenue is the
   reading a business already speaks.
   -------------------------------------------------------------------------- */
.essay.data :is(h2, h3) {
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(23px, 2.5vw, 32px);
  letter-spacing: -.01em;
  color: var(--deep);
  margin-bottom: 16px;
}