/* Coffee Ratio — kitchen-counter look: cream paper, roasted-brown ink, one crema accent.
   Square corners everywhere; hierarchy comes from borders, spacing, weight and colour.
   Light and dark follow prefers-color-scheme. All text pairs meet WCAG AA. */

/* Barlow (SIL OFL 1.1, fonts/OFL.txt), self-hosted, latin subset, 3 weights. */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/barlow-latin-400-normal.woff2") format("woff2");
  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: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/barlow-latin-600-normal.woff2") format("woff2");
  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: "Barlow";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/barlow-latin-800-normal.woff2") format("woff2");
  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;
}
/* Fallback shaped to Barlow's metrics so the swap does not move the layout.
   Measured: Barlow sets text at 95.3% of Arial's width; ascent 1.00em, descent 0.20em, no line gap
   (overrides are divided by size-adjust). */
@font-face {
  font-family: "Barlow Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 95.3%;
  ascent-override: 104.9%;
  descent-override: 21%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;

  /* Colour */
  --bg: #f5eee3;          /* cream */
  --surface: #fffaf3;
  --ink: #2b1b12;         /* roasted brown */
  --muted: #6a5443;
  --line: #ddcdb7;        /* dividers (decorative) */
  --control: #8f7760;     /* control borders, 3:1+ on surface and bg */
  --accent: #a8461a;      /* crema: the only accent (selection, focus, hover) */
  --display-ink: #fbe9cf; /* digits in the scale readout window */
  --water-cell: #9c8166;
  --error: #b3261e;
  /* Roles that reuse a base colour */
  --on-accent: var(--surface);
  --display-bg: var(--ink);
  --coffee-cell: var(--ink);

  /* Type scale */
  --font: "Barlow", "Barlow Fallback", Arial, sans-serif;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 28px;
  --text-3xl: 38px;
  --text-4xl: 54px;
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --caps-spacing: 0.08em;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  /* Vertical rhythm: large space BEFORE a new section, small space inside it.
     Section break (before a section, ad or footer): 48px on phones, 64px from ~1070px wide. */
  --section-gap: clamp(var(--space-7), 6vw, var(--space-8));
  --divider-gap: var(--space-5);   /* section divider line -> its heading */
  --heading-gap: var(--space-4);   /* section heading -> its first content */
  --block-gap: var(--space-4);     /* table, list or diagram <-> surrounding text */

  /* Borders and sizes */
  --border: 2px;          /* controls, card, rules */
  --border-thin: 1px;     /* dividers */
  --focus-ring: 3px;
  --tap: 44px;            /* minimum tap target */
  --readout-h: 56px;
  --header-h: 48px;

  /* Content width: 1280px column, 32px side gutter (18px at 700px and below) */
  --content-max: 1280px;
  --gutter: 32px;
}
@media (max-width: 700px) {
  :root { --gutter: 18px; }
}
@media (min-width: 900px) {
  :root { --readout-h: 76px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17110d;
    --surface: #221913;
    --ink: #f2e6d6;
    --muted: #bfa891;
    --line: #3b2d24;
    --control: #8c7562;
    --accent: #e2884a;
    --dark-ink: #1a110c;    /* text on the accent and on the lit readout */
    --display-bg: #ffd9a8;  /* inverted: lit amber window with dark digits */
    --water-cell: #7d6754;
    --error: #ff8a80;
    --on-accent: var(--dark-ink);
    --display-ink: var(--dark-ink);
  }
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: var(--lh-body);
}

.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

:focus-visible {
  outline: var(--focus-ring) solid var(--accent);
  outline-offset: 2px;
}

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

[hidden] { display: none !important; }

/* Square scrollbars (e.g. the ratio table on very narrow screens) */
* { scrollbar-color: var(--control) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--control); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Header ---------- */
.site-header {
  height: var(--header-h);
  border-bottom: var(--border) solid var(--ink);
}
.site-header .wrap {
  height: calc(var(--header-h) - var(--border));
  display: flex;
  align-items: center;
}
.logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 800;
  font-size: var(--text-lg);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}

/* ---------- Headings and text ---------- */
h1 {
  margin: var(--space-3) 0 var(--space-1);
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: var(--lh-tight);
}
.subhead {
  margin: 0 0 var(--space-3);
  color: var(--muted);
  font-size: var(--text-base);
  line-height: var(--lh-snug);
}
h2 {
  margin: 0 0 var(--heading-gap);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: var(--lh-snug);
}
h3 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
  line-height: var(--lh-snug);
}
p { margin: 0 0 0.75em; }
/* The last paragraph of any block adds no space, so each gap comes from one rule only */
main p:last-child { margin-bottom: 0; }
section { margin-top: var(--section-gap); }

/* Field captions, like the mode labels on a scale */
.cap {
  display: block;
  font-size: var(--text-sm);
  line-height: 18px;
  font-weight: 600;
  letter-spacing: var(--caps-spacing);
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Native controls, restyled square ----------
   Shared states: hover = accent border, active = page background, focus = accent ring,
   disabled = divider border and muted text. */
input,
select,
button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  font: inherit;
  font-size: var(--text-base);
  color: var(--ink);
}
input,
select,
button,
.method-row label {
  border: var(--border) solid var(--control);
  background-color: var(--surface);
}
input,
select { min-width: 0; }
button,
select,
.method-row label { cursor: pointer; }

/* Hover only on devices that really hover, so the accent border never sticks after a tap */
@media (hover: hover) {
  input:hover,
  select:hover,
  button:hover,
  .method-row label:hover { border-color: var(--accent); }
}
button:active,
.method-row label:active { background-color: var(--bg); }

button:disabled,
select:disabled {
  cursor: default;
  border-color: var(--line);
  color: var(--muted);
  background-color: var(--bg);
}

/* Square chevron drawn with two hard-edged gradients */
select {
  padding: 0 var(--space-6) 0 var(--space-3);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - var(--space-4) - 6px) 50%, calc(100% - var(--space-4)) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
select:disabled {
  background-image: none;
  padding-right: var(--space-3);
  opacity: 1;
}
input[aria-invalid="true"] { border-color: var(--error); }

/* ---------- Calculator ---------- */
.calc {
  background: var(--surface);
  border: var(--border) solid var(--ink);
  padding: var(--space-4);
}
.noscript { margin: 0 0 var(--space-3); font-weight: 600; }

/* Brew method presets: radio buttons drawn as square buttons. Three columns on phones,
   wrapping rows from 600px. All nine are always visible. */
.calc-setup { container-type: inline-size; }
.methods {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.methods legend { padding: 0; margin-bottom: var(--space-2); }
.method-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}
.method-row input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.method-row label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--lh-tight);
  text-align: center;
  hyphens: auto;          /* "concen-trate" on the narrowest phones */
  overflow-wrap: anywhere;
  user-select: none;
}
.method-row input:checked + label {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.method-row input:focus-visible + label {
  outline: var(--focus-ring) solid var(--accent);
  outline-offset: 2px;
}
@media (min-width: 600px) {
  .method-row { display: flex; flex-wrap: wrap; }
  .method-row label {
    flex: 0 0 auto;
    padding: 0 var(--space-4);
    font-size: var(--text-base);
    white-space: nowrap;
  }
}

/* Ratio stepper: "1 : [16]", its message line underneath */
.ratio-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.ratio-line > .cap { line-height: var(--tap); }
.ratio-ctl { display: grid; justify-items: end; flex: none; }
/* Very narrow cards (viewports under about 310px): the stepper does not fit beside its label */
@container (max-width: 250px) {
  .ratio-line { display: block; }
  .ratio-line > .cap { line-height: 18px; margin-bottom: var(--space-1); }
  .ratio-ctl { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
}
.stepper {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.ratio-one {
  flex: none;
  white-space: nowrap;
  font-size: var(--text-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.stepper input {
  flex: 0 1 3.6em;
  width: 3.6em;
  min-width: 2.6em;
  height: var(--tap);
  padding: 0 var(--space-1);
  text-align: center;
  font-size: var(--text-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.step-btn {
  flex: 0 0 var(--tap);
  width: var(--tap);
  height: var(--tap);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1;
}

/* Field messages: the line height is always reserved, so showing a message never moves the layout */
.field-msg {
  min-height: 18px;
  margin: 0;
  font-size: var(--text-sm);
  line-height: 18px;
  font-weight: 600;
  color: var(--error);
}
.calc-tag { letter-spacing: 0.04em; }

/* Scale readouts: big right-aligned tabular digits. The computed one is the lit display window.
   Number + unit form a two-column grid; both rows share the columns, so the coffee and water
   boxes line up. Both columns may shrink, so a row is never wider than the card. */
.calc-scale {
  --unit-w: 92px;       /* fits g, ml, fl oz and cups at 16px, so the digits get most of the row */
  container-type: inline-size;
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-5);   /* equal space above and below the divider */
  padding-top: var(--space-5);
  border-top: var(--border-thin) solid var(--line);
}
/* Only while tbsp or scoops is chosen does the shared unit column widen to fit "(approx.)" */
.calc-scale:has(#coffee-unit option[value="tbsp"]:checked, #coffee-unit option[value="scoop"]:checked) {
  --unit-w: 164px;
}
.readout { display: grid; gap: var(--space-2); min-width: 0; }   /* label 8px above its input */
.readout-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--unit-w));
  gap: var(--space-2);
}
.readout-num {
  width: 100%;
  height: var(--readout-h);
  padding: 0 var(--space-3);
  text-align: right;
  font-size: var(--text-3xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.readout-num.is-computed {
  background-color: var(--display-bg);
  border-color: var(--display-bg);
  color: var(--display-ink);
  caret-color: var(--display-ink);
}
@media (hover: hover) {
  .readout-num.is-computed:hover { border-color: var(--accent); }
}
.readout-row select { width: 100%; height: var(--readout-h); text-overflow: ellipsis; }
.unit-fixed {
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: var(--readout-h);
  padding-left: var(--space-3);
  font-size: var(--text-lg);
  font-weight: 600;
}
/* Narrow cards: smaller digits and tighter unit padding (unit text stays 16px) */
@container (max-width: 300px) {
  .calc-scale:has(#coffee-unit option[value="tbsp"]:checked, #coffee-unit option[value="scoop"]:checked) > .readout { --unit-w: 152px; }
  .calc-scale > .readout { --unit-w: 76px; }
  .readout-num { padding: 0 var(--space-2); font-size: var(--text-2xl); }
  .readout-row select {
    padding: 0 var(--space-5) 0 var(--space-2);
    background-position: calc(100% - var(--space-2) - 6px) 50%, calc(100% - var(--space-2)) 50%;
  }
}
/* Very narrow cards (viewports under about 290px): the unit goes under the number */
@container (max-width: 240px) {
  .readout-row { grid-template-columns: minmax(0, 1fr); }
  .readout-row select,
  .unit-fixed { height: var(--tap); }
}

.cup-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
}
.cup-line input {
  width: 5.5em;
  height: var(--tap);
  padding: 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hint {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--muted);
}

/* Smallest phones (320–359px): a tighter card so the readouts stay on the first screen */
/* Phones: tighter vertical rhythm inside the card (ratio row, divider, readout blocks) */
@media (max-width: 599px) {
  /* Spacing above the tool is kept small so the tool stays high on the screen */
  h1 { margin-top: var(--space-2); }   /* still more space above the H1 than below it */
  .subhead { margin-bottom: var(--space-2); }
  .calc { padding: var(--space-3); }
  .method-row { gap: var(--space-1); }
  .ratio-line { margin-top: var(--space-4); }
  .calc-scale {
    gap: var(--space-4);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
  }
}
@media (max-width: 359px) {
  :root { --readout-h: 48px; }
  h1 { font-size: var(--text-xl); }
  .subhead { font-size: var(--text-sm); }
  .method-row label { font-size: var(--text-xs); }
}

/* Wide screens: presets and ratio on the left, the scale on the right */
@media (min-width: 900px) {
  h1 { font-size: var(--text-3xl); margin-top: var(--space-5); }
  .subhead { font-size: var(--text-md); margin-bottom: var(--space-4); }
  .calc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-5);
  }
  .noscript { grid-column: 1 / -1; }
  .ratio-line { justify-content: flex-start; gap: var(--space-5); margin-top: var(--space-5); }
  .ratio-ctl { justify-items: start; }
  .calc-scale {
    margin-top: 0;
    padding-top: 0;
    padding-left: var(--space-6);
    border-top: 0;
    border-left: var(--border-thin) solid var(--line);
    align-content: start;
  }
  .readout-num { font-size: var(--text-4xl); }
}

/* ---------- Ad placeholders: fixed reserved size so real ads cause no layout shift ---------- */
/* 336×280 at ≥ 372px; below that a fixed 300×250, centred, allowed into the side gutters. */
.ad-slot {
  --ad-w: 336px;
  --ad-h: 280px;
  margin: var(--section-gap) auto 0;
  width: var(--ad-w);
}
@media (max-width: 371.98px) {
  .ad-slot {
    --ad-w: 300px;
    --ad-h: 250px;
    width: auto;
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
  }
  .ad-box { margin: 0 auto; }
}
.ad-label {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  line-height: 16px;
  color: var(--muted);
  text-align: center;
}
.ad-box {
  width: var(--ad-w);
  height: var(--ad-h);
  border: var(--border) dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: var(--text-sm);
}

/* ---------- Section layouts below the tool (one text column each; all stack on phones) ----------
   1. Ratio table: heading and lines full width, the table spans the full content width.
   2. Strength: the explanation beside its diagram.
   3. FAQ: heading above one full-width list of rows. */
@media (min-width: 860px) {
  .ref-strength {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-8);
    align-items: start;
  }
  .ref-strength .ratio-fig { margin-top: var(--space-7); }
}

.table-wrap { overflow-x: auto; margin: var(--block-gap) 0; }
table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--caps-spacing);
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--space-2) var(--space-4) var(--space-2) 0;   /* compact rows: 8px vertical, 16px between columns */
  border-bottom: var(--border) solid var(--ink);
}
td {
  text-align: left;
  vertical-align: baseline;
  padding: var(--space-2) var(--space-4) var(--space-2) 0;
  border-bottom: var(--border-thin) solid var(--line);
}
td:nth-child(n + 2) {
  font-weight: 600;
  white-space: nowrap;
}
/* Phones: tighter cells so all four columns fit without the table scrolling */
@media (max-width: 599px) {
  th,
  td { padding-right: var(--space-1); }
  th:last-child,
  td:last-child { padding-right: 0; }
}
.td-note {
  display: block;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--muted);
  white-space: normal;
}
.note { font-size: var(--text-sm); color: var(--muted); }

/* Ratio diagram: one square of coffee, then X squares of water.
   Cells never shrink, so the 1:18 strip always shows all 18 water squares. */
.ratio-fig {
  /* Small phones: 19 squares plus the label fit the column (12px step at most). */
  --step: clamp(8px, calc((100vw - 2 * var(--gutter) - 80px) / 19), 12px);
  --cell: calc(var(--step) - 2px);
  margin: var(--block-gap) 0;
}
.strip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.strip-x {
  flex: 0 0 52px;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
}
.cells {
  display: block;
  flex: none;
  height: var(--cell);
  width: calc((var(--n) + 1) * var(--step));
  background:
    linear-gradient(var(--coffee-cell), var(--coffee-cell)) 0 0 / var(--cell) 100% no-repeat,
    repeating-linear-gradient(90deg, var(--water-cell) 0 var(--cell), transparent var(--cell) var(--step))
      var(--step) 0 / calc(var(--n) * var(--step)) 100% no-repeat;
}
.ratio-fig figcaption {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--muted);
}
.key {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 var(--space-1) 0 0;
  vertical-align: -1px;
}
.key-coffee { background: var(--coffee-cell); }
.key-water { background: var(--water-cell); margin-left: var(--space-3); }
@media (min-width: 700px) {
  .ratio-fig { --cell: 14px; --step: 17px; }
}
@media (min-width: 1200px) {
  .ratio-fig { --cell: 18px; --step: 22px; }
}

/* ---------- FAQ: native details/summary, one list of full-width rows ----------
   The section's divider sits ABOVE the heading; the list itself has no top line. */
.faq {
  border-top: var(--border) solid var(--ink);
  padding-top: var(--divider-gap);
}
.qa { border-bottom: var(--border-thin) solid var(--line); }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--tap);
  padding: var(--space-3) 0;
  cursor: pointer;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::marker { content: ""; }
/* +/− indicator: the symbol itself changes, so the state is not shown by colour alone.
   Empty alt text keeps screen readers from reading "+" after the question; <details>
   already announces expanded/collapsed. Hover and active match the other controls. */
.qa summary::after {
  content: "+";
  content: "+" / "";
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--border) solid var(--control);
  background-color: var(--surface);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1;
}
@media (hover: hover) {
  .qa summary:hover::after { border-color: var(--accent); }
  .qa[open] summary:hover::after { border-color: var(--accent); }
}
.qa summary:active::after { background-color: var(--bg); }
.qa[open] summary::after {
  content: "\2212";
  content: "\2212" / "";
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
/* Focus ring drawn inside the row, so its edges line up with the row dividers */
.qa summary:focus-visible { outline-offset: calc(-1 * var(--focus-ring)); }
/* Open answer: 8px below the question, 12px below the answer */
.qa[open] summary { padding-bottom: var(--space-2); }
.faq .qa p { margin: 0 0 var(--space-3); }

/* ---------- Footer ---------- */
.site-footer {
  margin-top: var(--section-gap);
  padding: var(--divider-gap) 0;
  border-top: var(--border) solid var(--ink);
  color: var(--muted);
  font-size: var(--text-sm);
}
.site-footer p { margin: 0; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

/* ---------- Text links (footer, privacy page) ---------- */
main a:not(.logo),
.site-footer a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Privacy page: one full-width column, same width as the main page ----------
   The whole policy is ONE section: a single section break below the title area, then
   topics as subsections (32px above each topic heading, 8px below, no divider lines). */
.policy-body { margin-top: var(--section-gap); }
.policy-body > section { margin-top: var(--space-6); }
.policy-body > section:first-child { margin-top: 0; }
.policy-body h2 {               /* subheading style: smaller than the H1 and section headings, bold */
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
  font-weight: 800;
  line-height: var(--lh-snug);
}
.policy ul {
  margin: var(--space-2) 0;
  padding-left: var(--space-5);
}
/* The list's own 8px is the only gap above it */
.policy-body p:has(+ ul) { margin-bottom: 0; }
.policy li { margin-bottom: var(--space-1); }

/* ---------- Forced colours / high contrast ----------
   System colours replace the palette, so keep the selected preset, the calculated readout
   and the diagram distinguishable with system highlight colours and visible borders. */
@media (forced-colors: active) {
  .method-row input:checked + label {
    forced-color-adjust: none;
    background-color: Highlight;
    border-color: Highlight;
    color: HighlightText;
  }
  .readout-num.is-computed { border-style: double; border-width: 4px; }
  .cells,
  .key { forced-color-adjust: none; }
  button:disabled { border-color: GrayText; color: GrayText; }
  /* Keep the drawn chevron so unit fields still read as menus */
  select {
    forced-color-adjust: none;
    color: CanvasText;
    background-color: Canvas;
    border-color: CanvasText;
  }
  select:disabled { color: GrayText; border-color: GrayText; }
}