/* Spiritual Lesson Plans — shared styles
   ------------------------------------------------------------------
   Design intent: white space first. The palette is unchanged, but its
   ranking is inverted — paper and cream carry the page, ink carries the
   words, and gold is a small deliberate mark rather than a large fill.
   Photography and type do the emotional work; the interface stays quiet.
   ------------------------------------------------------------------ */

:root {
  /* Surfaces */
  --paper: #FFFFFF;
  --cream: #FBF5EA;

  /* Brand hues (unchanged) */
  --gold: #E8A94C;
  --gold-deep: #CE8F34;
  --sky: #A9C9D9;
  --sage: #8CA37E;
  --ink: #362F4B;

  /* Text-safe variants: same brand hues, darkened to clear WCAG AA (4.5:1)
     against cream / paper. --gold and --sage stay as-is for backgrounds and
     large decorative use, where the lighter tone is fine. */
  --gold-text: #935F1A;
  --sage-text: #3F5236;

  --ink-soft: rgba(54, 47, 75, 0.72);
  /* Solid rather than a low alpha: the small uppercase labels that use this
     sit on both paper and cream, and an alpha light enough to look "quiet"
     drops under 4.5:1 on cream. Hierarchy comes from size and tracking
     instead. Measured 5.6:1 on paper, 5.1:1 on cream. */
  --ink-faint: #6B6579;
  --rule: rgba(54, 47, 75, 0.13);
  --rule-strong: rgba(54, 47, 75, 0.26);

  /* On dark surfaces */
  --on-dark: rgba(251, 245, 234, 0.86);
  --on-dark-faint: rgba(251, 245, 234, 0.6);
  --rule-dark: rgba(251, 245, 234, 0.18);

  /* Legacy aliases — inline styles in the HTML still reference these */
  --dawn-cream: var(--cream);
  --golden-hour: var(--gold);
  --golden-hour-dark: var(--gold-deep);
  --morning-sky: var(--sky);
  --sage-growth: var(--sage);
  --deep-dusk: var(--ink);
  --deep-dusk-soft: #453c5c;

  --font-serif: "Fraunces", Georgia, "Iowan Old Style", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --max-width: 1240px;
  --measure: 62ch;
  --gutter: clamp(22px, 5vw, 44px);
  --section: clamp(36px, 4.5vw, 64px);
  --radius: 3px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 2px;
}
.hero :focus-visible,
.callout :focus-visible,
.site-footer :focus-visible,
.cookie-banner :focus-visible {
  outline-color: var(--cream);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--ink);
  color: var(--cream);
  padding: 12px 20px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Type ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h2 { font-size: clamp(1.85rem, 3.6vw, 2.85rem); }
h3 { font-size: 1.3rem; letter-spacing: -0.01em; }

p { margin: 0 0 1.15em; max-width: var(--measure); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 18px;
  /* Labels are short by nature; the body measure only forces awkward wraps */
  max-width: none;
}

.lead {
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.section-head {
  max-width: 720px;
  margin-bottom: clamp(40px, 5vw, 68px);
}
.section-head p:last-child { margin-bottom: 0; }

/* ---------- Homepage: "How's your group doing today?" mood picker ---------- */

.mood-section { background: var(--cream); }
html.js .mood-section[hidden] { display: none; }

.mood-intro { max-width: 620px; margin: 0 auto; text-align: center; }
.mood-intro .eyebrow { text-align: center; }
.mood-intro h2 { margin-bottom: 0.4em; }
.mood-intro .lead { margin: 0 auto; }

.mood-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
  max-width: 780px;
  margin: clamp(36px, 5vw, 56px) auto 0;
}

.mood-chip {
  display: inline-block;
  padding: 13px 22px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, transform 0.15s ease;
}
html.js .mood-chip {
  animation: chip-float var(--float-dur, 4s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}
@keyframes chip-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(var(--float-amt, -6px)); }
}
.mood-chip:hover, .mood-chip:focus-visible {
  border-color: var(--gold-deep);
  box-shadow: 0 6px 18px rgba(232, 169, 76, 0.22);
  background: #fff;
  outline: none;
}
.mood-chip-wild {
  border-style: dashed;
  color: var(--ink-soft);
  font-style: italic;
}

/* Pressed feedback + the rest of the cloud stepping back once a choice is made. */
.mood-chip.is-picked {
  animation: chip-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  border-color: var(--gold-deep);
  background: var(--gold);
}
@keyframes chip-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.mood-cloud.is-settled .mood-chip {
  animation-play-state: paused;
}
.mood-cloud.is-settled .mood-chip:not(.is-picked) {
  opacity: 0.35;
  transform: scale(0.94) !important;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.mood-results {
  max-width: 900px;
  margin: clamp(40px, 5vw, 60px) auto 0;
}
html.js .mood-results[hidden] { display: none; }
.mood-picked {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 clamp(24px, 3vw, 36px);
}
.mood-picked strong { color: var(--gold-text); font-style: normal; }
.mood-results-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  margin: clamp(28px, 3.5vw, 40px) 0 0;
}
.mood-results-links button {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

@media (max-width: 560px) {
  .mood-chip { padding: 11px 18px; font-size: 0.88rem; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .mood-chip { animation: none; }
  .mood-chip.is-picked { animation: none; border-color: var(--gold-deep); background: var(--gold); }
  .mood-cloud.is-settled .mood-chip:not(.is-picked) { transition: none; }
}

/* ---------- /for-mentors: checklist ---------- */

.checklist-intro {
  font-size: 0.85rem;
  color: var(--ink-faint);
  font-style: italic;
  margin: -0.4em 0 1.2em;
}
.checklist-list { list-style: none; margin: 0 0 20px; padding: 0; }
.checklist-item { margin-bottom: 14px; }
.checklist-item label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
.checklist-item input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.checklist-mark {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  margin-top: 0.15em;
  border: 1.5px solid var(--rule-strong);
  border-radius: 5px;
  background: var(--paper);
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.checklist-mark::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid var(--paper);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.checklist-item input:checked ~ .checklist-mark,
.checklist-item input:checked + .checklist-mark {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
}
.checklist-item input:checked ~ .checklist-mark::after,
.checklist-item input:checked + .checklist-mark::after {
  transform: rotate(45deg) scale(1);
}
.checklist-item input:focus-visible ~ .checklist-mark,
.checklist-item input:focus-visible + .checklist-mark {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}
.checklist-text {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink);
}
.checklist-item input:checked ~ .checklist-text,
.checklist-item input:checked + .checklist-text {
  color: var(--ink-soft);
}

.checklist-progress { display: flex; align-items: center; gap: 12px; }
.checklist-progress-track {
  flex: 1 1 auto;
  height: 6px;
  background: var(--rule);
  border-radius: 999px;
  overflow: hidden;
}
.checklist-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--gold-deep);
  border-radius: 999px;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.checklist-progress-text {
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-faint);
}

.checklist-done {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.checklist-done-text {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--gold-text);
  margin: 0 0 14px;
}
.checklist-done-pop { animation: checklist-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes checklist-pop {
  0% { opacity: 0; transform: translateY(6px) scale(0.97); }
  100% { opacity: 1; transform: none; }
}

/* ---------- /for-mentors: tappable glossary ---------- */

.glossary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 24px;
}
@media (max-width: 700px) {
  .glossary-grid { grid-template-columns: 1fr; }
}
.glossary-item {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.glossary-term {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.glossary-term em { color: var(--ink-faint); font-style: italic; font-weight: 400; }
.glossary-term:hover { color: var(--gold-text); }
.glossary-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1.5px solid var(--rule-strong);
  position: relative;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease;
}
.glossary-icon::before, .glossary-icon::after {
  content: "";
  position: absolute;
  background: var(--ink-faint);
  transition: background 0.2s ease;
}
.glossary-icon::before { left: 6px; right: 6px; top: 50%; height: 1.5px; transform: translateY(-50%); }
.glossary-icon::after { top: 6px; bottom: 6px; left: 50%; width: 1.5px; transform: translateX(-50%); }
.glossary-term[aria-expanded="true"] .glossary-icon { transform: rotate(135deg); border-color: var(--gold-deep); }
.glossary-term[aria-expanded="true"] .glossary-icon::before,
.glossary-term[aria-expanded="true"] .glossary-icon::after { background: var(--gold-deep); }
.glossary-def {
  padding: 0 18px 18px;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.glossary-def p { margin: 0; }

/* ---------- /for-mentors: worked example ---------- */

.worked-example-toggle {
  display: inline-block;
  margin-top: 18px;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold-text);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.worked-example {
  margin-top: 18px;
  padding: 22px 24px;
  background: var(--cream);
  border-radius: var(--radius);
}
.worked-example-source {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-faint);
  margin: 0 0 16px;
}
.worked-example-source a { color: var(--gold-text); }
.worked-example-row {
  padding: 12px 0 12px 16px;
  border-left: 3px solid var(--gold-deep);
  margin-bottom: 12px;
}
.worked-example-row:last-child { margin-bottom: 0; }
.worked-example-row:nth-child(3) { border-left-color: var(--sage); }
.worked-example-row:nth-child(4) { border-left-color: var(--sky); }
.worked-example-row:nth-child(5) { border-left-color: var(--gold-deep); }
.worked-example-tag {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.worked-example-row p {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink);
  line-height: 1.55;
}

/* ---------- /for-mentors: escalation ladder ---------- */

.escalation-ladder { position: relative; }
.escalation-step {
  position: relative;
  padding-left: 44px;
}
.escalation-step::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 34px;
  bottom: -8px;
  width: 1.5px;
  background: var(--rule-strong);
}
.escalation-step:last-child::before { display: none; }
.escalation-num {
  position: absolute;
  left: 0;
  top: 4px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.85rem;
  background: var(--cream);
  border: 1.5px solid var(--rule-strong);
  color: var(--ink-soft);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.escalation-step.is-open[data-tone="calm"] .escalation-num { background: var(--sage); border-color: var(--sage); color: #fff; }
.escalation-step.is-open[data-tone="curious"] .escalation-num { background: var(--sky); border-color: var(--sky); color: #fff; }
.escalation-step.is-open[data-tone="concerned"] .escalation-num { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }
.escalation-step.is-open[data-tone="serious"] .escalation-num { background: var(--ink); border-color: var(--ink); color: #fff; }

.escalation-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}
.escalation-label {
  flex: 1 1 auto;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink);
}
.escalation-chevron {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-faint);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
  margin-right: 4px;
}
.escalation-step.is-open .escalation-chevron { transform: rotate(-135deg); }

.escalation-body {
  padding: 4px 0 22px;
  max-width: 62ch;
}
.escalation-body p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.escalation-step[data-tone="serious"] .escalation-body {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 18px;
}

/* ---------- /for-mentors: mentor check-in ---------- */

.mentor-checkin {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(28px, 3.5vw, 40px);
  border-top: 1px solid var(--rule);
  text-align: center;
}
.mentor-checkin-prompt {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0 0 22px;
}
.mentor-checkin-cloud { max-width: 640px; margin: 0 auto; }
.mentor-checkin-response {
  max-width: 56ch;
  margin: 22px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .checklist-done-pop { animation: none; }
  .glossary-icon { transition: none; }
  .escalation-chevron { transition: none; }
  .escalation-num { transition: none; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-gold {
  background: var(--gold);
  color: var(--ink);
}
.btn-gold:hover { background: var(--gold-deep); }

.btn-outline {
  border-color: rgba(251, 245, 234, 0.45);
  color: var(--cream);
  background: transparent;
}
.btn-outline:hover {
  border-color: var(--cream);
  background: rgba(251, 245, 234, 0.1);
}

.btn-outline-dark {
  border-color: var(--rule-strong);
  color: var(--ink);
  background: transparent;
}
.btn-outline-dark:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

/* Quiet secondary action — a text link that earns its underline */
.link-more {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--rule-strong);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.link-more:hover { border-color: var(--gold-deep); color: var(--gold-text); }

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

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.site-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 5vw, 64px);
  height: 82px;
  position: relative;
}

.nav-toggle { position: absolute; right: var(--gutter); }

.brand {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 1vw + 1.05rem, 1.6rem);
  font-weight: 500;
  letter-spacing: 0.015em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand strong { font-weight: 500; color: inherit; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.18s ease;
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
}

/* Groups the age and language pills together with a small, fixed gap of
   their own, separate from the wider gap the rest of the nav row uses —
   keeps them read as one "settings" cluster, and costs less horizontal
   space than giving each pill the full row gap on both sides. */
.nav-utility {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--ink); }

.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold-deep);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--ink);
  width: 44px;
  height: 44px;
  font-size: 1.25rem;
  cursor: pointer;
}

/* Home: nav floats over the hero video until the page scrolls */
body.home .site-nav {
  position: fixed;
  left: 0; right: 0;
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}
body.home .site-nav .brand,
body.home .site-nav .nav-toggle { color: var(--cream); }
body.home .site-nav .nav-links a { color: rgba(251, 245, 234, 0.78); }
body.home .site-nav .nav-links a:hover,
body.home .site-nav .nav-links a[aria-current="page"] { color: var(--cream); }
body.home .site-nav .nav-links a[aria-current="page"]::after { background: var(--gold); }

body.home .site-nav.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--rule);
}
body.home .site-nav.is-scrolled .brand,
body.home .site-nav.is-scrolled .nav-toggle { color: var(--ink); }
body.home .site-nav.is-scrolled .nav-links a { color: var(--ink-soft); }
body.home .site-nav.is-scrolled .nav-links a:hover,
body.home .site-nav.is-scrolled .nav-links a[aria-current="page"] { color: var(--ink); }
body.home .site-nav.is-scrolled .nav-links a[aria-current="page"]::after { background: var(--gold-deep); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute;
    top: 82px;
    left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px var(--gutter) 20px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links li { border-top: 1px solid var(--rule); }
  .nav-links a { display: block; padding: 18px 0; }
  .nav-links a[aria-current="page"]::after { display: none; }
  /* The open panel is opaque, so its links always take ink regardless of scroll state */
  body.home .site-nav .nav-links a { color: var(--ink-soft); }
  body.home .site-nav .nav-links a:hover,
  body.home .site-nav .nav-links a[aria-current="page"] { color: var(--ink); }
}

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

.hero {
  position: relative;
  color: var(--cream);
  overflow: hidden;
  /* svh, not vh: on mobile browsers vh includes the retractable URL bar, which
     pushes the CTA below the fold on first paint. svh measures the small
     viewport, so everything in the hero is visible before any scroll. */
  min-height: min(92svh, 880px);
  display: flex;
  align-items: center;
  padding: 132px 0 clamp(64px, 8vw, 104px);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--ink);
}

.hero-media video,
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bottom-weighted scrim. Light through the middle so faces stay readable,
   dark at the top for nav legibility and at the base for the headline. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(26, 22, 38, 0.56) 0%,
    rgba(26, 22, 38, 0.34) 24%,
    rgba(26, 22, 38, 0.46) 54%,
    rgba(26, 22, 38, 0.86) 100%
  );
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
}

.hero h1 {
  font-size: clamp(2.15rem, 6vw, 4.7rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--cream);
  margin-bottom: 0.42em;
  text-shadow: 0 1px 30px rgba(20, 16, 30, 0.42);
}

.hero .subhead {
  font-size: clamp(1.02rem, 1.6vw, 1.22rem);
  line-height: 1.6;
  color: rgba(251, 245, 234, 0.9);
  max-width: 52ch;
  margin: 0 0 2.2em;
  text-shadow: 0 1px 18px rgba(20, 16, 30, 0.5);
}

.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  margin: 0 0 2.6em;
}

/* Three short proofs, directly under the CTA. This is the one piece of
   "info" the fold really needs — it answers cost, barrier, and belonging
   before anyone has to scroll or trust us. */
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 10px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(251, 245, 234, 0.92);
  text-shadow: 0 1px 12px rgba(20, 16, 30, 0.7);
}
.hero-proof li {
  position: relative;
  max-width: none;
}
.hero-proof li + li::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  width: 1px;
  height: 11px;
  transform: translateY(-50%);
  background: rgba(251, 245, 234, 0.34);
}

/* Scroll cue — white space only reads as confident if it's clear there's more */
.hero-scroll {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: clamp(20px, 3.5vw, 34px);
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(251, 245, 234, 0.86);
  text-shadow: 0 1px 12px rgba(20, 16, 30, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
  /* Comfortable target on touch without visually enlarging the cue */
  padding: 8px 16px;
}
.hero-scroll:hover { color: var(--cream); }
.hero-scroll span[aria-hidden] {
  display: block;
  width: 1px;
  height: 26px;
  background: linear-gradient(180deg, rgba(251, 245, 234, 0.7), rgba(251, 245, 234, 0));
  animation: scroll-cue 2.4s ease-in-out infinite;
  transform-origin: top;
}

@keyframes scroll-cue {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

.hero-video-toggle {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: clamp(24px, 4vw, 40px);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(251, 245, 234, 0.34);
  background: rgba(26, 22, 38, 0.4);
  backdrop-filter: blur(4px);
  color: var(--cream);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.hero-video-toggle:hover {
  background: rgba(26, 22, 38, 0.62);
  border-color: rgba(251, 245, 234, 0.6);
}
.hero-video-toggle svg { width: 15px; height: 15px; }
.hero-video-toggle .icon-play { display: none; }
.hero-video-toggle[data-state="paused"] .icon-pause { display: none; }
.hero-video-toggle[data-state="paused"] .icon-play { display: block; }

/* Mobile hero: every element in the fold, nothing cropped. The budget on a
   ~660px-tall viewport is tight, so type steps down and the vertical rhythm
   compresses rather than letting the CTA or proofs fall off-screen. */
@media (max-width: 700px) {
  .hero {
    min-height: min(94svh, 720px);
    padding: 108px 0 76px;
    align-items: center;
  }
  /* The desktop crop is wide enough that cover-fitting it into a tall phone
     screen zooms in on whoever's dead center, cropping out the rest of the
     group. hero-mobile.mp4 is cropped wider (~1.05:1) specifically so it can
     run with contain instead — the group shows in full, pinned to the top,
     with the hero's own ink background (already the video's load-time
     fallback color) filling in behind rather than cropping anything away. */
  .hero-media video { object-fit: contain; object-position: 50% 0%; }
  .hero h1 { font-size: clamp(2rem, 8.2vw, 2.7rem); margin-bottom: 0.42em; }
  .hero .subhead { font-size: 1rem; line-height: 1.55; margin-bottom: 1.9em; }
  .hero-ctas { margin-bottom: 2em; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .hero-proof { font-size: 0.63rem; gap: 8px 18px; letter-spacing: 0.13em; }
  .hero-proof li + li::before { left: -10px; height: 9px; }
  .hero-video-toggle { width: 36px; height: 36px; bottom: auto; top: 96px; }
}

/* Very short viewports (landscape phones, small laptops): drop the scroll cue
   before it collides with the proofs rather than shrinking everything further */
@media (max-height: 620px) {
  .hero { min-height: 0; padding: 116px 0 64px; }
  .hero-scroll { display: none; }
}

/* ---------- Page hero (non-home pages) ---------- */

.page-hero {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(64px, 8vw, 116px) 0 clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--rule);
}
/* Deliberately NOT narrowed+re-centered like a typical hero wrap — this
   should share the same left edge as every other section's .wrap on the
   page below it. Readable line length still comes from h1's own max-width
   (18ch) and p's (58ch), not from constraining the whole column. */
/* .page-hero p below (for the hero's subtitle) has the same specificity
   as the base .eyebrow rule and comes later, so without this override
   it was winning and inflating the eyebrow caption to subtitle size. */
.page-hero .eyebrow {
  color: var(--gold-text);
  font-size: 0.7rem;
  line-height: 1.4;
  margin: 0 0 18px;
  max-width: none;
}
.page-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.9rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.06;
  margin-bottom: 0.32em;
  max-width: 18ch;
}
.page-hero p {
  font-size: clamp(1.08rem, 1.7vw, 1.28rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 0;
}

/* ---------- Sections ---------- */

section { padding: var(--section) 0; }

/* A subtle seam between stacked sections so the rhythm reads as
   intentional structure rather than an unbroken run of whitespace. */
section + section { border-top: 1px solid var(--rule); }

.section-alt { background: var(--cream); }

/* ---------- Pillars ---------- */

.pillars { padding: var(--section) 0; }

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4.5vw, 72px);
}

@media (max-width: 820px) {
  .pillars-grid { grid-template-columns: 1fr; gap: 44px; }
}

.pillar { border-top: 1px solid var(--ink); padding-top: 24px; }
.pillar p { margin-bottom: 0; color: var(--ink-soft); }

.pillar-num {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--gold-text);
  margin-bottom: 20px;
}

.pillar h3 {
  font-size: 1.45rem;
  font-weight: 400;
  margin-bottom: 0.5em;
}

/* ---------- Lesson index cards ---------- */

.topic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 60px);
}

@media (max-width: 900px) {
  .topic-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}
@media (max-width: 600px) {
  .topic-grid { grid-template-columns: 1fr; gap: 0; }
}

.topic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 0 4px;
  border-top: 1px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.25s ease;
}

.topic-card::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold-deep);
  box-shadow: 0 0 0 rgba(232, 169, 76, 0);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.topic-card:hover::after {
  width: 100%;
  box-shadow: 0 0 10px rgba(232, 169, 76, 0.55);
}

/* A quiet spark, not a badge — the same warmth the hero's hidden light
   hints at, echoed here at a much smaller volume on every card. */
.topic-card h3::before {
  content: "\2726";
  display: inline-block;
  margin-right: 0.32em;
  font-size: 0.72em;
  color: var(--gold-deep);
  opacity: 0;
  transform: scale(0.5) rotate(-15deg);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.topic-card:hover h3::before,
.topic-card:focus-visible h3::before {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.topic-card h3 {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 400;
  margin: 0;
}

.topic-card .tag {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.topic-card .meta {
  margin-top: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

@media (max-width: 600px) {
  .topic-card { padding: 26px 0 30px; }
}

/* ---------- Cards & generic content ---------- */

.card {
  background: var(--cream);
  border: none;
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 44px);
}
.card p:last-child { margin-bottom: 0; }

.badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(140, 163, 126, 0.16);
  color: var(--sage-text);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}

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

.list-clean {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--measure);
}
.list-clean li {
  padding: 18px 0;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
}
.list-clean li:first-child { border-top: none; padding-top: 0; }

/* ---------- Resource links (printable handouts, in "The materials") ----------
   Auto-targets any link into assets/materials/*.html — no markup change needed
   in the source markdown, so new handouts just need to be linked to pick this up. */

.list-clean a[href^="/assets/materials/"] {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px 5px 10px;
  margin: 2px 2px;
  background: rgba(232, 169, 76, 0.14);
  border: 1px solid rgba(232, 169, 76, 0.5);
  border-radius: 999px;
  color: var(--gold-text);
  font-weight: 600;
  font-size: 0.92em;
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.list-clean a[href^="/assets/materials/"]::before {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23935F1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cline x1='9' y1='13' x2='15' y2='13'/%3E%3Cline x1='9' y1='17' x2='15' y2='17'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.list-clean a[href^="/assets/materials/"]:hover,
.list-clean a[href^="/assets/materials/"]:focus-visible {
  background: rgba(232, 169, 76, 0.26);
  border-color: var(--gold-deep);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(206, 143, 52, 0.22);
}

/* ---------- Content tables (paired-signs tables inside lesson-flow prose) ---------- */

.table-wrap {
  max-width: var(--measure);
  overflow-x: auto;
  margin: 0 0 1.5em;
}
.content-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94em;
}
.content-table th {
  text-align: left;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-text);
  padding: 0 16px 10px;
}
.content-table th:not(:first-child),
.content-table td:not(:first-child) {
  border-left: 1px dashed var(--rule);
}
.content-table td {
  padding: 11px 16px;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  vertical-align: top;
  line-height: 1.5;
}
.content-table tr:first-child td { border-top: 1px solid var(--rule-strong); }

/* ---------- Callout band ---------- */

.callout {
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius);
  padding: clamp(48px, 7vw, 96px) clamp(28px, 5vw, 80px);
  text-align: center;
}

.callout .eyebrow { color: var(--gold); opacity: 0.9; }
.callout h2 {
  color: var(--cream);
  font-weight: 300;
  max-width: 20ch;
  margin-left: auto;
  margin-right: auto;
}
.callout p {
  max-width: 56ch;
  margin: 0 auto 2em;
  color: var(--on-dark);
}

/* ---------- Lens callout (sage tint) ---------- */

.callout-lens {
  background: rgba(140, 163, 126, 0.14);
  border: 1px solid rgba(140, 163, 126, 0.4);
  border-radius: var(--radius);
  padding: clamp(36px, 5vw, 56px) clamp(28px, 5vw, 56px);
  max-width: 820px;
}
.callout-lens .eyebrow { color: var(--sage-text); }
.callout-lens h2 { margin-bottom: 0.6em; }
.callout-lens p:last-child { margin-bottom: 0; }

.callout-lens-compact {
  max-width: 760px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  text-align: center;
  padding: clamp(24px, 3.5vw, 34px) clamp(24px, 4vw, 44px);
}
.callout-lens-compact p { max-width: none; margin: 0; }
.callout-lens-compact .link-more { margin-left: 4px; }

/* ---------- FAQ accordion (What We Believe: Foundations) ---------- */

.faq-list { margin-top: clamp(8px, 1.5vw, 16px); }

.faq-item {
  border-top: 1px solid var(--rule);
}
.faq-item:last-child { border-bottom: 1px solid var(--rule); }

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 32px);
  padding: clamp(20px, 3vw, 28px) 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }

.faq-item summary h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 400;
}

.faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: var(--ink);
  transition: transform 0.25s ease;
}
.faq-icon::before { left: 0; top: 50%; width: 100%; height: 1.5px; transform: translateY(-50%); }
.faq-icon::after { top: 0; left: 50%; width: 1.5px; height: 100%; transform: translateX(-50%); }
.faq-item[open] .faq-icon::after { transform: translateX(-50%) rotate(90deg); }

.faq-body {
  max-width: var(--measure);
  padding-bottom: clamp(20px, 3vw, 32px);
}
.faq-body p:last-child { margin-bottom: 0; }

/* ---------- Plain-English statement ---------- */

.statement {
  padding: clamp(40px, 5vw, 68px) 0 clamp(32px, 4vw, 56px);
  text-align: center;
}
.statement .wrap { max-width: 900px; }
.statement .eyebrow { margin-bottom: 28px; }

.statement-lead {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--ink);
  /* Long sentence: a display measure this size wants ~40ch, not the ~26ch
     that suits a short pull-quote, or it stacks into a narrow column. */
  max-width: 40ch;
  margin: 0 auto 1.2em;
  text-wrap: pretty;
}

.statement-tail {
  font-size: 0.95rem;
  color: var(--ink-soft);
  max-width: none;
  margin: 0;
}

@media (max-width: 700px) {
  .statement-lead { max-width: none; font-size: 1.3rem; line-height: 1.4; }
}

/* ---------- Safe-space band ---------- */

.safe-space {
  background: var(--cream);
  padding: clamp(36px, 5vw, 56px) 0;
  text-align: center;
}
.safe-space p {
  margin: 0 auto;
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--sage-text);
}
.safe-space p span { color: var(--ink-soft); }

/* ---------- Lesson pages ---------- */

.lesson-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: clamp(32px, 4vw, 52px) 0 0;
  border-top: 1px solid var(--rule);
}
.lesson-meta-item {
  flex: 1 1 160px;
  padding: 20px 24px 20px 0;
  border-right: 1px solid var(--rule);
}
.lesson-meta-item:last-child { border-right: none; }
.lesson-meta-item .label {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.lesson-meta-item .value {
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--ink);
}

@media (max-width: 700px) {
  .lesson-meta-item {
    flex: 1 1 44%;
    border-right: none;
    border-bottom: 1px solid var(--rule);
    padding-right: 0;
  }
}
@media (max-width: 480px) {
  /* Two columns forces the longer age-band labels ("College Student &
     Adult (21+)") into an awkward 2-3 line wrap next to single-line
     siblings — one column per row reads cleaner at this width. */
  .lesson-meta-item { flex-basis: 100%; }
}

.lesson-section {
  padding: var(--section) 0;
  border-top: 1px solid var(--rule);
}
.lesson-section:first-of-type { border-top: none; }

.flow-step {
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  padding: 34px 0;
  border-top: 1px solid var(--rule);
  max-width: 900px;
}
.flow-step:first-child { border-top: none; padding-top: 10px; }

.flow-step-num {
  flex: 0 0 auto;
  width: 34px;
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--gold-deep);
  padding-top: 2px;
}

.flow-step-body { flex: 1 1 auto; }
.flow-step-body h3 { font-size: 1.35rem; font-weight: 400; margin-bottom: 0.5em; }
.flow-step-body p { color: var(--ink-soft); }
.flow-step-body p:last-child { margin-bottom: 0; }
.flow-step-body strong { color: var(--ink); font-weight: 600; }

.flow-step-time {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}

.citation {
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
  font-style: normal;
  color: var(--ink-faint);
}
.citation a { color: inherit; text-decoration-color: var(--rule-strong); }

.safety-note {
  background: var(--cream);
  border-left: 2px solid var(--gold-deep);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: clamp(24px, 3.5vw, 38px) clamp(24px, 3.5vw, 42px);
  max-width: 860px;
}
.safety-note p { color: var(--ink-soft); }
.safety-note p:last-child { margin-bottom: 0; }
.safety-note strong { color: var(--ink); }

/* ---------- Printable materials ---------- */

.materials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 40px);
  max-width: 900px;
}
@media (max-width: 700px) {
  .materials-grid { grid-template-columns: 1fr; }
}

.material-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 32px);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.2s ease;
}
.material-card:hover { border-color: var(--ink); }

.material-kind {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 14px;
}
.material-card h3 { font-size: 1.2rem; font-weight: 400; margin-bottom: 0.4em; }
.material-card p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.material-card .open-hint {
  display: inline-block;
  margin-top: 18px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

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

.site-footer {
  background: var(--ink);
  color: var(--on-dark-faint);
  padding: clamp(40px, 5vw, 64px) 0 40px;
  font-size: 0.95rem;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 44px;
  flex-wrap: wrap;
  padding-bottom: clamp(32px, 4vw, 52px);
  border-bottom: 1px solid var(--rule-dark);
}

.footer-note {
  max-width: 380px;
  margin: 0;
  line-height: 1.7;
}
.footer-note strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin-bottom: 10px;
}

.footer-links {
  display: flex;
  gap: clamp(22px, 3vw, 40px);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  align-items: flex-start;
}

.footer-links a {
  color: var(--on-dark);
  text-decoration: none;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: color 0.18s ease;
}
.footer-links a:hover { color: var(--cream); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 28px;
  font-size: 0.85rem;
}
.footer-bottom p { margin: 0; max-width: 60ch; }

.footer-utility {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.cc-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule-dark);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.cc-badge:hover { border-color: var(--gold); color: var(--cream); }

/* ---------- Language switcher (nav) ----------
   Same pill + dropdown pattern as .age-switcher / .age-switcher-menu
   (see "Nav: age switcher" below) — kept as a visual twin on purpose,
   so the header reads as one family of utility controls. */

.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.lang-switcher:hover { border-color: var(--gold-deep); }
.lang-switcher-icon { font-size: 0.95em; line-height: 1; }

body.home .site-nav .lang-switcher { color: var(--cream); border-color: var(--rule-dark); }
body.home .site-nav.is-scrolled .lang-switcher { color: var(--ink); border-color: var(--rule-strong); }

@media (max-width: 900px) {
  .lang-switcher { padding: 7px 12px; }
  .lang-switcher-label { display: none; }
}
@media (max-width: 560px) {
  /* Same reasoning as .age-switcher at this width — moves into the
     hamburger menu instead (see .nav-lang-item). */
  .lang-switcher { display: none; }
}

.nav-lang-item { display: none; }
@media (max-width: 560px) { .nav-lang-item { display: list-item; } }
.nav-lang-trigger {
  display: flex !important;
  align-items: baseline;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.nav-lang-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.lang-switcher-menu {
  position: absolute;
  top: 100%;
  margin-top: 10px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(54, 47, 75, 0.16);
  padding: 18px;
  width: 280px;
  max-width: calc(100vw - 2 * var(--gutter));
  z-index: 60;
  display: none;
}
.lang-switcher-menu.open { display: block; }
.lang-switcher-tagline {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
}

#google_translate_element { display: flex; align-items: center; }
#google_translate_element .goog-te-gadget { font-family: var(--font-sans) !important; font-size: 0; color: transparent; }
#google_translate_element .goog-te-gadget .goog-te-combo {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink);
}
/* Suppress Google's own translated-page banner iframe — we show our own trigger instead */
.goog-te-banner-frame { display: none !important; }
.goog-te-gadget-icon { display: none !important; }
body { top: 0px !important; }

/* ---------- Feedback widget ---------- */

.feedback-btn {
  position: fixed;
  right: var(--gutter);
  bottom: 24px;
  z-index: 100;
  padding: 13px 22px;
  border-radius: var(--radius);
  border: none;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 28px rgba(54, 47, 75, 0.24);
  transition: background 0.2s ease;
}
.feedback-btn:hover { background: var(--deep-dusk-soft); }

.feedback-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(26, 22, 38, 0.62);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.feedback-overlay.open { display: flex; }

.feedback-modal {
  background: var(--paper);
  border-radius: var(--radius);
  max-width: 520px;
  width: 100%;
  padding: clamp(28px, 4vw, 44px);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

.feedback-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-faint);
}
.feedback-close:hover { color: var(--ink); }

.feedback-modal h3 {
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 0.4em;
}
.feedback-modal p.lead {
  font-size: 0.98rem;
  color: var(--ink-soft);
  margin-bottom: 1.8em;
}

.feedback-field { margin-bottom: 20px; }
.feedback-field label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.feedback-field select,
.feedback-field textarea,
.feedback-field input {
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: 0.98rem;
  color: var(--ink);
}
.feedback-field textarea { min-height: 120px; resize: vertical; }
.feedback-field select:focus,
.feedback-field textarea:focus,
.feedback-field input:focus { border-color: var(--ink); }

.feedback-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.feedback-status {
  display: none;
  margin: -6px 0 18px;
  font-size: 0.92rem;
  line-height: 1.5;
}
.feedback-status.show { display: block; }
.feedback-status.is-ok { color: var(--sage-text); }
.feedback-status.is-error { color: var(--ink-soft); }
.feedback-status a { color: var(--ink); }

/* ---------- Cookie banner ---------- */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 250;
  background: var(--ink);
  color: var(--on-dark);
  padding: 16px var(--gutter);
  display: none;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  text-align: center;
  font-size: 0.88rem;
}
.cookie-banner.show { display: flex; }
.cookie-banner p { margin: 0; max-width: 66ch; font-size: 0.78rem; color: var(--on-dark-faint); }
.cookie-banner .btn { flex: 0 0 auto; padding: 11px 22px; }

body.has-cookie-banner .feedback-btn { bottom: 92px; }
/* The notice already occupies the bottom of the fold — two competing things
   down there is exactly the clutter this design is trying to avoid. */
body.has-cookie-banner .hero-scroll { display: none; }

/* ---------- Scroll reveal ---------- */

/* Content is visible by default and only hidden once the inline head script
   has confirmed JavaScript is running. Without that guard, a JS failure or a
   browser with scripting off would leave every .reveal block permanently at
   opacity 0 — the content would simply not exist for that reader. */
html.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .topic-card::after { transition: none; }
  .category-lesson-card::after { transition: none; }
  .topic-card h3::before, .category-lesson-card h3::before { transition: none; }
  .age-chooser-card { transition: none; }
  .lens-tab { transition: none; }
  .hero-scroll span[aria-hidden] { animation: none; opacity: 0.7; transform: none; }
}

/* ---------- Hero: breathing headline + gloss line ---------- */

html.js .hero h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  animation: word-breathe 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i) * 190ms);
}
@keyframes word-breathe {
  to { opacity: 1; transform: none; }
}

.hero-gloss {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--on-dark-faint);
  max-width: 46ch;
  margin: -0.4em 0 1.8em;
  text-shadow: 0 1px 14px rgba(20, 16, 30, 0.6);
}
html.js .hero-gloss {
  opacity: 0;
  animation: gloss-in 1s ease forwards;
  animation-delay: 2.9s;
}

@media (prefers-reduced-motion: reduce) {
  html.js .hero h1 .word { opacity: 1; transform: none; animation: none; }
  html.js .hero-gloss { opacity: 1; animation: none; }
}

@keyframes gloss-in {
  to { opacity: 1; }
}

/* ---------- Hero: easter egg ---------- */

.hero-easter-egg {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  bottom: clamp(24px, 4vw, 40px);
  width: 34px;
  height: 34px;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: rgba(251, 245, 234, 0.4);
  cursor: pointer;
  transition: color 0.3s ease;
}
.hero-easter-egg:hover,
.hero-easter-egg:focus-visible { color: rgba(251, 245, 234, 0.8); }
.hero-easter-egg svg { width: 16px; height: 16px; overflow: visible; }

.hero-easter-egg .egg-rays {
  opacity: 0;
  transform: scale(0.6);
  transform-origin: 12px 12px;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.hero-easter-egg.is-active .egg-rays {
  animation: egg-glow 1.2s ease-out;
}
.hero-easter-egg.is-active circle {
  animation: egg-pulse 1.2s ease-out;
}
@keyframes egg-glow {
  0% { opacity: 0; transform: scale(0.5); }
  35% { opacity: 1; transform: scale(1.35); }
  100% { opacity: 0.5; transform: scale(1); }
}
@keyframes egg-pulse {
  0% { filter: drop-shadow(0 0 0 rgba(232, 169, 76, 0)); }
  35% { filter: drop-shadow(0 0 9px rgba(232, 169, 76, 0.95)); }
  100% { filter: drop-shadow(0 0 0 rgba(232, 169, 76, 0)); }
}

.egg-msg {
  position: absolute;
  left: 42px;
  bottom: 8px;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-size: 0.85rem;
  font-style: italic;
  color: rgba(251, 245, 234, 0.85);
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.hero-easter-egg.show-msg .egg-msg { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-easter-egg.is-active .egg-rays,
  .hero-easter-egg.is-active circle { animation: none; opacity: 1; transform: none; filter: none; }
}

@media (max-width: 700px) {
  .hero-easter-egg { left: auto; right: var(--gutter); bottom: auto; top: 140px; }
  .egg-msg { left: auto; right: 42px; }
}

/* ---------- Lessons: lantern field ----------
   Each lesson is its own independent light — no lines drawn between them.
   A loose, hand-felt scatter (via nth-child position offsets) instead of a
   rigid grid, a slow per-lantern flicker, and a warm glow that follows the
   cursor across the whole field. */

.lantern-field {
  position: relative;
  background: radial-gradient(ellipse at 50% 12%, #453c5c 0%, #241f33 55%, #171320 100%);
  border-radius: var(--radius);
  overflow: hidden;
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 52px) clamp(28px, 4vw, 52px);
  margin-bottom: clamp(20px, 3vw, 40px);
}

.lantern-field-hint {
  position: relative;
  z-index: 1;
  margin: 0 0 clamp(28px, 4vw, 48px);
  max-width: none;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(251, 245, 234, 0.48);
  text-align: center;
}

.lantern-glow-follow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 20%), rgba(232, 169, 76, 0.12), transparent 70%);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.lantern-field:hover .lantern-glow-follow,
.lantern-field:focus-within .lantern-glow-follow { opacity: 1; }

.lantern-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: clamp(30px, 4vw, 50px) clamp(18px, 3vw, 32px);
}

.lantern {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: clamp(24px, 3vw, 32px) 14px;
  border-radius: 22px;
  text-align: center;
  text-decoration: none;
  color: var(--on-dark);
  background: radial-gradient(circle at 50% 32%, rgba(232, 169, 76, 0.14), rgba(69, 60, 92, 0.32) 72%);
  border: 1px solid rgba(251, 245, 234, 0.1);
  box-shadow: 0 0 22px rgba(232, 169, 76, 0.08);
  transition: box-shadow 0.4s ease, border-color 0.4s ease, transform 0.25s ease;
  animation: lantern-flicker 7s ease-in-out infinite;
}

.lantern:nth-child(4n) { animation-duration: 8s; animation-delay: -2s; }
.lantern:nth-child(4n+1) { animation-duration: 6.5s; animation-delay: -4s; }
.lantern:nth-child(4n+2) { animation-duration: 7.5s; animation-delay: -1s; }
.lantern:nth-child(4n+3) { animation-duration: 6.8s; animation-delay: -3.4s; }

@keyframes lantern-flicker {
  0%, 100% { box-shadow: 0 0 20px rgba(232, 169, 76, 0.07); }
  50% { box-shadow: 0 0 32px rgba(232, 169, 76, 0.15); }
}

.lantern-spark {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px 4px rgba(232, 169, 76, 0.45);
  margin-bottom: 2px;
}

.lantern h3 {
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.32;
  color: var(--cream);
  margin: 0;
}

.lantern .tag {
  font-size: 0.8rem;
  line-height: 1.4;
  max-width: 24ch;
  color: var(--on-dark-faint);
  transition: opacity 0.35s ease;
}

.lantern .meta {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(232, 169, 76, 0.8);
  transition: opacity 0.35s ease;
}

/* The "hide until hover" reveal only makes sense on devices that can
   actually hover. Touch devices navigate on first tap, so hiding the tag/
   meta text there would mean it's never readable — show it plainly instead. */
@media (hover: hover) and (pointer: fine) {
  .lantern .tag { opacity: 0; }
  .lantern .meta { opacity: 0.5; }
  .lantern:hover .tag,
  .lantern:focus-visible .tag,
  .lantern:hover .meta,
  .lantern:focus-visible .meta { opacity: 1; }
}

.lantern:hover,
.lantern:focus-visible {
  box-shadow: 0 0 44px rgba(232, 169, 76, 0.3);
  border-color: rgba(232, 169, 76, 0.45);
  transform: translateY(-4px);
  z-index: 2;
}
.lantern:focus-visible { outline: none; }
.lantern:focus-visible h3 { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .lantern { animation: none; }
  .lantern-glow-follow { display: none; }
}

/* ---------- Utility ---------- */

.center { text-align: center; }
.center p { margin-left: auto; margin-right: auto; }
.mt-0 { margin-top: 0; }
.text-muted { color: var(--ink-soft); }
.measure-wide { max-width: 78ch; }

/* Long-form sections (e.g. What We Believe's Foundations history) that should
   run the full section width instead of the default prose measure. */
.wide-content { max-width: none; }
.wide-content p { max-width: none; }

/* ---------- Age-band system ---------- */
/* Global age-context: the nav switcher, per-band accent badges, the
   assumptions-and-caveats callout, numbered lists, the on-page band
   switcher, and the site-wide age chooser on /lessons. See
   assets/js/age-context.js for the behaviour these hook into. */

.age-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.age-badge-gold      { background: rgba(232, 169, 76, 0.16);  color: var(--gold-text); }
.age-badge-sky       { background: rgba(169, 201, 217, 0.28); color: #2E5A6E; }
.age-badge-sage      { background: rgba(140, 163, 126, 0.18); color: var(--sage-text); }
.age-badge-dusk      { background: rgba(54, 47, 75, 0.12);    color: var(--ink); }
.age-badge-gold-deep { background: rgba(206, 143, 52, 0.18);  color: var(--gold-text); }

/* ---------- Nav: age switcher ---------- */

.age-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.age-switcher:hover { border-color: var(--gold-deep); }
.age-switcher-label {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.age-switcher-value { color: var(--ink); font-weight: 600; }

body.home .site-nav .age-switcher { color: var(--cream); border-color: var(--rule-dark); }
body.home .site-nav .age-switcher .age-switcher-label { color: var(--on-dark-faint); }
body.home .site-nav .age-switcher .age-switcher-value { color: var(--cream); }
body.home .site-nav.is-scrolled .age-switcher { color: var(--ink); border-color: var(--rule-strong); }
body.home .site-nav.is-scrolled .age-switcher .age-switcher-label { color: var(--ink-faint); }
body.home .site-nav.is-scrolled .age-switcher .age-switcher-value { color: var(--ink); }

@media (max-width: 900px) {
  .age-switcher { padding: 7px 12px; }
  .age-switcher-label { display: none; }
}
@media (max-width: 560px) {
  /* Too little width left for brand text + pill + hamburger on one row,
     and a second bar under the nav sat directly on top of the home
     hero — so below this width the switcher moves into the hamburger
     menu instead (see .nav-age-item) rather than floating over content. */
  .age-switcher { display: none; }
}

/* The age switcher's mobile home: a line inside the hamburger dropdown,
   only shown below 560px (see .age-switcher's display:none above) —
   above that width the floating pill in the nav row is used instead. */
.nav-age-item { display: none; }
@media (max-width: 560px) {
  .nav-age-item { display: list-item; }
}
.nav-age-item a { display: flex !important; align-items: baseline; gap: 6px; }
.nav-age-item .nav-age-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.age-switcher-menu {
  position: absolute;
  top: 100%;
  margin-top: 10px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(54, 47, 75, 0.16);
  padding: 8px;
  min-width: 240px;
  z-index: 60;
  display: none;
}
.age-switcher-menu.open { display: block; }
.age-switcher-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: calc(var(--radius) - 1px);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  cursor: pointer;
}
.age-switcher-menu button:hover,
.age-switcher-menu button:focus-visible { background: var(--cream); outline: none; }
.age-switcher-menu button[aria-current="true"] { color: var(--gold-text); font-weight: 600; }

/* ---------- Assumptions & Caveats callout ---------- */

.callout-assumptions {
  background: rgba(169, 201, 217, 0.14);
  border: 1px solid rgba(169, 201, 217, 0.45);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 44px);
}
.callout-assumptions .eyebrow { color: #2E5A6E; }
.callout-assumptions h2 { margin-bottom: 1em; }

.assumptions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 48px);
}
@media (max-width: 820px) {
  .assumptions-grid { grid-template-columns: 1fr; gap: 28px; }
}
.assumptions-block h3 {
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin-bottom: 0.8em;
}
.assumptions-block p,
.assumptions-block li { color: var(--ink-soft); }
.assumptions-block p:last-child { margin-bottom: 0; }

/* ---------- Numbered lesson lists ---------- */

.list-clean.list-numbered { counter-reset: lc; }
.list-clean.list-numbered li {
  position: relative;
  padding-left: 30px;
  counter-increment: lc;
}
.list-clean.list-numbered li::before {
  content: counter(lc);
  position: absolute;
  left: 0;
  top: 18px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--gold-deep);
}
.list-clean.list-numbered li:first-child::before { top: 0; }

/* ---------- On-page band switcher (lesson pages) ---------- */

.lesson-band-switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--rule);
}
.lesson-band-switcher-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-right: 4px;
}
.band-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  color: var(--ink-soft);
  font-size: 0.82rem;
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.band-pill:hover { border-color: var(--gold-deep); color: var(--ink); }

/* ---------- Age chooser (/lessons) ---------- */

.age-chooser {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
  max-width: 1080px;
  margin: 0 auto;
}
.age-chooser-card:nth-child(4),
.age-chooser-card:nth-child(5) {
  grid-column: span 1;
}
/* 5 into a 3-col grid: last row centers its 2 cards rather than
   left-hanging with an empty gap. */
@media (min-width: 700px) {
  .age-chooser { grid-template-columns: repeat(6, 1fr); }
  .age-chooser-card:nth-child(1) { grid-column: 1 / 3; }
  .age-chooser-card:nth-child(2) { grid-column: 3 / 5; }
  .age-chooser-card:nth-child(3) { grid-column: 5 / 7; }
  .age-chooser-card:nth-child(4) { grid-column: 2 / 4; }
  .age-chooser-card:nth-child(5) { grid-column: 4 / 6; }
}
@media (max-width: 699px) {
  .age-chooser { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .age-chooser { grid-template-columns: 1fr; }
}

.age-chooser-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.age-chooser-card:hover,
.age-chooser-card:focus-visible {
  border-color: var(--gold-deep);
  box-shadow: 0 10px 28px rgba(54, 47, 75, 0.1), 0 0 20px rgba(232, 169, 76, 0.18);
  transform: translateY(-3px);
  outline: none;
}
.age-chooser-card[aria-current="true"] {
  border-color: var(--gold-deep);
  background: rgba(232, 169, 76, 0.08);
}
.age-chooser-icon {
  width: 36px;
  height: 36px;
  color: var(--gold-deep);
}
.age-chooser-icon svg { width: 100%; height: 100%; }
.age-chooser-card h3 { font-size: 1.1rem; font-weight: 500; margin: 0; }
.age-chooser-card p {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

/* A short word of encouragement for the mentor themselves, tucked under
   each card's age description — separated by a hairline so it reads as
   a distinct aside, not more facts about the age group. */
.age-chooser-tip {
  display: block;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-serif);
  font-size: 0.86rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink-faint);
}

.age-chooser-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  max-width: 1080px;
  margin: 0 auto clamp(24px, 3vw, 36px);
  padding: 16px 22px;
  background: var(--cream);
  border-radius: var(--radius);
}
/* The [hidden] attribute alone can't win against the display:flex above —
   same fix as .band-section[hidden] needed. Without this, the "Showing
   lessons for —" bar briefly shows on first load before any age is chosen. */
.age-chooser-status[hidden] { display: none; }
.age-chooser-status p { margin: 0; color: var(--ink-soft); }
.age-chooser-status strong { color: var(--ink); }
.age-chooser-status button {
  border: none;
  background: none;
  color: var(--gold-text);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Band sections: JS hides the non-active ones and cross-fades the active
   one in. Without JS (or before it runs), every section stays visible and
   static — nothing here is ever gated behind opacity:0 by default. */
.band-section {
  padding-top: clamp(28px, 4vw, 44px);
  /* .site-nav is sticky at 82px tall — without this, jumping to #band-X
     (via the chooser card's scrollIntoView, or a plain anchor click with
     JS off) lands the section's title and tip right under the nav,
     hidden instead of visible. */
  scroll-margin-top: 100px;
}
.band-section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: clamp(20px, 3vw, 32px);
}
.band-section-head h2 { margin: 0; }

/* A quiet word for the mentor themselves, under the age label — smaller
   and softer than the eyebrow above it so it reads as an aside, not a
   second heading. */
.band-section-tip {
  align-self: stretch;
  margin: 0;
  max-width: none;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-style: normal;
  line-height: 1.55;
  color: var(--ink-faint);
}

html.js .band-section[hidden] { display: none; }
html.js .band-section {
  animation: band-fade-in 0.4s ease both;
}
@keyframes band-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  html.js .band-section { animation: none; }
}

.band-empty {
  max-width: 640px;
  padding: clamp(28px, 4vw, 40px);
  background: var(--cream);
  border-radius: var(--radius);
  color: var(--ink-soft);
}
.band-empty p:last-child { margin-bottom: 0; }
.band-empty a { color: var(--gold-text); }

/* ---------- /lessons: "by age" / "by what's going on" lens switcher ---------- */

.lens-switcher-section {
  padding-top: clamp(28px, 4vw, 40px);
  padding-bottom: clamp(24px, 3.5vw, 36px);
}

.lens-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 16px;
  background: var(--cream);
  border-radius: 999px;
}
.lens-tab {
  border: none;
  background: transparent;
  padding: 9px 20px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.lens-tab:hover { color: var(--ink); }
.lens-tab[aria-selected="true"] {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(54, 47, 75, 0.14);
}
.lens-tab:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

.lens-switcher-note {
  max-width: 62ch;
  margin: 0;
  font-family: var(--font-serif);
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink-faint);
}

/* The two lens panels sit where a run of <section>s would otherwise be, so
   they need to carry the same hairline seam that `section + section`
   provides elsewhere — including panel-to-panel, for the no-JS state where
   both panels are stacked and visible at once (see the html.js rule below). */
.lens-switcher-section + .lens-panel,
.lens-panel + .lens-panel,
.lens-panel + section {
  border-top: 1px solid var(--rule);
}

/* Progressive enhancement, same pattern as .band-section: without JS (or
   before it runs) both panels stay statically visible and stacked — every
   lesson is reachable both ways regardless of scripting. JS picks one lens
   as active and hides the other only once it's confirmed running. */
html.js .lens-panel[hidden] { display: none; }

.category-section {
  padding-top: clamp(28px, 4vw, 44px);
  scroll-margin-top: 100px;
}
.category-section-head {
  margin-bottom: clamp(20px, 3vw, 32px);
}
.category-section-head h2 {
  margin: 0;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
}

.category-lesson-list {
  display: flex;
  flex-direction: column;
}

.category-lesson-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 0;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}
.category-lesson-list .category-lesson-card:last-child { border-bottom: 1px solid var(--rule); }

.category-lesson-card::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold-deep);
  box-shadow: 0 0 0 rgba(232, 169, 76, 0);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.category-lesson-card:hover::after,
.category-lesson-card:focus-visible::after {
  width: 100%;
  box-shadow: 0 0 10px rgba(232, 169, 76, 0.55);
}

.category-lesson-card h3::before {
  content: "\2726";
  display: inline-block;
  margin-right: 0.32em;
  font-size: 0.72em;
  color: var(--gold-deep);
  opacity: 0;
  transform: scale(0.5) rotate(-15deg);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.category-lesson-card:hover h3::before,
.category-lesson-card:focus-visible h3::before {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.category-lesson-card h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  font-weight: 400;
  margin: 0;
}
.category-lesson-card .tag {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
}
.category-lesson-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

/* ---------- Lesson "What you'll need": handout preview card ---------- */

.handout-preview-grid {
  display: grid;
  gap: 20px;
  max-width: 560px;
  margin: 4px 0 26px;
}
@media (min-width: 640px) {
  .handout-preview-grid--multi {
    grid-template-columns: 1fr 1fr;
    max-width: none;
  }
}

.handout-preview {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.handout-preview:hover,
.handout-preview:focus-visible {
  border-color: var(--gold-deep);
  box-shadow: 0 10px 30px rgba(54, 47, 75, 0.13);
}
.handout-preview:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}

/* The thumbnail is the real handout page in an <iframe>, laid out at 4x the
   card width and scaled back down to 0.25 — so it stays pixel-accurate to
   the live handout with no separate screenshot to maintain. translateY
   crops the handout page's own dark toolbar out of the top of the frame. */
.handout-preview-thumb {
  position: relative;
  display: block;
  width: 100%;
  height: 208px;
  overflow: hidden;
  background: #eae2d2;
  border-bottom: 1px solid var(--rule);
}
.handout-preview-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 250%;
  height: 320%;
  border: 0;
  transform: scale(0.4) translateY(-120px);
  transform-origin: top left;
  pointer-events: none;
}

.handout-preview-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 15px 18px 17px;
}
.handout-preview-badge {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-text);
  background: rgba(232, 169, 76, 0.14);
  padding: 3px 9px;
  border-radius: 999px;
}
.handout-preview-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.3;
}
.handout-preview-framing {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.handout-preview-cta {
  margin-top: 3px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold-text);
}
.handout-preview:hover .handout-preview-cta,
.handout-preview:focus-visible .handout-preview-cta {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .handout-preview { transition: none; }
}

/* ---------- "Not Broken" feature band (homepage entry point) ---------- */
/* A flagship interactive experience given its own distinct doorway treatment —
   not a lesson card. The glow lives here at the entrance; the experience
   itself (not-broken.html) stays calm and undecorated. */

.nb-feature {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(48px, 8vw, 96px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.nb-feature .wrap { position: relative; z-index: 1; }

.nb-feature-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: blur(70px);
  opacity: 0.5;
}
.nb-feature-ambient span { position: absolute; display: block; border-radius: 50%; }
.nb-feature-ambient span:nth-child(1) { width: 300px; height: 300px; background: var(--gold); top: -60px; left: 8%; animation: nbDrift1 16s ease-in-out infinite; }
.nb-feature-ambient span:nth-child(2) { width: 240px; height: 240px; background: var(--sage); bottom: -50px; right: 10%; animation: nbDrift2 20s ease-in-out infinite; }
.nb-feature-ambient span:nth-child(3) { width: 180px; height: 180px; background: var(--sky); top: 30%; right: 28%; animation: nbDrift1 24s ease-in-out infinite reverse; }
@keyframes nbDrift1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(22px, -16px); } }
@keyframes nbDrift2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-16px, 20px); } }

.nb-feature-badge {
  display: inline-block;
  margin: 0 0 1.4rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-text);
  background: linear-gradient(90deg, var(--gold-text), var(--sage-text), var(--gold-text));
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: nbShimmer 5s linear infinite;
}
@keyframes nbShimmer { to { background-position: 220% center; } }

.nb-feature-orb {
  display: block;
  width: 60px;
  height: 60px;
  margin: 0 auto 1.6rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.55), var(--gold) 55%, var(--gold-text) 100%);
  animation: nbPulse 2.8s ease-in-out infinite;
}
@keyframes nbPulse {
  0%, 100% { box-shadow: 0 0 18px 3px rgba(232, 169, 76, 0.4); transform: scale(1); }
  50% { box-shadow: 0 0 32px 10px rgba(232, 169, 76, 0.6); transform: scale(1.05); }
}

.nb-feature h2 {
  margin: 0 0 0.9rem;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.06;
}
.nb-feature-lede {
  max-width: 34rem;
  margin: 0 auto 2rem;
  color: var(--ink-soft);
  font-size: 1.08rem;
  line-height: 1.6;
}

.nb-feature-cta { animation: nbBtnGlow 2.6s ease-in-out infinite; }
@keyframes nbBtnGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 169, 76, 0); }
  50% { box-shadow: 0 0 22px 5px rgba(232, 169, 76, 0.5); }
}

@media (prefers-reduced-motion: reduce) {
  .nb-feature-ambient span,
  .nb-feature-badge,
  .nb-feature-orb,
  .nb-feature-cta { animation: none; }
  .nb-feature-orb { box-shadow: 0 0 18px 3px rgba(232, 169, 76, 0.4); }
  .nb-feature-cta { box-shadow: 0 0 14px 3px rgba(232, 169, 76, 0.35); }
}