/* Medway Village Pizza & Subs
   ---------------------------------------------------------------
   The design is taken from the shop itself: the white sign board over
   the counter with navy lettering, the red "PIZZA & SUBS" on the
   storefront, and the green window panels. White ground, slab headings,
   dense price columns with leader dots, square buttons. A printed
   takeout menu, not a landing page. */

:root {
  /* the sign */
  --board: #ffffff;
  --board-2: #f4f1ea;
  --board-3: #e9e4d8;
  --ink: #16202b;
  --ink-soft: #4d5a68;
  --red: #c3261f;
  --red-dark: #96170f;
  --green: #17603a;
  --green-dark: #0f4428;
  --rule: #cbc4b6;
  --rule-strong: #9aa2aa;

  --display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body: "Libre Franklin", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --header-h: 62px;
  --gutter: max(18px, env(safe-area-inset-left, 0px));
  --gutter-r: max(18px, env(safe-area-inset-right, 0px));
  --wrap: 1200px;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--board-2);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* ------------------------------------------------------------ type */
.t-mega, .t-hero, .t-1, .t-2, .t-3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-wrap: balance;
  margin: 0;
}
.t-mega { font-size: clamp(2.4rem, 7.5vw, 4.4rem); }
.t-hero { font-size: clamp(2rem, 5.6vw, 3.3rem); }
.t-1    { font-size: clamp(1.7rem, 4.2vw, 2.6rem); }
.t-2    { font-size: clamp(1.35rem, 3vw, 1.85rem); }
.t-3    { font-size: 1.25rem; }

.eyebrow {
  font-family: var(--body);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.9375rem;
  letter-spacing: 0.14em;
  line-height: 1;
  margin: 0;
  color: var(--red);
}
.band-ink .eyebrow, .band-brick .eyebrow, .counter-card .eyebrow { color: #ffffff; }

.lede { font-size: clamp(1.0625rem, 1.7vw, 1.25rem); line-height: 1.55; margin: 0; max-width: 58ch; }
.copy { margin: 0; max-width: 64ch; }
.note { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.num { font-variant-numeric: tabular-nums; }

a { color: var(--red); }

/* ---------------------------------------------------------- layout */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
}
.band { padding-block: clamp(2.75rem, 5.5vw, 4.5rem); }
.band-tight { padding-block: clamp(2rem, 4vw, 3rem); }
.band-ink { background: var(--ink); color: var(--board); }
.band-brick { background: var(--green); color: var(--board); }
.band-paper-2 { background: var(--board-3); }
.band-ink .note, .band-brick .note { color: #cdd6dd; }

.stack { display: grid; gap: 1rem; justify-items: start; }
.rule { border: 0; border-top: 2px solid var(--ink); margin: 0; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: .85rem 1.25rem; font-weight: 700;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------- buttons */
/* Square, bordered, the way a printed sign is set. No pills. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 56px; padding: .7rem 1.6rem;
  border: 2px solid var(--ink); border-radius: 2px;
  font-family: var(--body); font-weight: 800; font-size: 1.0625rem;
  letter-spacing: .07em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; background: var(--board); color: var(--ink);
  transition: background-color .12s linear, color .12s linear;
}
.btn-gold { background: var(--red); border-color: var(--red-dark); color: #fff; }
.btn-gold:hover { background: var(--red-dark); }
.btn-brick { background: var(--green); border-color: var(--green-dark); color: #fff; }
.btn-brick:hover { background: var(--green-dark); }
.btn-ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-ink:hover { background: #000; }
.btn-ghost { background: transparent; border-color: currentColor; color: inherit; }
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.band-ink .btn-ghost:hover, .band-brick .btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn-sm { min-height: 48px; padding: .5rem 1.1rem; font-size: .9375rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ---------------------------------------------------------- header */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--board); border-bottom: 3px solid var(--ink);
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px); background: var(--board); z-index: 60;
}
.header-row { display: flex; align-items: center; gap: 1.25rem; min-height: var(--header-h); }
.brand { display: flex; align-items: center; margin-right: auto; padding-block: 8px; }
.brand img { height: 40px; width: auto; }

.nav { display: flex; align-items: center; gap: 1.4rem; }
.nav a {
  font-weight: 800; text-transform: uppercase; letter-spacing: .09em; font-size: .9375rem;
  color: var(--ink); text-decoration: none; display: inline-flex; align-items: center;
  min-height: 48px; border-bottom: 3px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--red); }

.header-tel {
  font-family: var(--display); font-size: 1.3rem; color: var(--ink);
  text-decoration: none; display: inline-flex; align-items: center; min-height: 48px; white-space: nowrap;
}
.header-tel:hover { color: var(--red); }

.nav-toggle {
  display: none; width: 48px; height: 48px; align-items: center; justify-content: center;
  background: var(--board); border: 2px solid var(--ink); border-radius: 2px; cursor: pointer; color: var(--ink);
}
.nav-toggle span { display: block; width: 20px; height: 2.5px; background: currentColor; position: relative; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2.5px; background: currentColor;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

/* ===================================================================
   The counter block: open state, phone, address. Set like the top of
   a printed takeout menu, inside a ruled box.
   =================================================================== */
.counterblock { background: var(--board); border-bottom: 3px solid var(--ink); }
.counterblock .wrap { padding-block: 1.5rem 1.7rem; display: grid; gap: 1.1rem; }

.cb-state {
  display: inline-block;
  font-family: var(--body); font-weight: 800;
  font-size: clamp(1rem, 2.6vw, 1.1875rem);
  text-transform: uppercase; letter-spacing: .1em; line-height: 1;
  margin: 0; padding: .55rem .8rem; border: 2px solid currentColor; border-radius: 2px;
  justify-self: start;
}
.cb-state[data-open="yes"] { color: var(--green); }
.cb-state[data-open="no"] { color: var(--red); }

.cb-tel {
  font-family: var(--display); font-size: clamp(2.5rem, 11vw, 4.6rem);
  line-height: 1; color: var(--ink); text-decoration: none; display: block;
  font-variant-numeric: tabular-nums;
}
.cb-tel:hover { color: var(--red); }
.cb-tel-hint {
  font-weight: 800; font-size: 1rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); margin: .35rem 0 0;
}
.cb-meta { display: grid; gap: .4rem; font-size: 1.125rem; line-height: 1.45; }
.cb-meta a { color: var(--red); text-underline-offset: 3px; }
.cb-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .2rem; }

.cb-paused {
  background: #fdf3d6; border: 2px solid var(--ink); border-left-width: 10px;
  padding: .9rem 1rem; display: grid; gap: .35rem; border-radius: 2px;
}
.cb-paused p { margin: 0; font-size: 1.0625rem; line-height: 1.45; color: var(--ink); }
.cb-paused .cb-paused-h {
  font-weight: 800; font-size: 1.0625rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--red-dark);
}

@media (min-width: 820px) {
  .counterblock .wrap { grid-template-columns: auto 1fr; column-gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  .cb-left { display: grid; gap: .4rem; align-content: start; }
  .cb-right { display: grid; gap: .9rem; align-content: start; }
}

/* ------------------------------------------------------- deal strip */
.deal { background: var(--green); color: #fff; border-bottom: 3px solid var(--green-dark); }
.deal .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem .9rem; padding-block: .7rem; text-align: center; }
.deal-chip {
  background: #fff; color: var(--green-dark); font-weight: 800; font-size: .9375rem;
  letter-spacing: .13em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 2px;
}
.deal-text { margin: 0; font-weight: 700; font-size: 1.0625rem; line-height: 1.3; }

/* ------------------------------------------------- storefront strip */
.shopstrip { border-bottom: 3px solid var(--ink); background: var(--ink); }
.shopstrip img { width: 100%; height: clamp(190px, 28vw, 330px); object-fit: cover; object-position: 50% 54%; }

/* ------------------------------------------------------ facts strip */
.facts { background: var(--board-3); border-bottom: 2px solid var(--rule); }
.facts ul {
  list-style: none; margin: 0; padding-block: .9rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem 1.4rem;
}
.facts li {
  font-weight: 800; font-size: .9375rem; letter-spacing: .09em; text-transform: uppercase;
  display: flex; align-items: center; gap: 1.4rem; color: var(--ink);
}
.facts li::after { content: ""; width: 6px; height: 6px; background: var(--red); }
.facts li:last-child::after { display: none; }

/* ===================================================================
   The board. Menu sections set as dense ruled price columns, the way
   the board over the counter is set.
   =================================================================== */
.menu-nav {
  position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); z-index: 40;
  background: var(--board); border-bottom: 3px solid var(--ink); border-top: 2px solid var(--rule);
}
.menu-nav ul { list-style: none; margin: 0; padding-block: .45rem; display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; }
.menu-nav ul::-webkit-scrollbar { display: none; }
.menu-nav a {
  display: inline-flex; align-items: center; min-height: 46px; padding-inline: .9rem;
  border: 2px solid transparent; border-radius: 2px;
  font-weight: 800; font-size: .9375rem; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; color: var(--ink); white-space: nowrap;
}
.menu-nav a:hover, .menu-nav a.is-active { background: var(--ink); color: #fff; }

.menu-section { scroll-margin-top: calc(var(--header-h) + 70px); padding-block: clamp(2rem, 4vw, 3rem); }
.menu-head { display: grid; gap: .5rem; margin-bottom: 1.25rem; padding-bottom: .7rem; border-bottom: 4px double var(--ink); }
.menu-head .t-1 { color: var(--red); }
.menu-group + .menu-group { margin-top: 2rem; }
.menu-group-head { display: grid; gap: .35rem; margin-bottom: .5rem; padding-bottom: .4rem; border-bottom: 2px solid var(--rule); }
.menu-group-head .t-2 { color: var(--ink); }

/* Two columns of prices on a wide board, one on a phone. */
.pricelist { columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem); }
.price-row {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  display: grid; grid-template-columns: 1fr auto; column-gap: .5rem;
  align-items: baseline; padding-block: .6rem; border-bottom: 1px dotted var(--rule-strong);
}
.price-name {
  margin: 0; font-family: var(--body); font-weight: 700; font-size: 1.0625rem;
  line-height: 1.3; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem;
}
.price-amt { margin: 0; font-weight: 800; font-size: 1.0625rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-desc { grid-column: 1 / -1; margin: .15rem 0 0; font-size: .9375rem; line-height: 1.45; color: var(--ink-soft); max-width: 48ch; }
.band-ink .price-desc, .band-brick .price-desc { color: #cdd6dd; }

.flag {
  font-weight: 800; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .1rem .4rem; border-radius: 2px; white-space: nowrap; line-height: 1.4;
}
.flag-pick { background: var(--red); color: #fff; }
.flag-veg { background: var(--green); color: #fff; }
.flag-gf { background: var(--ink); color: #fff; }
.flag-build { background: transparent; color: var(--ink-soft); border: 1px solid var(--rule-strong); }

.menu-tools { display: grid; gap: .4rem; padding-block: 1.25rem .5rem; }
.menu-search {
  width: 100%; max-width: 26rem; min-height: 52px; padding: .6rem .8rem;
  border: 2px solid var(--ink); border-radius: 2px; background: #fff; color: var(--ink);
  font: inherit; font-size: 1.0625rem;
}
.menu-foot { padding-block: 1.75rem; max-width: 70ch; }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; }
.legend li { display: flex; align-items: center; gap: .4rem; font-size: .9375rem; }
.empty-note { padding-block: 2rem; }

@media (max-width: 760px) { .pricelist { columns: 1; } }

/* Photographs are pinned up, not bled off the page: a white mat and a
   hard rule, the way a photo is taped to a shop wall. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.split-media { background: var(--board); padding: 10px; border: 2px solid var(--ink); aspect-ratio: 3 / 2; overflow: hidden; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.band-ink .split-media, .band-brick .split-media { border-color: #fff; background: #fff; }

.counter-band { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(360px, 48vh, 520px); background: var(--ink); color: #fff; border-block: 3px solid var(--ink); }
.counter-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.counter-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
.counter-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10,14,18,.95) 0%, rgba(10,14,18,.62) 48%, rgba(10,14,18,.2) 100%); }
.counter-band .wrap { padding-block: clamp(1.75rem, 4vw, 3rem); }
.counter-card { max-width: 44rem; display: grid; gap: .6rem; }
.counter-card .copy { color: #dfe5ea; }

.cta-band { position: relative; isolation: isolate; overflow: hidden; }
.cta-band .hero-media { position: absolute; inset: 0; z-index: -2; }
.cta-band .hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(12,16,21,.72); }

.rating-score { font-family: var(--display); font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1; color: var(--red); font-variant-numeric: tabular-nums; }
.rating-src { font-weight: 800; font-size: .9375rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.rating-n { font-size: .9375rem; color: var(--ink-soft); }

.review-stars { color: #8f5e00; font-size: 1.15rem; letter-spacing: .08em; line-height: 1; }
.review-text { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: var(--ink); }
.review-text::before { content: "\201C"; }
.review-text::after { content: "\201D"; }
.review-by { margin: 0; display: grid; gap: .1rem; }
.review-by strong { font-weight: 800; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.review-by span { font-size: .9375rem; color: var(--ink-soft); }

.visit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
.nap { display: grid; gap: 1.4rem; }
.nap-item { display: grid; gap: .25rem; }
.nap-val { font-family: var(--display); font-size: 1.45rem; line-height: 1.2; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 48px; }
.nap-val-sm { font-size: 1.1rem; }
a.nap-val { border-bottom: 2px solid var(--red); }
a.nap-val:hover { color: var(--red); }
p.nap-val { font-family: var(--body); font-weight: 700; font-size: 1.1875rem; }

.hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; border: 3px solid var(--ink); background: var(--board); }
.hours caption { text-align: left; margin-bottom: .6rem; font-weight: 800; font-size: .9375rem; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.hours th, .hours td { padding: .65rem .8rem; border-top: 1px solid var(--rule); text-align: left; font-weight: 500; font-size: 1.0625rem; }
.hours td:last-child { text-align: right; }
.hours tr:first-child th, .hours tr:first-child td { border-top: 0; }
.hours .is-today th, .hours .is-today td { background: #fdf3d6; font-weight: 800; }
.today-tag { font-weight: 800; font-size: .8125rem; letter-spacing: .1em; background: var(--red); color: #fff; padding: .12rem .4rem; margin-left: .5rem; }
.openstate { margin-top: .8rem; font-weight: 700; }
.openstate[data-open="yes"] { color: var(--green); }
.openstate[data-open="no"] { color: var(--red); }

.map-slot { position: relative; isolation: isolate; overflow: hidden; margin-top: 1.4rem; border: 3px solid var(--ink); background: var(--ink); color: #fff; }
.map-photo { position: absolute; inset: 0; z-index: -2; }
.map-photo img { width: 100%; height: 100%; object-fit: cover; }
.map-slot::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(12,16,21,.76); }
.map-face { display: grid; gap: .6rem; justify-items: center; align-content: center; text-align: center; padding: 2rem var(--gutter); min-height: 320px; }
.map-face .note, .map-face .map-consent { color: #d7dee4; }
.map-face .btn-ink { background: #fff; color: var(--ink); border-color: #fff; }
.map-face .btn-ink:hover { background: var(--red); color: #fff; border-color: var(--red); }
.map-face .btn-row { justify-content: center; }
.map-slot.is-live { background: var(--board); }
.map-slot.is-live .map-photo, .map-slot.is-live::after, .map-slot.is-live .map-face { display: none; }
.map-slot iframe { width: 100%; min-height: 320px; border: 0; display: block; }

.inline-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.inline-list li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: baseline; }
.inline-list b { font-weight: 800; letter-spacing: .07em; text-transform: uppercase; font-size: .9375rem; color: #ffffff; white-space: nowrap; }

.menu-top-grid { display: grid; grid-template-columns: 1fr auto; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.menu-top-photo { margin: 0; display: grid; gap: .5rem; max-width: 290px; }
.menu-top-photo img { border: 2px solid var(--ink); width: 100%; height: auto; }
.faq .price-row { grid-template-columns: 1fr; }
.faq .price-name { font-size: 1.1875rem; }
.faq.pricelist { columns: 1; }

.site-footer { background: var(--ink); color: #fff; padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.75rem; border-top: 6px solid var(--red); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.25rem; }
.footer-logo { height: 48px; width: auto; margin-bottom: 1rem; }
.footer-grid h2 { font-weight: 800; font-size: .9375rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .9rem; color: #ffffff; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; }
.footer-grid a, .footer-bottom a, .site-footer .note a { color: #fff; text-decoration: none; }
.footer-grid a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-grid a:hover, .footer-bottom a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 4px; }
.site-footer .note { color: #c6d0d8; }
.footer-hours { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1.5rem; font-variant-numeric: tabular-nums; font-size: 1rem; }
.footer-hours dd { margin: 0; text-align: right; }
.footer-bottom { margin-top: 2rem; padding-top: 1.25rem; border-top: 2px solid #38424e; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; align-items: center; font-size: 1rem; color: #c6d0d8; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }

.owner-fab { position: fixed; right: max(1rem, env(safe-area-inset-right,0px)); bottom: calc(1rem + env(safe-area-inset-bottom,0px)); z-index: 60; min-height: 48px; padding: .6rem 1.1rem; border: 2px solid var(--ink); background: #fff; color: var(--ink); font-weight: 800; font-size: .9375rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.owner-panel { position: fixed; right: max(1rem, env(safe-area-inset-right,0px)); bottom: calc(1rem + env(safe-area-inset-bottom,0px)); z-index: 61; width: min(360px, calc(100vw - 2rem)); max-height: min(78vh, 640px); overflow: auto; display: grid; gap: .85rem; padding: 1.1rem; background: #fff; color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 16px 44px rgba(0,0,0,.3); }
.owner-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.owner-close { width: 44px; height: 44px; border: 0; background: transparent; font-size: 1.6rem; line-height: 1; cursor: pointer; color: inherit; }
.owner-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; font-weight: 700; }
.owner-field { display: grid; gap: .3rem; font-size: 1rem; font-weight: 700; }
.owner-field textarea { font: inherit; font-weight: 400; font-size: 1rem; padding: .55rem .65rem; border: 2px solid var(--ink); background: #fff; color: var(--ink); resize: vertical; width: 100%; }
.owner-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.toggle { flex: none; width: 60px; height: 34px; border: 2px solid var(--ink); background: var(--board-3); position: relative; cursor: pointer; padding: 0; }
.toggle > span { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; background: var(--ink); transition: transform .14s linear; }
.toggle[aria-checked="true"] { background: var(--green); }
.toggle[aria-checked="true"] > span { transform: translateX(26px); background: #fff; }

@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .nav, .header-tel { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header .wrap { position: relative; }
  .site-header.is-open .nav { display: grid; position: absolute; left: 0; right: 0; top: 100%; background: var(--board); border-bottom: 3px solid var(--ink); padding: .25rem var(--gutter-r) 1rem var(--gutter); }
  .site-header.is-open .nav a { min-height: 54px; border-bottom: 1px solid var(--rule); }
  .split, .visit, .menu-top-grid { grid-template-columns: 1fr; }
  .menu-top-photo { max-width: 100%; }
}
@media (max-width: 620px) {
  body { font-size: 17px; }
  .footer-grid { grid-template-columns: 1fr; }
  .btn-row .btn, .cb-actions .btn { width: 100%; }
  .owner-panel { right: .5rem; left: .5rem; width: auto; }
}
@media print {
  .site-header, .menu-nav, .deal, .shopstrip, .counter-band, .cta-band, .owner-fab, .owner-panel, .map-slot { display: none !important; }
  body { background: #fff; font-size: 11pt; }
}

/* Nothing under 14px, nothing under 44px to tap. */
.flag { font-size: .875rem; padding: .15rem .45rem; }
.legend li { font-size: 1rem; }
.cb-meta a { display: inline-flex; align-items: center; min-height: 44px; }
.deal-chip { font-size: .9375rem; }
.today-tag { font-size: .875rem; }

/* ===================================================================
   Ordering state. The page ships both versions of every order control
   and the wrapper attribute picks one, so the live flag can switch
   them without a rebuild. Lose these two rules and both show at once.
   =================================================================== */
[data-ordering="on"] [data-when="off"],
[data-ordering="off"] [data-when="on"] { display: none !important; }
[data-deal="off"] .deal { display: none; }

/* -------- header: compact at every width, never a stack of blocks */
.header-cta { display: inline-flex; flex: none; }
.header-cta .btn { width: auto; min-height: 44px; padding: .45rem .9rem; font-size: .9375rem; white-space: nowrap; }
.site-header .btn { width: auto; }

/* -------- the phone number is one line, always */
.cb-tel { white-space: nowrap; font-size: clamp(2.05rem, 9.4vw, 4.4rem); }

/* -------- counter block: tighter, fewer gaps to scroll past */
.counterblock .wrap { padding-block: 1.1rem 1.3rem; gap: .8rem; }
.cb-meta { gap: .25rem; font-size: 1.0625rem; }
.cb-meta p { margin: 0; }
.cb-tel-hint { margin-top: .15rem; font-size: .9375rem; }
.cb-state { padding: .45rem .7rem; }

/* Stars at 4.5:1 on white rather than a pale gold nobody over fifty can see. */
.review-stars { color: #8f5e00; font-size: 1.15rem; letter-spacing: .08em; }

/* Footer contact lines are tappable, not just readable. */
.site-footer .note a { display: inline-flex; align-items: center; min-height: 44px; }

/* The number is the biggest thing on the page but line-height:1 made its
   touch box shorter than a fingertip. */
.cb-tel { padding-block: .35rem .25rem; }

/* ===================================================================
   One call affordance per breakpoint. On a wide screen the number is
   legible in the bar, so the button is redundant; on a phone the number
   does not fit, so the button carries it.
   =================================================================== */
@media (min-width: 901px) { .header-cta { display: none; } }
@media (max-width: 900px) { .header-tel { display: none; } }

/* -------- spacing: fewer, more even steps -------- */
.band { padding-block: clamp(2.25rem, 4vw, 3.25rem); }
.band-tight { padding-block: clamp(1.75rem, 3vw, 2.5rem); }
.menu-inline { padding-block: clamp(1.5rem, 3vw, 2.25rem) .75rem; }
.menu-inline .note { margin-top: .4rem; }
.menu-section { padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.menu-head { margin-bottom: 1rem; padding-bottom: .5rem; }
.menu-group + .menu-group { margin-top: 1.5rem; }
.menu-tools { padding-block: 1rem .25rem; }
.menu-foot { padding-block: 1.25rem; }
.price-row { padding-block: .5rem; }
.counterblock .wrap { gap: .7rem; }
.cb-actions { margin-top: 0; }
.shopstrip img { height: clamp(150px, 22vw, 260px); }
.visit { gap: clamp(1.25rem, 3vw, 2.5rem); }
.site-footer { padding-block: clamp(2rem, 4vw, 2.75rem) 1.25rem; }
.footer-bottom { margin-top: 1.5rem; padding-top: 1rem; }
.footer-grid { grid-template-columns: 1.6fr 1fr; gap: 2rem; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }

/* ===================================================================
   Homepage: four categories and six suggestions, not 164 lines. The
   whole menu lives on its own page.
   =================================================================== */
.sec-lede { margin-top: .5rem; margin-bottom: 1.4rem; }

.catlist { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.catlist li { border-bottom: 2px solid var(--ink); }
.catlist a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-block: .95rem; min-height: 64px; text-decoration: none; color: var(--ink);
}
.catlist a:hover { background: var(--board); }
.catlist-name { font-family: var(--display); font-size: clamp(1.45rem, 3.6vw, 2.1rem); line-height: 1.05; }
.catlist a:hover .catlist-name { color: var(--red); }
.catlist-from { font-weight: 800; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--red); white-space: nowrap; }
.catlist-cta { margin-top: 1.4rem; }

.picks { columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem); }
.picks .price-row { padding-block: .7rem; }
.picks .price-name { font-size: 1.125rem; }
@media (max-width: 760px) { .picks { columns: 1; } }

/* ----------------------------------------------- menu filters + counts */
.filters { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .25rem; }
.chip {
  min-height: 46px; padding: .4rem 1rem; cursor: pointer;
  border: 2px solid var(--ink); background: var(--board); color: var(--ink);
  font: inherit; font-weight: 800; font-size: .9375rem; letter-spacing: .05em;
}
.chip:hover { background: var(--board-3); }
.chip.is-on { background: var(--ink); color: #fff; }
.menu-nav-n { font-weight: 700; opacity: .65; margin-left: .3rem; font-size: .875rem; }
.menu-nav a.is-active .menu-nav-n, .menu-nav a:hover .menu-nav-n { opacity: .85; }

/* ------------------------------------------------- the word, not the bars */
.nav-toggle {
  width: auto; min-width: 76px; padding-inline: .9rem;
  font: inherit; font-weight: 800; font-size: .9375rem;
  letter-spacing: .1em; text-transform: uppercase;
}
.nav-toggle span { display: none; }

/* ===================================================================
   Grids that cannot leave a half-drawn box.

   The old reviews and ratings grids drew their lines with shared
   borders between cells, so any row that did not fill left a gap with
   no line closing it. Each cell now carries its own complete border
   and the grid wraps on its own, which is correct at any count.
   =================================================================== */
.reviews, .ratings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: .9rem;
  border: 0;
  background: none;
}
.review, .ratings li {
  border: 3px solid var(--ink);
  background: var(--board);
  padding: 1.15rem 1.2rem;
}
.ratings li { border-bottom-width: 3px; text-align: center; }

@media (max-width: 1000px) { .reviews, .ratings { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
@media (max-width: 620px) { .reviews, .ratings { grid-template-columns: 1fr; } }

/* ===================================================================
   Type hierarchy. Four steps and two support roles, nothing else.

     t-1   section headings        slab, 1.7-2.6rem
     t-2   sub-headings            slab, 1.35-1.85rem
     t-3   small headings          slab, 1.25rem
     body  running text            18px / 1.6
     note  secondary text          1rem, darker than it was
     micro labels                  .9375rem, 800, tracked caps
   =================================================================== */
:root { --ink-soft: #3f4a57; }

.note, .price-desc, .rating-n, .review-by span, .map-consent, .menu-count {
  color: var(--ink-soft);
}
.price-name { font-size: 1.0625rem; font-weight: 700; }
.price-amt { font-size: 1.0625rem; font-weight: 800; }
.menu-head .t-1 { color: var(--red); }
.menu-group-head .t-2 { font-size: 1.3rem; }

/* Eyebrows above a heading repeat what the heading says. Keep them only
   where they label a control, not a section. */
.band .eyebrow, .band-tight .eyebrow, .menu-inline .eyebrow, .counter-card .eyebrow { display: none; }
.menu-tools .eyebrow, .nap-item .eyebrow, .owner-panel .eyebrow, .hours caption { display: block; }

/* ------------------------------------------------- prose pages */
.prose { max-width: 68ch; }
.prose .lede { margin-bottom: 1.5rem; }
.prose-h { margin: 1.75rem 0 .5rem; color: var(--red); }
.prose-p { margin: 0 0 .85rem; }
.prose a { text-underline-offset: 3px; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }

/* Each review and rating box owns its whole border, so a row that does not
   fill leaves no half-drawn cell. */
.reviews, .ratings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: .9rem;
  border: 0;
  background: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
.review {
  border: 3px solid var(--ink);
  background: var(--board);
  padding: 1.15rem 1.2rem;
  display: grid;
  gap: .5rem;
  align-content: start;
}
.ratings li {
  border: 3px solid var(--ink);
  background: var(--board);
  padding: 1.15rem 1rem;
  display: grid;
  gap: .2rem;
  align-content: center;
  text-align: center;
}
@media (max-width: 560px) { .reviews, .ratings { grid-template-columns: 1fr; } }

/* The hover fill reaches past the text to the row edge instead of stopping
   at the content box, which read as a clipped band. */
.catlist a {
  padding-inline: .85rem;
  margin-inline: -.85rem;
  border-left: 5px solid transparent;
  transition: background-color .12s linear, border-color .12s linear;
}
.catlist a:hover, .catlist a:focus-visible { background: var(--board); border-left-color: var(--red); }

/* ------------------------------------------------------- consent bar */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--ink); color: #fff; border-top: 5px solid var(--red);
}
.consent .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .85rem 1.75rem; padding-block: .9rem;
}
.consent-text { max-width: 62ch; display: grid; gap: .2rem; }
.consent-h { margin: 0; font-weight: 800; font-size: .9375rem; letter-spacing: .14em; text-transform: uppercase; color: #ffffff; }
.consent-text p { margin: 0; font-size: 1rem; line-height: 1.45; color: #dde4ea; }
.consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.consent .btn-ghost { color: #fff; }
.consent .btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.consent-link { color: #ffffff; font-size: 1rem; display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 620px) { .consent .btn { width: auto; flex: 1 1 auto; } }

/* ===================================================================
   Spacing. One scale, applied once, so nothing double-stacks.
   =================================================================== */
.stack { gap: .9rem; }

/* Section heading to its first line of text, then to its content. */
.band-tight .t-1, .band .t-1, .band-tight .t-hero, .band .t-hero { margin-bottom: .5rem; }
.sec-lede { margin-top: 0; margin-bottom: 1.5rem; max-width: 62ch; }

/* Reviews: heading, numbers, quotes, each one step apart. */
.band-brick > .wrap:first-child { padding-bottom: 1.1rem; }
.ratings { margin-bottom: .9rem; }
.band-brick > .ratings, .band-brick > .reviews { margin-inline: auto; max-width: var(--wrap); padding-inline: var(--gutter); }
.band-brick > .reviews { padding-right: var(--gutter-r); }
.band-brick > .ratings { padding-right: var(--gutter-r); }
.review-text { margin: 0; }
.review-by { margin: 0; }

/* Prose pages read as short blocks, not a wall. */
.prose-h { margin: 1.6rem 0 .4rem; }
.prose-p { margin: 0 0 .7rem; }
.prose-p:last-child { margin-bottom: 0; }
.prose a { padding-block: .3rem; }

/* Fixed bars at the bottom must not hide the last line of the page. */
body { padding-bottom: 0; }
.has-consent { padding-bottom: 7rem; }
@media (min-width: 760px) { .has-consent { padding-bottom: 5.5rem; } }

/* ------------------------------------------- definition lists on prose pages */
.factlist { margin: 0 0 1.25rem; display: grid; gap: 0; }
.factlist dt {
  font-weight: 800; font-size: 1.0625rem; letter-spacing: .01em;
  padding: .7rem 0 .15rem; border-top: 2px solid var(--rule); color: var(--ink);
}
.factlist dt:first-child { border-top: 3px solid var(--ink); }
.factlist dd { margin: 0 0 .7rem; color: var(--ink-soft); line-height: 1.5; max-width: 64ch; }
.prose-note { margin-top: 1.25rem; padding-top: .8rem; border-top: 2px solid var(--rule); }

/* The reviews band is one column: heading, lede, numbers, quotes, link. */
.band-brick > .ratings, .band-brick > .reviews { margin-inline: 0; max-width: none; padding-inline: 0; }
.band-brick .ratings { margin-bottom: .9rem; }
.band-brick .reviews { margin-bottom: 1.4rem; }
.reviews-cta { margin-top: 0; }

/* ===================================================================
   One spacing scale, used everywhere. Heading to its own lede is tight;
   every block after that is one step apart.
   =================================================================== */
:root { --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem; }

.band-tight .t-1, .band .t-1, .band-tight .t-hero, .band .t-hero,
.band-tight .t-2, .band .t-2 { margin-bottom: var(--s1); }
.sec-lede, .prose .lede { margin-top: 0; margin-bottom: var(--s3); }

.band-brick .ratings, .band-brick .reviews,
.catlist, .picks, .nap, .hours, .map-slot { margin-bottom: var(--s3); }
.catlist { margin-top: 0; }
.catlist-cta, .reviews-cta { margin-top: 0; margin-bottom: 0; }
.map-slot { margin-top: var(--s3); margin-bottom: 0; }
.openstate { margin-top: var(--s2); margin-bottom: 0; }
.factlist { margin-bottom: var(--s3); }
.prose-h { margin-top: var(--s4); margin-bottom: var(--s1); }
.prose-h:first-of-type { margin-top: var(--s3); }
.visit .stack .lede { margin-bottom: 0; }
.menu-inline .note { margin-top: var(--s1); }
.menu-tools { padding-block: var(--s3) 0; gap: var(--s1); }
.menu-head { margin-bottom: var(--s3); padding-bottom: var(--s1); }
.menu-group + .menu-group { margin-top: var(--s4); }
.menu-group-head { margin-bottom: var(--s1); }

/* A .stack is a grid, so its gap and its children's margins were both
   counting. The gap owns the base step; children add only the extra. */
.stack { gap: var(--s1); }
.stack > * { margin-top: 0; margin-bottom: 0; }
.stack > .lede, .stack > .sec-lede, .stack > .copy { margin-bottom: var(--s2); }
.stack > .lede:last-child, .stack > .sec-lede:last-child, .stack > .copy:last-child { margin-bottom: 0; }

.prose-note { margin-top: var(--s4); }

/* The counter block is two grids; let their gaps own the rhythm and zero
   the children's own margins so nothing adds twice. */
.counterblock .wrap { gap: var(--s3); }
.cb-left { gap: var(--s1); }
.cb-right { gap: var(--s2); }
.cb-left > *, .cb-right > * { margin: 0; }
.cb-tel-hint { margin: 0; }
.cb-meta { gap: var(--s1); }
.cb-meta p { margin: 0; }

/* Labels on dark grounds are white; the red band keeps its own weight. */
.band-ink .eyebrow, .band-brick .eyebrow, .counter-card .eyebrow,
.footer-grid h2, .inline-list b, .consent-h { color: #ffffff; }
.consent-link { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.footer-grid a:hover, .footer-bottom a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 4px; }
.review-stars { color: var(--ink); }

/* A heading sits tight to its own lede, and a full step from anything else.
   Before this, a heading with no lede under it kept the tight 8px. */
.band .t-1, .band-tight .t-1, .band .t-hero, .band-tight .t-hero,
.band .t-2, .band-tight .t-2, .prose > .t-hero { margin-bottom: var(--s3); }
.band .t-1:has(+ .lede), .band-tight .t-1:has(+ .lede),
.band .t-hero:has(+ .lede), .band-tight .t-hero:has(+ .lede),
.band .t-2:has(+ .lede), .band-tight .t-2:has(+ .lede),
.prose > .t-hero:has(+ .lede) { margin-bottom: var(--s1); }
.stack > .t-1, .stack > .t-2, .stack > .t-hero { margin-bottom: 0; }

/* ===================================================================
   Type hierarchy, stated once.

     Familjen Grotesk display face, headings only, never body copy
     Libre Franklin   everything else

     t-hero  page title          clamp 2rem - 3.3rem
     t-1     section heading     clamp 1.7rem - 2.6rem
     t-2     sub-heading         clamp 1.35rem - 1.85rem
     t-3     small heading       1.25rem
     lede    1.0625 - 1.25rem    one per section, max 58ch
     body    1rem / 1.6
     note    1rem, --ink-soft
     label   .9375rem, 800, .14em caps
   =================================================================== */
.eyebrow, .rating-src, .footer-grid h2, .consent-h, .hours caption,
.inline-list b, .catlist-from, .cb-tel-hint, .menu-nav a, .chip,
.deal-chip, .flag, .today-tag, .review-by strong, .nav a, .btn {
  font-family: var(--body);
}
.t-mega, .t-hero, .t-1, .t-2, .t-3, .cb-tel, .rating-score, .catlist-name, .nap-val {
  font-family: var(--display);
  font-weight: 400;
}
.price-name, .price-amt, .factlist dt { font-family: var(--body); }

/* An item the kitchen has run out of stays readable but steps back. */
.price-row.is-off .price-name, .price-row.is-off .price-amt { opacity: .55; }
.price-row.is-off .price-amt { text-decoration: line-through; }
.flag.sold-out { background: var(--ink); color: #fff; }

/* Practical facts beside the hours table: label left, answer right. */
.howlist { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0; align-items: baseline; }
.howlist dt {
  font-weight: 800; font-size: .9375rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--red); padding: .7rem 1.25rem .7rem 0; border-top: 2px solid var(--rule); white-space: nowrap;
}
.howlist dd { margin: 0; padding: .7rem 0; border-top: 2px solid var(--rule); font-size: 1.0625rem; line-height: 1.45; }
.howlist dt:first-of-type, .howlist dt:first-of-type + dd { border-top: 3px solid var(--ink); }
.visit > div > .lede { margin-bottom: var(--s3); }
@media (max-width: 480px) {
  .howlist { grid-template-columns: 1fr; }
  .howlist dt { padding-bottom: 0; border-top: 2px solid var(--rule); }
  .howlist dd { padding-top: .2rem; border-top: 0; }
  .howlist dt:first-of-type + dd { border-top: 0; }
}

/* The sign carries the shop's name, so the strip must include it rather than
   cropping to the windows below. */
.shopstrip img { object-position: 50% 26%; height: clamp(170px, 24vw, 290px); }

/* Familjen Grotesk carries a heading on weight and tracking, not on slab
   serifs. Tighten the large sizes so they set as signage rather than text. */
.t-mega, .t-hero, .t-1, .t-2, .t-3, .cb-tel, .rating-score, .catlist-name, .nap-val {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.t-mega, .t-hero { letter-spacing: -0.025em; line-height: 1.02; }
.t-1 { letter-spacing: -0.022em; line-height: 1.05; }
.t-2, .t-3 { letter-spacing: -0.015em; line-height: 1.12; }
.cb-tel { font-weight: 700; letter-spacing: -0.03em; }
.rating-score { letter-spacing: -0.02em; }
.catlist-name { letter-spacing: -0.02em; }
.nap-val { letter-spacing: -0.01em; font-weight: 700; }

/* The sign was clipping against the deal strip above it. Taller band, crop
   higher, so the whole sign sits inside the frame with air around it. */
.shopstrip img { object-position: 50% 17%; height: clamp(210px, 27vw, 340px); }

/* ===================================================================
   Slim bar: the open state, the number and the street, on pages where
   the full counter block would be the fourth copy of the same thing.
   =================================================================== */
.slimbar { background: var(--board); border-bottom: 3px solid var(--ink); }
.slimbar .wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.25rem;
  padding-block: .7rem; min-height: 56px;
}
.slim-state {
  margin: 0; font-weight: 800; font-size: .9375rem; letter-spacing: .1em;
  text-transform: uppercase; line-height: 1.3;
}
.slim-state[data-open="yes"] { color: var(--green); }
.slim-state[data-open="no"] { color: var(--red); }
.slim-tel {
  font-family: var(--display); font-weight: 700; font-size: 1.45rem;
  letter-spacing: -0.02em; color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
  font-variant-numeric: tabular-nums; margin-right: auto;
}
.slim-tel:hover { color: var(--red); }
.slim-addr { font-size: 1rem; color: var(--ink-soft); }
@media (max-width: 620px) {
  .slimbar .wrap { gap: .2rem .9rem; }
  .slim-tel { margin-right: 0; font-size: 1.6rem; }
  .slim-addr { width: 100%; }
}

/* Consecutive paragraphs outside a .stack had no gap, so they ran together. */
.copy + .copy, .copy + .btn, .copy + .btn-row { margin-top: var(--s2); }
.split > div > .t-1 + .copy, .split > div > .t-2 + .copy { margin-top: 0; }

/* Where a photo sits beside a long list, let it match the column height
   instead of floating in the middle of it. */
.split-fill { align-items: start; grid-template-columns: 1.3fr 1fr; }
.split-fill .split-media { aspect-ratio: 4 / 3; }
@media (max-width: 900px) {
  .split-fill .split-media { aspect-ratio: 3 / 2; min-height: 0; }
}
@media (max-width: 900px) { .split-fill { grid-template-columns: 1fr; } }

/* Baseline alignment shifted each dt one pixel below its dd, so every rule
   line broke where the two columns met. Stretch makes both cells fill the
   row, which puts their border-tops on exactly the same pixel. */
.howlist { align-items: stretch; }
.howlist dt, .howlist dd {
  padding-block: .75rem;
  border-top: 2px solid var(--rule);
  margin: 0;
  display: flex;
  align-items: flex-start;
}
.howlist dt { padding-right: 1.25rem; }
.howlist dt:first-of-type, .howlist dt:first-of-type + dd { border-top-width: 3px; border-top-color: var(--ink); }