/* ==========================================================================
   ANDY'S ESTIATORIO — Chino, California. Since 1969.
   A deep-Aegean palette: ink, brass, marble, olive. Minimum type size 12px.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* ink — near-black with a green-blue Aegean undertone */
  --ink:        #06100e;
  --ink-1:      #0a1714;
  --ink-2:      #0e1f1b;
  --ink-3:      #132925;
  --panel:      rgba(243,237,224,.042);
  --panel-2:    rgba(243,237,224,.075);
  --line:       rgba(233,222,199,.13);
  --line-2:     rgba(233,222,199,.22);
  --line-gold:  rgba(201,162,39,.42);

  /* metal & sea */
  --gold:       #c9a227;
  --gold-hi:    #e8cc72;
  --gold-deep:  #6f5610;
  --gold-wash:  rgba(201,162,39,.10);
  --aegean:     #0f7a6e;
  --aegean-hi:  #1bb3a0;
  --aegean-wash:rgba(27,179,160,.10);

  /* earth */
  --marble:     #f3ede0;
  --olive:      #8a9a58;
  --terracotta: #c0603a;
  --wine:       #6a1b2a;

  /* type */
  --text:       #f6f1e6;
  --text-2:     #ddd4c2;
  --muted:      #ab a094;
  --muted:      #aba094;
  --muted-2:    #948a7e;   /* 5.47:1 worst case; #857b6d was 4.46 on --ink-2 */

  /* metrics */
  --wrap:       1200px;
  --wrap-tight: 940px;
  --wrap-slim:  680px;
  --r-sm: 6px; --r: 12px; --r-lg: 20px; --r-xl: 30px;
  --gut: 28px;
  --header-h: 74px;

  --shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 22px 60px rgba(0,0,0,.6);
  --shadow-2: 0 34px 90px rgba(0,0,0,.72);
  --glow-gold: 0 0 0 1px rgba(201,162,39,.4), 0 16px 50px rgba(201,162,39,.18);

  --ease: cubic-bezier(.22,.61,.36,1);

  --f-wordmark:"Playfair Display", "Cinzel", Georgia, serif;  /* the sign over the door */
  --f-inscr: "Cinzel", "Times New Roman", serif;          /* eyebrows, labels */
  --f-display:"Cormorant Garamond", Georgia, serif;        /* headlines */
  --f-ui:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-mono:  ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; color-scheme:dark; }
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--f-ui); font-size:16px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4,h5{ margin:0; font-family:var(--f-display); font-weight:600; line-height:1.16; letter-spacing:-.012em; text-wrap:balance; }
p{ margin:0; } ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--gold); color:#0a0a06; }
:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:3px; border-radius:3px; }

/* ---------- 3. Atmosphere ------------------------------------------------ */
.atmos{ position:fixed; inset:0; pointer-events:none; z-index:0; }
.atmos::before{
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(52% 40% at 50% -4%,  rgba(201,162,39,.14), transparent 64%),
    radial-gradient(44% 38% at 4% 34%,   rgba(15,122,110,.16), transparent 70%),
    radial-gradient(46% 42% at 98% 76%,  rgba(106,27,42,.14),  transparent 72%);
}
.atmos::after{ /* marble grain */
  content:""; position:absolute; inset:0; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
.page{ position:relative; z-index:1; }

/* ---------- 4. Layout ---------------------------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.wrap-tight{ max-width:var(--wrap-tight); } .wrap-slim{ max-width:var(--wrap-slim); }
.section{ padding-block:clamp(56px,6.6vw,96px); position:relative; }
.section--tight{ padding-block:clamp(38px,4.4vw,62px); }
.section--top{ padding-top:clamp(30px,3.6vw,50px); }
.center{ text-align:center; }
.grid{ display:grid; gap:22px; }
.g2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.split{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(30px,4.2vw,68px); align-items:center; }
.split > *, .grid > *{ min-width:0; }
.between{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.hstack{ display:flex; align-items:center; gap:13px; flex-wrap:wrap; }
.hstack--c{ justify-content:center; }
.scroll-x{ overflow-x:auto; min-width:0; -webkit-overflow-scrolling:touch; }

/* ---------- 5. Type ------------------------------------------------------ */
.eyebrow{
  font-family:var(--f-inscr); font-size:13px; font-weight:700; letter-spacing:.34em;
  text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:12px; line-height:1;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.7; }
.eyebrow--c{ justify-content:center; }
.eyebrow--c::after{ content:""; width:26px; height:1px; background:currentColor; opacity:.7; }

.d1{ font-size:clamp(40px,6.6vw,80px); line-height:1.02; letter-spacing:-.02em; font-weight:500; }
.d2{ font-size:clamp(31px,4.2vw,54px); line-height:1.08; letter-spacing:-.016em; font-weight:500; }
.d3{ font-size:clamp(25px,2.9vw,36px); line-height:1.16; letter-spacing:-.012em; font-weight:600; }
.d4{ font-size:clamp(20px,2vw,24px); line-height:1.26; font-weight:600; }
.d5{ font-size:17px; line-height:1.36; font-weight:600; font-family:var(--f-ui); letter-spacing:-.004em; }

.lede{ font-size:clamp(16px,1.5vw,19px); line-height:1.72; color:var(--text-2); }
.small{ font-size:15px; color:var(--muted); line-height:1.68; }
.tiny{ font-size:13px; color:var(--muted); letter-spacing:.05em; }
.muted{ color:var(--muted); }
.mono{ font-family:var(--f-mono); font-size:13px; letter-spacing:.06em; }
.gk{ font-family:var(--f-display); font-style:italic; color:var(--gold-hi); }
.gold{ color:var(--gold); } .sea{ color:var(--aegean-hi); }
.measure{ max-width:62ch; } .measure-c{ max-width:62ch; margin-inline:auto; }
.up{ text-transform:uppercase; letter-spacing:.16em; }

/* ---------- 6. Greek key + rules ----------------------------------------- */
.meander{
  height:16px; width:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='16' viewBox='0 0 48 16'%3E%3Cpath d='M2 14V2h12v9H6v-5h5' fill='none' stroke='%23c9a227' stroke-width='1.4'/%3E%3Cpath d='M26 14V2h12v9h-8v-5h5' fill='none' stroke='%23c9a227' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-position:center; opacity:.62;
}
.meander--fade{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent);
                        mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent); }
.rule{ height:1px; background:linear-gradient(90deg,transparent,var(--line-2),transparent); }

/* ---------- 7. Buttons --------------------------------------------------- */
.btn{
  --bg:transparent; --bd:var(--line-2); --fg:var(--text);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:46px; padding:0 24px; border-radius:999px;
  background:var(--bg); border:1px solid var(--bd); color:var(--fg);
  font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  font-family:var(--f-inscr); cursor:pointer; transition:all .3s var(--ease); white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn--gold{ --bg:linear-gradient(180deg,#dcb43f,#b98f18); --bd:#dcb43f; --fg:#150f02;
  box-shadow:0 12px 34px rgba(201,162,39,.26); font-weight:700; }
.btn--gold:hover{ --bg:linear-gradient(180deg,#eccb62,#c99f22); box-shadow:0 16px 44px rgba(232,204,114,.34); }
.btn--sea{ --bg:var(--aegean); --bd:var(--aegean); --fg:#eafffb; }
.btn--sea:hover{ --bg:var(--aegean-hi); --bd:var(--aegean-hi); --fg:#04231f; }
.btn--ghost:hover{ --bd:var(--line-gold); --bg:var(--gold-wash); }
.btn--marble{ --bg:var(--marble); --bd:var(--marble); --fg:#10100a; }
.btn--sm{ min-height:38px; padding:0 17px; font-size:13px; letter-spacing:.12em; }
.btn--lg{ min-height:56px; padding:0 34px; font-size:15px; }
.btn--block{ width:100%; }
.btn[disabled],.btn.is-off{ opacity:.42; pointer-events:none; }
.btn-row{ display:flex; flex-wrap:wrap; gap:13px; } .btn-row--c{ justify-content:center; }
.link{ font-family:var(--f-inscr); font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); border-bottom:1px solid var(--line-gold); padding-bottom:3px; display:inline-block; transition:.25s var(--ease); }
.link:hover{ color:var(--gold-hi); border-color:var(--gold-hi); }
.link-arrow::after{ content:" →"; }

/* ---------- 8. Surfaces -------------------------------------------------- */
.card{
  background:linear-gradient(180deg,rgba(243,237,224,.055),rgba(243,237,224,.015));
  border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; position:relative; overflow:hidden;
  transition:border-color .35s var(--ease), transform .35s var(--ease), background .35s var(--ease);
}
.card--hover:hover{ border-color:var(--line-gold); transform:translateY(-3px); }
.card--gold{ border-color:var(--line-gold); background:linear-gradient(180deg,rgba(201,162,39,.11),rgba(201,162,39,.02)); }
.card--sea{ border-color:rgba(27,179,160,.3); background:linear-gradient(180deg,rgba(15,122,110,.14),transparent); }
.card--pad-lg{ padding:clamp(28px,3.6vw,48px); }
.pill{
  display:inline-flex; align-items:center; gap:8px; height:27px; padding:0 13px; border-radius:999px;
  border:1px solid var(--line-2); background:var(--panel);
  font-size:13px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--text-2); white-space:nowrap;
}
.pill--gold{ border-color:var(--line-gold); background:var(--gold-wash); color:var(--gold-hi); }
.pill--sea{ border-color:rgba(27,179,160,.34); background:var(--aegean-wash); color:var(--aegean-hi); }
.pill--dim{ color:var(--muted-2); }
.dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.dot--live{ background:var(--aegean-hi); box-shadow:0 0 0 0 rgba(27,179,160,.6); animation:pulse 2.2s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(27,179,160,0);} 100%{ box-shadow:0 0 0 0 rgba(27,179,160,0);} }

/* ---------- 9. Header ---------------------------------------------------- */
.hdr{ position:sticky; top:0; z-index:80; height:var(--header-h);
  background:rgba(6,16,14,.8); backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%); border-bottom:1px solid var(--line); }
.hdr__in{ height:100%; display:flex; align-items:center; gap:22px; }
.brand{ display:flex; flex-direction:column; gap:4px; flex:0 0 auto; min-height:44px; justify-content:center; }
.brand__wm{ font-family:var(--f-wordmark); font-weight:900; font-size:27px; letter-spacing:-.005em;
  line-height:1; color:var(--marble); }
.brand__wm i{ font-style:normal; color:var(--gold); }
.brand__sub{ font-family:var(--f-inscr); font-size:13px; font-weight:600; letter-spacing:.24em; color:var(--gold); line-height:1; }
.nav{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.nav a{ font-family:var(--f-ui); font-size:15px; font-weight:600; letter-spacing:.005em;
  color:var(--text-2); padding:11px 14px; border-radius:999px; transition:.25s var(--ease); }
.nav a:hover{ color:var(--text); background:var(--panel); }
.nav a.is-on{ color:var(--gold-hi); font-weight:700; }
.hdr__cta{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.burger{ display:none; width:46px; height:46px; border:1px solid var(--line-2); border-radius:999px;
  background:transparent; align-items:center; justify-content:center; cursor:pointer; }
.burger span{ display:block; width:17px; height:1.5px; background:var(--text); position:relative; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:17px; height:1.5px; background:var(--text); }
.burger span::before{ top:-5px; } .burger span::after{ top:5px; }
.menu-ov{ position:fixed; inset:var(--header-h) 0 0; background:rgba(6,16,14,.99);
  backdrop-filter:blur(22px); z-index:79; padding:32px var(--gut) 44px; overflow-y:auto; display:none; }
.menu-ov.is-open{ display:block; }
.menu-ov a{ display:block; font-family:var(--f-display); font-weight:600; font-size:26px; padding:13px 0; border-bottom:1px solid var(--line); }
.menu-ov a:hover{ color:var(--gold); }
.menu-ov__grp{ font-family:var(--f-inscr); font-size:13px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted-2); margin:26px 0 8px; }
.cartbtn{ position:relative; }
.cartbtn b{ position:absolute; top:-5px; right:-5px; min-width:19px; height:19px; padding:0 5px; border-radius:999px;
  background:var(--gold); color:#150f02; font-size:12px; font-weight:700; display:grid; place-items:center; line-height:1; }

/* ---------- 10. Hero ----------------------------------------------------- */
.hero{ position:relative; min-height:min(86vh,760px); display:grid; place-items:center; overflow:hidden; text-align:center; }
.hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.02) contrast(1.05) brightness(.6); }
.hero__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,16,14,.62) 0%, rgba(6,16,14,.3) 34%, rgba(6,16,14,.8) 84%, var(--ink) 100%),
             radial-gradient(72% 62% at 50% 46%, transparent 32%, rgba(6,16,14,.5) 100%); }
.hero__in{ position:relative; z-index:1; padding-block:76px; width:100%; }
.hero__in::before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(940px,116%); height:128%; z-index:-1; pointer-events:none;
  background:radial-gradient(56% 52% at 50% 50%, rgba(4,10,9,.8), rgba(4,10,9,.5) 46%, transparent 76%); }
.hero__in .eyebrow,.hero h1,.hero .lede{ text-shadow:0 2px 26px rgba(0,0,0,.75); }
.page-hero{ padding-block:clamp(52px,6.4vw,90px) clamp(28px,3.4vw,44px); text-align:center; position:relative; }
.page-hero::after{ content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(640px,80%); height:1px; background:linear-gradient(90deg,transparent,var(--line-gold),transparent); }

/* ---------- 11. Menu items ----------------------------------------------- */
.dish{ display:block; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--ink-1); transition:.35s var(--ease); position:relative; }
.dish:hover{ border-color:var(--line-gold); transform:translateY(-4px); box-shadow:var(--shadow); }
.dish__media{ position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--ink-2); }
.dish__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.dish:hover .dish__media img{ transform:scale(1.06); }
.dish__no{ position:absolute; top:10px; left:10px; z-index:2; width:30px; height:30px; border-radius:50%;
  background:rgba(6,16,14,.82); border:1px solid var(--line-gold); color:var(--gold-hi);
  font-family:var(--f-mono); font-size:13px; display:grid; place-items:center; backdrop-filter:blur(6px); }
.dish__body{ padding:16px 18px 18px; display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }
.dish__body > *{ min-width:0; }
.dish__name{ font-family:var(--f-ui); font-size:16px; font-weight:600; letter-spacing:-.004em; line-height:1.3; }
.dish__price{ font-family:var(--f-mono); font-size:15px; color:var(--gold-hi); white-space:nowrap; flex:0 0 auto; }
.dish__add{ position:absolute; right:10px; bottom:10px; z-index:2; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line-gold); background:rgba(6,16,14,.8); color:var(--gold-hi); font-size:19px;
  display:grid; place-items:center; cursor:pointer; opacity:0; transform:translateY(6px); transition:.28s var(--ease); }
.dish:hover .dish__add{ opacity:1; transform:none; }

/* menu category nav */
.catnav{ position:sticky; top:var(--header-h); z-index:60; background:rgba(6,16,14,.9);
  backdrop-filter:blur(16px); border-bottom:1px solid var(--line); }
.catnav__in{ display:flex; gap:6px; overflow-x:auto; padding:12px 0; scrollbar-width:none; }
.catnav__in::-webkit-scrollbar{ display:none; }
.catnav a{ font-family:var(--f-ui); font-size:14px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); padding:9px 15px; border-radius:999px; border:1px solid transparent; white-space:nowrap; min-height:38px;
  display:inline-flex; align-items:center; transition:.25s var(--ease); }
.catnav a:hover{ color:var(--text); border-color:var(--line-2); }
.catnav a.is-on{ color:var(--gold-hi); border-color:var(--line-gold); background:var(--gold-wash); }

/* ---------- 12. Forms ---------------------------------------------------- */
.field{ display:block; } .field + .field{ margin-top:17px; }
.field label,.lbl{ display:block; font-family:var(--f-inscr); font-size:13px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin-bottom:9px; }
.inp{ width:100%; min-height:48px; padding:13px 16px; font-size:15px;
  background:rgba(243,237,224,.045); border:1px solid var(--line-2); border-radius:var(--r-sm); transition:.25s var(--ease); }
.inp::placeholder{ color:var(--muted-2); }
.inp:focus{ outline:none; border-color:var(--gold); background:var(--gold-wash); }
textarea.inp{ min-height:132px; resize:vertical; line-height:1.65; }
select.inp{ appearance:none; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aba094' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:17px; }
.check{ display:grid; grid-template-columns:20px 1fr; gap:13px; align-items:center; font-size:15px; 
  color:var(--text-2); cursor:pointer; min-height:44px; }
.check input{ width:20px; height:20px; accent-color:var(--gold); }
.hint{ font-size:13px; color:var(--muted-2); margin-top:9px; line-height:1.6; }
.seg{ display:inline-flex; padding:5px; gap:5px; border:1px solid var(--line-2); border-radius:999px;
  background:var(--panel); max-width:100%; flex-wrap:wrap; justify-content:center; }
.seg button{ min-height:38px; padding:0 19px; border:0; border-radius:999px; background:transparent; cursor:pointer;
  font-family:var(--f-inscr); font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); transition:.25s var(--ease); }
.seg button.is-on{ background:var(--gold); color:#150f02; }
.seg button:hover:not(.is-on){ color:var(--text); }

/* ---------- 13. Tables & data -------------------------------------------- */
.tbl{ width:100%; border-collapse:collapse; }
.tbl th{ text-align:left; font-family:var(--f-inscr); font-size:13px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--muted-2); font-weight:600; padding:0 15px 13px; border-bottom:1px solid var(--line); }
.tbl td{ padding:17px 15px; border-bottom:1px solid var(--line); font-size:15px; color:var(--text-2); vertical-align:middle; }
.tbl tr:hover td{ background:var(--panel); }
.tbl td:first-child,.tbl th:first-child{ padding-left:0; }
.tbl td:last-child,.tbl th:last-child{ padding-right:0; text-align:right; }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line);
  border-radius:var(--r-lg); background:var(--panel); overflow:hidden; }
.stats > * + *{ border-left:1px solid var(--line); }
.stat{ text-align:center; padding:24px 15px; }
.stat__n{ font-family:var(--f-display); font-weight:600; font-size:clamp(29px,3.3vw,40px); line-height:1.14; color:var(--gold-hi); }
.stat__l{ font-family:var(--f-inscr); font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); margin-top:10px; }
.bar{ height:6px; border-radius:999px; background:rgba(243,237,224,.09); overflow:hidden; }
.bar i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi)); }

/* ---------- 14. Footer --------------------------------------------------- */
.ftr{ border-top:1px solid var(--line); background:var(--ink-1); padding-block:clamp(46px,5vw,74px) 30px; margin-top:clamp(50px,6vw,92px); }
.ftr__grid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:36px; }
.ftr h4{ font-family:var(--f-inscr); font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:15px; font-weight:700; }
.ftr li + li{ margin-top:11px; }
.ftr li a{ font-size:15px; color:var(--text-2); transition:.25s var(--ease); display:inline-block; }
.ftr li a:hover{ color:var(--gold-hi); }
.ftr__btm{ margin-top:42px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; }
.ftr__btm p{ font-size:13px; color:var(--muted-2); }

/* ---------- 15. Utility -------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }
.mt8{margin-top:8px}.mt14{margin-top:14px}.mt20{margin-top:20px}.mt28{margin-top:28px}.mt40{margin-top:40px}
.mb20{margin-bottom:20px}.mb28{margin-bottom:28px}
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.note{ border-left:2px solid var(--gold); padding:5px 0 5px 17px; font-size:15px; color:var(--muted); }
.demo-tag{ position:fixed; right:14px; bottom:14px; z-index:90; font-family:var(--f-inscr); font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); background:rgba(6,16,14,.88);
  border:1px solid var(--line); border-radius:999px; padding:8px 15px; backdrop-filter:blur(8px); font-size:13px; }
.toast{ position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); z-index:200; padding:14px 24px;
  border-radius:999px; background:#0b1a16; border:1px solid var(--line-gold); color:var(--text); font-size:13px;
  box-shadow:var(--shadow-2); opacity:0; pointer-events:none; transition:.35s var(--ease); max-width:calc(100vw - 32px); text-align:center; }
.toast.is-on{ opacity:1; transform:translate(-50%,0); }
.acc{ border-top:1px solid var(--line); } .acc:last-of-type{ border-bottom:1px solid var(--line); }
.acc summary{ list-style:none; cursor:pointer; padding:21px 42px 21px 0; font-size:16px; font-weight:600; position:relative; min-height:44px; }
.acc summary::-webkit-details-marker{ display:none; }
.acc summary::after{ content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); color:var(--gold); font-size:21px; font-weight:300; }
.acc[open] summary::after{ content:"–"; }
.acc p{ padding:0 0 23px; font-size:16px; color:var(--muted); line-height:1.72; max-width:70ch; }
.tabs{ display:flex; gap:26px; border-bottom:1px solid var(--line); overflow-x:auto; }
.tabs button{ background:none; border:0; padding:0 0 14px; cursor:pointer; font-family:var(--f-inscr); font-size:13px;
  font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--muted-2);
  border-bottom:1px solid transparent; margin-bottom:-1px; white-space:nowrap; min-height:44px; }
.tabs button.is-on{ color:var(--gold-hi); border-color:var(--gold); }
.tabpane{ display:none; } .tabpane.is-on{ display:block; }

/* ---------- 16. Responsive ----------------------------------------------- */
@media (max-width:1040px){
  .g4{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ftr__grid{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:900px){
  .nav{ display:none; } .burger{ display:flex; }
  .split{ grid-template-columns:1fr !important; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stats > *:nth-child(3){ border-left:0; }
  .stats > *:nth-child(n+3){ border-top:1px solid var(--line); }
}
@media (max-width:720px){
  :root{ --gut:18px; }
  .g2,.g3{ grid-template-columns:1fr; }
  .g4{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .f2{ grid-template-columns:1fr; }
  .ftr__grid{ grid-template-columns:1fr; }
  .btn--sm{ min-height:44px; }
  .seg button{ min-height:44px; }
  .dish__body{ display:block; padding:13px 14px 16px; }
  .dish__price{ display:block; margin-top:7px; }
  .dish__add{ opacity:1; transform:none; }
  .stats{ grid-template-columns:1fr; }
  .stats > *{ border-left:0 !important; }
  .stats > * + *{ border-top:1px solid var(--line); }
  .hero__in{ padding-block:56px; }
  .ftr li a{ padding-block:8px; }
  .link{ min-height:44px; display:inline-flex; align-items:center; }
}

/* [hidden] must beat any display we set (the cart badge is display:grid) */
[hidden]{ display:none !important; }
.hero__bg img{ object-position:center 42%; }
.dish__noimg{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:14px;
  background:linear-gradient(150deg,var(--ink-3),var(--ink-1));
  font-family:var(--f-display); font-style:italic; font-size:26px; color:var(--gold); opacity:.72; }

/* ---------- 17. Native form controls in a dark UI ------------------------ */
/* color-scheme:dark on <html> makes the browser paint select popups, date and
   time pickers, and scrollbars dark. Without it the <option> list renders
   near-white text on a white system background — invisible until hovered.
   The explicit option colours below cover engines that ignore color-scheme. */
select.inp option, select.inp optgroup{
  background-color:#101d19; color:var(--text); font-family:var(--f-ui); font-size:15px;
}
select.inp{ color-scheme:dark; }
input[type="date"].inp, input[type="time"].inp{ color-scheme:dark; }
input[type="date"].inp::-webkit-calendar-picker-indicator,
input[type="time"].inp::-webkit-calendar-picker-indicator{ filter:invert(.8) sepia(.4) saturate(3) hue-rotate(5deg); cursor:pointer; }

/* ---------- 18. Header at phone width -----------------------------------
   "Andy's Burgers" at 27px Playfair plus Cart + Order + burger measured 485px
   against a 390px viewport. The wordmark steps down and the Cart button folds
   into the burger menu, which already carries it. */
@media (max-width:620px){
  .brand__wm{ font-size:21px; }
  .brand__sub{ font-size:13px; letter-spacing:.18em; }
  .hdr__in{ gap:12px; }
  .hdr__cta{ gap:8px; }
  /* the phone number lives in the burger menu at this width */
  .hdr__cta > a[href^="tel:"]{ display:none; }
  .btn--sm{ padding:0 15px; }
}
@media (max-width:400px){
  .brand__wm{ font-size:19px; }
  .brand__sub{ font-size:13px; letter-spacing:.12em; }
}
/* A long label ("Order to Rancho Cucamonga") must wrap rather than push the
   page sideways. nowrap is right on desktop, wrong at 390px. */
@media (max-width:620px){
  .btn{ white-space:normal; text-align:center; line-height:1.32; padding-block:11px; height:auto; }
}