/* =============================================================================
   Community Schedule — Clark County, Nevada

   Design language follows the Aspire ABA RevSite (the reference the client
   chose): pill eyebrows with a colour dot, centred section heads, 10px
   buttons with translucent secondaries, 28px cards, organic asymmetric media
   frames with a floating badge, sticky editorial splits, bordered reason
   lists, a script accent, a marquee band, and soft scroll parallax.
   Palette and display face are this brand's own.

   All colour pairs verified against WCAG 2.2 AA — table in PRODUCT.md.
   ========================================================================== */

/* ------------------------------- 1. TOKENS ------------------------------- */
:root {
  --cream: #fdf8f0;
  --cream-2: #f5ede1;
  --white: #ffffff;
  --ink: #1f2933;
  --ink-soft: #52606d;
  --terra: #c05621;
  --terra-deep: #9c4221;
  --terra-100: #fbede3;
  --blush: #e8a87c; /* light accent for dark grounds */
  --sage: #4a7c59;
  --sage-deep: #35603f;
  --sage-100: #eaf0ea;
  --line: #e7dccb;
  --line-strong: #8c7b62;

  --serif: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:
    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
  --script: 'Caveat', 'Segoe Script', cursive;

  --r-sm: 8px;
  --r-btn: 10px;
  --r: 16px;
  --r-lg: 28px;
  --r-organic: 26px 26px 26px 84px;

  --sh-sm: 0 2px 10px rgba(31, 41, 51, 0.06);
  --sh-md: 0 12px 30px rgba(31, 41, 51, 0.1);
  --sh-lg: 0 30px 60px rgba(31, 41, 51, 0.14);

  /* Aspire's gutter is fluid and generous and its container has no max-width.
     Matching the gutter exactly; the cap keeps ultrawide screens sane. */
  --gut: clamp(1.25rem, 6vw, 70px);
  --sec: clamp(3.5rem, 8vw, 7rem);
  --max: 1560px;
  --nav-h: 7.1rem; /* re-measured in px by main.js */

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* house easing */
  --t-ui: 0.2s; /* buttons, links, chips */
  --t-card: 0.25s; /* cards, plates */
  --t-slow: 0.7s; /* reveals, image scale */
}

/* ------------------------------- 2. RESET -------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0313rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body.is-locked {
  overflow: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.2rem, 5vw, 3.9rem);
}
h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
}
h3 {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
}
h1 em,
h2 em,
h3 em {
  font-style: italic;
  font-weight: 400;
  color: var(--terra-deep);
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}
p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--terra-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--terra);
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}

button {
  font: inherit;
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ----------------------------- 3. UTILITIES ------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--narrow {
  max-width: 780px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 200;
  transform: translateY(-250%);
  background: var(--ink);
  color: var(--cream);
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-sm);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s;
}
.skip-link:focus {
  transform: translateY(0);
  color: var(--cream);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--terra-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.ico {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--sm {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 1.9;
}
.ico--flip {
  transform: scaleX(-1);
}

/* In-page labels read as part of the editorial rhythm, not as repeated pills —
   Aspire overrides its own pill for section eyebrows and keeps it only where
   the label sits on imagery or a dark ground. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--terra-deep);
  margin: 0 0 1rem;
}
/* Pill + dot: hero, dark bands, and modal heads. */
.hero .eyebrow,
.section--dark .eyebrow,
.section--terra .eyebrow,
.modal__head .eyebrow {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hero .eyebrow::before,
.section--dark .eyebrow::before,
.section--terra .eyebrow::before,
.modal__head .eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blush);
  flex: none;
}
.modal__head .eyebrow {
  background: var(--terra-100);
  border-color: #f0dccb;
  color: var(--terra-deep);
}
.modal__head .eyebrow::before {
  background: var(--terra);
}

.lead {
  font-size: clamp(1.0313rem, 1.6vw, 1.1875rem);
  color: var(--ink-soft);
  max-width: 62ch;
}
.script-accent {
  font-family: var(--script);
  color: var(--terra-deep);
  font-size: 1.7em;
  line-height: 1;
  font-weight: 600;
}
.fine-print {
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
}

.section {
  padding-block: var(--sec);
  position: relative;
}
section[id] {
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}
.section--tight {
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}
.section--cream {
  background: var(--cream-2);
}
.section--band {
  background: var(--sage-100);
  padding-block: clamp(2.75rem, 6vw, 4.75rem);
}
.section--dark {
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
}
.section--dark h2,
.section--dark h3 {
  color: var(--cream);
}
.section--dark h2 em {
  color: var(--blush);
}
.section--terra {
  background: var(--terra);
  color: var(--white);
}
.section--terra h2 {
  color: var(--white);
}
.section--terra h2 em {
  color: #ffe6d2;
}

/* Signature: centred section head, CTA on its own line underneath. */
.section-head {
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: 2.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section-head .lead {
  margin: 0.9rem auto 0;
}
.section-head .section__sub {
  margin: 0.9rem auto 0;
}
.section-cta {
  margin-top: 2.4rem;
  margin-bottom: 2.4rem;
  text-align: center;
}
.section__title {
  margin-bottom: 0;
}
.section__sub {
  color: var(--ink-soft);
  font-size: 1.0313rem;
  max-width: 62ch;
  margin: 0;
}
.section--dark .lead,
.section--terra .lead,
.section--dark .section__sub,
.section--terra .section__sub {
  color: rgba(253, 248, 240, 0.84);
}

/* ------------------------------ 4. BUTTONS ------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.85rem 1.4rem;
  min-height: 2.875rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-btn);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--t-ui) var(--ease),
    box-shadow var(--t-ui) var(--ease),
    background var(--t-ui) var(--ease),
    color var(--t-ui) var(--ease),
    border-color var(--t-ui) var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0) scale(0.98);
}
.btn--sm {
  padding: 0.6rem 1.05rem;
  font-size: 0.9rem;
  min-height: 2.5rem;
}
.btn--lg {
  padding: 1rem 1.6rem;
  font-size: 1.0625rem;
  min-height: 3.25rem;
}

.btn--primary {
  background: var(--terra);
  color: var(--white);
  box-shadow: var(--sh-sm);
}
.btn--primary:hover {
  background: var(--terra-deep);
  color: var(--white);
  box-shadow: var(--sh-md);
}

/* Signature: outlined on a lightly blurred translucent wash. */
.btn--secondary,
.btn--ghost {
  background: rgba(192, 86, 33, 0.07);
  color: var(--terra-deep);
  border-color: var(--terra-deep);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn--secondary:hover,
.btn--ghost:hover {
  background: rgba(192, 86, 33, 0.14);
  color: var(--terra-deep);
  border-color: var(--terra-deep);
}

.btn--cream {
  background: var(--cream);
  color: var(--ink);
}
.btn--cream:hover {
  background: var(--white);
  color: var(--ink);
}
.btn--outline-cream {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
}
.btn--outline-cream:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
  border-color: var(--white);
}

.hero .btn--secondary {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.hero .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: #fff;
  color: #fff;
}

.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--terra-deep);
}
.link-cta:hover {
  color: var(--terra);
}

/* --------------------------- 5. PILLS / CHIPS ---------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--sh-sm);
}
.pill .ico {
  width: 1.0625rem;
  height: 1.0625rem;
  stroke-width: 2.1;
  color: var(--sage-deep);
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.9rem;
}
.trust-row .pill {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: none;
}
.trust-row .pill .ico {
  color: var(--blush);
}

.filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  -webkit-overflow-scrolling: touch;
}
.filters--wrap {
  flex-wrap: wrap;
  overflow: visible;
}
.filters__count {
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
}
#orgFilters {
  justify-content: center;
}
#orgCount {
  text-align: center;
}

.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.375rem;
  padding: 0.45rem 1rem;
  background: var(--white);
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--sh-sm);
  transition:
    background 0.18s,
    border-color 0.18s,
    color 0.18s,
    box-shadow 0.18s,
    transform 0.18s;
}
.chip:hover {
  border-color: var(--terra);
  color: var(--terra-deep);
  box-shadow: var(--sh-md);
  transform: translateY(-1px);
}
.chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
  box-shadow: var(--sh-md);
}
.chip .ico {
  width: 1rem;
  height: 1rem;
}

/* ------------------------------ 6. CALLOUTS ------------------------------ */
.callout {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  border-left: 4px solid var(--sage);
  border-radius: var(--r);
  padding: 1rem 1.15rem;
  margin-bottom: 1.75rem;
  font-size: 0.9688rem;
  box-shadow: var(--sh-sm);
}
.callout .ico {
  color: var(--sage-deep);
  margin-top: 0.1rem;
}
.callout p {
  margin: 0;
}
.callout--alert {
  border-left-color: var(--terra);
  background: var(--terra-100);
  border-color: #f0dccb;
}
.callout--alert .ico {
  color: var(--terra-deep);
}

/* ------------------------------- 7. TOPBAR ------------------------------- */
.topbar {
  background: var(--ink);
  color: rgba(253, 248, 240, 0.9);
  font-size: 0.8438rem;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.5rem;
  padding-block: 0.35rem;
}
.topbar__tagline {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
}
.topbar__links {
  display: flex;
  align-items: center;
  gap: 1.15rem;
}
.topbar__link {
  background: none;
  border: 0;
  padding: 0.25rem 0;
  cursor: pointer;
  color: rgba(253, 248, 240, 0.9);
  font-size: 0.8438rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.topbar__link:hover {
  color: var(--white);
  border-bottom-color: rgba(253, 248, 240, 0.6);
}

/* ------------------------------- 8. HEADER ------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253, 248, 240, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.25s ease;
}
.site-header.is-stuck {
  box-shadow: var(--sh-sm);
}

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

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  line-height: 1;
}
.brand__mark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  letter-spacing: -0.02em;
  transition: font-size 0.25s ease;
}
.site-header.is-stuck .brand__mark {
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
}
.brand:hover .brand__mark {
  color: var(--terra-deep);
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.nav__menu {
  display: flex;
  align-items: center;
  gap: 1.3rem;
}
.nav__menu a {
  position: relative;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.4rem 0;
  white-space: nowrap;
  transition: color var(--t-ui) var(--ease);
}
.nav__menu a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav__menu a:hover {
  color: var(--terra-deep);
}
.nav__menu a:hover::after {
  transform: scaleX(1);
}

.nav__tools {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-toggle {
  display: none;
}

/* -------------------------------- 9. HERO ------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: min(80svh, 44rem);
  display: flex;
  align-items: center;
  padding-block: clamp(3.5rem, 10vh, 6rem) clamp(5.5rem, 13vh, 8rem);
  background: var(--ink);
  overflow: hidden;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      105deg,
      rgba(20, 14, 8, 0.8) 0%,
      rgba(20, 14, 8, 0.55) 44%,
      rgba(20, 14, 8, 0.18) 100%
    ),
    /* The last stop is the ground the overlay header's white type sits on,
       so it is set from a measured contrast reading, not by eye. */
      linear-gradient(
        to top,
        rgba(20, 14, 8, 0.72) 0%,
        rgba(20, 14, 8, 0.16) 42%,
        rgba(20, 14, 8, 0.3) 76%,
        rgba(20, 14, 8, 0.62) 100%
      );
}
.hero__inner {
  max-width: 46rem;
  margin-inline: 0;
  color: var(--cream);
}
.hero__title {
  font-size: clamp(2.3rem, 5vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--cream);
  max-width: 20ch;
  margin: 0;
}
/* Signature: the italic phrase draws its own underline in on load. */
.hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--blush);
  position: relative;
  white-space: nowrap;
}
.hero__title em::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.04em;
  height: 0.075em;
  border-radius: 6px;
  background: var(--blush);
  transform: scaleX(0);
  transform-origin: left;
  animation: heroUnderline 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s forwards;
}
@keyframes heroUnderline {
  to {
    transform: scaleX(1);
  }
}

.hero__sub {
  margin-top: 1.3rem;
  max-width: 52ch;
  color: rgba(253, 248, 240, 0.94);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.8rem;
}

/* Signature: floating translucent card with a handwritten line. */
.hero__badge {
  position: absolute;
  right: clamp(1.5rem, 5vw, 4.5rem);
  bottom: clamp(2.5rem, 7vw, 4.5rem);
  z-index: 2;
  background: rgba(20, 14, 8, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  padding: 1.15rem 1.35rem;
  max-width: 17.5rem;
}
.hero__badge .script-accent {
  color: var(--blush);
  font-size: 1.6rem;
  display: block;
  margin-bottom: 0.35rem;
}
.hero__badge p:last-child {
  color: #f2e7da;
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0;
}
@media (max-width: 1100px) {
  .hero__badge {
    display: none;
  }
}

/* Signature: animated scroll rail. */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(253, 248, 240, 0.72);
  text-decoration: none;
  font: 700 0.66rem/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hero__scroll:hover {
  color: #fff;
}
.hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(
    rgba(253, 248, 240, 0.75),
    rgba(253, 248, 240, 0)
  );
  animation: heroScroll 1.9s ease-in-out infinite;
}
@keyframes heroScroll {
  0%,
  100% {
    transform: scaleY(0.55);
    transform-origin: top;
    opacity: 0.55;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}
@media (max-width: 640px) {
  .hero__scroll {
    display: none;
  }
}

/* ------------------- 9b. OVERLAY HEADER OVER THE HERO -------------------
   The hero is pulled up behind the topbar and header so the footage runs
   edge to edge under them. The header stays a translucent blurred layer with
   white nav type until the reader has scrolled nearly past the hero, then
   flips to the opaque cream bar. --nav-h is measured in px by main.js. */
body.home .hero {
  margin-top: calc(-1 * var(--nav-h));
  padding-top: calc(var(--nav-h) + clamp(2rem, 5vh, 3.5rem));
  min-height: min(88svh, 48rem);
}
body.home .topbar {
  position: relative;
  z-index: 110;
}

body.home .site-header {
  background: rgba(253, 248, 240, 0.1);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 4px 24px rgba(20, 14, 8, 0.1);
  transition:
    background var(--t-card) var(--ease),
    border-color var(--t-card) var(--ease),
    box-shadow var(--t-card) var(--ease);
}
body.home .site-header.is-stuck {
  background: rgba(253, 248, 240, 0.94);
  border-bottom-color: var(--line);
  box-shadow: var(--sh-sm);
}

/* One legible layer while transparent: everything goes white with a shadow. */
body.home .site-header:not(.is-stuck) .brand__mark,
body.home .site-header:not(.is-stuck) .nav__menu a {
  color: #fff;
  text-shadow: 0 1px 12px rgba(20, 14, 8, 0.45);
}
body.home .site-header:not(.is-stuck) .brand:hover .brand__mark,
body.home .site-header:not(.is-stuck) .nav__menu a:hover {
  color: var(--blush);
}
body.home .site-header:not(.is-stuck) .nav-toggle {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  box-shadow: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
body.home .site-header:not(.is-stuck) .nav-toggle__bars span {
  background: #fff;
}
/* The open drawer is a cream panel, so its toggle goes back to ink. */
body.home.nav-open .site-header:not(.is-stuck) .nav-toggle {
  background: var(--white);
  border-color: var(--line-strong);
  color: var(--ink);
}
body.home.nav-open .site-header:not(.is-stuck) .nav-toggle__bars span {
  background: var(--ink);
}

/* Vertical kicker rail on the left margin. */
.hero__rail {
  position: absolute;
  left: clamp(0.7rem, 1.8vw, 1.6rem);
  top: 50%;
  z-index: 2;
  margin: 0;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  font: 700 0.72rem/1 var(--sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(253, 248, 240, 0.72);
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.hero__rail::after {
  content: '';
  width: 1px;
  height: 66px;
  background: rgba(253, 248, 240, 0.42);
}
@media (max-width: 900px) {
  .hero__rail {
    display: none;
  }
}

/* --------------------------- 10. MEDIA FIGURES -------------------------- */
/* Signature: organic asymmetric frame + floating circular badge, and a
   slightly oversized image inside so the parallax shift never shows an edge. */
.media-figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-organic);
  box-shadow: var(--sh-md);
  aspect-ratio: 4 / 5;
}
.media-figure picture {
  display: block;
  height: 100%;
}
.media-figure img {
  position: absolute;
  inset: -22px 0;
  width: 100%;
  height: calc(100% + 44px);
  object-fit: cover;
  object-position: 50% 42%;
  will-change: transform;
}
.media-figure__mark {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 16px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--terra);
  color: #fff;
  box-shadow: 0 12px 26px rgba(31, 41, 51, 0.22);
}
.media-figure__mark svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The default 4/5 ratio is a tall portrait crop tuned for sections with a
   full paragraph of copy beside it. Paired with a short callout (a title,
   one paragraph, a button) it towers over the text and align-items: center
   strands the copy in the middle of a mostly-empty column. Both source
   photos this modifies are themselves landscape, so a 4/3 crop needs less
   aggressive cropping AND keeps the two columns close enough in height
   that centering them reads as a deliberate pairing, not a layout bug. */
.media-figure--wide {
  aspect-ratio: 4 / 3;
}

/* Real client photography in About. Only opacity and transform animate, so
   the crossfade stays smooth and never causes layout movement. */
.about-slideshow {
  isolation: isolate;
  background: var(--ink);
}
.about-slideshow__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.about-slideshow::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: 32%;
  background: linear-gradient(transparent, rgba(31, 41, 51, 0.58));
  pointer-events: none;
}
.about-slideshow .about-slideshow__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transform: scale(1.015);
  transition:
    opacity 1.1s var(--ease),
    transform 6.8s ease-out;
  will-change: opacity, transform;
}
.about-slideshow .about-slideshow__slide:nth-child(3) {
  object-position: 50% 38%;
}
.about-slideshow .about-slideshow__slide.is-active {
  opacity: 1;
  transform: scale(1.045);
}
.about-slideshow__caption {
  position: absolute;
  z-index: 2;
  left: 1.25rem;
  bottom: 1.15rem;
  color: var(--white);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(31, 41, 51, 0.5);
}
.about-slideshow .media-figure__mark {
  z-index: 3;
}

/* --------------------------- 11. MARQUEE BAND --------------------------- */
/* Signature: italic display type, masked edges, pause on hover. */
.marquee {
  overflow: hidden;
  min-height: 6.35rem;
  margin: 0 0 2rem;
  padding: 0.3rem 0;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    #000 10%,
    #000 90%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
  opacity: 0;
  will-change: transform;
  animation: marquee 46s linear infinite;
  animation-play-state: paused;
  transition: opacity 0.25s ease;
}
.marquee.is-ready .marquee__track {
  opacity: 1;
  animation-play-state: running;
}
.marquee.is-ready:hover .marquee__track {
  animation-play-state: paused;
}
/* Spacing lives on the chip as margin, not as gap on the track: the track
   holds the partner list twice and the -50% keyframe only lands seamlessly
   while both halves measure exactly the same, trailing space included. */
.marquee__chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 13rem;
  height: 5.75rem;
  margin-right: 1rem;
  padding: 0.65rem 1.15rem;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
}
.marquee__chip img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 10.75rem;
  max-height: 4.25rem;
  object-fit: contain;
  user-select: none;
}
/* Only for logos supplied as white-on-transparent — they vanish on the light
   band otherwise, and altering a third party's artwork is not an option. */
.marquee__chip--dark {
  background: var(--ink);
  border-color: var(--ink);
}
.marquee__chip--text {
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.18;
  color: var(--ink-soft);
  text-align: center;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ------------------------ 12. STICKY EDITORIAL SPLIT -------------------- */
/* Signature: a sticky intro column beside the content, carrying the CTA. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.split__intro {
  position: sticky;
  top: calc(var(--nav-h) + 1.2rem);
}
.split__intro h2,
.split__intro h3 {
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  line-height: 1.08;
  margin: 0 0 1rem;
}
.split__intro .lead {
  margin: 0;
}
.split__main {
  min-width: 0;
}

.split__aside {
  margin-top: 1.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.split__aside-t {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 0.35rem;
}
.split__aside-b {
  margin-bottom: 1.1rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.split__aside .btn {
  width: 100%;
  max-width: 17.5rem;
}
.aside-person {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.1rem;
}
.aside-person img {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--sh-sm);
}
.aside-person figcaption {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.split__aside-tel {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--terra-deep);
  text-decoration: none;
}
.split__aside-tel:hover {
  color: var(--terra);
}

.reasons__title {
  margin-bottom: 1.75rem;
}

/* Signature: three pillars side by side, not stacked rows. */
.reasons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.reason {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}
.reason__ic {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--terra-deep);
}
.reason__ic .ico {
  width: 34px;
  height: 34px;
  stroke-width: 1.5;
}
.reason__txt h4 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0 0 0.3rem;
}
.reason__txt p {
  margin: 0;
  color: var(--ink-soft);
}

/* ----------------------------- 13. WATERMARK ---------------------------- */
/* Signature: oversized mark bleeding off a dark section at very low opacity. */
.watermark {
  position: absolute;
  right: -30px;
  bottom: -70px;
  z-index: 0;
  color: #fff;
  opacity: 0.06;
  pointer-events: none;
  line-height: 0;
}
.watermark svg {
  width: min(70vw, 40rem);
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 0.8;
}

/* --------------------------- 14. QUICK ACCESS --------------------------- */
.quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.quick__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  width: 100%;
  height: 100%;
  min-width: 0;
  text-align: left;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  box-shadow: var(--sh-sm);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.quick__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--terra);
}
.quick__icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 14px;
  margin-bottom: 0.35rem;
  transition:
    transform var(--t-card) var(--ease),
    box-shadow var(--t-card) var(--ease);
}
.quick__card:hover .quick__icon {
  transform: scale(1.08);
  box-shadow:
    0 0 0 8px var(--white),
    0 10px 20px rgba(192, 86, 33, 0.18);
}
.quick__icon--terra {
  background: var(--terra-100);
  color: var(--terra-deep);
}
.quick__icon--sage {
  background: var(--sage-100);
  color: var(--sage-deep);
}
.quick__name {
  font-family: var(--serif);
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1.2;
}
.quick__copy {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  flex: 1;
}
.quick__go {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--terra-deep);
  margin-top: 0.35rem;
}
.quick__go .ico {
  transition: transform 0.18s;
}
.quick__card:hover .quick__go .ico {
  transform: translateX(3px);
}

/* ------------------------------ 16. EVENTS ------------------------------ */
.events {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.eventcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.eventcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}
.eventcard__media {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--cream-2);
  overflow: hidden;
}
.eventcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.eventcard:hover .eventcard__media img {
  transform: scale(1.04);
}
.eventcard__date {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  background: var(--cream);
  border-radius: 12px;
  padding: 0.4rem 0.6rem;
  text-align: center;
  line-height: 1;
  box-shadow: var(--sh-md);
  min-width: 3.25rem;
}
.eventcard__date b {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
}
.eventcard__date span {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terra-deep);
  margin-top: 0.2rem;
}
.eventcard__body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1rem 1.1rem 1.2rem;
  flex: 1;
}
.eventcard__cat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7188rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin: 0;
}
.eventcard__cat .ico {
  width: 0.9375rem;
  height: 0.9375rem;
  stroke-width: 2;
}
.cat--terra {
  color: var(--terra-deep);
}
.cat--sage {
  color: var(--sage-deep);
}
.cat--ink {
  color: var(--ink-soft);
}
.eventcard__title {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
}
.eventcard__meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.eventcard__meta span {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}
.eventcard__meta .ico {
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
}
.eventcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.7rem;
}
.eventcard__org {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--sage-100);
  color: var(--sage-deep);
}
.tag .ico {
  width: 0.875rem;
  height: 0.875rem;
}
.tag--full {
  background: var(--terra-100);
  color: var(--terra-deep);
}
.tag--ext {
  background: var(--terra-100);
  color: var(--terra-deep);
}

.events__empty {
  text-align: center;
  padding: 3rem 1rem;
  background: var(--white);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
}
.events__empty p {
  color: var(--ink-soft);
}

/* ------------------------------ 17. ABOUT ------------------------------- */
.about {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-bottom: clamp(3rem, 7vw, 5rem);
}
.about__body .lead {
  margin-bottom: 1em;
}
.about__body p {
  color: var(--ink-soft);
}
.about__signature {
  display: block;
  margin-top: 1.25rem !important;
  font-size: 2.1rem;
}

/* -------------------------- 18. CALENDAR CTA ---------------------------- */
.calcta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
.calcta__body p {
  color: rgba(253, 248, 240, 0.84);
  font-size: 1.0313rem;
  margin-bottom: 1.75rem;
  max-width: 42ch;
}

.minical {
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: 1.35rem;
  box-shadow: var(--sh-lg);
  color: var(--ink);
}
.minical__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}
.minical__month {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
}
.minical__count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--terra-deep);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.minical__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}
.minical__dow {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-soft);
  padding-bottom: 0.3rem;
}
.minical__cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  position: relative;
  border-radius: 9px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-soft);
}
button.minical__cell {
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition:
    background var(--t-ui),
    color var(--t-ui),
    transform var(--t-ui);
}
button.minical__cell:hover {
  background: var(--sage-100);
  color: var(--sage-deep);
  transform: translateY(-1px);
}
.minical__cell.is-muted {
  color: #bfb4a2;
}
.minical__cell.is-today {
  background: var(--ink);
  color: var(--cream);
  font-weight: 700;
}
.minical__cell.has-events {
  background: var(--terra-100);
  color: var(--terra-deep);
  font-weight: 700;
}
.minical__cell.has-events.is-today {
  background: var(--terra);
  color: var(--white);
}
.minical__cell.has-events::after {
  content: '';
  position: absolute;
  bottom: 0.18rem;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------------------------- 19. RESOURCES ----------------------------- */
/* Five columns match the five verified resource categories in the current
   handoff; responsive rules collapse the row cleanly below desktop. */
.restiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.85rem;
  margin-bottom: clamp(3rem, 7vw, 4.5rem);
}
.restile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  min-width: 0;
  text-align: left;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.15rem 1.05rem;
  box-shadow: var(--sh-sm);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--t-card) var(--ease),
    box-shadow var(--t-card) var(--ease),
    border-color var(--t-card) var(--ease);
}
.restile::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--sage);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.restile:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--sage);
}
.restile:hover::after {
  transform: scaleX(1);
}
.restile__icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--sage-100);
  color: var(--sage-deep);
}
.restile__name {
  font-weight: 700;
  font-size: 0.9688rem;
  line-height: 1.25;
  color: var(--ink);
}
.restile__count {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.resources-section {
  position: relative;
  isolation: isolate;
}
.resources__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.resources__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}
.resources__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Only the top section-head text sits directly on the photo with no card
     behind it, so the scrim is strongest there and fades going down — the
     tiles, button and alert box are all opaque and stay legible regardless.
     See PRODUCT.md for the measured worst-case contrast. */
  background: linear-gradient(
    180deg,
    rgba(31, 41, 51, 0.88) 0%,
    rgba(31, 41, 51, 0.8) 32%,
    rgba(31, 41, 51, 0.5) 100%
  );
}

/* ---------------------------- 20. GET INVOLVED -------------------------- */
.involve__layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.involve__media {
  aspect-ratio: 3 / 4;
}
.involve__body {
  display: flex;
  flex-direction: column;
}
.involve__intro {
  margin-bottom: 2rem;
}
.involve__intro .section__sub {
  margin: 0.9rem 0 1em;
}
.involve__intro h3 {
  margin-top: 1.75rem;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}
/* Fixed at 2 columns rather than 4: this now sits in the narrower .85fr/1.15fr
   layout column beside the photo, not the full section width. */
.involve {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: clamp(3rem, 7vw, 4.5rem);
}
.involve__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  height: 100%;
  min-width: 0;
  text-align: left;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.35rem, 2.4vw, 1.75rem);
  box-shadow: var(--sh-sm);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.involve__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--terra);
}
.involve__icon {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--terra-100);
  color: var(--terra-deep);
  transition:
    transform var(--t-card) var(--ease),
    box-shadow var(--t-card) var(--ease);
}
.involve__icon .ico {
  width: 34px;
  height: 34px;
}
.involve__card:hover .involve__icon {
  transform: scale(1.08);
  box-shadow:
    0 0 0 8px var(--white),
    0 10px 20px rgba(192, 86, 33, 0.18);
}
.involve__title {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
}
.involve__copy {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  flex: 1;
}
.involve__time {
  font-size: 0.7188rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sage-deep);
  background: var(--sage-100);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}

/* ------------------------------- 21. ORGS ------------------------------- */
.orgs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.orgs--modal {
  grid-template-columns: repeat(2, 1fr);
}
.orgcard {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.45rem 1.45rem 1.25rem;
  box-shadow: var(--sh-sm);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
/* Static content — no lift. Aspire reserves the float for cards you can act on. */
.orgcard:hover {
  box-shadow: var(--sh-md);
  border-color: var(--line-strong);
}
.orgcard__head {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}
.orgcard__mark {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
}
.orgcard__name {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.15rem;
}
.orgcard__type {
  font-size: 0.7188rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--terra-deep);
}
.orgcard__blurb {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  flex: 1;
  margin: 0;
}
.orgcard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.orgcard__tag {
  font-size: 0.75rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--cream-2);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.orgcard__area {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}
/* Sara asked for outbound links in the directory, so each card carries its
   own website and phone. */
.orgcard__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
}
.orgcard__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--terra-deep);
  text-decoration: none;
  transition: color var(--t-ui) var(--ease);
}
.orgcard__link:hover {
  color: var(--terra);
  text-decoration: underline;
}
.orgcard__link .ico {
  flex: none;
}

/* The external-registration panel leads with the outbound button. */
.evt__rsvp--external {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}
.evt__rsvp--external .btn {
  margin-top: 0.6rem;
}
.orgcard__area .ico {
  width: 1rem;
  height: 1rem;
}

/* ------------------------------ 22. SUBMIT ------------------------------ */
.submit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.submit__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  height: 100%;
  min-width: 0;
  text-align: left;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.35rem, 2.4vw, 1.75rem);
  box-shadow: var(--sh-sm);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.submit__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--sage);
}
.submit__icon {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--sage-100);
  color: var(--sage-deep);
  transition:
    transform var(--t-card) var(--ease),
    box-shadow var(--t-card) var(--ease);
}
.submit__card:hover .submit__icon {
  transform: scale(1.08);
  box-shadow:
    0 0 0 8px var(--white),
    0 10px 20px rgba(74, 124, 89, 0.18);
}
.submit__name {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
}
.submit__copy {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  flex: 1;
}

/* -------------------------------- 23. FAQ ------------------------------- */
/* Signature: each answer is its own card; the toggle is a + that becomes a
   filled −, and the open card takes an accent border. */
.faq {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.faq__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.faq__item.is-open {
  border-color: var(--terra);
  box-shadow: var(--sh-sm);
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 1rem 1.25rem;
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}
.faq__q:hover {
  color: var(--terra-deep);
}
.faq__toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cream-2);
  color: var(--terra-deep);
  font-size: 1.25rem;
  line-height: 1;
  font-family: var(--sans);
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.faq__item.is-open .faq__toggle {
  background: var(--terra);
  color: #fff;
}
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.26s ease;
}
.faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
}
.faq__a > div {
  overflow: hidden;
}
.faq__a p {
  padding: 0 1.25rem 1.15rem;
  color: var(--ink-soft);
  font-size: 0.9688rem;
  line-height: 1.6;
  margin: 0;
}

/* --------------------------- 24. FINAL / NEWS --------------------------- */
/* Photo + scrim, same construction as the hero: an oversized img absorbs the
   parallax translate without ever showing an edge, and the scrim is a tinted
   version of --terra rather than a flat color so white text keeps the same
   contrast as the old solid background (verified against rendered pixels,
   see PRODUCT.md). */
.finalcta-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.finalcta__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.finalcta__bg img {
  /* This is a full-bleed banner, not a small framed photo, so the parallax
     needs to move far more than the 22-26px used for the contained photos
     elsewhere (.media-figure) or it reads as static — max shift here is
     data-parallax/2 = 65px, so the oversize buffer must clear that on both
     edges with room to spare. */
  position: absolute;
  inset: -90px 0;
  width: 100%;
  height: calc(100% + 180px);
  object-fit: cover;
  object-position: 50% 38%;
  will-change: transform;
}
.finalcta__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Opacities set from a measured worst-case pixel under the paragraph text
     (a bright sky band in the source photo), not chosen by eye — see
     PRODUCT.md. A lighter pass was tried at half these values but measured
     2.17:1/3.08:1 worst-case (fails the 3:1/4.5:1 AA floor for the heading
     and paragraph); these values are about 18% lighter than the original
     tuning and measure 4.22:1/4.73:1 worst-case, the lightest this scrim
     can go with a safe margin over the AA floor. Darker than the hero's
     scrim because this text has no text-shadow to fall back on. */
  background: linear-gradient(
    160deg,
    rgba(140, 58, 28, 0.78) 0%,
    rgba(156, 66, 33, 0.74) 45%,
    rgba(140, 58, 28, 0.79) 100%
  );
}
.finalcta {
  text-align: center;
}
.finalcta p {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.92);
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: 2rem;
}
.finalcta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
}

.news {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.news__intro p {
  color: var(--ink-soft);
  margin: 0;
}
.news__aside {
  display: flex;
  flex-direction: column;
}
.news__form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
  max-width: 26rem;
  margin: 0 0 0.85rem;
}
.news__form .field {
  width: 100%;
  margin: 0;
}

/* ------------------------------ 25. FOOTER ------------------------------ */
.footer {
  background: var(--ink);
  color: rgba(253, 248, 240, 0.78);
  padding-block: clamp(3rem, 7vw, 4.5rem) 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 0.5rem;
}
.footer__brand .brand__mark {
  display: block;
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--cream);
  margin-bottom: 0.85rem;
}
.footer__brand p {
  font-size: 0.9375rem;
  max-width: 32ch;
}
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.35rem;
  font-size: 0.9375rem;
}
.footer__contact li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.footer__contact .ico {
  color: var(--blush);
}
.footer a {
  color: rgba(253, 248, 240, 0.8);
  text-decoration: none;
}
.footer a:hover {
  color: var(--white);
  text-decoration: underline;
}

.footer__col h2 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blush);
  margin-bottom: 1rem;
}
.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.9375rem;
}
.footer__col button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: rgba(253, 248, 240, 0.8);
  font-size: 0.9375rem;
  text-align: left;
}
.footer__col button:hover {
  color: var(--white);
  text-decoration: underline;
}
.footer__soon {
  margin-top: 1rem;
  font-size: 0.8125rem;
  font-style: italic;
  color: rgba(253, 248, 240, 0.5);
}

.footer__social {
  display: flex;
  gap: 0.55rem;
  margin-top: 1.35rem;
}
.footer__social a {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(253, 248, 240, 0.09);
  border: 1px solid rgba(253, 248, 240, 0.18);
  color: rgba(253, 248, 240, 0.85);
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}
/* .footer a:hover underlines by default, which looks broken on an icon. */
.footer__social a:hover {
  background: rgba(253, 248, 240, 0.2);
  border-color: rgba(253, 248, 240, 0.4);
  color: var(--white);
  text-decoration: none;
}

.footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid rgba(253, 248, 240, 0.14);
  margin-top: 2.5rem;
  padding-block: 1.4rem;
  font-size: 0.8438rem;
}
.footer__legal p {
  margin: 0;
}

/* ------------------------------ 26. FORMS ------------------------------- */
.form {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1.15rem;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.field label,
.fieldset legend {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
}
.req {
  color: var(--terra-deep);
}
.opt {
  font-weight: 400;
  color: var(--ink-soft);
}

.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-btn);
  padding: 0.75rem 0.9rem;
  min-height: 2.875rem;
  width: 100%;
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.field textarea {
  min-height: auto;
  resize: vertical;
  line-height: 1.55;
}
.field input::placeholder,
.field textarea::placeholder {
  color: #8a8578;
}
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--ink-soft);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--terra-deep);
  box-shadow: 0 0 0 3px rgba(156, 66, 33, 0.14);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: #a3252a;
  background: #fdf4f4;
}
.field__err {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #a3252a;
  margin: 0;
}

.field--search {
  position: relative;
}
.field--search .field__ico {
  position: absolute;
  left: 0.85rem;
  top: 0.85rem;
  color: var(--ink-soft);
  pointer-events: none;
}
.field--search input {
  padding-left: 2.7rem;
}

.fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0.5rem;
}
.check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9375rem;
  cursor: pointer;
  padding: 0.6rem 0.75rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--white);
}
.check:hover {
  border-color: var(--line-strong);
}
.check input {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  margin-top: 0.12rem;
  accent-color: var(--terra);
}
.check:has(input:checked) {
  border-color: var(--terra);
  background: var(--terra-100);
}
/* Sits directly on the section background instead of in a bordered field. */
.news__form .check {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.news__form .check:has(input:checked) {
  background: none;
}

.form__foot {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: flex-start;
  margin-top: 0.35rem;
}
.form__fine {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin: 0;
}

.formstatus {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}
.formstatus.is-ok {
  color: var(--sage-deep);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.9rem 1.05rem;
  background: var(--sage-100);
  border-radius: var(--r-btn);
}
.formstatus.is-bad {
  color: #a3252a;
}

/* ------------------------------ 27. MODALS ------------------------------ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: end center;
}
.modal[hidden] {
  display: none;
}
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 14, 8, 0.55);
  backdrop-filter: blur(3px);
  animation: fade 0.2s ease;
  border: 0;
}
.modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(100%, 46rem);
  max-height: min(92svh, 60rem);
  background: var(--cream);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--sh-lg);
  animation: rise 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.modal__panel--wide {
  width: min(100%, 68rem);
}

@media (min-width: 720px) {
  .modal {
    place-items: center;
    padding: 1.5rem;
  }
  .modal__panel {
    border-radius: var(--r-lg);
    max-height: min(90svh, 60rem);
  }
}

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.6rem clamp(1.25rem, 3vw, 2rem) 1.2rem;
  border-bottom: 1px solid var(--line);
  background: var(--cream);
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.modal__head h2 {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  margin: 0;
}
.modal__head .eyebrow {
  margin-bottom: 0.6rem;
}
.modal__x {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
  box-shadow: var(--sh-sm);
  transition:
    background 0.16s,
    border-color 0.16s,
    color 0.16s;
}
.modal__x:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

.modal__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.6rem clamp(1.25rem, 3vw, 2rem) 2rem;
  -webkit-overflow-scrolling: touch;
}
.modal__lede {
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}
.modal__note {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.modal__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.modal__foot p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------- 28. TABS ------------------------------ */
.tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0.3rem;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-bottom: 1.5rem;
}
.tab {
  flex: 1;
  min-height: 2.625rem;
  padding: 0.5rem 1rem;
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink-soft);
  transition:
    background 0.16s,
    color 0.16s,
    box-shadow 0.16s;
}
.tab:hover {
  color: var(--ink);
}
.tab.is-active {
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--sh-sm);
}

/* ----------------------------- 29. CALENDAR ----------------------------- */
.calbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.calnav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.calnav__btn {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
  box-shadow: var(--sh-sm);
}
.calnav__btn:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--cream);
}
.calnav__label {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 600;
  margin: 0;
  min-width: 11ch;
  text-align: center;
}
.calviews {
  display: flex;
  gap: 0.4rem;
}

.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.35rem;
}
.cal__dow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-soft);
  padding-bottom: 0.35rem;
}
.calday {
  position: relative;
  min-height: 5.5rem;
  padding: 0.4rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: left;
  font: inherit;
  color: inherit;
}
.calday:not(.is-muted) {
  cursor: pointer;
  transition:
    background var(--t-ui),
    border-color var(--t-ui),
    box-shadow var(--t-ui),
    transform var(--t-ui);
}
.calday:not(.is-muted):hover {
  background: var(--terra-100);
  border-color: var(--terra);
  transform: translateY(-1px);
}
.calday.is-muted {
  background: transparent;
  border-color: transparent;
}
.calday.is-muted .calday__n {
  color: #c3b8a6;
}
.calday:not(.has-events):not(.is-muted) {
  background: transparent;
  border-color: var(--line);
}
.calday.has-events {
  border-color: var(--line-strong);
  box-shadow: var(--sh-sm);
}
.calday.is-selected {
  background: var(--terra-100);
  border-color: var(--terra);
  box-shadow: 0 0 0 2px rgba(192, 86, 33, 0.25);
}
.calday.is-today .calday__n {
  background: var(--ink);
  color: var(--cream);
}
.calday__n {
  align-self: flex-start;
  min-width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 7px;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.calday__pip {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}
.calday__pip i {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}
.calday__more {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin-top: auto;
}
.cal__hint {
  margin: 1rem 0 0;
  font-size: 0.8438rem;
  color: var(--ink-soft);
  text-align: center;
}

.callist {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.callist__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem 1.15rem;
  box-shadow: var(--sh-sm);
  transition:
    border-color 0.18s,
    box-shadow 0.18s,
    transform 0.18s;
}
.callist__item:hover {
  border-color: var(--terra);
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}
.callist__date {
  flex: none;
  text-align: center;
  min-width: 3.25rem;
  line-height: 1.1;
}
.callist__date b {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
}
.callist__date span {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terra-deep);
}
.callist__main {
  flex: 1;
  min-width: 0;
}
.callist__title {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0.2rem 0 0.2rem;
}
.callist__meta {
  font-size: 0.8438rem;
  color: var(--ink-soft);
  margin: 0;
}
.callist__empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--ink-soft);
  background: var(--white);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
}

.caldetail {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.caldetail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}
.caldetail__head h3 {
  font-size: 1.25rem;
  margin: 0;
}
.caldetail__empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  background: var(--cream-2);
  border-radius: var(--r-btn);
}
.caldetail__empty p {
  margin: 0;
  color: var(--ink-soft);
}

/* --------------------------- 30. EVENT DETAIL --------------------------- */
.evt__media {
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 1.35rem;
  aspect-ratio: 16 / 9;
  background: var(--cream-2);
}
.evt__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.evt__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.85rem;
  margin-bottom: 1.35rem;
}
.evt__fact {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: 0.85rem 0.95rem;
}
.evt__fact .ico {
  color: var(--terra-deep);
  margin-top: 0.1rem;
}
.evt__fact dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.15rem;
}
.evt__fact dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}
.evt__desc {
  color: var(--ink-soft);
  margin-bottom: 1.35rem;
}
.evt__notes {
  display: flex;
  gap: 0.7rem;
  background: var(--sage-100);
  border-radius: var(--r-btn);
  padding: 0.9rem 1.05rem;
  font-size: 0.9375rem;
  margin-bottom: 1.5rem;
}
.evt__notes .ico {
  color: var(--sage-deep);
  flex: none;
}
.evt__rsvp {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.45rem;
  box-shadow: var(--sh-sm);
}
.evt__rsvp h3 {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}
.evt__spots {
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin-bottom: 1.15rem;
}
.evt__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.35rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}

/* ---------------------------- 31. ACCORDION ----------------------------- */
.acc {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.acc__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.acc__item.is-open {
  border-color: var(--sage);
  box-shadow: var(--sh-sm);
}
.acc__q {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 1rem 1.15rem;
}
.acc__q:hover {
  background: var(--cream);
}
.acc__ic {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--sage-100);
  color: var(--sage-deep);
}
.acc__label {
  flex: 1;
  min-width: 0;
}
.acc__label b {
  display: block;
  font-size: 1rem;
  font-weight: 700;
}
.acc__label span {
  font-size: 0.8438rem;
  color: var(--ink-soft);
}
.acc__chev {
  flex: none;
  color: var(--ink-soft);
  transition: transform 0.22s;
}
.acc__item.is-open .acc__chev {
  transform: rotate(180deg);
}
.acc__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.26s ease;
}
.acc__item.is-open .acc__a {
  grid-template-rows: 1fr;
}
.acc__a > div {
  overflow: hidden;
}
.acc__files {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 1.15rem 1.15rem;
}
/* A referral to an outside provider, not one of our own files. The row is a
   div rather than an anchor because it carries two separate destinations —
   the provider's site and a tel: link — and an anchor cannot nest one. */
.resorg {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: 0.8rem 0.95rem;
}
.resorg:hover {
  border-color: var(--sage);
}
.resorg__ic {
  flex: none;
  color: var(--sage-deep);
  margin-top: 0.1rem;
}
.resorg__ic svg {
  width: 1.25rem;
  height: 1.25rem;
}
.resorg__main {
  flex: 1;
  min-width: 0;
}
.resorg__name {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.resorg__name:hover {
  color: var(--sage-deep);
  text-decoration: underline;
}
.resorg__who {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}
.resorg__note {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 0.15rem;
}
.resorg__tel {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--terra-deep);
  text-decoration: none;
  white-space: nowrap;
}
.resorg__tel:hover {
  text-decoration: underline;
}
.resorg__tel em {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  font-style: normal;
  color: var(--ink-soft);
}
@media (max-width: 560px) {
  .resorg {
    flex-wrap: wrap;
  }
  .resorg__tel {
    width: 100%;
    padding-left: 2.1rem;
  }
}

/* ----------------------------- 32. REVEALS ------------------------------ */
/* main.js strips .reveal once the entrance finishes so a component's own
   hover transitions are not permanently overridden by the reveal timing. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--t-slow) ease,
    transform var(--t-slow) ease;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
/* Failsafe: anything left marked but never animated must still be visible. */
[data-revealed] {
  opacity: 1;
}

/* ---------------------------- 33. RESPONSIVE ---------------------------- */
@media (max-width: 1080px) {
  .quick {
    grid-template-columns: repeat(2, 1fr);
  }
  .events {
    grid-template-columns: repeat(2, 1fr);
  }
  .orgs {
    grid-template-columns: repeat(2, 1fr);
  }
  .restiles {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
  /* The 7 chips no longer fit in one row below this width — centering an
     overflowing scroll container hides the "All" chip at the default
     scroll position, so fall back to left-aligned + scroll here. */
  #orgFilters {
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--white);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-btn);
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    font-size: 0.9063rem;
    font-weight: 700;
    box-shadow: var(--sh-sm);
  }
  .nav-toggle__bars {
    display: grid;
    gap: 4px;
  }
  .nav-toggle__bars span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition:
      transform 0.2s,
      opacity 0.2s;
  }
  .nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-md);
    padding: 1.25rem var(--gut) 1.75rem;
    max-height: calc(100svh - 7rem);
    overflow-y: auto;
    display: none;
  }
  .nav.is-open {
    display: flex;
  }
  .nav__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__menu a {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 1.0625rem;
  }
  .nav__menu a:hover {
    border-bottom-color: var(--line);
  }
  .nav__tools {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .nav__tools .btn {
    width: 100%;
  }

  /* The sticky intro column stops being useful once it is full-width. */
  .split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .split__intro {
    position: static;
  }
  .split__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .about,
  .calcta,
  .involve__layout,
  .reasons,
  .news {
    grid-template-columns: 1fr;
  }
  .about {
    margin-bottom: 2.5rem;
  }
  .media-figure {
    aspect-ratio: 16 / 10;
  }
  .about__media {
    order: -1;
  }
  .calcta__preview {
    max-width: 26rem;
  }
  .orgs--modal {
    grid-template-columns: 1fr;
  }
  .submit {
    grid-template-columns: 1fr;
  }
  .topbar__tagline {
    display: none;
  }
  .topbar__inner {
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .nav-toggle {
    padding: 0.5rem 0.65rem;
  }
  .nav-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (max-width: 640px) {
  .quick,
  .involve,
  .events,
  .orgs,
  .restiles {
    grid-template-columns: 1fr;
  }

  /* Once these tiles go full width, the desktop stack (icon above the label)
     leaves most of the card empty. Re-lay them as icon on the left with the
     label and count beside it, and size the content up to match the new
     width. Grid rather than flex so the icon can span both text rows without
     adding a wrapper element to the markup. */
  .restile {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.1rem;
    padding: 1rem 1.15rem;
  }
  .restile__icon {
    grid-area: 1 / 1 / 3 / 2;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 14px;
  }
  .restile__icon .ico {
    width: 1.75rem;
    height: 1.75rem;
  }
  .restile__name {
    grid-area: 1 / 2 / 2 / 3;
    align-self: end;
    font-size: 1.0625rem;
  }
  .restile__count {
    grid-area: 2 / 2 / 3 / 3;
    align-self: start;
    font-size: 0.875rem;
  }
  /* Single column on a phone, so centre the whole footer rather than leaving
     four left-aligned stacks against a full-width dark band. */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  .footer__brand p {
    max-width: none;
  }
  .footer__contact li {
    justify-content: center;
  }
  .footer__col ul {
    align-items: center;
  }
  .footer__col button {
    text-align: center;
  }
  /* 44px, not the 36px used on desktop: these are the only icon-only targets
     in the footer and they are thumb-operated here. */
  .footer__social {
    justify-content: center;
  }
  .footer__social a {
    width: 2.75rem;
    height: 2.75rem;
  }
  /* column-reverse, so the policy links sit above the copyright without
     reordering the markup (which keeps the DOM order sensible for readers). */
  .footer__legal {
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
    gap: 0.8rem;
  }
  .news__form {
    max-width: none;
  }
  .news__form .btn {
    width: 100%;
  }
  .hero {
    min-height: auto;
    padding-block: 3rem 3.5rem;
  }
  .hero__title {
    max-width: none;
  }
  .media-figure {
    border-radius: 20px 20px 20px 60px;
  }
  .calnav {
    width: 100%;
    justify-content: space-between;
  }
  .calnav__label {
    font-size: 1.125rem;
    min-width: 0;
  }
  .calbar {
    gap: 0.75rem;
  }
  .cal {
    gap: 0.2rem;
  }
  .calday {
    min-height: 3.5rem;
    padding: 0.25rem;
  }
  .calday__pip {
    display: none;
  }
  .calday.has-events::after {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--terra);
    margin-inline: auto;
  }
  .caldetail__empty {
    align-items: flex-start;
    flex-direction: column;
  }
  .marquee {
    min-height: 5.6rem;
  }
  .marquee__chip {
    width: 10.5rem;
    height: 5rem;
    padding: 0.55rem 0.9rem;
    margin-right: 0.7rem;
  }
  .marquee__chip img {
    max-width: 8.7rem;
    max-height: 3.75rem;
  }
  .marquee__chip--text {
    font-size: 0.9063rem;
  }
  .topbar__links {
    gap: 0.85rem;
    font-size: 0.8125rem;
  }
  .section-head {
    margin-bottom: 2rem;
  }
}

/* ------------------------- 34. REDUCED MOTION --------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .hero__title em::after {
    transform: scaleX(1);
  }
  .marquee__track {
    animation: none;
  }
  .hero__scroll-line {
    animation: none;
  }
  .btn:hover,
  .quick__card:hover,
  .eventcard:hover,
  .involve__card:hover,
  .submit__card:hover,
  .restile:hover,
  .orgcard:hover,
  .chip:hover,
  .callist__item:hover {
    transform: none;
  }
  .eventcard:hover .eventcard__media img {
    transform: none;
  }
}

/* ------------------------------ 35. PRINT ------------------------------- */
@media print {
  .topbar,
  .site-header,
  .hero__video,
  .hero__scroll,
  .hero__badge,
  .modal,
  .news__form,
  .nav-toggle,
  .marquee,
  .watermark {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  .section {
    padding-block: 1.5rem;
  }
  .split {
    grid-template-columns: 1fr;
  }
  .split__intro {
    position: static;
  }
  a::after {
    content: ' (' attr(href) ')';
    font-size: 0.75em;
  }
}

/* EC-BTN-104 + EC-NAV-121: Re-assert hero / CTA text-white on buttons & links.
   Uses class~= (word match) not class*= (substring) to avoid matching hover:text-white etc. */
button[class~='text-white/90'],
a[class~='text-white/90'] {
  color: rgba(255, 255, 255, 0.9);
}
button[class~='text-white/80'],
a[class~='text-white/80'] {
  color: rgba(255, 255, 255, 0.8);
}
button[class~='text-white/70'],
a[class~='text-white/70'] {
  color: rgba(255, 255, 255, 0.7);
}
button[class~='text-white/60'],
a[class~='text-white/60'] {
  color: rgba(255, 255, 255, 0.6);
}
button[class~='text-white/50'],
a[class~='text-white/50'] {
  color: rgba(255, 255, 255, 0.5);
}
button[class~='text-white/40'],
a[class~='text-white/40'] {
  color: rgba(255, 255, 255, 0.4);
}
button[class~='text-white'],
a[class~='text-white'] {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* EC-ANIM-008b / EC-ANIM-009: carousel-only override — scroll-reveal elements animate via IO in functions.php */
.scroll-fade-up:has([aria-roledescription='carousel']),
.scroll-fade-up:has([data-wpconvert-blog-filter-bar]),
.scroll-fade-left:has([aria-roledescription='carousel']),
.scroll-fade-right:has([aria-roledescription='carousel']),
.scroll-scale-in:has([aria-roledescription='carousel']) {
  opacity: 1 !important;
  transform: none !important;
}