/*
Theme Name: Pride in Dallas
Theme URI: https://dfw.dog/support
Author: Pride in Dallas
Author URI: https://dfw.dog/axel
Description: An editorial, photography-forward WordPress block theme for Pride in Dallas, a 100% volunteer-based grassroots nonprofit celebrating LGBTQ+ community in Dallas, rooted in Oak Lawn and Cedar Springs.
Version: 6.9.1
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pride-in-dallas
Domain Path: /languages
Update URI: false
Tags: block-theme, full-site-editing, one-column, editor-style, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, rtl-language-support, blog, nonprofit, news
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    color-scheme: light;

    --pid-canvas: #FFFFFF;
    --pid-canvas-warm: #FAF7F2;
    --pid-ink: #0D0D0D;
    --pid-ink-muted: #4A4550;
    --pid-ink-soft: #6B6472;
    --pid-ink-muted-alt: #5A5560;
    --pid-rule: #E8E4DC;

    --pid-purple: #7E00FE;
    --pid-deep-blue: #004DFF;
    --pid-magenta: #E91E8C;
    --pid-magenta-dark: #C40F70;
    /* Magenta used as TEXT. #E91E8C is only 4.18:1 on white, so small
       magenta type (eyebrows) fails WCAG AA in light mode. This is the
       readable variant; the dark islands below take the bright magenta
       back, since that is what reads against near-black. */
    --pid-magenta-text: #C40F70;
    --pid-yellow: #FFB400;

    --pid-surface-dark: #0D0B14;
    --pid-surface-dark-elevated: #1A1528;

    /* Hairline used to define the edge of an always-dark panel. Invisible
       in light mode (the panel already contrasts against the page); in dark
       mode it keeps the panel from melting into the background. */
    --pid-edge: transparent;

    /* The page's own canvas colour, resolved HERE and nowhere else.
       An always-dark island re-declares --pid-canvas locally to mean
       "light text on this dark surface", so inside one of those bands
       --pid-canvas no longer names the page. A band that needs to blend
       its edge into the page behind it cannot ask for that colour from
       the inside; it has to inherit it from above.

       Custom properties are substituted at computed-value time on the
       element that declares them, so this one line is mode-correct for
       all three palettes below without being repeated in them: whatever
       --pid-canvas computes to on :root is what gets frozen in here. */
    --pid-page-canvas: var(--pid-canvas);

    --pid-rainbow: linear-gradient(90deg, #E40303, #FF8C00, #FFED00, #008026, #004DFF, #750787);
    --pid-brand: linear-gradient(135deg, #7E00FE 0%, #004DFF 100%);

    --pid-serif: 'Fraunces', Georgia, serif;
    --pid-sans: 'DM Sans', -apple-system, system-ui, sans-serif;
    --pid-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

    --pid-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --pid-wide: 1280px;
    --pid-announcement-h: 36px;
}

/* ------------------------------------------------------------
   DARK MODE PALETTE

   Two selectors carry the same values on purpose:

   1. :root[data-theme="dark"]  — an explicit choice the visitor made
      with the header toggle. The pre-paint script in functions.php
      stamps this attribute before first paint, so there is no flash.
   2. the prefers-color-scheme block — the no-JS / first-visit path.
      It is skipped when the visitor has explicitly chosen light, so an
      explicit choice always beats the OS setting.

   Keep the two lists in sync when editing.

   Brand hues shift here as well: #7E00FE only reaches 3.1:1 against the
   dark canvas, so it lifts to #A25AFF — 5.1:1 on the canvas and 4.9:1 on
   the warm band, both clearing AA for body text. The rainbow and gradient
   tokens are flag colours and deliberately do not change.
   ------------------------------------------------------------ */
:root[data-theme="dark"] {
    color-scheme: dark;

    --pid-canvas: #0B0910;
    --pid-canvas-warm: #12101C;
    --pid-ink: #F2EFF7;
    --pid-ink-muted: #A9A2B6;
    --pid-ink-soft: #948CA3;
    --pid-ink-muted-alt: #A9A2B6;
    --pid-rule: #2A2338;

    --pid-purple: #A25AFF;
    --pid-deep-blue: #6B9BFF;
    --pid-magenta: #F04FA3;
    --pid-magenta-dark: #FF6FB5;
    --pid-magenta-text: #F04FA3;

    --pid-surface-dark: #17131F;
    --pid-surface-dark-elevated: #241D36;

    --pid-edge: rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --pid-canvas: #0B0910;
        --pid-canvas-warm: #12101C;
        --pid-ink: #F2EFF7;
        --pid-ink-muted: #A9A2B6;
        --pid-ink-soft: #948CA3;
        --pid-ink-muted-alt: #A9A2B6;
        --pid-rule: #2A2338;

        --pid-purple: #A25AFF;
        --pid-deep-blue: #6B9BFF;
        --pid-magenta: #F04FA3;
        --pid-magenta-dark: #FF6FB5;
        --pid-magenta-text: #F04FA3;

        --pid-surface-dark: #17131F;
        --pid-surface-dark-elevated: #241D36;

        --pid-edge: rgba(255, 255, 255, 0.08);
    }
}

/* ------------------------------------------------------------
   ALWAYS-DARK ISLANDS

   These surfaces are dark in *both* modes — the footer, the manifesto
   band, the featured sponsor panels, the announcement bar. Their
   descendants already say `color: var(--pid-canvas)` to mean "light text
   on a dark surface", which breaks the moment --pid-canvas flips.

   Rather than rewrite ~70 call sites, each island re-declares the light
   palette locally. Custom properties inherit, so every descendant
   resolves against these values instead of the page-level ones. The
   values are identical to the light-mode :root above, which means light
   mode renders exactly as it did before this block existed.

   Photographic panels count as islands too: a photo behind a dark scrim
   is a dark surface in both modes, so the split panels and the hero
   carousel controls belong here. Without them their type resolved to
   --pid-canvas = #0B0910 in dark mode, i.e. near-black on near-black.

   Only add a selector here when *every* descendant is light-on-dark.
   .event-hero-content is deliberately absent: its --card variant hands
   colour back to the page, so flipping --pid-ink underneath it would
   invert the card's own type. That one is pinned to #FFFFFF in place.
   ------------------------------------------------------------ */
.announcement-bar,
.split-panel,
.pid-hero-carousel__controls,
.hero-scroll-hint,
.pid-section--dark,
.theme-manifesto,
.site-footer,
.marquee-wrap,
.crisis-callout,
.sponsor-featured,
.celebration-strip-section,
.sponsor-teaser-card--featured,
.sponsor-tier--featured,
.pride-week-day--centerpiece .pride-week-day__meta {
    --pid-canvas: #FFFFFF;
    --pid-ink: #0D0D0D;
    --pid-rule: #E8E4DC;

    /* The muted tokens are the one place these islands must NOT copy the
       light palette. #4A4550 on a near-black band is 2.1:1 — the generic
       .eyebrow class hit exactly that on /get-involved, unreadable in
       light mode long before dark mode existed. Muted text on a dark
       surface has to be a light grey, so these invert. */
    --pid-ink-muted: rgba(255, 255, 255, 0.75);
    --pid-ink-muted-alt: rgba(255, 255, 255, 0.75);
    --pid-ink-soft: rgba(255, 255, 255, 0.62);

    /* Same reasoning for magenta type: the readable-on-white variant is
       too dark against a near-black band, so these islands take the
       bright magenta back. */
    --pid-magenta-text: #F04FA3;
}

/* ============================================================
   SKIP LINK (accessibility)
   ============================================================ */
.pid-skip-link {
    position: absolute;
    left: 1rem;
    top: -40px;
    z-index: 200;
    background: var(--pid-ink);
    color: var(--pid-canvas);
    padding: 0.75rem 1.25rem;
    font-family: var(--pid-sans);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    border-radius: 2px;
    transition: top 0.2s ease;
}
.pid-skip-link:focus {
    top: 1rem;
    outline: 2px solid var(--pid-purple);
    outline-offset: 2px;
}

/* ============================================================
   BASE RESET
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

html {
    background: var(--pid-canvas);
    text-rendering: optimizeLegibility;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    background: var(--pid-canvas) !important;
    color: var(--pid-ink);
    font-family: var(--pid-sans);
    font-synthesis: none;
}

.wp-site-blocks > footer { margin: 0; }

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

::selection { background: var(--pid-ink); color: var(--pid-canvas); }

/* Respect WP custom grids */
.events-row.is-layout-flow > *,
.mission-icons-grid.is-layout-flow > *,
.support-grid.is-layout-flow > *,
.stats-inner.is-layout-flex > *,
.countdown-inner.is-layout-flex > * {
    max-width: none !important;
    margin-inline: 0 !important;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
    font-family: var(--pid-serif);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--pid-ink);
    text-wrap: balance;
    overflow-wrap: break-word;
    font-optical-sizing: auto;
    hyphens: manual;
}

h1, .wp-block-post-title { font-size: clamp(2.75rem, 6vw, 4.5rem); letter-spacing: -0.02em; line-height: 1.05; }
h2 { font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1.1; }
h3 { font-size: 2.25rem; line-height: 1.15; }
h4 { font-size: 1.5rem; font-weight: 500; line-height: 1.2; }

p {
    font-family: var(--pid-sans);
    line-height: 1.75;
    text-wrap: pretty;
    overflow-wrap: break-word;
}

.eyebrow,
.pid-eyebrow {
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
    display: inline-block;
    margin-bottom: 0.75rem;
}

/* Editorial links, underline, brand on hover */
.entry-content a,
.wp-block-post-content a {
    color: var(--pid-ink);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
    transition: color 0.15s ease;
}
.entry-content a:hover,
.wp-block-post-content a:hover {
    color: var(--pid-purple);
}

/* Core buttons inside post content keep button styling, not body-link styling */
.entry-content .wp-block-buttons,
.wp-block-post-content .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.entry-content .wp-block-button__link,
.wp-block-post-content .wp-block-button__link {
    color: var(--pid-canvas);
    text-decoration: none;
}
.entry-content .wp-block-button__link:hover,
.wp-block-post-content .wp-block-button__link:hover {
    color: var(--pid-canvas);
}
.entry-content .wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-post-content .wp-block-button.is-style-outline .wp-block-button__link {
    color: var(--pid-ink);
}
.entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-post-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
    color: var(--pid-canvas);
}

/* Long-form article content, comfortable editorial reading width & rhythm */
.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol {
    line-height: 1.75;
}
.wp-block-post-content > h2,
.wp-block-post-content > h3,
.wp-block-post-content > h4 {
    margin-top: 2.25rem;
    margin-bottom: 0.75rem;
}
.wp-block-post-content > h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.2; }
.wp-block-post-content > h3 { font-size: clamp(1.375rem, 2.5vw, 1.625rem); line-height: 1.25; }
.wp-block-post-content > p + p {
    margin-top: 1.25em;
}
.wp-block-post-content > ul,
.wp-block-post-content > ol {
    padding-left: 1.5rem;
    margin: 1.25rem 0 1.75rem;
}
.wp-block-post-content > ul li,
.wp-block-post-content > ol li {
    margin-bottom: 0.625rem;
    line-height: 1.65;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.wp-block-button__link,
.wp-element-button {
    background: var(--pid-ink);
    color: var(--pid-canvas);
    border: 1px solid var(--pid-ink);
    border-radius: 2px;
    font-family: var(--pid-sans);
    font-weight: 600;
    font-size: 0.9375rem;
    text-transform: none;
    letter-spacing: 0;
    padding: 0.875rem 1.5rem;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    display: inline-block;
    text-decoration: none;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
    background: var(--pid-purple);
    border-color: var(--pid-purple);
    color: var(--pid-canvas);
}

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-element-button {
    background: transparent;
    color: var(--pid-ink);
    border: 1px solid var(--pid-ink);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-element-button:hover {
    background: var(--pid-ink);
    color: var(--pid-canvas);
}

/* ------------------------------------------------------------
   EMAIL REVEAL BUTTON (human-email-guard mu-plugin)

   The plugin rewrites any markup holding an address into its own
   <button>, which drops the class the original element carried. Our
   mailto CTAs therefore lost their button styling and fell back to the
   UA default — black label, no background — unreadable on this theme's
   dark surfaces. Re-dress the button for the contexts it lands in; the
   plugin's own rule is `color: inherit`, so the bare case only needs a
   colour that tracks the palette.
   ------------------------------------------------------------ */
.heg-reveal-btn { color: var(--pid-ink); }

.wp-block-button .heg-protected { display: inline-block; }
.wp-block-button .heg-reveal-btn {
    background: var(--pid-ink);
    color: var(--pid-canvas);
    border: 1px solid var(--pid-ink);
    border-radius: 2px;
    font-family: var(--pid-sans);
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 0.875rem 1.5rem;
    opacity: 1;
    transition: background 0.2s ease, color 0.2s ease;
}
.wp-block-button .heg-reveal-btn:hover {
    background: var(--pid-purple);
    border-color: var(--pid-purple);
    color: var(--pid-canvas);
}
.wp-block-button.is-style-outline .heg-reveal-btn {
    background: transparent;
    color: var(--pid-ink);
    border: 1px solid var(--pid-ink);
}
.wp-block-button.is-style-outline .heg-reveal-btn:hover {
    background: var(--pid-ink);
    color: var(--pid-canvas);
}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announcement-bar {
    background: var(--pid-ink);
    color: var(--pid-canvas);
    height: var(--pid-announcement-h);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    padding: 0 1.25rem;
    position: relative;
    z-index: 110;
}
.announcement-bar a {
    color: var(--pid-canvas);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
.announcement-bar a:hover { color: var(--pid-magenta); }

/* ============================================================
   HEADER
   ============================================================ */
.header-rainbow-bar {
    height: 4px;
    min-height: 4px;
    background: var(--pid-rainbow);
}

.site-header-wrap {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--pid-canvas);
    border-bottom: 1px solid var(--pid-rule);
    box-shadow: none;
    transition: box-shadow 0.25s ease;
}

.site-header-wrap.header-scrolled {
    box-shadow: 0 1px 0 var(--pid-rule), 0 8px 24px -18px rgba(13, 13, 13, 0.15);
}

.site-header-wrap > .wp-block-group.alignwide {
    max-width: var(--pid-wide);
    margin-inline: auto;
}

.site-header-wrap .is-layout-flex { gap: 1.5rem; }

.site-header-wrap .wp-block-image img {
    max-height: 40px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.site-header-wrap .wp-block-navigation .wp-block-navigation-item a {
    color: var(--pid-ink);
    font-family: var(--pid-sans);
    font-weight: 500;
    font-size: 0.9375rem;
    letter-spacing: 0;
    padding: 0.75rem 0.875rem;
    white-space: nowrap;
    transition: color 0.15s ease;
    text-decoration: none;
}

.site-header-wrap .wp-block-navigation .wp-block-navigation-item a:hover {
    color: var(--pid-purple);
}

.site-header-wrap .wp-block-navigation__responsive-container-open { color: var(--pid-ink); }
.site-header-wrap .wp-block-navigation__responsive-container.is-menu-open { background: var(--pid-canvas); }
.site-header-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
    color: var(--pid-ink);
    font-size: 1.25rem;
    padding: 1rem 1.25rem;
    font-family: var(--pid-serif);
    font-weight: 500;
}

/* ----- Desktop submenu flyouts ----- */
.site-header-wrap .wp-block-navigation-submenu {
    position: relative;
}
/* Invisible hover-bridge so mouse can pass from parent link to submenu
   flyout without dropping the hover (fixes the "submenu disappears before
   I can click" problem). */
.site-header-wrap .wp-block-navigation-submenu::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 0.75rem;
    pointer-events: auto;
    background: transparent;
}
.site-header-wrap .wp-block-navigation-submenu > .wp-block-navigation-item__content {
    padding-right: 1.25rem;
}
.site-header-wrap .wp-block-navigation-submenu__toggle {
    background: transparent;
    border: 0;
    padding: 0.375rem 0.25rem 0.375rem 0;
    color: var(--pid-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.site-header-wrap .wp-block-navigation-submenu__toggle svg {
    fill: currentColor;
    stroke: currentColor;
    width: 10px;
    height: 10px;
    margin-left: -0.375rem;
}
.site-header-wrap .wp-block-navigation__submenu-container {
    background: var(--pid-canvas);
    border: 1px solid var(--pid-rule);
    border-radius: 2px;
    box-shadow: 0 18px 40px -24px rgba(13, 13, 13, 0.2);
    min-width: 240px;
    padding: 0.5rem 0;
    margin-top: 0;
    top: calc(100% + 0.5rem);
    z-index: 110;
}
.site-header-wrap .wp-block-navigation__submenu-container .wp-block-navigation-item a {
    padding: 0.625rem 1.25rem;
    font-family: var(--pid-sans);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--pid-ink);
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.site-header-wrap .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover {
    background: var(--pid-canvas-warm);
    color: var(--pid-purple);
}

.site-header-wrap .nav-donate-cta .wp-block-button__link {
    /* magenta-dark, not magenta: white text on #E91E8C is 4.18:1. */
    background: var(--pid-magenta-dark);
    color: var(--pid-canvas);
    font-family: var(--pid-sans);
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 0.5rem 1.25rem;
    border-radius: 2px;
    text-transform: none;
    letter-spacing: 0;
    border: 1px solid var(--pid-magenta-dark);
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.site-header-wrap .nav-donate-cta .wp-block-button__link:hover {
    background: var(--pid-magenta-dark);
    border-color: var(--pid-magenta-dark);
}

/* ============================================================
   EDITORIAL HERO (new pattern-ready selectors)
   ============================================================ */
.hero-editorial {
    position: relative;
    min-height: min(70vh, 640px);
    overflow: hidden;
    background: var(--pid-canvas-warm);
}
.hero-editorial__image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    will-change: transform;
}
.hero-editorial__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.25) 100%);
}
/* Cover's inner container becomes a flex container that pins its child
   (the hero card) to the bottom-left of the cover. Avoids position:absolute
   stacking issues with WP core's cover block layers. */
.hero-editorial .wp-block-cover__inner-container,
.hero-editorial__cover > .wp-block-cover__inner-container {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 4rem);
    min-height: 100%;
    box-sizing: border-box;
}
.hero-editorial__card {
    position: relative;
    z-index: 3;
    max-width: min(620px, 100%);
    background: var(--pid-canvas);
    padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.75rem, 3.5vw, 2.5rem) clamp(2.25rem, 4vw, 3.25rem);
    border-left: 4px solid var(--pid-magenta);
    border-radius: 0 2px 2px 0;
    box-shadow: 0 20px 60px -24px rgba(13, 13, 13, 0.5);
}
.hero-editorial__card .eyebrow,
.hero-editorial__eyebrow {
    margin: 0 0 1rem;
    color: var(--pid-magenta-text);
    font-weight: 600;
}
.hero-editorial__card h1,
.hero-editorial__headline {
    font-family: var(--pid-serif);
    font-size: clamp(2.25rem, 5.5vw, 4rem);
    line-height: 0.95;
    font-weight: 600;
    margin: 0 0 1.25rem;
    color: var(--pid-ink);
    display: flex;
    flex-direction: column;
    gap: 0.15em;
}
.hero-editorial__headline-line {
    display: block;
    text-wrap: balance;
}
.hero-editorial__headline-line--accent {
    position: relative;
    display: inline-block;
    align-self: flex-start;
    color: var(--pid-ink);
    padding: 0 0.1em;
}
.hero-editorial__headline-line--accent::before {
    content: "";
    position: absolute;
    inset: 0.12em 0 0.08em;
    background: linear-gradient(180deg, transparent 55%, var(--pid-magenta) 55%, var(--pid-magenta) 92%, transparent 92%);
    z-index: -1;
    opacity: 0.9;
    transform: skewX(-4deg);
}
.hero-editorial__card .lede,
.hero-editorial__lede {
    font-family: var(--pid-sans);
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.6;
    color: var(--pid-ink-muted);
    margin: 0 0 1.75rem;
    text-wrap: pretty;
    max-width: 52ch;
}
.hero-editorial__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.hero-editorial__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--pid-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    padding: 0.95rem 1.5rem;
    border-radius: 2px;
    transition: transform 0.2s var(--pid-ease), background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.hero-editorial__btn--primary {
    background: var(--pid-ink);
    color: var(--pid-canvas);
    border: 1px solid var(--pid-ink);
}
.hero-editorial__btn--primary:hover {
    background: var(--pid-magenta);
    border-color: var(--pid-magenta);
    transform: translateY(-2px);
}
.hero-editorial__btn--secondary {
    background: transparent;
    color: var(--pid-ink);
    border: 1px solid var(--pid-ink);
}
.hero-editorial__btn--secondary:hover {
    background: var(--pid-ink);
    color: var(--pid-canvas);
    transform: translateY(-2px);
}
.hero-editorial__btn-arrow {
    display: inline-block;
    transition: transform 0.2s var(--pid-ease);
}
.hero-editorial__btn:hover .hero-editorial__btn-arrow {
    transform: translateX(3px);
}

/* ============================================================
   FULLSCREEN HERO CAROUSEL (homepage)
   Each slide is a real wp:cover block; we stack them absolutely
   and toggle .is-active with JS. Fade + subtle scale transition.

   Sizing: the carousel fills the viewport MINUS the site nav height
   so that nav + carousel = one screen on first load, with no content
   cut off at the bottom. The --pid-nav-height custom property is
   measured and updated by JS on load + resize (see the carousel script
   in functions.php). Fallback of 80px covers the nav's typical height
   before JS runs so there's no pop.
   ============================================================ */
:root {
    --pid-nav-height: 80px;
}
.pid-hero-carousel {
    position: relative;
    width: 100%;
    height: calc(100vh - var(--pid-nav-height, 80px));
    height: calc(100dvh - var(--pid-nav-height, 80px));
    min-height: 560px;
    overflow: hidden;
    /* Backdrop behind the slides, seen while the first photograph decodes.
       --pid-ink was standing in for "dark" here, but it is the *type*
       colour and flips to near-white in dark mode, flashing a full-viewport
       white panel before the hero paints. This token is dark in both. */
    background: var(--pid-surface-dark);
    isolation: isolate;
}
.pid-hero-carousel__slide {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(1.04);
    transition: opacity 0.9s var(--pid-ease), visibility 0s linear 0.9s, transform 7s var(--pid-ease);
    z-index: 1;
}
.pid-hero-carousel__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
    transition: opacity 0.9s var(--pid-ease), visibility 0s linear 0s, transform 7s var(--pid-ease);
    z-index: 2;
}
/* The Cover's dark dim layer, darken a bit more so the card always has contrast.
   Position it explicitly: this markup is emitted via shortcode, so WordPress does
   not detect a Cover block on the page and never loads core cover-block CSS — the
   carousel must position its own background/image layers. */
.pid-hero-carousel__slide .wp-block-cover__background {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(13,13,13,0.25) 0%, rgba(13,13,13,0.35) 40%, rgba(13,13,13,0.7) 100%) !important;
    opacity: 1 !important;
}
.pid-hero-carousel__slide .wp-block-cover__image-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    object-fit: cover;
    transform: scale(1.02);
}
/* Pin the slide's inner-container so the card sits in the bottom-left of the viewport */
.pid-hero-carousel__slide .wp-block-cover__inner-container {
    position: relative;
    z-index: 2;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: clamp(2rem, 6vw, 5rem) clamp(1.5rem, 6vw, 5rem) clamp(7rem, 10vw, 9rem);
    min-height: 100%;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

/* The editorial card that holds the slide's copy */
.pid-hero-carousel__card {
    position: relative;
    z-index: 3;
    max-width: min(680px, 100%);
    background: var(--pid-canvas);
    padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1.75rem, 3.5vw, 3rem) clamp(1.75rem, 3.5vw, 2.75rem) clamp(2.25rem, 4vw, 3.5rem);
    border-left: 4px solid var(--pid-magenta);
    border-radius: 0 2px 2px 0;
    box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s var(--pid-ease) 0.3s, transform 0.8s var(--pid-ease) 0.3s;
}
.pid-hero-carousel__slide.is-active .pid-hero-carousel__card {
    opacity: 1;
    transform: translateY(0);
}
.pid-hero-carousel__eyebrow {
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pid-magenta-text);
    font-weight: 600;
    margin: 0 0 1rem;
}
.pid-hero-carousel__headline {
    font-family: var(--pid-serif);
    font-size: clamp(2.25rem, 6vw, 4.5rem);
    line-height: 0.95;
    font-weight: 600;
    margin: 0 0 1.25rem;
    color: var(--pid-ink);
    display: flex;
    flex-direction: column;
    gap: 0.1em;
}
.pid-hero-carousel__line {
    display: block;
    text-wrap: balance;
}
.pid-hero-carousel__line--accent {
    position: relative;
    display: inline-block;
    align-self: flex-start;
    color: var(--pid-ink);
    padding: 0 0.1em;
}
.pid-hero-carousel__line--accent::before {
    content: "";
    position: absolute;
    inset: 0.12em 0 0.08em;
    background: linear-gradient(180deg, transparent 55%, var(--pid-magenta) 55%, var(--pid-magenta) 92%, transparent 92%);
    z-index: -1;
    opacity: 0.9;
    transform: skewX(-4deg);
}
.pid-hero-carousel__lede {
    font-family: var(--pid-sans);
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.6;
    color: var(--pid-ink-muted);
    margin: 0 0 1.75rem;
    text-wrap: pretty;
    max-width: 54ch;
}
.pid-hero-carousel__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.pid-hero-carousel__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--pid-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    padding: 1rem 1.625rem;
    border-radius: 2px;
    min-height: 48px;
    transition: transform 0.2s var(--pid-ease), background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pid-hero-carousel__btn--primary {
    background: var(--pid-ink);
    color: var(--pid-canvas);
    border: 1px solid var(--pid-ink);
}
.pid-hero-carousel__btn--primary:hover {
    background: var(--pid-magenta);
    border-color: var(--pid-magenta);
    transform: translateY(-2px);
}
.pid-hero-carousel__btn--secondary {
    background: transparent;
    color: var(--pid-ink);
    border: 1px solid var(--pid-ink);
}
.pid-hero-carousel__btn--secondary:hover {
    background: var(--pid-ink);
    color: var(--pid-canvas);
    transform: translateY(-2px);
}
.pid-hero-carousel__btn-arrow {
    display: inline-block;
    transition: transform 0.2s var(--pid-ease);
}
.pid-hero-carousel__btn:hover .pid-hero-carousel__btn-arrow {
    transform: translateX(3px);
}

/* ============================================================
   CAROUSEL CONTROLS (dots, arrows, play/pause, progress bar)
   ============================================================ */
.pid-hero-carousel__controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(2rem, 4vw, 3rem);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    padding: 0 clamp(1rem, 4vw, 2.5rem);
}
.pid-hero-carousel__arrow {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    min-width: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 13, 13, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--pid-canvas);
    border-radius: 50%;
    font-size: 1.75rem;
    line-height: 1;
    font-family: var(--pid-serif);
    padding: 0 0 0.1em 0;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s var(--pid-ease);
}
.pid-hero-carousel__arrow:hover {
    background: var(--pid-magenta);
    border-color: var(--pid-magenta);
    transform: scale(1.08);
}
.pid-hero-carousel__arrow:focus-visible {
    outline: 2px solid var(--pid-canvas);
    outline-offset: 3px;
}
.pid-hero-carousel__arrow--prev span { padding-right: 0.1em; }
.pid-hero-carousel__arrow--next span { padding-left: 0.1em; }

.pid-hero-carousel__dots {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.pid-hero-carousel__dot {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    min-height: 44px;
    min-width: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    position: relative;
}
.pid-hero-carousel__dot::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.7);
    transform: translate(-50%, -50%);
    transition: width 0.25s var(--pid-ease), background 0.25s ease, border-color 0.25s ease;
}
.pid-hero-carousel__dot:hover::before {
    background: rgba(255, 255, 255, 0.85);
}
.pid-hero-carousel__dot.is-active::before {
    width: 28px;
    border-radius: 5px;
    background: var(--pid-magenta);
    border-color: var(--pid-magenta);
}
.pid-hero-carousel__dot:focus-visible {
    outline: 2px solid var(--pid-canvas);
    outline-offset: 2px;
    border-radius: 4px;
}

.pid-hero-carousel__playpause {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--pid-canvas);
    border-radius: 50%;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.pid-hero-carousel__playpause:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.55);
}
.pid-hero-carousel__playpause:focus-visible {
    outline: 2px solid var(--pid-canvas);
    outline-offset: 2px;
}

/* Progress bar at bottom, animates its width from 0 → 100% each cycle */
.pid-hero-carousel__progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.15);
    z-index: 4;
    pointer-events: none;
}
.pid-hero-carousel__progress-bar {
    height: 100%;
    width: 0%;
    background: var(--pid-magenta);
    box-shadow: 0 0 12px rgba(240, 42, 161, 0.6);
    will-change: width;
    transition: width 0.15s linear;
}
.pid-hero-carousel.is-paused .pid-hero-carousel__progress-bar {
    background: rgba(255, 255, 255, 0.6);
    box-shadow: none;
}

/* Mobile tuning */
@media (max-width: 700px) {
    .pid-hero-carousel { min-height: 560px; }
    .pid-hero-carousel__slide .wp-block-cover__inner-container {
        padding: clamp(1.5rem, 5vw, 3rem) 1.25rem clamp(7rem, 10vw, 8.5rem);
    }
    .pid-hero-carousel__card {
        padding: 1.5rem 1.5rem 1.5rem 1.75rem;
        border-left-width: 3px;
    }
    .pid-hero-carousel__arrow {
        width: 44px;
        height: 44px;
        min-width: 44px;
        font-size: 1.5rem;
    }
    .pid-hero-carousel__controls {
        gap: 0.625rem;
        bottom: 1.5rem;
    }
    .pid-hero-carousel__headline {
        font-size: clamp(2rem, 9vw, 3rem);
    }
}
@media (max-width: 480px) {
    .pid-hero-carousel__dots { gap: 0.375rem; }
    .pid-hero-carousel__playpause { display: none; } /* dots are enough on small screens */
}

/* Reduced motion, honor the user preference */
@media (prefers-reduced-motion: reduce) {
    .pid-hero-carousel__slide {
        transition: opacity 0.3s linear, visibility 0s linear 0.3s;
        transform: none !important;
    }
    .pid-hero-carousel__slide.is-active {
        transition: opacity 0.3s linear, visibility 0s linear 0s;
    }
    .pid-hero-carousel__slide .wp-block-cover__image-background { transform: none !important; }
    .pid-hero-carousel__card {
        transition: none;
        transform: none !important;
    }
    .pid-hero-carousel__progress-bar { transition: none; }
}

/* Also hide the slide for screen readers when inactive (redundant with visibility,
   but some ATs ignore visibility:hidden) */
.pid-hero-carousel__slide[aria-hidden="true"] * {
    /* Nothing here, aria-hidden on the slide itself is the right signal */
}

/* Legacy full-bleed hero (back-compat), retuned lighter */
.hero-fullbleed-section { position: relative; }
.hero-cover {
    min-height: min(70vh, 640px) !important;
    position: relative;
}
.hero-cover.wp-block-cover { padding: 0 !important; }
.hero-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.35) 100%);
    pointer-events: none;
}
.hero-cover .wp-block-cover__image-background {
    transform: scale(1.04);
    transition: transform 1.2s var(--pid-ease);
}
.hero-entrance { opacity: 0; transform: translateY(12px); transition: opacity 0.8s var(--pid-ease), transform 0.8s var(--pid-ease); }
.hero-entrance.hero-loaded { opacity: 1; transform: translateY(0); }
.hero-scroll-hint {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    color: var(--pid-canvas);
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.8;
    pointer-events: none;
}
.hero-scroll-hint::before {
    content: "↓";
    display: block;
    text-align: center;
    font-size: 1rem;
    animation: scrollBounce 2s ease-in-out infinite;
}

/* ============================================================
   SECTION SHELL UTILITIES
   ============================================================ */
.pid-section {
    padding-block: clamp(3rem, 6vw, 6rem);
    padding-inline: 1.25rem;
}
.pid-section--warm { background: var(--pid-canvas-warm); }
.pid-section--dark {
    background: var(--pid-surface-dark);
    color: var(--pid-canvas);
}
.pid-section--dark h1,
.pid-section--dark h2,
.pid-section--dark h3,
.pid-section--dark h4,
.pid-section--dark .wp-block-heading { color: var(--pid-canvas); }

.pid-container {
    max-width: var(--pid-wide);
    margin-inline: auto;
}

.pid-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--pid-rule);
}
.pid-section-head h2 { margin: 0; }
.pid-section-head .pid-section-link {
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pid-ink);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1px solid var(--pid-ink);
    padding-bottom: 2px;
}
.pid-section-head .pid-section-link:hover { color: var(--pid-purple); border-color: var(--pid-purple); }

/* ============================================================
   THEME MANIFESTO BLOCK (the single dark moment)
   Stacked-statement layout with oversized numerals
   ============================================================ */
.theme-manifesto {
    background: var(--pid-surface-dark);
    color: var(--pid-canvas);
    padding: clamp(5rem, 10vw, 8rem) 1.25rem;
    position: relative;
    overflow: hidden;
}
.theme-manifesto::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(126, 0, 254, 0.28), transparent 50%),
        radial-gradient(circle at 85% 80%, rgba(240, 42, 161, 0.2), transparent 55%);
    pointer-events: none;
}
.theme-manifesto::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(
        90deg,
        #E40303 0%, #E40303 16.66%,
        #FF8C00 16.66%, #FF8C00 33.33%,
        #FFED00 33.33%, #FFED00 50%,
        #008026 50%, #008026 66.66%,
        #004DFF 66.66%, #004DFF 83.33%,
        #750787 83.33%, #750787 100%
    );
    opacity: 0.75;
}
.theme-manifesto__inner {
    position: relative;
    max-width: 1000px;
    margin-inline: auto;
    text-align: left;
}
.theme-manifesto__eyebrow {
    color: var(--pid-magenta-text);
    margin: 0 0 2.5rem;
    font-weight: 600;
}
.theme-manifesto__stack {
    display: flex;
    flex-direction: column;
    gap: clamp(0.25rem, 1vw, 0.75rem);
    margin-bottom: 3rem;
}
.theme-manifesto__line {
    display: flex;
    align-items: baseline;
    gap: clamp(1rem, 2.5vw, 2rem);
    margin: 0;
    font-family: var(--pid-serif);
    font-size: clamp(2.25rem, 6.5vw, 5rem);
    line-height: 1;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    text-wrap: balance;
}
.theme-manifesto__num {
    font-family: var(--pid-mono);
    font-size: clamp(0.75rem, 1.1vw, 0.875rem);
    letter-spacing: 0.12em;
    color: var(--pid-magenta);
    font-weight: 600;
    align-self: flex-start;
    padding-top: 0.8em;
    flex-shrink: 0;
    min-width: 2ch;
}
.theme-manifesto__text { flex: 1; }
.theme-manifesto__line strong {
    font-weight: 600;
    color: var(--pid-canvas);
}
.theme-manifesto__tagline {
    font-family: var(--pid-sans);
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 1rem;
    max-width: 58ch;
}
.theme-manifesto__cite {
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

@media (max-width: 640px) {
    .theme-manifesto__line {
        flex-direction: column;
        gap: 0.35rem;
    }
    .theme-manifesto__num { padding-top: 0; }
}

/* ============================================================
   EVENT TILES (light/editorial rebuild of existing shortcode output)
   ============================================================ */
/* Flex rather than grid: the featured row carries five tiles against a
   four-up rhythm, and a grid leaves the fifth stranded in the left cell
   with three empty ones beside it. Wrapping flex items centre their last
   row instead, so the remainder reads as deliberate at every width. */
.events-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    max-width: var(--pid-wide);
    margin-inline: auto;
    width: 100%;
}
.events-row > * {
    flex: 0 1 calc((100% - 3 * 1.5rem) / 4);
    min-width: 15rem;
    /* The theme is content-box throughout, so without this the tile's 1px
       borders land outside the basis and four of them overrun the row. */
    box-sizing: border-box;
}

.event-tile {
    display: flex;
    flex-direction: column;
    background: var(--pid-canvas);
    border: 1px solid var(--pid-rule);
    border-radius: 2px;
    overflow: hidden;
    text-decoration: none;
    color: var(--pid-ink);
    transition: transform 0.3s var(--pid-ease), box-shadow 0.3s var(--pid-ease), border-color 0.2s ease;
}
.event-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -24px rgba(0, 0, 0, 0.3);
    border-color: var(--pid-ink);
}

/* Variant "color stripe" top border, carried over from the prior tile system */
.event-tile { border-top: 3px solid var(--pid-ink); }
.event-tile-dark    { border-top-color: var(--pid-ink); }
.event-tile-magenta { border-top-color: var(--pid-magenta); }
.event-tile-blue    { border-top-color: var(--pid-deep-blue); }
.event-tile-purple  { border-top-color: var(--pid-purple); }

.event-tile .wp-block-image { position: relative; }
.event-tile img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--pid-ease);
}
.event-tile:hover img { transform: scale(1.03); }

.event-tile-price {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: var(--pid-canvas);
    color: var(--pid-ink);
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.375rem 0.625rem;
    letter-spacing: 0.02em;
    border: 1px solid var(--pid-rule);
}

.event-tile-content {
    padding: 1.25rem 1.25rem 1.5rem;
    flex: 1;
}
.event-tile-date {
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
    margin: 0 0 0.5rem;
    /* Reserve two lines. Dates run from "Date TBA" to "Sunday, Sept 20,
       2026 · 2:00 PM", and without this the one-line tiles pull their
       headings a full line above their neighbours'. */
    min-height: 50px;
    min-height: 2lh;
}
.event-tile h3 {
    font-size: 1.375rem;
    line-height: 1.2;
    margin: 0 0 0.625rem;
    text-wrap: balance;
}
.event-tile p {
    font-size: 0.9375rem;
    color: var(--pid-ink-muted);
    line-height: 1.65;
    margin: 0;
}

.events-view-all-btn {
    display: inline-block;
    background: transparent;
    color: var(--pid-ink);
    border: 1px solid var(--pid-ink);
    padding: 0.875rem 1.75rem;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    border-radius: 2px;
    transition: all 0.2s ease;
}
.events-view-all-btn:hover {
    background: var(--pid-ink);
    color: var(--pid-canvas);
}

/* Stagger entrance */
.events-stagger .event-tile { opacity: 0; transform: translateY(14px); animation: fadeUp 0.6s var(--pid-ease) forwards; }
.events-stagger .event-tile:nth-child(1) { animation-delay: 0.05s; }
.events-stagger .event-tile:nth-child(2) { animation-delay: 0.12s; }
.events-stagger .event-tile:nth-child(3) { animation-delay: 0.19s; }
.events-stagger .event-tile:nth-child(4) { animation-delay: 0.26s; }

/* ============================================================
   EVENT ARCHIVE (shortcode output)
   ============================================================ */
.pid-archive-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--pid-rule);
}
.pid-archive-filter-btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--pid-ink);
    border: 1px solid var(--pid-rule);
    border-radius: 2px;
    font-family: var(--pid-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
}
.pid-archive-filter-btn:hover {
    border-color: var(--pid-ink);
    color: var(--pid-ink);
}
.pid-archive-filter-btn.is-active {
    background: var(--pid-ink);
    color: var(--pid-canvas);
    border-color: var(--pid-ink);
}

.pid-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 1.75rem;
    max-width: var(--pid-wide);
    margin-inline: auto;
    width: 100%;
}

.pid-archive-card {
    display: flex;
    flex-direction: column;
    background: var(--pid-canvas);
    text-decoration: none;
    color: var(--pid-ink);
    transition: transform 0.3s var(--pid-ease);
}
.pid-archive-card:hover { transform: translateY(-2px); }

.pid-archive-card-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--pid-rule);
}
.pid-archive-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--pid-ease);
}
.pid-archive-card:hover .pid-archive-card-image img { transform: scale(1.04); }

.pid-archive-price-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: var(--pid-canvas);
    color: var(--pid-ink);
    padding: 0.375rem 0.625rem;
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    border: 1px solid var(--pid-rule);
}
.pid-archive-category-pill {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: var(--pid-ink);
    color: var(--pid-canvas);
    padding: 0.375rem 0.625rem;
    font-family: var(--pid-mono);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pid-archive-card-content { padding: 1rem 0 0; }
.pid-archive-card-date {
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
    margin: 0 0 0.375rem;
}
.pid-archive-card h3 {
    font-size: 1.375rem;
    line-height: 1.2;
    margin: 0 0 0.5rem;
    text-wrap: balance;
}
.pid-archive-card-location {
    font-family: var(--pid-sans);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--pid-ink-muted);
    margin: 0;
}
.pid-archive-ticket-link {
    display: inline-block;
    margin-top: 0.75rem;
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pid-ink);
    border-bottom: 1px solid var(--pid-ink);
    padding-bottom: 2px;
}

/* ============================================================
   EVENT HERO / CTA (single event template)
   ============================================================ */
.event-hero-section {
    position: relative;
    min-height: 56vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--pid-canvas-warm);
}
.event-hero-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.event-hero-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.7) 100%);
}
.event-hero-overlay {
    position: relative;
    width: 100%;
    padding: 3rem 1.25rem;
}
/* These three sit on a photograph behind a dark scrim, so they are white
   in both colour modes — not --pid-canvas, which flips to near-black in
   dark mode. They are not listed as an always-dark island because the
   --card variant below re-inherits the page colour inside this same
   container; pinning the literal keeps that variant working. */
.event-hero-content {
    max-width: var(--pid-wide);
    margin-inline: auto;
    color: #FFFFFF;
}
.event-hero-category {
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #FFFFFF;
    opacity: 0.85;
    margin: 0 0 0.75rem;
}
.event-hero-section .event-hero-title {
    font-family: var(--pid-serif);
    font-size: clamp(2.25rem, 5vw, 4rem);
    line-height: 1.05;
    color: #FFFFFF;
    margin: 0 0 1rem;
    text-wrap: balance;
}
.event-hero-meta {
    font-family: var(--pid-sans);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
}
.event-meta-divider { opacity: 0.5; margin: 0 0.25rem; }

.event-cta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: var(--pid-wide);
    margin: 2.5rem auto;
    padding: 1.5rem 1.75rem;
    background: var(--pid-canvas);
    border: 1px solid var(--pid-rule);
    border-top: 3px solid var(--pid-ink);
}
.event-cta-info { display: flex; align-items: baseline; gap: 0.75rem; }
.event-cta-price {
    font-family: var(--pid-serif);
    font-size: 2rem;
    font-weight: 600;
    margin: 0;
    color: var(--pid-ink);
}
.event-cta-label {
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
    margin: 0;
}
.event-cta-button {
    background: var(--pid-magenta);
    color: var(--pid-canvas);
    padding: 1rem 1.75rem;
    font-family: var(--pid-sans);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    border-radius: 2px;
    transition: background 0.2s ease;
}
.event-cta-button:hover { background: var(--pid-magenta-dark); }

/* ============================================================
   SINGLE EVENT PAGE — hero card, details grid, about, location
   Reuses .hero-editorial__card, .parade-details, .pid-section heads
   ============================================================ */
/* Hero: floating editorial card over the featured image */
.event-hero-section--card {
    min-height: min(76vh, 620px);
    align-items: flex-end;
}
.event-hero-section--card .event-hero-overlay {
    padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 2.5rem);
}
.event-hero-section--card .event-hero-content { color: inherit; }
.event-hero-section--card .hero-editorial__card { margin: 0; }
.event-hero-section--card .hero-editorial__card h1 {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    line-height: 1.02;
}

/* About-this-event: left-aligned prose column at the container edge,
   so its heading lines up with the Event Details / Getting There sections */
.event-about .pid-container { display: block; }
.event-about__title {
    font-family: var(--pid-serif);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: 1.15;
    color: var(--pid-ink);
    margin: 0 0 1.5rem;
}
/* About: two columns — lead prose + a sticky "Spread the word" card */
.event-about__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}
.event-about__main .wp-block-post-content { margin-inline: 0; }
.event-about__main .wp-block-post-content > p {
    font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
    line-height: 1.65;
    color: var(--pid-ink-muted);
    max-width: 60ch;
}
.event-about__aside { position: sticky; top: 100px; }
.event-share-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: var(--pid-canvas-warm);
    border: 1px solid var(--pid-rule);
    border-radius: 4px;
    padding: 1.75rem;
}
.event-share-card .eyebrow { display: block; color: var(--pid-magenta-text); margin: 0 0 1.25rem; }
.event-share-card__cal { display: block; text-align: center; margin-bottom: 1.5rem; }
.event-share-card__label {
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
    margin: 0 0 0.75rem;
}
.event-share-card__links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.event-share__btn {
    font-family: var(--pid-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--pid-ink);
    background: var(--pid-canvas);
    border: 1px solid var(--pid-rule);
    border-radius: 2px;
    padding: 0.5rem 0.85rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.event-share__btn:hover { background: var(--pid-ink); color: var(--pid-canvas); border-color: var(--pid-ink); }
.event-share__btn.is-copied { background: var(--pid-magenta); color: var(--pid-canvas); border-color: var(--pid-magenta); }
@media (max-width: 900px) {
    .event-about__grid { grid-template-columns: 1fr; }
    .event-about__aside { position: static; max-width: 32rem; }
}

/* What to Expect — card grid (accent top borders, mono index, serif label) */
.event-highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.event-highlight {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 1.6rem 1.5rem;
    background: var(--pid-canvas);
    border: 1px solid var(--pid-rule);
    border-top: 3px solid var(--pid-ink);
    border-radius: 3px;
    transition: transform 0.2s ease;
}
.event-highlight:hover { transform: translateY(-3px); }
.event-highlight.event-tile-dark    { border-top-color: var(--pid-ink); }
.event-highlight.event-tile-magenta { border-top-color: var(--pid-magenta); }
.event-highlight.event-tile-blue    { border-top-color: var(--pid-deep-blue); }
.event-highlight.event-tile-purple  { border-top-color: var(--pid-purple); }
.event-highlight__num {
    font-family: var(--pid-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--pid-magenta);
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.event-highlight__label {
    font-family: var(--pid-serif);
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--pid-ink);
    margin: 0;
}
@media (max-width: 1024px) { .event-highlights { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .event-highlights { grid-template-columns: 1fr; } }

/* Get Involved — CTA band (text + apply buttons) */
.event-involved {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2.5rem;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--pid-canvas);
    border: 1px solid var(--pid-rule);
    border-left: 4px solid var(--pid-magenta);
    border-radius: 0 3px 3px 0;
}
.event-involved__title {
    font-family: var(--pid-serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.1;
    color: var(--pid-ink);
    margin: 0.35rem 0 0.5rem;
}
.event-involved__desc {
    font-family: var(--pid-sans);
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--pid-ink-muted);
    margin: 0;
    max-width: 46ch;
}
.event-involved__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    flex-shrink: 0;
}
@media (max-width: 781px) {
    .event-involved { flex-direction: column; align-items: flex-start; }
    .event-involved__actions { width: 100%; }
    .event-involved__actions .event-action-btn { flex: 1; text-align: center; }
}

/* Getting-there: text + embedded map, on a standard pid-section */
.event-location-inner {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}
.event-location-title {
    font-family: var(--pid-serif);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.1;
    color: var(--pid-ink);
    margin: 0 0 0.75rem;
}
.event-location-address {
    font-family: var(--pid-sans);
    font-size: 1.0625rem;
    color: var(--pid-ink-muted);
    margin: 0 0 1rem;
}
.event-location-note {
    font-family: var(--pid-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--pid-ink-muted);
    margin: 0 0 1.75rem;
    max-width: 42ch;
}
.event-action-btn {
    display: inline-block;
    font-family: var(--pid-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    padding: 0.95rem 1.5rem;
    border-radius: 2px;
    border: 1px solid var(--pid-ink);
    color: var(--pid-ink);
    background: transparent;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.event-action-btn:hover { background: var(--pid-ink); color: var(--pid-canvas); transform: translateY(-2px); }
.event-action-btn--primary {
    background: var(--pid-magenta);
    border-color: var(--pid-magenta);
    color: var(--pid-canvas);
}
.event-action-btn--primary:hover {
    background: var(--pid-magenta-dark);
    border-color: var(--pid-magenta-dark);
    color: var(--pid-canvas);
}
.event-map {
    position: relative;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--pid-rule);
    border-radius: 3px;
    overflow: hidden;
}
.event-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
@media (max-width: 781px) {
    .event-location-inner { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ============================================================
   PASSES GRID
   ============================================================ */
.passes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    max-width: var(--pid-wide);
    margin-inline: auto;
    width: 100%;
}
.pass-card {
    background: var(--pid-canvas);
    border: 1px solid var(--pid-rule);
    border-radius: 2px;
    overflow: hidden;
    transition: transform 0.3s var(--pid-ease), box-shadow 0.3s var(--pid-ease);
}
.pass-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -24px rgba(0, 0, 0, 0.25);
}
.pass-card-image { aspect-ratio: 3 / 2; overflow: hidden; }
.pass-card-image img { width: 100%; height: 100%; object-fit: cover; }
.pass-card-content { padding: 1.5rem; }
.pass-card-price {
    font-family: var(--pid-serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--pid-ink);
    margin: 0 0 0.25rem;
}
.pass-card-title {
    font-family: var(--pid-serif);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 0.5rem;
    text-wrap: balance;
}
.pass-card-description {
    font-size: 0.9375rem;
    color: var(--pid-ink-muted);
    line-height: 1.65;
    margin: 0 0 1.25rem;
}
.pass-card-cta {
    display: inline-block;
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pid-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--pid-ink);
    padding-bottom: 2px;
}

/* ============================================================
   COUNTDOWN RIBBON (lighter)
   ============================================================ */
.countdown-bar {
    background: var(--pid-canvas-warm);
    border-block: 1px solid var(--pid-rule);
    padding: 1.5rem 1.25rem;
}
.countdown-inner {
    max-width: var(--pid-wide);
    margin-inline: auto;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}
.countdown-label {
    font-family: var(--pid-mono);
    font-size: 0.8125rem;
    line-height: 1.5;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
}
a.countdown-label { text-decoration: none; transition: color 0.2s ease; }
a.countdown-label:hover { color: var(--pid-magenta); }
.countdown-inner--empty { gap: 1rem; }
.countdown-empty-link {
    font-family: var(--pid-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--pid-magenta);
    text-decoration: none;
    transition: color 0.2s ease;
}
.countdown-empty-link:hover { color: var(--pid-magenta-dark); }
.countdown-unit { text-align: center; min-width: 72px; }
.countdown-days, .countdown-hours, .countdown-mins, .countdown-secs {
    display: block;
    font-family: var(--pid-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1;
    color: var(--pid-ink);
    font-variant-numeric: tabular-nums;
}
.countdown-unit-label {
    display: block;
    margin-top: 0.25rem;
    font-family: var(--pid-mono);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
}

/* ============================================================
   STATS BAR (lighter)
   ============================================================ */
.stats-inner {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 2rem;
    max-width: var(--pid-wide);
    margin-inline: auto;
}
.stat-item { text-align: center; min-width: 140px; }
.stat-number {
    display: block;
    font-family: var(--pid-serif);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 600;
    line-height: 1;
    color: var(--pid-ink);
    font-variant-numeric: tabular-nums;
}
.stat-label {
    display: block;
    margin-top: 0.5rem;
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
}

/* ============================================================
   RECEIPTS SECTION (real-data transparency block)
   ============================================================ */
.receipts-section {
    background: var(--pid-canvas);
    position: relative;
}
.receipts-section::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--pid-rule);
}
.receipts-lede {
    max-width: 640px;
}
.receipts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    max-width: var(--pid-wide);
    margin-inline: auto;
    border-top: 2px solid var(--pid-ink);
    border-bottom: 2px solid var(--pid-ink);
}
.receipts-tile {
    padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 2.5vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    border-right: 1px solid var(--pid-rule);
    position: relative;
    transition: background 0.3s var(--pid-ease);
}
.receipts-tile:last-child { border-right: 0; }
.receipts-tile:hover {
    background: var(--pid-canvas-warm);
}
.receipts-tile::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 0;
    background: var(--pid-magenta);
    transition: height 0.3s var(--pid-ease);
}
.receipts-tile:hover::after { height: 100%; }

.receipts-tile__num {
    display: block;
    /* Reserve the tall variant's line box on every tile. The --text variant
       below is a smaller face, so its shorter box was lifting its label and
       note ~15px above the other three in the row. Block layout keeps the
       "(c)(3)" suffix on its inline baseline; only the space under the
       shorter number changes. */
    min-height: calc(clamp(3rem, 6vw, 4.5rem) * 0.95);
    font-family: var(--pid-serif);
    font-size: clamp(3rem, 6vw, 4.5rem);
    font-weight: 600;
    line-height: 0.95;
    color: var(--pid-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.receipts-tile__num--text {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
}
.receipts-tile__num-suffix {
    font-size: 0.5em;
    font-weight: 500;
    /* The readable magenta, not the brand one. At 0.5em this suffix is large
       text on a wide screen but ordinary body size on a phone, where
       #E91E8C only reaches 4.18:1. The token is identical to --pid-magenta
       in dark mode, so only light mode changes. */
    color: var(--pid-magenta-text);
    display: inline-block;
    margin-left: 0.1em;
    vertical-align: baseline;
}
.receipts-tile__label {
    display: block;
    font-family: var(--pid-sans);
    font-size: 1rem;
    font-weight: 500;
    color: var(--pid-ink);
    line-height: 1.3;
    margin-top: 0.25rem;
}
.receipts-tile__note {
    display: block;
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
    margin-top: auto;
    padding-top: 0.5rem;
}
.receipts-footnote {
    color: var(--pid-ink-muted);
    max-width: 720px;
    margin-inline: auto;
}
.receipts-footnote a {
    color: var(--pid-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
}
.receipts-footnote a:hover { color: var(--pid-magenta); }

@media (max-width: 900px) {
    .receipts-grid { grid-template-columns: repeat(2, 1fr); }
    .receipts-tile:nth-child(2) { border-right: 0; }
    .receipts-tile:nth-child(1),
    .receipts-tile:nth-child(2) { border-bottom: 1px solid var(--pid-rule); }
}
@media (max-width: 520px) {
    .receipts-grid { grid-template-columns: 1fr; }
    .receipts-tile {
        border-right: 0;
        border-bottom: 1px solid var(--pid-rule);
    }
    .receipts-tile:last-child { border-bottom: 0; }
}

/* ============================================================
   MARQUEE (retained, restyled light)
   ============================================================ */
.marquee-wrap {
    background: var(--pid-ink);
    color: var(--pid-canvas);
    padding: 0.875rem 0;
    overflow: hidden;
    border-block: 1px solid var(--pid-ink);
}
.marquee-track {
    display: flex;
    gap: 3rem;
    white-space: nowrap;
    animation: marquee-scroll 35s linear infinite;
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* ============================================================
   MISSION / SUPPORT / QUOTE patterns (light)
   ============================================================ */
.mission-icons-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: var(--pid-wide);
    margin-inline: auto;
}
.mission-icon-card {
    text-align: center;
    padding: 1.5rem 1rem;
    border-top: 1px solid var(--pid-rule);
}
.mission-icon-card h4 {
    font-family: var(--pid-serif);
    font-size: 1.125rem;
    margin: 0.75rem 0 0.375rem;
}
.mission-icon-card p {
    font-size: 0.9375rem;
    color: var(--pid-ink-muted);
    margin: 0;
}

.support-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.75rem;
    max-width: var(--pid-wide);
    margin-inline: auto;
}

/* ============================================================
   PATTERN: STORY GRID
   ============================================================ */
.story-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 1.75rem;
    max-width: var(--pid-wide);
    margin-inline: auto;
    width: 100%;
}
.story-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--pid-ink);
    transition: transform 0.3s var(--pid-ease);
}
.story-card:hover { transform: translateY(-2px); }
.story-card__image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--pid-rule);
}
.story-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--pid-ease);
}
.story-card:hover .story-card__image img { transform: scale(1.04); }
.story-card__body { padding: 1.25rem 0 0; }
.story-card__eyebrow {
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
    margin: 0 0 0.5rem;
}
.story-card__title {
    font-family: var(--pid-serif);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 0.5rem;
    color: var(--pid-ink);
}
.story-card__deck {
    font-size: 0.9375rem;
    color: var(--pid-ink-muted);
    line-height: 1.65;
    margin: 0;
}

/* ============================================================
   PATTERN: COMMUNITY GRID
   ============================================================ */
.community-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: var(--pid-wide);
    margin-inline: auto;
    width: 100%;
}
.community-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--pid-canvas);
    border: 1px solid var(--pid-rule);
    text-decoration: none;
    color: var(--pid-ink);
    overflow: hidden;
    transition: transform 0.3s var(--pid-ease), box-shadow 0.3s var(--pid-ease);
}
.community-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.3);
}
.community-tile__image {
    aspect-ratio: 5 / 3;
    overflow: hidden;
}
.community-tile__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--pid-ease);
}
.community-tile:hover .community-tile__image img { transform: scale(1.04); }
.community-tile__flag {
    display: block;
    height: 6px;
    width: 100%;
}
.community-tile__body { padding: 1.25rem 1.25rem 1.5rem; }
.community-tile__title {
    font-family: var(--pid-serif);
    font-size: 1.375rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--pid-ink);
}
.community-tile__desc {
    font-size: 0.9375rem;
    color: var(--pid-ink-muted);
    line-height: 1.65;
    margin: 0;
}

/* ============================================================
   PATTERN: PLAN YOUR TRIP GRID
   ============================================================ */
.visit-grid {
    display: grid;
    /* Three cards since the "Safety & Rights" card was retired. */
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: var(--pid-wide);
    margin-inline: auto;
    width: 100%;
}
.visit-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--pid-canvas);
    border: 1px solid var(--pid-rule);
    padding: 1.75rem 1.5rem 3rem;
    text-decoration: none;
    color: var(--pid-ink);
    transition: border-color 0.2s ease, transform 0.3s var(--pid-ease);
}
.visit-card:hover {
    border-color: var(--pid-ink);
    transform: translateY(-2px);
}
.visit-card__eyebrow {
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
    margin: 0 0 0.625rem;
}
.visit-card__title {
    font-family: var(--pid-serif);
    font-size: 1.375rem;
    font-weight: 600;
    margin: 0 0 0.625rem;
    color: var(--pid-ink);
}
.visit-card__desc {
    font-size: 0.9375rem;
    color: var(--pid-ink-muted);
    line-height: 1.65;
    margin: 0;
}
.visit-card__arrow {
    position: absolute;
    bottom: 1.25rem;
    right: 1.5rem;
    font-size: 1.25rem;
    color: var(--pid-ink);
    transition: transform 0.2s ease;
}
.visit-card:hover .visit-card__arrow { transform: translateX(3px); }

/* ============================================================
   PATTERN: VOLUNTEER + SPONSOR SPLIT
   ============================================================ */
.volunteer-sponsor-split { padding: 0; }
.split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.split-panel {
    position: relative;
    display: block;
    min-height: 480px;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    color: var(--pid-canvas);
    overflow: hidden;
}
.split-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 11, 20, 0.35) 0%, rgba(13, 11, 20, 0.85) 100%);
    transition: background 0.3s ease;
}
.split-panel:hover::before {
    background: linear-gradient(180deg, rgba(13, 11, 20, 0.45) 0%, rgba(13, 11, 20, 0.92) 100%);
}
.split-panel__inner {
    position: absolute;
    inset: auto 0 0 0;
    /* The panels are deliberately full-bleed, so their type sits on its own
       padding rather than the page's content column. The old 3rem ceiling
       stopped scaling at ~1200px though, leaving the headings pinned 48px
       off the window edge on a wide monitor while everything above them sat
       hundreds of pixels further in. A higher ceiling keeps the two roughly
       in step without breaking the full-bleed treatment. */
    padding: clamp(2rem, 4vw, 4.5rem);
    color: var(--pid-canvas);
}
.split-panel__inner .eyebrow { color: rgba(255, 255, 255, 0.8); }
.split-panel__inner h3 {
    font-family: var(--pid-serif);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 600;
    color: var(--pid-canvas);
    margin: 0 0 0.75rem;
    line-height: 1.1;
}
.split-panel__inner p {
    color: rgba(255, 255, 255, 0.88);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 1.25rem;
    max-width: 44ch;
    text-wrap: pretty;
}
.split-panel__cta {
    display: inline-block;
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-canvas);
    border-bottom: 1px solid var(--pid-canvas);
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.split-panel:hover .split-panel__cta { color: var(--pid-magenta); border-color: var(--pid-magenta); }

/* ============================================================
   PATTERN: NEWSLETTER CALLOUT
   ============================================================ */
.newsletter-callout__inner {
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
}
.newsletter-form {
    display: flex;
    gap: 0.5rem;
    max-width: 480px;
    margin: 0 auto;
    border: 1px solid var(--pid-ink);
    background: var(--pid-canvas);
    padding: 0.375rem;
}
.newsletter-form__input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 0.75rem 0.75rem;
    font-family: var(--pid-sans);
    font-size: 0.9375rem;
    color: var(--pid-ink);
}
.newsletter-form__input::placeholder { color: var(--pid-ink-muted); }
.newsletter-form__submit {
    background: var(--pid-ink);
    color: var(--pid-canvas);
    border: 0;
    padding: 0.75rem 1.25rem;
    font-family: var(--pid-sans);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.2s ease;
}
.newsletter-form__submit:hover { background: var(--pid-purple); }
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   NATIVE WP SEARCH BLOCK, editorial style
   ============================================================ */
.wp-block-search.pid-search-form .wp-block-search__inside-wrapper,
.wp-block-search .wp-block-search__inside-wrapper {
    border: 1px solid var(--pid-ink);
    padding: 0.375rem;
    background: var(--pid-canvas);
    max-width: 520px;
    border-radius: 2px;
}
.wp-block-search .wp-block-search__input {
    border: 0;
    outline: 0;
    padding: 0.75rem;
    font-family: var(--pid-sans);
    font-size: 0.9375rem;
    background: transparent;
    color: var(--pid-ink);
}
.wp-block-search .wp-block-search__input::placeholder { color: var(--pid-ink-muted); }
.wp-block-search .wp-block-search__button {
    background: var(--pid-ink);
    color: var(--pid-canvas);
    border: 0;
    padding: 0.75rem 1.25rem;
    font-family: var(--pid-sans);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    border-radius: 2px;
    transition: background 0.2s ease;
}
.wp-block-search .wp-block-search__button:hover { background: var(--pid-purple); }

/* ============================================================
   404 PAGE
   ============================================================ */
.pid-404__inner {
    max-width: 720px;
    margin-inline: auto;
    padding-inline: 1.25rem;
    text-align: left;
}

/* ============================================================
   QUERY PAGINATION
   ============================================================ */
.wp-block-query .wp-block-query-pagination {
    border-top: 1px solid var(--pid-rule);
    padding-top: 1.5rem;
    margin-top: 2rem;
}
.wp-block-query-pagination a,
.wp-block-query-pagination .wp-block-query-pagination-numbers {
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pid-ink);
}
.wp-block-query-pagination a:hover { color: var(--pid-purple); }
.wp-block-query-pagination-numbers .page-numbers.current {
    font-weight: 600;
    border-bottom: 1px solid var(--pid-ink);
    padding-bottom: 2px;
}

/* ============================================================
   PATTERN: ABOUT, VALUES GRID
   ============================================================ */
.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 3rem;
    max-width: var(--pid-wide);
    margin-inline: auto;
    width: 100%;
}
.value-card {
    padding: 1.75rem 0;
    border-top: 1px solid var(--pid-rule);
}
.value-card__number {
    display: block;
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: var(--pid-ink-muted);
    margin-bottom: 0.75rem;
}
.value-card__title {
    font-family: var(--pid-serif);
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    color: var(--pid-ink);
}
.value-card__body {
    font-size: 1rem;
    color: var(--pid-ink-muted);
    line-height: 1.7;
    margin: 0;
    max-width: 52ch;
    text-wrap: pretty;
}

/* ============================================================
   PATTERN: HISTORY TIMELINE
   ============================================================ */
.pid-timeline {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 780px;
    position: relative;
}
.pid-timeline::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: var(--pid-rule);
}
.pid-timeline__item {
    position: relative;
    padding: 0 0 2.5rem 2.5rem;
}
.pid-timeline__item:last-child { padding-bottom: 0; }
.pid-timeline__marker {
    position: absolute;
    left: 0;
    top: 10px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--pid-canvas);
    border: 1px solid var(--pid-ink);
}
.pid-timeline__marker::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--pid-purple);
}
.pid-timeline__year {
    display: inline-block;
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: var(--pid-ink-muted);
    margin-bottom: 0.375rem;
}
.pid-timeline__title {
    font-family: var(--pid-serif);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--pid-ink);
}
.pid-timeline__text {
    font-size: 1rem;
    color: var(--pid-ink-muted);
    line-height: 1.7;
    margin: 0;
    max-width: 60ch;
    text-wrap: pretty;
}

/* ============================================================
   PATTERN: BOARD & STAFF GRID  (the team roster)
   ============================================================

   A grid of square portrait cards. "Read full bio" opens the
   person's bio in the theme's existing <dialog> component
   (.pid-dialog, controlled by the script in functions.php), so
   the grid never reflows and the bio is read at a sane measure.
   ============================================================ */
.board-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem 1.75rem;
    max-width: var(--pid-wide);
    margin-inline: auto;
    width: 100%;
    /* Stretch, not start: the cards below rely on `margin-top: auto` to sit
       their "Read full bio" link on a common baseline, and that has nothing
       to push against unless every card fills its row. People have bios of
       different lengths and some have no "Since" line, so left alone the
       links land at four different heights. */
    align-items: stretch;
}

.board-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.board-card__photo {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background: var(--pid-canvas-warm);
    border: 1px solid var(--pid-rule);
    overflow: hidden;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.board-card__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fallback tile for anyone whose photo we do not have yet. */
.board-card__initials {
    font-family: var(--pid-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    color: var(--pid-ink-muted);
}

.board-card__body {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* Basis auto, not 0. With `flex: 1` the body was sized from a zero basis,
       so a long blurb overflowed the box and the `margin-top: auto` on the
       "Read full bio" link had no free space to distribute — the links landed
       wherever the text happened to end.

       Shrink stays at 1: below 420px the card turns sideways and the body
       becomes a row item that has to give way to the 116px portrait. With
       shrink 0 it refused, and the roster pushed the page 118px wide.
       min-width: 0 is the companion fix — a flex item will not shrink below
       its longest word without it. */
    flex: 1 1 auto;
    min-width: 0;
}

.board-card__name {
    font-family: var(--pid-serif);
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.125rem;
    color: var(--pid-ink);
    text-wrap: balance;
}
.board-card__role {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--pid-ink);
    margin: 0 0 0.375rem;
}
.board-card__meta {
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
    margin: 0;
}
.board-card__blurb {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--pid-ink-muted);
    margin: 0.75rem 0 0;
    text-wrap: pretty;
}

/* --- "Read full bio" ---------------------------------------
   margin-top:auto pins it to the bottom of the card, so the
   controls line up across a row of uneven blurbs. */
.board-card__more {
    align-self: flex-start;
    margin-top: auto;
    padding: 0.5rem 0 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--pid-rule);
    border-radius: 0;
    cursor: pointer;
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pid-ink);
    transition: border-color 0.2s ease, color 0.2s ease;
}
/* Padding, not margin: `margin-top: auto` above is what drops this link to
   the bottom of the card so every "Read full bio" in a row sits on one
   line. Setting margin-top here instead — as this rule used to — outranks
   the auto and pins the link directly under the text, which is why the
   links used to land at a different height on every card. Padding gives
   the same visual gap without competing. */
.board-card__blurb + .board-card__more,
.board-card__meta + .board-card__more {
    padding-top: 1.375rem;
}
.board-card__more:hover {
    border-bottom-color: var(--pid-ink);
    color: var(--pid-purple);
}
.board-card__more:focus-visible {
    outline: 2px solid var(--pid-purple);
    outline-offset: 3px;
}
.board-card__more-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    font-size: 0.875rem;
    line-height: 1;
}
.board-card__more-icon::before { content: '+'; }

/* --- One person's page (/team/<name>/) ---------------------
   A full-bleed dark band carrying the portrait, the name, a rule of
   role and tenure, the contact buttons and the opening of the bio;
   then the rest of the bio on the page canvas; then the roster strip.

   Three specs here are deliberately the site's existing ones rather
   than new numbers, because the page reading as part of the site
   matters more than any of them reading well alone:

     the lede    matches .hero-editorial__lede  (1.6, 52ch)
     the buttons match  .hero-editorial__btn    (mono, caps, 2px)
     the prose   matches .event-about__main p   (1.65, 60ch)

   The band leads with the first bio paragraph rather than with contact
   details, because every member has a bio and almost none have filled
   in a phone number or a handle. Built the other way round, the band
   renders empty for nearly the whole roster. */

.team-hero {
    position: relative;
    padding-block: clamp(3rem, 7vw, 5.5rem);
}

/* Softens the cut from the white header into the black band in light
   mode. It uses --pid-page-canvas rather than --pid-canvas because this
   band is an always-dark island: --pid-canvas has been re-declared white
   on this very element, and asking for it here would paint a white lift
   in dark mode too. In dark mode the page is darker than the band, so
   the same rule reads as a faint vignette instead. */
.team-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 140px;
    background: linear-gradient(to bottom, var(--pid-page-canvas), transparent);
    opacity: 0.2;
    pointer-events: none;
}

.team-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: start;
}

/* The portrait gets the plate treatment the sponsor logos use: a
   defined edge, so a photograph of any tone sits on the dark band
   deliberately. */
.team-hero__portrait {
    position: relative;
    aspect-ratio: 1;
    width: 100%;
    max-width: 300px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    background: var(--pid-surface-dark-elevated);
    box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.7);
}
.team-hero__portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* The magenta rule that marks a hero card across the site. */
.team-hero__portrait::after {
    content: "";
    position: absolute;
    inset: auto auto 0 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--pid-magenta) 0%, var(--pid-purple) 100%);
}
.team-hero__initials {
    font-family: var(--pid-serif);
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.82);
}

.team-hero__card {
    border-left: 4px solid var(--pid-magenta);
    padding-left: clamp(1.25rem, 3vw, 2.25rem);
}
.team-hero__name {
    font-family: var(--pid-serif);
    font-size: clamp(2.5rem, 6.5vw, 4.5rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.015em;
    margin: 0.25rem 0 1rem;
    color: var(--pid-canvas);
    text-wrap: balance;
}

/* Role and tenure share one line closed by a rule. Everything below
   that rule — buttons, then the lede — is what the person has to say
   for themselves, so the rule is where the masthead ends. */
.team-hero__line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1.25rem;
    margin: 0 0 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    /* Capped to the lede's measure so the rule closes where the column
       of text below it ends, instead of running on past it. */
    max-width: 52ch;
}
.team-hero__role {
    font-family: var(--pid-sans);
    font-size: clamp(1.0625rem, 2vw, 1.25rem);
    font-weight: 600;
    color: var(--pid-canvas);
}
.team-hero__meta {
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
}

/* Contact and social buttons. Sized off .hero-editorial__btn but with
   the padding brought in, because that button appears once or twice in
   a hero and these can appear nine times in a row. */
.team-hero__contact {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.team-hero__btn {
    display: inline-flex;
    align-items: center;
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.6875rem 1.125rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    color: var(--pid-canvas);
    transition: transform 0.2s var(--pid-ease), background-color 0.2s ease,
                border-color 0.2s ease, color 0.2s ease;
}
.team-hero__btn:hover,
.team-hero__btn:focus-visible {
    background: var(--pid-magenta);
    border-color: var(--pid-magenta);
    color: #FFFFFF;
    transform: translateY(-2px);
}
.team-hero__btn:focus-visible {
    outline: 2px solid var(--pid-canvas);
    outline-offset: 2px;
}

/* The opening of the bio, carried up into the band. Matches the lede
   on every other hero the site has. */
.team-hero__lede {
    font-family: var(--pid-sans);
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.6;
    color: var(--pid-ink-muted);
    margin: 0;
    max-width: 52ch;
    text-wrap: pretty;
}

/* --- Bio ------------------------------------------------- */

/* Same columns as the band above it, so the label sits under the
   portrait and the prose starts on the same line as the name and the
   lede. That shared spine is most of what stops this section reading
   as leftover text dropped onto an empty page. */
.team-bio__inner {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: start;
}
.team-bio__label {
    margin: 0;
    color: var(--pid-magenta-text);
}
/* The same 4px rule and padding the hero card carries, in a quiet
   colour. It continues the magenta spine down the page, and because
   the inset is built the same way it cannot drift out of alignment
   with the name and lede above if either value is ever changed. */
.team-bio__body {
    max-width: 60ch;
    border-left: 4px solid var(--pid-rule);
    padding-left: clamp(1.25rem, 3vw, 2.25rem);
}
.team-bio__body p {
    font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
    line-height: 1.65;
    color: var(--pid-ink-muted);
    margin: 0 0 1.5rem;
    text-wrap: pretty;
}
.team-bio__body p:last-child { margin-bottom: 0; }

/* --- Rest of the roster ---------------------------------- */
.team-more__grid {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
    .team-hero__inner,
    .team-bio__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }
    .team-hero__portrait { max-width: 260px; }
    .team-bio__inner { gap: 1rem; }
}
@media (max-width: 600px) {
    .team-hero__btn {
        padding: 0.625rem 0.875rem;
        font-size: 0.6875rem;
    }
}

/* Board grid responsive rules live with the pattern rather than in the
   global responsive blocks at the bottom of this file, so everything
   about this component moves together. */
@media (max-width: 1024px) {
    .board-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .board-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
}
@media (max-width: 420px) {
    /* One column at phone width, but laid out sideways: a full-width square
       portrait per person would run the section past ten thousand pixels of
       scroll, and a two-column grid leaves the blurb about twenty characters
       wide. A small portrait beside the text keeps both readable. */
    .board-grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
    .board-card {
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem;
    }
    .board-card__photo {
        flex: 0 0 116px;
        width: 116px;
        margin-bottom: 0;
    }
    .board-card__blurb {
        font-size: 0.875rem;
        margin-top: 0.5rem;
    }
    .board-card__more { margin-top: 0.75rem; }
}

/* ============================================================
   PATTERN: TRANSPARENCY BREAKDOWN
   ============================================================ */
.transparency-breakdown {
    max-width: var(--pid-wide);
    margin-inline: auto;
    width: 100%;
}
.breakdown-bar {
    display: flex;
    width: 100%;
    height: 48px;
    border: 1px solid var(--pid-ink);
    margin-bottom: 2rem;
    overflow: hidden;
}
.breakdown-bar__segment {
    display: block;
    height: 100%;
    transition: filter 0.2s ease;
}
.breakdown-bar__segment--0 { background: var(--pid-ink); }
.breakdown-bar__segment--1 { background: var(--pid-purple); }
.breakdown-bar__segment--2 { background: var(--pid-deep-blue); }
.breakdown-bar__segment--3 { background: var(--pid-magenta); }
.breakdown-bar__segment--4 { background: var(--pid-yellow); }
.breakdown-bar__segment:hover { filter: brightness(1.1); }

.breakdown-legend {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
}
.breakdown-legend__item {
    display: flex;
    gap: 0.75rem;
}
.breakdown-legend__swatch {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 4px;
    border: 1px solid var(--pid-ink);
}
.breakdown-legend__swatch--0 { background: var(--pid-ink); }
.breakdown-legend__swatch--1 { background: var(--pid-purple); }
.breakdown-legend__swatch--2 { background: var(--pid-deep-blue); }
.breakdown-legend__swatch--3 { background: var(--pid-magenta); }
.breakdown-legend__swatch--4 { background: var(--pid-yellow); }
.breakdown-legend__body { flex: 1; }
.breakdown-legend__label {
    font-family: var(--pid-sans);
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
    color: var(--pid-ink);
}
.breakdown-legend__pct {
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    color: var(--pid-ink-muted);
    margin-left: 0.375rem;
    font-weight: 400;
}
.breakdown-legend__note {
    font-size: 0.875rem;
    color: var(--pid-ink-muted);
    line-height: 1.6;
    margin: 0.25rem 0 0;
}
.breakdown-footnote {
    max-width: 64ch;
    font-size: 0.9375rem;
    color: var(--pid-ink-muted);
    font-style: italic;
    line-height: 1.7;
    margin: 0;
    text-wrap: pretty;
}

/* ============================================================
   PATTERN: DOWNLOAD GRID (990 + ANNUAL REPORTS)
   ============================================================ */
.download-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: var(--pid-wide);
    margin-inline: auto;
    width: 100%;
}
.download-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.75rem 3.25rem;
    background: var(--pid-canvas);
    border: 1px solid var(--pid-rule);
    text-decoration: none;
    color: var(--pid-ink);
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.download-card:hover {
    border-color: var(--pid-ink);
    transform: translateY(-2px);
}
.download-card__year {
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: var(--pid-ink-muted);
    margin-bottom: 0.5rem;
}
.download-card__label {
    font-family: var(--pid-serif);
    font-size: 1.375rem;
    font-weight: 600;
    margin: 0 0 0.375rem;
    color: var(--pid-ink);
}
.download-card__kind {
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
    margin: 0;
}
.download-card__arrow {
    position: absolute;
    bottom: 1.25rem;
    right: 1.75rem;
    font-size: 1.5rem;
    color: var(--pid-ink);
    transition: transform 0.2s ease;
}
.download-card:hover .download-card__arrow { transform: translateY(3px); }

/* A document we hold but have not uploaded yet: still listed, so visitors can
   see it exists and ask for it, but not dressed up as a working download. */
.download-card--on-request {
    cursor: default;
}
.download-card--on-request .download-card__arrow {
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pid-ink-soft);
    bottom: 1.4rem;
}
.download-card--on-request:hover .download-card__arrow { transform: none; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    position: relative;
    background: var(--pid-surface-dark);
    color: rgba(255, 255, 255, 0.7);
    border-top: 4px solid transparent;
    background-image:
        linear-gradient(var(--pid-surface-dark), var(--pid-surface-dark)),
        var(--pid-rainbow);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
.site-footer .wp-block-heading {
    color: var(--pid-canvas);
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    line-height: 1.5;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 1rem;
}
.site-footer p {
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.65;
}
.site-footer a { color: rgba(255, 255, 255, 0.78); text-decoration: none; transition: color 0.15s ease; }
.site-footer a:hover { color: var(--pid-canvas); }
.site-footer .footer-link a { color: rgba(255, 255, 255, 0.78); }
.site-footer .footer-legal {
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    line-height: 1.6;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}
.site-footer .footer-land-ack {
    font-style: italic;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.875rem;
    line-height: 1.7;
    max-width: 620px;
    margin-inline: auto;
    text-align: center;
    text-wrap: pretty;
}
.site-footer .footer-ein {
    color: rgba(255, 255, 255, 0.5);
}
.site-footer .footer-brand a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
.site-footer .footer-brand a:hover {
    color: var(--pid-canvas);
}
.site-footer .wp-block-separator {
    background-color: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: rgba(255, 255, 255, 0.28) !important;
    opacity: 1;
}
.site-footer .wp-block-columns {
    gap: clamp(2rem, 4vw, 4rem);
}
@media (max-width: 781px) {
    .site-footer .wp-block-columns {
        gap: 2.5rem;
    }
    .site-footer .footer-brand { margin-bottom: 0; }
}

/* ============================================================
   ANIMATION HELPERS
   ============================================================ */
.animate-on-scroll { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--pid-ease), transform 0.7s var(--pid-ease); }
.animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
}

@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ============================================================
   PAGE FEATURED IMAGE (page.html)
   ============================================================ */
.pid-page-feature {
    margin: 0 !important;
}
.pid-page-feature img {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    display: block;
}
@media (max-width: 781px) {
    .pid-page-feature img { max-height: 360px; }
}

/* ============================================================
   RESOURCE ORG CARDS (inside community resource pages)
   ============================================================ */
.org-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 1.75rem 0 2.5rem;
    max-width: var(--pid-wide);
    margin-inline: auto;
    width: 100%;
}
.org-card {
    display: flex;
    flex-direction: column;
    padding: 2rem 1.75rem 1.75rem;
    background: var(--pid-canvas);
    border: 1px solid var(--pid-rule);
    border-left: 3px solid var(--pid-purple);
    border-radius: 2px;
    transition: transform 0.25s var(--pid-ease), border-color 0.2s ease, box-shadow 0.25s var(--pid-ease);
}
.org-card:hover {
    transform: translateY(-3px);
    border-left-color: var(--pid-magenta);
    box-shadow: 0 18px 40px -26px rgba(13, 13, 13, 0.2);
}
.org-card__name {
    font-family: var(--pid-serif);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 0.75rem;
    color: var(--pid-ink);
    text-wrap: balance;
}
.org-card__desc {
    font-size: 0.9375rem;
    color: var(--pid-ink-muted);
    line-height: 1.6;
    margin: 0 0 1.25rem;
}
.org-card__link {
    margin-top: auto;
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--pid-ink);
    padding-bottom: 2px;
    align-self: flex-start;
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.org-card__link:hover {
    color: var(--pid-purple);
    border-color: var(--pid-purple);
}
@media (max-width: 1024px) {
    .org-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .org-grid { grid-template-columns: 1fr; gap: 1rem; }
    .org-card { padding: 1.5rem 1.25rem 1.5rem; }
    .org-card__name { font-size: 1.25rem; }
}

/* ============================================================
   CRISIS CALLOUT (prominent emergency contact box)
   ============================================================ */
.crisis-callout {
    background: var(--pid-ink);
    color: var(--pid-canvas);
    padding: 2rem clamp(1.5rem, 4vw, 2.5rem);
    border-left: 4px solid var(--pid-magenta);
    margin: 2rem 0;
}
.crisis-callout h3 {
    color: var(--pid-canvas);
    font-family: var(--pid-serif);
    font-size: 1.5rem;
    margin: 0 0 0.75rem;
}
.crisis-callout p {
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 0.625rem;
    font-size: 0.9375rem;
    line-height: 1.65;
}
.crisis-callout strong {
    color: var(--pid-canvas);
    font-family: var(--pid-mono);
    font-size: 1rem;
    letter-spacing: 0.02em;
}
.crisis-callout a {
    color: var(--pid-canvas);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.crisis-callout a:hover {
    border-bottom-color: var(--pid-canvas);
}

/* ============================================================
   RESOURCE DIRECTORY INDEX (legacy, formerly used on /community, kept for future reuse)
   ============================================================ */
.resource-index {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem 2rem;
    margin: 0;
    max-width: var(--pid-wide);
    margin-inline: auto;
    width: 100%;
}
.resource-index__card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--pid-canvas);
    border: 1px solid var(--pid-rule);
    border-radius: 3px;
    overflow: hidden;
    text-decoration: none;
    color: var(--pid-ink);
    transition: transform 0.35s var(--pid-ease), box-shadow 0.35s var(--pid-ease), border-color 0.25s ease;
}
.resource-index__card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--pid-purple);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s var(--pid-ease);
}
.resource-index__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 32px 60px -32px rgba(13, 13, 13, 0.32);
    border-color: var(--pid-ink);
}
.resource-index__card:hover::after {
    transform: scaleX(1);
}
.resource-index__image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative;
}
.resource-index__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(13, 11, 20, 0.08) 100%);
    pointer-events: none;
}
.resource-index__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s var(--pid-ease);
}
.resource-index__card:hover .resource-index__image img { transform: scale(1.06); }
.resource-index__body {
    padding: 2.25rem 2rem 2.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.25rem;
}
.resource-index__eyebrow {
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
    margin: 0 0 0.75rem;
}
.resource-index__title {
    font-family: var(--pid-serif);
    font-size: clamp(1.625rem, 2.25vw, 1.875rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--pid-ink);
    margin: 0 0 0.875rem;
    text-wrap: balance;
}
.resource-index__desc {
    font-size: 1rem;
    color: var(--pid-ink-muted);
    line-height: 1.65;
    margin: 0 0 1.75rem;
    flex: 1;
}
.resource-index__cta {
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-ink);
    padding: 0;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s ease, gap 0.3s var(--pid-ease);
    border: 0;
}
.resource-index__cta::before {
    content: "";
    display: inline-block;
    width: 2rem;
    height: 1px;
    background: currentColor;
    transition: width 0.3s var(--pid-ease);
}
.resource-index__card:hover .resource-index__cta {
    color: var(--pid-purple);
    gap: 0.75rem;
}
.resource-index__card:hover .resource-index__cta::before {
    width: 2.75rem;
}

@media (max-width: 1024px) {
    .resource-index { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1.25rem; }
}
@media (max-width: 600px) {
    .resource-index { grid-template-columns: 1fr; gap: 1.5rem; }
    .resource-index__body { padding: 1.25rem 1.25rem 1.5rem; }
    .resource-index__title { font-size: 1.375rem; }
}

/* Generous breathing room for the community pages on wide screens */
.pid-community-page .pid-section {
    padding-block: clamp(3.5rem, 7vw, 6.5rem);
}
.pid-community-page .pid-section-head + * {
    margin-top: 1rem;
}
@media (min-width: 1200px) {
    .pid-community-page .pid-section > .pid-container {
        padding-inline: 2rem;
    }
}

/* ============================================================
   /COMMUNITY INDEX, DEDICATED LAYOUT
   ============================================================ */
.pid-section.pid-community-hero {
    padding-block: clamp(4.5rem, 10vw, 9rem);
    position: relative;
}
.pid-community-hero > .pid-container {
    position: relative;
}
.pid-community-hero > .pid-container::before {
    content: "";
    display: block;
    height: 4px;
    width: 96px;
    background: var(--pid-rainbow);
    margin-bottom: 1.5rem;
    border-radius: 2px;
}
.pid-community-hero .pid-community-hero__eyebrow {
    margin: 0 0 1.25rem;
    display: block;
}
.pid-community-hero h1.pid-community-hero__title {
    font-size: clamp(3rem, 9vw, 6.25rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin: 0 0 1.75rem;
    max-width: 16ch;
    text-wrap: balance;
    font-weight: 600;
}
.pid-community-hero p.pid-community-hero__lede {
    font-size: clamp(1.1875rem, 1.8vw, 1.4375rem);
    line-height: 1.55;
    color: var(--pid-ink);
    max-width: 60ch;
    text-wrap: pretty;
    margin: 0;
    font-weight: 400;
    opacity: 0.82;
}

.pid-section.pid-community-main {
    padding-block: clamp(4rem, 9vw, 7.5rem);
}
.pid-community-main > .pid-community-browse {
    margin-bottom: clamp(4rem, 7vw, 6rem);
}
.pid-community-main .pid-section-head {
    margin-bottom: clamp(2.5rem, 4.5vw, 3.5rem);
    padding-bottom: 1.5rem;
}
.pid-community-main .pid-section-head h2 {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    letter-spacing: -0.02em;
}
.pid-community-main .resource-index {
    margin-block: 0;
}

/* Submission callout card at the bottom */
.pid-community-callout {
    max-width: 720px;
    margin-inline: auto;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.75rem, 4vw, 3rem) !important;
    text-align: center;
    background: var(--pid-canvas-warm);
    border: 1px solid var(--pid-rule);
    border-top: 3px solid var(--pid-purple);
    border-radius: 2px;
    transition: border-top-color 0.2s ease;
}
.pid-community-callout:hover {
    border-top-color: var(--pid-magenta);
}
.pid-community-callout .eyebrow {
    margin: 0 auto 0.75rem !important;
    display: block;
}
/* h2 as well as h3: used as a standalone page section (the Doughman
   tribute) the heading is top-level, not a sub-heading of one. */
.pid-community-callout h2,
.pid-community-callout h3 {
    font-family: var(--pid-serif);
    font-size: clamp(1.625rem, 3vw, 2.25rem);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 auto 1rem;
    max-width: 22ch;
    text-wrap: balance;
    color: var(--pid-ink);
}
.pid-community-callout p {
    color: var(--pid-ink-muted);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 auto 1.75rem;
    max-width: 50ch;
    text-wrap: pretty;
}
/* The bottom margin above is spacing for a following button. Without one
   the card carries a dead band under its last line. */
.pid-community-callout > p:last-child { margin-bottom: 0; }
.pid-community-callout .wp-block-button__link {
    padding: 1rem 2rem;
    font-size: 0.9375rem;
}

@media (max-width: 781px) {
    .pid-community-hero__title {
        max-width: none;
    }
    .pid-community-callout {
        margin-inline: 0;
    }
}

/* ============================================================
   PLAN YOUR TRIP, TRANSPORTATION GRID
   ============================================================ */
.transit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    max-width: var(--pid-wide);
    margin-inline: auto;
    width: 100%;
}
.transit-grid--six {
    grid-template-columns: repeat(3, 1fr);
}
.transit-card {
    background: var(--pid-canvas);
    border: 1px solid var(--pid-rule);
    padding: 2rem 1.5rem 1.75rem;
    text-align: left;
    transition: transform 0.3s var(--pid-ease), border-color 0.2s ease;
}
.transit-card:hover {
    transform: translateY(-2px);
    border-color: var(--pid-ink);
}
.transit-card__icon {
    display: inline-block;
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.875rem;
}
.transit-card__title {
    font-family: var(--pid-serif);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--pid-ink);
}
.transit-card__body {
    font-size: 0.9375rem;
    color: var(--pid-ink-muted);
    line-height: 1.65;
    margin: 0;
}

/* ============================================================
   PLAN YOUR TRIP, HOTEL CARDS (text-based, near the Strip)
   ============================================================ */
.hotel-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: var(--pid-wide);
    margin-inline: auto;
    width: 100%;
}
.hotel-card {
    display: flex;
    flex-direction: column;
    background: var(--pid-canvas);
    border: 1px solid var(--pid-rule);
    border-left: 3px solid var(--pid-purple);
    padding: 2rem 2rem 1.75rem;
    transition: transform 0.25s var(--pid-ease), border-color 0.2s ease, box-shadow 0.25s var(--pid-ease);
}
.hotel-card:hover {
    transform: translateY(-3px);
    border-left-color: var(--pid-magenta);
    box-shadow: 0 18px 40px -26px rgba(13, 13, 13, 0.25);
}
.hotel-card__type {
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
    margin: 0 0 0.625rem;
}
.hotel-card__name {
    font-family: var(--pid-serif);
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--pid-ink);
    margin: 0 0 0.625rem;
    text-wrap: balance;
}
.hotel-card__distance {
    font-family: var(--pid-sans);
    font-size: 0.875rem;
    color: var(--pid-purple);
    font-weight: 500;
    margin: 0 0 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--pid-rule);
}
.hotel-card__body {
    font-size: 0.9375rem;
    color: var(--pid-ink-muted);
    line-height: 1.65;
    margin: 0 0 1.25rem;
    flex: 1;
}
.hotel-card__address {
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: var(--pid-ink-muted);
    margin: 0 0 1rem;
}
.hotel-card__cta {
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pid-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--pid-ink);
    padding-bottom: 2px;
    align-self: flex-start;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.hotel-card__cta:hover {
    color: var(--pid-purple);
    border-color: var(--pid-purple);
}
@media (max-width: 900px) {
    .hotel-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PLAN YOUR TRIP, ACCESSIBILITY HIGHLIGHTS
   ============================================================ */
.access-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: var(--pid-wide);
    margin-inline: auto;
    width: 100%;
}
.access-card {
    background: var(--pid-canvas);
    border: 1px solid var(--pid-rule);
    padding: 1.5rem 1.5rem 1.75rem;
    border-left: 3px solid var(--pid-deep-blue);
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.access-card:hover {
    transform: translateY(-2px);
    border-left-color: var(--pid-magenta);
}
.access-card__icon {
    display: inline-block;
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 0.625rem;
}
.access-card__title {
    font-family: var(--pid-serif);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--pid-ink);
    margin: 0 0 0.375rem;
}
.access-card__body {
    font-size: 0.9375rem;
    color: var(--pid-ink-muted);
    line-height: 1.65;
    margin: 0;
}

@media (max-width: 1024px) {
    .transit-grid,
    .transit-grid--six { grid-template-columns: repeat(2, 1fr); }
    .access-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .transit-grid,
    .transit-grid--six { grid-template-columns: 1fr; }
    .access-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   GET INVOLVED, PRINCIPLES GRID
   ============================================================ */
.principles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    max-width: var(--pid-wide);
    margin-inline: auto;
    width: 100%;
}
.principle-card {
    padding: 1.75rem 1.5rem 1.5rem;
    border-top: 1px solid var(--pid-rule);
    transition: border-color 0.2s ease;
}
.principle-card:hover { border-top-color: var(--pid-ink); }
.principle-card__number {
    display: inline-block;
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    color: var(--pid-ink-muted);
    margin-bottom: 0.875rem;
}
.principle-card__title {
    font-family: var(--pid-serif);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--pid-ink);
    margin: 0 0 0.625rem;
    text-wrap: balance;
}
.principle-card__body {
    font-size: 0.9375rem;
    color: var(--pid-ink-muted);
    line-height: 1.65;
    margin: 0;
}
@media (max-width: 1024px) {
    .principles-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media (max-width: 600px) {
    .principles-grid { grid-template-columns: 1fr; }
}

/* Sponsor tier "best for" fit line (replaces benefits list for new-org version) */
.sponsor-tier__fit {
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
    margin: 0 0 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--pid-rule);
}
.sponsor-tier--featured .sponsor-tier__fit {
    color: rgba(255, 255, 255, 0.7);
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

/* ============================================================
   SPONSORS PAGE, 6-TIER GRID + BENEFITS MATRIX
   ============================================================ */
.sponsor-tiers--six {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 3.5rem;
}
.sponsor-tiers--six .sponsor-tier__amount {
    font-size: clamp(2rem, 3vw, 2.75rem);
}
.sponsor-tiers--six .sponsor-tier {
    padding: 1.75rem 1.5rem 1.75rem;
}
.sponsor-tiers--six .sponsor-tier--featured {
    transform: none;
}
.sponsor-tiers--six .sponsor-tier--featured:hover {
    transform: translateY(-4px);
}
@media (max-width: 1100px) {
    .sponsor-tiers--six { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .sponsor-tiers--six { grid-template-columns: 1fr; }
}

.sponsor-matrix-wrap {
    max-width: var(--pid-wide);
    margin-inline: auto;
    width: 100%;
    margin-top: 3rem;
}
.sponsor-matrix-label {
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
    margin: 0 0 1rem;
    text-align: center;
}
.sponsor-matrix-scroll {
    overflow-x: auto;
    border: 1px solid var(--pid-rule);
    border-radius: 3px;
}
.sponsor-matrix {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}
.sponsor-matrix thead th {
    font-family: var(--pid-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--pid-ink);
    background: var(--pid-canvas-warm);
    padding: 1.25rem 0.75rem 0.625rem;
    text-align: center;
    border-bottom: 1px solid var(--pid-rule);
}
.sponsor-matrix thead .sponsor-matrix__amount-row td {
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--pid-ink-muted);
    padding: 0 0.75rem 1rem;
    text-align: center;
    background: var(--pid-canvas-warm);
    border-bottom: 1px solid var(--pid-rule);
    font-weight: 500;
}
.sponsor-matrix .sponsor-matrix__benefit-col {
    text-align: left !important;
    min-width: 240px;
    padding-left: 1.5rem !important;
}
.sponsor-matrix tbody th {
    font-family: var(--pid-sans);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--pid-ink);
    text-align: left;
    padding: 0.9rem 1.5rem;
    border-bottom: 1px solid var(--pid-rule);
    background: var(--pid-canvas);
}
.sponsor-matrix tbody tr:last-child th,
.sponsor-matrix tbody tr:last-child td {
    border-bottom: 0;
}
.sponsor-matrix tbody td {
    padding: 0.9rem 0.75rem;
    text-align: center;
    color: var(--pid-ink-muted);
    font-size: 1rem;
    border-bottom: 1px solid var(--pid-rule);
    background: var(--pid-canvas);
}
.sponsor-matrix tbody td.is-yes {
    color: var(--pid-purple);
    font-size: 1.125rem;
}
.sponsor-matrix tbody td.is-no {
    color: var(--pid-rule);
}
.sponsor-matrix tbody tr:hover th,
.sponsor-matrix tbody tr:hover td {
    background: var(--pid-canvas-warm);
}

/* ============================================================
   SPONSORS PAGE, PRICING TABLES (parade entry + vendor fees)
   ============================================================ */
.pricing-table-wrap {
    max-width: 840px;
    margin-inline: auto;
    width: 100%;
}
.pricing-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--pid-rule);
    border-radius: 3px;
    overflow: hidden;
}
.pricing-table thead th {
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
    background: var(--pid-canvas-warm);
    padding: 1rem 1.5rem;
    text-align: left;
    border-bottom: 1px solid var(--pid-rule);
    font-weight: 500;
}
.pricing-table thead th:not(:first-child) {
    text-align: right;
}
.pricing-table tbody th {
    font-weight: 500;
    color: var(--pid-ink);
    padding: 1.25rem 1.5rem;
    text-align: left;
    background: var(--pid-canvas);
    border-bottom: 1px solid var(--pid-rule);
    vertical-align: top;
}
.pricing-table tbody tr:last-child th,
.pricing-table tbody tr:last-child td {
    border-bottom: 0;
}
.pricing-table__title {
    display: block;
    font-family: var(--pid-serif);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--pid-ink);
    line-height: 1.2;
    margin-bottom: 0.25rem;
}
.pricing-table__note {
    display: block;
    font-family: var(--pid-sans);
    font-size: 0.8125rem;
    color: var(--pid-ink-muted);
    font-weight: 400;
    line-height: 1.4;
}
.pricing-table tbody td.pricing-table__price {
    padding: 1.25rem 1.5rem;
    text-align: right;
    font-family: var(--pid-serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--pid-ink);
    background: var(--pid-canvas);
    border-bottom: 1px solid var(--pid-rule);
    vertical-align: middle;
}
.pricing-table__footnote {
    font-family: var(--pid-sans);
    font-size: 0.8125rem;
    font-style: italic;
    color: var(--pid-ink-muted);
    line-height: 1.6;
    margin: 1rem 0 0;
    text-align: center;
}
@media (max-width: 600px) {
    .pricing-table thead { display: none; }
    .pricing-table tbody th,
    .pricing-table tbody td { display: block; text-align: left; padding: 0.75rem 1.25rem; }
    .pricing-table tbody td.pricing-table__price { text-align: left; padding-top: 0; padding-bottom: 1.25rem; }
    .pricing-table__title { font-size: 1rem; }
}

/* ============================================================
   SPONSORS PAGE, LOGO WALL (past sponsors)
   ============================================================ */
.sponsor-logo-wall {
    max-width: var(--pid-wide);
    margin-inline: auto;
    width: 100%;
}
.sponsor-logo-wall__tier {
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
    margin: 0 0 1rem;
    text-align: center;
    padding-top: 1rem;
}
.sponsor-logo-wall__tier:not(:first-child) {
    padding-top: 2.5rem;
    border-top: 1px solid var(--pid-rule);
    margin-top: 2.5rem;
}
.sponsor-logo-wall__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.25rem;
}
.sponsor-logo-wall__slot {
    aspect-ratio: 3 / 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pid-canvas);
    border: 1px dashed var(--pid-rule);
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
    border-radius: 3px;
}

/* ============================================================
   SPONSORS WALL (live CPT, /sponsors page)
   ============================================================ */
.sponsors-wall {
    max-width: var(--pid-wide);
    margin-inline: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 5vw, 4.5rem);
}
.sponsors-wall--empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--pid-ink-muted);
    font-style: italic;
    border: 1px dashed var(--pid-rule);
    border-radius: 3px;
}
.sponsors-wall__tier-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.sponsors-wall__tier-head {
    padding-bottom: 1rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--pid-rule);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.sponsors-wall__tier-label {
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
    font-weight: 500;
    margin: 0;
}
.sponsors-wall__tier-amount {
    color: var(--pid-ink);
    opacity: 0.55;
    font-weight: 500;
}
.sponsors-wall__tier-desc {
    font-family: var(--pid-sans);
    font-size: 0.9375rem;
    color: var(--pid-ink-muted);
    margin: 0;
    max-width: 60ch;
    line-height: 1.5;
}
.sponsors-wall__tier-section--presenting .sponsors-wall__tier-label {
    color: var(--pid-purple);
}
.sponsors-wall__tier-section--presenting .sponsors-wall__tier-amount {
    color: var(--pid-magenta);
    opacity: 1;
}

/* Tier-adaptive card grids (Diamond, Platinum, Gold) */
.sponsors-wall__card-grid {
    display: grid;
    gap: 1.5rem;
}
.sponsors-wall__card-grid--diamond {
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}
.sponsors-wall__card-grid--platinum {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.sponsors-wall__card-grid--gold {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}
.sponsors-wall__card-grid--diamond .sponsor-card {
    border-left: 3px solid var(--pid-purple);
}
.sponsors-wall__card-grid--platinum .sponsor-card {
    border-top: 2px solid var(--pid-magenta);
}
.sponsors-wall__card-grid--gold .sponsor-card__logo {
    aspect-ratio: 16 / 9;
    padding: 1.25rem;
}
.sponsors-wall__card-grid--gold .sponsor-card__body {
    padding: 1.25rem 1.25rem 1.5rem;
}
.sponsors-wall__card-grid--gold .sponsor-card__name {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}
.sponsors-wall__card-grid--gold .sponsor-card__desc {
    font-size: 0.875rem;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* Silver tier, logo tile grid */
.sponsors-wall__logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}
.sponsors-wall__logo-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    padding: 1.5rem 1rem;
    background: var(--pid-canvas);
    border: 1px solid var(--pid-rule);
    border-radius: 3px;
    text-decoration: none;
    color: var(--pid-ink);
    min-height: 140px;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.sponsors-wall__logo-tile:hover {
    border-color: var(--pid-ink);
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -20px rgba(13, 13, 13, 0.2);
}
.sponsors-wall__logo-tile-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    width: 100%;
}
.sponsors-wall__logo-tile-logo img {
    max-height: 56px;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(15%);
    transition: filter 0.2s ease;
}
.sponsors-wall__logo-tile:hover .sponsors-wall__logo-tile-logo img {
    filter: grayscale(0%);
}
.sponsors-wall__logo-tile-fallback {
    font-family: var(--pid-serif);
    font-size: 2rem;
    font-weight: 600;
    color: var(--pid-ink-muted);
    opacity: 0.5;
    line-height: 1;
}
.sponsors-wall__logo-tile-name {
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    color: var(--pid-ink);
    margin: 0;
    line-height: 1.3;
    text-wrap: balance;
}

/* Featured presenting inside the sponsors wall, single large card */
.sponsor-featured-grid--wall {
    grid-template-columns: 1fr;
    max-width: 100%;
}
.sponsor-featured-grid--wall .sponsor-featured {
    min-height: 380px;
}

/* Inline community-tier marquee variant, lighter, embedded */
.sponsor-marquee--inline {
    padding-block: 0.5rem;
    margin-top: 0.25rem;
}
.sponsor-marquee--inline .sponsor-marquee__item {
    height: 64px;
    min-width: 120px;
    max-width: 180px;
}
.sponsor-marquee--inline .sponsor-marquee__item img {
    max-height: 52px;
}
.sponsor-marquee--inline .sponsor-marquee__name {
    font-size: 1rem;
}

@media (max-width: 700px) {
    .sponsors-wall__card-grid--diamond,
    .sponsors-wall__card-grid--platinum,
    .sponsors-wall__card-grid--gold {
        grid-template-columns: 1fr;
    }
    .sponsors-wall__logo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Sponsor card, base (used inside card grids) */
.sponsor-card {
    display: flex;
    flex-direction: column;
    background: var(--pid-canvas);
    border: 1px solid var(--pid-rule);
    border-radius: 3px;
    overflow: hidden;
    transition: transform 0.3s var(--pid-ease), box-shadow 0.3s var(--pid-ease), border-color 0.2s ease;
}
.sponsor-card:hover {
    transform: translateY(-3px);
    border-color: var(--pid-ink);
    box-shadow: 0 24px 48px -28px rgba(13, 13, 13, 0.25);
}
.sponsor-card__logo {
    aspect-ratio: 16 / 9;
    background: var(--pid-canvas-warm);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--pid-rule);
}
.sponsor-card__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.sponsor-card__logo-fallback {
    font-family: var(--pid-serif);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 600;
    color: var(--pid-ink-muted);
    opacity: 0.4;
}
.sponsor-card__body {
    padding: 1.5rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.sponsor-card__tier {
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
    margin: 0 0 0.5rem;
}
.sponsor-card__name {
    font-family: var(--pid-serif);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--pid-ink);
    margin: 0 0 0.375rem;
    text-wrap: balance;
}
.sponsor-card__tagline {
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pid-magenta);
    font-weight: 600;
    margin: 0 0 0.75rem;
    line-height: 1.4;
}
.sponsor-card__desc {
    font-size: 0.9375rem;
    color: var(--pid-ink-muted);
    line-height: 1.65;
    margin: 0 0 1.25rem;
    flex: 1;
}
.sponsor-card__cta {
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--pid-ink);
    padding-bottom: 2px;
    align-self: flex-start;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.sponsor-card__cta:hover {
    color: var(--pid-purple);
    border-color: var(--pid-purple);
}

/* ============================================================
   HOMEPAGE FEATURED PRESENTING SPONSOR CARD
   (also used inside sponsors wall via .sponsor-featured-grid--wall)
   ============================================================ */
.sponsor-featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 1.75rem;
    max-width: var(--pid-wide);
    margin-inline: auto;
    width: 100%;
}
.sponsor-featured {
    position: relative;
    background: var(--pid-ink);
    color: var(--pid-canvas);
    padding: clamp(2rem, 4vw, 3.5rem);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 420px;
}
.sponsor-featured::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 15%, rgba(126, 0, 254, 0.25), transparent 55%);
    pointer-events: none;
}
.sponsor-featured > * { position: relative; z-index: 1; }
.sponsor-featured__eyebrow {
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pid-magenta-text);
    margin: 0 0 1.5rem;
}
/* This panel is dark in both colour modes, and sponsors supply whatever
   artwork they have — the presenting sponsor's is dark navy on
   transparency, which simply disappeared here. A light plate makes any
   logo legible without touching the files, and reads as a logo card
   rather than an accident. */
.sponsor-featured__logo {
    margin-bottom: 1.75rem;
    max-height: 140px;
    display: flex;
    align-items: center;
}
/* The plate sits on the image, not the container, so the single-letter
   fallback below (white type, no artwork) is left alone. */
.sponsor-featured__logo img {
    max-height: 140px;
    max-width: 100%;
    object-fit: contain;
    background: #FFFFFF;
    padding: 0.875rem 1.25rem;
    border-radius: 4px;
}
.sponsor-featured__logo-fallback {
    font-family: var(--pid-serif);
    font-size: 5rem;
    font-weight: 600;
    color: var(--pid-canvas);
    opacity: 0.85;
    line-height: 1;
}
.sponsor-featured__name {
    font-family: var(--pid-serif);
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 600;
    line-height: 1.1;
    color: var(--pid-canvas);
    margin: 0 0 0.5rem;
    text-wrap: balance;
}
.sponsor-featured__tagline {
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-magenta);
    font-weight: 600;
    margin: 0 0 1.25rem;
    line-height: 1.4;
}
.sponsor-featured__desc {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.0625rem;
    line-height: 1.7;
    margin: 0 0 1.75rem;
    max-width: 48ch;
    flex: 1;
}
.sponsor-featured__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--pid-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-canvas);
    background: transparent;
    border: 1px solid var(--pid-canvas);
    padding: 0.9rem 1.5rem;
    border-radius: 2px;
    text-decoration: none;
    align-self: flex-start;
    transition: background 0.2s ease, color 0.2s ease;
}
.sponsor-featured__cta:hover {
    background: var(--pid-magenta);
    color: var(--pid-canvas);
    border-color: var(--pid-magenta);
}

/* Empty state, "Be our first Presenting sponsor" */
.sponsor-featured--empty {
    background: var(--pid-canvas);
    color: var(--pid-ink);
    border: 1px solid var(--pid-rule);
    border-left: 3px solid var(--pid-magenta);
    min-height: auto;
}
.sponsor-featured--empty::before { display: none; }
.sponsor-featured--empty .sponsor-featured__eyebrow { color: var(--pid-magenta-text); }
.sponsor-featured--empty .sponsor-featured__name { color: var(--pid-ink); }
.sponsor-featured--empty .sponsor-featured__desc { color: var(--pid-ink-muted); }
.sponsor-featured--empty .sponsor-featured__cta {
    color: var(--pid-ink);
    border-color: var(--pid-ink);
}
.sponsor-featured--empty .sponsor-featured__cta:hover {
    background: var(--pid-ink);
    color: var(--pid-canvas);
}

@media (max-width: 600px) {
    .sponsor-featured-grid { grid-template-columns: 1fr; }
    .sponsor-featured { min-height: auto; }
}

/* ============================================================
   SPONSORS MARQUEE (homepage, community tier carousel)
   ============================================================ */
.pid-section--marquee {
    padding-block: clamp(3rem, 6vw, 5rem) !important;
}
.sponsor-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding-block: 1rem;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, black 5%, black 95%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, black 5%, black 95%, transparent 100%);
}
.sponsor-marquee--empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--pid-ink-muted);
    font-style: italic;
    border: 1px dashed var(--pid-rule);
    border-radius: 3px;
    max-width: 640px;
    margin-inline: auto;
}
.sponsor-marquee__track {
    display: flex;
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5rem);
    animation: marquee-scroll 45s linear infinite;
    width: max-content;
}
.sponsor-marquee:hover .sponsor-marquee__track {
    animation-play-state: paused;
}
.sponsor-marquee__clone {
    display: flex;
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5rem);
}
.sponsor-marquee__item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    min-width: 140px;
    max-width: 220px;
    padding: 0 1rem;
    opacity: 0.85;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.sponsor-marquee__item:hover {
    opacity: 1;
    transform: scale(1.03);
}
.sponsor-marquee__item a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    height: 100%;
    width: 100%;
}
.sponsor-marquee__item img {
    max-height: 70px;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(20%);
    transition: filter 0.2s ease;
}
.sponsor-marquee__item:hover img {
    filter: grayscale(0%);
}
.sponsor-marquee__name {
    font-family: var(--pid-serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--pid-ink);
    line-height: 1.2;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .sponsor-marquee__track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
    }
    .sponsor-marquee__clone { display: none; }
}

/* ============================================================
   PARADE PAGE, DETAILS GRID
   ============================================================ */
.parade-details {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: var(--pid-wide);
    margin: 0 auto;
    padding: 0;
}
.parade-details__item {
    padding: 2rem 1.5rem 1.75rem;
    background: var(--pid-canvas);
    border: 1px solid var(--pid-rule);
    border-top: 3px solid var(--pid-purple);
    border-radius: 3px;
    margin: 0;
    transition: transform 0.2s ease, border-top-color 0.2s ease;
}
.parade-details__item:hover {
    transform: translateY(-3px);
    border-top-color: var(--pid-magenta);
}
.parade-details__label {
    display: block;
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
    margin: 0 0 0.75rem;
    font-weight: 500;
}
.parade-details__value {
    display: block;
    font-family: var(--pid-serif);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--pid-ink);
    margin: 0 0 0.5rem;
    text-wrap: balance;
}
.parade-details__note {
    display: block;
    font-family: var(--pid-sans);
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--pid-ink-muted);
    margin: 0;
}
@media (max-width: 1024px) {
    .parade-details { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .parade-details { grid-template-columns: 1fr; gap: 1rem; }
}

/* ============================================================
   PARADE PAGE, ENTRY CARDS (participate section)
   ============================================================ */
.parade-entry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    max-width: var(--pid-wide);
    margin-inline: auto;
    width: 100%;
}
.parade-entry-card {
    display: flex;
    flex-direction: column;
    background: var(--pid-canvas);
    border: 1px solid var(--pid-rule);
    border-radius: 3px;
    padding: 2.25rem 2rem 2rem;
    transition: transform 0.3s var(--pid-ease), border-color 0.2s ease, box-shadow 0.3s var(--pid-ease);
}
.parade-entry-card:hover {
    transform: translateY(-4px);
    border-color: var(--pid-ink);
    box-shadow: 0 24px 48px -28px rgba(13, 13, 13, 0.3);
}
.parade-entry-card__title {
    font-family: var(--pid-serif);
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--pid-ink);
    margin: 0 0 0.875rem;
    text-wrap: balance;
}
.parade-entry-card__desc {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--pid-ink-muted);
    margin: 0 0 1.5rem;
    flex: 1;
}
.parade-entry-card__prices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 1.25rem 0;
    border-top: 1px solid var(--pid-rule);
    border-bottom: 1px solid var(--pid-rule);
    margin-bottom: 1rem;
}
.parade-entry-card__price {
    display: flex;
    flex-direction: column;
    text-align: center;
}
.parade-entry-card__price:first-child {
    border-right: 1px solid var(--pid-rule);
}
.parade-entry-card__price-label {
    font-family: var(--pid-mono);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
    margin-bottom: 0.375rem;
}
.parade-entry-card__price-value {
    font-family: var(--pid-serif);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 600;
    color: var(--pid-ink);
    line-height: 1;
}
.parade-entry-card__note {
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: var(--pid-ink-muted);
    margin: 0;
    font-style: italic;
    text-align: center;
}
@media (max-width: 900px) {
    .parade-entry-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PARADE PAGE, TIPS GRID (watch section)
   ============================================================ */
.parade-tips-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    max-width: var(--pid-wide);
    margin-inline: auto;
    width: 100%;
}
.parade-tip-card {
    padding: 1.75rem 1.5rem 1.5rem;
    background: var(--pid-canvas);
    border: 1px solid var(--pid-rule);
    border-left: 3px solid var(--pid-deep-blue);
    border-radius: 2px;
    transition: transform 0.25s var(--pid-ease), border-left-color 0.2s ease;
}
.parade-tip-card:hover {
    transform: translateY(-2px);
    border-left-color: var(--pid-magenta);
}
.parade-tip-card__icon {
    display: inline-block;
    font-size: 1.75rem;
    line-height: 1;
    margin-bottom: 0.75rem;
}
.parade-tip-card__title {
    font-family: var(--pid-serif);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--pid-ink);
    margin: 0 0 0.5rem;
}
.parade-tip-card__body {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--pid-ink-muted);
    margin: 0;
}
@media (max-width: 1024px) {
    .parade-tips-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .parade-tips-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PARADE PAGE, AROUND THE PARADE GRID
   ============================================================ */
.parade-around-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
    max-width: var(--pid-wide);
    margin-inline: auto;
    width: 100%;
}
.parade-around-card {
    display: flex;
    flex-direction: column;
    background: var(--pid-canvas);
    border: 1px solid var(--pid-rule);
    border-radius: 3px;
    overflow: hidden;
    text-decoration: none;
    color: var(--pid-ink);
    transition: transform 0.35s var(--pid-ease), box-shadow 0.35s var(--pid-ease), border-color 0.25s ease;
    position: relative;
}
.parade-around-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--pid-purple);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s var(--pid-ease);
}
.parade-around-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 28px 52px -30px rgba(13, 13, 13, 0.28);
    border-color: var(--pid-ink);
}
.parade-around-card:hover::after {
    transform: scaleX(1);
}
.parade-around-card__image {
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    position: relative;
}
.parade-around-card__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(13, 11, 20, 0.08) 100%);
}
.parade-around-card__body {
    padding: 2rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.parade-around-card__eyebrow {
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
    margin: 0 0 0.75rem;
}
.parade-around-card__title {
    font-family: var(--pid-serif);
    font-size: clamp(1.625rem, 2.5vw, 2rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--pid-ink);
    margin: 0 0 0.875rem;
    text-wrap: balance;
}
.parade-around-card__desc {
    font-size: 1rem;
    color: var(--pid-ink-muted);
    line-height: 1.65;
    margin: 0 0 1.75rem;
    flex: 1;
}
.parade-around-card__cta {
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-ink);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s ease, gap 0.3s var(--pid-ease);
    align-self: flex-start;
}
.parade-around-card__cta::before {
    content: "";
    display: inline-block;
    width: 2rem;
    height: 1px;
    background: currentColor;
    transition: width 0.3s var(--pid-ease);
}
.parade-around-card:hover .parade-around-card__cta {
    color: var(--pid-purple);
    gap: 0.75rem;
}
.parade-around-card:hover .parade-around-card__cta::before {
    width: 2.75rem;
}

@media (max-width: 900px) {
    .parade-around-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .parade-around-card__body { padding: 1.75rem 1.5rem; }
}

/* Sponsor strip section variant for the parade page, use canvas instead of warm */
.parade-sponsors-strip {
    background: var(--pid-canvas) !important;
    border-top: 1px solid var(--pid-rule);
    border-bottom: 1px solid var(--pid-rule);
    padding-block: clamp(3rem, 6vw, 5rem) !important;
}
.parade-sponsors-strip__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 3vw, 3rem);
    max-width: 960px;
    margin: 0 auto;
}
.parade-sponsors-strip__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
}
.parade-sponsors-strip__item img {
    max-height: 64px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.75;
    transition: filter 0.2s ease, opacity 0.2s ease;
}
.parade-sponsors-strip__item a:hover img,
.parade-sponsors-strip__item a:focus img {
    filter: none;
    opacity: 1;
}
.parade-sponsors-strip__name {
    font-family: var(--wp--preset--font-family--fraunces);
    font-size: 1.125rem;
    color: var(--pid-ink);
}

/* ============================================================
   CELEBRATION STRIP (cross-nav between celebration pages)
   ============================================================ */
.celebration-strip-section {
    background: var(--pid-ink);
    color: var(--pid-canvas);
    padding-block: clamp(3rem, 6vw, 5rem) !important;
    position: relative;
    overflow: hidden;
}
.celebration-strip-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, rgba(126, 0, 254, 0.2), transparent 60%);
    pointer-events: none;
}
.celebration-strip-section > .pid-container {
    position: relative;
    z-index: 1;
}
.celebration-strip-section .eyebrow {
    color: var(--pid-magenta-text) !important;
}
.celebration-strip-section .wp-block-heading {
    color: var(--pid-canvas) !important;
}
.celebration-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-width: var(--pid-wide);
    margin-inline: auto;
    width: 100%;
}
.celebration-strip__pill {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    text-decoration: none;
    color: var(--pid-canvas);
    text-align: center;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s var(--pid-ease);
}
.celebration-strip__pill:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--pid-magenta);
    transform: translateY(-3px);
}
.celebration-strip__title {
    display: block;
    font-family: var(--pid-serif);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--pid-canvas);
    margin-bottom: 0.375rem;
}
.celebration-strip__subtitle {
    display: block;
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
.celebration-strip__pill:hover .celebration-strip__subtitle {
    color: var(--pid-magenta);
}
@media (max-width: 900px) {
    .celebration-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .celebration-strip { grid-template-columns: 1fr; }
}

/* ============================================================
   PRIDE WEEK, DAY-BY-DAY SCHEDULE
   ============================================================ */
.pride-week-schedule {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 920px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.pride-week-day {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 0;
    background: var(--pid-canvas);
    border: 1px solid var(--pid-rule);
    border-radius: 3px;
    overflow: hidden;
    transition: transform 0.25s var(--pid-ease), border-color 0.25s ease, box-shadow 0.25s var(--pid-ease);
}
.pride-week-day:hover {
    transform: translateY(-2px);
    border-color: var(--pid-ink);
    box-shadow: 0 18px 36px -24px rgba(13, 13, 13, 0.22);
}
.pride-week-day--linked {
    border-left: 3px solid var(--pid-purple);
}
.pride-week-day--linked:hover {
    border-left-color: var(--pid-magenta);
}
.pride-week-day__meta {
    background: var(--pid-canvas-warm);
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    border-right: 1px solid var(--pid-rule);
}
.pride-week-day__num {
    font-family: var(--pid-mono);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    color: var(--pid-ink-muted);
    margin-bottom: 0.5rem;
}
.pride-week-day__day {
    font-family: var(--pid-serif);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    color: var(--pid-ink);
    margin-bottom: 0.25rem;
}
.pride-week-day__date {
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--pid-ink-muted);
}
.pride-week-day__body {
    padding: 1.75rem 1.75rem 1.75rem;
    display: flex;
    flex-direction: column;
}
.pride-week-day__tag {
    display: inline-block;
    font-family: var(--pid-mono);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-purple);
    margin-bottom: 0.5rem;
    align-self: flex-start;
    padding: 0.3rem 0.625rem;
    background: rgba(126, 0, 254, 0.08);
    border-radius: 2px;
}
.pride-week-day__title {
    font-family: var(--pid-serif);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--pid-ink);
    margin: 0 0 0.5rem;
}
.pride-week-day__desc {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--pid-ink-muted);
    margin: 0 0 0.75rem;
}
.pride-week-day__cta {
    align-self: flex-start;
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--pid-ink);
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.pride-week-day__cta:hover {
    color: var(--pid-purple);
    border-color: var(--pid-purple);
}
@media (max-width: 700px) {
    .pride-week-day {
        grid-template-columns: 1fr;
    }
    .pride-week-day__meta {
        border-right: 0;
        border-bottom: 1px solid var(--pid-rule);
        padding: 1.25rem 1.5rem;
    }
    .pride-week-day__body { padding: 1.5rem; }
}

/* Parade day (centerpiece) treatment, magenta rail + bolder */
.pride-week-day--centerpiece {
    border-color: var(--pid-magenta);
    border-left: 3px solid var(--pid-magenta);
    box-shadow: 0 20px 40px -28px rgba(240, 42, 161, 0.4);
}
.pride-week-day--centerpiece .pride-week-day__meta {
    background: var(--pid-ink);
}
.pride-week-day--centerpiece .pride-week-day__num,
.pride-week-day--centerpiece .pride-week-day__date {
    color: rgba(255, 255, 255, 0.7);
}
.pride-week-day--centerpiece .pride-week-day__day {
    color: var(--pid-canvas);
}
.pride-week-day--centerpiece .pride-week-day__tag {
    /* Small type on a pale magenta tint, so it takes the readable magenta
       rather than the brand one: #E91E8C managed only 3.64:1 here. The
       token is identical to --pid-magenta in dark mode, so only light
       mode changes. */
    color: var(--pid-magenta-text);
    background: rgba(240, 42, 161, 0.1);
}
.pride-week-day--centerpiece .pride-week-day__title {
    color: var(--pid-ink);
}

/* Day with single event + linked category (subtle rail) */
.pride-week-day--linked:not(.pride-week-day--centerpiece) {
    border-left: 3px solid var(--pid-purple);
}

/* Multi-event day, stacked event list */
.pride-week-day__when {
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--pid-ink);
    margin: 0 0 0.625rem;
    opacity: 0.7;
}
.pride-week-day__events {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.pride-week-day__event {
    margin: 0;
}
.pride-week-day__event-link {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.875rem 1rem;
    background: var(--pid-canvas-warm);
    border: 1px solid var(--pid-rule);
    border-radius: 3px;
    text-decoration: none;
    color: var(--pid-ink);
    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.pride-week-day__event-link:hover {
    border-color: var(--pid-ink);
    transform: translateX(2px);
    background: var(--pid-canvas);
}
.pride-week-day__event-main {
    display: flex;
    align-items: baseline;
    gap: 0.875rem;
    flex-wrap: wrap;
}
.pride-week-day__event-time {
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--pid-purple);
    font-weight: 600;
    flex-shrink: 0;
}
.pride-week-day__event-title {
    font-family: var(--pid-serif);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--pid-ink);
    line-height: 1.3;
}
.pride-week-day__event-loc {
    font-size: 0.8125rem;
    color: var(--pid-ink-muted);
    font-style: italic;
}

/* Empty state */
.pride-week-schedule-empty {
    max-width: 920px;
    margin: 0 auto;
    padding: 3rem 2rem;
    text-align: center;
    background: var(--pid-canvas-warm);
    border: 1px dashed var(--pid-rule);
    border-radius: 3px;
}
.pride-week-schedule-empty p {
    color: var(--pid-ink-muted);
    font-style: italic;
    margin: 0;
    line-height: 1.6;
}
.pride-week-schedule-empty a {
    color: var(--pid-purple);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ============================================================
   VENDORS PAGE, FAQ ACCORDION
   ============================================================ */
.vendor-faq {
    max-width: 860px;
    margin-inline: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.vendor-faq__item {
    background: var(--pid-canvas);
    border: 1px solid var(--pid-rule);
    border-radius: 3px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.vendor-faq__item[open] {
    border-color: var(--pid-ink);
    box-shadow: 0 12px 28px -20px rgba(13, 13, 13, 0.2);
}
.vendor-faq__item:hover {
    border-color: var(--pid-ink);
}
.vendor-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.5rem 1.75rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background 0.15s ease;
}
.vendor-faq__q::-webkit-details-marker { display: none; }
.vendor-faq__q:hover {
    background: var(--pid-canvas-warm);
}
.vendor-faq__q-text {
    font-family: var(--pid-serif);
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--pid-ink);
    flex: 1;
    text-wrap: balance;
}
.vendor-faq__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--pid-ink);
    border-radius: 50%;
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--pid-ink);
    transition: transform 0.3s var(--pid-ease), background 0.2s ease, color 0.2s ease;
}
.vendor-faq__item[open] .vendor-faq__icon {
    transform: rotate(45deg);
    background: var(--pid-ink);
    color: var(--pid-canvas);
}
.vendor-faq__a {
    padding: 0 1.75rem 1.75rem;
}
.vendor-faq__a p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--pid-ink-muted);
    margin: 0;
    max-width: 68ch;
    text-wrap: pretty;
}

.vendors-cta {
    max-width: 720px !important;
    margin-inline: auto;
    text-align: center;
    padding-block: 1.5rem;
}

@media (max-width: 600px) {
    .vendor-faq__q { padding: 1.25rem 1.25rem; }
    .vendor-faq__a { padding: 0 1.25rem 1.5rem; }
    .vendor-faq__q-text { font-size: 1rem; }
}

/* ============================================================
   PID DIALOG (HTML5 <dialog> modal)
   ============================================================ */

/* The dialog element itself, shown full-screen via showModal(). */
.pid-dialog {
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    max-width: min(680px, calc(100vw - 2rem));
    width: 100%;
    max-height: calc(100vh - 2rem);
    margin: auto;
    color: var(--pid-ink);
    overscroll-behavior: contain;
}
.pid-dialog:not([open]) {
    display: none;
}
.pid-dialog::backdrop {
    background: rgba(13, 11, 20, 0.82);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    animation: pid-dialog-fade 0.25s ease-out;
}
.pid-dialog[open] {
    animation: pid-dialog-rise 0.3s var(--pid-ease);
}
@keyframes pid-dialog-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes pid-dialog-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Fallback styling for browsers without native <dialog> support */
.pid-dialog.pid-dialog--fallback {
    position: fixed;
    inset: 0;
    z-index: 10000;
    margin: 0;
    max-width: none;
    max-height: none;
    width: 100vw;
    height: 100vh;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(13, 11, 20, 0.82);
}
.pid-dialog.pid-dialog--fallback .pid-dialog__content {
    max-width: min(680px, 100%);
}

.pid-dialog__content {
    position: relative;
    background: var(--pid-canvas);
    border-radius: 4px;
    padding: clamp(2rem, 5vw, 3.25rem) clamp(1.5rem, 4vw, 3rem);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.55);
    -webkit-overflow-scrolling: touch;
}

.pid-dialog__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    border: 1px solid var(--pid-rule);
    border-radius: 50%;
    background: var(--pid-canvas);
    color: var(--pid-ink);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    font-family: var(--pid-sans);
    font-weight: 300;
    padding: 0;
}
.pid-dialog__close:hover,
.pid-dialog__close:focus-visible {
    background: var(--pid-ink);
    color: var(--pid-canvas);
    border-color: var(--pid-ink);
    transform: rotate(90deg);
    outline: 2px solid var(--pid-purple);
    outline-offset: 3px;
}

.pid-dialog__eyebrow {
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pid-purple);
    margin: 0 0 0.875rem;
    padding-right: 3.5rem; /* leave room for the close button */
}
.pid-dialog__title {
    font-family: var(--pid-serif);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--pid-ink);
    margin: 0 0 1.5rem;
    text-wrap: balance;
    padding-right: 3.5rem;
}
.pid-dialog__body {
    margin-bottom: 2rem;
}
.pid-dialog__body p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--pid-ink-muted);
    margin: 0 0 1.25rem;
    text-wrap: pretty;
}
.pid-dialog__body h3 {
    font-family: var(--pid-serif);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--pid-ink);
    margin: 1.75rem 0 0.75rem;
}
.pid-dialog__body ul,
.pid-dialog__body ol {
    margin: 0 0 1.25rem;
    padding-left: 1.5rem;
}
.pid-dialog__body li {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--pid-ink-muted);
    margin-bottom: 0.625rem;
}
.pid-dialog__body li::marker {
    color: var(--pid-purple);
}
.pid-dialog__cta {
    display: block;
    text-align: center;
    font-family: var(--pid-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    padding: 1rem 1.5rem;
    background: var(--pid-ink);
    color: var(--pid-canvas);
    border: 1px solid var(--pid-ink);
    border-radius: 2px;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.pid-dialog__cta:hover,
.pid-dialog__cta:focus-visible {
    background: var(--pid-purple);
    border-color: var(--pid-purple);
    color: var(--pid-canvas);
    outline: 2px solid var(--pid-purple);
    outline-offset: 2px;
}

/* Trigger button, looks like a regular link in the section head */
.pid-section-link__button {
    background: transparent;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.25em;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--pid-purple);
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.pid-section-link__button:hover,
.pid-section-link__button:focus-visible {
    color: var(--pid-purple);
    text-decoration-color: var(--pid-magenta);
    outline: 2px solid transparent;
}
.pid-section-link__button:focus-visible {
    outline-color: var(--pid-purple);
    outline-offset: 4px;
    border-radius: 2px;
}

/* Lock body scroll when dialog is open (native dialog handles this via top-layer,
   but some browsers benefit from an explicit lock) */
html:has(dialog[open]) {
    overflow: hidden;
}

/* Mobile dialog adjustments */
@media (max-width: 600px) {
    .pid-dialog {
        max-width: calc(100vw - 1rem);
        max-height: calc(100vh - 1rem);
        margin: 0.5rem auto;
    }
    .pid-dialog__content {
        padding: 2rem 1.25rem 1.5rem;
    }
    .pid-dialog__close {
        top: 0.75rem;
        right: 0.75rem;
    }
    .pid-dialog__eyebrow,
    .pid-dialog__title {
        padding-right: 3rem;
    }
    .pid-dialog__title {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }
    .pid-dialog__body h3 {
        font-size: 1.125rem;
    }
    .pid-dialog__body p,
    .pid-dialog__body li {
        font-size: 0.9375rem;
    }
}

/* Reduced motion, disable dialog animations */
@media (prefers-reduced-motion: reduce) {
    .pid-dialog[open],
    .pid-dialog::backdrop {
        animation: none !important;
    }
}

/* ============================================================
   HOMEPAGE SPONSOR TEASER
   ============================================================ */
.sponsor-teaser-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 1.5rem;
    max-width: var(--pid-wide);
    margin-inline: auto;
    width: 100%;
}
.sponsor-teaser-cards-stack {
    display: grid;
    gap: 1.5rem;
    grid-template-rows: 1fr 1fr;
}
.sponsor-teaser-card {
    display: flex;
    flex-direction: column;
    padding: 2rem 1.75rem 2rem;
    background: var(--pid-canvas);
    border: 1px solid var(--pid-rule);
    border-radius: 3px;
    text-decoration: none;
    color: var(--pid-ink);
    transition: transform 0.3s var(--pid-ease), box-shadow 0.3s var(--pid-ease), border-color 0.2s ease;
}
.sponsor-teaser-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -24px rgba(13, 13, 13, 0.25);
    border-color: var(--pid-ink);
}
.sponsor-teaser-card--featured {
    background: var(--pid-ink);
    color: var(--pid-canvas);
    border-color: var(--pid-ink);
    padding: clamp(2rem, 4vw, 3.5rem);
    justify-content: flex-end;
    min-height: 320px;
}
.sponsor-teaser-card--featured:hover {
    background: var(--pid-surface-dark);
    border-color: var(--pid-ink);
}
.sponsor-teaser-card__eyebrow {
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
    margin: 0 0 0.75rem;
}
.sponsor-teaser-card--featured .sponsor-teaser-card__eyebrow {
    color: var(--pid-magenta-text);
}
.sponsor-teaser-card__title {
    font-family: var(--pid-serif);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 0.75rem;
    color: inherit;
    text-wrap: balance;
}
.sponsor-teaser-card--featured .sponsor-teaser-card__title {
    font-size: clamp(2rem, 3.5vw, 3rem);
    color: var(--pid-canvas);
}
.sponsor-teaser-card__body {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--pid-ink-muted);
    margin: 0 0 1rem;
    flex: 1;
}
.sponsor-teaser-card--featured .sponsor-teaser-card__body {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1rem;
    line-height: 1.7;
}
.sponsor-teaser-card__cta {
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-magenta);
    border-bottom: 1px solid var(--pid-magenta);
    padding-bottom: 2px;
    align-self: flex-start;
    transition: border-color 0.2s ease;
}
.sponsor-teaser-card--featured .sponsor-teaser-card__cta {
    color: var(--pid-magenta);
}
@media (max-width: 900px) {
    .sponsor-teaser-grid { grid-template-columns: 1fr; }
    .sponsor-teaser-card--featured { min-height: 260px; }
}

/* ============================================================
   GET INVOLVED, THREE WAYS TO SHOW UP
   ============================================================ */
.three-ways-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: var(--pid-wide);
    margin-inline: auto;
    width: 100%;
}
.three-ways-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--pid-canvas);
    border: 1px solid var(--pid-rule);
    overflow: hidden;
    transition: transform 0.3s var(--pid-ease), box-shadow 0.3s var(--pid-ease), border-color 0.2s ease;
}
.three-ways-card:hover {
    transform: translateY(-4px);
    border-color: var(--pid-ink);
    box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.3);
}
.three-ways-card__image {
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    position: relative;
}
.three-ways-card__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 11, 20, 0.1) 0%, rgba(13, 11, 20, 0.45) 100%);
}
.three-ways-card__body {
    padding: 2rem 1.75rem 2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.three-ways-card__kind {
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
    margin: 0 0 0.625rem;
}
.three-ways-card__title {
    font-family: var(--pid-serif);
    font-size: clamp(1.75rem, 2.75vw, 2.25rem);
    font-weight: 600;
    line-height: 1.1;
    margin: 0 0 0.875rem;
    color: var(--pid-ink);
    text-wrap: balance;
}
.three-ways-card__desc {
    font-size: 0.9375rem;
    color: var(--pid-ink-muted);
    line-height: 1.65;
    margin: 0 0 1.5rem;
    flex: 1;
}
.three-ways-card__cta {
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pid-canvas);
    background: var(--pid-ink);
    padding: 0.9rem 1.35rem;
    border: 1px solid var(--pid-ink);
    text-decoration: none;
    border-radius: 2px;
    align-self: flex-start;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.three-ways-card:hover .three-ways-card__cta {
    background: var(--pid-purple);
    border-color: var(--pid-purple);
}

/* ============================================================
   GET INVOLVED, VOLUNTEER ROLE CARDS
   ============================================================ */
.role-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    max-width: var(--pid-wide);
    margin-inline: auto;
    width: 100%;
}
.role-card {
    display: flex;
    flex-direction: column;
    background: var(--pid-canvas);
    border: 1px solid var(--pid-rule);
    padding: 1.75rem 1.5rem 1.5rem;
    transition: transform 0.25s var(--pid-ease), border-color 0.2s ease, box-shadow 0.25s var(--pid-ease);
    position: relative;
}
.role-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--pid-magenta);
    transition: background 0.2s ease;
}
.role-card:hover {
    transform: translateY(-3px);
    border-color: var(--pid-ink);
    box-shadow: 0 18px 36px -24px rgba(13, 13, 13, 0.25);
}
.role-card:hover::before { background: var(--pid-purple); }
.role-card__header { margin-bottom: 0.875rem; }
.role-card__commit {
    display: inline-block;
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pid-ink);
    background: var(--pid-canvas-warm);
    border: 1px solid var(--pid-rule);
    padding: 0.3rem 0.625rem;
    border-radius: 2px;
    margin-bottom: 0.625rem;
}
.role-card__title {
    font-family: var(--pid-serif);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    color: var(--pid-ink);
    text-wrap: balance;
}
.role-card__body {
    font-size: 0.9375rem;
    color: var(--pid-ink-muted);
    line-height: 1.65;
    margin: 0 0 1.25rem;
    flex: 1;
}
.role-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 1px solid var(--pid-rule);
    padding-top: 0.875rem;
    gap: 0.5rem;
}
.role-card__skills {
    font-family: var(--pid-mono);
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
}
.role-card__cta {
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pid-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--pid-ink);
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.role-card__cta:hover {
    color: var(--pid-purple);
    border-color: var(--pid-purple);
}

@media (max-width: 1200px) {
    .role-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .role-grid { grid-template-columns: repeat(2, 1fr); }
    .three-ways-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .role-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   GET INVOLVED, SPONSORSHIP TIERS
   ============================================================ */
.sponsor-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: var(--pid-wide);
    margin-inline: auto;
    width: 100%;
}
.sponsor-tier {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--pid-canvas);
    border: 1px solid var(--pid-rule);
    padding: 2.25rem 2rem 2.25rem;
    transition: transform 0.3s var(--pid-ease), border-color 0.2s ease, box-shadow 0.3s var(--pid-ease);
}
.sponsor-tier:hover {
    transform: translateY(-4px);
    border-color: var(--pid-ink);
    box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.25);
}
.sponsor-tier--featured {
    background: var(--pid-ink);
    color: var(--pid-canvas);
    border-color: var(--pid-ink);
    transform: translateY(-12px);
}
.sponsor-tier--featured:hover {
    transform: translateY(-16px);
    box-shadow: 0 32px 56px -32px rgba(0, 0, 0, 0.5);
}
.sponsor-tier__badge {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--pid-magenta);
    color: var(--pid-canvas);
    padding: 0.375rem 0.75rem;
    font-family: var(--pid-mono);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 2px;
}
.sponsor-tier__level {
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 0.75rem;
    color: var(--pid-ink-muted);
    font-weight: 500;
}
.sponsor-tier--featured .sponsor-tier__level {
    color: rgba(255, 255, 255, 0.75);
}
.sponsor-tier__amount {
    font-family: var(--pid-serif);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 600;
    line-height: 1;
    margin: 0 0 1rem;
    color: var(--pid-ink);
}
.sponsor-tier--featured .sponsor-tier__amount {
    color: var(--pid-canvas);
}
.sponsor-tier__summary {
    font-size: 0.9375rem;
    color: var(--pid-ink-muted);
    line-height: 1.65;
    margin: 0 0 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--pid-rule);
    text-wrap: pretty;
}
.sponsor-tier--featured .sponsor-tier__summary {
    color: rgba(255, 255, 255, 0.8);
    border-bottom-color: rgba(255, 255, 255, 0.15);
}
.sponsor-tier__benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    flex: 1;
}
.sponsor-tier__benefits li {
    font-size: 0.9375rem;
    color: var(--pid-ink-muted);
    line-height: 1.65;
    padding: 0.55rem 0 0.55rem 1.5rem;
    position: relative;
}
.sponsor-tier__benefits li::before {
    content: "+";
    position: absolute;
    left: 0;
    top: 0.5rem;
    font-family: var(--pid-mono);
    font-weight: 500;
    color: var(--pid-purple);
}
.sponsor-tier--featured .sponsor-tier__benefits li {
    color: rgba(255, 255, 255, 0.85);
}
.sponsor-tier--featured .sponsor-tier__benefits li::before {
    color: var(--pid-magenta);
}
.sponsor-tier__cta {
    display: inline-block;
    font-family: var(--pid-sans);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.875rem 1.25rem;
    background: var(--pid-ink);
    color: var(--pid-canvas);
    border: 1px solid var(--pid-ink);
    border-radius: 2px;
    text-align: center;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sponsor-tier__cta:hover {
    background: var(--pid-purple);
    border-color: var(--pid-purple);
}
.sponsor-tier--featured .sponsor-tier__cta {
    background: var(--pid-magenta);
    border-color: var(--pid-magenta);
}
.sponsor-tier--featured .sponsor-tier__cta:hover {
    background: var(--pid-magenta-dark);
    border-color: var(--pid-magenta-dark);
}

@media (max-width: 900px) {
    .sponsor-tiers { grid-template-columns: 1fr; }
    .sponsor-tier--featured { transform: translateY(0); }
    .sponsor-tier--featured:hover { transform: translateY(-3px); }
}

/* ============================================================
   GET INVOLVED, TESTIMONIAL (inherits theme-manifesto)
   ============================================================ */
.get-involved-testimonial blockquote {
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    line-height: 1.25;
}

/* ============================================================
   GET INVOLVED, FINAL CTA
   ============================================================ */
.get-involved-final__inner {
    max-width: 720px;
    margin-inline: auto;
    padding-block: 1.5rem;
    text-align: center;
}

/* ============================================================
   EVENT SINGLE, BACK LINK
   ============================================================ */
.event-back-link {
    color: var(--pid-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--pid-ink);
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.event-back-link:hover { color: var(--pid-purple); border-color: var(--pid-purple); }

/* ============================================================
   FOCUS (accessibility)
   ============================================================ */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible,
.pid-archive-filter-btn:focus-visible,
.events-view-all-btn:focus-visible {
    outline: 2px solid var(--pid-purple);
    outline-offset: 2px;
    border-radius: 2px;
}
.newsletter-form__input:focus-visible,
.newsletter-form__submit:focus-visible,
.wp-block-search__input:focus-visible,
.wp-block-search__button:focus-visible {
    outline: 2px solid var(--pid-purple);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .hero-entrance, .animate-on-scroll { opacity: 1 !important; transform: none !important; }
    .events-stagger .event-tile { opacity: 1; transform: none; animation: none; }
    .marquee-track { animation: none; }
    .hero-cover .wp-block-cover__image-background,
    .hero-editorial__cover .wp-block-cover__image-background {
        transform: none !important;
        transition: none !important;
    }
}

/* ============================================================
   RESPONSIVE, TABLET (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {
    .events-row > * { flex-basis: calc((100% - 1.5rem) / 2); }
    .pid-archive-grid { grid-template-columns: repeat(2, 1fr); }
    .passes-grid { grid-template-columns: repeat(2, 1fr); }
    .mission-icons-grid { grid-template-columns: repeat(2, 1fr); }
    .support-grid { grid-template-columns: repeat(2, 1fr); }
    .story-grid { grid-template-columns: repeat(2, 1fr); }
    .community-grid { grid-template-columns: repeat(2, 1fr); }
    .visit-grid { grid-template-columns: repeat(2, 1fr); }
    .download-grid { grid-template-columns: repeat(2, 1fr); }
    .breakdown-legend { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   RESPONSIVE, SMALL TABLET (≤781px)
   ============================================================ */
@media (max-width: 781px) {
    /* ============================================================
       MOBILE OVERLAY NAVIGATION (SF Pride–style accordion)
       Full-screen overlay. Top-level items are bold uppercase sans.
       Submenu parents show a chevron and are click-to-expand. When
       a submenu is open (.pid-submenu-open on the parent <li>), the
       children render in a floating white card with a magenta→purple
       gradient underline on the active parent label.
       ============================================================ */

    /* Hamburger open button, ensure 44x44 tappable target */
    .site-header-wrap .wp-block-navigation__responsive-container-open {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0.625rem !important;
        color: var(--pid-ink) !important;
        background: transparent !important;
        border: 0 !important;
    }
    .site-header-wrap .wp-block-navigation__responsive-container-open svg {
        width: 24px;
        height: 24px;
    }

    /* Full-screen overlay background and scroll container */
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open {
        background: var(--pid-canvas) !important;
        padding: 0 !important;
    }
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        padding: 5rem 1.5rem 8rem !important;
        max-width: 560px;
        margin-inline: auto;
        width: 100%;
        box-sizing: border-box;
    }

    /* Close (X) button, ensure 44x44, visible, in top-right */
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
        position: fixed !important;
        top: 1rem !important;
        right: 1rem !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0.625rem !important;
        color: var(--pid-ink) !important;
        background: var(--pid-canvas-warm) !important;
        border: 1px solid var(--pid-rule) !important;
        border-radius: 50% !important;
        z-index: 10;
    }
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
        width: 20px;
        height: 20px;
    }

    /* The admin bar paints above this fixed button, burying the only way out
       of the menu for logged-in editors on a phone. Core does not offset the
       overlay, so clear the bar here. This block is already capped at 781px,
       which is exactly where WordPress renders the bar 46px tall, so one
       offset covers it. Visitors never see this rule.

       Deliberately NOT a nested @media: minifiers in the deploy path do not
       all understand nested at-rules, and anything they choke on here takes
       the rest of the stylesheet with it. */
    .admin-bar .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
        top: calc(1rem + 46px) !important;
    }

    /* Top-level nav item list */
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        gap: 0 !important;
        row-gap: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Each top-level <li>, plain item OR submenu parent */
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
        padding: 0 !important;
        margin: 0 !important;
        width: 100%;
        display: block !important;
        position: relative;
    }

    /* Wrap the top-level anchor + chevron as a single row */
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center;
    }
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content {
        flex: 1 1 auto !important;
        width: auto !important;
    }

    /* Top-level link, BOLD UPPERCASE SANS-SERIF (SF Pride style) */
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
        display: inline-flex !important;
        align-items: center !important;
        padding: 1.25rem 0 !important;
        font-family: var(--pid-sans) !important;
        font-size: 1.375rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em !important;
        text-transform: uppercase !important;
        color: var(--pid-ink) !important;
        min-height: 56px !important;
        line-height: 1.2 !important;
        text-decoration: none !important;
        position: relative;
    }
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible {
        color: var(--pid-magenta) !important;
    }

    /* Chevron toggle, now VISIBLE as a tappable expand button */
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 56px !important;
        padding: 0 !important;
        margin-left: 0.375rem !important;
        background: transparent !important;
        border: 0 !important;
        color: var(--pid-ink) !important;
        cursor: pointer;
        transition: transform 0.25s var(--pid-ease), color 0.2s ease;
    }
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
        width: 14px !important;
        height: 14px !important;
        fill: currentColor !important;
    }
    /* Rotate chevron when this submenu is open */
    /* No rotation here: core already turns the chevron through
       `[aria-expanded="true"] svg`, and now that the attribute tracks the
       accordion the two rotations compounded to a full turn, leaving the
       arrow pointing the same way open or closed. Colour only. */
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu.pid-submenu-open > .wp-block-navigation-submenu__toggle {
        color: var(--pid-magenta) !important;
    }
    /* Recolor the parent label when its submenu is open */
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu.pid-submenu-open > .wp-block-navigation-item__content {
        color: var(--pid-magenta) !important;
    }
    /* Gradient underline beneath the entire parent row when open */
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu.pid-submenu-open::after {
        content: "";
        display: block;
        width: 100%;
        height: 2px;
        margin-top: -2px;
        background: linear-gradient(90deg, var(--pid-magenta) 0%, var(--pid-purple) 100%);
        border-radius: 1px;
    }

    /* Thin rule between top-level items (non-open state) */
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.pid-submenu-open)::after {
        content: "";
        display: block;
        height: 1px;
        background: var(--pid-rule);
        width: 100%;
    }
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:last-child::after {
        display: none !important;
    }

    /* Submenu container, HIDDEN by default, expanded as floating white card
       when .pid-submenu-open is on the parent <li> */
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
        display: none !important;
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-basis: 100%;
        opacity: 0;
        transform: translateY(-4px);
        transition: opacity 0.25s var(--pid-ease), transform 0.25s var(--pid-ease);
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu.pid-submenu-open > .wp-block-navigation__submenu-container {
        display: flex !important;
        flex-direction: column !important;
        /* Core leaves align-items: center on this container, which shrink-wraps
           each child <li> and centres the links inside the card while every
           top-level item is left-aligned. Stretch puts the whole menu on one
           left edge. */
        align-items: stretch !important;
        background: var(--pid-canvas) !important;
        border: 1px solid var(--pid-rule) !important;
        border-radius: 10px !important;
        padding: 0.75rem 1.25rem !important;
        margin: 0.875rem 0 1rem !important;
        box-shadow: 0 20px 40px -24px rgba(13, 13, 13, 0.2), 0 2px 8px -2px rgba(13, 13, 13, 0.08) !important;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto !important;
        visibility: visible !important;
    }

    /* Child items inside the expanded card */
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
        padding: 0 !important;
        margin: 0 !important;
    }
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item::after {
        display: none !important;
    }
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        display: flex !important;
        align-items: center !important;
        padding: 0.875rem 0 !important;
        font-family: var(--pid-sans) !important;
        font-size: 1.0625rem !important;
        font-weight: 600 !important;
        color: var(--pid-ink) !important;
        min-height: 48px !important;
        text-decoration: none !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        width: 100% !important;
    }
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
        color: var(--pid-magenta) !important;
    }

    /* When the mobile overlay opens, reposition the sole donate button as a
       full-width fixed-bottom CTA inside the overlay. This is the same
       .nav-donate-cta element that shows on desktop/mobile-closed, we just
       re-anchor it visually so mobile users always have a clear donate path
       from inside the menu without duplicating the element in the DOM. */
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open ~ .wp-block-buttons {
        position: fixed !important;
        left: 1.25rem !important;
        right: 1.25rem !important;
        bottom: 1.25rem !important;
        z-index: 100 !important;
        margin: 0 !important;
    }
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open ~ .wp-block-buttons .nav-donate-cta {
        width: 100% !important;
        display: block !important;
    }
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open ~ .wp-block-buttons .nav-donate-cta .wp-block-button__link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 52px !important;
        padding: 1rem 1.5rem !important;
        font-family: var(--pid-mono) !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        border-radius: 3px !important;
        background: var(--pid-ink) !important;
        color: var(--pid-canvas) !important;
        box-shadow: 0 20px 40px -18px rgba(13, 13, 13, 0.55) !important;
    }
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open ~ .wp-block-buttons .nav-donate-cta .wp-block-button__link:hover {
        background: var(--pid-magenta) !important;
        color: var(--pid-canvas) !important;
    }

    /* Pad the overlay's inner content so the fixed bottom donate button
       doesn't overlap the last nav item in the list */
    .site-header-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        padding-bottom: 6rem !important;
    }

    /* Lock body scroll when the mobile nav overlay is open */
    body:has(.wp-block-navigation__responsive-container.is-menu-open) {
        overflow: hidden;
    }

    .pid-section { padding-block: clamp(2.5rem, 6vw, 4rem); }
    .pid-section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .hero-editorial { min-height: min(80vh, 560px); }
    .hero-editorial .wp-block-cover__inner-container,
    .hero-editorial__cover > .wp-block-cover__inner-container {
        padding: 1.25rem;
    }
    .hero-editorial__card {
        max-width: 100%;
        width: 100%;
    }
    .hero-editorial__card h1 { font-size: clamp(1.75rem, 5vw, 2.25rem); }
    .hero-editorial__card .lede { font-size: 1rem; }
    .event-cta-bar {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        margin-inline: 1rem;
    }
    .event-cta-button { width: 100%; text-align: center; }
    .event-hero-overlay { padding: 2rem 1.25rem; }
    .event-hero-title { font-size: clamp(1.75rem, 6vw, 2.5rem); }
    .stats-inner { gap: 1.5rem; }
    .stat-item { min-width: 0; flex: 1 1 40%; }
    .countdown-inner { gap: 1.25rem; }
    .footer-land-ack { font-size: 0.75rem; padding-inline: 1rem; }
    .pid-timeline { padding-left: 0.25rem; }
}

/* ============================================================
   RESPONSIVE, MOBILE (≤600px)
   ============================================================ */
@media (max-width: 781px) {
    .split-grid { grid-template-columns: 1fr; }
    .split-panel { min-height: 380px; }
}

@media (max-width: 600px) {
    body { font-size: 1rem; line-height: 1.7; }
    p { line-height: 1.75; }
    .pid-section { padding-inline: 1rem; }
    .pid-container { padding-inline: 0; }
    /* Mobile readability floors, ensure no body text drops below 15px */
    .org-card__desc,
    .role-card__body,
    .access-card__body,
    .transit-card__body,
    .community-tile__desc,
    .visit-card__desc,
    .story-card__deck,
    .principle-card__body,
    .hotel-card__body,
    .three-ways-card__desc,
    .sponsor-tier__summary,
    .sponsor-tier__benefits li,
    .resource-index__desc {
        font-size: 0.9375rem;
        line-height: 1.65;
    }
    .wp-block-post-content > p,
    .wp-block-post-content > ul li,
    .wp-block-post-content > ol li {
        line-height: 1.7;
    }
    .events-row { gap: 1.25rem; }
    .events-row > * { flex-basis: 100%; min-width: 0; }
    .pid-archive-grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .passes-grid { grid-template-columns: 1fr; }
    .mission-icons-grid { grid-template-columns: 1fr; }
    .support-grid { grid-template-columns: 1fr; }
    .story-grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .community-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .visit-grid { grid-template-columns: 1fr; gap: 0.75rem; }
    .values-grid { grid-template-columns: 1fr; gap: 1rem; }
    .download-grid { grid-template-columns: 1fr; }
    .breakdown-legend { grid-template-columns: 1fr; }
    .countdown-inner { gap: 1rem; flex-wrap: wrap; }
    .countdown-unit { min-width: 56px; }
    .countdown-days, .countdown-hours, .countdown-mins, .countdown-secs { font-size: 1.75rem; }
    .countdown-label { width: 100%; text-align: center; }
    .event-tile img { height: 200px; }
    .pid-archive-filters { gap: 0.375rem; }
    .pid-archive-filter-btn {
        font-size: 0.75rem;
        padding: 0.4rem 0.75rem;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .site-header-wrap > .wp-block-group.alignwide { padding-inline: 1rem !important; }
    .site-header-wrap .wp-block-navigation a { font-size: 0.875rem; padding: 0.5rem; }
    .site-header-wrap .is-layout-flex { gap: 0.75rem; }
    .nav-donate-cta .wp-block-button__link {
        padding: 0.4rem 0.9rem;
        font-size: 0.75rem;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .announcement-bar { font-size: 0.75rem; letter-spacing: 0.06em; padding: 0 0.75rem; height: 34px; }
    .newsletter-form { flex-direction: column; }
    .newsletter-form__submit { width: 100%; min-height: 44px; }
    .hero-editorial { min-height: 60vh; }
    .hero-editorial__card { padding: 1.25rem; }
    .theme-manifesto blockquote { font-size: clamp(1.35rem, 5vw, 1.75rem); }
    .pid-section-head { padding-bottom: 1rem; }
    .pid-section-head h2 { font-size: clamp(1.75rem, 6vw, 2rem); }
    .event-hero-section { min-height: 48vh; }
    .event-cta-bar { padding: 1.25rem; }
    .event-cta-price { font-size: 1.5rem; }
    .split-panel__inner { padding: 1.5rem; }
    .split-panel__inner h3 { font-size: 1.5rem; }
    .download-card { padding: 1.25rem 1.25rem 2.75rem; }
    .value-card { padding: 1.25rem 0; }
    .value-card__title { font-size: 1.375rem; }
    .pid-timeline__item { padding-left: 2.25rem; padding-bottom: 2rem; }
    .pid-timeline__title { font-size: 1.25rem; }
    .wp-block-columns.alignwide { flex-wrap: wrap !important; }
    .wp-block-columns.alignwide > .wp-block-column { flex-basis: 100% !important; }
    .site-footer { padding-inline: 1rem; }
}

/* =======================================================
   2025 SPONSORS graphic (homepage sponsors showcase)
   ======================================================= */
/* sponsors-2025.png is a transparent PNG and roughly 60% of its ink is
   white — it was drawn for a dark backdrop. Sitting directly on the warm
   canvas, every white mark (Unleashed, JR's, Round-Up Saloon, TMC, Prism
   Health, The Rose Room, the strip, UPS) disappeared. The figure supplies
   the dark plate the artwork expects, in both colour modes. */
.sponsors-2025 {
    margin: 0 auto;
    max-width: 1100px;
    text-align: center;
    background: var(--pid-surface-dark-elevated);
    border: 1px solid var(--pid-edge);
    border-radius: 18px;
    padding: clamp(1.5rem, 3.5vw, 2.75rem);
    box-shadow: 0 18px 48px -20px rgba(13, 13, 13, 0.35);
}
.sponsors-2025__image {
    display: block;
    width: 100%;
    height: auto;
    margin-inline: auto;
}
.sponsors-2025__caption {
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 1.25rem;
}

/* Forty-odd logos in a single 16:9 raster stop being legible once the
   figure is narrower than about 640px. Below that, let the plate scroll
   sideways at a readable size rather than shrinking the marks to noise. */
@media (max-width: 700px) {
    .sponsors-2025 {
        padding: 1.25rem 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    .sponsors-2025__image {
        min-width: 620px;
        padding-inline: 1.25rem;
    }
}

/* =======================================================
   PRESENTED BY SECTION — dedicated band below countdown (home)
   ======================================================= */
.presented-by-section {
    background-color: var(--pid-canvas-warm);
    padding-block: clamp(2.25rem, 5vw, 3.5rem);
    padding-inline: 1.25rem;
    border-bottom: 1px solid var(--pid-rule);
}
.presented-by-section__inner {
    max-width: 760px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
}
.presented-by-section__eyebrow {
    font-family: var(--pid-mono);
    font-size: 0.9375rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--pid-ink-soft);
    margin: 0;
}
.presented-by-section__link {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    transition: transform 200ms ease, opacity 200ms ease;
}
.presented-by-section__link:hover,
.presented-by-section__link:focus-visible {
    transform: translateY(-1px);
    opacity: 0.92;
}
/* The uploaded Help Center mark is only 200x100, so it is already being
   upscaled at this size and will soften further if pushed much past ~160px.
   image-rendering keeps the edges from going mushy on the way up. Swap in a
   higher-resolution file and this ceiling can rise. */
.presented-by-section__logo {
    display: block;
    width: auto;
    height: clamp(104px, 15vw, 160px);
    max-width: min(560px, 86vw);
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
}

/* Unlike .sponsor-featured this band follows the palette, so it only needs
   a plate once the surface goes dark — a sponsor's dark-on-transparent
   artwork is legible on the warm canvas as it is. Both selectors carry the
   same rule for the reasons given at the dark palette above. */
:root[data-theme="dark"] .presented-by-section__logo {
    background: #FFFFFF;
    padding: 1rem 1.5rem;
    border-radius: 4px;
    box-sizing: content-box;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .presented-by-section__logo {
        background: #FFFFFF;
        padding: 1rem 1.5rem;
        border-radius: 4px;
        box-sizing: content-box;
    }
}

/* The same problem on the two sponsor rows. Both sit on --pid-canvas, so in
   light mode the artwork is already on white and needs nothing; in dark mode
   a dark-ink logo vanishes, and the parade strip's grayscale filter hides it
   further. The plate is what keeps arbitrary sponsor artwork legible. */
:root[data-theme="dark"] .parade-sponsors-strip__item img,
:root[data-theme="dark"] .sponsors-wall__logo-tile-logo img {
    background: #FFFFFF;
    padding: 0.5rem 0.75rem;
    border-radius: 3px;
    box-sizing: content-box;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .parade-sponsors-strip__item img,
    :root:not([data-theme="light"]) .sponsors-wall__logo-tile-logo img {
        background: #FFFFFF;
        padding: 0.5rem 0.75rem;
        border-radius: 3px;
        box-sizing: content-box;
    }
}
.presented-by-section__tagline {
    font-family: var(--pid-serif);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--pid-ink-muted);
    margin: 0;
}
@media (max-width: 600px) {
    .presented-by-section {
        padding-block: 1.75rem;
    }
    .presented-by-section__inner {
        gap: 0.875rem;
    }
    .presented-by-section__eyebrow {
        font-size: 0.8125rem;
        letter-spacing: 0.22em;
    }
    .presented-by-section__logo {
        height: clamp(84px, 26vw, 120px);
    }
    .presented-by-section__tagline {
        font-size: 1.0625rem;
    }
}

/* ============================================================
   FESTIVAL FLYER + PARTNERS
   ============================================================ */
.festival-flyer {
    max-width: 460px;
    margin-inline: auto;
}
.festival-flyer img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}
.festival-partners-label {
    margin: 2.25rem 0 0.75rem;
    text-align: center;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.7;
}
.festival-partners {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
}
.festival-partners__item {
    font-weight: 600;
    font-size: 1rem;
}
.festival-partners__item + .festival-partners__item {
    position: relative;
}
.festival-partners__item + .festival-partners__item::before {
    content: "·";
    position: absolute;
    left: -0.85rem;
    opacity: 0.5;
}
@media (max-width: 600px) {
    .festival-partners {
        flex-direction: column;
        gap: 0.4rem;
    }
    .festival-partners__item + .festival-partners__item::before {
        content: none;
    }
}

/* The colour mode toggle's rules are NOT here. They live in
   assets/css/color-mode-toggle.css and are inlined into <head> by
   pride_in_dallas_enqueue_color_mode_styles(), so the control cannot be
   left unstyled by a stale, truncated or rewritten copy of this file.
   See that file's header for the reasoning. Do not re-add them here:
   two copies will drift. */

/* =======================================================
   COLOUR MODE ADJUSTMENTS

   Almost all of dark mode falls out of the token flip at the top of this
   file. What is left are the places a raw value was unavoidable: an
   opaque logo asset, colours hardcoded inline by block patterns, and the
   edges of panels that are dark in both modes.
   ======================================================= */

/* Patterns emit these two greys as inline styles, which no token can
   reach. Routing them through the muted tokens makes them follow the
   mode. In light mode each token resolves to the identical value, so
   this changes nothing. */
[style*="#4A4550"] { color: var(--pid-ink-muted) !important; }
[style*="#5A5560"] { color: var(--pid-ink-muted-alt) !important; }

/* The uploaded site logo is an opaque light-background PNG — on a dark
   header it reads as a white sticker. Swap in the theme's white-ink
   lockup, which is transparent and drawn for dark surfaces.

   Both files hold the same lockup at the same 1.379 aspect, but with
   different padding: the uploaded logo's artwork fills 74.0% x 88.5% of
   its box, the white one 87.9% x 63.7% of a square canvas. Rendering the
   light logo at 160x97 puts the artwork at 118x86, and matching that
   needs a 135x135 box for the white one.

   The negative margins pull that 135x135 back to the 160x97 footprint the
   light logo occupies, so the header row keeps its height and the nav
   does not shift when the mode changes. */
:root[data-theme="dark"] .site-header-wrap .custom-logo {
    content: url('assets/images/logo-white.png');
    width: 135px;
    height: 135px;
    max-width: none;
    max-height: none;
    margin-block: -19px;
    margin-inline: 12px;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .site-header-wrap .custom-logo {
        content: url('assets/images/logo-white.png');
        width: 135px;
        height: 135px;
        max-width: none;
        max-height: none;
        margin-block: -19px;
        margin-inline: 12px;
    }
}

/* WordPress core paints the navigation submenu and the mobile overlay
   white through `.wp-block-navigation:not(.has-background) …`, which at
   0,3,0 and 0,5,0 outranks the theme's `.site-header-wrap …` rules. Both
   modes were affected; light mode simply hid it, because --pid-canvas is
   white there too. In dark mode it left white panels carrying near-white
   link text. These mirror core's selector shape with the header scope
   added so the token wins. */
.site-header-wrap .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
    background-color: var(--pid-canvas);
    border-color: var(--pid-rule);
}
.site-header-wrap .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
    background-color: var(--pid-canvas);
    color: var(--pid-ink);
}

/* Panels that stay dark in both modes need a defined edge once the page
   behind them is also dark. --pid-edge is transparent in light mode.
   Drawn as an inset ring rather than a border so it adds no layout box
   and does not clobber borders these panels already set (the crisis
   callout's magenta left rule, for one). */
.crisis-callout,
.sponsor-featured,
.sponsor-teaser-card--featured,
.sponsor-tier--featured {
    box-shadow: inset 0 0 0 1px var(--pid-edge);
}

/* ============================================================
   PRIDE DAY LIVE — the parade-day phase layer

   One band that says four different things depending on where the
   clock is: counting down, live, celebrating, or thanking the city.
   The switching itself lives in inc/pride-day.php; everything here is
   presentation.

   Two rules matter for correctness:

   1. .pd-panel is hidden by default and revealed by the phase attribute
      on <html>. Those two lines are ALSO inlined into <head> so the
      wrong phase cannot flash before this stylesheet lands. Keep the
      two copies in sync.
   2. The reveal sets `display: var(--pd-display, block)` rather than a
      literal, because the phase selector is specific enough to beat any
      component rule. A component that needs flex sets --pd-display.

   Colour note: these bands are saturated brand islands, so their text
   is literal #fff rather than var(--pid-canvas) — inside a dark island
   that token no longer names the page. Both gradient endpoints clear
   5.7:1 against white, so body copy passes AA anywhere on the ramp.
   ============================================================ */

.pd-panel { display: none; }
[data-pride-phase="countdown"]   .pd-panel[data-phase~="countdown"],
[data-pride-phase="parade"]      .pd-panel[data-phase~="parade"],
[data-pride-phase="celebration"] .pd-panel[data-phase~="celebration"],
[data-pride-phase="afterglow"]   .pd-panel[data-phase~="afterglow"] {
    display: var(--pd-display, block);
}

.pd-inner {
    max-width: var(--pid-wide);
    margin-inline: auto;
}

/* ------------------------------------------------------------
   PHASE ANNOUNCEMENT BAR (sitewide, top of every page)
   ------------------------------------------------------------ */

/* The base bar is a fixed 36px. A full sentence needs to be allowed to
   wrap on a phone, so height becomes a floor rather than a ceiling. */
.pd-bar {
    height: auto;
    min-height: var(--pid-announcement-h);
    padding-block: 0.4rem;
    letter-spacing: 0.06em;
    line-height: 1.45;
    transition: background 0.4s ease;
}
.pd-bar__panel {
    --pd-display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 0.6rem;
    flex-wrap: wrap;
}
.pd-bar__link { white-space: nowrap; }

/* Live phases take the bar from black to brand, so the change is
   visible before a single word is read. */
[data-pride-phase="parade"] .pd-bar,
[data-pride-phase="celebration"] .pd-bar {
    background: linear-gradient(90deg, #C40F70 0%, #7E00FE 100%);
}
[data-pride-phase="afterglow"] .pd-bar {
    background: linear-gradient(90deg, #004DFF 0%, #7E00FE 100%);
}

/* ------------------------------------------------------------
   THE LIVE DOT
   ------------------------------------------------------------ */

.pd-live-dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #fff;
    flex: 0 0 auto;
}
.pd-live-dot--bar { width: 0.5rem; height: 0.5rem; }

@media (prefers-reduced-motion: no-preference) {
    .pd-live-dot { animation: pd-pulse 1.8s ease-out infinite; }
}
@keyframes pd-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.65); }
    70%  { box-shadow: 0 0 0 0.55rem rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.pd-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ------------------------------------------------------------
   THE PHASE BAND
   ------------------------------------------------------------ */

.pd-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(3.25rem, 7vw, 6rem);
    padding-inline: 1.25rem;
    background: linear-gradient(135deg, #7E00FE 0%, #004DFF 100%);
    color: #fff;
}
[data-pride-phase="parade"] .pd-section,
[data-pride-phase="celebration"] .pd-section {
    background: linear-gradient(135deg, #C40F70 0%, #7E00FE 55%, #004DFF 100%);
}
[data-pride-phase="afterglow"] .pd-section {
    background: linear-gradient(135deg, #004DFF 0%, #7E00FE 100%);
}

/* A soft off-centre glow so the band reads as lit rather than flat. */
.pd-section::before {
    content: "";
    position: absolute;
    inset: -30% -10% auto -10%;
    height: 140%;
    background: radial-gradient(60% 55% at 22% 18%, rgba(255, 255, 255, 0.22), transparent 70%);
    pointer-events: none;
    z-index: -1;
}

.pd-rainbow {
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--pid-rainbow);
    z-index: 2;
}
.pd-section > .pd-rainbow:first-child { top: 0; }
.pd-section > .pd-rainbow:last-child  { bottom: 0; }

.pd-eyebrow {
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 1rem;
}
.pd-eyebrow--live { font-weight: 600; }

.pd-headline {
    font-family: var(--pid-serif);
    font-size: clamp(2.5rem, 7.5vw, 5.5rem);
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 1.25rem;
    max-width: 18ch;
    text-wrap: balance;
}
.pd-section .pd-headline { color: #fff; }

.pd-lede {
    font-size: clamp(1.0625rem, 1.7vw, 1.3125rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.93);
    max-width: 52ch;
    margin: 0 0 2rem;
}

.pd-remaining {
    font-family: var(--pid-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 2rem;
    min-height: 1.2em;
}

.pd-ready {
    font-family: var(--pid-serif);
    font-style: italic;
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    color: #fff;
    margin: 0 0 1.125rem;
}

/* ------------------------------------------------------------
   THE COUNTDOWN CLOCK
   ------------------------------------------------------------ */

.pd-clock {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.25rem, 4vw, 3.5rem);
    margin: 0 0 2.5rem;
}
.pd-clock__unit { min-width: 4.5rem; }
.pd-clock__num {
    display: block;
    font-family: var(--pid-serif);
    font-size: clamp(3rem, 8.5vw, 6.5rem);
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.03em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.pd-clock__label {
    display: block;
    margin-top: 0.5rem;
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}

/* ------------------------------------------------------------
   CTA BUTTONS (on the saturated band)
   ------------------------------------------------------------ */

.pd-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.pd-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    font-family: var(--pid-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    color: #fff;
    background: transparent;
    cursor: pointer;
    transition: transform 0.2s var(--pid-ease), background 0.2s ease, color 0.2s ease;
}
.pd-cta--primary {
    background: #fff;
    color: #0D0D0D;
    border-color: #fff;
}
.pd-cta--fb { background: rgba(255, 255, 255, 0.14); }
.pd-cta:hover {
    background: #fff;
    color: #0D0D0D;
    border-color: #fff;
}
.pd-cta:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
    .pd-cta:hover { transform: translateY(-2px); }
}
.pd-fb-icon { flex: 0 0 auto; }

/* ------------------------------------------------------------
   THE SOFT DONATION ASK (countdown / parade / celebration)

   A rule and a line of text rather than another button: while the day
   is still ahead the CTAs above are trying to get people onto Cedar
   Springs, and a fourth competing pill would dilute that.
   ------------------------------------------------------------ */

.pd-support {
    margin: 2.25rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    max-width: 66ch;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
}
.pd-support__link {
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 2px;
}
.pd-support__link:hover,
.pd-support__link:focus-visible { color: var(--pid-yellow); }

/* ------------------------------------------------------------
   PINNED UPDATE (admin-posted, day-of)
   ------------------------------------------------------------ */

.pd-pinned {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 0.875rem;
    background: rgba(255, 255, 255, 0.16);
    border-left: 3px solid #fff;
    border-radius: 0 6px 6px 0;
    padding: 0.875rem 1.125rem;
    margin: 0 0 1.75rem;
    max-width: 56ch;
}
.pd-pinned__tag {
    font-family: var(--pid-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    flex: 0 0 auto;
}
.pd-pinned__text {
    margin: 0;
    flex: 1 1 16ch;
    font-size: 1rem;
    line-height: 1.5;
    color: #fff;
}
.pd-pinned__time {
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.85);
    flex: 0 0 auto;
}

/* ------------------------------------------------------------
   AFTERGLOW — the thank-you cards
   ------------------------------------------------------------ */

.pd-thanks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin: 0 0 1.25rem;
}
.pd-thanks__card {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 1.5rem 1.5rem 1.625rem;
}
.pd-thanks__title {
    font-family: var(--pid-serif);
    font-size: 1.375rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.625rem;
}
.pd-section .pd-thanks__title { color: #fff; }
.pd-thanks__body {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
}
.pd-thanks__you {
    background: #fff;
    color: #0D0D0D;
    border-radius: 8px;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    margin: 0 0 2.5rem;
}
.pd-thanks__you-title {
    font-family: var(--pid-serif);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 600;
    line-height: 1;
    margin: 0 0 0.75rem;
}
.pd-section .pd-thanks__you-title { color: #0D0D0D; }
.pd-thanks__you-body {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #3A3540;
    max-width: 62ch;
}

/* ------------------------------------------------------------
   LIVE HIGHLIGHTS — the run of show
   ------------------------------------------------------------ */

.pd-live {
    --pd-display: block;
    background: var(--pid-canvas-warm);
    border-bottom: 1px solid var(--pid-rule);
    padding-block: clamp(2.75rem, 6vw, 4.5rem);
    padding-inline: 1.25rem;
}
.pd-live__head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.pd-live__title {
    font-family: var(--pid-serif);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 600;
    line-height: 1.05;
    margin: 0 0 0.5rem;
    color: var(--pid-ink);
}
.pd-live__note {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--pid-ink-muted);
    max-width: 58ch;
}

.pd-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
/* The rail, drawn behind the markers. */
.pd-timeline::before {
    content: "";
    position: absolute;
    top: 1.75rem;
    bottom: 1.75rem;
    left: 1.375rem;
    width: 2px;
    background: var(--pid-rule);
}

.pd-beat {
    position: relative;
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    gap: 0 1.125rem;
    padding-block: 1rem;
    transition: opacity 0.4s ease;
}
.pd-beat__marker {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--pid-canvas);
    border: 2px solid var(--pid-rule);
    font-family: var(--pid-mono);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--pid-ink-muted);
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.pd-beat__time {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0 0 0.25rem;
    font-family: var(--pid-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-ink-muted);
}
.pd-beat__state:empty { display: none; }
.pd-beat__state {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #fff;
    background: var(--pid-magenta-text);
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
}
.pd-beat__title {
    font-family: var(--pid-serif);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 0.375rem;
    color: var(--pid-ink);
}
.pd-beat__text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--pid-ink-muted);
    max-width: 62ch;
}

/* Past beats recede by COLOUR, not opacity. A blanket opacity:0.48 put the
   body copy at about 2.3:1 against the warm canvas — --pid-ink-soft is the
   theme's vetted quiet grey and holds 5.4:1 in light and 5.9:1 in dark, so
   the schedule stays readable all day for someone catching up. The filled
   marker carries the "already happened" signal instead. */
.pd-beat[data-state="past"] .pd-beat__time,
.pd-beat[data-state="past"] .pd-beat__title,
.pd-beat[data-state="past"] .pd-beat__text { color: var(--pid-ink-soft); }
.pd-beat[data-state="past"] .pd-beat__marker {
    background: var(--pid-rule);
    border-color: var(--pid-rule);
    color: var(--pid-ink-soft);
}

.pd-beat[data-state="now"] .pd-beat__marker {
    background: var(--pid-magenta-text);
    border-color: var(--pid-magenta-text);
    color: #fff;
    box-shadow: 0 0 0 6px rgba(196, 15, 112, 0.16);
}
.pd-beat[data-state="now"] .pd-beat__title { color: var(--pid-magenta-text); }
.pd-beat[data-state="now"] .pd-beat__text { color: var(--pid-ink); }

@media (prefers-reduced-motion: no-preference) {
    .pd-beat[data-state="now"] .pd-beat__marker { animation: pd-beat-pulse 2.4s ease-out infinite; }
}
@keyframes pd-beat-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(196, 15, 112, 0.35); }
    70%  { box-shadow: 0 0 0 0.9rem rgba(196, 15, 112, 0); }
    100% { box-shadow: 0 0 0 0 rgba(196, 15, 112, 0); }
}

.pd-live__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--pid-rule);
}
.pd-live__foot-text {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--pid-ink-muted);
    flex: 1 1 18ch;
}
/* The Facebook button sits on the light band here, not the gradient. */
.pd-live__foot .pd-cta {
    border-color: var(--pid-ink);
    color: var(--pid-ink);
    background: transparent;
}
.pd-live__foot .pd-cta:hover {
    background: var(--pid-ink);
    color: var(--pid-canvas);
}
.pd-live__foot .pd-cta:focus-visible { outline-color: var(--pid-ink); }

/* ------------------------------------------------------------
   THE OFFICIAL EVENT MAP
   ------------------------------------------------------------ */

.pd-map-section {
    background: var(--pid-canvas);
    padding-block: clamp(2.75rem, 6vw, 4.75rem);
    padding-inline: 1.25rem;
}
.pd-map-section__head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.pd-map-section .pd-eyebrow { color: var(--pid-magenta-text); }
.pd-map-section__title {
    font-family: var(--pid-serif);
    font-size: clamp(1.875rem, 4.5vw, 3rem);
    font-weight: 600;
    line-height: 1.05;
    margin: 0 0 0.75rem;
    color: var(--pid-ink);
}
.pd-map-section__lede {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--pid-ink-muted);
    max-width: 62ch;
}

/* The map itself is the trigger — the whole thing is one big button. */
.pd-map__frame {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    border: 1px solid var(--pid-rule);
    border-radius: 8px;
    overflow: hidden;
    background: var(--pid-canvas);
    cursor: zoom-in;
    box-shadow: 0 18px 40px -28px rgba(13, 11, 20, 0.5);
}
.pd-map__frame img,
.pd-map__frame picture {
    display: block;
    width: 100%;
    height: auto;
}
.pd-map__frame:focus-visible {
    outline: 3px solid var(--pid-purple);
    outline-offset: 3px;
}
.pd-map__zoom {
    position: absolute;
    right: 0.875rem;
    bottom: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(13, 11, 20, 0.86);
    color: #fff;
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.5rem 0.875rem;
    border-radius: 999px;
}
@media (prefers-reduced-motion: no-preference) {
    .pd-map__frame img { transition: transform 0.5s var(--pid-ease); }
    .pd-map__frame:hover img { transform: scale(1.015); }
}

.pd-map__legend {
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}
.pd-map__key {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--pid-canvas-warm);
    border: 1px solid var(--pid-rule);
    border-radius: 999px;
    padding: 0.4rem 0.875rem 0.4rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--pid-ink);
}
.pd-map__swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    flex: 0 0 auto;
}
.pd-map__key--star  .pd-map__swatch { background: var(--pid-yellow); color: #0D0D0D; }
.pd-map__key--zone  .pd-map__swatch { background: #F4A6A6; }
.pd-map__key--route .pd-map__swatch { background: repeating-linear-gradient(90deg, #E40303 0 4px, transparent 4px 7px); }
.pd-map__key--hq    .pd-map__swatch { background: #E40303; }
.pd-map__key--icon  .pd-map__swatch { background: var(--pid-deep-blue); color: #fff; font-size: 0.75rem; }

/* The map section buttons live on light canvas, not the gradient. */
.pd-map .pd-cta {
    border-color: var(--pid-ink);
    color: var(--pid-ink);
    background: transparent;
}
.pd-map .pd-cta:hover { background: var(--pid-ink); color: var(--pid-canvas); }
.pd-map .pd-cta:focus-visible { outline-color: var(--pid-ink); }

/* ------------------------------------------------------------
   MAP ZOOM DIALOG
   ------------------------------------------------------------ */

.pd-map-dialog {
    max-width: min(1500px, calc(100vw - 1.5rem));
    max-height: calc(100vh - 1.5rem);
    width: 100%;
    background: var(--pid-canvas);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.pd-map-dialog:not([open]) { display: none; }
.pd-map-dialog__bar {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    background: var(--pid-ink);
    flex: 0 0 auto;
}
.pd-map-dialog__toggle {
    min-height: 40px;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    background: transparent;
    color: #fff;
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.pd-map-dialog__toggle:hover { background: #fff; color: #0D0D0D; border-color: #fff; }
.pd-map-dialog__toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pd-map-dialog__close {
    margin-left: auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.pd-map-dialog__close:hover { background: #fff; color: #0D0D0D; }
.pd-map-dialog__close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.pd-map-dialog__scroll {
    flex: 1 1 auto;
    overflow: auto;
    background: var(--pid-canvas);
    -webkit-overflow-scrolling: touch;
}
.pd-map-dialog__scroll img {
    display: block;
    width: 100%;
    height: auto;
}
.pd-map-dialog__scroll.is-zoomed { cursor: grab; }
.pd-map-dialog__scroll.is-zoomed img {
    width: auto;
    max-width: none;
    height: auto;
}

/* ------------------------------------------------------------
   DARK MODE

   The gradient bands are brand islands and keep their colour. Only the
   light sections around them need help: the warm canvas and rule tokens
   already flip, so this is limited to the places that hardcode a tint.
   The map art is light-on-light, so it keeps a white mat in both modes
   rather than glowing at the edges against a dark page.
   ------------------------------------------------------------ */

:root[data-theme="dark"] .pd-map__frame,
:root[data-theme="dark"] .pd-map-dialog {
    box-shadow: inset 0 0 0 1px var(--pid-edge);
}
:root[data-theme="dark"] .pd-map__frame,
:root[data-theme="dark"] .pd-map-dialog__scroll { background: #FFFFFF; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pd-map__frame,
    :root:not([data-theme="light"]) .pd-map-dialog__scroll { background: #FFFFFF; }
}

/* ------------------------------------------------------------
   NARROW SCREENS
   ------------------------------------------------------------ */

@media (max-width: 600px) {
    .pd-clock { gap: 1rem 1.75rem; }
    .pd-clock__unit { min-width: 3.75rem; }
    .pd-ctas .pd-cta { flex: 1 1 100%; }
    .pd-beat { grid-template-columns: 2.25rem 1fr; gap: 0 0.875rem; }
    .pd-beat__marker { width: 2.25rem; height: 2.25rem; font-size: 0.75rem; }
    .pd-timeline::before { left: 1.125rem; }
    .pd-map__zoom { right: 0.5rem; bottom: 0.5rem; }
}

/* ------------------------------------------------------------
   WIDE SCREENS — compose the countdown band into two columns

   On a laptop and up the countdown panel has a lot of empty right
   half: a headline and two lines of copy in a 1280px container. The
   clock moves into its own column there and becomes the counterweight,
   stacked 2x2 so the digits can grow instead of stretching into a thin
   single row.

   Scoped to .pd-section on purpose: .pd-live__title also carries
   data-phase="countdown", and it must not be caught by this.
   Grid areas are assigned by class, so a missing optional child (the
   pinned update, usually absent) simply leaves its row collapsed.
   ------------------------------------------------------------ */

@media (min-width: 1000px) {
    .pd-section .pd-panel[data-phase="countdown"] {
        --pd-display: grid;
        /* 1.12/0.88 rather than an even split: the three CTA pills need
           ~651px to sit on one row, which an even split just misses. */
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
        grid-template-areas:
            "pinned   pinned"
            "eyebrow  clock"
            "headline clock"
            "lede     clock"
            "ready    clock"
            "ctas     clock"
            "support  support";
        column-gap: clamp(2rem, 5vw, 4.5rem);
        align-items: start;
    }
    .pd-section .pd-panel[data-phase="countdown"] > .pd-pinned   { grid-area: pinned; }
    .pd-section .pd-panel[data-phase="countdown"] > .pd-eyebrow  { grid-area: eyebrow; }
    .pd-section .pd-panel[data-phase="countdown"] > .pd-headline { grid-area: headline; }
    .pd-section .pd-panel[data-phase="countdown"] > .pd-lede     { grid-area: lede; }
    .pd-section .pd-panel[data-phase="countdown"] > .pd-ready    { grid-area: ready; }
    .pd-section .pd-panel[data-phase="countdown"] > .pd-ctas     { grid-area: ctas; }
    .pd-section .pd-panel[data-phase="countdown"] > .pd-support  { grid-area: support; }

    .pd-section .pd-panel[data-phase="countdown"] > .pd-clock {
        grid-area: clock;
        align-self: center;
        justify-self: end;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(1rem, 2.2vw, 2.25rem) clamp(1.5rem, 3vw, 3rem);
        width: 100%;
        max-width: 30rem;
        margin: 0;
    }
    .pd-section .pd-panel[data-phase="countdown"] .pd-clock__num {
        font-size: clamp(3.75rem, 6vw, 7.5rem);
    }
    /* The lede no longer needs to hold the full measure on its own. */
    .pd-section .pd-panel[data-phase="countdown"] > .pd-lede { max-width: 42ch; }
}

/* ------------------------------------------------------------
   REVIEW FIXES — contrast, focus and editor visibility

   Everything here came out of an adversarial pass over the section
   above. Each rule notes the failure it prevents so none of them gets
   "tidied away" later.
   ------------------------------------------------------------ */

/* The global link focus ring is purple. On the black countdown bar that
   clears 3:1, but the live and afterglow bars repaint themselves in the
   same purple family and the ring drops to ~1.0:1 — an invisible focus
   indicator on the second tab stop of every page, all day. White clears
   6.3:1 on every stop of both gradients and 18:1 on the black bar, so one
   rule covers all four phases and both colour modes. */
.pd-bar a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
    border-radius: 2px;
}

/* .announcement-bar's hover colour is magenta, which vanishes into the
   magenta end of the live gradient. White + a thicker underline keeps the
   hover legible on every phase. */
[data-pride-phase="parade"] .pd-bar a:hover,
[data-pride-phase="celebration"] .pd-bar a:hover,
[data-pride-phase="afterglow"] .pd-bar a:hover {
    color: #fff;
    text-decoration-thickness: 2px;
}

/* The dialog toolbar is an always-dark surface carrying literal white
   controls, so it must not take its background from --pid-ink: that token
   flips to near-white in dark mode and the close button turns white-on-white.
   --pid-surface-dark stays dark in both modes. */
.pd-map-dialog__bar { background: var(--pid-surface-dark); }

/* The "NOW" pill and the live timeline marker are saturated brand chips with
   literal white type. --pid-magenta-text lifts to #F04FA3 in dark mode, where
   white on it is only 3.3:1. Pin them to the brand magenta, which holds
   5.8:1 with white in both modes. */
.pd-beat__state,
.pd-beat[data-state="now"] .pd-beat__marker { background: #C40F70; }
.pd-beat[data-state="now"] .pd-beat__marker { border-color: #C40F70; }

/* The pinned update sat on a white scrim over an already-light gradient,
   which pushed its own white text down toward 3:1. A darkening scrim goes
   the other way and puts the body copy above 9:1 on every stop. */
.pd-pinned {
    background: rgba(13, 11, 20, 0.38);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
}
.pd-pinned__tag { background: rgba(0, 0, 0, 0.45); }
.pd-pinned__time { color: #fff; }

/* The header is sticky, so an in-page jump to #map (the announcement bar
   links straight to it) lands with the heading hidden underneath it. */
.pd-section,
.pd-live,
.pd-map-section { scroll-margin-top: 6rem; }

/* In the Site Editor there is no data-pride-phase on <html>, so every panel
   stays display:none and all four phases render blank. Reveal them inside the
   editor canvas only — the front end keeps showing exactly one. */
.editor-styles-wrapper .pd-panel,
.block-editor-iframe__body .pd-panel {
    display: var(--pd-display, block);
}

/* ------------------------------------------------------------
   AFTERGLOW — the sponsor wall

   The sponsors get the actual logo plate instead of a written card:
   it names all ~35 of them, which no generated list could (the
   sponsor CPT holds only the presenting sponsor). This reuses the
   .sponsors-2025 figure from the homepage showcase, so it inherits
   the dark plate AND the below-700px side-scroll that keeps forty
   logos legible on a phone.
   ------------------------------------------------------------ */

.pd-sponsors { margin: 0 0 2.5rem; }

.pd-sponsors__title {
    font-family: var(--pid-serif);
    font-size: clamp(1.625rem, 3.5vw, 2.25rem);
    font-weight: 600;
    line-height: 1.1;
    margin: 0 0 0.625rem;
}
.pd-section .pd-sponsors__title { color: #fff; }

.pd-sponsors__lede {
    margin: 0 0 1.5rem;
    max-width: 62ch;
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
}

/* The plate centres itself at 1100px on the homepage; here it sits in a
   left-aligned column, so let it take the full container width instead. */
.pd-section .pd-sponsors__plate {
    max-width: none;
    margin-inline: 0;
}
.pd-section .pd-sponsors__plate picture {
    display: block;
    width: 100%;
}

/* ------------------------------------------------------------
   "DALLAS IS BIGGER THAN ONE STREET"

   Sits under the map, and as a CTA in the celebration phase. The map
   and the celebration copy both name venues on the parade route, and
   several of those are also sponsors, so without this the site reads
   like a house list. Rule above it so it reads as an aside rather than
   a competing section.
   ------------------------------------------------------------ */

.pd-beyond {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 1.75rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--pid-rule);
}
.pd-beyond__text {
    margin: 0;
    flex: 1 1 22ch;
    max-width: 62ch;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--pid-ink-muted);
}
/* This block lives on light canvas under the map, so its button follows the
   map's buttons rather than the gradient's. */
.pd-beyond .pd-cta {
    border-color: var(--pid-ink);
    color: var(--pid-ink);
    background: transparent;
}
.pd-beyond .pd-cta:hover { background: var(--pid-ink); color: var(--pid-canvas); }
.pd-beyond .pd-cta:focus-visible { outline-color: var(--pid-ink); }

/* ------------------------------------------------------------
   "SUBJECT TO CHANGE" NOTE

   Appears under the run of show, under the map, and on the parade
   page's details grid. Quiet but not hidden: it has to be readable by
   someone standing on Cedar Springs wondering why the floats are late,
   so it keeps --pid-ink-muted (AA on both canvases) rather than
   dropping to a lighter grey.
   ------------------------------------------------------------ */

.pd-note {
    margin: 1.75rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--pid-rule);
    max-width: 78ch;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--pid-ink-muted);
}
/* On the parade details grid the note follows a <dl> that is already
   centred at --pid-wide, so the note aligns to that grid's left edge
   rather than centring itself inside the leftover space. */
.parade-details + .pd-note {
    margin-top: 2rem;
    margin-inline: 0;
    max-width: var(--pid-wide);
}

/* ------------------------------------------------------------
   CREW NOTE — vendors, entries, volunteers, sponsors

   Appears under the run of show and in the parade page's entry
   section. It has to read as a different KIND of message from the
   guest-facing schedule above it, and it lands on two different
   section backgrounds (.pd-live is warm, the participate section is
   plain canvas), so it carries a translucent brand tint rather than a
   solid fill that would disappear against one of them.
   ------------------------------------------------------------ */

.pd-crew {
    max-width: 78ch;
    margin: 1.75rem 0 0;
    padding: 1.125rem 1.375rem;
    background: rgba(126, 0, 254, 0.06);
    border: 1px solid var(--pid-rule);
    border-left: 3px solid var(--pid-purple);
    border-radius: 0 6px 6px 0;
}
.pd-crew__tag {
    margin: 0 0 0.375rem;
    font-family: var(--pid-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pid-purple);
}
.pd-crew__text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--pid-ink-muted);
}
.pd-crew__text a {
    color: var(--pid-ink);
    font-weight: 600;
    text-underline-offset: 0.2em;
}

:root[data-theme="dark"] .pd-crew { background: rgba(162, 90, 255, 0.13); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pd-crew { background: rgba(162, 90, 255, 0.13); }
}

/* The sponsor wall on the parade page. The CPT grid above it only ever holds
   the presenting sponsor, so this plate is what actually makes "all sponsors"
   true on that page. Centred to match the strip's centred heading. */
.parade-sponsors-wall { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.parade-sponsors-wall__lede {
    margin: 0 0 1.25rem;
    text-align: center;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--pid-ink-muted);
}