:root {
        --black:#0a0907;
        --deep:#100e0b;
        --dark:#1a1612;
        --teal:#1d4a47;
        --gold:#c9a96e;
        --gold-dim:#8a6f3f;
        --cream:#e8dcc8;
        --cream-dim:#b8a888;
        --white:#f5f0e8;
      }
      *,*::before,*::after {
        margin:0;
        padding:0;
        box-sizing:border-box
      }
      html {
        scroll-behavior:smooth
      }
      body {
        background:var(--black);
        color:var(--cream);
        font-family:'Cormorant Garamond',serif;
        overflow-x:hidden;
        /* cursor handled in site.css */}
      body::before {
        content:'';
        position:fixed;
        inset:0;
        background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
        opacity:.035;
        pointer-events:none;
        z-index:100
      }
      .cursor {
        width:10px;
        height:10px;
        border-radius:50%;
        background:var(--gold);
        position:fixed;
        top:0;
        left:0;
        pointer-events:none;
        z-index:9999;
        transform:translate(-50%,-50%);
        mix-blend-mode:difference;
        transition:width .2s,height .2s
      }
      .cursor-ring {
        width:36px;
        height:36px;
        border:1px solid var(--gold);
        border-radius:50%;
        position:fixed;
        top:0;
        left:0;
        pointer-events:none;
        z-index:9998;
        transform:translate(-50%,-50%);
        opacity:.5
      }
      nav {
        position:fixed;
        top:0;
        left:0;
        right:0;
        z-index:500;
        padding:24px clamp(32px,6vw,80px);
        display:flex;
        align-items:center;
        justify-content:space-between;
        transition:background .4s
      }
      nav.scrolled {
        background:rgba(10,9,7,.95);
        backdrop-filter:blur(8px)
      }
      .nav-logo img {
        height:40px;
        width:auto;
        display:block
      }
      .nav-links {
        display:flex;
        gap:clamp(20px,3vw,44px);
        list-style:none;
        align-items:center
      }
      .nav-links a {
        font-family:'Josefin Sans',sans-serif;
        font-size:10px;
        font-weight:300;
        letter-spacing:.35em;
        text-transform:uppercase;
        color:var(--cream-dim);
        text-decoration:none;
        transition:color .25s
      }
      .nav-links a:hover,.nav-links a.active {
        color:var(--gold)
      }
      .nav-reserve {
        border:1px solid rgba(201,169,110,.4);
        padding:10px 22px;
        color:var(--cream)!important;
        transition:all .3s!important
      }
      .nav-reserve:hover {
        background:var(--gold);
        color:var(--black)!important;
        border-color:var(--gold)!important
      }
      .nav-burger {
        display:none;
        flex-direction:column;
        gap:5px;
        cursor:pointer;
        background:none;
        border:none;
        padding:4px
      }
      .nav-burger span {
        display:block;
        width:24px;
        height:1px;
        background:var(--cream)
      }
      .nav-mobile {
        display:none;
        position:fixed;
        inset:0;
        background:var(--black);
        z-index:490;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:32px
      }
      .nav-mobile.open {
        display:flex
      }
      .nav-mobile a {
        font-family:'Playfair Display',serif;
        font-size:clamp(28px,6vw,48px);
        font-style:italic;
        color:var(--white);
        text-decoration:none
      }
      .nav-mobile a:hover {
        color:var(--gold)
      }
      .section-label {
        font-family:'Josefin Sans',sans-serif;
        font-size:10px;
        font-weight:100;
        letter-spacing:.4em;
        text-transform:uppercase;
        color:var(--gold);
        margin-bottom:28px;
        display:flex;
        align-items:center;
        gap:16px
      }
      .section-label::before {
        content:'';
        display:block;
        width:32px;
        height:1px;
        background:var(--gold)
      }
      footer {
        border-top:1px solid rgba(201,169,110,.15);
        padding:36px clamp(32px,6vw,80px);
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:24px;
        flex-wrap:wrap
      }
      .footer-logo img {
        height:44px;
        width:auto
      }
      .footer-middle {
        font-family:'Josefin Sans',sans-serif;
        font-size:10px;
        font-weight:100;
        letter-spacing:.3em;
        text-transform:uppercase;
        color:var(--cream-dim);
        text-align:center
      }
      .footer-links {
        display:flex;
        gap:24px
      }
      .footer-links a {
        font-family:'Josefin Sans',sans-serif;
        font-size:10px;
        font-weight:100;
        letter-spacing:.3em;
        text-transform:uppercase;
        color:var(--gold-dim);
        text-decoration:none;
        transition:color .2s
      }
      .footer-links a:hover {
        color:var(--gold)
      }
      .reveal {
        opacity:0;
        transform:translateY(36px);
        transition:opacity .9s ease,transform .9s ease
      }
      .reveal.visible {
        opacity:1;
        transform:none
      }
      .page-hero {
        min-height:60vh;
        display:flex;
        align-items:flex-end;
        position:relative;
        overflow:hidden
      }
      .page-hero-bg {
        position:absolute;
        inset:0;
        background-image:url('/assets/images/photos/menu-hero.jpg');
        background-image:image-set(
          url('/assets/images/photos/menu-hero.webp') type('image/webp'),
          url('/assets/images/photos/menu-hero.jpg') type('image/jpeg')
        );
        background-size:cover;
        background-position:center
      }
      @media (max-width:768px) {
        .page-hero-bg {
          background-image:url('/assets/images/photos/menu-hero-1200.jpg');
          background-image:image-set(
            url('/assets/images/photos/menu-hero-1200.webp') type('image/webp'),
            url('/assets/images/photos/menu-hero-1200.jpg') type('image/jpeg')
          )
        }
      }
      .page-hero-bg::after {
        content:'';
        position:absolute;
        inset:0;
        background:linear-gradient(to top,rgba(10,9,7,.85) 0%,rgba(10,9,7,.2) 40%,rgba(10,9,7,0) 100%)
      }
      .page-hero-content {
        position:relative;
        z-index:2;
        padding:clamp(40px,6vw,80px);
        padding-bottom:clamp(60px,8vw,100px)
      }
      .page-title {
        font-family:'Playfair Display',serif;
        font-size:clamp(48px,8vw,110px);
        font-weight:700;
        line-height:.9;
        color:var(--white);
        letter-spacing:-.02em
      }
      .page-title em {
        font-style:italic;
        color:var(--gold)
      }
      @keyframes fadeUp {
        from {
          opacity:0;
          transform:translateY(30px)
        }
        to {
          opacity:1;
          transform:none
        }
      }
      @media(max-width:760px) {
        .nav-links {
          display:none
        }
        .nav-burger {
          display:flex
        }
        footer {
          flex-direction:column;
          align-items:center;
          text-align:center
        }
      }
      /* tabs */
      .tab-nav {
        display:flex;
        gap:0;
        border-bottom:1px solid rgba(201,169,110,.2);
        padding:0 clamp(32px,6vw,80px);
        background:var(--deep);
        position:sticky;
        top:88px;
        z-index:100;
        overflow-x:auto
      }
      .tab-btn {
        font-family:'Josefin Sans',sans-serif;
        font-size:10px;
        font-weight:300;
        letter-spacing:.35em;
        text-transform:uppercase;
        color:var(--cream-dim);
        background:none;
        border:none;
        cursor:pointer;
        padding:20px 28px;
        border-bottom:2px solid transparent;
        transition:all .3s;
        white-space:nowrap
      }
      .tab-btn:hover {
        color:var(--cream)
      }
      .tab-btn.active {
        color:var(--gold);
        border-bottom-color:var(--gold)
      }
      .tab-panel {
        display:none;
        padding:clamp(60px,8vw,100px) clamp(32px,6vw,80px)
      }
      .tab-panel.active {
        display:block
      }
      /* menu items */
      .menu-cat {
        margin-bottom:clamp(56px,7vw,90px)
      }
      .menu-cat-header {
        margin-bottom:36px
      }
      .menu-cat-title {
        font-family:'Playfair Display',serif;
        font-size:clamp(28px,4vw,48px);
        font-style:italic;
        color:var(--white);
        margin-bottom:6px
      }
      .menu-cat-sub {
        font-family:'Josefin Sans',sans-serif;
        font-size:9px;
        letter-spacing:.35em;
        text-transform:uppercase;
        color:var(--gold-dim)
      }
      .menu-grid {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:1px;
        background:rgba(201,169,110,.1);
        border:1px solid rgba(201,169,110,.08)
      }
      .menu-item {
        background:var(--black);
        padding:24px 28px;
        transition:background .3s;
        position:relative
      }
      .menu-item::after {
        content:'';
        position:absolute;
        bottom:0;
        left:0;
        width:0;
        height:1px;
        background:var(--gold);
        transition:width .4s
      }
      .menu-item:hover {
        background:rgba(29,74,71,.15)
      }
      .menu-item:hover::after {
        width:100%
      }
      .menu-item-name {
        font-family:'Josefin Sans',sans-serif;
        font-size:11px;
        font-weight:400;
        letter-spacing:.2em;
        text-transform:uppercase;
        color:var(--white);
        margin-bottom:6px
      }
      .menu-item-desc {
        font-size:14px;
        font-weight:300;
        color:var(--cream-dim);
        line-height:1.6;
        font-style:italic
      }
      .menu-item-price {
        font-family:'Josefin Sans',sans-serif;
        font-size:11px;
        letter-spacing:.15em;
        color:var(--gold);
        margin-top:10px
      }
      .menu-list {
        display:grid;
        gap:1px;
        background:rgba(201,169,110,.1);
        border:1px solid rgba(201,169,110,.08)
      }
      .menu-list-item {
        background:var(--black);
        padding:18px 28px;
        display:flex;
        justify-content:space-between;
        align-items:baseline;
        gap:24px;
        transition:background .3s
      }
      .menu-list-item:hover {
        background:rgba(29,74,71,.15)
      }
      .menu-list-name {
        font-size:clamp(14px,1.2vw,16px);
        font-weight:300;
        color:var(--cream);
        flex:1
      }
      .menu-list-detail {
        font-size:13px;
        font-weight:300;
        font-style:italic;
        color:var(--cream-dim);
        flex:2
      }
      .menu-list-price {
        font-family:'Josefin Sans',sans-serif;
        font-size:11px;
        letter-spacing:.1em;
        color:var(--gold);
        white-space:nowrap
      }
      .menu-compact {
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:1px;
        background:rgba(201,169,110,.1);
        border:1px solid rgba(201,169,110,.08)
      }
      .menu-compact-item {
        background:var(--black);
        padding:20px 24px;
        transition:background .3s
      }
      .menu-compact-item:hover {
        background:rgba(29,74,71,.15)
      }
      .menu-compact-name {
        font-family:'Josefin Sans',sans-serif;
        font-size:10px;
        letter-spacing:.2em;
        text-transform:uppercase;
        color:var(--white);
        margin-bottom:4px
      }
      .menu-compact-price {
        font-family:'Josefin Sans',sans-serif;
        font-size:11px;
        color:var(--gold)
      }
      .menu-illo {
        text-align:center;
        padding:32px 0;
        opacity:.2
      }
      .menu-illo img {
        width:clamp(100px,14vw,180px)
      }
      .menu-disclaimer {
        font-family:'Josefin Sans',sans-serif;
        font-size:9px;
        letter-spacing:.2em;
        text-transform:uppercase;
        color:var(--gold-dim);
        text-align:center;
        padding:0 0 40px;
        line-height:1.8;
        margin-top:40px
      }
      @media(max-width:700px) {
        .menu-grid {
          grid-template-columns:1fr
        }
        .menu-compact {
          grid-template-columns:1fr 1fr
        }
        .menu-list-item {
          flex-direction:column;
          gap:6px
        }
      }

      /* --- orphan-fill: eliminate parent-tint bleed in trailing empty tracks
         ------------------------------------------------------------------
         The 2-col .menu-grid and 3-col .menu-compact draw their "cell"
         visual by tinting the parent grid and covering each track with an
         opaque item. When item count isn't a multiple of the column count,
         the trailing empty track(s) let the tint show through — the "brown
         box". Since the client edits menu items freely in the CP, any
         section could hit any count. These rules make every possible
         orphan configuration span the full row so no empty track remains
         in any tab, on any viewport, at any count.
         --------------------------------------------------------------- */

      /* 2-col .menu-grid — one possible orphan case (odd count) */
      .menu-grid .menu-item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
      }

      /* 3-col .menu-compact — three possible orphan configurations:
           count % 3 == 0 → no orphan (perfect row)
           count % 3 == 1 → last item alone in its row
           count % 3 == 2 → last TWO items in a row, one empty cell trails
         For count%3==2 we split the two orphans across their own full-
         width rows rather than leaving a lopsided 2-in-a-3-col-row. */
      .menu-compact .menu-compact-item:last-child:nth-child(3n + 1),
      .menu-compact .menu-compact-item:nth-last-child(2):nth-child(3n + 1),
      .menu-compact .menu-compact-item:last-child:nth-child(3n + 2) {
        grid-column: 1 / -1;
      }

      /* At <=700px, .menu-compact drops to 2 cols. The 3-col rules above
         still match at any breakpoint (they're structural), so we must
         neutralize them and apply the 2-col odd-orphan rule instead. */
      @media (max-width: 700px) {
        .menu-compact .menu-compact-item:last-child:nth-child(3n + 1),
        .menu-compact .menu-compact-item:nth-last-child(2):nth-child(3n + 1),
        .menu-compact .menu-compact-item:last-child:nth-child(3n + 2) {
          grid-column: auto;
        }
        .menu-compact .menu-compact-item:last-child:nth-child(odd) {
          grid-column: 1 / -1;
        }
      }

      /* .menu-list is single-column at every breakpoint — no orphan issue. */