/* ═══════════════════════════════════════════════════════════════════════════
   HygieneCheck

   A light, editorial design: warm paper, a serif headline, generous space. The
   register matters commercially — a site monetised by advertising is judged by
   a human reviewer who is deciding whether this is a publication or a database
   with a stylesheet on it. Everything below is chosen to answer "publication".

   Fonts are self-hosted (96KB, SIL Open Font License). The site makes no
   third-party requests at all, which keeps it fast on a phone in a doorway —
   which is where it is actually read.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Playfair Display — headlines. One variable file covers 400–600. */
@font-face{
  font-family:'Playfair Display';
  src:url('/fonts/playfair-display.woff2') format('woff2');
  font-weight:400 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Playfair Display';
  src:url('/fonts/playfair-display-italic.woff2') format('woff2');
  font-weight:400 600; font-style:italic; font-display:swap;
}
/* Instrument Sans — body. */
@font-face{
  font-family:'Instrument Sans';
  src:url('/fonts/instrument-sans.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}

:root{
  /* Warm paper, not white. White is a screen; paper is a page. */
  --bg:#faf9f7;
  --panel:#ffffff;
  --panel2:#f4f2ee;
  --line:#e5e1d8;
  --line-strong:#d5cfc2;

  --ink:#1a1a18;
  --muted:#6b6b66;          /* 5.09:1 on paper — WCAG AA */

  /* Deep forest green. Restrained; it is punctuation, not decoration. */
  --brand:#1f4536;
  --brand2:#2b5f49;
  --brand-wash:#eef2ef;

  /* Rating colours. All ≥5:1 on paper — a rating must never be decorative. */
  --good:#0f7a4f;   --goodbg:#e8f3ed;
  --ok:#8a5a00;     --okbg:#faf1e0;
  --poor:#b3261e;   --poorbg:#fbeae9;
  --none:#6b6b66;   --nonebg:#f0eeea;

  --radius:12px;
  --serif:'Playfair Display',Georgia,'Iowan Old Style','Palatino Linotype',Palatino,serif;
  --sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px}

.skip-link{position:absolute;left:-999px}
.skip-link:focus{left:8px;top:8px;background:var(--brand);color:#fff;padding:8px 14px;border-radius:8px;z-index:20}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── headings: serif, and allowed to breathe ─────────────────────────────── */
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;color:var(--ink);
  /* Playfair defaults to oldstyle figures, where a 0 dips below the baseline. On this site a digit
     is frequently the subject of the sentence ("What does a 0 rating mean?"), so it must sit on the
     line and match the caps around it. */
  font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1}
h1{font-size:clamp(2rem,4.2vw,3rem);line-height:1.12;margin:0 0 14px}
h2{font-size:clamp(1.4rem,2.4vw,1.75rem);line-height:1.25;margin:34px 0 12px}
h3{font-size:1.15rem;margin:0 0 8px}
/* The one typographic gesture: an italic serif accent, in the brand colour. */
.accent{font-style:italic;color:var(--brand)}

/* ── nav ─────────────────────────────────────────────────────────────────── */
.nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 28px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:rgba(250,249,247,.88);backdrop-filter:blur(8px);z-index:10;
}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:600;
  font-size:1.2rem;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand .mark{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;
  background:var(--brand);color:#fff;font-family:var(--sans);font-weight:700;font-size:.72rem;
  letter-spacing:.02em}
.nav nav{display:flex;gap:26px}
.nav nav a{color:var(--muted);font-weight:500;font-size:.94rem}
.nav nav a:hover{color:var(--ink);text-decoration:none}

main{max-width:940px;margin:0 auto;padding:34px 22px 90px}
main.narrow{max-width:760px}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{text-align:center;padding:56px 0 44px}
.hero h1{font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:1.06;margin-bottom:18px}
.hero .sub{color:var(--muted);font-size:1.08rem;max-width:540px;margin:0 auto 30px;line-height:1.6}

.searchbar{display:flex;gap:10px;max-width:620px;margin:0 auto}
/* autocomplete.js wraps the input in a positioned div at runtime, so THAT — not the input — becomes
   the flex item. Without this the input collapses to its own content width. */
.searchbar .suggest-wrap,.searchbar > div{position:relative;flex:1 1 auto;min-width:0}
.searchbar input{
  width:100%;padding:16px 20px;border-radius:10px;
  border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);
  font-family:var(--sans);font-size:1rem;
}

/* the type-ahead dropdown: floats over content, so it needs its own ground */
.suggest{position:absolute;z-index:30;left:0;right:0;top:100%;margin:8px 0 0;padding:6px;
  list-style:none;max-height:340px;overflow:auto;text-align:left;
  background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;
  box-shadow:0 8px 24px rgba(26,26,24,.10)}
.suggest[hidden]{display:none}
.suggest li{margin:0}
.suggest a{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 12px;border-radius:7px;border:0}
.suggest a:hover,.suggest a.is-active{background:var(--brand-wash);text-decoration:none}
.searchbar input::placeholder{color:#9a9a93}
.searchbar input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash)}
.searchbar button{
  padding:16px 28px;border:0;border-radius:10px;background:var(--brand);color:#fff;
  font-family:var(--sans);font-weight:600;font-size:.98rem;cursor:pointer;white-space:nowrap;
}
.searchbar button:hover{background:#173428}

/* Example chips: they answer "what do I even type here?" */
.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:14px 0 0}
.chip{
  padding:6px 14px;border:1px solid var(--line-strong);border-radius:100px;
  background:transparent;color:var(--muted);font-size:.85rem;cursor:pointer;
  font-family:var(--sans);
}
.chip:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}

/* A quiet line of concrete numbers. Trust, without shouting. */
.hero-stat{color:var(--muted);font-size:.88rem;margin-top:26px;
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;align-items:baseline}
.hero-stat strong{color:var(--ink);font-weight:600}
.hero-stat .dot{color:var(--line-strong)}

/* ── the rating badge + pills ────────────────────────────────────────────── */
.rating-badge{
  display:inline-grid;place-items:center;min-width:62px;height:62px;border-radius:12px;
  font-family:var(--sans);font-weight:700;font-size:1.7rem;color:#fff;flex:0 0 auto;
}
.rating-badge.good{background:var(--good)}
.rating-badge.ok{background:var(--ok)}
.rating-badge.poor{background:var(--poor)}
.rating-badge.none{background:var(--none)}

.pill{display:inline-block;padding:4px 11px;border-radius:100px;font-size:.76rem;font-weight:600;
  white-space:nowrap;font-family:var(--sans)}
.pill.good{background:var(--goodbg);color:var(--good)}
.pill.ok{background:var(--okbg);color:var(--ok)}
.pill.poor{background:var(--poorbg);color:var(--poor)}
.pill.none{background:var(--nonebg);color:var(--none)}

/* ── cards ───────────────────────────────────────────────────────────────── */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 26px;margin:22px 0}
.card h2{margin:0 0 12px;font-size:1.3rem}
.card h3{margin:0 0 10px}

.muted{color:var(--muted)} .small{font-size:.86rem}

/* ── result lists ────────────────────────────────────────────────────────── */
.results{list-style:none;padding:0;margin:22px 0}
.results li{margin:0 0 8px}
.results a{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:15px 18px;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.results a:hover{border-color:var(--brand);text-decoration:none;box-shadow:0 1px 3px rgba(26,26,24,.05)}
.r-name{font-weight:600;color:var(--ink)}
.r-meta{color:var(--muted);font-size:.85rem;margin-top:2px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:18px 0}
.section .grid{grid-template-columns:repeat(4,1fr)}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px}
.tile:hover{border-color:var(--line-strong)}
.tile .r-name{display:block}
.tile p{margin:10px 0 0}

.section h2{margin:36px 0 14px}
.stat{display:inline-block;background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  padding:9px 15px;margin:4px 8px 4px 0;font-weight:600;font-size:.9rem}

/* ── venue header ────────────────────────────────────────────────────────── */
.venue-head{display:flex;gap:20px;align-items:center;margin:10px 0}
.venue-head .rating-badge{min-width:82px;height:82px;font-size:2.3rem}
.venue-title h1{margin:0;font-size:clamp(1.5rem,3vw,2.1rem)}
.venue-title .muted{color:var(--muted);font-size:.94rem;margin:4px 0 0}

/* ── long-form prose ─────────────────────────────────────────────────────── */
.prose p,.prose li{color:#33332f;line-height:1.72}
.prose h2{margin-top:38px}
.prose .source{font-size:.78rem;color:var(--muted);margin:-4px 0 24px;font-style:italic}
.lede{font-size:1.16rem;line-height:1.68;color:#33332f;margin:16px 0 6px}
.crumbs{color:var(--muted);font-size:.84rem;margin:6px 0 18px}
.crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--brand)}

.banner{border-radius:10px;padding:13px 17px;margin:18px 0;font-size:.92rem;border:1px solid}
.banner.warn{background:var(--okbg);border-color:#e5c98a;color:#6b4600}

/* ── rating distribution ─────────────────────────────────────────────────── */
table.dist{width:100%;border-collapse:collapse;margin:16px 0 6px}
table.dist caption{caption-side:top;text-align:left;color:var(--muted);font-size:.84rem;padding-bottom:12px}
table.dist th{text-align:left;font-family:var(--sans);font-weight:600;width:2rem;padding:6px 0;color:var(--ink)}
table.dist td{padding:6px;vertical-align:middle}
table.dist .barcell{width:100%}
table.dist .bar{display:block;height:12px;border-radius:6px;background:var(--brand);min-width:3px}
table.dist tr:nth-child(1) .bar{background:var(--good)}
table.dist tr:nth-child(2) .bar{background:var(--good);opacity:.62}
table.dist tr:nth-child(3) .bar{background:var(--ok)}
table.dist tr:nth-child(4) .bar,table.dist tr:nth-child(5) .bar,table.dist tr:nth-child(6) .bar{background:var(--poor)}
table.dist .num,table.dist .pct{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
table.dist .pct{width:3.2rem}
table.dist .you{color:var(--brand);font-weight:600;white-space:nowrap;font-size:.84rem}
table.dist tr.is-this th,table.dist tr.is-this .num,table.dist tr.is-this .pct{color:var(--ink);font-weight:600}

/* ── sub-scores ──────────────────────────────────────────────────────────── */
.scores{list-style:none;padding:0;margin:0 0 16px}
.scores li{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:12px 0;border-bottom:1px solid var(--line)}
.scores li:last-child{border-bottom:0}
.scores .s-label{color:var(--ink)}
.scores .s-band{font-weight:600;font-size:.8rem;padding:4px 11px;border-radius:100px;white-space:nowrap}
.scores li.good .s-band{background:var(--goodbg);color:var(--good)}
.scores li.ok .s-band{background:var(--okbg);color:var(--ok)}
.scores li.poor .s-band{background:var(--poorbg);color:var(--poor)}
.scores li.none .s-band{background:var(--nonebg);color:var(--none)}

/* ── tables ──────────────────────────────────────────────────────────────── */
/* A wide table must scroll inside its own box, never take the page with it. Hiding columns at a
   breakpoint is fragile: the "second column" is Distance on a venue page and Type on an area page,
   so any rule that targets nth-child(2) hides something different depending on where you are. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:14px}
table.nearby{width:100%;border-collapse:collapse;margin-top:14px;font-size:.92rem}
table.nearby th,table.nearby td{white-space:nowrap}
table.nearby td:first-child,table.nearby th:first-child{white-space:normal;min-width:11rem}
table.nearby th{text-align:left;color:var(--muted);font-weight:600;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.06em;padding:8px 12px 8px 0;border-bottom:1px solid var(--line)}
table.nearby td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);vertical-align:middle}
table.nearby tr:last-child td{border-bottom:0}
.nearby-type{display:block;margin-top:2px}

/* ── right to reply ──────────────────────────────────────────────────────── */
.reply blockquote{margin:0 0 12px;padding:14px 18px;border-left:3px solid var(--brand);
  background:var(--panel2);border-radius:0 8px 8px 0;color:#33332f;font-style:italic}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq details{border-bottom:1px solid var(--line);padding:2px 0}
.faq details:last-of-type{border-bottom:0}
.faq summary{cursor:pointer;padding:14px 0;font-weight:600;color:var(--ink);list-style:none;
  display:flex;gap:10px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'+';color:var(--brand);font-weight:600;width:.9rem;flex:0 0 auto}
.faq details[open] summary::before{content:'–'}
.faq details p{margin:0 0 16px 1.9rem;color:#33332f;line-height:1.7}

/* ── hubs and lists ──────────────────────────────────────────────────────── */
.region h2{font-size:1.15rem;margin:34px 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.council-list{list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2px 20px}
.council-list li{padding:8px 0;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.council-list a{font-weight:500}

.guide-list .r-name{font-size:1.02rem;font-weight:600;font-family:var(--serif)}
.guide-list .r-meta{display:block;margin-top:5px;color:var(--muted);font-size:.88rem;line-height:1.55}
.guide-list li a{align-items:flex-start}
.guide-list.plain{list-style:none;padding:0;margin:0}
.guide-list.plain li{padding:12px 0;border-bottom:1px solid var(--line)}
.guide-list.plain li:last-child{border-bottom:0}
.guide-list.plain a{display:block}
.guide-list.plain a:hover{text-decoration:none}
.guide-list.plain a:hover .r-name{text-decoration:underline}

.region-teasers{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px 26px;margin-top:16px}
.region-teaser h3{font-family:var(--sans);font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);margin:0 0 10px;font-weight:600}
.teaser-links{list-style:none;padding:0;margin:0}
.teaser-links li{padding:3px 0}
.teaser-links a{font-size:.92rem}

/* ── ad slots: neutral placeholder in dev, real unit when adsenseOn ──────── */
.ad-slot{margin:30px 0;min-height:90px;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--line-strong);border-radius:10px;color:#a8a8a1;font-size:.74rem;
  letter-spacing:.06em;text-transform:uppercase;background:var(--panel2)}

/* ── footer: the site's real index ───────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:44px 22px 34px;color:var(--muted);
  font-size:.85rem;line-height:1.65;background:var(--panel2)}
.footer-grid{max-width:940px;margin:0 auto 32px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:28px 32px}
.footer-col h2{font-family:var(--sans);font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink);margin:0 0 12px;font-weight:600}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li{padding:4px 0}
.footer-col a{color:var(--muted);font-weight:400}
.footer-col a:hover{color:var(--brand)}
.footer-legal{max-width:720px;margin:0 auto;text-align:center;font-size:.78rem;
  padding-top:24px;border-top:1px solid var(--line)}
/* kept for any template still using the old flat list */
.footer-links{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.footer-links a{color:var(--muted);font-weight:500}
.footer-links a:hover{color:var(--ink)}

/* ── mobile ──────────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .section .grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  main{padding:22px 18px 64px}
  .hero{padding:30px 0 28px}
  /* Four nav links + the brand overflow a 390px viewport on one line, and a sticky
     header that scrolls sideways drags the whole page with it. */
  .nav{padding:12px 18px;flex-wrap:wrap;gap:8px 0}
  .nav .brand{flex:0 0 auto}
  .nav nav{gap:18px;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav nav::-webkit-scrollbar{display:none}
  .nav nav a{white-space:nowrap;font-size:.88rem}
  .searchbar{flex-direction:column}
  .searchbar input,.searchbar button{width:100%}
  .section .grid{grid-template-columns:1fr}
  .venue-head{gap:14px}
  .venue-head .rating-badge{min-width:60px;height:60px;font-size:1.7rem}
  .results a{flex-wrap:wrap}
  .region-teasers{grid-template-columns:1fr 1fr}
  .scores li{flex-direction:column;align-items:flex-start;gap:6px}
  table.dist .you{display:none}
  /* Tables scroll inside .table-scroll rather than having columns hidden — see the note above. */
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
/* chains table: numeric columns tabular so the eye can scan a column of averages */
table.chains-table .num{text-align:right;font-variant-numeric:tabular-nums}
table.chains-table td:first-child{min-width:9rem}

/* ── the revenue path: signup, plans, watchlist ──────────────────────────── */
.signup .searchbar{max-width:none;margin:8px 0 14px}
.btn,.btn-secondary,.btn-quiet{display:inline-block;font-family:var(--sans);font-weight:600;
  border-radius:10px;cursor:pointer;border:1px solid transparent;font-size:.95rem}
.btn{background:var(--brand);color:#fff;padding:13px 24px}
.btn:hover{background:#173428;text-decoration:none;color:#fff}
.btn-secondary{background:transparent;color:var(--brand);border-color:var(--line-strong);padding:13px 24px}
.btn-secondary:hover{border-color:var(--brand);text-decoration:none}
.btn-quiet{background:transparent;color:var(--muted);border:0;padding:6px 0;font-size:.82rem;
  text-decoration:underline;text-underline-offset:2px}
.btn-quiet:hover{color:var(--poor)}
.inline-form{display:inline-block;margin:6px 10px 0 0}

.plans{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:28px 0}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px}
.plan-featured{border-color:var(--brand);box-shadow:0 2px 14px rgba(31,69,54,.07)}
.plan h2{margin:0 0 6px}
.plan-price{font-family:var(--serif);font-size:2.2rem;margin:0 0 4px;line-height:1.1}
.plan-price span{font-family:var(--sans);font-size:.9rem;font-weight:400}
.plan ul{list-style:none;padding:0;margin:18px 0 22px}
.plan li{padding:7px 0;border-bottom:1px solid var(--line)}
.plan li:last-child{border-bottom:0}
.plan-status .pill{margin-right:8px}

.results li{display:flex;align-items:center;gap:14px}
.results li > a{flex:1 1 auto}

@media (max-width:640px){ .plans{grid-template-columns:1fr} }
/* the watch CTA and the owner CTA: present, never shouty */
.watch-cta .searchbar{max-width:none;margin:14px 0 10px}
.owner-cta{border-left:3px solid var(--ok);background:var(--okbg)}
.owner-cta h2{margin-top:0}
.owner-cta ul{margin:14px 0}
.owner-cta li{padding:5px 0}

/* Affiliate promo blocks. Deliberately quiet and clearly labelled: an ad the reader can tell is an ad,
   next to relevant content but never dressed up as the site's own advice. */
.promo{border:1px dashed var(--line);background:transparent}
.promo-label{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 .4rem}
.promo a{color:var(--accent);font-weight:600}
.promo-inline{margin-top:.6rem}
.promo-inline .promo-label{display:inline;text-transform:uppercase;font-size:.72rem}

/* Sortable table headers: a click target with a direction arrow. Enhanced by sortable.js; with no JS
   the headers are plain text and the table keeps its server order. */
.sortable th.th-sortable{cursor:pointer;user-select:none;white-space:nowrap;position:relative}
.sortable th.th-sortable:hover{color:var(--accent)}
.sortable th.th-sortable:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sortable th.th-sortable::after{content:"\2195";opacity:.35;margin-left:.35em;font-size:.85em}
.sortable th.sorted-asc::after{content:"\2191";opacity:1}
.sortable th.sorted-desc::after{content:"\2193";opacity:1}