/* =====================================================================
   GRANDMA'S BREAKFAST & TACOS — restaurant brutalism
   502 State Street, La Porte, IN 46350

   Contents
     01  Tokens
     02  Reset & base
     03  Typography
     04  Layout primitives
     05  Buttons
     06  Slabs, cards & panels
     07  Announcement marquee
     08  Header & navigation
     09  Mobile action bar
     10  Hero
     11  Homepage sections
     12  Contact page
     13  Menu page
     14  404
     15  Footer
     16  Motion & print
   ===================================================================== */

/* ---------------------------------------------------------------------
   01  TOKENS
   ------------------------------------------------------------------ */
:root {
  /* Brand */
  --green: #1A4731;
  --terracotta: #B85C38;
  --cream: #F9F6F0;
  --black: #000000;
  --white: #FFFFFF;

  /* Surface roles — overridden inside dark slabs (see .is-dark) */
  --surface: var(--cream);
  --ink: var(--black);
  --ink-muted: #3A3A3A;
  --rule: var(--black);
  --focus-color: var(--terracotta);

  /* Structure: thick borders, square corners, hard offset shadows */
  --bd: 4px;
  --bd-thin: 3px;
  --border: var(--bd) solid var(--rule);
  --border-thin: var(--bd-thin) solid var(--rule);
  --shadow: 8px 8px 0 var(--black);
  --shadow-sm: 5px 5px 0 var(--black);
  --shadow-lg: 12px 12px 0 var(--black);
  --shadow-hover: 12px 12px 0 var(--black);

  /* Spacing scale */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;

  /* Type stacks — system fonts only, nothing downloaded */
  --font-display: "Arial Black", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --font-body: Arial, Helvetica, sans-serif;
  --font-editorial: Georgia, "Times New Roman", serif;

  /* Chrome heights */
  --header-h: 74px;
  --actionbar-h: 62px;
  /* Height of the sticky header (incl. its 4px rule) and of the menu page's
     sticky course rail. These defaults are exact at the default text size,
     so the sticky chrome lines up with JavaScript switched off; main.js
     then keeps them exact when the visitor scales text up. */
  --header-total: 78px;
  --rail-total: 0px;

  --wrap: 1240px;
}

/* ---------------------------------------------------------------------
   02  RESET & BASE
   ------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

/* The logo steps up from 46px to 54px at 1000px, so the header does too. */
@media (min-width: 1000px) { :root { --header-total: 82px; } }

/* Only the menu page carries a course rail. */
:root[data-page="menu"] { --rail-total: 69px; }
@media (max-height: 520px) { :root[data-page="menu"] { --rail-total: 0px; } }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keeps anchored headings — and anything scrolled to by keyboard focus —
     clear of the sticky header and course rail (WCAG 2.4.11). */
  scroll-padding-top: calc(var(--header-total) + var(--rail-total) + var(--s4));
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;          /* belt-and-braces against rotated labels */
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

figure { margin: 0; }        /* the UA's 40px side margins would shrink dish photos */

a { color: inherit; }

button { font: inherit; color: inherit; }

/* Every inline icon takes the colour of the control it sits in */
svg { fill: currentColor; }

/* Skip link — visible the moment it takes focus */
.skip-link {
  position: absolute;
  left: var(--s4);
  top: -100%;
  z-index: 999;
  padding: var(--s3) var(--s5);
  background: var(--terracotta);
  color: var(--white);
  border: var(--border);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.04em;
}
.skip-link:focus { top: var(--s4); }

/* One consistent, high-contrast focus treatment everywhere */
:focus-visible {
  outline: 4px solid var(--focus-color);
  outline-offset: 3px;
}

::selection { background: var(--terracotta); color: var(--white); }

/* ---------------------------------------------------------------------
   03  TYPOGRAPHY
   ------------------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s4);
  overflow-wrap: break-word;
}

h1 { font-size: clamp(2.5rem, 9vw, 5.75rem); }
h2 { font-size: clamp(2rem, 6.4vw, 4rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); letter-spacing: -0.01em; }
h4 { font-size: clamp(1.05rem, 2.2vw, 1.3rem); letter-spacing: 0; }

p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.0625rem, 2.1vw, 1.3125rem);
  line-height: 1.55;
  max-width: 60ch;
}

/* Small all-caps label that opens most sections */
.eyebrow {
  display: inline-block;
  margin: 0 0 var(--s4);
  padding: var(--s2) var(--s4);
  background: var(--black);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
}
.eyebrow--terracotta { background: var(--terracotta); color: var(--white); }
.eyebrow--cream { background: var(--cream); color: var(--black); }

/* Oversized editorial section numerals */
.sec-num {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 12vw, 8rem);
  line-height: 0.8;
  color: var(--black);
  -webkit-text-fill-color: transparent;   /* falls back to `color` if unsupported */
  -webkit-text-stroke: 2px var(--black);
  letter-spacing: -0.04em;
  margin: 0;
}
.is-dark .sec-num { color: var(--cream); -webkit-text-stroke-color: var(--cream); }

.u-terracotta { color: var(--terracotta); }

/* Terracotta type on deep green measures only 2.3:1, so on green surfaces the
   accent switches to a solid highlight block with white type (4.5:1). */
.hero .u-terracotta,
.page-hero .u-terracotta,
.slab--green .u-terracotta {
  display: inline-block;
  background: var(--terracotta);
  color: var(--white);
  line-height: 1;
  padding: 0.12em 0.16em 0.16em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.u-cream { color: var(--cream); }
.u-nowrap { white-space: nowrap; }

/* Sparingly used rotated tag */
.tag-rotate {
  display: inline-block;
  transform: rotate(-3deg);
  transform-origin: left center;
}

/* ---------------------------------------------------------------------
   04  LAYOUT PRIMITIVES
   ------------------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s5);
}

.section { padding-block: clamp(var(--s7), 9vw, var(--s9)); }
.section--tight { padding-block: clamp(var(--s6), 6vw, var(--s7)); }

/* Colour slabs. `.is-dark` flips the surface role tokens so nested
   components (rules, focus rings, stroked numerals) stay legible. */
.slab--cream { background: var(--cream); color: var(--black); }
.slab--green,
.slab--terracotta,
.slab--black { --rule: var(--black); }
.slab--green      { background: var(--green);      color: var(--cream); }
.slab--terracotta { background: var(--terracotta);  color: var(--white); }
.slab--black      { background: var(--black);       color: var(--cream); }

.is-dark {
  --surface: var(--green);
  --ink: var(--cream);
  --ink-muted: #D9D3C7;
  --focus-color: var(--white);
}
.is-dark .eyebrow { background: var(--cream); color: var(--black); }

/* Heavy horizontal rules between slabs */
.slab + .slab { border-top: var(--bd) solid var(--black); }

.section-head { max-width: 62ch; }

.grid { display: grid; gap: var(--s5); }

/* CSS-drawn texture — no decorative image downloads */
.tex-grid {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.09) 1px, transparent 1px);
  background-size: 34px 34px;
}
.is-dark.tex-grid {
  background-image:
    linear-gradient(to right, rgba(249, 246, 240, 0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(249, 246, 240, 0.10) 1px, transparent 1px);
}
.tex-dots {
  background-image: radial-gradient(rgba(0, 0, 0, 0.16) 1.6px, transparent 1.7px);
  background-size: 14px 14px;
}
.is-dark.tex-dots {
  background-image: radial-gradient(rgba(249, 246, 240, 0.18) 1.6px, transparent 1.7px);
}
.tex-check {
  background-image:
    linear-gradient(45deg, rgba(0, 0, 0, 0.06) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.06) 75%),
    linear-gradient(45deg, rgba(0, 0, 0, 0.06) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.06) 75%);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
}

/* ---------------------------------------------------------------------
   05  BUTTONS
   ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 52px;
  padding: var(--s3) var(--s5);
  border: var(--border);
  background: var(--white);
  color: var(--black);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.btn:hover,
.btn:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-hover);
}
.btn:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--black); }

.btn--primary { background: var(--terracotta); color: var(--white); }
.btn--dark    { background: var(--green);      color: var(--white); }
.btn--ink     { background: var(--black);      color: var(--cream); }
.btn--cream   { background: var(--cream);      color: var(--black); }
.btn--lg      { min-height: 62px; padding: var(--s4) var(--s6); font-size: clamp(1rem, 2vw, 1.25rem); }
.btn--block   { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}

/* Inline text links keep an obvious underline */
.link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}
.link:hover { background: var(--terracotta); color: var(--white); text-decoration-color: var(--white); }

/* ---------------------------------------------------------------------
   06  SLABS, CARDS & PANELS
   ------------------------------------------------------------------ */
.box {
  border: var(--border);
  background: var(--cream);
  color: var(--black);
  box-shadow: var(--shadow);
}
.box--white { background: var(--white); }
.box--green { background: var(--green); color: var(--cream); }
.box--terracotta { background: var(--terracotta); color: var(--white); }
.box--flat { box-shadow: none; }
.box__body { padding: clamp(var(--s5), 3.5vw, var(--s6)); }

/* Featured dish card */
.card {
  display: flex;
  flex-direction: column;
  border: var(--border);
  background: var(--white);
  color: var(--black);
  box-shadow: var(--shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.card:hover,
.card:focus-within {
  transform: translate(-4px, -4px);
  box-shadow: var(--shadow-hover);
}
.card__media {
  border-bottom: var(--border);
  background: var(--cream);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var(--s5); }
.card__index {
  display: block;
  margin-bottom: var(--s1);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--terracotta);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px var(--terracotta);
}
.card h3 { margin-bottom: var(--s2); }
.card p { font-size: 0.9875rem; color: #3A3A3A; }

/* Numbered fact / info rows */
.rows { border: var(--border); box-shadow: var(--shadow); background: var(--white); color: var(--black); }
.row {
  display: grid;
  grid-template-columns: 78px 1fr;
  align-items: center;
  gap: var(--s4);
  padding: var(--s5);
}
.row + .row { border-top: var(--border-thin); }
.row__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: 1;
  color: var(--terracotta);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px var(--terracotta);
}
.row p { font-size: 1.0625rem; }

/* Fact strip: SINCE 2015 / FAMILY-OWNED / ... */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: var(--border);
  background: var(--black);
  gap: var(--bd-thin);
  box-shadow: var(--shadow);
}
.facts li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  padding: var(--s4);
  background: var(--cream);
  color: var(--black);
  font-family: var(--font-display);
  font-size: clamp(0.8125rem, 1.7vw, 1rem);
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-align: center;
}
.facts li:nth-child(2n) { background: var(--terracotta); color: var(--white); }

.list-reset { list-style: none; margin: 0; padding: 0; }


/* Available to assistive tech, off-screen for sighted users */
.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
   07  ANNOUNCEMENT MARQUEE
   The text is duplicated only for the scrolling effect; the duplicate is
   hidden from assistive tech and the strip stays readable unanimated.
   ------------------------------------------------------------------ */
.announce {
  border-bottom: var(--bd) solid var(--black);
  background: var(--terracotta);
  color: var(--white);
  overflow: hidden;
}
.announce__track {
  display: flex;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.announce__item {
  flex: none;
  padding: var(--s2) var(--s5);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------------
   08  HEADER & NAVIGATION
   ------------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--green);
  color: var(--cream);
  border-bottom: var(--bd) solid var(--black);
  --focus-color: var(--white);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: var(--header-h);
  padding-block: var(--s2);
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  /* The white logo never sits on a light ground: the header slab is green */
  padding: var(--s1) 0;
}
.brand img {
  width: auto;
  height: 46px;
  max-width: 100%;
}

.nav__list {
  display: none;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s2) var(--s4);
  border: var(--bd-thin) solid transparent;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream);
}
.nav__link:hover { border-color: var(--cream); }
.nav__link[aria-current="page"] {
  background: var(--cream);
  color: var(--green);
  border-color: var(--black);
}
/* A town page is inside this section but is not the section's own page, so it
   gets a quieter marker than the filled "you are here" state. */
.nav__link[aria-current="true"] { box-shadow: inset 0 -4px 0 var(--cream); }
.nav__cta {
  min-height: 46px;
  padding: var(--s2) var(--s5);
  background: var(--terracotta);
  color: var(--white);
  border: var(--bd-thin) solid var(--black);
  box-shadow: 4px 4px 0 var(--black);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.nav__cta:hover,
.nav__cta:focus-visible {
  border-color: var(--black);
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0 var(--black);
}

/* Hamburger */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 46px;
  min-width: 46px;
  padding: var(--s2) var(--s3);
  background: var(--cream);
  color: var(--black);
  border: var(--bd-thin) solid var(--black);
  box-shadow: 4px 4px 0 var(--black);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle__bars { display: block; width: 20px; }
.nav-toggle__bars span {
  display: block;
  height: 3px;
  background: var(--black);
}
.nav-toggle__bars span + span { margin-top: 4px; }

/* Mobile panel */
.nav__panel {
  display: none;
  border-top: var(--bd) solid var(--black);
  background: var(--green);
  padding: var(--s4) 0 var(--s6);
}
.nav__panel.is-open { display: block; }
.nav__panel .nav__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s3);
}
.nav__panel .nav__link {
  justify-content: center;
  width: 100%;
  border-color: var(--cream);
  font-size: 1.125rem;
  min-height: 56px;
}
.nav__panel .nav__cta { justify-content: center; width: 100%; min-height: 58px; font-size: 1.125rem; }

/* ---------------------------------------------------------------------
   09  MOBILE ACTION BAR — call / directions / order
   ------------------------------------------------------------------ */
.action-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--black);
  border-top: var(--bd) solid var(--black);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.action-bar__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--actionbar-h);
  padding: var(--s2);
  background: var(--green);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  --focus-color: var(--white);
}
.action-bar__link + .action-bar__link { border-left: var(--bd-thin) solid var(--black); }
.action-bar__link--order { background: var(--terracotta); color: var(--white); }
.action-bar__link svg { width: 20px; height: 20px; }

/* Keep the fixed bar off the end of the document */
body { padding-bottom: calc(var(--actionbar-h) + env(safe-area-inset-bottom, 0px)); }

/* ---------------------------------------------------------------------
   10  HERO
   ------------------------------------------------------------------ */
.hero {
  background: var(--green);
  color: var(--cream);
  border-bottom: var(--bd) solid var(--black);
  padding-block: clamp(var(--s6), 7vw, var(--s8));
}
.hero__grid { display: grid; gap: clamp(var(--s6), 5vw, var(--s7)); align-items: start; }
.hero h1 { margin-bottom: var(--s5); }
.hero h1 .hero__line2 { display: block; width: fit-content; }
.hero__lede { max-width: 54ch; color: #EDE8DE; }
.hero__ctas { margin-block: var(--s6) var(--s5); }
.hero__service {
  font-family: var(--font-display);
  font-size: clamp(0.875rem, 2.2vw, 1.0625rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
}

/* Live open/closed block. Static markup already states the weekly hours,
   so this stays useful with JavaScript switched off. */
.status {
  display: grid;
  gap: var(--s1);
  margin-top: var(--s6);
  padding: var(--s4) var(--s5);
  border: var(--border);
  background: var(--cream);
  color: var(--black);
  box-shadow: var(--shadow-sm);
}
.status__state {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
/* The dot is decoration only — the state is always spelled out in words */
.status__dot {
  flex: none;
  width: 16px;
  height: 16px;
  border: 3px solid var(--black);
  background: var(--cream);
}
.status[data-state="open"] .status__dot { background: var(--green); }
.status[data-state="closed"] .status__dot { background: var(--terracotta); }
.status__detail { margin: 0; font-size: 0.9375rem; font-weight: 700; }

/* Two stacked dish photographs, offset for a layered look */
.hero__media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.hero__shot {
  border: var(--border);
  box-shadow: var(--shadow);
  background: var(--cream);
}
.hero__shot img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.hero__shot figcaption {
  padding: var(--s2) var(--s3);
  border-top: var(--border);
  background: var(--cream);
  color: var(--black);
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   11  HOMEPAGE SECTIONS
   ------------------------------------------------------------------ */
/* 01 / BREAKFAST and 02 / MEXICAN FAVORITES */
.panels { display: grid; gap: var(--s6); margin-top: var(--s7); }
.panel {
  display: flex;
  flex-direction: column;
  border: var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.panel--breakfast { background: var(--cream); color: var(--black); }
.panel--mexican { background: var(--green); color: var(--cream); --focus-color: var(--white); }
.panel__media { border-bottom: var(--border); aspect-ratio: 3 / 2; }
.panel__media img { width: 100%; height: 100%; object-fit: cover; }
.panel__body { padding: clamp(var(--s5), 4vw, var(--s6)); }
.panel__label {
  display: inline-block;
  margin-bottom: var(--s4);
  padding: var(--s2) var(--s4);
  background: var(--black);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 0.875rem;
  letter-spacing: 0.16em;
}
.panel--mexican .panel__label { background: var(--terracotta); color: var(--white); }
.panel h3 { font-size: clamp(1.5rem, 4vw, 2.25rem); }

.cards {
  display: grid;
  gap: var(--s5);
  grid-template-columns: 1fr;
  margin-top: var(--s7);
}

.note {
  margin-top: var(--s6);
  padding: var(--s4) var(--s5);
  border: var(--border-thin);
  background: var(--white);
  color: var(--black);
  font-size: 0.9375rem;
  font-weight: 700;
}

/* Story */
.story { display: grid; gap: clamp(var(--s6), 5vw, var(--s7)); align-items: center; }
.story__shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.story__shots img { border: var(--border); box-shadow: var(--shadow-sm); aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.story__shots figure:nth-child(2) { margin-top: var(--s5); }

/* Service strip */
.services { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.service {
  padding: var(--s6) var(--s5);
  border: var(--border);
  background: transparent;
  box-shadow: var(--shadow);
}
.service h3 { font-size: clamp(1.5rem, 4.5vw, 2.25rem); margin-bottom: var(--s3); }
.service p { font-size: 0.9875rem; }
.slab--green .service { background: rgba(249, 246, 240, 0.06); }

/* Visit / map */
.visit { display: grid; gap: clamp(var(--s6), 5vw, var(--s7)); align-items: start; }
.visit__facts { display: grid; gap: var(--s5); }
/* Address / hours / phone side by side where there is room for it */
@media (min-width: 760px) {
  .visit__facts--inline { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}
.fact-block {
  padding: var(--s5);
  border: var(--border);
  background: var(--white);
  color: var(--black);
  box-shadow: var(--shadow-sm);
}
.fact-block__label {
  display: block;
  margin-bottom: var(--s2);
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--terracotta);
}
.fact-block__value {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  line-height: 1.15;
  font-style: normal;
  text-transform: uppercase;
}
.fact-block__value a { text-decoration: none; }
.fact-block__value a:hover { text-decoration: underline; text-decoration-thickness: 3px; }

.map-frame {
  border: var(--border);
  box-shadow: var(--shadow);
  background: var(--cream);
  color: var(--black);
  line-height: 0;
}
.map-frame iframe {
  display: block;
  width: 100%;
  height: clamp(300px, 46vw, 460px);
  border: 0;
}

/* ---------------------------------------------------------------------
   12  CONTACT PAGE
   ------------------------------------------------------------------ */
.page-hero {
  background: var(--green);
  color: var(--cream);
  border-bottom: var(--bd) solid var(--black);
  padding-block: clamp(var(--s6), 7vw, var(--s8));
}
.page-hero__grid { display: grid; gap: clamp(var(--s6), 5vw, var(--s7)); align-items: center; }
.page-hero__shot { border: var(--border); box-shadow: var(--shadow-lg); }
.page-hero__shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.info-grid { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
.info-panel { display: flex; flex-direction: column; }
.info-panel .box__body { display: flex; flex-direction: column; gap: var(--s3); flex: 1; }
.info-panel h3 { margin-bottom: 0; }
.info-panel .btn { margin-top: auto; }
.info-panel address { font-style: normal; }

.hours-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.hours-table th,
.hours-table td { padding: var(--s2) 0; text-align: left; vertical-align: top; }
.hours-table th {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-right: var(--s4);
  white-space: nowrap;
}
.hours-table td { font-size: 0.9375rem; }
.hours-table tr + tr th,
.hours-table tr + tr td { border-top: 2px solid currentColor; }

/* Social icon links */
.socials { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.social {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 60px;
  padding: var(--s3) var(--s4);
  border: var(--border);
  background: var(--cream);
  color: var(--black);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.social:hover,
.social:focus-visible { transform: translate(-3px, -3px); box-shadow: var(--shadow); }
.social svg { flex: none; width: 26px; height: 26px; fill: currentColor; }

/* --- Order-direct comparison ------------------------------------------ */
.fee-compare {
  display: grid;
  gap: var(--s5);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fee-card {
  display: flex;
  flex-direction: column;
  padding: clamp(var(--s5), 3.5vw, var(--s6));
  border: var(--border);
  box-shadow: var(--shadow);
}
.fee-card--them { background: var(--white); color: var(--black); }
.fee-card--us   { background: var(--green); color: var(--cream); --focus-color: var(--white); }
.fee-card__label {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: var(--s4);
  padding: var(--s2) var(--s4);
  background: var(--black);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.fee-card--us .fee-card__label { background: var(--terracotta); color: var(--white); }
.fee-card h3 { font-size: clamp(1.375rem, 3.4vw, 1.875rem); margin-bottom: var(--s5); }

.fee-lines { margin: 0; padding: 0; list-style: none; }
.fee-line { padding-block: var(--s4); }
.fee-line + .fee-line { border-top: var(--border-thin); }
.fee-card--us .fee-line + .fee-line { border-top-color: var(--cream); }
.fee-line__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  margin: 0;
}
.fee-line__name {
  font-family: var(--font-display);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.fee-line__value {
  flex: none;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  color: var(--terracotta);
  white-space: nowrap;
}
.fee-card--us .fee-line__value { color: var(--cream); }
.fee-line__note { margin: var(--s2) 0 0; font-size: 0.9375rem; line-height: 1.5; color: #3A3A3A; }
.fee-card--us .fee-line__note { color: #D9D3C7; }

/* The stacked total, sized to be the thing you actually see */
.fee-total {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: var(--bd) solid currentColor;
}
.fee-total__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 11vw, 5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--terracotta);
}
.fee-card--us .fee-total__value { color: var(--cream); }
.fee-total__note {
  margin: var(--s3) 0 0;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Trademark / figures note */
.disclaimer-note {
  margin: 0;
  padding: var(--s5);
  border: var(--border-thin);
  background: var(--cream);
  color: #3A3A3A;
  font-size: 0.8125rem;
  line-height: 1.6;
}

@media (min-width: 860px) { .fee-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Review form ------------------------------------------------------
   The form itself is a third-party custom element that brings its own
   styling. We frame it and guarantee it cannot overflow; we do not try to
   restyle its internals, which would break on the vendor's next update. */
.review-embed {
  /* The vendor card is a fixed ~576px, so an unbounded panel would leave it
     floating in white space on a wide screen. */
  max-width: 720px;
  padding: clamp(var(--s5), 4vw, var(--s6));
  border: var(--border);
  background: var(--white);
  color: var(--black);
  box-shadow: var(--shadow);
}
.review-embed emr-collect-review-form {
  display: block;
  max-width: 100%;
  /* Reserves close to the widget's real rendered height so the content below
     it does not jump when it finishes loading. Measured at ~306px on desktop
     and ~439px on a phone; adjust if the vendor changes the form. Over-
     reserving only leaves whitespace inside the panel, which is harmless —
     under-reserving costs cumulative layout shift. */
  min-height: 320px;
}
@media (max-width: 759px) {
  .review-embed emr-collect-review-form { min-height: 440px; }
}
.review-embed :is(input, textarea, select, img, iframe) { max-width: 100%; }
.review-embed__note {
  margin: var(--s5) 0 0;
  padding-top: var(--s4);
  border-top: var(--border-thin);
  font-size: 0.875rem;
  color: #3A3A3A;
}

/* --- Delivery areas -------------------------------------------------- */

/* Hub: one card per town */
.area-grid {
  display: grid;
  gap: var(--s5);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}
.area-card {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  height: 100%;
  padding: var(--s5);
  border: var(--border);
  background: var(--white);
  color: var(--black);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.area-card:hover,
.area-card:focus-visible { transform: translate(-4px, -4px); box-shadow: var(--shadow-hover); }
.area-card__num {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: 1;
  color: var(--terracotta);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px var(--terracotta);
}
.area-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 3.6vw, 1.75rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.area-card__desc { margin: 0; font-size: 0.9375rem; color: #3A3A3A; }
.area-card__go {
  margin-top: auto;
  padding-top: var(--s3);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta);
}

/* Breadcrumb on a town page */
.crumbs { margin: 0 0 var(--s5); font-size: 0.875rem; font-weight: 700; }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.crumbs li { display: flex; align-items: center; gap: var(--s2); }
.crumbs li + li::before { content: "/"; opacity: 0.65; }
.crumbs a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.crumbs [aria-current="page"] { opacity: 0.85; }

/* Sibling links at the foot of a town page */
.area-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.area-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s2) var(--s4);
  border: var(--border-thin);
  background: var(--cream);
  color: var(--black);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.area-links a:hover,
.area-links a:focus-visible { background: var(--black); color: var(--cream); }

@media (min-width: 620px) { .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------------
   13  MENU PAGE
   ------------------------------------------------------------------ */
.cat-grid {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.cat {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 60px;
  padding: var(--s3) var(--s4);
  border: var(--border-thin);
  background: var(--white);
  color: var(--black);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cat__num { color: var(--terracotta); font-size: 0.8125rem; letter-spacing: 0.1em; }

/* --- Typed-out menu ------------------------------------------------- */

/* Wrapper around the typed menu. It is the sticky rail's containing block,
   so it must not establish a scroll container — `overflow` anything other
   than `visible` here silently unsticks the rail. */
.menu-body { overflow: visible; }

/* `.slab + .slab` can't see across this wrapper, so restore the structural
   black rule between the last course and whatever follows the menu. */
.menu-body + .slab { border-top: var(--bd) solid var(--black); }

/* Sticky course rail. It sits directly under the header and stays put for
   as long as the typed menu is on screen — it unsticks again at the end of
   .menu-body, so it never hovers over the PDF section or the closing CTA. */
.menu-rail {
  position: sticky;
  top: var(--header-total);
  z-index: 80;                 /* below the header (100), above the courses */
  background: var(--terracotta);
  color: var(--white);
  border-bottom: var(--bd) solid var(--black);
  --focus-color: var(--white);
}
.menu-rail > .wrap { padding-block: var(--s2); }

/* One row that scrolls sideways rather than stacking into a tall bar */
.menu-jump {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s3);
  margin: 0;
  padding: 0 0 5px;            /* room for the chips' hard shadow */
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.menu-jump li { flex: none; }
.menu-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s2) var(--s4);
  border: var(--border-thin);
  background: var(--cream);
  color: var(--black);
  box-shadow: 3px 3px 0 var(--black);
  font-family: var(--font-display);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.12s ease, color 0.12s ease;
}
/* Inverts rather than lifting: a translate would be clipped by the
   horizontally scrolling rail. */
.menu-jump a:hover,
.menu-jump a:focus-visible { background: var(--black); color: var(--cream); }

/* A short landscape phone can't spare header + rail + action bar, so the
   rail rides along with the page instead of pinning. */
@media (max-height: 520px) {
  .menu-rail { position: static; }
}

/* Course banner: BREAKFAST / MEXICAN / LUNCH ... */
.course__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3) var(--s5);
  margin-bottom: var(--s6);
  padding-bottom: var(--s4);
  border-bottom: var(--bd) solid currentColor;
}
.course__head h2 { margin: 0; }
.course__count {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* One menu section, e.g. Pancakes */
.menu-section {
  border: var(--border);
  background: var(--white);
  color: var(--black);
  box-shadow: var(--shadow);
  padding: clamp(var(--s5), 3.5vw, var(--s6));
}
.menu-section + .menu-section { margin-top: var(--s6); }
.menu-section > h3 {
  margin-bottom: var(--s2);
  font-size: clamp(1.25rem, 3.4vw, 1.875rem);
  color: var(--terracotta);
}
.menu-section__note {
  margin: 0 0 var(--s5);
  padding-bottom: var(--s4);
  border-bottom: var(--border-thin);
  font-size: 0.9375rem;
  font-weight: 700;
  color: #3A3A3A;
}

/* Item rows — menu-board leader between name and price */
.menu-items { display: grid; gap: var(--s5); margin: 0; padding: 0; list-style: none; }
.menu-item { margin: 0; }
/* flex-end, not baseline: when a long dish name wraps to two lines the
   leader and the price must follow its LAST line, not its first. */
.menu-item__head {
  display: flex;
  align-items: flex-end;
  gap: var(--s2);
  margin: 0;
}
.menu-item__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.menu-item__leader {
  flex: 1 1 auto;
  min-width: var(--s4);
  margin-bottom: 6px;
  border-bottom: 2px dotted var(--black);
}
.menu-item__price {
  flex: none;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--terracotta);
}
.menu-item__desc {
  margin: var(--s1) 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #3A3A3A;
  max-width: 56ch;
}

/* Two-price sections (2 Eggs / 4 Eggs, Large / Small) */
.menu-table { width: 100%; border-collapse: collapse; }
.menu-table caption { text-align: left; }
.menu-table th,
.menu-table td { padding: var(--s3) 0; }
.menu-table thead th {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta);
  text-align: right;
  border-bottom: var(--border-thin);
}
.menu-table thead th:first-child { text-align: left; }
.menu-table tbody th {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: normal;
  text-transform: uppercase;
  text-align: left;
  padding-right: var(--s4);
}
.menu-table tbody td {
  font-family: var(--font-display);
  text-align: right;
  white-space: nowrap;
  padding-left: var(--s4);
}
.menu-table tbody tr + tr th,
.menu-table tbody tr + tr td { border-top: 2px dotted var(--black); }

/* Add-ons under a section */
.menu-extras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin: var(--s5) 0 0;
  padding: var(--s3) 0 0;
  border-top: var(--border-thin);
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 700;
}

/* Protein / carne choices */
.menu-chips { margin-top: var(--s5); padding-top: var(--s4); border-top: var(--border-thin); }
.menu-chips__label {
  display: block;
  margin-bottom: var(--s3);
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.menu-chips ul { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.menu-chips li {
  padding: var(--s1) var(--s3);
  border: 2px solid var(--black);
  background: var(--cream);
  font-size: 0.8125rem;
  font-weight: 700;
}

/* Printed-menu notices */
.disclaimers { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.disclaimers li {
  padding: var(--s4) var(--s5);
  border: var(--border-thin);
  background: var(--white);
  color: var(--black);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* On a narrow phone the leader dots become a useless stub — drop them and
   let the price ride the end of the name instead. */
@media (max-width: 479px) {
  .menu-item__leader { display: none; }
  .menu-item__price { margin-left: auto; padding-left: var(--s3); }
  .menu-item__name { font-size: 0.9375rem; }
  .menu-section > h3 { font-size: 1.25rem; }
}

@media (min-width: 760px) {
  .menu-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s7); }
  .menu-items--single { grid-template-columns: 1fr; }
  .menu-item__name { font-size: 1.125rem; }
  .menu-item__price { font-size: 1.125rem; }
}

.pdf-frame {
  border: var(--border);
  box-shadow: var(--shadow);
  background: var(--cream);
  color: var(--black);
}
.pdf-frame object {
  display: block;
  width: 100%;
  height: clamp(420px, 120vw, 900px);
  border: 0;
}
/* Fallback shown whenever the browser cannot render the PDF inline */
.pdf-fallback { padding: clamp(var(--s5), 4vw, var(--s6)); text-align: left; }
.pdf-fallback h3 { margin-bottom: var(--s3); }

/* ---------------------------------------------------------------------
   14  404
   ------------------------------------------------------------------ */
.error-page {
  display: grid;
  place-items: center;
  min-height: 60vh;
  padding-block: clamp(var(--s7), 10vw, var(--s9));
  text-align: left;
}

/* ---------------------------------------------------------------------
   15  FOOTER
   ------------------------------------------------------------------ */
.site-footer {
  background: var(--green);
  color: var(--cream);
  border-top: var(--bd) solid var(--black);
  --focus-color: var(--white);
}
.footer__top { display: grid; gap: var(--s6); padding-block: clamp(var(--s7), 7vw, var(--s8)); }
.footer__brand img { height: 62px; width: auto; }
.footer__tagline {
  margin-top: var(--s5);
  padding-left: var(--s4);
  border-left: 8px solid var(--terracotta);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 3.4vw, 1.75rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--cream);
}
.mini-heading {
  margin-bottom: var(--s3);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #D9D3C7;
}
.footer__list { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.footer__list a,
.footer__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  font-weight: 700;
}
.footer__list a:hover,
.footer__contact a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 3px; }
.footer__contact address { font-style: normal; line-height: 1.7; }

.footer__socials { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s2); }
.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: var(--bd-thin) solid var(--cream);
  background: transparent;
  color: var(--cream);
  transition: transform 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.icon-link:hover,
.icon-link:focus-visible { background: var(--cream); color: var(--green); transform: translate(-2px, -2px); }
.icon-link svg { width: 24px; height: 24px; fill: currentColor; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  justify-content: space-between;
  align-items: center;
  padding-block: var(--s4);
  border-top: var(--bd-thin) solid var(--cream);
  font-size: 0.875rem;
}

/* ---------------------------------------------------------------------
   UTILITIES
   Declared after every component on purpose. Several components reset
   their own margin with the `margin: 0` shorthand; at equal specificity
   the later rule wins, so a utility placed above them would be silently
   cancelled wherever the two met.
   ------------------------------------------------------------------ */
.mt-3 { margin-top: var(--s3); }
.mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); }
.mt-7 { margin-top: var(--s7); }

/* ---------------------------------------------------------------------
   16  RESPONSIVE
   ------------------------------------------------------------------ */
@media (min-width: 700px) {
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__media { gap: var(--s5); }
  .hero__shot:nth-child(2) { margin-top: var(--s7); }
  .row { grid-template-columns: 120px 1fr; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.15fr 0.85fr; align-items: center; }
  /* Beside the headline the two dishes read better stacked and stepped in */
  .hero__media { grid-template-columns: 1fr; gap: var(--s5); }
  .hero__shot:nth-child(2) { margin-top: 0; margin-left: clamp(var(--s5), 4vw, var(--s7)); }
  .story { grid-template-columns: 1fr 1fr; }
  .visit { grid-template-columns: 1fr 1fr; }
  .page-hero__grid { grid-template-columns: 1.1fr 0.9fr; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: 1.4fr 1fr 1.2fr; gap: var(--s7); }
}

/* Desktop navigation takes over; the mobile chrome steps aside */
@media (min-width: 1000px) {
  .nav__list { display: flex; }
  .nav-toggle { display: none; }
  .nav__panel { display: none !important; }
  .action-bar { display: none; }
  body { padding-bottom: 0; }
  .brand img { height: 54px; }
}

/* While the mobile menu is open the page behind it must not scroll */
body.nav-open { overflow: hidden; }

/* ---------------------------------------------------------------------
   MOTION & PRINT
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* Strip stays legible: no animation, one readable copy, wrapping to fit.
     `flex: none` on the item must be released or it would keep its
     max-content width and get clipped on a narrow screen. */
  .announce__track { animation: none; width: 100%; flex-wrap: wrap; }
  .announce__item { flex: 1 1 auto; min-width: 0; white-space: normal; text-align: center; }
  .announce__item[aria-hidden="true"] { display: none; }
}

@media print {
  .site-header, .action-bar, .announce, .menu-rail, .map-frame, .pdf-frame { display: none; }
  body { padding-bottom: 0; background: #fff; }
  .box, .card, .btn { box-shadow: none; }
}