/* ============================================================
   MTB Frame — Mountain Baker DS utility layer.
   Imports the Geist/Geist Mono/Inter webfonts and exposes the
   semantic classes the DS-aligned blocks reference:
   .mb-eyebrow, .mb-display-*, .mb-lead, .mb-body, .mb-card-title,
   .mb-ui, .mb-nav-label, .mb-numeric, .mb-flow, .mb-orb, .mb-glow,
   .mb-surface-deep/teal/blaze/night, .mb-topo-divider.
   ============================================================ */

/* Type loadout (REFRESH_SPEC §1.7, 2026-06-10)
   ───────────────────────────────────────────────────────────────
   ONE family: Hanken Grotesk (variable) — the closest free match to
   the P10 neo-grotesque Carter picked. Italic axis covers the accent
   voice (the Fraunces italic-serif is retired; serif leaks were a
   recurring audit defect). Geist Mono stays for code/numeric-mono.
   Inter remains in fallback chains for fast-paint. */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300..900;1,300..700&family=Geist+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');

/* NO :root token block here.
   Until 2026-08-15 this file redefined --frame-type-display/body/eyebrow at
   :root. A stylesheet beats the inline <style id="mtb-frame-tokens"> that
   carries the SITE's own tokens, so every site silently rendered in the MTB
   grotesk — honeywreck's Druk was set correctly in its options, emitted
   correctly into the page, and then overwritten here. The comment even
   claimed themes could override it; they could not.
   The stacks now live as fallbacks inside each var() use, which the token
   beats when it is set. */

/* Card titles wrapped in <a> were inheriting the browser default link
   color (rgb(0,0,238)) when --frame-fg1 wasn't yet present in the
   stored tokens option. Belt-and-suspenders: pin the headings inside
   the card anchors to fg1 by class. */
a.frame-trip-card *, a.frame-featured-card *, a.frame-pg__card * {
  color: var(--frame-fg1, #F2F8FA);
}
a.frame-trip-card .frame-tc__dist,
a.frame-pg__card .frame-pg__excerpt {
  color: var(--frame-fg2, rgba(228,238,240,0.72));
}

/* Body baseline — frame-zero theme ships zero CSS, so without this the
   browser default white body would bleed through anywhere a block
   doesn't paint (between sections, beside a max-width footer, behind
   short hero content).

   Slider Revolution 7 injects `<style class="sr7-inline-css">body {
   background: #fff !important }</style>` at runtime. Their selector is
   just `body` (specificity 0,0,1). We use `html body` (0,0,2) so our
   !important wins. The order also matters: SR7's inline style is
   appended late, but ours still wins on specificity.

   See tests/e2e/specs/_crawl/find-rogue3.spec.ts for the diagnostic. */
html, body, html body {
  background-color: var(--frame-ink, #16232A) !important;
  background-image: none !important;
  color: var(--frame-fg1, #F2F8FA);
  margin: 0 !important;
}
html body { min-height: 100vh !important; }

/* animatable angle for the moving gradient */
@property --mb-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* ============================================================
   SEMANTIC TYPE
   ============================================================ */
.mb-eyebrow {
  font-family: var(--frame-type-eyebrow, "Hanken Grotesk","Inter",system-ui,sans-serif);
  font-weight: 500;
  font-size: var(--frame-type-eyebrow-size, 0.78rem);
  letter-spacing: var(--frame-type-eyebrow-track, 0.22em);
  text-transform: uppercase;
  line-height: 1;
  color: var(--frame-eyebrow-color, var(--frame-accent, #FF5B04));
}

.mb-display-hero,
.mb-display-1,
.mb-display-2,
.mb-display-3 {
  font-family: var(--frame-type-display, "Hanken Grotesk","Inter Tight","Inter","SF Pro Display",system-ui,-apple-system,sans-serif);
  font-weight: 500;
  line-height: var(--frame-type-leading-tight, 1.04);
  letter-spacing: -0.02em;
  color: var(--frame-fg1, var(--frame-light));
  text-wrap: balance;
  margin: 0;
}
/* Display weights bumped to match the bold sans-serif reference
   (SITU BAGENDIT homepage style). Hero+1 use 800 (semi-bold display);
   2+3 use 700 (subhead-bold). Letter-spacing tightened across the board
   for the dense modern-grotesque feel. */
.mb-display-hero { font-size: var(--frame-type-display-hero); font-weight: 800; letter-spacing: -0.03em; }
.mb-display-1    { font-size: var(--frame-type-display-1); font-weight: 800; letter-spacing: -0.025em; }
.mb-display-2    { font-size: var(--frame-type-display-2); font-weight: 700; letter-spacing: -0.02em; }
.mb-display-3    { font-size: var(--frame-type-display-3); font-weight: 700; letter-spacing: -0.018em; }

/* italic emphasis inside a display headline — blaze + non-italic */
.mb-display-hero em,
.mb-display-1 em,
.mb-display-2 em,
.mb-display-3 em {
  font-style: normal;
  font-weight: 600;
  color: var(--frame-accent, #FF5B04);
}

/* Lead paragraph — kept on Inter / clean modern sans. Carter does not
   want italic serif as the default voice. The --frame-type-accent
   token remains defined so blocks can opt-in via .mb-accent when they
   genuinely want a serif moment, but it never applies automatically. */
.mb-lead {
  font-family: var(--frame-type-body, "Hanken Grotesk","Inter",system-ui,-apple-system,sans-serif);
  font-size: var(--frame-type-size-lg);
  line-height: var(--frame-type-leading-snug, 1.22);
  color: var(--frame-fg2, rgba(228,238,240,0.72));
  font-weight: 400;
}

/* OPT-IN ONLY — never wired by default. Apply via a class swap in the
   editor when a specific block wants the serif voice. */
.mb-accent {
  font-family: var(--frame-type-accent, "Hanken Grotesk","Inter",system-ui,sans-serif);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.005em;
}

.mb-body {
  font-family: var(--frame-type-body, "Hanken Grotesk","Inter",system-ui,-apple-system,sans-serif);
  font-size: var(--frame-type-size-md);
  line-height: var(--frame-type-leading-body, 1.6);
  color: var(--frame-fg2, rgba(228,238,240,0.72));
  text-wrap: pretty;
}

.mb-card-title {
  font-family: var(--frame-type-body, "Hanken Grotesk","Inter",system-ui,-apple-system,sans-serif);
  font-weight: 700;
  font-size: var(--frame-type-size-lg);
  line-height: var(--frame-type-leading-snug, 1.22);
  color: var(--frame-fg1, var(--frame-light));
  letter-spacing: -0.01em;
}

.mb-ui {
  font-family: var(--frame-type-body, "Hanken Grotesk","Inter",system-ui,-apple-system,sans-serif);
  font-weight: 500;
  font-size: var(--frame-type-size-sm);
  letter-spacing: 0;
  color: var(--frame-fg1, var(--frame-light));
}

/* lowercase nav labels — defining feature of MB voice */
.mb-nav-label {
  font-family: var(--frame-type-body, "Hanken Grotesk","Inter",system-ui,-apple-system,sans-serif);
  font-weight: 500;
  font-size: var(--frame-type-size-sm);
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--frame-fg1, var(--frame-light));
}

/* numeric overlays / map labels */
.mb-numeric {
  font-family: var(--frame-type-eyebrow, "Hanken Grotesk","Inter",system-ui,sans-serif);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--frame-fg1, var(--frame-light));
}

/* ============================================================
   DARK GRADIENT SURFACES
   ============================================================ */
.mb-surface-deep   { background: var(--frame-grad-deep); }
.mb-surface-teal   { background: var(--frame-grad-deep-teal); }
.mb-surface-blaze  { background: var(--frame-grad-deep-blaze); }
.mb-surface-night  { background: var(--frame-grad-deep-night); }

/* ambient orbs */
.mb-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(40px);
  pointer-events: none;
  opacity: 0.9;
}
.mb-orb--teal   { background: var(--frame-orb-teal); }
.mb-orb--blaze  { background: var(--frame-orb-blaze); }
.mb-orb--violet { background: var(--frame-orb-violet); }
.mb-orb--drift  { animation: mb-drift 18s var(--frame-motion-ease-in-out, ease-in-out) infinite alternate; }
@keyframes mb-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(24px, -18px) scale(1.12); }
}

/* ============================================================
   MOVING GRADIENT GLOW (signature hover)
   ============================================================ */
.mb-flow {
  position: relative;
  border-radius: var(--frame-radius-lg, 16px);
  isolation: isolate;
}
.mb-flow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: conic-gradient(from var(--mb-angle),
      transparent 0deg,
      var(--flow-c1, #00E5FF) 90deg,
      var(--flow-c2, #FF5B04) 180deg,
      transparent 290deg);
  filter: blur(13px);
  opacity: 0;
  transition: opacity var(--frame-motion-dur-med, 260ms) var(--frame-motion-ease-out, ease);
}
.mb-flow::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: var(--frame-grad-deep-night);
  border: 1px solid var(--frame-border, rgba(228,238,240,0.14));
  transition: border-color var(--frame-motion-dur-med, 260ms) var(--frame-motion-ease-out, ease);
}
.mb-flow > * { position: relative; z-index: 2; }
.mb-flow:hover::before,
.mb-flow:focus-within::before {
  opacity: 0.7;
  animation: mb-spin 5s linear infinite;
}
.mb-flow:hover::after,
.mb-flow:focus-within::after {
  border-color: color-mix(in srgb, var(--flow-c1, #00E5FF) 30%, var(--frame-border, rgba(228,238,240,0.14)));
}
@keyframes mb-spin { to { --mb-angle: 360deg; } }

/* ============================================================
   SOFT DARK GLOW on hover
   ============================================================ */
.mb-glow {
  transition: box-shadow var(--frame-motion-dur-med, 260ms) var(--frame-motion-ease-out, ease),
              transform var(--frame-motion-dur-med, 260ms) var(--frame-motion-ease-out, ease),
              border-color var(--frame-motion-dur-med, 260ms) var(--frame-motion-ease-out, ease);
  box-shadow: var(--frame-glow-soft);
}
.mb-glow:hover {
  transform: translateY(-3px);
  box-shadow: var(--frame-glow-soft),
              0 0 28px -4px color-mix(in srgb, var(--glow-c, #00E5FF) 38%, transparent);
}

/* ============================================================
   GLASS surface
   ============================================================ */
.mb-glass {
  background: var(--frame-glass-bg);
  backdrop-filter: var(--frame-glass-filter);
  -webkit-backdrop-filter: var(--frame-glass-filter);
  border: 1px solid var(--frame-border);
}

/* selection */
::selection { background: var(--frame-accent, #FF5B04); color: #fff; }

/* Smooth scroll for in-page anchor links (frame/section anchor IDs). */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Reveal-mask wipe animation — usable on any block via class .mb-mask. */
.mb-mask {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 900ms cubic-bezier(.2,.7,.2,1);
}
.mb-mask.is-in { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .mb-orb--drift,
  .mb-flow:hover::before,
  .mb-flow:focus-within::before { animation: none; }
}

/* ============================================================
   REFRESH_SPEC §2 — footer gradient band (P18, budget: this IS
   the page's one gradient band on most pages). Warm ember bloom
   top-left, faint cool answer bottom-right, film grain overlay.
   Pack-aware via --mb-warm/--mb-cool.
   ============================================================ */
.frame-region--footer .frame-section {
  position: relative;
  background:
    radial-gradient(90% 130% at 10% -20%, color-mix(in srgb, var(--mb-warm, #FF7F50) 14%, transparent) 0%, transparent 55%),
    radial-gradient(130% 150% at 90% 130%, color-mix(in srgb, var(--mb-cool, #4FBBBC) 6%, transparent) 0%, transparent 60%),
    #0A0D12 !important;
}
.frame-region--footer .frame-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--frame-grain);
  opacity: 0.5;
  mix-blend-mode: overlay;
}

/* P23 film grade — lifted curve: soft blacks/whites + grade filter + grain.
   Apply to media wrappers + scene panes. */
.frame-film { filter: var(--frame-film-lift); }
.frame-film--grain { position: relative; }
.frame-film--grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--frame-grain);
  background-size: 200px 200px;
  /* The token noise is low-contrast midtone grey — overlay-blended it washed
     out to nothing on colour (same fix as the hero/poster grain). Crush it to
     crisp specks so the film grain actually READS on EVERY section (NORTH_STAR:
     real grain, not subliminal). */
  filter: contrast(1.85) brightness(1.04);
  opacity: var(--frame-film-grain-opacity, 0.34);
  mix-blend-mode: overlay;
  z-index: 1;
}

/* P23 scroll-scene pane — tinted frosted film pane over the fixed hero.
   --scene-p (0→1, set by frame-anim.js IO) drives the sink/raise. */
/* NOTE: NO filter/transform on the band itself — either one creates a
   containing block that KILLS position:sticky for the band header
   (found in FE-1). Film lift lives on media children; sink depth is
   conveyed by the header's progress shadow. */
.frame-scene {
  position: relative;
  /* P24 poster surface: the gradient IS the surface, not corner seasoning.
     TRANSLUCENT layers — the blurred hero field (.omh-scene-blurfield)
     glows through from behind; full-saturation pack bloom out of deep ink.
     Grain rides on the .frame-film--grain ::after. */
  /* ONE clean colour story + a translucent dark veil so the fixed blurred
     hero video glows through as the page-wide atmosphere (NORTH_STAR: atmosphere
     IS the content; the old two-radial mix read as brown mud). Grain rides the
     .frame-film--grain ::after. */
  /* PROMINENT + DRASTIC per section (Carter): strong two-tone PACK wash — warm
     bloom one corner + cool bloom the opposite (positions per pack via
     --scene-bloom-a/b -> distinct colour per section) over a heavier veil so the
     section dominates over the hero. Warm+cool at far corners stay clean. */
  background:
    radial-gradient(var(--scene-bloom-a, 120% 88% at 14% 8%), color-mix(in srgb, var(--mb-warm, #FF7F50) 54%, transparent) 0%, transparent 56%),
    radial-gradient(var(--scene-bloom-b, 120% 92% at 90% 92%), color-mix(in srgb, var(--mb-cool, #4FBBBC) 44%, transparent) 0%, transparent 58%),
    linear-gradient(180deg, rgba(8,10,13,.52) 0%, rgba(8,10,13,.80) 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* P24: ONE color idea per section — bloom geometry varies by pack and lives
   MID-BAND, off the joints. (Identical edge-overshoot blooms doubled up at
   every band joint and read as bright seam strips across the page.) */
[data-pack="alpenglow"]  { --scene-bloom-a: 110% 80% at 82% 14%; --scene-bloom-b: 130% 90% at 8% 78%; }
[data-pack="ember"]      { --scene-bloom-a: 120% 85% at 14% 64%; --scene-bloom-b: 110% 80% at 86% 22%; }
[data-pack="trailworks"] { --scene-bloom-a: 115% 90% at 70% 80%; --scene-bloom-b: 120% 85% at 12% 16%; }
[data-pack="blaze"]      { --scene-bloom-a: 118% 82% at 30% 20%; --scene-bloom-b: 122% 92% at 88% 84%; }

/* P24 blur field — super-gaussian hero copy, fixed behind everything past
   the hero (frame-anim.js builds it + drives the clip reveal). The img-as
   -background avoids children, so no sticky/containing-block hazards. */
.omh-scene-blurfield {
  position: fixed; inset: -6vh -6vw; z-index: -1;
  background-size: cover; background-position: center;
  filter: blur(52px) saturate(1.18) brightness(.96);
  pointer-events: none;
}

/* P24 full-bleed: the scene surface spans the viewport at EVERY width —
   content stays in the column, atmosphere does not (the boxed-bands-in-
   black-gutters failure Carter screenshotted at 2000px). */
.omh-block.frame-scene, .omh-explore-sec.frame-scene {
  box-sizing: border-box; /* bands live outside #omtb-home's border-box scope */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(28px, calc((100vw - 1240px) / 2));
  padding-right: max(28px, calc((100vw - 1240px) / 2));
  max-width: none;
}
@media (prefers-reduced-motion: reduce) {
  .frame-scene { transform: none; transition: none; }
}
@media (max-width: 600px) {
  /* Mobile keeps the identity; sink snaps instead of scrubbing (P23). */
  .frame-scene { transition: transform .35s var(--frame-motion-ease-out, ease), box-shadow .35s ease; }
}

/* Hero exits into the first band on a film fade, not a hard cut. */
.frame-home-hero--scene .omh-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30vh;
  background: linear-gradient(180deg, transparent, rgba(11,14,19,.65) 62%, #0B0E13 100%);
  pointer-events: none;
}

/* P23 (c) — fixed scene backdrop: the hero's video layer persists behind
   the whole scroll. Three paint layers had to yield (BE: all found live):
   1. #omtb-home .omh-hero__video (ID specificity) kept the layer absolute;
   2. body's opaque bg sat ABOVE a z:-1 fixed element (body bg paints in
      normal flow, above negative-z) — body goes transparent, html keeps
      the ink base;
   3. the hero's own poster bg covered the video inside the hero — cleared;
      frame-anim.js moves the poster onto the fixed wrapper as fallback. */
body:has(.frame-home-hero--scene) { background: transparent !important; }
.frame-home-hero--scene .omh-hero {
  background-image: none !important;
  background-color: transparent !important;
}
#omtb-home .frame-home-hero--scene .omh-hero__video,
.frame-home-hero--scene .omh-hero__video {
  position: fixed !important; inset: 0 !important; z-index: -1 !important;
  background-size: cover; background-position: center;
  filter: var(--frame-film-lift);
}

/* ============================================================
   §1 POSTER HERO (2026-06-13) — the grainy film-gradient wash.
   Carter's boards (APRIL tricolor / doctor-visit blur / normform):
   a smooth pack gradient + LOUD grain over the photographic base so the
   hero reads as a printed film poster, not a flat dark photo. The colour
   is pack-driven (data-pack on .frame-home-hero retints --mb-warm/cool/deep).
   We override the scrim itself (specificity 1,2,0 > the inline #omtb-home
   1,0,1) so the wash lands exactly where the legibility scrim was — warm
   bloom one corner, cool counter, deep ember spine, lighter dark base so
   the colour and the video both show through. Grain rides the outer
   .frame-film--grain::after at --frame-film-grain-opacity (set inline).
   ============================================================ */
.frame-home-hero--poster #omtb-home .omh-hero__scrim {
  background:
    radial-gradient(118% 88% at 85% 6%, color-mix(in srgb, var(--mb-warm, #FF7F50) 56%, transparent) 0%, transparent 56%),
    radial-gradient(120% 100% at 4% 102%, color-mix(in srgb, var(--mb-cool, #4FBBBC) 28%, transparent) 0%, transparent 60%),
    radial-gradient(95% 72% at 52% 124%, color-mix(in srgb, var(--mb-deep, #EC4624) 34%, transparent) 0%, transparent 58%),
    linear-gradient(180deg, rgba(8,9,12,.30) 0%, rgba(8,9,12,.20) 40%, rgba(8,9,12,.76) 100%);
}
.frame-home-hero--poster.frame-film--grain::after {
  /* opacity comes from the inline --frame-film-grain-opacity. z:1 paints
     AFTER the scrim (also z1, but the ::after is the last child so it stacks
     above it) yet BELOW the wordmark/CTAs (inner z2) and heronav (z3). */
  z-index: 1;
  /* The token noise is low-contrast midtone grey — overlay-blended over the
     saturated ember it washed out to nothing. Crush it to crisp black/white
     specks so the film grain actually READS (Carter's whole emphasis). */
  filter: contrast(1.9) brightness(1.05);
  background-size: 220px 220px;
}

/* P23 (d) — scene ticker: sticky morphing section header. */
.frame-scene-ticker {
  position: sticky; top: var(--ticker-top, 52px); z-index: 40;
  display: flex; align-items: center; gap: 10px;
  margin: 0 auto; padding: 10px 16px; max-width: 720px;
  border-radius: var(--frame-glass2-radius, 20px);
  background: color-mix(in srgb, var(--mb-warm, #FF7F50) 9%, var(--frame-glass2-tint, rgba(16,22,29,.78)));
  border: var(--frame-glass2-border, 1px solid rgba(255,255,255,.09));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background .45s ease;
  overflow: hidden;
}
.frame-scene-ticker__track { flex: 1 1 auto; position: relative; min-height: 1.4em; text-align: center; }
.frame-scene-ticker__label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 700 0.95rem/1 var(--frame-type-display, "Hanken Grotesk","Inter Tight","Inter","SF Pro Display",system-ui,-apple-system,sans-serif); letter-spacing: .04em; text-transform: uppercase;
  color: var(--frame-fg1, #F2F8FA); text-decoration: none;
  transition: transform .4s var(--frame-motion-ease-out, ease), opacity .4s ease;
}
.frame-scene-ticker__label.is-prev { transform: translateX(-105%); opacity: 0; }
.frame-scene-ticker__label.is-next { transform: translateX(105%); opacity: 0; }
.frame-scene-ticker__nav {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: var(--frame-fg2, rgba(232,237,242,.7)); font-size: 14px; line-height: 1;
}
.frame-scene-ticker__nav:hover { color: var(--mb-warm, #FF7F50); }
@media (prefers-reduced-motion: reduce) { .frame-scene-ticker__label { transition: none; } }

/* P2 collage layout for home-section cards — staggered, size-varied tiles
   "like prints scattered on a table". Desktop 5-tile composition; tablet 4;
   mobile falls back to a clean 2-col. Glass + grain per P13. */
/* Clean MOSAIC grid (Carter: "revert to a mosaic grid situation"). Aligned
   2-up lead row + 3-up row, NO scattered margin offsets, flat editorial tiles
   (no glass slab box). Tiles all align to the grid. */
.omh-cards--collage {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  align-items: stretch;
}
.omh-cards--collage .omh-card {
  background: transparent; border: 0; border-radius: 0; overflow: visible; margin: 0 !important;
}
.omh-cards--collage .omh-card:nth-child(1),
.omh-cards--collage .omh-card:nth-child(2) { grid-column: span 3; }
.omh-cards--collage .omh-card:nth-child(3),
.omh-cards--collage .omh-card:nth-child(4),
.omh-cards--collage .omh-card:nth-child(5) { grid-column: span 2; }
.omh-cards--collage .omh-card .omh-card__media { aspect-ratio: 3/2; }
.omh-cards--collage .omh-card:nth-child(1) .omh-card__media,
.omh-cards--collage .omh-card:nth-child(2) .omh-card__media { aspect-ratio: 16/10; }
@media (max-width: 1023px) {
  .omh-cards--collage { grid-template-columns: repeat(2, 1fr); }
  .omh-cards--collage .omh-card { grid-column: span 1 !important; }
  .omh-cards--collage .omh-card:nth-child(n+5) { display: none; }
}
@media (max-width: 600px) {
  .omh-cards--collage { grid-template-columns: 1fr; }
}

/* The sections region sits on solid ink — the fixed hero backdrop showing
   through wrapper gaps read as a rust-colored bug strip, not a reveal. */
.frame-home-sections { background: var(--frame-ink, #0E1216); }

/* Home section cards: the base omh-card was a WHITE card on the dark
   bands (only the collage variant had been converted) — glass for all. */
.omh-sections .omh-card {
  border-radius: var(--frame-glass2-radius, 18px);
  background: var(--frame-glass2-bg, rgba(22,30,38,.55)) !important;
  border: var(--frame-glass2-border, 1px solid rgba(255,255,255,.09));
  overflow: hidden;
  max-width: none !important;
  flex: initial !important;
}
/* Uniform rows: grid + 3:2 media (uncropped portraits were blowing the
   composition apart). */
.omh-sections .omh-cards:not(.omh-cards--collage) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}
.omh-sections .omh-cards:not(.omh-cards--collage)[data-count="1"] { grid-template-columns: 1fr; max-width: 720px; }
.omh-sections .omh-cards:not(.omh-cards--collage)[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.omh-sections .omh-card .omh-card__media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  height: auto !important;
  background-size: cover;
  background-position: center;
  /* film grade on imagery */
  filter: var(--frame-film-lift, none);
  transition: filter .35s ease;
}
.omh-sections .omh-card:hover .omh-card__media { filter: var(--frame-film-lift, none) brightness(1.07); }
.omh-sections .omh-card { transition: transform .3s cubic-bezier(.22,.61,.36,1), border-color .3s ease, box-shadow .3s ease; }
.omh-sections .omh-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--mb-warm, #FF7F50) 45%, transparent);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
}
/* P2: title lives ON the photo over a film-fade gradient */
.omh-sections .omh-card__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(6,8,11,.32) 64%, rgba(6,8,11,.86) 100%);
}
.omh-sections .omh-card__title--overlay {
  position: absolute; left: 18px; right: 18px; bottom: 15px;
  font-family: var(--frame-type-display, "Hanken Grotesk", Inter, sans-serif);
  /* Oversized editorial title sunk onto the photo (roadmap §4-6: real type
     hierarchy, oversized title). Scales with the tile width. */
  font-weight: 800; font-size: clamp(1.4rem, 1.85vw, 2.1rem); line-height: 1.02; letter-spacing: -0.028em;
  color: #fff !important;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
/* The collage LEAD tile gets the biggest title (editorial lead-story scale). */
.omh-cards--collage .omh-card:first-child .omh-card__title--overlay {
  font-size: clamp(1.7rem, 2.6vw, 2.8rem); letter-spacing: -0.035em;
}
.omh-sections .omh-card__body { padding: 13px 16px 16px; }
.omh-sections .omh-card__body .omh-card__excerpt { margin: 0; }
@media (max-width: 900px) {
  .omh-sections .omh-cards:not(.omh-cards--collage) { grid-template-columns: 1fr !important; }
}
.omh-sections .omh-card__title { color: var(--frame-fg1, #F2F8FA) !important; }
.omh-sections .omh-card__excerpt { color: var(--frame-fg2, rgba(232,237,242,.72)) !important; }
.omh-sections .omh-card__date { color: var(--frame-fg3, rgba(232,237,242,.48)) !important; }

/* Inside a scene band the section's own slab must not mask the pane tint
   (HOME-V3: .omh-sections #0c0c0d blacked out trailworks). */
.frame-scene .omh-sections { background: transparent !important; }
/* Base card cap (flex 300px/max 440px) defeats the collage grid spans. */
.omh-cards--collage .omh-card { max-width: none !important; flex: initial !important; }

/* Collage with thin content: 1 post = full-width feature band (not a lonely
   tile in a 6-col void); 2 posts = balanced halves. Content rounds will
   fill these out (SITE_STRATEGY local-LA + DIY). */
.omh-cards--collage[data-count="1"] .omh-card:nth-child(1) { grid-column: span 6; display: grid; grid-template-columns: 3fr 2fr; }
.omh-cards--collage[data-count="1"] .omh-card:nth-child(1) .omh-card__media { aspect-ratio: 21/9; height: 100%; }
.omh-cards--collage[data-count="2"] .omh-card { grid-column: span 3 !important; }
@media (max-width: 1023px) {
  .omh-cards--collage[data-count="1"] .omh-card:nth-child(1) { display: block; grid-column: span 2 !important; }
}

/* Collage cards are dark glass — flip the card text light (base cards were
   white-bg with near-black text). */
.omh-cards--collage .omh-card__title { color: var(--frame-fg1, #F2F8FA) !important; }
.omh-cards--collage .omh-card__excerpt { color: var(--frame-fg2, rgba(232,237,242,.72)) !important; }
.omh-cards--collage .omh-card__date { color: var(--frame-fg3, rgba(232,237,242,.48)) !important; }
.omh-cards--collage .omh-card__body { padding: 16px 18px; }

/* P22 inset featured carousel — peeking deck bottom-right inside the hero.
   Titles OVERLAY the photo on a bottom gradient (P22 reference), cards are
   real glass, the deck clears the wordmark and the viewport edge. */
.omh-fcar { position: absolute; right: 48px; bottom: 130px; width: min(40vw, 640px); z-index: 5; }
.omh-fcar__deck { display: flex; gap: 16px; overflow: hidden; padding: 6px; }
.omh-fcar__card {
  position: relative; flex: 0 0 188px; text-decoration: none;
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
  transform: translateX(calc(var(--fcar-x, 0) * -204px));
  transition: transform .45s var(--frame-motion-ease-out, ease), border-color .3s ease;
}
.omh-fcar__card:hover { border-color: var(--mb-warm, #FF7F50); }
.omh-fcar__media { display: block; aspect-ratio: 3/4; background-size: cover; background-position: center; filter: var(--frame-film-lift); }
.omh-fcar__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(5,8,12,.86) 100%); }
.omh-fcar__title {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 12px 14px;
  font: 700 .88rem/1.3 var(--frame-type-display, "Hanken Grotesk","Inter Tight","Inter","SF Pro Display",system-ui,-apple-system,sans-serif);
  letter-spacing: .01em;
  color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.omh-fcar__chrome { display: flex; align-items: center; gap: 14px; margin: 14px 6px 0 6px; }
.omh-fcar__nav {
  width: 34px; height: 34px; border-radius: 999px; cursor: pointer; font-size: 14px;
  background: rgba(10,13,18,.55); border: 1px solid rgba(255,255,255,.16); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.omh-fcar__nav:hover { border-color: var(--mb-warm, #FF7F50); color: var(--mb-warm, #FF7F50); }
.omh-fcar__line { flex: 1 1 auto; height: 1px; background: rgba(255,255,255,.22); position: relative; }
.omh-fcar__line span { position: absolute; left: 0; top: -0.5px; height: 2px; width: 25%; background: var(--mb-warm, #FF7F50); transition: width .4s ease; }
.omh-fcar__idx { font: 800 1.5rem/1 var(--frame-type-display, "Hanken Grotesk","Inter Tight","Inter","SF Pro Display",system-ui,-apple-system,sans-serif); color: #fff; letter-spacing: .02em; padding-right: 2px; }
@media (max-width: 1023px) { .omh-fcar { display: none; } } /* P22 is a desktop flourish; mobile hero stays clean */

/* ============================================================
   P23 COMPOSITION — full-bleed scene bands + sticky section headers
   (FE-1, Carter spec: "the header becomes sticky overlay to the section
   and moves on when it reaches the next section"; body sinks below it).
   Headers live inside max-width containers, so they stretch full-bleed
   via the 50vw negative-margin trick and re-pad content back into the
   1240px column. Pack tint inherits from the band's [data-pack].
   ============================================================ */
.frame-scene .omh-block__head,
.frame-scene__head {
  /* NO BAR. The boards float type on the atmosphere — the glass slab was
     decoration (Carter: "the header is HORRIBLE"). Editorial label, not a bar. */
  position: relative;
  z-index: 4;
  display: flex;
  margin: 0 calc(50% - 50vw) clamp(24px,3vw,48px);  /* full-bleed */
  padding: 0 max(28px, calc(50vw - 592px));          /* back to the column */
  flex-direction: row;
  align-items: flex-end;
  gap: 16px;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
}
.frame-scene .omh-block__head .omh-block__headrow { flex: 1 1 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.frame-scene .omh-block__head .omh-sec-eyebrow { margin: 0 0 6px; color: var(--mb-warm, #FF7F50); }
/* Big editorial section title floating on the atmosphere (boards: huge type,
   no box). text-shadow keeps it legible over photo/map content below it. */
.frame-scene .omh-block__head .omh-sec-title,
.frame-scene__head .omh-sec-title {
  font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 800; letter-spacing: -.03em;
  line-height: .98; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.5);
}
.frame-scene { box-shadow: none; }
/* Bands: edge-to-edge tinted panes with vertical rhythm. */
.frame-scene { padding-bottom: clamp(64px, 8vw, 110px); }
.omh-sections .omh-cards { padding-top: 10px; }
@media (max-width: 600px) {
  .frame-scene .omh-block__head { padding: 0 18px; flex-wrap: wrap; row-gap: 2px; }
  .frame-scene .omh-block__head .omh-block__headrow { flex-wrap: wrap; row-gap: 2px; }
  .frame-scene .omh-block__head .omh-sec-link { font-size: .82rem; }
  .frame-scene .omh-block__head .omh-sec-title { font-size: 1.35rem; }
}

/* Band-header base type (frame-scene__head works on any page, not just the
   procedural home where omh-* styles load). */
.frame-scene__head .omh-sec-eyebrow,
.frame-scene .omh-sec-eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; font-weight: 700; margin: 0; font-family: var(--frame-type-eyebrow, "Hanken Grotesk","Inter",system-ui,sans-serif); }
.frame-scene__head .omh-sec-title { margin: 0; font-family: var(--frame-type-display, "Hanken Grotesk","Inter Tight","Inter","SF Pro Display",system-ui,-apple-system,sans-serif); font-weight: 800; letter-spacing: -.015em; color: #fff; }
.frame-scene__head .omh-sec-link,
.frame-scene .omh-sec-link { color: var(--mb-warm, #FF7F50); text-decoration: none; font-weight: 600; font-size: .92rem; }
.frame-scene__head .omh-sec-link:hover { text-decoration: underline; }

/* Map band header — the map strips the scene wrap, so this header is a
   standalone sticky bar above the map shell (not inside a band). */
.frame-scene__head--map {
  /* No bar — floating editorial label above the map (matches the base heads). */
  position: relative; z-index: 4;
  display: flex; flex-direction: column; gap: 6px;
  padding: 0 max(28px, calc(50vw - 592px));
  margin-bottom: clamp(20px,2.4vw,36px);
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0;
}
.frame-scene__head--map .omh-sec-eyebrow { color: var(--frame-pack-alpenglow-warm, #FFB133); }
.frame-scene__head--map .omh-block__headrow { display: flex; align-items: baseline; justify-content: space-between; }
.frame-scene__head--map .omh-sec-title { font-size: clamp(1.25rem, 2.2vw, 1.7rem); }

/* P22 hero story layer — eyebrow tick + storyline + CTA pair under the
   wordmark. P16 discipline: ONE solid CTA (pack warm), ghost secondary. */
.omh-hero__story { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.omh-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font: 700 .74rem/1 var(--frame-type-eyebrow, "Hanken Grotesk","Inter",system-ui,sans-serif); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.85); text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.omh-hero__tick { width: 26px; height: 1px; background: var(--mb-warm, #FF7F50); }
.omh-hero__storyline {
  margin: 0; max-width: 560px;
  font: 400 1.05rem/1.6 var(--frame-type-body, "Hanken Grotesk","Inter",system-ui,-apple-system,sans-serif);
  color: rgba(232,237,242,.88); text-shadow: 0 1px 14px rgba(0,0,0,.55);
}
.omh-hero__ctas { display: flex; gap: 12px; margin-top: 6px; }
.omh-hero__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: 999px; text-decoration: none;
  font: 700 .94rem/1 var(--frame-type-display, "Hanken Grotesk","Inter Tight","Inter","SF Pro Display",system-ui,-apple-system,sans-serif);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
/* P16 dial-back: the solid CTA was hot neon orange ("BRIGHT and aggressive").
   Deepen to a calmer ember with a hairline warm rim + soft glow; light text. */
.omh-hero__cta--solid {
  background: color-mix(in srgb, var(--mb-deep, #EC4624) 80%, #160d09);
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--mb-warm, #FF7F50) 55%, transparent);
  box-shadow: 0 8px 30px -12px color-mix(in srgb, var(--mb-warm, #FF7F50) 60%, transparent);
}
.omh-hero__cta--solid:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--mb-deep, #EC4624) 92%, #160d09); }
.omh-hero__cta--ghost { border: 1px solid rgba(255,255,255,.34); color: #fff; background: rgba(10,13,18,.25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.omh-hero__cta--ghost:hover { border-color: var(--mb-warm, #FF7F50); color: var(--mb-warm, #FF7F50); }
@media (max-width: 600px) {
  .omh-hero__story { margin-top: 20px; gap: 10px; }
  .omh-hero__storyline { font-size: .98rem; padding: 0 8px; }
  .omh-hero__ctas { flex-wrap: wrap; justify-content: center; }
}

/* ============================================================
   FE-4 / P10 — Print Shop hero band: film-graded featured-print backdrop
   under a frosted panel; display-scale title; P15 chips. Replaces the
   cramped strip (audit finding).
   ============================================================ */
.omtb-shop-hero--p10 {
  position: relative;
  overflow: hidden;
  border-radius: var(--frame-glass2-radius-hero, 24px);
  padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px) !important;
  margin-bottom: 22px;
  border: var(--frame-glass2-border, 1px solid rgba(255,255,255,.09));
  isolation: isolate;
}
.omtb-shop-hero--p10::before {
  content: ""; position: absolute; inset: -24px; z-index: -2;
  background-image: var(--shop-hero-bg);
  background-size: cover; background-position: center 35%;
  filter: blur(14px) var(--frame-film-lift, contrast(.92) brightness(1.04) saturate(.96));
  transform: scale(1.06);
}
.omtb-shop-hero--p10::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Gradient must darken at FULL strength — the overlay blend washed it
     out and drowned the title (FE-4 catch). Grain rides the photo layer. */
  background: linear-gradient(100deg, rgba(8,11,15,.95) 0%, rgba(8,11,15,.82) 55%, rgba(8,11,15,.55) 100%);
}
.omtb-shop-hero--p10::before {
  background-image: var(--frame-grain), var(--shop-hero-bg);
  background-size: 160px, cover;
  background-position: 0 0, center 35%;
}
.omtb-shop-hero--p10 .omtb-shop-hero__kicker { color: var(--mb-warm, #FF7F50); letter-spacing: .2em; }
.omtb-shop-hero--p10 .omtb-shop-hero__h {
  font: 800 clamp(1.9rem, 3.6vw, 3rem)/1.04 var(--frame-type-display, "Hanken Grotesk","Inter Tight","Inter","SF Pro Display",system-ui,-apple-system,sans-serif);
  letter-spacing: -.02em; margin: 8px 0 10px;
  color: var(--frame-fg1, #F2F8FA) !important; /* --omtb-text resolved near-black here */
  text-shadow: 0 1px 18px rgba(0,0,0,.45);
}
.omtb-shop-hero--p10 .omtb-shop-hero__sub { font-size: 1rem; line-height: 1.6; color: var(--frame-fg2, rgba(232,237,242,.74)); }
.omtb-shop-hero--p10 .omtb-shop-hero__chips { gap: 8px; margin-top: 16px; }
.omtb-shop-hero--p10 .omtb-shop-hero__chips span {
  padding: 7px 14px; border-radius: 999px; font: 600 .8rem/1 var(--frame-type-display, "Hanken Grotesk","Inter Tight","Inter","SF Pro Display",system-ui,-apple-system,sans-serif);
  background: color-mix(in srgb, var(--mb-warm, #FF7F50) 12%, rgba(14,18,22,.55));
  border: 1px solid color-mix(in srgb, var(--mb-warm, #FF7F50) 24%, transparent);
  color: var(--frame-fg1, #F2F8FA);
}
.omtb-shop-hero--p10 .omtb-shop-hero__btn {
  padding: 13px 26px; border-radius: 999px;
  font: 700 .95rem/1 var(--frame-type-display, "Hanken Grotesk","Inter Tight","Inter","SF Pro Display",system-ui,-apple-system,sans-serif);
  background: color-mix(in srgb, var(--mb-warm, #FF7F50) 92%, #000);
  color: #14100c; border: 0;
}
.omtb-shop-hero--p10 .omtb-shop-hero__btn:hover { transform: translateY(-2px); }
@media (max-width: 600px) {
  .omtb-shop-hero--p10 { border-radius: 16px; }
  .omtb-shop-hero--p10 .omtb-shop-hero__h { font-size: 1.55rem; }
}

/* FE-4 funnel: the print builder inherited near-black text on the dark
   cart page — title + live price were invisible. Pin builder text light;
   greeting-card tile content readable on its tinted state. */
.omtb-pb .omtb-pb__title { color: var(--frame-fg1, #F2F8FA) !important; }
.omtb-pb .omtb-pb__price { color: var(--frame-fg1, #F2F8FA) !important; }
.omtb-pb [class*="__tile"].is-active,
.omtb-pb [class*="__tile"][aria-pressed="true"] { color: #14100c; }
.omtb-pb select {
  background: rgba(20,26,33,.9); color: var(--frame-fg1, #F2F8FA);
  border: 1px solid rgba(255,255,255,.16); border-radius: 10px; padding: 8px 10px;
}

/* FE-4 funnel: cart heading was invisible (dark-on-dark); Woo's coupon
   banner was a stark white strip on the dark checkout. */
.omtb-cart h2, .omtb-cart [class*="__heading"],
#omtb-cart h2 { color: var(--frame-fg1, #F2F8FA) !important; }
.woocommerce-form-coupon-toggle .woocommerce-info {
  background: var(--frame-glass2-tint, rgba(16,22,29,.78)) !important;
  color: var(--frame-fg2, rgba(232,237,242,.74)) !important;
  border-top: 2px solid var(--mb-warm, #FF7F50) !important;
  border-radius: 12px;
}
.woocommerce-form-coupon-toggle .woocommerce-info a { color: var(--mb-warm, #FF7F50) !important; }

/* ============================================================
   P21 — MOBILE GALLERY BENTO (post galleries ≤600px).
   The cinematic montage becomes a curated 5-tile bento: 1 hero + 4
   tiles + "+N photos" chip (added by frame-anim driver) that opens the
   lightbox. Desktop keeps the cinematic experience.
   ============================================================ */
@media (max-width: 600px) {
  .omtb-trip__gallery .mb-cg__viewport { min-height: 0 !important; height: auto !important; cursor: default; }
  .omtb-trip__gallery .mb-cg__track {
    display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 8px;
    padding: 0 14px 6px; transform: none !important;
    /* JS stamps inline width (contentWidth px) + height for the marquee —
       both must die or the grid tracks size to thousands of px. */
    width: auto !important; height: auto !important; min-width: 0 !important;
  }
  .omtb-trip__gallery .mb-cg__row { display: contents !important; }
  .omtb-trip__gallery .mb-cg__card {
    position: relative !important; inset: auto !important; transform: none !important;
    width: 100% !important; height: auto !important; margin: 0 !important;
    aspect-ratio: 1/1;
    border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.08);
  }
  /* Media fills the card; everything else the gallery injects into a card
     (mobile copy, cover meta, hover-collect FAB) is noise at tile size. */
  .omtb-trip__gallery .mb-cg__card .mb-cg__media {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important; display: block;
  }
  .omtb-trip__gallery .mb-cg__card .mb-cg__img {
    width: 100% !important; height: 100% !important; object-fit: cover;
  }
  .omtb-trip__gallery .mb-cg__card .mb-cg__mobile-card-copy,
  .omtb-trip__gallery .mb-cg__card .mb-cg__cover-meta,
  .omtb-trip__gallery .mb-cg__card .mb-cg__mobile-card-meta,
  .omtb-trip__gallery .mb-cg__card .mb-cg__commerce-icon,
  .omtb-trip__gallery .mb-cg__card .mb-cg__card-collect,
  .omtb-trip__gallery .mb-cg__info-badge { display: none !important; }
  .omtb-trip__gallery .mb-cg__row:first-child .mb-cg__card:first-child {
    grid-column: span 2; aspect-ratio: 16/10;
  }
  /* Show exactly 5 tiles. */
  .omtb-trip__gallery .mb-cg__row:first-child .mb-cg__card:nth-child(n+6) { display: none !important; }
  .omtb-trip__gallery .mb-cg__row:not(:first-child) { display: none !important; }
  .omtb-trip__gallery .mb-cg-bento-more {
    position: absolute; right: 10px; bottom: 10px; z-index: 3;
    padding: 8px 14px; border-radius: 999px; cursor: pointer;
    font: 600 .8rem/1 var(--frame-type-display, "Hanken Grotesk","Inter Tight","Inter","SF Pro Display",system-ui,-apple-system,sans-serif);
    /* Dark glass, not orange — P16: bright orange buttons read aggressive. */
    background: rgba(10, 13, 17, .72);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(240,243,246,.95);
  }
}


/* ── Beta log rows (shared: /category/beta/ + the home Beta band) ── */
.omtb-beta-feed { display: flex; flex-direction: column; gap: 12px; }
.omtb-beta-feed__row { display: flex; gap: 18px; align-items: center; text-decoration: none; color: inherit;
  padding: 16px 18px; border-radius: 14px;
  background: var(--frame-glass2-bg, rgba(22,30,38,.52));
  border: var(--frame-glass2-border, 1px solid rgba(255,255,255,.09));
  transition: border-color .2s, transform .2s; }
.omtb-beta-feed__row:hover { border-color: rgba(255,122,47,.45); transform: translateY(-1px); }
.omtb-beta-feed__when { flex: 0 0 56px; text-align: center; }
.omtb-beta-feed__date { display: block; font-family: var(--frame-type-display, "Hanken Grotesk", Inter, sans-serif); font-weight: 800; font-size: 1.05rem; line-height: 1.1; color: #fff; }
.omtb-beta-feed__year { display: block; font-size: .72rem; color: rgba(236,240,244,.45); }
.omtb-beta-feed__body { flex: 1 1 auto; min-width: 0; }
.omtb-beta-feed__titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.omtb-beta-feed__title { font-family: var(--frame-type-display, "Hanken Grotesk", Inter, sans-serif); font-weight: 700; font-size: 1.05rem; color: #fff; }
.omtb-beta-feed__chip { padding: 3px 9px; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255,122,47,.12); border: 1px solid rgba(255,122,47,.4); color: #FFB088; }
.omtb-beta-feed__note { display: block; margin-top: 4px; font-size: .92rem; line-height: 1.5; color: rgba(236,240,244,.7); }
.omtb-beta-feed__thumb { flex: 0 0 92px; height: 64px; border-radius: 10px; background-size: cover; background-position: center; }
@media (max-width: 600px) {
  .omtb-beta-feed__row { flex-wrap: wrap; }
  .omtb-beta-feed__thumb { flex-basis: 100%; height: 120px; order: 3; }
}

/* ── P24 light canvas (warm-paper) — light sections are full citizens;
   the scroll alternates light like the APRIL poster's cream top. Slightly
   translucent so the band stays made-of-the-hero. ── */
.frame-scene--light {
  background:
    radial-gradient(var(--scene-bloom-a, 115% 85% at 12% 18%), color-mix(in srgb, var(--mb-warm, #E0521C) 26%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(238, 233, 224, .93) 0%, rgba(229, 222, 210, .96) 100%);
  color: #20242B;
}
.frame-scene--light .omh-sec-title { color: #1A1D23; }
.frame-scene--light .omh-sec-eyebrow { color: color-mix(in srgb, var(--mb-warm, #E0521C) 88%, #1A1D23); }
.frame-scene--light .omh-sec-link { color: color-mix(in srgb, var(--mb-warm, #E0521C) 85%, #1A1D23); }
.frame-scene--light.omh-block[data-ghost]::before { color: color-mix(in srgb, var(--mb-warm, #E0521C) 13%, transparent); }
.frame-scene--light .omh-block__head,
.frame-scene--light .frame-scene__head { background: transparent; border: 0; }
/* On the light/paper canvas the floating title is ink, not white. */
.frame-scene--light .omh-block__head .omh-sec-title,
.frame-scene--light .frame-scene__head .omh-sec-title { color: #1A1D23; text-shadow: 0 1px 12px rgba(238,233,224,.6); }
.frame-scene--light .omtb-beta-feed__row { border-color: rgba(26, 29, 35, .14); }
.frame-scene--light .omtb-beta-feed__title { color: #1A1D23; }
.frame-scene--light .omtb-beta-feed__note { color: rgba(32, 36, 43, .68); }
.frame-scene--light .omtb-beta-feed__date { color: color-mix(in srgb, var(--mb-warm, #E0521C) 70%, #1A1D23); }
/* Grain on paper reads darker, not lighter. */
.frame-scene--light.frame-film--grain::after { mix-blend-mode: multiply; opacity: .14; }

/* Light canvas: the beta LOG rows are paper cards, not dark glass bars
   (the row's dark base bg read as an illegible slab on cream). */
.frame-scene--light .omtb-beta-feed { background: transparent; }
.frame-scene--light .omtb-beta-feed__row { background: rgba(255, 252, 246, .62); }
.frame-scene--light .omtb-beta-feed__row:hover { background: rgba(255, 252, 246, .88); }
.frame-scene--light .omtb-beta-feed__when, .frame-scene--light .omtb-beta-feed__date { color: color-mix(in srgb, var(--mb-warm, #E0521C) 75%, #1A1D23); }

/* ── P18 footer backdrop — the page's last impression is a grainy warm
   gradient breathing out of deep ink, not flat black columns. !important
   beats any block-level inline background on the footer template. ── */
.frame-region--footer .frame-section {
  position: relative;
  background:
    radial-gradient(120% 90% at 16% -4%, color-mix(in srgb, var(--mb-warm, #E0521C) 20%, transparent), transparent 55%),
    radial-gradient(130% 100% at 92% 104%, color-mix(in srgb, var(--mb-deep, #EC4624) 15%, transparent), transparent 60%),
    linear-gradient(180deg, #0B0D11 0%, #07090C 100%) !important;
}
.frame-region--footer .frame-section::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--frame-grain);
  opacity: .16; mix-blend-mode: overlay;
}
.frame-region--footer .frame-section > * { position: relative; z-index: 1; }
/* §7 poster footer — a huge GHOST WORDMARK breathing out of the deep ink behind
   the columns (NORTH_STAR: oversized editorial type sunk into atmosphere). Only
   the columns section (not the thin colophon bar) carries it. */
.frame-region--footer .frame-section:has(.frame-columns) { overflow: hidden; }
.frame-region--footer .frame-section:has(.frame-columns)::before {
  content: "MOUNTAIN BAKER";
  position: absolute; left: 50%; bottom: -0.16em; transform: translateX(-50%);
  z-index: 0; pointer-events: none; white-space: nowrap;
  font-family: var(--frame-type-display, "Hanken Grotesk", Inter, sans-serif);
  font-weight: 900; font-size: clamp(4.5rem, 17vw, 15rem); line-height: .8;
  letter-spacing: -.045em;
  color: color-mix(in srgb, var(--mb-warm, #E0521C) 36%, #ffffff 64%);
  opacity: .045;
}
@media (max-width: 860px) {
  .frame-region--footer .frame-section:has(.frame-columns)::before { font-size: 28vw; opacity: .05; }
}

/* §2 MAP cohesion (Carter: "4 different colors and breaks, not cohesive").
   The map canvas is an opaque dark slab, so the section's warm bloom only
   showed in the thin header strip → a jarring amber band. Neutralise the
   explore/map section to one cohesive dark ground that matches the map. */
#sec-explore.frame-scene,
#sec-explore .frame-scene {
  background: linear-gradient(180deg, rgba(10,13,18,.62) 0%, rgba(9,11,15,.74) 100%) !important;
}
#sec-explore .frame-scene__head--map .omh-sec-eyebrow { color: var(--mb-warm, #FF7F50); }

/* Section divider + header breathing room (Carter: "no spacing on top of
   headers", "why is the section divider gone"). Killing the glass header BARS
   removed the divider line — restore it as a clean full-bleed hairline at each
   section top, plus real top padding above the floating title. */
.frame-scene {
  padding-top: clamp(44px, 5vw, 88px);
  border-top: 1px solid rgba(255,255,255,.10);
}
.frame-scene--light { border-top-color: rgba(26,29,35,.16); }


/* ── A10 INTERACTION GLOW — sitewide (audit-loop BATCH-2, spec batch-8) ──
   Focus/selected = the control's aura WAKES: asymmetric warm/cool light-leak
   + gradient hairline. Idle stays matte. Pre-computed shadows only. */
.frame-zero-article input:focus-visible,
.frame-zero-article textarea:focus-visible,
.omtb-contact input:focus-visible,
.omtb-contact textarea:focus-visible,
.wpd-form input:focus-visible,
.wpd-form textarea:focus-visible,
body.single-post input:focus-visible,
body.single-post textarea:focus-visible,
body.page input:focus-visible,
body.page textarea:focus-visible {
  outline: none !important;
  border-color: rgba(255, 138, 74, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(255, 138, 74, 0.32),
              -16px 12px 38px -10px rgba(255, 107, 53, 0.30),
              16px -10px 38px -12px rgba(64, 150, 170, 0.22) !important;
  transition: box-shadow 0.35s ease, border-color 0.35s ease !important;
}
/* buttons: ember bloom underlays the control on hover/focus */
button[type="submit"]:hover, button[type="submit"]:focus-visible,
input[type="submit"]:hover, input[type="submit"]:focus-visible,
.wp-element-button:hover, .wp-element-button:focus-visible,
.omtb-trip__pill-cta:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4),
              0 0 26px -4px rgba(255, 107, 53, 0.45);
  transition: box-shadow 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .frame-zero-article input:focus-visible, .frame-zero-article textarea:focus-visible { transition: none !important; }
}