/* Hero — [wus_hero] shortcode. The postcard lockup per CLAUDE.md "Wordmark (lockup, three */
/* parts)" / "Signature > The postcard hero": images/logo.svg — script "What's Up" eyebrow, */
/* Gotham Bold caps "SUMMERLAND" anchor, script "British Columbia" subtitle, all one drawn */
/* wordmark now (replaces the old type-only placeholder). Still on a flat fill — the */
/* sunset-graded, grain-overlaid dock photo behind it is follow-up asset-pipeline work (see */
/* CLAUDE.md "Imagery"), not yet baked in. A shallow centred band on load (see min-height */
/* below — deliberately not full-viewport any more); */
/* js/scroll-system.js's postcard-hero scene scrubs .hero__title into .site-header__brand */
/* (style.css) as the page scrolls. Default state here is simply the resting, static */
/* postcard — the scrub is the only thing that ever moves it. */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* Roughly half again the previous 50svh, per Daniel — the hero was reading as a tall */
    /* empty band before the calendar. --wus-header-h (style.css) is still subtracted: the */
    /* sticky header sits in normal flow above .hero and pushes it down by its own height, */
    /* so centering against the full svh landed the title visibly low (off by roughly the */
    /* header's height). Note the wordmark itself is usually what sets the real height at */
    /* this size — see .hero__logo's width cap below, which had to come down with it. */
    min-height: calc(26svh - var(--wus-header-h));
    padding: 1.25rem 1.5rem;
    text-align: center;
    /* GSAP swaps this to position:fixed for the scrub (ScrollTrigger's pin), at which */
    /* point it can overlap .site-header (style.css, z-index:110) — position:relative here */
    /* just gives the z-index below somewhere to apply so the wordmark stays stacked above */
    /* the sticky header through that transition instead of being clipped beneath it. */
    position: relative;
    z-index: 120;
    /* Deliberately NO background. It used to be --wus-color-paper, which is the same white */
    /* the page already sits on, so it never showed — but once this box got a z-index above */
    /* the header it became an opaque white lid painting over .site-header__brand. The hero */
    /* keeps overlapping the header band for ~400px after the pin releases (ScrollTrigger */
    /* parks it at the bottom of its pin-spacer), so the header wordmark stayed invisible */
    /* well past the handoff. Transparent = the header shows through; identical visually. */
    background: none;
    /* Nothing in here is interactive, and while it overlaps the header it would otherwise */
    /* swallow clicks on the brand link/nav underneath. */
    pointer-events: none;
}

/* ScrollTrigger's pin wraps .hero in its own generated .pin-spacer, which .hero's own */
/* pointer-events above can't reach — and that spacer keeps covering the header band for a */
/* few hundred px after the pin releases, swallowing clicks on the brand link. Scoped with */
/* :has() so this only ever touches the hero's spacer, never another scene's. */
.pin-spacer:has(> .hero) {
    pointer-events: none;
}

.hero__title {
    margin: 0;
    /* Fills .hero's own side padding at any width, capped so it doesn't blow up absurdly */
    /* large on wide desktop viewports. The wordmark's ~3.08:1 aspect ratio (1733x562) means */
    /* this cap, not min-height above, is what actually sets the hero's height on desktop: */
    /* 36rem wide renders ~11.7rem tall, against min-height's ~26svh. Halving the hero meant */
    /* bringing both down together — changing one alone just moves which of the two wins. */
    width: min(100%, 36rem);
}

/* Intrinsic 1733x562 (viewBox), so this reserves its box before the SVG loads — no CLS. */
.hero__logo {
    display: block;
    width: 100%;
    height: auto;
    /* It's a graphic mark, not text — nothing to select. Also stops the stray */
    /* selection/drag highlight some browsers draw over an <img> while GSAP scrubs it */
    /* around during the scroll-pin. */
    user-select: none;
}

/* Event calendar — [wus_calendar] shortcode. */
/* On the paper/white palette (see CLAUDE.md "Visual identity") — grid is desktop-only, */
/* list is the mobile fallback. */
.wus-calendar {
    padding: 2rem 1.5rem;
}

.wus-calendar__banner {
    margin: 0 0 2rem;
}

.wus-calendar__banner img {
    width: 100%;
    height: 40svh;
    object-fit: cover;
}

.wus-calendar__eyebrow {
    margin: 0 0 0.25rem;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wus-calendar__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.wus-calendar__heading {
    margin: 0;
}

.wus-calendar__accent {
    font-weight: 900;
}

.wus-calendar__nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.wus-calendar__nav-link {
    white-space: nowrap;
}

.wus-calendar__month-label {
    min-width: 8ch;
    font-weight: 700;
    text-align: center;
}

.wus-calendar__grid {
    display: none;
}

@media (min-width: 768px) {
    .wus-calendar__grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 1px;
        border: 1px solid var(--wus-color-line);
        background: var(--wus-color-line);
    }
}

/* Grid cells are the "raised surface" (white on the page's paper ground) per CLAUDE.md */
/* palette; the hairline hue between them comes from the grid container's own background */
/* (see .wus-calendar__grid above) showing through the 1px gaps. */
.wus-calendar__weekday {
    padding: 0.5rem;
    background: var(--wus-color-bg-alt);
    color: var(--wus-color-ink);
    font-family: var(--wus-font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
}

.wus-calendar__day {
    min-height: 6rem;
    padding: 0.4rem;
    background: var(--wus-color-bg-alt);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.wus-calendar__day--pad {
    background: var(--wus-color-bg);
}

.wus-calendar__day--today {
    outline: 2px solid var(--wus-color-pink-deep);
    outline-offset: -2px;
}

.wus-calendar__day-num {
    font-family: var(--wus-font-display);
    font-size: 0.9rem;
    font-weight: 700;
}

.wus-calendar__events {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.wus-calendar__event {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
}

.wus-calendar__event-thumb {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

.wus-calendar__empty {
    margin: 1.5rem 0 0;
}

.wus-calendar__list {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Event cards — text-first per CLAUDE.md "UI style > Event cards": chip, date, title, venue, */
/* and a details link, image thumbnail optional. White card surface on the page's paper */
/* ground, squared per --wus-radius. */
.wus-calendar__list-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--wus-color-bg-alt);
    border: 1px solid var(--wus-color-line);
    border-radius: var(--wus-radius);
}

.wus-calendar__list-thumb {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
    border-radius: var(--wus-radius);
}

/* Date — Gotham caps, soft ink. */
.wus-calendar__list-date {
    font-family: var(--wus-font-display);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--wus-color-ink-soft);
}

/* Title — Gotham Bold. */
.wus-calendar__list-title {
    font-family: var(--wus-font-display);
    font-weight: 700;
}

/* Venue/time — soft ink. */
.wus-calendar__list-time,
.wus-calendar__list-address {
    font-size: 0.85rem;
    color: var(--wus-color-ink-soft);
}

/* Details link substitute (no dedicated single-event template yet — see CLAUDE.md build */
/* order §2/§3) — styled per CLAUDE.md "Links": ink text, thick yellow underline (secondary */
/* CTA; pink is reserved for primary CTAs/buttons — see style.css "Links"). */
.wus-calendar__list-website,
.wus-calendar__list-ics {
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration-color: var(--wus-color-yellow);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
}

.wus-calendar__list-website:hover,
.wus-calendar__list-website:focus-visible,
.wus-calendar__list-ics:hover,
.wus-calendar__list-ics:focus-visible {
    text-decoration-color: var(--wus-color-yellow-deep);
}

.wus-calendar__list-notes {
    flex-basis: 100%;
    font-size: 0.85rem;
    color: var(--wus-color-ink-soft);
}

/* Chips (category tags) — Gotham Bold caps, ink text on pastel fill, squared, per */
/* CLAUDE.md "UI style > Chips (category tags)". Pink = live music, yellow = markets, */
/* ink-outline (white fill, ink border) = neutral/third category — see */
/* wus_event_type_chip_class() in inc/shortcodes.php for the type→class mapping. */
.wus-chip {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--wus-color-ink);
    border-radius: var(--wus-radius);
    color: var(--wus-color-ink);
    font-family: var(--wus-font-display);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.wus-chip--pink {
    background: var(--wus-color-pink);
    border-color: var(--wus-color-pink);
}

.wus-chip--yellow {
    background: var(--wus-color-yellow);
    border-color: var(--wus-color-yellow);
}

.wus-chip--outline {
    background: var(--wus-color-white);
}

/* Live-conditions strip — [wus_conditions] shortcode / wus/live-conditions block. */
/* A flat, full-width colour band: where we cover on the left, the current reading on the */
/* right. See inc/blocks.php for the render callback both the shortcode and block share. */
/* The photo/overlay variant this used to carry (grayscale + pink mix-blend duotone) is */
/* gone, along with the local-time column — Daniel's call: a solid colour reads cleaner at */
/* this size, and the clock was filler. Ink on pastel, per CLAUDE.md's contrast rule. */
/* Rhythm: only the temperature is allowed to be large. The place line and the condition */
/* are the same small Gotham caps at opposite ends, which makes the band read as one */
/* horizontal rule with a single number on it rather than four competing headlines — the */
/* previous version set all four spans at clamp(1.5rem, 4.5vw, 2.5rem) and they fought. */
.wus-conditions {
    padding: 0.9rem 1.5rem;
    background: var(--wus-color-pink);
    color: var(--wus-color-ink);
    /* 2px ink, matching the button/week-panel border weight — the band is a hard-edged */
    /* graphic object, not a soft tinted section. */
    border-top: 2px solid var(--wus-color-ink);
    border-bottom: 2px solid var(--wus-color-ink);
}

.wus-conditions--yellow { background: var(--wus-color-yellow); }
.wus-conditions--white  { background: var(--wus-color-white); }

/* The fill goes edge to edge; the content inside stops at the same 1200px reading column */
/* as .page-xl / .site-footer__inner (style.css), so the two ends don't drift apart into */
/* the far corners of a wide monitor. */
.wus-conditions__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    max-width: 1200px;
    margin: 0 auto;
}

.wus-conditions__place {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    /* min-width:0 overrides the flex-item default of min-width:auto, which otherwise */
    /* refuses to shrink below the content's intrinsic width — the usual cause of a flex */
    /* row overflowing sideways on narrow screens instead of wrapping. */
    min-width: 0;
    font-family: var(--wus-font-display);
    font-weight: 700;
    font-size: 0.8rem;
    /* Wide tracking is what lets this stay small and still read as a deliberate label */
    /* rather than shrunken body copy. */
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.3;
}

/* Live marker — same yellow-deep dot with an ink hairline as .site-header__weather-dot */
/* (style.css), so the header readout and this band are visibly the same instrument. */
/* Static, never blinking: nothing here is urgent, and CLAUDE.md's community/recovery rules */
/* mean no element on this site should imply a live emergency status. */
.wus-conditions__dot {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--wus-color-yellow-deep);
    border: 1px solid var(--wus-color-ink);
    border-radius: 50%;
}

/* Condition + temperature travel together as one unit, baseline-aligned so the small caps */
/* sit on the same line the big number stands on. */
.wus-conditions__now {
    display: inline-flex;
    align-items: baseline;
    gap: 1.1rem;
    min-width: 0;
}

.wus-conditions__desc {
    min-width: 0;
    overflow-wrap: break-word;
    font-family: var(--wus-font-display);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    /* Soft ink, not a pastel — pastels are fills only (CLAUDE.md). This is the one piece of */
    /* text in the band that's allowed to sit back; the place line and temp are full ink. */
    color: var(--wus-color-ink-soft);
    line-height: 1.3;
}

/* The one large thing in the band. Black (900) rather than the usual Bold — a temperature */
/* is a number to be read at a glance from a phone, and it's the only element here with */
/* nothing competing beside it. */
.wus-conditions__temp {
    font-family: var(--wus-font-display);
    font-weight: 900;
    font-size: clamp(1.85rem, 4vw, 2.6rem);
    line-height: 1;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

/* "°C" set small and raised off the number's baseline — em-relative so it tracks the */
/* clamp above at every width instead of needing its own breakpoints. */
.wus-conditions__unit {
    font-size: 0.36em;
    font-weight: 700;
    letter-spacing: 0.06em;
    vertical-align: 0.85em;
    /* em-relative, so the gap scales with the number rather than closing up at the top of */
    /* the clamp — 0.1em was letting the degree sign touch the last digit at desktop size. */
    margin-left: 0.22em;
}

/* Single row once there's width for one — place hard left, reading hard right, centred */
/* against the temperature rather than baseline-aligned to it (baseline would hang the */
/* small place label off the bottom of a 2.6rem number and read bottom-heavy). */
@media (min-width: 600px) {
    .wus-conditions {
        padding: 1rem 2rem;
    }

    .wus-conditions__inner {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.6rem 2rem;
    }
}

/* Week view — [wus_week] shortcode / wus/week-view block (see inc/blocks.php). Bold, squared */
/* day-of-week panels (Sun–Sat, site-timezone "today"), today's panel doubled in width and */
/* wearing the button hover motif's hard offset shadow (see .btn:hover, style.css) permanently */
/* rather than only on hover — the one panel that's allowed to raise its voice unprompted. */
/* Flexbox rather than a fixed grid: a day with several events just grows taller in its own */
/* box instead of clipping or forcing a fixed row height, and the double-width today panel can */
/* land anywhere in the Sun–Sat sequence — wherever today happens to fall — without stranding */
/* empty cells around it the way a strict column grid would. */
.wus-week {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.wus-week__day {
    flex: 1 1 200px;
    min-height: 11rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.25rem;
    background: var(--wus-color-bg-alt);
    border: 2px solid var(--wus-color-ink);
}

.wus-week__day--today {
    flex: 2 1 420px;
    border-width: 3px;
    box-shadow: 6px 6px 0 var(--wus-color-pink-deep);
}

.wus-week__day-head {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* Ink fill / paper text — not a category chip (see .wus-chip below), so pink/yellow's */
/* category-only meaning per CLAUDE.md "Chips" stays intact; this borrows the .btn treatment */
/* instead (ink fill, same Gotham Bold caps) since "today" is a status, not a category. */
.wus-week__today-tag {
    align-self: flex-start;
    padding: 0.2rem 0.6rem;
    background: var(--wus-color-ink);
    color: var(--wus-color-paper);
    font-family: var(--wus-font-display);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.wus-week__day-name {
    margin: 0;
    font-family: var(--wus-font-display);
    font-size: 1.1rem;
}

.wus-week__day--today .wus-week__day-name {
    font-size: 1.5rem;
}

.wus-week__day-date {
    margin: 0;
    font-family: var(--wus-font-display);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wus-color-ink-soft);
}

.wus-week__empty {
    margin: 0;
    font-size: 0.85rem;
    color: var(--wus-color-ink-soft);
}

/* Stacks any number of events top to bottom — the panel above just grows (see .wus-week__day, */
/* no fixed/max height), so a day with three events is simply a taller box, never a scrollbar. */
.wus-week__events {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* position:relative is the anchor for .wus-week__event-chip, which is pinned to this card's */
/* top-right corner rather than sitting in the body's flow — see below. */
.wus-week__event {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Featured images — shown as supplied, full colour. The grayscale + mix-blend-mode:luminosity */
/* duotone that used to sit here (tinting each photo to its event type's chip colour) is gone */
/* per Daniel: unifying mismatched venue photos is a real problem, but flattening every event */
/* photo to a two-tone wash cost more than it bought — see CLAUDE.md "Imagery" for the sunset */
/* grade that's meant to solve this properly, in the upload pipeline. */
/* The per-type tint backgrounds below are kept, but now only ever show as the empty state: */
/* an event with no featured image renders as a plain tint banner rather than a hole, so the */
/* rhythm of a row of cards never depends on which events happen to have a photo. */
/* Decorative only (alt="", like the calendar thumbnails in shortcodes.php) — the title beside */
/* it carries the information, so this is exempt from CLAUDE.md's "ink does all the reading" */
/* rule, which governs text. */
.wus-week__event-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    background: var(--wus-color-line);
}

.wus-week__event-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wus-week__event-thumb--pink    { background: var(--wus-color-pink); }
.wus-week__event-thumb--yellow  { background: var(--wus-color-yellow); }
.wus-week__event-thumb--neutral { background: var(--wus-color-line); }

.wus-week__event-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

/* Top-right of the card, over the photo, per Daniel — it reads as a label on the event rather */
/* than another line of stacked text. Absolutely positioned against .wus-week__event (above) */
/* and not against .wus-week__event-thumb, whose overflow:hidden would clip it; it also means */
/* the chip lands in the same corner whether or not that event has a photo. Left in place in */
/* the markup (inc/blocks.php) so the reading order is still chip → time → title → details. */
.wus-week__event-chip {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 1;
    /* Ink hairline, overriding the pastel-matched border the pink/yellow chip variants set. */
    /* Against a white card a pink chip on a pink border is fine; sitting on a photo it needs */
    /* an edge of its own or it dissolves into whatever happens to be behind it. */
    border-color: var(--wus-color-ink);
}

.wus-week__event-time {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--wus-color-ink-soft);
}

/* Title — Gotham Bold, per CLAUDE.md "Event cards"; plain text, not itself the link — the */
/* separate "Details" link below carries the pink underline the spec calls for. */
.wus-week__event-title {
    font-family: var(--wus-font-display);
    font-weight: 700;
    line-height: 1.25;
}

/* "Details" link — ink text, thick pink underline, per CLAUDE.md "UI style > Event cards" */
/* (an explicit, deliberate exception to the site-wide yellow link underline — see style.css */
/* "Links" — same pink-for-CTAs reasoning, just applied to a card's own action link here). */
.wus-week__event-link {
    align-self: flex-start;
    font-family: var(--wus-font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration-color: var(--wus-color-pink);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
}

.wus-week__event-link:hover,
.wus-week__event-link:focus-visible {
    /* 2/3 of the old 4px hover thickness — matches the site-wide hover rule, style.css. */
    text-decoration-color: var(--wus-color-pink-deep);
    text-decoration-thickness: 2.67px;
}

/* One column at a time below the breakpoint where two 200px panels would start feeling */
/* cramped — today's panel just reads as the tallest box in the stack rather than a wide one. */
@media (max-width: 640px) {
    .wus-week__day,
    .wus-week__day--today {
        flex-basis: 100%;
    }
}

/* Single event page — single-wus_event.php. Text-first per CLAUDE.md "Event cards", just at */
/* full-page scale: chip, date/time, title, a full photo (falling back to a standing site */
/* image rather than showing nothing — see wus_event_schema_image_url(), inc/schema.php), body */
/* copy, a plain where/organizer list, then the page's own action buttons. inc/schema.php emits */
/* the same underlying data as this markup, as JSON-LD, in <head>. */
.wus-event__back {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-family: var(--wus-font-display);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Ink-on-yellow (not pink/on-white) — passes CLAUDE.md's contrast rule and reads as a plain */
/* notice rather than borrowing pink's "live music" chip meaning or yellow's "markets" one. */
.wus-event__status-banner {
    margin: 0;
    padding: 0.75rem 1rem;
    background: var(--wus-color-yellow);
    border: 2px solid var(--wus-color-ink);
    font-family: var(--wus-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.85rem;
}

.wus-event__head {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wus-event__chip {
    align-self: flex-start;
}

.wus-event__title {
    margin: 0;
}

.wus-event__when {
    margin: 0;
    font-family: var(--wus-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--wus-color-ink-soft);
}

.wus-event__image img {
    display: block;
    width: 100%;
    max-height: 60svh;
    object-fit: cover;
}

.wus-event__body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.wus-event__notes {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.6;
}

.wus-event__details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 1.25rem;
    background: var(--wus-color-bg-alt);
    border: 1px solid var(--wus-color-line);
}

.wus-event__detail dt {
    margin: 0;
    font-family: var(--wus-font-display);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wus-color-ink-soft);
}

.wus-event__detail dd {
    margin: 0.2rem 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
}

/* "Get directions" — same pink-underline treatment as [wus_week]'s "Details" link */
/* (.wus-week__event-link above) — both are a card's own action link, per CLAUDE.md "Event */
/* cards". */
.wus-event__map-link {
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration-color: var(--wus-color-pink);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
}

.wus-event__map-link:hover,
.wus-event__map-link:focus-visible {
    text-decoration-color: var(--wus-color-pink-deep);
    text-decoration-thickness: 2.67px;
}

.wus-event__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Events archive — archive-wus_event.php. .wus-calendar__list / .wus-calendar__list-item / */
/* .wus-chip etc. (above) already carry the actual card styling; this is just the couple of */
/* rules unique to the archive page itself. */
.wus-events-archive__list {
    margin-top: 0.5rem;
}

/* Gallery Scene — [wus_gallery] shortcode / wus/gallery-scene block. */
/* A bespoke postcard cluster (2–3 images), GTA VI-site-inspired per Daniel's brief: boxes of */
/* uneven size in one of three hand-tuned orientations, never a uniform grid. Mobile (below */
/* the 768px breakpoint used elsewhere in this file) just stacks every image full-width in */
/* order — the asymmetric grid areas below are a desktop-only flourish. */
.wus-gallery {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.wus-gallery__item {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--wus-radius);
    /* The hover "border" is an inset box-shadow, not a real border — it grows on hover without */
    /* nudging layout or the image's own size (see CLAUDE.md "Hover motif"). */
    box-shadow: inset 0 0 0 0 var(--wus-color-yellow-deep);
    transition: box-shadow 0.3s ease;
}

.wus-gallery__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0; /* the figure above clips instead, so a second radius here would double up */
    transform: scale(1);
    transition: transform 0.5s ease;
}

.wus-gallery__item:hover,
.wus-gallery__item:focus-within {
    box-shadow: inset 0 0 0 8px var(--wus-color-yellow-deep);
}

.wus-gallery__item:hover .wus-gallery__img,
.wus-gallery__item:focus-within .wus-gallery__img {
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
    .wus-gallery__item,
    .wus-gallery__img {
        transition: none;
    }
}

/* Mobile: every layout collapses to one full-width column, images in slot order, at a */
/* sensible fixed height each — no grid-area gymnastics below this breakpoint. */
.wus-gallery__item {
    height: clamp(220px, 60vw, 340px);
}

/* Desktop: large, but capped — --wus-gallery-unit is the base row height each layout scales */
/* from, clamped so a big monitor doesn't blow these up "excessively large" per the brief. */
@media (min-width: 768px) {
    .wus-gallery {
        --wus-gallery-unit: clamp(240px, 24vw, 440px);
    }

    .wus-gallery__item {
        height: auto; /* handed back to the grid row/area sizing below */
    }

    /* Layout A — large left (tall), stacked right. Rows deliberately uneven, not a 50/50 split. */
    .wus-gallery--a.wus-gallery--count-3 {
        grid-template-columns: 1.15fr 1fr;
        grid-template-rows: calc(var(--wus-gallery-unit) * 1.1) calc(var(--wus-gallery-unit) * 0.9);
        grid-template-areas: "one two" "one three";
    }
    .wus-gallery--a.wus-gallery--count-3 .wus-gallery__item--1 { grid-area: one; }
    .wus-gallery--a.wus-gallery--count-3 .wus-gallery__item--2 { grid-area: two; }
    .wus-gallery--a.wus-gallery--count-3 .wus-gallery__item--3 { grid-area: three; }

    .wus-gallery--a.wus-gallery--count-2 {
        grid-template-columns: 1.2fr 1fr;
        grid-template-rows: calc(var(--wus-gallery-unit) * 1.85);
    }

    /* Layout B — mirror of A: stacked left, large right. */
    .wus-gallery--b.wus-gallery--count-3 {
        grid-template-columns: 1fr 1.15fr;
        grid-template-areas: "two one" "three one";
        grid-template-rows: calc(var(--wus-gallery-unit) * 0.9) calc(var(--wus-gallery-unit) * 1.1);
    }
    .wus-gallery--b.wus-gallery--count-3 .wus-gallery__item--1 { grid-area: one; }
    .wus-gallery--b.wus-gallery--count-3 .wus-gallery__item--2 { grid-area: two; }
    .wus-gallery--b.wus-gallery--count-3 .wus-gallery__item--3 { grid-area: three; }

    .wus-gallery--b.wus-gallery--count-2 {
        grid-template-columns: 1fr 1.2fr;
        grid-template-rows: calc(var(--wus-gallery-unit) * 1.85);
    }
    .wus-gallery--b.wus-gallery--count-2 .wus-gallery__item--1 { order: 2; }
    .wus-gallery--b.wus-gallery--count-2 .wus-gallery__item--2 { order: 1; }

    /* Layout C — stacked full-width: wide photo up top, the rest sit side by side below it */
    /* (or simply stacked, for a two-image set) — the one orientation that reads top-to-bottom */
    /* rather than side-by-side. */
    .wus-gallery--c.wus-gallery--count-3 {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "one one" "two three";
        grid-template-rows: calc(var(--wus-gallery-unit) * 0.85) calc(var(--wus-gallery-unit) * 1.05);
    }
    .wus-gallery--c.wus-gallery--count-3 .wus-gallery__item--1 { grid-area: one; }
    .wus-gallery--c.wus-gallery--count-3 .wus-gallery__item--2 { grid-area: two; }
    .wus-gallery--c.wus-gallery--count-3 .wus-gallery__item--3 { grid-area: three; }

    .wus-gallery--c.wus-gallery--count-2 {
        grid-template-columns: 1fr;
        grid-template-rows: calc(var(--wus-gallery-unit) * 1.15) calc(var(--wus-gallery-unit) * 0.85);
    }
}