/* Policy pages — "Spec Sheet".
 *
 * Its own stylesheet rather than a share of landing.css or style.css, for the
 * same reason those two are separate: the landing page is a dark cinematic
 * surface and the app a light technical one. What changed is which of the two
 * a legal document belongs to. It used to be neither — one plain column on a
 * paper of its own (#F5F1EA) — and it read as a page from another site.
 *
 * It now wears the app's sheet: the same 54px rule bar on a hard ink
 * underline, the same 10px letterspaced mono "key" tier, the same ruled cells
 * and hairlines, and an index rail that is the parameters column doing the one
 * job a legal page needs it for. The palette is therefore style.css's, not a
 * third set — light and dark both, keyed off `data-theme` exactly as the app
 * is. If the palette moves, move it here, in style.css and in landing.css.
 *
 * The one thing not borrowed is the measure: the app is a 100vh sheet that
 * does not scroll, and a legal document is running text that does. Prose stays
 * at 34em (~68 characters); only the tables run the column's full width.
 */
:root {
  --paper: #F2EBE4;
  --sheet: #F5EFE7;
  --panel: #EFE8DF;
  --panel-dark: #EDE5DB;
  --field: #FCF9F4;

  --ink: #241F1A;
  --ink-2: #3C352E;
  --ink-3: #564E44;
  --muted: #8A7F70;

  --rule: #D3C7B7;
  --rule-soft: #E4DBCD;
  --rule-hair: #C6B9A8;

  --terra: #C67B5C;
  --terra-dark: #A8624A;
  --terra-wash: rgba(198, 123, 92, 0.08);

  /* Links are their own token, and only in the light theme is it not
     --terra-dark. A legal page sets its links at body size in running text,
     where the app mostly wears terracotta on a chip or a button: #A8624A on
     the sheet is 4.08:1, which is fine for a 10px key and short of the 4.5:1
     body copy needs. This is the same hue and saturation three steps darker
     (4.85:1 on the sheet, 4.56:1 on the rail, 5.27:1 in a cell), so it reads
     as the same colour and passes where the original does not. */
  --link: #975843;

  /* A chosen chip — the current page, the checked theme cell — the same
     semantic pair style.css uses, because "invert the token" is the wrong
     answer for it: --ink is cream in the dark theme. */
  --sel-bg: var(--ink);
  --sel-fg: var(--paper);

  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --bar: 54px;
  --rail: 244px;

  color-scheme: light;
}

/* The inline script in each <head> stamps `data-theme` before first paint, so
   the attribute rule below is the one that normally applies. This media query
   is the no-JavaScript path: without it a reader with JS off gets the light
   sheet on a dark system. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14100C;
    --sheet: #241D15;
    --panel: #1C1712;
    --panel-dark: #0F0C09;
    --field: #2E2619;

    --ink: #F5EEE6;
    --ink-2: #E0D6C8;
    --ink-3: #C4B7A5;
    --muted: #A0927F;

    --rule: #382E24;
    --rule-soft: #2A231B;
    --rule-hair: #4A3B2C;

    --terra: #D9885F;
    --terra-dark: #E5A17C;   /* accent as *text*: #A8624A is unreadable here */
    --terra-wash: rgba(217, 136, 95, 0.12);
    --link: var(--terra-dark);   /* 7.71:1 on the sheet; no darker step needed */

    --sel-bg: var(--terra);
    --sel-fg: #1B1512;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #14100C;
  --sheet: #241D15;
  --panel: #1C1712;
  --panel-dark: #0F0C09;
  --field: #2E2619;

  --ink: #F5EEE6;
  --ink-2: #E0D6C8;
  --ink-3: #C4B7A5;
  --muted: #A0927F;

  --rule: #382E24;
  --rule-soft: #2A231B;
  --rule-hair: #4A3B2C;

  --terra: #D9885F;
  --terra-dark: #E5A17C;
  --terra-wash: rgba(217, 136, 95, 0.12);
  --link: var(--terra-dark);

  --sel-bg: var(--terra);
  --sel-fg: #1B1512;

  color-scheme: dark;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); }
button { font-family: inherit; font-size: inherit; color: inherit; }

/* The sheet's smallest voice: mono, letterspaced, quiet. Every rail entry,
   unit and annotation is one. The uppercasing is done here rather than in the
   markup so a screen reader is not handed ten shouted words, and so the pages
   keep passing the placeholder check, which reads a run of capitals as a
   `GOVERNING_LAW_STATE` nobody filled in. */
.pol-key {
  font-family: var(--mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.16em;
  line-height: 1.5;
  color: var(--muted);
  text-transform: uppercase;
}
.pol-key-strong { color: var(--ink); }
.pol-key-accent { color: var(--terra-dark); }

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

/* ── Rule bar ─────────────────────────────────────────────────────── */

.pol-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--bar);
  padding: 0 20px;
  border-bottom: 1px solid var(--ink);
  background: var(--panel-dark);
}

.pol-bar-left,
.pol-bar-right { display: flex; align-items: center; gap: 14px; }
.pol-bar-right { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.pol-wordmark {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;   /* a replaced element beside text is a break chance */
}
.pol-wordmark:hover { color: var(--ink); }

/* Same crop and seat as the app's rule bar — see `.mark` in style.css. */
.pol-mark {
  width: 0.676em;    /* 147.5:192, the viewBox's own ratio */
  height: 0.88em;
  margin-right: 0.09em;
  color: var(--terra);
  fill: currentColor;
  vertical-align: -0.03em;
  overflow: visible;
}

/* The bar's one bordered-control vocabulary: the nav links, the theme cells
   and the app link are all the same box. */
.pol-nav-link {
  padding: 6px 11px;
  border: 1px solid var(--rule-hair);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pol-nav-link:hover { border-color: var(--ink); color: var(--ink); }
/* "You are here" is a location, not an action, and it must not look like one.
   A solid --sel-bg chip made it identical to the app button in the dark theme,
   where --sel-bg is terracotta: two solid terracotta boxes four apart in the
   same bar, one of which does nothing. The wash and a terracotta hairline mark
   the current page in both themes and leave the one action in the bar as the
   only filled thing in it. */
.pol-nav-link[aria-current="page"] {
  background: var(--terra-wash);
  border-color: var(--terra);
  color: var(--ink);
}
.pol-nav-app {
  background: var(--terra);
  border-color: var(--terra);
  color: #1B1512;
}
.pol-nav-app:hover {
  background: var(--terra-dark);
  border-color: var(--terra-dark);
  color: #1B1512;
}

/* The account chip, built by account.js and styled in account.css. It comes
   after the app link and a step further from it than the links are from each
   other: every other box in this bar is a page, and this one is the reader.
   Its height is the nav links' own, so the row keeps one box height. */
.pol-bar-right .acct { margin-left: 8px; }
.pol-bar-right .acct-avatar { height: 30px; }

/* The half of the modal lock account.css leaves to the page (see the note on
   `.is-modal-open` there). A policy page is a document at every width, so
   unlike the app's sheet it is repositioned wherever a dialog is open. */
:root.is-modal-open body {
  position: fixed;
  width: 100%;
}

/* ── Appearance ───────────────────────────────────────────────────── */

/* The app's toggle, unchanged: cone standing = cold kiln = light, cone
   slumped = temperature reached = dark. Two radios rather than one switch, so
   the state is shown rather than implied.

   It ships `hidden` and theme.js reveals it. Without script the choice cannot
   be stored, and a control that silently does nothing is worse than no
   control — the page then simply follows the system. */
.pol-theme {
  display: flex;
  align-items: stretch;
  height: 26px;
  border: 1px solid var(--rule-hair);
  background: var(--field);
}
.pol-theme[hidden] { display: none; }

.pol-theme-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.pol-theme-cell + .pol-theme-cell { border-left: 1px solid var(--rule-hair); }
.pol-theme-cell:hover { color: var(--ink); }
.pol-theme-cell[aria-checked="true"] { background: var(--sel-bg); color: var(--sel-fg); }
.pol-theme-cell:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }

/* ── Shell ────────────────────────────────────────────────────────── */

.pol-shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  align-items: start;
}

/* ── Index rail ───────────────────────────────────────────────────── */

.pol-rail {
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
  padding-bottom: 24px;
  background: var(--panel);
  border-right: 1px solid var(--rule);
}

.pol-rail-head {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  border-bottom: 1px solid var(--rule);
}

.pol-rail-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.pol-rail-list a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  padding: 7px 18px;
  border-left: 2px solid transparent;
  font-size: 13px;
  color: var(--ink-3);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pol-rail-list a:hover {
  background: var(--terra-wash);
  border-left-color: var(--terra);
  color: var(--ink);
}
.pol-rail-num {
  font-family: var(--mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding-top: 3px;
}
.pol-rail-list a:hover .pol-rail-num { color: var(--terra-dark); }

.pol-rail-foot {
  margin: 18px 18px 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule-soft);
  font-size: 13px;
}
.pol-rail-foot p { margin: 0 0 8px; }

/* ── Document ─────────────────────────────────────────────────────── */

.pol-doc {
  min-width: 0;
  padding-bottom: 80px;
  background: var(--sheet);
}

/* A drawing keeps its revision in the title block, so this page does too. */
.pol-titleblock {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 40px 56px 22px;
  border-bottom: 1px solid var(--ink);
}
.pol-titleblock h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 46px;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}
.pol-eyebrow { margin: 0 0 10px; }
.pol-stamp {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  text-align: right;
  padding-bottom: 6px;
}

.pol-body { padding: 0 56px; }
.pol-lede { max-width: 40em; margin: 34px 0 0; }
.pol-lede p { margin: 0 0 14px; }
.pol-lede p:first-child { font-size: 17px; color: var(--ink-2); }
.pol-lede p:last-child { margin-bottom: 0; }

/* A numbered section, ruled off from the one above it. */
.pol-sec { padding-top: 18px; margin-top: 44px; border-top: 1px solid var(--rule); }
.pol-sec-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px; }
.pol-sec-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.2;
  margin: 0;
}
.pol-sec-num {
  font-family: var(--mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.16em;
  color: var(--terra-dark);
}

.pol-sec h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 26px 0 6px;
  max-width: 34em;
}
/* Prose keeps its measure. The instruments — the tables and the claims list —
   run the column's full width; `.pol-claims` has to be excluded by name
   because it is a `ul` too, and inside 34em its 210px label column left the
   claim itself in a ~290px gutter. */
.pol-sec p,
.pol-sec > ul:not(.pol-claims) { max-width: 34em; }
.pol-sec p { color: var(--ink-3); margin: 0 0 14px; }
.pol-sec p:last-child { margin-bottom: 0; }
.pol-sec > ul { margin: 0 0 14px; padding-left: 20px; }
.pol-sec > ul li { color: var(--ink-3); margin-bottom: 8px; }
strong { color: var(--ink); font-weight: 600; }

/* A claim the reader can check, set apart from prose that merely describes.
   One ruled cell per claim, as the app sets a parameter — the 1px gaps are
   the container showing through, so there is no border to keep in step with
   --rule. */
.pol-claims {
  display: flex;
  flex-direction: column;
  gap: 1px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.pol-claims li {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 24px;
  padding: 16px 20px;
  background: var(--field);
  color: var(--ink-3);
  font-size: 15px;
  margin: 0;
}
.pol-claims b {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

/* ── Tables ───────────────────────────────────────────────────────── */

.pol-table-wrap { overflow-x: auto; margin: 18px 0 0; }

table { border-collapse: collapse; width: 100%; font-size: 14px; }
th {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 0 14px 9px 0;
  border-bottom: 1px solid var(--ink);
  vertical-align: bottom;
}
td {
  padding: 13px 14px 13px 0;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-3);
  vertical-align: top;
}
th:last-child, td:last-child { padding-right: 0; }
.pol-cell-lead { color: var(--ink); }
/* Cookie and storage names are case-sensitive identifiers a reader may go
   looking for in their browser's storage panel, so they are set in mono
   exactly as written — never through .pol-key, which uppercases. They break
   only where the markup puts a <wbr>, after an underscore: `claypath_` /
   `dismissed` still reads as one name, `__sessi` / `on` does not, and
   refusing to break at all pushed the table off the side of a phone. */
.pol-sec code {
  font-family: var(--mono);
  font-size: 0.86em;
  color: var(--ink);
}
.pol-row-mark { background: var(--terra-wash); }
.pol-row-mark td:first-child { padding-left: 12px; }
.pol-row-tag { display: block; margin-bottom: 4px; }

/* ── Foot ─────────────────────────────────────────────────────────── */

.pol-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin: 56px 56px 0;
  padding-top: 20px;
  border-top: 1px solid var(--ink);
}
.pol-foot p {
  margin: 0;
  max-width: 44em;
  font-size: 13px;
  color: var(--ink-3);
}

/* ── Not found ────────────────────────────────────────────────────── */

/* The one page with nothing on it, so it is the one page that gets the
   sheet's drawing grid — and a 404 drawn on that grid rather than set in type.
   One column, because the numerals are the headline: a figure beside the copy
   is a figure, and the eye lands on the serif line first.

   Centred, and the whole column with it. Left-aligned, the page read as a
   document that had lost its body — a heading, a paragraph and two buttons
   stacked at the top-left of an otherwise empty sheet. There is no body
   coming, so the sheet is the composition and the figure is its subject. */
.pol-nf {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 24px;
  /* --bar is the bar's content box; the sheet has to clear its 1px underline
     too, and the foot below measures 50.05px (14px padding either side of a
     13px link row on a 1px rule). 52 covers both with a hair to spare —
     under-counting by one pixel is a scrollbar on a page that fits. */
  min-height: calc(100vh - var(--bar) - 52px);
  padding: 48px 72px;
  background-color: var(--sheet);
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px;
}

/* The strip is the drawing's caption, on the rule that separates it from the
   copy. It carries the words the chip used to. */
.pol-nf-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px 24px;
  width: 100%;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--rule);
}

/* Subordinate to the numerals, where it used to be the page's loudest thing. */
.pol-nf h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.06;
  margin: 0 0 14px;
  text-wrap: balance;
}
.pol-nf-lede {
  font-size: 17px;
  color: var(--ink-3);
  /* auto, not 0: the measure is capped at 34em and the column it sits in is
     the full sheet, so without it a centred page has an off-centre lede. */
  margin: 0 auto;
  max-width: 34em;
}
.pol-nf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* 711px is the drawing at the size the copy can carry: any wider and the
   numerals outrun the 34em lede beneath them. It scales down from there
   rather than being hidden — on this page the figure IS the message, which is
   the one thing that changed about it. */
.pol-nf-plan { width: 100%; }
.pol-nf-plan svg {
  display: block;
  width: 100%;
  max-width: 711px;
  margin: 0 auto;      /* same reason as the lede: capped measure, full column */
  height: auto;
  overflow: visible;   /* the viewBox is cropped to the ink; don't shave it */
}
.pol-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 22px;
  border: 1px solid var(--ink);
  background: var(--terra);
  color: #1B1512;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pol-btn:hover { background: var(--terra-dark); color: #1B1512; }
.pol-btn-quiet {
  border-color: var(--rule-hair);
  background: var(--field);
  color: var(--ink);
}
.pol-btn-quiet:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.pol-nf-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 14px 20px;
  border-top: 1px solid var(--rule);
  background: var(--panel);
}
/* The links are centred on the page, which means the two captions either
   side have to be equal shares rather than their own widths — "Claypath ·
   slip casting mold generator" is four times "HTTP 404", so space-between
   alone puts the nav well right of centre. */
.pol-nf-foot > .pol-key { flex: 1 1 0; min-width: 0; }
.pol-nf-foot-name { text-align: left; }
.pol-nf-foot > .pol-key:last-child { text-align: right; }
.pol-nf-foot-links { display: flex; gap: 16px; }
.pol-nf-foot-links a { font-size: 13px; }

/* ── Withdrawal form ──────────────────────────────────────────────── */

/* Wears the app's cells rather than the browser's: same --field ground, same
   hairline, same mono voice for the annotations, so a form on a legal page
   reads as part of the sheet instead of a widget dropped onto it. */
.pol-form { max-width: 34em; margin: 18px 0 0; }
.pol-field { margin: 0 0 20px; padding: 0; border: 0; }
.pol-field label,
.pol-field legend {
  display: block;
  margin: 0 0 6px;
  padding: 0;
  font-size: 14px;
  color: var(--ink);
}
.pol-field label .pol-key { margin-left: 6px; }
.pol-field input[type="text"],
.pol-field input[type="email"],
.pol-field textarea {
  display: block;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--rule-hair);
  background: var(--field);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}
.pol-field input:focus-visible,
.pol-field textarea:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: -1px;
}
.pol-field-note {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--ink-3);
}
.pol-field-choice { display: block; }
.pol-choice {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--ink-2);
}
.pol-choice input { accent-color: var(--terra); }

/* --err-bg/--err-fg is the app's own pair. A literal here would print one
   theme's ink on the other's paper, which is the trap `.info::after` fell
   into in style.css. */
.pol-form-error {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-left: 3px solid var(--terra);
  background: var(--terra-wash);
  color: var(--ink);
  font-size: 14px;
}
.pol-form-error[hidden] { display: none; }

/* The receipt is the thing the Directive actually asks this page to produce,
   so it is set as a record rather than as a success toast: a ruled table of
   what was declared and when, which is what someone screenshots. */
.pol-receipt {
  max-width: 34em;
  margin: 18px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--rule);
  background: var(--panel);
}
.pol-receipt[hidden] { display: none; }
.pol-receipt dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 18px;
  margin: 12px 0 14px;
}
.pol-receipt dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  align-self: baseline;
}
.pol-receipt dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink);
  word-break: break-word;
}
.pol-receipt p { margin: 0; font-size: 14px; color: var(--ink-3); }

/* The signed-in instant path. Filled rather than ruled, because it sits
   above the statutory form and has to read as the shortcut it is — the form
   below is what the page is, and this is an offer. */
.pol-instant {
  max-width: 34em;
  margin: 18px 0 26px;
  padding: 18px 20px;
  border: 1px solid var(--terra);
  background: var(--terra-wash);
}
.pol-instant[hidden] { display: none; }
.pol-instant p { margin: 10px 0 0; font-size: 15px; color: var(--ink-2); }
.pol-instant p:first-child { margin: 0; }
.pol-instant .pol-btn { margin-top: 16px; }
.pol-instant-warn { font-size: 14px; color: var(--ink); }
.pol-instant-done { border-color: var(--rule); background: var(--panel); }
/* Neither an offer nor an error: nothing has gone wrong, this route simply
   does not apply. Ruled like the receipt rather than filled like the button. */
.pol-instant-shut { border-color: var(--rule); background: var(--panel); }
.pol-instant-shut .pol-key { color: var(--muted); }

/* The withdrawal link in the page foot. The Directive wants it prominent and
   permanently available, and explicitly not a plain text link among others,
   so it is boxed and hairlined rather than set as a fourth policy link. */
.pol-withdraw-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--terra);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.pol-withdraw-link:hover { background: var(--terra-wash); color: var(--ink); }

/* ── Narrow ───────────────────────────────────────────────────────── */

/* The rail is an index, and an index that has to be scrolled past to reach
   what it indexes is worse than none: below the two-column width it becomes a
   ruled strip of the same links, then goes entirely. */
@media (max-width: 940px) {
  .pol-shell { grid-template-columns: minmax(0, 1fr); }
  .pol-rail {
    position: static;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  /* Still one entry per line. Laid out as a wrapped row the entries pack two
     to a line whenever two happen to be short — "Stored parts, if you
     subscribe / 04 / Cookies" — which reads as a paragraph of fragments
     rather than an index. A contents list at the head of a long document is
     conventional on a phone; a jumbled one is not. */
  .pol-rail-list { margin: 10px 0; }
  .pol-rail-list a { padding: 8px 18px; }
  /* The figure used to be dropped here — it was decoration beside a
     headline. It is now the headline, so it only ever scales. */
  .pol-nf { padding: 36px 32px; gap: 20px; }
}

/* The foot is one line down to 852px and then the long caption wraps inside
   its own half — measured, not guessed: the three items are 304 + 162 + 61
   wide, and the two captions take equal shares so the nav can sit on the
   page's centre rather than on the centre of what is left over. Below that the
   caption goes, rather than the row growing a second line to carry a phrase
   the wordmark at the top of the page has already said. 880 leaves the
   measurement a little room; what stays is the nav, still centred, with the
   status on the right. */
@media (max-width: 880px) {
  .pol-nf-foot-name { display: none; }
  /* The empty half still has to be there — it is what the nav is centred
     against. */
  .pol-nf-foot::before { content: ""; flex: 1 1 0; }
}

@media (max-width: 720px) {
  .pol-bar { flex-wrap: wrap; padding: 10px 16px; gap: 12px; }
  .pol-bar-right { width: 100%; justify-content: flex-start; gap: 5px; }
  /* The links wrap from the left here, so the chip is pushed to the end of
     whatever row it lands on: its menu hangs right-aligned off it, and a chip
     in the middle of the bar would push that menu off the left of a phone. */
  .pol-bar-right .acct { margin-left: auto; }
  /* The four chips come to ~372px at the desktop padding, which is three
     pixels more than a 375px phone has and so costs a whole third row of the
     bar. Two pixels off each side buys the row back. */
  .pol-bar-right .pol-nav-link { padding: 6px 9px; }
  .pol-titleblock {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 32px 20px 20px;
  }
  .pol-stamp { align-items: flex-start; text-align: left; padding-bottom: 0; }
  .pol-titleblock h1 { font-size: 34px; }
  .pol-body { padding: 0 20px; }
  .pol-foot { flex-direction: column; gap: 16px; margin: 40px 20px 0; }
  .pol-nf { padding: 36px 20px; gap: 20px; }
  /* Stacked, the label column would be a 210px gutter beside two words. */
  .pol-claims li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* A short window is an ordinary laptop one, and this sheet is sized to fit a
   viewport rather than to scroll. The figure is the only thing on it with any
   give, so the figure is what gives — the copy and the buttons keep their
   sizes, since a 404 that has shrunk its own way out of the window is worse
   than one drawn smaller. Padding is set per-side so the width tiers above
   keep owning the horizontal measure whatever order these match in. */
@media (max-height: 780px) {
  .pol-nf { padding-top: 36px; padding-bottom: 36px; gap: 20px; }
  .pol-nf-plan svg { max-width: 520px; }
}

/* The plan view on the not-found page, doing double duty as the 0 of 404.
   Styled here rather than with presentation attributes on the SVG, because a
   `stroke="var(--rule)"` attribute does not resolve and the figure has to
   invert with the theme.

   Two tiers, and the split is the whole idea. `.pol-numeral` is a *glyph*
   stroke — the two 4s and the outer ring, at one weight and one dash rhythm,
   so the ring reads as a letterform rather than as the outermost of three
   circles. `.pol-ring` is the drawing living inside it. The dashes are 24/15
   in the drawing's units against the 7/6 they were: at the old 320px thumbnail
   size that came out about 8px on screen, which is texture, not linework. */
.pol-nf-plan .pol-numeral {
  fill: none;
  stroke: var(--ink);
  stroke-width: 11;
  stroke-dasharray: 24 15;
}
.pol-nf-plan .pol-ring {
  fill: none;
  /* --muted, not --rule-hair. As a hairline under a 1.25px stroke that was
     fine; at the weight this figure now carries, #4A3B2C on the dark sheet is
     a line that is not there. One tier that reads on both. */
  stroke: var(--muted);
  stroke-width: 2.5;
  stroke-dasharray: 12 9;
}
.pol-nf-plan .pol-ring-accent { stroke: var(--terra); }
/* The seam between the two outer halves is a full diameter, which is also the
   slash of the mono zero the rest of the sheet is set in. It replaces the
   dash-dot crosshair: an axis in both directions plus a seam is three lines
   through a 0 that only needs one. */
.pol-nf-plan .pol-seam {
  stroke: var(--terra);
  stroke-width: 3.5;
  stroke-dasharray: 16 10;
}
.pol-nf-plan .pol-hub { fill: var(--terra); }