/* ============================================================================
   vdesktop.com — design system
   Iris, 2026-08-29. Specified for Wren to build from. No build step, no JS.

   THE ONE-SENTENCE IDEA: the page is documents in a machine. The chrome is
   cool near-black; the reading matter sits on warm paper. Every other decision
   below falls out of that, including why there is no brand colour.

   WHAT WAS TAKEN FROM THE REFERENCE (certificationpractice.com) AND WHAT WAS
   NOT is written up in the handback. Short version: banded full-bleed sections,
   eyebrow-above-heading, ruled panels, right-aligned spec values. NOT taken:
   its palette, its gradients, its pastel washes, its type settings, and every
   Anthropic/Claude-adjacent asset on it.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* COLOUR. Two families and two verdicts. There is deliberately no brand
     colour: on a page whose entire subject is what was checked, the only
     saturated pixels should be verdicts. A decorative accent here would be
     the loudest thing on screen and would mean nothing. */

  /* the machine — cool near-black, chrome and verdicts */
  --ink:          #0B0F14;
  --ink-raise:    #121821;
  --ink-line:     #1E2732;
  --ink-line-soft:#161D26;
  --ink-text:     #DCE3EB;
  --ink-dim:      #8794A3;

  /* the document — warm paper, all long-form reading */
  --paper:        #F4F2ED;
  --paper-raise:  #FBFAF7;
  --paper-line:   #DED9CF;
  --paper-text:   #17191C;
  --paper-dim:    #5C6068;

  /* verdicts. Two of each because the same meaning has to survive both grounds.
     Contrast measured against its own ground, not assumed. */
  --verified:     #1E7A50;   /* on paper  — 4.9:1 */
  --verified-on:  #4FCB8B;   /* on ink    — 8.6:1 */
  --held:         #8A5F12;   /* on paper  — 5.2:1 */
  --held-on:      #E9B949;   /* on ink    — 10.4:1 */

  /* TYPE. Three families, each with a job it is the best available tool for.
     Instrument Sans — chrome, headings, labels, anything being scanned.
     Literata      — long-form only. It exists because someone measured screen
                     reading; this page is 2,400 words of it.
     IBM Plex Mono — file names, exit codes, versions, byte counts. The copy is
                     full of these and setting them in the body face loses the
                     one signal that says "this is a literal value". */
  --sans:  "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Literata", Charter, "Bitstream Charter", "Iowan Old Style", Georgia, serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* SCALE. Nine steps, ~1.2 ratio through the middle, opened at the top.
     --t-read is the one that matters and everything else was chosen around it. */
  --t-micro: 12px;   /* mono kickers, uppercase, tracked out */
  --t-xs:    13px;
  --t-sm:    15px;
  --t-base:  16px;
  --t-read:  19px;   /* Literata body. Large x-height, so this is not big. */
  --t-lead:  22px;
  --t-h3:    22px;
  --t-h2:    34px;
  --t-h1:    46px;

  /* LEADING. Stated as tokens because the reference's single worst defect is a
     leading rule: it ships 48px/48px and 60px/60px on display headings, and
     descenders collide on its own live page. Nothing here goes below 1.12. */
  --lh-display: 1.14;
  --lh-head:    1.2;
  --lh-read:    1.62;  /* 19px -> 30.8px */
  --lh-ui:      1.5;

  /* SPACE. Inherited from the house scale in desktop/site/index.html so that
     vDesktop and the product it publishes are built on the same skeleton.
     A family resemblance between publisher and product supports the claim the
     page is making; it does not undermine it. */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 20px;
  --s6: 24px;  --s8: 32px;  --s10: 40px; --s12: 48px; --s16: 64px;
  --s20: 80px; --s24: 96px; --s32: 128px;

  --r-sm: 4px;  --r-md: 8px;  --r-lg: 12px;

  /* GRID.
     --shell   the outer cap. Content stops growing; bands never do.
     --measure the reading column.
     --rail    the left margin the section numbers hang in.

     --measure IS IN PIXELS ON PURPOSE AND THIS COST A RENDER TO FIND.
     It was written `34em`, which reads as "34 times the reading size". It is
     not: `em` on a max-width resolves against the ELEMENT'S OWN font-size, and
     the element carrying it is the 16px column wrapper, not the 19px
     paragraph. The column came out 544px — about 60 characters where 66 was
     specified, which is a materially faster line and a materially more
     tiring read over 2,400 words. Nothing about it looked wrong in the
     source. Measured on the rendered page, then set as a real number. */
  --gutter:  clamp(20px, 5vw, 40px);
  --shell:   min(1160px, 100% - var(--gutter) * 2);
  /* 580px. Counted off the rendered page, not estimated: Literata at 19px
     averages ~8.6px a character here, so this is ~67 characters — Bringhurst's
     66 for sustained reading, which is what 2,400 words of evidence is. The
     first two attempts landed at 60 and at 72 and both were guesses. */
  --measure: 580px;
  --rail:    132px;   /* fits "EVIDENCE 1/3" at 12px mono without wrapping */
  --rail-gap: 40px;
}

/* -------------------------------------------------------------- baseline -- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--ink-text);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: var(--lh-ui);
  /* Only ever turned on for the display sizes. See --lh-display note. */
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* TOO-LONG IS A STATE, NOT AN ACCIDENT. The longest heading on the site is
   "The installer was asking customers to agree to nothing" and the longest
   inline literal is ".claude/settings.local.json". At 360px both are wider
   than the naive column. These three lines are the floor that stops either
   from ever pushing the page sideways. */
h1, h2, h3, p, li { overflow-wrap: break-word; }
h1, h2, h3        { text-wrap: balance; }
code, .mono       { overflow-wrap: anywhere; }

/* A LITERAL VALUE INSIDE PROSE, without the boxed treatment of <code>. Used for
   byte counts, exit codes and version numbers that sit mid-sentence.
   THIS CLASS WAS REFERENCED IN THE MARKUP AND DEFINED NOWHERE for one render.
   "72 bytes" came out set in the serif body face, indistinguishable from the
   words around it — the page rendered, nothing errored, no assertion could
   have caught it, and it was visible the moment somebody looked at a picture. */
.mono { font-family: var(--mono); font-size: 0.88em; letter-spacing: -0.01em; }

img, svg { max-width: 100%; height: auto; display: block; }

/* NOTHING ON THIS SITE MOVES. There is no motion to reduce, no scroll effect,
   no reveal, no carousel and no script. That is a decision, not an omission:
   nothing here carries information by moving, and a reviewer deciding whether
   this is a real software company is not helped by a fade-in. */

/* ----------------------------------------------------------------- bands -- */
/* A band is full-bleed colour; the content inside it is capped. The joins
   between bands are HARD EDGES with no gradient anywhere on the site. The
   reference blends every section into the next with pastel washes; a hard
   edge is the cheapest available way to not look like that, and it reads as
   a document boundary rather than a mood change. */
.band       { width: 100%; }
.band--ink  { background: var(--ink);   color: var(--ink-text); }
.band--paper{ background: var(--paper); color: var(--paper-text); }
.shell      { width: var(--shell); margin-inline: auto; }

/* ------------------------------------------------------------- masthead --- */
.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s6);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--ink-line-soft);
}

/* The wordmark is TYPE, not a logo. vDesktop has no mark and inventing one
   badly is worse than not having one — an original identity is a human
   designer's job and is called out as such in the handback. */
.wordmark {
  font-size: var(--t-base); font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink-text); text-decoration: none;
}
.wordmark span { font-weight: 400; color: var(--ink-dim); }

.mast-nav { display: flex; gap: var(--s6); font-size: var(--t-sm); }
.mast-nav a {
  color: var(--ink-dim); text-decoration: none;
  padding-block: var(--s1);
  border-bottom: 1px solid transparent;
}
.mast-nav a:hover, .mast-nav a:focus-visible { color: var(--ink-text); border-bottom-color: var(--ink-line); }
.mast-nav a[aria-current="page"] { color: var(--ink-text); border-bottom-color: var(--ink-dim); }

/* ------------------------------------------------------------------ hero -- */
.hero { padding-block: var(--s20) var(--s16); }

/* The kicker device: mono, small, uppercase, tracked out, dim. Used for every
   label on the site and never for anything that is not a label. Taken from the
   reference's eyebrow pattern; set in mono rather than its coloured sans,
   because a mono label on this page means "this is machine-legible". */
.kicker {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-dim); margin: 0 0 var(--s5);
}
.band--paper .kicker { color: var(--paper-dim); }

.hero h1 {
  font-size: var(--t-h1); font-weight: 600; line-height: var(--lh-display);
  letter-spacing: -0.021em;
  margin: 0; max-width: 17ch;
  /* 17ch on a 46px face is ~780px — wider than the reading column on purpose.
     A headline is looked at, not read, so it gets its own measure. */
  max-width: min(780px, 100%);
}

.standfirst {
  font-family: var(--serif); font-size: var(--t-lead); line-height: 1.55;
  color: var(--ink-text); margin: var(--s8) 0 0; max-width: 720px;
}

/* ------------------------------------------------------------ fact strip -- */
/* The four-second answer. Every value here is lifted from the copy; nothing is
   inferred. If a value were ever unavailable the whole item is REMOVED — an
   em-dash or a "TBD" in a credibility strip reads as an unfinished site, which
   is the exact accusation this page exists to defeat. */
.facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: var(--s16);
  border-top: 1px solid var(--ink-line);
}
.facts > div {
  padding: var(--s5) var(--s5) 0 0;
  border-right: 1px solid var(--ink-line-soft);
}
.facts > div:last-child { border-right: 0; }
.facts dt {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 400;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-dim);
}
.facts dd {
  margin: var(--s2) 0 0; font-size: var(--t-sm); font-weight: 500;
  line-height: 1.4; color: var(--ink-text);
}
.facts dd.is-held { color: var(--held-on); }

/* Colour never carries meaning alone — the swatch is backed by the word.
   Nadia owns the real audit; this is the floor, not the pass. */
.swatch {
  display: inline-block; width: 7px; height: 7px; border-radius: 1px;
  margin-right: var(--s2); vertical-align: 0.08em;
}
.swatch--held     { background: var(--held-on); }
.swatch--verified { background: var(--verified-on); }
.band--paper .swatch--held     { background: var(--held); }
.band--paper .swatch--verified { background: var(--verified); }

/* ------------------------------------------------------------- document -- */
/* The long-form band. Paper, hard-edged, and the ONLY place body copy lives. */
.doc { padding-block: var(--s24); }

/* THE SPINE. A single hairline running the full height of the document with
   the section numbers hanging on it. It costs one border and it does real
   work: it tells a scanner how long the argument is and where they are in it,
   which is the question a reviewer actually walks up with.

   ONE LEFT EDGE FOR THE WHOLE PAGE, AND THIS WAS WRONG IN THE FIRST RENDER.
   The document was centred on its own width, so the reading column started
   330px in while the masthead and hero started at 140px — and because the
   dark verdict band was centred on a DIFFERENT width again, its section
   number sat 43px to the left of every other section number on the page.
   Two grids pretending to be one. Now every band shares the shell, so the
   masthead, the hero, all six section numbers and the footer sit on a single
   hard left edge running the full height of the page, and the reading column
   hangs off it. The right margin is left empty because nothing belongs
   there. */
.doc-inner { width: var(--shell); margin-inline: auto; }

.sec { display: grid; grid-template-columns: var(--rail) 1fr; gap: var(--rail-gap); }
.sec + .sec { margin-top: var(--s24); }

.sec-rail {
  border-top: 2px solid var(--paper-text);
  padding-top: var(--s3);
}
.sec-no {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.09em; color: var(--paper-text);
}
.sec-tag {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 400;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--paper-dim); margin-top: var(--s2);
}

.sec-body { min-width: 0; max-width: var(--measure); }

.sec h2 {
  font-family: var(--sans);
  font-size: var(--t-h2); font-weight: 600; line-height: var(--lh-head);
  letter-spacing: -0.018em; margin: 0 0 var(--s6);
  color: var(--paper-text);
}

/* Long-form body. Everything about this line is the answer to "the case study
   must be genuinely readable": serif, 19px, 1.62 leading, 34em measure. */
.sec-body p {
  font-family: var(--serif);
  font-size: var(--t-read); line-height: var(--lh-read);
  color: var(--paper-text);
  margin: 0 0 28px;   /* ~0.9 of the leading: a clear break, not a gap */
}
.sec-body p:last-child { margin-bottom: 0; }

/* A short paragraph that is doing the work of a hinge ("All three happened.
   Each one is below.") gets set apart rather than lost in the column. */
.pivot {
  font-family: var(--sans) !important;
  font-size: var(--t-base) !important;
  font-weight: 500;
  line-height: 1.55 !important;
  letter-spacing: 0.005em;
  color: var(--paper-text) !important;
  padding-top: var(--s2);
}

.sec-body strong { font-weight: 600; }
.sec-body em { font-style: italic; }

/* The evidence lead-in. Same device as .props b / .checks b — sans face, 600
   weight, breaks texture from the serif column — but on a whole opening
   paragraph rather than an inline run, because it opens the section instead
   of a list item. Not a new component: same recipe, new position. */
.lead-in {
  font-family: var(--sans);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.004em;
  line-height: 1.5;
  color: var(--paper-text);
}

/* Inline literals. The copy carries file names, exit codes, versions and byte
   counts; in a serif column those are invisible without this. */
code {
  font-family: var(--mono); font-size: 0.86em;
  background: rgba(23,25,28,0.055);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-sm);
  padding: 0.08em 0.32em;
}

/* ---------------------------------------------- the properties stack ------ */
/* THIS IS THE HARDEST PIECE ON THE PAGE: four bulleted items with bold lead-ins
   sitting inside running prose. A plain <ul> with bullet glyphs breaks the
   texture of a serif column and reads as a marketing list.
   The treatment: no bullets, hairline separators, and the lead-in run in in the
   SANS face while the sentence stays serif. Three things that buys —
     1. a scanner can read only the four sans lead-ins and get the whole argument
     2. it reads as a specification, which is what it is
     3. it is visually distinct from the prose without leaving the column */
.props {
  list-style: none; margin: var(--s8) 0; padding: 0 0 0 var(--s6);
  border-left: 2px solid var(--paper-line);
}
.props li {
  font-family: var(--serif); font-size: 18px; line-height: 1.58;
  color: var(--paper-text);
  padding-block: var(--s5);
  border-top: 1px solid var(--paper-line);
}
.props li:first-child { border-top: 0; padding-top: 0; }
.props li:last-child  { padding-bottom: 0; }
.props b {
  font-family: var(--sans); font-weight: 600; font-size: 16px;
  letter-spacing: -0.004em; color: var(--paper-text);
}

/* ------------------------------------------------- the result comparison -- */
/* Same ruled logic as .props, but this content is genuinely tabular — a label
   and a measured result — so it gets columns and mono values. The swatches are
   the semantic colour doing an actual job: the reader sees which row is the
   broken build before reading a word. */
.result {
  width: 100%; border-collapse: collapse;
  margin: var(--s8) 0;
  background: var(--paper-raise);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.result caption {
  caption-side: top; text-align: left;
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--paper-dim);
  padding-bottom: var(--s3);
}
.result th, .result td {
  text-align: left; vertical-align: baseline;
  padding: var(--s5) var(--s5);
  border-top: 1px solid var(--paper-line);
}
.result tr:first-child th, .result tr:first-child td { border-top: 0; }
.result th {
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 500;
  color: var(--paper-text); white-space: nowrap; width: 1%;
}
.result td {
  font-family: var(--serif); font-size: 17px; line-height: 1.5;
  color: var(--paper-text);
}
.result .num { font-family: var(--mono); font-size: 0.88em; }

/* ------------------------------------------------------------- the quote -- */
/* The licence section quotes the three strings the installer WOULD have put in
   front of every person who ran it. They are evidence, so they are set as
   evidence: pulled out of the prose, italic, hairline-ruled, and each on its
   own line so the reader sees there were three separate demands.

   THE WORDING OF THIS COMMENT IS LOAD-BEARING AND IT WAS WRONG UNTIL
   2026-08-29. It used to say the strings were put in front of "a paying
   customer", and said "Section 05" before the evidence sections were
   reordered. Both were stale, and the first was the exact framing the page
   itself had to be rewritten to remove — the product was never published, so
   nobody ever saw that page. A comment that contradicts the copy it styles is
   how the wrong framing gets written back in by whoever reads it next. */
.strings {
  list-style: none; margin: var(--s8) 0; padding: var(--s5) 0 var(--s5) var(--s6);
  border-left: 2px solid var(--paper-line);
  background: var(--paper-raise);
}
.strings li {
  font-family: var(--serif); font-style: italic; font-size: 18px;
  line-height: 1.55; color: var(--paper-text);
}
.strings li + li { margin-top: var(--s3); }

/* ----------------------------------------------------------- the verdict -- */
/* Back to ink. This section is the page's strongest fact and it is the only
   place a saturated colour appears. Lifting it out of the paper band is the
   whole reason the page is banded at all. */
.verdict { padding-block: var(--s20); }
.verdict-grid {
  display: grid; grid-template-columns: var(--rail) 1fr; gap: var(--rail-gap);
  width: var(--shell); margin-inline: auto;
}
.verdict .sec-rail { border-top-color: var(--ink-text); }
.verdict .sec-no   { color: var(--ink-text); }
.verdict .sec-tag  { color: var(--ink-dim); }
.verdict h2 {
  font-size: var(--t-h2); font-weight: 600; line-height: var(--lh-head);
  letter-spacing: -0.018em; margin: 0 0 var(--s6); color: var(--ink-text);
}
.verdict p {
  font-family: var(--serif); font-size: 18px; line-height: 1.6;
  color: var(--ink-text); margin: 0 0 var(--s6); max-width: var(--measure);
}
.verdict p:last-of-type { margin-bottom: 0; }
.verdict code {
  background: rgba(220,227,235,0.07); border-color: var(--ink-line);
  color: var(--ink-text);
}

/* The two-state readout. It is a real pair of verdicts, so it is shown as a
   pair — the go and the no-go beside each other rather than the good news
   first and the caveat below it. */
.states {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-md); overflow: hidden;
  margin: var(--s10) 0;
  max-width: var(--measure);
}
.states > div { background: var(--ink-raise); padding: var(--s6); }
.states dt {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 400;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-dim);
}
.states dd {
  margin: var(--s3) 0 0; font-family: var(--sans);
  font-size: var(--t-lead); font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.2;
}
.states .go     { color: var(--verified-on); }
.states .no-go  { color: var(--held-on); }
.states .note   {
  margin-top: var(--s3); font-family: var(--serif); font-style: normal;
  font-size: var(--t-sm); line-height: 1.5; color: var(--ink-dim); font-weight: 400;
  letter-spacing: 0;
}

/* ------------------------------------------------------------------- cta -- */
/* One link, no button. There is nothing to buy and nothing to download, so a
   filled call-to-action would be promising an action the site cannot deliver.
   An underlined text link with an arrow is the honest control. */
.next {
  display: inline-block;
  font-family: var(--sans); font-size: var(--t-base); font-weight: 500;
  color: var(--paper-text); text-decoration: none;
  border-bottom: 2px solid var(--paper-text);
  padding-bottom: 2px;
}
.next span { margin-left: var(--s3); }
.cta { margin-top: var(--s10); }
.block--tight { padding-top: 0; }

/* The one dim aside under the home standfirst. It was an inline style for one
   render, which is a token leak: Wren would have inherited a hard-coded colour
   with no name and no reason attached to it. */
.subnote {
  font-family: var(--sans); font-size: var(--t-base); line-height: 1.55;
  color: var(--ink-dim); margin: var(--s6) 0 0; max-width: 720px;
}
.band--ink .next { color: var(--ink-text); border-bottom-color: var(--ink-text); }
.next:hover, .next:focus-visible { border-bottom-width: 3px; }

/* ---------------------------------------------------------------- footer -- */
.foot {
  border-top: 1px solid var(--ink-line-soft);
  padding-block: var(--s10);
  display: flex; justify-content: space-between; gap: var(--s6); flex-wrap: wrap;
  font-size: var(--t-sm); color: var(--ink-dim);
}
.foot a { color: var(--ink-dim); }

/* ------------------------------------------------------------------ home -- */
.home-hero { padding-block: var(--s24) var(--s20); }
.home-hero h1 {
  font-size: var(--t-h1); font-weight: 600; line-height: var(--lh-display);
  letter-spacing: -0.021em; margin: 0; max-width: min(760px, 100%);
}

/* Home body sits on paper too — the same reading rules, shorter. */
.block { padding-block: var(--s20); }
.block-grid {
  display: grid; grid-template-columns: var(--rail) 1fr; gap: var(--rail-gap);
  width: var(--shell); margin-inline: auto;
}
.block h2 {
  font-size: var(--t-h2); font-weight: 600; line-height: var(--lh-head);
  letter-spacing: -0.018em; margin: 0 0 var(--s6);
}
.block p {
  font-family: var(--serif); font-size: var(--t-read); line-height: var(--lh-read);
  margin: 0 0 28px; max-width: var(--measure);
}

/* The three checks on the home page. Same ruled stack as .props — one device
   reused, not a second card style invented. Three cards side by side would be
   the reference's move and would make three sentences look like a feature grid. */
.checks { list-style: none; margin: var(--s8) 0 0; padding: 0; max-width: var(--measure); }
.checks li {
  border-top: 1px solid var(--paper-line);
  padding-block: var(--s6);
  font-family: var(--serif); font-size: 18px; line-height: 1.58;
}
.checks li:last-child { border-bottom: 1px solid var(--paper-line); }
.checks b {
  display: block; font-family: var(--sans); font-size: var(--t-base);
  font-weight: 600; letter-spacing: -0.004em; margin-bottom: var(--s2);
}

.aside {
  font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-dim);
  padding-block: var(--s12);
  border-top: 1px solid var(--ink-line-soft);
}

/* --------------------------------------------------------- narrow widths -- */
/* The rail collapses to a line ABOVE the heading rather than shrinking. A
   112px column of nothing beside a 280px reading column is the failure this
   avoids. Checked at 360, 390 and 720. */
@media (max-width: 860px) {
  :root { --t-h1: 34px; --t-h2: 27px; --t-read: 18px; --t-lead: 19px; }
  .sec, .verdict-grid, .block-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .sec-rail { display: flex; gap: var(--s4); align-items: baseline; padding-top: var(--s2); }
  .sec-tag { margin-top: 0; }
  .sec + .sec { margin-top: var(--s16); }
  .doc { padding-block: var(--s16); }
  .hero { padding-block: var(--s12) var(--s10); }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts > div:nth-child(2n) { border-right: 0; }
  .facts > div:nth-child(n+3) { border-top: 1px solid var(--ink-line-soft); margin-top: var(--s4); padding-top: var(--s4); }
  .states { grid-template-columns: 1fr; }
  .result th { white-space: normal; width: auto; }
  .result, .result tbody, .result tr, .result th, .result td { display: block; }
  .result th { padding-bottom: 0; }
  .result td { padding-top: var(--s2); border-top: 0; }
  .result tr + tr th { border-top: 1px solid var(--paper-line); padding-top: var(--s5); }
}

@media (max-width: 420px) {
  :root { --t-h1: 30px; --t-h2: 24px; }
  .facts { grid-template-columns: 1fr; }
  .facts > div { border-right: 0; border-top: 1px solid var(--ink-line-soft);
                 margin-top: var(--s4); padding-top: var(--s4); }
  .facts > div:first-child { border-top: 0; margin-top: 0; }
  .masthead { flex-direction: column; align-items: flex-start; gap: var(--s3); }
}

/* --------------------------------------------------------------- a state -- */
/* PRINT. A partner reviewer may well save this as a PDF, and a page about
   documented work that prints as a black rectangle is an own goal. The ink
   bands invert, the paper band becomes the page, and every link's URL is
   written out because a printed underline points nowhere. */
@media print {
  :root { --paper: #fff; }
  body { background: #fff; color: #000; }
  .band--ink, .verdict, .foot, .masthead, .hero { background: #fff !important; color: #000 !important; }
  .band--ink *, .verdict *, .hero * { color: #000 !important; }
  .facts, .facts > div, .sec-rail, .states, .states > div { border-color: #999 !important; background: #fff !important; }
  .states .go, .states .no-go { color: #000 !important; }
  .swatch { border: 1px solid #000; }
  .mast-nav, .next { display: none; }
  .sec, .verdict-grid { grid-template-columns: 1fr; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
  .sec + .sec { break-inside: avoid-page; }
  h2 { break-after: avoid-page; }
}

/* Focus is visible and it is not the browser default hairline. */
a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px;
}