/* ═══════════════════════════════════════════════════════════════════════
   LA TAPATÍA — ELEVATE
   Loads last. Layers on top of design.css and polish.css; overrides
   nothing structural, only refines. Four jobs:

     1. HERO BLEND  — the photo was butting against hard edges and read as
        pasted on. Now it is feathered on all four sides, colour-matched to
        the paper, and vignetted, so it reads as printed into the page.
     2. COUNTDOWN   — a live ticking clock, not a static label.
     3. PHOTO RAIL  — the menu's signature move. A big photo that follows
        you down the page and changes to whatever section you are reading.
     4. NIGHT MODE  — a full second palette, driven by tokens only.
   ═══════════════════════════════════════════════════════════════════════ */

/* ══ 1 · THE HERO BLEND ═══════════════════════════════════════════════ */

.hero{
  /* A hairline of gold light where the photo meets the paper, and a deeper
     bed under the whole band so the hero sits ON the page, not in front. */
  box-shadow:inset 0 -22px 34px -26px #2a180866, 0 1px 0 #ffffff5e;
}

/* The photo itself gets colour-graded toward the paper. Restaurant phone
   photos are cooler and flatter than the palette; this warms and seats them. */
.hero-photo{
  filter:saturate(1.06) contrast(1.04) brightness(1.02) sepia(.06);
  /* Feather the top and bottom edges so it never shows a cut line. */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 88%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 88%,transparent 100%);
}

/* Replaces the single hard gradient with four stacked layers:
   a long horizontal feather, a top wash under the header, a bottom wash
   into the values strip, and a warm vignette that unifies the whole frame. */
.hero-fade{
  background:
    linear-gradient(90deg,
      var(--paper) 0%, var(--paper) 26%,
      color-mix(in srgb, var(--paper) 92%, transparent) 34%,
      color-mix(in srgb, var(--paper) 62%, transparent) 43%,
      color-mix(in srgb, var(--paper) 26%, transparent) 52%,
      transparent 64%),
    linear-gradient(180deg, color-mix(in srgb, var(--paper) 74%, transparent) 0%, transparent 22%),
    linear-gradient(0deg, color-mix(in srgb, var(--paper) 82%, transparent) 0%, transparent 26%),
    radial-gradient(ellipse 78% 88% at 74% 46%, transparent 42%, #2a180830 100%);
}

/* A second, very soft pass on top of everything. This is the layer that
   kills the "placed there" look: it re-tints the exposed photo with the
   page's own paper colour at low opacity. */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(96deg, transparent 52%, color-mix(in srgb, var(--paper) 16%, transparent) 84%, color-mix(in srgb, var(--paper) 30%, transparent) 100%);
  mix-blend-mode:normal;
}
.hero-inner{z-index:2}

@media(min-width:1500px){
  .hero-fade{
    background:
      linear-gradient(90deg, var(--paper) 0%, var(--paper) 30%,
        color-mix(in srgb, var(--paper) 60%, transparent) 44%,
        transparent 62%),
      linear-gradient(180deg, color-mix(in srgb, var(--paper) 70%, transparent) 0%, transparent 20%),
      linear-gradient(0deg, color-mix(in srgb, var(--paper) 80%, transparent) 0%, transparent 24%),
      radial-gradient(ellipse 76% 88% at 74% 46%, transparent 44%, #2a180828 100%);
  }
}

/* ══ 2 · THE LIVE COUNTDOWN ═══════════════════════════════════════════ */

.hours-sign{min-width:264px}
.hours-sign i{position:relative}
.hours-sign i::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid currentColor;opacity:0;
  animation:ring 2.6s ease-out infinite;
}
.hours-sign.is-shut i::after{animation:none}
@keyframes ring{0%{opacity:.55;transform:scale(.6)}70%{opacity:0;transform:scale(1.9)}100%{opacity:0}}

/* The clock. Tabular figures so the digits do not jitter as they tick. */
.countdown{
  margin-top:11px;padding:11px 10px 9px;border-radius:7px;
  background:color-mix(in srgb, var(--green) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--green) 26%, transparent);
}
.hours-sign.is-shut .countdown{
  background:color-mix(in srgb, var(--red) 8%, transparent);
  border-color:color-mix(in srgb, var(--red) 26%, transparent);
}
.countdown__lab{
  display:block;font:700 11px/1.3 var(--head);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px;
}
.countdown__clock{
  display:flex;justify-content:center;align-items:flex-end;gap:5px;
  font-variant-numeric:tabular-nums;
}
.countdown__unit{display:flex;flex-direction:column;align-items:center;min-width:38px}
.countdown__unit b{
  font:800 30px/1 var(--head);color:var(--green);
  font-variant-numeric:tabular-nums;
}
.hours-sign.is-shut .countdown__unit b{color:var(--red)}
.countdown__unit small{
  font:700 9px/1.4 var(--head);letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin-top:2px;
}
.countdown__sep{font:800 24px/1 var(--head);color:var(--gold);padding-bottom:14px}

/* The public ribbon. Everybody sees this one, on every page. */
.ribbon{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  padding:10px 20px;background:var(--green);color:var(--cream);
  border-bottom:2px solid var(--gold);
  font:700 15px/1.2 var(--head);letter-spacing:.05em;text-transform:uppercase;
}
.ribbon.is-shut{background:var(--red)}
.ribbon b{font-variant-numeric:tabular-nums;font-size:19px;color:#ffe6a8;letter-spacing:.02em}
.ribbon__dot{
  width:9px;height:9px;border-radius:50%;background:#8ede9a;flex:none;
  box-shadow:0 0 0 0 #8ede9a99;animation:ring2 2.6s ease-out infinite;
}
.ribbon.is-shut .ribbon__dot{background:#ffb3ae;animation:none}
@keyframes ring2{70%{box-shadow:0 0 0 9px #8ede9a00}100%{box-shadow:0 0 0 0 #8ede9a00}}
@media(max-width:620px){.ribbon{font-size:13px;gap:8px;padding:9px 14px}.ribbon b{font-size:16px}}

/* ══ 3 · THE MENU PHOTO RAIL ══════════════════════════════════════════ */

.menu-stage{
  display:grid;grid-template-columns:400px minmax(0,1fr);
  gap:34px;align-items:start;max-width:1160px;margin:26px auto 50px;padding:0 20px;
}
.menu-rail{position:sticky;top:104px}

/* The plate: a framed photo that cross-fades as you scroll. */
.rail-plate{
  position:relative;aspect-ratio:4/5;border-radius:10px;overflow:hidden;
  border:5px double var(--border);
  box-shadow:0 14px 34px -14px #2a180899, inset 0 0 0 2px #fff3d0;
  background:linear-gradient(150deg,#d9c18a,#a8823c);
}
.rail-plate img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .55s ease, transform 7s linear;
  transform:scale(1.03);
}
.rail-plate img.is-on{opacity:1;transform:scale(1.09)}
.rail-plate::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,#2a1808b8 0%,#2a180820 26%,transparent 52%),
             radial-gradient(ellipse 90% 90% at 50% 40%, transparent 50%, #2a180845 100%);
}
.rail-plate figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 18px 16px;
  color:#fff6e2;text-align:center;
}
.rail-plate figcaption b{
  display:block;font:900 34px/.95 var(--head);text-transform:uppercase;
  letter-spacing:-.01em;text-shadow:0 2px 8px #1a0f04cc;
}
.rail-plate figcaption span{
  display:block;font-family:"Kaushan Script",cursive;font-size:19px;
  color:#ffdf9e;margin-top:5px;text-shadow:0 2px 6px #1a0f04cc;
}
.rail-count{
  margin-top:12px;text-align:center;font:700 12px/1.4 var(--head);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.rail-count b{color:var(--red);font-size:15px}

/* Section headers get a gold rule and a tiny inline plate on mobile. */
.menu-scroll .menu-section{
  break-inside:auto;margin-bottom:30px;padding:26px 26px 20px;
  background:linear-gradient(160deg,#fffaf0,#f7ecd4);
  border:1px solid var(--border);border-radius:10px;
  box-shadow:0 3px 14px -8px #2a180855;scroll-margin-top:120px;
}
.menu-scroll .menu-section h2{
  font-size:40px;color:var(--red);border:0;padding:0;margin:0;line-height:.95;
}
.sec-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-bottom:11px;margin-bottom:6px;border-bottom:3px double var(--gold)}
.sec-head .sec-es{font-family:"Kaushan Script",cursive;font-size:21px;color:var(--gold);}
.sec-thumb{display:none}

/* Two even columns of dishes inside each section. */
.sec-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:0 34px;margin-top:8px}

@media(max-width:1000px){
  .menu-stage{grid-template-columns:1fr;gap:0}
  .menu-rail{display:none}
  /* On a phone the rail becomes a photo band on top of each section. */
  .sec-thumb{
    display:block;position:relative;width:100%;height:150px;margin:-26px -26px 16px;
    width:calc(100% + 52px);border-radius:10px 10px 0 0;overflow:hidden;
  }
  .sec-thumb img{width:100%;height:100%;object-fit:cover}
  .sec-thumb::after{content:"";position:absolute;inset:0;
    background:linear-gradient(0deg,#fffaf0 2%,#fffaf000 60%)}
}

/* ══ 4 · NIGHT MODE ═══════════════════════════════════════════════════ */

.theme-toggle{
  display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 13px;
  border:1px solid var(--border);border-radius:6px;background:transparent;
  color:var(--green);cursor:pointer;
  font:700 15px var(--head);letter-spacing:.05em;text-transform:uppercase;
}
.theme-toggle:hover{border-color:var(--gold);color:var(--red)}
.theme-toggle svg{width:16px;height:16px;fill:currentColor}

html[data-theme="night"]{
  --paper:#14100b;
  --cream:#f6ead0;
  --ink:#f4ead6;
  --green:#7fc08d;
  --red:#ff8b74;
  --gold:#e0b45f;
  --muted:#b3a184;
  --wood:#0c0805;
  --border:#4b3a20;
}
html[data-theme="night"] body{background:#14100b;color:var(--ink)}
html[data-theme="night"] .panel{
  background:linear-gradient(125deg,#221a10,#191309);
  box-shadow:inset 0 0 22px #00000055;border-color:#4b3a20;
}
html[data-theme="night"] .menu-scroll .menu-section{
  background:linear-gradient(160deg,#221a10,#191309);border-color:#4b3a20;
}
html[data-theme="night"] .menu-section h2,
html[data-theme="night"] .visit h2,
html[data-theme="night"] .follow h2,
html[data-theme="night"] .menu-preview h2{color:#ffa88f}
html[data-theme="night"] .hero h1 span:first-child{color:#ff8b74}
html[data-theme="night"] .hero h1 span:nth-child(2){color:#7fc08d}
html[data-theme="night"] .hero h1{text-shadow:0 2px 10px #00000099}
html[data-theme="night"] .hours-sign{background:#221a10;border-color:#4b3a20;
  box-shadow:0 6px 20px #00000099,0 0 0 2px #33260f}
html[data-theme="night"] .menu-tools input{background:#1d1710;color:var(--ink);border-color:#4b3a20}
html[data-theme="night"] .category-nav a{color:#9ed6a9;border-color:#4b3a20}
html[data-theme="night"] .category-nav a:hover{background:#2c6a3a;color:#fff}
html[data-theme="night"] .menu-item .price{color:#ffb59f}
html[data-theme="night"] .menu-item small,
html[data-theme="night"] .menu-note,
html[data-theme="night"] .countdown__lab,
html[data-theme="night"] .countdown__unit small,
html[data-theme="night"] .rail-count{color:#a99578}
html[data-theme="night"] .countdown__unit b{color:#9ed6a9}
html[data-theme="night"] .is-shut .countdown__unit b{color:#ffa88f}
html[data-theme="night"] .notice{background:#1c4a29}
html[data-theme="night"] .theme-toggle{color:#e0b45f}
html[data-theme="night"] .hero-photo{filter:saturate(1.02) contrast(1.06) brightness(.82) sepia(.04)}
html[data-theme="night"] .page-intro h1{color:#9ed6a9}
html[data-theme="night"] .eyebrow{color:#ffa88f}
html[data-theme="night"] .split img,
html[data-theme="night"] .full-gallery img{filter:brightness(.88)}

/* The swap should feel deliberate, not like a flicker. */
body,.panel,.menu-section,.hours-sign,.notice{
  transition:background-color .45s ease,color .45s ease,border-color .45s ease;
}
@media(prefers-reduced-motion:reduce){
  body,.panel,.menu-section,.hours-sign,.notice{transition:none}
  .rail-plate img{transition:opacity .01ms;transform:none}
  .hours-sign i::after,.ribbon__dot{animation:none}
}

/* ══ 5 · THE NEW PAGES ════════════════════════════════════════════════
   Find us, the market and the weekend. Same vocabulary as the rest of the
   site: cream panels, a gold hairline, one red heading, plenty of air.
   ═══════════════════════════════════════════════════════════════════════ */

.split img{object-fit:cover}
.split.reverse>img{order:2}
@media(max-width:820px){.split.reverse>img{order:0}}

.section-lede{max-width:62ch;margin:0 0 26px;font-size:16px;line-height:1.7;color:var(--muted)}
.wide-section>h2{font-size:42px;line-height:1.02;color:var(--red);margin:0 0 14px}

/* ── The landmark block: what the building actually looks like ─────── */
.landmark{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:40px;align-items:center;margin-top:32px}
.landmark-photo{margin:0;padding:9px;background:var(--cream);border:1px solid var(--gold);border-radius:9px;box-shadow:0 12px 30px #49311326}
.landmark-photo img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:5px}
.landmark-photo figcaption{padding:10px 4px 3px;text-align:center;font:600 13px var(--body);color:var(--green)}
@media(max-width:820px){.landmark{grid-template-columns:1fr;gap:22px}}

/* ── The map ───────────────────────────────────────────────────────── */
.map-frame{position:relative;height:440px;border-radius:10px;overflow:hidden;
  border:5px double var(--border);box-shadow:0 14px 34px -16px #2a180899;background:var(--green)}
.map-frame iframe{display:block;width:100%;height:100%;border:0;filter:saturate(.92)}
.map-fallback{margin-top:12px;font-size:14px;color:var(--muted)}
.map-fallback a{color:var(--red);font-weight:700}
@media(max-width:700px){.map-frame{height:330px}}

/* ── Directions cards ──────────────────────────────────────────────── */
.route-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:18px}
.route{padding:22px 22px 18px;background:linear-gradient(160deg,#fffaf0,#f7ecd4);
  border:1px solid var(--border);border-radius:9px;box-shadow:0 3px 14px -8px #2a180855;
  display:flex;flex-direction:column}
.route h3{font:800 25px/1 var(--head);color:var(--green);margin:0 0 9px;text-transform:uppercase;letter-spacing:.01em}
.route p{margin:0 0 16px;font-size:14px;line-height:1.65;color:var(--muted)}
.route-link{margin-top:auto;font:700 14px var(--head);letter-spacing:.06em;
  text-transform:uppercase;color:var(--red);text-decoration:none;border-bottom:2px solid var(--gold);
  align-self:flex-start;padding-bottom:2px}
.route-link:hover{color:var(--green);border-color:var(--green)}

/* ── The grocery aisles ────────────────────────────────────────────── */
.aisle-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(232px,100%),1fr));gap:18px}
.aisle{padding:24px 22px;background:linear-gradient(160deg,#fffaf0,#f7ecd4);
  border:1px solid var(--border);border-radius:9px;box-shadow:0 3px 14px -8px #2a180855}
.aisle>span{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;background:var(--green);color:var(--cream);font-size:21px;margin-bottom:13px}
.aisle h3{font:800 24px/1 var(--head);color:var(--red);margin:0 0 8px;text-transform:uppercase}
.aisle p{margin:0;font-size:14px;line-height:1.65;color:var(--muted)}
.aisle-note{margin-top:22px;padding:15px 18px;background:color-mix(in srgb, var(--green) 8%, transparent);
  border-left:4px solid var(--gold);border-radius:0 6px 6px 0;font-size:14px;line-height:1.65}
.aisle-note a{color:var(--red);font-weight:700}

/* ── The weekend pot ───────────────────────────────────────────────── */
.weekend-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:16px}
.pot{position:relative;padding:26px 20px 22px;text-align:center;
  background:linear-gradient(150deg,#1d4a2a,#143520);color:var(--cream);
  border:1px solid var(--gold);border-radius:9px;box-shadow:0 10px 26px -14px #2a1808cc;
  display:flex;flex-direction:column;align-items:center;gap:5px}
.pot b{font:900 30px/1 var(--head);text-transform:uppercase;letter-spacing:-.01em}
.pot small{font:600 12px var(--body);color:#e9d7ac;letter-spacing:.05em}
.pot-price{margin-top:9px;font:800 30px/1 var(--head);color:#ffd98a;font-variant-numeric:tabular-nums}

/* ── The "where to next" strip that ends every new page ────────────── */
.next-strip{padding-top:8px}
.next-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:14px}
.next-card{display:flex;flex-direction:column;gap:5px;padding:20px 18px;text-decoration:none;
  background:var(--cream);border:1px solid var(--border);border-radius:9px;
  box-shadow:0 3px 12px -8px #2a180866;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.next-card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 10px 22px -12px #2a1808aa}
.next-card>span{font-size:22px;color:var(--gold);line-height:1}
.next-card b{font:800 23px/1 var(--head);color:var(--red);text-transform:uppercase}
.next-card small{font-size:13px;line-height:1.5;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.next-card{transition:none}.next-card:hover{transform:none}}

/* ── Night mode for everything above ───────────────────────────────── */
html[data-theme="night"] .route,
html[data-theme="night"] .aisle,
html[data-theme="night"] .next-card{background:linear-gradient(160deg,#221a10,#191309);border-color:#4b3a20}
html[data-theme="night"] .landmark-photo{background:#221a10;border-color:#4b3a20}
html[data-theme="night"] .landmark-photo figcaption,
html[data-theme="night"] .route h3{color:#9ed6a9}
html[data-theme="night"] .aisle h3,
html[data-theme="night"] .next-card b,
html[data-theme="night"] .route-link,
html[data-theme="night"] .aisle-note a,
html[data-theme="night"] .map-fallback a{color:#ffa88f}
html[data-theme="night"] .section-lede,
html[data-theme="night"] .route p,
html[data-theme="night"] .aisle p,
html[data-theme="night"] .next-card small,
html[data-theme="night"] .map-fallback{color:#a99578}
html[data-theme="night"] .aisle>span{background:#2c6a3a}
html[data-theme="night"] .map-frame iframe{filter:saturate(.8) brightness(.82)}

/* ══ 6 · CORRECTIONS FROM THE RENDER PASS ═════════════════════════════ */

/* The photo's own left edge was still landing INSIDE the visible part of
   the gradient, which is the hard line that made it look pasted on. Push
   the photo wider so its edge hides under fully opaque paper and the only
   thing the eye ever sees is the fade itself. */
.hero-photo{width:78%}
@media(max-width:700px){.hero-photo{width:100%}}

/* An 8% green wash over cream reads as dirty grey. Warm it. */
.countdown{
  background:linear-gradient(160deg,#fdf6e4,#f6e9c9);
  border-color:color-mix(in srgb, var(--gold) 55%, transparent);
}
.hours-sign.is-shut .countdown{
  background:linear-gradient(160deg,#fdefe9,#f8e2d6);
  border-color:color-mix(in srgb, var(--red) 30%, transparent);
}
html[data-theme="night"] .countdown{background:#1b140c;border-color:#4b3a20}
html[data-theme="night"] .hours-sign.is-shut .countdown{background:#231410;border-color:#5c3226}

/* The storefront photo is a small source file. Held at 520px it went soft
   and swallowed the copy beside it. Cap it and the pair balances. */
.landmark-photo{max-width:430px;width:100%;justify-self:center}
.landmark{grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:48px}
@media(max-width:820px){.landmark{grid-template-columns:1fr}}

/* One column, on purpose. Two cramped columns of dish names read like a
   printed takeout flyer; one wide column with the price out at the rail
   reads like a menu you would be handed at the table. */
.sec-items{grid-template-columns:1fr}

/* The menudo explainer has no menudo photograph to sit next to, and the
   owner will not have AI food on her site, so it stands on its own. */
.editorial{
  max-width:760px;margin:0 auto;padding:38px 40px;text-align:center;
  background:linear-gradient(160deg,#fffaf0,#f7ecd4);
  border:1px solid var(--border);border-radius:10px;
  box-shadow:0 3px 16px -9px #2a180855;
}
.editorial h2{color:var(--red);margin:6px 0 16px}
.editorial p{margin:0 auto 16px;max-width:62ch;font-size:16px;line-height:1.75;text-align:left}
.editorial .script{color:var(--gold)}
.editorial .button{margin-top:6px}
@media(max-width:700px){.editorial{padding:28px 22px}}
html[data-theme="night"] .editorial{background:linear-gradient(160deg,#221a10,#191309);border-color:#4b3a20}
html[data-theme="night"] .editorial h2{color:#ffa88f}

/* A square crop of the storefront is two thirds sky. Favour the building. */
.landmark-photo img{height:auto;aspect-ratio:4/3;object-position:center 64%}

/* The mobile section photo faded into a hardcoded cream, which stayed cream
   in night mode and cut a pale band across a dark page. Token it. */
@media(max-width:1000px){
  .sec-thumb::after{background:linear-gradient(0deg,#fffaf0 2%,transparent 60%)}
  html[data-theme="night"] .sec-thumb::after{background:linear-gradient(0deg,#221a10 2%,transparent 60%)}
}

/* The medallion logo hangs out of the header. In English the nav cleared it;
   in Spanish the words are longer, the nav slid left, and "Inicio" vanished
   underneath it. Reserve the logo's lane so no language can ever slide under. */
@media(min-width:901px){
  .nav-wrap>nav#navigation{margin-left:auto}
  .nav-wrap{padding-left:236px;position:relative}
  .nav-wrap>.brand{position:absolute;left:20px;top:0}
}

/* The editorial panel centres its heading; the script line above it was
   inheriting the left-aligned body rule and sitting off-axis. */
.editorial .script{text-align:center}

/* ══ 7 · MORE PHOTOS PER SECTION ══════════════════════════════════════ */

/* Little markers under the plate so it reads as a deliberate rotation and
   not a page glitching. Hidden when a category only has one photo. */
.rail-dots{position:absolute;left:0;right:0;bottom:8px;z-index:3;
  display:flex;justify-content:center;gap:6px;pointer-events:none}
.rail-dots i{width:6px;height:6px;border-radius:50%;background:#fff6e255;
  box-shadow:0 1px 3px #1a0f0488;transition:background .35s ease,transform .35s ease}
.rail-dots i.on{background:#ffdf9e;transform:scale(1.35)}
.rail-plate figcaption{padding-bottom:26px}
@media(prefers-reduced-motion:reduce){.rail-dots i{transition:none}}

/* ══ 8 · THE DINING ROOM ══════════════════════════════════════════════ */

.dining{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.dining figure{margin:0;padding:8px;background:var(--cream);border:1px solid var(--gold);
  border-radius:9px;box-shadow:0 8px 22px -14px #49311399}
.dining img{display:block;width:100%;height:230px;object-fit:cover;border-radius:5px}
.dining figcaption{padding:9px 4px 2px;text-align:center;
  font:600 12px var(--body);color:var(--green)}
@media(max-width:820px){.dining{grid-template-columns:1fr;gap:12px}.dining img{height:210px}}
html[data-theme="night"] .dining figure{background:#221a10;border-color:#4b3a20}
html[data-theme="night"] .dining figcaption{color:#9ed6a9}
html[data-theme="night"] .dining img{filter:brightness(.88)}

/* Night-only surface finish, matching the existing values strip and footer. */
/* A precise 2px hotspot at the pointer tip. Touch and text editing stay native. */
@media(hover:hover) and (pointer:fine){
  html,body,a,button,[role="button"],summary,.full-gallery button{cursor:url("img/taco-cursor.svg?v=3") 2 2,auto}
  input,textarea,[contenteditable="true"]{cursor:text}
  button:disabled,[aria-disabled="true"]{cursor:not-allowed}
}

/* Night-only surface finish, matching the existing values strip and footer. */
html[data-theme="night"]{
  --night-grain:repeating-linear-gradient(2deg,#ac784416 0px,#110b0733 2px,transparent 4px,transparent 9px),repeating-linear-gradient(0deg,transparent 0px,#d1ac6014 31px,#08060488 33px,#50331b44 35px);
}
html[data-theme="night"] body,
html[data-theme="night"] .header,
html[data-theme="night"] .panel,
html[data-theme="night"] .menu-scroll .menu-section,
html[data-theme="night"] .hours-sign,
html[data-theme="night"] .countdown,
html[data-theme="night"] .hours-sign.is-shut .countdown,
html[data-theme="night"] .route,
html[data-theme="night"] .aisle,
html[data-theme="night"] .next-card,
html[data-theme="night"] .landmark-photo,
html[data-theme="night"] .editorial,
html[data-theme="night"] .dining figure{
  background-image:var(--night-grain);
}
html[data-theme="night"] :is(.panel,.menu-scroll .menu-section,.route,.aisle,.next-card,.editorial){background-color:#221a10}
html[data-theme="night"] .hero-fade::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--night-grain);
  mask-image:linear-gradient(90deg,#000 0%,#000 30%,transparent 58%);
}
@media(max-width:700px){html[data-theme="night"] .hero-fade::after{mask-image:linear-gradient(180deg,#000 0%,#000 45%,transparent 70%)}}

/* ══ 9 · THE WALKTHROUGH POSTER ═══════════════════════════════════════
   The Facebook Reel plugin renders nothing for a visitor without Facebook
   cookies, which is most of them, and left a solid green block in the
   middle of the home page. A poster that always paints, with the reel one
   tap away, beats an embed that only works for some people.
   ═══════════════════════════════════════════════════════════════════════ */

.video-facade{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:6px}
.video-facade img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.16,1,.3,1)}
.video-facade:hover img{transform:scale(1.05)}
.video-facade::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,#1a0f04cc 0%,#1a0f0433 42%,#1a0f0400 70%)}
.video-play{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:66px;height:66px;border-radius:50%;z-index:2;
  background:var(--red);border:3px solid #ffe6a8;
  box-shadow:0 8px 24px -6px #1a0f04cc;
  transition:transform .3s ease,background .3s ease}
.video-play::before{content:"";position:absolute;left:52%;top:50%;
  transform:translate(-50%,-50%);border-style:solid;
  border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff6e2}
.video-facade:hover .video-play{transform:translate(-50%,-50%) scale(1.09);background:var(--green)}
.video-label{position:absolute;left:0;right:0;bottom:14px;z-index:2;text-align:center;
  font:800 16px/1.2 var(--head);letter-spacing:.06em;text-transform:uppercase;
  color:#fff6e2;text-shadow:0 2px 8px #1a0f04cc}
@media(prefers-reduced-motion:reduce){
  .video-facade img,.video-play{transition:none}
  .video-facade:hover img{transform:none}
}

/* ══ 10 · THE PUBLICPROOF SIGNATURE ═══════════════════════════════════
   It was four grey words nobody would ever click. It is the only mark the
   person who built this site gets, so it should look built, be obviously
   clickable, and carry a UTM so the clicks are actually countable.
   ═══════════════════════════════════════════════════════════════════════ */

.pp-sig{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 8px;
  border:1px solid #ffffff26;border-radius:999px;background:#ffffff0d;
  text-decoration:none;color:inherit;line-height:1.15;
  transition:border-color .25s ease,background .25s ease,transform .25s ease}
.pp-sig:hover{border-color:var(--gold);background:#ffffff14;transform:translateY(-1px)}
.pp-sig:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.pp-sig__mark{display:block;width:34px;height:34px;flex:none;object-fit:contain;filter:drop-shadow(0 2px 4px #0007);transition:transform .25s ease}
.pp-sig:hover .pp-sig__mark{transform:scale(1.08) rotate(-4deg)}
.pp-sig__txt{display:flex;flex-direction:column;gap:2px;text-align:left}
.pp-sig__txt b{font:700 13px var(--body);color:#f3e6c8;letter-spacing:.01em}
.pp-sig__txt small{font:500 11px var(--body);color:#c9b896}
.pp-sig:hover .pp-sig__txt b{color:#ffdf9e}
@media(max-width:620px){.pp-sig__txt small{display:none}}
@media(prefers-reduced-motion:reduce){.pp-sig,.pp-sig__mark{transition:none}.pp-sig:hover{transform:none}.pp-sig:hover .pp-sig__mark{transform:none}}

/* ══ 11 · THE REVIEW STRIP ════════════════════════════════════════════
   Sits in the empty lower half of the walkthrough panel's copy column.
   One quote at a time, rotating, because a wall of eight is a wall.
   ═══════════════════════════════════════════════════════════════════════ */

.rev-strip{
  margin-top:26px;padding:18px 20px 14px;max-width:520px;
  background:linear-gradient(160deg,#fffaf0,#f6e9c9);
  border:1px solid var(--border);border-left:4px solid var(--gold);
  border-radius:4px 9px 9px 4px;box-shadow:0 4px 16px -10px #2a180877;
}
.rev-score{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.rev-num{font:900 34px/1 var(--head);color:var(--green);font-variant-numeric:tabular-nums}
.rev-stars{font-size:17px;color:var(--gold);letter-spacing:1px;line-height:1}
.rev-count{font:600 12px var(--body);color:var(--muted)}

.rev-quote{margin:0;padding:0;border:0}
.rev-quote p{
  margin:0 0 7px;font-size:15px;line-height:1.6;color:var(--ink);
  font-style:italic;min-height:3.2em;
}
.rev-quote cite{
  font:700 11px var(--head);letter-spacing:.13em;text-transform:uppercase;
  color:var(--red);font-style:normal;
}
/* Each quote fades in on arrival rather than snapping. */
.rev-strip.is-fresh .rev-quote{animation:revIn .5s cubic-bezier(.16,1,.3,1) both}
@keyframes revIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

.rev-dots{display:flex;gap:5px;margin-top:11px}
.rev-dots i{width:5px;height:5px;border-radius:50%;background:#c9a84c4d;transition:background .3s ease,transform .3s ease}
.rev-dots i.on{background:var(--red);transform:scale(1.4)}

@media(max-width:700px){
  .rev-strip{max-width:none;padding:16px 16px 12px}
  .rev-num{font-size:29px}
  .rev-quote p{font-size:14px;min-height:0}
}
@media(prefers-reduced-motion:reduce){
  .rev-strip.is-fresh .rev-quote{animation:none}
  .rev-dots i{transition:none}
}

html[data-theme="night"] .rev-strip{background:linear-gradient(160deg,#221a10,#191309);border-color:#4b3a20;border-left-color:var(--gold)}
html[data-theme="night"] .rev-num{color:#9ed6a9}
html[data-theme="night"] .rev-quote cite{color:#ffa88f}
html[data-theme="night"] .rev-count{color:#a99578}

/* ══ 12 · THE CATERING QUOTE BUILDER ══════════════════════════════════
   Two tracks: the sheet you pick from, and a summary that follows you
   down it. On a phone the summary drops underneath and the send button
   sticks to the bottom, because nobody scrolls back up to submit.
   ═══════════════════════════════════════════════════════════════════════ */

.q-wrap{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:30px;align-items:start;margin-top:26px}
@media(max-width:900px){.q-wrap{grid-template-columns:1fr;gap:20px}}

.q-group{margin:0 0 18px;padding:20px 22px 14px;border:1px solid var(--border);border-radius:10px;
  background:linear-gradient(160deg,#fffaf0,#f7ecd4);box-shadow:0 3px 14px -9px #2a180866}
.q-group legend{padding:0 10px;margin-left:-4px;font:800 22px var(--head);color:var(--red);
  text-transform:uppercase;letter-spacing:.02em}
.q-note{margin:0 0 12px;font-size:13px;line-height:1.55;color:var(--muted);font-style:italic}

.q-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px dotted var(--border)}
.q-row:last-child{border-bottom:0}
.q-row.is-on{background:color-mix(in srgb, var(--gold) 12%, transparent);
  margin:0 -12px;padding-left:12px;padding-right:12px;border-radius:6px}
.q-what b{display:block;font:700 16px var(--body);color:var(--ink)}
.q-what small{display:block;margin-top:2px;font-size:13px;color:var(--green);font-weight:600}
.q-what small.q-callfor{color:var(--muted);font-style:italic;font-weight:500}
.q-meat{display:flex;align-items:center;gap:7px;margin-top:8px}
.q-meat span{font:700 11px var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.q-meat select{padding:5px 8px;border:1px solid var(--border);border-radius:5px;
  background:var(--cream);color:var(--ink);font:500 13px var(--body);min-height:34px}

.q-step{display:flex;align-items:center;gap:4px;flex:none}
.q-btn{width:38px;height:38px;border:1px solid var(--border);border-radius:7px;cursor:pointer;
  background:var(--cream);color:var(--green);font:800 19px/1 var(--head);
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.q-btn:hover{background:var(--green);color:var(--cream);border-color:var(--green)}
.q-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.q-step output{min-width:34px;text-align:center;font:800 19px var(--head);
  color:var(--ink);font-variant-numeric:tabular-nums}

/* ── The running summary ──────────────────────────────────────────── */
.q-side{position:sticky;top:104px}
@media(max-width:900px){.q-side{position:static}}
.q-card{padding:22px;border:1px solid var(--border);border-radius:10px;
  background:linear-gradient(150deg,#1d4a2a,#143520);color:var(--cream);
  box-shadow:0 14px 34px -18px #2a1808cc}
.q-card h3{margin:0 0 12px;font:800 24px var(--head);text-transform:uppercase;color:#ffd98a}
.q-card ul{list-style:none;margin:0 0 12px;padding:0;max-height:230px;overflow-y:auto}
.q-card li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;
  border-bottom:1px solid #ffffff1f;font-size:14px;line-height:1.4}
.q-card li i{color:#e9d7ac;font-style:normal;font-size:12px}
.q-card li b{flex:none;font-variant-numeric:tabular-nums;color:#ffd98a}
.q-card li.q-empty{justify-content:flex-start;color:#e9d7ac;font-style:italic;border-bottom:0}
.q-total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding-top:11px;border-top:2px solid var(--gold);margin-bottom:6px}
.q-total span{font:700 12px var(--head);letter-spacing:.12em;text-transform:uppercase;color:#e9d7ac}
.q-total b{font:900 30px/1 var(--head);color:#ffd98a;font-variant-numeric:tabular-nums}
.q-plus{margin:0 0 14px;font-size:12px;color:#e9d7ac}
.q-plus b{color:#ffd98a}

.q-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.q-fields label{display:flex;flex-direction:column;gap:4px;
  font:700 11px var(--head);letter-spacing:.1em;text-transform:uppercase;color:#e9d7ac}
.q-fields label.q-wide{grid-column:1 / -1}
.q-fields input,.q-fields textarea{
  padding:9px 10px;border:1px solid #ffffff33;border-radius:6px;
  background:#ffffff12;color:#fff6e2;font:500 14px var(--body);min-height:40px}
.q-fields input::placeholder,.q-fields textarea::placeholder{color:#ffffff66}
.q-fields input:focus,.q-fields textarea:focus{outline:2px solid var(--gold);outline-offset:1px;background:#ffffff1c}
.q-card .button{width:100%;justify-content:center;margin-top:2px}
.q-card .button:disabled{opacity:.45;cursor:not-allowed}
.q-fine{margin:10px 0 0;font-size:11.5px;line-height:1.5;color:#e9d7ac}
.q-ok{margin:12px 0 0;padding:10px 12px;border-radius:6px;background:#ffd98a;color:#143520;
  font-weight:700;font-size:13px;line-height:1.5}

@media(max-width:620px){.q-fields{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.q-btn{transition:none}}

html[data-theme="night"] .q-group{background:linear-gradient(160deg,#221a10,#191309);border-color:#4b3a20}
html[data-theme="night"] .q-group legend{color:#ffa88f}
html[data-theme="night"] .q-btn{background:#1d1710;border-color:#4b3a20;color:#9ed6a9}
html[data-theme="night"] .q-btn:hover{background:#2c6a3a;color:#fff}
html[data-theme="night"] .q-meat select{background:#1d1710;border-color:#4b3a20;color:var(--ink)}
html[data-theme="night"] .q-row.is-on{background:#3a2c14}

/* Grid children default to min-width:auto, so the date and time inputs
   refused to shrink and pushed straight out of the summary card. */
.q-fields label{min-width:0}
.q-fields input,.q-fields textarea{width:100%;min-width:0;box-sizing:border-box;max-width:100%}
.q-card{overflow:hidden}

/* Honeypot. Positioned off-screen rather than display:none, because plenty
   of bots skip hidden fields but will happily fill an off-screen one. */
.q-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ══ 13 · PHOTO TREATMENT ═════════════════════════════════════════════
   These are phone photos taken under fluorescent light and dropped onto a
   warm cream page, so they read flat and cold next to it. Nothing here
   re-shoots anything: it grades every photo the same way, gives each one a
   mat and a hairline the way the menu rail plate already has, and beds it
   into the page with a vignette instead of letting it float.

   One grade, defined once. Change these two values and every photo on the
   site moves together.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --photo-grade:saturate(1.09) contrast(1.06) brightness(1.02);
  --photo-bed:inset 0 0 0 1px #ffffff2b, inset 0 -38px 46px -32px #2a1808ad, 0 12px 28px -16px #2a1808a6;
}

/* The grade. Everything except the pieces that already carry their own
   treatment: the rail plate, the landmark frame, the dining figures and the
   video poster all set their own filter and would end up double-graded. */
.photo-grid img,
.full-gallery img,
.split img,
.category-tiles img,
.menu-intro-photo img,
.neighborhood-photo,
.dish-photo,
.familia-photo,
.catering-tray-photo,
.story-preview > img,
.place-slide,
.map-link > img,
.trio img{
  filter:var(--photo-grade);
}

/* Depth. An inset vignette darkens the lower edge so the photo has weight,
   a hairline of light along the top edge keeps it from going muddy, and a
   real shadow underneath lifts it off the paper. */
.photo-grid img,
.full-gallery img,
.split img,
.menu-intro-photo img,
.neighborhood-photo,
.dish-photo,
.familia-photo,
.catering-tray-photo,
.story-preview > img{
  box-shadow:var(--photo-bed);
  border-radius:7px;
}

/* The mat. A cream border and a gold hairline, the same language the rail
   plate uses, which is the thing on this site that already looks expensive. */
.full-gallery img,
.photo-grid img{
  border:3px solid var(--cream);
  outline:1px solid color-mix(in srgb, var(--gold) 60%, transparent);
  outline-offset:0;
}

/* The ten menu tiles are small and circular-ish; they want the ring, not
   the mat, or they turn into postage stamps. */
.category-tiles img{
  box-shadow:0 0 0 2px var(--cream), 0 0 0 3px color-mix(in srgb, var(--gold) 55%, transparent),
             0 6px 14px -8px #2a1808a6;
}

/* A little lift on the things you can click. */
.full-gallery img,
.photo-grid img,
.category-tiles img{
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, filter .35s ease;
}
.full-gallery img:hover,
.photo-grid img:hover{
  transform:translateY(-3px) scale(1.015);
  filter:saturate(1.14) contrast(1.08) brightness(1.04);
  box-shadow:inset 0 0 0 1px #ffffff3a, inset 0 -38px 46px -32px #2a180899, 0 18px 34px -16px #2a1808bb;
}
.category-tiles a:hover img{transform:translateY(-2px) scale(1.04)}

/* Night mode: the same photos on a dark ground need pulling back, not
   pushing. Bright photos on near-black glare. */
html[data-theme="night"]{
  --photo-grade:saturate(1.02) contrast(1.05) brightness(.86);
  --photo-bed:inset 0 0 0 1px #ffffff14, inset 0 -38px 46px -32px #000000c4, 0 12px 28px -16px #000000cc;
}
html[data-theme="night"] .full-gallery img,
html[data-theme="night"] .photo-grid img{border-color:#2a2016;outline-color:#5c4820}
html[data-theme="night"] .category-tiles img{
  box-shadow:0 0 0 2px #221a10, 0 0 0 3px #4b3a20, 0 6px 14px -8px #000000b3;
}

@media(prefers-reduced-motion:reduce){
  .full-gallery img,.photo-grid img,.category-tiles img{transition:none}
  .full-gallery img:hover,.photo-grid img:hover,.category-tiles a:hover img{transform:none}
}

/* ══ 14 · THE ADDRESSES ═══════════════════════════════════════════════
   A business with its own email at its own domain reads as real. Give the
   addresses room rather than burying them in a run of body text.
   ═══════════════════════════════════════════════════════════════════════ */

.footer-grid a[href^="mailto:"]{word-break:break-word}

.mail-list{display:grid;gap:10px;margin:18px 0;text-align:left}
.mail-list a{
  display:flex;flex-direction:column;gap:2px;padding:13px 16px;text-decoration:none;
  background:var(--cream);border:1px solid var(--border);border-left:4px solid var(--gold);
  border-radius:4px 8px 8px 4px;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.mail-list a:hover{transform:translateX(3px);border-left-color:var(--red);
  box-shadow:0 6px 16px -10px #2a1808a6}
.mail-list b{font:700 15px var(--body);color:var(--red);word-break:break-word}
.mail-list span{font-size:12.5px;color:var(--muted)}
.mail-block .script{color:var(--gold)}

html[data-theme="night"] .mail-list a{background:#1d1710;border-color:#4b3a20;border-left-color:var(--gold)}
html[data-theme="night"] .mail-list b{color:#ffa88f}
html[data-theme="night"] .mail-list span{color:#a99578}
@media(prefers-reduced-motion:reduce){.mail-list a{transition:none}.mail-list a:hover{transform:none}}

/* ══ 15 · SHADE THE PHOTOS IN ═════════════════════════════════════════
   The mockup does not put a hard frame around a photo. It shades each one
   into the paper: soft rounded corners, a warm shadow pooling underneath,
   a feathered edge so the photo dissolves into the cream instead of
   stopping at a line. The mat-and-hairline treatment from section 13 was
   the opposite of that, so it comes off here.
   ═══════════════════════════════════════════════════════════════════════ */

.full-gallery img,
.photo-grid img{
  border:0;
  outline:0;
  border-radius:12px;
  /* Feather all four edges by a couple of percent. Just enough that there
     is no hard line where the photo meets the paper. */
  -webkit-mask-image:radial-gradient(115% 115% at 50% 50%, #000 78%, transparent 100%);
  mask-image:radial-gradient(115% 115% at 50% 50%, #000 78%, transparent 100%);
  /* Warm shadow that pools under the photo rather than ringing it. */
  box-shadow:
    0 2px 3px -2px #2a180840,
    0 10px 20px -12px #2a18089e,
    0 22px 40px -26px #2a1808b8;
}

/* The vignette that gave them weight moves inside the image itself, since
   an inset shadow would now sit on top of the feathered edge. */
.full-gallery figure,
.photo-grid span,
.trio span{position:relative}

.split img,
.menu-intro-photo img,
.neighborhood-photo,
.dish-photo,
.familia-photo,
.catering-tray-photo,
.story-preview > img{
  border-radius:12px;
  box-shadow:
    0 3px 5px -3px #2a18084d,
    0 14px 28px -16px #2a1808a6,
    0 30px 54px -34px #2a1808b8;
}

/* Menu tiles keep a ring, but soften it: cream halo, no hard gold line. */
.category-tiles img{
  box-shadow:
    0 0 0 3px #fffaf0,
    0 4px 10px -4px #2a180866,
    0 12px 22px -14px #2a1808a6;
}

.full-gallery img:hover,
.photo-grid img:hover{
  box-shadow:
    0 3px 5px -2px #2a180859,
    0 16px 30px -14px #2a1808b3,
    0 34px 56px -30px #2a1808c4;
}

html[data-theme="night"] .full-gallery img,
html[data-theme="night"] .photo-grid img{
  border:0;outline:0;
  box-shadow:0 2px 4px -2px #00000080, 0 14px 28px -14px #000000b8, 0 28px 48px -30px #000000cc;
}
html[data-theme="night"] .category-tiles img{
  box-shadow:0 0 0 3px #221a10, 0 4px 10px -4px #000000a6, 0 12px 22px -14px #000000c4;
}

/* "Chimichangas" is the longest tile label and it ran 5px past its column
   on a 390px phone. Let the label scale with the space it actually has
   rather than picking a fixed size that only the shortest words fit. */
.category-tiles span{
  font-size:clamp(10px, 3vw, 13px);
  letter-spacing:-.01em;
  hyphens:auto;
}
/* The tiles get NARROWER at tablet than at desktop, because the panel
   is narrower there, so a fixed size at 701px was the wrong move. Only
   raise the ceiling once there is genuinely room for it. */
@media(min-width:1100px){.category-tiles span{font-size:15px}}

/* ══ 16 · THE FAQ ═════════════════════════════════════════════════════
   Native <details>, so it works with no JavaScript, is keyboard operable
   for free, and is searchable by the browser's own find-in-page.
   ═══════════════════════════════════════════════════════════════════════ */

.faq-wrap{max-width:900px;margin-inline:auto}
.faq-group{margin-bottom:34px}
.faq-group > h2{
  font:800 26px var(--head);color:var(--red);text-transform:uppercase;
  letter-spacing:.02em;margin:0 0 14px;padding-bottom:9px;
  border-bottom:3px double var(--gold);
}

.faq{
  border:1px solid var(--border);border-radius:9px;margin-bottom:10px;
  background:linear-gradient(160deg,#fffaf0,#f7ecd4);
  box-shadow:0 3px 12px -9px #2a180877;overflow:hidden;
}
.faq > summary{
  list-style:none;cursor:pointer;padding:15px 48px 15px 18px;position:relative;
  font:700 17px/1.35 var(--body);color:var(--ink);
}
.faq > summary::-webkit-details-marker{display:none}
.faq > summary::after{
  content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font:700 24px/1 var(--head);color:var(--gold);transition:transform .25s ease,color .25s ease;
}
.faq[open] > summary::after{content:"\2212";color:var(--red)}
.faq > summary:hover{color:var(--red)}
.faq > summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.faq[open] > summary{border-bottom:1px dotted var(--border)}
.faq p{margin:0;padding:14px 18px 16px;font-size:15px;line-height:1.7;color:var(--muted)}
.faq p strong{color:var(--ink)}
.faq p a{color:var(--red);font-weight:700}

@media(max-width:620px){
  .faq > summary{font-size:16px;padding:13px 42px 13px 14px}
  .faq p{padding:12px 14px 14px;font-size:14.5px}
  .faq-group > h2{font-size:22px}
}
@media(prefers-reduced-motion:reduce){.faq > summary::after{transition:none}}

html[data-theme="night"] .faq{background:linear-gradient(160deg,#221a10,#191309);border-color:#4b3a20}
html[data-theme="night"] .faq-group > h2{color:#ffa88f}
html[data-theme="night"] .faq > summary{color:var(--ink)}
html[data-theme="night"] .faq > summary:hover{color:#ffa88f}
html[data-theme="night"] .faq p{color:#a99578}
html[data-theme="night"] .faq p a{color:#ffa88f}

/* ══ 17 · THE PRICE STAMP ═════════════════════════════════════════════
   Stale menus on aggregator sites are actively costing this business
   money: people research at 2023 prices and arrive to 2026 ones, and the
   reviews say so. This says, on the page, which menu is the real one.
   ═══════════════════════════════════════════════════════════════════════ */

.price-stamp{
  display:flex;align-items:flex-start;gap:13px;max-width:860px;
  margin:22px auto 0;padding:15px 18px;
  background:color-mix(in srgb, var(--green) 7%, transparent);
  border:1px solid color-mix(in srgb, var(--green) 24%, transparent);
  border-left:4px solid var(--green);border-radius:4px 9px 9px 4px;
}
.price-stamp > span{flex:none;font-size:21px;line-height:1.2;color:var(--green)}
.price-stamp p{margin:0;font-size:14px;line-height:1.65;color:var(--muted)}
.price-stamp b{color:var(--ink)}
html[data-theme="night"] .price-stamp{background:#1c2a1e;border-color:#3c5c42;border-left-color:#7fc08d}
html[data-theme="night"] .price-stamp > span{color:#9ed6a9}
html[data-theme="night"] .price-stamp p{color:#a99578}