/* =============================================================
   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); }
.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); }
/* margin-top:auto pins every button to the card floor, so a two-line
   description does not knock one row out of alignment. */
.card .btn { margin-top: auto; width: 100%; }

/* ---- 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)); }
.site-footer h4 {
  color: var(--color-gold); font-size: var(--text-h4);
  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;
}

/* ---- 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; }