/* ============================================================================
   NVC RISING — Site stylesheet
   Watercolor-on-paper · editorial serif · spectrum logo.
   Loads after css/tokens.css (the design-system variables).
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); overflow-x: hidden; }
img { max-width: 100%; display: block; }
::selection { background: var(--accent-magenta-soft); color: var(--brand-ink); }

a { color: var(--brand-ink); text-decoration: none; transition: color .15s; }
a:hover { color: var(--brand); }

/* ---- layout ------------------------------------------------------------- */
.wrap { max-width: 1180px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.wrap-wide { max-width: 1320px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section-sm { padding: clamp(48px, 6vw, 80px) 0; }
.section-tight { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
.bg-paper-2 { background: var(--paper-2); }
.bg-paper-3 { background: var(--paper-3); }

/* ---- type helpers ------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono); font-size: 16px; font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase; color: var(--ink-faint);
  margin: 0 0 18px;
}
.eyebrow-brand { color: var(--brand-ink); }
h1 em, h2 em, h3 em, h4 em { font-style: italic; font-weight: 400; }
.lede {
  font-family: var(--font-body); font-weight: 300;
  font-size: clamp(18px, 1.7vw, 22px); line-height: 1.55; color: var(--ink-soft);
  margin: 0; text-wrap: pretty;
}
.measure { max-width: 660px; }
.center { text-align: center; }
.center .measure, .center .lede { margin-left: auto; margin-right: auto; }
.section-head { max-width: 680px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.section-head h2 { margin: 0; }
.section-head .lede { margin-top: 18px; }
.prose p { font-size: 17px; line-height: 1.72; color: var(--ink-soft); margin: 0 0 1.1em; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 500; }

/* ---- blog-post body rhythm ---------------------------------------------- */
/* Scoped to .prose so only migrated post bodies are affected. The .prose class
   was originally built for hand-written pages with no in-flow subheadings or
   dividers, so headings/hr need spacing rules of their own. */
.prose h2,
.prose h3,
.prose h4 { color: var(--ink); margin: 1.6em 0 .5em; line-height: 1.14; }
.prose h2 { font-size: clamp(28px, 3vw, 40px); }
.prose h3 { font-size: clamp(22px, 2vw, 28px); }
.prose h4 { font-size: clamp(19px, 1.6vw, 23px); }
.prose > :first-child { margin-top: 0; }

/* Section dividers (Markdown `---`) rendered as the brand spectrum rule, with
   generous breathing room around each section break. */
.prose hr {
  border: 0;
  height: 4px;
  margin: clamp(40px, 5vw, 64px) 0;
  background: var(--gradient-spectrum);
  border-radius: 4px;
}
/* A heading immediately after a divider shouldn't compound the gap. */
.prose hr + h2,
.prose hr + h3,
.prose hr + h4 { margin-top: 0; }

.prose ul,
.prose ol { margin: 0 0 1.1em; padding-left: 1.4em; color: var(--ink-soft); }
.prose li { font-size: 17px; line-height: 1.72; margin: 0 0 .4em; }
.prose blockquote {
  margin: 1.4em 0; padding: .2em 0 .2em 1.1em;
  border-left: 3px solid var(--line-strong);
  color: var(--ink-soft); font-style: italic;
}
.prose a { color: var(--brand-ink); text-underline-offset: 2px; }
/* button-styled links inside prose keep their own (button) text color */
.prose a.btn-primary, .prose a.btn-ghost-light { color: #fff; }
.prose a.btn-ghost { color: var(--ink); }

/* brush-underlined emphasis word */
.brush { position: relative; display: inline-block; white-space: nowrap; padding-bottom: .06em; font-style: italic; font-weight: 400; }
.brush img { position: absolute; left: -3%; bottom: -.02em; width: 106%; height: .32em; object-fit: fill; pointer-events: none; z-index: -1; }

/* spectrum rule */
.spectrum-rule { height: 4px; border: 0; margin: 0; background: var(--gradient-spectrum); border-radius: 4px; }

/* ---- buttons ------------------------------------------------------------ */
.btn {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .18em;
  text-transform: uppercase; border: none; cursor: pointer; padding: 15px 30px;
  border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; transition: all .18s cubic-bezier(.22,1,.36,1); white-space: nowrap;
  line-height: 1;
}
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: #fff; }
.btn-primary:active { transform: translateY(0) scale(.98); background: var(--brand-ink); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); background: var(--paper-2); color: var(--ink); transform: translateY(-2px); }
.btn-ghost-light { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.6); backdrop-filter: blur(4px); }
.btn-ghost-light:hover { background: rgba(255,255,255,.26); color: #fff; transform: translateY(-2px); }
.btn-block { width: 100%; justify-content: center; }
.btn .ar { font-family: var(--font-body); font-size: 15px; }

/* text link with arrow */
.tlink {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand-ink); display: inline-flex; align-items: center; gap: 8px; font-weight: 500;
}
.tlink .ar { transition: transform .2s; font-family: var(--font-body); }
.tlink:hover { color: var(--brand); }
.tlink:hover .ar { transform: translateX(4px); }

/* status pill */
.status {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 500; padding: 5px 12px; border-radius: var(--radius-pill); display: inline-block;
}
.status-open { background: var(--accent-green-soft); color: #3a7320; }
.status-soon { background: var(--accent-gold-soft); color: #9a7320; }
.status-wait { background: var(--accent-magenta-soft); color: var(--brand-ink); }

/* ============================================================================
   NAV
   ============================================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  transition: background .25s, box-shadow .25s, border-color .25s;
  border-bottom: 1px solid transparent;
}
.nav-inner {
  max-width: 1320px; margin: 0 auto; height: 74px; padding: 0 28px;
  display: flex; align-items: center; gap: 26px;
}
.nav-brand {
  margin-right: auto; display: flex; align-items: center; cursor: pointer;
  /* dark pill scrim behind the logo — transparent over the dark hero,
     fades to the footer fill when scrolled so the white "RISING" stays legible */
  padding: 7px 14px; margin-left: -14px; border-radius: var(--radius-pill);
  background: transparent; transition: background .25s;
}
.nav-logo { display: block; height: 30px; width: auto; }

/* default (over dark hero): light text */
.nav-links > a, .nav-item > button { color: rgba(255,255,255,.86); }
.nav-burger span { background: #fff; }

/* scrolled or solid: dark text on frosted paper */
.nav.is-scrolled, .nav.is-solid {
  background: rgba(251,248,243,.88); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(42,34,51,.05); border-bottom: 1px solid var(--line);
}
.nav.is-scrolled .nav-brand, .nav.is-solid .nav-brand { background: var(--brand-wine); }
.nav.is-scrolled .nav-links > a, .nav.is-solid .nav-links > a,
.nav.is-scrolled .nav-item > button, .nav.is-solid .nav-item > button { color: var(--ink-soft); }
.nav.is-scrolled .nav-burger span, .nav.is-solid .nav-burger span { background: var(--ink); }

.nav-links { display: flex; align-items: center; gap: 28px; flex: none; }
.nav-links > a, .nav-item, .nav-item > button {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap; cursor: pointer; background: none; border: none; padding: 0;
  display: inline-flex; align-items: center; gap: 6px; line-height: 1; transition: color .15s;
}
.nav-links > a:hover, .nav-item > button:hover { color: var(--brand); }
.nav.is-scrolled .nav-links > a:hover, .nav.is-solid .nav-links > a:hover,
.nav.is-scrolled .nav-item > button:hover, .nav.is-solid .nav-item > button:hover { color: var(--brand-ink); }
.nav-links > a.active, .nav-item.active > button { color: #fff; }
.nav.is-scrolled .nav-links > a.active, .nav.is-solid .nav-links > a.active,
.nav.is-scrolled .nav-item.active > button, .nav.is-solid .nav-item.active > button { color: var(--brand-ink); }
.nav-item > button .caret { font-size: 9px; opacity: .7; transition: transform .2s; }

/* dropdown */
.nav-item { position: relative; }
.nav-dd {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 10px; min-width: 250px;
  opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s; z-index: 70;
}
.nav-item:hover .nav-dd, .nav-item:focus-within .nav-dd { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-item:hover > button .caret { transform: rotate(180deg); }
.nav-dd::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.nav-dd a {
  display: block; padding: 11px 14px; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 15px; color: var(--ink); transition: background .14s, color .14s;
}
.nav-dd a:hover { background: var(--paper-2); color: var(--brand-ink); }
.nav-dd a .sub { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 3px; }
.nav-cta { flex: none; }
.nav-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-burger span { width: 24px; height: 2px; border-radius: 2px; transition: background .25s; }

/* mobile overlay menu */
.nav-mobile {
  position: fixed; inset: 0; z-index: 80; background: var(--paper);
  display: flex; flex-direction: column; padding: 90px 28px 40px; overflow-y: auto;
  transform: translateX(100%); transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.nav-mobile.is-open { transform: translateX(0); }
.nav-mobile-close { position: absolute; top: 24px; right: 22px; background: none; border: none; cursor: pointer; color: var(--ink); padding: 8px; }
.nav-mobile-close svg { width: 26px; height: 26px; }
.nav-mobile-brand { position: absolute; top: 26px; left: 28px; font-family: var(--font-mono); font-weight: 500; letter-spacing: .2em; color: var(--ink); }
.nav-mobile-brand .dim { color: var(--ink-faint); }
.macc { border-bottom: 1px solid var(--line); }
.macc > a, .macc-head {
  font-family: var(--font-display); font-weight: 400; font-size: 27px; color: var(--ink);
  padding: 18px 4px; display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: none; cursor: pointer; text-align: left;
}
.macc-head .caret { font-family: var(--font-body); font-size: 22px; color: var(--brand-ink); transition: transform .25s; font-weight: 300; }
.macc.is-open .macc-head .caret { transform: rotate(45deg); }
.macc-panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.macc.is-open .macc-panel { max-height: 340px; }
.macc-panel a {
  display: block; font-family: var(--font-body); font-size: 16px; color: var(--ink-soft);
  padding: 11px 4px 11px 18px;
}
.macc-panel a:hover { color: var(--brand-ink); }
.nav-mobile-cta { margin: 28px 0 22px; }
.nav-mobile-foot { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.nav-mobile-foot .lib { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.nav-mobile-foot .socials { display: flex; gap: 18px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

/* ============================================================================
   HERO / PAGE HEADERS
   ============================================================================ */
.hero { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; display: block; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; display: block; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,10,40,.56) 0%, rgba(20,10,40,.42) 30%, rgba(20,10,40,.30) 60%, rgba(20,10,40,.12) 80%, var(--paper) 100%); }
.hero-inner { position: relative; max-width: 1180px; margin: 0 auto; padding: 130px 28px 96px; width: 100%; }
.hero-content { max-width: 660px; }
/* home hero wraps its long headline to a controlled 4 lines — needs a touch
   more width so the first line ("Building a community") doesn't itself wrap */
[data-page="home"] .hero-content { max-width: 720px; }
.hero h1 { color: #fff; font-size: clamp(42px, 6.6vw, 96px); line-height: 1.0; letter-spacing: -.02em; margin: 0 0 24px; text-shadow: 0 2px 40px rgba(0,0,10,1), 0 1px 16px rgba(0,0,10,.9), 0 6px 64px rgba(0,0,10,.85); }
/* controlled 4-line wrap on the home hero (desktop only); below 960px the
   heading shrinks and wraps naturally, so the forced breaks are removed there */
.hero h1 .h1-break { display: inline; }
.hero .lede { color: rgba(255,255,255,.97); font-size: clamp(18px, 1.7vw, 23px); max-width: 560px; text-shadow: 0 2px 32px rgba(0,0,10,1), 0 1px 14px rgba(0,0,10,.9), 0 6px 56px rgba(0,0,10,.85); }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; align-items: center; }
.hero-textlink { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: #fff; display: inline-flex; gap: 8px; align-items: center; padding: 12px 20px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; background: rgba(20,10,40,.28); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background .2s, border-color .2s; }
.hero-textlink:hover { color: #fff; background: rgba(20,10,40,.42); border-color: rgba(255,255,255,.85); }
/* match the arrow to the primary button above it (body font, larger glyph) */
.hero-textlink .ar { transition: transform .2s; font-family: var(--font-body); font-size: 15px; }
.hero-textlink:hover .ar { transform: translateX(4px); }
/* the in-label break only applies on mobile (see media query) */
.hero-textlink .htl-break { display: none; }
.hero-giraffe { position: absolute; right: 3%; bottom: 0; height: 80%; max-height: 780px; z-index: 2; pointer-events: none; filter: drop-shadow(0 18px 44px rgba(40,25,55,.3)); }
.hero-fliers { position: absolute; top: 12%; left: -2%; width: 42%; max-width: 540px; opacity: .92; pointer-events: none; z-index: 1; }

/* festivals hero — watercolor nature layered over the day-sky, no giraffe.
   birds & butterflies drift across the upper sky, a robin-on-branch frames the
   top-right, and a pine forest grounds the bottom corners over the paper fade. */
.fest-hero-fliers {
  position: absolute; top: 10%; right: -4%; width: 46%; max-width: 620px;
  opacity: .95; pointer-events: none; z-index: 2;
}
/* robin-on-branch pinned flush to the left edge, BEHIND the heading (under the scrim) */
.fest-hero-bird {
  position: absolute; top: 9%; left: 0; width: 18%; max-width: 230px;
  opacity: .92; pointer-events: none; z-index: 0; transform: scaleX(-1);
}
/* forest sits BELOW the scrim (z-index 0, scrim is its sibling at default) so
   the paper-fade gradient veils the treetops where they meet the heading,
   keeping the text readable while the trees still ground the bottom-left. */
.fest-hero-forest {
  position: absolute; bottom: -1px; left: -3%; width: auto;
  height: 30%; max-height: 270px; opacity: .92; pointer-events: none; z-index: 0;
}
/* small photo-credit caption pinned to the hero image; dark pill keeps it
   legible over both the photo and the paper fade at the hero's bottom edge */
.hero-note { position: absolute; right: 18px; bottom: 16px; z-index: 2; margin: 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; color: rgba(255,255,255,.92); background: rgba(20,10,40,.55); padding: 7px 14px; border-radius: 999px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* compact painted header (interior pages) */
.phead { position: relative; overflow: hidden; }
.phead-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.phead-scrim { position: absolute; inset: 0; }
.phead-inner { position: relative; max-width: 1180px; margin: 0 auto; padding: 150px 28px 88px; }
.phead .eyebrow { color: rgba(255,255,255,.9); }
.phead h1 { color: #fff; margin: 0 0 22px; font-size: clamp(40px, 5.6vw, 84px); text-shadow: 0 2px 40px rgba(0,0,10,1), 0 1px 16px rgba(0,0,10,.9), 0 6px 64px rgba(0,0,10,.85); }
.phead .lede { color: rgba(255,255,255,.97); text-shadow: 0 2px 32px rgba(0,0,10,1), 0 1px 14px rgba(0,0,10,.9), 0 6px 56px rgba(0,0,10,.85); }
.phead-cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }

/* paper header (no image) — editorial */
.thead { position: relative; padding: 150px 0 clamp(48px,6vw,72px); overflow: hidden; }
.thead .eyebrow { margin-bottom: 20px; }
.thead h1 { margin: 0 0 24px; max-width: 14ch; }
.thead.center h1 { margin-left: auto; margin-right: auto; }
.thead .lede { max-width: 620px; }
.thead.center .lede { margin-left: auto; margin-right: auto; }
.thead-deco { position: absolute; pointer-events: none; }
/* tall vertical strips (side-flowers): anchored to the content's right edge
   (not the screen edge) so they read as a hero-side element. The .thead box
   clips overflow, and the source art is very tall (≈1:3), so we constrain by
   HEIGHT — fitting it between its top offset and the section's bottom edge —
   and let width follow the aspect ratio. This way a short header (just a
   title + one-line intro) shrinks the flower to fit instead of clipping its
   stem, while a tall header lets it grow up to its natural 250px width. */
.thead-deco-tall {
  width: auto; height: auto;
  max-width: 250px; max-height: calc(100% - 96px);
  top: 70px; bottom: auto;
  right: max(28px, calc((100vw - 1180px) / 2 + 12px));
}

/* watercolor nature accents dropped into content sections. Absolutely
   positioned against a position:relative section, behind the copy, and
   purely decorative (pointer-events off). Each variant pins itself to a
   margin so it never overlaps the centered text columns. */
.nature-section { position: relative; overflow: hidden; }
.nature-deco { position: absolute; pointer-events: none; z-index: 0; }
.nature-section > .wrap,
.nature-section > .wrap-narrow { position: relative; z-index: 1; }
.nature-deco-snail {
  width: 150px; right: max(24px, calc((100vw - 920px) / 2 - 40px));
  top: 50%; transform: translateY(-50%); opacity: .85;
}
.nature-deco-lizard {
  width: 170px; left: max(20px, calc((100vw - 1180px) / 2 - 60px));
  bottom: 28px; opacity: .8; transform: scaleX(-1);
}
.nature-deco-stones {
  width: 130px; left: max(16px, calc((100vw - 1180px) / 2 - 70px));
  bottom: 24px; opacity: .85;
}

/* ============================================================================
   FESTIVALS RETROSPECTIVE — stat row + teacher faces
   ============================================================================ */
/* big-number stat row (festivals "by the numbers") */
.festival-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.festival-stat {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 30px 22px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.festival-stat-n {
  font-family: var(--font-display); font-weight: 300; line-height: 1;
  font-size: clamp(40px, 5vw, 60px); color: var(--brand-ink);
}
.festival-stat-l { font-size: 14px; line-height: 1.45; color: var(--ink-soft); }

/* round teacher portraits */
.faces-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 28px 18px;
  max-width: 920px; margin: 0 auto;
}
.face { margin: 0; text-align: center; }
.face img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  box-shadow: var(--shadow-sm); border: 2px solid var(--white);
}
.face figcaption {
  margin-top: 10px; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.3;
}

/* regional spin-off festival cards (Japan / Germany) */
.regional-card { padding-top: 30px; }
.regional-logo {
  height: 120px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: flex-start;
}
.regional-logo img { max-height: 120px; max-width: 200px; width: auto; object-fit: contain; }
/* text-based logo treatment for the Japan festival */
.regional-logo-text { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.regional-logo-lead {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brand-ink);
}
.regional-logo-main {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 34px; line-height: 1; color: var(--ink);
}

/* ============================================================================
   CARDS / GRIDS
   ============================================================================ */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* offerings: 5 cards + a quote — 3-up on wide screens fills two full rows (3 + 3) */
.grid-offer { grid-template-columns: repeat(3, 1fr); }

/* doorway card (offerings, resources) */
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 34px 30px; transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
  display: flex; flex-direction: column; text-decoration: none; color: inherit; position: relative; overflow: hidden;
}
a.card:hover, .card.hoverable:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); color: inherit; }
.card .badge { width: 64px; height: 64px; object-fit: contain; margin-bottom: 18px; }
.card .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--brand-ink); margin-bottom: 10px; }
.card h3, .card h4 { margin: 0 0 10px; }
.card h4 { font-size: clamp(22px, 2vw, 28px); }
.card p { font-size: 15.5px; line-height: 1.62; color: var(--ink-soft); margin: 0; }
.card .card-foot { margin-top: auto; padding-top: 20px; }

/* soft watercolor wash on a card; each .wc-* hue-rotates the source blue blob
   to a different palette accent and sits the blob in a different corner/angle so
   the four cards don't read identically. content sits above it. */
.wc-tint::before {
  content: ""; position: absolute; z-index: 0;
  width: 200px; height: 280px; pointer-events: none;
  background: url(/assets/nature-elements/soft_watercolor_bg1.webp) no-repeat center / contain;
  opacity: .5; transform: rotate(var(--wc-rot, 0deg)) scale(var(--wc-scale, 1));
  transition: opacity .3s, transform .3s cubic-bezier(.22,1,.36,1);
}
.wc-tint > * { position: relative; z-index: 1; }
a.wc-tint:hover::before { opacity: .72; --wc-scale: 1.06; }
/* source image hue ≈ 195° (blue); rotate to land on each palette accent.
   each card gets its own corner + tilt for variety. */
.wc-magenta::before { filter: hue-rotate(135deg) saturate(1.05); top: -40px; right: -44px; --wc-rot: 8deg; }
.wc-gold::before    { filter: hue-rotate(205deg) saturate(.95); bottom: -56px; left: -48px; --wc-rot: -18deg; }
.wc-green::before   { filter: hue-rotate(255deg) saturate(.9); top: -30px; left: -52px; --wc-rot: 195deg; }
.wc-indigo::before  { filter: hue-rotate(50deg); bottom: -50px; right: -40px; --wc-rot: -160deg; }
.wc-purple::before  { filter: hue-rotate(105deg) saturate(1.1); top: -46px; left: -40px; --wc-rot: 24deg; }

/* quote that fills the 6th offerings cell on desktop (3+3 layout).
   hidden below the 3-up breakpoint so it never orphans a row. */
.offer-quote {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; margin: 0;
  padding: 40px 36px; border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 120% at 100% 0%, var(--accent-purple-soft) 0%, transparent 58%),
    linear-gradient(155deg, var(--paper) 0%, var(--paper-2) 100%);
  border: 1px solid var(--accent-purple-soft);
  box-shadow: var(--shadow-sm);
}
/* oversized opening quote mark, sitting behind the text */
.offer-quote::before {
  content: "\201C"; position: absolute; top: -14px; left: 18px; z-index: 0;
  font-family: var(--font-display); font-size: 120px; line-height: 1;
  color: var(--accent-purple); opacity: .14; pointer-events: none;
}
.offer-quote blockquote,
.offer-quote figcaption { position: relative; z-index: 1; }
.offer-quote blockquote {
  margin: 0; font-family: var(--font-display); font-style: italic;
  font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; color: var(--ink);
}
.offer-quote figcaption {
  margin-top: 18px; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
}
.offer-quote figcaption span { color: var(--ink-faint); }

/* ---- donate: how-to-give ------------------------------------------------- */
.donate-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  max-width: 980px; margin: 0 auto; align-items: start;
}
.donate-card { padding: 38px 34px; }
.donate-card h3 { margin: 0 0 10px; }
.donate-card .donate-card-sub { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 32px; }
.donate-actions { display: flex; flex-direction: column; gap: 12px; }
.donate-actions .btn { width: 100%; justify-content: space-between; }
/* bank-detail definition list — mono values read as copyable data */
.donate-bank { margin: 0; display: grid; gap: 16px; }
.donate-bank > div { display: grid; gap: 3px; }
.donate-bank dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin: 0; }
.donate-bank dd { margin: 0; font-family: var(--font-mono); font-size: 15px; line-height: 1.5; color: var(--ink); }
.donate-help { max-width: 980px; margin: 26px auto 0; text-align: center; font-size: 15.5px; color: var(--ink-soft); }

.card-row { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }

/* flagship card */
.flagship {
  position: relative; border-radius: var(--radius-xl); overflow: hidden; color: #fff;
  background: var(--brand-deep); box-shadow: var(--shadow-lg);
}
.flagship-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .9; }
.flagship-scrim { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(30,24,46,.92) 0%, rgba(30,24,46,.7) 46%, rgba(30,24,46,.28) 100%); }
.flagship-inner { position: relative; padding: clamp(40px, 6vw, 72px); max-width: 640px; }
.flagship .eyebrow { color: rgba(255,255,255,.78); }
.flagship h2, .flagship h3 { color: #fff; margin: 0 0 18px; font-size: clamp(30px, 4vw, 50px); line-height: 1.06; }
.flagship p { color: rgba(255,255,255,.88); font-size: 17px; line-height: 1.65; margin: 0 0 28px; }
.flagship .date-tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--spectrum-gold); margin-bottom: 14px; display: inline-block; }

/* icon feature row (alternating) */
.feature {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center;
}
.feature.flip .feature-media { order: 2; }
.feature-media { position: relative; }
.feature-media img { width: 100%; border-radius: var(--radius-lg); }
.feature-media.plain img { border-radius: 0; box-shadow: none; }

/* ============================================================================
   EDITORIAL BLOCKS / LISTS
   ============================================================================ */
/* belief / value blocks stacked */
.blocks { display: grid; gap: clamp(28px, 4vw, 44px); }
.block { display: grid; grid-template-columns: 220px 1fr; gap: clamp(20px, 4vw, 56px); align-items: baseline; padding-top: clamp(28px,4vw,44px); border-top: 1px solid var(--line); }
.block:first-child { border-top: none; padding-top: 0; }
.block h3 { margin: 0; font-size: clamp(24px, 2.4vw, 34px); }
.block .block-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--brand-ink); margin-bottom: 8px; }
.block .prose { max-width: 620px; }

/* the four moves / numbered steps */
.steps { display: grid; gap: 2px; counter-reset: step; }
.step {
  display: grid; grid-template-columns: 72px 1fr 1fr; gap: 24px; align-items: start;
  padding: 28px 4px; border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step-n { font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; color: var(--ink-ghost); padding-top: 9px; }
.step h4 { margin: 0 0 6px; }
.step h4 em { color: var(--brand-ink); font-style: normal; }
.step p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.step-isnot { padding-top: 2px; }
.step-isnot .isnot-label {
  display: inline-block; margin-bottom: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-ghost);
}
.step-isnot p { color: var(--ink-ghost); }

/* scannable check list */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.checklist li { position: relative; padding-left: 38px; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--accent-magenta-soft);
  background-image: url("../assets/leaf-tick.svg"); background-size: 13px; background-repeat: no-repeat; background-position: center;
}
.checklist.cols { grid-template-columns: repeat(2, 1fr); gap: 16px 40px; }
.checklist strong { color: var(--ink); font-weight: 500; }

/* simple dot list */
.dotlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.dotlist li { position: relative; padding-left: 26px; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.dotlist li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }

/* pull-quote / testimonial */
.quote-block { text-align: center; max-width: 920px; margin: 0 auto; }
.quote-mark { font-family: var(--font-display); font-style: italic; font-size: 120px; line-height: 0; color: var(--accent-magenta); opacity: .4; height: 52px; display: block; }
.quote {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(27px, 4vw, 50px); line-height: 1.14; letter-spacing: -.01em; color: var(--ink); margin: 0; text-wrap: balance;
}
.quote-attr { font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); margin-top: 26px; }
.quote-attr span { display: block; margin-top: 6px; color: var(--ink-faint); }
.quote-dots { display: flex; gap: 9px; justify-content: center; margin-top: 24px; }
.quote-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; background: var(--line-strong); cursor: pointer; padding: 0; transition: background .2s, transform .2s; }
.quote-dots button.on { background: var(--brand); transform: scale(1.25); }

/* two testimonial cards */
.testi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.testi { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px 34px; box-shadow: var(--shadow-sm); }
.testi p { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(20px, 2vw, 25px); line-height: 1.32; color: var(--ink); margin: 0 0 20px; }
.testi .who { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-ink); }

/* ============================================================================
   FORMS (shared components)
   ============================================================================ */
.form-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md); padding: clamp(32px, 5vw, 52px);
}
/* keep the form card's own dark text/colors when it floats on a .band painting */
.band .form-card { color: var(--ink); }
.band .form-card .eyebrow-brand { color: var(--brand-ink); }
.band .form-card h2 { color: var(--ink); }
.band .form-card .lede { color: var(--ink-soft); }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.input, textarea.input {
  font-family: var(--font-body); font-size: 16px; font-weight: 300; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  padding: 14px 16px; outline: none; width: 100%; transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--ink-ghost); }
.input:focus, textarea.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--accent-magenta-soft); }
textarea.input { resize: vertical; min-height: 130px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* interest checkboxes */
.checks { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; }
.check {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 9px 16px 9px 13px;
  transition: background .15s, border-color .15s;
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; }
.check .box svg { width: 12px; height: 12px; opacity: 0; transition: opacity .12s; color: #fff; }
.check input:checked + .box { background: var(--brand); border-color: var(--brand); }
.check input:checked + .box svg { opacity: 1; }
.check:hover { border-color: var(--ink-faint); }
.check:has(input:checked) { background: var(--accent-magenta-soft); border-color: var(--brand); }

.form-msg { font-family: var(--font-display); font-style: italic; font-size: clamp(22px, 2.4vw, 30px); color: var(--ink); line-height: 1.3; }
.form-note { font-size: 13.5px; color: var(--ink-faint); margin: 14px 0 0; }
.form-error { color: var(--danger, #b00020); }

/* Success confirmation shown in place of a submitted form. */
.form-msg, .band-thanks { display: flex; align-items: center; gap: 12px; }
.form-msg-check { flex: none; width: 1.1em; height: 1.1em; color: var(--brand); }
.band-thanks .form-msg-check { color: #fff; }
.form-msg-enter { opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.form-msg-enter.is-shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .form-msg-enter { transition: none; transform: none; opacity: 1; }
}

/* dark inset form band (notify / newsletter on painting) */
.band { position: relative; overflow: hidden; color: #fff; }
.band-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }

/* bleed variant: the torn-edge image keeps its top intact and overflows
   upward into the previous section instead of being cropped; no scrim
   (the artwork is already dark enough behind white text) */
.band-bleed { overflow: visible; }
.band-bleed .band-bg {
  inset: -28px 0 0; background-size: cover;
  background-position: top center; background-repeat: no-repeat;
}
/* gapped variant (home newsletter): inset the painting top & bottom so the
   section's padding shows as clean paper gaps above and below the band.
   Stretch (not cover) so both torn edges of the frame stay visible — on wide
   desktop, cover would crop the bottom torn edge off. */
.band-gapped .band-bg {
  top: clamp(64px, 8vw, 104px); bottom: clamp(64px, 8vw, 104px);
  background-size: 100% 100%;
}
.band-scrim { position: absolute; inset: 0; }
.band-inner { position: relative; max-width: 640px; margin: 0 auto; padding: clamp(64px, 8vw, 104px) 28px; text-align: center; }
.band .eyebrow { color: rgba(255,255,255,.72); }
.band h2 { color: #fff; margin: 0 0 16px; }
.band .lede { color: rgba(255,255,255,.86); margin: 0 auto 30px; max-width: 480px; }
.band-form { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; max-width: 540px; margin: 0 auto; }
.band-form .input { flex: 1; min-width: 200px; background: rgba(255,255,255,.96); border-color: transparent; }
.band-form .input:focus { box-shadow: 0 0 0 3px rgba(255,255,255,.4); }
.band-form .btn { flex: none; }
.band-thanks { font-family: var(--font-display); font-style: italic; font-size: clamp(24px,3vw,32px); color: #fff; }

/* compact notify/newsletter card on paper */
.signup { max-width: 620px; }
.signup.center { margin: 0 auto; }

/* ============================================================================
   BLOG
   ============================================================================ */
.blog-toolbar { display: flex; flex-direction: column; gap: 22px; margin-bottom: 44px; }
.search { position: relative; max-width: 460px; }
.search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-faint); }
.search .input { padding-left: 46px; border-radius: var(--radius-pill); background: var(--white); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--line-strong); background: var(--white); color: var(--ink-soft);
  padding: 8px 15px; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; transition: all .15s;
}
.chip:hover { border-color: var(--ink-faint); color: var(--ink); }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.post { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s; text-decoration: none; color: inherit; }
.post:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); color: inherit; }
.post-img { aspect-ratio: 16/10; background-size: cover; background-position: center; position: relative; }
.post-cat { position: absolute; left: 14px; top: 14px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; background: rgba(251,248,243,.92); color: var(--brand-ink); padding: 5px 10px; border-radius: var(--radius-pill); }
.post-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.post-body h3 { font-size: clamp(20px, 1.7vw, 25px); margin: 0 0 10px; line-height: 1.12; }
.post-body p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 18px; }
.post-meta { margin-top: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); display: flex; gap: 10px; }
.post-meta span { color: var(--ink-soft); }
.no-results { text-align: center; color: var(--ink-faint); font-size: 18px; padding: 40px 0; grid-column: 1 / -1; }

/* ============================================================================
   FREE CONTENT (video grid)
   ============================================================================ */
.video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.video-card { display: block; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
a.video-card { color: inherit; text-decoration: none; transition: box-shadow .2s, transform .2s; }
a.video-card:hover { box-shadow: var(--shadow-md, var(--shadow-sm)); transform: translateY(-2px); }
a.video-card .video-body h3 { color: inherit; }
.video-frame { aspect-ratio: 16/9; background: var(--brand-deep); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.video-frame .vbg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .5; }
.video-frame .vbg-thumb { opacity: .9; transition: opacity .2s; }
.video-card:hover .vbg-thumb { opacity: 1; }
.video-frame .play { position: relative; width: 72px; height: 72px; cursor: pointer; transition: transform .2s; }
.video-frame:hover .play { transform: scale(1.08); }
.video-frame .ph-label { position: absolute; bottom: 14px; left: 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.video-body { padding: 24px 26px 28px; }
.video-body h3 { margin: 0 0 8px; font-size: clamp(21px, 1.8vw, 26px); }
.video-body p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.video-body .ph { color: var(--ink-ghost); font-style: italic; }

/* ============================================================================
   GRASSROOTS MARKET (product grid stub)
   ============================================================================ */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.product { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .3s, box-shadow .3s; }
.product:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.product-img { aspect-ratio: 4/3; background: var(--paper-2); display: flex; align-items: center; justify-content: center; }
.product-img .ph { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-ghost); }
.product-body { padding: 20px 20px 22px; }
.product-type { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-ink); margin-bottom: 8px; }
.product-body h4 { margin: 0 0 6px; font-size: 21px; }
.product-body p { font-size: 14px; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.5; }
a.product { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
a.product .product-body { display: flex; flex-direction: column; flex: 1; }
a.product .tlink { margin-top: auto; }
.product-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* product detail page */
.product-detail { display: grid; grid-template-columns: minmax(0, 460px) 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.product-figure { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--paper-2); }
.product-figure img { width: 100%; height: auto; display: block; }
.product-figure .ph { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-ghost); }
.product-detail .creator { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 18px; }
.product-price { font-family: var(--font-display); font-size: 30px; color: var(--ink); margin: 26px 0 22px; }
.product-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.product-detail .back-link { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 760px) {
  .product-detail { grid-template-columns: 1fr; gap: 28px; }
  .product-figure { max-width: 420px; }
}

/* grants gallery */
.tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.tile { display: flex; align-items: center; gap: 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 18px 14px 14px; box-shadow: var(--shadow-sm); }
.tile-img { width: 76px; height: 76px; flex: none; border-radius: var(--radius-sm); object-fit: cover; background: var(--paper-2); }
.tile-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.tile-body { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tile h4 { margin: 0 0 2px; font-size: 21px; }
.tile .place { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }

/* ============================================================================
   FESTIVALS LIBRARY
   ============================================================================ */
.festival { border-top: 1px solid var(--line); padding: 8px 0; }
.festival:last-child { border-bottom: 1px solid var(--line); }
.festival-head { width: 100%; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 4px; text-align: left; }
.festival-head h3 { margin: 0; }
.festival-head .date { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-ink); margin-top: 6px; display: block; }
.festival-head .caret { font-family: var(--font-body); font-weight: 300; font-size: 28px; color: var(--brand-ink); transition: transform .25s; }
.festival.is-open .festival-head .caret { transform: rotate(45deg); }
.festival-panel { max-height: 0; overflow: hidden; transition: max-height .5s ease; }
/* panels can hold 20+ sessions, each expandable — keep the cap generous so nothing clips */
.festival.is-open .festival-panel { max-height: 24000px; }
.session { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; padding: 18px 4px; border-top: 1px solid var(--line); }
.session-face { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--paper-2); margin-top: 2px; }
.session-body { min-width: 0; }
.session h5 { font-family: var(--font-display); font-weight: 500; font-size: 20px; margin: 0; color: var(--ink); }
.session .by { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-top: 2px; }
.session-desc { font-size: 15px; color: var(--ink-soft); margin: 6px 0 0; line-height: 1.55; }
.session-desc-rest { display: none; }
.session-desc[aria-expanded="true"] .session-desc-rest { display: inline; }
.readmore-toggle { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-ink); background: none; border: 0; padding: 0; margin-left: 6px; cursor: pointer; white-space: nowrap; }
.readmore-toggle:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .session { grid-template-columns: 44px 1fr; gap: 12px; }
  .session-face { width: 44px; height: 44px; }
}

/* ============================================================================
   CONTACT
   ============================================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 6vw, 72px); align-items: start; }
.contact-aside .mail { font-family: var(--font-display); font-size: clamp(26px, 3vw, 38px); color: var(--brand-ink); display: inline-block; margin: 4px 0 0; }
.contact-aside .mail:hover { color: var(--brand); }
.social-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.social-pill { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 10px 18px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); transition: all .15s; }
.social-pill:hover { border-color: var(--brand); color: var(--brand-ink); transform: translateY(-2px); }
.social-pill svg { width: 16px; height: 16px; }

/* divider note (quiet archive line etc) */
.quiet-note { text-align: center; font-size: 15px; color: var(--ink-faint); margin: 0; }
.quiet-note a { color: var(--brand-ink); }

/* CTA strip (paper) */
.ctastrip { text-align: center; }
.ctastrip h2 { margin: 0 0 12px; }
.ctastrip .lede { margin: 0 auto 30px; max-width: 540px; }
.ctastrip .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* legal / prose pages */
.legal { padding: 150px 0 100px; }
.legal h1 { margin: 0 0 8px; }
.legal .updated { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 40px; }
.legal h2 { font-size: clamp(26px, 2.4vw, 34px); margin: 40px 0 14px; }
.legal h3 { font-size: 22px; margin: 28px 0 10px; }
.legal p, .legal li { font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
.legal .placeholder-block { background: var(--paper-2); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); padding: 22px 24px; color: var(--ink-faint); font-style: italic; margin: 18px 0; }
.legal ul, .legal ol { margin: 14px 0 18px; padding-left: 22px; }
.legal li { margin: 6px 0; }
.legal .legal-lead { font-size: 18px; color: var(--ink); margin-bottom: 28px; }
.legal address { font-style: normal; line-height: 1.8; color: var(--ink-soft); margin: 8px 0 18px; }
/* REVIEW FLAG — yellow callout marking text that needs the client's confirmation.
   Remove these (and resolve the question inside) before going live. */
.legal .review-flag { display: block; background: #fff7d6; border: 1px solid #e7c200; border-left: 4px solid #e7c200; border-radius: var(--radius-sm); padding: 14px 16px; margin: 16px 0; font-size: 14px; line-height: 1.55; color: #5c4a00; }
.legal .review-flag strong { color: #4a3b00; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }

/* ============================================================================
   FOOTER
   ============================================================================ */
.footer { background: var(--brand-deep); color: rgba(255,255,255,.7); }
.footer-top { max-width: 1320px; margin: 0 auto; padding: 80px 28px 52px; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 48px; }
.footer-brand img { height: 92px; width: auto; }
.footer-tag { font-family: var(--font-display); font-size: 21px; line-height: 1.32; color: rgba(255,255,255,.84); margin: 22px 0 0; }
.footer-tag em { font-style: italic; }
.footer-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 16px; }
.footer-col a { display: block; font-family: var(--font-body); font-size: 15px; color: rgba(255,255,255,.78); padding: 6px 0; }
.footer-col a:hover { color: #fff; }
.footer-news p { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.62); margin: 0 0 16px; }
.footer-news form { display: flex; flex-direction: column; gap: 10px; }
.footer-news .input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }
.footer-news .input::placeholder { color: rgba(255,255,255,.45); }
.footer-news .input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(224,82,158,.25); }
.footer-news .btn { width: 100%; justify-content: center; }
.footer-news .thanks { font-family: var(--font-display); font-style: italic; font-size: 18px; color: rgba(255,255,255,.9); }
.footer-social { display: flex; gap: 14px; margin-top: 18px; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.8); }
.footer-social a:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); }
.footer-social svg { width: 17px; height: 17px; }
.footer-bottom { max-width: 1320px; margin: 0 auto; padding: 22px 28px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.footer-legal a, .footer-copy { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.footer-legal a:hover { color: #fff; }

/* ============================================================================
   REVEAL ANIMATION
   ============================================================================ */
/* Base reveal: an opacity-only fade. This is motion-safe (no movement), so it
   runs for everyone — including users who ask to reduce motion.
   Only hide reveal elements when JS is present to bring them back in. Without
   the .js guard, a slow/late site.js leaves content invisible and it pops in
   — the "blink". Scoping opacity:0 to .js means no-JS (and the pre-JS first
   paint) shows content normally; the fade plays once site.js adds .in. */
.js .reveal { opacity: 0; transition: opacity .7s ease; }
.js .reveal.in { opacity: 1; }
.js .reveal.d1 { transition-delay: .08s; }
.js .reveal.d2 { transition-delay: .16s; }
.js .reveal.d3 { transition-delay: .24s; }
.js .reveal.reveal-rise { transition: opacity .9s ease; }

@media (prefers-reduced-motion: no-preference) {
  /* Layer the movement on top of the fade, only when motion is welcome. */
  .js .reveal { transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
  .js .reveal.in { transform: none; }

  /* richer entrance — a longer fade with a gentle rise + scale, for hero cards */
  .js .reveal.reveal-rise { transform: translateY(40px) scale(.985); transition: opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1); }
  .js .reveal.reveal-rise.in { transform: none; }
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 960px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }
  /* let the home hero heading wrap naturally once it shrinks */
  .hero h1 .h1-break { display: none; }
  .grid-3, .grid-4, .grid-offer { grid-template-columns: repeat(2, 1fr); }
  /* the offerings quote only fills the 6th cell in the desktop 3-up layout */
  .offer-quote { display: none; }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .feature { grid-template-columns: 1fr; gap: 32px; }
  .feature.flip .feature-media { order: 0; }
  .block { grid-template-columns: 1fr; gap: 8px; }
  .contact-grid { grid-template-columns: 1fr; }
  .donate-grid { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: 1fr; }
  .checklist.cols { grid-template-columns: 1fr; }
  .festival-stats { grid-template-columns: repeat(2, 1fr); }
  .faces-grid { grid-template-columns: repeat(4, 1fr); gap: 22px 16px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .hero-giraffe { height: 46%; right: -4%; opacity: .9; }
  .hero-fliers { width: 70%; top: 8%; }
  .fest-hero-fliers { width: 56%; top: 7%; }
  .fest-hero-bird { width: 24%; top: 7%; }
  .fest-hero-forest { height: 28%; max-height: 240px; }
}
@media (max-width: 620px) {
  .wrap, .wrap-narrow, .wrap-wide { padding-left: 20px; padding-right: 20px; }
  .grid-2, .grid-3, .grid-4, .grid-offer { grid-template-columns: 1fr; }
  .post-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .tile-grid { grid-template-columns: 1fr; }
  .faces-grid { grid-template-columns: repeat(3, 1fr); }
  /* festivals hero: keep the birds in the sky above the text, ground the
     forest small in the corner so it never crowds the heading on phones */
  .fest-hero-bird { width: 38%; top: 3%; left: 0; transform: scaleX(-1); opacity: .8; }
  .fest-hero-fliers { width: 78%; top: 9%; right: -8%; opacity: .85; }
  .fest-hero-forest { height: 20%; max-height: 180px; opacity: .8; }
  /* keep the hero eyebrow on one line on phones — the wide tracking otherwise
     wraps "OFFERING" directly under "PROGRAMS" and reads as a stack */
  .fest-hero .eyebrow { font-size: 11.5px; letter-spacing: .16em; white-space: nowrap; }
  .field-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { justify-content: flex-start; }
  .step { grid-template-columns: 48px 1fr; gap: 14px 14px; }
  .step-isnot { grid-column: 2; padding-top: 0; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; white-space: normal; text-align: center; padding-left: 20px; padding-right: 20px; }
  /* full-width textlink on mobile: match the primary button's box exactly
     (font, line-height, letter-spacing, padding) so the two pills are the
     same size; break the label after "?", center it, pin the arrow right */
  .hero-textlink { font-size: 13px; line-height: 1; letter-spacing: .18em; padding: 14px 20px; }
  .hero-textlink .htl-label { flex: 1; text-align: center; }
  .hero-textlink .htl-break { display: inline; }
  .hero-textlink .ar { margin-left: 0; }
  /* long-labelled buttons inside a form card must wrap to stay within it */
  .form-card .btn { max-width: 100%; white-space: normal; text-align: center; padding-left: 20px; padding-right: 20px; }
  .band-form { flex-direction: column; }
  .band-form .btn { width: 100%; justify-content: center; }
  .hero-note { right: 12px; bottom: 12px; font-size: 10.5px; padding: 6px 12px; }
  /* tame the header decorations on mobile — they're sized for the wide
     desktop layout and otherwise overlap the heading/body text. Shrink and
     sit them against the right margin below the copy, faint and fully
     visible (extra bottom padding keeps them from being clipped). only
     headers with a BOTTOM-pinned deco need the extra room — the tall side
     strip (.thead-deco-tall) sits beside the heading, so giving it 150px
     just opens an empty gap before the next section. */
  .thead:has(.thead-deco:not(.thead-deco-tall)) { padding-bottom: 150px; }
  .thead-deco {
    width: 140px !important; right: 0 !important;
    top: auto !important; bottom: 12px !important;
    opacity: .45 !important; transform: none !important; z-index: 0 !important;
  }
  /* tall vertical strips (e.g. the side-flowers): pin to the top-right so
     they run alongside the heading instead of stretching over the body copy */
  .thead-deco-tall {
    width: 96px !important; right: 0 !important;
    top: 40px !important; bottom: auto !important; opacity: .4 !important;
  }
  .thead .wrap { position: relative; z-index: 1; }
  /* nature accents: shrink, pin to a corner, and fade so they sit clearly
     behind the copy without competing with it. Snail tucks into the bottom
     corner of its (short) intro section; lizard stays low-left under the
     cards where there's whitespace. */
  .nature-deco-snail {
    width: 78px !important; opacity: .3 !important;
    top: auto !important; bottom: -6px !important; transform: none !important;
    right: 4px !important;
  }
  .nature-deco-lizard {
    width: 96px !important; opacity: .35 !important;
    bottom: 10px !important; left: 4px !important;
  }
  .nature-deco-stones {
    width: 76px !important; opacity: .3 !important;
    bottom: 8px !important; left: 4px !important;
  }
}

/* ---- inline glossary term (e.g. EcoME) -----------------------------------
   An inline term with a dotted underline. Click or tap to reveal a small
   description card anchored beneath it. The toggle is wired in js/site.js
   ([data-glossary]); the card shows when the term is aria-expanded. Uses
   inline spans (not <details>) so it flows inside a <p> without breaking. */
.glossary {
  position: relative;
  display: inline;
}
.glossary-term {
  font: inherit;
  color: inherit;
  /* inline (not the UA default inline-block) so a multi-word term flows and
     wraps exactly like the surrounding text — inline-block treats it as one
     unbreakable box and adds a baseline gap that misaligns it in a heading. */
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-decoration: underline dotted var(--brand-ink);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.glossary-term:hover,
.glossary-term[aria-expanded="true"] { color: var(--brand-ink); }
.glossary-card {
  display: none;
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  /* anchor to the term's right edge so the card opens leftward and stays
     on-screen even when the term sits near the right of a narrow column */
  right: 0;
  left: auto;
  width: min(340px, 86vw);
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--paper-3);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(42, 34, 51, .14);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  text-align: left;
  color: var(--ink-soft);
}
.glossary-card {
  font-style: normal;
  font-family: var(--font-body, inherit);
  /* don't inherit the negative display-type tracking of a heading the term
     may sit in — that squeezes the card's body copy */
  letter-spacing: normal;
  word-spacing: normal;
}
.glossary-term[aria-expanded="true"] + .glossary-card { display: block; }

/* `glossary-modal` is for long cards inside a section that clips its overflow
   (e.g. the Mission header, which has overflow:hidden to contain its bleed
   decorations). An absolutely-positioned card gets cut off at the section's
   edge, so lift it out with fixed positioning and center it — it escapes the
   clip and stays fully on-screen regardless of where the term sits. */
.glossary-modal .glossary-term[aria-expanded="true"] + .glossary-card {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(420px, 90vw);
  max-height: 80vh;
  overflow-y: auto;
}

/* On small screens the term can wrap anywhere on the line, so anchoring the
   card to the term risks running off the right edge. Pin it to the bottom of
   the viewport as a full-width sheet so it always stays fully on-screen. */
@media (max-width: 620px) {
  .glossary-term[aria-expanded="true"] + .glossary-card {
    position: fixed;
    top: auto;
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
    box-shadow: 0 -8px 30px rgba(42, 34, 51, .18);
  }
}

/* ---- larger section labels (opt-in) --------------------------------------
   A few section labels on the Mission page read too small. Add `eyebrow-lg`
   to an .eyebrow, or `block-label-lg` to a .block-label, to bump it ~60% on
   both mobile and desktop. Opt-in (per-label) so other eyebrows keep their
   size. Letter-spacing uses em units, so it scales with the font automatically. */
.eyebrow.eyebrow-lg { font-size: 19px; }
.block .block-label.block-label-lg { font-size: 22px; }