/* =============================================================
   styles.css — Stop N Shop Deli
   Built to the approved mockup: black page, parchment panels with
   gold rules, red header bars, checkerboard trim.
   Every value resolves to a var(--token) from the locked tokens.css.
   ============================================================= */

/* ---- Reset / base --------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-16));
}
@media (min-width: 1000px) {
  html { scroll-padding-top: calc(var(--header-h) + var(--space-6)); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-surface-inverse);
  color: var(--color-on-inverse);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

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

/* Headings are authored in Title Case in the markup.
   Never text-transform: capitalize — it capitalizes articles too. */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: var(--font-weight-head);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-head);
  text-wrap: balance;
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--color-gold); }
a:hover { color: var(--color-on-inverse); }

:focus-visible {
  outline: var(--border-width) solid var(--color-gold);
  outline-offset: var(--space-1);
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute; left: var(--space-4); top: calc(var(--space-16) * -1);
  z-index: 100;
  background: var(--color-brand); color: var(--color-on-brand);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--space-4); color: var(--color-on-brand); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Layout --------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 1000px) { .container { padding-inline: var(--space-8); } }

.section { padding-block: var(--space-6); }
.section--tight { padding-block: var(--space-4); }
@media (min-width: 1000px) {
  .section { padding-block: var(--space-8); }
  .section--tight { padding-block: var(--space-6); }
}

/* ---- Checkerboard trim -----------------------------------
   The diagonal cream/black check from the mockup, drawn with
   gradients so there is no image to load. */
.checkers {
  height: var(--space-4);
  background-image:
    linear-gradient(45deg, var(--color-surface) 25%, transparent 25%, transparent 75%, var(--color-surface) 75%),
    linear-gradient(45deg, var(--color-surface) 25%, transparent 25%, transparent 75%, var(--color-surface) 75%);
  background-color: var(--color-surface-inverse);
  background-size: var(--space-4) var(--space-4);
  background-position: 0 0, var(--space-2) var(--space-2);
}

/* ---- Buttons -------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  line-height: var(--leading-tight);
  text-decoration: none;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  border: var(--border-width) solid transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn--red { background: var(--color-brand); color: var(--color-on-brand); border-color: var(--color-brand-strong); }
.btn--red:hover { background: var(--color-brand-strong); color: var(--color-on-brand); }
.btn--outline-gold { background: transparent; color: var(--color-gold); border-color: var(--color-gold); }
.btn--outline-gold:hover { background: var(--color-gold); color: var(--color-surface-inverse); }
/* Secondary on parchment. The gold outline is built for the dark hero and
   falls under AA on cream, so panels get an ink outline instead. */
.btn--outline-ink { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn--outline-ink:hover { background: var(--color-ink); color: var(--color-surface); }
.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }

.linkish {
  font: inherit; font-weight: var(--font-weight-bold);
  color: var(--color-brand); background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline;
  text-underline-offset: var(--space-1);
}
.linkish:hover { color: var(--color-brand-strong); }

/* ---- Header --------------------------------------------- */
.site-header { position: relative; z-index: 40; background: var(--color-surface-inverse); }
.site-header__inner {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-3);
}
.brand { grid-row: 1; justify-self: start; position: relative; z-index: 3; }
.brand img { width: var(--logo-header); height: var(--logo-header); }

.site-nav { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; scrollbar-width: none; }
.site-nav::-webkit-scrollbar { display: none; }
/* min-width:100% lets justify-content centre the row while it still fits;
   once the links outgrow the header, max-content wins and the nav goes back
   to scrolling from the left instead of centring itself out of reach. */
.site-nav ul {
  display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0;
  width: max-content; min-width: 100%; justify-content: center;
}
/* At 24px the five links overran a 390px screen by ~29px and "Find Us" got
   clipped mid-word, which reads as broken rather than scrollable. */
@media (max-width: 599px) { .site-nav ul { gap: var(--space-4); } }
.site-nav a {
  color: var(--color-on-inverse); text-decoration: none;
  font-weight: var(--font-weight-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
  padding-block: var(--space-1);
  border-bottom: var(--border-width) solid transparent;
}
.site-nav a:hover { color: var(--color-gold); border-bottom-color: var(--color-gold); }

.header-cta { grid-row: 1; justify-self: end; text-align: right; }
.header-cta__label {
  display: block;
  font-size: var(--text-xs); font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--color-gold);
}
.header-cta__link {
  font-size: var(--text-sm); font-weight: var(--font-weight-bold);
  color: var(--color-on-inverse); text-decoration: none;
}
.header-cta__link:hover { color: var(--color-gold); }

@media (min-width: 1000px) {
  .site-header__inner {
    grid-template-columns: auto 1fr auto;
    padding-block: var(--space-4);
  }
  /* Badge runs large and hangs past the header so it breaks the
     checkerboard line, the way it does in the mockup. */
  .brand { margin-bottom: calc(var(--space-12) * -1); }
  .brand img { width: calc(var(--logo-hero) + var(--space-16)); height: calc(var(--logo-hero) + var(--space-16)); }
  .site-nav { grid-column: 2; grid-row: 1; overflow: visible; justify-self: center; }
  .site-nav ul { width: auto; min-width: 0; gap: var(--space-8); }
  .header-cta { grid-column: 3; }
}

/* ---- Hero ------------------------------------------------ */
/* Split hero: solid dark panel for the copy, one photo filling the other
   side. Layering a cut-out over a second background photo read as two
   competing images, so the store interior shot was dropped entirely. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--color-surface-inverse);
}
.hero__inner {
  position: relative;
  display: grid; grid-template-columns: 1fr;
  gap: var(--space-8);
  padding-block: var(--space-12) var(--space-16);
  line-height: var(--leading-inverse);
  letter-spacing: var(--tracking-inverse);
}
@media (min-width: 1000px) {
  .hero__inner {
    grid-template-columns: 1.15fr 1fr; align-items: center;
    padding-block: var(--space-16) var(--space-16);
    min-height: 38rem;
  }
}
.hero h1 { color: var(--color-on-inverse); margin-bottom: var(--space-4); }
.hero h1 em { font-style: normal; color: var(--color-gold); }
.hero__lede {
  font-size: var(--text-lg);
  color: var(--color-on-inverse);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-weight: var(--font-weight-bold);
  max-width: 24ch;
  margin-bottom: var(--space-8);
}

.hero__points {
  list-style: none; margin: 0 0 var(--space-8); padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
  max-width: 34rem;
}
.hero__points li { display: grid; gap: var(--space-1); align-content: start; }
.hero__points li + li {
  border-left: var(--border-width-hair) solid var(--gold-hairline);
  padding-left: var(--space-4);
}
.hero__icon {
  width: var(--space-12); height: var(--space-12);
  display: grid; place-items: center;
  border: var(--border-width-hair) solid var(--color-gold);
  border-radius: var(--radius-pill);
  color: var(--color-gold);
  margin-bottom: var(--space-2);
}
.hero__icon svg { width: var(--space-6); height: var(--space-6); }
.hero__point-name {
  font-size: var(--text-xs); font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--color-gold);
}
.hero__point-note { font-size: var(--text-sm); color: var(--color-on-inverse-muted); }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* One photo. `50% - 50vw` is the exact distance from the centred container's
   content edge to the viewport edge, so the image bleeds off-screen at any
   width. .hero clips the overshoot caused by 100vw counting the scrollbar.

   The seam against the dark panel is softened with a mask on the ONE edge
   that meets it, so the photo dissolves into the panel instead of ending on
   a ruled line. This is not the old all-four-sides feathering: masking every
   edge is what made the previous cut-out read as pasted on. */
.hero__food {
  margin-inline: calc(50% - 50vw);
  margin-bottom: calc(var(--space-16) * -1);
}
.hero__food img {
  display: block;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 16%);
}
@media (min-width: 1000px) {
  .hero__food {
    /* Stretch past the inner padding so the photo meets the top and bottom
       edges of the hero rather than floating in the middle of it. */
    align-self: stretch;
    margin-inline: 0 calc(50% - 50vw);
    margin-block: calc(var(--space-16) * -1);
  }
  /* Side by side the seam is vertical, so the fade turns with it. */
  .hero__food img {
    aspect-ratio: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  }
}

/* ---- Parchment panel ------------------------------------- */
.panel {
  background: var(--color-surface);
  color: var(--color-ink);
  border: var(--border-width) solid var(--color-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}
@media (min-width: 1000px) { .panel { padding: var(--space-8); } }
.panel--dark { background: var(--color-surface-inverse); color: var(--color-on-inverse); }
.panel h2, .panel h3 { color: var(--color-ink); }
.panel--dark h2, .panel--dark h3 { color: var(--color-gold); }

/* Deli paper. Flat cream read as a plastic swatch next to the mockup's
   kraft stock, so the panels get fibre grain plus broad blotching. Both are
   generated (feTurbulence + gradients), so this costs no image request.
   `isolation: isolate` + `z-index: -1` keeps the layer above the panel's own
   background but below its content, without escaping to the page behind. */
.panel, .card { position: relative; isolation: isolate; }
.panel:not(.panel--dark)::before,
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 16% 6%, rgba(255,255,255,.8), rgba(255,255,255,0) 58%),
    radial-gradient(100% 85% at 88% 98%, rgba(150,90,40,.14), rgba(150,90,40,0) 62%),
    radial-gradient(75% 60% at 68% 22%, rgba(150,90,40,.07), rgba(150,90,40,0) 70%);
  background-size: 180px 180px, auto, auto, auto;
  mix-blend-mode: multiply;
  /* Grayscale noise under multiply desaturates the cream, so this stays low
     and the blotching is tinted warm. Past ~.35 the parchment turns grey. */
  opacity: .28;
}
.card::before { opacity: .2; }

/* Inset hairline, the mockup's double rule. Purely decorative, so it sits
   above the texture but must not swallow clicks on anything inside. */
.panel:not(.panel--dark)::after {
  content: ""; position: absolute; inset: var(--space-2); z-index: -1;
  border: var(--border-width-hair) solid var(--rule-inset);
  border-radius: calc(var(--radius-lg) - var(--space-1));
  pointer-events: none;
}

.panel__note {
  margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: var(--border-width-hair) solid var(--color-line-strong);
  display: grid; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--color-ink-muted);
  text-align: center;
}
.panel__note .linkish { justify-self: center; }

/* Italic flourish, used for "Stocked Up." and "It's All Good!" */
.script {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: var(--font-weight-bold);
  font-size: var(--text-h3);
  color: var(--color-ink);
  display: block;
  line-height: var(--leading-tight);
}
.script--gold { color: var(--color-gold); text-decoration: underline; text-underline-offset: var(--space-1); }

/* ---- Stocked Up band ------------------------------------- */
.stocked { display: grid; gap: var(--space-6); align-items: center; }
/* Stacked, the lead sat left while the icon row and badge under it were
   centred. It only goes back to flush-left once it has its own column. */
.stocked__lead { text-align: center; }
@media (min-width: 1100px) {
  .stocked { grid-template-columns: max-content minmax(0, 1fr) max-content; gap: var(--space-8); }
  .stocked__lead { text-align: left; }
  .swoosh { margin-inline: 0; }
}
.stocked__lead h2 { color: var(--color-accent-strong); margin: 0; }
/* Hand-drawn underline. Two passes at different weights so it reads as a
   brush mark rather than a border-bottom. */
.swoosh {
  display: block; width: 78%; max-width: 15rem; height: auto;
  margin-top: var(--space-1); margin-inline: auto;
  color: var(--color-brand);
}
.stocked__items {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-4);
  text-align: center;
}
@media (min-width: 700px) { .stocked__items { grid-template-columns: repeat(4, 1fr); } }
.stocked__items li { display: grid; justify-items: center; gap: var(--space-2); }
/* Two-tone on purpose: solid ink glyph inside a red ring. The previous red
   outline-on-red-ring gave the row no weight against the parchment. */
.disc {
  width: var(--space-16); height: var(--space-16);
  display: grid; place-items: center;
  border: var(--border-width) solid var(--color-brand);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
}
.disc svg { width: var(--space-8); height: var(--space-8); fill: currentColor; }
.disc-label {
  font-size: var(--text-xs); font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--color-ink);
}
.stocked__badge { margin: 0; display: grid; justify-items: center; }
.stocked__badge span {
  display: grid; place-items: center; text-align: center;
  /* Wider than --space-24 so the six-word line actually fits inside the
     circle instead of spilling past the panel edge. */
  width: calc(var(--space-24) + var(--space-12));
  height: calc(var(--space-24) + var(--space-12));
  border-radius: var(--radius-pill);
  background: var(--color-brand); color: var(--color-on-brand);
  font-size: var(--text-xs); font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-head); text-transform: uppercase;
  padding: var(--space-6); line-height: var(--leading-tight);
}

/* ---- Ruled section head ---------------------------------- */
.rule-head {
  display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: center;
  gap: var(--space-3); margin-bottom: var(--space-6);
}
.rule-head h2 { margin: 0; color: var(--color-accent-strong); text-align: center; }
/* Was a single flat 1px bar. The mockup's marks are three tapering passes,
   which is most of what made that heading feel drawn rather than ruled. */
.rule-head__mark {
  display: block; width: 100%; max-width: 11rem; height: var(--space-6);
  color: var(--color-brand);
}
/* Both marks taper in toward the heading, so the left one hugs its right
   edge and vice versa. */
.rule-head__mark:first-child { justify-self: end; }
.rule-head__mark:last-child { justify-self: start; }
.rule-head__star {
  display: block; color: var(--color-brand);
  width: calc(var(--space-4) + var(--space-1));
  height: calc(var(--space-4) + var(--space-1));
}
@media (max-width: 599px) {
  /* The marks collapse to slivers at phone width and just add noise. */
  .rule-head { grid-template-columns: auto auto auto; justify-content: center; }
  .rule-head__mark { display: none; }
}

/* ---- Menu highlight cards -------------------------------- */
/* Flex-wrap rather than grid: five cards never divide evenly into two or
   three columns, and grid stranded the leftover card hard against the left
   edge. `justify-content: center` centres whatever the last row holds at
   every breakpoint, so the basis below is the column count. */
.cards {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4);
}
.card { flex: 0 1 calc((100% - var(--space-4)) / 2); }
@media (min-width: 700px)  { .card { flex-basis: calc((100% - var(--space-4) * 2) / 3); } }
@media (min-width: 1100px) { .card { flex-basis: calc((100% - var(--space-4) * 4) / 5); } }
.card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-2);
  background: var(--color-surface-raised);
  border: var(--border-width-hair) solid var(--color-line-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.card__media { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-sm); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__name {
  font-family: var(--font-head); font-weight: var(--font-weight-head);
  font-size: var(--text-h4); letter-spacing: var(--tracking-head);
  color: var(--color-brand); line-height: var(--leading-tight);
  margin-top: var(--space-1);
}
.card__desc { font-size: var(--text-sm); color: var(--color-ink-muted); }

/* One pair of actions above the cards, replacing the button that used to sit
   in every card. Five identical red buttons competed with each other and
   buried the one thing most people want, which is the menu itself. */
.menu-actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
/* Market Items is the one card that kept its button, since it points at the
   drinks column rather than opening the deli menu the pair above already
   covers. margin-top:auto floors it if the row ever grows a taller card. */
.card .btn { margin-top: auto; }

/* ---- Why / About ----------------------------------------- */
.why { display: grid; gap: var(--space-8); }
@media (min-width: 1000px) { .why { grid-template-columns: 1fr 1fr auto; align-items: center; } }
.why h2 { margin-bottom: var(--space-6); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.ticks li {
  position: relative; padding-left: var(--space-8);
  color: var(--color-on-inverse);
}
.ticks li::before {
  content: "";
  position: absolute; left: 0; top: 0.28em;
  width: var(--space-4); height: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}
.ticks li::after {
  content: "";
  position: absolute; left: var(--space-1); top: 0.5em;
  width: var(--space-2); height: var(--space-1);
  border-left: var(--border-width-hair) solid var(--color-on-brand);
  border-bottom: var(--border-width-hair) solid var(--color-on-brand);
  transform: rotate(-45deg);
}
.why__photo {
  background: var(--color-surface);
  padding: var(--space-3) var(--space-3) var(--space-8);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  transform: rotate(-1.5deg);
}
.why__thanks {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-gold);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
  color: var(--color-ink);
}
.why__thanks-top {
  font-family: var(--font-head); font-weight: var(--font-weight-head);
  font-size: var(--text-h3); color: var(--color-brand);
  letter-spacing: var(--tracking-head); margin-bottom: var(--space-2);
}
.why__thanks-mid {
  font-weight: var(--font-weight-bold); color: var(--color-accent-strong);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  font-size: var(--text-sm); margin-bottom: var(--space-4);
}
.why__thanks .script { color: var(--color-brand); }

/* ---- Trio band ------------------------------------------- */
.trio { display: grid; gap: var(--space-8); text-align: center; }
@media (min-width: 900px) { .trio { grid-template-columns: repeat(3, 1fr); gap: 0; } }
.trio__col { padding-inline: var(--space-4); }
@media (min-width: 900px) {
  .trio__col + .trio__col { border-left: var(--border-width-hair) solid var(--color-line-strong); }
}
.trio h3 { color: var(--color-ink); margin-bottom: var(--space-2); }
.trio__hungry { color: var(--color-brand); }
.trio__sub {
  font-size: var(--text-sm); font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--color-ink-muted); margin-bottom: var(--space-4);
}
.trio__img { border-radius: var(--radius-md); border: var(--border-width-hair) solid var(--color-line-strong); }

.apps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.apps a {
  display: block;
  background: var(--color-brand); color: var(--color-on-brand);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  font-size: var(--text-sm); text-decoration: none;
}
.apps a:hover { background: var(--color-brand-strong); color: var(--color-on-brand); }

/* ---- Footer ---------------------------------------------- */
.site-footer { background: var(--color-surface-inverse); margin-top: var(--space-8); }
/* Stacked, every column ran flush left against a wide empty right side while
   the legal line underneath was centred. Centred until the columns exist. */
.site-footer__inner {
  display: grid; gap: var(--space-8);
  padding-block: var(--space-12);
  line-height: var(--leading-inverse);
  letter-spacing: var(--tracking-inverse);
  justify-items: center; text-align: center;
}
@media (min-width: 900px) {
  .site-footer__inner {
    grid-template-columns: auto repeat(3, 1fr);
    align-items: start; gap: var(--space-12);
    justify-items: start; text-align: left;
  }
}
.site-footer__brand img { width: calc(var(--logo-footer) + var(--space-8)); height: calc(var(--logo-footer) + var(--space-8)); }
/* Footer column headings are <h2> for semantics, not <h4>. On the home page a
   preceding <h3> made <h4> legal, but the utility pages have no <h3>, so <h4>
   skipped a level straight from the page <h1>. Size is pinned to the h4 step so
   the rendering is unchanged. */
.site-footer h2 {
  color: var(--color-gold); font-size: var(--text-h4);
  letter-spacing: var(--tracking-head);
  margin-bottom: var(--space-4);
}
.site-footer address { font-style: normal; color: var(--color-on-inverse-muted); margin-bottom: var(--space-3); }
.fhours { margin: 0; display: grid; gap: var(--space-1); }
.fhours dt {
  font-size: var(--text-xs); font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--color-gold); margin-top: var(--space-2);
}
.fhours dd { margin: 0; color: var(--color-on-inverse-muted); font-variant-numeric: tabular-nums; }
.flink { display: block; color: var(--color-on-inverse); font-weight: var(--font-weight-bold); margin-bottom: var(--space-1); }
.flink:hover { color: var(--color-gold); }
.flist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.flist a { color: var(--color-on-inverse); font-weight: var(--font-weight-bold); text-decoration: none; }
.flist a:hover { color: var(--color-gold); }
.site-footer__legal {
  text-align: center; font-size: var(--text-sm);
  color: var(--color-on-inverse-muted);
  padding-block: var(--space-6);
  margin: 0;
}

/* Policy links sit on the dark footer, so they take the full-strength
   on-inverse colour rather than the muted legal grey, and they stay
   underlined. Un-underlined links inside a text block fail both the contrast
   check and axe's link-in-text-block rule. */
.site-footer__policy {
  display: inline-flex; flex-wrap: wrap;
  justify-content: center; gap: var(--space-4);
  margin-inline-start: var(--space-4);
}
.site-footer__policy a {
  color: var(--color-on-inverse);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---- Touch targets ----------------------------------------
   Every interactive element cleared 44px wide but several sat at 17-27px tall,
   which fails the 48px tap-target guidance on a phone. Scoped to coarse
   pointers so the approved desktop proportions are untouched.

   Two techniques, chosen per context:
   - Stacked links in the footer and the delivery list get REAL height. They
     have room to grow and growing them keeps neighbours from overlapping.
   - The header nav, the header delivery link, and the inline "open the menu"
     button get an invisible ::after overlay instead, so the hit area grows
     without changing the header height or reflowing the line. These sit in
     single rows with no interactive neighbour within 48px vertically, so the
     overlays cannot steal each other's taps. */
@media (pointer: coarse) {
  .btn, .btn--sm { min-height: 48px; }

  /* Padding, not flex — these are block-level and must keep stacking one per
     line. An inline-flex here collapses "Get Directions" and the phone number
     onto a single row. */
  .flink,
  .flist a,
  .site-footer__policy a {
    display: block;
    padding-block: var(--space-3);
  }
  .flink { margin-bottom: 0; }
  /* The stacked list absorbs its gap into the new padding. The policy row is
     horizontal, so it keeps its gap or the two links run together. */
  .flist { gap: 0; }

  .site-nav a,
  .header-cta__link,
  .linkish { position: relative; }

  .site-nav a::after,
  .header-cta__link::after,
  .linkish::after {
    content: ""; position: absolute;
    left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    height: 48px;
  }
}

/* ---- Utility pages (404, privacy, terms) ------------------
   Shared by the pages that exist for error handling and legal
   compliance rather than to rank. Same parchment panel as the
   home page, with a readable measure and no marketing furniture. */
.utility { padding-block: var(--space-12); }
.utility__panel { max-width: 52rem; margin-inline: auto; }
.utility__eyebrow {
  font-family: var(--font-head);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-gold-deep);
  margin: 0 0 var(--space-2);
}
.utility__panel h1 { font-size: var(--text-h2); color: var(--color-ink); }
.utility__updated {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-6);
}
.utility__actions {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  margin-top: var(--space-6);
}

.legal { max-width: 44rem; }
.legal h2 {
  font-size: var(--text-h4);
  margin-top: var(--space-8);
  margin-bottom: var(--space-2);
}
.legal h2:first-of-type { margin-top: var(--space-6); }
.legal p, .legal li { color: var(--color-ink); }
.legal ul { padding-inline-start: var(--space-6); margin: 0 0 var(--space-4); }
.legal li { margin-bottom: var(--space-2); }
.legal a { color: var(--color-gold-deep); text-decoration: underline; }

/* ---- Menu modal ------------------------------------------ */
.menu-modal {
  width: min(96vw, 56rem);
  max-height: 92dvh;
  padding: 0;
  border: var(--border-width) solid var(--color-gold);
  border-radius: var(--radius-lg);
  background: var(--color-surface-inverse);
  color: var(--color-on-inverse);
  overflow: hidden;
}
.menu-modal::backdrop { background: var(--scrim-heavy); }
.menu-modal__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-gold);
  background: var(--color-brand);
}
.menu-modal__bar h2 { margin: 0; font-size: var(--text-h4); color: var(--color-on-brand); }
.menu-modal__close {
  font: inherit; font-size: var(--text-h3); line-height: 1;
  background: transparent; border: 0; cursor: pointer;
  color: var(--color-on-brand);
  padding: 0 var(--space-2);
}
.menu-modal__close:hover { color: var(--color-gold); }
.menu-modal__body { overflow: auto; max-height: calc(92dvh - var(--space-16)); }
.menu-modal__body img { width: 100%; height: auto; }