/* ==========================================================================
   Components - reusable sections (each maps to a future Elementor widget)
   ========================================================================== */

/* ---- Motion reveal primitives (driven by motion.js) -------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px) scale(0.985);
  filter: blur(4px);
  transition: opacity 820ms cubic-bezier(0.22,1,0.36,1),
              transform 820ms cubic-bezier(0.22,1,0.36,1),
              filter 820ms cubic-bezier(0.22,1,0.36,1);
  will-change: opacity, transform, filter;
}
[data-reveal].is-in { opacity: 1; transform: none; filter: blur(0); }
[data-reveal][data-reveal="fade"] { transform: none; }

/* staggered children */
[data-stagger] > * { opacity: 0; transform: translateY(26px) scale(0.985); filter: blur(4px); transition: opacity 760ms cubic-bezier(0.22,1,0.36,1), transform 760ms cubic-bezier(0.22,1,0.36,1), filter 760ms cubic-bezier(0.22,1,0.36,1); }
[data-stagger].is-in > * {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity 760ms cubic-bezier(0.22,1,0.36,1),
              transform 760ms cubic-bezier(0.22,1,0.36,1),
              filter 760ms cubic-bezier(0.22,1,0.36,1);
}
[data-stagger].is-in > *:nth-child(1) { transition-delay: 60ms; }
[data-stagger].is-in > *:nth-child(2) { transition-delay: 140ms; }
[data-stagger].is-in > *:nth-child(3) { transition-delay: 220ms; }
[data-stagger].is-in > *:nth-child(4) { transition-delay: 300ms; }
[data-stagger].is-in > *:nth-child(5) { transition-delay: 380ms; }
[data-stagger].is-in > *:nth-child(6) { transition-delay: 460ms; }
/* A stagger container taller than the screen reveals each child as it arrives
   (motion.js), so the children hold their own hidden state and take no delay. */
[data-stagger].is-stagger-each > * { opacity: 0; transform: translateY(26px) scale(0.985); filter: blur(4px); }
[data-stagger].is-stagger-each > *.is-in { opacity: 1; transform: none; filter: blur(0); transition-delay: 0ms; }

/* image reveal: clip wipe + slow scale settle */
.reveal-img { overflow: hidden; }
.reveal-img img,
.reveal-img > picture > img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.08);
  transition: clip-path var(--dur-4) var(--ease-out),
              transform 1600ms var(--ease-out);
}
.reveal-img.is-in img,
.reveal-img.is-in > picture > img {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}

/* headline line-by-line reveal (motion.js wraps lines in .line>span) */
.line { display: block; overflow: hidden; }
.line > span {
  display: block;
  transform: translateY(106%);
  transition: transform var(--dur-3) var(--ease-out);
}
.is-in .line > span,
.line.is-in > span { transform: translateY(0); }
.is-in .line:nth-child(2) > span { transition-delay: 90ms; }
.is-in .line:nth-child(3) > span { transition-delay: 180ms; }
.is-in .line:nth-child(4) > span { transition-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-stagger] > *, .line > span,
  .reveal-img img { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }
}

/* ---- Image placeholders (until real photography drops in) -------------- */
.ph {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--page-bg)), var(--page-bg) 62%),
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--accent) 8%, var(--page-bg)) 0 12px,
      var(--page-bg) 12px 24px);
  position: relative;
}
.ph::after {
  content: attr(data-label);
  position: absolute; inset: auto var(--sp-4) var(--sp-4) auto;
  font-family: var(--font-mono);
  font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
  background: var(--paper);
  padding: 4px 8px; border-radius: 2px;
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--gutter);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease-out),
              background var(--dur-2) var(--ease-out);
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav__brand {
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: -0.01em;
  display: flex; align-items: center; gap: var(--sp-3);
}
.nav__brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.nav__brand small { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); display: block; }
.nav__menu { display: flex; align-items: center; gap: var(--sp-6); list-style: none; }
.nav__menu a {
  font-size: var(--step--1); font-weight: 500;
  position: relative; padding-block: 4px;
  /* A nav label is not prose. Between the 860px hamburger breakpoint and roughly
     1200px the row got tight and labels broke mid-phrase: "UJPO at 100" stacked
     onto three lines and stood 88px tall inside a 29px row. */
  white-space: nowrap;
}
/* Buy the space back by tightening the gap rather than shrinking the type, which
   this audience needs kept large. */
@media (max-width: 1200px) {
  .nav__menu { gap: var(--sp-4); }
}
.nav__menu a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}
.nav__menu a:hover::after, .nav__menu a[aria-current]::after { transform: scaleX(1); }
.nav__actions { display: flex; align-items: center; gap: var(--sp-3); }
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__toggle span { display: block; width: 24px; height: 2px; background: var(--ink); transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1); }
.nav__toggle span + span { margin-top: 5px; }

@media (max-width: 860px) {
  .nav__menu, .nav__actions .btn { display: none; }
  .nav__toggle { display: block; }
  .nav__menu.is-open {
    display: flex; flex-direction: column; align-items: flex-start;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper); padding: var(--sp-6) var(--gutter);
    border-bottom: 1px solid var(--line); gap: var(--sp-4);
  }
}

/* ==========================================================================
   Branch switcher - jump between Naivelt / School / UJPO
   ========================================================================== */
.branchbar {
  position: sticky; top: 0; z-index: calc(var(--z-nav) - 1);
  display: flex; justify-content: center; flex-wrap: wrap;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.branchbar a {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) clamp(var(--sp-3), 3vw, var(--sp-5));
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 2px solid transparent;
  transition: color var(--dur-2), border-color var(--dur-2);
}
.branchbar a:hover { color: var(--ink); }
.branchbar a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.branchbar img { width: 1.5rem; height: 1.5rem; object-fit: contain; }

/* ==========================================================================
   LANDING - 3-org chooser
   ========================================================================== */
.landing { min-height: 100svh; display: flex; flex-direction: column; }

/* ---- Cinematic dark hero (intro + houses on near-black) ---------------- */
.landing__cinema {
  background: var(--cover-black);  /* warm near-black, sampled from the booklet cover */
  color: var(--paper);
  position: relative; overflow: hidden;
  /* Over-pull past the nav height so no strip of page colour can peek above
     the dark hero, then pad the content back to its place. */
  margin-top: -6.5rem;
  padding-top: 6.5rem;
  /* Fill the whole viewport: the hero IS the first screen, headline near the top
     and the houses on the fold, so the chooser below starts the next scroll. The
     hero already pulls up under the header (margin-top above), so a full 100svh
     min-height reaches the very bottom of the window. */
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: space-between;
}
/* Stop the firefly canvas above the houses: the lower part of the artwork is
   transparent, and a firefly drifting through the painted street (or through the
   empty band beneath it) reads as a bug, not as atmosphere. The band's height
   depends on whichever image an editor chose, so main.js measures it and sets
   --houses-h; the vw fallback is the default artwork's aspect.

   The mask fades the last stretch of the canvas out. Without it a firefly sitting
   on the cut line is sliced in half and reads as a flat-bottomed blob. */
.landing__cinema .ambient {
  inset: 0 0 auto 0;
  height: calc(100% - var(--houses-h, 32.55vw));
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}

.landing__cinema::before {        /* soft warm glow behind the headline/houses */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(90% 60% at 50% 22%, rgba(216,57,43,0.14), transparent 60%),
    radial-gradient(70% 50% at 50% 95%, rgba(242,194,0,0.07), transparent 65%);
}
.landing__cinema > * { position: relative; z-index: 1; }

/* Tuition / fees table (MWS) */
.fees { width: 100%; border-collapse: collapse; margin-top: var(--sp-5); font-size: var(--step-0); }
.fees caption { text-align: left; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); padding-bottom: var(--sp-3); }
.fees th, .fees td { text-align: left; padding: var(--sp-4) var(--sp-4); border-bottom: 1px solid var(--line); }
.fees thead th { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--line-strong); }
.fees tbody th { font-weight: 600; font-family: var(--font-display); }
.fees td.num, .fees th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Only the Rate/Member/Non-member cells highlight on hover, not the
   row-spanning Program name column (client feedback 2026-07-09). */
/* The row label is a th, so the tint must cover th AND td or the highlight
   stops at the price cell. The note row is prose, not data: no hover there. */
.fees tbody tr:not(.fees__note):hover th,
.fees tbody tr:not(.fees__note):hover td { background: var(--bg-tint); }
.fees .fees__note td { color: var(--ink-2); font-size: var(--step--1); border-bottom: 0; }
@media (max-width: 560px) { .fees th, .fees td { padding: var(--sp-3) var(--sp-2); font-size: var(--step--1); } }
/* Fees Table (tabbed): a Member / Non-member toggle that swaps the single
   amount column. The table carries data-fee=a|b; CSS shows only that column's
   price span. Progressive enhancement, so with JS off the default column shows. */
.feetabs-wrap { margin-top: var(--sp-5); }
.feetabs { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: var(--sp-4); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 999px; }
.feetabs__tab { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.02em; line-height: 1; color: var(--ink-3); background: none; border: 0; border-radius: 999px; padding: 0.7em 1.2em; min-height: 2.75rem; cursor: pointer; transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.feetabs__tab:hover { color: var(--ink); }
.feetabs__tab.is-active { background: var(--accent); color: var(--accent-ink); }
.feetabs__tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.fees--tabbed { margin-top: 0; }
.fees--tabbed[data-fee="a"] .fee-b { display: none; }
.fees--tabbed[data-fee="b"] .fee-a { display: none; }
/* Membership page only: the wide annual-fees table clips on phones, and the
   join wizard's first step ("Membership Package") already lists the same prices
   as tappable radio cards. Hide the redundant table <=640px; keep it on the
   shared MWS tuition page (same .fees class), hence the page-scoped selector. */
@media (max-width: 640px) { body.page-id-65 .fees { display: none; } }
/* Accessibility page: the "Continue exploring" section sits directly under a
   full-bleed tinted band, so its 1px divider hairline stacked with the band's
   own bottom edge into a "stepped seam". The band edge already separates them;
   drop the redundant hairline here. (The band's fuller restyle is a separate
   task.) */
body.page-id-73 .section.explore { border-top: 0; }
.landing__cinema .landing__intro { padding-block: var(--sp-7) var(--sp-5); }
.landing__cinema .display { color: var(--paper); font-size: var(--hero-title); }
.landing__cinema .lead { color: rgba(246,243,236,0.78); font-size: var(--step-0); max-width: 46ch; margin-inline: auto; }
.landing__cinema .eyebrow { color: var(--gold); }   /* cover gold */

/* Centennial mark - the chain seal + a gold anniversary line, cover-style */
.centennial { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.centennial__seal {
  width: clamp(5rem, 10vw, 7rem); height: auto; border-radius: 50%;
  /* warm halo lifts the seal's dark chain/lettering off the near-black ground */
  background: radial-gradient(circle, rgba(232,201,148,0.16), rgba(232,201,148,0.05) 55%, transparent 72%);
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.55));
  animation: crest-float 7s var(--ease-inout) 0.6s infinite;
}
.centennial__line {
  font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--gold);
  display: inline-flex; align-items: center; gap: var(--sp-4);
}
.centennial__line::before, .centennial__line::after {
  content: ""; width: clamp(1.5rem, 6vw, 4rem); height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep));
}
.centennial__line::after { background: linear-gradient(90deg, var(--gold-deep), transparent); }
@media (prefers-reduced-motion: reduce) { .centennial__seal { animation: none; } }
/* houses-band.png is the artwork with its transparent margins trimmed off
   (2000x651), so the band's natural height is 32.55vw and nothing is ever cut.
   On a short window the band shrinks and the houses scale down with it rather
   than losing their doorsteps: `contain`, anchored to the bottom. */
.landing__cinema .houses-band {
  flex: none; padding-bottom: 0;
  height: min(32.55vw, calc(100svh - var(--header-h) - 11rem));
  overflow: hidden;
}
.landing__cinema .houses-band img {
  width: 100%; height: 100%; display: block;
  object-fit: contain; object-position: 50% 100%;
  /* The band cannot drift vertically without either cutting the houses off or
     opening a gap beneath them, so the depth comes from a slow swell anchored to
     their feet. home.js drives the scale. */
  transform-origin: 50% 100%; will-change: transform;
  /* No drop-shadow here, and `none` explicitly: `overflow: hidden` above clips a
     shadow dead straight across the top of the band, drawing a line right over
     the hero. Without this the generic `.houses-band img` shadow further down
     the sheet would apply and the line would come back, only fainter. On this
     near-black ground the shadow bought nothing anyway. */
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .landing__cinema .houses-band img { transform: none !important; }
}
.landing__cinema .landing__intro {
  display: grid; place-content: center;
  padding-block: clamp(0.75rem, 2.4svh, 1.9rem) clamp(0.5rem, 1.4svh, 1rem);
}
/* Every pixel here is a pixel the houses cannot have. */
.landing__cinema .display { margin-block: 0.4rem; }

/* Fireflies on the dark hero: fewer, and dimmer. The default flock (42) turned
   the night sky into a starfield. */
.landing__cinema .ambient { --ambient-max: 13; --ambient-dim: 0.5; }

/* ---- Cinematic opener: slower, taller, blur-in line reveal ------------- */
.landing__cinema .display .line > span {
  transition: transform 1100ms var(--ease-out), filter 1100ms var(--ease-out), opacity 1100ms var(--ease-out);
  transform: translateY(112%);
  filter: blur(6px); opacity: 0;
}
.landing__cinema .display.is-in .line > span,
.landing__cinema .display .line.is-in > span {
  transform: translateY(0); filter: blur(0); opacity: 1;
}
.landing__cinema .display.is-in .line:nth-child(1) > span { transition-delay: 120ms; }
.landing__cinema .display.is-in .line:nth-child(2) > span { transition-delay: 240ms; }
.landing__cinema .display.is-in .line:nth-child(3) > span { transition-delay: 360ms; }
.landing__cinema .display.is-in .line:nth-child(4) > span { transition-delay: 480ms; }
.landing__cinema .display.is-in .line:nth-child(5) > span { transition-delay: 600ms; }
/* eyebrow first, lead trails the headline */
.landing__cinema .eyebrow[data-reveal] { transition-delay: 60ms; }
.landing__cinema .lead[data-reveal]    { transition-delay: 760ms; }

/* Landing hero CTAs (Wave 1 / Prompt 1a): centered row under the headline,
   above the houses band. The ghost button is re-lit for the dark cinema ground
   (mirrors the .section--ink treatment, same tokens, no new colours); both
   trail the headline's entrance. */
.landing__cinema .hero__actions            { justify-content: center; margin-top: var(--sp-4); }
.landing__cinema .hero__actions[data-reveal] { transition-delay: 720ms; }
.landing__cinema .btn--ghost               { --_fg: var(--paper); border-color: var(--wc-ghost-border); }
.landing__cinema .btn--ghost::after        { background: var(--paper); }
.landing__cinema .btn--ghost:hover         { color: var(--ink); border-color: var(--paper); }

/* Ambient drift so the dark hero breathes instead of sitting dead-still */
.landing__cinema::before { animation: cinema-drift 14s var(--ease-inout) infinite alternate; }
@keyframes cinema-drift {
  0%   { transform: translate3d(0,0,0)      scale(1);    opacity: 0.85; }
  100% { transform: translate3d(0,-1.6%,0)  scale(1.06); opacity: 1; }
}
/* Once the houses finish "building", let them float gently forever */
.is-loaded .houses-band img { animation: houses-build 1300ms var(--ease-out) 0.25s forwards, houses-float 9s var(--ease-inout) 1.7s infinite alternate; }
@keyframes houses-float {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .landing__cinema::before { animation: none; }
  .is-loaded .houses-band img { animation: none !important; }
  .landing__cinema .display .line > span { filter: none; opacity: 1; transform: none; }
}

/* Nav: transparent over the dark hero at top, solid once scrolled */
.nav[data-theme="cinema"]:not(.is-scrolled) {
  background: transparent; backdrop-filter: none; border-bottom-color: transparent;
}
.nav[data-theme="cinema"]:not(.is-scrolled) .nav__brand,
.nav[data-theme="cinema"]:not(.is-scrolled) .nav__menu a { color: var(--paper); }
.nav[data-theme="cinema"]:not(.is-scrolled) .nav__brand small { color: rgba(246,243,236,0.55); }
.nav[data-theme="cinema"]:not(.is-scrolled) .nav__toggle span { background: var(--paper); }
.nav[data-theme="cinema"]:not(.is-scrolled) .btn--ghost { --_fg: var(--paper); border-color: var(--wc-ghost-border); }
.nav[data-theme="cinema"]:not(.is-scrolled) .btn--ghost::after { background: var(--paper); }
.nav[data-theme="cinema"]:not(.is-scrolled) .btn--ghost:hover { color: var(--ink); border-color: var(--paper); }
.landing__intro {
  text-align: center;
  padding: var(--sp-9) var(--gutter) var(--sp-6);
  max-width: 60rem; margin-inline: auto;
}
.landing__intro .display { margin-block: var(--sp-4); }
.landing__intro .lead { margin-inline: auto; }

.chooser {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--line);
  border-block: 1px solid var(--line);
  /* "Explore the Centre" smooth-scrolls to #explore; stop just below the sticky
     nav (~92px) so the card eyebrows ("01, Summer community" ...) aren't clipped. */
  scroll-margin-top: 6.5rem;
}
@media (max-width: 820px) { .chooser { grid-template-columns: 1fr; } }

.choice {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  justify-content: flex-start;
  gap: var(--sp-3);
  min-height: clamp(26rem, 60vh, 40rem);
  padding: var(--sp-8) var(--sp-6) var(--sp-7);
  background: var(--page-bg);
  overflow: hidden;
  isolation: isolate;
}
.choice::before { /* brand colour wash rising from the base */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(125% 75% at 50% 118%, var(--accent-soft), transparent 68%);
  opacity: 0.55; transition: opacity var(--dur-3) var(--ease-out);
}
.choice:hover::before, .choice:focus-within::before { opacity: 1; }

.choice__index { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.18em; color: var(--ink-3); }
.choice__crest {
  width: clamp(10rem, 17vw, 15rem); height: auto; margin-block: var(--sp-2);
  transition: transform var(--dur-3) var(--ease-out);
  will-change: transform;
}
/* House-cluster art in the chooser (green/yellow/red branch houses) */
.choice__houses {
  width: clamp(13rem, 26vw, 21rem); height: auto;
  margin-block: var(--sp-2) var(--sp-3);
  filter: drop-shadow(0 8px 16px rgba(26,24,20,0.12));
  transition: transform var(--dur-3) var(--ease-out);
  will-change: transform;
}
.choice:hover .choice__houses, .choice:focus-within .choice__houses {
  transform: translateY(-8px) scale(1.04);
}
.is-loaded .choice__houses { animation: crest-in var(--dur-4) var(--ease-out) both; }
.is-loaded .choice:nth-child(2) .choice__houses { animation-delay: 120ms; }
.is-loaded .choice:nth-child(3) .choice__houses { animation-delay: 240ms; }
@media (prefers-reduced-motion: reduce) { .choice__houses { animation: none !important; } }

/* Full rainbow houses band - the animated Centre centerpiece (edge to edge) */
.houses-band { width: 100%; padding: var(--sp-4) 0 0; overflow: visible; }
.houses-band img {
  display: block; width: 100%; max-width: none; height: auto; margin-inline: 0;
  filter: drop-shadow(0 16px 28px rgba(26,24,20,0.16));
  clip-path: inset(0 100% 0 0);     /* hidden until it "builds" left→right */
  opacity: 0;
  will-change: clip-path, opacity, transform;
}
@keyframes houses-build {
  0%   { clip-path: inset(0 100% 0 0); opacity: 0; }
  100% { clip-path: inset(0 0 0 0);    opacity: 1; }
}
.is-loaded .houses-band img { animation: houses-build 1300ms var(--ease-out) 0.25s forwards; }
@media (prefers-reduced-motion: reduce) {
  .houses-band img { clip-path: none !important; opacity: 1 !important; animation: none !important; }
}
/* Hover uses filter (not transform) so it never fights the idle float loop */
.choice:hover .choice__crest, .choice:focus-within .choice__crest {
  filter: drop-shadow(0 14px 26px rgba(26,24,20,0.22)) brightness(1.03);
  animation-duration: 3.2s;   /* float a touch livelier on hover */
  /* Individual transform properties compose WITH the crest-float animation's
     transform, so this never fights the idle float (see note above). */
  scale: 1.04;
  rotate: -1deg;
}
.choice__name { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.05; color: var(--ink); }
.choice__desc { color: var(--ink-2); max-width: 32ch; }
.choice__cta {
  margin-top: var(--sp-3);
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent);
}
.choice__cta .arrow { transition: transform var(--dur-2) var(--ease-out); }
.choice:hover .choice__cta .arrow, .choice:focus-within .choice__cta .arrow { transform: translateX(6px); }

.choice__link { position: absolute; inset: 0; z-index: 2; text-indent: -9999px; }

/* ==========================================================================
   Wave 1 / Prompt 1b: per-org identity + motion on the landing cards.
   (No markup change: everything keys off the card's existing data-org.)
   ========================================================================== */
/* House colour per organization. MWS's key is "mws" everywhere (unified
   2026-07-13 - it used to be "school" in this subsystem and "mws" in the
   archive/staff/signatures subsystem; picked "mws" as the one key). */
.choice[data-org="naivelt"] { --org: var(--org-naivelt); }   /* Camp Naivelt, green */
.choice[data-org="mws"]  { --org: var(--org-mws); }   /* Morris Winchevsky School, gold */
.choice[data-org="ujpo"]    { --org: var(--org-ujpo); }   /* UJPO, red */

/* Index label + the CTA ("Enter ->") take the house colour. Green and red meet
   AA as text on the light card; the identity gold #B8860B does NOT (2.8:1), so
   MWS text uses the theme's AA deep gold while the accent bar keeps the vivid
   identity gold. (Launch directive: AA contrast for elderly readers.) */
.choice[data-org="mws"] { --org-text: var(--accent-mws); }   /* AA deep gold, text only */
.choice[data-org] .choice__index { color: var(--org-text, var(--org)); }
.choice[data-org] .choice__cta   { color: var(--org-text, var(--org)); }

/* 3px top accent bar, wiping in from the left on hover/focus. */
.choice::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--org, var(--accent));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-3) var(--ease-out);
  z-index: 3; pointer-events: none;
}
.choice:hover::after, .choice:focus-within::after { transform: scaleX(1); }

/* One transition serves both the scroll reveal (opacity/translate/scale) and
   the hover lift (transform/box-shadow). Reveal uses the individual translate
   + scale properties; hover uses transform, so the two compose and never
   overwrite each other. */
.choice {
  transition: opacity var(--dur-3) var(--ease-out),
              translate var(--dur-3) var(--ease-out),
              scale var(--dur-3) var(--ease-out),
              transform var(--dur-3) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out);
}
.choice:hover, .choice:focus-within {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(26, 24, 20, 0.14);
  z-index: 4;
}

/* Staggered scroll-reveal, armed by home.js (adds .chooser--reveal) so no-JS
   visitors always see the cards. home.js also skips arming under reduced
   motion; this block is the belt-and-braces fallback. */
.chooser--reveal .choice        { opacity: 0; translate: 0 26px; scale: 0.985; }
.chooser--reveal .choice.is-in  { opacity: 1; translate: 0 0;   scale: 1; }
@media (prefers-reduced-motion: reduce) {
  .chooser--reveal .choice { opacity: 1; translate: 0 0; scale: 1; }
  .choice, .choice::after  { transition: none; }
}

/* ==========================================================================
   Wave 1 / Prompt 1: MWS course masthead, lead portrait + facts panel.
   ========================================================================== */
.course-hero-sec  { padding-block: 0; margin-top: var(--sp-6); }
.course-hero      { margin: 0; }
.course-hero__img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
@media (min-width: 720px) {
  .course-hero      { max-width: 30rem; }        /* portrait column, left-aligned */
  .course-hero__img { aspect-ratio: 4 / 5; object-fit: cover; }
}

.course-facts-sec { padding-block: var(--sp-5); }
.course-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-6);
  max-width: 40rem; margin: 0;
  border-top: 1px solid var(--line); padding-top: var(--sp-5);
}
.course-fact        { margin: 0; }
.course-fact__label {
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 0.25rem;
}
.course-fact__value { font-size: var(--step-0); color: var(--ink); margin: 0; }
@media (max-width: 520px) { .course-facts { grid-template-columns: 1fr; } }

/* ==========================================================================
   Brand crest logos + animation
   ========================================================================== */
.crest { display: block; }   /* transparent PNGs - sit on any surface */

/* Nav brand crest */
.nav__crest {
  width: 2.6rem; height: 2.6rem; object-fit: contain;
  flex: none;
}

/* The Centre has no mark of its own; it wears UJPO's. That is true on the landing
   page, on /about/, and on every Centre-wide page, so nothing hides the crest.
   (Supersedes the 2026-07-09 "logo-less header" note: the landing now shows it too.) */

/* Load-in + idle float for logos */
@keyframes crest-in {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes crest-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.crest-animate { animation: crest-in var(--dur-3) var(--ease-out) both; }
.crest-float   { animation: crest-float 6s var(--ease-inout) infinite; }
.choice__crest { transition: filter var(--dur-3) var(--ease-out), scale var(--dur-3) var(--ease-out), rotate var(--dur-3) var(--ease-out); }
/* Entrance, then a gentle perpetual float loop (staggered so they don't bob in unison) */
.is-loaded .choice:nth-child(1) .choice__crest { animation: crest-in var(--dur-4) var(--ease-out) 0ms   both, crest-float 6s var(--ease-inout) 1.4s infinite; }
.is-loaded .choice:nth-child(2) .choice__crest { animation: crest-in var(--dur-4) var(--ease-out) 120ms both, crest-float 6.6s var(--ease-inout) 1.9s infinite; }
.is-loaded .choice:nth-child(3) .choice__crest { animation: crest-in var(--dur-4) var(--ease-out) 240ms both, crest-float 7.2s var(--ease-inout) 2.3s infinite; }
@media (prefers-reduced-motion: reduce) {
  .crest-animate, .crest-float, .choice__crest { animation: none !important; }
}

/* ==========================================================================
   HERO (org pages) - split editorial
   ========================================================================== */
.hero {
  display: grid;
  /* minmax(0, …) not a bare fr. A bare `1fr` is `minmax(auto, 1fr)`, and `auto`
     floors the track at the item's min-content width, so a hero whose copy will
     not wrap below N pixels pushes the track past the viewport and the whole page
     scrolls sideways. This is what "The Shandes." did at 375px: a 444px track in
     a 375px window. */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: stretch;
  gap: 0;
  /* Exactly one screen: the hero ends where the fold does, so the first scroll
     reveals the next thing whole rather than the bottom of this one.
     min-height, not height: long copy is allowed to push past rather than clip. */
  min-height: calc(100svh - var(--header-h));
  border-bottom: 1px solid var(--line);
}
@media (max-width: 880px) { .hero { grid-template-columns: minmax(0, 1fr); } }
.hero__body {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--sp-9) var(--gutter);
  gap: var(--sp-5);
}
/* The split hero is full-bleed (its photo reaches the right edge), so its text
   would start at the raw gutter (64px) while every .container section below
   indents to the centred 78rem column. That 16px-and-growing shelf is the
   misalignment; match the hero text's left edge to the container's content
   edge at every width. Centred/solo heroes keep their own centring. */
/* A text-only solo hero (Privacy, Accessibility, Search) sits inside the
   container like everything below it, so its left edge must be --pad, not the
   64px gutter (16px shelf, Erf 2026-09-21). */
.hero--solo:not(:has(.hero__media)) .hero__body { max-width: var(--content); margin-inline: auto; padding-inline: var(--pad); }
.hero:not(.hero--solo):has(.hero__media) .hero__body {
  padding-inline-start: max(var(--pad), calc((100vw - var(--content)) / 2 + var(--pad)));
}
/* The brand block wraps below 880px, so the header is taller there. Measured. */
@media (max-width: 880px) { :root { --header-h: 10.25rem; } }
/* --step-5 tops out at 7.5rem. On the org landings that rendered "A summer haven
   of social justice and Jewish culture." at 118px across six lines, a 1315px hero
   in a 900px window. A hero headline is a headline, not a poster. */
.hero__title { font-size: var(--hero-title); line-height: 1.02; text-wrap: balance; }

/* MWS course pages (Kinder Kapers, Grades 1-3, Grades 4-6, B'Mitzvah, Adult
   Education): titles ran too large for one/two-word course names (client
   feedback 2026-07-09). Scoped to these 5 pages only. */
.page-id-82 .hero__title, .page-id-83 .hero__title, .page-id-84 .hero__title,
.page-id-85 .hero__title, .page-id-86 .hero__title { font-size: var(--hero-title); }  /* keep on the one hero ramp (was --step-3) */
.hero__media { position: relative; min-height: 24rem; }
.hero__media .ph, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* A hero's empty image slot is a background, not an editor prompt - never print
   the "HERO" placeholder label on the published page. */
.hero__media .ph::after { content: none; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--sp-5); font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-3); letter-spacing: 0.04em; }
.hero__meta b { color: var(--ink); font-weight: 500; }

/* Mobile hero. This block MUST stay after .hero__body / .hero__media above: a media
   query adds no specificity, so when it sat earlier in the file those later plain
   rules silently won and the phone hero stayed 1289px tall.
   Stacked, the copy and the image are each about a screen, so cap the image and
   pull the copy's padding in until header + hero end at the fold. */
@media (max-width: 880px) {
  .hero__body { padding-block: clamp(1rem, 3svh, 2rem); gap: var(--sp-4); }
  .hero__media { min-height: 0; height: 26svh; }
  .hero__title { line-height: 1.05; }
  .hero__actions { margin-top: 0; }
}
@media (max-width: 600px) {
  /* A phone is 812px tall and the header takes 131 of it. To land the hero on the
     fold the picture gives up height first, then the lead tightens. The meta line
     ("Founded 1926 · ...") is the one thing here that is repeated further down the
     page, so it is the one thing that goes. */
  .hero__media { height: 21svh; }
  .hero__body .lead { font-size: var(--step-0); line-height: 1.45; }
  .hero__meta { display: none; }
  .hero__actions .btn { padding-block: .7em; }
}

/* ---- Full-background photo hero (org homes: Naivelt / MWS / UJPO) ---------
   The photo fills the whole hero; a dark scrim keeps the centered text legible
   - readability first, for older visitors. Applies to every photo (non-solo)
   hero so the three org homes match. Solo/centered heroes are untouched. */
.hero:not(.hero--solo):has(.hero__media) {
  position: relative;
  grid-template-columns: 1fr;
  place-items: center;
  isolation: isolate;
}
.hero:not(.hero--solo):has(.hero__media) .hero__media {
  position: absolute; inset: 0; z-index: 0; min-height: 0;
}
.hero:not(.hero--solo):has(.hero__media) .hero__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(16,12,9,0.04), rgba(16,12,9,0.20));
}
.hero:not(.hero--solo):has(.hero__media) .hero__body {
  position: relative; z-index: 2;
  max-width: min(var(--measure), calc(100% - 2 * var(--pad)));
  padding: var(--sp-7) clamp(var(--sp-6), 4vw, var(--sp-8));
  text-align: center; align-items: center;
  color: var(--paper);
  /* Soft shadow on every line keeps the light text legible even over a light or
     mid-tone photo, without having to darken the plate. */
  text-shadow: 0 1px 14px rgba(0,0,0,0.50);
  /* Frosted text plate: blurs AND darkens whatever is behind it by a fixed
     amount (brightness()), so the text reads consistently over a bright, dark,
     or placeholder image - no per-photo tuning. The rest of the photo stays
     vibrant. */
  background: rgba(16,12,9,0.10);
  /* 0.50, not 0.62: at 0.62 the plate sat around 0.16 relative luminance, which
     left even paper-white text at 4.47:1, a hair under AA for anything below
     24px. 0.50 buys real margin so the floor holds over a bright photo too. */
  backdrop-filter: blur(14px) brightness(0.50) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) brightness(0.50) saturate(1.15);
  border: 1px solid rgba(246,243,236,0.14);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
.hero:not(.hero--solo):has(.hero__media) .hero__title { color: var(--paper); text-shadow: 0 2px 14px rgba(0,0,0,0.35); }
.hero:not(.hero--solo):has(.hero__media) .lead { color: rgba(246,243,236,0.88); }
/* Paper, not --accent-bright. The branch accents are mid-dark saturated colours
   built for light grounds: #d8392b tops out at 4.54:1 against pure BLACK, so on
   a photo plate it cannot reach AA at any scrim depth. Measured 2026-08-05 it
   ran 1.07:1 on the UJPO hero, effectively invisible. The accent still carries
   branch identity on every light-ground eyebrow; here the plate is the accent.
   Do not put --accent-bright back on this element. */
.hero:not(.hero--solo):has(.hero__media) .eyebrow { color: var(--paper); justify-content: center; }
.hero:not(.hero--solo):has(.hero__media) .hero__actions { justify-content: center; }
.hero:not(.hero--solo):has(.hero__media) .hero__meta { color: rgba(246,243,236,0.78); justify-content: center; }
.hero:not(.hero--solo):has(.hero__media) .hero__meta b { color: var(--paper); }
/* The ghost/secondary button is dark-on-transparent by default - invisible on a
   photo hero. Give it light text and a light outline; on hover it fills solid. */
.hero:not(.hero--solo):has(.hero__media) .btn--ghost {
  --_fg: var(--paper);
  border-color: rgba(246,243,236,0.55);
}
.hero:not(.hero--solo):has(.hero__media) .btn--ghost::after { background: var(--paper); }
.hero:not(.hero--solo):has(.hero__media) .btn--ghost:hover { color: var(--ink); border-color: var(--paper); }
@media (max-width: 880px) {
  .hero:not(.hero--solo):has(.hero__media) .hero__media { position: absolute; inset: 0; height: auto; }
}

/* ==========================================================================
   Section header
   ========================================================================== */
.sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-6); margin-bottom: var(--sp-7); flex-wrap: wrap; }
.sechead__title { max-width: 40ch; }   /* was 24ch, which split one-sentence heads like "Naivelt means New World in Yiddish." in two (Erf, 2026-09-21) */
.sechead p { color: var(--ink-2); }

/* ==========================================================================
   Program / generic cards
   ========================================================================== */
.card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; }
/* Magazine covers are portrait; the digest issue cards keep the page's true
   proportions instead of cropping the cover to 4:3. */
#issues .card__media { aspect-ratio: 927 / 1200; }
.card__media .ph, .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease-out); }
.card:hover .card__media .ph, .card:hover .card__media img { transform: scale(1.05); }
.card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.card__tag { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); }
.card__title { font-size: var(--step-1); }
/* On the Naivelt 100th page, two section blocks (the film feature, the photo
   weekend) are headed by .card__title h2s rather than the usual sechead;
   .card__title's --step-1 (~25px) left them off the locked scale while its
   sibling UJPO 100th page uses 32px sechead heads. Scope them to the h2
   section size so both anniversary pages match. Only these two cards exist
   on page 106, so this touches nothing else. */
.page-id-106 .card__title { font-size: 2rem; }
.card__body p { color: var(--ink-2); font-size: var(--step--1); }
.card__foot { margin-top: auto; padding-top: var(--sp-3); }

/* Cabins as mounted prints + a door-plate (object-treatments.html "A , 
   CABINS"). Scoped to the cabins index's own section (css_classes=
   cabins-plates) so the SHARED winx_cards widget/markup/CSS is untouched
   everywhere else it's used (course cards, org homepage cards, etc.) - no
   new fields, no widget changes, just a scoped reskin of the existing
   tag/title/text/image the cabin cards already carry. */
/* Keep the cabin grid in the site's content column instead of bleeding to the
   frame edges (#8 containment). */
.cabins-plates { max-width: var(--content); margin-inline: auto; padding-inline: var(--pad); }
/* Option C2 (Erf, 2026-09-21): a paper card, the photo edge to edge, the
   hill as a small green chip with cream type, sans body text. The old
   door-plate reskin (mono uppercase body, accent-on-accent plate) is gone. */
.cabins-plates .card__media { aspect-ratio: 4 / 3; background: none; padding: 0; border-radius: 0; box-shadow: none; transform: none; }
.cabins-plates .card__media img { border-radius: 0; }
.cabins-plates .card__body { padding: var(--sp-5); gap: var(--sp-2); }
.cabins-plates .card__tag { display: inline-block; width: max-content; font-family: var(--font-mono); font-weight: 500; font-size: var(--step--2); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--paper) !important; background: var(--accent); padding: .35em .6em; border-radius: var(--radius); margin-bottom: var(--sp-2); transform: none; position: static; }
.cabins-plates .card__title { font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; margin: 0; }
.cabins-plates .card__body p { font-family: var(--font-sans); font-size: var(--step--1); letter-spacing: normal; text-transform: none; color: var(--ink-2); }
.cabins-plates .card__foot { padding-top: var(--sp-3); }

/* Digest issues as covers on a shelf (object-treatments.html "B, DIGEST").
   Scoped to the digest page's own section (css_classes=digest-covers) -
   the shared winx_cards widget is untouched everywhere else. Reuses the
   real fields as-is: title ("Spring 2026") becomes the rotated season
   stamp, tag ("Latest") stays a small corner badge when set, text is the
   real issue description (clamped), link/link_text is the real PDF link. */
.digest-covers .card { background: none; border: none; border-radius: 0; overflow: visible; position: relative; }
.digest-covers .card:hover { transform: none; box-shadow: none; border-color: transparent; }
.digest-covers .card__media {
  aspect-ratio: 3 / 4; background: var(--mount); padding: 12px 12px 0; border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 16px 30px -18px rgba(26, 24, 20, .55); border: 1px solid var(--line); border-bottom: 0;
}
.digest-covers .card__media img { border-radius: 1px; }
.digest-covers .card__body {
  background: var(--mount); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 3px 3px;
  padding: var(--sp-4); gap: 0;
}
.digest-covers .card__tag {
  position: absolute; top: -9px; right: 6px; z-index: 2;
  font-size: var(--step--2); letter-spacing: .06em; color: var(--on-dark); background: var(--accent);
  padding: 3px 9px; border-radius: var(--radius); box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
.digest-covers .card__title {
  display: inline-flex; font-family: var(--font-mono); font-weight: 500; font-size: var(--step--2); letter-spacing: .05em;
  color: var(--accent); background: var(--page-bg, var(--paper)); border: 1.5px solid var(--accent); border-radius: var(--radius);
  padding: 3px 9px; transform: rotate(-4deg); position: absolute; top: -14px; left: -4px; z-index: 2;
}
.digest-covers .card__body p {
  color: var(--ink-2); font-size: var(--step--1); margin-top: var(--sp-2);
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.digest-covers .card__foot { display: flex; justify-content: flex-end; padding-top: var(--sp-3); }
.digest-covers .card__foot .link { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .05em; text-transform: uppercase; }

/* In Memoriam: calm, centered, framed - no tilt, no hover, years in a
   muted ink stamp (never red). The most restrained treatment in the print
   language on purpose (object-treatments.html "C, IN MEMORIAM"). */
.mem { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-7) var(--sp-6); }
@media (max-width: 900px) { .mem { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mem { grid-template-columns: 1fr; } }
.mem__person { text-align: center; }
.mem__frame { background: var(--mount); padding: 14px; border-radius: 2px; box-shadow: 0 14px 28px -18px rgba(26, 24, 20, .4); border: 1px solid var(--line); max-width: 16.25rem; margin: 0 auto; }
.mem__frame::before { content: ""; display: block; height: 3px; background: var(--ink-3); opacity: .25; margin-bottom: 12px; }
/* Deliberate exception to the site-wide no-grayscale rule: In Memoriam is a
   calm, respectful remembrance treatment (guidelines: "no tilt, no hover
   flourish - dignity over play"), and the desaturation is part of that
   considered choice, not a leftover default. Do not remove without a
   conscious call to change the memorial treatment itself. */
.mem__print { position: relative; aspect-ratio: 4 / 5; border-radius: 1px; overflow: hidden; background: #cfc9bd; filter: grayscale(1) contrast(.98) brightness(1.02); }
.mem__print img { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; }
.mem__name { font-family: var(--font-display); font-size: 1.35rem; margin-top: var(--sp-4); color: var(--ink); }
.mem__years { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .08em; color: var(--ink-3); margin-top: .2rem; }
.mem__line { color: var(--ink-3); font-size: var(--step--1); font-style: italic; margin-top: var(--sp-2); max-width: 26ch; margin-inline: auto; }

/* ==========================================================================
   Event cards (date-led)
   ========================================================================== */
.event {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line);
  /* Hover: the tint fades in and bleeds a gutter past the row edges via
     box-shadow, so nothing in the row moves (the old padding jump read as
     "fast and aggressive", Erf 2026-09-21). */
  transition: background var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.event:last-child { border-bottom: 1px solid var(--line); }
.event:hover { background: transparent; box-shadow: none; }   /* no tint box: the title and the button carry the hover (Erf, 2026-09-21) */
.event__link, .event__cta { transition: color var(--dur-3) var(--ease-out), background var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out), text-decoration-color var(--dur-3) var(--ease-out); }
.event__link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* The whole row is the target: the title is a real link, and the link's
   click area is stretched over the row so a click anywhere on it opens the
   event. The ticket button sits above that layer and keeps its own link. */
.event { position: relative; }
.event__link { color: inherit; text-decoration: none; }
.event__link::after { content: ""; position: absolute; inset: 0; }
.event:hover .event__link { color: var(--accent); text-decoration-color: currentColor; }
.event__cta { position: relative; z-index: 1; }
.event:hover .event__cta { border-color: var(--accent); color: var(--accent); background: transparent; }
.event__link:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.event__date { text-align: center; min-width: 4.5rem; }
.event__date .d { font-family: var(--font-display); font-size: var(--step-2); line-height: 1; }
.event__date .m { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); }
.event__title { font-size: var(--step-1); font-family: var(--font-display); }
.event__meta { color: var(--ink-3); font-size: var(--step--1); margin-top: 2px; }
.event__cta { white-space: nowrap; }
@media (max-width: 640px) { .event { grid-template-columns: auto 1fr; } .event__cta { grid-column: 2; justify-self: start; } }

/* ==========================================================================
   Banners - Membership / Donate / Volunteer / generic CTA
   ========================================================================== */
.banner {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-band);
  padding: clamp(2rem, 4vw, 3.25rem) clamp(2rem, 5vw, 4.5rem);   /* less vertical air: a one-line band was 57% padding (audit 2, 2026-09-21) */
  overflow: hidden;
  isolation: isolate;
}
.banner--accent { background: var(--accent); color: var(--accent-ink); }
.banner__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-7); align-items: center; }
/* Text + single-CTA banner (no image): the button fills the second grid
   column (the slot a picture would take), centred both ways so it reads as
   a deliberate two-part layout rather than stray text near empty space. */
.banner__grid > .hero__actions--standalone { justify-content: center; align-items: center; }
@media (max-width: 760px) { .banner__grid { grid-template-columns: 1fr; } .banner__grid > .hero__actions--standalone { margin-top: var(--sp-5); } }
/* Every inset photo (winx_banner grid image, winx_feature, winx_split) as a
   mounted object, not a bare rectangle - paper mount, org-colour hairline,
   the same treatment family as every other framed print on the site.
   Excludes .hero__media, which is the ONE deliberately full-bleed image
   (:not() rather than a per-section id, so no new banner/feature/split photo
   can quietly ship bare again). */
.reveal-img:not(.hero__media) {
  background: var(--mount); padding: 12px; border-radius: var(--radius) !important;
  border-bottom: 3px solid var(--accent);
  box-shadow: 0 26px 48px -28px rgba(26, 24, 20, .55);
}
/* !important: winx_banner/winx_split set their own border-radius/overflow
   inline, which otherwise always wins over any stylesheet rule regardless of
   specificity. */
.reveal-img:not(.hero__media) img { border-radius: 2px !important; }
.banner h2 { color: inherit; }
.banner p { color: inherit; opacity: 0.86; }
.banner .eyebrow { color: inherit; opacity: 0.8; }
.banner__bigfig {
  position: absolute; right: -2%; bottom: -30%; z-index: -1;
  font-family: var(--font-display); font-size: 28rem; line-height: 1;
  opacity: 0.06; pointer-events: none;
}
.banner .btn--ghost { border-color: var(--wc-ghost-border); color: var(--paper); }
.banner .btn--ghost::after { background: var(--paper); }
.banner .btn--ghost:hover { color: var(--ink); }
/* On an accent (org-colour) banner the primary button reads as a solid paper
   chip - the same treatment as the richpage cream button - instead of an
   accent-on-accent ghost. Hover fills ink, matching every other primary. */
.banner--accent .btn--accent { --_bg: var(--paper); --_fg: var(--ink); border-color: var(--paper); }
.banner--accent .btn--accent::after { background: var(--ink); }
.banner--accent .btn--accent:hover { color: var(--paper); border-color: var(--ink); }

/* Stat row (impact / membership benefits) */
/* Stat row, redesigned 2026-07-10: siblings are equals. However many stats
   there are, they get identical columns, identical number size, one shared
   baseline, and a common top rule; labels align with each other. */
.stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--sp-6); align-items: baseline; }
@media (max-width: 600px){ .stats { grid-auto-flow: row; grid-auto-columns: auto; } }
.stat { border-top: 1px solid var(--line-strong); padding-top: var(--sp-3); }
.stat .num { font-family: var(--font-display); font-size: var(--step-4); line-height: 1; color: var(--accent); }
/* A lone symbol (infinity, an ampersand) sets no x-height context and reads
   smaller than its sibling digits; scale it back up to their optical size. */
.stat .num--glyph { font-size: calc(var(--step-4) * 1.18); line-height: 0.85; display: inline-block; transform: translateY(0.04em); }
.stat .lbl { font-size: var(--step--1); color: var(--ink-2); margin-top: var(--sp-2); }

/* ==========================================================================
   Why Volunteer
   ========================================================================== */
.why { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-8); align-items: center; }
@media (max-width: 880px) { .why { grid-template-columns: 1fr; } }
.why__list { list-style: none; display: grid; gap: var(--sp-5); }
.why__list li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--line); }
.why__list .n { font-family: var(--font-mono); color: var(--accent); font-size: var(--step--1); padding-top: 6px; }
.why__list h2, .why__list h3 { font-family: var(--font-display); font-size: 1.375rem; margin-bottom: var(--sp-2); }
.why__list p { color: var(--ink-2); font-size: var(--step--1); }

/* ==========================================================================
   History timeline
   ========================================================================== */
.timeline { display: grid; gap: 0; }
.tl {
  display: grid; grid-template-columns: 8rem 1fr; gap: var(--sp-6);
  padding: var(--sp-6) 0; border-top: 1px solid var(--line);
  position: relative;
}
.tl:last-child { border-bottom: 1px solid var(--line); }
/* overflow-wrap keeps a long year label ("1920s and 30s") wrapping inside its
   8rem column instead of spilling over the node dot and the entry text. */
.tl__year { font-family: var(--font-display); font-size: var(--step-2); color: var(--accent); line-height: 1.05; overflow-wrap: anywhere; min-width: 0; }
.tl__year .yr-s { font-size: 0.5em; letter-spacing: 0.02em; }   /* smaller decade "s" (1930s) */
.tl__body h3 { font-family: var(--font-display); font-size: var(--step-1); margin-bottom: var(--sp-2); }
.tl__body p { color: var(--ink-2); }
@media (max-width: 600px){ .tl { grid-template-columns: 1fr; gap: var(--sp-2); } }

/* ==========================================================================
   FAQ (accordion, native <details>)
   ========================================================================== */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: var(--sp-5) 0; font-family: var(--font-display); font-size: var(--step-1); display: flex; justify-content: space-between; gap: var(--sp-4); align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.4em; line-height: 1; transition: transform var(--dur-2) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-bottom: var(--sp-5); color: var(--ink-2); max-width: 72ch; }

/* ==========================================================================
   Quick-action tiles (parents' hub, dashboards)
   ========================================================================== */
.quicktiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--sp-4); }
.quicktile { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2), border-color var(--dur-2); }
.quicktile:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--accent); }
.quicktile .ic { font-size: 1.7rem; }
.quicktile b { font-family: var(--font-display); font-size: var(--step-1); }
.quicktile small { color: var(--ink-3); }

/* ==========================================================================
   Newsletter signup (inline, integrated)
   ========================================================================== */
.newsletter {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--paper-2);
}
.newsletter__form { display: flex; gap: var(--sp-3); flex-wrap: wrap; max-width: 32rem; }
.newsletter input[type="email"] {
  flex: 1; min-width: 14rem;
  padding: 0.85em 1em; background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color var(--dur-2);
}
.newsletter input:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.field-note { font-size: var(--step--1); color: var(--ink-3); margin-top: var(--sp-3); }

/* The two sanctioned opener treatments (guidelines s.2.4). The split pairs the
   header text with a photo; the statement centers the text column in the page
   while the text itself stays left-aligned. Both retire the bare pattern of
   text in the left half against an empty right half. */
.intro__split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--sp-8);
  align-items: center;
}
.intro__split .sechead { margin-bottom: var(--sp-4); }
/* Paper-mount frame, same treatment as the polaroids and the split-band photo,
   so an intro hero image is never left as a bare rectangle. Accent underline
   picks up the page's org colour. */
.intro__fig { width: 100%; background: var(--paper); padding: 12px 12px 14px; border-radius: var(--radius); box-shadow: var(--shadow-2); border-bottom: 3px solid var(--accent); }
.intro__fig img {
  display: block; width: 100%; aspect-ratio: 3 / 2; max-height: 24rem; object-fit: cover;
  border-radius: 1px;
}
@media (max-width: 880px) {
  .intro__split { grid-template-columns: 1fr; gap: var(--sp-5); }
}
/* A text-only opener stays left-aligned on the container edge, sharing the one
   left margin every section below it uses; the title and body carry their own
   measure. (Centring it read as misaligned against the left-aligned page.) */
.intro-statement { max-width: var(--measure); }

/* Contact page (117): the top intro carried a washed, near-empty decorative
   photo that read as a broken box. Drop it and let the intro stand as a clean,
   centered statement - the useful contact details + map live further down. */
.page-id-117 .intro__fig { display: none; }
.page-id-117 .intro__split { display: block; }
.page-id-117 .intro__split > div:first-child {
  max-width: var(--measure);
}

/* Central event filter chips (one bar drives the whole events page). Follows
   the button system's radius/tokens; active chip fills with the branch accent. */
.evfilter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.evfilter__label {
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--ink-3); margin-right: var(--sp-2);
}
.evfilter__chip {
  font-size: var(--step--1); line-height: 1; color: var(--ink-2);
  padding: 0.6em 1.1em; background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: 999px;
  cursor: pointer; transition: color var(--dur-2) var(--ease-out),
    background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.evfilter__chip:hover { border-color: var(--accent); color: var(--ink); }
/* Org filter: mirror the archive's org pills - "All" fills neutral ink, and
   each organization fills with its own colour (so both org filters match). */
.evfilter__chip.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.evfilter__chip[data-org="naivelt"].is-active { background: var(--org-naivelt); border-color: var(--org-naivelt); color: #fff; }
.evfilter__chip[data-org="mws"].is-active { background: var(--org-mws); border-color: var(--org-mws); color: #fff; }
.evfilter__chip[data-org="ujpo"].is-active { background: var(--org-ujpo); border-color: var(--org-ujpo); color: #fff; }
.evfilter-empty { margin-top: var(--sp-4); }

/* Full-bleed image band (guidelines s.2.2d): one photograph edge to edge, no
   chrome; the caption returns to the container grid below it. Selectors are
   doubled up because the base `.gallery figure img` thumbnail rule (4:3 crop,
   radius) sits later in this file and would win the tie. */
.gallery.gallery--band { display: block; width: auto; margin-inline: 0; }   /* Wave 2: in-column, not full-bleed */
.gallery.gallery--band figure { margin: 0; }
.gallery.gallery--band figure img {
  display: block; width: 100%; aspect-ratio: auto;
  height: clamp(18rem, 42vw, 34rem); object-fit: cover;
  border-radius: 0; box-shadow: none;
}
.gallery.gallery--band figcaption {
  max-width: var(--content); margin-inline: auto;
  padding-inline: var(--pad); margin-top: var(--sp-3);
}

/* CTA + newsletter split (guidelines s.2.2a). The text column carries a photo
   under its buttons so it matches the signup card's height; without the photo
   the columns center against each other as before. */
.ctanews__grid { gap: var(--sp-8); align-items: center; }
.ctanews__grid.has-img { align-items: stretch; }
.ctanews__grid.has-img > .stack { display: flex; flex-direction: column; }
.ctanews__fig { flex: 1; min-height: 16rem; margin-top: var(--sp-6); }
.ctanews__fig img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow-1);
}
/* On the dark chapter the standard buttons invert to stay visible; the ghost
   button borrows the banner treatment. The signup card stays a paper island:
   everything inside it returns to the light-surface colours. */
.section--ink .btn { --_bg: var(--paper); --_fg: var(--ink); }
.section--ink .btn--ghost { --_bg: transparent; --_fg: var(--paper); border-color: var(--wc-ghost-border); }
.section--ink .btn--ghost::after { background: var(--paper); }
.section--ink .btn--ghost:hover { color: var(--ink); border-color: var(--paper); }
.section--ink .newsletter { color: var(--ink); }
.section--ink .newsletter .btn { --_bg: var(--ink); --_fg: var(--paper); }
.section--ink .newsletter .eyebrow { color: var(--accent); }
/* A page that closes on the dark chapter meets the footer directly: the
   footer's breathing margin is page rhythm on cream, but between two dark
   blocks it reads as a stray cream slice. */
body:has(.ctanews.section--ink) .footer { margin-top: 0; }

/* A comfortable reading measure for a standalone form. Overridden inside the
   split form box, where the column already sets the width. */
.winx-form__form { max-width: 44rem; }
/* One vertical rhythm for every form on the site: fields 20px apart, label
   8px above its field, the button 32px below the last field (the fields live
   inside .winx-form__step, so the rhythm is set there). */
.winx-form__step { display: grid; gap: var(--sp-5); }
.winx-form__step > div > label { margin-bottom: .5em !important; }
.winx-form__step > div > input, .winx-form__step > div > select, .winx-form__step > div > textarea { padding: .8em 1em !important; }
.winx-form__step > .h4 { margin-top: var(--sp-3) !important; }
.winx-form__nav { margin-top: var(--sp-6) !important; }
.winx-form .field-note { margin-top: var(--sp-2); }

/* Form box, split layout.
   The wording sits in its own column beside the fields so the box spans the full
   container, matching the two-column sections it usually follows. The fields take
   the wider column: they are what the visitor came to do. */
.fbox--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.fbox__intro { padding-top: var(--sp-2); }
/* The intro column is short; let it ride along while the tall field column scrolls. */
@media (min-width: 60.0625rem) {
  .fbox__intro { position: sticky; top: var(--sp-6); }
}
/* The panel already carries .newsletter, so it keeps the card border and tint.
   Lift the 32rem cap .newsletter__form puts on the signup variant, and the inline
   44rem the forms engine prints, so fields fill the column they were given. */
.fbox__panel .newsletter__form { max-width: none; }
.fbox__panel .winx-form__form { max-width: none; }
@media (max-width: 60rem) {
  .fbox--split { grid-template-columns: 1fr; gap: var(--sp-5); }
  .fbox__intro { padding-top: 0; }
}
/* Someone who asked for less motion should not get a column that follows them
   down the page. */
@media (prefers-reduced-motion: reduce) {
  .fbox__intro { position: static; }
}

/* Dark variant (formbox's "dark" switcher): a prominent CTA card, e.g. the
   Folk Choir's "Sing with us" join block. One dark card wraps both columns;
   the field panel's own .newsletter card styling is neutralized so it
   doesn't double-box inside it. */
.fbox--dark {
  background: var(--ink); color: var(--on-dark);
  border-radius: var(--radius-lg); padding: clamp(1.75rem, 4vw, 3rem);
}
.fbox--dark .fbox__intro .eyebrow { color: var(--accent-bright, var(--accent)); }
.fbox--dark .fbox__intro .eyebrow::before { background: currentColor; }
.fbox--dark .fbox__intro h2 { color: var(--on-dark); }
.fbox--dark .fbox__intro p.muted { color: rgba(251, 243, 239, .72); }
/* Dark CTA forms used to float bare fields on the ink; they now carry the same paper form card as every other form on the site (Erf, 2026-09-21 "design of this sucks"). */
.fbox--dark .field-note { color: rgba(251, 243, 239, .6); }
.fbox--dark .fbox__panel .field-note { color: var(--ink-3); }
.fbox--dark .fbox__intro { align-self: start; }
.fbox--dark .fbox__intro h2 { margin-block: var(--sp-4) var(--sp-5); }
.newsletter--dark {
  background: var(--ink); color: var(--on-dark); border-color: transparent;
}
.newsletter--dark .eyebrow { color: var(--accent-bright, var(--accent)); }
.newsletter--dark .eyebrow::before { background: currentColor; }
.newsletter--dark h2 { color: var(--on-dark); }
.newsletter--dark p.muted { color: rgba(251, 243, 239, .72); }
.newsletter--dark .field-note { color: rgba(251, 243, 239, .6); }

/* ---- Unified form card ------------------------------------------------- *
 * Every real form (the fbox forms: get-involved, contact, rental, working
 * group, pre-registration; and the mk-formcard forms: admissions, contact
 * mode) renders the same winx form engine. Give them ONE surface + label
 * treatment so a form looks the same everywhere. The .fbox--dark override
 * above (specificity 0,3,0) still wins, so dark CTA forms stay borderless. */
.mk-formcard.mk-formcard, .fbox__panel.newsletter {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: none;
}
.mk-formcard .winx-form label:not([style*="font-weight:400"]),
.fbox__panel .winx-form label:not([style*="font-weight:400"]) {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-2);
  margin-bottom: .4em;
}

/* ==========================================================================
   Merch / booklet teaser (WooCommerce later)
   ========================================================================== */
.shopcard { position: relative; }
.shopcard .card__media { aspect-ratio: 1; }
.price { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink); }
.badge {
  position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 2;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 2px;
}

/* ==========================================================================
   Podcast - "Listen on" platforms, episode list, guest grid
   ========================================================================== */

/* Platform buttons (YouTube / Apple / Spotify) */
.platforms { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.platform {
  --brand: var(--ink);
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: 0.7em 1.15em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);   /* one button shape language (Prompt 6): was 999px pill */
  background: var(--paper);
  font-size: var(--step--1); font-weight: 500;
  transition: border-color var(--dur-2) var(--ease-out),
              background var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.platform svg { width: 1.15em; height: 1.15em; flex: none; transition: color var(--dur-2); color: var(--brand); }
.platform small { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); transition: color var(--dur-2); }
.platform b { font-weight: 600; }
.platform:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-2px); }
.platform:hover svg, .platform:hover small { color: rgba(255,255,255,0.85); }
.platform--yt { --brand: var(--brand-youtube); }
.platform--apple { --brand: #8a3ab9; }
.platform--spotify { --brand: var(--brand-spotify); }
/* On dark banners */
.banner .platform { background: rgba(246,243,236,0.06); border-color: rgba(246,243,236,0.28); color: var(--paper); }
.banner .platform small { color: rgba(246,243,236,0.6); }
.banner .platform svg { color: currentColor; }

/* Episode rows (date-free, number-led) */
.ep {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-5);
  padding: var(--sp-5) 0; border-top: 1px solid var(--line);
  transition: padding-inline var(--dur-2) var(--ease-out);
}
.ep:last-child { border-bottom: 1px solid var(--line); }
.ep:hover { padding-inline: var(--sp-4); }
.ep__num { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; color: var(--accent); min-width: 3.5rem; }
.ep__title { font-family: var(--font-display); font-size: var(--step-1); }
.ep__meta { color: var(--ink-3); font-size: var(--step--1); margin-top: 2px; }
@media (max-width: 620px){ .ep { grid-template-columns: auto 1fr; } .ep a.btn { grid-column: 2; justify-self: start; } }

/* Guest grid */
.guests { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
@media (max-width: 1000px){ .guests { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px){ .guests { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px){ .guests { grid-template-columns: 1fr; } }
.guest { position: relative; }
.guest .card__media { aspect-ratio: 4 / 5; }
.guest .card__media .ph { filter: grayscale(0.15); transition: transform var(--dur-3) var(--ease-out), filter var(--dur-3); }
.guest:hover .card__media .ph { transform: scale(1.05); filter: grayscale(0); }
.guest__ep {
  position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 2;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 2px;
}
.guest__role { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
.guest__name { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.05; }
.guest__bio { color: var(--ink-2); font-size: var(--step--1); line-height: 1.5; }
.guest .card__foot a { font-size: var(--step--1); }
/* Make the whole guest card clickable while keeping the visible link */
.guest__link { position: absolute; inset: 0; z-index: 1; text-indent: -9999px; }
.guest .card__body { position: relative; z-index: 2; pointer-events: none; }
.guest .card__body a { pointer-events: auto; position: relative; z-index: 3; }

/* Per-platform listen links in the card foot. These sit above the whole-card
   overlay link (z-index 3, pointer-events auto, inherited from the rule above),
   so a click on an icon opens that platform and a click anywhere else on the card
   opens the preferred one. */
.guest .card__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.guest__listen {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.guest__links svg { width: 18px; height: 18px; }

/* ==========================================================================
   Social icons
   ========================================================================== */
.socials { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.social-ic {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); color: var(--ink);
  transition: transform var(--dur-2) var(--ease-out), background var(--dur-2), color var(--dur-2), border-color var(--dur-2);
}
.social-ic svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
.social-ic:hover { transform: translateY(-3px); }
.social-ic--ig:hover { background: var(--brand-instagram); border-color: var(--brand-instagram); color: #fff; }
.social-ic--tiktok:hover { background: #111; border-color: #111; color: #fff; }
.social-ic--yt:hover { background: var(--brand-youtube); border-color: var(--brand-youtube); color: #fff; }
.social-ic--link:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.social-ic--fb:hover { background: var(--brand-facebook); border-color: var(--brand-facebook); color: #fff; }
.social-ic--wiki:hover { background: #202122; border-color: #202122; color: #fff; }

/* ==========================================================================
   Staff grid - click a face to reveal a bio beside it
   ========================================================================== */
/* Staff as membership cards, not a headshot grid (object-treatments.html
   "D, STAFF"). Deliberately NO status markers - no member number, no "in
   good standing," no rank: a red header strip, a portrait, typed fields,
   and a signature line (the person's own real name, in script) instead of
   a number. Belonging, not a badge. */
.staff { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); align-items: start; }
@media (max-width: 720px) { .staff { grid-template-columns: 1fr; } }
.staff__card {
  display: block; text-align: left; width: 100%; cursor: pointer; color: inherit;
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 6px;
  box-shadow: 0 16px 30px -18px rgba(26, 24, 20, .5); overflow: hidden;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.staff__card:hover { box-shadow: var(--shadow-2); transform: translateY(-4px); }
.staff__bar {
  display: block; background: var(--accent); color: var(--on-dark);
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase;
  padding: var(--sp-3) var(--sp-4);
}
/* House colour per org - same UJPO/MWS/Naivelt map as assets/spotlight.js's
   ORG_COLORS, keyed to "mws" (the one canonical key sitewide since the
   2026-07-13 unification). Scoped under [data-org] so specificity beats
   .staff__bar regardless of source order. */
.staff__card[data-org="mws"] .staff__bar { background: var(--org-mws); }
.staff__card[data-org="naivelt"] .staff__bar { background: var(--org-naivelt); }
.staff__meta { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--sp-4); align-items: center; padding: var(--sp-4) var(--sp-4) var(--sp-3); }
.staff__face {
  position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius);
  display: grid; place-items: center; flex: none;
  background: var(--accent-soft); color: var(--accent);
  font-family: var(--font-display); font-size: var(--step-3);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(26, 24, 20, .1);
}
.staff__face--photo { background: var(--paper-3); }
.staff__face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.staff__card[data-org="mws"] .staff__face:not(.staff__face--photo) { background: color-mix(in srgb, var(--org-mws) 18%, var(--paper)); color: var(--org-mws); }
.staff__card[data-org="naivelt"] .staff__face:not(.staff__face--photo) { background: color-mix(in srgb, var(--org-naivelt) 18%, var(--paper)); color: var(--org-naivelt); }
.staff__card:hover .staff__face { transform: none; }
.staffgroup + .staffgroup { margin-top: var(--sp-8); }
.staffgroup__title { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--sp-5); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.staff__fields { display: block; min-width: 0; }
.staff__name { display: block; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.15; }
.staff__label { display: block; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: var(--sp-2); }
.staff__role { display: block; font-size: var(--step--1); color: var(--ink-2); line-height: 1.2; }
.staff__card[data-org="mws"] .staff__label,
.staff__card[data-org="mws"] .staff__role { color: var(--accent-mws); }
.staff__sig {
  display: block; font-family: var(--font-hand); font-size: 1.25rem; color: var(--ink-2);
  border-top: 1px solid var(--line); margin: 0 var(--sp-4); padding: var(--sp-2) 0 var(--sp-3);
}
.staff__bio { display: none; }
/* open state: card spans the row, bio appears next to the face */
.staff__card.is-open {
  grid-column: 1 / -1; flex-direction: row; align-items: center; text-align: left;
  gap: var(--sp-6); background: var(--paper); border-color: var(--line-strong); box-shadow: var(--shadow-2);
  padding: var(--sp-6);
}
.staff__card.is-open .staff__meta { flex: none; }
.staff__card.is-open .staff__bio { display: block; max-width: 52ch; }
.staff__bio p { color: var(--ink-2); }
.staff__bio .staff__name-lg { font-family: var(--font-display); font-size: var(--step-2); margin-bottom: var(--sp-2); }
.staff__bio .staff__role-lg { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: var(--sp-3); }
@media (max-width: 640px) { .staff__card.is-open { flex-direction: column; text-align: center; } }
/* On the dark footer */
.footer .social-ic { border-color: rgba(246,243,236,0.28); color: rgba(246,243,236,0.82); }
.footer .social-ic--ig:hover { color: #fff; }

/* ==========================================================================
   Link-in-bio page (Linktree replacement - editable from the Staff Hub)
   ========================================================================== */
.linkbio { min-height: 100svh; display: flex; flex-direction: column; align-items: center;
  padding: var(--sp-8) var(--gutter) var(--sp-9);
  background: var(--paper);
}
.linkbio__inner { width: min(31rem, 100%); text-align: center; }
.linkbio__crest { width: 7rem; height: auto; margin: 0 auto var(--sp-4); }
.linkbio h1 { font-size: var(--step-2); }
.linkbio .tag { color: var(--ink-2); margin-top: var(--sp-2); }
.linkbio .socials { justify-content: center; margin: var(--sp-5) 0 var(--sp-6); }
.linklist { display: grid; gap: var(--sp-3); }
.linkbtn {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg); text-align: left;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2), border-color var(--dur-2);
}
.linkbtn:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--accent); }
.linkbtn .ic { font-size: 1.4rem; width: 1.6rem; text-align: center; flex: none; }
.linkbtn b { font-size: var(--step-0); display: block; }
.linkbtn small { color: var(--ink-3); }
.linkbtn .arrow { margin-left: auto; color: var(--accent); transition: transform var(--dur-2) var(--ease-out); }
.linkbtn:hover .arrow { transform: translateX(4px); }
.linkbtn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.linkbtn--primary small { color: rgba(255,255,255,0.8); }
.linkbtn--primary .arrow { color: var(--accent-ink); }
.linkbio__foot { margin-top: var(--sp-7); font-size: var(--step--1); color: var(--ink-3); }

/* ==========================================================================
   Photo gallery (history + past events). Real photos drop into .ph slots.
   ========================================================================== */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--sp-4) var(--sp-3); align-items: start; }
/* Editorial photo treatment: straight, grid-aligned, no mat, no rotation, no
   heavy shadow. (The instant-camera / polaroid frame was retired 2026-07-10:
   "editorial, not scrapbook.") */
.gallery figure { margin: 0; background: none; padding: 0;
  transition: transform var(--dur-3) var(--ease-out); }
.gallery figure .ph, .gallery figure img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; display: block;
  border-radius: var(--radius); box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-3) var(--ease-out); }
.gallery figure:has(img) { cursor: zoom-in; }
/* Fact list (used on Visit/location blocks) */
.factlist { display: grid; gap: 0; border-top: 1px solid var(--line); }
.factlist > div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.factlist dt { font-family: var(--font-mono, monospace); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent, var(--ink-2)); margin: 0; }
.factlist dd { margin: 0; color: var(--ink); }
@media (max-width: 520px) { .factlist > div { grid-template-columns: 1fr; gap: var(--sp-1); } }
/* Placeholder for the self-hosted MapLibre/OpenFreeMap widget (replaces the
   removed Google Maps embeds/links). Marked so it's obviously not-yet-live
   until the map widget mounts into it. */
.map-embed { display: flex; align-items: center; justify-content: center; }
.map-embed:empty::before {
  content: "Map"; font-family: var(--font-mono, monospace); font-size: var(--step--2);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.gallery figure:hover { transform: translateY(-3px); }
.gallery figure:hover .ph, .gallery figure:hover img { box-shadow: var(--shadow-2); }
/* Camp Programming: bring its gallery into the site's framed-print language
   (paper mount + org hairline + hover-lift), matching the archive/cabins/
   signature photos instead of the bare editorial crop. Scoped to that page. */
body.page-id-105 .gallery figure {
  background: var(--mount); padding: 10px; border-radius: var(--radius);
  border-bottom: 3px solid var(--accent);
  box-shadow: 0 14px 26px -16px rgba(26,24,20,.5), inset 0 0 0 1px rgba(26,24,20,.05);
}
body.page-id-105 .gallery figure .ph,
body.page-id-105 .gallery figure img { border-radius: 2px; box-shadow: none; }
body.page-id-105 .gallery figure:hover { transform: translateY(-5px); }
body.page-id-105 .gallery figure:hover .ph,
body.page-id-105 .gallery figure:hover img { box-shadow: none; }
/* Captions step down to quiet editorial labels (the handwritten look left with
   the printed frame). */
.gallery figcaption {
  font-size: var(--step--1); line-height: 1.4; color: var(--ink-2); text-align: left;
  padding: 0.55rem 0.1rem 0.85rem; }
/* Truncate long captions in the grid; the photo lightbox (main.js) already
   shows the full caption on click, so nothing is lost (client feedback
   2026-07-09). */
.gallery figcaption {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
  /* Overflow is clipped at the padding edge, not the content edge, so a bottom
     padding lets the third line show through under the ellipsis. Keep the gap,
     but as a margin outside the clipped box. */
  padding-bottom: 0; margin-bottom: 0.85rem;
}
.gallery--wide figure:first-child { grid-column: span 2; }
/* Detail shots of a single room, four of them: an even 2x2 reads tidier than an
   auto-filled row of three with an orphan underneath. */
.gallery--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .gallery--pairs { grid-template-columns: 1fr; } }

/* Cabin "look around" gallery: the mounted-print object treatment from the
   cabins index cards (.cabins-plates), not the sitewide bare editorial
   figure - every photo on the site is a framed object; these were the one
   inconsistent set. Scoped to #inside, the anchor id winx_gallery's own
   section_id control sets on all three (and only the three) cabin detail
   pages, so the shared .gallery/.gallery--pairs markup is untouched
   everywhere else it's reused (2026-07-13). A fixed 4/3 (not per-photo
   --ar) so the 2x2 grid stays uniform, matching the cabins index cards -
   grids stay uniform site-wide, only the spotlight/single-photo views
   adapt to a photo's real shape. */
#inside .gallery--pairs figure {
  background: var(--mount); padding: 10px; border-radius: var(--radius-lg);
  box-shadow: 0 14px 26px -16px rgba(26, 24, 20, .5), inset 0 0 0 1px rgba(26, 24, 20, .05);
  border-bottom: 3px solid var(--accent);
}
#inside .gallery--pairs figure .ph,
#inside .gallery--pairs figure img {
  aspect-ratio: 4 / 3; border-radius: 2px; box-shadow: none;
}
#inside .gallery--pairs figcaption {
  font-family: var(--font-display); font-size: var(--step-0, 1rem);
  padding: var(--sp-3) 0.1rem 0.85rem; -webkit-line-clamp: unset;
}
@media (max-width: 600px) { .gallery--wide figure:first-child { grid-column: auto; } }

/* Clean gallery: a plain modern photo grid, no printed-frame / polaroid look.
   Rounded images, even masonry-ish rows, a soft zoom on hover. Used for event
   recaps and anywhere the archival frame would be too much. */
.gallery--clean {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--sp-3); margin-top: var(--sp-5);
}
.gallery--clean figure {
  margin: 0; padding: 0; background: none; box-shadow: none; transform: none;
  border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3;
}
.gallery--clean figure a { display: block; width: 100%; height: 100%; }
.gallery--clean img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0;
  transition: transform var(--dur-3) var(--ease-out); filter: none;
}
.gallery--clean figure:hover { transform: none; box-shadow: var(--shadow-2); }
.gallery--clean figure:hover img { transform: scale(1.04); }
.gallery--clean figcaption { display: none; }
@media (prefers-reduced-motion: reduce) { .gallery--clean figure:hover img { transform: none; } }

/* Event recap spacing */
.evsingle__videos, .evsingle__photos { margin-top: var(--sp-6); }

/* Decorative snapshots beside content: straightened 2026-07-10 (no tilts, no
   size wobble). A modest vertical stagger keeps the rhythm; everything sits
   square on the grid. */
.gallery--aside {
  display: flex;
  grid-template-columns: none;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: flex-start;
  gap: var(--sp-5) var(--sp-6);
  /* The stagger is translateY (max 1.6rem) and transforms take no layout
     space, so the bottom padding reserves the drop. Without it a photo
     intrudes into whatever follows. */
  padding-block: var(--sp-2) calc(var(--sp-6) + 1.8rem);
}
.gallery--aside figure { position: relative; flex: 0 1 clamp(10.5rem, 21vw, 15rem); }
.gallery--aside figure:nth-child(even) { transform: translateY(1.6rem); }
/* A pair should sit beside the text, not as a centred exhibit. */
.gallery--aside figure:first-child:nth-last-child(2),
.gallery--aside figure:first-child:nth-last-child(2) ~ figure { margin-left: auto; }
.gallery--aside figure:first-child:nth-last-child(2) ~ figure { margin-left: 0; margin-right: clamp(0rem, 8vw, 9rem); }
.gallery--aside figure:hover { transform: translateY(-3px); z-index: 3; }
.gallery--aside figure:nth-child(even):hover { transform: translateY(calc(1.6rem - 3px)); }
@media (max-width: 680px) {
  .gallery--aside { justify-content: center; gap: var(--sp-4); }
  .gallery--aside figure { flex-basis: clamp(9rem, 40vw, 12rem) !important; }
  .gallery--aside figure:first-child:nth-last-child(2),
  .gallery--aside figure:first-child:nth-last-child(2) ~ figure { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery--aside figure, .gallery--aside figure:hover { transform: none; }
}

/* Margin prints: photographs floated into the page's empty side margin beside
   their section, costing zero vertical space. The gallery widget sits in the
   SAME Elementor column as the content it decorates (wrap = none); the widget
   overlay spans that column, pointer-events pass through it, and only the
   prints themselves are interactive. Captions stay in the DOM for the photo
   lightbox (main.js reads figcaption.textContent) but never render inline.
   Below 1320px the margin is too narrow to hold a print, so they bow out. */
/* The floating margin-prints are deleted site-wide: under the centered frame
   they had no margin to live in and overlapped the text. The whole widget is
   hidden and its Elementor wrapper collapsed so it leaves no gap. */
.gallery--margin { display: none; }
.elementor-widget-wrap:has(.gallery--margin) { position: static; }
.elementor-element:has(> .elementor-widget-container > .gallery--margin) { display: none; }

/* Filmstrip: a long run of photographs stays one row tall and scrolls sideways,
   rather than pushing the rest of the page down a screen and a half.
   Full-bleed: the strip breaks out of .container to run edge to edge (same
   pattern as .linkbio__houses; body's overflow-x: clip absorbs the scrollbar
   sliver 100vw leaves on Windows). The inline padding puts the first frame
   back on the container's left edge, under the section heading, so only the
   overflow runs into the margin. */
.gallery--strip {
  display: flex;
  grid-template-columns: none;          /* it is not a grid any more */
  gap: var(--sp-3);
  /* Wave 2 consistency: the filmstrip stays inside the content column (was
     full-bleed 100vw) so it shares the same edges as the text and other
     galleries; it still scrolls horizontally within that width. */
  width: auto;
  margin-inline: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 0;
  /* overflow-x: auto forces overflow-y to compute to auto as well, which would
     shave the drop shadows and the hover lift. The block padding gives them room. */
  padding: 0.9rem 0 1.4rem;
  overscroll-behavior-x: contain;       /* do not swipe the browser back a page */
  scrollbar-width: thin;
  scrollbar-color: var(--gold-deep, #c9a85f) transparent;
}
.gallery--strip figure {
  flex: 0 0 clamp(13rem, 24vw, 19rem);
  scroll-snap-align: center;
  /* The scattered-Polaroid tilt reads as damage once the frames are clipped by a
     scroll container, so the strip lies flat. */
  transform: none;
}
.gallery--strip figure:hover { transform: translateY(-4px); }
.gallery--strip::-webkit-scrollbar { height: 7px; }
.gallery--strip::-webkit-scrollbar-track { background: transparent; }
.gallery--strip::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--gold-deep, #c9a85f) 70%, transparent);
  border-radius: 999px;
}
/* It takes focus, so it must show it. */
.gallery--strip:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .gallery--strip { scroll-snap-type: none; scroll-behavior: auto; }
  .gallery--strip figure:hover { transform: none; }
}

/* Photo lightbox (sitewide) */
.photolb { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem); background: rgba(16,12,9,.82); backdrop-filter: blur(6px); opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out); }
.photolb.is-open { display: flex; opacity: 1; }
.photolb__frame { position: relative; background: #fdfcf8; padding: 0.9rem 0.9rem 0; border-radius: 2px; max-width: min(92vw, 60rem);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); transform: scale(.97); transition: transform var(--dur-2) var(--ease-out); }
.photolb.is-open .photolb__frame { transform: scale(1); }
.photolb__frame img { display: block; max-width: 100%; max-height: 74vh; object-fit: contain; border-radius: 1px; }
.photolb__cap { font-family: var(--font-hand); font-size: 1.5rem; color: var(--cover-black, #16120f);
  text-align: center; padding: 0.7rem 0.6rem 1rem; }
.photolb__count { display: block; font-family: var(--font-mono, monospace); font-size: var(--step--2); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-2); margin-top: 0.35rem; }
.photolb__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 50%;
  border: 1px solid rgba(253,252,248,.4); background: rgba(16,12,9,.5); color: #fdfcf8; font-size: 1.4rem; line-height: 1;
  cursor: pointer; display: grid; place-items: center; transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.photolb__btn:hover { background: rgba(16,12,9,.85); transform: translateY(-50%) scale(1.06); }
.photolb__prev { left: clamp(0.5rem, 2vw, 2rem); }
.photolb__next { right: clamp(0.5rem, 2vw, 2rem); }
.photolb__close { position: absolute; top: clamp(0.6rem, 2vw, 1.4rem); right: clamp(0.6rem, 2vw, 1.4rem); width: 2.6rem; height: 2.6rem;
  border-radius: 50%; border: 1px solid rgba(253,252,248,.4); background: rgba(16,12,9,.5); color: #fdfcf8; font-size: 1.3rem;
  cursor: pointer; display: grid; place-items: center; z-index: 2; }
.photolb__close:hover { background: rgba(16,12,9,.85); }
@media (max-width: 600px) { .photolb__btn { width: 2.4rem; height: 2.4rem; font-size: 1.1rem; } .photolb__cap { font-size: 1.25rem; } }
@media (prefers-reduced-motion: reduce) { .gallery figure, .photolb, .photolb__frame { transition: none; } .gallery figure:nth-child(2n), .gallery figure:nth-child(3n) { transform: none; } }

/* Video slot (embed placeholder for past events) */
.videoslot { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }
.videoslot .ph { width: 100%; height: 100%; }
.videoslot .play { position: absolute; inset: 0; display: grid; place-items: center; }
.videoslot .play span { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-size: 1.4rem; box-shadow: var(--shadow-2); transition: transform var(--dur-2) var(--ease-out); }
.videoslot:hover .play span { transform: scale(1.08); }

/* Video cards (YouTube footage - thumbnail + play, links to the video) */
/* ==========================================================================
   Reels & video features (winx_reels) - click-to-play YouTube facades
   ========================================================================== */
.reels { margin-top: var(--sp-5); }
.reel { margin: 0; position: relative; }
.reel__play {
  display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  background: var(--coal-2); border-radius: var(--radius-lg); overflow: hidden;
  position: relative; line-height: 0;
  box-shadow: 0 1px 2px rgba(22,18,15,.14), 0 18px 34px -20px rgba(22,18,15,.5);
}
/* position:absolute + inset:0 (not width/height:100%): Elementor's own
   `.elementor img{height:auto}` (0,1,1) otherwise beats .reel__poster's
   height (0,1,0) and the poster collapses to the source image's intrinsic
   size - same fix as .sigs__print img / .founder__print img elsewhere. */
.reel__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-3) var(--ease-out), filter var(--dur-3); }
.reel__play:hover .reel__poster { transform: scale(1.03); filter: brightness(1.05); }
.reel__badge {
  position: absolute; inset: 0; margin: auto; width: 3.4rem; height: 3.4rem;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(216,57,43,.92); color: #fff; font-size: 1.2rem;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.6); transition: transform var(--dur-2), background var(--dur-2);
}
.reel__badge > span { transform: translateX(2px); }
.reel__play:hover .reel__badge { transform: scale(1.08); background: var(--accent-bright); }
.reel__play:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.reel__frame { width: 100%; height: 100%; border: 0; border-radius: var(--radius-lg); display: block; }
.reel__cap { margin: var(--sp-3) 0 0; font-size: var(--step--1); color: var(--ink-2); line-height: 1.3; }

/* Reels: vertical 9:16, one row, scrolls sideways (the whole strip is full-bleed
   like the photo filmstrip). */
.reels--strip {
  display: flex; gap: var(--sp-4); width: auto; margin-inline: 0;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
  scroll-padding-inline: 0; padding: 0.4rem 0 1.2rem;
  overscroll-behavior-x: contain; scrollbar-width: thin;
}
.reels--strip .reel { flex: 0 0 clamp(13rem, 22vw, 16rem); scroll-snap-align: center; }
.reels--strip .reel__play,
.reels--strip .reel__frame { aspect-ratio: 9 / 16; }
.reels--strip:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Features: wide 16:9, a normal responsive grid. auto-fit (not auto-fill) so
   that a lone video expands to fill the row instead of sitting in one narrow
   track beside invisible empty ones reserved for videos that aren't there. */
.reels--features { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--sp-5); }
.reels--features .reel__play,
.reels--features .reel__frame { aspect-ratio: 16 / 9; }

@media (prefers-reduced-motion: reduce) {
  .reel__play:hover .reel__poster { transform: none; }
  .reel__play:hover .reel__badge { transform: none; }
}

/* Folk Choir: one featured recording, given weight - reuses .reel/.reel__play
   (reels.js click-to-play, no new JS) inside a mounted-print-style frame
   instead of a bare grid tile. */
.choir-feature { max-width: none; margin: var(--sp-6) 0 0; }
.choir-feature__reel { background: var(--mount); padding: 14px; border-radius: var(--radius-lg); border-bottom: 4px solid var(--accent); box-shadow: 0 20px 40px -20px rgba(26, 24, 20, .5); }
.choir-feature__reel .reel { width: 100%; }
.choir-feature__reel .reel__play, .choir-feature__reel .reel__frame { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); }
.choir-feature__reel .reel__badge { width: 4.4rem; height: 4.4rem; font-size: 1.5rem; }
.choir-feature__meta { text-align: left; margin-top: var(--sp-5); }
.choir-feature__title { font-family: var(--font-display); font-size: var(--step-2); }
.choir-feature__translit { display: block; font-family: var(--font-display); font-style: italic; font-size: var(--step-0); color: var(--ink-3); margin-top: .2em; }
.choir-feature__context { color: var(--ink-2); margin-top: var(--sp-2); }

/* ==========================================================================
   Vertical video row (winx_vertical_video) - a small curated set of 9:16
   clips in the site's own framed-print language: mount, org hairline,
   hover-lift, outlined-badge duration. Self-hosted files only; a tile with
   no video is a plain still (no play button - nothing to click), and a
   tile with neither video nor cover is never rendered at all (see PHP).
   Same shape family as .reel but its own classes, since the tile
   behaviour (opens a custom lightbox) is different from reels.js.
   ========================================================================== */
.vvideo__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
@media (max-width: 820px) { .vvideo__row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vvideo__row { grid-template-columns: 1fr; max-width: 20rem; margin-inline: auto; } }
.vvideo__tile { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; transition: transform var(--dur-2) var(--ease-out); }
.vvideo__tile:hover, .vvideo__tile:focus-visible { transform: translateY(-4px); }
.vvideo__tile--still { cursor: default; }
.vvideo__tile--still:hover, .vvideo__tile--still:focus-visible { transform: none; }
.vvideo__mount {
  display: block; background: var(--mount); padding: 10px; border-radius: var(--radius); border-bottom: 3px solid var(--accent);
  box-shadow: 0 18px 30px -18px rgba(26, 24, 20, .45); transition: box-shadow var(--dur-2) var(--ease-out);
}
.vvideo__tile:hover .vvideo__mount, .vvideo__tile:focus-visible .vvideo__mount { box-shadow: 0 28px 42px -22px rgba(26, 24, 20, .5); }
.vvideo__screen { display: block; position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 2px; background: #1a1714; }
.vvideo__preview, .vvideo__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-3) var(--ease-out), filter var(--dur-3); }
.vvideo__tile:hover .vvideo__preview, .vvideo__tile:hover .vvideo__poster { transform: scale(1.03); filter: brightness(1.05); }
/* No video/cover asset at all shouldn't happen (PHP skips such rows), but a
   flat placeholder tone is the honest fallback if it ever does. */
.vvideo__screen:empty::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, #1a1714, #1a1714 10px, #211d18 10px, #211d18 20px); }
.vvideo__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--accent);
  display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
  transition: transform var(--dur-2) var(--ease-out), background var(--dur-2);
}
.vvideo__tile:hover .vvideo__play, .vvideo__tile:focus-visible .vvideo__play { transform: translate(-50%, -50%) scale(1.08); background: var(--accent-bright); }
.vvideo__play > span { display: block; width: 0; height: 0; border-left: 1rem solid var(--on-dark); border-top: .6rem solid transparent; border-bottom: .6rem solid transparent; margin-left: .2rem; }
.vvideo__dur {
  position: absolute; bottom: 10px; right: 10px; font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: .04em; color: var(--on-dark); background: rgba(26, 24, 20, .6); padding: 3px 7px; border-radius: 2px;
}
.vvideo__cap { display: block; margin-top: var(--sp-3); }
.vvideo__t { display: block; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2; }
.vvideo__m { display: block; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .05em; color: var(--ink-3); text-transform: uppercase; margin-top: var(--sp-2); }
@media (prefers-reduced-motion: reduce) {
  .vvideo__tile, .vvideo__mount, .vvideo__preview, .vvideo__poster, .vvideo__play { transition: none; }
  .vvideo__tile:hover, .vvideo__tile:focus-visible { transform: none; }
  .vvideo__tile:hover .vvideo__preview, .vvideo__tile:hover .vvideo__poster { transform: none; }
}

/* Vertical video lightbox: a fully custom player chrome (org-colour
   scrubber, own play button) driving a native, self-hosted <video> - no
   external player script, no platform chrome, ever. */
.vvlb { position: fixed; inset: 0; z-index: var(--z-overlay, 200); display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 5vw, 3rem); background: rgba(14, 11, 8, .92); }
.vvlb[hidden] { display: none; }
.vvlb__close {
  position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px));
  z-index: 4; width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(251, 247, 239, .5); background: rgba(0, 0, 0, .45); color: var(--paper);
  font-size: 1.55rem; line-height: 1; cursor: pointer; transition: background var(--dur-2) var(--ease-out);
}
.vvlb__close:hover { background: rgba(251, 247, 239, .16); }
.vvlb__frame {
  position: relative; width: min(92vw, 380px); aspect-ratio: 9 / 16; background: #000; overflow: hidden;
  border-radius: 6px; border-bottom: 3px solid var(--accent); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
}
.vvlb__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.vvlb__playbtn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 4.2rem; height: 4.2rem; border-radius: 50%; background: rgba(20, 15, 12, .55); border: 1px solid rgba(251, 247, 239, .5);
  display: grid; place-items: center; cursor: pointer; transition: background var(--dur-2), opacity var(--dur-2);
}
.vvlb__playbtn:hover { background: var(--accent); }
.vvlb__playbtn > span { display: block; width: 0; height: 0; border-left: 1.1rem solid var(--on-dark); border-top: .7rem solid transparent; border-bottom: .7rem solid transparent; margin-left: .25rem; }
/* JS toggles .is-playing on .vvlb__frame; the play button hides once
   playback starts and only the scrubber/pause affordance remains. */
.vvlb__frame.is-playing .vvlb__playbtn { opacity: 0; pointer-events: none; }
.vvlb__frame.is-playing .vvlb__playbtn > span { display: none; }
.vvlb__frame:not(.is-playing) .vvlb__playbtn > span { display: block; }
.vvlb__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 14px 16px; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); }
.vvlb__track { height: 4px; background: rgba(251, 247, 239, .3); border-radius: 2px; position: relative; cursor: pointer; }
.vvlb__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--accent); border-radius: 2px; }
.vvlb__fill::after { content: ""; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); width: 11px; height: 11px; border-radius: 50%; background: var(--on-dark); }
.vvlb__row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-top: 9px; }
.vvlb__title { font-family: var(--font-display); font-size: var(--step--1); color: var(--paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vvlb__time { font-family: var(--font-mono); font-size: var(--step--2); color: rgba(251, 247, 239, .75); white-space: nowrap; }
@media (max-width: 480px) { .vvlb__frame { width: 92vw; } }

/* ==========================================================================
   Horizontal video row (winx_video) - YouTube-backed 16:9 tiles in the same
   framed-print language as the vertical row (mount, org hairline,
   hover-lift, custom play button); the poster is always ours, the player
   behind the click is YouTube's own. Rows with no valid videos render
   nothing (see PHP) - never an empty grid, never an editor note.
   ========================================================================== */
.hvideo__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
@media (max-width: 720px) { .hvideo__row { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; } }
.hvideo__tile { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; transition: transform var(--dur-2) var(--ease-out); }
.hvideo__tile:hover, .hvideo__tile:focus-visible { transform: translateY(-4px); }
.hvideo__mount {
  display: block; background: var(--mount); padding: 10px; border-radius: var(--radius); border-bottom: 3px solid var(--accent);
  box-shadow: 0 18px 30px -18px rgba(26, 24, 20, .45); transition: box-shadow var(--dur-2) var(--ease-out);
}
.hvideo__tile:hover .hvideo__mount, .hvideo__tile:focus-visible .hvideo__mount { box-shadow: 0 28px 42px -22px rgba(26, 24, 20, .5); }
.hvideo__screen { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px; background: #1a1714; }
.hvideo__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-3) var(--ease-out), filter var(--dur-3); }
.hvideo__tile:hover .hvideo__poster { transform: scale(1.03); filter: brightness(1.05); }
.hvideo__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 3.8rem; height: 3.8rem; border-radius: 50%; background: var(--accent);
  display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
  transition: transform var(--dur-2) var(--ease-out), background var(--dur-2);
}
.hvideo__tile:hover .hvideo__play, .hvideo__tile:focus-visible .hvideo__play { transform: translate(-50%, -50%) scale(1.08); background: var(--accent-bright); }
.hvideo__play > span { display: block; width: 0; height: 0; border-left: 1.1rem solid var(--on-dark); border-top: .68rem solid transparent; border-bottom: .68rem solid transparent; margin-left: .2rem; }
.hvideo__cap { display: block; margin-top: var(--sp-3); }
.hvideo__t { display: block; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2; }
.hvideo__m { display: block; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .05em; color: var(--ink-3); text-transform: uppercase; margin-top: var(--sp-2); }
@media (prefers-reduced-motion: reduce) {
  .hvideo__tile, .hvideo__mount, .hvideo__poster, .hvideo__play { transition: none; }
  .hvideo__tile:hover, .hvideo__tile:focus-visible { transform: none; }
  .hvideo__tile:hover .hvideo__poster { transform: none; }
}

/* Horizontal video lightbox: framed 16:9 modal; the iframe inside it is
   lazy-created on open (video.js) so nothing loads until a visitor clicks. */
.hvlb { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 5vw, 3rem); background: rgba(14, 11, 8, .92); }
.hvlb[hidden] { display: none; }
.hvlb__close {
  position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px));
  z-index: 4; width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(251, 247, 239, .5); background: rgba(0, 0, 0, .45); color: var(--paper);
  font-size: 1.55rem; line-height: 1; cursor: pointer; transition: background var(--dur-2) var(--ease-out);
}
.hvlb__close:hover { background: rgba(251, 247, 239, .16); }
.hvlb__frame {
  position: relative; width: min(92vw, 900px); aspect-ratio: 16 / 9; background: #000; overflow: hidden;
  border-radius: 6px; border-bottom: 3px solid var(--accent); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
}
.hvlb__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Sing-along songsheet: Yiddish (RTL, Hebrew webfont) + transliteration +
   English, side by side as a cultural artifact, not a lyric-video list. */
.songsheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); background: var(--paper-2, #f4efe6); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.5rem); }
@media (max-width: 820px) { .songsheet { grid-template-columns: 1fr; } }
.songsheet__label { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--sp-3); }
.songsheet__yi { font-family: var(--font-hebrew); font-size: 1.4rem; line-height: 1.7; }
.songsheet__translit { font-family: var(--font-display); font-style: italic; color: var(--ink-2); line-height: 1.6; }
.songsheet__en { color: var(--ink-2); line-height: 1.6; }

/* "More to hear/see": plain text links, deliberately not a designed grid. */
.plainlinks { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.plainlinks a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; display: inline-flex; align-items: center; gap: .4em; }
.plainlinks a:hover { color: var(--accent); border-color: var(--accent); }

/* Landing daily-print widget (mockups/landing-archive-widget.html). Reuses
   .sigs__mount/.sigs__print/.sigs__year verbatim (same print-object
   language as the signature prints elsewhere) - only the aspect ratio and
   the single-item tilt are overridden here. */
.dailyprint__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
@media (max-width: 820px) { .dailyprint__grid { grid-template-columns: 1fr; gap: var(--sp-6); } }
.dailyprint__card { position: relative; display: block; max-width: 27.5rem; color: inherit; text-decoration: none; }
.dailyprint__k { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--sp-4); }
/* .dailyprint__card .dailyprint__mount (two classes, 0,2,0) beats the base
   .sigs__mount rule (0,1,0) regardless of source order - without this the
   tilt was silently lost to cascade order, not actually a visible bug, but
   worth being explicit about now that padding/aspect-ratio are overridden
   here too. Padding matches the mockup's own 12px literally (was 9px,
   inherited from the signature-prints instance of this same mount).
   position:relative so the year stamp (now nested inside, not a sibling
   after) positions against the mount's own corner, matching the archive
   card exactly instead of the whole .dailyprint__card (which also
   contains the "Today's photograph" label above the mount). transition +
   hover/focus lift match .archive .card's mount exactly, since every
   other framed photo on the site lifts on hover and this one didn't. */
.dailyprint__card .dailyprint__mount {
  position: relative; padding: 12px; border-bottom-color: var(--stamp-accent, var(--accent));
  transform: rotate(-1deg); transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
}
.dailyprint__card:hover .dailyprint__mount,
.dailyprint__card:focus-visible .dailyprint__mount {
  transform: rotate(0deg) translateY(-6px); box-shadow: 0 26px 44px -18px rgba(26, 24, 20, .6);
}
/* The print's own aspect-ratio (5/4) only sizes the .sigs__print BOX; the
   <img> inside still carries .sigs__print img's aspect-ratio:1/1 from the
   signature-prints original, so a 5:4 box held a square image - overflow
   clipped ~20% off one edge, reading as an uneven/clipped border. Match
   the img's own ratio to its box so nothing overflows the padding. */
.dailyprint__print { aspect-ratio: 5 / 4; }
.dailyprint__print img { aspect-ratio: 5 / 4; }
/* .dailyprint__mount > .dailyprint__year (0,2,0): .sigs__year (0,1,0) is
   defined later in the file and was winning the colour/border on cascade
   order alone, same bug class as the mount above. top/right match the
   archive card's own corner stamp exactly (-11px/-4px), now that the
   stamp is nested inside the mount instead of positioned against the
   whole card (which floated it up near the label above). */
.dailyprint__mount .dailyprint__year { top: -11px; right: -4px; color: var(--stamp-accent, var(--accent)); border-color: var(--stamp-accent, var(--accent)); box-shadow: 0 2px 0 color-mix(in srgb, var(--stamp-accent, var(--accent)) 22%, transparent); }
.dailyprint__cap { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.2; margin-bottom: var(--sp-2); }
.dailyprint__acc { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .06em; text-transform: uppercase; color: var(--stamp-accent, var(--accent)); margin-bottom: var(--sp-6); }
.dailyprint__rng { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .06em; color: var(--ink-3); margin-bottom: var(--sp-2); }
/* Matches the mockup's own .mini .track/.t literally: flex:1 on every tick
   with no gap is what makes them distribute perfectly evenly regardless of
   year count; a gap (added here previously, not in the mockup) skewed the
   spacing against the width:1px ticks. */
.dailyprint__track { display: flex; align-items: flex-end; height: 22px; border-bottom: 1px solid var(--ink); }
.dailyprint__track .t { flex: 1; height: 5px; width: 1px; background: rgba(26, 24, 20, .22); margin: 0 auto; }
.dailyprint__track .t.dec { height: 11px; background: rgba(26, 24, 20, .45); }
.dailyprint__track .t.on { height: 20px; width: 2px; background: var(--stamp-accent, var(--accent)); }
.dailyprint__hint { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-top: var(--sp-4); }

.vidgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--sp-4); }
.vidcard { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2), border-color var(--dur-2); }
.vidcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--accent); }
.vidcard__thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
.vidcard__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease-out); }
.vidcard:hover .vidcard__thumb img { transform: scale(1.05); }
.vidcard__play { position: absolute; inset: 0; display: grid; place-items: center; }
.vidcard__play span { width: 3.6rem; height: 3.6rem; border-radius: 50%; background: rgba(216,57,43,0.92); color: #fff; display: grid; place-items: center; font-size: 1.1rem; padding-left: 3px; box-shadow: var(--shadow-2); transition: transform var(--dur-2); }
.vidcard:hover .vidcard__play span { transform: scale(1.08); }
.vidcard__body { padding: var(--sp-4) var(--sp-5); }
.vidcard__body .tag { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
.vidcard__body h3 { font-family: var(--font-display); font-size: var(--step-1); margin-top: var(--sp-2); }

/* Year navigation (past events archive) */
.yearnav { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-7); }
.yearnav a, .yearnav button { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.04em; padding: 0.5em 1.1em; border: 1px solid var(--line-strong); border-radius: 99px; background: transparent; color: inherit; cursor: pointer; transition: border-color var(--dur-2), background var(--dur-2), color var(--dur-2); }
.yearnav a:hover, .yearnav a.is-active, .yearnav button:hover, .yearnav button.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: linear-gradient(180deg, var(--coal-1) 0%, var(--coal-2) 62%, #0e0a07 100%); color: rgba(246,243,236,0.80); padding-block: var(--sp-9) var(--sp-6); margin-top: var(--sp-9); border-top: 3px solid var(--accent); }
.footer a { color: rgba(246,243,236,0.70); transition: color var(--dur-2); }
.footer a:hover { color: var(--paper); }
.footer__top { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: var(--sp-7) var(--sp-6); padding-bottom: var(--sp-7); border-bottom: 1px solid rgba(246,243,236,0.12); align-items: start; }
@media (max-width: 760px){ .footer__top { grid-template-columns: 1fr 1fr; row-gap: var(--sp-6); } }
@media (max-width: 480px){ .footer__top { grid-template-columns: 1fr; } }
/* Column headings sit at 0.66rem on the near-black ground. The vivid accent
   alone measures ~4.2:1 in UJPO red, under AA for small text, so it is
   lightened toward paper until every org's accent clears 4.5:1. */
.footer h5, .footer .footer__h { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--accent-bright) 70%, var(--paper)); margin-bottom: var(--sp-4); }
.footer ul li { line-height: 1.35; }
.footer ul li a { display: inline-block; padding: 2px 0; font-size: var(--step--1); white-space: nowrap; }   /* one step down so "United Jewish People's Order" holds one line in its column (Erf, 2026-09-21) */
/* `list-style: none` on its own leaves the browser's default
   padding-inline-start, which pushed every link ~40px right of its column
   heading. Reset it so the links line up with their title. */
.footer ul { list-style: none; display: grid; gap: var(--sp-3); margin: 0; padding: 0; }
.footer__brand .display { color: var(--paper); font-size: var(--step-2); }
.footer__brand .display::after { content: ""; display: block; width: 2.6rem; height: 3px; margin-top: 0.7rem; background: var(--accent-bright); border-radius: 2px; }
.footer__brand p { color: rgba(246,243,236,0.60); font-size: var(--step--1); margin-top: var(--sp-4); max-width: 40ch; line-height: 1.65; }
.footer__bottom { display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; padding-top: var(--sp-5); font-size: var(--step--1); color: rgba(246,243,236,0.46); }
.footer__bottom .link { color: rgba(246,243,236,0.72); }
.footer__socials { margin-top: var(--sp-5); }
.footer__legal a { display: inline-block; padding: 2px 0; }

/* ==========================================================================
   Page load veil (intro sequence)
   ========================================================================== */
.veil {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--ink);
  display: grid; place-items: center;
  transition: transform var(--dur-4) var(--ease-inout);
}
.veil__mark { color: var(--paper); font-family: var(--font-display); font-size: var(--step-3); overflow: hidden; }
.veil__mark span { display: inline-block; transform: translateY(110%); transition: transform var(--dur-3) var(--ease-out); }
.is-loaded .veil__mark span { transform: translateY(0); }
.is-loaded .veil { transform: translateY(-101%); transition-delay: 320ms; }
@media (prefers-reduced-motion: reduce) { .veil { display: none; } }

/* ==========================================================================
   Jewish Heretics - tactile cassette deck hero
   ========================================================================== */
.hero--deck {
  background:
    radial-gradient(120% 90% at 50% 0%, #2a201a 0%, #15100d 55%, var(--coal-3) 100%);
  color: var(--paper);
  border-bottom: 1px solid #2a211b;
}
.hero--deck .hero__body { color: var(--paper); }
.hero--deck .hero__title { color: var(--paper); }
.hero--deck .lead { color: rgba(246,243,236,0.74); }
.hero--deck .eyebrow { color: #e6a59c; }
.hero--deck .platform { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: var(--paper); }
.hero--deck .platform small { color: rgba(246,243,236,0.6); }

.deckwrap {
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-8) var(--gutter);
}
/* The cassette deck (Erf-approved redesign 2026-09-21): a matte front panel,
   one recessed window, one control strip. Typed side-A label, five shell
   screws, uneven tape packs, LED on the engaged key. JS hooks unchanged:
   .deck, .is-playing/.is-rew/.is-ff, [data-deck], .deck__count, .tapehub. */
.deck {
  width: min(34rem, 100%);
  border-radius: var(--radius-lg);
  padding: clamp(0.9rem, 2.2vw, 1.3rem);
  background: #1f1a16;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), var(--shadow-2);
}
.deck__brand {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: rgba(246,243,236,0.55); margin: 0 2px var(--sp-3);
}
.deck__brand-r { color: rgba(246,243,236,0.35); }
.deck__window {
  position: relative;
  border-radius: var(--radius);
  padding: clamp(0.8rem, 2.2vw, 1.2rem);
  background: #100d0b;
  box-shadow: inset 0 1px 6px rgba(0,0,0,0.85), inset 0 0 0 1px rgba(255,255,255,0.04);
}
.tape {
  position: relative;
  aspect-ratio: 8 / 5;
  border-radius: 4px;
  background: linear-gradient(180deg, #5a5753 0%, #46433f 55%, #35322e 100%);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.5), 0 8px 18px rgba(0,0,0,0.55);
  padding: 7% 6% 6%;
  display: flex; flex-direction: column;
}
.tape__screw {
  position: absolute; width: 2.4%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #8d8983 0 30%, #2b2925 70%);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6);
}
.tape__screw--tl { left: 2.2%; top: 3.5%; }
.tape__screw--tr { right: 2.2%; top: 3.5%; }
.tape__screw--bl { left: 2.2%; bottom: 3.5%; }
.tape__screw--br { right: 2.2%; bottom: 3.5%; }
.tape__screw--bc { left: 50%; bottom: 3.5%; transform: translateX(-50%); }
.tape__notch {
  position: absolute; left: 13%; top: 3%;
  width: 8%; height: 4%;
  background: rgba(255,255,255,0.14);
  clip-path: polygon(0 0, 62% 0, 100% 50%, 62% 100%, 0 100%, 34% 50%);
}
.tape__label {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.6rem;
  background: #efe9dc;
  border: 1px solid rgba(0,0,0,0.35);
  padding: 0.38rem 0.6rem 0.42rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.tape__side {
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 700;
  color: #efe9dc; background: #16130f; padding: 1px 6px; border-radius: 1px;
}
.tape__title {
  display: block; font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(0.66rem, 1.9vw, 0.86rem); letter-spacing: 0.14em; text-transform: uppercase;
  color: #16130f; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tape__sub {
  grid-column: 2; display: block; font-family: var(--font-mono);
  font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: #5a5147; margin-top: 2px;
}
.tape__label::after {
  content: ""; grid-column: 1 / -1; height: 1px; margin-top: 0.36rem;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,0.35) 0 6px, transparent 6px 9px);
}
.tape__body {
  position: relative; flex: 1; margin-top: 5%;
  border-radius: 2px;
  background: linear-gradient(180deg, #1c1a18, #0f0e0d);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 14px rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: space-around;
  padding-inline: 7%;
}
.tape__vent {
  position: absolute; left: 4%; top: 22%; bottom: 22%; width: 7%;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0 1px, transparent 1px 3px);
}
.tape__guides {
  position: absolute; left: 36%; right: 36%; top: 20%; height: 7%;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.3) 0 2px, rgba(0,0,0,0.55) 2px 4px);
}
.tape__pack {
  position: absolute; left: 36%; right: 36%; top: 27%; bottom: 26%;
  background: linear-gradient(180deg, #191613 0%, #0a0908 60%, #131110 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), inset 0 6px 14px rgba(0,0,0,0.9);
}
/* Named .tapehub, not .reel (.reel is the video-poster component). */
.tapehub {
  --pack: 78%;
  position: relative; z-index: 1;
  width: clamp(3rem, 11vw, 4.6rem); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 24%, #12100e 24% 26%, #2a2622 27% var(--pack), transparent calc(var(--pack) + 1%)),
    radial-gradient(circle at 50% 50%, #3b3733 0 42%, #23201d 43% 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08), inset 0 0 10px rgba(0,0,0,0.9);
  display: grid; place-items: center;
}
.tapehub--r { --pack: 52%; }
.tapehub::before {
  content: ""; position: absolute; width: 44%; aspect-ratio: 1; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #d6d0c6 0deg 15deg, #3f3c37 15deg 30deg);
  box-shadow: 0 0 0 1px #000, inset 0 0 6px rgba(0,0,0,0.6);
}
.tapehub::after {
  content: ""; position: relative; z-index: 1;
  width: 18%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff 0 18%, #8e8880 60%, #2b2825 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.8);
}
.deck.is-playing .tapehub::before { animation: reel-spin 3.4s linear infinite; }
.deck.is-rew .tapehub::before { animation: reel-spin 0.5s linear infinite reverse; }
.deck.is-ff  .tapehub::before { animation: reel-spin 0.5s linear infinite; }
@keyframes reel-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tapehub::before { animation: none !important; } }
.tico { display: inline-block; width: 15px; height: 12px; background: currentColor; }
.tico--play { clip-path: polygon(0 0, 100% 50%, 0 100%); width: 11px; }
.tico--stop { clip-path: none; width: 11px; height: 11px; }
.tico--rew  { clip-path: polygon(50% 0, 50% 42%, 100% 0, 100% 100%, 50% 58%, 50% 100%, 0 100%, 0 0); }
.tico--ff   { clip-path: polygon(0 0, 50% 42%, 50% 0, 100% 50%, 50% 100%, 50% 58%, 0 100%); }
.deck.is-playing [data-deck="play"] .tico,
.deckwrap:has(.turntable.is-playing) [data-tt="play"] .tico {
  clip-path: none; width: 11px;
  background: linear-gradient(90deg, currentColor 0 34%, transparent 34% 66%, currentColor 66% 100%);
}
.deck__strip { display: flex; align-items: stretch; gap: var(--sp-3); margin-top: var(--sp-4); }
.deck__counter { display: flex; align-items: center; }
.deck__counter span {
  display: inline-flex; align-items: center; height: 100%;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.22em; font-size: 0.9rem;
  background: #0d0b09; color: #e0553f; padding: 0 0.7rem 0 0.85rem; border-radius: var(--radius);
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.9), inset 0 0 0 1px rgba(255,255,255,0.04);
  min-width: 4.4rem; justify-content: center;
}
.deck__transport { display: flex; gap: var(--sp-2); flex: 1; }
.tbtn {
  position: relative; flex: 1; min-height: 2.6rem; border-radius: var(--radius); cursor: pointer;
  background: #2a231e; border: 1px solid rgba(255,255,255,0.08); color: #e9dccb;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 0 #120f0d;
  transition: transform var(--dur-1) var(--ease-out), background var(--dur-2);
}
.tbtn:hover { background: #342b25; }
.tbtn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
.tbtn.is-active { background: #221c18; transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,0.7); }
.tbtn::after {
  content: ""; position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.08);
}
.tbtn.is-active::after { background: #e0553f; box-shadow: 0 0 6px 1px rgba(224,85,63,0.7); }
.tbtn:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 3px; }
@media (max-width: 480px) {
  .deck__strip { flex-wrap: wrap; }
  .deck__counter { width: 100%; }
  .deck__counter span { width: 100%; min-height: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .deck.is-playing .tapehub, .deck.is-rew .tapehub, .deck.is-ff .tapehub { animation: none; }
  .deck__led { animation: none; }
}
@media (max-width: 880px) {
  .deck { transform: none; }
  .hero--deck { min-height: auto; }
}
/* Phones: the deck hero ran ~350px past the fold: three two-line platform
   pills stacked, plus a full-width record player. The pills drop their
   "Listen on" kicker and sit in one compact row, and the player scales down
   so it starts inside the first screen. */
@media (max-width: 600px) {
  .hero--deck .platform small { display: none; }
  .hero--deck .platform { padding: 0.55em 0.95em; }
  .hero--deck .platforms { gap: var(--sp-2); }
  .hero--deck .turntable { max-width: 15rem; }
}

/* ==========================================================================
   Community calendar (events.html)
   ========================================================================== */
.cal {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--paper); overflow: hidden; box-shadow: var(--shadow-1);
}
.cal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding: var(--sp-5) var(--sp-6);
  background: var(--bg-tint-2); border-bottom: 1px solid var(--line);
}
.cal__title { font-family: var(--font-display); font-size: var(--step-2); }
.cal__nav { display: flex; gap: var(--sp-3); }
.cal__btn {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink);
  font-size: 1rem; display: grid; place-items: center;
  transition: background var(--dur-2), color var(--dur-2), transform var(--dur-1);
}
.cal__btn:hover { background: var(--ink); color: var(--paper); }
.cal__btn:active { transform: scale(0.94); }
.cal__today {
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em;
  text-transform: uppercase; border: 1px solid var(--line-strong); background: transparent;
  color: var(--ink-2); padding: 0 0.9rem; border-radius: 999px; cursor: pointer;
}
.cal__today:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.cal__dow {
  display: grid; grid-template-columns: repeat(7, 1fr);
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.cal__dow span { padding: var(--sp-3); text-align: center; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__cell {
  position: relative; min-height: clamp(4.2rem, 9vw, 6.5rem);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: var(--sp-3); cursor: default; background: var(--paper);
  transition: background var(--dur-2);
  display: flex; flex-direction: column; gap: 4px;
}
.cal__cell:nth-child(7n) { border-right: 0; }
/* Out-of-month days read as dimmed, not tinted: the old accent tint looked like
   a stuck hover state. */
.cal__cell--out { background: var(--paper-2); color: var(--ink-3); }
/* One clean hover for every in-month cell, so the grid feels alive and
   consistent instead of only lighting up on event days. Event days go a touch
   deeper and take the pointer cursor. */
.cal__cell:not(.cal__cell--out):hover { background: var(--bg-tint); }
.cal__cell--has { cursor: pointer; }
.cal__cell--has:hover { background: var(--bg-tint-2); }
.cal__cell.is-selected { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.cal__num { font-family: var(--font-mono); font-size: 0.78rem; color: inherit; }
/* Today is a quiet ring, not a filled disc: the disc hid the date number and
   read louder than any actual event. */
.cal__cell.is-today .cal__num {
  color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent);
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 600;
}
/* The event's own name in the cell, not an anonymous dot. Events are Centre-wide
   (Zeffy carries no org split), so every chip takes the page's single --accent. */
.cal__chip {
  margin-top: auto; align-self: stretch;
  font-family: var(--font-sans); font-size: 0.68rem; line-height: 1.25;
  background: var(--accent); color: var(--accent-ink);
  padding: 2px 5px; border-radius: var(--radius);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.cal__more { font-family: var(--font-mono); font-size: 0.62rem; color: var(--ink-3); margin-top: 2px; }

/* "Next up" pointer: always shows the nearest event, even when it is months
   out, so an empty visible month is never a dead end. */
.cal__next {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-6); background: var(--bg-tint);
  border-bottom: 1px solid var(--line); color: var(--ink);
  font-size: var(--step--1); transition: background var(--dur-2);
}
.cal__next:hover { background: var(--bg-tint-2); }
.cal__next-k { flex-shrink: 0; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.cal__next-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal__next-t b { font-family: var(--font-display); font-weight: 500; }
.cal__next-go { flex-shrink: 0; color: var(--accent); }
@media (max-width: 560px) {
  .cal__cell { min-height: 3.4rem; padding: 6px; }
  .cal__num { font-size: var(--step--2); }
  .cal__chip { font-size: 0.6rem; padding: 1px 3px; }
}

/* ==========================================================================
   Learn Yiddish - homepage challenge widget + word pages
   ========================================================================== */
/* Word-of-the-day: styled as a page from the Living Dictionary (open book,
   warm paper, centre spine) so it matches the Learn Yiddish reader. */
.yid {
  --paper-book: #f4ecdb; --rule: #d9cdb2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: var(--paper-book); border-radius: var(--radius); overflow: hidden;
  position: relative;
  box-shadow: 0 30px 70px rgba(0,0,0,.28), 0 2px 0 rgba(0,0,0,.14);
  background-image: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.55), transparent 60%);
}
.yid::before {   /* centre spine, echoing the dictionary book */
  content:""; position:absolute; top:0; bottom:0; left:50%; width:40px; transform:translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(120,90,50,.12) 40%, rgba(90,65,35,.2) 50%, rgba(120,90,50,.12) 60%, transparent);
  pointer-events:none; z-index:2;
}
@media (max-width: 820px) { .yid { grid-template-columns: 1fr; } .yid::before { display:none; } }
.yid__word, .yid__quiz { min-height: 34rem; }
.yid__word {
  background: transparent; color: var(--ink);
  padding: clamp(2rem, 4vw, 3.4rem); display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: var(--sp-3);
  border-right: 1px solid var(--rule);
}
@media (max-width: 820px) { .yid__word { border-right: 0; border-bottom: 1px solid var(--rule); } }
.yid__heb {
  font-family: var(--font-display); font-size: clamp(3.4rem, 9vw, 5.6rem); line-height: 1;
  direction: rtl; color: var(--ink);
}
.yid__translit { font-family: var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; font-size: var(--step--2); color: var(--accent); }
.yid__prompt { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); color: var(--ink-2); }
.yid__quiz { position: relative; padding: clamp(1.6rem, 3.4vw, 2.6rem); display: flex; flex-direction: column; gap: var(--sp-4); justify-content: center; }
.yid__opts { display: flex; flex-direction: column; gap: var(--sp-3); }
.yopt {
  text-align: left; padding: 0.8rem 1.05rem; border: 1px solid var(--rule);
  border-radius: var(--radius-lg); background: rgba(255,255,255,0.4); cursor: pointer;
  font-family: var(--font-display); font-size: var(--step-0); color: var(--ink);
  transition: border-color var(--dur-2), background var(--dur-2);
  display: flex; align-items: center; gap: var(--sp-3);
}
.yopt::before {
  content: ""; width: 1rem; height: 1rem; border-radius: 50%; flex: none;
  border: 1px solid var(--rule); transition: border-color var(--dur-2), background var(--dur-2);
}
.yopt:hover { border-color: var(--accent); }
.yopt:disabled { cursor: default; }
.yopt.is-correct { border-color: var(--accent-naivelt); background: rgba(124,179,66,0.16); }
.yopt.is-correct::before { border-color: var(--accent-naivelt); background: var(--accent-naivelt); }
.yopt.is-wrong { border-color: var(--accent); background: var(--accent-soft); }
.yid__reveal { position: absolute; inset: 0; padding: clamp(1.6rem, 3.4vw, 2.6rem); display: flex; flex-direction: column; justify-content: center; background: var(--paper-book); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), visibility .5s var(--ease-out); pointer-events: none; }
.yid__reveal.is-shown { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.yid__verdict { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); margin-bottom: var(--sp-2); color: var(--ink); }
.yid__note { color: var(--ink-2); font-size: var(--step-0); }
.yid__cta { margin-top: var(--sp-4); display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }

/* Word page */
.yword__hero { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-8); align-items: center; }
@media (max-width: 820px) { .yword__hero { grid-template-columns: 1fr; } }
.yword__card {
  background: var(--bg-ink); color: var(--paper); border-radius: var(--radius-lg);
  padding: var(--sp-9) var(--sp-7); text-align: center;
}
.yword__heb { font-family: var(--font-display); font-size: clamp(4rem, 14vw, 8rem); line-height: 1; direction: rtl; }
.yword__translit { font-family: var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-bright); margin-top: var(--sp-4); }
.yword__pos { font-style: italic; color: var(--ink-3); }
.yword__def { font-size: var(--step-2); font-family: var(--font-display); line-height: var(--leading-snug); margin-block: var(--sp-3); }
.yword__related { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.ychip {
  display: inline-flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line-strong); border-radius: 999px; transition: background var(--dur-2), color var(--dur-2), border-color var(--dur-2);
}
.ychip:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ychip span { font-family: var(--font-mono); font-size: var(--step--2); opacity: 0.7; }

/* ==========================================================================
   Global search
   ========================================================================== */
.search__box {
  display: flex; gap: var(--sp-3); max-width: 40rem; margin-block: var(--sp-6);
}
.search__box input {
  flex: 1; padding: var(--sp-4) var(--sp-5); font-size: var(--step-1);
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper);
}
.search__results { display: flex; flex-direction: column; gap: var(--sp-3); }
.sresult {
  display: block; padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--radius);
  border-left: 4px solid var(--accent); background: var(--paper); transition: transform var(--dur-1), box-shadow var(--dur-2);
}
.sresult:hover { transform: translateX(3px); box-shadow: var(--shadow-1); }
.sresult[data-org="naivelt"] { border-left-color: var(--org-naivelt); }
.sresult[data-org="mws"] { border-left-color: var(--org-mws); }
.sresult[data-org="ujpo"] { border-left-color: var(--org-ujpo); }
.sresult b { font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; }
.sresult .sr-org { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.sresult b { display: block; }
.sresult p { color: var(--ink-2); margin-top: 4px; font-size: var(--step--1); max-width: none; }
.nav__search {
  background: none; border: 0; cursor: pointer; color: inherit; padding: var(--sp-2);
  display: inline-flex; align-items: center;
}
.nav__search svg { width: 20px; height: 20px; }


/* Breadcrumb */
.crumb { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.06em; color: var(--ink-3); text-transform: uppercase; }
.crumb .link { color: var(--ink-2); }
.crumb span { margin-inline: var(--sp-2); opacity: 0.5; }

/* Yiddish word grid (hub) */
.ywgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--sp-4); }
.ywcard {
  display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-6);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper);
  transition: transform var(--dur-2), box-shadow var(--dur-2), border-color var(--dur-2);
}
.ywcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.ywcard__heb { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; direction: rtl; }
.ywcard__tr { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.ywcard__en { color: var(--ink-2); font-size: var(--step--1); }

/* ==========================================================================
   Shared utility strip - consistent across every page (sits above each
   page's own branch nav). Branch switcher + Search + Member + Donate.
   ========================================================================== */
.utility {
  position: relative; z-index: calc(var(--z-nav) + 1);
  background: color-mix(in srgb, var(--accent) 4%, var(--paper));   /* warm paper, faint branch tint */
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.utility__inner {
  /* match the nav's full-width gutter so left/right edges line up with it */
  padding: 0.4rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.utility a { color: var(--ink-3); transition: color var(--dur-1) var(--ease-out); }
.utility a:hover { color: var(--ink); }
.utility__orgs { display: flex; align-items: center; gap: var(--sp-4); font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--step--2); }
/* A small house icon marks this as the clear "back to the main site" link,
   distinct from the plain org-name links beside it (client feedback 2026-07-09). */
.utility__orgs .u-home { color: var(--ink-2); font-weight: 500; display: inline-flex; align-items: center; gap: 0.35em; }
.u-home__icon { width: 0.9em; height: 0.9em; flex: none; }
/* These are one-line labels. Letting them wrap turned the strip into two ragged
   rows on a phone and pushed the whole header down. */
.utility__orgs a { white-space: nowrap; }
/* Below ~640px the strip runs out of room, so the home link keeps its house icon
   and drops its words. The label stays in the accessibility tree. */
@media (max-width: 640px) {
  .u-home__label {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .utility__orgs .u-home { gap: 0; }
  .utility__orgs { gap: var(--sp-3); }
  .utility__actions { gap: var(--sp-4); }
}
.utility__orgs .u-sep { color: var(--line-strong); }
.utility__orgs a[aria-current="page"] { color: var(--accent); }
.utility__actions { display: flex; align-items: center; gap: var(--sp-5); font-size: var(--step--2); }
.utility__actions a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.utility__actions svg { width: 14px; height: 14px; opacity: 0.8; }
/* Donate stays a lightweight text link so it never competes with a page's own
   primary (red) CTA button. Accent-coloured for a little emphasis only. */
/* Muted, warm - distinguished by weight more than colour (less "loud red"). */
.utility__donate { color: color-mix(in srgb, var(--accent) 42%, var(--ink)) !important; font-weight: 600; letter-spacing: 0.01em; }
.utility__donate:hover { color: var(--ink) !important; }
@media (max-width: 700px) {
  .utility__inner { padding-block: 0.4rem; }
  .utility__lbl { display: none; }            /* icon-only Search, shorter labels */
  .utility__actions { gap: var(--sp-4); }
  .utility__member { display: none; }          /* keep Donate; Member lives in page nav */
}
@media (max-width: 460px) {
  .utility__orgs .u-sep { display: none; }
  .utility__orgs { gap: var(--sp-3); font-size: var(--step--2); }
  .utility__contact { display: none; }          /* very small screens: Contact lives in footer/page */
}

/* ==========================================================================
   "Continue exploring" - reusable related-links block (kills dead ends).
   Drop 3 contextual cards at the foot of any content page.
   ========================================================================== */
.explore { border-top: 1px solid var(--line); }
.explore__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.explore__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 820px) { .explore__grid { grid-template-columns: 1fr; } }
.exp {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-6); border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--paper); overflow: hidden; isolation: isolate;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2);
}
.exp::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 80% at 0% 100%, var(--accent-soft), transparent 70%);
  opacity: 0; transition: opacity var(--dur-3) var(--ease-out);
}
.exp:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.exp:hover::before { opacity: 1; }
.exp__kicker { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.exp__title { font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; line-height: 1.1; }
.exp__desc { color: var(--ink-2); font-size: var(--step--1); }
.exp__more { margin-top: auto; padding-top: var(--sp-3); color: var(--accent); font-weight: 600; font-size: var(--step--1); display: inline-flex; align-items: center; gap: var(--sp-2); }
.exp .exp__more .arrow { transition: transform var(--dur-2) var(--ease-out); }
.exp:hover .exp__more .arrow { transform: translateX(5px); }
.exp__link { position: absolute; inset: 0; z-index: 1; text-indent: -9999px; }

/* org-tinted explore cards when given data-org */
.exp[data-org] .exp__kicker, .exp[data-org] .exp__more { color: var(--accent); }

/* ==========================================================================
   The Living Yiddish Dictionary - archival reading room + open-book spread
   ========================================================================== */
.ydict { --paper-book: #f4ecdb; --rule: #d9cdb2; }
.ydict__logos { display: flex; align-items: center; justify-content: center; gap: clamp(1.5rem,5vw,3.5rem); margin-block: var(--sp-6); }
.ydict__logos img { height: clamp(3rem, 7vw, 4.6rem); width: auto; }
.ydict__logos .sep { width: 1px; height: 2.6rem; background: var(--line-strong); }

/* Search */
.ysearch { position: relative; max-width: 44rem; margin: var(--sp-6) auto 0; }
.ysearch input {
  width: 100%; padding: var(--sp-4) var(--sp-6) var(--sp-4) 3.2rem; font-size: var(--step-1);
  font-family: var(--font-display); background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: 999px;
}
.ysearch svg { position: absolute; left: var(--sp-5); top: 50%; transform: translateY(-50%); width: 20px; height: 20px; opacity: .55; }

/* Category chips */
.ycats { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin: var(--sp-5) auto 0; max-width: 56rem; }
.ycat {
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase;
  padding: .45rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer;
  background: var(--paper); color: var(--ink-2); transition: background var(--dur-2), color var(--dur-2), border-color var(--dur-2);
}
.ycat:hover { border-color: var(--accent); color: var(--accent); }
.ycat.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---- Open-book spread ---- */
.ydesk { background: var(--bg-ink); padding: clamp(1.5rem,5vw,4rem) var(--gutter); border-radius: var(--radius-lg); }
.ybook {
  max-width: var(--content); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr;
  background: var(--paper-book); border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 2px 0 rgba(0,0,0,.3);
  position: relative; overflow: hidden;
  background-image:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.5), transparent 60%);
}
.ybook::before {  /* center spine */
  content:""; position:absolute; top:0; bottom:0; left:50%; width:44px; transform:translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(120,90,50,.18) 30%, rgba(90,65,35,.28) 50%, rgba(120,90,50,.18) 70%, transparent);
  pointer-events:none; z-index:2;
}
.ypage { padding: clamp(1.6rem,4vw,3rem); height: 34rem; overflow: auto; position: relative; }
.ypage--l { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); border-right: 1px solid var(--rule); }
.ypage__cat { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.ypage__yi { font-family: var(--font-display); font-size: clamp(3.4rem, 9vw, 6rem); line-height: 1; color: var(--ink); direction: rtl; }
.ypage__tr { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); color: var(--ink-2); }
.ypage__pron { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-3); letter-spacing: .04em; }
.ypage__folio { position: absolute; bottom: var(--sp-4); left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.ypage--r .ypage__folio { /* right folio aligns right */ }

.yentry__pos { font-family: var(--font-display); font-style: italic; color: var(--ink-3); }
.yentry__def { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.2; margin-block: var(--sp-2) var(--sp-4); }
.yentry__note { color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: var(--sp-4); }
.yentry__label { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: var(--sp-5) 0 var(--sp-3); }
.yentry__rel { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.yrel { display: inline-flex; align-items: baseline; gap: 6px; padding: .35rem .85rem; border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; background: var(--paper); transition: background var(--dur-2), color var(--dur-2), border-color var(--dur-2); }
.yrel:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.yrel span { font-family: var(--font-display); font-style: italic; }

/* page-turn */
@keyframes yturn {
  0%   { opacity: 0; transform: rotateY(-7deg) translateX(14px); transform-origin: left center; }
  100% { opacity: 1; transform: none; }
}
.ybook.is-turning .ypage--r { animation: yturn 480ms var(--ease-out); }
.ybook.is-turning .ypage--l { animation: yturn 480ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .ybook.is-turning .ypage { animation: none; } }

/* entry navigation */
.ynav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3); max-width: var(--content); margin: var(--sp-5) auto 0; }
.ynav button, .ynav a { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .06em; text-transform: uppercase; padding: .55rem 1.1rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); color: var(--ink-2); cursor: pointer; transition: background var(--dur-2), color var(--dur-2), border-color var(--dur-2); }
.ynav button:hover, .ynav a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ynav .ynav__rand { border-color: var(--accent); color: var(--accent); }

/* Catalogue: entries as catalog cards (object-treatments-2.html "E , 
   DICTIONARY"), not a flat row list. No index number anywhere - a
   catalog reference would still read as a rank, so it's omitted entirely
   (Wave 5's own hard rule). */
.ycatalogue { max-width: var(--content); margin: var(--sp-6) auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 900px) { .ycatalogue { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ycatalogue { grid-template-columns: 1fr; } }
.ycard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 12px 24px -16px rgba(26, 24, 20, .45); position: relative; }
.ycard__open { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: var(--sp-5) var(--sp-5) var(--sp-4); color: inherit; }
.ycard__open::before { content: ""; position: absolute; top: 52px; left: var(--sp-5); right: var(--sp-5); height: 1px; background: var(--accent-soft); }
.ycard__cat { display: block; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ycard__yi { display: block; font-family: var(--font-hebrew); font-size: 2.2rem; direction: rtl; line-height: 1.15; margin: var(--sp-2) 0 .1em; }
.ycard__tr { display: block; font-family: var(--font-display); font-style: italic; font-size: var(--step-0); color: var(--ink-2); margin-bottom: var(--sp-3); }
.ycard__def { display: block; color: var(--ink-2); font-size: var(--step--1); min-height: 2.6em; }
.ycard__row { display: flex; justify-content: flex-end; border-top: 1px solid var(--line); padding: var(--sp-3) var(--sp-5); }
.ycard__play {
  display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: .05em; text-transform: uppercase; color: var(--accent); background: none;
  border: 1px solid var(--accent); border-radius: 999px; padding: .3em .8em; cursor: pointer;
}
.ycard__play:hover { background: var(--accent); color: var(--on-dark); }
.ycard__tri { width: 0; height: 0; border-left: 6px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.ycount { text-align: center; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .1em; color: var(--ink-3); margin-top: var(--sp-5); }

@media (max-width: 760px) {
  .ybook { grid-template-columns: 1fr; }
  .ypage--l { border-right: 0; border-bottom: 1px solid var(--rule); min-height: auto; }
  .ypage { min-height: auto; }
  .ybook::before { display: none; }
}

/* ==========================================================================
   Constitution & Bylaws - open-book reader (reuses .ybook shell)
   ========================================================================== */
/* ==========================================================================
   Events calendar (winx_calendar)
   ========================================================================== */
/* The month card itself is styled by the designed .cal system further up
   (cal__head / cal__dow / cal__grid / cal__cell / cal__num / cal__chip). The
   month's events list below the grid is an agenda of date-badge cards. */
.cal { max-width: 56rem; margin-inline: auto; }
.cal__list { list-style: none; margin: 0; padding: var(--sp-4) var(--sp-5) var(--sp-5); border-top: 1px solid var(--line); }
.cal__none { padding: var(--sp-6) 0; }
.cal__item + .cal__item { margin-top: var(--sp-3); }
.cal__item a {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: inherit;
  transition: background var(--dur-2), border-color var(--dur-2);
}
.cal__item a:hover { background: var(--bg-tint); border-color: var(--line-strong); }
.cal__badge {
  flex-shrink: 0; width: 3rem; text-align: center; line-height: 1;
}
.cal__badge-n { display: block; font-family: var(--font-display); font-size: var(--step-2); color: var(--ink); }
.cal__badge-w { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.cal__item-body { flex: 1; min-width: 0; }
.cal__item-t { display: block; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.15; }
.cal__item-m { display: block; margin-top: 3px; font-size: var(--step--1); color: var(--ink-3); }
.cal__item-go { flex-shrink: 0; color: var(--accent); font-size: 1.1rem; }
@media (max-width: 560px) {
  .cal__badge { width: 2.4rem; }
  .cal__item-go { display: none; }
}

/* Prose bodies had no paragraph spacing at all; pages that needed it were
   inserting empty paragraphs by hand. Space between siblings only, so nothing
   that sits after a rich block moves. */
.rich p + p { margin-top: 1.05em; }
/* In-content headings are subordinate to the page title. The base h2/h3 sizes
   (--step-3 / --step-2) are for standalone section heads with an eyebrow and
   whitespace around them; dropped inside a text column they read as a wall of
   near-title-sized type. Step them down so title > h2 > h3 > body is legible. */
.rich h2 { font-size: var(--step-2); line-height: var(--leading-snug); }
.rich h3 { font-size: var(--step-1); line-height: var(--leading-snug); }
.rich h4 { font-size: var(--step-0); }
.rich h2, .rich h3 { margin-top: 1.6em; margin-bottom: .55em; }
.rich ul, .rich ol { margin-top: .6em; margin-bottom: 1.05em; padding-left: 1.35em; }
.rich li + li { margin-top: .45em; }

/* Links inside body copy read as links: the page's accent, underlined. Scoped
   to rich-text columns and Elementor's text-editor only, so nav, buttons, and
   footer links (none of which live in body copy) are never touched. --accent
   is centre red (= --wc-accent-centre) at :root and the org colour under
   [data-org], so branch-page body links pick up their own accent for free. */
.rich a:not(.btn),
.elementor-widget-text-editor a:not(.btn) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* Fold-out entries (committee directory on Get Involved): native details
   elements, so they work with keyboard and screen readers for free. */
.rich details { border-bottom: 1px solid var(--line); }
.rich details:first-of-type,
.rich h3 + details { border-top: 1px solid var(--line); }
.rich summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: .65em;
  padding: .9em .2em; font-family: var(--font-display); font-weight: 600;
  font-size: 1.12rem; color: var(--ink);
}
.rich summary::-webkit-details-marker { display: none; }
.rich summary::before {
  content: "+"; display: inline-block; flex: 0 0 auto;
  font-family: var(--font-mono); font-weight: 600; color: var(--accent);
  transition: transform .18s ease;
}
.rich details[open] > summary::before { transform: rotate(45deg); }
.rich summary:hover { color: var(--accent); }
.rich summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }
.rich details > p, .rich details > ul { margin-left: .2em; margin-right: .2em; }
.rich details > p:first-of-type { margin-top: .1em; }
.rich details > ul { margin-bottom: 1.15em; }
@media (prefers-reduced-motion: reduce) { .rich summary::before { transition: none; } }
/* A prose widget's lead sits outside .rich, so `.rich p + p` never applied
   between it and the first body paragraph: they touched. 12 pages. */
.lead + .rich > p:first-child { margin-top: 1.05em; }

/* Links to the governing documents at the foot of a wall of prose. They are
   destinations, not asides, so they get buttons. */
.doclinks { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.doclinks .btn { text-decoration: none; }

/* ==========================================================================
   Governing documents (Constitution & Bylaws)
   These are the rules the organization is run by. They used to be presented as
   an open book you paged through one article at a time, which read as a toy and
   made the text impossible to search or print. They are set as documents now.
   ========================================================================== */
.gov { max-width: 74rem; }
.gov__switch { display: flex; flex-wrap: wrap; gap: var(--sp-3); border-bottom: 1px solid var(--line); padding-bottom: var(--sp-4); }
.gov__tab {
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase;
  padding: .6rem 1.1rem; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--paper); color: var(--ink-2); cursor: pointer;
  transition: background var(--dur-2), color var(--dur-2), border-color var(--dur-2);
}
.gov__tab:hover { border-color: var(--accent); color: var(--accent); }
.gov__tab.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.gov__head { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: end; justify-content: space-between; padding: var(--sp-7) 0 var(--sp-6); }
.gov__title { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.05; margin-top: var(--sp-2); }
.gov__pdf { flex: none; }

.gov__cols { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
.gov__toc { position: sticky; top: calc(var(--header-h) + var(--sp-4)); max-height: calc(100svh - var(--header-h) - var(--sp-7)); overflow-y: auto; }
.gov__toc-head { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.gov__toc-list { list-style: none; margin: 0; padding: 0; }
.gov__toc-list a {
  display: grid; grid-template-columns: 2.2rem 1fr; gap: var(--sp-3); align-items: baseline;
  padding: .55rem 0; color: var(--ink-2); text-decoration: none;
  border-bottom: 1px solid var(--line); transition: color var(--dur-2);
}
.gov__toc-list a:hover { color: var(--accent); }
.gov__toc-n { font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); }
.gov__toc-t { font-size: var(--step--1); line-height: 1.3; }
.gov__toc-list a.is-current { color: var(--accent); }
.gov__toc-list a.is-current .gov__toc-n { color: var(--accent); }

.gov__body { max-width: 42rem; }
.gov-art { padding-block: var(--sp-6) var(--sp-7); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
.gov-art:first-child { border-top: 0; padding-top: 0; }
.gov-art__h { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.15; margin-bottom: var(--sp-4); }
.gov-art__art { display: block; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-2); }
.gov-art p { color: var(--ink); line-height: 1.65; margin-bottom: var(--sp-4); }
.gov-art p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .gov__cols { grid-template-columns: 1fr; gap: var(--sp-6); }
  .gov__toc { position: static; max-height: none; }
  .gov__body { max-width: none; }
}
/* Printing a constitution is a normal thing to want to do. */
@media print {
  .gov__switch, .gov__toc, .gov__pdf { display: none; }
  .gov__doc[hidden] { display: block !important; }
  .gov-art { page-break-inside: avoid; }
}

/* ==========================================================================
   The Shandes, a Walkman (portable cassette player), sibling to the JH deck
   ========================================================================== */
.walkman {
  --wm-accent: #e8602a;            /* retro orange */
  width: min(21rem, 92%); margin: 0 auto var(--sp-6);
  background: linear-gradient(180deg, #3a302a 0%, #221b17 16%, #181210 100%);
  border: 1px solid var(--coal-4); border-radius: 18px;
  padding: clamp(0.9rem, 3vw, 1.3rem);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -3px 8px rgba(0,0,0,0.6), 0 26px 54px rgba(0,0,0,0.5);
  color: #e9dccb;
}
.walkman__brand { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.walkman__brand b { font-family: var(--font-mono); font-size: 0.92rem; letter-spacing: 0.32em; color: var(--wm-accent); }
.walkman__brand span { font-family: var(--font-mono); font-size: 0.54rem; letter-spacing: 0.18em; text-transform: uppercase; color: #b6a99c; }
/* tape window */
.walkman__window {
  position: relative; border-radius: 8px; padding: clamp(0.7rem,2.4vw,1rem);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.5)), var(--coal-4);
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.85), inset 0 0 0 1px rgba(255,255,255,0.04); overflow: hidden;
}
.walkman__window::after { content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(115deg, rgba(255,255,255,0.10) 0 16%, transparent 28% 100%); }
.walkman .tape { aspect-ratio: 16/9; }
.walkman .tape__label { top: 9%; }
.walkman .tape__title { font-size: clamp(1.1rem,5vw,1.5rem); }
.walkman .tape__sub { font-size: clamp(0.72rem,2.6vw,0.9rem); }
.walkman .tapehub { width: clamp(2.6rem,11vw,3.4rem); }
.walkman.is-playing .tapehub { animation: reel-spin 2.4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .walkman.is-playing .tapehub { animation: none; } }

/* now-playing: equalizer + title */
.walkman__now { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); padding: 0.5rem 0.7rem; background: var(--coal-4); border-radius: 6px; border: 1px solid #2a211b; }
.wm-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.wm-eq i { width: 3px; background: var(--wm-accent); height: 40%; border-radius: 1px; }
.walkman.is-playing .wm-eq i { animation: wm-eq 0.9s ease-in-out infinite; }
.walkman.is-playing .wm-eq i:nth-child(2){ animation-delay: .15s } .walkman.is-playing .wm-eq i:nth-child(3){ animation-delay: .3s } .walkman.is-playing .wm-eq i:nth-child(4){ animation-delay: .45s } .walkman.is-playing .wm-eq i:nth-child(5){ animation-delay: .6s }
@keyframes wm-eq { 0%,100%{height:30%} 50%{height:100%} }
.walkman__track { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.06em; color: #e9dccb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* transport */
.walkman__transport { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.wmbtn { flex: 1; min-height: 2.3rem; border-radius: 6px; cursor: pointer; background: linear-gradient(180deg, #4a3e36, #2a221d); border: 1px solid var(--coal-4); color: #e9dccb; font-size: 0.82rem; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 0 var(--coal-4); transition: transform var(--dur-1); }
.wmbtn:active { transform: translateY(2px); }
.wmbtn.is-active { background: linear-gradient(180deg, var(--wm-accent), #b8401a); color: #fff; }
/* headphone jack + cord */
.walkman__jack { position: relative; height: 1.4rem; margin-top: var(--sp-3); }
.walkman__jack::before { content:""; position:absolute; left: 50%; top: 0; width: 10px; height: 10px; border-radius: 50%; background:var(--coal-4); box-shadow: inset 0 0 0 2px var(--wm-accent); transform: translateX(-50%); }
.walkman__jack::after { content:""; position:absolute; left: 50%; top: 8px; width: 60%; height: 1.2rem; border: 2px solid var(--wm-accent); border-top: 0; border-right: 0; border-radius: 0 0 0 40px; opacity: 0.5; }

/* Hero without a media column (single, full-width editorial hero). The body
   tracks the STANDARD container so the title shares a left edge with the
   content below it; heroes with media keep their wider stage. */
/* The base .hero divider sits on the full-bleed outer element, which is
   correct for the marketing heroes but reads as misaligned here: .hero--solo
   is edge-to-edge while its title/body track the standard container, so the
   rule visibly overshot the text column beneath it. Move the divider onto the
   body itself so it shares the exact same width as the paragraph below. */
.hero--solo { grid-template-columns: 1fr; min-height: auto; border-bottom: none; }
.hero--solo .hero__body {
  width: 100%; max-width: var(--content); margin-inline: auto;
  padding-inline: var(--gutter); padding-block: var(--sp-8) var(--sp-6);
  border-bottom: 1px solid var(--line);
}
/* Utility / classic-content pages (privacy, etc.) get a calmer page title than
   the marketing heroes; it should lead the reading column, not shout over it. */
.hero--solo .hero__title { font-size: var(--hero-title); }  /* keep on the one hero ramp (was --step-3) */

/* ==========================================================================
   Staff spotlight, a dramatic centered lightbox for a clicked face
   ========================================================================== */
.staff__card.is-open { /* neutralize old inline-expand; we use the spotlight now */
  grid-column: auto; flex-direction: column; text-align: center; gap: var(--sp-3);
  background: none; border-color: transparent; box-shadow: none; padding: var(--sp-4) var(--sp-3);
}
.staff__card.is-open .staff__bio { display: none; }

.spotlight {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: none; place-items: center; padding: var(--sp-6);
  background: radial-gradient(120% 90% at 50% -10%, rgba(40,30,22,0.72), rgba(12,9,7,0.92));
  backdrop-filter: blur(10px) saturate(1.05);
}
.spotlight.is-open { display: grid; animation: sl-fade var(--dur-2) var(--ease-out); }
@keyframes sl-fade { from { opacity: 0; } to { opacity: 1; } }
.spotlight__card {
  position: relative; width: 100%; max-width: 34rem; text-align: center;
  background: var(--paper); border-radius: var(--radius-lg);
  padding: var(--sp-9) var(--sp-7) var(--sp-8);
  box-shadow: 0 40px 90px rgba(0,0,0,0.6);
  animation: sl-pop var(--dur-3) var(--ease-out);
  overflow: hidden;
}
@keyframes sl-pop { from { opacity: 0; transform: translateY(24px) scale(0.96); } to { opacity: 1; transform: none; } }
/* the beam of light from above */
.spotlight__card::before {
  content: ""; position: absolute; left: 50%; top: -8%; width: 130%; height: 70%;
  transform: translateX(-50%);
  background: conic-gradient(from 215deg at 50% 0, transparent 0deg, rgba(232,201,148,0.30) 25deg, rgba(232,201,148,0.05) 35deg, transparent 50deg);
  pointer-events: none;
}
.spotlight__photo {
  position: relative; z-index: 1; width: 13rem; height: 13rem; border-radius: 50%; object-fit: cover;
  margin: 0 auto var(--sp-5); display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  font-family: var(--font-display); font-size: var(--step-4);
  box-shadow: 0 0 0 6px var(--paper), 0 18px 40px rgba(0,0,0,0.35), 0 0 60px 10px rgba(232,201,148,0.25);
}
.spotlight__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.spotlight__name { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.05; }
.spotlight__role { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-top: var(--sp-2); }
.spotlight__bio { color: var(--ink-2); margin-top: var(--sp-4); max-width: 42ch; margin-inline: auto; }
.spotlight__close {
  position: absolute; top: var(--sp-4); right: var(--sp-4); z-index: 2;
  width: 2.4rem; height: 2.4rem; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink);
  font-size: 1.1rem; line-height: 1; display: grid; place-items: center;
  transition: background var(--dur-2), color var(--dur-2), transform var(--dur-1);
}
.spotlight__close:hover { background: var(--ink); color: var(--paper); }
.spotlight__nav { margin-top: var(--sp-6); display: flex; gap: var(--sp-3); justify-content: center; }
.spotlight__nav button {
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.5rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); color: var(--ink-2); cursor: pointer;
  transition: background var(--dur-2), color var(--dur-2), border-color var(--dur-2);
}
.spotlight__nav button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .spotlight.is-open, .spotlight__card { animation: none; } }

/* ==========================================================================
   3D envelope, tactile mail icon for newsletter banners (cassette/book family)
   ========================================================================== */
.mail3d {
  position: relative; width: 150px; height: 104px; margin: 0 auto var(--sp-6);
  transform-style: preserve-3d;
  animation: mail-float 6s var(--ease-inout) infinite alternate;
}
.mail3d__back {
  position: absolute; inset: 0; border-radius: 8px;
  background: linear-gradient(160deg, #efe6d2, #ddd0b4);
  box-shadow: 0 22px 34px rgba(0,0,0,0.32);
}
.mail3d__letter {
  position: absolute; left: 16px; right: 16px; top: -24px; height: 104px;
  background: linear-gradient(180deg, #fffdf7, #f6f0e3); border-radius: 4px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.22);
}
.mail3d__letter::before {  /* a red headline + two ink lines (letterhead) */
  content: ""; position: absolute; left: 16px; width: 46px; top: 16px; height: 5px;
  background: var(--accent-bright); border-radius: 3px;
  box-shadow: 0 14px 0 -1px rgba(26,24,20,0.18), 0 26px 0 -1px rgba(26,24,20,0.18), 0 38px 0 -1px rgba(26,24,20,0.12);
}
.mail3d__front {
  position: absolute; inset: 0; border-radius: 8px;
  background: linear-gradient(165deg, #fdfaf2, #ece2cd);
  clip-path: polygon(0 30%, 50% 64%, 100% 30%, 100% 100%, 0 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.7);
}
.mail3d__front::after {  /* subtle seam highlight along the V */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.06), transparent 36%);
  clip-path: polygon(0 30%, 50% 64%, 100% 30%, 100% 33%, 50% 67%, 0 33%);
}
@keyframes mail-float { from { transform: translateY(0); } to { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .mail3d { animation: none; } }

/* ==========================================================================
   Turntable, spinning vinyl + tonearm (Shandes). Center label = swappable
   image (Elementor-editable later). Sibling to the JH cassette deck.
   ========================================================================== */
/* The plinth. Everything else sits on it. */
.deckwrap--tt { flex-direction: column; }
.deckwrap--tt .deck__transport { flex: 0 0 auto; width: 100%; }   /* the deck strip gives .deck__transport flex:1; in this column wrap that grew the buttons to the full hero height (Erf: "buttons so stretched") */
.tt {
  position: relative;
  width: min(30rem, 92vw);
  padding: clamp(1.1rem, 3vw, 1.9rem);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 30%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #35302b, #1c1815);
  border: 1px solid #0b0908;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 30px 60px rgba(0,0,0,0.6);
  transform: rotateX(3deg);
}
.turntable { position: relative; width: 100%; aspect-ratio: 1; margin: 0 auto; }

/* Cast-aluminium platter with a felt slipmat and strobe dots on the rim. */
.tt__platter {
  position: absolute; inset: -3.5%; border-radius: 50%;
  background: radial-gradient(circle closest-side, #4a453f 0 92%, #2b2723 93% 100%);
  box-shadow: 0 14px 28px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.10);
}
/* Strobe dots, on the rim only. A bare repeating-conic-gradient paints the whole
   disc and reads as a spoked wheel; mask it down to the outer band. */
.tt__platter::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0.24) 0deg 0.7deg, transparent 0.7deg 4.6deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 97.4%, #000 97.8% 99.1%, transparent 99.7%);
          mask: radial-gradient(circle closest-side, transparent 0 97.4%, #000 97.8% 99.1%, transparent 99.7%);
}
.tt__platter::after {  /* the slipmat under the record */
  content: ""; position: absolute; inset: 4%; border-radius: 50%;
  background: radial-gradient(circle, #2a2724 0 70%, #201d1a 100%);
  box-shadow: inset 0 0 24px rgba(0,0,0,0.7);
}

/* The record. Lead-in groove, the grooved band, a run-out, then the label. */
.vinyl {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 27.6%, #17140f 27.6% 29%, transparent 29%),
    radial-gradient(circle at 50% 50%, transparent 0 95%, #0f0d0b 95.4% 100%),
    repeating-radial-gradient(circle at 50% 50%, #0b0a09 0 1.6px, #1a1714 1.6px 2.9px),
    #0b0a09;
  box-shadow: 0 18px 40px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.07), inset 0 0 70px rgba(0,0,0,0.85);
}
.vinyl::after {  /* the light sweeping across the grooves */
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 16%, rgba(255,255,255,0.09) 24%, transparent 33% 58%, rgba(255,255,255,0.07) 67%, transparent 76% 100%);
}
.is-playing .vinyl { animation: spin 4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.vinyl__label {
  position: absolute; inset: 31%; border-radius: 50%; overflow: hidden;
  background: var(--accent); display: grid; place-items: center;
  box-shadow: inset 0 0 0 3px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.6);
}
.vinyl__label img { width: 100%; height: 100%; object-fit: cover; }
.vinyl__spindle {
  position: absolute; width: 5.5%; aspect-ratio: 1; border-radius: 50%; z-index: 2;
  left: 50%; top: 50%; transform: translate(-50%,-50%);
  background: radial-gradient(circle at 36% 32%, #fff 0 16%, #c9c3b7 55%, #6f6a61 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.7), 0 2px 5px rgba(0,0,0,0.6);
}

/* Tonearm. The base sits at the top right of the plinth. Stopped, the arm rests
   in its clip clear of the record; playing, the stylus swings in onto the grooves.
   Angles are measured clockwise from "pointing straight left". */
.tonearm { position: absolute; top: 5%; right: 1%; width: 16%; aspect-ratio: 1; z-index: 3; }
.tonearm__base {
  position: absolute; inset: 18%; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #6d675e, #322e2a 70%, #191614);
  box-shadow: 0 6px 14px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.18);
}
.tonearm__weight {  /* counterweight, on the far side of the pivot */
  position: absolute; top: -12%; right: -6%; width: 46%; height: 24%; border-radius: 4px;
  background: linear-gradient(180deg, #4c4740, #23201d);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 3px 7px rgba(0,0,0,0.5);
}
.tonearm__pivot {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 26%; aspect-ratio: 1; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 40% 35%, #fbfbfa, #b9b5ad 60%, #6f6a63);
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.tonearm__arm {
  position: absolute; top: 50%; right: 50%; width: 231%; height: 6px;
  transform-origin: right center;
  background: linear-gradient(180deg, #e8e6e1, #a8a49d 60%, #6d6963);
  border-radius: 3px; box-shadow: 0 4px 9px rgba(0,0,0,0.45);
  transform: rotate(-97deg);
  transition: transform 0.7s cubic-bezier(0.34, 1.12, 0.5, 1);
}
.tonearm__head {  /* headshell, cartridge and stylus at the far end */
  position: absolute; left: -3px; top: -6px; width: 21px; height: 17px;
  background: linear-gradient(180deg, #f3f1ec, #b6b2aa);
  border-radius: 3px 2px 2px 3px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.45);
  transform: rotate(16deg);
}
.tonearm__head::after {  /* the stylus itself, touching the groove */
  content: ""; position: absolute; left: 2px; bottom: -4px; width: 3px; height: 5px;
  background: #d8d3c8; clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.turntable.is-playing .tonearm__arm { transform: rotate(-76deg); }
.tt__rest {
  position: absolute; right: 0.5%; top: 46%; width: 5%; height: 9%; border-radius: 2px;
  background: linear-gradient(180deg, #55504a, #262320);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 3px 6px rgba(0,0,0,0.5);
}
@media (prefers-reduced-motion: reduce) {
  .is-playing .vinyl { animation: none; }
  .tonearm__arm { transition: none; }
}

/* ---- Spotlight v2: full-bleed portrait fading into the card ---- */
.spotlight__card { padding: 0 !important; max-width: 30rem; overflow: hidden; }
.spotlight__card::before { display: none; }                 /* drop the old beam */
.spotlight__media { position: relative; width: 100%; aspect-ratio: 1 / 1.08; background: var(--accent-soft); overflow: hidden; }
.spotlight__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spotlight__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, color-mix(in srgb, var(--paper) 70%, transparent) 72%, var(--paper) 97%); }
.spotlight__initials { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--font-display); font-size: clamp(4rem, 18vw, 7rem); color: var(--accent); }
.spotlight__body { position: relative; z-index: 1; margin-top: -3.2rem; padding: 0 var(--sp-7) var(--sp-7); text-align: center; }
.spotlight__name { font-family: var(--font-display); font-size: var(--step-4); line-height: 1; }
.spotlight__role { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-top: var(--sp-2); }
.spotlight__bio { color: var(--ink-2); margin-top: var(--sp-4); max-width: 40ch; margin-inline: auto; }
.spotlight__close { background: rgba(246,243,236,0.9); }

/* ---- Spotlight v3: two-column, portrait left (fades to cream, name overlaid) + dark panel right ---- */
.spotlight__card {
  display: grid; grid-template-columns: 1.02fr 0.98fr; align-items: stretch;
  max-width: 58rem; width: 100%; padding: 0 !important; overflow: hidden; position: relative;
  background: var(--paper);
}
.spotlight__card::before { display: none; }
.spotlight__media { position: relative; min-height: 24rem; aspect-ratio: auto; background: var(--accent-soft); display: grid; place-items: center; }
/* Match the small staff-grid thumbnail's headshot framing (client feedback
   2026-07-09: photos looked off-center/differently cropped once opened). */
.spotlight__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.spotlight__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 56%, color-mix(in srgb, var(--paper) 60%, transparent) 80%, var(--paper) 100%); }
.spotlight__initials { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: clamp(4rem,14vw,7rem); color: var(--accent); }
.spotlight__name {
  position: absolute; left: var(--sp-6); right: var(--sp-5); bottom: var(--sp-5); z-index: 1;
  font-family: var(--font-display); font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 0.98;
  letter-spacing: var(--tracking-tight); color: var(--ink); margin: 0;
}
/* Content sits centred as a group rather than pinned to the top with the
   nav forced to the bottom, so a short/empty bio doesn't read as a stray
   line floating over a void (2026-07-13 staff card polish). */
.spotlight__panel {
  background: var(--cover-black); color: var(--paper);
  padding: var(--sp-8) var(--sp-7); display: flex; flex-direction: column; justify-content: center;
}
.spotlight__role { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.16em; text-transform: uppercase; color: var(--org-ujpo); margin: 0 0 var(--sp-6); }
.spotlight__bio { color: rgba(246,243,236,0.82); font-size: var(--step-1); line-height: 1.5; max-width: none; margin: 0; }
.spotlight__bio:empty,
.spotlight__bio[hidden] { display: none; margin: 0; }
.spotlight__bio:not(:empty):not([hidden]) + .spotlight__nav { margin-top: var(--sp-7); }
.spotlight__nav { margin-top: var(--sp-2); padding-top: 0; justify-content: flex-start; }
.spotlight__nav button { border-color: rgba(246,243,236,0.3); background: transparent; color: rgba(246,243,236,0.85); }
.spotlight__nav button:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.spotlight__close { background: rgba(20,15,12,0.55); color: var(--paper); border-color: rgba(246,243,236,0.3); }
.spotlight__close:hover { background: var(--paper); color: var(--ink); }
/* House colour per org - --org-* are the fixed "identity regardless of
   cascade" tokens (tokens.css) already used for calendar dots etc, bright
   enough to read on the panel's near-black ground. Media/initials use the
   softer base org hue since those sit on the light cream side. */
.spotlight[data-org="mws"] .spotlight__role { color: var(--org-mws); }
.spotlight[data-org="naivelt"] .spotlight__role { color: var(--org-naivelt); }
.spotlight[data-org="mws"] .spotlight__initials { color: var(--org-mws); }
.spotlight[data-org="naivelt"] .spotlight__initials { color: var(--org-naivelt); }
.spotlight[data-org="mws"] .spotlight__media { background: color-mix(in srgb, var(--org-mws) 22%, var(--paper)); }
.spotlight[data-org="naivelt"] .spotlight__media { background: color-mix(in srgb, var(--org-naivelt) 18%, var(--paper)); }
@media (max-width: 720px) {
  .spotlight__card { grid-template-columns: 1fr; max-width: 26rem; }
  .spotlight__media { min-height: 18rem; }
  .spotlight__panel { padding: var(--sp-6); }
}

/* name stays within the portrait (left) column */
.spotlight__name { right: 49%; }
@media (max-width: 720px) { .spotlight__name { right: var(--sp-6); } }

/* ==========================================================================
   Radical timeline, interactive (shared century-ruler + scroll-spy spine)
   ========================================================================== */
/* The jump-to-year rail was replaced by the shared .ruler (scrollto mode);
   give it room and a sticky perch on the timeline like the rail had. */
.winx-rtl .ruler { position: sticky; top: 4.4rem; z-index: 6; margin-bottom: var(--sp-7); padding-top: var(--sp-4); background: linear-gradient(var(--page-bg) 82%, transparent); }

.rtl { position: relative; }
/* The year column was a fixed 5rem, then 7.5rem. Most entries are four
   characters, but bold mono "1944/1945" at the largest --step-1 size still ran
   past 7.5rem and crowded the spine dot. Give the column real headroom so the
   longest label never touches the dot, whatever the viewport. */
.rtl-item { display: grid; grid-template-columns: 9.5rem 1fr; gap: var(--sp-5); scroll-margin-top: 8rem; }
/* Timeline restyle (Wave 4): the year is a bold mono stamp in the org house
   colour, threaded on an org-coloured spine with a solid dot; each milestone can
   deep-link into the archive for its decade. --accent resolves per org page. */
.rtl-item__yr { font-family: var(--font-mono); font-weight: 600; font-size: var(--step-1); letter-spacing: 0.02em; color: var(--accent); text-align: right; line-height: 1; padding-top: 0.2rem; white-space: nowrap; }
.rtl-item__body { position: relative; border-left: 2px solid color-mix(in srgb, var(--accent) 45%, var(--page-bg)); padding: 0 0 var(--sp-8) var(--sp-6); }
.rtl-item:last-child .rtl-item__body { border-left-color: transparent; }
.rtl-item__body::before {
  content: ""; position: absolute; left: -8.5px; top: 0.3rem; width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--page-bg); box-shadow: 0 0 0 2px var(--accent);
  transition: transform var(--dur-2);
}
.rtl-item.is-active .rtl-item__body::before { transform: scale(1.2); }
.rtl-item__title { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.14; margin-bottom: var(--sp-2); }
.rtl-item__body p { color: var(--ink-2); max-width: 52ch; }
.rtl-item__see { display: inline-block; margin-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 2px; transition: opacity var(--dur-2); }
.rtl-item__see:hover { opacity: 0.7; }
/* entrance */
.rtl-item { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.rtl-item.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rtl-item { opacity: 1; transform: none; } }
/* No column is wide enough for "1944/1945" on a phone, so the year sits above the
   entry instead of beside it. */
@media (max-width: 600px) {
  .rtl-item { grid-template-columns: 1fr; gap: var(--sp-2); }
  .rtl-item__yr { font-size: var(--step-0); text-align: left; }
  .rtl-item__body { border-left: 0; padding-left: 0; }
  .rtl-item__body::before { display: none; }
}

/* Joey Nicholson-Landau illustration accents - small decorative easter eggs,
   never a substitute for a real image, and hidden on phones. */
/* Decorative Joey illustrations - tiny background accents tucked into the
   section seams and side gutters. Zero layout footprint (the slot is 0px tall,
   the art is absolutely positioned) so they never open a gap, sit behind the
   content, ignore clicks, and hide on phones. */
.joey-egg-slot { position: relative; height: 0; z-index: 0; }
.joey-egg {
	position: absolute;
	top: 0;
	transform: translateY(-50%);
	width: clamp(58px, 5.5vw, 84px) !important;
	height: auto !important;
	max-width: none !important;
	opacity: .5;
	pointer-events: none;
	z-index: 0;
}
.joey-egg--sm { width: clamp(46px, 4.6vw, 64px) !important; }
.joey-egg--lg { width: clamp(80px, 9vw, 128px) !important; }
.joey-egg--flip { scale: -1 1; }
.joey-egg-slot--right  .joey-egg { right: clamp(.5rem, 5vw, 5.5rem); }
.joey-egg-slot--left   .joey-egg { left:  clamp(.5rem, 5vw, 5.5rem); }
.joey-egg-slot--center .joey-egg { left: 50%; transform: translate(-50%, -50%); }
@media (max-width: 768px) { .joey-egg-slot { display: none !important; } }

/* ------------------------------------------------------------------ */
/* Membership application (multi-step winx_membership)                */
/* ------------------------------------------------------------------ */
.mform { max-width: var(--measure); margin-inline: auto; }
/* Progress stepper */
/* One row of equal-width items, each dot sitting on a line that runs to the
   previous dot. Equal flex widths are what make the -50%/+50% connector math
   land on the neighbouring dot's centre, including when the family-only steps
   collapse (display:none redistributes the row evenly again). */
.mform__steps {
	display: flex; list-style: none; margin: 0 0 var(--sp-7);
	padding: 0; counter-reset: mstep;
}
.mform__stepitem {
	position: relative; flex: 1 1 0; min-width: 0;
	display: flex; flex-direction: column; align-items: center; gap: .6rem;
	font-size: var(--step--1); color: var(--ink-3); text-align: center;
}
.mform__stepitem::before {
	content: ""; position: absolute; top: 1rem; height: 2px;
	left: calc(-50% + 1.3rem); right: calc(50% + 1.3rem);
	background: var(--line-strong);
}
.mform__stepitem:first-child::before { content: none; }
.mform__stepitem:not(.is-skipped) { counter-increment: mstep; }  /* renumber only the visible steps 1,2,3,4 */
.mform__dot {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2rem; height: 2rem; border-radius: 50%; background: var(--paper-2);
	border: 2px solid var(--line-strong); color: var(--ink-3); font-weight: 700;
	flex: 0 0 auto; transition: background .2s, color .2s, border-color .2s;
	font-size: 0;  /* hide the literal number; show the sequential counter below */
}
.mform__dot::before { content: counter(mstep); font-size: .9rem; }
.mform__steplabel { line-height: 1.25; }
@media (max-width: 780px) {
	/* Six labelled steps cannot share a phone row. The previous "name the
	   active step" override centred a nowrap label on its dot, which for the
	   first step (a dot at the left edge) ran the label's left half off-screen
	   ("lembership Package"). Each step already names itself in its .mform__legend
	   below the dots, so on phones we keep just the numbered dots for progress. */
	.mform__steplabel { display: none; }
}
.mform__stepitem.is-active { color: var(--ink); font-weight: 700; }
.mform__stepitem.is-active .mform__dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.mform__stepitem.is-done .mform__dot { background: var(--ink); border-color: var(--ink); color: #fff; }
.mform__stepitem.is-skipped { display: none; }
/* Steps */
.mform__step { border: 0; margin: 0; padding: 0; }
.mform__step:not(.is-active) { display: none; }
.mform__legend {
	font-family: var(--font-display, serif); font-size: var(--step-2); font-weight: 600;
	color: var(--ink); margin-bottom: var(--sp-4); padding: 0;
}
.mform__q { font-weight: 600; color: var(--ink); margin-bottom: var(--sp-3); }
.mform__lead, .mform__skip { color: var(--ink-2); margin-bottom: var(--sp-4); }
/* Revealed only when a sliding-scale category is chosen. [hidden] needs the
   !important because .mform__sliding sets display. */
.mform__sliding { margin-top: var(--sp-4); max-width: 26rem; }
.mform__sliding[hidden] { display: none !important; }
.mform__sliding .mform__label { display: block; font-weight: 600; color: var(--ink); margin-bottom: var(--sp-2); }
.mform__select {
	width: 100%; padding: var(--sp-3); border: 1px solid var(--line-strong);
	border-radius: var(--radius); background: var(--paper); color: var(--ink); font: inherit;
}
.mform__select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mform__skip strong { color: var(--accent); }
.mform__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.mform__grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .mform__grid, .mform__grid--2 { grid-template-columns: 1fr; } }
/* Radios + checks as large cards */
.mform__radios, .mform__checks { display: grid; gap: .6rem; }
.mform__checks { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .mform__checks { grid-template-columns: 1fr; } }
.mform__radio, .mform__check {
	display: flex; align-items: flex-start; gap: .75rem; padding: .9rem 1rem;
	border: 1px solid var(--line-strong); border-radius: var(--radius);
	background: var(--paper); cursor: pointer; font-weight: 400; line-height: 1.4;
	transition: border-color .15s, background .15s;
}
.mform__radio:hover, .mform__check:hover { border-color: var(--accent); }
.mform__radio input, .mform__check input { margin-top: .2em; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; accent-color: var(--accent); }
.mform__radio:has(input:checked), .mform__check:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--paper)); }
/* Membership category cards: name on the left, price as a badge on the right */
.mform__cat { align-items: center; padding: 1rem 1.15rem; border-radius: var(--radius-lg); }
.mform__cat .mform__cat-name { flex: 1 1 auto; font-weight: 500; color: var(--ink); }
.mform__cat-price { flex: 0 0 auto; font-weight: 600; font-size: .85rem; letter-spacing: .01em; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 28%, #fff); border-radius: 999px; padding: .28rem .75rem; white-space: nowrap; }
.mform__cat:has(input:checked) { box-shadow: inset 0 0 0 1px var(--accent); }
.mform__cat:has(input:checked) .mform__cat-price { background: var(--accent); color: #fff; border-color: var(--accent); }
.mform__agree { align-items: flex-start; }
.mform__agreements { display: grid; gap: .75rem; }
/* Address autocomplete */
.mform__ac {
	list-style: none; margin: .25rem 0 0; padding: .25rem; position: relative; z-index: 20;
	background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius);
	box-shadow: 0 8px 24px rgba(0,0,0,.08); max-height: 15rem; overflow-y: auto;
}
.mform__acitem { padding: .55rem .7rem; border-radius: calc(var(--radius) - 2px); cursor: pointer; font-size: var(--step--1); }
.mform__acitem:hover { background: var(--paper-2); }
/* Children rows */
.mform__child { padding: var(--sp-4); border: 1px dashed var(--line-strong); border-radius: var(--radius); margin-bottom: var(--sp-3); }
.mform__removechild { display: inline-block; margin-top: var(--sp-3); color: var(--accent); }
.mform__addchild { margin-top: var(--sp-2); }
/* Nav */
.mform__nav { display: flex; align-items: center; gap: 1rem; margin-top: var(--sp-6); flex-wrap: wrap; }
.mform__nav .mform__next, .mform__nav .mform__submit { margin-left: auto; }

/* ------------------------------------------------------------------ */
/* The Digest envelope: option D "Postmarked" (Erf-approved 2026-09-21). */
/* A cream envelope, the three crests as stamps, a 1926 postmark under  */
/* them; the typed digest slides up out of the top on hover/tap. On an  */
/* org's pages (html[data-org]) only that org's stamp shows and the     */
/* postmark and masthead rule take the org colour.                      */
/* ------------------------------------------------------------------ */
.winx-mail3d {
	--m-paper: #f4eee2; --m-edge: #cfc3ad; --m-ink: rgba(60, 52, 44, .45);
	--m-org: var(--accent); --m-mark: "1926";
	display: block; width: 250px; height: 150px; margin: 0 auto var(--sp-5); position: relative;
}
.winx-mail3d__env { position: relative; width: 100%; height: 100%; }
.winx-mail3d__env > span { position: absolute; display: block; }
.winx-mail3d__letter {
	left: 16px; right: 16px; top: -58px; height: 88px; z-index: 1;
	background: #fffdf8; border: 1px solid var(--m-edge); border-radius: var(--radius);
	transform: translateY(62px); transition: transform .4s var(--ease-out, ease);
}
.winx-mail3d__letter::before {  /* masthead rule + ink lines */
	content: ""; position: absolute; top: 14px; left: 16px; width: 34px; height: 3px; background: var(--m-org);
	box-shadow: 0 11px 0 -1px var(--m-edge), 0 20px 0 -1px var(--m-edge), 0 29px 0 -1px var(--m-edge);
}
.winx-mail3d__letter::after {
	content: "BI-WEEKLY DIGEST"; position: absolute; right: 14px; top: 11px;
	font-family: var(--font-mono); font-weight: 500; font-size: 8px; letter-spacing: .18em; color: var(--ink-3);
}
.winx-mail3d__body {
	inset: 0; z-index: 2; background: var(--m-paper); border: 1px solid var(--m-edge); border-radius: var(--radius);
	box-shadow: 0 20px 34px -18px rgba(26, 24, 20, .5);
}
.winx-mail3d__flap {  /* the opened flap: stands up behind the letter once the envelope is open */
	left: 0; right: 0; top: 0; height: 100px; z-index: 0;
	background: linear-gradient(180deg, #e2d8c4, var(--m-paper));
	clip-path: polygon(0 100%, 50% 0, 100% 100%);
	filter: drop-shadow(0 -1px 0 var(--m-edge));
	transform-origin: 50% 100%; transform: translateY(0) scaleY(0);
	transition: transform .35s var(--ease-out, ease);
}
.winx-mail3d__stamps { right: 12px; top: 10px; z-index: 3; display: flex !important; flex-direction: row; gap: 5px; width: auto; }
.winx-mail3d__stamps > span { position: static !important; }
.winx-mail3d__stamp {
	width: 36px; height: 42px; background: #fff; border: 1px solid var(--m-edge); box-sizing: border-box;
	box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px var(--m-c, var(--accent));
	display: grid; place-items: center;
}
.winx-mail3d__stamp img { width: 22px !important; height: 22px !important; max-width: none; object-fit: contain; display: block; }
.winx-mail3d__stamp--ujpo { --m-c: var(--org-ujpo, #9e2419); }
.winx-mail3d__stamp--ujpo img { width: 24px; height: 24px; }
.winx-mail3d__stamp--mws { --m-c: var(--org-mws, #b8860b); }
.winx-mail3d__stamp--naivelt { --m-c: var(--org-naivelt, #3e7b32); }
.winx-mail3d__mark {  /* the postmark, under the stamps */
	right: 14px; top: 60px; width: 44px; height: 44px; z-index: 4; border-radius: 50%;
	border: 2px solid var(--m-org); opacity: .55; transform: rotate(-14deg);
	box-shadow: inset 0 0 0 3px var(--m-paper), inset 0 0 0 4px var(--m-org);
}
.winx-mail3d__mark::after {
	content: var(--m-mark); position: absolute; inset: 0; display: grid; place-items: center;
	font-family: var(--font-mono); font-weight: 500; font-size: 8px; letter-spacing: .1em; color: var(--m-org);
}
.winx-mail3d__addr {  /* the address lines */
	left: 20px; bottom: 24px; width: 96px; height: 3px; z-index: 3; background: var(--m-ink);
	box-shadow: 0 10px 0 color-mix(in srgb, var(--m-ink) 70%, transparent), 0 20px 0 color-mix(in srgb, var(--m-ink) 50%, transparent);
}
[data-mail3d]:hover .winx-mail3d__letter, [data-mail3d].is-open .winx-mail3d__letter { transform: translateY(0); transition-delay: .18s; }
/* Flap dropped again (Erf, 2026-09-21): the letter simply rises out of the envelope. */
.winx-mail3d__flap { display: none; }
/* Org pages: one stamp, bigger, and the org's own year on the postmark. */
html[data-org="ujpo"] .winx-mail3d, html[data-org="mws"] .winx-mail3d, html[data-org="naivelt"] .winx-mail3d { --m-org: var(--accent); }
html[data-org="ujpo"] .winx-mail3d .winx-mail3d__stamp:not(.winx-mail3d__stamp--ujpo),
html[data-org="mws"] .winx-mail3d .winx-mail3d__stamp:not(.winx-mail3d__stamp--mws),
html[data-org="naivelt"] .winx-mail3d .winx-mail3d__stamp:not(.winx-mail3d__stamp--naivelt) { display: none; }
html[data-org="ujpo"] .winx-mail3d__stamp, html[data-org="mws"] .winx-mail3d__stamp, html[data-org="naivelt"] .winx-mail3d__stamp { width: 40px; height: 46px; }
html[data-org="ujpo"] .winx-mail3d__mark, html[data-org="mws"] .winx-mail3d__mark, html[data-org="naivelt"] .winx-mail3d__mark { top: 64px; right: 12px; }
html[data-org="mws"] .winx-mail3d { --m-mark: "1928"; }
html[data-org="naivelt"] .winx-mail3d { --m-mark: "1925"; }
@media (prefers-reduced-motion: reduce) { .winx-mail3d__letter { transition: none; } }

/* ------------------------------------------------------------------ */
/* Founding Mothers - bespoke archival portrait tribute (winx_founders) */
/* ------------------------------------------------------------------ */
.founders-band { background: var(--paper-2); padding-block: var(--sp-8); border-block: 1px solid var(--line); }
.founders { max-width: 72rem; margin-inline: auto; }
.founders__intro { text-align: center; max-width: 46rem; margin: 0 auto var(--sp-8); }
.founders__title { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.03; margin-block: var(--sp-3) 0; }
.founders__title::after { content: ""; display: block; width: 4.5rem; height: 3px; background: var(--accent); margin: var(--sp-4) auto 0; border-radius: 2px; }
.founders__lead { color: var(--ink-2); margin: var(--sp-5) auto 0; }
/* Reproduces mockups/founding-mothers.html (FINAL) exactly: two explicit
   rows - a row of 3, then a centred row of 2 (Lapedes & Temkin's shared
   frame + Gertie's wide one) - not one flowing/wrapping grid. Fixed mock
   pixel widths (300/460) via width:min(...,100%) so they hold at desktop
   but still shrink to fit on narrow phones without a breakpoint the mock
   never specifies. */
.founders__rows { max-width: 68rem; margin: 0 auto; }
.founders__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }
.founders__row + .founders__row { margin-top: 38px; }
.founder { margin: 0; text-align: center; cursor: pointer; width: min(300px, 100%); }
.founder--wide { width: min(460px, 100%); }
/* Mounted portrait, dignified - like the archive print-objects (mount +
   grayscale + grain) but with NO tilt and NO hover lift (these are honoured
   figures, not archive ephemera). The green rule is the mock's own
   .frame::before block (2px, 45% opacity, sitting ABOVE the portrait with a
   12px gap under it) - not a border, so it never reads as a heavy full
   border. The four individual portraits are a uniform 4:5; Gertie's group
   photo (the only one marked "wide") gets its own 3:2 frame - its native
   size (1200x800) - so the family isn't cropped to fit a portrait box. */
.founder__portrait { display: block; cursor: pointer; }
.founder__frame { display: block; margin: 0; background: var(--mount); padding: 12px; border-radius: 2px; box-shadow: 0 16px 28px -18px rgba(26, 24, 20, .4); border: 1px solid var(--line); }
.founder__frame::before { content: ""; display: block; height: 2px; background: var(--accent); opacity: .45; margin-bottom: 12px; }
.founder__print { display: block; position: relative; background: #cfcabf; aspect-ratio: 4 / 5; overflow: hidden; }
.founder--wide .founder__print { aspect-ratio: 3 / 2; }
.founder__print::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); background-size: 160px; mix-blend-mode: multiply; opacity: .5; pointer-events: none; }
/* Drive the img's own box from aspect-ratio + height:auto, not a % height:
   Elementor's global `img{height:auto}` otherwise wins over height:100%
   (same fix as .sigs__print img), which left group photos like Gertie's
   short and grey-gapped instead of filling the frame. */
.founder__print img { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; object-position: center; }
.founder--wide .founder__print img { aspect-ratio: 3 / 2; }
.founder__name { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; margin-top: 16px; line-height: 1.15; color: var(--ink); }

/* Founders - "plain" variant for living people (Shandes, podcast host): no
   archival sepia, a more modest section title. */
.founders--plain .founders__title { font-size: var(--step-3); }
.founders--plain.founders-band { padding-block: var(--sp-8); }

/* ------------------------------------------------------------------ */
/* Photo Wall - museum salon hang + lightbox (winx_photowall)          */
/* ------------------------------------------------------------------ */
.museum { background: var(--paper); }
.museum__wall { columns: 3 260px; column-gap: var(--sp-6); margin-top: var(--sp-6); }
@media (max-width: 640px) { .museum__wall { column-gap: var(--sp-5); } }
.museum__piece { break-inside: avoid; margin: 0 0 var(--sp-6); cursor: pointer; display: block; }
/* Conformed 2026-07-10: the gilt frame, mat, and sepia wash left with the
   scrapbook family. The salon hang (masonry columns + placards + lightbox)
   stays; the photographs themselves sit straight and untreated. */
.museum__frame {
	border-radius: var(--radius); overflow: hidden;
	box-shadow: var(--shadow-1);
	transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.museum__frame img {
	display: block; width: 100%; height: auto;
}
.museum__piece:hover .museum__frame, .museum__piece:focus-visible .museum__frame { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.museum__label { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: var(--sp-3); gap: .2rem; }
.museum__cap { font-family: var(--font-display); font-style: italic; font-size: var(--step-0); color: var(--ink); line-height: 1.25; }
.museum__year { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
/* Lightbox */
.museum__lightbox {
	position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
	gap: var(--sp-4); padding: clamp(1rem, 5vw, 4rem);
	background: rgba(20,16,12,0.92); backdrop-filter: blur(3px);
}
.museum__lightbox[hidden] { display: none; }
.museum__stage { margin: 0; max-width: 62rem; display: flex; flex-direction: column; align-items: center; }
.museum__stageframe { border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.55); max-height: 74vh; }
.museum__stageframe img { display: block; max-width: 100%; max-height: 74vh; width: auto; height: auto; }
.museum__placard { margin-top: var(--sp-4); text-align: center; color: var(--paper); max-width: 44rem; }
.museum__pcap { display: block; font-family: var(--font-display); font-style: italic; font-size: var(--step-2); }
.museum__pyear { display: block; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase; color: #cbb89a; margin-top: .35rem; }
.museum__pdesc { display: block; color: rgba(246,243,236,0.85); margin-top: var(--sp-3); line-height: 1.55; }
.museum__nav, .museum__close {
	background: rgba(246,243,236,0.12); color: var(--paper); border: 1px solid rgba(246,243,236,0.25);
	width: 3rem; height: 3rem; border-radius: 50%; font-size: 1.6rem; line-height: 1; cursor: pointer; flex: none;
	display: grid; place-items: center; transition: background .2s;
}
.museum__nav:hover, .museum__close:hover { background: rgba(246,243,236,0.24); }
.museum__close { position: absolute; top: clamp(1rem,3vw,2rem); right: clamp(1rem,3vw,2rem); }
@media (max-width: 700px) { .museum__nav { position: absolute; bottom: 1rem; } .museum__nav--prev { left: 1rem; } .museum__nav--next { right: 1rem; } }
/* Gallery page: big centred crest + centred heading */
.museum__logo { text-align: center; margin-bottom: var(--sp-4); }
.museum__logo img { width: clamp(120px, 16vw, 220px); height: auto; }
.museum > .sechead { text-align: center; }
.museum > .sechead > div { margin-inline: auto; }
.museum > .sechead .eyebrow { justify-content: center; }

/* ------------------------------------------------------------------ */
/* Landing flags - celebratory flags waving behind the houses         */
/* ------------------------------------------------------------------ */
.houses-band { position: relative; }
.houses-band img { position: relative; z-index: 1; }
.landing-flags { position: absolute; left: 3%; right: 5%; top: 0; z-index: 0; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
/* Each flag flies out to the RIGHT from the top of its own short pole (not
   centred on it), and the poles are short so they tuck behind the rooftops -
   no pole shows between or under the houses. */
.lf { display: flex; flex-direction: column; align-items: flex-start; }
.lf__pole { width: 3px; background: linear-gradient(180deg, #b59462 0%, #6a5636 72%, #4c3c26 100%); border-radius: 2px 2px 0 0; }
.lf__flag { order: -1; display: block; width: clamp(28px, 3.3vw, 52px); height: auto; margin-bottom: -1px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.32)); transform-origin: left center; will-change: transform; animation: lf-wave 2.2s ease-in-out infinite; }
@keyframes lf-wave {
  0%   { transform: perspective(150px) rotateY(0deg)   skewY(0deg); }
  20%  { transform: perspective(150px) rotateY(-22deg) skewY(-3deg); }
  40%  { transform: perspective(150px) rotateY(-6deg)  skewY(3deg); }
  60%  { transform: perspective(150px) rotateY(20deg)  skewY(-2deg); }
  80%  { transform: perspective(150px) rotateY(5deg)   skewY(2deg); }
  100% { transform: perspective(150px) rotateY(0deg)   skewY(0deg); }
}
/* Short, staggered poles that end behind the rooftops; desynced wave. */
.lf:nth-child(1) { margin-top: 3%; }  .lf:nth-child(1) .lf__pole { height: 74px; } .lf:nth-child(1) .lf__flag { animation-delay: -0.2s; }
.lf:nth-child(2) { margin-top: 10%; } .lf:nth-child(2) .lf__pole { height: 56px; } .lf:nth-child(2) .lf__flag { animation-delay: -1.3s; }
.lf:nth-child(3) { margin-top: 1%; }  .lf:nth-child(3) .lf__pole { height: 92px; } .lf:nth-child(3) .lf__flag { animation-delay: -0.7s; }
.lf:nth-child(4) { margin-top: 7%; }  .lf:nth-child(4) .lf__pole { height: 66px; } .lf:nth-child(4) .lf__flag { animation-delay: -1.8s; }
.lf:nth-child(5) { margin-top: 13%; } .lf:nth-child(5) .lf__pole { height: 48px; } .lf:nth-child(5) .lf__flag { animation-delay: -0.5s; }
.lf:nth-child(6) { margin-top: 4%; }  .lf:nth-child(6) .lf__pole { height: 82px; } .lf:nth-child(6) .lf__flag { animation-delay: -1.1s; }
.lf:nth-child(7) { margin-top: 9%; }  .lf:nth-child(7) .lf__pole { height: 60px; } .lf:nth-child(7) .lf__flag { animation-delay: -2.0s; }
.lf:nth-child(8) { margin-top: 1%; }  .lf:nth-child(8) .lf__pole { height: 96px; } .lf:nth-child(8) .lf__flag { animation-delay: -0.9s; }
.lf:nth-child(9) { margin-top: 6%; }  .lf:nth-child(9) .lf__pole { height: 70px; } .lf:nth-child(9) .lf__flag { animation-delay: -1.5s; }
@media (max-width: 640px) { .landing-flags { display: none; } }
@media (prefers-reduced-motion: reduce) { .lf__flag { animation: none; } }

/* ------------------------------------------------------------------ */
/* Podcast episodes (winx_episodes) + Shandes releases (winx_releases) */
/* ------------------------------------------------------------------ */
.ep-hero, .rel-hero { background: var(--paper-2, #f4efe6); border-radius: var(--radius-lg, 18px); padding: clamp(1.25rem, 3vw, 2.25rem); margin-bottom: var(--sp-6, 2.5rem); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.ep-hero__grid, .rel-hero__grid { display: grid; grid-template-columns: minmax(0, 38%) 1fr; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
.ep-hero__media, .rel-hero__cover { aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; background: rgba(0,0,0,.06); }
.ep-hero__media img, .rel-hero__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep-hero__title, .rel-hero__title { font-family: var(--font-display, "Newsreader", serif); font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.1; margin: .35rem 0 .5rem; }
.ep-hero__guest, .rel-hero__artist { font-size: 1.05rem; margin: 0 0 .6rem; }
.ep-hero__date { color: var(--ink-3); font-weight: 400; }
.ep-hero__desc, .rel-hero__desc { max-width: 52ch; margin: 0 0 .8rem; }
.ep-hero__bio { border-left: 3px solid var(--accent, #9e2419); padding: .1rem 0 .1rem .9rem; margin: .2rem 0 .4rem; }
.ep-hero__bio-h { font-weight: 600; margin: 0 0 .2rem; }
.ep-hero__bio p:last-child { color: var(--ink-2, #4d463c); font-size: .96rem; margin: 0; }

/* streaming pills reuse .platforms/.platform if present; provide a fallback */
.ep-hero .platforms, .rel-hero .platforms { display: flex; flex-wrap: wrap; gap: .6rem; }
.ep-hero .platform, .rel-hero .platform { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem; border: 1px solid rgba(0,0,0,.14); border-radius: var(--radius); text-decoration: none; color: inherit; background: #fff; transition: transform .15s ease, box-shadow .15s ease; }
.ep-hero .platform:hover, .rel-hero .platform:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.12); }
.ep-hero .platform svg, .rel-hero .platform svg { width: 20px; height: 20px; }
.ep-hero .platform small, .rel-hero .platform small { display: block; font-size: var(--step--2); letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); }

/* past-episode list */
.eplist { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--sp-5, 1.5rem); }
.epcard { display: flex; gap: 1rem; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: var(--radius-lg); padding: .9rem; }
.epcard__thumb { flex: 0 0 4.5rem; width: 4.5rem; height: 4.5rem; border-radius: var(--radius-lg); overflow: hidden; background: var(--accent, #9e2419); color: #fff; display: grid; place-items: center; }
.epcard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.epcard__num { font-family: var(--font-display, serif); font-size: 1.5rem; }
.epcard__meta, .relcard__meta { font-size: var(--step--2); letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .2rem; }
.epcard__title, .relcard__title { font-size: 1.05rem; line-height: 1.2; margin: 0 0 .2rem; }
.epcard__guest { font-size: .9rem; color: var(--ink-2, #4d463c); margin: 0 0 .4rem; }
.epcard__links, .relcard__links { display: flex; gap: .5rem; }
.epcard__links a, .relcard__links a { color: var(--ink-2, #4d463c); display: inline-flex; }
.epcard__links a:hover, .relcard__links a:hover { color: var(--accent, #9e2419); }
.epcard__links svg, .relcard__links svg { width: 20px; height: 20px; }

/* earlier releases grid (album cards) */
.rellist { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--sp-5, 1.5rem); }
.relcard { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: var(--radius-lg); overflow: hidden; }
.relcard__cover { aspect-ratio: 1; background: var(--paper-3, #ece4d6); display: grid; place-items: center; }
.relcard__cover img { width: 100%; height: 100%; object-fit: cover; }
.relcard__note { font-size: 2rem; color: var(--ink-3); }
.relcard__body { padding: .85rem .9rem 1rem; }

/* 7" singles grid (shandes-singles.html) - replaces .rel-hero/.rellist on
   /the-shandes/ (those rules stay above, unused here, because .ep-hero/
   .epcard share the same class names with the podcast widget). Every
   release is one uniform single; no featured/hero treatment. */
.singles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 28px; }
@media (max-width: 1000px) { .singles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .singles { grid-template-columns: 1fr; } }
.single { position: relative; }
.single__sleeve {
  position: relative; aspect-ratio: 1 / 1; z-index: 2; border-radius: 2px; overflow: hidden;
  box-shadow: 0 16px 30px -18px rgba(26, 24, 20, .6); background: var(--ink-dark);
}
.single__sleeve::after { content: none; }
.single__il { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(251, 247, 239, .4); }
.single__rpm { position: absolute; top: 10px; left: 10px; z-index: 1; font-family: var(--font-mono); font-size: .54rem; letter-spacing: .1em; color: rgba(251, 247, 239, .75); border: 1px solid rgba(251, 247, 239, .4); border-radius: 2px; padding: 2px 6px; }
/* The peeking vinyl disc and the sleeve's cut corner are retired (Erf, 2026-09-21): the cover art is the object. */
.single__cut, .single__disc { display: none; }
.single__disc {
  position: absolute; top: -10px; right: -10px; width: 56%; aspect-ratio: 1 / 1; border-radius: 50%; z-index: 1;
  background: repeating-radial-gradient(circle, #0d0b0a 0 2px, #221e1a 2px 3.5px);
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .5); transition: transform var(--dur-2, .3s) var(--ease-out, cubic-bezier(.2,.7,.2,1));
}
.single:hover .single__disc, .single:focus-within .single__disc { transform: translate(14px, -6px) rotate(28deg); }
.single__label { position: absolute; inset: 32%; border-radius: 50%; background: var(--accent); display: grid; place-items: center; text-align: center; }
.single__label span { font-family: var(--font-display); font-size: .5rem; color: var(--on-dark); line-height: 1; padding: 0 3px; }
.single__hole { position: absolute; inset: 45%; border-radius: 50%; background: var(--ground, #e9e2d0); }
.single__meta { margin-top: 14px; display: flex; align-items: flex-start; gap: 12px; }
.single__play {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid var(--accent);
  display: grid; place-items: center; background: none; transition: background var(--dur-2, .15s);
}
.single__tri { width: 0; height: 0; border-left: 10px solid var(--accent); border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 2px; }
.single:hover .single__play { background: var(--accent); }
.single:hover .single__tri { border-left-color: var(--on-dark); }
.single__txt { min-width: 0; }
.single__t { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.15; }
.single__translit { display: block; font-family: var(--font-display); font-style: italic; font-size: var(--step--1); color: var(--ink-3); margin-top: .1em; }
.single__sub { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .03em; color: var(--ink-3); margin-top: 3px; text-transform: uppercase; }
.single__flip { margin-top: 8px; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); display: inline-block; padding-bottom: 1px; }
@media (prefers-reduced-motion: reduce) {
  .single__disc { transition: none; }
  .single:hover .single__disc, .single:focus-within .single__disc { transform: none; }
}

@media (max-width: 640px) {
  .ep-hero__grid, .rel-hero__grid { grid-template-columns: 1fr; }
  .ep-hero__media, .rel-hero__cover { max-width: 15rem; }
}

/* ------------------------------------------------------------------ */
/* Statements (winx_statements list + single-winx_statement article)  */
/* ------------------------------------------------------------------ */
/* Letterpress broadsides (object-treatments-2.html "B, STATEMENTS"). Two-up
   desktop, one column mobile; serif, left ink bar, no ornament, no tilt. */
.stlist { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; max-width: none; }
@media (max-width: 900px) { .stlist { grid-template-columns: 1fr; } }
.stcard {
  position: relative; background: #f7f2e6; border: 1px solid rgba(26, 24, 20, .18);
  border-radius: 2px; padding: 30px 32px; box-shadow: 0 14px 30px -20px rgba(26, 24, 20, .5);
}
.stcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ink); }
.stcard__kicker { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.stcard__title { font-family: var(--font-display, serif); font-weight: 400; font-size: 1.5rem; line-height: 1.12; margin: 0 0 12px; }
.stcard__title a { color: var(--ink); text-decoration: none; }
.stcard__title a:hover { color: var(--accent); }
.stcard__excerpt { font-family: var(--font-display, serif); font-size: 1rem; color: #33302a; max-width: 52ch; margin: 0; }
.stcard__rule { height: 1px; background: rgba(26, 24, 20, .2); margin: 18px 0; }
.stcard__foot { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.stcard__links { display: flex; align-items: center; gap: var(--sp-4); }
.stcard__pdf { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; }
.stcard__pdf:hover { color: var(--accent); border-color: var(--accent); }
.stcard__stamp { border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 3px 9px; transform: rotate(-2deg); font-weight: 500; color: var(--ink); display: inline-block; }

/* single statement article - reads like the document (small crest + modest title) */
.statement__wrap { max-width: var(--measure); }
.statement__head { text-align: center; margin-bottom: var(--sp-7); }
.statement__logo { width: 60px; height: auto; margin: 0 auto var(--sp-3); display: block; }
.statement__org { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--sp-3); }
.statement__title { font-family: var(--font-display, serif); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); line-height: 1.22; font-weight: 400; margin: 0 auto; max-width: 32ch; }
.statement__date { color: var(--ink-3); font-size: 0.85rem; margin-top: var(--sp-3); }
.statement__body { max-width: var(--measure); }
.statement__body h2, .statement__body h3 { font-family: var(--font-display, serif); font-size: var(--step-1); font-weight: 400; margin-top: var(--sp-5); margin-bottom: 0.35rem; }
.statement__body p { margin-bottom: 1rem; }
.statement__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.statement__actions { display: flex; align-items: center; gap: 1.5rem; margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line); flex-wrap: wrap; }

/* ------------------------------------------------------------------ */
/* Fireflies - subtle warm glimmers drifting over the dark landing    */
/* ------------------------------------------------------------------ */
.landing__cinema { position: relative; }
.fireflies { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.firefly { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #ffdf9c; box-shadow: 0 0 7px 2px rgba(255,196,110,0.5); opacity: 0; will-change: transform, opacity; animation: ff-glow 4s ease-in-out infinite, ff-drift 16s ease-in-out infinite; }
@keyframes ff-glow {
  0%   { opacity: 0; }
  15%  { opacity: 0.1; }
  35%  { opacity: 0.55; }
  50%  { opacity: 0.8; }
  65%  { opacity: 0.55; }
  85%  { opacity: 0.1; }
  100% { opacity: 0; }
}
@keyframes ff-drift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(20px, -24px); }
  50%  { transform: translate(-14px, -46px); }
  75%  { transform: translate(14px, -70px); }
  100% { transform: translate(0, -96px); }
}
.firefly:nth-child(3n) { width: 4px; height: 4px; }
.firefly:nth-child(5n) { width: 5px; height: 5px; box-shadow: 0 0 9px 3px rgba(255,196,110,0.55); }
.firefly:nth-child(1){left:6%;top:68%;animation-duration:4.2s,15s;animation-delay:-0.5s,-2s}
.firefly:nth-child(2){left:14%;top:40%;animation-duration:3.6s,18s;animation-delay:-3s,-5s}
.firefly:nth-child(3){left:22%;top:78%;animation-duration:4.8s,14s;animation-delay:-1.5s,-8s}
.firefly:nth-child(4){left:30%;top:54%;animation-duration:4.0s,20s;animation-delay:-5s,-1s}
.firefly:nth-child(5){left:38%;top:30%;animation-duration:5.2s,16s;animation-delay:-2s,-11s}
.firefly:nth-child(6){left:46%;top:72%;animation-duration:3.8s,13s;animation-delay:-6s,-3s}
.firefly:nth-child(7){left:54%;top:47%;animation-duration:4.4s,19s;animation-delay:-0.8s,-9s}
.firefly:nth-child(8){left:62%;top:22%;animation-duration:4.0s,17s;animation-delay:-4s,-6s}
.firefly:nth-child(9){left:70%;top:65%;animation-duration:5.0s,15s;animation-delay:-2.5s,-13s}
.firefly:nth-child(10){left:78%;top:38%;animation-duration:3.5s,21s;animation-delay:-1s,-4s}
.firefly:nth-child(11){left:86%;top:74%;animation-duration:4.6s,14s;animation-delay:-5.5s,-10s}
.firefly:nth-child(12){left:92%;top:50%;animation-duration:4.2s,18s;animation-delay:-3.5s,-2s}
.firefly:nth-child(13){left:10%;top:26%;animation-duration:3.9s,16s;animation-delay:-6.5s,-7s}
.firefly:nth-child(14){left:34%;top:82%;animation-duration:4.7s,20s;animation-delay:-1.2s,-12s}
.firefly:nth-child(15){left:58%;top:82%;animation-duration:4.1s,13s;animation-delay:-4.8s,-5s}
.firefly:nth-child(16){left:74%;top:18%;animation-duration:5.1s,19s;animation-delay:-2.2s,-8s}
.firefly:nth-child(17){left:88%;top:30%;animation-duration:3.7s,15s;animation-delay:-0.3s,-3s}
.firefly:nth-child(18){left:50%;top:60%;animation-duration:4.3s,17s;animation-delay:-5.2s,-14s}
@media (prefers-reduced-motion: reduce) { .firefly { animation: ff-glow 5s ease-in-out infinite; } }

/* ==========================================================================
   Ambient background layer (assets/js/ambient.js)
   A decorative canvas behind the hero copy: fireflies, motes, or Hebrew letters,
   depending on which organization it belongs to. Purely decorative, so it never
   takes pointer events; the script listens on the surrounding section instead.
   ========================================================================== */
.ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.ambient__canvas { position: absolute; inset: 0; display: block; }

/* The cinema hero already gives every direct child `z-index: 1`; the ambient
   layer has to sit under them, not alongside. */
.landing__cinema > .ambient { z-index: 0; }

/* The org heroes: the layer lives behind the text column, so that column needs a
   stacking context and its content needs to sit above the canvas. */
.hero__body { position: relative; }
.hero__body > *:not(.ambient) { position: relative; z-index: 1; }

/* Page-wide ambient (org landings). Fixed, so it drifts under the content as the
   page scrolls rather than scrolling away with the hero. It sits above the body's
   background colour and below everything else; sections are transparent, so it
   shows through, and any panel with its own background covers it, as it should. */
.ambient--page {
  position: fixed;
  z-index: 0;
  /* Only along the edges. The middle of the page is where the words are, and a
     firefly drifting through a paragraph is a distraction, not an atmosphere. */
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 14%, transparent 30%, transparent 70%, #000 86%, #000 100%);
          mask-image: linear-gradient(to right, #000 0%, #000 14%, transparent 30%, transparent 70%, #000 86%, #000 100%);
}
/* The layer is fixed, so it would otherwise hang motionless while the page moves.
   ambient.js drifts it against the scroll; this is just the promise to the browser. */
.ambient--page .ambient__canvas { will-change: transform; }

/* Those siblings paint above the layer only if they are positioned.
   .nav is deliberately absent: it is `position: sticky`, and `body > .nav` is more
   specific than `.nav`, so listing it here silently turned the sticky header into a
   static one. It already carries its own z-index. */
body > .utility,
body > main,
body > footer { position: relative; z-index: 1; }

/* Per-branch particle colour, read by ambient.js as `--ambient-ink: r, g, b`.
   Naivelt's amber sat too hot against its cream; this is the same hue pulled
   toward the page and desaturated, so the fireflies read as warm motes of light
   rather than as dots someone drew on. */
[data-org="naivelt"] .ambient--page { --ambient-ink: 152, 132, 74; }
[data-org="ujpo"]    .ambient--page { --ambient-ink: 96, 74, 62; }
[data-org="mws"]  .ambient--page { --ambient-ink: 92, 78, 62; }

/* A handful, not a swarm, and drifting at a sixth of the scroll so they read as
   something behind the page rather than something stuck to the screen. */
.ambient--page { --ambient-max: 14; --ambient-parallax: 0.16; }

/* A phone has no side margins: the mask's "edges" land on the words. Rather than
   drift sparks through the reading column, the layer stands down entirely. */
@media (max-width: 880px) { .ambient--page { display: none; } }
/* The letters are the largest motif, so fewer still. */
[data-org="mws"] .ambient--page { --ambient-max: 8; }

/* The link-in-bio card is short and has no side margins to speak of, so it keeps
   the full field and no mask. */
/* The houses band is 100vw wide at a 2000x653 aspect, so it is exactly 32.65vw
   tall. Stop the canvas above it: a firefly drifting across the painted street
   reads as a bug, not as atmosphere. */
.linkbio__ambient {
  --ambient-max: 18; --ambient-parallax: 0.12;
  inset: 0 0 auto 0; height: calc(100% - 32.65vw - var(--sp-5));
}

/* ------------------------------------------------------------------ */
/* Video hero (winx_videohero) - big teaser poster on the 100th pages */
/* ------------------------------------------------------------------ */
.cine__poster { position: relative; display: block; min-height: 74vh; background-size: cover; background-position: center; background-color: #1a1411; border-radius: var(--radius-lg, 8px); overflow: hidden; text-decoration: none; }
.cine__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.30) 45%, rgba(0,0,0,.78) 100%); }
.cine__play { position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%); width: 92px; height: 92px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; box-shadow: 0 12px 34px rgba(0,0,0,.45); transition: transform .22s ease, background .22s ease; }
.cine__poster:hover .cine__play { transform: translate(-50%,-50%) scale(1.08); background: #fff; }
.cine__play svg { width: 40px; height: 40px; margin-left: 6px; color: var(--accent); }
.cine__body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.5rem, 4vw, 3rem); text-align: center; color: #fff; }
.cine__body .eyebrow { color: var(--gold, #e8c994); justify-content: center; }
/* winx_videohero (class-winx-videohero.php) is still a registered, usable
   widget - not currently placed on any live page, but not dead code either
   - so this stays token-driven rather than deleted outright. */
.cine__title { display: block; font-family: var(--font-display, serif); font-size: var(--hero-title); line-height: 1.05; color: #fff; margin: .35rem 0 .2rem; }
.cine__sub { display: block; color: rgba(246,243,236,.85); font-size: var(--step-0); max-width: 48ch; margin: 0 auto; }
.cine__cta { display: inline-block; margin-top: 1rem; border: 1px solid rgba(255,255,255,.6); border-radius: 999px; padding: .55rem 1.4rem; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.cine__poster:hover .cine__cta { background: rgba(255,255,255,.12); }
@media (max-width: 640px) { .cine__poster { min-height: 60vh; } .cine__play { width: 68px; height: 68px; } .cine__play svg { width: 30px; height: 30px; } }

/* Video hero, loop mode: a muted mp4 autoplays behind the overlaid text; the
   "Play with sound" button unmutes it in place, beside a Watch-on-YouTube link. */
.cine__stage { position: relative; display: block; min-height: 74vh; background: #1a1411; border-radius: var(--radius-lg, 8px); overflow: hidden; }
.cine__video, .cine__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; }
.cine__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: 1.2rem; }
.cine__stage .btn--ghost { --_fg: #fff; border-color: rgba(255,255,255,.6); }
.cine__stage .btn--ghost::after { background: #fff; }
.cine__stage .btn--ghost:hover { color: var(--ink); border-color: #fff; }
.cine__sound.is-on { --_bg: var(--ink); --_fg: var(--paper); }
@media (max-width: 640px) { .cine__stage { min-height: 60vh; } }

/* ==========================================================================
   Photographs archive (/photographs/) - print objects on mounts, a light-table
   featured viewer, a full-century ruler, and a spotlight lightbox. Scoped under
   .archive so .card/.print/.year don't collide with the site's components.
   ========================================================================== */
.archive__intro { max-width: var(--measure); margin-bottom: var(--sp-8); }

/* Every photo is a "print": grain on a warm paper base. Colour photos keep
   their real colour (2026-07-13); the desaturated look old B&W prints have
   comes from the source photo itself, not a forced filter. */
.archive .print { position: relative; background: #cfc9bd; overflow: hidden; }
.archive .print::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); background-size: 180px; mix-blend-mode: multiply; opacity: 0.5; pointer-events: none; }
.archive .print img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Featured viewer: a different lead print each day ("today's print"). */
.archive .viewer { display: grid; grid-template-columns: 1.5fr 1fr; gap: 44px; align-items: center; margin: var(--sp-8) 0 var(--sp-9); }
.archive .mat { background: var(--mount); padding: 20px; border-radius: var(--radius-lg); box-shadow: 0 30px 60px -30px rgba(26,24,20,.55), inset 0 0 0 1px rgba(26,24,20,.06); position: relative; }
/* Spotlight: the mat hugs the image's real proportions (no forced 4/3 crop),
   so the white border matches the photo on every side. The image is capped in
   height so a tall portrait doesn't blow the viewer up. */
.archive .viewer .mat { width: fit-content; max-width: 100%; }
.archive .viewer .print { border-radius: 2px; margin-top: 12px; }
.archive .viewer .print img { display: block; position: relative; width: auto; height: auto; max-width: 100%; max-height: 56vh; }
.archive .viewer__org { display: inline-block; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--org-ujpo); padding: 3px 9px; border-radius: 2px; margin-bottom: 20px; }
.archive .stamp { display: inline-block; font-family: var(--font-mono); font-weight: 500; font-size: var(--step-3); letter-spacing: .04em; color: var(--org-ujpo); border: 2px solid var(--org-ujpo); border-radius: var(--radius-lg); padding: 4px 14px; transform: rotate(-3deg); margin-bottom: 22px; }
.archive .viewer__meta h3 { font-family: var(--font-display); font-size: 1.8rem; font-weight: 400; line-height: 1.1; margin-bottom: 12px; }
.archive .viewer__meta p { color: var(--ink-2); font-size: 1rem; margin-bottom: 18px; }
.archive .viewer__accn { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; }

/* Org filter pills (house colours). */
.archive .filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.archive .pill { font-family: var(--font-sans); font-weight: 600; font-size: var(--step--1); border: 1px solid var(--line-strong); background: none; border-radius: 999px; padding: 8px 18px; cursor: pointer; transition: .16s; color: var(--ink-2); }
.archive .pill.on, .archive .pill:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.archive .pill[data-org="naivelt"].on { background: var(--org-naivelt); border-color: var(--org-naivelt); color: #fff; }
.archive .pill[data-org="mws"].on { background: var(--org-mws); border-color: var(--org-mws); color: #fff; }
.archive .pill[data-org="ujpo"].on { background: var(--org-ujpo); border-color: var(--org-ujpo); color: #fff; }
/* Collection chips (e.g. Folk Choir): a second-level filter within a branch,
   not a fifth org tab - visibly smaller/quieter than the org row, with a
   thin connecting rule above so it reads as "inside" the archive rather than
   another equal filter row. */
.archive .filters--sub { gap: 8px; margin-top: -8px; padding-top: 14px; border-top: 1px solid var(--line); }
.archive .filters--sub .pill { font-size: var(--step--2); padding: 5px 13px; font-weight: 500; }
.archive .filters--sub .pill.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Full-century ruler: a tick per year 1920-2026, decade labels, 1925 + 2026 keyed. */
/* overflow-x: clip contains the playhead/last-decade sliver that pushed a
   ~13px page-wide horizontal scroll at phone widths; clip (not hidden) keeps
   the vertical playhead visible and creates no scroll container. */
.ruler { margin: 0 0 44px; max-width: 100%; overflow-x: clip; }
.ruler__top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ruler__reset, .ruler__undated { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--line-strong); border-radius: 999px; padding: 5px 12px; cursor: pointer; color: var(--ink-2); background: none; transition: .16s; }
.ruler__reset.on, .ruler__reset:hover, .ruler__undated.on, .ruler__undated:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ruler__track { display: flex; align-items: flex-end; border-bottom: 1px solid var(--line-strong); }
.ruler__dec { flex: var(--yrs, 10); display: flex; flex-direction: column; align-items: stretch; background: none; border: 0; border-left: 1px solid var(--line); padding: 0; cursor: pointer; }
.ruler__dec:last-child { border-right: 1px solid var(--line); }
.ruler__ticks { display: flex; align-items: flex-end; height: 26px; }
.ruler__tick { flex: 1; height: 8px; border-left: 1px solid rgba(26,24,20,.22); }
.ruler__tick:first-child { border-left: 0; }
.ruler__tick.is-decade { height: 15px; }
.ruler__tick.is-key { height: 26px; border-left: 2px solid var(--accent); }
.ruler__lab { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .04em; color: var(--ink-3); padding: 5px 0 6px 3px; text-align: left; }
.ruler__dec:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.ruler__dec.on { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.ruler__dec.on .ruler__lab { color: var(--ink); font-weight: 700; }
.ruler__key { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--step--2); color: var(--accent); letter-spacing: .06em; margin-top: 5px; }

/* Editor-style playhead over the track: a thin --accent line with a grip,
   positioned by year in ruler.js. Shared by filter + scrollto modes. --accent
   is the site red on /photographs/ and the org colour on the History timelines,
   so it always matches the surrounding stamps. */
.ruler__scale { position: relative; touch-action: none; }
.ruler__playhead { position: absolute; top: -9px; left: 0; width: 2px; height: 46px; margin-left: -1px; background: var(--accent); z-index: 5; cursor: grab; touch-action: none; will-change: transform; transform: translateX(0); }
.ruler__playhead:active, .ruler__playhead.is-dragging { cursor: grabbing; }
/* Enlarge the drag target to >=24px without changing the visible 2px line. */
.ruler__playhead::before { content: ""; position: absolute; top: -6px; bottom: -6px; left: -12px; right: -12px; }
@media (prefers-reduced-motion: reduce) { .ruler__playhead { transition: none !important; } }
.ruler__grip { position: absolute; top: -2px; left: 50%; transform: translateX(-50%); width: 15px; height: 15px; border-radius: var(--radius); background: var(--accent); box-shadow: 0 2px 6px -1px rgba(26, 24, 20, .5); }
.ruler__grip::after { content: ""; position: absolute; inset: 4px 5px; border-left: 1px solid var(--paper); border-right: 1px solid var(--paper); opacity: .65; }
.ruler__playhead:focus-visible { outline: none; }
.ruler__playhead:focus-visible .ruler__grip { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, var(--page-bg)), 0 2px 6px -1px rgba(26, 24, 20, .5); }

/* The crate: a grid of mounted print objects. */
.archive .crate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 30px; }
@media (max-width: 1000px) { .archive .crate { grid-template-columns: repeat(2, 1fr); } .archive .viewer { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .archive .crate { grid-template-columns: 1fr 1fr; } }
/* The generic .card{background/border/border-radius} (used site-wide) was
   never reset here the way .cabins-plates/.digest-covers already do for
   their own reskinned cards - so every archive card carried its own paper
   background + 1px border UNDER the real .mount frame. With overflow set
   to visible below (for the stamp) that outer box was no longer clipped
   away, so its square edge peeked out from behind the mount's own rotated
   corners: a duplicate frame, most visible bottom-left where the tilt
   exposes it most. .mount is the one true frame; .card carries none. */
.archive .card { position: relative; cursor: pointer; overflow: visible; background: none; border: 0; border-radius: 0; }
/* The generic .card{display:flex} (used site-wide) beats the UA default
   [hidden]{display:none} on specificity order, so archive.js's decade/org
   filter was setting `hidden` correctly while cards kept rendering anyway. */
.archive .card[hidden] { display: none; }
/* The generic .card{overflow:hidden} (used site-wide) also clipped the year
   stamp's negative top/right offset, truncating the rotated outline into a
   flat tab. .card is set to overflow:visible above so the stamp can float
   fully outside the corner; .mount takes overflow:hidden instead, keeping
   the hover-reveal caption (.cap, which slides up from below the mount)
   contained exactly as before. */
.archive .card .mount { background: var(--mount); padding: 10px; border-radius: var(--radius); box-shadow: 0 14px 26px -16px rgba(26,24,20,.5), inset 0 0 0 1px rgba(26,24,20,.05); transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; transform: rotate(var(--tilt, 0deg)); overflow: hidden; }
/* Capped to ±1deg (was up to ±1.1deg with more visual scatter from the mix
   of angles) - enough to read as hand-mounted prints, calm enough that the
   grid still feels ordered, not messy. */
.archive .card:nth-child(3n) .mount { --tilt: -0.8deg; }
.archive .card:nth-child(3n+1) .mount { --tilt: 0.7deg; }
.archive .card:nth-child(3n+2) .mount { --tilt: -0.3deg; }
.archive .card:hover .mount, .archive .card:focus-within .mount { transform: rotate(0deg) translateY(-6px); box-shadow: 0 26px 44px -18px rgba(26,24,20,.6); }
/* Grid stays a uniform contact sheet (2026-07-13: reverted from per-photo
   --ar - only the spotlight adapts to each photo's real shape now). */
.archive .card .print { aspect-ratio: 1 / 1; border-radius: 2px; }
.archive .card .year { position: absolute; top: -11px; right: -4px; font-family: var(--font-mono); font-weight: 500; font-size: var(--step--2); letter-spacing: .05em; color: var(--org-ujpo); background: var(--page-bg); border: 1.5px solid var(--org-ujpo); border-radius: var(--radius); padding: 3px 8px; transform: rotate(4deg); z-index: 3; box-shadow: 0 2px 0 color-mix(in srgb, var(--org-ujpo) 22%, transparent); white-space: nowrap; }
/* Undated prints: a muted ink-stamp - grey text/border, no red drop. */
.archive .card[data-decade="undated"] .year { color: var(--ink-3); border-color: var(--line-strong); background: transparent; box-shadow: none; }
.archive .card .cap { position: absolute; left: 10px; right: 10px; bottom: 10px; background: linear-gradient(to top, rgba(20,18,15,.92), rgba(20,18,15,.72)); color: var(--paper); padding: 12px 12px 10px; border-radius: 0 0 2px 2px; transform: translateY(102%); transition: transform .28s cubic-bezier(.2,.7,.2,1); z-index: 2; }
.archive .card:hover .cap, .archive .card:focus-within .cap { transform: translateY(0); }
.archive .card .cap .t { font-family: var(--font-display); font-size: var(--step-0); line-height: 1.25; }
.archive .card .cap .accn { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase; color: rgba(251,247,239,.6); margin-top: 5px; }
.archive .card[data-org="naivelt"] .mount { border-bottom: 3px solid var(--org-naivelt); }
.archive .card[data-org="mws"] .mount { border-bottom: 3px solid var(--org-mws); }
.archive .card[data-org="ujpo"] .mount { border-bottom: 3px solid var(--org-ujpo); }
/* Year stamp also follows the card's own org, matching the mount's hairline
   above (design-system.html: "stamp in the photo's org colour at the
   corner") - it was always UJPO red regardless of which org a card
   actually belonged to. */
.archive .card[data-org="naivelt"] .year { color: var(--org-naivelt); border-color: var(--org-naivelt); box-shadow: 0 2px 0 color-mix(in srgb, var(--org-naivelt) 22%, transparent); }
.archive .card[data-org="mws"] .year { color: var(--org-mws); border-color: var(--org-mws); box-shadow: 0 2px 0 color-mix(in srgb, var(--org-mws) 22%, transparent); }
.archive__empty { margin-top: var(--sp-6); }
.archive .hint { font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); letter-spacing: .04em; margin-top: 40px; text-align: center; }

/* Spotlight lightbox (click a print). */
.arlb { position: fixed; inset: 0; z-index: var(--z-overlay, 200); display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 5vw, 3.5rem); background: rgba(14,11,8,.92); }
.arlb[hidden] { display: none; }
.arlb__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr); gap: 40px; align-items: center; max-width: 1080px; width: 100%; }
@media (max-width: 820px) { .arlb__inner { grid-template-columns: 1fr; gap: 22px; } }
/* display:flex so .arlb__print's width:auto below can size FROM its own
   aspect-ratio + max-height (a plain block child would just stretch to fill
   the mat's width regardless of ratio - flex is what lets a portrait photo
   get a narrower, taller frame instead of a wide letterboxed one). */
.arlb__mat { background: var(--mount); padding: 18px; border-radius: var(--radius-lg); box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); display: flex; justify-content: center; }
/* --ar is set per-item in assets/spotlight.js's fill(), from each card's own
   data-ar (winx_snap_aspect_ratio()) - so the frame follows the photo instead
   of forcing every photo into one fixed landscape shape. */
.arlb__print { position: relative; max-width: 100%; max-height: 74vh; overflow: hidden; border-radius: 2px; }
.arlb__print img { display: block; width: auto; height: auto; max-width: 100%; max-height: 74vh; }
@media (max-width: 820px) { .arlb__print { max-height: 50vh; } }
/* --stamp-accent is set per-item in the shared assets/spotlight.js (fill()),
   from the same data-org every gallery item carries - so the spotlight
   always matches the org that owns the item, not a fixed red. */
.arlb__org { display: inline-block; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--stamp-accent, #9E2419); padding: 3px 9px; border-radius: 2px; margin-bottom: 18px; }
.arlb__stamp { display: inline-block; font-family: var(--font-mono); font-weight: 500; font-size: var(--step-2); letter-spacing: .04em; color: var(--stamp-accent, #FF6A5A); border: 2px solid var(--stamp-accent, #FF6A5A); border-radius: var(--radius-lg); padding: 4px 14px; transform: rotate(-3deg); margin-bottom: 20px; }
/* Both set their own `display`, which otherwise beats the browser's default
   [hidden]{display:none} on cascade order (the same bug class fixed on the
   archive crate's .card[hidden] earlier) - items with no stamp/org (the
   Naivelt founders portraits) need these to actually disappear. */
.arlb__org[hidden], .arlb__stamp[hidden] { display: none; }
.arlb__title { font-family: var(--font-display); color: var(--paper); font-size: 1.7rem; font-weight: 400; line-height: 1.15; margin-bottom: 12px; }
/* When an item has neither a stamp nor an org pill (a portrait, not a dated
   archive print), give the title a small accent rule instead so it isn't
   left bare - coloured the same --stamp-accent as everything else here. */
.arlb:has(.arlb__stamp[hidden]):has(.arlb__org[hidden]) .arlb__title::after { content: ""; display: block; width: 3rem; height: 2px; background: var(--stamp-accent, #9E2419); margin-top: 10px; }
.arlb__desc { color: rgba(251,247,239,.82); font-size: 1rem; margin-bottom: 16px; }
.arlb__accn { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase; color: rgba(251,247,239,.6); }
.arlb__close {
  position: absolute;
  top: max(14px, calc(env(safe-area-inset-top, 0px) + 14px));
  right: max(14px, calc(env(safe-area-inset-right, 0px) + 16px));
  z-index: 4;                 /* always above the print and the prev/next arrows */
  width: 2.75rem; height: 2.75rem;   /* ~44px tap target */
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(251,247,239,.5);
  background: rgba(0,0,0,.45); color: var(--paper);
  font-size: 1.55rem; line-height: 1; cursor: pointer;
  transition: background var(--dur-2) var(--ease-out);
}
.arlb__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid rgba(251,247,239,.4); background: rgba(0,0,0,.3); color: var(--paper); font-size: 1.55rem; cursor: pointer; }
.arlb__nav--prev { left: clamp(.6rem, 2vw, 1.6rem); }
.arlb__nav--next { right: clamp(.6rem, 2vw, 1.6rem); }
.arlb__close:hover, .arlb__nav:hover { background: rgba(251,247,239,.16); }

@media (prefers-reduced-motion: reduce) {
  .archive .card .mount, .archive .card .cap { transition: none; }
}

/* Landing archive band: the standard .sechead (eyebrow + line, link right) over
   an even row of duotone plates that link into /photographs/. No lopsided fade;
   the row blooms to colour on hover, matching the archive page. */
.archband__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); text-decoration: none; }
.archband__fig { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); }
.archband__fig img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.03); transition: filter var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.archband__grid:hover .archband__fig img { filter: none; }
.archband__fig:hover img { transform: scale(1.04); }
@media (max-width: 900px) { .archband__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .archband__grid { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .archband__fig img { transition: none; } }

/* Signature prints (winx_signatures): a short curated row of one org's
   photographs as print-objects, the archive's mount + grain + date-stamp,
   tinted to the page's house colour (--accent resolves per org on History
   pages) instead of the archive page's fixed red. */
.sigs__flag { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .04em; color: var(--ink-3); margin: 0 0 var(--sp-4); }
.sigs__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6) var(--sp-5); align-items: start; }
.sigs__card { position: relative; display: block; text-decoration: none; color: inherit; }
.sigs__mount { display: block; background: var(--mount); padding: 9px; border-radius: var(--radius); border-bottom: 3px solid var(--accent); box-shadow: 0 14px 26px -16px rgba(26,24,20,.5), inset 0 0 0 1px rgba(26,24,20,.05); transform: rotate(var(--tilt, 0deg)); transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; }
.sigs__card:nth-child(3n) .sigs__mount { --tilt: -1deg; }
.sigs__card:nth-child(3n+1) .sigs__mount { --tilt: .9deg; }
.sigs__card:nth-child(3n+2) .sigs__mount { --tilt: -.4deg; }
.sigs__card:hover .sigs__mount, .sigs__card:focus-visible .sigs__mount { transform: rotate(0deg) translateY(-5px); box-shadow: 0 24px 40px -18px rgba(26,24,20,.6); }
.sigs__print { position: relative; display: block; border-radius: 2px; overflow: hidden; background: #cfc9bd; }
.sigs__print::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); background-size: 180px; mix-blend-mode: multiply; opacity: .5; pointer-events: none; z-index: 1; }
/* Drive the square from the img's own aspect-ratio so it survives Elementor's
   global `.elementor img{height:auto}` (which was collapsing a % height). */
.sigs__print img { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; }
.sigs__year { position: absolute; top: -11px; right: -4px; font-family: var(--font-mono); font-weight: 500; font-size: .8rem; letter-spacing: .05em; color: var(--accent); background: var(--page-bg); border: 1.5px solid var(--accent); border-radius: var(--radius); padding: 3px 8px; transform: rotate(4deg); z-index: 3; box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 22%, transparent); white-space: nowrap; }
.sigs__cap { display: block; margin-top: var(--sp-3); font-family: var(--font-display); font-size: var(--step--1); line-height: 1.32; color: var(--ink-2); }
/* Spotlight mode only (link_mode=spotlight): a mono sub-line under the
   caption, shown only when the print actually has a curator description
   (_winx_ph_desc) - never invented. */
.sigs__sub { display: block; margin-top: .2rem; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.sigs__card[role="button"] { cursor: pointer; }
@media (max-width: 900px) { .sigs__row { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .sigs__mount { transition: none; } .sigs__card:hover .sigs__mount, .sigs__card:focus-visible .sigs__mount { transform: rotate(var(--tilt, 0deg)); } }

/* Pillars: quiet 3-across gold-topped one-liners (mws-history.html mock).
   No card chrome on purpose - a thin --accent top rule is the only frame. */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); margin-top: var(--sp-7); }
@media (max-width: 820px) { .pillars { grid-template-columns: 1fr; } }
.pillars__item { border-top: 2px solid var(--accent); padding-top: var(--sp-4); }
.pillars__title { font-family: var(--font-display); font-weight: 400; font-size: var(--step-0); margin-bottom: var(--sp-2); color: var(--ink); }
.pillars__text { color: var(--ink-2); font-size: var(--step--1); }

/* Shop "coming soon" state (winx_digestmerch) */
.badge--soon { position: static; display:inline-block; background: var(--accent-soft, rgba(216,57,43,.12)); color: var(--accent); border:1px solid color-mix(in srgb, var(--accent) 30%, #fff); border-radius:999px; padding:.08rem .55rem; font-family:var(--font-mono); font-size: var(--step--2); letter-spacing:.1em; text-transform:uppercase; margin-left:.5rem; vertical-align:middle; }
.shop-grid.is-soon { opacity:.42; filter: grayscale(.35); pointer-events:none; user-select:none; }
.shop-soon-note { color: var(--ink-2); font-style: italic; }

/* Internal editorial review markers ("Suggested copy…", "Staff to verify…").
   Keep them visible for logged-in editors, hide from the public. */
body:not(.logged-in) .draft-tag { display: none !important; }

/* ==========================================================================
   Dreidel game (winx_dreidel)
   The dreidel itself is a WebGL loft drawn by assets/dreidel.js onto .dre-cv;
   the CSS here is the table around it.
   ========================================================================== */

/* One card. The stage carries the dreidel; the right rail is a single compact
   scoreboard rather than three stacked boxes with their own borders. */
.dre-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: stretch;
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
@media (max-width: 860px) { .dre-grid { grid-template-columns: 1fr; gap: var(--sp-5); padding: var(--sp-4); } }

/* ---- stage ---- */
.dre-stage { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  background: var(--bg-tint, var(--paper-2)); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--sp-7) var(--sp-5) var(--sp-6); }

/* The scene: the GL canvas with a DOM shadow underneath, so the shadow can
   fade while the dreidel hops without touching the GL frame. */
.dre-scene { position: relative; width: 100%; max-width: 24rem; }
.dre-cv { display: block; width: 100%; height: 20rem; touch-action: none; cursor: pointer; }
@media (max-width: 620px) { .dre-cv { height: 16rem; } }
.dre-cv:focus-visible { outline: 3px solid var(--accent); outline-offset: 8px; border-radius: var(--radius); }
.dre-shadow { position: absolute; left: 50%; top: 62%; width: 9.5rem; height: 1.6rem;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(22,18,15,.30), transparent 72%);
  filter: blur(1px); transition: opacity .2s ease; }

/* Finish picker: one segmented control, same accent as the rest of the site. */
.dre-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.dre-seg button { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .04em;
  padding: .45em .8em; border: 0; background: var(--paper); color: var(--ink-2); cursor: pointer; }
.dre-seg button + button { border-left: 1px solid var(--line); }
.dre-seg button.on { background: var(--accent); color: var(--paper); }
.dre-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Two lines of status, reserved, so the board never jumps as messages change. */
.dre-status { min-height: 2.6em; margin: 0; text-align: center; max-width: 34ch; color: var(--ink-2); font-size: var(--step--1); }
.dre-turn { margin: 0; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); min-height: 1em; }
.dre-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }

/* ---- pot, players, gelt ---- */
.dre-side { display: flex; flex-direction: column; gap: var(--sp-4); justify-content: center; }
.dre-pot { text-align: center; padding: var(--sp-4) var(--sp-3); border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--paper); }
.dre-pot__label { margin: 0; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); }
.dre-pot__n { margin: .15em 0 0; font-family: var(--font-display); font-size: var(--step-2); line-height: 1; font-variant-numeric: tabular-nums; }
.dre-pot__n small { font-size: var(--step--1); font-family: var(--font-body, inherit); color: var(--ink-3); }

.dre-players { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.dre-player { padding: var(--sp-3); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.dre-player__name { margin: 0 0 .5em; font-size: var(--step--1); color: var(--ink-2); }
.dre-player__name b { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); }

/* Chocolate gelt: a stack of foil-wrapped coins. */
.dre-chips { display: flex; align-items: center; min-height: 1.5rem; flex-wrap: wrap; gap: 2px; }
.dre-coin { width: 1.15rem; height: 1.15rem; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 30%, #ffe9a8 0%, #e8c15c 42%, #b8892b 78%, #8a6417 100%);
  border: 1px solid rgba(0,0,0,.22); box-shadow: 0 1px 2px rgba(0,0,0,.22), inset 0 0 3px rgba(255,255,255,.5);
  margin-left: -0.34rem; animation: dre-coin-in .22s var(--ease-out, ease-out) backwards;
  animation-delay: calc(var(--i) * 24ms); }
.dre-coin:first-child { margin-left: 0; }
.dre-coin__more { margin-left: .45rem; font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); }
@keyframes dre-coin-in { from { opacity: 0; transform: translateY(-5px) scale(.85); } to { opacity: 1; transform: none; } }

/* ---- options ---- */
/* The three controls read as one settings row, not three loose form fields. */
.dre-opts {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); align-items: center;
  padding-top: var(--sp-3); border-top: 1px solid var(--line);
}
.dre-opt { display: inline-flex; align-items: center; gap: .5em; font-size: var(--step--1); color: var(--ink-2); }
.dre-opt select { padding: .4em .6em; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.dre-opt--check input { width: 1.05rem; height: 1.05rem; }

/* ---- rules ---- */
/* Four rules, four columns, one strip. They are a reference you glance at, not
   four cards competing with the board for attention. */
.dre-rules { list-style: none; margin: var(--sp-5) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
@media (max-width: 720px) { .dre-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dre-rule { display: flex; gap: var(--sp-3); align-items: center;
  padding: var(--sp-3); border-right: 1px solid var(--line); }
.dre-rule:last-child { border-right: 0; }
@media (max-width: 720px) {
  .dre-rule:nth-child(2n) { border-right: 0; }
  .dre-rule:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
.dre-rule__letter { font-family: var(--font-display); font-size: var(--step-1); line-height: 1; color: var(--accent); flex: none; }
.dre-rule__body { font-size: var(--step--1); color: var(--ink-2); line-height: 1.45; }
.dre-rule__body b { color: var(--ink); }
.dre-rule__body i { color: var(--ink-3); }

/* ---- leaderboard ---- */
.dre-boardwrap { margin-top: var(--sp-7); max-width: 40rem; }
.dre-boardwrap__h { font-family: var(--font-display); font-size: var(--step-1); margin: 0 0 var(--sp-4); }
.dre-save { padding: var(--sp-4); margin-bottom: var(--sp-4);
  background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius-lg); }
.dre-save__row { display: flex; gap: var(--sp-3); margin-top: .5em; flex-wrap: wrap; }
.dre-save__row input { flex: 1 1 12rem; padding: .7em .9em; background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: var(--radius); }
.dre-save__note { margin: .5em 0 0; font-size: var(--step--1); color: var(--ink-2); }

.dre-board { list-style: none; margin: 0; padding: 0; }
.dre-board__row { display: grid; grid-template-columns: 2rem 1fr auto auto; gap: var(--sp-3);
  align-items: baseline; padding: .7em .2em; border-bottom: 1px solid var(--line); }
.dre-board__rank { font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); }
.dre-board__name { font-weight: 600; overflow-wrap: anywhere; }
.dre-board__gelt { font-family: var(--font-display); color: var(--accent); }
.dre-board__spins { font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); }
.dre-board__empty { padding: .9em .2em; color: var(--ink-3); font-style: italic; }

/* The JS honours "Reduce motion" itself (it snaps instead of spinning); this
   just stops the decorative coin drop for anyone who asked the OS to. */
@media (prefers-reduced-motion: reduce) {
  .dre-coin { animation: none; }
  .dre-shadow { transition: none; }
}

/* ==========================================================================
   Link-in-bio: expanding project cards (The Shandes, the podcast)
   Built on <details>/<summary>: opens with no JS, keyboard + AT native.
   ========================================================================== */
.lb-feats { display: grid; gap: var(--sp-3); margin: var(--sp-5) 0; }

.lb-feat { border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--paper); overflow: hidden; }
.lb-feat[open] { border-color: var(--accent); box-shadow: 0 10px 30px -18px rgba(22,18,15,.6); }

.lb-feat__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); cursor: pointer; list-style: none;
  transition: background var(--dur-2, .25s) var(--ease-out, ease); }
.lb-feat__head::-webkit-details-marker { display: none; }
.lb-feat__head:hover { background: var(--bg-tint, var(--paper-2)); }
.lb-feat__head:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.lb-feat__txt { display: flex; flex-direction: column; gap: .15em; text-align: left; }
.lb-feat__txt b { font-family: var(--font-display); font-size: var(--step-0); }
.lb-feat__txt small { color: var(--ink-3); font-size: var(--step--1); }

/* A chevron that rotates as the card opens. */
.lb-feat__chev { width: .6rem; height: .6rem; flex: none; border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent); transform: rotate(45deg); margin-right: .2rem;
  transition: transform var(--dur-2, .25s) var(--ease-out, ease); }
.lb-feat[open] .lb-feat__chev { transform: rotate(-135deg); }

.lb-feat__body { padding: 0 var(--sp-5) var(--sp-5); animation: lb-open .32s var(--ease-out, ease-out); }
@keyframes lb-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.lb-pills { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.lb-pill { display: inline-flex; align-items: center; gap: .5em; padding: .55em .9em;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper);
  font-size: var(--step--1); color: var(--ink); text-decoration: none;
  transition: transform var(--dur-1, .15s) var(--ease-out, ease), border-color var(--dur-2, .25s) var(--ease-out, ease), color var(--dur-2, .25s) var(--ease-out, ease); }
.lb-pill svg { width: 1.05em; height: 1.05em; flex: none; }
.lb-pill:hover { transform: translateY(-2px); }
.lb-pill--spotify:hover { border-color: #1db954; color: #1db954; }
.lb-pill--apple:hover   { border-color: #fa2d48; color: #fa2d48; }
.lb-pill--yt:hover      { border-color: #ff0000; color: #ff0000; }
.lb-pill--sc:hover      { border-color: #ff5500; color: #ff5500; }
.lb-pill--amazon:hover  { border-color: #00a8e1; color: #00a8e1; }

.lb-feat__more { display: inline-block; margin-top: var(--sp-4); font-size: var(--step--1); }

@media (prefers-reduced-motion: reduce) {
  .lb-feat__body { animation: none; }
  .lb-pill, .lb-feat__chev, .lb-feat__head { transition: none; }
}

/* ==========================================================================
   Past events poster wall (winx_past_events) + single event recap page.
   Reproduces winchevsky-past-events.html (Option 1) exactly: pin, art, date
   and title are direct children of ONE padded paper poster (no separate
   mount/print wrapper). The poster art shows in colour (a light .15
   grayscale, matching the mock - the one place we break from the archive's
   full grayscale). Cards are `a` when the event has somewhere to go, `div`
   when not - see class-winx-past-events.php.
   ========================================================================== */
.pastev {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 44px 34px;
}
@media (max-width: 1000px) { .pastev { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pastev { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; } }

.pastev__poster {
  position: relative; display: block; text-decoration: none; color: inherit;
  background: var(--mount); padding: 12px; border-radius: 2px;
  box-shadow: 0 18px 30px -18px rgba(26, 24, 20, .5);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .25s;
}
.pastev__poster:nth-child(4n+1) { --tilt: -1.5deg; }
.pastev__poster:nth-child(4n+2) { --tilt: 1.1deg; }
.pastev__poster:nth-child(4n+3) { --tilt: -0.6deg; }
.pastev__poster:nth-child(4n) { --tilt: 1.4deg; }
.pastev__poster:hover, .pastev__poster:focus-visible { transform: rotate(0deg) translateY(-5px); box-shadow: 0 26px 40px -20px rgba(26, 24, 20, .55); }
/* .pastev carries the site's [data-stagger] scroll-reveal, whose
   [data-stagger].is-in > *{transform:none} outranks .pastev__poster's own
   rotate on specificity - restate the tilt at matching specificity so the
   poster settles on its tilt, not flat, once revealed. */
[data-stagger].is-in > .pastev__poster { transform: rotate(var(--tilt, 0deg)); }
[data-stagger].is-in > .pastev__poster:hover, [data-stagger].is-in > .pastev__poster:focus-visible { transform: rotate(0deg) translateY(-5px); box-shadow: 0 26px 40px -20px rgba(26, 24, 20, .55); }
@media (prefers-reduced-motion: reduce) {
  .pastev__poster { transition: none; }
  .pastev__poster:hover, .pastev__poster:focus-visible,
  [data-stagger].is-in > .pastev__poster:hover, [data-stagger].is-in > .pastev__poster:focus-visible { transform: rotate(var(--tilt, 0deg)); }
}

/* The pin overlaps the top edge of the poster (top:-8px against the 12px
   padded card), not floating in empty space above it. */
.pastev__pin {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%; z-index: 3;
  background: var(--accent);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .35), inset 0 2px 2px rgba(255, 255, 255, .4);
}

.pastev__art {
  position: relative; display: block; aspect-ratio: 3 / 4; background: var(--ink-dark);
  overflow: hidden; filter: grayscale(.15) contrast(1.02); border-radius: 1px;
}
.pastev__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pastev__placeholder {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 0 10px;
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(251, 247, 239, .4); /* light on the art's dark ground - the mock's own dark-on-dark value is unreadable here */
}

.pastev__date { display: block; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-top: 11px; }
.pastev__title { display: block; font-family: var(--font-display); font-size: var(--step-0); margin-top: 2px; }

.evsingle__wrap { max-width: var(--content); }   /* the shared 1280px frame, same as every other page; was the 46rem prose measure (Erf, 2026-09-21) */
.evsingle__head { max-width: 64rem; }
.evsingle__photos.gallery--clean { gap: var(--sp-5); margin-top: var(--sp-7); }
.evsingle__head { margin-bottom: var(--sp-6); }
.evsingle__title { font-size: var(--step-3); margin-block: var(--sp-3); }
.evsingle__meta { color: var(--ink-2); font-family: var(--font-mono); font-size: var(--step--1); }
/* The recap's opening photo sits on the same edges and in the same plain
   frame as the grid below it, not in a mounted print (Erf, 2026-09-21). */
.evsingle__lead-image, .evsingle__lead-image.reveal-img { margin: 0 0 var(--sp-5); padding: 0; background: none; border: 0; box-shadow: none; max-width: none; border-radius: var(--radius) !important; overflow: hidden; }
.evsingle__lead-image img { width: 100%; height: auto; max-height: 40rem; object-fit: cover; border-radius: 0; display: block; }
.evsingle__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-6); }
/* WordPress's [gallery] shortcode and oEmbed video, inside the recap body. */
.evsingle__body .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--sp-3); }
.evsingle__body .gallery br { display: none; }
.evsingle__body .gallery-item { margin: 0 !important; width: auto !important; }
.evsingle__body .gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); border: 0 !important; }
.evsingle__body iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius); }

/* "Coming soon" badge on menu items whose page is still flagged.
   Generated from the flag in functions.php, never typed into a menu label. */
.nav-soon {
  display: inline-block;
  margin-left: .45em;
  padding: 2px 6px;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--ink-2);
  background: var(--bg-tint, rgba(0,0,0,.06));
  border: 1px solid var(--line, rgba(0,0,0,.12));
}
/* The footer is dark: the badge has to invert or it disappears into the ground. */
.footer .nav-soon {
  color: rgba(246,243,236,0.85);
  background: rgba(246,243,236,0.10);
  border-color: rgba(246,243,236,0.22);
}

/* ==========================================================================
   Campaigns (winx_campaign): pledge thermometer
   ========================================================================== */
.campaign__title { font-size: var(--step-2); margin-bottom: var(--sp-3); }
.campaign__intro { max-width: 60ch; margin-bottom: var(--sp-5); }
.campaign__deadline { margin-bottom: var(--sp-5); }
.campaign__donate { margin-top: var(--sp-5); }

/* Thermometer */
.camp-thermo { max-width: 40rem; margin-bottom: var(--sp-6); }
.camp-thermo__nums { display: flex; align-items: baseline; gap: .5em; flex-wrap: wrap; }
.camp-thermo__nums strong { font-size: var(--step-2); font-variant-numeric: tabular-nums; }
.camp-thermo__track {
  height: 14px; margin: var(--sp-3) 0 var(--sp-2);
  background: var(--bg-tint, rgba(0,0,0,.07));
  border: 1px solid var(--line); border-radius: 999px; overflow: hidden;
}
.camp-thermo__fill {
  height: 100%; width: 0; background: var(--accent);
  border-radius: 999px; transition: width var(--dur-3, .5s) var(--ease-out, ease);
}
@media (prefers-reduced-motion: reduce) { .camp-thermo__fill { transition: none; } }
.camp-thermo__meta { font-size: var(--step--1); color: var(--ink-3); }

/* Forms shared by pledge + bid */
.camp-form { max-width: 40rem; margin-block: var(--sp-4); display: grid; gap: var(--sp-3); }
.camp-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--sp-3); }
/* An amount is at most six characters. A full-width box invites a paragraph. */
.camp-form input[type="number"] { max-width: 12rem; }
.camp-form label { display: flex; flex-direction: column; gap: .35em; }
.camp-form label > span { font-size: var(--step--1); color: var(--ink-2); font-weight: 600; }
.camp-form input, .camp-form textarea {
  width: 100%; padding: .85em 1em; background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-size: var(--step-0);
}
.camp-form__check { flex-direction: row !important; align-items: center; gap: .5em; font-size: var(--step--1); }
.camp-form__check input { width: auto; }
/* The honeypot. Off-screen, never focusable, never announced. */
.camp-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.camp-form__msg:empty { display: none; }
.camp-form__msg { font-size: var(--step--1); color: var(--ink-2); }
.camp-form__msg.is-error { color: var(--accent); }

/* Pledges list */
.camp-list { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; gap: var(--sp-4); max-width: 40rem; }
.camp-list li { border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.camp-list__amt { float: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.camp-list p { margin-top: .35em; color: var(--ink-2); font-size: var(--step--1); }


/* ==========================================================================
   Link-in-bio: drifting aurora + ambient sparks behind the card
   ========================================================================== */
.linkbio { position: relative; overflow: hidden; isolation: isolate; }
.linkbio__inner { position: relative; z-index: 2; }

/* Aurora blobs removed by request - the link page reads cleaner on plain paper. */
.linkbio__aurora { display: none; }
.linkbio__aurora--off { position: absolute; inset: -20%; z-index: 0; pointer-events: none; filter: blur(70px); }
.linkbio__aurora span {
  position: absolute; display: block;
  width: 46vmax; height: 46vmax; border-radius: 50%;
  opacity: 0.30;
  will-change: transform;
}
/* The three brand accents, one per organization, kept far apart so they mingle
   at the edges rather than turning to mud in the middle. */
.linkbio__aurora span:nth-child(1) { background: #7cb342; top: -8%;  left: -6%;  animation: lb-drift-a 34s ease-in-out infinite alternate; }
.linkbio__aurora span:nth-child(2) { background: #d8392b; top: 12%;  right: -10%; animation: lb-drift-b 42s ease-in-out infinite alternate; }
.linkbio__aurora span:nth-child(3) { background: #b8860b; bottom: -14%; left: 22%; animation: lb-drift-c 50s ease-in-out infinite alternate; }

@keyframes lb-drift-a { from { transform: translate3d(0,0,0) scale(1);    } to { transform: translate3d(14vw, 8vh, 0) scale(1.18); } }
@keyframes lb-drift-b { from { transform: translate3d(0,0,0) scale(1.1);  } to { transform: translate3d(-12vw, 14vh, 0) scale(0.92); } }
@keyframes lb-drift-c { from { transform: translate3d(0,0,0) scale(0.95); } to { transform: translate3d(10vw, -12vh, 0) scale(1.15); } }

/* The canvas sits over the aurora, under the card. */
.linkbio__ambient { z-index: 1; --ambient-ink: 150, 120, 60; }

@media (prefers-reduced-motion: reduce) {
  .linkbio__aurora span { animation: none; }
}

/* ==========================================================================
   Preloader
   ========================================================================== */
.winx-preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--page-bg);
  transition: opacity .45s var(--ease-out, ease), visibility .45s;
}
/* The classic dots ring. Twelve dots on a circle, each fading in turn, so the
   bright one appears to travel around. No logo, no percentage, no text. */
.winx-preloader__ring {
  position: relative;
  width: 3.5rem; height: 3.5rem;
}
.winx-preloader__ring span {
  position: absolute; inset: 0;
  /* Rotate the whole box to this dot's angle, then push the dot out to the rim.
     Rotating a full-size box (rather than positioning each dot by hand) keeps the
     dots on a true circle at any size. */
  transform: rotate(calc(var(--i) * 30deg));
}
.winx-preloader__ring span::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  width: 0.44rem; height: 0.44rem; margin-left: -0.22rem;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.12;
  animation: winx-pre-dot 1.08s linear infinite;
  animation-delay: calc(var(--i) * 0.09s);
}
@keyframes winx-pre-dot {
  0%   { opacity: 1; }
  70%, 100% { opacity: 0.12; }
}
.winx-preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }   /* click-through the moment the fade starts */

/* Belt and braces: if JavaScript never runs, the overlay takes itself away rather
   than leaving a visitor staring at a spinner forever. */
@keyframes winx-pre-failsafe { to { opacity: 0; visibility: hidden; } }
.winx-preloader { animation: winx-pre-failsafe .4s linear 5s forwards; }

/* No chase for anyone who asked for stillness: the dots simply sit there, evenly
   lit, and the overlay still fades away on load. */
@media (prefers-reduced-motion: reduce) {
  .winx-preloader__ring span::before { animation: none; opacity: 0.5; }
  .winx-preloader { transition: none; }
}

/* The painted houses closing the link-in-bio page. Full-bleed, below the card,
   sitting on the page's own background rather than behind the links. */
.linkbio { justify-content: space-between; padding-bottom: 0; }
.linkbio__houses {
  position: relative; z-index: 2;
  width: 100vw; margin-inline: calc(50% - 50vw);
  margin-top: var(--sp-5);
  line-height: 0;
}
.linkbio__houses-img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   In-place disclosure ("Read more") - DESIGN-GUIDELINES.md section 7.
   One implementation for every long read: the intro stays, the rest expands
   on the same page. Timeline variant hides later entries until asked.
   ========================================================================== */
.disclose__more {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-4) var(--ease-out);
}
.disclose__more.is-open { grid-template-rows: 1fr; }
.disclose__inner { min-height: 0; overflow: clip; }
/* The intro's last block keeps its margin so the seam is invisible when open. */
.disclose__btn { margin-top: var(--sp-4); }
.disclose__btn .chev { display: inline-block; transition: transform var(--dur-2) var(--ease-out); margin-left: 0.4em; }
.disclose__btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .disclose__more { transition: none; }
  .disclose__btn .chev { transition: none; }
}
/* Timeline collapse: later entries wait behind the button. */
.winx-rtl.is-collapsed .rtl-item--extra { display: none; }
.winx-rtl .disclose__btn { margin-left: calc(7.5rem + var(--sp-5)); } /* aligns with entry bodies past the year column */
@media (max-width: 720px) { .winx-rtl .disclose__btn { margin-left: 0; } }

/* Wayfinding back-link above hub-child pages (a cabin, a course). */
.backlink-row { padding-top: var(--sp-5); margin-bottom: calc(-1 * var(--sp-5)); }
.backlink { font-size: var(--step--1); color: var(--ink-2); }
.backlink .arrow { transition: transform var(--dur-2) var(--ease-out); display: inline-block; }
.backlink:hover .arrow { transform: translateX(-3px); }

/* Horizontal-scroll guidance (DECISIONS.md #9): arrows page the row, visible
   only on sides with more to show. Injected by hscroll.js. */
.hscroll { position: relative; }
.hscroll__btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-1); cursor: pointer; font-size: 1.1rem;
  display: grid; place-items: center;
  transition: background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.hscroll__btn:hover, .hscroll__btn:focus-visible { background: var(--bg-tint); box-shadow: var(--shadow-2); }
.hscroll__btn--prev { left: 0.6rem; }
.hscroll__btn--next { right: 0.6rem; }
.hscroll__btn[hidden] { display: none; }

/* ------------------------------------------------------------------ */
/* Mortuary Benefits - a mutual-aid document (winx_mortuary). Calm and
   ink-toned on the org's own --page-bg (UJPO's is already #f8f3e0); a
   full-width lead, a body column at the site's --measure, and a letterpress
   benefit-slip aside that only ever restates figures already in the body. */
/* ------------------------------------------------------------------ */
.mortuary-doc__lead { max-width: var(--measure); margin-bottom: var(--sp-8); }
.mortuary-doc__intro { margin-top: var(--sp-5); }
.mortuary-doc__grid { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(260px, 320px); gap: var(--sp-8) var(--sp-7); align-items: start; }
@media (max-width: 900px) { .mortuary-doc__grid { grid-template-columns: 1fr; } }
.mortuary-doc__body .rich + .rich { margin-top: var(--sp-6); }
/* The Toronto-side dues paragraph and the Montreal paragraphs are one
   flowing column; a single hairline marks where Montreal begins. */
.mortuary-doc__montreal { padding-top: var(--sp-6); border-top: 1px solid var(--line); }

.mortuary-slip { position: sticky; top: 5.5rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-6); box-shadow: var(--shadow-1); }
@media (max-width: 900px) { .mortuary-slip { position: static; } }
.mortuary-slip__kicker { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--sp-4); }
.mortuary-slip__row { padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.mortuary-slip__row:first-of-type { border-top: none; }
.mortuary-slip__label { display: block; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .04em; color: var(--ink-3); margin-bottom: .2rem; }
.mortuary-slip__value { display: block; font-family: var(--font-display); font-size: var(--step-0); line-height: 1.3; color: var(--ink); }
.mortuary-slip__contact { margin-top: var(--sp-5); background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: var(--sp-5); }
.mortuary-slip__contact .mortuary-slip__kicker { color: color-mix(in srgb, var(--paper) 70%, transparent); margin-bottom: var(--sp-3); }
.mortuary-slip__name { font-family: var(--font-display); font-size: var(--step-0); margin: 0 0 .3rem; }
.mortuary-slip__email { display: inline-block; font-family: var(--font-mono); font-size: var(--step--1); color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.mortuary-slip__email:hover { color: var(--accent); }

/* Roles & Committees (winx_roles) - the volunteer committee directory. On the
   UJPO page --accent is the UJPO red, so board cards carry a red edge and the
   card tags read red without any hardcoded colour. */
.roles__intro { max-width: 62ch; margin-bottom: var(--sp-8); }
.roles__intro h2 { margin: .3em 0 .4em; }
.roles__lead { color: var(--ink-2); }
.roles__entity { margin-top: var(--sp-9); }
.roles__entity:first-of-type { margin-top: var(--sp-7); }
.roles__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 2px solid var(--ink); padding-bottom: .8rem; margin-bottom: var(--sp-6); }
.roles__head h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.01em; margin: 0; }
.roles__count { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.roles__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.roles-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 2.4vw, 1.9rem); display: flex; flex-direction: column; gap: .7rem; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2); }
.roles-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.roles-card--board { border-left: 3px solid var(--accent); }
.roles-card__tag { font-family: var(--font-mono); font-weight: 600; font-size: var(--step--2); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.roles-card h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; line-height: 1.15; letter-spacing: -.01em; margin: 0; }
.roles-card p { font-size: .92rem; color: var(--ink-2); margin: 0; flex: 1; }
.roles-card__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.roles-chip { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .03em; color: var(--ink-3); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: .22rem .6rem; }
.roles-card__foot { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: .7rem; margin-top: .2rem; }
@media (max-width: 560px) { .roles__grid { grid-template-columns: 1fr; } }

/* Icon-only platform button, shared by the podcast and Shandes promos - a
   .banner descendant, so it inherits the same ghost-on-dark / paper-on-accent
   language as .btn--ghost / .btn--accent instead of inventing a third palette. */
.icon-btn { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--wc-ghost-border); color: inherit; display: inline-flex; align-items: center; justify-content: center; flex: none; transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.icon-btn svg { width: 1.05rem; height: 1.05rem; }
.icon-btn:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); transform: translateY(-3px); }
.icon-btn:active { transform: scale(.96); }
.banner--accent .icon-btn { border-color: rgba(255,255,255,.4); }
.banner--accent .icon-btn:hover { color: var(--accent-2, var(--accent)); }

/* Podcast promo (winx_podcast) - a .banner variant: cover art with a play
   affordance, a "recent guests" credit line, and a footer that separates the
   show's own page from the platform-listen icons. */
.pod__grid { display: grid; grid-template-columns: .62fr 1fr; gap: clamp(2rem, 4vw, 3rem); align-items: center; }
.pod__grid--solo { grid-template-columns: 1.05fr .95fr; max-width: none; align-items: center; }
.pod__cover { position: relative; aspect-ratio: 1/1; border-radius: var(--radius-lg); background: linear-gradient(155deg, color-mix(in srgb, var(--ink) 88%, #fff 6%), var(--ink) 65%); border: 1px solid var(--wc-ghost-border); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pod__play { width: 4.2rem; height: 4.2rem; border-radius: 50%; border: 1.5px solid var(--wc-ghost-border); position: relative; }
.pod__play::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-top: .58rem solid transparent; border-bottom: .58rem solid transparent; border-left: .95rem solid var(--paper); transform: translate(-40%, -50%); }
.pod__coverlabel { position: absolute; bottom: .9rem; left: .9rem; right: .9rem; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; color: rgba(246,243,236,.5); text-align: center; }
.pod__dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: .5em; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent); animation: pod-pulse 2.2s ease-in-out infinite; }
@keyframes pod-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .pod__dot { animation: none; } }
.pod__guests { font-size: .9rem; opacity: .9; }
.pod__guests b { font-weight: 600; }
.pod__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--wc-ghost-border); padding-top: var(--sp-5); }
.pod__platforms { display: flex; gap: .55rem; flex-wrap: wrap; }
/* Solo subscribe box: text left, a stacked list of labelled platform buttons right. */
.pod__subscribe { display: flex; flex-direction: column; justify-content: center; }
.pod__listen { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase; color: rgba(246,243,236,.55); margin-bottom: var(--sp-3); }
.pod__platforms--list { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
.pod__plat { display: inline-flex; align-items: center; gap: .7rem; min-height: 2.9rem; padding: .5rem 1.15rem; border: 1px solid var(--wc-ghost-border); border-radius: 999px; color: var(--paper); text-decoration: none; transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.pod__plat svg { width: 1.15rem; height: 1.15rem; flex: none; }
.pod__plat span { font-size: var(--step--1); font-weight: 500; letter-spacing: .01em; }
.pod__plat:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); transform: translateY(-2px); }
.pod__plat:active { transform: scale(.98); }
.pod__plat:focus-visible { outline: 3px solid var(--accent-bright, var(--accent)); outline-offset: 3px; }
@media (max-width: 760px) { .pod__grid { grid-template-columns: 1fr; } .pod__grid--solo { grid-template-columns: 1fr; gap: var(--sp-6); } .pod__cover { max-width: 220px; margin-inline: auto; } .pod__foot { justify-content: flex-start; } }

/* Shared text-column rhythm for the three cultural-export promos (podcast /
   shandes / choir): one flex gap owns the vertical spacing between eyebrow,
   heading, body, and CTA, instead of each child's own browser-default or
   token margin fighting for the gap - which is what made the spacing feel
   uneven from element to element. */
.promo-col { display: flex; flex-direction: column; gap: var(--sp-4); }
.promo-col > * { margin: 0; }
/* A bare button as a direct child (the choir CTA) must not stretch to the
   column's full width the way text and the footer rows correctly do. */
.promo-col > .btn { align-self: flex-start; }

/* The Shandes promo (winx_shandes) - a .banner--accent variant: the music
   leads (streaming icons + a CTA to the project page), and the art slot is a
   real photo of the duo with the vinyl motif peeking out behind it rather
   than a purely decorative disc. */
.shan__grid { display: grid; grid-template-columns: 1fr .62fr; gap: clamp(2rem, 4vw, 3rem); align-items: center; }
.shan__title { font-style: italic; }
.shan__names { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; opacity: .85; }
.shan__row { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.shan__platforms { display: flex; gap: .55rem; }
.shan__art { position: relative; aspect-ratio: 1/1; }
.shan__disc { position: absolute; z-index: 1; width: 64%; aspect-ratio: 1/1; right: 2%; bottom: -6%; border-radius: 50%; background: repeating-radial-gradient(circle at center, var(--ink) 0 2px, color-mix(in srgb, var(--ink) 88%, #fff 4%) 2px 4px); box-shadow: 0 20px 45px -20px rgba(0,0,0,.55); animation: shan-spin 14s linear infinite; }
.shan__disc::after { content: ""; position: absolute; inset: 38%; border-radius: 50%; background: var(--accent); border: 2px solid var(--ink); }
@keyframes shan-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .shan__disc { animation: none; } }
.shan__photo { position: relative; z-index: 2; width: 78%; aspect-ratio: 4/5; background: var(--mount); padding: 12px 12px 14px; border-radius: 2px; box-shadow: 0 26px 48px -28px rgba(26,24,20,.55); border-bottom: 3px solid var(--ink); }
.shan__photo img, .shan__photo .ph { border-radius: 1px; }
@media (max-width: 760px) { .shan__grid { grid-template-columns: 1fr; } .shan__art { max-width: 240px; margin-inline: auto 1.5rem; } }

/* Toronto Jewish Folk Choir promo (winx_choir) - a .banner variant: an
   "Est." seal, an archival photo in the same framed-print language as every
   other photo on the site, and a real quote from the record. */
.choir__grid { display: grid; grid-template-columns: 1fr .78fr; gap: clamp(2rem, 4vw, 3.2rem); align-items: center; }
.choir__quote { border-left: 2px solid var(--accent-bright, var(--accent)); padding-left: 1rem; font-family: var(--font-display); font-style: italic; font-size: var(--step--1); opacity: .9; max-width: 44ch; }
.choir__quote cite { display: block; margin-top: .5rem; font-family: var(--font-mono); font-style: normal; font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
/* Stamped onto the photo's own top-right corner (like a wax seal on a mounted
   print) rather than floated over the whole card, so it can never collide
   with the text column regardless of viewport width. */
.choir__photowrap { position: relative; }
.choir__seal { position: absolute; top: -1.3rem; right: -1.3rem; width: 4.6rem; height: 4.6rem; border-radius: 50%; background: var(--ink); border: 1.5px solid rgba(246,243,236,.4); display: flex; align-items: center; justify-content: center; text-align: center; transform: rotate(-8deg); z-index: 2; box-shadow: 0 8px 20px -8px rgba(0,0,0,.5); }
.choir__seal::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(246,243,236,.24); border-radius: 50%; }
.choir__seal span { font-family: var(--font-display); font-size: var(--step--2); letter-spacing: .06em; line-height: 1.2; color: rgba(246,243,236,.8); }
.choir__seal b { display: block; font-size: .98rem; font-weight: 400; color: #f2ece2; }
.choir__photo { position: relative; aspect-ratio: 4/5; background: var(--mount); padding: 12px 12px 14px; border-radius: 2px; box-shadow: 0 26px 48px -28px rgba(26,24,20,.55); border-bottom: 3px solid var(--accent); }
.choir__photo img, .choir__photo .ph { border-radius: 1px; }
@media (max-width: 760px) { .choir__grid { grid-template-columns: 1fr; } .choir__photowrap { max-width: 260px; margin-inline: auto; margin-top: 1.3rem; } }

/* Vertical rhythm inside copy stacks (Erf, 2026-09-21: "all things are so
   tight"). Eyebrow -> title -> lead -> actions breathe on the spacing ladder,
   in every stack, not only the hero. */
.stack > .eyebrow + * { margin-top: var(--sp-4); }
.stack > h1 + .lead, .stack > h2 + .lead, .stack > h1 + p, .stack > h2 + p { margin-top: var(--sp-5); }
.stack > .lead + .hero__actions, .stack > p + .hero__actions, .stack > * + .hero__actions { margin-top: var(--sp-6); }
.hero__body { gap: var(--sp-6); }
.hero__actions { margin-top: var(--sp-3); }
.banner__grid .stack > * + * { margin-top: var(--sp-4); }
.banner .hero__actions--standalone, .banner .hero__actions { margin-top: var(--sp-6); }

/* Search page: one form, one list. */
.search__form { display: flex; gap: var(--sp-3); max-width: var(--measure); margin-bottom: var(--sp-6); }
.search__input { flex: 1; min-width: 0; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 0.85em 1em; font: inherit; color: var(--ink); }
.search__input:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.search__count { margin-bottom: var(--sp-4); font-size: .9rem; }
.search__list { list-style: none; margin: 0; padding: 0; max-width: var(--measure); border-top: 1px solid var(--line); }
.search__item { border-bottom: 1px solid var(--line); }
.search__link { display: grid; gap: var(--sp-1); padding: var(--sp-5) 0; color: inherit; text-decoration: none; }
.search__link:hover .search__title { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.search__kind { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.search__title { font-family: var(--font-display); font-size: var(--step-1); line-height: var(--leading-snug); }
.search__excerpt { color: var(--ink-2); font-size: var(--step--1); }
.search__url { font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); }
.search__empty { max-width: var(--measure); }
@media (max-width: 600px) { .search__form { flex-wrap: wrap; } .search__form .btn { width: 100%; } }

/* Choir details (winx_choir_details): the season's facts as one paper card
   on the container edge. Status strip, headline, seasons table, facts row. */
/* Folk Choir season, option A "Poster" (Erf-approved 2026-09-21): the two
   seasons side by side as the headline, the practical facts as one strip. */
.choir-details .eyebrow { margin-bottom: var(--sp-4); }
.choir-poster { max-width: none; }   /* same edges as the feature video below it (Erf, 2026-09-21) */
.choir-poster__status { font-family: var(--font-mono); font-weight: 500; font-size: var(--step--2); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent); margin: 0 0 var(--sp-4); }
.choir-poster__dates { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.choir-poster__date { padding: var(--sp-5) 0; }
.choir-poster__date + .choir-poster__date { border-left: 1px solid var(--line); padding-left: var(--sp-6); }
.choir-poster__k { display: block; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-2); }
.choir-poster__date b { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.05; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.choir-poster__strip { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); padding-top: var(--sp-4); color: var(--ink-2); font-size: var(--step--1); }
.choir-poster__strip b { color: var(--ink); font-weight: 500; }
@media (max-width: 600px) { .choir-poster__dates { grid-template-columns: 1fr; } .choir-poster__date + .choir-poster__date { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); } }

/* Text-only cards (holidays, courses, org homepages): the mono tag used to
   sit ABOVE the title, so a two-line tag pushed one title lower than its
   neighbours and the row read as four different cards. Title leads now, the
   tag becomes a one-line descriptor under it, the body gets a measure, and
   the whole card is drawn as a card, not a text column in a box (Erf,
   2026-09-21 "design these better"). Cards with media are untouched. */
.card:not(:has(.card__media)) .card__body { padding: var(--sp-6) var(--sp-5) var(--sp-5); gap: var(--sp-2); }
.card:not(:has(.card__media)) .card__tag { order: 2; color: var(--ink-3); letter-spacing: .1em; padding-top: var(--sp-1); }
.card:not(:has(.card__media)) .card__title { order: 1; }
.card:not(:has(.card__media)) .card__body > p { order: 3; margin-top: var(--sp-3); max-width: 52ch; line-height: 1.6; }
.card:not(:has(.card__media)) .card__foot { order: 4; padding-top: var(--sp-5); }
.card:not(:has(.card__media)) .card__foot .link { font-size: var(--step--1); }
.card:not(:has(.card__media)) { border-top: 2px solid var(--accent-bright, var(--accent)); box-shadow: 0 1px 2px rgba(22,18,15,.06); }
/* Reserve two lines for the descriptor so the body paragraphs start on the
   same line across a row whether the tag wraps or not. */
.card:not(:has(.card__media)) .card__tag { line-height: 1.5; min-height: 3em; box-sizing: border-box; }
/* No tag on any card in the row: no reserved tag space either (the program cards had a hole under every title). */
.card:not(:has(.card__media)):not(:has(.card__tag)) .card__body > p { margin-top: var(--sp-2); }
.card:not(:has(.card__media)):not(:has(.card__tag)) .card__body { padding-top: var(--sp-5); }

/* Vertical-clip lightbox controls (Erf, 2026-09-21: "once i open one of
   these vertical clips i cant close it or have any control"). The overlay
   now lives on <body> (see vertical-video.js) so it sits above the header;
   the bar carries a persistent play/pause + mute, and prev/next step
   through the row. Clicking the picture toggles playback. */
.vvlb { z-index: 1000; }
.vvlb__video { cursor: pointer; }
.vvlb__row { gap: var(--sp-2); }
.vvlb__title { flex: 1; }
.vvlb__ctl { flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(251, 247, 239, .35); background: rgba(0, 0, 0, .35); color: var(--paper); cursor: pointer; padding: 0; }
.vvlb__ctl:hover { border-color: var(--paper); background: rgba(251, 247, 239, .16); }
.vvlb__ctl svg { width: .9rem; height: .9rem; fill: currentColor; }
.vvlb__ico-pause, .vvlb__ico-off { display: none; }
.vvlb__frame.is-playing .vvlb__ico-pause { display: block; }
.vvlb__frame.is-playing .vvlb__ico-play { display: none; }
.vvlb__frame.is-muted .vvlb__ico-off { display: block; }
.vvlb__frame.is-muted .vvlb__ico-on { display: none; }
.vvlb__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid rgba(251, 247, 239, .4); background: rgba(0, 0, 0, .3); color: var(--paper); font-size: 1.55rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 .15em; }
.vvlb__nav--prev { left: clamp(.6rem, 2vw, 1.6rem); }
.vvlb__nav--next { right: clamp(.6rem, 2vw, 1.6rem); }
.vvlb__nav:hover { background: rgba(251, 247, 239, .16); }
.vvlb__nav[disabled] { opacity: .25; cursor: default; }

/* Justified photo rows (past-event recaps). Each figure carries --ar
   (width / height); flex-basis targets a row height, flex-grow shares the
   leftover width in proportion to the ratio so a row of mixed portrait and
   landscape frames lands on one common height with nothing cropped. The
   ::after filler stops a short last row from being stretched to the edge.
   (Erf, 2026-09-21) */
.gallery--rows { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.gallery--rows figure { aspect-ratio: var(--ar, 1.5); flex: calc(var(--ar, 1.5) * 100) 1 calc(var(--ar, 1.5) * 16rem); min-width: 0; max-height: 34rem; }
.gallery--rows::after { content: ""; flex: 100000 1 0; }
.gallery--rows img { object-fit: contain; }
@media (max-width: 640px) { .gallery--rows figure { flex-basis: calc(var(--ar, 1.5) * 11rem); } }

/* Link-in-bio trees (/links/, /theshandes/, /jewishhereticspod/): one row
   language for the feature cards and the plain links. Titles in the display
   face at one size and one weight, subs in the sans small step, the same
   padding and radius on every row (Erf, 2026-09-21: "fonts are not all
   consistent"). */
.linkbio__inner { width: min(34rem, 100%); }
.linkbio h1 { font-size: var(--step-2); margin-top: var(--sp-2); }
.linkbio .tag { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; color: var(--ink-3); margin-top: var(--sp-3); }
.lb-feats, .linklist { gap: var(--sp-3); }
.lb-feats { margin: 0 0 var(--sp-3); }
.lb-feat, .linkbtn { border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--paper); }
.lb-feat__head, .linkbtn { padding: var(--sp-4) var(--sp-5); min-height: 4.5rem; }
.lb-feat__txt b, .linkbtn b { font-family: var(--font-display); font-weight: 400; font-size: var(--step-1); line-height: var(--leading-snug); }
.lb-feat__txt small, .linkbtn small { font-family: var(--font-sans); font-size: var(--step--1); color: var(--ink-3); display: block; margin-top: .15em; }
.linkbtn .ic { display: none; }
.linkbtn .arrow, .lb-feat__chev { color: var(--accent); }
.lb-feat__head:hover, .linkbtn:hover { border-color: var(--accent); }
.linkbtn--primary, .linkbtn--primary b, .linkbtn--primary .arrow { color: var(--accent-ink, var(--paper)); }
.linkbtn.linkbtn--primary { background: var(--accent); border-color: var(--accent); }
.linkbtn--primary small { color: color-mix(in srgb, var(--accent-ink, var(--paper)) 78%, transparent); }
.lb-pill { font-family: var(--font-sans); font-size: var(--step--1); font-weight: 500; }
.lb-feat__more { font-family: var(--font-sans); }
.linkbio__foot { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase; }

/* An intro (eyebrow / title / lead) followed by a listing is one composition:
   the listing's own top padding doubled the section rhythm into a 150px hole
   (Employment: Erf, 2026-09-21). */
.elementor-widget-winx_intro + .elementor-widget-winx_jobs .section,
.elementor-widget-winx_intro + .elementor-widget-winx_cards .section,
.elementor-widget-winx_intro + .elementor-widget-winx_events .section,
.elementor-widget-winx_intro + .elementor-widget-winx_past_events .section,
.elementor-widget-winx_intro + .elementor-widget-winx_gallery .section { padding-top: 0; }
.elementor-widget-winx_intro .section { padding-bottom: var(--sp-6); }

/* Statements register (replaces the two-up broadside cards, 2026-09-21). */
.streg { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.streg__row { display: grid; grid-template-columns: 10rem 1fr; gap: var(--sp-5); padding: var(--sp-6) 0; border-bottom: 1px solid var(--line); position: relative; }
.streg__date { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); padding-top: .55em; }
.streg__title { font-size: var(--step-1); line-height: var(--leading-snug); margin: 0 0 var(--sp-3); max-width: 30ch; text-wrap: balance; }
.streg__link { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color var(--dur-3) var(--ease-out), text-decoration-color var(--dur-3) var(--ease-out); }
.streg__link::after { content: ""; position: absolute; inset: 0; }
.streg__row:hover .streg__link { color: var(--accent); text-decoration-color: currentColor; }
.streg__excerpt { color: var(--ink-2); max-width: 62ch; margin: 0 0 var(--sp-4); }
.streg__actions { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: baseline; margin: 0; position: relative; z-index: 1; font-size: var(--step--1); }
.streg__pdf { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
.streg__pdf:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 640px) { .streg__row { grid-template-columns: 1fr; gap: var(--sp-2); } }

/* Banner pair: two bands side by side share one height, and their buttons
   sit on one baseline at the bottom whatever the copy length above them
   (Erf, 2026-09-21). Applies to every .banner that carries actions, so a
   single band next to anything else lines up the same way. */
.bannerpair { display: grid; gap: var(--sp-5); grid-template-columns: 1fr 1fr; align-items: stretch; }
.bannerpair .banner { display: flex; flex-direction: column; }
.bannerpair .banner > .h3, .bannerpair .banner > h2 { margin-top: var(--sp-3) !important; }
.bannerpair .banner > p:not(.eyebrow) { margin-bottom: 0; }
.bannerpair .banner .hero__actions { margin-top: auto !important; padding-top: var(--sp-6); }
@media (max-width: 760px) { .bannerpair { grid-template-columns: 1fr; } }

/* Banner look "edge strip" (option 2, Erf 2026-09-21): a paper card with a
   thick org-colour left edge, one line tall, text left and buttons right. */
.banner.banner--edge { background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-left: 6px solid var(--accent); border-radius: var(--radius); padding: var(--sp-5) var(--sp-6); }
.banner.banner--edge .eyebrow { color: var(--accent); opacity: 1; }
.banner.banner--edge h2, .banner.banner--edge p { color: inherit; opacity: 1; }
.banner.banner--edge .banner__grid { grid-template-columns: 1fr auto; gap: var(--sp-6); }
.banner.banner--edge .banner__grid > .hero__actions--standalone { justify-content: flex-end; }
.banner.banner--edge .btn--accent { --_bg: var(--accent); --_fg: var(--accent-ink, #fff); border-color: var(--accent); }
.banner.banner--edge .btn--ghost { --_fg: var(--ink); border-color: var(--line-strong); color: var(--ink); }
.banner.banner--edge .btn--ghost::after { background: var(--ink); }
.banner.banner--edge .btn--ghost:hover { color: var(--paper); }
.banner.banner--edge .banner__bigfig { display: none; }
@media (max-width: 720px) { .banner.banner--edge .banner__grid { grid-template-columns: 1fr; } .banner.banner--edge .banner__grid > .hero__actions--standalone { justify-content: flex-start; } }

/* Testimonials, pull quote (option A). */
.testi .eyebrow { margin-bottom: var(--sp-5); }
.testi__list { display: grid; gap: var(--sp-6); max-width: 56rem; }
.testi__q { margin: 0; padding: 0 0 0 3.5rem; position: relative; }
.testi__q + .testi__q { padding-top: var(--sp-6); border-top: 1px solid var(--line); }
.testi__q::before { content: "\201C"; position: absolute; left: 0; top: -.35em; font-family: var(--font-display); font-size: 6.5rem; line-height: 1; color: var(--accent); opacity: .5; }
.testi__q + .testi__q::before { top: calc(var(--sp-6) - .35em); }
.testi__q p { font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.3; margin: 0 0 var(--sp-4); text-wrap: balance; max-width: 30ch; }
.testi__q cite { font-family: var(--font-mono); font-style: normal; font-size: var(--step--2); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: .4em 1em; }
.testi__q cite span { color: var(--ink-3); opacity: .8; }

/* Link trees: quieter hover on the feature cards (no tinted head fill; the
   border and chevron take the accent), and the "Read more" line sits left with
   the pills instead of floating centred (Erf, 2026-09-21). */
.lb-feat__head:hover { background: transparent; }
.lb-feat:hover, .lb-feat[open] { border-color: var(--accent); box-shadow: none; }
.lb-feat:hover .lb-feat__txt b { color: var(--accent); }
.lb-feat__body { text-align: left; }
.lb-feat__more { display: inline-block; margin-top: var(--sp-4); }

/* Feature bands, family 2 "Ink stage" (Erf-approved 2026-09-21): the Shandes
   and Choir blocks share one dark stage. Red lives in the eyebrow, the mount's
   rule and nothing else; buttons are cream; the Shandes disc and the choir
   wax seal are gone, the seal year becomes a mono caption under the print. */
.shan.banner.banner--accent { background: var(--ink); color: var(--paper); }
.shan .eyebrow { color: var(--accent-bright, var(--accent)); opacity: 1; }
.shan .eyebrow::before { background: currentColor; }
.shan__names { opacity: .7; }
.shan .btn--accent { --_bg: var(--paper); --_fg: var(--ink); border-color: var(--paper); }
.shan .btn--accent::after { background: var(--ink); }
.shan .btn--accent:hover { color: var(--paper); }
.shan__disc { display: none; }
.shan__art { aspect-ratio: auto; display: flex; justify-content: flex-end; }
.shan__photo { width: min(100%, 22rem); aspect-ratio: 1 / 1; border-bottom-color: var(--accent-bright, var(--accent)); box-shadow: 0 26px 48px -28px rgba(0, 0, 0, .8); }
.shan__photo img { width: 100%; height: 100%; object-fit: cover; }
.choir.banner { background: var(--ink); }
.choir .eyebrow { color: var(--accent-bright, var(--accent)); opacity: 1; }
.choir .eyebrow::before { background: currentColor; }
.choir__photo { border-bottom: 3px solid var(--accent-bright, var(--accent)); }
.choir__seal { position: static; width: auto; height: auto; border: 0; background: none; border-radius: 0; display: block; margin-top: var(--sp-3); }
.choir__seal::before { content: none; }
.choir__seal span { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: rgba(246, 243, 236, .6); line-height: 1.4; }
.choir__seal span br { display: none; }
@media (max-width: 760px) { .shan__art { justify-content: flex-start; } }
/* Bands sitewide are edge strips now: the pair's dark/accent fills give way. */
.bannerpair .banner--edge.banner--accent { background: var(--paper); color: var(--ink); }
.bannerpair .banner--edge .hero__actions { padding-top: var(--sp-5); }
/* Cabin plates: the door-plate tag had accent text on an accent fill (unreadable). */
/* Edge strip, every banner layout: text left, buttons right, whatever the
   widget's layout setting (the "simple" stacked layout put the button under
   the copy, Erf 2026-09-21). */
.banner.banner--edge { display: grid; grid-template-columns: 1fr auto; column-gap: var(--sp-6); row-gap: 0; align-items: center; text-align: left !important; }
.banner.banner--edge > * { grid-column: 1; }
.banner.banner--edge > .banner__grid { grid-column: 1 / -1; }
.banner.banner--edge > .hero__actions { grid-column: 2; grid-row: 1 / span 6; margin-top: 0 !important; align-self: center; justify-content: flex-end; }
.banner.banner--edge > h2, .banner.banner--edge > .h3 { margin-top: var(--sp-2) !important; margin-bottom: var(--sp-2) !important; }
.banner.banner--edge > p:not(.eyebrow) { margin: 0; }
.banner.banner--edge .eyebrow { justify-content: flex-start !important; }
@media (max-width: 720px) { .banner.banner--edge { grid-template-columns: 1fr; } .banner.banner--edge > .hero__actions { grid-column: 1; grid-row: auto; justify-content: flex-start; padding-top: var(--sp-4); } }

/* Form box contact rows: the Centre contact page's "direct lines" in any form
   box (theme-level copy so it does not depend on richpage.css). */
.fbox__facts { margin: var(--sp-4) 0 0; padding: 0; background: none; border: 0; box-shadow: none; }
.fbox__facts .mk-facts__row { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--sp-4); border-top: 1px solid var(--line); padding: var(--sp-3) 0; font-size: var(--step--1); }
.fbox__facts .mk-facts__row:first-of-type { border-top: 1px solid var(--line-strong); }
.fbox__facts .mk-facts__row b { font-family: var(--font-mono); font-weight: 500; font-size: var(--step--2); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); padding-top: .3em; }
.fbox__facts .mk-facts__row span { color: var(--ink-2); overflow-wrap: anywhere; }
.fbox__facts .mk-facts__row a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.fbox--dark .fbox__facts .mk-facts__row span { color: rgba(246,243,236,.85); }
.fbox--dark .fbox__facts .mk-facts__row b { color: rgba(246,243,236,.55); }
.fbox--dark .fbox__facts .mk-facts__row { border-color: rgba(246,243,236,.18); }

/* Cards, ledger variant (option P1, Erf 2026-09-21): add the class
   "cards--ledger" to a winx_cards widget and its cards become one ruled list:
   title left, description right, link on the far right. */
.cards--ledger .cards, .cards--ledger .grid { display: block; border-top: 1px solid var(--line-strong); }
.cards--ledger .card { background: none; border: 0; border-top: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.cards--ledger .card:hover { transform: none; box-shadow: none; }
.cards--ledger .card__body { display: grid; grid-template-columns: 14rem 1fr auto; gap: var(--sp-6); align-items: baseline; padding: var(--sp-5) 0; }
.cards--ledger .card__title { order: 0; font-size: var(--step-1); }
.cards--ledger .card__tag { order: 0; grid-column: 1; min-height: 0; padding: 0; margin-top: var(--sp-1); line-height: 1.4; }
.cards--ledger .card__body > p { order: 0; grid-column: 2; grid-row: 1 / span 2; margin: 0; max-width: 58ch; }
.cards--ledger .card__foot { order: 0; grid-column: 3; grid-row: 1 / span 2; padding: 0; margin: 0; }
@media (max-width: 720px) { .cards--ledger .card__body { grid-template-columns: 1fr; } .cards--ledger .card__body > p, .cards--ledger .card__foot { grid-column: 1; grid-row: auto; } }

/* Tables inside prose (fees, rates): one ruled table on the site's tokens. */
.rich table, .prose table { width: 100%; max-width: 40rem; border-collapse: collapse; margin: var(--sp-4) 0 var(--sp-5); font-variant-numeric: tabular-nums; }
.rich th, .prose th { text-align: left; font-family: var(--font-mono); font-weight: 500; font-size: var(--step--2); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); padding: var(--sp-3) var(--sp-4) var(--sp-3) 0; border-bottom: 1px solid var(--line-strong); }
.rich td, .prose td { padding: var(--sp-3) var(--sp-4) var(--sp-3) 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.rich td:first-child, .prose td:first-child { color: var(--ink-2); }
.rich table + p, .prose table + p { font-size: var(--step--1); color: var(--ink-2); max-width: 52ch; }

/* Link trees: no highlighted rows at all (Erf, 2026-09-21), and the type one
   step smaller so the list reads as a list, not a stack of posters. */
.linkbtn.linkbtn--primary, .linkbtn.linkbtn--primary:hover { background: var(--paper); border-color: var(--line-strong); color: var(--ink); }
.linkbtn.linkbtn--primary b, .linkbtn.linkbtn--primary .arrow { color: var(--ink); }
.linkbtn.linkbtn--primary .arrow { color: var(--accent); }
.linkbtn.linkbtn--primary small { color: var(--ink-3); }
.lb-feat__head, .linkbtn { padding: var(--sp-3) var(--sp-4); min-height: 3.6rem; }
.lb-feat__txt b, .linkbtn b { font-size: var(--step-0); }
.lb-feat__txt small, .linkbtn small { font-size: .9rem; }
.linkbio h1 { font-size: var(--step-1); }
.linkbio__inner { width: min(30rem, 100%); }
.lb-feats, .linklist { gap: var(--sp-2); }

/* Tables sitewide: headers and numbers at the site's emphasis weight, not bold. */
.rich th, .prose th, .mk-table th, table th, .num { font-weight: 500; }

/* Camp Programming season block (2026-09-21). ON: a poster, the dates as the
   headline, buttons, then the write-up in a reading column. OVER: a short
   notice in the same column. */
.camp-season__title { font-size: var(--hero-title); line-height: var(--leading-tight); margin: var(--sp-3) 0 var(--sp-3); max-width: 18ch; text-wrap: balance; }
.camp-season__dates { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink-2); margin: 0 0 var(--sp-5); font-variant-numeric: tabular-nums; }
.camp-season__actions { margin-bottom: var(--sp-7); }
.camp-season__body { max-width: var(--measure); padding-top: var(--sp-6); border-top: 1px solid var(--line-strong); }
.camp-season__over { max-width: var(--measure); }
.camp-season__over-title { font-size: var(--hero-title); line-height: var(--leading-tight); margin: var(--sp-3) 0 var(--sp-4); }
.camp-season__next { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent); margin: 0 0 var(--sp-5); }

/* ==========================================================================
   Phone pass after launch (Erf, 2026-09-22, iPhone screenshots)
   ========================================================================== */
@media (max-width: 860px) {
  /* 1. iOS paints its status-bar strip with whatever is under the top edge of
     the page. Through the 82%-translucent, blurred nav that was the hero
     button, so a "gap" showed between the Dynamic Island and the header. On a
     phone the nav is solid paper, and it also paints the strip above itself so
     the header reads as one piece up to the island. */
  .nav { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* Only once scrolled: at the top of the page the strip above the nav is the
     branch bar (or the dark hero), which must stay visible. */
  .nav.is-scrolled::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 120px;
    background: var(--paper); pointer-events: none;
  }
  .nav[data-theme="cinema"]:not(.is-scrolled) { background: var(--cover-black); }

  /* 2. The open menu is a paper sheet whatever the nav's theme: on the dark
     landing the links inherited the cinema paper colour and vanished into it. */
  .nav__menu.is-open,
  .nav[data-theme="cinema"]:not(.is-scrolled) .nav__menu.is-open { background: var(--paper); }
  .nav__menu.is-open a,
  .nav[data-theme="cinema"]:not(.is-scrolled) .nav__menu.is-open a { color: var(--ink); font-size: var(--step-0); padding-block: 8px; }
  .nav__menu.is-open .btn { display: inline-flex; }

  /* 3. Landing hero: the houses were a 130px strip under a screen of nothing.
     Full bleed and big: the band takes the bottom half of the screen and the
     painting crops to its middle houses rather than shrinking to fit. */
  /* No forced full-screen hero on a phone: the houses follow the button after
     a short breath instead of a screen of dark (Erf, 2026-09-22). */
  .landing__cinema { min-height: 0; }
  .landing__cinema .houses-band { margin-top: clamp(1.5rem, 5svh, 3rem); }
  /* 66vw tall and cover-cropped from the centre shows the middle half of the
     painting: the green, yellow and red streets (the three organizations) all
     stay in frame, only the outer houses run off. */
  .landing__cinema .houses-band { height: min(36svh, 66vw) !important; }
  .landing__cinema .houses-band img { object-fit: cover; object-position: 50% 100%; }
  .landing__cinema .ambient { height: calc(100% - min(36svh, 66vw)); }
  .landing__cinema .landing__intro { padding-block: clamp(1.2rem, 4svh, 2.6rem) 0; }

  /* 4. Org landings: the frosted plate floated as a card 30px in from the
     edges with rounded corners, so the photo showed as a thin, meaningless
     frame. On a phone the plate IS the hero: edge to edge, square. */
  .hero:not(.hero--solo):has(.hero__media) .hero__body {
    max-width: none; width: 100%; border-radius: 0; border-inline: 0;
    padding-inline: var(--gutter);
    margin: 0; align-self: stretch; justify-content: center;
  }
  .hero:not(.hero--solo):has(.hero__media) { padding: 0; }
}

/* 5. The word-of-the-day and the dictionary on a phone: option D (Erf,
   2026-09-22, after trying the closed book: "the book gets stretched"). On a
   phone the book metaphor goes and the entry is a filing card with a red tab:
   word up top, the quiz / the meaning below. Desktop keeps its spread. */
@media (max-width: 820px) {
  .yid {
    display: block; background: var(--paper); background-image: none;
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: 0 12px 30px rgba(0,0,0,.22); margin-top: 14px; overflow: visible;
  }
  .yid::before { display: none; }
  .yid__word, .yid__quiz { min-height: 0; }
  .yid__word { padding: 2rem 1.35rem 1.2rem; border-right: 0; border-bottom: 1px solid var(--line); gap: var(--sp-2); }
  .yid__translit {
    position: absolute; top: -14px; left: 20px;
    background: var(--accent); color: var(--paper); letter-spacing: .18em;
    padding: 6px 12px; border-radius: 3px;
  }
  .yid__quiz { padding: 1.2rem 1.35rem 1.5rem; }
  .yid__reveal { padding: 1.2rem 1.35rem; background: var(--paper); }
  .yid__heb { font-size: clamp(2.6rem, 12vw, 3.6rem); }
  .yid__prompt { font-size: var(--step-0); }
  .yopt { background: var(--paper-2, #f1ede4); border-color: var(--line); }
}
@media (max-width: 760px) {
  .ydesk { padding-top: 2.2rem; }
  .ybook {
    display: block; background: var(--paper); background-image: none;
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: 0 12px 30px rgba(0,0,0,.35); overflow: visible;
  }
  .ybook::before { display: none; }
  .ypage { height: auto; overflow: visible; padding: 1.4rem 1.35rem; }
  .ypage--l { border-right: 0; border-bottom: 1px solid var(--line); gap: var(--sp-2); padding: 2rem 1.35rem 1.2rem; }
  .ypage__cat {
    position: absolute; top: -14px; left: 20px;
    background: var(--accent); color: var(--paper); letter-spacing: .18em;
    padding: 6px 12px; border-radius: 3px;
  }
  .ypage__yi { font-size: clamp(2.6rem, 12vw, 3.6rem); }
  .ypage__folio { position: static; margin-top: var(--sp-3); }
}

/* Shandes band on a phone: the album cover sat as a 240px polaroid pushed
   toward the right edge under the copy, with the button row wrapping around
   the platform icons. Now: full-width cover under the text, button on its
   own line, icons on theirs (Erf, 2026-09-22). */
@media (max-width: 760px) {
  .shan__grid { gap: var(--sp-6); }
  .shan__art { max-width: none; margin: 0; justify-content: stretch; }
  .shan__photo { width: 100%; }
  .shan__row { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .shan__row .btn { width: 100%; justify-content: center; }
}

/* Choir band: the old wax-seal "1925 / Est." was already a plain line under
   the photo, but its big year over a tiny "Est." still read as a floating
   badge on a phone. One caption line, "Est. 1925", at every width. */
.choir__seal span { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: .45em; }
.choir__seal b { display: inline; font-size: inherit; font-weight: 500; color: rgba(246,243,236,.85); }

/* Text-only heroes (the dictionary, Privacy, Accessibility, Search) do not
   need to fill a phone screen: the copy ends and the page begins (Erf,
   2026-09-22, "a lot of gap between the intro and the search bar"). */
@media (max-width: 860px) {
  .hero--solo:not(:has(.hero__media)) { min-height: 0; }
  .hero--solo:not(:has(.hero__media)) .hero__body { padding-block: clamp(1.5rem, 5svh, 3rem); }
}

/* Form maker: half-width fields share a row (Settings > Width on a field). */
.winx-form__step { grid-template-columns: 1fr 1fr; }
.winx-form__step > * { grid-column: 1 / -1; }
.winx-form__step > .winx-field--half { grid-column: auto; }
@media (max-width: 600px) { .winx-form__step > .winx-field--half { grid-column: 1 / -1; } }

/* Link in bio: row kinds and icons (panel upgrade, 2026-09-22). */
.linklist__head { margin: var(--sp-4) 0 0; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); text-align: left; }
.linklist__head small { display: block; font-family: var(--font-sans); letter-spacing: 0; text-transform: none; font-size: var(--step--1); color: var(--ink-2); margin-top: .2em; }
.linklist__rule { border: 0; border-top: 1px solid var(--line); margin: var(--sp-2) 0; }
.linkbtn__ic { width: 1.35rem; height: 1.35rem; flex: none; color: var(--accent); }
.linkbtn--primary .linkbtn__ic { color: currentColor; }