/* ========================================================================== 
   Little Luna 2622 — authoritative responsive design layer
   Loaded after style.css. This file owns fluid layout, component adaptation,
   safe-area behavior, hero art direction, section surfaces, and breakpoints.
   ========================================================================== */

:root {
    --ll-content-max: var(--cfg-content-max, 1180px);
    --ll-gutter: clamp(var(--cfg-gutter-min, 18px), 3.8vw, var(--cfg-gutter-max, 34px));
    --ll-section-space: clamp(var(--cfg-section-min, 48px), 7vw, var(--cfg-section-max, 96px));
    --ll-radius-card: var(--cfg-radius, 20px);
    --ll-control-min: var(--cfg-control-height, 48px);
    --ll-copy-measure: 68ch;
    --ll-wide-measure: 82ch;
    --ll-header-h: 72px;
    --ll-surface-base: var(--paper);
    --ll-surface-alt: var(--surface-alt, color-mix(in srgb, var(--paper) 55%, var(--card)));
    --ll-surface-elevated: var(--surface-elevated, var(--card));
}

html,
body { max-width: 100%; }
html { min-width: 0; }
body {
    min-width: 0;
    font-size: calc(var(--cfg-body-size, 16px) * var(--cfg-type-scale, 1));
    overflow-x: clip;
    overflow-wrap: break-word;
}
body.nav-open { overflow: hidden; }

.wrap {
    width: min(100%, calc(var(--ll-content-max) + (var(--ll-gutter) * 2)));
    max-width: none;
    margin-inline: auto;
    padding-inline: max(var(--ll-gutter), env(safe-area-inset-left)) max(var(--ll-gutter), env(safe-area-inset-right));
}
.section { padding-block: calc(var(--ll-section-space) * .5); }
/* 2639 — :where() SO PAGE RULES WIN. The gap above the menu hero, found at the
   fifth attempt with a Chrome diagnosis.

   This rule and `.section.menu-page { padding-top: 0 }` in style.css are BOTH
   specificity (0,2,0). This sheet loads later, so `padding-block-start` won and
   computed to 48px — measured: header bottom 77px, hero top 125px, band exactly
   48px. Every page-specific rule that tried to control its own top padding lost
   the same argument, which is why `.page-head` on Catering and FAQ shows it too.

   The suggested fix was `:not(.menu-page)`. Rejected: it fixes one page and the
   next page to want its own spacing hits the identical wall.

   `:where()` has ZERO specificity, so this becomes a default that any page rule
   overrides simply by existing — which is what a rhythm rule should have been.
   No exception list, and nothing to maintain when a page is added.

   Why I missed it three times: my reproduction omitted `<main>`, so the section
   was not `:first-child` and the rule never applied. The repro was wrong, not
   the reasoning about it. */
:where(.section:first-child) { padding-block-start: var(--ll-section-space); }
.section-head { max-width: var(--ll-wide-measure); margin-inline: auto; }
.section-head > :first-child { margin-block-start: 0; }
.section-head > :last-child { margin-block-end: 0; }

h1 { font-size: calc(clamp(2.5rem, 1.55rem + 4vw, 5.5rem) * var(--cfg-type-scale, 1)); line-height: .98; text-wrap: balance; }
h2 { font-size: calc(clamp(2rem, 1.55rem + 2vw, 3.5rem) * var(--cfg-type-scale, 1)); line-height: 1.05; text-wrap: balance; }
h3 { font-size: calc(clamp(1.25rem, 1.1rem + .65vw, 1.8rem) * var(--cfg-type-scale, 1)); line-height: 1.15; text-wrap: balance; }
p, li { text-wrap: pretty; }

.btn,
button,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
select,
textarea { min-height: var(--ll-control-min); }
.btn { display: inline-flex; align-items: center; justify-content: center; }

/* Owner-selectable card treatment. */
:is(.fav-card,.review-card,.choice-card,.gallery-empty,.reviews-empty) {
    border-radius: var(--ll-radius-card);
}
html[data-card-style="soft"] :is(.fav-card,.review-card,.choice-card) {
    box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 10%, transparent);
    border-color: color-mix(in srgb, var(--line) 70%, transparent);
}
html[data-card-style="outlined"] :is(.fav-card,.review-card,.choice-card) {
    box-shadow: none;
    border: 1px solid var(--line);
}
html[data-card-style="flat"] :is(.fav-card,.review-card,.choice-card) {
    box-shadow: none;
    border-color: transparent;
}

/* Header: reset the historical <=980 mobile rules, then re-enable them only
   at the content-driven 920px constraint below. */
.header-inner { min-height: var(--ll-header-h); height: auto; }
.brand { min-width: 0; flex-shrink: 0; }
.brand-logo {
    display: block;
    width: auto;
    height: clamp(38px, 4vw, 44px);
    max-width: min(24vw, 190px);
    object-fit: contain;
    flex: none;
}
.header-actions { display: flex; align-items: center; gap: .65rem; margin-left: auto; }
.theme-toggle { width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex: none; }
.nav-burger { display: none; min-width: 48px; min-height: 48px; flex: none; }
.header-order { display: inline-flex; }
.main-nav {
    position: static;
    inset: auto;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(.65rem, 1.35vw, 1.125rem);
    width: auto;
    margin-left: auto;
    padding: 0;
    overflow: visible;
    background: transparent;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
}
.main-nav a { min-height: 44px; display: inline-flex; align-items: center; }


/* A selected Hero may partially override semantic palette values for seasonal
   or media-specific contrast. Values are fully resolved server-side, so theme
   switching remains deterministic and no custom property falls back to itself. */
.hero[data-hero-palette-override="1"] {
    --paper: var(--hero-light-paper);
    --card: var(--hero-light-card);
    --ink: var(--hero-light-ink);
    --muted: var(--hero-light-muted);
    --brand: var(--hero-light-brand);
    --accent: var(--hero-light-accent);
    --line: var(--hero-light-line);
    --cfg-hero-text: var(--hero-light-hero-text);
    --cfg-hero-scrim-color: var(--hero-light-hero-scrim);
    --hero-primary-text: var(--hero-light-primary-text);
}
[data-theme="dark"] .hero[data-hero-palette-override="1"] {
    --paper: var(--hero-dark-paper);
    --card: var(--hero-dark-card);
    --ink: var(--hero-dark-ink);
    --muted: var(--hero-dark-muted);
    --brand: var(--hero-dark-brand);
    --accent: var(--hero-dark-accent);
    --line: var(--hero-dark-line);
    --cfg-hero-text: var(--hero-dark-hero-text);
    --cfg-hero-scrim-color: var(--hero-dark-hero-scrim);
    --hero-primary-text: var(--hero-dark-primary-text);
}
.hero .hero-cta-order { color: var(--hero-primary-text, #2B2410); }
.hero .hero-cta-order:hover { color: var(--hero-primary-text, #2B2410); }

/* Homepage hero: one content composition over art-directed media. */
.hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    min-height: clamp(38rem, 72svh, 56rem);
    padding-block: clamp(4rem, 9svh, 8rem);
    overflow: clip;
}
.hero--bleed {
    color: var(--cfg-hero-text, #fff);
    background: color-mix(in srgb, var(--ink) 80%, var(--cfg-hero-scrim-color, #000));
}
.hero--bleed::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--cfg-hero-scrim-color, #000) calc(var(--cfg-hero-scrim, .58) * 100%), transparent) 0%,
            color-mix(in srgb, var(--cfg-hero-scrim-color, #000) calc(var(--cfg-hero-scrim, .58) * 100%), transparent) 34%,
            color-mix(in srgb, var(--cfg-hero-scrim-color, #000) calc(var(--cfg-hero-scrim, .58) * 30%), transparent) 68%,
            transparent 100%),
        linear-gradient(0deg, color-mix(in srgb, var(--cfg-hero-scrim-color, #000) 26%, transparent), transparent 44%);
}
.hero.hero--bleed { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
.hero.hero--bleed .hero-grid {
    grid-row: auto;
    align-self: auto;
    grid-template-columns: minmax(0, 1fr);
}
.hero.hero--bleed .hero-copy { width: min(100%, 43rem); max-width: none; margin: 0; text-align: left; }
.hero.hero--bleed :is(.hero-h1,.hero-support,.hero-display,.eyebrow) { color: var(--cfg-hero-text, #fff); }
.hero.hero--bleed .eyebrow-status { color: var(--accent); }
.hero.hero--bleed :is(.hero-cta-secondary-row .btn,.hero-issue--desktop) {
    background: color-mix(in srgb, var(--card) 92%, transparent);
    border-color: var(--line);
    color: var(--ink);
    text-shadow: none;
}
.hero.hero--bleed .hero-issue-label { color: var(--muted); }
.hero.hero--bleed .hero-issue-link { color: var(--ink); }

.hero-media,
.hero-media picture,
.hero-media img,
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.hero-media { z-index: 0; margin: 0; border-radius: 0; overflow: hidden; }
.hero-media picture { display: block; }
.hero-media img,
.hero-video {
    object-fit: cover;
    object-position: var(--hero-desktop-x, 50%) var(--hero-desktop-y, 50%);
}
.hero-video { display: block; opacity: 0; transition: opacity .5s ease; }
.hero-video.is-playing { opacity: 1; }
.hero-grid { position: relative; z-index: 2; display: grid; width: 100%; grid-template-columns: minmax(0, 1fr); }
.hero-copy {
    width: min(100%, 43rem);
    max-width: none;
    display: grid;
    gap: clamp(1.35rem, 2.7vw, 2.25rem);
}
.hero-copy-group { display: grid; gap: 0; }
.hero-eyebrows { display: grid; gap: clamp(.25rem, .6vw, .45rem); }
.hero-copy :is(.eyebrow,.hero-h1,.hero-support,.hero-display) { margin: 0; }
.hero--bleed .hero-copy-group { text-shadow: 0 2px 18px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.7); }
.hero-h1 {
    max-width: 12ch;
    margin-block-start: clamp(.85rem, 1.6vw, 1.35rem) !important;
    font-size: calc(clamp(3rem, 2rem + 4.8vw, 6.7rem) * var(--cfg-type-scale, 1));
    line-height: .9;
    letter-spacing: -.045em;
}
.hero-support {
    max-width: 42ch;
    margin-block-start: clamp(.8rem, 1.5vw, 1.25rem) !important;
    font-size: clamp(1rem, .9rem + .5vw, 1.3rem);
    line-height: 1.45;
}
/* 2642 (owner item 24) — WIDEN THE PARAGRAPH, NOT THE BUTTONS.

   Reported as: the home hero description runs to four lines where two or three
   would do, pushing the buttons below the fold.

   `42ch` above is what causes it, and it applies at every width. The paragraph
   is nowhere near the column it sits in — `.hero.hero--bleed .hero-copy` is
   `min(100%, 43rem)`, about 688px, while 42ch lands around 400px — so the
   measure is the constraint, not the layout.

   Widening it cannot widen the buttons: `.hero-cta` carries its own
   `max-width: var(--hero-cta-w)` of 460px and `margin-inline: 0`, so it is
   sized independently of its parent. That is exactly the separation the owner
   asked for, and it already existed.

   DESKTOP ONLY. The mobile homepage is correct and is not to be touched; the
   rule above still owns phones unchanged.

   56ch IS A JUDGEMENT, NOT A MEASUREMENT. It is a third wider, which should take
   four lines to three, and it still sits inside the 43rem column with room. The
   right number is whatever drops the buttons back above the fold on the owner's
   screen, and that cannot be established here. */
@media (min-width: 641px) {
    .hero-support { max-width: 56ch; }
}
.hero-display {
    max-width: 30ch;
    margin-block-start: clamp(.75rem, 1.3vw, 1.1rem) !important;
    font-size: clamp(1.12rem, 1rem + .75vw, 1.55rem);
    font-weight: 700;
    line-height: 1.2;
}
.hero-cta { display: grid; width: min(100%, 32rem); max-width: none; gap: clamp(.65rem, 1.2vw, .9rem); }
.hero-cta-order { display: inline-flex; width: 100%; }
.hero-cta-secondary-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(.55rem, 1vw, .75rem); }
.hero-cta-secondary-row .btn { width: 100%; min-width: 0; }
.hero-issue { width: 100%; max-width: none; min-height: var(--ll-control-min); }
.hero-issue--mobile { display: none; }
.hero-grid--noimg { justify-items: center; text-align: center; }
.hero-grid--noimg .hero-copy { justify-items: center; }
.hero-grid--noimg :is(.hero-h1,.hero-support,.hero-display) { margin-inline: auto; }

/* Homepage section system. Palette colors remain owner-controlled; sections
   choose only a semantic surface derived from the active palette. */
.home-mid { display: flex; flex-direction: column; gap: 0; }
.home-mid > * { margin-top: 0 !important; }
.home-mid-story { order: 1; }
.home-mid-issue { order: 2; display: none; }
.home-mid-featured { order: 3; }
.home-mid-reviews { order: 4; }
.home-mid-gallery { order: 5; }
.home-mid [data-surface="base"] { background: var(--ll-surface-base); }
.home-mid [data-surface="alternate"] { background: var(--ll-surface-alt); }
.home-mid [data-surface="elevated"] { background: var(--ll-surface-elevated); }
.home-mid .section { padding-block: clamp(2.5rem, 6vw, 5rem); }
.home-mid .story-line {
    padding-block: clamp(1.5rem, 3.5vw, 2.4rem) clamp(1.25rem, 3vw, 2rem);
    border-top: 0;
    border-bottom: 1px solid var(--line);
}
.story-sentence { max-width: 46ch; margin-inline: auto; }

/* 2636 (owner items 26 and 27) — HOMEPAGE SECTION SPACING, MEASURED OFF THE
   SCREENSHOTS RATHER THAN GUESSED.

   Reported as: too much above Favorites, none at all above What Cambridge Says
   and From the Cafe, and no space below the Instagram grid.

   What the screenshots showed, converted from the 2x captures:

     heritage line -> Favorites      about 90px   too much
     Favorites     -> What Cambridge about 92px   reads correctly
     reviews cards -> From the Cafe  about 20px   far too tight
     Instagram grid -> footer        about  8px   effectively none

   Why it was uneven: `.home-mid > * { margin-top: 0 !important }` at the top of
   this file kills `--ll-section-gap` at every width, so the only spacing left is
   whatever each section's own `padding-block` happens to be, and adjacent
   paddings then sum or collapse depending on which wrapper a section sits in.
   Favorites is inside a `<div>`; the reviews and gallery sections are not. That
   is the whole inconsistency.

   Rather than adjust three paddings and hope they add up, ONE rule now owns the
   desktop rhythm: every section between the hero and the footer gets the same
   block padding, so the gap between any two is the same by construction and
   stays that way when a section is added or reordered. Favorites keeps a
   slightly smaller lead-in because it follows the heritage line, which is a
   short band rather than a full section.

   Phones are untouched — the `max-width: 640px` block further down owns them and
   the mobile homepage is correct. */
@media (min-width: 641px) {
    .home-mid { --ll-home-gap: clamp(2.75rem, 4.5vw, 4rem); }

    .home-mid > section.section:not(.story-line),
    .home-mid-featured > section.section {
        padding-block: var(--ll-home-gap);
    }

    /* Follows the heritage band, which already carries its own bottom padding. */
    .home-mid-featured > section.section {
        padding-block-start: calc(var(--ll-home-gap) * .6);
    }

    /* Item 27 — the Instagram grid ran straight into the footer background.
       The gallery is the last section on the page, so its bottom padding is the
       only thing between the last photograph and the footer's edge. */
    .home-mid-gallery { padding-block-end: var(--ll-home-gap); }
}
/* 2625CA — .section-intro is AUTHORITATIVE for the intro-stack pattern.

   It states its own contract rather than relying on nothing else colliding
   with it. Two of these declarations exist specifically to be immune to the
   legacy utility-row rules in style.css, which are now :not() scoped but were
   silently defeating this block before the 2625 corrective audit (historical):

     - the auto inline margins reset, because an auto inline margin outranks
       justify-items:center in grid, so ANY inherited margin-inline auto —
       from this sheet, a future rule, or a page-level override — would push a
       child off the shared centre axis;
     - the dash suppression, because a decorative em dash joins two items
       sitting on one line and has nothing to join in a centered stack.

   Both are cheap, and together they mean a regression has to defeat the
   pattern twice rather than once. */
.section-intro {
    /* 2625CA-2 — centering is stated on BOTH axes and does not depend on the
       display model.

       The mobile rule in style.css centres by `align-items: center` on a flex
       column, which is a HORIZONTAL effect there. `.section-intro` switches the
       container to grid, where `align-items` controls the VERTICAL axis instead,
       so that rule's centering silently evaporates and only `justify-items`
       remains. That is the same failure shape as the original defect: a
       declaration written for one layout model quietly meaning something else
       under another.

       So the pattern now centres redundantly and cheaply — container
       `justify-items`, per-child `justify-self`, auto inline margins, and
       `text-align` — and a regression has to defeat all four rather than one. */
    display: grid;
    justify-items: center;
    justify-content: center;
    gap: clamp(.35rem, .8vw, .65rem);
    max-width: 48rem;
    margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
    text-align: center;
}
.section-intro > * {
    margin-inline: auto;
    max-width: 100%;
    justify-self: center;
    text-align: center;
}
.section-intro :is(h2,p) { margin-block: 0; }
.section-intro .section-sub { color: var(--muted); max-width: 60ch; }
.section-intro .section-sub::before { content: none; }
.section-intro .text-link { display: inline-flex; align-items: center; }
.fav-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.review-card {
    display: grid;
    align-content: start;
    min-height: 0;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.review-card p { margin: 0; }
.review-card-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-top: clamp(.8rem, 1.8vw, 1.1rem);
    padding-top: 0;
}
.review-more { margin: 0; }
.gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, 1.5vw, 1.25rem); }
.fav-card-img, .gallery-grid img { width: 100%; object-fit: cover; }

/* Interior pages and forms remain readable at intermediate widths. */
.form-intro { max-width: var(--ll-copy-measure); }
:is(.contact-grid,.form-grid,.footer-grid) { gap: clamp(1.25rem, 3vw, 3rem); }
.contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
iframe, video, canvas, svg { max-width: 100%; }
/* 2634 (owner item 28) — THE STRAY "ORDER NOW" BELOW THE FOOTER ON DESKTOP.

   Reported as: a stray Order Now button at the bottom of every page on desktop,
   sitting below the footer and outside its background, looking like the mobile
   bar leaking into desktop. That is exactly what it is, and here is how.

   The bar is `<a class="mobile-order-bar btn btn-accent">`. style.css hides it
   with `.mobile-order-bar { display: none; }` — specificity 0,1,0. Line 54 of
   THIS file sets `.btn { display: inline-flex; }` — also 0,1,0, no media query,
   and responsive.css loads after style.css. Equal specificity, later sheet
   wins. The hide never applied at any width.

   Below 640px it does not show, because the block further down gives it fixed
   positioning and the opacity/visibility reveal, so it looks and behaves
   correctly. Above 640px nothing positions it, so it renders as an ordinary
   inline-flex link at the end of the body — after </footer>, which is why it
   sits outside the footer's background.

   THE FIX IS DESKTOP-ONLY BY CONSTRUCTION, not by a breakpoint I chose. This
   rule sits after `.btn` so it wins there, and before the `max-width: 640px`
   block that sets `display: flex`, so at phone widths that later rule still
   wins and the mobile bar is untouched — no spacing, position or behaviour
   change, as instructed.

   Restated as a breakpoint for the record: hidden above 640px, unchanged at and
   below it. */
.mobile-order-bar { display: none; }
.mobile-order-bar[data-sticky-mode="off"] { display: none !important; }

/* Navigation changes only when six links, controls, logo, and Order CTA no
   longer fit without collision. A 980px desktop-emulation viewport keeps the
   full menu; tablets and true narrow layouts use the mobile navigation. */
@media (max-width: 920px) {
    .header-order { display: none; }
    .nav-burger { display: flex; }
    .main-nav {
        position: fixed;
        z-index: 120;
        top: var(--ll-header-h);
        right: 0;
        bottom: 0;
        left: 0;
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        width: auto;
        margin: 0;
        padding: clamp(1rem, 4vh, 2rem) max(var(--ll-gutter), env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(var(--ll-gutter), env(safe-area-inset-left));
        overflow-y: auto;
        background: var(--card);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-1rem);
        transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    }
    html[data-mobile-nav="drawer"] .main-nav {
        left: auto;
        width: min(88vw, 24rem);
        transform: translateX(100%);
        box-shadow: -16px 0 40px color-mix(in srgb, var(--ink) 18%, transparent);
    }
    .main-nav.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition-delay: 0s;
    }
    .main-nav a {
        min-height: 58px;
        justify-content: center;
        padding: .85rem 0;
        border-bottom: 1px solid var(--line);
        font-size: clamp(1.1rem, 3.5vw, 1.4rem);
        color: var(--ink);
        text-align: center;
    }
    .main-nav a[aria-current="page"] { color: var(--accent); font-weight: 700; }
    .contact-grid { grid-template-columns: 1fr; }
    /* Stacked below the form, so there is no form height to match. The photos
       take their natural shape rather than being cropped to a share of nothing. */
    .catering-photos { align-self: auto; grid-template-rows: auto; }
    .catering-photo img { flex: 0 0 auto; height: auto; aspect-ratio: 4 / 3; }
    .fav-grid, .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    :root { --ll-header-h: 76px; }
    .site-header { min-height: var(--ll-header-h); }
    .header-inner { min-height: var(--ll-header-h); gap: .75rem; }
    .brand-logo { height: 44px; max-width: min(49vw, 190px); }
    .theme-toggle { width: 48px; height: 48px; min-width: 48px; min-height: 48px; }
    .theme-toggle svg { width: 21px; height: 21px; }
    .nav-burger { min-width: 48px; min-height: 48px; padding: 9px; }
    .nav-burger span { width: 26px; }

    .hero {
        --ll-hero-heading-gap: clamp(1rem, 2.2svh, 1.3rem);
        --ll-hero-fold-trim: clamp(.35rem, 1svh, .6rem);
        min-height: min(calc(var(--cfg-hero-height, 100svh) - var(--ll-header-h) - var(--ll-hero-fold-trim)), var(--cfg-hero-max-height, 920px));
        padding-block: clamp(.55rem, 1.35svh, .85rem) clamp(1.35rem, 2.8svh, 1.85rem);
        align-items: start;
    }
    .hero--bleed { background: var(--paper); }
    .hero--bleed::before { content: none; }
    .hero.hero--bleed .hero-media {
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%);
    }
    .hero-media img,
    .hero-video { object-position: var(--hero-mobile-x, 50%) var(--hero-mobile-y, 42%); }
    .hero.hero--bleed .hero-grid {
        align-self: start;
        padding-top: clamp(.65rem, 1.8svh, 1rem);
        padding-bottom: calc(var(--ll-orderbar-h) + .5rem + env(safe-area-inset-bottom));
    }
    .hero.hero--bleed .hero-copy {
        width: 100%;
        max-width: none;
        margin: 0;
        gap: clamp(1.25rem, 2.5svh, 1.55rem);
    }
    .hero-copy-group { width: 100%; }
    .hero-eyebrows { gap: clamp(.24rem, .65svh, .38rem); }
    .hero.hero--bleed .hero-copy .eyebrow { margin: 0; text-indent: 0; }
    .hero.hero--bleed .hero-copy .eyebrow-status { margin: 0; }
    .hero.hero--bleed .hero-h1 {
        max-width: 11ch;
        margin-block-start: var(--ll-hero-heading-gap) !important;
        font-size: calc(clamp(2.55rem, 10.2vw, 4.15rem) * var(--cfg-type-scale, 1));
        line-height: .99;
    }
    .hero.hero--bleed .hero-support {
        max-width: 35ch;
        margin-block-start: var(--ll-hero-heading-gap) !important;
        font-size: clamp(.98rem, 3.65vw, 1.13rem);
        line-height: 1.42;
    }
    .hero.hero--bleed .hero-display {
        max-width: 29ch;
        margin-block-start: clamp(.9rem, 1.9svh, 1.15rem) !important;
        font-size: clamp(1.12rem, 4.35vw, 1.34rem);
        line-height: 1.18;
    }
    .hero[data-mobile-align="center"] .hero-copy { text-align: center; justify-items: center; }
    .hero[data-mobile-align="center"] :is(.hero-h1,.hero-support,.hero-display) { margin-inline: auto; }
    .hero[data-mobile-align="left"] .hero-copy { text-align: left; justify-items: start; }
    .hero-cta { width: min(100%, 31rem); gap: clamp(.7rem, 1.65svh, .95rem); text-shadow: none; }
    .hero-cta-order { display: inline-flex; }
    .hero-cta-secondary-row { gap: clamp(.55rem, 1.2svh, .75rem); }
    .hero.hero--bleed .hero-cta-secondary-row .btn {
        background: color-mix(in srgb, var(--paper) 88%, transparent);
        border: 1px solid var(--accent);
        color: var(--ink);
    }
    .hero-issue--desktop { display: none !important; }

    .home-mid-issue {
        display: block;
        padding-block: clamp(.8rem, 2.5vw, 1.15rem);
        border-bottom: 1px solid var(--line);
        background: var(--ll-surface-base);
    }
    .hero-issue--mobile {
        display: flex;
        min-height: var(--ll-control-min);
        padding: clamp(.9rem, 3.5vw, 1.15rem) clamp(1rem, 4vw, 1.35rem);
        border: 1px solid var(--line);
        border-radius: var(--ll-radius-card);
        background: var(--card);
        color: var(--ink);
        text-shadow: none;
    }
    .hero-issue--mobile .hero-issue-label { color: var(--muted); }
    .hero-issue--mobile .hero-issue-link { color: var(--ink); }

    /* The historical direct-child reset has higher specificity than a bare
       .section rule. Own the real homepage structures explicitly so section
       spacing and centering cannot silently fall back to the old layout. */
    .home-mid > section.section:not(.story-line),
    .home-mid-featured > section.section {
        padding-block: clamp(2rem, 5.8vw, 3rem);
    }
    .home-mid-featured > section.section {
        padding-block-start: clamp(1.7rem, 4.8vw, 2.35rem);
    }
    .home-mid .story-line {
        padding-block: clamp(1.12rem, 4vw, 1.55rem) clamp(.92rem, 3.25vw, 1.3rem);
        border-top: 0;
    }
    .story-sentence { font-size: clamp(1.15rem, 5vw, 1.55rem); line-height: 1.3; }
    .home-mid-featured > .featured,
    .home-mid-reviews { border-bottom: 1px solid var(--line); }
    .home-mid :is(.featured,.reviews,.gallery) .section-head.section-intro {
        width: 100%;
        max-width: none;
        display: grid;
        align-items: center;
        justify-items: center;
        gap: .48rem;
        margin: 0 auto clamp(1.35rem, 5vw, 2rem);
        text-align: center;
    }
    .home-mid :is(.featured,.reviews,.gallery) .section-head.section-intro > * {
        margin-inline: auto;
        text-align: center;
    }
    .home-mid :is(.featured,.reviews,.gallery) .section-head.section-intro h2 {
        font-size: clamp(1.75rem, 7.2vw, 2.35rem);
    }
    .home-mid :is(.featured,.reviews,.gallery) .section-head.section-intro :is(.section-sub,.subtle,.rating-line) {
        margin-block: 0;
        text-align: center;
    }
    .home-mid-reviews .section-head.section-intro h2 {
        width: 100%;
        white-space: nowrap;
        font-size: clamp(1.25rem, 6.1vw, 2.2rem);
        letter-spacing: -.035em;
    }
    .rating-line { text-align: center; }
    .rating-line .rating-stars {
        display: block;
        font-size: 2em;
        letter-spacing: 4px;
        margin: 0 auto .35rem;
    }

    .fav-grid,
    .gallery-grid.instagram-feed {
        margin-inline: 0;
        background: transparent;
        border: 0;
    }
    .fav-grid, .review-grid { grid-template-columns: 1fr; gap: 1rem; }
    .fav-card { aspect-ratio: 10 / 9; border-radius: var(--ll-radius-card); border: 1px solid var(--line); }
    .home-mid-reviews .review-card {
        padding: clamp(.85rem, 3.7vw, 1.1rem);
    }
    .home-mid-reviews .review-card p { line-height: 1.5; }
    .home-mid-reviews .review-card-foot {
        margin-top: clamp(.45rem, 2vw, .65rem);
        padding-top: 0;
        gap: .65rem;
    }
    .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery-grid.instagram-feed {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* 3px, both axes. The gap is not empty space — the grid's background is
           --line showing through, so the number is the width of the rule drawn
           between tiles. At 1px it read as a rendering seam rather than a
           decision; 3px reads as deliberate separation without turning a photo
           wall into a set of boxes. */
        gap: 3px;
        background: var(--line);
    }
    .instagram-card,
    .instagram-card a,
    .gallery-grid.instagram-feed img { border-radius: 0; }
    .footer-grid { grid-template-columns: 1fr; }

    .mobile-order-bar {
        position: fixed;
        z-index: 110;
        right: max(.75rem, env(safe-area-inset-right));
        bottom: max(.75rem, env(safe-area-inset-bottom));
        left: max(.75rem, env(safe-area-inset-left));
        display: flex;
        min-height: var(--ll-control-min);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(calc(100% + 1.5rem));
        transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
        box-shadow: 0 12px 34px rgba(0,0,0,.24);
    }
    .mobile-order-bar.is-sticky-visible,
    .mobile-order-bar[data-sticky-mode="always"] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition-delay: 0s;
    }
    body.has-mobile-order { padding-bottom: calc(var(--ll-control-min) + 2rem + env(safe-area-inset-bottom)); }
}

/* Compact-height phones preserve the same composition and fold contract while
   tightening fluid rhythm. Content may grow the hero; it is never clipped. */
@media (max-width: 640px) and (max-height: 720px) {
    .hero {
        --ll-hero-heading-gap: .88rem;
        padding-block: .5rem 1rem;
    }
    .hero.hero--bleed .hero-copy { gap: 1.05rem; }
    .hero-eyebrows { gap: .18rem; }
    .hero.hero--bleed .hero-h1 {
        font-size: calc(clamp(2.25rem, 9.3vw, 3.35rem) * var(--cfg-type-scale, 1));
        line-height: .98;
    }
    .hero.hero--bleed .hero-support { line-height: 1.32; }
    .hero.hero--bleed .hero-display { margin-block-start: .74rem !important; }
    .hero-cta { gap: .58rem; }
    .hero-cta-secondary-row { gap: .52rem; }
}

/* Mobile landscape is height-constrained: use two content columns while
   retaining the same semantic source and preserving every CTA. */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 920px) {
    .hero { min-height: auto; padding-block: 1.1rem; }
    .hero.hero--bleed .hero-media {
        -webkit-mask-image: linear-gradient(to right, #000 0%, #000 66%, transparent 100%);
        mask-image: linear-gradient(to right, #000 0%, #000 66%, transparent 100%);
    }
    .hero-copy { width: min(100%, 68rem); grid-template-columns: minmax(0,1.25fr) minmax(17rem,.75fr); align-items: end; gap: 1.25rem; }
    .hero-copy-group { align-self: center; }
    .hero.hero--bleed .hero-h1 { font-size: calc(clamp(2rem, 5.6vw, 3.2rem) * var(--cfg-type-scale, 1)); }
    .hero.hero--bleed .hero-support { display: none; }
    .hero-cta { width: 100%; }
    .main-nav { padding-top: .5rem; }
    .main-nav a { min-height: 44px; padding: .45rem 0; }
}

@media (max-width: 420px) {
    .hero-cta-secondary-row { grid-template-columns: 1fr; }
    .gallery-grid:not(.instagram-feed) { gap: .7rem; }
}


/* 2622 owner review: CTA labels remain crisp; homepage intros are centered by
   selectors that outrank the historical section-head rules. Explicit palette
   surface slots remain the sole color owner. */
.hero-cta-order { text-shadow: none; }

@media (prefers-reduced-motion: reduce) {
    .hero-video { display: none !important; }
    .main-nav, .mobile-order-bar { transition: none; }
}