/* ============================================================
   tordark — styles.css
   Implements DESIGN.md: editorial-broadsheet / H=50 warm /
   Newsreader + Public Sans / hybrid / numbered-folios / static.
   Single stylesheet (web-perf hard rule): no @import, no second sheet.
   Order: fonts → reset → tokens → base → layout → masthead (nameplate,
   ledger strip, zero-JS nav) → breadcrumb → article (folios, standfirst,
   tables, aside, code) → footer → buttons → back-to-top → utilities →
   responsive → motion. :root custom properties mirror DESIGN.md 1:1.
   ============================================================ */

/* ---- Fonts (self-hosted, latin subset; web-perf tunes overrides in Dialog 4) ---- */
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/display.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/fonts/body.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--space-6); }
img, svg { max-width: 100%; height: auto; }

/* ---- Tokens (mirror DESIGN.md) ---- */
:root {
  /* color */
  --bg: oklch(0.975 0.008 50);
  --surface: oklch(0.955 0.011 55);
  --text: oklch(0.23 0.012 50);
  --text-muted: oklch(0.50 0.013 55);
  --border: color-mix(in oklch, var(--text), transparent 86%);
  --primary: oklch(0.42 0.10 255);
  --primary-hover: color-mix(in oklch, var(--primary), black 14%);
  --accent: oklch(0.47 0.15 28);
  --accent-strong: oklch(0.43 0.15 28);
  --on-fill: oklch(0.985 0.006 50);
  --addr-pending: oklch(0.50 0.20 25); /* pending/placeholder .onion address — caution red */
  --logo-bg: oklch(0.99 0.004 75);     /* near-white plate that frames brand logos */
  accent-color: var(--accent);         /* native form controls render in signature red */

  /* type */
  --font-display: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;

  --step--1: clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem);
  --step-0: clamp(1.0625rem, 1.01rem + 0.28vw, 1.1875rem);
  --step-1: clamp(1.3rem, 1.19rem + 0.55vw, 1.6rem);
  --step-2: clamp(1.62rem, 1.42rem + 1vw, 2.15rem);
  --step-3: clamp(2.3rem, 1.75rem + 2.75vw, 3.75rem);

  /* space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* layout */
  --container: 72rem;
  --measure: 70ch;
  --measure-text: 64ch;
  --pad-inline: clamp(1.1rem, 0.5rem + 2.4vw, 2.5rem);
  --tap: 44px;

  /* shape */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
}

/* ---- Base elements ---- */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  border-top: 4px solid var(--accent); /* masthead rule — signature */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
  color: var(--text);
}
h1 { font-size: var(--step-3); line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-size: var(--step-2); letter-spacing: -0.01em; }
h3 { font-size: var(--step-1); font-weight: 650; line-height: 1.25; letter-spacing: -0.005em; }

p, li { text-wrap: pretty; }
strong, b { font-weight: 600; }

a {
  color: var(--primary);
  text-underline-offset: 0.14em;
  text-decoration-thickness: 0.06em;
}
a:hover { color: var(--primary-hover); text-decoration-thickness: 0.1em; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-1);
}

::selection { background: color-mix(in oklch, var(--accent), transparent 80%); color: var(--text); }

/* ---- Scrollbar — signature red thumb on warm track ---- */
html { scrollbar-color: var(--accent) var(--surface); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--accent); border: 3px solid var(--surface); border-radius: var(--radius-2); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-strong); }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
}

/* ---- Layout primitives ---- */
.masthead-inner,
.footer-inner {
  width: min(100% - 2 * var(--pad-inline), var(--container));
  margin-inline: auto;
}

main { flex: 1 0 auto; width: 100%; }

article {
  width: min(100% - 2 * var(--pad-inline), var(--measure));
  margin-inline: auto;
  padding-block: var(--space-7) var(--space-9);
}
/* Prose sits at the ideal measure; H1, H2, tables, asides break wider (grid disruption). */
article :is(p, ul, ol, dl, blockquote, h3, h4) { max-width: var(--measure-text); }
article > * + * { margin-top: var(--space-5); }
article > h1 { margin-bottom: var(--space-2); }
article :is(ul, ol) { padding-left: 1.5em; }
article li + li { margin-top: var(--space-2); }
#main { scroll-margin-top: var(--space-5); }

/* ---- Masthead: nameplate + zero-JS nav ---- */
.masthead { border-bottom: 1px solid var(--border); }

.masthead-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  padding-block: var(--space-4);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
  text-decoration: none;
}
.brand:hover { color: var(--text); }
.brand-word { display: inline-block; }
.brand-dot { color: var(--accent); }
/* Onion mark set in place of the "o" — the wordmark IS the logo (t◯rdark.). */
.brand-o {
  height: 1.1em;
  width: auto;
  vertical-align: -0.17em;
  margin-inline: 0.03em;
  transform-origin: center 58%;
}
.brand:hover .brand-o { transform: scale(1.07); }

.nav-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
}
.nav-primary a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  /* Kinetic underline: a hairline that wipes in from the left. */
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 72%;
  background-size: 0% 0.1em;
}
.nav-primary a:hover,
.nav-primary a:focus-visible,
.nav-primary a[aria-current='page'] {
  color: var(--accent);
  background-size: 100% 0.1em;
}

/* Zero-JS toggle: checkbox (hidden, focusable) + label button. Desktop = off. */
.nav-toggle { display: none; }
.nav-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  margin-left: auto;
  cursor: pointer;
}
.nav-button span,
.nav-button span::before,
.nav-button span::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}
.nav-button span { position: relative; }
.nav-button span::before,
.nav-button span::after { content: ''; position: absolute; left: 0; }
.nav-button span::before { top: -7px; }
.nav-button span::after { top: 7px; }

/* ---- Primary-nav dropdown (Guides mega-menu — zero-JS, hover + focus-within) ---- */
.nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-trigger { gap: 0.42em; cursor: pointer; }
.nav-caret { flex: none; transform-origin: center; }
.nav-panel {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 30;
  width: max-content;
  max-width: min(92vw, 32rem);
  padding: var(--space-2);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  box-shadow:
    0 24px 50px -30px color-mix(in oklch, var(--text), transparent 30%),
    0 4px 12px -8px color-mix(in oklch, var(--text), transparent 60%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.4rem);
}
/* invisible bridge across the trigger→panel gap so the pointer never "falls out" */
.nav-panel::before {
  content: '';
  position: absolute;
  inset: -0.6rem 0 auto 0;
  height: 0.8rem;
}
.nav-item:hover > .nav-panel,
.nav-item:focus-within > .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret { transform: rotate(180deg); }
.nav-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.1rem;
}
.nav-panel a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  min-height: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-1);
  font-weight: 400;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  text-decoration: none;
  background-image: none;
}
.nav-panel-label {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: var(--step-0);
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--text);
}
.nav-panel-blurb {
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-muted);
}
.nav-panel a:hover,
.nav-panel a:focus-visible { background: var(--surface); }
.nav-panel a:hover .nav-panel-label,
.nav-panel a:focus-visible .nav-panel-label,
.nav-panel a[aria-current='page'] .nav-panel-label { color: var(--accent); }

/* ---- Page meta: breadcrumb + byline cluster sitting directly above the H1.
   One tight utility row (breadcrumb left, byline right) replaces two stacked,
   heavily-padded blocks, so the H1 rises and the freshness/EEAT line stays high. */
.page-meta {
  width: min(100% - 2 * var(--pad-inline), var(--measure));
  margin-inline: auto;
  padding-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-5);
}
.page-meta + article { padding-top: var(--space-3); }

/* ---- Breadcrumb ---- */
.breadcrumb { min-width: 0; }
.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.breadcrumb li { display: flex; align-items: center; }
.breadcrumb li:not(:first-child)::before {
  content: '/';
  margin-inline: 0.5em;
  color: var(--text-muted);
  opacity: 0.6;
}
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  color: var(--text-muted);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--primary); text-decoration: underline; }
.breadcrumb [aria-current='page'] { color: var(--text); }

/* ---- Article: signature folios + standfirst ---- */
article { counter-reset: folio; }
article > section {
  counter-increment: folio;
  position: relative;
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}
article > section::before {
  content: counter(folio, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: var(--space-3);
}
article > section > * + * { margin-top: var(--space-4); }
article > section h3 { margin-top: var(--space-5); }

/* Dated update / news entries */
.news-date {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.news-item {
  padding-left: var(--space-4);
  border-left: 3px solid var(--accent-strong);
}
.news-item > * + * { margin-top: var(--space-2); }
.news-item h3 { margin-top: var(--space-1); }

/* Standfirst (article lede) — larger, with an accent drop cap */
article > p:first-of-type,
.lede > p:first-of-type {
  font-size: 1.15em;
  line-height: 1.55;
  color: var(--text);
}
article > p:first-of-type::first-letter,
.lede > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3.1em;
  line-height: 0.78;
  float: left;
  padding-right: 0.08em;
  margin-top: 0.06em;
  color: var(--accent);
}

/* Lede wrapper — a flow-root so a floated hero figure wraps its standfirst,
   even inside the .has-toc grid where bare children become grid items and
   floats would otherwise be ignored. */
.lede { display: flow-root; }

/* ---- Tables (ledger objects) ---- */
table {
  border-collapse: collapse;
  width: 100%;
  font-variant-numeric: tabular-nums;
  font-size: var(--step--1);
}
thead th {
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border-top: 2px solid var(--accent); /* signature red rule — ties tables to the masthead */
  border-bottom: 2px solid var(--border);
  padding: 0.6em 0.9em;
}
tbody td {
  padding: 0.7em 0.9em;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
tbody td:first-child { font-weight: 600; color: var(--text); }
tbody tr:hover { background: var(--surface); }

/* ---- Service comparison table (guides: swaps & mixers) ---- */
.swap-table tbody td { vertical-align: middle; }
.swap-table tbody td:first-child { font-weight: 400; white-space: nowrap; }
.swap-name {
  display: block;
  font-family: var(--font-display, var(--font-body));
  font-weight: 700;
  font-size: var(--step-0);
  color: var(--text);
  line-height: 1.15;
}
.swap-domain {
  display: inline-block;
  margin-top: 0.35em;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding: 0.05em 0.5em;
}
.swap-table tbody tr:hover .swap-domain { background: var(--bg); }
.swap-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  padding: 0.18em 0.6em;
  border-radius: var(--radius-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.swap-tag.tag-agg {
  color: var(--primary);
  border-color: color-mix(in oklch, var(--primary), transparent 55%);
  background: color-mix(in oklch, var(--primary), transparent 92%);
}
.swap-tag.tag-nokyc {
  color: var(--accent-strong);
  border-color: color-mix(in oklch, var(--accent), transparent 55%);
  background: color-mix(in oklch, var(--accent), transparent 92%);
}

/* ---- Aside note (disclaimer device) ---- */
aside[role='note'] {
  background: var(--surface);
  border-left: 3px solid var(--accent-strong);
  border-radius: var(--radius-2);
  padding: var(--space-4) var(--space-5);
  font-size: var(--step--1);
  color: var(--text-muted);
}
aside[role='note'] p { max-width: none; }
aside[role='note'] > * + * { margin-top: var(--space-3); }

/* ---- Code / addresses ---- */
code {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  padding: 0.1em 0.35em;
  overflow-wrap: anywhere;
}

/* ---- Footer (compact editorial: dense link rows, 2-col guides, slim legal bar) ---- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  margin-top: var(--space-8);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.1fr 2.7fr;
  gap: var(--space-6) var(--space-7);
  padding-block: var(--space-6);
}
.footer-brand .brand { font-size: 1.45rem; }
.footer-brand p {
  color: var(--text-muted);
  font-size: var(--step--1);
  max-width: 32ch;
  line-height: 1.55;
  margin-top: var(--space-3);
}
.footer-nav {
  display: grid;
  grid-template-columns: 1.1fr 1.7fr 1fr;
  gap: var(--space-5) var(--space-6);
}
.footer-col-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col--guides ul { columns: 2; column-gap: var(--space-5); }
.footer-col--guides li { break-inside: avoid; }
.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding-block: var(--space-1);
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.4;
  text-decoration: none;
}
.footer-col a:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.footer-social {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer-social a {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
  text-decoration: none;
}
.footer-social a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 0.2em; }

/* Slim bottom bar — copyright + legal links, divided by a hairline */
.footer-bottom { border-top: 1px solid var(--border); }
.footer-bottom-inner {
  width: min(100% - 2 * var(--pad-inline), var(--container));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-4);
}
.footer-copy {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.footer-legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}
.footer-legal a {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
  text-decoration: none;
}
.footer-legal a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 0.2em; }
.footer-brand .dmca-badge {
  display: inline-block;
  margin-top: var(--space-4);
}
.footer-brand .dmca-badge img {
  display: block;
  width: 168px;
  height: auto;
}

/* ---- Buttons (defined per DESIGN.md §7; content ships none yet — Phase B) ---- */
.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: var(--tap);
  padding: 0.55em 1.1em;
  border: 1px solid transparent;
  border-radius: var(--radius-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step--1);
  text-decoration: none;
  cursor: pointer;
}
.button-primary { background: var(--primary); color: var(--on-fill); }
.button-primary:hover { background: var(--primary-hover); color: var(--on-fill); }
.button-secondary { border-color: var(--primary); color: var(--primary); background: transparent; }
.button-secondary:hover { background: color-mix(in oklch, var(--primary), transparent 92%); }
.button-tertiary { background: transparent; color: var(--primary); padding-inline: 0; }
.button-tertiary:hover { text-decoration: underline; }
.button-accent { background: var(--accent-strong); color: var(--on-fill); }
.button-accent:hover { background: color-mix(in oklch, var(--accent-strong), black 12%); color: var(--on-fill); }

/* ---- Back-to-top stamp (zero-JS; resting state visible, scroll-reveal is the enhancement) ---- */
.to-top {
  position: fixed;
  right: clamp(0.75rem, 2vw, 1.5rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 9;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: var(--tap);
  padding-inline: 0.9em;
  background: var(--text);
  color: var(--bg);
  border: 1px solid var(--text);
  border-radius: var(--radius-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-decoration: none;
}
.to-top:hover { background: var(--accent); border-color: var(--accent); color: var(--on-fill); }

/* ---- Utilities ---- */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -4rem;
  z-index: 10;
  background: var(--primary);
  color: var(--on-fill);
  padding: 0.6em 1em;
  border-radius: var(--radius-2);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-3); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Responsive ---- */
/* Wide: section folios hang in the left margin like a dossier rail. */
@media (min-width: 1100px) {
  article > section::before {
    position: absolute;
    top: var(--space-6);
    left: -4.75rem;
    width: 3.75rem;
    margin: 0;
    text-align: right;
    font-size: 1rem;
  }
}

@media (max-width: 720px) {
  .footer-inner { grid-template-columns: 1fr; gap: var(--space-6); padding-block: var(--space-6); }
  .footer-nav { grid-template-columns: repeat(2, 1fr); }
  .footer-col--guides ul { columns: 1; }
  .footer-col a { min-height: 2.6rem; padding-block: 0; }

  /* Mobile menu: checkbox hidden but focusable; label is the hamburger. */
  .nav-toggle { display: inline-block; position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; }
  .nav-button { display: inline-flex; }
  .nav-primary {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: var(--space-2);
  }
  .masthead:has(.nav-toggle:checked) .nav-primary { display: flex; }
  .nav-primary a { width: 100%; min-height: var(--tap); padding-block: var(--space-3); border-top: 1px solid var(--border); }
  .nav-toggle:focus-visible + .nav-button { outline: 2px solid var(--primary); outline-offset: 2px; }

  /* Guides dropdown collapses into the stacked menu: panel shown inline + indented. */
  .nav-item { flex-direction: column; align-items: stretch; width: 100%; }
  .nav-trigger { justify-content: space-between; }
  .nav-caret { display: none; }
  .nav-panel {
    position: static;
    width: auto;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-panel::before { display: none; }
  .nav-panel ul { grid-template-columns: 1fr; gap: 0; }
  .nav-panel a { padding-left: var(--space-6); }
  .nav-panel-blurb { display: none; }

  /* Hamburger morphs to an X when open */
  .masthead:has(.nav-toggle:checked) .nav-button span { background: transparent; }
  .masthead:has(.nav-toggle:checked) .nav-button span::before { top: 0; transform: rotate(45deg); }
  .masthead:has(.nav-toggle:checked) .nav-button span::after { top: 0; transform: rotate(-45deg); }
}

@media (max-width: 560px) {
  .footer-nav { grid-template-columns: 1fr; }
  .footer-col--guides ul { columns: 2; column-gap: var(--space-5); }
  .article-byline { white-space: normal; }
  article > section > table { min-width: 34rem; }
  article > section:has(> table) { overflow-x: auto; }
}

/* ---- Motion: static-confident + one guarded scroll-driven utility reveal.
   Transitions only behind the guard; resting states fully styled without motion. ---- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  a,
  .nav-primary a,
  .breadcrumb a,
  .footer-col a,
  .button,
  .to-top,
  .brand-o,
  .related-list a,
  .related-arrow,
  .index-col a,
  tbody tr {
    transition:
      color 150ms ease,
      background-color 150ms ease,
      border-color 150ms ease,
      text-decoration-thickness 150ms ease,
      background-size 220ms ease,
      transform 200ms ease;
  }
  .nav-button span,
  .nav-button span::before,
  .nav-button span::after {
    transition: transform 150ms ease, top 150ms ease, background-color 150ms ease;
  }
  .nav-panel { transition: opacity 180ms ease, transform 220ms ease; }
  .nav-caret { transition: transform 220ms ease; }
  .button:active { transform: translateY(1px); }

  /* Back-to-top: hidden at the top, fades in after the first screen.
     Resting (no support / reduced motion) = visible, so it always works. */
  @supports (animation-timeline: scroll()) {
    .to-top {
      opacity: 0;
      visibility: hidden;
      animation: to-top-in linear both;
      animation-timeline: scroll(root);
      animation-range: 300px 560px;
    }
    @keyframes to-top-in {
      to { opacity: 1; visibility: visible; }
    }
  }

  @view-transition { navigation: auto; }
}

/* ---- Article byline + freshness line (Dialog 5: seo-bing) — now the right-hand
   item of the .page-meta row; wraps to its own line under the breadcrumb when tight. */
.article-byline {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
}
.article-byline a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.article-byline a:hover { color: var(--accent); }

/* ---- Logo lockup (footer scale) ----
   The onion "o" is sized in em, so it tracks the footer brand's font-size
   automatically — no per-context height override needed. ---- */

/* ---- Scroll-progress hairline (zero-JS; only shown where scroll-driven
   animation is supported and motion is allowed — pure decoration otherwise). ---- */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 20;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: 0 50%;
  display: none;
}

/* ---- Related-reading band + homepage index (contextual internal linking) ---- */
.related,
.site-index {
  border-top: 1px solid var(--border);
}
.related-inner,
.site-index-inner {
  width: min(100% - 2 * var(--pad-inline), var(--container));
  margin-inline: auto;
  padding-block: var(--space-7);
}
.band-title {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-5);
}

/* Related band: a ruled editorial index (not a card grid) with a surface-fill hover. */
.related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  column-gap: var(--space-6);
}
.related-list li { border-top: 1px solid var(--border); }
.related-list a {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'kicker arrow'
    'label  arrow'
    'blurb  arrow';
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  padding: var(--space-4) var(--space-3);
  margin-inline: calc(-1 * var(--space-3));
  border-radius: var(--radius-2);
  text-decoration: none;
  color: var(--text);
}
.related-kicker {
  grid-area: kicker;
  font-family: var(--font-mono);
  font-size: 0.72em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.related-label {
  grid-area: label;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: var(--step-1);
  line-height: 1.15;
  color: var(--text);
}
.related-blurb {
  grid-area: blurb;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--text-muted);
}
.related-arrow {
  grid-area: arrow;
  align-self: center;
  font-family: var(--font-mono);
  color: var(--primary);
}
.related-list a:hover { background: var(--surface); }
.related-list a:hover .related-label { color: var(--accent); }
.related-list a:hover .related-arrow { color: var(--accent); transform: translateX(0.25em); }

/* Homepage "Explore tordark" index — a compact, grouped content column. */
.index-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-6) var(--space-7);
}
.index-col-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-1);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.index-col ul { list-style: none; margin: 0; padding: 0; }
.index-col a {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  padding-block: var(--space-2);
  text-decoration: none;
}
.index-kicker {
  font-family: var(--font-mono);
  font-size: 0.7em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.index-label {
  color: var(--primary);
  font-weight: 600;
}
.index-col a:hover .index-label {
  color: var(--primary-hover);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

/* ---- Motion: scroll-driven reveals + reading progress.
   Strictly progressive — guarded by reduced-motion AND @supports; the resting
   state (no support / reduced motion) shows everything, fully styled. ---- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Sections + bands settle up into place — eased, not linear, for a premium feel. */
    article > section,
    .related-inner,
    .site-index-inner {
      animation: reveal-rise cubic-bezier(0.22, 1, 0.36, 1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
    @keyframes reveal-rise {
      from { opacity: 0; transform: translateY(1.6rem) scale(0.99); }
      to { opacity: 1; transform: none; }
    }

    /* Folio numbers slide into place a beat after their section opens. */
    article > section::before {
      animation: folio-in cubic-bezier(0.22, 1, 0.36, 1) both;
      animation-timeline: view();
      animation-range: entry 4% entry 36%;
    }
    @keyframes folio-in {
      from { transform: translateY(1rem); }
      to { transform: none; }
    }

    /* Each section's hairline is "drawn" left-to-right on entry (border = fallback). */
    article > section { border-top-color: transparent; }
    article > section::after {
      content: '';
      position: absolute;
      top: -1px;
      left: 0;
      right: 0;
      height: 1px;
      background: var(--border);
      transform: scaleX(0);
      transform-origin: left;
      animation: rule-draw linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 32%;
    }
    @keyframes rule-draw {
      to { transform: scaleX(1); }
    }
  }

  @supports (animation-timeline: scroll()) {
    .scroll-progress {
      display: block;
      animation: scroll-progress-grow linear both;
      animation-timeline: scroll(root);
    }
    @keyframes scroll-progress-grow {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }
  }
}

/* ---- FAQ accordions (zero-JS <details>; the question stays an <h3> for hierarchy) ---- */
details.faq { border-top: 1px solid var(--border); }
details.faq:last-of-type { border-bottom: 1px solid var(--border); }
article > section > details.faq + details.faq { margin-top: 0; }
details.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) 0;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary h3 { flex: 1; margin: 0; max-width: none; }
details.faq summary::after {
  content: '+';
  flex: none;
  align-self: center;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--step-1);
  line-height: 1;
  color: var(--accent);
}
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq summary:hover h3,
details.faq[open] summary h3 { color: var(--accent); }
details.faq > :not(summary) { margin: 0; padding-bottom: var(--space-5); }

@media (prefers-reduced-motion: no-preference) {
  details.faq summary::after { transition: transform 220ms ease; }
  details.faq summary h3 { transition: color 150ms ease; }

  /* Smoothly animate the disclosure open/close where the modern primitives exist;
     elsewhere the native <details> toggle just snaps (resting state always works). */
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    details.faq::details-content {
      height: 0;
      overflow: clip;
      transition: height 300ms ease, content-visibility 300ms allow-discrete;
    }
    details.faq[open]::details-content { height: auto; }
  }
}

/* ---- Folio parallax — only where the number hangs in the dossier rail (>=1100px).
   Uses the `translate` property so it composes with the folio-in `transform`. ---- */
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    article > section::before {
      animation: folio-in cubic-bezier(0.22, 1, 0.36, 1) both, folio-drift linear both;
      animation-timeline: view(), view();
      animation-range: entry 4% entry 36%, cover;
    }
    @keyframes folio-drift {
      from { translate: 0 0.6rem; }
      to { translate: 0 -0.6rem; }
    }
  }
}

/* ============================================================
   Editorial media — figures, captions, logos, ledger marks.
   Photographic imagery the broadsheet way: a 1px hairline frame (never a shadow
   or glossy card) and a mono cutline ruled in oxblood. Like a magazine, figures
   sit left, right, full-measure, or centred — at varied sizes chosen by how much
   the image actually says — with body text wrapping around the floats. Every
   <img> ships exact width/height from the manifest (zero CLS), lazy + async.
   ============================================================ */
.fig { margin: 0; }
.fig > img,
.fig-link > img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  background: var(--surface);
}
.fig-link { display: block; text-decoration: none; }

.fig figcaption {
  margin-top: var(--space-2);
  padding-left: var(--space-3);
  border-left: 2px solid var(--accent);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  text-wrap: pretty;
}
.fig figcaption a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.fig figcaption a:hover { color: var(--accent); }

/* Size = the figure's max width. Pick by information density, not by habit. */
.fig--xxs { max-width: 6.5rem; } /* tiny / low-res source art — never upscaled past native */
.fig--xs { max-width: 11rem; }
/* Size tokens must beat the floated default (.fig--left/right max-width:20rem),
   which otherwise wins on source order at equal specificity. Higher-specificity
   double-class rules keep a small floated figure small. */
.fig.fig--xxs { max-width: 6.5rem; }
.fig--left.fig--xxs,
.fig--right.fig--xxs { max-width: 6.5rem; }
.fig--sm { max-width: 15rem; }
.fig--md { max-width: 20rem; }
.fig--lg { max-width: 28rem; }
.fig--full { max-width: 100%; } /* full reading measure — for the few high-impact shots */

/* Centred block (a figure with no float/size sits inline-left by default). */
.fig--center { margin-inline: auto; }

/* Floated — text wraps alongside on wider screens; stacks above on narrow ones.
   Defaults to a sensible width when no size token is supplied. */
.fig--left,
.fig--right { max-width: 20rem; }
@media (min-width: 768px) {
  .fig--left { float: left; margin: 0.35rem var(--space-6) var(--space-4) 0; }
  .fig--right { float: right; margin: 0.35rem 0 var(--space-4) var(--space-6); }
}
@media (max-width: 767px) {
  .fig--left,
  .fig--right { max-width: min(24rem, 100%); margin-inline: auto; }
}

/* Each section (and the article body) is a flow-root so floats stay contained
   and never bleed past their section or into the footer. Sections clear, so a
   lede float wraps only its standfirst, and the next section starts clean below. */
article { display: flow-root; }
article > section { display: flow-root; clear: both; }
/* Tables, aside notes, and FAQs always start on a clean line, not beside a float. */
article table,
article aside[role='note'],
article details.faq { clear: both; }

/* Logos: a small framed mark; inner padding gives transparent wordmarks air.
   The frame now fits the logo (no oversized empty plate). */
.fig--logo > img,
.fig--logo .fig-link > img {
  padding: var(--space-3);
  object-fit: contain;
  max-height: 8.5rem;
}
.fig--logo:not(.fig--xs):not(.fig--sm):not(.fig--md):not(.fig--lg):not(.fig--full) {
  max-width: 14rem;
}

/* Promo banner — the market's own wide ad strip, run full reading measure as a
   deep-page divider (never above the fold; these are heavier files). */
.fig--banner { max-width: 100%; }
.fig--banner > img,
.fig--banner .fig-link > img {
  width: 100%;
  object-fit: contain;
}

/* Brand lockup (homepage): the logo on bare paper — no frame, no fill. */
.fig--plain > img,
.fig--plain .fig-link > img {
  border: 0;
  background: none;
  border-radius: 0;
  padding: 0;
}

/* Small logo mark in the ledger's first column (recognition + life). */
.m-name { display: inline-flex; align-items: center; gap: 0.6em; }
.m-logo {
  flex: none;
  width: auto;
  height: 1.5em;
  max-width: 6.5em;
  object-fit: contain;
  border-radius: var(--radius-1);
  background: var(--surface);
}

/* ---- Market directory (hub): logo plates, badges, tiles, cards ---- */

/* One consistent frame for heterogeneous brand logos. Every logo is rendered
   to one optical HEIGHT and centered, so wildly different aspect ratios (a wide
   wordmark vs. a square mark) read as a tidy, aligned logo wall. The plate's own
   height + padding set the band; --logo-h caps the artwork inside it. */
.logo-plate {
  display: grid;
  place-items: center;
  width: 100%;
  background: var(--logo-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding: var(--space-4) var(--space-5);
  overflow: hidden;
}
.logo-plate img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--logo-h, 2.5rem);
  object-fit: contain;
}

/* Reported-payment badges */
.pay-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pay-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15em 0.7em;
}

/* Onion address block — a labelled panel that frames the market link, wraps the
   full 56-char v3 address cleanly, and selects in one click (copy, no button). */
.market-addr {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  background: var(--bg);
}
.market-addr-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.market-addr-tag::before {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
}
.market-addr code {
  border: 0;
  background: none;
  padding: 0;
  font-size: var(--step--1);
  line-height: 1.5;
  overflow-wrap: anywhere; /* wraps the long onion, leaves real words intact */
  color: var(--text);
  -webkit-user-select: all;
  user-select: all; /* one click grabs the whole address — copy without a button */
  cursor: text;
}

/* Live: a confirmed onion, styled in the link colour so it reads as the way in. */
.market-addr.addr-live {
  border-color: color-mix(in oklch, var(--primary), transparent 55%);
  background: color-mix(in oklch, var(--primary), transparent 94%);
}
.market-addr.addr-live .market-addr-tag { color: var(--primary); }
.market-addr.addr-live code { font-weight: 600; }

/* Pending: a red holding slot until a signed canary clears the real address. */
.market-addr.addr-pending {
  border-color: color-mix(in oklch, var(--addr-pending), transparent 60%);
  background: color-mix(in oklch, var(--addr-pending), transparent 93%);
}
.market-addr.addr-pending .market-addr-tag { color: var(--addr-pending); }
.market-addr.addr-pending code {
  color: color-mix(in oklch, var(--addr-pending), var(--text) 22%);
  font-weight: 600;
}

/* Lead address block — the verified link sits directly under the H1 standfirst,
   above the table of contents, so a link-seeker reaches it without scrolling. */
.market-link { margin-top: var(--space-5); }

/* Secondary mirror list under a live primary address — one onion per row,
   no bullets, each selectable in a single click (copy without a button). */
.addr-mirrors {
  list-style: none;
  max-width: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.addr-mirrors li {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  background: var(--bg);
}
.addr-mirrors code {
  border: 0;
  background: none;
  padding: 0;
  font-size: var(--step--1);
  line-height: 1.5;
  overflow-wrap: anywhere;
  color: var(--text);
  -webkit-user-select: all;
  user-select: all;
  cursor: text;
}

/* Per-mirror status label — a dot plus a short caption above the address. */
.addr-mirrors .mirror-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin-bottom: 0.3rem;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.addr-mirrors .mirror-tag::before {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
}

/* Offline: a known mirror that is currently unreachable — muted, not red,
   because it is not a fault to fix, just a door that is shut for now. */
.addr-mirrors li.mirror-offline {
  border-style: dashed;
  background: color-mix(in oklch, var(--text-muted), transparent 94%);
}
.addr-mirrors li.mirror-offline .mirror-tag { color: var(--text-muted); }
.addr-mirrors li.mirror-offline code {
  color: var(--text-muted);
  -webkit-user-select: text;
  user-select: text; /* offline: nothing to one-click copy yet */
}

/* Quick directory — a scannable grid of brand tiles. */
.market-grid {
  list-style: none;
  max-width: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (min-width: 768px) { .market-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .market-grid { grid-template-columns: 1fr; } }
.market-tile {
  --logo-h: 2.4rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding: var(--space-4);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.market-tile .logo-plate { height: 5rem; }
.market-tile .market-addr { margin-top: auto; }
@media (prefers-reduced-motion: no-preference) {
  .market-tile:hover {
    border-color: color-mix(in oklch, var(--accent), transparent 45%);
    box-shadow: 0 6px 20px -12px color-mix(in oklch, var(--text), transparent 55%);
    transform: translateY(-2px);
  }
}

/* Detailed cards — a logo header band over the write-up and its CTA. The band
   is full card width, so every logo is height-limited and lands on one baseline
   (this is what fixes the square DarkMatter mark sitting inset from the rest). */
.market-cards {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 720px) { .market-cards { grid-template-columns: repeat(2, 1fr); } }
.market-card {
  --logo-h: 3rem;
  margin: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  overflow: hidden;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
@media (prefers-reduced-motion: no-preference) {
  .market-card:hover {
    border-color: color-mix(in oklch, var(--accent), transparent 45%);
    box-shadow: 0 10px 28px -16px color-mix(in oklch, var(--text), transparent 50%);
    transform: translateY(-2px);
  }
}
.market-card-brand {
  margin: 0;
  display: grid;
  place-items: center;
  min-height: 6.5rem;
  padding: var(--space-5);
  background: var(--logo-bg);
  border-bottom: 1px solid var(--border);
}
.market-card-brand img {
  display: block;
  width: auto;
  height: auto;
  max-width: 80%;
  max-height: var(--logo-h);
  object-fit: contain;
}
.market-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--space-5);
}
.market-card-body > * + * { margin-top: var(--space-3); }
.market-card-name {
  margin: 0 0 var(--space-2);
  font-size: var(--step-1);
}
.market-card-body .market-cta { margin-top: auto; padding-top: var(--space-4); }
.market-card-body .market-cta .button { width: 100%; }

/* ---- On-this-page: sticky table of contents (markets hub) ---- */
/* Anchored sections/cards clear the viewport top when jumped to. */
article > section[id] { scroll-margin-top: var(--space-5); }
.market-card[id] { scroll-margin-top: var(--space-6); }

.toc {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  font-size: var(--step--1);
  line-height: 1.35;
}
.toc-title {
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.toc ol,
.toc ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.toc-list { counter-reset: toc; }
.toc-list > li { margin: 0; counter-increment: toc; }
.toc li + li { margin-top: 0; }
.toc a {
  display: block;
  padding: 0.32rem 0.5rem;
  border-radius: var(--radius-1);
  color: var(--text-muted);
  text-decoration: none;
}
.toc-list > li > a::before {
  content: counter(toc, decimal-leading-zero);
  margin-right: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.8em;
  font-weight: 600;
  color: color-mix(in oklch, var(--accent), transparent 25%);
}
.toc a:hover {
  color: var(--text);
  background: color-mix(in oklch, var(--accent), transparent 90%);
}
.toc a:target,
.toc a:focus-visible { color: var(--text); }
.toc-sub {
  margin: 0.1rem 0 0.35rem 0.95rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--border);
}
.toc-sub a { font-size: 0.96em; padding-block: 0.24rem; }

@media (min-width: 1100px) {
  article.has-toc {
    width: min(100% - 2 * var(--pad-inline), calc(var(--measure) + 15rem + var(--space-7)));
    display: grid;
    grid-template-columns: minmax(0, var(--measure)) 15rem;
    column-gap: var(--space-7);
    align-items: start;
  }
  article.has-toc > * { grid-column: 1; min-width: 0; }
  article.has-toc > .toc {
    grid-column: 2;
    grid-row: 1 / 40;
    align-self: start;
    position: sticky;
    top: var(--space-5);
    margin-top: 0;
    max-height: calc(100vh - 2 * var(--space-5));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Motion: gentle and guarded — linked images lift on hover. */
@media (prefers-reduced-motion: no-preference) {
  a.fig-link > img {
    transition: transform 200ms ease, border-color 150ms ease, opacity 200ms ease;
  }
  a.fig-link:hover > img { opacity: 0.93; border-color: var(--accent); }
  .fig--logo a.fig-link:hover > img { opacity: 1; transform: scale(1.03); }
}

/* ---- Dark-web news hub (the /dark-web-news desk) ----
   A front-page lead over a dated, reverse-chronological dispatch log.
   Hairlines + surface steps only; the oxblood node on each entry is a
   structural mark (like a folio), never a card or a shadow. This device
   is unique to the news page — no other page on the site carries it. */

/* Dateline — mono kicker above the lead headline and each dispatch entry. */
.dateline {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.dateline .dateline-tag { color: var(--text-muted); }
.dateline .dateline-tag::before {
  content: '\00b7';
  margin-inline: 0.5em;
  color: var(--text-muted);
}

/* Lead "what it means" note — the editorial read on the top story. */
.lead-takeaway {
  background: var(--surface);
  border-left: 3px solid var(--accent-strong);
  border-radius: var(--radius-2);
  padding: var(--space-4) var(--space-5);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.lead-takeaway strong { color: var(--text); }
.lead-takeaway a { color: var(--primary); }

/* Dispatch log — a reverse-chronological timeline. Every entry hangs off a
   single hairline spine, marked by a small oxblood node. */
.dispatch-log {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}
.dispatch-log > li {
  position: relative;
  margin: 0;
  margin-left: 0.27rem;
  padding: 0 0 var(--space-6) var(--space-5);
  border-left: 1px solid var(--border);
}
.dispatch-log > li:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}
.dispatch-log > li::before {
  content: '';
  position: absolute;
  left: -0.3rem;
  top: 0.45rem;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--accent);
  border-radius: var(--radius-1);
}
.dispatch > * + * { margin-top: var(--space-2); }
.dispatch h3 { margin-top: var(--space-1); font-size: var(--step-1); }
.dispatch-source {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.dispatch-source a { color: var(--primary); }