/* =====================================================================
   FIAMMA PIZZA CO. — stylesheet v3 "showcase"
   Ember-lit editorial + technical spectacle layer.
   Warm near-black <-> warm cream, single hot accent (fire orange).
   Fraunces (display) + Inter (body), self-hosted.

   Motion contract:
   - Default CSS = complete STATIC composition (no JS / reduced motion).
   - html.has-motion = GSAP/Lenis choreography takes over positioning.
   ===================================================================== */

/* -------------------------------- Fonts ---------------------------- */
@font-face{font-family:"Fraunces";src:url("../assets/fonts/fraunces-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../assets/fonts/fraunces-400i.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../assets/fonts/fraunces-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../assets/fonts/fraunces-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../assets/fonts/fraunces-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../assets/fonts/fraunces-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../assets/fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../assets/fonts/inter-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../assets/fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../assets/fonts/inter-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ------------------------------- Tokens ---------------------------- */
:root{
  --ink:#100b09;
  --ink-2:#181110;
  --char:#241a15;
  --cream:#f5efe4;
  --cream-2:#ece1d0;
  --cream-3:#e2d4bf;
  --ember:#e2551d;
  --ember-bright:#f4701f;
  --amber:#e7a742;

  --on-dark:#f5efe4;
  --on-dark-mut:rgba(245,239,228,.62);
  --on-dark-faint:rgba(245,239,228,.34);
  --on-light:#231913;
  --on-light-mut:#6c5d50;
  --line-dark:rgba(245,239,228,.14);
  --line-light:rgba(35,25,19,.14);

  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  --wrap:min(92vw,1240px);
  --pad-sec:clamp(4.5rem,9vw,9rem);
  --radius:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------- Reset ----------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
html,body{overflow-anchor:none}
html:not(.has-motion){scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--ink);
  color:var(--on-light);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.05;letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--ember-bright);outline-offset:3px;border-radius:3px}

.wrap{width:var(--wrap);margin-inline:auto}
.ital{font-style:italic}
.ember{color:var(--ember)}
.hide-sm{display:inline}
.show-sm{display:none}

.skip-link{position:fixed;top:-100px;left:1rem;z-index:500;background:var(--ember);color:#fff;
  padding:.7rem 1.1rem;border-radius:8px;font-weight:600;transition:top .2s}
.skip-link:focus{top:1rem}

/* Film grain (very subtle, warm) */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}

/* ------------------------------ Buttons ---------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font-body);font-weight:600;letter-spacing:.01em;
  padding:.85rem 1.5rem;border-radius:999px;
  background:var(--ember);color:#fff;
  border:1px solid transparent;white-space:nowrap;
  transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s,border-color .25s;
}
.btn-in{display:inline-block;will-change:transform}
.btn-sm{padding:.55rem 1.05rem;font-size:.86rem}
.btn-lg{padding:1rem 1.9rem;font-size:1.02rem}
.btn-solid{background:var(--ember);color:#fff;box-shadow:0 6px 22px -8px rgba(226,85,29,.7)}
.btn-solid:hover{background:var(--ember-bright);box-shadow:0 12px 30px -8px rgba(244,112,31,.8)}
.btn-ghost{background:transparent;color:var(--on-light);border-color:var(--line-light)}
.btn-ghost:hover{border-color:var(--on-light)}
.btn-ghost-light{background:transparent;color:var(--on-dark);border-color:rgba(245,239,228,.3)}
.btn-ghost-light:hover{border-color:var(--on-dark);background:rgba(245,239,228,.06)}
html:not(.has-motion) .btn:hover{transform:translateY(-2px)}

.eyebrow{font-family:var(--font-body);font-weight:600;font-size:.8rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ember);margin-bottom:1.1rem}
.section-title{font-size:clamp(2.1rem,5.2vw,4.1rem);font-weight:600;color:var(--on-light)}
.lede{font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.55;color:var(--on-light);max-width:46ch;margin-top:1.3rem}

/* Kinetic line masks (JS animates .k-inner when motion is on) */
.k-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.k-inner{display:inline-block;will-change:transform}

/* Oversized background words */
.bg-word{position:absolute;top:2%;left:50%;transform:translateX(-50%);z-index:0;
  font-family:var(--font-display);font-weight:900;font-size:24vw;line-height:1;letter-spacing:-.02em;
  color:var(--cream);opacity:.033;white-space:nowrap;pointer-events:none;user-select:none;will-change:transform}
.bg-word-light{color:var(--ink);opacity:.05}

/* ============================== LOADER ============================= */
.loader{display:none;position:fixed;inset:0;z-index:400;background:var(--ink);
  flex-direction:column;align-items:center;justify-content:center;gap:2rem}
html.has-loader .loader{display:flex}
.loader-word{font-family:var(--font-display);font-weight:900;font-size:clamp(3.4rem,13vw,11rem);
  line-height:1;letter-spacing:-.02em;color:var(--cream)}
.loader-word .ch{display:inline-block;will-change:transform,opacity}
.loader-bar{width:130px;height:2px;background:rgba(245,239,228,.12);overflow:hidden;border-radius:2px}
.loader-bar i{display:block;width:100%;height:100%;background:var(--ember);transform:scaleX(0);transform-origin:left}

/* ============================== CURSOR ============================= */
.cursor{display:none}
html.has-cursor .cursor{display:block;position:fixed;top:0;left:0;z-index:300;pointer-events:none}
html.has-cursor *{cursor:none!important}
.cursor-dot{position:fixed;top:0;left:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:var(--ember-bright);will-change:transform}
.cursor-ring{position:fixed;top:0;left:0;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;
  border:1.5px solid rgba(245,239,228,.5);display:flex;align-items:center;justify-content:center;
  will-change:transform;transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),
    background-color .3s,border-color .3s}
.cursor-label{font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);opacity:0;transition:opacity .25s}
.cursor.is-label .cursor-ring{width:74px;height:74px;margin:-37px 0 0 -37px;
  background:rgba(16,11,9,.55);border-color:rgba(245,239,228,.25);backdrop-filter:blur(3px)}
.cursor.is-label .cursor-label{opacity:1}
.cursor.is-press .cursor-ring{width:26px;height:26px;margin:-13px 0 0 -13px;border-color:var(--ember-bright)}

/* ============================== HEADER ============================= */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .4s var(--ease),box-shadow .4s,border-color .4s,padding .3s;
  border-bottom:1px solid transparent}
.header-inner{display:flex;align-items:center;gap:1.5rem;padding:1.15rem 0}
.site-header[data-scrolled]{background:rgba(16,11,9,.82);backdrop-filter:blur(12px) saturate(1.2);
  border-bottom-color:var(--line-dark)}
.site-header[data-scrolled] .header-inner{padding:.75rem 0}
.brand{display:inline-flex;align-items:center;gap:.5rem;color:var(--on-dark)}
.brand-mark{display:inline-flex;color:var(--ember);transition:transform .4s var(--ease)}
.site-header[data-scrolled] .brand-mark{transform:scale(.88) rotate(-6deg)}
.brand-word{font-family:var(--font-display);font-weight:900;font-size:1.5rem;letter-spacing:.01em}
.brand-lg .brand-word{font-size:2rem}

.nav{display:flex;gap:1.9rem;margin-left:auto;margin-right:auto}
.nav a{font-size:.92rem;font-weight:500;color:var(--on-dark-mut);position:relative;padding:.2rem 0;
  transition:color .25s;overflow:hidden}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:var(--ember);
  transform:translateX(-103%);transition:transform .38s var(--ease)}
.nav a:hover{color:var(--on-dark)}
.nav a:hover::after{transform:translateX(0)}

.header-cta{display:flex;align-items:center;gap:.6rem}
.nav-toggle{display:none;flex-direction:column;gap:5px;width:38px;height:38px;align-items:center;justify-content:center}
.nav-toggle span{width:22px;height:2px;background:var(--on-dark);transition:transform .3s,opacity .3s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-drawer{display:flex;flex-direction:column;gap:.3rem;padding:1rem max(4vw,1rem) 1.6rem;
  background:rgba(16,11,9,.97);backdrop-filter:blur(14px);border-top:1px solid var(--line-dark)}
@media (min-width:901px){.mobile-drawer{display:none!important}}
.mobile-drawer a{color:var(--on-dark);font-family:var(--font-display);font-size:1.5rem;padding:.6rem 0;border-bottom:1px solid var(--line-dark)}
.mobile-drawer .btn{font-family:var(--font-body);font-size:1rem;margin-top:.8rem;border-bottom:none}
.mobile-drawer .btn-ghost{color:var(--on-dark);border:1px solid var(--line-dark)}

/* =============================== HERO ==============================
   Layered stage: atmosphere -> FIAMMA (back) -> oven-arch video ->
   FIAMMA (front slice) -> info. Aperture disc closes the sequence. */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--ink);color:var(--on-dark)}
.hero-stage{position:absolute;inset:0;transform-style:preserve-3d;perspective:1100px}
.hero-atmo{position:absolute;inset:-6%;z-index:1;
  background:
    radial-gradient(70% 55% at 50% 46%,rgba(226,85,29,.17),transparent 65%),
    radial-gradient(110% 80% at 50% 110%,rgba(231,167,66,.08),transparent 60%),
    var(--ink)}
.hero-word{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:2;
  font-family:var(--font-display);font-weight:900;font-size:clamp(4.2rem,16.5vw,15.5rem);
  line-height:1;letter-spacing:-.03em;color:var(--cream);white-space:nowrap;user-select:none;margin:0;
  transform-style:preserve-3d}
.hero-word .ch{display:inline-block;will-change:transform}
.hw-front{z-index:4;clip-path:inset(57% -4% -6% -4%);pointer-events:none}
.hero-media-shell{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:3;
  width:clamp(240px,25vw,400px);aspect-ratio:9/14;overflow:hidden;
  border-radius:999px 999px 18px 18px; /* oven-mouth arch */
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8),0 0 120px -20px rgba(226,85,29,.35);
  will-change:transform,border-radius}
.hero-poster,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-video{opacity:0;transition:opacity 1s var(--ease)}
.hero-video.is-playing{opacity:1}
.hero-media-glow{position:absolute;inset:0;box-shadow:inset 0 0 60px 10px rgba(16,11,9,.55);border-radius:inherit}
.hero-info{position:absolute;left:max(4vw,1.2rem);bottom:clamp(2rem,6vh,4rem);z-index:5;max-width:34rem}
.hero-kicker{font-weight:600;font-size:.8rem;letter-spacing:.26em;text-transform:uppercase;color:var(--on-dark);margin-bottom:.9rem}
.hero-kicker::before{content:"";display:inline-block;width:26px;height:1.5px;background:var(--ember);
  vertical-align:middle;margin-right:.7rem;transform:translateY(-3px)}
.hero-sub{font-family:var(--font-display);font-weight:400;font-size:clamp(1.05rem,1.7vw,1.35rem);
  line-height:1.4;max-width:34ch;color:var(--on-dark);opacity:.94}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.6rem}
.hero-scroll{position:absolute;right:max(4vw,1.2rem);bottom:2.2rem;z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-mut)}
.hero-scroll-line{width:1px;height:46px;background:linear-gradient(var(--ember),transparent);position:relative;overflow:hidden}
.hero-scroll-line::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;
  background:var(--cream);animation:scrollDrop 2.2s var(--ease) infinite}
@keyframes scrollDrop{0%{top:-50%}60%,100%{top:100%}}
.hero-aperture{position:absolute;inset:-12%;z-index:6;background:var(--ink);
  clip-path:circle(0% at 50% 58%);pointer-events:none;will-change:clip-path}

/* ============================ STATEMENT ============================ */
.statement{position:relative;background:var(--ink);color:var(--on-dark);padding:var(--pad-sec) 0;overflow:hidden}
.statement .wrap{position:relative;z-index:2}
.statement-lead{font-family:var(--font-display);font-style:italic;font-size:clamp(1.1rem,2vw,1.5rem);
  color:var(--ember);margin-bottom:1.4rem}
.statement-head{font-size:clamp(2rem,5.5vw,4.4rem);font-weight:600;line-height:1.04;letter-spacing:-.015em;color:var(--cream)}
.statement-foot{margin-top:2rem;color:var(--on-dark-mut);max-width:44ch}

/* ================== CRAFT — TITLE SEQUENCE ========================
   Static default: eyebrow + media + phase A. has-motion: pinned
   full-viewport choreography with all three phases. */
.craft-seq{position:relative;background:var(--cream);color:var(--on-light);overflow:hidden}
.cs-stage{position:relative;padding:var(--pad-sec) max(4vw,1.2rem)}
.cs-eyebrow{font-family:var(--font-body);font-weight:600;font-size:.8rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ember);margin-bottom:1.6rem}
.cs-media{position:relative;width:min(420px,80vw);aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;
  background:var(--char);box-shadow:0 30px 60px -30px rgba(16,11,9,.6);will-change:transform}
.media-poster,.media-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media-video{opacity:0;transition:opacity .8s var(--ease)}
.media-video.is-playing{opacity:1}
.cs-phase{margin-top:2.2rem}
.cs-b,.cs-c{display:none}
.cs-num{display:block;font-family:var(--font-display);font-weight:900;font-size:clamp(6rem,26vw,24rem);
  line-height:.85;letter-spacing:-.04em;color:var(--on-light);will-change:transform}
.cs-num.ember{color:var(--ember)}
.cs-num .ch{display:inline-block;will-change:transform}
.cs-word{display:block;overflow:hidden;margin-top:.6rem;
  font-family:var(--font-body);font-weight:700;font-size:clamp(.85rem,1.4vw,1.05rem);
  letter-spacing:.24em;text-transform:uppercase;color:var(--on-light-mut)}
.cs-word .k-inner{display:inline-block}

html.has-motion .craft-seq{height:100svh;min-height:640px}
html.has-motion .cs-stage{position:absolute;inset:0;padding:0}
html.has-motion .cs-eyebrow{position:absolute;top:96px;left:max(4vw,1.2rem);margin:0}
html.has-motion .cs-media{position:absolute;left:8%;top:50%;transform:translateY(-50%);margin:0}
html.has-motion .cs-phase{position:absolute;margin:0;display:block}
html.has-motion .cs-a{right:6%;top:18%;text-align:right}
html.has-motion .cs-b{left:50%;top:50%;transform:translate(-50%,-50%);text-align:center}
html.has-motion .cs-c{right:8%;bottom:14%;text-align:right}
@media (max-width:900px){
  html.has-motion .cs-media{left:50%;top:42%;transform:translate(-50%,-50%);width:min(300px,72vw)}
  html.has-motion .cs-a{right:5%;top:10%}
  html.has-motion .cs-b{top:46%}
  html.has-motion .cs-c{right:5%;bottom:8%}
}

/* ==================== CRAFT — EDITORIAL =========================== */
.craft-copy{background:var(--cream);color:var(--on-light);padding:var(--pad-sec) 0}
.craft-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.media-frame{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;
  background:var(--char);box-shadow:0 30px 60px -30px rgba(16,11,9,.6);will-change:transform}
.media-frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media-tag{position:absolute;left:1rem;bottom:1rem;z-index:2;
  background:rgba(16,11,9,.62);backdrop-filter:blur(6px);color:var(--cream);
  font-size:.78rem;letter-spacing:.04em;padding:.5rem .9rem;border-radius:999px;border:1px solid var(--line-dark)}
.craft-points{margin-top:2rem;display:grid;gap:1rem}
.craft-points li{position:relative;padding-left:1.6rem;color:var(--on-light-mut);font-size:1rem;max-width:44ch}
.craft-points li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;
  background:var(--ember);box-shadow:0 0 0 4px rgba(226,85,29,.16)}
.craft-points strong{color:var(--on-light);font-weight:600}

/* =========================== FIRE BREAK =========================== */
.fire-break{position:relative;height:clamp(420px,84vh,780px);overflow:hidden;
  display:flex;align-items:center;background:var(--ink)}
.fire-media{position:absolute;inset:0;z-index:0;will-change:clip-path,transform}
.fire-media img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.fire-scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(16,11,9,.86) 0%,rgba(16,11,9,.5) 45%,rgba(16,11,9,.2) 100%)}
.fire-content{position:relative;z-index:2}
.fire-quote{font-family:var(--font-display);font-weight:500;font-size:clamp(1.6rem,4vw,3.2rem);
  line-height:1.14;color:var(--cream);max-width:20ch}
.fire-quote span{display:block}
.fire-quote .w{display:inline-block;white-space:pre;will-change:transform,opacity}

/* ==================== MENU — 3D EXPLORATION ======================= */
.menu-exp{position:relative;color:var(--on-dark);
  background:radial-gradient(85% 65% at 72% 28%,rgba(226,85,29,.06),transparent 62%),var(--ink)}
/* Crossing word — travels over the fire-break/menu boundary */
.menu-cross{position:absolute;top:-.42em;left:5%;z-index:4;pointer-events:none;user-select:none;
  font-family:var(--font-display);font-weight:900;font-size:17vw;line-height:1;letter-spacing:-.02em;
  color:var(--cream);opacity:.07;white-space:nowrap;will-change:transform}
.mx-stage{position:relative;padding:calc(var(--pad-sec)*.8) max(4vw,1.2rem)}
.mx-head{position:relative;z-index:3;margin-bottom:2rem}
.mx-title{font-size:clamp(2rem,4.4vw,3.6rem);color:var(--cream)}
.mx-hint{margin-top:.7rem;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-faint)}

.mx-carousel{position:relative;z-index:2}
.mx-item{display:block;text-align:left;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,2.9vw,2.9rem);line-height:1.1;letter-spacing:-.015em;color:var(--on-dark-mut);
  padding:.45rem 0;transition:color .3s;white-space:nowrap;will-change:transform,opacity}
.mx-item:hover{color:var(--cream)}
.mx-item[aria-current="true"]{color:var(--cream)}

.mx-side{position:relative;z-index:2;margin-top:2.5rem}
.mx-media{position:relative;width:min(420px,86vw);aspect-ratio:4/5;border-radius:var(--radius);
  overflow:hidden;background:var(--char);box-shadow:0 40px 90px -40px rgba(0,0,0,.8);
  transform-style:preserve-3d;will-change:transform}
.mx-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:transform,opacity,clip-path}
.mx-photo.is-shown{opacity:1}
.mx-typo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;
  background:
    radial-gradient(80% 60% at 50% 30%,rgba(226,85,29,.16),transparent 70%),
    linear-gradient(160deg,var(--char),var(--ink-2))}
.mx-typo.is-shown{opacity:1}
.mx-typo-initial{font-family:var(--font-display);font-weight:900;font-size:11rem;line-height:1;color:var(--cream);opacity:.92}
.mx-typo-ring{position:absolute;width:64%;aspect-ratio:1;border:1.5px solid rgba(245,239,228,.16);border-radius:50%}
.mx-typo-note{position:absolute;bottom:1.1rem;left:0;right:0;text-align:center;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-faint)}
/* Pointer-driven light sweep over the media stage */
.mx-sheen{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(42% 34% at var(--shx,50%) var(--shy,28%),rgba(245,239,228,.55),transparent 72%);
  opacity:.5;transition:opacity .4s}
.mx-details{margin-top:1.4rem;max-width:420px}
.mx-line{display:flex;align-items:baseline;gap:.8rem}
.mx-name{font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,2.4vw,2.1rem);color:var(--cream)}
.mx-line::after{content:"";flex:1;height:1px;border-bottom:1px dotted var(--line-dark);transform:translateY(-5px)}
.mx-price{font-family:var(--font-display);font-weight:600;font-size:1.3rem;color:var(--ember)}
.mx-price::before{content:"$";font-size:.72em;margin-right:1px;opacity:.8}
.mx-ing{margin-top:.9rem;display:flex;flex-direction:column;gap:.28rem}
.mx-ing li{overflow:hidden;font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-mut)}
.mx-ing li span{display:inline-block}

/* Desktop pinned 3D layout */
@media (min-width:1024px){
  .mx-stage{display:grid;grid-template-columns:1.05fr .95fr;grid-template-rows:auto 1fr;
    column-gap:4vw;height:auto}
  .mx-head{grid-column:1/-1}
  .mx-carousel{align-self:center}
  .mx-side{margin-top:0;align-self:center;justify-self:end;display:grid;justify-items:end}
  .mx-details{text-align:right}
  .mx-line{flex-direction:row-reverse}
  .mx-ing{align-items:flex-end}

  html.has-motion .menu-exp{height:auto}
  html.has-motion .mx-stage{height:100svh;min-height:640px;overflow:hidden;padding-top:96px;padding-bottom:32px}
  html.has-motion .mx-carousel{position:relative;perspective:1200px;transform-style:preserve-3d;height:100%}
  html.has-motion .mx-item{position:absolute;left:0;top:50%;margin:0;padding:.2rem 0;
    font-size:clamp(2rem,3.6vw,3.6rem);transform-origin:left center;backface-visibility:hidden}
}
.mxm{display:none}

/* Mobile / tablet menu carousel */
@media (max-width:1023px){
  .mx-carousel,.mx-side{display:none}
  .mx-stage{padding-bottom:1rem}
  .mxm{display:block;padding:0 0 calc(var(--pad-sec)*.7)}
  .mxm-track{display:flex;gap:4vw;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:1rem max(11vw,2rem) 1.5rem;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    perspective:900px}
  .mxm-track::-webkit-scrollbar{display:none}
  .mxm-card{flex:0 0 78vw;max-width:380px;scroll-snap-align:center;will-change:transform;
    border-radius:var(--radius);overflow:hidden;background:var(--ink-2);
    border:1px solid var(--line-dark);box-shadow:0 24px 50px -24px rgba(0,0,0,.7)}
  .mxm-media{aspect-ratio:4/3;overflow:hidden;position:relative}
  .mxm-media img{width:100%;height:100%;object-fit:cover}
  .mxm-media.mxm-typo{display:flex;align-items:center;justify-content:center;
    background:radial-gradient(80% 60% at 50% 30%,rgba(226,85,29,.16),transparent 70%),
      linear-gradient(160deg,var(--char),var(--ink-2))}
  .mxm-media.mxm-typo span{font-family:var(--font-display);font-weight:900;font-size:6rem;color:var(--cream);opacity:.92}
  .mxm-info{padding:1.1rem 1.2rem 1.3rem}
  .mxm-info h3{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
    font-size:1.35rem;color:var(--cream)}
  .mxm-info p{margin-top:.4rem;font-size:.9rem;color:var(--on-dark-mut)}
}

/* ================= MENU — STARTERS & DOLCI ======================== */
.menu-rest{background:var(--cream);color:var(--on-light);padding:var(--pad-sec) 0}
.menu-subgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem)}
.menu-cat{display:flex;align-items:center;gap:1rem;font-size:.86rem;letter-spacing:.2em;
  text-transform:uppercase;font-family:var(--font-body);font-weight:700;color:var(--on-light);margin-bottom:.4rem}
.menu-cat span{white-space:nowrap}
.menu-cat::after{content:"";flex:1;height:1px;background:var(--line-light)}
.m-item{border-bottom:1px solid var(--line-light)}
.m-row{display:flex;gap:1rem;align-items:flex-start;width:100%;text-align:left;padding:1.15rem .2rem}
.m-text{flex:1;min-width:0}
.m-line{display:flex;align-items:baseline;gap:.7rem}
.m-name{font-family:var(--font-display);font-weight:600;font-size:clamp(1.2rem,2.1vw,1.5rem);color:var(--on-light);line-height:1.15}
.m-line::after{content:"";flex:1;height:1px;border-bottom:1px dotted var(--line-light);transform:translateY(-4px)}
.m-price{font-family:var(--font-display);font-weight:600;font-size:1.15rem;color:var(--ember)}
.m-price::before{content:"$";font-size:.72em;margin-right:1px;opacity:.8}
.m-desc{display:block;color:var(--on-light-mut);font-size:.95rem;margin-top:.35rem;max-width:52ch}
.menu-cta{margin-top:3rem;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.menu-cta-note{color:var(--on-light-mut);font-size:.92rem}

/* ================= AFTER DARK — TAKEOVER ========================== */
.after-dark{position:relative;background:var(--ink);color:var(--on-dark);overflow:hidden}
.ad-stage{position:relative}
.ad-video-wrap{position:relative;height:72vh;overflow:hidden;will-change:transform}
.ad-video-wrap .media-poster,.ad-video-wrap .media-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ad-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,11,9,.85),rgba(16,11,9,.25) 35%,rgba(16,11,9,.35) 70%,var(--ink)),
    radial-gradient(90% 60% at 30% 45%,rgba(226,85,29,.1),transparent 60%)}
.ad-words{position:absolute;top:0;left:0;right:0;height:72vh;z-index:2;pointer-events:none}
.ad-w{position:absolute;font-family:var(--font-display);font-weight:900;line-height:.9;letter-spacing:-.03em;
  color:var(--cream);font-size:clamp(3.4rem,15vw,14rem);white-space:nowrap;will-change:transform;user-select:none}
.ad-w1{top:8%;left:5%}
.ad-w2{top:38%;left:50%;transform:translateX(-50%);color:var(--ember);
  -webkit-text-stroke:0;text-shadow:0 0 70px rgba(226,85,29,.4)}
.ad-w3{bottom:8%;right:5%}
.ad-resolve{position:relative;z-index:3;display:grid;grid-template-columns:auto 1fr;gap:clamp(1.6rem,4vw,3.5rem);
  align-items:center;width:var(--wrap);margin-inline:auto;padding:3.5rem 0 var(--pad-sec)}
.ad-neon{width:clamp(180px,22vw,280px);border-radius:12px;overflow:hidden;transform:rotate(-2deg);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85);will-change:transform}
.ad-late{font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,4.6vw,3.8rem);line-height:1.02;color:var(--cream)}
.ad-note{margin-top:1.1rem;color:var(--on-dark-mut);max-width:40ch}
.ad-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}

html.has-motion .after-dark{height:auto}
html.has-motion .ad-stage{height:100svh;min-height:640px;overflow:hidden}
html.has-motion .ad-video-wrap{position:absolute;inset:0;height:auto}
html.has-motion .ad-words{height:100%}
html.has-motion .ad-resolve{position:absolute;left:50%;bottom:clamp(1.5rem,6vh,4rem);transform:translateX(-50%);
  padding:0;z-index:3}
@media (max-width:700px){
  .ad-resolve{grid-template-columns:1fr;justify-items:start}
  .ad-neon{display:none}
  .ad-w1{top:12%}
  .ad-w3{bottom:14%}
}

/* ============================== VISIT ============================= */
.visit{position:relative;background:var(--cream);color:var(--on-light);padding:var(--pad-sec) 0;overflow:hidden}
.visit .wrap{position:relative;z-index:2}
.visit-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,6vw,6rem);align-items:start}
.visit-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.visit-details{display:grid;grid-template-columns:1fr 1fr;gap:2rem;border-top:2px solid var(--ink);padding-top:2rem}
.detail-block h3{font-size:1rem;letter-spacing:.16em;text-transform:uppercase;font-family:var(--font-body);
  font-weight:700;color:var(--ember);margin-bottom:1rem}
.detail-block address{font-style:normal;font-family:var(--font-display);font-size:1.4rem;line-height:1.4;color:var(--on-light)}
.detail-link{display:inline-block;margin-top:.9rem;font-weight:600;color:var(--on-light);
  border-bottom:1.5px solid var(--ember);padding-bottom:2px;transition:color .25s}
.detail-link:hover{color:var(--ember)}
.hours{width:100%;border-collapse:collapse}
.hours th,.hours td{text-align:left;padding:.55rem 0;font-size:1.02rem;vertical-align:baseline}
.hours th{font-weight:600;color:var(--on-light);font-family:var(--font-body);padding-right:1rem;white-space:nowrap}
.hours td{color:var(--on-light-mut);font-family:var(--font-display)}
.hours tr+tr{border-top:1px solid var(--line-light)}
.hours .is-late td{color:var(--ember);font-weight:500}
.hours-note{margin-top:1rem;font-size:.86rem;color:var(--on-light-mut)}

/* ============================== FOOTER ============================ */
.site-footer{background:var(--ink);color:var(--on-dark);padding:clamp(3.5rem,7vw,5.5rem) 0 2.5rem;border-top:1px solid var(--line-dark)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem}
.footer-tag{color:var(--on-dark-mut);margin-top:1rem;max-width:28ch;font-size:.95rem}
.footer-nav,.footer-col{display:flex;flex-direction:column;gap:.55rem}
.site-footer h4{font-family:var(--font-body);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-dark-faint);margin-bottom:.5rem;font-weight:700}
.footer-nav a,.footer-link{color:var(--on-dark-mut);font-size:.98rem;transition:color .25s;width:fit-content}
.footer-nav a:hover,.footer-link:hover{color:var(--ember)}
.site-footer address{font-style:normal;color:var(--on-dark-mut);font-size:.98rem;line-height:1.6}
.footer-link{margin-top:.4rem;font-weight:600;color:var(--on-dark)}
.footer-hours{color:var(--on-dark-mut);font-size:.98rem}
.footer-social{display:flex;gap:1rem;margin-top:1rem}
.footer-social a{font-size:.86rem;letter-spacing:.04em;color:var(--on-dark-mut);border:1px solid var(--line-dark);
  padding:.4rem .8rem;border-radius:999px;transition:all .25s}
.footer-social a:hover{color:var(--cream);border-color:var(--on-dark-faint)}
.footer-bottom{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem 2rem;flex-wrap:wrap;
  margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line-dark);
  font-size:.82rem;color:var(--on-dark-faint)}
.footer-fine{max-width:62ch;text-align:right;line-height:1.5;opacity:.85}
@media (max-width:620px){.footer-fine{text-align:left}}

/* ============================ REVEALS ============================= */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.reveal.is-in{opacity:1;transform:none}
html.no-js .reveal,html.reduced .reveal{opacity:1;transform:none}

/* ========================== RESPONSIVE ============================ */
@media (max-width:900px){
  .nav{display:none}
  .header-cta{margin-left:auto}
  .nav-toggle{display:flex}
  .craft-grid{grid-template-columns:1fr;gap:2.5rem}
  .craft-media{max-width:460px;order:-1}
  .visit-grid{grid-template-columns:1fr;gap:2.5rem}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .hero-word{top:40%}
  .hero-media-shell{top:40%;width:clamp(200px,44vw,300px)}
  .bg-word{font-size:34vw}
}
@media (max-width:620px){
  :root{--wrap:90vw}
  .header-cta [data-cta="phone"]{display:none}
  .hide-sm{display:none}
  .show-sm{display:inline}
  .menu-subgrid{grid-template-columns:1fr;gap:2rem}
  .visit-details{grid-template-columns:1fr;gap:1.8rem}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:.4rem}
  .hero-scroll{display:none}
  .hero-info{right:max(4vw,1.2rem)}
  .mx-typo-initial{font-size:7rem}
}
@media (max-width:400px){
  :root{--wrap:94vw}
  .header-inner{gap:.7rem}
  .header-cta{gap:.4rem}
  .brand-word{font-size:1.3rem}
  .btn-sm{padding:.5rem .85rem;font-size:.82rem}
}
@media (max-width:380px){
  .btn-lg{padding:.9rem 1.4rem;font-size:.95rem}
  .hero-actions .btn{flex:1}
}

/* ====================== 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}
  .reveal{opacity:1;transform:none}
  .hero-video,.media-video{display:none}
  .hero-scroll-line::after{display:none}
  body::after{display:none}
}