/* ==========================================================================
   Neo Deli — Neopolitan Delicatessen & Restaurant, Berwyn PA
   Palette sampled directly from the logo: tomato #E46030, basil #6C9C30,
   black wordmark, cream paper. All text pairings verified to WCAG AA.
   Website and Design by MAKEANDUPDATE — makeandupdate.com
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------ */
:root {
  /* Paper & ink — the wordmark is black, so the site is too */
  --paper:      #FAF7F2;
  --paper-2:    #F3EEE5;
  --paper-3:    #E9E2D6;
  --ink:        #1A1815;   /* 16.6:1 on paper */
  --ink-2:      #57504A;   /*  7.4:1 */
  --ink-3:      #6F665F;   /*  5.3:1 — was #8A8078 at 3.6:1, which failed AA */
  --rule:       #E2D9CA;

  /* Tomato — straight off the logo, then darkened for legible text */
  --tomato:      #E46030;  /* logo value: fills and large accents only */
  --tomato-deep: #C2410C;  /* buttons — white text 5.2:1 */
  --tomato-text: #A83512;  /* prices and links — 6.2:1 on paper */
  --tomato-tint: #FBEDE7;
  --tomato-light:#EFA98A;  /* links on the dark sections — 9.0:1 on ink */

  /* Basil — from the leaf glyph */
  --basil:       #6C9C30;
  --basil-deep:  #4F7327;  /* 5.2:1 on paper */
  --basil-tint:  #EFF4E7;

  --display: 'Bitter', Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --body: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --maxw: 1120px;
  --r-sm: 6px;
  --r: 12px;
  --r-lg: 18px;

  --shadow-sm: 0 1px 2px rgba(26, 24, 21, .06), 0 2px 6px rgba(26, 24, 21, .05);
  --shadow: 0 2px 6px rgba(26, 24, 21, .07), 0 14px 30px -14px rgba(26, 24, 21, .2);

  --header-h: 98px;
}

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
img, svg, picture { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: 1.14; letter-spacing: -.015em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.3rem, 6vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 3.8vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-weight: 700; }
p  { margin: 0 0 1.1em; }
a  { color: var(--tomato-text); text-underline-offset: 3px; }
a:hover { color: var(--tomato-deep); }
ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .35em; }

:focus-visible { outline: 3px solid var(--tomato-deep); outline-offset: 2px; border-radius: 3px; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--ink); color: #fff; padding: .8rem 1.2rem; }
.skip:focus { left: 0; color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Layout ------------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 740px; }
.section { padding-block: clamp(3.25rem, 7vw, 5.5rem); }
.section--tight { padding-block: clamp(2.25rem, 4.5vw, 3.5rem); }
.section--paper2 { background: var(--paper-2); }
.section--ink { background: var(--ink); color: var(--paper); }
.section--ink h2, .section--ink h3 { color: var(--paper); }
/* Body links inherit the tomato meant for cream, which is 2.7:1 here. */
.section--ink a:not(.btn):not(.rating):not(.social) { color: var(--tomato-light); }
.section--ink a:not(.btn):not(.rating):not(.social):hover { color: #fff; }

.eyebrow {
  font-size: .76rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tomato-text); margin: 0 0 .85rem;
}
.section--ink .eyebrow { color: var(--tomato); }

.lede { font-size: clamp(1.05rem, 1.8vw, 1.22rem); color: var(--ink-2); max-width: 60ch; }
.section--ink .lede { color: #CFC7BD; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-size: 1rem; font-weight: 650; line-height: 1;
  padding: .95rem 1.5rem;
  border: 2px solid transparent; border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--tomato-deep); color: #fff; }
.btn--primary:hover { background: #A83512; color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: #fff; color: var(--ink); }
.btn--outline-light { background: transparent; color: var(--paper); border-color: rgba(250,247,242,.45); }
.btn--outline-light:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--sm { padding: .68rem 1.1rem; font-size: .92rem; }
.btn--lg { padding: 1.1rem 1.9rem; font-size: 1.06rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.center .btn-row { justify-content: center; }

@media (pointer: coarse) {
  .btn--sm { padding-block: .82rem; }
  .menu-chips button { padding-block: .64rem; }
  .social { padding-block: .62rem; }
}

/* ---- Brand / logo ------------------------------------------------------ */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { height: 74px; width: auto; }
.footer .brand img { height: 88px; }
.drawer .brand img { height: 62px; }
@media (max-width: 900px) { .brand img { height: 60px; } }
@media (max-width: 640px) { .brand img { height: 52px; } .footer .brand img { height: 68px; } }

/* ---- Closure notice ----------------------------------------------------
   Sits above the sticky header so it scrolls away once read; the status
   badge in the hero carries the same message permanently. Revealed by
   script only, so it can never be left up after the dates pass. */
.closure {
  background: var(--tomato-deep);
  color: #fff;
  padding-block: .75rem;
  font-size: .95rem;
  line-height: 1.5;
}
.closure[hidden] { display: none; }
.closure .wrap { display: flex; align-items: flex-start; gap: .65rem; }
.closure__icon { flex: none; width: 20px; height: 20px; margin-top: .12rem; }
.closure__text { margin: 0; }
.closure strong { font-weight: 750; }

/* ---- Header ------------------------------------------------------------ */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 247, 242, .95);
  backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.header__inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--header-h);
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut);
}
.header .brand { margin-right: auto; }

.nav { display: none; align-items: center; gap: .2rem; }
.nav a {
  color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .96rem;
  padding: .5rem .75rem; border-radius: var(--r-sm);
}
.nav a:hover { color: var(--ink); background: var(--paper-3); }
.nav a[aria-current="page"] { color: var(--tomato-text); }
.header__cta { display: none; }

.navtoggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  background: transparent; border: 1px solid var(--rule); border-radius: var(--r-sm);
  color: var(--ink); cursor: pointer;
}
.navtoggle:hover { background: var(--paper-3); }

@media (min-width: 900px) {
  .nav { display: flex; }
  .header__cta { display: inline-flex; }
  .navtoggle { display: none; }
}

/* ---- Mobile drawer -----------------------------------------------------
   Slides in from the right over a fading scrim, with the links staggering
   in behind it. Fully hidden from AT when closed.                        */
.scrim {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(26, 24, 21, .45);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  /* Visibility flips instantly on open and waits for the fade on close,
     so it is never a hidden element mid-transition. */
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.scrim.is-open { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s linear 0s; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 200;
  width: min(88vw, 360px);
  display: flex; flex-direction: column;
  padding: 1.15rem var(--gut) calc(1.5rem + env(safe-area-inset-bottom));
  background: var(--paper);
  border-left: 1px solid var(--rule);
  box-shadow: -18px 0 44px -22px rgba(26,24,21,.45);
  transform: translateX(100%);
  visibility: hidden;
  /* Becomes visible the instant it opens so focus can move into it, and
     stays visible until the slide-out finishes. Never focus-trapped in a
     visibility:hidden panel mid-transition. */
  transition: transform .34s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .34s;
  overflow-y: auto;
}
.drawer.is-open {
  transform: translateX(0); visibility: visible;
  transition: transform .34s cubic-bezier(.32, .72, 0, 1), visibility 0s linear 0s;
}

.drawer__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.drawer__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none; padding: 0;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 50%;
  color: var(--ink); cursor: pointer;
}
.drawer__close:hover { background: var(--paper-3); }

.drawer__links { list-style: none; margin: 0 0 auto; padding: 0; }
.drawer__links li { margin: 0; }
.drawer__links a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem .15rem;
  font-family: var(--display); font-size: 1.35rem; font-weight: 700;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.drawer__links a:hover { color: var(--tomato-text); }
.drawer__links a::after {
  content: ""; width: 8px; height: 8px; flex: none;
  border-top: 2px solid var(--ink-3); border-right: 2px solid var(--ink-3);
  transform: rotate(45deg);
}

/* Links stagger in once the panel has started moving. */
.drawer__links li, .drawer__foot > * {
  opacity: 0; transform: translateX(18px);
  transition: opacity .3s ease, transform .3s ease;
}
.drawer.is-open .drawer__links li,
.drawer.is-open .drawer__foot > * { opacity: 1; transform: none; }
.drawer.is-open .drawer__links li:nth-child(1) { transition-delay: .10s; }
.drawer.is-open .drawer__links li:nth-child(2) { transition-delay: .15s; }
.drawer.is-open .drawer__links li:nth-child(3) { transition-delay: .20s; }
.drawer.is-open .drawer__links li:nth-child(4) { transition-delay: .25s; }
.drawer.is-open .drawer__foot > *              { transition-delay: .30s; }

.drawer__foot { padding-top: 1.75rem; }
.drawer__foot .btn { width: 100%; margin-bottom: .6rem; }
.drawer__meta { font-size: .9rem; color: var(--ink-2); text-align: center; margin: .9rem 0 0; }

@media (prefers-reduced-motion: reduce) {
  .drawer, .scrim, .drawer__links li, .drawer__foot > * { transition: none; }
}
@media (min-width: 900px) { .drawer, .scrim { display: none; } }

/* ---- Hero -------------------------------------------------------------- */
.hero { border-bottom: 1px solid var(--rule); background: var(--paper); }
.hero__inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gut) clamp(2.25rem, 5vw, 3.5rem);
}

/* ---- Photo hero --------------------------------------------------------
   The storefront sits centre-frame with a wide band of empty road along the
   bottom. Copy is anchored into that band so it never covers the building or
   the sign, and the scrim is weighted to match: near-opaque where the text
   sits, clearing entirely by the roofline.

   The scrim is deliberately heavy (0.9+ under the copy). Over the brightest
   pixel the photo can offer, that still composites to ~rgb(44,41,38), which
   keeps cream text past 12:1 — so contrast holds no matter what photo is
   dropped in later. */
/* Copy sits in the LEFT third, over the neighbouring brick storefront.
   Stacking it at the bottom put it in the same horizontal band as the
   NEOPOLITAN sign (both land ~420px up), so any scrim dark enough to carry
   the text buried the sign at 0.9 opacity. Going sideways resolves it: the
   sign is centre-right and stays clear. */
.hero--photo {
  position: relative;
  display: flex; align-items: center;
  min-height: clamp(30rem, 82vh, 46rem);
  padding: 0;
  background: var(--ink);
  border-bottom: 0;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; display: block; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%; }

/* Two scrims: a strong horizontal one under the copy column, and a light
   vertical one so the sky does not blow out against the header. */
.hero--photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(18, 16, 14, .95) 0%,
      rgba(18, 16, 14, .92) 28%,
      rgba(18, 16, 14, .78) 40%,
      rgba(18, 16, 14, .34) 52%,
      rgba(18, 16, 14, .08) 64%,
      rgba(18, 16, 14, 0)   74%),
    linear-gradient(to bottom, rgba(18, 16, 14, .30), rgba(18, 16, 14, 0) 34%);
}
.hero--photo .hero__inner {
  position: relative; width: 100%;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.hero--photo .hero__copy { max-width: min(33rem, 44%); }

@media (max-width: 860px) {
  /* Too narrow for a side column — stack at the bottom and swap the scrim.

     The height is also capped against the VIEWPORT WIDTH, not just its
     height. Left on 82vh a phone produced a 0.70-ratio box, and cover then
     threw away 61% of the photo's width. Tying the cap to vw keeps the box
     near square, which is the shape the art-directed crop expects. */
  .hero--photo {
    align-items: flex-end;
    min-height: min(74vh, 112vw);
  }
  .hero__bg img { object-position: 50% 46%; }
  .hero--photo::after {
    background: linear-gradient(to top,
      rgba(18, 16, 14, .95) 0,
      rgba(18, 16, 14, .93) 16rem,
      rgba(18, 16, 14, .72) 24rem,
      rgba(18, 16, 14, .30) 32rem,
      rgba(18, 16, 14, 0)   40rem);
  }
  .hero--photo .hero__copy { max-width: none; }
}
/* Badges and the detail line live BELOW the photo, on solid paper. Kept in
   the overlay they pushed the headline up onto the white building, where no
   reasonable scrim can hold contrast. The overlay carries the headline and
   the calls to action; everything else reads better on cream anyway. */
.herobar {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  padding-block: 1.1rem;
}
.herobar .hero__badges { margin-bottom: 0; }
.herobar .hero__meta {
  margin: .9rem 0 0; padding-top: .9rem;
  border-top: 1px solid var(--rule);
}

/* Doubled class on purpose. The plain .hero rules are declared further down
   the file at equal specificity, so a single .hero--photo selector loses the
   cascade — the accent reverted to the cream-background tomato and measured
   2.34:1 on the photo. */
/* Widths and margins here are tuned so the copy block clears the shop sign,
   which sits ~44% down the photo. Let the headline wrap to three lines and
   the block grows past the sign and buries it under the scrim. */
.hero.hero--photo h1 {
  color: var(--paper); text-wrap: balance;
  max-width: 21ch; margin-bottom: .3em;
}
.hero.hero--photo h1 .accent { color: #F5A882; }   /* 8.0:1 on the scrim */
/* Full cream, not the muted tone used on the dark sections. Over a photo the
   worst-case backdrop is much lighter than a flat panel, and the muted tone
   measured 4.32:1 against a 4.5 requirement. */
.hero.hero--photo .lede {
  color: var(--paper); max-width: 46ch; margin-bottom: 1.35rem;
}

/* Phone sizing. The copy block is what actually sets the hero's height once
   it exceeds min-height, and every extra line makes the box more portrait —
   which makes object-fit crop more off the sides. Trimming the type here is
   what keeps the storefront in frame, not the min-height alone. */
@media (max-width: 720px) {
  .hero.hero--photo h1 {
    font-size: clamp(1.95rem, 8.4vw, 2.5rem);
    max-width: 15ch;
    margin-bottom: .25em;
  }
  .hero.hero--photo .lede {
    font-size: 1.02rem;
    max-width: 34ch;
    margin-bottom: 1.1rem;
  }
  .hero--photo .hero__inner { padding-block: 1.25rem 1.6rem; }
  .hero--photo .btn--lg { padding: .92rem 1.4rem; font-size: 1rem; }

  /* Phones: photo on top, copy below on solid ink. Overlaid, the copy
     covered most of the storefront at this width. */
  .hero--photo { display: block; min-height: 0; }
  .hero--photo::after { content: none; }
  .hero__bg { position: static; aspect-ratio: 5 / 4; }
}
.hero__badges { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.4rem; }
.hero h1 { max-width: 16ch; margin-bottom: .4em; }
.hero h1 .accent { color: var(--tomato-text); }
.hero .lede { margin-bottom: 1.7rem; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem;
  margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--rule);
  font-size: .94rem; color: var(--ink-2);
}
.hero__meta strong { color: var(--ink); font-weight: 650; }

/* ---- Storefront band ---------------------------------------------------
   The real shop, full bleed under the hero copy. The subject sits centred
   with dead road along the bottom, so the crop is done here with
   object-position rather than baked into the file — that keeps the sign in
   frame at every viewport instead of breaking on tall phones. */
.storefront {
  margin: 0;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--paper-3);
  border-bottom: 1px solid var(--rule);
}
.storefront img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 44%;
}
@media (max-width: 900px) { .storefront { aspect-ratio: 16 / 9; } }
@media (max-width: 560px) { .storefront { aspect-ratio: 4 / 3; } }

.storefront-cap {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem;
  padding: .85rem 0 0;
  font-size: .92rem; color: var(--ink-2);
}
.storefront-cap strong { color: var(--ink); font-weight: 650; }

/* ---- Badges ------------------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 700;
  padding: .4rem .8rem; border-radius: 999px;
  background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--rule);
}
.badge--red { background: var(--tomato-tint); color: var(--tomato-text); border-color: #F3D9CE; }
.badge--open { background: var(--basil-tint); color: var(--basil-deep); border-color: #D3E3C0; }
.badge--closed { background: var(--paper-3); color: var(--ink-2); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.badge--open .dot { animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* Restaurant Guru award, rebuilt from the badge they were given */
.award {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .42rem .9rem .42rem .7rem;
  border: 1px solid #E8CE93; border-radius: 999px;
  background: linear-gradient(180deg, #FDF6E4, #F8ECD2);
  color: #7A5A16; font-size: .8rem; font-weight: 700; line-height: 1.25;
  text-decoration: none;
}
.award:hover { color: #7A5A16; border-color: #DCBB72; }
.award svg { flex: none; color: #C9A227; }
.award b { font-weight: 800; }
.award span { font-weight: 600; opacity: .85; }

/* ---- Order options ----------------------------------------------------- */
.order-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.order-card {
  display: flex; align-items: center; gap: .95rem;
  padding: 1.15rem 1.35rem; text-decoration: none; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.order-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #D0C3AC; color: var(--ink); }
.order-card__logo { flex: none; width: 40px; height: 40px; display: grid; place-items: center; }
.order-card__logo svg, .order-card__logo img { width: 100%; height: 100%; object-fit: contain; }
.order-card__logo--grubhub { color: #F63440; }
.order-card__logo--doordash { color: #FF3008; }
.order-card__logo--chownow { color: #161616; }
.order-card__text { min-width: 0; }
.order-card__label { display: block; font-family: var(--display); font-size: 1.1rem; font-weight: 800; }
.order-card__note { display: flex; align-items: center; gap: .35rem; font-size: .88rem; color: var(--ink-2); }
.note-car { width: 17px; height: 17px; flex: none; color: var(--tomato-deep); }

/* ---- 21+ notice -------------------------------------------------------
   Legally load-bearing, so it is a hard-edged callout rather than fine
   print — tomato border, alcohol icon, and the age rule set in bold. */
.notice {
  display: flex; align-items: flex-start; gap: .9rem;
  margin: 1.25rem 0 0; padding: 1.05rem 1.25rem;
  background: var(--tomato-tint);
  border: 2px solid var(--tomato-deep);
  border-radius: var(--r);
  color: #7A2A0A; font-size: .97rem; line-height: 1.55;
}
.notice__icon { flex: none; width: 26px; height: 26px; color: var(--tomato-deep); margin-top: .05rem; }
.notice p { margin: 0; }
.notice p + p { margin-top: .4rem; }
.notice strong { color: #6B240A; }
.notice__badge {
  display: inline-block; margin-right: .45rem; padding: .1rem .45rem;
  background: var(--tomato-deep); color: #fff; border-radius: 4px;
  font-size: .78rem; font-weight: 800; letter-spacing: .04em; vertical-align: 1px;
}
.section--paper2 .notice { background: #FCF1EC; }
.order-card--phone { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.order-card--phone:hover { color: var(--paper); }
.order-card--phone .order-card__note { color: #C3BAB0; }
.order-card--phone .order-card__logo { color: var(--tomato); }

/* ---- Value / under $10 ------------------------------------------------- */
.value-strip {
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.value-strip > div { background: var(--paper); padding: 1.4rem 1.25rem; text-align: center; }
.value-strip .fact__num { font-family: var(--display); font-size: 1.75rem; font-weight: 800; color: var(--tomato-text); line-height: 1.1; }
.value-strip .fact__label { font-size: .88rem; color: var(--ink-2); margin-top: .25rem; }

/* ---- Feature grid ------------------------------------------------------ */
.grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.feature__icon {
  width: 44px; height: 44px; margin-bottom: .9rem;
  display: grid; place-items: center;
  background: var(--tomato-tint); color: var(--tomato-text); border-radius: 11px;
}
.section--ink .feature__icon { background: rgba(228,96,48,.16); color: var(--tomato); }
.feature h3 { margin-bottom: .3em; }
.feature p { color: var(--ink-2); margin-bottom: 0; font-size: .98rem; }
.section--ink .feature p { color: #BCB3A9; }

/* ---- Popular ----------------------------------------------------------- */
.pop-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.pop {
  padding: 1.3rem 1.4rem;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r);
  border-left: 3px solid var(--tomato);
}
.pop__top { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .25rem; }
.pop__name { font-family: var(--display); font-weight: 700; font-size: 1.06rem; flex: 1; margin: 0; }
.pop__price { font-family: var(--display); font-weight: 700; color: var(--tomato-text); white-space: nowrap; margin: 0; }
.pop__desc { font-size: .92rem; color: var(--ink-2); margin: 0; }

/* ---- Menu -------------------------------------------------------------- */
.menu-toolbar {
  position: sticky; top: var(--header-h); z-index: 90;
  background: rgba(250,247,242,.97);
  backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid var(--rule);
  padding-block: .8rem;
}
.menu-search { position: relative; display: flex; align-items: center; }
.menu-search > svg { position: absolute; left: 1rem; color: var(--ink-3); pointer-events: none; }
.menu-search input {
  width: 100%; font: inherit; font-size: 1rem;
  padding: .85rem 2.9rem;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 999px;
}
.menu-search input::placeholder { color: var(--ink-3); }
.menu-search input:focus { outline: none; border-color: var(--tomato-deep); box-shadow: 0 0 0 3px var(--tomato-tint); }
.menu-search__clear {
  position: absolute; right: .6rem; display: none; place-items: center;
  width: 32px; height: 32px; padding: 0;
  background: var(--paper-3); border: 0; border-radius: 50%; color: var(--ink-2); cursor: pointer;
}
.menu-search__clear.is-visible { display: grid; }

/* Wraps on wide screens — a single scrolling row cut the last categories
   off the right edge with no affordance they existed. On phones 17 chips
   wrap to ~9 rows and eat half the viewport, so there it scrolls instead,
   with a fade at the edge to show there is more. */
.menu-chips {
  display: flex; flex-wrap: wrap; gap: .45rem;
  margin-top: .8rem;
}
/* Wrapper exists so the "more" arrow can sit over the scrolling row. */
.menu-chips-wrap { position: relative; }

/* The arrow only appears when the row actually scrolls, and hides once you
   reach the end — a permanent arrow pointing at nothing is worse than none.
   Toggled by .has-more / .at-end in site.js. */
.chips-more {
  position: absolute; top: 50%; right: 0;
  transform: translateY(-50%);
  display: none; align-items: center; justify-content: flex-end;
  width: 3.25rem; height: 100%;
  padding: 0 .1rem 0 1.5rem;
  border: 0; cursor: pointer;
  color: var(--ink);
  background: linear-gradient(to right, rgba(250,247,242,0), var(--paper) 46%);
}
.menu-chips-wrap.has-more .chips-more { display: flex; }
.menu-chips-wrap.at-end .chips-more { display: none; }
.chips-more svg { width: 19px; height: 19px; }
.chips-more:hover { color: var(--tomato-text); }

@media (max-width: 719px) {
  .menu-chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding-bottom: .15rem; scroll-behavior: smooth;
  }
  .menu-chips::-webkit-scrollbar { display: none; }
}
/* Above the wrap breakpoint the row never scrolls, so neither does the hint. */
@media (min-width: 720px) { .chips-more { display: none !important; } }
.menu-chips a, .menu-chips button {
  flex: none; font: inherit; font-size: .95rem; font-weight: 600; white-space: nowrap;
  padding: .5rem 1rem; border-radius: 999px;
  color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--rule);
  text-decoration: none; cursor: pointer;
}
.menu-chips a:hover, .menu-chips button:hover { background: var(--paper-3); color: var(--ink); }
.menu-chips a.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip-value { color: var(--basil-deep); background: var(--basil-tint); border-color: #D3E3C0; }
.chip-value:hover { background: #E4EFD6; color: var(--basil-deep); }
.chip-value.is-on { background: var(--basil-deep); color: #fff; border-color: var(--basil-deep); }

.menu-count { margin-top: .8rem; font-size: .9rem; color: var(--ink-2); }
.menu-empty { display: none; text-align: center; padding: 4rem 1rem; }
.menu-empty.is-visible { display: block; }

.menu-cat { padding-top: clamp(2.25rem, 4.5vw, 3.25rem); scroll-margin-top: calc(var(--header-h) + 112px); }
.menu-cat.is-hidden { display: none; }
/* Category banner slot — collapses entirely until an image is set in JSON. */
.menu-cat__banner {
  display: block; margin-bottom: 1.1rem;
  border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--rule); background: var(--paper-2);
  aspect-ratio: 16 / 5;
}
.menu-cat__banner.is-empty { display: none; }
.menu-cat__banner img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .menu-cat__banner { aspect-ratio: 16 / 7; } }

.menu-cat__head { border-bottom: 3px solid var(--ink); padding-bottom: .6rem; margin-bottom: .3rem; }
.menu-cat__head h2 { margin-bottom: 0; }
.menu-cat__blurb { font-size: 1rem; color: var(--ink-2); margin: .85rem 0 0; max-width: 58ch; }
.menu-cat__note {
  display: flex; gap: .55rem; align-items: flex-start;
  margin: .9rem 0 0; padding: .75rem 1rem;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-sm);
  font-size: .89rem; color: var(--ink-2);
}
.menu-cat__note svg { flex: none; margin-top: .18rem; }

/* Item slots: media · name · tags · price · desc. Flex so an empty,
   display:none media slot leaves no gap behind it. */
.menu-list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.menu-item {
  display: flex; align-items: flex-start; gap: .95rem;
  padding: 1rem 0; margin: 0; border-bottom: 1px solid var(--rule);
}
.menu-item.is-hidden { display: none; }
.menu-item__body { flex: 1; min-width: 0; }
.menu-item__media {
  flex: none; width: 62px; height: 62px;
  border-radius: var(--r-sm); overflow: hidden;
  background: var(--paper-3); border: 1px solid var(--rule);
}
.menu-item__media.is-empty { display: none; }
.menu-item__media img { width: 100%; height: 100%; object-fit: cover; }
.menu-item__name {
  font-family: var(--display); font-weight: 700; font-size: 1.18rem;
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 0;
}
.menu-item__name::after {
  content: ""; flex: 1; min-width: 1.5rem; height: 0;
  border-bottom: 1px dotted var(--rule); transform: translateY(-.25em);
}
.menu-item__tags { display: inline-flex; gap: .3rem; }
.menu-item__tags.is-empty { display: none; }
.menu-item__price {
  flex: none; font-family: var(--display); font-weight: 700; font-size: 1.18rem;
  color: var(--tomato-text); white-space: nowrap; margin: 0;
}
.menu-item__desc { margin: .32rem 0 0; max-width: 66ch; font-size: 1.01rem; color: var(--ink-2); }
.menu-item__desc.is-empty { display: none; }

.tag-pop, .tag-value {
  font-size: .63rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: .18rem .45rem; border-radius: 4px;
}
.tag-pop { color: var(--tomato-text); background: var(--tomato-tint); border: 1px solid #F3D9CE; }
.tag-value { color: var(--basil-deep); background: var(--basil-tint); border: 1px solid #D3E3C0; }

mark { background: #FBE7B8; color: inherit; padding: 0 .12em; border-radius: 2px; }

/* ---- Ratings across platforms -----------------------------------------
   Every platform shown, not just the flattering ones. Scores are
   normalised to /5 and the headline average is weighted by review count. */
.ratings {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  margin-top: 1.5rem;
}
.rating {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1rem 1.1rem;
  background: #262320; border: 1px solid #3A3531; border-radius: var(--r);
  text-decoration: none; color: inherit;
}
a.rating:hover { border-color: #57504A; color: inherit; }
.rating__top { display: flex; align-items: center; gap: .5rem; }
.rating__logo { width: 17px; height: 17px; flex: none; }
.rating__logo svg, .rating__logo img { width: 100%; height: 100%; }
.rating__name { font-size: .82rem; font-weight: 700; color: #CFC7BD; }
.rating__score {
  font-family: var(--display); font-size: 1.5rem; font-weight: 800;
  color: var(--paper); line-height: 1.1;
}
.rating__score span { font-size: .82rem; font-weight: 600; color: #978F87; }
.rating__count { font-size: .78rem; color: #A8A099; }

.ratings-note { margin: 1.25rem 0 0; font-size: .88rem; color: #A8A099; }

/* Small platform mark next to a quoted review's attribution */
.review__by { display: flex; align-items: center; gap: .4rem; }
.review__src { width: 13px; height: 13px; flex: none; opacity: .8; }
.review__src svg, .review__src img { width: 100%; height: 100%; }
.section--ink .review__src img { filter: invert(1) opacity(.7); }

/* ---- Reviews ----------------------------------------------------------- */
.review-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
.review {
  display: flex; flex-direction: column;
  padding: 1.5rem; border-radius: var(--r);
  background: var(--paper); border: 1px solid var(--rule);
}
.section--ink .review { background: #262320; border-color: #3A3531; }
/* Stars carry the rating, so they must clear AA on both surfaces. The raw
   logo tomato is only 3.3:1 on cream, hence a darker tone on light and a
   lighter one on dark. */
.review__stars { color: var(--tomato-text); letter-spacing: .1em; font-size: .92rem; margin-bottom: .65rem; }
.section--ink .review__stars { color: #F09A6B; }   /* 7.1:1 on the dark card */
.review__text { font-family: var(--display); font-size: 1.02rem; line-height: 1.55; margin: 0 0 1rem; }
.section--ink .review__text { color: var(--paper); }
.review__by { margin-top: auto; font-size: .86rem; color: var(--ink-2); }
.section--ink .review__by { color: #A8A099; }      /* 6.1:1 on the dark card */

/* ---- Visit ------------------------------------------------------------- */
.info-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 820px) { .info-grid { grid-template-columns: 1fr 1fr; } }
.hours { width: 100%; border-collapse: collapse; font-size: 1rem; }
.hours th, .hours td { text-align: left; padding: .55rem 0; border-bottom: 1px solid var(--rule); font-weight: 500; }
.hours th { font-weight: 650; }
.hours td { text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hours tr.is-today th, .hours tr.is-today td { color: var(--tomato-text); font-weight: 700; }
.addr { font-style: normal; font-size: 1.04rem; line-height: 1.8; }
.map-embed { width: 100%; aspect-ratio: 16 / 10; border: 1px solid var(--rule); border-radius: var(--r); filter: saturate(.85); }

/* ---- Footer ------------------------------------------------------------ */
.footer { background: var(--ink); color: #B3AAA1; padding-block: clamp(2.75rem, 5vw, 4rem) 2rem; }
.footer a { color: #E1D9CF; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* Footer column labels are h2 so the document outline never skips a level
   (h1 -> h3) on the short error pages, where nothing sits between them. */
.footer h2 { font-family: var(--body); font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--tomato); margin-bottom: .9rem; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .45rem; }
/* ---- Footer socials / citations ---------------------------------------- */
.socials {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid #35302C;
}
.socials__label {
  flex-basis: 100%;
  font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tomato); margin: 0 0 .35rem;
}
.social {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .85rem; border-radius: 999px;
  background: #262320; border: 1px solid #3A3531;
  color: #CFC7BD; font-size: .88rem; font-weight: 600; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  box-sizing: border-box;
}
.social:hover { background: #302B27; border-color: #57504A; color: #fff; text-decoration: none; }
.social svg { width: 15px; height: 15px; flex: none; }

/* Condensed: even rows (4+3, then 3+2+2) instead of a lone orphan under 6. */
@media (max-width: 960px) {
  .social {
    flex: 0 1 calc(25% - .375rem);
    max-width: calc(25% - .375rem);
    justify-content: center;
  }
}
@media (max-width: 560px) {
  /* label is child 1; tags are children 2–8 → 3 + 2 + 2 */
  .social:nth-child(-n+4) {
    flex-basis: calc(33.333% - .34rem);
    max-width: calc(33.333% - .34rem);
  }
  .social:nth-child(n+5) {
    flex-basis: calc(50% - .25rem);
    max-width: calc(50% - .25rem);
  }
}

.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.1rem;
  margin-top: 2.5rem; padding-top: 1.6rem; border-top: 1px solid #35302C; font-size: .85rem;
}
.footer__credit { display: flex; align-items: center; gap: .7rem; }
.footer__credit img { width: 118px; height: auto; opacity: .8; }
.footer__credit a:hover img { opacity: 1; }

/* ---- Mobile order bar -------------------------------------------------- */
.orderbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: flex; gap: .5rem;
  padding: .65rem var(--gut) calc(.65rem + env(safe-area-inset-bottom));
  background: rgba(250,247,242,.97); backdrop-filter: blur(10px);
  border-top: 1px solid var(--rule);
}
.orderbar .btn { flex: 1; padding-inline: .7rem; }
@media (min-width: 900px) { .orderbar { display: none; } }

/* ---- "Best way to support us" card ------------------------------------ */
.support {
  position: fixed; z-index: 96; right: var(--gut); bottom: 1.25rem;
  width: min(22rem, calc(100vw - 2 * var(--gut)));
  padding: 1.1rem 1.1rem 1rem;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: var(--shadow);
  animation: support-in .35s ease-out;
}
.support[hidden] { display: none; }
.support__title { font-family: var(--display); font-weight: 700; font-size: 1.12rem; color: var(--ink); margin: 0 2.25rem .8rem 0; }
.support__opts { display: grid; gap: .5rem; }
.support__opt {
  display: flex; align-items: center; gap: .8rem;
  padding: .75rem .9rem; background: #fff;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  color: var(--ink); font-weight: 650; text-decoration: none; line-height: 1.25;
}
.support__opt:hover { border-color: var(--ink); color: var(--ink); }
.support__opt svg { width: 28px; height: 28px; flex: none; }
.support__opt--dd svg { color: #FF3008; }
.support__opt--call svg { color: var(--tomato-deep); }
.support__opt small { display: block; font-size: .85rem; font-weight: 400; color: var(--ink-2); }
.support__close {
  position: absolute; top: .35rem; right: .35rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 0; border-radius: var(--r-sm);
  color: var(--ink-2); cursor: pointer;
}
.support__close:hover { background: var(--paper-3); color: var(--ink); }
@keyframes support-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .support { animation: none; } }
/* Phones: full width, parked above the order bar. */
@media (max-width: 899px) { .support { left: var(--gut); right: var(--gut); width: auto; bottom: calc(76px + .75rem + env(safe-area-inset-bottom)); } }
@media (max-width: 899px) { body { padding-bottom: 76px; } }

/* ---- Reveal on scroll --------------------------------------------------
   Ported from the 21st.dev "Reveal" component (asanshay). Gated on .js so
   nothing is ever hidden from crawlers or no-script visitors. */
.js [data-reveal] {
  opacity: 0; transform: translateY(28px); filter: blur(6px);
  transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1), filter .55s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
}
/* Set by the failsafe when the rendering lifecycle stalls. */
.js.reveal-instant [data-reveal] { transition: none !important; }

/* ---- Specials ticker ---------------------------------------------------
   Ported from the 21st.dev "Infinite Marquee" (framecn). The run is
   duplicated in markup and translated -50%, so the loop has no seam. */
.ticker {
  overflow: hidden; padding-block: .8rem;
  background: var(--ink);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker__track { display: flex; width: max-content; animation: ticker 46s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__run { display: flex; flex: none; }
.ticker__item {
  display: inline-flex; align-items: baseline; gap: .5rem; padding-inline: 1.4rem;
  font-family: var(--display); font-size: 1rem; font-weight: 700;
  color: var(--paper); white-space: nowrap;
}
.ticker__item + .ticker__item { border-left: 1px solid #38332F; }
.ticker__price { color: var(--tomato); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } .ticker { overflow-x: auto; } }

/* ---- Print ------------------------------------------------------------- */
@media print {
  .header, .drawer, .scrim, .orderbar, .support, .menu-toolbar, .footer, .btn, .ticker, .hero__badges { display: none !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  body { background: #fff; font-size: 11pt; padding-bottom: 0; }
  .section { padding-block: 1rem; }
  .menu-cat { page-break-inside: avoid; padding-top: 1.25rem; }
  .menu-item { break-inside: avoid; padding: .4rem 0; }
  .menu-item__price { color: #000; }
}