/* FONTS: self-hosted by fetch-fonts.js, do not hand-edit */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/fraunces-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/fraunces-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/fraunces-600-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/fraunces-600-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/fraunces-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/fraunces-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/fraunces-900-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/fraunces-900-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/dm-sans-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/dm-sans-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/dm-sans-500-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/dm-sans-500-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/dm-sans-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/dm-sans-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/space-mono-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/space-mono-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/space-mono-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/space-mono-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* END FONTS */
:root{
  /* LOCKED at Phase 4, signed off by Chad off a rendered hero preview.
     Sub-direction: editorial-navy-paper, cool-paper variant.
     Accent split produced by: node derive-accent.js "#046A38" "#F7F8F7"
     Verified: --accent-deep 6.31:1 as text on --bg, --accent-ink 4.60:1 on the fill. */
  --bg: #f7f8f7;          /* cool paper, the dominant surface */
  --surface: #ffffff;     /* cards and raised panels */
  --surface-2: #eceeec;   /* inset wells, image placeholders */
  --ink-block: #14181a;   /* the full-bleed dark band */
  --text: #16191a;        /* near-black ink */
  --text-dim: #5c6360;
  --text-on-dark: #f2f5f3;
  --dim-on-dark: #9fa9a4;
  --border: 1px solid #dfe3e0;
  /* the accent carries ONE meaning: this is the verdict. Never decoration. */
  --accent: #046a38;
  --accent-ink: #c3dbcf;
  --accent-deep: #046a38;
  --accent-bright: #31855c; /* decorative pop ONLY, must be aria-hidden */
  --marker: #f5d547;        /* highlighter underlay, one phrase per section max */
  /* type: self-hosted at Phase 6, no render-blocking Google Fonts link */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
  /* type scale, ratio 1.333. Magazine contrast: the display runs large. */
  --step-0: 1rem; --step-1: 1.333rem; --step-2: 1.777rem;
  --step-3: 2.369rem; --step-4: 3.157rem; --step-5: 4.209rem; --step-6: 5.4rem;
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2.5rem; --s-5:4rem; --s-6:6rem;
  /* section rhythm, tightened 2026-08-19 after comparing rendered page heights.
     Kept as tokens so the vertical beat is set in one place, not per component. */
  --s-sec:3rem; --s-sec-lg:4rem;
  --radius: 8px;
  --shadow: 0 18px 50px -20px rgba(20,24,26,.18);
  --shadow-lg: 0 40px 80px -24px rgba(20,24,26,.4);
  --max: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); line-height:1.6;
}
img{ display:block; max-width:100%; height:auto; } /* height:auto is NOT optional (CLS) */
picture{ display:contents; }
h1,h2,h3{ font-family:var(--font-display); line-height:1.15; }
a{ color:inherit; }

.site-head, .site-foot{ padding:var(--s-3); display:flex; gap:var(--s-3); align-items:center; flex-wrap:wrap; }
.site-head{ justify-content:space-between; border-bottom:var(--border); }
.site-head nav, .site-foot nav{ display:flex; gap:var(--s-3); flex-wrap:wrap; }
.brand{ font-family:var(--font-mono); font-weight:700; text-decoration:none; }
main{ padding:var(--s-4) var(--s-3); max-width:72rem; margin:0 auto; }
section{ margin-block:var(--s-5); }
.btn{ display:inline-block; padding:.7rem 1.2rem; border-radius:.5rem; text-decoration:none; }
.btn.primary{ background:var(--accent); color:var(--accent-ink); }

/* form */
form{ display:grid; gap:var(--s-1); max-width:32rem; }
label{ font-size:.85rem; color:var(--text-dim); }
input, textarea{ padding:.6rem; background:var(--surface); color:var(--text); border:var(--border); border-radius:.4rem; font:inherit; }
button{ padding:.7rem 1.2rem; background:var(--accent); color:var(--accent-ink); border:0; border-radius:.5rem; cursor:pointer; }

/* footer credit (component 3, unchanged per client; the underscore stays lime) */
.site-foot{ flex-direction:column; align-items:flex-start; border-top:var(--border); }
.foot-meta{ color:var(--text-dim); font-size:.85rem; margin:0; }
.st-credit{
  font-family:var(--font-mono, monospace);
  font-size:.75rem; letter-spacing:.02em;
  color:var(--text); opacity:.6; text-decoration:none; /* inherit the footer color, so the credit is visible on light and dark builds alike */
  transition:color .2s ease, opacity .2s ease;
}
.st-credit:hover{ opacity:1; color:#BFFF00; }
.st-wm{ font-weight:700; }
.st-wm u{ color:#BFFF00; text-decoration:none; }

/* skip link (component 13) */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:var(--accent-ink);
  padding:.6rem 1rem; border-radius:0 0 .4rem 0;
}
.skip-link:focus{ left:0; }

/* scroll reveal (component 5) */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* photo placeholder frame (component 7). Defined here, used in HTML only when a real photo is owed. */
.ph-frame{
  display:flex; align-items:center; justify-content:center;
  border:2px dashed var(--accent);
  background:repeating-linear-gradient(45deg,transparent,transparent 12px,rgba(255,255,255,.03) 12px,rgba(255,255,255,.03) 24px);
  color:var(--accent); font:600 .8rem/1.4 var(--font-mono,monospace);
  text-align:center; padding:1rem; letter-spacing:.05em; text-transform:uppercase;
}

/* missing-data markers (Module 5). Defined here, used in HTML only for a real copy/data gap. */
.nd-frame, .nd-inline{
  border:2px dashed var(--accent);
  background:repeating-linear-gradient(45deg,transparent,transparent 12px,rgba(255,255,255,.03) 12px,rgba(255,255,255,.03) 24px);
  color:var(--accent); font:600 .8rem/1.4 var(--font-mono,monospace);
  letter-spacing:.05em; text-transform:uppercase;
}
.nd-inline{ display:inline-flex; align-items:center; padding:.15rem .5rem; }
.nd-frame{ display:flex; align-items:center; justify-content:center; width:100%; padding:1rem; text-align:center; }

/* sticky mobile action bar (component 14, service businesses) */
.mobile-cta{ display:none; }
@media(max-width:640px){
  .mobile-cta{
    display:flex; gap:.5rem; position:fixed; left:0; right:0; bottom:0; z-index:90;
    padding:.6rem; background:var(--surface); border-top:var(--border);
  }
  .mobile-cta a{ flex:1; text-align:center; padding:.8rem; border-radius:.5rem; text-decoration:none; }
  .mobile-cta a.primary{ background:var(--accent); color:var(--accent-ink); }
  body{ padding-bottom:4rem; }
}

/* ============================================================
   WOOSTER FOOD REVIEW // component layer (Phase 6, shared)
   Built from the Phase 4 design lock. Every page inherits this.
   ============================================================ */

.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--s-4); }
main{ padding:0; max-width:none; margin:0; }
section{ margin-block:0; }
h1,h2,h3{ line-height:1.05; letter-spacing:-.03em; }

/* --- masthead nameplate (the wordmark) --- */
.site-head{ display:block; padding:var(--s-3) 0 var(--s-2); border-bottom:2px solid var(--text); }
.site-head .wrap{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; }
.brand{ font-family:var(--font-display); text-decoration:none; color:var(--text); display:block; }
.brand b{ font-weight:900; font-size:var(--step-3); letter-spacing:-.03em; display:block; line-height:1; }
.brand span{ font-family:var(--font-mono); font-weight:400; font-size:.6875rem; letter-spacing:.22em; color:var(--text-dim); display:block; margin-top:6px; }
.site-head nav{ display:flex; gap:var(--s-3); font-size:.9375rem; font-weight:500; padding-bottom:4px; }
.site-head nav a{ text-decoration:none; border-bottom:2px solid transparent; padding-bottom:2px; }
.site-head nav a:hover, .site-head nav a[aria-current="page"]{ border-bottom-color:var(--accent); }

/* --- shared type helpers --- */
.eyebrow{ font-family:var(--font-mono); font-weight:700; font-size:.6875rem; letter-spacing:.2em; color:var(--accent-deep); margin:0 0 var(--s-3); }
.mark{ background:linear-gradient(180deg,transparent 58%,var(--marker) 58%,var(--marker) 94%,transparent 94%); color:var(--text); font-weight:500; padding:0 .1em; }
.struck{ position:relative; }
.struck::after{ content:""; position:absolute; left:-.02em; right:-.02em; top:.52em; height:.055em; background:var(--accent); }

/* --- hero --- */
.hero{ padding:var(--s-sec) 0 var(--s-4); }
.hero .wrap{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:var(--s-sec); align-items:center; }
/* When the right column is a tall form, centring strands the headline in dead
   space above it. Top-align that case instead. */
.hero.tall-aside .wrap{ align-items:start; }
.hero.tall-aside .form-card{ margin-top:var(--s-1); }
.hero h1{ font-weight:900; font-size:var(--step-6); line-height:1.02; margin:0 0 var(--s-2); }
.kicker{ font-family:var(--font-display); font-weight:600; font-style:italic; font-size:var(--step-2); line-height:1.25; color:var(--text-dim); margin:0 0 var(--s-3); max-width:26ch; }
.kicker b{ color:var(--text); font-weight:900; font-style:normal; }
.deck{ font-size:var(--step-1); line-height:1.5; color:var(--text-dim); max-width:38ch; margin:0 0 var(--s-4); }
.promise{ border-top:var(--border); padding-top:var(--s-2); display:flex; gap:var(--s-4); flex-wrap:wrap; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.06em; color:var(--text-dim); }
.promise b{ color:var(--accent-deep); font-weight:700; }

/* --- the phone frame (signature object, holds the vertical episode) ---
   The 9:16 box against a 16:9 source center-crops to the real vertical footage,
   which is what kills the mirrored side bars on a vertical upload. */
.phone{ width:min(280px,100%); margin:0 auto; }
.phone-body{ background:#101314; border-radius:38px; padding:10px; box-shadow:var(--shadow-lg); }
.phone-screen{ position:relative; aspect-ratio:9/16; border-radius:28px; overflow:hidden; background:#101314; }
.phone-screen img, .phone-screen iframe{ width:100%; height:100%; object-fit:cover; display:block; border:0; }
.phone-notch{ position:absolute; top:9px; left:50%; transform:translateX(-50%); width:88px; height:20px; background:#101314; border-radius:0 0 12px 12px; z-index:2; }
.phone-play{ position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%; background:var(--accent); display:grid; place-items:center; z-index:3; box-shadow:0 10px 30px -6px rgba(0,0,0,.55); border:0; cursor:pointer; padding:0; }
.phone-play::after{ content:""; width:0; height:0; border-left:20px solid #fff; border-top:13px solid transparent; border-bottom:13px solid transparent; margin-left:5px; }
.phone-cap{ text-align:center; font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.16em; color:var(--text-dim); margin:var(--s-2) 0 0; }

/* --- section heads --- */
.section{ padding:var(--s-sec) 0; }
.sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-3); border-bottom:2px solid var(--text); padding-bottom:var(--s-2); margin-bottom:var(--s-4); flex-wrap:wrap; }
.sec-head h2{ font-weight:900; font-size:var(--step-3); margin:0; }
.sec-head span{ font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.18em; color:var(--text-dim); }

/* --- review cards, 4:5 portrait (chosen because the footage is vertical) --- */
.grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-3); }
.grid.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.card{ text-decoration:none; color:var(--text); display:block; }
.card .shot{ position:relative; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden; background:var(--surface-2); margin-bottom:var(--s-2); }
.card .shot img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.card:hover .shot img{ transform:scale(1.04); }
.ep{ position:absolute; top:10px; left:10px; font-family:var(--font-mono); font-size:.625rem; letter-spacing:.14em; background:var(--bg); color:var(--text); padding:4px 8px; border-radius:4px; font-weight:700; z-index:2; }
.verdict-tag{ position:absolute; bottom:10px; left:10px; right:10px; font-family:var(--font-mono); font-size:.625rem; letter-spacing:.1em; background:var(--accent); color:#fff; padding:6px 8px; border-radius:4px; font-weight:700; text-align:center; z-index:2; }
.verdict-tag.pending{ background:var(--surface-2); color:var(--text-dim); }
.card h3{ font-weight:700; font-size:var(--step-1); margin:0 0 2px; letter-spacing:-.02em; }
.card p{ font-size:.875rem; color:var(--text-dim); line-height:1.45; margin:0; }

/* --- the verdict block (THE HOUSE SIGNATURE / MY PICK) --- */
.verdict{ border-top:3px solid var(--text); border-bottom:var(--border); padding:var(--s-sec) 0; display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr); gap:var(--s-3); align-items:start; }
.verdict .label{ font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.2em; color:var(--accent-deep); font-weight:700; padding-top:.75em; }
.verdict .dish{ font-family:var(--font-display); font-weight:900; font-size:var(--step-4); line-height:1; letter-spacing:-.035em; margin:0; }
.verdict .dish small{ display:block; font-family:var(--font-body); font-weight:400; font-size:var(--step-0); line-height:1.6; color:var(--text-dim); margin-top:var(--s-2); max-width:56ch; letter-spacing:0; }
.verdict .src{ display:block; font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.06em; color:var(--text-dim); margin-top:var(--s-2); }

/* --- the loud block --- */
.block{ background:var(--ink-block); color:var(--text-on-dark); padding:var(--s-sec-lg) 0; }
.block .wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,auto); gap:var(--s-4); align-items:center; }
.block h2{ font-weight:900; font-size:var(--step-4); margin:0 0 var(--s-2); }
.block p{ color:var(--dim-on-dark); max-width:46ch; margin:0; }
.block .btn{ background:var(--accent); color:#fff; font-family:var(--font-mono); font-weight:700; font-size:.8125rem; letter-spacing:.12em; padding:18px 28px; border-radius:6px; white-space:nowrap; }

/* --- article layout (the long-form reviews Chad writes) --- */
/* Left-aligned, NOT centred. Centring the measure inside a 1180px wrap gives the
   page two competing left edges: headings and the author block sit at the wrap
   edge while the prose floats in the middle. One left margin reads as a column. */
.article{ max-width:65ch; margin:0; }
.article p{ margin:0 0 var(--s-3); font-size:1.0625rem; line-height:1.75; }
.article h2{ font-weight:900; font-size:var(--step-2); margin:var(--s-4) 0 var(--s-2); }
.article h3{ font-weight:700; font-size:var(--step-1); margin:var(--s-4) 0 var(--s-1); }
.article > p.lede::first-letter{ float:left; font-family:var(--font-display); font-weight:900; font-size:4.2rem; line-height:.82; padding:.06em .08em 0 0; color:var(--accent-deep); }
.pullquote{ border-left:3px solid var(--accent); padding-left:var(--s-3); margin:var(--s-4) 0; font-family:var(--font-display); font-style:italic; font-weight:600; font-size:var(--step-2); line-height:1.3; color:var(--text); }

/* --- the restaurant fact panel --- */
.facts{ background:var(--surface); border:var(--border); border-radius:var(--radius); padding:var(--s-3); display:grid; gap:var(--s-2); }
.facts dl{ margin:0; display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:.4rem var(--s-2); font-size:.9375rem; }
.facts dt{ font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.14em; color:var(--text-dim); padding-top:.25em; }
.facts dd{ margin:0; }
.facts a{ color:var(--accent-deep); }
.facts .caveat{ font-size:.8125rem; color:var(--text-dim); margin:0; }

/* --- breadcrumbs --- */
.crumbs{ font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.12em; color:var(--text-dim); padding:var(--s-3) 0 0; }
.crumbs a{ color:var(--text-dim); text-decoration:none; }
.crumbs a:hover{ color:var(--accent-deep); }

/* --- credit line (host vs writer, never conflate the two) --- */
.credit-line{ font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.1em; color:var(--text-dim); margin:var(--s-2) 0 0; }

/* --- footer --- */
.site-foot{ display:block; border-top:var(--border); padding:var(--s-4) 0; color:var(--text-dim); font-size:.875rem; }
.site-foot .wrap{ display:flex; justify-content:space-between; gap:var(--s-3); flex-wrap:wrap; align-items:center; }
.site-foot nav{ display:flex; gap:var(--s-3); flex-wrap:wrap; }
.site-foot nav a{ text-decoration:none; }
.site-foot nav a:hover{ color:var(--accent-deep); }

/* --- forms ---
   TURNSTILE 300px FLOOR GUARD. Read _state/form-config.md before touching this.
   The container-level guard covers every fixed-width child, not just the widget
   somebody remembered to write a rule for. */
form{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-2); max-width:34rem; }
.form-card{ background:var(--surface); border:var(--border); border-radius:var(--radius); padding:var(--s-4); }
label{ font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.12em; color:var(--text-dim); }
input, textarea, select{ padding:.75rem; background:var(--bg); color:var(--text); border:var(--border); border-radius:.4rem; font:inherit; width:100%; }
input:focus, textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }
button{ padding:1rem 1.5rem; background:var(--accent); color:#fff; border:0; border-radius:6px; cursor:pointer; font-family:var(--font-mono); font-weight:700; font-size:.8125rem; letter-spacing:.12em; }
.form-status{ font-size:.875rem; color:var(--text-dim); margin:0; }

@media(max-width:980px){ .grid, .grid.cols-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:820px){
  .wrap{ padding:0 var(--s-2); }
  .hero .wrap{ grid-template-columns:minmax(0,1fr); gap:var(--s-4); }
  .hero h1{ font-size:var(--step-4); }
  .verdict{ grid-template-columns:minmax(0,1fr); gap:var(--s-2); }
  .verdict .dish{ font-size:var(--step-3); }
  .verdict .label{ padding-top:0; }
  .block .wrap{ grid-template-columns:minmax(0,1fr); }
  .form-card{ padding:var(--s-2); }
}
@media(max-width:480px){
  /* The bleed. NEVER add max-width:100% here, it silently cancels the bleed and
     puts the widget back under 300px. min-width:0 is the part that gets dropped.
     Arithmetic at a 360px viewport:
       360  viewport (the verified floor)
       -32  .wrap padding      (var(--s-2), 1rem each side)
       -32  .form-card padding (var(--s-2), 1rem each side)
       - 0  no card border
       +32  widget bleed       (-1rem each side)
       =328  clears the 300 floor with 28px of headroom
     Re-do this sum if any padding in that chain changes. Sign it off in production
     at a real 360px phone: the widget does not render on localhost. */
  .cf-turnstile{ min-width:0; margin:12px -1rem; }
  .grid, .grid.cols-3{ grid-template-columns:minmax(0,1fr); }
}

/* honeypot, kept out of the CSP by living here instead of a style attribute */
.hp{ display:none; }

/* --- author block (About page). Sits outside the 65ch article measure, because a
   portrait photo inside it leaves the text too narrow to read. --- */
.author{ display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:var(--s-4); align-items:start; }
.author-shot{ margin:0; }
.author-shot img{ width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow); }
.author-shot figcaption{ font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.06em; line-height:1.5; color:var(--text-dim); margin-top:var(--s-2); }
.author-text h2{ font-weight:900; font-size:var(--step-3); margin:0 0 var(--s-2); }
.author-text p{ margin:0 0 var(--s-3); font-size:1.0625rem; line-height:1.75; max-width:58ch; }
@media(max-width:820px){
  .author{ grid-template-columns:minmax(0,1fr); gap:var(--s-3); }
  .author-shot{ max-width:260px; }
}