/* ==========================================================================
   TASTY BITES — Indian Take Away, Kimmage, Dublin 12
   Hand-written stylesheet. No framework, no build step.

   CONTENTS
   01. Design tokens (palette, type scale, spacing, radii, shadows)
   02. Reset & base elements
   03. Layout helpers & utilities
   04. Buttons
   05. Scroll-reveal animation
   06. Site header, desktop nav, burger
   07. Mobile drawer
   08. Hero
   09. About / Incredible Taste band
   10. Feature strip
   11. Menu (sticky tabs, dish rows, allergen key)
   12. Order band (QR + phones)
   13. Gallery tiles
   14. Contact cards & map placeholder
   15. Footer
   16. Reduced motion, selection, print
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   Palette sampled directly from assets/img/logo.png.
   ========================================================================== */
:root {
  /* ---- Brand palette (from the logo) ---- */
  --brand-orange:   #F75708;   /* PRIMARY — the logo's outer stroke / banner  */
  --brand-red:      #EA2B00;   /* the chilli red                              */
  --brand-crimson:  #C80101;   /* deep chilli shadow                          */
  --brand-maroon:   #680000;   /* darkest chilli shadow                       */
  --brand-gold:     #FAC526;   /* ACCENT — the "Bites" lettering              */
  --brand-amber:    #FA981A;   /* mid-tone of the gold gradient               */
  --ink:            #000000;   /* the logo's heavy black outline              */
  --cream:          #FDFEFE;   /* the white lettering                         */

  /* ---- Accessible text variants -------------------------------------------
     #F75708 on white is only ~3.1:1, which passes AA for LARGE text only.
     Use --brand-orange for headings 24px+, borders, icons and fills.
     Use --orange-ink for small text on light backgrounds: it clears 4.5:1 on
     white (5.0:1) AND on the warm off-white sections (4.7:1 on #FBF6EF).
     --crimson-ink is 7.4:1 on white and is used for prices and allergen chips.
     ------------------------------------------------------------------------ */
  --orange-ink:     #C74000;
  --crimson-ink:    #B00000;

  /* ---- Neutrals derived from the logo's black + white ---- */
  --charcoal-900:   #0B0B0C;   /* darkest section background */
  --charcoal-800:   #141416;
  --charcoal-700:   #1E1E21;
  --charcoal-600:   #2B2B30;
  --text-900:       #17140F;   /* body copy on light */
  --text-700:       #4A423B;   /* secondary copy on light */
  --text-500:       #6E6259;   /* muted copy on light */
  --line:           #E7E0D8;   /* hairlines on light */
  --surface:        #FFFFFF;
  --surface-alt:    #FBF6EF;   /* warm off-white section background */
  --surface-sunk:   #F5EDE2;

  /* ---- Signature gradients ---- */
  --grad-brand:     linear-gradient(100deg, var(--brand-gold) 0%, var(--brand-amber) 46%, var(--brand-orange) 100%);
  --grad-brand-rev: linear-gradient(100deg, var(--brand-orange) 0%, var(--brand-amber) 54%, var(--brand-gold) 100%);
  --grad-ember:     linear-gradient(140deg, var(--brand-orange) 0%, var(--brand-red) 45%, var(--brand-crimson) 100%);
  --grad-deep:      linear-gradient(160deg, var(--brand-crimson) 0%, var(--brand-maroon) 100%);

  /* ---- Type ---- */
  --font-display: "Baloo 2", "Trebuchet MS", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale (mobile -> 1600px) */
  --fs-eyebrow: clamp(.72rem, .68rem + .18vw, .82rem);
  --fs-small:   clamp(.82rem, .79rem + .16vw, .9rem);
  --fs-body:    clamp(.95rem, .92rem + .22vw, 1.06rem);
  --fs-lede:    clamp(1.04rem, .98rem + .42vw, 1.22rem);
  --fs-h3:      clamp(1.12rem, 1.04rem + .42vw, 1.35rem);
  --fs-h2:      clamp(1.65rem, 1.32rem + 1.55vw, 2.7rem);
  --fs-h1:      clamp(2.3rem, 1.55rem + 3.5vw, 4.6rem);

  /* ---- Spacing rhythm (8px base) ---- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.75rem; --sp-8: 4rem;
  --sp-9: 6rem;
  --section-y: clamp(3.5rem, 2.2rem + 5.5vw, 7rem);

  /* ---- Structure ---- */
  --shell:      1200px;
  --gutter:     clamp(1rem, .55rem + 2.1vw, 2.25rem);
  --header-h:   84px;          /* header at rest            */
  --header-h-sm: 64px;         /* header once condensed     */

  /* ---- Radii & shadows ---- */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-xl: 32px;  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(11,11,12,.06), 0 2px 6px rgba(11,11,12,.05);
  --sh-2: 0 6px 18px rgba(11,11,12,.09), 0 2px 5px rgba(11,11,12,.05);
  --sh-3: 0 18px 44px rgba(11,11,12,.14), 0 4px 12px rgba(11,11,12,.07);
  --sh-glow: 0 10px 26px rgba(247,87,8,.32);

  --ease: cubic-bezier(.22,.68,.34,1);
}

@media (max-width: 900px) {
  :root { --header-h: 68px; --header-h-sm: 58px; }
}


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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;         /* JS handles offset scrolling; this is the fallback */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-900);
  background: var(--surface);
  overflow-x: hidden;              /* belt-and-braces against horizontal scroll */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; border: 0; }
svg { display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  margin: 0 0 var(--sp-4);
  letter-spacing: -.005em;
}
p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }

a { color: var(--orange-ink); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--brand-crimson); }

button { font: inherit; color: inherit; }

/* Focus rings — visible for keyboard users, quiet for mouse users */
:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark :focus-visible,
.hero :focus-visible,
.order :focus-visible,
.site-footer :focus-visible,
.drawer :focus-visible { outline-color: var(--brand-gold); }

/* Anchor targets clear the sticky header even without JS */
section[id] { scroll-margin-top: calc(var(--header-h-sm) + 12px); }


/* ==========================================================================
   03. LAYOUT HELPERS & UTILITIES
   ========================================================================== */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 0; left: 50%;
  transform: translate(-50%, -140%);
  z-index: 200;
  background: var(--charcoal-900); color: var(--cream);
  font-weight: 600; font-size: var(--fs-small);
  padding: .8rem 1.4rem;
  border-radius: 0 0 var(--r-md) var(--r-md);
  border: 2px solid var(--brand-gold); border-top: 0;
  text-decoration: none;
  transition: transform .18s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); color: var(--cream); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange-ink);
  margin: 0 0 var(--sp-3);
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 3px; flex: none;
  border-radius: var(--r-pill);
  background: var(--grad-brand);
}
.eyebrow--onDark { color: var(--brand-gold); }

.h2 { font-size: var(--fs-h2); color: var(--text-900); }
.h2--onDark { color: var(--cream); }

/* Gradient text. The @supports guard means engines without background-clip:text
   simply render solid gold instead of invisible text. */
.grad-text { color: var(--brand-gold); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .grad-text {
    background-image: var(--grad-brand);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.section-head { max-width: 62ch; margin-bottom: var(--sp-7); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head__sub { color: var(--text-700); font-size: var(--fs-lede); margin-bottom: 0; }
.section-head__cta { margin: var(--sp-5) 0 0; }

.placeholder-flag {
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--crimson-ink);
  background: #FDECE4;
  border: 1px dashed var(--brand-orange);
  border-radius: var(--r-pill);
  padding: .18rem .6rem;
}


/* ==========================================================================
   04. BUTTONS
   All variants keep a >=44px tap target.
   ========================================================================== */
.btn {
  --btn-py: .78rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 44px;
  padding: var(--btn-py) 1.4rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: .015em;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), filter .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn__ico { width: 1.05em; height: 1.05em; flex: none; }

.btn--sm { --btn-py: .6rem; padding-inline: 1.15rem; font-size: .84rem; }
.btn--lg { --btn-py: 1rem; padding-inline: 2rem; font-size: clamp(.92rem, .88rem + .3vw, 1.05rem); }
.btn--block { display: flex; width: 100%; }

/* Signature gradient button — gold -> amber -> orange (the "Bites" lettering) */
.btn--gradient {
  color: var(--ink);
  background: var(--grad-brand);
  background-size: 160% 100%;
  background-position: 0% 50%;
  box-shadow: var(--sh-glow);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-position .45s var(--ease);
}
.btn--gradient:hover {
  color: var(--ink);
  background-position: 100% 50%;
  box-shadow: 0 14px 32px rgba(247,87,8,.42);
}

.btn--solid {
  color: var(--cream);
  background: var(--brand-crimson);
  box-shadow: var(--sh-2);
}
.btn--solid:hover { color: var(--cream); background: var(--brand-maroon); }

.btn--outline-light {
  color: var(--cream);
  border-color: rgba(253,254,254,.55);
  background: rgba(253,254,254,.06);
  backdrop-filter: blur(2px);
}
.btn--outline-light:hover {
  color: var(--ink);
  background: var(--cream);
  border-color: var(--cream);
}

.btn--ghost-dark {
  color: var(--cream);
  border-color: rgba(253,254,254,.35);
  background: transparent;
}
.btn--ghost-dark:hover { color: var(--ink); background: var(--brand-gold); border-color: var(--brand-gold); }


/* ==========================================================================
   05. SCROLL-REVEAL (driven by IntersectionObserver in main.js)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .62s var(--ease), transform .62s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
/* If JS never runs, nothing should stay invisible. */
html.no-js .reveal { opacity: 1; transform: none; }


/* ==========================================================================
   06. SITE HEADER
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(11,11,12,.82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(253,254,254,.08);
  transition: background-color .28s var(--ease), box-shadow .28s var(--ease),
              border-color .28s var(--ease);
}
.site-header[data-elevated="true"] {
  background: rgba(11,11,12,.97);
  box-shadow: 0 10px 30px rgba(0,0,0,.34);
  border-bottom-color: rgba(250,197,38,.28);
}

.header__inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--sp-4);
  transition: height .28s var(--ease);
}
.site-header[data-elevated="true"] .header__inner { height: var(--header-h-sm); }

/* Brand lockup */
.brand {
  display: flex; align-items: center; gap: .7rem;
  margin-right: auto;
  text-decoration: none;
  min-height: 44px;
}
.brand__mark {
  width: auto; height: 46px;
  transition: height .28s var(--ease);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.site-header[data-elevated="true"] .brand__mark { height: 36px; }

/* The header brand is the logo alone — the wordmark is already part of the
   logo artwork, so there is no separate text beside it. */

/* Desktop nav */
.nav-desktop { display: none; }
.nav-desktop__list { display: flex; align-items: center; gap: clamp(.2rem, -.4rem + 1.4vw, 1rem); }

.nav-link {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 0 .7rem;
  font-weight: 500; font-size: .95rem;
  color: rgba(253,254,254,.86);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: color .2s var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute; left: .7rem; right: .7rem; bottom: 12px;
  height: 3px; border-radius: var(--r-pill);
  background: var(--grad-brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav-link:hover { color: var(--cream); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--brand-gold); }
.nav-link.is-active::after { transform: scaleX(1); }

.header__cta { display: none; }

/* Burger */
.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  background: rgba(253,254,254,.08);
  border: 1px solid rgba(253,254,254,.18);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.burger:hover { background: rgba(250,197,38,.18); border-color: var(--brand-gold); }
.burger__bars { display: grid; gap: 5px; width: 22px; }
.burger__bars i {
  display: block; height: 2.5px; border-radius: 2px;
  background: var(--cream);
  transition: transform .26s var(--ease), opacity .2s var(--ease);
}
.burger__bars i:nth-child(2) { width: 70%; background: var(--brand-gold); }
.burger[aria-expanded="true"] .burger__bars i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bars i:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (min-width: 900px) {
  .nav-desktop { display: block; }
  .header__cta { display: inline-flex; }
  .burger { display: none; }
  .brand__mark { height: 54px; }
  .site-header[data-elevated="true"] .brand__mark { height: 42px; }
}


/* ==========================================================================
   07. MOBILE DRAWER
   ========================================================================== */
.drawer-scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.6);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.drawer-scrim.is-open { opacity: 1; }

.drawer { position: fixed; inset: 0 0 0 auto; z-index: 110; }
.drawer__panel {
  height: 100%;
  width: min(340px, 86vw);
  margin-left: auto;
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom));
  background: var(--charcoal-900);
  border-left: 3px solid transparent;
  border-image: var(--grad-brand) 1;
  box-shadow: -22px 0 50px rgba(0,0,0,.5);
  transform: translateX(105%);
  transition: transform .34s var(--ease);
  overflow-y: auto;
}
.drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.drawer__title {
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem;
  color: var(--brand-gold);
}
.drawer__close {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(253,254,254,.08);
  border: 1px solid rgba(253,254,254,.18);
  border-radius: var(--r-md);
  color: var(--cream); cursor: pointer;
  transition: background-color .2s var(--ease);
}
.drawer__close:hover { background: rgba(234,43,0,.4); }
.drawer__close svg { width: 20px; height: 20px; }

.drawer__list { display: grid; gap: 2px; margin-bottom: var(--sp-3); }
.drawer__link {
  display: flex; align-items: center;
  min-height: 52px;
  padding: 0 .9rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.12rem;
  color: var(--cream); text-decoration: none;
  border-radius: var(--r-md);
  border-left: 3px solid transparent;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.drawer__link:hover { background: rgba(253,254,254,.07); color: var(--brand-gold); }
.drawer__link.is-active { border-left-color: var(--brand-orange); color: var(--brand-gold); background: rgba(247,87,8,.12); }

body.is-locked { overflow: hidden; }

@media (min-width: 900px) { .drawer, .drawer-scrim { display: none !important; } }


/* ==========================================================================
   08. HERO
   --------------------------------------------------------------------------
   OWNER NOTE — dropping in a real photograph
   The hero backdrop is built from brand gradients plus an SVG spice motif so
   the site needs no photography. When you have a photo, set the --hero-image
   custom property and it will sit beneath the existing dark scrim:

       .hero { --hero-image: url("../img/hero.jpg"); }

   (or inline: <section class="hero" style="--hero-image:url('assets/img/hero.jpg')">)
   Use a wide, dark-ish image around 2000x1200. Nothing else needs to change.
   ========================================================================== */
.hero {
  --hero-image: none;
  position: relative;
  isolation: isolate;
  min-height: clamp(560px, 88svh, 900px);
  display: flex; align-items: center;
  padding-block: calc(var(--sp-8) + 1rem) var(--sp-9);
  background-color: var(--charcoal-900);
  overflow: hidden;
}

.hero__bg { position: absolute; inset: 0; z-index: -1; }

/* Layer 1: the owner's photo (if provided) */
.hero__bg::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
  opacity: .5;
}
/* Layer 2: brand glow + scrim, always on top of the photo */
.hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 55% at 50% -8%, rgba(250,197,38,.30) 0%, rgba(250,197,38,0) 62%),
    radial-gradient(58% 46% at 8% 96%, rgba(247,87,8,.34) 0%, rgba(247,87,8,0) 66%),
    radial-gradient(52% 44% at 96% 82%, rgba(200,1,1,.42) 0%, rgba(200,1,1,0) 70%),
    linear-gradient(180deg, rgba(11,11,12,.72) 0%, rgba(11,11,12,.80) 48%, rgba(11,11,12,.95) 100%);
}

/* z-index keeps the motif above the ::after scrim (which is a later sibling) */
.hero__motif {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  color: var(--brand-gold);
  opacity: .16;
}
.hero__motif-layer { animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift {
  from { transform: translate3d(0,0,0) }
  to   { transform: translate3d(-14px,-18px,0) }
}

.hero__inner { position: relative; text-align: center; display: grid; justify-items: center; }

.hero__logo {
  width: clamp(210px, 46vw, 420px);
  margin-bottom: var(--sp-5);
  filter: drop-shadow(0 14px 34px rgba(0,0,0,.65));
  animation: heroPop .9s var(--ease) both;
}
@keyframes heroPop {
  from { opacity: 0; transform: translateY(18px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

.hero .eyebrow { justify-content: center; }

.hero__title {
  font-size: var(--fs-h1);
  color: var(--cream);
  margin-bottom: var(--sp-4);
  text-shadow: 0 4px 22px rgba(0,0,0,.5);
  max-width: 16ch;
}

.hero__lede {
  max-width: 54ch;
  font-size: var(--fs-lede);
  color: rgba(253,254,254,.9);
  margin-bottom: var(--sp-6);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }

.hero__phones {
  margin-top: var(--sp-5);
  font-size: var(--fs-small);
  letter-spacing: .04em;
  color: rgba(253,254,254,.72);
}
/* inline-flex + min-height keeps these inline links at a 44px tap target */
.hero__phones a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding-inline: .3rem;
  color: var(--brand-gold);
  font-weight: 600;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 rgba(250,197,38,.45);
}
.hero__phones a:hover { color: var(--cream); box-shadow: inset 0 -1px 0 var(--cream); }
.hero__dot { margin-inline: .6rem; color: var(--brand-orange); }

.hero__scroll {
  position: absolute; left: 50%; bottom: 18px;
  transform: translateX(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--brand-gold);
  border: 1px solid rgba(250,197,38,.4);
  border-radius: 50%;
  animation: bob 2.4s ease-in-out infinite;
}
.hero__scroll svg { width: 22px; height: 22px; }
.hero__scroll:hover { background: rgba(250,197,38,.16); color: var(--cream); }
@keyframes bob {
  0%,100% { transform: translate(-50%, 0); }
  50%     { transform: translate(-50%, 7px); }
}


/* ==========================================================================
   09. ABOUT / "INCREDIBLE TASTE" BAND
   ========================================================================== */
.about { background: var(--surface); }

.about__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }

.about__copy p { color: var(--text-700); }

.about__points {
  display: grid; gap: var(--sp-3);
  margin: var(--sp-5) 0 var(--sp-6);
}
.about__points li {
  display: flex; align-items: flex-start; gap: .7rem;
  font-weight: 500; color: var(--text-900);
}
.tick {
  flex: none;
  width: 26px; height: 26px; margin-top: 1px;
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 700;
  color: var(--ink);
  background: var(--grad-brand);
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(247,87,8,.3);
}

/* Photo panel.
   TO SWAP THE PHOTO: replace assets/img/about.jpg (crop it to 4:4.4 portrait,
   ~900x990 is plenty) or repoint the url() below. The path MUST start with a
   leading slash — a relative url() in this stylesheet resolves against
   assets/css/, not the page, and would silently 404.
   The gradient stays as a second layer so the panel degrades to a brand card
   rather than an empty box if the photo ever fails to load. */
.about__art {
  position: relative;
  aspect-ratio: 4 / 4.4;
  border-radius: var(--r-xl);
  background-color: var(--charcoal-800);
  background-image: url("/assets/img/about.jpg"), var(--grad-deep);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  box-shadow: var(--sh-3);
  overflow: hidden;
  display: grid; place-items: center;
}
/* Nothing sits on top of the photo any more, so there is no scrim and no badge
   — the panel is just the image. If you ever place text over it again, add a
   bottom scrim back for legibility. */

@media (min-width: 860px) {
  .about__grid { grid-template-columns: 1.15fr .85fr; }
}


/* ==========================================================================
   10. FEATURE STRIP
   ========================================================================== */
.features {
  background: var(--surface-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: var(--section-y);
}
.features__grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: 1fr;
}
.feature {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--sh-1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.feature:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-3);
  border-color: rgba(247,87,8,.4);
}
.feature__icon {
  display: grid; place-items: center;
  width: 62px; height: 62px;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface-sunk);
  border: 1px solid var(--line);
}
.feature__icon svg { width: 36px; height: 36px; }
.feature__title { font-size: var(--fs-h3); margin-bottom: var(--sp-2); color: var(--text-900); }
.feature p { color: var(--text-700); font-size: var(--fs-small); margin: 0; }
.feature em { color: var(--crimson-ink); font-style: normal; font-weight: 600; }

@media (min-width: 620px) { .features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .features__grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); } }


/* ==========================================================================
   11. MENU
   ========================================================================== */
.menu { background: var(--surface); padding-bottom: var(--section-y); }
.menu .section-head { margin-bottom: var(--sp-5); }

/* --- Sticky category filter bar --- */
.menu-tabs {
  position: sticky; top: var(--header-h-sm); z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-6);
}
.menu-tabs__shell { padding-inline: 0; }

/* Wrapping row — categories flow onto as many lines as they need, so there is
   never a horizontal scrollbar and no tab can be hidden off-screen. */
.menu-tabs__scroller {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  padding: .7rem var(--gutter);
}

.menu-tab {
  flex: 0 0 auto;
  min-height: 44px;
  padding: .55rem 1.1rem;
  font-weight: 600; font-size: .88rem;
  color: var(--text-700);
  background: var(--surface-alt);
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s var(--ease), background-color .2s var(--ease),
              border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.menu-tab:hover { color: var(--orange-ink); border-color: var(--brand-orange); background: #FFF4EC; }
.menu-tab[aria-pressed="true"] {
  color: var(--ink);
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: var(--sh-glow);
}
.menu-tab__count {
  display: inline-block;
  margin-left: .4rem;
  font-size: .74rem; font-weight: 600;
  opacity: .7;
}

/* On phones the nine categories wrap to five or six rows. That is fine as a
   block of content, but it is far too tall to pin to the top of the viewport,
   so the bar stops being sticky and simply scrolls away. Tabs also tighten up
   to fit more per row — but never below the 44px minimum tap target. */
@media (max-width: 639.98px) {
  .menu-tabs {
    position: static;
    margin-bottom: var(--sp-5);
  }
  .menu-tabs__scroller {
    justify-content: flex-start;
    gap: .4rem;
    padding-block: .6rem;
  }
  .menu-tab {
    padding: .5rem .8rem;
    font-size: .82rem;
  }
}

/* --- Dish groups --- */
section.menu-group[id] { margin-bottom: var(--sp-8); scroll-margin-top: calc(var(--header-h-sm) + 74px); }
.menu-group[hidden] { display: none; }

.menu-group__head {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.menu-group__title {
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
  margin: 0;
  color: var(--text-900);
}
.menu-group__rule {
  flex: 1; height: 4px; border-radius: var(--r-pill);
  background: var(--grad-brand);
  opacity: .85;
}

.dish-list { display: grid; gap: var(--sp-3); }

.dish {
  padding: var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-4) + 6px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 6px solid transparent;
  border-radius: var(--r-md);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.dish:hover {
  border-color: rgba(247,87,8,.35);
  border-left-color: var(--brand-orange);
  box-shadow: var(--sh-2);
  transform: translateX(2px);
}

/* Name / leader / price row */
.dish__head {
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.dish__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--text-900);
  margin: 0;
}
.dish__leader { display: none; }

.dish__prices { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

.price {
  display: inline-flex; align-items: baseline; gap: .35rem;
  padding: .3rem .75rem;
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  font-weight: 600;
  white-space: nowrap;
}
.price__label {
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-500);
}
.price__value { font-size: .98rem; color: var(--crimson-ink); }
.price--solo {
  background: transparent; border-color: transparent; padding: 0;
}
.price--solo .price__value {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem);
  color: var(--orange-ink);
}

.dish__desc {
  margin: var(--sp-2) 0 0;
  color: var(--text-700);
  font-size: var(--fs-small);
  max-width: 72ch;
}

.dish__allergens {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  margin-top: var(--sp-3);
}
.dish__allergens-label {
  font-size: .68rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-500);
  margin-right: .15rem;
}
.chip {
  display: inline-grid; place-items: center;
  min-width: 24px; height: 24px;
  padding: 0 .4rem;
  font-size: .74rem; font-weight: 600;
  color: var(--crimson-ink);
  background: #FDECE4;
  border: 1px solid rgba(200,1,1,.32);
  border-radius: var(--r-pill);
  cursor: help;
}

@media (min-width: 720px) {
  .dish { padding: var(--sp-5); }
  .dish__head { flex-direction: row; align-items: baseline; gap: .75rem; }
  /* max-width was 70% to leave room for the price column; with prices moved to
     the PDF the name gets the full row. Restore 70% if prices come back. */
  .dish__name { flex: none; max-width: 100%; }
  .dish__leader {
    display: block; flex: 1 1 auto;
    min-width: 24px;
    border-bottom: 2px dotted var(--line);
    transform: translateY(-4px);
  }
  .dish__prices { flex: none; justify-content: flex-end; }
}

/* --- Collapsible allergen key --- */
.allergen-key {
  margin-top: var(--sp-6);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.allergen-key > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: 56px;
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--text-900);
  transition: background-color .2s var(--ease);
}
.allergen-key > summary::-webkit-details-marker { display: none; }
.allergen-key > summary:hover { background: var(--surface-sunk); }
.allergen-key__chevron {
  flex: none;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--grad-brand);
  transition: transform .28s var(--ease);
}
.allergen-key__chevron svg { width: 20px; height: 20px; }
.allergen-key[open] .allergen-key__chevron { transform: rotate(180deg); }

.allergen-key__body { padding: 0 var(--sp-5) var(--sp-5); }
.allergen-key__list {
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin-bottom: var(--sp-4);
}
.allergen-key__list li {
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
}
.allergen-key__note { font-size: .82rem; color: var(--text-500); margin: 0; }

.noscript-card {
  padding: var(--sp-5);
  border: 2px dashed var(--brand-orange);
  border-radius: var(--r-lg);
  background: #FFF6EF;
}
.noscript-card h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }


/* ==========================================================================
   12. ORDER BAND
   ========================================================================== */
.order {
  position: relative;
  isolation: isolate;
  background: var(--charcoal-900);
  color: rgba(253,254,254,.86);
  padding-block: var(--section-y);
  overflow: hidden;
}
.order::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(46% 60% at 88% 12%, rgba(250,197,38,.24), rgba(250,197,38,0) 68%),
    radial-gradient(56% 70% at 4% 92%, rgba(200,1,1,.44), rgba(200,1,1,0) 70%);
}
.order::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: var(--grad-brand);
}

.order__grid { display: grid; gap: var(--sp-7); align-items: center; }
.order__lede { font-size: var(--fs-lede); max-width: 46ch; }

.order__phones { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }

.phone-card {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: 64px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid rgba(253,254,254,.16);
  border-radius: var(--r-md);
  background: rgba(253,254,254,.045);
  color: var(--cream);
  text-decoration: none;
  transition: border-color .22s var(--ease), background-color .22s var(--ease), transform .22s var(--ease);
}
.phone-card:hover {
  color: var(--cream);
  transform: translateY(-3px);
  border-color: var(--brand-gold);
  background: rgba(250,197,38,.12);
}
.phone-card__ico {
  flex: none; width: 26px; height: 26px;
  color: var(--brand-gold);
}
.phone-card small {
  display: block;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(253,254,254,.6);
}
.phone-card strong {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
  line-height: 1.15;
}

.order__qr { margin: 0; display: grid; justify-items: center; gap: var(--sp-3); }
.order__qr-frame {
  padding: clamp(.7rem, .4rem + 1.2vw, 1.1rem);
  background: var(--cream);
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 5px rgba(250,197,38,.9), 0 24px 50px rgba(0,0,0,.5);
  width: clamp(180px, 46vw, 268px);
}
.order__qr-frame img { width: 100%; height: auto; }
.order__qr figcaption {
  font-size: .74rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--brand-gold);
}

@media (min-width: 860px) {
  .order__grid { grid-template-columns: 1.25fr .75fr; gap: clamp(2.5rem, 1rem + 5vw, 5rem); }
  .order__phones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ==========================================================================
   13. GALLERY
   --------------------------------------------------------------------------
   OWNER NOTE — each tile accepts a photo via the --tile-image property:
       <li class="tile tile--a" style="--tile-image:url('/assets/img/gallery/butter-chicken.jpg')">
   The gradient stays underneath as a fallback and the dark label scrim sits
   on top, so labels remain readable on any image. ~800x800 works well.

   The leading slash is REQUIRED. background-image below consumes the var()
   from inside this stylesheet, and a relative url() resolves against THIS
   file's folder (assets/css/), not the HTML page — so url('assets/img/...')
   silently 404s as assets/css/assets/img/... and you get the gradient
   fallback with no visible error.
   ========================================================================== */
.gallery { background: var(--surface-alt); }

.gallery__grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(2, 1fr);
}

.tile {
  /* The owner's photo (if any) is the TOP background layer; the brand gradient
     below it is the fallback, so a tile never looks empty. */
  --tile-image: none;
  --tile-grad: var(--grad-ember);
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-2);
  background-color: var(--charcoal-700);
  background-image: var(--tile-image), var(--tile-grad);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tile:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }

/* Readability scrim + subtle woven motif, painted over the background layers */
.tile::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 76% 14%, rgba(250,197,38,.30), rgba(250,197,38,0) 62%),
    repeating-linear-gradient(45deg, rgba(0,0,0,.09) 0 12px, rgba(0,0,0,0) 12px 24px),
    linear-gradient(180deg, rgba(11,11,12,.05) 38%, rgba(11,11,12,.80) 100%);
}

.tile--b { --tile-grad: linear-gradient(140deg, var(--brand-gold), var(--brand-orange) 62%, var(--brand-crimson)); }
.tile--c { --tile-grad: linear-gradient(200deg, var(--brand-orange), var(--brand-maroon)); }
.tile--d { --tile-grad: linear-gradient(150deg, var(--brand-amber), var(--brand-crimson) 78%); }
.tile--e { --tile-grad: linear-gradient(120deg, var(--brand-crimson), var(--brand-orange) 55%, var(--brand-gold)); }
.tile--f { --tile-grad: linear-gradient(170deg, var(--brand-red), var(--brand-maroon)); }

.tile__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.95rem, .85rem + .6vw, 1.3rem);
  line-height: 1.15;
  color: var(--cream);
  text-shadow: 0 3px 12px rgba(0,0,0,.6);
}

@media (min-width: 760px) { .gallery__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } }


/* ==========================================================================
   14. CONTACT
   ========================================================================== */
.contact { background: var(--surface); }

.contact__grid { display: grid; gap: var(--sp-6); align-items: start; }

.contact__cards { display: grid; gap: var(--sp-4); }

.info-card {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.info-card:hover { border-color: rgba(247,87,8,.4); box-shadow: var(--sh-2); }
.info-card__icon {
  flex: none;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  color: var(--cream);
  background: var(--grad-ember);
  box-shadow: 0 6px 14px rgba(200,1,1,.25);
}
.info-card__icon svg { width: 24px; height: 24px; }
.info-card__title {
  font-size: 1rem; margin-bottom: .2rem;
  letter-spacing: .02em; color: var(--text-900);
}
.info-card__body { margin: 0; color: var(--text-700); font-size: var(--fs-small); line-height: 1.7; }
/* 44px tap target on the phone / email links without breaking the text flow */
.info-card__body a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-weight: 600;
}

.map-card {
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--charcoal-800);
  box-shadow: var(--sh-2);
}
.map-card__canvas {
  position: relative;
  aspect-ratio: 4 / 3;                /* taller on phones so the pin has room */
  background: linear-gradient(160deg, var(--charcoal-700), var(--charcoal-900));
}
@media (min-width: 640px) {
  .map-card__canvas { aspect-ratio: 16 / 10; }
}

/* Branded fallback artwork, layered underneath the live map. Only ever seen if
   the Google iframe is blocked or fails to load. */
.map-card__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The live map. */
.map-card__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;               /* released once activated - see below */
}

/* Transparent shield over the map. On touch devices an embedded map otherwise
   captures vertical swipes and traps the page scroll; the visitor taps once to
   hand control to the map. */
.map-card__shield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.map-card__shield-hint {
  margin-bottom: var(--sp-4);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--cream);
  background: rgba(20, 16, 14, .82);
  border: 1px solid rgba(250, 197, 38, .45);
  backdrop-filter: blur(4px);
}
.map-card__shield:focus-visible {
  outline: 3px solid var(--brand-gold);
  outline-offset: -3px;
}
/* Pointer-capable devices don't have the scroll-trap problem, so skip the tap step. */
@media (hover: hover) and (pointer: fine) {
  .map-card__shield { display: none; }
  .map-card__frame { pointer-events: auto; }
}
/* Set by main.js once the shield is activated. */
.map-card.is-map-active .map-card__frame { pointer-events: auto; }
.map-card.is-map-active .map-card__shield { display: none; }
.map-card__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--charcoal-900);
}
.map-card__foot p {
  margin: 0;
  font-size: var(--fs-small);
  color: rgba(253,254,254,.72);
}
.map-card__foot strong { color: var(--brand-gold); font-size: 1rem; }

@media (min-width: 900px) {
  .contact__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
  .contact__cards { grid-template-columns: repeat(2, 1fr); }
  .info-card--hours { grid-column: span 2; }
}


/* ==========================================================================
   15. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--charcoal-900);
  color: rgba(253,254,254,.72);
  border-top: 5px solid transparent;
  border-image: var(--grad-brand) 1;
}
/* Footer content is centred. text-align alone is not enough — the logo, the
   intro paragraph, the socials row and the bottom bar are all block/flex items
   that need their own centring too. */
.footer__grid {
  display: grid; gap: var(--sp-6);
  padding-block: var(--sp-8) var(--sp-6);
  text-align: center;
  justify-items: center;
}
.footer__brand img { width: 190px; margin: 0 auto var(--sp-4); }
.footer__brand p { font-size: var(--fs-small); max-width: 42ch; margin-inline: auto; }

.footer__heading {
  font-size: .8rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brand-gold);
  margin-bottom: var(--sp-4);
  font-family: var(--font-body); font-weight: 600;
}
.footer__nav ul { display: grid; gap: .1rem; }
.footer__nav a,
.footer__contact a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  color: rgba(253,254,254,.78);
  text-decoration: none;
  font-size: var(--fs-small);
  transition: color .2s var(--ease);
}

/* The 44px above is the minimum touch tap target, and it — not the 1.6px grid
   gap — is what spread the Explore links out. Keep the full 44px on touch
   devices, but tighten the list on mouse-driven pointers, where a smaller
   target is perfectly clickable. Contact links keep 44px everywhere, since
   they are phone/email links people tap. */
@media (hover: hover) and (pointer: fine) {
  .footer__nav a {
    min-height: 0;
    padding-block: .18rem;
  }
}
/* The old hover nudged links right with padding-left; that reads as off-centre
   jitter in a centred column, so hover is a colour change only. */
.footer__nav a:hover,
.footer__contact a:hover { color: var(--brand-gold); }
.footer__contact address { font-size: var(--fs-small); line-height: 1.9; }

.socials { display: flex; justify-content: center; gap: .6rem; margin-top: var(--sp-5); }
.socials a {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--cream);
  border: 1px solid rgba(253,254,254,.2);
  background: rgba(253,254,254,.05);
  transition: background .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease), transform .22s var(--ease);
}
.socials a:hover {
  transform: translateY(-3px);
  color: var(--ink);
  background: var(--grad-brand);
  border-color: transparent;
}
.socials svg { width: 20px; height: 20px; }

.footer__bar {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; justify-content: center;
  padding-block: var(--sp-4);
  border-top: 1px solid rgba(253,254,254,.1);
  text-align: center;
}
.footer__bar p { margin: 0; font-size: .78rem; }

/* "Powered by" + Postree logo */
.footer__credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  color: rgba(253,254,254,.5);
}
.footer__credit-link {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-sm);
  /* the logo art already carries its own padding, so keep the hit area tight
     but still comfortably tappable */
  padding: .25rem;
  transition: opacity .18s var(--ease);
}
.footer__credit-link:hover { opacity: .8; }
.footer__credit-link:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}
.footer__credit-link img {
  width: 88px;
  height: auto;
}

@media (min-width: 760px) {
  .footer__grid { grid-template-columns: 1.6fr .8fr 1fr; gap: var(--sp-7); }
}


/* ==========================================================================
   16. REDUCED MOTION, SELECTION, PRINT
   ========================================================================== */
::selection { background: var(--brand-gold); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero__motif-layer, .hero__scroll, .hero__logo { animation: none !important; }
  .btn:hover, .feature:hover, .tile:hover, .phone-card:hover, .socials a:hover { transform: none; }
}

@media print {
  .site-header, .drawer, .drawer-scrim, .hero__scroll, .menu-tabs,
  .skip-link, .socials, .btn { display: none !important; }
  body { color: #000; background: #fff; }
  .menu-group[hidden] { display: block !important; }
  .dish { break-inside: avoid; border-left-color: #999; }
  .order, .site-footer { background: #fff !important; color: #000 !important; }
}