.wx-glyph { display: block; flex: none; }

    /* ── BAR variant ───────────────────────────────────────────────── */
    .weather-bar {
        display: flex; align-items: stretch; gap: 0;
        padding: 0 22px;
        background: linear-gradient(180deg, #fffaef 0%, #fbeed1 100%);
        border: 1px solid #e6d4a4;
        border-radius: 6px;
        text-decoration: none; color: var(--charcoal, #1e1e1c);
        font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
        font-size: 14px; line-height: 1.2;
        transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
        position: relative; overflow: hidden;
        min-height: 78px;
    }
    .weather-bar::before {
        content: ""; position: absolute; left: 0; right: 0; top: 0;
        height: 3px;
        background: linear-gradient(90deg, #c4a052 0%, #d8b86a 50%, #c4a052 100%);
        opacity: 0.85;
    }

    /* Label variants — bar sits as a sticker pinned to the section's outer
       edge. We anchor the slot ABSOLUTELY to the section so the bar
       genuinely touches the section boundary, rounded only on the edge
       facing into the section. */
    .widget-slot { display: block; }

    /* Any <section> hosting a widget slot becomes position:relative and
       reserves padding so the absolute-positioned bar doesn't overlap
       the section's content. */
    section:has(> .widget-slot--section_below),
    section:has(> .widget-slot--section_above) { position: relative; }
    section:has(> .widget-slot--section_below) { padding-bottom: 110px !important; }
    section:has(> .widget-slot--section_above) { padding-top:    110px !important; }

    .widget-slot--section_below,
    .widget-slot--section_above {
        position: absolute;
        left: 0; right: 0;
        z-index: 5;
        margin: 0;
    }
    .widget-slot--section_below { bottom: 0; }
    .widget-slot--section_above { top: 0; }

    .widget-slot--section_below .weather-bar,
    .widget-slot--section_above .weather-bar { margin: 0; }
    .widget-slot--section_below .weather-bar {
        /* Rounded top corners, square bottom — sits like a label on the section edge */
        border-radius: 12px 12px 0 0;
        border-bottom: 0;
        box-shadow: 0 -10px 28px rgba(120, 67, 86, 0.14);
    }
    .widget-slot--section_above .weather-bar {
        border-radius: 0 0 12px 12px;
        border-top: 0;
        box-shadow: 0 10px 28px rgba(120, 67, 86, 0.14);
    }
    /* Swap the gold accent stripe to the rounded edge */
    .widget-slot--section_below .weather-bar::before {
        top: 0;  height: 3px;
        border-radius: 12px 12px 0 0;
    }
    .widget-slot--section_above .weather-bar::before {
        top: auto; bottom: 0; height: 3px;
        border-radius: 0 0 12px 12px;
    }
    .weather-bar:hover {
        border-color: rgba(196, 160, 82, 0.55);
        box-shadow: 0 8px 26px rgba(120, 67, 86, 0.08);
        transform: translateY(-1px);
    }

    /* Animated LIVE pulse — pinned top-left */
    .weather-bar__live {
        position: absolute; top: 12px; left: 22px;
        display: inline-flex; align-items: center; gap: 5px;
        font-size: 9.5px; font-weight: 700; letter-spacing: 0.22em;
        color: #6c9a73;
    }
    .weather-bar__live-dot {
        width: 6px; height: 6px; border-radius: 50%;
        background: #6c9a73;
        box-shadow: 0 0 0 0 rgba(108, 154, 115, 0.55);
        animation: wxbarPulse 2.2s ease-out infinite;
    }
    @keyframes wxbarPulse {
        0% { box-shadow: 0 0 0 0 rgba(108, 154, 115, 0.55); }
        70% { box-shadow: 0 0 0 8px rgba(108, 154, 115, 0); }
        100% { box-shadow: 0 0 0 0 rgba(108, 154, 115, 0); }
    }

    .weather-bar__seg {
        display: flex; flex-direction: column; justify-content: center;
        gap: 4px;
        padding: 16px 20px;
        position: relative;
    }
    .weather-bar__seg + .weather-bar__seg::before {
        content: ""; position: absolute; left: 0; top: 22%; bottom: 22%;
        width: 1px; background: rgba(196, 160, 82, 0.28);
    }

    .weather-bar__seg--now {
        display: flex; flex-direction: row; align-items: center; gap: 14px;
        padding-left: 0; padding-top: 22px;
    }
    .weather-bar__glyph { color: #784356; flex: none; }
    .weather-bar__now-text { display: flex; flex-direction: column; gap: 4px; }
    .weather-bar__now-line { display: flex; align-items: baseline; gap: 10px; }
    .weather-bar__temp {
        font-family: 'Cormorant Garamond', Cormorant, serif;
        font-size: 32px; font-weight: 500; color: #784356; line-height: 0.95;
    }
    .weather-bar__cond {
        font-family: 'Cormorant Garamond', Cormorant, serif;
        font-style: italic; font-size: 17px; color: var(--charcoal, #1e1e1c);
    }
    .weather-bar__eyebrow {
        text-transform: uppercase; letter-spacing: 0.18em;
        font-size: 10px; font-weight: 600; color: var(--muted, #8a8784);
    }
    .weather-bar__line {
        font-family: 'Cormorant Garamond', Cormorant, serif;
        font-size: 19px; font-weight: 500; color: var(--charcoal, #1e1e1c);
    }
    .weather-bar__line strong { font-weight: 500; }
    .weather-bar__line small {
        font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
        font-size: 11px; color: var(--muted, #8a8784); font-weight: 500;
    }

    .weather-bar__cta {
        margin-left: auto;
        display: flex; align-items: center; gap: 6px;
        padding: 16px 0 16px 20px;
        font-size: 11px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.18em;
        color: #784356;
        transition: color 0.18s ease, transform 0.18s ease;
    }
    .weather-bar__cta svg { transition: transform 0.18s ease; }
    .weather-bar:hover .weather-bar__cta { color: #5a2e3e; }
    .weather-bar:hover .weather-bar__cta svg { transform: translateX(3px); }

    /* (At 960px the 5-segment desktop row still fits comfortably — no segment
        hiding needed; mobile grid below pairs everything 2-up.) */
    @media (max-width: 760px) {
        /* Mobile: 2-column grid so secondary segments pair up left/right.
           LIVE pulse, the 'now' hero block and the CTA span full width. */
        .weather-bar {
            display: grid;
            grid-template-columns: 1fr 1fr;
            padding: 0;
            min-height: 0;
        }
        .weather-bar__live {
            position: static;
            grid-column: 1 / -1;
            justify-self: center;
            padding: 12px 0 4px;
        }
        .weather-bar__seg {
            padding: 10px 16px;
            border-bottom: 1px solid rgba(196, 160, 82, 0.18);
            justify-content: flex-start;
            min-width: 0;
        }
        /* Disable the desktop vertical divider lines */
        .weather-bar__seg + .weather-bar__seg::before { display: none; }
        /* Hero "now" segment spans full width with centred glyph + temp */
        .weather-bar__seg--now {
            grid-column: 1 / -1;
            flex-direction: row;
            padding: 6px 16px 14px;
            justify-content: center;
        }
        .weather-bar__now-text { align-items: flex-start; }
        /* Add a vertical gold hairline between the paired segments
           (every even-numbered segment is the left column of a pair) */
        .weather-bar__seg:nth-of-type(even):not(.weather-bar__seg--now) {
            border-right: 1px solid rgba(196, 160, 82, 0.18);
        }
        .weather-bar__cta {
            grid-column: 1 / -1;
            margin: 0;
            padding: 14px 18px;
            justify-content: center;
            border-top: 1px solid rgba(196, 160, 82, 0.25);
            background: rgba(196, 160, 82, 0.06);
        }
    }
    /* (Mobile grid pairs segments 2-up so even tiny phones fit Sea + Sunset.) */
    /* Mobile: bar gets tall once stacked, so let it flow naturally rather
       than absolute-positioning over the section padding. Padding on the
       host section is zeroed on the bar's side so the bar genuinely sits
       flush against the section edge (top or bottom). */
    @media (max-width: 760px) {
        .widget-slot--section_below,
        .widget-slot--section_above {
            position: static;
            margin: 0;
        }
        section:has(> .widget-slot--section_below) { padding-bottom: 0 !important; }
        section:has(> .widget-slot--section_above)  { padding-top:    0 !important; }
        /* Keep some breathing room between the bar and the section's
           inner content (which loses its share of the section's padding). */
        section:has(> .widget-slot--section_below) > .container { margin-bottom: 32px; }
        section:has(> .widget-slot--section_above)  > .container { margin-top:    32px; }
        .widget-slot--section_below .weather-bar { box-shadow: 0 -6px 18px rgba(120, 67, 86, 0.10); }
        .widget-slot--section_above .weather-bar { box-shadow: 0  6px 18px rgba(120, 67, 86, 0.10); }
    }

    /* ── CARD variant ──────────────────────────────────────────────── */
    .weather-card {
        display: block; padding: 24px;
        background: #fff;
        border: 1px solid var(--border-light, #ede9e4);
        border-radius: 4px;
        text-decoration: none; color: var(--charcoal, #1e1e1c);
        font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
        max-width: 340px;
        transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .weather-card:hover { border-color: #c4a052; box-shadow: 0 6px 22px rgba(120, 67, 86, 0.08); }
    .weather-card__eyebrow {
        display: block; text-transform: uppercase; letter-spacing: 0.18em;
        font-size: 10.5px; font-weight: 600; color: #c4a052; margin-bottom: 10px;
    }
    .weather-card__head { display: flex; align-items: center; gap: 16px; }
    .weather-card__glyph { color: #784356; }
    .weather-card__main { display: flex; flex-direction: column; gap: 2px; }
    .weather-card__temp {
        font-family: 'Cormorant Garamond', Cormorant, serif;
        font-size: 44px; font-weight: 500; line-height: 1; color: #784356;
    }
    .weather-card__label {
        font-family: 'Cormorant Garamond', Cormorant, serif;
        font-style: italic; font-size: 17px;
    }
    .weather-card__strip {
        display: flex; gap: 10px; margin-top: 18px;
        padding-top: 14px;
        border-top: 1px solid var(--border-light, #ede9e4);
    }
    .weather-card__day {
        flex: 1; text-align: center;
        display: flex; flex-direction: column; align-items: center; gap: 3px;
    }
    .weather-card__day-name {
        font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
        color: var(--muted, #8a8784); font-weight: 600;
    }
    .weather-card__day-glyph { color: #784356; }
    .weather-card__day-temp {
        font-family: 'Cormorant Garamond', Cormorant, serif;
        font-size: 18px; font-weight: 500;
    }
    .weather-card__cta {
        display: block; margin-top: 16px; font-size: 11px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.18em; color: #784356;
    }

    /* ── Per-tone text legibility overrides ─────────────────────── */
    /* The default text colours assume a neutral cream card. On strongly
       tinted skies (warm yellow, dark blue, etc.) the eyebrow, value and
       small labels need re-balancing for contrast. */

    /* CLEAR — bright yellow sky.
       Gold-on-yellow has no contrast, so darken accent colours. */
    .weather-hero.tone-clear .weather-hero__eyebrow     { color: #784356; }
    .weather-hero.tone-clear .weather-hero__label       { color: #5a2e3e; }
    .weather-hero.tone-clear .weather-hero__fact-label  { color: #6b6a66; }
    .weather-hero.tone-clear .weather-hero__day-name    { color: #6b6a66; }
    .weather-hero.tone-clear .weather-hero__facts       { border-top-color: rgba(120, 67, 86, 0.25); }
    .weather-hero.tone-clear .weather-hero__fact + .weather-hero__fact::before { background: rgba(120, 67, 86, 0.18); }

    /* BRIGHT (partly cloudy) — blue-to-warm gradient.
       Lower half is warm yellow, so push accent colours darker too. */
    .weather-hero.tone-bright .weather-hero__eyebrow    { color: #5a3140; }
    .weather-hero.tone-bright .weather-hero__label      { color: #5a3140; }
    .weather-hero.tone-bright .weather-hero__fact-label { color: #6b6a66; }

    /* OVERCAST — medium grey sky.
       Mostly fine, but the gold eyebrow loses zing — switch to burgundy. */
    .weather-hero.tone-overcast .weather-hero__eyebrow  { color: #784356; }
    .weather-hero.tone-overcast .weather-hero__fact-label { color: #4f4e4c; }
    .weather-hero.tone-overcast .weather-hero__day-name   { color: #4f4e4c; }

    /* MIST (fog) — pale grey. Default colours work; just darken the muted greys. */
    .weather-hero.tone-mist .weather-hero__fact-label   { color: #555452; }
    .weather-hero.tone-mist .weather-hero__day-name     { color: #555452; }
    .weather-hero.tone-mist .weather-hero__eyebrow      { color: #784356; }

    /* RAIN — medium-dark blue sky.
       Charcoal text loses contrast against the darker top of the gradient.
       Switch to cream/gold for the upper labels, keep dark text in the
       lower (lighter) bottom strip. */
    .weather-hero.tone-rain .weather-hero__eyebrow      { color: #f3d27a; }
    .weather-hero.tone-rain .weather-hero__temp         { color: #f8f4ea; }
    .weather-hero.tone-rain .weather-hero__temp span    { color: rgba(248, 244, 234, 0.7); }
    .weather-hero.tone-rain .weather-hero__label        { color: #f3d27a; }
    .weather-hero.tone-rain .weather-hero__glyph        { color: #f3d27a; }
    .weather-hero.tone-rain .weather-hero__sidefact .weather-hero__fact-val   { color: #f8f4ea; }
    .weather-hero.tone-rain .weather-hero__sidefact .weather-hero__fact-val small { color: rgba(248, 244, 234, 0.65); }
    .weather-hero.tone-rain .weather-hero__sidefact .weather-hero__fact-label { color: rgba(248, 244, 234, 0.65); }
    .weather-hero.tone-rain .weather-hero__sidefacts    { border-left-color: rgba(243, 210, 122, 0.32); }
    .weather-hero.tone-rain .weather-hero__door-meta    { color: rgba(248, 244, 234, 0.78); }

    /* SNOW — very pale blue-grey. Default dark text works; darken the muted
       greys slightly so they're not lost against the near-white background. */
    .weather-hero.tone-snow .weather-hero__fact-label   { color: #4f4e4c; }
    .weather-hero.tone-snow .weather-hero__day-name     { color: #4f4e4c; }
    .weather-hero.tone-snow .weather-hero__eyebrow      { color: #784356; }

    /* ── Storm mode — light text on the dark sky ───────────────── */
    .weather-hero.tone-storm .weather-hero__eyebrow     { color: #f3d27a; }
    .weather-hero.tone-storm .weather-hero__temp        { color: #f8f4ea; }
    .weather-hero.tone-storm .weather-hero__temp span   { color: rgba(248, 244, 234, 0.7); }
    .weather-hero.tone-storm .weather-hero__label       { color: #f3d27a; }
    .weather-hero.tone-storm .weather-hero__meta        { color: rgba(248, 244, 234, 0.78); }
    .weather-hero.tone-storm .weather-hero__glyph       { color: #f3d27a; }
    .weather-hero.tone-storm .weather-hero__facts {
        border-top-color: rgba(243, 210, 122, 0.22);
    }
    .weather-hero.tone-storm .weather-hero__fact + .weather-hero__fact::before {
        background: rgba(243, 210, 122, 0.22);
    }
    .weather-hero.tone-storm .weather-hero__fact-label  { color: rgba(248, 244, 234, 0.6); }
    .weather-hero.tone-storm .weather-hero__fact-val    { color: #f8f4ea; }
    .weather-hero.tone-storm .weather-hero__fact-val small { color: rgba(248, 244, 234, 0.55); }
    .weather-hero.tone-storm .weather-hero__door-meta   { color: #f3d27a; }
    .weather-hero.tone-storm .weather-hero__spark       {
        border-top-color: rgba(255, 255, 255, 0.15);
        border-bottom-color: rgba(255, 255, 255, 0.15);
    }
    .weather-hero.tone-storm .weather-hero__spark-label { color: rgba(248, 244, 234, 0.6); }
    .weather-hero.tone-storm .weather-hero__spark svg path[stroke="#784356"] { stroke: #f3d27a !important; }
    .weather-hero.tone-storm .weather-hero__day         { border-right-color: rgba(255, 255, 255, 0.12); }
    .weather-hero.tone-storm .weather-hero__day-name    { color: rgba(248, 244, 234, 0.65); }
    .weather-hero.tone-storm .weather-hero__day.is-today                       { background: rgba(255, 255, 255, 0.08); }
    .weather-hero.tone-storm .weather-hero__day.is-today .weather-hero__day-name { color: #f3d27a; }
    .weather-hero.tone-storm .weather-hero__day-glyph   { color: #f3d27a; }
    .weather-hero.tone-storm .weather-hero__day-temp strong { color: #f8f4ea; }
    .weather-hero.tone-storm .weather-hero__day-temp small  { color: rgba(248, 244, 234, 0.6); }
    .weather-hero.tone-storm .weather-hero__day-rain        { color: rgba(196, 217, 232, 0.85); }

    /* ── Live animated weather scene (sits on the tinted sky) ────── */
    .wx-scene__svg {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        pointer-events: none;
        z-index: 1;
        overflow: visible;
    }
    @media (prefers-reduced-motion: reduce) {
        .wx-scene__svg * { animation: none !important; }
    }

    /* Stack wrapper for the weather scene.
       Desktop shows a single copy filling the whole card.
       Mobile shows up to 10 copies tiled vertically at their natural
       1200:280 aspect ratio — small (~80px tall on a 340-wide screen)
       so they read as a soft repeating texture across the full card depth
       rather than 1-3 giant over-scaled scenes. */
    /* Scene wrapper — absolute fill the hero card. The wrapper holds two
       inner SVGs (landscape + portrait). CSS shows one and hides the other
       based on viewport width so each gets a composition built for its
       aspect ratio rather than relying on aspect-ratio scaling tricks. */
    .wx-scene-stack {
        position: absolute; inset: 0;
        pointer-events: none;
        z-index: 1;
        overflow: hidden;
    }
    .wx-scene-stack__landscape,
    .wx-scene-stack__portrait {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
    }
    .wx-scene-stack__landscape > .wx-scene__svg,
    .wx-scene-stack__portrait > .wx-scene__svg {
        width: 100%; height: 100%;
        display: block;
    }
    .wx-scene-stack__portrait { display: none; }

    @media (max-width: 760px) {
        .wx-scene-stack__landscape { display: none; }
        .wx-scene-stack__portrait  { display: block; }
    }

    /* SUN — gentle pulsing glow + slow ray rotation */
    .wx-sun__glow  { animation: wx-pulse 5s ease-in-out infinite; transform-origin: 0 0; }
    .wx-sun__rays  { animation: wx-spin 60s linear infinite; transform-origin: 0 0; }
    @keyframes wx-pulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
    @keyframes wx-spin  { to { transform: rotate(360deg); } }

    /* CLOUDS — bumpy cumulus shapes drifting at different speeds */
    .wx-cloud { fill: #ffffff; opacity: 0.92; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08)); }
    .wx-scene--cloud .wx-cloud { fill: #eef1f5; opacity: 0.95; }
    .wx-scene--storm .wx-cloud { fill: #2c3445; opacity: 0.92; }
    .wx-scene--rain  .wx-cloud { fill: #c9d2dd; opacity: 0.85; }
    /* Cloud GROUPS carry the drift animation. Bolts nested inside inherit
       it automatically, so each bolt strikes from beneath its parent cloud. */
    .wx-cloud-grp { will-change: transform; }
    .wx-cloud-grp--a {
        animation: wx-cloud-drift-a 60s linear infinite;
    }
    .wx-cloud-grp--b {
        opacity: 0.6;
        animation: wx-cloud-drift-b 95s linear infinite;
    }
    .wx-cloud-grp--c {
        opacity: 0.7;
        animation: wx-cloud-drift-c 75s linear infinite -25s;
    }
    /* In storm mode the clouds should read as dramatic — full opacity. */
    .wx-scene--storm .wx-cloud-grp--b { opacity: 0.85; }
    .wx-scene--storm .wx-cloud-grp--c { opacity: 0.9; }

    @keyframes wx-cloud-drift-a {
        from { transform: translateX(-300px); }
        to   { transform: translateX(1500px); }
    }
    @keyframes wx-cloud-drift-b {
        from { transform: translate(-300px, 30px)  scale(1.3); }
        to   { transform: translate(1600px, 30px)  scale(1.3); }
    }
    @keyframes wx-cloud-drift-c {
        from { transform: translate(-300px, 110px) scale(0.85); }
        to   { transform: translate(1600px, 110px) scale(0.85); }
    }

    /* FOG — wide blurred horizontal bands */
    .wx-fog {
        fill: rgba(220, 222, 226, 0.55);
        filter: blur(6px);
    }
    .wx-fog--a { animation: wx-fog-drift 36s ease-in-out infinite; }
    .wx-fog--b { animation: wx-fog-drift 52s ease-in-out infinite -12s; opacity: 0.7; }
    .wx-fog--c { animation: wx-fog-drift 70s ease-in-out infinite -28s; opacity: 0.5; }
    @keyframes wx-fog-drift {
        0%, 100% { transform: translateX(-30px); }
        50%      { transform: translateX(30px);  }
    }

    /* Mobile-only clouds — each one drifts continuously from
       off-screen left to off-screen right with its own duration and
       its own negative delay so they're scattered across the cycle
       and never move in sync. y position, scale and opacity all come
       from per-cloud CSS variables set inline in the partial.
       Pure linear translate, opacity ramps in at the edges so they
       don't pop in/out. */
    .wx-cloud-drift {
        opacity: 0;
        animation-name: wx-cloud-drift-right;
        animation-duration: var(--cd, 60s);
        animation-delay:    var(--cdel, 0s);
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    @keyframes wx-cloud-drift-right {
        0%   { transform: translate(-260px, calc(var(--cy, 0) * 1px)) scale(var(--cs, 1)); opacity: 0; }
        8%   { opacity: var(--co, 0.85); }
        92%  { opacity: var(--co, 0.85); }
        100% { transform: translate( 460px, calc(var(--cy, 0) * 1px)) scale(var(--cs, 1)); opacity: 0; }
    }

    /* RAIN — diagonal streaks repeating across the full width */
    .wx-rain { transform: translateY(-30px); }
    .wx-drop {
        animation: wx-drop-fall 0.6s linear infinite;
        will-change: transform;
    }
    @keyframes wx-drop-fall {
        0%   { transform: translate(0, -30px);  opacity: 0; }
        15%  { opacity: 1; }
        100% { transform: translate(60px, 320px); opacity: 0; }
    }

    /* PUDDLES — settle at the bottom of rain/storm scenes, ripples expand */
    .wx-puddle, .wx-puddle-shine { transition: none; }
    .wx-ripple {
        rx: 0; ry: 0;
        animation: wx-ripple-grow 2.4s ease-out infinite;
        transform-origin: center;
    }
    @keyframes wx-ripple-grow {
        0%   { opacity: 0; rx: 4; ry: 1; }
        20%  { opacity: 0.65; }
        100% { opacity: 0; rx: 90; ry: 12; }
    }

    /* SNOW — slow drifting six-pointed flakes */
    .wx-flake {
        animation: wx-snow-fall 8s linear infinite;
        will-change: transform;
    }
    @keyframes wx-snow-fall {
        0%   { transform: translate(0, -20px) rotate(0); opacity: 0; }
        10%  { opacity: 0.9; }
        100% { transform: translate(40px, 320px) rotate(120deg); opacity: 0.5; }
    }

    /* STORM — bolts ride along with their parent cloud (drift) and flash
       with a size pulse so they read as proper lightning strikes growing
       and dying back. */

    /* Scattered lightning strikes — each one a jagged forked bolt at a
       fixed sky position, flashing on its own cycle. Three timing classes
       (quick / mid / big) give a chaotic, real storm feel. */
    .wx-strike {
        opacity: 0;
        will-change: opacity, filter;
        filter: drop-shadow(0 0 14px rgba(255, 247, 214, 0.95))
                drop-shadow(0 0 4px rgba(255, 247, 214, 0.85));
    }
    .wx-strike-quick { animation: wx-strike-quick 9s linear infinite; }
    .wx-strike-mid   { animation: wx-strike-mid   9s linear infinite; }
    .wx-strike-big   { animation: wx-strike-big   9s linear infinite; }
    /* Brief sharp strikes — most lightning is like this */
    @keyframes wx-strike-quick {
        0%, 95%, 100% { opacity: 0; }
        95.5%         { opacity: 1; }
        96%           { opacity: 0; }
        96.5%         { opacity: 0.8; }
        97%           { opacity: 0; }
    }
    /* Mid — slightly longer flash with one re-strike */
    @keyframes wx-strike-mid {
        0%, 90%, 100% { opacity: 0; }
        91%           { opacity: 1;   }
        92%           { opacity: 0.3; }
        93%           { opacity: 1;   }
        94%           { opacity: 0.1; }
        95%           { opacity: 0.6; }
        96%           { opacity: 0;   }
    }
    /* Big — the dramatic, room-lighting strike */
    @keyframes wx-strike-big {
        0%, 88%, 100% { opacity: 0; }
        89%           { opacity: 1;    }
        90%           { opacity: 0.4;  }
        91%           { opacity: 1;    }
        92%           { opacity: 0.2;  }
        93%           { opacity: 0.85; }
        95%           { opacity: 0;    }
    }

    .wx-flash-overlay {
        animation: wx-flash-overlay 5s linear infinite;
        mix-blend-mode: screen;
    }
    @keyframes wx-flash-overlay {
        0%, 90%, 100% { opacity: 0; }
        93%           { opacity: 0.55; }
        94%           { opacity: 0; }
        95%           { opacity: 0.35; }
        96%           { opacity: 0; }
    }

    /* ── HERO variant — premium with tinted sky + sparkline ────────── */
    .weather-hero {
        position: relative; overflow: hidden;
        background: #fff;
        border: 1px solid var(--border-light, #ede9e4);
        border-radius: 4px;
        font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
        color: var(--charcoal, #1e1e1c);
        box-shadow: 0 14px 40px -20px rgba(120, 67, 86, 0.18);
    }
    .weather-hero__sky {
        position: absolute; inset: 0;
        background: linear-gradient(180deg, rgba(196, 160, 82, 0.22) 0%, rgba(255, 248, 232, 0.08) 100%);
        pointer-events: none;
    }
    .weather-hero.tone-clear .weather-hero__sky {
        background: linear-gradient(180deg, #ffd47a 0%, #ffe4a8 45%, #fff4d4 100%);
    }
    .weather-hero.tone-bright .weather-hero__sky {
        background: linear-gradient(180deg, #bcd6ea 0%, #e9d8a8 70%, #fbe9b8 100%);
    }
    .weather-hero.tone-overcast .weather-hero__sky {
        background: linear-gradient(180deg, #8d97a3 0%, #b6bdc8 60%, #d8dde4 100%);
    }
    .weather-hero.tone-mist .weather-hero__sky {
        background: linear-gradient(180deg, #b8bdc4 0%, #d1d6dc 60%, #e6e9ee 100%);
    }
    .weather-hero.tone-rain .weather-hero__sky {
        background: linear-gradient(180deg, #5d7a98 0%, #8da0b8 55%, #c3cdda 100%);
    }
    .weather-hero.tone-storm .weather-hero__sky {
        background: linear-gradient(180deg, #3d4a62 0%, #5e6f8a 60%, #8d97ac 100%);
    }
    .weather-hero.tone-snow .weather-hero__sky {
        background: linear-gradient(180deg, #c4d0dc 0%, #dfe6ee 50%, #f1f4f8 100%);
    }
    .weather-hero__inner { position: relative; z-index: 3; padding: 48px 52px; }
    .weather-hero__sky   { z-index: 0; }
    .wx-scene__svg       { z-index: 1; }

    .weather-hero__eyebrow {
        display: block;
        font-size: 11px; font-weight: 600; letter-spacing: 0.22em;
        text-transform: uppercase; color: #c4a052;
        margin-bottom: 22px;
    }
    .weather-hero__now {
        display: grid; grid-template-columns: 1fr auto;
        gap: 36px; align-items: center;
    }
    .weather-hero__primary {
        display: flex; align-items: center; gap: 28px;
    }
    .weather-hero__sidefacts {
        display: flex; flex-direction: column;
        gap: 14px;
        padding-left: 32px;
        border-left: 1px solid rgba(196, 160, 82, 0.28);
        min-width: 220px;
    }
    .weather-hero__sidefact {
        display: flex; align-items: center; gap: 14px;
        transition: transform 0.22s ease;
    }
    .weather-hero__sidefact:hover { transform: translateX(2px); }
    .weather-hero__sidefact:hover .weather-hero__fact-icon svg {
        filter: drop-shadow(0 2px 6px rgba(196, 160, 82, 0.35));
    }
    .weather-hero__sidefact .weather-hero__fact-icon {
        width: 36px; height: 36px; flex: none;
    }
    .weather-hero__sidefact-text {
        display: flex; flex-direction: column; gap: 1px;
        text-align: left;
    }
    .weather-hero__sidefact .weather-hero__fact-val { font-size: 22px; line-height: 1.1; }
    .weather-hero__sidefact .weather-hero__fact-label { font-size: 10px; }
    .weather-hero__glyph { color: #784356; flex: none; }
    .weather-hero__temp-wrap { min-width: 0; }
    .weather-hero__temp {
        font-family: 'Cormorant Garamond', Cormorant, serif;
        font-size: 112px; font-weight: 400; line-height: 0.92;
        color: var(--charcoal, #1e1e1c); letter-spacing: -2px;
    }
    .weather-hero__temp span {
        font-size: 36px; color: var(--muted, #8a8784); letter-spacing: 0;
        font-weight: 400; margin-left: 2px;
    }
    .weather-hero__label {
        font-family: 'Cormorant Garamond', Cormorant, serif;
        font-style: italic; font-size: 26px; margin-top: 10px; color: #784356;
    }

    .weather-hero__facts {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px 0;
        margin-top: 36px;
        padding: 28px 8px 22px;
        position: relative;
        border-top: 1px solid var(--border-light, #ede9e4);
    }
    .weather-hero__facts::before {
        content: ""; position: absolute; left: 0; right: 0; top: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, #c4a052, transparent);
        opacity: 0.55;
    }
    .weather-hero__fact {
        display: flex; flex-direction: column; align-items: center;
        gap: 8px;
        padding: 8px 14px;
        text-align: center;
        position: relative;
        transition: transform 0.22s ease;
    }
    .weather-hero__fact + .weather-hero__fact::before {
        content: ""; position: absolute; left: 0; top: 18%; bottom: 18%;
        width: 1px; background: rgba(196, 160, 82, 0.22);
    }
    .weather-hero__fact:hover { transform: translateY(-1px); }
    .weather-hero__fact:hover .weather-hero__fact-icon svg { filter: drop-shadow(0 2px 6px rgba(196, 160, 82, 0.35)); }
    .weather-hero__fact-icon {
        display: flex; align-items: center; justify-content: center;
        width: 48px; height: 48px; margin-bottom: 2px;
        transition: filter 0.22s ease;
    }
    .weather-hero__fact-icon svg { display: block; width: 100%; height: 100%; }
    .weather-hero__fact-label {
        font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
        font-size: 10px; font-weight: 600; letter-spacing: 0.2em;
        text-transform: uppercase; color: var(--muted, #8a8784);
    }
    .weather-hero__fact-val {
        font-family: 'Cormorant Garamond', Cormorant, serif;
        font-size: 26px; font-weight: 500; color: var(--charcoal, #1e1e1c);
        line-height: 1.1;
    }
    .weather-hero__fact-val small {
        font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
        font-size: 12px; font-weight: 500; color: var(--muted, #8a8784);
        letter-spacing: 0.04em;
        margin-left: 2px;
    }

    /* Temperature sparkline */
    .weather-hero__spark {
        margin: 36px 0 28px;
        padding: 18px 0 6px;
        border-top: 1px solid var(--border-light, #ede9e4);
        border-bottom: 1px solid var(--border-light, #ede9e4);
        position: relative;
    }
    .weather-hero__spark svg { display: block; width: 100%; height: 60px; overflow: visible; }
    .weather-hero__spark-label {
        position: absolute; top: 4px; right: 0;
        font-size: 10px; font-weight: 600; letter-spacing: 0.2em;
        text-transform: uppercase; color: var(--muted, #8a8784);
    }

    /* 7-day forecast on desktop, expands to 9 on mobile for a 3×3 grid */
    .weather-hero__forecast {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 0;
    }
    /* Hide days 8 + 9 on desktop / tablet — mobile rule below re-shows them */
    .weather-hero__forecast > .weather-hero__day:nth-child(n+8) { display: none; }
    .weather-hero__day {
        display: flex; flex-direction: column; align-items: center; gap: 8px;
        padding: 16px 8px 14px;
        border-right: 1px solid var(--border-light, #ede9e4);
        transition: background 0.25s ease;
    }
    .weather-hero__day:last-child { border-right: 0; }
    .weather-hero__day.is-today { background: rgba(196, 160, 82, 0.06); }
    .weather-hero__day-name {
        font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
        color: var(--muted, #8a8784); font-weight: 600;
    }
    .weather-hero__day.is-today .weather-hero__day-name { color: #c4a052; }
    .weather-hero__day-glyph { color: #784356; }
    .weather-hero__day-temp { font-family: 'Cormorant Garamond', Cormorant, serif; line-height: 1.1; }
    .weather-hero__day-temp strong { font-size: 20px; font-weight: 500; color: var(--charcoal, #1e1e1c); }
    .weather-hero__day-temp small { font-size: 14px; color: var(--muted, #8a8784); font-weight: 400; }
    .weather-hero__day-rain {
        font-size: 10.5px; font-weight: 500; color: var(--muted, #8a8784);
        letter-spacing: 0.1em;
    }

    @media (max-width: 980px) {
        .weather-hero__inner { padding: 32px 28px; }
        .weather-hero__now { grid-template-columns: 1fr; gap: 24px; }
        .weather-hero__sidefacts {
            padding-left: 0; border-left: 0;
            padding-top: 22px; border-top: 1px solid rgba(196, 160, 82, 0.28);
            display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 24px;
            min-width: 0;
        }
        .weather-hero__facts { grid-template-columns: repeat(5, 1fr); }
    }
    @media (max-width: 640px) {
        .weather-hero__sidefacts { grid-template-columns: 1fr; }
        .weather-hero__facts { grid-template-columns: repeat(2, 1fr); }
        .weather-hero__fact:nth-child(2n+1)::before { display: none; }
    }
    @media (max-width: 720px) {
        .weather-hero__inner { padding: 26px 18px; }
        .weather-hero__primary { gap: 18px; }
        .weather-hero__temp { font-size: 82px; }
        .weather-hero__forecast { grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)); }
        .weather-hero__day { border-right: 0; border-bottom: 1px solid var(--border-light, #ede9e4); }
    }
    @media (max-width: 480px) {
        .weather-hero__forecast { grid-template-columns: repeat(3, 1fr); }
        /* Re-show days 8 + 9 so the mobile grid is a symmetrical 3×3 */
        .weather-hero__forecast > .weather-hero__day:nth-child(n+8) { display: flex; }
        .weather-hero__facts { grid-template-columns: 1fr; }
    }