/* SKIN: restaurant (restaurants, bars, cafes, markets)
   Feel: warm, appetizing, photo-forward. Soft edges, generous imagery. */
:root{
  --paper:#fffdf8; --ink:#26211c; --muted:#5a5248;
  --radius:16px;
  --shadow:0 8px 28px rgba(38,33,28,.14);
  --tile-border:1px solid #eadfce;
  --header-line:1px solid #eadfce;
  --section-bg-alt:#f9f3e8;
  --accent-text:#fff;
  /* Food photography runs BRIGHT (white plates, pale wood, pale hummus) — the
     original gradient dipped to .28 opacity in the middle, exactly where
     hero text vertically centers, so white/gold text washed out against any
     light-toned photo (found on this site's first real render: the eyebrow
     and hero heading blended into the photo instead of sitting on top of
     it). Floor raised to .6 so no point in the gradient gets that thin; also
     shifted darker/more neutral (was 30,22,14 — a warm gray that itself
     competed with warm food tones; now near-black 16,11,7) so text reads by
     LIGHTNESS contrast regardless of the photo's own hue. */
  --hero-overlay:linear-gradient(180deg,rgba(16,11,7,.74),rgba(16,11,7,.6) 45%,rgba(16,11,7,.8));
}
.hero{min-height:84vh}
/* base.css puts the eyebrow in --accent by default. For this vertical that's
   a warm gold sitting on top of warm food photography — the same hue family
   as the photo itself, so even with the darkened overlay + text-shadow above
   it read as "clashing" rather than clearly labeled (measured 1.6:1 against
   a bright wall in the hero photo — see site-factory/CLAUDE.md log). White
   matches the h1/sub next to it exactly and has nowhere left to lose
   contrast to. --accent still does its job everywhere else (the Order Now
   button, bullets) where it isn't fighting a photo underneath it. */
.hero .eyebrow{color:#fff}
.tile{overflow:hidden}
.tile > img{margin:-1.6rem -1.5rem 1.1rem;width:calc(100% + 3rem);max-width:none;aspect-ratio:16/10;object-fit:cover}