/* Neilvard Semibold One — Wilder Heart display face.
         Self-hosted woff2 (asset_url) so we don't depend on the legacy Shopify
         CDN copy. Both family names register so existing rules using
         'Neilvard' keep resolving (Figma names the family "Neilvard Semibold One"). */
      @font-face {
        font-family: 'Neilvard Semibold One';
        src: url('//wilderheart.com/cdn/shop/t/7/assets/NeilvardSemiboldOne-Regular.woff2?v=129682340940032627461778703772') format('woff2');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: 'Neilvard';
        src: url('//wilderheart.com/cdn/shop/t/7/assets/NeilvardSemiboldOne-Regular.woff2?v=129682340940032627461778703772') format('woff2');
        font-weight: 400 700; /* covers legacy weight:600 callsites */
        font-style: normal;
        font-display: swap;
      }
      /* Flama Condensed Extrabold — production WH font used for location coords
         and serial numbers (e.g. "WYOMING, USA", "1024598003"). Matches the
         wilder-heart-landing Vercel deployment, replaces stand-in Courier Prime. */
      @font-face {
        font-family: 'Flama Condensed';
        src: url('//wilderheart.com/cdn/shop/t/7/assets/FlamaCondensed-Extrabold.woff2?v=166274240750277626071778703773') format('woff2');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
      }
      :root {
        --wh-black: #1A1A1A;
        --wh-orange: #BC5C12;
        --wh-dark: #3D3D3D;
        --wh-gold: #A68A3B;
        --wh-cream: #FAF7EF;
        --wh-fg: #FFFFFF;
        --wh-muted: rgba(255, 255, 255, 0.7);
        --wh-rule: rgba(255, 255, 255, 0.25);
        --wh-sage: #B7C9C0;
        --wh-forest: #1F2A24;
        --wh-champagne: #CEC0A3; /* Figma hero H1 second-line accent (node 4148-18033) */
        --wh-page-width: 1320px; /* house content column (matches the homepage sections + FYW) */
        --font-display: 'Neilvard Semibold One', 'Neilvard', 'Impact', sans-serif;
        --font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
        --font-caption: 'Solway', serif;
        --font-coords: 'Flama Condensed', 'Oswald', 'Arial Narrow', sans-serif;
        --font-mono: 'Courier Prime', 'Courier New', 'Menlo', monospace;
        --font-script: 'WH Script', 'Caveat', cursive;
      }
      * { box-sizing: border-box; }
      html, body { margin: 0; }
      body {
        background: var(--wh-black);
        color: var(--wh-fg);
        font-family: var(--font-body);
        font-weight: 500;
        font-size: 16px;
        line-height: 1.75; /* 28/16 — matches Figma "WH_paragraph 16" */
        -webkit-font-smoothing: antialiased;
      }
      a { color: inherit; text-decoration: none; }
      h1, h2, h3, h4, h5, h6,
      .h1, .h2, .h3, .h4, .h5, .h6,
      .wh-h1, .wh-h2, .wh-h3, .wh-h4, .wh-h5, .wh-h6 {
        font-family: var(--font-display);
        font-weight: 400; /* Neilvard Semibold One is a single-weight face */
        text-transform: uppercase;
        letter-spacing: -1px;
        margin: 0;
      }

      /* =======================================================================
         WH TYPOGRAPHY SCALE — synced to Figma file 9oBwVOpNzqVJf1R4iDsVce
         (node 3348-71341). Variable names map 1:1 to the Figma text styles
         (WH_H1, WH_paragraph 16, etc.). Use the .wh-* utility classes on any
         element to apply a Figma style; the responsive headings (h1..h6) use
         the same desktop ceilings via clamp() with sensible mobile floors.
         ======================================================================= */
      h1, .wh-h1 { font-size: clamp(48px, 7vw, 70px);   line-height: 1;    letter-spacing: -1px; }
      h2, .wh-h2 { font-size: clamp(40px, 6vw, 60px);   line-height: 1;    letter-spacing: -1px; }
      h3, .wh-h3 { font-size: clamp(32px, 4.6vw, 46px); line-height: 1.15; letter-spacing: -1px; }
      h4, .wh-h4 { font-size: clamp(28px, 4vw, 40px);   line-height: 1.15; letter-spacing: -1px; }
      h5, .wh-h5 { font-size: clamp(24px, 3.2vw, 32px); line-height: 1.15; letter-spacing: -1px; }
      h6, .wh-h6 { font-size: clamp(22px, 2.8vw, 28px); line-height: calc(36 / 28); letter-spacing: -1px; }

      .wh-card-title-1 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 24px; line-height: calc(32/24); letter-spacing: -1px; }
      .wh-card-2-title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 16px; line-height: 1.5;          letter-spacing: 0; }
      .wh-button       { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 16px; line-height: 1;            letter-spacing: -1px; }
      .wh-tag          { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 14px; line-height: calc(18/14); letter-spacing: -1px; }

      .wh-header-tag-1 { font-family: var(--font-caption); font-weight: 500; font-size: 24px; line-height: 1.4; letter-spacing: 0; }
      .wh-header-tag-2 { font-family: var(--font-caption); font-weight: 500; font-size: 18px; line-height: 1.2; letter-spacing: -1px; }

      .wh-sub-copy        { font-family: var(--font-body); font-weight: 500;          font-size: 24px; line-height: calc(40/24); letter-spacing: 0; }
      .wh-p-18            { font-family: var(--font-body); font-weight: 500;          font-size: 18px; line-height: calc(30/18); letter-spacing: 0; }
      .wh-p-16            { font-family: var(--font-body); font-weight: 500;          font-size: 16px; line-height: calc(28/16); letter-spacing: 0; }
      .wh-p-16-italic     { font-family: var(--font-body); font-weight: 500; font-style: italic; font-size: 16px; line-height: calc(28/16); letter-spacing: 0; }
      .wh-small           { font-family: var(--font-body); font-weight: 500;          font-size: 14px; line-height: calc(26/14); letter-spacing: 0; }

      .wh-coords { font-family: var(--font-coords); font-weight: 700; text-transform: uppercase; font-size: 18px; line-height: 1.4; letter-spacing: 0; }

      /* ===== ANNOUNCEMENT BAR (marquee, pause on hover) =====
         Slimmed to a sub-30px bar in the Lemmelive style — tighter
         padding and a smaller text size so it reads as a quiet strip
         above the nav rather than a full-weight banner. */
      .announce {
        background: var(--wh-orange);
        color: var(--wh-fg);
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 6px 0;
        overflow: hidden;
        position: relative;
      }
      .announce__track {
        display: flex;
        width: max-content;
        animation: announce-marquee 166s linear infinite; /* doubled with the doubled group width, same visual speed */
      }
      .announce:hover .announce__track {
        animation-play-state: paused;
      }
      .announce__group {
        display: flex;
        align-items: center;
        flex-shrink: 0;
      }
      .announce__item {
        display: flex;
        align-items: center;
        white-space: nowrap;
        padding: 0;
        /* the items carry .wh-card-2-title (font-size:16px); override to the
           14px banner size requested. */
        font-size: 14px;
      }
      /* Real WH_STAR.svg replaces the unicode ✦ — uses mask so the colour stays
         in sync with currentColor (the announce bar text colour). SVG ratio is
         26x24 → 13x12 keeps the visual weight of the old text glyph.
         Symmetric margin centres the star in the gap between text items
         (B3 pass-3 fix: was margin-left:32 on item with 0 32 padding, which
         put 32px on the left and 64px on the right of the star). */
      /* B1 (Changes 4.rtf) — stars 20% bigger (was 13×12).
         Bumped another 20% (16×14 → 19×17) per user request. */
      .announce__item::after {
        content: '';
        display: inline-block;
        width: 19px;
        height: 17px;
        margin: 0 48px;
        background-color: currentColor;
        -webkit-mask-image: url('//wilderheart.com/cdn/shop/t/7/assets/wh-star.svg?v=170859362331415858481779878236');
                mask-image: url('//wilderheart.com/cdn/shop/t/7/assets/wh-star.svg?v=170859362331415858481779878236');
        -webkit-mask-size: contain;
                mask-size: contain;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: center;
                mask-position: center;
        opacity: 0.85;
      }
      @keyframes announce-marquee {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
      }
      @media (prefers-reduced-motion: reduce) {
        .announce__track { animation: none; }
      }

      /* ===== NAV ===== */
      .site-nav {
        background: var(--wh-black);
        padding: 18px 32px;
        position: relative;
        z-index: 5;
      }
      .site-nav__inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 32px;
        max-width: 1440px;
        margin: 0 auto;
      }
      .site-nav__links {
        display: flex;
        gap: 36px;
        align-items: center;
      }
      .site-nav__links--right { gap: 36px; }
      .site-nav__links a {
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: uppercase;
        color: var(--wh-fg);
        transition: color 0.35s ease;
      }
      /* Current page already carries the orange marker-pen highlight; its label stays white on hover */
      .site-nav__links a:not(.is-current):hover { color: var(--wh-orange); }
      .site-nav__right {
        display: flex;
        gap: 28px;
        align-items: center;
        justify-content: flex-end;   /* right-hand nav items (Basecamp/Podcast/Account/Cart) hug the right edge as one group */
      }
      .site-nav__icon-btn {
        width: 28px; height: 28px;
        display: inline-flex; align-items: center; justify-content: center;
        color: var(--wh-fg);
        opacity: 0.95;
        transition: color 0.35s ease, opacity 0.35s ease;
      }
      .site-nav__icon-btn:hover { opacity: 1; color: var(--wh-orange); }
      .site-nav__cart {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: uppercase;
        color: var(--wh-fg);
        transition: color 0.35s ease;
      }
      .site-nav__cart:hover { color: var(--wh-orange); }
      /* Bag icon only shows on phones (<=480), where it replaces the "Cart" word. */
      .site-nav__cart-icon { display: none; }
      /* The "Cart" text is wrapped in <span class="wh-card-2-title">
         which forces 16px / lh 1.5. Override size/weight to match the other
         nav links (.site-nav__links a = 13px / 500) but KEEP the display
         font (Neilvard) so it matches Shop / Our Story / etc. */
      .site-nav__cart .wh-card-2-title {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: 13px;
        line-height: 1;
        letter-spacing: 0;
        text-transform: uppercase;
      }
      .site-nav__cart-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--wh-orange);
        color: var(--wh-fg);
        width: 22px; height: 22px;
        border-radius: 50%;
        font-size: 12px;
        font-weight: 700;
      }

      /* ===== WORDMARK (real WH brand SVG, 311.8x130.4 viewBox) =====
         Replaced the text-composite (Untamed/Wilder Heart/American Whiskey
         spans) with the brand SVG 2026-05-27. CSS for the old .wordmark__*
         child classes is kept below in case we revert, but they're unused. */
      .wordmark { display: inline-flex; align-items: center; justify-content: center; line-height: 0;
        transition: transform 0.25s ease; }
      /* Clickable affordance: grow 4% and dim to a soft grey on hover. */
      .wordmark:hover { transform: scale(1.04); }
      .wordmark__svg {
        display: block;
        width: clamp(160px, 16vw, 220px);
        height: auto;
        /* The "PRIMARY LOGO BW" SVG ships with default black fills (no fill
           attrs on the paths). The nav sits on --wh-black so we recolour to
           cream-white. `brightness(0)` collapses any colour to pure black,
           `invert(1)` flips that to pure white. Works without editing the
           SVG and survives any future colour additions to the file. */
        filter: brightness(0) invert(1);
        transition: filter 0.25s ease, opacity 0.25s ease;
      }
      /* Hover: a subtle opacity fade, kept cream-white (gentler than the old grey shift). */
      .wordmark:hover .wordmark__svg { filter: brightness(0) invert(1); opacity: 0.8; }
      @media (prefers-reduced-motion: reduce) {
        .wordmark:hover { transform: none; }
      }
      .wordmark--text {
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1;
        text-align: center;
        gap: 4px;
      }
      .wordmark__top, .wordmark__btm {
        font-size: 9px;
        letter-spacing: 0.32em;
        font-weight: 600;
        color: var(--wh-fg);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
      }
      .wordmark__top span.dingbat,
      .wordmark__btm span.dingbat {
        font-size: 11px;
        opacity: 0.85;
      }
      .wordmark__main {
        font-family: var(--font-display);
        font-size: 32px;
        letter-spacing: 0.04em;
        line-height: 1;
        color: var(--wh-fg);
        text-transform: uppercase;
        white-space: nowrap;
        display: inline-flex;
      }
      .wordmark__main-thin {
        font-weight: 300;
        letter-spacing: 0.04em;
      }
      .wordmark__main-bold {
        font-weight: 700;
        letter-spacing: 0.02em;
        margin-left: 0.18em;
      }

      /* ===== MOBILE MENU (hamburger) — hidden on desktop, shown <=900px ===== */
      .site-nav__menu-btn { display: none; background: transparent; border: 0; padding: 0; color: var(--wh-fg); cursor: pointer; }
      .site-nav__menu-icon { position: relative; display: block; width: 22px; height: 14px; }
      .site-nav__menu-icon span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; }
      .site-nav__menu-icon span:nth-child(1) { top: 0; }
      .site-nav__menu-icon span:nth-child(2) { top: 6px; }
      .site-nav__menu-icon span:nth-child(3) { top: 12px; }
      .site-nav__menu-btn[aria-expanded="true"] .site-nav__menu-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
      .site-nav__menu-btn[aria-expanded="true"] .site-nav__menu-icon span:nth-child(2) { opacity: 0; }
      .site-nav__menu-btn[aria-expanded="true"] .site-nav__menu-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
      .site-nav__drawer { display: none; }

      /* ===== HERO ===== */
      .hero {
        position: relative;
        /* Fill the viewport minus nav (~88px) + announce bar (~46px). */
        height: calc(100svh - 144px);
        min-height: 520px;
        background-color: #1f1f1c;
        overflow: hidden;
        color: var(--wh-fg);
        isolation: isolate;
        /* Same horizontal gutter as every body section (clamp →60px at 1440)
           so the hero copy lines up with the 1320px content column. The video
           + overlays are position:absolute inset:0 and ignore this padding, so
           the background stays full-bleed. */
        padding-inline: clamp(20px, 5vw, 60px);
      }
      .hero__video {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        object-fit: cover;
        z-index: 0;
        filter: saturate(0.85) brightness(0.78);
      }
      /* Dashed gridlines overlay — matches Figma hero update (node 4148-18033):
         74.87px tile, 1.1px cream (#FAF7EF) strokes, 13.21/13.21 dash. The SVG
         tile sits at the top + left edge of each cell so repeating produces a
         seamless grid. mix-blend-mode: screen lifts the lines against the
         video/photo base without going to pure white. */
      .hero__overlay-grid {
        position: absolute; inset: 0;
        z-index: 1;
        pointer-events: none;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='74.87' height='74.87' viewBox='0 0 74.87 74.87'><g stroke='%23FAF7EF' stroke-width='1.1' stroke-dasharray='13.21 13.21'><line x1='0' y1='0' x2='74.87' y2='0'/><line x1='0' y1='0' x2='0' y2='74.87'/></g></svg>");
        background-size: 74.87px 74.87px;
        background-repeat: repeat;
        background-position: -2px -2px; /* nudge so the first stroke isn't clipped at the hero edge */
        mix-blend-mode: screen;
        opacity: 0.55;
      }
      .hero__overlay-vignette {
        position: absolute; inset: 0;
        z-index: 2;
        pointer-events: none;
        background:
          linear-gradient(90deg,
            rgba(0,0,0,0.52) 0%,
            rgba(0,0,0,0.36) 28%,
            rgba(0,0,0,0.12) 58%,
            rgba(0,0,0,0) 78%),
          linear-gradient(180deg,
            rgba(0,0,0,0) 60%,
            rgba(0,0,0,0.30) 100%);
      }
      .hero__inner {
        position: relative;
        z-index: 3;
        max-width: 1320px;            /* match the body content column */
        margin: 0 auto;
        /* horizontal gutter now lives on .hero (above); keep vertical only */
        padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 5vw, 64px);
        display: grid;
        /* Text column biased wider so "Strictly whiskey." stays one line in
           the 1320 container (the bottle column has room to spare). */
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
        align-items: center;
        gap: 48px;
        height: 100%;
      }
      .hero__copy { max-width: 720px; }
      .hero__title {
        font-family: var(--font-display);
        font-size: clamp(44px, 6vw, 70px);
        line-height: 1.0;
        letter-spacing: 0.005em;
        margin: 0 0 24px;
        text-transform: uppercase;
        font-weight: 700;
      }
      .hero__title-line { display: block; }
      .hero__title-accent { color: var(--wh-champagne); }
      .hero__body {
        max-width: 480px;
        font-size: 17px;
        line-height: 1.5;
        margin: 0 0 28px;
        color: var(--wh-fg);
        font-weight: 400;
      }
      .hero__ctas {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        margin-bottom: 36px;
      }
      .hero__bottle {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        min-height: 0;
        background: transparent;
      }
      .hero__bottle img {
        width: auto;
        height: auto;
        max-width: 100%;
        /* 72% of the hero space below the floated header, so the bottle sits centred beside the copy
           (the retouched cutout bottle-hero-rt.webp is trimmed tight, unlike the padded old asset). */
        max-height: calc((100svh - var(--hero-head-offset, 150px)) * 0.72);
        display: block;
        background: transparent;
      }
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        padding: 18px 28px;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        border: 1px solid transparent;
        cursor: pointer;
        font-family: inherit;
        transition: background-color 0.18s ease, border-color 0.18s ease;
      }
      .btn--orange { background: var(--wh-orange); color: var(--wh-fg); border-color: var(--wh-orange); }
      .btn--orange:hover { background: #d06208; border-color: #d06208; }
      .btn--ghost { background: transparent; color: var(--wh-fg); border-color: var(--wh-fg); }
      .btn--ghost:hover { background: var(--wh-fg); color: var(--wh-black); }
      /* Cream secondary button (Figma 4854:10108); rollover colours per 4854:10124 —
         champagne wash, label stays orange. */
      .btn--cream {
        gap: 16px;
        padding: 12px 12px 12px 16px;
        border-radius: 4px;
        background: var(--wh-cream, #FAF7EF);
        -webkit-backdrop-filter: blur(15px);
        backdrop-filter: blur(15px);
        color: var(--wh-orange, #BC5C12);
        border-color: transparent;
        font-family: var(--font-display, 'Neilvard Semibold One', sans-serif);
        font-weight: 400;
        font-size: 16px;
        line-height: 1;
        letter-spacing: -0.01em;
        transition: background-color 0.18s ease, color 0.18s ease;
      }
      .btn--cream:hover { background: var(--wh-champagne, #CEC0A3); color: var(--wh-orange, #BC5C12); }
      .btn--cream svg { width: 24px; height: 24px; flex-shrink: 0; }
      .btn__icon { width: 16px; height: 16px; flex-shrink: 0; }

      .hero__rating {
        display: flex;
        align-items: center;
        gap: 18px;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.01em;
        color: var(--wh-fg);
      }
      .hero__stars {
        color: var(--wh-fg);
        letter-spacing: 0.18em;
        font-size: 16px;
        margin-right: 4px;
      }
      .hero__rating-divider {
        width: 1px;
        height: 16px;
        background: rgba(255,255,255,0.4);
      }

      /* ===== TWO WAYS TO POUR ===== */
      .pour {
        background: var(--wh-sage);
        color: var(--wh-forest);
        padding: clamp(48px, 5vw, 72px) 32px clamp(48px, 5vw, 64px);
        position: relative;
        overflow: hidden;
      }
      .pour::before {
        content: '';
        position: absolute;
        inset: 0;
        /* Mirror-tiled paper: a 2x2 composite (original + h-flip / v-flip +
           both) so every outer edge of the tile is identical to the opposite
           edge — it repeats with no visible seam in either direction, unlike a
           plain repeat of the raw tile. Shown at 1120px so each mirrored
           quadrant renders at the original 560px texture scale. */
        background-image: url('//wilderheart.com/cdn/shop/t/7/assets/texture-paper-mirror.jpg?v=119859846192384791821780922737');
        background-size: 1120px auto;
        background-repeat: repeat;
        mix-blend-mode: multiply;
        opacity: 0.95;
        pointer-events: none;
        z-index: 0;
      }
      .pour__inner {
        max-width: 1080px;
        margin: 0 auto;
        position: relative;
        z-index: 1;
      }
      .pour__head {
        text-align: center;
        margin: 0 auto clamp(24px, 2.4vw, 36px);
        max-width: 760px;
      }
      .pour__title {
        font-family: var(--font-display);
        font-size: clamp(38px, 4.4vw, 60px);
        line-height: 1.05;
        letter-spacing: 0.005em;
        text-transform: uppercase;
        font-weight: 700;
        margin: 0 0 16px;
        color: var(--wh-forest);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0 0.32em;
      }
      .pour__title span { white-space: nowrap; }
      .pour__title-orange { color: var(--wh-orange); }
      .pour__sub {
        font-size: 15px;
        line-height: 1.55;
        max-width: 480px;
        margin: 0 auto;
        color: var(--wh-forest);
        opacity: 0.85;
      }

      /* Card grid */
      .pour__cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(20px, 2vw, 32px);
      }
      .pcard {
        background: var(--wh-cream, #FAF7EF);
        border-radius: 22px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        position: relative;
      }
      .pcard__media {
        display: block; /* an <a> since 2026-10-18: the photo links to the product */
        position: relative;
        aspect-ratio: 5 / 4;
        overflow: hidden;
        background: #2a3324;
      }
      .pcard__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease;   /* image-enlarge on card rollover (matches evcard / poloroid / lcard) */
      }
      .pcard:hover .pcard__media img { transform: scale(1.05); }
      .pcard__body {
        padding: clamp(20px, 2.2vw, 28px) clamp(20px, 2.2vw, 28px) clamp(20px, 2.2vw, 26px);
        display: flex;
        flex-direction: column;
        gap: 14px;
        flex: 1;
      }
      .pcard__row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 2px;
      }
      .pcard__badges { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
      /* Cask card: force "whiskey" onto its own line on desktop so both cards
         run three title lines; mobile wraps naturally. */
      @media (max-width: 900px) { .pcard__title-br { display: none; } }
      .pcard__badge {
        display: inline-flex;
        align-items: center;
        background: var(--wh-black);
        color: var(--wh-fg);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        padding: 8px 14px;
        border-radius: 6px;
      }
      .pcard__price {
        font-family: var(--font-display);
        font-size: clamp(28px, 3vw, 36px);
        font-weight: 700;
        color: var(--wh-forest);
        line-height: 1;
      }
      .pcard__title {
        font-family: var(--font-display);
        font-size: clamp(26px, 2.4vw, 32px);
        line-height: 1.1;
        letter-spacing: 0.005em;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--wh-forest);
        margin: 0;
        min-height: calc(2 * 1.1em);
      }
      .pcard__title span { display: block; }
      .pcard__title-orange { color: var(--wh-orange); }
      .pcard__desc {
        font-size: 14px;
        line-height: 1.55;
        color: var(--wh-forest);
        margin: 0;
        opacity: 0.9;
        min-height: calc(2 * 1.55em);
      }
      .pcard__rule {
        border: 0;
        border-top: 1px solid rgba(0,0,0,0.14);
        margin: auto 0 4px;
      }
      .notes {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }
      .note {
        background: transparent;
        border: 1px solid rgba(0,0,0,0.16);
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        min-height: 78px;
      }
      .note__label {
        background: var(--wh-black);
        color: var(--wh-fg);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        padding: 7px 12px;
        margin: 0;
        line-height: 1.2;
      }
      .note__value {
        flex: 1;
        font-size: 13px;
        color: var(--wh-forest);
        padding: 10px 12px;
        margin: 0;
        line-height: 1.35;
        display: flex;
        align-items: center;
      }
      .pcard__cta {
        margin-top: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        background: var(--wh-orange);
        color: var(--wh-fg);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        padding: 18px 22px;
        border-radius: 10px;
        transition: background-color 0.18s ease;
      }
      .pcard__cta:hover { background: #d06208; }
      .pcard__cta svg { width: 18px; height: 18px; flex-shrink: 0; }

      @media (max-width: 900px) {
        .pour { padding: 48px 16px 56px; }
        .pour__head { margin-bottom: 32px; }
        .pour__title { font-size: clamp(36px, 9vw, 48px); }
        .pour__cards { grid-template-columns: 1fr; gap: 20px; }
        .notes { grid-template-columns: 1fr; gap: 6px; }
        /* compact one-line rows: drop the 78px min-height card look. */
        .note { display: flex; align-items: stretch; min-height: 0; }
        .note__label { display: flex; align-items: center; min-width: 84px; padding: 7px 12px; }
        .note__value { flex: 1; padding: 7px 12px; }
      }

      /* ===== STORY / MANIFESTO SECTION (Figma node 92:36, scroll-swap variant) =====
         Section is 320vh tall — sticky stage stays in viewport while scroll
         drives crossfades between the 3 cards. Reduced-motion / .is-static
         falls back to a stacked layout. */
      .story {
        background: #232222;
        color: var(--wh-cream);
        position: relative;
        min-height: 320vh;
        overflow: clip;  /* clip lets the sticky child still stick (vs hidden which breaks it) */
      }
      .story.is-static { min-height: auto; }
      /* Paper texture overlay — applied to the section so it pans with scroll. */
      .story::before {
        content: '';
        position: absolute; inset: 0;
        background-image: url('//wilderheart.com/cdn/shop/t/7/assets/texture-paper-mirror.jpg?v=119859846192384791821780922737');
        background-size: 1120px auto;
        background-repeat: repeat;
        /* Slow vertical pan tied to section scroll progress (--p, set by JS). */
        background-position: 0 calc(var(--p, 0) * -140px);
        opacity: 0.20;
        mix-blend-mode: multiply;   /* darken the paper grain, keep the fill flat #232222 (was overlay, which lifted it to grey) */
        pointer-events: none;
        z-index: 0;
      }
      .story__stage {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow: hidden;
        padding: clamp(40px, 6vw, 96px) 32px;
        display: grid;
        place-items: center;
      }
      .story.is-static .story__stage {
        position: static;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 96px;
      }

      /* HUD progress indicator (bottom-right of stage) */
      .story__hud {
        position: absolute;
        right: clamp(20px, 4vw, 64px);
        bottom: clamp(20px, 4vw, 48px);
        display: flex;
        align-items: center;
        gap: 16px;
        font-family: var(--font-mono);
        font-weight: 400;
        font-size: 14px;
        letter-spacing: 0.04em;
        color: var(--wh-cream);
        z-index: 5;
        opacity: 0.8;
      }
      .story__hud-count {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 16px;
        letter-spacing: 0.06em;
      }
      .story__hud-line {
        width: 80px;
        height: 1px;
        background: rgba(250, 247, 239, 0.4);
      }
      .story__hud-serial { font-variant-numeric: tabular-nums; }
      .story.is-static .story__hud { display: none; }

      /* --- Storycard layout: each card stacks on top of the others in the stage,
         crossfaded by JS via the --o custom property. --- */
      .storycard {
        position: absolute;
        inset: clamp(40px, 6vw, 96px) clamp(20px, 4vw, 64px);
        max-width: 1320px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 32px;
        align-items: center;
        opacity: var(--o, 0);
        transition: opacity 0.06s linear;
        will-change: opacity;
        pointer-events: none;
      }
      /* Active card (set by JS when its opacity is dominant) accepts clicks */
      .storycard.is-active { pointer-events: auto; }

      /* Copy/media share a smooth transform transition; the actual transform
         per animation style lives in the desktop (≥901px) block further down
         and is switched live via [data-anim="1|2|3"] on the section. */
      .storycard__copy,
      .storycard__media {
        transition: transform 0.14s linear;
        will-change: transform;
      }
      .story.is-static .storycard {
        position: relative;
        inset: auto;
        opacity: 1;
        transform: none;
        pointer-events: auto;
      }
      .storycard--text-right .storycard__copy { order: 2; }
      .storycard--text-right .storycard__media { order: 1; }

      .storycard__copy {
        display: flex;
        flex-direction: column;
        gap: 32px;
        align-items: flex-start;
        max-width: 460px;
      }
      .storycard__num {
        font-family: var(--font-display);
        font-size: 32px;
        line-height: 1.15;
        letter-spacing: -0.01em;
        font-weight: 400;
        color: var(--wh-cream);
        display: block;
      }
      .storycard__title {
        font-family: var(--font-display);
        font-size: clamp(44px, 4.5vw, 60px);
        line-height: 1;
        letter-spacing: -0.01em;
        font-weight: 400;
        text-transform: uppercase;
        color: var(--wh-orange);
        margin: 0;
        max-width: 397px;
      }
      .storycard__title-orange { color: var(--wh-orange); }
      .storycard__title-line { color: var(--wh-cream); }
      .storycard__dot { color: var(--wh-orange); }

      .storycard__body {
        font-family: var(--font-body);
        font-size: 16px;
        font-weight: 500;
        line-height: 28px;
        margin: 0;
        color: var(--wh-cream);
        max-width: 397px;
      }
      .storycard__quote {
        margin: 0;
        padding: 0 0 0 32px;
        border-left: 2px solid var(--wh-orange);
        font-family: var(--font-body);
        font-size: 16px;
        font-weight: 500;
        line-height: 28px;
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .storycard__quote p { margin: 0; font-style: italic; color: var(--wh-cream); }
      .storycard__quote cite {
        font-style: normal;
        color: var(--wh-orange);
      }

      /* Story button — compact variant in Neilvard, smaller radius, near_me icon */
      .storycard__btn {
        display: inline-flex;
        align-items: center;
        gap: 16px;
        /* top-biased padding optically centres the display-font label, which
           sits high in its line-box at line-height:1 next to the 24px icon. */
        padding: 14px 12px 10px 16px;
        background: var(--wh-orange);
        color: var(--wh-cream);
        border: none;
        border-radius: 4px;
        font-family: var(--font-display);
        font-size: 16px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: -0.01em;
        text-transform: uppercase;
        text-decoration: none;
        cursor: pointer;
        transition: background-color 0.18s ease;
      }
      .storycard__btn:hover { background: #d06208; }
      .storycard__btn-icon { width: 24px; height: 24px; flex-shrink: 0; }

      /* Media (main image) */
      .storycard__media {
        position: relative;
        width: 100%;
        height: 100%;
      }
      .storycard__media-main,
      .storycard__media > img:not([class]) {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 15px;
        object-fit: cover;
        aspect-ratio: 649 / 560;
        /* Per-style transform/clip lives in the desktop [data-anim] block. */
        transition: transform 0.14s linear, clip-path 0.14s linear;
        will-change: transform;
      }

      /* Card 02 + 03 — main image plus a portrait-orientation photo overlay */
      .storycard__media--with-overlay {
        position: relative;
        min-height: 456px;
      }
      .storycard__overlay {
        position: absolute;
        border-radius: 15px;
        object-fit: cover;
        z-index: 2;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
        height: auto;
      }
      /* Card 02: small portrait perched on the top of the main bottle image */
      .storycard__overlay--top {
        top: -60px;
        right: 20%;
        width: 32%;
        aspect-ratio: 290 / 247;
      }
      /* Card 03: wider portrait peeking from the bottom-left of the main image */
      .storycard__overlay--bottom {
        bottom: -40px;
        left: -28%;
        width: 75%;
        aspect-ratio: 438 / 247;
      }

      /* --- Inter-card divider --- */
      /* --- Decorative illustrations (positioned within their parent card) --- */
      .storydeco {
        position: absolute;
        pointer-events: none;
        z-index: 3;
        height: auto;
        /* Resting rotation; per-style reveal motion is in the desktop block. */
        transform: rotate(var(--rot, 0deg));
        transition: transform 0.16s linear;
        will-change: transform;
      }
      /* Card 01: feathers cluster above the image (right column) */
      .storydeco--feathers {
        top: -40px;
        left: 38%;
        width: 260px;
        --rot: -4deg;
      }
      /* Card 02: round bobber, top-right of the card */
      .storydeco--bobber {
        top: -30px;
        right: 4%;
        width: 110px;
        --rot: 13deg;
      }
      /* Card 03: tackle box, fish, lure cluster across the top */
      .storydeco--tackle {
        top: -80px;
        left: -2%;
        width: 200px;
        --rot: -4deg;
      }
      .storydeco--fish {
        top: -110px;
        left: 14%;
        width: 250px;
        --rot: -2deg;
      }
      .storydeco--lure {
        top: -100px;
        left: 36%;
        width: 90px;
        --rot: 10deg;
      }
      /* Card 02: compass over the media's bottom-left corner — also the Trail Run
         mini-game trigger (.illo--compass), so it stays clickable unlike other decos. */
      .storydeco--compass {
        bottom: -44px;
        left: -2%;
        width: 170px;
        --rot: -7deg;
        pointer-events: auto;
        cursor: pointer;
      }

      /* Reduced-motion / static stack: neutralise every reveal style (wins over
         the [data-anim] rules via !important — accessibility takes priority). */
      .story.is-static .storycard__copy,
      .story.is-static .storycard__media,
      .story.is-static .storycard__media-main,
      .story.is-static .storycard__media > img:not([class]) { transform: none !important; }
      .story.is-static .storycard__media-main,
      .story.is-static .storycard__media > img:not([class]) { clip-path: none !important; -webkit-mask-image: none !important; mask-image: none !important; }
      .story.is-static .storydeco { transform: rotate(var(--rot, 0deg)) !important; }
      /* Option 8 pour layers never render in the static / reduced-motion stack. */
      .story.is-static .storycard__media::before,
      .story.is-static .storycard__media::after { content: none !important; display: none !important; }
      /* Options 10-12 (grid mask, glitch filter/anim, print ink ghosts) neutralised too. */
      .story.is-static .storycard__media-main,
      .story.is-static .storycard__media > img:not([class]) { filter: none !important; translate: none !important; animation: none !important; }

      /* Grit/dust flash overlay (option 7) + card jolt (option 6) — the JS adds
         .is-flash / .is-jolt on card lock, and only above 901px, so these never
         fire on mobile or in reduced motion. */
      .story__grit {
        position: absolute;
        inset: 0;
        background-image: url('//wilderheart.com/cdn/shop/t/7/assets/texture-paper-mirror.jpg?v=119859846192384791821780922737');
        background-size: 840px auto;
        background-repeat: repeat;
        opacity: 0;
        mix-blend-mode: overlay;
        pointer-events: none;
        z-index: 4;
      }
      .story__grit.is-flash { animation: storyGrit 0.42s ease-out; }
      @keyframes storyGrit {
        0%   { opacity: 0; }
        28%  { opacity: 0.6; }
        100% { opacity: 0; }
      }
      .storycard.is-jolt { animation: storyJolt 0.3s cubic-bezier(.36,.07,.19,.97); }
      @keyframes storyJolt {
        0%   { transform: translate3d(0, 0, 0); }
        15%  { transform: translate3d(0, 6px, 0); }
        35%  { transform: translate3d(-4px, -3px, 0); }
        55%  { transform: translate3d(4px, 2px, 0); }
        75%  { transform: translate3d(-2px, 1px, 0); }
        100% { transform: translate3d(0, 0, 0); }
      }
      /* Option 8 "The Pour": stream sway (continuous, decorative) + a one-shot
         light-catch "settle" pulse fired on the image when the glass tops up. */
      @keyframes pourSway {
        0%, 100% { transform: translateX(-1px) skewX(-1.6deg); }
        50%      { transform: translateX(1px)  skewX(1.6deg); }
      }
      @keyframes pourSettle {
        0%   { filter: brightness(1.14) saturate(1.12); }
        55%  { filter: brightness(0.98) saturate(1.02); }
        100% { filter: none; }
      }
      /* Option 10 "Survey Grid": 1px registration snap on lock (plotter seating). */
      @keyframes gridSeat {
        0%   { transform: translate(0, 0); }
        40%  { transform: translate(1px, -1px); }
        70%  { transform: translate(-1px, 0); }
        100% { transform: translate(0, 0); }
      }
      /* Option 11 "Signal": glitch jitter, static crawl, scanline roll, lock snap. */
      @keyframes sig11Jit {
        0%   { transform: translateX(calc(var(--g,0) * 6px));  }
        50%  { transform: translateX(calc(var(--g,0) * -7px)); }
        100% { transform: translateX(calc(var(--g,0) * 4px));  }
      }
      @keyframes sig11Static { 0% { background-position: 0 0; } 100% { background-position: 7px -5px; } }
      @keyframes sig11Roll   { 0% { background-position: 0 0, 0 0; } 100% { background-position: 0 0, 0 -240px; } }
      @keyframes sig11Lock {
        0%   { filter: drop-shadow(7px 0 0 rgba(0,255,231,0.8)) drop-shadow(-7px 0 0 rgba(255,42,42,0.8)) contrast(1.4); transform: translateX(5px); clip-path: inset(11% 0 7% 0); }
        18%  { transform: translateX(-6px); }
        40%  { filter: none; transform: translateX(2px); clip-path: inset(0); }
        100% { filter: none; transform: translateX(0); clip-path: inset(0); }
      }
      /* Option 12 "Registration": single soft ink bite on lock (no rattle). */
      @keyframes storyInkBite {
        0%   { transform: translateY(0)    scale(1);     filter: contrast(1)    saturate(1); }
        38%  { transform: translateY(1px)  scale(0.997); filter: contrast(1.18) saturate(1.12); }
        100% { transform: translateY(0)    scale(1);     filter: contrast(1)    saturate(1); }
      }

      /* ============================================================
         STORY SCROLL-REVEAL STYLES — desktop only (≥901px), switched live
         via [data-anim="1|2|3"] on the section. The scroll JS feeds --o
         (per-card crossfade) and --p (section progress 0→1); every style is
         pure CSS on top of those two variables. Mobile (≤900px) gets none of
         this and stays a plain static stack.
         ============================================================ */
      @media (min-width: 901px) {

        /* ---------- Option 1 · "Settle" ----------
           Copy + photo slide in from opposite sides; photo zoom-settles;
           decorations drift down and untwist into place. Tactile, then rests. */
        [data-anim="1"] .storycard__copy  { transform: translate3d(calc((1 - var(--o,0)) * -28px), calc((1 - var(--o,0)) * 8px), 0); }
        [data-anim="1"] .storycard__media { transform: translate3d(calc((1 - var(--o,0)) *  28px), calc((1 - var(--o,0)) * 8px), 0); }
        [data-anim="1"] .storycard--text-right .storycard__copy  { transform: translate3d(calc((1 - var(--o,0)) *  28px), calc((1 - var(--o,0)) * 8px), 0); }
        [data-anim="1"] .storycard--text-right .storycard__media { transform: translate3d(calc((1 - var(--o,0)) * -28px), calc((1 - var(--o,0)) * 8px), 0); }
        [data-anim="1"] .storycard__media-main,
        [data-anim="1"] .storycard__media > img:not([class]) { transform: scale(calc(1 + (1 - var(--o,0)) * 0.04)); }
        [data-anim="1"] .storydeco {
          transform:
            translate3d(0, calc((1 - var(--o,0)) * 20px), 0)
            rotate(calc(var(--rot, 0deg) + (1 - var(--o,0)) * -5deg));
        }

        /* ---------- Option 2 · "Rise & Float" ----------
           Layered vertical lift on reveal (photo least, copy more, decos most)
           plus a continuous --p parallax so the dwells keep breathing. No
           horizontal slide, flat photo — distinct from Settle. */
        [data-anim="2"] .storycard__copy  { transform: translateY(calc((1 - var(--o,0)) * 40px)); }
        [data-anim="2"] .storycard__media { transform: translateY(calc((1 - var(--o,0)) * 16px + (var(--p,0) - 0.5) * -26px)); }
        [data-anim="2"] .storycard__media-main,
        [data-anim="2"] .storycard__media > img:not([class]) { transform: none; }
        [data-anim="2"] .storydeco {
          transform:
            translateY(calc((1 - var(--o,0)) * 56px + var(--p,0) * -20px))
            rotate(var(--rot, 0deg));
        }

        /* ---------- Option 3 · "Cinematic" ----------
           Photo reveals with a clip-path wipe (from the edge nearest the copy)
           and runs a slow continuous Ken Burns zoom/pan; copy gives a small
           fade-up; decorations simply fade in (no drift). Editorial feel. */
        [data-anim="3"] .storycard__copy  { transform: translateY(calc((1 - var(--o,0)) * 14px)); }
        [data-anim="3"] .storycard__media { transform: none; }
        [data-anim="3"] .storydeco { transform: rotate(var(--rot, 0deg)); }
        [data-anim="3"] .storycard__media-main,
        [data-anim="3"] .storycard__media > img:not([class]) {
          transform: scale(calc(1 + var(--p,0) * 0.06)) translateX(calc(var(--p,0) * -10px));
          clip-path: inset(0 calc((1 - var(--o,0)) * 100%) 0 0);
        }
        [data-anim="3"] .storycard--text-right .storycard__media-main,
        [data-anim="3"] .storycard--text-right .storycard__media > img:not([class]) {
          clip-path: inset(0 0 0 calc((1 - var(--o,0)) * 100%));
        }

        /* ---------- Option 4 · "Field Stamp" ----------
           Weighty drop + stamp: copy/photo drop in from above and the photo
           thunks level; decorations punch in with a scale-overshoot like field
           stamps hitting paper. Springy back-ease gives it heft and a little
           hand-made imperfection. */
        [data-anim="4"] .storycard__copy,
        [data-anim="4"] .storycard__media { transition: transform 0.42s cubic-bezier(.34,1.56,.64,1); }
        [data-anim="4"] .storycard__media-main,
        [data-anim="4"] .storycard__media > img:not([class]) { transition: transform 0.42s cubic-bezier(.34,1.56,.64,1); }
        [data-anim="4"] .storydeco { transition: transform 0.5s cubic-bezier(.34,1.7,.7,1); }
        [data-anim="4"] .storycard__copy  { transform: translateY(calc((1 - var(--o,0)) * -36px)); }
        [data-anim="4"] .storycard__media { transform: translateY(calc((1 - var(--o,0)) * -24px)) rotate(calc((1 - var(--o,0)) * -1.5deg)); }
        [data-anim="4"] .storycard__media-main,
        [data-anim="4"] .storycard__media > img:not([class]) { transform: scale(calc(0.94 + var(--o,0) * 0.06)); }
        [data-anim="4"] .storydeco { transform: scale(calc(0.55 + var(--o,0) * 0.45)) rotate(var(--rot, 0deg)); }

        /* ---------- Option 5 · "Trail Advance" ----------
           Decisive horizontal shove: copy + photo drive in from opposite sides
           with a slight skew that straightens, on a hard expo-out so they arrive
           fast and stop with weight; decorations whip in and snap. Like advancing
           a field-journal slide. */
        [data-anim="5"] .storycard__copy,
        [data-anim="5"] .storycard__media { transition: transform 0.58s cubic-bezier(.16,1,.3,1); }
        [data-anim="5"] .storycard__media-main,
        [data-anim="5"] .storycard__media > img:not([class]) { transition: transform 0.58s cubic-bezier(.16,1,.3,1); }
        [data-anim="5"] .storydeco { transition: transform 0.66s cubic-bezier(.16,1,.3,1); }
        [data-anim="5"] .storycard__copy  { transform: translateX(calc((1 - var(--o,0)) * -90px)) skewX(calc((1 - var(--o,0)) * -3deg)); }
        [data-anim="5"] .storycard__media { transform: translateX(calc((1 - var(--o,0)) *  90px)) skewX(calc((1 - var(--o,0)) *  3deg)); }
        [data-anim="5"] .storycard--text-right .storycard__copy  { transform: translateX(calc((1 - var(--o,0)) *  90px)) skewX(calc((1 - var(--o,0)) *  3deg)); }
        [data-anim="5"] .storycard--text-right .storycard__media { transform: translateX(calc((1 - var(--o,0)) * -90px)) skewX(calc((1 - var(--o,0)) * -3deg)); }
        [data-anim="5"] .storycard__media-main,
        [data-anim="5"] .storycard__media > img:not([class]) { transform: none; }
        [data-anim="5"] .storydeco { transform: translateX(calc((1 - var(--o,0)) * 64px)) rotate(calc(var(--rot, 0deg) + (1 - var(--o,0)) * 8deg)); }

        /* ---------- Option 6 · "Lockdown" ----------
           Field Stamp, heavier — bigger drop; a JS jolt/shake + odometer HUD
           serial scramble fire the instant each card locks (see story script). */
        [data-anim="6"] .storycard__copy,
        [data-anim="6"] .storycard__media { transition: transform 0.4s cubic-bezier(.3,1.5,.5,1); }
        [data-anim="6"] .storycard__media-main,
        [data-anim="6"] .storycard__media > img:not([class]) { transition: transform 0.4s cubic-bezier(.3,1.5,.5,1); }
        [data-anim="6"] .storydeco { transition: transform 0.48s cubic-bezier(.34,1.8,.7,1); }
        [data-anim="6"] .storycard__copy  { transform: translateY(calc((1 - var(--o,0)) * -44px)); }
        [data-anim="6"] .storycard__media { transform: translateY(calc((1 - var(--o,0)) * -30px)) rotate(calc((1 - var(--o,0)) * -2deg)); }
        [data-anim="6"] .storycard__media-main,
        [data-anim="6"] .storycard__media > img:not([class]) { transform: scale(calc(0.92 + var(--o,0) * 0.08)); }
        [data-anim="6"] .storydeco { transform: scale(calc(0.5 + var(--o,0) * 0.5)) rotate(var(--rot, 0deg)); }

        /* ---------- Option 7 · "Hard Charge" ----------
           Trail Advance, harder — 140px shove on a snappier ease, bigger skew
           and deco whip; a JS grit/dust flash pulses over the section on lock. */
        [data-anim="7"] .storycard__copy,
        [data-anim="7"] .storycard__media { transition: transform 0.44s cubic-bezier(.2,.95,.15,1); }
        [data-anim="7"] .storydeco { transition: transform 0.5s cubic-bezier(.2,.95,.15,1); }
        [data-anim="7"] .storycard__copy  { transform: translateX(calc((1 - var(--o,0)) * -140px)) skewX(calc((1 - var(--o,0)) * -4deg)); }
        [data-anim="7"] .storycard__media { transform: translateX(calc((1 - var(--o,0)) *  140px)) skewX(calc((1 - var(--o,0)) *  4deg)); }
        [data-anim="7"] .storycard--text-right .storycard__copy  { transform: translateX(calc((1 - var(--o,0)) *  140px)) skewX(calc((1 - var(--o,0)) *  4deg)); }
        [data-anim="7"] .storycard--text-right .storycard__media { transform: translateX(calc((1 - var(--o,0)) * -140px)) skewX(calc((1 - var(--o,0)) * -4deg)); }
        [data-anim="7"] .storycard__media-main,
        [data-anim="7"] .storycard__media > img:not([class]) { transform: none; }
        [data-anim="7"] .storydeco { transform: translateX(calc((1 - var(--o,0)) * 90px)) rotate(calc(var(--rot, 0deg) + (1 - var(--o,0)) * 12deg)); }

        /* ---------- Option 8 · "The Pour" (rebuilt: an actual pour) ----------
           Not a flood-fill. Whiskey streams in from the top (::after); the amber
           level rises with a curved, glinting meniscus (::before); the photo is
           revealed under the liquid via a soft rising mask. Surface height is
           --surf, derived from the card's inherited --o. A light-catch "settle"
           pulse fires on lock (story JS adds .is-poured). Every layer is desktop-
           only and is killed in the static / reduced-motion stack above. */
        [data-anim="8"] .storycard__copy    { transform: translateY(calc((1 - var(--o,0)) * 18px)); }
        [data-anim="8"] .storycard__media   { transform: none; --surf: calc((1 - var(--o,0)) * 100%); }
        [data-anim="8"] .storydeco          { transform: rotate(var(--rot, 0deg)); }
        [data-anim="8"] .storycard__overlay { z-index: 6; }

        /* Photo revealed bottom-to-top with a soft wet edge at the surface. */
        [data-anim="8"] .storycard__media-main,
        [data-anim="8"] .storycard__media > img:not([class]) {
          transform: none;
          -webkit-mask-image: linear-gradient(to top, #000 calc(var(--o,0) * 100% - 4%), rgba(0,0,0,0) calc(var(--o,0) * 100% + 5%));
                  mask-image: linear-gradient(to top, #000 calc(var(--o,0) * 100% - 4%), rgba(0,0,0,0) calc(var(--o,0) * 100% + 5%));
        }

        /* Amber liquid body + curved meniscus glint, brightest at the pour point. */
        [data-anim="8"] .storycard__media::before {
          content: "";
          position: absolute;
          inset: 0;
          border-radius: 15px;
          pointer-events: none;
          z-index: 2;
          will-change: opacity;
          mix-blend-mode: screen;
          opacity: calc(1 - clamp(0, (var(--o,0) - 0.82) / 0.18, 1));
          background:
            radial-gradient(135% 26px at 58% var(--surf),
              rgba(255,228,168,0.9) 0%,
              rgba(255,210,130,0.34) 46%,
              rgba(255,210,130,0) 72%),
            linear-gradient(to bottom,
              rgba(0,0,0,0) calc(var(--surf) - 14px),
              rgba(255,224,156,0) calc(var(--surf) - 7px),
              rgba(255,226,160,0.80) var(--surf),
              rgba(214,138,46,0.30) calc(var(--surf) + 14px),
              rgba(150,84,22,0.16) 100%);
        }

        /* The falling stream: a slim amber column from the top edge down to the
           surface, off-centre like a tipped bottle, with a gentle live sway. */
        [data-anim="8"] .storycard__media::after {
          content: "";
          position: absolute;
          top: 0;
          left: 56.5%;
          width: 9px;
          height: var(--surf);
          border-radius: 0 0 5px 5px;
          pointer-events: none;
          z-index: 3;
          will-change: opacity, transform;
          transform-origin: top center;
          mix-blend-mode: screen;
          opacity: calc(clamp(0, var(--o,0) / 0.07, 1) - clamp(0, (var(--o,0) - 0.80) / 0.12, 1));
          background:
            linear-gradient(to right,
              rgba(255,236,185,0) 0%,
              rgba(255,236,185,0.70) 50%,
              rgba(255,236,185,0) 100%),
            linear-gradient(to bottom,
              rgba(255,222,150,0.95) 0%,
              rgba(214,140,48,0.95) 100%);
          animation: pourSway 1.7s ease-in-out infinite;
        }

        /* Settle: a quick light-catch pulse the moment the glass tops up. */
        [data-anim="8"] .storycard.is-poured .storycard__media-main,
        [data-anim="8"] .storycard.is-poured .storycard__media > img:not([class]) {
          animation: pourSettle 0.55s ease-out;
        }

        /* ---------- Option 9 · "Torn Map" ----------
           The photo reveals through a ragged torn-paper edge sweeping across,
           like ripping a page from a field journal / unfolding a survey map; a
           grit/dust flash kicks on lock (see story script). Rugged + on-brand. */
        [data-anim="9"] .storycard__copy  { transform: translateY(calc((1 - var(--o,0)) * 16px)); }
        [data-anim="9"] .storycard__media { transform: none; }
        [data-anim="9"] .storydeco { transform: rotate(var(--rot, 0deg)); }
        [data-anim="9"] .storycard__media-main,
        [data-anim="9"] .storycard__media > img:not([class]) {
          transform: none;
          clip-path: polygon(
            0% 0%,
            calc(var(--o,0) * 112%) 0%,
            calc(var(--o,0) * 112% - 12px) 14%,
            calc(var(--o,0) * 112% + 8px) 28%,
            calc(var(--o,0) * 112% - 14px) 42%,
            calc(var(--o,0) * 112% + 10px) 56%,
            calc(var(--o,0) * 112% - 10px) 70%,
            calc(var(--o,0) * 112% + 12px) 84%,
            calc(var(--o,0) * 112% - 8px) 100%,
            0% 100%
          );
        }

        /* ---------- Option 10 · "Survey Grid" (blocky) ----------
           The photo plots itself as a coarse grid of hard-edged tiles via two
           intersecting repeating-linear mask gradients (zero soft fade); orange
           survey rulings draw over it while plotting and clear at lock. Lock =
           a tight 1px registration snap (gridSeat) + grit tick. Driver: --o. */
        [data-anim="10"] .storycard__copy {
          transform: translateY(calc((1 - var(--o,0)) * 22px));
          transition: transform 0s;
        }
        [data-anim="10"] .storycard__media { transform: none; }
        [data-anim="10"] .storydeco { transform: rotate(var(--rot, 0deg)) scale(calc(0.94 + var(--o,0) * 0.06)); }
        [data-anim="10"] .storycard__media-main,
        [data-anim="10"] .storycard__media > img:not([class]) {
          transform: none;
          --plot: clamp(0, calc(var(--o,0) * 1.18 - 0.04), 1);
          --cell: 11.111%;
          -webkit-mask-image:
            repeating-linear-gradient(90deg, #000 0, #000 calc(var(--plot) * var(--cell)), rgba(0,0,0,0) calc(var(--plot) * var(--cell)), rgba(0,0,0,0) var(--cell)),
            repeating-linear-gradient(0deg, #000 0, #000 calc(clamp(0, calc(var(--o,0) * 1.18 - 0.12), 1) * 16.66%), rgba(0,0,0,0) calc(clamp(0, calc(var(--o,0) * 1.18 - 0.12), 1) * 16.66%), rgba(0,0,0,0) 16.66%);
                  mask-image:
            repeating-linear-gradient(90deg, #000 0, #000 calc(var(--plot) * var(--cell)), rgba(0,0,0,0) calc(var(--plot) * var(--cell)), rgba(0,0,0,0) var(--cell)),
            repeating-linear-gradient(0deg, #000 0, #000 calc(clamp(0, calc(var(--o,0) * 1.18 - 0.12), 1) * 16.66%), rgba(0,0,0,0) calc(clamp(0, calc(var(--o,0) * 1.18 - 0.12), 1) * 16.66%), rgba(0,0,0,0) 16.66%);
          -webkit-mask-composite: source-in;
                  mask-composite: intersect;
        }
        [data-anim="10"] .storycard__media::after {
          content: '';
          position: absolute;
          inset: 0;
          z-index: 1;
          pointer-events: none;
          border-radius: 15px;
          background-image:
            repeating-linear-gradient(90deg, rgba(188,92,18,.55) 0, rgba(188,92,18,.55) 1px, transparent 1px, transparent 11.111%),
            repeating-linear-gradient(0deg, rgba(188,92,18,.45) 0, rgba(188,92,18,.45) 1px, transparent 1px, transparent 16.66%);
          opacity: calc(1 - clamp(0, calc((var(--o,0) - 0.82) / 0.18), 1));
          mix-blend-mode: screen;
        }
        [data-anim="10"] .storycard.is-seated .storycard__media-main,
        [data-anim="10"] .storycard.is-seated .storycard__media > img:not([class]) {
          animation: gridSeat 0.32s steps(2, end);
        }

        /* ---------- Option 11 · "Signal" (glitch) ----------
           Field-radio reception: RGB channel fringe (faked via drop-shadows),
           horizontal slice jitter, scanlines + rolling sync bar (::before) and
           static noise (::after). Intensity --g peaks mid-transition, hits 0 at
           lock, so the resolved photo is dead clean. Lock = hard signal snap
           (sig11Lock) + serial scramble. Driver: --o. */
        [data-anim="11"] .storycard__copy { transform: translateY(calc((1 - var(--o,0)) * 14px)); }
        [data-anim="11"] .storydeco       { transform: rotate(var(--rot, 0deg)); }
        [data-anim="11"] .storycard__media {
          --g: clamp(0, calc((1 - var(--o,0)) * (var(--o,0) * 4)), 1);
          transform: none;
        }
        [data-anim="11"] .storycard__media-main,
        [data-anim="11"] .storycard__media > img:not([class]) {
          transform: translateX(calc(var(--g) * 6px));
          filter:
            drop-shadow(calc(var(--g) *  3px) 0 0 rgba(0,255,231,0.55))
            drop-shadow(calc(var(--g) * -3px) 0 0 rgba(255,42,42,0.55))
            saturate(calc(1 + var(--g) * 0.6))
            contrast(calc(1 + var(--g) * 0.25));
          clip-path: inset(calc(var(--g) * 9%) 0 calc(var(--g) * 6%) 0);
          animation: sig11Jit 0.18s steps(2, end) infinite;
          will-change: transform, filter, clip-path;
        }
        [data-anim="11"] .storycard__media::before {
          content: "";
          position: absolute;
          inset: 0;
          z-index: 1;
          border-radius: 15px;
          pointer-events: none;
          background:
            linear-gradient(rgba(250,247,239,0.10), rgba(0,0,0,0.18) 60%, transparent),
            repeating-linear-gradient(0deg, rgba(0,0,0,0.30) 0 2px, rgba(0,0,0,0) 2px 4px);
          background-size: 100% 100%, 100% 5px;
          mix-blend-mode: multiply;
          opacity: clamp(0, calc((1 - var(--o,0)) * 1.25), 1);
          animation: sig11Roll 2.2s linear infinite;
        }
        [data-anim="11"] .storycard__media::after {
          content: "";
          position: absolute;
          inset: 0;
          z-index: 1;
          border-radius: 15px;
          pointer-events: none;
          background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.16) 0 1px, rgba(0,0,0,0.16) 1px 2px, rgba(255,255,255,0) 2px 4px);
          background-size: 7px 7px;
          mix-blend-mode: overlay;
          opacity: var(--g);
          animation: sig11Static 0.12s steps(3, end) infinite;
        }
        [data-anim="11"] .storycard.sig-lock .storycard__media-main,
        [data-anim="11"] .storycard.sig-lock .storycard__media > img:not([class]) {
          animation: sig11Lock 0.34s steps(4, end) 1;
        }

        /* ---------- Option 12 · "Registration" (print) ----------
           A two-plate screen-print out of register: a cool ink ghost and a warm
           ink ghost (faked via drop-shadows, no source dup) sit misprinted off
           the photo, then drag into register as --o climbs; a halftone dot screen
           (::before) resolves and a crop-mark (::after) pins the corner. Lock =
           one soft ink bite (storyInkBite) + grit. Driver: --o. */
        [data-anim="12"] .storycard__copy { transform: translateY(calc((1 - var(--o,0)) * 14px)); }
        [data-anim="12"] .storycard__media { transform: none; isolation: isolate; }
        [data-anim="12"] .storydeco { transform: rotate(var(--rot, 0deg)); }
        [data-anim="12"] .storycard__media-main,
        [data-anim="12"] .storycard__media > img:not([class]) {
          transform: none;
          filter:
            drop-shadow(calc((1 - var(--o,0)) * -14px) calc((1 - var(--o,0)) * 10px) 0 rgba(38,120,140, calc(0.34 + (1 - var(--o,0)) * 0.30)))
            drop-shadow(calc((1 - var(--o,0)) * 16px) calc((1 - var(--o,0)) * -11px) 0 rgba(188,92,18, calc(0.34 + (1 - var(--o,0)) * 0.34)))
            contrast(calc(0.82 + var(--o,0) * 0.32))
            saturate(calc(0.66 + var(--o,0) * 0.40))
            brightness(calc(1.06 - var(--o,0) * 0.06));
          translate: calc((1 - var(--o,0)) * -3px) 0;
        }
        [data-anim="12"] .storycard__media::before {
          content: "";
          position: absolute;
          inset: 0;
          z-index: 4;
          border-radius: 15px;
          pointer-events: none;
          background-image: radial-gradient(rgba(20,18,16,0.55) 38%, transparent 39%);
          background-size: calc(11px - var(--o,0) * 4px) calc(11px - var(--o,0) * 4px);
          mix-blend-mode: multiply;
          opacity: calc((1 - var(--o,0)) * 0.55);
        }
        [data-anim="12"] .storycard__media::after {
          content: "";
          position: absolute;
          z-index: 5;
          top: -9px;
          right: -9px;
          width: 26px;
          height: 26px;
          pointer-events: none;
          background:
            linear-gradient(var(--wh-cream,#FAF7EF), var(--wh-cream,#FAF7EF)) center/2px 100% no-repeat,
            linear-gradient(var(--wh-cream,#FAF7EF), var(--wh-cream,#FAF7EF)) center/100% 2px no-repeat;
          transform: translate(calc((1 - var(--o,0)) * 22px), calc((1 - var(--o,0)) * -18px)) rotate(calc((1 - var(--o,0)) * -12deg)) scale(calc(0.7 + var(--o,0) * 0.3));
          opacity: calc(var(--o,0) * 0.9);
          mix-blend-mode: screen;
        }
        [data-anim="12"] .storycard.is-bite .storycard__media-main,
        [data-anim="12"] .storycard.is-bite .storycard__media > img:not([class]) {
          animation: storyInkBite 220ms cubic-bezier(.2,.9,.2,1) 1;
        }

      } /* end desktop story scroll-reveal styles */

      @media (max-width: 1100px) {
        .storydeco--feathers { width: 200px; }
        .storydeco--bobber   { width: 90px; }
        .storydeco--tackle   { width: 160px; }
        .storydeco--fish     { width: 200px; }
        .storydeco--lure     { width: 72px; }
        .storydeco--compass  { width: 140px; }
      }

      @media (max-width: 900px) {
        /* Mobile: collapse the scroll-swap into a static stack. The sticky
           stage + crossfade JS feels disorienting on thumb-scroll, so we
           opt-out for narrow viewports — same approach as 'is-static'. */
        .story { min-height: auto; padding: 64px 20px; }
        .story__stage {
          position: static;
          height: auto;
          padding: 0;
          display: flex;
          flex-direction: column;
          gap: 80px;
        }
        .story__hud { display: none; }
        .storycard {
          position: relative;
          inset: auto;
          opacity: 1;
          transform: none;
          pointer-events: auto;
          grid-template-columns: 1fr;
          gap: 28px;
          max-width: none;
        }
        /* All cards lead with the number + heading, image below — so 01/02/03
           read consistently top-to-bottom on mobile (card 02 was image-first). */
        .storycard--text-right .storycard__copy { order: -1; }
        .storycard--text-right .storycard__media { order: 0; }
        /* Reveal motion is desktop-only (defined under @media (min-width:901px)),
           so the mobile stack needs no transform resets here. */
        .storycard__copy { max-width: none; gap: 24px; }
        .storycard__title { font-size: clamp(40px, 11vw, 56px); max-width: none; }
        .storycard__body, .storycard__quote { font-size: 15px; line-height: 26px; max-width: none; }
        .storycard__num { font-size: 24px; }
        .storycard__media-main, .storycard__media > img:not([class]) { aspect-ratio: 5/4; }
        .storycard__media--with-overlay { min-height: 0; }
        /* Card 03 image RESTORED on mobile (Pete 2026-07-16, id 1846498546: "image disappears
           between 1024px and 820px"). The old drop rationale ("repeats card 02's shot") went
           stale when the 2026-06-26 asset swaps gave card 03 its own story-card03-main.webp. */
        .storycard__overlay--top { top: -32px; right: 8%; width: 40%; }
        .storycard__overlay--bottom { bottom: -24px; left: -8%; width: 60%; }

        /* Decorations on mobile — positioned relative to their card */
        .storydeco--feathers { top: -24px; left: auto; right: 12px; width: 130px; }
        .storydeco--bobber   { top: -16px; right: 8px; width: 64px; }
        .storydeco--tackle   { top: -40px; left: 4%; width: 100px; }
        .storydeco--fish     { top: -56px; left: 36%; width: 130px; }
        .storydeco--lure     { top: -48px; left: auto; right: 6%; width: 50px; }
        .storydeco--compass  { bottom: -24px; left: 8px; width: 96px; }

        /* Phone stack fixes (2026-10-18):
           - The stage's overflow:hidden is only needed for the desktop sticky crossfade. On
             the static stack it cut the decos that rise above a card (01's feathers lost
             their tops) and clipped 03's inset photo to the main image's edges (square
             corners, no offset). .story's overflow:clip still stops any sideways scroll.
           - The inset photos rise 32px above the main image, so the copy-to-image gap is
             56px: the frame clears the button by 24px instead of touching it.
           - 02's compass joins the bobber on the right, above the heading, rather than
             crowding the "02". It still sits on the .illo--compass game trigger, whose
             generic phone rule (top -50px, right 12px) is overridden here.
           - 03's tackle box moves off the "03" number and lifts clear of the heading.
           - 03's inset hangs off the main image's bottom-left (8px left, 32px below), kept
             inside the screen so all four rounded corners show. */
        .story__stage { overflow: visible; }
        .storycard { gap: 56px; }
        .storycard .storydeco--compass { top: -52px; right: 92px; bottom: auto; left: auto; width: 84px; }
        .storycard .storydeco--tackle { top: -60px; left: 52px; }
        .storycard__overlay--bottom { bottom: -32px; left: -8px; }
      }

      /* ===== Scroll-entrance reveals (JS toggles .wh-reveal then .is-revealed) ===== */
      /* UGC polaroids — "put down": drop in tilted, settle level, staggered. */
      .poloroid.wh-reveal {
        opacity: 0;
        transform: translateY(-26px) rotate(-3.5deg) scale(0.975);
        transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: var(--reveal-delay, 0ms);
        will-change: transform, opacity;
      }
      .ugc__cards .poloroid:nth-child(even).wh-reveal { transform: translateY(-26px) rotate(3.5deg) scale(0.975); }
      .poloroid.wh-reveal.is-revealed { opacity: 1; transform: none; }

      /* Podcast "View all episodes" button — rise + settle. */
      .podshow .storycard__btn.wh-reveal {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform, opacity;
      }
      .podshow .storycard__btn.wh-reveal.is-revealed { opacity: 1; transform: none; }

      /* Story cards on MOBILE get a clean drop-in, since the desktop
         scroll-crossfade collapses to a static stack at <=900px. */
      @media (max-width: 900px) {
        .storycard.wh-reveal .storycard__copy {
          opacity: 0; transform: translateY(-24px);
          transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
          will-change: transform, opacity;
        }
        .storycard.wh-reveal .storycard__media {
          opacity: 0; transform: translateY(-18px) scale(0.975);
          transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
          will-change: transform, opacity;
        }
        .storycard.wh-reveal .storydeco { opacity: 0; transition: opacity 0.55s ease; }
        .storycard.wh-reveal.is-revealed .storycard__copy,
        .storycard.wh-reveal.is-revealed .storycard__media { opacity: 1; transform: none; }
        .storycard.wh-reveal.is-revealed .storydeco { opacity: 1; }
      }

      /* ===== BASECAMP / LOYALTY SECTION (Figma node 92:134) =====
         Tokens: WH_Brown #4E4638, WH_Cream #CEC0A3, WH_White #FAF7EF.
         Layout: centered content + giant cursive watermark + bottom-right tent. */
      .basecamp {
        background: #4E4638;
        color: #FAF7EF;
        position: relative;
        /* +60px on the bottom drops the bottom-anchored tent + coords cluster ~60px lower
           (the top-anchored cards don't move) while preserving the end breathing room. */
        padding: clamp(80px, 12vw, 160px) clamp(20px, 5vw, 60px) calc(clamp(80px, 12vw, 180px) + 60px);
        overflow: hidden;
        isolation: isolate;
      }
      /* Paper texture overlay (Figma 3290:40710 "Paper_07 1", opacity 20%, blend
         Linear Burn). Uses the dedicated Paper_07 asset (bundles-paper.webp), the
         same one the Wild Fund + Shop bundles bands use on this exact #4E4638 brown.
         CSS has no linear-burn, so color-burn is the closest match (it reproduces
         the darkening; plain overlay/darken read as invisible on this dark base). */
      .basecamp::before {
        content: '';
        position: absolute; inset: 0;
        background-image: url('//wilderheart.com/cdn/shop/t/7/assets/bundles-paper.webp?v=165683081928089827621779966324');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0.20;
        mix-blend-mode: color-burn;
        pointer-events: none;
        z-index: 0;
      }
      /* Giant cursive watermark (Figma 92:172, Dancing Script, opacity 5%) */
      .basecamp__watermark {
        position: absolute;
        top: clamp(-180px, -16vw, -60px);
        left: 0;
        right: 0;
        text-align: center;
        font-family: 'Dancing Script', 'Caveat', cursive;
        font-weight: 400;
        font-size: clamp(180px, 28vw, 402px);
        line-height: 1;
        color: #CEC0A3;
        opacity: 0.06;
        transform: rotate(-3.6deg);
        white-space: nowrap;
        pointer-events: none;
        z-index: 1;
        user-select: none;
      }
      .basecamp__inner {
        position: relative;
        z-index: 2;
        max-width: 1320px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: clamp(48px, 5vw, 80px);
        align-items: center;
      }

      /* --- Headline group --- */
      .basecamp__head {
        display: flex;
        flex-direction: column;
        gap: clamp(24px, 3vw, 40px);
        align-items: center;
        text-align: center;
      }
      .basecamp__eyebrow {
        font-family: var(--font-caption);
        font-weight: 500;
        font-size: 24px;
        line-height: 1.4;
        color: #FAF7EF;
        margin: 0;
        padding-bottom: 20px;
        border-bottom: 2px solid #FAF7EF;
        text-transform: capitalize;
      }
      .basecamp__title {
        font-family: var(--font-display);
        font-size: clamp(36px, 6vw, 70px);
        line-height: 1;
        letter-spacing: -0.01em;
        font-weight: 400;
        text-transform: uppercase;
        color: #CEC0A3;
        margin: 0;
        max-width: 480px;   /* narrowed so "starts here." wraps below "your trail" (Pete comment 9) */
      }
      .basecamp__title-white { color: #FAF7EF; }
      .basecamp__sub {
        font-family: var(--font-body);
        font-weight: 500;
        font-size: 18px;
        line-height: 30px;
        color: #FAF7EF;
        margin: 0;
        max-width: 512px;
      }

      /* --- Cards: 3 across with image background + dark overlay --- */
      .basecamp__cards {
        display: grid;
        /* Three equal columns at every width (424px each at a 1320px container). The old
           "1fr 424px 1fr" kept card 02 fixed while 01 and 03 shrank between 1101 and 1439px. */
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
        width: 100%;
      }
      .bccard {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        padding: 40px 40px 80px;
        border-radius: 25px;
        min-height: 460px;
        overflow: hidden;
        isolation: isolate;
        background-size: cover;
        background-position: center;
        background-color: #2a2620;  /* fallback while/if image is missing */
      }
      /* Dark overlay sits above the bg image but below the content */
      .bccard::after {
        content: '';
        position: absolute; inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1;
      }
      .bccard--03::after { background: rgba(0, 0, 0, 0.6); }
      .bccard > * { position: relative; z-index: 2; }

      .bccard--01 { background-image: url('//wilderheart.com/cdn/shop/t/7/assets/bc-card-01-rt.webp?v=102423063728240938221792171054'); }
      .bccard--02 { background-image: url('//wilderheart.com/cdn/shop/t/7/assets/bc-card-02-rt.webp?v=53559057735184439651792171054'); }
      .bccard--03 { background-image: url('//wilderheart.com/cdn/shop/t/7/assets/bc-card-03-rt.webp?v=93038233250915621561792171151'); }

      .bccard__num {
        width: 70px;
        height: 70px;
        border: 1px solid #FAF7EF;
        border-radius: 12.5px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-caption);
        font-weight: 500;
        font-size: 24px;
        line-height: 1.4;
        color: #FAF7EF;
      }
      .bccard__body {
        display: flex;
        flex-direction: column;
        gap: 32px;
        align-items: flex-start;
        width: 100%;
      }
      .bccard__title {
        font-family: var(--font-display);
        font-size: 32px;
        line-height: 1.15;
        letter-spacing: -0.01em;
        font-weight: 400;
        text-transform: uppercase;
        color: #FAF7EF;
        margin: 0;
      }
      .bccard__body p {
        font-family: var(--font-body);
        font-weight: 500;
        font-size: 18px;
        line-height: 30px;
        color: #FAF7EF;
        margin: 0;
        /* Reserve 3 lines so a longer body (card 02) doesn't push its heading a line
           higher than the 2-line cards — keeps all three headings on one baseline. */
        min-height: 90px;
      }

      /* --- Footer (line of copy + CTA) --- */
      .basecamp__foot {
        display: flex;
        flex-direction: column;
        gap: clamp(24px, 3vw, 40px);
        align-items: center;
        text-align: center;
        width: 100%;
      }
      .basecamp__foot-text {
        font-family: var(--font-body);
        font-weight: 500;
        font-size: 18px;
        line-height: 30px;
        color: #FAF7EF;
        margin: 0;
        max-width: 720px;
      }

      /* --- Bottom-right tent + coords (Figma 92:170, 92:136) ---
         Tent at right:-clamp(...) extends partially off-section.
         Coords line spans wide and slips BEHIND tent (z-index: 3 vs tent 4).
         NORTH WEST + value right-aligned just left of the visible tent. */
      .basecamp__corner {
        position: absolute;
        inset: 0;
        bottom: 0;
        z-index: 3;
        pointer-events: none;
      }
      .basecamp__tent {
        position: absolute;
        right: clamp(-145px, -10vw, -40px);
        bottom: clamp(20px, 3vw, 40px);
        width: clamp(300px, 38vw, 560px);
        height: auto;
        display: block;
        z-index: 4;
      }
      .basecamp__coords {
        position: absolute;
        right: clamp(340px, 31vw, 460px);
        bottom: clamp(60px, 8vw, 110px);
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
        color: #CEC0A3;
        z-index: 3;
      }
      .basecamp__coords-line {
        position: absolute;
        bottom: calc(clamp(60px, 8vw, 110px) + 18px + 8px);
        left: clamp(120px, 18vw, 360px);
        right: 0;
        height: 1px;
        background: #CEC0A3;
        opacity: 0.55;
        z-index: 3;
      }
      .basecamp__coords-label {
        font-family: var(--font-coords);
        font-weight: 700;
        font-size: 18px;
        line-height: 1.3;
        letter-spacing: 0.04em;
        color: #CEC0A3;
        text-transform: uppercase;
        margin: 0 0 4px;   /* lift "North West" 4px clear of the coords line */
        text-align: right;
      }
      .basecamp__coords-value {
        font-family: var(--font-mono);
        font-weight: 400;
        font-size: 18px;
        line-height: 1.3;
        color: #CEC0A3;
        margin: 0;
        text-align: right;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }

      @media (max-width: 1100px) {
        .basecamp__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .basecamp__cards .bccard--02 { width: auto; }
      }

      @media (max-width: 900px) {
        .basecamp { padding: 64px 20px 90px; }
        .basecamp__cards { grid-template-columns: 1fr; gap: 16px; }
        .bccard { min-height: 280px; padding: 24px; padding-bottom: 32px; gap: 56px; }
        .basecamp__title { font-size: clamp(26px, 7.2vw, 40px); }
        .basecamp__eyebrow { font-size: 18px; padding-bottom: 14px; }
        .basecamp__sub, .basecamp__foot-text { font-size: 16px; line-height: 26px; }
        .bccard__num { width: 56px; height: 56px; font-size: 20px; }
        .bccard__title { font-size: 24px; }
        .bccard__body p { font-size: 16px; line-height: 26px; min-height: 0; }

        /* Mobile: tent stays bottom-right off-section, coords sit just left */
        .basecamp__tent {
          right: clamp(-90px, -10vw, -40px);
          bottom: 16px;
          width: clamp(140px, 32vw, 200px);
        }
        .basecamp__coords {
          right: clamp(110px, 30vw, 180px);
          bottom: clamp(30px, 8vw, 50px);
          gap: 2px;
        }
        .basecamp__coords-line {
          bottom: calc(clamp(30px, 8vw, 50px) + 14px + 6px);
          left: clamp(20px, 6vw, 40px);
        }
        .basecamp__coords-label { font-size: 13px; }
        .basecamp__coords-value { font-size: 13px; }
        /* Sized to the screen so the whole word shows: Dancing Script "Basecamp" runs about
           3.52x its font size (the old 40vw set it 553px wide on a 393px phone, cut at
           "Baseca"). /3.62 leaves room for the -3.6deg tilt inside 12px margins. (2026-10-18) */
        .basecamp__watermark { font-size: min(220px, calc((100vw - 24px) / 3.62)); top: -16px; }
      }

      /* ===== PODCAST SHOW SECTION (Figma node 92:188) =====
         Tokens: WH_Black Primary #232222, WH_White #FAF7EF, WH_Orange #BC5C12,
         text gray #565658. */
      /* Watch the Series — Figma node 4148-18269 (sage/blue update).
         WH_Blue (#B7C9C0) base with a light paper-texture overlay at
         mix-blend-multiply, dashed gridlines fading from the top. */
      .podshow {
        background: var(--wh-sage); /* match .pour "Two ways to pour" base */
        color: #232222;      /* WH_Black Primary on light bg */
        position: relative;
        padding: clamp(64px, 10vw, 140px) clamp(20px, 5vw, 60px);
        overflow: hidden;
        isolation: isolate;
      }
      /* Paper texture — matched EXACTLY to .pour "Two ways to pour":
         same mirror-tiled source, 1120px scale, multiply blend, 0.95 opacity. */
      .podshow::before {
        content: '';
        position: absolute; inset: 0;
        background-image: url('//wilderheart.com/cdn/shop/t/7/assets/texture-paper-mirror.jpg?v=119859846192384791821780922737');
        background-size: 1120px auto;
        background-repeat: repeat;
        opacity: 0.95;
        mix-blend-mode: multiply;
        pointer-events: none;
        z-index: 0;
      }
      /* Dashed grid overlay — dark strokes at low opacity for visibility on
         sage. Same 74.87px tile + 13.21/13.21 dash as the hero so the grid
         language is consistent across the page. Faded out via a mask from
         the top so it only signals at the section's upper third. */
      .podshow__grid {
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='74.87' height='74.87' viewBox='0 0 74.87 74.87'><g stroke='%23232222' stroke-width='1.1' stroke-dasharray='13.21 13.21' opacity='0.22'><line x1='0' y1='0' x2='74.87' y2='0'/><line x1='0' y1='0' x2='0' y2='74.87'/></g></svg>");
        background-size: 74.87px 74.87px;
        background-repeat: repeat;
        background-position: -2px -2px;
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 22%, transparent 60%);
                mask-image: linear-gradient(to bottom, #000 0%, #000 22%, transparent 60%);
        pointer-events: none;
        z-index: 0;
      }

      .podshow__inner {
        position: relative;
        z-index: 1;
        max-width: 1320px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: clamp(48px, 6vw, 80px);
      }

      /* --- Headline group --- */
      .podshow__head {
        display: flex;
        flex-direction: column;
        gap: clamp(24px, 3vw, 40px);
        align-items: center;
        text-align: center;
      }
      .podshow__eyebrow {
        font-family: var(--font-caption);
        font-weight: 500;
        font-size: 24px;
        line-height: 1.4;
        color: #232222;
        margin: 0;
        padding-bottom: 16px;
        border-bottom: 2px solid #232222;
        text-transform: capitalize;
      }
      .podshow__title {
        font-family: var(--font-display);
        font-size: clamp(40px, 6vw, 70px);
        line-height: 1;
        letter-spacing: -0.01em;
        font-weight: 400;
        text-transform: uppercase;
        color: #232222;
        margin: 0;
        max-width: 834px;
      }
      .podshow__title-orange { color: #BC5C12; }
      .podshow__sub {
        font-family: var(--font-body);
        font-weight: 500;
        font-size: 18px;
        line-height: 30px;
        color: #232222;
        margin: 0;
        max-width: 504px;
      }

      /* --- Episode cards --- */
      .podshow__cards {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 424px));
        gap: 24px;
        justify-content: center;
        width: 100%;
      }
      .epcard {
        background: #FAF7EF;
        border-radius: 20px;
        padding: 24px 24px 40px;
        display: flex;
        flex-direction: column;
        gap: 24px;
        overflow: hidden;
      }
      /* Card thumbnail */
      .epcard__media {
        position: relative;
        aspect-ratio: 376 / 227;
        border-radius: 10px;
        overflow: hidden;
        background: #2a2620;  /* fallback while/if image is missing */
      }
      .epcard__thumb {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .epcard__grain {
        position: absolute;
        inset: 0;
        background-image:
          radial-gradient(circle at 20% 30%, rgba(255,255,255,0.04) 0 1px, transparent 1px),
          radial-gradient(circle at 70% 60%, rgba(0,0,0,0.06) 0 1px, transparent 1px);
        background-size: 3px 3px, 5px 5px;
        mix-blend-mode: soft-light;
        pointer-events: none;
      }
      .epcard__play {
        position: absolute;
        top: 28px;
        left: 28px;
        width: 48px;
        height: 48px;
        padding: 0;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 2;
        transition: transform 0.18s ease;
      }
      .epcard__play:hover { transform: scale(1.06); }
      .epcard__play img { width: 100%; height: 100%; display: block; }
      .epcard__badge {
        position: absolute;
        bottom: 16px;
        left: 16px;
        background: #232222;
        color: #FAF7EF;
        font-family: var(--font-display);
        font-size: 14px;
        line-height: 18px;
        letter-spacing: -0.01em;
        text-transform: uppercase;
        padding: 6px 8px;
        border-radius: 4px;
        backdrop-filter: blur(15px);
        z-index: 2;
      }
      .epcard__patch {
        position: absolute;
        z-index: 2;
        height: auto;
        pointer-events: none;
      }
      /* Circular embroidered patches (Idaho, Wyoming) — Figma 93x96 at right edge, lower */
      .epcard__patch--right {
        right: clamp(4px, 1.8%, 10px);
        bottom: clamp(0px, 0.5%, 4px);
        width: clamp(72px, 25%, 96px);
        transform: rotate(-4.17deg);
      }
      /* Flag patch is rectangular (wider than tall, Figma 114x82, rotation -7.1deg) */
      .epcard__patch--flag {
        width: clamp(82px, 30%, 114px);
        bottom: clamp(12px, 6%, 24px);
        transform: rotate(-7.1deg);
      }

      /* Card meta block. Pass-3 B87/B88/B89 comment: "sort out the padding on
         this to match the figma" — tightened internal gap from 24→16 now the
         meta children carry proper wh-* token line-heights (wh-card-2-title,
         wh-coords, wh-p-16). If the Figma calls for different values, dial
         here once the reference is to hand. */
      .epcard__meta {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .epcard__tags {
        display: flex;
        gap: 16px;
        font-family: var(--font-display);
        font-size: 14px;
        line-height: 18px;
        letter-spacing: -0.01em;
        font-weight: 400;
        text-transform: uppercase;
        color: #232222;
      }
      .epcard__title {
        font-family: var(--font-display);
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        text-transform: uppercase;
        color: #232222;
        margin: 0;
      }
      .epcard__rule {
        height: 1px;
        background: rgba(35, 34, 34, 0.15);
        border: 0;
        margin: -8px 0 0;
        width: 100%;
      }
      .epcard__loc, .epcard__time {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .epcard__loc {
        font-family: 'Flama Condensed', 'Oswald', 'Arial Narrow', sans-serif;
        font-weight: 700;
        font-size: 18px;
        line-height: 1.4;
        text-transform: uppercase;
        color: #565658;
      }
      .epcard__time {
        font-family: var(--font-body);
        font-weight: 500;
        font-size: 16px;
        line-height: 28px;
      }
      .epcard__time-date { color: #565658; }
      .epcard__time-dur { color: #000; }
      .epcard__sep {
        display: inline-block;
        width: 1px;
        height: 14px;
        background: rgba(35, 34, 34, 0.3);
      }

      /* --- Footer (platform pills + CTA) --- */
      .podshow__foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: wrap;
        width: 100%;
      }
      .podshow__platforms {
        background: #FAF7EF;
        border-radius: 12px;
        padding: 14px;
        display: flex;
        align-items: center;
        gap: 24px;
        color: #232222;
        font-family: var(--font-body);
        font-weight: 500;
        font-size: 16px;
        line-height: 28px;
      }
      .podshow__platforms-label { white-space: nowrap; }
      .podshow__platform {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
      }
      .podshow__platform .wh-platform-ic {
        width: 35px;
        height: 35px;
        flex-shrink: 0;
        display: block;
        transition: transform 0.2s ease;
      }
      .podshow__platform:hover .wh-platform-ic { transform: scale(1.15); }

      @media (max-width: 1100px) {
        .podshow__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
        .epcard { padding: 16px 16px 28px; gap: 20px; }
      }

      @media (max-width: 900px) {
        /* Bottom padding clears the UGC torn-paper edge, which bleeds 93px up
           into this section (.ugc::before top:-93px). At 64px it covered the
           bottom 29px of "View all episodes". (2026-10-12 responsive QA) */
        .podshow { padding: 64px 20px 124px; }
        .podshow__cards { grid-template-columns: 1fr; gap: 16px; max-width: 480px; margin: 0 auto; }
        .podshow__title { font-size: clamp(36px, 10vw, 56px); }
        .podshow__sub { font-size: 16px; line-height: 26px; }
        .podshow__foot { flex-direction: column; align-items: stretch; }
        .podshow__foot .storycard__btn { align-self: center; }
        .podshow__platforms {
          gap: 14px;
          flex-wrap: wrap;
          justify-content: center;
          font-size: 14px;
        }
        .podshow__platforms-label { width: 100%; text-align: center; }
        .epcard__badge { font-size: 12px; padding: 4px 6px; }
        .epcard__patch--right { width: 72px; }
        .epcard__loc { font-size: 16px; flex-wrap: wrap; }
        .epcard__time { font-size: 14px; line-height: 24px; flex-wrap: wrap; }
      }

      /* ===== UGC / FIND YOUR WILD SECTION (Figma node 92:358) =====
         Tokens: WH_White background #FCF2E2, polaroid bg #FFFCF4,
         WH_Black Primary #232222, WH_Orange #BC5C12. */
      /* Section box itself has NO solid bg — the cream + texture are painted
         by ::before / ::after below, BOTH masked to the same torn-paper shape
         (Figma node 4148-18427, Vector 7). Each pseudo extends 93px ABOVE the
         section so the cream + grain bleed up into the sage of Watch the
         Series together, producing one continuous textured cream surface
         instead of a flat-cream strip + textured interior. */
      .ugc {
        /* Sage underlay with podshow's paper texture baked in — the
           torn-paper mask scales with section height (mask-size: 100% 100%),
           so on tall UGC the deepest tear dips below the joint with .podshow
           and reveals this underlay through the gaps. The layered background
           mirrors podshow EXACTLY (var(--wh-sage) base + texture-paper-mirror
           multiplied @ ~0.95 strength via a 0.05 sage veil) so the strip
           below the joint continues the section above with no visible seam. */
        background-color: var(--wh-sage);
        background-image:
          linear-gradient(rgba(183, 201, 192, 0.05), rgba(183, 201, 192, 0.05)),
          url('//wilderheart.com/cdn/shop/t/7/assets/texture-paper-mirror.jpg?v=119859846192384791821780922737');
        background-size: auto, 1120px auto;
        background-repeat: repeat, repeat;
        background-blend-mode: normal, multiply;
        color: #232222;
        position: relative;
        padding: clamp(120px, 14vw, 195px) clamp(20px, 5vw, 60px) clamp(80px, 10vw, 140px);
        /* Y-axis stays visible so the torn-paper pseudo can bleed UP into
           podshow above (top: -93px). X-axis CLIPS so the lifebuoy deco
           and topbar serial don't push the document into horizontal scroll
           on wide viewports (was 1943 vs 1836). `overflow: clip visible`
           is the modern way to do per-axis overflow without forcing the
           other axis to scroll. */
        overflow: clip visible;
        isolation: isolate;
        --ugc-torn-mask: url('//wilderheart.com/cdn/shop/t/7/assets/ugc-torn-mask.svg?v=61477774558974979271792482376');
      }
      /* FYW only: the UGC torn paper sits over the wooden TV composite (.os-tv),
         not the homepage's sage podshow. The torn dips bite ~8% (up to ~34px on the
         tall 2x2 grid) PAST the os-tv joint into the ugc's own underlay, so a cream
         underlay showed a grey paper seam there instead of the wood continuing. Fill
         the underlay with the os-tv floor's own tone (#7d603f, sampled from
         os-tv-bg.webp) and drop the paper grain (background-image:none) so the
         bite-marks read as the wood showing through. The section body's grain still
         comes from .ugc::after, so nothing else changes. (user 2026-07-27) */
      body:has(.os-tv) .ugc { background-color: #7d603f; background-image: none; }
      /* Cream fill, clipped to the torn-paper shape. */
      .ugc::before {
        content: '';
        position: absolute;
        left: 0; right: 0;
        top: -93px;
        bottom: 0;
        z-index: 0;
        pointer-events: none;
        background-color: #FCF2E2; /* WH_White background (Figma var) */
        -webkit-mask-image: var(--ugc-torn-mask);
                mask-image: var(--ugc-torn-mask);
        /* Native 1440px width (the SVG viewBox), TILED — NEVER 100%. ugc-torn-mask.svg is
           preserveAspectRatio="none", so ANY width other than 1440 distorts the tear:
           100% (or max(...,100%)) STRETCHES the peaks flat on screens wider than 1440.
           Pin to 1440px so the peaks stay true desktop scale, and repeat-x so the tear
           fills full-bleed width at that scale (runs off both edges) instead of stopping
           at 1440. The solid body below the tear tiles seamlessly (all one fill); only the
           torn top edge repeats. [[reference-wh-svg-divider-native-scale]] */
        -webkit-mask-size: 1440px 100%;
                mask-size: 1440px 100%;
        -webkit-mask-repeat: repeat-x;
                mask-repeat: repeat-x;
        -webkit-mask-position: 100% 0;
                mask-position: 100% 0;
      }
      /* Paper grain overlay (Figma 92:359, Paper_01 multiply at 100% opacity)
         — same torn-mask as the cream so the texture follows the bite-marks
         into the sage without spilling into the cutouts. */
      .ugc::after {
        content: '';
        position: absolute;
        left: 0; right: 0;
        top: -93px;
        bottom: 0;
        z-index: 1;
        pointer-events: none;
        background-image: url('//wilderheart.com/cdn/shop/t/7/assets/texture-paper-mirror.jpg?v=119859846192384791821780922737');
        background-size: 1120px auto;
        background-repeat: repeat;
        opacity: 0.55;
        mix-blend-mode: multiply;
        -webkit-mask-image: var(--ugc-torn-mask);
                mask-image: var(--ugc-torn-mask);
        /* Match ::before exactly (native 1440px, tiled) so the grain tear stays aligned
           with the cream tear. [[reference-wh-svg-divider-native-scale]] */
        -webkit-mask-size: 1440px 100%;
                mask-size: 1440px 100%;
        -webkit-mask-repeat: repeat-x;
                mask-repeat: repeat-x;
        -webkit-mask-position: 100% 0;
                mask-position: 100% 0;
      }

      .ugc__inner {
        position: relative;
        z-index: 2;
        max-width: 1320px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: clamp(48px, 6vw, 80px);
        align-items: center;
      }

      /* --- Top bar: serial + horizontal rule + handwritten quote --- */
      /* Figma 92:358 topbar — FULL-WIDTH so the rule can run all the way behind
         the ring at the page edge. The serial rests ON the rule (~44%); the script
         sits BELOW the rule and is right-anchored so the "miles" line lands ~10px
         off the ring; the rule's right end tucks ~under the ring's rope so it reads
         as emerging from behind the ring. Right-offsets are derived from the ring's
         own width clamp(220,26vw,372) minus the section padding clamp(20,5vw,60),
         so the relationships track the ring across viewport widths. */
      .ugc__topbar {
        position: absolute;
        top: clamp(50px, 6vw, 80px);
        left: 0;
        right: 0;
        height: 72px;
        z-index: 3;
        pointer-events: none;
      }
      .ugc__topbar-line {
        position: absolute;
        left: 27%;
        /* Runs all the way off the right page edge, passing behind the ring (ring z-index 6
           over the line z-index 3); the section's x-clip trims it cleanly at the edge. (2026-06-26) */
        right: calc(clamp(20px, 5vw, 60px) * -1);
        top: 26px;
        height: 1px;
        background: #232222;
      }
      .ugc__serial {
        position: absolute;
        left: 44%;
        bottom: 48px;            /* rests just on top of the rule (rule is 46px from container bottom) */
        font-family: var(--font-mono);
        font-weight: 400;
        font-size: clamp(17px, 1.7vw, 24px);
        line-height: 1;
        color: #232222;
        z-index: 1;
      }
      .ugc__topbar-script {
        position: absolute;
        right: calc(clamp(220px, 26vw, 372px) * 0.925 + 10px - clamp(20px, 5vw, 60px));
        top: 44px;               /* sits BELOW the rule, per Figma */
        font-family: var(--font-script);
        font-weight: 400;
        font-size: clamp(18px, 1.7vw, 24px);
        line-height: 1.25;
        color: #232222;
        max-width: 340px;
      }

      /* --- Headline group --- */
      .ugc__head {
        display: flex;
        flex-direction: column;
        gap: clamp(32px, 4vw, 50px);
        align-items: center;
        text-align: center;
      }
      .ugc__title {
        font-family: var(--font-display);
        font-size: clamp(44px, 6.5vw, 70px);
        line-height: 1;
        letter-spacing: -0.01em;
        font-weight: 400;
        text-transform: uppercase;
        color: #232222;
        margin: 0;
        max-width: 942px;
      }
      .ugc__title-orange { color: #BC5C12; }
      .ugc__sub {
        font-family: var(--font-body);
        font-weight: 500;
        font-size: 18px;
        line-height: 30px;
        color: #232222;
        margin: 0;
        max-width: 544px;
      }

      /* --- Polaroid card row + CTA wrapper, right-aligned --- */
      .ugc__rightcol {
        display: flex;
        flex-direction: column;
        gap: 40px;
        align-items: flex-end;
        width: 100%;
      }
      .ugc__cards {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 312px));
        gap: 24px;
        justify-content: center;
        width: 100%;
      }
      .poloroid {
        position: relative;
        background: #FFFCF4;
        border-radius: 4px;
        padding: 13px 13px 0;
        height: 416px;
        box-shadow:
          6.148px 6.148px 12.296px rgba(0,0,0,0.04),
          0.615px 0.615px 12.296px 2.459px rgba(0,0,0,0.04);
        display: flex;
        flex-direction: column;
        gap: 9px;
        /* overflow stays visible so the tape bits continue past the frame and
           read as stuck to the page (content never exceeds the fixed height:
           4-col 312px and 2-col 720px caps both fit inside 416px). */
        overflow: visible;
      }
      .poloroid__photo {
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        background: #c9b896;  /* warm fallback if image is missing */
      }
      .poloroid__photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease;
      }
      .poloroid:hover .poloroid__photo img { transform: scale(1.05); } /* Pete review 2026-06-18: UGC "same treatment as homepage" — card image-enlarge on rollover. Shared snippet: also applies on homepage + Audrey mirror (intended). */
      .poloroid__caption {
        font-family: 'Covered By Your Grace', var(--font-script);
        font-weight: 400;
        font-size: 20px;
        line-height: 1.3;
        color: #000;
        text-transform: uppercase;
        margin: 0;
      }
      /* Tape bits: one per polaroid, unique piece, all along the TOP edge at
         different positions/angles, hanging out of the frame so they read as
         stuck to the page (user call 2026-06-12). */
      .poloroid__tape { position: absolute; z-index: 2; height: auto; pointer-events: none; }
      .poloroid__tape--1 { width: 132px; top: -17px; left: 50%; transform: translateX(-50%) rotate(-3deg); }  /* kraft, top center */
      .poloroid__tape--2 { width: 110px; top: -15px; right: 16px; transform: rotate(14deg); }                 /* striped washi, top right */
      .poloroid__tape--3 { width: 108px; top: -16px; left: 14px; transform: rotate(-11deg); }                 /* torn cream, top left */
      .poloroid__tape--4 { width: 126px; top: -18px; left: 32%; transform: rotate(5deg); }                    /* clear, top, left of center */

      /* --- Decorative illustrations (positioned absolute on section frame) --- */
      .ugcdeco {
        position: absolute;
        z-index: 4;
        height: auto;
        pointer-events: none;
      }
      /* Backpack + canteen cluster top-left (Figma 92:387, 92:388) */
      .ugcdeco--backpack {
        top: clamp(20px, 2.5vw, 36px);
        left: clamp(20px, 4.5vw, 65px);
        width: clamp(150px, 16vw, 230px);
        z-index: 5;
      }
      .ugcdeco--canteen {
        top: clamp(120px, 11vw, 168px);
        left: clamp(0px, 1.5vw, 25px);
        width: clamp(100px, 10.5vw, 151px);
        z-index: 6;
      }
      /* Lifebuoy + lantern cluster top-right. Lifebuoy partially off-screen,
         lantern hangs behind/below it (Figma 92:393, 92:392) */
      .ugcdeco--lifebuoy {
        top: clamp(-70px, calc(-2vw - 40px), -64px);   /* lifted a further ~40px (2026-06-26) so the ring clears the lantern below */
        right: calc(clamp(20px, 5vw, 60px) * -1);   /* cancels the section side-padding so the image's right edge sits on the page edge (zero gap) */
        width: clamp(220px, 26vw, 372px);
        transform: rotate(-13.68deg);
        z-index: 6;
      }
      .ugcdeco--lantern {
        top: clamp(180px, 18vw, 261px);
        right: clamp(20px, 2.5vw, 40px);
        width: clamp(100px, 8.5vw, 144px);   /* scaled down to ~Figma 92:392 footprint (~156x280); was 110/12vw/175 */
        transform: rotate(3.9deg);
        z-index: 5;
      }

      @media (max-width: 1100px) {
        .ugc__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
        /* Shrink + tuck the corner illos so they stop crowding the heading. */
        .ugcdeco--backpack { width: 116px; left: 10px; top: 36px; }
        .ugcdeco--canteen  { width: 76px; left: -6px; top: 116px; }
        .ugcdeco--lifebuoy { width: 150px; right: 10px; top: 6px; }
        .ugcdeco--lantern  { width: 74px; right: 60px; top: 144px; }
        /* The serial + rule + handwritten "miles" script can't sit clear of the
           heading below full desktop width — hide it here (as on mobile) so it's
           never an unreadable overlap. It stays on >1100px. */
        .ugc__topbar { display: none; }
      }

      @media (max-width: 900px) {
        .ugc { padding: 80px 20px 64px; }
        .ugc__cards { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; gap: 16px; }
        .poloroid { height: auto; padding-bottom: 16px; }
        .poloroid__photo { aspect-ratio: 1 / 1; }
        .ugc__rightcol { align-items: stretch; gap: 28px; }
        .ugc__rightcol .storycard__btn { align-self: center; }
        .ugc__title { font-size: clamp(40px, 11vw, 56px); }
        .ugc__sub { font-size: 16px; line-height: 26px; }
        /* Hide the heavier illos on phones — they crowd the layout */
        .ugcdeco--backpack, .ugcdeco--canteen, .ugcdeco--lantern { display: none; }
        .ugcdeco--lifebuoy { width: 110px; right: 12px; top: 12px; opacity: 0.85; }
        .ugc__topbar { display: none; }
      }

      /* ===== GEAR FOR THE ROAD SECTION (Figma node 92:407) =====
         Tokens (from Figma variables): WH_Black Primary #232222 bg,
         WH_White #FAF7EF text, WH_Cream #CEC0A3 muted, WH_Orange #BC5C12,
         WH_paragraph 16 = Inter Medium 16/28. */
      /* GEAR FOR THE ROAD section (Figma node 92:407)
         1440x1057 canvas: bg #232222, topo SVG @ 0.10 opacity, paper texture @ 0.20,
         icons 51.84px row gap 34.3, hero 760x457 with 3.375px #3F3F3F border + 16.875px radius,
         heading Neilvard 70/1/-1%, body Inter 16/28, button radius 4px. */
      .gear {
        background: #1B1A1A;          /* sampled from Figma flat-bg areas, not the WH_Black Primary token */
        color: #FAF7EF;
        position: relative;
        padding: clamp(64px, 8vw, 120px) clamp(20px, 5vw, 160px);
        overflow: hidden;
        isolation: isolate;
      }
      /* Paper layer underneath the topo. Paper_07 is mostly cream/white paper with
         DARKER creases/cracks/fibers. To make those creases READ on a near-black
         section, we invert the asset (creases become light) then screen-blend at
         moderate opacity — the bright inverted creases lift through the dark and
         add the visible grain texture without flooding the section with light. */
      .gear__grain {
        position: absolute; inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image: url('//wilderheart.com/cdn/shop/t/7/assets/gear-paper-grain.webp?v=171803139880872141751779620228');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        filter: invert(1);
        mix-blend-mode: screen;
        opacity: 0.42;
      }
      .gear__topo {
        position: absolute; inset: 0;
        z-index: 1;
        pointer-events: none;
        background-image: url('//wilderheart.com/cdn/shop/t/7/assets/wh-topo-contours.svg?v=56063130750954191951781115868');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0.05;
        /* wh-topo-contours.svg (two-tone export: cream primaries + 45%-cream
           secondaries). Stepped down 0.65 → 0.5 → 0.25 → 0.15 → 0.1 → 0.07 → 0.05
           (user calls): now sitting just under the ~0.1 watermark weight of
           the other dark sections. */
      }
      .gear__inner {
        position: relative;
        z-index: 2;
        max-width: 1320px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: clamp(48px, 6vw, 96px);
      }

      /* --- Top icon row (Figma 92:531): 51.84px icons, 34.326px gap --- */
      .gear__icons {
        display: flex;
        align-items: center;
        gap: clamp(20px, 2.4vw, 34.326px);
      }
      .gear__icon {
        width: clamp(36px, 3.6vw, 51.84px);
        height: clamp(36px, 3.6vw, 51.84px);
        flex-shrink: 0;
        display: block;
        /* Figma renders icons at native #3F3F3F on #232222 bg, a deliberate low-contrast
           "etched" effect. Don't filter them to cream — that breaks the Figma intent. */
      }

      /* --- Main: image left + copy right (Figma 92:518), gap 136px --- */
      .gear__main {
        display: grid;
        grid-template-columns: minmax(0, 760fr) minmax(0, 395fr);
        gap: clamp(40px, 9.4vw, 136px);
        align-items: center;
      }
      .gear__media {
        position: relative;
        width: 100%;
        aspect-ratio: 760 / 457;
        border-radius: 16.875px;
        overflow: hidden;
        background: #2a2620;
        border: 3.375px solid #3F3F3F;
      }
      .gear__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease;
      }
      .gear__media:hover img { transform: scale(1.05); }
      .gear__copy {
        display: flex;
        flex-direction: column;
        gap: 0;            /* explicit per-element margins below set the rhythm */
        align-items: flex-start;
        max-width: 395px;
      }
      .gear__title {
        font-family: var(--font-display);
        font-size: clamp(44px, 5.4vw, 70px);
        line-height: 1;
        letter-spacing: -0.01em;
        font-weight: 400;
        text-transform: uppercase;
        color: #FAF7EF;
        margin: 0 0 32px;   /* title → description = 32px (Figma) */
      }
      .gear__title-orange { color: var(--wh-orange); }
      .gear__sub {
        font-family: var(--font-body);
        font-weight: 500;
        font-size: 16px;
        line-height: 28px;
        color: #FAF7EF;
        margin: 0 0 48px;   /* description → CTA button = 48px (Figma) */
        max-width: 395px;
      }

      /* --- Bottom row (Figma absolute coords inside the 1440-wide section):
            - script (92:526): canvas x ≈ 280, y centred on the line at y=942 (cream Homemade Apple 24px)
            - line (92:527):   canvas x=708 → x=1582, y=942 (extends 142px past 1440 right edge, runs under illos)
            - illos (92:528):  canvas x=1162-1405, y=746-1026 (35px from section right edge, extends 84px below the line)
         The row is absolute-positioned so the line can pass UNDER the illos and off-page. */
      .gear__foot {
        position: relative;
        /* Negative top margin cancels the inner flex gap and pulls the whole band
           (script + line + illos, all bottom-anchored) up so the script sits ~130px
           below the merch photo per Figma. Horizontal negatives break out of the
           inner max-width=1320 so the absolute children can use full section width. */
        margin: calc(-1 * clamp(48px, 6vw, 96px) - 28px) calc(-1 * clamp(20px, 5vw, 160px)) 0;
        height: clamp(200px, 22vw, 280px);
      }
      .gear__foot-script {
        position: absolute;
        /* canvas x = 397 in 1440 frame (27.6% from left); script "Adventure isn't"
           starts here per Figma 4148-18466 pixel measurement. */
        left: clamp(120px, 27.6vw, 397px);
        bottom: clamp(58px, 8vw, 115px);
        margin: 0;
        font-family: var(--font-script);
        font-weight: 400;
        font-size: clamp(20px, 1.7vw, 24px);
        line-height: 1.3;
        color: #CEC0A3;       /* WH_Cream — matches Figma (pixel-sampled rgb(206,192,163)) */
        max-width: 360px;
        z-index: 1;
      }
      /* Cream rule (Figma 4148-18466): starts at x=709 in 1440 frame and runs
         to the right edge with the canteen+mug cluster overlapping. Was an
         <img> sized to its intrinsic SVG width (874px) which stopped short of
         the right edge at viewports >1440 (visible 134px+ gap on the 1920 TV).
         Now a plain block bar so it stretches between `left` and `right` for
         any viewport. `right` is negative so it still bleeds off-page on
         design-width viewports, matching the off-frame intent. */
      .gear__foot-line {
        position: absolute;
        left: clamp(380px, 49.2vw, 708px);
        /* Right value must clear the right side of .gear__foot AND the gap
           between .gear__foot and the viewport edge (which grows above
           ~1640vw because .gear__inner caps at 1320). At 1920 the gap is
           204px, so -14vw (=-269) covers it with ~65px to spare. */
        right: clamp(-300px, -14vw, -100px);
        bottom: clamp(80px, 11vw, 115px);
        height: 2px;
        background: #CEC0A3;  /* WH_Cream — matches Figma stroke */
        z-index: 1;           /* below illos so it appears to run under them */
      }
      /* Canteen + mug cluster (Figma 92:528): cluster 243×280, anchored 35px from section right edge */
      .gear__foot-illos {
        position: absolute;
        right: clamp(20px, 2.4vw, 35px);
        bottom: 0;
        width: clamp(200px, 16.9vw, 243px);
        aspect-ratio: 243 / 280;
        z-index: 2;        /* sits above the line */
      }
      .gearillo {
        position: absolute;
        bottom: 0;
        pointer-events: none;
        display: block;
        height: auto;
      }
      .gearillo--canteen {
        right: 0;
        width: 66.66%;       /* 162/243 — canteen back/right, native aspect 162:268 */
        z-index: 1;
      }
      .gearillo--mug {
        left: 0;
        width: 66.66%;       /* 162/243 — mug front/left, native aspect 162:139 */
        z-index: 2;
      }

      @media (max-width: 1100px) {
        .gear__icons { gap: 18px; }
        .gear__icon { width: 24px; height: 24px; }
      }

      @media (max-width: 900px) {
        .gear { padding: 64px 20px; }
        .gear__main { grid-template-columns: 1fr; gap: 32px; }
        /* gap:0 + explicit margins so the heading/sub/CTA rhythm is clean
           (the base 32/48px margins were stacking on top of the flex gap). */
        .gear__copy { max-width: none; gap: 0; }
        .gear__title { font-size: clamp(40px, 11vw, 56px); margin: 0 0 14px; }
        .gear__sub { font-size: 16px; line-height: 26px; max-width: none; margin: 0 0 28px; }
        .gear__icons {
          flex-wrap: wrap;
          gap: 14px;
          justify-content: center;
        }
        .gear__icon { width: 22px; height: 22px; }
        /* Script + line + illos stay ONE composed lockup below 900px (Pete 2026-07-16,
           id 1846531084): the same absolute desktop row, scaled with pure-vw positions
           (base clamps' px minimums would break the proportions at phone widths).
           Replaces the old centred stack, which read as ungrouped elements. The line's
           off-page right bleed is clipped by the section, as on desktop. */
        .gear__foot {
          margin: 32px -20px 0;
          height: clamp(150px, 26vw, 220px);
        }
        .gear__foot-script { left: 27.6vw; bottom: 9vw; font-size: clamp(15px, 2vw, 20px); max-width: 300px; }
        /* Line starts after the script's real extent: the script's 15px font floor makes it
           proportionally wider than desktop at phone widths, so pure 49.2vw strikes through
           "measured in miles". 27.6vw (script left) + 200px clears the text at every width. */
        .gear__foot-line { left: max(49.2vw, calc(27.6vw + 200px)); right: -40px; bottom: 11.5vw; }
        /* Stays absolute: the canteen/mug are %-sized children of this box. */
        .gear__foot-illos { right: 2.4vw; bottom: 0; width: 20vw; min-width: 110px; }
      }

      /* ===== EVENTS / PULL UP A CHAIR SECTION (Figma node 93:81) =====
         Frame 1440 × 1348. Tokens:
           WH_Blue #B7C9C0 (section bg)
           WH_Black Primary #232222 (text, medallion arrow, card borders)
           WH_Orange #BC5C12 (accent, button, scale-ruler stroke)
           WH_White #FAF7EF (card bg, button label)
           WH_Brown #4E4638 (serial text)
         Padding: pt-140 pb-376 px-60. Inline content: header (gap-40) → cards (gap-24) → button. */
      .events {
        background: #B7C9C0;
        color: #232222;
        position: relative;
        padding: clamp(80px, 9.7vw, 140px) clamp(20px, 4.2vw, 60px) clamp(180px, 26.1vw, 376px);
        overflow: hidden;
        isolation: isolate;
      }

      /* Paper grain texture (Figma 93:82) — full-bleed, mix-blend multiply at ~50% */
      .events__paper {
        position: absolute; inset: 0;
        background-image: url('//wilderheart.com/cdn/shop/t/7/assets/texture-paper-mirror.jpg?v=119859846192384791821780922737');
        background-size: 1120px auto;
        background-repeat: repeat;
        opacity: 0.5;
        mix-blend-mode: multiply;
        pointer-events: none;
        z-index: 0;
      }

      .events__inner {
        position: relative;
        z-index: 3;
        max-width: 1320px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 60px;
        align-items: center;
      }

      /* Headline group (centred, gap-40) */
      .events__head {
        display: flex;
        flex-direction: column;
        gap: 40px;
        align-items: center;
        text-align: center;
      }
      .events__title {
        font-family: var(--font-display);
        font-size: clamp(44px, 6vw, 70px);
        line-height: 1;
        letter-spacing: -0.01em;
        font-weight: 400;
        text-transform: uppercase;
        color: #232222;
        margin: 0;
      }
      .events__title-orange { color: #BC5C12; }
      .events__sub {
        font-family: var(--font-body);
        font-weight: 500;
        font-size: 18px;
        line-height: 30px;
        color: #000;
        margin: 0;
        max-width: 480px;       /* Figma 93:840 width */
      }

      /* Three-card row: 3 equal columns, gap-24 */
      .events__cards {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
        width: 100%;
      }
      .evcard {
        background: #FAF7EF;
        border-radius: 25px;
        padding: 24px 24px 40px;
        display: flex;
        flex-direction: column;
        gap: 24px;
      }
      .evcard__media {
        position: relative;
        aspect-ratio: 596 / 387;     /* Figma card-photo aspect at full card width */
        border-radius: 15px;
        overflow: hidden;
        background: #2a2620;
      }
      .evcard__photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease;
      }
      .evcard:hover .evcard__photo { transform: scale(1.05); }
      /* AU-FG soft-light texture overlay (Figma 93:844) */
      .evcard__texture {
        position: absolute;
        inset: 0;
        background-image: url('//wilderheart.com/cdn/shop/t/7/assets/events-au-fg-texture.jpg?v=172305308851432769051779560407');
        background-size: cover;
        background-position: center;
        mix-blend-mode: soft-light;
        opacity: 0.85;
        pointer-events: none;
        z-index: 1;
      }
      /* WH medallion: dark circle + cream WH wordmark, bottom-right of photo (Figma 93:845)
         Per Figma: circle 91.97 × 91.97, position inset 67.96% 5.34% 8.28% 79.33% */
      .evcard__mark {
        position: absolute;
        right: 5.34%;
        bottom: 8.28%;
        width: 15.4%;
        max-width: 92px;
        aspect-ratio: 1 / 1;
        z-index: 2;
      }
      .evcard__mark-circle,
      .evcard__mark-wh {
        position: absolute;
        display: block;
      }
      .evcard__mark-circle {
        inset: 0;
        width: 100%;
        height: 100%;
      }
      .evcard__mark-wh {
        /* WH wordmark sits centred over the circle, ~84% size of the dark disc */
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 56%;
        height: auto;
        aspect-ratio: 77 / 44;
      }

      .evcard__meta {
        display: flex;
        flex-direction: column;
        gap: 24px;
      }
      .evcard__title {
        font-family: var(--font-display);
        font-size: 28px;
        line-height: 36px;
        letter-spacing: -0.01em;
        font-weight: 400;
        text-transform: uppercase;
        color: #232222;
        margin: 0;
        max-width: 510px;
      }
      .evcard__loc {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 0 1 auto;
        min-width: 0;
        font-family: 'Flama Condensed', 'Oswald', 'Arial Narrow', sans-serif;
        font-weight: 700;
        font-size: 15px;
        line-height: 1.4;
        text-transform: uppercase;
        color: #565658;
      }
      .evcard__sep {
        display: inline-block;
        width: 1px;
        height: 18px;
        flex-shrink: 0;
        opacity: 0.5;
      }
      /* Card foot: compact CTA (left) + location/date inline (right), bottom-anchored so the
         row lines up across all cards regardless of title length — mirrors the podcast card
         foot (2026-06-15 review). */
      .evcard__foot {
        margin-top: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
      }
      /* Non-coloured CTA — text + icon only, no orange fill (mirrors the podcast
         card hover button .pc__hwatch). Orange label/icon so it still reads as the
         CTA on the cream card; darkens on hover. Icon is currentColor, so it follows. */
      .evcard__cta {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 16px;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
        color: #BC5C12;
        font-family: var(--font-display, 'Neilvard Semibold One', sans-serif);
        font-weight: 400;
        font-size: 16px;
        line-height: 1;
        letter-spacing: -0.01em;
        text-transform: uppercase;
        text-decoration: none;
        cursor: pointer;
        transition: color 0.18s ease;
      }
      .evcard__cta:hover { color: #d06208; background: none; }
      /* Touch: grow the hit area to 44px without moving anything (padding offset
         by an equal negative margin). The label itself is only 24px tall. */
      @media (pointer: coarse), (max-width: 900px) {
        .evcard__cta { padding-block: 10px; margin-block: -10px; }
      }
      .evcard__cta .storycard__btn-icon { width: 24px; height: 24px; flex: none; }

      /* CTA button (Figma 93:871): bg #BC5C12, pl-16 pr-12 py-12, rounded-4, gap-16, 24px icon */
      .events__cta {
        align-self: center;
        display: inline-flex;
        align-items: center;
        gap: 16px;
        background: #BC5C12;
        color: #FAF7EF;
        padding: 12px 12px 12px 16px;
        border-radius: 4px;
        font-family: var(--font-display);
        font-size: 16px;
        line-height: 1;
        letter-spacing: -0.01em;
        text-transform: uppercase;
        text-decoration: none;
        white-space: nowrap;
        transition: background 0.18s ease;
      }
      .events__cta:hover { background: #A24F0F; }
      .events__cta-icon {
        width: 24px;
        height: 24px;
        display: block;
        flex-shrink: 0;
      }

      /* === Decorative absolutes on section frame === */
      .eventsdeco {
        position: absolute;
        height: auto;
        pointer-events: none;
      }

      /* Wyoming relief/road map (Figma 93:837), new full-state asset 628×912.
         Flush to the section left edge, top-left, partly occluded by card 1.
         Asset has an opaque paper bg, so multiply-blends it into the sage. */
      /* Flush to the left edge (bleeding slightly off it), tall portrait, top-left,
         running down behind card 1 — matches the Figma 93:81 reference. */
      .eventsdeco--wyomap {
        top: clamp(70px, 7vw, 116px);
        left: clamp(-44px, -2.6vw, -24px);
        width: clamp(205px, 18vw, 270px);
        aspect-ratio: 628 / 912;
        mix-blend-mode: multiply;
        opacity: 0.42;
        z-index: 1;
      }

      /* Compass rose (full degree wheel — events-compass-rose.svg, 1510×1510 square).
         Anchored to BLEED off the section's bottom edge, centred horizontally, so the
         wheel's lower arc runs all the way down to the section bottom instead of
         stopping short. The SVG ships at 0.5 opacity; CSS layers a little more knock-back. */
      .eventsdeco--compass {
        top: auto;
        bottom: clamp(-460px, -32vw, -300px);  /* lower portion bleeds past the section bottom so the arc reaches the edge */
        left: 50%;
        transform: translateX(-50%);
        width: min(1240px, 92vw);
        aspect-ratio: 1 / 1;
        opacity: 0.7;
        mix-blend-mode: multiply;
        z-index: 1;
      }

      /* Contours (Figma 93:83), new asset 748×872 (taller than wide). Bottom-right
         corner behind the whiskey glass, bleeding off the right + bottom edges. */
      .eventsdeco--contours {
        bottom: clamp(-50px, -3vw, -20px);
        right: clamp(-80px, -5vw, -30px);
        width: clamp(260px, 27vw, 390px);
        aspect-ratio: 760 / 886;
        opacity: 0.55;
        mix-blend-mode: multiply;
        z-index: 1;
      }

      /* Whiskey glass photo (Figma 93:879): canvas left=1244 top=1055, w=156 h=261 */
      .eventsdeco--glass {
        bottom: clamp(40px, 2.4vw, 32px);
        right: clamp(20px, 2.8vw, 40px);
        width: clamp(110px, 10.8vw, 156px);
        aspect-ratio: 156 / 261;
        z-index: 5;
      }

      /* Big WH medallion arrow (Figma 93:105): canvas centre x, top=1009, w=216 h=172.
         Section height 1348, so bottom = 1348 - 1009 - 172 = 167px from bottom. */
      .events__medallion-arrow {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: clamp(100px, 12.4vw, 167px);
        width: clamp(140px, 15vw, 216px);
        aspect-ratio: 216 / 172;
        z-index: 4;
        pointer-events: none;
      }

      /* Handwritten quote (Figma 93:882): canvas left=71 top=1171, w=348, Homemade Apple 24 #232222 */
      .events__quote {
        position: absolute;
        /* align the quote's left edge with the first card's left edge (= the inner content edge) */
        left: max(clamp(20px, 4.2vw, 60px), calc((100% - 1320px) / 2));
        bottom: clamp(120px, 13.1vw, 177px);    /* 1348 - 1171 = 177 from bottom */
        font-family: var(--font-script);
        font-weight: 400;
        font-size: clamp(20px, 1.7vw, 24px);
        line-height: 1.3;
        color: #232222;
        margin: 0;
        max-width: 360px;
        z-index: 4;
        pointer-events: none;
      }

      /* Serial number + scale ruler group (Figma 93:873):
         canvas left=646 top=1198, "1024598003" at left=373, ruler below at top=24.99 (Figma rotated -90).
         I render the ruler as a HORIZONTAL line natively — width=909, height=14. */
      /* Serial + scale-ruler group (Figma 93:873): ruler stretches from canvas x=646 to x=1556
         (extends 116px past the 1440 right edge, runs UNDER the whiskey glass).
         Serial "1024598003" sits at canvas x=1019, ~41% into the ruler from its left start. */
      .events__ruler {
        position: absolute;
        left: 40%;                /* arrowhead (left end) at 80% of the centred down-arrow: 0.8 × 50% = 40% (≈x576 @1440) */
        right: clamp(-220px, -11vw, -140px);   /* runs behind the glass and off the right edge */
        bottom: clamp(60px, 9.6vw, 130px);
        z-index: 4;               /* below the glass (z5) so the line passes fully behind it */
        pointer-events: none;
      }
      .events__serial {
        position: absolute;
        left: 44%;                /* lands ~x1019 on the line, before the glass */
        bottom: 22px;             /* sits just above the 14px ruler line with breathing room */
        font-family: var(--font-mono);
        font-weight: 400;
        font-size: 24px;
        line-height: 1;
        color: #4E4638;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.02em;
        white-space: nowrap;
      }
      .events__scale {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 14px;
        display: block;
        transform: scaleX(-1);    /* flip the SVG so the arrowhead is on the LEFT end (Figma) */
      }

      @media (max-width: 900px) {
        .events { padding: 64px 20px 240px; }
        .events__inner { gap: 40px; }   /* lift the CTA up, away from the down-arrow */
        .events__head { gap: 24px; }
        .events__cards { grid-template-columns: 1fr; gap: 16px; max-width: 480px; margin: 0 auto; }
        .events__title { font-size: clamp(40px, 11vw, 56px); }
        .events__sub { font-size: 16px; line-height: 26px; }
        .evcard { padding: 16px 16px 28px; gap: 20px; }
        .evcard__title { font-size: 22px; line-height: 28px; }
        .evcard__loc { font-size: 14px; flex-wrap: wrap; }

        .events__medallion-arrow { width: 92px; bottom: 132px; }   /* drop the arrow so it clears the CTA above it */
        .events__quote { font-size: 18px; max-width: 220px; bottom: 110px; left: 16px; }
        .events__ruler { left: auto; right: 16px; bottom: 70px; width: 60%; }
        .events__serial { font-size: 18px; }
        .events__scale { height: 10px; }
        .eventsdeco--compass { width: 150%; opacity: 0.3; top: auto; bottom: -36%; }   /* rose bleeds off the bottom on mobile too */
        .eventsdeco--contours { width: 180px; opacity: 0.35; right: -30px; top: 75%; }
        .eventsdeco--glass { width: 70px; bottom: 30px; right: 12px; }
        .eventsdeco--wyomap { width: 220px; left: -130px; top: clamp(80px, 18vw, 140px); }
      }

      /* ===== Cookie consent (Shopify native customer-privacy banner) brand restyle =====
         Default banner is a generic full-bleed bar that also clips behind the theme
         preview bar. Recast it as a compact dark card, bottom-left, brand colours. */
      #shopify-pc__banner {
        left: clamp(16px, 2vw, 28px) !important;
        right: auto !important;
        bottom: clamp(20px, 2.4vw, 28px) !important;
        max-width: 430px !important;
        width: calc(100% - 32px) !important;
        background: #232222 !important;
        border: 1px solid rgba(166, 138, 59, 0.30) !important;
        border-radius: 14px !important;
        box-shadow: 0 12px 44px rgba(0, 0, 0, 0.38) !important;
        overflow: hidden !important;
      }
      #shopify-pc__banner .shopify-pc__banner__wrapper,
      #shopify-pc__banner .shopify-pc__banner__dialog {
        background: transparent !important;
        padding: 18px 20px !important;
        max-width: none !important;
      }
      #shopify-pc__banner .shopify-pc__banner__body,
      #shopify-pc__banner p,
      #shopify-pc__banner .shopify-pc__banner__copy {
        color: #CFC9BE !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
      }
      #shopify-pc__banner a { color: #E8700A !important; text-decoration: underline !important; }
      #shopify-pc__banner .shopify-pc__banner__btns { gap: 8px !important; margin-top: 12px !important; }
      #shopify-pc__banner button {
        font-family: 'Inter', sans-serif !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        padding: 10px 16px !important;
        border-radius: 8px !important;
        border: 1px solid rgba(250, 247, 239, 0.32) !important;
        background: transparent !important;
        color: #FAF7EF !important;
        cursor: pointer !important;
        transition: opacity .18s ease, background .18s ease !important;
      }
      #shopify-pc__banner button.shopify-pc__banner__btn-accept,
      #shopify-pc__banner .shopify-pc__banner__btn-accept {
        background: #E8700A !important;
        border-color: #E8700A !important;
        color: #FFFFFF !important;
      }
      #shopify-pc__banner button:hover { opacity: .88 !important; }
      @media (max-width: 600px) {
        #shopify-pc__banner { max-width: none !important; right: clamp(16px,4vw,20px) !important; width: auto !important; }
      }

      /* ===== QUOTE / FORTUNATE HERO SECTION (Figma node 94:895) =====
         Tokens: WH_Cream #CEC0A3 default text, WH_White #FAF7EF emphasis,
         WH_H2 = Neilvard 60/1/-1. Dark photo bg with 50% black overlay. */
      .quote {
        position: relative;
        /* fixed 72px bottom padding reserves room for the ruler so centred content never collides with it */
        padding: clamp(40px, 5vw, 60px) clamp(40px, 5vw, 60px) 72px;
        min-height: max(100svh, 640px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        overflow: hidden;
        isolation: isolate;
        color: #CEC0A3;
      }
      .quote__bg { position: absolute; inset: 0; z-index: 0; }
      .quote__bg > picture { display: contents; }   /* phone crop wrapper (index.liquid); img keeps sizing against .quote__bg */
      .quote__bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
      }
      .quote__bg-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
      }

      .quote__text {
        position: relative;
        z-index: 2;
        margin: 0;
        max-width: 860px;
      }
      /* Eyebrow + title + body hierarchy mirrors the FYW Wild Fund CTA band
         (os-wfcta) so the fund reads the same wherever it appears. */
      .quote__eyebrow {
        display: inline-block;
        margin: 0;
        padding-bottom: 20px;
        border-bottom: 2px solid #FAF7EF;
        font-family: 'Solway', var(--font-caption);
        font-weight: 500;
        font-size: 24px;
        line-height: 1.4;
        text-transform: capitalize;
        color: #FAF7EF;
      }
      .quote__title {
        margin: 36px 0 0;
        max-width: 660px;
        font-family: var(--font-display);
        font-weight: 400;
        font-size: clamp(38px, 6vw, 64px);
        line-height: 1;
        letter-spacing: -0.64px;
        text-transform: uppercase;
        color: #FAF7EF;
      }
      .quote__title .crm { color: #CEC0A3; }
      .quote__body {
        margin: 28px 0 0;
        max-width: 500px;
        font-family: var(--font-body);
        font-weight: 500;
        font-size: 18px;
        line-height: 30px;
        color: #FAF7EF;
      }
      .quote__btn { position: relative; z-index: 2; margin-top: clamp(28px, 3.5vw, 48px); }

      /* Bass fish illustration — bottom-right with rounded-br clip */
      .quote__fish {
        position: absolute;
        right: clamp(20px, 5vw, 60px);
        bottom: clamp(60px, 8vw, 80px);
        width: clamp(220px, 26vw, 371px);
        height: auto;
        z-index: 3;
        pointer-events: none;
      }
      .quote__fish img {
        width: 100%;
        height: auto;
        display: block;
        border-bottom-right-radius: clamp(80px, 12vw, 178px);
      }

      /* Bottom-left measurement ruler — the line + serial are ONE flex unit, pinned 28px
         above the section's bottom edge so they scale together and stay below the CTA. */
      .quote__ruler {
        position: absolute;
        /* line runs to the very left page edge (full-bleed left) rather than sitting inset (2026-06-26) */
        left: 0;
        right: clamp(40px, 5vw, 60px);
        bottom: 28px;
        display: flex;
        align-items: center;
        gap: 16px;
        z-index: 3;
        pointer-events: none;
      }
      .quote__arrow {
        flex: 1 1 auto;
        height: 14px;
        display: block;
      }
      .quote__serial {
        flex: none;
        font-family: var(--font-mono);
        font-weight: 400;
        font-size: clamp(14px, 1.4vw, 20px);
        line-height: 1;
        color: #FAF7EF;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }

      @media (max-width: 900px) {
        .quote { padding: 40px 24px 80px; min-height: max(100svh, 520px); }
        .quote__text { max-width: none; }
        .quote__eyebrow { font-size: 20px; padding-bottom: 14px; }
        .quote__title { font-size: clamp(32px, 9vw, 44px); margin-top: 28px; max-width: 400px; }
        /* Title + body capped to the SAME ~400px measure (Pete 2026-07-16, id 1846482956:
           "reduce width ~40%, both containers roughly the same pixel width, keep left-aligned").
           Harmless on phones: content width < 400px there anyway. */
        .quote__body { font-size: 16px; line-height: 27px; margin-top: 20px; max-width: 400px; }
        /* Arrow + serial + fish stay ONE composed lockup below 900px (Pete 2026-07-16,
           id 1846523100; also flagged pending in the 2026-07-21 log): full-width ruler with
           the fish seated above its right end, mirroring the desktop composition scaled.
           Replaces the old ungrouped state (arrow hidden, fish bleeding off-edge). */
        .quote__fish { width: clamp(150px, 24vw, 220px); bottom: clamp(44px, 7vw, 64px); right: 20px; }
        .quote__ruler { left: 0; right: 20px; bottom: 20px; }
        .quote__serial { font-size: 12px; }
      }

      /* ===== NEWSLETTER SIGNUP SECTION (Figma node 94:916) =====
         Tokens: WH_Orange #BC5C12 bg, WH_Black Primary #232222 text,
         WH_White #FAF7EF cream form bg, WH_Card title 1 = Neilvard 24/32. */
      .newsletter {
        background: #BC5C12;
        color: #232222;
        position: relative;
        /* Figma frame 94:916 is 1440x943 with the card row vertically centred
           (~273px above). Social block overlaps up 145px via .socialfollow margin-top. */
        min-height: 943px;
        padding: clamp(180px, 19vw, 273px) clamp(20px, 5vw, 60px) 0;
        overflow: hidden;
        isolation: isolate;
      }
      .newsletter__paper {
        position: absolute; inset: 0;
        background-image: url('//wilderheart.com/cdn/shop/t/7/assets/texture-paper-mirror.jpg?v=119859846192384791821780922737');
        background-size: 1120px auto;
        background-repeat: repeat;
        opacity: 0.55;
        mix-blend-mode: multiply;
        pointer-events: none;
        z-index: 0;
      }

      /* Top-left: serial + horizontal rule + vertical arrow */
      /* ===== Postal measurement marks (Figma 94:1704-1709) =====
         Children of .newsletter__inner, so offsets are inner-relative: inner top =
         card-row top (centred at y273.5 in the 943 frame), inner left = frame x60. */
      .newsletter__serial {
        position: absolute;
        font-family: var(--font-mono);
        font-weight: 700;
        color: #232222;
        font-variant-numeric: tabular-nums lining-nums;
        white-space: nowrap;
        z-index: 3;
        pointer-events: none;
      }
      .newsletter__serial--h {
        left: -1px;
        top: 291px;
        font-size: 24px;
        letter-spacing: 1px;
        z-index: -1;  /* sits behind the form card, as in Figma (94:1704 painted under the card) */
      }
      /* Vertical serial — anchored just below the card row (was a fixed 517px that
         pushed it off the section bottom and under the social-follow overlap). */
      .newsletter__serial--v {
        left: 457px;
        top: calc(100% + 40px);
        writing-mode: vertical-rl;
        font-size: 18px;
        letter-spacing: 2px;
      }
      /* The measurement rule + up-arrow are anchored to the BOTTOM of the card row
         (calc(100% + N)) so they always sit below the cards, never clipping them,
         and stay inside the section instead of running off the bottom edge. */
      .newsletter__rule {
        position: absolute;
        left: -61px;
        top: calc(100% + 32px);
        width: 729px;
        max-width: calc(100% + 61px);
        height: 2px;
        background: #232222;
        z-index: 3;
        pointer-events: none;
      }
      .newsletter__arrow-up {
        position: absolute;
        left: 418px;
        top: calc(100% + 32px);
        width: 44px;
        height: 80px;
        overflow: visible;
        z-index: 3;
        pointer-events: none;
      }

      .newsletter__inner {
        position: relative;
        z-index: 2;
        max-width: 1320px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(0, 464px) minmax(0, 1fr);
        gap: 16px;
        /* start (not stretch): the form keeps its natural content height so there's no
           space-between slack to collapse when a field is focused — fields/button stay put.
           The hero is sized to match via its own min-height/aspect (below). (2026-06-26) */
        align-items: start;
      }

      /* --- Cream form card --- */
      .newsletter__form {
        background: #FAF7EF;
        border-radius: 15px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 32px;
        min-height: 396px;
      }
      .newsletter__form-head {
        display: flex;
        flex-direction: column;
        gap: 24px;
      }
      .newsletter__eyebrow {
        font-family: var(--font-caption);
        font-weight: 500;
        font-size: 18px;
        line-height: 1.2;
        letter-spacing: -0.01em;
        color: #232222;
        margin: 0;
        text-transform: capitalize;
      }
      .newsletter__title {
        font-family: var(--font-display);
        font-size: 24px;
        line-height: 32px;
        letter-spacing: -0.01em;
        font-weight: 400;
        text-transform: uppercase;
        color: #232222;
        margin: 0;
      }
      .newsletter__sub {
        font-family: 'Inter', var(--font-body);
        font-weight: 500;
        font-size: 16px;
        line-height: 28px;
        color: #232222;
        margin: 0;
      }
      .newsletter__form-fields {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .newsletter__field {
        background: #FAF7EF;
        border: 1px solid #BC5C12;
        border-radius: 4px;
        height: 48px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .newsletter__field input {
        flex: 1;
        border: 0;
        background: transparent;
        outline: none;
        font-family: 'Inter', var(--font-body);
        font-weight: 500;
        font-size: 16px;
        line-height: 28px;
        color: #232222;
        min-width: 0;
      }
      .newsletter__field input::placeholder { color: #232222; opacity: 1; }
      .newsletter__field-icon {
        width: 24px;
        height: 24px;
        color: #232222;
        flex-shrink: 0;
      }
      .newsletter__submit {
        background: #BC5C12;
        color: #FAF7EF;
        border: none;
        border-radius: 4px;
        padding: 12px 12px 12px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: var(--font-display);
        font-weight: 400;
        font-size: 16px;
        line-height: 1;
        letter-spacing: -0.01em;
        text-transform: uppercase;
        cursor: pointer;
        transition: background-color 0.18s ease;
      }
      .newsletter__submit:hover { background: #d06208; }
      .newsletter__submit svg { width: 24px; height: 24px; flex-shrink: 0; }
      .visually-hidden {
        position: absolute !important;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0,0,0,0);
        white-space: nowrap; border: 0;
      }

      /* Desktop: lock the form card to a fixed height (= the hero) and pin its head (top)
         and fields (bottom) absolutely. A password-manager overlay injected on field focus
         sits in normal flow, so it can't move the pinned content; overflow:hidden stops it
         growing the card. Nothing shifts or grows on focus. (2026-06-26) */
      @media (min-width: 901px) {
        .newsletter__form {
          display: block;
          position: relative;
          height: 420px;
          min-height: 0;
          overflow: hidden;
        }
        .newsletter__form-head   { position: absolute; top: 24px; left: 24px; right: 24px; }
        .newsletter__form-fields { position: absolute; bottom: 24px; left: 24px; right: 24px; }
      }

      /* --- Hero photo card with handwritten quote + airmail stamp --- */
      .newsletter__hero {
        position: relative;
        border-radius: 15px;
        overflow: hidden;
        min-height: 420px;   /* matches the form's ~418px natural height so the two cards line up with no slack */
        /* Sized by its own ratio and opted out of the grid's stretch, so the image height is
           decoupled from the form column. If the form grows (e.g. a password-manager overlay
           on field focus), the image no longer follows it — no layout shift. (2026-06-26) */
        align-self: start;
        aspect-ratio: 2 / 1;
        background: #BC5C12;
      }
      .newsletter__hero-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .newsletter__hero-script {
        position: absolute;
        /* sits in the clear sky band of the canyon photo, below the rock arch
           that spans the top of the frame (user calls 2026-06-12, nudged 50px up) */
        top: calc(38% - 50px);
        left: 29px;
        width: 520px;
        max-width: 72%;
        font-family: 'Rock Salt', var(--font-script);
        font-weight: 400;
        font-size: clamp(22px, 2.43vw, 35px);
        line-height: 1.3;
        color: #FAF7EF;
        margin: 0;
        transform: rotate(-5.34deg);
        transform-origin: top left;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
        z-index: 2;
        pointer-events: none;
      }
      .newsletter__hero-stamp {
        position: absolute;
        bottom: 24px;
        right: 28px;
        width: clamp(140px, 18vw, 230px);
        height: auto;
        transform: rotate(2.67deg);
        z-index: 2;
        pointer-events: none;
      }

      /* --- Bottom-right quote --- */
      .newsletter__quote {
        position: absolute;
        left: 723px;
        top: calc(100% + 28px);
        font-family: var(--font-script);
        font-weight: 400;
        font-size: 24px;
        line-height: 1.3;
        color: #232222;
        margin: 0;
        width: 361px;
        text-align: left;
        z-index: 3;
        pointer-events: none;
      }

      /* --- Line-art decorations (Figma 94:916) ---
         Each SVG has black stroke art on transparent bg; placed absolutely against the orange,
         z-index 1 so they sit above the paper-texture overlay but below the form/hero content. */
      .newsletterdeco {
        position: absolute;
        height: auto;
        pointer-events: none;
        z-index: 1;
      }
      /* Sun-rays fan, top-right corner */
      .newsletterdeco--sunrays {
        top: clamp(-200px, -14vw, -120px);
        right: clamp(-200px, -14vw, -120px);
        width: clamp(420px, 50vw, 720px);
        opacity: 0.7;
      }
      /* Topographic contours, bottom-left (wh-topo-contours-ink.svg: the updated
         map in full-alpha ink, so opacity carries the weight) */
      .newsletterdeco--topo {
        bottom: clamp(-40px, -3vw, -20px);
        left: clamp(20px, 5vw, 60px);
        width: clamp(220px, 26vw, 385px);
        opacity: 0.5;
        mix-blend-mode: multiply;
      }
      /* Diagonal airmail stripe pattern, bottom band running across */
      .newsletterdeco--stripes {
        bottom: clamp(-200px, -14vw, -100px);
        right: clamp(-100px, -8vw, -40px);
        width: clamp(800px, 70vw, 1100px);
        opacity: 0.6;
      }
      /* Small compass-arc corner illustration, top-right under the rays */
      .newsletterdeco--cornerillo {
        top: clamp(60px, 8vw, 110px);
        right: clamp(20px, 4vw, 50px);
        width: clamp(80px, 10vw, 140px);
        opacity: 0.8;
      }
      /* Stamp cancellation hatching, sitting behind the AIR MAIL stamp */
      .newsletter__hero-stamplines {
        position: absolute;
        bottom: clamp(40px, 5vw, 70px);
        right: clamp(80px, 12vw, 180px);
        width: clamp(120px, 16vw, 230px);
        height: auto;
        z-index: 1;
        pointer-events: none;
        opacity: 0.9;
      }

      @media (max-width: 900px) {
        /* extra bottom padding so the quote clears the social-follow SVG that
           overlaps up into this section (was clipping the last line). */
        .newsletter { min-height: 0; display: block; padding: 80px 20px 128px; }
        .newsletter__inner { grid-template-columns: 1fr; gap: 16px; }
        .newsletter__form { min-height: 0; }
        .newsletter__title { font-size: 20px; line-height: 28px; }
        /* drop the desktop 2:1 ratio here: with min-height 300 it forced a 600px-wide box into a
           353px column, so the photo ran off the right edge with its corner and stamp (2026-10-18) */
        .newsletter__hero { min-height: 300px; aspect-ratio: auto; }
        /* drop the script off the top sky to the lower-left over the foreground. */
        .newsletter__hero-script { top: auto; bottom: 16px; left: 16px; font-size: 19px; width: auto; max-width: 56%; }
        .newsletter__hero-stamp { width: 125px; bottom: 18px; right: 16px; }
        .newsletter__hero-stamplines { width: 150px; bottom: 14px; right: 10px; }
        .newsletter__serial, .newsletter__rule, .newsletter__arrow-up { display: none; }
        .newsletter__quote { position: relative; left: auto; top: auto; width: auto; text-align: center; margin: 24px auto 0; }
        .newsletterdeco--lantern { display: none; }
      }

      /* ===== SOCIAL FOLLOW SECTION (Figma node 94:1771) =====
         Cream section with a vector "mountain" divider at top (pod-mountain-divider.svg,
         extracted from Figma Vector3 94:1770) that bites into the orange newsletter
         section above. Dark rounded card sits inside, plus compass+binoculars decoration. */
      .socialfollow {
        /* Cream backstop filling everything BELOW the torn-paper edge, so the
           short auto-height divider SVG no longer leaves the dark body bg
           showing as a strip under the card. The top gap (= the newsletter
           overlap) is left transparent so the torn bite still reads. */
        background: linear-gradient(#FCF2E2, #FCF2E2) no-repeat 0 100% / 100% calc(100% - clamp(80px, 10vw, 145px));
        position: relative;
        margin-top: clamp(-145px, -10vw, -80px);  /* Figma: social overlaps newsletter by 145px */
        padding: clamp(150px, 14.3vw, 206px) clamp(20px, 5vw, 60px) clamp(40px, 6vw, 80px);  /* top 206 = card offset below the cream edge */
        isolation: isolate;
        z-index: 2;
        overflow: hidden;  /* clip the tall torn-paper SVG so it doesn't bleed onto the linkcards below */
      }
      /* Mountain divider SVG — positioned absolute, spans top of section,
         extends down past viewport so the cream fill covers all content below the peaks. */
      .socialfollow__divider {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        display: block;
        pointer-events: none;
        z-index: -1;
      }
      /* Paper texture overlay masked to the SVG mountain shape so the texture also
         covers the peaks zone — otherwise the mountain area reads as pure cream while
         the area below reads as textured cream (two visibly different shades of beige). */
      .socialfollow::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url('//wilderheart.com/cdn/shop/t/7/assets/texture-paper-mirror.jpg?v=119859846192384791821780922737');
        background-size: 1120px auto;
        background-repeat: repeat;
        opacity: 0.35;
        mix-blend-mode: multiply;
        pointer-events: none;
        z-index: 0;
        /* Texture masked to the CREAM only: layer 1 = the torn SVG shape at the
           top (its transparent tear keeps the orange relief clean, no overlay);
           layer 2 = a solid fill for everything BELOW the SVG so the backstop is
           textured to match. Union of the two = all cream textured, relief clean.
           (SVG aspect 1440x998.5 => height 69.3% of width => 69.3vw at full width.) */
        -webkit-mask-image: url('//wilderheart.com/cdn/shop/t/7/assets/newsletter-divider.svg?v=41950463036887183181779714928'), linear-gradient(#000, #000);
                mask-image: url('//wilderheart.com/cdn/shop/t/7/assets/newsletter-divider.svg?v=41950463036887183181779714928'), linear-gradient(#000, #000);
        -webkit-mask-size: 100% auto, 100% calc(100% - 69.3vw);
                mask-size: 100% auto, 100% calc(100% - 69.3vw);
        -webkit-mask-position: top center, bottom center;
                mask-position: top center, bottom center;
        -webkit-mask-repeat: no-repeat, no-repeat;
                mask-repeat: no-repeat, no-repeat;
      }
      .socialfollow__inner {
        position: relative;
        z-index: 1;
        max-width: 1320px;
        margin: 0 auto;
      }
      .socialfollow__card {
        background: #232222;
        border-radius: 25px;
        padding: clamp(28px, 4.2vw, 60px);
        display: flex;
        align-items: center;
        gap: clamp(20px, 4vw, 48px);
        flex-wrap: wrap;
      }
      .socialfollow__label {
        font-family: var(--font-display);
        font-size: 24px;
        line-height: 32px;
        letter-spacing: -0.01em;
        font-weight: 400;
        text-transform: uppercase;
        color: #FAF7EF;
        margin: 0;
        white-space: nowrap;
      }
      .socialfollow__icons {
        display: flex;
        align-items: center;
        gap: 24px;
      }
      .socialfollow__icon {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #FAF7EF;
        color: #232222;
        border-radius: 8px;
        transition: background-color 0.18s ease, color 0.18s ease;
      }
      .socialfollow__icon:hover { background: #BC5C12; color: #FAF7EF; }
      .socialfollow__icon svg { width: 24px; height: 24px; }

      /* Compass + binoculars cluster, top-right of card, bleeds out a bit */
      .socialfollow__deco {
        position: absolute;
        top: clamp(-80px, -5.55vw, -44px);
        right: clamp(-60px, -4.17vw, -10px);
        width: clamp(360px, 37.8vw, 544px);
        height: clamp(220px, 23.1vw, 333px);
        z-index: 2;
        pointer-events: none;
      }
      .socialfollow__deco-compass {
        position: absolute;
        left: 35%;
        top: 43.3%;
        width: 36.2%;
        height: auto;
        transform: translate(-50%, -50%) rotate(14.96deg);
      }
      .socialfollow__deco-binoculars {
        position: absolute;
        left: 27%;
        top: 16.7%;
        width: 73%;
        height: auto;
      }

      @media (max-width: 900px) {
        .socialfollow__card { justify-content: center; text-align: center; }
        .socialfollow__icons { flex-wrap: wrap; justify-content: center; }
        .socialfollow__icon { width: 44px; height: 44px; }
        .socialfollow__deco { display: none; }
        .socialfollow__icons { gap: 12px; }
      }

      /* ===== LINK CARDS / SHOP THE WHISKEY SECTION (Figma node 94:1794) =====
         3 cards with photo bg + dark overlay, eyebrow with rule, title, CTA. */
      .linkcards {
        background: #FCF2E2;
        position: relative;
        padding: clamp(40px, 5vw, 60px) clamp(20px, 5vw, 60px) clamp(64px, 8vw, 120px);
        isolation: isolate;
      }
      .linkcards::before {
        content: '';
        position: absolute; inset: 0;
        background-image: url('//wilderheart.com/cdn/shop/t/7/assets/texture-paper-mirror.jpg?v=119859846192384791821780922737');
        background-size: 1120px auto;
        background-repeat: repeat;
        opacity: 0.35;
        mix-blend-mode: multiply;
        pointer-events: none;
        z-index: 0;
      }
      .linkcards__inner {
        position: relative;
        z-index: 1;
        max-width: 1320px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
      }
      .lcard {
        position: relative;
        min-height: 358px;
        border-radius: 25px;
        padding: 40px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
        isolation: isolate;
      }
      .lcard__bg {
        position: absolute;
        inset: 0;
        z-index: -1;
      }
      .lcard__bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease;
      }
      .lcard:hover .lcard__bg img { transform: scale(1.05); }
      .lcard__bg-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
      }
      .lcard__head {
        display: flex;
        flex-direction: column;
        gap: 32px;
        align-items: flex-start;
      }
      .lcard__eyebrow {
        font-family: var(--font-caption);
        font-weight: 500;
        font-size: 18px;
        line-height: 1.2;
        letter-spacing: -0.01em;
        color: #FAF7EF;
        margin: 0;
        padding-bottom: 16px;
        border-bottom: 2px solid #FAF7EF;
        text-transform: capitalize;
      }
      .lcard__title {
        font-family: var(--font-display);
        font-size: 28px;
        line-height: 36px;
        letter-spacing: -0.01em;
        font-weight: 400;
        text-transform: uppercase;
        color: #FAF7EF;
        margin: 0;
      }
      .lcard__cta {
        align-self: stretch;
        justify-content: space-between;
        width: 100%;
      }

      @media (max-width: 900px) {
        .linkcards__inner { grid-template-columns: 1fr; gap: 16px; max-width: 480px; margin: 0 auto; }
        .lcard { min-height: 280px; padding: 28px; }
        .lcard__title { font-size: 22px; line-height: 28px; }
        .lcard__head { gap: 20px; }
      }

      /* ===== PODCAST PAGE ===== */
      .podcast-page { color: var(--wh-forest); background: var(--wh-cream); }
      .podcast-page section { position: relative; isolation: isolate; }
      .podcast-page section::before {
        content: '';
        position: absolute; inset: 0;
        background-image: url('//wilderheart.com/cdn/shop/t/7/assets/texture-paper-mirror.jpg?v=119859846192384791821780922737');
        background-repeat: repeat;
        background-size: 1120px auto;
        mix-blend-mode: multiply;
        opacity: 0.6;
        pointer-events: none;
        z-index: 0;
      }
      .podcast-page > section > * { position: relative; z-index: 1; }

      /* ----- A. INTRO HERO ----- */
      .pod-intro {
        background: var(--wh-sage);
        padding: clamp(72px, 9vw, 128px) 32px clamp(56px, 7vw, 96px);
        text-align: center;
      }
      .pod-intro__inner { max-width: 780px; margin: 0 auto; }
      .pod-intro__eyebrow {
        font-family: var(--font-caption, var(--font-body));
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: var(--wh-forest);
        opacity: 0.8;
        margin: 0 0 20px;
      }
      .pod-intro__title {
        font-family: var(--font-display);
        font-size: clamp(40px, 5.6vw, 76px);
        line-height: 1.02;
        letter-spacing: 0.005em;
        text-transform: uppercase;
        font-weight: 700;
        margin: 0 0 18px;
        color: var(--wh-forest);
      }
      .pod-intro__sub {
        font-size: 17px;
        line-height: 1.5;
        max-width: 560px;
        margin: 0 auto 32px;
        color: var(--wh-forest);
      }
      .pod-intro__ctas {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        justify-content: center;
      }
      .btn--ghost-dark {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 18px 28px;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        background: transparent;
        color: var(--wh-forest);
        border: 1px solid var(--wh-forest);
        font-family: inherit;
        cursor: pointer;
        transition: background-color 0.18s ease, color 0.18s ease;
      }
      .btn--ghost-dark:hover { background: var(--wh-forest); color: var(--wh-fg); }

      /* ----- B. TRAILER FEATURE ----- */
      .pod-trailer {
        background: var(--wh-cream);
        padding: clamp(56px, 7vw, 96px) 32px clamp(40px, 5vw, 72px);
      }
      .pod-trailer__inner {
        max-width: 720px;
        margin: 0 auto;
      }

      /* ----- POLAROID CARD ----- */
      .pod-card {
        position: relative;
        background: #fff;
        padding: 22px 22px 28px;
        border-radius: 4px;
        box-shadow: 0 14px 32px rgba(31, 42, 36, 0.18), 0 4px 8px rgba(31, 42, 36, 0.08);
        transform: rotate(-1deg);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
      }
      .pod-card:hover {
        transform: rotate(0deg) translateY(-4px);
        box-shadow: 0 20px 40px rgba(31, 42, 36, 0.22), 0 6px 12px rgba(31, 42, 36, 0.10);
      }
      .pod-card--feature {
        padding: 28px 28px 36px;
        transform: rotate(-1.2deg);
      }
      .pod-card__tape {
        position: absolute;
        top: -18px; left: 50%;
        transform: translateX(-50%) rotate(-3deg);
        width: 140px;
        z-index: 2;
        pointer-events: none;
      }
      .pod-card__tape img { width: 100%; height: auto; display: block; }
      .pod-card__badge {
        position: absolute;
        top: 14px; right: 14px;
        background: var(--wh-orange);
        color: var(--wh-fg);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        padding: 6px 10px;
        border-radius: 4px;
        z-index: 3;
      }
      .pod-card__media {
        position: relative;
        display: block;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        background: #2a3324;
        border-radius: 2px;
      }
      .pod-card__media img {
        width: 100%; height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease;
      }
      .pod-card__media:hover img { transform: scale(1.04); }
      .pod-card__play {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 64px; height: 64px;
        border-radius: 50%;
        background: rgba(232, 112, 10, 0.92);
        color: var(--wh-fg);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
        transition: transform 0.25s ease;
      }
      .pod-card__media:hover .pod-card__play { transform: translate(-50%, -50%) scale(1.08); }
      .pod-card__play svg { width: 24px; height: 24px; margin-left: 3px; }

      .pod-card__strap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin: 18px 0 10px;
        font-family: var(--font-caption, var(--font-body));
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--wh-forest);
        opacity: 0.78;
      }
      .pod-card__title {
        font-family: var(--font-display);
        font-size: clamp(20px, 1.9vw, 26px);
        line-height: 1.15;
        letter-spacing: 0.01em;
        text-transform: uppercase;
        font-weight: 700;
        margin: 0 0 10px;
        color: var(--wh-forest);
      }
      .pod-card--feature .pod-card__title {
        font-size: clamp(28px, 2.6vw, 38px);
      }
      .pod-card__desc {
        font-size: 14px;
        line-height: 1.55;
        color: var(--wh-forest);
        opacity: 0.85;
        margin: 0 0 16px;
      }
      .pod-card__tags {
        list-style: none;
        padding: 0;
        margin: 12px 0 16px;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .pod-card__tags li {
        font-family: var(--font-caption, var(--font-body));
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        padding: 5px 10px;
        border: 1px solid rgba(31, 42, 36, 0.18);
        border-radius: 999px;
        color: var(--wh-forest);
      }
      .pod-card__cta {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-top: 8px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--wh-orange);
      }
      .pod-card__cta svg { width: 14px; height: 14px; flex-shrink: 0; }
      .pod-card__cta:hover { color: #d06208; }

      /* ----- C. EPISODE GRID ----- */
      .pod-grid {
        background: var(--wh-cream);
        padding: clamp(64px, 7vw, 96px) 32px clamp(72px, 8vw, 112px);
      }
      .pod-grid__inner { max-width: 1240px; margin: 0 auto; }
      .pod-grid__head { text-align: center; margin: 0 auto clamp(40px, 5vw, 64px); max-width: 720px; }
      .pod-grid__title {
        font-family: var(--font-display);
        font-size: clamp(36px, 4.4vw, 56px);
        line-height: 1.05;
        letter-spacing: 0.005em;
        text-transform: uppercase;
        font-weight: 700;
        margin: 0 0 14px;
        color: var(--wh-forest);
      }
      .pod-grid__title span { color: var(--wh-orange); }
      .pod-grid__sub {
        font-size: 16px;
        line-height: 1.55;
        color: var(--wh-forest);
        opacity: 0.85;
        margin: 0;
      }
      .pod-grid__cards {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(24px, 3vw, 40px);
      }
      .pod-grid__cards .pod-card:nth-child(odd) { transform: rotate(-0.8deg); }
      .pod-grid__cards .pod-card:nth-child(even) { transform: rotate(0.8deg); }
      .pod-grid__cards .pod-card:nth-child(odd):hover,
      .pod-grid__cards .pod-card:nth-child(even):hover { transform: rotate(0deg) translateY(-4px); }

      /* ----- D. NEXT DROP COUNTDOWN ----- */
      .pod-next {
        background: var(--wh-forest);
        color: var(--wh-fg);
        padding: clamp(64px, 7vw, 112px) 32px clamp(72px, 8vw, 120px);
        text-align: center;
      }
      .pod-next::before {
        opacity: 0.3;
        mix-blend-mode: screen;
      }
      .pod-next__inner { max-width: 760px; margin: 0 auto; }
      .pod-next__eyebrow {
        font-family: var(--font-caption, var(--font-body));
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: var(--wh-orange);
        margin: 0 0 18px;
      }
      .pod-next__title {
        font-family: var(--font-display);
        font-size: clamp(40px, 5.4vw, 68px);
        line-height: 1.02;
        letter-spacing: 0.005em;
        text-transform: uppercase;
        font-weight: 700;
        margin: 0 0 14px;
        color: var(--wh-fg);
      }
      .pod-next__sub {
        font-size: 16px;
        line-height: 1.55;
        max-width: 480px;
        margin: 0 auto 36px;
        color: var(--wh-fg);
        opacity: 0.85;
      }
      .pod-counter {
        list-style: none;
        padding: 0;
        margin: 0 auto 36px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
        max-width: 520px;
      }
      .pod-counter li {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 10px;
        padding: 18px 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
      }
      .pod-counter__num {
        font-family: var(--font-display);
        font-size: clamp(32px, 4vw, 48px);
        font-weight: 700;
        line-height: 1;
        color: var(--wh-orange);
        font-variant-numeric: tabular-nums;
      }
      .pod-counter__lbl {
        font-family: var(--font-caption, var(--font-body));
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: var(--wh-fg);
        opacity: 0.85;
      }

      /* ----- E. STAY WILD SOCIAL ----- */
      .pod-social {
        background: var(--wh-cream);
        padding: clamp(56px, 6vw, 88px) 32px clamp(56px, 6vw, 88px);
        text-align: center;
      }
      .pod-social__inner { max-width: 640px; margin: 0 auto; }
      .pod-social__title {
        font-family: var(--font-display);
        font-size: clamp(32px, 3.8vw, 48px);
        line-height: 1.05;
        letter-spacing: 0.005em;
        text-transform: uppercase;
        font-weight: 700;
        margin: 0 0 14px;
        color: var(--wh-forest);
      }
      .pod-social__sub {
        font-size: 15px;
        line-height: 1.55;
        color: var(--wh-forest);
        opacity: 0.85;
        margin: 0 0 28px;
      }
      .pod-social__row {
        display: flex;
        justify-content: center;
        gap: 14px;
        flex-wrap: wrap;
      }
      .pod-social__row a {
        width: 44px; height: 44px;
        border-radius: 50%;
        border: 1px solid rgba(31, 42, 36, 0.22);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--wh-forest);
        transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
      }
      .pod-social__row a:hover {
        background: var(--wh-forest);
        color: var(--wh-fg);
      }
      .pod-social__row svg { width: 18px; height: 18px; }

      /* ----- F. SIGNUP ----- */
      .pod-signup {
        background: var(--wh-sage);
        padding: clamp(64px, 7vw, 104px) 32px clamp(72px, 8vw, 120px);
      }
      .pod-signup__inner {
        max-width: 580px;
        margin: 0 auto;
      }
      .pod-signup__head { text-align: center; margin-bottom: 36px; }
      .pod-signup__title {
        font-family: var(--font-display);
        font-size: clamp(36px, 4.4vw, 56px);
        line-height: 1.05;
        text-transform: uppercase;
        font-weight: 700;
        margin: 0 0 12px;
        color: var(--wh-forest);
      }
      .pod-signup__sub {
        font-size: 15px;
        line-height: 1.55;
        margin: 0;
        color: var(--wh-forest);
        opacity: 0.85;
      }
      .pod-form {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .pod-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
      .pod-form__field { display: flex; flex-direction: column; gap: 6px; }
      .pod-form__field span {
        font-family: var(--font-caption, var(--font-body));
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--wh-forest);
        opacity: 0.85;
      }
      .pod-form__field input,
      .pod-form__field select {
        width: 100%;
        padding: 14px 16px;
        border: 1px solid rgba(31, 42, 36, 0.28);
        border-radius: 8px;
        font-family: inherit;
        font-size: 15px;
        background: rgba(250, 247, 239, 0.85);
        color: var(--wh-forest);
        transition: border-color 0.18s ease, background-color 0.18s ease;
      }
      .pod-form__field input:focus,
      .pod-form__field select:focus {
        outline: none;
        border-color: var(--wh-orange);
        background: var(--wh-cream);
      }
      .pod-form__submit { width: 100%; justify-content: center; margin-top: 8px; }
      .pod-form__error {
        font-size: 13px;
        color: #b04030;
        margin: 0;
      }
      .pod-form__success { text-align: center; padding: 24px; }
      .pod-form__success h3 {
        font-family: var(--font-display);
        font-size: 32px;
        text-transform: uppercase;
        margin: 0 0 12px;
        color: var(--wh-forest);
      }
      .pod-form__success p {
        font-size: 15px;
        line-height: 1.55;
        margin: 0;
        color: var(--wh-forest);
        opacity: 0.85;
      }

      /* ----- MOBILE ----- */
      @media (max-width: 900px) {
        .pod-grid__cards { grid-template-columns: 1fr; gap: 36px; }
        .pod-grid__cards .pod-card,
        .pod-grid__cards .pod-card:nth-child(odd),
        .pod-grid__cards .pod-card:nth-child(even) { transform: rotate(0deg); }
        .pod-counter { grid-template-columns: repeat(4, 1fr); gap: 8px; }
        .pod-counter li { padding: 14px 4px; }
        .pod-card__strap { font-size: 10px; }
      }
      @media (max-width: 600px) {
        .pod-form__row { grid-template-columns: 1fr; }
        .pod-counter { grid-template-columns: repeat(2, 1fr); }
        .pod-card { padding: 16px 16px 22px; }
        .pod-card--feature { padding: 22px 22px 30px; }
      }

      /* ===== "NOTHING TO HIDE" BAND ===== */
      .band {
        background: var(--wh-sage);
        color: var(--wh-forest);
        padding: 0 32px 96px;
        position: relative;
        overflow: visible;
      }
      .band__divider {
        max-width: 1440px;
        margin: 0 auto;
        position: relative;
        padding-top: 48px;
        padding-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .band__rule {
        flex: 1;
        height: 1px;
        background: var(--wh-forest);
        max-width: 720px;
      }
      .band__serial {
        font-family: var(--font-body);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.18em;
        padding: 0 16px;
        color: var(--wh-forest);
      }
      .band__script {
        font-family: var(--font-script);
        font-size: 28px;
        color: var(--wh-forest);
        position: absolute;
        right: 360px;
        top: 32px;
        transform: rotate(-3deg);
      }
      .band__inner { max-width: 1440px; margin: 0 auto; position: relative; padding-top: 16px; }
      .band__eyebrow {
        font-family: var(--font-script);
        font-style: italic;
        font-size: 22px;
        margin: 0 0 12px;
        position: relative;
        display: inline-block;
        padding-bottom: 6px;
      }
      .band__eyebrow::after {
        content: '';
        position: absolute; left: 0; bottom: 0;
        width: 60%; height: 1px; background: var(--wh-forest);
      }
      .band__title {
        font-family: var(--font-display);
        font-size: clamp(56px, 9vw, 132px);
        line-height: 0.92;
        margin: 0 0 24px;
        text-transform: uppercase;
        font-weight: 400;
      }
      .band__title-orange { color: var(--wh-orange); }
      .band__body { max-width: 420px; margin: 0; font-size: 14px; }

      /* ===== FLOATING ILLUSTRATIONS ===== */
      /* container fills the band; individual illos use negative top to spill into the hero above */
      .illos { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
      .illo {
        position: absolute;
        display: block;
      }
      .illo img { display: block; width: 100%; height: auto; }
      /* Compass + canteen span the hero/band boundary (negative top breaks out of the band) */
      .illo--compass { top: -120px; right: 120px; width: 200px; pointer-events: auto; cursor: pointer; touch-action: manipulation; }
      .illo--canteen { top: -100px; right: 30px; width: 110px; }
      /* Bobbers + binoculars sit inside the band */
      .illo--bobbers { top: 60px; right: 320px; width: 150px; transform: rotate(-2deg); }
      .illo--binoculars { top: 120px; right: 110px; width: 240px; }

      @media (max-width: 900px) {
        /* Keep the compass visible on mobile — it's the trigger for the
           Trail Run easter-egg mini-game. Hide the rest of the band illos. */
        .illo--canteen, .illo--bobber, .illo--bobbers, .illo--binoculars { display: none; }
        .illo--compass {
          top: -50px;
          right: 12px;
          width: clamp(80px, 22vw, 120px);
          z-index: 4;
        }
        .band__script { display: none; }
        .cards { grid-template-columns: 1fr; }
        .card__image { height: 360px; max-width: 280px; }
      }

      /* 2026-10-21 (Alex): the nav lines up with the page body (1440 container, 60px gutter easing to 5vw) */
      @media (min-width: 901px) {
        .site-nav { padding-left: clamp(24px, 5vw, 60px); padding-right: clamp(24px, 5vw, 60px); }
        .site-nav__inner { max-width: 1320px; }
      }
      /* 2026-10-21 (Alex): the Basecamp launcher (Rediem) in brand orange; Rediem sets #E8700A inline */
      /* Neilvard has one weight: Rediem asks for 700, which fakes a heavy bold. Real weight, smaller type, tighter pill. */
      #ripplFectButton.ripple-reward-btn { background: #BC5C12 !important; color: #FAF7EF !important; font-family: 'Neilvard Semibold One', 'Neilvard', Impact, sans-serif !important;
        font-weight: 400 !important; font-size: 15px !important; letter-spacing: .03em !important; line-height: 1 !important; padding: 0 22px !important; min-height: 0 !important; height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
        border-radius: 6px !important; box-shadow: 0 8px 18px rgba(48,45,46,.22) !important; }
      #ripplFectButton.ripple-reward-btn * { font-weight: 400 !important; font-size: inherit !important; letter-spacing: inherit !important; }
      #ripplFectButton.ripple-reward-btn:hover { background: #A64F0C !important; }
      /* 2026-10-23 (Alex): the launcher wears the Cask card's gold edge, with a faint glint of light travelling round it; on hover it opens and the shine gets brighter */
      @property --wh-glint { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
      @keyframes wh-glint { to { --wh-glint: 360deg; } }
      #ripplFectButton.ripple-reward-btn { position: fixed; isolation: isolate; }
      #ripplFectButton.ripple-reward-btn::before, #ripplFectButton.ripple-reward-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 2;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
      /* the gold edge itself (same stops as the Cask card) */
      #ripplFectButton.ripple-reward-btn::before { background: linear-gradient(135deg, #9C7A3E 0%, #E6CB8E 24%, #B8914F 48%, #EED7A1 70%, #A07D40 100%); }
      /* the travelling light: a narrow bright arc that circles the edge */
      #ripplFectButton.ripple-reward-btn::after { opacity: .55; transition: opacity .35s ease;
        background: conic-gradient(from var(--wh-glint), transparent 0deg, transparent 300deg, rgba(255,247,222,.0) 318deg, rgba(255,247,222,.95) 340deg, rgba(255,247,222,0) 360deg);
        animation: wh-glint 5.5s linear infinite; }
      #ripplFectButton.ripple-reward-btn:hover::after, #ripplFectButton.ripple-reward-btn:focus-visible::after { opacity: 1; animation-duration: 2.2s;
        background: conic-gradient(from var(--wh-glint), transparent 0deg, transparent 250deg, rgba(255,247,222,0) 280deg, #FFF8E1 330deg, rgba(255,247,222,0) 360deg); }
      #ripplFectButton.ripple-reward-btn:hover, #ripplFectButton.ripple-reward-btn:focus-visible { box-shadow: 0 0 18px rgba(230,203,142,.35), 0 8px 18px rgba(0,0,0,.28) !important; }
      @media (prefers-reduced-motion: reduce) { #ripplFectButton.ripple-reward-btn::after { animation: none; opacity: 0; } }
      /* 2026-10-23 (Alex): the badge icon is a solid cream tent with an orange pennant (reads at 44px, unlike the tent illustration) */
      #ripplFectButton .launchUIButton { background: url('//wilderheart.com/cdn/shop/t/7/assets/wh-bc-tent-flag.svg?v=138258708348431787151792756210?v=3') center / contain no-repeat; }
      #ripplFectButton .launchUIButton img { opacity: 0 !important; }
      /* 2026-10-23 (Alex): desktop matches the phone badge (charcoal, cream ring, tent) and opens into "Join Basecamp" only on hover */
      @media (min-width: 901px) {
        #ripplFectButton.ripple-reward-btn { min-width: 52px !important; height: 52px !important; padding: 0 0 0 52px !important; border-radius: 26px !important; overflow: hidden !important;
          background: #232222 !important; color: #FAF7EF !important; box-shadow: 0 8px 18px rgba(0,0,0,.28) !important; justify-content: flex-start !important;
          transition: padding .35s cubic-bezier(.2,.8,.2,1), background-color .2s ease !important; }
        #ripplFectButton .btn-text { display: inline-block !important; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width .35s cubic-bezier(.2,.8,.2,1), opacity .2s ease; }
        #ripplFectButton.ripple-reward-btn:hover, #ripplFectButton.ripple-reward-btn:focus-visible { padding: 0 22px 0 52px !important; background: #3A3836 !important; }
        #ripplFectButton.ripple-reward-btn:hover .btn-text, #ripplFectButton.ripple-reward-btn:focus-visible .btn-text { max-width: 180px; opacity: 1; }
        #ripplFectButton .launchUIButton { left: 26px !important; top: 50% !important; width: auto !important; height: auto !important; transform: translate(-50%, calc(-50% - 1.5px)); z-index: 1 !important; }
        #ripplFectButton .launchUIButton img { display: block; width: 32px !important; height: 32px !important; }
      }
      /* 2026-10-23 (Alex): on phones the launcher is only ever a quiet tent badge (charcoal disc, thin cream ring) so it never competes with the orange buttons; desktop keeps the full pill */
      @media (max-width: 900px) {
        #ripplFectButton.ripple-reward-btn { padding: 0 !important; min-width: 44px !important; width: 44px !important; height: 44px !important; border-radius: 50% !important;
          background: #232222 !important; box-shadow: 0 6px 14px rgba(0,0,0,.28) !important; right: 16px !important; transition: bottom .25s ease !important; }
        #ripplFectButton.ripple-reward-btn:hover { background: #3A3836 !important; }
        #ripplFectButton .btn-text { display: none !important; }
        #ripplFectButton .launchUIButton { left: 50% !important; top: 50% !important; width: auto !important; height: auto !important; transform: translate(-50%, calc(-50% - 1.5px)); z-index: 1 !important; }
        #ripplFectButton .launchUIButton img { display: block; width: 28px !important; height: 28px !important; }
        /* 2026-10-22 (Alex): no Basecamp launcher on phone product pages (the sticky add bar owns the bottom there) */
        html body.is-product #ripplFectButton#ripplFectButton.ripple-reward-btn.ripple-reward-btn { display: none !important; visibility: hidden !important; }
      }
      /* ===== MAIN content fallback for non-home pages ===== */
      main.fallback { max-width: 1100px; margin: 0 auto; padding: 48px 24px 96px; }

      @media (max-width: 900px) {
        .announce { padding: 5px 0; font-size: 14px; }
        .site-nav { padding: 14px 16px; }
        /* hamburger (left) | wordmark (centred) | account+cart (right) */
        .site-nav__inner { grid-template-columns: 1fr auto 1fr; gap: 12px; }
        .site-nav__links { display: none; }
        .site-nav__menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; justify-self: start; }
        .site-nav__right { justify-self: end; }
        .site-nav__icon-btn { width: 32px; height: 32px; }
        /* The 1fr | auto | 1fr grid centres the wordmark only while both side
           columns fit. The right group (account + "Cart" + badge, ~127px) is wider
           than the hamburger, so it pushed the wordmark off-centre at 375 and past
           the viewport at 320 (page scrolled sideways to 363px). Tighten the group
           and give the cart a 44px-tall tap target. (2026-10-12 responsive QA) */
        .site-nav__right { gap: 12px; }
        .site-nav__cart { min-height: 44px; }
        .site-nav__menu-btn { height: 44px; }
        .wordmark__main { font-size: 21.5px; }
        .wordmark__top, .wordmark__btm { font-size: 7px; }
        /* Mobile menu (.site-nav__drawer): the full-screen trail-map menu, styled in
           sections/header.liquid since 2026-10-18 (was a 4-link dropdown here). */

        /* Fit the hero to one screen (viewport minus nav + ticker), centre the
           stack so there's breathing room above the bottle, and cap the bottle
           to a share of viewport height so it can't push content off-screen. */
        .hero { height: calc(100svh - 116px); min-height: 520px; }
        .hero__inner {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: clamp(16px, 4svh, 40px);    /* gap under the bottle -> heading; tighter on short screens */
          padding: 28px 0;                 /* horizontal gutter is on .hero */
          height: 100%;
        }
        .hero__copy { text-align: center; max-width: none; flex: 0 0 auto; }
        .hero__title { font-size: clamp(30px, 8.5vw, 50px); }
        .hero__body { font-size: 16px; margin: 0 auto 20px; }
        .hero__ctas { margin-bottom: 24px; justify-content: center; }
        .hero__rating {
          flex-wrap: wrap;
          gap: 12px;
          font-size: 13px;
          justify-content: center;
        }
        /* Phones: the bottle + full copy don't fit one screen. Before, the hero
           was a fixed 100svh and the img kept its own max-height, so it spilled
           over the headline (39px at 375x812, 73px at 320x640, where it also hit
           the wordmark). Now the bottle takes the height the copy leaves
           (--hero-copy-h and --hero-head-offset are measured by the script in
           templates/index.liquid), capped at the old min(340px, 40vh) and never
           below 180px; when even 180px doesn't fit (short phones) the hero grows
           past the fold instead of overlapping. (2026-10-12 responsive QA) */
        html body:has(.hero__video) .hero { height: auto; min-height: 100svh; }
        .hero__inner { height: auto; min-height: calc(100svh - var(--hero-head-offset, 150px)); }
        .hero__bottle {
          order: -1;
          margin-top: 0;
          min-height: 0;
          flex: 0 0 auto;
          width: 100%;
          height: auto;
        }
        .hero__bottle img {
          width: auto;
          max-width: 88%;
          height: clamp(180px, calc(100svh - var(--hero-head-offset, 150px) - 56px - var(--hero-copy-h, 460px) - 40px), min(340px, 40vh));
          max-height: none;
          object-fit: contain;
        }

        .band { padding: 48px 20px 64px; }
      }

      /* Phones: swap the "Cart" word for a bag icon with the count on its corner,
         and size the wordmark to the space actually left (32px nav padding +
         2x8px gaps + two 78px side columns = 204px), so the wordmark stays
         centred and nothing spills past 320px. (2026-10-12 responsive QA) */
      @media (max-width: 480px) {
        .site-nav__inner { gap: 8px; }
        .wordmark__svg { width: clamp(108px, calc(100vw - 204px), 160px); }
        .site-nav__right { gap: 4px; }
        .site-nav__icon-btn { width: 34px; height: 44px; }
        .site-nav__cart { position: relative; gap: 0; width: 40px; justify-content: center; }
        .site-nav__cart .wh-card-2-title {
          position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
          overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
        }
        .site-nav__cart-icon { display: block; width: 22px; height: 22px; }
        .site-nav__cart-badge { position: absolute; top: 5px; right: 0; width: 17px; height: 17px; font-size: 10px; }
      }

      /* ===== TRAIL RUN — hidden mini-game ===== */
      #wh-game { display: none; position: fixed; inset: 0; z-index: 9999; background: #14201a; color: var(--wh-fg); font-family: var(--font-body); align-items: safe center; justify-content: center; padding: 24px; overflow-y: auto; overscroll-behavior: contain; }
      /* Pine-tree silhouette vignette on the left/right edges of the modal,
         echoing the reference frame around the play cabinet. */
      #wh-game::before, #wh-game::after {
        content: '';
        position: absolute; top: 0; bottom: 0; width: clamp(80px, 12vw, 180px);
        pointer-events: none;
        background:
          radial-gradient(20px 50px at 30% 30%, #0a1410 60%, transparent 62%),
          radial-gradient(24px 60px at 65% 50%, #0a1410 60%, transparent 62%),
          radial-gradient(18px 44px at 25% 75%, #0a1410 60%, transparent 62%),
          radial-gradient(22px 56px at 60% 90%, #0a1410 60%, transparent 62%),
          linear-gradient(90deg, #0a1410 0%, transparent 100%);
        opacity: 0.85;
      }
      #wh-game::before { left: 0; }
      #wh-game::after { right: 0; transform: scaleX(-1); }
      #wh-game[open] { display: flex; }
      #wh-game * { box-sizing: border-box; }
      #wh-game [hidden] { display: none !important; }
      .wh-game__inner { position: relative; z-index: 1; width: min(96vw, 1100px); display: flex; flex-direction: column; align-items: center; gap: 18px; }
      .wh-game__close { position: absolute; top: -8px; right: 0; background: transparent; border: 1px solid rgba(166,138,59,0.5); color: #c9a878; width: 32px; height: 32px; cursor: pointer; font-size: 18px; line-height: 1; border-radius: 4px; z-index: 2; }
      .wh-game__close:hover { background: var(--wh-orange); border-color: var(--wh-orange); color: var(--wh-fg); }

      /* TRAIL RUN brand bar */
      .wh-game__brand {
        font-family: var(--font-display);
        font-size: clamp(20px, 2.2vw, 30px);
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #d6b87a;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 18px;
        text-shadow: 0 2px 0 rgba(0,0,0,0.4);
      }
      .wh-game__brand-mark { color: #a68a3b; font-size: 0.7em; opacity: 0.85; }

      /* The cabinet — gold-edged dark panel containing HUD + canvas + key strip */
      .wh-game__cabinet {
        position: relative;
        width: 100%;
        background: #1a2620;
        border: 2px solid #4a3a20;
        border-radius: 6px;
        padding: 10px;
        box-shadow:
          0 0 0 1px rgba(166,138,59,0.35) inset,
          0 24px 60px rgba(0,0,0,0.6);
      }

      /* HUD strip — orange numerals, dark bg, sits at top of cabinet */
      .wh-game__hud {
        width: 100%;
        background: #14201a;
        border: 1px solid rgba(166,138,59,0.4);
        border-radius: 4px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-family: var(--font-display);
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: 0.16em;
        color: #d6b87a;
        padding: 10px 16px;
        margin-bottom: 10px;
      }
      .wh-game__hud-stat { display: flex; gap: 10px; align-items: baseline; }
      .wh-game__hud-stat span:last-child { color: var(--wh-orange); font-size: 18px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }

      .wh-game__canvas-wrap {
        width: 100%;
        aspect-ratio: 16 / 9;
        background: #14201a;
        border: 1px solid rgba(166,138,59,0.35);
        border-radius: 3px;
        position: relative;
        overflow: hidden;
      }
      .wh-game__canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }

      /* Bottom key-hint strip styled like the reference (boxed pixel keys) */
      .wh-game__keys {
        margin-top: 10px;
        background: #14201a;
        border: 1px solid rgba(166,138,59,0.4);
        border-radius: 4px;
        padding: 10px 16px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px 14px;
        font-family: var(--font-display);
        font-size: 12px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: #d6b87a;
      }
      .wh-key {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        height: 26px;
        padding: 0 8px;
        border: 1.5px solid #c9a878;
        border-radius: 3px;
        color: #c9a878;
        font-family: var(--font-display);
        font-size: 11px;
        letter-spacing: 0.12em;
      }
      .wh-key__label { color: #d6b87a; }
      .wh-key__sep { color: rgba(166,138,59,0.5); }

      /* Mobile touch buttons (hidden on desktop, shown on mobile via @media) */
      .wh-game__touch { display: none; }
      .wh-game__touch-btn {
        appearance: none;
        -webkit-appearance: none;
        background: #14201a;
        border: 1.5px solid #c9a878;
        border-radius: 6px;
        padding: 14px 12px;
        color: #d6b87a;
        font-family: var(--font-display);
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.16em;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        transition: background 80ms linear, color 80ms linear, border-color 80ms linear;
      }
      .wh-game__touch-btn:active,
      .wh-game__touch-btn:focus-visible {
        background: var(--wh-orange);
        border-color: var(--wh-orange);
        color: var(--wh-fg);
        outline: none;
      }
      .wh-game__touch-icon {
        font-size: 26px;
        line-height: 1;
        color: var(--wh-orange);
      }
      .wh-game__touch-btn:active .wh-game__touch-icon,
      .wh-game__touch-btn:focus-visible .wh-game__touch-icon { color: var(--wh-fg); }

      /* Game on mobile: hide keyboard hints, show touch buttons, tighten the
         cabinet so the 16:9 canvas takes most of the available space. */
      @media (max-width: 900px) {
        #wh-game { padding: 12px; }
        #wh-game::before, #wh-game::after { display: none; }
        .wh-game__inner { width: 100%; gap: 10px; }
        .wh-game__close { top: 4px; right: 4px; width: 36px; height: 36px; font-size: 20px; }
        .wh-game__brand { font-size: 16px; letter-spacing: 0.16em; gap: 10px; }
        .wh-game__brand-mark { font-size: 0.6em; }
        .wh-game__cabinet { padding: 6px; border-width: 2px; }
        .wh-game__hud { padding: 8px 12px; font-size: 11px; letter-spacing: 0.12em; margin-bottom: 8px; gap: 6px; }
        .wh-game__hud-stat { gap: 6px; }
        .wh-game__hud-stat span:last-child { font-size: 15px; }
        .wh-game__keys { display: none; }
        .wh-game__touch {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 10px;
          margin-top: 10px;
          padding: 0;
          background: transparent;
          border: 0;
        }
        .wh-game__title h2 { font-size: 40px; }
        .wh-game__title p { font-size: 13px; max-width: 280px; }
        .wh-game__title .wh-game__hint { display: none; }   /* keyboard hints inside title screen */
        .wh-game__btn { font-size: 14px; padding: 12px 22px; }
        .wh-game__over { padding: 16px; gap: 6px; }
        .wh-game__over h3 { font-size: 26px; }
        .wh-game__name { flex-direction: column; gap: 6px; align-items: stretch; width: 100%; max-width: 240px; }
        .wh-game__name input { min-width: 0; width: 100%; padding: 10px 12px; }
      }

      /* Inside-canvas overlays inherit positioning, kept for backward compat */
      .wh-game__hint { font-size: 12px; color: var(--wh-muted); letter-spacing: 0.08em; text-transform: uppercase; }
      .wh-game__hint kbd { background: rgba(255,255,255,0.1); padding: 2px 8px; border-radius: 3px; border: 1px solid var(--wh-rule); font-family: var(--font-body); font-size: 11px; margin: 0 2px; }

      .wh-game__title { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 32px; text-align: center; background: linear-gradient(180deg, rgba(31,42,36,0.4), rgba(31,42,36,0.92)); }
      .wh-game__title h2 { font-family: var(--font-display); font-size: clamp(36px, 6vw, 72px); margin: 0; text-transform: uppercase; letter-spacing: 0.02em; }
      .wh-game__title h2 span { color: var(--wh-orange); }
      .wh-game__title p { margin: 0; max-width: 480px; font-size: 14px; color: var(--wh-muted); }
      .wh-game__btn { background: var(--wh-orange); color: var(--wh-fg); border: 0; padding: 14px 28px; font-family: var(--font-display); font-size: 16px; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; }
      .wh-game__btn:hover { background: #d06208; }
      .wh-game__btn--ghost { background: transparent; border: 1px solid var(--wh-fg); color: var(--wh-fg); }
      .wh-game__btn--ghost:hover { background: var(--wh-fg); color: var(--wh-forest); }

      .wh-game__over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; background: linear-gradient(180deg, rgba(31,42,36,0.6), rgba(31,42,36,0.96)); overflow: auto; }
      .wh-game__over h3 { font-family: var(--font-display); font-size: 36px; margin: 0; text-transform: uppercase; }
      .wh-game__over h3 span { color: var(--wh-orange); }
      .wh-game__score-line { font-size: 14px; color: var(--wh-muted); letter-spacing: 0.06em; text-transform: uppercase; }
      .wh-game__score-line strong { color: var(--wh-fg); }
      .wh-game__name { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
      .wh-game__name input { background: transparent; border: 1px solid var(--wh-rule); color: var(--wh-fg); padding: 10px 14px; font: inherit; font-size: 14px; min-width: 200px; text-align: center; letter-spacing: 0.16em; text-transform: uppercase; }
      .wh-game__name input:focus { outline: none; border-color: var(--wh-orange); }
      .wh-game__leaderboard { width: 100%; max-width: 360px; margin-top: 8px; font-size: 13px; }
      .wh-game__leaderboard h4 { font-family: var(--font-display); font-size: 14px; text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 8px; text-align: center; color: var(--wh-orange); }
      .wh-game__leaderboard ol { list-style: none; padding: 0; margin: 0; }
      .wh-game__leaderboard li { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; padding: 6px 12px; border-bottom: 1px solid var(--wh-rule); align-items: baseline; }
      .wh-game__leaderboard li.is-you { background: rgba(232, 112, 10, 0.18); }
      .wh-game__leaderboard li span:nth-child(2) { letter-spacing: 0.16em; text-transform: uppercase; }
      .wh-game__leaderboard li span:last-child { color: var(--wh-orange); font-weight: 700; font-variant-numeric: tabular-nums; }
      .wh-game__actions { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }

      .wh-wheel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; gap: 18px; background: linear-gradient(180deg, rgba(31,42,36,0.7), rgba(31,42,36,0.97)); }
      .wh-wheel h3 { font-family: var(--font-display); font-size: 32px; margin: 0; text-transform: uppercase; }
      .wh-wheel h3 span { color: var(--wh-orange); }
      .wh-wheel__stage { position: relative; width: min(60vh, 360px); aspect-ratio: 1; }
      .wh-wheel__svg { width: 100%; height: 100%; display: block; transition: transform 5s cubic-bezier(0.18, 0.62, 0.18, 1); }
      .wh-wheel__pointer { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 24px solid var(--wh-orange); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); z-index: 2; }
      .wh-wheel__hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 28px; height: 28px; background: var(--wh-orange); border-radius: 50%; border: 4px solid var(--wh-cream); }
      .wh-prize { font-family: var(--font-display); text-transform: uppercase; font-size: 22px; letter-spacing: 0.04em; padding: 16px 24px; border: 1px solid var(--wh-orange); color: var(--wh-orange); min-width: 280px; text-align: center; }
      .wh-prize small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 12px; letter-spacing: 0.08em; color: var(--wh-muted); margin-top: 6px; text-transform: uppercase; }

      /* ====================================================================
         EDITOR OVERRIDES (Wilder Heart home page, 2026-05-27)
         Pass 1 (Changes_1.rtf) + Pass 2 (Changes 2.rtf) + Pass 3 (Changes 3.rtf).
         Edit-time viewports varied (1673x961 → 1836x945); values are raw px
         scoped to wide-desktop (≥1100px) only. Pass 3 supersedes earlier
         pass values where the same selector appears.
         ==================================================================== */
      @media (min-width: 1100px) {
        /* B1 fish illo (story card 03 decoration) */
        .storydeco--fish { left: 277px; top: -32px; width: 304px; height: 319px; }
        /* B15 (pass 3) tackle illo (story card 03) — minor renudge from pass 2 (73,-72) */
        .storydeco--tackle { left: 66px; top: -73px; width: 216px; height: 221px; }
        /* B9 feathers illo (story card 01) — pass 2 added explicit size */
        .storydeco--feathers { left: 461px; top: -60px; width: 299px; height: 255px; }
        /* B14 (pass 3) lure illo — moved + resized from pass 2 (511,131 no size) */
        .storydeco--lure { left: 490px; top: 99px; width: 114px; height: 253px; }

        /* B3 .story__stage move REVERTED 2026-05-27 at user request — Pete
           moved the whole stage container by mistake, which broke the
           scroll-driven storycard animation (cards 02/03 went grey) and
           pushed the page into horizontal overflow. Image-level moves are
           kept; only the stage-wrapper move is gone. */

        /* B5 card 03 main media — Pass 5 (Changes 5 screenshots): Pete asked to swap the image AND "move it to the right".
           Exact X wasn't captured in the export so estimating (0px, -24px) — shifts ~233px right of pass-2's heavy-left nudge.
           Fine-tune in editor and re-export if this isn't where Pete had it. */
        .story__stage > article:nth-of-type(3) .storycard__media-main { transform: translate(0px, -24px); }
        /* B7 card 02 (text-right) main media — pass 2 updated translate + size.
           X -85→-14 (2026-06-26): left page-inset now 280px, matching slide 01's right inset. */
        .storycard--text-right .storycard__media-main { transform: translate(-14px, 226px); width: 561px; height: 522px; }
        /* B8 card 02 (text-right) top overlay — reduced 400x228 -> 320x182 to match slide 01's overlay scale (left nudged to keep it centered in place).
           top -2 -> 68 (2026-07-02, user): bottom edge now overlaps the main image's top (y 226) by ~24px so the small photo reads as resting on the big one (overlay is z2 + shadow). */
        .storycard--text-right .storycard__overlay--top { left: 179px; top: 68px; right: auto; width: 320px; height: 182px; }
        /* B12 card 01 main media — Pass 5 (Changes 5.rtf, B7) supersedes pass-4 (39,-27), pass-3 (11,-1), pass-2 (-3,-17). */
        .story__stage > article:nth-of-type(1) .storycard__media-main { transform: translate(9px, -31px); }
        /* B13 (pass 3) card 03 bottom overlay — repositioned from pass 2 (-269,510) */
        .storycard__overlay--bottom { left: -267px; top: 468px; right: auto; bottom: auto; width: 402px; height: 230px; }
        /* B33 card 01 top overlay — pass 2 NEW; .text-left .overlay--top only matches card 01 (card 03 has --bottom).
           Bottom-anchored (was top:541px) so it stays glued to the main image's lower-left at any window height;
           the fixed top px detached and fell off-screen once the media collapsed to its 456px min-height (2026-06-26). */
        .storycard--text-left .storycard__overlay--top { left: -83px; bottom: 2px; top: auto; right: auto; width: 319px; height: 182px; }

        /* B16 (pass 3) basecamp tent/coords corner — repositioned from pass 2 (58,-1).
           Keep right/bottom=0 fill or the inner tent + coords lose their container box. */
        .basecamp__corner { left: 3px; top: -2px; }

        /* B27 quote bg overlay — REVERTED at user request 2026-05-27.
           Original inset:0 position restored (no editor override applied). */
        /* B26 quote fish illo */
        .quote__fish > img { transform: translate(0, 20px); width: 319px; height: 350px; }
        /* B28 quote hero bg image */
        .quote__bg > img, .quote__bg > picture > img { transform: translate(0, 2px); }
        /* B32 quote serial — was bottom/right anchored, now top-left */
        .quote__serial { left: 922px; top: 801px; right: auto; bottom: auto; }

        /* B29 binoculars in socialfollow deco */
        .socialfollow__deco-binoculars { left: 161px; top: 50px; }
        /* B30 compass in socialfollow deco — explicit size; keep the centred-rotate transform */
        .socialfollow__deco-compass { left: 157px; top: 118px; width: 203px; height: 236px; }
        /* B31 socialfollow deco wrapper — was clamp top/right, now absolute left/top */
        .socialfollow__deco { left: 832px; top: -80px; right: auto; }

        /* B90/B91/B92 (pass 3) podshow play button icons — sized 62x62 across all 3 cards,
           replacing pass-2 card-1-only 67x62. */
        .podshow__cards .epcard__play img { width: 62px; height: 62px; }
        /* B35 podshow card 1 patch (Idaho) — absolute move */
        .podshow__cards > article:nth-of-type(1) .epcard__patch--right { left: 262px; top: 116px; right: auto; }
        /* B36 podshow card 2 patch (Wyoming) — move + resize */
        .podshow__cards > article:nth-of-type(2) .epcard__patch--right { left: 238px; top: 86px; right: auto; width: 149px; height: 158px; }
      }

      /* ====================================================================
         GLOBAL BUTTON STYLE UNIFICATION (Pass 3, Changes 3.rtf)
         Pete's comments B53/B54/B93/B94/B95: align stray CTAs to the
         storycard__btn aesthetic and consolidate rollover behaviour.
         .storycard__btn is the canonical "global" CTA — Neilvard, 4px
         radius, orange bg, darken-on-hover. These overrides bring the
         other named CTAs in line without duplicating layout-specific
         padding/positioning.
         ==================================================================== */
      /* B53/B93 pour card CTA — adopt storycard__btn typography + radius.
         Keeps the existing margin-top:auto bottom-pinning. */
      .pcard__cta {
        font-family: var(--font-display);
        font-weight: 400;
        font-size: 16px;
        line-height: 1;
        letter-spacing: -0.01em;
        gap: 16px;
        padding: 14px 16px 10px 16px;
        border-radius: 4px;
        justify-content: flex-start;
        color: var(--wh-cream);
      }
      .pcard__cta svg { width: 24px; height: 24px; }
      .pcard__cta:hover { background: #d06208; }

      /* B54 hero CTA — already orange, just consolidate the hover transition
         to match storycard__btn (background darken, no border colour shift
         since the border is transparent on btn--orange anyway). */
      .btn--orange { transition: background-color 0.18s ease; }
      .btn--orange:hover { background: #d06208; border-color: #d06208; }

      /* B94 events CTA — hover color only; the lift was removed from all
         buttons sitewide (user call 2026-06-12). */
      .events__cta { transition: background 0.18s ease; }
      .events__cta:hover { background: #A24F0F; }

      /* B95 newsletter submit — hover color only; the lift was removed from all
         buttons sitewide (user call 2026-06-12). */
      .newsletter__submit { transition: background-color 0.18s ease; }
      .newsletter__submit:hover { background: #d06208; }

      /* B90/B91/B92 podshow play button — stronger rollover (was just scale 1.06).
         Combines scale with brightness for clearer "this is interactive" cue. */
      .epcard__play { transition: transform 0.18s ease, filter 0.18s ease; }
      .epcard__play:hover { transform: scale(1.08); filter: brightness(1.1); }

      /* ====================================================================
         PASS 4 (Changes 4.rtf, 2026-05-28)
         ==================================================================== */
      /* B6 storycard__btn rollover — selector flagged on basecamp__foot but
         the change belongs at the canonical CTA so every storycard__btn picks
         it up. Base hover already darkens (#d06208); add the subtle lift used
         on pass-3 newsletter__submit/events__cta for a consistent tactile cue. */
      .storycard__btn { transition: background-color 0.18s ease, transform 0.18s ease; }

      /* =====================================================================
         GLOBAL ORANGE ICON BUTTON  (single source of truth)
         Canonical look lifted from .storycard__btn / .newsletter__submit:
         Neilvard display caps, 16px, orange #BC5C12 → #d06208, 4px corners,
         24px paper-plane icon. Placed last so it normalises every per-section
         orange button. Auto-width buttons hug the label (icon trails); the
         --stretch group (and full-width buttons) push the icon to the far
         right with space-between. Ghost / text-link CTAs are NOT included.
         ===================================================================== */
      .storycard__btn,
      .btn--orange,
      .pcard__cta,
      .lcard__cta,
      .events__cta,
      .newsletter__submit,
      .pod-bottle__cta,
      .os-bottle__cta,
      .shop-bundles__cta,
      .shop-field__cta,
      .pdp-approach__cta {
        display: inline-flex;
        align-items: center;
        gap: 16px;
        padding: 14px 16px 10px;
        background: var(--wh-orange, #BC5C12);
        color: var(--wh-cream, #FAF7EF);
        border: none;
        border-radius: 4px;
        font-family: var(--font-display, 'Neilvard Semibold One', sans-serif);
        font-weight: 400;
        font-size: 16px;
        line-height: 1;
        letter-spacing: -0.01em;
        text-transform: uppercase;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color 0.18s ease, transform 0.18s ease;
      }
      .storycard__btn:hover,
      .btn--orange:hover,
      .pcard__cta:hover,
      .lcard__cta:hover,
      .events__cta:hover,
      .newsletter__submit:hover,
      .pod-bottle__cta:hover,
      .os-bottle__cta:hover,
      .shop-bundles__cta:hover,
      .shop-field__cta:hover,
      .pdp-approach__cta:hover {
        background: #d06208;
        color: var(--wh-cream, #FAF7EF);
      }
      .storycard__btn > svg, .storycard__btn > img,
      .btn--orange > svg, .btn--orange > img,
      .pcard__cta > svg, .pcard__cta > img,
      .lcard__cta > svg, .lcard__cta > img,
      .events__cta > svg, .events__cta > img,
      .newsletter__submit > svg, .newsletter__submit > img,
      .pod-bottle__cta > svg, .pod-bottle__cta > img,
      .os-bottle__cta > svg, .os-bottle__cta > img,
      .shop-bundles__cta > svg, .shop-bundles__cta > img,
      .shop-field__cta > svg, .shop-field__cta > img,
      .pdp-approach__cta > svg, .pdp-approach__cta > img {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
      }
      /* Stretched / full-width: label left, icon hard right. */
      .pcard__cta,
      .lcard__cta,
      .newsletter__submit,
      .pod-bottle__cta,
      .os-bottle__cta,
      .pdp-approach__cta {
        display: flex;
        width: 100%;
        justify-content: space-between;
      }

      /* Shopify cookie-consent banner: the dark panel ships with a near-black
         title (rgb(31,31,31)), unreadable. Lighten the text, brand the link.
         Buttons already render on-brand (orange accept, outlined decline). */
      #shopify-pc__banner h2 { color: #FAF7EF !important; }
      #shopify-pc__banner .shopify-pc__banner__body p { color: #d8d2c6 !important; }
      #shopify-pc__banner a { color: #E8700A !important; }

      /* Primary-button map icon: on hover the needle spins like a compass and settles
         pointing north. Targets the two send/navigation glyphs used across all CTAs
         via :has() (no-op in browsers without it). The glyph rests at NE, so north
         is two full turns minus 45deg = 675deg, with a damped overshoot wobble. */
      @media (prefers-reduced-motion: no-preference) {
        a svg:has(path[d^="M21 3"]), button svg:has(path[d^="M21 3"]),
        a svg:has(path[d^="M13.0155"]), button svg:has(path[d^="M13.0155"]),
        a svg:has(path[d^="M5 12h14"]), button svg:has(path[d^="M5 12h14"]),
        a img[src*="near-me"], button img[src*="near-me"],
        a img[src*="gear-button-arrow"], button img[src*="gear-button-arrow"] {
          transform-origin: 50% 50%;
          transform: rotate(0deg);
          /* One springy transition drives BOTH directions: the needle spins to north
             on hover and unwinds back to rest on mouse-off. The linear() easing
             reproduces the old keyframe's damped wobble (overshoot, then settle); being
             a transition it plays in reverse automatically when :hover drops — which the
             old keyframe `animation` could not do (it snapped back). Longhands so an
             unsupported linear() degrades to a plain timed spin, not an instant snap. */
          transition-property: transform;
          /* 0.75s (was 1.35s, which made a pressed button feel slow to launch; 2026-10-18) */
          transition-duration: 0.75s;
          transition-timing-function: linear(0, 1.037 52%, 0.973 70%, 1.013 83%, 0.994 93%, 1);
        }
        /* the send/needle glyphs rest at NE: settle pointing north (2 turns minus 45deg
           = 675deg). Img-based instances of the same near_me glyph (storycard buttons,
           shop gear cards, the PDP ATCs/CTAs) are matched by src so every button that
           carries the icon spins, whatever its class. Mouse-off reverses this same
           transition back to rest. */
        a:hover svg:has(path[d^="M21 3"]), button:hover svg:has(path[d^="M21 3"]),
        a:hover svg:has(path[d^="M13.0155"]), button:hover svg:has(path[d^="M13.0155"]),
        a:hover img[src*="near-me"], button:hover img[src*="near-me"],
        a:hover img[src*="gear-button-arrow"], button:hover img[src*="gear-button-arrow"] {
          transform: rotate(675deg);
        }
        /* right-pointing checkout arrows keep pointing where they lead: 2 full turns */
        a:hover svg:has(path[d^="M5 12h14"]), button:hover svg:has(path[d^="M5 12h14"]) {
          transform: rotate(720deg);
        }
        /* Pressed compass button (set by the launch script before </body>): hold the needle
           at north while the spin plays out, even on touch where :hover may not stick. */
        a.wh-launching svg:has(path[d^="M21 3"]), a.wh-launching svg:has(path[d^="M13.0155"]),
        a.wh-launching img[src*="near-me"], a.wh-launching img[src*="gear-button-arrow"] {
          transform: rotate(675deg);
        }
      }@media (min-width: 901px) and (max-width: 1024px) {
        /* --- Global page margins: uniform 40px left/right outer gutter ---------
           Overrides ONLY the horizontal inset of each section wrapper; vertical
           padding and all internal spacing/component layout are left as-is.
           Sections at ~51px (clamp 5vw) tighten to 40; .pour + .story__stage
           (fixed 32px) open to 40 — every section now aligns to one 40px edge. */
        .hero,
        .pour,
        .story__stage,
        .basecamp,
        .podshow,
        .ugc,
        .gear,
        .events,
        .quote,
        .newsletter,
        .socialfollow,
        .linkcards {
          padding-left: 40px;
          padding-right: 40px;
        }
        /* The UGC lifebuoy deco offsets by -(section gutter) to sit flush on the
           page edge; retrack it to the new 40px so it stays flush (was -~51px). */
        .ugcdeco--lifebuoy { right: -40px; }

        /* ========================= STORY (Pete, node 5798:12238) =========================
           Scroll-swap cards 01/02/03. At 1024 they use the base grid (the ≥1100 collage
           tuning does NOT apply here), so these refine the base layout only. */
        /* "Remove secondary image" (×3): drop the small overlay photos on every card. */
        .storycard__overlay { display: none; }
        /* With the overlays gone, drop their 456px min-height. The base media fills the
           full 100vh stage cell (height:100%, which beats aspect-ratio), so pin a fixed,
           shorter height + center it — all three cards then match (Pete: "decrease
           height… same as section 01"). */
        .storycard__media--with-overlay { min-height: 0; }
        /* Centre each slide's content as a unit: the card sizes to its content
           (bottom:auto) and is vertically centred in the 100vh stage (top:50% +
           translateY). Because the framing decos are absolute to the card, they
           centre WITH the image + copy — so they stop clipping the stage top and
           clear the headings, while the composition sits in the middle
           (user 2026-07-21; supersedes the earlier top-anchored variant).
           Safe for the crossfade: the scroll animation transforms the media/copy/
           decos, never .storycard itself (production runs data-anim="4"). */
        .storycard { align-items: center; top: 50%; bottom: auto; transform: translateY(-50%); }
        .storycard__media { height: auto; }
        .storycard__media-main,
        .storycard__media > img:not([class]) { height: 440px; aspect-ratio: auto; }
        /* "Make the illustration ~40% bigger": scale each deco up from its ≤1100 size. */
        .storydeco--feathers { width: 280px; }   /* 200 → 280 */
        .storydeco--bobber   { width: 126px; }   /*  90 → 126 */
        .storydeco--tackle   { width: 224px; }   /* 160 → 224 */
        .storydeco--lure     { width: 100px; }   /*  72 → 100 */
        .storydeco--compass  { width: 196px; }   /* 140 → 196 */
        /* Card 03's tackle + lure sit over the heading column — lift them a little
           higher so they clear the top of "TRANSPARENT", and shift the tackle box
           right so it no longer covers the "03" number (user 2026-07-21). */
        .storydeco--tackle { top: -118px; left: 11%; }   /* was -80 / -2% */
        .storydeco--lure   { top: -132px; }   /* was -100 */
        /* Card 02 (text-right): the bobber's line crosses "MADE WITH" — lift the
           heading copy above the deco layer (z-index:3) so the TEXT sits on top of
           the icon, not behind it (user 2026-07-21). */
        .storycard--text-right .storycard__copy { position: relative; z-index: 5; }

        /* ========================= BASECAMP (Pete, node 5799:12244) =========================
           "Reduced padding and decreased font size" on the three cards (Pete drew two
           options; using the tighter of the two). Internals of the flow are untouched. */
        .bccard { padding: 28px 28px 48px; min-height: 400px; }
        .bccard__num { width: 56px; height: 56px; font-size: 20px; border-radius: 10px; }
        .bccard__title { font-size: 26px; }
        .bccard__body { gap: 20px; }
        .bccard__body p { font-size: 16px; line-height: 26px; min-height: 78px; }
        /* "Increase the gap between the button and the illustrative details" — lift the
           in-flow content (Join Basecamp button) up off the absolute tent/coords cluster. */
        .basecamp__inner { margin-bottom: 64px; }

        /* ========================= PODCAST =========================
           Tighten the spacing around the cards (Pete: 16/16/16/24). */
        .podshow__cards { gap: 16px; }

        /* ========================= UGC (Pete) ========================= */
        /* "Make the illustration ~40% bigger" (×2 clusters): scale the four decos up. */
        .ugcdeco--backpack { width: 162px; }   /* 116 → 162 */
        .ugcdeco--canteen  { width: 106px; }   /*  76 → 106 */
        .ugcdeco--lifebuoy { width: 210px; }   /* 150 → 210 */
        .ugcdeco--lantern  { width: 104px; }   /*  74 → 104 */
        /* Torn-paper divider native-scale fix now lives on the BASE .ugc::before/::after
           rule (mask-size: max(1440px,100%) 100%), so it applies at every width, not
           just here. Removed the ≤1024-only override (2026-07-27). */
        /* Centre the 2×2 polaroid grid in the screen (rightcol right-aligns it). */
        .ugc__cards { align-self: center; }

        /* ========================= EVENTS (Pete) =========================
           Card outer padding → 16/16/16/24 and title → 24px. (The "update the WH
           icon" part needs the replacement asset — flagged, not done here.) */
        .evcard { padding: 16px 16px 24px; }
        .evcard__title { font-size: 24px; line-height: 30px; }

        /* ========================= NEWSLETTER (Pete) =========================
           The postcard image is cropping off the right (its aspect-ratio 2/1 + min-height
           420 forces an 840px min-width, overflowing the 1fr column). Drop the aspect-ratio
           so the image fits its box exactly and honours the 40px right margin. */
        .newsletter__hero { aspect-ratio: auto; min-height: 396px; }

        /* ========================= SOCIAL (Pete) =========================
           Remove the compass decoration at 1024 (binoculars stay). */
        .socialfollow__deco-compass { display: none; }

        /* ========================= LINK CARDS (Pete) =========================
           Smaller card titles at 1024. */
        .lcard__title { font-size: 22px; line-height: 28px; }
      }@media (max-width: 900px) {
        :root { --wh-ratio-pad: 103px; }
        .pour, .story, .basecamp, .gear, .newsletter {
          padding-left: var(--wh-ratio-pad);
          padding-right: var(--wh-ratio-pad);
        }
        .gear__foot { margin-left: calc(-1 * var(--wh-ratio-pad)); margin-right: calc(-1 * var(--wh-ratio-pad)); }
      }
      @media (max-width: 768px) { :root { --wh-ratio-pad: 99px; } }
      @media (max-width: 600px) { :root { --wh-ratio-pad: 40px; } }
      @media (max-width: 430px) { :root { --wh-ratio-pad: 16px; } }