/* ============================================================
   TAYLOR-GRADY HOUSE — main.css
   All site styles. No inline styles. No external CSS libraries.
   Source of truth: CLAUDE.md Brand Constants + Style Guide v1.0
   ============================================================ */


/* ============================================================
   DESIGN TOKENS
   Copy verbatim from CLAUDE.md — do not hand-edit values here.
   Update CLAUDE.md first, then propagate here.
============================================================ */
:root {
  /* === FOUNDATION === */
  --warm-black: #1A1A18;
  --charcoal: #2C2C2C;
  --ivory: #FAF8F5;
  --warm-white: #F5F2ED;
  --parchment: #EDE8E0;

  /* === ACCENT === */
  --sage: #7A8B6F;
  --sage-light: #A8B89E;
  --sage-dark: #5C6B52;
  --clay: #B8937A;
  --clay-light: #D4BAA7;
  --clay-dark: #96735C;
  --iron: #6B6B6B;

  /* === HERITAGE GOLD === */
  --heritage-gold: #C5A55A;
  --heritage-gold-light: #DCC88A;
  --heritage-gold-dark: #A68A3E;

  /* === FUNCTIONAL === */
  --text-primary: #2C2C2C;
  --text-secondary: #6B6B6B;
  --text-light: #9A9A9A;
  --border: #E0DCD6;
  --border-light: #EDEAE5;

  /* === TYPOGRAPHY === */
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Lato', sans-serif;

  /* === TYPE SCALE (Perfect Fourth — 1.333) === */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.333rem;
  --text-2xl:  1.777rem;
  --text-3xl:  2.369rem;
  --text-4xl:  3.157rem;
  --text-5xl:  4.209rem;
  --text-6xl:  5.61rem;

  /* === SPACING === */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* === LAYOUT === */
  --max-width-prose: 640px;
  --max-width-page:  1200px;
  --border-radius:   4px;
  --transition:      all 0.3s ease;

  /* === INTRO TIMING (mirrors main.js — informational only) === */
  --intro-fade: 1s;
  --hero-fade:  1.2s;
}


/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* Offset for fixed nav so anchor targets don't hide behind header */
  scroll-padding-top: 100px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--text-primary);
  /* Dark background prevents flash of white before intro loads */
  background: var(--warm-black);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Scroll locked during intro sequence — restored by JS */
body.intro-active {
  overflow: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { background: none; border: none; cursor: pointer; font: inherit; }


/* ============================================================
   INTRO OVERLAY
   Full-viewport dark screen for welcome sequence.
   Both #intro-phrase and #intro-vision are independently
   opacity-controlled. The overlay itself fades out on .done.
============================================================ */
#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--warm-black);
  transition: opacity var(--hero-fade) ease;
}

#intro-overlay.done {
  opacity: 0;
  pointer-events: none;
}

/* --- Phrase (Step 1) --- */
.intro-phrase {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 900px;
  text-align: center;
  padding: 0 var(--space-xl);

  font-family: var(--font-display);
  font-weight: 300;
  font-style: normal;
  /* Intimate — you focus to read it. "Subtle is how you enter the consciousness." */
  font-size: clamp(1.3rem, 2.5vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--ivory);

  opacity: 0;
  transition: opacity var(--intro-fade) ease;
}

.intro-phrase.visible {
  opacity: 1;
}

/* "Welcome Home." — 2 words; slightly more presence, still intimate */
.intro-phrase.phrase--xl {
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* Long phrases (> 44 chars) — same intimate scale, line-height allows graceful wrap */
.intro-phrase.phrase--long {
  font-size: clamp(1.3rem, 2.5vw, 2.2rem);
  line-height: 1.4;
  letter-spacing: 0;
}

/* --- Vision statement (Step 2) --- */
.intro-vision {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
  max-width: 1100px;
  text-align: center;
  padding: 0 var(--space-xl);

  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  /* Commanding — fills the visual field, enters the psyche. Not subtle. */
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--parchment);

  opacity: 0;
  transition: opacity var(--intro-fade) ease;
}

.intro-vision.visible {
  opacity: 1;
}

.intro-vision p {
  display: block;
}

/* Final line — slight warmth to close the statement */
.intro-vision__close {
  margin-top: 0.5em;
  color: var(--heritage-gold-light);
}


/* ============================================================
   SITE CONTAINER
   Invisible at load. Revealed when intro completes.
============================================================ */
#site {
  opacity: 0;
  transition: opacity var(--hero-fade) ease;
  min-height: 100vh;
  background: var(--parchment); /* Was warm-black when phase-2 handled the transition; parchment is the settled state */
}

#site.revealed {
  opacity: 1;
}


/* ============================================================
   NAVIGATION
   Fixed header. Hidden during intro (opacity inherited from #site).
   Gains .scrolled class via JS on scroll > 40px.
============================================================ */
#site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-lg) var(--space-xl);
  transition: background 0.4s ease, border-color 0.4s ease;
}

/* Frosted glass header on scroll */
#site-nav.scrolled {
  background: rgba(26, 26, 24, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(197, 165, 90, 0.18);
}

.nav-inner {
  max-width: var(--max-width-page);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
}

/* Logo */
.nav-logo {
  flex-shrink: 0;
}

.nav-logo-text {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-2xl);
  color: var(--ivory);
  letter-spacing: 0.04em;
  line-height: 1;
  transition: color 0.8s ease, opacity 0.6s ease;
}

/* Short name (default) / Full name with address (phase-2) */
.nav-logo-text--full {
  display: none;
}

.nav-logo-address {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-left: 0.75em;
}

/* When SVG logo is available:
.nav-logo img { height: 38px; width: auto; display: block; } */

/* Nav links — all styled as outlined buttons, solid on hover */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  list-style: none;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--parchment);
  border: 1px solid rgba(250, 248, 245, 0.4);
  padding: 8px 20px;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  white-space: nowrap;
}

.nav-link:hover,
.nav-link:focus-visible {
  background: var(--ivory);
  color: var(--warm-black);
  border-color: var(--ivory);
}

/* Active page indicator */
.nav-link--active {
  border-bottom: 2px solid var(--heritage-gold);
}

/* Dropdown caret */
.nav-caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 6px;
  vertical-align: middle;
  transition: transform 0.25s ease;
}

.nav-item--has-dropdown:hover .nav-caret,
.nav-item--has-dropdown.dropdown-open .nav-caret {
  transform: rotate(180deg);
}

/* Support link — Heritage Gold reserved for Support/Donate CTAs */
.nav-link.nav-support {
  color: var(--heritage-gold);
  border-color: var(--heritage-gold);
}

.nav-link.nav-support:hover,
.nav-link.nav-support:focus-visible {
  background: var(--heritage-gold);
  color: var(--warm-black);
  border-color: var(--heritage-gold);
}


/* ============================================================
   DESKTOP DROPDOWNS
   Subtle fade-in. No slide or bounce. Pillar accent borders
   on Programs sub-links per nav spec.
============================================================ */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: rgba(26, 26, 24, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(250, 248, 245, 0.12);
  list-style: none;
  padding: var(--space-sm) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
  z-index: 200;
}

.nav-item--has-dropdown:hover .nav-dropdown,
.nav-item--has-dropdown.dropdown-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown a {
  display: block;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--parchment);
  padding: 10px 20px;
  transition: background 0.2s ease, color 0.2s ease;
  border-left: 3px solid transparent;
}

.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  background: rgba(250, 248, 245, 0.08);
  color: var(--ivory);
}

/* Pillar accent borders on Programs dropdown sub-links */
.nav-dropdown__pillar--arts    { border-left-color: var(--clay); }
.nav-dropdown__pillar--culture { border-left-color: var(--heritage-gold); }
.nav-dropdown__pillar--foodways { border-left-color: var(--sage); }
.nav-dropdown__pillar--commune { border-left-color: var(--charcoal); }

/* Pillar hover: accent border brightens */
.nav-dropdown__pillar--arts:hover    { border-left-color: var(--clay-light); }
.nav-dropdown__pillar--culture:hover { border-left-color: var(--heritage-gold-light); }
.nav-dropdown__pillar--foodways:hover { border-left-color: var(--sage-light); }
.nav-dropdown__pillar--commune:hover { border-left-color: var(--iron); }


/* ============================================================
   MOBILE NAV TOGGLE — HAMBURGER / X
============================================================ */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: var(--space-sm);
  width: 44px;
  height: 44px;
  z-index: 150;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--ivory);
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

/* Hamburger → X animation */
.nav-toggle.active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}


/* ============================================================
   MOBILE MENU — FULL-SCREEN OVERLAY
   Warm-black background, ivory text. Category items expand
   accordion-style. Support retains Heritage Gold accent.
============================================================ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: var(--warm-black);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  overflow-y: auto;
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xl);
}

.mobile-menu__logo {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-2xl);
  color: var(--ivory);
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 0.3s ease;
}

.mobile-menu__logo:hover {
  color: var(--parchment);
}

/* Close button: X from two spans */
.mobile-menu__close {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-menu__close span {
  position: absolute;
  display: block;
  width: 22px;
  height: 1px;
  background: var(--ivory);
  transition: background 0.3s ease;
}

.mobile-menu__close span:first-child {
  transform: rotate(45deg);
}

.mobile-menu__close span:last-child {
  transform: rotate(-45deg);
}

.mobile-menu__close:hover span {
  background: var(--heritage-gold);
}

/* Nav list */
.mobile-menu__nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--space-xl);
}

.mobile-menu__list {
  list-style: none;
  text-align: center;
  width: 100%;
  max-width: 400px;
}

.mobile-menu__list > li {
  margin-bottom: var(--space-lg);
}

.mobile-menu__link {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-3xl);
  color: var(--ivory);
  letter-spacing: 0.02em;
  transition: color 0.3s ease;
  display: inline-block;
  padding: var(--space-xs) 0;
}

.mobile-menu__link:hover {
  color: var(--parchment);
}

/* Support — Heritage Gold */
.mobile-menu__support {
  color: var(--heritage-gold);
}

.mobile-menu__support:hover {
  color: var(--heritage-gold-light);
}

/* Category row: link + caret side by side */
.mobile-menu__category-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

/* Category toggle button (caret only) */
.mobile-menu__toggle {
  color: var(--ivory);
  padding: var(--space-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
}

.mobile-menu__toggle:hover {
  color: var(--parchment);
}

.mobile-menu__caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.3s ease;
}

.mobile-menu__category.category-open .mobile-menu__caret {
  transform: rotate(180deg);
}

/* Accordion sub-links */
.mobile-menu__sub {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease;
  opacity: 0;
}

.mobile-menu__category.category-open .mobile-menu__sub {
  max-height: 400px;
  opacity: 1;
}

/* Social links in mobile menu */
.mobile-menu__social {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  padding: var(--space-xl) 0 var(--space-2xl);
}

.mobile-menu__social a {
  color: var(--iron);
  transition: color 0.3s ease;
}

.mobile-menu__social a:hover {
  color: var(--ivory);
}

.mobile-menu__sub a {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-lg);
  color: var(--clay-light);
  letter-spacing: 0.05em;
  display: block;
  padding: var(--space-sm) 0;
  transition: color 0.3s ease;
}

.mobile-menu__sub a:hover {
  color: var(--ivory);
}


/* ============================================================
   HERO
   Full-viewport dark typographic hero.
   No architectural photography. Community image placeholder
   commented below — drop in <img> or <picture> when ready.
   Architecture supports; people and practice lead.
============================================================ */
.hero {
  position: relative;
  min-height: 85vh; /* Was 100vh; reduced so pillar cards peek above fold */
  padding-top: 80px; /* Fixed nav clearance */
  display: flex;
  align-items: center;
  background: var(--warm-black); /* Own background now that #site is parchment (phase-2 paused) */
  overflow: hidden;
}

/* Atmospheric radial glow — heritage gold, very subtle */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 38% 52%,
    rgba(197, 165, 90, 0.07) 0%,
    transparent 62%
  );
  pointer-events: none;
  transition: opacity 1.6s ease;
}

/* Community photograph slot */
.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.28;
  transition: opacity 1.6s ease;
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-width-page);
  margin: 0 auto;
  padding: var(--space-5xl) var(--space-xl);
  transition: padding 1.4s ease;
}

/* Thin rule above overline — neutral, not Heritage Gold */
.hero-rule {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--parchment);
  margin-bottom: var(--space-lg);
}

.hero-overline {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--heritage-gold);
  margin-bottom: var(--space-xl);
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(4rem, 11vw, var(--text-6xl));
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ivory);
  margin-bottom: var(--space-2xl);
}

.hero-body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-lg);
  line-height: 1.75;
  color: var(--clay-light);
  max-width: var(--max-width-prose);
  margin-bottom: var(--space-3xl);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}


/* ============================================================
   BUTTONS
   Rectangular, no border-radius, uppercase Lato Light,
   letter-spacing 0.15em, thin border, padding 14px 32px.
   Per style guide — do not add border-radius or drop shadows.
============================================================ */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 14px 32px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  line-height: 1;
  white-space: nowrap;
}

/* Primary — Warm Black fill. Use on ivory/light backgrounds. */
.btn-primary {
  background: var(--warm-black);
  color: var(--ivory);
  border-color: var(--warm-black);
}

.btn-primary:hover {
  background: var(--charcoal);
  border-color: var(--charcoal);
}

/* Secondary — outline. Use on ivory/light backgrounds. */
.btn-secondary {
  background: transparent;
  color: var(--warm-black);
  border-color: var(--charcoal);
}

.btn-secondary:hover {
  background: var(--warm-black);
  color: var(--ivory);
}

/* Ghost — outline for dark backgrounds (hero, dark sections).
   Not in the original spec; added for dark-surface CTAs only. */
.btn-ghost {
  background: transparent;
  color: var(--ivory);
  border-color: rgba(250, 248, 245, 0.5);
}

.btn-ghost:hover {
  border-color: var(--ivory);
  color: var(--ivory);
}

/* Heritage — Support/Donate CTAs only. Works on both light and dark. */
.btn-heritage {
  background: transparent;
  color: var(--heritage-gold);
  border-color: var(--heritage-gold);
}

.btn-heritage:hover {
  background: var(--heritage-gold);
  color: var(--warm-black);
}


/* ============================================================
   SCREEN READER ONLY
============================================================ */
.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;
}


/* ============================================================
   PHASE 2 — HERO COMPRESSION + BACKGROUND TRANSITION
   Triggered by scroll, touch, or 5s idle after hero reveal.
   Everything transitions smoothly via CSS; JS only adds the class.
============================================================ */

/* Transition the site background — warm black lingers, parchment arrives with energy */
#site {
  transition: opacity var(--hero-fade) ease, background 1.6s ease;
}

.phase-2#site {
  background: var(--parchment);
}

/* Hero compresses upward */
.hero {
  transition: min-height 1.6s ease, padding 1.6s ease;
}

.phase-2 .hero {
  min-height: 0;
  padding-top: 80px;
}

.phase-2 .hero::before {
  opacity: 0;
}

.phase-2 .hero-media {
  opacity: 0;
}

.phase-2 .hero-inner {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-lg);
  text-align: center;
}

/* Title goes horizontal — hide <br> tags, shrink size */
.hero-title {
  transition: font-size 1.6s ease, color 1.6s ease;
}

.phase-2 .hero-title {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  color: var(--warm-black);
}

.phase-2 .hero-title br {
  display: none;
}

/* Overline fades out in phase-2; rule follows */
.hero-overline {
  transition: opacity 1.6s ease, height 1.6s ease, margin 1.6s ease;
}

.phase-2 .hero-overline {
  opacity: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
}

.hero-rule {
  transition: opacity 1.6s ease, height 1.6s ease, margin 1.6s ease;
}

.phase-2 .hero-rule {
  opacity: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
}

.hero-body {
  transition: color 1.6s ease, margin 1.6s ease, font-size 1.6s ease;
}

/* Phase-2: body text elevates to H2 treatment — Cormorant Garamond 400 per style guide */
.phase-2 .hero-body {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-xl);
}

/* Nav adapts to parchment background in phase-2 */
.phase-2 #site-nav {
  transition: background 1.6s ease;
}

.phase-2 #site-nav.scrolled {
  background: rgba(237, 232, 224, 0.95);
  border-bottom-color: rgba(197, 165, 90, 0.25);
}

.phase-2 .nav-logo-text {
  color: var(--warm-black);
}

.phase-2 .nav-logo-text--short {
  display: none;
}

.phase-2 .nav-logo-text--full {
  display: inline;
}

.phase-2 .nav-link {
  color: var(--warm-black);
  border-color: rgba(44, 44, 44, 0.35);
}

.phase-2 .nav-link:hover,
.phase-2 .nav-link:focus-visible {
  background: var(--warm-black);
  color: var(--ivory);
  border-color: var(--warm-black);
}

.phase-2 .nav-link.nav-support {
  color: var(--heritage-gold-dark);
  border-color: var(--heritage-gold-dark);
}

.phase-2 .nav-link.nav-support:hover,
.phase-2 .nav-link.nav-support:focus-visible {
  background: var(--heritage-gold);
  color: var(--warm-black);
  border-color: var(--heritage-gold);
}

/* Phase-2 dropdown: parchment context */
.phase-2 .nav-dropdown {
  background: rgba(237, 232, 224, 0.98);
  border-color: rgba(44, 44, 44, 0.12);
}

.phase-2 .nav-dropdown a {
  color: var(--charcoal);
}

.phase-2 .nav-dropdown a:hover,
.phase-2 .nav-dropdown a:focus-visible {
  background: rgba(44, 44, 44, 0.06);
  color: var(--warm-black);
}

/* Phase-2 hamburger toggle color */
.phase-2 .nav-toggle span {
  background: var(--warm-black);
}


/* ============================================================
   PILLAR CARDS
   Four-column grid below the hero. Hidden until phase-2.
   Cards rise from below with staggered delays.
============================================================ */
.pillars {
  background: transparent; /* Inherits from #site — single background transition, no seams */
  padding: 0 var(--space-xl) var(--space-5xl);
}

.pillars-grid {
  max-width: var(--max-width-page);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
}

/* Individual card — visible by default (phase-2 transition paused) */
.pillar-card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.2s ease, transform 1.2s ease;
  background: var(--warm-white);
  overflow: hidden;
}

/* Staggered reveal on phase-2 */
.phase-2 .pillar-card {
  opacity: 1;
  transform: translateY(0);
}

/* Cards rise with everything else — no delay, simultaneous */
.phase-2 .pillar-card { transition-delay: 0s; }

/* Pillar card face image */
.pillar-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Card body */
.pillar-card__body {
  padding: var(--space-xl) var(--space-lg) var(--space-2xl);
}

.pillar-card__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  color: var(--warm-black);
  margin-bottom: var(--space-sm);
  letter-spacing: 0.02em;
}

/* Pillar-specific name accent colors */
.pillar-card--arts .pillar-card__name { color: var(--clay-dark); }
.pillar-card--culture .pillar-card__name { color: var(--heritage-gold-dark); }
.pillar-card--foodways .pillar-card__name { color: var(--sage-dark); }
.pillar-card--commune .pillar-card__name { color: var(--charcoal); }


.pillar-card__essence {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--text-secondary);
}


/* ============================================================
   PILLAR CARD — THREE ZONES
   Default: __face visible, __strip and __expanded hidden.
   Expanded: __expanded visible. Collapsed: __strip visible.
============================================================ */

/* Default: strip and expanded are hidden */
.pillar-card__strip { display: none; }
.pillar-card__expanded { display: none; }

/* Face is visible by default — block display */
.pillar-card__face {
  position: relative;
}


/* ============================================================
   PILLAR EXPAND / COLLAPSE — STATE CLASSES
   .has-expanded on .pillars-grid — switches to flex
   .expanded on active card — fills remaining space
   .collapsed on other cards — thin strip tabs
============================================================ */

/* Switch grid to flex when a pillar is expanded */
.pillars-grid.has-expanded {
  display: flex;
  gap: var(--space-sm);
}

/* Collapsed cards: thin strip tabs on the left */
.pillar-card.collapsed {
  order: -1;
  width: 56px;
  min-width: 56px;
  flex-shrink: 0;
  cursor: pointer;
  transition: width 0.5s ease, opacity 0.5s ease;
}

.pillar-card.collapsed .pillar-card__face { display: none; }
.pillar-card.collapsed .pillar-card__expanded { display: none; }

.pillar-card.collapsed .pillar-card__strip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 400px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  background: var(--warm-white);
  border-left: 4px solid var(--border);
  padding: var(--space-xl) var(--space-xs);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.pillar-card.collapsed:hover .pillar-card__strip {
  background: var(--parchment);
}

.pillar-card__strip-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  color: var(--warm-black);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Pillar accent color borders on strips */
.pillar-card--arts.collapsed .pillar-card__strip { border-left-color: var(--clay); }
.pillar-card--culture.collapsed .pillar-card__strip { border-left-color: var(--heritage-gold); }
.pillar-card--foodways.collapsed .pillar-card__strip { border-left-color: var(--sage); }
.pillar-card--commune.collapsed .pillar-card__strip { border-left-color: var(--charcoal); }


/* Expanded card: fills remaining space */
.pillar-card.expanded {
  order: 1;
  flex: 1;
  min-width: 0;
  transition: flex 0.5s ease;
}

/* Gentle close — JS adds .pillar-closing for 0.6s before removing state classes */
.pillars-grid.pillar-closing .pillar-card {
  transition: all 0.6s ease-out;
}

.pillar-card.expanded .pillar-card__face { display: none; }
.pillar-card.expanded .pillar-card__strip { display: none; }

.pillar-card.expanded .pillar-card__expanded {
  display: block;
  padding: var(--space-2xl);
}

/* Expanded header */
.pillar-card__expanded-header {
  position: relative;
  padding-bottom: var(--space-xl);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.pillar-card__expanded-header h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  color: var(--warm-black);
  margin-bottom: var(--space-sm);
}

/* Pillar accent colors on expanded header h3 */
.pillar-card--arts .pillar-card__expanded-header h3 { color: var(--clay-dark); }
.pillar-card--culture .pillar-card__expanded-header h3 { color: var(--heritage-gold-dark); }
.pillar-card--foodways .pillar-card__expanded-header h3 { color: var(--sage-dark); }
.pillar-card--commune .pillar-card__expanded-header h3 { color: var(--charcoal); }

.pillar-card__expanded-header p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: var(--max-width-prose);
}

/* Close button */
.pillar-card__close {
  position: absolute;
  top: 0;
  right: 0;
  font-size: var(--text-2xl);
  color: var(--text-light);
  line-height: 1;
  padding: var(--space-xs) var(--space-sm);
  transition: color 0.3s ease;
}

.pillar-card__close:hover {
  color: var(--warm-black);
}


/* ============================================================
   ANCHOR EVENT BOOKMARK — FACE CARD RIBBON
   Horizontal band overlaying bottom of face card image.
   Background: pillar accent at ~85% opacity.
   Uses negative margin to pull up over the image area.
============================================================ */
.pillar-card__face {
  position: relative;
}

.pillar-card__bookmark {
  position: relative;
  z-index: 2;
  margin-top: -40px;
  padding: var(--space-sm) var(--space-lg);
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  cursor: pointer;
  background: rgba(44, 44, 44, 0.85);
}

/* Pillar accent colors on bookmark ribbon */
.pillar-card--arts .pillar-card__bookmark { background: rgba(184, 147, 122, 0.85); }
.pillar-card--culture .pillar-card__bookmark { background: rgba(197, 165, 90, 0.85); }
.pillar-card--foodways .pillar-card__bookmark { background: rgba(122, 139, 111, 0.85); }
.pillar-card--commune .pillar-card__bookmark { background: rgba(44, 44, 44, 0.85); }

.pillar-card__bookmark-date {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ivory);
}

.pillar-card__bookmark-name {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  color: var(--ivory);
}


/* Why This Matters — pillar-level statement below expanded header */
.pillar-card__why-pillar {
  margin-top: var(--space-md);
  font-style: italic;
  color: var(--text-secondary);
}


/* ============================================================
   PROGRAM CARDS — ACCORDION WITHIN EXPANDED PILLAR
   Summary always visible. Detail expands on click.
   One program open at a time per pillar.
============================================================ */
.pillar-card__programs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

/* Section subheads — understated dividers within program grid (e.g. Commune layers) */
.pillar-card__section-subhead {
  grid-column: 1 / -1;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-light);
  border-bottom: 1px solid var(--border-light);
  padding-bottom: var(--space-xs);
  margin-top: var(--space-md);
  margin-bottom: 0;
}

.pillar-card__section-subhead:first-child {
  margin-top: 0;
}

.program-card {
  background: var(--ivory);
  padding: var(--space-lg);
  border: 1px solid var(--border-light);
  transition: border-color 0.3s ease;
  cursor: pointer;
}

.program-card:hover {
  border-color: var(--border);
}

/* Program card summary (always visible) */
.program-card__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm);
}

.program-card__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  color: var(--warm-black);
  width: 100%;
  margin-bottom: var(--space-xs);
}

/* Frequency badge — pill with pillar accent color */
.program-card__freq {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 2px;
  color: var(--ivory);
  /* Default — overridden per pillar */
  background: var(--charcoal);
}

/* Pillar accent colors on frequency badges */
.pillar-card--arts .program-card__freq { background: var(--clay); }
.pillar-card--culture .program-card__freq { background: var(--heritage-gold); }
.pillar-card--foodways .program-card__freq { background: var(--sage); }
.pillar-card--commune .program-card__freq { background: var(--charcoal); }

/* Purpose tag — secondary to freq badge, outline style */
.program-card__purpose {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 2px;
  color: var(--text-light);
  border: 1px solid var(--border);
  background: transparent;
}

.program-card__desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  width: 100%;
  margin-top: var(--space-xs);
}

/* Program card detail (hidden by default, accordion)
   Close: 0.5s ease-out (gentle settle). Open: 0.4s ease (responsive). */
.program-card__detail {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out, opacity 0.5s ease-out, margin 0.5s ease-out;
  margin-top: 0;
}

.program-card.program-expanded .program-card__detail {
  max-height: 2000px;
  opacity: 1;
  margin-top: var(--space-lg);
  transition: max-height 0.4s ease, opacity 0.4s ease, margin 0.4s ease;
}

/* Expanded program card spans both columns of the program grid */
.program-card.program-expanded {
  grid-column: 1 / -1;
}

.program-card__full {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
}

.program-card__why {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: var(--space-lg);
}

.program-card__schedule {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: var(--space-xl);
}

/* "I Want to Participate" CTA */
.program-card__cta {
  margin-top: var(--space-md);
}


/* ============================================================
   ANCHOR EVENT CALLOUT — INSIDE EXPANDED PROGRAM CARD
   Left border in pillar accent color. Between __why and __schedule.
============================================================ */
.program-card__anchor {
  border-left: 4px solid var(--border);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
  background: var(--warm-white);
}

/* Pillar accent on anchor event border */
.pillar-card--arts .program-card__anchor { border-left-color: var(--clay); }
.pillar-card--culture .program-card__anchor { border-left-color: var(--heritage-gold); }
.pillar-card--foodways .program-card__anchor { border-left-color: var(--sage); }
.pillar-card--commune .program-card__anchor { border-left-color: var(--charcoal); }

.program-card__anchor-label {
  display: block;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.program-card__anchor-date {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  color: var(--warm-black);
}

.program-card__anchor-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  color: var(--warm-black);
  margin-bottom: var(--space-xs);
}

.program-card__anchor-desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}


/* ============================================================
   SECTION LABEL — OVERLINE STYLE
   Used in outcomes, materials, volunteer detail zones.
============================================================ */
.program-card__section-label {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}


/* ============================================================
   PROGRAM CARD — HERO IMAGE
============================================================ */
.program-card__hero {
  margin-bottom: var(--space-lg);
}

.program-card__hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  max-height: 240px;
}


/* ============================================================
   PROGRAM CARD — OUTCOMES
============================================================ */
.program-card__outcomes {
  margin-bottom: var(--space-lg);
}

.program-card__outcomes p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-primary);
}


/* ============================================================
   PROGRAM CARD — MATERIALS
============================================================ */
.program-card__materials {
  margin-bottom: var(--space-lg);
}

.program-card__materials p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-primary);
}

.program-card__materials-note {
  display: block;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}


/* ============================================================
   PROGRAM CARD — ACTION BAR
   Primary CTA always present. Ticket and volunteer conditional.
============================================================ */
.program-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--border-light);
}

/* Hide ticket button when not ticketed */
.program-card__actions[data-ticketed="false"] .program-card__ticket {
  display: none;
}

/* Hide volunteer link when no volunteer needs */
.program-card__actions[data-volunteer="false"] .program-card__volunteer-link {
  display: none;
}

.program-card__volunteer-link {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--sage-dark);
  text-decoration: none;
  transition: color 0.3s ease;
}

.program-card__volunteer-link:hover {
  text-decoration: underline;
}


/* ============================================================
   PROGRAM CARD — VOLUNTEER DETAIL (ACCORDION)
   Expands below action bar when "Serve With This Program" clicked.
============================================================ */
.program-card__volunteer-detail {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease, margin 0.4s ease;
  margin-top: 0;
}

.program-card__volunteer-detail.volunteer-expanded {
  max-height: 600px;
  opacity: 1;
  margin-top: var(--space-lg);
}

.program-card__volunteer-detail p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
}


/* ============================================================
   FOOTER
============================================================ */
.site-footer {
  background: var(--warm-black);
  color: var(--ivory);
  padding: 64px 0 32px;
  position: relative;
  z-index: 1;
}

.footer__inner {
  max-width: var(--max-width-page);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

/* --- Identity block --- */
.footer__identity {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer__wordmark {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-2xl);
  color: var(--heritage-gold);
  line-height: 1.2;
}

.footer__address {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  color: var(--ivory);
  line-height: 1.5;
}

.footer__designation {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  margin-top: var(--space-xs);
}

/* --- Right column: nav, contact, social --- */
.footer__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Nav mirror */
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
}

.footer__nav a {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  color: var(--ivory);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer__nav a:hover,
.footer__nav a:focus {
  color: var(--heritage-gold);
}

/* Contact */
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer__contact a {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  color: var(--ivory);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer__contact a:hover,
.footer__contact a:focus {
  color: var(--heritage-gold);
}

/* Social icons */
.footer__social {
  display: flex;
  gap: var(--space-md);
}

.footer__social-link {
  color: var(--ivory);
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
}

.footer__social-link:hover,
.footer__social-link:focus {
  color: var(--heritage-gold);
}

.footer__social-link svg {
  display: block;
}

/* --- Divider rule --- */
.footer__rule {
  border: none;
  border-top: 1px solid var(--heritage-gold);
  opacity: 0.4;
  margin: 48px 0 24px;
}

/* --- Legal line --- */
.footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.footer__legal span,
.footer__legal a {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.footer__legal a {
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer__legal a:hover,
.footer__legal a:focus {
  color: var(--heritage-gold);
}

.footer__legal-links {
  display: flex;
  gap: var(--space-lg);
}


/* ============================================================
   INTERIOR PAGES — body.page-interior
   No intro overlay, no phase-2 transition.
   Site visible immediately. Nav starts dark (ivory text)
   against the hero image, gains frosted glass on scroll.
============================================================ */
.page-interior #site {
  opacity: 1;
  background: var(--ivory);
}


/* ============================================================
   OUR STORY PAGE — SECTION 1: HERO
   Text over background image with dark overlay.
============================================================ */
.story-hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('../assets/images/tgh-house-front-door-01.jpg') center center / cover no-repeat;
  background-color: var(--warm-black);
}

.story-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 24, 0.65);
  z-index: 1;
}

.story-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 960px;
  padding: var(--space-5xl) var(--space-xl);
  text-align: center;
}

.story-hero__overline {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--parchment);
  margin-bottom: var(--space-xl);
}

.story-hero__text {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-2xl);
  line-height: 1.6;
  color: var(--ivory);
}


/* ============================================================
   OUR STORY PAGE — SECTION 2: THE STORY
   Prose blocks separated by subtle dividers.
============================================================ */
.story-narrative {
  background: var(--ivory);
  padding: var(--space-5xl) var(--space-xl);
}

.story-narrative__inner {
  max-width: var(--max-width-prose);
  margin: 0 auto;
}

.story-era p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-lg);
  line-height: 1.75;
  color: var(--text-primary);
}

.story-divider {
  border: none;
  border-top: 1px solid var(--heritage-gold);
  margin: var(--space-3xl) auto;
  max-width: 120px;
}

.story-image {
  margin: var(--space-3xl) 0;
}

.story-image img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}


/* ============================================================
   OUR STORY PAGE — SECTION 3: THE NOW
   Parchment background. Direct address. Closing statement.
============================================================ */
.story-now {
  background: var(--parchment);
  padding: var(--space-5xl) var(--space-xl);
}

.story-now__inner {
  max-width: var(--max-width-prose);
  margin: 0 auto;
}

.story-now__inner p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-primary);
  margin-bottom: var(--space-xl);
}

.story-now__inner p:last-child {
  margin-bottom: 0;
}


/* ============================================================
   PROGRAMS PAGE — HEADER
============================================================ */
.prog-header {
  background: var(--warm-black);
  padding: var(--space-5xl) var(--space-xl) var(--space-3xl);
  text-align: center;
}

.prog-header__inner {
  max-width: 960px;
  margin: 0 auto;
}

.prog-header__overline {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--parchment);
  margin-bottom: var(--space-lg);
}

.prog-header__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-3xl);
  line-height: 1.3;
  color: var(--ivory);
  margin-bottom: var(--space-xl);
}

.prog-header__intro {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--parchment);
}


/* ============================================================
   PROGRAMS PAGE — FILTER TABS
   Sticky below nav. Pillar accent color on active tab.
============================================================ */
.prog-filters {
  background: var(--warm-white);
  border-bottom: 1px solid var(--border-light);
  position: sticky;
  top: 72px;
  z-index: 50;
}

.prog-filters__inner {
  max-width: var(--max-width-page);
  margin: 0 auto;
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-xl);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.prog-filter {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 8px 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.prog-filter:hover {
  border-color: var(--charcoal);
  color: var(--charcoal);
}

.prog-filter--active,
.prog-filter--active:hover {
  background: var(--charcoal);
  color: var(--ivory);
  border-color: var(--charcoal);
}

/* Pillar-specific active tab colors */
.prog-filter--active[data-filter="commune"],
.prog-filter--active[data-filter="commune"]:hover { background: var(--charcoal); border-color: var(--charcoal); color: var(--ivory); }
.prog-filter--active[data-filter="culture"],
.prog-filter--active[data-filter="culture"]:hover { background: var(--heritage-gold); border-color: var(--heritage-gold); color: var(--ivory); }
.prog-filter--active[data-filter="arts"],
.prog-filter--active[data-filter="arts"]:hover    { background: var(--clay); border-color: var(--clay); color: var(--ivory); }
.prog-filter--active[data-filter="foodways"],
.prog-filter--active[data-filter="foodways"]:hover{ background: var(--sage); border-color: var(--sage); color: var(--ivory); }


/* ============================================================
   PROGRAMS PAGE — OVERVIEW GRID (visible in "All" mode)
   2x2 compact pillar summary cards. Clicking a card triggers
   the same filter as the corresponding pillar tab.
============================================================ */
.prog-overview {
  background: var(--ivory);
  padding: var(--space-3xl) var(--space-xl);
  transition: opacity 0.4s ease, max-height 0.5s ease, padding 0.4s ease;
  overflow: hidden;
}

.prog-overview.prog-overview--hidden {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}

.prog-overview__inner {
  max-width: var(--max-width-page);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.prog-overview__card {
  background: var(--warm-white);
  border: 1px solid var(--border-light);
  border-top: 3px solid var(--border);
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.prog-overview__card:hover {
  border-color: var(--charcoal);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.prog-overview__card:focus-visible {
  outline: 2px solid var(--heritage-gold);
  outline-offset: 2px;
}

/* Pillar accent top-borders */
.prog-overview__card--commune  { border-top-color: var(--charcoal); }
.prog-overview__card--culture  { border-top-color: var(--heritage-gold); }
.prog-overview__card--arts     { border-top-color: var(--clay); }
.prog-overview__card--foodways { border-top-color: var(--sage); }

/* Pillar name */
.prog-overview__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  color: var(--warm-black);
  margin-bottom: var(--space-xs);
  display: inline-block;
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s ease;
}

/* Pillar-specific name underline on hover */
.prog-overview__card--commune:hover  .prog-overview__name { border-bottom-color: var(--charcoal); }
.prog-overview__card--culture:hover  .prog-overview__name { border-bottom-color: var(--heritage-gold); }
.prog-overview__card--arts:hover     .prog-overview__name { border-bottom-color: var(--clay); }
.prog-overview__card--foodways:hover .prog-overview__name { border-bottom-color: var(--sage); }

/* Essence — italic tagline */
.prog-overview__essence {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-base);
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

/* Description paragraph */
.prog-overview__desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--text-primary);
}


/* ============================================================
   PROGRAMS PAGE — PILLAR SECTIONS
============================================================ */
.prog-pillar {
  /* Hidden by default — JS adds --visible to show */
  opacity: 0;
  max-height: 0;
  padding: 0 var(--space-xl);
  border-bottom: none;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.4s ease, max-height 0.5s ease, padding 0.4s ease;
}

/* Alternating backgrounds */
.prog-pillar:nth-of-type(odd)  { background: var(--ivory); }
.prog-pillar:nth-of-type(even) { background: var(--warm-white); }

/* Visible when filtered — smooth reveal */
.prog-pillar.prog-pillar--visible {
  opacity: 1;
  max-height: 5000px;
  padding: var(--space-4xl) var(--space-xl);
  border-bottom: 1px solid var(--border-light);
  pointer-events: auto;
}

.prog-pillar.prog-pillar--visible:last-of-type {
  border-bottom: none;
}

.prog-pillar__inner {
  max-width: var(--max-width-page);
  margin: 0 auto;
}

.prog-pillar__header {
  margin-bottom: var(--space-2xl);
  max-width: var(--max-width-prose);
}

.prog-pillar__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  color: var(--warm-black);
  margin-bottom: var(--space-sm);
}

/* Pillar accent underline */
.prog-pillar--commune .prog-pillar__name  { border-bottom: 2px solid var(--charcoal); display: inline-block; padding-bottom: var(--space-xs); }
.prog-pillar--culture .prog-pillar__name  { border-bottom: 2px solid var(--heritage-gold); display: inline-block; padding-bottom: var(--space-xs); }
.prog-pillar--arts .prog-pillar__name     { border-bottom: 2px solid var(--clay); display: inline-block; padding-bottom: var(--space-xs); }
.prog-pillar--foodways .prog-pillar__name { border-bottom: 2px solid var(--sage); display: inline-block; padding-bottom: var(--space-xs); }

.prog-pillar__essence {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--text-secondary);
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
}

.prog-pillar__desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-primary);
}


/* ============================================================
   PROGRAMS PAGE — PROGRAM CARDS (GRID)
============================================================ */
.prog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  align-items: start; /* Cards don't stretch to match neighbor height */
}

.prog-card {
  background: var(--warm-white);
  border: 1px solid var(--border-light);
  min-width: 0;
  overflow: hidden;
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
}

/* Alternate when parent section is warm-white */
.prog-pillar:nth-of-type(even) .prog-card {
  background: var(--ivory);
}

.prog-card__top {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}

.prog-card__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  color: var(--warm-black);
}

/* Status badges */
.prog-card__badge {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: 2px;
}

.prog-card__badge--active {
  background: var(--charcoal);
  color: var(--ivory);
}

/* Pillar-specific active badge */
.prog-pillar--commune .prog-card__badge--active  { background: var(--charcoal); }
.prog-pillar--culture .prog-card__badge--active  { background: var(--heritage-gold); }
.prog-pillar--arts .prog-card__badge--active      { background: var(--clay); }
.prog-pillar--foodways .prog-card__badge--active  { background: var(--sage); }

.prog-card__badge--soon {
  background: transparent;
  color: var(--text-light);
  border: 1px solid var(--border);
}

.prog-card__oneliner {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

/* ---- Expand/collapse card behavior ---- */
.prog-card { cursor: pointer; position: relative; }

.prog-card__detail {
  display: none;
}

.prog-card--expanded {
  cursor: default;
  grid-column: 1 / -1; /* Spans full grid width — both columns */
  z-index: 10;
  box-shadow: 0 8px 32px rgba(26, 26, 24, 0.12);
}

.prog-card--expanded .prog-card__detail {
  display: block;
}

.prog-card--expanded .prog-card__oneliner {
  margin-bottom: var(--space-lg);
}

/* Close button (injected by JS) */
.prog-card__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 28px;
  height: 28px;
  background: none;
  border: 1px solid var(--border);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.prog-card__close:hover {
  color: var(--warm-black);
  border-color: var(--charcoal);
}
.prog-card--expanded .prog-card__close {
  display: flex;
}

/* Detail content styles */
.prog-card__full {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
}

.prog-card__why {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: var(--space-lg);
  padding-left: var(--space-lg);
  border-left: 2px solid var(--border);
}

.prog-card__anchor {
  background: var(--parchment);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
}
.prog-card__anchor-label {
  display: block;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: var(--space-xs);
}
.prog-card__anchor-date {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}
.prog-card__anchor-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  color: var(--warm-black);
  margin-bottom: var(--space-xs);
}
.prog-card__anchor-desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}

.prog-card__outcomes,
.prog-card__materials {
  margin-bottom: var(--space-lg);
}

.prog-card__section-label {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: var(--space-xs);
}

.prog-card__outcomes p,
.prog-card__materials p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--text-primary);
}

.prog-card__materials-note {
  display: block;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-xs);
  color: var(--text-light);
  margin-top: var(--space-xs);
}

/* Metadata: schedule + audience */
.prog-card__meta {
  margin-bottom: var(--space-lg);
}

.prog-card__meta > div {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.prog-card__meta dt {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-light);
  min-width: 70px;
  flex-shrink: 0;
}

.prog-card__meta dd {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-primary);
}

/* CTA button */
.prog-card__cta {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 12px 24px;
  border: 1px solid var(--charcoal);
  background: transparent;
  color: var(--charcoal);
  text-align: center;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
  align-self: flex-start;
}

.prog-card__cta:hover {
  background: var(--charcoal);
  color: var(--ivory);
}

/* "Just show up" CTA — distinct from interest list buttons */
.prog-card__cta--showup {
  border-color: var(--heritage-gold-dark);
  color: var(--heritage-gold-dark);
  font-weight: 400;
}

.prog-card__cta--showup:hover {
  background: var(--heritage-gold);
  color: var(--warm-black);
  border-color: var(--heritage-gold);
}



/* ============================================================
   PROGRAMS PAGE — CLOSING
============================================================ */
.prog-closing {
  background: var(--parchment);
  padding: var(--space-3xl) var(--space-xl);
  text-align: center;
}

.prog-closing__inner {
  max-width: var(--max-width-prose);
  margin: 0 auto;
}

.prog-closing__inner p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-primary);
}


/* ============================================================
   GET INVOLVED PAGE — HEADER
============================================================ */
.involve-header {
  position: relative;
  background: url('../assets/images/tgh-house-front-door-01.jpg') center center / cover no-repeat;
  background-color: var(--warm-black);
  padding: var(--space-5xl) var(--space-xl) var(--space-4xl);
  text-align: center;
}

.involve-header__overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 24, 0.7);
  z-index: 1;
}

.involve-header__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-width-prose);
  margin: 0 auto;
}

.involve-header__overline {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--parchment);
  margin-bottom: var(--space-xl);
}

.involve-header__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-4xl);
  line-height: 1.15;
  color: var(--ivory);
  margin-bottom: var(--space-2xl);
}

.involve-header__intro {
  max-width: var(--max-width-prose);
  margin: 0 auto;
}

.involve-header__intro p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--parchment);
  margin-bottom: var(--space-lg);
}

.involve-header__intro p:last-child {
  margin-bottom: 0;
}


/* ============================================================
   GET INVOLVED PAGE — PATHWAY SECTIONS
   Stacked narrative blocks. Alternating backgrounds.
============================================================ */
.involve-pathway {
  padding: var(--space-5xl) var(--space-xl);
}

.involve-pathway--ivory {
  background: var(--ivory);
}

.involve-pathway--warm-white {
  background: var(--warm-white);
}

.involve-pathway__inner {
  max-width: var(--max-width-prose);
  margin: 0 auto;
}

.involve-pathway__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: var(--space-2xl);
}

.involve-pathway__body p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
}

.involve-pathway__body p:last-child {
  margin-bottom: 0;
}

.involve-pathway__cta {
  margin-top: var(--space-2xl);
}

/* Featured pathway — "Propose a Program" gets a sage accent border */
.involve-pathway--featured {
  border-left: 3px solid var(--sage);
}

/* Light pathway — "Stay Connected" is shorter, lighter weight */
.involve-pathway--light .involve-pathway__title {
  font-size: var(--text-2xl);
}

/* Social icons within Stay Connected */
.involve-pathway__social {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.involve-pathway__social-link {
  color: var(--text-secondary);
  transition: color 0.3s ease;
}

.involve-pathway__social-link:hover {
  color: var(--text-primary);
}


/* ============================================================
   GET INVOLVED PAGE — CLOSING
   Same pattern as Programs closing — parchment, centered text.
============================================================ */
.involve-closing {
  background: var(--parchment);
  padding: var(--space-3xl) var(--space-xl);
  text-align: center;
}

.involve-closing__inner {
  max-width: var(--max-width-prose);
  margin: 0 auto;
}

.involve-closing__inner p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-primary);
}


/* ============================================================
   VENUE PAGE — INTRODUCTION
   Dark header. Invitation to walk the property.
============================================================ */
.venue-intro {
  background: var(--warm-black);
  padding: var(--space-5xl) var(--space-xl) var(--space-4xl);
  text-align: center;
}

.venue-intro__inner {
  max-width: var(--max-width-prose);
  margin: 0 auto;
}

.venue-intro__overline {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--parchment);
  margin-bottom: var(--space-xl);
}

.venue-intro__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-4xl);
  line-height: 1.15;
  color: var(--ivory);
  margin-bottom: var(--space-2xl);
}

.venue-intro__body {
  max-width: var(--max-width-prose);
  margin: 0 auto;
}

.venue-intro__body p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--parchment);
  margin-bottom: var(--space-lg);
}

.venue-intro__body p:last-child {
  margin-bottom: 0;
}


/* ============================================================
   VENUE PAGE — SPACE SECTIONS
   Photo-forward. Each space gets its own block.
   Image fills left/top, text right/bottom. Slow scroll feel.
============================================================ */
.venue-space {
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
}

.venue-space--ivory {
  background: var(--ivory);
}

.venue-space--warm-white {
  background: var(--warm-white);
}

.venue-space__image {
  overflow: hidden;
  background: var(--parchment);
  min-height: 360px;
}

.venue-space__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.venue-space__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-4xl) var(--space-3xl);
}

.venue-space__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: var(--space-xl);
}

.venue-space__body p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
}

.venue-space__body p:last-child {
  margin-bottom: 0;
}

/* Alternate image placement: odd venue-space sections get image on right
   (House=child2=even=img-left, Ballroom=child3=odd=img-right, etc.) */
.venue-space:nth-child(odd) {
  direction: rtl;
}

.venue-space:nth-child(odd) > * {
  direction: ltr;
}

/* Featured space (Boxwood Garden) — extra visual weight */
.venue-space--featured {
  min-height: 560px;
}

/* Minor spaces (Root Cellar, Wellhouse) — lighter treatment */
.venue-space--minor {
  min-height: 380px;
}


/* ============================================================
   VENUE PAGE — COMMUNITY ACCESS
   Matches venue-space visual rhythm: alternating backgrounds,
   consistent heading/body typography, continuous section flow.
   Primary community access section. Ivory background.
============================================================ */
.venue-access {
  padding: var(--space-4xl) var(--space-3xl);
}

.venue-access--ivory {
  background: var(--ivory);
}

.venue-access--warm-white {
  background: var(--warm-white);
}

.venue-access__inner {
  max-width: var(--max-width-page);
}

.venue-access__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: var(--space-xl);
}

.venue-access__lead {
  max-width: var(--max-width-prose);
  margin-bottom: var(--space-3xl);
}

.venue-access__lead p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
}

.venue-access__lead p:last-child {
  margin-bottom: 0;
}

.venue-access__group {
  margin-bottom: var(--space-3xl);
}

.venue-access__group-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: 1.2;
  color: var(--warm-black);
  margin-bottom: var(--space-lg);
}

.venue-access__group p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-primary);
  max-width: var(--max-width-prose);
}

.venue-access__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.venue-access__list li {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-primary);
  padding-left: var(--space-xl);
  position: relative;
  margin-bottom: var(--space-sm);
}

.venue-access__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--heritage-gold);
}

.venue-access__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.venue-access__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--text-base);
}

.venue-access__table thead {
  border-bottom: 1px solid var(--border);
}

.venue-access__table th {
  font-weight: 400;
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: left;
  padding: var(--space-md) var(--space-lg) var(--space-md) 0;
}

.venue-access__table td {
  font-weight: 300;
  color: var(--text-primary);
  padding: var(--space-md) var(--space-lg) var(--space-md) 0;
  line-height: 1.5;
  border-bottom: 1px solid var(--border-light);
}

.venue-access__table tbody tr:last-child td {
  border-bottom: none;
}

.venue-access__cta {
  margin-top: var(--space-xl);
}


/* ============================================================
   VENUE PAGE — PRIVATE EVENTS
   Continues venue-space rhythm. Light background. Left-aligned.
============================================================ */
.venue-private {
  padding: var(--space-4xl) var(--space-3xl);
}

.venue-private--warm-white {
  background: var(--warm-white);
}

.venue-private--ivory {
  background: var(--ivory);
}

.venue-private__inner {
  max-width: var(--max-width-page);
}

.venue-private__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: var(--space-xl);
}

.venue-private__lead {
  max-width: var(--max-width-prose);
  margin-bottom: var(--space-3xl);
}

.venue-private__lead p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-primary);
}

.venue-private__group {
  margin-bottom: var(--space-3xl);
}

.venue-private__group-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
}

.venue-private__group p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-primary);
  max-width: var(--max-width-prose);
}

.venue-private__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.venue-private__list li {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-primary);
  padding-left: var(--space-xl);
  position: relative;
  margin-bottom: var(--space-sm);
}

.venue-private__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--heritage-gold);
}

.venue-private__cta {
  margin-top: var(--space-xl);
}


/* ============================================================
   VENUE PAGE — CLOSING
   Parchment. "Welcome Home" callback.
============================================================ */
.venue-closing {
  background: var(--parchment);
  padding: var(--space-3xl) var(--space-xl);
  text-align: center;
}

.venue-closing__inner {
  max-width: var(--max-width-prose);
  margin: 0 auto;
}

.venue-closing__inner p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-primary);
}

.venue-closing__inner em {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--heritage-gold-dark);
}


/* ============================================================
   VENUE PAGE — VISIT INFO
   Practical details: address, hours, contact, accessibility.
============================================================ */
.venue-visit {
  background: var(--ivory);
  padding: var(--space-4xl) var(--space-xl);
}

.venue-visit__inner {
  max-width: var(--max-width-page);
  margin: 0 auto;
}

.venue-visit__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: var(--space-2xl);
  text-align: center;
}

.venue-visit__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2xl);
}

.venue-visit__label {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

.venue-visit__block p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--text-primary);
}

.venue-visit__block a {
  color: var(--sage-dark);
  text-decoration: none;
}

.venue-visit__block a:hover {
  text-decoration: underline;
}


/* ============================================================
   SUPPORT PAGE — HEADER
   Dark header. Case for support. Heritage Gold donate CTA.
============================================================ */
.support-header {
  background: var(--warm-black);
  padding: var(--space-5xl) var(--space-xl) var(--space-4xl);
  text-align: center;
}

.support-header__inner {
  max-width: var(--max-width-prose);
  margin: 0 auto;
}

.support-header__overline {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--parchment);
  margin-bottom: var(--space-xl);
}

.support-header__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-4xl);
  line-height: 1.15;
  color: var(--ivory);
  margin-bottom: var(--space-2xl);
}

.support-header__intro {
  max-width: var(--max-width-prose);
  margin: 0 auto;
}

.support-header__intro p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--parchment);
  margin-bottom: var(--space-lg);
}

.support-header__intro p:last-child {
  margin-bottom: 0;
}

.support-header__cta {
  margin-top: var(--space-2xl);
}


/* ============================================================
   SUPPORT PAGE — GIVING PATHWAYS
   Stacked narrative blocks. Same rhythm as Get Involved.
============================================================ */
.support-pathway {
  padding: var(--space-5xl) var(--space-xl);
}

.support-pathway--ivory {
  background: var(--ivory);
}

.support-pathway--warm-white {
  background: var(--warm-white);
}

.support-pathway__inner {
  max-width: var(--max-width-prose);
  margin: 0 auto;
}

.support-pathway__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: var(--space-2xl);
}

.support-pathway__body p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
}

.support-pathway__body p:last-child {
  margin-bottom: 0;
}

.support-pathway__cta {
  margin-top: var(--space-2xl);
}

/* Primary giving pathway — "Give" carries the most visual weight */
.support-pathway--primary {
  border-left: 3px solid var(--heritage-gold);
}

/* Quiet pathway — "Naming Opportunities" is shorter, more intimate */
.support-pathway--quiet .support-pathway__title {
  font-size: var(--text-2xl);
}


/* ============================================================
   SUPPORT PAGE — ORGANIZATIONAL INFORMATION
   Understated. Reference material, not a selling point.
============================================================ */
.support-org {
  background: var(--warm-white);
  padding: var(--space-3xl) var(--space-xl);
  border-top: 1px solid var(--border-light);
}

.support-org__inner {
  max-width: var(--max-width-prose);
  margin: 0 auto;
}

.support-org__title {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-xl);
}

.support-org__inner p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

.support-org__inner p:last-of-type {
  margin-bottom: 0;
}

.support-org__cta {
  margin-top: var(--space-xl);
  font-size: var(--text-xs);
}


/* ============================================================
   SUPPORT PAGE — CLOSING
   Parchment. Centered. Ties back to Porch Time.
============================================================ */
.support-closing {
  background: var(--parchment);
  padding: var(--space-3xl) var(--space-xl);
  text-align: center;
}

.support-closing__inner {
  max-width: var(--max-width-prose);
  margin: 0 auto;
}

.support-closing__inner p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
}

.support-closing__inner p:last-child {
  margin-bottom: 0;
}


/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .hero-title {
    font-size: clamp(3.5rem, 14vw, 5rem);
  }

  .phase-2 .hero-title {
    font-size: clamp(1.8rem, 5vw, 2.5rem);
  }

  .intro-phrase.phrase--xl {
    font-size: clamp(2.5rem, 10vw, 5rem);
  }

  .pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Expanded state: stacked horizontal strips above expanded content */
  .pillars-grid.has-expanded {
    flex-direction: column;
  }

  .pillar-card.collapsed {
    order: -1;
    width: 100%;
    min-width: 100%;
  }

  .pillar-card.collapsed .pillar-card__strip {
    writing-mode: horizontal-tb;
    text-orientation: initial;
    height: auto;
    min-height: auto;
    padding: var(--space-sm) var(--space-lg);
    flex-direction: row;
    justify-content: flex-start;
  }

  .pillar-card.expanded {
    order: 1;
    width: 100%;
  }

  .pillar-card.expanded .pillar-card__expanded {
    padding: var(--space-xl);
  }

  /* Programs: 2-column on tablet */
  .pillar-card__programs {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Our Story: reduce hero height on tablet */
  .story-hero {
    min-height: 70vh;
  }

  .story-hero__text {
    font-size: var(--text-xl);
  }

  /* Overview grid: single column on tablet */
  .prog-overview__inner {
    grid-template-columns: 1fr;
  }

  /* Programs: single-column cards on tablet */
  .prog-grid {
    grid-template-columns: 1fr;
  }

  /* Get Involved: reduce title on tablet */
  .involve-header__title {
    font-size: var(--text-3xl);
  }

  /* Featured pathway border moves to top on narrow screens */
  .involve-pathway--featured {
    border-left: none;
    border-top: 3px solid var(--sage);
  }

  /* Support: reduce header title on tablet */
  .support-header__title {
    font-size: var(--text-3xl);
  }

  /* Primary giving pathway border moves to top on narrow screens */
  .support-pathway--primary {
    border-left: none;
    border-top: 3px solid var(--heritage-gold);
  }

  /* Venue: stack spaces to single column */
  .venue-space {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .venue-space:nth-child(odd) {
    direction: ltr;
  }

  .venue-space__image {
    min-height: 280px;
  }

  .venue-space__content {
    padding: var(--space-3xl) var(--space-xl);
  }

  .venue-space--featured {
    min-height: auto;
  }

  .venue-space--minor {
    min-height: auto;
  }

  /* Venue: community access + private events match space content padding */
  .venue-access {
    padding: var(--space-3xl) var(--space-xl);
  }

  .venue-private {
    padding: var(--space-3xl) var(--space-xl);
  }

  /* Venue: visit info 2-column */
  .venue-visit__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .venue-intro__title {
    font-size: var(--text-3xl);
  }

  /* Footer: stack to single column */
  .footer__top {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    text-align: center;
  }

  .footer__identity {
    align-items: center;
  }

  .footer__right {
    align-items: center;
  }

  .footer__nav {
    justify-content: center;
  }

  .footer__contact {
    align-items: center;
  }

  .footer__social {
    justify-content: center;
  }

  .footer__legal {
    flex-direction: column;
    text-align: center;
    gap: var(--space-sm);
  }

  .footer__legal-links {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  #site-nav {
    padding: var(--space-md) var(--space-lg);
  }

  .hero-inner {
    padding: var(--space-4xl) var(--space-lg);
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn {
    width: 100%;
    text-align: center;
  }

  .intro-phrase {
    padding: 0 var(--space-lg);
  }

  .intro-vision {
    padding: 0 var(--space-lg);
  }

  .pillars {
    padding: 0 var(--space-xl) var(--space-4xl);
  }

  .pillars-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* Programs: single column on mobile */
  .pillar-card__programs {
    grid-template-columns: 1fr;
  }

  .pillar-card.expanded .pillar-card__expanded {
    padding: var(--space-lg);
  }

  .pillar-card__expanded-header h3 {
    font-size: var(--text-2xl);
  }

  /* Action bar stacks on mobile */
  .program-card__actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* Hero image shorter on mobile */
  .program-card__hero img {
    max-height: 180px;
  }

  /* Our Story: compact hero + narrative on mobile */
  .story-hero {
    min-height: 60vh;
  }

  .story-hero__inner {
    padding: var(--space-4xl) var(--space-lg);
  }

  .story-narrative {
    padding: var(--space-4xl) var(--space-lg);
  }

  .story-now {
    padding: var(--space-4xl) var(--space-lg);
  }

  /* Programs page: compact on mobile */
  .prog-overview {
    padding: var(--space-2xl) var(--space-lg);
  }

  .prog-overview__card {
    padding: var(--space-lg);
  }

  .prog-overview__name {
    font-size: var(--text-xl);
  }

  .prog-header {
    padding: var(--space-4xl) var(--space-lg) var(--space-2xl);
  }

  .prog-header__title {
    font-size: var(--text-2xl);
  }

  .prog-filters__inner {
    padding: var(--space-sm) var(--space-lg);
  }

  .prog-pillar.prog-pillar--visible {
    padding: var(--space-3xl) var(--space-lg);
  }

  .prog-pillar__name {
    font-size: var(--text-2xl);
  }

  .prog-card {
    padding: var(--space-lg);
  }

  .prog-card__meta > div {
    flex-direction: column;
    gap: 2px;
  }

  .prog-closing {
    padding: var(--space-2xl) var(--space-lg);
  }

  /* Get Involved: compact on mobile */
  .involve-header {
    padding: var(--space-4xl) var(--space-lg) var(--space-3xl);
  }

  .involve-header__title {
    font-size: var(--text-2xl);
  }

  .involve-pathway {
    padding: var(--space-4xl) var(--space-lg);
  }

  .involve-pathway__title {
    font-size: var(--text-2xl);
  }

  .involve-pathway__cta {
    width: 100%;
    text-align: center;
  }

  .involve-closing {
    padding: var(--space-2xl) var(--space-lg);
  }

  /* Support: compact on mobile */
  .support-header {
    padding: var(--space-4xl) var(--space-lg) var(--space-3xl);
  }

  .support-header__title {
    font-size: var(--text-2xl);
  }

  .support-pathway {
    padding: var(--space-4xl) var(--space-lg);
  }

  .support-pathway__title {
    font-size: var(--text-2xl);
  }

  .support-pathway__cta {
    width: 100%;
    text-align: center;
  }

  .support-org {
    padding: var(--space-2xl) var(--space-lg);
  }

  .support-closing {
    padding: var(--space-2xl) var(--space-lg);
  }

  /* Venue: compact on mobile */
  .venue-intro {
    padding: var(--space-4xl) var(--space-lg) var(--space-3xl);
  }

  .venue-intro__title {
    font-size: var(--text-2xl);
  }

  .venue-space__image {
    min-height: 220px;
  }

  .venue-space__content {
    padding: var(--space-2xl) var(--space-lg);
  }

  .venue-space__name {
    font-size: var(--text-2xl);
  }

  .venue-access {
    padding: var(--space-2xl) var(--space-lg);
  }

  .venue-access__title {
    font-size: var(--text-2xl);
  }

  .venue-access__table {
    font-size: var(--text-sm);
  }

  .venue-access__table th,
  .venue-access__table td {
    padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  }

  .venue-access__cta {
    width: 100%;
    text-align: center;
  }

  .venue-private {
    padding: var(--space-2xl) var(--space-lg);
  }

  .venue-private__title {
    font-size: var(--text-2xl);
  }

  .venue-private__cta {
    width: 100%;
    text-align: center;
  }

  .venue-closing {
    padding: var(--space-2xl) var(--space-lg);
  }

  .venue-visit {
    padding: var(--space-3xl) var(--space-lg);
  }

  .venue-visit__grid {
    grid-template-columns: 1fr;
  }
}