/* ==========================================================================
   imitpro.in, rev-01, styles-r2
   Pass 1: structure, copy, typography, layout, accessibility.
   Pass 2: the plate, the gestation figure, motion, and the components pass 1
   left as classes with no rule behind them. Sections 17 to 20.
   Round 3: IMIT's own colophon and its own palette, and the copy cut.

   The suffix tracks contents, not rounds. It went to -r2 when the corrections
   round added the .mi-extra component. Pass 2 changed this file again and
   deliberately did NOT go to -r3: the suffix exists to defeat Hostinger's CDN
   across deploys, and this site has never deployed, so there is no cached copy
   anywhere to invalidate and a higher number would only imply a deploy history
   that does not exist. Bump it on the first change AFTER the site is live.
   main-r1.js was not touched by pass 2 and keeps its own number.

   Direction. This is a reference document, not a landing page, and it has to
   look like one at a glance: a reader who arrives from a row of identical
   reseller pages should be able to tell in half a second that she has landed
   on something of a different kind. So: an article column, a contents rail,
   numbered sections, superscript citations, a reference list with the URLs
   printed as text.

   Round 3 gave imitpro.in its own identity and round 5 handed that identity
   to the owner's own logo. The palette below is a two ink scheme, a teal
   taken from that logo and an imprint green, on warm book paper, with a
   small warm rubric for numerals. ASC's two logo values do not appear on
   this page at all and neither does ASC's mark; the footer line carries the
   relationship in words, which is all it has to do.
   The type system and the spacing scale are unchanged, because the reader
   and the reading conditions are the same (a phone, in the evening).

   The one component that is new here, and that carries the whole point of the
   page, is the register marker: see section 6.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0 · Fonts (self-hosted variable WOFF2, no CDN, no network dependency)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/Newsreader-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/Newsreader-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lexend';
  src: url('fonts/Lexend-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lexend';
  src: url('fonts/Lexend-latin-ext.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   1 · Tokens: primitive, then semantic, then component
   -------------------------------------------------------------------------- */
:root {
  /* primitive ----------------------------------------------------------
     imitpro.in has its own palette as of round 3. It is not ASC's, and it
     does not borrow ASC's two logo values: those stay where they belong, on
     ascinbornanalytics.com, and this page carries the relationship in the
     footer line instead of in a colour.

     The direction is printing ink on book paper.

     ROUND 5 moved the cool ink from an imprint blue to the owner's own
     teal. The owner supplied a logo on 2026-08-18 and asked for the site
     to be in sync with it, and the logo is a single colour: #429A9B. That
     value is kept exactly in the mark's own file, and it is the mark's
     colour and nothing else, because it measures 3.1:1 on paper and can
     never be text. --teal below is the same hue taken down until it can
     be, and it is what every blue call site in this file now resolves to.

     The imprint green stays as the second cool value, unchanged, doing the
     same small job it did before: section 03's timeline and the arrival
     highlight in the reference list. A third, much smaller warm value is
     the rubric, the red ink a manuscript uses for numerals and marginal
     notes; it does no work colour alone could not survive losing. Every
     value below is measured against the paper it sits on, not inherited. */
  --paper: #f9f6ef;
  --paper-2: #f1ece0;
  --paper-3: #e6dfcf;
  --card: #fffdf7;
  --ink: #15232c;           /* 15.9:1 on paper */
  --ink-soft: #4d5b66;      /* 6.4:1 on paper */
  /* The logo's own value is #429A9B. It is deliberately NOT a token: it
     measures 3.1:1 on paper, so it can never be text or a rule here, and
     the only things that wear it are img/imit-mark.png and img/imit-word.png,
     which carry it in the file rather than taking it from CSS. A token that
     nothing may legally use is a trap, so there isn't one. */
  --teal: #17595b;          /* the logo hue taken down until it can be ink, 7.4:1 on paper */
  --teal-deep: #0a2b2e;     /* footer and masthead ground, 15.0:1 to white */
  --teal-tint: #e2eeee;
  /* The imprint green itself, #2a6046, is no longer a token. Round 3's only
     call site for it was the fill on the old mark; round 4 replaced that
     mark and it went with it. The ink is still the page's green, and
     --green-deep and --green-tint below are still its working values, but a
     token nothing reads is dead code and round 3 set the precedent of
     pruning those. --fg-muted went in the same sweep: it aliased --ink-soft
     and had been unreferenced since pass 1. */
  --green-deep: #1e4835;    /* 8.6:1 on the green tint */
  --green-tint: #e3ede4;
  --rubric: #9c4a24;        /* the marginal ink, 5.7:1 on paper */
  --rubric-tint: #f5e6dc;

  /* Round 4. The owner's note was that the opening was bland, and it was:
     the page had two inks and no value that could carry any weight on a dark
     ground, so nothing on it could ever be loud. This is that value. It is a
     lift of the imprint green rather than a fourth hue, so the palette is
     still two inks and a rubric.

     It is an ON-INK value and only that. 9.1:1 on --teal-deep, and 1.5:1
     on paper, where it is invisible. Never put it on paper. Round 5 moved
     it from a mint to a light teal so that it is a lift of the owner's own
     colour rather than of a hue the logo does not contain. */
  --teal-lift: #8ed6d5;

  /* semantic ----------------------------------------------------------- */
  --bg: var(--paper);
  --fg: var(--ink);
  --rule: #ded5c4;
  --rule-soft: #e9e2d3;
  --focus: var(--teal);

  /* register (component) -----------------------------------------------
     Three values, and each one is encoded three ways over: by its own words,
     by the shape of its mark and the style of its rule, and only then by
     colour. Colour is never the sole carrier, which is what makes it safe
     for the palette underneath it to change. */
  --reg-fact: var(--teal);
  --reg-claim: var(--rubric);
  --reg-bg: var(--ink-soft);

  /* type --------------------------------------------------------------- */
  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body: 'Lexend', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-display: clamp(2.4rem, 1.6rem + 3.6vw, 4.25rem);
  --fs-h2: clamp(1.8rem, 1.3rem + 2.2vw, 2.75rem);
  --fs-h3: clamp(1.2rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-numeral: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem);
  --fs-lead: clamp(1.125rem, 1.04rem + 0.42vw, 1.3rem);
  --fs-body: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);
  --fs-small: 0.9375rem;

  /* space -------------------------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
  --s-6: 32px;  --s-7: 48px;  --s-8: 56px;  --s-9: 72px;  --s-10: 96px;

  --shell: 1160px;
  --gutter: clamp(20px, 4vw, 40px);
  --header-h: 68px;

  --r-sm: 4px;  --r-md: 10px;  --r-lg: 16px;  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(21, 35, 44, .06), 0 2px 8px rgba(21, 35, 44, .04);

  --dur: 180ms;
  --ease: cubic-bezier(.22, .7, .24, 1);
}

/* --------------------------------------------------------------------------
   2 · Reset and base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-display); line-height: 1.05; letter-spacing: -.022em; }
h2 { font-size: var(--fs-h2);      line-height: 1.1;  letter-spacing: -.018em; }
h3 { font-size: var(--fs-h3);      line-height: 1.22; letter-spacing: -.012em; }
h4 { font-size: 1.0625rem; line-height: 1.35; font-family: var(--font-body);
     font-weight: 600; letter-spacing: -.005em; }

p { margin: 0 0 var(--s-4); max-width: 64ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--rubric); }

cite { font-style: italic; }
b, strong { font-weight: 600; }
ul, ol, dl, dd { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }

::selection { background: #cfe6e5; color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}
/* The teal ink disappears on the footer ground, so that container hands the
   ring a white value instead. Same mechanism as the ASC site. */
.site-footer { --focus: #ffffff; }

.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 200;
  background: var(--teal); color: #fff; padding: var(--s-3) var(--s-5);
  border-radius: 0 0 var(--r-md) var(--r-md); font-weight: 600; text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3 · Layout primitives
   -------------------------------------------------------------------------- */
.shell {
  width: 100%; max-width: var(--shell); margin-inline: auto;
  padding-inline: var(--gutter);
}

/* .eyebrow was here. The page's only eyebrow was "A reference page, not a
   sales page" and the owner removed it in round 4, so the rule and its
   --fs-eyebrow token went with the markup rather than being left behind as a
   class with nothing to style. */

.lead {
  font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-soft);
  max-width: 58ch;
}
.lead--tight { margin-top: calc(var(--s-4) * -1 + var(--s-2)); }

/* --------------------------------------------------------------------------
   4 · Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(249, 246, 239, .93);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--rule);
  box-shadow: 0 4px 24px rgba(21, 35, 44, .06);
}
.header-inner {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: var(--header-h); padding-block: var(--s-2);
}

.brand {
  display: flex; align-items: center; gap: var(--s-3);
  margin-right: auto; text-decoration: none; color: var(--ink);
  padding-block: var(--s-1);
}
/* Round 5: the mark and the wordmark are the owner's own logo, cut from the
   file they supplied. Round 4's drawn colophon is gone, and so is the rule
   that set IMIT in Newsreader: a supplied wordmark is the wordmark, and
   setting the same four letters twice in two different faces would be the
   one thing worse than either. Both are sized by height with width auto, so
   the aspect ratio is the file's rather than a number written here. */
.brand-mark { height: 42px; width: auto; flex: none; }
.brand-word { height: 22px; width: auto; }

/* align-items matters here: the wordmark is a replaced element inside a
   column flex container, and the default stretch made it fill the column
   width instead of taking its own aspect ratio from its height. */
.brand-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; gap: 4px; }
/* The expansion is never hidden. The acronym on its own means nothing to a
   first time visitor, and a first time visitor is the entire audience for
   this page; she is also the one most likely to be at 390px. It wraps
   instead. */
.brand-text small {
  font-size: .625rem; line-height: 1.3; letter-spacing: .07em;
  color: var(--ink-soft); text-transform: uppercase; max-width: 22ch;
}
@media (min-width: 560px) {
  .brand-text small { font-size: .6875rem; letter-spacing: .06em; max-width: none; }
}

.site-nav { display: flex; align-items: center; gap: var(--s-2); }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--s-3);
  font-size: var(--fs-small); font-weight: 600; text-decoration: none;
  color: var(--teal); border-radius: var(--r-sm);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.site-nav a:hover { background: var(--teal-tint); color: var(--teal); }
/* Below 560px the header row has to carry the wordmark and its expansion, and
   something has to give. The contents list is the second thing in the page
   flow and is reachable by scrolling up; the references are three thousand
   words away, so that is the jump worth keeping in a sticky bar. */
@media (max-width: 559px) {
  .site-nav a[href="#contents"] { display: none; }
}

/* --------------------------------------------------------------------------
   5 · Masthead and the reading legend
   -------------------------------------------------------------------------- */
/* Round 4. The owner said the opening was bland, and the fix is a title
   plate: the masthead is printed in ink and the rest of the page stays on
   paper. That is one decision doing three jobs. It puts colour where the
   reader lands, it makes the legend a cream card laid on a dark ground
   instead of a cream card on a cream ground, and it draws a hard line
   between the masthead and the document, which is what the 1px hairline was
   trying and failing to do.

   Nothing below the masthead changed structure. The page is still ink on
   book paper from the contents rail down, because that is the argument.
   Round 5 changed which ink: the cool value is the owner's teal now, here
   and everywhere else, but the arrangement is round 4's. */
.masthead {
  padding-block: clamp(40px, 6vw, 88px) clamp(36px, 5vw, 64px);
  /* The bottom edge is the loud one: a full bleed band of the lifted teal
     between the ink and the paper. It is the only place on the page where a
     colour is used at full strength for its own sake, and it is 4px. */
  border-bottom: 4px solid var(--teal-lift);
  background:
    radial-gradient(115% 85% at 84% 8%, rgba(142, 214, 213, .18) 0%, rgba(142, 214, 213, 0) 60%),
    linear-gradient(158deg, #1c5e60 0%, var(--teal) 44%, var(--teal-deep) 100%);
  /* 5.8:1 on the lightest stop of that gradient, 11.9:1 on the darkest. The
     light stop was picked FROM that number rather than by eye: a teal one
     step brighter looked better and put the lead at 4.3:1, which is a fail. */
  color: #d2e8e8;
}
.masthead h1 { color: var(--paper); margin-bottom: var(--s-5); max-width: 16ch; }
/* The one word the reader came here to look up. Emphasis only: it carries no
   meaning that the sentence does not carry without it. */
.mast-key { color: var(--teal-lift); }
.masthead .lead { color: #d2e8e8; max-width: 62ch; }

/* The legend. It is deliberately the first bordered object on the page, before
   any claim, because it is the contract the rest of the page keeps. */
/* Round 4: it now sits on ink. The card keeps its own paper colour and its
   own ink text, so it has to say so rather than inherit the masthead's
   on-ink value, and its keyline and shadow are redrawn for a dark ground:
   --rule and --shadow-sm were both measured against paper and neither is
   visible here. */
.masthead .legend {
  color: var(--ink);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 18px 44px rgba(4, 20, 20, .38);
}
.legend {
  margin-top: clamp(28px, 4vw, 44px);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--shadow-sm);
  max-width: 860px;
}
.legend-h {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  line-height: 1.25; letter-spacing: -.01em; margin-bottom: var(--s-2);
}
.legend-intro { color: var(--ink-soft); font-size: var(--fs-small); max-width: 62ch; }
.legend-list { list-style: none; display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.legend-foot {
  margin: var(--s-5) 0 0; padding-top: var(--s-4);
  border-top: 1px solid var(--rule-soft);
  font-size: var(--fs-small); color: var(--ink-soft); max-width: 66ch;
}

/* --------------------------------------------------------------------------
   6 · The register marker

   The whole page turns on one distinction: a statement that is published and
   can be checked, against a statement the framework makes about itself. That
   distinction is carried in the prose (declarative against attributed), and
   this component makes it visible so a reader never has to infer it.

   Three independent encodings, so none of them is load-bearing on its own:

     1. words   the label says which register this is, in full, as real text
     2. shape   filled square / hollow circle / short bar, and a solid /
                dashed / dotted left rule. Survives greyscale, colour
                blindness, a photocopy and a screen reader.
     3. colour  the teal ink / rubric / muted ink. Last, and never alone.
   -------------------------------------------------------------------------- */
.reg {
  display: grid; gap: var(--s-1);
  margin: 0; max-width: none;
  padding: var(--s-3) var(--s-4);
  border-left: 4px solid var(--reg-fact);
  background: var(--paper-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.reg-top { display: flex; align-items: center; gap: var(--s-2); }
.reg-mark { flex: none; width: 13px; height: 13px; }
.reg-label {
  font-size: .75rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  line-height: 1.3;
}
.reg-note {
  font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft);
  max-width: 68ch;
}

/* Established: solid rule, filled square, the teal ink. */
.reg--fact { border-left-style: solid; border-left-color: var(--reg-fact); }
.reg--fact .reg-label { color: var(--reg-fact); }
.reg--fact .reg-mark { background: var(--reg-fact); }

/* The framework's account: dashed rule, hollow circle, rubric. The dashes and
   the hollow centre are the point. An outline is not a fill. */
.reg--claim { border-left-style: dashed; border-left-color: var(--reg-claim); }
.reg--claim .reg-label { color: var(--reg-claim); }
.reg--claim .reg-mark {
  border: 2.5px solid var(--reg-claim); border-radius: 50%; background: transparent;
}

/* General background: dotted rule, a short bar, muted. Quietest of the three,
   which is the correct weight for it. */
.reg--bg { border-left-style: dotted; border-left-color: var(--reg-bg); }
.reg--bg .reg-label { color: var(--reg-bg); }
.reg--bg .reg-mark { height: 4px; margin-block: 4px; background: var(--reg-bg); border-radius: 2px; }

/* In the legend the three sit on white, so they carry their own tint instead. */
.legend .reg--fact  { background: var(--teal-tint); }
.legend .reg--claim { background: var(--rubric-tint); }
.legend .reg--bg    { background: var(--paper-2); }

/* Section-level marker: sits directly under the h2, before any prose. */
.sec-reg { margin-bottom: var(--s-6); }

/* --------------------------------------------------------------------------
   7 · Page grid: contents rail and article column
   -------------------------------------------------------------------------- */
.page-grid { display: grid; gap: var(--s-6); padding-block: var(--s-7) var(--s-9); }
.article { min-width: 0; }

@media (min-width: 1080px) {
  .page-grid {
    grid-template-columns: 236px minmax(0, 1fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: start;
  }
  .toc { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}

/* --------------------------------------------------------------------------
   8 · Contents
   -------------------------------------------------------------------------- */
.toc {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-2);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.toc-disclose > summary {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: 48px; padding: var(--s-2) var(--s-4);
  font-size: .75rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-soft); cursor: pointer; list-style: none;
  border-radius: var(--r-md);
}
.toc-disclose > summary::-webkit-details-marker { display: none; }
.toc-disclose > summary::after {
  content: ''; margin-left: auto; width: 9px; height: 9px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
.toc-disclose[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.toc-disclose[open] > summary { border-bottom: 1px solid var(--rule-soft); border-radius: var(--r-md) var(--r-md) 0 0; }

.toc-list { list-style: none; padding: var(--s-2) var(--s-2) var(--s-3); }
.toc-list a {
  display: flex; gap: var(--s-3); align-items: baseline;
  min-height: 40px; padding: var(--s-2) var(--s-3);
  font-size: var(--fs-small); line-height: 1.35; text-decoration: none;
  color: var(--ink); border-radius: var(--r-sm);
  border-left: 3px solid transparent;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.toc-list a i {
  font-style: normal; font-family: var(--font-display); font-size: .9375rem;
  color: var(--rubric); flex: none; font-variant-numeric: tabular-nums;
}
.toc-list a:hover { background: var(--paper-3); color: var(--ink); }
.toc-list a[aria-current="true"] {
  background: var(--card); border-left-color: var(--teal);
  font-weight: 600; color: var(--teal);
}

/* --------------------------------------------------------------------------
   9 · Sections
   -------------------------------------------------------------------------- */
.sec {
  padding-block: 0 clamp(48px, 6vw, 84px);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.sec + .sec { padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--rule-soft); }

.sec-num {
  font-family: var(--font-display); font-size: var(--fs-numeral); line-height: 1;
  color: var(--rubric); margin: 0 0 var(--s-2); font-variant-numeric: tabular-nums;
}
.sec h2 { margin-bottom: var(--s-4); }
.sec > p, .sec > .lead { margin-bottom: var(--s-4); }
.sec-sub {
  margin-top: clamp(28px, 3.5vw, 44px); margin-bottom: var(--s-3);
  padding-top: var(--s-4); border-top: 1px solid var(--rule-soft);
}
/* .sec-note went with the two paragraphs it styled. Both of them told the
   reader what the register marker at the top of the section had already told
   her, which is the one kind of paragraph round 3 was asked to remove. */

/* Citation superscript. Inline inside a sentence, which is the WCAG 2.5.8
   exception to the 24px target minimum; the section source strip below gives
   the same links again at full size for anyone who wants a real target. */
.cite {
  font-size: .68em; font-weight: 700; vertical-align: super; line-height: 0;
  padding: 0 .12em 0 .16em; text-decoration: none; color: var(--teal);
  font-variant-numeric: tabular-nums;
}
.cite:hover { color: var(--rubric); text-decoration: underline; }
.cite + .cite { padding-left: .28em; }

/* The per-section source strip. Full-size targets, and it puts the evidence
   for a section at the end of it, where a reader who has just read a claim is
   most likely to want it. */
.sec-sources {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  align-items: center; max-width: none;
  margin-top: clamp(24px, 3vw, 36px); padding-top: var(--s-4);
  border-top: 1px dashed var(--rule);
}
.sec-sources-label {
  font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); margin-right: var(--s-2);
}
/* inline-block, not inline-flex. As a flex container this chip turned each of
   its three text runs ("3. Gardner, ", the italic title, ", 1983") into a
   separate flex item, and flex drops the whitespace-only nodes between items:
   the label rendered as "Gardner,Frames of Mind". */
.sec-sources a {
  display: inline-block; min-height: 32px;
  padding: 6px var(--s-3);
  font-size: .875rem; line-height: 1.45; text-decoration: none; color: var(--teal);
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.sec-sources a:hover { background: var(--teal-tint); border-color: var(--teal); color: var(--teal); }

/* --------------------------------------------------------------------------
   10 · Claim box: a block written in the framework's voice

   Hatched, not just tinted. The hatch is the third encoding: it survives
   greyscale and print, so the block reads as set apart even where colour is
   gone. Very low contrast on purpose, so it never competes with the text.
   -------------------------------------------------------------------------- */
.claimbox {
  margin: clamp(28px, 3.5vw, 40px) 0;
  padding: clamp(20px, 3vw, 28px);
  border: 1px dashed var(--rubric);
  border-left-width: 4px;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background:
    repeating-linear-gradient(45deg,
      rgba(156, 74, 36, .045) 0 2px, transparent 2px 9px),
    var(--paper-2);
}
.claimbox > .reg {
  background: transparent; border-left: 0; padding: 0; margin-bottom: var(--s-3);
}
.claimbox h3 { margin-bottom: var(--s-3); }
.claim-foot {
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px dashed rgba(156, 74, 36, .35);
  font-size: var(--fs-small); color: var(--ink-soft);
}

/* The intelligences.

   Two components, not one list, and that is a content decision rather than a
   visual one. A single ordered list running to nine items asserts "nine" by
   its numbering no matter what the words beside it say, which would have
   quietly undone the four paragraphs above it. So the original seven are a
   numbered list, and the later addition and the standing candidate are two
   tagged blocks after it, each carrying its status as real text. */
.mi-heading {
  font-size: .6875rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-soft); margin: var(--s-5) 0 var(--s-3);
}
.mi-list { list-style: none; counter-reset: mi; display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.mi-list li {
  counter-increment: mi;
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--s-1) var(--s-3);
  align-items: baseline;
}
.mi-list li::before {
  content: counter(mi, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--font-display); font-size: 1rem; color: var(--rubric);
  font-variant-numeric: tabular-nums;
}
.mi-list b { font-size: 1.0625rem; }
.mi-list span { grid-column: 2; color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.55; }
@media (min-width: 720px) {
  .mi-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-6); }
}

/* The eighth and the candidate. Deliberately unnumbered, deliberately set
   apart from the seven, and each carries its status in words before its name.
   The candidate is dashed on all four sides: an outline is not a fill, the
   same encoding the framework's-account marker uses. */
.mi-extra { list-style: none; display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.mi-extra li {
  display: grid; gap: var(--s-1);
  padding: var(--s-4);
  background: var(--card);
  border: 1px solid var(--rubric);
  border-left-width: 4px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.mi-extra--candidate { border-style: dashed; }
.mi-tag {
  margin: 0; font-size: .6875rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rubric);
}
.mi-extra b { font-size: 1.0625rem; }
.mi-extra span { color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.55; }
@media (min-width: 720px) {
  .mi-extra { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
}

/* --------------------------------------------------------------------------
   11 · Stop box: where the page declines to go further

   Green is the page's second cool value and it owns one component: the block
   that says "we stop here". It survived round 5's move to the owner's teal
   unchanged, because a second value is what keeps the stop box from reading
   as just another section. The heading uses --green-deep at 5.2:1 on the
   tint; the body is ink at 15:1.
   -------------------------------------------------------------------------- */
.stopbox {
  margin: clamp(28px, 3.5vw, 40px) 0;
  padding: clamp(20px, 3vw, 28px);
  background: var(--green-tint);
  border: 1px solid rgba(30, 72, 53, .3);
  border-left: 5px solid var(--green-deep);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.stopbox h3 {
  font-family: var(--font-body); font-size: .8125rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--green-deep);
  margin-bottom: var(--s-3);
}
.stopbox p { color: var(--ink); max-width: 66ch; }

/* --------------------------------------------------------------------------
   12 · Timelines

   Two variants on one component. The history timeline carries years, the
   embryology timeline carries weeks of gestation; the second is the
   centrepiece of the page and gets the heavier treatment.
   -------------------------------------------------------------------------- */
.timeline { list-style: none; display: grid; gap: 0; margin: var(--s-5) 0 var(--s-4); }
.timeline li {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1);
  padding: var(--s-4) 0 var(--s-4) var(--s-6);
  position: relative;
}
/* The spine. A single continuous line down the list, with a node per item. */
.timeline li::before {
  content: ''; position: absolute; left: 7px; top: 0; bottom: 0;
  width: 2px; background: var(--rule);
}
.timeline li:first-child::before { top: 22px; }
.timeline li:last-child::before { bottom: auto; height: 22px; }
.timeline li::after {
  content: ''; position: absolute; left: 0; top: 16px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--teal);
}
.tl-when {
  margin: 0; font-family: var(--font-body); font-size: .75rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--teal);
}
.tl-what h3, .tl-what h4 { margin-bottom: var(--s-1); }
.tl-what h3 { font-size: 1.25rem; }
.tl-what p { font-size: var(--fs-body); color: var(--ink-soft); margin-bottom: 0; }

.timeline--weeks li::after { border-color: var(--green-deep); }
.timeline--weeks .tl-when { color: var(--green-deep); }
.timeline--weeks li:nth-child(odd) { background: linear-gradient(90deg, transparent 0 24px, var(--paper-2) 24px); }

/* Above 640px the label moves into its own column, so the seven weeks read as
   a column of times with events beside them rather than as seven headings. */
@media (min-width: 640px) {
  .timeline li {
    grid-template-columns: 128px minmax(0, 1fr);
    gap: var(--s-4);
    align-items: baseline;
  }
  .tl-when { padding-top: 3px; }
}

/* --------------------------------------------------------------------------
   13 · Quotients
   -------------------------------------------------------------------------- */
.quotients { display: grid; gap: var(--s-3); margin: var(--s-5) 0 var(--s-4); }
.quotients > div {
  display: grid; gap: var(--s-1);
  padding: var(--s-4);
  background: var(--paper-2); border-radius: var(--r-md);
  /* Pass 2 took a 4px left tab off this block and off the reference entry. On
     this page a thick left rule is not decoration, it is the register system:
     solid means established, dashed means the framework's account, dotted
     means background, and the stop box owns the green one. Wearing the same
     device on two components that carry no register at all was diluting the
     one signal the page cannot afford to have diluted. A hairline all round
     says "grouped" without saying "registered". */
  border: 1px solid var(--rule-soft);
}
.quotients dt {
  font-weight: 600; display: flex; align-items: baseline; gap: var(--s-3);
  flex-wrap: wrap;
}
.q-abbr {
  font-family: var(--font-display); font-size: 1.375rem; font-weight: 600;
  color: var(--teal); letter-spacing: .02em; min-width: 2.2em;
}
.quotients dd { color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.6; }
@media (min-width: 760px) {
  .quotients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   14 · Reference list

   The URLs are printed as text, not hidden behind link words. That is the
   point: a reader can see where a link goes before she taps it, and can type
   it out from a printed copy. Long URLs must be allowed to break anywhere or
   they force a horizontal scroll at 390px.
   -------------------------------------------------------------------------- */
.sec--refs .lead { margin-bottom: var(--s-6); }
/* Last section on the page. Its own bottom padding sat on top of the grid's,
   which put roughly 160px of nothing between the last control and the footer
   once round 3 removed the method box. The grid's padding is enough. */
.sec--refs { padding-bottom: 0; }

.reflist { list-style: none; counter-reset: refn; display: grid; gap: var(--s-4); }
.reflist li {
  counter-increment: refn;
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--s-3);
  padding: var(--s-4);
  background: var(--paper-2); border-radius: var(--r-md);
  border: 1px solid var(--rule-soft);   /* see the note on .quotients > div */
  scroll-margin-top: calc(var(--header-h) + 16px);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.reflist li::before {
  content: counter(refn);
  font-family: var(--font-display); font-size: 1.25rem; color: var(--rubric);
  font-variant-numeric: tabular-nums; line-height: 1.4;
  /* A pseudo element does not inherit its parent's transition, and this one
     changes colour on :target, so it carries its own or it snaps. */
  transition: color var(--dur) var(--ease);
}
/* Jumping from a superscript lands here, and the entry has to say "this one"
   in more than one way: the ground changes, the whole border changes with it,
   and the entry's own number changes colour, which is the part visible from
   the number column where the eye lands. The ring in section 16 is the fourth,
   and the only one of the four that is motion. */
.reflist li:target {
  background: var(--green-tint);
  border-color: rgba(30, 72, 53, .45);
}
.reflist li:target::before { color: var(--green-deep); }

.ref-cite { margin-bottom: var(--s-2); max-width: 62ch; }
.ref-url { margin-bottom: var(--s-2); max-width: none; }
.ref-url a {
  display: inline-block; padding: var(--s-1) 0;
  font-size: .875rem; line-height: 1.5;
  word-break: break-word; overflow-wrap: anywhere;
}
.ref-note { font-size: var(--fs-small); color: var(--ink-soft); max-width: 62ch; }

/* .method was removed in round 3 along with the box it styled. It restated the
   legend's promise a third time, and three statements of one promise is not
   three times the trust. */

.backtotop { margin-top: clamp(32px, 4vw, 48px); }
.backtotop a {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: var(--s-2) var(--s-4);
  font-size: var(--fs-small); font-weight: 600; text-decoration: none;
  color: var(--teal); background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: var(--r-pill);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.backtotop a::before {
  content: ''; width: 8px; height: 8px; flex: none;
  border-left: 2px solid currentColor; border-top: 2px solid currentColor;
  transform: rotate(45deg) translate(1px, 1px);
}
.backtotop a:hover { background: var(--teal-tint); border-color: var(--teal); color: var(--teal); }

/* --------------------------------------------------------------------------
   15 · Footer

   The published-by line is the only route from this page to the business, so
   it is first in the footer and it is the largest thing in it. Quiet, but not
   buried.
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--teal-deep); color: #cfdedd;
  padding-block: clamp(36px, 5vw, 64px);
}
.site-footer p { max-width: 72ch; }
.footer-published {
  font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.4; color: #fff; margin-bottom: var(--s-5);
}
.footer-published b { font-weight: 600; }
/* Padded to clear WCAG 2.2 §2.5.8's 24px target. It reads as inline in a
   sentence, which would exempt it, but it is the only route from this page to
   the business and it is worth more than the exemption. Same correction the
   ASC site made to its footer links in round 7. */
.footer-published a {
  display: inline-block; padding-block: 4px;
  color: #fff; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
/* The hover value has to live on the footer ground, so it is the lift rather
   than the ink: --teal-lift measures 9.1:1 there, --teal measures 1.4:1 and
   would disappear. */
.footer-published a:hover { color: var(--teal-lift); }
.footer-note {
  font-size: var(--fs-small); line-height: 1.6; color: #c4d5d4;
  padding-top: var(--s-4); border-top: 1px solid rgba(255, 255, 255, .16);
}
.footer-legal { font-size: .875rem; color: #a3b8b7; margin-top: var(--s-4); }

/* --------------------------------------------------------------------------
   16 · Motion

   Pass 1 shipped interaction feedback at 180ms and nothing else. Pass 2 keeps
   it that way on purpose, and the reasoning is worth writing down because the
   absence is a decision rather than an omission.

   This page is read by someone who has four reseller tabs open, all of which
   animate. Anything that moves without being asked reads as the page
   performing, which is the one impression it cannot afford. So there is no
   entrance animation, no scroll reveal and no staggered section fade
   anywhere. Motion happens only where the reader has just done something and
   the page is answering her.

   There are exactly two such places, and they are below: the disclosure
   chevron in the contents, and the arrival highlight when a citation lands on
   its reference. The gestation figure in section 03 is deliberately NOT
   animated: a bar that grows is a bar that shows the wrong number of weeks
   while it is growing, and on this page that is not a cost worth paying for a
   flourish.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Tap a superscript, land on the reference. The tint and the rule are the
   persistent marker and are set in section 14; this is the acknowledgement
   that the jump happened, because a page that scrolls silently leaves the
   reader checking whether it moved at all. A ring blooms and clears in a
   second, outside the box so nothing reflows. With motion reduced the global
   rule above collapses it and the persistent tint is all that is left, which
   is the complete state. */
@keyframes ref-arrive {
  0%   { box-shadow: 0 0 0 2px rgba(30, 72, 53, .5); }
  70%  { box-shadow: 0 0 0 2px rgba(30, 72, 53, .5); }
  100% { box-shadow: 0 0 0 2px rgba(30, 72, 53, 0); }
}
.reflist li:target { animation: ref-arrive 1100ms var(--ease) both; }

.toc-disclose > summary::after {
  transition: transform var(--dur) var(--ease);
}

/* --------------------------------------------------------------------------
   17 · Pass 2: the plate

   img/ridge-plate.svg is a loop pattern, computed rather than drawn: a
   square root branch point makes the core, the point where the field's
   derivative vanishes makes the delta, and the lines are evenly spaced level
   sets integrated outward from there. The recipe is in CHANGES.md.

   It fills the empty space pass 1 left to the right of the h1 at 1440. It is
   the subject of section 03 rather than a picture bought to fill a hole, it
   depicts no person and no place, and at this opacity it is closer to a
   watermark on headed paper than to a hero image. Below 1080px there is no
   empty space to fill, so it is not there at all.
   -------------------------------------------------------------------------- */
.masthead { position: relative; overflow: hidden; }
.masthead > .shell { position: relative; z-index: 1; }

/* Round 4 turned this on at every width. It used to be off below 1080px
   because on paper there was no empty space to put it in; on the ink band
   there is, so below 1080px it bleeds off the right edge behind the heading
   as a watermark. The masthead's overflow:hidden is what makes the bleed
   safe, and it is why there is still no horizontal scroll at 390px. */
.plate {
  display: block;
  position: absolute;
  z-index: 0;
  top: -16px;
  right: -72px;
  width: 260px;
  height: auto;
  opacity: .16;
  pointer-events: none;
  user-select: none;
  /* The ground under it is ink now. img/ridge-plate.svg is computed output
     and the standing rule is that it is regenerated, never hand edited, so
     it is inverted at the call site instead: its one stroke, #15232c, comes
     out a warm off-white and the geometry is untouched. */
  filter: invert(1);
  /* A circular vignette centred on the core, so the plate dissolves into the
     ground on every side instead of ending at a rectangle. Browsers without
     mask-image simply get the whole plate at the same opacity, which is a
     fine second-best rather than a broken state. */
  -webkit-mask-image: radial-gradient(closest-side circle at 48% 44%, #000 42%, transparent 94%);
  mask-image: radial-gradient(closest-side circle at 48% 44%, #000 42%, transparent 94%);
}

/* Above 1080px the legend card stops at 860px and leaves a column of ground
   to its right. On paper that column read as margin; on ink it read as a
   hole, so the plate is larger here and set low enough to stand beside the
   card rather than only above it. */
@media (min-width: 1080px) {
  .plate {
    top: clamp(24px, 5vw, 96px);
    right: max(var(--gutter), calc(50% - var(--shell) / 2 + var(--gutter)));
    width: clamp(300px, 30vw, 430px);
    opacity: .2;
  }
}

/* --------------------------------------------------------------------------
   18 · Pass 2: section 03, the one section set as a feature

   .sec--feature was in pass 1's markup with no rule behind it. It gets one
   job, and it is typographic rather than ornamental: section 03 is the only
   section that opens with a standfirst, and the standfirst is set in the
   display face at the weight a magazine would give it. That is the whole
   treatment. The section already earns its emphasis from the figure and the
   timeline inside it, and adding a band or a tint would have been the page
   raising its voice.
   -------------------------------------------------------------------------- */
.sec--feature > .lead {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.08rem + 0.75vw, 1.6rem);
  line-height: 1.42;
  letter-spacing: -.008em;
  color: var(--ink);
  max-width: 46ch;
  margin-bottom: var(--s-5);
}

/* --------------------------------------------------------------------------
   19 · Pass 2: the gestation figure

   The same seven events as the timeline below it, laid on the week axis they
   already carry, so that the intervals read as intervals. It is the one place
   on this page where a picture says something the prose cannot: that nothing
   happens for the five weeks between the pads regressing and the first ridge,
   and that secondary ridges take seven weeks on their own.

   The axis runs week 6 to week 26, so a bar's left edge is (a - 6) / 20 of
   the track and its width is (b - a) / 20. Both come from the two custom
   properties on the row in the markup, which are the same week numbers the
   list below prints as text.

   Shape carries the distinction, not colour: a span of weeks is a filled bar,
   a single moment is a hollow ring. That is the same filled-against-outline
   encoding the register markers use, and it survives greyscale and print.
   -------------------------------------------------------------------------- */
.gest {
  margin: var(--s-5) 0 var(--s-6);
  padding: var(--s-5) var(--s-5) var(--s-4);
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-md);
}
.gest-rows { list-style: none; display: grid; gap: var(--s-3); }
.gest-row {
  display: grid; grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--s-3); align-items: center;
}
.gest-name {
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft); line-height: 1.35;
}
.gest-track { position: relative; display: block; height: 14px; }
.gest-track::before {
  content: ''; position: absolute; left: 0; right: 0; top: 6px;
  height: 1px; background: var(--rule);
}
.gest-bar {
  position: absolute; top: 3px; height: 8px; border-radius: 2px;
  left: calc((var(--a) - 6) / 20 * 100%);
  width: calc((var(--b) - var(--a)) / 20 * 100%);
  background: var(--green-deep);
}
/* A moment rather than a span: hollow, centred on its week, and the same
   node the timeline below draws for each of its steps. */
.gest-row--point .gest-bar {
  width: 11px; height: 11px; top: 1px; margin-left: -5.5px;
  border-radius: 50%; background: var(--paper);
  border: 2.5px solid var(--green-deep);
}

.gest-axis {
  display: grid; grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--s-3); align-items: start;
  margin: var(--s-3) 0 0; max-width: none;
}
.gest-unit {
  font-size: .6875rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft);
}
.gest-ticks { position: relative; display: block; height: 20px; }
/* The row guides above are deliberately faint; this one is not. It is the
   scale, and relating a bar to a week number is the whole job of the figure,
   so the axis and its ticks are drawn in ink rather than in paper rule. */
.gest-ticks::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0;
  height: 1px; background: rgba(77, 91, 102, .42);
}
.gest-ticks span {
  position: absolute; top: 6px; left: calc((var(--a) - 6) / 20 * 100%);
  transform: translateX(-50%);
  font-size: .6875rem; line-height: 1; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.gest-ticks span::before {
  content: ''; position: absolute; left: 50%; top: -5px;
  width: 1px; height: 4px; background: rgba(77, 91, 102, .42);
}
@media (min-width: 640px) {
  .gest-row, .gest-axis { grid-template-columns: 128px minmax(0, 1fr); gap: var(--s-4); }
  .gest-name { font-size: .75rem; }
}

/* --------------------------------------------------------------------------
   20 · Pass 2: the three remaining components pass 1 left unstyled

   Each of these was a class in the markup with no rule behind it. Each now
   does one job, or it would have been taken out of the HTML instead.
   -------------------------------------------------------------------------- */

/* A year is a numeral, not a label. The history timeline carries 1823, 1892
   and 1926, and setting them in the display face at reading size makes them
   dates; the weeks timeline keeps the small uppercase treatment, because
   "Week 17 to 24" is a label and reads as one. */
.timeline--history .tl-when {
  font-family: var(--font-display);
  font-size: 1.3125rem; line-height: 1.15;
  letter-spacing: 0; text-transform: none;
  color: var(--teal);
}
@media (min-width: 640px) {
  .timeline--history .tl-when { padding-top: 0; }
}

/* The eighth against the candidate. Both are cited history, so they are the
   same colour on purpose: the difference between them is carried by the words
   in the tag and by the shape of the mark in front of it, filled against
   hollow, exactly as the register markers do it. Colour is doing no work
   here, which is the point. */
.mi-tag::before {
  content: ''; display: inline-block; width: 9px; height: 9px;
  margin-right: 7px; vertical-align: baseline;
}
.mi-extra--added .mi-tag::before { background: var(--rubric); }
.mi-extra--candidate .mi-tag::before {
  border: 2px solid var(--rubric); border-radius: 50%; background: none;
  width: 10px; height: 10px;
}

/* The reference entry's body sits in the second column of a two column grid
   next to its number. Grid items are min-width:auto by default, so a single
   unbroken URL sets the column's minimum and pushes the whole list wider than
   the viewport at 390px. This is the rule that stops that. */
.ref-body { min-width: 0; }

/* The contents rail. The current entry already changes ground and rule; its
   numeral changing with it means the marker is legible from the numeral
   column alone, which is where the eye is when scanning a list of numbers. */
.toc-list a[aria-current="true"] i { color: var(--teal); }

/* --------------------------------------------------------------------------
   21 · Print
   A reference page that cannot be printed with its references legible is not
   a reference page. The URLs are already text, so this is mostly a matter of
   getting the furniture out of the way.
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .toc { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .page-grid { display: block; padding: 0; }
  .masthead { background: none; border-bottom: 1px solid #999; }
  .sec { break-inside: auto; }
  .sec h2, .sec h3, .sec h4 { break-after: avoid; }
  .reflist li, .claimbox, .stopbox, .timeline li { break-inside: avoid; }
  /* The plate is a watermark and a watermark is a screen affordance; on paper
     it would print as a grey rectangle over the title. */
  .plate { display: none !important; }
  /* The figure keeps its bars: it is drawn in ink, its two marks are filled
     against hollow rather than two colours, and it is the one picture on the
     page worth the toner. Print engines drop backgrounds by default, so the
     bars are given a print colour adjustment explicitly. */
  .gest { break-inside: avoid; background: none; border-color: #999; }
  .gest-bar, .gest-track::before, .gest-ticks::before, .gest-ticks span::before {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .site-footer { background: none; color: #000; border-top: 1px solid #999; }
  .footer-published, .footer-published a, .footer-note, .footer-legal { color: #000; }
  a { color: #000; }
}