/* ==========================================================================
   LEDGEWAY SANGHA — core stylesheet
   Design tokens live at the top. Change a value here and it propagates
   everywhere — colors, type, spacing are never hard-coded downstream.
   ========================================================================== */

:root {
  /* ---- color: deep water near-black, warm off-white text, seafoam accent ---- */
  --color-bg: #09090c;
  --color-bg-raised: #0e1013;
  --color-text: #ede8df;
  --color-text-muted: rgba(237, 232, 223, 0.68);
  --color-text-faint: rgba(237, 232, 223, 0.42);
  --color-accent: #8fd6c4;
  --color-accent-dim: #5f9a8d;
  --color-hairline: rgba(237, 232, 223, 0.14);
  --color-overlay-scrim: rgba(9, 9, 12, 0.55);

  /* ---- type ---- */
  --font-display: "Cormorant Garamond", "Iowan Old Style", serif;
  --font-body: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- layout ---- */
  --content-width: 46rem;
  --content-width-wide: 64rem;
  --nav-height: 5rem;
  --section-pad-y: clamp(4.5rem, 10vw, 9rem);
  --edge-pad-x: clamp(1.25rem, 5vw, 3rem);

  /* ---- motion ---- */
  --ease-surface: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-reveal: 1.1s;
}

/* ---------------------------------------------------------------------- */
/* Reset                                                                   */
/* ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* Any "Knowing Love" mention outside the poem itself links back to it —
   keeps the two words together on one line. No hover/focus underline by
   design; keyboard focus is still visible via the global :focus-visible
   outline below. */
.kl-link {
  white-space: nowrap;
}
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure { margin: 0; }
button { font-family: inherit; cursor: pointer; }

/* Visible keyboard focus everywhere — never remove this without replacing it */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: 0;
  transform: translateY(calc(-100% - 1rem)); /* fully clear of the viewport no matter its rendered height */
  background: var(--color-bg-raised);
  color: var(--color-text);
  padding: 0.75rem 1.25rem;
  border-radius: 0.25rem;
  z-index: 1000;
  transition: transform 0.2s var(--ease-surface);
}
.skip-link:focus { transform: translateY(0); }

/* ---------------------------------------------------------------------- */
/* Background video layer — fixed behind everything, own stacking context */
/* ---------------------------------------------------------------------- */
.bg-video-layer {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.bg-video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}
.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.bg-video.is-active {
  opacity: 1;
}
/* Scrim keeps text legible without fighting the video's own contrast pass */
.bg-video-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(9, 9, 12, 0.35) 0%,
    rgba(9, 9, 12, 0.15) 30%,
    rgba(9, 9, 12, 0.35) 70%,
    rgba(9, 9, 12, 0.75) 100%
  );
  z-index: -1;
}

/* ---------------------------------------------------------------------- */
/* Nav                                                                     */
/* ---------------------------------------------------------------------- */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  padding: 0 var(--edge-pad-x);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s var(--ease-surface), border-color 0.4s var(--ease-surface);
}
.site-nav.is-scrolled {
  background: rgba(9, 9, 12, 0.78);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--color-hairline);
}
.site-nav__inner {
  width: 100%;
  max-width: var(--content-width-wide);
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  /* Every item in the row — logo, each link, donate — shares this same
     fluid gap, so the responsive "give" isn't concentrated at the two
     outer edges (the old space-between approach let those two gaps
     absorb all the slack uncontrolled). 2.25rem at comfortable widths,
     easing to 1rem by ~850px, reaching the floor *before* the pinch
     point rather than still easing down when it matters. */
  gap: clamp(1rem, -6.65rem + 13.9vw, 2.25rem);
  overflow: hidden; /* safety net during the instant before JS measures/settles —
    lifted by .is-nav-ready (set in initResponsiveNav's first evaluate() call,
    which runs synchronously on load) so it doesn't clip the Media dropdown */
}
.site-nav.is-nav-ready .site-nav__inner {
  overflow: visible;
}
.site-nav__logo {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.site-nav__link {
  flex-shrink: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color 0.25s ease;
  position: relative;
  white-space: nowrap;
}
.site-nav__link--push {
  /* Moves the row's one elastic gap to right after the logo, instead of
     right before Donate — so the wordmark stands alone on the left and
     the whole Events-through-Donate cluster reads as one right-aligned
     group. Everything from here on still shares the uniform gap below. */
  margin-left: auto;
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width 0.3s var(--ease-surface);
}
.site-nav__link:hover,
.site-nav__link:focus-visible,
.site-nav__link[aria-current="page"] {
  color: var(--color-text);
}
.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link[aria-current="page"]::after {
  width: 100%;
}
.site-nav__donate {
  flex-shrink: 0;
  border: 1px solid var(--color-accent-dim);
  color: var(--color-accent);
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.site-nav__donate:hover,
.site-nav__donate:focus-visible {
  background: var(--color-accent);
  color: var(--color-bg);
}

.site-nav__toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: none;
  color: var(--color-text);
  width: 2.25rem;
  height: 2.25rem;
  position: relative;
  z-index: 501;
}
.site-nav__toggle span,
.site-nav__toggle span::before,
.site-nav__toggle span::after {
  content: "";
  position: absolute;
  left: 0.4rem;
  right: 0.4rem;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s var(--ease-surface), opacity 0.2s ease;
}
.site-nav__toggle span { top: 50%; transform: translateY(-50%); }
.site-nav__toggle span::before { top: -0.5rem; }
.site-nav__toggle span::after { top: 0.5rem; }
.site-nav__toggle[aria-expanded="true"] span { background: transparent; }
.site-nav__toggle[aria-expanded="true"] span::before { transform: rotate(45deg) translate(0.35rem, 0.35rem); }
.site-nav__toggle[aria-expanded="true"] span::after { transform: rotate(-45deg) translate(0.35rem, -0.35rem); }

.site-nav__mobile-panel {
  display: none;
}

/* Compact/hamburger mode is toggled by JS (initResponsiveNav in main.js)
   based on whether the real nav content fits on one line — not a guessed
   pixel breakpoint. See main.js for the measurement logic. */
.site-nav.is-compact .site-nav__inner .site-nav__link { display: none; }
.site-nav.is-compact .site-nav__inner > .site-nav__donate { display: none; } /* lives in the popup panel instead */
.site-nav.is-compact .site-nav__toggle { display: block; }
/* .site-nav__mobile-panel is a sibling of <nav> in the DOM (see the
   comment in partials/nav.html), not a descendant, so its compact/open
   state is driven by classes JS toggles on the panel itself rather than
   by a `.site-nav.is-compact` ancestor selector. It needs its own z-index
   here since it can no longer inherit stacking from being inside <nav>. */
.site-nav__mobile-panel.is-compact {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  z-index: 500;
  /* No bottom/height set — the panel sizes to its own content instead of
     stretching to fill the screen, so part of the page stays visible
     (and scroll-locked but visible) below the menu. */
  /* Opacity alone (no blur) needs to be high enough to hide content on its
     own — backdrop-filter isn't supported in every rendering context, so
     this is the fallback line of defense, not just a tint under the blur. */
  background: rgba(9, 9, 12, 0.78);
  backdrop-filter: blur(40px) saturate(150%);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  will-change: transform, backdrop-filter;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.35);
  border-radius: 0 0 1rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 1.5rem;
  padding: 2.5rem 1.5rem 3rem;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-surface), transform 0.3s var(--ease-surface);
}
.site-nav__mobile-panel.is-compact.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.site-nav__mobile-panel.is-compact .site-nav__link {
  /* Same family/case/letter-spacing/hover treatment as the desktop
     links (inherited from .site-nav__link) — just sized up for touch
     and kept at full brightness rather than the desktop muted default. */
  font-size: 1.05rem;
  color: var(--color-text);
}

/* Desktop "Media" hover submenu (Images / Podcasts / Articles). Pure-CSS
   :hover/:focus-within reveal — initNavSubmenus() in main.js only adds
   aria-expanded bookkeeping on top, so the menu still works if JS fails
   to attach. */
.site-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.site-nav.is-compact .site-nav__inner .site-nav__item { display: none; }
.site-nav__submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  margin-top: 0.85rem;
  min-width: 9rem;
  /* Matches .site-nav.is-scrolled exactly, so the dropdown reads as an
     extension of the header bar rather than a separately-styled popover. */
  background: rgba(9, 9, 12, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--color-hairline);
  border-radius: 0.6rem;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s var(--ease-surface);
}
/* Invisible hover bridge: the margin-top above creates a gap between the
   link and the submenu box. Without this, moving the mouse from "Media"
   down into the submenu crosses dead space, :hover drops, and the menu
   closes before the pointer arrives. This strip is always hit-testable
   (pointer-events: auto overrides the parent's pointer-events: none while
   closed) so the hover chain never breaks. */
.site-nav__submenu::before {
  content: "";
  position: absolute;
  top: -0.85rem;
  left: 0;
  right: 0;
  height: 0.85rem;
  pointer-events: auto;
}
.site-nav__item:hover .site-nav__submenu,
.site-nav__item:focus-within .site-nav__submenu {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.site-nav__submenu-link {
  padding: 0.55rem 0.9rem;
  border-radius: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.site-nav__submenu-link:hover,
.site-nav__submenu-link:focus-visible {
  color: var(--color-text);
  background: rgba(237, 232, 223, 0.07);
}

/* Mobile "Media" row — a caret expands an inline accordion of the same
   three links, since the hamburger panel has no hover to trigger a popout. */
.site-nav__mobile-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.site-nav__mobile-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.site-nav__mobile-caret {
  background: none;
  border: none;
  color: var(--color-text-muted);
  padding: 0.35rem;
  display: flex;
  cursor: pointer;
  transition: transform 0.25s var(--ease-surface), color 0.2s ease;
}
.site-nav__mobile-caret:hover,
.site-nav__mobile-caret:focus-visible {
  color: var(--color-text);
}
.site-nav__mobile-caret[aria-expanded="true"] {
  transform: rotate(180deg);
}
.site-nav__mobile-submenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition: max-height 0.3s var(--ease-surface), opacity 0.25s ease, margin-top 0.3s var(--ease-surface);
}
.site-nav__mobile-submenu.is-open {
  max-height: 12rem;
  opacity: 1;
  margin-top: 1rem;
}
.site-nav__mobile-submenu-link {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.site-nav__mobile-submenu-link:hover,
.site-nav__mobile-submenu-link:focus-visible {
  color: var(--color-text);
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--nav-height) + 2rem) var(--edge-pad-x) 4rem;
}
.hero__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 1.5rem;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  line-height: 1.05;
  max-width: 30ch;
}
@media (max-width: 640px) {
  /* On narrow phones, forcing the break after "further" can leave that
     first line wrapping again on its own — let the whole heading reflow
     naturally instead. */
  .hero__title br { display: none; }
}
.hero__subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  max-width: 42ch;
  margin-top: 1.75rem;
}
.hero__scroll-cue {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-faint);
}
.hero__scroll-cue span {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hero__scroll-cue svg { width: 14px; height: 22px; animation: scrollCueDrift 2.2s ease-in-out infinite; }
@keyframes scrollCueDrift {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* ---------------------------------------------------------------------- */
/* Section framework                                                       */
/* ---------------------------------------------------------------------- */
.section {
  position: relative;
  padding: var(--section-pad-y) var(--edge-pad-x);
}
.section__inner {
  max-width: var(--content-width);
  margin: 0 auto;
}
.section__inner--wide { max-width: var(--content-width-wide); }

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
  margin-bottom: 1.25rem;
}
h2.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 1.15;
  max-width: 20ch;
}
.pair h2.section-title {
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  max-width: 26ch;
}
.section-body {
  margin-top: 1.75rem;
  color: var(--color-text-muted);
  font-size: 1.05rem;
  line-height: 1.85;
}
.pair .section-body {
  font-size: 0.92rem;
  line-height: 1.7;
}
.section-body p + p { margin-top: 1.25rem; }
.section-body strong { color: var(--color-text); font-weight: 600; }

/* Ripple divider — the site's signature motif: a still line of water
   between sections, instead of a hairline rule. */
.ripple-divider {
  width: 100%;
  max-width: 22rem;
  height: 24px;
  margin: 0 auto;
  display: block;
  color: var(--color-accent-dim);
  opacity: 0.55;
}

/* ---------------------------------------------------------------------- */
/* Purpose / lede statement                                                */
/* ---------------------------------------------------------------------- */
.lede {
  text-align: center;
}
.lede .section__inner {
  max-width: 56rem;
}
.lede__statement {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.2vw, 2.35rem);
  line-height: 1.4;
  color: var(--color-text);
}
.lede__statement em {
  font-style: italic;
  color: var(--color-accent);
  white-space: nowrap; /* "Knowing Love" always stays on one line */
}

/* ---------------------------------------------------------------------- */
/* Two-column approach / image pairing                                    */
/* ---------------------------------------------------------------------- */
.pair {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.pair--reverse { direction: rtl; }
.pair--reverse > * { direction: ltr; }
.pair__media {
  position: relative;
  border-radius: 0.5rem;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.pair__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pair__media::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--color-hairline);
  border-radius: inherit;
}
@media (max-width: 860px) {
  .pair, .pair--reverse { grid-template-columns: 1fr; direction: ltr; }
  .pair__media { order: -1; aspect-ratio: 16 / 10; }
}

/* ---------------------------------------------------------------------- */
/* Event type blocks (Events page) — full-width panoramic banner instead  */
/* of the narrow portrait crop .pair__media uses, since these source      */
/* photos are wide/landscape and lose too much when force-cropped tall.   */
/* ---------------------------------------------------------------------- */
/* Needs the full h2.section-title.event-block__title selector (not just  */
/* .event-block__title) to out-specificity the base h2.section-title rule */
/* above, which caps width at 20ch — too narrow to fit these two titles   */
/* on one line at desktop widths.                                         */
h2.section-title.event-block__title {
  max-width: 28ch;
}
.event-block__body {
  max-width: 42rem;
}
.event-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0.5rem;
  overflow: hidden;
  margin-top: 2.5rem;
}
.event-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.event-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--color-hairline);
  border-radius: inherit;
}
.event-block__cta {
  margin-top: 2rem;
}
.event-calendar {
  margin-top: 2.5rem;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--color-accent-dim);
  background: rgba(14, 16, 19, 0.4);
}
.event-calendar iframe {
  display: block;
  width: 100%;
  border: none;
  /* Lenis's own CSS sets iframes to pointer-events:none while the page
     is mid-scroll (lenis.css: .lenis.lenis-scrolling iframe), so any
     scroll gesture that starts near this calendar passes through to the
     page underneath instead of scrolling the calendar itself. Override
     it for just these embeds so the gesture reaches Luma's own scroll. */
  pointer-events: auto !important;
}

.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-accent);
  font-size: 0.95rem;
  text-decoration: underline;
  text-decoration-color: var(--color-accent-dim);
  text-underline-offset: 0.25em;
  transition: color 0.2s ease;
}
.btn-link:hover, .btn-link:focus-visible {
  color: var(--color-text);
}

/* ---------------------------------------------------------------------- */
/* Retreat schedule popup — a page-level dialog, not the mobile nav       */
/* panel, but styled from the same frosted-glass family so the two read   */
/* as one visual language. Deliberately has no site nav of its own; the   */
/* close control is the only way out besides Escape/backdrop click.       */
/* ---------------------------------------------------------------------- */
.retreat-schedule {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem 1.5rem;
  overflow-y: auto;
}
.retreat-schedule.is-open {
  display: flex;
}
.retreat-schedule__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(9, 9, 12, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.retreat-schedule__panel {
  position: relative;
  width: 100%;
  max-width: 40rem;
  background: rgba(14, 16, 19, 0.96);
  border: 1px solid var(--color-hairline);
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.5);
  padding: 3rem clamp(1.5rem, 5vw, 3.5rem);
}
.retreat-schedule__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}
.retreat-schedule__close:hover, .retreat-schedule__close:focus-visible {
  color: var(--color-text);
}
.retreat-schedule__agenda {
  margin-top: 2rem;
  display: grid;
  gap: 0.85rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--color-hairline);
  border-radius: 0.6rem;
  background: rgba(9, 9, 12, 0.4);
}
.retreat-schedule__agenda > div {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 1rem;
}
.retreat-schedule__agenda dt {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.retreat-schedule__agenda dd {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.retreat-schedule__content h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  margin-top: 2rem;
}
.retreat-schedule__content .section-body {
  margin-top: 0.5rem;
}
@media (max-width: 560px) {
  .retreat-schedule__agenda > div { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* ---------------------------------------------------------------------- */
/* Media page — tab bar (Images / Podcasts / Articles) switches between   */
/* three [data-media-panel] sections via initMediaTabs() in main.js,      */
/* which mirrors the URL hash so the nav submenu's links land on the      */
/* right tab and the tab itself is shareable/bookmarkable.                */
/* ---------------------------------------------------------------------- */
.media-tabs {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}
.media-tabs__track {
  display: inline-flex;
  gap: 0.25rem;
  border: 1px solid var(--color-hairline);
  border-radius: 999px;
  padding: 0.3rem;
  background: rgba(9, 9, 12, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.media-tabs__btn {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.media-tabs__btn[aria-selected="true"] {
  background: var(--color-accent);
  color: #09090c;
  font-weight: 600;
}
.media-tabs__btn:hover:not([aria-selected="true"]) {
  color: var(--color-text);
}
.media-tabs__btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.media-panel:not([hidden]) {
  animation: media-panel-in 0.35s var(--ease-surface);
}
@keyframes media-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.media-empty {
  margin-top: 2.5rem;
  text-align: center;
  color: var(--color-text-faint);
  font-size: 0.92rem;
}

/* ---------------------------------------------------------------------- */
/* Gallery (Images tab) — photo grid, 3:2 to match the source photos      */
/* without cropping as hard as the 4:5 .pair__media slot.                 */
/* ---------------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: 2.5rem;
}
.gallery__item {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 0.5rem;
  overflow: hidden;
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--color-hairline);
  border-radius: inherit;
}
@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .gallery { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- */
/* Podcasts tab — square cover-art grid (podcast art is conventionally    */
/* 1:1), denser than the photo gallery since each item carries less       */
/* visual weight on its own.                                              */
/* ---------------------------------------------------------------------- */
.podcast-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: 2.5rem;
}
.podcast-card { display: block; color: inherit; }
.podcast-card__art {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--color-bg-raised);
}
.podcast-card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.podcast-card__art::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--color-hairline);
  border-radius: inherit;
}
.podcast-card__title {
  margin-top: 0.85rem;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--color-text);
  transition: color 0.2s ease;
}
.podcast-card__meta {
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--color-text-faint);
}
.podcast-card:hover .podcast-card__title,
.podcast-card:focus-visible .podcast-card__title {
  color: var(--color-accent);
}
@media (max-width: 900px) {
  .podcast-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .podcast-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------- */
/* Articles tab — a row list rather than a grid, since press mentions     */
/* often have no usable thumbnail; the thumbnail is optional per row and  */
/* a row with just a headline still reads fine (no image = no gap left    */
/* behind, .article-row__text simply takes the full row).                 */
/* ---------------------------------------------------------------------- */
.article-list {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
}
.article-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--color-hairline);
  color: inherit;
}
.article-row:first-child { padding-top: 0; }
.article-row:last-child { border-bottom: none; }
.article-row__thumb {
  flex-shrink: 0;
  width: 6rem;
  aspect-ratio: 3 / 2;
  border-radius: 0.35rem;
  overflow: hidden;
  background: var(--color-bg-raised);
}
.article-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-row__text { min-width: 0; }
.article-row__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--color-text);
  transition: color 0.2s ease;
}
.article-row__meta {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--color-text-faint);
}
.article-row:hover .article-row__title,
.article-row:focus-visible .article-row__title {
  color: var(--color-accent);
}
@media (max-width: 560px) {
  .article-row { gap: 1rem; }
  .article-row__thumb { width: 4.5rem; }
  .article-row__title { font-size: 1rem; }
}

/* ---------------------------------------------------------------------- */
/* Poem — the "surfacing" signature moment                                */
/* ---------------------------------------------------------------------- */
.poem {
  text-align: center;
  scroll-margin-top: var(--nav-height);
}
.poem__kicker {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-text-muted);
  font-size: clamp(1.4rem, 2.8vw, 1.85rem);
  margin-bottom: 2.5rem;
}
.poem__divider {
  margin-bottom: 2.5rem;
}
.poem__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  letter-spacing: 0.06em;
}
.poem__byline {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-top: 0.5rem;
}
.poem__stanza {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.7;
  color: var(--color-text);
  max-width: 46rem;
  margin: 2.75rem auto 0;
  filter: blur(6px);
  opacity: 0;
  transform: translateY(28px);
}
.poem__stanza.is-surfaced {
  filter: blur(0);
  opacity: 1;
  transform: translateY(0);
  transition:
    filter var(--dur-reveal) var(--ease-surface),
    opacity var(--dur-reveal) var(--ease-surface),
    transform var(--dur-reveal) var(--ease-surface);
}

/* ---------------------------------------------------------------------- */
/* Founder                                                                 */
/* ---------------------------------------------------------------------- */
.founder-hero {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  text-align: left;
}
.founder-hero__media {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 82.5%; /* ~25% larger than the previous 66% */
  border-radius: 0.75rem;
  overflow: hidden;
}
.founder-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.founder-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--color-hairline);
  border-radius: inherit;
}
.founder__name {
  font-family: var(--font-display);
  font-size: 2rem;
  margin-top: 1.5rem;
}
.founder__role {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-top: 0.4rem;
}
@media (max-width: 860px) {
  .founder-hero { grid-template-columns: 1fr; }
  .founder-hero__media { order: -1; aspect-ratio: 4 / 3; }
}

/* ---------------------------------------------------------------------- */
/* Mailing list / form components                                         */
/* ---------------------------------------------------------------------- */
.form-card {
  background: rgba(14, 16, 19, 0.55);
  border: 1px solid var(--color-hairline);
  border-radius: 0.75rem;
  padding: clamp(2rem, 5vw, 3.5rem);
  backdrop-filter: blur(6px);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.field label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.field input,
.field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-hairline);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.6rem 0.1rem;
  transition: border-color 0.25s ease;
}
.field input:focus,
.field textarea:focus {
  border-color: var(--color-accent);
  outline: none;
}
.field textarea { resize: vertical; min-height: 6rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border: 1px solid var(--color-accent);
  background: transparent;
  color: var(--color-accent);
  padding: 0.85rem 2rem;
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2rem;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.btn:hover, .btn:focus-visible {
  background: var(--color-accent);
  color: var(--color-bg);
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */
.site-footer {
  padding: 3.5rem var(--edge-pad-x) 3rem;
  text-align: center;
  border-top: 1px solid var(--color-hairline);
}
.site-footer__mark {
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.site-footer__legal {
  margin-top: 1rem;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--color-text-faint);
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------------- */
/* Scroll-reveal system                                                    */
/* Any element with data-reveal starts hidden/offset; main.js flips        */
/* .is-revealed via ScrollTrigger. Kept in CSS so it works even if JS is   */
/* slow to attach, and so prefers-reduced-motion can neutralize it in one  */
/* place.                                                                  */
/* ---------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.9s var(--ease-surface), transform 0.9s var(--ease-surface);
}
/* Once the reveal transition finishes, main.js adds this to drop the
   transform/transition entirely (rather than leaving them at inert
   identity values). A finished-but-still-declared `transform` keeps
   Safari treating the element as its own composited layer indefinitely,
   which makes it opt out of any backdrop-filter blur placed over it
   later (e.g. the mobile nav panel) — it renders sharp through the glass
   instead of blurring like everything else behind it. */
[data-reveal].reveal-settled {
  transform: none;
  transition: none;
}
[data-reveal-group] > * { transition-delay: calc(var(--reveal-index, 0) * 0.12s); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], .poem__stanza {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .hero__scroll-cue svg { animation: none; }
  .media-panel { animation: none !important; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------- */
/* Stub page (Events / Contact / Registration placeholders)               */
/* ---------------------------------------------------------------------- */
.stub {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--edge-pad-x);
}
.stub__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
}
.stub__body {
  margin-top: 1.25rem;
  color: var(--color-text-muted);
  max-width: 32rem;
}