/* Kwick365 — The Independent Restaurant Index.
   A ledger, not a dashboard: hairline-separated panels of typographic numbers on paper, with exactly one
   loud thing on the page (the lead reading and its line). No shadows, no cards, no gradients — the only
   colour that carries meaning is the accent on the lead series and the up/down of a change. */

:root{
  --ink:#111111;          /* text and numbers */
  --paper:#fbfaf7;        /* page */
  --accent:#0b5fff;       /* the lead series, links */
  --up:#1a7f37;
  --down:#b3261e;
  --rule:#e3ded2;         /* warm hairline */
  --rule-2:#cfc8b8;       /* the one heavier rule, under the dateline */
  --muted:#6a6459;        /* sample sizes, dates, captions */
  --quiet:#a9a294;        /* sparklines, bars: present but never competing with a number */
  --panel:#f4f1e9;
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  font-variant-numeric:lining-nums tabular-nums;
}
img{max-width:100%;height:auto}
a{color:var(--accent);text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:10px;z-index:9;background:var(--paper);border:1px solid var(--ink);padding:8px 12px}

/* No cap below 1600px: a wide screen is a wider ledger, not more whitespace. */
.shell{width:100%;max-width:1720px;margin:0 auto;padding:0 clamp(16px,3vw,44px)}
.shell.narrow{max-width:760px}

/* ---- masthead ------------------------------------------------------------------------------------- */
.mast{border-bottom:1px solid var(--rule);background:var(--paper)}
.mast-in{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;padding-block:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand-t{display:flex;flex-direction:column;line-height:1.1}
.brand-n{font-family:var(--display);font-size:1.5rem;font-weight:600;letter-spacing:-.015em}
.brand-s{font-size:.78rem;color:var(--muted)}
.topnav{display:flex;flex-wrap:wrap;gap:4px 20px;font-size:.92rem}
.topnav a{color:var(--ink);text-decoration:none;padding-block:4px;border-bottom:1px solid transparent}
.topnav a:hover{border-bottom-color:var(--ink)}

/* ---- dateline ------------------------------------------------------------------------------------- */
.dateline{padding-block:clamp(18px,3vw,34px) 14px;border-bottom:2px solid var(--rule-2)}
.dateline-d{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(1.45rem,3.2vw,2.15rem);letter-spacing:-.015em}
.dateline-n{margin:.25rem 0 0;color:var(--muted);font-size:.95rem}

/* ---- section headings ------------------------------------------------------------------------------ */
.sec-h{
  margin:clamp(34px,4vw,56px) 0 0;padding-top:12px;border-top:1px solid var(--rule);
  font-family:var(--sans);font-size:.95rem;font-weight:650;letter-spacing:.005em;
}
.sec-p{margin:.5rem 0 0;max-width:72ch;color:var(--muted);font-size:.92rem}
.col-h{margin:1.4rem 0 .4rem;font-size:.9rem;font-weight:650}

/* ---- the lead reading ------------------------------------------------------------------------------ */
.lead{padding-block:clamp(20px,3vw,34px) 6px}
.lead-h{
  margin:0 0 .5rem;font-family:var(--display);font-weight:400;
  font-size:clamp(1.3rem,2.6vw,1.85rem);line-height:1.25;letter-spacing:-.01em;max-width:42ch;color:#3c382f;
}
.tile-lead{border-top:none;padding-top:0}
.tile-lead .tile-name{font-size:1rem}
.tile-lead .num{font-size:clamp(3.4rem,8.6vw,6.2rem);line-height:.92}
.tile-lead .tile-unit{font-size:.95rem}
.tile-lead .tile-change{font-size:1.05rem;margin-top:.7rem}
.tile-lead .tile-def{font-size:1.02rem;max-width:42ch}

@media (min-width:1000px){
  .tile-lead{display:grid;grid-template-columns:minmax(270px,26%) 1fr;column-gap:clamp(28px,4vw,64px);align-content:start}
  .tile-lead>*{grid-column:1}
  .tile-lead>.tile-fig{grid-column:2;grid-row:1 / span 9;align-self:center;margin:0}
  /* A reading with only one published day has no line to draw (see k3_reading_tile), and an empty chart
     column would be three quarters of a wide screen left blank beside the number. The definition — the one
     piece of text a reader of a single figure most needs — takes the column instead. */
  .tile-lead:not(:has(.tile-fig))>.tile-def{
    grid-column:2;grid-row:1 / span 9;align-self:center;margin:0;
    font-size:clamp(1.05rem,1.5vw,1.4rem);line-height:1.5;max-width:34ch;
  }
}

/* ---- the reading grid ------------------------------------------------------------------------------ */
/* 1 / 2 / 3 / 4 columns. Hairlines, not boxes: each tile carries its own top rule so the rules line up
   across a row and the grid reads as a sheet of readings rather than a tray of cards. */
.grid{display:grid;grid-template-columns:1fr;column-gap:clamp(22px,2.6vw,46px)}
@media (min-width:720px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1160px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1640px){.grid{grid-template-columns:repeat(4,1fr)}}

.tile{border-top:1px solid var(--rule);padding:16px 0 26px}
.tile-name{margin:0;font-family:var(--sans);font-size:.92rem;font-weight:650;line-height:1.3}
.tile-name a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.tile-name a:hover{border-bottom-color:var(--accent);color:var(--accent)}
.tile-num{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:.45rem 0 0}
.num{font-family:var(--display);font-weight:500;font-size:clamp(2.15rem,4.4vw,2.85rem);line-height:1;letter-spacing:-.02em}
.spark{color:var(--quiet);flex:none;padding-bottom:4px}
.spark svg{display:block}
.tile-none{display:block;font-family:var(--display);font-style:italic;font-weight:300;font-size:1.5rem;color:var(--muted);letter-spacing:0}
.tile-unit{margin:.3rem 0 0;font-size:.84rem;color:var(--muted)}
.tile-change{display:flex;flex-wrap:wrap;gap:2px 18px;margin:.7rem 0 0;font-size:.92rem}
.chg{white-space:nowrap}
.d{font-family:var(--display);font-weight:600}
.d.up{color:var(--up)}
.d.down{color:var(--down)}
.d.flat{color:var(--muted)}
.dl{color:var(--muted)}
.tile-change-none{color:var(--muted);font-style:italic;font-family:var(--display)}
.tile-n,.tile-date{margin:.3rem 0 0;font-size:.82rem;color:var(--muted)}
.tile-n{margin-top:.55rem}
.tile-why{margin:.5rem 0 0;font-size:.84rem;color:var(--muted);max-width:44ch}
.tile-def{margin:.7rem 0 0;font-family:var(--display);font-style:italic;font-size:.95rem;line-height:1.45;color:#4a463e;max-width:46ch}
/* The one caution colour on the site, shared by the two things a reader must not mistake for normal: a day
   too thin to compare against, and a reading the change guard has paused. */
.badge-thin{
  display:inline-block;margin-left:4px;padding:1px 6px;border:1px solid #d8c69b;border-radius:2px;
  background:#f9f2df;color:#7a5b16;font-size:.72rem;font-style:normal;white-space:nowrap;
}
.tile-hold{
  margin:.7rem 0 0;padding:7px 10px;border-left:2px solid #d8c69b;background:#f9f2df;
  color:#7a5b16;font-size:.84rem;line-height:1.45;max-width:46ch;
}

/* ---- figures and charts ---------------------------------------------------------------------------- */
/* A bucket chart is drawn in a 760-wide viewBox; without a cap it would scale to the full 1720px
   shell on a large monitor and turn a 24-bar profile into a billboard. */
.fig{margin:1rem 0 0;max-width:1060px}
.tile-fig{margin:1rem 0 0}
/* A line chart standing on its own (the tip-incidence series) is drawn in a 900-wide viewBox and keeps its
   aspect ratio, so the cap is what stops it becoming a 500px-tall band on a wide monitor. */
.fig-wide{max-width:1200px}
/* In place of a line a reading did not move: an editorial statement, not a warning. Paper, the display face
   and hairlines above and below, so it reads as a considered note occupying the space a chart would — never
   as an error box or a missing image. */
.k3-flat{
  margin:0;padding:clamp(20px,2.6vw,34px) 0;max-width:48ch;
  font-family:var(--display);font-size:clamp(1.02rem,1.5vw,1.25rem);line-height:1.5;color:#4a463e;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}

/* Where a reading has no distribution of its own: one muted sentence pointing at the pages that do. */
.crosslink{margin:clamp(26px,3vw,40px) 0 0;padding-top:12px;border-top:1px solid var(--rule);
  font-size:.92rem;color:var(--muted);max-width:78ch}
figcaption{margin-top:.6rem;font-size:.84rem;line-height:1.5;color:var(--muted);max-width:86ch}
.k3-line,.k3-bars{display:block;width:100%;height:auto;overflow:visible}
.k3-series{stroke:var(--accent);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.k3-dot{fill:var(--accent)}
.k3-grid,.k3-tick{stroke:var(--rule)}
.k3-axisline{stroke:var(--rule-2)}
/* paint-order + a paper-coloured stroke: the min label sits just above the bottom gridline, where a dense
   daily series passes through it. The halo keeps the number readable without a filled label box. */
.k3-axis{font-family:var(--sans);font-size:12px;fill:var(--muted);paint-order:stroke;stroke:var(--paper);stroke-width:3px;stroke-linejoin:round}
.k3-last{font-family:var(--display);font-size:15px;font-weight:600;fill:var(--ink)}
/* Chart text is drawn in SVG user units, so it shrinks with the chart: a 12-unit axis label inside a
   900-unit-wide line chart lands at about 5px on a 390px phone. These bump the labels back to ~11px at that
   width; the two charts need different numbers because their viewBoxes are different widths. */
@media (max-width:760px){
  .k3-line .k3-axis{font-size:28px;stroke-width:7px}
  .k3-bars .k3-axis{font-size:24px;stroke-width:6px}
  .k3-last,.k3-read{font-size:30px}
}
.k3-bar{fill:#d5cfc0}
.k3-bar-hi{fill:var(--accent)}
.k3-hair{stroke:var(--ink);stroke-width:1;opacity:.35}
.k3-read{font-family:var(--display);font-size:14px;font-weight:600;fill:var(--ink)}

/* ---- metros ----------------------------------------------------------------------------------------- */
.metro-strip{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:1rem 0 0;padding:0}
.metro-strip a{display:block;padding:9px 14px;border:1px solid var(--rule);border-radius:2px;text-decoration:none;color:var(--ink);background:#fff}
.metro-strip a:hover{border-color:var(--accent)}
.metro-n{display:block;font-size:.92rem;font-weight:600}
.metro-c{display:block;font-family:var(--display);font-size:.88rem;color:var(--muted)}

/* ---- link lists ------------------------------------------------------------------------------------- */
.cols{display:grid;grid-template-columns:1fr;gap:0 clamp(28px,4vw,72px)}
/* A grid item is min-width:auto, so a wide table inside a column would stretch the column — and the page —
   past the phone it is read on instead of scrolling inside its own box. */
.cols>*{min-width:0}
@media (min-width:820px){.cols{grid-template-columns:1fr 1fr}}
.linklist{list-style:none;margin:.4rem 0 0;padding:0}
.linklist li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px solid var(--rule)}
.linklist a{color:var(--ink);text-decoration:none}
.linklist a:hover{color:var(--accent);text-decoration:underline}
.ll-v{font-family:var(--display);font-size:.98rem;color:var(--muted);white-space:nowrap}
/* A list that sits under a paragraph rather than in a column of its own: it has to end where the prose ends,
   or the label on the right is stranded half a screen away from the sentence it belongs to. */
.ll-narrow{max-width:74ch}

/* ---- prose ------------------------------------------------------------------------------------------ */
.about p,.nf-say{max-width:74ch;font-size:1rem;line-height:1.65}
.about .caveat{border-left:2px solid var(--rule-2);padding-left:14px;color:var(--muted);font-size:.93rem}
.more{font-weight:600}
.notfound{padding-block:clamp(28px,5vw,64px) 20px}
.notfound .lead-h{color:var(--ink);font-size:clamp(1.6rem,4vw,2.3rem)}

/* ---- subpage head: breadcrumb, kicker, "data as of" ------------------------------------------------- */
/* A heading that only assistive technology needs: the page's own <h1> already names the section, and a
   visible duplicate above the lead number would be furniture the reader has to step over. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.crumbs{padding-block:12px 0;font-size:.84rem;color:var(--muted)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:2px 8px;list-style:none;margin:0;padding:0}
.crumbs li+li::before{content:"›";margin-right:8px;color:var(--quiet)}
.crumbs a{color:var(--muted)}
.pagehead{padding-block:10px 14px;border-bottom:2px solid var(--rule-2)}
.kicker{margin:0 0 .2rem;font-size:.78rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pagehead .lead-h{color:var(--ink);font-size:clamp(1.7rem,3.6vw,2.6rem);max-width:26ch}
.asof{margin:.5rem 0 0;max-width:78ch;font-size:.92rem;color:var(--muted)}

/* ---- ledger tables ----------------------------------------------------------------------------------- */
/* Hairlines and typographic numbers, like the tiles: a table here is a denser sheet of the same readings,
   never a grid of boxes. It scrolls sideways rather than shrinking below legibility on a phone. */
.tblwrap{margin:.9rem 0 0;overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
/* The caption sits outside the scroll box (see k3_geo_table_html): on a phone a wide table scrolls sideways,
   and a caption inside it would scroll out of view with the columns it explains. */
.tbl-cap{margin:.9rem 0 0;font-size:.84rem;line-height:1.5;color:var(--muted);max-width:86ch}
.tbl-cap+.tblwrap{margin-top:.5rem}
.tbl th,.tbl td{padding:9px 14px 9px 0;border-bottom:1px solid var(--rule);text-align:left;vertical-align:baseline}
.tbl thead th{border-bottom:1px solid var(--rule-2);font-size:.78rem;font-weight:650;color:var(--muted);white-space:nowrap}
/* The name column takes a third of the table so the numeric columns spread across the rest of a wide screen
   instead of huddling at the left with 400px of paper beside them. */
.tbl thead th:first-child{width:32%}
.tbl tbody th{font-weight:600;min-width:9rem}
.tbl tbody th a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.tbl tbody th a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.tbl .r{text-align:right;white-space:nowrap}
.tbl .v{font-family:var(--display);font-size:1.05rem;font-weight:600}
.tbl .sample,.tbl .asof-c{color:var(--muted);font-size:.86rem}
.tbl .none{color:var(--muted);font-style:italic;font-family:var(--display)}
.tbl-unit{display:block;font-weight:400;font-size:.78rem;color:var(--muted)}
/* A numeric column is nowrap so a figure never breaks across lines — but the sample line under a figure is a
   sentence, and left nowrap it drags the whole table (and the figure with it) off the side of a phone. */
.tbl .r .tbl-unit{white-space:normal;min-width:11rem}
.tbl-note{margin:.7rem 0 0;font-size:.86rem;color:var(--muted);max-width:78ch}
/* Stands in for a table that would be nothing but "not enough data" rows (k3_geo_scope_html): a stated limit
   with the measurement behind it. Set in a ruled panel rather than as another muted note, because it is the
   content of that column, not a footnote to something above it. */
.scope-none{margin:.7rem 0 0;padding:14px 16px;max-width:78ch;border:1px solid var(--rule);border-radius:4px;
  background:var(--panel);font-size:.9rem;line-height:1.55;color:var(--muted)}
.scope-none strong{color:var(--ink);font-weight:600}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:none}

/* ---- definition lists (dish rules, metric definitions) ----------------------------------------------- */
.rules{margin:1rem 0 0;display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:820px){.rules{grid-template-columns:minmax(14rem,24%) 1fr}}
/* min-width:0 on both: a grid (and flex) item is min-width:auto by default, so one long regex in a <code>
   would push the whole page wider than the phone it is read on instead of wrapping inside its cell. */
.rules dt{padding:10px 16px 2px 0;font-size:.86rem;font-weight:650;border-top:1px solid var(--rule);min-width:0}
.rules dd{margin:0;padding:10px 0 12px;border-top:1px solid var(--rule);font-size:.92rem;max-width:80ch;min-width:0}
@media (max-width:819px){.rules dt{border-top:1px solid var(--rule)}.rules dd{border-top:none;padding-top:0}}
.rules .dt-u{display:block;font-weight:400;color:var(--muted);font-size:.8rem}
.rules code,.uses code,.tbl code,.about code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.84rem;background:var(--panel);padding:2px 5px;border-radius:2px;overflow-wrap:anywhere}
/* The methodology page prints the dish matcher's regexes into table cells. They are long, so the cells must be
   allowed to wrap them instead of pushing the table (and its scroll box) many screens wide. They stay inline
   (not inline-block) so a wrapped regex keeps the FIRST line's baseline: as an inline-block its baseline would
   be its last line, and the dish name opposite it would sink to the bottom of a four-line cell. */
.tbl td code{white-space:normal;word-break:break-all}
/* A table whose cells hold several lines reads top-aligned; the baseline default is for one-line number rows. */
.tbl-top th,.tbl-top td{vertical-align:top}

/* ---- "take this number" ------------------------------------------------------------------------------ */
.uses{list-style:none;margin:.9rem 0 0;padding:0}
.uses li{padding:9px 0;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.uses li>*{min-width:0}                 /* the embed snippet must wrap, not widen the page */
.use-l{font-size:.78rem;font-weight:650;color:var(--muted);flex:none;width:4rem}

/* ---- the day page ------------------------------------------------------------------------------------ */
.pagenav{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:.9rem;font-size:.9rem}
/* One or two movers stay a single column: a two-column grid whose one item is a short rule ending in the
   middle of the page reads as a broken layout, not as a list. The wide grid is for the days that move. */
.moved{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:1000px){.moved-wide{grid-template-columns:repeat(2,1fr);column-gap:clamp(24px,3vw,56px)}}
@media (min-width:1640px){.moved-wide{grid-template-columns:repeat(3,1fr)}}
.moved li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:11px 0;border-top:1px solid var(--rule)}
.mv-d{font-family:var(--display);font-weight:600;font-size:1.15rem;min-width:4.5rem}
.mv-d.up{color:var(--up)}
.mv-d.down{color:var(--down)}
.mv-n{font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.mv-n:hover{color:var(--accent);border-bottom-color:var(--accent)}
.mv-v{font-family:var(--display)}
.mv-s{flex-basis:100%;font-size:.82rem;color:var(--muted)}
.stat{margin:1rem 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;max-width:72ch}
.stat-v{font-family:var(--display);font-weight:600;font-size:clamp(2rem,4vw,2.6rem);line-height:1;letter-spacing:-.02em}
.stat-l{flex:1 1 20ch;color:var(--muted);font-size:.95rem}
/* ---- the sourced calendar ----------------------------------------------------------------------------- */
/* On a wide screen the date runs down its own column beside the entry, the way a diary reads; on a phone it
   sits above it. The grid is two columns rather than a table because most days carry one entry and a
   one-row table per day would be more furniture than content. */
.callist{list-style:none;margin:1rem 0 0;padding:0}
.callist li{padding:11px 0;border-top:1px solid var(--rule);max-width:86ch}
/* min-width:0 on the body column: a long source name or note must wrap inside its cell rather than widen
   the grid past the phone it is read on. */
@media (min-width:700px){
  .callist-dated li{display:grid;grid-template-columns:9.5rem minmax(0,1fr);column-gap:20px;align-items:baseline}
}
.cal-d{font-family:var(--display);font-size:.92rem;color:var(--muted);white-space:nowrap;display:block}
.cal-d a{color:var(--muted)}
.cal-t{font-weight:650}
.cal-k{
  display:inline-block;margin-left:6px;padding:1px 6px;border:1px solid var(--rule-2);border-radius:2px;
  font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap;
}
.cal-n{display:block;font-size:.92rem;margin-top:.2rem}
.cal-s{display:block;font-size:.8rem;color:var(--muted);margin-top:.2rem}
.cal-b{min-width:0}
/* Several entries can fall on one date, so a date's block holds them all and the measured line once. They are
   separated by space rather than a rule: the rule between <li>s already says "new date". */
.cal-e+.cal-e{margin-top:.85rem}
/* The measured line under a calendar entry. Ruled off from the entry above it because it is the one part of
   the block that did not come from the entry's source — it is what this site itself recorded on the date. */
.cal-data{display:block;margin-top:.5rem;padding-top:7px;border-top:1px dotted var(--rule);
  font-size:.86rem;line-height:1.55;color:#4a463e}
.cal-data-l{
  display:inline-block;margin-right:7px;font-size:.68rem;font-weight:650;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);
}
.lede-data{margin:.7rem 0 0;max-width:74ch;font-size:1.05rem;line-height:1.6}

/* ---- section nav on the long reference pages --------------------------------------------------------- */
/* /methodology/ is ~8,500px tall at 1920 and /calendar/ ~15,000px, with the right half of the screen empty
   because the prose is measure-limited. That column becomes a finding aid. Below 1200px it is not stacked
   above the content — it is not rendered at all, because a 15-item anchor list between the headline and the
   first paragraph is furniture, not navigation. */
.secnav{display:none}
@media (min-width:1200px){
  .withnav{display:grid;grid-template-columns:minmax(0,1fr) 15rem;column-gap:clamp(32px,4vw,72px);align-items:start}
  .wn-main{grid-column:1;grid-row:1;min-width:0}
  .secnav{
    display:block;grid-column:2;grid-row:1;position:sticky;top:20px;
    max-height:calc(100vh - 40px);overflow-y:auto;overscroll-behavior:contain;
    border-left:1px solid var(--rule);padding:4px 0 4px 18px;font-size:.86rem;
  }
  .secnav-h{margin:0 0 .6rem;font-size:.7rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--quiet)}
  .secnav ol{list-style:none;margin:0;padding:0}
  .secnav li+li{margin-top:5px}
  .secnav a{display:block;color:var(--muted);text-decoration:none;line-height:1.35}
  .secnav a:hover,.secnav a:focus-visible{color:var(--accent);text-decoration:underline}
}
/* An anchor jump should not land the heading hard against the top edge. */
.sec-h{scroll-margin-top:18px}

/* ---- footer ------------------------------------------------------------------------------------------ */
.foot{margin-top:clamp(44px,6vw,86px);border-top:2px solid var(--rule-2);background:var(--panel);padding-block:26px 34px}
.foot-lede{margin:0;font-family:var(--display);font-size:1.15rem}
.foot-say{margin:.5rem 0 0;max-width:80ch;font-size:.92rem;color:#423e37}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:1.1rem;font-size:.9rem}
.foot-nav a{color:var(--ink)}
.foot-fine{margin:1.1rem 0 0;font-size:.82rem;color:var(--muted);max-width:86ch}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}