@font-face {
  font-family: "Sora";
  src: url("/fonts/Sora.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono.woff2") format("woff2-variations");
  font-weight: 400 500;
  font-display: swap;
}

:root {
  --font: "Sora", ui-sans-serif, system-ui, -apple-system,
          "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular,
          Menlo, Consolas, monospace;

  --t-display: 2.75rem;
  --t-h2:      1.9rem;
  --t-h3:      1.3rem;
  --t-quote:   1.45rem;
  --t-body:    1rem;
  --t-small:   .85rem;
  --t-label:   .66rem;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --r: 0;
  --r-pill: 999px;

  /* grades — the only hues in the system */
  --a: #33a05a;  --a-ink: #04150a;
  --b: #8aa32b;  --b-ink: #121a03;
  --c: #c9971f;  --c-ink: #1d1400;
  --d: #c96a1c;  --d-ink: #1d0f00;
  --f: #c0281a;  --f-ink: #ffffff;
  --none: transparent; --none-ink: #9aa3a8; --none-edge: #4a5054;
}

:root, [data-theme="dark"] {
  --bg: #0b0d0e;
  --card: #121415;
  --ink: #eef0f1;
  --ink-2: #c9d0d3;
  --muted: #9aa3a8;
  --line: #24282a;
  --line-2: #3c4245;
  --accent: var(--ink);
  --accent-ink: var(--bg);
  --sev-high: #eef0f1;
  --sev-mid:  #c9d0d3;
  --sev-low:  #9aa3a8;
}

[data-theme="light"] {
  --bg: #faf9f7;
  --card: #ffffff;
  --ink: #14181a;
  --ink-2: #3a4145;
  --muted: #5f666a;
  --line: #dfddd8;
  --line-2: #b9b5ad;
  --accent: var(--ink);
  --accent-ink: var(--bg);

  /* darkened so white letterforms clear AA at 15px — do NOT reuse dark values */
  --a: #23663a;  --a-ink: #ffffff;
  --b: #4f5d18;  --b-ink: #ffffff;
  --c: #7d5610;  --c-ink: #ffffff;
  --d: #a85717;  --d-ink: #ffffff;
  --f: #b52618;  --f-ink: #ffffff;
  --none-ink: #5f666a; --none-edge: #b9b5ad;

  --sev-high: #14181a;
  --sev-mid:  #3a4145;
  --sev-low:  #5f666a;
}

html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: var(--font); font-size: var(--t-body); line-height: 1.6;
  -webkit-font-smoothing: antialiased; }

/* links are ink, never blue — a hue here would break the grade rule */
a { color: var(--ink); text-decoration: underline;
    text-decoration-color: var(--line-2); text-underline-offset: 3px; }
a:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* severity marks: shape + word, never hue alone */
.sev-high::before { content: "\25A0\00a0"; }
.sev-mid::before  { content: "\25E8\00a0"; }
.sev-low::before  { content: "\25A1\00a0"; }
.sev-high { color: var(--sev-high); }
.sev-mid  { color: var(--sev-mid); }
.sev-low  { color: var(--sev-low); }

@keyframes fl-pulse {
  0%   { r: 6;  opacity: .9; }
  70%  { r: 22; opacity: 0; }
  100% { r: 22; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  [style*="fl-pulse"], .fl-pulse { animation: none !important; }
}

@media (min-width: 900px) {
  :root { --t-display: 3.25rem; --t-quote: 1.8rem; }
}
@media print {
  :root { --bg: #fff; --ink: #000; }
}

/* ---------- layout ---------- */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--s-5); }
.measure { max-width: 640px; }
main { padding: var(--s-6) 0 var(--s-8); }
*, *::before, *::after { box-sizing: border-box; }

/* The [hidden] attribute has to actually hide things.
   The browser's own rule for it is [hidden] { display: none }, which any class
   selector setting a display outranks — so .h-spot { display: block } left four
   "hidden" blog stories stacked on the home page, and .n-filter { display: flex }
   showed the Near Me controls before there were any results to filter. Anything
   toggled from script in this design is class-styled, so this is not an edge
   case, it is the default. */
[hidden] { display: none !important; }

/* ---------- type ---------- */
h1 { font-size: var(--t-display); font-weight: 700; letter-spacing: -.05em;
     line-height: 1.02; margin: 0; }
h2 { font-size: var(--t-h2); font-weight: 700; letter-spacing: -.04em;
     line-height: 1.06; margin: 0; }
h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -.035em;
     line-height: 1.12; margin: 0; }
.deck { font-size: 15.5px; color: var(--muted); line-height: 1.55; margin: 0; }
.label { font-family: var(--mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.mono { font-family: var(--mono); }
.small { font-size: var(--t-small); }
.muted { color: var(--muted); }

/* running prose, for the pages that are mostly words */
.prose { font-size: 16px; line-height: 1.62; color: var(--ink-2); margin: 0 0 var(--s-4); }
.prose b { color: var(--ink); font-weight: 700; }
ul.prose { padding-left: 1.15em; }
ul.prose li { margin-bottom: var(--s-3); }
ul.prose li::marker { color: var(--line-2); }

/* ---------- grade square ---------- */
/* Square, never rounded. The letter is always present: a bare colour is
   ambiguous to a screen reader and invisible to a red/green colour-blind
   reader, which is precisely the axis this scale sits on. */
.grade { display: inline-flex; align-items: center; justify-content: center;
  flex-direction: column; font-weight: 700; letter-spacing: -.04em;
  line-height: .9; border-radius: 0; flex: none; }
.grade.gA { background: var(--a); color: var(--a-ink); }
.grade.gB { background: var(--b); color: var(--b-ink); }
.grade.gC { background: var(--c); color: var(--c-ink); }
.grade.gD { background: var(--d); color: var(--d-ink); }
.grade.gF { background: var(--f); color: var(--f-ink); }
/* the absence of a grade, deliberately not on the scale */
.grade.gN { background: var(--none); color: var(--none-ink);
  border: 1px dashed var(--none-edge); font-size: .5em; letter-spacing: .06em; }
.grade .score { font-family: var(--mono); font-weight: 400; font-size: 10px;
  letter-spacing: 0; opacity: .82; margin-top: 3px; }

/* ---------- the finding: the atom of the site ---------- */
.finding { display: flex; gap: var(--s-2); align-items: flex-start; }
.finding .qm { font-size: 2em; line-height: .7; flex: none; color: var(--ink); }
.finding .body { min-width: 0; }
.finding q { quotes: none; display: block; font-weight: 400; letter-spacing: -.03em;
  line-height: 1.36; text-wrap: pretty; color: var(--ink); }
.finding .meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-top: var(--s-3);
  display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; }
.finding .meta .sep { color: var(--line-2); }
/* size varies by context, deliberately */
.finding.f-hero q   { font-size: 34px; }
.finding.f-worst q  { font-size: 30px; }
.finding.f-visit q  { font-size: 23px; }
.finding.f-row q    { font-size: 19px; }
/* basic findings are rarely why anyone is reading */
.finding.f-basic q  { font-size: 17px; color: var(--ink-2); }
@media (max-width: 760px) {
  .finding.f-hero q, .finding.f-worst q, .finding.f-visit q { font-size: 17px; }
}

/* our translation of a verbatim record, never presented as the record */
.translation { border-left: 1px solid var(--line-2); padding-left: var(--s-3);
  margin-top: var(--s-3); }
.translation .t { font-size: 15px; color: var(--ink-2); line-height: 1.5; }

/* ---------- lozenges, badges, chips ---------- */
.loz { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono);
  font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--line-2);
  color: var(--ink-2); }
.loz.strong { border-color: var(--ink); color: var(--ink); }
.loz.quiet  { border-color: var(--line); color: var(--muted); }

.badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono);
  font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 11px; border: 1px solid var(--ink); color: var(--ink); }
.badge.unearned { border-style: dashed; border-color: var(--line-2); color: var(--muted); }

.chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 7px 12px;
  border: 1px solid var(--line-2); color: var(--ink-2); text-decoration: none; }
.chip:hover { border-color: var(--ink); text-decoration: none; }
.chip[aria-current="true"], .chip.on { background: var(--ink); color: var(--bg);
  border-color: var(--ink); }
.chip .sw { width: 10px; height: 10px; flex: none; }
.chiprow { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; padding: 12px 18px; border-radius: 0; cursor: pointer;
  border: 1px solid var(--ink); background: var(--ink); color: var(--bg);
  text-decoration: none; }
.btn:hover { text-decoration: none; opacity: .88; }
.btn.secondary { background: transparent; color: var(--ink); }
.btn.quiet { background: transparent; color: var(--muted); border-color: var(--line-2); }

/* ---------- surfaces ---------- */
.card { background: var(--card); border: 1px solid var(--line); padding: var(--s-5); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.callout { border: 1px solid var(--line-2); border-left: 3px solid var(--ink);
  padding: var(--s-4) var(--s-5); }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  padding: 0 var(--s-3) var(--s-3); border-bottom: 1px solid var(--line); }
td { padding: 13px var(--s-3); border-bottom: 1px solid var(--line);
  vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
.tablewrap { overflow-x: auto; }
.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- header / footer ---------- */
header.site { border-bottom: 1px solid var(--line); }
/* direct child only — the phone nav below has its own .wrap inside this header */
header.site > .wrap { display: flex; align-items: center; gap: var(--s-5);
  padding-top: var(--s-4); padding-bottom: var(--s-4); }
.wordmark { display: flex; align-items: center; gap: 10px; text-decoration: none;
  line-height: 1.05; flex: none; }
.wordmark img { display: block; flex: none; }
.wm-words { display: block; }
.wordmark b { display: block; font-weight: 700; font-size: 25px; letter-spacing: -.04em; }
.wm-words > span { display: block; font-weight: 700; font-size: 25px;
  letter-spacing: -.04em; color: var(--muted); }
/* the footer keeps the smaller pairing — it is a sign-off, not a masthead */
.footgrid .wordmark b, .footgrid .wm-words > span { font-size: 17px; }
.wordmark:hover { text-decoration: none; }
nav.groups { display: flex; gap: var(--s-5); margin-left: auto; }
nav.groups > details { position: relative; }
nav.groups summary { list-style: none; cursor: pointer; font-size: 14.5px;
  color: var(--ink-2); }
nav.groups summary::-webkit-details-marker { display: none; }
nav.groups summary:hover { color: var(--ink); }
/* A top-level destination sitting among the dropdowns. */
nav.groups .navlink { font-size: 14.5px; color: var(--ink-2); text-decoration: none; }
nav.groups .navlink:hover { color: var(--ink); text-decoration: none; }
nav.groups > details[open] > .menu { display: flex; }
nav.groups .menu { display: none; position: absolute; top: calc(100% + 10px); left: -14px;
  z-index: 40; flex-direction: column; min-width: 230px; background: var(--card);
  border: 1px solid var(--line-2); padding: var(--s-2) 0; }
nav.groups .menu a { padding: 9px var(--s-4); font-size: 14.5px; text-decoration: none; }
nav.groups .menu a:hover { background: var(--bg); text-decoration: none; }

footer.site { border-top: 1px solid var(--line); margin-top: var(--s-8);
  padding: var(--s-7) 0 var(--s-6); }
.footgrid { display: grid; grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr));
  gap: var(--s-5); }
.footgrid h4 a { color: inherit; text-decoration: none; }
.footgrid h4 a:hover { color: var(--ink); }
.footgrid h4 { font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 var(--s-3); }
.footgrid a { display: block; font-size: 14px; text-decoration: none; padding: 4px 0;
  color: var(--ink-2); }
.footgrid a:hover { color: var(--ink); text-decoration: underline; }
.legal { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); display: flex; flex-wrap: wrap;
  gap: var(--s-2) var(--s-5); }
/* ---------- phone navigation ---------- */
.navbtn { display: none; cursor: pointer; font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; padding: 6px 9px; color: var(--muted); }
.navbtn:hover { color: var(--ink); }
.mobilenav { display: none; border-top: 1px solid var(--line); padding: var(--s-5) 0; }
.mobilenav .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.mobilenav h4 { font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 var(--s-2); }
.mobilenav a { display: block; font-size: 15px; text-decoration: none; padding: 6px 0;
  color: var(--ink-2); }

/* The masthead steps down in three, not one: mark, type and padding move
   together so the lockup keeps its proportions, instead of the words suddenly
   collapsing beside a mark that didn't. Desktop is deliberately untouched. */
@media (max-width: 760px) {
  header.site > .wrap { padding-top: 12px; padding-bottom: 12px; gap: var(--s-3); }
  .wordmark img { width: 72px; height: 70px; }
  .wordmark b, .wm-words > span { font-size: 20px; }
  .wordmark { gap: 9px; }
}
/* Below this the words plus EN/ES plus DARK plus MENU no longer cross the
   screen — at 375px the menu button ran 31px off the right edge. The mark
   carries the identity alone, which is what a mark is for. The footer keeps
   its words either way. */
@media (max-width: 480px) {
  header.site > .wrap { padding-top: 8px; padding-bottom: 8px; }
  header.site .wm-words { display: none; }
  .wordmark img { width: 64px; height: 63px; }
}
@media (max-width: 860px) {
  .footgrid { grid-template-columns: 1fr 1fr; }
  nav.groups { display: none; }
  .navbtn { display: inline-flex; align-items: center; }
  .navtoggle:checked ~ .mobilenav { display: block; }
}
@media (max-width: 420px) {
  .mobilenav .wrap { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* ---------- theme + language toggles ---------- */
.toggles { display: flex; gap: var(--s-2); align-items: center; flex: none; }
.seg { display: inline-flex; border: 1px solid var(--line-2); }
.seg a, .seg button { font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; padding: 6px 9px; background: transparent; color: var(--muted);
  border: 0; cursor: pointer; text-decoration: none; }
.seg a[aria-current="true"], .seg button[aria-pressed="true"] {
  background: var(--ink); color: var(--bg); }

.crumb { font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); display: flex; gap: 8px;
  flex-wrap: wrap; margin-bottom: var(--s-5); }
.crumb a { text-decoration: none; color: var(--muted); }
.crumb a:hover { color: var(--ink); }
.crumb .sep { color: var(--line-2); }

/* ---------- hero ---------- */
.p-hero { display: flex; gap: var(--s-6); align-items: flex-start; }
.p-hero .gradecol { flex: none; display: flex; flex-direction: column; gap: var(--s-3);
  align-items: flex-start; }
.p-hero .grade { width: 150px; height: 150px; font-size: 86px; }
.p-hero .gradecol a { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); text-decoration: none; }
.p-hero .gradecol a:hover { color: var(--ink); }
.p-hero .head { min-width: 0; flex: 1; }
.p-hero h1 { font-size: 40px; letter-spacing: -.02em; line-height: 1.04; }
.p-addr { font-size: 15px; color: var(--ink-2); margin: var(--s-3) 0 0; }
.p-since { font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin: var(--s-2) 0 0; }

/* Not a closure and not an accusation — a caveat, so it sits at line weight
   rather than full ink. */
.p-lapsed { margin-top: var(--s-5); border-left-color: var(--line-2); }
.p-lapsed .h { font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.p-lapsed p { margin: var(--s-2) 0 0; font-size: 14.5px; color: var(--muted);
  line-height: 1.55; }
.p-foot { margin-top: var(--s-7); padding-top: var(--s-4);
  border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.6;
  color: var(--muted); max-width: 720px; }

/* A closure is the single most consequential thing on the page. */
.p-status { margin-top: var(--s-5); }
.p-status .h { font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.p-status p { margin: var(--s-2) 0 0; font-size: 15px; color: var(--ink-2); }

.p-meta { display: flex; flex-wrap: wrap; gap: var(--s-6); margin-top: var(--s-5);
  padding-top: var(--s-4); border-top: 1px solid var(--line); }
.p-meta div { min-width: 0; }
.p-meta .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); display: block; }
.p-meta .v { font-size: 15px; margin-top: 3px; display: block; }
.p-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }

/* ---------- grade history ---------- */
.section { margin-top: var(--s-8); }
.section > .label { display: block; margin-bottom: var(--s-4); }
.ghist { display: flex; gap: var(--s-4); align-items: flex-end; flex-wrap: wrap; }
.ghist .step { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.ghist .grade { width: 34px; height: 34px; font-size: 19px; }
.ghist .step.now .grade { width: 44px; height: 44px; font-size: 25px; }
.ghist .when { font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); }
.ghist-read { margin-top: var(--s-4); display: flex; gap: var(--s-3); align-items: baseline;
  flex-wrap: wrap; }
.ghist-read p { margin: 0; font-size: 15px; color: var(--ink-2); }

/* ---------- badges ---------- */
.badgerow { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.badgenote { margin-top: var(--s-3); font-size: 13.5px; color: var(--muted); }

/* ---------- timeline ---------- */
.tl { position: relative; padding-left: var(--s-6); }
.tl::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px;
  width: 2px; background: var(--line); }
.tl-visit { position: relative; padding-bottom: var(--s-7); }
.tl-visit:last-child { padding-bottom: 0; }
.tl-dot { position: absolute; left: calc(-1 * var(--s-6) + 0px); top: 5px;
  width: 15px; height: 15px; border-radius: var(--r-pill); }
.tl-dot.gA { background: var(--a); } .tl-dot.gB { background: var(--b); }
.tl-dot.gC { background: var(--c); } .tl-dot.gD { background: var(--d); }
.tl-dot.gF { background: var(--f); }
.tl-dot.gN { background: transparent; border: 1px dashed var(--none-edge); }
.tl-head { display: flex; gap: var(--s-3); align-items: baseline; flex-wrap: wrap; }
.tl-date { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.tl-type { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }
.tl-summary { margin: var(--s-3) 0 0; font-size: 15px; color: var(--ink-2);
  max-width: 660px; }
.tl-counts { display: flex; gap: var(--s-2); margin-top: var(--s-4); flex-wrap: wrap; }
.pill { display: inline-flex; align-items: baseline; gap: 6px; border: 1px solid var(--line);
  padding: 6px 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); }
.pill b { font-size: 13px; font-weight: 500; color: var(--ink); letter-spacing: 0; }
.tl-disp { margin-top: var(--s-3); font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tl-disp b { color: var(--ink-2); font-weight: 500; }

.tl-moved { margin: var(--s-2) 0 0; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.tl-pending { margin: var(--s-4) 0 0; font-size: 14px; color: var(--muted);
  max-width: 620px; border-left: 1px solid var(--line-2); padding-left: var(--s-3); }

/* the expanded panel of verbatim findings */
.tl-panel { margin-top: var(--s-4); border: 1px solid var(--line); background: var(--card);
  padding: var(--s-5); }
.tl-panel > .label { display: block; margin-bottom: var(--s-4); }
.tl-panel .finding + .finding { margin-top: var(--s-5); padding-top: var(--s-5);
  border-top: 1px solid var(--line); }
.tl-more { margin-top: var(--s-4); display: flex; gap: var(--s-4); flex-wrap: wrap;
  align-items: baseline; }
.tl-more summary, .tl-more a { font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); cursor: pointer;
  text-decoration: none; list-style: none; }
.tl-more summary::-webkit-details-marker { display: none; }
.tl-more summary:hover, .tl-more a:hover { color: var(--ink); }
details.findings > summary { font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); cursor: pointer;
  margin-top: var(--s-4); list-style: none; }
details.findings > summary::-webkit-details-marker { display: none; }
details.findings > summary:hover { color: var(--ink); }
details.findings[open] > summary { margin-bottom: var(--s-4); }

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  .p-hero { flex-direction: column; gap: var(--s-5); }
  .p-hero .grade { width: 84px; height: 84px; font-size: 48px; }
  .p-hero h1 { font-size: 30px; }
  .p-meta { gap: var(--s-5); }
  .tl { padding-left: var(--s-5); }
  .tl-dot { width: 11px; height: 11px; left: calc(-1 * var(--s-5) + 2px); }
}

.b-head { max-width: 700px; }
.b-head h1 { font-size: 40px; }
.b-head .deck { margin-top: var(--s-3); }

/* ---------- filters ---------- */
.b-filters { margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
/* Wrap by default. The sideways scroll is for phones only — at 820px it just
   cut "Not rated" in half at the right edge with nothing to say it could move. */
.b-chips { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.b-chips .chip { flex: none; min-height: 44px; }
@media (max-width: 520px) {
  .b-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--s-2);
    scrollbar-width: none; }
  .b-chips::-webkit-scrollbar { display: none; }
}
.b-chips .chip em { font-style: normal; font-variant-numeric: tabular-nums; opacity: .7; }
.b-chips .sw.gA { background: var(--a); } .b-chips .sw.gB { background: var(--b); }
.b-chips .sw.gC { background: var(--c); } .b-chips .sw.gD { background: var(--d); }
.b-chips .sw.gF { background: var(--f); }
.b-formrow { display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center; }
.b-form { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: stretch;
  min-width: 0; }
.b-form input {
  font-family: var(--font); font-size: 14.5px; color: var(--ink); background: var(--card);
  border: 1px solid var(--line-2); border-radius: 0; padding: 11px var(--s-3);
  min-height: 44px; min-width: 0; }
.b-form input[type="search"] { flex: 1 1 220px; }
.b-form input[name="city"] { flex: 0 1 170px; }
.b-form input:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
.b-sort { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  margin-left: auto; }
.b-sort .seg a { padding: 10px 12px; min-height: 44px; display: inline-flex;
  align-items: center; }

.b-count { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin: var(--s-5) 0 var(--s-3); }

/* ---------- the table ---------- */
.b-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.b-table col.c-grade   { width: 56px; }
.b-table col.c-name    { width: auto; }
.b-table col.c-city    { width: 15%; }
.b-table col.c-last    { width: 16%; }
.b-table col.c-hist    { width: 13%; }
.b-table col.c-high    { width: 11%; }
.b-table th { padding: 0 var(--s-3) var(--s-3) 0; }
.b-table td { padding: 13px var(--s-3) 13px 0; border-bottom: 1px solid var(--line);
  vertical-align: middle; }
.b-table .grade { width: 38px; height: 38px; font-size: 21px; }
.b-name a { font-size: 15.5px; text-decoration: none; letter-spacing: -.01em; }
.b-name a:hover { text-decoration: underline; }
.b-tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-2);
  padding: 2px 6px; margin-left: 8px; white-space: nowrap; }
.b-tag.shut { border-color: var(--ink); color: var(--ink); }
.b-city { font-size: 14px; color: var(--ink-2); }
.b-last { font-family: var(--mono); font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.b-hist { display: flex; gap: 3px; }
.b-hist .grade { width: 13px; height: 13px; font-size: 0; }
/* The letter is unreadable at 13px, so these squares are a shape, and the row's
   own grade square carries the letter. Screen readers get the full series. */
.b-high { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 15px; }
.b-high span { display: block; font-size: 9.5px; letter-spacing: .14em; color: var(--muted); }

.b-empty { padding: var(--s-6) 0; color: var(--muted); }

/* ---------- pagination ---------- */
.b-pages { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center;
  margin-top: var(--s-6); }
.b-pages a, .b-pages span { font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  min-width: 38px; min-height: 38px; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid var(--line-2); text-decoration: none;
  color: var(--ink-2); padding: 0 10px; }
.b-pages a:hover { border-color: var(--ink); color: var(--ink); }
.b-pages .on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.b-pages .gap { border: 0; color: var(--muted); min-width: 0; }

/* ---------- phone: stacked rows, no table ---------- */
@media (max-width: 760px) {
  .b-head h1 { font-size: 30px; }
  .b-sort { margin-left: 0; }
  .b-table, .b-table tbody, .b-table tr, .b-table td { display: block; width: 100%; }
  .b-table thead, .b-table colgroup { display: none; }
  .b-table tr { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center; column-gap: var(--s-3); row-gap: 2px; padding: var(--s-3) 0;
    border-bottom: 1px solid var(--line); }
  .b-table td { padding: 0; border: 0; }
  .b-table .grade { width: 44px; height: 44px; font-size: 24px; }
  td.b-cell-grade { grid-column: 1; grid-row: 1 / span 3; }
  td.b-cell-name  { grid-column: 2; grid-row: 1; }
  td.b-cell-city  { grid-column: 2; grid-row: 2; }
  td.b-cell-last  { grid-column: 2; grid-row: 3; }
  td.b-cell-high  { grid-column: 3; grid-row: 1 / span 3; }
  /* element-qualified so it outranks the .b-table td { display: block } above */
  td.b-cell-hist { display: none; }
  .b-name a { font-size: 16px; }
  .b-last { font-size: 11px; }
}

/* ---------- the phone-first answer block ---------- */
/* Present in the DOM for every visitor, revealed only on small screens. */
.h-near { display: none; }
.h-near-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-4); }
.h-near-where { font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); }
.h-near-list { display: flex; flex-direction: column; }
.h-nearrow { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: var(--s-4);
  padding: var(--s-4) 0; border-bottom: 1px solid var(--line); text-decoration: none;
  align-items: start; }
.h-nearrow:hover { text-decoration: none; }
.h-nearrow .grade { width: 62px; height: 62px; font-size: 34px; }
.h-nearrow b { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.02em;
  line-height: 1.2; }
.h-nearrow .meta { display: block; font-family: var(--mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }
.h-nearrow .addr { display: block; font-size: 13.5px; color: var(--ink-2); margin-top: 3px; }
.h-nearrow .hist { display: flex; gap: 3px; margin-top: 8px; }
.h-nearrow .hist .grade { width: 13px; height: 13px; font-size: 0; }
.h-near-more { display: block; padding: var(--s-4) 0; font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  text-decoration: none; }
.h-near-fallback { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.h-near-fallback input { flex: 1 1 auto; min-width: 0; min-height: 44px;
  font-family: var(--mono); font-size: 14px; letter-spacing: .1em; color: var(--ink);
  background: var(--card); border: 1px solid var(--line-2); border-radius: 0;
  padding: 11px var(--s-3); }
.h-near-priv { font-size: 12.5px; color: var(--muted); margin: var(--s-4) 0 0;
  line-height: 1.5; }
.h-near-note { font-size: 13px; color: var(--muted); margin: var(--s-3) 0 0; }

/* ---------- hero ---------- */
.h-hero { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: var(--s-6);
  align-items: flex-start; }
/* The handoff pinned this to one line, but the headline is now whatever is in
   the database and several run to eight words. 17ch is the widest measure the
   hero column will honour, and it is the point at which every current headline
   fits in two lines — 15ch pushed the longest to three, which moved everything
   below it by 45px depending on which one loaded. */
.h-hero h1 { font-size: 44px; letter-spacing: -.05em; max-width: 17ch; text-wrap: balance; }
.h-hero .deck { max-width: 420px; margin-top: var(--s-4); }
.h-search { display: flex; gap: var(--s-2); margin-top: var(--s-5); max-width: 460px; }
.h-search input { flex: 1 1 auto; min-width: 0; min-height: 48px; font-family: var(--font);
  font-size: 15px; color: var(--ink); background: var(--card);
  border: 1px solid var(--line-2); border-radius: 0; padding: 12px var(--s-4); }
.h-search input:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
.h-actions { display: flex; gap: var(--s-2); margin-top: var(--s-4); flex-wrap: wrap; }
.h-legend { display: flex; gap: var(--s-3); margin-top: var(--s-5); flex-wrap: wrap;
  align-items: center; }
.h-legend span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.h-legend i { width: 11px; height: 11px; display: block; }
.h-legend .gA { background: var(--a); } .h-legend .gB { background: var(--b); }
.h-legend .gC { background: var(--c); } .h-legend .gD { background: var(--d); }
.h-legend .gF { background: var(--f); }
.h-legend .gN { border: 1px dashed var(--none-edge); }

/* ---------- the Florida map ---------- */
.livemap { position: relative; }
.livemap-head { display: flex; align-items: center; gap: 8px; font-family: var(--mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin-bottom: var(--s-3); }
.livedot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--a);
  flex: none; }
.livemap-stage { position: relative; }
.flmap { width: 100%; height: auto; display: block; }
/* The state has to read as a solid mass, so it sits a step above the card grey
   rather than level with it. Neutral by construction — a hue here would compete
   with the pins, which are the only thing on this page allowed to mean a grade. */
:root { --map-fill: #191c1d; --map-edge: #31373a; }
[data-theme="light"] { --map-fill: #eceae5; --map-edge: #c8c4bc; }
.flshape { fill: var(--map-fill); stroke: var(--map-edge); stroke-width: 1; }
.flpin.gA { fill: var(--a); } .flpin.gB { fill: var(--b); } .flpin.gC { fill: var(--c); }
.flpin.gD { fill: var(--d); } .flpin.gF { fill: var(--f); } .flpin.gN { fill: var(--muted); }
.flping { fill: none; stroke-width: 2; animation: fl-ring 1.4s ease-out forwards; }
.flping.gA { stroke: var(--a); } .flping.gB { stroke: var(--b); }
.flping.gC { stroke: var(--c); } .flping.gD { stroke: var(--d); }
.flping.gF { stroke: var(--f); } .flping.gN { stroke: var(--muted); }
@keyframes fl-ring { to { r: 20; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .flping { display: none; } }

.livecard { position: absolute; left: 0; right: 0; bottom: -8px; display: flex;
  gap: var(--s-3); background: var(--card); border: 1px solid var(--line-2);
  padding: var(--s-3) var(--s-4); align-items: flex-start; }
.livecard .grade { width: 40px; height: 40px; font-size: 22px; flex: none; }
.livecard-body { min-width: 0; }
.livecard-body b { display: block; font-size: 15px; letter-spacing: -.02em; }
.livecard-body span { display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.livecard-finding { font-family: var(--font) !important; font-size: 13px !important;
  letter-spacing: 0 !important; text-transform: none !important; color: var(--ink-2) !important;
  line-height: 1.45; }

/* ---------- the week's finding ---------- */
.h-finding { margin-top: var(--s-8); background: var(--card); border: 1px solid var(--line);
  padding: var(--s-6); }
.h-finding .finding q { max-width: 900px; }

/* ---------- streak ---------- */
.h-streak { margin-top: var(--s-8); display: flex; gap: var(--s-5); align-items: baseline;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: var(--s-6) 0; }
.h-streak-n { font-size: 52px; font-weight: 700; letter-spacing: -.05em; line-height: 1;
  font-variant-numeric: tabular-nums; flex: none; }
.h-streak p { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.h-streak .who { display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }

/* ---------- spotlight + just happened ---------- */
.h-mid { margin-top: var(--s-8); display: grid; grid-template-columns: minmax(0, 1fr) 330px;
  gap: var(--s-6); align-items: start; }
.h-spot { text-decoration: none; display: block; }
.h-spot:hover { text-decoration: none; }
.h-spot-img { aspect-ratio: 16 / 9; background: var(--card); border: 1px solid var(--line);
  /* A hatch, not a grey box: it has to read as "no photo yet", not as a bug. */
  background-image: repeating-linear-gradient(135deg, transparent 0 9px,
    var(--line) 9px 10px); }
.h-spot h3 { font-size: 29px; margin-top: var(--s-4); }
.h-spot .deck { margin-top: var(--s-3); max-width: 560px; }
.h-spot .byline { display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: var(--s-4); }
.h-bloghead { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-4); }
.h-blognav { display: flex; align-items: center; gap: var(--s-2); }
.h-blognav button { font-family: var(--mono); font-size: 17px; line-height: 1;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--ink-2); border: 1px solid var(--line-2);
  border-radius: 0; cursor: pointer; padding: 0; }
.h-blognav button:hover { border-color: var(--ink); color: var(--ink); }
.h-blognav button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.h-blognav .count { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  color: var(--muted); font-variant-numeric: tabular-nums; min-width: 34px;
  text-align: center; }
.h-allstories { display: inline-block; margin-top: var(--s-5); font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  text-decoration: none; }
.h-allstories:hover { color: var(--ink); }

.h-happened { border: 1px solid var(--line); }
.h-happened > .label { display: block; padding: var(--s-4); border-bottom: 1px solid var(--line); }
.h-happened a { display: block; padding: var(--s-4); border-bottom: 1px solid var(--line);
  text-decoration: none; }
.h-happened a:last-child { border-bottom: 0; }
.h-happened a:hover { background: var(--card); text-decoration: none; }
.h-happened .loz { white-space: nowrap; font-size: 9.5px; letter-spacing: .1em;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.h-happened .when { font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-left: 8px; }
.h-happened b { display: block; font-size: 14.5px; margin-top: 8px; letter-spacing: -.01em; }
.h-happened em { display: block; font-style: normal; font-size: 13px; color: var(--muted);
  margin-top: 3px; }

/* ---------- rankings + honours ---------- */
.h-rank { margin-top: var(--s-8); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4); }
.h-rankcard { border: 1px solid var(--line); padding: var(--s-5); text-decoration: none;
  display: flex; flex-direction: column; gap: var(--s-3); min-height: 168px; }
.h-rankcard:hover { border-color: var(--line-2); text-decoration: none; }
.h-rankcard h3 { font-size: 19px; }
.h-rankcard p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.h-rankcard .fig { margin-top: auto; font-family: var(--mono); font-size: 22px;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.h-honours { margin-top: var(--s-6); display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-4); }
.h-panel { border: 1px solid var(--line); padding: var(--s-5); }
.h-panel > .label { display: block; margin-bottom: var(--s-4); }
.h-panel a { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line); text-decoration: none; }
.h-panel a:last-of-type { border-bottom: 0; }
.h-panel a:hover { text-decoration: none; }
.h-panel .grade { width: 30px; height: 30px; font-size: 17px; flex: none; }
.h-panel .who { flex: 1 1 auto; min-width: 0; font-size: 14.5px; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-panel .metric { font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); flex: none; }

/* ---------- stat strip ---------- */
.h-stats { margin-top: var(--s-8); border-top: 1px solid var(--line); padding-top: var(--s-5);
  display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: baseline; }
.h-stats div { font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); }
.h-stats b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.h-stats .more { margin-left: auto; }

/* ---------- phone: a different page, not a narrower one ---------- */
@media (max-width: 900px) {
  .h-hero { grid-template-columns: minmax(0, 1fr); }
  .h-rank { grid-template-columns: 1fr 1fr; }
  .h-mid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .h-near { display: block; }
  .h-hero h1 { font-size: 30px; white-space: normal; }
  .h-hero { margin-top: var(--s-8); }
  .h-rank, .h-honours { grid-template-columns: minmax(0, 1fr); }
  .h-streak { flex-direction: column; gap: var(--s-3); }
  .h-finding { padding: var(--s-5); margin-top: var(--s-7); }
  .h-stats .more { margin-left: 0; }
}

.r-head { max-width: 720px; }
.r-kicker { font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  display: block; margin-bottom: var(--s-3); }
.r-head h1 { font-size: 40px; }
.r-head .deck { margin-top: var(--s-4); }

/* The pest family tabs: same page, same URL pattern, two datasets. */
.r-tabs { display: flex; gap: var(--s-5); margin-top: var(--s-6);
  border-bottom: 1px solid var(--line); }
.r-tabs a { font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
  padding-bottom: var(--s-3); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.r-tabs a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.r-tabs a:hover { color: var(--ink); text-decoration: none; }
.r-tabs em { font-style: normal; opacity: .65; }

.r-ranges { display: flex; gap: var(--s-2); margin-top: var(--s-5); flex-wrap: wrap; }
.r-ranges .chip { min-height: 38px; }

/* ---------- the ranked list ---------- */
.r-list { margin-top: var(--s-7); }
.r-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) 130px;
  gap: var(--s-4); padding: var(--s-5) 0; border-top: 1px solid var(--line);
  align-items: start; }
.r-row:last-child { border-bottom: 1px solid var(--line); }
.r-rank { font-family: var(--mono); font-size: 26px; color: var(--muted);
  font-variant-numeric: tabular-nums; line-height: 1; }
.r-body { min-width: 0; }
.r-name { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.r-name .grade { width: 34px; height: 34px; font-size: 19px; }
.r-name a, .r-name > span.n { font-size: 15px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; text-decoration: none; }
.r-name a:hover { text-decoration: underline; }
.r-sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); }
.r-quote { margin-top: var(--s-3); }
.r-quote q { quotes: none; display: block; font-size: 19px; letter-spacing: -.03em;
  line-height: 1.38; text-wrap: pretty; }
.r-attr { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-top: var(--s-3); }
.r-attr a { text-decoration: none; color: var(--muted); }
.r-attr a:hover { color: var(--ink); }
/* plain prose, for the pages where there is nothing ugly to quote */
.r-praise { margin: var(--s-3) 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-2);
  max-width: 640px; }
.r-tag { display: inline-flex; font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; padding: 4px 9px;
  border: 1px solid var(--line-2); color: var(--muted); margin-top: var(--s-3); }
.r-tag.strong { border-color: var(--ink); color: var(--ink); }

.r-metric { text-align: right; }
.r-metric b { display: block; font-family: var(--mono); font-size: 34px; font-weight: 400;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.r-metric span { display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 7px; }
/* Good news is allowed to be bigger, and green, because it is a grade-A figure. */
.r-good .r-metric b { font-size: 44px; color: var(--a); }

/* the good-mood variant: gaps instead of rules */
.r-good .r-row { border-top: 0; padding: 13px 0 13px; margin-bottom: var(--s-4); }
.r-good .r-row:last-child { border-bottom: 0; }

.r-empty { margin-top: var(--s-6); color: var(--muted); }
.r-others { margin-top: var(--s-8); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); }
.r-other { border: 1px solid var(--line); padding: var(--s-4); text-decoration: none; }
.r-other:hover { border-color: var(--line-2); text-decoration: none; }
.r-other b { display: block; font-size: 15px; letter-spacing: -.02em; }
.r-other span { display: block; font-size: 13px; color: var(--muted); margin-top: 6px;
  line-height: 1.45; }
.r-note { margin-top: var(--s-6); font-size: 13.5px; color: var(--muted); max-width: 640px; }

/* ---------- Hall of Fame ---------- */
.f-hero { text-align: center; max-width: 660px; margin: 0 auto; }
.f-kicker { display: flex; align-items: center; justify-content: center; gap: var(--s-4);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); }
.f-kicker::before, .f-kicker::after { content: ""; height: 1px; width: 46px;
  background: var(--line-2); }
.f-hero h1 { font-size: 66px; margin-top: var(--s-4); }
.f-hero .deck { max-width: 620px; margin: var(--s-4) auto 0; font-size: 16px; }

.f-grid { margin-top: var(--s-8); display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line);
  border: 1px solid var(--line); }
.f-cell { background: var(--bg); padding: var(--s-5); display: flex;
  flex-direction: column; gap: var(--s-3); }
.f-cell .grade { width: 56px; height: 56px; font-size: 31px; }
.f-cell h3 { font-size: 21px; letter-spacing: -.03em; }
.f-cell .where { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); }
.f-cell p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.f-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.f-cell .badge { font-size: 9.5px; padding: 4px 8px; }
.f-cell .see { margin-top: auto; padding-top: var(--s-3); font-family: var(--mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  text-decoration: none; }
.f-cell .see:hover { color: var(--ink); }

.f-band { margin-top: var(--s-8); border: 1px solid var(--line-2); padding: var(--s-6);
  text-align: center; }
.f-band h2 { font-size: 26px; }
.f-band p { margin: var(--s-3) auto 0; max-width: 520px; color: var(--muted); font-size: 15px; }
.f-band .btn { margin-top: var(--s-5); }

@media (max-width: 900px) {
  .f-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .r-head h1 { font-size: 30px; }
  .r-row { grid-template-columns: 34px minmax(0, 1fr); }
  .r-rank { font-size: 19px; }
  .r-metric { grid-column: 2; text-align: left; margin-top: var(--s-3); }
  .r-metric b { font-size: 26px; }
  .r-good .r-metric b { font-size: 32px; }
  .r-quote q { font-size: 16px; }
  .f-hero h1 { font-size: 38px; }
  .f-grid { grid-template-columns: 1fr; }
}

/* ---------- shared header ---------- */
.p2-head { max-width: 720px; }
.p2-head h1 { font-size: 38px; line-height: 1.05; }
.p2-head h1 .zip { display: block; font-family: var(--mono); font-size: 30px;
  font-weight: 400; letter-spacing: .02em; color: var(--muted); margin-top: 6px; }
.p2-head .deck { margin-top: var(--s-4); }

/* ---------- four-cell stat strip ---------- */
.p2-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line); margin-top: var(--s-6); }
.p2-stats div { padding: var(--s-4) var(--s-5); border-right: 1px solid var(--line); }
.p2-stats div:last-child { border-right: 0; }
.p2-stats .k { display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.p2-stats .v { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.03em;
  margin-top: 7px; font-variant-numeric: tabular-nums; }

/* ---------- the proportion bar ---------- */
/* One 26px bar, segmented by grade. The legend beneath carries the counts,
   because a colour band on its own tells a colour-blind reader nothing. */
.p2-bar { display: flex; height: 26px; margin-top: var(--s-6); overflow: hidden; }
.p2-bar span { display: block; }
.p2-bar .gA { background: var(--a); } .p2-bar .gB { background: var(--b); }
.p2-bar .gC { background: var(--c); } .p2-bar .gD { background: var(--d); }
.p2-bar .gF { background: var(--f); }
.p2-bar .gN { background: repeating-linear-gradient(135deg, transparent 0 5px,
  var(--line-2) 5px 6px); }
.p2-legend { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-3); }
.p2-legend span { display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); }
.p2-legend i { width: 10px; height: 10px; display: block; }
.p2-legend .gA { background: var(--a); } .p2-legend .gB { background: var(--b); }
.p2-legend .gC { background: var(--c); } .p2-legend .gD { background: var(--d); }
.p2-legend .gF { background: var(--f); }
.p2-legend .gN { border: 1px dashed var(--none-edge); }
.p2-legend b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- two panels ---------- */
.p2-panels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4);
  margin-top: var(--s-7); }
.p2-panel { border: 1px solid var(--line); padding: var(--s-5); }
.p2-panel > .label { display: block; margin-bottom: var(--s-4); }
.p2-panel a.row { display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.p2-panel a.row:last-of-type { border-bottom: 0; }
.p2-panel a.row:hover { text-decoration: none; }
.p2-panel .grade { width: 32px; height: 32px; font-size: 18px; }
.p2-panel .who { flex: 1 1 auto; min-width: 0; }
.p2-panel .who b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p2-panel .who span { display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.p2-empty { font-size: 14px; color: var(--muted); margin: 0; }

/* ---------- recent findings ---------- */
.p2-findings { margin-top: var(--s-8); }
.p2-finding { padding: var(--s-5) 0; border-top: 1px solid var(--line); }
.p2-finding:last-child { border-bottom: 1px solid var(--line); }
.p2-finding q { quotes: none; display: block; font-size: 20px; letter-spacing: -.03em;
  line-height: 1.38; text-wrap: pretty; }
.p2-finding .attr { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-top: var(--s-3);
  display: flex; flex-wrap: wrap; gap: 0 10px; }
.p2-finding .attr a { text-decoration: none; color: var(--muted); }
.p2-finding .attr a:hover { color: var(--ink); }

.p2-links { margin-top: var(--s-6); display: flex; gap: var(--s-4); flex-wrap: wrap; }

/* ---------- neighbourhood index ---------- */
.p2-grid { margin-top: var(--s-6); display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); }
.p2-cell { background: var(--bg); padding: var(--s-4); text-decoration: none; display: block; }
.p2-cell:hover { background: var(--card); text-decoration: none; }
.p2-cell b { display: block; font-size: 15px; letter-spacing: -.01em; }
.p2-cell .z { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  color: var(--muted); margin-top: 4px; }
.p2-cell .n { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-top: 8px; }

/* ---------- chains ---------- */
.c-table { width: 100%; border-collapse: collapse; }
.c-table th { padding: 0 var(--s-3) var(--s-3) 0; }
.c-table td { padding: 13px var(--s-3) 13px 0; border-bottom: 1px solid var(--line);
  vertical-align: middle; }
.c-table .grade { width: 24px; height: 24px; font-size: 13px; }
.c-name { font-size: 15px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; }
.c-name:hover { text-decoration: underline; }
.c-branch { display: flex; align-items: center; gap: 8px; min-width: 0; }
.c-branch span { font-size: 13px; color: var(--ink-2); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* the gap between the best and worst branch of one brand */
.c-spread { margin-top: var(--s-6); border: 1px solid var(--line); padding: var(--s-5); }
.c-spread-bar { display: flex; align-items: center; gap: var(--s-4); }
.c-spread-end { display: flex; flex-direction: column; align-items: center; gap: 8px;
  flex: none; }
.c-spread-end .grade { width: 46px; height: 46px; font-size: 25px; }
.c-spread-end span { font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); text-align: center; max-width: 130px; }
.c-spread-mid { flex: 1 1 auto; text-align: center; border-top: 1px solid var(--line-2);
  padding-top: var(--s-3); }
.c-spread-mid b { display: block; font-family: var(--mono); font-size: 30px; font-weight: 400;
  letter-spacing: -.03em; }
.c-spread-mid span { display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }

@media (max-width: 760px) {
  .p2-head h1 { font-size: 28px; }
  .p2-head h1 .zip { font-size: 22px; }
  .p2-stats { grid-template-columns: 1fr 1fr; }
  .p2-stats div { border-bottom: 1px solid var(--line); }
  .p2-stats div:nth-child(2n) { border-right: 0; }
  .p2-stats div:nth-last-child(-n+2) { border-bottom: 0; }
  .p2-panels { grid-template-columns: 1fr; }
  .p2-finding q { font-size: 16px; }
  .c-spread-bar { flex-direction: column; gap: var(--s-4); }
  .c-spread-mid { width: 100%; }
}

.v-note { margin-top: var(--s-6); border-left: 1px solid var(--line-2);
  padding-left: var(--s-4); max-width: 720px; }
.v-note .prose { margin: 0; }
.v-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.v-table th { padding: 0 var(--s-3) var(--s-3) 0; }
.v-table td { padding: 14px var(--s-3) 14px 0; border-bottom: 1px solid var(--line);
  vertical-align: top; }
.v-table th:first-child, .v-table td:first-child { width: 92px; }
.v-table th:nth-child(3), .v-table td:nth-child(3) { width: 130px; }
.v-table th:last-child, .v-table td:last-child { width: 110px; }
.v-code { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; }
.v-code a { text-decoration: none; }
.v-code a:hover { text-decoration: underline; }
.v-what { font-size: 15px; line-height: 1.45; }
.v-what a { text-decoration: none; }
.v-what a:hover { text-decoration: underline; }
.v-high { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-top: 6px; }

@media (max-width: 760px) {
  .v-table, .v-table tbody, .v-table tr, .v-table td { display: block; width: 100%; }
  .v-table thead { display: none; }
  .v-table tr { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
  .v-table td { padding: 0; border: 0; width: auto !important; }
  .v-table td + td { margin-top: 6px; }
  .v-table .num { text-align: left; font-size: 12px; color: var(--muted); }
}

/* ---------- discipline ledger ---------- */
.d-sorts { display: flex; gap: var(--s-2); margin-top: var(--s-5); flex-wrap: wrap; }
.d-table { width: 100%; border-collapse: collapse; }
.d-table th { padding: 0 var(--s-3) var(--s-3) 0; }
.d-table td { padding: 14px var(--s-3) 14px 0; border-bottom: 1px solid var(--line);
  vertical-align: top; }
.d-who { font-size: 15px; letter-spacing: -.01em; text-decoration: none; }
.d-who:hover { text-decoration: underline; }
.d-where { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-top: 5px; }
.d-when { font-family: var(--mono); font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.d-amount { text-align: right; font-family: var(--mono); font-size: 16px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- closures ---------- */
.x-list { margin-top: var(--s-7); }
.x-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--s-4);
  padding: var(--s-5) 0; border-top: 1px solid var(--line); align-items: start; }
.x-row:last-child { border-bottom: 1px solid var(--line); }
.x-row .grade { width: 48px; height: 48px; font-size: 26px; }
.x-head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.x-head a, .x-head b { font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  text-decoration: none; }
.x-head a:hover { text-decoration: underline; }
.x-meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-top: var(--s-3); }
.x-outcome { margin: var(--s-3) 0 0; font-size: 15px; color: var(--ink-2); max-width: 620px; }
.x-dur { text-align: right; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.x-dur b { display: block; font-size: 26px; font-weight: 400; letter-spacing: -.03em;
  color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- data downloads ---------- */
.dl-table td { padding: 16px var(--s-3) 16px 0; border-bottom: 1px solid var(--line); }
.dl-name { font-size: 15.5px; letter-spacing: -.01em; }
.dl-name .verbatim { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; border: 1px solid var(--ink); color: var(--ink);
  padding: 2px 6px; margin-left: 9px; white-space: nowrap; }
.dl-name span.d { display: block; font-size: 13px; color: var(--muted); margin-top: 5px;
  line-height: 1.45; }
.dl-links { text-align: right; white-space: nowrap; font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; }
.dl-links a { text-decoration: none; }
.dl-links a:hover { text-decoration: underline; }
.dl-links .sep { color: var(--line-2); margin: 0 8px; }
.dl-blocks { margin-top: var(--s-8); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-5); }
.dl-block > .label { display: block; margin-bottom: var(--s-3); }
.dl-block p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }

/* ---------- alerts ---------- */
.al-wrap { max-width: 640px; }
.al-wrap h1 { font-size: 32px; }
/* A real subject line from a real send. The point is that we never write it. */
.al-specimen { margin-top: var(--s-6); border: 1px solid var(--line-2); padding: var(--s-5); }
.al-specimen q { quotes: none; display: block; font-size: 19px; letter-spacing: -.02em;
  line-height: 1.4; }
.al-specimen .cap { display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: var(--s-4); }
.al-form { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-6); }
.al-form input { font-family: var(--font); font-size: 15px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line-2); border-radius: 0;
  padding: 12px var(--s-4); min-height: 48px; min-width: 0; }
.al-form input[type="email"] { flex: 1 1 260px; }
.al-form input[name="zip"] { flex: 0 1 130px; font-family: var(--mono); letter-spacing: .1em; }
.al-form input:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
.al-deal { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5);
  margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.al-deal > div > .label { display: block; margin-bottom: var(--s-3); }
.al-deal ul { margin: 0; padding-left: 1.1em; font-size: 14.5px; line-height: 1.6;
  color: var(--ink-2); }
.al-deal li { margin-bottom: 7px; }
.al-deal li::marker { color: var(--line-2); }

.al-result { max-width: 460px; margin: var(--s-8) auto; text-align: center;
  border: 1px solid var(--line); padding: var(--s-7) var(--s-5); }
.al-mark { width: 34px; height: 34px; margin: 0 auto; display: flex; align-items: center;
  justify-content: center; border: 1px solid var(--ink); font-size: 17px; }
.al-result h1 { font-size: 24px; margin-top: var(--s-5); }
.al-result p { margin: var(--s-3) 0 0; font-size: 15px; color: var(--ink-2); }
.al-result .btn { margin-top: var(--s-5); }

/* ---------- about maddie ---------- */
.m2-head { display: flex; gap: var(--s-5); align-items: flex-start; }
.m2-mark { flex: none; display: block; }
@media (max-width: 560px) {
  .m2-head { flex-direction: column; gap: var(--s-4); }
  .m2-mark { width: 84px; height: 82px; }
}

/* ---------- blog ---------- */
.b2-post { max-width: 640px; }
.b2-post h1 { font-size: 44px; }
.b2-deck { font-size: 19px; line-height: 1.5; color: var(--ink-2); margin: var(--s-4) 0 0; }
.b2-byline { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.b2-hero { aspect-ratio: 16 / 9; border: 1px solid var(--line); margin-top: var(--s-6);
  background-image: repeating-linear-gradient(135deg, transparent 0 9px,
    var(--line) 9px 10px); }
.b2-body { max-width: 640px; margin-top: var(--s-6); font-size: 19px; line-height: 1.75; }
.b2-body p { margin: 0 0 var(--s-5); }
.b2-body h2 { font-size: 26px; margin: var(--s-7) 0 var(--s-4); }
.b2-body h3 { font-size: 20px; margin: var(--s-6) 0 var(--s-3); }
.b2-body ul, .b2-body ol { padding-left: 1.2em; margin: 0 0 var(--s-5); }
.b2-body li { margin-bottom: var(--s-3); }
.b2-body li::marker { color: var(--line-2); }
.b2-body blockquote { margin: var(--s-6) 0; padding-left: var(--s-4);
  border-left: 3px solid var(--ink); font-size: 24px; line-height: 1.4;
  letter-spacing: -.03em; }
.b2-body blockquote p { margin: 0; }
.b2-body img { max-width: 100%; height: auto; }
.b2-body code { font-family: var(--mono); font-size: .88em; }

/* the evidence card, dropped where the argument needs it */
.b2-card { display: flex; gap: var(--s-4); align-items: flex-start; border: 1px solid var(--line);
  padding: var(--s-4); margin: var(--s-6) 0; text-decoration: none; }
.b2-card:hover { text-decoration: none; border-color: var(--line-2); }
.b2-card .grade { width: 56px; height: 56px; font-size: 31px; }
.b2-card b { display: block; font-size: 17px; letter-spacing: -.02em; }
.b2-card .addr { display: block; font-size: 14px; color: var(--ink-2); margin-top: 5px; }
.b2-card .see { display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: var(--s-3); }

.b2-disclosure { max-width: 640px; margin-top: var(--s-8); padding-top: var(--s-5);
  border-top: 1px solid var(--line); font-size: 14px; line-height: 1.6; color: var(--muted); }

/* blog index */
.b2-list { margin-top: var(--s-7); }
.b2-item { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-5);
  padding: var(--s-5) 0; border-top: 1px solid var(--line); text-decoration: none; }
.b2-item:last-child { border-bottom: 1px solid var(--line); }
.b2-item:hover { text-decoration: none; }
.b2-thumb { aspect-ratio: 16 / 9; border: 1px solid var(--line);
  background-image: repeating-linear-gradient(135deg, transparent 0 7px,
    var(--line) 7px 8px); }
.b2-item h2 { font-size: 24px; }
.b2-item p { margin: var(--s-3) 0 0; font-size: 15px; color: var(--ink-2); line-height: 1.5;
  max-width: 560px; }
.b2-item .when { display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: var(--s-3); }

@media (max-width: 760px) {
  .b2-post h1 { font-size: 30px; }
  .b2-deck { font-size: 17px; }
  .b2-body { font-size: 17px; }
  .b2-body blockquote { font-size: 20px; }
  .b2-item { grid-template-columns: 1fr; }
  .al-deal { grid-template-columns: 1fr; }
  .x-row { grid-template-columns: 40px minmax(0, 1fr); }
  .x-row .grade { width: 40px; height: 40px; font-size: 22px; }
  .x-dur { grid-column: 2; text-align: left; margin-top: var(--s-3); }
  .x-dur b { font-size: 20px; }
  .d-table, .d-table tbody, .d-table tr, .d-table td { display: block; width: 100%; }
  .d-table thead { display: none; }
  .d-table tr { padding: var(--s-4) 0; border-bottom: 1px solid var(--line);
    position: relative; }
  .d-table td { padding: 0; border: 0; }
  .d-table td + td { margin-top: 5px; }
  .d-amount { text-align: left; margin-top: var(--s-3) !important; }
  .dl-table tr { display: block; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
  .dl-table td { display: block; padding: 0; border: 0; }
  .dl-links { text-align: left; margin-top: var(--s-3); }
}

main.bare { padding: 0; }

/* The map fills whatever the chrome leaves, rather than a subtracted constant.
   The constant was 150px and went stale the moment the header logo grew. */
body:has(main.bare) { display: flex; flex-direction: column; min-height: 100dvh; }
main.bare { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

.m-bar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--line); }
.m-bar h1 { font-size: 17px; letter-spacing: -.03em; margin-right: auto; }
.m-bar input { font-family: var(--font); font-size: 14px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line-2); border-radius: 0;
  padding: 10px var(--s-3); min-height: 40px; min-width: 0; flex: 0 1 210px; }
.m-bar input:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
.m-bar .btn { padding: 10px 14px; min-height: 40px; }
.m-status { font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); flex-basis: 100%; }

/* Scoped to the bare map page — Near Me reuses the same id inside the normal
   layout, and an unscoped id selector would size its map too. dvh rather than
   vh on the wrapper above: mobile Safari's toolbar makes vh wrong by ~80px. */
main.bare #map { flex: 1 1 auto; min-height: 360px; width: 100%;
  background: var(--map-fill); }

.m-foot { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center;
  padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
.m-foot .grow { margin-left: auto; }

/* ---------- pins ---------- */
/* A grade square on a stem, anchored at the stem's base, so the square sits
   above the point rather than on it. */
.pin { display: flex; flex-direction: column; align-items: center; }
.pin b { width: 30px; height: 30px; display: flex; align-items: center;
  justify-content: center; font-family: var(--font); font-weight: 700; font-size: 16px;
  border: 2px solid var(--bg); }
.pin i { width: 2px; height: 10px; background: var(--bg); }
.pin.gA b { background: var(--a); color: var(--a-ink); }
.pin.gB b { background: var(--b); color: var(--b-ink); }
.pin.gC b { background: var(--c); color: var(--c-ink); }
.pin.gD b { background: var(--d); color: var(--d-ink); }
/* F reads first at a glance, deliberately */
.pin.gF b { background: var(--f); color: var(--f-ink); width: 34px; height: 34px;
  font-size: 18px; }
.pin.gN b { background: var(--bg); color: var(--muted); border: 2px dashed var(--none-edge);
  font-family: var(--mono); font-size: 8.5px; }

/* ---------- popup, de-Leafletified ---------- */
.leaflet-popup-content-wrapper { background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 0; box-shadow: none; }
.leaflet-popup-content { margin: 0; width: 250px !important; }
.leaflet-popup-tip { background: var(--bg); border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2); box-shadow: none; }
.leaflet-popup-close-button { color: var(--muted) !important; font-weight: 400; }
.pop { padding: 14px 15px; display: flex; flex-direction: column; gap: 9px; }
.pop .row { display: flex; align-items: center; gap: 11px; }
.pop .grade { width: 32px; height: 32px; font-size: 17px; }
.pop .nm { font-size: 14.5px; font-weight: 600; letter-spacing: -.025em; }
.pop .sc, .pop .dt { font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.pop .ad { font-size: 12.5px; color: var(--muted); }
.pop .cta { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; background: var(--ink); color: var(--bg); padding: 9px 0;
  text-align: center; text-decoration: none; }
.pop .cta:hover { text-decoration: none; opacity: .9; }

/* ---------- controls ---------- */
.leaflet-bar { border: 1px solid var(--line-2); border-radius: 0; box-shadow: none; }
.leaflet-bar a { background: var(--bg); color: var(--ink);
  border-bottom: 1px solid var(--line); border-radius: 0 !important;
  width: 32px; height: 32px; line-height: 32px; }
.leaflet-bar a:hover { background: var(--card); color: var(--ink); }
.m-legend { border: 1px solid var(--line-2); background: var(--bg); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px; }
.m-legend h4 { margin: 0; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  color: var(--muted); font-weight: 400; text-transform: uppercase; }
.m-legend div { display: flex; align-items: center; gap: 8px; font-family: var(--mono);
  font-size: 10.5px; color: var(--ink-2); }
.m-legend .sw { width: 14px; height: 14px; flex: none; }
.m-legend .sw.gA { background: var(--a); } .m-legend .sw.gB { background: var(--b); }
.m-legend .sw.gC { background: var(--c); } .m-legend .sw.gD { background: var(--d); }
.m-legend .sw.gF { background: var(--f); }
.m-legend .sw.gN { border: 1px dashed var(--none-edge); }
.leaflet-control-attribution { background: var(--bg) !important; color: var(--muted) !important;
  font-family: var(--mono); font-size: 9px; }
.leaflet-control-attribution a { color: var(--ink) !important; }

/* The basemap recedes so the pins are the only colour. Inverting is a dark-mode
   trick — in light mode it would produce a negative of the world. */
:root:not([data-theme="light"]) .tiles {
  filter: grayscale(1) invert(1) brightness(.92) contrast(.9);
}
[data-theme="light"] .tiles { filter: grayscale(1) contrast(.92) brightness(1.04); }

/* ---------- the list beneath, for Near Me ---------- */
.m-list { padding: var(--s-5); border-top: 1px solid var(--line); }
.m-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--s-3);
  align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--line);
  text-decoration: none; }
.m-row:hover { text-decoration: none; }
.m-row .grade { width: 40px; height: 40px; font-size: 22px; }
.m-row b { display: block; font-size: 15px; letter-spacing: -.01em; }
.m-row em { display: block; font-style: normal; font-size: 13px; color: var(--muted);
  margin-top: 3px; }
.m-row .dist { font-family: var(--mono); font-size: 12px; color: var(--muted);
  white-space: nowrap; }

/* ---------- near me ---------- */
.n-filter { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-6);
  flex-wrap: wrap; }
.n-filter .seg button { padding: 9px 13px; min-height: 40px; }
.n-empty { margin-top: var(--s-5); font-size: 15px; color: var(--ink-2);
  line-height: 1.55; max-width: 620px; }

.n-list { margin-top: var(--s-4); }
.n-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: var(--s-4);
  align-items: center; padding: var(--s-4) 0; border-bottom: 1px solid var(--line);
  text-decoration: none; }
.n-row:first-child { border-top: 1px solid var(--line); }
.n-row:hover { text-decoration: none; }
.n-row .grade { width: 46px; height: 46px; font-size: 25px; }
.n-row .who { min-width: 0; }
.n-row .who b { display: block; font-size: 16px; letter-spacing: -.02em; }
.n-row .who em { display: block; font-style: normal; font-size: 13.5px; color: var(--muted);
  margin-top: 4px; }
.n-row .dist { font-family: var(--mono); font-size: 22px; color: var(--ink-2);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.n-row .dist span { display: block; font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.n-map { height: 460px; border: 1px solid var(--line); background: var(--map-fill); }
.n-you { color: var(--ink); }

@media (max-width: 560px) {
  .m-bar h1 { flex-basis: 100%; margin-right: 0; }
  .m-bar input { flex: 1 1 auto; }
  main.bare #map { min-height: 320px; }
}