@font-face {
    font-family: 'Satisfaction';
    src: url('../fonts/Satisfaction.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ── mobile default ─────────────────────────────────── */
:root {
    /* Colors */
    --color-dark: #152116;
    --color-primary: #51744A ;
    --color-light: #CBDDBF;
    --color-accent: #876E37;
    --color-cream: #FFECD7;
    /* UI */
    --color-divider: rgba(203, 221, 191, 0.25);
    --color-overlay: rgba(21, 33, 22, 0.6);
    /* Body layout — gap between header/main/footer + their margins */
    --body-gap: 0vw;
    --body-margin-x: 0vw;
    --body-margin-y: 0vw;
    /* Hero gradient overlay — top */
    --overlay-top-hold: 36%;
    /* how far down it stays fully dark */
    --overlay-top-fade: 67%;
    /* where it becomes fully transparent */
    /* Hero gradient overlay — bottom */
    --overlay-bot-hold: 100%;
    /* how far up it stays fully dark */
    --overlay-bot-fade: 50%;
    /* where it becomes fully transparent */
    /* Header — top bar icons (tuned at 390px) */
    --icon-size-map: 4vw;
    --icon-offset-map-x: -22%;
    --icon-offset-map-y: 24%;
    --icon-size-phone: 4.4vw;
    --icon-offset-phone-x: 0%;
    --icon-offset-phone-y: 30.6%;
    --icon-size-instagram: 5.1vw;
    --icon-offset-instagram-x: -4%;
    --icon-offset-instagram-y: 25%;
    /* Header — top bar (tuned at 390px) */
    --topbar-height: clamp(20px, 15.3vw, 4rem);
    /* equal thirds on mobile (icons only); proportional at desktop */
    --topbar-col-1: 1fr;
    --topbar-col-2: 1fr;
    --topbar-col-3: 1fr;
    /* Header — logo + hamburger (tuned at 390px) */
    --logo-width: clamp(140px, 37vw, 384px);
    --logo-offset-x: -2%;
    --logo-offset-y: -8%;
    --hamburger-size: 4.2vw;
    --hamburger-filter: brightness(0) invert(1);
    --hamburger-offset-x: 36%;
    --hamburger-offset-y: -25%;
    --hero-bottom-padding: 6.2vw 5.1vw 0vw 5.1vw;
    /* Header — hero */
    --hero-aspect-ratio: 139/100;
    /* caps the VISIBLE hero photo height (both pages). The menu variant adds
       --menu-nav-height on top of this so its visible height matches home's. */
    --hero-img-visible-max: 53rem;
    --hero-img-x: 51%;
    --hero-img-y: 1%;
    --hero-img-origin-y: 17%;
    --hero-img-scale: 1.15;
    /* Nav overlay */
    --nav-transition: 0.15s;
    --nav-close-size: 4.2vw;
    --nav-side-padding: 4.8vw;
    --nav-top-padding: 18.8vw;
    --nav-item-gap: 7.4vw;
    --nav-btn-menu-size: 7vw;
    --nav-btn-bb-size: 7vw;
    --nav-home-size: 2.4vw;
    --nav-home-weight: 400;
    --nav-home-tracking: var(--tracking-heading);
    --nav-home-offset-x: 0%;
    --nav-home-offset-y: 50%;
    --nav-btn-menu-offset-x: 0%;
    --nav-btn-menu-offset-y: 0%;
    --nav-btn-bb-offset-x: 0%;
    --nav-btn-bb-offset-y: 0%;
    /* Home intro section (tuned at 390px) */
    --intro-pad-top: 9.9vw;
    --intro-pad-bottom: 0vw;
    --intro-pad-x: 10vw;
    --intro-heading-weight: 400;
    --intro-heading-size: 4.5vw;
    --intro-heading-lh: 1.10;
    --intro-heading-tracking: 0.215em;
    --intro-heading-stretch: 0.95;
    --intro-heading-offset-x: 1%;
    --intro-heading-offset-y: 8%;
    --intro-divider-width: 1px;
    --intro-divider-height: 35.5vw;
    --intro-divider-gap: 9.4vw;
    --intro-divider-offset-x: -101%;
    --intro-divider-offset-y: 5%;
    --intro-byline-size: 3.4vw;
    --intro-byline-lh: 1.13;
    --intro-byline-weight: 400;
    --intro-byline-tracking: var(--tracking-body);
    --intro-byline-offset-x: 2%;
    --intro-byline-offset-y: -12%;
    /* Home cocktail section (tuned at 390px) */
    --cocktail-pad-top: 17vw;
    --cocktail-pad-bottom: 10vw;
    --cocktail-pad-x: 5.1vw;
    --cocktail-offset-x: 0%;
    --cocktail-offset-y: 0%;
    --cocktail-arch-width: 80.0vw;
    --cocktail-arch-height: 88.1vw;
    --cocktail-arch-radius: 9999px;
    --cocktail-img-x: 50%;
    --cocktail-img-y: 81%;
    --cocktail-img-scale: 1;
    --cocktail-stamp-size: 26vw;
    --cocktail-stamp-top: -5vw;
    --cocktail-stamp-right: 5vw;
    /* Home menu CTA section (tuned at 390px) */
    --menu-cta-pad-top: 12vw;
    --menu-cta-pad-bottom: 18vw;
    --menu-cta-pad-x: 10vw;
    --menu-cta-group-offset-x: 0%;
    --menu-cta-group-offset-y: 0%;
    --menu-cta-leaves-size: 38vw;
    --menu-cta-leaves-opacity: 0.5;
    --menu-cta-leaves-filter: brightness(0.85);
    --menu-cta-leaves-offset-x: 0%;
    --menu-cta-leaves-offset-y: 5%;
    --menu-cta-size: 4.1vw;
    --menu-cta-weight: 400;
    --menu-cta-tracking: 0.25em;
    --menu-cta-offset-x: 0%;
    --menu-cta-offset-y: -10%;
    /* Home gallery section (tuned at 390px) */
    --gallery-pad-top: 7.5vw;
    --gallery-pad-bottom: 0vw;
    --gallery-pad-left: 0vw;
    --gallery-height: 85vw;
    --gallery-img-width: 90vw;
    --gallery-gap: 2vw;
    --gallery-pad-right: 0vw;
    --gallery-img-x: 50%;
    /* default crop x — overridden per-image in JS */
    --gallery-img-y: 50%;
    /* default crop y — overridden per-image in JS */
    --gallery-img-scale: 1;
    /* default zoom  — overridden per-image in JS */
    /* Home hours section (tuned at 390px) */
    --hours-pad-top: 8vw;
    --hours-pad-x: 10vw;
    --hours-heading-size: 3.5999999999999996vw;
    --hours-heading-tracking: 0.3em;
    --hours-heading-weight: 400;
    --hours-heading-offset-x: 6%;
    --hours-heading-offset-y: 99%;
    --hours-heading-gap: 6vw;
    --hours-schedule-pad-top: 6vw;
    --hours-schedule-gap: 4.6vw;
    --hours-schedule-offset-x: -0%;
    --hours-schedule-offset-y: 0%;
    --hours-block-gap: 0vw;
    --hours-block-1-offset-x: 1%;
    --hours-block-1-offset-y: 3%;
    --hours-block-2-offset-x: -4%;
    --hours-block-2-offset-y: 7%;
    --hours-block-3-offset-x: 0%;
    --hours-block-3-offset-y: 0%;
    --hours-text-style: normal;
    --hours-text-size: 2.3vw;
    --hours-text-lh: 1.2;
    --hours-text-weight: 400;
    --hours-text-tracking: 0.1em;
    --hours-closed-weight: 600;
    --hours-line-height: 33vw;
    --hours-line-gap: 6vw;
    --hours-line-width: 1px;
    --hours-line-offset-x: 0%;
    --hours-line-offset-y: 0%;
    /* Home golden hour section (tuned at 390px) */
    /* note(don): first don defined variable. rest are autogenerated. */
    --golden-sec-gap: 7vw; /* is vw bad here? */
    --golden-pad-top: 13vw;
    --golden-pad-bottom: 8vw;
    --golden-pad-x: 5.1vw;
    --golden-line-height: 6vw;
    --golden-heading-size: 4.6vw;
    --golden-heading-lh: 1.1;
    --golden-heading-tracking: 0.19em;
    --golden-heading-weight: 400;
    --golden-heading-offset-x: 27.5%;
    --golden-heading-offset-y: 4%;
    --golden-heading-line2-offset-x: 69%;
    --golden-heading-line2-offset-y: 0%;
    --golden-cocktail-size: 20vw;
    --golden-cocktail-offset-x: 6%;
    --golden-cocktail-offset-y: -5%;
    --golden-times-size: 2.5vw;
    --golden-times-lh: 1.5;
    --golden-times-tracking: 0.05em;
    --golden-times-offset-x: -24.1%;
    --golden-times-offset-y: 14%;
    --golden-times-line2-offset-x: 0%;
    --golden-times-line2-offset-y: 52%;
    --golden-times-line3-offset-x: 0%;
    --golden-times-line3-offset-y: 29%;
    --golden-note-size: 3.1vw;
    --golden-note-lh: 1.4;
    --golden-note-tracking: 0.05em;
    --golden-note-gap: var(--golden-pad-top);    
    --golden-note-offset-x: 0%;
    --golden-note-offset-y: -78%;
    --golden-col-gap: 3vw;
    /* Home see you soon section (tuned at 390px) */
    --seeya-pad-bottom: 12vw;
    --seeya-line-height: 6vw;
    --seeya-ball-size: 32vw;
    --seeya-ball-filter: none;
    --seeya-ball-offset-x: 0%;
    --seeya-ball-offset-y: 0%;
    --seeya-text-size: clamp(24px, 9.2vw, 72px);
    --seeya-text-offset-x: 0%;
    /* small optical nudge from centered-on-the-ball — dial live; was -247% when
       flex+translate was faking the overlap (also needed -150% at desktop) */
    --seeya-text-offset-y: 35%;
    --seeya-gap: 5vw;
    /* Menu page (tuned at 390px) */
    --menu-header-z-index: 100;
    --menu-header-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
    --menu-hero-pad-bottom: 0vw;
    /* Menu hero photo */
    --menu-nav-height: 41vw;
    /* = home hero box height (100vw ÷ 139/100 ≈ 72vw). The nav is transparent
       and overlays the photo's top (like the home page), so the box matches
       home's directly — do NOT add --menu-nav-height. */
    --menu-hero-height: 72vw;
    --menu-hero-img-x: 51%;
    --menu-hero-img-y: 1%;
    --menu-hero-img-scale: 1.15;
    /* OUR MENU heading section */
    --menu-heading-pad-top: 23vw;
    --menu-heading-pad-bottom: 12vw;
    --menu-heading-pad-x: 8vw;
    --menu-heading-leaves-size: 35vw;
    --menu-heading-leaves-opacity: 0.25;
    --menu-heading-leaves-filter: none;
    --menu-heading-leaves-offset-x: 0%;
    --menu-heading-leaves-offset-y: 0%;
    --menu-heading-title-size: 3.85vw;
    --menu-heading-title-weight: 400;
    --menu-heading-title-tracking: 0.3em;
    --menu-heading-title-lh: 1;
    --menu-heading-title-offset-x: 2%;
    --menu-heading-title-offset-y: 11%;
    --menu-pad-top: 14vw;
    --menu-pad-x: 3.0999999999999943vw;
    /* Group body */
    --menu-body-pad-top: 1vw;
    --menu-body-pad-bottom: 2vw;
    --menu-body-pad-left: 0vw;
    --menu-body-pad-right: 0vw;
    --menu-body-gap: 0vw;
    --menu-group-margin-y: 0vw;
    /* Label column */
    --menu-group-gap: .5vw;
    --menu-label-width: 5.1vw;
    --menu-label-size: 4.8vw;
    --menu-label-tracking: 0.25em;
    --menu-label-weight: 400;
    --menu-label-pad-top: 6vw;
    /* where the rotated label pins while scrolling its group, and the line
       updateActiveLabel() uses to pick the active/glowing group — keep the two
       in sync. Must be a plain px value (the JS reads it). 0 = the very top. */
    --menu-label-sticky-top: 0px;
    --menu-label-line-width: 0px;
    --menu-label-line-gap: 0vw;
    --menu-label-inactive-opacity: 0.35;
    --menu-label-active-color:  #FFD166;
    --menu-label-active-glow:   0 0 6px #FFD166, 0 0 14px #FFD166, 0 0 28px rgba(255, 209, 102, 0.5);
    /* Item row */
    --menu-item-row-gap: 4vw;
    --menu-item-pad-y: 1.1vw;
    --menu-item-pad-left: 2vw;
    --menu-item-pad-right: 4vw;
    --menu-item-name-size: 3.1vw;
    --menu-item-name-weight: 400;
    --menu-item-name-tracking: 0.15em;
    --menu-item-name-lh: 1.1;
    --menu-item-price-size: clamp(18px, 3.5vw, 44px);
    --menu-item-desc-size: 2.4vw;
    --menu-item-desc-lh: 1.35;
    --menu-item-desc-tracking: 0.04em;
    --menu-item-desc-weight: 400;
    --menu-item-desc-opacity: 0.65;
    --menu-item-desc-pad-top: 0.8vw;
    --menu-item-profile-size: 2.4vw;
    --menu-item-profile-weight: 400;
    --menu-item-profile-tracking: 0.06em;
    --menu-item-profile-lh: 1.3;
    --menu-item-profile-pad-top: 0.6vw;
    --menu-item-variant-gap: 0.8vw;
    --menu-item-variant-label-gap: 1.5vw;
    --menu-item-variant-label-size: 2.2vw;
    --menu-tag-size: 1.8vw;
    --menu-tag-weight: 400;
    --menu-tag-tracking: 0.15em;
    --menu-tag-gap: 2vw;
    --menu-tag-pad-top: 1.2vw;
    --menu-note-size: 2.4vw;
    --menu-note-tracking: 0.05em;
    --menu-note-lh: 1.4;
    --menu-note-pad-y: 3vw;
    --menu-divider-color: var(--color-divider);
    /* Arch photo */
    --menu-photo-pad-top: 6vw;
    --menu-photo-pad-bottom: 2vw;
    --menu-photo-pad-right: 3vw;
    --menu-photo-pad-left: 3vw;
    --menu-arch-height: 81vw;
    --menu-arch-border-width: -2px;
    --menu-arch-img-x: 50%;
    --menu-arch-img-y: 50%;
    /* Illustration blocks */
    --menu-illus-pad-top: 6vw;
    --menu-illus-pad-bottom: 0vw;
    --menu-illus-border-width: 2px;
    --menu-illus-box-min-height: 33vw;
    --menu-illus-inner-pad-top: 4vw;
    --menu-illus-inner-pad-bottom: 0vw;
    --menu-illus-inner-pad-x: 0vw;
    /* illustration_golden_hour */
    --menu-illus-golden-icon-size: 19vw;
    --menu-illus-golden-icon-offset-x: 0%;
    --menu-illus-golden-icon-offset-y: -6%;
    --menu-illus-golden-inner-gap: 4vw;
    --menu-illus-golden-inner-justify: flex-start;
    --menu-illus-golden-lines-gap: 1.5vw;
    --menu-illus-golden-lines-offset-x: 0%;
    --menu-illus-golden-lines-offset-y: 0%;
    --menu-illus-golden-line-size: 2.5vw;
    --menu-illus-golden-line-lh: 1.5;
    --menu-illus-golden-line-tracking: 0.05em;
    --menu-illus-golden-line-weight: 400;
    --menu-illus-golden-line1-offset-x: 0%;
    --menu-illus-golden-line1-offset-y: 0%;
    --menu-illus-golden-line2-offset-x: 18%;
    --menu-illus-golden-line2-offset-y: 0%;
    --menu-illus-golden-line3-offset-x: 4%;
    --menu-illus-golden-line3-offset-y: -59%;
    /* illustration_sparkling */
    --menu-illus-sparkling-icon-size: 32vw;
    --menu-illus-sparkling-icon-offset-x: 0%;
    --menu-illus-sparkling-icon-offset-y: 0%;
    --menu-illus-sparkling-inner-justify: center;
    --menu-illus-sparkling-line1-offset-x: -23%;
    --menu-illus-sparkling-line1-offset-y: 13%;
    --menu-illus-sparkling-line2-offset-x: 0%;
    --menu-illus-sparkling-line2-offset-y: 0%;
    --menu-illus-sparkling-line3-offset-x: 0%;
    --menu-illus-sparkling-line3-offset-y: 0%;
    --menu-illus-sparkling-inner-pad-top: 0vw;
    --menu-illus-sparkling-inner-pad-bottom: 0vw;
    --menu-illus-sparkling-inner-pad-x: 0vw;
    /* Featured item */
    --menu-featured-pad-y: 10vw;
    --menu-featured-pad-x: 8vw;
    --menu-featured-name-size: 4.6vw;
    --menu-featured-name-tracking: 0.2em;
    --menu-featured-name-weight: 400;
    --menu-featured-name-lh: 1.1;
    --menu-featured-price-size: clamp(20px, 6vw, 48px);
    --menu-featured-desc-size: 3vw;
    --menu-featured-desc-lh: 1.4;
    --menu-featured-desc-tracking: 0.05em;
    --menu-featured-desc-pad-top: 2vw;
    --menu-featured-divider-height: 6vw;
    /* Footer — location map (tuned at 390px) */
    --map-height: 76vw;
    --map-fade-duration: 0.35s;
    --map-controls-bottom: 3vw;
    --map-controls-right: 3vw;
    --map-controls-size: 9vw;
    --map-controls-font-size: 5vw;
    --map-controls-bg: var(--color-cream);
    --map-controls-bg-hover: #e8e0d0;
    --map-controls-color: var(--color-dark);
    --map-controls-border: rgba(0,0,0,0.2);
    --map-controls-shadow: 0 1px 4px rgba(0,0,0,0.25);
    /* Footer — interior photo (tuned at 390px) */
    --footer-photo-height: 63vw;
    --footer-photo-margin: 4vw 0 0 0;
    --footer-photo-img-x: 50%;
    --footer-photo-img-y: 50%;
    --footer-photo-img-scale: 1;
    /* Footer — contact section (tuned at 390px) */
    --footer-contact-pad-top: 8vw;
    --footer-contact-pad-bottom: 10vw;
    --footer-contact-pad-x: 7.3vw;
    --footer-contact-group-gap: 10vw;
    --footer-heading-size: 3.1vw;
    --footer-heading-tracking: 0.25em;
    --footer-heading-weight: 400;
    --footer-heading-lh: 1.2;
    --footer-heading-gap: 3vw;
    --footer-heading-offset-x: 0%;
    --footer-heading-offset-y: 0%;
    --footer-phone-style: normal;
    --footer-phone-size: 3.1vw;
    --footer-phone-tracking: 0.1em;
    --footer-phone-weight: 400;
    --footer-phone-lh: 1.3;
    --footer-phone-offset-x: 0%;
    --footer-phone-offset-y: 0%;
    --footer-social-gap: 5.1vw;
    --footer-social-icon-size: 8vw;
    --footer-social-icon-filter: brightness(0) invert(0.9);
    --footer-social-placeholder-size: 3.5vw;
    --footer-social-offset-x: 0%;
    --footer-social-offset-y: 0%;
    --footer-bb-size: 3.1vw;
    --footer-bb-tracking: 0.25em;
    --footer-bb-weight: 400;
    --footer-bb-lh: 1.2;
    --footer-bb-gap: 10vw;
    --footer-bb-offset-x: 0%;
    --footer-bb-offset-y: 0%;
    --footer-legal-size: 2.5vw;
    --footer-legal-tracking: 0.05em;
    --footer-legal-weight: 400;
    --footer-legal-lh: 1.3;
    --footer-legal-gap: 8vw;
    --footer-legal-offset-x: 0%;
    --footer-legal-offset-y: 0%;
    /* Fonts */
    --font-heading: 'EB Garamond', 'Garamond', serif;
    --font-price: 'Satisfaction', serif;
    /* Font sizes — fluid, bounded by mobile min and desktop max */
    --text-heading: clamp(30px, 7vw, 64px);
    --text-subheading: clamp(22px, 5.3vw, 48px);
    --text-body: clamp(16px, 4.1vw, 37px);
    --text-price: clamp(30px, 7vw, 64px);
    /* Letter spacing */
    --tracking-heading: 0.2em;
    --tracking-subheading: 0.2em;
    --tracking-body: 0.1em;
    --tracking-price: 0;
    /* Heading style helpers */
    --heading-style: italic;
    --heading-transform: uppercase;
}

/* ── tablet 768px+ ──────────────────────────────────── */
@media (min-width: 768px) {
    :root {
        --hero-aspect-ratio: 16/9;
        --topbar-height: 6.5vw;
        /* 50px at 768px */
        --icon-size-map: 2.6vw;
        /* 20px at 768px */
        --icon-size-phone: 2.7vw;
        /* 21px at 768px */
        --icon-size-instagram: 3.1vw;
        /* 24px at 768px */
        --hamburger-size: 2.3vw;
        /* 18px at 768px */
        --hero-bottom-padding: 3.9vw 3.3vw;
    }
}

/* ── desktop 820px+ ─────────────────────────────────── */
@media (min-width: 820px) {
    :root {
        /* Header */
        --topbar-height: 5.0vw;
        --icon-size-map: 2.2vw;
        --icon-size-phone: 2.3vw;
        --icon-size-instagram: 2.7vw;
        --hamburger-size: 2vw;
        --hero-bottom-padding: 2.5vw 6.3vw 2.5vw 6.3vw;
        --hero-aspect-ratio: 180/90;
        /* Top bar labels */
        --topbar-label-size: 1.5vw;
        --topbar-label-tracking: 0.05em;
        --topbar-label-gap: 2.4vw;
        /* proportional columns (fr) — ratio holds at any width; dial live */
        --topbar-col-1: 1.95fr;   /* address — widest */
        --topbar-col-2: 1.44fr;   /* phone */
        --topbar-col-3: 1fr;     /* instagram — narrowest */
        /* Desktop inline nav */

        --bar-offset-x: 0%;
        --bar-offset-y: 0%;
        --nav-offset-x: 0%;
        --nav-offset-y: 17%;
        --nav-desktop-gap: 3vw;
        --nav-home-size: 1.5vw;
        --nav-home-offset-x: 0%;
        --nav-home-offset-y: 0%;
        --nav-btn-menu-size: 4.5vw;
        --nav-btn-bb-size: 4.5vw;
        /* Home intro (two-column) */
        --intro-pad-top: 5vw;
        --intro-pad-bottom: 6vw;
        --intro-pad-x: 5vw;
        --intro-col-gap: 4vw;
        --intro-heading-size: 2.2vw;
        --intro-heading-lh: 1.10;
        --intro-heading-tracking: 0.215em;
        --intro-heading-stretch: 0.95;
        --intro-heading-offset-x: 0%;
        --intro-heading-offset-y: 0%;
        --intro-divider-height: 23vw;
        --intro-divider-gap: 3vw;
        --intro-divider-offset-x: 0%;
        --intro-divider-offset-y: 0%;
        --intro-byline-size: 1.7vw;
        --intro-byline-lh: 1.4;
        --intro-byline-offset-x: 0%;
        --intro-byline-offset-y: 0%;
        /* Home cocktail */
        --cocktail-pad-top: 3vw;
        --cocktail-pad-bottom: 5vw;
        --cocktail-pad-x: 5vw;
        --cocktail-arch-width: 100%;
        --cocktail-arch-height: 42vw;
        --cocktail-offset-x: 0%;
        --cocktail-offset-y: 0%;
        --cocktail-stamp-size: 11vw;
        --cocktail-stamp-top: -2vw;
        --cocktail-stamp-right: 2vw;
        /* Home menu CTA */
        --menu-cta-pad-top: 5vw;
        --menu-cta-pad-bottom: 8vw;
        --menu-cta-pad-x: 5vw;
        --menu-cta-leaves-size: min(17vw, 260px);
        --menu-cta-size: 2vw;
        --menu-cta-offset-x: 0%;
        --menu-cta-offset-y: 0%;
        /* Home gallery */
        --gallery-pad-top: 4vw;
        --gallery-height: 40vw;
        --gallery-img-width: 44vw;
        --gallery-gap: 1vw;
        /* Home hours */
        --hours-pad-top: 5vw;
        --hours-pad-x: 4vw;
        --hours-heading-size: 1.8vw;
        --hours-heading-gap: 3vw;
        --hours-heading-offset-x: 0%;
        --hours-heading-offset-y: 0%;
        --hours-schedule-pad-top: 3vw;
        --hours-schedule-gap: 6vw;
        --hours-schedule-offset-x: -4%;
        --hours-schedule-offset-y: 0%;
        --hours-block-1-offset-x: 0%;
        --hours-block-1-offset-y: 0%;
        --hours-block-2-offset-x: 0%;
        --hours-block-2-offset-y: 0%;
        --hours-block-3-offset-x: 0%;
        --hours-block-3-offset-y: 0%;
        --hours-text-size: 1.2vw;
        --hours-line-height: 12vw;
        --hours-line-gap: 4vw;
        --hours-line-offset-x: 0%;
        --hours-line-offset-y: 0%;
        /* Home golden hour */
        --golden-pad-top: 3.5vw;
        --golden-pad-bottom: 3.5vw;
        --golden-pad-x: 5vw;
        --golden-line-height: 3vw;
        --golden-heading-size: 2.3vw;
        --golden-heading-offset-x: 0%;
        --golden-heading-offset-y: 0%;
        --golden-heading-line2-offset-x: 22%;
        --golden-heading-line2-offset-y: 0%;
        --golden-cocktail-size: min(10vw, 150px);
        --golden-cocktail-offset-x: 0%;
        --golden-cocktail-offset-y: 0%;
        --golden-times-size: 1.3vw;
        --golden-times-offset-x: 0%;
        --golden-times-offset-y: 0%;
        --golden-times-line2-offset-x: 0%;
        --golden-times-line2-offset-y: 0%;
        --golden-note-size: 1.5vw;
        --golden-note-tracking: 0.06em;
        --golden-note-gap: 3vw;
        --golden-note-offset-x: 0%;
        --golden-note-offset-y: 0%;
        --golden-col-gap: 5vw;
        /* Home see you soon */
        --seeya-pad-top: 3vw;
        --seeya-pad-bottom: 6vw;
        --seeya-line-height: 3vw;
        --seeya-ball-size: min(16vw, 240px);
        --seeya-ball-offset-x: 0%;
        --seeya-ball-offset-y: 0%;
        --seeya-text-size: clamp(24px, 5vw, 72px);
        --seeya-text-offset-x: 0%;
        /* no desktop override needed — grid overlap holds at all widths */
        --seeya-gap: 2.5vw;
        /* Menu page */
        --menu-nav-height: 18vw;
        --menu-photo-col-width: 34vw;
        --menu-heading-pad-top: 17vw;
        --menu-heading-pad-bottom: 6vw;
        --menu-heading-pad-x: 5vw;
        --menu-heading-title-size: 2.35vw;
        --menu-heading-leaves-size: min(22vw, 300px);
        --menu-heading-title-offset-x: 0%;
        --menu-heading-title-offset-y: 0%;
        --menu-pad-top: 9vw;
        --menu-pad-x: 0vw;
        --menu-col-gap: 0vw;
        --menu-group-margin-y: 2vw;
        --menu-group-gap: 0vw;
        --menu-label-width: 4vw;
        --menu-label-size: 2.4vw;
        --menu-label-pad-top: 3vw;
        --menu-label-inactive-opacity: 0.25;
        --menu-item-row-gap: 2vw;
        --menu-item-pad-y: 0.6vw;
        --menu-item-pad-left: 1.5vw;
        --menu-item-pad-right: 3vw;
        --menu-item-name-size: 1.6vw;
        --menu-item-name-tracking: 0.12em;
        --menu-item-price-size: clamp(18px, 2vw, 44px);
        --menu-item-desc-size: 1.2vw;
        --menu-item-desc-pad-top: 0.4vw;
        --menu-item-profile-size: 1.2vw;
        --menu-item-profile-pad-top: 0.3vw;
        --menu-arch-height: 44vw;
        --menu-illus-box-min-height: 20vw;
        --menu-photo-pad-top: 3vw;
        --menu-photo-pad-right: 1.5vw;
        --menu-photo-pad-left: 1.5vw;
        /* Footer — top row (photo + map side by side) */
        --footer-top-row-height: 30vw;
        --footer-photo-col: 42%;
        --footer-map-col: 58%;
        --footer-top-row-gap: 0vw;
        /* Footer — map */
        --map-height: 38vw;
        --map-controls-bottom: 1vw;
        --map-controls-right: 1vw;
        --map-controls-size: 2.8vw;
        --map-controls-font-size: 1.6vw;
        /* Footer — interior photo */
        --footer-photo-height: 34vw;
        --footer-photo-margin: 0;
        /* Footer — contact grid */
        --footer-contact-pad-top: 6vw;
        --footer-contact-pad-bottom: 5vw;
        --footer-contact-pad-x: 5.5vw;
        --footer-contact-col-gap: 3vw;
        --footer-contact-row-gap: 4vw;
        --footer-contact-group-gap: 5vw;
        --footer-heading-size: 1.6vw;
        --footer-heading-gap: 1.5vw;
        --footer-phone-size: 1.6vw;
        --footer-social-icon-size: 4vw;
        --footer-social-gap: 2.5vw;
        --footer-bb-size: 1.6vw;
        --footer-bb-gap: 5vw;
        --footer-legal-size: 1.3vw;
        --footer-legal-gap: 4vw;
        /* ---- auto-expanded from base (expand-breakpoint.py) ---- */
        --overlay-top-hold: 36%;
        --overlay-top-fade: 67%;
        --overlay-bot-hold: 100%;
        --overlay-bot-fade: 50%;
        --icon-offset-map-x: 0%;
        --icon-offset-map-y: 24%;
        --icon-offset-phone-x: 0%;
        --icon-offset-phone-y: 30.6%;
        --icon-offset-instagram-x: -4%;
        --icon-offset-instagram-y: 25%;
        --logo-width: clamp(140px, 37vw, 384px);
        --logo-offset-x: -2%;
        --logo-offset-y: -8%;
        /* --hero-img-x: 51%; */
        --hero-img-y: 50%;
        --hero-img-origin-y: 17%;
        --hero-img-scale: 1;
        --nav-close-size: 4.2vw;
        --nav-item-gap: 7.4vw;
        --nav-btn-menu-offset-x: 0%;
        --nav-btn-menu-offset-y: 0%;
        --nav-btn-bb-offset-x: 0%;
        --nav-btn-bb-offset-y: 0%;
        --intro-divider-width: 1px;
        --cocktail-img-x: 50%;
        --cocktail-img-y: 81%;
        --cocktail-img-scale: 1;
        --menu-cta-group-offset-x: 0%;
        --menu-cta-group-offset-y: 0%;
        --menu-cta-leaves-offset-x: 0%;
        --menu-cta-leaves-offset-y: 5%;
        --gallery-pad-bottom: 0vw;
        --gallery-pad-left: 0vw;
        --gallery-pad-right: 0vw;
        --gallery-img-x: 50%;
        --gallery-img-y: 50%;
        --gallery-img-scale: 1;
        --hours-block-gap: 0vw;
        --hours-line-width: 1px;
        --seeya-text-offset-y: 35%;
        --menu-hero-pad-bottom: 0vw;
        /* = home hero box height (100vw ÷ 180/90 = 50vw), matching home directly */
        --menu-hero-height: 50vw;
        --menu-hero-img-x: 51%;
        --menu-hero-img-y: 45%;
        --menu-hero-img-scale: 1;
        --menu-heading-leaves-offset-x: 0%;
        --menu-heading-leaves-offset-y: 0%;
        --menu-body-pad-top: 1vw;
        --menu-body-pad-bottom: -2vw;
        --menu-body-pad-left: 0vw;
        --menu-body-pad-right: 0vw;
        --menu-body-gap: 0vw;
        --menu-label-line-width: 0px;
        --menu-label-line-gap: 0vw;
        --menu-label-active-glow: 0 0 6px #FFD166, 0 0 14px #FFD166, 0 0 28px rgba(255, 209, 102, 0.5);
        --menu-item-variant-gap: 0.8vw;
        --menu-item-variant-label-gap: 1.5vw;
        --menu-item-variant-label-size: 1.2vw;
        --menu-tag-size: 1.8vw;
        --menu-tag-gap: 2vw;
        --menu-tag-pad-top: 1.2vw;
        --menu-note-size: 2.4vw;
        --menu-note-pad-y: 3vw;
        --menu-photo-pad-bottom: 2vw;
        --menu-arch-border-width: -2px;
        --menu-arch-img-x: 50%;
        --menu-arch-img-y: 50%;
        --menu-illus-pad-top: 6vw;
        --menu-illus-pad-bottom: 0vw;
        --menu-illus-border-width: 2px;
        --menu-illus-inner-pad-top: 4vw;
        --menu-illus-inner-pad-bottom: 0vw;
        --menu-illus-inner-pad-x: 0vw;
        --menu-illus-golden-icon-size: min(12vw, 150px);
        --menu-illus-golden-icon-offset-x: 0%;
        --menu-illus-golden-icon-offset-y: -6%;
        --menu-illus-golden-inner-gap: 4vw;
        --menu-illus-golden-inner-justify: flex-start;
        --menu-illus-golden-lines-gap: 1.5vw;
        --menu-illus-golden-lines-offset-x: 0%;
        --menu-illus-golden-lines-offset-y: 0%;
        --menu-illus-golden-line-size: 1.5vw;
        --menu-illus-golden-line1-offset-x: 0%;
        --menu-illus-golden-line1-offset-y: 0%;
        --menu-illus-golden-line2-offset-x: 18%;
        --menu-illus-golden-line2-offset-y: 0%;
        --menu-illus-golden-line3-offset-x: 4%;
        --menu-illus-golden-line3-offset-y: -59%;
        /* min(vw, px): scales with viewport up to the px ceiling, then freezes
           so it stops ballooning on wide monitors. Tune the px cap to taste. */
        --menu-illus-sparkling-icon-size: min(22vw, 260px);
        --menu-illus-sparkling-icon-offset-x: 0%;
        --menu-illus-sparkling-icon-offset-y: 0%;
        --menu-illus-sparkling-inner-justify: center;
        --menu-illus-sparkling-line1-offset-x: -23%;
        --menu-illus-sparkling-line1-offset-y: 13%;
        --menu-illus-sparkling-line2-offset-x: 0%;
        --menu-illus-sparkling-line2-offset-y: 0%;
        --menu-illus-sparkling-line3-offset-x: 0%;
        --menu-illus-sparkling-line3-offset-y: 0%;
        --menu-illus-sparkling-inner-pad-top: 0vw;
        --menu-illus-sparkling-inner-pad-bottom: 0vw;
        --menu-illus-sparkling-inner-pad-x: 0vw;
        --menu-featured-pad-y: 10vw;
        --menu-featured-pad-x: 8vw;
        --menu-featured-name-size: 4.6vw;
        --menu-featured-price-size: clamp(20px, 6vw, 48px);
        --menu-featured-desc-size: 3vw;
        --menu-featured-desc-pad-top: 2vw;
        --menu-featured-divider-height: 6vw;
        --footer-photo-img-x: 50%;
        --footer-photo-img-y: 50%;
        --footer-photo-img-scale: 1;
        --footer-heading-offset-x: 0%;
        --footer-heading-offset-y: 0%;
        --footer-phone-offset-x: 0%;
        --footer-phone-offset-y: 0%;
        --footer-social-placeholder-size: 3.5vw;
        --footer-social-offset-x: 0%;
        --footer-social-offset-y: 0%;
        --footer-bb-offset-x: 0%;
        --footer-bb-offset-y: 0%;
        --footer-legal-offset-x: 0%;
        --footer-legal-offset-y: 0%;
    }
}

/* ── desktop 1024px+ ────────────────────────────────── */
@media (min-width: 1024px) {
    :root {
        --hero-aspect-ratio: 2/1;
        --topbar-height: 4.9vw;
        /* 50px at 1024px */
        --icon-size-map: 2.1vw;
        /* 22px at 1024px */
        --icon-size-phone: 2.2vw;
        /* 23px at 1024px */
        --icon-size-instagram: 2.5vw;
        /* 26px at 1024px */
        --hamburger-size: 1.8vw;
        /* 18px at 1024px */
        --hero-bottom-padding: 2.9vw 2.4vw;
    }
}

/* -- landscape only. -- */
@media (orientation: landscape) {

}