/* ============================================
   Baker House — 4-page prototype
   Design tokens cloned from bakerhouse1921.com
   ============================================ */

:root {
  /* Palette */
  --gold: #b8973a;
  --burgundy: #7b0c0c;
  --warm-tan: #c8bfa9;
  --cream: #e8e0d0;
  --slate: #44546a;
  --ivory: #f5f0e8;
  --navy: #222a35;
  --white: #ffffff;
  --black: #000000;
  --gold-watermark: rgba(184, 151, 58, 0.08);
  --gold-border: rgba(184, 151, 58, 0.18);
  --input-bg: rgba(68, 84, 106, 0.2);
  --input-border: rgba(200, 191, 169, 0.15);
  --header-scrolled: rgba(24, 30, 38, 0.95);

  /* Type */
  /* Titles: Ryan requested BodoniBlackMT. It's a licensed Monotype font (not a
     free web font), so it's named first for anyone who has it / a future hosted
     license, and falls back to Bodoni Moda at its black (900) weight. */
  --font-display: "Bodoni Black MT", "BodoniBlackMT", "Bodoni MT Black", "Bodoni Moda", Georgia, serif;
  --font-body: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Rhythm — leading as ratios, not pixel values */
  --leading-body: 1.65;
  --leading-tight: 1.25;
  --leading-display: 1.1;

  /* Layout — measure narrowed 645 → 600px to keep body copy near a 65-char line */
  --content-max: 600px;
  --wide-max: 1340px;
  --section-pad-x: clamp(24px, 5vw, 50px);
  --section-pad-y: clamp(60px, 8vw, 90px);

  /* Spacing tokens — replaces inline magic-number margin-tops sprinkled through HTML.
     Values preserved exactly; only their location changes (centralized in one place). */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 14px;
  --space-lg: 18px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 36px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  /* Weight 400 (was 300): Libre Franklin Light produces patchy gray texture
     at 14px on a dark ground — fails Kadavy's squint test. 400 evens it out. */
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: var(--leading-body);
  letter-spacing: 0;
  color: var(--ivory);
  background: var(--navy);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

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

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

button { font-family: inherit; cursor: pointer; }

/* ============================================
   SKIP TO CONTENT — keyboard a11y
   Hidden off-screen by default, slides down on focus. Lets keyboard users
   bypass the header nav and jump straight to <main>. */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 1000;
  background: var(--gold);
  color: var(--navy);
  padding: 12px 20px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
  top: 16px;
  outline: none;
}

/* ============================================
   FOCUS — keyboard accessibility
   Use :focus-visible so the ring only appears for keyboard users,
   not on mouse click. Gold ring on a 2px offset stays consistent
   with the brand without leaning on a browser default. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.submit-btn:focus-visible,
.tier-card__cta:focus-visible {
  outline-offset: 3px;
}
/* Inputs already use border-color shift; double up with a soft gold ring.
   Excludes radio/checkbox — they get their own focus-visible rule near the
   custom-control styles below. */
.field input:not([type="radio"]):not([type="checkbox"]):focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(184, 151, 58, 0.35);
}
.site-nav a:focus-visible,
.tab-row button:focus-visible,
.social-link:focus-visible {
  outline-offset: 4px;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
/* Bodoni Moda is a Didone — its identity is high thin/thick contrast.
   Weight 900 flattens that. 700 keeps weight presence and restores the hairlines.
   font-optical-sizing: auto picks the display-cut at large sizes. */
.h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 5vw, 64px);
  line-height: var(--leading-display);
  letter-spacing: -0.02em;
  color: var(--ivory);
  margin: 0;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 3vw, 44px);
  line-height: var(--leading-display);
  letter-spacing: -0.015em;
  margin: 0;
}
.h2-medium {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: var(--leading-display);
  letter-spacing: -0.01em;
  margin: 0;
}
/* h3 is the editorial "dek" — italic, slightly above lede, colored ivory.
   Was 14px gold flat (no rank). Italic Bodoni was loaded but unused.
   Min raised 17→19 to stay clear of the screen-Didone hairline-loss zone. */
.h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: var(--leading-tight);
  letter-spacing: -0.005em;
  color: var(--ivory);
  margin: 0;
}
/* Eyebrow: wide tracking only works on uppercase. text-transform: none + 12px
   tracking was unreadable. 0.32em ≈ 3.5px tracking, matched to .eyebrow-gold. */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.32em;
  color: var(--warm-tan);
  text-transform: uppercase;
  margin: 0;
}
.eyebrow-gold {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
  margin: 0;
}
.lede {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(18px, 1.8vw, 26px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ivory);
  margin: 0;
}
.body { margin: 0 0 1em; max-width: 65ch; }
.body:last-child { margin-bottom: 0; }
.center .body, .container .body { margin-left: auto; margin-right: auto; }
/* Secondary voice — replaces inline color: var(--warm-tan) overrides */
.body--secondary { color: var(--warm-tan); }
.section--ivory .body--secondary { color: var(--slate); }

/* ============================================
   HEADER (fixed, scroll-aware glass)
   ============================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  /* Always-on top scrim — keeps 12% navy at the bottom of the header so nav links
     (which sit in the lower half of the header) get a consistent backdrop even
     where the underlying image is light. Combined with text-shadow on the links
     below, this handles both vertical and horizontal contrast variation. */
  background: linear-gradient(to bottom, rgba(24, 30, 38, 0.6) 0%, rgba(24, 30, 38, 0.12) 100%);
  transition: background 0.4s, backdrop-filter 0.4s, box-shadow 0.4s;
}
.site-header.scrolled {
  background: var(--header-scrolled);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 -1px 0 rgba(184, 151, 58, 0.12);
}
/* Subtle drop-shadow on the wordmark img — paired with the scrim above, it
   keeps the BAKER HOUSE logotype legible on the lightest hero images. Drops
   when the header gains its solid scrolled background. */
.header-logo img {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
  transition: filter 0.4s;
}
.site-header.scrolled .header-logo img {
  filter: none;
}
/* Header spans the full viewport width — logo hugs the left edge, nav hugs the
   right. Body content below still centers at --wide-max (1340px). This is the
   standard editorial-site layout (NYT, Vogue, Bloomberg). */
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px var(--section-pad-x);
}
.header-logo img { width: 140px; height: 33px; object-fit: contain; }
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
}
.site-nav a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm-tan);
  /* Subtle dark halo — near-invisible against dark backgrounds, provides
     guaranteed contrast where the underlying hero image is light. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  transition: color 0.2s, text-shadow 0.4s;
  padding: 8px 0;
  position: relative;
}
.site-nav a:hover { color: var(--ivory); }
.site-nav a.active { color: var(--gold); }
.site-header.scrolled .site-nav a {
  /* Scrolled state has its own solid navy backdrop — drop the shadow */
  text-shadow: none;
}
.site-nav a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
}
.btn-primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-block;
  background: var(--gold);
  /* Real border, not inset shadow: the hover sweep (::after) paints over the
     padding box and was burying the old inset ring — on flat navy sections the
     hovered button dissolved into the background (client report, June 4). A
     border lies outside the padding box, so it survives the sweep. Gold on
     gold = invisible at rest. */
  border: 1px solid var(--gold);
  color: var(--navy);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: 0;
  transition: color 0.3s ease, box-shadow 0.3s ease, letter-spacing 0.3s ease;
}
/* Interactive fill that sweeps in from the RIGHT on hover/focus. The outlined
   secondary reveals GOLD; the gold primary reveals navy. ::after sits above the
   button's background but below the label (z-index -1 + isolate). */
.btn-primary::after,
.btn-secondary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateX(101%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-primary::after { background: var(--navy); }
.btn-secondary::after { background: var(--gold); }
.btn-primary:hover::after,
.btn-primary:focus-visible::after,
.btn-secondary:hover::after,
.btn-secondary:focus-visible::after {
  transform: translateX(0);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  color: var(--ivory);
}
/* Secondary button matches .btn-primary dimensions and typography exactly —
   they're a CTA pair. Only background + color differ. */
.btn-secondary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-block;
  background: var(--navy);
  /* Matches .btn-primary's border so the CTA pair stays pixel-identical in
     size — and gives navy-on-navy secondaries a visible edge at rest. */
  border: 1px solid var(--gold);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: 0;
  transition: color 0.3s ease, box-shadow 0.3s ease, letter-spacing 0.3s ease;
}
.btn-secondary:hover,
.btn-secondary:focus-visible { color: var(--navy); }
@media (prefers-reduced-motion: reduce) {
  .btn-primary::after,
  .btn-secondary::after { transition: none; }
}
/* 44×44 minimum touch target (WCAG 2.5.5). Bars at 16/22/28 keep 6px stack on 44px height. */
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: var(--ivory);
  padding: 0;
  position: relative;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}
.nav-toggle::before,
.nav-toggle::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  height: 2px;
  background: var(--ivory);
  border-radius: 2px;
  transition: transform 0.2s, top 0.2s;
}
.nav-toggle::before { top: 16px; }
.nav-toggle::after { top: 28px; }
.nav-toggle .bar {
  position: absolute;
  left: 11px;
  right: 11px;
  top: 22px;
  height: 2px;
  background: var(--ivory);
  border-radius: 2px;
  transition: opacity 0.2s;
}
.nav-toggle[aria-expanded="true"]::before { top: 22px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"]::after { top: 22px; transform: rotate(-45deg); }
.nav-toggle[aria-expanded="true"] .bar { opacity: 0; }

/* ============================================
   SECTIONS / CONTAINERS
   ============================================ */
.section {
  width: 100%;
  padding: var(--section-pad-y) var(--section-pad-x);
}
/* Full-bleed sections — used for the three feature rows on About.
   Section padding-x goes to zero so the image's grid column reaches the
   viewport edge. Body column keeps its own padding so text stays readable. */
.section--full-bleed {
  padding: 0 clamp(20px, 3vw, 64px);
}
.section--ivory { background: var(--ivory); color: var(--navy); }
.section--ivory .h2,
.section--ivory .h2-medium,
.section--ivory .h1 { color: var(--navy); }
.section--ivory .eyebrow { color: var(--burgundy); }
/* Gold on ivory is ~2.5:1 — recolor to burgundy on light ground, same as .eyebrow. */
.section--ivory .eyebrow-gold { color: var(--burgundy); }
.section--ivory .lede { color: var(--burgundy); }
.container { max-width: var(--content-max); margin: 0 auto; }
.container--wide { max-width: var(--wide-max); margin: 0 auto; }
.center { text-align: center; }
.stack > * + * { margin-top: 1.25em; }
.stack-lg > * + * { margin-top: 2em; }
/* Screen-reader-only text — visually hidden, still announced. Used inside
   purely visual marks (e.g. the membership compare-table dots) so they
   aren't empty spans to assistive tech. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   HERO (page-level)
   ============================================ */
.page-hero {
  position: relative;
  overflow: hidden;
  min-height: 540px;
  display: flex;
  align-items: center;
  padding: 120px var(--section-pad-x) 80px;
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero__bg img,
.page-hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Content-anchored scrim. The text column sits LEFT on desktop, so a
   left-weighted gradient protects the headline/lede no matter how bright the
   photo is on the right — plus a bottom falloff to ground the section. On
   mobile the content stacks upper-centre, so we swap to a top-weighted scrim
   (see media query) instead of left-weighted. Fixes text-over-image contrast
   on every hero (design-review HIGH/MEDIUM). */
.page-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(24,30,38,0.72) 0%, rgba(24,30,38,0.3) 48%, rgba(24,30,38,0) 74%),
    linear-gradient(to top, var(--navy) 0%, rgba(24,30,38,0.42) 45%, rgba(24,30,38,0) 100%);
}
@media (max-width: 880px) {
  .page-hero__bg::after {
    background:
      linear-gradient(to bottom, rgba(24,30,38,0.62) 0%, rgba(24,30,38,0.4) 38%, rgba(24,30,38,0.88) 100%);
  }
}
.page-hero__content {
  position: relative;
  z-index: 1;
  max-width: var(--wide-max);
  width: 100%;
  margin: 0 auto;
}

.page-hero--landing { min-height: 100vh; padding-top: 0; padding-bottom: 0; }

/* ============================================
   FEATURE ROW — image + text (alternating)
   ============================================ */
/* Editorial golden split: image wide (1.618fr), body narrow (1fr).
   Image-right variant inverts the columns so the wide image always stays on the image side. */
.feature-row {
  display: grid;
  grid-template-columns: 1.618fr 1fr;
  gap: 0;
  align-items: stretch;
  /* Taller (was 480) so the full-bleed image doesn't read as a too-stretched
     widescreen letterbox. 640 brings the aspect closer to 3:2 / 16:10. */
  min-height: 640px;
}
.feature-row--image-right { grid-template-columns: 1fr 1.618fr; }

/* Editorial divider between full-bleed feature rows. Thin gold hairline
   centered on the page, fading out at top and bottom. Magazine page-turn pause. */
.feature-divider {
  display: block;
  width: 1px;
  height: 56px;
  margin: 40px auto;
  background: linear-gradient(to bottom, transparent 0%, var(--gold) 50%, transparent 100%);
}
.feature-row__media {
  position: relative;
  overflow: hidden;
  min-height: 480px;
}

/* Editorial section break — temple monogram flanked by gold hairline rules.
   Used between two same-coloured sections (e.g. Internship → Cornell on
   the ivory background) so the gap reads as an intentional chapter mark
   rather than a void. Magazine/spread convention. */
.section-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 28px);
  color: var(--gold);
}
.section-mark__inner,
.section-mark > * {
  position: relative;
}
.section-mark--ivory {
  background: var(--ivory);
  padding: clamp(40px, 5vw, 64px) clamp(20px, 3vw, 32px);
}
.section-mark--ivory > * { max-width: none; }
.section-mark--ivory .section-mark__rule { max-width: 160px; }
.section-mark__rule {
  flex: 1;
  height: 1px;
}
.section-mark__rule:first-child {
  background: linear-gradient(to right, transparent 0%, var(--gold) 100%);
}
.section-mark__rule:last-child {
  background: linear-gradient(to right, var(--gold) 0%, transparent 100%);
}
.section-mark__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-mark__icon svg { display: block; }

/* ============ Titan filter tabs ============
   Pill buttons above the titans grid. Filter the 40 cards by status:
   All (40) / Released (3 PDFs) / Coming Soon (37 locked). */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 var(--space-2xl);
}
.filter-tab {
  background: transparent;
  border: 1px solid rgba(232, 226, 213, 0.18);
  color: rgba(232, 226, 213, 0.65);
  padding: 9px 20px;
  border-radius: 999px;
  font-family: 'Libre Franklin', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.filter-tab:hover,
.filter-tab:focus-visible {
  color: var(--ivory);
  border-color: rgba(212, 168, 83, 0.4);
  outline: none;
}
.filter-tab.active {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(212, 168, 83, 0.08);
}
.filter-count {
  margin-left: 7px;
  opacity: 0.55;
  font-weight: 400;
  letter-spacing: 0.08em;
}
.filter-tab.active .filter-count { opacity: 0.85; }
.card--titan.is-filtered { display: none; }

/* ---------- Era section headers (Chapter One / Two / Three / Four / Five) ----------
   Span the full grid width inside the .card-grid. Break the 40-titan
   list into the five chronological chapters of the PDF research order. */
.era-header {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-3xl) 0 var(--space-md);
  position: relative;
}
.era-header:first-child { padding-top: 0; }
.era-header::before,
.era-header::after {
  content: "";
  position: absolute;
  top: calc(var(--space-3xl) + 8px);
  width: clamp(40px, 8vw, 120px);
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(212, 168, 83, 0.4), transparent);
}
.era-header::before { left: 50%; transform: translateX(calc(-100% - 160px)); }
.era-header::after  { left: 50%; transform: translateX(160px); }
.era-header:first-child::before,
.era-header:first-child::after {
  top: 8px;
}
.era-header__label {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--space-md);
  font-weight: 500;
}
.era-header__title {
  font-family: 'Bodoni Moda', serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 400;
  font-style: italic;
  color: var(--ivory);
  margin: 0;
  letter-spacing: -0.005em;
}
.era-header__caption {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(232, 226, 213, 0.5);
  margin: 8px 0 0;
}
.era-header.is-filtered { display: none; }
@media (max-width: 600px) {
  .era-header::before,
  .era-header::after { display: none; }
}

/* ============ Cornell partner-schools strip ============
   Sits below the Cornell crest + Baker Program button. Three Cornell
   school logos side-by-side; each is a quiet, hover-brightening link.
   Logo files vary in aspect ratio — we clamp height, not width. */
.cornell-schools {
  list-style: none;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 32px) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: clamp(20px, 3vw, 40px);
  max-width: 880px;
}
.cornell-schools li { display: flex; justify-content: center; width: 100%; }
.cornell-schools__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  max-width: 100%;
  text-decoration: none;
  transition: transform 200ms ease;
}
.cornell-schools__item:hover,
.cornell-schools__item:focus-visible {
  transform: translateY(-2px);
}
.cornell-schools__item img {
  /* All three logos fit within a uniform 240×56 box. Aspect ratio is
     preserved via object-fit: contain; widths converge so Nolan, Dyson,
     and SC Johnson all read at similar visual weight (Dyson and Nolan
     hit ~240×52, SC Johnson lands at 240×34). */
  height: 56px;
  max-width: 240px;
  width: 100%;
  display: block;
  object-fit: contain;
  opacity: 0.92;
  transition: opacity 200ms ease;
}
.cornell-schools__item:hover img,
.cornell-schools__item:focus-visible img {
  opacity: 1;
}
.cornell-schools__name {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(105, 47, 49, 0.7);
  text-align: center;
  line-height: 1.4;
  transition: color 200ms ease;
}
.cornell-schools__arrow {
  display: inline-block;
  margin-left: 2px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.cornell-schools__item:hover .cornell-schools__name,
.cornell-schools__item:focus-visible .cornell-schools__name {
  color: var(--burgundy);
}
.cornell-schools__item:hover .cornell-schools__arrow,
.cornell-schools__item:focus-visible .cornell-schools__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ============ Toolkit — per-tool preview graphics ============
   Every tool card carries a small visual preview between description and
   the meta row. Shared layout: ~96px tall, sits in the same slot on each
   card so the grid stays aligned. */
.tool-preview {
  margin: var(--space-lg) 0 var(--space-md);
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ---------- Talk to Richard: animated chat ---------- */
.chat-preview {
  position: relative;
  gap: 6px;
  min-height: 110px;
}
.chat-bubble {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 12px;
  line-height: 1.45;
  padding: 7px 11px;
  border-radius: 12px;
  max-width: 85%;
  color: rgba(232, 226, 213, 0.78);
  background: rgba(232, 226, 213, 0.04);
  border: 1px solid rgba(232, 226, 213, 0.08);
}
.chat-bubble--in {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.chat-bubble--out {
  align-self: flex-end;
  text-align: right;
  border-bottom-right-radius: 4px;
  color: rgba(232, 226, 213, 0.92);
  background: rgba(212, 168, 83, 0.08);
  border-color: rgba(212, 168, 83, 0.18);
}
.chat-typing {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 12px;
  border-bottom-right-radius: 4px;
  background: rgba(212, 168, 83, 0.06);
  border: 1px solid rgba(212, 168, 83, 0.14);
}
.chat-typing__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(212, 168, 83, 0.85);
  animation: typing-dot 1.2s ease-in-out infinite;
}
.chat-typing__dot:nth-child(2) { animation-delay: 0.18s; }
.chat-typing__dot:nth-child(3) { animation-delay: 0.36s; }

/* The three elements share an 8s loop. Q in (0-12%) → typing (18-40%)
   → A in (44-92%) → reset. */
.chat-preview--animated .chat-bubble--anim-q,
.chat-preview--animated .chat-typing--anim,
.chat-preview--animated .chat-bubble--anim-a { opacity: 0; }

.chat-preview--animated .chat-bubble--anim-q {
  animation: chat-anim-q 5s ease-out infinite;
}
.chat-preview--animated .chat-typing--anim {
  animation: chat-anim-typing 5s linear infinite;
}
.chat-preview--animated .chat-bubble--anim-a {
  animation: chat-anim-a 5s ease-out infinite;
}

@keyframes chat-anim-q {
  0%, 2%   { opacity: 0; transform: translateY(4px); }
  10%, 92% { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; }
}
@keyframes chat-anim-typing {
  0%, 14%  { opacity: 0; }
  20%, 42% { opacity: 0.95; }
  48%, 100%{ opacity: 0; }
}
@keyframes chat-anim-a {
  0%, 44%  { opacity: 0; transform: translateY(4px); }
  54%, 92% { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; }
}
@keyframes typing-dot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-2px); }
}

/* ---------- Deal Calculator: metric readout with sequential glow ----------
   NOI → CAP → DSCR each pulse gold in turn, signalling "live calc".
   8s loop matches the chat. No slot-machine rolling (iGaming tell). */
.metric-readout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 14px 10px;
  border-radius: 10px;
  background: rgba(232, 226, 213, 0.03);
  border: 1px solid rgba(232, 226, 213, 0.06);
}
.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: opacity 200ms ease;
}
.metric__label {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(212, 168, 83, 0.85);
  text-transform: uppercase;
}
.metric__value {
  font-family: 'Bodoni Moda', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--ivory);
  line-height: 1;
  text-shadow: 0 0 0 transparent;
}
.metric__value small { font-size: 13px; opacity: 0.75; margin-left: 1px; }

.metric--anim-1 .metric__value { animation: metric-glow 3.6s ease-out infinite; }
.metric--anim-2 .metric__value { animation: metric-glow 3.6s ease-out infinite 0.3s; }
.metric--anim-3 .metric__value { animation: metric-glow 3.6s ease-out infinite 0.6s; }
@keyframes metric-glow {
  0%, 4%    { color: rgba(232, 226, 213, 0.6); text-shadow: 0 0 0 transparent; }
  10%       { color: var(--gold); text-shadow: 0 0 12px rgba(212, 168, 83, 0.45); }
  30%, 100% { color: var(--ivory); text-shadow: 0 0 0 transparent; }
}

/* ---------- Due Diligence: sequential checklist ----------
   Items tick on in strict order Financial → Physical → Legal → Market,
   hold all four checked, then reset. Matches the act of working a list. */
.check-preview {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
}
.check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Libre Franklin', sans-serif;
  font-size: 12px;
  color: rgba(232, 226, 213, 0.4);
  transition: color 300ms ease;
}
.check-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: rgba(232, 226, 213, 0.05);
  border: 1px solid rgba(232, 226, 213, 0.15);
  color: transparent;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.check-item--anim-1 { animation: check-tick 4.8s ease-out infinite; }
.check-item--anim-2 { animation: check-tick 4.8s ease-out infinite 0.35s; }
.check-item--anim-3 { animation: check-tick 4.8s ease-out infinite 0.7s; }
.check-item--anim-4 { animation: check-tick 4.8s ease-out infinite 1.05s; }
.check-item--anim-1 .check-mark { animation: check-mark-tick 4.8s ease-out infinite; }
.check-item--anim-2 .check-mark { animation: check-mark-tick 4.8s ease-out infinite 0.35s; }
.check-item--anim-3 .check-mark { animation: check-mark-tick 4.8s ease-out infinite 0.7s; }
.check-item--anim-4 .check-mark { animation: check-mark-tick 4.8s ease-out infinite 1.05s; }
@keyframes check-tick {
  0%, 4%   { color: rgba(232, 226, 213, 0.4); }
  12%, 85% { color: rgba(232, 226, 213, 0.9); }
  100%     { color: rgba(232, 226, 213, 0.4); }
}
@keyframes check-mark-tick {
  0%, 4% {
    background: rgba(232, 226, 213, 0.05);
    border-color: rgba(232, 226, 213, 0.15);
    color: transparent;
  }
  12%, 85% {
    background: rgba(212, 168, 83, 0.2);
    border-color: rgba(212, 168, 83, 0.5);
    color: var(--gold);
  }
  100% {
    background: rgba(232, 226, 213, 0.05);
    border-color: rgba(232, 226, 213, 0.15);
    color: transparent;
  }
}

/* ---------- Capital Stack: three-column row [label | bar | %] ----------
   Widths MATCH the labels (Tufte information integrity): 30/15/55.
   Labels live in their own column so they never clip inside the bar.
   Build order: Senior (foundation) → Mezz → Equity, like assembling
   the stack. Each bar uses ease-out width transition, no overshoot. */
.stack-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 0;
}
.stack-row {
  display: grid;
  grid-template-columns: 56px 1fr 36px;
  align-items: center;
  gap: 10px;
}
.stack-row__label {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232, 226, 213, 0.65);
  white-space: nowrap;
}
.stack-row__value {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.stack-track {
  width: 100%;
  height: 14px;
  border-radius: 3px;
  background: rgba(232, 226, 213, 0.04);
  overflow: hidden;
}
.stack-seg {
  height: 100%;
  border-radius: 3px;
  transform-origin: left center;
}
.stack-seg--equity {
  width: 30%;
  background: linear-gradient(90deg, rgba(212, 168, 83, 0.9), rgba(212, 168, 83, 0.55));
  animation: stack-grow 4.5s ease-out infinite 0.7s;
}
.stack-seg--mezz {
  width: 15%;
  background: rgba(212, 168, 83, 0.4);
  animation: stack-grow 4.5s ease-out infinite 0.35s;
}
.stack-seg--senior {
  width: 55%;
  background: rgba(232, 226, 213, 0.15);
  animation: stack-grow 4.5s ease-out infinite;
}
@keyframes stack-grow {
  0%, 2%   { transform: scaleX(0); }
  22%, 90% { transform: scaleX(1); }
  100%     { transform: scaleX(0); }
}

/* ---------- Entity Setup: condition → outcome decision rows ----------
   Real decision logic, not generic tags. Each row says "if X, then Y"
   and lights up in sequence — visualizes the actual decision tree. */
.entity-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}
.entity-row {
  display: grid;
  grid-template-columns: 1fr 14px auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(232, 226, 213, 0.025);
  border: 1px solid rgba(232, 226, 213, 0.07);
}
.entity-cond {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 11px;
  color: rgba(232, 226, 213, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entity-arrow {
  text-align: center;
  font-family: 'Libre Franklin', sans-serif;
  font-size: 12px;
  color: rgba(212, 168, 83, 0.45);
}
.entity-result {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(232, 226, 213, 0.7);
  white-space: nowrap;
}
.entity-row--anim-1 { animation: entity-row-active 4.5s ease-in-out infinite; }
.entity-row--anim-2 { animation: entity-row-active 4.5s ease-in-out infinite 1.5s; }
.entity-row--anim-3 { animation: entity-row-active 4.5s ease-in-out infinite 3s; }
.entity-row--anim-1 .entity-cond  { animation: entity-cond-active 4.5s ease-in-out infinite; }
.entity-row--anim-2 .entity-cond  { animation: entity-cond-active 4.5s ease-in-out infinite 1.5s; }
.entity-row--anim-3 .entity-cond  { animation: entity-cond-active 4.5s ease-in-out infinite 3s; }
.entity-row--anim-1 .entity-result,
.entity-row--anim-1 .entity-arrow { animation: entity-result-active 4.5s ease-in-out infinite; }
.entity-row--anim-2 .entity-result,
.entity-row--anim-2 .entity-arrow { animation: entity-result-active 4.5s ease-in-out infinite 1.5s; }
.entity-row--anim-3 .entity-result,
.entity-row--anim-3 .entity-arrow { animation: entity-result-active 4.5s ease-in-out infinite 3s; }
@keyframes entity-row-active {
  0%, 2%, 30%, 100% {
    background: rgba(232, 226, 213, 0.025);
    border-color: rgba(232, 226, 213, 0.07);
  }
  6%, 26% {
    background: rgba(212, 168, 83, 0.08);
    border-color: rgba(212, 168, 83, 0.4);
  }
}
@keyframes entity-cond-active {
  0%, 2%, 30%, 100% { color: rgba(232, 226, 213, 0.55); }
  6%, 26%          { color: var(--ivory); }
}
@keyframes entity-result-active {
  0%, 2%, 30%, 100% { color: rgba(232, 226, 213, 0.7); }
  6%, 26%          { color: var(--gold); }
}

/* ---------- 30-Day Action Plan: dot calendar ---------- */
.day-preview {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px 0;
}
.day-row {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 4px;
}
.day-dot {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 2px;
  background: rgba(232, 226, 213, 0.07);
  border: 1px solid rgba(232, 226, 213, 0.06);
}
.day-dot--fill {
  animation: day-fill 4.5s ease-out infinite;
  animation-delay: var(--d, 0s);
}
.day-dot--today {
  animation: day-today 4.5s ease-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes day-fill {
  0%, 4% {
    background: rgba(232, 226, 213, 0.07);
    border-color: rgba(232, 226, 213, 0.06);
  }
  10%, 90% {
    background: rgba(212, 168, 83, 0.4);
    border-color: rgba(212, 168, 83, 0.55);
  }
  100% {
    background: rgba(232, 226, 213, 0.07);
    border-color: rgba(232, 226, 213, 0.06);
  }
}
@keyframes day-today {
  0%, 4% {
    background: rgba(232, 226, 213, 0.07);
    border-color: rgba(232, 226, 213, 0.06);
    box-shadow: 0 0 0 0 rgba(212, 168, 83, 0);
  }
  10%, 90% {
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(212, 168, 83, 0.3);
  }
  100% {
    background: rgba(232, 226, 213, 0.07);
    border-color: rgba(232, 226, 213, 0.06);
    box-shadow: 0 0 0 0 rgba(212, 168, 83, 0);
  }
}
.day-preview__caption {
  margin: 4px 0 0;
  font-family: 'Libre Franklin', sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(212, 168, 83, 0.7);
  text-align: right;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .chat-preview--animated .chat-bubble--anim-q,
  .chat-preview--animated .chat-typing--anim,
  .chat-preview--animated .chat-bubble--anim-a {
    animation: none;
    opacity: 1;
  }
  .chat-preview--animated .chat-typing--anim { display: none; }
  .chat-typing__dot,
  .check-item,
  .check-mark,
  .metric__value,
  .stack-seg,
  .entity-tag,
  .day-dot--fill,
  .day-dot--today {
    animation: none;
  }
  /* Show check items in their checked state */
  .check-item { color: rgba(232, 226, 213, 0.9); }
  .check-mark {
    background: rgba(212, 168, 83, 0.2);
    border-color: rgba(212, 168, 83, 0.5);
    color: var(--gold);
  }
  /* Show day dots in their settled state */
  .day-dot--fill {
    background: rgba(212, 168, 83, 0.4);
    border-color: rgba(212, 168, 83, 0.55);
  }
  .day-dot--today {
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(212, 168, 83, 0.3);
  }
  /* First decision row active by default */
  .entity-row,
  .entity-cond,
  .entity-result,
  .entity-arrow { animation: none; }
  .entity-row--anim-1 {
    background: rgba(212, 168, 83, 0.08);
    border-color: rgba(212, 168, 83, 0.4);
  }
  .entity-row--anim-1 .entity-cond  { color: var(--ivory); }
  .entity-row--anim-1 .entity-result,
  .entity-row--anim-1 .entity-arrow { color: var(--gold); }
}
@media (max-width: 640px) {
  .cornell-schools {
    grid-template-columns: 1fr;
    gap: clamp(20px, 5vw, 28px);
  }
  .cornell-schools__item img { height: 40px; }
}

.feature-row__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s, filter 0.6s;
}
.feature-row:hover .feature-row__media img {
  transform: scale(1.03);
  filter: contrast(1.05);
}
.feature-row__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px clamp(24px, 4vw, 56px);
  position: relative;
}
/* Chapter-mark numeral. Was overlapping the eyebrow because of the -0.32em
   negative margin. Now it sits ABOVE the eyebrow as a proper editorial chapter
   marker — smaller (56-88px from 72-112), italic Bodoni, faint gold, with clean
   positive spacing below. Matches the italic-Bodoni numeral language used on
   the About-page pillars and the day-itinerary timeline. */
.feature-row__watermark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(56px, 6.5vw, 88px);
  line-height: 0.9;
  color: var(--gold-watermark);
  letter-spacing: -0.04em;
  margin: 0 0 var(--space-md);
  pointer-events: none;
  user-select: none;
}
.feature-row--image-right .feature-row__media { order: 2; }

/* ============================================
   CARD GRID — content & toolkit pages
   ============================================ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
}
.card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--gold-border);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
  position: relative;
}
.card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(184, 151, 58, 0.4);
  transform: translateY(-2px);
}
.card--ivory {
  background: var(--ivory);
  border-color: rgba(123, 12, 12, 0.15);
  color: var(--navy);
}
.card--ivory:hover { background: var(--cream); }
.card__eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: var(--leading-display);
  letter-spacing: -0.01em;
  color: var(--ivory);
  margin: 0;
}
.card--ivory .card__title { color: var(--navy); }
.card__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: var(--leading-body);
  color: var(--warm-tan);
  margin: 0;
}
.card--ivory .card__desc { color: var(--slate); }
.card__meta {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-size: 10.4px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
}
.badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 8px;
  background: var(--gold);
  color: var(--navy);
}
.badge--soon {
  background: transparent;
  color: var(--warm-tan);
  border: 1px solid var(--gold-border);
}
.badge--available { background: var(--gold); color: var(--navy); }
/* Badges as real <button>s (dual-action titan cards: Watch + Read).
   Interactive like the hero CTA pair (client, June 5): on hover, Watch keeps
   its gold border while navy sweeps in; Read fills with gold. */
button.badge {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  cursor: pointer;
  font-family: var(--font-body);
  padding: 6px 10px;
  border: 1px solid var(--gold);
  transition: color 0.3s;
}
button.badge::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateX(101%);
  transition: transform 0.35s var(--ease-silk);
}
button.badge:hover::after,
button.badge:focus-visible::after { transform: translateX(0); }
button.badge--available::after { background: var(--navy); }
button.badge--available:hover,
button.badge--available:focus-visible { color: var(--ivory); }
.badge--ghost {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold-border);
}
button.badge--ghost::after { background: var(--gold); }
button.badge--ghost:hover,
button.badge--ghost:focus-visible { color: var(--navy); border-color: var(--gold); }
.card__actions { display: inline-flex; gap: 6px; }
/* Sylvia's single Watch badge (a span inside the card-link): sweep it when
   the card itself is hovered, since the whole card is the trigger. */
a[data-video-modal] .badge--available {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--gold);
  transition: color 0.3s;
}
a[data-video-modal] .badge--available::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--navy);
  transform: translateX(101%);
  transition: transform 0.35s var(--ease-silk);
}
a[data-video-modal]:hover .badge--available,
a[data-video-modal]:focus-visible .badge--available { color: var(--ivory); }
a[data-video-modal]:hover .badge--available::after,
a[data-video-modal]:focus-visible .badge--available::after { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  button.badge::after,
  a[data-video-modal] .badge--available::after { transition: none; }
}
.card--locked { opacity: 0.6; }
.card--locked:hover { transform: none; opacity: 0.75; }

/* ============================================
   CAROUSEL — crossfade slider with autoplay + manual controls
   Used inside .feature-row__media to cycle through grouped imagery.
   Slides stack absolutely; active slide fades to opacity 1; others 0.
   Autoplay pauses on hover and when the carousel exits the viewport.
   ============================================ */
.carousel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.carousel__track {
  position: absolute;
  inset: 0;
}
.carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.carousel__slide[data-active] {
  opacity: 1;
  pointer-events: auto;
}
.carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.feature-row:hover .carousel__slide[data-active] img {
  transform: scale(1.03);
  filter: contrast(1.05);
}
.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background: rgba(24, 30, 38, 0.55);
  color: var(--ivory);
  border: 1px solid var(--gold-border);
  border-radius: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4px;
  opacity: 0;
  transition: background 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s;
}
.carousel:hover .carousel__btn,
.carousel__btn:focus-visible {
  opacity: 1;
}
.carousel__btn:hover {
  background: rgba(184, 151, 58, 0.9);
  color: var(--navy);
  border-color: var(--gold);
}
.carousel__btn--prev { left: 16px; }
.carousel__btn--next { right: 16px; }
.carousel__dots {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  row-gap: 2px;
  padding: 0 16px;
  z-index: 5;
}
/* The visible pip stays 9px, but the tappable button is 28x44px (>=44px tall)
   so it clears the touch-target minimum without enlarging the dot. Pip is
   drawn via ::before, centred in the hit area. */
.carousel__dot {
  width: 28px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
}
.carousel__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border: 1px solid rgba(245, 240, 232, 0.6);
  background: transparent;
  border-radius: 50%;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.carousel__dot:hover::before { border-color: var(--gold); transform: translate(-50%, -50%) scale(1.2); }
.carousel__dot[data-active]::before {
  background: var(--gold);
  border-color: var(--gold);
}
/* The content hero now runs 14 slides. On phones, tighten the dot footprint
   so all 14 indicators sit on a single row instead of wrapping to 3 ragged
   rows. Hit area stays 44px tall; only the horizontal padding shrinks. */
@media (max-width: 560px) {
  .page-hero__carousel .carousel__dots { gap: 4px; }
  .page-hero__carousel .carousel__dot { width: 20px; }
}
/* Show controls always on touch devices (no hover) */
@media (hover: none) {
  .carousel__btn { opacity: 1; }
}

/* ============================================
   PILLARS — index.html "About Baker House" three-pillar block
   Uses Roman numerals (I / II / III) to differentiate from the feature-row
   Arabic watermarks. Roman reads as "manifesto/timeless," Arabic as "sequence."
   ============================================ */
.pillars {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 64px);
  max-width: 1100px;
}
.pillar {
  text-align: left;
  padding-top: 0;
}
.pillar__numeral {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(40px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold);
  display: block;
}
.pillar__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--warm-tan);
  margin: var(--space-md) 0 0;
}
.pillar__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: var(--leading-display);
  letter-spacing: -0.01em;
  color: var(--ivory);
  margin: var(--space-sm) 0 0;
}
.pillar__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: var(--leading-body);
  color: var(--warm-tan);
  margin: var(--space-lg) 0 0;
  max-width: 34ch;
}
@media (max-width: 880px) {
  .pillars { grid-template-columns: 1fr; gap: var(--space-3xl); }
  .pillar { padding-top: var(--space-lg); }
}

/* .pillars--between — 4-tile variant whose two columns sit in the GAPS
   between the 3 pillars above (column-1-2 gap and column-2-3 gap),
   not under the outer pillars. 6-column grid with the same gap value as
   .pillars, tiles span 2 columns each at positions 2-3 and 4-5 so each
   tile's center lands exactly on a pillar-row gap center. Standalone. */
.pillars--between {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: clamp(32px, 4vw, 64px);
  row-gap: var(--space-4xl);
}
.pillars--between > :nth-child(1) { grid-column: 2 / span 2; grid-row: 1; }
.pillars--between > :nth-child(2) { grid-column: 4 / span 2; grid-row: 1; }
.pillars--between > :nth-child(3) { grid-column: 2 / span 2; grid-row: 2; }
.pillars--between > :nth-child(4) { grid-column: 4 / span 2; grid-row: 2; }
@media (max-width: 880px) {
  .pillars--between {
    grid-template-columns: 1fr;
  }
  .pillars--between > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
}

/* Ivory-section variant — the same .pillars pattern used on the toolkit
   "Three Principles" block. Gold numerals stay (they read on both grounds);
   label/title/desc invert to burgundy/navy/slate for legible dark-on-light. */
.section--ivory .pillar__label { color: var(--burgundy); }
.section--ivory .pillar__title { color: var(--navy); }
.section--ivory .pillar__desc { color: var(--slate); }

/* ============================================
   CORNELL ROW — index.html bottom Cornell section
   Two-column composition: compact seal | substantive body
   Replaces the previous single-paragraph centered block.
   ============================================ */
.cornell-row {
  display: grid;
  grid-template-columns: clamp(140px, 16vw, 200px) 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
  max-width: 900px;
  margin: 0 auto;
}
.cornell-row__media {
  display: flex;
  justify-content: center;
  padding-top: var(--space-md);
}
.cornell-row__media img {
  width: 100%;
  max-width: 180px;
  height: auto;
}
@media (max-width: 720px) {
  .cornell-row {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    text-align: center;
  }
  .cornell-row__media { padding-top: 0; }
  .cornell-row__media img { max-width: 140px; }
}

/* ============================================
   TITAN CARDS — content.html ebooks tab
   Portrait area at the top (typographic monogram placeholder; swap for <img>
   when curated portrait photos are ready), then a tighter text block.
   ============================================ */
.card--titan {
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.card--titan .card__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background:
    radial-gradient(circle at 30% 25%, rgba(184, 151, 58, 0.10) 0%, transparent 55%),
    linear-gradient(160deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 60%),
    var(--navy);
  border-bottom: 1px solid var(--gold-border);
  overflow: hidden;
  transition: background 0.5s var(--ease-out-quart);
}
.card--titan:hover .card__portrait {
  background:
    radial-gradient(circle at 30% 25%, rgba(184, 151, 58, 0.16) 0%, transparent 55%),
    linear-gradient(160deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 60%),
    var(--navy);
}
.card--titan .card__portrait-initials {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(72px, 7vw, 108px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--gold);
  transition: transform 0.5s var(--ease-out-quart);
}
.card--titan:hover .card__portrait-initials {
  transform: translateY(-2px);
}
.card--titan .card__portrait-years {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  color: var(--warm-tan);
  text-transform: uppercase;
}
/* Text block below the portrait — restores card-like padding, tightens rhythm */
.card--titan > .card__eyebrow { padding: 24px 28px 0; }
.card--titan > .card__title   { padding: 6px 28px 0; }
.card--titan > .card__desc    { padding: 12px 28px 0; }
.card--titan > .card__meta {
  padding: 18px 28px 24px;
  margin-top: auto;
}
/* When an <img> replaces the monogram placeholder, the same container works */
.card--titan .card__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.4) contrast(1.05) brightness(0.95);
  transition: transform 0.6s var(--ease-out-quart), filter 0.4s;
  display: block;
}
.card--titan:hover .card__portrait img {
  transform: scale(1.04);
  filter: grayscale(0.15) contrast(1.08) brightness(1);
}
/* When the portrait has a photo, slide the years label to a small overlay
   at the bottom so it doesn't sit on top of the face */
.card--titan .card__portrait:has(img) .card__portrait-years {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 6px 12px;
  background: rgba(24, 30, 38, 0.75);
  font-size: 10px;
  letter-spacing: 0.32em;
  white-space: nowrap;
}

/* ============================================
   FORM
   ============================================ */
.form-section {
  background: var(--navy);
  padding: var(--section-pad-y) var(--section-pad-x);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
/* Text-style inputs — explicitly NOT radio/checkbox, which need their own
   compact box styling below */
.field input:not([type="radio"]):not([type="checkbox"]),
.field select,
.field textarea {
  width: 100%;
  padding: 12.8px 16px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14.72px;
  color: var(--ivory);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  transition: border-color 0.3s, box-shadow 0.2s;
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(200, 191, 169, 0.5); }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--gold); }
.field textarea { min-height: 110px; resize: vertical; }
.field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23B8973A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
/* Open-dropdown styling — the closed-state .field select rule above only
   skins the trigger; once the menu pops, the browser renders <option>
   elements natively. Explicitly style them so they stay on-brand instead
   of falling back to OS light-grey. */
.field select option {
  background-color: var(--navy);
  color: var(--ivory);
  padding: 8px 12px;
}
.field select option:disabled {
  color: var(--warm-tan);
  font-style: italic;
}
.field-radio-group { display: flex; flex-direction: column; gap: 10px; }
.field-radio-group label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ivory);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
/* Custom radio + checkbox controls — appearance:none on the parent rule was
   stripping the native dot/check, leaving empty squares. These rebuild them
   at proper scale (18px) with a clear "selected" state in brand gold. */
.field-radio-group input[type="radio"],
.field-radio-group input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  background: transparent;
  border: 1.5px solid var(--gold-border);
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
}
.field-radio-group input[type="radio"] {
  border-radius: 50%;
}
.field-radio-group input[type="radio"]:hover,
.field-radio-group input[type="checkbox"]:hover {
  border-color: var(--gold);
}
/* Radio — gold filled center dot when selected */
.field-radio-group input[type="radio"]:checked {
  border-color: var(--gold);
}
.field-radio-group input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
}
/* Checkbox — gold-filled box with navy check */
.field-radio-group input[type="checkbox"]:checked {
  background: var(--gold);
  border-color: var(--gold);
}
.field-radio-group input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: solid var(--navy);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.field-radio-group input[type="radio"]:focus-visible,
.field-radio-group input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.submit-btn {
  display: block;
  width: 100%;
  padding: 18px;
  margin-top: 12px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--gold);
  border: 0;
  border-radius: 0;
  transition: background 0.3s, color 0.3s, letter-spacing 0.3s;
}
.submit-btn:hover { background: var(--navy); color: var(--ivory); box-shadow: inset 0 0 0 1px var(--gold); letter-spacing: 3.5px; }
.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  letter-spacing: 3px;
}
.submit-btn:disabled:hover {
  background: var(--gold);
  color: var(--navy);
  box-shadow: none;
  letter-spacing: 3px;
}
/* Intent sections — three clearly-divided opt-in blocks in the bootcamp form
   (Boot Camp / Internship / Lecture invitation). Visual separator + gold
   section title makes each path's purpose unambiguous. */
.intent-section {
  margin-top: var(--space-3xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--gold-border);
}
.intent-section__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--space-lg);
}

.success {
  background: rgba(184, 151, 58, 0.08);
  border: 1px solid var(--gold);
  padding: 40px;
  text-align: center;
}
.success .h2-medium { color: var(--gold); margin-bottom: 12px; }
.hidden { display: none !important; }

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  background: var(--navy);
  padding: 50px var(--section-pad-x) 40px;
  border-top: 1px solid rgba(184, 151, 58, 0.08);
}
.footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.footer-monogram { width: 50px; height: 45px; object-fit: contain; }
.footer-wordmark { width: 170px; height: auto; object-fit: contain; }
.social-row { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 8px; }
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;             /* WCAG 2.5.5 touch-target minimum */
  border-radius: 999px;
  color: var(--warm-tan);
  transition: color 0.2s, transform 0.1s;
}
.social-link:hover { color: var(--ivory); transform: scale(1.1); }
/* Footer nav — moved off inline magic numbers onto the system (em tracking) */
.site-footer__nav {
  display: flex;
  /* Wrap instead of overflowing — five nowrap links at 22px gaps measure
     398px, which side-scrolled 390px phones (audit, June 10). Wrapping only
     engages below ~400px; desktop renders identically. */
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  margin-top: var(--space-md);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm-tan);
}
/* Vertical padding lifts the tap height toward 44px without changing the
   horizontal rhythm (negative margin keeps the visual gap). */
.site-footer__nav a { display: inline-block; padding: 11px 0; margin: -11px 0; transition: color 0.2s; }
.site-footer__nav a:hover { color: var(--ivory); }
.footer-legal {
  margin-top: 16px;
  font-size: 11px;
  color: var(--warm-tan);
  letter-spacing: 1px;
}

/* ============================================
   PAGE-SPECIFIC HELPERS
   ============================================ */
.notice {
  background: rgba(184, 151, 58, 0.06);
  border-left: 3px solid var(--gold);
  padding: 18px 22px;
  font-size: 13px;
  color: var(--warm-tan);
  letter-spacing: 0;
}

.tab-row {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--gold-border);
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.tab-row button {
  background: transparent;
  border: 0;
  color: var(--warm-tan);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 14px 22px;
  transition: color 0.2s, border-color 0.2s;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab-row button:hover { color: var(--ivory); }
.tab-row button.active { color: var(--gold); border-bottom-color: var(--gold); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 880px) {
  .site-nav {
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--header-scrolled);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 4px 0 8px;
    border-bottom: 1px solid var(--gold-border);
    display: none;
  }
  .site-nav.open { display: flex; }
  .site-nav a {
    padding: 16px var(--section-pad-x);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 12px;
  }
  .site-nav a.active::after { display: none; }
  .nav-toggle { display: inline-flex; }
  .feature-row { grid-template-columns: 1fr; }
  .feature-row__media { min-height: 280px; }
  .feature-row--image-right .feature-row__media { order: 0; }
  .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .page-hero { min-height: 420px; padding-top: 110px; padding-bottom: 60px; }
  .feature-row__watermark { font-size: 72px; }
}

/* ============================================
   MOTION — editorial pacing layer
   Quiet, restrained motion. Hero staggers in on first paint;
   feature rows and card grids reveal as they enter the viewport;
   numerals drift on scroll. Everything off when prefers-reduced-motion.
   ============================================ */
:root {
  --ease-out-quart: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-fast: 0.6s;
  --reveal-slow: 0.9s;
}

/* Hero entry — eyebrow → h1 → lede → CTAs cascade up on paint */
@keyframes hero-reveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-hero__content > div > * {
  opacity: 0;
  animation: hero-reveal var(--reveal-fast) var(--ease-out-quart) forwards;
}
.page-hero__content > div > *:nth-child(1) { animation-delay: 0.10s; }
.page-hero__content > div > *:nth-child(2) { animation-delay: 0.22s; }
.page-hero__content > div > *:nth-child(3) { animation-delay: 0.34s; }
.page-hero__content > div > *:nth-child(4) { animation-delay: 0.46s; }

/* Reveal-on-scroll — JS attaches .reveal--block / .reveal--cards;
   adds .reveal--visible when each enters the viewport */
.reveal--block {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--reveal-slow) var(--ease-out-quart),
              transform var(--reveal-slow) var(--ease-out-quart);
  will-change: opacity, transform;
}
.reveal--block.reveal--visible {
  opacity: 1;
  transform: none;
}

/* Card grids stagger their children 80ms apart for editorial pace */
.reveal--cards > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease-out-quart),
              transform 0.6s var(--ease-out-quart);
}
.reveal--cards.reveal--visible > * {
  opacity: 1;
  transform: none;
}
.reveal--cards.reveal--visible > *:nth-child(1)     { transition-delay: 0.00s; }
.reveal--cards.reveal--visible > *:nth-child(2)     { transition-delay: 0.08s; }
.reveal--cards.reveal--visible > *:nth-child(3)     { transition-delay: 0.16s; }
.reveal--cards.reveal--visible > *:nth-child(4)     { transition-delay: 0.24s; }
.reveal--cards.reveal--visible > *:nth-child(5)     { transition-delay: 0.32s; }
.reveal--cards.reveal--visible > *:nth-child(6)     { transition-delay: 0.40s; }
.reveal--cards.reveal--visible > *:nth-child(n+7)   { transition-delay: 0.48s; }

/* Watermark numerals drift on scroll — JS writes --parallax (in px) */
.feature-row__watermark {
  --parallax: 0;
  transform: translateY(calc(var(--parallax) * 1px));
  will-change: transform;
}

/* Editorial grain — print-magazine tactile signal over hero imagery.
   SVG noise, low opacity, blended onto the gradient overlay below it. */
.page-hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  opacity: 0.08;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Card hover — slower, more deliberate (was 0.3s, now 0.5s; lift was 2px, now 3px) */
.card {
  transition: background 0.5s var(--ease-out-quart),
              border-color 0.5s var(--ease-out-quart),
              transform 0.5s var(--ease-out-quart);
}
.card:hover {
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  /* Force end-states so reduced-motion users still see content */
  .page-hero__content > div > * { opacity: 1; animation: none; }
  .reveal--block, .reveal--cards > * { opacity: 1; transform: none; }
  .feature-row__watermark { transform: none; }
}

/* ============================================
   Membership page — editorial tier presentation,
   comparison table, coaching sessions, prices
   ============================================ */

/* Hero h1 italic emphasis — gold reads on dark hero better than burgundy */
.membership-hero__title em {
  font-style: italic;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: -0.005em;
}

/* ---- Tier grid: spans full container width with equal-height columns ----
   Uses CSS subgrid so the numeral / label / price / features / cta rows
   align across all cards. Cards stretch to share the row height. The
   featured column is 1.15× wider so it visually dominates the row — fixes
   the "all 4 cards have equal weight" composition issue. */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto auto 1fr auto;
  column-gap: 20px;
  row-gap: 0;
  align-items: stretch;
}
/* 3-tier variant — used on the Baker House Digital membership page */
.tier-grid--three {
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 24px;
  column-gap: 24px;
}
/* Single-card variant — used on bootcamp.html for the "What's included" block */
.tier-grid--single {
  grid-template-columns: minmax(0, 480px);
  justify-content: center;
  grid-template-rows: none;
}
.tier-grid--single .tier-card {
  display: flex;
  flex-direction: column;
  grid-template-rows: none;
  grid-row: auto;
}
@media (max-width: 1280px) {
  .tier-grid,
  .tier-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 28px;
  }
}
@media (max-width: 640px) {
  .tier-grid,
  .tier-grid--three { grid-template-columns: 1fr; gap: 24px; }
}

.tier-card {
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  row-gap: 0;
  background: #2a3340;
  border: 1px solid rgba(245, 240, 232, 0.08);
  padding: 28px 24px 28px;
  color: var(--ivory);
  transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease, background-color 280ms ease;
}
@media (max-width: 1280px) {
  .tier-card {
    display: flex;
    flex-direction: column;
    grid-template-rows: none;
    grid-row: auto;
  }
}
.tier-card:hover {
  transform: translateY(-4px);
  background: #2e3845;
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.6);
  border-color: rgba(184, 151, 58, 0.35);
}

.tier-card--featured {
  border-color: var(--gold);
  background: linear-gradient(180deg, #2a3340 0%, rgba(184, 151, 58, 0.08) 100%);
  box-shadow: 0 0 0 1px var(--gold) inset, 0 14px 40px -24px rgba(184, 151, 58, 0.5);
}
.tier-card--featured:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 0 1px var(--gold) inset, 0 28px 56px -28px rgba(184, 151, 58, 0.55);
}

/* Invitation tier — visually opposite Featured. Featured FILLS with gold
   tint (popular, claim it). Invitation is OUTLINE-only with a double
   gold rule (exclusive, you have to qualify). Same colour family, very
   different visual semantics. */
.tier-card--invitation {
  border-color: var(--gold);
  background: #2a3340;
  box-shadow: inset 0 0 0 4px #2a3340, inset 0 0 0 5px rgba(184, 151, 58, 0.4);
}

/* Banner ribbons above card — match the elevated card body */
.tier-card__banner {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ivory);
  background: #2a3340;
  border: 1px solid rgba(245, 240, 232, 0.2);
  white-space: nowrap;
}
.tier-card__banner--gold {
  color: var(--gold);
  border-color: var(--gold);
  background: #2a3340;
}

/* Signature Roman numeral — editorial accent.
   Reduced from clamp(44,4.2vw,56) → clamp(32,3vw,40). Original size was
   visually outweighing the price block, inverting the hierarchy
   (decorative > decision-driving). Now the price is the larger element. */
.tier-card__numeral {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(32px, 3vw, 40px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold);
  margin-bottom: 14px;
}
.tier-card__numeral--gold { color: var(--gold); }

/* Card head — tier name + tagline */
.tier-card__head {
  padding-bottom: 20px;
}
.tier-card__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--ivory);
  margin: 0 0 10px;
}
.tier-card__label--gold { color: var(--gold); }
.tier-card__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  line-height: 1.45;
  color: var(--warm-tan);
  margin: 0;
}

/* Price block — hairline-bracketed (light hairlines on dark) */
.tier-card__price {
  border-top: 1px solid rgba(245, 240, 232, 0.1);
  border-bottom: 1px solid rgba(245, 240, 232, 0.1);
  padding: 20px 0 18px;
  margin-bottom: 22px;
}
.tier-card__amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 3vw, 44px);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--ivory);
  margin: 0 0 10px;
}
.tier-card__amount--gold { color: var(--gold); }
.tier-card__period {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--warm-tan);
  margin: 0 0 5px;
}
.tier-card__sub {
  /* Was italic Bodoni — italic 4 / 1 / 7 looked too similar at 13px,
     which caused $42 to read as $12 on the client demo. Sans-serif
     digits at the same size are unambiguous. */
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--warm-tan);
  margin: 0;
}

/* Feature list */
.tier-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  flex: 1;
}
.tier-card__features li {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ivory);
  padding: 14px 0;
  border-bottom: 1px solid rgba(245, 240, 232, 0.08);
}
.tier-card__features li:last-child { border-bottom: 0; padding-bottom: 0; }
/* Lead feature — burgundy doesn't survive on dark navy, switch to gold */
.tier-card__lead {
  font-family: var(--font-display) !important;
  font-weight: 700;
  font-size: 15.5px !important;
  line-height: 1.35 !important;
  color: var(--gold) !important;
  padding-top: 0 !important;
}
.tier-card__lead--gold { color: var(--gold) !important; }

/* CTA — ivory bordered button, inverts to ivory fill on hover */
.tier-card__cta {
  display: block;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ivory);
  padding: 17px 18px;
  border: 1px solid rgba(245, 240, 232, 0.5);
  background: transparent;
  text-decoration: none;
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
  margin-top: auto;
}
.tier-card__cta:hover {
  background: var(--ivory);
  color: var(--navy);
  border-color: var(--ivory);
}
.tier-card__cta--gold {
  color: var(--gold);
  border-color: var(--gold);
}
.tier-card__cta--gold:hover {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
}

/* ---- Side-by-side comparison table (on dark navy section) ----
   Tufte 1+1=3: no outer border. Row hairlines + section tint define structure.
   Hidden below 768px in favor of the .mobile-compare accordion. */
.compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-compare { display: none; }
@media (max-width: 768px) {
  .compare-wrap { display: none; }
  .mobile-compare { display: block; }
}

/* ---- Mobile compare accordion ---- */
.mobile-compare {
  max-width: 560px;
  margin: 0 auto;
}
.m-tier {
  border: 1px solid rgba(245, 240, 232, 0.08);
  background: #2a3340;
  margin-bottom: 12px;
}
.m-tier[open] {
  border-color: rgba(184, 151, 58, 0.32);
}
.m-tier__summary {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 18px 18px;
  cursor: pointer;
  list-style: none;
}
.m-tier__summary::-webkit-details-marker { display: none; }
.m-tier__summary::after {
  content: "+";
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  color: var(--gold);
  width: 16px;
  text-align: center;
  transition: transform 220ms ease;
}
.m-tier[open] .m-tier__summary::after {
  content: "\2212"; /* minus */
}
.m-tier__numeral {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: var(--gold);
  min-width: 26px;
  text-align: left;
}
.m-tier__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.1;
  color: var(--ivory);
}
.m-tier__price {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--warm-tan);
  white-space: nowrap;
}

.m-tier__body {
  padding: 4px 18px 22px;
  border-top: 1px solid rgba(245, 240, 232, 0.06);
}
.m-tier__cat {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 18px 0 6px;
}
.m-tier__cat:first-child { margin-top: 14px; }
.m-tier__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.m-tier__list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ivory);
  border-bottom: 1px solid rgba(245, 240, 232, 0.06);
}
.m-tier__list li:last-child { border-bottom: 0; }
.m-tier__list li em { font-style: italic; }

.m-mark {
  display: inline-block;
  text-align: right;
  font-size: 14px;
}
.m-mark--yes {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
}
.m-mark--no {
  color: rgba(245, 240, 232, 0.32);
}
.m-val {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--warm-tan);
  text-align: right;
}
.m-val--accent {
  color: var(--gold);
  font-weight: 600;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  color: var(--ivory);
  min-width: 880px;
}
.compare-table th,
.compare-table td {
  padding: 15px 16px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid rgba(245, 240, 232, 0.1);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ivory);
}
.compare-table thead th {
  background: transparent;
  border-bottom: 2px solid rgba(184, 151, 58, 0.5);
  padding: 18px 12px;
}
.compare-table__rowhead {
  text-align: left !important;
  font-size: 11px !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm-tan);
  width: 28%;
  background: transparent !important;
}
.compare-table td:first-child {
  text-align: left;
  font-size: 14px;
  color: var(--ivory);
}
.compare-th__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--ivory);
}
.compare-th__price {
  display: block;
  font-family: var(--font-body);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--warm-tan);
  margin-top: 4px;
}

/* Section rows — gold tint reads as warm band on dark navy */
.compare-section-row td {
  background: rgba(184, 151, 58, 0.12);
  padding: 12px 16px;
  border-bottom: 0;
}
.compare-section-label {
  display: block;
  text-align: left;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Dot / dash markers */
.compare-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
}
.compare-dash {
  color: rgba(245, 240, 232, 0.32);
  font-size: 16px;
}
/* Was burgundy on ivory — on dark navy, burgundy disappears; switch to gold */
.compare-burgundy {
  font-weight: 600;
  color: var(--gold);
}

/* ---- Pull-quote interstitial (on ivory) ---- */
.membership-quote {
  padding-top: clamp(72px, 9vw, 110px);
  padding-bottom: clamp(72px, 9vw, 110px);
}
.membership-quote .eyebrow-gold { margin-bottom: var(--space-2xl); }
.membership-quote__body {
  margin: 0 auto;
  max-width: 880px;
  padding: 0;
  text-align: center;
  border: 0;
}
.membership-quote__body p {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0;
}
.membership-quote__body em {
  font-style: italic;
  color: var(--gold);
}
.membership-quote__attribution {
  text-align: center;
  margin-top: var(--space-3xl);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--slate);
}

/* ---- How coaching works — on ivory section ---- */
.sessions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
}
@media (max-width: 880px) {
  .sessions { grid-template-columns: 1fr; gap: 40px; }
}
.session {
  position: relative;
  border-top: 1px solid var(--gold);
  padding-top: 28px;
}
.session__numeral {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(40px, 3.6vw, 52px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold);
  margin: 0 0 18px;
}
.session__eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--burgundy);
  margin: 0 0 14px;
}
.session__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.1vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 18px;
}
.session__body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--slate);
  margin: 0;
}

/* ---- Pricing rationale (Why these prices — on dark navy) ---- */
.pricing-rationale {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 48px;
  border: 1px solid var(--gold-border);
  background: rgba(184, 151, 58, 0.06);
}
@media (max-width: 980px) {
  .pricing-rationale { grid-template-columns: 1fr; gap: 32px; padding: 32px; }
}
.pricing-rationale__copy h2 em {
  font-style: italic;
  color: var(--gold);
}
.comp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.comp-card {
  border-left: 2px solid var(--gold);
  padding: 14px 18px;
  background: #2a3340;
}
.comp-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--warm-tan);
  margin: 0 0 4px;
}
.comp-card__desc {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--warm-tan);
  margin: 0 0 10px;
}
.comp-card__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--gold);
  margin: 0;
  line-height: 1;
}

.fine-print {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: 0.02em;
  color: var(--warm-tan);
  text-align: center;
  margin: 0 auto;
  max-width: 720px;
}
.section--ivory .fine-print { color: var(--slate); }

/* ---- Closing CTA (dark navy) ---- */
.membership-cta {
  padding-top: clamp(72px, 9vw, 100px);
  padding-bottom: clamp(72px, 9vw, 100px);
  border-top: 1px solid var(--gold-border);
}

/* ---- Membership application form — tier picker ---- */
.tier-select {
  border: 0;
  padding: 0;
  margin: 0;
}
.tier-select__legend {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-lg);
  padding: 0;
  float: none;
}
.tier-select__options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.tier-select__options label {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid rgba(245, 240, 232, 0.1);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ivory);
}
.tier-select__options label:hover {
  border-color: rgba(184, 151, 58, 0.45);
  background: rgba(184, 151, 58, 0.04);
}
.tier-select__options label:has(input:checked) {
  border-color: var(--gold);
  background: rgba(184, 151, 58, 0.08);
  box-shadow: 0 0 0 1px var(--gold) inset;
}
/* Custom radio styling matching .field-radio-group pattern, sized down */
.tier-select__options input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  background: transparent;
  border: 1.5px solid var(--gold-border);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: border-color 200ms ease;
}
.tier-select__options input[type="radio"]:checked {
  border-color: var(--gold);
}
.tier-select__options input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--gold);
  border-radius: 50%;
}
.tier-select__numeral {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--gold);
  min-width: 28px;
  text-align: left;
}
.tier-select__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ivory);
}
.tier-select__price {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--warm-tan);
  white-space: nowrap;
}
@media (max-width: 540px) {
  /* Drop to a 3-column row on small screens: radio | numeral | name.
     Price is hidden — the user already saw pricing in the tier cards
     above, and the selection itself encodes which tier they chose. */
  .tier-select__options label {
    grid-template-columns: auto auto 1fr;
    gap: 12px;
    padding: 14px 16px;
  }
  .tier-select__price { display: none; }
  .tier-select__name { font-size: 15px; }
  .tier-select__numeral { font-size: 20px; min-width: 24px; }
}

/* ============================================
   Titan reveal — content/ebooks page
   ============================================
   The 40-titan list is revealed week-by-week as ebooks ship.
   In "reveal" mode (.is-titan-reveal), only the first ~12 cards
   render, with a vertical mask gradient that has the early cards
   crisp and the later ones fading into fog. As releases ship,
   the data-revealed attribute can be increased and the mask line
   moves down — visually communicating "more is coming." */

.card-grid.is-titan-reveal {
  position: relative;
  /* WebKit needs the prefix even though it shipped unprefixed in 2024.
     We pair both so older WebKit (iOS 15.x) still gets the effect. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 34%,
    rgba(0, 0, 0, 0.78) 54%,
    rgba(0, 0, 0, 0.4) 74%,
    rgba(0, 0, 0, 0.1) 92%,
    rgba(0, 0, 0, 0.04) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 34%,
    rgba(0, 0, 0, 0.78) 54%,
    rgba(0, 0, 0, 0.4) 74%,
    rgba(0, 0, 0, 0.1) 92%,
    rgba(0, 0, 0, 0.04) 100%
  );
}

/* Test/preview cutoff: render only the first 12 titan cards.
   DOM order: era-header(1) → 10 titans(2-11) → era-header(12) → titans 11-12(13-14).
   Anything from child 15 onward is hidden. The mask gradient handles the visual
   fade across the visible 14 children. */
.card-grid.is-titan-reveal > :nth-child(n + 15) {
  display: none;
}

/* In reveal-test mode the filter-tab counts (40 / 3 / 37) don't match what's
   rendered, so hide the filter row. Re-show by removing .is-titan-reveal. */
[data-tab-panel="ebooks"]:has(.card-grid.is-titan-reveal) .filter-tabs {
  display: none;
}

/* Lower cards in the visible region also get a soft blur so the fade reads
   as "fog" rather than just transparency. The mask handles opacity; the
   blur adds the perceptual depth. Applied to the children that sit in the
   bottom half of the reveal — cards 9–12 (children 11, 13, 14). */
.card-grid.is-titan-reveal > :nth-child(11),
.card-grid.is-titan-reveal > :nth-child(13),
.card-grid.is-titan-reveal > :nth-child(14) {
  filter: blur(1.6px);
  transition: filter 600ms var(--ease-out-quart, ease-out);
}
.card-grid.is-titan-reveal > :nth-child(11):hover,
.card-grid.is-titan-reveal > :nth-child(13):hover,
.card-grid.is-titan-reveal > :nth-child(14):hover {
  filter: blur(0);
}

/* "Next reveal" hint sitting below the masked grid — a one-line editorial
   note that explains the mechanic and invites the user back. The grid mask
   stops short of this so it stays crisp. */
.titan-reveal-coda {
  margin: clamp(40px, 5vw, 64px) auto 0;
  max-width: 560px;
  text-align: center;
  position: relative;
}
.titan-reveal-coda::before {
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  margin: 0 auto 20px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.titan-reveal-coda__label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 8px;
}
.titan-reveal-coda__body {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.45;
  color: var(--warm-tan);
  margin: 0;
}
.titan-reveal-coda__body em {
  color: var(--gold);
  font-style: italic;
}

/* ============================================
   Baker House Digital — membership v2 additions
   ============================================ */

/* Tier-card price unit (e.g. "/month", "/forever", "– $25K/yr") — appended
   inline to the big amount in body sans, smaller, warm-tan */
.tier-card__unit {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--warm-tan);
  margin-left: 4px;
  white-space: nowrap;
}
.tier-card__amount {
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex-wrap: wrap;
}

/* Founding-offer line on the Digital tier — small inline callout sized to
   add minimal height to the price block (was creating a tall void in the
   other tiers' price rows via subgrid alignment). */
.tier-card__sub--founding {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(184, 151, 58, 0.4);
  color: var(--burgundy);
  font-weight: 500;
  font-size: 11.5px;
  line-height: 1.4;
}
.tier-card__sub--founding strong {
  color: var(--ivory);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
}
.tier-card--featured .tier-card__sub--founding {
  border-top-color: rgba(212, 177, 75, 0.4);
  color: var(--gold);
}
.tier-card--featured .tier-card__sub--founding strong {
  color: var(--ivory);
}

/* ---- Founding member counter ---- */
.founding-section {
  padding-top: clamp(48px, 5vw, 64px);
  padding-bottom: clamp(48px, 5vw, 64px);
}
.founding-counter {
  max-width: 760px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(184, 151, 58, 0.04) 0%, rgba(184, 151, 58, 0.1) 100%), #2a3340;
  border: 1px solid var(--gold);
  padding: clamp(24px, 3vw, 36px) clamp(28px, 4vw, 48px);
  text-align: center;
}
.founding-counter__eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}
.founding-counter__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.2;
  color: var(--ivory);
  margin: 0 0 20px;
}
.founding-counter__headline em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
}
.founding-counter__bar {
  height: 6px;
  background: rgba(245, 240, 232, 0.12);
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
}
.founding-counter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), #d4b14b);
  transition: width 600ms var(--ease-out-quart, ease-out);
}
.founding-counter__counts {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--warm-tan);
}
.founding-counter__counts strong {
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  margin-right: 4px;
}
.founding-counter__sub {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--warm-tan);
  margin: -6px 0 18px;
  line-height: 1.5;
}

/* ---- Weekly office hours sessions ----
   Three-session grid with day-coded top borders: Monday=burgundy,
   Wednesday=gold, Friday=slate. Same .session base styling otherwise. */
.sessions--weekly {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: stretch;
}
@media (max-width: 980px) {
  .sessions--weekly { grid-template-columns: 1fr; gap: 32px; }
}
.session--mon,
.session--wed,
.session--fri {
  position: relative;
  border-top: 2px solid var(--burgundy);
  padding-top: 28px;
  padding-left: 0;
  padding-right: 0;
}
.session--wed { border-top-color: var(--gold); }
.session--fri { border-top-color: var(--slate); }

.session__day {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--burgundy);
  margin: 0 0 10px;
}
.session--wed .session__day { color: var(--gold); }
.session--fri .session__day { color: var(--slate); }

.session__format {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 16px;
}

/* ---- Mechanics band — 4-item grid below office hours ----
   Sand-tinted block with gold italic numerals and serif item names */
.mech-grid {
  margin-top: clamp(60px, 7vw, 88px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: clamp(28px, 3.5vw, 44px) clamp(20px, 3vw, 36px);
  background: var(--cream);
}
.mech-item {
  padding: 0 clamp(14px, 1.5vw, 20px);
  border-left: 1px solid rgba(34, 42, 53, 0.18);
}
.mech-item:first-child {
  border-left: 0;
  padding-left: 0;
}
.mech-item__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 14px;
  color: var(--gold);
  margin: 0 0 8px;
  letter-spacing: 0.04em;
}
.mech-item__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  color: var(--navy);
  margin: 0 0 8px;
}
.mech-item__body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--slate);
  margin: 0;
}
@media (max-width: 980px) {
  .mech-grid { grid-template-columns: 1fr 1fr; gap: 24px 0; }
  .mech-item:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 540px) {
  .mech-grid { grid-template-columns: 1fr; gap: 0; padding: 28px 24px; }
  .mech-item {
    border-left: 0;
    border-top: 1px solid rgba(34, 42, 53, 0.15);
    padding: 22px 0 0;
  }
  .mech-item:first-child { border-top: 0; padding-top: 0; }
}

/* ---- 5-col compare table (consolidated tier chart) ----
   Wider min-width to accommodate 5 tier columns + benefit column. */
.compare-table--five {
  min-width: 1180px;
}
.compare-table--five thead th {
  width: auto;
}
/* 5-tier column tints — Digital (col 5) + Inner Circle (col 6) get a
   subtle gold-on-navy background so the featured columns read as
   vertical blocks. Section-row tint wins over column tint. */
.compare-table--five tbody td:nth-child(5),
.compare-table--five tbody td:nth-child(6) {
  background: rgba(184, 151, 58, 0.025);
}
.compare-table--five tbody tr.compare-section-row td {
  background: rgba(184, 151, 58, 0.14);
}

/* ============================================
   Released-titans block — content/ebooks page
   ============================================ */
.released-titans {
  margin-bottom: clamp(40px, 5vw, 56px);
}
.released-titans__head {
  margin-bottom: var(--space-2xl);
}
.released-titans__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
/* The READ-NOW ebook strip holds exactly 3 released titans — give it its own
   3-up desktop track so it isn't 3-in-a-4-col with a gap. Mobile breakpoints
   below still apply (selector is more specific, but only sets desktop cols). */
.released-titans__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) {
  .released-titans__grid { grid-template-columns: repeat(2, 1fr); }
  .released-titans__grid--three { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .released-titans__grid { grid-template-columns: 1fr; gap: 20px; }
  .released-titans__grid--three { grid-template-columns: 1fr; }
}
.released-titans__rule {
  height: 1px;
  margin: clamp(40px, 5vw, 64px) 0;
  background: linear-gradient(to right, transparent, var(--gold-border), transparent);
}

/* ============================================
   BOOT CAMP — ticketing styles REMOVED
   The 3-day / $1,500-per-day ticket store was replaced by the admissions page
   (June 2 update: 2-day program). The old day-grid / ticket-summary / refund
   styles were deleted; admissions tiers use .levels and the deposit line uses
   .deposit-note instead.
   ============================================ */

/* Coaching submit button — inherits .submit-btn; kept as a hook for any
   ivory-section tuning. Default gold-on-navy reads fine on ivory. */
.submit-btn--ivory { }

/* Coaching form lives on an ivory section — give its text inputs a light
   treatment so they don't read as dark boxes dropped on cream. */
.section--ivory .field label { color: var(--burgundy); }
.section--ivory .field input:not([type="radio"]):not([type="checkbox"]) {
  background: #fffdf8;
  border-color: rgba(34, 42, 53, 0.18);
  color: var(--navy);
}
.section--ivory .field input::placeholder { color: rgba(34, 42, 53, 0.35); }
.section--ivory .field input:focus { border-color: var(--gold); }

/* (Removed: .ticket-step helpers for the old ticket form's numbered steps —
   the admissions application uses .intent-section spacing instead.) */

/* Toolkit "how to use" mini-steps inside each tool card. Numbered, compact,
   sits under the tool's preview so each card reads: what it is → preview →
   how to use → open in the app. */
.card__howto {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--gold-border);
}
.card__howto-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--space-sm);
}
.card__howto-steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card__howto-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 26px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--warm-tan);
}
.card__howto-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border: 1px solid var(--gold-border);
  border-radius: 50%;
  color: var(--gold);
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Toolkit page — 5-tool layout. 3 columns with the flagship "Talk to Richard"
   card spanning 2, so 1 wide + 4 standard fills exactly two rows of three —
   no awkward lone card. Collapses to 2-up then 1-up. */
.toolkit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.toolkit-grid > :first-child { grid-column: span 2; }
@media (max-width: 980px) {
  .toolkit-grid { grid-template-columns: repeat(2, 1fr); }
  .toolkit-grid > :first-child { grid-column: span 2; }
}
@media (max-width: 640px) {
  .toolkit-grid { grid-template-columns: 1fr; }
  .toolkit-grid > :first-child { grid-column: span 1; }
}

/* Email-to-read gate (Content page). Design only — the capture moment before
   each released ebook; delivery is wired later. Simple dark overlay (no
   frosted-glass) + a navy dialog card on brand. */
.email-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.email-gate[hidden] { display: none; }
.email-gate__overlay {
  position: absolute;
  inset: 0;
  background: rgba(18, 23, 30, 0.88);
}
.email-gate__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  background: var(--navy);
  border: 1px solid var(--gold-border);
  padding: clamp(28px, 5vw, 44px);
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.email-gate__close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  color: var(--warm-tan);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s;
}
.email-gate__close:hover { color: var(--gold); }
.email-gate__form {
  margin-top: var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.email-gate__form input[type="email"] {
  width: 100%;
  padding: 15px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ivory);
  background: rgba(245, 240, 232, 0.06);
  border: 1px solid var(--gold-border);
  outline: none;
  text-align: center;
  transition: border-color 0.25s, background 0.25s;
}
.email-gate__form input[type="email"]::placeholder { color: rgba(200, 191, 169, 0.5); }
/* Watch-on-page video lightbox — same design language as the email gate.
   Per Ryan (June 5): titan films play directly on the page. */
.video-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
}
.video-gate[hidden] { display: none; }
.video-gate__overlay {
  position: absolute;
  inset: 0;
  background: rgba(18, 23, 30, 0.92);
}
.video-gate__frame {
  position: relative;
  z-index: 1;
  width: min(1100px, 100%);
  background: #000;
  border: 1px solid var(--gold-border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.video-gate__frame video {
  display: block;
  width: 100%;
  height: auto;
  /* Stable 16:9 box even before metadata loads (preload="none") — kills the
     brief frame-doubling / black-gap some browsers showed on open. The real
     frames fit inside via object-fit; portrait reels override below. */
  aspect-ratio: 16 / 9;
  max-height: 82vh;
  object-fit: contain;
  background: #000;
}
/* When the YouTube iframe is showing, the <video> is set hidden — but the rule
   above (display:block) would override the [hidden] attribute and leave an empty
   native control bar on top. Force it gone. */
.video-gate__frame video[hidden] { display: none; }
.video-gate__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 40px;
  height: 40px;
  background: rgba(18, 23, 30, 0.7);
  border: 1px solid var(--gold-border);
  color: var(--ivory);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.video-gate__close:hover { color: var(--gold); border-color: var(--gold); }
/* YouTube flavor of the lightbox (long-form films, e.g. the Cornell
   interview) — same frame, iframe instead of <video>. */
.video-gate__yt {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 82vh;
  border: 0;
}
/* The iframe is display:block (like the <video> above), so the [hidden]
   attribute alone won't hide it — ytFrame.hidden=true on close/switch otherwise
   left the iframe stacked under the next film (the black gap / a second video
   playing). Force it gone, mirroring .video-gate__frame video[hidden]. */
.video-gate__yt[hidden] { display: none; }
/* Portrait (9:16) videos in the lightbox — e.g. the tax-animation reels. Narrow,
   height-driven frame so they fill the screen vertically instead of rendering
   tiny inside a wide letterboxed box. Toggled by main.js on loadedmetadata. */
.video-gate__frame--reel { width: auto; max-width: 100%; }
.video-gate__frame--reel video { width: auto; max-width: 100%; height: 82vh; max-height: 82vh; aspect-ratio: auto; }

/* Reel (tax-animation) cards reuse the titan card shell AND the titan grid, so
   they're the same size as the titan cards and left-align the same way. Only the
   poster differs: a full-colour branded title card kept from the top, not the
   grayscale titan treatment. */
.card--reel .card__portrait img { filter: none; object-position: center top; }
.card--reel:hover .card__portrait img { filter: none; transform: scale(1.04); }
.email-gate__form input[type="email"]:focus { border-color: var(--gold); background: rgba(245, 240, 232, 0.1); }
.email-gate__success { margin-top: var(--space-xl); }

/* ============================================
   BOOT CAMP — ADMISSIONS PAGE
   ============================================ */

/* ALSO FOR — four secondary audiences, tied to the pillars above via a gold
   hairline-left accent (design-review motif fix). Single column on mobile to
   match the stacked pillar rhythm. */
.also-for {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2xl) var(--space-3xl);
}
.also-for__item {
  padding-left: 0;
  border-left: 0;
}
.also-for__icon {
  display: block;
  width: 46px;
  height: 46px;
  margin-bottom: var(--space-md);
  color: var(--navy);
}
.also-for__icon svg { width: 100%; height: 100%; display: block; }
.also-for__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 8px;
}
.also-for__desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--slate);
  margin: 0;
}
@media (max-width: 880px) {
  .also-for { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .also-for { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* CURRICULUM — editorial intro rail above a 3×3 module grid (nine modules,
   June 6 email). Desktop 3-col, tablet 2-col, mobile single stacked column.
   Numerals + gold accents preserved; no motion here, so reduced-motion and the
   site's reveal animations are untouched. */
.curriculum {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.curriculum__modules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl) var(--space-3xl);
}
.curriculum__modules > li {
  display: flex;
  gap: var(--space-md);
  align-items: baseline;
}
.curriculum__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--gold);
  flex-shrink: 0;
  min-width: 38px;
}
.curriculum__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
  color: var(--ivory);
  margin: 0 0 4px;
}
.curriculum__desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--warm-tan);
  margin: 0;
}
@media (max-width: 880px) {
  .curriculum { gap: var(--space-4xl); }
  /* tablet: 2-col */
  .curriculum__modules { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl) var(--space-2xl); }
}
@media (max-width: 560px) {
  /* mobile: single stacked column */
  .curriculum__modules { grid-template-columns: 1fr; }
}

/* PROGRAM LEVELS — three information cards, not a cart. */
/* Two tiers since June 4 (Scholarship cut) — narrower track keeps the pair
   centered at the same card width they had as a trio. */
.levels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2xl);
  max-width: 780px;
  margin: 0 auto;
}
.level {
  position: relative;
  background: rgba(184, 151, 58, 0.04);
  border: 1px solid var(--gold-border);
  padding: var(--space-3xl) var(--space-2xl);
  display: flex;
  flex-direction: column;
}
.level--featured {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
  background: rgba(184, 151, 58, 0.07);
}
.level__banner {
  position: absolute;
  top: 0;
  right: var(--space-2xl);
  transform: translateY(-50%);
  background: var(--gold);
  color: var(--navy);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  padding: 5px 10px;
}
.level__kicker {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--space-sm);
}
.level__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.1;
  color: var(--ivory);
  margin: 0 0 var(--space-sm);
}
/* Tuition, public since June 4 per Ryan ($3,000 GA / $3,750 Founder's). */
.level__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: var(--ivory);
  margin: 2px 0 var(--space-md);
}
.level--featured .level__price { color: var(--gold); }
.level__tagline {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--warm-tan);
  margin: 0 0 var(--space-xl);
}
.level__list {
  list-style: none;
  margin: 0 0 var(--space-xl);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.level__list li {
  position: relative;
  padding-left: var(--space-lg);
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cream);
}
.level__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  background: var(--gold);
  border-radius: 50%;
}
.level__list .level__lead { font-weight: 600; color: var(--ivory); }
.level__note {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm-tan);
  margin: 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--gold-border);
}
.level--featured .level__note { color: var(--gold); }
@media (max-width: 920px) {
  .levels { grid-template-columns: 1fr; max-width: 480px; }
}

/* Section divider — a gold hairline between adjacent dark sections so they
   don't blur together (used where two navy sections meet). */
.section-divider {
  height: 1px;
  width: min(86%, 1080px);
  margin: 0 auto;
  background: linear-gradient(to right, transparent, var(--gold-border) 22%, var(--gold-border) 78%, transparent);
}

/* DEPOSIT NOTE — replaces the ticket refund-policy block. */
.deposit-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  justify-content: center;
  text-align: center;
  padding: var(--space-lg) var(--space-xl);
  background: rgba(184, 151, 58, 0.08);
  border: 1px solid var(--gold-border);
}
.deposit-note__amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--gold);
}
.deposit-note__terms {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--cream);
}

/* ============================================
   BOOT CAMP — SESSION DATES ("Season Scrubber" interactive timeline)
   Drag/scrub a gold timeline Sep–Dec; the focused month's oversized Bodoni
   dates animate into a hero. Pointer + hover + click + keyboard; transform/
   opacity only, 60fps. JS in assets/js/scrubber.js (self-guards on
   [data-scrubber]). Honors reduced-motion; <noscript> static fallback.
   Class names are unique to this widget — verified no collisions site-wide.
   ============================================ */
:root { --ease-silk: cubic-bezier(0.22, 1, 0.36, 1); }

.season {
  position: relative;
  padding: clamp(64px, 9vw, 120px) clamp(20px, 5vw, 56px) clamp(80px, 10vw, 140px);
  max-width: 1340px;
  margin: 0 auto;
  overflow: hidden;
}
.season__intro {
  max-width: 720px;
  margin: 0 auto clamp(40px, 6vw, 72px);
  text-align: center;
}
.season__heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ivory);
  margin: 14px 0 0;
}
.season__lede {
  font-weight: 300;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
  color: var(--warm-tan);
  max-width: 600px;
  margin: 18px auto 0;
}

/* HERO STAGE — the focused month blows up here */
.stage {
  position: relative;
  /* Was min-height clamp(360px, 42vw, 500px) for the 4-panel scrubber era —
     with September alone it left a void below the TBA line (client, June 7).
     Let the single panel size the stage. */
  min-height: 0;
  display: grid;
  place-items: center;
  margin-bottom: 0;
}
.stage__ghost {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 0;
}
.stage__ghost-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(120px, 21vw, 290px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(184, 151, 58, 0.13);
  text-stroke: 1px rgba(184, 151, 58, 0.13);
  white-space: nowrap;
  user-select: none;
  will-change: transform, opacity;
}
.stage__panels {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  place-items: center;
}
.month-panel {
  grid-area: 1 / 1;
  width: 100%;
  max-width: 980px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(22px) scale(0.985);
  transition: opacity 0.5s var(--ease-silk), transform 0.6s var(--ease-silk);
  will-change: transform, opacity;
}
.month-panel.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.month-panel__eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 6px;
}
.month-panel__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 0 0 clamp(24px, 3vw, 40px);
  color: var(--ivory);
}
/* "Hosted by CohnReznick." — Ryan (June 4): slightly larger bold line between
   the NYC eyebrow and the month name. */
.month-panel__host {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--cream);
  margin: 0 0 12px;
}
/* Small, subtly visible note under the date options while only September
   is announced. */
.month-panel__tba {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--warm-tan);
  opacity: 0.65;
  margin: clamp(28px, 4vw, 40px) 0 0;
}
.options {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: clamp(20px, 4vw, 72px);
  max-width: 880px;
  margin: 0 auto;
}
.option { position: relative; }
.option__kind {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 10px;
}
.option__numerals {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(56px, 9vw, 118px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--ivory);
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.06em;
}
.option__numerals .dash {
  color: var(--gold);
  font-style: italic;
  font-weight: 400;
  font-size: 0.62em;
  transform: translateY(-0.12em);
}
.option__days {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 20px);
  color: var(--warm-tan);
  margin: 14px 0 0;
}
.option__loc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm-tan);
  opacity: 0.7;
  margin: 8px 0 0;
}
.options__rule {
  align-self: stretch;
  width: 1px;
  min-height: 120px;
  background: linear-gradient(to bottom, transparent, var(--gold-border) 18%, var(--gold-border) 82%, transparent);
}

/* THE TIMELINE / SCRUBBER */
.scrubber {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 8px;
  touch-action: pan-y;
}
.scrubber__hint {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--warm-tan);
  opacity: 0.55;
  margin: 0 0 28px;
  transition: opacity 0.4s ease;
}
.track {
  position: relative;
  height: 64px;
  cursor: grab;
  outline: none;
}
.track:active { cursor: grabbing; }
.track__line {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(to right, rgba(184, 151, 58, 0.18), rgba(184, 151, 58, 0.4), rgba(184, 151, 58, 0.18));
}
.track__progress {
  position: absolute;
  left: 0; top: 50%;
  height: 2px;
  transform: translateY(-50%);
  width: 0;
  background: linear-gradient(to right, rgba(184, 151, 58, 0.35), var(--gold));
  box-shadow: 0 0 12px rgba(184, 151, 58, 0.5);
  will-change: width;
}
.tick {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  background: none;
  border: none;
  padding: 18px 14px;
  font: inherit;
}
.tick__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--navy);
  border: 1px solid var(--gold-border);
  transition: transform 0.45s var(--ease-silk), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.tick__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 14px;
  transition: color 0.4s ease, letter-spacing 0.4s ease;
  white-space: nowrap;
}
.tick.is-near .tick__dot { background: rgba(184, 151, 58, 0.4); border-color: var(--gold); }
.tick.is-active .tick__dot {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.35);
  box-shadow: 0 0 0 4px rgba(184, 151, 58, 0.14), 0 0 16px rgba(184, 151, 58, 0.5);
}
.tick.is-active .tick__label { color: var(--ivory); letter-spacing: 0.2em; }
.marker {
  position: absolute;
  top: 50%; left: 0;
  width: 2px; height: 64px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  will-change: transform;
  z-index: 3;
}
.marker__stem {
  position: absolute;
  left: 50%; top: 50%;
  width: 1px; height: 44px;
  transform: translate(-50%, -50%);
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
}
.marker__bead {
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 18px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(184, 151, 58, 0.12), 0 0 20px rgba(184, 151, 58, 0.55);
  transition: box-shadow 0.3s ease;
}
.track:focus-visible ~ .marker .marker__bead,
.track.is-dragging ~ .marker .marker__bead {
  box-shadow: 0 0 0 6px rgba(184, 151, 58, 0.2), 0 0 26px rgba(184, 151, 58, 0.7);
}
.track:focus-visible { box-shadow: 0 0 0 2px rgba(184, 151, 58, 0.5); border-radius: 8px; }
.marker__caret {
  position: absolute;
  left: 50%;
  bottom: calc(50% + 30px);
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--gold);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.track.is-dragging ~ .marker .marker__caret,
.track:focus-visible ~ .marker .marker__caret { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .month-panel { transition: opacity 0.001s linear; transform: none; }
  .month-panel.is-active { transform: none; }
  .stage__ghost-name { transition: none; }
  .marker, .track__progress, .tick__dot { transition: none !important; }
}
@media (max-width: 720px) {
  .options { grid-template-columns: 1fr; gap: clamp(28px, 7vw, 40px); }
  .options__rule {
    width: 60%; height: 1px; min-height: 0; justify-self: center;
    background: linear-gradient(to right, transparent, var(--gold-border), transparent);
  }
  .tick__label { font-size: 10px; letter-spacing: 0.08em; }
  .scrubber { padding: 0; }
}
@media (max-width: 420px) {
  .tick__label { display: none; }
  .tick.is-active .tick__label { display: block; }
}

/* No-JS static fallback — shown only inside <noscript> (see bootcamp.html) */
.nojs-grid {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.nojs-card { background: #2f3b4a; border: 1px solid var(--gold-border); padding: 28px 22px; }
.nojs-card h3 { font-family: var(--font-display); margin: 0 0 12px; color: var(--ivory); }
.nojs-card p { font-family: var(--font-body); font-size: 13.5px; line-height: 1.6; color: var(--cream); margin: 0; }
.nojs-card small { color: var(--warm-tan); }

/* ==========================================================================
   APPENDED — June 10 2026 audit remediation (forms/a11y pass).
   Essay character counters + no-JS form notes. Existing variables only;
   nothing above this line was touched.
   ========================================================================== */

/* "n / 900" live counter under the membership "about" / bootcamp "goal"
   textareas (wired in main.js via [data-counter-for]). Quiet, right-aligned,
   in the same muted voice the dark form sections use for their fine print.
   Slate (#44546a) is illegible on navy, so the slate tone applies only when
   a counter ever sits on an ivory section. */
.field__counter {
  margin: 0;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-align: right;
  color: var(--warm-tan);
  opacity: 0.7;
}
.section--ivory .field__counter { color: var(--slate); opacity: 0.85; }

/* No-JS note rendered inside <noscript> next to each JS-driven form. */
.form-noscript {
  margin-top: var(--space-lg);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--warm-tan);
}
.form-noscript a { color: var(--gold); border-bottom: 1px solid var(--gold); }
.section--ivory .form-noscript { color: var(--slate); }


/* ============================================================
   ASK RICHARD floating widget (Ryan, June 10 email)
   A fixed avatar circle + speech bubble in the lower-right of
   every page EXCEPT the Toolkit (which carries its own button).
   Injected by main.js (initAskRichard). The avatar image is an
   interim navy monogram tile (ask-richard-interim.png) — replace
   that file with the Avatar Richard face when Ryan sends it.
   ============================================================ */
.ask-richard {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90; /* above page content, BELOW the email/video gates (z-index 100) */
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.ask-richard__bubble {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--navy);
  background: var(--ivory);
  padding: 11px 14px;
  border-radius: 16px 16px 4px 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  white-space: nowrap;
}
.ask-richard__avatar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--navy);
  box-shadow: 0 0 0 2px var(--gold), 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s ease;
}
.ask-richard__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ask-richard:hover .ask-richard__avatar,
.ask-richard:focus-visible .ask-richard__avatar {
  transform: translateY(-2px);
}
.ask-richard:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 30px;
}
@media (max-width: 640px) {
  .ask-richard { right: 14px; bottom: 14px; }
  .ask-richard__avatar { width: 48px; height: 48px; }
  .ask-richard__bubble { font-size: 11px; padding: 9px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ask-richard__avatar { transition: none; }
}

/* ============================================================
   ASK RICHARD — in-page chat panel (Ryan's June 10 order)
   The launcher above no longer navigates away: main.js builds
   this panel on first click and chats through /api/ask-richard
   (same-origin proxy — CSP connect-src 'self' intact). Same
   design family as the email gate: navy card, gold hairlines,
   ivory type, Bodoni wordmark in the header. Sits at z-index 95
   — above page content AND the launcher (90), below the email /
   video gates (100), which must keep winning.
   ============================================================ */
/* Launcher reset — it was an <a>, it's a <button> now (the widget is
   JS-injected, so no no-JS visitor ever needs a link fallback). Strip the
   UA button chrome; the bubble + avatar rules above carry the whole look. */
button.ask-richard {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ask-richard-panel {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 95;
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - 28px));
  /* dvh-safe: on phones the dynamic viewport shrinks when the keyboard comes
     up, so the composer stays above it (plain vh would leave it underneath).
     The vh line stays as the fallback for browsers without dvh support. */
  max-height: min(70vh, 640px);
  max-height: min(70vh, 640px, calc(100dvh - 96px));
  background: var(--navy);
  /* A stronger hairline + a layered contact shadow so the card seats cleanly
     over busy hero photography instead of blending into it. */
  border: 1px solid rgba(184, 151, 58, 0.32);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), 0 24px 64px rgba(0, 0, 0, 0.5);
  animation: ask-richard-panel-in 0.22s ease-out;
}
.ask-richard-panel[hidden] { display: none; }
@keyframes ask-richard-panel-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.ask-richard-panel__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gold-border);
}
.ask-richard-panel__avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--navy);
  box-shadow: 0 0 0 2px var(--gold);
}
.ask-richard-panel__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ask-richard-panel__title {
  margin: 0;
  flex: 1;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: var(--leading-tight);
  color: var(--ivory);
}
.ask-richard-panel__close {
  flex: none;
  width: 36px;
  height: 36px;
  background: none;
  border: 0;
  color: var(--warm-tan);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s;
}
.ask-richard-panel__close:hover { color: var(--gold); }

.ask-richard-panel__messages {
  flex: 1;
  min-height: 140px;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ask-richard-panel__msg {
  max-width: 88%;
  padding: 10px 13px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ivory);
  white-space: pre-wrap; /* Richard writes in paragraphs — keep his line breaks */
  overflow-wrap: break-word;
}
.ask-richard-panel__msg--richard {
  align-self: flex-start;
  background: rgba(245, 240, 232, 0.06);
  border: 1px solid rgba(245, 240, 232, 0.08);
  border-radius: 4px 14px 14px 14px;
}
.ask-richard-panel__msg--user {
  align-self: flex-end;
  background: rgba(184, 151, 58, 0.16);
  border: 1px solid var(--gold-border);
  border-radius: 14px 4px 14px 14px;
}
/* The phantom "Richard is writing…" bubble between submit and first frame. */
.ask-richard-panel__msg--pending {
  color: var(--warm-tan);
  font-style: italic;
}

/* System notices — limits, outages, re-auth — distinct from chat bubbles. */
.ask-richard-panel__notice {
  align-self: stretch;
  padding: 12px 14px;
  border: 1px solid var(--gold-border);
  background: rgba(184, 151, 58, 0.07);
  text-align: center;
}
.ask-richard-panel__notice p {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  line-height: 1.55;
  color: var(--warm-tan);
}
.ask-richard-panel__cta {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 16px;
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--navy);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.2s, border-color 0.2s;
}
.ask-richard-panel__cta:hover {
  background: var(--ivory);
  border-color: var(--ivory);
}
.ask-richard-panel__alt-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ivory);
  border-bottom: 1px solid var(--gold-border);
  transition: color 0.2s, border-color 0.2s;
}
.ask-richard-panel__alt-link:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* Email step — same input voice as the email gate's form. */
.ask-richard-panel__gate {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* display:flex on the forms overrides the UA's [hidden]{display:none} —
   force it, or the gate and composer render stacked at the same time
   (same bug class as .video-gate__frame video[hidden] above). */
.ask-richard-panel__gate[hidden],
.ask-richard-panel__composer[hidden] { display: none; }
.ask-richard-panel__gate-copy {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--warm-tan);
  text-align: center;
}
.ask-richard-panel__gate input[type="email"] {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ivory);
  background: rgba(245, 240, 232, 0.06);
  border: 1px solid var(--gold-border);
  outline: none;
  text-align: center;
  transition: border-color 0.25s, background 0.25s;
}
.ask-richard-panel__gate input[type="email"]::placeholder { color: rgba(200, 191, 169, 0.5); }
.ask-richard-panel__gate input[type="email"]:focus {
  border-color: var(--gold);
  background: rgba(245, 240, 232, 0.1);
}
/* The gate reuses the global .submit-btn — trim its 18px padding so the
   compact panel doesn't read like a landing-page form. */
.ask-richard-panel__gate .submit-btn {
  margin-top: 0;
  padding: 13px;
}

/* Composer — textarea + send. */
.ask-richard-panel__composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--gold-border);
}
.ask-richard-panel__composer textarea {
  flex: 1;
  resize: none;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ivory);
  background: rgba(245, 240, 232, 0.06);
  border: 1px solid var(--gold-border);
  outline: none;
  transition: border-color 0.25s, background 0.25s;
}
.ask-richard-panel__composer textarea::placeholder { color: rgba(200, 191, 169, 0.5); }
.ask-richard-panel__composer textarea:focus {
  border-color: var(--gold);
  background: rgba(245, 240, 232, 0.1);
}
.ask-richard-panel__send {
  flex: none;
  padding: 11px 16px;
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--navy);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.ask-richard-panel__send:hover {
  background: var(--ivory);
  border-color: var(--ivory);
}
.ask-richard-panel__send:disabled,
.ask-richard-panel__composer textarea:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Under 640px the panel becomes a full-width bottom sheet. */
@media (max-width: 640px) {
  .ask-richard-panel {
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-height: 76vh;
    max-height: min(76vh, calc(100dvh - 96px)); /* keyboard-safe — see above */
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ask-richard-panel { animation: none; }
}

/* ============================================================
   ASK RICHARD — launch-eve polish (typing dots, starter chips,
   Start over, footer line, launcher pulse)
   Extends the two Ask RICHARD blocks above; same palette and
   voice. Every motion added here is stilled under
   prefers-reduced-motion at the bottom of this block.
   ============================================================ */
/* Typing indicator — three pulsing gold dots inside the pending assistant
   bubble (the Toolkit card's .chat-typing pattern, resized for the panel).
   main.js swaps it out in place on the first streamed text delta. */
.ask-richard-panel__typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 0;
}
.ask-richard-panel__typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: typing-dot 1.2s ease-in-out infinite; /* keyframes shared with toolkit.html */
}
.ask-richard-panel__typing span:nth-child(2) { animation-delay: 0.18s; }
.ask-richard-panel__typing span:nth-child(3) { animation-delay: 0.36s; }

/* Starter chips — suggested first questions between the thread and the
   composer. main.js hides the row once the first real question is sent. */
.ask-richard-panel__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 16px 10px;
}
.ask-richard-panel__chips[hidden] { display: none; }
.ask-richard-panel__chip {
  padding: 8px 12px;
  background: rgba(184, 151, 58, 0.08);
  border: 1px solid var(--gold-border);
  border-radius: 14px;
  color: var(--warm-tan);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.ask-richard-panel__chip:hover,
.ask-richard-panel__chip:focus-visible {
  color: var(--ivory);
  border-color: var(--gold);
  background: rgba(184, 151, 58, 0.16);
}

/* "Start over" — quiet text button in the header (clears the saved thread,
   main.js). Deliberately smaller than the title so it never competes. */
.ask-richard-panel__reset {
  flex: none;
  background: none;
  border: 0;
  padding: 4px 2px;
  color: var(--warm-tan);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: color 0.2s, border-bottom-color 0.2s;
}
.ask-richard-panel__reset:hover {
  color: var(--gold);
  border-bottom-color: var(--gold-border);
}

/* Footer affordance — the 5-minute LiveAvatar video call lives in the app. */
.ask-richard-panel__footnote {
  margin: 0;
  padding: 0 16px 12px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-align: center;
  color: rgba(200, 191, 169, 0.75);
}
.ask-richard-panel__footnote a {
  color: var(--warm-tan);
  border-bottom: 1px solid var(--gold-border);
  transition: color 0.2s, border-color 0.2s;
}
.ask-richard-panel__footnote a:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* Launcher attention pulse — ONE expanding gold ring, ~2s after load, once
   per session (main.js adds .ask-richard--pulse, then removes it). main.js
   also skips it entirely under prefers-reduced-motion; the media rule below
   is the second belt. First/last shadows match the avatar's resting shadow
   so the ring fades out into exactly the state it started from. */
@keyframes ask-richard-pulse {
  0% {
    box-shadow: 0 0 0 2px var(--gold), 0 0 0 0 rgba(184, 151, 58, 0.5),
      0 8px 24px rgba(0, 0, 0, 0.35);
  }
  100% {
    box-shadow: 0 0 0 2px var(--gold), 0 0 0 16px rgba(184, 151, 58, 0),
      0 8px 24px rgba(0, 0, 0, 0.35);
  }
}
.ask-richard--pulse .ask-richard__avatar {
  animation: ask-richard-pulse 1.6s ease-out 1;
}

@media (prefers-reduced-motion: reduce) {
  .ask-richard-panel__typing span { animation: none; opacity: 0.6; }
  .ask-richard--pulse .ask-richard__avatar { animation: none; }
}
/* Locked composer (daily allowance spent) — the disabled state must LOOK
   disabled, not merely be unclickable (audit, June 10). */
.ask-richard-panel__composer textarea:disabled,
.ask-richard-panel__composer button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Full-composite launcher (client artwork, June 10) — the PNG carries its own
   "Ask RICHARD" bubble + face, so the button is the image itself with a soft
   shadow. Replaces the CSS-built bubble/avatar pair (those rules stay for the
   panel header). */
.ask-richard__art {
  display: block;
  height: 140px; /* desktop bumped a bit more, June 15 (mobile stays 98px) */
  width: auto;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
  transition: transform 0.18s ease;
}
.ask-richard:hover .ask-richard__art,
.ask-richard:focus-visible .ask-richard__art {
  transform: translateY(-2px);
}
.ask-richard--pulse .ask-richard__art {
  animation: ask-richard-art-pulse 1.6s ease-out 1;
}
@keyframes ask-richard-art-pulse {
  0%   { filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35)); }
  50%  { filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 14px rgba(184, 151, 58, 0.5)); }
  100% { filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35)); }
}
@media (max-width: 640px) {
  .ask-richard__art { height: 108px; } /* nudged up a touch, June 15 */
}
@media (prefers-reduced-motion: reduce) {
  .ask-richard__art { transition: none; }
  .ask-richard--pulse .ask-richard__art { animation: none; }
}