@import url('/assets/fonts/fonts.css');

/* ═══════════════════════════════════════════════════════════════════════════
   SA HOT CHICKEN — design notes

   The whole promise of this site is "we publish the receipts." So it is built
   to look like a public record: warm permit-office manila stock, heavy black
   rules, everything numeric set in a monospace so it reads as data rather than
   marketing. Cayenne red is the only decorative colour and it is rationed.

   Fraunces (variable, wonk axis on) carries headlines. IBM Plex Sans is the
   body — a civic typeface, deliberately. IBM Plex Mono handles every score,
   date and Food Code citation. No rounded corners anywhere except the 2px
   softening on stamps.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --paper:    #F2EBDE;
  --paper-2:  #E7DBC6;
  --paper-3:  #FBF7EF;
  --ink:      #16120E;
  --ink-2:    #4C4237;
  --ink-3:    #7C6F5D;
  --rule:     #16120E;
  --heat:     #BE3419;
  --heat-2:   #8A1E0A;
  --flame:    #DE7A26;
  --leaf:     #2B5F45;
  --gold:     #A9822B;

  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --body:    'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono:    'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  --wrap: 1180px;
  --gut: clamp(1rem, 4vw, 2.5rem);
}

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

/* Grid and flex items default to min-width:auto, which refuses to shrink below
   their min-content. One wide table inside a panel then forces its whole track
   wider than the phone and the entire page scrolls sideways. Overriding it here
   once is what makes `overflow-x: auto` on .tablewrap and .formula actually
   contain their own scroll instead of leaking it to the document. */
.grid2 > *, .hero__grid > *, .cards > *, .foot__grid > *,
.statstrip > *, .venue__top > *, .panel, .row > * { min-width: 0; }
.tablewrap, .formula { max-width: 100%; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
}

/* Paper grain + a faint ledger rule. Two layered backgrounds, no images. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
body > * { position: relative; z-index: 1; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 820px; }

a { color: var(--heat-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--heat); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 90;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.018em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 7vw, 4.6rem); font-weight: 900; }
h2 { font-size: clamp(1.75rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lede { font-size: clamp(1.08rem, 2.1vw, 1.32rem); line-height: 1.5; color: var(--ink-2); }

.eyebrow {
  font-family: var(--mono);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--heat-2);
  margin: 0 0 1rem;
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .35; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── masthead ─────────────────────────────────────────────────────────────── */

.masthead { border-bottom: 3px solid var(--rule); background: var(--paper-3); }
.masthead__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .9rem; flex-wrap: wrap;
}
.brand { display: flex; align-items: baseline; gap: .55rem; text-decoration: none; color: var(--ink); }
.brand__mark {
  font-family: var(--display);
  font-variation-settings: 'WONK' 1, 'opsz' 120;
  font-weight: 900; font-size: 1.5rem; letter-spacing: -.03em;
}
.brand__mark em { font-style: normal; color: var(--heat); }
.brand__tag {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3);
}
.nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.nav a {
  font-family: var(--mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current] { color: var(--heat-2); border-bottom-color: var(--heat); }

/* ── hero ─────────────────────────────────────────────────────────────────── */

.hero { padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem); }
.hero h1 { max-width: 15ch; }
.hero h1 .hot { color: var(--heat); font-style: italic; font-variation-settings: 'WONK' 1, 'opsz' 144; }
.hero__grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.35fr 1fr; align-items: end; } }
.hero__note {
  border-left: 3px solid var(--heat);
  padding: .1rem 0 .1rem 1.1rem;
  font-size: .95rem; color: var(--ink-2);
}

.statstrip {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 2px solid var(--rule); border-left: 2px solid var(--rule);
  margin-top: 1.5rem;
}
/* The strip carries five figures now that 311 counts are published. Four
   columns left the fifth stranded alone on a second row with a hole beside it.
   Auto-fit keeps every row full at any count: 2 up on a phone, 3 on a small
   tablet, 5 across on a desktop. */
@media (min-width: 560px) {
  .statstrip { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}
.stat {
  border-right: 2px solid var(--rule); border-bottom: 2px solid var(--rule);
  padding: .85rem .9rem; background: var(--paper-3);
}
.stat__n {
  font-family: var(--mono); font-weight: 700; font-size: clamp(1.4rem, 3.6vw, 2rem);
  line-height: 1; font-variant-numeric: tabular-nums; display: block;
}
.stat__l {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3); margin-top: .4rem; display: block;
}

/* ── section furniture ────────────────────────────────────────────────────── */

.section { padding-block: clamp(2.5rem, 6vw, 4rem); }
.section--rule { border-top: 3px solid var(--rule); }
.section--tint { background: var(--paper-2); border-top: 3px solid var(--rule); border-bottom: 3px solid var(--rule); }
.section__head { margin-bottom: 2rem; max-width: 60ch; }

/* ── the ledger (ranked list) ─────────────────────────────────────────────── */

.ledger { border-top: 2px solid var(--rule); }

/* Explicit areas + minmax(0,1fr) + min-width:0 on children. Grid items default
   to min-width:auto, which refuses to shrink below their min-content and pushes
   the whole page into horizontal overflow on a phone. */
.ledgerhead {
  display: none;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
  padding: .5rem .35rem; border-bottom: 2px solid var(--rule);
}
@media (min-width: 720px) {
  .ledgerhead {
    display: grid; gap: 1rem;
    grid-template-columns: 3.4rem minmax(0, 1fr) 13rem 5.4rem;
  }
}

.row {
  display: grid;
  gap: .55rem .9rem;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  grid-template-areas:
    "rank name  score"
    "rank insp  insp";
  align-items: start;
  padding: 1.05rem .35rem;
  border-bottom: 1px solid rgba(22,18,14,.22);
  text-decoration: none; color: inherit;
  transition: background .16s ease, padding-left .16s ease;
  animation: rise .5s cubic-bezier(.2,.7,.3,1) both;
}
.row > * { min-width: 0; }
@media (min-width: 720px) {
  .row {
    grid-template-columns: 3.4rem minmax(0, 1fr) 13rem 5.4rem;
    grid-template-areas: "rank name insp score";
    align-items: center; gap: 1rem; padding-block: 1.15rem;
  }
}
.row:nth-child(even) { background: rgba(231,219,198,.4); }
.row:hover { background: var(--paper-3); padding-left: .75rem; }
.row:hover .row__name { color: var(--heat-2); }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .row, .fade { animation: none !important; }
  html { scroll-behavior: auto; }
}

.row__rank {
  grid-area: rank;
  font-family: var(--mono); font-weight: 700; font-size: 1.05rem;
  color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: .15rem;
}
.row__main { grid-area: name; }
.row__name {
  font-family: var(--display); font-variation-settings: 'WONK' 1, 'opsz' 40;
  font-weight: 700; font-size: 1.28rem; line-height: 1.14; letter-spacing: -.015em;
  margin: 0 0 .35rem; transition: color .16s ease;
  overflow-wrap: anywhere;
}
.row__meta {
  display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .04em;
  color: var(--ink-3); text-transform: uppercase;
}
.row__insp {
  grid-area: insp;
  font-family: var(--mono); font-size: .72rem; color: var(--ink-2); line-height: 1.35;
}
.row__insp b { font-size: 1.05rem; font-weight: 700; }
.row__insp span {
  display: block; color: var(--ink-3); font-size: .62rem;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.row__score { grid-area: score; justify-self: end; }

.tag {
  font-family: var(--mono); font-size: .58rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  border: 1px solid rgba(22,18,14,.35); padding: .12rem .4rem;
  color: var(--ink-2);
}
.tag--truck { border-color: var(--flame); color: #9A5410; background: rgba(222,122,38,.1); }
.tag--indie { border-color: var(--leaf); color: var(--leaf); background: rgba(43,95,69,.08); }
.tag--risk { border-color: var(--heat); color: var(--heat-2); background: rgba(190,52,25,.09); font-weight: 600; }
.tag--award { border-color: var(--gold); color: #7A5D1E; background: rgba(169,130,43,.13); font-weight: 600; }

/* ── published recognition (the R term) ───────────────────────────────────── */

.awards { display: grid; gap: 0; }
.award {
  display: grid; grid-template-columns: 3.1rem 1fr; gap: .7rem;
  padding: .7rem 0; border-top: 1px solid var(--rule);
}
.award:first-child { border-top: 1px solid rgba(22,18,14,.25); }
.award__yr {
  font-size: .82rem; font-weight: 600; color: var(--heat-2);
  letter-spacing: .02em; padding-top: .05rem;
}
.award__place {
  font-size: .95rem; line-height: 1.35;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem;
}
.award__src {
  font-family: var(--mono); font-size: .7rem; line-height: 1.5;
  color: var(--ink-3); margin-top: .22rem; overflow-wrap: anywhere;
}
.award__src a { color: var(--ink-2); }
.award__src a:hover { color: var(--heat-2); }
@media (max-width: 460px) {
  .award { grid-template-columns: 2.6rem 1fr; gap: .5rem; }
}

/* ── the score stamp ──────────────────────────────────────────────────────── */

.stamp {
  display: inline-grid; place-items: center; gap: .05rem;
  border: 2px solid currentColor; border-radius: 2px;
  padding: .3rem .5rem .35rem; min-width: 4.6rem;
  box-shadow: inset 0 0 0 1px var(--paper), 0 1px 0 rgba(22,18,14,.12);
  transform: rotate(-1.4deg);
}
.stamp__n {
  font-family: var(--mono); font-weight: 700; font-size: 1.45rem;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.stamp__l {
  font-family: var(--mono); font-size: .5rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; opacity: .8;
}
.stamp--high { color: var(--leaf); }
.stamp--mid  { color: var(--gold); }
.stamp--low  { color: var(--flame); }
.stamp--poor { color: var(--heat); }
.stamp--unrated { color: var(--ink-3); transform: none; }
.stamp--unrated .stamp__n { font-size: .74rem; letter-spacing: .05em; padding-block: .32rem; }
.stamp--lg { padding: .7rem 1rem .8rem; min-width: 8.4rem; transform: rotate(-2deg); }
.stamp--lg .stamp__n { font-size: 2.85rem; letter-spacing: -.02em; }
.stamp--lg .stamp__l { font-size: .58rem; }

/* ── filters ──────────────────────────────────────────────────────────────── */

.filters {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  padding: .85rem 0; border-top: 2px solid var(--rule); border-bottom: 2px solid var(--rule);
  position: sticky; top: 0; z-index: 5;
  background: var(--paper); margin-bottom: 0;
}
.filters__label {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); margin-right: .3rem;
}
.chip {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
  text-transform: uppercase; border: 1.5px solid var(--rule);
  background: transparent; color: var(--ink); padding: .28rem .6rem;
  cursor: pointer; transition: background .14s ease, color .14s ease;
}
.chip:hover { background: var(--paper-2); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ── establishment page ───────────────────────────────────────────────────── */

.venue__head { padding-block: clamp(2rem, 5vw, 3.2rem) 1.5rem; }
.venue__top { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; justify-content: space-between; }
.venue__title { flex: 1 1 20rem; }
.venue__title h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); margin-bottom: .55rem; }
.venue__addr { font-family: var(--mono); font-size: .82rem; color: var(--ink-2); line-height: 1.55; }
.venue__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .85rem; }

.breadcrumb {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 1.2rem;
}
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--heat-2); }

.panel {
  border: 2px solid var(--rule); background: var(--paper-3);
  padding: clamp(1.1rem, 3vw, 1.7rem);
}
.panel + .panel { margin-top: 1.2rem; }
.panel__title {
  font-family: var(--mono); font-size: .66rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--heat-2);
  margin: 0 0 .9rem; padding-bottom: .5rem; border-bottom: 1px solid rgba(22,18,14,.2);
}

.grid2 { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .grid2 { grid-template-columns: 1.55fr 1fr; align-items: start; } }

.kv { display: grid; grid-template-columns: 1fr auto; gap: .3rem .8rem; font-family: var(--mono); font-size: .78rem; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.kv .sum { border-top: 1px solid rgba(22,18,14,.25); padding-top: .35rem; margin-top: .25rem; }

/* score arithmetic */
.calc { font-family: var(--mono); font-size: .78rem; line-height: 1.9; }
.calc b { color: var(--heat-2); }

/* ── inspection timeline ──────────────────────────────────────────────────── */

.timeline { border-top: 2px solid var(--rule); margin-top: 1.4rem; }

.insp { border-bottom: 1px solid rgba(22,18,14,.22); }
.insp > summary {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .95rem .3rem; cursor: pointer; list-style: none;
  transition: background .14s ease;
}
.insp > summary::-webkit-details-marker { display: none; }
.insp > summary:hover { background: var(--paper-3); }
.insp__caret {
  font-family: var(--mono); font-size: .9rem; color: var(--ink-3);
  transition: transform .2s ease; display: inline-block; width: 1rem;
}
.insp[open] > summary .insp__caret { transform: rotate(90deg); }
.insp__date { font-family: var(--mono); font-size: .86rem; font-weight: 600; min-width: 7.6rem; }
.insp__score {
  font-family: var(--mono); font-weight: 700; font-size: 1.05rem;
  border: 1.5px solid currentColor; padding: .05rem .45rem; border-radius: 2px;
}
.insp__score--ok   { color: var(--leaf); }
.insp__score--mid  { color: var(--gold); }
.insp__score--bad  { color: var(--heat); }
.insp__sum { font-size: .82rem; color: var(--ink-2); flex: 1 1 12rem; }
.insp__body { padding: .2rem .3rem 1.4rem; }

.finding {
  border-left: 3px solid var(--ink-3);
  padding: .1rem 0 .1rem 1rem;
  margin-bottom: 1.5rem;
}
.finding:last-child { margin-bottom: .2rem; }
.finding--risk { border-left-color: var(--heat); }
.finding__meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.finding__h {
  font-family: var(--display); font-variation-settings: 'WONK' 1, 'opsz' 32;
  font-weight: 700; font-size: 1.12rem; line-height: 1.25; letter-spacing: -.01em;
  margin: 0 0 .35rem;
}
.finding__why { font-size: .92rem; color: var(--ink-2); margin: 0 0 .7rem; max-width: 62ch; }
.finding__quote {
  border-left: 2px solid rgba(22,18,14,.3);
  background: rgba(231,219,198,.5);
  padding: .55rem .8rem; margin: 0 0 .55rem;
  font-size: .9rem; font-style: italic; color: var(--ink);
  max-width: 68ch;
}
.finding__quote cite {
  display: block; margin-top: .4rem; font-style: normal;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}
.finding__cite {
  font-family: var(--mono); font-size: .68rem; color: var(--ink-3);
  letter-spacing: .02em;
}
.finding__cite b { color: var(--ink-2); font-weight: 600; }

.clean {
  font-family: var(--mono); font-size: .84rem; color: var(--leaf);
  padding: .3rem 0 .2rem;
}

/* ── notices ──────────────────────────────────────────────────────────────── */

.notice {
  border: 2px solid var(--rule); border-left-width: 6px;
  padding: 1rem 1.15rem; font-size: .92rem; background: var(--paper-3);
}
.notice--heat { border-left-color: var(--heat); }
.notice--flat { border-left-color: var(--ink-3); }
.notice p:last-child { margin-bottom: 0; }
.notice strong { font-weight: 600; }

/* ── methodology ──────────────────────────────────────────────────────────── */

.prose { max-width: 74ch; }
.prose h2 { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 2px solid var(--rule); }
.prose h3 { margin-top: 1.9rem; }
.prose ul, .prose ol { padding-left: 1.2rem; margin: 0 0 1.1em; }
.prose li { margin-bottom: .45em; }
.prose code {
  font-family: var(--mono); font-size: .86em; background: var(--paper-2);
  padding: .08em .32em; border: 1px solid rgba(22,18,14,.18);
}

.formula {
  font-family: var(--mono); font-size: clamp(.72rem, 1.9vw, .92rem);
  border: 2px solid var(--rule); background: var(--paper-3);
  padding: 1.1rem 1.2rem; margin: 1.5rem 0; overflow-x: auto;
  line-height: 1.85; white-space: pre;
}
.formula b { color: var(--heat-2); }

.tablewrap { overflow-x: auto; margin: 1.4rem 0; border: 2px solid var(--rule); background: var(--paper-3); }
table { border-collapse: collapse; width: 100%; font-size: .84rem; }
th, td { padding: .5rem .7rem; text-align: left; border-bottom: 1px solid rgba(22,18,14,.18); vertical-align: top; }
th {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2);
  background: var(--paper-2); border-bottom: 2px solid var(--rule); white-space: nowrap;
}
td.num, th.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.total td { border-top: 2px solid var(--rule); font-weight: 700; font-family: var(--mono); }

/* ── services ─────────────────────────────────────────────────────────────── */

.cards { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  border: 2px solid var(--rule); background: var(--paper-3);
  padding: 1.3rem 1.35rem 1.45rem;
  display: flex; flex-direction: column;
  animation: rise .5s cubic-bezier(.2,.7,.3,1) both;
}
.card__n {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .16em;
  color: var(--heat-2); text-transform: uppercase; margin-bottom: .7rem;
}
.card h3 { font-size: 1.24rem; margin-bottom: .55rem; }
.card p { font-size: .93rem; color: var(--ink-2); }
.card__then {
  margin-top: auto; padding-top: .9rem; border-top: 1px solid rgba(22,18,14,.2);
  font-family: var(--mono); font-size: .72rem; color: var(--ink); line-height: 1.5;
}
.card__then b { color: var(--heat-2); font-weight: 600; }

/* ── CTA blocks ───────────────────────────────────────────────────────────── */

.cta {
  border: 3px solid var(--rule); background: var(--paper-3);
  padding: clamp(1.4rem, 4vw, 2.4rem);
}
.cta h2 { margin-bottom: .6rem; }
.btn {
  display: inline-block; font-family: var(--mono); font-size: .78rem;
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); text-decoration: none;
  padding: .75rem 1.3rem; border: 2px solid var(--ink);
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.btn:hover { background: var(--heat); border-color: var(--heat); color: #fff; transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btnrow { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }

/* ── footer ───────────────────────────────────────────────────────────────── */

.foot { border-top: 3px solid var(--rule); background: var(--paper-2); padding-block: 2.4rem 3rem; margin-top: 3rem; }
.foot__grid { display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
@media (min-width: 780px) { .foot__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.foot h4 {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 .7rem;
}
.foot ul { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.foot li { margin-bottom: .35rem; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--heat-2); text-decoration: underline; }
.foot__legal { font-size: .78rem; color: var(--ink-3); max-width: 46ch; line-height: 1.6; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper); padding: .7rem 1rem;
  font-family: var(--mono); font-size: .8rem; z-index: 99;
}
.skip:focus { left: .5rem; top: .5rem; }

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

.hidden { display: none !important; }