/* ============================================================================
   system.css — the ONE type + palette + component layer for both product page
   variants. a.html and b.html differ ONLY in structure; every token, face and
   component below is shared, so the comparison stays honest.

   INHERITED FROM THE RUNNING SITE, NOT FROM A CHECKED-IN COPY
   -----------------------------------------------------------------------------
   Fetched 2026-08-27 from the deployed thepingback.com:

     /identity/tokens.css   the ground, the ink ladder, and the warrant trio
     /fonts/fonts.css       Instrument Sans + EB Garamond, self-hosted woff2
     /site.css              the shell's own dial (weights, tracking, leading)

   THE ACCENT LAW, quoted from the source rather than paraphrased:

        GOLD MARKS. IT DOES NOT SET CHARACTERS.

   Three tokens carry three different permissions and they are NOT
   interchangeable. The numbers are the source's own measurements:

     --warrant       #AD851E  3.10:1 on --ground  rules, borders, dots, focus
                                                  rings. NEVER text. 3.10 clears
                                                  WCAG 1.4.11's 3:1 floor for
                                                  non-text UI components, which
                                                  is exactly why gold may RING a
                                                  control it may not SET.
     --warrant-text  #886714  4.78:1 on --ground  the one legal text gold, and
                                                  the house floor for it is 14px.
     --warrant-wash  rgba(173,133,30,.13)         a wash BEHIND letters; the
                                                  character colour never changes.

   On the charcoal register the constraint stops biting — #C9A23F is 7.65:1 on
   #141414 — so the two gold tokens collapse into one and gold may set a
   character there. That is a property of the ground, not a relaxation.

   This is why the fidelity chip's LABEL is ink and only its DOT is gold: a chip
   label is 12px, under the 14px floor for --warrant-text and nowhere near legal
   for --warrant. The founder's rule and the institution's rule are the same
   rule, arrived at from two directions.

   NO MONOSPACE, anywhere, ever. Standing house rule; `code` is the prose face
   in italic.
   ========================================================================== */

/* ---- faces — the live self-hosted binaries, byte-identical to the site ----
   Variable fonts: one file carries 400-700 (sans) / 400-800 (serif), so a
   weight axis is available without a second request. font-display:block, not
   swap: this page's whole argument is about what a face is doing, and a flash
   of Georgia would defeat the exercise. */
@font-face{
  font-family:"Instrument Sans";font-style:normal;font-weight:400 700;
  font-display:block;src:url(fonts/instrument-sans-normal-400-700-latin.woff2) format("woff2");
}
@font-face{
  font-family:"EB Garamond";font-style:normal;font-weight:400 800;
  font-display:block;src:url(fonts/eb-garamond-normal-400-800-latin.woff2) format("woff2");
}
@font-face{
  font-family:"EB Garamond";font-style:italic;font-weight:400 800;
  font-display:block;src:url(fonts/eb-garamond-italic-400-800-latin.woff2) format("woff2");
}

/* The Poppins A/B face and its [data-face="poppins"] repoint were REMOVED from
   this copy of the sheet on 2026-08-30. They belong to the variants review
   fixture: the founder settled the pairing on Instrument Sans + EB Garamond,
   the shipped page has no face toggle, and the four poppins-*.woff2 binaries
   exist only in launch/variants/fonts/ — not in launch/fonts/. So every rule
   that referenced them was dead here and pointed at files this directory does
   not hold. The fixture copy at launch/variants/system.css is untouched and
   still carries the toggle. */

/* ============================================================================
   THE TYPE PROBLEM, AND THE MEASUREMENT THAT SOLVED IT

   The brief: "the current serif is struggling to hold all the complexity and in
   some places is competing with the sans." That is a real defect and it was NOT
   a choice-of-face problem — swapping names would not have touched it.

   Both faces were rasterised and their ink bounds measured (canvas, 100px, ink
   extents of 'x' and 'H'). Recorded numbers, not adjectives:

       Instrument Sans   x-height 0.520 em   cap-height 0.730 em
       EB Garamond       x-height 0.410 em   cap-height 0.660 em
       ratio                      1.268

   EB Garamond is a garalde with a very small x-height. The consequence is
   arithmetic: 16.5px EB Garamond has an x-height of 6.77px, while 13.5px of the
   prior UI sans had an x-height of ~7.40px. THE BODY PROSE WAS RENDERING
   OPTICALLY SMALLER THAN THE UI LABELS BESIDE IT while being nominally three
   points larger. Hierarchy was inverted, so the sans won every adjacency — the
   two faces read as competing because they were the same apparent size with no
   rank between them, and the serif looked too weak to carry dense material.

   THE FIX IS A SIZE LAW, DERIVED FROM THE MEASUREMENT:

     · 17.76px EB Garamond is optically identical to 14px Instrument Sans.
       That is the COLLISION LINE, and it is why the old page fought itself.
     · Serif is therefore never set below 17.5px. Anywhere. There is no such
       thing as small print in the prose face on this page.
     · Sans is never set between 15px and 21px in running content, so it cannot
       land on the collision line. It lives at or below 14px (micro, labels,
       metadata, controls) or at heading sizes, 22px and up.
     · Prose is 19px (x-height 7.79) against UI sans at 13px (x-height 6.76) —
       a measured 1.15 optical step. The serif is now unambiguously the larger
       voice, which is what makes it read as the thing you inhabit.

   AND A ROLE LAW, which is the institution's own and is quoted here because it
   is the reason two faces exist at all (identity/tokens.css):

       "Instrument Sans sets everything that IDENTIFIES (the wordmark, the datum
        labels, the publication numbers, the titles). EB Garamond sets
        everything that is READ. An identifier is looked up, a text is
        inhabited, and one face has never done both well."

   So the default body face here is the SANS, and prose opts IN. That inverts
   thepingback.com's own site.css, which defaults to the prose face — correctly,
   because it is an editorial surface that is mostly reading. A product page is
   mostly chrome, and defaulting to serif is what let the serif leak into
   fifteen small UI slots where it had no business and no size to survive.
   Making the reading face opt-in enforces the role split structurally instead
   of by discipline.

   The 11px label register is untouched, and it is not an exception: at 11px the
   sans cap-height is 8.03px against prose x-height 7.79px — nearly equal. Caps
   at 0.14em tracking in --dim are told apart by CASE and COLOUR, not by size,
   which is exactly how the institution already uses them.
   ========================================================================== */

:root{
  /* ---- the type spine — by reference, never a restated literal ---- */
  --font-display:"Instrument Sans",system-ui,sans-serif;
  --font-label:var(--font-display);
  --font-prose:"EB Garamond",Georgia,"Times New Roman",serif;

  /* ---- structure — the institution's own ---- */
  --radius:2px;              /* hairline institution, not a consumer card */
  --hairline:1px;
  --shell:1180px;
  --gutter:clamp(20px,4vw,56px);
  --measure:34em;            /* in PROSE ems, so the measure tracks the face */
  --mark-size:22px;

  /* ---- scale ----
     --t-display is dialled below the institution's clamp(38px,5.9vw,80px):
     that number is a masthead for a full-bleed editorial page, and this hero
     sits in a 27rem rail. Everything else is the live scale. */
  --t-display:clamp(33px,4vw,52px);
  --t-section:clamp(23px,2.4vw,30px);
  --t-sub:clamp(18px,1.5vw,21px);

  /* the two registers, and the gap between them is the whole point */
  --t-lede:20px;             /* serif  · x 8.20 */
  --t-prose:19px;            /* serif  · x 7.79 — the reading size */
  --t-prose-s:17.5px;        /* serif  · x 7.18 — the FLOOR. never go under. */
  --t-ui:13px;               /* sans   · x 6.76 */
  --t-ui-lg:14px;            /* sans   · x 7.28 — controls, summaries */
  --t-control:15px;          /* sans   · isolated blocks (buttons) only */
  --t-meta:12px;             /* sans   · x 6.24 — metadata, chips */
  --t-label:11px;            /* sans   · CAPS 0.14em */

  --track-label:0.14em;
  --track-link:0.06em;

  /* weights + leading — the shell's own dial, lifted from site.css */
  --w-display:600; --tr-display:-.032em; --lh-display:1.02;
  --w-section:600; --tr-section:-.018em; --lh-section:1.16;
  --w-label:500;   --w-semi:600;
  --lh-prose:1.52;
  --lh-ui:1.5;
}

/* ============================================================================
   GROUND — cool neutral light. The shipped construction, verbatim from
   identity/tokens.css with its measured ratios intact.
   ========================================================================= */
:root,[data-ground="neutral"]{
  --ground:#F4F4F4;
  --raised:#FCFCFC;
  --sunk:#EAEAEA;
  --hair:#DCDCDC;
  --hair-strong:#C4C4C4;
  --mid:#9C9C9C;            /* 2.50:1 — NOT a text colour. rules + inert marks */
  --dim:#61615F;            /* 5.64:1 on ground — AA small text                */
  --ink-soft:#3A3A3C;
  --ink:#141414;            /* 16.75:1 on ground                               */

  --warrant:#AD851E;              /* 3.10:1 — rule/dot only, NEVER text */
  --warrant-text:#886714;         /* 4.78:1 — the one legal text gold    */
  --warrant-wash:rgba(173,133,30,.13);
}

/* the warmer paper, kept so the change of ground stays arguable */
[data-ground="paper"]{
  --ground:#F7F5F0; --raised:#FDFCF9; --sunk:#F1EEE6;
  --hair:#E1DCD0; --hair-strong:#CAC3B3; --mid:#A29A8B;
  --dim:#63605A; --ink-soft:#3B3934; --ink:#1A1A1A;
  --warrant:#AD851E;              /* 3.13:1 on this ground */
  --warrant-text:#886714;         /* 4.82:1 on this ground */
  --warrant-wash:rgba(173,133,30,.13);
}

/* ============================================================================
   THE CHARCOAL REGISTER — a decision the READER makes, not a third ground.
   Gold lifts to #C9A23F (7.65:1 on #141414) and the two gold tokens COLLAPSE:
   on this ground a rule and a character are equally legal in it, so every
   component that already says var(--warrant) or var(--warrant-text) simply
   works with no per-component override.
   ========================================================================= */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#141414; --raised:#1C1C1C; --sunk:#0E0E0E;
    --hair:#2B2B2B; --hair-strong:#3C3C3C; --mid:#6B6B6B;
    --dim:#9A9A98; --ink-soft:#C6C6C6; --ink:#F4F4F4;
    --warrant:#C9A23F; --warrant-text:#C9A23F;
    --warrant-wash:rgba(201,162,63,.16);
  }
}
:root[data-theme="dark"]{
  --ground:#141414; --raised:#1C1C1C; --sunk:#0E0E0E;
  --hair:#2B2B2B; --hair-strong:#3C3C3C; --mid:#6B6B6B;
  --dim:#9A9A98; --ink-soft:#C6C6C6; --ink:#F4F4F4;
  --warrant:#C9A23F; --warrant-text:#C9A23F;
  --warrant-wash:rgba(201,162,63,.16);
}

/* THE BAND — dark in BOTH registers. Not a theme surface; a PLACE. Its text
   tokens are register-independent by design, because --dim and --mid are
   redefined per register and either one put on the band is legible in one and
   fails in the other while the ground underneath has not moved. */
:root{
  --band:#101010;
  --on-band:#F0F0F0;
  --on-band-dim:#8E8E8A;    /* 5.79:1 on --band */
  --on-band-q:#A3A39D;      /* 7.51:1 on --band */
  --on-band-hair:rgba(240,240,240,.16);
  --band-warrant:#C9A23F;   /* 7.90:1 on --band — here gold may SET text */
}
/* the one re-point, and it is the whole mechanism for the band's gold */
.band,.is-dark{
  --warrant:var(--band-warrant);
  --warrant-text:var(--band-warrant);
  --ground:var(--band); --raised:#1A1A1A; --sunk:#0B0B0B;
  --ink:var(--on-band); --ink-soft:#D8D8D6; --dim:var(--on-band-dim);
  --mid:#6E6E6A; --hair:var(--on-band-hair); --hair-strong:rgba(240,240,240,.28);
  background:var(--band); color:var(--on-band);
}

/* ============================================================================
   RESET AND GROUND
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  /* THE SANS IS THE DEFAULT. Prose opts in. See the type block above. */
  font-family:var(--font-display);
  font-size:var(--t-ui);
  line-height:var(--lh-ui);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* overflow-x:hidden is NOT set. It hides horizontal overflow instead of
     preventing it, so a layout defect becomes invisible rather than fixed.
     Every container below is min-width:0 or container-queried instead. */
}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0}
a{color:inherit}

/* THE FOCUS RING. Gold is legal here and it is the clearest case in the system:
   a ring is a RULE, and --warrant's 3.10:1 clears the 3:1 non-text floor. */
:focus-visible{outline:2px solid var(--warrant);outline-offset:3px;border-radius:var(--radius)}

/* ---- headings — the identifying face --------------------------------------- */
h1{
  font-family:var(--font-display);font-size:var(--t-display);
  font-weight:var(--w-display);letter-spacing:var(--tr-display);
  line-height:var(--lh-display);text-wrap:balance;color:var(--ink);
}
h2{
  font-family:var(--font-display);font-size:var(--t-section);
  font-weight:var(--w-section);letter-spacing:var(--tr-section);
  line-height:var(--lh-section);text-wrap:balance;color:var(--ink);
}
h3{
  font-family:var(--font-display);font-size:var(--t-sub);
  font-weight:var(--w-semi);letter-spacing:-.012em;line-height:1.22;color:var(--ink);
}

/* ---- prose — the reading face, and the ONLY place it is allowed ------------
   --ink-soft rather than an alpha wash: the prior revision set prose at
   rgba(20,20,20,.72), which lightened an already-light face and handed the
   sans yet another advantage. --ink-soft is #3A3A3C, a real ink. */
.prose{
  font-family:var(--font-prose);
  font-size:var(--t-prose);
  line-height:var(--lh-prose);
  color:var(--ink-soft);
}
.prose p{max-width:var(--measure)}
.prose p+p{margin-top:.72em}
.prose em{font-style:italic}
/* 500, not 600: EB Garamond's 600 is a display weight and spots badly in
   running text. 500 is the emphasis step the variable axis is for. */
.prose strong{font-weight:500;color:var(--ink)}
.prose a{
  text-decoration:none;
  border-bottom:var(--hairline) solid var(--hair-strong);
  transition:border-color .16s ease,color .16s ease;
}
.prose a:hover{color:var(--warrant-text);border-bottom-color:var(--warrant)}

.lede{
  font-family:var(--font-prose);font-size:var(--t-lede);
  line-height:1.42;color:var(--ink-soft);max-width:30em;
}

/* NO MONOSPACE, ever — the prose face in italic is the house's answer. Sized
   at 1em of its PARENT, and every parent that carries `code` is prose. */
code{font-family:var(--font-prose);font-style:italic;font-size:1em;
  color:var(--ink);background:none;padding:0}

/* the micro-register — one class because it is one voice */
.lab{
  font-family:var(--font-label);font-size:var(--t-label);font-weight:var(--w-label);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--dim);
  line-height:1;
}

/* ---- the .datum band header, lifted 1:1 from thepingback.com ---------------
   01 ───────hairline progress rule─────── THE SURFACE   */
.datum{
  border-top:var(--hairline) solid var(--hair-strong);
  border-bottom:var(--hairline) solid var(--hair-strong);
  padding:9px 0;
}
.datum .row{display:flex;align-items:center;gap:16px}
.datum .idx{
  font-family:var(--font-label);font-size:var(--t-label);font-weight:600;
  letter-spacing:.08em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;
}
.datum .run{flex:1;height:var(--hairline);background:var(--hair);min-width:0}
.datum[data-warrant] .run{
  background:linear-gradient(to right,var(--warrant) 0 var(--lead,84px),var(--hair) var(--lead,84px));
}

/* ============================================================================
   THE DOORS — the two CTAs, as a deliberate PAIR

   The defect: "Try it" sat beside "Download for macOS" at different sizes, so
   the pair read as one action with a modifier — as though trying were how you
   got the Mac app. They are not one action. They are TWO SURFACES, and per
   spec/STORY.md they serve two different audiences:

       try.dialectic.page   browser, no account, nothing saved. Store-less by
                            design, which is itself the reason to download.
       the download         macOS, your writing as Markdown in a folder you
                            choose. (That Markdown claim is TRUE OF THE DOWNLOAD
                            ONLY — the browser build stores ProseMirror JSON and
                            creates no .dialectic/. STORY.md forbids saying it
                            unscoped, so each door states its own terms.)

   Three mechanisms separate them, none of them decorative:
     1. IDENTICAL METRICS. Same height, font-size, weight, padding and radius,
        differing only in fill. A pair is legible as a pair only when the two
        halves are the same object in two states.
     2. EACH DOOR CARRIES ITS OWN TERMS underneath, in the micro-register. The
        sub-lines say what the two surfaces actually are, so the difference is
        SHOWN rather than asserted.
     3. THEY DO NOT TOUCH. .doors is a grid with a real gap and the doors do not
        share a baseline box, so neither can read as the other's qualifier.

   The primary is INK, not gold. #FFF on #AD851E measures 3.41:1 — under AA for
   normal text, and a filled gold button is gold setting characters, which the
   accent law forbids outright. Ink on ground is 16.75:1 and needs no argument.
   ========================================================================= */
.doors{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),max-content));
  gap:1.15rem 1.5rem;align-items:start;
}
.door{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.btn{
  /* the shared metric — a pair is a pair because these five lines are equal */
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  height:44px;padding:0 1.15rem;border-radius:var(--radius);
  font-family:var(--font-display);font-size:var(--t-control);font-weight:var(--w-semi);
  letter-spacing:-.008em;line-height:1;text-decoration:none;white-space:nowrap;
  border:var(--hairline) solid transparent;cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
.btn-primary{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.btn-primary:hover{background:var(--ink-soft);border-color:var(--ink-soft)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--hair-strong)}
.btn-secondary:hover{border-color:var(--ink);background:var(--raised)}
.btn .arrow{font-size:1.05em;line-height:0}

/* each door's own terms — micro-register, never prose */
.door-terms{
  font-family:var(--font-display);font-size:var(--t-meta);line-height:1.45;
  color:var(--dim);max-width:20rem;
}
.door-terms b{font-weight:500;color:var(--ink-soft)}

/* an inline out-link — gold RULES the underline, ink sets the characters */
.out{
  display:inline-flex;align-items:baseline;gap:.35rem;
  font-family:var(--font-display);font-size:var(--t-ui-lg);font-weight:500;
  color:var(--ink-soft);text-decoration:none;
  border-bottom:var(--hairline) solid var(--warrant);
  padding-bottom:1px;transition:color .16s ease,border-color .16s ease;
}
.out:hover{color:var(--warrant-text)}
.out .arrow{color:var(--warrant-text)}

/* ============================================================================
   FIDELITY CHIPS — sourced from shadcn/ui's badge, not hand-rolled

   Base class of shadcn/ui new-york-v4 badge.tsx, read from source:

     inline-flex w-fit shrink-0 items-center justify-center gap-1
     overflow-hidden rounded-full border border-transparent px-2 py-0.5
     text-xs font-medium whitespace-nowrap transition-[color,box-shadow]
     focus-visible:ring-[3px] [&>svg]:size-3          (+ h-5 from .cn-badge)

   Translated: 20px tall · 12px text · weight 500 · 8px/2px padding · 4px gap ·
   12px mark · centred · w-fit · shrink-0 · nowrap · 3px focus ring.

   WHAT WAS WRONG WITH THE OLD CHIPS, and each is fixed by taking shadcn's
   metric instead of the invented one:

     · THE FOUR STATES WERE DISTINGUISHED BY BORDER TINT — color-mix at 46%,
       68%, 45% — which produced three nearly identical washed frames. Worse, it
       made `cited` and `unsourced` look DEGRADED relative to `grounded`, and
       STORY.md is explicit that `cited` is the common case and not a failure:
       "unconfirmed is not untrue." A weaker frame is a verdict, and the frame
       is not entitled to render one.

   SUPERSEDED 2026-08-30 — the shadcn badge metric (12px sentence case, h-5,
   one frame, state carried by a dot) is REPLACED by the ratified treatment in
   spec/brand/BRAND-GUIDELINE.html §08/§09, which the founder approved. The
   difference is not cosmetic: the guideline derives the four states from the
   accent law's own two legal light-ground permissions rather than from a
   borrowed component, and that derivation is the reason it wins.

   THE 2x2, and the two axes it turns on:

     axis 1 — gold rule vs neutral rule    -> is there an external warrant?
     axis 2 — filled/solid vs empty/dashed -> is it complete?

     grounded   --warrant solid  + --warrant-wash fill   label --ink
     cited      --warrant solid  + no fill               label --ink
     reasoned   --dim     solid  + no fill               label --dim
     unsourced  --dim     DASHED + no fill               label --ink

   Gold lands on two of four states, not four, which is the scarcity corollary
   the guideline quotes from site.css line 252: "on all four bars it would be
   wallpaper; on one it is a mark." So the accent's PRESENCE is itself the
   fidelity signal.

   THE NEUTRAL IS --dim, NEVER --hair-strong. This is the one measured
   correction the guideline forces on the old chip: --hair-strong is 1.59:1 on
   the light ground and 1.67:1 on the dark, far under WCAG 1.4.11's 3:1 floor
   for a border that DISTINGUISHES ONE STATE FROM ANOTHER. It is legal as a
   decorative divider, which is all the parent uses it for, but it cannot carry
   meaning. --dim is the only neutral in the system that clears 3:1 in both
   registers (5.64 light / 6.54 dark).

   No state is distinguished by colour alone: the label always names the state,
   and rule style and fill vary independently of hue. Padding 3px 8px is the
   one genuinely new number, flagged as such in the guideline — the parent has
   no inline chip to inherit from, and its standalone controls sit at 9-10px
   vertical padding, far too tall to ride inside a line of prose.
   ========================================================================= */
.chip{
  display:inline-flex;width:fit-content;flex:none;
  align-items:center;justify-content:center;gap:6px;
  overflow:hidden;white-space:nowrap;
  padding:3px 8px;border-radius:var(--radius);   /* 2px, not the band pill's 100px */
  border:var(--hairline) solid var(--dim);
  font-family:var(--font-label);font-size:var(--t-label);font-weight:var(--w-label);
  letter-spacing:var(--track-label);text-transform:uppercase;line-height:1;
  color:var(--dim);background:transparent;
  transition:color .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.chip:focus-visible{outline:none;box-shadow:0 0 0 3px var(--warrant-wash);border-color:var(--warrant)}

/* demo.js still emits <span class="dot"> inside the chip it builds, because it
   is shared verbatim with launch/variants/. Under this treatment the STATE IS
   THE RULE AND THE FILL, so the dot is vestigial and is suppressed here rather
   than by forking the script — that keeps the two copies byte-identical and
   keeps the chip's own title attribute (which explains each label on hover). */
.chip .dot{display:none}

/* GROUNDED — the run's own tool opened every source it cited. The highest
   warrant, so both of gold's legal light-ground permissions are spent at once,
   and it is the only state that gets the wash. */
.chip[data-fidelity="grounded"]{border-color:var(--warrant);background:var(--warrant-wash);color:var(--ink)}
/* CITED — warrant exists but is external: a pointer, not the thing. The mark
   without the emphasis. THE COMMON CASE, and not a lesser grounded. */
.chip[data-fidelity="cited"]{border-color:var(--warrant);color:var(--ink)}
/* REASONED — no search, by design, so there is no external warrant to mark and
   the accent is CORRECTLY ABSENT. Complete and honest, just unwarranted. */
.chip[data-fidelity="reasoned"]{border-color:var(--dim);color:var(--dim)}
/* UNSOURCED — a claim missing its source: the rule is literally not closed. The
   ink label gives it weight without a danger colour the system does not have,
   and deliberately does not read as a warning. */
.chip[data-fidelity="unsourced"]{border-color:var(--dim);border-style:dashed;color:var(--ink)}

/* the legend renders the same component at the same size — a legend that draws
   its own special version of a thing is a legend for a thing that isn't there */
.chip-row{display:flex;align-items:center;gap:.55rem;min-width:0}

/* ---- the reach marker — SHOWN, not described ------------------------------
   Which verbs touch the network is a claim the page used to make in prose
   ("The two that reason never touch the network"). It is a property of each
   verb, so it is drawn on each verb.

   THREE STATES, NOT TWO — spec/brand/BRAND-GUIDELINE.html §08. shared/types.ts
   declares `toolPolicy?: 'none' | 'web-indexed' | null`, and its comment is
   explicit that null means "not recorded" and is NEVER coerced to 'none'. A
   two-state dot would force exactly that coercion, rendering "we never
   recorded this" as "local only" — a silent guess, in a repo whose stated law
   is that a missing capability fails visibly. The launch page only ever has
   cause to render the first two; `unrecorded` is defined so that no surface
   inheriting this sheet has to invent it, or worse, collapse it into 'none'.

     web         6px filled disc, --warrant   'web-indexed'   3.10 light / 7.65 dark
     local       6px ring, solid --dim        'none'          5.64 light / 6.54 dark
     unrecorded  6px ring, DASHED --dim       null            5.64 light / 6.54 dark

   --dim, not --mid: --mid is 2.50:1 on the light ground and cannot carry
   meaning (see the chip block above for the full measurement).

   The dot is a ::before rather than the guideline's child <span>, which is the
   stronger form of its own "the dot never travels alone" rule — the mark is
   pure CSS and invisible to assistive tech, and the element's own text is the
   accessible name. A bare dot with no label must never be shipped. */
.reach{
  font-family:var(--font-label);font-size:var(--t-label);font-weight:var(--w-label);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--dim);
  display:inline-flex;align-items:center;gap:7px;line-height:1;white-space:nowrap;
}
.reach::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;box-sizing:border-box;
  background:var(--warrant);
}
.reach[data-reach="local"]::before{background:transparent;box-shadow:inset 0 0 0 var(--hairline) var(--dim)}
.reach[data-reach="unrecorded"]::before{background:transparent;box-shadow:none;
  border:var(--hairline) dashed var(--dim)}

/* ============================================================================
   THE LIVE SURFACE — the canned demo

   .surface is a CONTAINER, and that is the fix for the defect the brief calls
   "the right column struggling to render". The old rule was:

       @media (max-width:860px){ .surface-body{grid-template-columns:1fr} }

   A VIEWPORT query governing a CONTAINER-CONSTRAINED layout. In variant A the
   demo does not get the viewport — it gets the viewport minus a 29rem rail
   minus two gutters. At a 1024px viewport that is ~478px of container, but the
   media query does not fire until 860px of VIEWPORT, so the margin held its
   fixed 18.5rem (296px) and the document pane was crushed to ~180px: three or
   four words a line, the return card unreadable. The layout was being told
   about a width it did not have.

   container-type:inline-size + @container asks the actual box. Same rule, right
   question, and it now also works when the margin is dragged narrow.
   ========================================================================= */
.surface{
  container-type:inline-size;
  border:var(--hairline) solid var(--hair-strong);
  background:var(--raised);
  border-radius:var(--radius);
  overflow:hidden;
  min-width:0;
}
.surface-bar{
  display:flex;align-items:center;gap:.55rem;padding:.55rem .9rem;
  background:var(--sunk);border-bottom:var(--hairline) solid var(--hair);
  font-family:var(--font-label);font-size:var(--t-label);font-weight:var(--w-label);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--dim);
  min-width:0;
}
.surface-bar .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.surface-bar .dot{width:6px;height:6px;border-radius:50%;background:var(--warrant);flex:none}

/* --margin-w is written by the divider and persisted. The clamp is the safety:
   the document pane can never be driven below a usable measure. */
.surface-body{
  display:grid;
  grid-template-columns:minmax(12rem,1fr) auto minmax(0,var(--margin-w,18.5rem));
  min-height:22rem;
}
/* a grid item's default min-width is auto, which lets content push a track wider
   than its share and is the usual source of a phantom horizontal scrollbar */
.surface-body > .pane{min-width:0}

/* the reading pane — prose face, at the reading size */
.doc{
  padding:1.4rem 1.5rem .3rem;min-width:0;
  font-family:var(--font-prose);font-size:var(--t-prose);line-height:1.56;
  color:var(--ink-soft);outline:none;
}
.doc h3{font-size:var(--t-sub);margin:0 0 .15rem}
.doc .sub{
  /* sans, because it is a caption — it identifies the document, it is not part
     of it. At 12px it is nowhere near the serif's collision line. */
  font-family:var(--font-display);font-size:var(--t-meta);font-style:normal;
  color:var(--dim);margin:0 0 1rem;letter-spacing:.01em;
}
.doc p{margin:0 0 .8rem}
.doc p:last-child{margin-bottom:.8rem}

/* an unasked claim — the affordance. Gold UNDERLINES it; gold does not colour
   the characters, which stay ink. This is the accent law at its most literal. */
.doc [data-claim]{
  cursor:text;text-decoration:underline;text-decoration-style:dotted;
  text-decoration-thickness:1px;text-underline-offset:3.5px;
  text-decoration-color:var(--warrant);
  transition:background-color .16s ease;
  border-radius:1px;
}
.doc [data-claim]:hover{background:var(--warrant-wash)}
.doc:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--warrant-wash)}
.doc ::selection{background:var(--warrant-wash)}

.caret{
  font-family:var(--font-display);font-size:var(--t-meta);color:var(--dim);
  margin:.3rem 0 0;padding:0 1.5rem;
}
.verbs{display:flex;gap:.4rem;flex-wrap:wrap;padding:.7rem 1.5rem 1.1rem;align-items:center}
.verb{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-display);font-size:var(--t-ui-lg);font-weight:500;
  height:30px;padding:0 .65rem;border:var(--hairline) solid var(--hair-strong);
  border-radius:var(--radius);background:var(--raised);cursor:pointer;color:var(--ink-soft);
  transition:color .14s ease,border-color .14s ease,background-color .14s ease;
}
.verb:disabled{opacity:.4;cursor:not-allowed}
.verb:not(:disabled):hover{border-color:var(--warrant);background:var(--warrant-wash);color:var(--ink)}
/* the verb's own reach dot — the same three-state vocabulary as .reach above,
   at the same 6px, and neutral is --dim rather than --mid for the same
   measured reason. A verb button carries a visible label, so the dot is
   decorative here and takes no accessible name of its own. */
.verb .rdot{width:6px;height:6px;border-radius:50%;background:var(--warrant);flex:none;box-sizing:border-box}
.verb[data-reach="local"] .rdot{background:transparent;box-shadow:inset 0 0 0 var(--hairline) var(--dim)}
.verb[data-reach="unrecorded"] .rdot{background:transparent;box-shadow:none;
  border:var(--hairline) dashed var(--dim)}

/* ---- THE DIVIDER — one primitive, used for every adjustable rail ----------
   A real separator: pointer-draggable, keyboard-operable, and announced. The
   grid track it sits in is `auto`, so it takes exactly its own width and the
   two panes divide the rest. */
.sep{
  width:9px;margin:0 -4px;cursor:col-resize;background:transparent;
  border:0;padding:0;position:relative;z-index:2;touch-action:none;
  align-self:stretch;flex:none;
}
.sep::before{
  content:"";position:absolute;inset-block:0;left:4px;width:var(--hairline);
  background:var(--hair);transition:background-color .16s ease,box-shadow .16s ease;
}
.sep:hover::before,.sep[data-dragging]::before{background:var(--warrant);box-shadow:0 0 0 1px var(--warrant-wash)}
.sep:focus-visible{outline:none}
.sep:focus-visible::before{background:var(--warrant);box-shadow:0 0 0 2px var(--warrant-wash)}
body[data-resizing]{cursor:col-resize;user-select:none}
body[data-resizing] *{user-select:none!important}

/* the margin — where returns land */
.margin{
  border-left:var(--hairline) solid var(--hair);
  background:var(--sunk);padding:.85rem;min-width:0;overflow:hidden;
}
.tcard{
  background:var(--raised);border:var(--hairline) solid var(--hair-strong);
  border-radius:var(--radius);padding:.8rem;min-width:0;
}
.tcard-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.55rem;min-width:0}
.tcard-verb{
  font-family:var(--font-display);font-weight:600;font-size:var(--t-label);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;
}
/* the return body is READING — prose face, and at the floor, never under it */
.tcard .body{
  font-family:var(--font-prose);font-size:var(--t-prose-s);line-height:1.48;
  color:var(--ink-soft);margin:0 0 .55rem;
}
.quoted{
  font-family:var(--font-prose);font-size:var(--t-prose-s);font-style:italic;
  line-height:1.4;color:var(--dim);
  border-left:2px solid var(--warrant);padding-left:.6rem;margin:0 0 .6rem;
  overflow-wrap:anywhere;
}
/* metadata is IDENTIFYING — sans, 12px, well clear of the collision line */
.src{
  font-family:var(--font-display);font-size:var(--t-meta);color:var(--dim);
  line-height:1.45;overflow-wrap:anywhere;
}
.empty{
  font-family:var(--font-display);font-size:var(--t-ui);color:var(--dim);
  line-height:1.5;padding:.4rem;
}

/* ---- the container query. Asks the SURFACE's width, not the window's. -----
   740px is derived, not picked: the margin needs ~280px before a return card
   stops wrapping every other word, and the document needs ~45 characters of
   19px EB Garamond, which is ~370px. 280 + 370 + the divider and the doc's own
   48px of padding lands just over 700. Below that the two panes cannot both be
   usable, so they stop being two panes. */
@container (max-width:740px){
  .surface-body{grid-template-columns:minmax(0,1fr)}
  .sep{display:none}
  .margin{border-left:0;border-top:var(--hairline) solid var(--hair)}
}

/* ============================================================================
   THE COMPARISON — the page's central claim, SHOWN

   STORY.md: "An answer built on three checked sources reads exactly like one
   the model half-remembered — same confident paragraph, same tone." The old
   page ASSERTED that in a paragraph and then listed four chip definitions.
   Here the two cards carry the same sentence answered two ways, side by side,
   with the chip as the only difference between them. The reader sees that the
   prose is indistinguishable and the label is not — which is the argument, made
   rather than claimed. The register law calls for exactly this
   (spec/LAUNCH.md: "everything SHOWN not told").
   ========================================================================= */
.compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1rem}
.compare .tcard{min-height:100%}
.cmp-note{
  font-family:var(--font-display);font-size:var(--t-meta);color:var(--dim);
  margin-top:.75rem;
}

/* ---- definition list ------------------------------------------------------ */
.deflist{margin:0;padding:0;list-style:none;max-width:46rem}
.deflist li{
  display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:1rem;padding:.75rem 0;
  border-top:var(--hairline) solid var(--hair);align-items:baseline;
}
.deflist li>:first-child{
  font-family:var(--font-display);font-weight:600;font-size:var(--t-ui-lg);color:var(--ink);
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
}
/* the description is READ — prose, at the floor */
.deflist li>:last-child{
  font-family:var(--font-prose);font-size:var(--t-prose-s);line-height:1.45;color:var(--ink-soft);
}
.deflist.chips li{grid-template-columns:9rem minmax(0,1fr)}
.deflist.chips li>:first-child{align-items:center}

/* ============================================================================
   THE SUGGESTION — item 2, more show-don't-tell.

   Authorship ("nothing arrives in your draft that you didn't put there") was
   the one claim on the page still argued in prose only, with no adjacent
   demonstration — everywhere else on the page shows its mechanic (the live
   surface, the two-cards comparison); this one just asserted its mechanic.
   This renders an actual proposed suggestion exactly as the app would hold
   it: the original line, a real diff (struck / inserted), and the two
   controls that are the whole claim — Accept, Reject, neither pre-chosen.
   Disabled here for the honest reason stated in the caption: a static page
   cannot hold accepted/rejected state across a reload, and pretending it
   could would be the same kind of overclaim STORY.md forbids elsewhere.
   ========================================================================= */
.sug-line{
  font-family:var(--font-prose);font-size:var(--t-prose-s);line-height:1.5;
  color:var(--dim);margin:0 0 .7rem;
}
.sug-card{
  background:var(--raised);border:var(--hairline) solid var(--hair-strong);
  border-radius:var(--radius);padding:.9rem 1rem;max-width:42rem;
}
.sug-head{display:flex;align-items:center;gap:.55rem;margin-bottom:.7rem}
.sug-head .tcard-verb{
  font-family:var(--font-display);font-weight:600;font-size:var(--t-label);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink);
}
.sug-head .sug-what{
  font-family:var(--font-display);font-size:var(--t-meta);color:var(--dim);
}
.sug-diff{
  font-family:var(--font-prose);font-size:var(--t-prose-s);line-height:1.55;
  margin:0 0 .9rem;
}
.sug-diff .del{
  display:block;color:var(--dim);text-decoration:line-through;
  text-decoration-color:var(--mid);text-decoration-thickness:1px;
  margin:0 0 .35rem;
}
.sug-diff .ins{
  display:block;color:var(--ink);
  background:var(--warrant-wash);border-radius:1px;
  padding:.05em .15em;margin:0 -.15em;
}
.sug-actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.sug-btn{
  font-family:var(--font-display);font-size:var(--t-ui-lg);font-weight:600;
  height:34px;padding:0 .9rem;border-radius:var(--radius);
  border:var(--hairline) solid var(--hair-strong);background:var(--raised);
  cursor:not-allowed;
}
.sug-accept{color:var(--ink)}
.sug-reject{color:var(--dim)}
.sug-note{
  font-family:var(--font-display);font-size:var(--t-meta);color:var(--dim);
  line-height:1.4;flex-basis:100%;margin-top:.15rem;
}

/* ---- pull quote · founder note -------------------------------------------- */
.pull{
  font-family:var(--font-prose);font-size:var(--t-lede);line-height:1.38;
  color:var(--ink);max-width:26em;text-wrap:balance;
}
/* font-size on the BLOCKQUOTE, not only on its p: `max-width:34em` resolves
   against the element's OWN font-size, and the blockquote was inheriting the
   13px sans body default — so 34em computed to 442px instead of the intended
   646px and the founder's note rendered in a column roughly two-thirds too
   narrow. The child p re-declares the same size, so nothing else moves. */
blockquote.note-from{padding:0 0 0 1.15rem;border-left:2px solid var(--warrant);
  font-size:var(--t-prose);max-width:34em}
blockquote.note-from p{
  font-family:var(--font-prose);font-size:var(--t-prose);line-height:1.5;color:var(--ink-soft);
}
blockquote.note-from p+p{margin-top:.72em}
.sig{
  font-family:var(--font-display)!important;font-size:var(--t-meta)!important;
  color:var(--dim)!important;margin-top:1rem!important;letter-spacing:.02em;
}

/* ---- FAQ ------------------------------------------------------------------ */
details{border-top:var(--hairline) solid var(--hair);padding:.85rem 0;max-width:46rem}
details summary{
  cursor:pointer;font-family:var(--font-display);font-weight:500;font-size:var(--t-ui-lg);
  color:var(--ink);list-style:none;display:flex;gap:.65rem;align-items:baseline;
}
details summary::-webkit-details-marker{display:none}
/* --warrant-text, NOT --warrant. The +/- is a CHARACTER, and the accent law is
   that gold marks but does not set characters: --warrant is 3.10:1, legal for a
   rule and illegal for a glyph. --warrant-text is 4.78:1 and clears AA, and the
   summary sets 14px, which is exactly the house floor for it. */
details summary::before{content:'+';color:var(--warrant-text);font-weight:600;flex:none;line-height:1}
details[open] summary::before{content:'–'}
/* the answer is READ — prose face, prose size */
details .a{
  font-family:var(--font-prose);font-size:var(--t-prose-s);line-height:1.5;
  margin:.6rem 0 0 1.3rem;color:var(--ink-soft);max-width:var(--measure);
}

/* ---- the terms note ------------------------------------------------------- */
.note{
  background:var(--sunk);border:var(--hairline) solid var(--hair);
  border-radius:var(--radius);padding:1rem 1.15rem;max-width:46rem;
}
.note p{
  font-family:var(--font-prose);font-size:var(--t-prose-s);line-height:1.48;
  margin:0;color:var(--ink-soft);
}
.note p+p{margin-top:.6rem}
.note strong{font-weight:500;color:var(--ink)}
.fine{
  font-family:var(--font-display);font-size:var(--t-meta);color:var(--dim);line-height:1.5;
}

/* ---- nav ------------------------------------------------------------------ */
.nav{display:flex;gap:.2rem;flex-wrap:wrap}
.nav a{
  position:relative;font-family:var(--font-label);font-size:var(--t-label);
  font-weight:var(--w-label);letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--dim);text-decoration:none;padding:8px 10px;
}
.nav a::after{
  content:"";position:absolute;left:10px;right:10px;bottom:3px;height:var(--hairline);
  background:var(--warrant);transform:scaleX(0);transition:transform .18s ease;
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}

/* THE NAV'S OWN "TRY" — item 8. The other three nav links scroll the page;
   this one leaves it, for a different surface entirely, so it does not share
   their underline-on-hover affordance (that would say "section," which this
   isn't). A hairline gold RING marks it as the one link in the nav that
   goes somewhere else — the ring is a rule, not text, so the accent law's
   "gold marks, it does not set characters" holds even here. */
.nav a.nav-try{
  color:var(--ink);font-weight:600;
  border:var(--hairline) solid var(--warrant);border-radius:var(--radius);
  padding:7px 10px;margin-left:.3rem;
}
.nav a.nav-try::after{display:none}
.nav a.nav-try:hover{background:var(--warrant-wash);color:var(--ink)}

.brand{display:flex;align-items:center;gap:.55rem}
.brand img{width:var(--mark-size);height:var(--mark-size);border-radius:5px}
.brand span{
  font-family:var(--font-display);font-weight:600;font-size:var(--t-ui-lg);
  letter-spacing:-.02em;color:var(--ink);
}

footer{
  font-family:var(--font-display);font-size:var(--t-meta);color:var(--dim);
  border-top:var(--hairline) solid var(--hair);line-height:1.6;
}
footer a{text-decoration:none;border-bottom:var(--hairline) solid var(--hair-strong)}
footer a:hover{color:var(--ink)}

/* The .switch review fixture (A/B · face · light-dark) was REMOVED from this
   copy on 2026-08-30. It is a property of the comparison, not of the page, and
   the shipped surface has no switcher to style. It remains in the fixture copy
   at launch/variants/system.css, which is where it belongs. */

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}