/* ============================================================
   YBB — A Light in Every Cell · site.css
   Design tokens sourced from yoga-behind-bars-design-system
   ============================================================ */

/* ---- Design Tokens ---- */
:root {
  /* Brand core */
  --ybb-deep-teal: #2D4554;
  --ybb-warm-gold: #EDB23B;
  --ybb-white: #FFFFFF;
  --ybb-black: #000000;

  /* Teal ramp */
  --teal-900: #16232C;
  --teal-800: #1F323E;
  --teal-700: #2D4554;
  --teal-600: #3D5A6C;
  --teal-500: #527387;
  --teal-400: #7B95A5;
  --teal-300: #A6B8C3;
  --teal-200: #CBD8DF;
  --teal-100: #E3EBEF;
  --teal-50:  #F2F6F8;

  /* Gold ramp */
  --gold-700: #9C6C12;
  --gold-600: #C4901F;
  --gold-500: #EDB23B;
  --gold-400: #F3C86F;
  --gold-300: #F8DBA1;
  --gold-200: #FBEACA;
  --gold-100: #FDF6E7;

  /* Warm neutrals */
  --sand-100: #FAF8F5;
  --sand-200: #F1EDE7;
  --sand-300: #E2DCD3;
  --ink-900: #141A1F;
  --ink-700: #3A464E;
  --ink-500: #66737C;
  --ink-600: #46535C;  /* muted text: 7:1+ on white, sand-100, and gold-100 (AAA pass, Sep 15, 2026) */
  --ink-300: #9AA5AC;

  /* Semantic surfaces */
  --surface-page: var(--ybb-white);
  --surface-page-warm: var(--sand-100);
  --surface-card: var(--ybb-white);
  --surface-subtle: var(--teal-50);
  --surface-inverse: var(--ybb-deep-teal);
  --surface-inverse-deep: var(--teal-900);
  --surface-accent-soft: var(--gold-100);

  /* Semantic text */
  --text-heading: var(--ybb-deep-teal);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-600);
  --text-on-inverse: var(--ybb-white);
  --text-on-inverse-muted: var(--teal-200);
  --text-on-accent: var(--teal-900);
  --text-link: var(--gold-700);
  --text-link-hover: var(--ybb-deep-teal);

  /* Borders */
  --border-hairline: var(--teal-100);
  --border-default: var(--teal-200);
  --border-strong: var(--teal-400);
  --border-inverse: rgba(255, 255, 255, .24);
  --rule-accent: var(--ybb-warm-gold);

  /* Interactive */
  --action-primary: var(--ybb-warm-gold);
  --action-primary-hover: var(--gold-600);
  --action-primary-active: var(--gold-700);
  --action-primary-text: var(--teal-900);
  --action-secondary: var(--ybb-deep-teal);
  --action-secondary-hover: var(--teal-800);
  --action-secondary-active: var(--teal-900);
  --action-secondary-text: var(--ybb-white);
  --action-quiet-hover: var(--teal-50);
  --focus-ring: var(--gold-600);

  /* Typography */
  --font-sans: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: var(--font-sans);
  --font-display: var(--font-sans);

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --text-display: clamp(40px, 5vw, 64px);
  --text-h1: clamp(36px, 3.6vw, 48px);
  --text-h2: clamp(28px, 2.6vw, 36px);
  --text-h3: clamp(22px, 2vw, 28px);
  --text-body-lg: 18px;
  --text-body-md: 16px;
  --text-body-sm: 14px;
  --text-label: 12px;

  --leading-display: 1.1;
  --leading-heading: 1.22;
  --leading-body: 1.6;
  --leading-body-loose: 1.65;

  --tracking-display: -0.01em;
  --tracking-heading: -0.005em;
  --tracking-body: 0;
  --tracking-label: 0.08em;

  /* Motion */
  --ease-standard: cubic-bezier(.32, .72, .28, 1);
  --ease-out-soft: cubic-bezier(.16, .84, .44, 1);
  --ease-in-soft: cubic-bezier(.55, .06, .68, .19);
  --duration-instant: 90ms;
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;
  --duration-breath: 900ms;
  --transition-control:
    background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);

  /* Layout */
  --header-h: 84px;
  --content-max: 1200px;
  --content-pad: clamp(16px, 5vw, 80px);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
p, h1, h2, h3, h4 { overflow-wrap: break-word; }
a { color: var(--text-link); text-decoration: underline; transition: var(--transition-control); }
a:hover { color: var(--text-link-hover); }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* ---- Scroll margin for anchors behind sticky header ---- */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ---- Utility ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Inner box for .section (which already carries the horizontal padding). */
.content-wrap {
  max-width: var(--content-max);
  margin-inline: auto;
}
.section-rule {
  display: block;
  width: 48px;
  height: 3px;
  background: var(--rule-accent);
  border: 0;
  margin-bottom: 24px;
}
.section-eyebrow {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-body-md);
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition-control);
  white-space: nowrap;
}
.btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.btn-primary {
  background: var(--action-primary);
  color: var(--action-primary-text);
  border-color: var(--action-primary);
}
.btn-primary:hover { background: var(--action-primary-hover); border-color: var(--action-primary-hover); color: var(--action-primary-text); }
.btn-primary:active { background: var(--action-primary-active); border-color: var(--action-primary-active); }
.btn-secondary {
  background: transparent;
  color: var(--ybb-white);
  border-color: rgba(255,255,255,.6);
}
.btn-secondary:hover { background: rgba(255,255,255,.1); border-color: var(--ybb-white); color: var(--ybb-white); }
.btn-outline-teal {
  background: transparent;
  color: var(--ybb-deep-teal);
  border-color: var(--ybb-deep-teal);
}
.btn-outline-teal:hover { background: var(--ybb-deep-teal); color: var(--ybb-white); }
.btn-sm { padding: 10px 20px; font-size: var(--text-body-sm); }

/* ---- Header / Nav ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--ybb-deep-teal);
  display: flex;
  align-items: center;
  padding-inline: var(--content-pad);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  gap: 24px;
}
.header-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* Header mark: the lotus alone. In the full lockup the "behind bars" line is about 7px tall at
   header size and unreadable, so the wordmark moved into each page's hero instead
   (design review, Sep 15, 2026). lotus-mark-gold.png is the mark trimmed and with a
   transparent background (lotus-mark.png sits on opaque white). */
.header-logo img {
  height: 44px;
  width: auto;
}
.header-logo:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 8px; }

/* Desktop nav: plain text links so that only the two calls to action read as buttons.
   Hierarchy comes from weight and underline: the current page is bold with a gold underline,
   hover underlines in white (design review, Sep 15, 2026). Get tickets is not a text link;
   the gold pill is the one path to the event page from the header. */
.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-link {
  font-size: 15px;
  font-weight: var(--weight-medium);
  color: var(--teal-100);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
  padding: 6px 0;
  transition: var(--transition-control), text-decoration-color var(--duration-fast) var(--ease-standard);
  white-space: nowrap;
}
.nav-link:hover { color: var(--ybb-white); text-decoration-color: rgba(255,255,255,.6); }
.nav-link[aria-current="page"] {
  color: var(--ybb-white);
  font-weight: var(--weight-bold);
  text-decoration-color: var(--gold-400);
}
/* Header calls to action, the only two pills in the header. Before the event: Get tickets is
   the solid gold pill and Donate the gold-outlined one beside it. After the event
   (html.after-event, set by site.js from YBB.eventEndsAt) the tickets pill goes away and
   Donate takes the solid gold. */
.nav-tickets-pill,
.nav-donate-pill {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  padding: 8px 18px;
  border-radius: 100px;
  text-decoration: none;
  transition: var(--transition-control);
  white-space: nowrap;
  border: 1px solid transparent;
}
.nav-tickets-pill { margin-left: 8px; }
.nav-tickets-pill,
.after-event .nav-donate-pill {
  background: var(--action-primary);
  color: var(--action-primary-text);
  border-color: var(--action-primary);
}
.nav-tickets-pill:hover,
.after-event .nav-donate-pill:hover {
  background: var(--action-primary-hover);
  border-color: var(--action-primary-hover);
  color: var(--action-primary-text);
}
.nav-donate-pill {
  background: transparent;
  color: var(--gold-300);
  border-color: var(--gold-400);
}
.nav-donate-pill:hover,
.nav-donate-pill[aria-current="page"] { background: rgba(243,200,111,.16); color: var(--gold-300); }
/* On /tickets the solid pill is the current page: a halo ring says so without changing its fill. */
.nav-tickets-pill[aria-current="page"] { box-shadow: 0 0 0 2px var(--ybb-deep-teal), 0 0 0 4px var(--gold-200); }
.mobile-nav .nav-tickets-pill[aria-current="page"] { box-shadow: 0 0 0 2px var(--teal-900), 0 0 0 4px var(--gold-200); }
.after-event .nav-tickets-pill { display: none; }

/* Hamburger */
.nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  color: var(--ybb-white);
  flex-shrink: 0;
  transition: var(--transition-control);
}
.nav-hamburger:hover { background: rgba(255,255,255,.1); }
.nav-hamburger svg { pointer-events: none; }

/* Search button: opens the site search (site.js). A quiet icon-and-label control with no
   pill chrome, so the header has exactly two buttons (design review, Sep 15, 2026). Icon only
   where the nav gets tight. */
.nav-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--teal-200);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: var(--transition-control);
}
.nav-search:hover { color: var(--ybb-white); background: rgba(255,255,255,.1); }
.nav-search svg { flex-shrink: 0; pointer-events: none; }
.nav-search-kbd {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: .04em;
  line-height: 1;
  color: var(--teal-100);
}
@media (max-width: 1040px) {
  .nav-search { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .nav-search-label, .nav-search-kbd { display: none; }
}
@media (hover: none) { .nav-search-kbd { display: none; } }
/* Just above the hamburger breakpoint the desktop nav, search, and pills share the width. */
@media (max-width: 960px) {
  .header-inner { gap: 16px; }
  .site-nav { gap: 20px; }
  .nav-tickets-pill { margin-left: 0; }
  .nav-tickets-pill, .nav-donate-pill { padding: 8px 14px; }
}

/* Mobile nav drawer */
.mobile-nav {
  display: none;
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--teal-900);
  z-index: 99;
  padding: 32px var(--content-pad);
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}
.mobile-nav.open { display: flex; }
.mobile-nav .nav-link {
  font-size: var(--text-body-md);
  padding: 14px 16px;
  color: var(--teal-200);
  text-decoration: none;
  border-radius: 6px;
}
.mobile-nav .nav-link:hover { color: var(--ybb-white); background: rgba(255,255,255,.08); }
.mobile-nav .nav-link[aria-current="page"] { font-weight: var(--weight-semibold); background: rgba(255,255,255,.1); box-shadow: inset 3px 0 0 var(--gold-400); }
.mobile-nav .nav-tickets-pill,
.mobile-nav .nav-donate-pill {
  font-size: var(--text-body-md);
  padding: 14px 18px;
  margin: 8px 0 0;
  border-radius: 8px;
  text-align: center;
  display: block;
}
.mobile-nav .nav-donate-pill { margin-top: 0; }
.after-event .mobile-nav .nav-donate-pill { margin-top: 8px; }

/* Header right — search, the two pills, hamburger on mobile */
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Below 900px the four desktop links no longer fit beside the search and the two pills. */
@media (max-width: 900px) {
  .site-nav { display: none; }
  .nav-hamburger { display: flex; }
  .header-right { gap: 8px; }
  .nav-search { background: transparent; border-color: transparent; color: var(--ybb-white); }
  .nav-search:hover { background: rgba(255,255,255,.1); }
}
/* Phones: one pill in the header (Donate lives in the drawer); after the event Donate is that pill. */
@media (max-width: 520px) {
  .header-right .nav-donate-pill { display: none; }
  .after-event .header-right .nav-donate-pill { display: inline-block; }
}
@media (max-width: 400px) {
  .header-inner { gap: 12px; }
  .header-right { gap: 6px; }
  .nav-tickets-pill, .after-event .header-right .nav-donate-pill { padding: 8px 12px; }
}

/* ---- Hero ---- */
.hero {
  position: relative;
  min-height: clamp(480px, 65vh, 780px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-inline: var(--content-pad);
  background: var(--teal-900);
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
/* Two scrims: the text column on the left gets a solid enough darkening for AAA contrast on the
   light parts of the photo (floor, white shirts); the right side keeps the photo. The vertical
   gradient underneath keeps the bottom edge dark behind the buttons. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20,26,31,.9) 0%, rgba(20,26,31,.88) 58%, rgba(20,26,31,.4) 80%, rgba(20,26,31,.12) 100%),
    linear-gradient(180deg, rgba(20,26,31,0) 0%, rgba(20,26,31,.2) 40%, rgba(20,26,31,.72) 100%);
}
/* Below 900px the text column spans most of the hero (the Where block reached 77% of the width
   at 640px), so the dark stop holds further across before the photo shows through. */
@media (max-width: 900px) {
  .hero-scrim {
    background:
      linear-gradient(90deg, rgba(20,26,31,.9) 0%, rgba(20,26,31,.88) 80%, rgba(20,26,31,.5) 100%),
      linear-gradient(180deg, rgba(20,26,31,0) 0%, rgba(20,26,31,.2) 40%, rgba(20,26,31,.72) 100%);
  }
}
.hero-content {
  position: relative;
  width: 100%;
  padding: 64px 0 72px;
  max-width: var(--content-max);
  margin-inline: auto;
}
/* The hero reads like an event listing: presenter, event name, when, where, then the blurb
   and the calls to action (design review, Sep 15, 2026). The presenter line carries the full
   wordmark at a size where "behind bars" is legible, since the header shows only the lotus. */
.hero-presenter {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 24px;
}
.hero-brand {
  height: clamp(72px, 8vw, 96px);
  width: auto;
  filter: drop-shadow(0 1px 2px rgba(20,26,31,.5));
}
.hero-presenter-word {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold-200);
  padding-bottom: 6px;
}
.hero-title {
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--ybb-white);
  max-width: 820px;
  margin-bottom: 16px;
}
/* When / where pair, the shape every event calendar uses. Also used in the tickets page hero. */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 36px;
  margin-bottom: 24px;
}
.hero-meta-item { min-width: 0; }
.hero-meta-item + .hero-meta-item { border-left: 1px solid var(--border-inverse); padding-left: 36px; }
.hero-meta-label {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-300);   /* 7.5:1 on the solid teal page hero; gold-400 was 6.4:1 */
  text-shadow: 0 1px 2px rgba(20,26,31,.6);
  margin-bottom: 4px;
}
.hero-meta-value {
  font-size: 17px;
  font-weight: var(--weight-semibold);
  color: var(--ybb-white);
  line-height: 1.45;
  text-shadow: 0 1px 2px rgba(20,26,31,.6);
}
.hero-meta-sub {
  display: block;
  font-size: 15px;
  font-weight: var(--weight-regular);
  color: rgba(255,255,255,.86);
}
.hero-subtitle {
  font-size: var(--text-body-lg);
  color: var(--ybb-white);
  text-shadow: 0 1px 2px rgba(20,26,31,.6);
  margin-bottom: 36px;
  max-width: 560px;
}
.hero-title { text-shadow: 0 2px 6px rgba(20,26,31,.45); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Narrow screens: when above where, no divider. Below 640px the side-by-side pair would reach
   past 80% of the hero width, where the scrim starts to thin, and from about 530px it would wrap
   on its own and leave the divider dangling on the second row. */
@media (max-width: 640px) {
  .hero-meta { flex-direction: column; gap: 14px; }
  .hero-meta-item + .hero-meta-item { border-left: 0; padding-left: 0; }
}
@media (max-width: 480px) {
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { justify-content: center; }
  .hero-presenter { gap: 10px; margin-bottom: 16px; }
  /* Shorter top and bottom padding so the calls to action stay near the fold on short phones. */
  .hero-content { padding: 40px 0 48px; }
}

/* ---- Stat band ---- */
.stat-band {
  background: var(--ybb-deep-teal);
  padding: 48px var(--content-pad);
}
.stat-band-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 32px;
  max-width: var(--content-max);
  margin-inline: auto;
  text-align: center;
}
.stat-item {}
.stat-number {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: var(--weight-bold);
  color: var(--ybb-warm-gold);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-label {
  font-size: var(--text-body-sm);
  color: var(--teal-100);
  line-height: var(--leading-body);
}
.stat-divider {
  width: 1px;
  background: var(--border-inverse);
  align-self: stretch;
  display: none;
}
@media (min-width: 640px) { .stat-divider { display: block; } }
@media (max-width: 639px) {
  .stat-band-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .stat-divider { display: none; }
}

/* ---- Recidivism visual block ---- */
/* Text column on the left; the two outcomes (60 vs 8) on the right, big
   numerals first so the contrast reads before the paragraph does. The
   source line spans the full width underneath. Wording is approved copy
   from the handoff and must not change without the program team. */
.recidivism-band {
  background: var(--teal-900);
  padding: 80px var(--content-pad);
  color: var(--ybb-white);
}
.recidivism-inner {
  max-width: var(--content-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px 64px;
  align-items: center;
}
.recidivism-text {}
.recidivism-text .section-eyebrow { color: var(--teal-300); }
.recidivism-heading {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--ybb-white);
  margin-bottom: 16px;
}
.recidivism-body {
  font-size: var(--text-body-lg);
  color: var(--teal-200);
  margin-bottom: 12px;
  line-height: var(--leading-body-loose);
}
.recidivism-body strong { color: var(--ybb-warm-gold); }

.outcome-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  align-items: stretch;
}
.outcome {
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  border-top: 1px solid var(--border-inverse);
}
.outcome-highlight { border-top: 3px solid var(--ybb-warm-gold); }
.outcome-number {
  font-size: clamp(56px, 6vw, 80px);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, .92);
}
.outcome-highlight .outcome-number { color: var(--ybb-warm-gold); }
.outcome-of {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--teal-200);
  margin: 10px 0 12px;
}
.outcome-desc {
  font-size: var(--text-body-sm);
  color: var(--teal-200);
  line-height: var(--leading-body);
  margin-bottom: 20px;
}

/* 100-dot grid: 20 x 5, sits at the bottom of its column so both grids line up. */
.dot-grid {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 4px;
  max-width: 340px;
  margin-top: auto;
}
.dot-grid span {
  aspect-ratio: 1;
  border-radius: 2px;
  display: block;
}
.dot-active { background: rgba(255, 255, 255, .62); }
.outcome-highlight .dot-active { background: var(--ybb-warm-gold); }
.dot-inactive { background: rgba(255, 255, 255, .14); }

/* Scroll-driven fill (site.js + GSAP ScrollTrigger). While pinned the band sits just
   below the sticky header, fills the rest of the viewport, and keeps its content
   vertically centered; dots and numbers repaint from JS. */
.recidivism-band.is-scrollpin {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
}
.recidivism-band.is-scrollpin .recidivism-inner { width: 100%; }
.outcome-number-anim { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .recidivism-inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 520px) {
  .outcome-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---- Section generic ---- */
.section {
  padding: 80px var(--content-pad);
}
.section-warm { background: var(--surface-page-warm); }
.section-subtle { background: var(--surface-subtle); }
.section-inverse { background: var(--surface-inverse); color: var(--text-on-inverse); }
.section-heading {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--text-heading);
  margin-bottom: 16px;
}
.section-inverse .section-heading { color: var(--ybb-white); }
.section-body {
  font-size: var(--text-body-lg);
  color: var(--text-body);
  line-height: var(--leading-body-loose);
  max-width: 680px;
}
.section-inverse .section-body { color: var(--text-on-inverse-muted); }

/* ---- Program cards ---- */
.program-grid {
  display: grid;
  /* auto-fit, not auto-fill: with three cards in a 1200px wrap, auto-fill kept an empty fourth
     track and left a gap on the right. auto-fit collapses it so the cards fill the width. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.program-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  overflow: hidden;
}
.program-card-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.program-card-body { padding: 24px; }
.program-card-title {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  margin-bottom: 8px;
  line-height: var(--leading-heading);
}
.program-card-desc {
  font-size: var(--text-body-md);
  color: var(--text-body);
  line-height: var(--leading-body);
}

/* ---- Quote block ---- */
.quote-section {
  background: var(--surface-inverse);
  padding: 80px var(--content-pad);
  text-align: center;
}
.quote-inner { max-width: 760px; margin-inline: auto; }
.quote-mark {
  font-size: 80px;
  line-height: 1;
  color: var(--gold-400);
  font-family: Georgia, serif;
  margin-bottom: 8px;
}
.quote-text {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: var(--weight-light);
  color: var(--ybb-white);
  line-height: var(--leading-body-loose);
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}
.quote-attr {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--teal-100);
}

/* ---- Newsletter ---- */
.newsletter-section {
  background: var(--gold-100);
  padding: 64px var(--content-pad);
  border-top: 1px solid var(--gold-200);
}
/* Centered stack: heading and blurb, then the form (team feedback, Sep 15, 2026). */
.newsletter-inner {
  max-width: var(--content-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}
.newsletter-heading {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  margin-bottom: 8px;
}
.newsletter-desc {
  font-size: var(--text-body-md);
  color: var(--text-body);
  max-width: 52ch;
  margin-inline: auto;
}
/* Givebutter signup form. It draws its own card, so no .widget-wrap chrome here.
   Fixed width so the band doesn't reflow when Givebutter mounts. */
.newsletter-widget { width: min(100%, 440px); min-height: 200px; }
.newsletter-widget givebutter-widget { display: block; }
.newsletter-widget .widget-fallback { padding: 0; }
/* /newsletter: the form is the whole page for now, so it sits straight under the hero. */
.newsletter-page { border-top: none; padding-block: 56px 96px; min-height: 60vh; }

/* ---- Footer ---- */
.site-footer {
  background: var(--teal-900);
  color: var(--text-on-inverse-muted);
  padding: 64px var(--content-pad) 40px;
}
.footer-inner {
  max-width: var(--content-max);
  margin-inline: auto;
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border-inverse);
  margin-bottom: 32px;
}
.footer-logo { height: 72px; width: auto; margin-bottom: 16px; }
.footer-tagline {
  font-size: var(--text-body-sm);
  color: var(--teal-300);
  margin-bottom: 16px;
  line-height: var(--leading-body);
}
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  color: var(--teal-300);
  text-decoration: none;
  font-size: var(--text-body-sm);
  padding: 6px 10px;
  border-radius: 4px;
  transition: var(--transition-control);
}
.footer-social a:hover { color: var(--ybb-white); background: rgba(255,255,255,.08); }
.footer-col-heading {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ybb-white);
  margin-bottom: 16px;
}
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
  color: var(--teal-300);
  font-size: var(--text-body-sm);
  text-decoration: none;
  transition: var(--transition-control);
}
.footer-links a:hover { color: var(--ybb-white); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-legal {
  font-size: var(--text-label);
  color: var(--ink-300);
}
.footer-ein {
  font-size: var(--text-label);
  color: var(--ink-300);
}
@media (max-width: 640px) {
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---- Popup / Dialog ---- */
.popup-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20,26,31,.72);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out-soft);
}
.popup-backdrop.open {
  opacity: 1;
  pointer-events: all;
}
.popup-dialog {
  background: var(--surface-card);
  border-radius: 16px;
  max-width: 520px;
  width: 100%;
  overflow: hidden;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  transform: translateY(16px);
  transition: transform var(--duration-base) var(--ease-out-soft);
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
}
.popup-backdrop.open .popup-dialog { transform: translateY(0); }
/* The event image is portrait (3:4). Phones stack it above the text at a 4:3 crop
   that keeps the figure; from 640px up it sits beside the text at full height. */
.popup-img {
  width: 100%;
  height: auto;            /* beat the width/height attributes so aspect-ratio applies */
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: center 30%;
}
.popup-body { padding: 32px; }
@media (min-width: 640px) {
  .popup-dialog {
    max-width: 760px;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
  .popup-img { height: 100%; aspect-ratio: auto; object-position: center top; }
  .popup-body { display: flex; flex-direction: column; justify-content: center; padding: 36px; }
}
.popup-eyebrow {
  font-size: 14px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-heading);
  margin-bottom: 8px;
}
.popup-title {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  line-height: var(--leading-heading);
  margin-bottom: 8px;
}
.popup-when {
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  margin-bottom: 10px;
}
.popup-subtitle {
  font-size: var(--text-body-md);
  color: var(--text-body);
  margin-bottom: 24px;
}
.popup-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.popup-actions .btn { flex: 1 1 0; justify-content: center; }
.popup-actions .btn-outline-teal { border-color: var(--border-default); color: var(--text-muted); }
.popup-actions .btn-outline-teal:hover { background: var(--action-quiet-hover); border-color: var(--border-strong); color: var(--text-body); }
.popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255,255,255,.7);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-700);
  transition: var(--transition-control);
  z-index: 1;
}
.popup-close:hover { background: var(--ybb-white); }
.popup-wrap { position: relative; }

/* ---- Site search (⌘K / Ctrl+K) ---- */
/* Built by site.js on first open. Sits above the event popup (z-index 200). */
.search-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(20,26,31,.72);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 16px 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out-soft);
}
.search-backdrop.open { opacity: 1; pointer-events: all; }
.search-dialog {
  width: 100%;
  max-width: 640px;
  max-height: min(76vh, 640px);
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
  overflow: hidden;
  transform: translateY(-8px) scale(.98);
  transition: transform var(--duration-base) var(--ease-out-soft);
}
.search-backdrop.open .search-dialog { transform: none; }

.search-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px 6px 20px;
  border-bottom: 1px solid var(--border-hairline);
}
.search-field-icon { flex-shrink: 0; color: var(--gold-600); }
.search-input {
  flex: 1;
  min-width: 0;
  height: 56px;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 18px;
  color: var(--ink-900);
}
.search-input:focus, .search-input:focus-visible { outline: none; }
.search-input::placeholder { color: var(--ink-300); }
.search-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-control);
}
.search-close:hover { background: var(--action-quiet-hover); color: var(--text-body); }
.search-close-x { display: none; }
.search-close-kbd,
.search-foot kbd {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: .04em;
  line-height: 1;
  color: var(--text-muted);
  background: var(--surface-subtle);
  border: 1px solid var(--border-default);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 3px 6px;
}

.search-results {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
}
.search-group {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 12px 12px 6px;
}
.search-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text-body);
  text-decoration: none;
  cursor: pointer;
}
.search-item:hover { color: var(--text-body); }
/* Hover and keyboard highlight are the same state: site.js follows the pointer. */
.search-item[aria-selected="true"] {
  background: var(--surface-subtle);
  box-shadow: inset 3px 0 0 var(--rule-accent);
}
.search-item-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sand-200);
  color: var(--teal-600);
  transition: var(--transition-control);
}
.search-item[aria-selected="true"] .search-item-icon { background: var(--ybb-deep-teal); color: var(--ybb-white); }
.search-item-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.search-item-title {
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  line-height: 1.3;
}
.search-item-title mark {
  background: var(--gold-200);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
.search-item-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-item-page {
  flex-shrink: 0;
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}
.search-empty { padding: 28px 16px 12px; text-align: center; }
.search-empty-title {
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}
.search-empty-hint { font-size: var(--text-body-sm); color: var(--text-muted); }

.search-foot {
  display: flex;
  gap: 20px;
  padding: 10px 20px;
  border-top: 1px solid var(--border-hairline);
  background: var(--surface-page-warm);
  font-size: var(--text-label);
  color: var(--text-muted);
}
.search-foot span { display: inline-flex; align-items: center; gap: 6px; }
.search-foot kbd + kbd { margin-left: -2px; }

/* Where a result lands on the current page: focus moves there for keyboard and
   screen reader users, without drawing a ring around a whole section. */
.search-landing:focus { outline: none; }
/* Small targets (a detail row, a note) get a gold pulse so the eye finds them. */
@keyframes search-flash {
  0%, 25% { outline-color: rgba(237,178,59,.8); }
  100%    { outline-color: rgba(237,178,59,0); }
}
.search-flash, .search-flash:focus {
  outline: 3px solid transparent;
  outline-offset: 6px;
  border-radius: 6px;
  animation: search-flash 1.8s var(--ease-out-soft) .25s both;
}

@media (max-width: 640px) {
  .search-backdrop { padding: 8px; }
  /* Short enough to stay above the on-screen keyboard. */
  .search-dialog { max-height: 62vh; border-radius: 12px; }
  .search-input { height: 52px; font-size: 16px; }   /* 16px keeps iOS from zooming the page */
  .search-close-kbd { display: none; }
  .search-close-x { display: block; }
  .search-foot { display: none; }
  .search-item-page { display: none; }
  .search-item-desc {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
@media (prefers-reduced-motion: reduce) {
  .search-backdrop, .search-dialog, .search-item-icon { transition: none; }
  .search-flash { animation: none; }
}

/* ---- Tickets page ---- */
.tickets-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  /* Padding sits inside this box, so widen it by the padding to keep the
     content edge on the same line as every other section. */
  max-width: calc(var(--content-max) + 2 * var(--content-pad));
  margin-inline: auto;
  padding: 64px var(--content-pad);
  align-items: start;
}
.tickets-main {}
.tickets-aside {
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.aside-card {
  background: var(--surface-page-warm);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 28px;
}
.aside-card-title {
  font-size: var(--text-body-md);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  margin-bottom: 16px;
}
.aside-detail {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  font-size: var(--text-body-sm);
  color: var(--text-body);
}
.aside-detail-icon { color: var(--gold-600); flex-shrink: 0; font-size: 16px; }

.tickets-heading {
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  line-height: var(--leading-heading);
  margin-bottom: 8px;
}
.tickets-deadline {
  font-size: var(--text-body-md);
  margin-bottom: 20px;
}
.tickets-deadline strong { color: var(--text-heading); }

/* Widget container */
.widget-wrap {
  background: var(--surface-subtle);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 32px;
  min-height: 200px;
}
.widget-wrap givebutter-widget { display: block; }

/* Widget fallback panel */
.widget-fallback {
  display: none;
  text-align: center;
  padding: 32px 16px;
}
.widget-fallback.visible { display: block; }
.widget-fallback-lotus {
  width: 48px;
  margin-inline: auto;
  margin-bottom: 16px;
  opacity: .5;
}
.widget-fallback-text {
  font-size: var(--text-body-md);
  color: var(--text-muted);
  margin-bottom: 20px;
}
.widget-dev-note {
  display: inline-block;
  margin-top: 16px;
  font-size: var(--text-body-sm);
  color: var(--ink-300);
  border: 2px dashed var(--border-default);
  border-radius: 6px;
  padding: 8px 14px;
}
/* The display rule above would otherwise beat the UA's [hidden] { display: none }. */
.widget-dev-note[hidden] { display: none; }

@media (max-width: 900px) {
  .tickets-layout { grid-template-columns: 1fr; }
  .tickets-aside { position: static; }
}

/* ---- Donate / Luminary page ---- */
.donate-layout {
  /* Same edge alignment note as .tickets-layout. */
  max-width: calc(var(--content-max) + 2 * var(--content-pad));
  margin-inline: auto;
  padding: 64px var(--content-pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.donate-content {}
.donate-heading {
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  line-height: var(--leading-heading);
  margin-bottom: 16px;
}
.donate-intro {
  font-size: var(--text-body-lg);
  color: var(--text-body);
  line-height: var(--leading-body-loose);
  margin-bottom: 32px;
}
.ways-list { display: flex; flex-direction: column; gap: 12px; }
.ways-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--text-body-md);
  color: var(--text-body);
}
.ways-label {
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}
.donate-quote {
  background: var(--surface-accent-soft);
  border-left: 3px solid var(--rule-accent);
  padding: 24px;
  border-radius: 0 8px 8px 0;
  margin-top: 32px;
}
.donate-quote-text {
  font-size: var(--text-body-lg);
  color: var(--text-body);
  font-style: italic;
  margin-bottom: 8px;
  line-height: var(--leading-body-loose);
}
.donate-quote-attr {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.donate-check-info {
  margin-top: 24px;
  padding: 20px;
  background: var(--surface-subtle);
  border-radius: 8px;
  font-size: var(--text-body-sm);
  color: var(--text-body);
  line-height: var(--leading-body);
}
.donate-widget-col {}

@media (max-width: 768px) {
  .donate-layout { grid-template-columns: 1fr; gap: 40px; }
}

/* ---- Luminary page ---- */
.luminary-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 24px;
  margin-bottom: 32px;
}
.benefit-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 24px;
}
.benefit-amount {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: var(--weight-bold);
  color: var(--gold-600);
  margin-bottom: 4px;
}
.benefit-name {
  font-size: var(--text-body-md);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  margin-bottom: 8px;
}
.benefit-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.benefit-list li {
  font-size: var(--text-body-sm);
  color: var(--text-body);
  padding-left: 18px;
  position: relative;
}
.benefit-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--gold-600);
  font-weight: var(--weight-bold);
}

/* ---- Our Work page ---- */
.our-work-hero {
  background: var(--surface-inverse);
  padding: 80px var(--content-pad) 64px;
}
.our-work-hero-inner {
  max-width: var(--content-max);
  margin-inline: auto;
}
.our-work-hero-title {
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  color: var(--ybb-white);
  line-height: var(--leading-heading);
  margin-bottom: 16px;
}
.our-work-hero-body {
  font-size: var(--text-body-lg);
  color: var(--teal-200);
  max-width: 640px;
  line-height: var(--leading-body-loose);
}

/* ---- Page hero (non-home pages) ---- */
.page-hero {
  background: var(--surface-inverse);
  padding: 64px var(--content-pad);
}
.page-hero-inner {
  max-width: var(--content-max);
  margin-inline: auto;
}
/* Full wordmark on inner-page heroes (the header carries only the lotus). 80px keeps
   "behind bars" around 12px tall. */
.page-hero-brand {
  height: 80px;
  width: auto;
  margin-bottom: 28px;
}
.page-hero-eyebrow {
  font-size: 14px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold-200);
  margin-bottom: 12px;
}
.page-hero-title {
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  color: var(--ybb-white);
  line-height: var(--leading-heading);
  margin-bottom: 12px;
}
.page-hero-subtitle {
  font-size: var(--text-body-lg);
  color: var(--teal-200);
  max-width: 600px;
  line-height: var(--leading-body);
}

/* ---- 404 ---- */
.not-found {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px var(--content-pad);
  text-align: center;
}
.not-found-inner {}
/* The header carries only the lotus, so the wordmark shows here (teal version on the white page). */
.not-found-brand { height: 72px; width: auto; margin: 0 auto 24px; }
.not-found-code {
  font-size: 96px;
  font-weight: var(--weight-bold);
  color: var(--teal-100);
  line-height: 1;
  margin-bottom: 16px;
}
.not-found-title {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  margin-bottom: 12px;
}
.not-found-body {
  font-size: var(--text-body-lg);
  color: var(--text-body);
  margin-bottom: 32px;
}

/* ---- Placeholder treatment for unanswered questions ---- */
.placeholder-field {
  display: inline-block;
  background: var(--gold-100);
  border: 2px dashed var(--gold-400);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: inherit;
  color: var(--gold-700);
  font-weight: var(--weight-semibold);
}