/* Stacked Creator
   A twelve-column grid, one grotesk, one mono, black ink and one signal colour.
   The signal (international orange) marks structure only: rules, numerals,
   the current item. Body text and links stay in ink.

   Grid: 12 columns, 24px gutters, 1200px measure. On wide screens columns 1-3
   are the index rail (section labels, contents, page lists) and 4-12 the
   main column. Inside the main column the first column is a gutter for
   hanging section numerals, so running text starts on column 5. */

:root {
  --bg: #ffffff;
  --paper: #f4f4ef;
  --ink: #0a0a0a;
  --ink-2: #363636;
  --muted: #666666;
  --hair: #d7d7d0;
  --signal: #ff4f00;        /* rules, large numerals, focus */
  --signal-text: #c93c00;   /* small text in the signal colour (4.9:1 on white) */
  --graph: #eaeae4;         /* field-notes graph paper */
  --shade: rgba(10, 10, 10, .16); /* edge of a box that scrolls sideways */
  --invert-bg: #0a0a0a;
  --invert-ink: #f4f4ef;
  --invert-signal: #ff5a1f; /* signal on the inverted (verdict) block */

  --sans: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --pad: 40px;
  --gap: 24px;
  --max: 1200px;
  --cols: 9;                /* columns in the main area (changes per breakpoint) */
  --main-span: 5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0b0b;
    --paper: #171716;
    --ink: #f0efe9;
    --ink-2: #c9c8c1;
    --muted: #9a9a94;
    --hair: #33332f;
    --signal: #ff5a1f;
    --signal-text: #ff6a2b;
    --graph: #1d1d1b;
    --shade: rgba(0, 0, 0, .7);
    --invert-bg: #f0efe9;
    --invert-ink: #0b0b0b;
    --invert-signal: #b83700;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
::selection { background: var(--signal); color: #0a0a0a; }

.wrap { max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 8px 14px; z-index: 10; text-decoration: none; font-weight: 700; }
.skip:focus { left: 8px; }

/* The label that sits in the rail: bold grotesk with a short signal bar above. */
.rail-label {
  margin: 0 0 18px;
  font: 800 17px/1.2 var(--sans);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.rail-label::before {
  content: ""; display: block; width: 28px; height: 5px; margin-bottom: 12px; background: var(--signal);
}

/* ---------- masthead ---------- */
.masthead { border-bottom: 5px solid var(--ink); }
.masthead-grid {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 24px; padding-top: 18px; padding-bottom: 16px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 22px; height: 22px; flex: none; fill: var(--ink); }
.brand-mark .bar-top { fill: var(--signal); }
.brand-name { font: 800 22px/1 var(--sans); letter-spacing: -0.035em; white-space: nowrap; }
.masthead-line { order: 3; flex-basis: 100%; margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); max-width: 48em; }
.site-nav { display: flex; gap: 22px; }
.site-nav a { font-weight: 700; font-size: 15px; text-decoration: none; color: var(--ink); padding: 4px 0; border-bottom: 3px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--signal); }

/* ---------- footer ---------- */
.site-footer { margin-top: 128px; border-top: 5px solid var(--ink); padding: 28px 0 36px; font-size: 15px; }
.footer-grid { display: grid; gap: 28px; }
.footer-brand .brand-mark { width: 28px; height: 28px; }
.footer-name { font: 800 24px/1.1 var(--sans); letter-spacing: -0.035em; margin: 12px 0 4px; }
.footer-est { margin: 0; font: 13px/1.4 var(--mono); color: var(--muted); }
.colophon-title { font: 800 15px/1.2 var(--sans); margin: 0 0 8px; }
.colophon p { margin: 0 0 10px; color: var(--ink-2); max-width: 34em; }
.footer-nav { display: flex; flex-direction: column; align-items: flex-start; border-top: 1px solid var(--ink); }
.footer-nav a { display: block; width: 100%; padding: 7px 0; border-bottom: 1px solid var(--hair); text-decoration: none; font-weight: 700; }
.footer-nav a:hover { color: var(--signal-text); }
/* "Cookie settings": a button set exactly like the links around it. Only on
   pages with Google Analytics, and revealed by consent.js (useless without JS). */
.footer-consent {
  display: block; width: 100%; margin: 0; padding: 7px 0; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0;
  background: none; color: inherit; font: inherit; font-weight: 700; text-align: left; cursor: pointer;
}
.footer-consent[hidden] { display: none; }
.footer-consent:hover { color: var(--signal-text); }
.footer-legal { margin-top: 36px; }

/* ---------- cookie bar (only on pages with Google Analytics) ----------
   A ruled strip along the bottom of the window, set like the masthead: heavy
   ink rule, square signal mark, label in the rail. It never blocks the page,
   and consent.js pads the body by its height so the footer stays reachable.
   Accept and Decline are set identically, so neither is the easy way out. */
.consent { display: none; }
.consent-ask .consent {
  display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  max-height: 60vh; overflow-y: auto;
  background: var(--bg); color: var(--ink); border-top: 5px solid var(--ink);
}
.consent:focus { outline: none; }
.consent-grid { display: grid; gap: 10px var(--gap); padding-top: 14px; padding-bottom: 16px; }
.consent-title { margin: 0; font: 800 15px/1.4 var(--sans); }
.consent-title::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--signal); margin-right: 8px; vertical-align: 1px; }
.consent-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 46em; }
.consent-text a { color: var(--ink); font-weight: 700; white-space: nowrap; }
.consent-status { margin: 6px 0 0; font: 12.5px/1.5 var(--mono); color: var(--muted); }
.consent-status[hidden] { display: none; }
.consent-actions { display: flex; gap: 12px; }
.consent-btn {
  flex: 1 1 0; min-width: 0; min-height: 44px; margin: 0; padding: 9px 18px;
  border: 2px solid var(--ink); border-radius: 0; background: var(--bg); color: var(--ink);
  font: 700 15px/1.2 var(--sans); cursor: pointer;
}
.consent-btn:hover { background: var(--ink); color: var(--bg); }
.prose .consent-btn { font-size: 15px; }
@media (min-width: 720px) {
  .consent-grid { grid-template-columns: minmax(0, 1fr) 280px; align-items: end; }
  .consent-title { grid-column: 1 / -1; }
}
@media (min-width: 1080px) {
  .consent-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; padding-top: 16px; padding-bottom: 18px; }
  .consent-title { grid-column: 1 / 4; }
  .consent-body { grid-column: 4 / 10; }
  .consent-actions { grid-column: 10 / 13; }
}
.footer-legal p { margin: 0; padding-top: 12px; border-top: 1px solid var(--hair); font: 12.5px/1.55 var(--mono); color: var(--muted); }
@media (min-width: 1080px) { .footer-legal p { padding-right: 25%; } }

/* ---------- home: statement ---------- */
.front { padding: 56px 0 8px; }
.statement {
  margin: 0 0 40px;
  font: 800 clamp(2.3rem, 1rem + 4.4vw, 4.5rem)/1 var(--sans);
  letter-spacing: -0.042em;
  text-wrap: balance;
  max-width: 14em;
}
.front-intro p { margin: 0 0 14px; font-size: 19px; line-height: 1.5; max-width: 34em; }
.front-intro p + p { font-size: 17px; color: var(--ink-2); }
.facts { margin: 28px 0 0; padding: 0; border-top: 1px solid var(--ink); max-width: 420px; }
.facts div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.facts dt { font: 12.5px/1.6 var(--mono); color: var(--muted); }
.facts dd { margin: 0; font: 13.5px/1.5 var(--mono); }

/* ---------- home + listing: rows ---------- */
.front-row { margin-top: 72px; padding-top: 16px; border-top: 3px solid var(--ink); }
.page-head + .front-row { margin-top: 0 !important; }

.lead-guide-body { position: relative; }
.lead-guide-no { margin: 0 0 6px; font: 800 64px/0.9 var(--sans); letter-spacing: -0.05em; color: var(--signal); }
.lead-guide-no span { display: block; margin-bottom: 6px; font: 400 12px/1.2 var(--mono); letter-spacing: 0; color: var(--muted); }
.lead-guide-title { margin: 0 0 14px; font: 800 clamp(1.75rem, 1rem + 2.6vw, 2.9rem)/1.04 var(--sans); letter-spacing: -0.035em; max-width: 18em; text-wrap: balance; }
.lead-guide-title a { text-decoration: none; }
.lead-guide-title a:hover { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 4px; text-underline-offset: 6px; }
.lead-guide-excerpt { margin: 0 0 14px; font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 34em; }
.lead-guide-meta { margin: 0; font: 13px/1.5 var(--mono); color: var(--muted); }

/* table-of-contents list of guides */
.ix-head { display: none; }
.ix-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.ix-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px;
  padding: 18px 0 20px; border-bottom: 1px solid var(--hair);
}
.ix-no { grid-row: 1 / span 2; white-space: nowrap; font: 800 28px/1 var(--sans); letter-spacing: -0.04em; color: var(--signal); }
.ix-title { margin: 0 0 6px; font: 800 21px/1.18 var(--sans); letter-spacing: -0.02em; text-wrap: balance; }
.ix-title a { text-decoration: none; }
.ix-title a:hover { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 3px; }
.ix-excerpt { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.ix-meta { grid-column: 2; margin: 10px 0 0; font: 12.5px/1.5 var(--mono); color: var(--muted); display: flex; flex-wrap: wrap; gap: 0 14px; }
.ix-cat { color: var(--ink); }

/* subject index, set like the back of a book: name, dot leader, guide number */
.by-subject { margin-top: 44px; max-width: 26rem; }
.by-subject-title { margin: 0 0 8px; font: 12.5px/1.4 var(--mono); color: var(--muted); }
.by-subject ul { list-style: none; margin: 0; padding: 4px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair); }
.bs-row { display: flex; align-items: baseline; gap: 6px; padding: 7px 0; color: var(--ink); text-decoration: none; }
.bs-name { font-weight: 700; font-size: 15px; line-height: 1.3; }
.bs-dots { flex: 1 1 auto; min-width: 12px; height: 0; border-bottom: 2px dotted var(--hair); position: relative; top: -4px; }
.bs-nos { font: 13.5px/1 var(--mono); color: var(--signal-text); white-space: nowrap; }
.bs-nos a { color: inherit; text-decoration: none; padding: 6px 2px; }
a.bs-row:hover .bs-name, .bs-nos a:hover { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; }

/* ---------- page + listing header ---------- */
.page-head { padding: 56px 0 36px; }
.page-title { margin: 0; font: 800 clamp(2.4rem, 1.2rem + 4.4vw, 4.75rem)/0.98 var(--sans); letter-spacing: -0.045em; text-wrap: balance; }
.page-dek { margin: 20px 0 0; font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 34em; }
.page-updated { margin: 16px 0 0; font: 13px/1.4 var(--mono); color: var(--muted); }
.page-body { border-top: 3px solid var(--ink); padding-top: 16px; }

.page-nav ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.page-nav li { border-bottom: 1px solid var(--hair); }
.page-nav a { display: block; padding: 7px 0; text-decoration: none; font-size: 15px; font-weight: 700; }
.page-nav a:hover { color: var(--signal-text); }
.page-nav a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--signal); padding-left: 12px; }
.page-nav .rail-aside { margin: 14px 0 0; font: 13px/1.4 var(--mono); }
.page-nav .rail-aside a { display: inline; padding: 0; font: inherit; }
.page-body .page-nav { display: none; }

/* ---------- article header ---------- */
.post-head { padding: 52px 0 28px; }
.post-filed { margin: 0 0 16px; font: 13.5px/1.4 var(--mono); }
.post-filed a { color: var(--ink); text-decoration: none; }
.post-no { color: var(--muted); margin-right: 10px; }
.post-filed a:hover { text-decoration: underline; text-decoration-color: var(--signal); }
.post-title { margin: 0; font: 800 clamp(1.8rem, 1rem + 3vw, 3.4rem)/1.03 var(--sans); letter-spacing: -0.038em; text-wrap: balance; max-width: 16em; }
.post-dek { margin: 22px 0 0; font-size: 20px; line-height: 1.45; color: var(--ink-2); max-width: 32em; }
.post-meta { margin: 26px 0 0; padding-top: 8px; border-top: 1px solid var(--ink); display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 15px; line-height: 1.35; }
.post-meta div { display: block; }
.post-meta dt { margin-bottom: 2px; font: 12px/1.4 var(--mono); color: var(--muted); }
.post-meta dd { margin: 0; }
.post-meta a { text-decoration: none; font-weight: 700; }
.post-meta a:hover { text-decoration: underline; text-decoration-color: var(--signal); }

.disclosure { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 12px 0 14px; margin: 0 0 40px; }
.disclosure-label { margin: 0 0 4px; font: 800 15px/1.4 var(--sans); }
.disclosure-label::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--signal); margin-right: 8px; vertical-align: 1px; }
.disclosure-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 46em; }

/* contents: a rail on wide screens, a folded list above the text elsewhere */
.toc-rail { display: none; }
.toc-fold { margin-bottom: 40px; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); }
.toc-fold summary {
  list-style: none; cursor: pointer; position: relative;
  display: flex; align-items: baseline; gap: 12px; padding: 12px 36px 12px 0;
}
.toc-fold summary::-webkit-details-marker { display: none; }
.toc-fold summary::after { content: "+"; position: absolute; right: 2px; top: 6px; font: 400 26px/1.2 var(--mono); color: var(--ink); }
.toc-fold[open] summary::after { content: "\2212"; }
.toc-fold-title { font: 800 17px/1.2 var(--sans); }
.toc-fold-count { font: 12.5px/1.2 var(--mono); color: var(--muted); }
.toc-fold ol { border-top-color: var(--hair); }
.toc-fold li:last-child { border-bottom: 0; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; border-top: 1px solid var(--ink); }
.toc li { counter-increment: toc; display: grid; grid-template-columns: 30px 1fr; border-bottom: 1px solid var(--hair); font-size: 14.5px; line-height: 1.3; }
.toc li::before { content: counter(toc, decimal-leading-zero); padding-top: 8px; font: 12px/1.4 var(--mono); color: var(--signal-text); }
.toc a { display: block; padding: 7px 0 8px; text-decoration: none; color: var(--ink-2); }
.toc a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--signal); }
/* the section being read: set by a small inline script on article pages
   (aria-current="true"); without JS nothing is marked. Colour and shadows only,
   so marking an entry never moves anything. */
.toc a[aria-current="true"] { color: var(--ink); }
.toc li:has(> a[aria-current="true"]) { border-bottom-color: var(--signal); box-shadow: inset 0 -2px 0 var(--signal); }
.toc li:has(> a[aria-current="true"])::before { color: var(--signal-text); }

/* ---------- article footer ---------- */
.post-foot { margin-top: 80px; }
.endnote, .related { border-top: 3px solid var(--ink); padding-top: 16px; }
.related { margin-top: 64px; }
.endnote-body p { margin: 0 0 10px; color: var(--ink-2); max-width: 36em; }

/* ---------- prose ---------- */
/* main is the size container: 1cqw = 1% of the 12-column measure, so
   (100cqw + gutter) / 12 is exactly one column plus its gutter anywhere inside. */
main.wrap { container-type: inline-size; }
.prose {
  font-size: 18px; line-height: 1.62;
  counter-reset: sec;
  --indent: 0px;
  --measure: 100%;
}
.prose > * { margin: 0; max-width: var(--measure); }
.prose > * + * { margin-top: 1.05em; }
.prose p, .prose ul, .prose ol, .prose dl { margin-bottom: 0; }
.prose strong { font-weight: 700; }
.prose em { font-style: italic; }

.prose h2 {
  counter-increment: sec;
  position: relative;
  margin-top: 2.6em;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
  font: 800 30px/1.12 var(--sans);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.prose h2::before {
  content: counter(sec, decimal-leading-zero);
  display: block; margin-bottom: 8px;
  font: 800 17px/1 var(--sans); letter-spacing: -0.02em; color: var(--signal-text);
}
.prose h3 { margin-top: 2em; font: 800 21px/1.25 var(--sans); letter-spacing: -0.02em; }
.prose h4 { margin-top: 1.6em; font: 700 18px/1.3 var(--sans); }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .7em; }
.prose > :first-child { margin-top: 0; }

.prose ul, .prose ol { padding-left: 1.35em; }
.prose ul { list-style-type: "\2013\00a0\00a0"; }
.prose li::marker { color: var(--muted); }
.prose ol > li::marker { font: 15px var(--mono); }
.prose li + li { margin-top: .45em; }
.prose li > ul, .prose li > ol { margin-top: .45em; }

.prose code { font: .84em/1 var(--mono); background: var(--paper); padding: .15em .35em; }
.prose pre { font: 14px/1.6 var(--mono); --sc-bg: var(--paper); border-top: 2px solid var(--ink); padding: 14px 16px; overflow-x: auto; }
.prose pre code { background: none; padding: 0; font-size: inherit; line-height: inherit; }
.prose blockquote { position: relative; padding: 4px 0 4px 38px; font-size: 21px; line-height: 1.45; letter-spacing: -0.01em; }
.prose blockquote::before { content: "\201C"; position: absolute; left: -2px; top: -6px; font: 800 52px/1 var(--sans); color: var(--ink); }
.prose blockquote p { margin: 0; }
.prose blockquote p + p { margin-top: .8em; }
.prose blockquote cite, .prose blockquote footer { display: block; margin-top: 10px; font: 13px/1.4 var(--mono); font-style: normal; color: var(--muted); }
.prose hr { border: 0; border-top: 1px solid var(--ink); margin-top: 2.4em; margin-bottom: 0; }
.prose figure { margin-left: 0; margin-right: 0; }
.prose figcaption { margin-top: 8px; font: 13px/1.5 var(--mono); color: var(--muted); }

.prose .lead { font-size: 22px; line-height: 1.45; letter-spacing: -0.01em; color: var(--ink); }

/* quick answer: heavy rule, set larger */
.tldr { border-top: 6px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 0 0 20px; font-size: 19px; line-height: 1.55; }
.tldr h2 { margin: 0; border-top: 0; padding-top: 14px; font-size: 22px; }
.tldr > * + * { margin: .6em 0 0; }

/* notes and warnings: ruled frame with a label set into the top edge */
.callout {
  position: relative; border: 1px solid var(--ink); padding: 22px 20px 16px;
  font-size: 17px; line-height: 1.55; margin-top: 1.9em !important;
}
.callout::before {
  content: "Note"; position: absolute; top: -10px; left: 14px; padding: 0 8px;
  background: var(--bg); font: 13px/20px var(--mono); color: var(--ink);
}
.callout > * { margin: 0; }
.callout > * + * { margin-top: .6em; }
.callout.warn { border: 2px solid var(--signal); }
.callout.warn::before { content: "Caution"; color: var(--bg); background: var(--signal-text); top: -11px; left: 12px; }

/* boxes that scroll sideways (code, wide tables): a soft shade marks the edge
   that has more to scroll to. The two solid covers travel with the content
   (attachment: local) and hide the shade once that end is reached, so a box
   that fits shows nothing. */
.prose pre, .table-wrap {
  background-color: var(--sc-bg);
  background-image:
    linear-gradient(var(--sc-bg), var(--sc-bg)), linear-gradient(var(--sc-bg), var(--sc-bg)),
    linear-gradient(to right, var(--shade), transparent), linear-gradient(to left, var(--shade), transparent);
  background-position: left center, right center, left center, right center;
  background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}

/* tables */
.table-wrap {
  --sc-bg: var(--bg);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-top: 3px solid var(--ink);
  margin-top: 1.6em !important;
}
.prose > .table-wrap { max-width: none; }
/* proportional figures: Schibsted Grotesk's tabular set also widens . , ; : to
   figure width, which reads as "2 , 500" and "Apollo . io" in running cell text */
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.42; font-variant-numeric: lining-nums; }
.table-wrap th, .table-wrap td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--hair); }
.table-wrap th:last-child, .table-wrap td:last-child { padding-right: 0; }
.table-wrap thead th { font: 12.5px/1.4 var(--mono); color: var(--ink-2); padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.table-wrap tbody td:first-child { font-weight: 700; }
.table-wrap tbody tr:last-child td { border-bottom: 1px solid var(--ink); }
.table-wrap code { font-size: .82em; }
.prose .table-note { margin-top: 10px; font: 12.5px/1.55 var(--mono); color: var(--muted); max-width: 70ch; }
.prose .table-note::before { content: "\2191\00a0"; color: var(--ink); }

/* numbered steps with large hanging numerals */
ol.steps { list-style: none; padding: 0; counter-reset: step; border-top: 1px solid var(--ink); }
ol.steps > li { counter-increment: step; position: relative; padding: 14px 0 14px 56px; border-bottom: 1px solid var(--hair); margin: 0; }
ol.steps > li + li { margin-top: 0; }
ol.steps > li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 12px;
  font: 800 26px/1 var(--sans); letter-spacing: -0.04em; color: var(--ink);
}

/* pros and cons: two ruled columns, no boxes */
.pros-cons { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 3px solid var(--ink); margin-top: 1.6em !important; }
.prose > .pros-cons { max-width: none; }
.pros-cons > div { padding: 14px 0 18px; font-size: 16.5px; line-height: 1.5; }
.pros-cons > div + div { border-top: 1px solid var(--ink); }
.pros-cons h3, .pros-cons h4 { margin: 0 0 10px; font: 800 18px/1.2 var(--sans); letter-spacing: -0.015em; display: flex; align-items: baseline; gap: 10px; }
.pros-cons h3::before, .pros-cons h4::before { font: 800 26px/0.8 var(--sans); color: var(--ink); width: 18px; }
.pros-cons .pros h3::before, .pros-cons .pros h4::before { content: "+"; }
.pros-cons .cons h3::before, .pros-cons .cons h4::before { content: "\2212"; }
.pros-cons ul { margin: 0; padding-left: 28px; list-style-type: "\2013\00a0\00a0"; }
.pros-cons li + li { margin-top: .4em; }

/* verdict: the one inverted block on the page */
.verdict { background: var(--invert-bg); color: var(--invert-ink); padding: 22px 24px 26px; font-size: 18px; line-height: 1.55; margin-top: 2.6em !important; }
.verdict h2 { margin: 0; border-top: 0; padding-top: 0; font-size: 26px; color: var(--invert-ink); }
.verdict h2::before { color: var(--invert-signal); }
.verdict > * + * { margin: .7em 0 0; }
.verdict a { color: inherit; }
.verdict :focus-visible { outline-color: var(--invert-signal); }
.verdict a { text-decoration-color: var(--invert-signal); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--hair); }
.faq h2 + details { border-top: 1px solid var(--ink); margin-top: 1em; }
.faq summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 13px 40px 13px 0; font-weight: 700; font-size: 18px; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 8px;
  font: 400 26px/1.2 var(--mono); color: var(--ink);
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.faq details > :not(summary) { margin: 0 0 16px; padding-right: 40px; color: var(--ink-2); }
.faq details > p + p { margin-top: -6px; }

/* sources: footnote style */
.sources { font-size: 14.5px; line-height: 1.5; }
.sources ol { list-style: none; padding: 0; counter-reset: src; margin-top: 1em; border-top: 1px solid var(--ink); }
.sources li { counter-increment: src; position: relative; padding: 8px 0 8px 40px; border-bottom: 1px solid var(--hair); margin: 0; color: var(--ink-2); word-break: break-word; }
.sources li + li { margin-top: 0; }
.sources li::before { content: "[" counter(src) "]"; position: absolute; left: 0; top: 9px; font: 12px/1.5 var(--mono); color: var(--muted); }
.sources a { color: var(--ink); text-decoration-color: var(--muted); text-decoration-thickness: 1px; }
.sources a:hover { text-decoration-color: var(--signal); text-decoration-thickness: 2px; }

/* hands-on notes: a dated log entry on graph paper. The header (label and the
   Tried / Plan / Setup strip) is set in mono like a logbook; the entry itself
   is in the text face at reading size, ruled off by a signal margin line like
   a notebook page, so it never reads as part of the researched text. */
.field-notes {
  --fn-pad: 26px;           /* left padding; the margin line sits in its middle */
  position: relative;
  margin-top: 2.2em !important;
  border: 1.5px solid var(--ink);
  padding: 30px 16px 20px var(--fn-pad);
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--graph) 1px, transparent 1px),
    linear-gradient(90deg, var(--graph) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: -1px -1px;
  font: 400 17px/1.6 var(--sans);
  color: var(--ink);
}
.field-notes::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--fn-pad) / 2 - 1px);
  width: 2px; background: var(--signal);
}
.prose > .field-notes { max-width: none; }
.field-notes .fn-label {
  position: absolute; top: -13px; left: 16px; margin: 0; z-index: 1;
  padding: 3px 10px 3px 26px; background: var(--ink); color: var(--bg);
  font: 13px/20px var(--mono);
}
.field-notes .fn-label::before {
  content: ""; position: absolute; left: 10px; top: 9px; width: 8px; height: 8px; background: var(--signal);
}
.field-notes .fn-meta {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 14px;
  margin: 0 0 18px; padding: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  background: var(--bg);
  font-family: var(--mono);
}
.field-notes .fn-meta dt, .field-notes .fn-meta dd { padding: 6px 0; border-bottom: 1px solid var(--hair); font-size: 13px; line-height: 1.5; }
.field-notes .fn-meta dt { color: var(--muted); padding-left: 10px; }
.field-notes .fn-meta dd { margin: 0; padding-right: 10px; }
.field-notes .fn-meta dt:nth-last-of-type(1), .field-notes .fn-meta dd:last-of-type { border-bottom: 0; }
.field-notes > p { margin: 0; max-width: 35em; }
.field-notes > p + p, .field-notes > ul, .field-notes > ol, .field-notes > figure { margin-top: .85em; }
.field-notes ul, .field-notes ol { padding-left: 1.3em; max-width: 35em; }
.field-notes ul { list-style-type: "\2013\00a0"; }
.field-notes li::marker { color: var(--muted); }
.field-notes li + li { margin-top: .3em; }
.field-notes figure { margin-left: 0; margin-right: 0; }
.field-notes img, .field-notes figure > svg { display: block; width: 100%; height: auto; background: var(--bg); border: 1px solid var(--ink); }
.field-notes figure > svg { color: var(--muted); border-color: currentColor; overflow: visible; font-family: var(--mono); }
.field-notes figcaption { display: inline-block; margin-top: 0; padding: 4px 8px 4px 0; background: var(--bg); font: 12.5px/1.5 var(--mono); color: var(--muted); }

/* ---------- ≥ 720px: numeral gutter inside the main column ---------- */
@media (min-width: 720px) {
  :root { --cols: 12; --main-span: 7; --span: 9; }
  .prose { --c1: calc((100cqw + var(--gap)) / 12); }
  .prose { --indent: var(--c1); --measure: calc(var(--span) * var(--c1) - var(--gap)); }
  .prose > * { margin-left: var(--indent); }
  .prose > .table-wrap, .prose > .pros-cons, .prose > .field-notes, .prose > h2, .prose > pre,
  .prose > section.faq, .prose > section.sources { max-width: calc(100% - var(--indent)); }
  .prose > section > :not(h2) { max-width: var(--measure); }

  .prose h2::before {
    position: absolute; left: calc(-1 * var(--indent)); top: -2px; margin: 0;
    width: calc(var(--indent) - var(--gap)); padding-top: 14px; border-top: 2px solid var(--signal);
    font-size: 30px; line-height: 1.12; letter-spacing: -0.04em; color: var(--signal);
  }
  .tldr h2::before { top: -6px; border-top-width: 6px; padding-top: 14px; font-size: 22px; line-height: 1.12; }
  .verdict h2::before { color: var(--signal); left: calc(-1 * var(--indent) - 24px); top: -22px; border-top-width: 6px; padding-top: 18px; font-size: 30px; }

  .pros-cons { grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
  .pros-cons > div + div { border-top: 0; border-left: 1px solid var(--ink); padding-left: var(--gap); }

  .field-notes { --fn-pad: 40px; padding: 34px 28px 26px var(--fn-pad); }
  /* each dt/dd pair becomes a column: label on top, value below. The first
     two (date, plan) take their natural width; the last (setup) takes the rest. */
  .field-notes .fn-meta { grid-template-columns: fit-content(36%) fit-content(36%); grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; }
  .field-notes .fn-meta dt, .field-notes .fn-meta dd { border-bottom: 0; padding-left: 12px; padding-right: 12px; }
  .field-notes .fn-meta dt { padding-top: 8px; padding-bottom: 0; font-size: 12px; }
  .field-notes .fn-meta dd { padding-top: 2px; padding-bottom: 9px; }
  .field-notes .fn-meta dt:not(:first-of-type), .field-notes .fn-meta dd:not(:first-of-type) { border-left: 1px solid var(--hair); }

  /* one column + gutter of the parent's 12- or 9-column span, as a % of the element's own width */
  .ix-head, .ix-row, .lead-guide-body { --u: calc((100% + var(--gap)) / var(--cols)); }
  .ix-head, .ix-row {
    display: grid; column-gap: var(--gap);
    grid-template-columns: calc(var(--u) - var(--gap)) calc(var(--main-span) * var(--u) - var(--gap)) minmax(0, 1fr);
  }
  .ix-head { margin: 0 0 6px; font: 12px/1.4 var(--mono); color: var(--muted); }
  .ix-no { grid-row: auto; font-size: 34px; }
  .ix-meta { grid-column: 3; margin: 4px 0 0; flex-direction: column; gap: 2px; }

  .lead-guide-body { display: grid; grid-template-columns: calc(var(--u) - var(--gap)) minmax(0, 1fr); column-gap: var(--gap); }
  .lead-guide-no { grid-row: 1 / span 3; font-size: clamp(44px, 4.6vw, 60px); white-space: nowrap; }
  .lead-guide-body > :not(.lead-guide-no) { grid-column: 2; }
}

/* ---------- ≥ 1080px: the index rail ---------- */
@media (min-width: 1080px) {
  :root { --cols: 9; --main-span: 5; --span: 6; }
  body { font-size: 17px; }
  .masthead-grid, .footer-grid, .front, .front-row, .post-head, .disclosure, .post-body,
  .endnote, .related, .page-head, .page-body {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  }
  .rail, .rail-label { grid-column: 1 / 4; }
  .rail-label { align-self: start; }

  .masthead-grid { align-items: last baseline; padding-top: 22px; padding-bottom: 14px; row-gap: 0; }
  .brand { grid-column: 1 / 4; }
  .masthead-line { order: 0; grid-column: 4 / 10; flex-basis: auto; margin: 0; max-width: none; font-size: 13px; }
  .site-nav { grid-column: 10 / 13; justify-self: end; }

  .footer-brand { grid-column: 1 / 4; }
  .colophon { grid-column: 4 / 9; }
  .footer-nav { grid-column: 10 / 13; }

  .front { padding-top: 72px; }
  .statement { grid-column: 1 / 11; margin-bottom: 56px; }
  .front-facts { grid-column: 1 / 4; grid-row: 2; }
  .facts { margin-top: 6px; }
  .front-intro { grid-column: 4 / 10; grid-row: 2; }
  .front-row > :not(.rail-label):not(.by-subject) { grid-column: 4 / 13; }
  .index-row { grid-template-rows: auto 1fr; }
  .index-row > .ix { grid-row: 1 / span 2; }
  .index-row > .by-subject { grid-column: 1 / 4; grid-row: 2; align-self: start; margin-top: 30px; padding-right: 12px; max-width: none; }
  .front-row { margin-top: 88px; }

  .page-head { padding: 64px 0 40px; }
  .page-head > * { grid-column: 4 / 13; }
  .page-body > .prose { grid-column: 4 / 13; }
  .page-body .page-nav { display: block; margin: 0; align-self: start; position: sticky; top: 24px; }

  .post-head { padding: 64px 0 36px; align-items: start; }
  .post-filed { grid-column: 1 / 4; grid-row: 1; padding-top: 12px; }
  .post-title { grid-column: 4 / 13; grid-row: 1; }
  .post-dek { grid-column: 4 / 11; grid-row: 2; }
  .post-meta { grid-column: 1 / 4; grid-row: 2; margin-top: 26px; padding-top: 0; display: block; }
  .post-meta div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--hair); }
  .post-meta dd { text-align: right; }

  .disclosure { margin-bottom: 56px; }
  .disclosure-label { grid-column: 1 / 4; margin: 0; }
  .disclosure-text { grid-column: 4 / 11; }

  .post-body { align-items: start; }
  .toc-fold { display: none; }
  .toc-rail { display: block; }
  .toc { grid-column: 1 / 4; position: sticky; top: 24px; margin: 0; max-height: calc(100vh - 48px); overflow-y: auto; padding-right: 8px; }
  .post-body > .prose { grid-column: 4 / 13; }
  .endnote-body { grid-column: 4 / 13; }
  .endnote-body p { margin-left: calc((100% + var(--gap)) / 9); }
  .related > .ix { grid-column: 4 / 13; }
}

@media (min-width: 1280px) {
  .prose { font-size: 18.5px; }
}
@media (min-width: 1080px) {
  .prose pre { font-size: 13px; }  /* a full DNS record fits the main column at 1280 */
}

/* ---------- small screens ---------- */
@media (max-width: 719px) {
  :root { --pad: 20px; }
  .masthead-grid { padding-top: 14px; padding-bottom: 12px; }
  .masthead-line { display: none; }
  .brand-name { font-size: 20px; }
  .site-nav { gap: 16px; }
  .site-nav a { font-size: 14.5px; }
  .front { padding-top: 36px; }
  .statement { letter-spacing: -0.04em; }
  .front-row { margin-top: 56px; }
  .page-head, .post-head { padding-top: 36px; }
  .prose { font-size: 17.5px; }
  .prose h2 { font-size: 26px; }
  .post-title { letter-spacing: -0.035em; }
  .prose .lead { font-size: 20px; }
  .tldr { font-size: 17.5px; }
  .table-wrap { margin-left: calc(-1 * var(--pad)) !important; margin-right: calc(-1 * var(--pad)); padding: 0 var(--pad); max-width: none !important; border-top: 0; }
  .table-wrap table { border-top: 3px solid var(--ink); }
  .table-wrap table { font-size: 14.5px; }
  .table-wrap th, .table-wrap td { padding-right: 10px; }
  .table-wrap table:has(tr > :nth-child(4)) { min-width: 540px; }
  .table-wrap table:has(tr > :nth-child(5)) { min-width: 620px; }
  .verdict { margin-left: calc(-1 * var(--pad)) !important; margin-right: calc(-1 * var(--pad)); padding: 22px var(--pad) 26px; max-width: none !important; }
  .footer-nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
}
@media (max-width: 380px) {
  :root { --pad: 16px; }
  .site-nav { gap: 12px; }
  .brand-name { font-size: 18px; }
}

@media print {
  .masthead, .site-footer, .toc, .related, .skip, .consent-ask .consent { display: none; }
  body { font-size: 11pt; padding-bottom: 0 !important; }  /* the cookie bar's padding */
  .verdict { background: none; color: inherit; border: 2px solid #000; }
  a { text-decoration: none; }
}