/* ===== Tokens ===== */
:root{
  --canvas:#201510;
  --panel:#2b1e16;
  --panel-2:#332417;
  --accent:#d97b3f;
  --accent-hover:#e8935a;
  --accent-muted:rgba(217,123,63,.35);
  --text-primary:#f5ece1;
  --text-secondary:#cbb9a8;
  --line:rgba(217,123,63,.25);
  --open:#6fce87;          /* open: a green that still belongs to the warm ground */
  --open-bg:rgba(111,206,135,.16);
  --closed:#f0705e;        /* closed */
  --closed-bg:rgba(240,112,94,.16);
  --font-display:'Suez One', 'Georgia', serif;
  --font-body:'Rubik', 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --ease-out: cubic-bezier(.16,.84,.32,1);
  --ease-inout: cubic-bezier(.65,0,.35,1);
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
}

*{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{background:var(--canvas);font-size:100%;scroll-behavior:smooth}
section[id], main[id]{ scroll-margin-top:clamp(5.5rem,12vh,7.5rem) }
html.no-smooth{ scroll-behavior:auto }   /* set when the visitor turns motion off */
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }
body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);font-weight:400;margin:0 0 .4em;text-wrap:balance}
p{margin:0 0 1em}
::selection{background:var(--accent);color:#1a1108}

/* one fixed background environment: slow drifting glow */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(ellipse 60% 40% at 20% 10%, rgba(217,123,63,.08), transparent 60%),
    radial-gradient(ellipse 50% 50% at 85% 80%, rgba(217,123,63,.06), transparent 60%),
    var(--canvas);
  animation: driftGlow 70s ease-in-out infinite alternate;
}
@keyframes driftGlow{
  0%{ background-position:0 0, 0 0; }
  100%{ background-position:2% 3%, -2% -3%; }
}

.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;
}

.skip-link{
  position:absolute; right:1rem; top:-3rem;
  background:var(--accent); color:#1a1108; padding:.6em 1em;
  border-radius:8px; z-index:200; transition:top .2s var(--ease-out);
  font-weight:600;
}
.skip-link:focus{ top:1rem; }
.skip-a11y{ right:11.5rem; font-family:inherit; border:0; cursor:pointer; font-size:1rem; }
@media (max-width:480px){ .skip-a11y{ right:1rem; }  .skip-a11y:focus{ top:4.2rem; } }

:focus-visible{
  outline:3px solid #fff3e4;          /* light core, readable on the accent */
  outline-offset:2px;
  box-shadow:0 0 0 6px rgba(20,12,8,.85);   /* dark halo, readable on light ground */
  border-radius:6px;
}
@media (forced-colors:active){
  .star-half{ background:none; color:CanvasText; -webkit-text-fill-color:CanvasText; }
  :focus-visible{ outline:3px solid Highlight; box-shadow:none; }
}

/* ===== Nav (a centred floating bar) ===== */
.site-nav{
  position:fixed; inset-inline:0; top:clamp(.6rem,1.6vh,1.1rem); z-index:100;
  display:flex; justify-content:center; padding:0 1rem; pointer-events:none;
}
.nav-inner{
  pointer-events:auto;
  display:flex; align-items:center; gap:clamp(1rem,2.5vw,2rem);
  max-width:100%;
  padding:.5rem .6rem .5rem 1.2rem;
  border-radius:100px;
  border:1px solid rgba(217,123,63,.22);
  background:rgba(27,18,13,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 12px 40px rgba(0,0,0,.4);
}
.brand-mark{
  display:flex; align-items:center; gap:.5em;
  font-family:var(--font-display); font-weight:400; font-size:1.05rem;
  text-decoration:none; color:var(--text-primary); white-space:nowrap;
}
.brand-mark svg{ width:24px; height:24px; fill:var(--accent); flex:none; }
.site-nav nav{ display:flex; align-items:center; gap:clamp(.8rem,1.8vw,1.5rem); }
.site-nav nav a{ text-decoration:none; color:var(--text-secondary); font-size:.95rem; white-space:nowrap; transition:color .2s var(--ease-out); }
.site-nav nav a:hover{ color:var(--text-primary); }
.nav-cta{
  background:var(--accent); color:#1a1108 !important; padding:.5em 1.1em;
  border-radius:100px; font-weight:700;
}
@media (max-width:640px){
  .nav-inner{ gap:.7rem; padding:.42rem .45rem .42rem .8rem; }
  /* the flame already goes home, so the text link steps aside when the row is tight */
  .nav-home{ display:none; }
  /* the wordmark leaves the layout but stays the link's accessible name */
  .brand-mark span{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .site-nav nav{ gap:.75rem; }
  .site-nav nav a{ font-size:.82rem; }
  .nav-cta{ padding:.45em .85em; }
}
@media (max-width:370px){
  .nav-inner{ gap:.5rem; padding:.38rem .4rem .38rem .6rem; }
  .site-nav nav{ gap:.55rem; }
  .site-nav nav a{ font-size:.76rem; }
  .nav-cta{ padding:.42em .7em; }
  .brand-mark svg{ width:21px; height:21px; }
}

/* ===== Hero ===== */
.hero{ position:relative; height:600vh; }
/* the home link lands here: the last viewport of the hero, where the journey rests */
.hero-end{ position:absolute; bottom:100vh; inset-inline-start:0; width:1px; height:1px; }
.hero-stage{
  position:sticky; top:0; height:100vh; width:100%; overflow:hidden;
  background:var(--canvas);
}
.poster{
  position:absolute; inset:0;
  background-color:#150d09;
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 65%, rgba(217,123,63,.35), transparent 65%),
    linear-gradient(to bottom, #150d09, #241609 60%, #3a2210);
  background-size:cover; background-position:center;
}
#heroVideo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .6s var(--ease-out);
  will-change:transform; transform:translateZ(0);
}
.hero-stage.video-ready #heroVideo{ opacity:1; }
.ring{
  position:absolute; bottom:2rem; inset-inline-end:2rem;
  width:40px; height:40px; color:var(--accent); transform:rotate(-90deg);
  transition:opacity .3s;
}
.hero-stage.video-ready .ring, .hero-stage.video-failed .ring{ opacity:0; pointer-events:none; }

.scrim{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,7,5,0) 35%,rgba(10,7,5,.6) 100%);
}

.band{
  position:absolute; inset-inline:0; top:0; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  text-align:center; padding:clamp(5rem,15vh,10rem) 1.25rem 0;
  opacity:0; pointer-events:none;
}
.hero-stage.at-end .band-settle{ pointer-events:auto; }
.band::before{
  content:""; position:absolute; inset:-4%; pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 78% 46% at 50% 24%,rgba(5,3,2,.7) 0%,rgba(5,3,2,.48) 46%,rgba(5,3,2,0) 76%);
}
.band-settle::before{
  background:radial-gradient(ellipse 86% 52% at 50% 28%,rgba(5,3,2,.74) 0%,rgba(5,3,2,.5) 44%,rgba(5,3,2,0) 78%);
}
.band .line, .band .settle-title, .band .settle-sub, .band .settle-cta{
  position:relative; z-index:1;
}
.band .visual{
  font-family:var(--font-display); font-weight:400; color:#fff8ef;
  font-size:clamp(1.75rem, 5.1vw, 3.5rem); line-height:1.22;
  letter-spacing:-.005em;
  text-shadow:var(--tshadow), 0 0 70px rgba(217,123,63,.38);
  display:inline-block;
}
.band .em{ color:var(--accent); }

.settle-pills{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:.6rem; margin-bottom:1.1rem;
  opacity:clamp(0,var(--k,0)*2.4,1);
  transform:translateY(calc((1 - clamp(0,var(--k,0)*2.4,1))*12px));
}
.settle-eyebrow{
  display:inline-block; margin:0;
  padding:.45em 1.15em; border-radius:100px;
  background:rgba(217,123,63,.16);
  border:1px solid rgba(217,123,63,.5);
  color:#ffd9b8; font-weight:800; font-size:clamp(.82rem,1.6vw,.98rem);
  letter-spacing:.09em;
  text-shadow:0 1px 3px rgba(5,3,2,.9);
}
.settle-title{ font-size:clamp(2.2rem,6.6vw,4.5rem); font-weight:400; text-shadow:var(--tshadow), 0 0 80px rgba(217,123,63,.4); margin-bottom:.3em; }
.settle-sub{
  font-family:var(--font-body); font-weight:600; font-size:1rem; letter-spacing:.06em;
  color:var(--text-secondary); text-shadow:var(--tshadow); margin-bottom:1.3em;
}
.settle-cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* word/char split entrances, driven by --k written from JS */
.band .w{ display:inline-block; }
.band[data-entrance="drift"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*1.9,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-26px));
}
.band[data-entrance="punch"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2,1);
  opacity:var(--kc);
  transform:scale(calc(0.78 + 0.22*var(--kc)));
}
.band-settle .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*1.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*18px));
}
.band-settle .settle-sub{
  opacity:clamp(0,(var(--k,0) - .5)*4,1);
}
.band-settle .settle-cta{
  opacity:clamp(0,(var(--k,0) - .68)*5,1);
  transform:translateY(calc((1 - clamp(0,(var(--k,0) - .68)*5,1))*10px));
}
.band[data-entrance="depth"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*1.8,1);
  opacity:var(--kc);
  transform:scale(calc(0.88 + 0.12*var(--kc)));
}

.cue{
  position:absolute; bottom:1.6rem; inset-inline:0; text-align:center;
  font-family:var(--font-body); font-weight:700; font-size:.82rem;
  letter-spacing:.15em;
  animation:cueBob 2.4s var(--ease-inout) infinite;
}
.cue span{                      /* a small backing, so the hint reads over a bright frame too */
  display:inline-block; padding:.35em .95em; border-radius:100px;
  background:rgba(8,5,3,.62);
  border:1px solid rgba(217,123,63,.28);
  color:#f5ece1;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  text-shadow:0 1px 3px rgba(5,3,2,.9);
}
@keyframes cueBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }
.hero-stage.at-end .cue{ opacity:0; }

/* Static hero for visitors who asked for less motion, and for anyone on a
   metered or very slow connection, who gets the same page without the 4.4MB
   download (JS adds .hero-static for that case). Must match the JS gate. */
@media (prefers-reduced-motion:reduce){
  .hero{ height:100vh; }
  .hero-stage{ position:relative; }
  .poster{ background-image:url('hero-ending.jpg'); }
  #heroVideo, .ring{ display:none; }
  .band{ position:relative; opacity:1 !important; height:auto; }
  .band-1, .band-2, .band-3{ display:none; }
  .band-settle{ position:absolute; inset:0; pointer-events:auto; }
  .band-settle .w{ opacity:1 !important; transform:none !important; }
  .band-settle .settle-sub, .band-settle .settle-cta{ opacity:1 !important; transform:none !important; }
  .cue{ display:none; }
}
.hero.hero-static{ height:100vh; }
.hero-static .hero-stage{ position:relative; }
.hero-static .poster{ background-image:url('hero-ending.jpg'); }
.hero-static #heroVideo, .hero-static .ring{ display:none; }
.hero-static .band{ position:relative; opacity:1 !important; height:auto; }
.hero-static .band-1, .hero-static .band-2, .hero-static .band-3{ display:none; }
.hero-static .band-settle{ position:absolute; inset:0; pointer-events:auto; }
.hero-static .band-settle .w{ opacity:1 !important; transform:none !important; }
.hero-static .band-settle .settle-sub,
.hero-static .band-settle .settle-cta{ opacity:1 !important; transform:none !important; }
.hero-static .cue{ display:none; }
@media (max-height:560px){ .cue{ display:none; } }

/* ===== Sections ===== */
.section{ padding:clamp(4rem,10vw,7rem) clamp(1.25rem,5vw,2.5rem); position:relative; }
.wrap{ max-width:980px; margin:0 auto; }
.kicker{
  font-family:var(--font-body); font-weight:700; color:var(--accent); font-size:.85rem;
  letter-spacing:.14em; margin-bottom:.6em;
}
.lede{ color:var(--text-secondary); font-size:1.15rem; max-width:60ch; }

.story{ background:var(--panel); }
.story h2{ font-size:clamp(1.7rem,4vw,2.6rem); max-width:16ch; }
.story-split{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.story-img{ margin:0; border-radius:16px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.45); }
.story-img img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
@media (max-width:760px){ .story-split{ grid-template-columns:1fr; } }

/* reveal-on-scroll entrances */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ===== Today's dish ===== */
.reveal-section{ text-align:center; background:var(--canvas); }
.reveal-section .lede{ margin-inline:auto; }

.oven{
  position:relative; max-width:34rem; margin:2.5rem auto 1rem;
  border-radius:20px; overflow:hidden;
  border:1px solid var(--line);
  background:var(--panel);
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.oven::after{                      /* warm rim glow, the oven breathing */
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:20px;
  box-shadow:inset 0 0 60px rgba(217,123,63,.28);
  opacity:.7; animation:ovenBreathe 6s var(--ease-inout) -1.2s infinite;
}
@keyframes ovenBreathe{ 0%,100%{ opacity:.5 } 50%{ opacity:.95 } }

.today-dish{
  padding:1.4rem; text-align:start;
}
.dish-img{
  width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  border-radius:12px; margin-bottom:1.1rem;
}
.dish-kicker{ font-family:var(--font-body); font-weight:700; letter-spacing:.1em; color:var(--accent); font-size:.8rem; margin-bottom:.3em; }
.dish-name{ font-family:var(--font-display); font-size:1.6rem; font-weight:400; margin-bottom:.3em; }
.dish-desc{ color:var(--text-secondary); margin:0; }

.ring-arc{ stroke-dashoffset:var(--ld,126); }

/* ===== Menu ===== */
.menu{ background:var(--panel); }
.menu h2{ font-size:clamp(1.7rem,4vw,2.6rem); }
.menu-cats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(1.8rem,4vw,3rem) clamp(2rem,5vw,4rem);
  margin-top:2.5rem;
}
.menu-cat{ break-inside:avoid; }
.cat-title{
  font-family:var(--font-body); font-weight:700; font-size:.8rem;
  letter-spacing:.18em; color:var(--accent); margin:0 0 1rem;
  padding-bottom:.6rem; border-bottom:1px solid var(--line);
}
.dish-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.3rem; }
.dish-head{ display:flex; align-items:baseline; gap:.6rem; }
.dish-title{ font-family:var(--font-display); font-weight:400; font-size:1.18rem; color:var(--text-primary); }
.leader{
  flex:1 1 auto; min-width:1.5rem; align-self:flex-end; margin-bottom:.32em;
  border-bottom:1px dotted rgba(203,185,168,.35);
}
.dish-price{ unicode-bidi:isolate;
  font-family:var(--font-mono); font-size:.9rem; color:var(--accent);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.dish-note{ color:var(--text-secondary); font-size:.94rem; margin:.35em 0 0; max-width:46ch; }
.menu-note{ margin-top:2.2rem; color:var(--text-secondary); font-size:.9rem; }

/* ===== Reviews ===== */
.rating-row{ display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; margin-bottom:2rem; }
.rating-score{ font-family:var(--font-display); font-size:2.5rem; font-weight:400; }
.stars{ color:var(--accent); font-size:1.2rem; letter-spacing:.1em; }

/* A real half star: the glyph is painted by a hard-edged gradient clipped to the
   text, so the fill stops dead in the middle instead of fading the whole star.
   'to left' is physical, so the filled half stays on the side the row starts
   from in RTL. */
.star-half{
  background:linear-gradient(to left, var(--accent) 50%, rgba(217,123,63,.3) 50%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.rating-count{ color:var(--text-secondary); font-size:.9rem; }
.review-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr)); gap:1.3rem; }
.review{
  display:flex; flex-direction:column; gap:.8rem;
  background:var(--panel); border-radius:16px; padding:1.5rem;
  border:1px solid var(--line);
  border-inline-start:3px solid var(--accent);
  transition:transform .3s var(--ease-out), border-color .3s;
}
.review:hover{ border-color:var(--accent-muted); border-inline-start-color:var(--accent); }
.review-head{ display:flex; align-items:center; gap:.7rem; }
.review-avatar{
  width:2.6rem; height:2.6rem; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(217,123,63,.18); border:1px solid rgba(217,123,63,.4);
  color:var(--accent); font-family:var(--font-display); font-weight:400; font-size:1.15rem;
}
.review-name{ margin:0; font-weight:700; font-size:1rem; }
.review-sub{ margin:0; font-size:.8rem; color:var(--text-secondary); }
.review-stars{ margin:0; color:var(--accent); font-size:1.05rem; letter-spacing:.12em; }
.review-stars .star-half{ font-size:inherit; }
.review-text{ margin:0; font-size:1rem; line-height:1.65; flex:1 1 auto; }
.review-scores{
  list-style:none; margin:0; padding:.7rem 0 0; display:flex; flex-wrap:wrap; gap:.5rem .9rem;
  border-top:1px solid var(--line);
  font-size:.82rem; color:var(--text-secondary);
}
.review-scores b{ color:var(--accent); font-family:var(--font-mono); font-weight:500; }
.owner-reply{
  margin:0; padding:.75rem .9rem; border-radius:12px;
  background:rgba(217,123,63,.09);
  font-size:.86rem; color:var(--text-secondary);
}
.owner-reply span{ display:block; color:var(--accent); font-weight:700; font-size:.76rem; margin-bottom:.15em; }

/* ===== Info ===== */
.info-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:1.2rem; margin-top:2rem; align-items:stretch;
}
/* the hours card is naturally the tall one, so it takes a column of its own
   and the rest fill the space instead of stretching around it */
@media (min-width:860px){
  .info-grid{ grid-template-columns:repeat(3,1fr); }
  .info-grid > :nth-child(1){ grid-column:1; grid-row:1; }
  .info-grid > :nth-child(2){ grid-column:2; grid-row:1; }
  .info-grid > .info-hours{ grid-column:3; grid-row:1 / span 2; }
  .info-grid > :nth-child(4){ grid-column:1 / span 2; grid-row:2; }
  .info-grid > :nth-child(4) .ways{ flex-direction:row; flex-wrap:wrap; gap:1.2rem 2rem; }
  .info-grid > :nth-child(4) .ways li{ flex:1 1 12rem; }
}
.info-card{
  background:var(--panel); border-radius:16px; padding:1.4rem;
  border:1px solid var(--line);
  display:flex; flex-direction:column; gap:.55rem;
  transition:transform .3s var(--ease-out), border-color .3s;
}
.info-card:hover{ transform:translateY(-3px); border-color:var(--accent-muted); }
.info-card h3{ display:flex; align-items:center; gap:.45em; }
.info-icon{ width:1.15em; height:1.15em; fill:currentColor; flex:none; }
.info-lead{ margin:0; font-family:var(--font-display); font-size:1.3rem; font-weight:400; color:var(--text-primary); }
.info-lead a{ text-decoration:none; }
.info-lead a:hover{ color:var(--accent); }
.info-actions{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:auto; padding-top:.6rem; }
.info-action{
  font-size:.82rem; font-weight:700; text-decoration:none;
  padding:.5em 1em; border-radius:100px;
  border:1px solid rgba(217,123,63,.4); color:var(--accent);
  transition:background .25s var(--ease-out), color .25s, transform .2s var(--ease-out);
}
.info-action:hover{ background:var(--accent); color:#1a1108; transform:translateY(-1px); }
.info-action-strong{ background:var(--accent); color:#1a1108; }
.info-action-strong:hover{ background:var(--accent-hover); }
.ways{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.ways li{ display:flex; flex-direction:column; }
.way-name{ font-weight:700; font-size:.95rem; }
.way-name::before{ content:"·"; color:var(--accent); margin-inline-end:.4em; }
.way-note{ font-size:.82rem; color:var(--text-secondary); padding-inline-start:.9em; }
.info-card h3{ font-size:1rem; color:var(--accent); margin-bottom:.5em; }
.info-card .link{ text-decoration:underline; text-underline-offset:3px; }
.info-card .fine{ color:var(--text-secondary); font-size:.85rem; }
.tags{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.4rem; }
.tags li{ position:relative; padding-inline-start:1.1em; color:var(--text-secondary); font-size:.95rem; }
.tags li::before{ content:"·"; position:absolute; inset-inline-start:0; color:var(--accent); }
.badge-row{ margin-top:1.5rem; }
.badge-row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.badge{
  display:inline-block; padding:.5em 1em; border-radius:100px;
  background:var(--accent-muted); color:var(--text-primary); font-size:.9rem;
}
.badge-strong{
  background:var(--accent); color:#1a1108; font-weight:700;
}

/* ===== FAQ ===== */
.faq-list{ margin-top:1.5rem; display:flex; flex-direction:column; gap:.7rem; }
.faq-item{
  background:var(--panel); border-radius:12px; padding:1rem 1.3rem;
  border:1px solid var(--line);
}
.faq-item summary{
  cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:1rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; color:var(--accent); flex-shrink:0; }
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ color:var(--text-secondary); margin:.8em 0 0; }

/* ===== Final CTA ===== */
.final-cta{ text-align:center; background:linear-gradient(to bottom, var(--panel), var(--canvas)); }
.final-cta h2{ font-size:clamp(1.9rem,5vw,3rem); }
.final-cta p{ color:var(--text-secondary); max-width:44ch; margin-inline:auto; }

/* ===== Buttons ===== */
.btn{
  font-family:inherit; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.85em 1.6em; border-radius:100px; font-weight:600; text-decoration:none;
  transition:transform .25s var(--ease-out), background .25s, border-color .25s;
  text-shadow:none;
}
.btn-accent{ background:var(--accent); color:#1a1108; }
.btn-accent:hover{ background:var(--accent-hover); transform:translateY(-2px); }
.btn-ghost{ background:transparent; border:1.5px solid rgba(245,236,225,.4); color:var(--text-primary); }
.btn-ghost:hover{ border-color:var(--text-primary); transform:translateY(-2px); }
@media (pointer:coarse){
  .btn{ min-height:44px; }
  .add-btn, .chip, .info-action, .a11y-toggle, .a11y-reset{ min-height:44px; padding-block:.6em; }
  .a11y-btn, .search-clear, .cart-close{ min-width:44px; min-height:44px; }
  .qty button{ min-width:40px; min-height:40px; font-size:1.05rem; }
  .site-nav nav a{ padding-block:.35em; }
}

/* ===== Footer ===== */
.site-footer{
  padding:2.5rem clamp(1.25rem,5vw,2.5rem) 3rem; text-align:center;
  color:var(--text-secondary); font-size:.9rem; border-top:1px solid var(--line);
}
.site-footer .fine{ font-size:.78rem; opacity:.7; max-width:60ch; margin:.6em auto 0; }

/* ===== One living element per section (whisper level) ===== */
.dish::after, .review::after{ content:none; }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  body::before{ animation:none; }
  .reveal{ opacity:1; transform:none; }
}

body.paused *, body.paused *::before, body.paused *::after{
  animation-play-state:paused !important;
}

/* ===== Open / closed status ===== */
.status-pill[hidden]{ display:none; }   /* the flex display must not outrank the hidden attribute */
.status-pill{
  display:inline-flex; align-items:center; gap:.5em;
  margin:0; padding:.45em 1.05em; border-radius:100px;
  font-weight:800; font-size:clamp(.82rem,1.6vw,.98rem); letter-spacing:.04em;
  border:1px solid transparent;
  flex-wrap:wrap; justify-content:center; text-align:center;
}
.status-pill > span{ white-space:nowrap; }   /* wrap between the phrases, never inside one */
.status-pill::before{
  content:""; width:.62em; height:.62em; border-radius:50%;
  background:currentColor; flex:none;
  box-shadow:0 0 0 0 currentColor;
}
.status-pill .status-hours{ font-weight:600; opacity:.92; }
.status-open{ color:var(--open); background:var(--open-bg); border-color:rgba(111,206,135,.5); }
.status-closed{ color:#f58d7e; background:var(--closed-bg); border-color:rgba(240,112,94,.5); }
.status-pill-hero{ text-shadow:0 1px 3px rgba(5,3,2,.9); backdrop-filter:blur(6px); }
.status-open.status-pill-hero::before{ animation:openPulse 2.8s var(--ease-inout) -.6s infinite; }
@keyframes openPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(111,206,135,.55); }
  55%{ box-shadow:0 0 0 .5em rgba(111,206,135,0); }
}
.status-pill-card{ margin-bottom:1rem; }

.info-hours .hours-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.info-hours .hours-list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  font-size:.94rem; color:var(--text-secondary);
  padding:.28em .5em; border-radius:8px;
}
.info-hours .hours-list li.today{
  background:rgba(217,123,63,.12); color:var(--text-primary); font-weight:700;
}
.info-hours .hrs{ font-family:var(--font-mono); font-size:.86rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.info-hours .hrs-closed{ color:var(--closed); font-family:var(--font-body); font-weight:700; }

.dish-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5em; }
.tag{
  font-size:.7rem; font-weight:700; letter-spacing:.04em;
  padding:.25em .7em; border-radius:100px;
  border:1px solid rgba(203,185,168,.28); color:var(--text-secondary);
}
.tag-vegan{ color:var(--open); border-color:rgba(111,206,135,.45); }
.tag-hot{ color:var(--closed); border-color:rgba(240,112,94,.45); }
.tag-top{ color:var(--accent); border-color:rgba(217,123,63,.5); }
.cat-note{ color:var(--text-secondary); font-size:.86rem; margin:-.4rem 0 1rem; }

/* ===== Floating rails ===== */
.rail[hidden], .a11y-panel[hidden], .fab[hidden]{ display:none; }
.rail{
  position:fixed; left:clamp(.7rem,2vw,1.2rem); z-index:90;
  display:flex; flex-direction:column; gap:.7rem;
  opacity:0; transform:translateX(-14px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.rail.visible{ opacity:1; transform:translateX(0); }
.rail-top{ top:clamp(4.6rem,11vh,6.4rem); }
.rail-bottom{ bottom:clamp(.9rem,3vh,1.6rem); }

.fab{
  position:relative;
  width:clamp(44px,5.4vw,52px); height:clamp(44px,5.4vw,52px);
  border-radius:50%; border:1px solid rgba(217,123,63,.35);
  background:rgba(32,21,16,.82);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  color:var(--accent);
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  transition:transform .3s var(--ease-out), border-color .3s, background .3s, color .3s;
  animation:fabFloat 5.5s var(--ease-inout) infinite;
}
.rail-top .fab:nth-child(2){ animation-delay:-1.8s; }
.rail-top .fab:nth-child(3){ animation-delay:-3.6s; }
.rail-bottom .fab:nth-child(2){ animation-delay:-2.6s; }
@keyframes fabFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }

.fab svg{ width:55%; height:55%; fill:currentColor; }
.fab::after{                       /* the glow, pulsing at whisper level */
  content:""; position:absolute; inset:-3px; border-radius:50%;
  box-shadow:0 0 18px 2px rgba(217,123,63,.45);
  opacity:.28; pointer-events:none;
  animation:fabGlow 4.5s var(--ease-inout) -1.4s infinite;
}
@keyframes fabGlow{ 0%,100%{ opacity:.2; } 50%{ opacity:.65; } }
.fab:hover, .fab:focus-visible{
  background:var(--accent); color:#1a1108; border-color:var(--accent);
  transform:translateY(-3px) scale(1.07);
}
.fab:hover::after, .fab:focus-visible::after{ opacity:1; box-shadow:0 0 26px 5px rgba(217,123,63,.6); }
.fab:active{ transform:translateY(-1px) scale(1.02); }

.fab-tip{
  position:absolute; left:calc(100% + .55rem); top:50%;
  transform:translate(-6px,-50%); transform-origin:left center;
  white-space:nowrap; pointer-events:none;
  background:rgba(27,18,13,.94); color:var(--text-primary);
  border:1px solid rgba(217,123,63,.28); border-radius:100px;
  padding:.35em .85em; font-size:.8rem; font-weight:700;
  opacity:0; transition:opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.fab:hover .fab-tip, .fab:focus-visible .fab-tip{ opacity:1; transform:translate(0,-50%); }

.fab-top .arrow-up{ animation:arrowBob 2.6s var(--ease-inout) -.4s infinite; }
@keyframes arrowBob{ 0%,100%{ transform:translateY(1px); } 50%{ transform:translateY(-2px); } }

/* ===== Accessibility panel ===== */
.a11y-panel{
  position:fixed; z-index:120;      /* above the nav pill, which is 100 */
  left:clamp(.7rem,2vw,1.2rem); bottom:calc(clamp(.9rem,3vh,1.6rem) + 2 * clamp(44px,5.4vw,52px) + 1.4rem);
  width:min(19rem, calc(100vw - 1.8rem));
  padding:1rem 1.1rem 1.1rem;
  border-radius:16px; border:1px solid rgba(217,123,63,.3);
  background:rgba(30,20,14,.96);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 22px 50px rgba(0,0,0,.55);
  display:flex; flex-direction:column; gap:.55rem;
  overflow:hidden;            /* the list inside does the scrolling */
}
.a11y-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.a11y-title{ margin:0; font-weight:800; font-size:.95rem; color:var(--accent); }
.a11y-close{
  flex:none; width:1.9rem; height:1.9rem; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--text-primary);
  font-size:1.15rem; line-height:1; font-family:inherit;
}
.a11y-close:hover{ background:rgba(217,123,63,.22); }
.a11y-scroll{
  display:flex; flex-direction:column; gap:.9rem;
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding-inline-end:.25rem;
  /* the list can outrun the panel, so the bottom edge fades to say "there is more" */
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
          mask-image:linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
  scrollbar-width:thin; scrollbar-color:rgba(217,123,63,.5) transparent;
}
/* once it is scrolled to the end there is nothing left to hint at */
.a11y-scroll.at-end{ -webkit-mask-image:none; mask-image:none; }
.a11y-scroll::-webkit-scrollbar{ width:6px; }
.a11y-scroll::-webkit-scrollbar-thumb{ background:rgba(217,123,63,.5); border-radius:100px; }
.a11y-group{ display:flex; flex-direction:column; gap:.4rem; }
.a11y-group-title{
  margin:0 0 .1rem; font-size:.72rem; font-weight:700; letter-spacing:.14em;
  color:var(--text-secondary); text-transform:none;
}
.a11y-note{ margin:0; font-size:.72rem; color:var(--text-secondary); line-height:1.5; }
.a11y-row{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.a11y-label{ font-size:.88rem; color:var(--text-secondary); }
.a11y-controls{ display:flex; align-items:center; gap:.35rem; }
.a11y-value{ font-family:var(--font-mono); font-size:.78rem; color:var(--text-secondary); min-width:3.2em; text-align:center; }
.a11y-btn, .a11y-toggle, .a11y-reset{
  font-family:inherit; cursor:pointer; color:var(--text-primary);
  background:rgba(217,123,63,.14); border:1px solid rgba(217,123,63,.32);
  border-radius:10px; transition:background .25s var(--ease-out), border-color .25s, transform .2s var(--ease-out);
}
.a11y-btn{ width:2.1rem; height:2.1rem; font-weight:800; font-size:.85rem; }
.a11y-toggle, .a11y-reset{ padding:.6em .9em; font-size:.88rem; font-weight:600; text-align:start; }
.a11y-toggle[aria-pressed="true"]{ background:var(--accent); color:#1a1108; border-color:var(--accent); font-weight:800; }
.a11y-btn:hover, .a11y-toggle:hover, .a11y-reset:hover{ background:rgba(217,123,63,.28); transform:translateY(-1px); }
.a11y-btn:disabled{ opacity:.4; cursor:not-allowed; }
.a11y-btn:disabled:hover{ background:rgba(217,123,63,.14); transform:none; }
.a11y-reset{ background:transparent; color:var(--text-secondary); }

/* ===== Accessibility modes ===== */

/* Text spacing, to WCAG 1.4.12. Scoped to running text so the layout holds. */
body.a11y-spacing p, body.a11y-spacing li, body.a11y-spacing .lede,
body.a11y-spacing .dish-note, body.a11y-spacing .review-text,
body.a11y-spacing .legal-body, body.a11y-spacing .faq-answer{
  line-height:1.85;
  letter-spacing:.075em;
  word-spacing:.16em;
}
body.a11y-spacing .legal-body p, body.a11y-spacing .faq-answer p{ margin-bottom:1.6em; }

/* One plain, evenly weighted face instead of the display cut */
body.a11y-readable{ --font-display:var(--font-body); }
body.a11y-readable h1, body.a11y-readable h2, body.a11y-readable h3,
body.a11y-readable .dish-title, body.a11y-readable .cart-title,
body.a11y-readable .line, body.a11y-readable .rating-score{
  font-weight:700; letter-spacing:.005em;
}

/* Grey: the palette goes neutral and the media desaturates. No filter on a
   wrapper, which would trap every position:fixed control on the page. */
body.a11y-mono{
  --accent:#d8d1ca;
  --accent-muted:#a49c95;
  --open:#e4e0db;
  --closed:#c3bbb4;
  --line:rgba(216,209,202,.3);
}
body.a11y-mono img, body.a11y-mono video, body.a11y-mono .poster,
body.a11y-mono .story-media{ filter:grayscale(1); }
body.a11y-mono .btn-accent, body.a11y-mono .chip.is-on,
body.a11y-mono .cart-fab, body.a11y-mono .nav-cta{ color:#14100d; }

/* Headings get a visible frame */
body.a11y-headings h1, body.a11y-headings h2, body.a11y-headings h3,
body.a11y-headings .cat-title{
  outline:2px dashed var(--accent);
  outline-offset:5px;
  border-radius:4px;
}

/* A focus ring nobody can miss, on any background */
body.a11y-focus :focus-visible{
  outline:4px solid #fff3e4 !important;
  outline-offset:3px !important;
  box-shadow:0 0 0 8px rgba(0,0,0,.9) !important;
  border-radius:4px;
}

/* A larger pointer, drawn inline so it needs no extra request */
body.a11y-cursor,
body.a11y-cursor *{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.5 19 12l-6.4 1.3L9.9 20Z' fill='%23fff' stroke='%23111' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3, auto !important;
}
body.a11y-cursor a, body.a11y-cursor button, body.a11y-cursor summary,
body.a11y-cursor [role="button"], body.a11y-cursor input, body.a11y-cursor label{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M9 2.6c.9 0 1.6.7 1.6 1.6v6.2l1-.1c.6 0 1.2.2 1.7.5l4.2 2.6c.8.5 1.1 1.5.8 2.3l-1.3 3.6c-.3.9-1.1 1.4-2 1.4H11c-.7 0-1.3-.3-1.8-.8l-4.4-4.9c-.5-.6-.5-1.6.1-2.2.6-.5 1.5-.5 2.1 0l.4.4V4.2c0-.9.7-1.6 1.6-1.6Z' fill='%23fff' stroke='%23111' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 10 3, pointer !important;
}

body.a11y-contrast{
  --text-primary:#ffffff;
  --text-secondary:#ecdfd2;
  --canvas:#120b07;
  --panel:#1d130d;
  --panel-2:#241810;
  --accent:#ffa566;
  --line:rgba(255,165,102,.55);
}
body.a11y-contrast .dish-note, body.a11y-contrast .lede, body.a11y-contrast .fine{ color:#ecdfd2; }
/* the closed notice keeps its own frame in high contrast, just brighter */
body.a11y-contrast .closed-notice{ color:#ffd9d2; border-color:#ff9c8d; }
body.a11y-links a{ text-decoration:underline; text-underline-offset:3px; }
body.a11y-nomotion *, body.a11y-nomotion *::before, body.a11y-nomotion *::after{
  animation:none !important;
  transition:none !important;
}
@media (prefers-reduced-motion:reduce){
  .fab, .fab::after, .fab-top .arrow-up{ animation:none; }
  .rail{ transition:none; }
}

/* ===== Menu search and filters ===== */
.menu-tools{ margin-top:2rem; display:flex; flex-direction:column; gap:1rem; }
.menu-search{
  position:relative; display:flex; align-items:center; gap:.6rem;
  max-width:26rem; padding:.2rem .9rem;
  border-radius:100px; border:1px solid var(--line);
  background:var(--panel-2);
  transition:border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.menu-search:focus-within{        /* the field shows the same ring as every other control */
  border-color:var(--accent);
  outline:3px solid #fff3e4;
  outline-offset:2px;
  box-shadow:0 0 0 6px rgba(20,12,8,.85);
}
.search-icon{ width:18px; height:18px; color:var(--accent); flex:none; }
.menu-search input{
  flex:1 1 auto; min-width:0;
  background:none; border:0; outline:none;
  font-family:inherit; font-size:1rem; color:var(--text-primary);
  padding:.7em 0;
}
.menu-search input::placeholder{ color:var(--text-secondary); opacity:.75; }
.menu-search input::-webkit-search-cancel-button{ display:none; }
.search-clear{
  flex:none; width:1.6rem; height:1.6rem; border-radius:50%;
  border:0; background:rgba(217,123,63,.2); color:var(--text-primary);
  font-size:1rem; line-height:1; cursor:pointer;
  transition:background .2s var(--ease-out), transform .2s var(--ease-out);
}
.search-clear:hover{ background:var(--accent); color:#1a1108; transform:scale(1.08); }

.menu-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  font-family:inherit; font-size:.85rem; font-weight:700; cursor:pointer;
  padding:.5em 1.05em; border-radius:100px;
  color:var(--text-secondary);
  background:transparent; border:1px solid var(--line);
  transition:background .25s var(--ease-out), color .25s var(--ease-out),
             border-color .25s var(--ease-out), transform .2s var(--ease-out);
}
.chip:hover{ color:var(--text-primary); border-color:var(--accent); transform:translateY(-1px); }
.chip.is-on{ background:var(--accent); border-color:var(--accent); color:#1a1108; }
.chip-vegan.is-on{ background:var(--open); border-color:var(--open); }
.chip-hot.is-on, .chip-meat.is-on{ background:var(--closed); border-color:var(--closed); }
.menu-count{ margin:0; font-size:.86rem; color:var(--text-secondary); min-height:1.2em; }

.dish-row[hidden], .menu-cat[hidden]{ display:none; }
.menu-empty{
  margin-top:1.5rem; padding:1.4rem; border-radius:14px;
  border:1px dashed var(--line); color:var(--text-secondary); text-align:center;
}

/* drinks fill the row instead of leaving a column empty */
.menu-cat-wide{ grid-column:1 / -1; }
.menu-cat-wide .dish-list{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:1.2rem clamp(1.5rem,4vw,3rem);
}
.tag-meat{ color:var(--closed); border-color:rgba(240,112,94,.55); background:rgba(240,112,94,.12); font-weight:800; }

/* ===== Add to basket ===== */
.dish-foot{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-top:.55em; }
.dish-foot .dish-tags{ margin:0; }
.add-btn{
  flex:none; font-family:inherit; font-size:.8rem; font-weight:700; cursor:pointer;
  padding:.45em .9em; border-radius:100px;
  color:#eda069; background:rgba(217,123,63,.1);
  border:1px solid rgba(217,123,63,.4);
  transition:background .22s var(--ease-out), color .22s, transform .18s var(--ease-out);
}
.add-btn:hover{ background:var(--accent); color:#1a1108; transform:translateY(-1px); }
.add-btn.added{ background:var(--open); border-color:var(--open); color:#0f1a12; }

/* ===== Basket button and panel ===== */
.cart-fab[hidden], .cart-panel[hidden]{ display:none; }
.cart-fab{
  position:fixed; right:clamp(.7rem,2vw,1.2rem); bottom:clamp(.9rem,3vh,1.6rem); z-index:96;
  width:clamp(52px,6vw,60px); height:clamp(52px,6vw,60px); border-radius:50%;
  border:1px solid rgba(217,123,63,.5); background:var(--accent); color:#1a1108;
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 14px 34px rgba(0,0,0,.5);
  transition:transform .28s var(--ease-out), box-shadow .28s var(--ease-out);
  animation:fabFloat 5.5s var(--ease-inout) -2.2s infinite;
}
.cart-fab svg{ width:54%; height:54%; fill:currentColor; }
.cart-fab:hover, .cart-fab:focus-visible{ transform:translateY(-3px) scale(1.06); box-shadow:0 18px 42px rgba(217,123,63,.45); }
.cart-fab.bump{ animation:cartBump .5s var(--ease-out); }
@keyframes cartBump{ 0%{ transform:scale(1); } 45%{ transform:scale(1.18); } 100%{ transform:scale(1); } }
.cart-badge{
  position:absolute; top:-4px; left:-4px; min-width:1.5rem; height:1.5rem;
  padding:0 .35em; border-radius:100px;
  background:var(--canvas); color:var(--accent); border:1px solid var(--accent);
  font-family:var(--font-mono); font-size:.76rem; font-weight:700;
  display:grid; place-items:center;
}

.cart-panel{
  position:fixed; z-index:118;      /* above the nav pill, which is 100 */
  right:clamp(.7rem,2vw,1.2rem);
  bottom:calc(clamp(.9rem,3vh,1.6rem) + clamp(52px,6vw,60px) + .8rem);
  width:min(22rem, calc(100vw - 1.8rem));
  max-height:min(70vh, 34rem); overflow:auto;
  padding:1.1rem; border-radius:18px;
  border:1px solid rgba(217,123,63,.3); background:rgba(30,20,14,.97);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 26px 60px rgba(0,0,0,.6);
}
.cart-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem; }
.cart-title{ margin:0; font-family:var(--font-display); font-size:1.2rem; font-weight:400; }
.cart-close{
  width:1.9rem; height:1.9rem; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--text-primary);
  font-size:1.1rem; line-height:1;
}
.cart-close:hover{ background:rgba(217,123,63,.2); }
.cart-list{ list-style:none; margin:0 0 .7rem; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.cart-item{ display:flex; align-items:center; gap:.6rem; }
.cart-item-name{ flex:1 1 auto; font-size:.92rem; }
.cart-item-price{ font-family:var(--font-mono); font-size:.8rem; color:var(--text-secondary); white-space:nowrap; }
.qty{ display:flex; align-items:center; gap:.3rem; flex:none; }
.qty button{
  width:1.65rem; height:1.65rem; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:rgba(217,123,63,.12); color:var(--text-primary);
  font-size:.9rem; line-height:1; font-family:inherit;
}
.qty button:hover{ background:var(--accent); color:#1a1108; }
.qty output{ font-family:var(--font-mono); font-size:.85rem; min-width:1.4em; text-align:center; }
.cart-empty{ color:var(--text-secondary); font-size:.9rem; margin:.2rem 0 .8rem; }
.cart-total{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.7rem 0; margin-bottom:.7rem;
  border-top:1px solid var(--line); font-weight:800;
}
.cart-total .sum{ font-family:var(--font-mono); color:var(--accent); }
.cart-actions{ display:flex; flex-direction:column; gap:.5rem; }
.cart-actions .btn{ width:100%; font-size:.92rem; padding:.7em 1em; }
.cart-clear{
  background:none; border:0; cursor:pointer; font-family:inherit;
  color:var(--text-secondary); font-size:.82rem; text-decoration:underline; text-underline-offset:3px;
}
.cart-clear:hover{ color:var(--closed); }
.cart-note{ margin:.7rem 0 0; font-size:.78rem; color:var(--text-secondary); }
@media (prefers-reduced-motion:reduce){ .cart-fab{ animation:none; } }

/* ===== Legal section ===== */
.legal{ background:var(--panel); }
.section-note{ color:var(--text-secondary); font-size:.92rem; max-width:60ch; margin-top:-.2rem; }
.legal-list{ margin-top:1.6rem; display:flex; flex-direction:column; gap:.7rem; }
.legal-body{ padding-top:.4rem; }
.legal-body p{ color:var(--text-secondary); font-size:.94rem; margin:0 0 .9em; max-width:70ch; }
.legal-body p:last-child{ margin-bottom:0; }
.legal-body b{ color:var(--text-primary); }

/* ===== Footer ===== */
.site-footer{
  padding:clamp(2.5rem,6vw,4rem) clamp(1.25rem,5vw,2.5rem) 2.5rem;
  color:var(--text-secondary); font-size:.92rem;
  border-top:1px solid var(--line); text-align:start;
}
.footer-inner{
  max-width:980px; margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
  gap:1.8rem clamp(1.5rem,4vw,3rem);
}
.footer-brand svg{ width:34px; height:34px; fill:var(--accent); margin-bottom:.5rem; }
.footer-name{ margin:0; font-family:var(--font-display); font-size:1.15rem; color:var(--text-primary); }
.footer-brand .fine{ margin:.2em 0 0; }
.footer-head{ margin:0 0 .6em; font-weight:700; color:var(--accent); font-size:.82rem; letter-spacing:.1em; }
.footer-col p{ margin:0 0 .45em; }
.footer-col a{ text-decoration:none; transition:color .2s var(--ease-out); }
.footer-col a:hover{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.footer-bottom{
  max-width:980px; margin:2.2rem auto 0; padding-top:1.4rem;
  border-top:1px solid var(--line); text-align:center;
}
.footer-bottom p{ margin:0 0 .4em; }
.site-footer .fine{ font-size:.8rem; opacity:.75; max-width:62ch; margin-inline:auto; }

/* The restaurant has closed. This is the most important fact on the page now,
   so it is not .fine print: full opacity, its own frame, and the closed colour
   the status pill already uses. */
.closed-notice{
  max-width:62ch; margin:1.2rem auto 0; padding:.75em 1.1em;
  border-radius:12px;
  background:rgba(240,112,94,.14);
  border:1px solid rgba(240,112,94,.55);
  color:#ffb3a6;
  font-family:var(--font-body); font-weight:600; font-size:.95rem; line-height:1.5;
}

/* ===== Bigger touch controls on phones ===== */
@media (max-width:640px){
  .settle-cta{ gap:.7rem; width:100%; }
  .settle-cta .btn{ flex:1 1 9rem; }


  .menu-search{ padding:.25rem 1rem; }
  .menu-search input{ font-size:1.05rem; padding:.9em 0; }
  .search-clear{ width:2.4rem; height:2.4rem; font-size:1.3rem; }

  .qty button{ min-width:46px; min-height:46px; font-size:1.15rem; }
  .cart-close{ width:2.6rem; height:2.6rem; font-size:1.3rem; }
  .cart-actions .btn{ min-height:54px; }

  .a11y-btn{ width:2.9rem; height:2.9rem; font-size:1rem; }
  .a11y-toggle, .a11y-reset{ min-height:50px; font-size:.95rem; }

  .faq-item summary, .legal-list summary{ min-height:48px; display:flex; align-items:center; }
  .nav-cta{ padding:.62em 1em; }
  .site-nav nav a{ padding-block:.5em; }
}
@media (max-width:370px){
  .nav-cta{ padding:.55em .8em; }
}

/* every tappable thing on a phone gets a real finger-sized target */
@media (max-width:640px){
  /* fewer items in the bar, so the ones that stay are comfortably tappable;
     reviews stay reachable from the footer */
  .nav-reviews{ display:none; }
  .brand-mark{ min-width:46px; min-height:46px; justify-content:center; }
  .brand-mark svg{ width:27px; height:27px; }
  .site-nav nav a:not(.nav-cta){ min-height:44px; display:inline-flex; align-items:center; }
  .nav-cta{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  .nav-inner{ padding:.3rem .4rem .3rem .55rem; }
  .info-card .link{ min-height:44px; display:inline-flex; align-items:center; }
  .footer-col a{ min-height:44px; display:inline-flex; align-items:center; }
  .footer-col p{ margin-bottom:.1em; }
  .cart-clear{ min-height:44px; display:inline-flex; align-items:center; }
  .skip-link{ min-height:48px; display:inline-flex; align-items:center; }
}
@media (max-width:370px){
  .site-nav nav a{ font-size:.74rem; }
  .site-nav nav{ gap:.4rem; }
  .brand-mark{ min-width:40px; }
  .brand-mark svg{ width:24px; height:24px; }
}

/* the sizing rule above outranked the plain .nav-home / .nav-reviews hide,
   so state it with matching weight: on phones these two step out of the bar */
@media (max-width:640px){
  .site-nav{ padding:0 .5rem; }
  .nav-inner{ gap:.45rem; padding:.3rem .35rem .3rem .5rem; }
  .site-nav nav{ gap:.35rem; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .site-nav nav::-webkit-scrollbar{ display:none; }
  .site-nav nav a{ font-size:.78rem; padding-inline:.25em; }
  .nav-cta{ padding:.5em .8em; }
}
@media (max-width:370px){
  .nav-inner{ gap:.35rem; }
  .site-nav nav{ gap:.25rem; }
  .site-nav nav a{ font-size:.73rem; padding-inline:.2em; }
  .nav-cta{ padding:.45em .65em; }
}

/* ===================== Phones: the floating buttons keep their places =====================
   Larger targets on a small screen, and the content keeps clear of the side rail. */
@media (max-width:640px){
  .fab{ width:52px; height:52px; }
  .fab svg{ width:56%; height:56%; }
  .rail{ gap:.8rem; }
  .fab-tip{ display:none; }              /* no hover on a phone, so the label never shows */

  .cart-fab{ width:58px; height:58px; }
  .cart-badge{ min-width:1.6rem; height:1.6rem; font-size:.8rem; }

  .section .wrap,
  .site-footer .footer-inner,
  .site-footer .footer-bottom{ padding-inline-end:4rem; }
  .site-footer{ padding-bottom:6.5rem; }
  .final-cta .wrap{ padding-inline:4rem; }
}
@media (max-width:370px){
  .fab{ width:48px; height:48px; }
  .cart-fab{ width:54px; height:54px; }
  .section .wrap,
  .site-footer .footer-inner,
  .site-footer .footer-bottom{ padding-inline-end:3.6rem; }
}

/* ===================== Phones: reading width and rhythm ===================== */
@media (max-width:640px){
  .section{ padding:clamp(3.2rem,9vw,4.5rem) 1.15rem; }

  /* the nav pill floats over the page, so give the text beneath it somewhere to go */
  .site-nav::before{
    content:""; position:absolute; inset-inline:0; top:calc(-1 * clamp(.6rem,1.6vh,1.1rem));
    height:5.6rem; pointer-events:none; z-index:-1;
    background:linear-gradient(to bottom,
      rgba(24,16,11,.97) 0%, rgba(24,16,11,.9) 40%, rgba(24,16,11,0) 100%);
  }
  /* on a small screen the pill sits over busy frames, so it carries its own ground */
  .nav-inner{ background:rgba(27,18,13,.93); }

  h2{ font-size:clamp(1.55rem,7vw,2rem); }
  .lede{ font-size:1.02rem; }
  .section-note{ font-size:.9rem; }

  /* filters: one swipeable row instead of five stacked ones */
  .menu-chips{
    flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    margin-inline:-1.15rem; padding:.15rem 1.15rem .35rem;
    scroll-padding-inline-start:1.15rem;
    max-width:none;
    -webkit-mask-image:linear-gradient(to left, #000 88%, transparent 100%);
            mask-image:linear-gradient(to left, #000 88%, transparent 100%);
  }
  .menu-chips::-webkit-scrollbar{ display:none; }
  .chip{ flex:none; scroll-snap-align:start; min-height:44px; font-size:.88rem; padding:.55em 1.05em; }

  .menu-cats{ grid-template-columns:1fr; gap:2.2rem; margin-top:1.8rem; }
  .dish-list{ gap:1.15rem; }
  .dish-note{ font-size:.9rem; }
  .dish-foot{ justify-content:flex-start; gap:.6rem; }
  .add-btn{ order:-1; min-height:44px; font-size:.85rem; padding:.55em 1.1em; }

  .review{ padding:1.15rem; border-radius:14px; }
  .review-text{ font-size:.97rem; }
  .rating-score{ font-size:2rem; }

  .info-card{ padding:1.2rem; }
  .info-action{ min-height:46px; font-size:.86rem; padding:.6em 1.1em; }

  .btn{ min-height:50px; font-size:.96rem; padding:.8em 1.4em; }
}

/* ===== A light that follows the pointer ===== */
.cursor-glow{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:0; transition:opacity .5s var(--ease-out);
  mix-blend-mode:screen;
  background:radial-gradient(240px circle at var(--mx,50vw) var(--my,50vh),
             rgba(217,123,63,.08), rgba(217,123,63,.035) 42%, transparent 70%);
}
body.pointer-light .cursor-glow{ opacity:1; }

/* ===== Hover: a lift and a local glow on anything you point at ===== */
@media (hover:hover) and (pointer:fine){
  .glow-card{ position:relative; transition:transform .35s var(--ease-out), border-color .35s var(--ease-out); }
  .glow-card::after{                 /* the light sits where the pointer is inside the card */
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    opacity:0; transition:opacity .35s var(--ease-out);
    background:radial-gradient(180px circle at var(--cx,50%) var(--cy,50%),
               rgba(217,123,63,.16), transparent 72%);
  }
  .glow-card:hover::after{ opacity:1; }
  .dish-row:hover, .faq-item:hover, .menu-cat:hover{ border-color:var(--accent-muted); }
  .dish-row:hover .dish-title{ color:#ffd9b8; }
  .info-card:hover, .oven:hover{ transform:translateY(-4px); }
  .footer-col a:hover, .info-card .link:hover{ color:var(--accent); }
  .tag:hover{ border-color:var(--accent-muted); }
  .cat-title:hover{ color:var(--accent-hover); }
}

/* ===== Reviews: a full turn and a lit frame on hover ===== */
.review{ position:relative; }
.review::before{                     /* the lit frame: a ring, masked so it never washes the card */
  content:""; position:absolute; inset:-2px; border-radius:18px; pointer-events:none;
  padding:2px;
  background:conic-gradient(from var(--spin,0deg), rgba(217,123,63,0), var(--accent), rgba(111,206,135,.75), var(--accent), rgba(217,123,63,0));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0; transition:opacity .4s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .review{ transform-style:preserve-3d; }
  .review:hover{
    border-color:var(--accent);
    box-shadow:0 0 34px rgba(217,123,63,.3);
  }
  /* one turn per entry: the card rotates out from under the cursor, so hover
     alone would drop and re-fire it */
  .review.turning{ animation:reviewTurn .95s var(--ease-inout); }
  .review:hover::before{ opacity:.9; animation:frameSpin 2.6s linear infinite; }
}
@keyframes reviewTurn{
  0%{ transform:perspective(1100px) rotateY(0deg); }
  100%{ transform:perspective(1100px) rotateY(360deg); }
}
@keyframes frameSpin{ to{ --spin:360deg; } }
@property --spin{ syntax:'<angle>'; initial-value:0deg; inherits:false; }

@media (prefers-reduced-motion:reduce){
  .cursor-glow{ display:none; }
  .review:hover{ animation:none; }
  .review:hover::before{ animation:none; opacity:.55; }
}
body.a11y-nomotion .cursor-glow{ display:none; }

/* ===================== 404 ===================== */
  .lost{ min-height:100vh; display:grid; place-items:center; padding:2rem 1.25rem; text-align:center; }
  .lost-inner{ max-width:34rem; }
  .lost-mark{ width:74px; height:74px; fill:var(--accent); margin:0 auto 1.5rem; }
  .lost h1{ font-size:clamp(2rem,6vw,3.2rem); margin-bottom:.3em; }
  .lost .lede{ margin-inline:auto; margin-bottom:2rem; }
  .lost .settle-cta{ justify-content:center; }
  .lost-code{ font-family:var(--font-mono); color:var(--accent); letter-spacing:.3em; font-size:.85rem; margin-bottom:1rem; }

/* ===== The accessibility panel on a phone ===== */
@media (max-width:640px){
  .a11y-panel{
    left:.7rem; right:.7rem; width:auto; max-width:none;
    padding:.9rem 1rem 1.05rem;
  }
  .a11y-scroll{ gap:.7rem; }
  /* two per row: the same ten controls in roughly half the height */
  .a11y-group{ display:grid; grid-template-columns:1fr 1fr; gap:.4rem; align-items:stretch; }
  .a11y-group-title, .a11y-group .a11y-row{ grid-column:1 / -1; }
  .a11y-toggle{ min-height:46px; padding:.5em .6em; font-size:.85rem; text-align:center; line-height:1.25; }
  .a11y-reset{ min-height:46px; padding:.55em .9em; font-size:.92rem; }
  .a11y-btn{ width:2.6rem; height:2.6rem; }
  .a11y-close{ width:2.4rem; height:2.4rem; font-size:1.25rem; }
}

/* ===== Offline notice =====
   Only ever visible when the page is being read without a connection, so the
   visitor is never shown a cached menu as if it were live. */
.offline-bar{
  position:fixed; inset-inline:0; top:0; z-index:200; margin:0;
  padding:.55em 1rem calc(.55em + env(safe-area-inset-top, 0px));
  background:var(--closed); color:#2a0f0a;
  font-size:.85rem; font-weight:700; text-align:center;
}
.offline-bar[hidden]{ display:none; }
body.is-offline .site-nav{ top:calc(clamp(.6rem,1.6vh,1.1rem) + 2.4rem); }

/* ===== Sold out, and a pause on orders =====
   Both come from the admin panel. A dish that has run out keeps its place in
   the menu so people can see it exists, but loses its add button. */
.dish-row.sold-out{ opacity:.62; }
.dish-row.sold-out .dish-title{ text-decoration:line-through; text-decoration-thickness:1px; }
.sold-out-flag{
  display:inline-block; padding:.3em .85em; border-radius:100px;
  font-size:.78rem; font-weight:800; white-space:nowrap;
  background:rgba(240,112,94,.14); color:var(--closed); border:1px solid rgba(240,112,94,.5);
}
body.orders-paused .add-btn,
body.orders-paused .cart-fab{ display:none; }