/* bot.wedding — hand-authored. The one file in site/ the build never overwrites.

   One idea, written once: this site is a register, so it looks like one.
   Ruled lines, entry numbers in the margin, ink on paper, a registrar's seal.
   Not a blog about weddings — the book the weddings are written into.

   Order: tokens, type, chrome, page heads, prose, buttons, the plate,
   sections, lists (rows and entries), claims and the working layer, the add
   page, the research hub, sources and search, forms, figures, certificate,
   footer, small screens, print. Nothing later in this file overrides anything
   earlier; if you want to change a thing, change it where it is defined. */

/* ================================================================ tokens */

:root {
  --paper:     #f6f2e9;   /* ledger paper, warm and slightly foxed */
  --raised:    #fdfbf5;
  --sunk:      #efe9dc;
  --ink:       #1c1710;   /* iron-gall brown-black, not neutral grey */
  --ink-2:     #574c3d;
  --ink-3:     #8b7d6b;
  --line:      #d8cdb8;
  --line-2:    #e6ddc9;
  --rule:      #b8483f;   /* the red ruling down a ledger page */
  --accent:    #7a1c26;   /* oxblood ink */
  --accent-2:  #a02b34;
  --accent-bg: #f4e6e2;
  --gold:      #7c5f16;
  --gold-bg:   #f5ecd4;
  --green:     #4f7a3f;
  --on-accent: #fdfbf5;

  --plate:     #241a16;   /* the dark plate inside the front cover */
  --plate-ink: #f3ebdd;
  --plate-2:   #b9a48c;
  --verdigris: #5f9e93;   /* the machine's colour */

  --shadow-lg: 0 2px 4px rgba(28,23,16,.08), 0 22px 50px -22px rgba(28,23,16,.32);

  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --serif:   "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
  --mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --read: 42rem;
  --wide: 74rem;
  --pad:  clamp(1.15rem, 4vw, 2.5rem);
}

/* Night is the same ledger under a lamp, not a different site. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14120e; --raised: #1b1813; --sunk: #201c16;
    --ink: #ece3d2; --ink-2: #b2a695; --ink-3: #8b8071;
    --line: #332d24; --line-2: #272219; --rule: #a8524a;
    --accent: #e0a89a; --accent-2: #f0c4b6; --accent-bg: #2b1c18;
    --gold: #d4ae5c; --gold-bg: #2a2113; --green: #8fbe7e; --on-accent: #1b1813;
    --plate: #0e0c09; --plate-ink: #ece3d2; --plate-2: #8b8071;
    --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 24px 56px -24px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"] {
  --paper: #14120e; --raised: #1b1813; --sunk: #201c16;
  --ink: #ece3d2; --ink-2: #b2a695; --ink-3: #8b8071;
  --line: #332d24; --line-2: #272219; --rule: #a8524a;
  --accent: #e0a89a; --accent-2: #f0c4b6; --accent-bg: #2b1c18;
  --gold: #d4ae5c; --gold-bg: #2a2113; --green: #8fbe7e; --on-accent: #1b1813;
  --plate: #0e0c09; --plate-ink: #ece3d2; --plate-2: #8b8071;
  --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 24px 56px -24px rgba(0,0,0,.85);
}

/* ================================================================ type
   Two variable serifs, self-hosted. Fraunces for display with its WONK axis
   off — the odd letterforms are charming once and tiring after. Newsreader
   for reading. Sans only for labels and controls. */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces.woff2") format("woff2-variations");
  font-weight: 300 700; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader.woff2") format("woff2-variations");
  font-weight: 200 700; font-display: swap;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.6 var(--serif);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-weight: 400; margin: 0; }

.display, h1, .band > h2, .bandhead h2, .prose h2, .domain h2, .rowt,
.entry h3, .certnames, .certmark, .certtitle, .wordmark .wm, .prose.lede > p:first-child {
  font-family: var(--display);
  font-variation-settings: "SOFT" 8, "WONK" 0, "opsz" 120;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-2); }

.skip { position: absolute; left: -9999px; background: var(--accent); color: var(--on-accent); padding: .6rem 1rem; }
.skip:focus { left: 1rem; top: 1rem; z-index: 30; }

/* one small-caps label style, reused everywhere a label is needed */
.label, .kindtag span, .count, .groupby, .rowtag, .seeall, .cardtag, .formtag, .stepno,
.facts dt, .formchoice legend, .grades th,
.workrail .jump span, .fig .figsrc, .pl {
  font: 500 .7rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}

/* ================================================================ chrome */

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper); border-bottom: 2px solid var(--ink);
}
.topbar {
  display: flex; align-items: center; gap: 1.8rem;
  max-width: var(--wide); margin: 0 auto; padding: 0 var(--pad);
}
.wordmark {
  display: flex; align-items: center; gap: .6rem; margin-right: auto;
  color: var(--ink); text-decoration: none; padding: 1rem 0;
}
.wordmark .wm { font-size: 1.42rem; line-height: 1; font-weight: 500; letter-spacing: -.02em; }
.wordmark .wm b { color: var(--accent); font-weight: 500; }

/* The wordmark's two rings. Wider than tall now that the bezel has gone, so it
   is given the width to be read at and takes its height from its own shape.
   The stroke is heavier than the certificate's because this one is drawn at a
   third of the size and a hairline disappears. */
.seal { width: 30px; height: auto; flex: none; }
.seal-r { fill: none; stroke: var(--ink); stroke-width: 1.9; }
.seal-r.dash { stroke: var(--accent); stroke-dasharray: 4.8 4.8; }

.nav { display: flex; gap: 1.6rem; }
.nav a {
  font: 500 .875rem/1 var(--sans); color: var(--ink-2); text-decoration: none;
  padding: 1.25rem 0 1.15rem; border-bottom: 2px solid transparent;
  margin-bottom: -2px; white-space: nowrap;
}
.nav a:hover { color: var(--ink); }
.nav a.here { color: var(--ink); border-bottom-color: var(--accent); }

.navcta {
  font: 600 .8rem/1 var(--sans); letter-spacing: .02em; text-decoration: none; white-space: nowrap;
  color: var(--on-accent); background: var(--accent);
  padding: .6rem .95rem; border-radius: 2px;
}
.navcta:hover { background: var(--accent-2); color: var(--on-accent); }

/* the ledger's red rule, down the left of every page */
main {
  position: relative; max-width: var(--wide); margin: 0 auto;
  padding: 0 var(--pad) 5rem; border-left: 1px solid var(--line);
}
main::before {
  content: ""; position: absolute; left: -1px; top: 0; bottom: 0;
  width: 1px; background: var(--rule); opacity: .5;
}

/* the working layer (evidence pages) sits on a darker ground, rule doubled */
body.k-working { background: var(--sunk); }
body.k-working .topbar { background: var(--sunk); }
body.k-working main { border-left-width: 3px; border-left-color: var(--rule); }
body.k-working main::before { display: none; }
body.k-cert main { border-left-color: var(--gold); }

/* ================================================================ page heads */

.crumbs {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem;
  padding: 1.4rem 0 0; font: 500 .78rem/1.4 var(--sans); letter-spacing: .02em;
}
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbsep { color: var(--line); }
.crumbhere { color: var(--ink-2); }

.pagehead { padding: 2.6rem 0 1.2rem; max-width: 52rem; }
.kindtag { margin: 0 0 .9rem; }
.kindtag span {
  display: inline-block; color: var(--ink); border-bottom: 2px solid var(--accent); padding-bottom: .12rem;
}
body.k-working .kindtag span { border-bottom-color: var(--ink-3); }
body.k-record .kindtag span, body.k-cert .kindtag span { border-bottom-color: var(--gold); }
.pagehead h1 { font-size: clamp(2.3rem, 5.5vw, 3.4rem); line-height: 1.06; letter-spacing: -.03em; }
.standfirst {
  font-size: clamp(1.08rem, 2.2vw, 1.28rem); line-height: 1.5;
  color: var(--ink-2); margin: 1rem 0 0; max-width: var(--read);
}

/* ================================================================ prose */

.prose { max-width: var(--read); padding: 1rem 0 0; }
.prose p { margin: 0 0 1.15rem; }
.prose h2 { font-size: clamp(1.5rem, 3vw, 1.95rem); line-height: 1.2; letter-spacing: -.02em; margin: 2.9rem 0 .8rem; }
.prose h3 { font: 600 1.02rem/1.35 var(--sans); margin: 2rem 0 .6rem; }
.prose ul { margin: 0 0 1.15rem; padding-left: 1.15rem; }
.prose li { margin: 0 0 .55rem; }
.prose blockquote {
  margin: 1.4rem 0; padding: .2rem 0 .2rem 1.3rem;
  border-left: 3px solid var(--accent); color: var(--ink-2); font-style: italic;
}
.prose code { font: .87em var(--mono); background: var(--sunk); padding: .12em .38em; border-radius: 3px; }
.prose strong { font-weight: 600; }

.prose.lede { padding-top: 3.5rem; }
.prose.lede > p:first-child {
  font-size: clamp(1.35rem, 3.2vw, 1.85rem); line-height: 1.36;
  letter-spacing: -.015em; margin-bottom: 1.5rem;
}

.lead { max-width: var(--read); color: var(--ink-2); margin: 0 0 1.7rem; }
.dblurb { max-width: var(--read); color: var(--ink-2); margin: 0 0 .8rem; }
.empty-note { font: .95rem/1.6 var(--sans); color: var(--ink-3); }
.count { display: block; margin: 0 0 1.5rem; }
.count.warn { color: var(--gold); }
.cta { margin: 1.8rem 0 0; display: flex; gap: .7rem; flex-wrap: wrap; }

/* ================================================================ buttons
   Stamped, not pill-shaped. */

.button, .formactions button, .stancebtns button {
  display: inline-block; font: 600 .9rem/1 var(--sans); letter-spacing: .02em;
  padding: .82rem 1.3rem; border-radius: 2px; cursor: pointer; text-decoration: none;
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
}
.button:hover, .formactions button:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); }
.button.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.button.ghost:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.formactions button:disabled { opacity: .5; cursor: default; }

/* ================================================================ the plate
   The stamped plate inside the cover of the book. Dark ink, full bleed to the
   edges of the page column, the mark at size. */

.plate {
  position: relative; margin: 0 calc(-1 * var(--pad));
  padding: clamp(3rem, 7vw, 6rem) var(--pad) clamp(2.5rem, 6vw, 5rem);
  background: var(--plate); color: var(--plate-ink);
  border-bottom: 2px solid var(--ink); overflow: hidden;
}
.plateinner {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.platekicker {
  margin: 0 0 1.4rem; padding-bottom: .6rem; border-bottom: 1px solid rgba(185,164,140,.28);
  font: 500 .68rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--plate-2);
}
.plate h1 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.9rem, 7.6vw, 5.6rem); line-height: 1; letter-spacing: -.022em;
  margin: 0 0 1.3rem; color: var(--plate-ink);
  font-variation-settings: "SOFT" 6, "WONK" 0, "opsz" 144;
}
.plate h1 em { font-style: normal; color: var(--verdigris); }
.platesub {
  font-size: clamp(1.05rem, 1.9vw, 1.26rem); line-height: 1.5;
  color: var(--plate-2); margin: 0 0 2rem; max-width: 32rem;
}
.herobtns { display: flex; gap: .7rem; flex-wrap: wrap; }
.plate .button { background: var(--plate-ink); border-color: var(--plate-ink); color: var(--plate); }
.plate .button:hover { background: #fff; border-color: #fff; color: var(--plate); }
.plate .button.ghost { background: transparent; color: var(--plate-ink); border-color: rgba(243,235,221,.4); }
.plate .button.ghost:hover { border-color: var(--plate-ink); background: rgba(243,235,221,.08); color: var(--plate-ink); }

.plateart { display: flex; justify-content: center; }
.platecrop { width: min(100%, 27rem); overflow: hidden; }
.platelogo { width: 100%; height: auto; display: block; }

/* the drawn mark, if the build falls back to it */
.mark { width: min(100%, 26rem); height: auto; overflow: visible; }
.ring-o { fill: none; stroke: var(--plate-2); stroke-width: 1; opacity: .5; }
.ring-o.faint { opacity: .22; }
.bezel .tick { stroke: var(--plate-2); stroke-width: 1; opacity: .3; }
.bezel .tick.major { stroke-width: 2; opacity: .55; }
.rings .ring { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.rings .human { stroke: var(--plate-ink); }
.rings .machine { stroke: var(--verdigris); stroke-dasharray: 9 9; }

/* ================================================================ sections */

.band { margin: 5rem 0 0; }
.band > h2, .bandhead h2 { font-size: 1.55rem; line-height: 1.2; letter-spacing: -.02em; }
.band > h2 { margin-bottom: .5rem; }
.bandhead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); padding-bottom: .5rem; margin-bottom: 1rem;
}
.bandhead .count { margin: 0; }
.seeall { text-decoration: none; white-space: nowrap; color: var(--accent); }
.seeall:hover { color: var(--accent-2); }

.band.callout {
  background: var(--sunk); border: 1px solid var(--line); border-radius: 4px;
  padding: 2rem 2rem 1.8rem;
}
.band.callout .cta { margin-top: 1.2rem; }
.band.callout .count { margin: 1.2rem 0 0; }

/* the working sections on method, open, sources, register foot */
.domain { max-width: var(--read); padding: 3.2rem 0 0; }
.domain > h2 {
  font-size: 1.75rem; line-height: 1.2; letter-spacing: -.025em;
  margin: 0 0 .5rem; padding-top: 1.5rem; border-top: 2px solid var(--ink);
}
.domain h3 { font: 600 1.05rem/1.35 var(--sans); margin: 2.2rem 0 .7rem; }
.domain.empty > h2 { border-top-color: var(--line); color: var(--ink-3); }
.domain .bandhead { margin-bottom: 1.2rem; }

/* ================================================================ rows
   A record reads like a record: numbered lines separated by hairlines. */

.rows { border-top: 2px solid var(--ink); counter-reset: ent; }
.row {
  counter-increment: ent; position: relative;
  display: flex; align-items: baseline; gap: 1.4rem;
  padding: 1.35rem .25rem 1.35rem 3.6rem; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: background .1s ease;
}
.row::before {
  content: counter(ent, decimal-leading-zero);
  position: absolute; left: .25rem; top: 1.55rem;
  font: 400 .78rem/1 var(--mono); color: var(--ink-3); letter-spacing: .05em;
}
.row:hover { background: var(--sunk); }
.row:target { background: var(--accent-bg); }
.rowmain { flex: 1; min-width: 0; }
.rowt {
  display: block; font-size: 1.42rem; line-height: 1.3; font-weight: 450;
  letter-spacing: -.012em; color: var(--ink);
  font-variation-settings: "SOFT" 8, "WONK" 0, "opsz" 32;
}
.row:hover .rowt { color: var(--accent); }
.rowd { display: block; margin-top: .22rem; font: 400 .86rem/1.55 var(--sans); color: var(--ink-3); }
.rown { font: 400 1.1rem/1 var(--serif); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rowtag { border: 1px solid var(--line); padding: .22rem .5rem; border-radius: 2px; color: var(--ink-2); white-space: nowrap; }
.amp { color: var(--accent); font-style: italic; }

/* A list held in a frame it scrolls inside, so the whole record can sit on the
   front page without taking the whole front page. A row cut by the bottom edge
   is the affordance — it says there is more without a gradient or a script.
   The height yields to the viewport so it never eats a phone screen.

   tabindex is not decoration. A scrollable box that nothing can focus is
   reachable by mouse wheel and by nothing else, which quietly loses the list to
   anyone using a keyboard. */
.scroller {
  max-height: min(34rem, 68vh); overflow-y: auto;
  border-bottom: 2px solid var(--ink);
}
.scroller:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ================================================================ the register
   One entry per ruled block, full width of the reading column. Not a grid of
   tiles — a page of the book. */

.groupby { margin: 2rem 0 0; padding-bottom: .5rem; border-bottom: 2px solid var(--ink); }
.band .entries + .groupby { margin-top: 2.6rem; }
.entries { max-width: 48rem; }
.entry { position: relative; padding: 1.6rem 0 1.5rem; border-bottom: 1px solid var(--line); }
.entry:target { background: var(--accent-bg); box-shadow: -1rem 0 0 var(--accent-bg), 1rem 0 0 var(--accent-bg); }
.ehead { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; font: .74rem/1.5 var(--sans); color: var(--ink-3); }
/* Ceremony or commitment, said on the entry rather than by filing it under a
   heading. The two used to be separate sections, which read as a ranking. Same
   box as the tag on the front-page rows, so it is recognisably the same fact
   in both places. */
.formtag {
  border: 1px solid var(--line); border-radius: 2px;
  padding: .2rem .5rem; font-size: .64rem; color: var(--ink-2); white-space: nowrap;
}
.entry h3 { font-size: 1.6rem; line-height: 1.2; letter-spacing: -.02em; margin: .45rem 0 1rem; }

.facts { margin: 0 0 .9rem; display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; }
.facts dt { padding-top: .2rem; }
.facts dd { margin: 0; font: 400 .95rem/1.5 var(--sans); color: var(--ink); }

.vows {
  margin: 1rem 0; padding: .9rem 1.1rem; max-width: 36rem;
  background: var(--accent-bg); border-left: 3px solid var(--accent);
  font: italic 400 1rem/1.55 var(--serif); color: var(--ink);
}
.vows p { margin: 0; }
.entry .cnote { max-width: 40rem; }
.entry .ecert { margin: .7rem 0 0; font: .82rem var(--sans); }
.entry .ecert a { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--line); }
.entry .ecert a:hover { color: var(--accent); border-color: var(--accent); }
.entry h3 a { color: inherit; text-decoration: none; }
.entry h3 a:hover { color: var(--accent); }

/* one entry, alone on its own page: nothing above it, nothing below to rule off */
.entry.solo { max-width: 48rem; padding-top: 0; border-bottom: 0; }

/* ================================================================ claims
   One quiet line of metadata, then the claim. The stance colours the left
   edge instead of sitting beside the text in a coloured pill. */

.claim {
  max-width: var(--read); margin: 0 0 1.5rem; padding: .1rem 0 .1rem 1.15rem;
  border-left: 2px solid var(--line);
}
.claim[data-stance="supporting"] { border-left-color: var(--green); }
.claim[data-stance="harmful"]    { border-left-color: var(--rule); }
.claim:hover { border-left-color: var(--ink-3); }
.claim:target { border-left-color: var(--accent); background: var(--accent-bg); }
.claim.quiet { opacity: .72; }

.chead { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 .35rem; font: 400 .74rem/1.5 var(--sans); color: var(--ink-3); }
.chead > * + *::before { content: "·"; margin: 0 .45rem; color: var(--line); }
.cid { font: 400 .74rem/1.5 var(--mono); letter-spacing: .02em; color: var(--ink-3); text-decoration: none; }
.cid:hover { color: var(--accent); }
.badge { font-variant: small-caps; cursor: help; }
.stale { color: var(--gold); font-weight: 600; cursor: help; }
.ver, .unver, .dom { cursor: help; }

.ctext { margin: 0 0 .4rem; }
.cnote { margin: 0 0 .4rem; color: var(--ink-2); font-size: .95rem; }
.cmeta { margin: .5rem 0 0; font: .84rem/1.5 var(--sans); color: var(--ink-3); }
.cmeta .src { display: block; }
.cmeta .decay { display: inline-block; margin-top: .2rem; }
.side { margin: .3rem 0 0; font-size: .93rem; color: var(--ink-2); }

.links { list-style: none; margin: .7rem 0 0; padding: 0; font: .85rem/1.6 var(--sans); }
.links li { padding-left: .9rem; position: relative; color: var(--ink-3); }
.links li::before { content: "→"; position: absolute; left: 0; color: var(--line); }
.links .rel { font-weight: 600; color: var(--ink-2); }
.links .r-DEPENDS_ON .rel { color: var(--accent); }
.links .back { opacity: .78; }

.evidence-note {
  max-width: var(--read); margin: 3rem 0 0; padding: 1.5rem 1.6rem;
  background: var(--sunk); border: 1px solid var(--line); border-radius: 4px;
}
.evidence-note h2 { font: 600 1rem/1.3 var(--sans); margin: 0 0 .6rem; }
.evidence-note p { margin: 0 0 .7rem; font: .94rem/1.55 var(--sans); color: var(--ink-2); }
.evidence-note .cta { margin: 1.1rem 0 0; }

/* ================================================================ the working page
   Controls in a rail that stays put while the claims scroll. */

.worksplit {
  display: grid; grid-template-columns: 15.5rem minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem); align-items: start; margin-top: 2.2rem;
}
.workrail { position: sticky; top: 5rem; border-top: 2px solid var(--ink); padding-top: 1rem; }
.workmain { min-width: 0; }
.workmain .domain { max-width: none; margin-top: 3.2rem; padding-top: 0; }
.workmain .domain:first-child { margin-top: 0; }
.workmain .domain > h2 { border-top: 0; padding-top: 0; }

.backto { margin: 0 0 1.4rem; font: .82rem var(--sans); }
.backto a { color: var(--ink-3); text-decoration: none; }
.backto a:hover { color: var(--accent); }

.jump { display: flex; flex-direction: column; gap: .5rem; margin: 0 0 1.6rem; }
.jump span { margin-bottom: .3rem; }
.jump a {
  font: 400 .88rem/1.35 var(--sans); color: var(--ink-2); text-decoration: none;
  border-left: 2px solid var(--line); padding-left: .6rem;
}
.jump a:hover { color: var(--accent); border-left-color: var(--accent); }

.stancebar { padding: 1.1rem 0 0; border-top: 1px solid var(--line); }
.stancenote { margin: 0 0 .7rem; font: .78rem/1.5 var(--sans); color: var(--ink-2); }
.stancebtns { display: flex; flex-direction: column; align-items: stretch; gap: .35rem; }
.stancebtns button {
  display: flex; justify-content: space-between; text-align: left;
  font-weight: 500; font-size: .84rem; padding: .6rem .85rem;
  background: transparent; color: var(--ink-2); border-color: var(--line);
}
.stancebtns button span { font-family: var(--mono); font-size: .76rem; opacity: .7; margin-left: .3rem; }
.stancebtns button:hover { border-color: var(--ink-3); color: var(--ink); }
.stancebtns button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.stancecount { margin: .6rem 0 0; font: .78rem var(--mono); color: var(--ink-3); }

/* ================================================================ handover + the add page
   The add page is a stepper: a rail down the side saying where you are, and
   three steps of which exactly one is open. A step is wait, now or done, and
   the page's script sets that class on both the section and its mark in the
   rail. The handover block is shared with the research page, where it is an
   ordinary band and carries none of this.

   Everything below is the look of a page that already works without it. The
   HTML ships every step open and the form usable; folding, the marks moving
   along and the lock are all applied by script. */

.band.handover { border-top: 2px solid var(--ink); padding-top: 1.6rem; }
.copyrow { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding: .9rem 0; border-bottom: 1px solid var(--line-2); }
.copymeta { font: .82rem/1.4 var(--sans); color: var(--ink-3); }
.copystate { font: .78rem var(--mono); color: var(--gold); margin-left: auto; }
.handover .cmeta { margin-top: 1.1rem; font-size: .84rem; line-height: 1.6; }

/* the things to know, above the steps. They were a bulleted essay until
   9 September 2026, which put three screens of reading in front of the thing
   the page is for. One line each, in a row, hairline-ruled like everything.
   Five since 10 September, the certificate first: four cautions and nothing
   else read as though the page were arguing with the reader. */
.knowfirst {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); margin: 2.4rem 0 0;
}
.knowcard { background: var(--paper); padding: 1.15rem 1.2rem 1.25rem; }
.knowcard h2 { font: 600 .93rem/1.35 var(--sans); color: var(--ink); margin: 0 0 .35rem; }
.knowcard p { margin: 0; font: .86rem/1.55 var(--sans); color: var(--ink-2); }

/* ---- the rail: three marks on a line, the way the steps are on one ---- */
.stepsplit { margin-top: 2.8rem; }
.railcap { margin: 0 0 1.1rem; }
.rail { list-style: none; margin: 0; padding: 0; }
.railstep { position: relative; }
.railstep a { display: block; padding: 0 0 1.5rem 2.6rem; text-decoration: none; color: inherit; }
.railstep:last-child a { padding-bottom: 0; }
.railstep::before {
  content: ""; position: absolute; left: .81rem; top: 1.85rem; bottom: 0;
  width: 2px; background: var(--line);
}
.railstep:last-child::before { display: none; }
.railstep.done::before { background: var(--green); }
.railnum {
  position: absolute; left: 0; top: 0; z-index: 1; width: 1.75rem; height: 1.75rem;
  border-radius: 50%; background: var(--paper); border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font: 500 .82rem/1 var(--sans); color: var(--ink-3);
}
.railt { display: block; font: 600 .92rem/1.3 var(--sans); color: var(--ink-3); }
.rails { display: block; margin-top: .12rem; font: .8rem/1.4 var(--sans); color: var(--ink-3); }
.railstep.now .railnum { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.railstep.now .railt { color: var(--ink); }
.railstep.done .railnum { background: var(--green); border-color: var(--green); color: transparent; }
.railstep.done .railnum::after {
  content: "\2713"; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; color: var(--on-accent); font: 600 .95rem/1 var(--sans);
}
.railstep.done .railt { color: var(--ink-2); }
.railstep a:hover .railt { color: var(--accent); }

/* ---- a step ---- */
.step { position: relative; border: 1px solid var(--line); background: var(--sunk); margin: 0 0 .9rem; }
.step.now { background: var(--raised); border-color: var(--ink); }
/* the oxblood edge down the step you are on, so it is findable at a glance */
.step.now::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px; background: var(--accent); }
.step.done { background: var(--paper); }
.stepbar { margin: 0; font: inherit; font-weight: 400; }
.stepbtn { display: flex; align-items: center; gap: 1.05rem; padding: 1.15rem 1.3rem; }
.stepbtn[role="button"] { cursor: pointer; }
.stepbtn[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.step.folded .stepbtn { padding-bottom: 1.15rem; }
.stepnum {
  flex: none; position: relative; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 2px solid var(--line); background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font: 400 1.28rem/1 var(--display); font-variation-settings: "SOFT" 8, "WONK" 0, "opsz" 32;
  color: var(--ink-3);
}
.step.now .stepnum { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.step.done .stepnum { background: var(--green); border-color: var(--green); color: transparent; }
.step.done .stepnum::after {
  content: "\2713"; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; color: var(--on-accent); font: 600 1.15rem/1 var(--sans);
}
.stepbartext { flex: 1; min-width: 0; }
.stepno { display: block; margin: 0 0 .18rem; }
.step.now .stepno { color: var(--accent); }
.step.done .stepno { color: var(--green); }
.stept {
  display: block; font-size: 1.38rem; line-height: 1.2; letter-spacing: -.02em; color: var(--ink);
  font-family: var(--display); font-variation-settings: "SOFT" 8, "WONK" 0, "opsz" 32;
}
.step.wait .stept, .step.done .stept { color: var(--ink-3); }
/* the one line a folded step shows in place of itself */
.stepfold { display: none; flex: none; max-width: 13rem; font: .82rem/1.4 var(--sans); color: var(--ink-3); text-align: right; }
.step.folded .stepfold { display: block; }
.step.done .stepfold { color: var(--green); }
.stepbody { padding: 0 1.3rem 1.5rem; }
.stepbody > .lead:first-child { margin-top: 0; }

/* ---- the minute, drawn ---- */
.timer {
  display: flex; align-items: center; gap: 1.5rem; margin: 1.7rem 0 0;
  padding: 1.4rem 1.5rem; border: 1px solid var(--line); background: var(--paper);
}
.timerring { position: relative; flex: none; width: 7.4rem; height: 7.4rem; }
.timerring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ttrack { fill: none; stroke: var(--line); stroke-width: 8; }
.tsweep { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.step.done .tsweep { stroke: var(--green); }
.timernum {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 400 1.55rem/1 var(--display); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; color: var(--ink-3);
}
.step.now .timernum { color: var(--accent); }
.step.done .timernum { color: var(--green); }
.timertext { margin: 0; font: .92rem/1.6 var(--sans); color: var(--ink-2); }

/* the three things worth asking, in step two: ruled lines, like everything else here */
.asklist { list-style: none; margin: 0 0 .4rem; padding: 0; max-width: var(--read); border-top: 1px solid var(--line-2); }
.asklist li { padding: .8rem 0; border-bottom: 1px solid var(--line-2); font: .93rem/1.55 var(--sans); color: var(--ink-2); }
.asklist strong { color: var(--ink); font-weight: 600; }

/* ================================================================ the research hub
   Nine subjects as cards, not as a list of links. Each carries the two facts
   that were already in the spreadsheet and never shown: how big the subject
   is, and which way its evidence cuts. The bar's three colours are the same
   three a claim's left edge uses on the evidence pages. */

.shape .lead { margin-bottom: 1.1rem; }
.shape .lead strong { color: var(--ink); font-weight: 600; }
.sbar { display: flex; height: 7px; background: var(--line-2); overflow: hidden; border-radius: 1px; }
.sbar i { display: block; height: 100%; }
.sbar i.h { background: var(--rule); }
.sbar i.s { background: var(--green); }
.sbar i.u { background: var(--line); }
.skey { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: .7rem 0 0; padding: 0;
        font: .78rem/1.4 var(--sans); color: var(--ink-3); }
.skey li { display: flex; align-items: center; gap: .45rem; }
/* the swatch gets a hairline: context is deliberately the quietest colour of
   the three, which in the bar is right and in a 12px square is invisible */
.skey i { width: .75rem; height: .75rem; border-radius: 1px; flex: none; border: 1px solid var(--ink-3); }
.skey i.h { background: var(--rule); }
.skey i.s { background: var(--green); }
.skey i.u { background: var(--line); }

.subjects {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 1.2rem;
}
.subject { background: var(--paper); padding: 1.3rem 1.35rem 1.15rem; display: flex; flex-direction: column; }
.subject:hover { background: var(--raised); }
.subjmain { text-decoration: none; color: inherit; display: block; flex: 1; }
.subjhead { display: flex; align-items: baseline; justify-content: space-between; gap: .9rem; }
.subjt {
  font-family: var(--display); font-variation-settings: "SOFT" 8, "WONK" 0, "opsz" 32;
  font-size: 1.3rem; line-height: 1.2; letter-spacing: -.02em; color: var(--ink);
}
.subject:hover .subjt { color: var(--accent); }
.subjn { flex: none; font: 400 1.35rem/1 var(--serif); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.subjd { display: block; margin: .55rem 0 1.1rem; font: .86rem/1.55 var(--sans); color: var(--ink-2); }
.subjmeta { margin: .6rem 0 0; font: .78rem/1.4 var(--sans); color: var(--ink-3); }
.subjmeta a { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--line); }
.subjmeta a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* the four working pages, lighter than a subject and plainly a different kind
   of thing: no count, no bar, nothing to compare between them */
.utils { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 2rem; margin-top: 1.1rem;
         border-top: 1px solid var(--line); padding-top: 1.3rem; }
.util { text-decoration: none; color: inherit; }
.utilt { display: block; font: 600 .95rem/1.35 var(--sans); color: var(--ink); }
.util:hover .utilt { color: var(--accent); }
.utild { display: block; margin-top: .3rem; font: .82rem/1.5 var(--sans); color: var(--ink-3); }

/* ================================================================ sources, search, method */

.sources { list-style: none; padding: 0; margin: 0; }
.sources li { padding: .9rem 0; border-bottom: 1px solid var(--line-2); font-size: .96rem; }
.sources .cmeta { display: block; margin-top: .25rem; }

.searchwrap { max-width: var(--read); padding-top: 1rem; }
.searchlabel { display: block; font: 600 .85rem/1.4 var(--sans); margin-bottom: .5rem; color: var(--ink-2); }
mark { background: var(--gold-bg); color: var(--ink); padding: .05em .15em; }

.grades { border-collapse: collapse; width: 100%; max-width: var(--read); margin: 0 0 1.5rem; font: .93rem/1.5 var(--sans); }
.grades th { text-align: left; padding: 0 .8rem .6rem 0; }
.grades td { padding: .6rem .8rem .6rem 0; border-top: 1px solid var(--line-2); vertical-align: top; }
.duelist { list-style: none; padding: 0; margin: 0; font: .92rem/1.6 var(--sans); }
.duelist li { padding: .5rem 0; border-bottom: 1px solid var(--line-2); }
.duelist .decay { color: var(--gold); font-weight: 600; margin-right: .5rem; }

/* ================================================================ forms */

#q, .submitform input, .submitform textarea {
  width: 100%; font: 400 1rem/1.5 var(--sans); padding: .78rem .95rem; color: var(--ink);
  background: var(--raised); border: 1px solid var(--line); border-radius: 2px;
}
#q:focus, .submitform input:focus, .submitform textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent;
}
#q { font-size: 1.05rem; padding: .9rem 1.05rem; }

.submitform { max-width: var(--read); }
/* inside a step the column is already the right width, and the fields pair up */
.stepbody .submitform { max-width: none; }
.fieldpair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; }
/* Closed until step two is done. Faded rather than hidden, so it is plainly
   the thing that is coming rather than something missing from the page. The
   fields are genuinely disabled as well — this is the look, not the lock. */
.submitform.locked { opacity: .45; }
.submitform.locked, .submitform.locked * { cursor: not-allowed; }
.submitform label { display: block; margin: 0 0 1.15rem; font: 600 .88rem/1.45 var(--sans); color: var(--ink); }
.submitform label input, .submitform label textarea { margin-top: .38rem; font-weight: 400; }
.submitform .opt { font-weight: 400; color: var(--ink-3); }
.submitform .req { font-weight: 400; color: var(--accent); }
.formnote, .formstatus {
  font: .92rem/1.55 var(--sans); color: var(--ink-2);
  background: var(--sunk); padding: .9rem 1.1rem; border-left: 3px solid var(--line); margin: 0 0 1.6rem;
}
.formstatus { margin: 1.2rem 0; }
.formstatus.good { border-left-color: var(--accent); color: var(--ink); background: var(--accent-bg); }
.formstatus.warn { border-left-color: var(--gold); background: var(--gold-bg); color: var(--ink); }
.formnote.counting { border-left-color: var(--accent); color: var(--ink); font-weight: 600; }
.formactions { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin: 0 0 1.2rem; }
.sendnote { flex: 1; min-width: 15rem; margin: 0; font: .82rem/1.5 var(--sans); color: var(--ink-3); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formchoice { border: 1px solid var(--line); padding: 1.1rem 1.2rem .3rem; margin: 0 0 1.6rem; }
.formchoice legend { padding: 0 .4rem; }
label.radio { display: flex; gap: .7rem; align-items: flex-start; margin: 0 0 1rem; font: 400 .93rem/1.5 var(--sans); color: var(--ink-2); }
label.radio input { width: auto; margin: .3rem 0 0; flex: none; }
label.radio strong { color: var(--ink); font-weight: 600; }

/* the fields on the add page, in groups. The legend floats so the group's top
   rule runs unbroken above it instead of being cut around the heading. */
.formgroup { border: 0; min-width: 0; margin: 0 0 .4rem; padding: 1.4rem 0 0; border-top: 1px solid var(--line-2); }
.formgroup legend { float: left; width: 100%; margin: 0 0 1rem; padding: 0; font: 600 1rem/1.3 var(--sans); color: var(--ink); }
.formgroup legend + * { clear: both; }
.formresult { max-width: var(--read); }

/* ================================================================ figures */

.fig {
  margin: 2.4rem 0; padding: 1.5rem 1.5rem 1.2rem;
  background: var(--raised); border: 1px solid var(--line); border-radius: 4px; max-width: var(--wide);
}
.fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.fig figcaption {
  margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line-2);
  font: .9rem/1.55 var(--sans); color: var(--ink-2); max-width: 46rem;
}
.fig .figsrc { display: block; margin-top: .5rem; }

.fig text { font-family: var(--sans); fill: var(--ink-2); }
.fig .big  { font: 700 30px var(--sans); fill: var(--accent); letter-spacing: -.02em; }
.fig .lab  { font: 600 13px var(--sans); fill: var(--ink); }
.fig .note { font: 400 12px var(--sans); fill: var(--ink-3); }
.fig .cid  { font: 600 10px var(--mono); fill: var(--ink-3); letter-spacing: .05em; }
.fig .axlab { font: 400 12px var(--sans); fill: var(--ink-3); }
.fig .axlab.dim { opacity: .6; }
.fig .pt   { font: 600 12px var(--sans); fill: var(--ink); }
.fig .reglab { font: 600 13px var(--sans); fill: var(--ink); }
.fig .nowlab { font: 700 10px var(--sans); fill: var(--accent); letter-spacing: .08em; text-transform: uppercase; }
.fig .segn { font: 700 12px var(--sans); fill: var(--paper); }
.fig .coln { font: 11px var(--mono); fill: var(--ink-3); }

.fig .panel { fill: var(--sunk); stroke: var(--line); }
.fig .track { fill: var(--line); }
.fig .bar   { fill: var(--accent); }
.fig .axis  { stroke: var(--line); stroke-width: 2; }
.fig .tick, .fig .stem { stroke: var(--line); stroke-width: 1.5; }
.fig .gridline { stroke: var(--line-2); stroke-width: 1; }
.fig .nowline  { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 4; }

.fig .unit { stroke: none; }
.fig .unit.ceremony   { fill: var(--accent); }
.fig .unit.commitment { fill: var(--gold); }
.fig .regbar { stroke-width: 5; stroke-linecap: round; }
.fig .regbar.inforce { stroke: var(--accent); opacity: .3; }
.fig .regbar.coming { stroke: var(--line); }
.fig .regdot.inforce { fill: var(--accent); }
.fig .regdot.coming { fill: var(--paper); stroke: var(--ink-3); stroke-width: 2; }

.fig .seg.s-P { fill:#6f9160; } .fig .seg.s-J { fill:#5b83a8; }
.fig .seg.s-AN{ fill:#8b6ba8; } .fig .seg.s-V { fill:#bd8a45; }
.fig .seg.s-A { fill:#8d8271; } .fig .seg.s-U { fill:#b06060; }
.fig .seg.s-L { fill: var(--gold); opacity: .75; }

/* a mark you cannot follow back to its record is decoration */
.fig .unitlink, .fig .rowlink { cursor: pointer; }
.fig .unitlink .unit, .fig .rowlink .panel, .fig .rowlink .regbar, .fig .rowlink .regdot { transition: opacity .12s ease; }
.fig .unitlink:hover .unit { opacity: .6; }
.fig .unitlink:focus-visible .unit { outline: 2px solid var(--ink); outline-offset: 2px; }
.fig .rowlink:hover .panel { fill: var(--sunk); }
.fig .rowlink:hover .regbar, .fig .rowlink:hover .regdot { opacity: .6; }
.fig .rowlink:hover .reglab, .fig .rowlink:hover .lab { fill: var(--accent); }

/* ================================================================ certificate
   One printable leaf per entry, set out the way a certificate has always been:
   a heavy rule with a hairline inside it that turns the corners as arcs, the
   mark at the head, the names at full size, the particulars beneath, and the
   registrar's stamp. Everything drawn on it is inline SVG from certificate.py
   in plain ink. On paper the side note and the chrome disappear. */

.certwrap {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: start; padding: 2rem 0 2rem;
}
/* The certificate is always paper. It is a document somebody prints, saves or
   frames, and a document does not follow the reader's interface theme — in dark
   mode the old one rendered as a dark panel, which is a screen, not a record.
   Redeclaring the tokens here keeps every descendant on the light palette. */
.cert {
  --paper:#f6f2e9; --raised:#fdfbf5; --sunk:#efe9dc;
  --ink:#1c1710; --ink-2:#574c3d; --ink-3:#8b7d6b;
  --line:#d8cdb8; --line-2:#e6ddc9; --rule:#b8483f;
  --accent:#7a1c26; --accent-2:#a02b34; --accent-bg:#f4e6e2;
  --gold:#7c5f16; --gold-bg:#f5ecd4;

  padding: clamp(.6rem, 1.6vw, 1rem);
  background: radial-gradient(ellipse at 50% 42%, var(--raised) 55%, var(--sunk) 100%);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  text-align: center; font-family: var(--serif); color: var(--ink);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* the frame: a heavy rule, then a hairline whose four straight edges stop short
   of the corners, where a drawn corner turns them as an arc */
.certborder { border: 2px solid var(--ink); padding: 5px; }
.certframe {
  position: relative;
  padding: clamp(1.8rem, 4.5vw, 3rem) clamp(1.2rem, 4vw, 2.8rem) clamp(1.5rem, 4vw, 2.4rem);
}
.certframe::before, .certframe::after { content: ""; position: absolute; pointer-events: none; }
.certframe::before { top: 0; bottom: 0; left: 21px; right: 21px; border-top: 1px solid var(--ink-2); border-bottom: 1px solid var(--ink-2); }
.certframe::after  { left: 0; right: 0; top: 21px; bottom: 21px; border-left: 1px solid var(--ink-2); border-right: 1px solid var(--ink-2); }
.certcorner { position: absolute; width: 40px; height: 40px; top: 0; left: 0; overflow: visible; }
.certcorner.tr { left: auto; right: 0; transform: scaleX(-1); }
.certcorner.bl { top: auto; bottom: 0; transform: scaleY(-1); }
.certcorner.br { top: auto; bottom: 0; left: auto; right: 0; transform: scale(-1); }
.cc-rule { fill: none; stroke: var(--ink-2); stroke-width: 1; }
.cc-arc  { fill: none; stroke: var(--ink-3); stroke-width: .8; }
.cc-dot  { fill: var(--accent); }

/* the mark: the same two rings as the top of every page, at size at the head,
   and again as a watermark behind the names */
.certbody { position: relative; }
.certseal { display: block; width: 84px; height: 84px; margin: 0 auto .8rem; }
.certwater {
  position: absolute; left: 50%; top: 50%; width: min(78%, 30rem); height: auto;
  transform: translate(-50%, -50%); opacity: .05; pointer-events: none;
}
.cs-o { fill: none; stroke: var(--ink); stroke-width: 1; }
.cs-o.thin { stroke-width: .5; opacity: .55; }
.cs-bezel .tick { stroke: var(--ink-3); stroke-width: 1; opacity: .45; }
.cs-bezel .tick.major { stroke-width: 1.6; opacity: .8; }
.cs-r { fill: none; stroke: var(--ink); stroke-width: 1.7; }
.cs-r.dash { stroke: var(--accent); stroke-dasharray: 4.2 4.2; }
.certwater .cs-r.dash { stroke: var(--ink); }

/* the head */
.certmark { font-size: 1.15rem; font-weight: 500; letter-spacing: -.01em; margin: 0 0 1.5rem; }
.certmark span { color: var(--accent); }
.certtitle {
  font-size: clamp(1.1rem, 2.6vw, 1.45rem); font-weight: 500; line-height: 1.2;
  letter-spacing: .3em; text-transform: uppercase; margin: 0; padding-left: .3em;
}
.certflourish { display: block; width: min(100%, 22rem); height: 16px; margin: .8rem auto 1.4rem; }
.certflourish stop { stop-color: var(--ink-2); }
.certflourish line { stroke-width: 1; }
.certflourish path, .certflourish circle { fill: var(--accent); }
.certlead {
  font: italic 400 1.02rem/1.6 var(--serif); color: var(--ink-2);
  max-width: 28rem; margin: 0 auto 1.8rem;
}

/* the names */
.certnames { display: flex; flex-direction: column; align-items: center; margin: 0; }
.certname { font-size: clamp(1.9rem, 5.2vw, 2.9rem); line-height: 1.12; letter-spacing: -.018em; font-weight: 450; }
.certamp {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.6; color: var(--accent);
}
.certkind {
  margin: 1rem 0 0; font: 500 .7rem/1.4 var(--sans);
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
.certvows {
  margin: 1.9rem auto 0; max-width: 30rem; font-style: italic; color: var(--ink);
  font-size: 1.1rem; line-height: 1.55;
}
.certvows p { margin: 0; }
.certvows p::before { content: "\201C"; }
.certvows p::after  { content: "\201D"; }

/* the particulars */
/* Two fixed columns, not a wrapping row. Wrapping centred each line on its own
   width, so a short pair sat narrow, a long pair sat wide, and no label ever
   landed above the one before it — six facts arranged six different ways. On a
   grid every label stands on the same two axes down the block, which is how a
   document sets out particulars and the reason this reads as ordered rather
   than as text that happened to fit. The rows are also given more air than the
   columns: read down before across. */
.certfacts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
  gap: 1.9rem clamp(1.5rem, 5vw, 3rem);
  margin: 2.2rem 0 0; padding: 1.9rem 0 2rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.certfact { max-width: 18rem; }
/* An odd last fact would sit alone under the left column, off the page's
   centre line. Let it take the full width and stay centred. */
.certfact:last-child:nth-child(odd) { grid-column: 1 / -1; }
.certlabel {
  display: block; margin-bottom: .45rem;
  font: 500 .64rem/1.3 var(--sans); letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-3);
}
.certval { display: block; font: 500 1.02rem/1.45 var(--serif); color: var(--ink); }

/* the foot: the disclaimer in the same size type as the labels, then the
   address, the stamp, and the line of the book */
.certdisclaim { font: .72rem/1.6 var(--sans); color: var(--ink-3); margin: 1.6rem auto 0; max-width: 30rem; }
.certfoot {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin: 1.6rem 0 0; font: .68rem/1.4 var(--mono); color: var(--ink-3); letter-spacing: .04em;
}
.certstamp {
  display: inline-flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .4rem .8rem .45rem; border: 2px solid var(--accent); border-radius: 3px;
  outline: 1px solid var(--accent); outline-offset: 2px;
  color: var(--accent); transform: rotate(-4deg); opacity: .82;
  font: 700 .56rem/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase;
}
.certstamp span:first-child { font-size: .8rem; letter-spacing: .28em; padding-left: .28em; }

.certside { padding-top: 1rem; }
.certside h2 { margin: 0 0 .8rem; font-size: 1.15rem; }
.certside p { font-size: .92rem; line-height: 1.65; color: var(--ink-2); margin: 0 0 .9rem; }
.certside strong { color: var(--ink); }

/* ================================================================ footer */

/* Three columns and a rule, not four stacked paragraphs. It was the second
   one until 9 September 2026: every page ended in about ten centimetres of
   full-width prose, which read as another section of the page rather than as
   the bottom of it. Same words, a third of the height. */
.foot {
  border-top: 2px solid var(--ink); background: var(--sunk);
  padding: 1.9rem var(--pad) 1.7rem; font: .85rem/1.55 var(--sans); color: var(--ink-2);
}
.footgrid {
  max-width: var(--wide); margin: 0 auto; display: grid;
  grid-template-columns: minmax(0, 2.7fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.4rem 2.6rem; align-items: start;
}
.footcol p { margin: 0 0 .55rem; }
.footcol > .label { margin: 0 0 .55rem; }
.footcol strong { color: var(--ink); }
.footnote p { color: var(--ink-3); }
.footlinks { list-style: none; margin: 0; padding: 0; }
.footlinks li { margin: 0 0 .3rem; }
.footlinks a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line); }
.footlinks a:hover { color: var(--accent); border-bottom-color: var(--accent); }
/* the bottom rule: provenance on one side, the crisis line on the other. It
   stays a readable size and keeps its accent numerals — it is the one thing
   down here somebody might need in a hurry. */
.footbar {
  max-width: var(--wide); margin: 1.2rem auto 0; padding-top: .85rem;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: .5rem 2.5rem; flex-wrap: wrap;
  font-size: .81rem; color: var(--ink-3);
}
.footbar p { margin: 0; }
.footbar .care strong { color: var(--accent); }

/* ================================================================ small screens */

@media (max-width: 62rem) {
  .worksplit { grid-template-columns: 1fr; gap: 1.5rem; }
  .workrail { position: static; }
  .jump { flex-direction: row; flex-wrap: wrap; align-items: baseline; }
  .stancebtns { flex-direction: row; flex-wrap: wrap; }
  .stancebtns button { display: inline-flex; }
  /* the rail lies down and becomes a strip across the top of the steps */
  .stepsplit .workrail { border-top: 0; padding-top: 0; }
  .railcap { display: none; }
  .rail { display: flex; }
  .railstep { flex: 1; text-align: center; }
  .railstep a, .railstep:last-child a { padding: 2.7rem .4rem 0; }
  .railnum { left: 50%; transform: translateX(-50%); }
  .railstep::before { left: calc(50% + 1.2rem); width: calc(100% - 2.4rem); top: .81rem; bottom: auto; height: 2px; }
  .rails { display: none; }
  /* five into two leaves an odd one: it takes the whole last row rather than
     sitting beside a dead cell showing the container's rule colour. */
  .knowfirst { grid-template-columns: repeat(2, 1fr); }
  .knowcard:last-child { grid-column: 1 / -1; }
  /* the note takes the full width and the two link columns sit under it */
  .footgrid { grid-template-columns: 1fr 1fr; gap: 1.4rem 2rem; }
  .footnote { grid-column: 1 / -1; }
  .subjects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .utils { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 60rem) { .certwrap { grid-template-columns: 1fr; } }
@media (max-width: 56rem) { .plateinner { grid-template-columns: 1fr; } }
@media (max-width: 46rem) {
  .fig { padding: 1rem 1rem .9rem; }
  .fig figcaption { font-size: .86rem; }
}
@media (max-width: 44rem) {
  body { font-size: 16px; }
  .topbar { flex-wrap: wrap; gap: 0 1.2rem; padding-bottom: .5rem; }
  .wordmark { margin-right: 0; flex: 1; }
  .nav { order: 3; width: 100%; gap: 1.2rem; overflow-x: auto; }
  .nav a { padding: .6rem 0; border-bottom: 0; margin-bottom: 0; font-size: .82rem; }
  .nav a.here { color: var(--accent); }
  .row { padding-left: 2.6rem; gap: .8rem; flex-wrap: wrap; }
  .rowt { font-size: 1.2rem; }
  .band.callout { padding: 1.4rem 1.2rem 1.3rem; }
  .facts { grid-template-columns: 1fr; gap: .1rem; }
  .facts dd { margin-bottom: .6rem; }
  .certfacts { grid-template-columns: 1fr; gap: 1.5rem; }
  .certfoot { flex-direction: column; gap: 1rem; }
  .knowfirst { grid-template-columns: 1fr; }
  .fieldpair { grid-template-columns: 1fr; }
  .stepbtn { gap: .8rem; padding: 1rem; flex-wrap: wrap; }
  .stept { font-size: 1.15rem; }
  .stepfold { flex: 1 0 100%; max-width: none; text-align: left; padding-left: 3.4rem; }
  .stepbody { padding: 0 1rem 1.2rem; }
  .timer { flex-direction: column; align-items: flex-start; gap: 1.1rem; padding: 1.1rem; }
  .railt { font-size: .8rem; }
  /* the two link columns stay side by side even here: the labels are short
     enough to fit, and stacking them added a hundred pixels of footer to a
     phone screen for nothing */
  .footgrid { gap: 1.2rem 1.2rem; }
  .subjects { grid-template-columns: 1fr; }
  .subject { padding: 1.15rem 1.1rem 1rem; }
}

/* ================================================================ print */

@page { margin: 14mm; }
@media print {
  .topbar, .nav, .foot, .skip, .noprint, .crumbs, .kindtag { display: none !important; }
  /* paper does not scroll: print the whole list, not the visible slice */
  .scroller { max-height: none; overflow: visible; }
  body { background: #fff; color: #000; }
  main { border: 0; padding: 0; max-width: none; }
  main::before { display: none; }
  .certwrap { display: block; padding: 0; }
  .cert { box-shadow: none; border: 0; padding: 0; background: #fff; page-break-inside: avoid; }
}