/*
Theme Name: Cross Timbers
Theme URI: https://arlingtonconservationcouncil.org
Author: Parker Strode
Description: Block theme for the Arlington Conservation Council — named for the belt of post oak and blackjack woodland Arlington sits in. Mobile and tablet first, sticky thin navbar, editable throughout via the block editor.
Version: 0.3.2
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cross-timbers
Tags: block-theme, full-site-editing, custom-colors, custom-menu
*/

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; height: auto; display: block; }

/* ============================================================
   Accessibility (WCAG 2.2 AA)
   ============================================================ */

/* Visible focus indicator for keyboard users — applies to every focusable
   element. 3:1 contrast against any background; offset so it doesn't get
   clipped inside overflow:hidden parents. (WCAG 2.4.7, 2.4.11) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--wp--preset--color--accent);
    outline-offset: 2px;
    border-radius: 2px;
    box-shadow: 0 0 0 5px var(--wp--preset--color--primary-dark, #0d2614);
}

/* Screen-reader-only utility */
.screen-reader-text,
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}
.screen-reader-text:focus,
.sr-only:focus {
    position: fixed !important;
    top: 1rem; left: 1rem;
    width: auto; height: auto;
    padding: 0.75rem 1rem; margin: 0; clip: auto;
    background: var(--wp--preset--color--background);
    color: var(--wp--preset--color--primary);
    border: 2px solid var(--wp--preset--color--primary);
    z-index: 100000;
    text-decoration: underline;
}

/* Minimum touch-target size (WCAG 2.5.8) — 24x24 CSS px min, 44 recommended */
.wp-block-navigation a,
.wp-block-navigation button,
.wp-block-button__link,
.acc-blog-pagination a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* Honor user contrast / motion / transparency preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}
@media (prefers-contrast: more) {
    :root {
        --wp--preset--color--muted: #2a2820;
        --wp--preset--color--border: #5b5847;
    }
    a { text-decoration: underline !important; }
}

/* Ensure inline links inside body copy are distinguishable beyond color
   alone (WCAG 1.4.1 — use of color) */
.wp-block-post-content a,
.entry-content a,
p a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
}
/* Card-style links carry their own affordance (thumbnail, hover lift) —
   the body-copy underline rule above must not apply to them */
.wp-block-post-content a.acc-video-card,
.entry-content a.acc-video-card {
    text-decoration: none;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern", "liga", "calt", "ss01";
    text-rendering: optimizeLegibility;
}

/* ============================================================
   Global typography polish (applies site-wide; no layout shift)
   ============================================================ */
.wp-block-heading {
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: auto;
}
p {
    text-wrap: pretty;
}

/* Body paragraphs in flowing content: comfortable measure */
.wp-block-post-content > p,
.entry-content > p {
    max-width: 68ch;
}

/* Lead paragraph utility — first paragraph after an h1/h2 reads larger */
.wp-block-post-content > h1 + p,
.wp-block-post-content > h2 + p,
.entry-content > h1 + p,
.entry-content > h2 + p {
    font-size: var(--wp--preset--font-size--lg);
    color: var(--wp--preset--color--foreground);
}

/* Larger size utilities feel like display copy */
.has-x-large-font-size,
.has-xx-large-font-size {
    line-height: 1.25;
    letter-spacing: -0.005em;
}

/* Lists inherit the larger body size */
.wp-block-list li {
    line-height: 1.6;
}

/* Tighten ALL-CAPS eyebrow style headings used in patterns */
.wp-block-heading[style*="text-transform:uppercase"],
.wp-block-heading[style*="text-transform: uppercase"] {
    letter-spacing: 0.06em;
    line-height: 1.15;
}

/* ============================================================
   Sticky thin navbar
   position:sticky needs the scroll ancestor to NOT clip overflow.
   Template-part renders as <header class="wp-block-template-part">,
   so sticky lives on THAT element, not the inner pattern group.
   ============================================================ */
html, body { overflow-x: clip; }
html { scroll-padding-top: 80px; }

.wp-site-blocks > header,
header.wp-block-template-part {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--wp--preset--color--background);
    border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Offset for WP admin bar */
body.admin-bar .wp-site-blocks > header,
body.admin-bar header.wp-block-template-part {
    top: 32px;
}
@media (max-width: 782px) {
    body.admin-bar .wp-site-blocks > header,
    body.admin-bar header.wp-block-template-part {
        top: 46px;
    }
}

.acc-sticky-header {
    background: var(--wp--preset--color--background);
    /* override theme.json blockGap padding for thin profile.
       Padding trimmed to offset the larger logo so total navbar
       height stays nearly the same. */
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
}

/* Logo has tall tree canopy that pushes its bounding-box center up. Align nav
   to the "ACC" wordmark baseline (lower portion of logo) instead of geometric
   center so the visual weight reads aligned. */
.acc-sticky-header .acc-header-bar {
    gap: var(--wp--preset--spacing--30);
    align-items: center !important;
}
.acc-sticky-header .acc-header-logo,
.acc-sticky-header .wp-block-site-logo {
    align-self: center !important;
}
.acc-sticky-header .acc-main-nav,
.acc-sticky-header .acc-main-nav .wp-block-navigation__container,
.acc-sticky-header .wp-block-navigation__container {
    align-items: center !important;
}
.acc-sticky-header .acc-main-nav {
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}
.acc-sticky-header .acc-main-nav .wp-block-navigation__container {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100%;
    line-height: 1;
}
.acc-sticky-header .acc-main-nav .wp-block-navigation-item,
.acc-sticky-header .acc-main-nav .wp-block-navigation__container > li {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    line-height: 1;
}
.acc-sticky-header .acc-main-nav .wp-block-navigation-item__content {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
/* Larger, more widely spaced primary nav links. Spacing lives in the gap and
   font-size only — vertical padding stays minimal so the bar remains thin. */
.acc-sticky-header .acc-main-nav .wp-block-navigation__container {
    gap: clamp(0.4rem, 0.05rem + 1.2vw, 1.3rem) !important;
}
.acc-sticky-header .acc-main-nav .wp-block-navigation-item__content {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.015em;
}

.acc-sticky-header .acc-header-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    text-decoration: none;
}
.acc-sticky-header .acc-header-logo img,
.acc-sticky-header .wp-block-site-logo img {
    height: 66px;
    width: auto;
    max-width: none;
}

/* Site search in header — keep logo left, push nav + search to the right.
   Search is an icon-only button so the bar stays thin. */
.acc-sticky-header .acc-main-nav {
    margin-left: auto !important;
}
.acc-sticky-header .acc-header-search {
    display: inline-flex;
    align-items: center;
    margin: 0;
}
.acc-sticky-header .acc-header-search .wp-block-search__inside-wrapper {
    border: 0;
    margin: 0;
}
.acc-sticky-header .acc-header-search .wp-block-search__button {
    background: transparent;
    color: var(--wp--preset--color--primary);
    border: 0;
    margin: 0;
    padding: 0.35rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    transition: background 140ms ease, color 140ms ease;
}
.acc-sticky-header .acc-header-search .wp-block-search__button:hover,
.acc-sticky-header .acc-header-search .wp-block-search__button:focus-visible {
    background: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--primary-light);
}
.acc-sticky-header .acc-header-search .wp-block-search__button svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* Active nav item — never underlined (Frank's call). In the bar the pill is
   the whole signal: bolding as well bumped the item a weight and nudged its
   neighbours sideways, and the oval alone reads better. Inside a dropdown and
   in the mobile panel there is no pill, so weight still does the work there. */
.acc-main-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.acc-main-nav .wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content,
.acc-main-nav .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content,
.acc-main-nav .wp-block-navigation-item__content[aria-current],
.acc-main-nav a[aria-current="page"] {
    text-decoration: none !important;
}
.acc-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.acc-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
    font-weight: 800 !important;
}

/* Bold alone was too quiet to answer "where am I?", so the current section
   also gets a soft pill in the bar. Every top-level link carries the same
   horizontal padding, so marking one current shifts nothing; the container
   gap above was trimmed by the same amount to keep the bar's rhythm. The
   padding sits on the list item, not the link, so a dropdown parent's
   chevron falls inside its pill rather than beside it.
   A page reached from a dropdown highlights its parent, because that is the
   only part of the section the visitor can see. */
.acc-sticky-header .acc-main-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > li {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
    border-radius: 999px;
    transition: background 140ms ease;
}
.acc-sticky-header .acc-main-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > li.current-menu-item,
.acc-sticky-header .acc-main-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > li.current-menu-ancestor {
    background: var(--wp--preset--color--surface);
}
.acc-sticky-header .acc-main-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > li.current-menu-item > .wp-block-navigation-item__content,
.acc-sticky-header .acc-main-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > li.current-menu-ancestor > .wp-block-navigation-item__content {
    color: var(--wp--preset--color--primary-dark) !important;
}

/* The current page inside an open dropdown — tinted row with an accent edge,
   so the section pill in the bar and the exact page agree with each other. */
.acc-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
    background: var(--wp--preset--color--surface);
    box-shadow: inset 3px 0 0 var(--wp--preset--color--accent);
}

/* Footer logo — invert to read on dark primary background */
.acc-footer .acc-footer-logo img,
.acc-footer .wp-block-site-logo img {
    max-width: 240px;
    width: 100%;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

/* Hamburger overlay tweaks (mobile nav) */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open.has-background {
    background-color: var(--wp--preset--color--primary) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding-top: var(--wp--preset--spacing--50);
}
/* Mobile overlay: light, readable text on the green panel */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    color: var(--wp--preset--color--background) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
    color: var(--wp--preset--color--background) !important;
}
/* Top-level items = section headers */
.wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff !important;
}
/* Sub-items: softer, indented */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    color: rgba(246, 248, 246, 0.82) !important;
    font-size: 1rem !important;
}

/* ============================================================
   Kill gap between sticky header and hero
   ============================================================ */
.wp-site-blocks > header + main,
.wp-site-blocks > main {
    margin-top: 0 !important;
}
.wp-site-blocks > main > :first-child {
    margin-top: 0 !important;
}

/* ============================================================
   Hero (core/cover) — legacy single-image variant
   ============================================================ */
.acc-hero {
    min-height: 42vh !important;
    padding-top: var(--wp--preset--spacing--50) !important;
    padding-bottom: var(--wp--preset--spacing--50) !important;
    position: relative;
    isolation: isolate;
}
.acc-hero .wp-block-cover__inner-container {
    width: 100%;
}
@media (min-width: 768px) {
    .acc-hero {
        min-height: 52vh !important;
    }
}

/* Hero typography — display heading, generous subtitle */
.acc-hero h1.wp-block-heading {
    font-size: clamp(2rem, 1.45rem + 2.4vw, 3.75rem) !important;
    letter-spacing: 0.01em;
    line-height: 1.02 !important;
    text-wrap: balance;
}
.acc-hero p {
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.3125rem) !important;
    line-height: 1.5 !important;
    max-width: 38ch;
    opacity: 0.95;
}

/* ============================================================
   Hero — 40/60 split variant (text panel + image)
   ============================================================ */
.acc-hero--split {
    min-height: 0 !important;
    padding: 0 !important;
    background: var(--wp--preset--color--primary);
    border-bottom: 3px solid #7fa86b;
}
.acc-hero--split .acc-hero__row {
    margin: 0 !important;
    gap: 0 !important;
}
.acc-hero--split .acc-hero__text {
    background-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--background);
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    align-self: stretch !important;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-top: var(--wp--preset--spacing--50) !important;
    /* clear the cards' overlap (mobile) below the CTAs */
    padding-bottom: calc(var(--wp--preset--spacing--60) + 2.5rem) !important;
    /* Align inner text start with site wide-container left edge */
    padding-left: max(var(--wp--preset--spacing--40), calc((100vw - var(--wp--style--global--wide-size, 1280px)) / 2)) !important;
}
@media (min-width: 782px) {
    .acc-hero--split .acc-hero__text {
        justify-content: center;
        padding-top: var(--wp--preset--spacing--70) !important;
        /* Reserve > the cards' negative overlap (-5rem/-6rem) below the
           centered CTAs so the cards can never ride up over them on a
           short viewport. */
        padding-bottom: 8.5rem !important;
    }
}

/* Hero CTA button */
.acc-hero--split .acc-hero__text .acc-hero__cta {
    margin-top: var(--wp--preset--spacing--40);
}
.acc-hero--split .acc-hero__text .wp-block-button__link {
    background-color: var(--wp--preset--color--accent) !important;
    color: var(--wp--preset--color--primary) !important;
    border-radius: 999px !important;
    padding: 0.75rem 1.75rem !important;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: var(--wp--preset--font-size--sm);
    transition: background-color 0.18s ease, transform 0.18s ease;
    display: inline-block;
    border: none;
    text-decoration: none !important;
}
.acc-hero--split .acc-hero__text .wp-block-button__link:hover,
.acc-hero--split .acc-hero__text .wp-block-button__link:focus {
    background-color: #9bc188 !important;
    transform: translateY(-1px);
}
.acc-hero--split .acc-hero__row.are-vertically-aligned-stretch > .acc-hero__text,
.acc-hero--split .acc-hero__text.is-vertically-aligned-center {
    align-self: stretch !important;
}
/* Subtle layered tone on the text panel for depth */
.acc-hero--split .acc-hero__text::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at -10% 110%, rgba(19, 236, 19, 0.10), transparent 55%),
        radial-gradient(80% 60% at 110% -10%, rgba(255, 255, 255, 0.06), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.acc-hero--split .acc-hero__text > * {
    position: relative;
    z-index: 1;
}
.acc-hero--split .acc-hero__text h1.wp-block-heading {
    color: var(--wp--preset--color--background);
    margin: 0 0 var(--wp--preset--spacing--40) 0;
    text-wrap: balance;
    /* keep words whole — no mid-word hyphenation/break (e.g. "Conservation") */
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}
.acc-hero--split .acc-hero__text p {
    color: var(--wp--preset--color--background);
    max-width: 48ch;
    margin: 0;
    opacity: 0.92;
}
/* Slim accent rule under heading */
.acc-hero--split .acc-hero__text h1.wp-block-heading::after {
    content: "";
    display: block;
    width: 3rem;
    height: 3px;
    background: var(--wp--preset--color--accent);
    margin-top: var(--wp--preset--spacing--40);
    border-radius: 2px;
}

.acc-hero--split .acc-hero__media {
    padding: 0 !important;
    margin: 0 !important;
    align-self: stretch;
    background: var(--wp--preset--color--primary);
    position: relative;
}
.acc-hero--split .acc-hero__credit {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    margin: 0 !important;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem !important;
    letter-spacing: 0.01em;
    text-transform: none;
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(13, 38, 20, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: 2px;
    line-height: 1.2;
    z-index: 2;
    pointer-events: none;
}
.acc-hero--split .acc-hero__media .acc-hero__image,
.acc-hero--split .acc-hero__image {
    margin: 0;
    height: 100%;
    min-height: 280px;
}
.acc-hero--split .acc-hero__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Mobile: stack image first, then text */
@media (max-width: 781px) {
    .acc-hero--split .acc-hero__row {
        flex-direction: column-reverse;
    }
    .acc-hero--split .acc-hero__media .acc-hero__image,
    .acc-hero--split .acc-hero__image {
        min-height: 240px;
    }
}
/* Tablet and up: 40% green text panel, 60% image; equalize column heights */
@media (min-width: 782px) {
    .acc-hero--split .acc-hero__row {
        align-items: stretch;
        min-height: 50vh;
    }
    .acc-hero--split .acc-hero__text {
        flex-basis: 40% !important;
        max-width: 40%;
    }
    .acc-hero--split .acc-hero__media {
        flex-basis: 60% !important;
        max-width: 60%;
    }
    .acc-hero--split .acc-hero__text h1.wp-block-heading {
        font-size: clamp(2rem, 1.3rem + 2.2vw, 3.25rem) !important;
        line-height: 1.05 !important;
        max-width: 14ch;
    }
}

/* ============================================================
   Feature cards — green panel + image below, overlap upward into hero
   ============================================================ */
.acc-feature-cards {
    /* pull whole cards section up so panels overlap hero */
    margin-top: calc(var(--wp--preset--spacing--60) * -1) !important;
    position: relative;
    z-index: 2;
    isolation: isolate;
}
@media (min-width: 782px) {
    .acc-feature-cards {
        margin-top: -5rem !important;
    }
}
@media (min-width: 1100px) {
    .acc-feature-cards {
        margin-top: -6rem !important;
    }
}

/* Surface bg behind cards section — skips overlap area at top so hero stays clean */
.acc-feature-cards::before {
    content: "";
    position: absolute;
    inset: var(--wp--preset--spacing--60) 0 0 0;
    background: var(--wp--preset--color--surface);
    z-index: -1;
}
@media (min-width: 782px) {
    .acc-feature-cards::before {
        inset: 5rem 0 0 0;
    }
}
@media (min-width: 1100px) {
    .acc-feature-cards::before {
        inset: 6rem 0 0 0;
    }
}
/* Texture overlay on the cards' surface panel — matches the intro section.
   Mirrors ::before's inset; sits above the surface bg, behind the cards. */
.acc-feature-cards::after {
    content: "";
    position: absolute;
    inset: var(--wp--preset--spacing--60) 0 0 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("/wp-content/uploads/2026/03/concrete-wall.png");
    background-repeat: repeat;
    background-size: 600px auto;
    opacity: 0.55;
    mix-blend-mode: multiply;
}
@media (min-width: 782px) {
    .acc-feature-cards::after { inset: 5rem 0 0 0; }
}
@media (min-width: 1100px) {
    .acc-feature-cards::after { inset: 6rem 0 0 0; }
}

.acc-feature-cards__row {
    gap: var(--wp--preset--spacing--40);
    position: relative;
}

@media (min-width: 600px) {
    .acc-feature-cards__row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        align-items: stretch;
    }
    .acc-feature-card {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .acc-feature-card .acc-feature-card__image {
        margin-top: auto !important;
    }
}

.acc-feature-card {
    display: flex;
    flex-direction: column;
    border: 1.5px solid #2c5e34;
    border-radius: 8px;
    overflow: hidden;
    background: #eef2e8;
    box-shadow: 0 1px 2px rgba(28, 36, 24, 0.04);
}
.acc-feature-card__image {
    background: #eef2e8;
}
.acc-feature-card--upcoming .acc-feature-card__link {
    display: flex;
    flex-direction: column;
}
.acc-feature-card__panel,
.acc-feature-card__panel.has-leaf-background-color,
.acc-feature-card__panel.has-primary-background-color,
.acc-feature-card__panel.has-cedar-background-color {
    background-color: #eef2e8 !important;
    color: var(--wp--preset--color--foreground) !important;
    height: auto;
    padding: var(--wp--preset--spacing--40) !important;
    /* fill remaining card height so titles align top and CTA pins bottom */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.acc-feature-card__panel .wp-block-heading,
.acc-feature-card__panel .wp-block-heading.has-background-color {
    color: var(--wp--preset--color--primary) !important;
    margin-top: 0;
    width: 100%;
    font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem) !important;
    font-weight: 900 !important;
    line-height: 1.15;
    letter-spacing: 0.04em;
    /* Was `nowrap`: at 3-up tablet width the card is ~168px and
       "COMMUNITY SERVICE" is clipped by .acc-feature-card's overflow:hidden. */
    white-space: normal;
    overflow-wrap: break-word;
    text-wrap: balance;
    padding-bottom: var(--wp--preset--spacing--20);
    margin-bottom: var(--wp--preset--spacing--30);
    border-bottom: 1px solid rgba(26, 58, 31, 0.18);
}
.acc-feature-card__panel p,
.acc-feature-card__panel p.has-background-color {
    width: 100%;
    font-size: var(--wp--preset--font-size--sm);
    line-height: 1.55;
    margin: 0;
    color: var(--wp--preset--color--foreground) !important;
}
.acc-feature-card__image {
    margin: 0 !important;
    overflow: hidden;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    width: 100%;
    display: block;
    line-height: 0;
}
.acc-feature-card__image img {
    width: 100% !important;
    height: 100% !important;
    display: block;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    object-position: center;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}
.acc-feature-card:hover .acc-feature-card__image img,
.acc-feature-card__image:hover img {
    transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
    .acc-feature-card__image img { transition: none; }
    .acc-feature-card:hover .acc-feature-card__image img,
    .acc-feature-card__image:hover img { transform: none; }
}

/* Rotating image stack (Community Service + Advocacy cards). A core Gallery
   block with class `acc-rotator` — the board edits/reorders images normally;
   CSS crossfades them. Auto-play, not scroll-triggered. ~4s per image. */
.acc-feature-card__image.acc-rotator {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}
.acc-feature-card__image.acc-rotator .wp-block-image {
    /* !important needed to beat core Gallery's nested-image layout rules so the
       three figures overlap (absolute) instead of stacking vertically. */
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0;
    animation: accRotateFade 12s infinite;
}
/* 3 images, 12s cycle (4s each). The visible window (6%–42% ≈ 4.3s) is wider
   than the 4s slot so consecutive images overlap as they crossfade — no blank
   frames between slides. */
.acc-feature-card__image.acc-rotator .wp-block-image:nth-child(1) { animation-delay: 0s; }
.acc-feature-card__image.acc-rotator .wp-block-image:nth-child(2) { animation-delay: 4s; }
.acc-feature-card__image.acc-rotator .wp-block-image:nth-child(3) { animation-delay: 8s; }
@keyframes accRotateFade {
    0%   { opacity: 0; }
    6%   { opacity: 1; }
    36%  { opacity: 1; }
    42%  { opacity: 0; }
    100% { opacity: 0; }
}
/* Static fallback — show only the first image, no motion. */
@media (prefers-reduced-motion: reduce) {
    .acc-feature-card__image.acc-rotator .wp-block-image { animation: none; opacity: 0; }
    .acc-feature-card__image.acc-rotator .wp-block-image:nth-child(1) { opacity: 1; }
}

/* ============================================================
   Unified section heading + subtitle
   Used by every home-page section (welcome, current topics, info grid,
   partners). Other pages should reuse .acc-section for consistency.
   ============================================================ */
.acc-welcome,
.acc-section {
    padding-top: var(--wp--preset--spacing--70) !important;
    padding-bottom: var(--wp--preset--spacing--70) !important;
}

.acc-welcome > h2.wp-block-heading,
.acc-section > h2.wp-block-heading {
    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(2rem, 1.6rem + 2vw, 3.25rem) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    color: var(--wp--preset--color--primary) !important;
    text-align: center;
    margin: 0 auto !important;
    max-width: 32ch;
    position: relative;
}
.acc-welcome > h2.wp-block-heading::after,
.acc-section > h2.wp-block-heading::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin: var(--wp--preset--spacing--30) auto 0;
    background: var(--wp--preset--color--leaf);
    border-radius: 2px;
}
.acc-welcome > p:first-of-type,
.acc-section > p:first-of-type {
    max-width: 60ch;
    margin: var(--wp--preset--spacing--30) auto var(--wp--preset--spacing--60) !important;
    text-align: center;
    font-size: var(--wp--preset--font-size--lg) !important;
    line-height: 1.55 !important;
    color: var(--wp--preset--color--muted) !important;
}

/* ============================================================
   ACC Home Intro — "Who We Are" editorial section (surface bg).
   Asymmetric two-column: text + framed/offset photo with stat card.
   Mobile-first: single column, photo first, then text.
   ============================================================ */
.acc-intro {
    --acc-primary:    var(--wp--preset--color--primary, #0d2b12);
    --acc-primary-lt: var(--wp--preset--color--primary-light, #2c5e34);
    --acc-accent:     var(--wp--preset--color--accent, #7fa86b);
    --acc-leaf:       var(--wp--preset--color--leaf, #3d6b3f);
    --acc-bg:         var(--wp--preset--color--background, #ffffff);
    --acc-fg:         var(--wp--preset--color--foreground, #0b1410);
    --acc-serif:      var(--wp--preset--font-family--serif, 'Lora', Georgia, serif);
    --acc-sans:       var(--wp--preset--font-family--sans-serif, 'Lexend', system-ui, sans-serif);

    /* tighter top gap to the cards above; keep generous bottom */
    padding-top: clamp(1.5rem, 3.6vw, 2.75rem) !important;
    padding-bottom: clamp(2.75rem, 7vw, 5.75rem) !important;
    /* match the feature-cards section's left/right edges (alignwide) */
    padding-inline: var(--wp--preset--spacing--40);
    overflow: clip;
    position: relative;
    isolation: isolate;
}
/* Texture overlay — redox-01 image, faint, multiplied over the surface bg */
.acc-intro::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("/wp-content/uploads/2026/03/concrete-wall.png");
    background-repeat: repeat;
    background-size: 600px auto;
    opacity: 0.55;
    mix-blend-mode: multiply;
}
.acc-intro__inner {
    width: 100%;
    max-width: var(--wp--style--global--wide-size, 1280px);
    margin-inline: auto;
    padding-inline: 0;
    position: relative;
    z-index: 1;
}
/* Grid override of the core Columns flexbox. The inner group is a
   constrained layout, which would otherwise cap this at contentSize (800px)
   and leave a large gap on the right — force it to fill the wide width. */
.acc-intro__grid {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: clamp(2.25rem, 5vw, 3.5rem) !important;
    align-items: center;
    margin: 0 !important;
    max-width: none !important;
    width: 100%;
}
.acc-intro__grid > .acc-intro__text,
.acc-intro__grid > .acc-intro__media {
    flex-basis: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
.acc-intro__media { order: 1; }
.acc-intro__text  { order: 2; }
@media (min-width: 860px) {
    .acc-intro__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(3rem, 6vw, 5rem) !important;
    }
    .acc-intro__text  { order: 1; }
    .acc-intro__media { order: 2; }
}

/* Text column — fills its half of the grid (no narrow measure cap so it
   reaches toward the photo instead of leaving whitespace on the right). */
.acc-intro__text { max-width: none; }
.acc-intro__eyebrow {
    font-family: var(--acc-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--acc-leaf) !important;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.acc-intro__eyebrow::before {
    content: "";
    inline-size: 2rem;
    block-size: 2px;
    background-color: var(--acc-accent);
    flex: none;
}
/* Slate-blue — third accent tone, introduced lightly on the home page.
   Trial: section eyebrows only. Remove this block to revert. */
.home .acc-intro__eyebrow { color: #3f6d7d !important; }
.home .acc-intro__eyebrow::before { background-color: #3f6d7d !important; }
.home .acc-support-cta--light .acc-support-cta__eyebrow { color: #3f6d7d !important; }
.acc-intro__title {
    font-family: var(--acc-serif);
    color: var(--acc-primary) !important;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
    font-size: clamp(1.875rem, 1.1rem + 3.2vw, 3rem);
    margin: 0 0 1.25rem;
    text-wrap: balance;
}
.acc-intro__lead {
    font-family: var(--acc-serif);
    color: var(--acc-primary-lt) !important;
    font-size: clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem);
    line-height: 1.45;
    font-weight: 500;
    margin: 0 0 1.5rem;
    text-wrap: pretty;
}
.acc-intro__body {
    font-family: var(--acc-sans);
    color: var(--acc-fg) !important;
    font-size: 1.0625rem;
    line-height: 1.7;
    margin: 0;
    text-wrap: pretty;
}

/* Media column — framed, offset photo + stat card */
.acc-intro__media-frame {
    position: relative;
    isolation: isolate;
}
.acc-intro__media-frame::before {
    content: "";
    position: absolute;
    inset: 1.25rem -1.25rem -1.25rem 1.25rem;
    border: 2px solid var(--acc-accent);
    border-radius: 6px;
    z-index: -1;
}
/* Desktop: inset the frame so its outward (right) green border lands exactly
   on the section's right edge, aligned with the feature cards above. */
@media (min-width: 860px) {
    .acc-intro__media-frame {
        margin-right: 1.25rem;
        max-width: 80%;
        margin-left: auto;
    }
}
.acc-intro__photo { margin: 0 !important; }
.acc-intro__photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 18px 40px -22px rgba(13, 43, 18, 0.55);
    transition: transform 300ms ease, box-shadow 300ms ease;
}
.acc-intro__stat {
    position: absolute;
    left: -1rem;
    bottom: -1.25rem;
    z-index: 2;
    background-color: var(--acc-primary);
    padding: 1.2rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 12px 28px -14px rgba(13, 43, 18, 0.7);
    max-width: 12rem;
}
@media (min-width: 860px) {
    .acc-intro__stat { left: -1.75rem; bottom: -1.5rem; }
}
.acc-intro__stat-num {
    font-family: var(--acc-serif);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--acc-bg) !important;
    margin: 0 0 0.25rem;
}
.acc-intro__stat-label {
    font-family: var(--acc-sans);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.35;
    text-transform: uppercase;
    color: var(--acc-accent) !important;
    margin: 0;
}
@media (hover: hover) {
    .acc-intro__media-frame:hover .acc-intro__photo img {
        transform: translateY(-3px);
        box-shadow: 0 24px 50px -22px rgba(13, 43, 18, 0.6);
    }
}
@media (prefers-reduced-motion: reduce) {
    .acc-intro__photo img { transition: none; }
    .acc-intro__media-frame:hover .acc-intro__photo img { transform: none; }
}
@media (max-width: 420px) {
    .acc-intro__media-frame::before { inset: 0.75rem -0.75rem -0.75rem 0.75rem; }
    .acc-intro__stat { left: 0; bottom: -0.75rem; padding: 1rem 1.2rem; }
    .acc-intro__stat-num { font-size: 2.1rem; }
}

/* ============================================================
   Latest posts (Current Topics) — post title bump
   ============================================================ */
.wp-block-query .wp-block-post-title {
    font-size: var(--wp--preset--font-size--2xl) !important;
    line-height: 1.2;
    margin: 0.35rem 0 var(--wp--preset--spacing--20);
}
.wp-block-query .wp-block-post-title a {
    color: var(--wp--preset--color--primary);
    text-decoration: none;
}
.wp-block-query .wp-block-post-title a:hover {
    color: var(--wp--preset--color--leaf);
}
.wp-block-query .wp-block-post-excerpt p {
    font-size: var(--wp--preset--font-size--base);
    line-height: 1.6;
}

/* ============================================================
   Welcome cards (4-column intro under feature cards)
   ============================================================ */
.acc-welcome__row {
    gap: var(--wp--preset--spacing--40) !important;
    margin-top: var(--wp--preset--spacing--50);
}
.acc-welcome__col.wp-block-column {
    background: var(--wp--preset--color--background);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 8px;
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
    box-shadow: 0 1px 2px rgba(13, 38, 20, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.acc-welcome__col.wp-block-column:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(13, 38, 20, 0.08);
    border-color: var(--wp--preset--color--leaf);
}
.acc-welcome__icon {
    width: 84px;
    height: 84px;
    margin: 0 auto var(--wp--preset--spacing--30) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--wp--preset--color--leaf) 14%, transparent);
    border-radius: 50%;
    font-size: 2.5rem !important;
    line-height: 1 !important;
}
.acc-welcome__col h3.wp-block-heading {
    font-family: var(--wp--preset--font-family--sans-serif);
    font-size: var(--wp--preset--font-size--base) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wp--preset--color--primary);
    margin: 0 0 var(--wp--preset--spacing--30) !important;
    line-height: 1.3;
}
.acc-welcome__col p:not(.acc-welcome__icon):not(.acc-welcome__more) {
    color: var(--wp--preset--color--muted);
    font-size: var(--wp--preset--font-size--sm);
    line-height: 1.6;
    margin: 0;
    flex-grow: 1;
}
.acc-welcome__more {
    margin-top: var(--wp--preset--spacing--30) !important;
}
.acc-welcome__more a {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--wp--preset--font-size--xs);
    color: var(--wp--preset--color--leaf);
    text-decoration: none;
    font-weight: 700;
}
.acc-welcome__more a:hover {
    color: var(--wp--preset--color--primary);
    text-decoration: underline;
}

@media (max-width: 781px) {
    .acc-welcome__row {
        gap: var(--wp--preset--spacing--40) !important;
    }
    .acc-welcome__col.wp-block-column {
        padding: var(--wp--preset--spacing--40);
    }
}

/* ============================================================
   Info grid columns — list reset
   ============================================================ */
.acc-info-grid .wp-block-heading {
    font-size: var(--wp--preset--font-size--2xl) !important;
    margin: 0 0 var(--wp--preset--spacing--30);
    padding-bottom: var(--wp--preset--spacing--20);
    border-bottom: 2px solid var(--wp--preset--color--leaf);
    display: inline-block;
}
.acc-info-grid .wp-block-list a {
    font-size: var(--wp--preset--font-size--base);
    font-weight: 500;
}
.acc-info-grid .wp-block-list {
    list-style: none;
    padding-left: 0;
    margin: 0 0 var(--wp--preset--spacing--30);
}
.acc-info-grid .wp-block-list li {
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--wp--preset--color--border);
}
.acc-info-grid .wp-block-list li:last-child { border-bottom: 0; }
.acc-info-grid .wp-block-list a {
    text-decoration: underline;
    text-decoration-color: var(--wp--preset--color--leaf);
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    color: var(--wp--preset--color--foreground);
}
.acc-info-grid .wp-block-list a:hover {
    color: var(--wp--preset--color--primary);
    text-decoration: underline;
}

/* ============================================================
   Partner logo strip
   ============================================================ */
.acc-partners .wp-block-image img {
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.15s ease, opacity 0.15s ease;
    max-height: 64px;
    width: auto;
    margin: 0 auto;
}
.acc-partners .wp-block-image img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* ============================================================
   Blog archive (Post Oak Newsletter)
   ============================================================ */
.acc-blog-header .acc-breadcrumbs {
    margin: 0 0 var(--wp--preset--spacing--20);
}
.acc-blog-header .acc-breadcrumbs a {
    color: var(--wp--preset--color--muted);
    text-decoration: none;
}
.acc-blog-header .acc-breadcrumbs a:hover {
    color: var(--wp--preset--color--primary);
    text-decoration: underline;
}
.acc-blog-header .wp-block-post-title {
    margin: 0 0 var(--wp--preset--spacing--30) !important;
    font-size: var(--wp--preset--font-size--xx-large, 2.5rem);
    line-height: 1.1;
}
.acc-blog-header .wp-block-post-content {
    color: var(--wp--preset--color--foreground);
    max-width: 720px;
}

.acc-blog-columns {
    gap: var(--wp--preset--spacing--60);
}

.acc-blog-post-item:last-child {
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
}
.acc-blog-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}
.acc-blog-post-title a {
    color: var(--wp--preset--color--primary);
    text-decoration: none;
}
.acc-blog-post-title a:hover {
    color: var(--wp--preset--color--leaf);
    text-decoration: underline;
}
.acc-blog-post-meta {
    gap: 0.5rem !important;
    align-items: center;
    margin-bottom: var(--wp--preset--spacing--30);
}
.acc-blog-post-meta p {
    margin: 0;
}
.acc-blog-post-meta .wp-block-post-terms a {
    color: var(--wp--preset--color--leaf);
    text-decoration: none;
    font-weight: 600;
}
.acc-blog-post-meta .wp-block-post-terms a:hover {
    text-decoration: underline;
}
.acc-blog-post-excerpt {
    color: var(--wp--preset--color--foreground);
}
.acc-blog-post-excerpt .wp-block-post-excerpt__more-link {
    display: inline-block;
    margin-top: var(--wp--preset--spacing--20);
    color: var(--wp--preset--color--leaf);
    font-weight: 600;
    text-decoration: none;
    text-transform: lowercase;
}
.acc-blog-post-excerpt .wp-block-post-excerpt__more-link:hover {
    text-decoration: underline;
}

.acc-blog-pagination {
    margin-top: var(--wp--preset--spacing--60);
    gap: 0.5rem !important;
}
.acc-blog-pagination a,
.acc-blog-pagination .page-numbers {
    color: var(--wp--preset--color--primary);
    text-decoration: none;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 4px;
}
.acc-blog-pagination .page-numbers.current,
.acc-blog-pagination a:hover {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--background);
    border-color: var(--wp--preset--color--primary);
}

/* Sidebar */
.acc-blog-sidebar-col {
    /* mobile: sidebar below posts */
}
.acc-sidebar-widget {
    padding-bottom: var(--wp--preset--spacing--40);
    border-bottom: 1px solid var(--wp--preset--color--border);
}
.acc-sidebar-widget:last-child {
    border-bottom: 0;
}
.acc-sidebar-widget.acc-sidebar-newsletter {
    border-bottom: 0;
}
.acc-sidebar-heading {
    font-size: 1.125rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 var(--wp--preset--spacing--30) !important;
    color: var(--wp--preset--color--primary);
}
.acc-sidebar-newsletter .acc-sidebar-heading {
    color: var(--wp--preset--color--background);
}
.acc-sidebar-search .wp-block-search__input {
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
}
.acc-sidebar-recent,
.acc-blog-sidebar .wp-block-categories,
.acc-blog-sidebar .wp-block-page-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.acc-blog-sidebar .wp-block-page-list a,
.acc-blog-sidebar .wp-block-categories a,
.acc-sidebar-recent a {
    color: var(--wp--preset--color--foreground);
    text-decoration: none;
    display: block;
    padding: 0.35rem 0;
    border-bottom: 1px dotted var(--wp--preset--color--border);
}
.acc-blog-sidebar .wp-block-page-list a:hover,
.acc-blog-sidebar .wp-block-categories a:hover,
.acc-sidebar-recent a:hover {
    color: var(--wp--preset--color--leaf);
}
.acc-blog-sidebar .wp-block-page-list li:last-child a,
.acc-blog-sidebar .wp-block-categories li:last-child a,
.acc-sidebar-recent li:last-child a {
    border-bottom: 0;
}

/* Mobile: stack columns */
@media (max-width: 767px) {
    .acc-blog-columns {
        gap: var(--wp--preset--spacing--70);
    }
    .acc-blog-list-col,
    .acc-blog-sidebar-col {
        flex-basis: 100% !important;
    }
}

/* ============================================================
   Feature card — upcoming speaker variant
   ============================================================ */
.acc-feature-card--upcoming .acc-feature-card__link {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    height: 100%;
}
.acc-feature-card--upcoming {
    cursor: pointer;
}
.acc-feature-card--upcoming .acc-feature-card__panel {
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* The Education card's image is NOT always a video still.
   It used to be — the card showed the most recent recorded talk, so an
   unconditional YouTube play button drawn here was always telling the truth.
   Then the card started showing the *next* talk, and it began promising a
   recording of something that has not happened yet. It also doubled up: the
   markup already adds .acc-feature-card__play when a video genuinely exists,
   so a recorded talk drew two play buttons on top of each other.
   The overlay now comes only from that element, which is emitted only when
   there is something to play. */
.acc-feature-card--upcoming .acc-feature-card__image {
    position: relative;
}
.acc-feature-card__eyebrow {
    font-size: var(--wp--preset--font-size--xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0;
    color: var(--wp--preset--color--accent, #7fa86b) !important;
    opacity: 0.95;
}
.acc-feature-card__speaker {
    font-family: var(--wp--preset--font-family--serif);
    font-size: var(--wp--preset--font-size--xl);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}
.acc-feature-card__assoc {
    font-family: var(--wp--preset--font-family--sans-serif);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 500;
    opacity: 0.85;
}
.acc-feature-card__blurb {
    font-size: var(--wp--preset--font-size--sm);
    line-height: 1.55;
    margin: 0;
    opacity: 1;
}
.acc-feature-card__date {
    margin: var(--wp--preset--spacing--20) 0 0 0 !important;
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 600;
    color: var(--wp--preset--color--primary) !important;
}

/* Rounded "Learn More" CTA — pinned to the bottom-right of each card panel,
   identical across all three feature cards (Education, Community, Advocacy). */
.acc-feature-card__cta {
    margin-top: auto !important;
    margin-left: auto !important;
    /* core constrained-layout adds margin-right:auto to group children,
       which re-centers the shrunk button — force it back to the right edge */
    margin-right: 0 !important;
    align-self: flex-end;
    width: auto !important;
    max-width: 100%;
    text-align: right;
    padding-top: var(--wp--preset--spacing--40);
}
.acc-feature-card__cta a,
.acc-feature-card__cta .wp-block-button__link {
    display: inline-block;
    background-color: var(--wp--preset--color--primary);
    color: #ffffff !important;
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: none;
    text-decoration: none;
    padding: 0.5em 1.25em;
    border-radius: 999px;
    border: 0;
    line-height: 1.2;
    transition: background-color 140ms ease, transform 140ms ease;
}
.acc-feature-card__cta a:hover,
.acc-feature-card__cta .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--primary-light, #164a1e);
    transform: translateY(-1px);
}

/* Education card action row — the two pills and "Learn More" share ONE row.
   Previously .acc-feature-card__btns and .acc-feature-card__cta were siblings
   in the panel's flex column, each with margin-top:auto. Two auto margins split
   the free space between them, so this card carried an extra row of controls
   that its siblings did not. A wp:columns row sizes every column to the tallest,
   so that extra row pushed "Learn More" down on all three cards and left
   Community Service and Advocacy with a hollow gap above their button. */
.acc-feature-card__actions {
    margin-top: auto;
    padding-top: var(--wp--preset--spacing--40);
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}
/* Three pills in the width of one card is tight. Trim the horizontal padding
   inside this row only, so all three stay on one line at desktop widths —
   the labels themselves are never allowed to wrap or shrink. */
.acc-feature-card__actions .acc-feature-card__btn,
.acc-feature-card__actions .acc-feature-card__cta a {
    padding-left: 0.75em;
    padding-right: 0.75em;
}
/* Inside the row the children no longer position themselves — the row does. */
.acc-feature-card__actions .acc-feature-card__btns {
    margin-top: 0;
    padding-top: 0;
    flex: 0 1 auto;
}
.acc-feature-card__actions .acc-feature-card__cta {
    margin-top: 0 !important;
    margin-left: auto !important;
    padding-top: 0;
    align-self: center;
    flex: 0 0 auto;
}
@media (max-width: 1099px) {
    /* Below desktop the card is too narrow for three pills abreast. Let the
       row wrap rather than squeezing the labels. */
    .acc-feature-card__actions { flex-wrap: wrap; }
}
@media (max-width: 599px) {
    /* Stacked, the pills take the full width and "Learn More" sits under them,
       still right-aligned. */
    .acc-feature-card__actions { flex-direction: column; align-items: stretch; }
    .acc-feature-card__actions .acc-feature-card__cta { align-self: flex-end; }
}

/* Education card — two buttons (Speaker Series + Newsletter) on the green panel */
/* Both buttons stay on one line. Wrapping made this card two rows taller than
   its siblings, and a columns row sizes every card to the tallest one — so one
   wrapped button was stretching the whole row. */
.acc-feature-card__btns {
    margin-top: auto;
    padding-top: var(--wp--preset--spacing--40);
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.5rem;
}
.acc-feature-card__btns .acc-feature-card__btn {
    /* Size to the label, then share any slack — a fixed 1 1 0 split forced
       the longer label to overflow its half and clip. */
    flex: 0 1 auto;
    text-align: center;
    white-space: nowrap;
    padding-left: 0.9em;
    padding-right: 0.9em;
}
@media (max-width: 479px) {
    /* On the narrowest screens two pills genuinely don't fit — let them stack
       rather than shrink the type. */
    .acc-feature-card__btns { flex-wrap: wrap; }
    .acc-feature-card__btns .acc-feature-card__btn { flex-basis: 100%; }
}
.acc-feature-card__btn {
    display: inline-block;
    text-decoration: none !important;
    background-color: var(--wp--preset--color--primary);
    color: #ffffff !important;
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none;
    padding: 0.55em 1.2em;
    border-radius: 999px;
    border: 2px solid var(--wp--preset--color--primary);
    line-height: 1.2;
    transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.acc-feature-card__btn:hover {
    transform: translateY(-1px);
    background-color: var(--wp--preset--color--primary-light, #2c5e34);
    border-color: var(--wp--preset--color--primary-light, #2c5e34);
}
.acc-feature-card__btn--ghost {
    background-color: transparent;
    color: var(--wp--preset--color--primary) !important;
    border-color: var(--wp--preset--color--primary);
}
.acc-feature-card__btn--ghost:hover {
    background-color: var(--wp--preset--color--primary);
    color: #ffffff !important;
}
/* Play overlay over the kept video thumbnail */
.acc-feature-card__video,
.acc-feature-card__detail {
    display: block;
    position: relative;
}
/* The upcoming-talk image links to its details page. No underline: it wraps a
   picture, and the theme underlines links in page content by default, which on
   an image draws a stray line under the frame. */
.acc-feature-card__detail,
.acc-feature-card__detail:hover,
.acc-feature-card__detail:focus {
    text-decoration: none;
}
.acc-feature-card__detail img {
    transition: transform 180ms ease;
}
.acc-feature-card__detail:hover img,
.acc-feature-card__detail:focus img {
    transform: scale(1.02);
}
@media (prefers-reduced-motion: reduce) {
    .acc-feature-card__detail img,
    .acc-feature-card__detail:hover img { transition: none; transform: none; }
}
.acc-feature-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(13, 43, 18, 0.72);
    pointer-events: none;
    transition: background 140ms ease;
}
.acc-feature-card__play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 10px 0 10px 17px;
    border-color: transparent transparent transparent #ffffff;
}
.acc-feature-card__video:hover .acc-feature-card__play {
    background: var(--wp--preset--color--leaf, #3d6b3f);
}

/* ============================================================
   Single speaker detail page — editorial field-journal layout
   ============================================================ */
.acc-speaker-detail {
    --acc-sd-cream: #f4ecd8;
    --acc-sd-cream-deep: #e9dec0;
    --acc-sd-ink: var(--wp--preset--color--primary, #0d2b12);
    --acc-sd-leaf: var(--wp--preset--color--leaf, #2f6b3a);
    --acc-sd-muted: var(--wp--preset--color--muted, #6b7280);
    --acc-sd-border: var(--wp--preset--color--border, #d1d5db);
    --acc-sd-rule: rgba(13, 43, 18, 0.18);

    max-width: var(--wp--style--global--wide-size, 1280px);
    margin: 0 auto;
    padding: 0 var(--wp--preset--spacing--40);
    color: var(--acc-sd-ink);
    font-family: var(--wp--preset--font-family--sans-serif, 'Lexend', sans-serif);
}

/* ---------- Head (title + meta above media) ---------- */
/* The page pads twice.
   single-acc_speaker.html wraps the shortcode in a constrained group, which
   already applies the theme's outer padding, and then this block adds its own
   on top. Measured on a 375px screen: 24px from the group and 24px again from
   here, so 96px of 375 -- better than a quarter of the display -- went on
   margins and the promo banner was squeezed to 279px.

   Harmless with a 1280px column to spend it on, so the inner padding stays on
   desktop and comes off where the width is scarce. */
@media (max-width: 781px) {
    .acc-speaker-detail {
        padding-left: 0;
        padding-right: 0;
    }
}

.acc-speaker-detail__head {
    max-width: 960px;
    margin: 0 auto clamp(1.5rem, 2vw + 1rem, 2.5rem);
    padding: 0 0.5rem;
    text-align: center;
}
.acc-speaker-detail__eyebrow {
    display: inline-block;
    margin: 0 0 1rem;
    padding: 0.3rem 0.85rem;
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--acc-sd-leaf);
    background: rgba(47, 107, 58, 0.08);
    border-radius: 100px;
}
.acc-speaker-detail__title {
    font-family: var(--wp--preset--font-family--serif, 'Lora', Georgia, serif);
    font-size: clamp(2rem, 2.5vw + 1rem, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin: 0 0 0.5rem;
    color: var(--acc-sd-ink);
    font-weight: 600;
    text-wrap: balance;
}
.acc-speaker-detail__assoc {
    font-family: var(--wp--preset--font-family--serif, 'Lora', Georgia, serif);
    font-style: italic;
    font-size: clamp(1rem, 0.3vw + 0.95rem, 1.25rem);
    color: var(--acc-sd-leaf);
    margin: 0 0 0.6rem;
    line-height: 1.35;
}
.acc-speaker-detail__date {
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
    color: var(--acc-sd-muted);
    margin: 0;
}

/* ---------- Media (16:9 image or video — always 1920x1080-ratio frame) ---------- */
.acc-speaker-detail__media {
    margin: 0 auto clamp(2rem, 3vw + 1rem, 3.5rem);
    /* Narrower than the column it sits in. At full width a
       title slide competes with the speaker's name above it and pushes the
       Zoom button below the fold on a laptop; this keeps the page readable as
       one thing rather than a poster with captions. */
    max-width: min(100%, 792px);
}
.acc-speaker-detail__media-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    background: var(--acc-sd-ink);
    border: 1px solid var(--acc-sd-rule);
    overflow: hidden;
    box-shadow: 0 22px 40px -22px rgba(13, 38, 20, 0.45);
}
.acc-speaker-detail__media-frame img,
.acc-speaker-detail__media-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    object-fit: cover;
}
.acc-speaker-detail__media-frame--placeholder {
    background:
        radial-gradient(circle at 78% 22%, rgba(47, 107, 58, 0.18), transparent 55%),
        linear-gradient(160deg, var(--acc-sd-cream) 0%, var(--acc-sd-cream-deep) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.acc-speaker-detail__placeholder-mono {
    font-family: var(--wp--preset--font-family--serif, 'Lora', Georgia, serif);
    font-size: clamp(3rem, 5vw + 1rem, 5rem);
    letter-spacing: 0.02em;
    color: var(--acc-sd-ink);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.acc-speaker-detail__placeholder-tag {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--acc-sd-ink);
    opacity: 0.55;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- Body ---------- */
.acc-speaker-detail__body {
    max-width: 760px;
    margin: 0 auto clamp(3rem, 5vw + 1rem, 5rem);
    padding: 0 0.5rem;
}
.acc-speaker-detail__kicker {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0 0 1.25rem;
    font-size: 0.6875rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--acc-sd-leaf);
}
.acc-speaker-detail__kicker-rule {
    width: 44px;
    height: 1px;
    background: var(--acc-sd-leaf);
    display: inline-block;
}
.acc-speaker-detail__presentation {
    font-family: var(--wp--preset--font-family--serif, 'Lora', Georgia, serif);
    font-size: clamp(1.875rem, 1.8vw + 1.2rem, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--acc-sd-ink);
    margin: 0 0 1.75rem;
    font-weight: 600;
}
.acc-speaker-detail__description {
    font-family: var(--wp--preset--font-family--serif, 'Lora', Georgia, serif);
    color: var(--acc-sd-ink);
    margin: 0 0 2rem;
}
.acc-speaker-detail__description p {
    font-size: 1.1875rem;
    line-height: 1.7;
    margin: 0;
    color: rgba(13, 43, 18, 0.85);
}
.acc-speaker-detail__description p::first-letter {
    font-size: 3.4rem;
    line-height: 0.9;
    float: left;
    padding: 0.35rem 0.55rem 0 0;
    color: var(--acc-sd-leaf);
    font-weight: 600;
}

/* CTA pill */
.acc-speaker-detail__cta-wrap {
    margin: 0;
}
.acc-speaker-detail__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.4rem;
    font-family: var(--wp--preset--font-family--sans-serif, 'Lexend', sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--acc-sd-ink);
    background: transparent;
    border: 1px solid var(--acc-sd-ink);
    border-radius: 100px;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.acc-speaker-detail__cta svg {
    transition: transform 0.25s ease;
}
.acc-speaker-detail__cta:hover {
    background: var(--acc-sd-ink);
    color: var(--acc-sd-cream);
    text-decoration: none;
    transform: translateY(-1px);
}
.acc-speaker-detail__cta:hover svg {
    transform: translate(2px, -2px);
}

/* ---------- Join the Zoom Meeting — prominent filled CTA (upcoming talks) ---------- */
.acc-speaker-detail__join-wrap {
    /* Bottom margin matters as much as the top one: with none, the button
       ran into the "About the Talk" rule directly beneath it. */
    margin: clamp(1.25rem, 2.5vw, 2rem) 0 clamp(2.5rem, 4vw, 3.75rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
}
.acc-speaker-detail__join-when {
    margin: 0;
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
    color: var(--acc-sd-muted);
}
.acc-speaker-detail__join {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1.8rem;
    font-family: var(--wp--preset--font-family--sans-serif, 'Lexend', sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
    background: var(--acc-sd-leaf, #2f6b3a);
    border-radius: 100px;
    box-shadow: 0 6px 18px rgba(13, 43, 18, 0.22);
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.acc-speaker-detail__join svg { transition: transform 0.2s ease; }
.acc-speaker-detail__join:hover,
.acc-speaker-detail__join:focus-visible {
    background: var(--acc-sd-ink, #0d2b12);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(13, 43, 18, 0.28);
}
.acc-speaker-detail__join:hover svg { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
    .acc-speaker-detail__join,
    .acc-speaker-detail__join svg { transition: none; }
    .acc-speaker-detail__join:hover { transform: none; }
}

/* ===========================================================
   ACC Support / Upsell CTA — reusable deep-green band.
   Root: .acc-support-cta  (add --card for a rounded in-page card,
   e.g. inside the speaker detail flow; omit for full-bleed sections).
   =========================================================== */
.acc-support-cta {
    --acc-cta-bg:       var(--wp--preset--color--primary, #0d2b12);
    --acc-cta-accent:   var(--wp--preset--color--accent, #13ec13);
    --acc-cta-ink:      #0d2b12;
    --acc-cta-on-dark:  #f6f8f6;
    --acc-cta-muted:    rgba(246, 248, 246, 0.72);
    --acc-cta-serif:    var(--wp--preset--font-family--serif, Georgia, "Times New Roman", serif);
    --acc-cta-sans:     var(--wp--preset--font-family--sans-serif, "Lexend", system-ui, sans-serif);

    background-color: var(--acc-cta-bg);
    color: var(--acc-cta-on-dark);
    padding-block: clamp(2.75rem, 8vw, 5rem);
    padding-inline: 1.25rem;
}
/* Homepage split CTA: tighten gap to the section above, add room before the
   footer wave below. */
.acc-support-cta--split {
    padding-top: clamp(1.75rem, 4.5vw, 3rem) !important;
    padding-bottom: clamp(4.25rem, 9vw, 7rem) !important;
}
/* Flush stacked full-width bands at page bottom — kill WP 24px block-gap.
   Section padding (64px each) already supplies breathing room. */
.acc-intro,
.acc-current-topics,
.acc-support-cta:not(.acc-support-cta--card) {
    margin-top: 0 !important;
}
/* Site-wide: remove the white block-gap between any two stacked full-bleed
   sections. Section padding already supplies vertical rhythm. */
.alignfull + .alignfull:not(.acc-feature-cards) {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
}
/* Kill WP block-gap above the footer so it sits flush under the last section */
footer.wp-block-template-part {
    margin-top: 0 !important;
}
/* ===========================================================
   FAQ page — grouped accordion (core/details blocks)
   =========================================================== */
/* "Have a question?" prompt above the FAQ list — a compact callout bar:
   text on the left, contact-form CTA on the right. */
.acc-faq__ask {
    background: var(--wp--preset--color--sand);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 16px;
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
    margin-bottom: var(--wp--preset--spacing--60);
    gap: var(--wp--preset--spacing--40);
}
.acc-faq__ask-text { flex: 1 1 16rem; }
.acc-faq__ask-title {
    margin: 0 0 0.25rem !important;
    color: var(--wp--preset--color--primary);
    font-size: 1.3rem !important;
}
.acc-faq__ask-body {
    margin: 0;
    color: var(--wp--preset--color--foreground);
}
.acc-faq__ask-actions { flex: 0 0 auto; }
.acc-faq__ask-actions .wp-block-button__link { white-space: nowrap; }

.acc-faq__cat {
    /* Match .acc-section-eyebrow: headings default to Lora, so the sans
       family must be set explicitly or the label reads as a serif title. */
    font-family: var(--wp--preset--font-family--sans-serif);
    font-size: 0.75rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--wp--preset--color--primary);
    margin: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--30) !important;
}
.acc-faq__cat:first-child { margin-top: 0 !important; }
.acc-faq__item.wp-block-details {
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 10px;
    /* White like the /events/ accordion cards (.acc-ev) — the previous warm
       cream was off-palette. */
    background: #fff;
    padding: 0 1.35rem;
    margin-bottom: 0.75rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.acc-faq__item.wp-block-details[open] {
    border-color: var(--wp--preset--color--leaf);
    box-shadow: 0 10px 24px -16px rgba(13, 38, 20, 0.4);
    padding-bottom: 1.15rem;
}
.acc-faq__item > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 0;
    font-family: var(--wp--preset--font-family--serif);
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--wp--preset--color--primary);
}
.acc-faq__item > summary::-webkit-details-marker { display: none; }
.acc-faq__item > summary::after {
    content: "+";
    flex: 0 0 auto;
    font-family: var(--wp--preset--font-family--sans-serif);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    color: var(--wp--preset--color--leaf);
}
.acc-faq__item[open] > summary::after { content: "\2013"; }
.acc-faq__item > :not(summary) {
    margin: 0 0 1.1rem;
    color: var(--wp--preset--color--foreground);
    line-height: 1.65;
}
.acc-faq__item > :not(summary):last-child { margin-bottom: 0; }

/* Footer bottom rule — faint warm line that blends with the brown footer
   (the default green clashed). */
/* Hero divider under "Arlington Conservation Council · since 1969".
   Theme renders separators as a border; force a real, visible line. */
.acc-hero__rule.wp-block-separator {
    border: 0 !important;
    height: 3px !important;
    background-color: var(--wp--preset--color--accent) !important;
    width: 3rem !important;
    max-width: 3rem !important;
    margin-left: 0;
    margin-right: auto;
    margin-top: var(--wp--preset--spacing--30) !important;
    margin-bottom: var(--wp--preset--spacing--30) !important;
    border-radius: 2px;
    opacity: 1 !important;
}

.acc-footer__rule.wp-block-separator {
    border-color: rgba(251, 243, 231, 0.18) !important;
    background-color: rgba(251, 243, 231, 0.18) !important;
    color: rgba(251, 243, 231, 0.18) !important;
}
/* Credit row spans the wide footer width: copyright left, designer right */
.acc-footer__credits {
    width: 100%;
}
.acc-footer__credits p { margin: 0; }
.acc-support-cta--card {
    border-radius: 18px;
    margin-block: clamp(2.5rem, 4vw, 4rem);
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(13, 43, 18, 0.18);
}
/* Off-white variant — dark text on light bg (home page). Redefines the CTA
   color vars so title/subtitle cascade dark; ghost button gets dark outline. */
.acc-support-cta--light {
    --acc-cta-bg:      var(--wp--preset--color--surface, #f6f8f6);
    --acc-cta-on-dark: var(--wp--preset--color--primary, #0d2b12);
    --acc-cta-muted:   rgba(13, 43, 18, 0.72);
    position: relative;
    isolation: isolate;
    overflow: clip;
}
/* concrete-wall texture overlay on the off-white CTA */
.acc-support-cta--light::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("/wp-content/uploads/2026/03/concrete-wall.png");
    background-repeat: repeat;
    background-size: 520px auto;
    opacity: 0.55;
    mix-blend-mode: multiply;
}
.acc-support-cta--light .acc-support-cta__inner {
    position: relative;
    z-index: 1;
}
.acc-support-cta--light .acc-support-cta__eyebrow {
    color: var(--wp--preset--color--leaf, #3d6b3f) !important;
}
.acc-support-cta--light .acc-support-cta__btn--ghost,
.acc-support-cta--light .acc-support-cta__btn--ghost .wp-block-button__link {
    color: var(--wp--preset--color--primary, #0d2b12) !important;
    border-color: rgba(13, 43, 18, 0.35);
}
.acc-support-cta--light .acc-support-cta__btn--ghost:hover,
.acc-support-cta--light .acc-support-cta__btn--ghost .wp-block-button__link:hover {
    background-color: rgba(13, 43, 18, 0.06);
    border-color: var(--wp--preset--color--primary, #0d2b12);
}
.acc-support-cta__inner {
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}
.acc-support-cta__eyebrow {
    margin: 0;
    font-family: var(--acc-cta-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--acc-cta-accent) !important;
}
.acc-support-cta__title {
    margin: 0;
    font-family: var(--acc-cta-serif);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.01em;
    font-size: clamp(1.75rem, 5.5vw, 3rem);
    color: var(--acc-cta-on-dark) !important;
    text-wrap: balance;
}
.acc-support-cta__subtitle {
    margin: 0;
    max-width: 38rem;
    font-family: var(--acc-cta-sans);
    font-size: clamp(1rem, 2.6vw, 1.125rem);
    line-height: 1.6;
    color: var(--acc-cta-muted) !important;
}
.acc-support-cta__actions {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0.875rem;
    width: 100%;
    max-width: 22rem;
}
.acc-support-cta__actions .wp-block-button { margin: 0; }
/* Core-blocks render nests <a.__link> inside <div.wp-block-button.__btn>.
   Both would get the pill → double border. Strip the wrapper; inner link is
   the pill. (PHP shortcode render has __btn ON the <a>, unaffected.) */
.wp-block-button.acc-support-cta__btn {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    border-radius: 0 !important;
}
.acc-support-cta__btn .wp-block-button__link { width: 100%; }
.acc-support-cta__btn,
.acc-support-cta__actions .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--acc-cta-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    padding: 1rem 1.75rem;
    min-height: 48px;
    border-radius: 100px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background-color 200ms ease, border-color 200ms ease,
                color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.acc-support-cta__btn:focus-visible,
.acc-support-cta__actions .wp-block-button__link:focus-visible {
    outline: 3px solid var(--acc-cta-accent);
    outline-offset: 3px;
}
.acc-support-cta__btn--primary {
    background-color: var(--acc-cta-accent);
    color: var(--acc-cta-ink) !important;
    border-color: var(--acc-cta-accent);
}
.acc-support-cta__btn--primary:hover {
    background-color: #97bd83;
    border-color: #97bd83;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(127, 168, 107, 0.55);
}
.acc-support-cta__btn--ghost {
    background-color: transparent;
    color: var(--acc-cta-on-dark) !important;
    border-color: rgba(246, 248, 246, 0.45);
}
.acc-support-cta__btn--ghost:hover {
    background-color: rgba(246, 248, 246, 0.08);
    border-color: var(--acc-cta-on-dark);
    transform: translateY(-2px);
}
/* Core-blocks pattern: modifier sits on the .wp-block-button wrapper, so map
   it onto the inner link too (keeps PHP-render and pattern visually identical). */
.acc-support-cta__btn--primary .wp-block-button__link {
    background-color: var(--acc-cta-accent);
    color: var(--acc-cta-ink) !important;
    border-color: var(--acc-cta-accent);
}
.acc-support-cta__btn--primary .wp-block-button__link:hover {
    background-color: #97bd83;
    border-color: #97bd83;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(127, 168, 107, 0.55);
}
.acc-support-cta__btn--ghost .wp-block-button__link {
    background-color: transparent;
    color: var(--acc-cta-on-dark) !important;
    border-color: rgba(246, 248, 246, 0.45);
}
.acc-support-cta__btn--ghost .wp-block-button__link:hover {
    background-color: rgba(246, 248, 246, 0.08);
    border-color: var(--acc-cta-on-dark);
    transform: translateY(-2px);
}
@media (min-width: 600px) {
    .acc-support-cta__actions {
        flex-direction: row;
        max-width: none;
    }
    .acc-support-cta__btn,
    .acc-support-cta__actions .wp-block-button__link {
        flex: 0 1 auto;
        padding-inline: 2.25rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .acc-support-cta__btn,
    .acc-support-cta__actions .wp-block-button__link { transition:
        background-color 200ms ease, border-color 200ms ease, color 200ms ease; }
    .acc-support-cta__btn:hover { transform: none; box-shadow: none; }
}

/* ===========================================================
   Support CTA — 50/50 split variant (home).
   Left: the membership/donation CTA. Right: a FAUNA coalition card.
   =========================================================== */
.acc-support-cta--split .acc-support-cta__inner {
    max-width: var(--wp--style--global--wide-size, 1280px);
    align-items: stretch;
    text-align: left;
}
.acc-support-cta__cols {
    width: 100%;
    max-width: none !important; /* release the constrained-layout 800px cap */
    gap: clamp(1.75rem, 4vw, 3.5rem) !important;
}
.acc-support-cta--split .acc-support-cta__main { text-align: left; }
.acc-support-cta--split .acc-support-cta__actions {
    align-items: flex-start;
    justify-content: flex-start;
}

/* FAUNA card — deep-green panel, the brand "take action" idiom */
.acc-fauna-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    border-radius: 18px;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    background: linear-gradient(160deg, #2c5e34 0%, #1a3a1f 100%);
    color: #f3ece0;
    box-shadow: 0 18px 40px rgba(13, 43, 18, 0.22);
}
.acc-fauna-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(620px 280px at 100% 0%, rgba(127, 168, 107, 0.20), transparent 60%);
    pointer-events: none;
}
.acc-fauna-card > * { position: relative; z-index: 1; }
/* Decorative inset frame — a fine cream hairline inside the edge */
.acc-fauna-card::after {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(251, 243, 231, 0.35);
    border-radius: 12px;
    pointer-events: none;
    z-index: 1;
}
.acc-fauna-card__eyebrow {
    margin: 0;
    font-family: var(--wp--preset--font-family--sans-serif);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent) !important;
}
.acc-fauna-card__title {
    margin: 0;
    font-family: var(--wp--preset--font-family--serif);
    font-weight: 700;
    font-size: clamp(2rem, 4.5vw, 2.75rem);
    letter-spacing: 0.04em;
    line-height: 1.05;
    color: #fbf3e7 !important;
}
.acc-fauna-card__tagline {
    margin: 0;
    font-family: var(--wp--preset--font-family--serif);
    font-style: italic;
    font-size: clamp(1.05rem, 2.4vw, 1.2rem);
    line-height: 1.4;
    color: rgba(243, 236, 224, 0.92) !important;
}
.acc-fauna-card__body {
    margin: 0;
    font-size: clamp(0.95rem, 2.4vw, 1.0625rem);
    line-height: 1.6;
    color: rgba(243, 236, 224, 0.78) !important;
}
.acc-fauna-card__actions { margin-top: 0.4rem; }
.acc-fauna-card__btn .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #fbf3e7 !important;
    border: 2px solid rgba(251, 243, 231, 0.55);
    border-radius: 100px;
    padding: 0.85em 1.75em;
    font-family: var(--wp--preset--font-family--sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.acc-fauna-card__btn .wp-block-button__link:hover {
    background: rgba(251, 243, 231, 0.12);
    border-color: #fbf3e7;
    color: #fbf3e7 !important;
}

/* ---------- Related: section header ---------- */
.acc-speaker-detail__related {
    margin-top: clamp(2.5rem, 4vw, 4.5rem);
    padding-top: clamp(2.5rem, 4vw, 4rem);
    border-top: 1px solid var(--acc-sd-rule);
}
.acc-speaker-detail__related-header {
    text-align: center;
    margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}
.acc-speaker-detail__related-glyph {
    display: inline-flex;
    color: var(--acc-sd-leaf);
    margin-bottom: 0.85rem;
}
.acc-speaker-detail__related-title {
    font-family: var(--wp--preset--font-family--serif, 'Lora', Georgia, serif);
    font-size: clamp(1.875rem, 1.5vw + 1.25rem, 2.5rem);
    color: var(--acc-sd-ink);
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-weight: 600;
}
.acc-speaker-detail__related-sub {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--acc-sd-muted);
    letter-spacing: 0.02em;
}

/* ---------- Related: grid ---------- */
.acc-speaker-detail__related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2vw, 2rem);
}
@media (max-width: 820px) {
    .acc-speaker-detail__related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .acc-speaker-detail__related-grid { grid-template-columns: 1fr; }
}
.acc-speaker-related-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--wp--preset--color--background, #fff);
    border: 1px solid var(--acc-sd-rule);
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.acc-speaker-related-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 32px -16px rgba(13, 38, 20, 0.25);
    border-color: var(--acc-sd-ink);
    text-decoration: none;
}
.acc-speaker-related-card__thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--acc-sd-cream);
    overflow: hidden;
}
.acc-speaker-related-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.acc-speaker-related-card:hover .acc-speaker-related-card__thumb img {
    transform: scale(1.04);
}
.acc-speaker-related-card__thumb--placeholder {
    background:
        radial-gradient(circle at 80% 18%, rgba(47, 107, 58, 0.20), transparent 55%),
        linear-gradient(135deg, var(--acc-sd-cream), var(--acc-sd-cream-deep));
    display: flex;
    align-items: center;
    justify-content: center;
}
.acc-speaker-related-card__thumb-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--acc-sd-leaf);
}
.acc-speaker-related-card__thumb-mono {
    position: relative;
    font-family: var(--wp--preset--font-family--serif, 'Lora', Georgia, serif);
    font-size: 2.5rem;
    color: var(--acc-sd-ink);
    z-index: 1;
}
.acc-speaker-related-card__body {
    padding: 1.25rem 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}
.acc-speaker-related-card__date {
    font-size: 0.625rem;
    color: var(--acc-sd-muted);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-weight: 700;
}
.acc-speaker-related-card__title {
    font-family: var(--wp--preset--font-family--serif, 'Lora', Georgia, serif);
    font-size: 1.25rem;
    color: var(--acc-sd-ink);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.005em;
    font-weight: 600;
}
.acc-speaker-related-card__presentation {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--acc-sd-leaf);
    margin: 0;
    font-style: italic;
    font-family: var(--wp--preset--font-family--serif, 'Lora', Georgia, serif);
}
.acc-speaker-related-card__blurb {
    font-size: 0.875rem;
    color: var(--acc-sd-muted);
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   YouTube video archive ([acc_youtube_archive])
   ============================================================ */
.acc-video-archive {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}
.acc-video-channel-link {
    margin-bottom: var(--wp--preset--spacing--50);
}
.acc-video-channel-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.95rem;
    font-size: 0.82rem;
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 100px;
    text-decoration: none;
    color: var(--wp--preset--color--primary);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 500;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.acc-video-channel-link a:hover {
    background: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--background);
}
.acc-yt-icon {
    width: 1.5rem;
    height: auto;
    flex-shrink: 0;
}
.acc-yt-arrow {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.acc-video-channel-link a:hover .acc-yt-arrow {
    opacity: 1;
    transform: translate(2px, -2px);
}
.acc-video-year + .acc-video-year {
    margin-top: var(--wp--preset--spacing--60);
}
.acc-video-year-header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--wp--preset--color--leaf);
}
.acc-video-year-title {
    font-family: var(--wp--preset--font-family--serif);
    font-size: var(--wp--preset--font-size--3xl);
    font-weight: 700;
    color: var(--wp--preset--color--primary);
    margin: 0;
    line-height: 1.2;
}
.acc-video-year-count {
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 500;
    color: var(--wp--preset--color--muted);
}
.acc-video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wp--preset--spacing--40);
}
@media (max-width: 1024px) {
    .acc-video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .acc-video-grid { grid-template-columns: 1fr; }
}
.acc-video-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    overflow: hidden;
    background: var(--wp--preset--color--background);
    border: 1px solid var(--wp--preset--color--border);
    box-shadow: 0 1px 2px rgba(13, 38, 20, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.acc-video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(13, 38, 20, 0.08);
    border-color: var(--wp--preset--color--leaf);
}
.acc-video-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--wp--preset--color--surface);
}
.acc-video-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.acc-video-card:hover .acc-video-thumb img {
    transform: scale(1.05);
}
.acc-video-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.acc-video-card:hover .acc-video-play {
    opacity: 1;
}
.acc-video-play svg {
    width: 56px;
    height: 40px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
    transition: transform 0.2s ease;
}
.acc-video-card:hover .acc-video-play svg {
    transform: scale(1.1);
}
.acc-video-meta {
    padding: 0.875rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.acc-video-title {
    font-family: var(--wp--preset--font-family--sans-serif);
    font-size: var(--wp--preset--font-size--base);
    font-weight: 600;
    line-height: 1.35;
    color: var(--wp--preset--color--primary);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    margin: 0;
    transition: color 0.2s ease;
}
.acc-video-card:hover .acc-video-title {
    color: var(--wp--preset--color--leaf);
}
.acc-video-date {
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 500;
    color: var(--wp--preset--color--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================================
   Footer
   ============================================================ */
.acc-footer {
    /* Deep espresso-brown gradient — same dark-base + luminous same-family glow
       treatment as the forest-green header and bronze bands. Override the
       block's has-primary-background-color. */
    background-color: #2e2016 !important;
    /* Horizontal (left→right) gradient so the wavy top divider can carry the
       exact same gradient with no angle to fight — the seam disappears. */
    background-image: linear-gradient(90deg, #3a2819 0%, #1d130b 100%) !important;
    color: var(--wp--preset--color--surface);
    position: relative;
    isolation: isolate;
    overflow: clip;
}
/* Wavy top edge for the footer. The divider is pulled up over the bottom of
   the preceding section (negative margin) so its transparent wave troughs
   reveal that section's real color/texture on every page — no white gap.
   The wave itself is filled with a gradient matching the footer's top so it
   reads as the footer rising into the page. */
.acc-footer-wave {
    --acc-fwave-h: clamp(34px, 4vw, 60px);
    position: relative;
    z-index: 1;
    height: var(--acc-fwave-h);
    margin-top: calc(-1 * var(--acc-fwave-h));
    margin-bottom: -1px;
    line-height: 0;
    pointer-events: none;
    background-position: bottom center;
    background-repeat: repeat-x;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='fw' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%233a2819'/%3E%3Cstop offset='1' stop-color='%231d130b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0,60 H1200 V26 C940,-4 260,56 0,26 Z' fill='url(%23fw)'/%3E%3C/svg%3E");
}
/* concrete-wall texture — same image as the "Conservation needs more than an
   audience" support CTA. Overlay blend so it reads on the dark brown. */
.acc-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("/wp-content/uploads/2026/03/concrete-wall.png");
    background-repeat: repeat;
    background-size: 520px auto;
    opacity: 0.20;
    mix-blend-mode: overlay;
}
.acc-footer > * {
    position: relative;
    z-index: 1;
}
.acc-footer .wp-block-heading {
    color: var(--wp--preset--color--surface);
}
/* About: the photo strip ends its section and the closing CTA opens the next,
   so their two lots of section padding stacked into a 128px void. Thinned on
   both sides. Scoped by :has to the marquee's own section, so it only affects
   a section that actually ends in a photo strip. */
body.page-id-978 .acc-page-section:has(.acc-photo-marquee) {
    padding-bottom: var(--wp--preset--spacing--40) !important;
}
body.page-id-978 .acc-page-section:has(.acc-photo-marquee) + .acc-page-section {
    padding-top: var(--wp--preset--spacing--50) !important;
}

/* About — mission intro, paired photos, then the story in two columns.
   Photos are matched 4:3 crops so the pair reads as a set; previously they
   sat inside unequal columns and came out at very different sizes. */
.acc-about-figures {
    margin-top: var(--wp--preset--spacing--50);
    gap: var(--wp--preset--spacing--40);
}
.acc-about-figures .wp-block-image,
.acc-about-figures figure {
    margin: 0;
}
.acc-about-story-title {
    margin-top: var(--wp--preset--spacing--60) !important;
    margin-bottom: var(--wp--preset--spacing--30);
}
/* CSS columns rather than two block columns: three paragraphs of unequal
   length split 2/1 across block columns and left one side stranded. A single
   flow balances itself and stays balanced if the board edits the copy. */
.acc-about-story {
    column-count: 2;
    column-gap: var(--wp--preset--spacing--60);
}
.acc-about-story .acc-about-body {
    margin: 0 0 var(--wp--preset--spacing--30);
    break-inside: avoid;
}
.acc-about-story .acc-about-body:last-child { margin-bottom: 0; }
@media (max-width: 781px) {
    .acc-about-story { column-count: 1; }
}

/* Payment-unavailable notice. When PayPal isn't configured the checkout dialog
   is never built, so this notice carries the page's #join / #give anchor and
   the Join/Donate buttons land here instead of on nothing. Styled in the theme
   rather than the plugin because the plugin's CSS is only enqueued once payment
   IS configured — exactly the case where this notice never appears. */
.acc-pay--unavailable[id] {
    scroll-margin-top: 5rem;
    max-width: 46rem;
    margin: 0 auto;
    padding: 1.5rem 1.75rem;
    background: var(--wp--preset--color--surface, #efe8d6);
    border: 1.5px solid #2c5e34;
    border-radius: 12px;
    text-align: center;
}
.acc-pay--unavailable[id] p {
    margin: 0;
    font-size: 0.975rem;
    line-height: 1.6;
}
.acc-pay--unavailable[id]:focus { outline: none; }

/* Facebook link in the footer's brand column. */
.acc-footer__social {
    margin: 1rem 0 0;
}
.acc-footer__social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.95rem;
    border: 1px solid rgba(239, 232, 214, 0.35);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}
.acc-footer__social-link:hover {
    background: rgba(239, 232, 214, 0.12);
    border-color: var(--wp--preset--color--accent);
}
.acc-footer__social-icon { flex: 0 0 auto; }

/* No underlines down here — the footer is a dense list of links and the rules
   made it read as noise. Color change carries the hover instead. */
.acc-footer a {
    color: var(--wp--preset--color--surface);
    text-decoration: none;
}
.acc-footer a:hover,
.acc-footer a:focus-visible {
    color: var(--wp--preset--color--accent);
    text-decoration: none;
}
.acc-footer .wp-block-list {
    list-style: none;
    padding-left: 0;
}
.acc-footer .wp-block-list li { padding: 0.25rem 0; }

/* ============================================================
   Home audit additions (board preview)
   ============================================================ */

/* Hide partner strip until real logos arrive */
.acc-partners { display: none !important; }

/* Sticky header — subtle shadow for separation when scrolled over imagery */
.acc-sticky-header {
    box-shadow: 0 1px 0 var(--wp--preset--color--border),
                0 6px 16px -8px rgba(13, 38, 20, 0.18);
}

/* Hero CTA — dual-button layout */
.acc-hero__cta.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: var(--wp--preset--spacing--40);
}
.acc-hero__cta .wp-block-button {
    margin: 0;
}
.acc-hero__cta .wp-block-button__link {
    padding: 0.85rem 1.4rem;
    font-size: 0.95rem;
}
.acc-hero__cta-btn--outline .wp-block-button__link,
.acc-hero__cta .is-style-outline .wp-block-button__link {
    background: transparent !important;
    color: var(--wp--preset--color--background) !important;
    border: 2px solid var(--wp--preset--color--accent) !important;
}
.acc-hero__cta-btn--outline .wp-block-button__link:hover,
.acc-hero__cta .is-style-outline .wp-block-button__link:hover {
    background: var(--wp--preset--color--accent) !important;
    color: var(--wp--preset--color--primary) !important;
}

/* Hero image — readable gradient overlay so credit + future captions read clean */
.acc-hero--split .acc-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(13, 38, 20, 0) 55%,
        rgba(13, 38, 20, 0.55) 100%
    );
    pointer-events: none;
    z-index: 1;
}
.acc-hero--split .acc-hero__credit { z-index: 3; }

/* Upcoming Events strip */
.acc-events {
    padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
    background: var(--wp--preset--color--background);
}
.acc-events > h2.wp-block-heading {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 800;
    color: var(--wp--preset--color--primary);
    margin: 0 0 var(--wp--preset--spacing--30);
}
.acc-events__intro {
    text-align: center;
    color: var(--wp--preset--color--muted);
    margin: 0 auto var(--wp--preset--spacing--60);
    max-width: 60ch;
}
.acc-events__row { gap: var(--wp--preset--spacing--40) !important; }
.acc-event-card.wp-block-column {
    background: var(--wp--preset--color--background);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 10px;
    padding: var(--wp--preset--spacing--50);
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--30);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.acc-event-card.wp-block-column:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(13, 38, 20, 0.08);
    border-color: var(--wp--preset--color--leaf);
}

/* The whole card is one click target — a stretched link on the title. The card
   already lifts on hover, which promised a destination it did not have; this
   is that destination (a speaker's page for a talk, otherwise the event's spot
   in the calendar). The overlay is the title's own ::after, so keyboard focus
   and the accessible name stay on the heading where they belong. */
.acc-event-card--linked.wp-block-column { position: relative; }
/* No underline, ever — not at rest and not on hover. The card is the link, and
   the whole card already answers the hover: it lifts, and the border turns
   leaf green. Underlining the title on top of that made the heading look like
   a second, separate link sitting inside the first. */
/* Selector carries the h3 on purpose. theme.json underlines every link with
   `:root :where(a:not(.wp-element-button))`, which scores the same as a single
   class and is printed after this file — a bare .acc-event-card__titlelink
   loses the tie and the title comes back underlined. */
.acc-event-card h3 .acc-event-card__titlelink,
.acc-event-card h3 .acc-event-card__titlelink:hover,
.acc-event-card h3 .acc-event-card__titlelink:focus,
.acc-event-card h3 .acc-event-card__titlelink:visited {
    color: inherit;
    text-decoration: none;
}
.acc-event-card__titlelink::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
}
.acc-event-card--linked:focus-within {
    border-color: var(--wp--preset--color--leaf);
    box-shadow: 0 0 0 3px rgba(45, 90, 61, 0.28);
}
.acc-event-card__titlelink:focus { outline: none; }

/* Everything else in the card that takes its own click has to sit above the
   overlay: the map link, a park badge, and the "Add to calendar" disclosure. */
.acc-event-card--linked .acc-event-card__meta a,
.acc-event-card--linked .acc-event-badge--link,
.acc-event-card--linked .acc-addcal {
    position: relative;
    z-index: 1;
}
/* Placeholder cards, filling out a short row on the home page. Same footprint
   as a real card so the row keeps its rhythm, but painted as a hole in the
   band rather than a panel on it: a wash of the band's own darkness, a hairline
   of cream at low alpha, and no hover — there is nothing to click. */
.acc-event-card--ghost.wp-block-column {
    background: rgba(28, 12, 6, 0.16);
    border: 1px dashed rgba(250, 246, 238, 0.28);
    box-shadow: none;
    transform: none;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* A real card is taller than its own content in this row; the ghost has
       almost none, so it needs a floor or it collapses when it is the only
       thing setting the height (three empty slots, no events). */
    min-height: 11rem;
}
.acc-event-card--ghost.wp-block-column:hover {
    transform: none;
    box-shadow: none;
    border-color: rgba(250, 246, 238, 0.28);
}
.acc-event-card__ghost-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    color: rgba(250, 246, 238, 0.5);
}
.acc-event-card__ghost-ico { opacity: 0.75; }

/* Gone on a phone. Stacked one per row there is no gap to fill, and a
   placeholder becomes a full-width box a reader has to scroll past to reach
   the button. The problem it solves only exists side by side. */
@media (max-width: 781px) {
    .acc-event-card--ghost.wp-block-column { display: none; }
}
.acc-event-card__ghost-text {
    margin: 0 !important;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: inherit;
    max-width: 18ch;
    line-height: 1.4;
}

/* The date tile: month strip over a large numeral, the shape people already
   read on a calendar. Sits beside the title rather than above it, so the card
   leads with when-and-what together. */
.acc-event-card__head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}
.acc-event-card__headtext { min-width: 0; }

.acc-event-card__tile {
    flex: none;
    width: 3.5rem;
    border: 1.5px solid var(--wp--preset--color--primary);
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    background: var(--wp--preset--color--background);
    /* Optical, not mathematical: the cap-height of the title sits a touch
       below the top of the tile, and matching them exactly reads as the tile
       hanging low. */
    margin-top: 0.15rem;
}
.acc-event-card__tile-month {
    display: block;
    padding: 2px 0 1px;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--background);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.5;
}
.acc-event-card__tile-day {
    display: block;
    padding: 0.15rem 0 0.25rem;
    color: var(--wp--preset--color--primary);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

/* Weekday and time, under the title: useful once the date has caught you. */
.acc-event-card__when {
    margin: 0.3rem 0 0 !important;
    color: var(--wp--preset--color--leaf);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    font-size: 0.72rem;
}
.acc-event-card h3.wp-block-heading {
    margin: 0 !important;
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--wp--preset--color--primary);
}
/* Who is speaking — the line a talk card is really about.
   Sits directly under the date and title, in the card's own green rather than
   the muted grey used for a location: this is the draw, not an aside. The
   credential beneath it is the quiet half. */
.acc-event-card__speaker {
    margin: 0 !important;
    font-size: 1rem;
    line-height: 1.35;
    color: var(--wp--preset--color--primary);
}
.acc-event-card__speaker strong { font-weight: 700; }
.acc-event-card__speaker-of {
    margin: 0.1rem 0 0 !important;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--wp--preset--color--muted);
}

.acc-event-card__meta {
    color: var(--wp--preset--color--muted);
    font-size: 0.9rem;
    margin: 0 !important;
}
.acc-event-card__link a {
    color: var(--wp--preset--color--leaf);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    font-size: 0.8rem;
    text-decoration: none;
}
.acc-event-card__link a:hover {
    color: var(--wp--preset--color--primary);
    text-decoration: underline;
}

/* Card footer — all badges (org + categories), grouped bottom-left */
/* Bottom row of an event card: category/org badges on the left, the
   "Add to calendar" pill on the right. Previously these were two stacked
   rows, which added a whole row of height to every card — and because the
   cards sit in a grid, the tallest one sets the height for all of them. */
.acc-event-card__actions {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    flex-wrap: wrap;
}
.acc-event-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}
/* Right-aligned even when a card has no badges at all. */
.acc-event-card__actions .acc-addcal {
    margin-top: 0;
    margin-left: auto;
    flex: none;
    position: relative;
}
/* Opens upward and anchored right, so revealing the menu doesn't push the
   card taller and re-flow the whole grid row. */
.acc-event-card__actions .acc-addcal__menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.4rem);
    margin-top: 0;
    min-width: 200px;
    z-index: 5;
}
/* Card badges run a little tighter than the ones on the events list: this
   footer has to fit a badge and the calendar pill on one line inside ~324px.
   Scoped to the card so full-size badges elsewhere are untouched. */
.acc-event-card__actions .acc-event-badge {
    font-size: 0.68rem;
    letter-spacing: 0.045em;
    padding: 2px 9px;
    white-space: nowrap;
}
.acc-event-card__actions .acc-addcal__btn {
    font-size: 0.78rem;
    padding: 0.3rem 0.62rem;
    white-space: nowrap;
}
@media (max-width: 480px) {
    /* Stacked, the pill sits under the badges rather than beside them.
       Alignment stays centred: this row is a badge against a taller pill, and
       flex-start hung the badge off the pill's top edge. When the two do wrap
       onto separate lines each line holds one item, so centring changes
       nothing there -- it only fixes the case where they sit side by side. */
    .acc-event-card__actions .acc-addcal { margin-left: 0; }
}
/* Event category badges */
.acc-event-card__cats {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 !important;
}
.acc-event-badge {
    display: inline-block;
    background: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--leaf);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
/* Platform badge on a talk card — "how do I attend" rather than "what kind of
   thing is this". Mixed case, because Zoom is a name and the category chips'
   small caps would make it ZOOM; the glyph carries the "it's a video call"
   half so the word does not have to. */
.acc-event-badge--platform {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.78rem;
}
/* The Zoom badge is the wordmark and nothing else, so the pill only has to
   give it room to breathe: tighter padding than a text chip, and no uppercase
   or tracking to inherit. The mark carries its own blue, which is why this
   badge does not take the green. */
.acc-event-badge--zoom {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    background: var(--wp--preset--color--background);
}
.acc-event-badge__logo {
    display: block;
    width: 58px;
    height: auto;
}

/* Organization badge — warm clay fill, sits under the title to credit the
   hosting/partner org. Visually distinct from the green category chips. */
.acc-event-card__org {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 !important;
}
.acc-event-badge--org {
    background: var(--wp--preset--color--clay);
    color: #fbf3e7;
    border-color: transparent;
}

/* A park badge that leads to that park's page should look like it does —
   quietly, since it sits next to category badges that lead nowhere. Color
   alone would not carry that, so the cue is on hover and focus. */
a.acc-event-badge--link {
    text-decoration: none !important;
    color: #fbf3e7;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}
a.acc-event-badge--link:hover,
a.acc-event-badge--link:focus-visible {
    filter: brightness(1.12);
    box-shadow: 0 0 0 2px rgba(140, 74, 50, 0.35);
}

/* "Voting & Elections" events — a quiet civic-slate accent so they stand out
   just slightly from the green/sienna event cards without shouting. */
.acc-event-card--vote .acc-event-card__date {
    color: #3a4f6b;
}
.acc-event-badge--vote {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #3a4f6b;
    color: #fbf3e7;
    border-color: transparent;
}
.acc-event-badge--vote .acc-vote-ico {
    flex: 0 0 auto;
    margin-top: -1px;
}

/* Home "Upcoming Events" band — Warm Sienna accent (cream text).
   Class name kept (.acc-home-events--blue) for backwards compatibility. */
.acc-home-events--blue {
    background-color: #8c4a32 !important;
    background-image:
        radial-gradient(900px 380px at 12% -10%, rgba(230, 160, 120, 0.15), transparent 60%),
        radial-gradient(700px 360px at 100% 120%, rgba(255, 255, 255, 0.05), transparent 60%),
        linear-gradient(135deg, #8c4a32 0%, #5a2c1c 100%) !important;
    /* Subtle wave top & bottom edges so the band flows into the sections
       above/below instead of meeting them with flat seams. The waves are
       painted in the surface/tan color of the neighboring bands via
       ::after (::before already carries the paper texture). Extra padding
       clears the wave strips. */
    --acc-wave-h: clamp(34px, 4vw, 60px);
    padding-top: calc(var(--wp--preset--spacing--70, 4rem) + var(--acc-wave-h)) !important;
    padding-bottom: calc(var(--wp--preset--spacing--70, 4rem) + var(--acc-wave-h)) !important;
}
.acc-home-events--blue::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1200 V34 C940,64 260,4 0,34 Z' fill='%23efe8d6'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 H1200 V26 C940,-4 260,56 0,26 Z' fill='%23efe8d6'/%3E%3C/svg%3E");
    background-position: top center, bottom center;
    background-repeat: repeat-x, repeat-x;
    background-size: 100% var(--acc-wave-h), 100% var(--acc-wave-h);
}
.acc-home-events--blue h2.wp-block-heading { color: #fbf3e7 !important; }
/* Accent rule under the heading — green clashes on the brown band; use warm sand. */
.acc-home-events--blue > h2.wp-block-heading::after { background: var(--wp--preset--color--sand) !important; }
.acc-home-events--blue > p,
.acc-home-events--blue > p:first-of-type,
.acc-home-events--blue .has-muted-color { color: #f0e3cd !important; }
.acc-home-events--blue .is-style-outline .wp-block-button__link {
    color: #fbf3e7;
    border-color: rgba(251, 243, 231, 0.55);
    background-color: transparent;
}
.acc-home-events--blue .is-style-outline .wp-block-button__link:hover {
    background-color: rgba(251, 243, 231, 0.12);
    border-color: #fbf3e7;
    color: #fbf3e7;
}

/* Events calendar page — category filter chips */
.acc-events-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 var(--wp--preset--spacing--50);
}
.acc-events-filter__chip {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid var(--wp--preset--color--border);
    background: var(--wp--preset--color--background);
    color: var(--wp--preset--color--primary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s;
}
.acc-events-filter__chip:hover {
    background: var(--wp--preset--color--surface);
}
.acc-events-filter__chip.is-active {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--background);
    border-color: var(--wp--preset--color--primary);
}

/* Calendar header — lede + controls (left), partner upsell card (right).
   The lede gives the control column something to sit under; without it the
   filter and subscribe pills floated in half a screen of nothing. */
.acc-events-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    margin-bottom: var(--wp--preset--spacing--60);
}
@media (max-width: 781px) {
    .acc-events-head { grid-template-columns: 1fr; }
}
.acc-events-head__intro { min-width: 0; }
.acc-events-head__lede {
    margin: 0 0 1.1rem !important;
    max-width: 34ch;
    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    line-height: 1.4;
    color: var(--wp--preset--color--primary);
}
/* Filter and subscribe read as one control row, not two stacked orphans. */
.acc-events-head__controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.acc-events-head .acc-events-filter { margin: 0; }
.acc-events-head__controls .acc-subscribe { margin-top: 0; }

.acc-events-head__cta {
    background: var(--wp--preset--color--sand);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 16px;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}
.acc-events-head__cta-title {
    margin: 0 !important;
    font-family: var(--wp--preset--font-family--serif);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.2;
    color: var(--wp--preset--color--primary);
}
.acc-events-head__cta-text {
    margin: 0 !important;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--wp--preset--color--foreground);
}
.acc-events-head__cta-btn {
    margin-top: 0.4rem;
    display: inline-flex;
    align-items: center;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--background);
    border-radius: 999px;
    padding: 0.7em 1.5em;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-decoration: none !important;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease;
}
.acc-events-head__cta-btn:hover {
    background: var(--wp--preset--color--primary-light);
}

/* Empty calendar.
   Had no styling at all, so it rendered as one stray sentence hanging under
   the filter row — which reads as a page that failed rather than a council
   between seasons. A centered panel on the same sand/border idiom as the
   partner CTA opposite says "nothing scheduled yet" and looks deliberate.
   The dashed border is the one departure: solid would make it a card, and a
   card implies content. */
.acc-events__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    margin: clamp(1.5rem, 4vw, 2.5rem) auto 0;
    padding: clamp(2rem, 6vw, 3.25rem) clamp(1.25rem, 4vw, 2rem);
    max-width: 34rem;
    background: var(--wp--preset--color--sand);
    border: 1.5px dashed var(--wp--preset--color--border);
    border-radius: 16px;
}
.acc-events__empty-ico {
    color: var(--acc-empty-fg, var(--wp--preset--color--primary));
    opacity: 0.4;
    margin-bottom: 0.25rem;
}
.acc-events__empty-title {
    margin: 0;
    font-family: var(--wp--preset--font-family--serif, Lora, Georgia, serif);
    font-size: clamp(1.15rem, 2.5vw, 1.4rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--acc-empty-fg, var(--wp--preset--color--primary));
}
.acc-events__empty-text {
    margin: 0;
    max-width: 34ch;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--acc-empty-muted, var(--wp--preset--color--muted));
}
/* Selector carries the parent purely for specificity. theme.json sets
   `elements.link.typography.textDecoration: underline`, which WordPress emits
   as `:root :where(a:not(.wp-element-button))` — the same 0,1,0 as a single
   class, and global styles are printed after this file, so a bare
   `.acc-events__empty-btn { text-decoration: none }` lost the tie and the
   button drew underlined. Two classes settle it. */
.acc-events__empty .acc-events__empty-btn {
    margin-top: 0.75rem;
    display: inline-flex;
    align-items: center;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--background);
    border-radius: 999px;
    padding: 0.7em 1.5em;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-decoration: none;
}
.acc-events__empty .acc-events__empty-btn:hover,
.acc-events__empty .acc-events__empty-btn:focus {
    background: var(--wp--preset--color--primary-light);
    color: var(--wp--preset--color--background);
}

/* The home strip version sits in a three-card row, where the full panel would
   dwarf the sections either side of it. Same words, no walls. */
.acc-events__empty--compact {
    background: none;
    border: 0;
    padding: clamp(1.5rem, 4vw, 2.25rem) 1rem;
}
.acc-events__empty--compact .acc-events__empty-ico {
    width: 32px;
    height: 32px;
}

/* On the home page this lands inside the Calendar band, which is a dark rust
   (#9c5a2c) with its own cream heading and lede. The panel's default dark
   green on muted grey was close to invisible there — a message nobody can read
   is worse than the bare sentence it replaced. Colors are tokens rather than
   fixed values so a band can state its own, and they match the heading and
   lede the band already sets inline. */
.acc-home-events .acc-events__empty {
    --acc-empty-fg: #fbf3e7;
    --acc-empty-muted: #f0e3cd;
}

/* Touch targets: the theme's 44px floor covers this button too. */
@media (pointer: coarse) {
    .acc-events__empty-btn {
        min-height: 44px;
    }
}

/* Events calendar page — month-grouped list, 2 cards wide (1-up on mobile) */
.acc-events-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wp--preset--spacing--40);
}
@media (max-width: 781px) {
    .acc-events-list { grid-template-columns: 1fr; }
}
.acc-events-list__month {
    grid-column: 1 / -1;
    font-size: 1.1rem !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wp--preset--color--muted);
    border-bottom: 1px solid var(--wp--preset--color--border);
    padding-bottom: 0.4rem;
    margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--20) !important;
}
/* First month heading shouldn't push a big top gap under the filter row */
.acc-events-list__month:first-child { margin-top: 0 !important; }
.acc-events-list__row .acc-event-card.wp-block-column {
    max-width: none;
    width: 100%;
    height: 100%;
    /* Match the contact-page form card surface */
    background: #f7f1e2;
}
.acc-events-list__row { margin-bottom: 0; }

/* Donate band — accent strip before footer */
.acc-donate-band {
    padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--background);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.acc-donate-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at top right,
        color-mix(in srgb, var(--wp--preset--color--leaf) 38%, transparent) 0%,
        transparent 60%
    );
    pointer-events: none;
}
.acc-donate-band > * { position: relative; z-index: 1; }
.acc-donate-band h2.wp-block-heading {
    color: var(--wp--preset--color--background) !important;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.03em;
    margin: 0 0 var(--wp--preset--spacing--30);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
}
.acc-donate-band p {
    color: rgba(255, 255, 255, 0.88);
    max-width: 60ch;
    margin: 0 auto var(--wp--preset--spacing--50);
    font-size: 1.05rem;
}
.acc-donate-band .wp-block-buttons {
    justify-content: center;
    gap: 0.75rem;
}
.acc-donate-band .wp-block-button__link {
    padding: 0.95rem 1.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    border-radius: 999px;
}

/* Welcome icon — SVG instead of broken emoji */
.acc-welcome__icon svg {
    width: 44px;
    height: 44px;
    stroke: var(--wp--preset--color--leaf);
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Current Topics — demote post date, lift title */
.acc-current-topics .wp-block-post-date,
.acc-current-topics .wp-block-post-date a,
.acc-current-topics .wp-block-post-date time {
    color: var(--wp--preset--color--muted) !important;
    font-size: 0.78rem !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    text-decoration: none;
    margin: 0 0 var(--wp--preset--spacing--20) !important;
    display: block;
}
.acc-current-topics .wp-block-post-title,
.acc-current-topics .wp-block-post-title a {
    color: var(--wp--preset--color--primary) !important;
    font-size: 1.35rem !important;
    line-height: 1.25;
    font-weight: 700;
    text-decoration: none;
    margin: 0 0 var(--wp--preset--spacing--30) !important;
}
.acc-current-topics .wp-block-post-title a:hover { color: var(--wp--preset--color--leaf) !important; }
.acc-current-topics .wp-block-post-excerpt p { color: var(--wp--preset--color--foreground); font-size: 0.95rem; line-height: 1.55; }
.acc-current-topics .wp-block-post-excerpt__more-link {
    display: inline-block;
    margin-top: var(--wp--preset--spacing--30);
    color: var(--wp--preset--color--leaf);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    font-size: 0.8rem;
    text-decoration: none;
}
.acc-current-topics .wp-block-post-excerpt__more-link:hover {
    color: var(--wp--preset--color--primary);
    text-decoration: underline;
}

/* Current Topics — tan band. Section heading + subtitle are dark (on tan);
   each post sits in a white card so it stands out on the tan. */
.acc-current-topics {
    background-color: var(--wp--preset--color--surface) !important; /* tan */
}
.acc-current-topics h2.wp-block-heading {
    color: var(--wp--preset--color--primary) !important;
}
.acc-current-topics > p,
.acc-current-topics > .wp-block-group > p,
.acc-current-topics p.has-muted-color {
    color: var(--wp--preset--color--muted) !important;
}
/* Light card panel behind each post (image flush top, text padded) */
.acc-current-topics .wp-block-post > .wp-block-group {
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.5);
}
/* Equal-height cards: stretch the card + text column so the CTA can sink. */
.acc-current-topics .wp-block-post {
    height: 100%;
}
.acc-current-topics .wp-block-post > .wp-block-group {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.acc-current-topics .wp-block-post > .wp-block-group > .wp-block-group {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.acc-current-topics .wp-block-post-excerpt {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
/* Pin the "read more" to the bottom-right of every card */
.acc-current-topics .wp-block-post-excerpt__more-text {
    margin-top: auto !important;
    align-self: flex-end;
    margin-bottom: 0 !important;
    padding-top: var(--wp--preset--spacing--30);
}
/* Style it as the same rounded pill as the hero feature cards */
.acc-current-topics .wp-block-post-excerpt__more-text a,
.acc-current-topics .wp-block-post-excerpt__more-link {
    display: inline-block;
    background-color: var(--wp--preset--color--primary) !important;
    color: #ffffff !important;
    font-size: var(--wp--preset--font-size--xs) !important;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: none !important;
    text-decoration: none !important;
    padding: 0.5em 1.25em;
    border-radius: 999px;
    border: 0;
    line-height: 1.2;
    margin-top: 0 !important;
    transition: background-color 140ms ease, transform 140ms ease;
}
.acc-current-topics .wp-block-post-excerpt__more-text a:hover,
.acc-current-topics .wp-block-post-excerpt__more-link:hover {
    background-color: var(--wp--preset--color--primary-light, #2c5e34) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}
/* Keep the featured image full-bleed inside the flex card (flex + WP's auto
   side-margins were shrinking & centering it). */
.acc-current-topics .wp-block-post-featured-image {
    width: 100% !important;
    margin: 0 !important;
    align-self: stretch;
}
.acc-current-topics .wp-block-post-featured-image img {
    width: 100% !important;
    display: block;
}
/* Tighten vertical rhythm between title / date / description */
.acc-current-topics .wp-block-post > .wp-block-group > .wp-block-group {
    gap: 0.45rem;
    padding-top: 0.35rem !important;
}
.acc-current-topics .wp-block-post-title {
    margin: 0 !important;
}
.acc-current-topics .wp-block-post-date,
.acc-current-topics .wp-block-post-date time {
    margin: 0 !important;
}
.acc-current-topics .wp-block-post-excerpt {
    margin: 0.35rem 0 0 !important;
}
.acc-current-topics .wp-block-post-excerpt p.wp-block-post-excerpt__excerpt {
    margin: 0 !important;
}

@media (max-width: 781px) {
    .acc-donate-band h2.wp-block-heading { font-size: 1.5rem; }
    .acc-events__row { gap: var(--wp--preset--spacing--30) !important; }
    .acc-events { padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30); }
    .acc-hero--split .acc-hero__credit {
        font-size: 0.65rem !important;
        padding: 0.15rem 0.4rem;
        right: 0.35rem;
        top: 0.35rem;
    }
}

/* Events strip — 3-col grid that wraps to multiple rows (home strip now shows
   up to 6). Desktop = 3 across, tablet = 2 across, mobile = 1. */
@media (min-width: 900px) {
    .acc-events__row {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--wp--preset--spacing--40) !important;
    }
}
@media (min-width: 600px) and (max-width: 899px) {
    .acc-events__row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--wp--preset--spacing--40) !important;
    }
}

/* Info Grid — 2-col on small tablet so 4×5 link wall doesn't read as 20-tall stack */
@media (min-width: 480px) and (max-width: 899px) {
    .acc-info-grid .wp-block-columns {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--wp--preset--spacing--50) !important;
    }
    .acc-info-grid .wp-block-column {
        flex-basis: auto !important;
        min-width: 0;
    }
}

/* =========================================================================
   Inner pages: Board / Membership / Sponsorship / Contact
   Editorial-conservation system — primary-green hero band, alignwide body,
   Lora serif display, sage surface alternations.
   ========================================================================= */

/* --- Inner page hero band --- */
.acc-page-hero {
    position: relative;
    overflow: hidden;
}
.acc-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 380px at 12% -10%, rgba(19, 236, 19, 0.10), transparent 60%),
        radial-gradient(700px 360px at 100% 120%, rgba(255, 255, 255, 0.05), transparent 60%);
    pointer-events: none;
}
.acc-page-hero__inner {
    position: relative;
    gap: var(--wp--preset--spacing--60);
}
.acc-page-hero__text {
    flex: 0 1 auto;
    min-width: 0;
}
.acc-page-hero__eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent);
    margin: 0;
    line-height: 1;
}
.acc-page-hero__title {
    font-size: clamp(2.5rem, 4.5vw, 4.25rem);
    font-weight: 500;
    line-height: 1.0;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--wp--preset--color--background);
}
.acc-page-hero__lede {
    max-width: 36ch;
    font-size: 1.0625rem;
    line-height: 1.55;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    text-align: right;
    flex: 0 1 36ch;
}
@media (max-width: 781px) {
    .acc-page-hero__inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: var(--wp--preset--spacing--40);
    }
    .acc-page-hero__lede {
        text-align: left;
        flex-basis: auto;
    }
    .acc-page-hero__title {
        font-size: clamp(2.25rem, 8vw, 3rem);
    }
}

/* --- Section eyebrow / title shared by inner pages --- */
.acc-section-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary);
    margin: 0 0 var(--wp--preset--spacing--20) 0;
}
.acc-section-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0 0 var(--wp--preset--spacing--30) 0;
    color: var(--wp--preset--color--primary);
}
.acc-section-lede {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--wp--preset--color--muted);
    margin: 0;
}

/* ---- Contact: info (left, stacked) + form (right) ---- */
.acc-contact-layout {
    gap: clamp(2rem, 5vw, 4rem) !important;
}
.acc-contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--50);
}
/* Form column lifted into a soft warm card — the page's focal object */
.acc-contact-formcol {
    background: #f7f1e2;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 20px;
    padding: clamp(1.75rem, 3.5vw, 2.75rem);
    box-shadow: 0 30px 70px -48px rgba(26, 58, 31, 0.45);
}
.acc-contact-formcol .acc-contact-form {
    max-width: none;
    margin-top: var(--wp--preset--spacing--30);
}

/* ---- Contact form (stub) ---- */
.acc-contact-form {
    max-width: 640px;
    margin-top: var(--wp--preset--spacing--50);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.acc-contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
}
@media (max-width: 600px) {
    .acc-contact-form__row { grid-template-columns: 1fr; }
}
.acc-contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.acc-contact-form__field span {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary);
}
.acc-contact-form input,
.acc-contact-form textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1.5px solid var(--wp--preset--color--border, #d1d5db);
    border-radius: 10px;
    font: inherit;
    font-size: 1rem;
    background: #fff;
    color: var(--wp--preset--color--foreground);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.acc-contact-form input:focus,
.acc-contact-form textarea:focus {
    outline: none;
    border-color: var(--wp--preset--color--accent);
    box-shadow: 0 0 0 3px rgba(127, 168, 107, 0.25);
}
.acc-contact-form textarea { resize: vertical; }
.acc-contact-form__submit {
    align-self: flex-start;
    background: var(--wp--preset--color--primary);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 0.85rem 2rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.acc-contact-form__submit:hover {
    background: var(--wp--preset--color--primary-light, #2c5e34);
    transform: translateY(-1px);
}
.acc-contact-form__note {
    font-size: 0.85rem;
    color: var(--wp--preset--color--muted);
    margin: 0;
}

/* =========================================================================
   Section bands — two-tone accent system on dark gradients with cream text.
   Both leave the forest-green page headers/CTAs alone.
     `acc-page-section--slate` -> Slate Blue  (recurring content bands)
     `acc-page-section--warm`  -> Warm Sienna (accent / highlight bands)
   Each mirrors the header's dark base + luminous same-family glow.
   ========================================================================= */
.acc-page-section--slate {
    /* Slate Blue */
    background-color: #3a4f6b !important;
    background-image:
        radial-gradient(900px 380px at 12% -10%, rgba(150, 180, 222, 0.15), transparent 60%),
        radial-gradient(700px 360px at 100% 120%, rgba(255, 255, 255, 0.05), transparent 60%),
        linear-gradient(135deg, #3a4f6b 0%, #233247 100%) !important;
    /* Subtle wave top & bottom edges (same as the Upcoming Events band),
       painted in the eggshell page color of the neighboring sections. */
    --acc-wave-h: clamp(34px, 4vw, 60px);
    padding-top: calc(var(--wp--preset--spacing--70, 4rem) + var(--acc-wave-h)) !important;
    padding-bottom: calc(var(--wp--preset--spacing--70, 4rem) + var(--acc-wave-h)) !important;
}
.acc-page-section--slate::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    /* Both waves are painted in the eggshell page color. The top one used to
       be tan, which showed as a flat band above the curve wherever the section
       above was the ordinary page background — which is everywhere it's used. */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1200 V34 C940,64 260,4 0,34 Z' fill='%23faf7f0'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M1200,60 H0 V26 C260,-4 940,56 1200,26 Z' fill='%23faf7f0'/%3E%3C/svg%3E");
    background-position: top center, bottom center;
    background-repeat: repeat-x, repeat-x;
    background-size: 100% var(--acc-wave-h), 100% var(--acc-wave-h);
}
/* When a waved slate band is the LAST block before the footer, it has no
   neighbor below — drop its bottom wave and the extra bottom padding so the
   footer's own wave is the single, clean transition into the footer. */
.wp-block-post-content > .acc-page-section--slate:last-child {
    padding-bottom: var(--wp--preset--spacing--70) !important;
}
.wp-block-post-content > .acc-page-section--slate:last-child::after {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1200 V34 C940,64 260,4 0,34 Z' fill='%23faf7f0'/%3E%3C/svg%3E");
    background-position: top center;
    background-repeat: repeat-x;
    background-size: 100% var(--acc-wave-h);
}
/* Breathing room above the footer wave for pages whose content ends in a
   constrained (text) block. Full-bleed bands manage their own bottom edge. */
.wp-block-post-content > :last-child:not(.alignfull) {
    margin-bottom: var(--wp--preset--spacing--70);
}
/* Flush stacked full-width bands — kill the WP block-gap margin between them so
   waved edges meet their neighbor with no white page-bg strip showing. */
.wp-block-post-content > .acc-page-section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.acc-page-section--warm {
    /* Warm Sienna */
    background-color: #8c4a32 !important;
    background-image:
        radial-gradient(900px 380px at 12% -10%, rgba(230, 160, 120, 0.15), transparent 60%),
        radial-gradient(700px 360px at 100% 120%, rgba(255, 255, 255, 0.05), transparent 60%),
        linear-gradient(135deg, #8c4a32 0%, #5a2c1c 100%) !important;
}
:is(.acc-page-section--slate, .acc-page-section--warm) :is(h1, h2, h3, h4, h5,
    .acc-section-title, .acc-focus__title, .acc-focus__num) {
    color: #fbf3e7 !important;
}
:is(.acc-page-section--slate, .acc-page-section--warm) :is(p, li, strong, .acc-about-body) {
    color: rgba(251, 243, 231, 0.88) !important;
}
:is(.acc-page-section--slate, .acc-page-section--warm) .acc-section-eyebrow {
    color: rgba(255, 255, 255, 0.85) !important;
}
:is(.acc-page-section--slate, .acc-page-section--warm) :is(.acc-focus__copy, .acc-section-lede, .acc-faq__a) {
    color: rgba(251, 243, 231, 0.80) !important;
}
/* keep dividers/borders visible on the band */
:is(.acc-page-section--slate, .acc-page-section--warm) :is(.acc-focus, .acc-volunteer-way, hr) {
    border-color: rgba(251, 243, 231, 0.28) !important;
}
:is(.acc-page-section--slate, .acc-page-section--warm) a:not(.wp-block-button__link) {
    color: #ffffff !important;
}
/* Outline buttons on a band — light, not the default forest green */
:is(.acc-page-section--slate, .acc-page-section--warm) .is-style-outline .wp-block-button__link {
    color: #fbf3e7 !important;
    border-color: rgba(251, 243, 231, 0.55) !important;
    background-color: transparent !important;
}
:is(.acc-page-section--slate, .acc-page-section--warm) .is-style-outline .wp-block-button__link:hover {
    background-color: rgba(251, 243, 231, 0.12) !important;
    border-color: #fbf3e7 !important;
}

/* --- Membership tiers --- */
.acc-tier-grid {
    gap: var(--wp--preset--spacing--40);
}
.acc-tier {
    background: var(--wp--preset--color--background);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 14px;
    padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--20);
    position: relative;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.acc-tier:hover {
    transform: translateY(-2px);
    border-color: var(--wp--preset--color--primary);
    box-shadow: 0 14px 30px -20px rgba(13, 43, 18, 0.35);
}
.acc-tier__mark {
    font-family: var(--wp--preset--font-family--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: 0.06em;
    color: var(--wp--preset--color--primary);
    opacity: 0.55;
    margin: 0;
    line-height: 1;
}
.acc-tier__name {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary);
    margin: 0;
}
.acc-tier__price {
    font-size: 3rem;
    font-weight: 500;
    line-height: 1;
    color: var(--wp--preset--color--primary);
    margin: var(--wp--preset--spacing--20) 0 0 0;
    letter-spacing: -0.02em;
}
.acc-tier__unit {
    font-family: var(--wp--preset--font-family--sans);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--wp--preset--color--muted);
    margin-left: 0.25rem;
}
.acc-tier__desc {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--wp--preset--color--muted);
    margin: 0 0 var(--wp--preset--spacing--30) 0;
    flex: 1;
}
.acc-tier .wp-block-buttons {
    margin-top: auto;
}
.acc-tier .wp-block-button__link {
    width: 100%;
    text-align: center;
    border: 1.5px solid var(--wp--preset--color--primary);
    color: var(--wp--preset--color--primary);
    background: transparent;
    transition: background 160ms ease, color 160ms ease;
}
.acc-tier .wp-block-button__link:hover {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--background);
}
.acc-tier--featured {
    background: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
}
.acc-tier--featured .acc-tier__mark,
.acc-tier--featured .acc-tier__name,
.acc-tier--featured .acc-tier__price {
    color: var(--wp--preset--color--background);
}
.acc-tier--featured .acc-tier__mark { opacity: 0.6; }
.acc-tier--featured .acc-tier__desc { color: rgba(255, 255, 255, 0.75); }
.acc-tier--featured .acc-tier__unit { color: rgba(255, 255, 255, 0.65); }
.acc-tier--featured .wp-block-button__link {
    background: var(--wp--preset--color--accent);
    border-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--primary);
}
.acc-tier--featured .wp-block-button__link:hover {
    background: var(--wp--preset--color--background);
    border-color: var(--wp--preset--color--background);
    color: var(--wp--preset--color--primary);
}
.acc-tier__badge {
    position: absolute;
    top: var(--wp--preset--spacing--30);
    right: var(--wp--preset--spacing--40);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent);
    margin: 0;
    line-height: 1;
}
@media (max-width: 781px) {
    .acc-tier-grid .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* --- Membership benefits split --- */
.acc-benefits {
    gap: var(--wp--preset--spacing--60);
}
.acc-benefit-grid {
    gap: var(--wp--preset--spacing--40);
    margin-bottom: var(--wp--preset--spacing--40);
}
.acc-benefit-grid:last-child { margin-bottom: 0; }
.acc-benefit {
    border-top: 1px solid var(--wp--preset--color--border);
    padding-top: var(--wp--preset--spacing--40);
}
.acc-benefit__title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--wp--preset--color--primary);
    margin: 0 0 var(--wp--preset--spacing--20) 0;
    letter-spacing: -0.005em;
}
.acc-benefit__copy {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--wp--preset--color--muted);
    margin: 0;
}

/* --- Sponsorship benefits --- */
.acc-sponsor-benefits {
    gap: var(--wp--preset--spacing--60);
}
.acc-sponsor-benefit {
    padding-top: var(--wp--preset--spacing--30);
    border-top: 2px solid var(--wp--preset--color--primary);
}
.acc-sponsor-benefit__num {
    font-size: 0.875rem;
    font-weight: 500;
    font-style: italic;
    color: var(--wp--preset--color--primary);
    opacity: 0.55;
    margin: 0 0 var(--wp--preset--spacing--30) 0;
    letter-spacing: 0.04em;
}
.acc-sponsor-benefit__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--wp--preset--color--primary);
    margin: 0 0 var(--wp--preset--spacing--20) 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.acc-sponsor-benefit__copy {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--wp--preset--color--muted);
    margin: 0;
}

.acc-sponsor-card {
    position: relative;
    overflow: hidden;
    gap: var(--wp--preset--spacing--50);
}
.acc-sponsor-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(600px 280px at 100% 0%, rgba(19, 236, 19, 0.10), transparent 60%);
    pointer-events: none;
}
.acc-sponsor-card__text {
    position: relative;
    flex: 1 1 360px;
    min-width: 0;
}
.acc-sponsor-card .wp-block-buttons {
    position: relative;
    flex: 0 0 auto;
}
.acc-sponsor-card__eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent);
    margin: 0;
    line-height: 1;
}
.acc-sponsor-card__title {
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--wp--preset--color--background);
}
.acc-sponsor-card__copy {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
    max-width: 44ch;
}

/* --- Board grid wrapper --- */
/* acc_board shortcode renders <section.acc-board> as a non-aligned child
   of the constrained .acc-page-section, so WP's constrained layout
   clamps it to the 800px content-size. Lift to wide-size so the grid
   matches alignwide blocks on the rest of the page. */
.acc-page-section > .acc-board {
    max-width: var(--wp--style--global--wide-size) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.acc-page-section > .acc-board + .acc-board {
    margin-top: var(--wp--preset--spacing--60) !important;
}

/* --- Board "interested in serving" CTA --- */
.acc-board-join {
    gap: var(--wp--preset--spacing--50);
}
.acc-board-join__text {
    flex: 1 1 360px;
    min-width: 0;
}
.acc-board-join__title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0 0 var(--wp--preset--spacing--20) 0;
    color: var(--wp--preset--color--primary);
}
.acc-board-join__lede {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--wp--preset--color--muted);
    margin: 0;
    max-width: 56ch;
}

/* --- Contact items --- */
.acc-contact-grid {
    gap: var(--wp--preset--spacing--60);
}
.acc-contact-item {
    border-top: 2px solid var(--wp--preset--color--primary);
    padding-top: var(--wp--preset--spacing--30);
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--20);
}
.acc-contact-item__label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary);
    margin: 0;
}
.acc-contact-item__value {
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--wp--preset--color--primary);
    margin: 0;
}
.acc-contact-item__value a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color 160ms ease;
    word-break: break-word;
}
.acc-contact-item__value a:hover {
    color: var(--wp--preset--color--primary-light);
}
.acc-contact-item__hint {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--wp--preset--color--muted);
    margin: 0;
}

/* Contact info (left of form) — airy editorial list, hairline dividers,
   forest line-icons. No boxes. (Replaces the old warm-clay cards.) */
.acc-contact-info {
    gap: 0;
    padding-top: 0.25rem;
}
.acc-contact-info .acc-contact-item {
    position: relative;
    border: 0;
    border-top: 1px solid var(--wp--preset--color--border);
    border-radius: 0;
    background: none;
    box-shadow: none;
    padding: 1.85rem 0 1.85rem 3.5rem;
    gap: 0.4rem;
}
.acc-contact-info .acc-contact-item:first-child {
    border-top: 0;
    padding-top: 0.1rem;
}
/* Icon badge — soft sand disc with a forest line-icon centered inside */
.acc-contact-info .acc-contact-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.7rem;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: 50%;
    background: var(--wp--preset--color--sand)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a3a1f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")
        center / 1.3rem no-repeat;
}
.acc-contact-info .acc-contact-item:first-child::before {
    top: 0;
}
/* Third item is "Before you write / Read our FAQ" -- it was inheriting the
   default envelope, so two of the three discs looked identical. */
.acc-contact-info .acc-contact-item:nth-of-type(3)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a3a1f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.6 9.2a2.5 2.5 0 0 1 4.8.9c0 1.7-2.4 2.1-2.4 3.6'/%3E%3Cpath d='M12 17.4h.01'/%3E%3C/svg%3E");
}
.acc-contact-info .acc-contact-item:nth-of-type(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a3a1f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6-5.2-6-10a6 6 0 0 1 12 0c0 4.8-6 10-6 10Z'/%3E%3Ccircle cx='12' cy='11' r='2.2'/%3E%3C/svg%3E");
}
/* WordPress's constrained-layout class sits on these groups and pushes
   `margin-inline: auto` onto every child. Inside a flex column that shrink-
   wraps each line and centers it, so the label, value and hint each floated to
   a different horizontal position -- the "half centered" look. Pin them back to
   the left edge and let them fill the column. */
.acc-contact-info .acc-contact-item {
    align-items: stretch;
}
.acc-contact-info .acc-contact-item > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none;
    text-align: left;
}
.acc-contact-info .acc-contact-item__label {
    color: var(--wp--preset--color--primary);
}
.acc-contact-info .acc-contact-item__label::before {
    content: none;
}
.acc-contact-info .acc-contact-item__value,
.acc-contact-info .acc-contact-item__value a {
    color: var(--wp--preset--color--primary);
}
.acc-contact-info .acc-contact-item__value {
    font-size: 1.25rem;
}
.acc-contact-info .acc-contact-item__value a {
    text-decoration: none;
}
.acc-contact-info .acc-contact-item__value a:hover {
    text-decoration: underline;
    text-underline-offset: 0.18em;
    color: var(--wp--preset--color--primary-light);
}
.acc-contact-info .acc-contact-item__hint {
    color: var(--wp--preset--color--muted);
}

.acc-contact-cta {
    gap: var(--wp--preset--spacing--50);
}
.acc-contact-cta__text {
    flex: 1 1 360px;
    min-width: 0;
}
.acc-contact-cta__title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0 0 var(--wp--preset--spacing--20) 0;
    color: var(--wp--preset--color--primary);
}
.acc-contact-cta__lede {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--wp--preset--color--muted);
    margin: 0;
    max-width: 56ch;
}



/* =========================================================================
   Primary Navigation — dropdown submenus + Donate CTA
   ========================================================================= */

/* Submenu trigger — match top-level link styling, drop the default chevron */
.acc-main-nav .wp-block-navigation__submenu-icon {
    width: 0.6em;
    height: 0.6em;
    margin-left: 0.35em;
    fill: currentColor;
    opacity: 0.7;
}

/* Submenu panel — invisible hover-bridge above the panel keeps the
   trigger's :hover state active while the mouse travels from the nav
   item down to the dropdown. Without it the mouse crosses dead space
   and the submenu closes. */
.acc-main-nav .wp-block-navigation__submenu-container {
    background: var(--wp--preset--color--background);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 6px;
    box-shadow: 0 16px 36px -22px rgba(13, 43, 18, 0.45),
                0 2px 6px -2px rgba(13, 43, 18, 0.18);
    padding: 0.5rem 0;
    min-width: 220px;
    /* Not flush. Sitting on the trigger's bottom edge, the panel's white
       rectangle cut the last row off the current item's pill and made it look
       flat-bottomed. The invisible bridge above (-14px) is deeper than this
       gap, so hover still survives the trip down. */
    margin-top: 8px !important;
}
.acc-main-nav .wp-block-navigation__submenu-container::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
    background: transparent;
}
.acc-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
    margin: 0;
}
.acc-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: block;
    padding: 0.55rem 1rem !important;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--wp--preset--color--primary) !important;
    border-radius: 0;
    transition: background 140ms ease, color 140ms ease;
}
.acc-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.acc-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
    background: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--primary) !important;
}

/* Donate CTA pill at the right end of the nav */
.acc-main-nav .wp-block-navigation-item.acc-nav-cta {
    margin-left: 0.5rem;
}
.acc-main-nav .wp-block-navigation-item.acc-nav-cta > .wp-block-navigation-item__content {
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--primary) !important;
    border-radius: 999px;
    padding: 0.45rem 1.1rem !important;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.78rem;
    line-height: 1;
    transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.acc-main-nav .wp-block-navigation-item.acc-nav-cta > .wp-block-navigation-item__content:hover,
.acc-main-nav .wp-block-navigation-item.acc-nav-cta > .wp-block-navigation-item__content:focus-visible {
    background: var(--wp--preset--color--background);
    color: var(--wp--preset--color--primary) !important;
    box-shadow: 0 8px 16px -8px rgba(13, 43, 18, 0.4);
    transform: translateY(-1px);
}

/* =========================================================================
   Mobile menu (responsive overlay) — sectioned, left-aligned, professional.
   Top-level submenu parents (About / Learn / Get Involved / Support) become
   uppercase section headers with a divider; their children sit under them as
   a plain indented list. Plain top-level links (Home) stay simple bold rows.

   Core makes each `li.has-child` a `display: flex; align-items: center`
   column, and gives the submenu `min-width: 200px`. On a 375px panel that
   centered a 200px list inside a 311px row and pushed every child link 55px
   in — an indent nothing in this file asked for, with the guide rail drawn
   at the far edge of it. The list stretches instead, and the indent is the
   0.85rem stated below.
   ========================================================================= */
.acc-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}
/* Outer list — vertical, left-aligned, full width of the panel */
.acc-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100%;
    max-width: none;
    margin: 0;
}
/* Every row left-aligned, full width */
.acc-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100%;
}
/* Undo core's centering on the section rows, so the child list is as wide as
   its parent rather than a 200px block floated to the middle. */
.acc-main-nav .wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item {
    align-items: stretch !important;
    width: 100%;
}
/* Plain top-level link rows (Home). The top-level list is the `.is-responsive`
   UL; nested submenus are `__submenu-container`, so this won't touch children. */
.acc-main-nav .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container.is-responsive > .wp-block-navigation-item > .wp-block-navigation-item__content {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff !important;
    padding: 0.6rem 0.2rem;
    border-radius: 6px;
}
/* Section headers — top-level submenu parents (About / Learn / …) */
.acc-main-nav .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container.is-responsive > .wp-block-navigation-submenu > .wp-block-navigation-item__content {
    font-size: 0.72rem !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--wp--preset--color--accent) !important;
    padding: 0 0.2rem 0.35rem;
    margin-top: var(--wp--preset--spacing--40);
    margin-bottom: 0.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    /* A label, not a target: the 44px touch floor further up the file would
       otherwise leave it floating in its own band. */
    min-height: 0 !important;
}
/* Submenu group — a plain list under its header, not a floating panel */
.acc-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 !important;
    margin: 0;
    min-width: 0 !important;
    width: 100%;
}
.acc-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-size: 1rem !important;
    font-weight: 500;
    color: rgba(246, 248, 246, 0.88) !important;
    padding: 0.5rem 0.2rem 0.5rem 0.85rem !important;
    border-radius: 6px;
}
.acc-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.acc-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff !important;
}
/* Submenus are always expanded in the overlay — drop the chevrons */
.acc-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
    display: none !important;
}
/* Opening the overlay moves focus to the first link — correct for a modal,
   but Chrome paints that programmatic focus as :focus-visible even when the
   menu was opened by thumb. A 2px outline offset around a full-width row,
   over the theme's 5px focus halo, is exactly the shape of a text input:
   every phone opened this menu on "Home" sitting in what looked like a
   search box. Indicate focus by inverting the row instead — still a clear,
   3:1 change for keyboard users, but it reads as a highlighted link. */
.acc-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus,
.acc-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
    outline: none;
    box-shadow: inset 3px 0 0 var(--wp--preset--color--accent);
    background: rgba(255, 255, 255, 0.09);
    color: #ffffff !important;
}
.acc-main-nav .wp-block-navigation__responsive-container.is-menu-open .acc-nav-cta > .wp-block-navigation-item__content {
    display: inline-block;
    width: auto !important;
    margin-top: var(--wp--preset--spacing--40);
}

/* =========================================================================
   About page — additional layout
   ========================================================================= */
.acc-about-intro {
    gap: var(--wp--preset--spacing--60);
}
.acc-about-body {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--wp--preset--color--foreground);
    margin: 0 0 var(--wp--preset--spacing--40) 0;
    max-width: 62ch;
}
.acc-about-body:last-child { margin-bottom: 0; }

.acc-focus-grid {
    gap: var(--wp--preset--spacing--60);
    margin-top: var(--wp--preset--spacing--50);
}
.acc-focus {
    padding-top: var(--wp--preset--spacing--30);
    border-top: 2px solid var(--wp--preset--color--primary);
}
.acc-focus__num {
    font-size: 0.875rem;
    font-weight: 500;
    font-style: italic;
    color: var(--wp--preset--color--primary);
    opacity: 0.55;
    margin: 0 0 var(--wp--preset--spacing--30) 0;
    letter-spacing: 0.04em;
}
.acc-focus__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--wp--preset--color--primary);
    margin: 0 0 var(--wp--preset--spacing--20) 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.acc-focus__copy {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--wp--preset--color--muted);
    margin: 0;
}

.acc-about-cta,
.acc-volunteer-cta,
.acc-events-cta,
.acc-advocacy-cta,
.acc-donate-cta {
    gap: var(--wp--preset--spacing--50);
}
.acc-about-cta__text,
.acc-volunteer-cta__text,
.acc-events-cta__text,
.acc-advocacy-cta__text,
.acc-donate-cta__text {
    flex: 1 1 360px;
    min-width: 0;
}
.acc-about-cta__title,
.acc-volunteer-cta__title,
.acc-events-cta__title,
.acc-advocacy-cta__title,
.acc-donate-cta__title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0 0 var(--wp--preset--spacing--20) 0;
    color: var(--wp--preset--color--primary);
}
.acc-about-cta__lede,
.acc-volunteer-cta__lede,
.acc-events-cta__lede,
.acc-advocacy-cta__lede,
.acc-donate-cta__lede {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--wp--preset--color--muted);
    margin: 0;
    max-width: 56ch;
}
.acc-about-cta__buttons {
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--30);
}

/* ---- Deep-green card CTA — "Find your way in." idiom, reused across pages
   (About, Contact, Advocacy, Volunteer, Events). ---- */
.acc-about-cta,
.acc-contact-cta,
.acc-advocacy-cta,
.acc-volunteer-cta,
.acc-events-cta {
    background-color: var(--wp--preset--color--primary);
    border-radius: 18px;
    padding: clamp(2rem, 5vw, 3.5rem) !important;
    gap: clamp(1.5rem, 4vw, 3rem) !important;
    box-shadow: 0 18px 44px -24px rgba(13, 43, 18, 0.6);
    position: relative;
    overflow: clip;
    isolation: isolate;
}
.acc-about-cta::before,
.acc-contact-cta::before,
.acc-advocacy-cta::before,
.acc-volunteer-cta::before,
.acc-events-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("/wp-content/uploads/2026/03/concrete-wall.png");
    background-repeat: repeat;
    background-size: 600px auto;
    opacity: 0.10;
    mix-blend-mode: screen;
}
.acc-about-cta > *,
.acc-contact-cta > *,
.acc-advocacy-cta > *,
.acc-volunteer-cta > *,
.acc-events-cta > * { position: relative; z-index: 1; }
.acc-about-cta__title,
.acc-contact-cta__title,
.acc-advocacy-cta__title,
.acc-volunteer-cta__title,
.acc-events-cta__title {
    color: #f6f8f6 !important;
}
.acc-about-cta__lede,
.acc-contact-cta__lede,
.acc-advocacy-cta__lede,
.acc-volunteer-cta__lede,
.acc-events-cta__lede {
    color: rgba(246, 248, 246, 0.78) !important;
    max-width: 46ch;
}
/* No underline on any block button, site-wide */
.wp-block-button__link {
    text-decoration: none !important;
}
/* Primary fill = sage on the green card; outline = light */
.acc-about-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.acc-contact-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.acc-advocacy-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.acc-volunteer-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.acc-events-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link {
    background-color: var(--wp--preset--color--accent) !important;
    color: var(--wp--preset--color--primary) !important;
    border-color: var(--wp--preset--color--accent) !important;
}
.acc-about-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.acc-contact-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.acc-advocacy-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.acc-volunteer-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.acc-events-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    background-color: #97bd83 !important;
    border-color: #97bd83 !important;
}
.acc-about-cta .is-style-outline .wp-block-button__link,
.acc-contact-cta .is-style-outline .wp-block-button__link,
.acc-advocacy-cta .is-style-outline .wp-block-button__link,
.acc-volunteer-cta .is-style-outline .wp-block-button__link,
.acc-events-cta .is-style-outline .wp-block-button__link {
    color: #f6f8f6 !important;
    border-color: rgba(246, 248, 246, 0.5) !important;
    background-color: transparent !important;
}
.acc-about-cta .is-style-outline .wp-block-button__link:hover,
.acc-contact-cta .is-style-outline .wp-block-button__link:hover,
.acc-advocacy-cta .is-style-outline .wp-block-button__link:hover,
.acc-volunteer-cta .is-style-outline .wp-block-button__link:hover,
.acc-events-cta .is-style-outline .wp-block-button__link:hover {
    background-color: rgba(246, 248, 246, 0.10) !important;
    border-color: #f6f8f6 !important;
}

/* Donate: "Questions about giving?" — same green-card CTA treatment */
.acc-donate-cta {
    background-color: var(--wp--preset--color--primary);
    border-radius: 18px;
    /* Optical, not mechanical: with equal padding the panel reads bottom-heavy,
       because the serif cap sits below its line-box top while the last line's
       descenders run to the bottom of theirs. Trimming the bottom evens it. */
    padding: clamp(2rem, 5vw, 3.5rem) !important;
    padding-bottom: clamp(1.6rem, 4vw, 2.9rem) !important;
    gap: clamp(1.5rem, 4vw, 3rem) !important;
    box-shadow: 0 18px 44px -24px rgba(13, 43, 18, 0.6);
    position: relative;
    overflow: clip;
    isolation: isolate;
}
.acc-donate-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("/wp-content/uploads/2026/03/concrete-wall.png");
    background-repeat: repeat;
    background-size: 600px auto;
    opacity: 0.10;
    mix-blend-mode: screen;
}
.acc-donate-cta > * { position: relative; z-index: 1; }
.acc-donate-cta__title { color: #f6f8f6 !important; }
.acc-donate-cta__lede { color: rgba(246, 248, 246, 0.78) !important; max-width: 46ch; }
.acc-donate-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link {
    background-color: var(--wp--preset--color--accent) !important;
    color: var(--wp--preset--color--primary) !important;
    border-color: var(--wp--preset--color--accent) !important;
}
.acc-donate-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    background-color: #97bd83 !important;
    border-color: #97bd83 !important;
}
.acc-donate-cta .is-style-outline .wp-block-button__link {
    color: #f6f8f6 !important;
    border-color: rgba(246, 248, 246, 0.5) !important;
    background-color: transparent !important;
}
.acc-donate-cta .is-style-outline .wp-block-button__link:hover {
    background-color: rgba(246, 248, 246, 0.10) !important;
    border-color: #f6f8f6 !important;
}

/* Sponsorship "$100 per year" card — match the green-card CTA style */
.acc-sponsor-card {
    border-radius: 18px !important;
    box-shadow: 0 18px 44px -24px rgba(13, 43, 18, 0.6);
    position: relative;
    overflow: clip;
    isolation: isolate;
    gap: clamp(1.5rem, 4vw, 3rem) !important;
}
.acc-sponsor-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("/wp-content/uploads/2026/03/concrete-wall.png");
    background-repeat: repeat;
    background-size: 600px auto;
    opacity: 0.10;
    mix-blend-mode: screen;
}
.acc-sponsor-card > * { position: relative; z-index: 1; }
.acc-sponsor-card__eyebrow { color: var(--wp--preset--color--accent) !important; }
.acc-sponsor-card .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    background-color: #97bd83 !important;
    border-color: #97bd83 !important;
}

/* About page: never hyphenate / break words mid-word */
/* Never hyphenate, and never break a word that has anywhere else to go.
   `break-word` only fires when a word genuinely cannot fit the line — without
   it a long word at the 50px mobile h1 size is clipped by `overflow-x: clip`
   with no way to scroll to it. */
.wp-block-heading,
.acc-page-hero__title,
p, li {
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
}

/* =========================================================================
   Volunteer + Advocacy — numbered ways list (shares idiom w/ sponsor benefits)
   ========================================================================= */
.acc-volunteer-ways,
.acc-issue-grid {
    gap: var(--wp--preset--spacing--60);
    margin-top: var(--wp--preset--spacing--50);
}
.acc-volunteer-way {
    padding-top: var(--wp--preset--spacing--30);
    border-top: 2px solid var(--wp--preset--color--primary);
}
.acc-volunteer-way__num {
    font-size: 0.875rem;
    font-weight: 500;
    font-style: italic;
    color: var(--wp--preset--color--primary);
    opacity: 0.55;
    margin: 0 0 var(--wp--preset--spacing--30) 0;
    letter-spacing: 0.04em;
}
.acc-volunteer-way__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--wp--preset--color--primary);
    margin: 0 0 var(--wp--preset--spacing--20) 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.acc-volunteer-way__copy {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--wp--preset--color--muted);
    margin: 0;
}

.acc-advocacy-intro {
    gap: var(--wp--preset--spacing--60);
}
.acc-advocacy-body {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--wp--preset--color--foreground);
    margin: 0 0 var(--wp--preset--spacing--40) 0;
}
.acc-advocacy-body:last-child { margin-bottom: 0; }

.acc-issue {
    padding-top: var(--wp--preset--spacing--30);
    border-top: 1px solid var(--wp--preset--color--border);
}
.acc-issue__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--wp--preset--color--primary);
    margin: 0 0 var(--wp--preset--spacing--20) 0;
    line-height: 1.3;
    letter-spacing: -0.005em;
}
.acc-issue__copy {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--wp--preset--color--muted);
    margin: 0;
}

/* =========================================================================
   Donate — option cards
   ========================================================================= */
/* Same card as a membership tier — radius, padding, lift on hover, and the
   small uppercase title. The two pages sit one click apart, so a visitor
   comparing "join" against "give once" shouldn't meet two card languages. */
.acc-donate-options {
    gap: var(--wp--preset--spacing--40);
}
.acc-donate-option {
    padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
    background: var(--wp--preset--color--background);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 14px;
    margin-bottom: var(--wp--preset--spacing--40);
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--20);
    height: 100%;
    position: relative;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.acc-donate-option:last-child { margin-bottom: 0; }
.acc-donate-option:hover {
    transform: translateY(-2px);
    border-color: var(--wp--preset--color--primary);
    box-shadow: 0 14px 30px -20px rgba(13, 43, 18, 0.35);
}
.acc-donate-option__title {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary);
    margin: 0;
}
.acc-donate-option__copy {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--wp--preset--color--muted);
    margin: 0;
    /* Pushes the link to the foot so it lines up across cards of unequal copy,
       the way the tier cards' buttons do. */
    flex: 1;
}
.acc-donate-option__copy strong { color: var(--wp--preset--color--primary); }
/* Mailing address set as an address block — one line per line, the way it
   goes on an envelope, rather than run together after a <br>. */
.acc-donate-option__address {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    font-style: normal;
    color: var(--wp--preset--color--primary);
    flex: 1;
}
/* When an address follows, it's the block that should take up the slack. */
.acc-donate-option__copy:has(+ .acc-donate-option__address) { flex: 0 0 auto; }
.acc-donate-option__link {
    margin: var(--wp--preset--spacing--20) 0 0 0;
    font-size: 0.875rem;
    font-weight: 600;
}
.acc-donate-option__link a {
    color: var(--wp--preset--color--primary);
    text-decoration: none;
    border-bottom: 1px solid var(--wp--preset--color--primary);
    padding-bottom: 1px;
    transition: opacity 140ms ease;
}
.acc-donate-option__link a:hover { opacity: 0.7; }

/* Empty-state helper used by Post Oak Newsletter */
.acc-empty-note {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--wp--preset--color--muted);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
.acc-empty-note a {
    color: var(--wp--preset--color--primary);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/* Advocacy card on home: heading + "Read more" link */
.acc-feature-card__panel h3 a,
.acc-feature-card__panel .acc-feature-card__link a {
    color: inherit;
    text-decoration: none;
}
.acc-feature-card__panel h3 a:hover {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}
.acc-feature-card__link {
    margin-top: var(--wp--preset--spacing--30) !important;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.acc-feature-card__link a {
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    transition: opacity 140ms ease;
}
.acc-feature-card__link a:hover { opacity: 0.7; }

/* Footer Latest Posts — global h-tags color rule was painting them primary
   green over the primary-green footer bg. Force the surface/background tone. */
.acc-footer .wp-block-query .wp-block-post-title,
.acc-footer .wp-block-query .wp-block-post-title a,
.acc-footer .wp-block-query .wp-block-post-date,
.acc-footer .wp-block-query .wp-block-post-date a {
    color: var(--wp--preset--color--background) !important;
}
.acc-footer .wp-block-query .wp-block-post-title a {
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    padding-bottom: 1px;
    transition: border-color 140ms ease;
}
.acc-footer .wp-block-query .wp-block-post-title a:hover {
    border-bottom-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--accent) !important;
}
.acc-footer .wp-block-query .wp-block-post-date {
    opacity: 0.65;
    font-size: 0.8125rem;
}

/* ---------------------------------------------------------------
   FAUNA — participating-groups grid
   Equal-height cards; logos share a fixed box so they align and the
   name/domain lines underneath sit on the same baseline across cards.
   --------------------------------------------------------------- */
.acc-partner-grid {
    align-items: stretch;
}
.acc-partner-grid > .wp-block-column {
    display: flex;
}
.acc-partner-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
    /* Match the homepage feature-card panel: same tint (#eef2e8) and the
       same 1.5px forest-green border, so the partner cards read as the
       same component and lift off the tan band. */
    background: #eef2e8 !important;
    border: 1.5px solid #2c5e34 !important;
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
/* Same lift-on-hover as the homepage event cards. */
.acc-partner-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(13, 38, 20, 0.08);
    border-color: var(--wp--preset--color--leaf) !important;
}
/* Shared logo box — every logo (or text wordmark) is centered in the
   same fixed-height, full-width box, so the name line below always starts
   at the same Y across cards. */
.acc-partner-card__logo,
.acc-partner-card__wordmark {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    width: 100% !important;
    margin: 0 0 var(--wp--preset--spacing--30, 1rem) 0;
}
.acc-partner-card__logo img {
    width: auto !important;
    max-width: 100%;
    max-height: 96px;
    object-fit: contain;
}
/* Placeholder logo box — for groups with no logo yet. Same dimensions as a
   real logo so the name/domain lines align with the other cards. */
.acc-partner-card__logo--placeholder {
    border: 1px dashed var(--wp--preset--color--border, #c9c2ad);
    border-radius: 8px;
    background: var(--wp--preset--color--surface, #efe8d6);
    color: var(--wp--preset--color--muted, #5b5847);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.acc-partner-card__logo--placeholder::after {
    content: "Logo";
}
.acc-partner-card__wordmark {
    font-size: 1.3rem;
    line-height: 1.25;
}
.acc-partner-card__wordmark a {
    text-decoration: none;
}
/* Name line pinned to the same spot; domain line follows. */
.acc-partner-card__name {
    font-weight: 700;
    margin: 0;
}
.acc-partner-card__name a {
    text-decoration: none;
}

/* FAUNA — issue-card topic icons (replace the 01..06 numerals) */
.acc-focus__icon {
    color: var(--wp--preset--color--primary);
    line-height: 0;
    margin-bottom: 0.85rem;
}
.acc-focus__icon svg {
    width: 34px;
    height: 34px;
}
/* On a colored band the green icon clashes — use soft white instead. */
:is(.acc-page-section--slate, .acc-page-section--warm) .acc-focus__icon {
    color: rgba(255, 255, 255, 0.9);
}

/* ===========================================================
   Site-wide paper texture — the same concrete-wall overlay used on
   the FAUNA / "Conservation needs more than an audience" CTA, applied
   over every section band's own background color. The overlay sits
   behind content (z-index:-1 inside an isolated stacking context) and
   multiplies onto whatever background the section already has.

   Two groups: most bands use ::before; bands that already use ::before
   for a glow (page hero, donate band) take the texture on ::after.
   Sections that already carry this texture (intro, support CTA, footer,
   CTAs, sponsor cards) are unchanged — their image was unified above.
   =========================================================== */
.acc-current-topics,
.acc-home-events--blue,
.acc-sponsors,
.acc-page-section,
.acc-hero--split .acc-hero__text,
.acc-page-hero,
.acc-donate-band {
    position: relative;
    isolation: isolate;
}
.acc-current-topics::before,
.acc-home-events--blue::before,
.acc-sponsors::before,
.acc-page-section::before,
.acc-hero--split .acc-hero__text::before,
.acc-page-hero::after,
.acc-donate-band::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("/wp-content/uploads/2026/03/concrete-wall.png");
    background-repeat: repeat;
    background-size: 520px auto;
    opacity: 0.5;
    mix-blend-mode: multiply;
}

/* ============================================================
   Blog system hidden for now (client reviewing newsletter idea).
   Remove these two rules + the acc-footer-latest class to restore.
   ============================================================ */
.acc-current-topics,
.acc-footer-latest { display: none !important; }

/* ============================================================
   Post Oak Newsletter — issue archive grid
   ============================================================ */
.acc-news--inline {
    margin-bottom: var(--wp--preset--spacing--50);
    padding-bottom: var(--wp--preset--spacing--40);
    border-bottom: 1px solid var(--wp--preset--color--border);
}
.acc-news__year {
    font-family: var(--wp--preset--font-family--sans-serif) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    color: var(--wp--preset--color--leaf) !important;
    margin: 0 0 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--wp--preset--color--leaf);
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    flex-wrap: wrap;
}
.acc-news__year:not(:first-child) { margin-top: 3rem; }
.acc-news__count {
    font-size: 1rem;
    font-weight: 500;
    color: var(--wp--preset--color--muted);
    letter-spacing: 0.02em;
}
.acc-news__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 2.25rem 1.5rem;
    margin: 0 0 1.5rem;
}
.acc-news__card { margin: 0; text-align: center; }

/* Each issue is drawn as a bound booklet: stacked page edges under the
   right/bottom (layered box-shadow "sheets"), a spine crease on the left,
   and a hover that lifts the book and tilts it open toward the reader. */
.acc-news__cover {
    margin: 0 0 0.8rem;
    perspective: 900px;
}
.acc-news__cover a {
    position: relative;
    display: block;
    transform-origin: left center;
    transition: transform 320ms cubic-bezier(0.2, 0.65, 0.3, 1);
}
.acc-news__cover img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid rgba(13, 43, 18, 0.16);
    border-radius: 1px 3px 3px 1px;
    box-shadow:
        1px 1px 0 #fdfcf8,
        2px 2px 0 #e7e2d2,
        3px 3px 0 #fdfcf8,
        4px 4px 0 #d9d3bf,
        0 10px 22px rgba(13, 38, 20, 0.22);
    transition: box-shadow 320ms cubic-bezier(0.2, 0.65, 0.3, 1);
}
/* Spine crease: a soft dark-to-light bind line along the left edge */
.acc-news__cover a::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 9%;
    border-radius: 1px 0 0 1px;
    background: linear-gradient(to right,
        rgba(13, 38, 20, 0.22),
        rgba(255, 255, 255, 0.14) 32%,
        rgba(13, 38, 20, 0.08) 60%,
        transparent);
    pointer-events: none;
}
.acc-news__cover a:hover,
.acc-news__cover a:focus-visible {
    transform: rotateY(-9deg) translateY(-6px);
    z-index: 2;
}
.acc-news__cover a:hover img,
.acc-news__cover a:focus-visible img {
    box-shadow:
        1px 1px 0 #fdfcf8,
        3px 2px 0 #e7e2d2,
        5px 3px 0 #fdfcf8,
        7px 4px 0 #d9d3bf,
        14px 18px 30px rgba(13, 38, 20, 0.32);
}
.acc-news__title { margin: 0; line-height: 1.3; }
.acc-news__title a {
    font-family: var(--wp--preset--font-family--serif);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--wp--preset--color--leaf);
    text-decoration: none;
}
.acc-news__title a:hover { color: var(--wp--preset--color--primary); }
.acc-news__meta {
    margin: 0.2rem 0 0;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--wp--preset--color--muted);
}
@media (prefers-reduced-motion: reduce) {
    .acc-news__cover a,
    .acc-news__cover img { transition: none; }
    .acc-news__cover a:hover,
    .acc-news__cover a:focus-visible { transform: none; }
}

/* ============================================================
   Post Oak Newsletter — full catalog (patterns/newsletter-catalog.php)
   ============================================================ */
.acc-newscat__intro {
    margin-bottom: var(--wp--preset--spacing--50);
    padding-bottom: var(--wp--preset--spacing--40);
    border-bottom: 1px solid var(--wp--preset--color--border);
}
.acc-newscat__total {
    margin: 0 0 0.9rem;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--wp--preset--color--muted);
}
.acc-newscat__yearnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.acc-newscat__yearlink {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    color: var(--wp--preset--color--leaf);
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.acc-newscat__yearlink:hover,
.acc-newscat__yearlink:focus-visible {
    color: #fff;
    background: var(--wp--preset--color--leaf);
    border-color: var(--wp--preset--color--leaf);
}
/* Land anchors below the sticky navbar */
.acc-newscat__year-section { scroll-margin-top: 4.5rem; }
.acc-news--catalog .acc-news__grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
@media (min-width: 782px) {
    .acc-news--catalog .acc-news__grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}
.acc-news__cover-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 17 / 22;
    text-align: center;
    font-weight: 700;
    line-height: 1.4;
    color: var(--wp--preset--color--leaf);
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border);
}
.acc-newscat__morewrap {
    margin: var(--wp--preset--spacing--60) 0 0;
    text-align: center;
}
.acc-newscat__more {
    display: inline-block;
    padding: 0.65rem 1.6rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    color: var(--wp--preset--color--leaf);
    background: var(--wp--preset--color--surface);
    border: 1.5px solid var(--wp--preset--color--leaf);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.acc-newscat__more:hover,
.acc-newscat__more:focus-visible {
    color: #fff;
    background: var(--wp--preset--color--leaf);
}
.acc-newscat__top {
    margin: var(--wp--preset--spacing--50) 0 0;
    text-align: center;
}
.acc-newscat__top a {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wp--preset--color--leaf);
    text-decoration: none;
}
.acc-newscat__top a:hover { text-decoration: underline; }

/* -----------------------------------------------------------------
   Event "Add to calendar" control (acc-events plugin cards)
   No-JS <details> disclosure: a small pill that opens Google + .ics.
   ----------------------------------------------------------------- */
.acc-addcal { margin-top: 0.75rem; }
.acc-addcal__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    list-style: none;
    width: fit-content;
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    color: var(--wp--preset--color--leaf, #164a1e);
    background: var(--wp--preset--color--surface, #f6f8f6);
    border: 1px solid var(--wp--preset--color--border, #d1d5db);
    border-radius: 999px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.acc-addcal__btn::-webkit-details-marker { display: none; } /* hide default triangle (Safari) */
.acc-addcal__btn:hover {
    background: #fff;
    border-color: var(--wp--preset--color--leaf, #164a1e);
}
.acc-addcal[open] .acc-addcal__btn {
    background: #fff;
    border-color: var(--wp--preset--color--leaf, #164a1e);
}
.acc-addcal-ico { flex: none; }
.acc-addcal__menu {
    display: flex;
    flex-direction: column;
    margin-top: 0.4rem;
    max-width: 220px;
    background: #fff;
    border: 1px solid var(--wp--preset--color--border, #d1d5db);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(13, 38, 20, 0.12);
}
.acc-addcal__opt {
    padding: 0.55rem 0.8rem;
    font-size: 0.85rem;
    color: var(--wp--preset--color--foreground, #0b1410);
    text-decoration: none;
}
.acc-addcal__opt + .acc-addcal__opt {
    border-top: 1px solid var(--wp--preset--color--border, #d1d5db);
}
.acc-addcal__opt:hover {
    background: var(--wp--preset--color--surface, #f6f8f6);
    color: var(--wp--preset--color--primary, #0d2b12);
}

/* Global "Subscribe to ACC calendar" — solid pill, dropdown overlays content.
   Rendered in the /events/ header and via [acc_ics_subscribe]. */
.acc-subscribe {
    position: relative;
    margin-top: 1rem;
}
.acc-subscribe__btn {
    padding: 0.5rem 1.1rem;
    font-size: 0.85rem;
    line-height: 1.35;
    background: var(--wp--preset--color--primary, #0d2b12);
    border-color: var(--wp--preset--color--primary, #0d2b12);
    color: var(--wp--preset--color--background, #fff);
}
.acc-subscribe__btn:hover,
.acc-subscribe[open] .acc-subscribe__btn {
    background: var(--wp--preset--color--primary-light, #164a1e);
    border-color: var(--wp--preset--color--primary-light, #164a1e);
    color: var(--wp--preset--color--background, #fff);
}
.acc-subscribe .acc-addcal__menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 30;
    margin-top: 0;
    min-width: 250px;
    max-width: none;
}
.acc-subscribe .acc-addcal__opt small {
    display: block;
    font-size: 0.75rem;
    color: var(--wp--preset--color--muted, #6b7280);
}
button.acc-addcal__opt {
    appearance: none;
    background: none;
    border: 0;
    border-top: 1px solid var(--wp--preset--color--border, #d1d5db);
    font: inherit;
    font-size: 0.85rem;
    text-align: left;
    width: 100%;
    cursor: pointer;
}

/* -----------------------------------------------------------------
   Events calendar — single-column accordion (/events/)
   Whole card is a no-JS <details>: header toggles the body. Add-to-
   calendar is a sibling <details> pinned top-right, aligned w/ date.
   ----------------------------------------------------------------- */
.acc-events-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.acc-ev {
    position: relative;
    z-index: 1;
    background: #fff;
    border: 1px solid var(--wp--preset--color--border, #d1d5db);
    border-radius: 10px;
}
/* Lift the card whose add-to-calendar menu is open above later sibling cards,
   otherwise the dropdown renders behind the next event. */
.acc-ev:has(.acc-ev__addcal[open]) { z-index: 20; }
.acc-ev--vote {
    border-left: 3px solid var(--wp--preset--color--primary, #0d2b12);
}
.acc-ev__acc { margin: 0; }

/* Header (always visible, clickable) */
.acc-ev__head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    padding-right: 3.4rem; /* room for the icon-only add-to-cal button */
    cursor: pointer;
    list-style: none;
}
.acc-ev__head::-webkit-details-marker { display: none; }
.acc-ev__head:hover .acc-ev__title { color: var(--wp--preset--color--primary, #0d2b12); }

.acc-ev__date {
    flex: none;
    width: 2.9rem;
    text-align: center;
    line-height: 1.05;
    padding-top: 0.1rem;
}
.acc-ev__mon {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--wp--preset--color--leaf, #164a1e);
}
.acc-ev__day {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wp--preset--color--foreground, #0b1410);
    /* Same numeral treatment as the home page tile, so a column of dates does
       not jitter between "11" and "17". Deliberately not the boxed tile: the
       home page shows six of these as focal points, this list shows thirteen
       as a scanning aid, and thirteen filled month strips under a "SEPTEMBER
       2026" heading that already says the month is a wall of weight. */
    font-variant-numeric: tabular-nums;
}
.acc-ev__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.acc-ev__title {
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.3;
    color: var(--wp--preset--color--leaf, #164a1e);
    transition: color 0.15s ease;
}
.acc-ev__when {
    font-size: 0.8rem;
    color: var(--wp--preset--color--muted, #6b7280);
}
.acc-ev__chevron {
    flex: none;
    display: flex;
    align-items: center;
    margin-top: 0.15rem;
    color: var(--wp--preset--color--muted, #6b7280);
}
.acc-ev__chevron-ico { transition: transform 0.2s ease; }
.acc-ev__acc[open] .acc-ev__chevron-ico { transform: rotate(180deg); }

/* Body (revealed on expand) */
.acc-ev__body {
    padding: 0 1rem 1rem;
    padding-left: calc(1rem + 2.9rem + 0.85rem); /* align under the title */
}
.acc-ev__body > :first-child { margin-top: 0; }
.acc-ev__loc { margin: 0 0 0.4rem; font-size: 0.9rem; }
.acc-ev__loc a {
    color: var(--wp--preset--color--leaf, #164a1e);
    text-decoration: none;
}
.acc-ev__loc a:hover { color: var(--wp--preset--color--primary, #0d2b12); }
.acc-ev__desc {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--wp--preset--color--foreground, #0b1410);
}
/* A Speaker Series event opens with the speaker, not a line of text.
   Two equal columns: `flex: 1 1 0` on both, rather than a width on one, so
   they stay 50/50 at every size instead of the image column being sized by the
   picture inside it. Every one of the 32 speaker images is a landscape title
   card at roughly 1.9:1, so half the panel is about the width it wants. */
.acc-ev__speaker {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    margin: 0 0 0.6rem;
}
.acc-ev__speaker-photo {
    flex: 1 1 0;
    min-width: 0;
}
.acc-ev__speaker-text {
    flex: 1 1 0;
    min-width: 0;
}
/* Below this the two columns are too narrow to read, so stack them. */
@media (max-width: 40rem) {
    .acc-ev__speaker { flex-direction: column; gap: 0.75rem; }
    .acc-ev__speaker-photo { flex: 0 0 auto; width: 100%; max-width: 420px; }
}
/* No forced ratio and no object-fit: these are title cards with type on them,
   so any crop cuts words off. Width is set, height follows the image. */
.acc-ev__speaker-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px;
    border: 1.5px solid var(--wp--preset--color--primary, #0d2b12);
}
.acc-ev__speaker-name {
    margin: 0 0 0.15rem;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.3;
    color: var(--wp--preset--color--primary, #0d2b12);
}
.acc-ev__speaker-talk {
    margin: 0 0 0.4rem;
    font-size: 0.9rem;
    line-height: 1.4;
    font-style: italic;
    color: var(--wp--preset--color--muted, #5b5847);
}
.acc-ev__speaker-blurb {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--wp--preset--color--foreground, #0b1410);
}
/* Inside the text column, so it needs its own top margin — the generic rule
   spaces it against the badges row it no longer follows. */
.acc-ev__details--speaker { margin: 0.7rem 0 0; }

.acc-ev__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}
.acc-ev__details { margin: 0.6rem 0 0; font-size: 0.9rem; }
.acc-ev__details a {
    color: var(--wp--preset--color--primary, #0d2b12);
    font-weight: 600;
    text-decoration: none;
}
.acc-ev__details a:hover { text-decoration: underline; }

/* Add-to-calendar pinned top-right, aligned with the date row */
.acc-ev__addcal {
    position: absolute;
    top: 0.75rem;
    right: 0.85rem;
    z-index: 5;
    margin-top: 0;
}
.acc-ev__addcal .acc-addcal__label { display: none; } /* icon-only on mobile */
.acc-ev__addcal .acc-addcal__btn { padding: 0.35rem 0.45rem; }
.acc-ev__addcal .acc-addcal__menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    margin-top: 0;
    min-width: 180px;
}

@media (min-width: 600px) {
    .acc-ev__head { padding-right: 12rem; }
    .acc-ev__addcal .acc-addcal__label { display: inline; }
    .acc-ev__addcal .acc-addcal__btn { padding: 0.3rem 0.7rem; }
    .acc-ev__body { padding-right: 12rem; }
}

/* ---------------------------------------------------------------
   Content photos — soft corners
   Applies to media-text splits and photo galleries placed in page
   content, so any image the board swaps in keeps the treatment.
   --------------------------------------------------------------- */
.wp-block-media-text__media img {
    border-radius: 8px;
}
.wp-block-media-text.is-image-fill .wp-block-media-text__media {
    border-radius: 8px;
    overflow: hidden;
}
.acc-photo-gallery .wp-block-image img {
    border-radius: 8px;
}

/* Donate options sit in a 3-up row — stretch cards to equal height */
.acc-donate-options .wp-block-column { display: flex; }
.acc-donate-options .acc-donate-option { margin-bottom: 0; width: 100%; }
@media (max-width: 781px) {
    .acc-donate-options { gap: var(--wp--preset--spacing--40); }
}

/* CTA banners: constrained group layout auto-centers any child narrower
   than the content width, which floated the 46ch lede away from the
   left-aligned title. Pin banner text children to the left edge. */
.acc-about-cta__text > *,
.acc-volunteer-cta__text > *,
.acc-events-cta__text > *,
.acc-advocacy-cta__text > *,
.acc-donate-cta__text > *,
.acc-contact-cta__text > *,
.acc-sponsor-card__text > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Membership "dues at work" split — keep the fill-cropped photo tall enough
   (core's .is-image-fill rule sets min-height:250px at higher specificity) */
.wp-block-media-text.acc-members-split.is-image-fill .wp-block-media-text__media {
    min-height: 420px;
}

/* ---------------------------------------------------------------
   Photo marquee — endless slow slider built from a gallery block
   with class `acc-photo-marquee` (see assets/js/photo-marquee.js).
   Before JS runs, the gallery renders as a normal cropped grid.
   --------------------------------------------------------------- */
.acc-photo-marquee--ready {
    display: block !important;
    overflow: hidden;
    /* Runs the full width of the browser rather than the content column.
       !important because core's layout rule for a constrained container
       (.wp-container-…-is-layout-constrained > .alignwide) caps alignwide at
       wide-size and outranks a single class. theme.json already sets
       overflow-x: clip on <html>, so the scrollbar width that 100vw adds
       can't produce a sideways scrollbar. */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    /* Whatever follows needs air — the strip runs edge to edge and otherwise
       crowds the next section's eyebrow. */
    margin-bottom: var(--wp--preset--spacing--60);
}
.acc-photo-marquee__track {
    display: flex;
    width: max-content;
    animation: acc-marquee-drift 80s linear infinite;
}
/* Deliberately no pause on hover: these are scenery, not targets — nothing in
   the strip is clickable, so stopping it only makes the page feel stuck.
   prefers-reduced-motion still halts it entirely (below). */
.acc-photo-marquee__track > * {
    flex: 0 0 auto;
    /* Core gallery sizes nested figures with high-specificity width rules —
       !important keeps marquee tiles at a fixed card width. Spacing lives in
       margin-right (not flex gap) so translateX(-50%) lands exactly one full
       set over and the loop wraps without a visible jump. */
    width: clamp(220px, 26vw, 340px) !important;
    margin: 0 var(--wp--preset--spacing--40) 0 0 !important;
}
.acc-photo-marquee__track img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
@keyframes acc-marquee-drift {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .acc-photo-marquee__track { animation: none; }
}

/* ---------------------------------------------------------------
   Fade slider — one photo at a time, anywhere.
   A core Gallery block with class `acc-fade-slider`: the board edits
   and reorders images normally; CSS crossfades them (same idiom as
   the home-card .acc-rotator, but standalone and 4:3). Timing is
   written for 8 images (40s cycle, 5s each); extra images beyond
   the 8th share the 8th slot.
   --------------------------------------------------------------- */
.wp-block-gallery.acc-fade-slider {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden;
    border-radius: 8px;
}
.wp-block-gallery.acc-fade-slider .wp-block-image {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0;
    animation: accFadeSlider 40s infinite;
}
.wp-block-gallery.acc-fade-slider .wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}
/* Timing for 8 images: 40s cycle, 5s per photo. */
.wp-block-gallery.acc-fade-slider .wp-block-image:nth-child(1) { animation-delay: 0s; }
.wp-block-gallery.acc-fade-slider .wp-block-image:nth-child(2) { animation-delay: 5s; }
.wp-block-gallery.acc-fade-slider .wp-block-image:nth-child(3) { animation-delay: 10s; }
.wp-block-gallery.acc-fade-slider .wp-block-image:nth-child(4) { animation-delay: 15s; }
.wp-block-gallery.acc-fade-slider .wp-block-image:nth-child(5) { animation-delay: 20s; }
.wp-block-gallery.acc-fade-slider .wp-block-image:nth-child(6) { animation-delay: 25s; }
.wp-block-gallery.acc-fade-slider .wp-block-image:nth-child(7) { animation-delay: 30s; }
.wp-block-gallery.acc-fade-slider .wp-block-image:nth-child(8) { animation-delay: 35s; }
/* Visible window slightly wider than the 5s slot (12.5%) so consecutive
   photos overlap while crossfading — no blank frames. */
@keyframes accFadeSlider {
    0%    { opacity: 0; }
    2.5%  { opacity: 1; }
    12.5% { opacity: 1; }
    15%   { opacity: 0; }
    100%  { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .wp-block-gallery.acc-fade-slider .wp-block-image { animation: none; opacity: 0; }
    .wp-block-gallery.acc-fade-slider .wp-block-image:nth-child(1) { opacity: 1; }
}

/* ---------------------------------------------------------------
   Post Oak catalog — masthead intro + latest-issue feature
   --------------------------------------------------------------- */
.acc-newscat__masthead {
    max-width: 720px;
    margin: 0 auto 2.5rem;
    text-align: center;
}
.acc-newscat__eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wp--preset--color--leaf, #3d6b3f);
    margin: 0 0 0.4rem;
}
.acc-newscat__masthead-title {
    font-family: var(--wp--preset--font-family--serif, Georgia, serif);
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--primary, #1a3a1f);
    margin: 0 0 0.75rem;
    text-wrap: balance;
}
.acc-newscat__masthead-lede {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--wp--preset--color--foreground, #0b1410);
    margin: 0;
}

.acc-newscat__latest {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    background: #eef2e8;
    border: 1.5px solid #2c5e34;
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 3rem;
    align-items: center;
}
@media (min-width: 700px) {
    .acc-newscat__latest {
        grid-template-columns: 260px 1fr;
        gap: 2.5rem;
        padding: 2.5rem;
    }
}
.acc-newscat__latest-cover {
    margin: 0;
    justify-self: center;
    max-width: 260px;
}
.acc-newscat__latest-cover img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px 6px 6px 3px;
    /* Same bound-booklet language as the catalog cards: layered page edges
       plus a soft spine crease on the left. */
    box-shadow:
        0 1px 0 #fff inset,
        1px 0 0 #e2ded2,
        2px 1px 0 #d5d1c5,
        3px 2px 0 #c8c4b8,
        0 16px 34px -16px rgba(13, 43, 18, 0.4);
    background:
        linear-gradient(to right, rgba(13, 43, 18, 0.14), rgba(13, 43, 18, 0) 8%);
}
.acc-newscat__latest-title {
    font-family: var(--wp--preset--font-family--serif, Georgia, serif);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 500;
    line-height: 1.1;
    color: var(--wp--preset--color--primary, #1a3a1f);
    margin: 0 0 0.35rem;
}
.acc-newscat__latest-meta {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--muted, #5b5847);
    margin: 0 0 1rem;
}
.acc-newscat__latest-summary {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--wp--preset--color--foreground, #0b1410);
    margin: 0 0 1.5rem;
    max-width: 58ch;
}
/* The latest panel borrows .acc-news__card so the shared issue modal picks it
   up, but that class centers the catalog tiles. This panel is a text column
   and stays left-aligned. */
.acc-newscat__latest.acc-news__card,
.acc-newscat__latest.acc-news__card .acc-newscat__latest-body {
    text-align: left;
}

/* A long summary is cut off with a fade rather than shrinking the type or
   dropping bullets. mask-image fades the list markers too, and works over the
   card's tint without hard-coding a background color to blend into.
   `is-clamped` is decided in PHP: the fade must only appear when the text is
   actually cut off, and CSS cannot tell whether it overflowed. */
.acc-newscat__latest-summary.is-clamped {
    max-height: 9.5rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
.acc-newscat__latest-action { margin: 1.75rem 0 0; }
.acc-newscat__latest-btn {
    display: inline-block;
    padding: 0.7rem 1.6rem;
    border-radius: 999px;
    background: var(--wp--preset--color--primary, #1a3a1f);
    color: var(--wp--preset--color--background, #faf7f0) !important;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none !important;
}
.acc-newscat__latest-btn:hover {
    background: var(--wp--preset--color--primary-light, #2c5e34);
}

/* Fade slider, JS mode: script drives the crossfade + dots; kill the CSS
   keyframe fallback and fade via the is-active class instead. */
.wp-block-gallery.acc-fade-slider--js .wp-block-image {
    animation: none !important;
    opacity: 0;
    transition: opacity 1.1s ease;
}
.wp-block-gallery.acc-fade-slider--js .wp-block-image.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .wp-block-gallery.acc-fade-slider--js .wp-block-image { transition: none; }
    /* JS controls visibility via is-active — undo the no-JS fallback that
       pinned the first image visible. */
    .wp-block-gallery.acc-fade-slider--js .wp-block-image:nth-child(1) { opacity: 0; }
    .wp-block-gallery.acc-fade-slider--js .wp-block-image.is-active { opacity: 1; }
}
.acc-fade-slider__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.8rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    z-index: 5;
}
.acc-fade-slider__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(246, 248, 246, 0.9);
    background: rgba(13, 43, 18, 0.35);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(13, 43, 18, 0.4);
    transition: transform 0.15s ease, background 0.15s ease;
}
.acc-fade-slider__dot:hover { transform: scale(1.25); }
.acc-fade-slider__dot.is-active {
    background: #f6f8f6;
    border-color: #f6f8f6;
}

/* About — mission lede + two-column story text */
.acc-about-lede {
    font-family: var(--wp--preset--font-family--serif, Georgia, serif);
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    line-height: 1.5;
    color: var(--wp--preset--color--primary, #1a3a1f);
}
.acc-about-story-title {
    font-size: 1.2rem;
    margin: 0 0 0.75rem;
    color: var(--wp--preset--color--primary, #1a3a1f);
}
.acc-about-story .acc-about-body {
    font-size: 0.9375rem;
    line-height: 1.7;
}

/* FAQ — staggered category rows: image column sticks and matches height */
.acc-faq__row { gap: var(--wp--preset--spacing--60); }
.acc-faq__rowimg img {
    width: 100%;
    height: 100%;
    max-height: 280px;
    object-fit: cover;
    display: block;
}
.acc-faq__row .acc-faq__cat { margin-top: 0; }
@media (max-width: 781px) {
    .acc-faq__rowimg { order: -1; } /* image above questions when stacked */
    .acc-faq__rowimg img { max-height: 220px; }
}

/* Speaker Series — When/Where/Cost fact row */
.acc-speaker-fact__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wp--preset--color--leaf, #3d6b3f);
    margin: 0 0 0.2rem;
}
.acc-speaker-fact__value {
    font-family: var(--wp--preset--font-family--serif, Georgia, serif);
    font-size: 1.05rem;
    color: var(--wp--preset--color--primary, #1a3a1f);
    margin: 0;
}

/* Advocacy focus-card photos. The ratio lives here rather than inline on each
   image, so every card matches no matter what gets swapped in later — the
   cards previously carried a mix of 16/9 and 4/3 and sat at different heights. */
.acc-focus__photo { margin: 0 0 1rem !important; }
.acc-focus__photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
}

/* "Pick the shape that fits" — wave edge on top, same trick the events band
   uses: the curve is painted in the color of the section above (eggshell),
   so the two look like they flow into one another. */
.acc-donate-ways {
    position: relative;
    --acc-wave-h: clamp(34px, 4vw, 60px);
    /* Clear the wave strip so the eyebrow doesn't sit under the curve. */
    padding-top: calc(var(--wp--preset--spacing--70) + var(--acc-wave-h)) !important;
    /* The photo strip ends this section; it doesn't need a full stop before
       "Questions about giving" as well. */
    padding-bottom: var(--wp--preset--spacing--40) !important;
}
.acc-donate-ways::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1200 V34 C940,64 260,4 0,34 Z' fill='%23faf7f0'/%3E%3C/svg%3E");
    background-position: top center;
    background-repeat: repeat-x;
    background-size: 100% var(--acc-wave-h);
}
/* Air above the strip, none below — the section padding closes it out. */
.acc-donate-ways .acc-photo-marquee--ready {
    margin-top: var(--wp--preset--spacing--60);
    margin-bottom: 0;
}

/* ---------------------------------------------------------------
   Fanned newsletter stack ([acc_newsletter_stack])
   Covers overlap like a hand of cards; hovering lifts one straight and
   brings it forward. Clicking opens the issue modal, same as anywhere else.
   --------------------------------------------------------------- */
.acc-newsstack { text-align: center; }
.acc-newsstack__fan {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* Room for the outermost cards to tilt and the hovered one to rise. */
    padding: 2.5rem 0 1.5rem;
    perspective: 1200px;
}
.acc-newsstack .acc-news__card {
    flex: 0 0 auto;
    /* Size off the container, not the viewport: five cards plus four negative
       margins have to sum to <= 100%, or `overflow-x: clip` eats the ends. */
    width: clamp(88px, calc((100% + 4 * 7vw) / 5), 230px);
    margin: 0 clamp(-52px, -7vw, -14px) 0 0;
    transition: transform 300ms cubic-bezier(0.2, 0.65, 0.3, 1);
}
@media (max-width: 520px) {
    /* Below this the fan idiom stops reading. Show three, not five. */
    .acc-newsstack .acc-news__card:nth-child(n + 4) { display: none; }
    .acc-newsstack .acc-news__card:nth-child(3) { margin-right: 0; }
}
.acc-newsstack .acc-news__card:last-child { margin-right: 0; }
.acc-newsstack .acc-news__cover { margin: 0; }
/* Fan: the middle card sits upright, the outer ones lean away from it. */
.acc-newsstack .acc-news__card:nth-child(1) { transform: rotate(-7deg) translateY(12px); z-index: 1; }
.acc-newsstack .acc-news__card:nth-child(2) { transform: rotate(-3.5deg) translateY(4px); z-index: 2; }
.acc-newsstack .acc-news__card:nth-child(3) { transform: rotate(0deg); z-index: 3; }
.acc-newsstack .acc-news__card:nth-child(4) { transform: rotate(3.5deg) translateY(4px); z-index: 4; }
.acc-newsstack .acc-news__card:nth-child(5) { transform: rotate(7deg) translateY(12px); z-index: 5; }
.acc-newsstack .acc-news__card:hover,
.acc-newsstack .acc-news__card:focus-within {
    transform: rotate(0deg) translateY(-14px) scale(1.06);
    z-index: 10;
}
/* The catalog's own tilt would fight the fan — the card does the moving here. */
.acc-newsstack .acc-news__cover a:hover,
.acc-newsstack .acc-news__cover a:focus-visible { transform: none; }
.acc-newsstack__more { margin: 0; }
.acc-newsstack__link {
    display: inline-block;
    padding: 0.6rem 1.6rem;
    border: 1.5px solid var(--wp--preset--color--primary, #1a3a1f);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none !important;
    color: var(--wp--preset--color--primary, #1a3a1f) !important;
}
.acc-newsstack__link:hover {
    background: var(--wp--preset--color--primary, #1a3a1f);
    color: var(--wp--preset--color--background, #faf7f0) !important;
}
@media (prefers-reduced-motion: reduce) {
    .acc-newsstack .acc-news__card { transition: none; }
}

/* Speaker Series intro — copy left, latest-talk placard right. */
.acc-speaker-intro {
    gap: var(--wp--preset--spacing--50);
}
.acc-speaker-intro__text {
    flex: 1 1 28rem;
    min-width: 0;
}
.acc-speaker-intro__text > * {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
.acc-speaker-intro .acc-latest-talk {
    flex: 0 1 380px;
}

/* Latest talk placard ([acc_latest_talk]) — sits beside the Speaker Series
   copy so the section shows the series is running, not just describes it. */
.acc-latest-talk {
    margin: 0;
    max-width: 420px;
}
.acc-latest-talk__link {
    display: block;
    background: var(--wp--preset--color--background, #faf7f0);
    border: 1px solid var(--wp--preset--color--border, #c9c2ad);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none !important;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.acc-latest-talk__link:hover,
.acc-latest-talk__link:focus-visible {
    transform: translateY(-2px);
    border-color: var(--wp--preset--color--primary, #1a3a1f);
    box-shadow: 0 14px 30px -20px rgba(13, 43, 18, 0.35);
}
.acc-latest-talk__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--wp--preset--color--surface, #efe8d6);
}
.acc-latest-talk__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.acc-latest-talk__play {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    padding-left: 3px;
    border-radius: 50%;
    background: rgba(250, 247, 240, 0.92);
    color: var(--wp--preset--color--primary, #1a3a1f);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.acc-latest-talk__body {
    display: block;
    padding: 1rem 1.15rem 1.15rem;
}
.acc-latest-talk__eyebrow {
    display: block;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wp--preset--color--leaf, #3d6b3f);
}
.acc-latest-talk__title {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--wp--preset--font-family--serif, Georgia, serif);
    font-size: 1.15rem;
    line-height: 1.25;
    color: var(--wp--preset--color--primary, #1a3a1f);
}
.acc-latest-talk__who {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.85rem;
    color: var(--wp--preset--color--muted, #5b5847);
}
.acc-latest-talk__cta {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary, #1a3a1f);
}
@media (prefers-reduced-motion: reduce) {
    .acc-latest-talk__link { transition: none; }
    .acc-latest-talk__link:hover { transform: none; }
}

/* ---------------------------------------------------------------
   Wave section edges — reusable

   Add .acc-wave-top / .acc-wave-bottom to a full-width section and set
   --acc-wave-color to whatever sits on that side. The shape comes from a
   mask rather than a filled SVG, so the color can be a custom property
   instead of being baked into a data URI per section.
   --------------------------------------------------------------- */
.acc-wave-top,
.acc-wave-bottom {
    position: relative;
    --acc-wave-h: clamp(34px, 4vw, 60px);
    --acc-wave-color: var(--wp--preset--color--background, #faf7f0);
}
.acc-wave-top {
    padding-top: calc(var(--wp--preset--spacing--70) + var(--acc-wave-h)) !important;
}
.acc-wave-bottom {
    padding-bottom: calc(var(--wp--preset--spacing--70) + var(--acc-wave-h)) !important;
}
.acc-wave-top::before,
.acc-wave-bottom::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: var(--acc-wave-h);
    z-index: 1;
    pointer-events: none;
    background-color: var(--acc-wave-color);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.acc-wave-top::before {
    top: 0;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1200 V34 C940,64 260,4 0,34 Z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1200 V34 C940,64 260,4 0,34 Z' fill='%23000'/%3E%3C/svg%3E");
}
.acc-wave-bottom::after {
    bottom: 0;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 H1200 V26 C940,-4 260,56 0,26 Z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 H1200 V26 C940,-4 260,56 0,26 Z' fill='%23000'/%3E%3C/svg%3E");
}
/* The last section before the footer needs to clear its wave. */
.acc-wave-endstop {
    padding-bottom: calc(var(--wp--preset--spacing--70) + 3rem) !important;
}

/* Education photo grid — the lede above it is alignwide, so a content-width
   gallery read as mis-centered. Equal tiles, same width as the copy. */
.acc-photo-gallery {
    gap: var(--wp--preset--spacing--30) !important;
}
.acc-photo-gallery .wp-block-image {
    margin: 0 !important;
}
.acc-photo-gallery .wp-block-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
}

/* "The sponsors we accept" is the last section on the page now that the green
   price card is gone, so it sits directly on the footer's wave. Extra bottom
   padding keeps the hint line clear of it. */
.acc-sponsor-criteria {
    padding-bottom: calc(var(--wp--preset--spacing--70) + 3rem) !important;
}

/* Sponsorship price. There's only one tier, so it's a line in the page rather
   than a card of its own — the rule and the leading keep it from reading as
   another paragraph. */
.acc-sponsor-price {
    margin: 0 0 var(--wp--preset--spacing--50);
    padding-top: var(--wp--preset--spacing--30);
    border-top: 1px solid var(--wp--preset--color--border, #c9c2ad);
}
.acc-sponsor-price__amount {
    display: block;
    font-family: var(--wp--preset--font-family--serif, Georgia, serif);
    font-size: clamp(2rem, 4.5vw, 2.75rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--primary, #1a3a1f);
}
.acc-sponsor-price__note {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wp--preset--color--muted, #5b5847);
}

/* The donate cards used to be a tinted green panel here. Removed: they now
   follow the membership tier card exactly (see .acc-donate-option above), so
   the two pages read as one component rather than two. */

/* "Every dollar stays in Arlington" — copy left, Give button right. Same row
   shape as the "Questions about giving?" block lower down the page. */
.acc-donate-impact {
    gap: var(--wp--preset--spacing--40);
    /* The enclosing section already supplies the top padding. The row used to
       add its own on top of an inline editor margin — three lots of space
       stacked. !important is needed to beat that inline margin. */
    padding-top: 0;
    margin-top: 0 !important;
    margin-bottom: var(--wp--preset--spacing--60);
}
.acc-donate-impact__text {
    flex: 1 1 30rem;
    min-width: 0;
}
/* The inner group uses WordPress's constrained layout, which centers its
   children inside the flex item. That pushed the heading in from the option
   cards above it — reset so the whole section shares one left edge. */
.acc-donate-impact__text > * {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
.acc-donate-impact .acc-section-title { margin-top: 0; }
.acc-donate-impact .wp-block-buttons { flex: 0 0 auto; }
/* This is the only way to open the donation dialog on the page, so it's sized to
   be found — bigger than a standard button, with a shadow that lifts it off
   the tan band. */
.acc-donate-give .wp-block-button__link {
    padding: 1.05rem 2.6rem;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    box-shadow: 0 10px 24px -10px rgba(13, 43, 18, 0.55);
    transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.acc-donate-give .wp-block-button__link:hover,
.acc-donate-give .wp-block-button__link:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -12px rgba(13, 43, 18, 0.6);
    background-color: var(--wp--preset--color--primary-light, #2c5e34) !important;
}
@media (prefers-reduced-motion: reduce) {
    .acc-donate-give .wp-block-button__link { transition: none; }
    .acc-donate-give .wp-block-button__link:hover { transform: none; }
}
/* People still mail checks, so the address gets a line right under the button
   rather than only living in the "By mail" card further down the page. */
.acc-donate-mailnote {
    flex: 1 0 100%;
    margin: var(--wp--preset--spacing--20) 0 0 0;
    font-size: 0.875rem;
    line-height: 1.55;
    text-align: right;
    color: var(--wp--preset--color--muted, #5b5847);
}
.acc-donate-mailnote strong { color: var(--wp--preset--color--primary); }

@media (max-width: 781px) {
    /* Stacked, the button reads as the next step rather than a floating pill. */
    .acc-donate-impact__text { flex-basis: 100%; }
    .acc-donate-mailnote { text-align: left; }
    .acc-donate-impact .wp-block-buttons { width: 100%; }
    .acc-donate-impact .wp-block-button { width: 100%; }
    .acc-donate-impact .wp-block-button__link { display: block; text-align: center; }
}

/* Post Oak top compressed + editor credit */
.acc-newscat__masthead { margin-bottom: 1.5rem; }
.acc-newscat__masthead-title { font-size: clamp(1.5rem, 2.8vw, 2rem); margin-bottom: 0.5rem; }
.acc-newscat__masthead-lede { font-size: 0.975rem; line-height: 1.55; }
.acc-newscat__credit {
    margin: 0.6rem 0 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wp--preset--color--muted, #5b5847);
}
.acc-newscat__latest { padding: 1.5rem; gap: 1.5rem; margin-bottom: 2rem; }
@media (min-width: 700px) {
    .acc-newscat__latest { grid-template-columns: 190px 1fr; padding: 1.75rem 2rem; gap: 2rem; }
}
.acc-newscat__latest-cover { max-width: 190px; }
.acc-newscat__latest-title { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.acc-newscat__latest-summary { margin-bottom: 0; font-size: 0.95rem; }

/* FAQ category banners — slim photo bands with the title on the wash.
   (.acc-faq__cat is an eyebrow elsewhere; inside a band it becomes the
   big serif title, hence the matching !importants.) */
.acc-faq__band {
    overflow: hidden;
}
.acc-faq__band .wp-block-cover__inner-container {
    padding: 0 2.25rem;
}
.acc-faq__band .acc-faq__cat {
    font-family: var(--wp--preset--font-family--serif, Georgia, serif);
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
    font-weight: 500;
    text-transform: none;
    letter-spacing: -0.01em;
    color: #f6f8f6 !important;
    margin: 0 !important;
    text-shadow: 0 2px 16px rgba(13, 43, 18, 0.5);
}
@media (max-width: 600px) {
    .acc-faq__band { min-height: 110px !important; }
    .acc-faq__band .wp-block-cover__inner-container { padding: 0 1.25rem; }
}

/* Post Oak lead: intro (40) beside the latest-issue card (60).
   NB: `__top` is already taken by the back-to-top link — hence `__lead`. */
.acc-newscat__lead {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--50);
    align-items: center;
    margin-bottom: 2.5rem;
    text-align: left;
}
@media (min-width: 900px) {
    .acc-newscat__lead { grid-template-columns: 40fr 60fr; gap: var(--wp--preset--spacing--60); }
    /* The issue card's height moves with the cover and with however many
       bullets an issue happens to have. Centering the short column against it
       left the text floating at a different height on every issue. Stretch
       instead and anchor the signup to the bottom, so the two columns share a
       top and a bottom edge and the difference reads as layout, not accident. */
    .acc-newscat__lead { align-items: stretch; }
    .acc-newscat__lead .acc-newscat__masthead {
        display: flex;
        flex-direction: column;
    }
    .acc-newscat__lead .acc-newscat__masthead .acc-newssub {
        margin-top: auto;
        padding-top: 1.5rem;
    }
}
/* Inside the split the masthead reads left-aligned, not centered. */
.acc-newscat__lead .acc-newscat__masthead {
    max-width: none;
    margin: 0;
    text-align: left;
}
.acc-newscat__lead .acc-newscat__latest { margin-bottom: 0; }

/* Full-bleed pull quote — big enough to carry a photo band. */
.acc-pullquote {
    font-size: clamp(1.75rem, 4.5vw, 3.25rem) !important;
    line-height: 1.2;
    letter-spacing: -0.015em;
    text-wrap: balance;
    text-shadow: 0 2px 24px rgba(13, 43, 18, 0.5);
    margin: 0 0 1rem !important;
}

/* Calendar topic dropdown (replaces the old filter chips). */
.acc-events-filter {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.acc-events-filter__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wp--preset--color--muted, #5b5847);
}
.acc-events-filter__select {
    padding: 0.5rem 2rem 0.5rem 0.9rem;
    border: 1.5px solid var(--wp--preset--color--primary, #1a3a1f);
    border-radius: 999px;
    background: var(--wp--preset--color--background, #faf7f0);
    color: var(--wp--preset--color--primary, #1a3a1f);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    /* Chevron drawn inline so no image asset is needed. */
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%231a3a1f' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
}
.acc-events-filter__select:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary-light, #2c5e34);
    outline-offset: 2px;
}
.acc-events-filter__go {
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: 1.5px solid var(--wp--preset--color--primary, #1a3a1f);
    background: var(--wp--preset--color--primary, #1a3a1f);
    color: var(--wp--preset--color--background, #faf7f0);
    font-weight: 700;
    cursor: pointer;
}

/* ---------------------------------------------------------------
   Post Oak issue modal (assets/js/newsletter-modal.js)
   --------------------------------------------------------------- */
.acc-issue {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
}
.acc-issue[hidden] { display: none; }
body.acc-issue-open { overflow: hidden; }

.acc-issue__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(13, 43, 18, 0.72);
    backdrop-filter: blur(3px);
}
.acc-issue__dialog {
    position: relative;
    width: min(760px, 100%);
    max-height: 90vh;
    overflow: auto;
    background: var(--wp--preset--color--background, #faf7f0);
    border: 1.5px solid #2c5e34;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 30px 80px -30px rgba(13, 43, 18, 0.7);
}
.acc-issue__close {
    position: absolute;
    top: 0.6rem;
    right: 0.85rem;
    border: 0;
    background: none;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--wp--preset--color--muted, #6b7280);
    cursor: pointer;
}
.acc-issue__close:hover { color: var(--wp--preset--color--primary, #1a3a1f); }

/* Prev/next sit outside the dialog on wide screens, inside on small. */
.acc-issue__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background: rgba(13, 43, 18, 0.08);
    color: var(--wp--preset--color--primary, #1a3a1f);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.acc-issue__nav:hover { background: rgba(13, 43, 18, 0.16); }
.acc-issue__nav--prev { left: 0.4rem; }
.acc-issue__nav--next { right: 0.4rem; }

.acc-issue__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (min-width: 620px) {
    .acc-issue__body { grid-template-columns: 200px 1fr; gap: 2rem; }
    .acc-issue__dialog { padding: 2.25rem 3.25rem; }
}
.acc-issue__cover {
    margin: 0;
    justify-self: center;
    max-width: 200px;
}
.acc-issue__cover[hidden] { display: none; }
.acc-issue__cover img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px 6px 6px 3px;
    /* Same bound-booklet treatment as the catalog covers. */
    box-shadow:
        1px 0 0 #e2ded2,
        2px 1px 0 #d5d1c5,
        3px 2px 0 #c8c4b8,
        0 16px 34px -16px rgba(13, 43, 18, 0.4);
}
.acc-issue__eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wp--preset--color--leaf, #3d6b3f);
    margin: 0 0 0.3rem;
}
.acc-issue__title {
    font-family: var(--wp--preset--font-family--serif, Georgia, serif);
    font-size: clamp(1.6rem, 3.4vw, 2.1rem);
    font-weight: 500;
    line-height: 1.1;
    color: var(--wp--preset--color--primary, #1a3a1f);
    margin: 0 0 0.35rem;
}
.acc-issue__meta {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--muted, #5b5847);
    margin: 0 0 1rem;
}
.acc-issue__desc {
    font-size: 0.975rem;
    line-height: 1.65;
    color: var(--wp--preset--color--foreground, #0b1410);
    margin: 0 0 1.5rem;
}
.acc-issue__desc[hidden] { display: none; }

/* Issue summaries as scannable points.
   232 issues is too many to read as paragraphs while scrolling, so each
   summary is stored one point per line and rendered as a list. The marker is
   a small square rather than a disc — it reads as an index entry rather than
   a bulleted sentence, and sits better against the serif type. */
.acc-issue__points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}
.acc-issue__points li {
    position: relative;
    padding-left: 1.1rem;
    line-height: 1.55;
    text-wrap: pretty;
}
.acc-issue__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.4rem;
    height: 0.4rem;
    background: var(--wp--preset--color--primary, #1a3a1f);
    opacity: 0.55;
}
/* In the spotlight the list replaces a <p>, so it inherits that block's
   spacing rather than the browser's list defaults. */
ul.acc-newscat__latest-summary {
    list-style: none;
    padding: 0;
}
.acc-issue__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0;
}
.acc-issue__btn {
    display: inline-block;
    padding: 0.65rem 1.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none !important;
    border: 1.5px solid var(--wp--preset--color--primary, #1a3a1f);
}
.acc-issue__btn--read {
    background: var(--wp--preset--color--primary, #1a3a1f);
    color: var(--wp--preset--color--background, #faf7f0) !important;
}
.acc-issue__btn--read:hover { background: var(--wp--preset--color--primary-light, #2c5e34); }
.acc-issue__btn--dl {
    background: transparent;
    color: var(--wp--preset--color--primary, #1a3a1f) !important;
}
.acc-issue__btn--dl:hover {
    background: var(--wp--preset--color--primary, #1a3a1f);
    color: var(--wp--preset--color--background, #faf7f0) !important;
}
/* The whole card reads as clickable now that it opens a modal. */
.acc-news__card { cursor: pointer; }

/* Share row inside the Post Oak issue modal */
.acc-issue__share {
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--wp--preset--color--border, #c9c2ad);
}

/* Share row inside an event accordion */
.acc-ev .acc-share { margin-top: 0.9rem; }
/* Brief highlight when arriving on a shared event link */
.acc-ev.is-shared { box-shadow: 0 0 0 2px var(--wp--preset--color--leaf, #3d6b3f); border-radius: 8px; }

/* Same [hidden]-vs-author-display trap as the share buttons: without this
   the "Show earlier years" button stays visible after the last batch. */
.acc-newscat__more[hidden] { display: none; }

/* ---------------------------------------------------------------
   Post Oak magazine reader (assets/js/newsletter-reader.js)

   Full-screen, dark, chrome out of the way — the issue is the page.
   Sits above the issue modal, which stays open behind it so closing
   the reader lands back on the issue details.
   --------------------------------------------------------------- */
.acc-reader {
    position: fixed;
    inset: 0;
    z-index: 10010;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: #10210f;
    color: #f3f1e7;
}
.acc-reader[hidden] { display: none; }
/* theme.json puts `overflow: clip visible` on <html>, so hiding body overflow
   alone leaves the page behind still scrolling under the reader. */
body.acc-reader-open { overflow: hidden; }
html:has(body.acc-reader-open) { overflow: hidden; }

.acc-reader__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid rgba(243, 241, 231, 0.16);
}
.acc-reader__title {
    margin: 0;
    font-family: var(--wp--preset--font-family--serif, Georgia, serif);
    font-size: clamp(0.95rem, 2.4vw, 1.15rem);
    font-weight: 500;
    line-height: 1.25;
}
.acc-reader__tools {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}
.acc-reader__tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.7rem;
    border: 1px solid rgba(243, 241, 231, 0.28);
    border-radius: 999px;
    background: transparent;
    color: #f3f1e7 !important;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none !important;
    line-height: 1;
    cursor: pointer;
}
.acc-reader__tool:hover { background: rgba(243, 241, 231, 0.14); }
.acc-reader__tool[aria-pressed="true"] {
    background: rgba(243, 241, 231, 0.9);
    color: #10210f !important;
    border-color: transparent;
}
.acc-reader__zoom {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.acc-reader__zoom .acc-reader__tool {
    padding: 0;
    font-size: 1rem;
}
.acc-reader__zoomval {
    min-width: 3.2rem;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(243, 241, 231, 0.72);
}
.acc-reader__close {
    border-color: transparent;
    font-size: 1.4rem;
    padding: 0 0.55rem;
}
/* On a phone the bar has room for the essentials only. Zoom stays — small
   type on a small screen is exactly when it earns its place — but loses its
   percentage readout, and Download is already in the issue modal behind. */
@media (max-width: 619px) {
    .acc-reader__zoomval,
    .acc-reader__dl { display: none; }
}

.acc-reader__stage {
    position: relative;
    overflow: hidden;
    min-height: 0; /* let the 1fr row actually shrink */
}
.acc-reader__scroll {
    width: 100%;
    height: 100%;
    overflow: auto;
    display: flex;
    /* Centering with `margin: auto` on the child rather than align/justify:
       center — flex centering clips the top of a page taller than the box. */
    padding: 0.75rem;
    -webkit-overflow-scrolling: touch;
}
.acc-reader__spread {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px; /* matches GUTTER in newsletter-reader.js */
    margin: auto;
}
.acc-reader__page {
    display: block;
    background: #fff;
    box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.8);
}
/* Two pages read as one sheet: square off the inner edges of a spread. */
.acc-reader__spread .acc-reader__page:first-child:not(:only-child) { border-radius: 3px 0 0 3px; }
.acc-reader__spread .acc-reader__page:last-child:not(:only-child)  { border-radius: 0 3px 3px 0; }
.acc-reader__spread .acc-reader__page:only-child { border-radius: 3px; }

/* Solid cream discs rather than a translucent wash: on a narrow window the
   chevrons sit on top of the page itself, and a faint button over white
   paper is a button nobody finds. */
.acc-reader__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0 0 0.15em; /* optically center the chevron glyph */
    border: 2px solid #10210f;
    border-radius: 50%;
    background: #f3f1e7;
    color: #10210f;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    transition: background 160ms ease, transform 160ms ease;
}
.acc-reader__nav:hover:not(:disabled) {
    background: #fff;
    transform: translateY(-50%) scale(1.08);
}
.acc-reader__nav:focus-visible {
    outline: 3px solid var(--wp--preset--color--accent, #13ec13);
    outline-offset: 3px;
}
.acc-reader__nav:disabled {
    opacity: 0.35;
    box-shadow: none;
    cursor: default;
}
.acc-reader__nav--prev { left: 0.75rem; }
.acc-reader__nav--next { right: 0.75rem; }
@media (prefers-reduced-motion: reduce) {
    .acc-reader__nav { transition: none; }
    .acc-reader__nav:hover:not(:disabled) { transform: translateY(-50%); }
}

.acc-reader__status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: rgba(243, 241, 231, 0.8);
    pointer-events: none;
}
.acc-reader__status[hidden] { display: none; }
.acc-reader__fallback {
    margin: auto;
    padding: 2rem 1rem;
    text-align: center;
    font-size: 0.95rem;
    color: rgba(243, 241, 231, 0.85);
}
.acc-reader__fallback a { color: #f3f1e7; }

.acc-reader__foot {
    padding: 0.55rem 0.9rem;
    border-top: 1px solid rgba(243, 241, 231, 0.16);
    text-align: center;
}

/* ---------------------------------------------------------------
   Home-page cover band ([acc_newsletter_covers], acc-newsletter plugin)

   A shelf of the last five years of covers drifting past. The covers
   themselves reuse .acc-news__cover from the catalog, so the bound-booklet
   edges and the tilt-open hover are already handled above.
   --------------------------------------------------------------- */
.acc-newsband {
    /* Full width comes from the alignfull group the shortcode sits in, not
       from a 100vw hack — 100vw counts the scrollbar and would push the
       whole page sideways on Windows. */
    position: relative;
    --acc-wave-h: clamp(34px, 4vw, 60px);
    padding: calc(1.5rem + var(--acc-wave-h)) 0 1.25rem;
    background:
        linear-gradient(180deg, #16331b 0%, #0f2613 100%);
    overflow: hidden;
}
/* Top wave only, painted in the tan of the section above — same trick the
   events band uses. No bottom wave here: the Calendar below paints its own
   top wave, and it now paints it in this band's green (see below), so the
   two bands share one curve instead of stacking two. */
.acc-newsband::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1200 V34 C940,64 260,4 0,34 Z' fill='%23efe8d6'/%3E%3C/svg%3E");
    background-position: top center;
    background-repeat: repeat-x;
    background-size: 100% var(--acc-wave-h);
}
/* The Calendar's top wave is drawn in whatever color sits above it. With
   the cover band there, cream would read as a stray stripe — make it green. */
.acc-newsband-wrap + .acc-home-events--blue::after {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1200 V34 C940,64 260,4 0,34 Z' fill='%230f2613'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 H1200 V26 C940,-4 260,56 0,26 Z' fill='%23efe8d6'/%3E%3C/svg%3E");
}
.acc-newsband__intro {
    max-width: 46rem;
    margin: 0 auto 1rem;
    padding: 0 1.25rem;
    text-align: center;
}
.acc-newsband__eyebrow {
    margin: 0 0 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    /* Not the accent preset — it's tuned for cream backgrounds and goes
       nearly invisible on this one. */
    color: #a8d9ae;
}
.acc-newsband__title {
    margin: 0 0 0.4rem;
    font-family: var(--wp--preset--font-family--serif, Georgia, serif);
    font-size: clamp(1.3rem, 2.4vw, 1.6rem);
    font-weight: 500;
    line-height: 1.15;
    color: #f6f3e8;
}
.acc-newsband__lede {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(246, 243, 232, 0.78);
}

.acc-newsband__rail {
    /* The rail clips the moving track; nothing here scrolls by hand unless
       the reader has asked for reduced motion (see below). The mask softens
       both ends so covers drift in and out instead of being guillotined. */
    overflow: hidden;
    /* Air between the lede and the covers — they were nearly touching. */
    padding: 1.4rem 0 0.5rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.acc-newsband__track {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    width: max-content;
    padding: 0 0.75rem;
    /* Seconds of travel per cover. It belongs beside the cover width below:
       widen a cover at a fixed pace and the rail speeds up, because the track
       gets longer while the lap time stays put. --acc-band-count is stamped
       on the element by the shortcode. */
    --acc-band-pace: 6.75s;
    animation-name: acc-newsband-drift;
    animation-duration: calc(var(--acc-band-count, 40) * var(--acc-band-pace));
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}
/* The issue set is printed twice, so -50% lands exactly on the seam. */
@keyframes acc-newsband-drift {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
/* Aiming at a moving target is unfair — hold still while it's being read. */
.acc-newsband__rail:hover .acc-newsband__track,
.acc-newsband__rail:focus-within .acc-newsband__track {
    animation-play-state: paused;
}

.acc-newsband__item {
    flex: 0 0 auto;
    width: 170px;
    margin: 0;
    text-align: center;
}
@media (min-width: 782px) {
    .acc-newsband__item { width: 215px; }
}
/* The item doubles as a catalog card (that's what the issue modal binds to),
   but the catalog's gap under the cover belongs to its own grid, not here. */
.acc-newsband__item .acc-news__cover { margin: 0; }
.acc-newsband__item img {
    /* Covers are scanned at slightly different page boxes; a fixed ratio
       keeps the shelf line straight. */
    aspect-ratio: 17 / 22;
    object-fit: cover;
}
.acc-newsband__cap {
    margin-top: 0.5rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(246, 243, 232, 0.62);
}
.acc-newsband__item:hover .acc-newsband__cap,
.acc-newsband__item:focus-within .acc-newsband__cap {
    color: #f6f3e8;
}

.acc-newsband__more {
    margin: 0.7rem 0 0;
    text-align: center;
}
.acc-newsband__link {
    display: inline-block;
    padding: 0.55rem 1.5rem;
    border: 1.5px solid rgba(246, 243, 232, 0.5);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none !important;
    color: #f6f3e8 !important;
}
.acc-newsband__link:hover {
    background: #f6f3e8;
    color: #10210f !important;
    border-color: #f6f3e8;
}

@media (prefers-reduced-motion: reduce) {
    .acc-newsband__track { animation: none; }
    .acc-newsband__rail { overflow-x: auto; } /* browse it by hand instead */
}
.acc-reader__count {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(243, 241, 231, 0.66);
}


/* ---------------------------------------------------------------
   Speaker Series lead -- intro left, featured talk right.
   Deliberately mirrors .acc-newscat__lead so the two archive pages
   read as siblings.
   --------------------------------------------------------------- */
.acc-speaker-lead {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--50);
    align-items: start;
    text-align: left;
    margin-bottom: 2.5rem;
}
@media (min-width: 900px) {
    .acc-speaker-lead {
        grid-template-columns: 50fr 50fr;
        gap: var(--wp--preset--spacing--60);
    }
    .acc-speaker-lead__intro > :last-child {
        margin-bottom: 0;
    }
}

/* The two calls to action follow the text they answer, on one row. They wrap to
   two lines on a narrow screen rather than being forced to fit. */
.acc-speaker-lead__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.acc-speaker-lead__actions .acc-video-channel-link,
.acc-speaker-lead__actions .acc-newssub {
    margin: 0;
}
/* Photo column. Matches the corner radius of the video cards below so the two
   read as part of the same page. */
.acc-speaker-lead__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}
.acc-speaker-lead__media figure {
    margin: 0;
}

.acc-speaker-lead .acc-section-eyebrow,
.acc-speaker-lead .acc-section-title,
.acc-speaker-lead .acc-section-lede {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
}

/* Featured talk card */
/* Stacked at every width: the thumbnail runs the full width of the card with
   the title and details beneath it, the way a video listing reads. */
/* Same surface as the Post Oak latest-issue card: 28/32 padding, 8px radius,
   the pale green tint. The two pages should look like siblings. */
.acc-speaker-featured {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 28px 32px;
    background: #eef2e8;
    border: 1px solid var(--wp--preset--color--border, #c9c2ad);
    border-radius: 8px;
}
/* Capped to the same rendered size as the thumbnails in the grid below (they
   land at ~388px wide in a three-column row), so the featured talk reads as one
   of the set rather than a blown-up version of it -- and so a 16:9 image at the
   full card width stops driving the card taller than the intro beside it. */
.acc-speaker-featured__media {
    display: block;
    max-width: 24rem;
    margin-bottom: 1.1rem;
    border-radius: 10px;
    overflow: hidden;
    line-height: 0;
    background: var(--wp--preset--color--tan, #d9c9a3);
}
.acc-speaker-featured__media img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 400ms ease;
}
.acc-speaker-featured__media:hover img {
    transform: scale(1.03);
}
.acc-speaker-featured__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.acc-speaker-featured__eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wp--preset--color--leaf, #3d6b3f);
}
.acc-speaker-featured__title {
    margin: 0 0 0.4rem;
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    font-weight: 500;
    line-height: 1.2;
}
.acc-speaker-featured__title a {
    color: var(--wp--preset--color--primary, #1a3a1f);
    text-decoration: none;
}
.acc-speaker-featured__title a:hover {
    text-decoration: underline;
    text-underline-offset: 0.16em;
}
.acc-speaker-featured__meta {
    margin: 0 0 0.85rem;
    font-size: 0.85rem;
    color: var(--wp--preset--color--muted, #5b5847);
}
.acc-speaker-featured__summary {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--wp--preset--color--foreground, #1c2418);
}
.acc-speaker-featured__summary p {
    margin: 0 0 0.6rem;
}
.acc-speaker-featured__summary > :last-child {
    margin-bottom: 0;
}
/* Long YouTube descriptions are cut with a fade rather than a hard edge. The
   class is set in PHP, because only the server knows whether the text is long
   enough to have been cut. */
.acc-speaker-featured__summary.is-clamped {
    max-height: 7.5rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.acc-speaker-featured__action {
    margin: 1.25rem 0 0;
}
.acc-speaker-featured__body {
    flex: 1 1 auto;
}
.acc-speaker-featured__body .acc-speaker-featured__action {
    margin-top: auto;
    padding-top: 1.25rem;
}
.acc-speaker-featured__action .acc-speaker-featured__btn,
.acc-speaker-featured__action .acc-speaker-featured__btn:hover,
.acc-speaker-featured__action .acc-speaker-featured__btn:focus {
    text-decoration: none;
}
.acc-speaker-featured__btn {
    display: inline-block;
    padding: 0.7rem 1.5rem;
    border-radius: 999px;
    background: var(--wp--preset--color--primary, #1a3a1f);
    color: var(--wp--preset--color--background, #faf7f0) !important;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 160ms ease;
}
.acc-speaker-featured__btn:hover {
    background: var(--wp--preset--color--primary-light, #2c5e34);
}

/* ============================================================
   MOBILE & TABLET PASS
   Everything below is a phone/tablet correction layered on top of
   the rules above. It lives at the end of the file on purpose: each
   block overrides a desktop-first rule stated earlier, and keeping
   them together makes the responsive strategy readable in one place.

   Breakpoints used here, and why:
     599px   - phone portrait ends
     619px   - the newsletter reader / issue modal's existing phone line
     781px   - WordPress core's own column-stacking line
     1023px  - tablet landscape; below it the desktop nav bar cannot fit
   (pointer: coarse) / (hover: none) gate touch-target growth so the
   desktop chrome stays thin.
   ============================================================ */

/* ---- Touch targets --------------------------------------------------
   The rule at the top of this file covers nav links, button blocks and
   blog pagination. These are everything else a thumb has to hit. */
@media (pointer: coarse) {
    .acc-newscat__yearlink,
    .acc-newscat__more,
    .acc-newsstack__link,
    .acc-newsband__link,
    .acc-addcal__btn,
    .acc-events-filter__chip,
    .acc-gal__navlink,
    .acc-gal__more,
    .acc-share__btn,
    .acc-footer__social-link,
    .acc-feature-card__btn,
    .acc-area-info__map-btn,
    .acc-speakers__cal-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .acc-newscat__yearnav { gap: 0.6rem; }
    .acc-ev__addcal .acc-addcal__btn {
        min-width: 44px;
        justify-content: center;
        padding: 0.6rem;
    }
    .acc-addcal__opt { display: flex; align-items: center; min-height: 44px; }
    .acc-events-filter__select { min-height: 44px; }
    .acc-sticky-header .acc-header-search .wp-block-search__button {
        min-width: 44px;
        min-height: 44px;
        padding: 0.6rem;
        justify-content: center;
    }
    /* Footer link lists are 17px line boxes with no padding of their own. */
    .acc-footer .wp-block-navigation-item__content,
    .acc-footer li > a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }
    .acc-area-map__frame .maplibregl-ctrl-group button { width: 44px; height: 44px; }
}

/* Overlay chrome - closes and arrows, on every pointer type. These are
   the only way out of a full-screen overlay, so they never shrink. */
.acc-issue__close,
.acc-issue__nav,
.acc-paymodal__close,
.acc-ask__close,
.acc-newssub__close,
.acc-inq__close,
.acc-noticebar__close,
.acc-gal-lightbox__close,
.acc-gal-lightbox__prev,
.acc-gal-lightbox__next {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* The slider dots are 10px by design. Give them a 44px pad rather than
   growing the dot itself. */
.acc-fade-slider__dot { position: relative; }
.acc-fade-slider__dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}
.acc-fade-slider__dots { gap: 0.85rem; }

/* ---- Forms: iOS zooms the page on focus below 16px ------------------
   Several plugin stylesheets set their own 16px floor and say so. This
   is the site-wide backstop for the ones that do not. */
@media (max-width: 781px) {
    /* Class selectors outrank the element list below, so the few fields that
       set their own size need naming. */
    .acc-events-filter__select,
    .acc-ask__field input,
    .acc-ask__field textarea,
    .acc-area-join__form input,
    .acc-area-join__form textarea,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="number"],
    input[type="date"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px;
    }
}

/* ---- Header ---------------------------------------------------------
   At 768px the logo + full nav + search do not fit on one line, so the
   bar wraps to 127px and eats a sixth of a tablet screen. Shrink the nav
   until the desktop arrangement genuinely fits. */
@media (max-width: 1023px) {
    .acc-sticky-header .acc-main-nav .wp-block-navigation__container {
        gap: 1rem !important;
    }
    .acc-sticky-header .acc-main-nav .wp-block-navigation-item__content {
        font-size: 0.95rem;
    }
}
@media (max-width: 599px) {
    .acc-sticky-header .acc-header-logo img,
    .acc-sticky-header .wp-block-site-logo img {
        height: 46px;
        max-width: 60vw; /* the rule above sets max-width: none */
    }
    html { scroll-padding-top: 62px; }
}
/* Landscape phones: 80px of sticky header out of 375px is a fifth of the
   screen gone before anything renders. */
@media (max-height: 500px) {
    .acc-sticky-header .acc-header-logo img,
    .acc-sticky-header .wp-block-site-logo img { height: 40px; }
    .acc-sticky-header {
        padding-top: 0.3rem !important;
        padding-bottom: 0.3rem !important;
    }
}

/* ---- Hero -----------------------------------------------------------
   The split hero reserves 8.5rem of empty padding for the card overlap
   plus a 50vh floor. On a short landscape screen that is a full screen
   of green before any content. */
@media (min-width: 782px) and (max-height: 620px) {
    .acc-hero--split .acc-hero__text {
        padding-top: var(--wp--preset--spacing--50) !important;
        padding-bottom: 4.5rem !important;
    }
    .acc-hero--split .acc-hero__row { min-height: 0; }
    .acc-feature-cards { margin-top: -3rem !important; }
    .acc-feature-cards::before,
    .acc-feature-cards::after { inset: 3rem 0 0 0; }
}

/* ---- Feature cards --------------------------------------------------
   Three across only once a card is wide enough to hold its title. */
@media (min-width: 600px) and (max-width: 999px) {
    /* There are three cards, so 2-up leaves the last one alone beside a hole.
       Give it the whole row instead. */
    .acc-feature-cards__row > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}
@media (min-width: 1000px) {
    .acc-feature-cards__row { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Footer ---------------------------------------------------------
   Five columns in a row is a 171px column at 820px. Core only stacks at
   781px, so 782-1099 had nothing. */
@media (max-width: 1099px) {
    .acc-footer > .wp-block-columns {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--wp--preset--spacing--50);
    }
    .acc-footer > .wp-block-columns > .wp-block-column {
        flex-basis: auto !important;
        min-width: 0;
    }
    .acc-footer > .wp-block-columns > .wp-block-column:first-child {
        grid-column: 1 / -1;
    }
}
@media (max-width: 599px) {
    .acc-footer > .wp-block-columns { grid-template-columns: 1fr; }
}

/* ---- Event cards ----------------------------------------------------
   The org badge prints an admin-entered organization name verbatim. As a
   nowrap flex item a long one pushes the card past the viewport. */
.acc-event-card__actions .acc-event-badge {
    white-space: normal;
}
/* Insurance for every badge, wherever it renders: the org label is an
   admin-entered name and nothing else guards its width. */
.acc-event-badge {
    overflow-wrap: anywhere;
    max-width: 100%;
}
@media (min-width: 600px) {
    .acc-event-card__actions .acc-event-badge { white-space: nowrap; }
}

/* ---- Newsletter catalog --------------------------------------------
   minmax(150px) plus a 24px gap needs 324px; a 360px phone has 312px of
   container, so auto-fill dropped to one column and ~50 covers became
   20,000px of scrolling. */
.acc-news--catalog .acc-news__grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1.5rem 1rem;
}
@media (min-width: 480px) {
    .acc-news--catalog .acc-news__grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 2.25rem 1.5rem;
    }
}
/* Year links were landing 8px under the sticky bar. */
.acc-newscat__year-section { scroll-margin-top: 6rem; }

/* ---- Post Oak issue modal ------------------------------------------
   Scroll the shell, not the dialog: a dialog capped in vh is taller than
   the visible viewport once the mobile URL bar shows, and a centered
   overflow cannot be scrolled to at either end. Same shape as
   acc-payments' checkout modal, which already gets this right. */
.acc-issue {
    align-items: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
}
html:has(body.acc-issue-open) { overflow: hidden; }
.acc-issue__dialog {
    max-height: none;
    overflow: visible;
    margin: auto; /* still centers when it fits */
}
/* Sticky rather than absolute, so it survives scrolling the shell. */
.acc-issue__close {
    position: sticky;
    top: 0;
    float: right;
    margin: -1rem -0.75rem 0 0;
    z-index: 3;
}
/* Fixed to the viewport instead of absolute inside a scrolling dialog -
   they used to sit on the summary text and scroll away with it. */
.acc-issue__nav {
    position: fixed;
    z-index: 2;
    width: 2.75rem;
    height: 2.75rem;
    background: rgba(250, 247, 240, 0.94);
    box-shadow: 0 4px 14px rgba(13, 43, 18, 0.35);
}
.acc-issue__nav:hover { background: #fff; }
@media (max-width: 619px) {
    /* No room beside a full-width dialog: park them along the bottom. */
    .acc-issue__nav {
        top: auto;
        bottom: calc(0.75rem + env(safe-area-inset-bottom));
        transform: none;
    }
    .acc-issue__nav--prev { left: 1.25rem; }
    .acc-issue__nav--next { right: 1.25rem; }
}

/* ---- Post Oak reader ------------------------------------------------ */
@media (pointer: coarse) {
    .acc-reader__tool { min-width: 44px; height: 44px; }
    .acc-reader__close { padding: 0 0.9rem; }
}
/* Keep a download escape hatch on phones. pdf.js on a low-end phone with
   a 13MB scan is exactly when it is needed, and it was hidden at the
   width where the render is most likely to fail. */
@media (max-width: 619px) {
    .acc-reader__dl {
        display: inline-flex;
        padding: 0 0.7rem;
        font-size: 0;
    }
    .acc-reader__dl::after { content: "\2193"; font-size: 1.15rem; }
}
/* 52px discs at mid-height cover two columns of the page on a phone. */
@media (max-width: 899px) {
    .acc-reader__nav {
        top: auto;
        bottom: 0.6rem;
        transform: none;
        width: 3rem;
        height: 3rem;
        font-size: 1.7rem;
    }
    .acc-reader__nav:hover:not(:disabled) { transform: none; }
    .acc-reader__nav--prev { left: 1rem; }
    .acc-reader__nav--next { right: 1rem; }
    .acc-reader__scroll { padding-bottom: 4.25rem; }
}
.acc-reader__scroll { overscroll-behavior: contain; }
.acc-reader__bar {
    padding-right: calc(0.9rem + env(safe-area-inset-right));
    padding-left: calc(0.9rem + env(safe-area-inset-left));
}
.acc-reader__foot {
    padding: 0.55rem calc(0.9rem + env(safe-area-inset-right))
             calc(0.55rem + env(safe-area-inset-bottom))
             calc(0.9rem + env(safe-area-inset-left));
}
/* Page slider: a 34-page issue was 33 taps on a chevron. */
.acc-reader__slider {
    display: block;
    width: min(420px, 90%);
    height: 2.5rem;
    margin: 0 auto 0.15rem;
    accent-color: #f3f1e7;
    cursor: pointer;
}
.acc-reader__slider[hidden] { display: none; }

/* ---- Home cover band ------------------------------------------------
   The rail pauses on hover, which no touch device has, and overflow
   hidden means it cannot be dragged either - so on a phone the covers
   are a moving target you cannot stop. */
@media (hover: none) {
    .acc-newsband__rail {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
    }
    .acc-newsband__rail:active .acc-newsband__track { animation-play-state: paused; }
    .acc-newsband__item { scroll-snap-align: center; }
}

/* ---- Odds and ends -------------------------------------------------- */
/* 420px of cropped photo before any copy on a 667px screen. */
@media (max-width: 600px) {
    .wp-block-media-text.acc-members-split.is-image-fill .wp-block-media-text__media {
        min-height: 240px;
    }
}
/* The only display-scale number in the theme that was not fluid. */
.acc-tier__price { font-size: clamp(2.25rem, 1.9rem + 1.6vw, 3rem); }
/* 64px of a 360px screen was going to fixed side padding. */
.acc-speaker-featured { padding: clamp(1.25rem, 4vw, 28px) clamp(1.1rem, 5vw, 32px); }

/* ---- Event rows: one control per header on a phone -------------------
   The header is a <summary>: tapping anywhere on it expands the row, and
   the chevron only says so. Add-to-calendar is a separate <details>
   pinned over the header's right padding, so on a phone the two sat about
   10px apart with the pinned button's 44px box overlapping the edge of the
   header it floats on — a thumb aiming at the arrow opened the calendar
   menu instead.

   Below 600px the calendar disclosure leaves the header and becomes a
   labeled pill at the foot of the expanded row, under the share links.
   The header then carries a single target, and the 3.4rem right reserve
   it was holding goes back to the title, which is what wraps to three
   lines on a 360px screen. Tablet and desktop keep the pinned pill. */
@media (max-width: 599px) {
    .acc-ev__head { padding-right: 1rem; }

    /* Out of the corner and into the flow. Relative, not static, so the
       dropdown still hangs off the pill rather than the card's edge. */
    .acc-ev__addcal {
        position: relative;
        top: auto;
        right: auto;
        display: none;
        margin: 0 1rem 1rem;
        /* Line the pill up with the body copy, which is indented past the
           date column. */
        margin-left: calc(1rem + 2.9rem + 0.85rem);
    }
    .acc-ev:has(.acc-ev__acc[open]) .acc-ev__addcal { display: block; }

    /* Room for a label now that it is not squeezed into a corner. */
    .acc-ev__addcal .acc-addcal__label { display: inline; }
    .acc-ev__addcal .acc-addcal__btn {
        min-width: 0;
        padding: 0.6rem 0.95rem;
    }
    .acc-ev__addcal .acc-addcal__menu { right: auto; left: 0; }

    /* The share row above it already ends in a pill; keep them from
       reading as one block. */
    .acc-ev__body:has(.acc-share) { padding-bottom: 0.6rem; }

    /* The arrow is decorative, but it is what a thumb aims at. Give it a
       44px box at the end of the title column. */
    .acc-ev__chevron {
        min-width: 44px;
        min-height: 44px;
        margin-top: -0.35rem;
        justify-content: center;
    }
}

/* ============================================================
   Utility: hide on small screens
   ============================================================
   A block that earns its place on a wide screen and only costs a scroll on a
   narrow one — a decorative photo between two sections, say. Written as a
   utility rather than a one-off rule so the next case does not become a
   second bespoke selector.

   781px matches the breakpoint the rest of the theme mobile rules use, which
   is core's own stacking point for columns.

   Deliberately display:none rather than visibility or opacity: the point is to
   remove it from the flow, and on mobile the browser then does not fetch the
   image at all when it is the only thing referencing it. */
@media (max-width: 781px) {
    .acc-hide-mobile {
        display: none;
    }
}

/* ============================================================
   Expanded event row on a phone
   ============================================================
   The body indents to line up under the title, which is right on a wide row
   and expensive on a narrow one: 1rem + 2.9rem + 0.85rem is about 76px of a
   375px screen, a fifth of the width, spent on alignment nobody notices once
   the row is open and the date is scrolled past.

   Underneath that the row ended in three different treatments stacked up — a
   bare text link, a label with a pill beside it, and a second pill below — so
   the eye had to work out three times that these were all just actions.
   ============================================================ */
@media (max-width: 599px) {
    .acc-ev__body {
        padding-left: 1rem;
    }

    /* "Share this event" alongside a button that says Share. The label is for
       a wide row where the buttons need naming; here it is the longest string
       in the group and says nothing the button does not. */
    .acc-ev__body .acc-share__label {
        display: none;
    }

    /* The three actions as one set, wrapping, rather than a stack of
       unrelated-looking things. */
    .acc-ev__body .acc-ev__details,
    .acc-ev__body .acc-share,
    .acc-ev__body .acc-ev__addcal {
        margin-top: 0.75rem;
    }

    .acc-ev__body .acc-share {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }

    /* Details reads as a control like the other two, not a stray sentence. */
    .acc-ev__body .acc-ev__details {
        margin-bottom: 0;
    }

    .acc-ev__body .acc-ev__details a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0.5em 1.2em;
        border: 1.5px solid var(--wp--preset--color--border, #d1d5db);
        border-radius: 999px;
        font-size: 0.85rem;
    }

    /* The calendar pill carried the same indent the body used to, so with the
       body now flush it sat alone in the middle of the row looking centred and
       unrelated to the buttons above it. */
    .acc-ev__addcal {
        margin-left: 1rem;
    }
}

/* Current page in the mobile overlay. Focus in this panel is already drawn
   as a pale wash with an accent left edge (see above), so the current row
   cannot use either without the two becoming the same thing. It gets a
   filled accent pill instead — the dark-panel counterpart of the desktop
   pill. Section headers are labels, not links, so only the page is marked. */
.acc-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--primary-dark) !important;
    border-radius: 6px;
    box-shadow: none;
}
/* Focusing the current row: the wash-and-edge treatment is invisible against
   the filled pill, so focus is an inset ring there instead. */
.acc-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content:focus,
.acc-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content:focus-visible {
    outline: none;
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--primary-dark) !important;
    box-shadow: inset 0 0 0 2px var(--wp--preset--color--background);
}

/* Volunteer callout — the email CTA, moved up under the opening paragraph.
   It used to be a full-width green band at the foot of the page, which is
   the one place a visitor who is already leaving will never scroll to.
   Sitting inside the intro column, it lands immediately after the sentence
   that tells them no experience is needed, which is the moment they are
   most likely to say yes. */
.acc-volunteer-callout {
    margin-top: var(--wp--preset--spacing--40);
    padding: clamp(1rem, 2.5vw, 1.4rem);
    background: var(--wp--preset--color--surface);
    border-left: 4px solid var(--wp--preset--color--accent);
    border-radius: 4px 12px 12px 4px;
}
.acc-volunteer-callout__lede {
    margin: 0 0 0.9rem 0 !important;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--wp--preset--color--primary);
}
/* The group is a constrained layout, which would otherwise centre children
   narrower than the content width and float the button away from the text. */
.acc-volunteer-callout > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.acc-volunteer-callout .wp-block-buttons {
    margin-bottom: 0;
}

/* FAUNA award plaque — it shares the "what we're asking for" band with the
   list of asks, as the 40% half of a 60/40 pair. In the intro column it had
   been a narrow figure in a wide constrained column, which is a lot of empty
   page for one small image. */
.acc-fauna-award {
    margin: 0 !important;
}
.acc-fauna-award img {
    display: block;
    width: 100%;
    height: auto;
}
.acc-fauna-award figcaption {
    text-align: left;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--wp--preset--color--muted);
}
/* That band is a dark slate gradient with cream text, where the muted ink
   the caption normally uses is unreadable. */
.acc-page-section--slate .acc-fauna-award figcaption {
    color: rgba(246, 248, 246, 0.78);
}
/* Keep the plaque from towering over a short list on wide screens. */
.acc-fauna-award-cols .wp-block-column:last-child {
    max-width: 420px;
}
@media (max-width: 781px) {
    .acc-fauna-award-cols .wp-block-column:last-child {
        max-width: 340px;
    }
}