/* =========================================================
   TAVERNA SEVERO — MAIN SITE
   Light "travertino & terracotta" base with ONE dark moment:
   the "walk through the arches" hero (warm candle-lit interior).
   Colors come from brand-tokens.css. Motion is GPU-only.
   ========================================================= */

*{ 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;
}
body::after{ /* faint travertine grain */
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:0.045; 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); }
:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:12px; }

/* cursor glow (desktop) */
.cursor-glow{
  position:fixed; top:0; left:0; width:520px; height:520px; margin:-260px 0 0 -260px;
  border-radius:50%; pointer-events:none; z-index:1; mix-blend-mode:multiply;
  background:radial-gradient(circle, rgba(193,148,101,0.16), transparent 62%);
  will-change:transform;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 20px; border-radius:999px;
  font-family:var(--body); font-weight:700; font-size:14px; letter-spacing:0.01em;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .25s var(--ease), background .25s, border-color .25s, color .25s, box-shadow .25s;
}
.btn.lg{ min-height:52px; padding:0 26px; font-size:15px; }
.btn-solid{ background:var(--accent-strong); color:var(--on-accent); box-shadow:var(--elev-1); }
.btn-solid:hover{ background:var(--accent-deep); transform:translateY(-2px); box-shadow:var(--elev-2); }
/* secondary CTA → olive, so it reads distinct from the terracotta primary */
.btn-ghost{ background:transparent; color:var(--accent-2-deep); border-color:var(--accent-2); }
.btn-ghost:hover{ background:var(--accent-2-wash); border-color:var(--accent-2-strong); color:var(--accent-2-deep); transform:translateY(-2px); }
.btn-ghost-dark{ background:rgba(239,230,212,0.06); color:var(--text-on-dark); border-color:var(--line-dark); }
.btn-ghost-dark:hover{ border-color:var(--accent-2-lit); color:var(--accent-2-lit); transform:translateY(-2px); }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:90;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px;
  padding:14px var(--pad);
  transition:background .35s, box-shadow .35s, border-color .35s, padding .35s;
  border-bottom:1px solid transparent;
}
.nav-solid{
  background:rgba(239,233,220,0.86);
  backdrop-filter:blur(14px) saturate(1.05); -webkit-backdrop-filter:blur(14px) saturate(1.05);
  border-bottom:1px solid var(--line); box-shadow:0 2px 20px rgba(52,39,30,0.06);
  padding-top:9px; padding-bottom:9px;
}
.nav-brand{ grid-column:1; display:inline-flex; align-items:center; gap:12px; justify-self:start; min-width:0; }
.nav-mark{ width:58px; height:auto; display:block; flex:0 0 auto; }
.nav-word{ font-family:var(--display); font-weight:700; font-size:19px; line-height:1; letter-spacing:-0.01em; color:var(--text); white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.nav-links{ grid-column:2; display:flex; align-items:center; gap:4px; justify-self:center; }
.nav-link{
  background:none; border:none; cursor:pointer;
  font-family:var(--body); font-weight:600; font-size:14px; color:var(--text-muted);
  padding:8px 13px; border-radius:999px;
  transition:color .25s, background .25s;
}
.nav-link:hover{ color:var(--text); }
.nav-link.active{ color:var(--accent-deep); background:rgba(193,148,101,0.12); }
.nav-cta{ grid-column:3; display:flex; align-items:center; gap:10px; justify-self:end; flex:0 0 auto; }
.ig-btn{ display:inline-grid; place-items:center; width:42px; height:42px; border-radius:50%; color:var(--text-muted); border:1px solid var(--line); transition:color .25s, border-color .25s, transform .25s; }
.ig-btn:hover{ color:var(--accent-deep); border-color:var(--accent); transform:translateY(-1px); }

/* burger (mobile) */
.burger{ display:none; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center; background:none; border:1px solid var(--line); border-radius:12px; cursor:pointer; }
.burger span{ width:20px; height:2px; background:var(--text); border-radius:2px; transition:transform .3s; }

/* drawer */
.drawer{ position:fixed; inset:0; z-index:100; background:rgba(36,27,20,0.5); backdrop-filter:blur(4px); }
.drawer-panel{
  position:absolute; top:0; right:0; bottom:0; width:min(82vw,360px);
  background:var(--surface); box-shadow:var(--elev-4);
  display:flex; flex-direction:column; gap:6px; padding:74px 26px 30px;
}
.drawer-close{ position:absolute; top:16px; right:18px; width:44px; height:44px; font-size:26px; line-height:1; background:none; border:none; color:var(--text-muted); cursor:pointer; }
.drawer-link{ text-align:left; background:none; border:none; cursor:pointer; font-family:var(--display); font-weight:600; font-size:22px; color:var(--text); padding:12px 4px; border-bottom:1px solid var(--line); }
.drawer-book{ margin-top:18px; }
.drawer-ig{ margin-top:12px; font-size:13px; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-muted); }

/* =========================================================
   NAV — light state while floating over the dark blackboard hero
   ========================================================= */
.nav-onhero .nav-word{ color:var(--text-on-dark); }
.nav-onhero .nav-mark{ filter:brightness(0) invert(1) opacity(0.9); }
.nav-onhero .nav-link{ color:rgba(239,230,212,0.82); }
.nav-onhero .nav-link:hover{ color:#fff; }
.nav-onhero .nav-link.active{ color:#fff; background:rgba(239,230,212,0.16); }
.nav-onhero .ig-btn{ color:rgba(239,230,212,0.85); border-color:rgba(239,230,212,0.3); }
.nav-onhero .ig-btn:hover{ color:#fff; border-color:rgba(239,230,212,0.6); }
.nav-onhero .btn-ghost{ color:var(--text-on-dark); border-color:rgba(239,230,212,0.34); background:rgba(239,230,212,0.05); }
.nav-onhero .btn-ghost:hover{ color:#fff; border-color:var(--accent-lit); background:rgba(239,230,212,0.12); }
.nav-onhero .burger{ border-color:rgba(239,230,212,0.34); }
.nav-onhero .burger span{ background:var(--text-on-dark); }

/* =========================================================
   BLACKBOARD HERO — filled-on-load, layered 3D parallax scene
   (ambient video backdrop → embers → wood-framed chalkboard →
    foreground chalk sprigs). No scroll-scrub.
   ========================================================= */
.bb-hero{
  position:relative; min-height:100svh;
  display:grid; place-items:center;
  padding:clamp(96px,16vh,150px) var(--pad) clamp(72px,12vh,116px);
  overflow:hidden; isolation:isolate;
  background:var(--bg-deep);
  perspective:1200px;
}
/* video backdrop — blurred, bled past the edges so parallax never shows a seam */
.bb-bg{ position:absolute; inset:-7% -9%; z-index:0; will-change:transform; }
.bb-video{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.06); filter:blur(7px) saturate(1.05) brightness(0.6); }
.bb-scrim{ position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 92% at 50% 32%, transparent 28%, rgba(20,13,8,0.58) 100%),
    radial-gradient(80% 60% at 50% 6%, rgba(232,176,96,0.18), transparent 60%),
    linear-gradient(180deg, rgba(20,13,8,0.5), rgba(20,13,8,0.2) 38%, rgba(20,13,8,0.8));
}
/* eased transition into the light sections below (fills the lower third) */
.bb-hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:9vh; z-index:1; pointer-events:none;
  background:linear-gradient(transparent, var(--bg-page)); }

/* embers (shared with the brace section) */
.embers{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.ember{ position:absolute; border-radius:50%; background:radial-gradient(circle, rgba(255,206,138,0.95), rgba(214,156,92,0)); filter:blur(0.4px); will-change:transform,opacity; }
.bb-ember-wrap{ position:absolute; inset:0; z-index:1; pointer-events:none; will-change:transform; }

/* photoreal chalkboard (AI image — original arches + lettering baked in chalk),
   floating over the video, tilting on cursor/gyro. Real H1 is sr-only for SEO. */
.bb-stage{ position:relative; z-index:2; width:min(760px,92vw); transform-style:preserve-3d; }
.bb-enter{ transform-style:preserve-3d; }
.bb-board{ transform-style:preserve-3d; will-change:transform; }
.bb-board-img{ width:100%; height:auto; display:block; filter:drop-shadow(0 16px 30px rgba(0,0,0,0.5)) drop-shadow(0 3px 8px rgba(0,0,0,0.45)); }
.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; }
.bb-cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:clamp(26px,4.6vh,46px); }
/* bright gold primary that pops on the dark scene (logo gold + espresso ink) */
.bb-cta .btn-solid{ background:var(--accent); color:var(--on-accent-ink); box-shadow:var(--elev-2), var(--glow-warm); }
.bb-cta .btn-solid:hover{ background:var(--accent-lit); }
.bb-cta .btn-ghost-dark{ color:#F1E7D2; border-color:rgba(239,230,212,0.7); background:rgba(16,10,6,0.5); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); box-shadow:0 8px 22px rgba(0,0,0,0.4); }
.bb-cta .btn-ghost-dark:hover{ border-color:var(--accent-lit); color:#fff; background:rgba(16,10,6,0.66); }
@media (max-width:640px){ .bb-stage{ width:min(640px,92vw); } }

/* scroll cue (dark hero) */
.scroll-cue{ position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:4;
  font-size:10px; font-weight:700; letter-spacing:0.34em; text-transform:uppercase; color:var(--text-muted-dark);
  display:flex; flex-direction:column; align-items:center; gap:9px; }
.scroll-cue .line{ width:1px; height:40px; background:linear-gradient(var(--accent-lit),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} }

/* =========================================================
   FOOD MOTIFS (shared)
   ========================================================= */
.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.25)); }
.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); }

/* =========================================================
   SECTIONS — shared
   ========================================================= */
.section{ position:relative; z-index:1; padding:clamp(72px,12vh,140px) var(--pad); }
.section-head{ max-width:var(--maxw); margin:0 auto; }
.section-head.center{ text-align:center; }
.eyebrow{ display:inline-block; font-weight:700; font-size:12px; letter-spacing:0.3em; text-transform:uppercase; color:var(--accent-2-deep); margin-bottom:16px; }
.big-title{ font-family:var(--display); font-weight:700; font-size:clamp(38px,8vw,82px); line-height:0.96; letter-spacing:-0.02em; margin:0; color:var(--text); }
.big-title em{ font-style:italic; color:var(--accent-strong); }
.sub{ font-family:var(--display); font-style:italic; font-weight:380; font-size:clamp(16px,3.6vw,21px); color:var(--text-muted); max-width:48ch; margin:16px auto 0; text-wrap:pretty; }
.section-head.center .sub{ margin-inline:auto; }

/* =========================================================
   STORIA
   ========================================================= */
.storia{ overflow:hidden;
  background:
    radial-gradient(56% 48% at 92% 6%, rgba(193,148,101,0.12), transparent 60%),
    radial-gradient(48% 48% at 5% 94%, rgba(107,122,69,0.10), transparent 60%);
}
.storia-inner{ max-width:var(--maxw); margin:0 auto; position:relative; z-index:1; }
.storia .lede{ font-family:var(--display); font-weight:380; font-size:clamp(18px,3.4vw,26px); line-height:1.5; color:var(--text-muted); max-width:34ch; margin:20px 0 0; text-wrap:pretty; }
.big-title{ }
.storia .chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.chip-pill{ font-weight:600; font-size:13px; letter-spacing:0.04em; color:var(--accent-deep); background:var(--surface); border:1px solid var(--line-strong); padding:9px 16px; border-radius:999px; box-shadow:var(--elev-1); }
.storia-food{ position:absolute; top:8%; right:4%; width:clamp(90px,16vw,150px); aspect-ratio:100/112; opacity:0.5; z-index:0; }

/* =========================================================
   I PIATTI — photo overlay cards + dolci strip
   ========================================================= */
.piatti .section-head{ margin-bottom:40px; }
.piatti-grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr; gap:16px; }
.dish-card{
  position:relative; aspect-ratio:4/5; border-radius:20px; overflow:hidden;
  background:var(--surface-sunk); border:1px solid var(--line); box-shadow:var(--elev-2);
  transition:transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.dish-card:hover{ transform:translateY(-4px); box-shadow:var(--elev-3); border-color:var(--accent-2); }
.dish-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease); will-change:transform;
}
.dish-card:hover .dish-photo{ transform:scale(1.06); }
.dish-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 26%, rgba(28,19,12,0.52) 58%, rgba(18,11,6,0.93) 100%);
}
.dish-body{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:20px 22px; }
.dish-body h3{ font-family:var(--display); font-weight:600; font-size:clamp(21px,4.6vw,27px); line-height:1.08; margin:0; color:var(--text-on-dark); text-shadow:0 2px 16px rgba(0,0,0,0.55); }
.dish-body p{ margin:7px 0 0; font-size:14px; line-height:1.4; color:var(--text-muted-dark); }
.piatti-cta{ text-align:center; margin-top:44px; }

/* dolci della casa — smaller photo strip */
.dolci-head{ max-width:var(--maxw); margin:60px auto 22px; text-align:center; }
.dolci-title{ font-family:var(--display); font-weight:700; font-size:clamp(26px,5vw,42px); line-height:1; margin:0; color:var(--text); }
.dolci-strip{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dolce-card{ position:relative; aspect-ratio:1/1; border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--elev-1); }
.dolce-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); will-change:transform; }
.dolce-card:hover .dolce-photo{ transform:scale(1.07); }
.dolce-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 44%, rgba(20,13,8,0.82) 100%); }
.dolce-name{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:12px 14px; font-family:var(--display); font-weight:600; font-size:14px; color:var(--text-on-dark); text-shadow:0 2px 10px rgba(0,0,0,0.5); }

/* =========================================================
   ALLA BRACE — wood-fired grill, a photo section like the others
   (between Le specialità and Dolci). Faint warm grill wash.
   ========================================================= */
.brace{ overflow:hidden;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(176,122,46,0.12), transparent 60%),
    radial-gradient(50% 46% at 6% 96%, rgba(154,74,82,0.10), transparent 60%);
}
.brace .section-head{ margin-bottom:40px; }
.brace .big-title em{ color:var(--accent-strong); font-style:italic; }
.brace-grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr; gap:16px; }
.brace-grid .dish-card{ aspect-ratio:4/3; }
@media (min-width:680px){ .brace-grid{ grid-template-columns:1fr 1fr; } }

/* DOLCI section — drop the inner top margin now that it stands alone */
.dolci-sec .dolci-head{ margin-top:0; }

/* =========================================================
   MENÙ TEASER
   ========================================================= */
.menu-teaser{ }
.mt-card{
  position:relative; max-width:var(--maxw); margin:0 auto; overflow:hidden;
  padding:clamp(40px,7vw,80px); border-radius:28px; text-align:center;
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(193,148,101,0.18), transparent 60%),
    radial-gradient(70% 80% at 100% 100%, rgba(107,122,69,0.12), transparent 60%),
    radial-gradient(60% 70% at 0% 100%, rgba(154,74,82,0.10), transparent 60%),
    linear-gradient(160deg, var(--surface), var(--cream-200));
  border:1px solid var(--line-strong); box-shadow:var(--elev-3);
}
.mt-card .big-title{ margin-top:6px; }
.mt-card .sub{ margin:18px auto 28px; }
.mt-food{ position:absolute; top:18px; right:6%; width:clamp(70px,12vw,110px); aspect-ratio:80/120; opacity:0.45; }

/* =========================================================
   TROVACI
   ========================================================= */
.trovaci-grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr; gap:28px; align-items:center; }
.trovaci-info .big-title{ margin-bottom:22px; }
.contact{ list-style:none; margin:0 0 26px; padding:0; display:grid; gap:16px; }
.contact li{ display:flex; flex-direction:column; gap:3px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.c-k{ font-size:11px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--text-faint); }
.contact a{ font-family:var(--display); font-size:clamp(18px,3.4vw,22px); color:var(--text); transition:color .25s; }
.contact a:hover{ color:var(--accent-2-deep); }
.trovaci-cta{ display:flex; gap:12px; flex-wrap:wrap; }
.trovaci-map{ position:relative; border-radius:22px; overflow:hidden; border:1px solid var(--line-strong); box-shadow:var(--elev-2); aspect-ratio:4/3; background:var(--surface-sunk); }
.trovaci-map iframe{ width:100%; height:100%; border:0; display:block; filter:saturate(0.92) contrast(1.02); }

/* =========================================================
   FOOTER
   ========================================================= */
.foot{ position:relative; z-index:1; overflow:hidden; text-align:center; padding:clamp(56px,9vh,96px) var(--pad) 56px; border-top:1px solid var(--line); background:linear-gradient(180deg, transparent, var(--surface-sunk)); }
.foot-lockup{ display:flex; flex-direction:column; align-items:center; gap:10px; margin:0 0 22px; }
.foot-logo{ width:clamp(220px,42vw,310px); height:auto; }
.foot-mark{ width:clamp(130px,30vw,170px); 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(28px,7vw,38px); color:var(--text); letter-spacing:-0.01em; }
.foot-word .fw-2{ font-family:var(--display); font-weight:700; font-size:clamp(28px,7vw,38px); color:var(--accent-strong); letter-spacing:-0.01em; }
.foot-word .fw-3{ margin-top:8px; font-weight:700; font-size:10px; letter-spacing:0.34em; text-transform:uppercase; color:var(--text-faint); }
.foot-grid{ display:flex; flex-direction:column; align-items:center; gap:4px; margin:8px 0 28px; }
.foot .line{ font-size:14px; color:var(--text-muted); }
.foot .line a{ display:inline-flex; align-items:center; min-height:40px; padding:4px 14px; border-radius:999px; color:var(--accent-strong); transition:background .25s; }
.foot .line a:hover{ background:rgba(193,148,101,0.12); }
.foot .credit{ display:inline-flex; flex-direction:column; align-items:center; gap:9px; margin-top:14px; 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-logo{ width:120px; height:auto; opacity:0.9; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (min-width:680px){
  .piatti-grid{ grid-template-columns:1fr 1fr; }
  .dolci-strip{ grid-template-columns:repeat(4,1fr); }
}
@media (min-width:980px){
  .piatti-grid{ grid-template-columns:repeat(3,1fr); }
  .trovaci-grid{ grid-template-columns:1.05fr 1fr; gap:48px; }
}
@media (max-width:900px){
  /* links collapse into the drawer; lay the bar out as brand | cta so the
     full "Taverna Severo" wordmark always fits (was truncating in the grid) */
  .nav{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
  .nav-links{ display:none; }
  .nav .btn-ghost{ display:none; }
  .burger{ display:flex; }
  .nav-brand{ gap:9px; min-width:0; flex:1 1 auto; }
  .nav-word{ font-size:16px; overflow:visible; text-overflow:clip; }
  .nav-mark{ width:42px; flex:0 0 auto; }
  .nav-cta{ flex:0 0 auto; gap:8px; }
}
@media (max-width:480px){
  .nav .btn-solid{ display:none; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .scroll-cue{ display:none; }
  .cursor-glow{ display:none; }
  /* hero degrades to a calm static lit scene: video shows its poster (autoplay
     disabled in JSX), embers off, no parallax/tilt — the board sits centered. */
  .bb-board{ transform:none !important; }
}