/* ── Brand tokens (NgON palette) ─────────────────────── */
  :root{
    --red:      #D31005;   /* NgON brand red */
    --paper:    #F7F7E8;
    --apron:    #685C66;   /* the "dive" grey panel */
    --cream:    #FFFBEE;
    --butter:   #FFE7A0;   /* About marquee strip — pale yellow */
    --sun:      #FFB90A;   /* yellow asterisk accent */
    --sky:      #2C55E5;   /* blue asterisk accent */
    --ink:      #0A0A0A;
    --grey-lt:  #E5E5E5;
    --rule:     rgba(247,247,232,0.22);
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:auto; }
  html,body{
    background:var(--red); color:var(--paper);
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight:400; -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  body{ line-height:1.5; }
  a{ color:inherit; text-decoration:none; }
  img{ display:block; max-width:100%; }
  ::selection{ background:var(--paper); color:var(--red); }

  /* Typographic helpers — Helvetica only, weight does the work */
  .h-display{ font-weight:900; letter-spacing:-0.02em; line-height:0.92; }
  .h-bold{ font-weight:700; letter-spacing:-0.01em; }
  .lbl{ font-size:11px; letter-spacing:0.28em; text-transform:uppercase; font-weight:500; }

  /* ── Fixed chrome ────────────────────────────────────── */
  .chrome{
    position:fixed; inset:0; pointer-events:none; z-index:50;
  }
  .chrome > *{ pointer-events:auto; }

  /* wordmark-fixed removed — only the traveling house-cue remains as chrome */

  /* nav-fixed removed — the traveling house-cue replaces the right rail */


  /* Separate .burger button removed — the .house-cue IS the burger now */

  /* Commune-style overlay: full NgON red, left-aligned primary list,
     bottom-left secondary list, BOOK ONLINE outline top-right,
     NgON wordmark bottom-right. */
  .burger-menu{
    position:fixed; inset:0; z-index:80;
    background:var(--red);
    visibility:hidden; opacity:0;
    padding:34px 44px 40px;
    overflow:hidden;
  }
  .burger-menu .close{
    position:absolute; top:30px; left:36px;
    width:42px; height:42px;
    background:none; border:none;
    color:var(--paper);
    cursor:pointer;
    transition:transform .35s ease;
    display:flex; align-items:center; justify-content:center;
  }
  .burger-menu .close svg{ width:24px; height:24px; }
  .burger-menu .close:hover{ transform:rotate(90deg); }

  .book-online{
    position:absolute; top:30px; right:36px;
    padding:11px 26px;
    border:1px solid var(--paper);
    font-weight:700; font-size:12px; letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--paper);
    opacity:0; /* GSAP fades it in */
    transition:background .25s ease, color .25s ease;
    cursor:pointer;
  }
  .book-online:hover{ background:var(--paper); color:var(--red); }

  /* Primary menu list — heavy Helvetica, tight tracking, left-aligned.
     Char-level SplitText animation handles reveal + hover wave;
     the <a> stays visible, only the .char spans inside animate. */
  .burger-menu__primary{
    position:absolute; left:56px; top:50%;
    transform:translateY(-50%);
    display:flex; flex-direction:column;
    max-width:46vw;
    z-index:2;
  }
  .burger-menu__primary a{
    font-weight:900;
    font-size:clamp(24px, 3.1vw, 44px);
    line-height:1.1;
    letter-spacing:-0.03em;
    text-transform:uppercase;
    color:var(--paper);
    padding:2px 0;
    width:fit-content;
    cursor:pointer;
  }
  .burger-menu__primary a .char{
    display:inline-block;
    will-change:transform, opacity, color;
    /* Initial state set by gsap.set on page-load so chars are
       invisible until the menu opens. */
  }

  /* Bottom-right brand mark — small wordmark like Commune's signature */
  .burger-menu__brand{
    position:absolute; right:36px; bottom:28px;
    width:132px;
    opacity:0;
    pointer-events:none;
  }
  .burger-menu__brand object{ width:100%; height:auto; display:block; }

  @media(max-width:900px){
    .burger{ top:18px; right:18px; width:48px; height:48px; }
    .burger-menu{ padding:24px 22px 32px; }
    .burger-menu .close{ top:18px; left:22px; width:38px; height:38px; }
    .book-online{ top:22px; right:22px; padding:9px 18px; font-size:10px; }
    .burger-menu__primary{ left:24px; }
    .burger-menu__primary a{ font-size:36px; letter-spacing:-0.03em; }
    .burger-menu__brand{ right:22px; bottom:24px; width:94px; }
  }

  /* ── 01 LANDING ──────────────────────────────────────── */
  .landing{
    position:relative; height:100vh; height:100svh; width:100%;
    background:var(--red);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .landing__mark{
    width:min(560px, 60vw);
    opacity:0;
  }
  .landing__mark svg, .landing__mark object{ width:100%; height:auto; display:block; }

  /* ── House Logo — single persistent element ─────────
     Lives as fixed-position chrome. Starts at landing
     centre-bottom (acts as scroll cue), then GSAP scrolls
     it to top-right corner where it acts as the burger
     menu button. Same DOM node throughout. */
  .house-cue{
    position:fixed; top:0; left:0;
    width:96px; height:96px;
    z-index:65;
    cursor:pointer;
    visibility:hidden; opacity:0;
    will-change:transform, opacity;
    transform-origin:50% 50%;
  }
  .house-cue .cue-inner{
    display:block; width:100%; height:100%;
    transform-origin:50% 100%; /* bob pivots from the base */
    will-change:transform;
  }
  .house-cue object, .house-cue svg{ width:100%; height:100%; display:block; pointer-events:none; }
  .house-cue:hover{ opacity:0.85; }

  @media(max-width:900px){
    .landing__mark{ width:75vw; }
    .house-cue{ width:64px; height:64px; }
  }

  /* ── 02 HOME / DIVE ──────────────────────────────────── */
  .home{
    /* 100vh pinned panel + 130% pin scroll (script.js end:'+=130%') —
       exactly 230vh so no dead red gap before the About marquee */
    position:relative; height:230vh; height:230svh;
    background:var(--red);
  }
  .home__pin{
    position:relative; height:100vh; height:100svh;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  /* Dive panel: fixed full-viewport size, scaled DOWN to start so we can
     zoom up via transform: scale() (compositor-only, smooth 60fps). */
  .panel{
    position:relative;
    width:100vw; height:100vh; height:100svh;
    background:var(--red);
    overflow:hidden;
    transform:scale(1);
    transform-origin:50% 50%;
    will-change:transform;
  }
  .panel__media{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    background:var(--red); background-size:cover; background-position:center;
    transform:scale(1);
    will-change:transform, opacity;
    visibility:hidden;
    /* subtle filmic tint so video sits on-brand */
    filter:saturate(0.85) contrast(1.05);
  }
  .panel__caption{
    position:absolute; bottom:28px; left:32px; right:32px;
    z-index:3; color:var(--paper);
    display:flex; justify-content:space-between; align-items:flex-end;
    pointer-events:none; opacity:0.92;
  }
  .panel__caption .lede{
    font-weight:900; font-size:clamp(20px, 2.4vw, 32px);
    letter-spacing:-0.01em;
    line-height:1.02;
    max-width:60%;
  }
  .panel__caption .meta{ font-size:12px; font-weight:700; letter-spacing:0.28em; text-transform:uppercase; }

  /* home__cue removed — the traveling .house-cue serves both landing + home roles */

  @media(max-width:900px){
    /* Mobile dive = full-screen video that fills the frame (same look as desktop, no pin) */
    .home{ height:100svh; }
    .panel__media{ object-fit:cover; }
    .panel__caption{ left:18px; right:18px; bottom:18px; flex-direction:column; gap:8px; align-items:flex-start; }
    .panel__caption .lede{ font-size:16px; max-width:100%; }
  }

  /* ── 03 ABOUT (paper) ────────────────────────────────── */
  .about{
    position:relative; background:var(--paper); color:var(--ink);
    padding:0 0 140px;
  }
  .marquee-strip{
    position:relative;
    background:var(--butter);
    border-top:1px solid rgba(10,10,10,0.05);
    border-bottom:1px solid rgba(10,10,10,0.05);
    overflow:hidden;
    height:clamp(80px, 12vw, 180px);
    display:flex; align-items:center;
  }
  .marquee-track{
    display:flex; gap:0.4em;
    white-space:nowrap;
    font-weight:900;
    font-size:clamp(56px, 11vw, 168px);
    line-height:0.9;
    letter-spacing:-0.025em;
    color:var(--ink);
    will-change:transform;
  }
  .marquee-track span{ padding-right:0.35em; }

  .about__inner{
    max-width:1300px; margin:0 auto;
    padding:90px 56px 60px;
    text-align:center;
  }
  .about__inner .lbl{
    color:rgba(10,10,10,0.55); margin-bottom:42px;
  }
  .about__body{
    max-width:620px;
    margin:0 auto;
    font-size:16px; line-height:1.7; color:var(--ink);
    text-align:center;
  }
  .about__body p{ margin-bottom:18px; opacity:0; transform:translateY(20px); }
  .about__body p.welcome{ font-weight:700; font-size:18px; margin-top:18px; }

  @media(max-width:900px){
    .about__inner{ padding:40px 22px 0; }
  }

  /* ── 04 TABLE + FOOD (red) ───────────────────────────── */
  .table-food{
    position:relative; background:var(--red); color:var(--paper);
    padding:0;
  }
  .marquee-strip--butter{
    background:var(--butter); /* stays light blue band across both, like Figma */
  }
  .info{
    max-width:1100px; margin:0 auto;
    padding:90px 56px 60px;
  }
  .info__row{
    display:grid; grid-template-columns:200px 1fr auto;
    gap:24px; align-items:baseline;
    padding:18px 0;
    border-bottom:1px solid var(--rule);
    font-size:14px;
    opacity:0; transform:translateY(14px);
  }
  .info__row .k{ font-size:12px; letter-spacing:0.18em; text-transform:uppercase; opacity:0.75; }
  .info__row .v{ font-weight:400; text-align:right; }
  .info__row .v.right{ text-align:right; }
  .info__row:first-child{ border-top:1px solid var(--rule); }

  .divider{
    display:flex; justify-content:center; padding:60px 0 20px;
  }
  .divider object, .divider svg{ width:130px; height:auto; opacity:0.95; }

  .grid-block{
    max-width:1300px; margin:0 auto;
    padding:0 56px;
  }
  .grid-block .lbl{
    color:rgba(247,247,232,0.65); margin-bottom:22px;
  }
  .img-grid{
    display:grid; grid-template-columns:repeat(4, 1fr);
    gap:18px;
  }
  .img-grid .cell{
    aspect-ratio: 3/4;
    background:#a51005;
    overflow:hidden;
    opacity:0; transform:translateY(30px);
    position:relative;
    cursor:pointer;
  }
  .img-grid .cell img{
    width:100%; height:100%; object-fit:cover;
    transition:transform .8s ease, filter .5s ease;
    filter:saturate(0.9) contrast(1.05);
  }
  .img-grid .cell:hover img{ transform:scale(1.08); filter:saturate(0.7) contrast(1.05) brightness(0.55); }
  .img-grid .cell::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.35) 100%);
    pointer-events:none;
  }
  .img-grid .cell .name{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    color:var(--paper);
    font-weight:700; font-size:18px; letter-spacing:0.04em;
    text-align:center; padding:0 14px;
    opacity:0; transform:translateY(10px);
    transition:opacity .4s ease, transform .4s ease;
    z-index:2; pointer-events:none;
    line-height:1.2;
  }
  .img-grid .cell:hover .name{ opacity:1; transform:translateY(0); }

  /* Food grid is 10 cells → 5×2 on desktop, 2×5 on mobile */
  .img-grid--food{ grid-template-columns:repeat(5, 1fr); }

  @media(max-width:1300px){
    .img-grid--food{ grid-template-columns:repeat(5, 1fr); }
  }
  @media(max-width:1100px){
    .img-grid{ grid-template-columns:repeat(3, 1fr); }
    .img-grid--food{ grid-template-columns:repeat(2, 1fr); }
  }
  @media(max-width:900px){
    .info{ padding:50px 22px 30px; }
    .info__row{ grid-template-columns:1fr; gap:6px; }
    .info__row .v{ text-align:left; }
    .grid-block{ padding:0 22px; }
    .img-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
    .img-grid--food{ grid-template-columns:repeat(2, 1fr); }
    .img-grid .cell .name{ font-size:14px; }
  }

  /* ── 05 DRINKS + FOOTER ──────────────────────────────── */
  .drinks{
    position:relative; background:var(--red); color:var(--paper);
    padding:0 0 120px;
  }
  .drinks .grid-block{ margin-bottom:40px; }
  .drinks .img-grid{ grid-template-columns:repeat(5, 1fr); }
  @media(max-width:1100px){ .drinks .img-grid{ grid-template-columns:repeat(3, 1fr); } }
  @media(max-width:900px){ .drinks .img-grid{ grid-template-columns:repeat(2, 1fr); } }
  .drinks .img-grid .cell{ aspect-ratio: 1194 / 1519; }

  /* footer removed — page ends after #contactInfo */

  /* ── SEO helpers ─────────────────────────────────────── */
  .visually-hidden{
    position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .intro-copy{
    max-width:760px; margin:0 auto 64px; padding:0 22px; text-align:center;
    color:var(--paper);
  }
  .intro-copy p{
    font-size:16px; line-height:1.7; opacity:0.9; margin:0 auto;
    font-weight:300;
  }
  @media(max-width:900px){ .intro-copy{ margin-bottom:44px; } .intro-copy p{ font-size:15px; } }

  /* ── reduced motion ──────────────────────────────────── */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration:0.01ms !important;
      transition-duration:0.01ms !important;
    }
    .home{ height:auto; }
    .home__pin{ position:relative; }
    .landing__mark, .landing__cue,
    .panel__media, .about__body p, .info__row, .img-grid .cell{
      opacity:1 !important; transform:none !important;
    }
  }

  /* ── Floating draggable BOOK NOW pill ────────────────── */
  .book-float{
    position:fixed; top:0; left:0; z-index:60;
    display:inline-flex; align-items:center; justify-content:center;
    padding:16px 26px; border-radius:999px;
    background:var(--red); color:var(--paper);
    font-family:Helvetica, Arial, sans-serif; font-weight:700;
    font-size:15px; letter-spacing:0.14em; text-transform:uppercase;
    text-decoration:none; white-space:nowrap;
    border:1.5px solid var(--paper);
    box-shadow:0 10px 30px rgba(0,0,0,0.28);
    cursor:grab; user-select:none; -webkit-user-select:none;
    touch-action:none; will-change:transform;
    opacity:0; transition:opacity .6s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
  }
  .book-float.is-ready{ opacity:1; }
  .book-float:hover{ background:var(--paper); color:var(--red); box-shadow:0 14px 40px rgba(0,0,0,0.34); }
  .book-float:active{ cursor:grabbing; }
  @media(max-width:560px){ .book-float{ padding:13px 20px; font-size:13px; } }
  @media (prefers-reduced-motion: reduce){
    .book-float{ position:fixed; top:auto; bottom:22px; left:50%; transform:translateX(-50%) !important; }
  }


  /* ── Site-wide sound toggle ──────────────────────────── */
  .sound-toggle{
    position:fixed; left:18px; bottom:18px; z-index:70;
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; padding:0; border-radius:50%;
    background:rgba(211,16,5,0.85); color:var(--paper);
    border:1.5px solid rgba(247,247,232,0.55);
    cursor:pointer; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    box-shadow:0 8px 22px rgba(0,0,0,0.25);
    transition:background .25s ease, color .25s ease, opacity .4s ease; opacity:0;
  }
  .sound-toggle.is-ready{ opacity:0.92; }
  .sound-toggle:hover{ background:var(--paper); color:var(--red); }
  .sound-toggle .ico{ display:inline-flex; }
  .sound-toggle svg{ width:18px; height:18px; display:block; }
  @media(max-width:560px){ .sound-toggle{ left:12px; bottom:12px; width:40px; height:40px; } }

  /* ── Read Menu (PDF) button ──────────────────────────── */
  .menu-cta{ text-align:center; margin:36px auto; }
  .read-menu{
    display:inline-flex; align-items:center; gap:10px;
    padding:13px 28px; border-radius:999px;
    border:1.5px solid var(--paper); color:var(--paper);
    font-family:Helvetica, Arial, sans-serif; font-weight:700;
    font-size:13px; letter-spacing:0.18em; text-transform:uppercase;
    text-decoration:none; cursor:pointer;
    transition:background .25s ease, color .25s ease;
  }
  .read-menu:hover{ background:var(--paper); color:var(--red); }
  .read-menu svg{ width:16px; height:16px; }

  /* ── Burger FAQ accordion (SEO/GEO + viewer help) ────── */
  .burger-menu__faq{
    position:absolute; right:56px; top:clamp(120px, 17vh, 190px); transform:none;
    width:min(36vw,400px); max-height:72vh; overflow-y:auto;
    color:var(--paper); z-index:2; padding-right:6px;
  }
  .faq-eyebrow{ font-size:11px; letter-spacing:0.28em; text-transform:uppercase; opacity:0.55; margin-bottom:12px; font-weight:500; }
  .faq-item{ border-top:1px solid rgba(247,247,232,0.18); }
  .faq-item:last-of-type{ border-bottom:1px solid rgba(247,247,232,0.18); }
  .faq-item summary{
    list-style:none; cursor:pointer; position:relative;
    padding:11px 28px 11px 0;
    font-family:Helvetica, Arial, sans-serif; font-weight:700; font-size:13px; line-height:1.3;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{ content:'+'; position:absolute; right:2px; top:9px; font-size:18px; font-weight:400; opacity:0.7; }
  .faq-item[open] summary::after{ content:'\2013'; }
  .faq-item p{ margin:0 0 13px; font-weight:300; font-size:12.5px; line-height:1.55; opacity:0.85; max-width:46ch; }
  @media(max-width:900px){
    /* Stack everything vertically and let the whole panel scroll on phones */
    .burger-menu{ overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding-bottom:48px; }
    .burger-menu__primary{ position:static; transform:none; margin:84px 0 0; max-width:100%; }
    .burger-menu__primary a{ word-break:break-word; }
    .burger-menu__faq{ position:static; transform:none; width:auto; max-width:100%; max-height:none; overflow:visible; margin:28px 0 8px; }
    .burger-menu__faq summary{ font-size:15px; }
    .burger-menu__brand{ display:none; }
  }
  @media(max-width:480px){
    /* Entry-level phones: shrink the big nav text so it never clips */
    .burger-menu__primary a{ font-size:30px; line-height:1.1; }
    .burger-menu{ padding:20px 18px 44px; }
    .burger-menu__faq summary{ font-size:14.5px; padding-right:26px; }
    .burger-menu__faq p{ font-size:13px; }
  }

  /* ── "Coming Soon" treatment for the Cookbook menu item ── */
  .menu-soon{ position:relative; }
  .menu-soon::before{ /* strike-through line */
    content:''; position:absolute; left:0; right:0; top:52%;
    height:5px; border-radius:3px; background:var(--paper);
    transform:scaleX(0); transform-origin:left center;
    transition:transform .4s cubic-bezier(.6,0,.2,1);
    pointer-events:none; z-index:3;
  }
  .menu-soon.struck::before{ transform:scaleX(1); }
  .menu-soon::after{ /* Coming Soon label */
    content:'Coming Soon';
    position:absolute; left:100%; top:50%;
    transform:translateY(-50%) translateX(12px) scale(0.9);
    font-family:Helvetica, Arial, sans-serif; font-weight:700;
    font-size:14px; letter-spacing:0.22em; text-transform:uppercase;
    color:var(--butter); white-space:nowrap;
    opacity:0; transition:opacity .3s ease .12s, transform .3s ease .12s;
    pointer-events:none;
  }
  .menu-soon.struck::after{ opacity:1; transform:translateY(-50%) translateX(12px) scale(1); }
  @media(max-width:900px){
    .menu-soon::after{ left:0; top:100%; transform:translateY(2px) scale(0.9); font-size:12px; }
    .menu-soon.struck::after{ transform:translateY(2px) scale(1); }
  }