/* ==========================================================================
   Tonnage & Trade — site
   Every value here is transcribed from the Design Language v1. One rule
   governs the sheet: ink is spent on evidence. No cards, no gradients, no
   rounded containers, no shadows, no icons standing in for words.
   ========================================================================== */

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

html { -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.62;
}

::selection { background: var(--band); }

a {
  color: var(--signal);
  text-decoration: none;
  border-bottom: 1px solid rgba(176, 34, 27, .35);
  transition: color 120ms linear, border-color 120ms linear;
}
a:hover { color: var(--signal-hover); border-bottom-color: var(--signal-hover); }

/* Nothing moves on scroll; colour-only transitions on links. */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

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

.skip {
  position: absolute; left: -9999px;
  background: var(--paper); color: var(--ink);
  padding: var(--s2) var(--s3); border: 1px solid var(--rule);
}
.skip:focus { left: var(--s3); top: var(--s3); z-index: 10; }

/* ---- the page frame (§03) ------------------------------------------------ */

.desk { display: flex; justify-content: center; padding: 40px 24px 80px; }

.page {
  width: 100%;
  max-width: var(--page);
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: var(--s9) 72px 72px;
  display: flex;
  flex-direction: column;
}

/* ---- masthead (§04) ------------------------------------------------------ */

.masthead { display: flex; flex-direction: column; }

.masthead__top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s5); flex-wrap: wrap;
}

.masthead__name {
  font-size: 38px; line-height: 1; letter-spacing: -.015em; color: var(--ink);
  border: 0;
}
.masthead__name:hover { color: var(--ink); }

.masthead nav { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }

.masthead nav a {
  font-family: var(--sans); font-size: 12.5px; color: var(--ink);
  border-bottom: 1px solid transparent;
}
.masthead nav a:hover { color: var(--signal); border-bottom-color: rgba(176, 34, 27, .35); }
.masthead nav a[aria-current="page"] { border-bottom-color: var(--rule); }
/* Subscribe is the only nav item in signal red; never a button on the masthead. */
.masthead nav a.is-signal { color: var(--signal); }

.masthead__rule { height: var(--spine); background: var(--ink); margin-top: var(--s2); }

.folio {
  display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap;
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--quiet); padding-top: var(--s1);
}
.folio span { font-variant-numeric: tabular-nums lining-nums; }

/* Interior pages — 21px name, 1px rule, no folio. */
.masthead--interior .masthead__top {
  align-items: baseline; border-bottom: 1px solid var(--rule); padding-bottom: 9px;
}
.masthead--interior .masthead__name { font-size: 21px; }
.masthead--interior nav { gap: 20px; }
.masthead--interior nav a { font-size: 12px; color: var(--quiet); }

/* ---- generic section head (§01 pattern) ----------------------------------
   The 1.5px ink rule is the page's spine and the design language allows two
   per page: the masthead and a table header. Page heads take the 1px rule. */

.head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--rule); padding-bottom: 7px;
}
.head__label {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--quiet);
}
.head__title { font-size: 23px; line-height: 1; color: var(--ink); font-weight: 400; margin: 0; }
.head__note { font-family: var(--sans); font-size: 12px; color: var(--quiet); margin-left: auto; }

/* ---- type scale (§02) ---------------------------------------------------- */

.eyebrow {
  font-family: var(--sans); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--signal);
}
.eyebrow--quiet { color: var(--quiet); }

.headline {
  font-size: 42px; line-height: 1.1; letter-spacing: -.018em;
  color: var(--ink); font-weight: 400; margin: 0; text-wrap: balance;
  max-width: var(--measure);
}

.standfirst {
  font-size: 19px; line-height: 1.5; font-style: italic; color: var(--quiet);
  margin: 0; max-width: var(--measure); text-wrap: pretty;
}

.byline {
  font-family: var(--sans); font-size: 11px; line-height: 1.5; color: var(--quiet);
  border-top: 1px solid var(--rule); padding-top: var(--s1); max-width: var(--measure);
  font-variant-numeric: tabular-nums lining-nums;
}

.doc {
  font-family: var(--sans); font-size: 11.5px; line-height: 1.45;
  color: var(--quiet); max-width: var(--measure);
}
.doc strong { font-weight: 600; }

.num {
  font-family: var(--sans); font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---- prose --------------------------------------------------------------- */

/* Running prose is justified, and justification is only readable because the
   hyphenation below it gives the browser somewhere to put the slack. Without
   hyphens the sole lever is the word space, and a 40rem measure opens rivers.
   The limits are what keep it from looking cheap: no word under eight letters
   is broken, never after fewer than four characters, and no more than two
   hyphens may stack down the right edge. Runs on the long measures only —
   captions, documentation boxes, margin notes and the standfirst stay ragged,
   because under about fifty characters a line has no slack to distribute. */
.prose p {
  text-align: justify;
  text-justify: inter-word;      /* stretch the spaces, never the letters */
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 8 4 3;
  -webkit-hyphenate-limit-lines: 2;
  hyphenate-limit-lines: 2;      /* honoured in WebKit/Blink, ignored elsewhere */
}

.prose { max-width: var(--measure); display: flex; flex-direction: column; gap: var(--s4); }
.prose p { margin: 0; font-size: 17px; line-height: 1.62; text-wrap: pretty; }
.prose h2 {
  font-size: 21px; line-height: 1.3; font-weight: 600; margin: var(--s3) 0 0;
  text-wrap: pretty;
}
.prose h3 { font-size: 17px; line-height: 1.4; font-weight: 600; margin: var(--s2) 0 0; }
.prose strong { font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.prose em { font-style: italic; }
.prose code { font-family: var(--mono); font-size: 14px; color: var(--quiet); }
.prose ul, .prose ol { margin: 0; padding-left: 1.2em; }
.prose li { margin-bottom: var(--s1); }

/* ---- the front page: lead, then ledger (§05) ----------------------------- */

.lead { display: grid; grid-template-columns: 1fr var(--lead-aside); gap: var(--s8); align-items: start; }
.lead__body { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.lead__body p { margin: 0; font-size: 17px; line-height: 1.62; text-wrap: pretty; max-width: var(--measure); }
.lead__body p + p { color: var(--quiet); }
.lead__aside { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }

/* The ledger is an index of articles, not a numeric table: the finding is a
   sentence the reader reads, and the date, series and evidence are apparatus
   hung off it. So the row carries a real size ladder — 17 / 12 / 11.5 / 10.5 —
   rather than setting every column at one small size and asking the reader to
   work out which one is the content (§03: separate primary from secondary by
   size, not only by position). The finding is set at the prose size so moving
   from the lead article into the index does not change reading mode. */

.ledger { width: 100%; border-collapse: collapse; font-family: var(--sans); font-variant-numeric: tabular-nums lining-nums; }
.ledger th {
  text-align: left; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600; color: var(--quiet);
  border-bottom: var(--spine) solid var(--ink); padding: 7px 10px;
}
.ledger th:first-child, .ledger td:first-child { padding-left: 0; }
/* The last column is evidence — prose, not a figure. Right-alignment is the
   rule for numbers; on wrapping text it hides the start of every line. */
.ledger th:last-child, .ledger td:last-child { padding-right: 0; text-align: left; }
.ledger td {
  padding: var(--s3) 10px; font-size: 12px; color: var(--quiet);
  border-bottom: 1px solid var(--hair); vertical-align: top;
}
.ledger td:last-child { font-size: 11.5px; line-height: 1.45; }
/* Must stay scoped to `.ledger td`. As a bare `.ledger__finding` this rule
   loses to `.ledger td` above on specificity and the finding silently renders
   at the apparatus size — which is what it did until 2026-08-04. */
.ledger td.ledger__finding {
  font-family: var(--serif); font-size: 17px; line-height: 1.45; color: var(--ink);
  padding-right: 26px;
}
/* A border-bottom draws under every line box at the foot of the box, so on a
   wrapped serif it cuts the descenders. A real underline can be offset and can
   skip the ink, which keeps the affordance without shredding the letterforms. */
.ledger td.ledger__finding a {
  color: var(--ink); border-bottom: 0;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
  -webkit-text-decoration-skip-ink: auto;
  text-decoration-skip-ink: auto;
  transition: color 120ms linear, text-decoration-color 120ms linear;
}
.ledger td.ledger__finding a:hover { color: var(--signal); text-decoration-color: var(--signal-hover); }
/* Apparatus cells nudge down so their cap-height sits on the finding's first line. */
.ledger tbody td:not(.ledger__finding) { padding-top: calc(var(--s3) + 4px); }
.ledger .is-signal { color: var(--signal); }
/* Column widths set the finding's measure, so they are set from it. At 12px in
   a 556px column the finding ran a 96-character median line — half again over
   the comfortable band, which is why the old ledger read as hard work even
   before the size is argued about.

   Date and series stay fixed: their content has a known maximum ("River Note",
   "Aug 3") and does not grow with the frame. Evidence is prose and can flow, so
   it is proportional — that keeps the finding between roughly 44 and 66
   characters from the widest desk down to the stacking breakpoint, instead of a
   fixed sibling starving it at the narrow end. */
.ledger col.c-date   { width: 76px; }
.ledger col.c-series { width: 92px; }
.ledger col.c-evid   { width: 21%; }
.ledger col.c-access { width: 82px; }
.ledger__count { font-family: var(--sans); font-size: 11.5px; line-height: 1.55; color: var(--quiet); }

/* ---- exhibits (§06) ------------------------------------------------------ */

.exhibit { display: flex; flex-direction: column; gap: var(--s2); margin: 0; min-width: 0; }
.exhibit svg { display: block; width: 100%; height: auto; max-width: 100%; }
.exhibit figcaption { font-size: 15.5px; line-height: 1.5; color: var(--ink); max-width: var(--measure); }
.exhibit figcaption strong { font-weight: 600; }

.docbox {
  font-family: var(--sans); font-size: 11.5px; line-height: 1.45; color: var(--quiet);
  border-top: 1px solid var(--rule); padding-top: var(--s1); max-width: var(--measure);
  display: flex; flex-direction: column; gap: 3px;
}
.docbox strong { font-weight: 600; color: var(--quiet); }
.docbox--tight { font-size: 10.5px; }

/* ---- key figure — one number in context (§02 "number with error") -------- */

.keyfig { display: flex; flex-direction: column; gap: var(--s1); max-width: var(--measure); }
.keyfig__label {
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--quiet);
}
.keyfig__row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.keyfig__value {
  font-family: var(--sans); font-size: 34px; font-weight: 600; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums lining-nums;
}
.keyfig__unit { font-family: var(--sans); font-size: 13px; color: var(--quiet); }
.keyfig__change { font-family: var(--sans); font-size: 12.5px; font-variant-numeric: tabular-nums lining-nums; color: var(--quiet); }
.keyfig__change.is-signal { color: var(--signal); }
.keyfig__change.is-counter { color: var(--counter); }
.keyfig__context { font-size: 15.5px; line-height: 1.5; color: var(--ink); max-width: var(--measure); }

/* Above the phone breakpoint the key figure splits: the number and its sentence
   hold the text column on the left, the sparkline and its provenance sit in the
   margin on the right. Below it, the block stays stacked and unchanged. The
   columns are flexible so the pair can never outrun the frame. */
@media (min-width: 901px) {
  .keyfig {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, var(--measure)) minmax(0, 236px);
    column-gap: var(--s6);
    row-gap: var(--s1);
    align-items: start;
  }
  .keyfig__label   { grid-column: 1; grid-row: 1; }
  .keyfig__row     { grid-column: 1; grid-row: 2; }
  .keyfig__context { grid-column: 1; grid-row: 3; }
  .keyfig > .marginnote { grid-column: 2; grid-row: 1 / 4; max-width: none; }
  .keyfig > .docbox     { grid-column: 2; grid-row: 4; max-width: none; }
}

/* ---- supertable (§05 table pattern) -------------------------------------- */

.supertable { display: flex; flex-direction: column; gap: var(--s2); margin: 0; min-width: 0; }
.supertable table {
  width: 100%; border-collapse: collapse;
  font-family: var(--sans); font-size: 12.5px;
  font-variant-numeric: tabular-nums lining-nums;
}
.supertable th {
  text-align: left; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600; color: var(--quiet);
  border-bottom: var(--spine) solid var(--ink); padding: 7px 12px;
}
.supertable td {
  padding: var(--s2) 12px; color: var(--ink);
  border-bottom: 1px solid var(--hair); vertical-align: top;
}
.supertable th:first-child, .supertable td:first-child { padding-left: 0; }
.supertable th:last-child, .supertable td:last-child { padding-right: 0; }
/* Numeric columns right-align and decimal-align; the label column stays left. */
.supertable th.n, .supertable td.n { text-align: right; }
.supertable caption {
  caption-side: top; text-align: left;
  font-size: 15.5px; line-height: 1.5; color: var(--ink);
  padding-bottom: var(--s2); max-width: var(--measure);
}
.supertable caption strong { font-weight: 600; }

/* ---- pull quote ---------------------------------------------------------- */

.pullquote {
  margin: 0; max-width: var(--measure);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: var(--s5) 0; display: flex; flex-direction: column; gap: var(--s2);
}
.pullquote p { margin: 0; font-size: 21px; line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.pullquote footer { font-family: var(--sans); font-size: 11.5px; color: var(--quiet); }

/* ---- watch list — dated, falsifiable calls ------------------------------- */

.watchlist { display: flex; flex-direction: column; gap: var(--s2); max-width: var(--measure); }
/* Section head, matching a prose h2 — 21 / 1.30 / 600 (§02). */
.watchlist__title { font-size: 21px; line-height: 1.3; font-weight: 600; margin: 0; text-wrap: pretty; }
.watchlist table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 12.5px; }
.watchlist th {
  text-align: left; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600; color: var(--quiet); border-bottom: var(--spine) solid var(--ink); padding: 7px 12px;
}
.watchlist td { padding: var(--s2) 12px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.watchlist th:first-child, .watchlist td:first-child { padding-left: 0; width: 96px; }
.watchlist th:last-child, .watchlist td:last-child { padding-right: 0; }
.watchlist .claim { font-family: var(--serif); font-size: 15.5px; line-height: 1.35; color: var(--ink); }
.watchlist .when, .watchlist .basis { color: var(--quiet); }

/* ---- divider — Tufte rule ------------------------------------------------ */

.divider { border: 0; border-top: 1px solid var(--rule); margin: 0; width: 100%; }

/* ---- the subscriber boundary (§09) --------------------------------------- */

.boundary {
  max-width: var(--measure);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: var(--s5) 0; display: flex; flex-direction: column; gap: 12px;
}
.boundary__lede { font-size: 17px; line-height: 1.6; color: var(--ink); margin: 0; text-wrap: pretty; }
.boundary ol { margin: 0; padding-left: 1.2em; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.boundary li { margin-bottom: var(--s1); }
.boundary__actions {
  display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap;
  font-family: var(--sans); font-size: 13px;
}
.boundary__actions a { font-weight: 600; }
.boundary__actions span { color: var(--quiet); }

/* ---- email signup -------------------------------------------------------- */
/* A rule above, no box around. The input is a single underline — the third
   line weight — and the submit is typography, not a pill. */

.signup {
  max-width: var(--measure);
  border-top: 1px solid var(--rule);
  padding-top: var(--s5);
  display: flex; flex-direction: column; gap: 12px;
}
.signup__lede { font-size: 17px; line-height: 1.6; color: var(--ink); margin: 0; text-wrap: pretty; }
.signup__form { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.signup__email {
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--rule);
  border-radius: var(--radius); padding: 4px 2px; width: min(320px, 100%);
}
.signup__email:focus { border-bottom-color: var(--ink); }
.signup__email::placeholder { color: var(--quiet); }
.signup__submit {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--signal); background: transparent; border: 0;
  border-bottom: 1px solid var(--signal); border-radius: var(--radius);
  padding: 4px 0; cursor: pointer;
}
.signup__submit:hover { color: var(--signal-hover); border-bottom-color: var(--signal-hover); }
.signup__note {
  font-family: var(--sans); font-size: 11.5px; line-height: 1.5;
  color: var(--quiet); margin: 0; max-width: var(--measure);
}

/* ---- datawords (§07) ----------------------------------------------------- */

.dataword { display: inline-block; vertical-align: -.3em; margin: 0 3px; }
.has-datawords { line-height: 1.9; }

.marginnote {
  display: flex; flex-direction: column; gap: var(--s1);
  border-left: 1px solid var(--rule); padding-left: 20px; max-width: 236px;
}
.marginnote__caption {
  font-family: var(--sans); font-size: 11px; line-height: 1.5; color: var(--quiet);
  font-variant-numeric: tabular-nums lining-nums;
}
.marginnote__caption strong { color: var(--ink); font-weight: 600; }

/* ---- article layout ------------------------------------------------------ */

.article { display: flex; flex-direction: column; gap: var(--s7); }
.article__masthead { display: flex; flex-direction: column; gap: 12px; }
.article__sections { display: flex; flex-direction: column; gap: var(--s7); }
.section--wide { max-width: none; }
.section--full { max-width: none; }

.tags { font-family: var(--sans); font-size: 11.5px; color: var(--quiet); }
.tags a { color: var(--quiet); border-bottom-color: var(--hair); }
.tags a:hover { color: var(--signal); border-bottom-color: var(--signal-hover); }

/* ---- index pages --------------------------------------------------------- */

.stack { display: flex; flex-direction: column; gap: var(--s7); }
.stack--tight { gap: var(--s5); }
.intro { max-width: 44rem; display: flex; flex-direction: column; gap: var(--s3); }
.intro p { margin: 0; font-size: 17px; line-height: 1.62; text-wrap: pretty; }
.intro p + p { color: var(--quiet); }

.deflist { display: grid; grid-template-columns: 150px 1fr; gap: var(--s3) 26px; align-items: baseline; max-width: var(--measure); }
.deflist dt {
  font-family: var(--sans); font-size: 11px; line-height: 1.4; color: var(--quiet);
  border-top: 1px solid var(--hair); padding-top: var(--s3);
}
.deflist dd {
  margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink);
  border-top: 1px solid var(--hair); padding-top: var(--s3); text-wrap: pretty;
}
.deflist dt:first-of-type, .deflist dd:first-of-type { border-top: 0; padding-top: 0; }

/* ---- footer -------------------------------------------------------------- */

.foot {
  font-family: var(--sans); font-size: 11.5px; line-height: 1.55; color: var(--quiet);
  border-top: 1px solid var(--rule); padding-top: var(--s2);
  display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap;
}
.foot nav { display: flex; gap: var(--s4); flex-wrap: wrap; }
.foot a { color: var(--quiet); border-bottom-color: var(--hair); }
.foot a:hover { color: var(--signal); border-bottom-color: var(--signal-hover); }

/* ---- vertical rhythm between page blocks --------------------------------- */

.page > * + * { margin-top: var(--s7); }
.page > .masthead + * { margin-top: var(--s6); }

/* ---- narrow screens ------------------------------------------------------ */

@media (max-width: 900px) {
  .desk { padding: 0 0 var(--s8); }
  .page { border: 0; padding: var(--s6) var(--s5) var(--s8); }
  .masthead__name { font-size: 30px; }
  .headline { font-size: 32px; }
  .lead { grid-template-columns: 1fr; gap: var(--s6); }
  .deflist { grid-template-columns: 1fr; gap: var(--s2); }
  .deflist dd { border-top: 0; padding-top: 0; }
  .marginnote { max-width: none; }
  /* Wide tables scroll inside their own block rather than the page. */
  .supertable, .watchlist, .ledger-wrap { overflow-x: auto; }
  .ledger { min-width: 640px; }
  .supertable table { min-width: 520px; }
}

/* The ledger's finding column is the point of the table, so on a narrow
   screen the row stacks rather than scrolling out of reach. Numeric tables
   still scroll — their columns only mean anything side by side. */
@media (max-width: 700px) {
  /* Ragged right on the phone. The measure here is too short for justification
     to hide the slack, and the hyphen ladder costs more than the flush edge
     is worth. */
  .prose p { text-align: left; hyphens: manual; }

  .ledger-wrap { overflow-x: visible; }
  .ledger, .ledger tbody, .ledger tr, .ledger td { display: block; }
  .ledger thead, .ledger colgroup { display: none; }
  .ledger { min-width: 0; }
  /* Taller rows than the desktop table: once the row stacks, the gap between
     entries is the only thing separating one article from the next. */
  .ledger tr {
    display: grid; grid-template-columns: auto auto 1fr; gap: 5px 12px;
    padding: var(--s4) 0; border-bottom: 1px solid var(--hair);
  }
  .ledger td, .ledger tbody td:not(.ledger__finding) { border: 0; padding: 0; }
  /* Date, series and access share the top line; finding and evidence follow. */
  .ledger td:nth-child(5) { grid-row: 1; grid-column: 3; text-align: right; }
  .ledger td:nth-child(3), .ledger td:nth-child(4), .ledger td[colspan] { grid-column: 1 / -1; }
  /* Stacked, the evidence line sits under a left-aligned finding — the
     desktop table's last-column alignment would strand it against the margin. */
  .ledger td:last-child { text-align: left; }
  /* Stacked, the finding has the full column, so it needs its own ceiling —
     at the top of this band the row is wide enough to overrun the measure. */
  .ledger td.ledger__finding { padding: 3px 0 4px; max-width: 32em; }
}

@media (max-width: 560px) {
  .masthead nav { gap: 12px; }
  .masthead nav a { font-size: 11.5px; }
  .headline { font-size: 27px; }
  .standfirst { font-size: 17px; }
  .keyfig__value { font-size: 28px; }
}

/* ---- print: the page must read correctly in greyscale -------------------- */

@media print {
  body { background: #fff; }
  .desk { padding: 0; }
  .page { border: 0; padding: 0; max-width: none; }
  .skip, .foot nav { display: none; }
  a { color: var(--ink); border-bottom: 0; }
}