/* ═══════════════════════════════════════════════════════════════════════
 * site.css — every stylesheet the site uses, in one file.
 *
 * Merged 2026-09-03 (item 3.2d) from the twelve files index.html used to link
 * in sequence. They are concatenated in exactly that order, so the cascade is
 * identical: a rule that won before still wins, including the ones that only
 * win because of where their file sat in the chain.
 *
 * That ordering is load-bearing and not obvious, which is half the reason for
 * merging. convert.css beat poster-pages.css only because it came later, and
 * more than one bug in this repo's history was someone adding a rule to the
 * wrong file and wondering why nothing happened. The section banners below keep
 * the origin of every block findable.
 *
 * The three standalone event pages keep their own stylesheets and are not part
 * of this file: css/fullout.css, css/dwdcon.css, css/amuse.css. They are live
 * archive pages and nothing here touches them.
 *
 * Adding new rules: the bottom of this file is the end of the cascade, so that
 * is where an override goes. Put a component with its neighbours if it has any.
 *
 * On !important (item 3.2e, 2026-09-03): 187 of the 815 that used to be here
 * were doing nothing at all and are gone. The 628 that remain were each shown
 * to be load-bearing — remove them and a computed value actually moves. They
 * survive on exactly these properties, which are the ones this stylesheet
 * genuinely fights itself over: colour, background, border colour and radius,
 * outline colour, the font properties, line-height, padding, margin, width,
 * height, min-height, top/bottom, grid-template-rows, transform-origin,
 * text-decoration-color.
 *
 * If you are tempted to add another one, that list is the honest picture of
 * where this stylesheet's specificity conflicts actually live. The method is in
 * scripts/qa/prune-important.mjs and scripts/qa/computed.js.
 * ═══════════════════════════════════════════════════════════════════════ */



/* ═══════════════════════════════════════════════════════════════════════
 * STYLES
 * Base system: tokens, typography, layout primitives, forms, buttons.
 * (was css/styles.css)
 * ═══════════════════════════════════════════════════════════════════════ */


:root {
  /* Core palette — see ~/Desktop/DWD/Brand/palette.md */
  --forest: #0c1f17;
  --forest-light: #1a3d2e;
  --forest-mid: #1e4432;
  --forest-dark: #0c1f17;
  --sidebar-bg: #080e0b;
  --footer-bg: #060a08;
  --black: #0a0a0a;

  /* Ivory is the only light neutral (cream/blush-lighter deprecated 2026-07-12) */
  --ivory: #FAF3E8;
  --ivory-dim: #e8ddd0;

  /* Family Pink — secondary accent (retired blush on 2026-07-18) */
  --pink: #FF7AA2;
  --pink-soft: #FF8FAB;      /* dwdPS Prep track badge ONLY */

  /* Terracotta — family signature thread / primary accent (Apr 15, 2026).
     Display-only on forest/ivory; body text swaps to --terra-light (dark) / --terra-dark (light) */
  --terra: #C8614B;
  --terra-light: #d4775f;
  /* Body terracotta for the ELEVATED card ground (#1a3d2e), not the base forest.
     --terra-light only reaches 3.77:1 there; this hits 4.71:1 on the card and
     6.73:1 on forest, so it is safe on both. Added 2026-07-21. */
  --terra-soft: #e08d76;
  --terra-dark: #a8503e;

  --seafoam: #6BAF8A;

  /* Tamara Mark gold — MEMORIAL USE ONLY. Do not use for UI accents.
     Rose-gold gradient (SVG): #c9956c → #e8c49a → #d4a574; flat fallback below. */
  --gold-tamara: #e2b955;

  /* ── Legacy aliases → new canon (retire on next full re-skin) ── */
  --cream: var(--ivory);
  --cream-faint: var(--ivory-dim);
  --blush: var(--pink);
  --blush-light: var(--pink-soft);
  --accent: var(--pink);
  --accent-light: var(--pink-soft);

  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Outfit', sans-serif;
}

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

html { overflow-x: clip; }
body {
  background-color: var(--black);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.3px;
  position: relative;
  overflow-x: clip;
}
/* Global backstop: no oversized clamp() display headline can force sideways scroll. */
h1, h2, h3 { overflow-wrap: break-word; }

/* Ambient background glow */
body::before {
  content: '';
  position: fixed;
  top: -20%;
  right: -15%;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(ellipse, rgba(248, 215, 200, 0.025) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
body::after {
  content: '';
  position: fixed;
  bottom: -15%;
  left: -10%;
  width: 45vw;
  height: 45vw;
  background: radial-gradient(ellipse, rgba(30, 68, 50, 0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Subtle noise texture overlay */
.main::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.5px;
}

h1 {
  font-size: 3.5rem;
  font-weight: 600;
  letter-spacing: 1px;
}

h2 {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: 0.8px;
}

h3 {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.6px;
}

h4 {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.4px;
}

h5 {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--cream);
}


.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 240px;
  height: 100vh;
  height: 100dvh;
  background-color: var(--sidebar-bg);
  border-right: 1px solid var(--forest-light);
  padding: 2.5rem 1.5rem;
  z-index: 100;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}


.sidebar nav {
  display: flex;
  flex-direction: column;
}

.sidebar nav a {
  display: block;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  padding: 0.65rem 1rem;
  border-left: 3px solid transparent;
  transition: all 0.3s ease;
  text-decoration: none;
}

.sidebar nav a:hover {
  color: var(--accent);
  border-left-color: var(--accent);
}

.sidebar nav a.active {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 600;
}


.main {
  margin-left: 240px;
  width: calc(100% - 240px);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Centering rules moved to additions.css (loads last, wins cascade) */

/* MOBILE HEADER */

.mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: rgba(12, 31, 23, 0.85);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(26, 61, 46, 0.6);
  position: sticky;
  top: 0;
  z-index: 90;
}


.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--cream);
  margin: 6px 0;
  transition: all 0.3s ease;
}

.hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* SIDEBAR OVERLAY */

.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(6, 10, 8, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 92;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sidebar-overlay.visible {
  display: block;
  opacity: 1;
}


/* PAGE & SECTIONS */

.page {
  display: none;
  flex: 1;
  padding-bottom: 3rem;
}

.page.active {
  display: block;
  animation: fadeIn 0.6s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Staggered hero content entrance */
@keyframes curtainRise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.page.active .hero .hero-logo,
.page.active .hero-logo-section {
  animation: curtainRise 0.8s ease-out both;
  animation-delay: 0.1s;
}

.page.active .hero h1 {
  animation: curtainRise 0.8s ease-out both;
  animation-delay: 0.25s;
}

.page.active .hero .subtitle,
.page.active .hero .sub,
.page.active .hero .tagline,
.page.active .hero p {
  animation: curtainRise 0.8s ease-out both;
  animation-delay: 0.4s;
}

.page.active .hero .hero-btns,
.page.active .hero .btn {
  animation: curtainRise 0.8s ease-out both;
  animation-delay: 0.55s;
}


.section-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--accent);
  letter-spacing: 1px;
  margin-bottom: 1rem;
  font-weight: 600;
}

/* HERO SECTIONS */

.hero {
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-light) 100%);
  padding: 6rem 3rem 10rem;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--forest-mid);
}

/* Ken Burns slow zoom on hero background images */
.hero[style*="background-image"] {
  background-size: cover;
  animation: kenBurns 25s ease-in-out infinite alternate;
}

@keyframes kenBurns {
  0% { background-position: center 95%; transform: scale(1); }
  100% { background-position: center 90%; transform: scale(1.06); }
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(248, 215, 200, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(201, 169, 110, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

/* Decorative line after hero title */
.hero::after {
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.5;
}


.hero h1 {
  color: var(--cream);
  margin-bottom: 1.5rem;
  line-height: 1.1;
}

.hero p {
  font-size: 1.1rem;
  color: var(--cream);
  line-height: 1.7;
  margin-bottom: 2rem;
}

.hero-cta {
  display: inline-block;
  margin-top: 1.5rem;
}

.hero.home-hero {
  padding: 8rem 3rem;
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-light) 100%);
}

.hero.home-hero h1 {
  font-size: 4rem;
  margin-bottom: 1.5rem;
}


@keyframes heroPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.85;
  }
}

/* HERO ANIMATION */

.reveal {
  opacity: 0;
  transform: translateY(30px);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* BUTTONS */

.btn {
  display: inline-block;
  padding: 0.875rem 2rem;
  border: none;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  text-decoration: none;
  position: relative;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
  color: var(--black);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--pink-soft) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(248, 215, 200, 0.25);
  letter-spacing: 1.2px;
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(248, 215, 200, 0.15);
}


/* PHOTO GRID (HOME) */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin: 3rem 0;
}

.photo-grid img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.3s ease, filter 0.3s ease;
  cursor: pointer;
}

.photo-grid img:hover {
  transform: scale(1.03);
  filter: brightness(1.1);
}

/* EMAIL SIGNUP */

.email-signup {
  background-color: var(--forest-light);
  padding: 2.5rem 3rem;
  border: 1px solid var(--forest-mid);
  margin: 3rem 0;
  border-radius: 0;
}

.email-signup h3 {
  color: var(--accent);
  margin-bottom: 1rem;
}


/* ADULT COMPANY SECTION */

.ac-hero {
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-light) 100%);
  padding: 4rem 3rem;
  border-bottom: 1px solid var(--forest-mid);
}

.ac-hero h1,
.ac-hero h2.ac-hero-title {
  color: var(--cream);
  margin-bottom: 1rem;
}

.content-section {
  padding: 3rem;
}

.content-section h2 {
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.content-section p {
  color: var(--cream);
  margin-bottom: 1.5rem;
  line-height: 1.8;
}


.audience-list {
  background-color: var(--forest-mid);
  padding: 2rem;
  border: 1px solid var(--forest-light);
  margin: 2rem 0;
  border-radius: 0;
}

.audience-list h3 {
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.audience-list ul {
  list-style: none;
  columns: 2;
  gap: 2rem;
}

.audience-list li {
  color: var(--cream);
  margin-bottom: 0.8rem;
  break-inside: avoid;
}

.audience-list li::before {
  content: '▸ ';
  color: var(--accent);
  margin-right: 0.5rem;
}

/* PROSERIES YOUTH SECTION */

.ps-hero {
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-light) 100%);
  padding: 4rem 3rem;
  border-bottom: 1px solid var(--forest-mid);
}

.ps-hero h1 {
  color: var(--cream);
  margin-bottom: 1rem;
}


.fee-table {
  width: 100%;
  background-color: var(--forest-light);
  border: 1px solid var(--forest-mid);
  margin: 2rem 0;
  border-radius: 0;
}

.fee-table thead {
  background-color: var(--forest-mid);
}

.fee-table th {
  padding: 1rem;
  text-align: left;
  color: var(--accent);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--forest-mid);
}

.fee-table td {
  padding: 1rem;
  color: var(--cream);
  border-bottom: 1px solid var(--forest-mid);
}

.fee-table tr:last-child td {
  border-bottom: none;
}

.timeline {
  background-color: var(--forest-light);
  padding: 2.5rem;
  border: 1px solid var(--forest-mid);
  margin: 2rem 0;
  border-radius: 0;
}

.timeline h3 {
  color: var(--accent);
  margin-bottom: 1.5rem;
}


.interest-form {
  background-color: var(--forest-mid);
  padding: 2.5rem;
  border: 1px solid var(--forest-light);
  margin: 2rem 0;
  border-radius: 0;
}

.interest-form h3 {
  color: var(--accent);
  margin-bottom: 1.5rem;
}


.coming-up {
  padding: 3rem;
}

.coming-up h2 {
  color: var(--accent);
  margin-bottom: 2rem;
}


/* GALLERY SECTION */

.gallery-hero {
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-light) 100%);
  padding: 4rem 3rem;
  border-bottom: 1px solid var(--forest-mid);
}

.gallery-hero h1 {
  color: var(--cream);
  margin-bottom: 1rem;
}

.gallery-section {
  padding: 3rem;
}

.gallery-section-label {
  font-family: var(--font-display);
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--accent);
  letter-spacing: 0.8px;
  margin: 2rem 0 1rem 0;
  font-weight: 600;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  background-color: var(--forest-light);
  aspect-ratio: 1;
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.gallery-item.wide {
  grid-column: span 2;
}

.gallery-item.tall {
  grid-row: span 2;
}


/* CONTACT SECTION */

.contact-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
  min-height: calc(100vh - 240px);
  min-height: calc(100dvh - 240px);
}

.contact-form-side {
  background-color: var(--forest-light);
  padding: 3rem;
  border-right: 1px solid var(--forest-mid);
}

.contact-form-side h2 {
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.contact-info-side {
  background-color: var(--forest);
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-info-side h3 {
  color: var(--accent);
  margin-bottom: 2rem;
}


/* FORMS */

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.875rem 1rem;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--forest-mid);
  color: var(--cream);
  font-family: var(--font-body);
  border-radius: 0;
  font-size: 0.95rem;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
}

.form-group textarea {
  border: 1px solid var(--forest-mid);
  background-color: rgba(10, 10, 10, 0.4);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(245, 240, 232, 0.5);
  transition: color 0.3s ease;
}

.form-group input:focus::placeholder,
.form-group textarea:focus::placeholder {
  color: rgba(245, 240, 232, 0.15);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-bottom-color: var(--accent);
  box-shadow: 0 2px 8px rgba(248, 215, 200, 0.08);
  background-color: rgba(248, 215, 200, 0.02);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23FAF3E8' d='M1 4l5 4 5-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.form-success {
  background-color: var(--forest-light);
  border: 1px solid var(--forest-mid);
  padding: 1.5rem;
  border-radius: 0;
  color: var(--cream);
  margin-bottom: 1.5rem;
}

.form-success::before {
  content: '✓ ';
  color: var(--accent);
  font-weight: 700;
}

/* FOOTER */

.site-footer {
  background-color: var(--footer-bg);
  border-top: 1px solid var(--forest-light);
  padding: 3rem;
  margin-top: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  max-width: 1200px;
}


.footer-bottom {
  text-align: center;
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid var(--forest-mid);
  color: rgba(245, 240, 232, 0.7);
  font-size: 0.85rem;
}

/* LIGHTBOX */

.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(6, 10, 8, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 200;
  align-items: center;
  justify-content: center;
}

.lightbox.open {
  display: flex;
  animation: lightboxFadeIn 0.3s ease-out;
}

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


@keyframes lightboxScaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}


.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 2rem;
  cursor: pointer;
  transition: color 0.3s ease;
  z-index: 201;
}

.lightbox-close:hover {
  color: var(--cream);
}


.lightbox-prev {
  left: 1rem;
}

.lightbox-next {
  right: 1rem;
}


/* RESPONSIVE DESIGN */

@media (max-width: 768px) {


  .sidebar {
    position: fixed;
    left: -240px;
    transition: left 0.3s ease;
    z-index: 95;
  }

  .sidebar.open {
    left: 0;
  }

  .main {
    margin-left: 0;
    width: 100%;
  }

  .mobile-header {
    display: flex;
  }

  .hamburger {
    display: block;
  }

  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  h3 {
    font-size: 1.35rem;
  }

  .hero {
    padding: 3rem 1.5rem;
  }

  .home-hero {
    padding: 4rem 1.5rem;
  }

  .hero h1 {
    font-size: 2.5rem;
  }





  .contact-section {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .contact-form-side {
    border-right: none;
    border-bottom: 1px solid var(--forest-mid);
  }

  .program-cards,
  .class-breakdown,
  .track-cards,
  .coming-up-grid,
  .gallery-grid,
  .about-features,
  .portal-features {
    grid-template-columns: 1fr;
  }

  .gallery-item.wide {
    grid-column: span 1;
  }

  .gallery-item.tall {
    grid-row: span 1;
  }





  .footer-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.4rem;
  }

  h3 {
    font-size: 1.1rem;
  }



  .sidebar {
    width: 200px;
  }




  .hero {
    padding: 2.5rem 1rem;
  }

  .home-hero {
    padding: 3rem 1rem;
  }

  .hero h1 {
    font-size: 1.75rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.85rem;
  }

  .event-banner,
  .email-signup,
  .about-teaching,
  .locations,
  .audience-list,
  .timeline,
  .coming-box,
  .interest-form {
    padding: 1.5rem;
  }



  .contact-info-side {
    padding: 1.5rem;
  }

  .form-group input,
  .form-group textarea,
  .form-group select {
    padding: 0.75rem 0.75rem;
    font-size: 0.9rem;
  }





  .site-footer {
    padding: 2rem 1rem;
  }



  .lightbox-prev {
    left: 0.5rem;
  }

  .lightbox-next {
    right: 0.5rem;
  }
}


/* One-time fees */
.pricing-onetime {
  margin-top: 3rem;
  background-color: var(--forest-light);
  border: 1px solid var(--forest-mid);
  padding: 1.75rem 2rem;
}

.pricing-onetime h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--cream);
  margin-bottom: 1.25rem;
  font-weight: 500;
}

.pricing-onetime-rows {
  display: flex;
  flex-direction: column;
}

.pot-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--forest-mid);
  flex-wrap: wrap;
}

.pot-row:first-of-type {
  border-top: none;
}

.pot-row .pot-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--cream);
  letter-spacing: 0.5px;
  flex: 1 1 14rem;
}

.pot-row .pot-meta {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cream-faint);
  flex: 1 1 16rem;
}

.pot-row .pot-amount {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--terra);
  font-weight: 500;
  margin-left: auto;
}

/* Deposit framing notes */
.pricing-notes {
  margin-top: 2rem;
  padding: 2rem;
  border: 1px dashed var(--forest-mid);
  background: transparent;
}

.pricing-notes h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--cream);
  margin-bottom: 0.75rem;
  font-weight: 500;
}

.pricing-notes p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--cream);
  line-height: 1.65;
  margin-bottom: 0.85rem;
}

.pricing-notes p strong {
  color: var(--cream);
  font-weight: 700;
}

.pricing-notes ul {
  list-style: none;
  padding: 0;
  margin: 0 0 0.85rem;
}

.pricing-notes ul li {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--cream-faint);
  padding: 0.4rem 0 0.4rem 1rem;
  border-left: 2px solid var(--terra);
  margin-bottom: 0.4rem;
}

.pricing-notes ul li strong {
  color: var(--cream);
  font-weight: 600;
}

.pricing-notes-fine {
  font-size: 0.82rem !important;
  color: var(--cream-faint) !important;
  font-style: italic;
  margin-top: 0.5rem;
  margin-bottom: 0 !important;
}

/* ============ TRACK DETAIL — consolidated cards ============ */
.track-detail-section {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.td-intro {
  text-align: center;
  margin-bottom: 2.5rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.td-intro h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.6rem;
  color: var(--cream);
  margin-bottom: 0.75rem;
  font-weight: 500;
}

.td-intro p {
  font-family: var(--font-body);
  color: var(--cream-faint);
  font-size: 1rem;
  line-height: 1.6;
}

.track-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .track-detail-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
  }
}

.track-detail {
  background-color: var(--forest-light);
  border: 1px solid var(--forest-mid);
  border-top: 4px solid var(--td-accent, var(--terra));
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.track-detail[data-track="prep"]  { --td-accent: var(--blush); }
.track-detail[data-track="elite"] { --td-accent: var(--terra); }
.track-detail[data-track="pro"]   { --td-accent: var(--seafoam); }

.td-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.td-eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--td-accent);
  font-weight: 600;
}

.td-name-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.td-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--cream);
  font-weight: 500;
  margin: 0;
}

.td-price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.1rem;
}

.td-price-amount {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2rem;
  line-height: 1;
  color: var(--cream);
  font-weight: 500;
}

.td-price-unit {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 1px;
  color: var(--cream-faint);
}

.td-meta {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cream-faint);
  font-weight: 500;
}

.td-description {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--cream);
  margin: 0;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--forest-mid);
}

.td-section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.td-section h4 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--td-accent);
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.td-day-block {
  margin-bottom: 0.5rem;
}

.td-day-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.4rem;
}

.td-day-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 1px;
  color: var(--cream);
}

.td-day-hours {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--td-accent);
  font-weight: 600;
}

.td-slots {
  list-style: none;
  padding: 0;
  margin: 0;
}

.td-slots li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-top: 1px dashed rgba(245, 240, 232, 0.08);
  align-items: baseline;
}

.td-slots li:first-child { border-top: none; }

.td-slot-time {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 1px;
  color: var(--td-accent);
  font-weight: 600;
}

.td-slot-name {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.td-tag {
  font-family: var(--font-body);
  font-size: 0.55rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  color: var(--forest);
  background: var(--td-accent);
  border-radius: 2px;
}

.td-tag.td-tag-all {
  background: var(--cream);
  color: var(--forest);
}

.td-genres {
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--cream-faint);
  letter-spacing: 0.3px;
  padding-bottom: 0.5rem;
}

.td-included {
  list-style: none;
  padding: 0;
  margin: 0;
}

.td-included li {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--cream);
  padding: 0.3rem 0 0.3rem 1rem;
  position: relative;
  line-height: 1.45;
}

.td-included li::before {
  content: "·";
  position: absolute;
  left: 0.25rem;
  color: var(--td-accent);
  font-weight: 700;
}

.td-fees {
  list-style: none;
  padding: 0;
  margin: 0;
}

.td-fees li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.45rem 0;
  font-family: var(--font-body);
  font-size: 0.88rem;
  border-top: 1px dashed rgba(245, 240, 232, 0.08);
}

.td-fees li:first-child { border-top: none; }

.td-fees li span:first-child {
  color: var(--cream-faint);
}

.td-fees li span:last-child {
  color: var(--cream);
  font-weight: 600;
  white-space: nowrap;
}

.td-allin {
  background: var(--td-accent);
  color: var(--forest);
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: auto;
}

.td-allin-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--forest);
}

.td-allin-amount {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2rem;
  line-height: 1;
  font-weight: 600;
  color: var(--forest);
}

.td-allin-amount span {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 1px;
  font-weight: 500;
  margin-left: 0.2rem;
}


/* ============ Adult Company — consolidated card ============ */
.collective-card {
  max-width: 1100px;
  margin: 2rem auto 3rem;
  padding: 0 1rem;
}

.cc-intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 2.5rem;
}

.cc-intro h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.6rem;
  color: var(--cream);
  font-weight: 500;
  margin-bottom: 1rem;
}

.cc-intro p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--cream);
  margin-bottom: 0.85rem;
}

.cc-intro p:last-child { margin-bottom: 0; }

.cc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 900px) {
  .cc-grid { grid-template-columns: 1.2fr 1fr; gap: 2rem; }
}

.cc-section {
  background-color: var(--forest-light);
  border: 1px solid var(--forest-mid);
  border-top: 4px solid var(--terra);
  padding: 2rem 1.75rem;
}

.cc-section h3 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--terra);
  font-weight: 600;
  margin-bottom: 1rem;
}

.cc-day-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--cream);
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.cc-slots {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}

.cc-slots li {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1rem;
  padding: 0.85rem 0;
  border-top: 1px dashed rgba(245, 240, 232, 0.1);
}

.cc-slots li:first-child { border-top: none; padding-top: 0; }

.cc-slot-time {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 1px;
  color: var(--terra);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.cc-slot-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--cream);
  display: block;
  margin-bottom: 0.25rem;
}

.cc-slot-desc {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--cream-faint);
  margin: 0;
}

.cc-meta {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  color: var(--cream-faint);
  font-style: italic;
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--forest-mid);
}

.cc-pricing-block {
  border-top-color: var(--seafoam);
}

.cc-pricing-block h3 { color: var(--seafoam); }

.cc-prices {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.cc-prices li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1.25rem;
  padding: 0.85rem 0;
  border-top: 1px dashed rgba(245, 240, 232, 0.1);
  align-items: baseline;
}

.cc-prices li:first-child { border-top: none; padding-top: 0; }

.cc-price-amount {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.8rem;
  color: var(--cream);
  font-weight: 500;
  line-height: 1;
}

.cc-price-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--cream);
  display: block;
}

.cc-price-desc {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--cream-faint);
  display: block;
  margin-top: 0.15rem;
}

.cc-payment {
  margin-bottom: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--forest-mid);
}

.cc-payment-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cream-faint);
  margin-bottom: 0.5rem;
}

.cc-cta {
  width: 100%;
  text-align: center;
}

/* ═══ MOBILE PRIMITIVES (2026 mobile polish pass — see plan) ═══ */

/* Kill iOS Safari auto-zoom on input focus (≥16px floor).
   `!important` defeats `.form-group input { font-size: 0.95rem }` upstream
   and any other class-scoped form rules that drop below the 16px floor. */
input,
textarea,
select,
.form-group input,
.form-group textarea,
.form-group select,
.email-row input,
.ea-form input {
  font-size: 16px !important;
}

/* Ticker + safe-area clearance — every .page reserves bottom space for the fixed
   audition ticker (~36px) plus the iPhone home indicator inset. */
.page {
  padding-bottom: calc(60px + env(safe-area-inset-bottom));
}

/* Smooth hash-router scrolling (respects user motion preference) */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Polished tap feedback + keyboard-only focus ring */
* { -webkit-tap-highlight-color: rgba(200, 97, 75, 0.15); }
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--terracotta, #C8614B);
  outline-offset: 2px;
}

/* Mobile drawer clears iPhone home indicator (the drawer is the .sidebar restored
   on <=900px — see editorial.css + rebrand.css media guards). */
@media (max-width: 900px) {
  .sidebar {
    min-height: 100dvh;
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom));
  }
}


/* ═══════════════════════════════════════════════════════════════════════
 * ADDITIONS
 * Supplementary components layered on the base.
 * (was css/additions.css)
 * ═══════════════════════════════════════════════════════════════════════ */




/* Increase section vertical breathing room */
.content-section {
  padding: 4rem 3rem;
}

/* Form success flash animation */
.form-success.show {
  display: block;
  animation: successPulse 0.6s ease-out;
}

@keyframes successPulse {
  0% { opacity: 0; transform: translateY(6px); }
  50% { box-shadow: 0 0 20px rgba(95, 191, 109, 0.15); }
  100% { opacity: 1; transform: translateY(0); box-shadow: none; }
}

/* Invalid field shake */
.form-group input.invalid,
.form-group textarea.invalid,
.form-group select.invalid {
  border-bottom-color: #c86a6a;
  animation: fieldShake 0.4s ease;
}

@keyframes fieldShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Lightbox image transition for navigation */
.lightbox-img {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Gallery image hover overlay gradient */
.gallery-grid img,
.photo-grid img {
  position: relative;
}

.gallery-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(6, 10, 8, 0.4), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.gallery-item:hover::after {
  opacity: 1;
}

.skip-link {
  position: absolute; top: -100px; left: 0;
  background: var(--accent); color: var(--black);
  padding: 0.5rem 1rem; z-index: 999;
}
.skip-link:focus { top: 0; }

.hero-logo {
  display: block; margin: 0 auto 1.5rem; border-radius: 50%;
}
video.hero-logo {
  border-radius: 0; pointer-events: none;
  width: 600px; height: 600px; margin-top: -80px; margin-bottom: -50px;
  mix-blend-mode: screen;
}
@media (max-width: 768px) {
  video.hero-logo { width: 420px; height: 420px; margin-top: -55px; margin-bottom: -30px; }
}
@media (max-width: 480px) {
  video.hero-logo { width: 320px; height: 320px; margin-top: -40px; margin-bottom: -20px; }
}
.hero-logo-section {
  display: block; margin: 0 auto; border-radius: 50%;
}
.subtitle {
  max-width: 700px; margin: 0 auto 2rem;
  font-size: 1.15rem; line-height: 1.7;
}

.btn-outline {
  background: transparent; color: var(--accent);
  border: 2px solid var(--accent);
}
.btn-outline:hover {
  background-color: var(--accent); color: var(--black);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(248, 215, 200, 0.2);
  letter-spacing: 1.2px;
}
.btn-blush {
  background-color: var(--blush); color: var(--black); font-weight: 600;
}


.label {
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--terra); margin-bottom: 0.75rem;
}

.sub {
  font-family: var(--font-body); font-size: 1.1rem;
  color: rgba(245, 241, 235, 0.8); margin-bottom: 0.5rem;
}
.tagline {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.2rem; color: var(--accent); margin-bottom: 1.5rem;
}
.highlight {
  color: var(--accent); font-weight: 600;
}


/* About photo slideshow */
.about-slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 25%;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.about-slide.active {
  opacity: 1;
}


/* CTA banner */
.cta-banner {
  background-color: var(--forest-light); border-top: 1px solid var(--accent);
  padding: 3rem; text-align: center;
}
.cta-banner h3 { color: var(--accent); margin-bottom: 1rem; }
.cta-banner p { color: var(--cream); margin-bottom: 1.5rem; }
.cta-banner .btn { margin: 0 0.5rem; }


.track-name {
  font-family: var(--font-display); font-size: 1.5rem;
  font-weight: 600; color: var(--cream); margin-bottom: 0.5rem;
}
.track-level {
  font-family: var(--font-body); font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--terra); margin-bottom: 1rem;
}


.track-price {
  font-family: var(--font-display); font-size: 2rem;
  font-weight: 700; color: var(--accent);
}
.track-price span {
  font-size: 1rem; font-weight: 400; color: rgba(245,241,235,0.6);
}


/* Why ProSeries grid */
.why-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem;
}
.why-item {
  background-color: var(--forest-light); padding: 2rem;
  border: 1px solid var(--forest-mid);
}
.why-item h4 { color: var(--accent); margin-bottom: 0.75rem; font-family: var(--font-display); }
.why-item p { color: var(--cream); line-height: 1.7; font-size: 0.9rem; }
.section-lead {
  color: var(--cream); font-size: 1.05rem; line-height: 1.7;
  max-width: 720px; margin-bottom: 0.5rem;
}
@media (max-width: 768px) {
  .why-grid { grid-template-columns: 1fr; }
}


.coming-up .meta {
  font-size: 0.85rem; color: var(--terra); margin-bottom: 0.75rem;
}


/* Payment methods */
.payment-label { color: rgba(245,241,235,0.6); font-size: 0.85rem; margin-bottom: 0.5rem; }
.payment-methods {
  display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.payment-chip {
  background-color: var(--forest-mid); border: 1px solid var(--forest-light);
  color: var(--cream); padding: 0.4rem 1rem; font-size: 0.85rem;
}

.emphasis { color: var(--accent); font-weight: 600; font-style: italic; }


/* Contact detail items */
.contact-detail {
  margin-bottom: 1.5rem; padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--forest-mid);
}
.contact-detail:last-of-type { border-bottom: none; }
.contact-detail .dlabel {
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px;
  color: rgba(245,241,235,0.5); margin-bottom: 0.35rem;
}
.contact-detail .value { color: var(--cream); font-size: 1rem; line-height: 1.6; }
.contact-detail .value a { color: var(--accent); }
.contact-booking {
  background-color: var(--forest-light); padding: 1.5rem;
  border: 1px solid var(--forest-mid); margin: 1.5rem 0;
  font-size: 0.95rem; line-height: 1.7; color: var(--cream);
}
.contact-quick-links { margin-top: 1.5rem; }
.contact-quick-links .dlabel {
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px;
  color: rgba(245,241,235,0.5); margin-bottom: 0.75rem;
}
.contact-quick-links a {
  display: block; color: var(--accent); margin-bottom: 0.5rem; font-size: 0.95rem;
}

/* Footer matching HTML classes */
.footer-brand { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-brand .location { font-size: 0.85rem; color: rgba(245,241,235,0.6); }
.footer-brand .sub-brands { font-size: 0.8rem; color: rgba(245,241,235,0.5); }
.footer-links { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-links h5 { color: var(--accent); margin-bottom: 0.5rem; }
.footer-links a {
  color: rgba(245,241,235,0.7); font-size: 0.9rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.footer-links a:hover { color: var(--accent); }

/* ── YouTube Video Embeds ── */
.video-featured {
  width: 100%;
  margin: 2rem 0;
  padding: 0 3rem;
  box-sizing: border-box;
}
.video-featured .video-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--terra);
  text-align: center;
  margin-bottom: 1rem;
}
.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: var(--forest-dark);
  border: 1px solid var(--forest-mid);
}
.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 0 3rem;
}
.video-grid .video-card {
  background: var(--forest-light);
  border: 1px solid var(--forest-mid);
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.video-grid .video-card:hover {
  border-color: rgba(200, 97, 75, 0.3);
}


@media (max-width: 768px) {
  .video-featured { padding: 0 1.5rem; }
  .video-grid { grid-template-columns: 1fr; padding: 0 1.5rem; }
}

/* Gallery images direct (not .gallery-item wrapper) */
.gallery-grid img {
  width: 100%; height: 280px; object-fit: cover; cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.gallery-grid img:hover { transform: scale(1.03); filter: brightness(1.1); }
.gallery-grid img.wide { grid-column: span 2; }

/* Lightbox img */
.lightbox-img { max-width: 90vw; max-height: 85vh; object-fit: contain; }
.lightbox-prev { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--accent); font-size: 2.5rem; cursor: pointer; z-index: 201; }
.lightbox-next { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--accent); font-size: 2.5rem; cursor: pointer; z-index: 201; }

/* Form success hidden by default */
.form-success { display: none; }
.form-success.visible { display: block; }


/* Content section alt variant */
.content-section.alt {
  background-color: var(--forest);
  border-top: 1px solid var(--forest-mid);
  border-bottom: 1px solid var(--forest-mid);
}


/* === OVERRIDES: Fix hero centering and padding === */
.hero { text-align: center; }
.ac-hero { text-align: center; }
.ps-hero { text-align: center; }

.gallery-hero { text-align: center; }


.photo-grid { padding: 0 3rem; }
.email-signup { padding-left: 3rem; padding-right: 3rem; }
.gallery-section-label { padding-left: 3rem; }
.gallery-grid { padding: 0 3rem; }

.coming-up { padding: 3rem; }
.audience-list { list-style: none; }
.audience-list li { margin-bottom: 0.8rem; }
.audience-list li::before { content: "\25B8 "; color: var(--accent); }
.audience-list .emphasis { list-style: none; }
.audience-list .emphasis::before { content: ""; }

/* Form error message */
.form-error {
  display: none;
  margin-top: 12px;
  padding: 10px 16px;
  background: rgba(220, 60, 60, 0.15);
  border: 1px solid rgba(220, 60, 60, 0.3);
  border-radius: 8px;
  color: #f5a5a5;
  font-size: 0.9rem;
  text-align: center;
}
.form-error.show { display: block; }

button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Responsive override for about grid */
@media (max-width: 768px) {


  .about-photo img,
  .about-slide { object-position: center 20%; }


  .gallery-grid img.wide { grid-column: span 1; }
}

/* ═══════════════════════════════════════
   CENTERING — loads last, wins cascade
   ═══════════════════════════════════════ */
.content-section,
.coming-up,
.gallery-section,
.shop-content,
.about-content,
.what-i-bring {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}


/* ═══════════════════════════════════════
   MERCH POLL
   ═══════════════════════════════════════ */
.merch-poll {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}
.merch-poll-hero {
  text-align: center;
  padding-bottom: 2rem;
}
.merch-poll-hero h1 {
  margin-top: 0.25rem;
}
.merch-poll-hero .sub {
  max-width: 560px;
  margin: 0.75rem auto 0;
  font-style: italic;
}
.merch-poll-form {
  margin-top: 1rem;
}
.merch-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}
@media (max-width: 860px) {
  .merch-categories { grid-template-columns: 1fr; }
}
.merch-category-card {
  position: relative;
  display: block;
  cursor: pointer;
  background: #f5ede0;
  border: 2px solid #e8dcc8;
  border-radius: 12px;
  padding: 1.25rem;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, background 0.2s;
}
.merch-category-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(12, 31, 23, 0.1);
  border-color: #C8614B;
}
.merch-category-card input[name="category"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.merch-category-card.is-selected {
  border-color: #0c1f17;
  background: #FAF3E8;
  box-shadow: 0 14px 36px rgba(12, 31, 23, 0.12);
}
.merch-category-card.is-selected .merch-select-dot {
  background: #0c1f17;
  border-color: #0c1f17;
}
.merch-category-card.is-selected .merch-select-dot::after {
  opacity: 1;
}
.merch-select-dot {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #d4c5a9;
  background: #fff;
  transition: all 0.2s;
  z-index: 2;
}
.merch-select-dot::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 5px;
  height: 10px;
  border: solid #FAF3E8;
  border-width: 0 2px 2px 0;
  opacity: 0;
  transition: opacity 0.2s;
}
.merch-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 1rem;
}
.mini-item {
  position: relative;
  aspect-ratio: 1;
  background: #FAF3E8;
  border-radius: 6px;
  overflow: hidden;
}
.merch-category-card.is-selected .mini-item {
  background: #f5ede0;
}
.mini-item .garment {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mini-item .logo {
  position: absolute;
  object-fit: contain;
  pointer-events: none;
}
/* Mini-item logo positioning (mirrors preview) */
.mini-item.tshirt .logo        { width: 26%; top: 36%; left: 37%; }
.mini-item.hoodie .logo        { width: 26%; top: 38%; left: 37%; }
.mini-item.crewneck .logo      { width: 26%; top: 40%; left: 37%; }
.mini-item.joggers .logo       { width: 14%; top: 30%; left: 32%; }
.mini-item.booty-shorts .logo  { width: 14%; top: 42%; left: 33%; }
.mini-item.crop-top .logo      { width: 18%; top: 46%; left: 41%; }
.mini-item.leggings .logo      { width: 13%; top: 22%; left: 36%; }
.mini-item.warmup-jacket .logo { width: 20%; top: 38%; left: 26%; }
.mini-item.hat .logo           { width: 24%; top: 43%; left: 38%; }
.mini-item.tote .logo          { width: 32%; top: 42%; left: 34%; }
.merch-cat-info {
  text-align: left;
  padding-right: 2.5rem;
}
.merch-cat-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: #0c1f17;
  margin-bottom: 0.25rem;
  letter-spacing: -0.01em;
}
.merch-cat-items {
  font-size: 0.82rem;
  color: #6a6a6a;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.merch-extras {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}
.merch-extras .form-group { margin-bottom: 1rem; }
.merch-extras input[type="email"] {
  width: 100%;
}
.merch-extras .btn { min-width: 220px; }
.merch-vote-success {
  max-width: 520px;
  margin: 2rem auto;
  text-align: center;
  padding: 2.5rem 2rem;
  background: #f5ede0;
  border: 1px solid #e8dcc8;
  border-radius: 12px;
}
.merch-vote-success h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #0c1f17;
}
.merch-vote-success p {
  color: #5a5a5a;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}
.merch-vote-success p.small { font-size: 0.85rem; color: #888; margin-top: 1rem; }
.merch-vote-success a { color: #C8614B; text-decoration: underline; }

.photo-grid,
.track-cards,
.interest-form,
.email-signup,
.audience-list,
.about-teaching,
.locations,
.cta-banner {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.contact-section {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════
   TOGGLE GROUP — contact form reason selector
   ═══════════════════════════════════════ */
.toggle-group {
  display: flex;
  gap: 8px;
}
.toggle-btn {
  flex: 1;
  min-height: 56px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid var(--terra);
  border-radius: 8px;
  background: transparent;
  color: var(--cream);
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  line-height: 1.25;
  cursor: pointer;
  transition: all 0.2s;
}
.toggle-btn:hover {
  background: rgba(200, 97, 75, 0.15);
}
.toggle-btn.active {
  background: var(--terra);
  color: var(--forest, #0c1f17);
  font-weight: 600;
}

/* Footer legal links */
.footer-sep { margin: 0 0.5rem; opacity: 0.3; }
.footer-legal-link {
  color: rgba(245,241,235,0.5); text-decoration: none;
  font-size: inherit; transition: color 0.2s;
}
.footer-legal-link:hover { color: var(--accent); }

/* Privacy page */
.privacy-date { color: rgba(245,241,235,0.5); font-size: 0.85rem; margin-bottom: 2rem; }
#page-privacy h3 { color: var(--accent); margin-top: 2rem; margin-bottom: 0.5rem; }
#page-privacy p { color: var(--cream); line-height: 1.7; margin-bottom: 0.75rem; }
#page-privacy a { color: var(--accent); }

/* Footer stays full-width but content inside is centered */
.footer-grid {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════
   COMING SOON BANNERS (ProSeries reveal)
   ═══════════════════════════════════════ */
.coming-soon-banner {
  padding: 4rem 3rem;
  text-align: center;
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-light) 100%);
  border-top: 1px solid var(--forest-mid);
  border-bottom: 1px solid var(--forest-mid);
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}


.coming-soon-banner h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.8rem;
  color: var(--accent);
  margin-bottom: 1rem;
  line-height: 1.3;
}
.coming-soon-banner p {
  color: var(--cream);
  line-height: 1.7;
  margin-bottom: 1rem;
}


/* ═══════════════════════════════════════
   CAMPAIGN COMMAND CENTER
   ═══════════════════════════════════════ */

/* Access gate */
.campaign-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding: 2rem;
}


/* Responsive */
@media (max-width: 768px) {









  .coming-soon-banner { padding: 3rem 1.5rem; }
}


.a-pill {
  padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 500;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5);
  border: none; cursor: pointer; transition: all 0.2s; font-family: 'Outfit', sans-serif;
}
.a-pill.active { background: var(--terra); color: var(--forest, #0f1a14); font-weight: 600; }
.a-pill:hover:not(.active) { background: rgba(255,255,255,0.1); }


.a-stat {
  background: rgba(255,255,255,0.04); border-radius: 10px; padding: 14px 10px; text-align: center;
}


/* Cards */
.a-card {
  background: rgba(255,255,255,0.04); border-radius: 10px; padding: 14px; margin-bottom: 10px;
}


/* Row (key-value list item) */
.a-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.a-row:last-child { border-bottom: none; }


/* Badges */
.a-badge {
  font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap;
}

.a-badge-terra { background: var(--terra); color: var(--forest, #0f1a14); }


@keyframes a-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(107,175,138, 0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(107,175,138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(107,175,138, 0); }
}


/* Tamara Mark — memorial easter egg */
.tamara-mark {
  display: inline-block;
  vertical-align: middle;
  opacity: 0.5;
  transition: opacity 0.6s ease;
}
.tamara-mark:hover {
  opacity: 0.7;
}
.tamara-mark--footer {
  margin-left: 8px;
}

/* Fix footer hidden behind fixed sidebar on desktop. Scoped to the legacy
   sidebar layout only (2026-09-02): the topnav layout has no sidebar, and this
   rule was indenting the footer 240px on every desktop page. */
@media (min-width: 769px) {
  body:not(.has-topnav) .site-footer {
    margin-left: 240px;
  }
}
.tamara-mark--about {
  display: inline-block;
  vertical-align: super;
  margin: 0 0 0 2px;
  opacity: 0.45;
}


/* Early access page hides sidebar/footer for clean landing experience */
#page-early-access.active ~ #site-footer {
  display: none;
}


/* ═══════════════════════════════════════
   ACCESSIBILITY — WCAG 2.1 AA
   ═══════════════════════════════════════ */

/* Focus styles for all interactive elements */
.btn:focus-visible,
a:focus-visible,
.hamburger:focus-visible,
.toggle-btn:focus-visible,
.lightbox-close:focus-visible,
.lightbox-prev:focus-visible,
.lightbox-next:focus-visible,
.gallery-grid img[data-lightbox]:focus-visible,
.footer-links a:focus-visible,
.sidebar nav a:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 2px;
}

/* Form inputs already have focus styles — add visible outline too */
.form-group input:focus-visible,
.form-group textarea:focus-visible,
.form-group select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Gallery images as interactive elements */
.gallery-grid img[data-lightbox] {
  cursor: pointer;
}

/* Reduced motion for vestibular disorders */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
  /* Hide autoplay WebM logos; fall back to sibling PNG */
  video[autoplay] { display: none; }
  video[autoplay] + img { display: inline-block; }
}

/* ── TRACK RECORD landmark (homepage, between EA banner and two-entry split) ── */
.track-record {
  max-width: 1200px;
  margin: 64px auto 32px;
  padding: 48px 32px;
  background: linear-gradient(135deg, var(--forest-light) 0%, var(--forest) 100%);
  border-radius: 16px;
  text-align: center;
  border-top: 1px solid rgba(200, 97, 75, 0.18);
}

.track-record .tr-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 32px;
}

.track-record .tr-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin: 0 auto;
  max-width: 1000px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--forest-mid);
}

.track-record .tr-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.track-record .tr-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--ivory);
}

.track-record .tr-num span {
  color: var(--terra);
}

.track-record .tr-num .tr-arrow {
  font-family: 'Outfit', sans-serif;
  font-size: 0.6em;
  margin: 0 0.15em;
  vertical-align: 0.12em;
}

.track-record .tr-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ivory);
  opacity: 0.78;
  max-width: 200px;
}


@media (max-width: 760px) {
  .track-record {
    padding: 32px 20px;
    margin: 32px 16px 24px;
  }
  .track-record .tr-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    padding-bottom: 24px;
  }

}

/* ═══════════════════════════════════════════════════════════════
   LAUNCH STATE — appears at 00:00 ET, May 1, 2026
   Toggled by data-reveal-after / data-hide-after in campaign.js
   ═══════════════════════════════════════════════════════════════ */

/* Top-nav launch CTA — terracotta to scream "open" */
.nav-cta-launch {
  background: var(--terra) !important;
  color: var(--cream) !important;
  border-color: var(--terra) !important;
  font-weight: 700 !important;
}
.nav-cta-launch:hover {
  background: #b85540 !important;
  border-color: #b85540 !important;
  transform: translateY(-1px);
}


@keyframes lc-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.08); }
}


/* Email-signup launch variant */
.email-signup-launch .kicker {
  color: var(--terra) !important;
}
.email-signup-launch .btn-blush {
  background: var(--terra) !important;
  color: var(--cream) !important;
  border-color: var(--terra) !important;
  font-weight: 700 !important;
}
.email-signup-launch .btn-blush:hover {
  background: #b85540 !important;
  border-color: #b85540 !important;
}


/* ───── A11y utilities ───── */

/* Visually hidden, but available to screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Fieldset for the merch poll — wraps the category checkbox group so screen
   readers announce the group, without adding visual chrome (browser default
   is a border + 1em padding). */
.merch-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

/* ───── Per-field inline error (form polish) ───── */
.form-field-error {
  display: block;
  min-height: 0;
  margin-top: 6px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #ff6b6b;
  letter-spacing: 0.01em;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.15s ease, max-height 0.15s ease;
}
.form-field-error.show {
  opacity: 1;
  max-height: 4em;
}

/* ── dwdCON homepage flier card — mini comic-con poster, matches the IG
      announce graphics (campaign dwdcon-jul-2026): halftone forest ground,
      ISSUE #1 frame badge, terracotta-shadowed serif wordmark, tilted sticker
      chips, pink starburst, hard-shadow pink CTA. Retires with #dwdcon-cta
      after Jul 26, 2026. Gold = Tamara Mark only (none here). ── */
.dwdcon-cta {
  background: var(--oh-green-deep, #0c1f17);
  padding: 36px 56px 28px;
  border-top: 1px solid rgba(250, 243, 232, 0.12);
}


@media (prefers-reduced-motion: no-preference) {

  @keyframes dccCtaPulse {
    0%, 100% { transform: scale(1); box-shadow: 5px 5px 0 var(--dcc-ivory), 0 0 0 rgba(255, 122, 162, 0); }
    50%      { transform: scale(1.06); box-shadow: 5px 5px 0 var(--dcc-ivory), 0 0 26px rgba(255, 122, 162, 0.65); }
  }
}


@media (max-width: 760px) {
  .dwdcon-cta { padding: 28px 20px 22px; }





}


@media (prefers-reduced-motion: no-preference) {

  @keyframes dccGlow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(255, 122, 162, 0.25), 0 0 30px rgba(255, 122, 162, 0.24), 10px 12px 0 rgba(0, 0, 0, 0.35); }
    50%      { box-shadow: 0 0 0 1px rgba(255, 122, 162, 0.55), 0 0 52px rgba(255, 122, 162, 0.48), 10px 12px 0 rgba(0, 0, 0, 0.35); }
  }

  @keyframes dccWobble {
    0%, 100% { transform: rotate(-9deg) scale(1); }
    50%      { transform: rotate(-3deg) scale(1.06); }
  }

  @keyframes dccShimmer {
    0%, 55% { left: -60%; }
    85%, 100% { left: 130%; }
  }

  @keyframes dccTab {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(-2.5deg); }
  }
}


/* ═══════════════════════════════════════════════════════════════════════
 * EDITORIAL
 * Editorial system: chapters, pull quotes, long-form rhythm.
 * (was css/editorial.css)
 * ═══════════════════════════════════════════════════════════════════════ */

/* ============================================
   DWD · Editorial system
   Additive treatments ported from the redesign preview.
   Uses existing styles.css tokens only.
   Safe: no changes to buttons, forms, heroes, or JS.
   ============================================ */

/* ── Chapter marker ──
   Renders above major <h2> section intros as:
       No.  ⁰¹  — ABOUT ──────────────────────
   Big italic terracotta numeral, tiny blush superscript,
   tracked-out label on a hairline rule extending to the edge. */
.chapter {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin: 2.5rem 0 1.5rem;
  padding-top: 0.25rem;
}

.chapter .no {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 2.75rem;
  line-height: 0.9;
  letter-spacing: -0.5px;
  color: var(--terra);
  flex-shrink: 0;
}

.chapter .no sup {
  font-size: 0.9rem;
  vertical-align: super;
  margin-right: 2px;
  color: var(--blush);
  font-style: normal;
  font-weight: 400;
}

.chapter .lbl {
  flex: 1;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cream-faint);
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(30, 68, 50, 0.8);
  align-self: flex-end;
}

/* ── Kicker eyebrow ──
   Small tracked-out terracotta label. Drop above any h2/h3
   for an editorial "section intro" feel. */
.kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 0.75rem;
}

/* ── Pull quote ──
   Big italic Cormorant quote with side hairline rules in terracotta.
   Used sparingly — one per page max, as an editorial statement. */
.pull-quote {
  position: relative;
  padding: 5rem 3rem;
  text-align: center;
  background: var(--forest);
  border-top: 1px solid var(--forest-mid);
  border-bottom: 1px solid var(--forest-mid);
  margin: 3rem 0;
}

.pull-quote::before,
.pull-quote::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 64px;
  height: 1px;
  background: var(--terra);
}

.pull-quote::before { left: 3rem; }
.pull-quote::after  { right: 3rem; }

.pull-quote blockquote {
  max-width: 880px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: 2.75rem;
  line-height: 1.15;
  letter-spacing: -0.3px;
  color: var(--cream);
}

.pull-quote blockquote .hl {
  color: var(--blush);
  background: linear-gradient(180deg, transparent 65%, rgba(200, 97, 75, 0.3) 65%);
  padding: 0 4px;
}

.pull-quote cite {
  display: block;
  margin-top: 1.75rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--terra);
}

.pull-quote cite span {
  color: var(--cream-faint);
  font-weight: 400;
}

/* ── Top nav bar ──
   Horizontal sticky bar replacing the old sidebar on desktop.
   On mobile (<=900px) the .sidebar slides in as the nav drawer (see styles.css:1820). */
@media (min-width: 901px) {
  .sidebar,
  .mobile-header,
  .sidebar-overlay { display: none; }
}

body.has-topnav .main {
  margin-left: 0 !important;
  width: 100% !important;
}

.topnav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 1rem 2rem;
  background: rgba(10, 20, 15, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(30, 68, 50, 0.6);
}

.topnav .brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.topnav .brand img,
.topnav .brand video {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.topnav .brand .wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 0.3px;
  color: var(--cream);
}

.topnav .brand .wordmark em {
  font-style: italic;
  color: var(--terra);
  font-weight: 400;
}

.topnav nav {
  display: flex;
  gap: 2rem;
  justify-content: center;
}

.topnav nav a {
  position: relative;
  padding: 0.4rem 0;
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 0.55rem + 0.3vw, 1rem);
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
  transition: color 0.3s;
}

.topnav nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--blush);
  transition: right 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.topnav nav a:hover { color: var(--blush); }
.topnav nav a:hover::after { right: 0; }

.topnav nav a.active {
  color: var(--blush);
}

.topnav nav a.active::after {
  right: 0;
  background: var(--terra);
}

.topnav .nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap; /* long CTA labels ("Summer Intensive") must not wrap */
  padding: 0.7rem 1.25rem;
  background: var(--terra);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: clamp(0.68rem, 0.5rem + 0.3vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.topnav .nav-cta:hover {
  background: var(--blush);
  color: var(--forest);
  letter-spacing: 1.7px;
}

.topnav .topnav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(240, 235, 227, 0.3);
  color: var(--cream);
  padding: 0.5rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
}

/* Nav drawer engages at 1150px: 7 tracked uppercase links + a long era-gated
   CTA overflow the bar between ~900-1280px (REBRAND-ONE-HOUSE §6). */
@media (max-width: 1150px) {
  .topnav {
    grid-template-columns: auto 1fr auto;
    padding: 0.75rem 1rem;
    gap: 0.75rem;
  }
  /* Keep the header row to one clean line — the brand never wraps, even
     when the toggle + (briefly, mid-transition) CTA share the row. */
  .topnav .brand {
    min-width: 0;
    white-space: nowrap;
    flex-shrink: 1;
  }
  .topnav .brand .wordmark {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topnav .brand img,
  .topnav .brand video {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
  }

  /* Full-screen glass panel under the fixed header (was an absolute
     dropdown that only wrapped its content height — page bled through
     below the last link). */
  .topnav nav {
    display: none;
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px 24px calc(24px + env(safe-area-inset-bottom));
    background: rgba(9, 26, 19, 0.9);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border-bottom: none;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .topnav nav { background: var(--rb-bg-deep, #091a13); }
  }
  .topnav.is-open nav { display: flex; }

  /* Large touch targets, hairline separators, staggered fade/slide entrance.
     Transition-based (not JS-timed) so the additions.css reduced-motion
     strip (`*` → transition/animation-duration: .01ms) kills it cleanly. */
  .topnav nav a {
    padding: 0;
    min-height: 56px;
    display: flex;
    align-items: center;
    font-size: 1.35rem;
    border-bottom: 1px solid var(--rb-rule-soft, rgba(250, 243, 232, 0.08));
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity var(--rb-dur-med, 320ms) var(--rb-ease-out, cubic-bezier(.22, 1, .36, 1)),
      transform var(--rb-dur-med, 320ms) var(--rb-ease-out, cubic-bezier(.22, 1, .36, 1)),
      color 0.3s;
  }
  .topnav.is-open nav a {
    opacity: 1;
    transform: translateY(0);
  }
  .topnav.is-open nav a:nth-child(1) { transition-delay: 40ms; }
  .topnav.is-open nav a:nth-child(2) { transition-delay: 80ms; }
  .topnav.is-open nav a:nth-child(3) { transition-delay: 120ms; }
  .topnav.is-open nav a:nth-child(4) { transition-delay: 160ms; }
  .topnav.is-open nav a:nth-child(5) { transition-delay: 200ms; }
  .topnav.is-open nav a:nth-child(6) { transition-delay: 240ms; }
  .topnav.is-open nav a:nth-child(7) { transition-delay: 280ms; }
  .topnav nav a::after { display: none; }
  .topnav .nav-cta { display: none; }
  /* The era-gated launch CTA (Register / Summer Intensive / Express Interest)
     shares the header row with the brand + toggle. It used to try to surface
     itself full-width inside the open menu via grid-column, but the row is a
     flex container at this breakpoint, so it just overflowed off-screen right
     and squeezed the brand into 3 lines. Simplest fix: collapse it out of the
     row entirely while the menu is open, via opacity/pointer-events + zero
     dimensions — NOT display, since campaign.js sets this element's
     display inline on its own date-driven schedule and we don't want to race
     that (an display:none here would still "win" today, but would
     silently stop working the moment campaign.js's own inline value order
     changes). */
  .topnav.is-open .nav-cta-launch {
    opacity: 0;
    pointer-events: none;
    width: 0;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
  }
  .topnav .topnav-toggle { display: inline-block; }
}

/* ── Entry-door cards ──
   Two-column home cards replacing .brand-arms, with photo thumb + body. */
.entries {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--forest-mid);
  border-bottom: 1px solid var(--forest-mid);
  background: var(--forest-dark);
}

.entry {
  position: relative;
  display: grid;
  grid-template-columns: 260px 1fr;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: var(--forest-dark);
  border-right: 1px solid var(--forest-mid);
  transition: background 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.entry:last-child { border-right: none; }
.entry:hover { background: var(--forest-light); }

.entry .thumb {
  position: relative;
  overflow: hidden;
  background: var(--black);
  min-height: 260px;
}

.entry .thumb .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(0.3) brightness(0.75);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s;
}

.entry:hover .thumb .bg {
  transform: scale(1.08);
  filter: grayscale(0) brightness(0.9);
}

.entry .thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(12, 31, 23, 0) 0%, rgba(12, 31, 23, 0.35) 100%);
}

.entry .body {
  padding: 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.875rem;
  min-width: 0;
}

.entry .tag {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--cream-faint);
}

.entry h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3rem;
  line-height: 0.95;
  letter-spacing: -1.5px;
  color: var(--cream);
  margin: 0;
}

.entry h3 em {
  font-style: italic;
  font-weight: 400;
  color: var(--blush);
}

.entry .entry-hl {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--blush);
}

.entry .entry-hl em {
  color: var(--cream);
  font-style: italic;
}

.entry .entry-desc {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--cream);
  max-width: 420px;
}

.entry .foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.875rem;
  border-top: 1px solid rgba(30, 68, 50, 0.8);
  gap: 1rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}

.entry .facts { display: flex; gap: 1.25rem; }

.entry .facts .k {
  font-family: var(--font-body);
  font-size: 0.55rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cream-faint);
  font-weight: 700;
  margin-bottom: 2px;
}

.entry .facts .v {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--cream);
  font-weight: 600;
}

.entry .facts .v em {
  font-style: italic;
  color: var(--blush);
  font-weight: 400;
}

.entry .enter-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--blush);
  transition: gap 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
}

.entry:hover .enter-arrow {
  gap: 1.25rem;
  color: var(--cream);
}

.entry .enter-arrow .a {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1;
}

@media (max-width: 900px) {
  .entries { grid-template-columns: 1fr; }
  .entry {
    grid-template-columns: 120px 1fr;
    border-right: none;
    border-bottom: 1px solid var(--forest-mid);
  }
  .entry:last-child { border-bottom: none; }
  .entry .thumb { min-height: 160px; }
  .entry .body { padding: 1.25rem 1.25rem; gap: 0.65rem; }
  .entry h3 { font-size: 1.75rem; letter-spacing: -0.5px; }
  .entry .entry-hl { font-size: 0.95rem; }
  .entry .entry-desc { font-size: 0.8rem; }
  .entry .foot { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

/* ── Hero meta eyebrow ──
   Small tracked-out line above the main headline: "— Est. 2025 · Orlando, FL" */
.hero-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 1.75rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--terra);
}

.hero-eyebrow .bar {
  display: inline-block;
  width: 52px;
  height: 1px;
  background: var(--terra);
}

.hero-eyebrow .sep {
  color: var(--cream-faint);
  font-weight: 400;
}


@keyframes aud-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(200, 97, 75, 0.25); }
  50%      { box-shadow: 0 0 0 7px rgba(200, 97, 75, 0.12); }
}


/* ── Responsive ── */
@media (max-width: 768px) {
  .chapter { gap: 0.9rem; margin: 2rem 0 1.25rem; }
  .chapter .no { font-size: 2rem; }
  .chapter .no sup { font-size: 0.7rem; }
  .chapter .lbl { font-size: 0.6rem; letter-spacing: 2.5px; }

  .pull-quote { padding: 3rem 1.5rem; margin: 2rem 0; }
  .pull-quote::before,
  .pull-quote::after { width: 32px; }
  .pull-quote::before { left: 1.5rem; }
  .pull-quote::after  { right: 1.5rem; }
  .pull-quote blockquote { font-size: 1.75rem; }

  .hero-eyebrow { font-size: 0.6rem; gap: 10px; letter-spacing: 2px; }
  .hero-eyebrow .bar { width: 32px; }











}


/* ═══════════════════════════════════════════════════════════════════════
 * REBRAND
 * One House rebrand: home hero, top nav, footer.
 * (was css/rebrand.css)
 * ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
 * DWD — Rebrand stylesheet
 * Loaded AFTER styles.css, additions.css, editorial.css
 * Home-page-specific rules scoped under #page-home to keep other pages
 * untouched until their own rebrand commit.
 * ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Forest greens — brand-official dark tones */
  --rb-bg-base: #0c1f17;
  --rb-bg-elevated: #102b1f;
  --rb-bg-deep: #091a13;

  /* Warm accents — aliased to styles.css canon so the two token sets can't drift */
  --rb-ivory: var(--ivory);
  --rb-ivory-dim: var(--ivory-dim);
  --rb-ivory-low: #a9a196;
  --rb-pink: var(--pink);
  --rb-terracotta: var(--terra);
  --rb-terracotta-deep: #9c4a39;
  --rb-seafoam: var(--seafoam);
  --rb-gold: var(--gold-tamara);

  /* Rules */
  --rb-rule: rgba(250,243,232,0.16);
  --rb-rule-soft: rgba(250,243,232,0.08);

  /* Radius scale */
  --rb-radius-s: 8px;
  --rb-radius-m: 16px;
  --rb-radius-pill: 999px;

  /* Forest-tinted shadow scale — never black */
  --rb-shadow-1: 0 1px 2px rgba(12,31,23,.10), 0 2px 8px rgba(12,31,23,.10);
  --rb-shadow-2: 0 2px 4px rgba(12,31,23,.12), 0 8px 24px rgba(12,31,23,.16);
  --rb-shadow-3: 0 4px 12px rgba(12,31,23,.14), 0 16px 40px rgba(12,31,23,.22);

  /* iOS-feel motion */
  --rb-ease-out: cubic-bezier(.22,1,.36,1);
  --rb-dur-fast: 160ms;
  --rb-dur-med: 320ms;
}

/* ═══ GLOBAL — BODY & LEGACY NAV CONTROL ═══ */
body.has-topnav {
  background: var(--rb-bg-base);
  color: var(--rb-ivory);
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

/* Hide legacy sidebar & mobile header — topnav is the only visible nav on desktop AND tablet.
   On mobile (<=768px) the .sidebar acts as the slide-in nav drawer (see styles.css:1820).
   Topnav loses its inline links at max-width 900px and hands off to the hamburger menu;
   the sidebar stays hidden until the drawer-mode breakpoint at 768px takes over. */
@media (min-width: 769px) {
  body.has-topnav .sidebar,
  body.has-topnav .mobile-header,
  body.has-topnav .sidebar-overlay { display: none; }
}

/* Only the active .page shows (mirrors main.js behavior, keeps preview clean) */
main.main .page:not(.active) { display: none; }

/* Non-home pages: offset content to clear fixed topnav (their -hero paddings assume
   sticky topnav flow, so without this the top ~6px of h1 would be covered by the
   70px-tall fixed topnav at scrollY=0. Home's #page-home .hero has its own padding-top). */
body.has-topnav main.main > .page.active:not(#page-home) {
  padding-top: 72px;
}

/* ═══ GLOBAL — TOP NAV ═══ */
.topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 14px 32px;
  display: flex; align-items: center; gap: 32px;
  background: rgba(12,31,23,0.82);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rb-rule);
  transition: padding 0.3s ease, background 0.3s ease;
}
.topnav.scrolled { padding: 10px 32px; background: rgba(12,31,23,0.96); }
.topnav .brand {
  display: flex; align-items: center; gap: 14px; margin-right: auto;
  text-decoration: none;
}
.topnav .brand img, .topnav .brand video { width: 42px; height: 42px; object-fit: contain; }
.topnav .brand .wordmark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; letter-spacing: 0.02em; color: var(--rb-ivory);
}
.topnav .brand .wordmark em { font-style: italic; color: var(--rb-pink); font-weight: 400; }
.topnav nav { display: flex; gap: 28px; }
.topnav nav a {
  font-size: clamp(11px, 0.5rem + 0.25vw, 14px); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rb-ivory-dim); padding: 6px 0; position: relative;
  text-decoration: none;
  transition: color 0.3s ease;
}
.topnav nav a::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: var(--rb-pink); transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s ease;
}
.topnav nav a:hover, .topnav nav a.active { color: var(--rb-pink); }
.topnav nav a:hover::after, .topnav nav a.active::after { transform: scaleX(1); }
.topnav .nav-cta {
  font-size: clamp(11px, 0.5rem + 0.25vw, 14px); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 12px 22px; background: var(--rb-pink); color: var(--rb-bg-base);
  text-decoration: none; white-space: nowrap; /* long CTA labels must not wrap */
  transition: transform 0.25s ease;
}
.topnav .nav-cta:hover { transform: translateY(-1px); }
.topnav .topnav-toggle { display: none; }

/* ═══ HOME PAGE — HERO (dual split) ═══ */
#page-home .hero {
  padding-top: 72px;
  display: grid;
  grid-template-columns: 11fr 9fr;
  min-height: 92vh;
  max-height: 960px;
  position: relative;
  background: var(--rb-bg-base);
  /* Isolate the hero so body::before's pink radial glow (top: -20%,
     right: -15%, position: fixed, z-index: 0) doesn't paint over the
     right side of the hero. Without this, the glow gradient created a
     visible vertical seam between the title and logo columns. */
  isolation: isolate;
}
#page-home .hero-photo {
  position: relative; overflow: hidden;
  background: #000;
}
#page-home .hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Anchor to John's face (~65% horizontal, ~67% vertical of the 4608×2092 image).
     This keeps his face in frame at all container aspect ratios — desktop dual-split,
     tall-narrow resized windows, and mobile portrait alike. Default `center 62%` was
     cutting off the face at narrow widths. */
  object-position: 65% 60%;
  animation: rb-kenburns 22s ease-in-out infinite alternate;
}
@keyframes rb-kenburns {
  0% { transform: scale(1.04); }
  100% { transform: scale(1.14) translate(-2%, -1.5%); }
}
#page-home .hero-photo .caption {
  position: absolute; bottom: 24px; left: 24px;
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 14px; color: var(--rb-ivory-dim);
  background: rgba(12,31,23,0.78); padding: 8px 14px;
  backdrop-filter: blur(6px);
}
#page-home .hero-text {
  padding: 72px 72px 72px 88px;
  display: flex; flex-direction: column; justify-content: center; gap: 32px;
  position: relative;
  background: var(--rb-bg-base);
}
#page-home .hero-text::before {
  content: ""; position: absolute;
  top: 96px; bottom: 96px; left: 0; width: 1px;
  background: linear-gradient(180deg, transparent, var(--rb-pink) 30%, var(--rb-pink) 70%, transparent);
  opacity: 0.5;
}

#page-home .hero-eyebrow {
  display: inline-flex; align-items: center; gap: 16px;
  font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--rb-pink);
}
#page-home .hero-eyebrow .bar { width: 48px; height: 1px; background: var(--rb-pink); display: inline-block; }
#page-home .hero-eyebrow .sep { margin: 0 4px; }
#page-home .hero h1 {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(64px, 7.5vw, 140px);
  line-height: 0.88; letter-spacing: -0.025em;
  color: var(--rb-ivory);
  margin: 0;
}
#page-home .hero h1 .line {
  display: block;
  opacity: 0; transform: translateY(30px);
  animation: rb-rise 1.2s cubic-bezier(.2,.8,.2,1) forwards;
}
#page-home .hero h1 .line:nth-child(1) { animation-delay: 0.1s; }
#page-home .hero h1 .line:nth-child(2) {
  animation-delay: 0.28s;
  font-style: italic; color: var(--rb-pink); padding-left: 0.4em;
}
#page-home .hero h1 .line:nth-child(3) { animation-delay: 0.46s; }
@keyframes rb-rise { to { opacity: 1; transform: translateY(0); } }

#page-home .hero .subtitle {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: clamp(16px, 1.2vw, 20px); line-height: 1.5;
  color: var(--rb-ivory-dim); max-width: 520px;
  margin: 0;
}


@keyframes rb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }


/* ═══ HOME — HERO FOOT ═══ */
#page-home .hero-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 16px; padding-top: 20px;
  border-top: 1px solid var(--rb-rule);
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--rb-ivory-dim);
}
#page-home .hero-foot .scroll {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  letter-spacing: 0; text-transform: none; font-size: 14px;
}


/* ═══ HOME — TWO ENTRIES ═══ */
#page-home .entries {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 90vh; position: relative;
}
#page-home .entries .entry {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 88px 56px 72px; min-height: 90vh;
  color: var(--rb-ivory);
  text-decoration: none;
}
#page-home .entries .entry .thumb,
#page-home .entries .entry .thumb .bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 1.4s ease;
}
#page-home .entries .entry:hover .thumb .bg { transform: scale(1.06); }

/* Per-entry crop tuning — lift ProSeries dancer so her face clears the foot bar */
#page-home .entries .entry .thumb .bg { background-repeat: no-repeat; }
#page-home .entries .entry[href="#adult-company"] .thumb .bg {
  background-position: center 40%;
}

/* <img> variant for ProSeries — full pixel control with object-position */
#page-home .entries .entry .thumb .bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 22% 28%;
  transition: transform 1.4s ease;
}
#page-home .entries .entry:hover .thumb .bg-img { transform: scale(1.06); }
#page-home .entries .entry::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,31,23,0.5) 0%, rgba(12,31,23,0.35) 40%, rgba(12,31,23,0.94) 100%);
  transition: background 0.6s ease;
}
#page-home .entries .entry:hover::after {
  background: linear-gradient(180deg, rgba(12,31,23,0.3) 0%, rgba(12,31,23,0.22) 40%, rgba(12,31,23,0.8) 100%);
}
#page-home .entries .entry > .body,
#page-home .entries .entry > .foot { position: relative; z-index: 2; }
#page-home .entries .entry .tag {
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
}
#page-home .entries .entry h3 {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(64px, 8vw, 128px);
  line-height: 0.9; letter-spacing: -0.015em;
  margin: 24px 0 0; color: var(--rb-ivory);
}
#page-home .entries .entry h3 em { font-style: italic; }
#page-home .entries .entry .entry-hl {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 22px; margin-top: 16px; color: var(--rb-pink);
}
#page-home .entries .entry .entry-desc {
  font-size: 15px; line-height: 1.65; color: var(--rb-ivory-dim);
  max-width: 480px; margin-top: 20px;
}
#page-home .entries .entry .foot {
  margin-top: 48px;
  display: flex; justify-content: space-between; align-items: end;
  flex-wrap: wrap; gap: 24px;
  padding-top: 24px; border-top: 1px solid rgba(250,243,232,0.18);
}
#page-home .entries .entry .facts { display: flex; gap: 32px; flex-wrap: wrap; }
#page-home .entries .entry .f .k {
  font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--rb-ivory-dim); margin-bottom: 4px;
}
#page-home .entries .entry .f .v {
  font-family: 'Cormorant Garamond', serif; font-size: 18px;
  color: var(--rb-ivory);
}
#page-home .entries .entry .f .v em { font-style: italic; color: var(--rb-pink); }
#page-home .entries .entry .enter-arrow {
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 14px;
  padding-bottom: 6px; border-bottom: 1px solid var(--rb-ivory);
  color: var(--rb-ivory);
}
#page-home .entries .entry:hover .enter-arrow .a { transform: translateX(8px); }
#page-home .entries .entry .enter-arrow .a {
  display: inline-block; transition: transform 0.3s ease;
}
#page-home .entries .entry.proseries .tag,
#page-home .entries .entry[href="#proseries"] .tag { color: var(--rb-seafoam); }
#page-home .entries .entry.proseries h3 em,
#page-home .entries .entry[href="#proseries"] h3 em { color: var(--rb-seafoam); }
#page-home .entries .entry.collective .tag,
#page-home .entries .entry[href="#adult-company"] .tag { color: var(--rb-terracotta); }
#page-home .entries .entry.collective h3 em,
#page-home .entries .entry[href="#adult-company"] h3 em { color: var(--rb-terracotta); }

/* ═══ HOME — FEATURED VIDEO ═══ */
#page-home .video-featured {
  padding: 140px 32px;
  background: var(--rb-bg-base);
  border-top: 1px solid var(--rb-rule);
}
#page-home .video-featured .wrap { max-width: 1280px; margin: 0 auto; }
#page-home .video-featured .row {
  display: flex; justify-content: space-between; align-items: end;
  margin-bottom: 48px; gap: 48px; flex-wrap: wrap;
}
#page-home .video-featured .video-label {
  display: inline-flex; align-items: center; gap: 18px;
  font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--rb-pink); margin-bottom: 16px;
}
#page-home .video-featured .video-label::before {
  content: ""; width: 40px; height: 1px; background: var(--rb-pink);
}
#page-home .video-featured h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(48px, 6vw, 88px); line-height: 0.95;
  margin: 0; color: var(--rb-ivory);
}
#page-home .video-featured h2 em { font-style: italic; color: var(--rb-pink); }
#page-home .video-featured .meta {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 18px; color: var(--rb-ivory-dim);
  max-width: 300px; text-align: right; line-height: 1.5;
}
#page-home .video-featured .video-embed {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  border: 1px solid var(--rb-rule);
}
#page-home .video-featured .video-embed iframe {
  width: 100%; height: 100%; border: 0;
}

/* ═══ HOME — PHOTO GRID ═══ */
#page-home .photo-grid-section {
  padding: 140px 32px;
  background: var(--rb-bg-base);
  border-top: 1px solid var(--rb-rule);
}
#page-home .photo-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px;
  max-width: 1400px; margin: 0 auto;
}
#page-home .photo-grid .ph { position: relative; overflow: hidden; margin: 0; }
#page-home .photo-grid .ph img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s ease;
  filter: contrast(1.04);
  display: block;
}
#page-home .photo-grid .ph:hover img { transform: scale(1.05); }
#page-home .photo-grid .g1 { grid-column: span 7; aspect-ratio: 3/2; }
#page-home .photo-grid .g2 { grid-column: span 5; aspect-ratio: 4/5; margin-top: 48px; }
#page-home .photo-grid .g3 { grid-column: span 4; aspect-ratio: 3/4; }
#page-home .photo-grid .g4 { grid-column: span 4; aspect-ratio: 3/4; }
#page-home .photo-grid .g5 { grid-column: span 4; aspect-ratio: 3/4; }
#page-home .photo-grid .g6 { grid-column: span 12; aspect-ratio: 21/9; margin-top: 24px; }


@keyframes rb-slide { to { transform: translateX(-50%); } }

/* ═══ HOME — PULL QUOTE (ivory landmark) ═══ */
/* Memorial band sits on FOREST, not ivory — the Tamara Mark is gold, and gold
   never goes on ivory. Flipping the ground keeps the tribute legible and on-rule. */
#page-home .pull-quote {
  padding: 180px 32px;
  background: var(--rb-bg-base);
  color: var(--rb-ivory);
  text-align: center;
  position: relative; overflow: hidden;
}
#page-home .pull-quote .bg-tamara {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 440px; height: 220px; opacity: 0.12;
  pointer-events: none;
}
/* Tamara Mark — two overlapping unfilled gold circles. Per the memorial spec
   they are NOT the same size and NOT level: the right circle is smaller and
   sits a touch higher. */
#page-home .pull-quote .bg-tamara::before,
#page-home .pull-quote .bg-tamara::after {
  content: ""; position: absolute;
  border: 2px solid var(--rb-gold); border-radius: 50%;
}
#page-home .pull-quote .bg-tamara::before {
  width: 200px; height: 200px; top: 20px; left: 40px;
}
#page-home .pull-quote .bg-tamara::after {
  width: 150px; height: 150px; top: 0; left: 200px;
}
#page-home .pull-quote > .content { position: relative; z-index: 2; }
#page-home .pull-quote .dot {
  width: 6px; height: 6px; background: var(--rb-terracotta);
  border-radius: 50%; margin: 0 auto 40px;
}
#page-home .pull-quote blockquote {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(32px, 4.5vw, 72px);
  line-height: 1.15; letter-spacing: -0.01em;
  max-width: 1100px; margin: 0 auto;
  color: var(--rb-ivory);
}
#page-home .pull-quote blockquote .hl {
  font-style: italic; color: var(--rb-terracotta);
}
#page-home .pull-quote cite {
  display: block; margin-top: 48px;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  font-style: normal;
  color: rgba(250,243,232,0.6);
}
#page-home .pull-quote cite span { color: var(--rb-terracotta); }
/* Generous negative space should scale with the viewport, not stay a desktop constant. */
@media (max-width: 900px) { #page-home .pull-quote { padding: 96px 22px; } }
@media (max-width: 520px) { #page-home .pull-quote { padding: 64px 20px; } }

/* ═══ HOME — EMAIL SIGNUP ═══ */
#page-home .email-signup {
  padding: 160px 32px;
  background: url('../images/photos/opt/201_prelude-in-c-minor_84-1600.webp') center/cover;
  position: relative; text-align: center;
}
#page-home .email-signup::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(200,97,75,0.78) 0%, rgba(12,31,23,0.88) 100%);
}
#page-home .email-signup > * { position: relative; z-index: 2; }
#page-home .email-signup .kicker {
  font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--rb-pink); margin-bottom: 24px;
}
#page-home .email-signup h3 {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(56px, 7vw, 112px); line-height: 1;
  letter-spacing: -0.015em;
  color: var(--rb-ivory);
  margin: 0;
}
#page-home .email-signup h3 em { font-style: italic; color: var(--rb-pink); }
#page-home .email-signup p {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 22px; color: var(--rb-ivory-dim);
  margin: 28px auto 0; max-width: 640px;
}
#page-home .email-signup .btn,
#page-home .email-signup .btn-blush {
  display: inline-block; margin-top: 48px;
  padding: 20px 44px;
  background: var(--rb-pink); color: var(--rb-bg-base);
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.3s ease;
}
#page-home .email-signup .btn:hover,
#page-home .email-signup .btn-blush:hover { transform: translateY(-2px); }

/* ═══ GLOBAL — FOOTER (targets live markup: .site-footer > .footer-grid > .footer-brand + .footer-links × 2, .footer-bottom) ═══ */
footer.site-footer {
  padding: 96px 32px 48px;
  background: var(--rb-bg-deep);
  border-top: 1px solid var(--rb-rule);
  color: var(--rb-ivory);
}
footer.site-footer .footer-grid {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 56px;
}
/* Brand column */
footer.site-footer .footer-brand img {
  display: block; margin-bottom: 20px;
  width: 60px; height: 60px;
}
footer.site-footer .footer-brand h4 {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: 28px; letter-spacing: 0.02em;
  margin: 0 0 12px; color: var(--rb-ivory);
}
footer.site-footer .footer-brand .location {
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--rb-ivory-dim); margin-bottom: 20px;
}
footer.site-footer .footer-brand .sub-brands {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 15px; color: var(--rb-pink);
  padding-top: 20px; border-top: 1px solid var(--rb-rule-soft);
  max-width: 360px;
}
/* Link columns */
footer.site-footer .footer-links h5 {
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--rb-pink); margin: 0 0 24px;
  font-weight: 500;
}
footer.site-footer .footer-links a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0;
  color: var(--rb-ivory-dim); font-size: 14px;
  text-decoration: none;
  transition: color 0.25s ease;
}
footer.site-footer .footer-links a:hover { color: var(--rb-pink); }
footer.site-footer .footer-links a svg {
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.25s ease;
}
footer.site-footer .footer-links a:hover svg { opacity: 1; }
/* Footer bottom — copyright + privacy + tamara mark */
footer.site-footer .footer-bottom {
  max-width: 1400px; margin: 72px auto 0;
  padding-top: 32px; border-top: 1px solid var(--rb-rule);
  display: flex; justify-content: center; align-items: center;
  gap: 16px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--rb-ivory-dim);
}
footer.site-footer .footer-bottom .footer-sep {
  color: var(--rb-rule); opacity: 0.8;
}
footer.site-footer .footer-bottom .footer-legal-link {
  color: var(--rb-ivory-dim); text-decoration: none;
  transition: color 0.25s ease;
}
footer.site-footer .footer-bottom .footer-legal-link:hover { color: var(--rb-pink); }
footer.site-footer .footer-bottom .tamara-mark--footer {
  margin-left: 8px; opacity: 0.7;
}

/* ═══ GLOBAL — SCROLL REVEAL ═══
   main.js adds .visible when a .reveal crosses into the viewport.
   Match that class name; also keep .in as a fallback for the preview-only
   inline script in index-rebrand-preview.html. */
#page-home .reveal {
  opacity: 0; transform: translateY(30px);
  transition: all 1s cubic-bezier(.2,.8,.2,1);
}
#page-home .reveal.visible,
#page-home .reveal.in { opacity: 1; transform: translateY(0); }
/* Safety net: never trap content invisible if the observer/JS fails, and show
   reveals without animation for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
  .reveal, #page-home .reveal { opacity: 1; transform: none; transition: none; }
}

/* ═══ HOME — FORK LEAD-IN ═══
   Frames the two-program choice (now directly under the hero) as the primary
   decision, so the arm cards read as "the fork" rather than a stray pair. */
#page-home .entries-lead {
  max-width: 1100px; margin: 84px auto 30px; padding: 0 32px; text-align: center;
}
#page-home .entries-eyebrow {
  display: inline-block;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--rb-terracotta); margin-bottom: 16px;
}
#page-home .entries-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(40px, 6vw, 76px); line-height: 1.02; letter-spacing: -0.01em;
  color: var(--rb-ivory); margin: 0;
}
#page-home .entries-title em { font-style: italic; color: var(--rb-terracotta); }
#page-home .entries-sub {
  font-family: 'Outfit', sans-serif; font-size: 16px; line-height: 1.55;
  color: var(--rb-ivory-dim); margin: 16px auto 0; max-width: 52ch;
}
@media (max-width: 640px) {
  #page-home .entries-lead { margin: 52px auto 24px; }
}

/* ═══ HOME — RESPONSIVE ═══ */
/* Nav drawer engages at 1150px (mirrors editorial.css). rebrand.css loads
   LAST, so it must re-assert the drawer hide + toggle show here, or its own
   base rules (.topnav nav display:flex L94, .topnav-toggle display:none L115)
   win on source-order tie and leave 900-1150px with no usable navigation. */
@media (max-width: 1150px) {
  .topnav nav { display: none; }
  .topnav .topnav-toggle { display: inline-block; }
}

@media (max-width: 900px) {
  .topnav { padding: 12px 20px; }
  .topnav .brand img, .topnav .brand video { width: 52px; height: 52px; }
  .topnav .brand .wordmark { font-size: 18px; }

  #page-home .hero {
    grid-template-columns: 1fr; max-height: none; padding-top: 64px;
  }
  #page-home .hero-photo { height: 55vh; order: 1; }
  #page-home .hero-text {
    padding: 48px 24px; order: 2; gap: 24px;
  }
  #page-home .hero-text::before { display: none; }

  #page-home .hero h1 { font-size: clamp(56px, 15vw, 120px); }

  #page-home .entries { grid-template-columns: 1fr; min-height: auto; }
  #page-home .entries .entry { min-height: 70vh; padding: 56px 24px 48px; }
  #page-home .photo-grid .ph {
    grid-column: span 12;
    aspect-ratio: 3/2;
    margin-top: 0 !important;
  }

  footer.site-footer { padding: 64px 20px 32px; }
  footer.site-footer .footer-grid {
    grid-template-columns: 1fr 1fr; gap: 40px;
  }
  footer.site-footer .footer-brand { grid-column: 1 / -1; }
  footer.site-footer .footer-bottom {
    margin-top: 48px; padding-top: 24px;
    font-size: 10px; gap: 10px;
  }

  /* ─── CONTACT PAGE — grid blowout + headline clearance ─── */
  /* Fix 1: styles.css mobile override uses `1fr` = minmax(auto, 1fr). A form
     child with min-content wider than the viewport then pushes the grid track
     past 100vw. Force `minmax(0, 1fr)` so children stay shrinkable.
     Fix 2: contact-form-side top padding is smaller than other pages' hero
     padding, so the H1 ended up behind the 67px fixed topnav. Bump side
     top padding to clear it. */
  #page-contact .contact-section {
    grid-template-columns: minmax(0, 1fr);
  }
  #page-contact .contact-form-side {
    padding: 64px 1.25rem 2rem;
    min-width: 0;
  }
  #page-contact .contact-info-side {
    padding: 2rem 1.25rem;
    min-width: 0;
  }

  /* ─── TAP TARGETS — bump inline links to ≥ 40px hit areas ─── */
  /* Applies on mobile only. Visual size stays the same — we inflate via
     padding + keep the rendered text flush (no underline shift). */
  #page-contact .contact-info-item a,
  #page-privacy p a[href^="mailto:"],
  #page-early-access a[href*="instagram.com"],
  #page-early-access a[href="#privacy"],
  .site-footer .footer-legal-link {
    display: inline-block;
    padding: 10px 0;
    min-height: 44px;
    line-height: 1.5;
  }
  /* Footer nav links were never bumped — ~28px targets stacked close. Floor them too. */
  .site-footer .footer-links a { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }


}

/* ═══════════════════════════════════════════════════════════════════════
 * Amusing Spaces (2025) video embed — dwdCOLLECTIVE origin section.
 * Hushed volume: thin terracotta rule, no chrome, no shadow theatrics.
 * The clip is preload="none" so the 4.5MB only lands if someone hits play.
 * ═══════════════════════════════════════════════════════════════════════ */
.as-video-wrap {
  max-width: 980px;
  margin: 0 auto;
  border-top: 1px solid var(--arm-ring, rgba(200, 97, 75, 0.30));
  padding-top: 20px;
}
.as-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 592;
  background: #0a1610;
  outline: 1px solid rgba(200, 97, 75, 0.22);
  outline-offset: -1px;
}
@media (max-width: 768px) {
  .as-video-wrap { padding-top: 14px; }
}


/* ═══════════════════════════════════════════════════════════════════════
 * AUDITION
 * Poster-era components (the audition surfaces are retired; the shared card and clock primitives are not).
 * (was css/audition.css)
 * ═══════════════════════════════════════════════════════════════════════ */

/* ============================================================
   audition.css
   Audition surfaces on dancewithdixon.com:
     1. Triptych — two equal-weight event cards (audition + a-muse)
     2. Sibling-of-hero Audition CTA card (.audition-cta-card)
     3. Dedicated full-bleed Audition Day band (#audition)
     4. Sitewide sticky audition ticker (.audition-ticker)
   Token names kept as --oh-* (poster-pages.css consumes them).
   ============================================================ */

:root {
  --oh-green-deep: #0d2820;
  --oh-green-dark: #14352a;
  --oh-green-ink:  #0a1f18;
  --oh-coral:      #d97757;
  --oh-coral-deep: #c25b46;
  --oh-coral-ink:  #a4452f;
  --oh-cream:      #f6efe2;
  --oh-cream-warm: #faeee0;
  --oh-blush:      #f4d8c4;
  --oh-blush-soft: #f0c4b0;
  --oh-mute:       rgba(246, 239, 226, 0.55);
  --oh-rule:       rgba(246, 239, 226, 0.18);
}

/* Scoped font stacks — DO NOT change global body font. */
.audition-cta-card,
.audition-band,
.audition-ticker {
  font-family: 'Outfit', "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* Square corners everywhere on these surfaces. */
.audition-cta-card,
.audition-cta-card *,
.audition-band,
.audition-band *,
.audition-ticker,
.audition-ticker * {
  border-radius: 0 !important;
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes oh-auditionPulse {
  0%, 100% {
    box-shadow:
      0 0 25px rgba(217,119,87,.5),
      0 0 60px rgba(217,119,87,.25),
      0 0 100px rgba(217,119,87,.1),
      inset 0 0 30px rgba(217,119,87,.08);
  }
  50% {
    box-shadow:
      0 0 35px rgba(217,119,87,.65),
      0 0 80px rgba(217,119,87,.35),
      0 0 130px rgba(217,119,87,.18),
      inset 0 0 40px rgba(217,119,87,.12);
  }
}

@keyframes oh-shimmer {
  0%   { transform: translateX(-120%); opacity: 0; }
  20%  { opacity: .6; }
  60%  { opacity: .6; }
  100% { transform: translateX(120%); opacity: 0; }
}

@keyframes oh-dotPulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(0.6); opacity: .6; }
}

@keyframes oh-edgeGlow {
  0%, 100% { opacity: .3; }
  50%      { opacity: 1; }
}

@keyframes oh-btnGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(217,119,87,0), 0 0 18px rgba(217,119,87,.45); }
  50%      { box-shadow: 0 0 0 rgba(217,119,87,0), 0 0 28px rgba(217,119,87,.7); }
}

/* ============================================================
   DIRECTION 1 — Editorial Hybrid homepage hero
   Tighter split (photo | brand text | big DWD logo).
   The audition CTA is now its OWN sibling section below .hero
   so it doesn't compete with the headline + animated logo.
   ============================================================ */

#page-home .hero {
  grid-template-columns: 7fr 10fr 7fr;
  min-height: 0;
  max-height: none;
  padding: 0 !important;
}
#page-home .hero-logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  min-height: 0;
  background: var(--rb-bg-base) !important;
}
#page-home .hero-photo {
  background: var(--rb-bg-base);
}
#page-home .hero-logo-mark video,
#page-home .hero-logo-mark img {
  display: block;
  width: min(360px, 90%);
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
/* See feedback_transparent_video_ios.md for why mix-blend-mode: lighten. */
#page-home .hero-logo-mark video {
  mix-blend-mode: lighten;
}
@media (max-width: 1100px) {
  #page-home .hero { grid-template-columns: 7fr 13fr; }
  #page-home .hero-logo-mark { display: none; }
}
#page-home .hero-photo {
  min-height: 480px;
  max-height: 620px;
}
#page-home .hero-text {
  padding: 56px 64px 56px 72px;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  gap: 22px;
}
#page-home .hero h1,
#page-home .hero .subtitle,
#page-home .hero-eyebrow,
#page-home .hero-foot { text-align: left; }
#page-home .hero h1 .line { display: block; }
#page-home .hero-foot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
#page-home .hero h1 {
  font-size: clamp(40px, 4.5vw, 72px);
  line-height: 0.94;
  letter-spacing: -0.018em;
}
#page-home .hero .subtitle {
  font-size: clamp(15px, 1.05vw, 18px);
  max-width: 480px;
}
#page-home .hero-foot { margin-top: 12px; }
#page-home .hero::before,
#page-home .hero::after { display: none; }

@media (max-width: 1024px) {
  #page-home .hero { grid-template-columns: 1fr; }
  #page-home .hero-photo {
    min-height: 320px; max-height: 420px; order: 1;
  }
  #page-home .hero-photo img { object-position: 55% 35%; }
  #page-home .hero-text { order: 2; padding: 40px 32px 40px; gap: 18px; align-items: center; text-align: center; }
  #page-home .hero-text::before { display: none; }
  #page-home .hero h1 { font-size: clamp(44px, 10vw, 72px); }
  #page-home .hero .subtitle { max-width: 100%; }
  #page-home .hero-foot { width: 100%; justify-content: space-between; }
}

/* ============================================================
   AUDITION CTA — sibling-of-hero, single dominant call-to-action
   Glowing, pulsing, shimmering — the loudest element on the page.
   ============================================================ */
.audition-cta {
  background: var(--oh-green-deep);
  padding: 36px 56px 28px;
  border-top: 1px solid var(--oh-rule);
}
.audition-cta-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 28px;
  border: 2px solid var(--oh-coral);
  background:
    linear-gradient(135deg, rgba(217,119,87,.14), rgba(217,119,87,.06), rgba(217,119,87,.14));
  color: var(--oh-cream);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  animation: oh-auditionPulse 2.5s ease-in-out infinite;
}
.audition-cta-card:focus-visible { outline: 2px solid var(--oh-coral); outline-offset: 3px; }

.ac-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  position: relative;
  z-index: 2;
}
.ac-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--oh-coral);
  text-transform: uppercase;
}
.ac-headline {
  font-family: "Cormorant Garamond", "Cormorant", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.05;
  color: var(--oh-cream);
  text-shadow: 0 1px 14px rgba(217,119,87,.35);
  letter-spacing: .005em;
}
.ac-meta {
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--oh-cream);
  opacity: .92;
}


.ac-cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 16px 28px;
  background: var(--oh-coral);
  color: var(--oh-cream);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  animation: oh-btnGlow 2s ease-in-out infinite;
  transition: background .2s ease;
}
.ac-cta em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0;
}
.audition-cta-card:hover .ac-cta { background: var(--oh-coral-ink); }


@media (max-width: 980px) {
  .audition-cta { padding: 28px 32px 22px; }
  .audition-cta-card { flex-direction: column; align-items: stretch; gap: 16px; padding: 22px 22px; }


  .ac-cta { justify-content: center; }
}
@media (max-width: 520px) {
  .audition-cta { padding: 22px 22px 18px; }
  .ac-headline { font-size: 24px; }

}


/* ============================================================
   TRIPTYCH — two equal-weight event cards (audition + a-muse)
   ============================================================ */

.triptych {
  background: var(--oh-green-deep);
  padding: 48px 56px 56px;
  border-top: 1px solid var(--oh-rule);
  border-bottom: 1px solid var(--oh-rule);
}


/* --- Responsive --- */
@media (max-width: 980px) {
  .triptych { padding: 40px 32px 48px; }




}
@media (max-width: 520px) {
  .triptych { padding: 32px 22px 40px; }



}


/* ============================================================
   BIG AUDITION COUNTDOWN — #audition-clock
   Live ticker band between hero and the audition CTA card.
   Deep-green band, coral numerals (Anton), cream labels.
   ============================================================ */
.audition-clock {
  font-family: 'Outfit', "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 48px 24px 52px;
  margin: 0;
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(217,119,87,.14), transparent 60%),
    var(--oh-green-ink);
  color: var(--oh-cream);
  text-align: center;
  border-radius: 0 !important;
}
.audition-clock * { border-radius: 0 !important; }


.aclk-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 4vw, 56px);
  align-items: start;
  width: 100%;
  max-width: 760px;
}

.aclk-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
}
/* Colon-style separators between units */
.aclk-unit + .aclk-unit::before {
  content: ":";
  position: absolute;
  left: calc(-1 * (clamp(14px, 4vw, 56px) / 2));
  top: 0;
  transform: translateX(-50%);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: clamp(40px, 8vw, 88px);
  line-height: 1;
  color: rgba(244, 216, 196, 0.3);
}

.aclk-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: clamp(52px, 12vw, 110px);
  line-height: .9;
  color: var(--oh-coral);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.aclk-lbl {
  font-size: clamp(10px, 1.2vw, 13px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--oh-mute);
}

.aclk-now {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: clamp(40px, 8vw, 88px);
  line-height: 1;
  color: var(--oh-coral);
  text-transform: uppercase;
  letter-spacing: .04em;
}


@media (max-width: 600px) {
  .audition-clock { padding: 36px 16px 40px; gap: 14px; }
  /* Keep 4-up but tighten the separators so they don't collide. */
  .aclk-grid { gap: clamp(10px, 6vw, 24px); }
  .aclk-unit + .aclk-unit::before { display: none; }
}

/* ============================================================
   VICTORY LAP — "That's a wrap." (#audition-wrap)
   Successor to #audition-clock. Reveals at Jun 6, 1pm ET (the same instant
   the countdown + audition surfaces hide, via the global data-reveal-after
   handler in campaign.js) and auto-retires at the Jun 10 boundary (.--retired class
   added by the audition IIFE; !important survives the polling reveal handler
   that resets inline display — same trick as .audition-ticker--dismissed).
   Pure-CSS curtain-part reveal; the animated DWD logo (Tamara Mark baked in)
   blooms at center. Honors prefers-reduced-motion.
   ============================================================ */
.audition-wrap {
  position: relative;
  overflow: hidden;
  font-family: 'Outfit', "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 56px 24px 60px;
  margin: 0;
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(217,119,87,.16), transparent 60%),
    var(--oh-green-ink);
  color: var(--oh-cream);
  text-align: center;
  border-radius: 0 !important;
}
.audition-wrap * { border-radius: 0 !important; }


@keyframes awrap-partL {
  0%, 12% { transform: translateX(0); }
  100%    { transform: translateX(-101%); }
}
@keyframes awrap-partR {
  0%, 12% { transform: translateX(0); }
  100%    { transform: translateX(101%); }
}
@keyframes awrap-bloom {
  0%   { opacity: 0; transform: scale(.86); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes awrap-rise {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .audition-wrap { padding: 44px 18px 48px; gap: 13px; }

}


/* ============================================================
   SEASON ONE CTA — #season-one-cta (Jul 11 → Aug 10, with
   countdown) and #season-underway-cta (Aug 10 on, no countdown).
   Reuses the .audition-cta / .ac-* shell for visual consistency
   with the retired audition + intensive hero cards, but the card
   itself is a plain div (not an <a>) because it carries two calls
   to action — a link and an email form — plus an optional clock.
   ============================================================ */
.season-cta-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
  cursor: default;
}
.season-cta-card .ac-stack {
  align-items: center;
  text-align: center;
  flex: none;
  width: 100%;
}
.season-cta-clock {
  max-width: 460px;
  margin: 0;
}
.season-cta-actions {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 620px) {
  .season-cta-actions { flex-direction: column; align-items: stretch; width: 100%; }

}


/* ═══════════════════════════════════════════════════════════════════════
 * POSTER-PAGES
 * Poster treatment for ProSeries, Teachers, Gallery, Merch.
 * (was css/poster-pages.css)
 * ═══════════════════════════════════════════════════════════════════════ */

/* ============================================================
   poster-pages.css
   IG-ad poster aesthetic applied to:
     #page-proseries · .amuse-feature · #page-shop
   Tokens reused from audition.css (--oh-* names preserved).
   Square corners everywhere, Anton block headlines, color blocking.
   ============================================================ */

/* All H1/H2/H3/H4 on the three poster pages start from a clean slate.
   Anton is the workhorse for big block lines. Cormorant italic for accents.
   Outfit for body copy. (Manrope was retired sitewide 2026-09-02, item 3.2.) */
#page-proseries,
.amuse-feature,
#page-shop {
  background: var(--oh-green-deep);
  color: var(--oh-cream);
  font-family: 'Outfit', "Outfit", "Helvetica Neue", Arial, sans-serif;
}

#page-proseries *,
.amuse-feature *,
#page-shop * {
  border-radius: 0 !important;
}


/* ============================================================
   PAGE: #page-proseries
   ============================================================ */

#page-proseries { padding: 0; }
#page-proseries > * { max-width: none; }

/* PS HERO — Family Pink band, forest ink (loud dwdPS volume) */
#page-proseries .ps-hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  background: var(--pink) !important;
  padding: 0 !important;
  min-height: 540px;
  text-align: left;
  color: var(--forest) !important;
}
#page-proseries .ps-hero::before,
#page-proseries .ps-hero::after { display: none; }
#page-proseries .ps-hero .hero-logo-section { display: none; }
#page-proseries .ps-hero .label {
  font-family: 'Outfit', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--forest) !important;
  opacity: .85;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  display: inline-block;
}
#page-proseries .ps-hero h1 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(88px, 12vw, 184px) !important;
  line-height: 0.84 !important;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--forest) !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  text-shadow: none;
}
#page-proseries .ps-hero h1 em,
#page-proseries .ps-hero h1 .ps-block {
  font-style: normal;
  display: inline-block;
  background: var(--forest);
  color: var(--pink);
  padding: 0 14px 4px;
  margin-top: -2px;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
}
#page-proseries .ps-hero .sub {
  font-family: "Cormorant Garamond", serif !important;
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 24px) !important;
  font-weight: 500 !important;
  color: var(--forest) !important;
  opacity: .92;
  max-width: 560px;
  margin: 22px 0 12px !important;
}
#page-proseries .ps-hero .tagline {
  font-family: 'Outfit', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--forest) !important;
  opacity: .82;
  margin: 0 !important;
  display: inline-block;
}
#page-proseries .ps-hero .btn {
  margin-top: 30px !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none !important;
  background: var(--forest) !important;
  color: var(--ivory) !important;
  border: 0 !important;
}
#page-proseries .ps-hero .btn:hover { background: #000 !important; }
#page-proseries .ps-hero .btn .btn-arrow {
  display: inline-block;
  margin-left: 4px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0;
  transition: transform .2s ease;
}
#page-proseries .ps-hero .btn:hover .btn-arrow { transform: translateX(4px); }

.ps-hero-text {
  padding: 56px 56px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Big circular animated logo treatment — used by ProSeries / Collective / Teachers / Gallery heroes.
   Aliased via .hero-logo-big (the new shared class) and the legacy .ps-hero-logo. */
.ps-hero-logo,
.hero-logo-big {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
  padding: 0;
  position: relative;
}
.ps-hero-logo video,
.ps-hero-logo img,
.hero-logo-big video,
.hero-logo-big img {
  display: block;
  width: min(620px, 100%);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  filter: drop-shadow(0 12px 36px rgba(0, 0, 0, 0.32));
}
@media (max-width: 1024px) {
  .ps-hero-logo,
  .hero-logo-big { min-height: 320px; padding: 16px; }
  .ps-hero-logo video,
  .ps-hero-logo img,
  .hero-logo-big video,
  .hero-logo-big img { width: min(420px, 80%); }
}

/* ============================================================
   Split heroes: Collective / Teachers / Gallery
   ============================================================ */
#page-adult-company .ac-hero--split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  padding: 0 !important;
  text-align: left;
  align-items: center;
  min-height: 540px;
}
#page-adult-company .ac-hero--split .ac-hero-text-stack {
  padding: 48px 56px;
}

#page-teachers .tch-hero--split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  align-items: center;
}
#page-teachers .tch-hero--split .tch-hero-text {
  padding: 44px 64px 36px !important;
}
#page-teachers .tch-hero--split .hero-logo-big {
  background: transparent;
}


/* ============================================================
   Instagram "Follow Along" card on Gallery
   Static, on-brand follow card (replaced the SnapWidget live feeds,
   which ad blockers / privacy browsers routinely killed).
   ============================================================ */
.ig-follow {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 48px 40px 40px;
  background: var(--oh-green-deep);
}
.ig-follow .igf-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--oh-coral);
}
.ig-follow .igf-headline {
  font-family: "Cormorant Garamond", "Cormorant", Georgia, serif;
  font-style: italic;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.1;
  color: var(--oh-cream);
}
.igf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  max-width: 720px;
  margin-top: 10px;
}
.igf-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 24px 26px;
  background: var(--oh-green-ink);
  border: 1px solid var(--oh-rule);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.igf-tile:hover {
  border-color: var(--oh-coral);
  background: #0b241b;
  transform: translateY(-2px);
}
.igf-handle {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--oh-cream);
}
.igf-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oh-mute);
}
.igf-arrow {
  position: absolute;
  top: 22px;
  right: 24px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 26px;
  line-height: 1;
  color: var(--oh-coral);
  transition: transform .2s ease;
}
.igf-tile:hover .igf-arrow { transform: translateX(4px); }

@media (max-width: 600px) {
  .ig-follow { padding: 36px 20px 32px; }
  .igf-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================================
   Contact + Early Access — light poster touch
   (Anton headlines + coral accent stripe + tracked-caps eyebrow)
   ============================================================ */

#page-contact { position: relative; }
#page-contact::before {
  content: "";
  display: block;
  height: 6px;
  background: var(--oh-coral-deep);
}
#page-contact .contact-form-side h1 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(48px, 5.5vw, 88px) !important;
  line-height: 0.96 !important;
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0 0 12px !important;
  color: var(--oh-cream-warm) !important;
}
#page-contact .contact-form-side::before {
  content: "Reach out";
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--oh-coral);
  margin-bottom: 14px;
}
#page-contact .contact-info-side h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 2.6vw, 38px) !important;
  text-transform: uppercase;
  letter-spacing: .005em;
  color: var(--oh-cream-warm) !important;
  margin: 0 0 18px !important;
}
#page-contact .contact-detail .dlabel {
  color: var(--oh-coral) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .22em;
  text-transform: uppercase;
}
#page-contact .btn-primary {
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .22em;
  text-transform: uppercase;
}

#page-early-access { position: relative; }
#page-early-access::before {
  content: "";
  display: block;
  height: 6px;
  background: var(--pink);
}


#page-early-access .btn-blush {
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .22em;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  #page-adult-company .ac-hero--split,
  #page-teachers .tch-hero--split,
  .gallery-hero.gallery-hero--split {
    grid-template-columns: 1fr;
    min-height: 0;
    max-height: none;
  }
  #page-adult-company .ac-hero--split .ac-hero-text-stack,
  #page-teachers .tch-hero--split .tch-hero-text,
  .gallery-hero.gallery-hero--split .gallery-hero-text {
    padding: 24px 24px 32px !important;
    text-align: center;
  }
  #page-adult-company .ac-hero--split .hero-logo-big,
  #page-teachers .tch-hero--split .hero-logo-big,
  .gallery-hero.gallery-hero--split .hero-logo-big {
    order: -1;
    padding: 28px 24px 8px !important;
    min-height: 160px;
  }
  #page-adult-company .ac-hero--split .hero-logo-big video,
  #page-adult-company .ac-hero--split .hero-logo-big img,
  #page-teachers .tch-hero--split .hero-logo-big video,
  #page-teachers .tch-hero--split .hero-logo-big img,
  .gallery-hero.gallery-hero--split .hero-logo-big video,
  .gallery-hero.gallery-hero--split .hero-logo-big img {
    width: 160px !important;
    height: 160px !important;
    max-width: 50vw;
    object-fit: contain;
  }
}


/* The Program · Why ProSeries — full-bleed bands replacing .content-section */
#page-proseries .content-section {
  max-width: none;
  margin: 0 !important;
  padding: 64px 64px !important;
  background: var(--ivory) !important;
  color: var(--forest) !important;
  text-align: left;
  width: 100% !important;
}
#page-proseries .content-section.alt {
  background: var(--forest) !important;
  color: var(--ivory) !important;
}
#page-proseries .content-section.alt h2 { color: var(--pink) !important; }
#page-proseries .content-section .chapter {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Outfit', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  margin-bottom: 16px !important;
  color: var(--terra-dark) !important; /* small accent on the light (ivory) ground */
  opacity: .9;
}
#page-proseries .content-section.alt .chapter { color: var(--pink) !important; } /* small accent on the dark (forest) ground */
#page-proseries .content-section .chapter::before,
#page-proseries .content-section .chapter::after { display: none; }
#page-proseries .content-section .chapter .no {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  letter-spacing: .02em;
  color: inherit !important;
}
#page-proseries .content-section .chapter .lbl { color: inherit !important; }
#page-proseries .content-section h2 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(48px, 6vw, 96px) !important;
  line-height: 0.92 !important;
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0 0 24px !important;
  /* Ground ink on ivory. Family Pink on ivory measures 2.23:1 and fails even
     the 3:1 large-text bar; forest is 15.56:1. Same call already made for the
     Elite track heading (seafoam on ivory failed 3:1). Pink stays on .alt,
     where it sits on forest at 6.99:1 and passes. */
  color: var(--forest);
}
#page-proseries .content-section.alt h2 { color: var(--pink) !important; }
#page-proseries .content-section p,
#page-proseries .content-section .section-lead {
  font-family: 'Outfit', sans-serif !important;
  font-size: clamp(15px, 1.05vw, 17px) !important;
  line-height: 1.65 !important;
  max-width: 70ch;
  margin: 0 0 14px !important;
  color: inherit;
}
#page-proseries .content-section.alt p { color: var(--ivory); }

/* Why ProSeries — 4-item grid as alternating coral / blush / forest / cream blocks */
#page-proseries .why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-top: 32px !important;
  background: var(--forest);
  border: 1px solid var(--oh-rule);
}
#page-proseries .why-item {
  padding: 36px 32px !important;
  background: var(--forest);
  color: var(--ivory) !important;
  border: 0 !important;
  margin: 0 !important;
}
/* Family-thread terracotta panel (display-size fill, not text-on-ground) stays part of the checker */
#page-proseries .why-item:nth-child(1) { background: var(--terra); color: var(--ivory); }
#page-proseries .why-item:nth-child(1) h4,
#page-proseries .why-item:nth-child(1) p { color: var(--ivory) !important; }
#page-proseries .why-item:nth-child(2) { background: var(--ivory); color: var(--forest); }
#page-proseries .why-item:nth-child(2) h4,
#page-proseries .why-item:nth-child(2) p { color: var(--forest) !important; }
/* Retired blush panel -> Family Pink fill (forest text on pink fill is contrast-safe) */
#page-proseries .why-item:nth-child(3) { background: var(--pink); color: var(--forest); }
#page-proseries .why-item:nth-child(3) h4,
#page-proseries .why-item:nth-child(3) p { color: var(--forest) !important; }
#page-proseries .why-item:nth-child(4) { background: var(--forest); color: var(--ivory); }
#page-proseries .why-item:nth-child(4) h4,
#page-proseries .why-item:nth-child(4) p { color: var(--ivory) !important; }
#page-proseries .why-item h4 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(26px, 2.4vw, 38px) !important;
  line-height: 0.96 !important;
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0 0 14px !important;
  color: inherit !important;
}
#page-proseries .why-item p {
  font-family: 'Outfit', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: inherit !important;
  opacity: .92;
  margin: 0 !important;
}
#page-proseries .why-item em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
}

/* The Three Tracks — full poster panels */
#page-proseries .track-detail-section {
  max-width: none;
  padding: 0 !important;
  background: var(--forest);
}
#page-proseries .td-intro {
  padding: 64px 64px 40px;
  background: var(--forest);
  color: var(--ivory);
  text-align: left;
}
#page-proseries .td-intro h2 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(56px, 7vw, 112px) !important;
  line-height: 0.9 !important;
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0 0 20px !important;
  color: var(--pink) !important;
}
#page-proseries .td-intro p {
  font-family: 'Outfit', sans-serif !important;
  font-size: 15px !important;
  max-width: 60ch;
  color: var(--ivory);
  opacity: .85;
}

/* Track tabs row — click to swap which detail panel shows */
#page-proseries .track-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--oh-rule);
  margin: 0;
  padding: 0;
}
#page-proseries .track-tab {
  text-align: left;
  padding: 22px 28px;
  background: var(--forest);
  color: var(--ivory);
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: 'Outfit', sans-serif;
  position: relative;
  transition: background .22s ease, color .22s ease;
}
#page-proseries .track-tab .tt-num {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: .55;
}
#page-proseries .track-tab .tt-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: .005em;
  text-transform: uppercase;
  line-height: .95;
}
#page-proseries .track-tab .tt-meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .72;
  margin-top: 6px;
}
/* Active tab stays on the same neutral (forest) ground as the tabs bar — track
   identity is badge-bounded: it lives in the label color + underline accent,
   never as a full-tab fill (REBRAND §3 badge rule). */
#page-proseries .track-tab[aria-selected="true"] { background: var(--forest-mid); color: var(--ivory); }
#page-proseries .track-tab[data-track-tab="prep"][aria-selected="true"]   { box-shadow: inset 0 -4px 0 0 var(--pink-soft); }
#page-proseries .track-tab[data-track-tab="elite"][aria-selected="true"]  { box-shadow: inset 0 -4px 0 0 var(--seafoam); }
#page-proseries .track-tab[data-track-tab="pro"][aria-selected="true"]    { box-shadow: inset 0 -4px 0 0 var(--terra); }
#page-proseries .track-tab[data-track-tab="prep"][aria-selected="true"] .tt-name   { color: var(--pink-soft); }
#page-proseries .track-tab[data-track-tab="elite"][aria-selected="true"] .tt-name  { color: var(--seafoam); }
#page-proseries .track-tab[data-track-tab="pro"][aria-selected="true"] .tt-name    { color: var(--terra); }
#page-proseries .track-tab[aria-selected="true"] .tt-num,
#page-proseries .track-tab[aria-selected="true"] .tt-meta { opacity: .9; }

/* Hover hints */
#page-proseries .track-tab:not([aria-selected="true"]):hover { background: var(--forest-light); }
#page-proseries .track-tab:focus-visible { outline: 2px solid var(--pink); outline-offset: -2px; }

/* Hide non-active panels */
#page-proseries .track-detail[data-active="false"] { display: none; }

#page-proseries .track-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

#page-proseries .track-detail {
  position: relative;
  padding: 32px 56px !important;
  border: 0 !important;
  display: grid;
  /* Wide screens: head/desc in col 1, then Schedule | Training | Pricing as cols 2-4 */
  grid-template-columns: 1.05fr 1.4fr 1fr 1fr;
  grid-template-areas:
    "head schedule training pricing"
    "desc schedule training allin";
  gap: 28px 32px;
  align-items: start;
}
#page-proseries .track-detail .td-header        { grid-area: head; }
#page-proseries .track-detail .td-description   { grid-area: desc; }
#page-proseries .track-detail > .td-section:nth-of-type(1) { grid-area: schedule; }
#page-proseries .track-detail > .td-section:nth-of-type(2) { grid-area: training; }
#page-proseries .track-detail > .td-section:nth-of-type(3) { grid-area: pricing;  }
#page-proseries .track-detail .td-allin         { grid-area: allin; align-self: end; }

@media (max-width: 1180px) {
  #page-proseries .track-detail {
    grid-template-columns: 1fr 2.4fr;
    grid-template-areas:
      "head desc"
      "head schedule"
      "head training"
      "head pricing"
      "head allin";
  }
}
@media (max-width: 720px) {
  #page-proseries .track-detail {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "desc"
      "schedule"
      "training"
      "pricing"
      "allin";
  }
}
/* Track panels — consistent neutral ground per REBRAND badge rule: track color
   is never a full-surface fill. Prep/Pro keep the dark (forest) ground they had
   (coral-deep / green-ink were both dark); Elite keeps the light ground it had
   (blush was light) but on ivory instead of the retired blush. Each track's
   identity now lives in the top border + panel heading + price figure below. */
#page-proseries .track-detail[data-track="prep"]  { background: var(--forest) !important; color: var(--ivory) !important; border-top: 4px solid var(--pink-soft) !important; }
#page-proseries .track-detail[data-track="elite"] { background: var(--ivory) !important;  color: var(--forest) !important; border-top: 4px solid var(--seafoam) !important; }
#page-proseries .track-detail[data-track="pro"]   { background: var(--forest) !important; color: var(--ivory) !important; border-top: 4px solid var(--terra) !important; }

/* Force per-track text color on all descendants */
#page-proseries .track-detail[data-track="prep"] *,
#page-proseries .track-detail[data-track="pro"] * { color: var(--ivory) !important; }
#page-proseries .track-detail[data-track="elite"] * { color: var(--forest) !important; }

/* Panel heading + price figure carry the track accent where contrast allows.
   Prep (pink-soft) and Pro (terra) sit on the forest ground — both legal per
   the hard contrast rules. Elite sits on ivory: seafoam text fails AA there
   (~2.3:1), so Elite's heading/price stay forest (ground ink) and the track
   identity rides the top border + active tab label instead — see report. */
#page-proseries .track-detail[data-track="prep"] .td-name,
#page-proseries .track-detail[data-track="prep"] .td-price-amount { color: var(--pink-soft) !important; }
#page-proseries .track-detail[data-track="pro"] .td-name,
#page-proseries .track-detail[data-track="pro"] .td-price-amount { color: var(--terra) !important; }

/* Special-case the all-in box content (different bg so different color) */
#page-proseries .track-detail[data-track="prep"] .td-allin-label,
#page-proseries .track-detail[data-track="prep"] .td-allin-amount,
#page-proseries .track-detail[data-track="prep"] .td-allin-amount span,
#page-proseries .track-detail[data-track="pro"]  .td-allin-label,
#page-proseries .track-detail[data-track="pro"]  .td-allin-amount,
#page-proseries .track-detail[data-track="pro"]  .td-allin-amount span,
#page-proseries .track-detail[data-track="elite"] .td-allin-label,
#page-proseries .track-detail[data-track="elite"] .td-allin-amount,
#page-proseries .track-detail[data-track="elite"] .td-allin-amount span { color: inherit !important; }

#page-proseries .td-header {
  position: relative;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
#page-proseries .td-eyebrow {
  font-family: 'Outfit', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: inherit !important;
  opacity: .8;
  margin-bottom: 12px !important;
}
#page-proseries .td-name-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px 24px;
}
#page-proseries .td-name {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  /* styles.css sets .td-name italic. Cormorant italic is only loaded at 400/500
     (see the Google Fonts request in index.html), so an italic 700 gets
     SYNTHESISED as a fake oblique — visibly skewed and slightly cheap at 100px.
     Upright is also the right call for track names: PREP / ELITE / PRO are tiers
     you earn, not asides. Note document.fonts.check('italic 700 ...') returns
     TRUE here even though the face does not exist — it reports what the family
     can render, synthesis included, so it cannot be used to detect this. */
  font-style: normal;
  font-size: clamp(56px, 6.4vw, 104px) !important;
  line-height: 0.86 !important;
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0 !important;
  color: inherit !important;
}
#page-proseries .td-price {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 0;
}
/* Large numerals go to Bebas Neue — that is Bebas's one canon job (2026-08-16
   display-type pass). font-style is forced normal because these inherit italic
   from an ancestor, and NEITHER Anton nor Bebas ships an italic: the browser was
   synthesising a fake oblique on the price, which is why the amounts looked
   slanted and slightly cheap. Pre-existing, not introduced by the font swap. */
#page-proseries .td-price-amount {
  font-family: "Bebas Neue", sans-serif !important;
  font-style: normal;
  font-size: clamp(36px, 4vw, 56px) !important;
  font-weight: 400 !important;
  letter-spacing: .005em;
  line-height: 1;
  color: inherit !important;
}
#page-proseries .td-price-unit {
  font-family: 'Outfit', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .8;
}
#page-proseries .td-meta {
  font-family: 'Outfit', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
  margin-top: 16px !important;
}
#page-proseries .td-description {
  font-family: "Cormorant Garamond", serif !important;
  font-style: italic;
  font-size: 17px !important;
  line-height: 1.4 !important;
  max-width: 38ch;
  margin: 12px 0 0 !important;
  color: inherit !important;
  opacity: .92;
}

#page-proseries .td-section {
  margin: 0 !important;
  padding: 10px 0 0 !important;
  border-top: 1px solid currentColor !important;
}
#page-proseries .td-section h4 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  margin: 0 0 8px !important;
  opacity: .65;
  color: inherit !important;
}

/* Track details — schedule blocks */
#page-proseries .td-day-block {
  margin: 0 0 10px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
#page-proseries .td-day-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 2px !important;
}
#page-proseries .td-day-name {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: inherit !important;
}
#page-proseries .td-day-hours {
  font-family: 'Outfit', sans-serif !important;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .65;
}
#page-proseries .td-slots {
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
}
#page-proseries .td-slots li {
  display: flex;
  gap: 10px;
  padding: 1px 0;
  font-family: 'Outfit', sans-serif !important;
  font-size: 12.5px !important;
  line-height: 1.35;
  color: inherit !important;
}
#page-proseries .td-slot-time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  flex: 0 0 74px;
}
#page-proseries .td-tag {
  font-family: 'Outfit', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  padding: 2px 7px;
  margin-left: 8px;
  text-transform: uppercase;
  background: rgba(0,0,0,.18);
  color: inherit;
  vertical-align: middle;
}
/* Elite is the light (ivory) panel now — a dark-tint chip reads better there
   than the old white overlay (that pairing was for the blush ground). Pro
   stays on the default black-tint chip (it's forest like Prep now). */
#page-proseries .track-detail[data-track="elite"] .td-tag { background: rgba(10,31,23,.12); }

#page-proseries .td-genres {
  font-family: 'Outfit', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 12px !important;
  color: inherit !important;
}
#page-proseries .td-included {
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
}
#page-proseries .td-included li {
  font-family: 'Outfit', sans-serif !important;
  font-size: 12.5px !important;
  line-height: 1.45;
  padding: 1px 0;
  color: inherit !important;
}
#page-proseries .td-included li::before {
  content: "—  ";
  opacity: .55;
  margin-right: 4px;
}

#page-proseries .td-fees {
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
}
#page-proseries .td-fees li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 0;
  border-bottom: 1px solid currentColor !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 12.5px !important;
  color: inherit !important;
  opacity: .92;
}
#page-proseries .td-fees li:last-child { border-bottom: 0 !important; }
#page-proseries .td-fees li span:last-child {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

#page-proseries .td-allin {
  margin-top: 10px !important;
  padding: 10px 14px !important;
  background: rgba(0,0,0,.18) !important;
  border: 0 !important;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
/* Elite is the light (ivory) panel now — needs a dark overlay like the others,
   not the old light-on-light overlay (that pairing was for the blush ground). */
#page-proseries .track-detail[data-track="elite"] .td-allin { background: rgba(10,31,23,.10) !important; }
#page-proseries .td-allin-label {
  font-family: 'Outfit', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .78;
}
#page-proseries .td-allin-amount {
  font-family: "Bebas Neue", sans-serif !important;
  font-style: normal;
  /* Bebas Neue ships weight 400 only — anything heavier is faux-bolded. */
  font-weight: 400 !important;
  font-size: 32px !important;
  letter-spacing: .005em;
  color: inherit !important;
}
#page-proseries .td-allin-amount span {
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-left: 4px;
  opacity: .7;
}

/* One-time fees + Deposit notes */
#page-proseries .pricing-onetime,
#page-proseries .pricing-notes {
  padding: 48px 64px !important;
  margin: 0 !important;
  max-width: none;
  border: 0 !important;
}
#page-proseries .pricing-onetime {
  background: var(--ivory) !important;
  color: var(--forest) !important;
}
/* Retired blush band -> Family Pink; heading flips to forest ink since it now
   sits ON the pink field (pink-on-pink would vanish). */
#page-proseries .pricing-notes {
  background: var(--pink) !important;
  color: var(--forest) !important;
}
#page-proseries .pricing-onetime h3,
#page-proseries .pricing-notes h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(40px, 5vw, 64px) !important;
  line-height: 0.94 !important;
  text-transform: uppercase;
  letter-spacing: .005em;
  margin: 0 0 22px !important;
  color: var(--pink);
}
#page-proseries .pricing-notes h3 { color: var(--forest) !important; }
#page-proseries .pricing-onetime-rows {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--forest);
  border-bottom: 1px solid var(--forest);
}
#page-proseries .pricing-onetime .pot-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  gap: 16px 24px;
  align-items: baseline;
  padding: 18px 0 !important;
  border-bottom: 1px solid rgba(10,31,24,.25) !important;
}
#page-proseries .pricing-onetime .pot-row:last-child { border-bottom: 0 !important; }
#page-proseries .pricing-onetime .pot-name {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 24px;
  letter-spacing: .005em;
  text-transform: uppercase;
}
#page-proseries .pricing-onetime .pot-meta {
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .7;
}
#page-proseries .pricing-onetime .pot-amount {
  font-family: "Bebas Neue", sans-serif !important;
  font-style: normal;
  font-size: 36px;
  letter-spacing: .005em;
}
#page-proseries .pricing-notes p {
  font-family: 'Outfit', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin: 0 0 14px !important;
  max-width: 70ch;
  color: var(--forest) !important;
}
#page-proseries .pricing-notes ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}
#page-proseries .pricing-notes li {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  padding: 4px 0;
  color: var(--forest) !important;
}
#page-proseries .pricing-notes li strong {
  color: var(--forest) !important;
}
#page-proseries .pricing-notes li::before {
  content: "—  ";
  opacity: .55;
  margin-right: 4px;
}
#page-proseries .pricing-notes-fine {
  font-size: 12.5px !important;
  opacity: .75;
  font-style: italic;
  color: var(--forest) !important;
}
/* Force readable colors on both Fees (ivory) + Deposits (pink) bands. The
   Deposits h3 flips to forest ink since its ground is pink now, not coral;
   the old coral strong-emphasis in Deposits body copy also drops to forest
   (pink text on a pink ground would vanish). */
#page-proseries .pricing-onetime,
#page-proseries .pricing-onetime *:not(h3),
#page-proseries .pricing-notes,
#page-proseries .pricing-notes *:not(h3) { color: var(--forest) !important; }
/* Ivory ground: forest ink, matching .pricing-notes h3 directly below.
   Family Pink here measured 2.23:1. */
#page-proseries .pricing-onetime h3 { color: var(--forest) !important; }
#page-proseries .pricing-notes h3 { color: var(--forest) !important; }
#page-proseries .pricing-onetime .pot-amount,
#page-proseries .pricing-onetime .pot-name { color: var(--forest) !important; }
#page-proseries .pricing-onetime .pot-meta { color: var(--forest) !important; opacity: .7; }

/* Coming Soon banner */
#page-proseries .coming-soon-banner {
  padding: 56px 64px !important;
  background: var(--ivory) !important;
  color: var(--forest) !important;
  max-width: none;
  border: 0 !important;
}

#page-proseries .coming-soon-banner h2 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(40px, 5vw, 72px) !important;
  line-height: 0.94 !important;
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0 0 16px !important;
  color: var(--pink) !important;
}
#page-proseries .coming-soon-banner p {
  font-family: 'Outfit', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6;
  max-width: 62ch;
}

/* Registration is Open */
/* "Auditions are done" band — the other named full-pink band, forest ink */
#page-proseries #proseries-interest {
  padding: 64px 64px !important;
  background: var(--pink) !important;
  color: var(--forest) !important;
  text-align: left;
  max-width: none;
  margin: 0 !important;
}
#page-proseries #proseries-interest h2 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(56px, 7vw, 112px) !important;
  line-height: 0.9 !important;
  text-transform: uppercase;
  letter-spacing: .005em;
  margin: 0 0 24px !important;
  color: var(--forest) !important;
}
#page-proseries #proseries-interest p {
  font-family: 'Outfit', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6;
  max-width: 64ch;
  color: var(--forest) !important;
}
/* Primary CTA on a pink band must invert to forest/ivory (pink-on-pink would vanish) */
#page-proseries #proseries-interest .btn-blush {
  background: var(--forest) !important;
  color: var(--ivory) !important;
}
#page-proseries #proseries-interest .btn-blush:hover { background: var(--forest-mid) !important; }
#page-proseries #proseries-interest .btn-outline {
  background: transparent !important;
  color: var(--forest) !important;
  border: 1px solid var(--forest) !important;
}
#page-proseries #proseries-interest .btn-outline:hover {
  background: var(--forest) !important;
  color: var(--pink) !important;
}
#page-proseries #proseries-interest .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  margin: 24px 12px 0 0 !important;
}

/* Questions outro */
#page-proseries .cta-banner {
  padding: 48px 64px !important;
  background: var(--forest) !important;
  color: var(--ivory) !important;
  text-align: left;
  max-width: none;
  margin: 0 !important;
  border: 0 !important;
}
#page-proseries .cta-banner h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(32px, 3.6vw, 48px) !important;
  line-height: 0.96 !important;
  text-transform: uppercase;
  letter-spacing: .005em;
  margin: 0 0 12px !important;
  color: var(--pink) !important;
}
#page-proseries .cta-banner p {
  font-family: 'Outfit', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6;
  max-width: 60ch;
  color: var(--ivory) !important;
  opacity: .85;
  margin: 0 0 22px !important;
}
/* CTA on ps: pink bg + forest label (matches .arm-cta ps pattern in arms.css) */
#page-proseries .cta-banner .btn,
#page-proseries .cta-banner .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--pink) !important;
  color: var(--forest) !important;
  border: 0 !important;
}
#page-proseries .cta-banner .btn-primary:hover { background: var(--forest) !important; color: var(--pink) !important; }


.ac-hero-text {
  padding: 56px 56px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}


/* ============================================================
   PAGE: #page-shop (Merch)
   ============================================================ */

#page-shop { padding: 0; }

#page-shop h1 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(72px, 10vw, 168px) !important;
  line-height: 0.86 !important;
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0 !important;
  color: var(--oh-cream-warm) !important;
}
#page-shop h2 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(40px, 5vw, 64px) !important;
  line-height: 0.94 !important;
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0 0 22px !important;
}
#page-shop h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(22px, 2.2vw, 30px) !important;
  letter-spacing: .005em;
  text-transform: uppercase;
}

#page-shop > * { max-width: none; }

/* Merch hero — coral band with poster type */
#page-shop .merch-poll-hero {
  padding: 56px 64px !important;
  background: var(--oh-coral-deep) !important;
  color: var(--oh-cream-warm) !important;
  text-align: left;
  max-width: none;
  margin: 0 !important;
}
#page-shop .merch-poll-hero .hero-logo-section { display: none; }
#page-shop .merch-poll-hero h1 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(64px, 9vw, 144px) !important;
  line-height: 0.86 !important;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--oh-cream-warm) !important;
  margin: 0 !important;
}
#page-shop .merch-poll-hero .sub {
  font-family: "Cormorant Garamond", serif !important;
  font-style: italic;
  font-size: clamp(16px, 1.3vw, 20px) !important;
  font-weight: 500 !important;
  color: var(--oh-cream-warm) !important;
  opacity: .92;
  margin: 20px 0 0 !important;
  max-width: 56ch;
}

/* Merch form wrapper */
#page-shop .merch-poll { padding: 0 !important; margin: 0 !important; max-width: none; }
#page-shop .merch-poll-form { padding: 0 !important; margin: 0 !important; max-width: none; }

/* Category cards — 3 poster panels w/ alternating accents */
#page-shop .merch-categories {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2px;
  background: var(--oh-rule);
  padding: 0 !important;
  margin: 0 !important;
}
#page-shop .merch-category-card {
  position: relative;
  padding: 36px 32px !important;
  background: var(--oh-cream-warm) !important;
  color: var(--oh-green-ink) !important;
  border: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 20px;
  cursor: pointer;
  transition: background .25s ease;
}
#page-shop .merch-category-card:nth-child(2) { background: var(--oh-blush) !important; }
#page-shop .merch-category-card:nth-child(3) { background: var(--oh-green-ink) !important; color: var(--oh-cream-warm) !important; }
#page-shop .merch-category-card:has(input:checked) { outline: 3px solid var(--oh-coral); outline-offset: -3px; }
#page-shop .merch-category-card input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
#page-shop .merch-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 16px;
  background: rgba(0,0,0,.04);
}
#page-shop .merch-category-card:nth-child(3) .merch-mini-grid {
  background: rgba(255,255,255,.06);
}
#page-shop .mini-item {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
#page-shop .mini-item .garment {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}
#page-shop .mini-item .logo {
  position: absolute;
  max-width: 36%;
  max-height: 36%;
  object-fit: contain;
}
#page-shop .merch-cat-info { padding: 0; }
#page-shop .merch-cat-name {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  letter-spacing: .005em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 6px;
  color: inherit !important;
}
#page-shop .merch-cat-items {
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .8;
}
#page-shop .merch-select-dot {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
  background: transparent;
  transition: background .2s ease;
}
#page-shop .merch-category-card:has(input:checked) .merch-select-dot {
  background: var(--oh-coral);
  border-color: var(--oh-coral);
}

/* Cast my vote button */
#page-shop .merch-extras {
  padding: 48px 64px !important;
  background: var(--oh-green-ink) !important;
  text-align: left;
  margin: 0 !important;
}
#page-shop .merch-extras .btn,
#page-shop .merch-extras .btn-blush {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--oh-coral) !important;
  color: var(--oh-cream-warm) !important;
  border: 0 !important;
  cursor: pointer;
}
#page-shop .merch-extras .btn:hover { background: var(--oh-coral-ink) !important; }

/* Vote success state */
#page-shop .merch-vote-success {
  padding: 56px 64px !important;
  background: var(--oh-blush) !important;
  color: var(--oh-green-ink) !important;
  margin: 0 !important;
  border: 0 !important;
}
#page-shop .merch-vote-success h2 { color: var(--oh-coral-deep) !important; }
#page-shop .merch-vote-success p { color: var(--oh-green-ink) !important; opacity: .9; }
#page-shop .merch-vote-success .small { font-size: 13px; }

#page-shop p {
  font-family: 'Outfit', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 980px) {
  #page-shop .merch-categories { grid-template-columns: 1fr; }
  #page-shop .merch-poll-hero { padding: 44px 28px !important; }
  #page-shop .merch-category-card { padding: 32px 28px !important; }
  #page-shop .merch-extras { padding: 36px 28px !important; }
}

/* ============================================================
   PAGE: #page-proseries — "Also on the calendar" poster band
   (Summer Intensive + Competition Season — merged from old Performances)
   ============================================================ */

/* Retired blush band -> Family Pink; heading flips to forest ink (pink-on-pink) */
#page-proseries .ps-whatelse {
  padding: 56px 64px !important;
  background: var(--pink) !important;
  color: var(--forest) !important;
  text-align: left;
  margin: 0 !important;
}
#page-proseries .ps-whatelse h2 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(48px, 6vw, 88px) !important;
  text-align: left;
  line-height: 0.92 !important;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--forest) !important;
  margin: 0 !important;
}


@media (max-width: 980px) {


  #page-proseries .ps-whatelse { padding: 40px 28px !important; }
}

/* ============================================================
   PAGE: #page-teachers — Director + Rotation Faculty
   Full poster aesthetic, square corners, color-blocked bands.
   ============================================================ */

#page-teachers { padding: 0; background: var(--oh-green-deep); color: var(--oh-cream); }
#page-teachers > * { max-width: none; }
#page-teachers * { border-radius: 0 !important; }

/* Hero band */
.tch-hero {
  background: var(--oh-coral-deep);
  color: var(--oh-cream-warm);
  padding: 0;
}
.tch-hero-text {
  padding: 64px 64px 56px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.tch-hero-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--oh-cream-warm);
  opacity: .85;
}
#page-teachers h1.tch-hero, /* in case markup wraps differently */
#page-teachers .tch-hero h1 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(72px, 10vw, 168px) !important;
  line-height: 0.86 !important;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--oh-cream-warm) !important;
  margin: 0 !important;
}
.tch-hero-sub {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: 500;
  color: var(--oh-cream-warm);
  opacity: .92;
  margin: 10px 0 0;
  max-width: 56ch;
}

/* Director band (Dixon) */
.tch-director {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  background: var(--oh-green-ink);
  color: var(--oh-cream);
  min-height: 460px;
}
.tch-director-text {
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.tch-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--oh-coral);
}
.tch-name {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(56px, 7vw, 112px) !important;
  line-height: 0.88 !important;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--oh-cream-warm) !important;
  margin: 0 !important;
}
.tch-name em {
  font-style: italic;
  font-family: "Cormorant Garamond", serif !important;
  font-weight: 500;
  color: var(--pink);
  text-transform: none;
  letter-spacing: .005em;
  display: inline-block;
  padding-left: .15em;
}
.tch-role {
  font-family: "Cormorant Garamond", serif !important;
  font-style: italic;
  font-size: 20px !important;
  color: var(--oh-cream-warm) !important;
  opacity: .9;
  margin: 4px 0 0 !important;
}
.tch-bio {
  font-family: 'Outfit', sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: var(--oh-cream) !important;
  opacity: .82;
  margin: 14px 0 0 !important;
  max-width: 56ch;
}
.tch-director-photo {
  position: relative;
  background: #1a0a14;
  overflow: hidden;
  min-height: 360px;
}
.tch-director-photo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  /* Mixed-photo shuffle — bias up slightly so portrait & landscape both frame faces */
  object-position: 50% 35%;
}
/* Shuffle slides — absolutely-stacked, fade by class swap */
.tch-director-photo .tch-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.tch-director-photo .tch-slide.active { opacity: 1; z-index: 1; }
.tch-director-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.5));
}


/* Rotation faculty band */
.tch-rotation-band {
  background: var(--oh-green-deep);
  padding: 0;
}
.tch-rotation-head {
  padding: 48px 64px 28px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.tch-rotation-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--oh-coral);
}
.tch-rotation-title {
  font-family: "Cormorant Garamond", serif !important;
  font-style: italic;
  font-size: clamp(28px, 3vw, 42px) !important;
  font-weight: 500 !important;
  color: var(--oh-cream-warm) !important;
  margin: 0 !important;
  letter-spacing: .005em;
}


/* Outro */
.tch-outro {
  background: var(--oh-green-ink);
  color: var(--oh-cream-warm);
  padding: 56px 64px;
}
.tch-outro h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(32px, 3.6vw, 56px) !important;
  line-height: 0.96 !important;
  text-transform: uppercase;
  letter-spacing: .005em;
  color: var(--oh-cream-warm) !important;
  margin: 0 0 12px !important;
}
.tch-outro p {
  font-family: 'Outfit', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6;
  color: var(--oh-cream-warm) !important;
  opacity: .85;
  max-width: 60ch;
  margin: 0 0 22px !important;
}
.tch-outro .btn,
.tch-outro .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--oh-coral) !important;
  color: var(--oh-cream-warm) !important;
  border: 0 !important;
}
.tch-outro .btn-primary:hover { background: var(--oh-coral-ink) !important; }

/* Responsive */
@media (max-width: 1024px) {
  .tch-hero-text { padding: 48px 28px 40px; }
  .tch-director { grid-template-columns: 1fr; }
  .tch-director-photo { min-height: 280px; order: 1; }
  .tch-director-text { order: 2; padding: 44px 28px; }
  .tch-rotation-head { padding: 40px 28px 22px; flex-direction: column; align-items: flex-start; gap: 10px; }

  .tch-outro { padding: 44px 28px; }
}


@media (max-width: 1024px) {


  .ac-hero-text { order: 2; padding: 40px 28px; }







}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  #page-proseries .ps-hero { grid-template-columns: 1fr; }

  #page-proseries .ps-hero-text { order: 2; padding: 40px 28px 36px; }

  #page-proseries .content-section { padding: 48px 28px !important; }
  #page-proseries .track-detail { grid-template-columns: 1fr; gap: 28px; padding: 44px 28px !important; }
  #page-proseries .why-grid { grid-template-columns: 1fr; }
  #page-proseries .td-intro,
  #page-proseries .pricing-onetime,
  #page-proseries .pricing-notes,
  #page-proseries .coming-soon-banner,
  #page-proseries #proseries-interest,
  #page-proseries .cta-banner { padding: 44px 28px !important; }




}
@media (max-width: 560px) {
  #page-proseries .td-name-row { flex-direction: column; gap: 8px; }
  #page-proseries .pricing-onetime .pot-row { grid-template-columns: 1fr; gap: 4px; }
  #page-proseries .pricing-onetime .pot-amount { font-size: 28px; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE POLISH PASS (2026-05-13) — see plan
   Targets: ProSeries hero shrink, Merch headline fit, Track tabs
   compact, Collective hero shrink, ProSeries home scrim.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  /* ProSeries hero — collapse to single column, tighten the giant circle */
  #page-proseries .ps-hero {
    grid-template-columns: 1fr;
    min-height: 0 !important;
    padding-top: 16px !important;
  }
  #page-proseries .ps-hero h1 {
    font-size: clamp(64px, 18vw, 96px) !important;
    margin-top: 12px !important;
  }
  .ps-hero-text { padding: 24px 24px 40px !important; order: 2; }
  #page-proseries .ps-hero .hero-logo-big,
  #page-proseries .ps-hero .ps-hero-logo {
    order: 1;
    min-height: 160px !important;
    padding: 16px 24px 4px !important;
  }
  #page-proseries .ps-hero .hero-logo-big video,
  #page-proseries .ps-hero .hero-logo-big img,
  #page-proseries .ps-hero .ps-hero-logo video,
  #page-proseries .ps-hero .ps-hero-logo img {
    width: min(160px, 44vw) !important;
  }

  /* Merch hero — contain DWDPROSERIES on phone widths */
  #page-shop .merch-poll-hero {
    padding: 36px 24px !important;
  }
  #page-shop .merch-poll-hero h1 {
    font-size: clamp(42px, 12vw, 72px) !important;
    line-height: 0.9 !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* ProSeries Track tabs (Prep/Elite/Pro) — keep the PRICE on phones (parents
     compare here); only the ages/hours prefix is dropped, not the whole line. */
  #page-proseries .track-tab .tt-meta { display: block; font-size: 11px; margin-top: 3px; opacity: .9; }
  #page-proseries .track-tab .tt-meta-pre { display: none; }
  #page-proseries .track-tab .tt-price { font-weight: 700; }
  #page-proseries .track-tab {
    padding: 14px 10px !important;
    min-height: 56px;
    gap: 4px;
  }
  #page-proseries .track-tab .tt-num {
    font-size: 9px !important;
    letter-spacing: .2em;
  }
  #page-proseries .track-tab .tt-name {
    font-size: clamp(22px, 6.5vw, 30px) !important;
  }

  /* Collective hero — same shrink treatment so the logo doesn't eat half the fold */
  #page-adult-company .ac-hero--split .hero-logo-big {
    min-height: 200px !important;
    padding: 28px 24px 8px !important;
  }
  #page-adult-company .ac-hero--split .hero-logo-big video,
  #page-adult-company .ac-hero--split .hero-logo-big img {
    width: min(220px, 55vw) !important;
  }
}

/* Home entry cards — extra contrast scrim on mobile so the body text is always
   legible against a busy thumb image at the small mobile thumb size. */
@media (max-width: 720px) {
  #page-home .entry .thumb::after {
    background: linear-gradient(90deg, rgba(12, 31, 23, 0) 0%, rgba(12, 31, 23, 0.55) 100%) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
 * TIGHTEN
 * Density pass: padding, rhythm, the sitewide focus ring.
 * (was css/tighten.css)
 * ═══════════════════════════════════════════════════════════════════════ */

/* ============================================================
   tighten.css
   Sitewide vertical-spacing pass. Loaded LAST so it wins.
   Goal: cut dead space without breaking section rhythm.
   ============================================================ */

/* ─── Heroes ────────────────────────────────────────────────── */
/* The legacy .hero (sub-page heroes like About / Contact / Gallery
   used 6rem top / 10rem bottom). Cut both. */
.hero {
  padding-top: 3.5rem !important;
  padding-bottom: 4rem !important;
}
.hero.home-hero { padding: 5rem 3rem !important; }

/* Decorative coral hairline 3rem off the bottom — pull it tighter */
.hero::after { bottom: 1.25rem !important; }

/* ProSeries / A·Muse / Adult Company / Merch / Gallery heroes
   all use the .ac-hero / .ps-hero / .gallery-hero / .merch-poll-hero
   pattern. They tend to be padded by clamp(80px, ...) — halve them. */
#page-adult-company > .ac-hero,
#amuse .ac-hero,
#page-about .ac-hero,
#page-gallery .ac-hero {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
  min-height: 0 !important;
}
.gallery-hero { padding: 56px 40px !important; }


/* ─── Chapter eyebrow bands ─────────────────────────────────── */
/* The "No.04 · PERFORMANCES — UP NEXT ON STAGE" band was 64+64 padding
   around a single line of small text. Cut hard. */
.content-section {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}
/* Even tighter when it's just a chapter eyebrow with no other content */
.content-section:has(> .chapter:only-child),
.content-section .chapter:only-child {
  /* :has() may not be supported in some legacy browsers — fall through to the
     plain selector below */
}
/* Fallback / always-on: when .content-section contains only a .chapter,
   the section is decorative — kill the bottom padding so it sits flush. */
#amuse > .content-section,
#page-adult-company > .content-section:first-of-type {
  padding-top: 28px !important;
  padding-bottom: 12px !important;
}

/* ─── Cards / panels with their own margin ──────────────────── */
.collective-card {
  margin-top: 12px !important;
  margin-bottom: 16px !important;
}

/* ─── CTA banner ────────────────────────────────────────────── */
.cta-banner {
  padding-top: 32px !important;
  padding-bottom: 36px !important;
  margin-top: 8px !important;
  margin-bottom: 12px !important;
}

/* ─── Coming-up / 2-up grids on Performances were doubly padded ── */
.coming-up,
.coming-up.three-up {
  margin-top: 4px !important;
  margin-bottom: 12px !important;
}

/* ─── ProSeries content sections (poster aesthetic) ─────────── */
#page-proseries .content-section { padding: 44px 64px !important; }
#page-proseries .ps-whatelse { padding: 36px 64px !important; }
#page-proseries .td-intro { padding: 44px 64px 24px !important; }
#page-proseries .pricing-onetime,
#page-proseries .pricing-notes { padding: 36px 64px !important; }
#page-proseries .coming-soon-banner { padding: 40px 64px !important; }
#page-proseries #proseries-interest { padding: 44px 64px !important; }
#page-proseries .cta-banner { padding: 36px 64px !important; }
#page-proseries .track-detail { padding: 40px 64px !important; }

/* ─── Teachers page bands ───────────────────────────────────── */
.tch-hero { padding: 0 !important; }
.tch-hero-text { padding: 44px 64px 36px !important; }
.tch-director { min-height: 380px !important; }
.tch-director-text { padding: 44px 56px !important; }
.tch-rotation-head { padding: 32px 64px 16px !important; }
.tch-outro { padding: 36px 64px !important; }

/* ─── Merch ──────────────────────────────────────────────────── */
#page-shop .merch-poll-hero { padding: 44px 64px !important; }
#page-shop .merch-category-card { padding: 28px 28px !important; }
#page-shop .merch-extras { padding: 32px 64px !important; }
#page-shop .merch-vote-success { padding: 40px 64px !important; }

/* ─── Performances (now A·Muse inside Collective) ──────────── */
#amuse > .cta-banner { padding: 32px 40px !important; margin: 8px 0 16px !important; }


/* ─── Track Record on home ──────────────────────────────────── */
.track-record { padding: 36px 40px !important; }


/* ─── Gallery grid ──────────────────────────────────────────── */
.gallery-grid { margin-top: 16px !important; gap: 12px; }

/* ─── Mobile: even tighter ──────────────────────────────────── */
@media (max-width: 720px) {
  .hero { padding: 2.5rem 1.5rem 3rem !important; }
  #page-adult-company > .ac-hero,
  #amuse .ac-hero,
  #page-about .ac-hero,
  #page-gallery .ac-hero { padding: 40px 24px !important; }
  .content-section { padding: 28px 24px !important; }
  .cta-banner { padding: 24px 24px 28px !important; }
  #page-proseries .content-section,
  #page-proseries .ps-whatelse,
  #page-proseries .td-intro,
  #page-proseries .pricing-onetime,
  #page-proseries .pricing-notes,
  #page-proseries .coming-soon-banner,
  #page-proseries #proseries-interest,
  #page-proseries .cta-banner,
  #page-proseries .track-detail { padding: 32px 24px !important; }
  .tch-hero-text,
  .tch-director-text,
  .tch-rotation-head,
  .tch-outro { padding: 28px 24px !important; }
  #page-shop .merch-poll-hero,
  #page-shop .merch-extras,
  #page-shop .merch-vote-success,
  #page-shop .merch-category-card { padding: 24px 24px !important; }
}

/* ───── Credentials strip (#page-home, below Track Record) ───── */

.creds-strip {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 32px 56px;
  display: grid;
  gap: 14px;
}

.creds-strip-row {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: baseline;
  gap: 18px;
}

.creds-eyebrow {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--terracotta, #C8614B);
  white-space: nowrap;
}

.creds-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(250, 243, 232, 0.82);
}

.creds-list li {
  position: relative;
  padding-right: 16px;
}

.creds-list li:not(:last-child)::after {
  content: '·';
  position: absolute;
  right: 0;
  color: rgba(250, 243, 232, 0.35);
}

@media (max-width: 700px) {
  .creds-strip { padding: 24px 24px 40px; }
  .creds-strip-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .creds-list { font-size: 0.72rem; }
}

/* ═════════════════════════════════════════════════
   Site-wide interactivity layer
   Layers a consistent bouncy hover language on top
   of existing hovers, never overriding hard. The
   curve `--ease-spring` matches the hero pills.
   Everything respects prefers-reduced-motion below.
   ═════════════════════════════════════════════════ */
:root {
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ── REGISTER topnav CTA: pulse like the audition pill ── */
.topnav .nav-cta {
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s var(--ease-spring), box-shadow 0.25s ease;
  animation: nav-cta-pulse 3s ease-in-out infinite;
}
.topnav .nav-cta:hover,
.topnav .nav-cta:focus-visible {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 22px rgba(200, 97, 75, 0.30);
  animation-play-state: paused;
}
.topnav .nav-cta:active { transform: translateY(0) scale(0.97); transition-duration: 0.08s; }
@keyframes nav-cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 97, 75, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(200, 97, 75, 0.15); }
}


/* ── Home entries (ProSeries / Collective): lift + soft glow ── */
#page-home .entries .entry {
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s ease, background 0.35s ease;
}
#page-home .entries .entry:hover {
  transform: translateY(-3px);
  box-shadow: var(--rb-shadow-3);
}


/* ── Generic .btn: bouncier curve + soft shadow + tiny scale ── */
.btn {
  transition: transform 0.25s var(--ease-spring), background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, letter-spacing 0.25s ease;
}
.btn:hover {
  transform: translateY(-2px) scale(1.02);
}
.btn:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.08s;
}

/* ── Top nav links: animated underline ── */
.topnav nav a {
  transition: color 0.22s ease;
  position: relative;
}
.topnav nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1.5px;
  background: var(--rb-terracotta, #c8614b);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s var(--ease-spring);
}
.topnav nav a:hover::after,
.topnav nav a.active::after { transform: scaleX(1); }
.topnav nav a:hover { color: var(--rb-terracotta, #c8614b); }

/* ── Footer links: pink slide ── */
.site-footer a,
.footer-links a {
  transition: color 0.22s ease, transform 0.22s var(--ease-spring);
  display: inline-block;
}
.site-footer a:hover,
.footer-links a:hover {
  color: var(--rb-pink);
  transform: translateX(2px);
}

/* ── Social icons inside the footer (SVG wrappers) ── */
.footer-links a svg {
  transition: transform 0.28s var(--ease-spring);
}
.footer-links a:hover svg {
  transform: scale(1.18) rotate(-4deg);
}

/* ── Form inputs: focused border + lift ── */
input[type="email"],
input[type="text"],
input[type="tel"],
textarea {
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s var(--ease-spring);
}
input[type="email"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(200, 97, 75, 0.18);
}

/* ── Photo grid on home & gallery tiles: subtle zoom ── */
#page-home .photo-grid .ph,
.gallery-grid .gallery-item {
  transition: transform 0.5s var(--ease-spring);
}
#page-home .photo-grid .ph:hover,
.gallery-grid .gallery-item:hover {
  transform: translateY(-2px);
}

/* ── Track-record stat numbers: subtle bobble on hover ── */
.track-record .tr-stat {
  transition: transform 0.32s var(--ease-spring);
}
.track-record .tr-stat:hover {
  transform: translateY(-3px) scale(1.04);
}

/* ── Reduced-motion: kill all bounces, keep color transitions ── */
@media (prefers-reduced-motion: reduce) {
  .topnav .nav-cta,
  .tri-card,
  #page-home .entries .entry,
  .upnext-card,
  .track-detail-card,
  .td-card,
  .tch-card,
  .btn,
  .footer-links a,
  .footer-links a svg,
  #page-home .photo-grid .ph,
  .gallery-grid .gallery-item,
  .track-record .tr-stat {
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    animation: none;
  }
  .topnav .nav-cta:hover,
  .tri-card:hover,
  #page-home .entries .entry:hover,
  .upnext-card:hover,
  .track-detail-card:hover,
  .td-card:hover,
  .tch-card:hover,
  .btn:hover,
  .footer-links a:hover,
  #page-home .photo-grid .ph:hover,
  .gallery-grid .gallery-item:hover,
  .track-record .tr-stat:hover {
    transform: none;
  }
  .footer-links a:hover svg { transform: none; }
}

/* ───── Anchor scroll offset for fixed topnav ─────
   scroll-margin-top so in-page anchor jumps clear the fixed topnav. */
#audition,
#audition-cta,
#amuse,
#proseries-tracks-full,
#proseries-interest {
  scroll-margin-top: 90px;
}
@media (max-width: 900px) {
  #audition,
  #audition-cta,
  #amuse,
  #proseries-tracks-full,
  #proseries-interest {
    scroll-margin-top: 76px;
  }
}

/* ═════════════════════════════════════════════════
   iOS-feel polish pass — glass nav, scroll lock,
   press states, focus rings, themed scrollbar.
   ═════════════════════════════════════════════════ */

/* ── C. Frosted-glass nav ──
   The blur lives on a ::before pseudo-element, NOT on .topnav itself.
   filter/backdrop-filter on an element creates a new containing block for
   position:fixed descendants — and .topnav's own descendant, the mobile
   menu panel (`.topnav nav`, see editorial.css), must stay fixed to the
   *viewport* so it can go full-screen, not fixed to the ~100px-tall header.
   Putting backdrop-filter on .topnav directly was shrinking that panel to a
   sliver. The pseudo sits behind .topnav's real children (brand/nav/toggle)
   via z-index: -1 within .topnav's own stacking context, so it reads
   identically to a filter on .topnav itself. */
.topnav {
  background: transparent !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.topnav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(12, 31, 23, 0.82);
  border-bottom: 1px solid var(--rb-rule);
}
.topnav.scrolled::before {
  background: rgba(12, 31, 23, 0.96);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .topnav::before {
    background: rgba(12, 31, 23, 0.72);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
    border-bottom: 1px solid var(--rb-rule-soft);
  }
  .topnav.scrolled::before {
    background: rgba(12, 31, 23, 0.86);
  }
}

/* ── D. Scroll lock while the mobile menu is open ──
   main.js toggles `menu-open` on <html> on every open/close path
   (toggle click, nav-link click, Escape). */
html.menu-open {
  overflow: hidden;
}

/* Menu toggle button: pressed/open visual state + real tap target */
.topnav-toggle {
  min-height: 44px;
  transition: background var(--rb-dur-fast) ease, border-color var(--rb-dur-fast) ease;
}
.topnav.is-open .topnav-toggle {
  background: rgba(250, 243, 232, 0.1);
  border-color: var(--rb-rule);
}

/* ── E. Global iOS feel ── */
html {
  -webkit-tap-highlight-color: transparent;
}
/* Reserved for the menu panel only — never on body, so pull-to-refresh
   and normal page bounce are untouched. */
.topnav nav {
  overscroll-behavior-y: contain;
}

/* Press states — extend the existing spring-hover pattern with a settle-down
   tap. Fast duration so it reads as a snappy iOS press, not a lingering one. */
.btn:active,
.tri-card:active,
.upnext-card:active,
#page-home .entries .entry:active,
.track-detail-card:active,
.td-card:active,
.track-detail:active,
.tch-card:active,
.topnav .nav-cta:active {
  transform: scale(0.985);
  transition-duration: var(--rb-dur-fast);
}

/* :focus-visible ring — replaces default/blue outlines site-wide */
/* Focus ring is terracotta — the family thread color, and (unlike the old seafoam,
   ~2.35:1 on ivory) it clears the 3:1 UI floor on BOTH forest and ivory grounds. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--rb-terracotta) !important;
  outline-offset: 3px;
}

/* Themed thin scrollbar (desktop) */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(250, 243, 232, 0.25) transparent;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(250, 243, 232, 0.25);
  border-radius: var(--rb-radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(250, 243, 232, 0.4);
}

/* Text selection */
::selection {
  background: var(--rb-terracotta);
  color: var(--rb-ivory);
}


/* .track-detail on the live ProSeries page is poster-pages.css's
   #page-proseries-scoped, !important, solid-color-per-track design
   (coral/blush/green-ink block cards) — intentionally bold, not part of
   the tonal "elevated card" system, and out of scope to restyle here.
   Background/border/radius overrides would just lose to that ID-scoped
   !important anyway; a soft resting/hover shadow is the one thing that
   layers on top cleanly without fighting the poster look. */
.track-detail {
  box-shadow: var(--rb-shadow-1);
  transition: transform var(--rb-dur-med) var(--ease-spring), box-shadow var(--rb-dur-med) ease;
}
.track-detail:hover {
  transform: translateY(-3px);
  box-shadow: var(--rb-shadow-2);
}


.track-record {
  border: 1px solid var(--rb-rule-soft);
  box-shadow: var(--rb-shadow-1);
}

/* ── G. Footer logo tile — soften the flat pink-on-white square ── */
footer.site-footer .footer-brand img {
  background: var(--rb-ivory);
  border: 1px solid var(--rb-rule-soft);
  border-radius: var(--rb-radius-m);
  box-shadow: var(--rb-shadow-1);
}

/* ── Reduced-motion coverage for the new pieces above ──
   additions.css's `*` strip already zeroes every transition/animation
   duration site-wide; this block additionally kills the transform/opacity
   end-states so nothing "settles" into an offset position. */
@media (prefers-reduced-motion: reduce) {
  .topnav nav a {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn:active,
  .tri-card:active,
  .upnext-card:active,
  #page-home .entries .entry:active,
  .track-detail-card:active,
  .td-card:active,
  .track-detail:active,
  .tch-card:active,
  .topnav .nav-cta:active,
  .track-detail:hover {
    transform: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
 * ARMS
 * Arm theming. One house, three volumes: house / ps / c.
 * (was css/arms.css)
 * ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
 * DWD — Arm theming ("one house, three volumes", locked 2026-07-18)
 * Loaded LAST. Scopes accent / CTA colors per brand arm via [data-arm].
 *   house = parent DWD (balanced anchor)  ·  ps = dwdPROSERIES (loud)
 *   c = dwdCOLLECTIVE (hushed)            ·  internal inherits house
 * Volume is more than hue — see REBRAND-ONE-HOUSE-2026-07.md §3.
 * ═══════════════════════════════════════════════════════════════════════ */

/* Default / house: balanced anchor. Terracotta signature, ivory voice. */
[data-arm] {
  --arm-accent: var(--terra);        /* display accent (headlines, chips, rules) */
  --arm-accent-body: var(--terra-light); /* body-safe accent on dark */
  --arm-cta-bg: var(--terra);
  --arm-cta-text: var(--ivory);
  --arm-ring: rgba(200, 97, 75, 0.35);   /* terracotta @ low alpha */
}

/* dwdPROSERIES — LOUD. Family-Pink-forward, full chroma, pink CTAs. */
[data-arm="ps"] {
  --arm-accent: var(--pink);
  --arm-accent-body: var(--pink);
  --arm-cta-bg: var(--pink);
  --arm-cta-text: var(--forest);
  --arm-ring: rgba(255, 122, 162, 0.40);
}

/* dwdCOLLECTIVE — HUSHED. Muted, photography-led, thin terracotta rings,
   ghost CTAs, more air. Accent stays terracotta but appears as line, not fill. */
[data-arm="c"] {
  --arm-accent: var(--terra);
  --arm-accent-body: var(--terra-light);
  --arm-cta-bg: transparent;
  --arm-cta-text: var(--ivory);
  --arm-ring: rgba(200, 97, 75, 0.30);
}

/* internal (campaign/analytics) inherits house defaults — no special styling */

/* dwdCOLLECTIVE is hushed: it carries NO pink except its logo star (an image
   asset, unaffected by this). Remap every pink alias under the arm to
   terracotta — quiet, warm, on-signature. All of these are declared at :root
   (--accent/--blush as `var(--pink)`), so they pre-resolve to pink there and
   inherit that fixed value; each must be redefined here, not just --pink.
   The fixed .topnav lives outside the arm subtree, so its pink CTA is safe. */
[data-arm="c"] {
  --pink: var(--terra);
  --rb-pink: var(--terra);
  --accent: var(--terra);
  --accent-light: var(--terra-light);
  --blush: var(--terra);
  --blush-light: var(--terra-light);
}

/* ── Shared arm-driven components ── */

/* Primary CTA: fill on ps/house, ghost 1px-terracotta on c */
.arm-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: var(--arm-cta-bg);
  color: var(--arm-cta-text);
  border: 1.5px solid var(--arm-cta-bg);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.85em 1.6em;
  border-radius: var(--rb-radius-pill, 999px);
  transition: transform var(--rb-dur-fast, 160ms) var(--rb-ease-out, ease),
              box-shadow var(--rb-dur-fast, 160ms) var(--rb-ease-out, ease);
}
[data-arm="c"] .arm-cta {
  border-color: var(--terra);
  color: var(--ivory);
}
.arm-cta:hover { transform: translateY(-2px); box-shadow: var(--rb-shadow-2); }


/* ══════════════════════════════════════════════════════════════════════
 * HOME entry-door cards — the loud/hushed statement (REBRAND §5)
 * Two cards side by side; the contrast between them IS the brand.
 * These override rebrand.css (loads before arms.css).
 * ════════════════════════════════════════════════════════════════════ */

/* ── ProSeries card: LOUD, Family-Pink-forward ──
   (rebrand.css:361-364 painted the identity seafoam; seafoam is now an Elite
   BADGE accent only, never the dwdPS identity color — palette.md) */
#page-home .entries .entry.proseries .tag,
#page-home .entries .entry.proseries h3 em { color: var(--pink); }

/* Track badges — badge-bounded track accents (Prep / Elite / Pro) */
#page-home .entries .entry .track-badges { display: flex; gap: 8px; flex-wrap: wrap; }
#page-home .entries .entry .trk {
  font-family: 'Outfit', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 11px; border-radius: 999px;
  color: var(--forest);
}
#page-home .entries .entry .trk.prep  { background: var(--pink-soft); }
#page-home .entries .entry .trk.elite { background: var(--seafoam); }
#page-home .entries .entry .trk.pro   { background: var(--terra); color: var(--ivory); }

/* ── Collective card: HUSHED, terracotta line, no pink ──
   dwdC carries no pink except the logo star; quieter, photography-led. */
#page-home .entries .entry.collective h3 em { color: var(--terra-light); }
#page-home .entries .entry.collective .entry-hl { color: var(--terra-light); }
#page-home .entries .entry.collective .f .v em { color: var(--terra-light); }
/* thinner, warmer divider on the hushed card */
#page-home .entries .entry.collective .foot { border-top-color: var(--arm-ring); }

/* ═══════════════════════════════════════════════════════════════════════
 * dwdCOLLECTIVE — hushed CTAs (added 2026-07-21)
 * The arm spec calls for ghost buttons: 1.5px terracotta line, no fill.
 * The page was built on .btn-primary / .btn-blush, which resolve to a
 * FILLED terracotta once the pink aliases are remapped above — loud, and
 * wrong for the hushed volume. Rather than reclass every button, scope the
 * ghost treatment to the arm. .topnav sits outside the arm subtree, so the
 * nav's Express Interest CTA is untouched.
 * ═══════════════════════════════════════════════════════════════════════ */
[data-arm="c"] .btn-primary,
[data-arm="c"] .btn-blush {
  background: transparent;
  background-color: transparent;
  color: var(--ivory);
  border: 1.5px solid var(--terra);
}
[data-arm="c"] .btn-primary:hover,
[data-arm="c"] .btn-blush:hover:not(.btn-disabled) {
  background: rgba(200, 97, 75, 0.14);
  background-color: rgba(200, 97, 75, 0.14);
  color: var(--ivory);
  border-color: var(--terra-light);
  box-shadow: none;
}

/* .btn-outline is already a line button — just warm it to the arm accent
   and stop its hover from flooding to a solid fill. */
[data-arm="c"] .btn-outline {
  color: var(--ivory);
  border: 1.5px solid var(--arm-ring);
}
[data-arm="c"] .btn-outline:hover {
  background: rgba(200, 97, 75, 0.14);
  background-color: rgba(200, 97, 75, 0.14);
  color: var(--ivory);
  border-color: var(--terra);
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════
 * dwdCOLLECTIVE — body-safe accent (added 2026-07-21)
 * Terracotta #C8614B on forest measures 4.30:1, and the small label/eyebrow
 * roles below sit under 18.66px, so they need 4.5:1. The palette already
 * splits this: --terra-light #d4775f is the body-text terracotta on dark
 * and measures 5.39:1. Display-size type keeps full-chroma --terra.
 * Deliberately NOT done by redefining --terra on the arm: that would drag
 * the display hue and the CTA/rule lines off canon too.
 * ═══════════════════════════════════════════════════════════════════════ */
[data-arm="c"] .label,
[data-arm="c"] .tagline,
[data-arm="c"] .gallery-section-label,
[data-arm="c"] .chapter .no,
[data-arm="c"] .chapter .no sup,
[data-arm="c"] .chapter .lbl,
[data-arm="c"] .cc-intro a {
  color: var(--terra-light);
}

/* Inside the elevated cards (#1a3d2e) --terra-light drops to 3.77:1, so the
   card-scoped small text steps up one tint. */
[data-arm="c"] .collective-card h3,
[data-arm="c"] .cc-section h3,
[data-arm="c"] .cc-slot-time,
[data-arm="c"] .cc-meta,
[data-arm="c"] .collective-card a:not(.btn),
[data-arm="c"] .cta-banner a:not(.btn) {
  color: var(--terra-soft);
}

/* Chips carry their own fill, so the accent lands on a third ground and still
   missed 4.5:1. Ivory on the chip is unambiguous and keeps them quiet. */
[data-arm="c"] .payment-chip,
[data-arm="c"] a.payment-chip:not(.btn) { color: var(--ivory); }

/* ═══════════════════════════════════════════════════════════════════════
 * Chapter rail — sticky in-page section nav (added 2026-07-21)
 * Used on #page-proseries and #page-adult-company only. Lives here (not
 * additions.css) because its active/hover accent is arm-scoped like the
 * rest of this file: pink on ps, terracotta on c/house.
 * ═══════════════════════════════════════════════════════════════════════ */
.chapter-rail {
  position: sticky;
  top: 70px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 32px;
  background: rgba(12, 31, 23, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(250, 243, 232, 0.10);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.chapter-rail::-webkit-scrollbar {
  display: none;
}

/* Quiet editorial jump strip: small tracked-caps text links, active gets the
   arm accent + a thin underline. No pills, no borders, no glow. The bar
   centers on desktop; below 900px it left-aligns so overflow stays
   scrollable (centered overflow clips the leftmost links). */
.chapter-rail { justify-content: center; gap: 28px; padding: 0 32px; }

.chapter-rail a {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  color: rgba(250, 243, 232, 0.52);
  padding: 15px 0 13px;
  border-bottom: 2px solid transparent;
  flex: 0 0 auto;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.chapter-rail a:hover { color: var(--ivory); }

.chapter-rail a.active {
  color: var(--terra-light);
  border-bottom-color: var(--terra-light);
}

[data-arm="ps"] .chapter-rail a.active {
  color: var(--pink);
  border-bottom-color: var(--pink);
}

@media (max-width: 900px) {
  .chapter-rail { justify-content: flex-start; }
}

/* Scroll offset so headings land clear of the fixed topnav + sticky rail */
#ps-program,
#ps-why,
#ps-philosophy,
#ps-tracks,
#ps-calendar,
#ps-apply,
#col-about,
#col-who,
#dwdc-next,
#amuse,
#amusing-spaces {
  /* 160 = 70 topnav + ~45 rail + breathing room + 30px absorbed from the
     .reveal entrance (targets sit at translateY(30px) when the scroll
     destination is computed, then shift up as they reveal). */
  scroll-margin-top: 160px;
}

@media (max-width: 768px) {
  .chapter-rail { top: 64px; gap: 20px; padding: 0 16px; }

  #ps-program,
  #ps-why,
  #ps-philosophy,
  #ps-tracks,
  #ps-calendar,
  #ps-apply,
  #col-about,
  #col-who,
  #dwdc-next,
  #amuse,
  #amusing-spaces {
    scroll-margin-top: 148px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
 * SEASON1
 * Season One: the sky accent, the lockups, the state machine styles.
 * (was css/season1.css)
 * ═══════════════════════════════════════════════════════════════════════ */

/* ============================================================
   SEASON ONE: THE SERIES — brand pass, ProSeries page + home
   Scoped under #page-proseries and the home #season-underway-cta
   selectors named in the plan. New tokens live here; house colors
   (forest/pink/terracotta/ivory) are untouched and still come from
   css/styles.css. No gold anywhere in this file.
   ============================================================ */

:root {
  --s1-midnight: #1B2A4A;
  --s1-sky: #7EC4F8;
  --s1-silver: #C9D4CE;
  --s1-gloss: linear-gradient(135deg, #4FA8EE, #9AD5FF, #E4F4FF, #7EC4F8, #5FB2F2);
  --s1-gloss-btn: linear-gradient(135deg, #4FA8EE, #9AD5FF, #7EC4F8);
}

/* ------------------------------------------------------------
   Shared: the SEASON ONE gloss lockup. One shine per frame — this
   class is only ever applied to the announce-band title below.
   ------------------------------------------------------------ */
/* Cinzel is loaded for exactly two elements: this lockup and .s1ht-title on
   the home teaser. Both use weight 800, which is why only 800 is fetched
   (item 3.2b, 2026-09-02). If you reach for Cinzel anywhere else, add the
   weight to the font URL in index.html and re-run scripts/build-routes.mjs. */
#page-proseries .s1-title {
  margin: 0; /* now an <h1> (2026-08-03 hero fold) — kill the UA block margin */
  font-family: 'Cinzel', serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(3.5rem, 9vw, 9rem);
  line-height: 1;
  background: var(--s1-gloss);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ivory, #FAF3E8); /* fallback paint before @supports below wins */
  position: relative;
  display: inline-block;
}

@supports not (background-clip: text) {
  #page-proseries .s1-title {
    -webkit-text-fill-color: initial;
    color: var(--s1-sky);
    background: none;
  }
}

/* The ambient sweep loop (delay 1.9s, after the entrance's rise/fade
   finishes at 1.5s) is combined with the rise/fade into ONE animation
   shorthand declaration further down, on the same selector — two separate
   rules targeting the same selector's `animation` sub-properties don't
   layer, the later one wins per-longhand and silently drops whichever
   longhand it doesn't restate (that dropped the entrance duration/delay
   here on first pass and left the rise/fade looping forever). Keeping
   both animations in one declaration avoids that trap. See the
   ENTRANCE SEQUENCE block below for the actual rule. */

@keyframes s1-sweep {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ------------------------------------------------------------
   PREMIERE ANNOUNCE BAND — #s1-premiere
   ------------------------------------------------------------ */
#page-proseries .s1-premiere {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88svh;
  background: var(--s1-midnight);
  /* Deeper vignette — darker, tighter edges than the flat radial used
     elsewhere in the takeover, so the top of the page reads as a real
     premiere room, not just a dark section. */
  background-image:
    radial-gradient(ellipse at center, rgba(255,255,255,0.07) 0%, rgba(27,42,74,0) 45%, rgba(6,10,20,0.85) 100%),
    radial-gradient(ellipse at center, rgba(27,42,74,0) 55%, #05070d 130%);
  padding: clamp(3rem, 8vw, 6rem) 1.5rem;
  text-align: center;
  overflow: hidden;
}

/* Film-grain texture — a static, CSS-only SVG turbulence data-URI, extremely
   low opacity, blended over the vignette. No JS, no image request, and
   subtle enough to read as texture rather than a pattern. */
#page-proseries .s1-premiere::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

/* Ground blackout — fades up to reveal the vignette as the very first
   entrance beat. Sits above the grain, below the content. */
#page-proseries .s1-premiere::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 1;
  pointer-events: none;
  z-index: 2;
}

@media (prefers-reduced-motion: no-preference) {
  #page-proseries .s1-premiere.s1-cue::before {
    animation: s1-ground-fade 0.6s ease-out forwards;
  }
}

@media (prefers-reduced-motion: reduce) {
  #page-proseries .s1-premiere::before {
    opacity: 0;
  }
}

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

#page-proseries .s1-premiere-inner {
  position: relative;
  z-index: 3;
  max-width: 60ch;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

/* Circular ProSeries mark — the folded-in hero identity, reusing the exact
   image the old .ps-hero-logo used, just modest-sized (this is a lead-in
   beat above the eyebrow, not the hero-sized 480px circle). */
#page-proseries .s1-logo {
  width: clamp(96px, 10vw, 120px);
  height: clamp(96px, 10vw, 120px);
  margin-bottom: 0.25rem;
}

#page-proseries .s1-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.35));
}

#page-proseries .s1-eyebrow {
  /* Outfit, not Bebas: Bebas is caps-only and the brand token reads dwdPROSERIES. */
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.7rem;
  color: var(--s1-silver);
}

#page-proseries .s1-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin: 0.25rem 0;
}

#page-proseries .s1-star {
  width: clamp(16px, 2.4vw, 26px);
  height: clamp(16px, 2.4vw, 26px);
  flex: none;
}

#page-proseries .s1-subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--ivory, #FAF3E8);
}

#page-proseries .s1-credits {
  font-family: 'Outfit', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  color: var(--s1-silver);
  margin-top: 0.25rem;
}

#page-proseries .s1-blurb {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ivory, #FAF3E8);
  max-width: 55ch;
  margin-top: 0.5rem;
}

/* Folded-in hero identity, part two: the "Ages 5-19" meta label + primary
   CTA that used to live in .ps-hero, now closing out the band itself. */
#page-proseries .s1-meta {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--s1-silver);
  margin-top: 0.75rem;
}

#page-proseries .s1-cta {
  margin-top: 0.5rem;
}

/* ------------------------------------------------------------
   ENTRANCE SEQUENCE — plays once, gated by .s1-cue (added by the
   IntersectionObserver in campaign.js the first time the band is both
   revealed by its data-reveal-after gate AND actually on-screen).
   Total sequence ~2.2s, ease-out, cinematic not bouncy. Elements sit
   hidden by default so there's no flash of unstyled content while
   waiting for the gate + observer; prefers-reduced-motion forces the
   final state immediately below, no keyframes involved.
   ------------------------------------------------------------ */
#page-proseries .s1-logo,
#page-proseries .s1-eyebrow,
#page-proseries .s1-star,
#page-proseries .s1-title,
#page-proseries .s1-subtitle,
#page-proseries .s1-credits,
#page-proseries .s1-blurb,
#page-proseries .s1-meta,
#page-proseries .s1-cta {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  /* Logo leads — fades/rises in first, ahead of the eyebrow. */
  #page-proseries .s1-premiere.s1-cue .s1-logo {
    animation: s1-rise-fade-sm 0.4s ease-out 0.05s forwards;
  }
  #page-proseries .s1-premiere.s1-cue .s1-eyebrow {
    animation: s1-eyebrow-in 0.4s ease-out 0.25s forwards;
  }
  #page-proseries .s1-premiere.s1-cue .s1-star {
    animation: s1-star-pop 0.4s cubic-bezier(.2, .8, .3, 1) 0.45s forwards;
  }
  #page-proseries .s1-premiere.s1-cue .s1-star:last-of-type {
    animation-delay: 0.55s;
  }
  /* Two animations on one declaration: the one-shot rise/fade entrance,
     plus the ambient gloss sweep picking up right after it finishes
     (1.1s delay + 0.5s duration = settles at 1.6s; sweep starts 2.0s to
     give it a beat of stillness first). Must stay a single declaration —
     see the note above the (now-removed) standalone sweep rule. */
  #page-proseries .s1-premiere.s1-cue .s1-title {
    animation:
      s1-rise-fade 0.5s ease-out 0.55s forwards,
      s1-sweep 6s ease-in-out infinite 1.5s;
  }
  #page-proseries .s1-premiere.s1-cue .s1-subtitle {
    animation: s1-rise-fade-sm 0.4s ease-out 0.9s forwards;
  }
  #page-proseries .s1-premiere.s1-cue .s1-credits {
    animation: s1-rise-fade-sm 0.4s ease-out 1.0s forwards;
  }
  #page-proseries .s1-premiere.s1-cue .s1-blurb {
    animation: s1-rise-fade-sm 0.4s ease-out 1.1s forwards;
  }
  #page-proseries .s1-premiere.s1-cue .s1-meta {
    animation: s1-rise-fade-sm 0.4s ease-out 1.2s forwards;
  }
  /* CTA closes the sequence, ~1.3s in. (Tightened 2026-09-03: the old
     timings put the headline at 2.4s and the button past 3s on a direct
     load, which on a phone read as a dark, empty screen.) */
  #page-proseries .s1-premiere.s1-cue .s1-cta {
    animation: s1-rise-fade-sm 0.5s ease-out 1.3s forwards;
  }

  /* Second look in the same session (eras.js adds .s1-cue--fast): the
     sequence has already played once, so everything lands together. */
  #page-proseries .s1-premiere.s1-cue.s1-cue--fast::before {
    animation-duration: 0.3s;
  }
  #page-proseries .s1-premiere.s1-cue.s1-cue--fast .s1-logo,
  #page-proseries .s1-premiere.s1-cue.s1-cue--fast .s1-eyebrow,
  #page-proseries .s1-premiere.s1-cue.s1-cue--fast .s1-star,
  #page-proseries .s1-premiere.s1-cue.s1-cue--fast .s1-star:last-of-type,
  #page-proseries .s1-premiere.s1-cue.s1-cue--fast .s1-subtitle,
  #page-proseries .s1-premiere.s1-cue.s1-cue--fast .s1-credits,
  #page-proseries .s1-premiere.s1-cue.s1-cue--fast .s1-blurb,
  #page-proseries .s1-premiere.s1-cue.s1-cue--fast .s1-meta,
  #page-proseries .s1-premiere.s1-cue.s1-cue--fast .s1-cta {
    animation-duration: 0.35s;
    animation-delay: 0s;
  }
  #page-proseries .s1-premiere.s1-cue.s1-cue--fast .s1-title {
    animation-duration: 0.35s, 6s;
    animation-delay: 0s, 0.8s;
  }
}

@media (prefers-reduced-motion: reduce) {
  #page-proseries .s1-logo,
  #page-proseries .s1-eyebrow,
  #page-proseries .s1-star,
  #page-proseries .s1-title,
  #page-proseries .s1-subtitle,
  #page-proseries .s1-credits,
  #page-proseries .s1-blurb,
  #page-proseries .s1-meta,
  #page-proseries .s1-cta {
    opacity: 1;
    transform: none;
  }
  #page-proseries .s1-eyebrow {
    letter-spacing: 0.28em;
  }
}

@keyframes s1-eyebrow-in {
  from { opacity: 0; letter-spacing: 0.6em; }
  to   { opacity: 1; letter-spacing: 0.28em; }
}

@keyframes s1-star-pop {
  0%   { opacity: 0; transform: scale(0) rotate(-24deg); }
  70%  { opacity: 1; transform: scale(1.12) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes s1-rise-fade {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes s1-rise-fade-sm {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  #page-proseries .s1-premiere {
    min-height: 70svh;
  }
}

/* ------------------------------------------------------------
   METADATA SLATE — .s1-slate (doc-mode stat strip, forest ground)
   ------------------------------------------------------------ */
#page-proseries .s1-slate {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin: 1.25rem 0 1.75rem;
}

#page-proseries .s1-slate-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.5rem;
  border-right: 1px solid rgba(201, 212, 206, 0.3);
}

#page-proseries .s1-slate-item:last-child {
  border-right: none;
}

#page-proseries .s1-slate-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  color: var(--ivory, #FAF3E8);
  line-height: 1;
}

#page-proseries .s1-slate-lbl {
  font-family: 'Outfit', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  color: var(--s1-silver);
  margin-top: 0.35rem;
}

/* ------------------------------------------------------------
   EPISODE GUIDE — #ps-calendar (stays on forest ground)
   ------------------------------------------------------------ */
#page-proseries .s1-cormorant-italic {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
}

#page-proseries #ps-calendar .s1-cormorant-italic.section-lead {
  color: var(--s1-silver);
}

#page-proseries .s1-season-dates {
  color: var(--s1-silver);
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

#page-proseries .s1-episode-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.75rem;
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}

#page-proseries .s1-ep {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid rgba(126, 196, 248, 0.25);
  border-radius: 6px;
}

#page-proseries .s1-ep-code {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.06em;
  font-size: 1rem;
  color: var(--s1-sky);
  border: 1px solid var(--s1-sky);
  border-radius: 4px;
  padding: 0.2rem 0.55rem;
  flex: none;
  white-space: nowrap;
}

#page-proseries .s1-ep-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ivory, #FAF3E8);
  flex: 1 1 auto;
}

#page-proseries .s1-ep--tba .s1-ep-title {
  text-transform: none;
  font-weight: 400;
  color: var(--s1-silver);
}

#page-proseries .s1-ep-meta {
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  color: var(--s1-silver);
  text-align: right;
  flex: none;
  white-space: nowrap;
}

#page-proseries .s1-ep--finale {
  border: 1px solid var(--s1-sky);
  padding: 1.1rem 1.3rem;
}

#page-proseries .s1-ep--finale .s1-ep-title {
  font-size: 1.05rem;
}

@media (max-width: 560px) {
  #page-proseries .s1-ep {
    flex-wrap: wrap;
  }
  #page-proseries .s1-ep-code {
    order: 1;
  }
  #page-proseries .s1-ep-title {
    order: 2;
    flex: 1 1 100%;
  }
  #page-proseries .s1-ep-meta {
    order: 3;
    flex: 1 1 100%;
    text-align: left;
  }
}

/* ------------------------------------------------------------
   PREMIERE TAKEOVER OVERLAY — .s1-premiere-window on #page-proseries
   Launch window only (Aug 10–24, 2026), toggled by campaign.js.
   Accents only: sky replaces pink for rules/underlines. CTA buttons
   (.btn, .btn-blush, .ac-cta etc.) are explicitly excluded and stay
   Family Pink.
   ------------------------------------------------------------ */
#page-proseries.s1-premiere-window {
  background: var(--s1-midnight);
  background-image: radial-gradient(ellipse at top, rgba(255,255,255,0.05) 0%, rgba(27,42,74,0) 60%);
}

/* poster-pages.css locks .content-section (and friends) to ivory/forest with
   !important for the non-takeover design — every rule below needs !important
   too, plus the extra .s1-premiere-window class for specificity, or the
   takeover loses the cascade and text goes invisible on its own background. */
#page-proseries.s1-premiere-window .content-section,
#page-proseries.s1-premiere-window .content-section.alt,
#page-proseries.s1-premiere-window .track-detail-section,
#page-proseries.s1-premiere-window .ps-whatelse {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--ivory, #FAF3E8) !important;
}

#page-proseries.s1-premiere-window .content-section p,
#page-proseries.s1-premiere-window .content-section.alt p {
  color: var(--ivory, #FAF3E8) !important;
}

/* .why-item (inside the Why ProSeries grid) and .td-description/.td-meta
   (inside the per-track detail panels) each keep their own solid background
   and pre-audited text color (terra/ivory/forest alternation; per-track
   ivory-or-forest) regardless of the midnight page ground underneath — don't
   let the broad ".content-section p" rule above bleed into them. */
/* The blanket ".content-section.alt p { color: ivory }" rule above (same
   file, equal specificity, but declared first) otherwise wins the tie over a
   plain descendant override — so the ivory/pink why-items get their own
   nth-child-qualified selector (extra specificity) to force forest ink back. */
#page-proseries.s1-premiere-window .content-section.alt .why-item:nth-child(2) p,
#page-proseries.s1-premiere-window .content-section.alt .why-item:nth-child(3) p {
  color: var(--forest) !important;
}

#page-proseries.s1-premiere-window .content-section h2,
#page-proseries.s1-premiere-window .content-section.alt h2,
#page-proseries.s1-premiere-window .ps-whatelse h2 {
  color: var(--ivory, #FAF3E8) !important;
}

/* Chapter eyebrow ("No.01 · Program") reads as terra-dark on ivory and pink
   on forest normally — neither survives on midnight, so it goes silver. */
#page-proseries.s1-premiere-window .content-section .chapter,
#page-proseries.s1-premiere-window .content-section.alt .chapter {
  color: var(--s1-silver) !important;
}

#page-proseries.s1-premiere-window .section-lead {
  color: var(--s1-silver) !important;
}

/* Chapter rail: Mission Silver at rest, Sky Blue hover/active. The rest-state
   rail already sits on its own dark scrim, but the active/hover states
   normally fill with Family Pink behind forest ink (arms.css) — that pairing
   would make sky text unreadable, so the fill swaps to a sky-tinted scrim too. */
#page-proseries.s1-premiere-window .chapter-rail a {
  color: var(--s1-silver) !important;
}
#page-proseries.s1-premiere-window .chapter-rail a:hover {
  color: var(--s1-sky) !important;
}
#page-proseries.s1-premiere-window .chapter-rail a.active {
  color: var(--s1-sky) !important;
  border-bottom-color: var(--s1-sky) !important;
}

/* chapter-rail + heading accents swap to sky, CTAs untouched */
#page-proseries.s1-premiere-window .chapter-rail a.active::after,
#page-proseries.s1-premiere-window .chapter-rail a:hover::after {
  background: var(--s1-sky);
}

#page-proseries.s1-premiere-window h2::after,
#page-proseries.s1-premiere-window .td-name-row::after {
  background: var(--s1-sky);
}

#page-proseries.s1-premiere-window .track-tab[aria-selected="true"] {
  border-color: var(--s1-sky);
}

/* Keep pricing panels legible on midnight ground */
#page-proseries.s1-premiere-window .track-detail {
  background: rgba(255, 255, 255, 0.04);
}

#page-proseries.s1-premiere-window .td-fees li,
#page-proseries.s1-premiere-window .td-included li {
  color: var(--ivory, #FAF3E8);
}

/* CTA buttons stay Family Pink — explicit no-op guard so future edits above
   don't accidentally catch them via inheritance. */
#page-proseries.s1-premiere-window .btn,
#page-proseries.s1-premiere-window .btn-blush,
#page-proseries.s1-premiere-window .ac-cta {
  background: var(--pink, #FF7AA2);
  color: var(--forest, #0c1f17);
}

/* ------------------------------------------------------------
   HERO DE-PINK UNDER TAKEOVER (2026-08-03 restructure)
   .ps-hero is Family Pink + forest ink permanently (poster-pages.css,
   all !important) — under the premiere window it goes midnight-family
   like the rest of the page. The pink "Series" chip (h1 em.ps-block,
   forest bg / pink text) and the CTA button are the brand mark + CTA
   exception and are left alone on purpose — everything else around
   them (label, sub, tagline) drops to ivory/silver.
   ------------------------------------------------------------ */
#page-proseries.s1-premiere-window .ps-hero {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--ivory, #FAF3E8) !important;
}
#page-proseries.s1-premiere-window .ps-hero h1 {
  color: var(--ivory, #FAF3E8) !important;
}
#page-proseries.s1-premiere-window .ps-hero .sub {
  color: var(--ivory, #FAF3E8) !important;
}
#page-proseries.s1-premiere-window .ps-hero .label,
#page-proseries.s1-premiere-window .ps-hero .tagline {
  color: var(--s1-silver) !important;
}
/* h1 em.ps-block: intentionally untouched — brand mark stays forest bg / pink text */
/* .ps-hero .btn: intentionally untouched — CTA exception stays Family Pink */

/* HERO FOLD (2026-08-03): the moment #s1-premiere is itself revealed (its
   own data-reveal-after gate, same one applyProSeriesReveal already checks
   every element against), campaign.js adds .s1-hero-folded to #page-proseries
   and the old .ps-hero disappears entirely — the band absorbed its logo,
   label, and CTA, so showing both back to back read as a duplicate opener.
   Before Aug 10 (or without ?launched=1) this class is absent and the hero
   renders exactly as it always has. All the de-pink overrides just above
   become inert once this fires — harmless, since the hero isn't visible to
   need them. Deliberately UNCONDITIONAL (not scoped to .s1-premiere-window)
   since the fold follows the band's own reveal state, not the takeover
   window class — the two happen to start the same day but are two
   different toggles. */
#page-proseries.s1-hero-folded .ps-hero {
  display: none;
}

/* #proseries-interest ("Now casting.") is styled by an ID selector in
   poster-pages.css (2 ids: #page-proseries #proseries-interest) — always
   Family Pink bg / forest text, in both takeover and non-takeover states;
   the generic .content-section.alt midnight override above can't reach it
   (class specificity loses to an id+id selector) and isn't meant to, since
   this band was never part of the midnight-ify pass. The chapter eyebrow
   added with the 2026-08-03 copy rewrite needs to match that same
   self-contained pink/forest pairing rather than inherit the generic
   .content-section .chapter silver rule (which assumes a midnight/forest
   ground this section doesn't have). */
#page-proseries #proseries-interest .chapter,
#page-proseries #proseries-interest .lbl {
  color: var(--forest, #0c1f17) !important;
}

/* ------------------------------------------------------------
   TRACKS SERIES-BRANDING (permanent — both takeover and non-takeover
   states, since .td-intro's ground is forest either way: forest always
   per poster-pages.css, midnight-family only during the takeover via
   .track-detail-section's override above). Mission Silver + sky read
   fine against both dark grounds, so one rule covers both. Framing
   only — prep/elite/pro accent colors, pricing and deposit copy are
   untouched.
   ------------------------------------------------------------ */
#page-proseries .td-cast-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--s1-silver);
  margin-bottom: 10px;
}

#page-proseries .td-cast-subline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 17px;
  color: var(--ivory, #FAF3E8);
  opacity: .85;
  margin: 0 0 18px;
}

/* Track code chip — s1-ep-code styling (Bebas, sky pill) dropped into each
   track tab alongside its existing "Track One/Two/Three" label. */
#page-proseries .track-tab .tt-code {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: .06em;
  font-size: 11px;
  color: var(--s1-sky);
  border: 1px solid var(--s1-sky);
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
  display: inline-block;
  width: fit-content;
  margin-bottom: 2px;
  opacity: 1;
}

/* ============================================================
   SEASON ONE HOME TEASER — #s1-home-teaser (2026-08-03)
   A slim cinematic midnight strip on the home page: a keyhole into the
   Series branding, not a takeover. Home stays forest everywhere else —
   this is the one midnight band on the page. Reuses #season-underway-cta's
   DOM slot and data-reveal-after gate (Aug 10, no hide-after) verbatim;
   nothing in campaign.js referenced that id directly, so it was safe to
   rename. Reveal/fade itself rides the site's ordinary .reveal
   IntersectionObserver (main.js) — no bespoke entrance sequence needed for
   a mid-page band like the premiere one gets.
   ============================================================ */
#s1-home-teaser {
  position: relative;
  background: var(--s1-midnight);
  background-image: radial-gradient(ellipse at center, rgba(255,255,255,0.06) 0%, rgba(27,42,74,0) 55%, rgba(10,16,30,0.6) 100%);
  padding: clamp(28px, 4vw, 44px) clamp(24px, 6vw, 64px);
  overflow: hidden;
}

#s1-home-teaser .s1ht-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 48px);
}

#s1-home-teaser .s1ht-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

#s1-home-teaser .s1ht-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.62rem;
  color: var(--s1-silver);
}

#s1-home-teaser .s1ht-lockup {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 1rem);
  margin: 0.35rem 0;
}

#s1-home-teaser .s1ht-star {
  width: clamp(10px, 1.4vw, 15px);
  height: clamp(10px, 1.4vw, 15px);
  flex: none;
}

#s1-home-teaser .s1ht-title {
  font-family: 'Cinzel', serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  background: var(--s1-gloss);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ivory, #FAF3E8);
  display: inline-block;
}

@supports not (background-clip: text) {
  #s1-home-teaser .s1ht-title {
    -webkit-text-fill-color: initial;
    color: var(--s1-sky);
    background: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  #s1-home-teaser .s1ht-title {
    animation: s1-sweep 6s ease-in-out infinite;
  }
}

#s1-home-teaser .s1ht-meta {
  font-family: 'Outfit', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--s1-silver);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* Episode-guide chip, reused here — that rule is scoped under
   #page-proseries so it doesn't reach the home page; same declarations,
   new scope. */
#s1-home-teaser .s1-ep-code {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  color: var(--s1-sky);
  border: 1px solid var(--s1-sky);
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
  flex: none;
  white-space: nowrap;
  text-transform: none;
}

#s1-home-teaser .s1ht-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  flex: none;
}

#s1-home-teaser .s1ht-link {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--s1-silver);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 212, 206, 0.4);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

#s1-home-teaser .s1ht-link:hover {
  color: var(--s1-sky);
  border-color: var(--s1-sky);
}

@media (max-width: 720px) {
  #s1-home-teaser .s1ht-inner {
    flex-direction: column;
    text-align: center;
  }
  #s1-home-teaser .s1ht-main {
    align-items: center;
    text-align: center;
  }
  #s1-home-teaser .s1ht-meta {
    justify-content: center;
    text-align: center;
  }
  #s1-home-teaser .s1ht-actions {
    width: 100%;
  }
}

/* ============================================================
   SKY BLUE — the working accent on Season One CTAs + interaction
   highlights (2026-08-03, Dixon's call, overrides the pink-CTA default
   for these specific surfaces only). Pink stays the brand mark
   everywhere else — the "Series." chip, star SVGs, .btn-blush default
   used by non-Season-One flows, etc. Applied via .s1-cta-sky added
   alongside .btn.btn-blush (base .btn layout/shape kept) on:
     - #s1-hero-cta       (the folded-in premiere band CTA)
     - the #s1-home-teaser Express Interest button
     - the #proseries-interest ("Now casting.") Express Interest button
     - #ps-hero-cta       (the pre-fold .ps-hero CTA)
     - the topnav Express Interest .nav-cta
   Each context has its own pre-existing pink rule at a different
   specificity (some, some carrying 1-2 ids), so the
   selectors below are written to match or exceed each one exactly
   rather than relying on one generic rule + hoping it wins the cascade. */
#page-proseries .ps-hero .btn.s1-cta-sky,
#page-proseries #proseries-interest .s1-cta-sky,
#page-proseries .s1-cta-sky,
#s1-home-teaser .s1-cta-sky,
.topnav .nav-cta.s1-cta-sky {
  background: var(--s1-sky) !important;
  color: var(--forest, #0c1f17) !important;
}
#page-proseries .ps-hero .btn.s1-cta-sky:hover,
#page-proseries #proseries-interest .s1-cta-sky:hover,
#page-proseries .s1-cta-sky:hover,
#s1-home-teaser .s1-cta-sky:hover,
.topnav .nav-cta.s1-cta-sky:hover {
  background: var(--s1-gloss-btn) !important;
  color: var(--forest, #0c1f17) !important;
}

/* Secondary buttons next to a sky CTA (Contact Us outlines, "See the
   season" links) are deliberately untouched — no selector added for them. */

/* Text selection inside Season One surfaces */
#page-proseries ::selection,
#s1-home-teaser ::selection {
  background: var(--s1-sky);
  color: var(--forest, #0c1f17);
}

/* Chapter-rail active accent — sky in the NORMAL (non-takeover) state too,
   not just under .s1-premiere-window (which already had this). Scoped to
   the ps arm only; the house/collective rail keeps its terracotta accent. */
[data-arm="ps"] .chapter-rail a.active {
  color: var(--s1-sky) !important;
  border-bottom-color: var(--s1-sky) !important;
  background: none !important;
}
[data-arm="ps"] .chapter-rail a:hover {
  color: var(--ivory) !important;
  background: none !important;
}

/* ============================================================
   SEASON ONE STATE MACHINE (added 2026-08-16)
   Season One is the ProSeries identity for the whole 40-week
   season, not a two-week takeover. campaign.js writes the current
   state to <html data-s1-state> — premiere | midseason | finale |
   wrapped — and everything below keys off that.

   Why <html> and not #page-proseries: the nav "Express Interest"
   CTA carries .s1-cta-sky and lives outside the ProSeries page.
   Scoping the retirement at the document root is what lets sky
   leave cleanly at 'wrapped' instead of stranding sky buttons on
   a page whose accents have gone back to Family Pink — the exact
   half-undressed state the old binary window class produced on
   Aug 25.
   ============================================================ */

/* ── State-gated copy ──
   Every .s1-when element is hidden by default and revealed only
   when its data-s1-when list contains the live state. Multi-state
   elements list them space-separated and match via ~=. Nesting is
   intentional: a .s1-when span inside a .s1-when paragraph needs
   BOTH to match, which is how the blurb's closing sentence varies
   inside a paragraph that itself only shows for three states. */
.s1-when { display: none; }
[data-s1-state="premiere"]  .s1-when[data-s1-when~="premiere"],
[data-s1-state="midseason"] .s1-when[data-s1-when~="midseason"],
[data-s1-state="finale"]    .s1-when[data-s1-when~="finale"],
[data-s1-state="wrapped"]   .s1-when[data-s1-when~="wrapped"] {
  display: inline;
}
/* Block-level variants (the two .s1-blurb paragraphs) opt in explicitly —
   `display: revert` would hand the value back to whatever author rule
   sat below in the cascade, which is not the same thing as "block". */
[data-s1-state="premiere"]  .s1-when--block[data-s1-when~="premiere"],
[data-s1-state="midseason"] .s1-when--block[data-s1-when~="midseason"],
[data-s1-state="finale"]    .s1-when--block[data-s1-when~="finale"],
[data-s1-state="wrapped"]   .s1-when--block[data-s1-when~="wrapped"] {
  display: block;
}

/* ── MIDSEASON: sky accents, normal page ground ──
   The full midnight takeover (.s1-premiere-window) belongs to the
   premiere and the finale. Between them the page returns to its
   own ivory/forest design, but keeps the season's accent so the
   identity doesn't evaporate for eight months. The chapter rail
   already runs sky unconditionally under [data-arm="ps"] further
   up this file; these are the three accents that used to live
   ONLY inside the takeover block and vanished with it. */
[data-s1-state="midseason"] #page-proseries h2::after,
[data-s1-state="midseason"] #page-proseries .td-name-row::after {
  background: var(--s1-sky);
}
[data-s1-state="midseason"] #page-proseries .track-tab[aria-selected="true"] {
  border-color: var(--s1-sky);
}

/* ── WRAPPED: sky retires ──
   Season over. The band drops to archive copy (markup side), the
   hero unfolds (campaign.js), and every sky surface hands back to
   Family Pink so the ProSeries page is coherent again while Season
   Two is written. These need to out-specify the unconditional sky
   rules above, hence the doubled attribute selector on the root. */
[data-s1-state="wrapped"][data-s1-state] .s1-cta-sky,
[data-s1-state="wrapped"][data-s1-state] .btn.s1-cta-sky {
  background: var(--pink, #FF7AA2) !important;
  color: var(--forest, #0c1f17) !important;
}
[data-s1-state="wrapped"] #page-proseries .s1-ep-code,
[data-s1-state="wrapped"] #page-proseries .track-tab .tt-code {
  color: var(--pink, #FF7AA2);
  border-color: var(--pink, #FF7AA2);
}
[data-s1-state="wrapped"] #page-proseries .s1-ep--finale {
  border-color: var(--pink, #FF7AA2);
}
[data-s1-state="wrapped"] [data-arm="ps"] .chapter-rail a.active {
  color: var(--pink, #FF7AA2) !important;
  border-bottom-color: var(--pink, #FF7AA2) !important;
  background: none !important;
}

/* ── Chapter-rail tap targets (audit M1, 2026-08-16) ──
   The chips measured 32px tall at 375px, under the 44px minimum.
   The rail is a horizontal scroller, so height is the only axis
   that can grow without pushing chips off-screen — padding alone
   can't get there, so min-height carries it and the flex centering
   keeps the label optically centred in the taller pill. */
.chapter-rail a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}


/* ═══════════════════════════════════════════════════════════════════════
 * STORY
 * The Preseason story and the Season One cast wall.
 * (was css/story.css)
 * ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   story.css — #ps-story ("The Preseason") + #ps-cast ("The Cast")
   Two new sections on the ProSeries page, inserted between the chapter
   rail and the Three Tracks block. Scoped entirely to #ps-story / #ps-cast.
   Added 2026-08-19.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Shared eyebrow (clapperboard icon + label) ─────────────────────── */
#ps-story .ps-story-eyebrow,
#ps-cast .ps-story-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 18px;
}
#ps-story .ps-clapper,
#ps-cast .ps-clapper {
  width: 20px;
  height: auto;
  color: var(--ivory);
  flex-shrink: 0;
}
#ps-cast .ps-story-eyebrow--ivory .ps-clapper { color: var(--ivory); }

/* ── Scene rows ──────────────────────────────────────────────────────── */
#ps-story .ps-scenes {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}
#ps-story .ps-scene {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-bottom: clamp(56px, 8vw, 96px);
}
#ps-story .ps-scene:last-child { margin-bottom: 0; }

#ps-story .ps-scene-media { order: 1; }
#ps-story .ps-scene-text { order: 2; padding-inline: clamp(20px, 4vw, 56px); }
#ps-story .ps-scene--flip .ps-scene-media { order: 2; }
#ps-story .ps-scene--flip .ps-scene-text { order: 1; }

#ps-story .ps-scene-slate {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
#ps-story .scene-when {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}
#ps-story .ps-scene-text h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: clamp(24px, 3vw, 34px);
  text-transform: uppercase;
  line-height: 1.08;
  color: var(--ivory);
  margin: 0 0 12px;
}
#ps-story .ps-scene-text p {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ivory-dim);
  max-width: 52ch;
  margin: 0;
}

/* dwdCON scene keeps its own coral brand for the chip; every other scene
   uses the page's pink accent (set via .scene-when color above). */
#ps-story .scene--con { --scene-accent: #d97757; }
#ps-story .scene--con .s1-ep-code {
  color: var(--scene-accent) !important;
  border-color: var(--scene-accent) !important;
}
#ps-story .scene--con .scene-when { color: var(--scene-accent); }

/* Week One chip: sky accent for the Season One production, this scene only. */
#ps-story .ps-chip--sky {
  color: #7EC4F8 !important;
  border-color: #7EC4F8 !important;
}

/* ── Title card scene (Auditions) ───────────────────────────────────── */
#ps-story .ps-scene--card {
  grid-template-columns: 1fr;
  background: var(--forest-light);
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 56px);
  text-align: center;
}
#ps-story .ps-scene--card .ps-scene-slate {
  justify-content: center;
  margin-bottom: 20px;
}
#ps-story .ps-card-num {
  font-family: 'Bebas Neue', sans-serif;
  text-align: center;
  font-size: clamp(90px, 14vw, 160px);
  line-height: 0.9;
  color: var(--pink);
  margin: 0 0 8px;
}
#ps-story .ps-card-line {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--ivory);
  margin: 0 0 10px;
  text-align: center;
}
#ps-story .ps-card-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  color: var(--ivory-dim);
  max-width: 46ch;
  margin: 0 auto;
  text-align: center;
}

/* ── Media collage ───────────────────────────────────────────────────── */
#ps-story .ps-scene-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#ps-story .ps-scene-media .span2 { grid-column: 1 / -1; }
#ps-story .ps-scene-media img.span2 { height: auto; }
#ps-story .ps-scene-media img.ar-34 { aspect-ratio: 3 / 4; }
#ps-story .ps-scene-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#ps-story .ps-scene-media img:not(.span2) {
  aspect-ratio: 9 / 16;
}

/* ── Video wrappers ──────────────────────────────────────────────────── */
#ps-story .ps-scene-video { width: 100%; }
#ps-story .ps-scene-video video {
  width: 100%;
  display: block;
}
#ps-story .ps-scene-media > .ps-scene-video:not(.span2) video {
  max-width: 320px;
  margin: 0 auto;
}
#ps-story .ps-video-credit {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  color: var(--ivory-dim);
  margin: 8px 0 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   #ps-cast — the roster
   ═══════════════════════════════════════════════════════════════════════ */
#ps-cast .ps-cast-track { margin-top: 44px; }
#ps-cast .ps-cast-track:first-of-type { margin-top: 40px; }

#ps-cast .ps-cast-track-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
#ps-cast .ps-cast-track-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory);
}
#ps-cast .ps-cast-chip {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border: 1px solid;
  background: transparent;
}
#ps-cast .ps-cast-chip--prep  { color: #FF8FAB; border-color: #FF8FAB; }
#ps-cast .ps-cast-chip--elite { color: var(--seafoam); border-color: var(--seafoam); }
#ps-cast .ps-cast-chip--pro   { color: var(--terra-soft, #e08d76); border-color: var(--terra-soft, #e08d76); }

#ps-cast .ps-cast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
#ps-cast .ps-cast-card { display: block; }
#ps-cast .ps-cast-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
#ps-cast .ps-cast-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--ivory);
  text-align: left;
  margin-top: 8px;
}
#ps-cast .ps-cast-code {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
}
#ps-cast .ps-cast-code--prep  { color: #FF8FAB; }
#ps-cast .ps-cast-code--elite { color: var(--seafoam); }
#ps-cast .ps-cast-code--pro   { color: var(--terra-soft, #e08d76); }

#ps-cast .ps-cast-footer {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  color: var(--ivory-dim, #e8ddd0);
  margin: 44px 0 0;
}
#ps-cast .ps-cast-footer-link {
  color: var(--terra-soft, #e08d76);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
#ps-cast .ps-cast-footer-link:hover { color: var(--ivory); }

/* ── Mobile: single column below 900px, media first ─────────────────── */
@media (max-width: 900px) {
  #ps-story .ps-scene {
    grid-template-columns: 1fr;
  }
  #ps-story .ps-scene-media,
  #ps-story .ps-scene--flip .ps-scene-media {
    order: 1;
  }
  #ps-story .ps-scene-text,
  #ps-story .ps-scene--flip .ps-scene-text {
    order: 2;
  }
}

@media (max-width: 480px) {
  #ps-cast .ps-cast-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Title-card centering must out-rank #page-proseries .content-section p */
#ps-story .ps-scene--card p.ps-card-line { text-align: center; margin: 0 0 10px; }
#ps-story .ps-scene--card p.ps-card-sub { text-align: center; margin-left: auto !important; margin-right: auto !important; }

/* Cast stays on the forest ground in every Season One state (poster-pages
   paints non-.alt content-sections ivory; our ivory text needs dark) */
#page-proseries #ps-cast { background: var(--forest) !important; color: var(--ivory) !important; }
#ps-story .ps-scene--card p.ps-card-line { margin-left: auto !important; margin-right: auto !important; max-width: max-content; }
#page-proseries #ps-cast h2 { color: var(--ivory) !important; }
#page-proseries #ps-cast .ps-cast-lead, #page-proseries #ps-cast > p { color: var(--ivory-dim, #e8ddd0) !important; }

/* Rail-jump landings: match the 160px scroll margin of every other target */
#ps-story, #ps-cast { scroll-margin-top: 160px; }
/* ar-34 must out-rank the 9/16 default that appears earlier with equal specificity */
#ps-story .ps-scene-media img.ar-34:not(.span2) { aspect-ratio: 3 / 4; }

/* ═══════════════════════════════════════════════════════════════════════
   Motion layer: #ps-story + #ps-cast
   Entrance animation only. Every keyframe/transition here runs once per
   reveal, except the ambient logo float (explicitly ambient by design).
   All of it is gated behind prefers-reduced-motion: no-preference so the
   base, unguarded state below is always the final resting state.
   Added 2026-08-19.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Story header row: eyebrow/h2/lead on the left, floating mark on the right ── */
#ps-story .ps-story-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
#ps-story .ps-story-header-copy { flex: 1 1 auto; min-width: 0; }
#ps-story .ps-story-mark {
  width: 140px;
  height: auto;
  flex-shrink: 0;
  display: block;
}

/* ── Ghost episode numbers in the scene-text dead space ─────────────────
   Excluded from .ps-scene--card on purpose (no [data-num] attribute is
   ever set on that scene, so the ::after never gets content there). */
#ps-story .ps-scene-text { position: relative; }
#ps-story .ps-scene-text h3,
#ps-story .ps-scene-text p,
#ps-story .ps-scene-text .ps-scene-slate {
  position: relative;
  z-index: 1;
}
#ps-story .ps-scene-text::after {
  content: attr(data-num);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(140px, 16vw, 240px);
  line-height: 1;
  position: absolute;
  bottom: -20px;
  right: 0;
  color: rgba(255, 122, 162, 0.05);
  pointer-events: none;
  z-index: 0;
  opacity: 0.16;
}
@supports (-webkit-text-stroke: 1px black) or (text-stroke: 1px black) {
  #ps-story .ps-scene-text::after {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--scene-accent, var(--pink));
    text-stroke: 1.5px var(--scene-accent, var(--pink));
  }
}

@media (prefers-reduced-motion: no-preference) {

  /* Ambient float for the floating ps mark, the one intentionally-looping
     exception to the "runs once" rule. */
  #ps-story .ps-story-mark {
    animation: ps-mark-float 7s ease-in-out infinite;
  }
  @keyframes ps-mark-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }

  /* Clapper clap: the hinged top-bar swings shut once the story section
     has fully revealed. */
  #ps-story .ps-clapper-arm {
    transform: rotate(-22deg);
    transform-origin: 1px 7px;
  }
  #ps-story.visible .ps-clapper-arm {
    transform: rotate(0deg);
    transition: transform 0.5s ease-out 0.3s;
  }

  /* Per-scene staggered entrance: collage items rise+fade in first,
     staggered by position, then the text column (and its chip) follow. */
  #ps-story .ps-scene-media > img,
  #ps-story .ps-scene-media > .ps-scene-video {
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  #ps-story .ps-scene.reveal:not(.visible) .ps-scene-media > img,
  #ps-story .ps-scene.reveal:not(.visible) .ps-scene-media > .ps-scene-video {
    opacity: 0;
    transform: translateY(18px);
  }
  #ps-story .ps-scene-media > img:nth-child(1),
  #ps-story .ps-scene-media > .ps-scene-video:nth-child(1) { transition-delay: 0.08s; }
  #ps-story .ps-scene-media > img:nth-child(2),
  #ps-story .ps-scene-media > .ps-scene-video:nth-child(2) { transition-delay: 0.16s; }
  #ps-story .ps-scene-media > img:nth-child(3),
  #ps-story .ps-scene-media > .ps-scene-video:nth-child(3) { transition-delay: 0.24s; }
  #ps-story .ps-scene-media > img:nth-child(4),
  #ps-story .ps-scene-media > .ps-scene-video:nth-child(4) { transition-delay: 0.32s; }
  #ps-story .ps-scene-media > img:nth-child(5),
  #ps-story .ps-scene-media > .ps-scene-video:nth-child(5) { transition-delay: 0.4s; }

  #ps-story .ps-scene-text {
    transition: opacity 0.6s ease-out 0.35s, transform 0.6s ease-out 0.35s;
  }
  #ps-story .ps-scene.reveal:not(.visible) .ps-scene-text {
    opacity: 0;
    transform: translateY(12px);
  }

  /* Chip snap: the S#:E# slate chip pops in synced with the text delay. */
  #ps-story .ps-scene.reveal .s1-ep-code {
    transition: transform 0.35s ease-out 0.35s, opacity 0.35s ease-out 0.35s;
  }
  #ps-story .ps-scene.reveal:not(.visible) .s1-ep-code {
    opacity: 0;
    transform: scale(0.85);
  }
}

/* Hide the ghost numbers and the floating mark below 900px, matching the
   existing single-column breakpoint for the story scenes. */
@media (max-width: 900px) {
  #ps-story .ps-scene-text::after { display: none; }
  #ps-story .ps-story-mark { display: none; }
}

/* ── Cast hover swap: portrait -> Dixon two-shot ─────────────────────── */
/* #ps-cast .ps-cast-card img (above) already sizes both the portrait and
   the alt img identically via a descendant selector, wrapper div or not. */
#ps-cast .ps-cast-photo { position: relative; }
#ps-cast .ps-cast-alt {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}
@media (hover: hover) and (pointer: fine) {
  #ps-cast .ps-cast-card:hover .ps-cast-alt,
  #ps-cast .ps-cast-card:focus-within .ps-cast-alt {
    opacity: 1;
  }
}

/* Scene 7 ghost numeral matches its sky chip */
#ps-story .scene--s1 { --scene-accent: #7EC4F8; }

/* Touch devices never show the hover two-shot; display:none keeps the
   lazy loader from ever fetching the 17 cast2 images on phones */
@media (hover: none), (pointer: coarse) {
  #ps-cast .ps-cast-alt { display: none; }
}
#ps-cast .ps-cast-alt-pic { position: absolute; inset: 0; }
#ps-cast .ps-cast-alt-pic .ps-cast-alt { position: static; width: 100%; height: 100%; }


/* ═══════════════════════════════════════════════════════════════════════
 * CONVERT
 * Conversion overhaul, August 2026.
 * (was css/convert.css)
 * ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   convert.css — Conversion overhaul (2026-08-19)
   New CTA rows, scarcity chips, the home story grid, and the sticky
   mobile CTA bar. Linked AFTER story.css. Square corners throughout;
   any new motion is gated behind prefers-reduced-motion: no-preference,
   same pattern as css/story.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── H1: Hero CTA row ─────────────────────────────────────────────────── */
.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.hero-cta-row .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.hero-cta-secondary {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ivory);
  text-decoration: none;
  border-bottom: 1px solid rgba(250, 243, 232, 0.35);
  padding-bottom: 2px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.hero-cta-secondary:hover { border-color: var(--pink); color: var(--pink); }

/* ── H4: Story grid header + closing link ─────────────────────────────── */
#page-home .photo-grid-section .story-grid-head {
  max-width: 640px;
  margin: 0 0 32px;
}
#page-home .story-grid-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 12px;
}
#page-home .photo-grid-section .story-grid-head h2 {
  font-family: var(--font-display);
  color: var(--ivory);
  margin: 0 0 10px;
}
#page-home .photo-grid-section .story-grid-head p {
  font-family: var(--font-body);
  color: var(--ivory-dim);
  margin: 0;
  text-align: left;
}
.story-grid-link {
  display: inline-block;
  margin-top: 28px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--pink);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 122, 162, 0.4);
  padding-bottom: 2px;
}
.story-grid-link:hover { color: var(--ivory); border-color: var(--ivory); }

/* ── P1: Conversion band after pricing ────────────────────────────────── */
.ps-conv-band {
  background: var(--forest-light);
  padding: 56px 32px;
  text-align: center;
  margin-top: 40px;
}
.ps-conv-band h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ivory);
  font-size: clamp(24px, 3.4vw, 34px);
  margin: 0 0 24px;
}
.ps-conv-chairs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.conv-chip {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border: 1px solid;
  background: transparent;
}
.conv-chip--prep  { color: var(--pink-soft); border-color: var(--pink-soft); }
.conv-chip--elite { color: var(--seafoam); border-color: var(--seafoam); }
.conv-chip--pro   { color: var(--terra-soft); border-color: var(--terra-soft); }
.ps-conv-line {
  font-family: var(--font-body);
  color: var(--ivory-dim);
  font-size: 0.95rem;
  margin: 0 0 28px;
  text-align: center;
}
.ps-conv-band .btn { min-height: 44px; }
.ps-conv-micro {
  font-family: var(--font-body);
  color: var(--ivory-dim);
  font-size: 13px;
  margin: 14px 0 0;
  text-align: center;
}

/* ── P2: Scarcity chips in the track tabs ─────────────────────────────── */
.conv-tab-chip {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid;
  background: transparent;
  display: inline-block;
  width: fit-content;
  margin-top: 6px;
}
#page-proseries .track-tab[data-track-tab="prep"] .conv-tab-chip  { color: var(--pink-soft); border-color: var(--pink-soft); }
#page-proseries .track-tab[data-track-tab="elite"] .conv-tab-chip { color: var(--seafoam); border-color: var(--seafoam); }
#page-proseries .track-tab[data-track-tab="pro"] .conv-tab-chip   { color: var(--terra-soft); border-color: var(--terra-soft); }
@media (max-width: 600px) {
  .conv-tab-chip { display: none; }
}

/* ── P3: "Now casting" three-step row ─────────────────────────────────── */
.conv-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 900px;
  margin: 36px auto 0;
  text-align: left;
}
.conv-step {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.conv-step-chip {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--forest);
  border: 1px solid rgba(12, 31, 23, 0.45);
  padding: 3px 8px;
  align-self: flex-start;
}
.conv-step-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--forest);
}
.conv-step-line {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(12, 31, 23, 0.78);
}
.conv-ask-first {
  text-align: center;
  margin-top: 14px;
}
.conv-ask-first a {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(12, 31, 23, 0.8);
  text-decoration: none;
  border-bottom: 1px solid rgba(12, 31, 23, 0.4);
}
.conv-ask-first a:hover { color: var(--forest); border-color: var(--forest); }
@media (max-width: 720px) {
  .conv-steps { grid-template-columns: 1fr; }
}

/* ── P4: cta-banner secondary text link ───────────────────────────────── */
.conv-ask-first-link {
  display: inline-block;
  margin-left: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--cream, var(--ivory-dim));
  text-decoration: none;
  border-bottom: 1px solid rgba(250, 243, 232, 0.3);
}
.conv-ask-first-link:hover { color: var(--pink); border-color: var(--pink); }

/* ── M1: Sticky mobile CTA bar ─────────────────────────────────────────── */
.mob-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--sidebar-bg, #080e0b);
  border-top: 1px solid rgba(250, 243, 232, 0.14);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  z-index: 150; /* above nav (100), below the lightbox (200) */
}
.mob-cta-label {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ivory-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mob-cta-btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--pink);
  color: var(--forest);
  min-height: 44px;
  padding-inline: 18px;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.mob-cta-btn:hover { transform: translateY(-1px); }

@media (max-width: 1149px) {
  .mob-cta:not([hidden]) { display: flex; }
  #page-home,
  #page-proseries {
    padding-bottom: 72px;
  }
}

/* ── Reduced-motion guard (mirrors css/story.css pattern) ─────────────── */
@media (prefers-reduced-motion: no-preference) {
  .hero-cta-row .btn,
  .story-grid-link,
  .mob-cta-btn {
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
}

/* Tracks intro: placement/age-flex reassurance line */
#proseries-tracks-full .td-placement-note {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--pink);
  margin-top: 6px;
}

/* Bar must never entomb the footer's last row on small screens */
@media (max-width: 1150px) {
  body.mob-cta-on { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}
/* Teachers hero: grid item floors at min-content and clips 27px at 390px */
.tch-hero--split .tch-hero-text { min-width: 0; }

/* Teachers hero: "Dixon Bowles" was rendering as "DIXON Bowles" because
   poster-pages.css sets text-transform: uppercase on .tch-name
   and only resets it (text-transform: none) on the nested <em> that wraps
   "Bowles" — so the plain-text "Dixon" outside the <em> stayed uppercased
   while "Bowles" did not. Overriding text-transform back to none on the
   whole element (still to win the cascade) restores natural
   casing for both words; the <em> keeps its own italic/pink treatment. */
#page-teachers .tch-name { text-transform: none; }

/* ══════════ Teachers — rotation faculty roster ══════════
   Full-roster replacement for the old single-teacher stub. Scoped rf-
   classes live here (not poster-pages.css) per the "new styles go in
   convert.css" convention. Initial tiles stand in for headshots: forest-
   light ground, large ivory Cormorant initials — never gray, never gold
   (gold is reserved for the Tamara Mark memorial). */
#page-teachers .rf-intro {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--ivory);
  opacity: .82;
  margin: 0;
  padding: 0 64px 28px;
  max-width: 60ch;
}

#page-teachers .rf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 0 64px 48px;
}

#page-teachers .rf-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#page-teachers .rf-tile {
  aspect-ratio: 4 / 5;
  background: var(--forest-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

#page-teachers .rf-initials {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(64px, 9vw, 104px);
  line-height: .78;
  color: var(--ivory);
}

#page-teachers .rf-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.15;
  color: var(--ivory);
  margin: 0;
}

#page-teachers .rf-disc {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--terra-soft);
}

#page-teachers .rf-line {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ivory);
  opacity: .78;
  margin: 0;
  max-width: 42ch;
}

/* Company assistants: same idiom, lighter/smaller second tier */
#page-teachers .rf-assist-head {
  padding: 8px 64px 4px;
}

#page-teachers .rf-grid--assist {
  grid-template-columns: repeat(2, 1fr);
  max-width: 620px;
  padding-bottom: 56px;
}

#page-teachers .rf-tile--assist {
  aspect-ratio: 16 / 9;
}

#page-teachers .rf-initials--assist {
  font-size: clamp(44px, 6vw, 64px);
}

@media (max-width: 1100px) {
  #page-teachers .rf-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  #page-teachers .rf-grid,
  #page-teachers .rf-grid--assist { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  #page-teachers .rf-intro,
  #page-teachers .rf-grid,
  #page-teachers .rf-assist-head { padding-left: 24px !important; padding-right: 24px !important; }
}

/* Rotation faculty photo cards (headshots recovered from the IG card art) */
#page-teachers .rf-photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
#page-teachers .rf-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ivory);
  margin: 10px 0 4px;
}
#page-teachers .rf-cred {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terra-soft, #e08d76);
  margin: 0;
}

/* Parent voices (staged; renders only when the block above is uncommented) */
#proseries-interest .conv-quote blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--forest);
  max-width: 46ch;
  margin: 18px 0 6px;
}
#proseries-interest .conv-quote-attr {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(12, 31, 23, 0.7);
}


/* ============================================================
   MERGE-READINESS FIXES (2026-09-02) — defects found in the full
   desktop + 390px visual pass before the rebrand went live.
   ============================================================ */

/* 1. Route change moves focus to the page's first heading (main.js showPage)
      for screen-reader users. Chrome paints a focus ring on that programmatic
      focus on any fresh deep-linked load (/#teachers etc.), which drew a box
      around every page H1. Headings are not interactive; no ring. */
.page h1[tabindex="-1"]:focus,
.page h2[tabindex="-1"]:focus,
.page[tabindex="-1"]:focus {
  outline: none !important;
  box-shadow: none;
}

/* 2. "The Program" stat slate sits on the IVORY section but its numerals were
      ivory (season1.css assumes a forest ground) — 3 / 40 / 1 were invisible. */
#page-proseries #ps-program .s1-slate-num { color: var(--forest, #0c1f17); }
#page-proseries #ps-program .s1-slate-lbl { color: #5f6f66; }
#page-proseries #ps-program .s1-slate-item { border-right-color: rgba(12, 31, 23, 0.18); }

/* 3. Cast wall footer line was jammed against the Pro row: poster-pages'
      `#page-proseries .content-section p { margin: 0 0 14px !important }`
      outranks story.css. */
#page-proseries #ps-cast .ps-cast-footer { margin: 44px 0 0 !important; }

/* 4. Home pull-quote: the two terracotta hairlines are absolutely positioned
      at 50% height and cut straight through the quote text at phone widths. */
@media (max-width: 640px) {
  .pull-quote::before,
  .pull-quote::after { display: none; }
}

/* 5. Merch hero: uppercase forced "DWDPROSERIES" (brand casing is dwdPROSERIES)
      and the word broke mid-string at 390px. Casing comes from the markup now. */
#page-shop .merch-poll-hero h1 {
  text-transform: none;
  font-size: clamp(44px, 9vw, 144px) !important;
  overflow-wrap: anywhere;
}
/* The vote button sat in a half-width darker box under the three cards. */
#page-shop .merch-extras {
  background: transparent !important;
  padding: 40px 64px 56px !important;
}
@media (max-width: 640px) {
  #page-shop .merch-extras { padding: 32px 24px 48px !important; }
}
#page-shop .merch-poll-hero .merch-h1-word { display: block; }


/* ═══════════════════════════════════════════════════════════════════════
 * NEXT-LEVEL
 * The next-level build, September 2026.
 * (was css/next-level.css)
 * ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   next-level.css — the 2026-09-02 "next level" build.
   Loads AFTER convert.css, so this is the last word in the cascade.
   Everything here is scoped to a new component; nothing in this file
   restyles an existing surface.

   Contents:
     1.1  #interest — on-site Express Interest form (Family Pink ground)
   ═══════════════════════════════════════════════════════════════ */


/* ============================================================
   1.1  EXPRESS INTEREST FORM
   Sits inside #proseries-interest, which is a full-bleed Family
   Pink band with forest ink (poster-pages.css). Every form
   primitive on this site assumes the opposite (cream ink on
   forest), so the whole component is re-inked here rather than
   inheriting and fighting.

   No card, no panel: the form sits directly on the pink. The page
   is already a stack of flat colour bands and a floating white
   box would be the only one of its kind. Depth stays at one.
   ============================================================ */

#page-proseries #proseries-interest .ps-if {
  max-width: 620px;
  margin: 44px 0 0;
  text-align: left;
}

#page-proseries #proseries-interest .ps-if-title {
  font-family: var(--font-display), 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.05;
  color: var(--forest, #0c1f17);
  margin: 0 0 10px;
}

#page-proseries #proseries-interest .ps-if-sub {
  font-size: 15px !important;
  line-height: 1.55;
  color: rgba(12, 31, 23, 0.82) !important;
  max-width: 52ch;
  margin: 0 0 28px !important;
}

/* ── Fields ─────────────────────────────────────────────────── */

#page-proseries #proseries-interest .ps-if .form-group {
  margin-bottom: 20px;
}

#page-proseries #proseries-interest .ps-if label {
  display: block;
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(12, 31, 23, 0.72);
  margin-bottom: 6px;
}

#page-proseries #proseries-interest .ps-if .ps-if-opt {
  font-weight: 500;
  letter-spacing: 0.06em;
  opacity: 0.62;
  text-transform: none;
}

#page-proseries #proseries-interest .ps-if input,
#page-proseries #proseries-interest .ps-if select,
#page-proseries #proseries-interest .ps-if textarea {
  width: 100%;
  padding: 11px 12px;
  background: rgba(250, 243, 232, 0.92);
  border: 1px solid rgba(12, 31, 23, 0.22);
  border-radius: 2px;
  color: var(--forest, #0c1f17);
  font-family: var(--font-body), 'Outfit', sans-serif;
  /* 16px floor is enforced globally by styles.css to stop iOS zoom-on-focus. */
  line-height: 1.4;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

#page-proseries #proseries-interest .ps-if input::placeholder,
#page-proseries #proseries-interest .ps-if textarea::placeholder {
  color: rgba(12, 31, 23, 0.6);
}

#page-proseries #proseries-interest .ps-if input:hover,
#page-proseries #proseries-interest .ps-if select:hover,
#page-proseries #proseries-interest .ps-if textarea:hover {
  border-color: rgba(12, 31, 23, 0.45);
}

#page-proseries #proseries-interest .ps-if input:focus,
#page-proseries #proseries-interest .ps-if select:focus,
#page-proseries #proseries-interest .ps-if textarea:focus {
  outline: none;
  background: #FAF3E8;
  border-color: var(--forest, #0c1f17);
  box-shadow: 0 0 0 2px rgba(12, 31, 23, 0.32);
}

/* The base select arrow is drawn ivory for the forest ground. Forest here. */
#page-proseries #proseries-interest .ps-if select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230c1f17' d='M1 4l5 4 5-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

#page-proseries #proseries-interest .ps-if textarea {
  min-height: 84px;
  resize: vertical;
}

/* Date inputs render a native calendar glyph that is invisible on a light
   ground in some Chrome themes; force it dark and give it a hit target. */
#page-proseries #proseries-interest .ps-if input[type="date"]::-webkit-calendar-picker-indicator {
  filter: none;
  opacity: 0.55;
  cursor: pointer;
}

/* Invalid state (set by validateForm in main.js) */
#page-proseries #proseries-interest .ps-if .invalid {
  border-color: #8f2f1c;
  background: #FAF3E8;
}

#page-proseries #proseries-interest .ps-if .form-field-error {
  display: none;
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-size: 13px;
  color: #8f2f1c;
  margin-top: 5px;
}

#page-proseries #proseries-interest .ps-if .form-field-error.show {
  display: block;
}

/* ── Two-up rows collapse to one column on phones ───────────── */

#page-proseries #proseries-interest .ps-if-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}

/* Inside a dancer block the three fields are one thought, so they sit on one
   line at desktop width instead of leaving Experience stranded full-bleed. */
@media (min-width: 721px) {
  #page-proseries #proseries-interest .ps-if-dancer .ps-if-row {
    grid-template-columns: 1.3fr 1fr;
  }
}
@media (min-width: 921px) {
  #page-proseries #proseries-interest .ps-if-dancer {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 0 20px;
    align-items: start;
  }
  #page-proseries #proseries-interest .ps-if-dancer > .ps-if-legend { grid-column: 1 / -1; }
  #page-proseries #proseries-interest .ps-if-dancer > .ps-if-row {
    display: contents;
  }
  #page-proseries #proseries-interest .ps-if-dancer > .ps-if-track-note { grid-column: 1 / -1; }
}

/* ── Dancer blocks ──────────────────────────────────────────── */

#page-proseries #proseries-interest .ps-if-dancer {
  border: none;
  border-top: 1px solid rgba(12, 31, 23, 0.22);
  padding: 20px 0 0;
  margin: 8px 0 0;
}

#page-proseries #proseries-interest .ps-if-legend {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--forest, #0c1f17);
  padding: 0;
  margin-bottom: 14px;
}

#page-proseries #proseries-interest .ps-if-remove {
  background: none;
  border: none;
  padding: 4px 2px;
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(12, 31, 23, 0.62);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

#page-proseries #proseries-interest .ps-if-remove:hover {
  color: var(--forest, #0c1f17);
}

/* The live track preview: the one thing on this form that answers the
   question every parent asks before they ask it. */
#page-proseries #proseries-interest .ps-if-track-note {
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-size: 13px !important;
  line-height: 1.45;
  color: rgba(12, 31, 23, 0.8) !important;
  margin: -8px 0 4px !important;
  padding-left: 12px;
  border-left: 2px solid var(--forest, #0c1f17);
}

#page-proseries #proseries-interest .ps-if-add {
  display: inline-block;
  background: none;
  border: 1px solid rgba(12, 31, 23, 0.45);
  border-radius: 2px;
  padding: 9px 14px;
  margin: 18px 0 24px;
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--forest, #0c1f17);
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

#page-proseries #proseries-interest .ps-if-add:hover {
  background: rgba(12, 31, 23, 0.08);
  border-color: var(--forest, #0c1f17);
}

/* ── Submit + consent ───────────────────────────────────────── */

#page-proseries #proseries-interest .ps-if-submit {
  margin-top: 6px;
}

#page-proseries #proseries-interest .ps-if-submit:active {
  transform: scale(0.98);
}

#page-proseries #proseries-interest .ps-if-consent {
  font-size: 13px !important;
  line-height: 1.5;
  color: rgba(12, 31, 23, 0.72) !important;
  max-width: 46ch;
  margin: 14px 0 0 !important;
}

#page-proseries #proseries-interest .ps-if-consent a {
  color: var(--forest, #0c1f17);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#page-proseries #proseries-interest .ps-if .form-error {
  display: none;
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #7a1f10;
  background: rgba(250, 243, 232, 0.7);
  border-left: 3px solid #8f2f1c;
  padding: 10px 14px;
  margin-top: 14px;
}

#page-proseries #proseries-interest .ps-if .form-error.show {
  display: block;
}

/* ── Success state (replaces the form in place, no modal) ───── */

#page-proseries #proseries-interest .ps-if-done .ps-if-title {
  margin-top: 0;
}

/* No text-transform: uppercasing this would print "DWDPROSERIES", and the
   brand casing is dwdPROSERIES. Handles stay exactly as written. */
#page-proseries #proseries-interest .ps-if-follow {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--forest, #0c1f17);
  border-bottom: 1px solid rgba(12, 31, 23, 0.45);
  padding-bottom: 3px;
}

#page-proseries #proseries-interest .ps-if-follow:hover {
  border-bottom-color: var(--forest, #0c1f17);
}

/* ── Phones ─────────────────────────────────────────────────── */

@media (max-width: 720px) {
  #page-proseries #proseries-interest .ps-if {
    max-width: none;
    margin-top: 32px;
  }
  #page-proseries #proseries-interest .ps-if-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  #page-proseries #proseries-interest .ps-if-submit {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  #page-proseries #proseries-interest .ps-if input,
  #page-proseries #proseries-interest .ps-if select,
  #page-proseries #proseries-interest .ps-if textarea,
  #page-proseries #proseries-interest .ps-if-add,
  #page-proseries #proseries-interest .ps-if-submit {
    transition: none;
  }
}

/* ── Band alignment ─────────────────────────────────────────────
   The three steps and the "or ask a question first" link were each
   centred in their own max-width box while the h2 sat hard left, so
   the band had two competing spines. With a form in here the spine
   has to be one thing. Everything lines up under "Now casting."
   These two components appear nowhere else on the site.
   ─────────────────────────────────────────────────────────────── */

#page-proseries #proseries-interest .conv-steps {
  margin-left: 0;
  margin-right: 0;
}

#page-proseries #proseries-interest .conv-ask-first {
  text-align: left;
  margin-top: 26px;
}

/* Focus ring. tighten.css sets a terracotta :focus-visible ring site-wide
   with, chosen for the forest and ivory grounds. Nobody checked it
   against Family Pink: #C8614B on #FF7AA2 measures 1.62:1, under the 3:1 UI
   floor and visually just brown mud. Forest on pink is 6.99:1. Overridden here
   for this band only; the site-wide ring is untouched everywhere else. */
#page-proseries #proseries-interest .ps-if input:focus,
#page-proseries #proseries-interest .ps-if select:focus,
#page-proseries #proseries-interest .ps-if textarea:focus,
#page-proseries #proseries-interest .ps-if input:focus-visible,
#page-proseries #proseries-interest .ps-if select:focus-visible,
#page-proseries #proseries-interest .ps-if textarea:focus-visible,
#page-proseries #proseries-interest .ps-if-add:focus-visible,
#page-proseries #proseries-interest .ps-if-remove:focus-visible,
#page-proseries #proseries-interest .ps-if-submit:focus-visible,
#page-proseries #proseries-interest .ps-if-follow:focus-visible {
  outline: 2px solid var(--forest, #0c1f17) !important;
  outline-offset: 2px;
  box-shadow: none;
}


/* ============================================================
   1.2  COLLECTIVE — NEXT CLASS
   dwdCOLLECTIVE is the hushed arm: terracotta, no Family Pink.
   [data-arm="c"] already remaps every pink alias to terracotta,
   so this block inherits the right accent by living inside it.
   Sits on the forest .collective-card ground, above "Where We
   Dance", so it is the first concrete thing an adult reads.
   ============================================================ */

#page-adult-company .dnc {
  border-top: 1px solid rgba(250, 243, 232, 0.16);
  border-bottom: 1px solid rgba(250, 243, 232, 0.16);
  padding: 26px 0;
  margin: 0 0 34px;
}

#page-adult-company .dnc-eyebrow {
  display: block;
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra-soft, #e08d76);
  margin-bottom: 12px;
}

#page-adult-company .dnc-title {
  font-family: var(--font-display), 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1;
  color: var(--ivory, #FAF3E8);
  margin: 0 0 6px;
}

#page-adult-company .dnc-date {
  font-family: var(--font-display), 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(20px, 2.2vw, 26px);
  font-style: italic;
  line-height: 1.25;
  color: var(--ivory, #FAF3E8);
  margin: 0 0 8px;
}

#page-adult-company .dnc-venue,
#page-adult-company .dnc-price {
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #c4baa8;
  margin: 0 0 4px;
}

#page-adult-company .dnc-empty {
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #c4baa8;
  max-width: 56ch;
  margin: 0 0 18px;
}

#page-adult-company .dnc-empty a {
  color: var(--terra-soft, #e08d76);
  text-decoration: underline;
  text-underline-offset: 3px;
}

#page-adult-company .dnc-cta {
  margin-top: 14px;
}

/* The two classes after the next one: a quiet line each, never a second card. */
#page-adult-company .dnc-more {
  list-style: none;
  /* Capped: without a measure the time column drifts 900px away from the
     class it belongs to on a wide card. */
  max-width: 560px;
  margin: 20px 0 0;
  padding: 0;
  border-top: 1px solid rgba(250, 243, 232, 0.1);
}

#page-adult-company .dnc-more-item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-size: 14px;
  color: #c4baa8;
  border-bottom: 1px solid rgba(250, 243, 232, 0.07);
}

#page-adult-company .dnc-more-item:last-child { border-bottom: none; }

#page-adult-company .dnc-more-date {
  flex: 0 0 auto;
  min-width: 62px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--terra-soft, #e08d76);
}

#page-adult-company .dnc-more-title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ivory, #FAF3E8);
}

#page-adult-company .dnc-more-time {
  flex: 0 0 auto;
  opacity: 0.8;
}

@media (max-width: 640px) {
  #page-adult-company .dnc { padding: 22px 0; margin-bottom: 28px; }
  #page-adult-company .dnc-cta { width: 100%; justify-content: center; }
  #page-adult-company .dnc-more-item { flex-wrap: wrap; gap: 4px 12px; }
}


/* ============================================================
   1.3  MERCH POLL LINK
   Merch left the nav; the poll keeps one quiet way in from the
   ProSeries page end, where its actual audience already is.
   Text link, not a third button: the banner already has a
   primary and a secondary.
   ============================================================ */

#page-proseries .ps-merch-poll-line {
  margin: 18px 0 0 !important;
  font-size: 13px !important;
}

#page-proseries .ps-merch-poll-line a {
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--terra-soft, #e08d76);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

#page-proseries .ps-merch-poll-line a:hover {
  color: var(--ivory, #FAF3E8);
}


/* ============================================================
   1.4  A FACE IN EVERY HERO
   Four heroes were a wordmark on a flat band. People are the
   product here; the logo is already in the nav, the footer and
   the tab. Merch is deliberately not in this pass: it left the
   nav in 1.3 and its type lockup hero was never logo-only.
   ============================================================ */

/* ── Teachers: photo replaces the 400px mark on the right ──── */

/* The hero used to be sized by the 400px logo block. With that gone it needs
   its own height, or the portrait source's own 2:3 aspect stretches the band
   to 916px. */
#page-teachers .tch-hero--split {
  min-height: 520px;
}

#page-teachers .tch-hero--split .tch-hero-photo {
  position: relative;
  align-self: stretch;
  min-height: 520px;
  overflow: hidden;
}

/* Absolute fill: a percentage height on the img inside a stretch-sized grid
   cell resolves against the image's own aspect instead, which is what blew the
   band up. */
#page-teachers .tch-hero--split .tch-hero-photo picture {
  position: absolute;
  inset: 0;
  display: block;
}

#page-teachers .tch-hero--split .tch-hero-photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Dixon sits upper-centre in the frame; centring the crop would
     cut his head off at this aspect. */
  object-position: 50% 24%;
}

/* The H1 always overflowed its column by ~47px; nobody saw it because the
   right half was the same terracotta. A photograph there makes the clip
   visible, so the display size now fits the column it lives in. */
#page-teachers .tch-hero--split h1 {
  font-size: clamp(64px, 7.2vw, 128px) !important;
}

#page-teachers .tch-hero-brandline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

#page-teachers .tch-hero-mark {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  object-fit: contain;
}

#page-teachers .tch-hero-brandline .tch-hero-eyebrow {
  margin: 0 !important;
}

@media (max-width: 980px) {
  #page-teachers .tch-hero--split {
    grid-template-columns: 1fr;
  }
  #page-teachers .tch-hero--split { min-height: 0; }
  #page-teachers .tch-hero--split .tch-hero-photo {
    order: -1;
    min-height: 0;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  #page-teachers .tch-hero-brandline {
    justify-content: center;
  }
  #page-teachers .tch-hero-mark { width: 56px; height: 56px; }
}

/* ── Gallery: full-bleed photograph, type over a forest scrim ── */

#page-gallery .gallery-hero--photo {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 440px;
  padding: 0;
  overflow: hidden;
  text-align: left;
}

#page-gallery .gallery-hero-bg,
#page-gallery .gallery-hero-bg img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* The scrim. Two stops rather than a flat wash: the type sits at the
   bottom, so that is where the ground needs to be solid. Measured on the
   rendered pixels, the ivory H1 clears 4.5:1 over the lightest patch it
   covers. */
#page-gallery .gallery-hero--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(12, 31, 23, 0.14) 0%,
    rgba(12, 31, 23, 0.26) 38%,
    rgba(12, 31, 23, 0.78) 100%);
  pointer-events: none;
}

#page-gallery .gallery-hero--photo .gallery-hero-text {
  position: relative;
  z-index: 1;
  padding: 44px 64px 40px;
  max-width: 40ch;
}

#page-gallery .gallery-hero--photo .gallery-hero-text h1 {
  color: var(--ivory, #FAF3E8);
  text-shadow: 0 2px 18px rgba(12, 31, 23, 0.6);
  margin: 0 0 8px;
}

#page-gallery .gallery-hero--photo .gallery-hero-text p {
  color: rgba(250, 243, 232, 0.9);
  text-shadow: 0 1px 12px rgba(12, 31, 23, 0.7);
  margin: 0;
}

@media (max-width: 640px) {
  #page-gallery .gallery-hero--photo {
    min-height: 340px;
  }
  #page-gallery .gallery-hero--photo .gallery-hero-text {
    padding: 32px 24px 28px;
  }
}

/* ── Contact: a portrait, with the mark tucked into its corner ── */

#page-contact .contact-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0 0 28px;
  overflow: hidden;
  background: var(--forest, #0c1f17);
}

#page-contact .contact-portrait picture,
#page-contact .contact-portrait > picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 14%;
}

/* The mark sits beside the heading rather than inside the photo. In the corner
   it landed on skin at some crops and went muddy, and a plate to fix that would
   be pure decoration. On the forest ground it is legible at every width, and it
   matches the brandline treatment on the Teachers hero. */
#page-contact .contact-brandline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}

#page-contact .contact-mark {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  object-fit: contain;
}

#page-contact .contact-brandline h3 {
  margin: 0 !important;
}

/* ── Collective hero: photo forward, mark demoted ───────────── */

#page-adult-company .ac-hero--photo-forward .hero-logo-big {
  position: absolute;
  right: 28px;
  bottom: 22px;
  width: 200px;
  height: 200px;
  padding: 0;
  min-height: 0;
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
}

#page-adult-company .ac-hero--photo-forward .hero-logo-big img {
  width: 200px;
  height: 200px;
  object-fit: contain;
}

#page-adult-company .ac-hero--photo-forward {
  position: relative;
  grid-template-columns: 1fr;
}

/* Directional wash behind the type. Lifting the flat scrim let the dancers
   read but dropped the terracotta eyebrow to 2.79:1 and the terracotta tagline
   to 3.70:1 on the warm patches of the floor. A flat scrim heavy enough to fix
   that would put the photo right back in the mud, so the treatment goes where
   the words are and leaves the dancers alone. */
#page-adult-company .ac-hero--photo-forward::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(12, 31, 23, 0.94) 0%,
    rgba(12, 31, 23, 0.88) 26%,
    rgba(12, 31, 23, 0.4) 52%,
    rgba(12, 31, 23, 0) 72%);
  pointer-events: none;
  z-index: 0;
}

#page-adult-company .ac-hero--photo-forward .ac-hero-text-stack {
  position: relative;
  z-index: 1;
  max-width: 44ch;
}

@media (max-width: 980px) {
  #page-adult-company .ac-hero--photo-forward::before {
    background: linear-gradient(to bottom,
      rgba(12, 31, 23, 0.9) 0%,
      rgba(12, 31, 23, 0.86) 55%,
      rgba(12, 31, 23, 0.74) 100%);
  }
  #page-adult-company .ac-hero--photo-forward .hero-logo-big {
    order: 0;
    right: 12px;
    bottom: 12px;
    opacity: 0.45;
  }
  #page-adult-company .ac-hero--photo-forward .hero-logo-big {
    width: 116px;
    height: 116px;
  }
  #page-adult-company .ac-hero--photo-forward .hero-logo-big img {
    width: 116px !important;
    height: 116px !important;
    max-width: 40vw;
  }
  #page-adult-company .ac-hero--photo-forward .ac-hero-text-stack {
    text-align: left;
    max-width: none;
  }
}


/* ============================================================
   2.4  EPISODE RECAPS — the one email capture
   Deliberately quiet. Express Interest is the ask on these
   pages; this is the second-best thing a visitor can do, and it
   should read that way. Forest ground on both hosts: on Home it
   is a ruled strip on the same ground, and on ProSeries it lands
   between the pink Episode Guide and the pink "Now casting."
   band, where a dark strip is the breath between two shouts.
   ============================================================ */

.ep-recaps {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px 48px;
  padding: 30px 64px !important;
  background: var(--forest, #0c1f17) !important;
  border-top: 1px solid rgba(250, 243, 232, 0.14);
  border-bottom: 1px solid rgba(250, 243, 232, 0.14);
  margin: 0 !important;
  text-align: left;
}

.ep-recaps-eyebrow {
  display: block;
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pink, #FF7AA2);
  margin-bottom: 6px;
}

/* The Collective arm is hushed; [data-arm="c"] already remaps --pink to
   terracotta, so this needs no separate rule if the band ever lands there. */

.ep-recaps .ep-recaps-line {
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-size: 15px !important;
  line-height: 1.5;
  color: var(--ivory, #FAF3E8) !important;
  max-width: 46ch;
  margin: 0 !important;
}

.ep-recaps-form {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.ep-recaps-form input[type="email"] {
  width: 260px;
  padding: 12px 14px;
  background: rgba(250, 243, 232, 0.06);
  border: 1px solid rgba(250, 243, 232, 0.28);
  border-radius: 2px;
  color: var(--ivory, #FAF3E8);
  font-family: var(--font-body), 'Outfit', sans-serif;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.ep-recaps-form input[type="email"]::placeholder {
  color: rgba(250, 243, 232, 0.45);
}

.ep-recaps-form input[type="email"]:hover {
  border-color: rgba(250, 243, 232, 0.45);
}

.ep-recaps-form input[type="email"]:focus,
.ep-recaps-form input[type="email"]:focus-visible {
  outline: 2px solid var(--terra, #C8614B);
  outline-offset: 2px;
  background: rgba(250, 243, 232, 0.1);
  border-color: rgba(250, 243, 232, 0.5);
}

.ep-recaps-form button {
  white-space: nowrap;
}

.ep-recaps .form-success {
  grid-column: 1 / -1;
  display: none;
  background: transparent;
  border: none;
  border-left: 3px solid var(--pink, #FF7AA2);
  padding: 4px 0 4px 14px;
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-size: 15px;
  color: var(--ivory, #FAF3E8);
}

.ep-recaps .form-success.show {
  display: block;
}

.ep-recaps .form-error {
  grid-column: 1 / -1;
}

@media (max-width: 860px) {
  .ep-recaps {
    grid-template-columns: 1fr;
    padding: 26px 24px !important;
    gap: 18px;
  }
  .ep-recaps-form {
    flex-direction: column;
  }
  .ep-recaps-form input[type="email"] {
    width: 100%;
  }
  .ep-recaps-form button {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ep-recaps-form input[type="email"] { transition: none; }
}

/* [hidden] is only `display: none` in the UA sheet, so any class rule that sets
   display beats it. main.js hides these forms on success by setting the
   attribute, and without this the "Done" message appeared under a form that
   looked ready to submit again. */
.ep-recaps-form[hidden],
.ps-if-form[hidden] {
  display: none;
}


/* ============================================================
   2.1  HOME HERO LOOP
   The video sits above the still and only becomes visible once
   it is actually playing (js/main.js adds .hero-loop-on). Every
   failure mode — reduced motion, refused autoplay, no JS, codec
   miss, blocked media — leaves the still and its own caption in
   place, which is the page exactly as it shipped before this.
   ============================================================ */

#page-home .hero-photo .hero-loop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 2:3 source in a 0.65:1 to 0.93:1 container: cover crops the top and
     bottom, and the dancer sits slightly above centre in the frame. */
  object-position: 50% 38%;
  opacity: 0;
  transition: opacity 420ms ease-out;
  pointer-events: none;
  z-index: 1;
}

#page-home .hero-photo.hero-loop-on .hero-loop {
  opacity: 1;
}

/* One thing animates. With the loop up, the still's Ken Burns drift is a
   second motion nobody can see anyway, so it stops. */
#page-home .hero-photo.hero-loop-on img {
  animation: none;
}

/* Captions swap with the state. Both are in the markup so the right credit is
   present even with JS off. */
#page-home .hero-photo .caption--loop { display: none; }
#page-home .hero-photo.hero-loop-on .caption--still { display: none; }
#page-home .hero-photo.hero-loop-on .caption--loop { display: block; }

#page-home .hero-photo .caption { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  /* Belt and braces: main.js never starts the video under this preference, and
     if it somehow did it would stay invisible. */
  #page-home .hero-photo .hero-loop { display: none; }
  #page-home .hero-photo .caption--loop { display: none; }
  #page-home .hero-photo .caption--still { display: block; }
}


/* ============================================================
   2.2  EPISODE GUIDE
   The rows in season1.css are drawn for a forest ground: ivory
   title, silver meta, sky chip. poster-pages.css puts the whole
   section on Family Pink, so on the live site they measure
   2.23:1, 1.61:1 and 1.30:1 — the guide is effectively
   unreadable. Rather than repaint every colour, the rows get
   the ground they were designed for back. A forest card on the
   pink band also gives the guide the thing it is describing:
   a list of episodes.
   ============================================================ */

/* Same bug one line up: the section lead is Season One silver on Family Pink
   at 1.61:1. It sits on the pink, not on a card, so it takes forest ink.
   Solid forest (6.99:1) rather than a softened 0.78 alpha (4.89:1, which does
   pass) — the line is already set apart by being italic Cormorant at 15px, and
   it matches .s1-season-dates two lines below it. Hierarchy from size and
   style, not from colour. */
#page-proseries #ps-calendar .section-lead {
  color: var(--forest, #0c1f17) !important;
  opacity: 1;
}

#page-proseries #ps-calendar .s1-ep {
  background: var(--forest, #0c1f17);
  border-color: rgba(126, 196, 248, 0.32);
  border-radius: 4px;
}

/* Titles and meta inherit forest from .ps-whatelse otherwise. */
#page-proseries #ps-calendar .s1-ep-title {
  color: var(--ivory, #FAF3E8) !important;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

#page-proseries #ps-calendar .s1-ep-meta {
  color: var(--s1-silver, #c9d4ce) !important;
}

#page-proseries #ps-calendar .s1-ep--tba .s1-ep-title {
  color: var(--s1-silver, #c9d4ce) !important;
}

/* Competition mark, if one is ever dropped into images/comps/. */
#page-proseries #ps-calendar .s1-ep-mark {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* "Up next" — the one row that should catch the eye. Sky is the Season One
   accent, and on forest it clears every floor. */
#page-proseries #ps-calendar .s1-ep--next {
  border-color: var(--s1-sky, #7EC4F8);
  box-shadow: inset 0 0 0 1px rgba(126, 196, 248, 0.35);
}

#page-proseries #ps-calendar .s1-ep-flag {
  flex: 0 0 auto;
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest, #0c1f17);
  background: var(--s1-sky, #7EC4F8);
  border-radius: 2px;
  padding: 3px 7px;
}

/* An episode that has already happened steps back. */
#page-proseries #ps-calendar .s1-ep--aired {
  opacity: 0.72;
}

/* Optional recap line, merged in from data/episodes.json. */
#page-proseries #ps-calendar .s1-ep-recap {
  flex: 1 1 100%;
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-size: 13px !important;
  line-height: 1.5;
  color: var(--s1-silver, #c9d4ce) !important;
  margin: 8px 0 0 !important;
  padding-top: 8px;
  border-top: 1px solid rgba(250, 243, 232, 0.12);
}

#page-proseries #ps-calendar .s1-ep-recap-link {
  color: var(--s1-sky, #7EC4F8);
  white-space: nowrap;
}

/* Meta carries a date AND a location now, which does not fit the original
   nowrap column at anything under a desktop width. */
#page-proseries #ps-calendar .s1-ep--live .s1-ep-meta {
  white-space: normal;
  max-width: 22ch;
}

@media (max-width: 560px) {
  #page-proseries #ps-calendar .s1-ep--live .s1-ep-meta {
    max-width: none;
    text-align: left;
  }
  #page-proseries #ps-calendar .s1-ep-title {
    flex-wrap: wrap;
  }
}


/* ============================================================
   2.3  SEASON ONE IN PHOTOS
   ============================================================ */

/* Instagram handles are lowercase, always. poster-pages.css uppercases the
   .igf-handle, which printed @DWDPROSERIES and @DWD_COLLECTIVE on the Gallery.
   The markup was already correct. (The same uppercase transform prints
   DWDPROSERIES in the chapter labels and the Season One eyebrow elsewhere on
   the site; those are flagged for Dixon rather than changed here, because
   fixing them is a sitewide typographic decision, not a gallery one.) */
#page-gallery .igf-handle {
  text-transform: none;
}

/* 3rem is the gallery's own gutter (.gallery-grid in additions.css). Everything
   new here lines up with the photographs rather than inventing a second edge. */
#page-gallery .gallery-lead {
  padding: 56px 3rem 8px;
  max-width: 60ch;
}

#page-gallery .gallery-lead-eyebrow {
  display: block;
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pink, #FF7AA2);
  margin-bottom: 10px;
}

#page-gallery .gallery-lead-title {
  font-family: var(--font-display), 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.02;
  color: var(--ivory, #FAF3E8);
  margin: 0 0 12px;
}

#page-gallery .gallery-lead-sub {
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #c4baa8;
  margin: 0;
}

/* Episode groups. The header is a name and a date on one rule, not a card:
   the photographs are the content and a chrome-heavy header would compete. */
#page-gallery .gallery-episode {
  margin-top: 34px;
}

#page-gallery .gallery-episode-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(250, 243, 232, 0.14);
  margin: 0 3rem 18px;
}

#page-gallery .gallery-episode-name {
  font-family: var(--font-display), 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.1;
  color: var(--ivory, #FAF3E8);
}

#page-gallery .gallery-episode-when {
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terra-soft, #e08d76);
  white-space: nowrap;
}

/* The archive fold. Everything from the CAA years lives behind one click. */
#page-gallery .gallery-archive {
  margin: 56px 3rem 0;
  border-top: 1px solid rgba(250, 243, 232, 0.14);
}

#page-gallery .gallery-archive-summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
}

#page-gallery .gallery-archive-summary::-webkit-details-marker { display: none; }

#page-gallery .gallery-archive-label {
  font-family: var(--font-display), 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 28px);
  color: var(--ivory, #FAF3E8);
}

/* The affordance has to be visible, not implied: a details summary that looks
   like a heading does not read as clickable. */
#page-gallery .gallery-archive-label::after {
  content: ' +';
  color: var(--terra-soft, #e08d76);
}

#page-gallery .gallery-archive[open] .gallery-archive-label::after {
  content: ' –';
}

#page-gallery .gallery-archive-hint {
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-size: 13px;
  color: #a89c8a;
}

#page-gallery .gallery-archive-summary:focus-visible {
  outline: 2px solid var(--terra, #C8614B);
  outline-offset: 4px;
}

#page-gallery .gallery-archive-body {
  padding-bottom: 24px;
}

/* The grids inside the fold already carry their own page padding, which would
   double up inside this container. */
#page-gallery .gallery-archive-body .gallery-grid,
#page-gallery .gallery-archive-body .gallery-section-label {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 640px) {
  #page-gallery .gallery-lead { padding: 36px 1.5rem 4px; }
  #page-gallery .gallery-episode-head { margin: 0 1.5rem 14px; }
  #page-gallery .gallery-archive { margin: 40px 1.5rem 0; }
  #page-gallery .gallery-episode-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}


/* ============================================================
   3.3  PARENT FAQ
   #ps-faq sits between "Why ProSeries" and "Teaching
   Philosophy", both .content-section.alt. Cormorant question,
   Outfit answer, one row per question. No "only one open at a
   time": a parent comparing the cost answer against the deposit
   answer should not have to keep reopening one of them.
   ============================================================ */

#page-proseries #ps-faq .ps-faq-list {
  max-width: 74ch;
  margin: 26px 0 0;
  border-top: 1px solid rgba(250, 243, 232, 0.14);
}

#page-proseries #ps-faq .ps-faq-item {
  border-bottom: 1px solid rgba(250, 243, 232, 0.14);
}

#page-proseries #ps-faq .ps-faq-q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display), 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.25;
  color: var(--ivory, #FAF3E8);
}

#page-proseries #ps-faq .ps-faq-q::-webkit-details-marker { display: none; }

/* The affordance is a real mark, not a hover surprise. */
#page-proseries #ps-faq .ps-faq-q::after {
  content: '+';
  flex: 0 0 auto;
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  color: var(--terra-soft, #e08d76);
  transition: transform 160ms ease-out;
}

#page-proseries #ps-faq .ps-faq-item[open] .ps-faq-q::after {
  content: '–';
}

#page-proseries #ps-faq .ps-faq-q:hover {
  color: var(--terra-soft, #e08d76);
}

#page-proseries #ps-faq .ps-faq-q:focus-visible {
  outline: 2px solid var(--terra, #C8614B);
  outline-offset: 3px;
}

#page-proseries #ps-faq .ps-faq-a p {
  font-family: var(--font-body), 'Outfit', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: #c4baa8 !important;
  max-width: 68ch;
  margin: 0 0 20px !important;
  padding-right: 40px;
}

#page-proseries #ps-faq .ps-faq-more {
  margin: 26px 0 0 !important;
}

#page-proseries #ps-faq .ps-faq-more a {
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-size: 14px;
  color: var(--terra-soft, #e08d76);
  border-bottom: 1px solid rgba(224, 141, 118, 0.5);
  padding-bottom: 2px;
}

#page-proseries #ps-faq .ps-faq-more a:hover {
  color: var(--ivory, #FAF3E8);
  border-bottom-color: var(--ivory, #FAF3E8);
}

@media (max-width: 640px) {
  #page-proseries #ps-faq .ps-faq-q { padding: 16px 0; gap: 14px; }
  #page-proseries #ps-faq .ps-faq-a p { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #page-proseries #ps-faq .ps-faq-q::after { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
 * HOME HERO: CLEAR THE FIXED NAV
 * Found 2026-09-03 during the pre-merge walkthrough. Pre-existing — it came in
 * with the rebrand, not the next-level work — but it would have shipped.
 *
 * At 1025px and up the .hero-text column's content measures exactly its
 * content box, so `justify-content: center` has no slack and packs to the top.
 * The first child, "Est. 2025 · Orlando, FL", sat at y=56 with 16px of height,
 * and the fixed topnav's band ends at y=71. The line was completely invisible
 * at every desktop width.
 *
 * The fix is slack: enough top padding to clear the nav, and the hero row grows
 * to fit (the photo's max-height leaves room). Below 1025 the hero stacks with
 * the photo on top and nothing there needs changing.
 * ═══════════════════════════════════════════════════════════════════════ */

@media (min-width: 1025px) {
  #page-home .hero-text {
    padding-top: 96px !important;
  }
}

/* Brand casing survives uppercase labels: dwdPROSERIES, never DWDPROSERIES. */
.brand-case { text-transform: none; }