/* ============================================================
   Jerusalem Unity Center — Header + Hero
   Values extracted from assets/full-mockup.png (864px render,
   scaled ×5/3 to a 1440px desktop reference)
   ============================================================ */

:root {
  /* Colors sampled from mockup */
  --navy: #0A0F23;            /* deep navy under header/nav */
  --navy-soft: #13162B;       /* hero far-left base */
  --gold: #C4923F;            /* dominant gold accent */
  --gold-hi: #CD9C4C;         /* gold gradient top */
  --gold-lo: #BC8C3E;         /* gold gradient bottom */
  --btn-gold-top: #A87836;    /* button gradient, measured profile */
  --btn-gold-bottom: #724E1D;
  --btn-text-cream: #F3EDDC;  /* cream text on gold, dark shadow under */
  --btn-bevel: rgba(226, 185, 115, 0.6);
  --white: #FFFFFF;
  --text-body: #E9E9EE;       /* hero paragraph */
  --text-nav: #E6E2E6;        /* nav links */
  --ghost-border: rgba(201, 155, 92, 0.55);

  --font-serif: "Cormorant Garamond", "Times New Roman", serif;
  --font-sans: "Poppins", "Helvetica Neue", Arial, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  background-color: var(--navy);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
  color: inherit;
}

.shell {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 48px;
}

/* ============================================================
   HERO BACKGROUND
   herobg.png is taller than the mockup crop; 50% 23% vertical
   position reproduces the mockup framing (dome + skyline +
   building on the right), verified by image matching.
   ============================================================ */

.hero {
  position: relative;
  min-height: 578px;
  background-image: url("assets/herobg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 23%;
  background-color: var(--navy-soft);
  overflow: hidden;
}

/* Left-side dark overlay — alphas computed from mockup-vs-raw
   zone differences (~0.28 at left third fading to ~0.09 right) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(9, 11, 26, 0.55) 0%,
    rgba(9, 11, 26, 0.30) 35%,
    rgba(9, 11, 26, 0.08) 100%
  );
  pointer-events: none;
}

/* ============================================================
   HEADER — transparent bar over the hero
   ============================================================ */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding-top: 28px;
}

.header-inner {
  display: flex;
  align-items: flex-start;
}

/* --- Brand ------------------------------------------------- */

.brand {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
}

/* PNG already carries its own gold circular emblem — no frame.
   The image content fills only ~60% of its frame, so scale it up
   visually (layout box stays 88px) to match the mockup emblem. */
.logo {
  width: 88px;
  height: 88px;
  object-fit: contain;
  transform: scale(1.66);
  transform-origin: center;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
  margin-top: 3px;
}

.brand-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 27px;
  line-height: 1;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--white);
}

.brand-sub {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.27em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 6px;
}

.brand-tagline {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 17px;
  text-transform: uppercase;
  color: var(--text-nav);
  margin-top: 9px;
}

/* --- Nav ---------------------------------------------------- */

.site-nav {
  display: flex;
  align-items: center;
  gap: 29px;
  margin-left: auto;
  margin-top: 10px;
  white-space: nowrap;
}

.site-nav a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 35px;
  text-transform: uppercase;
  color: var(--text-nav);
  transition: color 0.2s ease;
}

.site-nav a:hover {
  color: var(--gold-hi);
}

/* --- Header actions ----------------------------------------- */

.header-actions {
  display: flex;
  align-items: center;
  margin-left: 26px;
  margin-top: 10px;
  flex-shrink: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  text-transform: uppercase;
  cursor: pointer;
}

.btn-support {
  height: 35px;
  padding: 0 19px;
  border: 1px solid var(--btn-bevel);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--btn-gold-top), var(--btn-gold-bottom));
  color: var(--btn-text-cream);
  text-shadow: 0 1px 2px rgba(61, 32, 6, 0.55);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  transition: filter 0.2s ease;
}

.btn-support:hover {
  filter: brightness(1.12);
}

.search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  margin-left: 16px;
  padding: 0;
  background: none;
  border: none;
  color: var(--text-nav);
  cursor: pointer;
  transition: color 0.2s ease;
}

.search-btn:hover {
  color: var(--gold-hi);
}

.search-btn svg {
  width: 15px;
  height: 15px;
}

/* ============================================================
   HERO CONTENT
   ============================================================ */

/* Header is absolute over the hero and the scaled emblem reaches
   ~145px down, so the content must start well below that to leave
   a clear gap between the nav bar and the heading. */
.hero-content {
  position: relative;
  z-index: 1;
  padding-top: 200px;
  padding-bottom: 40px;
}

.hero-heading {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(40px, 3.6vw, 52px);
  line-height: 1.06;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
}

.hero-heading .gold {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  max-width: 560px;
  margin-top: 14px;
  font-size: 17px;
  font-weight: 300;
  line-height: 29px;
  color: var(--text-body);
}

/* --- Scripture quote ------------------------------------------ */

.hero-quote {
  max-width: 560px;
  margin-top: 14px;
}

.hero-quote-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 21px;
  line-height: 30px;
  letter-spacing: 0.01em;
  color: var(--gold);
}

.hero-quote-text .qmark {
  opacity: 0.55;
}

.hero-quote-cite {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(196, 146, 63, 0.8);
}

/* --- CTAs ---------------------------------------------------- */

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 24px;
}

.hero-ctas .btn {
  height: 47px;
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
}

.btn-primary {
  padding: 0 22px;
  border: 1px solid var(--btn-bevel);
  background: linear-gradient(180deg, var(--btn-gold-top), var(--btn-gold-bottom));
  color: var(--btn-text-cream);
  text-shadow: 0 1px 2px rgba(61, 32, 6, 0.55);
  transition: filter 0.2s ease;
}

.btn-primary:hover {
  filter: brightness(1.12);
}

.icon-arrow {
  width: 22px;
  height: 11px;
  margin-left: 12px;
}

.btn-ghost {
  padding: 0 18px;
  border: 1px solid var(--ghost-border);
  background: rgba(7, 9, 24, 0.35);
  color: #E3E3E6;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.btn-ghost:hover {
  border-color: var(--gold-hi);
  background: rgba(7, 9, 24, 0.55);
}

.icon-play {
  width: 19px;
  height: 19px;
  margin-right: 12px;
}

/* ============================================================
   SECTION 2 — 7-PILLAR NAVY STRIP
   Values measured on assets/full-mockup.png (strip y347–515 in
   the 864px render, scaled ×5/3 to the 1440px reference).
   Background: gradient in the mockup spans the full range of
   section2-bg.png compressed into the strip → 100% 100% size.
   ============================================================ */

:root {
  --s2-hairline: #7E5C3D;     /* bronze line atop strip */
  --s2-title: #DEDCE3;        /* pillar titles */
  --s2-desc: #C8C4CC;         /* muted descriptions */
}

/* Navy overlay desaturates the raw bg toward the mockup's tone
   (render rgb(42,21,78) vs mockup rgb(26,21,52) at the bright zone) */
.pillars {
  border-top: 2px solid var(--s2-hairline);
  background:
    linear-gradient(rgba(12, 17, 36, 0.32), rgba(12, 17, 36, 0.32)),
    #150F31 url("assets/section2-bg.png") no-repeat;
  background-size: 100% 100%;
  padding: 32px 20px 50px;
}

.pillars-row {
  display: flex;
  gap: 20px;
  max-width: 1440px;
  margin: 0 auto;
}

.pillar {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* The gold ring is baked into each icon PNG at a different scale
   within its 1254px frame (ring spans 892–1080px depending on the
   file). Per-icon widths normalize every ring to exactly 80px. */
.pillar-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pillar-icon img {
  height: auto;
}

.icon-learn      { width: 100px; }
.icon-library    { width: 106px; }
.icon-community  { width: 112px; }
.icon-event      { width: 93px; }
.icon-institutes { width: 93px; }
.icon-research   { width: 95px; }
.icon-global     { width: 96px; }

.pillar-title {
  margin-top: 24px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--s2-title);
}

.pillar-desc {
  max-width: 180px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  color: var(--s2-desc);
}

/* Events is the one pillar with a destination of its own, so it is
   the one rendered as a link; the lift on hover is the only thing
   marking it apart from its neighbours. */
.pillar-link {
  transition: transform 0.2s ease;
}

.pillar-link:hover {
  transform: translateY(-3px);
}

.pillar-link:hover .pillar-title {
  color: var(--gold-hi);
}

/* ============================================================
   SECTION 3 — DISCOVER OUR INSTITUTES
   Measured on assets/full-mockup.png (section y516–869 in the
   864px render, scaled ×5/3 to the 1440px reference).
   Cream: #EBDFD4 (section3-bg.png paper texture, avg #EEE0D3).
   Cards: #0A0E25, ~212×442px, radius 15px, gap 14px.
   Image block 193px fading into card navy; 100px icon ring
   centered 212px from card top (31px overlap into the image).
   ============================================================ */

:root {
  --s3-cream: #EBDFD4;
  --s3-heading: #262242;      /* section heading + view-all link */
  --s3-card-navy: #0A0E25;
  --s3-orn-gold: #BFA075;     /* heading side ornaments */
  --s3-title: #EEEDED;        /* card titles */
  --s3-desc: #CBC8D2;         /* card descriptions */
}

.institutes {
  background: var(--s3-cream) url("assets/section3-bg.png") center / cover no-repeat;
  padding: 30px 0 28px;
}

/* --- Heading with gold side ornaments ----------------------- */

.institutes-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 29px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s3-heading);
}

/* Thin gold line with a small diamond at the text-side end */
.heading-orn {
  position: relative;
  width: 96px;
  height: 1px;
  background: var(--s3-orn-gold);
  flex-shrink: 0;
}

.heading-orn::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 7px;
  height: 7px;
  background: var(--s3-orn-gold);
  transform: rotate(45deg);
}

.orn-left::after  { right: 0; }
.orn-right::after { left: 0; }

/* --- Card row ------------------------------------------------ */

.institutes-row {
  display: flex;
  gap: 14px;
  margin-top: 20px;
}

.institute-card {
  flex: 1 1 0;
  min-width: 0;
  height: 442px;
  background: var(--s3-card-navy);
  border-radius: 15px;
  overflow: hidden;
  text-align: center;
  display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Every card opens its institute pop-up, so it lifts like the
   Section 2 category cards do. */
.institute-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(10, 14, 37, 0.32);
}

.institute-card:hover .card-title {
  color: var(--gold-hi);
}

/* Photo fades into the card navy over its lower third */
.card-media {
  position: relative;
  height: 193px;
}

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

.card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 14, 37, 0) 50%,
    rgba(10, 14, 37, 0.55) 80%,
    var(--s3-card-navy) 100%
  );
}

/* Gold ring is baked into each icon PNG; the emblem circle adds
   the mockup's translucent navy disc behind it. Per-icon widths
   normalize every ring to exactly 100px (ring bbox / 1254 frame). */
.card-emblem {
  position: relative;
  z-index: 1;
  width: 100px;
  height: 100px;
  margin: -31px auto 0;
  border-radius: 50%;
  background: rgba(10, 14, 37, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-emblem img {
  height: auto;
}

.emblem-consciousness { width: 120px; }
.emblem-spiritual     { width: 127px; }
.emblem-human         { width: 114px; }
.emblem-moral         { width: 118px; }
.emblem-global        { width: 126px; }
.emblem-science       { width: 115px; }

.card-title {
  margin-top: 13px;
  padding: 0 12px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--s3-title);
  transition: color 0.2s ease;
}

.card-desc {
  margin-top: 12px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 300;
  line-height: 23px;
  color: var(--s3-desc);
}

/* --- View all link -------------------------------------------
   Mockup renders this link dark navy (avg #2E294A), not gold. */

.institutes-viewall {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  margin: 22px auto 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s3-heading);
  transition: color 0.2s ease;
}

.institutes-viewall:hover {
  color: var(--gold);
}

.institutes-viewall .icon-arrow {
  width: 26px;
  height: 12px;
  margin-left: 14px;
}

/* ============================================================
   SECTION 4 — A FUTURE GATHERING PLACE FOR HUMANITY
   section4-bg.png (1672x941) already carries the flat navy
   field on its left half; cover-cropping at 50% 38% reproduces
   the mockup framing (campus terraces on the right), verified
   by template match against the mockup (offset 89/234). The
   mockup runs slightly darker on the left, so only a light
   navy wash fades out toward the image side.
   ============================================================ */

.future-banner {
  position: relative;
  height: 420px;
  background-image: url("assets/section4-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 38%;
  background-color: #150C31;
  overflow: hidden;
}

.future-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(13, 7, 35, 0.38) 0%,
    rgba(13, 7, 35, 0.20) 30%,
    rgba(13, 7, 35, 0) 48%
  );
  pointer-events: none;
}

.future-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: 102px; /* text starts x61 in the 864px mockup */
}

.future-heading {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 42px;
  line-height: 52px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--white);
}

/* HUMANITY gold — brighter than the hero gold; interior glyph
   pixels measure rgb(251,229,149) top -> rgb(228,188,122) bottom */
.future-heading .gold-bright {
  background: linear-gradient(180deg, #F3DF93, #DDB874);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.future-sub {
  max-width: 388px;
  margin-top: 22px;
  font-size: 16px;
  font-weight: 300;
  line-height: 27.5px;
  color: #E5E2EA;
}

.future-cta {
  margin-top: 25px;
  height: 47px;
  padding: 0 26px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

/* ============================================================
   SECTION 5 — FIVE PATHWAYS OF EXPLORATION
   Measured on assets/full-mockup.png (section y1122–1289 in the
   864px render, scaled ×5/3 to the 1440px reference).
   Cream matches the Institutes section; section5-bg.png texture.
   Heading identical to Institutes (29px / 0.12em / #262242) with
   the same diamond-tipped ornaments at 42px line length.
   Icons are plain gold outlines with NO circular frame; content
   bottoms align across the row (~57–65px art heights). Dividers:
   1px soft gold, 168px tall, between columns only.
   ============================================================ */

:root {
  --s5-title: #3A3552;        /* pathway titles */
  --s5-desc: #5C5566;         /* muted descriptions */
  --s5-divider: #D6BDA6;      /* thin vertical gold lines */
}

.pathways {
  background: var(--s3-cream) url("assets/section5-bg.png") center / cover no-repeat;
  padding: 28px 0 25px;
}

/* Same cap height as the Institutes heading but tighter tracking:
   mockup text width 478px = natural glyphs (463px) + ~0.02em */
.pathways-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 29px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--s3-heading);
}

/* Same ornament as Institutes, shortened to the mockup's 42px */
.orn-short {
  width: 42px;
}

/* --- Column row ---------------------------------------------- */

.pathways-row {
  display: flex;
  align-items: flex-start;
  margin-top: 24px;
}

.pathway {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Every pathway opens its own pop-up, so it lifts on hover like
   the Section 2 categories. */
.pathway-link {
  transition: transform 0.2s ease;
}

.pathway-link:hover {
  transform: translateY(-3px);
}

.pathway-link:hover .pathway-title {
  color: var(--gold-hi);
}

.pathway-divider {
  flex-shrink: 0;
  width: 1px;
  height: 168px;
  margin-top: 10px;
  background: var(--s5-divider);
}

/* Icon art bottoms align across the row in the mockup; each PNG
   carries different transparent padding within its 2048px frame,
   so per-icon heights normalize the visible art to 57–65px. */
.pathway-icon {
  height: 66px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.pathway-icon img {
  width: auto;
  object-fit: contain;
}

.pw-consciousness { height: 91px; margin-bottom: -13px; }
.pw-spiritual     { height: 102px; margin-bottom: -22px; }
.pw-human         { height: 92px; margin-bottom: -13px; }
.pw-dialogue      { height: 81px; margin-bottom: -10px; }
.pw-culture       { height: 85px; margin-bottom: -12px; }

.pathway-title {
  max-width: 165px;
  margin-top: 16px;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s5-title);
  transition: color 0.2s ease;
}

.pathway-desc {
  max-width: 195px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.01em;
  color: var(--s5-desc);
}

/* ============================================================
   "OPENS SOMETHING" ARROW
   Shared by every full-card link above that has no wording of
   its own to say it opens a pop-up (the category cards, the
   institute cards, the pathway columns). .ev-family and .pod-card
   are deliberately left out below: they already carry their own
   "Explore…" / "Listen to the Episode" label, and a second
   affordance on top of that would read as a mistake.

   Bottom-center is the only anchor that survives every layout
   these grids collapse to (7-up row, 2-up grid, single column)
   without per-breakpoint repositioning: left:0/right:0 + a
   centered mask always lands on the middle of the card box,
   whatever width that box currently is.

   Drawn as a background-color + SVG mask instead of the U+2192
   character so it stays one solid gold shape on every platform,
   rather than falling back to whatever glyph the visitor's
   system font subset happens to contain.
   ============================================================ */

:root {
  --arrow-cue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 8'%3E%3Cpath d='M0.5 4h17M13.6 0.9L17.5 4l-3.9 3.1' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.pillar-link,
.institute-card,
.pathway-link {
  position: relative;
  padding-bottom: 28px;
}

.institute-card {
  padding-bottom: 26px;
}

.pillar-link::after,
.institute-card::after,
.pathway-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  width: 20px;
  height: 8px;
  margin: 0 auto;
  background-color: var(--gold);
  opacity: 0.6;
  -webkit-mask-image: var(--arrow-cue);
  mask-image: var(--arrow-cue);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

/* Hover/focus resolves to the same gold the card's own heading
   turns to (.pillar-title / .card-title / .pathway-title above),
   so the whole card reads as one color under the cursor instead
   of the arrow staying a separate object. */
.pillar-link:hover::after,
.pillar-link:focus-within::after,
.institute-card:hover::after,
.institute-card:focus-within::after,
.pathway-link:hover::after,
.pathway-link:focus-within::after {
  transform: translateX(4px);
  background-color: var(--gold-hi);
  opacity: 1;
}

/* Touch has no hover, so the resting state has to carry the
   whole hint on its own — smaller glyph, higher rest opacity. */
@media (hover: none) {
  .pillar-link::after,
  .institute-card::after,
  .pathway-link::after {
    width: 18px;
    height: 7px;
    opacity: 0.85;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pillar-link::after,
  .institute-card::after,
  .pathway-link::after {
    transition: background-color 0.01ms, opacity 0.01ms;
  }

  .pillar-link:hover::after,
  .pillar-link:focus-within::after,
  .institute-card:hover::after,
  .institute-card:focus-within::after,
  .pathway-link:hover::after,
  .pathway-link:focus-within::after {
    transform: none;
  }
}

/* ============================================================
   SECTION 6 — JOIN A GLOBAL MOVEMENT
   Measured on assets/full-mockup.png (band y1290–1418 in the
   864px render, ×5/3 to the 1440px reference → 213px tall).
   section6-bg.png IS the banner background — base navy #150E30
   with the faint gold network clusters already baked in at the
   far left and right edges.
   Button fill/text measured identical to the header button
   (#AF7F35→#7F5721 fill, cream text over a dark shadow), so it
   reuses the shared --btn-gold-* / --btn-text-cream vars.
   The button is NOT flush right: its right edge sits 179px
   inside the shell, leaving textured space beyond it.
   ============================================================ */

:root {
  --s6-navy: #150E30;         /* banner base under the bg image */
  --s6-para: #DFE1E3;         /* paragraph grey-white */
}

/* section6-bg.png carries a bright radial glow at its center that
   the mockup suppresses to a flat dark navy; the horizontal overlay
   below reproduces the mockup's measured darkening (strongest at
   the band center, none at the outer edges where the gold network
   clusters sit). */
.join-banner {
  height: 213px;
  background:
    linear-gradient(90deg,
      rgba(7, 3, 26, 0)    2%,
      rgba(7, 3, 26, 0.75) 25%,
      rgba(7, 3, 26, 0.86) 50%,
      rgba(7, 3, 26, 0.55) 68%,
      rgba(7, 3, 26, 0.10) 95%),
    var(--s6-navy) url("assets/section6-bg.png") center / cover no-repeat;
}

.join-inner {
  display: flex;
  align-items: center;
  height: 100%;
}

/* bird-icon.png is a 1254px square canvas whose art occupies a
   1052×898 box inside it (transparent padding: 123L/79R/154T/202B).
   A 248px square at scale 0.198 puts the visible art at the
   mockup's 208×178, art left edge at x100, art center ~12px below
   the band center. The canvas overflows the 213px band top/bottom
   but only with transparent padding. */
.join-dove {
  width: 248px;
  height: 248px;
  margin-left: 28px;
  margin-top: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.join-copy {
  margin-left: 46px;
  flex-shrink: 0;
}

.join-heading {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 35px;
  line-height: 1;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #FFFFFF;
}

.join-desc {
  max-width: 480px;
  margin-top: 20px;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.01em;
  color: var(--s6-para);
}

.btn-member {
  width: 293px;
  height: 60px;
  margin-left: auto;
  margin-right: 179px;
  margin-bottom: 13px;
  flex-shrink: 0;
  border: 1px solid var(--btn-bevel);
  border-radius: 4px;
  /* measured #AA7932→#855B23 across the mockup button — a touch
     lighter than the shared header-button gradient */
  background: linear-gradient(180deg, #B28136, #7B5420);
  color: var(--btn-text-cream);
  text-shadow: 0 1px 2px rgba(61, 32, 6, 0.55);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  transition: filter 0.2s ease;
}

.btn-member:hover {
  filter: brightness(1.12);
}

/* ============================================================
   SECTION 7 — SUPPORT OUR MISSION
   Nonprofit / tax-deductibility statement. Reuses the cream
   band language of Sections 3 and 5 (same texture, same
   ornamented serif heading) so it reads as part of the same
   family between the navy Join banner and the navy footer.
   ============================================================ */

.support-mission {
  background: var(--s3-cream) url("assets/section5-bg.png") center / cover no-repeat;
  padding: 34px 0 42px;
}

/* Same treatment as .pathways-heading */
.support-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 29px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--s3-heading);
}

.support-text {
  max-width: 780px;
  margin: 22px auto 0;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.01em;
  color: var(--s5-desc);
}

.support-text + .support-text {
  margin-top: 14px;
}

/* Organization names in the section's darker serif-navy */
.support-text strong {
  font-weight: 600;
  color: var(--s5-title);
}

.support-text-appeal {
  font-style: italic;
  color: var(--s5-title);
}

/* Donate CTA — the section's cream background calls for the
   inverse of the gold-fill buttons used on dark bands (header,
   hero, join banner): a navy fill with a gold bevel + gold text,
   still built on the same --btn-* / --gold-* palette so it reads
   as part of the same family rather than a new button system. */
.btn-donate {
  display: flex;
  width: max-content;
  margin: 28px auto 0;
  padding: 0 26px;
  height: 47px;
  border: 1px solid var(--gold);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--navy-soft), var(--navy));
  color: var(--gold-hi);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  transition: filter 0.2s ease, color 0.2s ease;
}

.btn-donate:hover {
  filter: brightness(1.5);
  color: var(--btn-text-cream);
}

/* ============================================================
   FOOTER
   Measured on assets/full-mockup.png (864px wide = 5/3 of the
   1440px reference; footer band y1551–1732 → 302px tall:
   220px top row + 1px divider + 81px bottom bar).
   footer-bg.png (1672×941) anchored 50% 100% — its bottom slice
   (#151139→#0C0E2D) matches the mockup navy (#161230→#100F2A).
   Faint 1px vertical dividers verified at mockup x271/379/473/
   619 → 452/632/788/1032 at 1440.
   ============================================================ */

:root {
  --footer-heading: #C0965C;    /* gold column headings */
  --footer-link: #C0BCC8;       /* muted lavender-white links */
  --footer-quote: #E7B559;      /* bright quote gold */
  --footer-qmark: #D9A445;      /* decorative quotation marks */
  --footer-attr: #C39C60;       /* attribution gold-tan */
  --footer-muted: #ACA9B8;      /* bottom-bar grey-lavender */
  --footer-line: rgba(255, 255, 255, 0.12);
}

.site-footer {
  background: #100F2A url("assets/footer-bg.png") 50% 100% / cover no-repeat;
}

.footer-top {
  display: flex;
  align-items: flex-start;
  height: 220px;
  padding-top: 24px;
}

/* Zone widths = divider-to-divider spans at 1440 */
.fcol-brand    { width: 404px; flex-shrink: 0; }
.fcol-center   { width: 180px; flex-shrink: 0; }
.fcol-resources{ width: 156px; flex-shrink: 0; }
.fcol-involved { width: 244px; flex-shrink: 0; }
.fcol-quote    { flex: 1; min-width: 0; }

.footer-vline {
  width: 1px;
  height: 170px;
  background: var(--footer-line);
  flex-shrink: 0;
}

/* --- Column 1: brand + social ------------------------------- */

.footer-brand {
  display: flex;
  align-items: flex-start;
  padding-left: 34px;
}

/* Same treatment as the header .logo: the PNG's art fills only
   ~61% of its 1024px frame (alpha bbox 193–813), so the 88px
   layout box is scaled up visually to render the mockup's
   header-sized emblem. */
.footer-logo {
  width: 88px;
  height: 88px;
  object-fit: contain;
  transform: scale(1.66);
  transform-origin: center;
  flex-shrink: 0;
}

.footer-brand-text {
  display: flex;
  flex-direction: column;
  margin-left: 17px;
  margin-top: 4px;
}

.footer-brand-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 31px;
  line-height: 1;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--white);
}

.footer-brand-sub {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.27em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 6px;
}

.footer-brand-tagline {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 17px;
  text-transform: uppercase;
  color: #D3D3DC;
  margin-top: 9px;
}

.footer-social {
  display: flex;
  gap: 16px;
  margin-top: 27px;
  padding-left: 30px;
}

/* The thank-you page carries the slim footer bar rather than the full
   five-column footer, so its social row has no brand column to sit
   beside. Centred on its own line, with the padding the column layout
   would otherwise have supplied, and allowed to wrap so five circles
   never press against the edge of a narrow phone. */
.footer-social--center {
  justify-content: center;
  flex-wrap: wrap;
  padding: 22px 16px 0;
  margin-top: 0;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--footer-heading);
  border-radius: 50%;
  color: #DFB05C;
  transition: filter 0.2s ease;
}

.social-link:hover {
  filter: brightness(1.25);
}

.social-link svg {
  width: 18px;
  height: 18px;
}

/* --- Columns 2–4: link lists -------------------------------- */

.fcol-links {
  padding-top: 8px;
}

.fcol-center    { padding-left: 41px; }
.fcol-resources { padding-left: 43px; }
.fcol-involved  { padding-left: 45px; }

.fcol-heading {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--footer-heading);
}

.fcol-list {
  list-style: none;
  margin-top: 14px;
}

/* 27px row pitch (18px line + 9px gap), measured 16px rows in
   the 864px mockup */
.fcol-list li {
  font-size: 14px;
  line-height: 18px;
}

.fcol-list li + li {
  margin-top: 9px;
}

.fcol-list a {
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--footer-link);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.fcol-list a:hover {
  color: var(--gold-hi);
}

/* Slight emphasis so "Donate Now" reads as the standout action
   at the top of Get Involved, without a new visual language. */
.fcol-list a.fcol-donate {
  color: var(--footer-heading);
  font-weight: 600;
}

.fcol-list a.fcol-donate:hover {
  color: var(--gold-hi);
}

/* --- Column 5: quote ----------------------------------------- */

.fcol-quote {
  padding-left: 48px;
  padding-top: 6px;
}

.footer-quote {
  position: relative;
  max-width: 300px; /* wraps as in mockup: within / path / for all. */
  padding-left: 38px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 29px;
  line-height: 42px;
  color: var(--footer-quote);
}

.qmark {
  font-style: normal;
  font-weight: 600;
  font-size: 46px;
  line-height: 1;
  color: var(--footer-qmark);
}

.qmark-open {
  position: absolute;
  left: 0;
  top: -2px;
}

/* line-height 0 so the 46px mark doesn't inflate the last
   line's box; nudged down to sit just over "all." as in the
   mockup */
.qmark-close {
  line-height: 0;
  position: relative;
  top: 8px;
  margin-left: 8px;
}

.footer-quote-attr {
  margin-top: 18px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--footer-attr);
}

/* --- Bottom bar ---------------------------------------------- */

.footer-divider {
  max-width: 1344px;
  margin: 0 auto;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

/* --- Newsletter band ------------------------------------------
   Sits in its own rule between the column row and the bottom bar:
   copy on the left, a single-line form on the right. Field styling
   deliberately echoes the membership modal so the two forms read
   as one system.
   -------------------------------------------------------------- */

.footer-news {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  /* Left edge lines up with the copyright below (x63); the button's
     right edge lines up with the divider (the shell's own 48px). */
  padding-left: 63px;
  padding-top: 26px;
  padding-bottom: 26px;
}

.fnews-heading {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--footer-heading);
}

.fnews-text {
  margin-top: 6px;
  max-width: 46ch;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  color: var(--footer-link);
}

.fnews-form {
  position: relative;
  flex-shrink: 0;
  width: 480px;
  max-width: 100%;
}

/* Honeypot: off-screen rather than display:none, so bots that
   skip hidden inputs still fill it in. */
.fnews-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.fnews-row {
  display: flex;
  gap: 10px;
}

/* The label is for screen readers; the placeholder carries the
   visual cue, as everywhere else in this footer. */
.fnews-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.fnews-input {
  flex: 1;
  min-width: 0;
  height: 47px;
  padding: 0 15px;
  border: 1px solid var(--ghost-border);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fnews-input::placeholder {
  color: rgba(233, 233, 238, 0.45);
}

.fnews-input:focus {
  border-color: var(--gold-hi);
  box-shadow: 0 0 0 3px rgba(196, 146, 63, 0.18);
}

.fnews-input:disabled {
  opacity: 0.6;
}

.fnews-form.is-invalid .fnews-input {
  border-color: var(--mf-error);
}

.fnews-form.is-invalid .fnews-input:focus {
  box-shadow: 0 0 0 3px rgba(224, 169, 160, 0.18);
}

/* Same gradient/bevel as the membership submit button, sized to
   sit flush beside the field. */
.fnews-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-shrink: 0;
  height: 47px;
  padding: 0 26px;
  border: 1px solid var(--btn-bevel);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--btn-gold-top), var(--btn-gold-bottom));
  color: var(--btn-text-cream);
  text-shadow: 0 1px 2px rgba(61, 32, 6, 0.55);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.fnews-btn:hover:not(:disabled) {
  filter: brightness(1.12);
}

.fnews-btn:disabled {
  cursor: default;
  opacity: 0.72;
}

.fnews-spinner {
  display: none;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(243, 237, 220, 0.35);
  border-top-color: var(--btn-text-cream);
  border-radius: 50%;
  animation: mf-spin 0.7s linear infinite;
}

.fnews-btn.is-sending .fnews-spinner {
  display: block;
}

.fnews-msg {
  margin-top: 9px;
  font-size: 12.5px;
  line-height: 19px;
}

.fnews-msg.is-ok {
  color: var(--gold-hi);
}

.fnews-msg.is-error {
  color: var(--mf-error);
}

/* --- Sponsor credit -------------------------------------------
   One line on a slim band of its own between the newsletter and
   the bottom bar. Centred and quiet: the mark is small and held
   back to 85% so it acknowledges the sponsor without setting up a
   second logo to compete with the Center's own, and the words take
   the same muted grey as the copyright beneath them. Having its
   own band means it never crowds the copyright or the legal links
   at any width — it simply stacks above them.
   -------------------------------------------------------------- */

.footer-sponsor {
  display: flex;
  justify-content: center;
  padding-top: 28px;
  padding-bottom: 28px;
}

.fsponsor {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  text-decoration: none;
}

/* assets/the-seventy-nations-mark.png is the sponsor's logo cropped
   to its own edges and squared up — 192px so it stays sharp at 3x on
   a retina screen, 56KB instead of the 660KB full-size file, and it
   fills the 64px box rather than floating inside its own margin. */
.fsponsor-logo {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  opacity: 0.95;
  transition: opacity 0.25s ease;
}

.fsponsor-text {
  font-size: 16.5px;
  font-weight: 300;
  letter-spacing: 0.045em;
  color: var(--footer-link);
  transition: color 0.2s ease;
}

.fsponsor-name {
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--footer-attr);
  transition: color 0.2s ease;
}

.fsponsor:hover .fsponsor-logo {
  opacity: 1;
}

.fsponsor:hover .fsponsor-text {
  color: var(--footer-link);
}

.fsponsor:hover .fsponsor-name {
  color: var(--gold-hi);
}

/* Copyright starts at x63; legal links end ~107px inside the
   right edge (measured at 1440) */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 81px;
  padding: 0 107px 17px 63px;
}

.footer-copy {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--footer-muted);
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 26px;
}

.footer-legal a {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--footer-muted);
  transition: color 0.2s ease;
}

.footer-legal a:hover {
  color: var(--footer-link);
}

.legal-sep {
  width: 1px;
  height: 14px;
  background: rgba(172, 169, 184, 0.5);
}

/* ============================================================
   MOBILE-ONLY ELEMENTS — base state
   These two rules exist solely to hide the NEW hamburger button
   and the NEW cloned Support link on desktop. They style no
   pre-existing element and change nothing in the approved
   desktop design.
   ============================================================ */

.nav-toggle {
  display: none;
}

.site-nav .nav-support {
  display: none;
}

/* ============================================================
   IN-PAGE NAVIGATION — smooth scrolling to section anchors.
   New behavior only; no visual change to approved elements.
   ============================================================ */

html {
  scroll-behavior: smooth;
}

/* Breathing room above a scrolled-to section (header is not
   fixed, so a small comfort margin is enough). */
#hero,
#explore,
#institutes,
#vision,
#pathways,
#join,
#support,
#footer {
  scroll-margin-top: 24px;
}

/* ============================================================
   BECOME A MEMBER — membership enquiry modal

   Matches the site's navy/gold/serif language and 4px radius.
   The panel scrolls internally so the full form is reachable on
   short viewports without the page behind it moving.

   Error red (#E0A9A0) is a desaturated clay rather than a pure
   red — it reads as a warning against navy without breaking the
   warm palette.
   ============================================================ */

:root {
  --mf-field-bg: rgba(7, 9, 24, 0.55);
  --mf-error: #E0A9A0;
}

body.modal-open {
  overflow: hidden;
}

.member-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(7, 9, 24, 0.78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.member-overlay.is-open {
  display: flex;
  animation: mf-fade 0.22s ease both;
}

@keyframes mf-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.member-modal {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overflow-x: hidden;   /* the off-screen honeypot must not add a bar */
  padding: 44px 44px 38px;
  border: 1px solid var(--btn-bevel);
  border-radius: 4px;
  background: linear-gradient(180deg, #13162B, #0A0F23);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  animation: mf-rise 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}

@keyframes mf-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.member-modal::-webkit-scrollbar {
  width: 8px;
}

.member-modal::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(196, 146, 63, 0.5);
}

.member-close {
  position: absolute;
  top: 10px;
  right: 14px;
  border: none;
  background: none;
  color: var(--gold);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
}

.member-close:hover {
  color: var(--gold-hi);
}

.member-head {
  text-align: center;
}

.member-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.15;
  color: var(--white);
}

.member-sub {
  max-width: 44ch;
  margin: 10px auto 0;
  font-size: 13px;
  line-height: 21px;
  color: var(--text-body);
}

/* Reservation mode only: a gold pill naming the event being booked,
   so the visitor can see the form knows which evening they clicked. */
.mf-event-note {
  display: inline-block;
  max-width: 100%;
  margin: 14px auto 0;
  padding: 7px 15px;
  border: 1px solid var(--ghost-border);
  border-radius: 999px;
  background: rgba(196, 146, 63, 0.12);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.01em;
  color: var(--gold-hi);
  text-wrap: balance;
}

/* An author display value beats the UA rule for [hidden], so the
   pill has to be told to disappear explicitly. */
.mf-event-note[hidden] {
  display: none;
}

/* ---- Form ---------------------------------------------------- */

.member-form {
  margin-top: 26px;
}

/* Honeypot: off-screen rather than display:none, so bots that
   skip hidden inputs still fill it in. */
.mf-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.mf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
}

.mf-field-wide {
  grid-column: 1 / -1;
}

.mf-label {
  display: block;
  margin-bottom: 7px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold-hi);
}

.mf-req {
  color: var(--gold);
}

.mf-opt {
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(233, 233, 238, 0.55);
}

.mf-input {
  display: block;
  width: 100%;
  height: 47px;
  padding: 0 15px;
  border: 1px solid var(--ghost-border);
  border-radius: 4px;
  background: var(--mf-field-bg);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mf-input::placeholder {
  color: rgba(233, 233, 238, 0.45);
}

.mf-input:focus {
  border-color: var(--gold-hi);
  box-shadow: 0 0 0 3px rgba(196, 146, 63, 0.18);
}

.mf-textarea {
  height: auto;
  min-height: 104px;
  padding: 13px 15px;
  line-height: 22px;
  resize: vertical;
}

/* Native select arrows are grey on every platform; hide the
   control's own chevron and draw a gold one on the wrapper. */
.mf-select-wrap {
  position: relative;
}

.mf-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  cursor: pointer;
}

.mf-select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  pointer-events: none;
}

.mf-select option {
  background: #13162B;
  color: var(--text-body);
}

/* ---- Errors and helpers -------------------------------------- */

.mf-field.is-invalid .mf-input {
  border-color: var(--mf-error);
}

.mf-field.is-invalid .mf-input:focus {
  box-shadow: 0 0 0 3px rgba(224, 169, 160, 0.18);
}

.mf-err {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 17px;
  color: var(--mf-error);
}

.mf-under {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.mf-under .mf-err {
  flex: 1;
}

.mf-count {
  margin-top: 6px;
  margin-left: auto;
  font-size: 11px;
  color: rgba(233, 233, 238, 0.45);
  font-variant-numeric: tabular-nums;
}

.mf-formerr {
  margin-top: 18px;
  padding: 11px 14px;
  border: 1px solid rgba(224, 169, 160, 0.45);
  border-radius: 4px;
  background: rgba(224, 169, 160, 0.08);
  font-size: 12.5px;
  line-height: 19px;
  color: var(--mf-error);
}

.mf-note {
  margin-top: 12px;
  font-size: 11px;
  line-height: 17px;
  text-align: center;
  color: rgba(233, 233, 238, 0.5);
}

/* ---- Submit --------------------------------------------------- */

.member-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 49px;
  margin-top: 22px;
  border: 1px solid var(--btn-bevel);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--btn-gold-top), var(--btn-gold-bottom));
  color: var(--btn-text-cream);
  text-shadow: 0 1px 2px rgba(61, 32, 6, 0.55);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.member-submit:hover:not(:disabled) {
  filter: brightness(1.12);
}

.member-submit:disabled {
  cursor: default;
  opacity: 0.72;
}

.mf-spinner {
  display: none;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(243, 237, 220, 0.35);
  border-top-color: var(--btn-text-cream);
  border-radius: 50%;
  animation: mf-spin 0.7s linear infinite;
}

.member-submit.is-sending .mf-spinner {
  display: block;
}

@keyframes mf-spin {
  to { transform: rotate(360deg); }
}

/* ---- Success panel -------------------------------------------- */

.member-done {
  text-align: center;
  padding: 12px 0 4px;
  animation: mf-rise 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.member-done-mark {
  width: 58px;
  height: 58px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ghost-border);
  border-radius: 50%;
  background: rgba(196, 146, 63, 0.12);
  color: var(--gold-hi);
}

.member-done-mark svg {
  width: 26px;
  height: 26px;
}

.member-done-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 30px;
  color: var(--white);
}

.member-done-text {
  max-width: 42ch;
  margin: 12px auto 0;
  font-size: 14px;
  line-height: 23px;
  color: var(--text-body);
}

/* .btn-ghost carries only colour; the hero supplies its metrics,
   so the modal has to state its own. */
.member-done-close {
  height: 47px;
  min-width: 170px;
  margin-top: 26px;
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
}

/* ============================================================
   WATCH OUR STORY — animated presentation lightbox

   No film exists yet, so the story is a timed sequence of motion
   slides. Everything here is deliberately video-shaped (chapter
   progress, transport controls, letterbox-dark ground) so a real
   <video class="story-video"> can take the stage later without
   touching the chrome.

   Sits at z-index 90, UNDER the membership modal (100), so
   "Become a Member" on the closing slide still opens above it.
   ============================================================ */

:root {
  --story-ink: #05070F;       /* letterbox ground, darker than --navy */
  --story-cream: #F0E6D2;     /* slide body copy on the dark ground */
  --story-gold-lt: #F0DCA8;   /* highlight end of the gold gradient */
}

.story-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--story-ink);
}

.story-overlay.is-open {
  display: block;
  animation: storyOpen 0.5s ease both;
}

.story-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Cinema vignette over every slide, under the chrome */
.story-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(115% 85% at 50% 45%, transparent 45%, rgba(3, 5, 12, 0.55) 100%);
}

/* --- Chapter progress ---------------------------------------- */

.story-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  gap: 6px;
  padding: 16px 26px 0;
}

.story-seg {
  position: relative;
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(240, 230, 210, 0.16);
}

.story-seg i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--story-gold-lt));
  box-shadow: 0 0 8px rgba(205, 156, 76, 0.5);
}

/* Chapter names sit under the bar like a scrubber's markers */
.story-seg em {
  position: absolute;
  top: 9px;
  left: 0;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 230, 210, 0.42);
  white-space: nowrap;
  transition: color 0.4s ease;
}

.story-seg.is-current em {
  color: var(--gold-hi);
}

/* --- Top bar -------------------------------------------------- */

.story-topbar {
  position: absolute;
  top: 44px;          /* clears the progress bar and its chapter names */
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px;
  pointer-events: none;
}

.story-kicker {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(240, 230, 210, 0.5);
}

.story-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 12px;
  border: 1px solid rgba(201, 155, 92, 0.4);
  border-radius: 4px;
  background: rgba(10, 15, 35, 0.5);
  color: var(--story-cream);
  cursor: pointer;
  pointer-events: auto;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.story-close:hover {
  border-color: var(--gold-hi);
  color: var(--gold-hi);
}

.story-esc {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
}

.story-close svg {
  width: 16px;
  height: 16px;
}

/* --- Stage & slides -------------------------------------------- */

.story-stage {
  position: absolute;
  inset: 0;
}

.story-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Keeps slide content clear of the progress bar and the transport */
  padding: 84px 0 104px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.85s ease, visibility 0.85s;
}

.story-slide.is-active {
  opacity: 1;
  visibility: visible;
}

.story-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.story-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-bg-navy {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(38, 30, 78, 0.75), transparent 70%),
    linear-gradient(180deg, #10132A, #05070F);
}

/* Slow-breathing gold halo used by the opening and closing slides */
.story-bg-glow {
  background:
    radial-gradient(46% 46% at 50% 50%, rgba(196, 146, 63, 0.20), transparent 72%),
    linear-gradient(180deg, #13162B, #05070F);
}

.story-slide.is-active .story-bg-glow {
  animation: storyBreathe 9s ease-in-out infinite;
}

/* Starfield: three layered dot patterns drifting upward */
.story-bg-stars {
  background:
    radial-gradient(1.6px 1.6px at 18% 32%, rgba(240, 220, 168, 0.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 72% 18%, rgba(240, 220, 168, 0.45), transparent 60%),
    radial-gradient(1.8px 1.8px at 44% 74%, rgba(240, 220, 168, 0.40), transparent 60%),
    radial-gradient(1.3px 1.3px at 86% 62%, rgba(240, 220, 168, 0.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 28% 86%, rgba(240, 220, 168, 0.30), transparent 60%),
    radial-gradient(60% 60% at 50% 40%, rgba(30, 24, 66, 0.9), transparent 75%),
    linear-gradient(180deg, #0C1026, #05070F);
  background-size: 40% 40%, 40% 40%, 40% 40%, 40% 40%, 40% 40%, 100% 100%, 100% 100%;
}

.story-slide.is-active .story-bg-stars {
  animation: storyDrift 26s linear infinite;
}

/* Ken Burns on the two photographic chapters */
.story-slide.is-active .kb {
  animation: storyKenBurns 13s ease-out both;
}

.story-slide.is-active .kb-slow {
  animation: storyKenBurnsSlow 13s ease-out both;
}

.story-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 7, 15, 0.92) 0%, rgba(5, 7, 15, 0.72) 42%, rgba(5, 7, 15, 0.15) 100%),
    linear-gradient(180deg, rgba(5, 7, 15, 0.55), transparent 35%);
}

/* --- Slide layout ---------------------------------------------- */

.story-center {
  position: relative;
  z-index: 2;
  width: min(1040px, 88vw);
  padding: 0 10px;
  text-align: center;
}

.story-copy {
  position: relative;
  z-index: 2;
  width: min(1120px, 88vw);
  padding: 0 10px;
  text-align: left;
}

.story-copy .story-p {
  max-width: 560px;
}

/* --- Slide typography ------------------------------------------- */

.story-eyebrow {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--gold);
}

.story-h {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(30px, 4.6vw, 62px);
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
}

.story-h em {
  font-style: normal;
  background: linear-gradient(180deg, #F3DF93, #DDB874);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.story-h-sm {
  margin-top: 0;
  font-size: clamp(22px, 2.9vw, 38px);
}

.story-p {
  margin-top: 20px;
  font-weight: 300;
  font-size: clamp(13px, 1.15vw, 16px);
  line-height: 1.75;
  color: var(--story-cream);
}

.story-p-mid {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* --- 1: opening emblem ------------------------------------------ */

.open-emblem {
  position: relative;
  width: clamp(120px, 15vw, 176px);
  height: clamp(120px, 15vw, 176px);
  margin: 0 auto;
}

.open-emblem img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.story-slide.is-active .open-emblem img {
  animation: storyEmblem 1.5s cubic-bezier(0.16, 0.9, 0.3, 1) both;
}

.open-emblem .ring {
  position: absolute;
  inset: -14%;
  border: 1px solid rgba(196, 146, 63, 0.45);
  border-radius: 50%;
  opacity: 0;
}

.open-emblem .ring-2 {
  inset: -30%;
  border-color: rgba(196, 146, 63, 0.22);
}

.story-slide.is-active .ring-1 {
  animation: storyRing 3.4s ease-out 0.5s infinite;
}

.story-slide.is-active .ring-2 {
  animation: storyRing 3.4s ease-out 1.1s infinite;
}

.story-brand {
  margin-top: 30px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(28px, 3.8vw, 52px);
  line-height: 1.1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
}

.story-brand span {
  display: block;
  margin-top: 6px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.story-tagline {
  margin-top: 18px;
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 300;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(240, 230, 210, 0.8);
}

/* --- 2: scripture ------------------------------------------------ */

.story-quote {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(24px, 3.6vw, 50px);
  line-height: 1.42;
  color: var(--white);
}

.story-quote .qmark {
  color: var(--gold);
  opacity: 0.75;
}

.story-rule {
  display: block;
  width: 0;
  height: 1px;
  margin: 28px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.story-slide.is-active .s-grow {
  animation: storyGrow 1.4s ease-out var(--d, 0s) both;
}

.story-cite {
  display: block;
  margin-top: 18px;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

.scripture-dove {
  position: absolute;
  top: 16%;
  left: 0;
  z-index: 1;
  width: clamp(90px, 11vw, 150px);
  opacity: 0;
}

.story-slide.is-active .scripture-dove {
  animation: storyDove 16s linear both;
}

/* --- 4 & 6: icon rows -------------------------------------------- */

.story-icons {
  display: grid;
  gap: 26px 18px;
  margin-top: 40px;
}

.story-icons-7 {
  grid-template-columns: repeat(7, 1fr);
}

.story-icons-5 {
  grid-template-columns: repeat(5, 1fr);
}

.story-icon img {
  width: clamp(40px, 4vw, 58px);
  height: clamp(40px, 4vw, 58px);
  object-fit: contain;
}

.story-icon span {
  display: block;
  margin-top: 12px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(240, 230, 210, 0.88);
}

.story-slide.is-active .s-pop {
  animation: storyPop 0.85s cubic-bezier(0.16, 0.9, 0.3, 1) var(--d, 0s) both;
}

/* --- 5: institute tiles ------------------------------------------- */

.story-tiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-top: 38px;
}

.story-tile {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(196, 146, 63, 0.28);
  border-radius: 4px;
}

.story-tile img {
  display: block;
  width: 100%;
  height: clamp(150px, 21vh, 250px);
  object-fit: cover;
}

.story-tile figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 8px 10px;
  background: linear-gradient(180deg, transparent, rgba(5, 7, 15, 0.92));
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--story-cream);
}

.story-slide.is-active .s-tile {
  animation: storyTile 1s cubic-bezier(0.16, 0.9, 0.3, 1) var(--d, 0s) both;
}

/* --- 8: closing --------------------------------------------------- */

.end-dove {
  width: clamp(96px, 11vw, 150px);
  height: auto;
}

.story-slide.is-active .s-dove {
  animation: storyDoveLand 1.6s cubic-bezier(0.16, 0.9, 0.3, 1) both;
}

.slide-end .story-h {
  margin-top: 22px;
}

.story-end-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
}

/* Same button metrics as the hero CTAs (.hero-ctas .btn) */
.story-end-ctas .btn {
  height: 47px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
}

.story-end-ctas .btn-ghost {
  border-color: var(--ghost-border);
}

.story-end-ctas .btn-primary {
  border-color: var(--btn-bevel);
}

.story-replay-icon {
  width: 15px;
  height: 15px;
  margin-right: 8px;
}

/* --- Transport controls -------------------------------------------- */

.story-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 26px 30px;
}

.story-ctrl {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(201, 155, 92, 0.45);
  border-radius: 50%;
  background: rgba(10, 15, 35, 0.55);
  color: var(--story-cream);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, filter 0.2s ease;
}

.story-ctrl svg {
  width: 20px;
  height: 20px;
}

.story-ctrl:hover {
  border-color: var(--gold-hi);
  color: var(--gold-hi);
}

.story-play {
  width: 56px;
  height: 56px;
  border-color: var(--btn-bevel);
  background: linear-gradient(180deg, var(--btn-gold-top), var(--btn-gold-bottom));
  color: var(--btn-text-cream);
}

.story-play:hover {
  color: var(--btn-text-cream);
  border-color: var(--btn-bevel);
  filter: brightness(1.12);
}

.story-play .ico-play {
  display: none;
}

.story-frame.is-paused .story-play .ico-play {
  display: block;
}

.story-frame.is-paused .story-play .ico-pause {
  display: none;
}

.story-count {
  position: absolute;
  right: 26px;
  bottom: 42px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: rgba(240, 230, 210, 0.5);
}

.story-count b {
  font-weight: 600;
  color: var(--gold-hi);
}

.story-count i {
  font-style: normal;
}

/* Pause freezes the whole picture, like a paused film */
.story-frame.is-paused .story-stage *,
.story-frame.is-paused .story-bg-glow,
.story-frame.is-paused .story-bg-stars {
  animation-play-state: paused !important;
}

/* The closing chapter has its own CTAs — hide "next" there */
.story-frame.is-last .js-story-next {
  opacity: 0.3;
  pointer-events: none;
}

/* --- Real footage, when it arrives ----------------------------------- */

.story-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--story-ink);
}

/* One continuous scrubber instead of chapter segments — and none of
   the chapter furniture, which belongs to the slide deck only */
.story-frame.has-video .story-seg + .story-seg {
  display: none;
}

.story-frame.has-video .story-seg em,
.story-frame.has-video .story-count {
  display: none;
}

/* --- Keyframes -------------------------------------------------------- */

@keyframes storyOpen {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes storyRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

@keyframes storyPop {
  from { opacity: 0; transform: translateY(20px) scale(0.9); }
  to   { opacity: 1; transform: none; }
}

@keyframes storyTile {
  from { opacity: 0; transform: translateY(34px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

@keyframes storyGrow {
  from { width: 0; opacity: 0; }
  to   { width: 220px; opacity: 1; }
}

@keyframes storyEmblem {
  from { opacity: 0; transform: scale(0.72) rotate(-8deg); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

@keyframes storyRing {
  0%   { opacity: 0; transform: scale(0.82); }
  35%  { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.28); }
}

@keyframes storyBreathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.82; transform: scale(1.06); }
}

@keyframes storyDrift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 0 -400px, 0 -520px, 0 -330px, 0 -600px, 0 -450px, 0 0, 0 0; }
}

@keyframes storyKenBurns {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.20) translate3d(-2.5%, -1.5%, 0); }
}

@keyframes storyKenBurnsSlow {
  from { transform: scale(1.14) translate3d(2%, 0, 0); }
  to   { transform: scale(1.02) translate3d(0, 0, 0); }
}

@keyframes storyDove {
  0%   { opacity: 0; transform: translate(-18vw, 0) scale(0.9); }
  12%  { opacity: 0.5; }
  85%  { opacity: 0.5; }
  100% { opacity: 0; transform: translate(112vw, -9vh) scale(1.05); }
}

@keyframes storyDoveLand {
  from { opacity: 0; transform: translateY(-40px) scale(0.86); }
  to   { opacity: 1; transform: none; }
}

/* Shared entrance hook — declared last so it wins over nothing but
   itself; elements start hidden and only animate once their slide
   is the active one. */
.story-slide .s-rise,
.story-slide .s-pop,
.story-slide .s-tile,
.story-slide .s-dove {
  opacity: 0;
}

.story-slide.is-active .s-rise {
  animation: storyRise 1s cubic-bezier(0.16, 0.9, 0.3, 1) var(--d, 0s) both;
}

/* Reduced motion: no travel, no drift — chapters simply appear and
   the player still advances on its own. */
@media (prefers-reduced-motion: reduce) {

  /* The membership modal drops its entrance motion — but the submit
     spinner stays, since it is a status indicator, not decoration. */
  .member-overlay.is-open,
  .member-modal,
  .member-done {
    animation: none !important;
  }

  .story-slide *,
  .story-slide.is-active * {
    animation: none !important;
    transition: none !important;
  }

  .story-slide .s-rise,
  .story-slide .s-pop,
  .story-slide .s-tile,
  .story-slide .s-dove,
  .story-slide .s-grow {
    opacity: 1;
    transform: none;
  }

  .story-rule {
    width: 220px;
  }

  /* The dove no longer flies across — perch it instead of losing it */
  .scripture-dove {
    top: 14%;
    left: 6%;
    opacity: 0.45;
  }

  .story-slide.is-active .kb {
    transform: scale(1.06);
  }

}

/* ============================================================
   THE MASTER PLAN — vertical presentation reel

   The same player idea as "Watch Our Story", but portrait: a 9:16
   card floating on the dimmed page rather than a full-bleed
   cinema. It replaces the standalone master-plan.html document.

   Sits at z-index 95 — above the story lightbox (90), below the
   membership modal (100), so "Become a Member" on the closing
   chapter still opens over it.

   Sizing rule: the card is the smallest of 92vw, 420px, and the
   width a 9:16 box may have in the current viewport height. That
   one min() keeps it a phone-shaped reel on a desktop monitor and
   a near-full-bleed reel on an actual phone.
   ============================================================ */

.plan-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 95;
  place-items: center;
}

.plan-overlay.is-open {
  display: grid;
  animation: storyOpen 0.4s ease both;
}

.plan-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 14, 0.88);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.plan-frame {
  position: relative;
  width: min(92vw, 420px, calc((100vh - 36px) * 9 / 16));
  aspect-ratio: 9 / 16;
  max-height: calc(100vh - 36px);
  overflow: hidden;
  border: 1px solid rgba(201, 155, 92, 0.32);
  border-radius: 20px;
  background: var(--story-ink);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.65);
  animation: planLift 0.55s cubic-bezier(0.16, 0.9, 0.3, 1) both;
}

/* Vignette over every chapter, under the chrome */
.plan-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(120% 70% at 50% 42%, transparent 48%, rgba(3, 5, 12, 0.6) 100%);
}

/* --- Chapter progress (reel-style pips) ------------------------ */

.plan-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  gap: 4px;
  padding: 14px 16px 0;
}

.plan-seg {
  flex: 1;
  height: 2.5px;
  border-radius: 2px;
  background: rgba(240, 230, 210, 0.2);
  overflow: hidden;
}

/* Chapter names would not fit at this width — the topbar names the
   current chapter instead (see .plan-chapter). */
.plan-seg em {
  display: none;
}

.plan-seg i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--story-gold-lt));
  box-shadow: 0 0 6px rgba(205, 156, 76, 0.5);
}

/* --- Top bar --------------------------------------------------- */

.plan-topbar {
  position: absolute;
  top: 26px;
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 16px;
  pointer-events: none;
}

.plan-kicker {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(240, 230, 210, 0.86);
}

.plan-kicker span {
  color: var(--gold-hi);
}

/* Live chapter name, appended by the player */
.plan-chapter {
  display: block;
  font-family: var(--font-sans);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(240, 230, 210, 0.45);
}

.plan-close {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border: 1px solid rgba(201, 155, 92, 0.4);
  border-radius: 50%;
  background: rgba(10, 15, 35, 0.55);
  color: var(--story-cream);
  cursor: pointer;
  pointer-events: auto;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.plan-close:hover {
  border-color: var(--gold-hi);
  color: var(--gold-hi);
}

.plan-close svg {
  width: 15px;
  height: 15px;
}

/* --- Stage & chapters ------------------------------------------ */

.plan-stage {
  position: absolute;
  inset: 0;
}

.plan-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}

.plan-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease;
}

.plan-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.plan-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plan-bg-navy {
  background:
    radial-gradient(110% 60% at 50% 0%, rgba(38, 48, 96, 0.6), transparent 70%),
    linear-gradient(180deg, #0B1130, #070A1B 70%);
}

.plan-bg-glow {
  background:
    radial-gradient(58% 40% at 50% 44%, rgba(196, 146, 63, 0.24), transparent 70%),
    linear-gradient(180deg, #0A0F23, #05070F);
}

.plan-slide.is-active .plan-bg-glow {
  animation: storyBreathe 9s ease-in-out infinite;
}

.plan-bg-stars {
  background:
    radial-gradient(1.6px 1.6px at 18% 22%, rgba(240, 230, 210, 0.7), transparent 60%),
    radial-gradient(1.4px 1.4px at 72% 16%, rgba(240, 230, 210, 0.55), transparent 60%),
    radial-gradient(1.6px 1.6px at 40% 62%, rgba(240, 230, 210, 0.5), transparent 60%),
    radial-gradient(1.3px 1.3px at 84% 74%, rgba(240, 230, 210, 0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 28% 88%, rgba(240, 230, 210, 0.45), transparent 60%),
    radial-gradient(70% 45% at 50% 30%, rgba(29, 39, 84, 0.75), transparent 75%),
    linear-gradient(180deg, #080C1E, #05070F);
}

.plan-slide.is-active .pkb {
  animation: storyKenBurns 12s ease-out both;
}

.plan-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 7, 15, 0.55) 0%, rgba(5, 7, 15, 0.35) 45%, rgba(5, 7, 15, 0.85) 100%);
}

/* --- Chapter body ---------------------------------------------- */

.plan-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 76px 24px 92px;
}

.plan-body-center {
  align-items: center;
  text-align: center;
}

.plan-num {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--gold-hi);
}

.plan-eyebrow {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-hi);
}

.plan-title {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 600;
  line-height: 1.08;
  color: #FFFFFF;
}

.plan-title span {
  display: block;
  color: var(--gold-hi);
}

.plan-mark {
  width: 72px;
  height: auto;
  margin-bottom: 4px;
}

.plan-rule {
  display: block;
  width: 120px;
  height: 1px;
  margin: 16px auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.plan-tagline {
  font-family: var(--font-serif);
  font-size: 17px;
  font-style: italic;
  line-height: 1.5;
  color: var(--story-cream);
}

.plan-h {
  margin-top: 2px;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  color: #FFFFFF;
}

.plan-h-sm {
  font-size: 25px;
}

.plan-lead {
  margin-top: 14px;
  font-family: var(--font-serif);
  font-size: 17px;
  font-style: italic;
  line-height: 1.55;
  color: var(--story-cream);
}

.plan-p {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.8;
  font-weight: 300;
  color: rgba(240, 230, 210, 0.78);
}

.plan-p-mid {
  max-width: 300px;
}

.plan-cap {
  margin-top: 12px;
  font-size: 10.5px;
  line-height: 1.7;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: rgba(240, 230, 210, 0.55);
}

.plan-quote {
  margin-top: 20px;
  padding-left: 14px;
  border-left: 1px solid rgba(201, 155, 92, 0.5);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(240, 230, 210, 0.9);
}

.plan-quote .qmark {
  color: var(--gold-hi);
}

.plan-quote cite {
  display: block;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: 9px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(240, 230, 210, 0.45);
}

/* --- At a glance ------------------------------------------------ */

.plan-stats {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  margin-top: 26px;
}

.plan-stat {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
}

.plan-stat b {
  min-width: 62px;
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 600;
  line-height: 1;
  text-align: right;
  color: var(--gold-hi);
}

.plan-stat span {
  flex: 1;
  max-width: 150px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: rgba(240, 230, 210, 0.75);
}

/* --- Campus figure ---------------------------------------------- */

.plan-figure {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid rgba(201, 155, 92, 0.35);
  border-radius: 10px;
}

.plan-figure img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* --- Seven functions -------------------------------------------- */

.plan-grid {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.plan-grid-2 {
  grid-template-columns: 1fr 1fr;
}

.plan-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 6px;
  border: 1px solid rgba(201, 155, 92, 0.2);
  border-radius: 10px;
  background: rgba(10, 16, 40, 0.5);
}

.plan-cell-wide {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: center;
  gap: 12px;
}

.plan-cell img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.plan-cell b {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--story-cream);
}

/* --- Institute tiles --------------------------------------------- */

.plan-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}

.plan-tile {
  overflow: hidden;
  border: 1px solid rgba(201, 155, 92, 0.28);
  border-radius: 10px;
  background: rgba(8, 12, 30, 0.7);
}

.plan-tile img {
  display: block;
  width: 100%;
  height: 68px;
  object-fit: cover;
}

.plan-tile figcaption {
  padding: 7px 6px 8px;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--story-cream);
}

/* --- Pathway list ------------------------------------------------ */

.plan-list {
  list-style: none;
  margin-top: 18px;
}

.plan-list li {
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(201, 155, 92, 0.16);
}

.plan-list li:last-child {
  border-bottom: none;
}

.plan-list img {
  grid-row: 1 / 3;
  align-self: center;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.plan-list b {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
}

.plan-list span {
  font-size: 10px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(240, 230, 210, 0.6);
}

/* --- Phases ------------------------------------------------------- */

.plan-phases {
  position: relative;
  list-style: none;
  margin-top: 18px;
  padding-left: 20px;
}

/* The spine draws itself down as the chapter plays */
.plan-phases::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 3px;
  width: 1px;
  transform-origin: top;
  background: linear-gradient(180deg, var(--gold), rgba(201, 155, 92, 0.15));
}

.plan-slide.is-active .plan-phases::before {
  animation: planLine 2.2s ease-out 0.35s both;
}

.plan-phases li {
  position: relative;
  padding-bottom: 16px;
}

.plan-phases li:last-child {
  padding-bottom: 0;
}

.plan-phases li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -20px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-hi);
  box-shadow: 0 0 0 3px rgba(196, 146, 63, 0.18);
}

.plan-phases em {
  display: block;
  font-size: 8.5px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-hi);
}

.plan-phases b {
  display: block;
  margin-top: 3px;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: #FFFFFF;
}

.plan-phases span {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(240, 230, 210, 0.6);
}

/* --- Closing chapter ---------------------------------------------- */

.plan-dove {
  width: 66px;
  height: auto;
  margin-bottom: 14px;
}

.plan-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 250px;
  margin-top: 22px;
}

.plan-ctas .btn {
  height: 42px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.plan-replay-icon {
  width: 14px;
  height: 14px;
  margin-right: 8px;
}

/* --- Tap zones ------------------------------------------------------ */

.plan-tap {
  position: absolute;
  top: 0;
  bottom: 84px;
  z-index: 5;
  width: 34%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.plan-tap-prev {
  left: 0;
}

.plan-tap-next {
  right: 0;
  width: 44%;
}

/* The closing chapter owns its whole surface — its CTAs must stay
   clickable, and there is nowhere left to advance to. */
.plan-frame.is-last .plan-tap-next {
  display: none;
}

.plan-frame.is-last .plan-tap-prev {
  bottom: 55%;
  width: 22%;
}

/* --- Transport controls ----------------------------------------------- */

.plan-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 16px 22px;
  background: linear-gradient(180deg, transparent, rgba(4, 6, 14, 0.55) 55%);
}

.plan-ctrl {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(201, 155, 92, 0.45);
  border-radius: 50%;
  background: rgba(10, 15, 35, 0.55);
  color: var(--story-cream);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, filter 0.2s ease;
}

.plan-ctrl svg {
  width: 17px;
  height: 17px;
}

.plan-ctrl:hover {
  border-color: var(--gold-hi);
  color: var(--gold-hi);
}

.plan-play {
  width: 46px;
  height: 46px;
  border-color: var(--btn-bevel);
  background: linear-gradient(180deg, var(--btn-gold-top), var(--btn-gold-bottom));
  color: var(--btn-text-cream);
}

.plan-play:hover {
  color: var(--btn-text-cream);
  border-color: var(--btn-bevel);
  filter: brightness(1.12);
}

.plan-play .ico-play {
  display: none;
}

.plan-frame.is-paused .plan-play .ico-play {
  display: block;
}

.plan-frame.is-paused .plan-play .ico-pause {
  display: none;
}

.plan-count {
  position: absolute;
  right: 16px;
  bottom: 33px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: rgba(240, 230, 210, 0.45);
}

.plan-count b {
  font-weight: 600;
  color: var(--gold-hi);
}

.plan-count i {
  font-style: normal;
}

/* Pause freezes the picture, like a paused film */
.plan-frame.is-paused .plan-stage *,
.plan-frame.is-paused .plan-bg-glow {
  animation-play-state: paused !important;
}

.plan-frame.is-last .plan-controls .js-plan-next {
  opacity: 0.3;
  pointer-events: none;
}

/* --- Real footage, when it arrives -------------------------------------- */

.plan-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--story-ink);
}

.plan-frame.has-video .plan-seg + .plan-seg,
.plan-frame.has-video .plan-count,
.plan-frame.has-video .plan-chapter {
  display: none;
}

/* --- Entrance motion ------------------------------------------------------ */

.plan-slide .p-rise,
.plan-slide .p-pop,
.plan-slide .p-tile,
.plan-slide .p-slide,
.plan-slide .p-dove,
.plan-slide .p-grow {
  opacity: 0;
}

.plan-slide.is-active .p-rise {
  animation: storyRise 0.9s cubic-bezier(0.16, 0.9, 0.3, 1) var(--d, 0s) both;
}

.plan-slide.is-active .p-pop {
  animation: storyPop 0.8s cubic-bezier(0.16, 0.9, 0.3, 1) var(--d, 0s) both;
}

.plan-slide.is-active .p-tile {
  animation: storyTile 0.9s cubic-bezier(0.16, 0.9, 0.3, 1) var(--d, 0s) both;
}

.plan-slide.is-active .p-slide {
  animation: planSlide 0.85s cubic-bezier(0.16, 0.9, 0.3, 1) var(--d, 0s) both;
}

.plan-slide.is-active .p-dove {
  animation: storyDoveLand 1.5s cubic-bezier(0.16, 0.9, 0.3, 1) both;
}

.plan-slide.is-active .p-grow {
  animation: planGrow 1.2s ease-out var(--d, 0s) both;
}

@keyframes planLift {
  from { opacity: 0; transform: translateY(26px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

@keyframes planSlide {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: none; }
}

@keyframes planGrow {
  from { width: 0; opacity: 0; }
  to   { width: 120px; opacity: 1; }
}

@keyframes planLine {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* Reduced motion: chapters simply appear, and the player still
   advances on its own. */
@media (prefers-reduced-motion: reduce) {

  .plan-frame,
  .plan-slide *,
  .plan-slide.is-active * {
    animation: none !important;
  }

  .plan-slide .p-rise,
  .plan-slide .p-pop,
  .plan-slide .p-tile,
  .plan-slide .p-slide,
  .plan-slide .p-dove,
  .plan-slide .p-grow {
    opacity: 1;
    transform: none;
  }

  .plan-rule {
    width: 120px;
  }
}

/* Phones: a reel belongs edge to edge. The card drops its frame and
   fills the screen, which also gives the swipe gestures the whole
   surface to work with. */
@media (max-width: 600px) {

  .plan-frame {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    aspect-ratio: auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .plan-frame::after {
    border-radius: 0;
  }

  .plan-progress {
    padding-top: 16px;
  }

  .plan-topbar {
    top: 30px;
  }

  .plan-body {
    padding: 88px 26px 104px;
  }

  .plan-controls {
    padding-bottom: 28px;
  }

  .plan-count {
    bottom: 39px;
  }
}

/* Short-but-wide viewports (a laptop in a small window, a phone in
   landscape): the card shrinks by height, so ease the padding and
   type back with it. */
@media (max-height: 640px) {

  .plan-body {
    padding: 62px 18px 76px;
  }

  .plan-title {
    font-size: 34px;
  }

  .plan-h {
    font-size: 24px;
  }

  .plan-h-sm {
    font-size: 21px;
  }

  .plan-lead {
    font-size: 15px;
  }

  .plan-mark {
    width: 54px;
  }

  .plan-dove {
    width: 52px;
  }

  .plan-stats {
    gap: 13px;
    margin-top: 16px;
  }

  .plan-stat b {
    font-size: 32px;
    min-width: 50px;
  }

  .plan-figure img {
    height: 130px;
  }

  .plan-tile img {
    height: 54px;
  }

  .plan-cell {
    padding: 8px 6px;
  }

  .plan-cell img {
    width: 30px;
    height: 30px;
  }

  .plan-list li {
    padding: 7px 0;
  }
}

/* ============================================================
   SECTION 7 — UPCOMING EVENTS
   A dark band on assets/events-section-bg.png, sitting directly
   under the Join banner (which uses the same artwork). The two
   are kept apart by a gold hairline, a different overlay ramp,
   and the fact that this one is a full content section rather
   than a 213px strip.
   All of the section's content is rendered by the events script
   in index.html from the JUC_EVENTS array.
   ============================================================ */

:root {
  --s7-navy: #100F2A;                       /* flat ground below the artwork —
                                               same navy as the site footer */
  --s7-panel: rgba(16, 15, 42, 0.62);       /* card / panel fill */
  --s7-panel-soft: rgba(196, 146, 63, 0.06);/* presenter + chip tint */
  --s7-line: rgba(196, 146, 63, 0.26);      /* gold hairline borders */
  --s7-title: #F2ECE0;                      /* headings on navy */
  --s7-body: #C7C4D2;                       /* paragraph text */
  --s7-label: #C0965C;                      /* small gold labels */
}

.events {
  position: relative;
  isolation: isolate;
  border-top: 1px solid var(--s7-line);
  background-color: var(--s7-navy);
  padding: 56px 0 66px;
}

/* events-section-bg.png is 1672×941 (16:9) and the section is far
   taller than that, so `cover` would blow the artwork up several
   times over. Instead it is pinned full-width at the top at its
   own aspect ratio and dissolved into the flat navy underneath. */
.events::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  aspect-ratio: 1672 / 941;
  background:
    linear-gradient(180deg,
      rgba(16, 15, 42, 0.56) 0%,
      rgba(16, 15, 42, 0.72) 55%,
      var(--s7-navy) 100%),
    url("assets/events-section-bg.png") center / cover no-repeat;
}

/* Same treatment as .pathways-heading, re-inked for a dark ground */
.events-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 29px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--s7-title);
}

.events-intro {
  max-width: 820px;
  margin: 22px auto 0;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  line-height: 27px;
  letter-spacing: 0.01em;
  color: var(--s7-body);
}

.events-intro + .events-intro {
  margin-top: 13px;
}

.events-body {
  margin-top: 38px;
}

/* No-JS / no-events fallback */
/* Shown in place of the card grid when JUC_EVENTS is empty: the
   section offers to write when there is news rather than showing
   an apology. */
.ev-empty {
  max-width: 640px;
  margin: 0 auto;
  padding: 34px 30px 32px;
  border: 1px solid var(--s7-line);
  border-radius: 14px;
  background: var(--s7-panel);
  text-align: center;
  font-size: 15px;
  line-height: 26px;
  color: var(--s7-body);
}

.ev-empty-lead {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.3;
  color: var(--s7-title);
}

.ev-empty-text {
  max-width: 48ch;
  margin: 12px auto 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 25px;
}

.ev-empty .btn-primary {
  height: 47px;
  margin-top: 22px;
  border-radius: 4px;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
}

.ev-empty a:not(.btn) {
  color: var(--gold-hi);
  border-bottom: 1px solid var(--s7-line);
}

/* --- Three-column grid of event cards ------------------------- */

/* minmax(0, …) rather than 1fr so a long unbroken word shrinks the
   text instead of widening the column past the grid. */
.ev-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  max-width: 1140px;
  margin: 0 auto;
}

/* Column flex so the CTA can be pinned to the bottom of every
   card, keeping the three buttons on one line across the row. */
.ev-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--s7-line);
  border-radius: 16px;
  background: var(--s7-panel);
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.ev-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}

.ev-media-wrap {
  position: relative;
  flex-shrink: 0;
}

.ev-media {
  aspect-ratio: 16 / 9;
  background: var(--s7-navy);
}

/* Fills the 16:9 frame edge to edge; whatever the photo's own
   ratio, the overflow is trimmed evenly and the subject stays
   centred. */
.ev-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Stands in until the client supplies a photo for the event */
.ev-media-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--s7-line);
  background:
    repeating-linear-gradient(135deg,
      rgba(196, 146, 63, 0.05) 0 12px,
      rgba(196, 146, 63, 0) 12px 24px),
    #0A0E25;
}

.ev-media-empty span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s7-label);
}

/* Date chip overhangs the photo's lower-left corner. The fill is
   OPAQUE navy, not the 6% gold tint used elsewhere — over a photo
   a translucent chip leaves the numerals unreadable. */
.ev-datechip {
  position: absolute;
  left: 18px;
  bottom: -18px;
  width: 70px;
  padding: 10px 0 9px;
  border: 1px solid var(--gold);
  border-radius: 10px;
  background: linear-gradient(180deg, #131836 0%, #0A0E26 100%);
  box-shadow: 0 8px 20px rgba(3, 5, 20, 0.7);
  text-align: center;
}

.ev-datechip b {
  display: block;
  font-family: var(--font-serif);
  font-size: 25px;
  line-height: 1;
  color: var(--gold-hi);
}

.ev-datechip span {
  display: block;
  margin-top: 4px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s7-title);
}

.ev-datechip i {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 10px;
  color: var(--s7-body);
}

.ev-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 32px 26px 28px;
}

/* Titles, blurbs and host names are held to a fixed number of
   lines so the divider, the blurb and the CTA start at the same
   height in all three cards. Anything longer is clipped rather
   than allowed to push one card's rows out of step — see the
   length note above JUC_EVENTS in index.html. */
.ev-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ev-title {
  -webkit-line-clamp: 2;
  min-height: 2.4em;          /* 2 lines at line-height 1.2 */
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--s7-title);
}

.ev-subtitle {
  -webkit-line-clamp: 1;
  min-height: 1.3em;
  margin-top: 6px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.3;
  color: var(--gold-hi);
}

/* --- Date + location ----------------------------------------- */

/* Two lines of when + up to two of where = a 4-line well, so the
   rules above and below it sit level across the row. */
.ev-factlist {
  min-width: 0;
  min-height: 90px;
  margin-top: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--s7-line);
  border-bottom: 1px solid var(--s7-line);
}

.ev-fact {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 21px;
  color: var(--s7-body);
}

.ev-fact + .ev-fact {
  margin-top: 8px;
}

/* Shared by every gold outline glyph in the section */
.ev-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--gold);
}

.ev-fact .ev-icon {
  margin-top: 2px;
}

/* --- Blurb + host -------------------------------------------- */

.ev-desc {
  -webkit-line-clamp: 4;
  min-height: 96px;           /* 4 lines at line-height 24px */
  margin-top: 16px;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.01em;
  color: var(--s7-body);
}

.ev-host {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--s7-title);
}

.ev-host-name {
  -webkit-line-clamp: 2;
  min-height: 2.7em;          /* 2 lines at line-height 1.35 */
}

.ev-host-label {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s7-label);
}

/* Absorbs the leftover height so the CTA sits at the foot of every
   card — three buttons on one line whatever the blurbs run to. */
.ev-gap {
  flex: 1;
  min-height: 26px;
}

.ev-cta {
  height: 45px;
  flex-shrink: 0;
  padding: 0 22px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
}

/* ============================================================
   SMALL LAPTOP / TABLET LANDSCAPE (max-width: 1024px)
   Only the events grid needs a stop here: below roughly 1050px
   three columns leave the cards too narrow for a two-line title.
   ============================================================ */

@media (max-width: 1024px) {

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

  /* An odd card left alone on the last row is centred rather than
     left hanging in the first column. */
  .ev-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 13px);
    margin: 0 auto;
  }

}

/* ============================================================
   MOBILE — TABLET / PHONE (max-width: 768px)
   Bar the events grid stop above, all responsive overrides live
   inside this block and the 480px block below. Desktop rules
   are untouched.
   ============================================================ */

@media (max-width: 768px) {

  /* ---- Global safety ---------------------------------------- */

  html,
  body {
    overflow-x: hidden;
  }

  .shell {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* ---- Header / nav ------------------------------------------ */

  .site-header {
    padding-top: 14px;
  }

  .header-inner {
    align-items: center;
  }

  .logo {
    width: 56px;
    height: 56px;
  }

  .brand-text {
    margin-left: 14px;
    margin-top: 0;
  }

  .brand-name {
    font-size: 20px;
  }

  .brand-sub {
    font-size: 13px;
    margin-top: 5px;
  }

  .brand-tagline {
    font-size: 9px;
    line-height: 14px;
    margin-top: 6px;
  }

  /* The nav collapse itself now lives in its own (wider) block
     below — see "HEADER NAV COLLAPSE (max-width: 1104px)". */

  /* ---- Hero --------------------------------------------------- */

  .hero {
    height: auto;
    min-height: 560px;
    background-position: 60% 25%;
  }

  /* Stronger, more even overlay so white text reads over the
     portrait crop */
  .hero::before {
    background: linear-gradient(
      180deg,
      rgba(9, 11, 26, 0.55) 0%,
      rgba(9, 11, 26, 0.38) 55%,
      rgba(9, 11, 26, 0.55) 100%
    );
  }

  /* Scaled 56px emblem reaches ~88px down; keep a clear gap
     below it before the heading starts */
  .hero-content {
    padding-top: 140px;
    padding-bottom: 56px;
  }

  .hero-heading {
    font-size: 42px;
    line-height: 48px;
  }

  .hero-sub {
    max-width: 100%;
    font-size: 15px;
    line-height: 26px;
  }

  .hero-quote {
    max-width: 100%;
    margin-top: 22px;
    margin-bottom: 30px;
    text-align: center;
  }

  /* Scales with the viewport so the quote always lands as a clean
     1–2 line centered block; balance splits the two lines evenly
     instead of leaving a short widow line */
  .hero-quote-text {
    font-size: clamp(15px, 4.6vw, 18px);
    line-height: 1.5;
    text-wrap: balance;
  }

  /* The footer's decorative .qmark sizing (46px/38px, line-height 1)
     leaks onto the hero quote marks and makes them wrap onto their
     own lines on narrow screens; flow them inline with the text */
  .hero-quote-text .qmark {
    font-size: 1em;
    line-height: inherit;
    font-style: inherit;
    font-weight: inherit;
    vertical-align: baseline;
  }

  .hero-quote-cite {
    display: block;
    margin-top: 8px;
    text-align: center;
  }

  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-top: 26px;
  }

  .hero-ctas .btn {
    width: 100%;
  }

  /* ---- Section 2: seven-icon strip ---------------------------- */

  .pillars {
    padding: 28px 20px 40px;
    background-size: cover;
  }

  .pillars-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 16px;
  }

  /* 7th item (Global Chapters) centers across both columns */
  .pillar:last-child {
    grid-column: 1 / -1;
  }

  .pillar-title {
    white-space: normal;
    font-size: 18px;
  }

  .pillar-desc {
    font-size: 13px;
    line-height: 20px;
  }

  /* ---- Section 3: institutes cards ----------------------------- */

  .institutes {
    padding: 34px 0 32px;
  }

  .institutes-heading {
    font-size: 22px;
    gap: 12px;
  }

  .heading-orn {
    width: 36px;
  }

  .institutes-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 14px;
    margin-top: 22px;
  }

  .institute-card {
    height: auto;
    padding-bottom: 22px;
  }

  .card-media {
    height: 160px;
  }

  .card-title {
    font-size: 19px;
  }

  .card-desc {
    font-size: 14px;
    line-height: 21px;
  }

  .institutes-viewall {
    margin-top: 26px;
    font-size: 16px;
  }

  /* ---- Section 4: future-gathering banner ---------------------- */

  .future-banner {
    height: auto;
    background-position: 66% 50%;
  }

  /* Full-bleed navy wash: portrait crop puts text over the campus
     image, so the overlay must cover the whole banner */
  .future-banner::before {
    background: linear-gradient(
      180deg,
      rgba(13, 7, 35, 0.66) 0%,
      rgba(13, 7, 35, 0.55) 100%
    );
  }

  .future-inner {
    padding: 52px 20px 56px;
  }

  .future-heading {
    font-size: 32px;
    line-height: 40px;
  }

  .future-sub {
    max-width: 100%;
    font-size: 15px;
    line-height: 25px;
    margin-top: 18px;
  }

  /* ---- Section 5: five pathways --------------------------------- */

  .pathways {
    padding: 32px 0 36px;
  }

  .pathways-heading {
    font-size: 22px;
    gap: 12px;
  }

  .pathways-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 34px 16px;
    margin-top: 26px;
  }

  /* Vertical gold dividers make no sense in a stacked grid */
  .pathway-divider {
    display: none;
  }

  /* 5th item centers across both columns */
  .pathway:last-child {
    grid-column: 1 / -1;
  }

  /* ---- Section 6: join-a-movement dove banner ------------------- */

  .join-banner {
    height: auto;
    /* Even overlay keeps the gold-network texture subtly visible
       across the whole stacked banner */
    background:
      linear-gradient(rgba(7, 3, 26, 0.78), rgba(7, 3, 26, 0.78)),
      var(--s6-navy) url("assets/section6-bg.png") center / cover no-repeat;
  }

  .join-inner {
    flex-direction: column;
    height: auto;
    padding-top: 34px;
    padding-bottom: 42px;
    text-align: center;
  }

  .join-dove {
    width: 160px;
    height: 160px;
    margin: 0 auto;
  }

  .join-copy {
    margin-left: 0;
    margin-top: 4px;
    flex-shrink: 1;
  }

  .join-heading {
    white-space: normal;
    font-size: 27px;
    line-height: 1.2;
  }

  .join-desc {
    max-width: 440px;
    margin: 14px auto 0;
    font-size: 15px;
    line-height: 24px;
  }

  .btn-member {
    width: 100%;
    max-width: 293px;
    height: 54px;
    margin: 26px auto 0;
  }

  /* ---- Section 7: upcoming events -------------------------------- */

  .events {
    padding: 40px 0 46px;
  }

  .events-heading {
    font-size: 22px;
    gap: 12px;
  }

  .events-intro {
    max-width: 100%;
    padding: 0 4px;
    font-size: 14px;
    line-height: 24px;
  }

  .events-body {
    margin-top: 28px;
  }

  .ev-card-body {
    padding: 30px 22px 26px;
  }

  .ev-title {
    font-size: 21px;
  }

  .ev-subtitle {
    font-size: 14.5px;
  }

  /* Columns are narrow enough here that a reserved line count would
     start clipping titles, so every card sizes to its own text from
     this width down. The cards stay level all the same: the grid
     equalises their height and .ev-gap keeps the CTAs on one line. */
  .ev-clamp {
    display: block;
    overflow: visible;
  }

  .ev-title,
  .ev-subtitle,
  .ev-desc,
  .ev-host-name,
  .ev-factlist {
    min-height: 0;
  }

  /* Full-width CTA, matching the mobile treatment of .btn-member */
  .ev-cta {
    display: flex;
    width: 100%;
  }

  /* ---- Section 8: support our mission --------------------------- */

  .support-mission {
    padding: 32px 0 38px;
  }

  .support-heading {
    font-size: 22px;
    gap: 12px;
  }

  .support-text {
    max-width: 100%;
    padding: 0 4px;
    font-size: 14px;
    line-height: 24px;
  }

  /* ---- Footer ---------------------------------------------------- */

  .footer-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 16px;
    height: auto;
    padding-top: 32px;
    padding-bottom: 12px;
  }

  .footer-vline {
    display: none;
  }

  .fcol-brand,
  .fcol-center,
  .fcol-resources,
  .fcol-involved {
    width: auto;
  }

  .fcol-brand {
    grid-column: 1 / -1;
  }

  .fcol-quote {
    grid-column: 1 / -1;
    padding-left: 0;
    padding-top: 10px;
    padding-bottom: 6px;
    text-align: center;
  }

  .footer-brand {
    padding-left: 16px;
  }

  .footer-logo {
    width: 64px;
    height: 64px;
  }

  .footer-brand-text {
    margin-left: 14px;
    margin-top: 2px;
  }

  .footer-brand-name {
    font-size: 24px;
  }

  .footer-brand-sub {
    font-size: 15px;
  }

  .footer-brand-tagline {
    font-size: 10px;
    line-height: 15px;
  }

  .footer-social {
    padding-left: 0;
    margin-top: 22px;
    flex-wrap: wrap;
  }

  .fcol-links {
    padding-top: 0;
  }

  .fcol-center,
  .fcol-resources,
  .fcol-involved {
    padding-left: 0;
  }

  /* Comfortable tap pitch on the link lists */
  .fcol-list li + li {
    margin-top: 12px;
  }

  .fcol-list a {
    white-space: normal;
  }

  /* Wide enough (and small enough) that the sentence wraps once at
     most; balance splits the two lines evenly */
  .footer-quote {
    max-width: 30ch;
    margin: 0 auto;
    padding-left: 0;
    font-size: clamp(18px, 5vw, 22px);
    line-height: 1.5;
    text-wrap: balance;
  }

  .qmark {
    font-size: 34px;
  }

  /* Quote marks flow inline with the centered text; same
     line-height-0 + downward nudge the desktop close mark uses,
     so neither mark inflates or floats off its line */
  .qmark-open {
    position: relative;
    top: 7px;
    line-height: 0;
    margin-right: 6px;
  }

  .qmark-close {
    top: 7px;
    margin-left: 6px;
  }

  .footer-quote-attr {
    margin-top: 14px;
  }

  /* Newsletter: copy above, form below, both centered */
  .footer-news {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding-left: 20px;   /* back to the shell's own gutter */
    padding-top: 24px;
    padding-bottom: 24px;
    text-align: center;
  }

  .fnews-heading {
    font-size: 21px;
  }

  .fnews-text {
    max-width: 40ch;
    margin: 6px auto 0;
    font-size: 13.5px;
    line-height: 21px;
  }

  .fnews-form {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }

  /* The credit stays a single row on every phone: mark on the left,
     one unbroken line of words on the right. It cannot do that at a
     fixed size — the words alone need ~440px at the desktop size and
     a phone has 300 — so mark, gap and type are all sized in vw and
     shrink together. The clamp ceilings are the tablet sizes this
     block used to set outright, so a wide tablet still looks exactly
     as it did; the floors only ever engage below about 320px.

     nowrap is the whole point of the rule. Without it the line broke
     into three — mark, then two ragged rows of words — which is what
     this replaced. */
  .footer-sponsor {
    padding: 22px 16px;
  }

  .fsponsor {
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(8px, 2.6vw, 16px);
    text-align: left;
  }

  .fsponsor-logo {
    width: clamp(32px, 10.4vw, 56px);
    height: clamp(32px, 10.4vw, 56px);
  }

  .fsponsor-text {
    font-size: clamp(8.8px, 2.78vw, 15px);
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  .fsponsor-name {
    letter-spacing: 0.015em;
  }

  /* Bottom bar: copyright above, legal links below */
  .footer-bottom {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    height: auto;
    padding: 20px 20px 26px;
    text-align: center;
  }

  /* "Non-Discrimination Policy" is long enough to overflow a small
     phone beside "Privacy Policy", so the pair wraps and the
     divider between them drops out once they stack. */
  .footer-legal {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
  }

  /* ---- Membership enquiry modal -------------------------------- */

  .member-overlay {
    padding: 16px;
    align-items: flex-start;
  }

  .member-modal {
    padding: 38px 24px 30px;
    max-height: calc(100vh - 32px);
  }

  .member-title {
    font-size: 28px;
  }

  /* Single column: side-by-side 47px fields get too cramped to
     read their labels below this width. */
  .mf-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .member-done-title {
    font-size: 26px;
  }

  /* ---- Watch Our Story lightbox -------------------------------- */

  .story-progress {
    gap: 4px;
    padding: 12px 16px 0;
  }

  /* Chapter names don't fit next to a 3px segment on a phone */
  .story-seg em {
    display: none;
  }

  .story-topbar {
    top: 26px;
    padding: 0 16px;
    justify-content: flex-end;
  }

  .story-kicker {
    display: none;
  }

  .story-slide {
    padding: 68px 0 92px;
  }

  .story-center,
  .story-copy {
    width: 100%;
    padding: 0 20px;
  }

  /* Photo chapters read better centered once the copy column
     is as wide as the frame */
  .story-copy {
    text-align: center;
  }

  .story-copy .story-p {
    max-width: 100%;
  }

  .story-veil {
    background:
      linear-gradient(180deg, rgba(5, 7, 15, 0.75) 0%, rgba(5, 7, 15, 0.55) 45%, rgba(5, 7, 15, 0.9) 100%);
  }

  .story-brand {
    letter-spacing: 0.10em;
  }

  .story-icons {
    gap: 20px 10px;
    margin-top: 28px;
  }

  .story-icons-7 {
    grid-template-columns: repeat(4, 1fr);
  }

  .story-icons-5 {
    grid-template-columns: repeat(3, 1fr);
  }

  .story-icon span {
    margin-top: 8px;
    font-size: 9px;
    letter-spacing: 0.06em;
  }

  .story-tiles {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 26px;
  }

  .story-tile img {
    height: 120px;
  }

  .story-tile figcaption {
    padding: 18px 4px 7px;
    font-size: 8px;
    letter-spacing: 0.04em;
  }

  .story-end-ctas {
    flex-direction: column;
    gap: 10px;
    margin-top: 26px;
  }

  .story-end-ctas .btn {
    width: 100%;
    max-width: 280px;
  }

  .story-controls {
    gap: 12px;
    padding: 0 16px 22px;
  }

  .story-count {
    right: 16px;
    bottom: 34px;
    font-size: 9.5px;
  }

}

/* ============================================================
   HEADER NAV COLLAPSE (max-width: 1104px)

   The desktop header — 88px emblem, eight nav items at a 29px
   gap, Donate pill and search — needs about 1305px of room. It
   used to stay on screen all the way down to 769px, which made
   every page scroll sideways on tablets and small laptops.

   These are the same rules that used to sit in the 768px block,
   moved up to the width where the header actually stops fitting.
   Phones are unaffected (768 is inside 1104); the 1105–1304px
   band is handled by the compact tier below.
   ============================================================ */

@media (max-width: 1104px) {

  /* Desktop pill button + search hidden; Support lives in the
     dropdown (cloned .nav-support) */
  .header-actions {
    display: none;
  }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
  }

  .nav-toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 1px;
    background: var(--text-nav);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .site-header.nav-open .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .site-header.nav-open .nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }

  .site-header.nav-open .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Nav becomes a full-width dropdown under the header bar */
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 12px 0 0;
    padding: 6px 0 18px;
    white-space: normal;
    background: rgba(9, 12, 30, 0.97);
    border-top: 1px solid rgba(196, 146, 63, 0.4);
    border-bottom: 1px solid rgba(196, 146, 63, 0.4);
    max-height: calc(100vh - 96px);
    overflow-y: auto;
  }

  .site-header.nav-open .site-nav {
    display: flex;
  }

  .site-nav a {
    padding: 0 24px;
    font-size: 13px;
    line-height: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .site-header .site-nav .nav-support {
    display: inline-flex;
    align-self: flex-start;
    height: 44px;
    margin: 16px 24px 0;
    padding: 0 22px;
    font-size: 11.5px;
    line-height: 1;
    border-bottom: 1px solid var(--btn-bevel);
  }

}

/* ============================================================
   HEADER — COMPACT DESKTOP (1105px – 1304px)

   Wide enough to keep the full horizontal nav, too narrow for it
   at full size. Tightening the emblem, the tagline, the nav gap
   and the shell padding buys back the ~200px needed. At 1305px
   and up nothing here applies and the approved header is intact.
   ============================================================ */

@media (min-width: 1105px) and (max-width: 1304px) {

  .header-inner {
    padding-left: 28px;
    padding-right: 28px;
  }

  .logo {
    width: 68px;
    height: 68px;
  }

  .brand-text {
    margin-left: 14px;
  }

  /* The two-line tagline is the widest part of the brand block */
  .brand-tagline {
    display: none;
  }

  .site-nav {
    gap: 15px;
  }

  .site-nav a {
    font-size: 11.5px;
    letter-spacing: 0;
  }

  .header-actions {
    margin-left: 12px;
  }

}

/* ============================================================
   FOOTER — TABLET / SMALL LAPTOP (769px – 1248px)

   The desktop footer is a five-column flex row of fixed widths
   (404 + 180 + 156 + 244 + the quote) that bottoms out at about
   1249px. Below that it used to push past the viewport and give
   every page a horizontal scrollbar.

   Here it becomes the same stacked arrangement the phone layout
   uses — brand across the top, the three link lists in a row,
   the quote centred underneath — without inheriting any of the
   phone type sizes. At 1249px and up the original row returns.
   ============================================================ */

@media (min-width: 769px) and (max-width: 1248px) {

  .footer-top {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px 24px;
    height: auto;
    padding-top: 32px;
    padding-bottom: 26px;
  }

  .footer-vline {
    display: none;
  }

  .fcol-brand {
    grid-column: 1 / -1;
    width: auto;
  }

  .fcol-center,
  .fcol-resources,
  .fcol-involved {
    width: auto;
    padding-left: 0;
  }

  .fcol-quote {
    grid-column: 1 / -1;
    width: auto;
    padding-left: 0;
    padding-top: 4px;
    text-align: center;
  }

  /* The quote keeps its 300px measure but now centres in the row
     instead of hanging off the left edge of a full-width column. */
  .footer-quote {
    margin: 0 auto;
    padding-left: 0;
  }

  /* The bottom bar's asymmetric desktop inset is tuned for 1440 */
  .footer-bottom {
    padding-left: 48px;
    padding-right: 48px;
  }

}

/* ============================================================
   MOBILE — SMALL PHONES (max-width: 480px)
   Refinements on top of the 768px block.
   ============================================================ */

@media (max-width: 480px) {

  /* ---- Header ------------------------------------------------- */

  .logo {
    width: 48px;
    height: 48px;
  }

  .brand-name {
    font-size: 17px;
  }

  .brand-sub {
    font-size: 11px;
  }

  .brand-tagline {
    display: none;
  }

  /* ---- Hero ---------------------------------------------------- */

  .hero {
    min-height: 520px;
  }

  /* Scaled 48px emblem reaches ~78px down; keep a clear gap
     below it before the heading starts */
  .hero-content {
    padding-top: 128px;
    padding-bottom: 48px;
  }

  .hero-heading {
    font-size: 34px;
    line-height: 40px;
  }

  .hero-quote-text {
    font-size: clamp(14px, 4.5vw, 17px);
    line-height: 1.5;
  }

  .hero-quote-cite {
    font-size: 11px;
  }

  /* ---- Section headings: drop ornaments, keep them clean ------- */

  .institutes-heading,
  .pathways-heading {
    font-size: 20px;
    line-height: 1.3;
    text-align: center;
  }

  .heading-orn {
    display: none;
  }

  /* ---- Section 2 ------------------------------------------------ */

  .pillars-row {
    gap: 28px 12px;
  }

  /* ---- Section 3: single column --------------------------------- */

  .institutes-row {
    grid-template-columns: 1fr;
  }

  .card-media {
    height: 190px;
  }

  /* ---- Section 4 ------------------------------------------------- */

  .future-heading {
    font-size: 28px;
    line-height: 36px;
  }

  /* ---- Section 5: single column ---------------------------------- */

  .pathways-row {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  /* ---- Section 7: upcoming events ---------------------------------- */

  .events-heading {
    font-size: 20px;
    line-height: 1.3;
    text-align: center;
  }

  /* One card per row on the phone */
  .ev-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .ev-card:last-child:nth-child(odd) {
    grid-column: auto;
    width: auto;
  }

  .ev-card-body {
    padding: 28px 18px 22px;
  }

  .ev-title {
    font-size: 22px;
  }

  .ev-subtitle {
    font-size: 15px;
  }

  /* ---- Section 8: support our mission ----------------------------- */

  .support-heading {
    font-size: 20px;
    line-height: 1.3;
    text-align: center;
  }

  /* ---- Section 6 -------------------------------------------------- */

  .join-dove {
    width: 140px;
    height: 140px;
  }

  .join-heading {
    font-size: 24px;
  }

  /* ---- Footer ------------------------------------------------------ */

  .footer-brand {
    padding-left: 10px;
  }

  .footer-quote {
    font-size: clamp(17px, 5vw, 20px);
    line-height: 1.5;
  }

  /* Field and button stack — a 26px-padded button plus a usable
     field no longer fit side by side at this width */
  .fnews-row {
    flex-direction: column;
  }

  .fnews-btn {
    width: 100%;
  }

  /* Narrow phones. The row still holds, but the side padding is
     pared back to hand those pixels to the words, which are the part
     running out of room — the band keeps a clear margin from the
     edge of the screen either way. */
  .footer-sponsor {
    padding-left: 12px;
    padding-right: 12px;
  }

  .qmark {
    font-size: 28px;
  }

  .qmark-open,
  .qmark-close {
    top: 6px;
  }

  /* ---- Membership enquiry modal -------------------------------- */

  .member-modal {
    padding: 34px 18px 26px;
  }

  .member-title {
    font-size: 24px;
  }

  .member-sub {
    font-size: 12.5px;
  }

  .mf-event-note {
    padding: 6px 13px;
    font-size: 11.5px;
    line-height: 17px;
  }

  /* iOS zooms any input whose text is under 16px on focus, which
     leaves the modal off-centre; hold the fields at 16px. */
  .mf-input {
    font-size: 16px;
  }

  .member-done-title {
    font-size: 23px;
  }

  .member-done-close {
    width: 100%;
  }

  /* ---- Watch Our Story lightbox -------------------------------- */

  .story-icons-7 {
    grid-template-columns: repeat(3, 1fr);
  }

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

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

  .story-tile img {
    height: 104px;
  }

  .story-quote {
    line-height: 1.5;
  }

  .story-p {
    margin-top: 14px;
    line-height: 1.65;
  }

}


/* ============================================================
   INFO POP-UPS

   One modal serves every "tell me more" pop-up on the site — the
   seven categories, the six institutes, the five pathways, the
   footer items and the event families. Its shell is injected by
   info.js; the copy lives in the JUC_INFO registry in that file.

   Deliberately the same object as the membership modal: same
   navy gradient, same gold hairline, same rise-in. The difference
   is that this one is centered and leads with its artwork.
   ============================================================ */

.info-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 98;                 /* under .member-overlay (100), which it hands off to */
  background: rgba(7, 9, 24, 0.78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.info-overlay.is-open {
  display: flex;
  animation: mf-fade 0.22s ease both;
}

.info-modal {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 40px 44px 38px;
  border: 1px solid var(--btn-bevel);
  border-radius: 4px;
  background: linear-gradient(180deg, #13162B, #0A0F23);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  text-align: center;
  animation: mf-rise 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}

.info-modal::-webkit-scrollbar {
  width: 8px;
}

.info-modal::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(196, 146, 63, 0.5);
}

.info-close {
  position: absolute;
  top: 10px;
  right: 14px;
  border: none;
  background: none;
  color: var(--gold);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
}

.info-close:hover {
  color: var(--gold-hi);
}

/* ---- Artwork -------------------------------------------------
   Three shapes. Icons keep the class they wear in their own
   section (.icon-learn, .emblem-moral, .pw-culture …) so the
   per-file ring normalization already in this stylesheet lines
   them up here exactly as it does on the page. */

.info-media {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.info-media-icon {
  height: 84px;
}

.info-media-icon img {
  height: auto;
}

/* Two pieces of brand art that appear only in pop-ups, normalized
   to the same 84px optical size as the section icons above. */
.icon-brandmark { width: 84px; }
.icon-dove      { width: 96px; }

/* The Seventy Nations seal is drawn on a square canvas with a wide
   transparent margin, so at 84px the emblem itself would read far
   smaller than the icons around it. The wider box restores the
   optical match and .info-media-seal grows to hold it. */
.info-media-seal { height: 118px; }
.icon-seventy    { width: 118px; }

/* The pathway illustrations bleed past a baseline rather than
   sitting in a ring. Reproducing Section 5's 66px box lets each
   one keep the .pw-* height and overhang it is drawn for; the
   generous bottom margin clears the deepest of them. */
.info-media-pathway {
  height: 66px;
  align-items: flex-end;
  overflow: visible;
  margin-bottom: 42px;
}

.info-media-pathway img {
  width: auto;
  object-fit: contain;
}

.info-media-glyph {
  height: 84px;
}

.info-glyph {
  width: 58px;
  height: 58px;
  padding: 13px;
  border: 1px solid var(--ghost-border);
  border-radius: 50%;
  background: rgba(196, 146, 63, 0.10);
  color: var(--gold);
}

/* A photo runs edge to edge across the top of the panel, with the
   institute's emblem sitting over its foot — the same composition
   as the Section 3 cards, opened out. */
.info-media-photo {
  display: block;
  margin: -40px -44px 20px;
  height: 210px;
  position: relative;
  overflow: visible;
  border-radius: 3px 3px 0 0;
}

/* Direct child only, so the emblem's own image below keeps the
   per-file width normalization its .emblem-* class gives it. */
.info-media-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The institute photographs are portrait-weighted; biasing the
     crop upward keeps faces and horizons in the band. */
  object-position: 50% 30%;
  border-radius: 3px 3px 0 0;
}

/* Fades the photo into the panel so the emblem and eyebrow sit
   on navy rather than on the image. */
.info-media-photo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 210px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, rgba(10, 15, 35, 0.10) 38%, #0B1027 100%);
}

.info-emblem {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: -40px;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(10, 14, 37, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-emblem img {
  height: auto;
}

/* Clears the emblem, which hangs below the photo band. The class is
   set by info.js rather than using :has(), which is still uneven
   across the browsers this site has to serve. */
.info-media-emblem {
  margin-bottom: 66px;
}

/* ---- Copy ---------------------------------------------------- */

.info-eyebrow {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-hi);
}

.info-title {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 31px;
  line-height: 1.18;
  color: var(--white);
}

.info-body {
  margin-top: 16px;
}

.info-body p {
  font-size: 14px;
  font-weight: 300;
  line-height: 24px;
  color: var(--text-body);
}

.info-body p + p {
  margin-top: 14px;
}

/* ---- Optional player (entry.embed) ---------------------------
   Spotify's frame is dark, so on the panel's own navy it reads as
   part of the pop-up rather than as an outside widget. The gold
   hairline and radius are the panel's, not the player's — the
   frame is inset by 1px so nothing of its own corner shows.
   `hidden` has to be spelled out: display:block below would
   otherwise outrank it. */

.info-embed {
  margin-top: 20px;
  padding: 5px;
  border: 1px solid rgba(196, 146, 63, 0.28);
  border-radius: 6px;
  background: rgba(196, 146, 63, 0.06);
}

.info-embed[hidden] {
  display: none;
}

.info-frame {
  display: block;
  width: 100%;
  height: 152px;
  border: 0;
  border-radius: 4px;
}

.info-frame-note {
  margin-top: 9px;
  padding: 0 6px 3px;
  font-size: 12px;
  font-weight: 300;
  line-height: 19px;
  color: rgba(233, 233, 238, 0.72);   /* --text-body, quieted */
}

/* ---- Optional "Examples" block ------------------------------- */

.info-examples {
  margin-top: 22px;
  padding: 18px 20px 16px;
  border: 1px solid rgba(196, 146, 63, 0.28);
  border-radius: 4px;
  background: rgba(196, 146, 63, 0.06);
  text-align: left;
}

.info-examples-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-hi);
}

.info-list {
  margin-top: 10px;
  columns: 2;
  column-gap: 26px;
  list-style: none;
}

.info-list li {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 22px;
  color: var(--text-body);
  break-inside: avoid;
}

/* Gold diamond marker, the same mark used beside the section
   headings' ornaments. */
.info-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: var(--gold);
}

/* ---- Action button ------------------------------------------- */

.info-cta {
  height: 47px;
  margin-top: 26px;
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  gap: 10px;
}

.info-cta[hidden] {
  display: none;
}

/* ---- Narrow screens ------------------------------------------ */

@media (max-width: 600px) {

  .info-overlay {
    padding: 14px;
  }

  .info-modal {
    padding: 32px 24px 30px;
    max-height: calc(100vh - 28px);
  }

  .info-media-photo {
    margin: -32px -24px 18px;
    height: 172px;
  }

  .info-media-photo::after {
    height: 172px;
  }

  .info-media-emblem {
    margin-bottom: 58px;
  }

  .info-emblem {
    width: 88px;
    height: 88px;
    bottom: -36px;
  }

  .info-title {
    font-size: 25px;
  }

  .info-body p {
    font-size: 13.5px;
    line-height: 23px;
  }

  /* One column of bullets reads better than two hyphenated ones. */
  .info-list {
    columns: 1;
  }

  .info-cta {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {

  .info-overlay.is-open,
  .info-modal {
    animation: none !important;
  }
}

/* ============================================================
   SEARCH

   The header magnifier opens this. There is no server to query,
   so it searches the pop-up registry in info.js — every category,
   institute, pathway, footer subject and event family — plus the
   page's own sections and the standalone pages.

   It drops from the top rather than sitting centred, so the field
   lands close to the magnifier that opened it.
   ============================================================ */

.search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 102;              /* above every other lightbox */
  background: rgba(7, 9, 24, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  justify-content: center;
  align-items: flex-start;
  padding: 92px 24px 24px;
}

.search-overlay.is-open {
  display: flex;
  animation: mf-fade 0.18s ease both;
}

.search-panel {
  width: 100%;
  max-width: 620px;
  border: 1px solid var(--btn-bevel);
  border-radius: 4px;
  background: linear-gradient(180deg, #13162B, #0A0F23);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  animation: search-drop 0.24s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes search-drop {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}

.search-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(196, 146, 63, 0.28);
}

.search-field-icon {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  color: var(--gold);
}

.search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 58px;
  border: none;
  background: none;
  outline: none;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--white);
}

.search-input::placeholder {
  color: rgba(233, 233, 238, 0.45);
}

/* Chrome draws its own clear button over ours in a colour that
   does not belong here. */
.search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.search-cancel {
  flex-shrink: 0;
  padding: 5px 9px;
  border: 1px solid var(--ghost-border);
  border-radius: 3px;
  background: none;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gold-hi);
  cursor: pointer;
  transition: background 0.2s ease;
}

.search-cancel:hover {
  background: rgba(196, 146, 63, 0.14);
}

.search-results {
  max-height: min(52vh, 420px);
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}

.search-results::-webkit-scrollbar {
  width: 8px;
}

.search-results::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(196, 146, 63, 0.5);
}

.search-hit {
  display: block;
  padding: 13px 18px;
  border-left: 2px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.search-hit:hover,
.search-hit:focus {
  outline: none;
  background: rgba(196, 146, 63, 0.10);
  border-left-color: var(--gold);
}

.search-hit-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-hi);
}

.search-hit-hint {
  display: block;
  margin-top: 4px;
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.3;
  color: var(--white);
}

.search-empty {
  padding: 22px 18px 24px;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 22px;
  text-align: center;
  color: var(--text-body);
}

@media (max-width: 600px) {

  .search-overlay {
    padding: 68px 14px 14px;
  }

  .search-field {
    padding: 0 12px;
    gap: 9px;
  }

  .search-input {
    height: 52px;
    font-size: 14px;
  }

  .search-hit-hint {
    font-size: 16.5px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .search-overlay.is-open,
  .search-panel {
    animation: none !important;
  }
}

/* ------------------------------------------------------------
   Search in the mobile dropdown

   Below 1105px the whole .header-actions block is hidden, which
   took the header magnifier with it. info.js inserts a matching
   row into the dropdown; this styles it as one more nav line,
   sitting just above the cloned Support button.
   ------------------------------------------------------------ */

.site-nav .nav-search {
  display: none;
}

@media (max-width: 1104px) {

  .site-header .site-nav .nav-search {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 24px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-nav);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .site-header .site-nav .nav-search:hover {
    color: var(--gold-hi);
  }

  .site-header .site-nav .nav-search svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
  }
}

/* ============================================================
   SECTION 7 — THE THREE FAMILIES OF GATHERING

   Sits under the upcoming-events grid and stays put whether or
   not there are dates on the calendar. Each card opens its
   pop-up (JUC_INFO.ev-arts / ev-voices / ev-journey).
   ============================================================ */

.ev-families {
  margin-top: 56px;
  padding-top: 46px;
  border-top: 1px solid var(--s7-line);
}

.ev-families-heading {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--s7-title);
}

.ev-families-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px;
}

.ev-family {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 26px 28px;
  border: 1px solid var(--s7-line);
  border-radius: 14px;
  background: var(--s7-panel);
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.ev-family:hover {
  transform: translateY(-4px);
  border-color: var(--ghost-border);
  background: rgba(196, 146, 63, 0.07);
}

.ev-family-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: 1px solid var(--s7-line);
  border-radius: 50%;
  background: var(--s7-panel-soft);
  color: var(--gold);
}

.ev-family-glyph svg {
  width: 27px;
  height: 27px;
}

.ev-family-title {
  margin-top: 18px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.25;
  color: var(--s7-title);
  transition: color 0.2s ease;
}

.ev-family:hover .ev-family-title {
  color: var(--gold-hi);
}

.ev-family-kicker {
  margin-top: 9px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s7-label);
}

.ev-family-desc {
  margin-top: 13px;
  font-size: 14px;
  font-weight: 300;
  line-height: 24px;
  color: var(--s7-body);
}

/* Reads as the card's button without being one — the whole card
   is the link. */
.ev-family-more {
  margin-top: auto;
  padding-top: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-hi);
}

.ev-family-more::after {
  content: " →";
  letter-spacing: 0;
}

.ev-families-note {
  margin-top: 26px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 25px;
  text-align: center;
  color: var(--s7-body);
}

.ev-families-note a {
  color: var(--gold-hi);
  border-bottom: 1px solid var(--s7-line);
}

.ev-families-note a:hover {
  border-bottom-color: var(--gold);
}

@media (max-width: 1024px) {

  .ev-families-row {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto;
  }

  .ev-family-more {
    margin-top: 18px;
    padding-top: 0;
  }
}

@media (max-width: 600px) {

  .ev-families {
    margin-top: 40px;
    padding-top: 34px;
  }

  .ev-families-heading {
    font-size: 23px;
  }

  .ev-family {
    padding: 26px 20px 24px;
  }

  .ev-family-title {
    font-size: 19px;
  }

  .ev-empty {
    padding: 28px 20px 26px;
  }

  .ev-empty-lead {
    font-size: 21px;
  }

  .ev-empty .btn-primary {
    width: 100%;
  }
}

/* ============================================================
   EVENT NOTIFICATION FORM

   Borrows the membership modal's shell and field styles; the
   only new thing is the three-way checkbox group.
   ============================================================ */

.nf-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;      /* fieldsets refuse to shrink in a grid otherwise */
}

.nf-fieldset .mf-label {
  padding: 0;
}

.nf-choices {
  display: grid;
  gap: 9px;
}

.nf-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--ghost-border);
  border-radius: 4px;
  background: var(--mf-field-bg);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.nf-choice:hover {
  border-color: var(--gold);
  background: rgba(196, 146, 63, 0.08);
}

/* The real control stays in the accessibility tree and keeps the
   keyboard behaviour; the gold box below is what is drawn. */
.nf-choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.nf-choice-box {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1px solid var(--ghost-border);
  border-radius: 3px;
  background: rgba(10, 15, 35, 0.6);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.nf-choice-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--navy);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg) scale(0.4);
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.nf-choice input:checked ~ .nf-choice-box {
  border-color: var(--gold);
  background: var(--gold);
}

.nf-choice input:checked ~ .nf-choice-box::after {
  opacity: 1;
  transform: rotate(42deg) scale(1);
}

.nf-choice input:focus-visible ~ .nf-choice-box {
  box-shadow: 0 0 0 3px rgba(196, 146, 63, 0.35);
}

.nf-choice-text {
  font-size: 13.5px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-body);
}

.nf-choice-text em {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-style: normal;
  font-weight: 300;
  line-height: 18px;
  color: rgba(233, 233, 238, 0.6);
}

.nf-fieldset.is-invalid .nf-choice {
  border-color: var(--mf-error);
}

@media (max-width: 600px) {

  .nf-choice {
    padding: 11px 12px;
    gap: 10px;
  }

  .nf-choice-text {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .notify-overlay.is-open,
  .notify-modal {
    animation: none !important;
  }
}

/* ============================================================
   SECTION 6 — JOIN BANNER, TABLET / SMALL LAPTOP (769–1160px)

   The desktop banner is a fixed-width row: a 248px dove, a
   nowrap 35px heading, a 293px button and a 179px right margin.
   That needs about 1143px, so between the 768px stacking rule
   and roughly 1143px the button pushed past the viewport and
   gave the whole page a horizontal scrollbar.

   This tier keeps the row but lets it breathe — smaller dove,
   wrapping heading, no fixed right margin — and allows the
   button to drop onto its own line rather than overflow.
   ============================================================ */

@media (min-width: 769px) and (max-width: 1160px) {

  .join-banner {
    height: auto;
  }

  .join-inner {
    flex-wrap: wrap;
    height: auto;
    padding-top: 24px;
    padding-bottom: 28px;
    column-gap: 8px;
    row-gap: 18px;
  }

  .join-dove {
    width: 172px;
    height: 172px;
    margin: 0;
  }

  .join-copy {
    flex: 1 1 260px;
    min-width: 0;
    margin-left: 26px;
  }

  .join-heading {
    white-space: normal;
    font-size: 29px;
    line-height: 1.15;
  }

  .join-desc {
    max-width: none;
    margin-top: 12px;
    font-size: 15px;
    line-height: 24px;
  }

  .btn-member {
    width: 262px;
    height: 56px;
    margin: 0 0 0 auto;
  }
}

/* ============================================================
   SECTION 2 — CATEGORIES, TABLET / SMALL LAPTOP (769–1160px)

   Below 769px the seven cards become a two-column grid; only
   above about 1216px does the single flex row genuinely fit. In
   between they stayed in one row with `white-space: nowrap`
   titles, so "Global Chapters" ran past the viewport edge —
   1–4px of it, enough for a horizontal scrollbar.

   Wrapping the flex row centres each line on its own, so seven
   cards fall into a 4 + 3 arrangement that stays centred.
   ============================================================ */

@media (min-width: 769px) and (max-width: 1215px) {

  .pillars-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 34px 20px;
  }

  .pillar {
    flex: 0 1 158px;
  }

  .pillar-title {
    white-space: normal;
    font-size: 18px;
  }

  .pillar-desc {
    max-width: 158px;
    font-size: 13px;
    line-height: 20px;
  }
}

/* ============================================================
   SECTION 8 — THE JERUSALEM UNITY PODCAST

   A cream band in the same family as the Institutes, Pathways
   and Support sections (same paper texture, same ornamented
   serif heading), sitting between the dark Events section and
   the dark Visit banner.

   One column: a single featured-episode card, centered, which
   opens the podcast pop-up. The player itself lives inside that
   pop-up, on the panel's own dark ground — no outside widget
   with its own colours sits on the page.
   ============================================================ */

:root {
  --s8-line: rgba(122, 92, 56, 0.3);   /* bronze hairline on cream,
                                          shared with the giving cards */
  --s8-card: #0C1029;                  /* card fill, matches the
                                          Institutes card navy */
}

.podcast {
  background: var(--s3-cream) url("assets/section3-bg.png") center / cover no-repeat;
  padding: 46px 0 52px;
}

/* Same treatment as .pathways-heading / .support-heading */
.podcast-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 29px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--s3-heading);
}

.podcast-intro {
  max-width: 780px;
  margin: 22px auto 0;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.01em;
  color: var(--s5-desc);
}

/* --- The featured episode card --------------------------------
   One card, centered, in the site's own materials: the navy of
   the Institutes cards, a gold hairline, the emblem ring the
   pop-ups use. Three parts across — emblem, episode, action —
   which stack into one column on a narrow screen. */

.pod-card {
  display: flex;
  align-items: center;
  gap: 30px;
  max-width: 900px;
  margin: 34px auto 0;
  padding: 28px 34px;
  border: 1px solid rgba(196, 146, 63, 0.34);
  border-radius: 14px;
  background: linear-gradient(180deg, #121737 0%, var(--s8-card) 100%);
  box-shadow: 0 14px 34px rgba(20, 12, 4, 0.16);
  text-align: left;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.pod-card:hover,
.pod-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 20px 42px rgba(20, 12, 4, 0.26);
}

/* The same ring the pop-ups draw around a glyph (.info-glyph) */
.pod-emblem {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  border: 1px solid var(--ghost-border);
  border-radius: 50%;
  background: rgba(196, 146, 63, 0.10);
  color: var(--gold);
  transition: background 0.25s ease, border-color 0.25s ease;
}

.pod-card:hover .pod-emblem {
  border-color: var(--gold);
  background: rgba(196, 146, 63, 0.18);
}

.pod-emblem-icon {
  width: 38px;
  height: 38px;
}

.pod-text {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.pod-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s7-label);
}

.pod-title {
  margin-top: 9px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--s7-title);
}

.pod-show {
  display: block;
  margin-top: 6px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.35;
  color: var(--gold-hi);
}

.pod-desc {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: 0.01em;
  color: var(--s7-body);
}

/* Runtime + date, on the hairline rule the event cards use */
.pod-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(196, 146, 63, 0.26);
  list-style: none;
}

.pod-meta li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  line-height: 20px;
  color: var(--s7-body);
}

.pod-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--gold);
}

/* --- The action ------------------------------------------------ */

.pod-action {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 140px;
  text-align: center;
}

.pod-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 55%, var(--gold-lo) 100%);
  color: #14172C;
  box-shadow: 0 6px 18px rgba(20, 12, 4, 0.35);
  transition: transform 0.25s ease;
}

.pod-play svg {
  width: 26px;
  height: 26px;
  margin-left: 3px;             /* optical centering of the triangle */
}

.pod-card:hover .pod-play {
  transform: scale(1.06);
}

.pod-more {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 17px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-hi);
  transition: color 0.25s ease;
}

.pod-card:hover .pod-more {
  color: var(--btn-text-cream);
}

/* ============================================================
   SECTION 9 — VISIT JERUSALEM

   A dark banner on the campus artwork, between the cream
   Podcast band and the cream giving section. Copy on the left,
   three short points on the right.
   ============================================================ */

.visit {
  position: relative;
  isolation: isolate;
  border-top: 1px solid rgba(196, 146, 63, 0.26);
  border-bottom: 1px solid rgba(196, 146, 63, 0.26);
  background:
    linear-gradient(90deg,
      rgba(7, 3, 26, 0.90) 0%,
      rgba(7, 3, 26, 0.80) 46%,
      rgba(7, 3, 26, 0.62) 100%),
    var(--navy) url("assets/section4-bg.png") center 42% / cover no-repeat;
  padding: 54px 0 58px;
}

.visit-inner {
  display: flex;
  align-items: center;
  gap: 54px;
}

.visit-copy {
  flex: 1 1 560px;
  min-width: 0;
}

.visit-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-hi);
}

.visit-heading {
  margin-top: 14px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.18;
  letter-spacing: 0.01em;
  color: var(--white);
}

.visit-text {
  max-width: 560px;
  margin-top: 16px;
  font-size: 15.5px;
  font-weight: 300;
  line-height: 27px;
  letter-spacing: 0.01em;
  color: var(--text-body);
}

.visit-cta {
  width: max-content;
  height: 52px;
  margin-top: 26px;
  padding: 0 30px;
  border-radius: 4px;
  gap: 12px;
  font-size: 12.5px;
  letter-spacing: 0.10em;
}

/* --- The three points ----------------------------------------- */

.visit-points {
  flex: 0 1 380px;
  min-width: 0;
  padding: 26px 26px 24px;
  border: 1px solid rgba(196, 146, 63, 0.3);
  border-radius: 14px;
  background: rgba(10, 14, 37, 0.58);
  list-style: none;
}

.visit-point {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.visit-point + .visit-point {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(196, 146, 63, 0.2);
}

.visit-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--gold);
}

.visit-point b {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--s7-title);
}

.visit-point span {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 22px;
  color: var(--s7-body);
}

/* ============================================================
   SECTION 10 — GIVING (inside Support Our Mission)

   Four statements of where a gift goes, the primary Donate
   button and the tax-deductibility note. Cream ground, so the
   type follows the Pathways palette rather than the dark one.
   ============================================================ */

.give-uses {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  max-width: 940px;
  margin: 30px auto 0;
  list-style: none;
}

.give-use {
  flex: 1 1 200px;
  max-width: 226px;
  padding: 20px 18px 18px;
  border: 1px solid var(--s8-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.34);
  text-align: center;
}

.give-icon {
  width: 28px;
  height: 28px;
  color: #8A6524;
}

.give-use b {
  display: block;
  margin-top: 10px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--s5-title);
}

.give-use span {
  display: block;
  margin-top: 7px;
  font-size: 13px;
  font-weight: 300;
  line-height: 21px;
  color: var(--s5-desc);
}

.give-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}

/* The button already carries `margin: 28px auto 0` from .btn-donate;
   inside the actions column that spacing is handled by the gap. */
.give-actions .btn-donate {
  margin: 0;
}

.give-secondary {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #6B4E22;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.give-secondary:hover {
  color: var(--gold-lo);
}

.give-note {
  max-width: 720px;
  margin: 22px auto 0;
  text-align: center;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 21px;
  color: var(--s5-desc);
}

/* ============================================================
   SECTIONS 8–10 — TABLET AND PHONE
   The visit banner is a two-column flex row and the podcast card
   is a three-part one; below 980px they stack, and below 768px
   they take the same reduced page padding as everything else.
   ============================================================ */

@media (max-width: 980px) {

  .visit-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
  }

  .visit-copy,
  .visit-points {
    flex: 1 1 auto;
  }

  .visit-heading {
    font-size: 34px;
  }

  .visit-heading br {
    display: none;
  }
}

@media (max-width: 768px) {

  .podcast {
    padding: 36px 0 40px;
  }

  .podcast-heading {
    gap: 12px;
    font-size: 23px;
    line-height: 1.25;
  }

  .podcast-intro {
    margin-top: 16px;
    font-size: 14px;
    line-height: 24px;
  }

  /* One column, centered: emblem, then the episode, then the
     play button as the thing to press. */
  .pod-card {
    flex-direction: column;
    gap: 20px;
    padding: 26px 20px 24px;
    text-align: center;
  }

  .pod-emblem {
    width: 68px;
    height: 68px;
  }

  .pod-emblem-icon {
    width: 33px;
    height: 33px;
  }

  .pod-title {
    font-size: 23px;
  }

  .pod-meta {
    justify-content: center;
    gap: 6px 22px;
  }

  .pod-action {
    width: auto;
  }

  .visit {
    padding: 40px 0 44px;
  }

  .visit-heading {
    font-size: 28px;
  }

  .visit-text {
    font-size: 15px;
    line-height: 25px;
  }

  .visit-cta {
    width: 100%;
    justify-content: center;
  }

  .visit-points {
    padding: 20px 18px 18px;
  }

  .give-uses {
    gap: 12px;
  }

  .give-use {
    flex: 1 1 152px;
    max-width: none;
    padding: 16px 12px 14px;
  }

  .give-use b {
    font-size: 16px;
  }

  .give-use span {
    font-size: 12.5px;
    line-height: 19px;
  }

  .give-actions .btn-donate {
    width: 100%;
    justify-content: center;
  }
}