/* PlainStub design system, v3 (design redesign, Nov 2026).
   Direction: the printed pay stub and the IRS form ledger. Hard ink borders,
   perforated tear lines between inputs and results, tabular mono figures,
   numbered ledger rows instead of card grids. Built on the
   premium-site-design-bundle token system, adapted to the PlainStub brand
   register: cream paper, deep green ink, one primary accent (green). Gold is
   trim only (rules, focus ring); cranberry is a single-purpose signal
   (new-in-2026 markers, wordmark second word). The only soft shadow left on
   the site is the sticky header scroll shadow; every other elevation is a
   hard offset ink shadow with no blur.
   Fonts are self-hosted; the site makes no third-party requests of any kind.
   Type: Young Serif (display), Familjen Grotesk (body), Mansalva (hand notes),
   system mono stack for form codes, ledger tags and figures. */

@font-face {
  font-family: "Young Serif";
  src: url("/assets/fonts/young-serif-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Young Serif";
  src: url("/assets/fonts/young-serif-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Familjen Grotesk";
  src: url("/assets/fonts/familjen-grotesk-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Familjen Grotesk";
  src: url("/assets/fonts/familjen-grotesk-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Mansalva";
  src: url("/assets/fonts/mansalva-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Mansalva";
  src: url("/assets/fonts/mansalva-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* === Brand palette (unchanged values from the live site) === */
  --paper: #faf6ec;
  --paper-deep: #f3ecd9;
  --card: #fffdf4;
  --ink: #22301f;
  --ink-soft: #40513c;
  --green: #17542e;
  --green-deep: #0f3d20;
  --cranberry: #9e2a2b;
  --gold: #b4830a;
  --gold-soft: #e9d9a8;
  --rule: #ddd2b4;
  --error: #8f1d1d;
  --error-bg: #fdf1ef;

  /* === Bundle token names, mapped onto the brand palette === */
  --bg: var(--paper);
  --bg-elevated: var(--paper-deep);
  --surface: var(--card);
  --text: var(--ink);
  --text-muted: var(--ink-soft);
  --border: var(--rule);
  --accent: var(--green);
  --accent-hover: var(--green-deep);
  --signal: var(--cranberry);
  --trim: var(--gold);
  --trim-soft: var(--gold-soft);
  --danger: var(--error);

  /* === Typography (bundle 1.25 modular scale, verbatim values) === */
  --font-display: "Young Serif", Georgia, "Times New Roman", serif;
  --font-sans: "Familjen Grotesk", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-hand: "Mansalva", cursive;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.563rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;
  --text-4xl: 3.052rem;

  --leading-tight: 1.2;
  --leading-normal: 1.6;
  --leading-relaxed: 1.65;

  /* === Spacing scale (4px base, bundle values) === */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* === Radius scale: varied on purpose. Stub panels and buttons sit
     square-ish at the panel step, fields and chips at the small step.
     Nothing on the site uses the large step any more. === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-panel: 3px;
  --radius-chip: 2px;

  /* === Shadows: hard offset ink shadows, no blur (pay-stub register).
     The sticky header scroll shadow is the single soft exception. === */
  --shadow-hard: 5px 5px 0 rgba(34, 48, 31, 0.85);
  --shadow-hard-sm: 3px 3px 0 rgba(34, 48, 31, 0.85);

  /* Dotted leaders in the homepage ledger (decorative) */
  --leader: #b3a67f;

  /* === Motion (bundle values) === */
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  @view-transition { navigation: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  /* Brand adaptation: body sits 6.25% above the 1rem token, still on the scale's ladder. */
  font-size: calc(var(--text-base) * 1.0625);
  line-height: var(--leading-normal);
}

/* Paper grain, raised slightly on the large flat paper surface (the bundle
   range tops out at 4 percent; the redesign brief allows a touch more here,
   and the print texture now also comes from hard rules and perforations) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

header.site, main, footer.site { position: relative; z-index: 1; }

::selection { background: var(--trim-soft); color: var(--text); }

.wrap {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 var(--space-5);
}
.reading { max-width: 46rem; }
/* Bundle measure rule: prose never runs past ~75 characters; tables and
   tool boxes keep the full column so ledger figures stay readable. */
.reading p { max-width: 68ch; }

/* Anchor targets must clear the sticky header */
[id] { scroll-margin-top: 7.5rem; }

/* Header: sticky top bar, per the bundle layout skeleton */
header.site {
  position: sticky;
  top: 0;
  z-index: 6;
  border-bottom: 3px double var(--accent);
  background: var(--bg);
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    header.site {
      animation: header-shadow linear both;
      animation-timeline: scroll();
      animation-range: 0 120px;
    }
    @keyframes header-shadow {
      to { box-shadow: 0 6px 16px -12px rgba(15, 61, 32, 0.45); }
    }
  }
}
.header-in {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-8);
  padding-top: var(--space-4);
  padding-bottom: var(--space-3);
}
.wordmark {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--accent-hover);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color var(--duration-fast) var(--ease-out);
}
.wordmark .stub { color: var(--signal); }
.wordmark:hover { color: var(--accent); }
.tagline {
  font-family: var(--font-hand);
  font-size: var(--text-lg);
  color: var(--text-muted);
  transform: rotate(-1.2deg);
}
nav.main { margin-left: auto; }
nav.main ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) 1.4rem;
  margin: 0;
  padding: 0;
}
nav.main a {
  display: block;
  color: var(--accent-hover);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-block: 0.55rem;
  transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
nav.main a:hover, nav.main a:focus-visible { border-bottom-color: var(--trim); }

/* Focus visibility, keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--trim);
  outline-offset: 2px;
}

/* Headings and prose */
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; color: var(--accent-hover); line-height: var(--leading-tight); text-wrap: balance; }
h1 { font-size: clamp(var(--text-2xl), 1.7rem + 2.2vw, var(--text-3xl)); margin: 0.4em 0 0.35em; }
h2 { font-size: var(--text-xl); margin: 1.6em 0 0.5em; }
h3 { font-size: var(--text-lg); margin: 1.3em 0 0.4em; }
p { margin: 0.7em 0; text-wrap: pretty; }
a { color: var(--accent); transition: color var(--duration-fast) var(--ease-out); }
a:hover { color: var(--accent-hover); }
.lede { font-size: var(--text-lg); line-height: 1.55; max-width: 62ch; }
.small { font-size: var(--text-sm); }
.muted { color: var(--text-muted); }
.reviewed { font-size: var(--text-sm); color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 0.6rem; margin-top: var(--space-8); }
.kicker {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  margin-top: var(--space-8);
}
.hand-note {
  font-family: var(--font-hand);
  font-size: var(--text-lg);
  color: var(--signal);
  transform: rotate(-1deg);
  display: inline-block;
}
ul.plain, ol.plain { padding-left: 1.3rem; }
li { margin: 0.35em 0; }

/* Panels: hard ink borders and hard offset shadows, no blur, square-ish
   corners. A plain card is a ruled panel; a tool is a pay stub. */
.card {
  background: var(--surface);
  border: 1.5px solid var(--text-muted);
  border-radius: var(--radius-panel);
  padding: var(--space-6);
  margin: var(--space-6) 0;
}
.tool {
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-hard);
  padding: var(--space-6);
  margin: var(--space-6) 0;
}
.tool h2 { margin-top: 0.2em; }

/* Forms */
fieldset { border: 1.5px solid var(--text-muted); border-radius: var(--radius-panel); padding: var(--space-4) var(--space-5) var(--space-5); margin: 0 0 var(--space-5); background: var(--bg); }
legend { font-family: var(--font-display); color: var(--accent-hover); padding: 0 0.4rem; font-size: var(--text-base); }
label { display: block; font-weight: 500; margin: 0.9rem 0 0.3rem; }
label:first-of-type { margin-top: 0.2rem; }
.hint { font-size: var(--text-sm); color: var(--text-muted); margin: 0.15rem 0 0; font-weight: 400; }
input[type="text"], input[type="number"], select {
  font: inherit;
  color: var(--text);
  background: #fff;
  border: 1.5px solid var(--text-muted);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  width: 100%;
  max-width: 22rem;
  transition: border-color var(--duration-fast) var(--ease-out);
}
input[aria-invalid="true"] { border-color: var(--danger); }
.radio-row { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin: 0.4rem 0 0.2rem; }
.radio-row label { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; font-weight: 500; min-height: 2.75rem; }
.radio-row input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }
button.go {
  font: inherit;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-hard-sm);
  padding: var(--space-3) var(--space-6);
  cursor: pointer;
  margin-top: var(--space-4);
  transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
button.go:hover { background: var(--accent-hover); }
button.go:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(34, 48, 31, 0.85); }
.error {
  color: var(--danger);
  font-weight: 500;
  border-left: 4px solid var(--danger);
  background: var(--error-bg);
  padding: 0.6rem 0.9rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 0.8rem 0;
}
/* The result block is the printed half of the stub: a perforated tear line
   (dashed rule with a punched hole at each panel edge) splits it from the
   inputs, and its figures print in tabular mono. */
.result {
  position: relative;
  border-top: 2px dashed var(--text-muted);
  margin-top: 1.5rem;
  padding-top: var(--space-5);
}
.result::before, .result::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px dashed var(--text-muted);
}
.result::before { left: calc(-1 * var(--space-6) - 11px); }
.result::after { right: calc(-1 * var(--space-6) - 11px); }
.result .headline { font-family: var(--font-display); font-size: var(--text-lg); color: var(--accent-hover); margin: 0.2em 0; }
.result .headline span { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: -0.02em; }
.result dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1.2rem; margin: 0.8rem 0; }
.result dt { font-weight: 500; }
.result dd { margin: 0; font-family: var(--font-mono); font-size: 0.95em; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.disclaimer-short {
  font-size: var(--text-sm);
  color: var(--text-muted);
  border-top: 1px dashed var(--border);
  padding-top: 0.7rem;
  margin-top: 1.1rem;
}

/* Result reveal: a short fade, only when the panel is unhidden by the tool.
   All result panels start hidden, so this never fires on page load. */
@media (prefers-reduced-motion: no-preference) {
  .result, #calc-errors { animation: reveal var(--duration-slow) var(--ease-out); }
  @keyframes reveal {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
}

/* Tables: form-ledger treatment. Full hairline rules on every side, no
   zebra striping, figures right-aligned in tabular mono. */
table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--space-4) 0 1.4rem;
  background: var(--surface);
  border: 1.5px solid var(--text-muted);
  font-variant-numeric: tabular-nums;
}
caption { text-align: left; font-family: var(--font-display); color: var(--accent-hover); font-size: var(--text-base); padding: 0.4rem 0; }
th, td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 0.55rem 0.7rem; text-align: left; vertical-align: top; }
th:last-child, td:last-child { border-right: none; }
tbody tr:last-child td { border-bottom: none; }
thead th { border-bottom: 2.5px solid var(--accent); color: var(--accent-hover); font-weight: 700; }
tbody tr { transition: background-color var(--duration-fast) var(--ease-out); }
tbody tr:hover { background: #f7f0dc; }
td.num, th.num { text-align: right; font-family: var(--font-mono); font-size: 0.95em; letter-spacing: -0.01em; }

/* Decoder: code glyphs in mono, ledger-style chips (no pill badges) */
.code-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0.8rem 0 0.2rem; }
.code-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  background: var(--bg);
  color: var(--accent-hover);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.code-chip:hover { background: var(--trim-soft); }
.code-chip[aria-pressed="true"] { background: var(--accent); color: #fff; }
dl.codes { margin: 0; }
dl.codes > div { border-bottom: 1px solid var(--border); padding: 0.9rem 0.2rem; }
dl.codes dt { font-family: var(--font-display); font-size: var(--text-lg); color: var(--accent-hover); }
dl.codes dt .code-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-sm);
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-chip);
  padding: 0.08rem 0.5rem;
  margin-right: 0.6rem;
  vertical-align: 0.12em;
}
dl.codes dt .code-badge.new { background: var(--signal); }
dl.codes dd { margin: 0.35rem 0 0; }
.tag-new {
  font-family: var(--font-hand);
  color: var(--signal);
  font-size: var(--text-base);
  margin-left: 0.5rem;
}

/* Home page: task-first asymmetric hero. The headline and lede sit left;
   right, dropped lower on purpose, is a small stub panel carrying the
   decoder entry (the number one January job) and the page's one sticker. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-6) var(--space-10);
  align-items: start;
  padding: var(--space-6) 0 0.6rem;
}
.hero h1 { font-size: clamp(var(--text-3xl), 2.1rem + 2.6vw, var(--text-4xl)); max-width: 22ch; }
.hero-stub {
  position: relative;
  margin-top: var(--space-12);
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-hard);
  padding: var(--space-5) var(--space-6) var(--space-4);
}
.sticker {
  position: absolute;
  top: -0.85rem;
  right: var(--space-5);
  transform: rotate(2.5deg);
  background: var(--bg);
  border: 2px solid var(--signal);
  border-radius: var(--radius-chip);
  box-shadow: var(--shadow-hard-sm);
  color: var(--signal);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  margin: 0;
}
.hero-stub-title { font-size: var(--text-xl); margin: 0.1em 0 0.3em; }
.hero-stub-text { margin: 0.2em 0 0; }
.hero-stub .code-grid { margin-top: 0.6rem; }

/* The tools index is a ledger, not a card grid: numbered rows, a dotted
   leader, and a mono form tag at the right edge. */
.ledger { list-style: none; margin: var(--space-4) 0 var(--space-6); padding: 0; border-top: 2px solid var(--ink); }
.ledger-row { border-bottom: 1px solid var(--border); }
.ledger-row a {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: 0.8rem 0.3rem;
  text-decoration: none;
  color: var(--text);
  transition: background-color var(--duration-fast) var(--ease-out);
}
.ledger-row a:hover .ledger-name { text-decoration: underline; text-decoration-color: var(--trim); text-underline-offset: 3px; }
.ledger-row a:hover .ledger-leader { border-bottom-color: var(--text-muted); }
.ledger-num { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; color: var(--signal); }
.ledger-main { display: block; }
.ledger-name { display: block; font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.25; color: var(--accent-hover); }
.ledger-desc { display: block; max-width: 60ch; margin-top: 0.15rem; }
.ledger-leader { flex: 1 1 1.5rem; min-width: 1.5rem; align-self: center; border-bottom: 2px dotted var(--leader); }
.ledger-tag { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; color: var(--accent-hover); }

/* What changed: a ruled ledger list with mono date and form tags. */
.change-ledger { border-top: 2px solid var(--ink); margin: 1.2rem 0 0.4rem; }
.change-entry {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: var(--space-2) var(--space-6);
  padding: var(--space-5) 0.2rem;
  border-bottom: 1px solid var(--border);
}
.change-tag { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.02em; color: var(--signal); margin: 0.35rem 0 0; }
.change-text h3 { margin-top: 0; }
.change-text p:last-child { margin-bottom: 0.2em; }

/* Q and A */
.qa { border-bottom: 1px solid var(--border); padding: 0.9rem 0; }
.qa p.q { font-weight: 700; color: var(--accent-hover); margin: 0.2em 0; }

/* Callout */
.callout {
  border-left: 4px solid var(--trim);
  background: var(--bg-elevated);
  padding: 0.8rem 1.1rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 1.2rem 0;
}
.callout p:first-child { margin-top: 0.2em; }
.callout p:last-child { margin-bottom: 0.2em; }

/* Footer */
footer.site {
  margin-top: var(--space-12);
  border-top: 3px double var(--accent);
  background: var(--bg-elevated);
  padding: var(--space-8) 0 var(--space-10);
}
footer.site nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; padding: 0; margin: 0 0 1.2rem; }
footer.site nav a { color: var(--accent-hover); font-weight: 500; display: inline-block; padding-block: 0.5rem; }
.fineprint {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.fineprint p { margin: 0.55em 0; }
.fineprint .fp-head { font-family: var(--font-display); color: var(--accent-hover); font-size: var(--text-base); margin-top: 0; }
.footer-base { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; align-items: baseline; margin-top: 1.1rem; font-size: var(--text-sm); color: var(--text-muted); }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent-hover);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 10;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; color: #fff; }

@media (max-width: 52rem) {
  .hero { grid-template-columns: 1fr; }
  .hero-stub { margin-top: var(--space-6); }
}

@media (max-width: 40rem) {
  .result dl { grid-template-columns: 1fr; gap: 0.05rem; }
  .result dd { margin-bottom: 0.5rem; }
  .tool, .card { padding: 1.1rem; }
  .result::before { left: calc(-1.1rem - 11px); }
  .result::after { right: calc(-1.1rem - 11px); }
  .change-entry { grid-template-columns: 1fr; }
  .change-tag { margin-top: 0; }
  .ledger-leader { display: none; }
  .ledger-row a { flex-wrap: wrap; row-gap: 0.15rem; }
}

/* Reduced motion: collapse every duration and kill the reveal animation. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-normal: 0.01ms;
    --duration-slow: 0.01ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}