:root {
    /* ---- Tier 1: Figma brand palette (primitives) ---- */
    --clay: #ba4a29;         /* primary accent */
    --clay-hover: #a03d20;   /* darker clay for links/hover */
    --plum: #47141f;         /* display headings, plum bands/panels */
    --plum-dark: #2e0a12;    /* Plum/Dark — designer devsite Jul 2026 */
    --plum-light: #6c444b;   /* Plum/Light — designer devsite Jul 2026 */
    --charcoal: #2b2621;     /* body text, dark bands */
    --stone: #f2ebe3;        /* page background */
    --stone-dark: #e4d9cb;   /* card fill (keynote cards) */
    --teal: #005966;         /* pricing active tab + price */
    --ochre: #d68a1c;        /* prize large-text links */
    --sky: #a6c9de;          /* light labels on dark bands */
    --verde: #47661f;        /* illustration green (dark) */
    --cactus: #8ca16b;       /* illustration green (light) */

    /* ---- Tier 2: semantic aliases (consumed by components) ---- */
    --color-ink: var(--charcoal);
    --color-muted: #6b6358;
    --color-paper: var(--stone);
    --color-panel: #faf6ef;              /* near-white stone for cards/pricing panel */
    --color-panel-alt: var(--stone-dark);
    --color-white: #ffffff;
    --color-line: var(--stone-dark);
    --color-line-dark: #3a352d;
    --color-accent: var(--clay);
    --color-accent-dark: var(--clay-hover);
    --color-sage: var(--cactus);
    --color-dark: var(--charcoal);       /* charcoal bands (announcement, footer) */
    --color-dark-panel: var(--plum);     /* plum bands/panels (Big Reads, à-la-carte, judges) */
    --color-dark-line: #4a4339;
    --color-on-dark: #f2ebe4;
    --color-on-dark-muted: #b8b0a4;
    --color-on-dark-link: var(--sky);
    --color-on-dark-accent: var(--sky);
    --color-on-dark-line: #5a5249;

    /* ---- Typography ---- */
    /* Vatican is the display face (not a Google font — @font-face + woff2 pending
       from designer; falls back to Crimson Pro until the files land). */
    --font-display: "Vatican", "Crimson Text", Georgia, "Times New Roman", serif;
    --font-body: "Figtree", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-label: "Inconsolata", ui-monospace, "SFMono-Regular", Menlo, monospace;
    --font-accent: "Crimson Text", Georgia, "Times New Roman", serif; /* italic accents */
    /* Back-compat aliases (existing rules reference these) */
    --font-sans: var(--font-body);
    --font-serif: var(--font-display);

    /* Type scale (px basis from Figma H1–H7 / P1–P8) */
    --fs-h1: clamp(2.1rem, 8vw, 4.5rem);    /* 72 desktop; smaller floor so it fits narrow screens */
    --fs-h2: clamp(1.9rem, 4vw, 2.25rem);   /* 36 */
    --fs-h3: clamp(1.6rem, 3.4vw, 2rem);    /* 32 */
    --fs-h3b: 1.5rem;                        /* 24/28 Vatican step — designer devsite */
    --fs-h4: 1.25rem;                        /* 20 */
    --fs-h5: 1.125rem;                       /* 18 label */
    --fs-h6: 1.25rem;                        /* 20 label */
    --fs-h7: 0.875rem;                       /* 14 label */
    --fs-p1: 1.25rem;                        /* 20/32 lede */
    --fs-p2: 1.125rem;                       /* 18/32 */
    --fs-p3: 1rem;                           /* 16/24 body */
    --fs-p4: 0.875rem;                       /* 14/28 */
    --fs-p5: 0.75rem;                        /* 12/18 card desc */
    --fs-p8: 0.6875rem;                      /* 11/16 footer */
    --tracking-caps: 0.05em;                 /* uppercase label tracking (Inconsolata) */
    --tracking-caps-wide: 3px;               /* Figma label letterSpacing 3 — designer devsite */

    /* ---- Shape / layout ---- */
    --radius: 8px;                           /* buttons */
    --radius-lg: 20px;                       /* cards, panels */
    --space-page: clamp(1rem, 4vw, 3rem);
    --max-wide: 1344px;                      /* Figma content width (1440 − 48×2) */
    --max-narrow: 760px;
    --shadow-sm: 0 14px 34px rgba(31, 28, 23, .12);
    --shadow-md: 0 14px 34px rgba(31, 28, 23, .14);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-accent) 45%, white);
    --transition-fast: .15s ease;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Focus visibility — keyboard-navigable interactive elements only */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius);
}

* {
    box-sizing: border-box;
}

html {
    scroll-padding-top: 90px;
}

body {
    margin: 0;
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-sans);
    line-height: 1.6;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.12;
}

/* ---- Vatican display face ----
   Drop woff2 files into assets/fonts/ and this activates. Until then the
   --font-display fallback (Crimson Text) renders. Keep the family name
   "Vatican" so no token change is needed when the files land. */
@font-face {
    font-family: "Vatican";
    src: url("../fonts/vatican-medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ---- Figma type-style helpers ----
   Named to the Figma styles so section markup reads 1:1 with the design.
   H5/H6/H7 = Inconsolata uppercase labels; P7 = Crimson Text italic accent. */
.t-h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h1); line-height: 1; text-transform: uppercase; color: var(--plum); }
.t-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); line-height: 1.05; text-transform: uppercase; }
.t-h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.05; text-transform: uppercase; }
.t-h4 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h4); line-height: 1.2; }
.t-label,
.t-h5, .t-h6, .t-h7 {
    font-family: var(--font-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    line-height: 1.35;
}
.t-h5 { font-size: var(--fs-h5); }
.t-h6 { font-size: var(--fs-h6); }
.t-h7 { font-size: var(--fs-h7); }
.t-eyebrow { color: var(--clay); }
.t-accent { font-family: var(--font-accent); font-style: italic; }
.t-lede { font-size: var(--fs-p1); line-height: 1.6; }

a {
    color: var(--color-accent-dark);
}

img {
    max-width: 100%;
    height: auto;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 1rem;
    z-index: 20;
    background: var(--color-ink);
    color: #fff;
    padding: .75rem 1rem;
}

.skip-link:focus {
    left: 1rem;
}

.site-header {
    border-bottom: 1px solid var(--color-line);
    background: rgba(251, 250, 247, .96);
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Offset the sticky header below the WP admin bar so it isn't clipped on
   scroll in logged-in views (admin bar is position:fixed at 32/46px; at
   <=600px WP drops it to non-fixed, so reset to 0). Visitors are unaffected. */
.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

@media screen and (max-width: 600px) {
    .admin-bar .site-header {
        top: 0;
    }
}

.site-header__inner,
.site-footer__inner,
.section__inner,
.page-header,
.archive-shell,
.single-shell {
    width: min(100% - (var(--space-page) * 2), var(--max-wide));
    margin-inline: auto;
}

.site-header__inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.site-brand {
    text-decoration: none;
    color: var(--color-ink);
    font-weight: 800;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
}

.site-brand__logo {
    display: block;
    width: auto;
    height: 52px;
    color: var(--color-ink);
}

/* Visually hidden, still exposed to screen readers + search engines. */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.primary-nav__list,
.footer-nav {
    display: flex;
    gap: 1rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.primary-nav a,
.footer-nav a {
    text-decoration: none;
    font-weight: 650;
}

.menu-toggle {
    display: none;
}

.site-main {
    min-height: 60vh;
}

.section {
    padding: clamp(3rem, 7vw, 6rem) 0;
}

.section--hero {
    padding-top: clamp(3rem, 8vw, 7rem);
}

.section--cta {
    background: var(--color-accent);
    color: #fff;
}

.section--cta h2 {
    color: #fff;
}

.section--dark {
    background: var(--color-dark);
    color: #efe9df;
}

.section--dark h2,
.section--dark h3 {
    color: #fff;
}

.section__inner--narrow {
    max-width: var(--max-narrow);
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
}

.hero h1,
.page-header h1 {
    margin: 0 0 1rem;
    font-size: clamp(2.5rem, 7vw, 5.8rem);
    line-height: .98;
    letter-spacing: 0;
}

.hero__text {
    font-size: 1.15rem;
    color: var(--color-muted);
    max-width: 44rem;
}

.hero__image {
    margin: 0;
}

.hero__image img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 8px;
}

.page-header {
    padding: clamp(3rem, 8vw, 6rem) 0 1rem;
}

.eyebrow {
    margin: 0 0 .75rem;
    color: var(--color-accent);
    font-weight: 800;
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: 0;
}

.button,
.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: .75rem 1.25rem;
    border-radius: var(--radius);
    background: var(--color-accent);
    color: #fff;
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    transition: background .15s ease;
}

.button:hover {
    background: var(--color-accent-dark);
    text-decoration: none;
}

.button--light {
    background: #fff;
    color: var(--color-accent-dark);
}

.button--ghost {
    background: transparent;
    color: var(--color-accent-dark);
    border: 1px solid var(--color-line);
}

.button--ghost:hover {
    background: var(--color-panel);
}

.content-flow > * + * {
    margin-top: 1rem;
}

.content-flow h2,
.section h2 {
    margin-top: 0;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.08;
}

.card-grid,
.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 1rem;
}

.card {
    background: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: 8px;
    padding: 1.2rem;
}

.card h2,
.card h3 {
    margin-top: 0;
    line-height: 1.2;
}

.cta-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.cta-band h2,
.cta-band p {
    margin: 0;
}

.embed-frame iframe {
    width: 100%;
    min-height: 560px;
    border: 1px solid var(--color-line);
    border-radius: 8px;
}

.smlf-cvent-embed iframe {
    display: block;
    width: 100%;
    min-height: 720px;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    background: #fff;
}

.smlf-form {
    display: grid;
    gap: 1rem;
    max-width: var(--max-narrow);
}

.smlf-form label {
    display: grid;
    gap: .4rem;
    font-weight: 700;
}

.smlf-form input,
.smlf-form textarea {
    width: 100%;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    padding: .75rem .85rem;
    font: inherit;
    background: #fff;
}

.single-image {
    margin: 0 auto 2rem;
    width: min(100% - (var(--space-page) * 2), var(--max-narrow));
}

.site-footer {
    border-top: 1px solid var(--color-line);
    padding: 3rem 0;
    color: var(--color-muted);
}

.site-footer__inner {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}

.site-footer__brand {
    color: var(--color-ink);
    font-weight: 800;
}

@media (max-width: 760px) {
    /* Two-row header: brand + Menu on row 1, actions full-width on row 2 */
    .site-header__inner {
        flex-wrap: wrap;
        align-items: center;
        row-gap: .75rem;
        column-gap: 1rem;
        padding: .85rem 0;
        min-height: 0;
    }

    .site-brand {
        flex: 1 1 auto;
        min-width: 0;
        margin-right: auto;
    }

    .site-brand__name {
        font-size: 1.05rem;
        line-height: 1.2;
    }

    .site-brand__logo {
        height: 40px;
    }

    .menu-toggle {
        order: 1;
        display: inline-flex;
        align-items: center;
        border: 1px solid var(--color-line);
        background: transparent;
        border-radius: 6px;
        padding: .55rem .9rem;
        font: inherit;
        font-weight: 600;
    }

    .header-actions {
        order: 2;
        flex: 1 0 100%;
        gap: .6rem;
    }

    .header-actions .button {
        flex: 1;
        min-height: 46px;
        font-size: .95rem;
        white-space: nowrap;
    }

    /* Slide-down drawer anchored to the bottom of the (sticky) header */
    .primary-nav {
        display: none;
        position: absolute;
        inset: calc(100% + .5rem) var(--space-page) auto;
        padding: .5rem;
        background: var(--color-panel);
        border: 1px solid var(--color-line);
        border-radius: 10px;
        box-shadow: 0 14px 34px rgba(31, 28, 23, .14);
    }

    .primary-nav.is-open {
        display: block;
    }

    .primary-nav__list,
    .footer-nav,
    .site-footer__inner,
    .cta-band {
        flex-direction: column;
        align-items: stretch;
    }

    .primary-nav__list {
        gap: 0;
    }

    .primary-nav .menu-item {
        border-bottom: 1px solid var(--color-line);
    }

    .primary-nav .menu-item:last-child {
        border-bottom: none;
    }

    .primary-nav .menu-item > a {
        display: block;
        padding: .85rem .75rem;
    }

    /* Submenus inline (no absolute dropdown on touch) */
    .primary-nav .sub-menu {
        position: static;
        display: none;
        min-width: 0;
        margin: 0;
        padding: 0 0 .4rem .75rem;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .primary-nav .sub-menu.is-open {
        display: block;
    }

    .primary-nav .sub-menu a {
        padding: .55rem .75rem;
        white-space: normal;
    }

    .hero {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Brand + dropdown navigation
   ============================================================ */
.site-brand__name {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 600;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.header-actions .button {
    min-height: 40px;
    padding: .5rem .9rem;
    font-size: .85rem;
}

.lang-toggle,
.search-toggle {
    border: 1px solid var(--color-line);
    background: transparent;
    border-radius: var(--radius);
    padding: .45rem .7rem;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.primary-nav__list {
    align-items: center;
    gap: 1.4rem;
}

.primary-nav > .primary-nav__list > .menu-item > a {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .82rem;
    font-weight: 600;
}

.primary-nav .menu-item {
    position: relative;
}

.primary-nav .menu-item-has-children > a::after {
    content: " \25be";
    color: var(--color-muted);
}

.primary-nav .sub-menu {
    list-style: none;
    margin: 0;
    padding: .5rem 0;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    background: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    box-shadow: 0 14px 34px rgba(31, 28, 23, .12);
    display: none;
    z-index: 30;
}

.primary-nav .menu-item-has-children:hover > .sub-menu,
.primary-nav .menu-item-has-children:focus-within > .sub-menu,
.primary-nav .sub-menu.is-open {
    display: block;
}

.primary-nav .sub-menu a {
    display: block;
    padding: .55rem 1.2rem;
    font-weight: 500;
    font-size: .95rem;
    white-space: nowrap;
}

.primary-nav .sub-menu a:hover {
    background: #f1ebe1;
}

/* ============================================================
   Hero stats + eyebrow polish
   ============================================================ */
.hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.5rem;
}

/* ============================================================
   Generic carousel (keynotes, testimonials)
   ============================================================ */
.carousel {
    position: relative;
}

.carousel__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(min(100%, 280px), 1fr);
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: .5rem;
}

.carousel__track > * {
    scroll-snap-align: start;
}

.carousel__nav {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.carousel__nav button,
.announce__dots button,
.carousel__dots button {
    border: 1px solid var(--color-line);
    background: var(--color-panel);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    cursor: pointer;
    font: inherit;
}

.carousel__dots {
    display: flex;
    gap: .5rem;
    justify-content: center;
    margin-top: 1rem;
}

.carousel__dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    background: var(--color-line);
    border: none;
}

.carousel__dots button.is-active {
    background: var(--color-accent);
}

/* Keynote card */
.keynote-card {
    background: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.keynote-card img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    display: block;
}

.keynote-card__body {
    padding: 1.1rem 1.2rem 1.4rem;
}

.keynote-card__name {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    margin: .2rem 0;
}

/* ============================================================
   Pricing / packages
   ============================================================ */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1.25rem;
}

.pricing-card {
    position: relative;
    background: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: 1.8rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pricing-card.is-best {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-accent);
}

.pricing-card__badge {
    position: absolute;
    top: -12px;
    left: 1.6rem;
    background: var(--color-accent);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .25rem .7rem;
    border-radius: 999px;
}

.pricing-card__price {
    font-family: var(--font-serif);
    font-size: 2.4rem;
    font-weight: 600;
}

.pricing-card__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}

.pricing-card__features li {
    padding-left: 1.4rem;
    position: relative;
    font-size: .95rem;
}

.pricing-card__features li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: 700;
}

.pricing-card .button {
    margin-top: auto;
}

/* à-la-carte tabs + rows */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.tabs button {
    border: 1px solid var(--color-line);
    background: var(--color-panel);
    border-radius: 999px;
    padding: .5rem 1rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.tabs button.is-active {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

.addon-row,
.date-row,
.workshop-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-line);
}

/* ============================================================
   Testimonials
   ============================================================ */
.testimonial {
    background: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: 1.8rem;
}

.testimonial blockquote {
    margin: 0 0 1rem;
    font-family: var(--font-serif);
    font-size: 1.3rem;
    line-height: 1.4;
}

.testimonial__author {
    font-weight: 600;
}

.testimonial__role {
    color: var(--color-muted);
    font-size: .9rem;
}

/* ============================================================
   Media grid (Watch & Listen)
   ============================================================ */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1.25rem;
}

.media-card {
    background: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.media-card__thumb {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    background: #e7e0d5;
}

.media-card__body {
    padding: 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.media-card__platforms {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: auto;
}

.media-card__platforms a {
    font-size: .85rem;
    font-weight: 600;
}

/* ============================================================
   Newsletter band
   ============================================================ */
.section--newsletter {
    background: var(--color-dark-panel);
    color: #efe9df;
}

.newsletter__form {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    max-width: 480px;
}

.newsletter__form input {
    flex: 1 1 220px;
    border: 1px solid #4a4339;
    background: #1f1c17;
    color: #fff;
    border-radius: var(--radius);
    padding: .75rem .85rem;
    font: inherit;
}

/* ============================================================
   Sponsor / partner logo strips
   ============================================================ */
.sponsor-group + .sponsor-group {
    margin-top: 2rem;
}

.logo-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.25rem;
    align-items: center;
}

.logo-strip img {
    max-height: 70px;
    width: auto;
    margin: 0 auto;
    filter: grayscale(1);
    opacity: .8;
}

.logo-strip a:hover img {
    filter: none;
    opacity: 1;
}

/* ============================================================
   Timeline (origin story)
   ============================================================ */
.timeline {
    border-left: 2px solid var(--color-line);
    margin-left: .5rem;
    padding-left: 1.5rem;
    display: grid;
    gap: 1.6rem;
}

.timeline__item {
    position: relative;
}

.timeline__item::before {
    content: "";
    position: absolute;
    left: calc(-1.5rem - 6px);
    top: .4rem;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--color-accent);
}

.timeline__year {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    color: var(--color-accent-dark);
}

/* ============================================================
   Stat cards
   ============================================================ */
.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 1rem;
}

.stat-card {
    background: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: 1.4rem;
    text-align: center;
}

.stat-card__num {
    font-family: var(--font-serif);
    font-size: 2.6rem;
    font-weight: 600;
    color: var(--color-accent-dark);
    display: block;
}

/* ============================================================
   Split feature
   ============================================================ */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}

.split--reverse .split__media {
    order: 2;
}

.split__media img {
    border-radius: var(--radius-lg);
    width: 100%;
    object-fit: cover;
}

/* ============================================================
   Anchor / jump navigation
   ============================================================ */
.anchor-nav {
    position: sticky;
    top: 76px;
    z-index: 9;
    background: rgba(250, 247, 242, .95);
    border-bottom: 1px solid var(--color-line);
    backdrop-filter: blur(6px);
}

/* When the WP admin bar is present the sticky header is pushed down, so the
   anchor-nav must clear header (76px) + admin bar too, or it slides under the
   header on scroll (logged-in only). Breakpoints mirror .admin-bar .site-header
   above; the <=760px rule keeps the mobile base (top:0) since this selector
   would otherwise out-specify the mobile reset below. */
.admin-bar .anchor-nav {
    top: 108px; /* 76 header + 32 admin bar */
}

@media (max-width: 782px) {
    .admin-bar .anchor-nav {
        top: 122px; /* 76 header + 46 admin bar */
    }
}

@media (max-width: 760px) {
    .admin-bar .anchor-nav {
        top: 0;
    }
}

.anchor-nav__list {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    padding: .6rem 0;
    list-style: none;
    margin: 0;
}

.anchor-nav a {
    white-space: nowrap;
    padding: .4rem .8rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-muted);
}

.anchor-nav a:hover {
    background: #f1ebe1;
    color: var(--color-ink);
}

/* ============================================================
   People grids (team groups, faculty filter)
   ============================================================ */
.people-grid,
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 1.25rem;
}

.team-group + .team-group {
    margin-top: 2.5rem;
}

.person-card {
    text-align: left;
}

.person-card img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    border-radius: var(--radius-lg);
    margin-bottom: .75rem;
    background: #e7e0d5;
}

.person-card__name {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    margin: 0;
}

.person-card__role {
    color: var(--color-muted);
    font-size: .9rem;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.filter-bar button {
    border: 1px solid var(--color-line);
    background: var(--color-panel);
    border-radius: 999px;
    padding: .45rem 1rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.filter-bar button.is-active {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

[data-filter-hidden] {
    display: none !important;
}

/* ============================================================
   Workshop table
   ============================================================ */
.workshop-row {
    flex-wrap: wrap;
}

.workshop-row__meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    color: var(--color-muted);
    font-size: .85rem;
}

/* ============================================================
   FAQ accordion
   ============================================================ */
.accordion {
    border-top: 1px solid var(--color-line);
}

.accordion__item {
    border-bottom: 1px solid var(--color-line);
}

.accordion__q {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 1.1rem 0;
    font: inherit;
    font-weight: 600;
    font-size: 1.05rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.accordion__q::after {
    content: "+";
    color: var(--color-accent);
    font-size: 1.4rem;
    line-height: 1;
}

.accordion__item.is-open .accordion__q::after {
    content: "\2212";
}

.accordion__a {
    display: none;
    padding: 0 0 1.2rem;
    color: var(--color-muted);
}

.accordion__item.is-open .accordion__a {
    display: block;
}

/* ============================================================
   Announcement band (rotating)
   ============================================================ */
.section--announce {
    background: var(--color-dark);
    color: #efe9df;
    padding: clamp(1.5rem, 3vw, 2.5rem) 0;
}

.announce__item {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.announce__item.is-active {
    display: flex;
}

.announce__item a {
    color: #f3b9a6;
    font-weight: 600;
}

.announce__dots {
    display: flex;
    gap: .4rem;
    margin-top: .75rem;
}

.announce__dots button {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    background: #5a5249;
    padding: 0;
}

.announce__dots button.is-active {
    background: #f3b9a6;
}

/* ============================================================
   Important dates
   ============================================================ */
.dates-list .date-row:last-child,
.addon-list .addon-row:last-child {
    border-bottom: none;
}

.date-row__label {
    font-weight: 600;
}

/* ============================================================
   Footer columns + newsletter
   ============================================================ */
.site-footer--rich {
    background: var(--color-dark);
    color: #b8b0a4;
    border-top: none;
}

.site-footer--rich a {
    color: #d8d0c4;
}

.site-footer--rich .site-footer__brand,
.site-footer--rich h3 {
    color: #fff;
}

.site-footer--rich .footer-nav {
    flex-direction: column;
    gap: .5rem;
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 2rem;
}

.footer-legal {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #3a352d;
    font-size: .85rem;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 760px) {
    .split {
        grid-template-columns: 1fr;
    }

    .split--reverse .split__media {
        order: 0;
    }

    .anchor-nav {
        top: 0;
    }
}

/* ============================================================
   Team accordion
   ============================================================ */
.team-accordion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2.5rem;
}

.team-group {
    background: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: .75rem;
    overflow: hidden;
}

.team-group__summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.team-group__summary::-webkit-details-marker { display: none; }

.team-group__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-accent) 15%, white);
    color: var(--color-accent);
    flex-shrink: 0;
}

.team-group__meta {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    flex: 1;
}

.team-group__title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-ink);
}

.team-group__desc {
    font-size: .875rem;
    color: var(--color-muted);
}

.team-group__chevron {
    color: var(--color-muted);
    flex-shrink: 0;
    transition: transform .2s ease;
}

details[open] .team-group__chevron {
    transform: rotate(180deg);
}

.team-group .team-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    padding: 1.5rem;
    border-top: 1px solid var(--color-line);
}

.team-group__empty {
    padding: 1rem 1.5rem;
    color: var(--color-muted);
    font-size: .875rem;
    border-top: 1px solid var(--color-line);
}

/* Nested sub-teams (e.g. departments under "Our Team") */
.team-subgroups {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--color-line);
    background: color-mix(in srgb, var(--color-line) 25%, transparent);
}

.team-subgroup {
    background: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: .5rem;
    overflow: hidden;
}

.team-subgroup__summary {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.15rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.team-subgroup__summary::-webkit-details-marker { display: none; }

.team-subgroup__title {
    flex: 1;
    font-weight: 600;
    font-size: .95rem;
    color: var(--color-ink);
}

.team-subgroup__chevron {
    color: var(--color-muted);
    flex-shrink: 0;
    transition: transform .2s ease;
}

details[open] > .team-subgroup__summary .team-subgroup__chevron {
    transform: rotate(180deg);
}

.team-subgroup .team-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    padding: 1.25rem;
    border-top: 1px solid var(--color-line);
}

.team-subgroup .team-group__empty {
    padding: .85rem 1.15rem;
}

/* Person card — centered portrait layout (team accordion) */
.team-accordion .person-card {
    align-items: center;
    text-align: center;
}

.team-accordion .person-card img,
.team-accordion .person-card__photo {
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: .5rem;
    margin-bottom: 0;
}

.team-accordion .person-card__photo--placeholder {
    width: 100%;
    aspect-ratio: 1;
    background: var(--color-line);
    border-radius: .5rem;
}

.team-accordion .person-card__name {
    font-size: .9rem;
    margin: 0;
}

.team-accordion .person-card__role {
    font-size: .8rem;
    color: var(--color-muted);
    margin: 0;
}

.team-accordion .person-card__bio {
    font-size: .8rem;
    color: var(--color-muted);
    margin: 0;
}

/* ============================================================
   Hero: centered variant, dark support, badge
   ============================================================ */
.hero--centered {
    display: block;
    text-align: center;
    max-width: var(--max-narrow);
    margin-inline: auto;
}

.hero--centered .hero__text {
    margin-inline: auto;
}

.hero--centered .hero__actions {
    justify-content: center;
}

.section--dark h1 {
    color: #fff;
}

.section--dark .eyebrow {
    color: #f3b9a6;
}

.section--dark .hero__text {
    color: #b8b0a4;
}

.hero__badge {
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    padding: .4rem 1.1rem;
    font-size: .85rem;
    color: #d8d0c4;
    margin: 1.5rem 0 0;
}

/* ============================================================
   Get Involved button nav (support page)
   ============================================================ */
.section--get-involved {
    padding: 2rem 0;
    background: var(--color-paper);
    border-bottom: 1px solid var(--color-line);
}

.get-involved-nav {
    display: flex;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: .75rem;
}

/* ============================================================
   Card grid: icon variant
   ============================================================ */
.card__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fde8e2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: var(--color-accent);
    flex-shrink: 0;
}

.card__icon svg {
    width: 24px;
    height: 24px;
}

.card-grid--icon-cols .card {
    background: none;
    border: none;
    border-radius: 0;
    padding: 1rem 0;
    text-align: center;
}

.card-grid--icon-cols .card__icon {
    margin-inline: auto;
}

/* ============================================================
   Stat cards: colored variant
   ============================================================ */
.stat-card--colored {
    border: none;
}

.stat-card--colored .stat-card__num {
    color: inherit;
}

/* ============================================================
   CTA band: dark variant, multi-link, outline-white buttons
   ============================================================ */
.section--cta-dark {
    background: var(--color-dark);
    color: #efe9df;
}

.section--cta-dark h2 {
    color: #fff;
}

.cta-band--stack {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
}

.cta-band__links {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
}

.button--outline-white {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .6);
    color: #fff;
}

.button--outline-white:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

/* ============================================================
   HOME PAGE (Figma "HOMEPAGE" node 53:1559) — shared components
   Scoped under .home so nothing here leaks into other templates.
   Section-specific layout lives in each section's own block below,
   namespaced .hs-<section>. Asset base: assets/img/collage|icons|logo.
   ============================================================ */

.home { overflow-x: clip; max-width: 100%; }
/* Safety net: display headings never force horizontal overflow on narrow screens */
.home .hs-hero__title,
.home .hs-h2,
.home .hs-h3 { overflow-wrap: break-word; }

/* Section shell: full-bleed band + centered inner at Figma content width */
.home .hs { position: relative; }
.home .hs__inner {
    position: relative;
    max-width: var(--max-wide);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    z-index: 2;
}
.home .hs__center { text-align: center; }

/* Eyebrow / section label — Inconsolata caps */
.home .hs-eyebrow {
    font-family: var(--font-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-size: var(--fs-h5);
    color: var(--clay);
    margin: 0;
}
.home .hs-eyebrow--sky { color: var(--sky); }

/* Headings */
.home .hs-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); line-height: 1.05; text-transform: uppercase; color: var(--plum); margin: 0; }
.home .hs-h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.05; text-transform: uppercase; margin: 0; }
.home .hs-sub { font-size: var(--fs-p3); color: var(--charcoal); margin: 0; }
.home .hs--on-dark .hs-h2, .home .hs--on-dark .hs-h3 { color: var(--color-on-dark); }

/* ---- Buttons ---- */
.home .btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-label); font-weight: 600; text-transform: uppercase;
    letter-spacing: var(--tracking-caps); font-size: var(--fs-h7);
    cursor: pointer; text-decoration: none; transition: var(--transition-fast);
}
.home .btn--primary { background: var(--clay); color: #fff; padding: .5rem .875rem; border-radius: var(--radius); }
.home .btn--primary:hover { background: var(--clay-hover); }
.home .btn--text { color: var(--clay); text-decoration: underline; text-underline-offset: 3px; }
.home .btn--text:hover { color: var(--clay-hover); }
.home .btn--large { color: var(--ochre); font-size: var(--fs-h6); text-decoration: underline; text-underline-offset: 4px; }

/* Manicule button: label + pointing-hand icon + hairline rule under */
.home .btn-manicule { display: inline-flex; flex-direction: column; gap: .375rem; text-decoration: none; }
.home .btn-manicule__row { display: inline-flex; align-items: center; gap: .9375rem; }
.home .btn-manicule__label { font-family: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--fs-h7); color: var(--charcoal); }
.home .btn-manicule__icon { width: 48px; height: 17px; flex: none; }
.home .btn-manicule__rule { height: 1px; background: currentColor; opacity: .5; width: 100%; }
.home .btn-manicule--light .btn-manicule__label { color: var(--color-on-dark); }
.home .btn-manicule--light { color: var(--color-on-dark); }

/* ---- Card shell ---- */
.home .hs-card { background: var(--stone-dark); border-radius: var(--radius-lg); overflow: hidden; }
.home .hs-card--light { background: var(--color-panel); }

/* ---- Torn-edge band ---- */
.home .hs-band { position: relative; }
.home .hs-band--charcoal { background: var(--charcoal); color: var(--color-on-dark); }
.home .hs-band--plum { background: var(--plum); color: var(--color-on-dark); }
/* Torn top/bottom edges — mask technique shared with conference-theme:
   a stone (page-paper) strip masked by the shared torn-edge SVG, so the
   paper visibly tears into the coloured band. Same silhouette sitewide. */
.home .hs-band__edge {
    position: absolute; left: 0; width: 100%; height: 40px; z-index: 3; pointer-events: none;
    background-color: var(--stone);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-image: url("../img/collage/torn-paper-edge-b.svg");
    mask-image: url("../img/collage/torn-paper-edge-b.svg");
}

/* ---- Collage layer helper ---- */
.home .collage { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.home .collage__item { position: absolute; }
.home .collage img { display: block; width: 100%; height: 100%; object-fit: contain; }
.home .collage--multiply { mix-blend-mode: multiply; }

/* Page paper texture (very subtle, whole page) */
.home::before {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: url("../img/collage/texture-paper-grey.webp") center/cover;
    opacity: .05; mix-blend-mode: darken;
}

@media (max-width: 900px) {
    .home .collage { display: none; } /* hide heavy decorative collage on mobile by default; sections may re-enable key art */
}

/* ############################################################
   HOME PAGE SECTIONS — appended in render order (hero → cta)
   ############################################################ */

/* ============================================================
   Home §2.2 — Hero
   ============================================================ */
.home .hs-hero { position: relative; }
.home .hs-hero__inner {
    display: flex;
    align-items: center;
    min-height: clamp(520px, 52vw, 740px);
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.home .hs-hero__copy {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 640px;
}
.home .hs-hero__title {
    margin: 0;
    max-width: 620px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h1);
    line-height: 1;
    text-transform: uppercase;
    color: var(--plum);
}
.home .hs-hero__flourish {
    display: block;
    width: clamp(200px, 30vw, 331px);
    height: 12px;
    margin: clamp(1rem, 2.4vw, 1.75rem) 0 clamp(1.1rem, 2.4vw, 1.6rem);
    color: var(--ochre);
    background:
        radial-gradient(circle at 50% 50%, currentColor 0 3px, transparent 3.5px),
        linear-gradient(to right, currentColor 0 44%, transparent 44% 56%, currentColor 56% 100%);
    background-repeat: no-repeat;
    background-position: center, center;
    background-size: 12px 12px, 100% 2px;
}
.home .hs-hero__lede {
    margin: 0;
    max-width: 553px;
    font-family: var(--font-body);
    font-size: var(--fs-p1);
    line-height: 1.6;
    color: var(--charcoal);
}
.home .hs-hero__links {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.25rem, 3vw, 2.25rem);
    margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
}
.home .hs-hero__collage {
    right: auto;
    left: 50%;
    width: min(100%, var(--max-wide));
    transform: translateX(-50%);
}
.home .hs-hero .collage__item img { width: 100%; height: auto; }
.home .hs-hero__circle {
    top: 6%;
    right: 9%;
    width: clamp(230px, 31vw, 444px);
    aspect-ratio: 1 / 1;
    background: var(--clay);
    border-radius: 50%;
    z-index: 3;
}
.home .hs-hero__church {
    right: 17%;
    bottom: -1%;
    width: clamp(180px, 25vw, 340px);
    z-index: 5;
}
.home .hs-hero__cactus {
    right: 40%;
    bottom: -3%;
    width: clamp(135px, 19vw, 245px);
    z-index: 6;
}
.home .hs-hero__notebook {
    right: 7%;
    bottom: 2%;
    width: clamp(150px, 21vw, 285px);
    transform: rotate(-5deg);
    z-index: 7;
}
.home .hs-hero__bird {
    top: 9%;
    right: 1%;
    width: clamp(76px, 11vw, 148px);
    z-index: 8;
}
.home .hs-hero__city {
    right: 0;
    bottom: 0;
    width: clamp(150px, 21vw, 290px);
    opacity: .85;
    z-index: 2;
}
.home .hs-hero__hand {
    top: 27%;
    right: 0;
    width: clamp(150px, 22vw, 300px);
    opacity: .32;
    transform: rotate(6deg);
    z-index: 1;
}
@media (max-width: 900px) {
    .home .hs-hero__inner {
        display: block;
        min-height: 0;
        padding-block: clamp(2rem, 8vw, 3rem) 0;
    }
    .home .hs-hero__copy,
    .home .hs-hero__title,
    .home .hs-hero__lede { max-width: none; }
    .home .hs-hero .collage {
        display: block;
        position: relative;
        inset: auto;
        left: 0;
        width: 100%;
        height: clamp(240px, 62vw, 340px);
        margin-top: clamp(1.5rem, 5vw, 2.25rem);
        transform: none;
    }
    .home .hs-hero__hand,
    .home .hs-hero__city,
    .home .hs-hero__cactus,
    .home .hs-hero__notebook { display: none; }
    .home .hs-hero__circle {
        top: 4%; right: auto; left: 50%;
        transform: translateX(-38%);
        width: clamp(170px, 52vw, 250px);
    }
    .home .hs-hero__church {
        bottom: 0; right: auto; left: 50%;
        transform: translateX(-52%);
        width: clamp(140px, 42vw, 210px);
    }
    .home .hs-hero__bird {
        top: 0; right: 6%; left: auto;
        transform: none;
        width: clamp(60px, 17vw, 88px);
    }
}

/* ============================================================
   Section: Vision / Mission + stats grid  (.hs-visionstats)  §2.3
   ============================================================ */
.home .hs-visionstats { padding-block: clamp(3rem, 7vw, 5.5rem); }

/* Faint torn-stone texture wash behind the whole section (low-key, decorative) */
.home .hs-visionstats::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: url("../img/collage/torn-newsprint-01.webp") center top / cover no-repeat;
    opacity: .14; mix-blend-mode: multiply;
}

/* Two-column shell: left intro ~40%, right stats ~55% */
.home .hs-visionstats__grid {
    display: grid;
    grid-template-columns: minmax(0, 40fr) minmax(0, 55fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

/* ---- Left column: vision + mission, right-aligned against the gutter ---- */
.home .hs-visionstats__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: clamp(1.75rem, 3vw, 2.5rem);
}
.home .hs-visionstats__block { display: flex; flex-direction: column; gap: .5rem; }
.home .hs-visionstats__lead {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h4);
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--plum);
    margin: 0;
}
.home .hs-visionstats__body {
    font-family: var(--font-body);
    font-size: var(--fs-p3);
    line-height: 1.5;
    color: var(--charcoal);
    max-width: 24rem;
    margin: 0;
}
.home .hs-visionstats__cta { margin-top: .25rem; }

/* ---- Right column: 3×2 stats grid ---- */
.home .hs-visionstats__stats {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.home .hs-visionstats__stat {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .75rem;
    background: rgba(242, 235, 228, .6);
    border-radius: var(--radius-lg);
    padding: 20px 18px 21px;
    text-align: center;
    aspect-ratio: 1 / 1;
}
.home .hs-visionstats__stat-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .5rem;
}
.home .hs-visionstats__stat-icon {
    width: auto;
    height: clamp(64px, 6vw, 90px);
    flex: none;
}
.home .hs-visionstats__stat-num {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.9rem, 3.2vw, 2.5rem);
    line-height: .9;
    color: var(--charcoal);
    margin-left: auto;
}
.home .hs-visionstats__stat-label {
    font-family: var(--font-label);
    font-weight: 600;
    font-size: var(--fs-h5);
    line-height: 1.33;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--charcoal);
    margin: 0;
}

/* ---- Responsive: stack columns, then reduce the stats grid ---- */
@media (max-width: 900px) {
    .home .hs-visionstats__grid { grid-template-columns: 1fr; gap: clamp(2.25rem, 6vw, 3.25rem); }
    .home .hs-visionstats__intro { align-items: flex-start; text-align: left; }
    .home .hs-visionstats__body { max-width: 34rem; }
    .home .hs-visionstats__stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .home .hs-visionstats__stats { grid-template-columns: 1fr; }
    .home .hs-visionstats__stat { aspect-ratio: auto; }
}

/* ============================================================
   Home §2.4 — Announcement band ("What's Happening Now")
   ============================================================ */
.home .hs-announce {
    min-height: clamp(420px, 34vw, 489px);
    padding-block: clamp(4.5rem, 9vw, 7rem);
    overflow: hidden;
}
/* Torn top/bottom edges — replaces the old self-clip polygon with the shared
   mask-SVG silhouette: stone paper strips tear into the charcoal band. */
.home .hs-announce::before,
.home .hs-announce::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: clamp(22px, 3.5vw, 44px);
    z-index: 3;
    pointer-events: none;
    background-color: var(--stone);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-image: url("../img/collage/torn-paper-edge-b.svg");
    mask-image: url("../img/collage/torn-paper-edge-b.svg");
}
.home .hs-announce::before {
    top: -1px;
}
.home .hs-announce::after {
    bottom: -1px;
    -webkit-mask-image: url("../img/collage/torn-paper-edge-a.svg");
    mask-image: url("../img/collage/torn-paper-edge-a.svg");
    transform: scaleY(-1);
}
.home .hs-announce__panel {
    position: relative;
    display: flex;
    gap: 1.5rem;
    max-width: 700px;
    margin-inline-start: clamp(0rem, 11vw, 11rem);
}
.home .hs-announce__content { max-width: 640px; }
.home .hs-announce__rule {
    flex: none;
    width: 0;
    height: 110px;
    margin-top: 0.35rem;
    border-left: 1.5px dashed var(--color-on-dark-muted);
}
.home .hs-announce__eyebrow { color: var(--color-on-dark); }
.home .hs-announce__label {
    font-size: var(--fs-h7);
    margin-top: 0.9rem;
}
.home .hs-announce__title { margin-top: 0.5rem; }
.home .hs-announce__text {
    margin: 1.15rem 0 0 36px;
    font-family: var(--font-body);
    font-size: var(--fs-p4);
    line-height: 2;
    color: var(--color-on-dark);
}
.home .hs-announce__text p { margin: 0 0 0.4rem; }
.home .hs-announce__cta { margin: 2.25rem 0 0 36px; }
.home .hs-announce__journal {
    left: -1%;
    bottom: 4%;
    width: clamp(150px, 16vw, 230px);
    height: 74%;
    transform: rotate(-7deg);
}
.home .hs-announce__journal img { object-position: bottom left; }
.home .hs-announce__daisy {
    left: 0;
    bottom: 3%;
    width: clamp(70px, 9vw, 130px);
    height: 30%;
}
.home .hs-announce__daisy img { object-position: bottom left; }
.home .hs-announce__books {
    top: 3%;
    right: 3%;
    width: clamp(150px, 15vw, 220px);
    height: 66%;
}
.home .hs-announce__books img { object-position: top right; }
.home .hs-announce__cityscape {
    right: 0;
    bottom: 3%;
    width: clamp(170px, 20vw, 300px);
    height: 26%;
}
.home .hs-announce__cityscape img { object-position: bottom right; }
.home .hs-announce__rose {
    right: 11%;
    top: 42%;
    width: clamp(70px, 8vw, 120px);
    height: 26%;
}
@media (max-width: 900px) {
    .home .hs-announce__panel { margin-inline-start: 0; }
}
@media (max-width: 640px) {
    .home .hs-announce__panel { gap: 1rem; }
    .home .hs-announce__rule { height: 92px; }
    .home .hs-announce__text,
    .home .hs-announce__cta { margin-left: 1.25rem; }
}

/* ============================================================
   Home §2.6 — Packages & Pricing (tabs + panel + à-la-carte)
   ============================================================ */
.home .hs-pricing {
    padding-block: clamp(3rem, 7vw, 5.5rem);
    overflow: hidden;
}
.home .hs-pricing__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .625rem;
    max-width: 46rem;
    margin: 0 auto clamp(1.75rem, 4vw, 2.75rem);
}
.home .hs-pricing__head .hs-sub { color: var(--color-muted); }
.home .hs-pricing__box {
    position: relative;
    max-width: 62rem;
    margin-inline: auto;
    z-index: 2;
}
.home .hs-pricing__tabs {
    display: flex;
    align-items: stretch;
}
.home .hs-pricing__tab {
    flex: 1 1 0;
    min-width: 0;
    margin-left: -1px;
    padding: .875rem 1rem;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--plum) 45%, transparent);
    border-bottom: 1px solid var(--teal);
    font-family: var(--font-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-size: var(--fs-h7);
    line-height: 1.1;
    color: var(--plum);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}
.home .hs-pricing__tab:first-child {
    margin-left: 0;
    border-top-left-radius: var(--radius-lg);
}
.home .hs-pricing__tab:last-child {
    border-top-right-radius: var(--radius-lg);
}
.home .hs-pricing__tab:hover { color: var(--teal); }
.home .hs-pricing__tab.is-active {
    position: relative;
    z-index: 3;
    color: var(--teal);
    background: var(--color-panel);
    border-color: var(--teal);
    border-bottom-color: transparent;
}
.home .hs-pricing__tab:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: -3px;
}
.home .hs-pricing__panels {
    position: relative;
    z-index: 1;
    border: 1px solid var(--teal);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--color-panel);
}
/* All panels stack in one grid cell so the box keeps the height of the
   tallest panel — switching tabs never resizes the section, so the
   %-positioned collage art doesn't jump. Inactive panels stay in flow but
   invisible + unfocusable (visibility), not display:none. */
.home .hs-pricing__panels { display: grid; }
.home .hs-pricing__panel {
    grid-area: 1 / 1;
    padding: clamp(1.5rem, 3.2vw, 2.5rem);
    align-self: start;
}
.home .hs-pricing__panel[hidden] { display: block; visibility: hidden; }
.home .hs-pricing__panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem clamp(1rem, 3vw, 2.5rem);
    flex-wrap: wrap;
}
.home .hs-pricing__badge {
    font-family: var(--font-accent);
    font-style: italic;
    color: var(--clay);
    font-size: var(--fs-p3);
    margin: 0 0 .25rem;
}
.home .hs-pricing__name {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h2);
    line-height: 1;
    text-transform: uppercase;
    color: var(--plum);
    margin: 0;
}
.home .hs-pricing__tagline {
    font-size: var(--fs-p3);
    color: var(--charcoal);
    margin: .5rem 0 0;
}
.home .hs-pricing__panel-price {
    text-align: right;
    flex: none;
    margin-left: auto;
}
.home .hs-pricing__price {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.25rem, 5vw, 2.75rem);
    line-height: 1;
    color: var(--teal);
    margin: 0;
}
.home .hs-pricing__price-note {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--fs-p3);
    color: var(--teal);
    margin: .375rem 0 0;
}
.home .hs-pricing__bullets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .25rem clamp(1.5rem, 4vw, 3rem);
    margin-top: clamp(1.5rem, 3vw, 2rem);
}
.home .hs-pricing__bullet-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.home .hs-pricing__bullet {
    position: relative;
    display: flex;
    gap: .5rem;
    font-family: var(--font-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-size: var(--fs-h7);
    line-height: 1.5;
    color: var(--charcoal);
    padding: .1875rem 0;
}
.home .hs-pricing__bullet::before {
    content: "\25AA";
    color: var(--charcoal);
    flex: none;
    line-height: 1.4;
}
.home .hs-pricing__foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
.home .hs-pricing__see-all {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--fs-p1);
    color: var(--clay);
    text-decoration: none;
}
.home .hs-pricing__see-all:hover {
    color: var(--clay-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.home .hs-pricing__alacarte {
    position: relative;
    z-index: 1;
    max-width: 62rem;
    margin: calc(var(--radius-lg) * -1) auto 0;
    padding: clamp(2.75rem, 5vw, 3.5rem) clamp(1.25rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2rem);
    background: var(--plum);
    color: var(--color-on-dark);
    border-radius: var(--radius-lg);
}
.home .hs-pricing__ac-title {
    font-family: var(--font-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: var(--fs-h5);
    color: var(--stone);
    text-align: center;
    margin: 0;
}
.home .hs-pricing__ac-sub {
    text-align: center;
    font-size: var(--fs-p3);
    color: var(--color-on-dark);
    margin: .625rem auto clamp(1.25rem, 3vw, 1.75rem);
    max-width: 40rem;
}
.home .hs-pricing__ac-link {
    color: var(--ochre);
    font-family: var(--font-accent);
    font-style: italic;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.home .hs-pricing__ac-link:hover { color: #e59b34; }
.home .hs-pricing__ac-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.home .hs-pricing__ac-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: .75rem;
    row-gap: .25rem;
    background: var(--stone);
    border-radius: 12px;
    padding: .875rem 1.125rem;
}
.home .hs-pricing__ac-icon {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 34px;
    height: 34px;
    object-fit: contain;
    align-self: center;
}
.home .hs-pricing__ac-name {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--font-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-size: var(--fs-h7);
    line-height: 1.2;
    color: var(--charcoal);
}
.home .hs-pricing__ac-price {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.5rem, 3vw, 1.75rem);
    line-height: 1;
    color: var(--teal);
}
.home .hs-pricing__ac-dur {
    grid-column: 2;
    grid-row: 2;
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--fs-p3);
    color: var(--color-muted);
}
.home .hs-pricing__ac-add {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    align-self: end;
    background: var(--plum);
    color: var(--stone);
    font-family: var(--font-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-size: .75rem;
    border: 0;
    border-radius: var(--radius);
    padding: .25rem .5rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease;
}
.home .hs-pricing__ac-add:hover { background: #5a1a27; }
.home .hs-pricing .collage img { height: auto; }
.home .hs-pricing .collage__item--belltower  { top: 3%;  left: -1%;  width: min(22vw, 300px); }
.home .hs-pricing .collage__item--maguey      { top: 24%; left: -2%;  width: min(19vw, 260px); }
.home .hs-pricing .collage__item--daisy       { top: 52%; left: 1%;   width: min(11vw, 150px); }
.home .hs-pricing .collage__item--hummingbird { top: 18%; right: 2%;  width: min(11vw, 150px); }
.home .hs-pricing .collage__item--cactus      { top: 30%; right: -2%; width: min(20vw, 290px); }
.home .hs-pricing .collage__item--notebook    { bottom: 1%; right: 1%; width: min(21vw, 300px); }
@media (max-width: 900px) {
    .home .hs-pricing__box,
    .home .hs-pricing__alacarte { max-width: 100%; }
    .home .hs-pricing__tabs {
        overflow-x: auto;
        scrollbar-width: none;
    }
    .home .hs-pricing__tabs::-webkit-scrollbar { display: none; }
    .home .hs-pricing__tab { flex: 1 0 auto; white-space: nowrap; }
    .home .hs-pricing__panel-head { flex-direction: column; }
    .home .hs-pricing__panel-price { text-align: left; margin-left: 0; }
    .home .hs-pricing__bullets { grid-template-columns: 1fr; }
    .home .hs-pricing__foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }
    .home .hs-pricing__ac-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   Home §2.5 — Featured Keynote Speakers
   Cards data-driven from $args['speakers']; photos from smlf_ speaker CPT later.
   ============================================================ */
.home .hs-keynotes {
    background: var(--stone);
    padding-block: clamp(3rem, 8vw, 5.5rem);
}
.home .hs-keynotes__head {
    max-width: 46rem;
    margin: 0 auto clamp(2rem, 5vw, 3rem);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
}
.home .hs-keynotes__grid {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1128px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.home .hs-keynotes__card {
    display: flex;
    flex-direction: column;
}
.home .hs-keynotes__media {
    position: relative;
    aspect-ratio: 27 / 22;
    display: grid;
    place-items: center;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--plum) 22%, transparent);
}
.home .hs-keynotes__media--placeholder {
    background: color-mix(in srgb, var(--charcoal) 6%, var(--stone-dark));
}
.home .hs-keynotes__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home .hs-keynotes__icon {
    width: 40%;
    max-width: 72px;
    height: auto;
    opacity: .22;
}
.home .hs-keynotes__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 1.125rem 1.75rem;
}
.home .hs-keynotes__subhead {
    font-size: var(--fs-h7);
    margin-bottom: .375rem;
}
.home .hs-keynotes__name {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h4);
    line-height: 1.2;
    color: var(--charcoal);
    margin: 0;
}
.home .hs-keynotes__desc {
    font-family: var(--font-body);
    font-size: var(--fs-p5);
    line-height: 1.5;
    color: var(--color-ink);
    margin: .5rem 0 .875rem;
}
.home .hs-keynotes__dots {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: clamp(2rem, 5vw, 3rem);
}
.home .hs-keynotes__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--charcoal) 28%, transparent);
    background: transparent;
}
.home .hs-keynotes__dot.is-active {
    background: var(--clay);
    border-color: var(--clay);
}
@media (max-width: 900px) {
    .home .hs-keynotes__grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 580px;
    }
}
@media (max-width: 560px) {
    .home .hs-keynotes__grid {
        grid-template-columns: 1fr;
        max-width: 320px;
    }
}

/* ============================================================
   Home §2.7 — The Big Reads (2027 Reading List, plum band)
   Books data-driven from $args['books']; from smlf_reading_list CPT later.
   ============================================================ */
.home .hs-bigreads {
    padding-block: clamp(3rem, 6vw, 4.5rem);
    overflow: hidden;
}
.home .hs-bigreads__edge {
    height: clamp(22px, 3.5vw, 44px);
}
.home .hs-bigreads__edge--top {
    top: -1px;
}
.home .hs-bigreads__edge--bottom {
    bottom: -1px;
    -webkit-mask-image: url("../img/collage/torn-paper-edge-a.svg");
    mask-image: url("../img/collage/torn-paper-edge-a.svg");
    transform: scaleY(-1);
}
.home .hs-bigreads__wrap {
    max-width: 1132px;
    margin-inline: auto;
}
.home .hs-bigreads__eyebrow { margin: 0 0 1.25rem; }
.home .hs-bigreads__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: 2rem;
}
.home .hs-bigreads__more { flex: none; }
.home .hs-bigreads__cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.home .hs-bigreads__card {
    display: flex;
    align-items: stretch;
    min-height: 190px;
}
.home .hs-bigreads__cover {
    flex: 0 0 49.5%;
    max-width: 277px;
}
.home .hs-bigreads__cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--plum);
}
.home .hs-bigreads__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
}
.home .hs-bigreads__subhead { font-size: var(--fs-h7); }
.home .hs-bigreads__book-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h4);
    line-height: 1.2;
    color: var(--charcoal);
    margin: .375rem 0 0;
}
.home .hs-bigreads__desc {
    font-size: var(--fs-p5);
    line-height: 1.5;
    color: var(--charcoal);
    margin: .5rem 0 0;
}
.home .hs-bigreads__read { margin-top: 1rem; }
@media (max-width: 900px) {
    .home .hs-bigreads__cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .home .hs-bigreads__card { flex-direction: column; min-height: 0; }
    .home .hs-bigreads__cover { flex: none; max-width: none; width: 100%; height: 190px; }
    .home .hs-bigreads__body { padding: 1.25rem; }
}

/* ============================================================
   Home §2.8 — The San Miguel Literary Prize
   ============================================================ */
.home .hs-prize {
  padding-block: clamp(3rem, 7vw, 6rem);
}
.home .hs-prize__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.home .hs-prize__heading {
  max-width: 24rem;
  margin: 0.75rem 0 0;
}
.home .hs-prize__body {
  font-family: var(--font-body);
  font-size: var(--fs-p3);
  line-height: 1.5;
  color: var(--charcoal);
  max-width: 29rem;
  margin: 1.5rem 0 0;
  margin-inline-start: 2.75rem;
}
.home .hs-prize__cats {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  max-width: 31.25rem;
}
.home .hs-prize__cat {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  padding-block: 1.35rem;
}
.home .hs-prize__cat + .hs-prize__cat {
  border-top: 1px solid color-mix(in srgb, var(--plum) 15%, transparent);
}
.home .hs-prize__cat-info {
  display: flex;
  flex-direction: column;
}
.home .hs-prize__cat-name {
  font-family: var(--font-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: var(--fs-h6);
  line-height: 1.1;
  color: var(--plum);
}
.home .hs-prize__cat-sub {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: var(--fs-p3);
  line-height: 1.3;
  color: var(--charcoal);
  margin-top: 0.35rem;
  margin-inline-start: 1rem;
}
.home .hs-prize__cat-amt {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--clay);
  white-space: nowrap;
}
.home .hs-prize__links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  margin-top: 2.75rem;
}
.home .hs-prize__card {
  border: 1px solid var(--plum);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  position: relative;
  z-index: 2;
}
.home .hs-prize__dates {
  list-style: none;
  margin: 0;
  padding: 0;
}
.home .hs-prize__date {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 1.5rem;
  padding-block: 1.35rem;
}
.home .hs-prize__date + .hs-prize__date {
  border-top: 1px solid color-mix(in srgb, var(--plum) 15%, transparent);
}
.home .hs-prize__date-icon {
  width: 56px;
  height: 48px;
  object-fit: contain;
}
.home .hs-prize__date-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.home .hs-prize__date-label {
  font-family: var(--font-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: var(--fs-h7);
  color: var(--teal);
}
.home .hs-prize__date-value {
  font-family: var(--font-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: var(--fs-h6);
  line-height: 1.15;
  color: var(--plum);
}
.home .hs-prize__date-note {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: var(--fs-p3);
  line-height: 1.3;
  color: var(--charcoal);
  margin-top: 0.35rem;
}
.home .hs-prize__judges {
  position: relative;
  z-index: 1;
  margin-top: -1.25rem;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  padding-top: calc(1.25rem + clamp(1.75rem, 3vw, 2.25rem));
  border-radius: var(--radius-lg);
}
.home .hs-prize__judges-title {
  font-family: var(--font-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: var(--fs-h6);
  color: var(--color-on-dark);
  margin: 0 0 0.85rem;
}
.home .hs-prize__judges-body {
  font-family: var(--font-body);
  font-size: var(--fs-p3);
  line-height: 1.75;
  color: var(--color-on-dark);
  margin: 0;
}
.home .hs-prize__judges-note {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: var(--fs-p3);
  line-height: 1.4;
  color: var(--color-on-dark);
  opacity: 0.85;
  margin: 1rem 0 0;
}
@media (max-width: 900px) {
  .home .hs-prize__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .home .hs-prize__body {
    margin-inline-start: 0;
  }
  .home .hs-prize__heading {
    max-width: none;
  }
}

/* ============================================================
   Home §2.9 — Voices from our Community (testimonials)
   ============================================================ */
.home .hs-voices {
    padding-block: clamp(3.5rem, 7vw, 5.5rem);
    overflow: hidden;
}
.home .hs-voices__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    max-width: 860px;
}
.home .hs-voices__title {
    font-size: var(--fs-h3);
}
.home .hs-voices__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    width: min(237px, 55%);
    margin: -.25rem auto .25rem;
    color: var(--ochre);
}
.home .hs-voices__divider::before,
.home .hs-voices__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: .7;
}
.home .hs-voices__star {
    width: 13px;
    height: 13px;
    flex: none;
    background: currentColor;
    clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
}
.home .hs-voices__figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.home .hs-voices__quote {
    margin: 0;
    max-width: 665px;
    font-family: var(--font-body);
    font-style: italic;
    font-size: var(--fs-p1);
    line-height: 1.6;
    color: var(--charcoal);
    text-wrap: balance;
}
.home .hs-voices__quote::before { content: "\201C"; }
.home .hs-voices__quote::after  { content: "\201D"; }
.home .hs-voices__cite {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
}
.home .hs-voices__name {
    font-family: var(--font-label);
    font-weight: 600;
    font-size: var(--fs-h6);
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--plum);
}
.home .hs-voices__role {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--fs-p3);
    color: var(--charcoal);
}
.home .hs-voices__dots {
    display: flex;
    justify-content: center;
    gap: .625rem;
    margin-top: .5rem;
}
.home .hs-voices__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid var(--clay);
    opacity: .45;
}
.home .hs-voices__dot.is-active {
    background: var(--clay);
    border-color: var(--clay);
    opacity: 1;
}
.home .hs-voices .collage img { height: auto; }
.home .hs-voices__art--typewriter {
    left: 0;
    bottom: 0;
    width: clamp(200px, 24vw, 340px);
}
.home .hs-voices__art--rose {
    left: clamp(-.5rem, 1vw, 1.25rem);
    bottom: -1.5rem;
    width: clamp(90px, 11vw, 150px);
}
.home .hs-voices__art--heart {
    right: clamp(1rem, 5vw, 5.5rem);
    top: 20%;
    width: clamp(110px, 13vw, 175px);
}
.home .hs-voices__art--pressed {
    right: clamp(2.5rem, 7vw, 8rem);
    bottom: 6%;
    width: clamp(90px, 10vw, 140px);
}
@media (max-width: 900px) {
    .home .hs-voices__inner { gap: 1.25rem; }
}

/* ============================================================
   Home §2.10 — CTA "Join the Global Institute Community"
   ============================================================ */
.home .hs-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: -1.5rem;
    padding-block: clamp(6rem, 9vw, 8rem) clamp(7.5rem, 15vw, 10.5rem);
    min-height: clamp(400px, 34vw, 506px);
    background: var(--clay);
    color: var(--color-on-dark);
}
.home .hs-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("../img/collage/mountains-color.webp") center bottom / cover no-repeat;
    mix-blend-mode: multiply;
    opacity: .9;
}
.home .hs-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--charcoal) 22%, transparent) 0%,
        color-mix(in srgb, var(--charcoal) 8%, transparent) 34%,
        color-mix(in srgb, var(--charcoal) 30%, transparent) 70%,
        color-mix(in srgb, var(--charcoal) 72%, transparent) 100%
    );
}
.home .hs-cta__tear {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 48px;
    z-index: 4;
    pointer-events: none;
    background: var(--stone);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-image: url("../img/collage/torn-paper-edge-b.svg");
    mask-image: url("../img/collage/torn-paper-edge-b.svg");
}
.home .hs-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.75rem, 3.5vw, 2.5rem);
    max-width: 60rem;
}
.home .hs-cta__title {
    letter-spacing: .01em;
    max-width: 18em;
}
.home .hs-cta__fleuron {
    display: block;
    line-height: 0;
    opacity: .9;
}
.home .hs-cta__fleuron svg {
    width: clamp(160px, 22vw, 220px);
    height: auto;
}
.home .hs-cta__body {
    margin: 0;
    max-width: 40rem;
    font-family: var(--font-body);
    font-size: var(--fs-p1);
    line-height: 1.6;
    color: var(--color-on-dark);
    text-wrap: balance;
}
.home .hs-cta__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(.9rem, 2.5vw, 1.25rem) clamp(1.5rem, 3.5vw, 2.75rem);
}
.home .hs-cta__link {
    font-family: var(--font-label);
    font-weight: 600;
    font-size: var(--fs-p3);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--color-on-dark);
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
    transition: var(--transition-fast);
}
.home .hs-cta__link:hover,
.home .hs-cta__link:focus-visible {
    color: var(--sky);
    text-underline-offset: 4px;
}
@media (max-width: 900px) {
    .home .hs-cta {
        margin-top: -1rem;
        padding-block: clamp(4rem, 12vw, 6rem) clamp(5rem, 16vw, 8rem);
        min-height: 0;
    }
    .home .hs-cta__links {
        flex-direction: column;
        align-items: center;
        gap: 1.1rem;
    }
}


/* ============================================================
   Page builds from signed-off Figma prototype (Jul 2026)
   ============================================================ */


/* ==== ABOUT (/about) ==== */
/* About-page redesign (Figma dev-file, Jul 2026). Everything is namespaced under
   the About body class .page-template-template-about so nothing leaks into other
   templates. The shell (.hs / .hs__inner), collage helpers and coloured-band
   helpers are (re)declared here so the block is fully self-contained; the shared
   team accordion and CTA band partials are restyled page-scoped at the end.
   Tokens only. Torn-paper band edges are top-edge ::before overhangs so they
   always paint above the previous (earlier) section. */

.page-template-template-about {
    position: relative;
    overflow-x: clip;
    max-width: 100%;
}

/* Very subtle page-wide paper grain (reuses the shared home collage texture) */
.page-template-template-about::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url("../img/collage/texture-paper-grey.webp") center / cover;
    opacity: .05;
    mix-blend-mode: darken;
}

/* ---- Section shell ---- */
.page-template-template-about .hs {
    position: relative;
}
.page-template-template-about .hs__inner {
    position: relative;
    width: 100%;
    max-width: var(--max-wide);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    z-index: 2;
}

/* Display headings never force horizontal overflow on narrow screens */
.page-template-template-about .about-hero__title,
.page-template-template-about .about-vision__title,
.page-template-template-about .about-mission__title,
.page-template-template-about .about-values__title,
.page-template-template-about .about-origin__title,
.page-template-template-about .about-logo__title,
.page-template-template-about .about-origin-card__title {
    overflow-wrap: break-word;
}

/* Anchor targets clear the sticky site header */
.page-template-template-about #origin-story,
.page-template-template-about #logo,
.page-template-template-about #people {
    scroll-margin-top: 96px;
}

/* ---- Collage layer helpers (scoped copy of the home kit) ---- */
.page-template-template-about .collage {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.page-template-template-about .collage__item {
    position: absolute;
}
.page-template-template-about .collage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.page-template-template-about .collage--multiply {
    mix-blend-mode: multiply;
}

/* ============================================================
   Coloured full-bleed bands + torn-paper top edges
   ============================================================ */
.page-template-template-about .about-band {
    position: relative;
}
/* Torn top edge — overhangs UP into the previous section and paints above it
   because this band is a later sibling. Mask technique (shared silhouette with
   conference-theme): the strip is filled with the band's OWN colour token, so
   recolouring a band can never desync its tear. Teeth point up. */
.page-template-template-about .about-band::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: clamp(20px, 3vw, 44px);
    pointer-events: none;
    z-index: 3;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-image: url("../img/collage/torn-paper-edge-a.svg");
    mask-image: url("../img/collage/torn-paper-edge-a.svg");
    transform: scaleY(-1);
}
.page-template-template-about .about-band--plum {
    background: var(--plum);
    color: var(--color-paper);
}
.page-template-template-about .about-band--stone-dark {
    background: var(--stone-dark);
    color: var(--color-ink);
}
.page-template-template-about .about-band--ochre {
    background: var(--ochre);
    color: var(--color-ink);
}
.page-template-template-about .about-band--plum::before {
    background-color: var(--plum);
}
.page-template-template-about .about-band--stone-dark::before {
    background-color: var(--stone-dark);
}
.page-template-template-about .about-band--ochre::before {
    background-color: var(--ochre);
}
/* Bottom tears — only where the next section is a plain (non-band) surface:
   Mission tears down into Values, Logo tears down into the team section.
   Band-adjacent seams (vision→mission, origin→logo) are owned by the lower
   band's top tear and must not get a second edge. */
.page-template-template-about .hs-about_mission::after,
.page-template-template-about .hs-about_logo::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: clamp(20px, 3vw, 44px);
    pointer-events: none;
    z-index: 3;
    background-color: var(--stone-dark);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-image: url("../img/collage/torn-paper-edge-b.svg");
    mask-image: url("../img/collage/torn-paper-edge-b.svg");
}

/* ============================================================
   Hero — two-column illustrated intro
   ============================================================ */
.page-template-template-about .hs-about_hero {
    padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem);
}
.page-template-template-about .about-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: center;
}
.page-template-template-about .about-hero__copy {
    position: relative;
    z-index: 2;
    max-width: 34rem;
}
.page-template-template-about .about-hero__eyebrow {
    margin: 0 0 1rem;
    color: var(--clay);
    font-family: var(--font-label);
    font-weight: 600;
    font-size: var(--fs-h7);
    letter-spacing: var(--tracking-caps-wide);
    text-transform: uppercase;
}
.page-template-template-about .about-hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h1);
    line-height: 1;
    text-transform: uppercase;
    color: var(--plum);
}
.page-template-template-about .about-hero__burst {
    display: block;
    width: clamp(160px, 24vw, 237px);
    aspect-ratio: 237 / 20;
    margin: clamp(.9rem, 2.4vw, 1.5rem) 0;
}
.page-template-template-about .about-hero__lede {
    margin: 0;
    max-width: 30rem;
    font-family: var(--font-body);
    font-size: var(--fs-p1);
    line-height: 1.6;
    color: var(--charcoal);
}

/* Hero collage — the right grid column becomes a positioned canvas */
.page-template-template-about .about-hero__collage {
    position: relative;
    inset: auto;
    z-index: 1;
    align-self: stretch;
    min-height: clamp(280px, 34vw, 460px);
}
.page-template-template-about .about-hero .collage__item img {
    width: 100%;
    height: auto;
}
.page-template-template-about .about-hero__circle {
    top: 2%;
    right: 6%;
    width: clamp(150px, 20vw, 300px);
    aspect-ratio: 1 / 1;
    background: var(--clay);
    border-radius: 50%;
    z-index: 1;
}
.page-template-template-about .about-hero__church {
    right: 12%;
    bottom: 0;
    width: clamp(120px, 17vw, 230px);
    z-index: 5;
}
.page-template-template-about .about-hero__cactus {
    left: 2%;
    bottom: 3%;
    width: clamp(90px, 12vw, 160px);
    z-index: 6;
}
.page-template-template-about .about-hero__notebook {
    right: 2%;
    bottom: 5%;
    width: clamp(110px, 15vw, 200px);
    transform: rotate(-5deg);
    z-index: 7;
}
.page-template-template-about .about-hero__bird {
    top: 4%;
    right: 0;
    width: clamp(56px, 8vw, 100px);
    z-index: 8;
}
.page-template-template-about .about-hero__city {
    left: 6%;
    bottom: 0;
    width: clamp(120px, 16vw, 220px);
    opacity: .85;
    z-index: 2;
}
.page-template-template-about .about-hero__hand {
    top: 20%;
    right: 6%;
    width: clamp(120px, 16vw, 220px);
    opacity: .3;
    transform: rotate(6deg);
    z-index: 1;
}

/* ============================================================
   Our Vision — plum band
   ============================================================ */
.page-template-template-about .hs-about_vision {
    padding-block: clamp(3.25rem, 7vw, 5.5rem);
    text-align: center;
}
.page-template-template-about .about-vision__watermark {
    position: absolute;
    right: -3%;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(190px, 26vw, 340px);
    aspect-ratio: 278 / 263;
    opacity: .08;
    z-index: 1;
    pointer-events: none;
}
.page-template-template-about .about-vision {
    max-width: 48rem;
    margin-inline: auto;
}
.page-template-template-about .about-vision__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h2);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: var(--color-paper);
}
.page-template-template-about .about-vision__burst {
    display: block;
    width: clamp(160px, 22vw, 237px);
    aspect-ratio: 237 / 20;
    margin: clamp(1rem, 2.2vw, 1.5rem) auto;
}
.page-template-template-about .about-vision__body {
    font-family: var(--font-display);
    font-size: var(--fs-p2);
    line-height: 1.6;
    color: var(--color-paper);
}
.page-template-template-about .about-vision__body > * + * {
    margin-top: 1rem;
}

/* ============================================================
   Our Mission — stone-dark two-column band + photo cluster
   ============================================================ */
.page-template-template-about .hs-about_mission {
    padding-block: clamp(3.25rem, 7vw, 5.5rem);
}
.page-template-template-about .about-mission__art {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(170px, 24vw, 320px);
    z-index: 1;
    pointer-events: none;
}
.page-template-template-about .about-mission__art img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6% 46% 46% 8% / 8% 50% 50% 6%;
}
.page-template-template-about .about-mission__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    /* clear the photo cluster bleeding in from the far left */
    padding-left: clamp(150px, 17vw, 280px);
}
.page-template-template-about .about-mission__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h2);
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--plum);
}
.page-template-template-about .about-mission__body {
    font-family: var(--font-display);
    font-size: var(--fs-p2);
    line-height: 1.7;
    color: var(--color-ink);
}
.page-template-template-about .about-mission__body > * + * {
    margin-top: 1rem;
}

/* ============================================================
   Our Values — plain stone bg, 2x2 icon-card grid
   ============================================================ */
.page-template-template-about .hs-about_values {
    padding-block: clamp(3.25rem, 7vw, 5.5rem);
}
.page-template-template-about .about-values-wrap {
    text-align: center;
}
.page-template-template-about .about-values__title {
    margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h2);
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--plum);
}
.page-template-template-about .about-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
    max-width: 60rem;
    margin-inline: auto;
    text-align: left;
}
.page-template-template-about .about-value {
    background: var(--stone-dark);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}
.page-template-template-about .about-value__icon {
    display: block;
    height: 3.25rem;
    width: auto;
    margin-bottom: 1.1rem;
}
.page-template-template-about .about-value__icon--craft {
    aspect-ratio: 66 / 69.79;
}
.page-template-template-about .about-value__icon--community,
.page-template-template-about .about-value__icon--culture {
    aspect-ratio: 1 / 1;
}
.page-template-template-about .about-value__icon--access {
    aspect-ratio: 66 / 80.97;
}
.page-template-template-about .about-value__title {
    margin: 0 0 .6rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h4);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: var(--color-ink);
}
.page-template-template-about .about-value__text {
    margin: 0;
    font-size: var(--fs-p4);
    line-height: 1.6;
    color: var(--color-muted);
}

/* ============================================================
   Our Origin Story — ochre band, horizontal card row
   ============================================================ */
.page-template-template-about .hs-about_origin {
    padding-block: clamp(3.25rem, 7vw, 5.5rem);
}
.page-template-template-about .about-origin {
    max-width: 56rem;
    margin-inline: auto;
    text-align: center;
}
.page-template-template-about .about-origin__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h2);
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--plum);
}
.page-template-template-about .about-origin__divider {
    display: block;
    width: clamp(48px, 7vw, 66px);
    aspect-ratio: 66 / 41.53;
    margin: clamp(.85rem, 2vw, 1.35rem) auto;
}
.page-template-template-about .about-origin__body {
    font-family: var(--font-display);
    font-size: var(--fs-p2);
    line-height: 1.65;
    color: var(--color-ink);
}
.page-template-template-about .about-origin__body > * + * {
    margin-top: 1rem;
}
.page-template-template-about .about-origin__more {
    margin: clamp(1rem, 2.5vw, 1.6rem) 0 0;
}

/* Manicule "Read More" (shared by Origin + Logo) */
.page-template-template-about .about-readmore {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.page-template-template-about .about-readmore__label {
    font-family: var(--font-label);
    font-weight: 600;
    font-size: var(--fs-h7);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--plum);
    text-underline-offset: 4px;
}
.page-template-template-about .about-readmore__icon {
    display: block;
    width: 44px;
    height: 16px;
}
.page-template-template-about .about-readmore:hover .about-readmore__label {
    text-decoration: underline;
}

/* Horizontal milestone card row (full-bleed, scroll-snap) */
.page-template-template-about .about-origin__cards {
    display: flex;
    gap: clamp(1rem, 2vw, 1.5rem);
    max-width: var(--max-wide);
    margin: clamp(2rem, 4vw, 3rem) auto 0;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    position: relative;
    z-index: 2;
}
.page-template-template-about .about-origin__cards::-webkit-scrollbar {
    display: none;
}
.page-template-template-about .about-origin-card {
    flex: 0 0 clamp(220px, 24vw, 270px);
    scroll-snap-align: start;
    background: var(--stone-dark);
    border-radius: var(--radius-lg);
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    text-align: left;
}
.page-template-template-about .about-origin-card__year {
    display: inline-block;
    margin-bottom: .6rem;
    font-family: var(--font-label);
    font-weight: 600;
    font-size: var(--fs-p5);
    letter-spacing: var(--tracking-caps-wide);
    text-transform: uppercase;
    color: var(--clay);
}
.page-template-template-about .about-origin-card__title {
    margin: 0 0 .5rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h3b);
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--plum);
}
.page-template-template-about .about-origin-card__text {
    margin: 0;
    font-size: var(--fs-p4);
    line-height: 1.6;
    color: var(--color-muted);
}
.page-template-template-about .about-origin__dots {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: clamp(1.25rem, 3vw, 2rem);
    position: relative;
    z-index: 2;
}
.page-template-template-about .about-origin__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--plum) 30%, transparent);
}
.page-template-template-about .about-origin__dot.is-active {
    background: var(--plum);
}

/* ============================================================
   About Our Logo — stone-dark band, illustration
   ============================================================ */
.page-template-template-about .hs-about_logo {
    padding-block: clamp(3.25rem, 7vw, 5.5rem);
}
.page-template-template-about .about-logo__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.page-template-template-about .about-logo__title {
    margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h2);
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--plum);
}
.page-template-template-about .about-logo__body {
    font-family: var(--font-display);
    font-size: var(--fs-p2);
    line-height: 1.7;
    color: var(--color-ink);
}
.page-template-template-about .about-logo__body > * + * {
    margin-top: 1rem;
}
.page-template-template-about .about-logo__more {
    margin: clamp(1rem, 2.5vw, 1.6rem) 0 0;
}
.page-template-template-about .about-logo__art {
    display: flex;
    justify-content: center;
}
.page-template-template-about .about-logo__illustration {
    display: block;
    width: 100%;
    max-width: clamp(240px, 34vw, 440px);
    height: auto;
    aspect-ratio: 440 / 423;
}

/* ============================================================
   Meet Our Team — shared accordion partial, restyled page-scoped
   ============================================================ */
.page-template-template-about .about-people {
    padding-block: clamp(3.25rem, 7vw, 5.5rem);
}
.page-template-template-about .about-people .section--team .section__inner {
    max-width: var(--max-wide);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.page-template-template-about .about-people .section--team h2 {
    margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
    text-align: center;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h2);
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--plum);
}
.page-template-template-about .about-people .team-accordion {
    max-width: 60rem;
    margin-inline: auto;
    gap: 1rem;
}

/* Top-level groups — plum pills */
.page-template-template-about .about-people .team-group {
    background: var(--plum);
    border: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.page-template-template-about .about-people .team-group + .team-group {
    margin-top: 0;
}
.page-template-template-about .about-people .team-group__summary {
    gap: 1rem;
    padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.25rem, 3vw, 1.75rem);
}
.page-template-template-about .about-people .team-group__icon {
    display: none;
}
.page-template-template-about .about-people .team-group__title {
    color: var(--color-paper);
    font-family: var(--font-label);
    font-weight: 600;
    font-size: var(--fs-p3);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps-wide);
}
.page-template-template-about .about-people .team-group__desc {
    color: color-mix(in srgb, var(--color-paper) 78%, transparent);
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--fs-p3);
}

/* +/- toggle (light on plum) */
.page-template-template-about .about-people .team-group__chevron {
    position: relative;
    width: 20px;
    height: 20px;
    color: var(--color-paper);
    transform: none;
}
.page-template-template-about .about-people .team-group__chevron svg {
    display: none;
}
.page-template-template-about .about-people .team-group__chevron::before,
.page-template-template-about .about-people .team-group__chevron::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
}
.page-template-template-about .about-people .team-group__chevron::before {
    width: 14px;
    height: 2px;
    transform: translate(-50%, -50%);
}
.page-template-template-about .about-people .team-group__chevron::after {
    width: 2px;
    height: 14px;
    transform: translate(-50%, -50%);
}
.page-template-template-about .about-people details[open] > .team-group__summary .team-group__chevron {
    transform: none;
}
.page-template-template-about .about-people details[open] > .team-group__summary .team-group__chevron::after {
    opacity: 0;
}

/* Nested department sub-groups — lighter stone-dark pills */
.page-template-template-about .about-people .team-subgroups {
    padding: clamp(1rem, 2.5vw, 1.5rem);
    gap: .75rem;
    background: transparent;
    border-top: 1px solid color-mix(in srgb, var(--color-paper) 16%, transparent);
}
.page-template-template-about .about-people .team-subgroup {
    background: var(--stone-dark);
    border: 0;
    border-radius: 14px;
    overflow: hidden;
}
.page-template-template-about .about-people .team-subgroup__summary {
    gap: .75rem;
    padding: clamp(.85rem, 2vw, 1.1rem) clamp(1rem, 2.5vw, 1.35rem);
}
.page-template-template-about .about-people .team-subgroup__title {
    color: var(--plum);
    font-family: var(--font-label);
    font-weight: 600;
    font-size: var(--fs-p4);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}
.page-template-template-about .about-people .team-subgroup__chevron {
    position: relative;
    width: 18px;
    height: 18px;
    color: var(--plum);
    transform: none;
}
.page-template-template-about .about-people .team-subgroup__chevron svg {
    display: none;
}
.page-template-template-about .about-people .team-subgroup__chevron::before,
.page-template-template-about .about-people .team-subgroup__chevron::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
}
.page-template-template-about .about-people .team-subgroup__chevron::before {
    width: 12px;
    height: 2px;
    transform: translate(-50%, -50%);
}
.page-template-template-about .about-people .team-subgroup__chevron::after {
    width: 2px;
    height: 12px;
    transform: translate(-50%, -50%);
}
.page-template-template-about .about-people details[open] > .team-subgroup__summary .team-subgroup__chevron {
    transform: none;
}
.page-template-template-about .about-people details[open] > .team-subgroup__summary .team-subgroup__chevron::after {
    opacity: 0;
}

/* Member cards — text-only role/name/description (photos dropped in the redesign) */
.page-template-template-about .about-people .team-group .team-grid,
.page-template-template-about .about-people .team-subgroup .team-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: clamp(.75rem, 2vw, 1.25rem);
    padding: clamp(1rem, 2.5vw, 1.5rem);
    border-top: 1px solid color-mix(in srgb, var(--plum) 12%, transparent);
    background: color-mix(in srgb, var(--stone) 65%, transparent);
}
.page-template-template-about .about-people .person-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    background: var(--color-panel);
    border-radius: 12px;
    padding: clamp(1rem, 2vw, 1.35rem);
}
.page-template-template-about .about-people .person-card__photo,
.page-template-template-about .about-people .person-card img {
    display: none;
}
.page-template-template-about .about-people .person-card__role {
    order: -1;
    margin: 0 0 .35rem;
    font-family: var(--font-label);
    font-weight: 600;
    font-size: var(--fs-p5);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--clay);
}
.page-template-template-about .about-people .person-card__name {
    margin: 0 0 .35rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h4);
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--plum);
}
.page-template-template-about .about-people .person-card__bio {
    margin: 0;
    font-size: var(--fs-p4);
    line-height: 1.55;
    color: var(--color-muted);
}
.page-template-template-about .about-people .team-group__empty {
    color: var(--color-muted);
}

/* ============================================================
   Closing CTA band — shared partial, restyled page-scoped
   (illustrated clay background + flat underlined text links)
   ============================================================ */
.page-template-template-about .section--cta {
    position: relative;
    background: var(--clay) url("../img/about/cta-band-join-bg-illustration.webp") center / cover no-repeat;
    color: var(--color-paper);
}
.page-template-template-about .section--cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--plum) 26%, transparent);
    z-index: 0;
    pointer-events: none;
}
.page-template-template-about .section--cta .section__inner {
    position: relative;
    z-index: 1;
}
.page-template-template-about .section--cta h2 {
    color: var(--color-paper);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h2);
    line-height: 1.1;
    text-transform: uppercase;
}
.page-template-template-about .section--cta p {
    color: var(--color-paper);
    font-family: var(--font-display);
    font-size: var(--fs-p2);
    line-height: 1.6;
}
/* Ornamental burst divider under the heading block */
.page-template-template-about .section--cta .cta-band > div:first-child::after {
    content: "";
    display: block;
    width: clamp(160px, 22vw, 237px);
    height: 16px;
    margin: clamp(1rem, 2.5vw, 1.5rem) auto 0;
    background: url("../img/about/divider-burst-ornament-vision.svg") center / contain no-repeat;
}
.page-template-template-about .section--cta .cta-band__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(1rem, 3vw, 2.25rem);
}
.page-template-template-about .section--cta .cta-band__links .button {
    background: none;
    border: 0;
    padding: 0;
    border-radius: 0;
    color: var(--color-paper);
    font-family: var(--font-label);
    font-weight: 600;
    font-size: var(--fs-h7);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.page-template-template-about .section--cta .cta-band__links .button:hover {
    color: var(--color-paper);
    opacity: .78;
}

/* ============================================================
   Responsive — stack every two-column band under 900px
   ============================================================ */
@media (max-width: 900px) {
    .page-template-template-about .about-hero {
        grid-template-columns: minmax(0, 1fr);
    }
    .page-template-template-about .about-hero__copy {
        max-width: none;
    }
    .page-template-template-about .about-hero__collage {
        min-height: clamp(230px, 62vw, 340px);
    }
    /* drop the faint / bleed pieces on small screens, keep the key art */
    .page-template-template-about .about-hero__hand,
    .page-template-template-about .about-hero__city,
    .page-template-template-about .about-hero__cactus {
        display: none;
    }
    .page-template-template-about .about-hero__circle {
        top: 4%;
        right: auto;
        left: 50%;
        transform: translateX(-40%);
        width: clamp(170px, 52vw, 250px);
    }
    .page-template-template-about .about-hero__church {
        right: auto;
        left: 50%;
        transform: translateX(-52%);
        width: clamp(140px, 42vw, 210px);
    }
    .page-template-template-about .about-hero__notebook {
        right: 4%;
    }
    .page-template-template-about .about-hero__bird {
        top: 0;
        right: 6%;
        width: clamp(60px, 17vw, 88px);
    }

    .page-template-template-about .about-mission__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
        padding-left: 0;
    }
    .page-template-template-about .about-mission__art {
        display: none;
    }

    .page-template-template-about .about-values {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-template-template-about .about-logo__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }
    .page-template-template-about .about-logo__art {
        order: -1;
    }
    .page-template-template-about .about-logo__illustration {
        max-width: clamp(220px, 70vw, 340px);
    }
}

/* ==== PRESS (/about/press) ==== */

/* The `.hs` / `.hs__inner` shell is only styled under `.home` globally, so the
   Press template supplies its own centered inner container + vertical rhythm.
   Everything here is namespaced under the page body class so nothing leaks. */
.page-template-template-press .hs { position: relative; }
.page-template-template-press .hs__inner {
    width: min(100% - (var(--space-page) * 2), var(--max-wide));
    margin-inline: auto;
}
.page-template-template-press .hs-press_hero {
    padding: clamp(3rem, 7vw, 6rem) 0 clamp(1.75rem, 3vw, 2.5rem);
}
.page-template-template-press .hs-press_body {
    padding: 0 0 clamp(3rem, 7vw, 6rem);
}

/* ---- §1 Hero — back-link + centered eyebrow/title/lede ---- */
.page-template-template-press .press-hero__back {
    margin: 0 0 clamp(1.5rem, 3vw, 2rem);
}
.page-template-template-press .press-back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: var(--radius);
    font-size: var(--fs-p4);
    font-weight: 600;
    color: var(--color-ink);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.page-template-template-press .press-back:hover {
    background: var(--color-panel);
    color: var(--color-accent-dark);
}
.page-template-template-press .press-back svg { width: 1rem; height: 1rem; flex: none; }

.page-template-template-press .press-hero__head {
    max-width: 52rem;
    margin-inline: auto;
    text-align: center;
}
.page-template-template-press .press-hero__eyebrow {
    margin: 0 0 1rem;
    color: var(--color-accent);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--fs-h7);
    letter-spacing: var(--tracking-caps);
}
.page-template-template-press .press-hero__title {
    margin: 0 0 1.25rem;
    font-size: clamp(2.5rem, 6vw, 3.75rem);
    color: var(--color-ink);
}
.page-template-template-press .press-hero__lede {
    margin: 0 auto;
    max-width: 42rem;
    font-size: var(--fs-p2);
    color: var(--color-muted);
}

/* ---- §2 Two-column body (2/3 main + 1/3 sidebar) ---- */
.page-template-template-press .press-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: clamp(2rem, 4vw, 3rem);
    max-width: 72rem;
    margin-inline: auto;
    align-items: start;
}
.page-template-template-press .press-main {
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 5vw, 4rem);
}
.page-template-template-press .press-side {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.page-template-template-press .press-h2 {
    margin: 0 0 clamp(1.5rem, 3vw, 2rem);
    font-size: var(--fs-h2);
    color: var(--color-ink);
}

/* Uniform card padding across every card on the page (base .card = 1.2rem) */
.page-template-template-press .card {
    padding: clamp(1.25rem, 2.4vw, 1.5rem);
}
/* White-surface cards (release / coverage / media kit) sit distinctly on the
   cream page background; base .card fill is cream, so override to white here. */
.page-template-template-press .press-card {
    background: var(--color-white);
    transition: box-shadow var(--transition-fast);
}

/* §3 Recent Press Releases */
.page-template-template-press .press-releases {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.page-template-template-press .press-release:hover { box-shadow: var(--shadow-md); }
.page-template-template-press .press-release__date {
    margin: 0 0 .5rem;
    font-size: var(--fs-p4);
    color: var(--color-muted);
}
.page-template-template-press .press-release__title {
    margin: 0 0 .75rem;
    font-size: var(--fs-h4);
    color: var(--color-ink);
}
.page-template-template-press .press-release__excerpt {
    margin: 0 0 1rem;
    font-size: var(--fs-p3);
    color: var(--color-muted);
}
.page-template-template-press .press-release__more {
    display: inline-block;
    font-size: var(--fs-p4);
    font-weight: 600;
    color: var(--color-accent);
}

/* §4 Recent Coverage */
.page-template-template-press .press-coverage {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.page-template-template-press .press-coverage-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.page-template-template-press .press-coverage-item:hover { box-shadow: var(--shadow-sm); }
.page-template-template-press .press-coverage-item__outlet {
    margin: 0 0 .25rem;
    font-size: var(--fs-p4);
    font-weight: 600;
    color: var(--color-accent);
}
.page-template-template-press .press-coverage-item__title {
    margin: 0 0 .5rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-p2);
    line-height: 1.25;
    color: var(--color-ink);
}
.page-template-template-press .press-coverage-item__date {
    margin: 0;
    font-size: var(--fs-p4);
    color: var(--color-muted);
}
/* Small ghost "View" control — base .button is too tall, tighten it */
.page-template-template-press .press-view {
    flex: none;
    align-self: flex-start;
    min-height: 0;
    padding: .4rem .9rem;
    font-size: var(--fs-p4);
}

/* Shared sidebar card heading */
.page-template-template-press .press-side__title {
    margin: 0 0 1rem;
    font-size: var(--fs-h4);
    color: var(--color-ink);
}

/* §5 Press Inquiries — clay-tinted card */
.page-template-template-press .press-inquiries {
    background: color-mix(in srgb, var(--clay) 14%, var(--color-white));
    border-color: color-mix(in srgb, var(--clay) 28%, var(--color-white));
}
.page-template-template-press .press-inquiries__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}
.page-template-template-press .press-inquiries__head .press-side__title { margin: 0; }
.page-template-template-press .press-inquiries__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--clay) 16%, var(--color-white));
    color: var(--color-accent);
}
.page-template-template-press .press-inquiries__icon svg { width: 1.25rem; height: 1.25rem; }
.page-template-template-press .press-inquiries__body {
    margin: 0 0 1rem;
    font-size: var(--fs-p4);
    color: var(--color-muted);
}
.page-template-template-press .press-inquiries__contact > * { margin: 0 0 .35rem; }
.page-template-template-press .press-inquiries__contact > *:last-child { margin-bottom: 0; }
.page-template-template-press .press-inquiries__name {
    font-size: var(--fs-p4);
    font-weight: 600;
    color: var(--color-ink);
}
.page-template-template-press .press-inquiries__role,
.page-template-template-press .press-inquiries__phone {
    font-size: var(--fs-p4);
    color: var(--color-muted);
}
.page-template-template-press .press-inquiries__email {
    display: inline-block;
    font-size: var(--fs-p4);
    color: var(--color-accent);
}

/* §6 Media Kit */
.page-template-template-press .press-mediakit__intro {
    margin: 0 0 1.25rem;
    font-size: var(--fs-p4);
    color: var(--color-muted);
}
.page-template-template-press .press-mediakit__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.page-template-template-press .press-mediakit__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem;
    border-radius: var(--radius);
    transition: background var(--transition-fast);
}
.page-template-template-press .press-mediakit__row:hover {
    background: color-mix(in srgb, var(--color-panel-alt) 45%, transparent);
}
.page-template-template-press .press-mediakit__name {
    margin: 0;
    font-size: var(--fs-p4);
    font-weight: 600;
    color: var(--color-ink);
}
.page-template-template-press .press-mediakit__meta {
    margin: .15rem 0 0;
    font-size: var(--fs-p5);
    color: var(--color-muted);
}
.page-template-template-press .press-mediakit__row svg {
    width: 1rem;
    height: 1rem;
    flex: none;
    color: var(--color-muted);
}
.page-template-template-press .press-mediakit__all {
    width: 100%;
    margin-top: 1.5rem;
}
.page-template-template-press .press-mediakit__all[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

/* §7 Quick Facts — subtle stone-tinted card */
.page-template-template-press .press-facts {
    background: color-mix(in srgb, var(--color-panel-alt) 42%, var(--color-white));
}
.page-template-template-press .press-facts__list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.page-template-template-press .press-facts__label {
    margin: 0 0 .15rem;
    font-size: var(--fs-p4);
    color: var(--color-muted);
}
.page-template-template-press .press-facts__value {
    margin: 0;
    font-size: var(--fs-p4);
    font-weight: 600;
    color: var(--color-ink);
}

/* ---- Responsive: collapse to a single stacked column ---- */
@media (max-width: 60rem) {
    .page-template-template-press .press-grid { grid-template-columns: 1fr; }
}


/* ==== CONTACT (/contact) ==== */
/* Secondary-page intro + form/sidebar grid. All rules scoped under the Contact
   body class; the .hs* section system is .home-scoped in site.css, so these are
   this page's own (first) non-home definitions, not overrides of shared rules.
   Tokens only. */

/* --- section shells (light cream band, no seam between hero and grid) --- */
.page-template-template-contact .hs {
    position: relative;
}
.page-template-template-contact .hs__inner {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--space-page);
}
.page-template-template-contact .hs-contact_hero {
    background: var(--color-panel);
    padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.page-template-template-contact .hs-contact_grid {
    background: var(--color-panel);
    padding: 0 0 clamp(3.5rem, 8vw, 6rem);
}

/* --- §1 hero intro --- */
.page-template-template-contact .contact-hero__inner {
    max-width: 48rem;
    margin-inline: auto;
    text-align: center;
}
.page-template-template-contact .contact-hero__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto clamp(1rem, 2.5vw, 1.5rem);
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    color: var(--color-accent);
}
.page-template-template-contact .contact-hero__icon svg {
    width: 2rem;
    height: 2rem;
}
.page-template-template-contact .contact-hero__eyebrow {
    margin: 0 0 clamp(0.75rem, 1.5vw, 1rem);
    font-family: var(--font-label);
    font-size: var(--fs-h7);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--color-accent);
}
.page-template-template-contact .contact-hero__title {
    margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2rem, 5vw, 3.75rem); /* secondary-page intro H1: 60px ceiling, not uppercase */
    line-height: 1.08;
    text-transform: none;
    color: var(--color-ink);
    overflow-wrap: break-word;
}
.page-template-template-contact .contact-hero__lede {
    max-width: 42rem;
    margin: 0 auto;
    font-family: var(--font-body);
    font-size: var(--fs-p2);
    line-height: 1.6;
    color: var(--color-muted);
}
/* lede may arrive as wpautop()'d markup from Page Copy — flatten inner paras. */
.page-template-template-contact .contact-hero__lede p {
    margin: 0;
}
.page-template-template-contact .contact-hero__lede p + p {
    margin-top: 1rem;
}

/* --- §2 grid --- */
.page-template-template-contact .contact-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    max-width: 72rem;
    margin-inline: auto;
    align-items: start;
}
.page-template-template-contact .contact-grid__side {
    display: grid;
    gap: 1.5rem;
    align-content: start;
}

/* --- cards --- */
.page-template-template-contact .contact-card {
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 3vw, 2rem);
}
.page-template-template-contact .contact-grid__side .contact-card {
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.page-template-template-contact .contact-card__head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.page-template-template-contact .contact-card__icon {
    flex: none;
    margin-top: 0.125rem;
    color: var(--color-accent);
    line-height: 0;
}
.page-template-template-contact .contact-card__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}
.page-template-template-contact .contact-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h5);
    line-height: 1.2;
    text-transform: none;
    color: var(--color-ink);
}
.page-template-template-contact .contact-card__title--plain {
    margin-bottom: 1rem;
}
.page-template-template-contact .contact-card__address {
    margin: 0;
    font-style: normal;
    font-family: var(--font-body);
    font-size: var(--fs-p4);
    line-height: 1.7;
    color: var(--color-muted);
}
.page-template-template-contact .contact-card__email {
    display: inline-block;
    font-size: var(--fs-p4);
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
}
.page-template-template-contact .contact-card__email:hover {
    color: var(--color-accent-dark);
}
.page-template-template-contact .contact-card__cap {
    margin: 0.5rem 0 0;
    font-size: var(--fs-p5);
    color: var(--color-muted);
}
.page-template-template-contact .contact-card__note {
    margin: 1rem 0 0;
    font-size: var(--fs-p5);
    font-style: italic;
    color: var(--color-muted);
}

/* office hours rows */
.page-template-template-contact .contact-hours {
    display: grid;
    gap: 0.25rem;
    font-size: var(--fs-p4);
    color: var(--color-ink);
}
.page-template-template-contact .contact-hours__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
.page-template-template-contact .contact-hours__val {
    color: var(--color-muted);
}

/* follow-us rows */
.page-template-template-contact .contact-social {
    display: grid;
    gap: 0.75rem;
}
.page-template-template-contact .contact-social__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--fs-p4);
    color: var(--color-muted);
    text-decoration: none;
}
.page-template-template-contact .contact-social__link:hover {
    color: var(--color-accent);
}
.page-template-template-contact .contact-social__icon {
    flex: none;
    line-height: 0;
}
.page-template-template-contact .contact-social__icon svg {
    width: 1rem;
    height: 1rem;
}

/* --- §2.1 form --- */
.page-template-template-contact .contact-form__title {
    margin: 0 0 clamp(1.25rem, 2.5vw, 1.5rem);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.2;
    text-transform: none;
    color: var(--color-ink);
}
.page-template-template-contact .contact-form {
    display: grid;
    gap: 1.5rem;
}
.page-template-template-contact .contact-form__row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.page-template-template-contact .contact-field__label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--font-body);
    font-size: var(--fs-p4);
    font-weight: 600;
    color: var(--color-ink);
}
.page-template-template-contact .contact-field__req {
    color: var(--color-accent);
}
.page-template-template-contact .contact-field__control {
    width: 100%;
    padding: 0.625rem 1rem;
    font-family: var(--font-body);
    font-size: var(--fs-p4);
    color: var(--color-ink);
    background: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.page-template-template-contact .contact-field__control::placeholder {
    color: var(--color-muted);
}
.page-template-template-contact .contact-field__control:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}
.page-template-template-contact textarea.contact-field__control {
    min-height: 9.5rem;
    resize: none;
}
.page-template-template-contact .contact-form__submit {
    width: 100%;
    gap: 0.5rem;
    padding-inline: 2rem;
}
.page-template-template-contact .contact-form__submit svg {
    flex: none;
}
.page-template-template-contact .contact-form__note {
    margin: 0.75rem 0 0;
    font-size: var(--fs-p5);
    color: var(--color-muted);
}

/* --- responsive: stack to one column below the lg breakpoint --- */
@media (max-width: 1023px) {
    .page-template-template-contact .contact-grid {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 640px) {
    .page-template-template-contact .contact-form__submit {
        width: auto;
    }
}
@media (max-width: 640px) {
    .page-template-template-contact .contact-form__row2 {
        grid-template-columns: 1fr;
    }
}


/* ==== WATCH & LISTEN (/watch-listen) ==== */
/* All rules namespaced under the page's body class. Tokens only — the `.hs`
 * design-system shell is home-scoped in site.css, so this page owns its own
 * container, vertical rhythm and typography. YouTube brand red (#dc2626) and the
 * play-glyph white (#fff) are real external-brand refs (per design map), not
 * site-palette colours — hardcoded, not tokenized. */

.page-template-template-watch-listen .hs {
    position: relative;
    background: var(--color-panel);
    color: var(--color-ink);
}

.page-template-template-watch-listen .hs__inner {
    width: min(100% - (var(--space-page) * 2), var(--max-wide));
    margin-inline: auto;
}

/* ---- Section vertical rhythm ---- */
.page-template-template-watch-listen .hs-watchlisten_hero {
    padding: clamp(4rem, 8vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.page-template-template-watch-listen .hs-watchlisten_youtube {
    padding: 0 0 clamp(3.5rem, 7vw, 6rem);
}
.page-template-template-watch-listen .hs-watchlisten_podcast {
    padding: 0 0 clamp(4rem, 8vw, 6rem);
}

/* ---- §1 Hero — centered type-only intro ---- */
.page-template-template-watch-listen .wl-hero {
    max-width: 48rem;
    margin-inline: auto;
    text-align: center;
}
.page-template-template-watch-listen .wl-hero__eyebrow {
    margin: 0 0 1rem;
    letter-spacing: .12em;
}
.page-template-template-watch-listen .wl-hero__title {
    margin: 0 0 1.25rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.5rem, 6vw, 3.75rem);
    line-height: 1.1;
    color: var(--color-ink);
}
.page-template-template-watch-listen .wl-hero__lede,
.page-template-template-watch-listen .wl-hero__lede p {
    margin: 0;
    font-size: var(--fs-p2);
    line-height: 1.6;
    color: var(--color-muted);
}

/* ---- Shared section header (icon + H2 + right-aligned actions) ---- */
.page-template-template-watch-listen .wl-sechead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
    flex-wrap: wrap;
}
.page-template-template-watch-listen .wl-sechead__left {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.page-template-template-watch-listen .wl-sechead__icon {
    display: inline-flex;
    flex: none;
}
.page-template-template-watch-listen .wl-sechead__icon svg {
    width: 2rem;
    height: 2rem;
}
.page-template-template-watch-listen .wl-sechead__icon--youtube { color: #dc2626; }
.page-template-template-watch-listen .wl-sechead__icon--podcast { color: var(--clay); }
.page-template-template-watch-listen .wl-sechead__h2 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h2);
    line-height: 1.1;
    color: var(--color-ink);
}
.page-template-template-watch-listen .wl-sechead__actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

/* ---- Buttons (page-local; base .button is home/section-scoped elsewhere) ---- */
.page-template-template-watch-listen .wl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 2.25rem;
    padding-inline: .95rem;
    border: 0;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--fs-p4);
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.page-template-template-watch-listen .wl-btn--outline {
    background: transparent;
    border: 1px solid var(--color-line);
    color: var(--color-ink);
}
.page-template-template-watch-listen .wl-btn--outline:hover {
    background: var(--color-panel-alt);
    color: var(--color-ink);
}
.page-template-template-watch-listen .wl-btn--primary {
    background: var(--clay);
    color: var(--color-white);
}
.page-template-template-watch-listen .wl-btn--primary:hover {
    background: var(--clay-hover);
    color: var(--color-white);
}
/* Compact size — declared last so its min-height wins over .wl-btn */
.page-template-template-watch-listen .wl-btn--sm {
    min-height: 2rem;
    padding-inline: .75rem;
}

/* ---- §2 YouTube grid ---- */
.page-template-template-watch-listen .wl-video-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
}
.page-template-template-watch-listen .wl-video-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--transition-fast);
}
.page-template-template-watch-listen .wl-video-card:hover {
    box-shadow: var(--shadow-md);
}
.page-template-template-watch-listen .wl-video-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-panel-alt);
}
.page-template-template-watch-listen .wl-video-card__media--placeholder {
    background: linear-gradient(135deg, var(--color-panel-alt), var(--color-line));
}
.page-template-template-watch-listen .wl-video-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.page-template-template-watch-listen .wl-video-card:hover .wl-video-card__img {
    transform: scale(1.05);
}
.page-template-template-watch-listen .wl-video-card__overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .30);
    transition: background var(--transition-fast);
}
.page-template-template-watch-listen .wl-video-card:hover .wl-video-card__overlay {
    background: rgba(0, 0, 0, .40);
}
.page-template-template-watch-listen .wl-video-card__play {
    position: relative;
    display: block;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: #dc2626;
}
.page-template-template-watch-listen .wl-video-card__play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-42%, -50%);
    width: 0;
    height: 0;
    border-top: .5rem solid transparent;
    border-bottom: .5rem solid transparent;
    border-left: .8rem solid #fff;
}
.page-template-template-watch-listen .wl-video-card__body {
    padding: clamp(1rem, 1.6vw, 1.15rem);
}
.page-template-template-watch-listen .wl-video-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h5);
    line-height: 1.3;
    color: var(--color-ink);
}

/* ---- §3 Podcast list (narrow, left-aligned within the wide container) ---- */
.page-template-template-watch-listen .wl-podcast-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 56rem;
}
.page-template-template-watch-listen .wl-podcast-card {
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: clamp(1.25rem, 2.5vw, 1.5rem);
    transition: box-shadow var(--transition-fast);
}
.page-template-template-watch-listen .wl-podcast-card:hover {
    box-shadow: var(--shadow-md);
}
.page-template-template-watch-listen .wl-podcast-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
}
.page-template-template-watch-listen .wl-podcast-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.35rem, 2.2vw, 1.5rem);
    line-height: 1.25;
    color: var(--color-ink);
}
.page-template-template-watch-listen .wl-podcast-card__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .25rem;
    flex: none;
    font-size: var(--fs-p4);
    line-height: 1.3;
    color: var(--color-muted);
    white-space: nowrap;
    text-align: right;
}
.page-template-template-watch-listen .wl-podcast-card__desc {
    margin: 0 0 1rem;
    font-size: var(--fs-p3);
    line-height: 1.6;
    color: var(--color-muted);
}
.page-template-template-watch-listen .wl-podcast__all {
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    text-align: center;
}
.page-template-template-watch-listen .wl-textlink {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--fs-p4);
    font-weight: 500;
    color: var(--color-accent);
    text-decoration: none;
}
.page-template-template-watch-listen .wl-textlink:hover {
    text-decoration: underline;
    text-underline-offset: .25em;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .page-template-template-watch-listen .wl-video-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .page-template-template-watch-listen .wl-video-grid {
        grid-template-columns: 1fr;
    }
    .page-template-template-watch-listen .wl-podcast-card__head {
        flex-direction: column;
        align-items: flex-start;
        gap: .35rem;
    }
    .page-template-template-watch-listen .wl-podcast-card__meta {
        flex-direction: row;
        align-items: flex-start;
        gap: .75rem;
        text-align: left;
    }
}


/* ==== SUPPORT / GET INVOLVED (/support) ==== */
/* Page-scoped polish for template-support.php. Composes the global .section /
   .card / .stat-cards / .accordion / .testimonial components (styled in
   site.css) — this block only adds what the Figma /support layout needs on top:
   centered section headings, the faint "Choose Your Path" band + its 3-up grid,
   equal-height path cards, and zero-height nav-anchor targets. Tokens only. */

/* Figma centers every section-level heading and the "Why Give" copy block.
   Scoped to direct children of the inner so card titles (inside .card) stay
   left-aligned as in the design. */
.page-template-template-support .section__inner > h2,
.page-template-template-support .section__inner > h3 {
    text-align: center;
}

.page-template-template-support .content-flow {
    text-align: center;
}

/* §3 "Choose Your Path" — faint muted band (Figma bg-muted/30) + fixed 1/2/3-up
   grid so the five cards read as 3 + 2 on desktop instead of a single row. */
.page-template-template-support .support-choose {
    background: color-mix(in srgb, var(--stone-dark) 40%, var(--color-paper));
}

.page-template-template-support .support-path-grid {
    grid-template-columns: 1fr;
}

@media (min-width: 560px) {
    .page-template-template-support .support-path-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .page-template-template-support .support-path-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Equal-height path cards with the "Learn More" link pinned to the bottom. */
.page-template-template-support .support-path-grid .card {
    display: flex;
    flex-direction: column;
}

.page-template-template-support .support-card__more {
    margin-top: auto;
    padding-top: 1rem;
    font-weight: 600;
    text-decoration: none;
}

.page-template-template-support .support-card__more:hover {
    text-decoration: underline;
}

/* Zero-height GET-INVOLVED nav-anchor targets (offset for the sticky header;
   html already sets scroll-padding-top, this is belt-and-suspenders). */
.page-template-template-support .support-anchor {
    display: block;
    height: 0;
    scroll-margin-top: 90px;
}

.page-template-template-support .support-path-grid .card[id] {
    scroll-margin-top: 90px;
}


/* ==== DONATE (/support/donate) ==== */
/* All rules namespaced under the page's body class. Tokens only — the `.hs`
 * design-system classes are home-scoped in site.css, so this page owns its own
 * container, padding, banding and typography. */

.page-template-template-support-donate .hs {
    position: relative;
    padding-block: clamp(3.5rem, 8vw, 6rem);
    background: var(--color-panel);
    color: var(--color-ink);
}

.page-template-template-support-donate .hs__inner {
    max-width: var(--donate-col, 60rem);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.page-template-template-support-donate .hs__center {
    text-align: center;
}

/* Shared heading — centered serif H2 at Figma text-4xl (36px). */
.page-template-template-support-donate .hs-donate__h2 {
    margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h2);
    line-height: 1.1;
    color: var(--charcoal);
    text-align: center;
}

/* Zebra banding — banded sections sit a hair darker than the base panel. */
.page-template-template-support-donate .hs-donate_hero,
.page-template-template-support-donate .hs-donate_impact,
.page-template-template-support-donate .hs-donate_ways {
    background: color-mix(in srgb, var(--color-panel) 78%, var(--stone));
}

/* ---- §1 Hero ---- */
.page-template-template-support-donate .hs-donate_hero {
    --donate-col: 48rem;
    padding-block: clamp(4rem, 9vw, 7rem);
    border-bottom: 1px solid var(--color-line);
}

.page-template-template-support-donate .hs-donate_hero__badge {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--clay) 12%, transparent);
    color: var(--clay);
}

.page-template-template-support-donate .hs-donate_hero__badge svg {
    width: 2rem;
    height: 2rem;
}

.page-template-template-support-donate .hs-donate_hero__eyebrow {
    letter-spacing: .12em;
}

.page-template-template-support-donate .hs-donate_hero__title {
    margin: 0 0 1.25rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.5rem, 6vw, 3.75rem);
    line-height: 1.05;
    color: var(--charcoal);
}

.page-template-template-support-donate .hs-donate_hero__lede p {
    margin: 0;
    font-size: var(--fs-p2);
    line-height: 1.6;
    color: var(--color-muted);
}

/* ---- §2 Why Give ---- */
.page-template-template-support-donate .hs-donate_why {
    --donate-col: 48rem;
}

.page-template-template-support-donate .hs-donate_why__body p {
    margin: 0;
    font-size: var(--fs-p3);
    line-height: 1.7;
    color: var(--color-muted);
}

.page-template-template-support-donate .hs-donate_why__body > p:first-child {
    font-size: var(--fs-p2);
}

.page-template-template-support-donate .hs-donate_why__body p + p {
    margin-top: 1.25rem;
}

/* ---- §3 Where Your Donation Goes ---- */
.page-template-template-support-donate .hs-donate_impact {
    --donate-col: 56rem;
}

.page-template-template-support-donate .hs-donate_impact__grid,
.page-template-template-support-donate .hs-donate_ways__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 1.5rem);
}

.page-template-template-support-donate .hs-donate_card {
    padding: clamp(1.5rem, 3vw, 2rem);
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    transition: box-shadow .15s ease;
}

.page-template-template-support-donate .hs-donate_card:hover {
    box-shadow: 0 10px 28px color-mix(in srgb, var(--charcoal) 12%, transparent);
}

.page-template-template-support-donate .hs-donate_card__row {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    margin-bottom: .85rem;
}

.page-template-template-support-donate .hs-donate_card__num {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-h2);
    line-height: 1;
    color: var(--clay);
}

.page-template-template-support-donate .hs-donate_card__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h5);
    line-height: 1.2;
    color: var(--charcoal);
}

.page-template-template-support-donate .hs-donate_bar {
    height: 8px;
    margin-bottom: 1rem;
    background: var(--color-line);
    border-radius: 999px;
    overflow: hidden;
}

.page-template-template-support-donate .hs-donate_bar__fill {
    display: block;
    height: 100%;
    background: var(--clay);
    border-radius: 999px;
}

.page-template-template-support-donate .hs-donate_card__desc {
    margin: 0;
    font-size: var(--fs-p4);
    line-height: 1.6;
    color: var(--color-muted);
}

/* ---- §4 Make a Gift ---- */
.page-template-template-support-donate .hs-donate_gift {
    --donate-col: 36rem;
}

.page-template-template-support-donate .hs-donate_gift__text {
    margin: 0 0 clamp(1.75rem, 4vw, 2.25rem);
    font-size: var(--fs-p3);
    line-height: 1.7;
    color: var(--color-muted);
}

.page-template-template-support-donate .hs-donate_gift__action {
    margin: 0;
}

.page-template-template-support-donate .hs-donate_gift__btn {
    min-height: 48px;
    padding-inline: clamp(1.75rem, 4vw, 2.5rem);
}

.page-template-template-support-donate .hs-donate_gift__icon {
    display: inline-flex;
    margin-right: .5rem;
}

.page-template-template-support-donate .hs-donate_gift__icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.page-template-template-support-donate .hs-donate_gift__caption {
    margin: .85rem 0 0;
    font-size: var(--fs-p5);
    color: var(--color-muted);
    opacity: .8;
}

/* ---- §5 Ways to Give ---- */
.page-template-template-support-donate .hs-donate_ways {
    --donate-col: 56rem;
}

.page-template-template-support-donate .hs-donate_way {
    padding: clamp(1.25rem, 2.5vw, 1.5rem);
    background: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
}

.page-template-template-support-donate .hs-donate_way__title {
    margin: 0 0 .5rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--fs-p3);
    color: var(--charcoal);
}

.page-template-template-support-donate .hs-donate_way__desc {
    margin: 0;
    font-size: var(--fs-p4);
    line-height: 1.6;
    color: var(--color-muted);
}

/* ---- §6 Detailed Giving Instructions ---- */
.page-template-template-support-donate .hs-donate_instructions {
    --donate-col: 36rem;
}

.page-template-template-support-donate .hs-donate_instructions__h2 {
    font-size: var(--fs-h3); /* one step down from the page's other H2s */
}

.page-template-template-support-donate .hs-donate_instructions__body p {
    margin: 0 0 clamp(1.75rem, 4vw, 2rem);
    font-size: var(--fs-p3);
    line-height: 1.7;
    color: var(--color-muted);
}

.page-template-template-support-donate .hs-donate_instructions__action {
    margin: 0;
}

/* ---- Responsive: stack card grids on narrow screens ---- */
@media (max-width: 640px) {
    .page-template-template-support-donate .hs-donate_impact__grid,
    .page-template-template-support-donate .hs-donate_ways__grid {
        grid-template-columns: 1fr;
    }

    .page-template-template-support-donate .hs-donate_card__row {
        flex-wrap: wrap;
    }
}


/* ==== HOW TO GIVE (/support/how-to-give) ==== */

/* Base tone: the accordion, tax and questions sections all sit on the near-white
   panel; only the hero is a slightly deeper cream band. Setting it once on the
   page body means those three sections need no per-section fill. */
body.page-template-template-support-how-to-give {
    background: var(--color-panel);
}

/* .hs / .hs__inner / .hs__center layout scaffold — the base rules in site.css
   are scoped to `.home`, so the shared wrapper convention is re-provided here,
   page-scoped, for the support-family pages. */
.page-template-template-support-how-to-give .hs {
    position: relative;
}

.page-template-template-support-how-to-give .hs__inner {
    width: min(100% - (var(--space-page) * 2), var(--max-wide));
    margin-inline: auto;
}

.page-template-template-support-how-to-give .hs__center {
    text-align: center;
}

/* ---- §1 Hero — type-only, centered, banded, hairline base border ---- */
.page-template-template-support-how-to-give .hs-howtogive_hero {
    background: color-mix(in srgb, var(--color-line) 30%, var(--color-panel));
    border-bottom: 1px solid var(--color-line);
    padding: clamp(3rem, 8vw, 6rem) 0;
}

.page-template-template-support-how-to-give .hs-howtogive_hero__inner {
    max-width: var(--max-narrow);
}

.page-template-template-support-how-to-give .hs-howtogive_hero__title {
    margin: 0 0 1rem;
    font-size: clamp(2.5rem, 6vw, 3.75rem); /* text-5xl → text-6xl (48 → 60) */
    line-height: 1.04;
    color: var(--charcoal);
}

.page-template-template-support-how-to-give .hs-howtogive_hero__lede {
    margin: 0;
    font-size: var(--fs-p2);
    line-height: 1.6;
    color: var(--color-muted);
}

/* ---- §2 Ways to give — boxed serif variant of the shared FAQ accordion ----
   The reused section-faq_accordion.php renders `.section` + `.accordion*`;
   these rules restyle the flush hairline list into individually bordered,
   rounded boxes with serif question rows and a rotating chevron caret. */
.page-template-template-support-how-to-give .accordion {
    border-top: 0;
    display: grid;
    gap: 1rem;
}

.page-template-template-support-how-to-give .accordion__item {
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-white) 45%, var(--color-panel));
    padding: 0 clamp(1.1rem, 3vw, 1.6rem);
}

.page-template-template-support-how-to-give .accordion__q {
    padding: 1.25rem 0;
    align-items: center;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h4); /* 20 */
    color: var(--charcoal);
}

.page-template-template-support-how-to-give .accordion__q:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Rotating chevron caret in place of the shared +/− glyph */
.page-template-template-support-how-to-give .accordion__q::after {
    content: "";
    flex: none;
    width: .6rem;
    height: .6rem;
    margin-top: -.2rem;
    border-right: 2px solid var(--color-muted);
    border-bottom: 2px solid var(--color-muted);
    transform: rotate(45deg);
    transition: transform var(--transition-fast);
}

.page-template-template-support-how-to-give .accordion__item.is-open .accordion__q::after {
    content: "";
    margin-top: .1rem;
    transform: rotate(225deg);
}

.page-template-template-support-how-to-give .accordion__a {
    padding: 0 0 1.4rem;
    color: var(--color-muted);
    font-size: var(--fs-p4); /* 14 */
    line-height: 1.7;
}

.page-template-template-support-how-to-give .accordion__a > * + * {
    margin-top: .75rem;
}

.page-template-template-support-how-to-give .accordion__a a {
    color: var(--color-accent-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.page-template-template-support-how-to-give .accordion__a strong {
    font-weight: 600;
    color: var(--color-ink);
}

.page-template-template-support-how-to-give .accordion__a ul {
    margin: 0;
    padding-left: 1.2rem;
    list-style: disc;
}

.page-template-template-support-how-to-give .accordion__a li + li {
    margin-top: .35rem;
}

/* Monospace data block (mailing address / bank details) nested in an answer */
.page-template-template-support-how-to-give .htg-datablock {
    display: grid;
    gap: .15rem;
    margin: .9rem 0;
    padding: 1rem 1.1rem;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-line) 45%, var(--color-panel));
    font-family: var(--font-label);
    font-size: var(--fs-p4);
    line-height: 1.5;
    color: var(--color-ink);
    overflow-wrap: anywhere;
}

.page-template-template-support-how-to-give .htg-datablock--fields {
    gap: .3rem;
}

.page-template-template-support-how-to-give .htg-datablock__label {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--color-ink);
}

/* ---- §3 Tax Receipt — soft clay-tinted callout box ---- */
.page-template-template-support-how-to-give .hs-howtogive_tax {
    padding: clamp(3rem, 7vw, 6rem) 0;
}

.page-template-template-support-how-to-give .hs-howtogive_tax__inner {
    max-width: var(--max-narrow);
}

.page-template-template-support-how-to-give .hs-howtogive_tax__box {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid color-mix(in srgb, var(--clay) 20%, var(--color-white));
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--clay) 5%, var(--color-panel));
}

.page-template-template-support-how-to-give .hs-howtogive_tax__heading {
    margin: 0 0 1rem;
    font-family: var(--font-body); /* sans, not serif — per Figma */
    font-weight: 600;
    font-size: var(--fs-h5);
    color: var(--color-accent);
}

.page-template-template-support-how-to-give .hs-howtogive_tax__body {
    font-size: var(--fs-p4);
    line-height: 1.7;
    color: var(--color-muted);
}

.page-template-template-support-how-to-give .hs-howtogive_tax__body > * + * {
    margin-top: 1rem;
}

/* ---- §4 Questions? closing CTA ---- */
.page-template-template-support-how-to-give .hs-howtogive_cta {
    padding: clamp(3rem, 7vw, 6rem) 0;
}

.page-template-template-support-how-to-give .hs-howtogive_cta__inner {
    max-width: 40rem;
}

.page-template-template-support-how-to-give .hs-howtogive_cta__title {
    margin: 0 0 1rem;
    font-size: var(--fs-h2); /* text-3xl (30) */
    color: var(--charcoal);
}

.page-template-template-support-how-to-give .hs-howtogive_cta__text {
    margin: 0 0 1rem;
    font-size: var(--fs-p2);
    line-height: 1.6;
    color: var(--color-muted);
}

.page-template-template-support-how-to-give .hs-howtogive_cta__text > * {
    margin: 0;
}

.page-template-template-support-how-to-give .hs-howtogive_cta__email {
    margin: 0 0 1.75rem;
}

.page-template-template-support-how-to-give .hs-howtogive_cta__email a {
    font-weight: 500;
    color: var(--color-accent-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.page-template-template-support-how-to-give .hs-howtogive_cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}


/* ==== LEGACY GIVING (/support/legacy-giving) ==== */
/* All rules namespaced under the page's body class. Tokens only — the `.hs`
 * design-system classes are home-scoped in site.css, so this page owns its own
 * container, padding, banding and typography (same approach as donate.css). */

.page-template-template-support-legacy .hs {
    position: relative;
    padding-block: clamp(3.5rem, 8vw, 6rem);
    background: var(--color-panel);
    color: var(--color-ink);
}

.page-template-template-support-legacy .hs__inner {
    max-width: var(--legacy-col, 48rem);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.page-template-template-support-legacy .hs__center {
    text-align: center;
}

/* Shared section heading — centered serif H2 at Figma text-4xl (36px). */
.page-template-template-support-legacy .hs-legacy__h2 {
    margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h2);
    line-height: 1.1;
    color: var(--charcoal);
    text-align: center;
}

/* Zebra banding — hero, gift-type grid and closing CTA sit a hair darker than
 * the base panel; intro + tax/legal keep the base tone. Bookends the page. */
.page-template-template-support-legacy .hs-legacy_hero,
.page-template-template-support-legacy .hs-legacy_gifts,
.page-template-template-support-legacy .hs-legacy_cta {
    background: color-mix(in srgb, var(--color-panel) 78%, var(--stone));
}

/* ---- §1 Hero ---- */
.page-template-template-support-legacy .hs-legacy_hero {
    --legacy-col: 48rem;
    padding-block: clamp(4rem, 9vw, 7rem);
    border-bottom: 1px solid var(--color-line);
}

.page-template-template-support-legacy .hs-legacy_hero__badge {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--clay) 10%, transparent);
    color: var(--clay);
}

.page-template-template-support-legacy .hs-legacy_hero__badge svg {
    width: 2rem;
    height: 2rem;
}

.page-template-template-support-legacy .hs-legacy_hero__eyebrow {
    letter-spacing: .14em;
}

.page-template-template-support-legacy .hs-legacy_hero__title {
    margin: 0 0 1.25rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.5rem, 6vw, 3.75rem);
    line-height: 1.05;
    color: var(--charcoal);
}

.page-template-template-support-legacy .hs-legacy_hero__lede p {
    margin: 0;
    font-size: var(--fs-p2);
    line-height: 1.6;
    color: var(--color-muted);
}

/* ---- §2 Intro narrative ---- */
.page-template-template-support-legacy .hs-legacy_intro {
    --legacy-col: 48rem;
}

.page-template-template-support-legacy .hs-legacy_intro__body p {
    margin: 0;
    font-size: var(--fs-p3);
    line-height: 1.7;
    color: var(--color-muted);
}

.page-template-template-support-legacy .hs-legacy_intro__body > p:first-child {
    font-size: var(--fs-p2);
}

.page-template-template-support-legacy .hs-legacy_intro__body p + p {
    margin-top: 1.25rem;
}

/* ---- §3 Types of Legacy Gifts ---- */
.page-template-template-support-legacy .hs-legacy_gifts {
    --legacy-col: 60rem;
}

.page-template-template-support-legacy .hs-legacy_gifts__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 1.5rem);
}

.page-template-template-support-legacy .hs-legacy_gift {
    padding: clamp(1.5rem, 3vw, 2rem);
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    transition: box-shadow .15s ease;
}

.page-template-template-support-legacy .hs-legacy_gift:hover {
    box-shadow: 0 10px 28px color-mix(in srgb, var(--charcoal) 12%, transparent);
}

.page-template-template-support-legacy .hs-legacy_gift__title {
    margin: 0 0 .65rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h4);
    line-height: 1.2;
    color: var(--charcoal);
}

.page-template-template-support-legacy .hs-legacy_gift__desc {
    margin: 0;
    font-size: var(--fs-p4);
    line-height: 1.7;
    color: var(--color-muted);
}

/* ---- §4 Tax and Legal Information (tinted callout box) ---- */
.page-template-template-support-legacy .hs-legacy_tax {
    --legacy-col: 48rem;
}

.page-template-template-support-legacy .hs-legacy_tax__box {
    padding: clamp(1.75rem, 4vw, 2.5rem);
    background: color-mix(in srgb, var(--clay) 5%, var(--color-panel));
    border: 1px solid color-mix(in srgb, var(--clay) 22%, transparent);
    border-radius: var(--radius-lg);
    text-align: left;
}

.page-template-template-support-legacy .hs-legacy_tax__heading {
    margin: 0 0 1rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--fs-h4);
    line-height: 1.3;
    color: var(--clay);
}

.page-template-template-support-legacy .hs-legacy_tax__body p {
    margin: 0;
    font-size: var(--fs-p4);
    line-height: 1.7;
    color: var(--color-muted);
}

.page-template-template-support-legacy .hs-legacy_tax__body p + p {
    margin-top: 1rem;
}

/* ---- §5 Begin a Conversation (light CTA band) ---- */
.page-template-template-support-legacy .hs-legacy_cta {
    --legacy-col: 42rem;
    border-top: 1px solid var(--color-line);
}

.page-template-template-support-legacy .hs-legacy_cta__title {
    /* one step down from the page's other H2s per the Figma spec (30px) */
    margin: 0 0 1rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h3);
    line-height: 1.1;
    color: var(--charcoal);
}

.page-template-template-support-legacy .hs-legacy_cta__text {
    margin: 0 0 1rem;
    font-size: var(--fs-p3);
    line-height: 1.7;
    color: var(--color-muted);
}

.page-template-template-support-legacy .hs-legacy_cta__text p {
    margin: 0;
    font: inherit;
    color: inherit;
}

.page-template-template-support-legacy .hs-legacy_cta__email {
    margin: 0 0 clamp(1.75rem, 4vw, 2.25rem);
}

.page-template-template-support-legacy .hs-legacy_cta__email a {
    font-weight: 500;
    color: var(--clay);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.page-template-template-support-legacy .hs-legacy_cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* ---- Responsive: stack the gift-type grid on narrow screens ---- */
@media (max-width: 640px) {
    .page-template-template-support-legacy .hs-legacy_gifts__grid {
        grid-template-columns: 1fr;
    }

    .page-template-template-support-legacy .hs-legacy_cta__actions {
        flex-direction: column;
        align-items: stretch;
    }
}


/* ==== LOCALBIZ (/support/local-businesses) ==== */
/* Community Partners page. All selectors namespaced under the page body class.
   Reuses shared components (.section, .card, .card__icon, .stat-card, .button);
   this layer only adds what those don't cover: centered hero + icon circle,
   the 3 distinct stat-card tints, the category heading-icon row, and the boxed
   "Get Involved" panel. Tokens only — no hard-coded hex/fonts. */

/* ---- Hero: centered block, icon circle, lede ------------------------------ */
.page-template-template-support-local-businesses .localbiz-hero__inner {
    max-width: var(--max-narrow);
    text-align: center;
}

.page-template-template-support-local-businesses .localbiz-hero__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
}

.page-template-template-support-local-businesses .localbiz-hero__icon svg {
    width: 30px;
    height: 30px;
}

.page-template-template-support-local-businesses .localbiz-hero .eyebrow {
    letter-spacing: var(--tracking-caps);
}

.page-template-template-support-local-businesses .localbiz-hero__title {
    margin: 0 0 1.25rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h1);
    line-height: 1.03;
    color: var(--color-ink);
}

.page-template-template-support-local-businesses .localbiz-hero__lede {
    font-size: var(--fs-p1);
    line-height: 1.6;
    color: var(--color-muted);
}

.page-template-template-support-local-businesses .localbiz-hero__lede > :first-child { margin-top: 0; }
.page-template-template-support-local-businesses .localbiz-hero__lede > :last-child  { margin-bottom: 0; }

/* ---- Impact stats: 3 distinct tints, tighter to hero above ---------------- */
.page-template-template-support-local-businesses .localbiz-stats {
    padding-top: 0;
}

.page-template-template-support-local-businesses .localbiz-stats__grid {
    max-width: var(--max-narrow);
    margin-inline: auto;
}

.page-template-template-support-local-businesses .localbiz-stat__label {
    display: block;
    margin-top: .35rem;
    font-size: var(--fs-p4);
    line-height: 1.45;
    color: var(--color-muted);
}

.page-template-template-support-local-businesses .localbiz-stat--clay {
    background: color-mix(in srgb, var(--clay) 6%, var(--color-paper));
    border-color: color-mix(in srgb, var(--clay) 16%, transparent);
}
.page-template-template-support-local-businesses .localbiz-stat--clay .stat-card__num {
    color: var(--clay);
}

.page-template-template-support-local-businesses .localbiz-stat--teal {
    background: color-mix(in srgb, var(--teal) 6%, var(--color-paper));
    border-color: color-mix(in srgb, var(--teal) 16%, transparent);
}
.page-template-template-support-local-businesses .localbiz-stat--teal .stat-card__num {
    color: var(--teal);
}

.page-template-template-support-local-businesses .localbiz-stat--muted {
    background: var(--color-panel-alt);
    border-color: var(--color-line);
}
.page-template-template-support-local-businesses .localbiz-stat--muted .stat-card__num {
    color: var(--color-ink);
}

/* ---- Category sections: icon-in-circle beside a left-aligned H2 ----------- */
.page-template-template-support-local-businesses .localbiz-cat__head {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1.6rem;
}

.page-template-template-support-local-businesses .localbiz-cat__icon {
    width: 44px;
    height: 44px;
    margin-bottom: 0;
}

.page-template-template-support-local-businesses .localbiz-cat__icon svg {
    width: 20px;
    height: 20px;
}

.page-template-template-support-local-businesses .localbiz-cat__head h2 {
    margin: 0;
}

/* Figma pins these grids to 2 columns (shared .card-grid auto-fits to 3+). */
.page-template-template-support-local-businesses .localbiz-cat__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.page-template-template-support-local-businesses .localbiz-cat__card {
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.page-template-template-support-local-businesses .localbiz-cat__card:hover {
    box-shadow: var(--shadow-md);
}

.page-template-template-support-local-businesses .localbiz-cat__card h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h4);
    margin-bottom: .5rem;
}

.page-template-template-support-local-businesses .localbiz-cat__card p {
    margin: 0;
    font-size: var(--fs-p4);
    line-height: 1.55;
    color: var(--color-muted);
}

.page-template-template-support-local-businesses .localbiz-cat__card a {
    display: inline-block;
    margin-top: .75rem;
    font-size: var(--fs-p4);
    font-weight: 600;
    color: var(--color-accent);
}

/* ---- Get Involved: boxed, faintly tinted panel with a bare mail glyph ----- */
.page-template-template-support-local-businesses .localbiz-getinvolved__box {
    max-width: var(--max-narrow);
    margin-inline: auto;
    padding: clamp(2rem, 5vw, 3.5rem);
    text-align: center;
    background: color-mix(in srgb, var(--color-panel-alt) 50%, var(--color-paper));
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
}

.page-template-template-support-local-businesses .localbiz-getinvolved__icon {
    display: block;
    margin: 0 auto .75rem;
    color: var(--color-accent);
}
.page-template-template-support-local-businesses .localbiz-getinvolved__icon svg {
    width: 40px;
    height: 40px;
}

.page-template-template-support-local-businesses .localbiz-getinvolved__box h2 {
    margin: 0 0 1rem;
}

.page-template-template-support-local-businesses .localbiz-getinvolved__body {
    font-size: var(--fs-p2);
    line-height: 1.65;
    color: var(--color-muted);
}
.page-template-template-support-local-businesses .localbiz-getinvolved__body > :first-child { margin-top: 0; }
.page-template-template-support-local-businesses .localbiz-getinvolved__body > :last-child  { margin-bottom: 0; }

.page-template-template-support-local-businesses .localbiz-getinvolved__body a {
    color: var(--color-accent);
    text-decoration: underline;
}

.page-template-template-support-local-businesses .localbiz-getinvolved__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-top: 1.75rem;
}

.page-template-template-support-local-businesses .localbiz-getinvolved__btn svg {
    width: 1.1em;
    height: 1.1em;
    margin-right: .5rem;
}

/* ---- Mobile: single-column category grids -------------------------------- */
@media (max-width: 640px) {
    .page-template-template-support-local-businesses .localbiz-cat__grid {
        grid-template-columns: 1fr;
    }
}


/* ==== PARTNERS (/support/partners) ==== */
/* Our Partners page (new template). All selectors namespaced under the page body
   class. Reuses shared components (.section, .card, .card__icon, .button,
   .button--ghost, .eyebrow); this layer only adds what those don't cover: the
   centered hero + pill CTA, the two icon-circle heading rows (clay + teal
   variants), the title/location card-header row, and the boxed "Become a Partner"
   panel. The slate-blue Figma "secondary" hue has no brand token, so its two uses
   (hero globe + graduation-cap circle) draw from var(--teal) as the close-enough
   cool accent, consistent with how the "secondary" gap is handled sitewide.
   Tokens only — no hard-coded hex/fonts. */

/* ---- Hero: centered block, icon circle, lede, pill CTA -------------------- */
.page-template-template-support-partners .partners-hero__inner {
    max-width: var(--max-narrow);
    text-align: center;
}

.page-template-template-support-partners .partners-hero__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    background: color-mix(in srgb, var(--teal) 10%, var(--color-paper));
    color: var(--teal);
}

.page-template-template-support-partners .partners-hero__icon svg {
    width: 30px;
    height: 30px;
}

.page-template-template-support-partners .partners-hero .eyebrow {
    letter-spacing: var(--tracking-caps);
}

.page-template-template-support-partners .partners-hero__title {
    margin: 0 0 1.25rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h1);
    line-height: 1.03;
    color: var(--color-ink);
}

.page-template-template-support-partners .partners-hero__lede {
    font-size: var(--fs-p1);
    line-height: 1.6;
    color: var(--color-muted);
}

.page-template-template-support-partners .partners-hero__lede > :first-child { margin-top: 0; }
.page-template-template-support-partners .partners-hero__lede > :last-child  { margin-bottom: 0; }

.page-template-template-support-partners .partners-hero__actions {
    margin-top: 2rem;
}

/* Figma one-off: an outline, fully-rounded "pill" with neutral ink text
   (not the clay text of the shared .button--ghost). */
.page-template-template-support-partners .partners-hero__cta {
    color: var(--color-ink);
    border-radius: 999px;
    padding-inline: 1.5rem;
    gap: .4rem;
}

.page-template-template-support-partners .partners-hero__arrow {
    font-size: 1.05em;
    line-height: 1;
}

/* ---- Partner groups: icon-in-circle beside a left-aligned H2 -------------- */
.page-template-template-support-partners .partners-group__head {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1.75rem;
}

.page-template-template-support-partners .partners-group__icon {
    width: 44px;
    height: 44px;
    margin-bottom: 0;
}

.page-template-template-support-partners .partners-group__icon svg {
    width: 20px;
    height: 20px;
}

.page-template-template-support-partners .partners-group__icon--primary {
    background: color-mix(in srgb, var(--clay) 10%, var(--color-paper));
    color: var(--clay);
}

.page-template-template-support-partners .partners-group__icon--secondary {
    background: color-mix(in srgb, var(--teal) 10%, var(--color-paper));
    color: var(--teal);
}

.page-template-template-support-partners .partners-group__head h2 {
    margin: 0;
}

/* Figma pins these grids to 2 columns (shared .card-grid auto-fits to 3+). */
.page-template-template-support-partners .partners-group__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

/* Cards: larger radius + roomier padding than the default .card, hover shadow. */
.page-template-template-support-partners .partners-group__card {
    padding: clamp(1.4rem, 3vw, 1.75rem);
    border-radius: var(--radius-lg);
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.page-template-template-support-partners .partners-group__card:hover {
    box-shadow: var(--shadow-md);
}

.page-template-template-support-partners .partners-group__cardhead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}

.page-template-template-support-partners .partners-group__card h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h4);
    line-height: 1.2;
}

.page-template-template-support-partners .partners-group__loc {
    flex-shrink: 0;
    padding-top: .15rem;
    font-size: var(--fs-p5);
    line-height: 1.4;
    color: var(--color-muted);
    text-align: right;
}

.page-template-template-support-partners .partners-group__card p {
    margin: 0;
    font-size: var(--fs-p4);
    line-height: 1.55;
    color: var(--color-muted);
}

/* ---- Become a Partner: boxed, faintly tinted panel, bare mail glyph ------- */
.page-template-template-support-partners .partners-cta__box {
    padding: clamp(2rem, 5vw, 3rem);
    text-align: center;
    background: color-mix(in srgb, var(--color-panel-alt) 45%, var(--color-paper));
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
}

.page-template-template-support-partners .partners-cta__icon {
    display: block;
    margin: 0 auto 1rem;
    color: var(--color-accent);
}
.page-template-template-support-partners .partners-cta__icon svg {
    width: 40px;
    height: 40px;
}

.page-template-template-support-partners .partners-cta__box h2 {
    margin: 0 0 1rem;
}

.page-template-template-support-partners .partners-cta__body {
    max-width: 42rem;
    margin-inline: auto;
    font-size: var(--fs-p2);
    line-height: 1.65;
    color: var(--color-muted);
}
.page-template-template-support-partners .partners-cta__body > :first-child { margin-top: 0; }
.page-template-template-support-partners .partners-cta__body > :last-child  { margin-bottom: 0; }

.page-template-template-support-partners .partners-cta__body a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.page-template-template-support-partners .partners-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.page-template-template-support-partners .partners-cta__btn svg {
    width: 1.1em;
    height: 1.1em;
    margin-right: .5rem;
}

/* ---- Mobile: single-column group grids, stacked CTA buttons -------------- */
@media (max-width: 640px) {
    .page-template-template-support-partners .partners-group__grid {
        grid-template-columns: 1fr;
    }

    .page-template-template-support-partners .partners-cta__actions {
        flex-direction: column;
        align-items: stretch;
    }
}


/* ==== PATRON (/support/patron) ==== */
/* All selectors namespaced under .page-template-template-support-patron.
   Tokens only, except two documented no-token one-offs:
   #4a5d7a  — Angel/Grand badge (slate-blue; map "NEW TOKENS" --slate candidate).
   #0070ba / #005ea6 — PayPal brand blue button (intentional third-party colour). */

/* --- shared section scaffold (no global .hs base outside .home) --- */
.page-template-template-support-patron .hs {
    padding: 0;
}
.page-template-template-support-patron .hs__inner {
    width: 100%;
    max-width: var(--max-wide);
    margin-inline: auto;
    padding-inline: var(--space-page);
}
.page-template-template-support-patron .hs__inner--narrow {
    max-width: var(--max-narrow);
}
.page-template-template-support-patron .hs__center {
    text-align: center;
}

/* --- §1 hero --- */
.page-template-template-support-patron .hs-patron_hero {
    padding-block: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 3vw, 2.5rem);
}
.page-template-template-support-patron .hs-patron_hero__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--clay) 10%, var(--color-white));
}
.page-template-template-support-patron .hs-patron_hero__badge svg {
    width: 2rem;
    height: 2rem;
    color: var(--clay);
}
.page-template-template-support-patron .hs-patron_hero__title {
    margin: 0 0 1.25rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.5rem, 6vw, 3.75rem);
    line-height: 1.05;
}
.page-template-template-support-patron .hs-patron_hero__lede {
    margin: 0 auto 2rem;
    max-width: 44rem;
    font-size: var(--fs-p2);
    color: var(--color-muted);
    line-height: 1.6;
}
.page-template-template-support-patron .hs-patron_hero__btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    padding: .6rem 1.5rem;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-ink);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.page-template-template-support-patron .hs-patron_hero__btn:hover {
    background: var(--color-panel);
    color: var(--clay);
}

/* --- §2 tax-deductible notice (tinted callout box) --- */
.page-template-template-support-patron .hs-patron_tax {
    padding-block: 0 clamp(3rem, 6vw, 4rem);
}
.page-template-template-support-patron .hs-patron_tax__box {
    max-width: var(--max-narrow);
    margin-inline: auto;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid color-mix(in srgb, var(--clay) 20%, var(--color-white));
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--clay) 5%, var(--color-white));
    text-align: center;
}
.page-template-template-support-patron .hs-patron_tax__text {
    margin: 0;
    font-size: var(--fs-p4);
    color: var(--color-muted);
    line-height: 1.6;
}
.page-template-template-support-patron .hs-patron_tax__lead {
    font-weight: 700;
    color: var(--clay);
}

/* --- §3 patron tiers --- */
.page-template-template-support-patron .hs-patron_tiers {
    padding-block: 0 clamp(3.5rem, 7vw, 5rem);
}
.page-template-template-support-patron .hs-patron_tiers__h2 {
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.9rem, 4vw, 2.25rem);
    line-height: 1.08;
    text-align: center;
}
.page-template-template-support-patron .hs-patron_tiers__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
}
.page-template-template-support-patron .hs-patron_tier {
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 3vw, 2rem);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    transition: box-shadow var(--transition-fast);
}
.page-template-template-support-patron .hs-patron_tier:hover {
    box-shadow: var(--shadow-sm);
}
.page-template-template-support-patron .hs-patron_tier__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}
.page-template-template-support-patron .hs-patron_tier__name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.35rem, 2.4vw, 1.5rem);
    line-height: 1.15;
}
.page-template-template-support-patron .hs-patron_tier__badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: .15rem .5rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--fs-p5);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.page-template-template-support-patron .hs-patron_tier__badge--clay {
    background: var(--clay);
    color: var(--color-white);
}
.page-template-template-support-patron .hs-patron_tier__badge--slate {
    background: #4a5d7a; /* no-token one-off — see banner */
    color: var(--color-white);
}
.page-template-template-support-patron .hs-patron_tier__badge--outline {
    background: transparent;
    color: var(--color-ink);
    border-color: var(--color-line);
}
.page-template-template-support-patron .hs-patron_tier__price {
    margin: 0 0 .25rem;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--clay);
}
.page-template-template-support-patron .hs-patron_tier__note {
    margin: 0 0 .25rem;
    font-size: var(--fs-p5);
    font-style: italic;
    color: var(--color-muted);
}
.page-template-template-support-patron .hs-patron_tier__divider {
    height: 1px;
    margin: .9rem 0;
    border: 0;
    background: var(--color-line);
}
.page-template-template-support-patron .hs-patron_tier__features {
    flex: 1;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .5rem;
}
.page-template-template-support-patron .hs-patron_tier__features li {
    display: flex;
    gap: .5rem;
    font-size: var(--fs-p4);
    color: var(--color-muted);
    line-height: 1.45;
}
.page-template-template-support-patron .hs-patron_tier__features li::before {
    content: "\2726"; /* ✦ */
    flex-shrink: 0;
    color: var(--clay);
    line-height: 1.45;
}
.page-template-template-support-patron .hs-patron_tier__count {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: 0;
    padding-top: .75rem;
    border-top: 1px solid var(--color-line);
    font-size: var(--fs-p5);
    color: var(--color-muted);
}
.page-template-template-support-patron .hs-patron_tier__count svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--color-muted);
}

/* --- §4 give at any level (tinted callout box + PayPal button) --- */
.page-template-template-support-patron .hs-patron_give {
    padding-block: 0 clamp(2.5rem, 5vw, 4rem);
}
.page-template-template-support-patron .hs-patron_give__box {
    max-width: var(--max-narrow);
    margin-inline: auto;
    padding: clamp(1.75rem, 4vw, 2.5rem);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-panel);
    text-align: center;
}
.page-template-template-support-patron .hs-patron_give__h2 {
    margin: 0 0 1rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.6rem, 3.5vw, 1.875rem);
    line-height: 1.1;
}
.page-template-template-support-patron .hs-patron_give__text {
    margin: 0 auto 1.75rem;
    max-width: 40rem;
    color: var(--color-muted);
    line-height: 1.6;
}
.page-template-template-support-patron .hs-patron_give__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: .75rem 2rem;
    border-radius: var(--radius);
    background: #0070ba; /* PayPal brand blue — intentional one-off */
    color: var(--color-white);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition-fast);
}
.page-template-template-support-patron .hs-patron_give__btn:hover {
    background: #005ea6;
}

/* --- §5 become-a-patron CTA (solid clay button + caption, plain bg) --- */
.page-template-template-support-patron .hs-patron_cta {
    padding-block: 0 clamp(2.5rem, 5vw, 4rem);
}
.page-template-template-support-patron .hs-patron_cta__btn {
    gap: .5rem;
    min-height: 56px;
    padding: 1rem 2.5rem;
    font-size: var(--fs-p2);
}
.page-template-template-support-patron .hs-patron_cta__btn svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}
.page-template-template-support-patron .hs-patron_cta__caption {
    margin: .75rem 0 0;
    font-size: var(--fs-p4);
    color: var(--color-muted);
}

/* --- §6 contact block (plain bg, ghost button) --- */
.page-template-template-support-patron .hs-patron_contact {
    padding-block: 0 clamp(3.5rem, 7vw, 5.5rem);
}
.page-template-template-support-patron .hs-patron_contact__text {
    margin: 0 auto 1.5rem;
    max-width: 36rem;
    color: var(--color-muted);
    line-height: 1.6;
}
.page-template-template-support-patron .hs-patron_contact__text a {
    color: var(--clay);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.page-template-template-support-patron .hs-patron_contact__text a:hover {
    color: var(--clay-hover);
}
.page-template-template-support-patron .hs-patron_contact__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: .6rem 1.5rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-white);
    color: var(--color-ink);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition-fast);
}
.page-template-template-support-patron .hs-patron_contact__btn:hover {
    background: var(--color-panel);
}

/* --- responsive --- */
@media (max-width: 1024px) {
    .page-template-template-support-patron .hs-patron_tiers__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .page-template-template-support-patron .hs-patron_tiers__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ==== SPONSOR (/support/sponsor) ==== */
/* All selectors namespaced under .page-template-template-support-sponsor.
   Tokens only, except one documented no-token one-off:
   #4a5d7a — Gold/Silver/Supporting badge fill + hero building icon + CTA mail
   icon + CTA callout tint/border (the "foreign slate-navy" the design map flags
   for a sitewide decision). Matches the same one-off already shipped for the
   Angel/Grand badges in patron.css, so the two twin pages stay consistent. */

/* --- shared section scaffold (no global .hs base outside .home) --- */
.page-template-template-support-sponsor .hs {
    padding: 0;
}
.page-template-template-support-sponsor .hs__inner {
    width: 100%;
    max-width: var(--max-wide);
    margin-inline: auto;
    padding-inline: var(--space-page);
}
.page-template-template-support-sponsor .hs__inner--narrow {
    max-width: var(--max-narrow);
}
.page-template-template-support-sponsor .hs__center {
    text-align: center;
}

/* --- §1 hero --- */
.page-template-template-support-sponsor .hs-sponsor_hero {
    padding-block: clamp(3.5rem, 8vw, 6rem) clamp(1.5rem, 3vw, 2.5rem);
}
.page-template-template-support-sponsor .hs-sponsor_hero__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, #4a5d7a 10%, var(--color-white)); /* no-token one-off — see banner */
}
.page-template-template-support-sponsor .hs-sponsor_hero__badge svg {
    width: 2rem;
    height: 2rem;
    color: #4a5d7a; /* no-token one-off — see banner */
}
.page-template-template-support-sponsor .hs-sponsor_hero__title {
    margin: 0 0 1.25rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.5rem, 6vw, 3.75rem);
    line-height: 1.05;
}
.page-template-template-support-sponsor .hs-sponsor_hero__lede {
    margin: 0 auto 2rem;
    max-width: 44rem;
    font-size: var(--fs-p2);
    color: var(--color-muted);
    line-height: 1.6;
}
.page-template-template-support-sponsor .hs-sponsor_hero__btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    padding: .6rem 1.5rem;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-ink);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.page-template-template-support-sponsor .hs-sponsor_hero__btn:hover {
    background: var(--color-panel);
    color: var(--clay);
}

/* --- §2 sponsorship packages --- */
.page-template-template-support-sponsor .hs-sponsor_packages {
    padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 6vw, 4.5rem);
}
.page-template-template-support-sponsor .hs-sponsor_packages__h2 {
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.9rem, 4vw, 2.25rem);
    line-height: 1.08;
    text-align: center;
}
.page-template-template-support-sponsor .hs-sponsor_packages__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
    align-items: start;
}
.page-template-template-support-sponsor .hs-sponsor_pkg {
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 3vw, 2rem);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    transition: box-shadow var(--transition-fast);
}
.page-template-template-support-sponsor .hs-sponsor_pkg:hover {
    box-shadow: var(--shadow-sm);
}
.page-template-template-support-sponsor .hs-sponsor_pkg--featured {
    /* 2px clay ring — box-sizing:border-box keeps outer size stable vs. 1px cards */
    border: 2px solid var(--color-accent);
}
.page-template-template-support-sponsor .hs-sponsor_pkg__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}
.page-template-template-support-sponsor .hs-sponsor_pkg__name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.35rem, 2.4vw, 1.5rem);
    line-height: 1.15;
}
.page-template-template-support-sponsor .hs-sponsor_pkg__badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: .15rem .5rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--fs-p5);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.page-template-template-support-sponsor .hs-sponsor_pkg__badge--clay {
    background: var(--clay);
    color: var(--color-white);
}
.page-template-template-support-sponsor .hs-sponsor_pkg__badge--slate {
    background: #4a5d7a; /* no-token one-off — see banner */
    color: var(--color-white);
}
.page-template-template-support-sponsor .hs-sponsor_pkg__price {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 1.875rem);
    color: var(--color-accent);
}
.page-template-template-support-sponsor .hs-sponsor_pkg__divider {
    height: 1px;
    margin: 1.1rem 0;
    border: 0;
    background: var(--color-line);
}
.page-template-template-support-sponsor .hs-sponsor_pkg__features {
    flex: 1;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .5rem;
}
.page-template-template-support-sponsor .hs-sponsor_pkg__features li {
    display: flex;
    gap: .5rem;
    font-size: var(--fs-p4);
    color: var(--color-muted);
    line-height: 1.45;
}
.page-template-template-support-sponsor .hs-sponsor_pkg__features li::before {
    content: "\2726"; /* ✦ */
    flex-shrink: 0;
    color: var(--clay);
    line-height: 1.45;
}

/* --- §3 "Interested in Sponsoring?" callout box --- */
.page-template-template-support-sponsor .hs-sponsor_cta {
    padding-block: 0 clamp(4rem, 8vw, 6rem);
}
.page-template-template-support-sponsor .hs-sponsor_cta__box {
    padding: clamp(2rem, 5vw, 3rem);
    border: 1px solid color-mix(in srgb, #4a5d7a 20%, var(--color-white)); /* no-token one-off — see banner */
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, #4a5d7a 5%, var(--color-white));        /* no-token one-off — see banner */
}
.page-template-template-support-sponsor .hs-sponsor_cta__icon {
    display: inline-flex;
    margin-bottom: 1rem;
}
.page-template-template-support-sponsor .hs-sponsor_cta__icon svg {
    width: 2.5rem;
    height: 2.5rem;
    color: #4a5d7a; /* no-token one-off — see banner */
}
.page-template-template-support-sponsor .hs-sponsor_cta__h2 {
    margin: 0 0 1rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.6rem, 3.5vw, 1.875rem);
    line-height: 1.1;
}
.page-template-template-support-sponsor .hs-sponsor_cta__text {
    margin: 0 auto 1.75rem;
    max-width: 40rem;
    font-size: var(--fs-p3);
    color: var(--color-muted);
    line-height: 1.6;
}
.page-template-template-support-sponsor .hs-sponsor_cta__text p {
    margin: 0;
}
.page-template-template-support-sponsor .hs-sponsor_cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}
.page-template-template-support-sponsor .hs-sponsor_cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 46px;
    padding: .75rem 1.5rem;
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
}
.page-template-template-support-sponsor .hs-sponsor_cta__btn-icon {
    display: inline-flex;
}
.page-template-template-support-sponsor .hs-sponsor_cta__btn-icon svg {
    width: 1.1rem;
    height: 1.1rem;
}
.page-template-template-support-sponsor .hs-sponsor_cta__btn--outline {
    border: 1px solid var(--color-line);
    background: var(--color-white);
    color: var(--color-ink);
    transition: background var(--transition-fast);
}
.page-template-template-support-sponsor .hs-sponsor_cta__btn--outline:hover {
    background: var(--color-panel);
}

/* --- responsive --- */
@media (max-width: 700px) {
    .page-template-template-support-sponsor .hs-sponsor_packages__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .page-template-template-support-sponsor .hs-sponsor_cta__actions {
        flex-direction: column;
    }
    .page-template-template-support-sponsor .hs-sponsor_cta__btn {
        width: 100%;
    }
}


/* ==== SUPPORTERS (/support/supporters) ==== */
/* Our Supporters recognition page: dramatic dark hero band, tier-tinted patron
   chip wall, sponsor tier cards with letter-avatars, partner name grid, and a
   light "Join Our Community" CTA. Figma's off-brand indigo/zinc/slate darks are
   substituted with the brand plum/charcoal + ochre/sky token system; the three
   descending patron/sponsor tiers step down in size and tint for prestige.
   All selectors namespaced under the page body class. */

/* --- Shared width container (max-w-5xl ~= 1024px) --- */
.page-template-template-support-supporters .hs__inner {
    width: min(100% - (var(--space-page) * 2), 64rem);
    margin-inline: auto;
}

/* --- Shared dark recognition band (§2/§3/§4) --- */
.page-template-template-support-supporters .hs-sup-band {
    background: var(--charcoal);
    color: var(--color-on-dark);
    padding-block: clamp(3.5rem, 8vw, 6rem);
    scroll-margin-top: 90px;
}

/* --- Shared centered heading + intro (dark bands) --- */
.page-template-template-support-supporters .hs-sup__h2 {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: none;
    color: var(--color-white);
    text-align: center;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    line-height: 1.05;
    margin: 0 0 .75rem;
    overflow-wrap: break-word;
}

.page-template-template-support-supporters .hs-sup__intro {
    text-align: center;
    color: color-mix(in srgb, var(--color-on-dark) 70%, transparent);
    max-width: 40rem;
    margin: 0 auto 3rem;
    font-size: var(--fs-p3);
    line-height: 1.6;
}

.page-template-template-support-supporters .hs-sup__intro p {
    margin: 0;
}

/* ============================================================
   §1 Hero — full-bleed plum -> charcoal gratitude band
   ============================================================ */
.page-template-template-support-supporters .hs-sup-hero {
    background: linear-gradient(135deg, var(--plum) 0%, var(--charcoal) 100%);
    color: var(--color-on-dark);
    text-align: center;
    padding-block: clamp(4rem, 10vw, 7rem);
}

.page-template-template-support-supporters .hs-sup-hero__inner {
    max-width: 46rem;
    text-align: center;
}

.page-template-template-support-supporters .hs-sup-hero__eyebrow {
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: .8rem;
    font-weight: 600;
    color: var(--sky);
    margin: 0 0 1rem;
}

.page-template-template-support-supporters .hs-sup-hero__title {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: none;
    color: var(--color-white);
    font-size: clamp(2.4rem, 6vw, 3.75rem);
    line-height: 1.02;
    margin: 0 0 1.25rem;
    overflow-wrap: break-word;
}

.page-template-template-support-supporters .hs-sup-hero__lede {
    font-size: var(--fs-p2);
    line-height: 1.65;
    color: color-mix(in srgb, var(--color-on-dark) 82%, transparent);
    max-width: 40rem;
    margin: 0 auto 2.25rem;
}

.page-template-template-support-supporters .hs-sup-hero__lede p {
    margin: 0;
}

.page-template-template-support-supporters .hs-sup-hero__anchors {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

.page-template-template-support-supporters .hs-sup-hero__anchor {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid color-mix(in srgb, var(--sky) 40%, transparent);
    border-radius: 999px;
    padding: .6rem 1.4rem;
    font-size: .95rem;
    color: var(--sky);
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.page-template-template-support-supporters .hs-sup-hero__anchor:hover {
    background: color-mix(in srgb, var(--sky) 14%, transparent);
    border-color: color-mix(in srgb, var(--sky) 60%, transparent);
    color: var(--color-white);
}

/* ============================================================
   §2 Patrons — tier-tinted chip wall
   ============================================================ */
.page-template-template-support-supporters .hs-sup-patrons__tier {
    margin-top: 3rem;
}

.page-template-template-support-supporters .hs-sup-patrons__tier:first-of-type {
    margin-top: 2rem;
}

.page-template-template-support-supporters .hs-sup-patrons__label,
.page-template-template-support-supporters .hs-sup-sponsors__label {
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
    margin: 0 0 1.5rem;
    color: var(--label-color, var(--color-on-dark-muted));
}

.page-template-template-support-supporters .hs-sup-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-template-template-support-supporters .hs-sup-chip {
    font-family: var(--font-display);
    color: var(--chip-fg, var(--color-on-dark-muted));
    background: var(--chip-bg, transparent);
    border: 1px solid var(--chip-bd, transparent);
    border-radius: 999px;
    line-height: 1.15;
}

/* Descending chip sizes tier-to-tier */
.page-template-template-support-supporters .hs-sup-chips--xl {
    gap: .75rem;
}

.page-template-template-support-supporters .hs-sup-chips--xl .hs-sup-chip {
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    padding: .55rem 1.25rem;
}

.page-template-template-support-supporters .hs-sup-chips--md {
    gap: .625rem;
}

.page-template-template-support-supporters .hs-sup-chips--md .hs-sup-chip {
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    padding: .5rem 1rem;
}

.page-template-template-support-supporters .hs-sup-chips--sm {
    gap: .5rem;
}

.page-template-template-support-supporters .hs-sup-chips--sm .hs-sup-chip {
    font-size: .875rem;
    padding: .375rem .75rem;
}

/* Tier tints (gold / premium / neutral) */
.page-template-template-support-supporters .hs-sup-patrons__tier--gold {
    --chip-fg: color-mix(in srgb, var(--ochre), white 28%);
    --chip-bg: color-mix(in srgb, var(--ochre) 12%, transparent);
    --chip-bd: color-mix(in srgb, var(--ochre) 38%, transparent);
    --label-color: color-mix(in srgb, var(--ochre), white 12%);
}

.page-template-template-support-supporters .hs-sup-patrons__tier--premium {
    --chip-fg: var(--sky);
    --chip-bg: color-mix(in srgb, var(--sky) 10%, transparent);
    --chip-bd: color-mix(in srgb, var(--sky) 30%, transparent);
    --label-color: var(--sky);
}

.page-template-template-support-supporters .hs-sup-patrons__tier--neutral {
    --chip-fg: var(--color-on-dark-muted);
    --chip-bg: color-mix(in srgb, var(--color-on-dark) 6%, transparent);
    --chip-bd: color-mix(in srgb, var(--color-on-dark) 18%, transparent);
    --label-color: var(--color-on-dark-muted);
}

/* ============================================================
   §3 Sponsors — tier cards with letter-avatars
   ============================================================ */
.page-template-template-support-supporters .hs-sup-sponsors__tier {
    margin-top: 2.75rem;
}

.page-template-template-support-supporters .hs-sup-sponsors__tier:first-of-type {
    margin-top: 2rem;
}

.page-template-template-support-supporters .hs-sup-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
}

.page-template-template-support-supporters .hs-sup-card {
    flex: 0 1 240px;
    min-width: 200px;
    max-width: 100%;
    background: var(--card-bg, transparent);
    border: 1px solid var(--card-bd, transparent);
    border-radius: var(--radius-lg);
    padding: 2rem 1.75rem;
    text-align: center;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.page-template-template-support-supporters .hs-sup-card:hover {
    background: var(--card-bg-hover, var(--card-bg, transparent));
}

.page-template-template-support-supporters .hs-sup-card__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin: 0 auto .9rem;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-white) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-white) 12%, transparent);
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--card-accent, var(--color-on-dark));
}

.page-template-template-support-supporters .hs-sup-card__name {
    font-family: var(--font-display);
    font-size: var(--fs-p2);
    line-height: 1.2;
    color: var(--card-fg, var(--color-on-dark));
    margin: 0;
}

.page-template-template-support-supporters .hs-sup-card__tag {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--fs-p5);
    line-height: 1.35;
    color: var(--card-tag, var(--color-on-dark-muted));
    margin: .45rem 0 0;
}

/* Presenting sponsor: single, larger, centered card */
.page-template-template-support-supporters .hs-sup-card--presenting {
    flex: 0 1 30rem;
    max-width: 30rem;
    padding: 3rem 2.5rem;
}

.page-template-template-support-supporters .hs-sup-card--presenting .hs-sup-card__avatar {
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 1.2rem;
    border-radius: var(--radius-lg);
    font-size: 1.8rem;
}

.page-template-template-support-supporters .hs-sup-card--presenting .hs-sup-card__name {
    font-size: clamp(1.4rem, 3vw, 1.6rem);
    margin-bottom: .35rem;
}

.page-template-template-support-supporters .hs-sup-card--presenting .hs-sup-card__tag {
    font-size: var(--fs-p4);
}

/* Sponsor tier tints */
.page-template-template-support-supporters .hs-sup-sponsors__tier--presenting {
    --label-color: var(--sky);
    --card-bg: color-mix(in srgb, var(--sky) 9%, var(--charcoal));
    --card-bg-hover: color-mix(in srgb, var(--sky) 14%, var(--charcoal));
    --card-bd: color-mix(in srgb, var(--sky) 34%, transparent);
    --card-fg: var(--color-white);
    --card-accent: var(--sky);
    --card-tag: color-mix(in srgb, var(--sky), white 22%);
}

.page-template-template-support-supporters .hs-sup-sponsors__tier--gold {
    --label-color: color-mix(in srgb, var(--ochre), white 15%);
    --card-bg: color-mix(in srgb, var(--ochre) 12%, var(--charcoal));
    --card-bg-hover: color-mix(in srgb, var(--ochre) 18%, var(--charcoal));
    --card-bd: color-mix(in srgb, var(--ochre) 40%, transparent);
    --card-fg: color-mix(in srgb, var(--ochre), white 55%);
    --card-accent: color-mix(in srgb, var(--ochre), white 25%);
    --card-tag: color-mix(in srgb, var(--ochre), white 45%);
}

.page-template-template-support-supporters .hs-sup-sponsors__tier--silver {
    --label-color: var(--color-on-dark);
    --card-bg: color-mix(in srgb, var(--color-on-dark) 8%, var(--charcoal));
    --card-bg-hover: color-mix(in srgb, var(--color-on-dark) 13%, var(--charcoal));
    --card-bd: color-mix(in srgb, var(--color-on-dark) 22%, transparent);
    --card-fg: var(--color-on-dark);
    --card-accent: var(--color-on-dark-muted);
    --card-tag: var(--color-on-dark-muted);
}

.page-template-template-support-supporters .hs-sup-sponsors__tier--neutral {
    --label-color: var(--color-on-dark-muted);
    --card-bg: color-mix(in srgb, var(--color-on-dark) 5%, var(--charcoal));
    --card-bg-hover: color-mix(in srgb, var(--color-on-dark) 10%, var(--charcoal));
    --card-bd: color-mix(in srgb, var(--color-on-dark) 15%, transparent);
    --card-fg: var(--color-on-dark-muted);
    --card-accent: var(--color-on-dark-muted);
    --card-tag: var(--color-on-dark-muted);
}

/* ============================================================
   §4 Partners — plain name-card grid
   ============================================================ */
.page-template-template-support-supporters .hs-sup-partners__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.page-template-template-support-supporters .hs-sup-partner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 84px;
    padding: 1.5rem 1rem;
    text-align: center;
    background: color-mix(in srgb, var(--color-on-dark) 7%, var(--charcoal));
    border: 1px solid color-mix(in srgb, var(--color-on-dark) 16%, transparent);
    border-radius: var(--radius-lg);
    transition: background var(--transition-fast);
}

.page-template-template-support-supporters .hs-sup-partner:hover {
    background: color-mix(in srgb, var(--color-on-dark) 12%, var(--charcoal));
}

.page-template-template-support-supporters .hs-sup-partner__name {
    font-family: var(--font-display);
    font-size: var(--fs-p3);
    line-height: 1.3;
    color: var(--color-on-dark);
    margin: 0;
}

@media (min-width: 600px) {
    .page-template-template-support-supporters .hs-sup-partners__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .page-template-template-support-supporters .hs-sup-partners__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ============================================================
   §5 Join Our Community — light CTA band
   ============================================================ */
.page-template-template-support-supporters .hs-sup-join {
    background: var(--color-paper);
    color: var(--color-ink);
    text-align: center;
    padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.page-template-template-support-supporters .hs-sup-join__inner {
    max-width: 44rem;
    text-align: center;
}

.page-template-template-support-supporters .hs-sup-join__title {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: none;
    color: var(--plum);
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    line-height: 1.08;
    margin: 0 0 1rem;
}

.page-template-template-support-supporters .hs-sup-join__text {
    color: var(--color-muted);
    font-size: var(--fs-p2);
    line-height: 1.6;
    max-width: 40rem;
    margin: 0 auto 2.25rem;
}

.page-template-template-support-supporters .hs-sup-join__text p {
    margin: 0;
}

.page-template-template-support-supporters .hs-sup-join__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}


/* ==== VOLUNTEER (/support/volunteer) ==== */
/* All selectors namespaced under .page-template-template-support-volunteer.
   Tokens only. This block replaces the earlier off-brand-indigo mapping wholesale:
   the page now speaks the same on-brand visual language as Home (Vatican/Crimson/
   Inconsolata type, clay/plum/stone/ochre palette, torn-paper bands, photo-collage
   hero, manicule text-link buttons). The .home-scoped shell/band/manicule/collage
   mechanisms in site.css are re-declared here under the page body class because
   they never match on a non-.home page — this block is fully self-contained. */

.page-template-template-support-volunteer {
    overflow-x: clip;
    max-width: 100%;
    background: var(--color-paper);
}

/* Whole-page faint paper texture (mirrors .home::before) */
.page-template-template-support-volunteer::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url("../img/collage/texture-paper-grey.webp") center / cover;
    opacity: .05;
    mix-blend-mode: darken;
}

/* ---- Section shell (re-declared; .hs/.hs__inner are .home-scoped upstream) ---- */
.page-template-template-support-volunteer .hs {
    position: relative;
}
.page-template-template-support-volunteer .hs__inner {
    position: relative;
    width: 100%;
    max-width: var(--max-wide);
    margin-inline: auto;
    padding-inline: var(--space-page);
    z-index: 2;
}
.page-template-template-support-volunteer .hs__center {
    text-align: center;
}

/* Display headings never force horizontal overflow on narrow screens */
.page-template-template-support-volunteer .hs-volunteer_hero__title,
.page-template-template-support-volunteer .hs-volunteer_why__title,
.page-template-template-support-volunteer .hs-volunteer_roles__title,
.page-template-template-support-volunteer .hs-volunteer_time__title,
.page-template-template-support-volunteer .hs-volunteer_apply__title,
.page-template-template-support-volunteer .hs-volunteer_learn_more__title {
    overflow-wrap: break-word;
}

/* ---- Shared page components (Home parity, re-declared page-scoped) ---- */

/* Eyebrow / label — Inconsolata caps */
.page-template-template-support-volunteer .hs-eyebrow {
    margin: 0;
    font-family: var(--font-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-size: var(--fs-h5);
    color: var(--clay);
}

/* CSS-drawn ornamental flourish (dot + split rule), same recipe as Home hero */
.page-template-template-support-volunteer .hs-flourish {
    display: block;
    width: clamp(140px, 20vw, 200px);
    height: 12px;
    color: var(--ochre);
    background:
        radial-gradient(circle at 50% 50%, currentColor 0 3px, transparent 3.5px),
        linear-gradient(to right, currentColor 0 44%, transparent 44% 56%, currentColor 56% 100%);
    background-repeat: no-repeat;
    background-position: center, center;
    background-size: 12px 12px, 100% 2px;
}

/* Manicule text-link button (label + pointing-hand mask + hairline rule).
   The hand is a <span> masked to the button's currentColor so it tints clay on
   light backgrounds (the raw Manicule.svg is stone, built for dark bands). */
.page-template-template-support-volunteer .btn-manicule {
    display: inline-flex;
    flex-direction: column;
    gap: .375rem;
    text-decoration: none;
    color: var(--clay);
}
.page-template-template-support-volunteer .btn-manicule__row {
    display: inline-flex;
    align-items: center;
    gap: .9375rem;
}
.page-template-template-support-volunteer .btn-manicule__label {
    font-family: var(--font-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-size: var(--fs-h7);
    color: currentColor;
}
.page-template-template-support-volunteer .btn-manicule__icon {
    display: block;
    width: 48px;
    height: 17px;
    flex: none;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.page-template-template-support-volunteer .btn-manicule__rule {
    width: 100%;
    height: 1px;
    background: currentColor;
    opacity: .5;
}
.page-template-template-support-volunteer .btn-manicule:hover {
    color: var(--clay-hover);
}

/* Torn-edge band mechanism (re-declared; .home-scoped upstream). Mask
   technique shared with conference-theme: stone page-paper strips masked by
   the shared torn-edge SVGs tear into the coloured band. */
.page-template-template-support-volunteer .hs-band {
    position: relative;
}
.page-template-template-support-volunteer .hs-band__edge {
    position: absolute;
    left: 0;
    width: 100%;
    height: clamp(22px, 3.5vw, 44px);
    z-index: 3;
    pointer-events: none;
    background-color: var(--stone);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-image: url("../img/collage/torn-paper-edge-b.svg");
    mask-image: url("../img/collage/torn-paper-edge-b.svg");
}
.page-template-template-support-volunteer .hs-band__edge--top {
    top: -1px;
}
.page-template-template-support-volunteer .hs-band__edge--bottom {
    bottom: -1px;
    -webkit-mask-image: url("../img/collage/torn-paper-edge-a.svg");
    mask-image: url("../img/collage/torn-paper-edge-a.svg");
    transform: scaleY(-1);
}

/* Collage layer helper */
.page-template-template-support-volunteer .collage {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.page-template-template-support-volunteer .collage__item {
    position: absolute;
}
.page-template-template-support-volunteer .collage img {
    display: block;
    width: 100%;
    height: auto;
}
.page-template-template-support-volunteer .collage--multiply {
    mix-blend-mode: multiply;
}

/* ============================================================
   §2 Hero — paper bg, left-aligned copy, right photo collage
   ============================================================ */
.page-template-template-support-volunteer .hs-volunteer_hero {
    position: relative;
}
.page-template-template-support-volunteer .hs-volunteer_hero__inner {
    display: flex;
    align-items: center;
    min-height: clamp(420px, 42vw, 600px);
    padding-block: clamp(2.25rem, 5vw, 4rem);
}
.page-template-template-support-volunteer .hs-volunteer_hero__copy {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 560px;
}
.page-template-template-support-volunteer .hs-volunteer_hero__eyebrow {
    margin: 0 0 1.25rem;
}
.page-template-template-support-volunteer .hs-volunteer_hero__title {
    margin: 0;
    max-width: 34rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h1);
    line-height: 1;
    text-transform: uppercase;
    color: var(--plum);
}
.page-template-template-support-volunteer .hs-volunteer_hero__flourish {
    margin: clamp(1rem, 2.4vw, 1.75rem) 0 clamp(1.1rem, 2.4vw, 1.6rem);
}
.page-template-template-support-volunteer .hs-volunteer_hero__lede {
    margin: 0;
    max-width: 34.5rem;
    font-family: var(--font-body);
    font-size: var(--fs-p1);
    line-height: 1.6;
    color: var(--charcoal);
}

/* Collage — bleeds off the right edge of the content column */
.page-template-template-support-volunteer .hs-volunteer_hero__collage {
    right: auto;
    left: 50%;
    width: min(100%, var(--max-wide));
    transform: translateX(-50%);
}
.page-template-template-support-volunteer .hs-volunteer_hero__block {
    top: 20%;
    right: 30%;
    width: clamp(120px, 15vw, 190px);
    aspect-ratio: 4 / 5;
    background: var(--clay);
    transform: rotate(-6deg);
    z-index: 2;
}
.page-template-template-support-volunteer .hs-volunteer_hero__hand {
    top: 8%;
    right: 2%;
    width: clamp(180px, 24vw, 320px);
    opacity: .3;
    transform: rotate(5deg);
    z-index: 1;
}
.page-template-template-support-volunteer .hs-volunteer_hero__church {
    right: 20%;
    bottom: -2%;
    width: clamp(170px, 23vw, 320px);
    z-index: 5;
}
.page-template-template-support-volunteer .hs-volunteer_hero__city {
    right: 1%;
    bottom: 4%;
    width: clamp(150px, 21vw, 290px);
    opacity: .9;
    z-index: 4;
}
.page-template-template-support-volunteer .hs-volunteer_hero__cactus {
    right: 38%;
    bottom: -3%;
    width: clamp(120px, 17vw, 225px);
    z-index: 6;
}
.page-template-template-support-volunteer .hs-volunteer_hero__notebook {
    right: 8%;
    bottom: 1%;
    width: clamp(150px, 20vw, 275px);
    transform: rotate(-5deg);
    z-index: 7;
}

/* ============================================================
   §3 Why Volunteer? — full-bleed plum band, torn edges,
   two-column heading-left / list-right split
   ============================================================ */
.page-template-template-support-volunteer .hs-volunteer_why {
    background: var(--plum);
    color: var(--color-on-dark);
    padding-block: clamp(3.5rem, 8vw, 5.5rem);
    overflow: hidden;
}
.page-template-template-support-volunteer .hs-volunteer_why__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
}
.page-template-template-support-volunteer .hs-volunteer_why__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h2);
    line-height: 1.08;
    text-transform: uppercase;
    /* Figma "Ochre/Light" #FFA423 has no exact token; closest is --ochre. */
    color: var(--ochre);
}
.page-template-template-support-volunteer .hs-volunteer_why__list ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: clamp(.6rem, 1.5vw, 1rem);
}
.page-template-template-support-volunteer .hs-volunteer_why__list li {
    position: relative;
    padding-left: 1.5rem;
    font-size: var(--fs-p2);
    line-height: 1.5;
    color: var(--color-on-dark);
}
.page-template-template-support-volunteer .hs-volunteer_why__list li::before {
    content: "";
    position: absolute;
    left: .1rem;
    top: .6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
/* Tolerate richer client copy (intro ¶ + sub-headings) without breaking */
.page-template-template-support-volunteer .hs-volunteer_why__list > * + * {
    margin-top: 1.25rem;
}
.page-template-template-support-volunteer .hs-volunteer_why__list p {
    margin: 0;
    color: var(--color-on-dark);
    line-height: 1.6;
}
.page-template-template-support-volunteer .hs-volunteer_why__list h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h4);
    line-height: 1.2;
    color: var(--ochre);
}

/* ============================================================
   §4 Volunteer Roles — 3-up + 2-up borderless stone cards
   ============================================================ */
.page-template-template-support-volunteer .hs-volunteer_roles {
    padding-block: clamp(3rem, 7vw, 5rem);
}
.page-template-template-support-volunteer .hs-volunteer_roles__title {
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h3);
    line-height: 1.08;
    text-transform: uppercase;
    color: var(--plum);
}
.page-template-template-support-volunteer .hs-volunteer_roles__grid {
    /* Flex (not grid) so a partial trailing row — e.g. 11 cards = 3+3+3+2 —
       centres its leftover cards instead of hanging left. Card basis matches a
       3-up track so full rows still fill the 62rem width; robust to any count. */
    --roles-gap: clamp(1rem, 2.5vw, 1.5rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--roles-gap);
    max-width: 62rem;
    margin-inline: auto;
}
.page-template-template-support-volunteer .hs-volunteer_role {
    /* 3-up basis; −0.5px guards against sub-pixel wrap on exact-fit rows. */
    flex: 0 1 calc((100% - 2 * var(--roles-gap)) / 3 - 0.5px);
    padding: clamp(1.5rem, 3vw, 2rem);
    border-radius: var(--radius-lg);
    background: var(--stone-dark);
}
.page-template-template-support-volunteer .hs-volunteer_role__icon {
    display: block;
    width: 44px;
    height: 44px;
    margin-bottom: 1.1rem;
    background-color: var(--charcoal);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left center;
    mask-position: left center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.page-template-template-support-volunteer .hs-volunteer_role__title {
    margin: 0 0 .5rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h4);
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--charcoal);
}
.page-template-template-support-volunteer .hs-volunteer_role__text {
    margin: 0;
    font-size: var(--fs-p5);
    line-height: 1.6;
    color: var(--color-muted);
}

/* ============================================================
   §5 Time Commitment — full-bleed ochre band, torn edges
   ============================================================ */
.page-template-template-support-volunteer .hs-volunteer_time {
    background: var(--ochre);
    padding-block: clamp(3rem, 7vw, 4.5rem);
    overflow: hidden;
}
.page-template-template-support-volunteer .hs-volunteer_time__inner {
    max-width: 52rem;
    text-align: center;
}
.page-template-template-support-volunteer .hs-volunteer_time__title {
    margin: 0 0 1rem;
    font-family: var(--font-label);
    font-weight: 600;
    font-size: var(--fs-h6);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps-wide);
    color: var(--plum-dark);
}
.page-template-template-support-volunteer .hs-volunteer_time__body p {
    margin: 0;
    font-size: var(--fs-p2);
    line-height: 1.6;
    color: var(--plum-dark);
}
.page-template-template-support-volunteer .hs-volunteer_time__body strong {
    font-weight: 700;
}

/* ============================================================
   §6 Apply to Volunteer — stone-dark panel, "fill-in-the-blank"
   underline fields, styled day picker + role select, manicule submit
   ============================================================ */
.page-template-template-support-volunteer .hs-volunteer_apply {
    padding-block: clamp(3rem, 7vw, 5rem);
}
.page-template-template-support-volunteer .hs-volunteer_apply__inner {
    max-width: 60rem;
}
.page-template-template-support-volunteer .hs-volunteer_apply__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem 2rem;
    margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.page-template-template-support-volunteer .hs-volunteer_apply__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h3);
    line-height: 1.08;
    text-transform: uppercase;
    color: var(--plum);
}
.page-template-template-support-volunteer .hs-volunteer_apply__intro {
    margin: 0;
    max-width: 22rem;
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--fs-p2);
    line-height: 1.35;
    color: var(--plum-light);
    text-align: right;
}

/* Filled rounded panel wrapping the whole form */
.page-template-template-support-volunteer .hs-volunteer_apply__panel {
    background: var(--stone-dark);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 4vw, 3rem);
}
.page-template-template-support-volunteer .hs-volunteer_apply__form {
    display: grid;
    gap: clamp(1.5rem, 3.5vw, 2.25rem);
}

/* Underline "fill-in-the-blank" field: italic Crimson label above a
   borderless uppercase Inconsolata value line with a hairline rule under. */
.page-template-template-support-volunteer .hs-volunteer_apply__field {
    margin: 0;
    display: grid;
    gap: .6rem;
}
.page-template-template-support-volunteer .hs-volunteer_apply__label {
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 600;
    font-size: var(--fs-p3);
    line-height: 1.2;
    color: var(--plum-light);
}
.page-template-template-support-volunteer .hs-volunteer_apply__input,
.page-template-template-support-volunteer .hs-volunteer_apply__select,
.page-template-template-support-volunteer .hs-volunteer_apply__textarea {
    width: 100%;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--plum-light) 45%, transparent);
    border-radius: 0;
    background: transparent;
    padding: .5rem 0;
    font-family: var(--font-label);
    font-weight: 400;
    font-size: var(--fs-h5);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--plum-dark);
}
.page-template-template-support-volunteer .hs-volunteer_apply__textarea {
    min-height: 8.5rem;
    resize: vertical;
    line-height: 1.6;
}
.page-template-template-support-volunteer .hs-volunteer_apply__input::placeholder,
.page-template-template-support-volunteer .hs-volunteer_apply__textarea::placeholder {
    color: var(--plum-light);
    opacity: 1;
    text-transform: uppercase;
}
.page-template-template-support-volunteer .hs-volunteer_apply__input:focus,
.page-template-template-support-volunteer .hs-volunteer_apply__select:focus,
.page-template-template-support-volunteer .hs-volunteer_apply__textarea:focus {
    outline: none;
    border-bottom-color: var(--clay);
}

/* Preferred Role — real <select> skinned to the underline line + plus glyph */
.page-template-template-support-volunteer .hs-volunteer_apply__select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 1.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' stroke='%236c444b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .1rem center;
    cursor: pointer;
}

/* Days Available — visually-hidden native checkboxes, styled text labels.
   Selected day renders clay / bold / underlined; the row carries a rule under. */
.page-template-template-support-volunteer .hs-volunteer_apply__days {
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    gap: .6rem;
}
.page-template-template-support-volunteer .hs-volunteer_apply__days-legend {
    padding: 0;
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 600;
    font-size: var(--fs-p3);
    color: var(--plum-light);
}
.page-template-template-support-volunteer .hs-volunteer_apply__daylist {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.75rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid color-mix(in srgb, var(--plum-light) 45%, transparent);
}
.page-template-template-support-volunteer .hs-volunteer_apply__day {
    display: inline-flex;
    cursor: pointer;
}
.page-template-template-support-volunteer .hs-volunteer_apply__day-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.page-template-template-support-volunteer .hs-volunteer_apply__day-text {
    font-family: var(--font-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-size: var(--fs-h7);
    color: var(--plum-light);
}
.page-template-template-support-volunteer .hs-volunteer_apply__day-input:checked + .hs-volunteer_apply__day-text {
    color: var(--clay);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.page-template-template-support-volunteer .hs-volunteer_apply__day-input:focus-visible + .hs-volunteer_apply__day-text {
    outline: 2px solid var(--clay);
    outline-offset: 3px;
}

/* Submit — manicule text link, right-aligned */
.page-template-template-support-volunteer .hs-volunteer_apply__actions {
    margin: 0;
    display: flex;
    justify-content: flex-end;
}
.page-template-template-support-volunteer .hs-volunteer_apply__submit {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

/* ============================================================
   §7 Learn-more CTA — no band, plum heading, manicule link
   ============================================================ */
.page-template-template-support-volunteer .hs-volunteer_learn_more {
    padding-block: clamp(2.5rem, 6vw, 4rem);
    text-align: center;
}
.page-template-template-support-volunteer .hs-volunteer_learn_more__title {
    margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h3);
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--plum);
}
.page-template-template-support-volunteer .hs-volunteer_learn_more__action {
    display: flex;
    justify-content: center;
    margin: 0;
}

/* ============================================================
   Responsive — stack below 900px
   ============================================================ */
@media (max-width: 900px) {
    .page-template-template-support-volunteer .hs-volunteer_hero__inner {
        display: block;
        min-height: 0;
        padding-block: clamp(2rem, 8vw, 3rem);
    }
    .page-template-template-support-volunteer .hs-volunteer_hero__copy,
    .page-template-template-support-volunteer .hs-volunteer_hero__title,
    .page-template-template-support-volunteer .hs-volunteer_hero__lede {
        max-width: none;
    }
    .page-template-template-support-volunteer .hs-volunteer_hero__collage {
        display: none;   /* heavy decorative collage bleeds off-canvas; drop on mobile */
    }
    .page-template-template-support-volunteer .hs-volunteer_why__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(1.25rem, 5vw, 2rem);
    }
    .page-template-template-support-volunteer .hs-volunteer_roles__grid {
        max-width: 30rem;
    }
    .page-template-template-support-volunteer .hs-volunteer_role {
        flex-basis: 100%;   /* single column on mobile (flex container) */
    }
    .page-template-template-support-volunteer .hs-volunteer_apply__head {
        flex-direction: column;
        align-items: flex-start;
    }
    .page-template-template-support-volunteer .hs-volunteer_apply__intro {
        text-align: left;
        max-width: none;
    }
}

/* ==== LEGAL (/privacy, /terms) ==== */

/* One template, two pages (Privacy Policy + Terms & Conditions). A plain
   document header over a narrow prose column of H2 + paragraph blocks. The
   `.hs` / `.hs__inner` shell is only styled under `.home` globally, so this
   template supplies its own centered NARROW inner container + the hero/body
   padding split that makes both sections read as one continuous light band
   (matching the prototype's single `py-24` container). Everything is namespaced
   under the page body class so nothing leaks. */
.page-template-template-legal .hs { position: relative; }
.page-template-template-legal .hs__inner {
    width: min(100% - (var(--space-page) * 2), var(--max-narrow));
    margin-inline: auto;
}

/* Hero: top page padding only; the gap down to the first heading lives on the
   body's top padding so there is no double gap or margin-collapse across the
   two sections. Body: no top page padding, normal bottom page padding. */
.page-template-template-legal .hs-legal_hero {
    padding: clamp(3rem, 7vw, 6rem) 0 0;
}
.page-template-template-legal .hs-legal_body {
    padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 7vw, 6rem);
}

/* ---- §1 Document header ---- */
/* Plain, left-aligned, sentence-case serif H1 (~48px). No existing token/class
   fits: --fs-h1 is uppercase 72px; the local clamp mirrors the map's proposed
   --fs-h1-legal. Base h1 already supplies --font-display / weight 500 / no
   text-transform, so only size + rhythm are set here. */
.page-template-template-legal .legal-hero__title {
    margin: 0 0 1rem;
    font-size: clamp(1.875rem, 5vw, 3rem);
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--color-ink);
}
.page-template-template-legal .legal-hero__updated {
    margin: 0;
    font-size: var(--fs-p4);
    color: var(--color-muted);
}

/* ---- §2 Prose column ---- */
/* Flat H2/P rhythm shared by baked fallback copy and editor content:
   2rem before each section heading (the prototype's space-y-8 between blocks),
   0.75rem from a heading to its paragraph (mb-3). Section H2s are sentence-case
   here — the shared .t-h3 utility is deliberately NOT used because it forces
   uppercase, which is wrong for legal headings. */
.page-template-template-legal .legal-prose > :first-child {
    margin-top: 0;
}
.page-template-template-legal .legal-prose h2 {
    margin: 2rem 0 0.75rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h3);
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-ink);
}
.page-template-template-legal .legal-prose p {
    margin: 0;
    font-size: var(--fs-p3);
    line-height: 1.7;
    color: var(--color-ink);
}
/* Multi-paragraph safety for editor-authored content (baked copy is one P per
   block, but a client may paste several paragraphs under a heading). */
.page-template-template-legal .legal-prose p + p {
    margin-top: 1rem;
}
.page-template-template-legal .legal-prose a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.page-template-template-legal .legal-prose a:hover {
    color: var(--color-accent-dark);
}

/* Lists, blockquotes, etc. from editor content inherit the block rhythm. */
.page-template-template-legal .legal-prose ul,
.page-template-template-legal .legal-prose ol {
    margin: 0.75rem 0 0;
    padding-inline-start: 1.25rem;
    font-size: var(--fs-p3);
    line-height: 1.7;
    color: var(--color-ink);
}
.page-template-template-legal .legal-prose li + li {
    margin-top: 0.35rem;
}

/* ==== SHARED CHROME (designer devsite Jul 2026) ==== */
/*
 * Sitewide chrome deltas harvested from the designer devsite. Append verbatim
 * to the END of institute-theme/assets/css/site.css. url() paths are relative
 * to that file's location (assets/css/), matching the existing convention
 * (e.g. ../img/collage/...). Tokens only; every selector is scoped to a chrome
 * element's own class so nothing leaks into page templates.
 *
 * ITEM 1 — Header "Donate" button: no CSS needed. The ghost/outline modifier was
 * removed in header.php so it renders as the base solid-clay .button, matching
 * "Register Now" (both solid Clay pills in Figma).
 */


/* ============================================================
   ITEM 2 — Community CTA band ("Join the Global Institute Community")
   Full-bleed sierra treatment mirroring the homepage .home .hs-cta band so the
   shared band (every secondary page) is visually identical to the homepage one.
   Scoped to .section--cta-community — added only when band => 'community'.
   Reuses the theme's existing mountains-color.webp (the same asset the homepage
   band uses) rather than a redundant duplicate under assets/img/cta/.
   ============================================================ */
.section--cta-community {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--clay);
    color: var(--color-on-dark);
}
.section--cta-community::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("../img/collage/mountains-color.webp") center bottom / cover no-repeat;
    mix-blend-mode: multiply;
    opacity: .9;
}
.section--cta-community::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--charcoal) 22%, transparent) 0%,
        color-mix(in srgb, var(--charcoal) 8%, transparent) 34%,
        color-mix(in srgb, var(--charcoal) 30%, transparent) 70%,
        color-mix(in srgb, var(--charcoal) 72%, transparent) 100%
    );
}
.section--cta-community .section__inner {
    position: relative;
    z-index: 2;
}

/* Torn top edge (stone-coloured, overlaps the light section above — matches the
   homepage band). The lone dark-above case is /support/ (its charcoal impact CTA
   precedes this band); the strip still reads as intentional torn paper there. */
.section--cta-community .cta-band__tear {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 48px;
    z-index: 4;
    pointer-events: none;
    background: var(--stone);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-image: url("../img/collage/torn-paper-edge-b.svg");
    mask-image: url("../img/collage/torn-paper-edge-b.svg");
}

/* Heading: display serif, uppercase (mirrors home .hs-h2 on-dark). */
.section--cta-community h2 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: var(--color-on-dark);
    max-width: 18em;
    margin-inline: auto;
}

/* Ornamental burst divider under the heading (same inline SVG as the homepage;
   inherits currentColor). */
.section--cta-community .cta-band__fleuron {
    display: block;
    line-height: 0;
    color: var(--color-on-dark);
    opacity: .9;
    margin: clamp(1rem, 2.2vw, 1.6rem) auto;
}
.section--cta-community .cta-band__fleuron svg {
    width: clamp(160px, 22vw, 220px);
    height: auto;
}

.section--cta-community p {
    max-width: 40rem;
    margin-inline: auto;
    font-size: var(--fs-p1);
    line-height: 1.6;
    color: var(--color-on-dark);
    text-wrap: balance;
}

/* Links: underlined uppercase mono text links (not outlined buttons). */
.section--cta-community .cta-band__links {
    gap: clamp(.9rem, 2.5vw, 1.25rem) clamp(1.5rem, 3.5vw, 2.75rem);
}
.section--cta-community .cta-band__link {
    font-family: var(--font-label);
    font-weight: 600;
    font-size: var(--fs-p3);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--color-on-dark);
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
    transition: var(--transition-fast);
}
.section--cta-community .cta-band__link:hover,
.section--cta-community .cta-band__link:focus-visible {
    color: var(--sky);
    text-underline-offset: 4px;
}
@media (max-width: 900px) {
    .section--cta-community .cta-band__links {
        flex-direction: column;
        align-items: center;
        gap: 1.1rem;
    }
}


/* ============================================================
   ITEM 3 — Rich footer restructure
   New columns: brand + LOCATION/CONTACT, large "Uniting the World Through
   Stories" wordmark, PROGRAMS + QUICK LINKS nav, Newsletter. Scoped to
   .site-footer(--rich) and its own descendants; overrides the earlier
   .footer-columns block by later source order.
   ============================================================ */
.site-footer--rich .footer-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.4fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.2fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}

/* Section labels → mono caps (Figma). Overrides the base .site-footer--rich h3. */
.site-footer--rich h3 {
    font-family: var(--font-label);
    font-size: var(--fs-h7);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps-wide);
    color: #fff;
    margin: 0 0 1rem;
}

.site-footer--rich .footer-intro {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.site-footer--rich .footer-intro__tagline {
    margin: 0;
    max-width: 34ch;
    line-height: 1.6;
}
.site-footer--rich .footer-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: .25rem;
}
.site-footer--rich .footer-address {
    font-style: normal;
    line-height: 1.7;
    font-size: .9rem;
}
.site-footer--rich .footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    font-size: .9rem;
}

/* Large display wordmark (styled text — no harvested SVG matched it). */
.site-footer--rich .footer-wordmark {
    margin: 0;
    align-self: center;
    display: flex;
    flex-direction: column;
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    line-height: .92;
    letter-spacing: .01em;
    font-size: clamp(2.2rem, 4.4vw, 3.75rem);
    color: var(--color-on-dark);
}
.site-footer--rich .footer-wordmark__line {
    display: block;
}
.site-footer--rich .footer-wordmark__sm {
    font-size: .4em;
    letter-spacing: .14em;
    color: var(--color-on-dark-muted);
}

.site-footer--rich .footer-col--newsletter p {
    margin: 0 0 1rem;
    font-size: .9rem;
    line-height: 1.6;
}

@media (max-width: 1100px) {
    .site-footer--rich .footer-columns {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .site-footer--rich .footer-intro,
    .site-footer--rich .footer-wordmark {
        grid-column: 1 / -1;
    }
    .site-footer--rich .footer-wordmark {
        align-self: start;
    }
}
@media (max-width: 640px) {
    .site-footer--rich .footer-columns {
        grid-template-columns: 1fr 1fr;
    }
    .site-footer--rich .footer-meta {
        grid-template-columns: 1fr 1fr;
    }
    .site-footer--rich .footer-col--newsletter {
        grid-column: 1 / -1;
    }
}