/* =========================================================
   TAVERNA SEVERO — MENU PAGE
   Mobile-first, light "travertino & terracotta" base.
   Colors come ENTIRELY from brand-tokens.css :root.
   Motion is GPU-only (transform / opacity). Heavy motion is
   killed under prefers-reduced-motion. 3D tilt is CSS perspective.
   ========================================================= */

:root{ --rail-h:58px; }

*{ box-sizing:border-box; }
html{ scroll-behavior:auto; }   /* Lenis owns smooth scroll */

html,body{
  margin:0; padding:0;
  background:var(--bg-page);
  color:var(--text);
  font-family:var(--body);
  line-height:1.55;
  font-size:17px;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}

/* warm travertine wash: cream page with a soft golden vignette top + a
   faint terracotta glow, echoing the main site. Pure CSS, no images. */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(193,148,101,0.26), transparent 52%),
    radial-gradient(72% 52% at 6% 16%, rgba(107,122,69,0.15), transparent 60%),
    radial-gradient(72% 52% at 94% 10%, rgba(176,122,46,0.15), transparent 60%),
    radial-gradient(100% 60% at 50% 118%, rgba(154,74,82,0.12), transparent 60%),
    var(--bg-page);
}
/* travertine stone grain — tiny tiled SVG noise, very low opacity. */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:0.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--accent); color:var(--on-accent-ink); }

/* ===================== HEADER / HERO ===================== */
.hero{
  position:relative;
  min-height:86svh;
  display:grid; place-items:center;
  text-align:center;
  padding:max(76px,12svh) var(--pad) 60px;
  overflow:hidden;
  isolation:isolate;
}
.hero-inner{ position:relative; z-index:1; }

/* full real logo lockup as the menu hero centerpiece */
.hero-logo{ width:min(460px,84vw); height:auto; margin:6px auto 0; display:block;
  filter:drop-shadow(0 14px 30px rgba(40,28,20,0.16)); }
.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; }

/* animated brand centerpiece — crisp vector arch mark + glow + drawn food + embers */
.hero-art{
  position:relative;
  width:min(360px,80vw);
  aspect-ratio:520/250;
  margin:0 auto 26px;
  display:grid; place-items:center;
}
.hero-art .bloom{
  position:absolute; inset:-30% -10%; border-radius:50%;
  background:radial-gradient(ellipse at 50% 46%, rgba(214,156,92,0.42), rgba(193,148,101,0.12) 48%, transparent 72%);
  filter:blur(3px); will-change:opacity,transform; z-index:0;
}
.hero-art .mark{
  position:relative; width:100%; height:auto; z-index:2;
  filter:drop-shadow(0 14px 30px rgba(40,28,20,0.22));
}
/* line-art food drawn beside the mark in the hero */
.hero-art .hero-food{ position:absolute; z-index:1; opacity:0.85; }
.hero-art .hf-l{ width:62px; left:-2%; top:14%; transform:rotate(-8deg); }
.hero-art .hf-r{ width:54px; right:0%; top:6%; transform:rotate(7deg); }
.hero-art .ember{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, var(--accent), rgba(193,148,101,0));
  filter:blur(0.3px); will-change:transform,opacity; pointer-events:none; z-index:3;
}

.hero-kicker{
  font-family:var(--body); font-weight:700; font-size:12px;
  letter-spacing:0.42em; text-transform:uppercase;
  color:var(--accent-deep); margin:0 0 12px;
}
.hero-title{
  font-family:var(--display); font-weight:700;
  font-size:clamp(54px,15vw,118px); line-height:0.84;
  letter-spacing:-0.018em; margin:0; color:var(--text);
}
.hero-title .hero-2{
  display:block; color:var(--accent-strong);
  margin-top:0.02em;
}
.hero-tag{
  font-family:var(--display); font-style:italic; font-weight:380;
  font-size:clamp(17px,4.6vw,25px); line-height:1.4;
  color:var(--text-muted); max-width:30ch; margin:20px auto 0; text-wrap:pretty;
}
.hero-meta{
  margin-top:16px; display:flex; flex-wrap:wrap; justify-content:center;
  gap:8px 16px; font-size:11px; font-weight:700; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--text-faint);
}

/* back-to-site link, fixed top-left */
.back-link{
  position:fixed; top:14px; left:14px; z-index:80;
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600; letter-spacing:0.04em;
  padding:9px 15px; border-radius:999px; min-height:44px;
  color:var(--text); background:rgba(251,247,238,0.72);
  border:1px solid var(--line-strong);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:var(--elev-1);
  transition:transform .3s var(--ease), background .3s, border-color .3s;
}
.back-link:hover{ transform:translateY(-1px); background:var(--surface); border-color:var(--accent); }
.back-link .arr{ color:var(--accent-strong); font-size:15px; transition:transform .3s var(--ease); }
.back-link:hover .arr{ transform:translateX(-3px); }

/* scroll cue */
.scroll-cue{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  font-size:10px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--text-faint); display:flex; flex-direction:column; align-items:center; gap:9px;
}
.scroll-cue .line{
  width:1px; height:38px;
  background:linear-gradient(var(--accent-strong),transparent);
  transform-origin:top; animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{ 0%{transform:scaleY(0);opacity:0} 35%{opacity:1} 100%{transform:scaleY(1);opacity:0} }

/* ===================== STICKY CATEGORY RAIL ===================== */
.rail{
  position:sticky; top:0; z-index:70;
  height:var(--rail-h);
  display:flex; align-items:center;
  background:rgba(239,233,220,0.82);
  backdrop-filter:blur(14px) saturate(1.05);
  -webkit-backdrop-filter:blur(14px) saturate(1.05);
  border-bottom:1px solid var(--line);
}
.rail-scroll{
  display:flex; gap:9px; align-items:center;
  overflow-x:auto; overflow-y:hidden;
  width:100%; height:100%;
  padding:0 var(--pad); padding-right:calc(var(--pad) + 8px);
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.rail-scroll::-webkit-scrollbar{ display:none; }
.chip{
  flex:0 0 auto; scroll-snap-align:center;
  display:inline-flex; align-items:center;
  min-height:40px; padding:0 16px;
  border-radius:999px; white-space:nowrap;
  font-size:13px; font-weight:600; letter-spacing:0.01em;
  color:var(--text-muted); background:transparent;
  border:1px solid var(--line-strong); cursor:pointer;
  transition:color .25s, background .25s, border-color .25s, transform .25s var(--ease);
}
.chip{ --sec:var(--accent-strong); --sec-deep:var(--accent-deep); }
.chip:hover{ color:var(--sec-deep); border-color:var(--sec); }
.chip[aria-current="true"]{
  color:#fff; background:var(--sec-deep);
  border-color:var(--sec-deep); box-shadow:var(--glow-soft);
}

/* ===================== MENU BODY ===================== */
.menu-body{ max-width:760px; margin:0 auto; padding:0 var(--pad); }

.section{
  position:relative;
  padding:clamp(52px,9vh,90px) 0 clamp(26px,5vh,40px);
  scroll-margin-top:calc(var(--rail-h) + 14px);
}
.section + .section{ border-top:1px solid var(--line); }

/* per-category colour accents — cycled by .sec-accent-N on each <section> */
.section{ --sec:var(--accent-strong); --sec-deep:var(--accent-deep); --sec-wash:rgba(193,148,101,0.12); }
.sec-accent-0{ --sec:#9E703F; --sec-deep:#7E5230; --sec-wash:rgba(193,148,101,0.14); } /* terracotta */
.sec-accent-1{ --sec:#5D6A3A; --sec-deep:#3F4A2C; --sec-wash:rgba(107,122,69,0.15); }  /* olive */
.sec-accent-2{ --sec:#B07A2E; --sec-deep:#8A5A1E; --sec-wash:rgba(176,122,46,0.15); }   /* saffron */
.sec-accent-3{ --sec:#9A4A52; --sec-deep:#6E2E36; --sec-wash:rgba(154,74,82,0.14); }    /* wine rose */

.section-head{ position:relative; z-index:1; margin-bottom:28px; text-align:center; }
/* soft coloured halo behind each category header */
.section-head::before{
  content:""; position:absolute; top:-30px; left:50%; transform:translateX(-50%);
  width:min(560px,94%); height:160px; z-index:-1; pointer-events:none;
  background:radial-gradient(58% 100% at 50% 0, var(--sec-wash), transparent 72%);
}
.section-num{
  font-family:var(--display); font-style:italic; font-weight:380;
  font-size:13px; letter-spacing:0.06em; color:var(--sec-deep); opacity:0.95;
}
.section-title{
  font-family:var(--display); font-weight:700;
  font-size:clamp(32px,8vw,54px); line-height:0.98;
  letter-spacing:-0.02em; margin:4px 0 0; color:var(--text);
}

/* ---- scroll-scrubbed Roman arch divider ---- */
.archdiv{ margin-top:18px; width:100%; display:flex; justify-content:center; pointer-events:none; }
.archdiv svg{ width:min(520px,88%); height:auto; overflow:visible; display:block; }
.archdiv .stroke{
  fill:none; stroke:var(--sec, var(--accent));
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 1px 3px rgba(158,112,63,0.25));
}
.archdiv .base{ stroke:var(--brand-brown); opacity:0.5; }
.archdiv .key{ stroke:var(--sec-deep, var(--accent-strong)); fill:none; }
.archdiv .dot{ stroke:var(--sec-deep, var(--accent-deep)); fill:none; }

/* =========================================================
   ITALIAN FOOD LINE MOTIFS — sparse, scroll-revealed accents.
   Brand terracotta/brown line art, faint glow, GPU-only idle drift.
   ========================================================= */
.food-motif{ pointer-events:none; }
.food-motif svg{ width:100%; height:100%; overflow:visible; display:block; }
.food-motif .fm-line{
  fill:none; stroke:var(--accent-strong);
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 1px 4px rgba(158,112,63,0.28));
}
.food-motif .fm-soft{ fill:none; stroke:var(--brand-brown); opacity:0.6; stroke-linecap:round; stroke-linejoin:round; }
.food-motif .fm-fill{ fill:rgba(193,148,101,0.14); stroke:var(--accent-deep); stroke-linecap:round; stroke-linejoin:round; }
.food-motif .fm-dot{ fill:var(--accent); stroke:var(--accent-deep); }
.food-motif .fm-leaf{ fill:none; stroke:var(--accent-2); stroke-linecap:round; stroke-linejoin:round; }     /* olive */
.food-motif .fm-berry{ fill:none; stroke:#9A4A52; stroke-linecap:round; stroke-linejoin:round; }            /* wine */
.food-motif .fm-gold{ fill:none; stroke:#B07A2E; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 3px rgba(176,122,46,0.22)); } /* saffron */

/* section food motif: floats near a section corner, opposite the title block */
.sec-food{
  position:absolute; top:clamp(40px,7vh,84px);
  width:clamp(58px,13vw,96px); aspect-ratio:1/1;
  z-index:0; opacity:0.5;
  transform-origin:50% 0; animation:food-drift 9s var(--ease) infinite;
}
.sec-food.sf-r{ right:3%; }
.sec-food.sf-l{ left:3%; }
@keyframes food-drift{
  0%,100%{ transform:translate3d(0,0,0) rotate(-3deg); }
  50%{ transform:translate3d(0,-8px,0) rotate(3deg); }
}

@media (prefers-reduced-motion:reduce){
  .sec-food{ animation:none !important; opacity:0.5; }
  .archdiv{ opacity:1; }
}

/* ---- dish cards: clean reveal list, subtle hover lift ---- */
.items{ position:relative; z-index:1; display:grid; gap:12px; }

.item{
  position:relative;
  display:grid; grid-template-columns:1fr auto;
  align-items:start; gap:6px 16px;
  padding:15px 18px; border-radius:14px;
  background:linear-gradient(165deg, var(--surface), var(--cream-100));
  border:1px solid var(--line);
  box-shadow:var(--elev-1);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.item:hover{ border-color:var(--sec, var(--accent)); box-shadow:var(--elev-2); transform:translateY(-2px); }

.item.signature{
  border-color:var(--sec, var(--accent));
  background:linear-gradient(165deg, var(--sec-wash), var(--surface));
  box-shadow:var(--elev-1), 0 0 22px var(--sec-wash);
}

.item-main{ min-width:0; }
.item-name{
  display:block;
  font-family:var(--display); font-weight:560;
  font-size:clamp(18px,4.4vw,21px); line-height:1.2;
  color:var(--text); letter-spacing:-0.005em;
}
.item-name .star{
  display:inline-block; color:var(--sec-deep, var(--accent-strong)); font-size:0.74em;
  margin-left:7px; vertical-align:middle;
}
.item-qty{
  display:inline-block; margin-top:6px;
  font-family:var(--body); font-size:12px; font-weight:600;
  letter-spacing:0.05em; color:var(--text-muted);
  background:var(--surface-sunk); border-radius:999px;
  padding:3px 11px; white-space:normal;
}
.item-desc{
  display:block; margin-top:6px;
  font-family:var(--display); font-style:italic; font-weight:380;
  font-size:15px; line-height:1.38; color:var(--text-muted);
  max-width:54ch; text-wrap:pretty;
}
/* allergen code chips — small, subtle, beneath the dish */
.item-alg{
  display:flex; flex-wrap:wrap; gap:5px; margin-top:9px;
}
.item-alg .alg{
  display:inline-grid; place-items:center;
  min-width:18px; height:18px; padding:0 4px;
  font-family:var(--body); font-size:10.5px; font-weight:700;
  line-height:1; color:var(--accent-2-deep);
  background:var(--accent-2-wash);
  border:1px solid rgba(107,122,69,0.30); border-radius:999px;
}

.item-price{
  align-self:start;
  font-family:var(--body); font-weight:700; font-size:17px;
  letter-spacing:0.01em; color:var(--sec-deep, var(--accent-strong));
  white-space:nowrap; text-align:right;
}
.item-price .cur{ font-size:0.8em; opacity:0.75; margin-right:1px; }
.item-price.tbd{
  font-family:var(--body); font-style:italic; font-weight:600;
  font-size:12px; letter-spacing:0.03em; color:var(--text-muted); opacity:0.95;
  padding:4px 11px; border-radius:999px;
  border:1px solid var(--line-strong); background:var(--surface-sunk);
}

/* ===================== ALLERGEN LEGEND CARD ===================== */
.allergens{
  margin:clamp(40px,7vh,72px) 0 0;
  padding:clamp(24px,5vw,40px);
  border-radius:20px;
  background:linear-gradient(160deg, var(--surface), var(--cream-200));
  border:1px solid var(--line-strong);
  box-shadow:var(--elev-2);
}
.allergens-title{
  font-family:var(--display); font-weight:600; font-style:italic;
  font-size:clamp(18px,4.6vw,24px); line-height:1.1;
  margin:0 0 18px; color:var(--text); text-align:center;
}
.allergens-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr; gap:9px 22px;
}
.allergens-grid li{
  display:flex; align-items:center; gap:11px;
  font-size:14px; color:var(--text-muted);
  padding-bottom:9px; border-bottom:1px solid var(--line);
}
.allergens-grid .a-num{
  flex:0 0 auto;
  display:inline-grid; place-items:center;
  width:26px; height:26px;
  font-family:var(--body); font-size:12px; font-weight:800;
  color:var(--on-accent-ink); background:var(--accent);
  border-radius:50%; box-shadow:var(--elev-1);
}
.allergens-grid .a-label{ font-family:var(--display); font-style:italic; }

/* ===================== FOOTER ===================== */
.foot{
  margin-top:clamp(56px,9vh,100px);
  padding:clamp(46px,8vh,78px) var(--pad) 54px;
  border-top:1px solid var(--line);
  text-align:center;
  background:linear-gradient(180deg, transparent, var(--surface-sunk));
}
/* footer brand lockup — crisp vector arches + Fraunces wordmark */
.foot-lockup{ display:flex; flex-direction:column; align-items:center; gap:10px; margin:0 0 18px; }
.foot-logo{ width:clamp(210px,44vw,300px); height:auto; }
.foot-mark{ width:clamp(120px,30vw,160px); height:auto; }
.foot-word{ display:flex; flex-direction:column; align-items:center; line-height:0.9; }
.foot-word .fw-1{ font-family:var(--display); font-weight:700; font-size:clamp(26px,7vw,34px); color:var(--text); letter-spacing:-0.01em; }
.foot-word .fw-2{ font-family:var(--display); font-weight:700; font-size:clamp(26px,7vw,34px); color:var(--accent-strong); letter-spacing:-0.01em; }
.foot-word .fw-3{ margin-top:8px; font-family:var(--body); font-weight:700; font-size:10px; letter-spacing:0.34em; text-transform:uppercase; color:var(--text-faint); }
.foot .line{ font-size:14px; color:var(--text-muted); margin:5px 0; }
.foot .line a{
  display:inline-flex; align-items:center; min-height:44px;
  padding:6px 14px; border-radius:999px; color:var(--accent-strong);
  transition:background .25s, color .25s;
}
.foot .line a:hover{ background:rgba(193,148,101,0.12); }
.foot-grid{ display:flex; flex-direction:column; align-items:center; gap:2px; margin:6px 0 24px; }

.allergen-note{
  max-width:46ch; margin:24px auto 0;
  font-family:var(--display); font-style:italic; font-weight:380;
  font-size:13px; line-height:1.45; color:var(--text-faint);
}

.foot .credit{
  display:inline-flex; flex-direction:column; align-items:center; gap:9px;
  margin-top:30px; font-size:10px; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--text-faint); transition:opacity .3s;
}
.foot .credit:hover{ opacity:0.78; }
.foot .credit-label{ opacity:0.8; }
.foot .credit-logo{ width:120px; height:auto; opacity:0.9; }

/* ===================== RESPONSIVE ===================== */
@media (min-width:560px){
  .item{ padding:17px 22px; }
  .allergens-grid{ grid-template-columns:1fr 1fr; }
}

@media (min-width:1024px){
  .menu-body{ max-width:1060px; }
  .hero-art{ width:min(400px,42vw); margin-bottom:30px; }
  .hero-title{ font-size:clamp(96px,10vw,138px); }
  .hero-tag{ font-size:25px; max-width:36ch; }
  .items{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 22px; }
  .allergens-grid{ grid-template-columns:1fr 1fr; gap:10px 40px; }
  .section-head{ margin-bottom:34px; }
}
/* hide the scroll cue on desktop unless the viewport is tall enough to clear
   the hero meta line (was colliding at typical ~900px laptop heights) */
@media (min-width:1024px) and (max-height:980px){ .scroll-cue{ display:none; } }

/* ===================== ACCESSIBILITY / REDUCED MOTION ===================== */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .scroll-cue{ display:none; }
  .item{ transform:none !important; }
}

:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:12px; }

.loading{
  min-height:60svh; display:grid; place-items:center; text-align:center;
  color:var(--text-muted); font-family:var(--display); font-style:italic; font-size:18px;
}