/* El Taquito type: Oswald (display; tall and condensed like the EL TAQUITO
wordmark) and Source Sans 3 (body). Both SIL OFL, self-hosted, variable
weight, latin subset (covers ñ, á, é, í, ó, ú, ¡, ¿). */
@font-face{
font-family:'Oswald';
src:url('../fonts/oswald-latin-wght.woff2') format('woff2');
font-weight:200 700; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Source Sans 3';
src:url('../fonts/source-sans-3-latin-wght.woff2') format('woff2');
font-weight:200 900; font-style:normal; font-display:swap;
}
/* El Taquito palette, from the old site's theme (gold #edc36d, bronze
#8d6a35, cream, black). The token NAMES are the platform's; the values are
El Taquito's: "maroon" is the brand bronze, "coral" a warm caramel accent.
Bronze is darkened a touch from #8d6a35 to #86652f so it passes WCAG 1.4.3
both as text on cream (4.8:1) and as a background under cream text. */
:root{
--night:#15110e;
--night-2:#211b16;
--night-3:#30271f;
--maroon:#86652f;
--maroon-deep:#6b5026;
--gold:#edc36d;
--gold-deep:#d9a94f;
--coral:#c0803a;
--coral-deep:#a66b2c;
--paper:#f8f2e8;
--ink:#1c1611;
--muted-dark:#cfc3b3;
--muted-light:#6b6055;
/* Amber for TEXT on light backgrounds. --gold/--gold-deep are display colours
and only clear 2.5:1 on white, well under the 4.5:1 that WCAG 1.4.3 asks of
body text. This is the same hue family darkened until it passes (6.3:1 on
white, 5.7:1 on --paper). Never use --gold for text on a light surface. */
--amber-text:#7a5a28;
--font-display:'Oswald', 'Arial Narrow', system-ui, sans-serif;
--font-body:'Source Sans 3', system-ui, sans-serif;
/* Vertical rhythm. Every .section used to carry the same oversized padding on
both edges, so each boundary cost ~208px of dead air and the page read as a
stack of disconnected blocks rather than a flow. One scale, three steps. */
--sp-section:clamp(3rem,5.25vw,4.75rem);
--sp-flow:clamp(1.75rem,3vw,2.75rem);
--sp-tight:clamp(1.1rem,2vw,1.6rem);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;background:var(--paper);color:var(--ink);
/* WCAG 1.4.10 Reflow: at a 320px viewport (or 400% zoom) an unbreakable run of
characters — an email address, a long URL in the legal pages — pushes the
layout wider than the screen and forces horizontal scrolling, which is the
exact failure that criterion describes. Nothing in the sheet guarded against
it. break-word only breaks when there is no other option, so ordinary prose
is untouched. */
overflow-wrap:break-word;
font-family:var(--font-body);font-size:16px;line-height:1.6;
-webkit-font-smoothing:antialiased;
}
/* height:auto matters now that toggles it (main.js).
Collapsed, the links get visibility:hidden — not just max-height:0 — so they
leave the tab order and the screen-reader order; before, keyboard users
tabbed through six invisible links. Without JS (no .js class) the button
stays hidden and the nav simply shows, so nobody is ever locked out. */
.nav-toggle-btn{display:none;}
.cta-full{display:inline;}
@media (max-width:720px){
/* The fixed mobile-cta bar already surfaces Order/Menu (or the catering cart) at this width — don't duplicate it in the header. */
.header-actions{display:none;}
}
@media (max-width:880px){
.js .nav-toggle-btn{
display:inline-flex;align-items:center;justify-content:center;position:relative;
width:44px;height:44px;padding:0;border:0;border-radius:8px;background:none;color:var(--paper);cursor:pointer;
}
nav.primary{
position:absolute;top:100%;left:0;right:0;background:var(--night);
flex-direction:column;align-items:flex-start;gap:0;border-bottom:1px solid var(--night-3);
}
.js nav.primary{max-height:0;overflow:hidden;visibility:hidden;transition:max-height .25s ease, visibility 0s linear .25s;}
.js header.nav-open nav.primary{max-height:420px;visibility:visible;transition:max-height .25s ease;}
html:not(.js) nav.primary{position:static;flex-direction:row;flex-wrap:wrap;}
nav.primary a{width:100%;padding:.9rem clamp(1.25rem,4vw,3rem);border-bottom:1px solid var(--night-3);}
html:not(.js) nav.primary a{width:auto;padding:.5rem .6rem;border:0;}
}
/* Hamburger <-> close (X) icon. */
.nav-toggle-icon, .nav-toggle-icon::before, .nav-toggle-icon::after{
content:"";position:absolute;left:11px;width:22px;height:2px;background:currentColor;border-radius:2px;
transition:transform .2s ease, opacity .2s ease, top .2s ease;
}
.nav-toggle-icon{top:21px;}
.nav-toggle-icon::before{left:0;top:-7px;}
.nav-toggle-icon::after{left:0;top:7px;}
.nav-toggle-btn[aria-expanded="true"] .nav-toggle-icon{background:transparent;}
.nav-toggle-btn[aria-expanded="true"] .nav-toggle-icon::before{top:0;transform:rotate(45deg);}
.nav-toggle-btn[aria-expanded="true"] .nav-toggle-icon::after{top:0;transform:rotate(-45deg);}
/* ---------- Location switcher (header) ----------
A so it opens by keyboard and without JS. It sits right after the
brand and takes the free space (margin-right:auto), so nav and actions keep
their place on the right. */
.loc-menu{position:relative;margin-right:auto;}
.loc-current{
list-style:none;display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
min-height:44px;padding:.35rem .8rem;border-radius:999px;
border:1px solid rgba(237,195,109,.45);color:var(--gold);
font-family:var(--font-body);font-weight:700;font-size:.85rem;white-space:nowrap;
}
.loc-current::-webkit-details-marker{display:none;}
.loc-current:hover{background:rgba(237,195,109,.1);}
.loc-current:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.loc-menu[open] .loc-caret{transform:rotate(180deg);}
.loc-pop{
position:absolute;left:0;top:calc(100% + .5rem);z-index:60;width:min(320px, calc(100vw - 2rem));
background:var(--paper);color:var(--ink);border-radius:16px;padding:.9rem;
box-shadow:0 18px 40px -12px rgba(0,0,0,.55);display:grid;gap:.45rem;
}
.loc-pop-title{margin:0 0 .2rem;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:.95rem;}
.loc-opt{display:grid;gap:.1rem;padding:.65rem .75rem;border-radius:12px;border:1px solid rgba(28,22,17,.12);text-decoration:none;color:var(--ink);}
.loc-opt:hover{border-color:var(--maroon);background:#fff;}
.loc-opt.is-current{border-color:var(--maroon);background:#fff;}
.loc-opt strong{font-size:.98rem;}
.loc-opt span{font-size:.82rem;color:var(--muted-light);}
.loc-opt .loc-tag{color:var(--amber-text);font-weight:700;}
.loc-check{color:var(--maroon);}
.loc-gps{
display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:44px;
border:0;border-radius:999px;background:var(--night);color:var(--gold);
font:700 .85rem var(--font-body);cursor:pointer;
}
.loc-gps[disabled]{opacity:.7;cursor:progress;}
.loc-gps-status{margin:0;font-size:.8rem;color:var(--muted-light);}
.loc-gps-status:empty{display:none;}
.loc-all{font-size:.85rem;font-weight:700;color:var(--maroon);text-align:center;padding:.3rem;}
/* Phones: the switcher sits mid-header, so a popover anchored to it would run
off the right edge. Pin it to the viewport instead, under the header. */
@media (max-width:560px){
.loc-pop{position:fixed;left:1rem;right:1rem;top:4.6rem;width:auto;max-height:calc(100vh - 6rem);overflow-y:auto;}
}
@media (max-width:420px){
.loc-current{padding:.35rem .6rem;font-size:.8rem;}
}
/* ---------- Hero: full-bleed video ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--night);color:var(--paper);}
.hero-bg-video, .hero-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.hero-scrim{
position:absolute;inset:0;z-index:1;
background:
linear-gradient(180deg, rgba(21,17,14,.15) 0%, rgba(21,17,14,.35) 45%, rgba(21,17,14,.92) 100%),
linear-gradient(100deg, rgba(21,17,14,.85) 0%, rgba(21,17,14,.25) 55%, rgba(21,17,14,.1) 100%);
}
.hero-content{position:relative;z-index:2;padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3rem,7vw,5rem);width:100%;}
.hero-content .inner{max-width:640px;}
.hero .eyebrow{color:var(--gold);margin-bottom:1rem;display:block;}
.hero h1{font-size:clamp(2.5rem,6vw,4.5rem);}
.hero h1 em{font-style:normal;color:var(--coral);}
.hero p.lede{font-size:1.12rem;max-width:38ch;color:var(--muted-dark);margin:1.2rem 0 2rem;}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;margin-bottom:1.6rem;}
.rating-chip{
display:inline-flex;align-items:center;gap:.5rem;background:rgba(33,22,19,.7);border:1px solid rgba(248,242,232,.18);
border-radius:999px;padding:.55rem 1rem;font-size:.85rem;font-weight:600;color:var(--paper);backdrop-filter:blur(6px);
}
.rating-chip b{color:var(--gold);}
.hero-tags{display:flex;flex-wrap:wrap;gap:.6rem;}
.hero-tags span{
font-family:var(--font-body);font-weight:700;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;
background:rgba(248,242,232,.08);border:1px solid rgba(248,242,232,.2);color:var(--paper);
padding:.4rem .8rem;border-radius:999px;
}
.scroll-cue{position:absolute;z-index:2;right:clamp(1.25rem,4vw,3rem);bottom:1.6rem;color:var(--muted-dark);font-size:.7rem;
display:flex;flex-direction:column;align-items:center;gap:.4rem;letter-spacing:.1em;text-transform:uppercase;}
.scroll-cue .line{width:1px;height:34px;background:linear-gradient(var(--gold),transparent);}
@media (max-width:720px){.scroll-cue{display:none;}}
/* ---------- Info strip ---------- */
.info-strip{background:var(--night-2);color:var(--paper);border-bottom:1px solid var(--night-3);}
.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;padding-block:1rem;}
.info-item{display:flex;align-items:center;gap:.6rem;font-size:.86rem;font-weight:600;}
.info-item svg{flex:none;width:18px;height:18px;color:var(--coral);}
/* text-decoration, not border-bottom: as a flex child the is a block, so a
border ran the full column width instead of hugging the text — most visible
on the address, which wraps to two lines. */
.info-item a{
text-decoration:underline;text-decoration-color:rgba(248,242,232,.35);
text-decoration-thickness:1px;text-underline-offset:3px;
transition:text-decoration-color .15s ease;
}
.info-item a:hover{text-decoration-color:var(--coral);}
@media (max-width:900px){.info-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.info-grid{grid-template-columns:1fr;}}
/* ---------- Chip marquee ---------- */
.marquee-band{background:var(--night);overflow:hidden;padding:1rem 0;}
.marquee-track{display:flex;gap:.9rem;width:max-content;animation:scroll 30s linear infinite;}
.chip{font-family:var(--font-body);font-weight:700;font-size:.82rem;letter-spacing:.02em;padding:.6rem 1.2rem;border-radius:999px;white-space:nowrap;}
.chip.c-gold{background:var(--gold);color:var(--ink);}
.chip.c-coral{background:var(--coral);color:var(--ink);}
.chip.c-maroon{background:var(--maroon);color:var(--paper);}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;}}
/* ---------- Section shell ---------- */
.section{padding:var(--sp-section) 0;}
/* Events and Reviews are both --paper, so back-to-back they have no colour
change to justify a full double gap — it read as a hole rather than a break.
Collapse the seam and let the two cream sections read as one movement. */
.events-section + .reviews-section{padding-top:var(--sp-flow);}
/* ---------- Weekly specials (premium promo section) ---------- */
.specials-section{background:var(--night);color:var(--paper);position:relative;overflow:hidden;}
.specials-section::before{
content:"";position:absolute;inset:-20% -10% auto -10%;height:70%;z-index:0;
background:radial-gradient(60% 100% at 30% 0%, rgba(237,195,109,.14), transparent 70%),
radial-gradient(50% 90% at 85% 10%, rgba(192,128,58,.12), transparent 70%);
}
.specials-section .wrap{position:relative;z-index:1;}
.specials-section .section-head .label{color:var(--gold);}
.specials-section .section-head h2{color:var(--paper);}
.specials-section .section-head p{color:var(--muted-dark);}
/* Same centring treatment as .menu-grid — 5 specials in a 3-wide layout left
a stranded pair hanging off the left edge on the second row. */
.specials-grid{
--cols:3; --grid-gap:1.4rem;
display:flex;flex-wrap:wrap;justify-content:center;gap:var(--grid-gap);
}
.specials-grid > *{
--track:calc((100% - (var(--cols) - 1) * var(--grid-gap)) / var(--cols));
flex:0 1 var(--track);
max-width:var(--track);
}
@media (max-width:900px){.specials-grid{--cols:2;}}
@media (max-width:560px){.specials-grid{--cols:1;}}
.special-card{
background:var(--night-2);border:1px solid rgba(248,242,232,.08);border-radius:22px;overflow:hidden;
display:flex;flex-direction:column;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.special-card:hover{transform:translateY(-6px);border-color:rgba(248,242,232,.18);}
.special-card.sp-gold:hover{box-shadow:0 22px 44px -18px rgba(237,195,109,.4);}
.special-card.sp-coral:hover{box-shadow:0 22px 44px -18px rgba(192,128,58,.4);}
.special-card.sp-maroon:hover{box-shadow:0 22px 44px -18px rgba(134,101,47,.45);}
.special-card figure{margin:0;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--night-3);}
.special-card figure img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.special-card:hover figure img{transform:scale(1.06);}
.special-day-badge{
position:absolute;top:.7rem;left:.7rem;font-family:var(--font-body);font-weight:700;font-size:.68rem;
text-transform:uppercase;letter-spacing:.05em;padding:.35rem .75rem;border-radius:999px;color:var(--ink);
}
.special-card.sp-gold .special-day-badge{background:var(--gold);}
.special-card.sp-coral .special-day-badge{background:var(--coral);}
.special-card.sp-maroon .special-day-badge{background:var(--maroon);color:var(--paper);}
.special-price-pill{
position:absolute;top:.7rem;right:.7rem;background:rgba(21,17,14,.78);color:var(--paper);
font-weight:700;font-size:.85rem;padding:.35rem .8rem;border-radius:999px;backdrop-filter:blur(4px);
}
.special-body{padding:1.2rem 1.3rem 1.4rem;flex:1;display:flex;flex-direction:column;}
.special-body h3{font-size:1.15rem;margin-bottom:.4rem;}
.special-body p{margin:0;font-size:.9rem;color:var(--muted-dark);flex:1;}
.special-card-noimg{width:100%;height:100%;background:linear-gradient(135deg,var(--night-3),var(--night-2));}
/* ---------- Unified premium photo grading ---------- */
.dish-card img, .story-art img, .catering-art img, .ambiance-art img,
.photo-marquee-track img, .hero-bg-video, .hero-bg-img, .hero-art img{
filter:saturate(1.08) contrast(1.05) brightness(1.02);
}
.section-head{max-width:640px;margin:0 auto 2.4rem;text-align:center;}
.section-head .label{color:var(--maroon);}
.section-head h2{font-size:clamp(1.9rem,3.8vw,2.7rem);margin-top:.5rem;}
.section-head p{font-size:1.02rem;color:var(--muted-light);margin-top:.7rem;}
/* ---------- Menu highlights ---------- */
.menu-section{background:var(--paper);}
/* Flex rather than grid so a partial last row (3 breakfast favorites in a
4-wide layout, or the single orphan card at the end of the menu's featured
set) centres instead of hugging the left edge. Cards keep an exact
fixed-track width, so full rows line up identically to the old grid. */
.menu-grid{
--cols:4; --grid-gap:1.3rem;
display:flex;flex-wrap:wrap;justify-content:center;gap:var(--grid-gap);
}
.menu-grid > *{
--track:calc((100% - (var(--cols) - 1) * var(--grid-gap)) / var(--cols));
flex:0 1 var(--track);
max-width:var(--track);
}
@media (max-width:1000px){.menu-grid{--cols:2;}}
@media (max-width:560px){.menu-grid{--cols:1;}}
.dish-card{background:var(--night-2);border-radius:20px;overflow:hidden;color:var(--paper);transition:transform .2s ease, box-shadow .2s ease;}
.dish-card:hover{transform:translateY(-6px);box-shadow:0 22px 40px -18px rgba(192,128,58,.35);}
.dish-card figure{margin:0;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--night-3);}
.dish-card img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.dish-card:hover img{transform:scale(1.06);}
.dish-price-pill{position:absolute;bottom:.6rem;left:.6rem;background:var(--gold);color:var(--ink);font-weight:700;font-size:.82rem;padding:.3rem .75rem;border-radius:999px;}
.dish-body{padding:1rem 1.1rem 1.3rem;}
.dish-body h3{font-size:1.05rem;margin-bottom:.35rem;}
.dish-body p{margin:0;font-size:.85rem;color:var(--muted-dark);}
/* No bottom margin — the section's own padding already closes it out. The old
3rem stacked on top of that and left the trailing CTA marooned. */
.menu-cta{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;margin:var(--sp-flow) 0 0;}
/* ---------- Gallery ---------- */
.gallery-section{background:var(--night);color:var(--paper);}
.gallery-section .section-head .label{color:var(--gold);}
.gallery-section .section-head h2{color:var(--paper);}
.gallery-section .section-head p{color:var(--muted-dark);}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:130px;gap:.9rem;}
.gallery-item{position:relative;border-radius:16px;overflow:hidden;background:var(--night-3);}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.gallery-item:hover img{transform:scale(1.07);}
.gallery-item .cap{
position:absolute;left:.7rem;bottom:.6rem;background:rgba(21,17,14,.72);color:var(--paper);
font-size:.72rem;font-weight:700;padding:.3rem .65rem;border-radius:999px;letter-spacing:.02em;
backdrop-filter:blur(4px);
}
.g-hero{grid-column:span 2;grid-row:span 2;}
.g-tall{grid-row:span 2;}
@media (max-width:860px){
.gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;}
.g-hero{grid-column:span 2;grid-row:span 2;}
.g-tall{grid-row:span 1;}
}
/* ---------- Story ---------- */
.story{background:var(--paper);}
.story-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,4rem);align-items:center;}
@media (max-width:900px){.story-grid{grid-template-columns:1fr;}}
.story .label{color:var(--maroon);}
.story h2{font-size:clamp(1.9rem,3.8vw,2.7rem);margin-top:.6rem;color:var(--ink);}
.story-quote{position:relative;padding-left:1.4rem;border-left:4px solid var(--coral);margin-top:1.4rem;}
.story-quote p{font-family:var(--font-display);font-weight:600;font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.35;margin:0;text-wrap:balance;color:var(--ink);}
.story-quote span{display:block;margin-top:.9rem;font-family:var(--font-body);font-weight:700;font-size:.82rem;color:var(--muted-light);text-transform:uppercase;letter-spacing:.06em;}
.story p.body-copy{color:var(--muted-light);font-size:1.02rem;max-width:50ch;margin-top:1.1rem;}
.story-art{border-radius:26px;overflow:hidden;transform:rotate(-1.5deg);box-shadow:0 26px 50px -20px rgba(28,22,17,.35);background:var(--night-3);}
.story-art img{width:100%;height:clamp(280px,30vw,420px);object-fit:cover;}
/* ---------- Ambiance (cinematic full-bleed band) ---------- */
.ambiance{position:relative;min-height:56vh;display:flex;align-items:center;color:var(--paper);overflow:hidden;}
.ambiance-bg{position:absolute;inset:0;z-index:0;}
.ambiance-bg img{width:100%;height:100%;object-fit:cover;}
.ambiance-scrim{
position:absolute;inset:0;z-index:1;
background:linear-gradient(100deg, rgba(21,17,14,.88) 0%, rgba(21,17,14,.5) 48%, rgba(21,17,14,.25) 100%);
}
.ambiance-content{position:relative;z-index:2;max-width:560px;}
.ambiance .label{color:var(--gold);}
.ambiance h2{color:var(--paper);font-size:clamp(1.9rem,3.8vw,2.7rem);margin-top:.6rem;}
.ambiance p{color:var(--muted-dark);font-size:1.05rem;max-width:44ch;margin:1rem 0 1.6rem;}
/* ---------- Catering ---------- */
.catering{background:linear-gradient(120deg, var(--maroon-deep), var(--maroon) 55%, var(--gold-deep));color:var(--paper);}
.catering-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,3.5rem);align-items:center;}
@media (max-width:900px){.catering-grid{grid-template-columns:1fr;}}
.catering .label{color:var(--night);background:var(--coral);display:inline-block;padding:.3rem .8rem;border-radius:999px;}
.catering h2{font-size:clamp(1.9rem,3.8vw,2.7rem);margin-top:1rem;color:var(--paper);}
.catering p.desc{font-size:1.05rem;max-width:46ch;margin:1rem 0 1.6rem;color:rgba(248,242,232,.9);}
.price-chip-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.8rem;}
.price-chip-row .chip{background:rgba(21,17,14,.35);color:var(--paper);border:1px solid rgba(248,242,232,.25);}
.catering-art{border-radius:26px;overflow:hidden;transform:rotate(2deg);box-shadow:0 26px 50px -20px rgba(0,0,0,.55);background:var(--night-3);}
.catering-art img{width:100%;height:clamp(240px,26vw,340px);object-fit:cover;}
/* ---------- Events ---------- */
.events-section{background:var(--paper);}
.events-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}
@media (max-width:860px){.events-grid{grid-template-columns:1fr;}}
.event-card{background:#fff;border:1px solid rgba(28,22,17,.08);border-radius:20px;padding:1.3rem;display:flex;gap:1.1rem;align-items:flex-start;box-shadow:0 14px 30px -22px rgba(28,22,17,.25);
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
/* Event and review cards were the only cards on the site with no hover state,
which made them feel inert next to the dish/special cards. */
.event-card:hover{transform:translateY(-4px);border-color:rgba(28,22,17,.16);box-shadow:0 22px 38px -24px rgba(28,22,17,.4);}
.event-date{flex:none;width:62px;text-align:center;background:var(--night);color:var(--gold);border-radius:14px;padding:.5rem .2rem;}
.event-date .d{display:block;font-family:var(--font-display);font-weight:800;font-size:1.3rem;line-height:1;}
.event-date .m{display:block;font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;margin-top:.2rem;color:var(--muted-dark);}
.event-card h3{font-size:1.02rem;font-weight:700;margin-bottom:.3rem;font-family:var(--font-body);}
.event-card p{margin:0;font-size:.88rem;color:var(--muted-light);}
/* ---------- Reviews ---------- */
.reviews-section{background:var(--paper);}
.reviews-attribution{text-align:center;font-size:.76rem;color:var(--muted-light);margin-top:1rem;}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}
@media (max-width:860px){.reviews-grid{grid-template-columns:1fr;}}
.review-card{background:#fff;border-radius:22px;padding:1.6rem;box-shadow:0 14px 30px -22px rgba(28,22,17,.25);
border:1px solid rgba(28,22,17,.06);
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.review-card:hover{transform:translateY(-4px);border-color:rgba(28,22,17,.14);box-shadow:0 22px 38px -24px rgba(28,22,17,.4);}
.review-top{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem;}
.avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-display);color:var(--ink);}
.avatar.a-gold{background:var(--gold);}
.avatar.a-coral{background:var(--coral);}
.avatar.a-maroon{background:var(--maroon);color:var(--paper);}
.review-who{font-size:.85rem;font-weight:700;}
.review-who span{display:block;font-weight:500;color:var(--muted-light);font-size:.78rem;}
.review-who a{color:inherit;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .2s;}
.review-who a:hover,.review-who a:focus-visible{text-decoration-color:currentColor;}
.avatar-photo{object-fit:cover;flex-shrink:0;}
.stars{color:var(--amber-text);letter-spacing:.12em;font-size:.85rem;display:block;margin-bottom:.6rem;}
.review-card p.quote{margin:0;font-size:.96rem;color:var(--ink);}
/* ---------- Gift card CTA (homepage closer) ---------- */
.giftcard-cta{background:linear-gradient(120deg, var(--gold-deep), var(--gold) 60%, var(--coral));color:var(--ink);text-align:center;}
.giftcard-cta .label{color:var(--maroon-deep);}
.giftcard-cta h2{font-size:clamp(2.1rem,4.4vw,3.2rem);margin-top:.6rem;}
.giftcard-cta p{max-width:46ch;margin:1rem auto 1.9rem;font-size:1.05rem;color:rgba(28,22,17,.75);}
/* ---------- Footer ---------- */
footer{position:relative;overflow:hidden;background:var(--night);color:var(--muted-dark);padding:4rem 0 6rem;}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--coral),var(--maroon));}
footer::after{
content:"";position:absolute;inset:-10% -10% auto -10%;height:60%;z-index:0;pointer-events:none;
background:radial-gradient(55% 100% at 15% 0%, rgba(237,195,109,.09), transparent 70%),
radial-gradient(45% 90% at 90% 10%, rgba(192,128,58,.07), transparent 70%);
}
footer .wrap{position:relative;z-index:1;}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:1.4rem;padding-bottom:2.6rem;}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.footer-card{
background:var(--night-2);border:1px solid rgba(248,242,232,.08);border-radius:22px;
padding:1.7rem 1.8rem;box-shadow:0 18px 34px -26px rgba(0,0,0,.6);
}
.footer-brand-card{display:flex;flex-direction:column;justify-content:space-between;}
.footer-card-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem .9rem;margin-bottom:1.2rem;}
.footer-card-head h4{margin:0;}
footer .footer-heading{font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;color:var(--gold);margin:0 0 1.2rem;position:relative;padding-bottom:.6rem;}
footer h4::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;background:var(--coral);}
.footer-status-chip{
font-family:var(--font-body);font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.03em;
padding:.35rem .7rem;border-radius:999px;white-space:nowrap;flex:none;
}
.footer-status-chip.is-open{background:rgba(139,195,74,.15);color:#a3d977;}
.footer-status-chip.is-closed{background:rgba(192,128,58,.15);color:var(--coral);}
.brand-blurb{display:flex;gap:1rem;align-items:flex-start;}
.brand-blurb > img{width:56px;height:56px;border-radius:50%;flex:none;transform:rotate(-6deg);border:2px solid var(--gold);box-shadow:0 8px 18px -6px rgba(0,0,0,.5);}
.footer-brand-name{display:block;font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--paper);margin-bottom:.35rem;}
.brand-blurb p{font-size:.88rem;margin:0;max-width:30ch;color:var(--muted-dark);}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem;}
footer a{text-decoration:none;font-size:.9rem;transition:color .15s ease;}
footer a:hover{color:var(--coral);}
.footer-visit-item{display:flex;align-items:center;gap:.55rem;}
.footer-visit-item svg{flex:none;width:15px;height:15px;color:var(--coral);}
.footer-loc{display:grid;gap:.35rem;margin-bottom:.4rem;}
.footer-loc .footer-visit-item{align-items:flex-start;}
.footer-loc .footer-visit-item svg{margin-top:.2rem;}
.footer-loc-phone{padding-left:0;}
.footer-directions-btn{margin-top:1.3rem;padding:.55rem 1.1rem;font-size:.72rem;border-color:rgba(248,242,232,.3);}
.hours-row{display:flex;justify-content:space-between;font-size:.86rem;gap:1rem;padding:.2rem .5rem;margin:0 -.5rem;border-radius:8px;}
.hours-row.today{color:var(--gold);font-weight:700;background:rgba(237,195,109,.08);}
.social-row{display:flex;gap:.7rem;margin-top:1.3rem;}
.social-row a{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--night-3);border:1px solid rgba(248,242,232,.1);transition:background .15s ease, transform .15s ease;}
.social-row a:hover{background:var(--coral);color:var(--ink);transform:translateY(-2px);}
.bottom-bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;padding-top:1.6rem;border-top:1px solid var(--night-3);font-size:.78rem;}
.bottom-bar-links{display:flex;gap:1.2rem;flex-wrap:wrap;}
.bottom-bar-links a{opacity:.85;}
.bottom-bar-links a:hover{opacity:1;color:var(--coral);}
.powered-by{text-align:center;padding-top:1.1rem;margin-top:1.1rem;font-size:.74rem;}
.powered-by a{opacity:.65;text-decoration:none;letter-spacing:.02em;transition:opacity .15s ease;}
.powered-by a:hover{opacity:1;color:var(--gold);}
.powered-by strong{font-weight:800;letter-spacing:.03em;}
/* ---------- Sticky mobile CTA ---------- */
.mobile-cta{display:none;}
@media (max-width:720px){
.mobile-cta{
display:flex;align-items:center;gap:.7rem;position:fixed;bottom:0;left:0;right:0;z-index:60;
background:rgba(21,17,14,.95);backdrop-filter:blur(10px);border-top:1px solid var(--night-3);
padding:.8rem clamp(1rem,4vw,2rem) calc(.8rem + env(safe-area-inset-bottom));
}
.mobile-cta .pill{flex:1;justify-content:center;white-space:nowrap;}
/* Every page's content must clear the fixed bar height (~76px) + safe area, or the bar covers real content/buttons. */
footer{padding-bottom:calc(76px + env(safe-area-inset-bottom) + 1.5rem);}
}
@media (max-width:380px){.mobile-cta .pill{padding-inline:.7rem;font-size:.74rem;letter-spacing:.04em;}}
.mobile-cta-cart{justify-content:space-between;}
.cart-summary{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0;text-decoration:none;color:var(--paper);}
.cart-summary-count{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700;color:var(--muted-dark);}
.cart-summary-total{font-family:var(--font-display);font-weight:800;font-size:1.25rem;color:var(--gold);line-height:1.15;}
.mobile-cta-cart .pill{flex:none;}
#your-order{scroll-margin-top:96px;}
.skip-link{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--ink);padding:.6rem 1rem;z-index:100;}
.skip-link:focus{left:1rem;top:1rem;}
/* Baseline focus ring. Only .pill, form fields and a few cards defined one, so
everything else fell back to the UA default — which is easy to lose against
the near-black header and is the first thing a future CSS reset would kill.
:focus-visible keeps it off mouse clicks. */
a:focus-visible, button:focus-visible, label:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
outline:3px solid var(--maroon);outline-offset:2px;border-radius:2px;
}
/* WCAG 1.4.11 wants a focus ring at 3:1 against what it sits on. Gold is 1.5:1
on cream, so the default ring is bronze (4.8:1 on cream, 5.4:1 on white);
on the dark surfaces below gold reads far better (10-11:1) and takes over.
The location popover is a light card inside the dark header, so it goes
back to bronze. */
:is(header, footer, .mobile-cta, .hero, .page-header, .menu-page-header, .dish-card,
.catering, .drinks-teaser, .order-teaser, .about-loc, .table-hero, .today-bar)
:is(a, button, input, select, textarea, summary, label, [tabindex]):focus-visible{outline-color:var(--gold);}
/* Same specificity as the dark-surface rule above, and later, so it wins. */
.catering :is(a, button, [tabindex]):focus-visible{outline-color:var(--paper);} /* bronze gradient: cream 4.8-6.7:1 */
.loc-pop :is(a, button, [tabindex]):focus-visible{outline-color:var(--maroon);}
/* ---------- Menu page (tabbed) ---------- */
.menu-page-header{
position:relative;overflow:hidden;color:var(--paper);
padding:clamp(3.5rem,9vw,6rem) 0 clamp(2rem,4vw,2.8rem);
}
.menu-page-header .menu-header-bg{position:absolute;inset:0;z-index:0;}
.menu-page-header .menu-header-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(1.08) contrast(1.05) brightness(.9);}
.menu-page-header .menu-header-scrim{
position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg, rgba(21,17,14,.55) 0%, rgba(21,17,14,.82) 60%, rgba(21,17,14,.96) 100%);
}
.menu-page-header .wrap{position:relative;z-index:2;}
.menu-page-header h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-top:.5rem;}
.menu-page-header p.lede{font-size:1.08rem;max-width:48ch;color:var(--muted-dark);margin:1rem 0 0;}
.menu-tabs{
position:sticky;top:86px;z-index:40;background:var(--paper);border-bottom:1px solid rgba(28,22,17,.12);
display:flex;gap:.5rem;overflow-x:auto;padding:.9rem clamp(1.25rem,4vw,3rem);scrollbar-width:thin;
justify-content:center;justify-content:safe center;
}
.menu-tabs a{
flex:none;font-family:var(--font-body);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;
padding:.5rem 1rem;border-radius:999px;text-decoration:none;color:var(--ink);background:var(--paper);border:1px solid rgba(28,22,17,.15);
}
.menu-tabs a:hover{border-color:var(--coral);color:var(--coral-deep);}
/* Breakfast lives on its own page, so its tab leaves /menu rather than
scrolling to a section — dashed border marks it as an outbound link. */
.menu-tabs a.tab-offsite{border-style:dashed;border-color:var(--gold);color:var(--maroon);}
.menu-tabs a.tab-offsite:hover{background:var(--gold);border-color:var(--gold);color:var(--night);}
.menu-category{padding:clamp(2rem,4vw,3rem) 0;scroll-margin-top:165px;border-bottom:1px solid rgba(28,22,17,.08);}
.menu-category h2{font-size:clamp(1.5rem,3vw,2rem);}
.menu-category .cat-desc{color:var(--muted-light);margin-top:.4rem;}
/* "All tacos ->" under each section on /menu: the link that carries a visitor
(and a crawler) from the hub page to the section's own page. */
/* Shown only to signed-in staff while ordering runs against Square's sandbox. */
.test-banner{background:#3a2a12;color:#ffcf7a;border-bottom:1px solid #6b4d1e;padding:.7rem 1rem;text-align:center;font-weight:700;font-size:.9rem;}
.cat-more{margin:1rem 0 0;}
.cat-more a{color:var(--amber-text);font-weight:700;text-decoration:none;font-size:.92rem;}
.cat-more a:hover,.cat-more a:focus-visible{text-decoration:underline;}
/* Photo banner heading a menu category. Falls back to a plain h2 when the
category has no image_path set in /admin/menu-categories.
Tall enough that a whole dish fits: at the old 17vw/220px cap the box was a
5:1 letterbox, which sliced a horizontal band through every plate and — since
the shoot is mostly shallow-depth-of-field — landed that band largely on
out-of-focus background. */
.cat-banner{
position:relative;overflow:hidden;border-radius:20px;background:var(--night-2);
min-height:clamp(210px,26vw,340px);display:flex;align-items:flex-end;
}
.cat-banner picture, .cat-banner img{position:absolute;inset:0;width:100%;height:100%;}
.cat-banner img{object-fit:cover;filter:saturate(1.06) contrast(1.03);}
.cat-banner .cat-banner-scrim{
position:absolute;inset:0;
background:linear-gradient(180deg, rgba(21,17,14,.12) 0%, rgba(21,17,14,.55) 55%, rgba(21,17,14,.92) 100%);
}
.cat-banner .cat-banner-copy{position:relative;z-index:2;padding:clamp(1.1rem,2.6vw,1.7rem);}
.cat-banner h2{color:var(--paper);margin:0;}
.cat-banner .cat-desc{color:var(--muted-dark);margin-top:.25rem;max-width:52ch;}
.menu-note{
font-size:.9rem;color:var(--muted-light);line-height:1.65;
border-left:3px solid var(--gold);padding:.7rem 0 .7rem 1rem;margin:1.4rem 0 0;
}
.menu-note-advisory{font-size:.8rem;border-left-color:rgba(28,22,17,.2);margin-bottom:2.5rem;}
/* Breakfast page closing block: photo on the left, info cards on the right. */
.breakfast-outro{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.4rem,3vw,2.4rem);align-items:start;}
.breakfast-outro-art{border-radius:22px;overflow:hidden;position:relative;aspect-ratio:4/3;background:var(--night-2);}
.breakfast-outro-art picture, .breakfast-outro-art img{width:100%;height:100%;}
.breakfast-outro-art img{object-fit:cover;}
@media (max-width:860px){
.breakfast-outro{grid-template-columns:1fr;}
.breakfast-outro-art{aspect-ratio:16/9;}
}
.menu-list{display:grid;grid-template-columns:1fr 1fr;gap:.4rem 2.5rem;margin-top:1.6rem;}
@media (max-width:700px){.menu-list{grid-template-columns:1fr;}}
.menu-list-item{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px dashed rgba(28,22,17,.15);}
.menu-list-item .item-name{font-weight:700;}
.menu-list-item .item-desc{display:block;font-size:.85rem;color:var(--muted-light);font-weight:400;margin-top:.15rem;}
.menu-list-item .item-price{font-family:var(--font-body);font-weight:700;color:var(--maroon);white-space:nowrap;font-variant-numeric:tabular-nums;}
.menu-list-item .item-variants{font-size:.82rem;color:var(--muted-light);white-space:nowrap;text-align:right;}
@media (max-width:420px){
/* Long variant lists cannot stay on one line this narrow without
widening the row past the viewport. */
.menu-list-item .item-variants{white-space:normal;}
}
/* ---------- Menu page: fan favorites + per-category photo grids ---------- */
.menu-feature{background:var(--night);color:var(--paper);}
.menu-feature .section-head .label{color:var(--gold);}
.menu-feature .section-head h2{color:var(--paper);}
.menu-feature .section-head p{color:var(--muted-dark);}
.dish-tag{
position:absolute;top:.6rem;left:.6rem;background:rgba(21,17,14,.72);color:var(--gold);
font-family:var(--font-body);font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;
padding:.3rem .65rem;border-radius:999px;backdrop-filter:blur(4px);
}
/* ---------- Dietary / spice badges ---------- */
.diet-badges{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem;}
.diet-badge{
font-family:var(--font-body);font-weight:700;font-size:.66rem;text-transform:uppercase;letter-spacing:.03em;
padding:.2rem .55rem;border-radius:999px;line-height:1.4;white-space:nowrap;
}
.diet-badge.diet-veg{background:rgba(139,195,74,.16);color:#8bc34a;}
.diet-badge.diet-vegan{background:rgba(139,195,74,.22);color:#7cb342;}
.diet-badge.diet-gf{background:rgba(93,169,196,.18);color:#6bb6cc;}
.diet-badge.diet-spice{background:rgba(192,128,58,.18);color:var(--coral);} /* on the dark dish cards; light lists override below */
.menu-list-item .diet-badges{margin-top:.3rem;}
.menu-list-item .diet-badge{color-scheme:light;}
.menu-list-item .diet-badge.diet-veg{color:#5a9c1e;}
.menu-list-item .diet-badge.diet-vegan{color:#4a7d18;}
.menu-list-item .diet-badge.diet-gf{color:#2f7d95;}
.menu-list-item .diet-badge.diet-spice{color:#a8331a;} /* light list: coral-deep was 2.97:1 on the tint; this is 5.5:1 */
/* Kept after the base .menu-grid breakpoints on purpose — these carry higher
specificity (0,2,0), so each viewport the base sets needs a .tight twin. */
.menu-grid.tight{--cols:3;margin-top:1.6rem;}
@media (max-width:900px){.menu-grid.tight{--cols:2;}}
@media (max-width:560px){.menu-grid.tight{--cols:1;}}
.menu-list-item{transition:background .15s ease, padding-inline .15s ease;border-radius:10px;}
.menu-list-item:hover{background:rgba(134,101,47,.045);padding-inline:.6rem;margin-inline:-.6rem;}
/* ---------- Drinks teaser band ---------- */
.drinks-teaser{
position:relative;border-radius:24px;overflow:hidden;background:var(--night);color:var(--paper);
padding:clamp(1.8rem,4vw,2.6rem) clamp(1.5rem,4vw,2.4rem);margin:1.8rem 0 2.2rem;
}
.drinks-teaser-copy{position:relative;z-index:2;max-width:52ch;margin-bottom:1.4rem;}
.drinks-teaser-copy .label{color:var(--gold);}
.drinks-teaser-copy h3{font-family:var(--font-display);font-weight:800;font-size:clamp(1.4rem,2.8vw,1.9rem);margin-top:.4rem;color:var(--paper);}
.drinks-teaser-copy p{margin:.5rem 0 0;color:var(--muted-dark);font-size:.98rem;}
.drinks-teaser-strip{display:flex;gap:.9rem;overflow-x:auto;scrollbar-width:thin;padding-bottom:.2rem;}
.drinks-teaser-strip img{
width:170px;height:220px;object-fit:cover;border-radius:16px;flex:none;
filter:saturate(1.1) contrast(1.05) brightness(1.02);transition:transform .3s ease;
}
.drinks-teaser-strip img:hover{transform:translateY(-4px);}
@media (max-width:560px){.drinks-teaser-strip img{width:140px;height:180px;}}
/* ---------- Menu page: order-online teaser banner ---------- */
.order-teaser{
display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
position:relative;overflow:hidden;border-radius:24px;background:var(--night);color:var(--paper);
padding:clamp(1.6rem,4vw,2.2rem) clamp(1.6rem,4vw,2.4rem);margin:2.8rem 0;
background-image:radial-gradient(50% 140% at 100% 0%, rgba(237,195,109,.14), transparent 70%);
}
.order-teaser .label{color:var(--gold);}
.order-teaser h3{font-family:var(--font-display);font-weight:800;font-size:clamp(1.25rem,2.6vw,1.6rem);margin-top:.4rem;color:var(--paper);}
.order-teaser p{margin:.4rem 0 0;color:var(--muted-dark);font-size:.94rem;}
.order-teaser .pill{flex:none;}
/* ---------- Order online: delivery platform cards ---------- */
.platform-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:1.8rem;max-width:900px;}
@media (max-width:700px){.platform-grid{grid-template-columns:1fr;}}
.order-apps-heading{margin:2.8rem 0 .3rem;font-size:clamp(1.4rem,3vw,1.8rem);}
.order-apps-note{margin:0;color:var(--muted-light);}
.order-apps-heading + .order-apps-note + .platform-grid{margin-top:1.2rem;}
.platform-card{
display:flex;align-items:center;justify-content:center;min-width:0;
background:#fff;border-radius:20px;padding:2.2rem 1.5rem;height:110px;
box-shadow:0 14px 30px -22px rgba(28,22,17,.25);border:1px solid rgba(28,22,17,.06);
transition:transform .2s ease, box-shadow .2s ease;
}
.platform-card:hover{transform:translateY(-4px);box-shadow:0 20px 36px -18px rgba(28,22,17,.3);}
.platform-card img{display:block;max-width:100%;max-height:42px;width:auto;height:auto;}
/* ---------- Simple content pages ---------- */
.page-header{background:var(--night);color:var(--paper);padding:clamp(2.5rem,5vw,4rem) 0;}
.page-header h1{font-size:clamp(2rem,4.5vw,3rem);}
.prose{max-width:70ch;font-size:1.05rem;color:var(--ink);}
.prose p{margin:0 0 1.2rem;}
/* .prose carried no rules for headings, lists or links, so any long-form
block using it fell back to browser defaults - disc bullets and blue
underlined links against the cream page. Mirrors .legal, which already
solved this for Terms and Privacy. */
.prose h2{font-size:1.3rem;margin:2.2rem 0 .8rem;}
.prose ul,.prose ol{margin:0 0 1.2rem 1.3rem;padding:0;}
.prose li{margin-bottom:.45rem;}
/* :not(.pill) so button-styled links in prose keep their pill treatment
instead of picking up a body-copy underline. */
.prose a:not(.pill){color:var(--maroon);text-decoration:underline;}
/* ---------- Legal pages (Terms, Privacy) ---------- */
.legal-updated{color:var(--muted-light);font-size:.9rem;margin-bottom:2rem;}
.legal h2{font-size:1.3rem;margin:2.2rem 0 .8rem;}
.legal h2:first-child{margin-top:0;}
.legal p{margin:0 0 1.1rem;color:var(--ink);}
.legal ul,.legal ol{margin:0 0 1.2rem 1.3rem;padding:0;color:var(--ink);}
.legal li{margin-bottom:.45rem;}
.legal a{color:var(--maroon);text-decoration:underline;}
.legal strong{font-weight:700;}
/* ---------- Forms ---------- */
.form-card{background:#fff;border-radius:22px;padding:clamp(1.5rem,4vw,2.5rem);box-shadow:0 14px 30px -22px rgba(28,22,17,.25);max-width:640px;}
.form-row{margin-bottom:1.2rem;}
.form-row label{display:block;font-weight:700;font-size:.85rem;margin-bottom:.4rem;}
/* Cream fields on a white card read as barely-there at 1px/.2 alpha. A firmer
edge plus a faint inset gives each field a real lip without adding chrome. */
.form-row input, .form-row select, .form-row textarea{
width:100%;padding:.8rem .95rem;border:1px solid rgba(28,22,17,.16);border-radius:12px;
font-family:var(--font-body);font-size:.95rem;background:var(--paper);color:var(--ink);
box-shadow:inset 0 1px 2px rgba(28,22,17,.06);
transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form-row input::placeholder, .form-row textarea::placeholder{color:rgba(122,106,98,.75);}
.form-row input:hover, .form-row select:hover, .form-row textarea:hover{border-color:rgba(28,22,17,.3);}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
outline:2px solid var(--coral);outline-offset:1px;border-color:transparent;background:#fff;
box-shadow:inset 0 1px 2px rgba(28,22,17,0);
}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 1.2rem;}
@media (max-width:560px){.form-grid-2{grid-template-columns:1fr;}}
.alert{padding:1rem 1.2rem;border-radius:12px;margin-bottom:1.5rem;font-weight:600;}
.alert-success{background:#e6f4ea;color:#1b5e20;}
.alert-error{background:#fdecea;color:#8f1d1d;}
.field-error{color:#8f1d1d;font-size:.8rem;margin-top:.3rem;display:block;}
@media (max-width:720px){
.qty-stepper button{width:40px;height:40px;font-size:1.2rem;touch-action:manipulation;}
.qty-stepper input{width:44px;font-size:1rem;}
}
/* ---------- Scroll-triggered reveals ---------- */
.js .reveal{
opacity:0;transform:translateY(26px);
transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
transition-delay:calc(var(--i,0) * 70ms);
}
.js .reveal.is-visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
.js .reveal{opacity:1;transform:none;transition:none;}
}
/* ---------- Header scroll state ---------- */
header{transition:box-shadow .25s ease;}
header.scrolled{box-shadow:0 12px 30px -18px rgba(0,0,0,.6);}
/* ---------- Hero entrance ---------- */
@keyframes heroFadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
.hero-content .inner{animation:heroFadeUp .9s cubic-bezier(.2,.7,.2,1) both;}
@media (prefers-reduced-motion:reduce){.hero-content .inner{animation:none;}}
/* ---------- Photo marquee strip ---------- */
.photo-marquee{background:var(--night);overflow:hidden;padding:1.1rem 0;}
.photo-marquee-track{display:flex;gap:1rem;width:max-content;animation:photoScroll 46s linear infinite;}
.photo-marquee-track img{
width:240px;height:160px;object-fit:cover;border-radius:16px;flex:none;
transition:transform .35s ease;
}
.photo-marquee-track img:hover{transform:scale(1.04);}
@keyframes photoScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.photo-marquee-track{animation:none;}}
/* ---------- Menu tab scrollspy state ---------- */
.menu-tabs a.active{background:var(--maroon);color:var(--paper);border-color:var(--maroon);}
/* ---------- Catering: quick-fact chips on photo header ---------- */
.header-fact-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem;}
.header-fact-row span{
font-family:var(--font-body);font-weight:700;font-size:.76rem;letter-spacing:.03em;text-transform:uppercase;
background:rgba(248,242,232,.1);border:1px solid rgba(248,242,232,.25);color:var(--paper);
padding:.5rem 1rem;border-radius:999px;backdrop-filter:blur(4px);
}
/* ---------- Catering: builder layout ---------- */
.catering-builder{display:grid;grid-template-columns:1fr 380px;gap:clamp(2rem,4vw,3rem);align-items:start;}
@media (max-width:960px){.catering-builder{grid-template-columns:1fr;}}
.catering-categories{display:flex;flex-direction:column;gap:clamp(2.5rem,5vw,3.5rem);}
.catering-cat-head{margin-bottom:1.4rem;}
.catering-cat-head .label{color:var(--maroon);}
.catering-cat-head h2{font-size:clamp(1.5rem,3vw,1.9rem);margin-top:.4rem;}
.catering-cat-head p{color:var(--muted-light);margin:.4rem 0 0;font-size:.92rem;}
.catering-grid-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;}
@media (max-width:700px){.catering-grid-cards{grid-template-columns:1fr;}}
.catering-card{
background:#fff;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;
box-shadow:0 14px 30px -22px rgba(28,22,17,.25);border:1px solid rgba(28,22,17,.06);
transition:transform .2s ease, box-shadow .2s ease;
}
.catering-card:hover{transform:translateY(-4px);box-shadow:0 20px 38px -18px rgba(28,22,17,.3);}
.catering-card figure{margin:0;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--night-3);}
.catering-card figure img{width:100%;height:100%;object-fit:cover;}
.catering-card-noimg{width:100%;height:100%;background:linear-gradient(135deg,var(--night-2),var(--night-3));}
.catering-min-badge{
position:absolute;top:.6rem;left:.6rem;background:rgba(21,17,14,.75);color:var(--gold);
font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;
padding:.3rem .65rem;border-radius:999px;backdrop-filter:blur(4px);
}
.catering-card-body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;flex:1;}
.catering-card-body h3{font-size:1.05rem;margin-bottom:.3rem;}
.catering-card-price{font-family:var(--font-body);font-weight:700;color:var(--maroon);font-size:1rem;white-space:nowrap;}
.catering-card-price small{font-weight:600;color:var(--muted-light);font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;}
.catering-card-body p{margin:.5rem 0 1rem;font-size:.84rem;color:var(--muted-light);flex:1;}
.catering-card-foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:auto;}
.catering-addons{display:flex;flex-direction:column;gap:.35rem;margin:0 0 1rem;}
.catering-addon{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--ink);cursor:pointer;}
.catering-addon input{width:15px;height:15px;accent-color:var(--coral);flex-shrink:0;}
.catering-addon .addon-price{color:var(--muted-light);}
/* Quantity stepper */
.qty-stepper{display:flex;align-items:center;gap:0;border:1px solid rgba(28,22,17,.18);border-radius:999px;overflow:hidden;}
.qty-stepper button{
width:32px;height:32px;border:none;background:var(--paper);color:var(--ink);font-size:1.05rem;font-weight:700;
cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;
}
.qty-stepper button:hover{background:var(--coral);color:#fff;}
.qty-stepper input{
width:38px;border:none;text-align:center;font-weight:700;font-family:var(--font-body);font-size:.92rem;
background:#fff;padding:.4rem 0;-moz-appearance:textfield;
}
.qty-stepper input::-webkit-outer-spin-button,.qty-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
/* ---------- Catering: sticky order sidebar ---------- */
.catering-sidebar{position:sticky;top:100px;}
.order-summary{background:var(--night);color:var(--paper);border-radius:22px;padding:1.5rem 1.4rem;margin-bottom:1.2rem;}
.order-summary h3{color:var(--paper);font-size:1.05rem;margin-bottom:.9rem;}
.order-summary-empty{font-size:.88rem;color:var(--muted-dark);}
.order-summary-rows{display:flex;flex-direction:column;gap:.55rem;margin-bottom:.9rem;}
.order-summary-row{display:flex;justify-content:space-between;gap:.8rem;font-size:.86rem;}
.order-summary-row .qty{color:var(--gold);font-weight:700;}
.order-summary-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:.9rem;border-top:1px solid var(--night-3);font-weight:700;}
.order-summary-total .amt{font-family:var(--font-display);font-size:1.5rem;color:var(--gold);}
.order-summary-note{font-size:.72rem;color:var(--muted-dark);margin-top:.6rem;}
/* ---------- Catering: "good to know" callout ---------- */
.good-to-know{background:#fff;border:1px solid rgba(28,22,17,.08);border-radius:20px;padding:1.5rem 1.6rem;box-shadow:0 14px 30px -22px rgba(28,22,17,.2);}
.good-to-know h3{font-size:.95rem;margin-bottom:.5rem;}
.good-to-know p{margin:0;font-size:.86rem;color:var(--muted-light);}
/* ---------- Contact / Jobs / Gift cards: two-column form + info sidebar ---------- */
.form-layout{display:grid;grid-template-columns:1fr 360px;gap:clamp(2rem,4vw,3rem);align-items:start;}
@media (max-width:900px){.form-layout{grid-template-columns:1fr;}}
.form-main{display:flex;flex-direction:column;gap:1.5rem;}
.form-sidebar{display:flex;flex-direction:column;gap:1.2rem;position:sticky;top:100px;}
@media (max-width:900px){.form-sidebar{position:static;}}
.info-card{background:#fff;border:1px solid rgba(28,22,17,.06);border-radius:20px;padding:1.5rem 1.6rem;box-shadow:0 14px 30px -22px rgba(28,22,17,.22);}
.info-card h3, .info-card-heading{font-size:.98rem;margin-bottom:1rem;}
.info-card .hours-row{font-size:.87rem;padding:.25rem 0;}
/* Today's row is gold because it was designed on the dark footer. On a light
card gold text is 1.74:1 — and because the highlight follows the weekday,
an audit run on any other day never sees the failing row. Amber text is
5.2:1 on this tint. (Dark cards restore gold just below.) */
.info-card .hours-row.today{color:var(--amber-text);}
.info-card-dark{background:var(--night);color:var(--paper);}
.info-card-dark h3, .info-card-dark .info-card-heading{color:var(--paper);}
.info-card-dark .hours-row{color:var(--muted-dark);}
.info-card-dark .hours-row.today{color:var(--gold);}
.info-card-accent{background:linear-gradient(120deg, var(--maroon-deep), var(--maroon) 75%);color:var(--paper);}
.info-card-accent h3, .info-card-accent .info-card-heading{color:var(--paper);}
.info-card-accent p{color:rgba(248,242,232,.9);margin:0 0 1.1rem;font-size:.9rem;}
/* ---------- Gift cards page ---------- */
.giftcard-options{display:flex;flex-direction:column;gap:1.2rem;}
.giftcard-option{
background:#fff;border:1px solid rgba(28,22,17,.06);border-radius:22px;
padding:clamp(1.5rem,3vw,2.1rem);box-shadow:0 14px 30px -22px rgba(28,22,17,.22);
}
.giftcard-option h2{font-size:clamp(1.35rem,2.6vw,1.8rem);margin:.4rem 0 .6rem;}
.giftcard-option p{margin:0 0 1.3rem;color:var(--muted-light);font-size:.98rem;max-width:56ch;}
.giftcard-option-primary{
background:linear-gradient(140deg, var(--night-2), var(--night-3) 85%);
border-color:rgba(237,195,109,.25);color:var(--paper);
}
.giftcard-option-primary .label{color:var(--gold);}
.giftcard-option-primary h2{color:var(--paper);}
.giftcard-option-primary p{color:var(--muted-dark);}
.giftcard-actions{display:flex;flex-wrap:wrap;gap:.7rem;}
.giftcard-fineprint{display:block;margin-top:.9rem;font-size:.8rem;color:var(--muted-dark);}
.info-link{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--ink);font-weight:600;font-size:.92rem;margin-bottom:.7rem;}
.info-link:last-child{margin-bottom:0;}
.info-link svg{flex:none;width:16px;height:16px;color:var(--coral);}
.info-card-dark .info-link{color:var(--paper);}
.info-note{display:flex;align-items:center;gap:.65rem;font-size:.88rem;color:var(--muted-light);margin-bottom:.7rem;}
.info-note:last-child{margin-bottom:0;}
.info-note svg{flex:none;width:16px;height:16px;color:var(--coral);}
.info-card-dark .info-note{color:var(--muted-dark);}
.info-card .social-row{margin-top:0;}
/* ---------- Location cards (/locations, /locations/{slug}, contact) ---------- */
.loc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(1.25rem,3vw,2rem);}
.loc-card{background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 14px 30px -22px rgba(28,22,17,.3);border:1px solid rgba(28,22,17,.06);display:flex;flex-direction:column;}
.loc-card-img{aspect-ratio:16/9;overflow:hidden;background:var(--night-2);}
.loc-card-img img{width:100%;height:100%;object-fit:cover;display:block;}
.loc-card-body{padding:1.4rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:.45rem;flex:1;}
.loc-card .label{color:var(--maroon);}
.loc-card h2{font-size:clamp(1.6rem,3vw,2rem);}
.loc-card-tagline{margin:0;color:var(--muted-light);}
.loc-card-line{margin:0;}
.loc-card-line a{color:var(--ink);font-weight:600;}
.loc-card-today{margin:.2rem 0 0;font-weight:700;color:var(--amber-text);}
.loc-card-hours summary{cursor:pointer;font-weight:700;font-size:.9rem;color:var(--maroon);min-height:32px;display:flex;align-items:center;}
.loc-card-hours .hours-row.today{color:var(--amber-text);background:rgba(237,195,109,.18);}
.loc-card-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.6rem;}
.loc-card-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;margin-top:auto;padding-top:.9rem;border-top:1px solid rgba(28,22,17,.08);font-size:.88rem;font-weight:700;}
.loc-card-foot a{color:var(--maroon);}
.loc-card-mine{color:var(--amber-text);}
.loc-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(1.25rem,3vw,2rem);align-items:start;}
.loc-detail .contact-map-panel{margin-top:0;}
.loc-detail .contact-map{height:100%;min-height:420px;}
@media (max-width:860px){.loc-detail{grid-template-columns:1fr;}.loc-detail .contact-map{min-height:300px;}}
.loc-other-title{margin-bottom:1.2rem;}
.contact-map-panel{border-radius:22px;overflow:hidden;box-shadow:0 14px 30px -22px rgba(28,22,17,.25);margin-top:clamp(2rem,4vw,3rem);}
.contact-map{position:relative;display:block;height:340px;}
.contact-map iframe{width:100%;height:100%;border:0;display:block;pointer-events:none;}
.contact-map-cta{
position:absolute;bottom:1rem;left:1rem;display:inline-flex;align-items:center;gap:.5rem;
background:var(--night);color:var(--paper);font-weight:700;font-size:.82rem;
padding:.55rem 1rem;border-radius:999px;box-shadow:0 10px 20px -10px rgba(0,0,0,.4);
transition:background .2s ease;
}
.contact-map-cta svg{width:15px;height:15px;color:var(--gold);flex:none;}
.contact-map:hover .contact-map-cta{background:var(--coral);}
/* ---------- How it works (self-service explainer) ----------
Answers "how do I order?" before guests scroll past the specials. Numbered so it reads as a sequence
to a screen reader too, not three unrelated cards. */
.how-it-works{background:var(--paper);}
.how-steps{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;
counter-reset:none;
}
@media (max-width:820px){.how-steps{grid-template-columns:1fr;}}
.how-step{
position:relative;background:#fff;border:1px solid rgba(28,22,17,.08);border-radius:20px;
padding:1.6rem 1.5rem 1.5rem;box-shadow:0 14px 30px -22px rgba(28,22,17,.25);
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.how-step:hover{transform:translateY(-4px);border-color:rgba(28,22,17,.16);box-shadow:0 22px 38px -24px rgba(28,22,17,.4);}
.how-step-n{
display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
background:var(--gold);color:var(--ink);font-family:var(--font-display);font-weight:800;font-size:1.05rem;
margin-bottom:.9rem;
}
.how-step h3{font-family:var(--font-body);font-size:1.02rem;font-weight:700;margin:0 0 .35rem;}
.how-step p{margin:0;font-size:.9rem;color:var(--muted-light);}
/* ---------- /table — QR landing page ----------
Reached from a table tent, so it is phone-first and assumes a slow signal:
no hero media, no reveal animations gating content, tap targets sized for a
thumb. Everything above the fold answers "what can I eat and how do I get it". */
.table-hero{
background:linear-gradient(150deg, var(--night) 0%, var(--night-2) 60%, var(--maroon-deep) 190%);
color:var(--paper);padding:clamp(2.2rem,7vw,3.4rem) 0 clamp(1.8rem,5vw,2.6rem);
}
.table-hero .eyebrow{color:var(--gold);display:block;margin-bottom:.7rem;}
.table-hero h1{font-size:clamp(1.8rem,7vw,2.8rem);line-height:1.12;margin:0;color:var(--paper);}
.table-hero .lede{color:var(--muted-dark);font-size:1rem;max-width:42ch;margin:1rem 0 1.3rem;}
.table-status{
display:inline-block;font-weight:700;font-size:.8rem;letter-spacing:.03em;text-transform:uppercase;
padding:.45rem 1rem;border-radius:999px;border:1px solid transparent;
}
.table-status.is-open{background:rgba(237,195,109,.16);border-color:rgba(237,195,109,.45);color:var(--gold);}
.table-status.is-closed{background:rgba(192,128,58,.14);border-color:rgba(192,128,58,.4);color:var(--coral);}
.table-order-cta{
/* flex, not inline-flex: this needs its own line under the open/closed chip
rather than sitting beside it, where two amber pills read as one control. */
display:flex;width:max-content;margin-top:1.3rem;
padding:1rem 2.2rem;font-size:1rem;
}
/* Ordering to a table (see DineIn): the number is what the guest checks
against the sign on their table, so it is the loudest thing on the page. */
.table-number{
font-family:var(--font-display);font-size:1rem;letter-spacing:.06em;text-transform:uppercase;
color:var(--paper);margin:0 0 .5rem;
}
.table-number strong{font-size:clamp(2.6rem,12vw,3.6rem);color:var(--gold);margin-left:.25rem;line-height:1;vertical-align:-.12em;}
.table-closed-note{margin:1.2rem 0 0;color:var(--coral);font-weight:700;max-width:42ch;}
.table-pick{margin-top:1.4rem;max-width:26rem;}
.table-pick label{display:block;font-weight:700;margin-bottom:.5rem;color:var(--paper);}
.table-pick-row{display:flex;gap:.6rem;flex-wrap:wrap;}
.table-pick input{
flex:0 0 6.5rem;min-width:0;font-size:1.25rem;font-weight:700;text-align:center;
padding:.75rem .6rem;border-radius:12px;border:1px solid rgba(248,242,232,.35);
background:rgba(248,242,232,.08);color:var(--paper);
}
.table-pick input:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
.table-pick .pill{flex:1 1 auto;justify-content:center;}
.table-pick small{display:block;margin-top:.5rem;color:var(--muted-dark);font-size:.82rem;}
.table-pick .field-error{color:var(--coral);}
.table-block{padding:clamp(1.8rem,5vw,2.6rem) 0;}
.table-h2{font-size:clamp(1.15rem,4vw,1.45rem);margin:0 0 1.1rem;}
.table-specials{background:var(--night-2);color:var(--paper);}
.table-specials .table-h2{color:var(--gold);}
.table-special-list{display:flex;flex-direction:column;gap:.7rem;}
.table-special{
display:flex;align-items:center;justify-content:space-between;gap:1rem;
background:rgba(248,242,232,.06);border:1px solid rgba(248,242,232,.14);border-radius:16px;padding:.95rem 1.1rem;
}
.table-special h3{font-family:var(--font-body);font-size:.98rem;font-weight:700;margin:0 0 .2rem;color:var(--paper);}
.table-special p{margin:0;font-size:.85rem;color:var(--muted-dark);}
.table-special-price{flex:none;font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--gold);}
.table-special-day{
flex:none;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
color:var(--ink);background:var(--gold);padding:.35rem .7rem;border-radius:999px;
}
.table-cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;}
@media (min-width:700px){.table-cat-grid{grid-template-columns:repeat(3,1fr);}}
.table-cat{
display:flex;flex-direction:column;gap:.15rem;text-decoration:none;
background:#fff;border:1px solid rgba(28,22,17,.1);border-radius:14px;
padding:.85rem .95rem;min-height:60px;justify-content:center;
transition:border-color .15s ease, transform .15s ease;
}
.table-cat:hover,.table-cat:focus-visible{border-color:var(--gold);transform:translateY(-2px);}
.table-cat span{font-weight:700;font-size:.92rem;color:var(--ink);line-height:1.2;}
.table-cat small{font-size:.75rem;color:var(--muted-light);}
.table-cta-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem;}
.table-how{background:var(--paper);}
.table-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem;}
.table-steps li{display:flex;gap:.9rem;align-items:flex-start;}
.table-steps li > span{
flex:none;width:32px;height:32px;border-radius:50%;background:var(--night);color:var(--gold);
display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:.92rem;
}
.table-steps strong{display:block;font-size:.96rem;}
.table-steps p{margin:.15rem 0 0;font-size:.87rem;color:var(--muted-light);}
.table-actions{background:var(--night);padding-bottom:clamp(2.4rem,6vw,3.2rem);}
.table-action-grid{display:grid;grid-template-columns:1fr;gap:.6rem;}
@media (min-width:700px){.table-action-grid{grid-template-columns:repeat(2,1fr);}}
.table-action{
display:flex;align-items:center;gap:.8rem;text-decoration:none;
background:var(--night-2);border:1px solid var(--night-3);border-radius:14px;
padding:1rem 1.1rem;color:var(--paper);font-weight:600;font-size:.94rem;min-height:56px;
transition:border-color .15s ease, background .15s ease;
}
.table-action:hover,.table-action:focus-visible{border-color:var(--gold);background:var(--night-3);}
.table-action svg{flex:none;width:20px;height:20px;color:var(--gold);}
/* ---------- /specials: today bar ---------- */
.today-bar{background:var(--night);color:var(--paper);padding:1rem 0;border-bottom:1px solid var(--night-3);}
.today-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.today-when{display:flex;align-items:center;gap:.7rem;}
.today-dow{font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--paper);}
.today-status{font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.35rem .8rem;border-radius:999px;}
.today-status.is-open{background:rgba(237,195,109,.16);color:var(--gold);}
.today-status.is-closed{background:rgba(192,128,58,.16);color:var(--coral);}
.today-what{display:flex;gap:.5rem;flex-wrap:wrap;}
.today-chip{font-size:.82rem;font-weight:700;padding:.4rem .9rem;border-radius:999px;background:var(--gold);color:var(--ink);}
.today-chip.is-event{background:var(--coral);}
.today-chip.is-quiet{background:transparent;border:1px solid var(--night-3);color:var(--muted-dark);font-weight:600;}
/* ---------- /specials: 12-month calendar ----------
Paged with radio inputs + sibling selectors, not JavaScript. All twelve
months ship in the DOM and CSS reveals one; the page is reachable from the
table-tent QR, so it has to keep working on a phone with a dead JS bundle. */
.cal-section{background:var(--paper);}
.cal{max-width:840px;margin:0 auto;}
.cal-radio{position:absolute;opacity:0;pointer-events:none;}
.cal-tabs{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;margin-bottom:1.4rem;}
.cal-tab{
position:relative;cursor:pointer;user-select:none;
font-size:.8rem;font-weight:700;letter-spacing:.02em;
padding:.45rem .8rem;border-radius:999px;
border:1px solid rgba(28,22,17,.16);color:var(--muted-light);background:#fff;
transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.cal-tab:hover{border-color:var(--gold);color:var(--ink);}
.cal-tab-dot{
position:absolute;top:.3rem;right:.35rem;width:5px;height:5px;border-radius:50%;
background:var(--coral);
}
/* The month radios are visually hidden but keyboard-operable (arrow keys move
between months), so the focus ring has to be drawn on the visible tab that
each one controls — otherwise focus is invisible, which is WCAG 2.4.7. */
#cal-m0:focus-visible ~ .cal-tabs .cal-tab:nth-of-type(1){outline:3px solid var(--maroon);outline-offset:3px;}
#cal-m1:focus-visible ~ .cal-tabs .cal-tab:nth-of-type(2){outline:3px solid var(--maroon);outline-offset:3px;}
#cal-m2:focus-visible ~ .cal-tabs .cal-tab:nth-of-type(3){outline:3px solid var(--maroon);outline-offset:3px;}
#cal-m3:focus-visible ~ .cal-tabs .cal-tab:nth-of-type(4){outline:3px solid var(--maroon);outline-offset:3px;}
#cal-m4:focus-visible ~ .cal-tabs .cal-tab:nth-of-type(5){outline:3px solid var(--maroon);outline-offset:3px;}
#cal-m5:focus-visible ~ .cal-tabs .cal-tab:nth-of-type(6){outline:3px solid var(--maroon);outline-offset:3px;}
#cal-m6:focus-visible ~ .cal-tabs .cal-tab:nth-of-type(7){outline:3px solid var(--maroon);outline-offset:3px;}
#cal-m7:focus-visible ~ .cal-tabs .cal-tab:nth-of-type(8){outline:3px solid var(--maroon);outline-offset:3px;}
#cal-m8:focus-visible ~ .cal-tabs .cal-tab:nth-of-type(9){outline:3px solid var(--maroon);outline-offset:3px;}
#cal-m9:focus-visible ~ .cal-tabs .cal-tab:nth-of-type(10){outline:3px solid var(--maroon);outline-offset:3px;}
#cal-m10:focus-visible ~ .cal-tabs .cal-tab:nth-of-type(11){outline:3px solid var(--maroon);outline-offset:3px;}
#cal-m11:focus-visible ~ .cal-tabs .cal-tab:nth-of-type(12){outline:3px solid var(--maroon);outline-offset:3px;}
.cal-month{display:none;}
#cal-m0:checked ~ .cal-body .cal-month:nth-of-type(1){display:block;}
#cal-m1:checked ~ .cal-body .cal-month:nth-of-type(2){display:block;}
#cal-m2:checked ~ .cal-body .cal-month:nth-of-type(3){display:block;}
#cal-m3:checked ~ .cal-body .cal-month:nth-of-type(4){display:block;}
#cal-m4:checked ~ .cal-body .cal-month:nth-of-type(5){display:block;}
#cal-m5:checked ~ .cal-body .cal-month:nth-of-type(6){display:block;}
#cal-m6:checked ~ .cal-body .cal-month:nth-of-type(7){display:block;}
#cal-m7:checked ~ .cal-body .cal-month:nth-of-type(8){display:block;}
#cal-m8:checked ~ .cal-body .cal-month:nth-of-type(9){display:block;}
#cal-m9:checked ~ .cal-body .cal-month:nth-of-type(10){display:block;}
#cal-m10:checked ~ .cal-body .cal-month:nth-of-type(11){display:block;}
#cal-m11:checked ~ .cal-body .cal-month:nth-of-type(12){display:block;}
#cal-m0:checked ~ .cal-tabs .cal-tab:nth-of-type(1){background:var(--gold);color:var(--ink);border-color:var(--gold);}
#cal-m1:checked ~ .cal-tabs .cal-tab:nth-of-type(2){background:var(--gold);color:var(--ink);border-color:var(--gold);}
#cal-m2:checked ~ .cal-tabs .cal-tab:nth-of-type(3){background:var(--gold);color:var(--ink);border-color:var(--gold);}
#cal-m3:checked ~ .cal-tabs .cal-tab:nth-of-type(4){background:var(--gold);color:var(--ink);border-color:var(--gold);}
#cal-m4:checked ~ .cal-tabs .cal-tab:nth-of-type(5){background:var(--gold);color:var(--ink);border-color:var(--gold);}
#cal-m5:checked ~ .cal-tabs .cal-tab:nth-of-type(6){background:var(--gold);color:var(--ink);border-color:var(--gold);}
#cal-m6:checked ~ .cal-tabs .cal-tab:nth-of-type(7){background:var(--gold);color:var(--ink);border-color:var(--gold);}
#cal-m7:checked ~ .cal-tabs .cal-tab:nth-of-type(8){background:var(--gold);color:var(--ink);border-color:var(--gold);}
#cal-m8:checked ~ .cal-tabs .cal-tab:nth-of-type(9){background:var(--gold);color:var(--ink);border-color:var(--gold);}
#cal-m9:checked ~ .cal-tabs .cal-tab:nth-of-type(10){background:var(--gold);color:var(--ink);border-color:var(--gold);}
#cal-m10:checked ~ .cal-tabs .cal-tab:nth-of-type(11){background:var(--gold);color:var(--ink);border-color:var(--gold);}
#cal-m11:checked ~ .cal-tabs .cal-tab:nth-of-type(12){background:var(--gold);color:var(--ink);border-color:var(--gold);}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.9rem;}
.cal-head h3{font-family:var(--font-display);font-size:clamp(1.25rem,3vw,1.6rem);font-weight:800;margin:0;}
.cal-nav{
cursor:pointer;user-select:none;flex:none;
width:38px;height:38px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:1.4rem;line-height:1;color:var(--ink);
border:1px solid rgba(28,22,17,.16);background:#fff;
transition:border-color .15s ease,background .15s ease;
}
.cal-nav:hover{border-color:var(--gold);background:var(--gold);}
.cal-caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.cal-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.cal-grid{width:100%;border-collapse:separate;border-spacing:4px;table-layout:fixed;}
.cal-grid th{
font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--muted-light);padding-bottom:.3rem;text-align:center;
}
.cal-wd-full{display:none;}
@media (min-width:560px){
.cal-grid th span[aria-hidden]{display:none;}
.cal-wd-full{display:inline;}
}
.cal-cell{
position:relative;vertical-align:top;
height:64px;padding:.35rem .4rem;
background:#fff;border:1px solid rgba(28,22,17,.08);border-radius:10px;
}
@media (min-width:560px){ .cal-cell{height:78px;} }
.cal-cell.is-blank{background:transparent;border-color:transparent;}
/* Past days still read as past, but stay legible: at .45 the day numbers were
2.99:1 and event names 2.38:1. At .8 maroon event names are 4.8:1. */
.cal-cell.is-past{opacity:.8;}
.cal-cell.is-closed{background:repeating-linear-gradient(135deg,#f4ece1,#f4ece1 5px,#eee2d3 5px,#eee2d3 10px);}
.cal-cell.has-event{border-color:var(--coral);box-shadow:0 0 0 1px var(--coral) inset;}
.cal-cell.is-today{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink) inset;}
.cal-day{font-size:.82rem;font-weight:700;color:var(--ink);line-height:1;}
.cal-closed-mark{position:absolute;top:.3rem;right:.4rem;font-size:.8rem;color:var(--muted-light);line-height:1;}
.cal-dots{position:absolute;left:.4rem;bottom:.35rem;display:flex;gap:3px;}
.cal-dot{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block;}
.dot-gold{background:var(--gold);}
.dot-coral{background:var(--coral);}
.dot-maroon{background:var(--maroon);}
.cal-diamond{
width:8px;height:8px;flex:none;display:inline-block;
background:var(--maroon);transform:rotate(45deg);border-radius:1px;
}
.cal-swatch{
width:14px;height:11px;flex:none;display:inline-block;border-radius:3px;
border:1px solid rgba(28,22,17,.15);
background:repeating-linear-gradient(135deg,#f4ece1,#f4ece1 3px,#e2d3c1 3px,#e2d3c1 6px);
}
.cal-event-name{display:none;}
.cal-legend .cal-diamond{margin-right:.1rem;}
@media (min-width:700px){
.cal-event-name{
display:block;position:absolute;left:.4rem;right:.4rem;bottom:.9rem;
font-size:.6rem;font-weight:700;line-height:1.15;color:var(--maroon);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cal-cell.has-event .cal-dots{bottom:.3rem;}
}
.cal-highlights{list-style:none;margin:1.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem;}
.cal-highlights li{display:flex;align-items:center;gap:.7rem;font-size:.92rem;font-weight:600;color:var(--ink);}
.cal-hl-day{
flex:none;width:30px;height:30px;border-radius:9px;background:var(--night);color:var(--gold);
display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:.85rem;
}
.cal-quiet{margin-top:1.2rem;font-size:.9rem;color:var(--muted-light);}
.cal-legend{
list-style:none;margin:1.6rem 0 0;padding:1rem 0 0;border-top:1px solid rgba(28,22,17,.1);
display:flex;flex-wrap:wrap;gap:.6rem 1.3rem;justify-content:center;
}
.cal-legend li{display:flex;align-items:center;gap:.45rem;font-size:.8rem;font-weight:600;color:var(--muted-light);}
/* ---------- Hero video pause control (WCAG 2.2.2) ----------
Sits opposite the scroll cue so it never covers the headline. Deliberately a
visible text button rather than an icon: an unlabelled pause glyph is the kind
of control that passes an automated check and still fails a real user. */
.hero-media-toggle{
position:absolute;z-index:3;left:clamp(1.25rem,4vw,3rem);bottom:1.6rem;
font-family:var(--font-body);font-weight:600;font-size:.72rem;letter-spacing:.04em;
color:var(--paper);background:rgba(21,17,14,.72);border:1px solid rgba(248,242,232,.35);
padding:.5rem .9rem;border-radius:999px;cursor:pointer;backdrop-filter:blur(6px);
transition:background .15s ease,border-color .15s ease;
}
.hero-media-toggle:hover{background:rgba(21,17,14,.9);border-color:var(--gold);}
.hero-media-toggle:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
@media (max-width:560px){
/* Keeps clear of the sticky order bar at the bottom of narrow screens. */
.hero-media-toggle{bottom:5.2rem;font-size:.68rem;padding:.45rem .8rem;}
}
/* ---------- About: vertical story video ----------
The clip is 380x720. Giving it a column instead of forcing it into the
landscape .story-art slot avoids letterboxing it into a thin strip, and keeps
the 19:36 frame at a size a phone-shot video actually looks good at. */
.story-video-section{background:var(--paper);}
.story-video-grid{
display:grid;grid-template-columns:1fr minmax(280px,340px);
gap:clamp(2rem,5vw,4rem);align-items:center;
}
@media (max-width:820px){
.story-video-grid{grid-template-columns:1fr;justify-items:center;text-align:center;}
.story-video-copy{max-width:52ch;}
}
.story-video-copy h2{font-size:clamp(1.6rem,3.4vw,2.3rem);margin-top:.6rem;}
.story-video-copy .body-copy{margin-top:1rem;color:var(--muted-light);}
.story-video{margin:0;width:100%;max-width:340px;}
.story-video video{
display:block;width:100%;height:auto;aspect-ratio:19/36;
border-radius:22px;background:var(--night-3);
box-shadow:0 26px 50px -20px rgba(28,22,17,.4);
}
.story-video figcaption{
margin-top:.7rem;font-size:.8rem;line-height:1.45;color:var(--muted-light);text-align:center;
}
/* Text alternative for the silent clip (WCAG 1.2.1). Collapsed by default so it
does not compete with the video, but available to everyone rather than hidden
from sighted users in a visually-hidden block. */
.story-video-desc{margin-top:.6rem;font-size:.8rem;color:var(--muted-light);}
.story-video-desc summary{
cursor:pointer;font-weight:700;color:var(--maroon);text-align:center;list-style-position:inside;
}
.story-video-desc summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px;}
.story-video-desc p{margin:.6rem 0 0;line-height:1.5;text-align:left;}
/* ---------- Online ordering (/order when square.ordering_enabled) ---------- */
.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;}
.order-header .header-fact-row{margin-top:1.3rem;}
.order-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(1.5rem,3vw,2.5rem);align-items:start;}
.order-sidebar{position:sticky;top:160px;padding-top:clamp(2rem,4vw,3rem);}
/* Below this width the sidebar would squeeze the menu; the cart moves to the
sticky bottom bar + sheet instead. */
@media (max-width:900px){
.order-layout{grid-template-columns:1fr;}
.order-sidebar{display:none;}
}
.oi-category{scroll-margin-top:150px;}
.oi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;margin-top:1.2rem;}
@media (max-width:620px){.oi-grid{grid-template-columns:1fr;}}
/* Each dish is one big button: text left, photo right (the pattern people know
from delivery apps), so a long menu scans as a list, not a gallery. */
.oi-card{
display:flex;align-items:stretch;gap:.9rem;width:100%;min-height:118px;text-align:left;cursor:pointer;
background:#fff;border:1px solid rgba(28,22,17,.08);border-radius:18px;padding:.9rem;
font:inherit;color:var(--ink);box-shadow:0 12px 26px -22px rgba(28,22,17,.3);
transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.oi-card:hover{transform:translateY(-2px);border-color:rgba(134,101,47,.35);box-shadow:0 18px 30px -20px rgba(28,22,17,.35);}
.oi-card:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
.oi-card[disabled]{cursor:not-allowed;opacity:.6;transform:none;box-shadow:none;}
.oi-card-body{display:flex;flex-direction:column;gap:.3rem;flex:1;min-width:0;}
.oi-card-name{font-family:var(--font-display);font-weight:800;font-size:1.02rem;line-height:1.2;}
.oi-card-desc{
font-size:.82rem;color:var(--muted-light);line-height:1.45;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.oi-card-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:auto;padding-top:.3rem;}
.oi-card-price{font-weight:700;color:var(--maroon);font-variant-numeric:tabular-nums;}
.oi-card-add{
width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
background:var(--gold);color:var(--ink);font-weight:800;font-size:1.15rem;line-height:1;
}
.oi-card:hover .oi-card-add{background:var(--gold-deep);}
.oi-card-img{flex:none;width:104px;border-radius:12px;overflow:hidden;background:var(--night-3);}
.oi-card-img picture,.oi-card-img img{width:100%;height:100%;object-fit:cover;}
.oi-soldout{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-light);}
.oi-delivery-links{display:flex;flex-wrap:wrap;gap:.6rem;}
.oi-delivery-links .pill{padding:.65rem 1.2rem;}
/* ---------- Cart (sidebar + mobile sheet share this markup) ---------- */
.oi-cart h3{font-size:1.1rem;}
.oi-lines{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;}
.oi-line{display:flex;justify-content:space-between;gap:.8rem;padding:.8rem 0;border-bottom:1px solid var(--night-3);}
.oi-line.has-error{border-left:3px solid var(--coral);padding-left:.6rem;margin-left:-.6rem;}
.oi-line-main{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.oi-line-name{text-align:left;font-weight:700;font-size:.92rem;color:var(--paper);cursor:pointer;padding:0;text-decoration:underline;text-decoration-color:rgba(248,242,232,.25);text-underline-offset:3px;}
.oi-line-name:hover{text-decoration-color:var(--gold);}
.oi-line-name:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px;}
.oi-line-detail{font-size:.78rem;color:var(--muted-dark);}
.oi-line-error{font-size:.78rem;color:#ffb4a1;font-weight:600;}
.oi-line-side{display:flex;flex-direction:column;align-items:flex-end;gap:.45rem;flex:none;}
.oi-line-price{font-weight:700;font-variant-numeric:tabular-nums;}
.qty-stepper-dark{border-color:var(--night-3);}
.qty-stepper-dark button{background:var(--night-2);color:var(--paper);width:32px;height:32px;}
.qty-stepper-dark button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}
.oi-line-qty{min-width:28px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums;}
.oi-totals{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.1rem;}
.oi-totals .order-summary-row{color:var(--muted-dark);}
.oi-checkout{width:100%;justify-content:center;}
.oi-checkout.is-disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none;}
.oi-cart-error{font-size:.82rem;color:#ffb4a1;margin:0 0 .9rem;}
.oi-retry{color:var(--gold);font-weight:700;text-decoration:underline;cursor:pointer;padding:0;}
/* The mobile cart bar appears as soon as something is in the cart, at every
width where the sidebar is hidden (not just the 720px .mobile-cta default). */
.mobile-cta-cart[data-cart-bar][hidden]{display:none !important;}
@media (max-width:900px){
.mobile-cta-cart[data-cart-bar]{
display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;align-items:center;gap:.7rem;
background:rgba(21,17,14,.95);backdrop-filter:blur(10px);border-top:1px solid var(--night-3);
padding:.8rem clamp(1rem,4vw,2rem) calc(.8rem + env(safe-area-inset-bottom));
}
body.has-cart-bar footer{padding-bottom:calc(76px + env(safe-area-inset-bottom) + 1.5rem);}
}
@media (min-width:901px){.mobile-cta-cart[data-cart-bar]{display:none !important;}}
.mobile-cta-cart .cart-summary{cursor:pointer;text-align:left;}
.mobile-cta-cart.is-bumped{animation:oiBump .35s ease;}
@keyframes oiBump{50%{transform:translateY(-4px);}}
@media (prefers-reduced-motion:reduce){.mobile-cta-cart.is-bumped{animation:none;}}
/* ---------- Sheets (native ): centred on desktop, bottom sheet on phones ---------- */
.oi-locked, .oi-locked body{overflow:hidden;}
.oi-sheet{
padding:0;border:none;border-radius:24px;width:min(560px,calc(100vw - 2rem));max-height:min(88vh,860px);
background:var(--paper);color:var(--ink);box-shadow:0 30px 80px -20px rgba(0,0,0,.55);overflow:hidden;
}
.oi-sheet[open]{display:flex;flex-direction:column;}
.oi-sheet::backdrop{background:rgba(21,17,14,.6);backdrop-filter:blur(2px);}
@media (max-width:620px){
.oi-sheet{width:100vw;max-width:100vw;max-height:92vh;margin:auto 0 0;border-radius:22px 22px 0 0;}
.oi-sheet[open]{animation:oiSheetUp .22s ease-out;}
}
@keyframes oiSheetUp{from{transform:translateY(40px);opacity:.4;}}
@media (prefers-reduced-motion:reduce){.oi-sheet[open]{animation:none;}}
.oi-sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.2rem 1.3rem .4rem;}
.oi-sheet-head h2{font-size:clamp(1.3rem,3vw,1.6rem);}
.oi-close{
width:38px;height:38px;flex:none;border-radius:50%;cursor:pointer;font-size:1.5rem;line-height:1;
display:flex;align-items:center;justify-content:center;background:rgba(28,22,17,.07);color:var(--ink);
}
.oi-close:hover{background:rgba(28,22,17,.14);}
.oi-close:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
.oi-item-form{display:flex;flex-direction:column;min-height:0;flex:1;}
.oi-item-media{aspect-ratio:16/9;max-height:34vh;overflow:hidden;background:var(--night-3);flex:none;}
.oi-item-media picture,.oi-item-media img{width:100%;height:100%;object-fit:cover;}
.oi-item-scroll{overflow-y:auto;padding:0 1.3rem 1rem;flex:1;overscroll-behavior:contain;}
.oi-item-desc{color:var(--muted-light);font-size:.92rem;margin:.2rem 0 1rem;}
.oi-item-desc:empty{display:none;}
.oi-group{border:1px solid rgba(28,22,17,.1);border-radius:16px;margin:0 0 1rem;padding:.4rem .9rem .5rem;background:#fff;}
.oi-group legend{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;width:100%;padding:.7rem 0 .3rem;float:left;}
.oi-group legend + *{clear:both;}
.oi-group-name{font-family:var(--font-display);font-weight:800;font-size:1rem;}
.oi-group-hint{font-size:.78rem;color:var(--muted-light);flex-basis:100%;}
.oi-badge{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.2rem .55rem;border-radius:999px;background:rgba(28,22,17,.07);color:#5f5049;} /* --muted-light is 4.47:1 on this tint; this is 6.2:1 */
.oi-badge-req{background:rgba(134,101,47,.1);color:var(--maroon);}
.oi-group.is-missing{border-color:var(--coral);box-shadow:0 0 0 3px rgba(192,128,58,.18);}
.oi-group-error{flex-basis:100%;font-size:.8rem;font-weight:700;color:var(--coral-deep);}
.oi-group-error[hidden]{display:none;}
.oi-option{display:flex;align-items:center;gap:.75rem;padding:.75rem 0;border-top:1px solid rgba(28,22,17,.07);cursor:pointer;min-height:48px;}
.oi-option:first-of-type{border-top:none;}
.oi-option input{width:20px;height:20px;accent-color:var(--maroon);flex:none;margin:0;}
.oi-option-label{flex:1;font-size:.95rem;}
.oi-option-price{font-size:.88rem;color:var(--muted-light);font-variant-numeric:tabular-nums;white-space:nowrap;}
.oi-option.is-soldout{opacity:.5;cursor:not-allowed;}
.oi-option:has(input:checked) .oi-option-label{font-weight:700;}
.oi-note{margin-top:.4rem;}
.oi-optional{font-weight:600;color:var(--muted-light);font-size:.75rem;margin-left:.3rem;}
.oi-note textarea{resize:vertical;min-height:64px;}
.oi-item-foot{
display:flex;align-items:center;gap:.8rem;flex:none;padding:.9rem 1.3rem calc(.9rem + env(safe-area-inset-bottom));
border-top:1px solid rgba(28,22,17,.1);background:var(--paper);
}
.oi-item-foot .qty-stepper button{width:40px;height:40px;font-size:1.15rem;}
.oi-item-foot .qty-stepper input{width:40px;}
.oi-add{flex:1;justify-content:center;padding:.95rem 1rem;}
.oi-cart-sheet .order-summary{margin:0;border-radius:0;flex:1;overflow-y:auto;}
.oi-cart-sheet .oi-cart > h3{display:none;} /* the sheet header already says it */
.oi-cart-sheet .oi-sheet-head{background:var(--night);color:var(--paper);padding-bottom:.6rem;}
.oi-cart-sheet .oi-close{background:rgba(248,242,232,.12);color:var(--paper);}
/* ---------- Checkout (/order/checkout) ---------- */
.checkout-back{display:inline-block;color:var(--muted-dark);text-decoration:none;font-weight:600;font-size:.88rem;margin-bottom:.8rem;}
.checkout-back:hover{color:var(--gold);}
.checkout-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(1.5rem,3vw,2.5rem);align-items:start;padding:clamp(2rem,4vw,3rem) 0 clamp(3rem,6vw,4.5rem);}
.checkout-summary{position:sticky;top:100px;}
@media (max-width:900px){
.checkout-layout{grid-template-columns:1fr;}
/* The total is the first thing people check on a phone. */
.checkout-summary{position:static;order:-1;}
}
.checkout-main{display:flex;flex-direction:column;gap:1.2rem;min-width:0;}
.checkout-step{background:#fff;border:1px solid rgba(28,22,17,.07);border-radius:22px;padding:clamp(1.2rem,3vw,1.8rem);box-shadow:0 14px 30px -24px rgba(28,22,17,.25);}
.checkout-step h2{font-size:1.2rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem;}
.checkout-num{width:28px;height:28px;border-radius:50%;background:var(--night);color:var(--gold);display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;flex:none;}
.checkout-hint{font-size:.86rem;color:var(--amber-text);font-weight:600;margin:-.4rem 0 1rem;}
.checkout-choice-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:1rem;}
@media (max-width:420px){.checkout-choice-row{grid-template-columns:1fr;}}
.checkout-choice{display:flex;align-items:center;gap:.7rem;border:1.5px solid rgba(28,22,17,.14);border-radius:16px;padding:.9rem 1rem;cursor:pointer;background:var(--paper);}
.checkout-choice[hidden]{display:none;}
.checkout-choice input{width:20px;height:20px;accent-color:var(--maroon);margin:0;flex:none;}
.checkout-choice span{display:flex;flex-direction:column;line-height:1.3;}
.checkout-choice small{color:var(--muted-light);font-size:.8rem;}
.checkout-choice:has(input:checked){border-color:var(--maroon);background:#fff;box-shadow:0 0 0 3px rgba(134,101,47,.1);}
.checkout-choice:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:2px;}
.checkout-later .form-row{margin-bottom:.4rem;}
.checkout-tips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem;}
@media (max-width:520px){.checkout-tips{grid-template-columns:repeat(3,minmax(0,1fr));}}
.checkout-tip{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;min-height:58px;border:1.5px solid rgba(28,22,17,.14);border-radius:14px;cursor:pointer;background:var(--paper);text-align:center;padding:.4rem;}
.checkout-tip input{position:absolute;opacity:0;pointer-events:none;}
.checkout-tip-label{font-weight:700;font-size:.92rem;}
.checkout-tip-amt{font-size:.74rem;color:var(--muted-light);font-variant-numeric:tabular-nums;}
.checkout-tip:has(input:checked){border-color:var(--maroon);background:var(--maroon);color:var(--paper);}
.checkout-tip:has(input:checked) .checkout-tip-amt{color:rgba(248,242,232,.8);}
.checkout-tip:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:2px;}
.checkout-custom-tip{margin:1rem 0 0;max-width:220px;}
.checkout-money-input{position:relative;}
.checkout-money-input span{position:absolute;left:.95rem;top:50%;transform:translateY(-50%);color:var(--muted-light);font-weight:700;}
.checkout-money-input input{padding-left:1.8rem !important;}
.checkout-wallet{height:48px;margin-bottom:.4rem;}
.checkout-or{display:flex;align-items:center;gap:.8rem;color:var(--muted-light);font-size:.8rem;margin:.8rem 0;}
.checkout-or::before,.checkout-or::after{content:"";flex:1;height:1px;background:rgba(28,22,17,.12);}
.checkout-card{min-height:90px;}
.checkout-secure{display:flex;align-items:center;gap:.45rem;font-size:.78rem;color:var(--muted-light);margin:.2rem 0 1.1rem;}
.checkout-pay{width:100%;justify-content:center;padding:1.1rem;font-size:.95rem;}
.checkout-pay:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}
.checkout-fineprint{font-size:.78rem;color:var(--muted-light);margin:.9rem 0 0;text-align:center;}
.checkout-fineprint a{color:var(--maroon);}
.checkout-edit{display:inline-block;margin-top:.9rem;color:var(--gold);font-weight:700;font-size:.85rem;}
.checkout-empty,.checkout-closed{text-align:center;padding:2rem;}
.checkout-empty h2{font-size:1.4rem;margin-bottom:.4rem;}
.checkout-empty p{color:var(--muted-light);margin:0 0 1.2rem;}
.checkout-closed a{color:var(--maroon);font-weight:700;}
.oi-line-name-static{font-weight:700;font-size:.92rem;color:var(--paper);}
.form-row input[aria-invalid="true"]{border-color:var(--coral-deep);}
/* ---------- Order confirmation ---------- */
.confirm-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(1.5rem,3vw,2.5rem);align-items:start;}
@media (max-width:900px){.confirm-layout{grid-template-columns:1fr;}}
.confirm-main{display:flex;flex-direction:column;gap:1.2rem;}
.confirm-ticket{background:linear-gradient(120deg,var(--maroon-deep),var(--maroon) 75%);color:var(--paper);border-radius:22px;padding:clamp(1.5rem,4vw,2.2rem);}
.confirm-ticket .label{color:var(--gold);}
.confirm-ref{font-family:var(--font-display);font-weight:800;font-size:clamp(2.6rem,8vw,3.8rem);letter-spacing:.02em;line-height:1;margin:.5rem 0 .8rem;}
.confirm-ticket p{margin:0;color:rgba(248,242,232,.9);}
.confirm-when{font-family:var(--font-display);font-weight:800;font-size:1.3rem;margin:0 0 .6rem;}
.confirm-address{color:var(--muted-light);margin:0 0 1.1rem;}
.oi-dinein-switch{margin:.9rem 0 0;font-size:.9rem;color:var(--muted-dark);}
.oi-dinein-switch a{color:var(--gold);font-weight:700;}
.oi-dinein-closed{margin:.8rem 0 0;color:var(--coral);font-weight:700;max-width:52ch;}
.checkout-table{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}
.checkout-table-num{font-family:var(--font-display);font-weight:800;font-size:2rem;line-height:1;color:var(--maroon-deep);}
.checkout-table p{margin:0;}
.oi-paused{margin:1.5rem 0 0;}
.oi-paused a{color:inherit;font-weight:700;}
.confirm-rewards p{margin:.2rem 0 1rem;}
/* ---------- Checkout: rewards ---------- */
.checkout-rewards{margin-top:.6rem;padding:1rem 1.1rem;border-radius:16px;background:var(--paper);border:1.5px dashed rgba(134,101,47,.35);}
.checkout-rewards-head{display:flex;flex-wrap:wrap;gap:.2rem .7rem;align-items:baseline;margin:0 0 .3rem;}
.checkout-rewards-head span{color:var(--maroon);font-weight:700;font-size:.9rem;}
.checkout-rewards-member{font-size:.84rem;color:var(--muted-light);margin:0 0 .7rem;}
.checkout-rewards-join{display:flex;gap:.65rem;align-items:flex-start;cursor:pointer;font-size:.9rem;}
.checkout-rewards-join input{width:20px;height:20px;accent-color:var(--maroon);margin:.1rem 0 0;flex:none;}
.checkout-rewards-join small{display:block;color:var(--muted-light);font-size:.76rem;margin-top:.25rem;}
.confirm-points{font-family:var(--font-display);font-weight:800;font-size:1.25rem;color:var(--gold);margin:.3rem 0 .8rem;}
/* ---------- Breakfast availability ---------- */
.oi-breakfast-note{font-weight:600;}
.oi-breakfast-note.is-later{color:var(--amber-text);}
.oi-item-note{margin:-.4rem 0 1rem;padding:.6rem .8rem;border-radius:12px;background:rgba(237,195,109,.12);color:var(--ink);font-size:.86rem;font-weight:600;}
.oi-cart-note{font-size:.8rem;color:var(--gold);margin:-.4rem 0 1rem;}
/* "Winton Ave only" on dishes served at one location. Bronze on cream: 4.8:1. */
.only-at-badge{display:inline-block;vertical-align:middle;margin-left:.4rem;padding:.1rem .5rem;border-radius:999px;border:1px solid currentColor;color:var(--maroon);font:700 .68rem/1.4 var(--font-body);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;}
.dish-card .only-at-badge{color:var(--gold);} /* dark card: gold on night-2 */
/* ---------- Catering photos ---------- */
/* Photos are 450x600, so tiles stay at or under ~225px wide to look sharp at 2x. */
.catering-photos{background:#fff;padding-bottom:var(--sp-flow);}
.catering-photo-row{list-style:none;margin:var(--sp-tight) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.7rem,1.6vw,1rem);}
.catering-photo-row img{display:block;width:100%;aspect-ratio:3/4;height:auto;object-fit:cover;border-radius:18px;background:var(--paper);}
.catering-photo-row:focus-visible{outline:3px solid var(--maroon);outline-offset:4px;border-radius:18px;}
@media (max-width:900px){
.catering-photo-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding:0 16px .6rem;scroll-padding-inline:16px;}
.catering-photo-row li{flex:0 0 min(62vw,240px);scroll-snap-align:start;}
}
/* ---------- About page ---------- */
.about-locations{background:#fff;}
.about-loc-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(1rem,2.5vw,1.6rem);margin-top:var(--sp-flow);}
.about-loc{position:relative;display:block;border-radius:22px;overflow:hidden;aspect-ratio:16/10;text-decoration:none;color:var(--paper);background:var(--night-2);}
.about-loc img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.about-loc:hover img{transform:scale(1.04);}
.about-loc-text{position:absolute;inset:auto 0 0 0;padding:1.4rem 1.5rem;display:grid;gap:.2rem;background:linear-gradient(transparent, rgba(21,17,14,.92) 45%);}
.about-loc-text strong{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.4rem,3vw,1.9rem);letter-spacing:.01em;}
.about-loc-more{color:var(--gold);font-weight:700;font-size:.9rem;margin-top:.3rem;}
/* "As featured on" strip. Bronze label on white: 5.3:1. */
.about-press{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.4rem 1rem;margin:var(--sp-flow) 0 0;padding:1.1rem 1.4rem;border:1px solid rgba(28,22,17,.12);border-radius:18px;background:var(--paper);text-align:center;}
.about-press-label{font:700 .78rem/1.4 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--maroon);}
.about-press a{font-family:var(--font-display);font-weight:600;font-size:clamp(1.05rem,2vw,1.25rem);color:var(--ink);text-decoration:none;min-height:44px;display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.2rem .6rem;}
.about-press a:hover .about-press-meta,.about-press a:focus-visible .about-press-meta{text-decoration:underline;}
.about-press-meta{font:700 .9rem/1.4 var(--font-body);color:var(--amber-text);}
.about-photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;}
.about-photo-pair img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px;display:block;}
@media (prefers-reduced-motion:reduce){.about-loc img{transition:none;}}
/* Catering: "Which El Taquito?" radio group. */
.loc-choice{border:0;padding:0;margin:0 0 1rem;}
.loc-choice legend{font-weight:700;font-size:.88rem;margin-bottom:.45rem;padding:0;}
.loc-choice label{display:flex;align-items:center;gap:.55rem;min-height:40px;font-weight:600;cursor:pointer;}
.loc-choice input{width:20px;height:20px;accent-color:var(--maroon);margin:0;}
/* Moving strips: pause control (WCAG 2.2.2), plus pause on hover/focus. */
.marquee-band, .photo-marquee{position:relative;}
.marquee-band.is-paused .marquee-track, .photo-marquee.is-paused .photo-marquee-track,
.marquee-band:hover .marquee-track, .photo-marquee:hover .photo-marquee-track,
.marquee-band:focus-within .marquee-track, .photo-marquee:focus-within .photo-marquee-track{animation-play-state:paused;}
.marquee-toggle{
position:absolute;right:.75rem;bottom:.5rem;z-index:2;min-height:36px;min-width:64px;padding:.35rem .9rem;
border:1px solid rgba(237,195,109,.6);border-radius:999px;background:rgba(21,17,14,.88);color:var(--gold);
font:700 .78rem var(--font-body);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;
}
.marquee-toggle:hover{background:var(--night);}
@media (prefers-reduced-motion:reduce){.marquee-toggle{display:none;}} /* nothing moves, nothing to pause */
/* Forms: required-fields note and the error summary (WCAG 3.3.1/3.3.2). */
.form-required-note{margin:0 0 1rem;font-size:.85rem;color:var(--muted-light);}
.form-error-summary{margin-bottom:1.2rem;}
.form-error-summary p{margin:0 0 .4rem;}
.form-error-summary ul{margin:0;padding-left:1.2rem;}
.form-error-summary a{color:inherit;text-decoration:underline;font-weight:700;}
.alert[tabindex="-1"]:focus{outline:3px solid var(--maroon);outline-offset:3px;}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"]{border-color:#8f1d1d;border-width:2px;}
/* Headings promoted to h2 for a correct outline (no h1 -> h3 skips), styled
exactly as the h3s they replaced. */
.order-teaser h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.25rem,2.6vw,1.6rem);margin-top:.4rem;color:var(--paper);text-transform:none;letter-spacing:.005em;}
.good-to-know h2{font-size:.95rem;margin-bottom:.5rem;text-transform:none;letter-spacing:.005em;}
.form-card-heading{font-size:1.25rem;text-transform:none;letter-spacing:.005em;}
.order-summary h2{color:var(--paper);font-size:1.05rem;margin-bottom:.9rem;text-transform:none;letter-spacing:.005em;}
/* =====================================================================
Oct 2026 design pass: location pages, home locations, menu rows,
phone sticky bar.
===================================================================== */
/* Open/closed right now. Green dot = open; bronze on cream passes AA. */
.open-status{display:inline-flex;align-items:center;gap:.45rem;font:700 .8rem/1.3 var(--font-body);letter-spacing:.02em;color:var(--amber-text);}
.open-status::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:currentColor;opacity:.55;flex:none;}
.open-status.is-open{color:#2f6b1f;}
.open-status.is-open::before{background:#3f9a2a;opacity:1;box-shadow:0 0 0 3px rgba(63,154,42,.18);}
/* ---------- Location page ---------- */
.loc-hero-facts{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:1.1rem 0 0;color:var(--muted-dark);font-size:.95rem;}
.loc-hero-facts a{color:var(--paper);font-weight:700;}
.loc-hero .open-status{color:var(--gold);}
.loc-hero .open-status.is-open{color:#9fdb83;}
.loc-hero .open-status.is-open::before{background:#7fd65c;box-shadow:0 0 0 3px rgba(127,214,92,.2);}
.loc-visit-card{background:#fff;border-radius:22px;border:1px solid rgba(28,22,17,.06);box-shadow:0 14px 30px -22px rgba(28,22,17,.3);padding:clamp(1.3rem,3vw,1.9rem);}
.loc-visit-card h2{font-size:clamp(1.4rem,2.6vw,1.8rem);margin-bottom:.9rem;}
.loc-visit-line{display:flex;gap:.6rem;align-items:flex-start;margin:0 0 .5rem;}
.loc-visit-line svg{width:18px;height:18px;flex:none;margin-top:.2rem;color:var(--maroon);}
.loc-visit-line a{color:var(--ink);font-weight:600;}
.loc-hours-title{font-family:var(--font-body);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--maroon);margin:1.5rem 0 .4rem;}
.loc-hours{width:100%;border-collapse:collapse;font-size:.95rem;font-variant-numeric:tabular-nums;}
.loc-hours th,.loc-hours td{padding:.5rem .6rem;border-bottom:1px solid rgba(28,22,17,.07);}
.loc-hours th{text-align:left;font-weight:600;}
.loc-hours td{text-align:right;}
.loc-hours tr.today{background:rgba(237,195,109,.2);}
.loc-hours tr.today th,.loc-hours tr.today td{font-weight:700;color:var(--ink);}
.loc-hours-today{display:inline-block;margin-left:.35rem;padding:.05rem .45rem;border-radius:999px;background:var(--ink);color:var(--gold);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;vertical-align:middle;}
.loc-visit-foot{margin:1rem 0 0;font-size:.88rem;font-weight:700;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.25rem;}
.loc-visit-foot a{color:var(--maroon);}
/* The map fills its column. Fixed: the iframe's height:100% resolved against a
min-height parent, so it collapsed to 150px and left a blank panel. */
.loc-detail{align-items:stretch;}
.loc-detail .contact-map-panel{display:flex;}
.loc-detail .contact-map{flex:1;height:auto;min-height:420px;}
.loc-detail .contact-map iframe{position:absolute;inset:0;}
@media (max-width:860px){.loc-detail .contact-map{min-height:280px;}}
.loc-about{background:#fff;}
.loc-about-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:clamp(1.6rem,4vw,3.5rem);align-items:start;}
@media (max-width:860px){.loc-about-grid{grid-template-columns:1fr;}}
.loc-about .label{color:var(--maroon);}
.loc-about h2{font-size:clamp(1.8rem,3.6vw,2.5rem);margin:.5rem 0 .3rem;}
.loc-about .body-copy{color:var(--muted-light);font-size:1.04rem;max-width:58ch;margin:1rem 0 0;}
.loc-offer{background:var(--paper);border-radius:22px;padding:clamp(1.3rem,3vw,1.8rem);}
.loc-offer h3{font-family:var(--font-body);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--maroon);margin:0 0 .7rem;}
.loc-offer h3:not(:first-child){margin-top:1.4rem;}
.loc-features{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;}
.loc-features li{display:flex;gap:.6rem;align-items:flex-start;font-weight:600;}
.loc-features svg{width:18px;height:18px;flex:none;margin-top:.15rem;color:#3f8a2a;}
.loc-apps{display:flex;flex-wrap:wrap;gap:.5rem;}
.loc-apps .pill{padding:.55rem 1rem;font-size:.78rem;}
.loc-dishes-sub{font-family:var(--font-body);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--maroon);margin:2rem 0 0;}
.loc-dishes-sub + .dish-list{margin-top:.4rem;}
.loc-others{padding-top:0;}
.loc-mini{display:grid;grid-template-columns:minmax(0,260px) 1fr;background:#fff;border-radius:22px;overflow:hidden;text-decoration:none;color:var(--ink);border:1px solid rgba(28,22,17,.06);box-shadow:0 14px 30px -22px rgba(28,22,17,.3);transition:transform .2s ease, box-shadow .2s ease;}
.loc-mini:hover{transform:translateY(-3px);box-shadow:0 22px 38px -24px rgba(28,22,17,.4);}
.loc-mini-img{display:block;min-height:170px;background:var(--night-2);}
.loc-mini-img picture,.loc-mini-img img{display:block;width:100%;height:100%;object-fit:cover;}
.loc-mini-body{display:flex;flex-direction:column;gap:.3rem;padding:1.3rem 1.5rem;justify-content:center;}
.loc-mini-body strong{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.3rem,2.4vw,1.6rem);letter-spacing:.01em;}
.loc-mini-body > span{color:var(--muted-light);}
.loc-mini-body .open-status{color:var(--amber-text);}
.loc-mini-body .open-status.is-open{color:#2f6b1f;}
.loc-mini-more{color:var(--maroon) !important;font-weight:700;margin-top:.3rem;}
@media (max-width:620px){.loc-mini{grid-template-columns:1fr;}.loc-mini-img{aspect-ratio:16/9;min-height:0;}}
@media (prefers-reduced-motion:reduce){.loc-mini{transition:none;}.loc-mini:hover{transform:none;}}
/* Location cards (/locations): buttons share the row instead of stacking ragged. */
.loc-card-actions .pill{flex:1 1 9rem;justify-content:center;}
/* ---------- Home: both restaurants ---------- */
.home-locs{background:var(--paper);}
.home-loc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.2rem,3vw,2rem);}
@media (max-width:820px){.home-loc-grid{grid-template-columns:1fr;}}
.home-loc{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);background:#fff;border-radius:22px;overflow:hidden;border:1px solid rgba(28,22,17,.06);box-shadow:0 14px 30px -22px rgba(28,22,17,.3);}
.home-loc-img{display:block;background:var(--night-2);min-height:100%;}
.home-loc-img picture,.home-loc-img img{display:block;width:100%;height:100%;object-fit:cover;}
.home-loc-body{display:flex;flex-direction:column;gap:.35rem;padding:1.3rem 1.4rem 1.4rem;}
.home-loc h3{font-size:clamp(1.5rem,2.6vw,1.9rem);text-transform:uppercase;margin-top:.2rem;}
.home-loc h3 a{color:var(--ink);text-decoration:none;}
.home-loc h3 a:hover{color:var(--maroon);}
.home-loc-tagline{margin:0;color:var(--muted-light);font-size:.92rem;}
.home-loc-line{margin:0;font-size:.92rem;}
.home-loc-line a{color:var(--ink);font-weight:700;}
.home-loc-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;padding-top:.8rem;}
.home-loc-actions .pill{flex:1 1 9rem;justify-content:center;padding-inline:1rem;}
@media (max-width:1060px) and (min-width:821px){.home-loc{grid-template-columns:1fr;}.home-loc-img{aspect-ratio:16/9;}}
@media (max-width:520px){.home-loc{grid-template-columns:1fr;}.home-loc-img{aspect-ratio:16/9;}}
/* Location photos: keep the subject in frame in every crop (Location::imageStyle). */
:is(.loc-hero .menu-header-bg,.home-loc-img,.loc-card-img,.loc-mini-img,.about-loc) img{object-position:var(--img-pos,50% 50%);}
/* ---------- Menu: one row per dish ---------- */
.dish-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2.5rem;margin-top:1.4rem;}
@media (max-width:760px){.dish-list{grid-template-columns:1fr;}}
.dish-row{display:flex;gap:1rem;align-items:flex-start;padding:1rem 0;border-bottom:1px dashed rgba(28,22,17,.15);}
.dish-row-img{flex:none;width:104px;height:104px;border-radius:16px;overflow:hidden;background:var(--night-3);}
.dish-row-img picture,.dish-row-img img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(1.08) contrast(1.05);}
@media (max-width:560px){.dish-row-img{width:84px;height:84px;border-radius:14px;}}
.dish-row-body{flex:1;min-width:0;}
.dish-row-head{display:flex;justify-content:space-between;align-items:baseline;gap:.9rem;}
.dish-row-name{font-family:var(--font-body);font-size:1.02rem;font-weight:700;line-height:1.3;text-transform:none;letter-spacing:0;color:var(--ink);}
.dish-row-price{margin:0;flex:none;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--maroon);}
.dish-row-price b{font-weight:700;}
.dish-row-price.is-sizes{display:grid;gap:.05rem;font-size:.82rem;color:var(--muted-light);line-height:1.35;}
.dish-row-price.is-sizes b{color:var(--maroon);}
.dish-row-desc{margin:.3rem 0 0;font-size:.88rem;line-height:1.5;color:var(--muted-light);}
.dish-row .diet-badges{margin-top:.4rem;}
.dish-row .diet-badge.diet-veg{color:#5a9c1e;}
.dish-row .diet-badge.diet-vegan{color:#4a7d18;}
.dish-row .diet-badge.diet-gf{color:#2f7d95;}
.dish-row .diet-badge.diet-spice{color:#a8331a;}
.dish-row .only-at-badge{margin-left:.35rem;}
/* Category banners: a header, not a hero (each one used to cost 340px). */
.cat-banner{min-height:clamp(150px,19vw,250px);}
.menu-category{padding:clamp(1.8rem,3.5vw,2.6rem) 0;}
/* Category tabs: scroll sideways without a scrollbar track on desktop browsers. */
.menu-tabs{scrollbar-width:none;}
.menu-tabs::-webkit-scrollbar{display:none;}
/* Favorites on phones: two small cards a row instead of one huge card each
(eight dishes went from ~4,000px to ~1,100px). Price stays on the photo. */
@media (max-width:560px){
.menu-grid.menu-grid-compact{--cols:2;--grid-gap:.75rem;}
.menu-grid-compact .dish-card{border-radius:16px;}
.menu-grid-compact .dish-card figure{aspect-ratio:1/1;}
.menu-grid-compact .dish-body{padding:.7rem .75rem .85rem;}
.menu-grid-compact .dish-body h3{font-size:.95rem;margin:0;}
.menu-grid-compact .dish-body > p:not(.sr-only),
.menu-grid-compact .dish-body .diet-badges{display:none;}
.menu-grid-compact .dish-tag{font-size:.6rem;padding:.2rem .5rem;}
.menu-grid-compact .dish-price-pill{font-size:.75rem;padding:.2rem .6rem;}
.menu-grid-compact .only-at-badge{display:block;width:max-content;margin:.3rem 0 0;}
}
/* ---------- Phone sticky bar: main action, menu, call/directions ---------- */
.mobile-cta-icon{display:none;}
@media (max-width:720px){
.mobile-cta{gap:.55rem;}
.mobile-cta .pill{min-width:0;padding-inline:.8rem;letter-spacing:.04em;}
.mobile-cta-menu{border-color:var(--night-3) !important;color:var(--paper) !important;}
.mobile-cta-icon{
display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border-radius:50%;
border:1px solid var(--night-3);color:var(--gold);background:var(--night-2);
}
.mobile-cta-icon svg{width:20px;height:20px;}
.mobile-cta-icon:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
}
/* Catering band on phones: the two buttons match instead of stacking ragged. */
@media (max-width:560px){.catering .hero-ctas .pill{flex:1 1 100%;justify-content:center;}}
/* Footer brand card: social icons sit under the blurb, not at the bottom of a tall empty card. */
.footer-brand-card{justify-content:flex-start;gap:1.4rem;}
/* Inside "Only at Winton Ave" the per-dish badge just repeats the heading. */
.loc-dishes-sub + .dish-list .only-at-badge{display:none;}
/* ---- Cookie consent (consent.js) ----
A card in the corner, not a modal: the page behind stays usable and
nothing is tracked until "Accept". On phones it sits above the sticky
call-to-action bar instead of covering it. */
.consent{
position:fixed;z-index:70;left:clamp(.75rem,2vw,1.5rem);bottom:clamp(.75rem,2vw,1.5rem);
width:min(26rem,calc(100% - 1.5rem));padding:1.2rem 1.3rem 1.3rem;
background:var(--night-2);color:var(--paper);border:1px solid var(--night-3);border-radius:14px;
box-shadow:0 22px 48px -18px rgba(0,0,0,.65);font-size:.92rem;line-height:1.5;
}
.consent[hidden]{display:none;}
.consent-title{font-family:var(--font-display);font-size:1.15rem;letter-spacing:.02em;text-transform:uppercase;margin:0 0 .45rem;color:var(--gold);}
.consent-title:focus{outline:none;}
.consent-title:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.consent p{margin:0 0 .6rem;color:var(--muted-dark);}
.consent a{color:var(--gold);text-decoration:underline;text-underline-offset:2px;}
.consent-gpc{font-size:.84rem;}
.consent-actions{display:flex;gap:.6rem;margin-top:.9rem;}
.consent-btn{flex:1;justify-content:center;min-height:44px;padding:.7rem 1rem;border:2px solid rgba(248,242,232,.4);}
.consent-btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
@media (max-width:720px){
.consent{left:.75rem;right:.75rem;width:auto;bottom:calc(.75rem + env(safe-area-inset-bottom));}
.mobile-cta:not([hidden]) ~ .consent{bottom:calc(76px + env(safe-area-inset-bottom) + .6rem);}
}
@media (prefers-reduced-motion:no-preference){
.consent:not([hidden]){animation:consent-in .25s ease-out;}
@keyframes consent-in{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
}
.bottom-bar-btn{font-size:.9rem;opacity:.85;cursor:pointer;padding:0;text-decoration:inherit;}
.bottom-bar-btn:hover{opacity:1;color:var(--coral);}