/* CalcPit — single stylesheet, no build step, no webfont, no network request.
   System faces only: zero third-party request, zero FOUT, zero layout shift.

   Two type roles, and the split is meaningful rather than decorative: the system
   sans sets prose, the system mono sets anything measured — field labels, units,
   every figure, every table number, the formula. If it is a quantity, it is mono.

   Colour follows one rule: --signal marks the answer and the action that leads to
   one. Nothing else earns it. Everything else is graphite and hairlines. */

:root {
  color-scheme: light dark;

  --ground: #f4f4f1;
  --panel: #ffffff;
  --sunk: #fafaf8;
  --ink: #16181b;
  --ink-soft: #4a5057;
  /* 4.9:1 on --ground. Anything lighter fails WCAG AA for the help text and
     breadcrumbs that use it — and those are read on a phone, outdoors. */
  --ink-faint: #656c77;
  --rule: #e5e5e1;
  --rule-strong: #c9c9c3;

  --signal: #c2410c;
  --signal-hi: #9a3412;
  --signal-soft: #fcf1ea;
  --signal-line: #f0cbb4;
  /* Text laid on --signal. White clears 5.1:1 on the dark orange; on the light
     orange the dark theme has to use, it would sit at 2.2:1. */
  --on-signal: #ffffff;
  --warn: #b45309;

  /* The readout inverts in light mode — see the .results block. */
  --readout: #1a1d21;
  --readout-ink: #e8eaec;
  --readout-soft: #9ba3ac;
  --readout-faint: #838b95;
  --readout-rule: rgb(255 255 255 / 13%);
  --readout-signal: #fb923c;
  --tick: rgb(255 255 255 / 16%);
  --tick-major: rgb(251 146 60 / 55%);

  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 1px 2px rgb(16 24 40 / 4%), 0 1px 3px rgb(16 24 40 / 4%);
  --measure: 46rem;
  --measure-wide: 68rem;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
}

/* The dark palette is reached two ways — the operating system asks for it, or the
   header toggle pins it — so it is declared twice, deliberately. The two blocks
   below must be edited together; nothing else in this file redefines a token.
   `light-dark()` would collapse them into one, but a browser that does not know
   the function leaves every token invalid and the page unpainted, which is not a
   trade worth making for a site read on site phones. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0e1114;
    --panel: #15181c;
    --sunk: #0e1114;
    --ink: #e7eaee;
    --ink-soft: #99a1aa;
    --ink-faint: #7d8690;
    --rule: #242930;
    --rule-strong: #333a42;

    --signal: #fb923c;
    --signal-hi: #fdba74;
    --signal-soft: #21160f;
    --signal-line: #472a16;
    --on-signal: #14171b;
    --warn: #fbbf24;

    /* Recessed rather than inverted — the readout is already the darkest thing. */
    --readout: #090b0d;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 1px 3px rgb(0 0 0 / 30%);
  }
}

:root[data-theme="dark"] {
  --ground: #0e1114;
  --panel: #15181c;
  --sunk: #0e1114;
  --ink: #e7eaee;
  --ink-soft: #99a1aa;
  --ink-faint: #7d8690;
  --rule: #242930;
  --rule-strong: #333a42;

  --signal: #fb923c;
  --signal-hi: #fdba74;
  --signal-soft: #21160f;
  --signal-line: #472a16;
  --on-signal: #14171b;
  --warn: #fbbf24;

  --readout: #090b0d;
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 1px 3px rgb(0 0 0 / 30%);
}

/* Form controls and scrollbars follow the pinned theme, not the system one. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Set for the two frames a theme swap takes, so the change lands at once
   instead of every tinted surface crossfading through grey. */
:root[data-swap] *, :root[data-swap] *::before, :root[data-swap] *::after {
  transition: none !important;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0s !important; animation-duration: 0s !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 16px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2rem 1.15rem 3rem;
}
main.wide { max-width: var(--measure-wide); }

h1 {
  font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.35rem);
  line-height: 1.1; margin: 0 0 .55rem; letter-spacing: -.03em; font-weight: 700;
  text-wrap: balance;
}
h2 { font-size: 1.2rem; margin: 2.4rem 0 .8rem; letter-spacing: -.015em; line-height: 1.3; }
h3 { font-size: .98rem; margin: 1.5rem 0 .4rem; letter-spacing: -.005em; }
p { margin: 0 0 .95rem; }

/* Prose links carry the underline, not the colour — the page keeps one bright
   thing, and the underline is a non-colour cue for anyone who cannot see it. */
a { color: inherit; }
main p a, main li a, .disclaimer a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
  transition: color .12s;
}
main p a:hover, main li a:hover, .disclaimer a:hover { color: var(--signal); }

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

.lede {
  color: var(--ink-soft); font-size: 1.06rem; line-height: 1.6;
  margin-bottom: 1.6rem; max-width: 54ch; text-wrap: pretty;
}
.note { font-size: .85rem; line-height: 1.6; color: var(--ink-faint); }

.skip {
  position: absolute; left: -9999px;
  background: var(--panel); color: var(--ink);
  padding: .6rem .9rem; border: 1px solid var(--rule); border-radius: var(--radius);
}
.skip:focus { left: .75rem; top: .75rem; z-index: 10; }

/* ---------- chrome ---------- */

.site-header { border-bottom: 1px solid var(--rule); }
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: var(--measure-wide); margin: 0 auto; padding: .85rem 1.15rem;
}
.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 700; font-size: 1.05rem; letter-spacing: -.025em;
  text-decoration: none; color: var(--ink);
}
.brand .mark { color: var(--signal); flex: none; border-radius: 7px; }
.site-header nav a {
  font: 500 .78rem/1 var(--mono); text-transform: uppercase; letter-spacing: .07em;
  text-decoration: none; color: var(--ink-faint); padding: .4rem 0;
}
.site-header nav a:hover { color: var(--signal); }

.bar-end { display: flex; align-items: center; gap: 1.15rem; }

/* Hidden until the head script marks the document as scripted, so a visitor
   without JavaScript is never offered a switch that cannot move. The attribute
   is set before the body parses, so the button is there from the first paint and
   nothing shifts. */
.theme-toggle {
  display: none;
  width: 2rem; height: 2rem; padding: 0; flex: none;
  align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--radius);
  color: var(--ink-faint); cursor: pointer;
  transition: color .12s, background .12s;
}
:root[data-js] .theme-toggle { display: inline-flex; }
.theme-toggle:hover { color: var(--signal); background: var(--panel); }
.theme-toggle svg { display: block; }

.crumbs {
  font: 400 .75rem/1.5 var(--mono); color: var(--ink-faint); margin-bottom: 1.1rem;
  overflow-wrap: anywhere;
}
.crumbs a { color: var(--ink-faint); text-decoration: none; }
.crumbs a:hover { color: var(--signal); }
.crumbs .sep { margin: 0 .45rem; color: var(--rule-strong); }

.site-footer {
  background: var(--panel);
  border-top: 1px solid var(--rule);
  margin-top: 2.5rem;
}
.foot-inner { max-width: var(--measure-wide); margin: 0 auto; padding: 2.25rem 1.15rem 2.75rem; }
.foot-nav h2 {
  font: 500 .72rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-faint); margin: 0 0 .9rem;
}
.foot-nav ul {
  list-style: none; margin: 0 0 1.6rem; padding: 0;
  display: grid; gap: .4rem .5rem;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.foot-nav a { font-size: .9rem; text-decoration: none; color: var(--ink-soft); }
.foot-nav a:hover { color: var(--signal); }
.disclaimer {
  margin: 0; padding-top: 1.4rem; border-top: 1px solid var(--rule);
  font-size: .8rem; line-height: 1.65; color: var(--ink-faint); max-width: 46rem;
}
.disclaimer a { color: var(--ink-faint); text-decoration-thickness: 1px; }

/* ---------- page head ---------- */

/* The trade label is a signpost, not an ornament: mono, quiet, above the title. */
.badge {
  display: inline-block; margin-bottom: .6rem;
  font: 500 .72rem/1 var(--mono); text-transform: uppercase; letter-spacing: .11em;
  text-decoration: none; color: var(--ink-faint);
}
.badge::before { content: "\2190\00a0\00a0"; color: var(--rule-strong); }
.badge:hover { color: var(--signal); }
.badge:hover::before { color: var(--signal); }

/* ---------- the calculator: above the fold, always ---------- */

.calculator {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.calc-fields { padding: 1.25rem 1.25rem 1.35rem; }

.fields { display: grid; gap: 1.1rem; align-items: start; }
@media (min-width: 34rem) {
  .fields { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
}

.field label {
  display: block; font: 500 .7rem/1 var(--mono);
  color: var(--ink-faint); margin-bottom: .45rem;
  text-transform: uppercase; letter-spacing: .09em;
}

.control { display: flex; align-items: stretch; }

.control input {
  flex: 1; min-width: 0;
  font: 500 1.02rem/1.3 var(--mono); font-variant-numeric: tabular-nums;
  padding: .6rem .7rem;
  color: var(--ink); background: var(--sunk);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius) 0 0 var(--radius);
  -moz-appearance: textfield;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.control input::-webkit-outer-spin-button,
.control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.control input:hover { border-color: var(--ink-faint); }
.control input:focus {
  outline: none;
  background: var(--panel);
  border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-soft);
  position: relative; z-index: 1;
}
.control input:not(:placeholder-shown):invalid { border-color: var(--warn); }

.control .unit {
  display: flex; align-items: center; padding: 0 .7rem;
  font: 500 .78rem/1 var(--mono); color: var(--ink-faint);
  background: var(--sunk);
  border: 1px solid var(--rule-strong); border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  white-space: nowrap;
}
.control .unit:empty { display: none; }
.control:has(.unit:empty) input { border-radius: var(--radius); }

.help {
  display: block; font-size: .78rem; line-height: 1.5;
  color: var(--ink-faint); margin-top: .45rem;
}

/* ---------- the readout ----------

   The one place the design raises its voice. In light mode the panel inverts to
   graphite so the answer reads as an instrument display rather than a paragraph;
   in dark mode it recedes below the card instead. The tape rule along its top
   edge is two repeating gradients — no image, no request, no layout cost.

   The palette tokens are re-declared here rather than overridden per child, so
   anything nested inside inherits colours tuned for a dark ground. */

.results {
  --panel: var(--readout);
  --ink: var(--readout-ink);
  --ink-soft: var(--readout-soft);
  --ink-faint: var(--readout-faint);
  --rule: var(--readout-rule);
  --signal: var(--readout-signal);

  position: relative;
  background: var(--readout);
  color: var(--ink);
  padding: 1.35rem 1.25rem 1.15rem;
}
.results::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 9px;
  background-image:
    repeating-linear-gradient(to right, var(--tick) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(to right, var(--tick-major) 0 1px, transparent 1px 40px);
  background-size: 100% 4px, 100% 9px;
  background-repeat: no-repeat;
  background-position: left top, left top;
}

.result {
  display: flex; align-items: baseline; gap: .6rem;
  font-size: .875rem; color: var(--ink-soft);
  padding: .4rem 0;
}
.result + .result { border-top: 1px solid var(--rule); }
.result-label { flex: 1; }
.result-value {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--ink);
}
.result-unit { font: 500 .8rem/1 var(--mono); color: var(--ink-faint); }

.result.primary {
  display: block; padding: .15rem 0 .85rem; margin-bottom: .15rem;
  border-bottom: 1px solid var(--rule);
}
.result.primary + .result { border-top: 0; }
.result.primary .result-label {
  display: block; font: 500 .7rem/1 var(--mono);
  text-transform: uppercase; letter-spacing: .11em; color: var(--ink-faint);
  margin-bottom: .35rem;
}
/* The one figure set in the sans: a monospace decimal point is a full-width cell,
   which at display size opens a hole in the middle of the number. Tabular figures
   give the same steady width as the digits change, without the gap. */
.result.primary .result-value {
  font-family: var(--sans);
  font-size: clamp(2.15rem, 1.6rem + 2.2vw, 2.9rem); line-height: 1;
  font-weight: 700; letter-spacing: -.035em; color: var(--signal);
}
.result.primary .result-unit {
  font-size: 1.05rem; font-weight: 600; color: var(--signal); margin-left: .3rem;
}

/* Nothing to show yet: the answer colour is reserved for an actual answer. */
.calculator:not(.has-result) .result-value,
.calculator:not(.has-result) .result-unit { color: var(--ink-faint); }

/* ---------- embed ---------- */

/* The embeddable copy renders inside somebody else's article, so it drops the
   page furniture and the outer margin: their layout supplies the surround, and
   ours would only fight it. */
body.embed { background: transparent; }
/* Bottom padding is load-bearing, not spacing: with none, the credit line's
   bottom margin collapses out through main's edge, the resize script measures
   main and lands ~8 px short, and the host page gets a scrollbar. */
body.embed main { padding: .5rem .75rem .55rem; max-width: none; }
.embed-title {
  font-size: 1.05rem; line-height: 1.3; margin: 0 0 .7rem; letter-spacing: -.01em;
}
.embed-title a { color: inherit; text-decoration: none; }
.embed-title a:hover { color: var(--signal); }
.embed-credit {
  margin: .7rem 0 .5rem; font-size: .78rem; line-height: 1.5; color: var(--ink-faint);
}

/* The copy-paste block on the calculator page. The code has to be readable as
   code — an embedder is going to scan it before trusting it on their own site. */
.snippet-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.snippet {
  width: 100%; margin: 0; padding: .85rem .9rem;
  background: var(--sunk); border: 1px solid var(--rule);
  border-left: 3px solid var(--signal); border-radius: var(--radius);
  overflow-x: auto;
}
.snippet code {
  font: 400 .78rem/1.7 var(--mono); color: var(--ink-soft);
  white-space: pre; display: block;
}

/* Only shown once the site can actually switch. */
.metric-note { display: none; }
:root[data-js] .metric-note { display: block; }

/* The same control on the calculator itself, in the share bar under the readout.
   Not above the fields: there it cost 39 px of vertical space on every page, and
   keeping the calculator above the fold is a load-bearing constraint here. */
.calc-units { display: none; }
:root[data-js] .calc-units {
  display: flex; align-items: center; gap: .5rem; flex: none;
}

/* Unit system control. Hidden without JavaScript for the same reason the theme
   toggle is: a control that cannot act is worse than no control. */
.foot-prefs { display: none; }
:root[data-js] .foot-prefs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  margin-bottom: 1.4rem;
}
.prefs-label { font-size: .8rem; color: var(--ink-faint); }
.units { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.unit-opt {
  padding: .34rem .7rem; border: 0; background: none; cursor: pointer;
  font: 500 .78rem/1 var(--sans); color: var(--ink-faint);
  transition: color .12s, background .12s;
}
.unit-opt + .unit-opt { border-left: 1px solid var(--rule); }
.unit-opt:hover { color: var(--signal); }
.unit-opt[aria-pressed='true'] { background: var(--signal); color: var(--on-signal); }

/* Preset rows. A table cell that is also a link has to say so without turning the
   table into a wall of blue — the underline stays dotted until hover. */
.preset {
  color: inherit; text-decoration: underline dotted var(--rule-strong);
  text-underline-offset: 3px;
}
.preset:hover, .preset:focus-visible {
  color: var(--signal); text-decoration: underline solid var(--signal);
}

/* Share bar. Sits under the readout, outside its dark ground, and stays hidden
   without JavaScript — copying a URL that no script is keeping in step with the
   fields would hand out a link to the wrong numbers. */
.share { display: none; }
:root[data-js] .share {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .8rem;
  padding: .75rem .1rem .1rem;
}
.copy-link {
  flex: none; padding: .42rem .8rem;
  font: 500 .82rem/1 var(--sans); letter-spacing: -.005em;
  color: var(--ink-soft); background: var(--panel);
  border: 1px solid var(--rule); border-radius: var(--radius);
  cursor: pointer; transition: color .12s, border-color .12s, background .12s;
}
.copy-link:hover { color: var(--signal); border-color: var(--signal-line); }
.share-note {
  flex: 1 1 14rem; min-width: 0;
  font-size: .78rem; line-height: 1.5; color: var(--ink-faint);
}

/* ---------- content below ---------- */

.warning {
  margin-top: 1.5rem; padding: .85rem 1rem .85rem 1.05rem;
  border: 1px solid var(--rule); border-left: 3px solid var(--warn);
  border-radius: var(--radius); background: var(--panel);
  font-size: .875rem; line-height: 1.6; color: var(--ink-soft);
}

.materials { margin-top: 2rem; }
.material-list { margin: 0 0 .8rem; padding-left: 1.15rem; }
.material-list li { margin-bottom: .3rem; }

.leadgen {
  margin-top: 2rem; padding: 1.25rem;
  border: 1px solid var(--signal-line); border-radius: var(--radius-lg);
  background: var(--signal-soft);
}
.leadgen h2 { margin-top: 0; }

.cta {
  display: inline-block; padding: .7rem 1.25rem;
  background: var(--signal); color: var(--on-signal); font-weight: 600;
  text-decoration: none; border: 0; border-radius: var(--radius);
  font-size: .98rem; cursor: pointer; letter-spacing: -.005em;
  transition: background .12s;
}
.cta:hover { background: var(--signal-hi); color: var(--on-signal); }

/* Sections are separated by a hairline and space, not by boxes. */
.explainer, .depth, .faq, .related {
  border-top: 1px solid var(--rule); margin-top: 2.75rem; padding-top: .25rem;
}
/* Listing pages are wide so the tile grid can breathe; their prose must not be.
   Sixty-eight rems of running text is a line the eye loses its place in. */
main.wide .explainer { max-width: var(--measure); }
.explainer > h2:first-child, .depth > h2:first-child,
.faq > h2:first-child, .related > h2:first-child { margin-top: 1.6rem; }
.depth ul { padding-left: 1.15rem; }
.depth ul li { margin-bottom: .3rem; }

.formula code {
  display: block; padding: .8rem .9rem;
  background: var(--sunk); border: 1px solid var(--rule);
  border-left: 3px solid var(--signal);
  border-radius: var(--radius);
  font-size: .85rem; overflow-x: auto; white-space: nowrap;
  font-family: var(--mono); color: var(--ink-soft);
}

/* Citations for the constants. Set close under the formula and visually tied to
   it by the same left rule, because the two are one claim, not two sections. */
.source-list {
  list-style: none; padding: 0 0 0 .9rem; margin: .9rem 0 .6rem;
  border-left: 2px solid var(--rule);
  font-size: .9rem; line-height: 1.6;
}
.source-list li { margin-bottom: .45rem; color: var(--ink-soft); }
.source-list li:last-child { margin-bottom: 0; }
.source-list cite {
  font-style: normal; font-weight: 600; color: var(--ink);
}
.source-list a { text-decoration-thickness: 1px; text-underline-offset: 2px; }

.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary {
  cursor: pointer; padding: .9rem 0; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: .5rem; height: .5rem;
  border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s;
}
.faq-item[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq-item summary:hover { color: var(--signal); }
.faq-item summary:hover::after { border-color: var(--signal); }
.faq-body { padding-bottom: 1rem; color: var(--ink-soft); }
.faq-body p { margin: 0; }

/* ---------- listing tiles ---------- */

.tiles {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.tile {
  display: block; height: 100%; padding: .8rem .9rem;
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--radius); text-decoration: none; color: var(--ink);
  box-shadow: inset 2px 0 0 transparent;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.tile:hover {
  border-color: var(--rule-strong);
  box-shadow: inset 2px 0 0 var(--signal);
  transform: translateY(-1px); color: var(--ink);
}
.tile .t { display: block; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.tile .s {
  display: block; font: 400 .74rem/1.4 var(--mono);
  color: var(--ink-faint); margin-top: .2rem;
}

/* Inside a block that already names the trade, the trade is noise. These rows
   carry the unit the calculator answers in instead — the one fact the title
   does not already give you. */
.tiles.spec { gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.tiles.spec .tile {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  padding: .7rem .85rem;
}
.tiles.spec .u {
  flex: none; font: 500 .7rem/1 var(--mono); text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-faint);
}
.tiles.spec .tile:hover .u { color: var(--signal); }

.cat-block { margin-top: 2.75rem; scroll-margin-top: 1.5rem; }
.cat-head {
  display: flex; align-items: baseline; gap: .7rem;
  margin: 0 0 .9rem; padding-bottom: .55rem;
  border-bottom: 1px solid var(--rule);
  font-size: 1.05rem; letter-spacing: -.015em;
}
.cat-head .count {
  font: 500 .72rem/1 var(--mono); font-weight: 500; color: var(--ink-faint);
  letter-spacing: .06em;
}

/* Index filter — injected by script, so it never appears without JS to run it. */
.filter { position: relative; margin: 1.75rem 0 .5rem; }
.filter input {
  width: 100%; font: 500 .95rem/1.4 var(--mono); padding: .75rem 5.5rem .75rem .9rem;
  color: var(--ink); background: var(--panel);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  transition: border-color .12s, box-shadow .12s;
}
.filter input::placeholder { color: var(--ink-faint); font-weight: 400; }
.filter input:focus {
  outline: none; border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-soft);
}
.filter .tally {
  position: absolute; right: .85rem; top: 50%; transform: translateY(-50%);
  font: 500 .72rem/1 var(--mono); letter-spacing: .06em;
  color: var(--ink-faint); pointer-events: none;
}
.filter-empty { color: var(--ink-soft); padding: 1.5rem 0; }
[hidden] { display: none !important; }

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

.table-wrap { overflow-x: auto; margin: 0 0 1.2rem; }
table {
  border-collapse: collapse; width: 100%; font-size: .9rem;
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--radius); overflow: hidden;
}
th, td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--rule); }
th {
  font: 500 .7rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-faint); background: var(--sunk); white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; }
td.num {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  white-space: nowrap; color: var(--ink);
}

.foot-meta ul { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }

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

/* ---------- home ---------- */

.hero { padding: .75rem 0 0; }
.hero h1 { max-width: 16ch; font-size: clamp(2rem, 1.35rem + 2.8vw, 3.1rem); }
.hero .lede { max-width: 44ch; font-size: 1.1rem; margin-bottom: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.btn-ghost {
  display: inline-block; padding: .7rem 1.25rem;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--panel); color: var(--ink); font-weight: 600;
  font-size: .98rem; text-decoration: none;
  transition: border-color .12s, color .12s;
}
.btn-ghost:hover { border-color: var(--signal); color: var(--signal); }

/* The trades sit beside the headline rather than a third of a page below it:
   the visitor who already knows their trade never has to scroll to find it. */
.hero-grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 60rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 20rem; gap: 3.5rem; }
  .hero { padding-top: 1.5rem; }
}

.trades { border-top: 1px solid var(--rule); }
.trades h2 {
  font: 500 .72rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-faint); margin: 1.25rem 0 .35rem;
}
.trades ul { list-style: none; margin: 0; padding: 0; }
.trades li + li { border-top: 1px solid var(--rule); }
.trades a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .48rem 0; text-decoration: none; color: var(--ink);
  font-size: .92rem; transition: color .12s, padding .12s;
}
.trades a:hover { color: var(--signal); padding-left: .35rem; }
.trades .n {
  font: 500 .72rem/1 var(--mono); color: var(--ink-faint); flex: none;
}
.trades a:hover .n { color: var(--signal); }

.trust {
  display: grid; gap: 0; margin: 3rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  list-style: none; padding: 0;
  border-top: 1px solid var(--rule);
}
.trust li { padding: 1.1rem 0; }
.trust li + li { border-top: 1px solid var(--rule); }
/* Side by side once there is room; stacked and rule-separated before that, so
   the three points never run together into one block on a phone. */
@media (min-width: 48rem) {
  .trust li { padding: 1.5rem 0 0; }
  .trust li + li { border-top: 0; border-left: 1px solid var(--rule); padding-left: 1.75rem; }
}
.trust strong {
  display: block; margin-bottom: .3rem; font-size: .95rem; letter-spacing: -.01em;
}
.trust span { font-size: .875rem; line-height: 1.6; color: var(--ink-soft); }