/* ══════════════════════════════════════════════════════════════════════════════════════════════
   Snake Oil Spices — SITE LAYOUT SYSTEM (2026-10-10)
   Loaded after site.css on every page EXCEPT the home page (the home page is Chad's and stays as is).
   One set of rules for header, spacing, type, widths, buttons and glass, so a short laptop screen
   (1280×585 measured on Chad's machine: Windows 150%, browser 100%) and a big monitor both fit.
   Height-aware sizing is used for decorative space and page openings only; body text stays readable.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · SCALE ─────────────────────────────────────────────────────────────────────────────────── */
:root {
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem;
  /* section breathing room: grows with the screen, never more than needed */
  --section-pad: clamp(2.5rem, 1.25rem + 5svh, 5rem);
  --s-6: clamp(1.75rem, 1rem + 2.5svh, 3rem);
  --s-7: clamp(2rem, 1rem + 4svh, 4rem);
  /* type: display sizes respond to height as well as width */
  --fs-display: clamp(2.1rem, min(1.2rem + 2.6vw, .9rem + 5.5svh), 3.75rem);
  --fs-title: clamp(1.6rem, min(1.1rem + 1.4vw, .9rem + 3svh), 2.35rem);
  --fs-lede: 1.0625rem; --fs-body: 1rem;
  --w-content: 1180px; --w-read: 68ch;
  /* header */
  --nav-base: 60px; --nav-h: var(--nav-base); --rib-h: 0px;
  --sticky-h: var(--nav-h);
  /* surfaces */
  --edge: rgba(255, 214, 150, .22); --edge-hi: rgba(255, 236, 200, .38);
}
@media (max-width: 720px) { :root { --nav-base: 56px; } }
html.has-ribbon { --rib-h: 30px; --nav-h: calc(var(--nav-base) + var(--rib-h)); }
@media (max-width: 720px) { html.has-ribbon { --rib-h: 30px; --nav-h: calc(var(--nav-base) + var(--rib-h)); } }

/* anchors always land below whatever is pinned at the top (measured by layout.js) */
:is(section, article, div, h2, h3)[id] { scroll-margin-top: calc(var(--sticky-h) + 14px); }

/* ── 2 · HEADER: one coordinated system ──────────────────────────────────────────────────────────
   main menu = the persistent layer (60px; 56px on phones). Holiday strip = 30px, only while you are
   at the top of the page — it folds away as you scroll (the page itself never moves). */
nav.site-nav { height: var(--nav-base); top: 0; transition: top .3s ease, background .25s ease, box-shadow .25s ease; }
html.has-ribbon nav.site-nav { top: var(--rib-h); height: var(--nav-base); }
html.has-ribbon.rib-off nav.site-nav { top: 0; }
.season-ribbon { height: var(--rib-h); top: calc(-1 * var(--rib-h)); font-size: .8125rem; transition: opacity .25s ease; }
html.rib-off .season-ribbon { opacity: 0; pointer-events: none; }
.sr-x { height: 28px; }
nav.nav-hidden { transform: none; }                 /* the menu stays put — no sliding header */
.logo-img { height: 36px; }
.nav-links { gap: clamp(.9rem, 1.6vw, 1.6rem); }
.nav-links .nav-cta { padding: .7em 1.2em; }
nav.site-nav.scrolled { box-shadow: 0 1px 0 var(--edge), 0 10px 28px rgba(0,0,0,.28); }

/* phones: logo · Shop · menu — buying is always one tap away */
.nav-cart { display: none; }
@media (max-width: 880px) {
  .nav-cart { display: inline-flex; align-items: center; gap: .45em; margin-left: auto; margin-right: .4rem; min-height: 44px; padding: 0 .95rem;
    border-radius: 999px; font: 700 .75rem/1 'Lato', sans-serif; letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
    color: #fff; background: linear-gradient(180deg, #FF8A3D, #E0561C); border: 1px solid #FFA35C;
    box-shadow: inset 0 1px 0 rgba(255,230,190,.55), 0 0 12px rgba(255,110,30,.35); }
  .nav-cart svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .nav-links { top: var(--nav-h); }
  html.rib-off .nav-links { top: var(--nav-base); }
}
@media (max-width: 360px) { .nav-cart span { display: none; } .nav-cart { padding: 0 .8rem; } }

/* Blends jump menu: one slim row. Pinned under the menu only on tall screens; on short laptops and
   phones it is an ordinary row under the page opening, so it never stacks into a third header. */
nav.blends-subnav, html nav.blends-subnav, html.has-ribbon nav.blends-subnav {
  position: relative; top: auto; height: auto; transform: none; z-index: 5;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; padding: 6px var(--gutter);
}
.blends-subnav a { padding: .55em 1em; font-size: .75rem; letter-spacing: .12em; }
@media (min-height: 760px) and (min-width: 900px) {
  nav.blends-subnav, html nav.blends-subnav, html.has-ribbon nav.blends-subnav { position: sticky; top: var(--nav-h); }
  html.rib-off nav.blends-subnav { top: var(--nav-base); }
}
@media (max-width: 720px) {
  nav.blends-subnav, html nav.blends-subnav, html.has-ribbon nav.blends-subnav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 4px; padding: 6px 8px; }
  .blends-subnav a { padding: .6em .2em; font-size: .6875rem; letter-spacing: .08em; }
}

/* ── 3 · PAGE OPENINGS: sized to the page's job, not one giant banner everywhere ──────────────── */
.page-hero.has-img {
  min-height: clamp(300px, 50svh, 560px);
  padding: calc(var(--nav-h) + clamp(1rem, 3svh, 2.5rem)) 0 clamp(1.25rem, 4svh, 3rem) max(var(--gutter), calc((100vw - var(--w-content)) / 2));
}
@media (min-width: 881px) { .page-hero.has-img::after { width: 52%; } }
.page-hero.has-img h1 { font-size: clamp(2.2rem, min(1.2rem + 3vw, .8rem + 6.5svh), 4.5rem); }
.page-hero.has-img p:not(.page-hero-eyebrow) { margin-top: var(--sp-4); font-size: clamp(1rem, .9rem + .4vw, 1.1875rem); max-width: 38ch; }
.page-hero-eyebrow { margin-bottom: var(--sp-3); }
@media (max-width: 880px) {
  .page-hero.has-img { padding: var(--nav-h) 0 var(--sp-6); }
  .page-hero.has-img::after { height: min(46vw, 34svh); max-height: 300px; margin-bottom: var(--sp-5); }
  .page-hero.has-img h1 { font-size: clamp(2rem, 8.5vw, 2.75rem); }
}
@media (max-width: 880px) and (orientation: landscape) {
  .page-hero.has-img { grid-template-columns: 1fr 1fr; align-items: center; }
  .page-hero.has-img::after { grid-row: 1 / span 4; grid-column: 2; height: 100%; min-height: 220px; margin: 0; }
}

/* utility pages (contact, track, scan, privacy): a title line, then straight to the task */
.page-hero.compact, .page-hero:not(.has-img) {
  min-height: 0; display: block; text-align: left;
  padding: calc(var(--nav-h) + clamp(1.25rem, 4svh, 2.5rem)) var(--gutter) clamp(.75rem, 2svh, 1.5rem);
  max-width: calc(var(--w-content) + 2 * var(--gutter)); margin-inline: auto;
}
.page-hero.compact::after { display: none; }
.page-hero.compact h1, .page-hero:not(.has-img) h1 { font-size: clamp(2rem, min(1.2rem + 2.4vw, 1rem + 4.5svh), 3.25rem); line-height: 1.06; }
.page-hero.compact p:not(.page-hero-eyebrow), .page-hero:not(.has-img) p:not(.page-hero-eyebrow) { margin: var(--sp-3) 0 0; max-width: 60ch; font-size: 1.0625rem; color: var(--tx-muted); }
.page-hero.compact + section, .page-hero:not(.has-img) + section { padding-top: clamp(1rem, 3svh, 2rem); }

/* ── 4 · SECTIONS & TYPE ───────────────────────────────────────────────────────────────────────── */
.section-title { font-size: var(--fs-display); line-height: 1.06; }
.section-subtitle { max-width: 62ch; }
.cta-banner { padding-block: clamp(2.5rem, 1.5rem + 5svh, 5rem); }
.cta-banner h2, .cta-big h2 { font-size: clamp(2rem, min(1.2rem + 2.8vw, 1rem + 6svh), 4.25rem); }

/* ── 5 · BUTTONS: primary is solid fire, secondary is a thin outline — nothing glows unless asked ── */
.btn-primary, .order-btn.primary, .rx-btn.fill, .btn-dark {
  box-shadow: inset 0 1px 0 rgba(255,232,196,.5), 0 0 0 1px rgba(255,140,60,.35), 0 6px 18px rgba(224,86,28,.28);
}
.btn-primary:hover, .order-btn.primary:hover, .rx-btn.fill:hover, .btn-dark:hover {
  box-shadow: inset 0 1px 0 rgba(255,232,196,.6), 0 0 0 1px rgba(255,170,90,.6), 0 0 20px rgba(255,122,47,.45);
}
.btn-outline, .order-btn.secondary { box-shadow: none; }

/* ── 6 · FLOATING HELPERS: small, clear of safe areas, and they step aside over buttons & forms ── */
.ask-fab { height: 44px; min-width: 44px; border-radius: 22px; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px)); }
.ask-fab .ask-rx { width: 41px; height: 41px; font-size: 1.1rem; }
.to-top { width: 40px; height: 40px; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px)); }
.to-top .tt-label { display: none; }
.ask-fab, .to-top { transition: opacity .25s ease, transform .25s ease; }
html.tuck-chat .ask-fab, html.tuck-top .to-top { opacity: 0 !important; transform: translateY(10px) scale(.9) !important; pointer-events: none !important; }

/* ── 7 · BLENDS: every row is built around buying ─────────────────────────────────────────────── */
.product-rows { padding-block: clamp(1.5rem, 3svh, 3rem); }
.product-row {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding-block: clamp(2rem, 1rem + 4svh, 3.75rem);
}
.product-row-media img { max-height: min(420px, 54svh); }
.product-row-body h2 { margin-top: var(--sp-2); }
.product-row-body .row-desc { margin-top: var(--sp-3); max-width: 56ch; }
/* buy block: price & options → quantity + order */
.row-buy { margin-top: var(--sp-5); padding: var(--sp-4) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.row-buy-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; }
.row-buy .row-price { font: 700 2rem/1 'Playfair Display', serif; color: var(--tx); }
.row-buy .row-price small { font: 400 .9375rem 'Lato', sans-serif; color: var(--tx-muted); margin-left: .2em; }
.row-opts { font-size: .9375rem; color: var(--tx-muted); }
.row-opts a { color: var(--gold); font-weight: 700; text-decoration: none; }
.row-opts a:hover { text-decoration: underline; }
.row-buy-act { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: var(--sp-4); }
.row-buy-act .btn-primary { min-height: 48px; padding-inline: 1.6em; }
.qty-pick { display: inline-flex; align-items: center; height: 48px; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.04); }
.light .qty-pick { background: rgba(255,255,255,.5); border-color: rgba(36,26,15,.22); }
.qty-pick button { width: 44px; height: 46px; border: 0; background: none; font: 700 1.25rem/1 'Lato', sans-serif; color: inherit; cursor: pointer; }
.qty-pick button:hover { color: var(--ember-bright, #E0561C); }
.qty-pick output { min-width: 2ch; text-align: center; font: 700 1.0625rem/1 'Lato', sans-serif; }
/* heat & best uses, then the extras */
.row-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4) var(--sp-6); margin-top: var(--sp-5); align-items: start; }
.row-facts .heat-meter { margin: 0; }
.row-facts .product-perfect-for { margin: 0; }
.row-more { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-top: var(--sp-4); }
.row-more .product-tags { margin: 0; }
.row-more .row-recipe { margin: 0; }
.product-row .share-row { margin-top: var(--sp-4); gap: 8px; opacity: .85; }
.product-row .share-row:hover, .product-row .share-row:focus-within { opacity: 1; }
.product-row .share-label { font-size: .6875rem; letter-spacing: .18em; }
.product-row .share-btn, .product-row .share-btn svg { width: 32px; height: 32px; }
.product-row .share-btn::after { inset: -3px; }
@media (max-width: 880px) {
  .product-row { grid-template-columns: 1fr; gap: var(--sp-4); padding-block: var(--sp-6); }
  .product-row-media img { max-height: min(280px, 36svh); }
  .row-facts { grid-template-columns: 1fr; gap: var(--sp-4); }
}
/* bundle strip replaces the long repeat of the pricing page */
.bundle-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.5rem; padding: clamp(1.5rem, 4svh, 2.5rem) var(--gutter); text-align: center; border-top: 1px solid var(--rule); }
.bundle-strip p { margin: 0; font: 700 clamp(1.25rem, 1rem + 1vw, 1.75rem)/1.2 'Playfair Display', serif; }
.bundle-strip p em { color: var(--gold); }
.bundle-strip .bs-sub { display: block; margin-top: .25rem; font: 400 .9375rem/1.4 'Lato', sans-serif; color: var(--tx-muted); }

/* ── 8 · PRICING: four prices visible together, pictures the right size ────────────────────────── */
.counter-grid { gap: clamp(1rem, 2vw, 1.75rem); }
.counter-photo { aspect-ratio: 16 / 10; height: auto; max-height: 200px; object-fit: cover; width: 100%; }
.market-card-fig { max-width: 560px; margin-inline: auto; }
.market-card-fig img { width: 100%; height: auto; }

/* ── 9 · RECIPES: ingredients and steps come first ─────────────────────────────────────────────── */
.recipe-photo img { max-height: min(460px, 60svh); object-fit: cover; }

/* ── 10 · GLASS: thin edges, not heavy panels ──────────────────────────────────────────────────── */
nav.site-nav.scrolled { -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }

/* ── 11 · FORMS: the task sits near the top and nothing floats over it ─────────────────────────── */
#contact-section, #order-section { padding-top: clamp(1.25rem, 3svh, 2.5rem); }

@media (prefers-reduced-motion: reduce) {
  nav.site-nav, .season-ribbon, .ask-fab, .to-top { transition: none; }
}

/* ── 12 · NO DRIFT: page-opening pictures and section photos stay still and show their full frame
   (the scroll drift zoomed them 8–10% and slid them, cropping words in the pictures — e.g. the Gifts lettering) ── */
.page-hero.has-img::after, .page-hero.has-img.drift::after { transform: none !important; will-change: auto; }
.heatmeter-visual img.drift, .about-visual img.drift { transform: none !important; will-change: auto; }

/* ── 13 · FULL-FRAME OPENING PICTURES: artwork with words in it (Gifts: "Bring a little warmth home.")
   is shown whole — never cropped under the menu bar — sitting at the right and fading in from the left ── */
.page-hero.has-img.fit::after { background-size: contain !important; background-position: 100% 50% !important; background-repeat: no-repeat; }
@media (max-width: 880px) {
  .page-hero.has-img.fit::after { height: auto !important; max-height: none !important; aspect-ratio: var(--hero-ar, 16 / 9); background-size: 100% auto !important; background-position: 50% 0 !important; }
}

/* ── 14 · FULL-FRAME OPENING PICTURES FILL THE SPACE (Gifts): on computers the artwork is sized from its own
   shape (--hero-ar) and reaches left to the headline, still whole and never under the words; a soft
   blurred copy of the same picture warms the dark ground behind the headline. Phones keep section 13. ── */
@media (min-width: 881px) {
  .page-hero.has-img.fit {
    --fit-w: min(60vw, calc((100svh - var(--nav-h) - 1.5rem) * var(--hero-ar, 16 / 9)));
    --fit-h: calc(var(--fit-w) / (var(--hero-ar, 16 / 9)));
    grid-template-columns: minmax(0, 1fr) var(--fit-w);
    min-height: calc(var(--nav-h) + var(--fit-h));
    padding-top: var(--nav-h); padding-bottom: 0; padding-left: clamp(var(--gutter), 5vw, 6rem);
  }
  .page-hero.has-img.fit::after {
    width: var(--fit-w);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%); mask-image: linear-gradient(90deg, transparent 0, #000 14%);
  }
  .page-hero.has-img.fit::before {
    content: ""; position: absolute; top: var(--nav-h); right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none;
    background: var(--hero-img) 0 50% / cover no-repeat;
    transform: scaleX(-1); filter: blur(48px) saturate(1.35) brightness(.5); opacity: .8;
    -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 45%); mask-image: linear-gradient(270deg, transparent 0, #000 45%);
  }
}

/* ── 15 · WINTER SCENE (Gifts): the snow + twinkling-lights layer drawn by fx.js sits over the whole page opening
   (behind the words, in front of the picture), and the firelight glow behind the headline flickers slowly. ── */
.page-hero.has-img > canvas.scene-fx {
  position: absolute; top: var(--nav-h); left: 0; width: 100%; height: calc(100% - var(--nav-h)); z-index: 1;
  grid-column: auto; grid-row: auto; max-width: none; padding: 0; margin: 0; pointer-events: none;
}
@media (min-width: 881px) and (prefers-reduced-motion: no-preference) {
  .page-hero.has-img.fit[data-scene]::before { animation: hearthFlicker 5.2s ease-in-out infinite; }
}
@keyframes hearthFlicker { 0%, 100% { opacity: .8; } 18% { opacity: .96; } 31% { opacity: .7; } 47% { opacity: 1; } 63% { opacity: .76; } 80% { opacity: .92; } }

/* ── 16 · PHOTO OPENINGS EDGE TO EDGE (Order, Blends, Pricing, Recipes, Story and every recipe page; Chad 2026-10-11:
   "it needs to be edge to edge ... extend the pics to the left fully"). On computers the photo runs the full width of the
   screen, left edge to right edge, no side gaps, and the opening is tall enough that the photo is not blown up.
   Each photo is framed on its subject; a dark shade under the words keeps the headline clean and readable.
   Phones keep the photo on top, edge to edge, words below. ── */
@media (min-width: 881px) {
  .page-hero.has-img:not(.fit) {
    --hero-pl: max(var(--gutter), calc((100vw - var(--w-content)) / 2));
    --hero-col: clamp(19rem, 34vw, 36rem);
    min-height: calc(var(--nav-h) + clamp(340px, 25vw, 540px));
  }
  .page-hero.has-img:not(.fit) > :not(.hero-grid-lines) { max-width: var(--hero-col); padding-right: 0; text-shadow: 0 2px 22px rgba(0,0,0,.65); }
  .page-hero.has-img:not(.fit) h1 { font-size: min(clamp(2.2rem, min(1.2rem + 3vw, .8rem + 6.5svh), 4.5rem), calc(var(--hero-col) / 6.6)); }
  .page-hero.has-img:not(.fit)::after {
    left: 0; right: 0; width: auto; transform: none !important;
    background:
      linear-gradient(90deg, rgba(16,10,5,.9) 0, rgba(16,10,5,.84) calc(var(--hero-pl) + var(--hero-col)), rgba(16,10,5,.35) calc(var(--hero-pl) + var(--hero-col) + 12vw), rgba(16,10,5,0) calc(var(--hero-pl) + var(--hero-col) + 26vw)),
      linear-gradient(0deg, rgba(16,10,5,.4), transparent 28%),
      var(--hero-img) var(--hero-pos, 70% 50%) / cover no-repeat;
    -webkit-mask-image: none; mask-image: none;
  }
  .page-hero.has-img:not(.fit)::before { content: none; }
}
/* each opening photo framed on its subject (wide screens show a band of the photo, so the band sits on what matters) */
.page-hero[style*="recipes/smoked-brisket.jpg"] { --hero-pos: 70% 52%; }
.page-hero[style*="recipes/butchers-balm-wings.jpg"] { --hero-pos: 60% 55%; }
.page-hero[style*="recipes/grilled-walleye.jpg"] { --hero-pos: 60% 62%; }

/* ── 17 · NO DRIFT (Chad 2026-10-11: "fix every issue with drift and pictures"): pictures no longer slide or zoom while
   the page scrolls. Every picture sits still, framed the same way every time. ── */
.drift, .drift::before, .drift::after { transform: none !important; will-change: auto !important; }
.show-photo.drift { background-position: center 42% !important; }
.ocean-band.drift::before { background-position: center 62% !important; }
.feature-band.drift::before { background-position: center 35% !important; }

/* ── 18 · WARM HEADERS (Chad's supplied header artwork, 2026-10-11). OPT-IN ONLY: applies to a page opening marked
   class="page-hero has-img warm" — Blends, Recipes, Pricing, Our Story, Contact, Order and the Peddler's Popcorn recipe.
   Home and Gifts never carry "warm" and are not affected. The panoramas (about 3:1) are shown whole, edge to edge,
   at their own shape (no tall box, no heavy crop); the live headline sits in each picture's quiet left part
   (--q = how much of the picture's width is quiet). Small screens: picture on top, words below. ── */
.page-hero.has-img.warm { --warm-ar: 2.99; --tx-cream: #F6ECD9; }
.page-hero.has-img.warm .page-hero-eyebrow { color: #E9A957; }
.page-hero.has-img.warm h1 { color: var(--tx-cream); }
.page-hero.has-img.warm h1 em { color: #E9A957; }
.page-hero.has-img.warm p:not(.page-hero-eyebrow) { color: rgba(246,236,217,.9); }
@media (min-width: 1100px) {
  .page-hero.has-img.warm {
    --pad: clamp(1.5rem, 5vw, 6rem);
    --hero-col: calc(var(--q, .34) * 100vw - var(--pad) - 1.5vw);
    display: grid; grid-template-columns: minmax(0, var(--hero-col)) 1fr; align-content: center;
    min-height: 0; height: calc(var(--nav-h) + min(100vw / var(--warm-ar), 100svh - var(--nav-h) - 2.5rem));
    padding: var(--nav-h) 0 0 var(--pad);
  }
  .page-hero.has-img.warm > :not(.hero-grid-lines) { grid-column: 1; max-width: var(--hero-col); padding-right: 0; text-shadow: 0 2px 20px rgba(28,14,6,.55); }
  .page-hero.has-img.warm h1 { font-size: min(clamp(2.2rem, min(1.2rem + 3vw, .8rem + 6.5svh), 4.5rem), calc(var(--hero-col) / 6.2)); }
  .page-hero.has-img.warm p:not(.page-hero-eyebrow) { font-size: clamp(.95rem, .8rem + .45vw, 1.1875rem); max-width: 40ch; }
  .page-hero.has-img.warm::after {
    top: var(--nav-h); left: 0; right: 0; bottom: 0; width: auto; transform: none !important;
    background:
      linear-gradient(90deg, rgba(30,15,6,.62) 0, rgba(30,15,6,.42) calc(var(--q, .34) * 70%), rgba(30,15,6,0) calc(var(--q, .34) * 100% + 6%)),
      linear-gradient(0deg, rgba(22,12,6,.55) 0, rgba(22,12,6,0) 22%),
      var(--hero-img) 100% 50% / cover no-repeat;
    -webkit-mask-image: none; mask-image: none;
  }
  .page-hero.has-img.warm::before { content: none; }
}
@media (max-width: 1099px) {
  .page-hero.has-img.warm { display: grid; grid-template-columns: 1fr; min-height: 0; height: auto; padding: var(--nav-h) 0 var(--sp-6, 2rem); }
  .page-hero.has-img.warm::after {
    content: ""; position: relative; display: block; grid-row: 1; inset: auto; width: 100%; height: auto; max-height: none;
    aspect-ratio: 2.1 / 1; margin-bottom: var(--sp-5, 1.5rem); transform: none !important;
    background: linear-gradient(0deg, rgba(22,12,6,.5) 0, rgba(22,12,6,0) 30%), var(--hero-img) var(--mpos, 70% 50%) / cover no-repeat;
    -webkit-mask-image: none; mask-image: none;
  }
  .page-hero.has-img.warm::before { content: none; }
  .page-hero.has-img.warm > :not(.hero-grid-lines) { grid-column: 1; max-width: none; padding-inline: var(--gutter); }
}

/* ── 19 · LOGO IN THE MENU BAR: crisp, glass-wet, 3D and alive (Chad 2026-10-11). Light only — the mark's own colors are
   never changed: a sharp right-size image (1x/2x/3x), a lit top edge and a cast shadow for depth, a wet gloss across the
   top of the letters, and a slow shine that runs across the letters every few seconds. Gloss and shine are cut to the exact
   shape of the letters, so nothing spills onto the bar. Still for people who turn motion off. ── */
.nav-logo { position: relative; isolation: isolate; line-height: 0; }
.nav-logo .logo-img {
  height: 46px; width: auto;
  filter: drop-shadow(0 1.5px 0 rgba(20,10,4,.8)) drop-shadow(0 5px 8px rgba(0,0,0,.5)) drop-shadow(0 0 14px rgba(255,160,80,.18));
}
.nav-logo::before, .nav-logo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  -webkit-mask: url(/assets/logo-nav-3x.png) 0 50% / auto 100% no-repeat; mask: url(/assets/logo-nav-3x.png) 0 50% / auto 100% no-repeat;
}
.nav-logo::before {
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.7) 44%, rgba(255,255,255,0) 46%);
  mix-blend-mode: soft-light;
}
.nav-logo::after {
  background: linear-gradient(110deg, rgba(255,255,255,0) 42%, rgba(255,250,236,.85) 50%, rgba(255,255,255,0) 58%) no-repeat;
  background-size: 260% 100%; background-position: 160% 0;
  mix-blend-mode: screen; opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .nav-logo::after { animation: logoShine 7.5s cubic-bezier(.45,.05,.3,1) 1.2s infinite; }
  .nav-logo:hover::after { animation-duration: 2.2s; }
}
@keyframes logoShine { 0% { background-position: 160% 0; opacity: 0; } 4% { opacity: 1; } 26% { background-position: -60% 0; opacity: 1; } 30%, 100% { background-position: -60% 0; opacity: 0; } }
@media (max-width: 880px) { .nav-logo .logo-img { height: 38px; } }