/* Tooldossier: print-desk look. Serif, ruled, narrow measure, no frameworks.
   Colours live as tokens on :root and are redefined for dark mode below. */

:root {
  /* Aged paper, kept FLAT. No gradient anywhere on this site, by instruction:
     the look comes from warm paper tones, rules and stamps, not from shading. */
  --paper: #efe9da;
  --paper-2: #e7e0ce;
  --ink: #15120d;
  --ink-soft: #4a443a;
  --rule: #bdb29b;
  --rule-soft: #d8cfb9;
  --accent: #96261c;
  --card: #f7f2e6;
  --measure: 36rem;
  --wrap: 62rem;
  /* Three roles, not one face. Monospace stays where alignment and character
     earn their keep (prices, dates, file numbers, labels) and gets out of the
     way of running prose, where it costs real reading effort. */
  --type: "Source Serif 4", Georgia, "Times New Roman", serif;
  --display: "Special Elite", "Courier New", monospace;
  --data: "Courier Prime", "Courier New", Courier, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #17150f;
    --paper-2: #1e1b14;
    --ink: #f2ebd9;
    --ink-soft: #b3aa94;
    --rule: #3c372b;
    --rule-soft: #2a2620;
    --accent: #d9776a;
    --card: #1e1b14;
  }
}
:root[data-theme="dark"] {
  --paper: #17150f;
  --paper-2: #1e1b14;
  --ink: #f2ebd9;
  --ink-soft: #b3aa94;
  --rule: #3c372b;
  --rule-soft: #2a2620;
  --accent: #d9776a;
  --card: #1e1b14;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--type);
  font-size: 1.08rem;
  font-weight: 420;
  line-height: 1.58;
  letter-spacing: 0;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }

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

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper); padding: .6rem 1rem;
}
.skip:focus { left: 8px; top: 8px; z-index: 10; }

/* ---------------------------------------------------------------- masthead */

.masthead { border-bottom: 3px double var(--rule); padding: 1.1rem 0 1.3rem; text-align: center; }

.dateline {
  margin: 0 0 .7rem;
  font-family: var(--display);
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
  display: flex; gap: .55rem; justify-content: center; flex-wrap: wrap;
}

.wordmark { margin: 0; line-height: 1; }
.wordmark a {
  font-family: var(--display);
  font-size: clamp(2.3rem, 9vw, 4rem);
  font-weight: 700; letter-spacing: -.01em;
  color: var(--ink); text-decoration: none;
}
.tagline {
  margin: .6rem auto 0; max-width: 32rem;
  font-style: italic; color: var(--ink-soft); font-size: .95rem;
}

.nav { border-bottom: 1px solid var(--rule); }
.nav ul {
  list-style: none; margin: 0; padding: .55rem 0;
  display: flex; gap: 1.4rem; justify-content: center; flex-wrap: wrap;
}
.nav a {
  font-family: var(--display);
  font-size: .8rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
.nav a:hover { color: var(--accent); text-decoration: underline; }

/* -------------------------------------------------------------------- type */

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.2; }
h1 { font-size: clamp(1.8rem, 6vw, 2.9rem); margin: .2rem 0 .5rem; }
h2 { font-size: clamp(1.3rem, 4vw, 1.7rem); margin: 2.4rem 0 .8rem; }
h3 { font-size: 1.12rem; margin: 0 0 .3rem; }
h1 a, h2 a, h3 a { color: inherit; text-decoration: none; }
h1 a:hover, h2 a:hover, h3 a:hover { color: var(--accent); }

.rule { border-top: 1px solid var(--rule); padding-top: .7rem; }

.kicker {
  margin: 0; font-family: var(--display);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}
.meta { margin: .1rem 0 .8rem; font-size: .82rem; color: var(--ink-soft); }
.meta a { color: var(--ink-soft); }
.standfirst { font-size: 1.05rem; line-height: 1.55; color: var(--ink-soft); max-width: var(--measure); }
.small { font-size: .8rem; color: var(--ink-soft); }
.empty { color: var(--ink-soft); font-style: italic; }

.lead { padding: 1.8rem 0 1.4rem; border-bottom: 1px solid var(--rule); text-align: center; }
.lead .standfirst { margin-inline: auto; }
.more {
  font-family: var(--display);
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
}

/* ------------------------------------------------------------------- cards */

.cards { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1px;
         grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
         background: var(--rule-soft); border: 1px solid var(--rule-soft); }
.card { background: var(--card); padding: 1rem 1.05rem 1.1rem; }
.fileno { margin: 0 0 .35rem; font-family: var(--display);
          font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.card .cat { margin: 0; font-size: .78rem; color: var(--ink-soft); }
.card .price { margin: .5rem 0 .2rem; font-family: var(--display);
               font-size: 1.05rem; font-weight: 700; }
.card .meta { margin: .3rem 0 0; font-size: .76rem; }

.notes { list-style: none; margin: .8rem 0 0; padding: 0; }
.notes li { display: flex; justify-content: space-between; gap: 1rem;
            padding: .55rem 0; border-bottom: 1px dotted var(--rule); }
.notes time, .notes .small { color: var(--ink-soft); font-size: .82rem; white-space: nowrap; }
.notes.big li { padding: .8rem 0; font-size: 1.08rem; }

/* -------------------------------------------------------------- documents */

/* top and bottom only: the shorthand zeroed .wrap's 16px side gutter, so on a
   phone every article ran edge to edge */
.doc { padding-top: 1.8rem; padding-bottom: 2.4rem; }
.crumbs { font-size: .78rem; color: var(--ink-soft); margin-bottom: .9rem;
          display: flex; gap: .5rem; flex-wrap: wrap; }
.crumbs a { color: var(--ink-soft); }

.prose, .doc > p, .doc > h2, .doc > h3, .doc > ul, .doc > dl { max-width: var(--measure); }
.prose h2:first-child { margin-top: 1.4rem; }
.prose ul, .prose ol { padding-left: 1.15rem; }
.prose li { margin: .35rem 0; }

.answer { max-width: var(--measure); margin: 1.3rem 0; padding: .9rem 1.1rem;
          background: var(--card); border-left: 3px solid var(--accent); }
.answer p { margin: 0; }

.ticks { max-width: var(--measure); padding-left: 1.15rem; }
.ticks li { margin: .45rem 0; }

.alts { list-style: none; padding: 0; max-width: var(--measure); }
.alts li { padding: .7rem 0; border-bottom: 1px dotted var(--rule); }

.faq { max-width: var(--measure); }
.faq dt { font-weight: 600; margin-top: 1.1rem; }
.faq dd { margin: .3rem 0 0; color: var(--ink-soft); }

.verify { max-width: var(--measure); padding: .85rem 1rem; background: var(--card);
          border: 1px solid var(--rule-soft); font-size: .92rem; }

.stamp { max-width: var(--measure); margin-top: 2rem; padding-top: .8rem;
         border-top: 1px solid var(--rule); font-size: .82rem; color: var(--ink-soft);
         font-style: italic; }

/* ------------------------------------------------------------------ tables */

.tablewrap { overflow-x: auto; margin: 1rem 0 1.6rem; -webkit-overflow-scrolling: touch; }
table.plans { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .92rem; }
table.plans th, table.plans td { text-align: left; padding: .6rem .7rem;
                                 border-bottom: 1px solid var(--rule-soft); }
table.plans thead th { font-family: var(--display);
                       font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
                       color: var(--ink-soft); border-bottom: 1px solid var(--rule); }
table.plans tbody th { font-weight: 600; }
table.plans tr.note td { font-size: .84rem; color: var(--ink-soft); font-style: italic;
                         padding-top: 0; border-bottom: 1px solid var(--rule-soft); }

/* ------------------------------------------------------------------ footer */

.foot { border-top: 3px double var(--rule); margin-top: 2.5rem; padding: 1.6rem 0 2.4rem;
        color: var(--ink-soft); font-size: .88rem; }
.foot-name { margin: 0 0 .3rem; font-family: var(--display);
             font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.foot p { max-width: var(--measure); }
.foot-links { list-style: none; padding: 0; margin: .9rem 0; display: flex; gap: 1.1rem; flex-wrap: wrap; }

@media (max-width: 34rem) {
  .nav ul { gap: .9rem; }
  .lead { text-align: left; }
  .lead .standfirst { margin-inline: 0; }
  .dateline { justify-content: flex-start; }
  .masthead { text-align: left; }
}

/* ------------------------------------------------------------------- forms */

.form { max-width: var(--measure); margin: 1.4rem 0 2rem; }
.field { display: block; margin: 0 0 1.1rem; }
.field label { display: block; font-family: var(--display);
               font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
               color: var(--ink-soft); margin-bottom: .3rem; }
.field input, .field textarea, .field select {
  width: 100%; padding: .55rem .65rem; font: inherit; font-size: 1rem;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--rule); border-radius: 0;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.field .hint { display: block; margin-top: .3rem; font-size: .82rem; color: var(--ink-soft); }
.form button {
  font-family: var(--display);
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .65rem 1.4rem; color: var(--paper); background: var(--ink);
  border: 1px solid var(--ink); cursor: pointer;
}
.form button:hover { background: var(--accent); border-color: var(--accent); }

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.errors { max-width: var(--measure); margin: 1.2rem 0; padding: .85rem 1.1rem;
          background: var(--card); border-left: 3px solid var(--accent); }
.errors p { margin: 0 0 .4rem; }
.errors ul { margin: 0; padding-left: 1.15rem; }

/* ------------------------------------------------- red ink stamps + leaders */

/* A rubber stamp: rotated, double-ruled, ink-red, slightly imperfect.
   No image, no gradient, no opacity trickery that would hurt contrast. */
.stampmark {
  display: inline-block;
  font-family: var(--display);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
  border: 2px solid var(--accent); border-radius: 2px;
  padding: .3rem .6rem;
  transform: rotate(-3deg);
  box-shadow: inset 0 0 0 1px var(--paper);
  white-space: nowrap;
}
.stampmark.flat { transform: none; }
.stampmark.big { font-size: .82rem; padding: .45rem .9rem; }

.stamprow { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap;
            margin: 1rem 0 0; }

/* Old book index: label, dotted leader, value. */
.leaders { list-style: none; margin: 1rem 0 1.6rem; padding: 0; }
.leaders li { display: flex; align-items: baseline; gap: .45rem; padding: .3rem 0; }
.leaders .nm { white-space: nowrap; }
.leaders .dots { flex: 1 1 auto; border-bottom: 1px dotted var(--rule);
                 transform: translateY(-.3rem); min-width: 1.5rem; }
.leaders .val { white-space: nowrap; font-family: var(--display); }
.leaders .val.muted { color: var(--ink-soft); }

/* Disclosure sits high on every commercial page, in plain words. */
.disclosure {
  max-width: var(--measure); margin: 1.1rem 0 1.4rem;
  padding: .6rem .8rem; background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  font-size: .84rem; color: var(--ink-soft);
}
.disclosure strong { color: var(--ink); }

/* Featured slot. Deliberately OUTSIDE any ranked list, and always labelled. */
.featured { max-width: var(--measure); margin: 1.6rem 0;
            border: 2px solid var(--rule); background: var(--card); padding: .9rem 1rem; }
.featured .lbl { font-family: var(--display); font-size: .7rem; letter-spacing: .14em;
                 text-transform: uppercase; color: var(--accent); display: block;
                 margin-bottom: .3rem; }

/* --------------------------------------------- reader corrections, "tell us" */

.tellus { max-width: var(--measure); margin: 2.4rem 0 0; padding: 1.1rem 1.2rem;
          background: var(--paper-2); border: 1px solid var(--rule); }
.tellus h2 { margin: 0 0 .2rem; font-size: 1.15rem; }
.tellus .form { margin: .8rem 0 .6rem; }
.tellus .field { margin-bottom: .8rem; }
.note-small { font-size: .84rem; color: var(--ink-soft); margin: .2rem 0 .6rem; }
.errline { color: var(--accent); font-size: .88rem; margin: .3rem 0; }

/* The "why" line sits under its leader row, indented, without a leader. */
.leaders li.why { padding: 0 0 .7rem 0; color: var(--ink-soft); font-size: .9rem;
                  display: block; }

/* The masthead mark. Sized by height so the circle never dominates a phone. */
.logo { display: block; width: auto; height: clamp(104px, 26vw, 148px); margin: 0 auto; }
@media (max-width: 34rem) { .logo { margin: 0; } }

/* ===========================================================================
   VISUAL PASS. Brief was: no gradients, no illustrations, no hero fluff.
   Plain is not the same as flat, so the interest here comes from print
   language: ledger rules, folder tabs, red annotation ink, type scale and
   tabular figures. Still zero gradients and zero decorative images.
   ========================================================================= */

:root {
  --ink-2: #3a332b;      /* secondary ink, for rules that should not shout */
  --stock: #e6dfcb;      /* card stock, a shade off the page */
  --red: var(--accent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ink-2: #c8bfa8; --stock: #221f17; }
}
:root[data-theme="dark"] { --ink-2: #c8bfa8; --stock: #221f17; }

/* ----------------------------------------------- masthead, with more weight */

.masthead { padding: 1.4rem 0 1rem; border-bottom: 1px solid var(--rule); }
.masthead .wrap { position: relative; }

.dateline {
  font-size: .68rem; letter-spacing: .18em;
  padding-bottom: .8rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--rule-soft);
}
.dateline span, .dateline time { white-space: nowrap; }

.tagline {
  margin-top: .5rem; font-style: normal;
  font-family: var(--display); font-size: .74rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2);
}

/* Drawer navigation as folder tabs sitting on the rule. */
.nav { border-bottom: 2px solid var(--ink-2); }
.nav ul { gap: 0; padding: 0; align-items: flex-end; }
.nav li { margin: 0; }
.nav a {
  display: block; padding: .5rem .95rem .45rem;
  border: 1px solid var(--rule); border-bottom: none;
  background: var(--stock);
  border-radius: 3px 3px 0 0;
  margin-right: 2px;
  font-size: .72rem; letter-spacing: .12em;
}
.nav a:hover { background: var(--card); color: var(--red); text-decoration: none; }

/* -------------------------------------------------------- front-page lead */

.lead { border-bottom: 2px solid var(--ink-2); padding: 2rem 0 1.8rem; }
.lead .kicker {
  display: inline-block; margin-bottom: .7rem;
  border-top: 2px solid var(--red); border-bottom: 2px solid var(--red);
  padding: .2rem 0; font-size: .66rem; letter-spacing: .2em;
}
.lead h1 { font-size: clamp(2rem, 7vw, 3.4rem); letter-spacing: -.01em; }
.lead .standfirst { font-size: 1.12rem; color: var(--ink); }
.more {
  display: inline-block; margin-top: 1rem; padding: .45rem 1.1rem;
  border: 2px solid var(--ink); color: var(--ink); text-decoration: none;
}
.more:hover { background: var(--ink); color: var(--paper); }

/* --------------------------------------- cards as index cards with a tab */

.cards { gap: 1.1rem; background: none; border: none; }
.card {
  position: relative; background: var(--stock);
  border: 1px solid var(--ink-2); padding: 1.5rem 1.05rem 1.1rem;
}
/* the tab: a small flag in the top-left, like a drawer divider */
.card .fileno {
  position: absolute; top: -1px; left: -1px;
  background: var(--ink-2); color: var(--paper);
  padding: .18rem .5rem; font-size: .62rem; letter-spacing: .12em;
  margin: 0;
}
.card h2, .card h3 { margin-top: .3rem; font-size: 1.25rem; }
.card .price {
  font-size: 1.3rem; border-top: 1px solid var(--rule);
  padding-top: .5rem; margin-top: .7rem;
  font-variant-numeric: tabular-nums;
}
.card:hover { border-color: var(--red); }

/* the vendor's pricing page pinned to the card: an exhibit, not decoration */
.card .exhibit {
  display: block; margin: .2rem 0 .8rem;
  border: 1px solid var(--ink-2); background: var(--paper);
  padding: 4px; box-shadow: 2px 2px 0 var(--rule);
}
.card .exhibit img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; }
.card:hover .exhibit { border-color: var(--red); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card .exhibit img { filter: brightness(.82); }
}
:root[data-theme="dark"] .card .exhibit img { filter: brightness(.82); }

/* ------------------------------------------------- ledger-ruled price table */

table.plans { font-size: .95rem; }
table.plans thead th {
  border-top: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  font-size: .66rem; letter-spacing: .14em;
}
table.plans tbody tr:nth-child(4n+1) { background: var(--stock); }
table.plans tbody th { font-family: var(--display); font-size: 1.02rem; }
table.plans td:nth-child(2) {
  font-family: var(--display); font-size: 1.05rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.plans tr.note td { background: none; padding-bottom: .6rem; }

/* ------------------------------------------------- red ink used as annotation */

.doc h2 {
  padding-left: .9rem; border-left: 3px solid var(--red);
  margin-left: -.9rem;
}
.answer { border-left-width: 6px; background: var(--stock); }
.answer p::first-line { font-variant: small-caps; letter-spacing: .02em; }

/* A drop cap on the long-form section, the oldest trick in print. */
.prose > p:first-of-type::first-letter {
  float: left; font-family: var(--display); font-size: 3.1rem;
  line-height: .82; padding: .1rem .5rem .1rem 0; color: var(--red);
}

.ticks { list-style: none; padding-left: 0; }
.ticks li { padding-left: 1.6rem; position: relative; }
/* A drawn rule, not an em dash character: the house style bans the character
   even where it would only be decoration. */
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .85rem; height: 0; border-top: 2px solid var(--red);
}

/* The stamp, rotated a little further and given room to breathe. */
.stamprow { margin: 1.2rem 0 .4rem; }
.stampmark { transform: rotate(-4deg); border-width: 2px; letter-spacing: .16em; }
.stampmark::before, .stampmark::after { content: "\00a0"; }

/* --------------------------------------------------------- leaders, firmer */

.leaders li { padding: .45rem 0; align-items: baseline; }
.leaders .nm { font-family: var(--display); font-size: 1.05rem; }
.leaders .val { font-variant-numeric: tabular-nums; color: var(--ink); }
.leaders li.why { padding-left: 0; font-size: .92rem; }

/* ------------------------------------------------------------ footer, ruled */

.foot { border-top: 2px solid var(--ink-2); }
.foot-name { font-size: 1.25rem; letter-spacing: .02em; }

/* Keep the lead left-aligned on phones: centred display type at 2rem on a
   narrow screen reads as a greetings card, not a front page. */
@media (max-width: 34rem) {
  .lead { text-align: left; padding-top: 1.4rem; }
  .nav ul { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0; }
  .nav a { white-space: nowrap; }
  .doc h2 { margin-left: 0; }
}

.featured .ft-name { margin: .2rem 0 .5rem; font-family: var(--display); font-size: 1.2rem; }
.featured .ft-note { margin: 0; font-size: .82rem; color: var(--ink-soft); }

/* ===========================================================================
   READABILITY PASS. The previous build set every role in monospace and leaned
   on wide letter-spacing, which read as "designed" and scanned badly. Prose is
   now a screen serif at a real weight; monospace is kept for anything that is
   a figure, a date or a label, where a fixed width genuinely helps.
   ========================================================================= */

/* Data keeps the typewriter, and keeps its alignment. */
.dateline, .kicker, .fileno, .meta, .nav a, .stampmark, .more,
.leaders .val, .card .price, table.plans thead th, table.plans td:nth-child(2),
.field label, .small, .note-small, .tagline {
  font-family: var(--data);
}
table.plans tbody th { font-family: var(--data); font-weight: 700; }

/* Spacing dialled back. The old values were set for a masthead and then applied
   to everything, which is why ordinary labels looked stretched. */
.dateline   { letter-spacing: .08em; }
.kicker     { letter-spacing: .1em; }
.nav a      { letter-spacing: .04em; font-size: .78rem; }
.tagline    { letter-spacing: .06em; font-size: .78rem; }
.fileno     { letter-spacing: .06em; }
.stampmark  { letter-spacing: .08em; }
.field label { letter-spacing: .05em; }
.more       { letter-spacing: .06em; }
table.plans thead th { letter-spacing: .05em; }

/* Headings: heavier, tighter, darker. */
h1, h2, h3 { color: var(--ink); letter-spacing: -.005em; }
h1 { line-height: 1.1; }
h2 { font-size: clamp(1.35rem, 4vw, 1.8rem); margin-top: 2.2rem; }
.doc h2, .doc h3 { color: var(--ink); }

/* Prose: a comfortable measure and a visible paragraph rhythm. */
.prose, .doc > p, .doc > ul, .doc > dl { max-width: 34rem; }
.prose p { margin: 0 0 1.05rem; }
.standfirst { color: var(--ink); font-weight: 450; font-size: 1.14rem; line-height: 1.5; }
.meta { color: var(--ink-soft); font-size: .8rem; letter-spacing: .02em; }
.answer p { font-size: 1.06rem; }
.answer p::first-line { font-variant: normal; letter-spacing: 0; }

/* Tables: the numbers are the point, so give them weight and room. */
table.plans { font-size: 1rem; }
table.plans th, table.plans td { padding: .7rem .75rem; }
table.plans td:nth-child(2) { font-weight: 700; font-size: 1.08rem; color: var(--ink); }
table.plans tr.note td { font-style: normal; font-size: .9rem; line-height: 1.5; }

/* Links: readable rather than decorative. */
a { text-underline-offset: 3px; }
.prose a, .doc p a { text-decoration-thickness: 1px; }

.faq dt { font-size: 1.06rem; }
.faq dd { color: var(--ink); margin-bottom: .9rem; }

.ticks li { margin: .55rem 0; line-height: 1.55; }
.leaders .nm { font-family: var(--type); font-weight: 600; font-size: 1.04rem; }

/* ---------------------------------------------- evidence: the vendor's page */

/* Not decoration. This is the receipt for the figures in the table above it,
   so it is framed like a filed exhibit and captioned with its date. */
.evidence { margin: 1.6rem 0 2rem; max-width: 46rem; }
.evidence img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--ink-2);
  background: var(--card);
}
.evidence figcaption {
  margin-top: .55rem; padding-left: .7rem;
  border-left: 3px solid var(--red);
  font-family: var(--data); font-size: .82rem; line-height: 1.5;
  color: var(--ink-soft);
}
.evidence figcaption strong { color: var(--ink); }
.evidence-note {
  max-width: 34rem; margin: 1.3rem 0; padding: .7rem .9rem;
  background: var(--paper-2); border-left: 3px solid var(--red);
  font-size: .9rem;
}

/* ------------------------------------------------------------------ slider */

/* No-JS state: the first slide is the lead story, the rest are simply absent.
   The sliding track only exists once the script has run, which is why the
   layout rules are all scoped to .is-ready. */
.slider .slide { display: none; }
.slider .slide:first-child { display: block; }

.slider { position: relative; }

/* With JS: a real horizontal track. The slides sit side by side and the track
   is translated, so the movement is actual sliding rather than a swap. The
   container takes the height of the tallest slide, so nothing jumps. */
.slider.is-ready { overflow: hidden; }
.slider.is-ready .s-track {
  display: flex; align-items: flex-start;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.slider.is-ready .slide {
  display: block; flex: 0 0 100%; min-width: 100%;
  padding: 0 2px;                 /* keeps focus rings off the clipped edge */
}
/* Someone who asked for less motion gets the content, not the animation. */
@media (prefers-reduced-motion: reduce) {
  .slider.is-ready .s-track { transition: none; }
}
.slider.is-ready .slider-nav { position: relative; z-index: 1; }
.slide-title { font-size: clamp(2rem, 7vw, 3.4rem); margin: .2rem 0 .5rem; letter-spacing: -.01em; }
.slide-title a { color: inherit; text-decoration: none; }
.slide-title a:hover { color: var(--red); }

.slider-nav {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  margin-top: 1.3rem; padding-top: .9rem; border-top: 1px solid var(--rule-soft);
  font-family: var(--data);
}
.s-arrow, .s-play {
  font: inherit; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .3rem .6rem; cursor: pointer;
  background: var(--stock); color: var(--ink); border: 1px solid var(--rule);
}
.s-arrow:hover, .s-play:hover { border-color: var(--red); color: var(--red); }
.s-play { margin-left: .5rem; min-width: 4.6rem; }
.s-dots { display: flex; gap: .4rem; align-items: center; }
.s-dot {
  width: .72rem; height: .72rem; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid var(--ink-2);
}
.s-dot.is-on { background: var(--red); border-color: var(--red); }
.s-dot:hover { border-color: var(--red); }

@media (max-width: 34rem) {
  .slider-nav { justify-content: flex-start; flex-wrap: wrap; }
  .s-play { margin-left: 0; }
}

/* ------------------------------------------------------- comparison tables */

table.plans.vs tbody tr:nth-child(4n+1) { background: none; }
table.plans.vs tr.vs-head th {
  background: var(--ink-2); color: var(--paper);
  font-family: var(--display); font-size: 1.05rem; letter-spacing: 0;
  padding: .55rem .75rem; border-bottom: none;
}
table.plans.vs tr.vs-head a { color: var(--paper); }
table.plans.vs .vs-from { float: right; font-family: var(--data); font-size: .9rem; }
table.plans.vs tbody + tbody tr.vs-head th { border-top: 2px solid var(--ink-2); }

.picks { display: grid; gap: 1.1rem; max-width: 46rem;
         grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.pick { background: var(--stock); border: 1px solid var(--ink-2); padding: .9rem 1rem; }
.pick-name { margin: 0 0 .35rem; font-family: var(--display); font-size: 1.15rem; }
.pick p:last-child { margin: 0; }

.thin-link { font-family: var(--data); font-size: .74rem; letter-spacing: .04em;
             text-transform: uppercase; }

.aff { max-width: var(--measure); margin: 1rem 0 1.4rem; display: flex;
       align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.aff a { font-family: var(--display); font-size: 1.02rem; padding: .4rem .9rem;
         border: 2px solid var(--ink); color: var(--ink); text-decoration: none; }
.aff a:hover { background: var(--ink); color: var(--paper); }
.aff-tag { font-family: var(--data); font-size: .72rem; letter-spacing: .08em;
           text-transform: uppercase; color: var(--red); }

/* The homepage h1 is the brand. Visually quiet, because the masthead stamp is
   already doing the branding; this exists so the page has one correct h1 and a
   slide headline never competes with the h1 of the page it links to. */
.brand-h1 {
  margin: 1.4rem 0 .2rem; text-align: center;
  font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase;
  font-family: var(--data); font-weight: 700; color: var(--ink-soft);
}
.brand-h1 span {
  display: block; margin-top: .3rem;
  font-family: var(--type); font-size: 1.22rem; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--ink);
}
@media (max-width: 34rem) { .brand-h1 { text-align: left; } }