/*
Theme Name: BTS — Become The Source
Theme URI: https://becomethesource.com
Author: Michelle York Publishing / Michelle York LLC
Description: Dark cinematic theme for the Become The Source publishing universe. Sections: OFF-World fiction, TAF consciousness research, BIBX corporate leadership.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
Text Domain: bts-theme
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --black:        #0a0a0b;
  --dark:         #111114;
  --dark-mid:     #18181c;
  --surface:      #1e1e24;
  --surface-high: #252530;
  --border:       rgba(255,255,255,0.07);

  --gold:         #c9a84c;
  --gold-light:   #e5c878;
  --crimson:      #8b1a1a;
  --crimson-light:#c0392b;
  --teal:         #1a5c6b;
  --teal-light:   #2d8fa3;

  --text-primary:   #f0ece4;
  --text-secondary: #a8a49c;
  --text-muted:     #6b6760;

  --font-display: 'Cinzel', serif;
  --font-body:    'Montserrat', sans-serif;

  --radius:    4px;
  --radius-lg: 8px;
  --transition: 0.3s ease;
  --glow-gold: 0 0 40px rgba(201,168,76,0.15);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold-light); }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}

h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.8rem); }
h4 { font-size: 1.1rem; }

p { margin-bottom: 1.2em; color: var(--text-secondary); }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 0.75rem;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.container--wide { max-width: 1400px; }
.container--narrow { max-width: 800px; }

section { padding: 6rem 0; }

/* ============================================================
   NAV
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1.25rem 0;
  transition: background var(--transition), backdrop-filter var(--transition);
}

.site-header.scrolled {
  background: rgba(10,10,11,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.site-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
  flex-shrink: 0;
}

.site-logo {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary) !important;
  white-space: nowrap;
  line-height: 1.1;
}

.site-logo span { color: var(--gold); }

.site-brand__yt {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.1rem;
  padding: 0.15rem 0.45rem 0.2rem;
  border-radius: 999px;
  border: 1px solid rgba(226, 85, 74, 0.35);
  background: rgba(226, 85, 74, 0.08);
  color: #e2554a;
  text-decoration: none;
  font-family: var(--font-body, "Montserrat", sans-serif);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.site-brand__yt svg {
  display: block;
  flex-shrink: 0;
}
.site-brand__yt:hover {
  background: rgba(226, 85, 74, 0.16);
  border-color: rgba(226, 85, 74, 0.55);
  color: #f0a8a0;
  transform: translateY(-1px);
}
.site-brand__yt-label {
  position: relative;
  top: 0.5px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

.site-nav a {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color var(--transition);
}

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

.nav-start {
  color: var(--art-accent, #9B5DE5) !important;
  font-weight: 600;
}
.nav-start:hover {
  color: #fff !important;
}
/* ── D.2010 mega menu (hover) ── */
.nav-has-hover { position: relative; }
.nav-mega {
  display: none;
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  background: var(--col-bg, #0a0614);
  border: 1px solid rgba(155,93,229,0.25);
  border-radius: 12px;
  padding: 1.5rem;
  z-index: 300;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(155,93,229,0.08);
}
.nav-mega::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 6px;
  background: rgba(155,93,229,0.25);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.nav-has-hover:hover .nav-mega { display: block; }
.nav-mega__eyebrow {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--art-accent, #9B5DE5);
  margin-bottom: 0.5rem;
}
.nav-mega__title {
  display: block;
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  line-height: 1.3;
  margin-bottom: 0.6rem;
}
.nav-mega__title:hover { color: var(--art-accent, #9B5DE5); }
.nav-mega__desc {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
  margin: 0 0 1rem;
}
.nav-mega__links {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 0.75rem;
}
.nav-mega__links a {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  padding: 0.25rem 0;
  transition: color 0.2s;
}
.nav-mega__links a:hover { color: #fff; }

/* ── Nav dropdown ── */
.nav-has-drop { position: relative; }
.nav-drop {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 160px;
  background: var(--col-bg, #0a0614);
  border: 1px solid rgba(155,93,229,0.2);
  border-radius: 8px;
  padding: 0.5rem 0;
  list-style: none;
  margin: 0;
  z-index: 200;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.nav-drop li a {
  display: block;
  padding: 0.55rem 1.1rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.nav-drop li a:hover {
  color: #fff;
  background: rgba(155,93,229,0.12);
}
.nav-has-drop.open .nav-drop { display: block; }

/* ── Help "?" glow button ── */
.nav-help-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--gold);
  color: #0a0614 !important;
  font-family: var(--font-display, inherit);
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: 0 0 6px 1px rgba(201,168,76,0.6), 0 0 16px 4px rgba(201,168,76,0.35);
  animation: nav-help-glow 2.2s ease-in-out infinite;
  transition: transform 0.2s;
}
.nav-help-btn:hover {
  color: #0a0614 !important;
  transform: scale(1.08);
}
.nav-help .nav-drop { left: auto; right: 0; }

/* ── Nested submenu ("Start Here" flying out from the "?" menu) ── */
.nav-sub-toggle {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.nav-sub-arrow {
  font-size: 0.9rem;
  color: rgba(196,158,245,0.4);
  transition: transform 0.2s, color 0.2s;
}
.nav-sub.open > .nav-sub-toggle .nav-sub-arrow,
.nav-sub-toggle:hover .nav-sub-arrow {
  color: #fff;
}
.nav-sub .nav-drop {
  top: 0;
  left: 100%;
  right: auto;
  margin-left: 0.4rem;
}
@keyframes nav-help-glow {
  0%, 100% {
    box-shadow: 0 0 6px 1px rgba(201,168,76,0.6), 0 0 16px 4px rgba(201,168,76,0.35);
  }
  50% {
    box-shadow: 0 0 10px 3px rgba(201,168,76,0.9), 0 0 26px 8px rgba(201,168,76,0.55);
  }
}

.nav-cta {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold) !important;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition) !important;
}

.nav-cta:hover {
  background: var(--gold) !important;
  color: var(--black) !important;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  transition: var(--transition);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--black);
}

.hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201,168,76,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 60% 80% at 80% 100%, rgba(139,26,26,0.08) 0%, transparent 60%),
    linear-gradient(180deg, var(--black) 0%, var(--dark) 100%);
}

.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}

.hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 8rem 2rem 4rem;
}

.hero__tagline {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.hero__tagline::before,
.hero__tagline::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
}

.hero__title {
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.05;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
}

.hero__title em {
  font-style: normal;
  color: var(--gold);
  display: block;
}

.hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto 3rem;
  font-weight: 300;
  line-height: 1.8;
}

.hero__scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scroll-pulse 2s ease-in-out infinite;
}

@keyframes scroll-pulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.2); }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.85rem 2rem;
  border-radius: var(--radius);
  transition: all var(--transition);
  cursor: pointer;
  border: none;
  white-space: nowrap;
}

.btn--primary {
  background: var(--gold);
  color: var(--black);
}

.btn--primary:hover {
  background: var(--gold-light);
  color: var(--black);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201,168,76,0.3);
}

.btn--outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.btn--outline:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}

.btn--ghost {
  background: transparent;
  color: var(--gold);
  padding-left: 0;
  padding-right: 0;
}

.btn--ghost::after {
  content: '→';
  transition: transform var(--transition);
}

.btn--ghost:hover { color: var(--gold-light); }
.btn--ghost:hover::after { transform: translateX(4px); }

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* ============================================================
   AUDIENCE PORTALS
   ============================================================ */
.portals {
  background: var(--dark);
  position: relative;
}

.portals::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.3;
}

.portals__header {
  text-align: center;
  margin-bottom: 4rem;
}

.portals__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.portal-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  overflow: hidden;
  transition: all var(--transition);
  cursor: pointer;
  text-decoration: none;
  display: block;
}

.portal-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--transition);
  border-radius: var(--radius-lg);
}

.portal-card--offworld::before {
  background: radial-gradient(ellipse at top left, rgba(139,26,26,0.2), transparent 70%);
}

.portal-card--taf::before {
  background: radial-gradient(ellipse at top left, rgba(26,92,107,0.2), transparent 70%);
}

.portal-card--bibx::before {
  background: radial-gradient(ellipse at top left, rgba(201,168,76,0.12), transparent 70%);
}

.portal-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.15);
}

.portal-card--offworld:hover { box-shadow: 0 20px 60px rgba(139,26,26,0.2); border-color: var(--crimson-light); }
.portal-card--taf:hover      { box-shadow: 0 20px 60px rgba(26,92,107,0.2); border-color: var(--teal-light); }
.portal-card--bibx:hover     { box-shadow: 0 20px 60px rgba(201,168,76,0.15); border-color: var(--gold); }

.portal-card:hover::before { opacity: 1; }

.portal-card__icon {
  font-size: 2rem;
  margin-bottom: 1.25rem;
  display: block;
}

.portal-card__label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  display: block;
}

.portal-card--offworld .portal-card__label { color: var(--crimson-light); }
.portal-card--taf .portal-card__label      { color: var(--teal-light); }
.portal-card--bibx .portal-card__label     { color: var(--gold); }

.portal-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.portal-card__desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.portal-card__arrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: gap var(--transition);
}

.portal-card--offworld .portal-card__arrow { color: var(--crimson-light); }
.portal-card--taf .portal-card__arrow      { color: var(--teal-light); }
.portal-card--bibx .portal-card__arrow     { color: var(--gold); }

.portal-card:hover .portal-card__arrow { gap: 0.85rem; }

/* ============================================================
   UNIVERSE SECTIONS (OFF-WORLD, TAF, BIBX previews)
   ============================================================ */
.universe-section {
  position: relative;
  overflow: hidden;
}

.universe-section--offworld { background: var(--black); }
.universe-section--taf      { background: var(--dark); }
.universe-section--bibx     { background: var(--dark-mid); }

.universe-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.universe-section__inner--reverse { direction: rtl; }
.universe-section__inner--reverse > * { direction: ltr; }

.universe-section__accent {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  opacity: 0.08;
}

.universe-section--offworld .universe-section__accent { background: var(--crimson); top: -100px; right: -100px; }
.universe-section--taf .universe-section__accent      { background: var(--teal); bottom: -100px; left: -100px; }
.universe-section--bibx .universe-section__accent     { background: var(--gold); top: -100px; right: -100px; }

.universe-section__label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: block;
}

.universe-section--offworld .universe-section__label { color: var(--crimson-light); }
.universe-section--taf .universe-section__label      { color: var(--teal-light); }
.universe-section--bibx .universe-section__label     { color: var(--gold); }

.universe-section__title {
  margin-bottom: 1rem;
}

.universe-section__body {
  margin-bottom: 2rem;
}

.universe-section__visual {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.universe-section__visual-placeholder {
  font-family: var(--font-display);
  font-size: 4rem;
  opacity: 0.08;
  letter-spacing: 0.1em;
}

/* ============================================================
   PODCAST SECTION
   ============================================================ */
.podcasts { background: var(--black); }

.podcast-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.podcast-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: all var(--transition);
}

.podcast-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: var(--glow-gold);
}

.podcast-card__number {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  color: var(--gold);
  opacity: 0.2;
  line-height: 1;
  margin-bottom: 1rem;
}

.podcast-card__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}

.podcast-card__desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
  padding: 5rem 0;
}

.cta-band__title { margin-bottom: 1rem; }
.cta-band__sub   { max-width: 500px; margin: 0 auto 2.5rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--black);
  border-top: 1px solid var(--border);
  padding: 4rem 0 2rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.site-footer__brand-name {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.site-footer__brand-name span { color: var(--gold); }

.site-footer__tagline {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.site-footer__col-title {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.site-footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.site-footer__links a {
  font-size: 0.85rem;
  color: var(--text-secondary);
  transition: color var(--transition);
}

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

.site-footer__bottom {
  border-top: 1px solid var(--border);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.site-footer__copy {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.site-footer__legal {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.site-footer__legal a {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.site-footer__legal a:hover { color: var(--text-secondary); }

/* ============================================================
   DIVIDERS
   ============================================================ */
.divider {
  width: 48px;
  height: 2px;
  background: var(--gold);
  margin: 1.5rem auto;
}

.divider--left { margin-left: 0; }


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .portals__grid           { grid-template-columns: 1fr; gap: 1rem; }
  .portals__grid           { grid-template-columns: 1fr 1fr; }
  .universe-section__inner { grid-template-columns: 1fr; gap: 3rem; }
  .universe-section__inner--reverse { direction: ltr; }
  .universe-section__visual { aspect-ratio: 16/9; }
  .podcast-grid            { grid-template-columns: 1fr 1fr; }
  .site-footer__grid       { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  section { padding: 4rem 0; }

  .site-nav { display: none; }
  .site-nav.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    background: var(--black);
    justify-content: center;
    align-items: center;
    gap: 2rem;
    z-index: 999;
  }
  .site-nav.open a { font-size: 1rem; }

  .nav-toggle { display: flex; z-index: 1001; position: relative; }

  .portals__grid { grid-template-columns: 1fr; }
  .podcast-grid  { grid-template-columns: 1fr; }

  .site-footer__grid   { grid-template-columns: 1fr; gap: 2rem; }
  .site-footer__bottom { flex-direction: column; text-align: center; }
  .site-footer__legal  { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 480px) {
  .container { padding: 0 1.25rem; }
  .btn-group { flex-direction: column; align-items: center; }
}

/* ============================================================
   BUTTON LARGE VARIANT
   ============================================================ */
.btn--lg {
  padding: 1rem 2.5rem;
  font-size: 0.8rem;
}

/* ============================================================
   FP-HERO  (new splash hero replaces old .hero)
   ============================================================ */
.fp-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0A0A0F;
}

.fp-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,  rgba(201,168,76,0.07) 0%, transparent 65%),
    radial-gradient(ellipse 50% 70% at 80% 100%, rgba(139,26,26,0.09) 0%, transparent 60%),
    linear-gradient(180deg, #0A0A0F 0%, #111118 100%);
}

.fp-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 100%);
}

.fp-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.fp-hero__content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 8rem 2rem 4rem;
}

.fp-hero__eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.fp-hero__eyebrow::before,
.fp-hero__eyebrow::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
}

.fp-hero__title {
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.05;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
}

.fp-hero__title em {
  font-style: normal;
  color: var(--gold);
  display: block;
}

.fp-hero__sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text-secondary);
  max-width: 580px;
  margin: 0 auto 2.5rem;
  font-weight: 300;
  line-height: 1.8;
}


.fp-hero__mute {
  position: absolute;
  bottom: 2.5rem;
  right: 2.5rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
  z-index: 4;
}

.fp-hero__mute:hover {
  background: rgba(255,255,255,0.1);
  color: var(--text-primary);
  border-color: var(--text-secondary);
}

.fp-hero__scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  z-index: 4;
}

.fp-hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scroll-pulse 2s ease-in-out infinite;
}

/* ============================================================
   FP-BOOK  (featured book section)
   ============================================================ */
.fp-book {
  position: relative;
  background: var(--dark);
  overflow: hidden;
}

.fp-book__accent {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: var(--gold);
  filter: blur(140px);
  opacity: 0.05;
  top: -150px;
  right: -150px;
  pointer-events: none;
}

.fp-book__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5rem;
  align-items: center;
}

.fp-book__cover-wrap {
  position: relative;
  flex-shrink: 0;
}

.fp-book__cover {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  transition: transform var(--transition);
}

.fp-book__cover:hover { transform: translateY(-6px) rotate(-1deg); }

.fp-book__cover img {
  width: 260px;
  height: auto;
  display: block;
}

.fp-book__cover-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(ellipse at center, rgba(201,168,76,0.2), transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.fp-book__title {
  margin-bottom: 0.25rem;
}

.fp-book__vol {
  font-size: 0.9rem;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.fp-book__blurb {
  border-left: 2px solid var(--gold);
  padding-left: 1.5rem;
  margin: 1.5rem 0 2rem;
  font-style: italic;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.8;
}

.fp-book__blurb cite {
  display: block;
  margin-top: 0.75rem;
  font-style: normal;
  font-size: 0.8rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.fp-book__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* ============================================================
   FP-MUSIC  (music teaser)
   ============================================================ */
.fp-music {
  position: relative;
  background: #050505;
  overflow: hidden;
  text-align: center;
}

.fp-music__bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 60% 80% at 50% 100%, rgba(155,93,229,0.08), transparent 70%),
    linear-gradient(180deg, #050505 0%, rgba(5,5,5,0.45) 45%, rgba(5,5,5,0.7) 100%),
    url('images/music/infinite-intelligence-bg.jpg');
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0 0, 0 0, center 18%;
  background-size: auto, auto, 45% auto;
  pointer-events: none;
  z-index: 0;
}

.fp-music > .container {
  position: relative;
  z-index: 1;
}

.fp-music__mark {
  position: absolute;
  left: 3%;
  top: 50%;
  transform: translateY(-50%);
  width: 22%;
  max-width: 220px;
  height: auto;
  object-fit: contain;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 900px) {
  .fp-music__mark { display: none; }
}

.fp-music__title {
  color: #9B5DE5;
  margin-bottom: 3rem;
}

.fp-music__sub {
  margin-top: 2rem;
}

.fp-music__player {
  background: rgba(155,93,229,0.05);
  border: 1px solid rgba(155,93,229,0.2);
  border-radius: var(--radius-lg);
  padding: 2rem 2.5rem;
  margin-top: 2.5rem;
  position: relative;
  overflow: hidden;
}

.fp-music__player-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 1.5rem;
  font-weight: 500;
}

.fp-music__player-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9B5DE5;
  box-shadow: 0 0 8px rgba(155,93,229,0.8);
  animation: music-pulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes music-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.8); }
}

.fp-music__waveform {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 60px;
  margin-bottom: 1.5rem;
  justify-content: center;
}

.fp-music__bar {
  display: block;
  width: 3px;
  background: linear-gradient(to top, rgba(155,93,229,0.8), rgba(155,93,229,0.2));
  border-radius: 2px;
  min-height: 4px;
  transition: height 0.3s ease;
}

.fp-music__player-cta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.85rem;
  margin-top: 2.5rem;
}

.fp-music__player-cta--lowered {
  margin-top: 9rem;
}

/* ============================================================
   FP-SERIES  (book series grid)
   ============================================================ */
.fp-series {
  position: relative;
  overflow: hidden;
  background: var(--black);
}

.fp-series__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.88) 55%, var(--black) 100%),
    url('images/series/bts-books-billboard.jpg') center center / cover no-repeat;
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

.fp-series > .container {
  position: relative;
  z-index: 1;
}

.fp-series__header {
  text-align: center;
  margin-bottom: 4rem;
}

.fp-series__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.fp-series-card {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: block;
  text-decoration: none;
  overflow: hidden;
  transition: all var(--transition);
  border: 1px solid transparent;
}

.fp-series-card:hover { transform: translateY(-6px); }

/* D.2010 — deep blue/black, gold accent */
.fp-series-card--d2010 {
  background: linear-gradient(135deg, #0d1117 0%, #111a28 100%);
  border-color: rgba(201,168,76,0.2);
}
.fp-series-card--d2010:hover { border-color: var(--gold); box-shadow: 0 20px 60px rgba(201,168,76,0.15); }
.fp-series-card--d2010 .fp-series-card__icon  { color: var(--gold); border-color: rgba(201,168,76,0.3); }
.fp-series-card--d2010 .fp-series-card__cta   { color: var(--gold); }

/* EGOTech — teal */
.fp-series-card--egotec {
  background: linear-gradient(135deg, #091418 0%, #0d2028 100%);
  border-color: rgba(26,143,163,0.2);
}
.fp-series-card--egotec:hover { border-color: var(--teal-light); box-shadow: 0 20px 60px rgba(26,92,107,0.2); }
.fp-series-card--egotec .fp-series-card__icon { color: var(--teal-light); border-color: rgba(26,143,163,0.3); }
.fp-series-card--egotec .fp-series-card__cta  { color: var(--teal-light); }

/* DreamCatcher — deep purple */
.fp-series-card--dreamcatcher {
  background: linear-gradient(135deg, #0e0a18 0%, #1a1028 100%);
  border-color: rgba(120,80,200,0.2);
}
.fp-series-card--dreamcatcher:hover { border-color: #9B5DE5; box-shadow: 0 20px 60px rgba(155,93,229,0.15); }
.fp-series-card--dreamcatcher .fp-series-card__icon { color: #9B5DE5; border-color: rgba(155,93,229,0.3); }
.fp-series-card--dreamcatcher .fp-series-card__cta  { color: #9B5DE5; }

/* Ellie Talks — warm coral/peach */
.fp-series-card--ellie-talks {
  background: linear-gradient(135deg, #1a0e0e 0%, #201410 100%);
  border-color: rgba(230,126,100,0.2);
}
.fp-series-card--ellie-talks:hover { border-color: #e67e64; box-shadow: 0 20px 60px rgba(230,126,100,0.15); }
.fp-series-card--ellie-talks .fp-series-card__icon { color: #e67e64; border-color: rgba(230,126,100,0.3); }
.fp-series-card--ellie-talks .fp-series-card__cta  { color: #e67e64; }

/* Melonnie & Nichole — rose/mauve */
.fp-series-card--melonnie {
  background: linear-gradient(135deg, #150f12 0%, #221018 100%);
  border-color: rgba(196,100,130,0.2);
}
.fp-series-card--melonnie:hover { border-color: #c46482; box-shadow: 0 20px 60px rgba(196,100,130,0.15); }
.fp-series-card--melonnie .fp-series-card__icon { color: #c46482; border-color: rgba(196,100,130,0.3); font-size: 1rem; }
.fp-series-card--melonnie .fp-series-card__cta  { color: #c46482; }

/* BIBX — gold/amber */
.fp-series-card--bibx {
  background: linear-gradient(135deg, #141008 0%, #201800 100%);
  border-color: rgba(201,168,76,0.2);
}
.fp-series-card--bibx:hover { border-color: var(--gold); box-shadow: 0 20px 60px rgba(201,168,76,0.15); }
.fp-series-card--bibx .fp-series-card__icon { color: var(--gold); border-color: rgba(201,168,76,0.3); }
.fp-series-card--bibx .fp-series-card__cta  { color: var(--gold); }

.fp-series-card__badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 2px;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.fp-series-card__badge--live {
  background: rgba(201,168,76,0.12);
  color: var(--gold);
}

.fp-series-card__badge--universe {
  background: rgba(155,93,229,0.15);
  color: #B47AFF;
}

.fp-series-card--featured {
  border-color: rgba(26,143,163,0.35);
  box-shadow: 0 0 30px rgba(26,143,163,0.08);
}
.fp-series-card--featured .fp-series-card__badge {
  background: rgba(26,143,163,0.18);
  color: var(--teal-light);
}

.fp-series-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.fp-series-card__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

.fp-series-card__desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

.fp-series-card__cta {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: letter-spacing var(--transition);
}

.fp-series-card:hover .fp-series-card__cta { letter-spacing: 0.15em; }

/* ============================================================
   FP-PODCAST  (latest podcast)
   ============================================================ */
.fp-podcast {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(10,10,11,0.88) 0%, rgba(10,10,11,0.94) 60%, var(--dark-mid) 100%),
    url('images/podcast/glitch-effect-bg.jpg') center center / cover no-repeat;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.fp-podcast__bleed {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  max-width: 46%;
  object-fit: cover;
  object-position: top center;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.5) 25%, rgba(0,0,0,0.95) 55%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.5) 25%, rgba(0,0,0,0.95) 55%, #000 100%);
  pointer-events: none;
  z-index: 0;
}

.fp-podcast__inner { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .fp-podcast__bleed { display: none; }
}

.fp-podcast__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5rem;
  align-items: center;
}

.fp-podcast__title { margin-bottom: 0.5rem; }

.fp-podcast__latest {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin: 2rem 0;
}

.fp-podcast__ep-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}

.fp-podcast__ep-title {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text-primary);
  letter-spacing: 0.03em;
  margin-bottom: 1rem;
}

.fp-podcast__ep-player {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.fp-podcast__play {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition);
}

.fp-podcast__play:hover { background: var(--gold-light); transform: scale(1.05); }

.fp-podcast__progress {
  flex: 1;
  height: 3px;
  background: var(--surface-high);
  border-radius: 2px;
  overflow: hidden;
}

.fp-podcast__progress-bar {
  width: 38%;
  height: 100%;
  background: var(--gold);
  border-radius: 2px;
}

.fp-podcast__duration {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Animated rings visual */
.fp-podcast__visual {
  position: relative;
  width: 200px;
  height: 200px;
  flex-shrink: 0;
}

.fp-podcast__visual-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--gold);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fp-podcast__visual-ring--1 { width: 200px; height: 200px; opacity: 0.08; animation: ring-pulse 3s ease-in-out infinite; }
.fp-podcast__visual-ring--2 { width: 150px; height: 150px; opacity: 0.12; animation: ring-pulse 3s ease-in-out infinite 0.6s; }
.fp-podcast__visual-ring--3 { width: 100px; height: 100px; opacity: 0.18; animation: ring-pulse 3s ease-in-out infinite 1.2s; }

@keyframes ring-pulse {
  0%, 100% { opacity: 0.05; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 0.2;  transform: translate(-50%, -50%) scale(1.05); }
}

.fp-podcast__visual-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
  box-shadow: 0 0 40px rgba(201,168,76,0.3);
}

/* ============================================================
   FP-EMAIL  (email capture)
   ============================================================ */
.fp-email {
  position: relative;
  background: var(--black);
  overflow: hidden;
  text-align: center;
}

.fp-email__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(201,168,76,0.06), transparent 70%);
  pointer-events: none;
}

.fp-email__title { margin-bottom: 0.75rem; }

.fp-email__sub {
  max-width: 520px;
  margin: 0 auto 2.5rem;
  font-size: 1rem;
}

.fp-email__form { max-width: 520px; margin: 0 auto; }

.fp-email__row {
  display: flex;
  gap: 0;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: border-color var(--transition);
}

.fp-email__row:focus-within { border-color: var(--gold); }

.fp-email__input {
  flex: 1;
  background: var(--surface);
  border: none;
  outline: none;
  padding: 0.9rem 1.25rem;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.9rem;
  min-width: 0;
}

.fp-email__input::placeholder { color: var(--text-muted); }

.fp-email__btn {
  border-radius: 0;
  border: none;
  flex-shrink: 0;
}

.fp-email__legal {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.75rem;
}

.fp-email__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 2.5rem;
}

.fp-email__badge {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 2rem;
  color: var(--text-muted);
}

/* ============================================================
   RESPONSIVE — new fp- sections
   ============================================================ */
@media (max-width: 1024px) {
  /* Vertical stack — one card per row, scrolls with the page */
  .fp-series__grid {
    display: grid;
    grid-template-columns: 1fr;
  }
  .fp-book__inner  { grid-template-columns: 1fr; gap: 3rem; }
  .fp-book__cover-wrap { display: flex; justify-content: center; }
  .fp-podcast__inner { grid-template-columns: 1fr; gap: 3rem; }
  .fp-podcast__visual { margin: 0 auto; }
}

@media (max-width: 768px) {
  .fp-hero__mute { bottom: 5rem; }
}

@media (max-width: 480px) {
  .fp-email__row  { flex-direction: column; border-radius: var(--radius); }
  .fp-email__btn  { border-radius: var(--radius); }
  .fp-book__cover img { width: 200px; }
}

/* ============================================================
   BOOKS HUB  (page-books.php)
   Scoped under .bh-* to keep tokens isolated.
   ============================================================ */

/* --- Hero --- */
.bh-hero {
  --bh-bg:     #1A1A2E;
  --bh-accent: #E8A838;

  position: relative;
  background: var(--bh-bg);
  padding: 7rem 0 5rem;
  overflow: hidden;
  text-align: center;
}

.bh-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(232,168,56,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 80% 100%, rgba(232,168,56,0.04) 0%, transparent 60%);
  pointer-events: none;
}

.bh-hero__content {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 2rem;
}

.bh-hero__title {
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  color: var(--text-primary);
  margin: 0.75rem 0 0;
}

.bh-hero__sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text-secondary);
  margin: 0 auto;
  max-width: 520px;
  line-height: 1.8;
}

/* Amber tint for eyebrow on this page */
.bh-hero .eyebrow  { color: var(--bh-accent, #E8A838); }
.bh-hero .divider  { background: var(--bh-accent, #E8A838); }

/* --- Grid section --- */
.bh-grid-section {
  background: var(--black);
  padding: 5rem 0 6rem;
}

.bh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

/* --- Base card --- */
.bh-card {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  display: block;
  text-decoration: none;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.bh-card:hover {
  transform: translateY(-6px) scale(1.01);
}

.bh-card__inner {
  position: relative;
  z-index: 1;
  padding: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.bh-card__glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.bh-card:hover .bh-card__glow { opacity: 1; }

/* --- Card top row (badge + tag) --- */
.bh-card__top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.bh-card__badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 2px;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  white-space: nowrap;
}

.bh-card__badge--live {
  background: rgba(52,199,89,0.15);
  color: #34c759;
}

.bh-card__tag {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --- Card icon --- */
.bh-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1.1rem;
  flex-shrink: 0;
  /* color set per card variant */
}

/* --- Card body --- */
.bh-card__title {
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.bh-card__line {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.bh-card__cta {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: letter-spacing 0.3s ease;
}

.bh-card:hover .bh-card__cta { letter-spacing: 0.18em; }

/* ──────────────────────────────────────────
   Per-card colour tokens
   ────────────────────────────────────────── */

/* CARD 1 — D.2010  navy / cyan */
.bh-card--d2010 {
  background: #0D1B2A;
}
.bh-card--d2010:hover {
  border-color: #00D4FF;
  box-shadow: 0 20px 60px rgba(0,212,255,0.12);
}
.bh-card--d2010 .bh-card__icon { color: #00D4FF; }
.bh-card--d2010 .bh-card__cta  { color: #00D4FF; }
.bh-card--d2010 .bh-card__glow {
  background: radial-gradient(ellipse at top left, rgba(0,212,255,0.1), transparent 65%);
}

/* CARD 2 — EGOTech  charcoal / amber */
.bh-card--egotec {
  background: #1A1A2E;
}
.bh-card--egotec:hover {
  border-color: #E8A838;
  box-shadow: 0 20px 60px rgba(232,168,56,0.12);
}
.bh-card--egotec .bh-card__icon { color: #E8A838; }
.bh-card--egotec .bh-card__cta  { color: #E8A838; }
.bh-card--egotec .bh-card__glow {
  background: radial-gradient(ellipse at top left, rgba(232,168,56,0.1), transparent 65%);
}

/* CARD 3 — DreamCatcher  burgundy / rose-purple */
.bh-card--dreamcatcher {
  background: #1C0A14;
}
.bh-card--dreamcatcher:hover {
  border-color: #C77DFF;
  box-shadow: 0 20px 60px rgba(199,125,255,0.12);
}
.bh-card--dreamcatcher .bh-card__icon { color: #C77DFF; }
.bh-card--dreamcatcher .bh-card__cta  { color: #C77DFF; }
.bh-card--dreamcatcher .bh-card__glow {
  background: radial-gradient(ellipse at top left, rgba(199,125,255,0.1), transparent 65%);
}

/* CARD 4 — Ellie Talks  warm coral */
.bh-card--ellie-talks {
  background: #1A0E0E;
}
.bh-card--ellie-talks:hover {
  border-color: #e67e64;
  box-shadow: 0 20px 60px rgba(230,126,100,0.12);
}
.bh-card--ellie-talks .bh-card__icon { color: #e67e64; }
.bh-card--ellie-talks .bh-card__cta  { color: #e67e64; }
.bh-card--ellie-talks .bh-card__glow {
  background: radial-gradient(ellipse at top left, rgba(230,126,100,0.1), transparent 65%);
}

/* CARD 5 — Melonnie & Nichole  dark grey / red */
.bh-card--melonnie {
  background: #1A1A1A;
}
.bh-card--melonnie:hover {
  border-color: #C77D7D;
  box-shadow: 0 20px 60px rgba(199,125,125,0.12);
}
.bh-card--melonnie .bh-card__icon { color: #C77D7D; font-size: 0.9rem; }
.bh-card--melonnie .bh-card__cta  { color: #C77D7D; }
.bh-card--melonnie .bh-card__glow {
  background: radial-gradient(ellipse at top left, rgba(199,125,125,0.1), transparent 65%);
}

/* CARD 6 — CEO's Playbook  slate / silver */
.bh-card--ceo {
  background: #2A2A2A;
}
.bh-card--ceo:hover {
  border-color: #CCCCCC;
  box-shadow: 0 20px 60px rgba(204,204,204,0.08);
}
.bh-card--ceo .bh-card__icon { color: #CCCCCC; }
.bh-card--ceo .bh-card__cta  { color: #CCCCCC; }
.bh-card--ceo .bh-card__glow {
  background: radial-gradient(ellipse at top left, rgba(204,204,204,0.06), transparent 65%);
}

/* --- Walk-In callout banner --- */
.bh-walkin {
  background: var(--dark-mid);
  border-top: 1px solid var(--border);
  padding: 2.5rem 0;
}

.bh-walkin__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 1.5rem 2rem;
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
  flex-wrap: wrap;
}

.bh-walkin__inner:hover {
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.03);
}

.bh-walkin__text {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.bh-walkin__label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.bh-walkin__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.05em;
}

.bh-walkin__desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.bh-walkin__arrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color var(--transition);
}

.bh-walkin__inner:hover .bh-walkin__arrow { color: var(--text-primary); }

/* --- Books Hub responsive --- */
@media (max-width: 768px) {
  .bh-hero { padding: 5rem 0 3.5rem; }
  .bh-grid { grid-template-columns: 1fr; }
  .bh-walkin__inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   D.2010 VOL 1 SALES PAGE  (page-d2010-vol1.php)
   Scoped under .d1v1-* tokens; inherits global vars.
   Color identity: --d1v1-bg #0D1B2A, --d1v1-accent #00D4FF
   ============================================================ */

.d1v1-page {
  --d1v1-bg:        #0D1B2A;
  --d1v1-accent:    #00D4FF;
  --d1v1-accent-dim: rgba(0,212,255,0.15);
}

/* Tint the global eyebrow + divider to cyan on this page */
.d1v1-eyebrow { color: var(--d1v1-accent) !important; }
.d1v1-divider { background: var(--d1v1-accent) !important; }

/* Buy button always uses cyan identity on this page */
.d1v1-btn-buy {
  background: var(--d1v1-accent) !important;
  color: #0D1B2A !important;
}
.d1v1-btn-buy:hover {
  background: #33ddff !important;
  color: #0D1B2A !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,212,255,0.3) !important;
}

/* ── 1. HERO ── */
.d1v1-hero {
  background: var(--d1v1-bg);
  padding: 8rem 0 5rem;
  position: relative;
  overflow: hidden;
}

.d1v1-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 100% 50%, rgba(0,212,255,0.07) 0%, transparent 65%),
    radial-gradient(ellipse 40% 50% at 0%   80%, rgba(0,212,255,0.04) 0%, transparent 60%);
  pointer-events: none;
}

.d1v1-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5rem;
  align-items: center;
}

/* Cover column */
.d1v1-hero__cover-col { flex-shrink: 0; }

.d1v1-hero__cover-wrap {
  position: relative;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.7));
  transition: transform 0.4s ease;
}

.d1v1-hero__cover-wrap:hover { transform: translateY(-6px) rotate(-1deg); }

/* Gradient placeholder shown until real cover is uploaded */
.d1v1-hero__cover-placeholder {
  width: 260px;
  height: 390px;
  background: linear-gradient(145deg, #112235 0%, #0a1929 40%, #061322 100%);
  border: 1px solid var(--d1v1-accent-dim);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
}

.d1v1-hero__cover-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(0,212,255,0.08) 0%, transparent 50%),
    repeating-linear-gradient(45deg, transparent, transparent 20px,
      rgba(0,212,255,0.02) 20px, rgba(0,212,255,0.02) 21px);
}

.d1v1-hero__cover-series {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--d1v1-accent);
  letter-spacing: 0.12em;
  position: relative;
  z-index: 1;
}

.d1v1-hero__cover-vol {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(0,212,255,0.6);
  position: relative;
  z-index: 1;
}

.d1v1-hero__cover-sub {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  position: relative;
  z-index: 1;
}

/* Text column */
.d1v1-hero__title {
  font-size: clamp(2.2rem, 5vw, 4rem);
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.d1v1-hero__title em {
  font-style: normal;
  color: var(--d1v1-accent);
  display: block;
}

.d1v1-hero__subtitle {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--d1v1-accent);
  opacity: 0.8;
  margin-bottom: 0.5rem;
}

.d1v1-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.d1v1-hero__legal-note {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 1rem;
}

/* ── 2. BLURB ── */
.d1v1-blurb {
  background: var(--dark);
  padding: 6rem 0;
}

.d1v1-blurb__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}

.d1v1-blurb__heading {
  margin-bottom: 0.5rem;
}

.d1v1-pullquote {
  background: var(--d1v1-bg);
  border-left: 3px solid var(--d1v1-accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 2.5rem 2rem;
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
}

.d1v1-pullquote p {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.6;
  margin: 0;
}

.d1v1-pullquote cite {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--d1v1-accent);
  font-style: normal;
}

/* ── 3. EXCERPT ── */
.d1v1-excerpt {
  background: var(--black);
  padding: 6rem 0;
}

.d1v1-excerpt__header {
  text-align: center;
  margin-bottom: 3rem;
}

.d1v1-excerpt__heading {
  margin-bottom: 0;
}

/* "Open book page" treatment */
.d1v1-excerpt__page {
  position: relative;
  background: #141824;
  border: 1px solid rgba(0,212,255,0.12);
  border-radius: var(--radius-lg);
  padding: 3.5rem;
  overflow: hidden;
}

.d1v1-excerpt__page-inner {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  line-height: 1.95;
  color: #d8d4cc;
  position: relative;
  z-index: 1;
}

/* Drop cap on first paragraph */
.d1v1-excerpt__dropcap-p::first-letter {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 700;
  color: var(--d1v1-accent);
  float: left;
  line-height: 0.8;
  margin: 0.1em 0.12em 0 0;
}

.d1v1-excerpt__page-inner p { margin-bottom: 1.4em; }
.d1v1-excerpt__page-inner p:last-child { margin-bottom: 0; }

.d1v1-excerpt__mission {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  color: var(--d1v1-accent) !important;
  letter-spacing: 0.04em;
  text-align: center;
  padding-top: 0.5rem;
}

/* Fade at bottom to entice continuation */
.d1v1-excerpt__page-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, #141824);
  pointer-events: none;
  z-index: 2;
}

.d1v1-excerpt__cta {
  text-align: center;
  margin-top: 2.5rem;
}

/* ── 4. TABS ── */
.d1v1-tabs-section {
  background: var(--dark-mid);
  padding: 6rem 0;
}

.d1v1-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 3rem;
}

.d1v1-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0.9rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
  white-space: nowrap;
}

.d1v1-tab:hover { color: var(--text-secondary); }

.d1v1-tab--active {
  color: var(--d1v1-accent);
  border-bottom-color: var(--d1v1-accent);
}

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

.d1v1-tab-panel__inner {
  max-width: 780px;
}

.d1v1-tab-panel__inner h3 {
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
}

.d1v1-tab-panel__inner--centered {
  max-width: 100%;
  display: flex;
  justify-content: center;
}

/* Character cards */
.d1v1-char-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}

.d1v1-char-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  transition: border-color var(--transition);
}

.d1v1-char-card:hover { border-color: var(--d1v1-accent-dim); }

.d1v1-char-card__initial {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--d1v1-bg);
  border: 1px solid var(--d1v1-accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--d1v1-accent);
  flex-shrink: 0;
}

.d1v1-char-card__name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}

.d1v1-char-card__role {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--d1v1-accent);
  opacity: 0.75;
  margin-bottom: 0.75rem;
}

.d1v1-char-card__bio {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

/* Authors note */
.d1v1-authors__note {
  font-size: 0.8rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  margin-top: 2rem;
}

/* Reviews empty state */
.d1v1-reviews-empty {
  text-align: center;
  padding: 4rem 2rem;
  max-width: 480px;
}

.d1v1-reviews-empty__stars {
  font-size: 1.8rem;
  color: var(--border);
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
  display: block;
}

.d1v1-reviews-empty h3 {
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

/* ── 5. SOUNDTRACK ── */
.d1v1-soundtrack {
  position: relative;
  background: #050505;
  padding: 5rem 0;
  text-align: center;
  overflow: hidden;
}

.d1v1-soundtrack__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 100%,
    rgba(155,93,229,0.1), transparent 65%);
  pointer-events: none;
}

.d1v1-soundtrack__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #9B5DE5;
  margin-bottom: 1rem;
}

.d1v1-soundtrack__title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.d1v1-soundtrack__sub {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0 auto 2.5rem;
}

.d1v1-soundtrack__btn {
  background: transparent;
  border: 1px solid #9B5DE5;
  color: #9B5DE5;
  padding: 0.85rem 2rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: all var(--transition);
  position: relative;
  z-index: 1;
}

.d1v1-soundtrack__btn:hover {
  background: #9B5DE5;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(155,93,229,0.3);
}

/* ── 5b. THE RECORD (origin / authenticity) ── */
.d1v1-record {
  position: relative;
  background: #0a0a0a;
  padding: 6rem 0;
  overflow: hidden;
}

.d1v1-record__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at 15% 15%, rgba(0,212,255,0.05), transparent 60%),
    radial-gradient(ellipse 55% 60% at 85% 85%, rgba(155,93,229,0.06), transparent 60%);
  pointer-events: none;
}

.d1v1-record__label {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #00D4FF;
  margin-bottom: 1rem;
}

.d1v1-record__title {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  color: var(--text-primary);
  margin-bottom: 0;
}

.d1v1-record__text {
  position: relative;
  z-index: 1;
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--text-secondary);
  margin: 0 0 1.5rem;
}

.d1v1-record__text--mystery {
  color: var(--text-primary);
  border-left: 2px solid #00D4FF;
  padding-left: 1.25rem;
  font-style: italic;
}

.d1v1-record__closing {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 1.1rem;
  color: #00D4FF;
  font-weight: 600;
  margin-top: 2.5rem;
}

.d1v1-record__quote {
  position: relative;
  z-index: 1;
  border-left: 2px solid #00D4FF;
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--text-primary);
}

.d1v1-record__quote cite {
  display: block;
  margin-top: 0.75rem;
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ── 6. FINAL CTA ── */
.d1v1-final-cta {
  background: var(--d1v1-bg);
  border-top: 1px solid rgba(0,212,255,0.1);
  padding: 6rem 0;
  text-align: center;
}

.d1v1-final-cta__quote {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  color: var(--text-primary);
  font-style: italic;
  max-width: 620px;
  margin: 0 auto 2.5rem;
  line-height: 1.6;
}

.d1v1-final-cta__legal {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2rem;
}

/* ── D.2010 Vol 1 responsive ── */
@media (max-width: 1024px) {
  .d1v1-hero__inner  { grid-template-columns: 1fr; gap: 3rem; }
  .d1v1-hero__cover-col { display: flex; justify-content: center; }
  .d1v1-blurb__inner { grid-template-columns: 1fr; gap: 3rem; }
  .d1v1-char-grid    { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .d1v1-hero         { padding: 6rem 0 3rem; }
  .d1v1-tabs         { gap: 0; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 1px; }
  .d1v1-tab          { padding: 0.75rem 1rem; font-size: 0.7rem; }
  .d1v1-excerpt__page { padding: 2rem; }
  .d1v1-hero__actions { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .d1v1-hero__cover-placeholder { width: 220px; height: 330px; }
  .d1v1-pullquote p { font-size: 1rem; }
}

/* ============================================================
   D.2010 SOUNDTRACK PAGE  (page-d2010-soundtrack.php)
   Scoped under .st-* tokens.
   Color identity: --st-bg #050505, --st-accent #9B5DE5
   ============================================================ */

.st-page {
  --st-bg:          #050505;
  --st-accent:      #9B5DE5;
  --st-accent-dim:  rgba(155,93,229,0.15);
  --st-accent-glow: rgba(155,93,229,0.25);
}

.st-eyebrow { color: var(--st-accent) !important; }
.st-divider  { background: var(--st-accent) !important; }
.st-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--st-accent);
  margin-bottom: 1rem;
}

/* Spotify green button */
.st-btn-spotify {
  background: #1DB954;
  color: #000 !important;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.st-btn-spotify:hover {
  background: #1ed760;
  color: #000 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(29,185,84,0.3);
}

/* YouTube red button */
.st-btn-youtube {
  background: #FF0000;
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.st-btn-youtube:hover {
  background: #cc0000;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,0,0,0.25);
}

/* Purple ghost — "Read the Book" and similar */
.st-btn-book {
  background: transparent;
  border: 1px solid var(--st-accent);
  color: var(--st-accent) !important;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 2rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: all var(--transition);
}
.st-btn-book:hover {
  background: var(--st-accent);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--st-accent-glow);
}

.st-btn__icon { flex-shrink: 0; }

/* ── 1. HERO ── */
.st-hero {
  background: var(--st-bg);
  padding: 8rem 0 5rem;
  position: relative;
  overflow: hidden;
}

.st-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 60% at 100% 50%, rgba(155,93,229,0.09) 0%, transparent 65%),
    radial-gradient(ellipse 40% 50% at 0%   80%, rgba(155,93,229,0.05) 0%, transparent 60%);
  pointer-events: none;
}

.st-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5rem;
  align-items: center;
}

/* Album art */
.st-hero__art-col { flex-shrink: 0; }

.st-hero__art-wrap {
  position: relative;
  filter: drop-shadow(0 24px 50px rgba(155,93,229,0.3));
  transition: transform 0.4s ease;
}
.st-hero__art-wrap:hover { transform: translateY(-6px) scale(1.02); }

.st-hero__art-placeholder {
  width: 280px;
  height: 280px;
  background: linear-gradient(145deg, #130a22 0%, #0d0618 50%, #070310 100%);
  border: 1px solid var(--st-accent-dim);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
}
.st-hero__art-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(155,93,229,0.1) 0%, transparent 55%),
    repeating-linear-gradient(45deg, transparent, transparent 18px,
      rgba(155,93,229,0.03) 18px, rgba(155,93,229,0.03) 19px);
}
.st-hero__art-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(155,93,229,0.6);
  position: relative;
  z-index: 1;
}
.st-hero__art-title {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--st-accent);
  letter-spacing: 0.1em;
  position: relative;
  z-index: 1;
}
.st-hero__art-sub {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  position: relative;
  z-index: 1;
}

/* Hero text */
.st-hero__title {
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  line-height: 1.1;
}
.st-hero__title em {
  font-style: normal;
  color: var(--st-accent);
}
.st-hero__meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}
.st-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.st-hero__legal {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 1rem;
}

/* ── 2. EMBEDDED PLAYER ── */
.st-player {
  background: #080808;
  padding: 4rem 0;
  border-top: 1px solid rgba(155,93,229,0.1);
  border-bottom: 1px solid rgba(155,93,229,0.1);
}
.st-player__wrap {
  background: rgba(155,93,229,0.04);
  border: 1px solid rgba(155,93,229,0.15);
  border-radius: 16px;
  padding: 1.5rem;
  overflow: hidden;
}

/* ── 3. CONCEPT ── */
.st-concept {
  background: var(--st-bg);
  padding: 6rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.st-concept__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 50% at 50% 50%,
    rgba(155,93,229,0.07), transparent 70%);
  pointer-events: none;
}
.st-concept__title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  position: relative;
}
.st-concept__title em {
  font-style: normal;
  color: var(--st-accent);
}
.st-concept__body {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 640px;
  margin: 1.5rem auto 2.5rem;
  line-height: 1.85;
  position: relative;
}

/* ── 4. TRACK LISTING ── */
.st-tracks {
  background: var(--dark);
  padding: 6rem 0;
}
.st-tracks__heading { margin-bottom: 0; }

.st-tracklist {
  list-style: none;
  margin: 2.5rem 0 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.st-track {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.85rem 1.5rem;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.st-track:last-child { border-bottom: none; }
.st-track:hover      { background: rgba(155,93,229,0.04); }

.st-track__num {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--st-accent);
  min-width: 2rem;
  opacity: 0.8;
}

.st-track__title {
  font-size: 0.95rem;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

/* Instrumental / Musical variant tracks — slightly dimmed */
.st-track--variant .st-track__title { color: var(--text-secondary); }
.st-track--variant .st-track__num   { opacity: 0.45; }

.st-track__variant-tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0.15rem 0.45rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}

.st-tracks__cta-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 1.5rem;
}

/* ── 5. WATCH / VIDEOS ── */
.st-watch {
  background: var(--dark-mid);
  padding: 6rem 0;
}
.st-watch__heading { margin-bottom: 0; }

.st-video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 3rem;
}

.st-video-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition);
}
.st-video-card:hover {
  border-color: rgba(155,93,229,0.3);
  transform: translateY(-4px);
}

/* Responsive 16:9 iframe wrapper */
.st-video-card__embed-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.st-video-card__embed-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.st-video-card__info {
  padding: 1.25rem 1.5rem;
}
.st-video-card__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
.st-video-card__desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* ── 6. FINAL CTA ── */
.st-final-cta {
  background: var(--st-bg);
  border-top: 1px solid rgba(155,93,229,0.12);
  padding: 6rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.st-final-cta__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 50%,
    rgba(155,93,229,0.07), transparent 70%);
  pointer-events: none;
}
.st-final-cta__quote {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 2rem);
  color: var(--text-primary);
  max-width: 600px;
  margin: 0 auto 2.5rem;
  line-height: 1.5;
  position: relative;
}
.st-final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  position: relative;
  margin-bottom: 2rem;
}
.st-final-cta__legal {
  font-size: 0.72rem;
  color: var(--text-muted);
  position: relative;
}

/* ── Soundtrack responsive ── */
@media (max-width: 1024px) {
  .st-hero__inner    { grid-template-columns: 1fr; gap: 3rem; }
  .st-hero__art-col  { display: flex; justify-content: center; }
}
@media (max-width: 768px) {
  .st-hero           { padding: 6rem 0 3rem; }
  .st-video-grid     { grid-template-columns: 1fr; }
  .st-hero__actions  { flex-direction: column; align-items: flex-start; }
  .st-final-cta__actions { flex-direction: column; align-items: center; }
}
@media (max-width: 480px) {
  .st-hero__art-placeholder { width: 240px; height: 240px; }
  .st-player__wrap  { padding: 0.75rem; }
}

/* ============================================================
   PODCASTS HUB  (page-podcasts.php)
   Scoped under .ph-* tokens.
   Identity: --ph-bg #0D1B2A, --ph-accent #00D4FF (cyan, D.2010 family)
   ============================================================ */

.ph-page {
  --ph-bg:           #0D1B2A;
  --ph-accent:       #00D4FF;
  --ph-accent-dim:   rgba(0,212,255,0.12);
  --ph-glitch-bg:    #1A1A2E;
  --ph-amber:        #E8A838;
  --ph-amber-dim:    rgba(232,168,56,0.12);
}

.ph-eyebrow  { color: var(--ph-accent) !important; }
.ph-divider  { background: var(--ph-accent) !important; }

/* Live / Coming Soon badges */
.ph-show-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border-radius: 2px;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  margin-bottom: 0.9rem;
}
.ph-show-badge--live {
  background: rgba(52,199,89,0.15);
  color: #34c759;
}

/* YouTube-red CTA */
.ph-btn-live {
  background: #FF0000 !important;
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.ph-btn-live:hover {
  background: #cc0000 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,0,0,0.25);
}

/* ── 1. HERO ── */
.ph-hero {
  background: var(--ph-bg);
  padding: 8rem 0 5rem;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.ph-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%,  rgba(0,212,255,0.07) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 80% 100%, rgba(0,212,255,0.04) 0%, transparent 60%);
  pointer-events: none;
}
.ph-hero__content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 2rem;
}
.ph-hero__title {
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  color: var(--text-primary);
  margin: 0.5rem 0 0;
}
.ph-hero__sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.8;
}

/* ── 2. ESO-LIFE ── */
.ph-esolife {
  background: var(--dark);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}
.ph-esolife__accent {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: var(--ph-accent);
  filter: blur(150px);
  opacity: 0.04;
  top: -120px;
  right: -120px;
  pointer-events: none;
}
.ph-esolife__header {
  max-width: 680px;
  margin-bottom: 3rem;
}
.ph-esolife__title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.ph-esolife__tagline {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 600px;
}

/* Responsive 16:9 video embed */
.ph-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}
.ph-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.ph-esolife__cta {
  margin-top: 2rem;
}

/* ── 3. THE GLITCH EFFECT ── */
.ph-glitch {
  background: var(--ph-glitch-bg);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(232,168,56,0.1);
}
.ph-glitch__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 0% 50%, rgba(232,168,56,0.05) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 100% 0%, rgba(232,168,56,0.03) 0%, transparent 60%);
  pointer-events: none;
}

/* Amber colour overrides scoped to this section */
.ph-glitch-eyebrow  { color: var(--ph-amber) !important; }
.ph-glitch-divider  { background: var(--ph-amber) !important; }

.ph-glitch__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
.ph-glitch__title {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

/* Notify email form */
.ph-glitch__notify {
  margin-top: 2rem;
  padding: 1.75rem;
  background: rgba(232,168,56,0.04);
  border: 1px solid rgba(232,168,56,0.15);
  border-radius: var(--radius-lg);
}
.ph-glitch__notify-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ph-amber);
  margin-bottom: 1rem;
}
.ph-notify-form__row {
  display: flex;
  gap: 0;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.1);
  transition: border-color var(--transition);
}
.ph-notify-form__row:focus-within { border-color: var(--ph-amber); }
.ph-notify-form__input {
  flex: 1;
  background: var(--surface);
  border: none;
  outline: none;
  padding: 0.85rem 1.1rem;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.9rem;
  min-width: 0;
}
.ph-notify-form__input::placeholder { color: var(--text-muted); }
.ph-notify-form__btn {
  background: var(--ph-amber);
  color: #000 !important;
  border: none;
  border-radius: 0;
  padding: 0.85rem 1.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition);
}
.ph-notify-form__btn:hover { background: #f0b840; }
.ph-notify-form__legal {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.6rem;
}

/* Show format steps */
.ph-glitch__format {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(232,168,56,0.12);
  border-radius: var(--radius-lg);
  padding: 2rem 2.25rem;
}
.ph-format-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ph-amber);
  margin-bottom: 1.75rem;
}
.ph-format-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.ph-format-step {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.ph-format-step__num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(232,168,56,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ph-amber);
  flex-shrink: 0;
}
.ph-format-step__title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}
.ph-format-step__desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* ── 4. BIBX CARD ── */
.ph-bibx {
  background: var(--dark-mid);
  padding: 4rem 0;
  border-top: 1px solid var(--border);
}
.ph-bibx__card {
  max-width: 600px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 2.5rem;
  transition: border-color var(--transition);
}
.ph-bibx__card:hover { border-color: rgba(255,255,255,0.14); }
.ph-bibx__title {
  font-size: 1.3rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  letter-spacing: 0.04em;
}
.ph-bibx__desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

/* ── 5. CROSS-LINK ── */
.ph-crosslink {
  background: var(--ph-bg);
  border-top: 1px solid var(--ph-accent-dim);
  padding: 5rem 0;
  text-align: center;
}
.ph-crosslink__text {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  color: var(--text-secondary);
  max-width: 500px;
  margin: 0 auto 2rem;
  line-height: 1.55;
}
.ph-crosslink__btn {
  border-color: var(--ph-accent-dim) !important;
  color: var(--ph-accent) !important;
  transition: border-color var(--transition), color var(--transition), transform var(--transition) !important;
}
.ph-crosslink__btn:hover {
  border-color: var(--ph-accent) !important;
  transform: translateY(-2px);
}
.ph-crosslink__legal {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2.5rem;
}

/* ── Podcasts Hub responsive ── */
@media (max-width: 1024px) {
  .ph-glitch__inner { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 768px) {
  .ph-hero           { padding: 5.5rem 0 3.5rem; }
  .ph-notify-form__row { flex-direction: column; border-radius: var(--radius); }
  .ph-notify-form__btn { border-radius: var(--radius); }
}

/* ============================================================
   ROTATING EARTH  (front-page.php — section 7)
   Canvas fills the div; JS controls the render.
   ============================================================ */
.fp-earth {
  position: relative;
  /* Height = how much of the earth peeks above the bottom edge.
     JS sizes the sphere radius to ~48vw so ~35% is visible here. */
  height: 360px;
  background: var(--black);
  overflow: hidden;
  /* Seamless join with the email capture section above */
  margin-top: -1px;
}

/* Gradient overlay so the earth fades into the black page above it */
.fp-earth::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 55%;
  background: linear-gradient(to bottom, var(--black) 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

.fp-earth__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 768px) {
  .fp-earth { height: 260px; }
}

@media (max-width: 480px) {
  .fp-earth { height: 200px; }
}

/* ============================================================
   UNIVERSE HUB  (page-universe.php)
   Scoped under .uv-* tokens.
   Identity: --uv-bg #0A2030 (dark teal), --uv-accent #E8E8FF (silver-white)
   ============================================================ */

.uv-page {
  --uv-bg:          #0A2030;
  --uv-bg-mid:      #0D2638;
  --uv-bg-lift:     #102d42;
  --uv-accent:      #E8E8FF;
  --uv-accent-dim:  rgba(232,232,255,0.10);
  --uv-accent-pale: rgba(232,232,255,0.05);
  --uv-gold:        #C9A84C;
  --uv-gold-dim:    rgba(201,168,76,0.12);
}

.uv-eyebrow  { color: var(--uv-accent) !important; }
.uv-divider  { background: var(--uv-accent) !important; }

/* ── 1.5 TRANSMISSION ── */
.uv-transmission {
  background: var(--uv-bg-mid);
  padding: 6rem 0;
  border-top: 1px solid var(--uv-accent-dim);
  border-bottom: 1px solid var(--uv-accent-dim);
}

.uv-transmission__intro {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 3rem;
  align-items: start;
  max-width: 820px;
  margin: 0 auto 4rem;
}

.uv-transmission__portrait {
  text-align: center;
}
.uv-transmission__portrait img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 2px solid var(--uv-accent-dim);
  box-shadow: 0 1.5rem 3rem rgba(0,0,0,0.45);
  display: block;
}
.uv-transmission__cap {
  display: block;
  margin-top: 1rem;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--uv-accent);
  opacity: 0.8;
}
.uv-transmission__heading {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  color: var(--text-primary);
  margin: 0.6rem 0 0;
}
.uv-transmission__subhead {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--uv-accent);
  margin: 0.4rem 0 1.2rem;
}

.uv-transmission__summary {
  max-width: 1120px;
  margin: 0 auto 3.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--uv-accent-dim);
}
.uv-transmission__summary > .uv-transmission__eso,
.uv-transmission__summary > p {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.uv-transmission__summary > p {
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  color: var(--text-secondary);
  line-height: 1.85;
  margin-bottom: 1.1rem;
}

.uv-transmission__body {
  max-width: 1120px;
  margin: 0 auto;
  columns: 2;
  column-width: 420px;
  column-gap: 5rem;
  column-rule: 1px solid var(--uv-accent-dim);
}
.uv-transmission__body p {
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  color: var(--text-secondary);
  line-height: 1.85;
  margin-bottom: 1.1rem;
}
.uv-transmission__body ul {
  margin: 0 0 1.1rem;
  padding-left: 1.4rem;
  color: var(--text-secondary);
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  line-height: 1.85;
}
.uv-transmission__body ul li { margin-bottom: 0.3rem; }
.uv-transmission__memo {
  font-size: 0.85rem !important;
  line-height: 1.9 !important;
  color: var(--text-secondary);
}
.uv-transmission__memo strong {
  color: var(--uv-accent);
  font-weight: 600;
}
.uv-transmission__lead-in {
  color: var(--text-primary) !important;
}
.uv-transmission__signoff {
  column-span: all;
  text-align: center;
  color: var(--text-primary) !important;
  font-style: italic;
  margin: 2.5rem 0 0 !important;
  padding-top: 2rem;
  border-top: 1px solid var(--uv-accent-dim);
}

.uv-transmission__endmark {
  column-span: all;
  text-align: center;
  margin-top: 1.5rem;
}
.uv-transmission__endmark img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  opacity: 0.7;
}

.uv-transmission__toe {
  max-width: 1120px;
  margin: 3rem auto 0;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.uv-transmission__toe-prev { margin-right: auto; }
.uv-transmission__toe-next { margin-left: auto; }

@media (max-width: 560px) {
  .uv-transmission__toe { flex-direction: column; }
  .uv-transmission__toe a { width: 100%; text-align: center; }
}

/* ── Chapter fold-out menu (left side) ───────────────────────── */
.uv-chaptermenu__tab {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 1201;
  background: var(--uv-bg-lift, #102d42);
  color: var(--uv-accent, #E8E8FF);
  border: 1px solid var(--uv-accent-dim, rgba(232,232,255,0.1));
  border-left: none;
  border-radius: 0 8px 8px 0;
  padding: 1rem 0.5rem;
  cursor: pointer;
  writing-mode: vertical-rl;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  transition: left 0.3s ease;
}
.uv-chaptermenu__tab[aria-expanded="true"] { left: 260px; }

.uv-chaptermenu {
  position: fixed;
  top: 0;
  left: -260px;
  width: 260px;
  height: 100vh;
  background: var(--uv-bg-lift, #102d42);
  border-right: 1px solid var(--uv-accent-dim, rgba(232,232,255,0.1));
  z-index: 1200;
  transition: left 0.3s ease;
  overflow-y: auto;
  padding-top: 5rem;
}
.uv-chaptermenu.is-open { left: 0; }

.uv-chaptermenu__head {
  padding: 0 1.5rem 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--uv-accent, #E8E8FF);
  opacity: 0.6;
  border-bottom: 1px solid var(--uv-accent-dim, rgba(232,232,255,0.1));
  margin-bottom: 0.5rem;
}
.uv-chaptermenu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.uv-chaptermenu__list a {
  display: block;
  padding: 0.9rem 1.5rem;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 1.05rem;
  border-left: 3px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.uv-chaptermenu__list a:hover {
  background: var(--uv-accent-pale, rgba(232,232,255,0.05));
}
.uv-chaptermenu__list a.is-active {
  color: var(--text-primary);
  border-left-color: var(--uv-gold, #C9A84C);
  background: var(--uv-accent-pale, rgba(232,232,255,0.05));
}

.uv-chaptermenu__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.9rem 1.5rem;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 1.05rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.uv-chaptermenu__toggle:hover {
  background: var(--uv-accent-pale, rgba(232,232,255,0.05));
}
.uv-chaptermenu__item--parent.is-open > .uv-chaptermenu__toggle {
  color: var(--text-primary);
  border-left-color: var(--uv-gold, #C9A84C);
  background: var(--uv-accent-pale, rgba(232,232,255,0.05));
}
.uv-chaptermenu__chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.6;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: 0.75rem;
}
.uv-chaptermenu__item--parent.is-open .uv-chaptermenu__chevron {
  transform: rotate(-135deg);
}

.uv-chaptermenu__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.uv-chaptermenu__item--parent.is-open .uv-chaptermenu__sublist {
  max-height: 30rem;
}
.uv-chaptermenu__sublist a {
  display: block;
  padding: 0.65rem 1.5rem 0.65rem 2.5rem;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 0.9rem;
  opacity: 0.85;
  border-left: 3px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.uv-chaptermenu__sublist a:hover {
  background: var(--uv-accent-pale, rgba(232,232,255,0.05));
}
.uv-chaptermenu__sublist a.is-active {
  color: var(--text-primary);
  opacity: 1;
  border-left-color: var(--uv-gold, #C9A84C);
  background: var(--uv-accent-pale, rgba(232,232,255,0.05));
}

.uv-chaptermenu__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1150;
}
.uv-chaptermenu__overlay.is-open { display: block; }

@media (max-width: 480px) {
  .uv-chaptermenu { width: 220px; left: -220px; }
  .uv-chaptermenu__tab[aria-expanded="true"] { left: 220px; }
}

.uv-transmission__eso {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 0 0 2rem;
}
.uv-transmission__eso-img {
  width: 220px;
  height: 220px;
  object-fit: contain;
  flex-shrink: 0;
}
.uv-transmission__section-head {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: var(--text-primary);
  margin: 0;
}

.uv-transmission__figure {
  break-inside: avoid;
  margin: 0.5rem 0 2rem;
  text-align: center;
}
.uv-transmission__figure img {
  max-width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--uv-accent-dim);
}
.uv-transmission__figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--uv-accent);
  opacity: 0.65;
}
.uv-transmission__figure--portrait {
  float: left;
  text-align: left;
  max-width: 150px;
  margin: 0.25rem 1.5rem 1rem 0;
}
.uv-transmission__figure--portrait img {
  width: 100%;
  max-width: 100%;
  border-radius: 4px;
  border: 2px solid var(--uv-accent-dim);
  box-shadow: 0 1rem 2rem rgba(0,0,0,0.4);
}
.uv-transmission__figure--portrait figcaption {
  text-align: left;
  margin-top: 0.75rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 560px) {
  .uv-transmission__figure--portrait {
    float: none;
    margin: 1.5rem auto;
    text-align: center;
  }
  .uv-transmission__figure--portrait figcaption { text-align: center; }
}

@media (max-width: 700px) {
  .uv-transmission { padding: 4rem 0; }
  .uv-transmission__intro { grid-template-columns: 1fr; text-align: center; gap: 1.75rem; margin-bottom: 2.5rem; }
  .uv-transmission__portrait { max-width: 220px; margin: 0 auto; }
  .uv-transmission__eso { flex-direction: column; text-align: center; gap: 1.25rem; margin-bottom: 1.5rem; }
  .uv-transmission__eso-img { width: 130px; height: 130px; }
  .uv-transmission__section-head { text-align: center; }
  .uv-transmission__body { columns: 1; column-gap: 0; column-rule: none; }
}

@media (max-width: 480px) {
  .uv-transmission { padding: 3rem 0; }
  .uv-transmission__portrait { max-width: 180px; }
  .uv-transmission__heading { font-size: 1.5rem; }
  .uv-transmission__eso-img { width: 96px; height: 96px; }
  .uv-transmission__body p { font-size: 0.95rem; line-height: 1.75; }
  .uv-transmission__figure--portrait { max-width: 120px; margin: 1.25rem auto; }
}

/* ── BTS CREW HUB & PROFILES (page-bts-crew*.php) ──────────────
   Reuses the .uv-page dark-teal/silver-white token scope. */

.crew-hero {
  background: var(--uv-bg-mid);
  padding: 7rem 0 4rem;
  text-align: center;
  border-bottom: 1px solid var(--uv-accent-dim);
}
.crew-hero__title {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--text-primary);
  margin: 0.6rem 0 1rem;
}
.crew-hero__body {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text-secondary);
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  line-height: 1.85;
  text-align: left;
}
.crew-hero__body p { margin-bottom: 1.1rem; }

.crew-roster {
  background: var(--uv-bg-mid);
  padding: 4rem 0 6rem;
}
.crew-roster__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.crew-roster-card {
  display: block;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  text-align: center;
  transition: border-color var(--transition), transform var(--transition);
}
.crew-roster-card:hover {
  border-color: var(--uv-accent-dim);
  transform: translateY(-4px);
}
.crew-roster-card__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--text-primary);
  margin: 0 0 0.35rem;
}
.crew-roster-card__role {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--uv-accent);
  opacity: 0.7;
}

.crew-profile {
  background: var(--uv-bg-mid);
  padding: 7rem 0 5rem;
}
.crew-profile__intro {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2.5rem;
  align-items: start;
  margin-bottom: 3rem;
}
.crew-profile__portrait { text-align: center; }
.crew-profile__portrait img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 2px solid var(--uv-accent-dim);
  box-shadow: 0 1.5rem 3rem rgba(0,0,0,0.45);
  display: block;
}
.crew-profile__cap {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--uv-accent);
  opacity: 0.7;
}
.crew-profile__name {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: var(--text-primary);
  margin: 0.5rem 0 0.75rem;
}
.crew-profile__assignment {
  color: var(--text-secondary);
  margin-bottom: 1rem;
}
.crew-profile__assignment strong { color: var(--uv-accent); }

.crew-profile__body {
  max-width: 800px;
  margin: 0 auto;
}
.crew-profile__body p {
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  color: var(--text-secondary);
  line-height: 1.85;
  margin-bottom: 1.1rem;
}
.crew-profile__body h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--text-primary);
  margin: 2.5rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--uv-accent-dim);
}
.crew-profile__body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.crew-profile__body ul {
  margin: 0 0 1.1rem;
  padding-left: 1.4rem;
  color: var(--text-secondary);
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  line-height: 1.85;
}
.crew-profile__body ul li { margin-bottom: 0.5rem; }
.crew-profile__credit {
  clear: both;
  text-align: right;
  font-size: 0.85rem;
  color: var(--uv-accent);
  opacity: 0.75;
  padding-top: 1.5rem;
  border-top: 1px solid var(--uv-accent-dim);
}
.crew-profile__tags {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--uv-accent-dim);
}
.crew-profile__tag {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--uv-accent-dim);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  background: var(--uv-accent-pale, rgba(232,232,255,0.05));
}
.crew-profile__figure {
  float: left;
  max-width: 200px;
  margin: 0.25rem 2rem 1rem 0;
}
.crew-profile__figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--uv-accent-dim);
}

.crew-profile__back {
  max-width: 800px;
  margin: 3rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--uv-accent-dim);
}

@media (max-width: 900px) {
  .crew-roster__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .crew-profile__intro { grid-template-columns: 1fr; text-align: center; }
  .crew-profile__portrait { max-width: 220px; margin: 0 auto; }
  .crew-profile__figure { float: none; margin: 0 auto 1.5rem; }
}

@media (max-width: 480px) {
  .crew-roster__grid { grid-template-columns: 1fr; }
}

/* ── 2. MISSION ── */
.uv-mission {
  background: var(--dark);
  padding: 7rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--uv-accent-dim);
}
.uv-mission__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(232,232,255,0.04) 0%, transparent 65%);
  pointer-events: none;
}
.uv-mission__statement {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 2.1rem);
  line-height: 1.5;
  color: var(--text-primary);
  max-width: 760px;
  margin: 1.2rem auto 0;
  letter-spacing: 0.01em;
}

/* ── 3. FOUR PILLARS ── */
.uv-pillars {
  background: var(--uv-bg-mid);
  padding: 7rem 0;
  border-top: 1px solid var(--uv-accent-dim);
}
.uv-pillars__header {
  text-align: center;
  margin-bottom: 4rem;
}
.uv-pillars__heading {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--text-primary);
}
.uv-pillars__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.uv-pillar-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
  color: inherit;
}
.uv-pillar-card:hover {
  border-color: var(--uv-accent-dim);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(232,232,255,0.05);
}
.uv-pillar-card__num {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--uv-accent);
  opacity: 0.6;
  text-transform: uppercase;
}
.uv-pillar-card__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--text-primary);
  letter-spacing: 0.03em;
  margin: 0;
}
.uv-pillar-card__body {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
  flex: 1;
}
.uv-pillar-card__cta {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--uv-accent);
  margin-top: 0.5rem;
}

/* ── 4. AMUECHI ── */
.uv-amuechi {
  background: var(--uv-bg);
  padding: 8rem 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--uv-accent-dim);
}
.uv-amuechi__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 100% 50%, rgba(232,232,255,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 0%   80%, rgba(201,168,76,0.03)  0%, transparent 60%);
  pointer-events: none;
}
.uv-amuechi__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 5rem;
  align-items: start;
}
.uv-amuechi__label-col {
  padding-top: 3rem;
}
.uv-amuechi__word {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: 0.35em;
  color: var(--uv-accent);
  opacity: 0.06;
  white-space: nowrap;
  user-select: none;
}
.uv-amuechi__heading {
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.uv-amuechi__text-col p {
  font-size: clamp(0.95rem, 1.8vw, 1.05rem);
  color: var(--text-secondary);
  line-height: 1.85;
  max-width: 660px;
  margin-bottom: 1.25rem;
}
.uv-amuechi__text-col p:last-of-type { margin-bottom: 0; }
.uv-amuechi__stat-row {
  display: flex;
  gap: 2.5rem;
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--uv-accent-dim);
}
.uv-amuechi__stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.uv-amuechi__stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  color: var(--uv-accent);
  line-height: 1;
}
.uv-amuechi__stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── 5. CAST ── */
.uv-cast {
  background: var(--dark-mid);
  padding: 7rem 0;
  border-top: 1px solid var(--border);
}
.uv-cast__header {
  text-align: center;
  margin-bottom: 4rem;
}
.uv-cast__heading {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--text-primary);
}
.uv-cast__sub {
  color: var(--text-secondary);
  margin-top: 0.75rem;
}
.uv-cast__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.uv-cast-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.uv-cast-card:hover {
  border-color: rgba(232,232,255,0.18);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.uv-cast-card--soon { opacity: 0.65; }
.uv-cast-card__initial {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--uv-accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--uv-accent);
  margin-bottom: 0.5rem;
  flex-shrink: 0;
  transition: background var(--transition), border-color var(--transition);
}
.uv-cast-card:hover .uv-cast-card__initial {
  background: var(--uv-accent-pale);
  border-color: rgba(232,232,255,0.3);
}
.uv-cast-card__name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  margin: 0;
}
.uv-cast-card__role {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* ── 6. OFF-WORLD TEASER ── */
.uv-offworld {
  background: var(--uv-bg);
  padding: 7rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--uv-accent-dim);
}
.uv-offworld__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(232,232,255,0.05) 0%, transparent 60%);
  pointer-events: none;
}
.uv-offworld__heading {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--text-primary);
  margin: 1rem 0;
}
.uv-offworld__body {
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  color: var(--text-secondary);
  max-width: 540px;
  margin: 0 auto 2.5rem;
  line-height: 1.75;
}
.uv-btn-offworld {
  background: var(--uv-accent) !important;
  color: var(--uv-bg) !important;
  font-weight: 700;
}
.uv-btn-offworld:hover {
  background: #fff !important;
  box-shadow: 0 10px 32px rgba(232,232,255,0.2);
}

/* ── 7. CROSS-LINK CLOSE ── */
.uv-close {
  background: var(--dark);
  border-top: 1px solid var(--border);
  padding: 5rem 0;
  text-align: center;
}
.uv-close__text {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  color: var(--text-secondary);
  max-width: 520px;
  margin: 0 auto 2.25rem;
  line-height: 1.5;
}
.uv-close__actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.uv-btn-outline {
  border-color: var(--uv-accent-dim) !important;
  color: var(--uv-accent) !important;
  transition: border-color var(--transition), transform var(--transition) !important;
}
.uv-btn-outline:hover {
  border-color: var(--uv-accent) !important;
  transform: translateY(-2px);
}
.uv-close__legal {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2.5rem;
}

/* ── Universe Hub responsive ── */
@media (max-width: 1200px) {
  .uv-pillars__grid { grid-template-columns: repeat(2, 1fr); }
  .uv-cast__grid    { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .uv-amuechi__inner { grid-template-columns: 1fr; gap: 0; }
  .uv-amuechi__label-col { display: none; }
}
@media (max-width: 768px) {
  .uv-pillars__grid { grid-template-columns: 1fr; }
  .uv-cast__grid    { grid-template-columns: repeat(2, 1fr); }
  .uv-amuechi__stat-row { flex-direction: column; gap: 1.5rem; }
}
@media (max-width: 480px) {
  .uv-cast__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   OFF-WORLD HUB  (page-off-world.php)
   Scoped under .ow-* tokens.
   Identity: --ow-bg #0D0505 (near-black), --ow-accent #8B1A1A (crimson)
   ============================================================ */

.ow-page {
  --ow-bg:          #0D0505;
  --ow-bg-mid:      #110808;
  --ow-bg-lift:     #160A0A;
  --ow-accent:      #8B1A1A;
  --ow-accent-dim:  rgba(139,26,26,0.18);
  --ow-accent-pale: rgba(139,26,26,0.06);
  --ow-accent-glow: rgba(139,26,26,0.30);
}

.ow-eyebrow { color: var(--ow-accent) !important; }
.ow-divider { background: var(--ow-accent) !important; }

.ow-label {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ow-accent);
  opacity: 0.7;
  margin-bottom: 1rem;
}

/* ── 1. HERO ── */
.ow-hero {
  background: var(--ow-bg);
  padding: 9rem 0 6rem;
  position: relative;
  overflow: hidden;
}
.ow-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 65% at 50% -5%, rgba(139,26,26,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 90%, rgba(139,26,26,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.ow-hero__content {
  position: relative;
  z-index: 1;
  max-width: 720px;
}
.ow-hero__title {
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 1.05;
  color: var(--text-primary);
  margin: 0 0 1.5rem;
}
.ow-hero__title em {
  color: var(--ow-accent);
  font-style: normal;
}
.ow-hero__sub {
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  color: var(--text-secondary);
  line-height: 1.85;
  max-width: 600px;
}

/* ── Series sections (shared) ── */
.ow-series {
  background: var(--ow-bg-mid);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--ow-accent-dim);
}
.ow-series--soren { background: var(--ow-bg-lift); }
.ow-series__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 0% 100%, rgba(139,26,26,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.ow-series__header {
  max-width: 640px;
  margin-bottom: 2.5rem;
}
.ow-series__title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.ow-series__desc {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 560px;
}

/* Book / volume card grid — auto-fit so missing volumes don't leave blank cells */
.ow-book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
  gap: 1.25rem;
  margin-bottom: 2.5rem;
  justify-content: start;
}

/* ── Book card ── */
.ow-book-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--ow-accent-dim);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.ow-book-card:hover {
  border-color: var(--ow-accent);
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 16px 40px var(--ow-accent-glow);
}

/* Glow overlay on hover (matches bh-card pattern) */
.ow-book-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--ow-accent-pale) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.ow-book-card:hover::after { opacity: 1; }

/* Placeholder cover art area */
.ow-book-card__art {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  background: linear-gradient(160deg, rgba(139,26,26,0.18) 0%, rgba(10,3,3,0.9) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
/* Series-specific art gradients */
.ow-series--vc   .ow-book-card__art { background: linear-gradient(160deg, rgba(139,26,26,0.25) 0%, rgba(10,3,3,0.95) 100%); }
.ow-series--soren .ow-book-card__art { background: linear-gradient(160deg, rgba(80,10,10,0.35) 0%, rgba(5,0,0,0.95)   100%); }
.ow-series--vsu  .ow-book-card__art { background: linear-gradient(160deg, rgba(150,60,60,0.22) 0%, rgba(8,2,2,0.95)   100%); }

/* Real cover image inside art area */
.ow-book-card__cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  position: absolute;
  inset: 0;
}
.ow-book-card--has-cover .ow-book-card__art {
  background: #000;
  aspect-ratio: 2 / 3;
}

.ow-book-card__art-num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--ow-accent);
  opacity: 0.18;
  line-height: 1;
  user-select: none;
}

/* Card body */
.ow-book-card__body {
  padding: 1.25rem 1.1rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.35rem;
}
.ow-book-card__num {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ow-accent);
  opacity: 0.55;
}
.ow-book-card__title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--text-primary);
  letter-spacing: 0.03em;
  line-height: 1.35;
}
.ow-book-card__desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0.15rem 0 0;
  flex: 1;
}
.ow-book-card__cta {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ow-accent);
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--ow-accent-dim);
  border-radius: var(--radius);
  align-self: flex-start;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.ow-book-card:hover .ow-book-card__cta {
  border-color: #D4AF37;
  background: rgba(212,175,55,0.08);
  color: #D4AF37;
  box-shadow: 0 0 12px rgba(212,175,55,0.15);
}

/* Series CTA button override */
.ow-btn-series {
  border-color: var(--ow-accent-dim) !important;
  color: var(--ow-accent) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, color 0.25s ease, background 0.25s ease !important;
}
.ow-btn-series:hover,
.ow-btn-series:focus-visible {
  border-color: #D4AF37 !important;
  color: #D4AF37 !important;
  background: rgba(212,175,55,0.08) !important;
  box-shadow: 0 0 16px rgba(212,175,55,0.18), 0 6px 20px rgba(212,175,55,0.10) !important;
  transform: translateY(-2px);
  outline: none;
}

/* ── Standalone sections (Walk-In, Alien, Ellie, Demon Protocol) ── */
.ow-standalone {
  background: var(--ow-bg);
  padding: 5.5rem 0;
  border-top: 1px solid var(--ow-accent-dim);
  position: relative;
  overflow: hidden;
}
.ow-standalone--walkin  { background: var(--ow-bg-mid); }
.ow-standalone--alien   { background: var(--ow-bg-lift); }
.ow-standalone--ellie   { background: var(--ow-bg-mid); }
.ow-standalone__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at 100% 50%, rgba(139,26,26,0.07) 0%, transparent 60%);
  pointer-events: none;
}
.ow-standalone__inner {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 3rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
/* Flip layout: badge left for walkin/ellie */
.ow-standalone--walkin .ow-standalone__inner,
.ow-standalone--ellie  .ow-standalone__inner {
  grid-template-columns: 240px 1fr;
}
.ow-standalone__title {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.ow-standalone__desc {
  font-size: clamp(0.95rem, 1.8vw, 1.05rem);
  color: var(--text-secondary);
  line-height: 1.8;
  max-width: 580px;
  margin-bottom: 0.5rem;
}
.ow-standalone__hint {
  font-size: 0.9rem;
  font-style: italic;
  color: #E8A0A0;
  opacity: 1;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}
.ow-standalone__text .btn { margin-top: 0.5rem; }

.ow-standalone__cover {
  justify-self: center;
  flex-shrink: 0;
  width: 240px;
}
.ow-standalone__cover-img {
  display: block;
  width: 240px;
  height: 360px;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 30px rgba(0,0,0,0.5), 0 0 20px rgba(139,26,26,0.12);
}

.ow-standalone__badge {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px solid rgba(212,175,55,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #D4AF37;
  background: rgba(212,175,55,0.06);
  opacity: 0.75;
  justify-self: center;
  line-height: 1.4;
}

/* ── 8. CLOSE ── */
.ow-close {
  background: var(--ow-bg);
  border-top: 1px solid var(--ow-accent-dim);
  padding: 5rem 0;
  text-align: center;
}
.ow-close__text {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0 auto 2.25rem;
  line-height: 1.5;
}
.ow-close__actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.ow-btn-outline {
  border-color: var(--ow-accent-dim) !important;
  color: var(--ow-accent) !important;
  transition: border-color 0.25s ease, transform 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease !important;
}
.ow-btn-outline:hover,
.ow-btn-outline:focus-visible {
  border-color: #D4AF37 !important;
  color: #D4AF37 !important;
  background: rgba(212,175,55,0.08) !important;
  box-shadow: 0 0 16px rgba(212,175,55,0.18) !important;
  transform: translateY(-2px);
  outline: none;
}
.ow-close__legal {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2.5rem;
}

/* Series subtitle (character names below the series title) */
.ow-series__subtitle {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ow-accent);
  opacity: 0.65;
  margin: 0 0 0.75rem;
}

/* Standalone subtitle (author attribution below title) */
.ow-standalone__subtitle {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ow-accent);
  opacity: 0.55;
  margin: 0 0 0.75rem;
}

/* Universe / bloodline connecting banners */
.ow-universe-banner {
  background: var(--ow-bg);
  border-top: 1px solid var(--ow-accent-dim);
  border-bottom: 1px solid var(--ow-accent-dim);
  padding: 1.5rem 0;
  text-align: center;
}
.ow-universe-banner--vsu {
  background: var(--dark);
}
.ow-universe-banner__text {
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ow-accent);
  opacity: 0.7;
  margin: 0;
}

/* VSU series — same auto-fit book grid */
.ow-series--vsu { background: var(--dark); }
.ow-book-grid--vsu {
  grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
}

/* ── Demon Protocol: single featured card (not a grid) ── */
.ow-featured-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--ow-accent-dim);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  max-width: 680px;
}
.ow-featured-card:hover {
  border-color: var(--ow-accent);
  box-shadow: 0 16px 48px var(--ow-accent-glow);
}
.ow-featured-card__art {
  background: linear-gradient(170deg, rgba(100,10,10,0.5) 0%, rgba(5,0,0,0.98) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  position: relative;
  overflow: hidden;
}
.ow-featured-card__art::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 18px,
    rgba(139,26,26,0.04) 18px,
    rgba(139,26,26,0.04) 19px
  );
}
.ow-featured-card__art-label {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ow-accent);
  opacity: 0.22;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  user-select: none;
  position: relative;
  z-index: 1;
}
.ow-featured-card__body {
  padding: 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
}
.ow-featured-card__tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ow-accent);
  opacity: 0.55;
}
.ow-featured-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.ow-featured-card__author {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ow-accent);
  opacity: 0.7;
  text-transform: uppercase;
}
.ow-featured-card__desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin: 0.4rem 0 0.25rem;
}
.ow-featured-card__cta {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ow-accent);
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--ow-accent-dim);
  border-radius: var(--radius);
  text-decoration: none;
  align-self: flex-start;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.ow-featured-card:hover .ow-featured-card__cta {
  border-color: #D4AF37;
  background: rgba(212,175,55,0.08);
  color: #D4AF37;
  box-shadow: 0 0 12px rgba(212,175,55,0.15);
}

/* ── OFF-World responsive ── */
@media (max-width: 1024px) {
  .ow-book-grid          { grid-template-columns: repeat(2, 1fr); }
  .ow-book-grid--vsu     { grid-template-columns: repeat(2, 1fr); }
  .ow-standalone__inner,
  .ow-standalone--walkin .ow-standalone__inner,
  .ow-standalone--ellie  .ow-standalone__inner {
    grid-template-columns: 1fr;
  }
  .ow-standalone__badge  { display: none; }
  .ow-featured-card      { grid-template-columns: 180px 1fr; }
}
@media (max-width: 768px) {
  .ow-hero               { padding: 6rem 0 4rem; }
  .ow-series             { padding: 4rem 0; }
  .ow-standalone         { padding: 4rem 0; }
  .ow-book-grid          { grid-template-columns: repeat(2, 1fr); }
  .ow-book-grid--vsu     { grid-template-columns: repeat(2, 1fr); }
  .ow-featured-card      { grid-template-columns: 1fr; }
  .ow-featured-card__art { min-height: 140px; }
  .ow-featured-card__art-label { writing-mode: horizontal-tb; transform: none; letter-spacing: 0.2em; }
}
@media (max-width: 480px) {
  .ow-book-grid          { grid-template-columns: 1fr; }
  .ow-book-grid--vsu     { grid-template-columns: 1fr; }
}

/* ============================================================
   WALK-IN — TITLE PAGE  (page-walk-in.php)
   Scoped under .wi-* tokens.
   Inherits OFF-World identity from .ow-page custom properties.
   ============================================================ */

/* .wi-page adds no new tokens — all colours from .ow-page */

/* ── 1. HERO ── */
.wi-hero {
  background: var(--ow-bg);
  padding: 9rem 0 6rem;
  position: relative;
  overflow: hidden;
  min-height: 85vh;
  display: flex;
  align-items: center;
}
.wi-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%, rgba(139,26,26,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 90% 110%, rgba(139,26,26,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.wi-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3.5rem;
  align-items: center;
}
.wi-hero__cover { position: relative; flex-shrink: 0; }
.wi-hero__cover-img {
  display: block;
  width: 280px;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0,0,0,0.6), 0 0 30px rgba(139,26,26,0.15);
}
.wi-hero__cover-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(ellipse 100% 100% at 50% 50%, rgba(139,26,26,0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.wi-hero__content {
  max-width: 560px;
}
.wi-hero__badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem;
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 2px;
  color: #D4AF37;
  background: rgba(212,175,55,0.06);
  margin-bottom: 1.5rem;
}
.wi-hero__title {
  font-size: clamp(4rem, 10vw, 7.5rem);
  line-height: 0.95;
  color: var(--text-primary);
  margin: 0 0 1.25rem;
  letter-spacing: -0.01em;
}
.wi-hero__subtitle {
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 540px;
  margin-bottom: 0.75rem;
}
.wi-hero__hint {
  font-size: 0.95rem;
  color: var(--ow-accent);
  opacity: 0.65;
  margin-bottom: 2rem;
  line-height: 1.5;
}

/* Hero notify form */
.wi-hero__form { max-width: 440px; }
.wi-hero__form-row {
  display: flex;
  gap: 0;
  border: 1px solid var(--ow-accent-dim);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition);
}
.wi-hero__form-row:focus-within { border-color: var(--ow-accent); }
.wi-hero__input {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: none;
  outline: none;
  padding: 0.85rem 1.1rem;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.9rem;
  min-width: 0;
}
.wi-hero__input::placeholder { color: var(--text-muted); }
.wi-hero__btn {
  background: var(--ow-accent);
  color: #fff;
  border: none;
  padding: 0.85rem 1.4rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.wi-hero__btn:hover,
.wi-hero__btn:focus-visible {
  background: #a82020;
  box-shadow: 0 0 14px rgba(168,32,32,0.35);
  outline: none;
}
.wi-hero__form-legal {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.6rem;
}

/* ── 2. PREMISE ── */
.wi-premise {
  background: var(--ow-bg-mid);
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--ow-accent-dim);
  text-align: center;
}
.wi-premise__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(139,26,26,0.06) 0%, transparent 65%);
  pointer-events: none;
}
.wi-premise__heading {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  color: var(--text-primary);
  margin: 0.75rem 0 0;
  position: relative;
  z-index: 1;
}
.wi-premise__body {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text-secondary);
  line-height: 1.85;
  margin: 2rem auto 0;
  max-width: 620px;
  position: relative;
  z-index: 1;
}
.wi-pullquote {
  margin: 3rem auto 0;
  max-width: 580px;
  padding: 2rem 2.5rem;
  background: var(--ow-accent-pale);
  border-left: 3px solid var(--ow-accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  text-align: left;
  position: relative;
  z-index: 1;
}
.wi-pullquote p {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.5vw, 1.55rem);
  color: var(--text-primary);
  line-height: 1.45;
  font-style: italic;
  margin-bottom: 0.75rem;
}
.wi-pullquote cite {
  font-size: 0.78rem;
  font-style: normal;
  color: var(--ow-accent);
  letter-spacing: 0.08em;
  opacity: 0.8;
}

/* ── 3. TRANSCRIPT ── */
.wi-transcript {
  background: var(--ow-bg);
  padding: 7rem 0;
  border-top: 1px solid var(--ow-accent-dim);
}
.wi-transcript__wrap {
  max-width: 680px;
  border: 1px solid var(--ow-accent-dim);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(0,0,0,0.45);
}
.wi-transcript__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.5rem;
  background: rgba(139,26,26,0.08);
  border-bottom: 1px solid var(--ow-accent-dim);
}
.wi-transcript__label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ow-accent);
  opacity: 0.7;
}
.wi-transcript__clock {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ow-accent);
  letter-spacing: 0.08em;
}
.wi-transcript__body {
  padding: 2rem 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
/* Narrative action lines */
.wi-transcript__action {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}
.wi-transcript__action--break { padding-top: 0.5rem; }
/* Spoken dialogue highlighted inline */
.wi-transcript__spoken {
  color: var(--text-secondary);
  font-style: italic;
}
/* Timestamp inline */
.wi-transcript__time {
  font-weight: 700;
  color: var(--ow-accent);
  opacity: 0.75;
}
/* Call log entries */
.wi-transcript__call {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.9rem 1rem;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid rgba(255,255,255,0.08);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.wi-transcript__call--host {
  border-left-color: var(--ow-accent);
  background: var(--ow-accent-pale);
}
.wi-transcript__caller {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.wi-transcript__caller--novie {
  color: var(--ow-accent);
  opacity: 0.85;
}
.wi-transcript__line {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.92rem;
  color: var(--text-primary);
  line-height: 1.6;
  margin: 0;
}
.wi-transcript__footer {
  padding: 0.75rem 1.5rem;
  border-top: 1px solid var(--ow-accent-dim);
  background: rgba(0,0,0,0.25);
}
.wi-transcript__note {
  font-size: 0.65rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  font-style: italic;
}

/* ── 4. HOSTS ── */
.wi-hosts {
  background: var(--ow-bg-lift);
  padding: 7rem 0;
  border-top: 1px solid var(--ow-accent-dim);
}
.wi-hosts__heading {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  color: var(--text-primary);
  margin: 0.75rem 0 0;
}
.wi-hosts__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}
.wi-host-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--ow-accent-dim);
  border-radius: var(--radius-lg);
  padding: 2.25rem 2rem;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.wi-host-card:hover {
  border-color: var(--ow-accent);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px var(--ow-accent-glow);
}
.wi-host-card__initial {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--ow-accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ow-accent);
  margin-bottom: 1.25rem;
  transition: background var(--transition), border-color var(--transition);
}
.wi-host-card:hover .wi-host-card__initial {
  background: var(--ow-accent-pale);
  border-color: var(--ow-accent);
}
.wi-host-card__name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  margin: 0 0 0.75rem;
}
.wi-host-card__divider {
  width: 32px;
  height: 2px;
  background: var(--ow-accent);
  opacity: 0.5;
  margin-bottom: 1rem;
}
.wi-host-card__bio {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.8;
  margin: 0;
}

/* ── 5. WHY THIS BOOK EXISTS ── */
.wi-why {
  background: var(--ow-bg-mid);
  padding: 7rem 0;
  border-top: 1px solid var(--ow-accent-dim);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.wi-why__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(139,26,26,0.05) 0%, transparent 65%);
  pointer-events: none;
}
.wi-why__heading {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  color: var(--text-primary);
  margin: 0.75rem 0 0;
  position: relative;
  z-index: 1;
}
.wi-why__body {
  font-size: clamp(1rem, 1.9vw, 1.15rem);
  color: var(--text-secondary);
  line-height: 1.85;
  max-width: 600px;
  margin: 2rem auto 2.5rem;
  position: relative;
  z-index: 1;
}

/* ── 6. FINAL CTA ── */
.wi-cta {
  background: var(--ow-bg);
  padding: 8rem 0 6rem;
  border-top: 1px solid var(--ow-accent-dim);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.wi-cta__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 65% at 50% 110%, rgba(139,26,26,0.10) 0%, transparent 60%);
  pointer-events: none;
}
.wi-cta__statement {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.6rem);
  color: var(--text-primary);
  line-height: 1.25;
  max-width: 560px;
  margin: 0 auto 1.5rem;
  position: relative;
  z-index: 1;
}
.wi-cta__heading {
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 1.75rem;
  position: relative;
  z-index: 1;
}
.wi-cta__form {
  max-width: 440px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.wi-cta__form-row {
  display: flex;
  gap: 0;
  border: 1px solid var(--ow-accent-dim);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition);
}
.wi-cta__form-row:focus-within { border-color: var(--ow-accent); }
.wi-cta__input {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: none;
  outline: none;
  padding: 0.9rem 1.1rem;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.9rem;
  min-width: 0;
}
.wi-cta__input::placeholder { color: var(--text-muted); }
.wi-cta__btn {
  background: var(--ow-accent);
  color: #fff;
  border: none;
  padding: 0.9rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.wi-cta__btn:hover,
.wi-cta__btn:focus-visible {
  background: #a82020;
  box-shadow: 0 0 14px rgba(168,32,32,0.35);
  outline: none;
}
.wi-cta__legal {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.6rem;
}
.wi-cta__back {
  margin-top: 3rem;
  position: relative;
  z-index: 1;
}
.wi-cta__copyright {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2.5rem;
  position: relative;
  z-index: 1;
}

/* ── Walk-In responsive ── */
@media (max-width: 768px) {
  .wi-hero         { padding: 7rem 0 4.5rem; min-height: auto; }
  .wi-hero__inner  { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .wi-hero__cover-img { width: 220px; }
  .wi-premise      { padding: 5rem 0; }
  .wi-transcript   { padding: 5rem 0; }
  .wi-hosts        { padding: 5rem 0; }
  .wi-hosts__grid  { grid-template-columns: 1fr; }
  .wi-why          { padding: 5rem 0; }
  .wi-cta          { padding: 5rem 0 4rem; }
  .wi-pullquote    { padding: 1.5rem 1.5rem; }
  .wi-transcript__body { padding: 1.5rem 1.25rem 1rem; }
}
@media (max-width: 480px) {
  .wi-hero__title  { font-size: clamp(3.2rem, 14vw, 5rem); }
  .wi-hero__cover-img { width: 180px; }
  .wi-hero__form-row { flex-direction: column; }
  .wi-hero__btn    { border-radius: var(--radius); }
  .wi-cta__form-row { flex-direction: column; }
  .wi-cta__btn     { border-radius: var(--radius); }
}


/* ════════════════════════════════════════════════════════════════════
   AL-* — ALIEN / PROTOCOL 0 TITLE PAGE
   Inherits OFF-World identity from .ow-page (--ow-* custom properties).
   All page-specific rules scoped to .al-* prefix.
   Page class: class="ow-page al-page"
════════════════════════════════════════════════════════════════════ */

/* ── 1. HERO ── */
.al-hero {
  background: var(--ow-bg);
  padding: 10rem 0 6.5rem;
  position: relative;
  overflow: hidden;
  min-height: 88vh;
  display: flex;
  align-items: center;
}
.al-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% -15%, rgba(139,26,26,0.16) 0%, transparent 58%),
    radial-gradient(ellipse 60% 45% at 15%  95%, rgba(139,26,26,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 92%  80%, rgba(139,26,26,0.05) 0%, transparent 60%);
  pointer-events: none;
}
.al-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3.5rem;
  align-items: center;
}
.al-hero__cover { position: relative; flex-shrink: 0; }
.al-hero__cover-img {
  display: block;
  width: 280px;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0,0,0,0.6), 0 0 30px rgba(139,26,26,0.15);
}
.al-hero__cover-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(ellipse 100% 100% at 50% 50%, rgba(139,26,26,0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.al-hero__content {
  max-width: 560px;
}
.al-hero__badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #D4AF37;
  border: 1px solid rgba(212,175,55,0.3);
  background: rgba(212,175,55,0.06);
  border-radius: 2px;
  padding: 0.35em 0.85em;
  margin-bottom: 2rem;
}
.al-hero__title {
  font-family: 'Cinzel', serif;
  font-size: clamp(4.5rem, 10vw, 8rem);
  font-weight: 700;
  line-height: 0.95;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}
.al-hero__protocol {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  font-weight: 400;
  color: var(--ow-accent);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 2rem;
}
.al-hero__tagline {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0 0 2.5rem;
  max-width: 520px;
  font-style: italic;
}
.al-hero__form { margin-top: 2.5rem; }
.al-hero__form-row {
  display: flex;
  gap: 0.75rem;
  max-width: 480px;
}
.al-hero__input {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 0.8rem 1.1rem;
  font-size: 0.95rem;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s;
}
.al-hero__input:focus { border-color: var(--ow-accent); }
.al-hero__input::placeholder { color: var(--text-muted); }
.al-hero__btn {
  background: var(--ow-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 0.8rem 1.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.al-hero__btn:hover,
.al-hero__btn:focus-visible {
  background: #a82020;
  box-shadow: 0 0 14px rgba(168,32,32,0.35);
  outline: none;
}
.al-hero__form-legal {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.75rem;
}

/* ── 2. PREMISE ── */
.al-premise {
  background: var(--ow-bg-mid);
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--ow-accent-dim);
}
.al-premise__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at 100% 0%, rgba(139,26,26,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.al-premise__heading {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--text-primary);
  margin: 1rem 0 1.5rem;
}
.al-premise__body {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}
.al-pullquote {
  border-left: 3px solid var(--ow-accent);
  margin: 3rem 0 0;
  padding: 1.5rem 2rem;
  background: var(--ow-accent-pale);
  border-radius: 0 var(--radius) var(--radius) 0;
  position: relative;
  z-index: 1;
}
.al-pullquote p {
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  color: var(--text-primary);
  font-style: italic;
  line-height: 1.65;
  margin: 0;
}

/* ── 3. UNRESOLVED QUESTION ── */
.al-question {
  background: var(--ow-bg);
  padding: 7rem 0;
  border-top: 1px solid var(--ow-accent-dim);
}
.al-question__header {
  max-width: 640px;
  margin-bottom: 3.5rem;
}
.al-question__heading {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--text-primary);
  margin: 1rem 0 1.5rem;
}
.al-fragments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.al-fragment {
  background: var(--ow-bg-mid);
  border: 1px solid var(--ow-accent-dim);
  border-top: 3px solid var(--ow-accent);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  position: relative;
}
.al-fragment__num {
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  color: var(--ow-accent);
  opacity: 0.35;
  line-height: 1;
  margin-bottom: 1.25rem;
}
.al-fragment__text {
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--text-secondary);
  margin: 0;
}

/* ── 4. CHARACTERS ── */
.al-characters {
  background: var(--ow-bg-mid);
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--ow-accent-dim);
}
.al-characters__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 50% at 0% 50%, rgba(139,26,26,0.05) 0%, transparent 65%);
  pointer-events: none;
}
.al-characters__heading {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--text-primary);
  margin: 1rem 0 1.5rem;
}
.al-characters__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
  position: relative;
  z-index: 1;
}
.al-char-card {
  background: var(--ow-bg-lift);
  border: 1px solid var(--ow-accent-dim);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
}
.al-char-card__initial {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--ow-accent-dim);
  border: 1px solid var(--ow-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  color: var(--ow-accent);
  margin-bottom: 1.25rem;
}
.al-char-card__name {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  color: var(--text-primary);
  margin: 0 0 0.6rem;
}
.al-char-card__divider {
  width: 2rem;
  height: 2px;
  background: var(--ow-accent);
  opacity: 0.5;
  margin-bottom: 1rem;
}
.al-char-card__bio {
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--text-secondary);
  margin: 0;
}

/* ── 5. UNIVERSE CONNECTION ── */
.al-universe {
  background: var(--ow-bg);
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--ow-accent-dim);
}
.al-universe__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(139,26,26,0.05) 0%, transparent 65%);
  pointer-events: none;
}
.al-universe__heading {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--text-primary);
  margin: 1rem 0 1.5rem;
}
.al-universe__body {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}
.al-universe .ow-btn-series { margin-top: 1rem; position: relative; z-index: 1; }

/* ── 6. FINAL CTA ── */
.al-cta {
  background: var(--ow-bg-mid);
  padding: 8rem 0 6rem;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--ow-accent-dim);
  text-align: center;
}
.al-cta__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 65% at 50% 110%, rgba(139,26,26,0.12) 0%, transparent 60%);
  pointer-events: none;
}
.al-cta__statement {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--text-primary);
  line-height: 1.4;
  margin: 0 0 1.5rem;
  position: relative;
  z-index: 1;
}
.al-cta__heading {
  font-family: 'Cinzel', serif;
  font-size: clamp(1rem, 2vw, 1.3rem);
  color: var(--text-secondary);
  font-weight: 400;
  margin: 0 0 2.5rem;
  position: relative;
  z-index: 1;
}
.al-cta__form {
  margin: 0 auto 2.5rem;
  max-width: 480px;
  position: relative;
  z-index: 1;
}
.al-cta__form-row {
  display: flex;
  gap: 0.75rem;
}
.al-cta__input {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 0.8rem 1.1rem;
  font-size: 0.95rem;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s;
}
.al-cta__input:focus { border-color: var(--ow-accent); }
.al-cta__input::placeholder { color: var(--text-muted); }
.al-cta__btn {
  background: var(--ow-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 0.8rem 1.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.al-cta__btn:hover,
.al-cta__btn:focus-visible {
  background: #a82020;
  box-shadow: 0 0 14px rgba(168,32,32,0.35);
  outline: none;
}
.al-cta__legal {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.75rem;
}
.al-cta__back {
  margin: 2rem auto 0;
  position: relative;
  z-index: 1;
}
.al-cta__copyright {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2.5rem;
  position: relative;
  z-index: 1;
}

/* ── Alien responsive ── */
@media (max-width: 1024px) {
  .al-fragments         { grid-template-columns: 1fr 1fr; }
  .al-characters__grid  { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .al-hero              { padding: 7rem 0 5rem; min-height: auto; }
  .al-hero__inner       { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .al-hero__cover-img   { width: 220px; }
  .al-premise           { padding: 5rem 0; }
  .al-question          { padding: 5rem 0; }
  .al-fragments         { grid-template-columns: 1fr; }
  .al-characters        { padding: 5rem 0; }
  .al-characters__grid  { grid-template-columns: 1fr; }
  .al-universe          { padding: 5rem 0; }
  .al-cta               { padding: 5rem 0 4rem; }
  .al-pullquote         { padding: 1.5rem 1.5rem; }
}
@media (max-width: 480px) {
  .al-hero__title       { font-size: clamp(3.5rem, 16vw, 5rem); }
  .al-hero__cover-img   { width: 180px; }
  .al-hero__form-row    { flex-direction: column; }
  .al-hero__btn         { border-radius: var(--radius); }
  .al-cta__form-row     { flex-direction: column; }
  .al-cta__btn          { border-radius: var(--radius); }
}


/* ════════════════════════════════════════════════════════════════════
   OC-* — OFF-WORLD CAST PAGE
   Character index grouped by series. Inherits .ow-page tokens.
   Page class: class="ow-page oc-page"
════════════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.oc-hero {
  background: var(--ow-bg);
  padding: 9rem 0 6rem;
  position: relative;
  overflow: hidden;
}
.oc-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 85% 65% at 50% -10%, rgba(139,26,26,0.14) 0%, transparent 58%),
    radial-gradient(ellipse 50% 40% at 90% 90%, rgba(139,26,26,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.oc-hero__content {
  position: relative;
  z-index: 1;
  max-width: 680px;
}
.oc-hero__badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #D4AF37;
  border: 1px solid rgba(212,175,55,0.3);
  background: rgba(212,175,55,0.06);
  border-radius: 2px;
  padding: 0.35em 0.85em;
  margin-bottom: 2rem;
}
.oc-hero__title {
  font-family: 'Cinzel', serif;
  font-size: clamp(3.5rem, 9vw, 6.5rem);
  font-weight: 700;
  line-height: 0.95;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
}
.oc-hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--text-secondary);
  line-height: 1.8;
  margin: 0 0 2rem;
  max-width: 540px;
}
.oc-hero__note {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.6;
}

/* ── Cast sections (shared) ── */
.oc-section {
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--ow-accent-dim);
}
.oc-section--dc  { background: var(--ow-bg-mid); }
.oc-section--soren { background: var(--ow-bg-lift); }
.oc-section--dp  { background: var(--ow-bg-mid); }
.oc-section--wia { background: var(--ow-bg); }
.oc-section__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 0% 100%, rgba(139,26,26,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.oc-section__header {
  max-width: 640px;
  margin-bottom: 2.5rem;
}
.oc-section__heading {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--text-primary);
  margin: 1rem 0 1rem;
}
.oc-section__note {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0 0 0.75rem;
  line-height: 1.6;
}

/* ── Character card grid ── */
.oc-cast-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}
.oc-cast-grid--narrow {
  grid-template-columns: repeat(2, 1fr);
  max-width: 720px;
}

/* ── Character card ── */
.oc-char-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--ow-accent-dim);
  border-radius: var(--radius-lg);
  padding: 2.25rem 1.75rem;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.oc-char-card:hover {
  border-color: var(--ow-accent);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px var(--ow-accent-glow);
}
.oc-char-card--wide {
  grid-column: 1 / -1;
  max-width: 480px;
}
.oc-char-card--xref {
  border-style: dashed;
  opacity: 0.8;
}
.oc-char-card__initial {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--ow-accent-dim);
  border: 1px solid var(--ow-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  color: var(--ow-accent);
  margin-bottom: 1rem;
}
.oc-char-card__name {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  color: var(--text-primary);
  margin: 0 0 0.4rem;
}
.oc-char-card__tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #D4AF37;
  margin-bottom: 0.6rem;
}
.oc-char-card__divider {
  width: 2rem;
  height: 2px;
  background: var(--ow-accent);
  opacity: 0.5;
  margin-bottom: 0.85rem;
}
.oc-char-card__bio {
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--text-secondary);
  margin: 0;
}
.oc-char-card__bio--small {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--text-muted);
}

/* ── D.2010 cross-link tile on cast page ── */
.oc-section--d2010 { background: var(--ow-bg-lift); }
.oc-d2010-tile {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2.5rem;
  align-items: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--ow-accent-dim);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  transition: border-color 0.3s ease;
}
.oc-d2010-tile:hover { border-color: var(--ow-accent); }
.oc-d2010-tile__title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  color: var(--text-primary);
  margin: 0.5rem 0 1rem;
}
.oc-d2010-tile__desc {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin: 0 0 1.5rem;
  max-width: 520px;
}
.oc-d2010-tile__cover-img {
  display: block;
  width: 140px;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}
@media (max-width: 768px) {
  .oc-d2010-tile { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .oc-d2010-tile__desc { max-width: none; }
  .oc-d2010-tile__cover-img { width: 120px; }
}

/* ── Hub hero cast link ── */
.ow-hero__cast-link { margin-top: 2rem; }

/* ── Closing ── */
.oc-close {
  background: var(--ow-bg-mid);
  border-top: 1px solid var(--ow-accent-dim);
  padding: 5rem 0;
  text-align: center;
}
.oc-close__text {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0 auto 2.25rem;
  line-height: 1.5;
}
.oc-close__actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.oc-close__legal {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2.5rem;
}

/* ── Cast responsive ── */
@media (max-width: 1024px) {
  .oc-cast-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .oc-hero         { padding: 7rem 0 4.5rem; }
  .oc-section      { padding: 5rem 0; }
  .oc-cast-grid    { grid-template-columns: 1fr; }
  .oc-cast-grid--narrow { max-width: none; }
  .oc-close        { padding: 4rem 0; }
}
@media (max-width: 480px) {
  .oc-hero__title  { font-size: clamp(2.8rem, 14vw, 4.5rem); }
  .oc-close__actions { flex-direction: column; align-items: center; }
}


/* ════════════════════════════════════════════════════════════════════
   ML-* — MELONNIE: THE DARK SIDE OF TRUTH (VSU TITLE PAGE)
   Inherits OFF-World identity from .ow-page (--ow-* custom properties).
   Slightly more gothic/romantic mood than demon-kind pages.
   Page class: class="ow-page ml-page"
════════════════════════════════════════════════════════════════════ */

/* ── 1. HERO — split layout: cover left, text right ── */
.ml-hero {
  background: var(--ow-bg);
  padding: 9rem 0 6rem;
  position: relative;
  overflow: hidden;
}
.ml-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% -10%, rgba(150,60,60,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 85% 95%, rgba(139,26,26,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.ml-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3.5rem;
  align-items: center;
}
.ml-hero__cover {
  position: relative;
  flex-shrink: 0;
}
.ml-hero__cover-img {
  display: block;
  width: 280px;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0,0,0,0.6), 0 0 30px rgba(139,26,26,0.15);
}
.ml-hero__cover-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(ellipse 100% 100% at 50% 50%, rgba(139,26,26,0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.ml-hero__content {
  max-width: 560px;
}
.ml-hero__badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #2ECC71;
  border: 1px solid rgba(46,204,113,0.3);
  background: rgba(46,204,113,0.08);
  border-radius: 2px;
  padding: 0.35em 0.85em;
  margin-bottom: 1.5rem;
}
.ml-hero__title {
  font-family: 'Cinzel', serif;
  font-size: clamp(3.5rem, 8vw, 6rem);
  font-weight: 700;
  line-height: 0.95;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}
.ml-hero__subtitle {
  font-family: 'Cinzel', serif;
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 400;
  color: var(--ow-accent);
  letter-spacing: 0.12em;
  margin: 0 0 0.4rem;
}
.ml-hero__byline {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0 0 2rem;
}
.ml-hero__tagline {
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  color: var(--text-secondary);
  line-height: 1.75;
  font-style: italic;
  margin: 0 0 2.5rem;
  max-width: 480px;
}
.ml-hero__cta {
  display: inline-block;
  margin-top: 0.5rem;
}

/* ── 2. PREMISE ── */
.ml-premise {
  background: var(--ow-bg-mid);
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--ow-accent-dim);
}
.ml-premise__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at 100% 0%, rgba(150,60,60,0.07) 0%, transparent 60%);
  pointer-events: none;
}
.ml-premise__heading {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--text-primary);
  margin: 1rem 0 1.5rem;
}
.ml-premise__body {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}
.ml-pullquote {
  border-left: 3px solid var(--ow-accent);
  margin: 3rem 0 0;
  padding: 1.5rem 2rem;
  background: var(--ow-accent-pale);
  border-radius: 0 var(--radius) var(--radius) 0;
  position: relative;
  z-index: 1;
}
.ml-pullquote p {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--text-primary);
  font-style: italic;
  line-height: 1.65;
  margin: 0;
}
.ml-pullquote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--ow-accent);
  font-style: normal;
  letter-spacing: 0.08em;
}

/* ── 3. WORLD / VSU MYTHOLOGY ── */
.ml-world {
  background: var(--ow-bg);
  padding: 6rem 0;
  border-top: 1px solid var(--ow-accent-dim);
}
.ml-world__heading {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--text-primary);
  margin: 1rem 0 1.5rem;
}
.ml-world__body {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--text-secondary);
}

/* ── 4. CAST ── */
.ml-cast {
  background: var(--ow-bg-mid);
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--ow-accent-dim);
}
.ml-cast__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 50% at 0% 50%, rgba(150,60,60,0.06) 0%, transparent 65%);
  pointer-events: none;
}
.ml-cast__heading {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--text-primary);
  margin: 1rem 0 1.5rem;
}
.ml-cast__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
  position: relative;
  z-index: 1;
}
.ml-char-card {
  background: var(--ow-bg-lift);
  border: 1px solid var(--ow-accent-dim);
  border-radius: var(--radius-lg);
  padding: 2.25rem 1.75rem;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.ml-char-card:hover {
  border-color: var(--ow-accent);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px var(--ow-accent-glow);
}
.ml-char-card--wide {
  grid-column: 1 / -1;
  max-width: 520px;
}
.ml-char-card__initial {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--ow-accent-dim);
  border: 1px solid var(--ow-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  color: var(--ow-accent);
  margin-bottom: 1rem;
}
.ml-char-card__name {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}
.ml-char-card__divider {
  width: 2rem;
  height: 2px;
  background: var(--ow-accent);
  opacity: 0.5;
  margin-bottom: 0.85rem;
}
.ml-char-card__bio {
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--text-secondary);
  margin: 0;
}

/* ── 5. WHAT COMES NEXT ── */
.ml-next {
  background: var(--ow-bg);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--ow-accent-dim);
}
.ml-next__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(150,60,60,0.05) 0%, transparent 65%);
  pointer-events: none;
}
.ml-next__heading {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--text-primary);
  margin: 1rem 0 1.5rem;
}
.ml-next__body {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}
.ml-next .ow-btn-series { position: relative; z-index: 1; }
.ml-next__links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* ── 6. FINAL CTA ── */
.ml-cta {
  background: var(--ow-bg-mid);
  padding: 8rem 0 6rem;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--ow-accent-dim);
  text-align: center;
}
.ml-cta__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 65% at 50% 110%, rgba(150,60,60,0.12) 0%, transparent 60%);
  pointer-events: none;
}
.ml-cta__statement {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--text-primary);
  line-height: 1.4;
  margin: 0 0 2.5rem;
  position: relative;
  z-index: 1;
}
.ml-cta__btn {
  position: relative;
  z-index: 1;
}
.ml-cta__back {
  margin: 2rem auto 0;
  position: relative;
  z-index: 1;
}
.ml-cta__copyright {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2.5rem;
  position: relative;
  z-index: 1;
}

/* ── Melonnie responsive ── */
@media (max-width: 768px) {
  .ml-hero           { padding: 7rem 0 5rem; }
  .ml-hero__inner    { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .ml-hero__cover-img { width: 220px; }
  .ml-hero__content  { max-width: none; }
  .ml-hero__tagline  { max-width: none; }
  .ml-premise        { padding: 5rem 0; }
  .ml-world          { padding: 5rem 0; }
  .ml-cast           { padding: 5rem 0; }
  .ml-cast__grid     { grid-template-columns: 1fr; }
  .ml-char-card--wide { max-width: none; }
  .ml-next           { padding: 5rem 0; }
  .ml-cta            { padding: 5rem 0 4rem; }
  .ml-pullquote      { padding: 1.5rem 1.5rem; }
  .divider--left     { margin-left: auto; margin-right: auto; }
}
@media (max-width: 480px) {
  .ml-hero__title    { font-size: clamp(2.8rem, 14vw, 4.5rem); }
  .ml-hero__cover-img { width: 180px; }
}


/* ════════════════════════════════════════════════════════════════════
   NC-* — NICHOLE: A KISS FOR THE DYING (VSU TITLE PAGE)
   Reuses ml-* base styles. nc-* covers Nichole-specific overrides:
   "In Development" badge, notify forms instead of purchase CTAs.
   Page class: class="ow-page ml-page nc-page"
════════════════════════════════════════════════════════════════════ */

/* ── Badge — "In Development" (gold, matching Alien pattern) ── */
.nc-hero__badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #D4AF37;
  border: 1px solid rgba(212,175,55,0.3);
  background: rgba(212,175,55,0.06);
  border-radius: 2px;
  padding: 0.35em 0.85em;
  margin-bottom: 1.5rem;
}

/* ── Hero notify form ── */
.nc-hero__form { margin-top: 2rem; max-width: 440px; }
.nc-hero__form-row {
  display: flex;
  gap: 0;
  border: 1px solid var(--ow-accent-dim);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.25s ease;
}
.nc-hero__form-row:focus-within { border-color: var(--ow-accent); }
.nc-hero__input {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: none;
  outline: none;
  padding: 0.85rem 1.1rem;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.9rem;
  min-width: 0;
}
.nc-hero__input::placeholder { color: var(--text-muted); }
.nc-hero__btn {
  background: var(--ow-accent);
  color: #fff;
  border: none;
  padding: 0.85rem 1.4rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.nc-hero__btn:hover,
.nc-hero__btn:focus-visible {
  background: #a82020;
  box-shadow: 0 0 14px rgba(168,32,32,0.35);
  outline: none;
}
.nc-hero__form-legal {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.6rem;
}

/* ── CTA section heading + form ── */
.nc-cta__heading {
  font-family: 'Cinzel', serif;
  font-size: clamp(1rem, 2vw, 1.3rem);
  color: var(--text-secondary);
  font-weight: 400;
  margin: 0 0 2rem;
  position: relative;
  z-index: 1;
}
.nc-cta__form {
  margin: 0 auto 2rem;
  max-width: 440px;
  position: relative;
  z-index: 1;
}
.nc-cta__form-row {
  display: flex;
  gap: 0;
  border: 1px solid var(--ow-accent-dim);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.25s ease;
}
.nc-cta__form-row:focus-within { border-color: var(--ow-accent); }
.nc-cta__input {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: none;
  outline: none;
  padding: 0.9rem 1.1rem;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.9rem;
  min-width: 0;
}
.nc-cta__input::placeholder { color: var(--text-muted); }
.nc-cta__btn {
  background: var(--ow-accent);
  color: #fff;
  border: none;
  padding: 0.9rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.nc-cta__btn:hover,
.nc-cta__btn:focus-visible {
  background: #a82020;
  box-shadow: 0 0 14px rgba(168,32,32,0.35);
  outline: none;
}
.nc-cta__legal {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.6rem;
}

/* ── Nichole responsive ── */
@media (max-width: 480px) {
  .nc-hero__form-row { flex-direction: column; }
  .nc-hero__btn      { border-radius: var(--radius); }
  .nc-cta__form-row  { flex-direction: column; }
  .nc-cta__btn       { border-radius: var(--radius); }
}


/* ════════════════════════════════════════════════════════════════════
   BX-* — BIBX / CEO'S PLAYBOOK PAGE
   Dark executive aesthetic: near-black bg, gold accent.
   Page class: class="bx-page"
════════════════════════════════════════════════════════════════════ */

.bx-page {
  --bx-bg:      #0A0A10;
  --bx-bg-mid:  #0E0E16;
  --bx-bg-lift: #13131D;
  --bx-accent:  #D4AF37;
  --bx-accent-dim: rgba(212,175,55,0.18);
  --bx-accent-pale: rgba(212,175,55,0.06);
}

.bx-eyebrow { color: var(--bx-accent) !important; }
.bx-divider { background: var(--bx-accent) !important; }

/* ── 1. HERO ── */
.bx-hero {
  background: var(--bx-bg);
  padding: 9rem 0 6rem;
  position: relative;
  overflow: hidden;
}
.bx-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% -10%, rgba(212,175,55,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 85% 95%, rgba(212,175,55,0.04) 0%, transparent 60%);
  pointer-events: none;
}
.bx-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3.5rem;
  align-items: center;
}
.bx-hero__cover { position: relative; flex-shrink: 0; }
.bx-hero__cover-img {
  display: block;
  width: 300px;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0,0,0,0.6), 0 0 30px rgba(212,175,55,0.10);
}
.bx-hero__cover-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(ellipse 100% 100% at 50% 50%, rgba(212,175,55,0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.bx-hero__content { max-width: 560px; }
.bx-hero__badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bx-accent);
  border: 1px solid var(--bx-accent-dim);
  background: var(--bx-accent-pale);
  border-radius: 2px;
  padding: 0.35em 0.85em;
  margin-bottom: 1.5rem;
}
.bx-hero__title {
  font-family: 'Cinzel', serif;
  font-size: clamp(2.8rem, 7vw, 5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}
.bx-hero__subtitle {
  font-family: 'Cinzel', serif;
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 400;
  color: var(--bx-accent);
  letter-spacing: 0.12em;
  margin: 0 0 0.4rem;
}
.bx-hero__byline {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0 0 2rem;
}
.bx-hero__tagline {
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  color: var(--text-secondary);
  line-height: 1.75;
  margin: 0 0 2.5rem;
  max-width: 480px;
}
.bx-hero__cta { display: inline-block; margin-top: 0.5rem; }

/* ── 2. WHAT BIBX COVERS ── */
.bx-covers {
  background: var(--bx-bg-mid);
  padding: 7rem 0;
  border-top: 1px solid var(--bx-accent-dim);
}
.bx-covers__heading {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--text-primary);
  margin: 1rem 0 1.5rem;
}
.bx-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.bx-pillar {
  background: var(--bx-bg-lift);
  border: 1px solid var(--bx-accent-dim);
  border-top: 3px solid var(--bx-accent);
  border-radius: var(--radius-lg);
  padding: 2.25rem 1.75rem;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.bx-pillar:hover {
  border-color: var(--bx-accent);
  transform: translateY(-4px);
}
.bx-pillar__num {
  font-family: 'Cinzel', serif;
  font-size: 1.8rem;
  color: var(--bx-accent);
  opacity: 0.35;
  line-height: 1;
  margin-bottom: 1rem;
}
.bx-pillar__title {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: var(--text-primary);
  margin: 0 0 0.6rem;
}
.bx-pillar__desc {
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--text-secondary);
  margin: 0;
}

/* ── 3. APPROACH ── */
.bx-approach {
  background: var(--bx-bg);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--bx-accent-dim);
}
.bx-approach__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(212,175,55,0.04) 0%, transparent 65%);
  pointer-events: none;
}
.bx-approach__heading {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--text-primary);
  margin: 1rem 0 1.5rem;
}
.bx-approach__body {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--text-secondary);
  position: relative;
  z-index: 1;
}

/* ── 4. CTA ── */
.bx-cta {
  background: var(--bx-bg-mid);
  padding: 8rem 0 6rem;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--bx-accent-dim);
  text-align: center;
}
.bx-cta__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 65% at 50% 110%, rgba(212,175,55,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.bx-cta__statement {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--text-primary);
  line-height: 1.4;
  margin: 0 0 2.5rem;
  position: relative;
  z-index: 1;
}
.bx-cta__btn { position: relative; z-index: 1; }
.bx-cta__links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  position: relative;
  z-index: 1;
}
.bx-btn-outline {
  border-color: var(--bx-accent-dim) !important;
  color: var(--bx-accent) !important;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease !important;
}
.bx-btn-outline:hover {
  border-color: var(--bx-accent) !important;
  background: var(--bx-accent-pale) !important;
  box-shadow: 0 0 16px rgba(212,175,55,0.18) !important;
}
.bx-cta__copyright {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2.5rem;
  position: relative;
  z-index: 1;
}

/* ── BIBX responsive ── */
@media (max-width: 1024px) {
  .bx-pillars { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .bx-hero        { padding: 7rem 0 5rem; }
  .bx-hero__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .bx-hero__cover-img { width: 240px; }
  .bx-hero__content { max-width: none; }
  .bx-covers      { padding: 5rem 0; }
  .bx-pillars     { grid-template-columns: 1fr; }
  .bx-approach    { padding: 5rem 0; }
  .bx-cta         { padding: 5rem 0 4rem; }
}
@media (max-width: 480px) {
  .bx-hero__title { font-size: clamp(2.2rem, 12vw, 3.5rem); }
  .bx-hero__cover-img { width: 200px; }
  .bx-cta__links  { flex-direction: column; align-items: center; }
}


/* ════════════════════════════════════════════════════════════════════
   ET-* — EGO-TEC SERIES HUB + RULE PAGES
   Teal/cyan accent on near-black — distinct from OFF-World crimson
   and BIBX gold. Page class: class="et-page"
════════════════════════════════════════════════════════════════════ */

.et-page {
  --et-bg:      #0A0D14;
  --et-bg-mid:  #0E1119;
  --et-bg-lift: #12151F;
  --et-accent:  #1A8FA3;
  --et-accent-dim: rgba(26,143,163,0.18);
  --et-accent-pale: rgba(26,143,163,0.06);
}

.et-eyebrow { color: var(--et-accent) !important; }
.et-divider { background: var(--et-accent) !important; }

/* ── Hero ── */
.et-hero {
  background: var(--et-bg);
  padding: 9rem 0 6rem;
  position: relative;
  overflow: hidden;
}
.et-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 65% at 50% -5%, rgba(26,143,163,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 90%, rgba(26,143,163,0.05) 0%, transparent 60%);
  pointer-events: none;
}
.et-hero__content {
  position: relative;
  z-index: 1;
  max-width: 680px;
}
.et-hero__badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--et-accent);
  border: 1px solid var(--et-accent-dim);
  background: var(--et-accent-pale);
  border-radius: 2px;
  padding: 0.35em 0.85em;
  margin-bottom: 1.5rem;
}
.et-hero__title {
  font-family: 'Cinzel', serif;
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}
.et-hero__subtitle {
  font-family: 'Cinzel', serif;
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 400;
  color: var(--et-accent);
  letter-spacing: 0.12em;
  margin: 0 0 2rem;
}
.et-hero__tagline {
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  color: var(--text-secondary);
  line-height: 1.85;
  max-width: 600px;
}

/* ── Split hero (for individual rule pages) ── */
.et-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3.5rem;
  align-items: center;
}
.et-hero__cover { position: relative; flex-shrink: 0; }
.et-hero__cover-img {
  display: block;
  width: 280px;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0,0,0,0.6), 0 0 30px rgba(26,143,163,0.10);
}
.et-hero__cover-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(ellipse 100% 100% at 50% 50%, rgba(26,143,163,0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.et-hero__byline {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0 0 2rem;
}

/* ── Rule cards grid ── */
.et-rules {
  background: var(--et-bg-mid);
  padding: 7rem 0;
  border-top: 1px solid var(--et-accent-dim);
}
.et-rules__heading {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--text-primary);
  margin: 1rem 0 1.5rem;
}
.et-rules__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
  gap: 1.25rem;
  margin-top: 2.5rem;
  justify-content: start;
}

/* ── Rule card ── */
.et-rule-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--et-accent-dim);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.et-rule-card:hover {
  border-color: var(--et-accent);
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 16px 40px rgba(26,143,163,0.15);
}
.et-rule-card__art {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  background: linear-gradient(160deg, rgba(26,143,163,0.18) 0%, rgba(10,13,20,0.95) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.et-rule-card__art-num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--et-accent);
  opacity: 0.18;
  line-height: 1;
  user-select: none;
}
.et-rule-card__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.et-rule-card--has-cover .et-rule-card__art {
  background: #000;
}
.et-rule-card__body {
  padding: 1.25rem 1.1rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.35rem;
}
.et-rule-card__num {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--et-accent);
  opacity: 0.55;
}
.et-rule-card__title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--text-primary);
  letter-spacing: 0.03em;
  line-height: 1.35;
}
.et-rule-card__desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0.15rem 0 0;
}
.et-rule-card__cta {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--et-accent);
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--et-accent-dim);
  border-radius: var(--radius);
  align-self: flex-start;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.et-rule-card:hover .et-rule-card__cta {
  border-color: var(--et-accent);
  background: var(--et-accent-pale);
  box-shadow: 0 0 12px rgba(26,143,163,0.15);
}

/* ── Source section ── */
.et-source {
  background: var(--et-bg);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--et-accent-dim);
}
.et-source__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(26,143,163,0.04) 0%, transparent 65%);
  pointer-events: none;
}
.et-source__heading {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--text-primary);
  margin: 1rem 0 1.5rem;
}
.et-source__body {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--text-secondary);
  position: relative;
  z-index: 1;
}
.et-btn-outline {
  border-color: var(--et-accent-dim) !important;
  color: var(--et-accent) !important;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease !important;
}
.et-btn-outline:hover {
  border-color: var(--et-accent) !important;
  background: var(--et-accent-pale) !important;
  box-shadow: 0 0 16px rgba(26,143,163,0.18) !important;
}

/* ── Close ── */
.et-close {
  background: var(--et-bg-mid);
  border-top: 1px solid var(--et-accent-dim);
  padding: 5rem 0;
  text-align: center;
}
.et-close__text {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0 auto 2.25rem;
  line-height: 1.5;
}
.et-close__actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.et-close__legal {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2.5rem;
}

/* ── Premise / content section (for rule pages) ── */
.et-premise {
  background: var(--et-bg-mid);
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--et-accent-dim);
}
.et-premise__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at 100% 0%, rgba(26,143,163,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.et-premise__heading {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--text-primary);
  margin: 1rem 0 1.5rem;
}
.et-premise__body {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}
.et-pullquote {
  border-left: 3px solid var(--et-accent);
  margin: 3rem 0 0;
  padding: 1.5rem 2rem;
  background: var(--et-accent-pale);
  border-radius: 0 var(--radius) var(--radius) 0;
  position: relative;
  z-index: 1;
}
.et-pullquote p {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--text-primary);
  font-style: italic;
  line-height: 1.65;
  margin: 0;
}

/* ── EGOTech responsive ── */
@media (max-width: 1024px) {
  .et-rules__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .et-hero        { padding: 7rem 0 4.5rem; }
  .et-hero__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .et-hero__cover-img { width: 220px; }
  .et-rules       { padding: 5rem 0; }
  .et-rules__grid { grid-template-columns: repeat(2, 1fr); }
  .et-source      { padding: 5rem 0; }
  .et-premise     { padding: 5rem 0; }
  .et-close       { padding: 4rem 0; }
  .et-pullquote   { padding: 1.5rem 1.5rem; }
}
@media (max-width: 480px) {
  .et-hero__title { font-size: clamp(2.5rem, 12vw, 4rem); }
  .et-hero__cover-img { width: 180px; }
  .et-rules__grid { grid-template-columns: 1fr; }
  .et-close__actions { flex-direction: column; align-items: center; }
}


/* ════════════════════════════════════════════════════════════════════
   MU-* — MUSIC HUB PAGE
   Dark purple/black aesthetic. Page class: class="mu-page"
   Published under Mitchell York LLC (music only).
════════════════════════════════════════════════════════════════════ */

.mu-page {
  --mu-bg:      #080510;
  --mu-bg-mid:  #0C0918;
  --mu-accent:  #9B5DE5;
  --mu-accent-dim: rgba(155,93,229,0.18);
  --mu-accent-pale: rgba(155,93,229,0.06);
}

.mu-eyebrow { color: var(--mu-accent) !important; }
.mu-divider { background: var(--mu-accent) !important; }

/* ── Hero ── */
.mu-hero {
  background: var(--mu-bg);
  padding: 9rem 0 6rem;
  position: relative;
  overflow: hidden;
}
.mu-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 65% at 50% -5%, rgba(155,93,229,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 90%, rgba(155,93,229,0.05) 0%, transparent 60%);
  pointer-events: none;
}
.mu-hero__content {
  position: relative;
  z-index: 1;
  max-width: 680px;
}
.mu-hero__badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mu-accent);
  border: 1px solid var(--mu-accent-dim);
  background: var(--mu-accent-pale);
  border-radius: 2px;
  padding: 0.35em 0.85em;
  margin-bottom: 1.5rem;
}
.mu-hero__title {
  font-family: 'Cinzel', serif;
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}
.mu-hero__subtitle {
  font-family: 'Cinzel', serif;
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 400;
  color: var(--mu-accent);
  letter-spacing: 0.12em;
  margin: 0 0 2rem;
}
.mu-hero__tagline {
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  color: var(--text-secondary);
  line-height: 1.85;
  max-width: 600px;
}

/* ── Albums section ── */
.mu-albums {
  background: var(--mu-bg-mid);
  padding: 7rem 0;
  border-top: 1px solid var(--mu-accent-dim);
}
.mu-albums__heading {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--text-primary);
  margin: 1rem 0 1.5rem;
}
.mu-albums__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}

/* ── Album card ── */
.mu-album-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--mu-accent-dim);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.mu-album-card:hover {
  border-color: var(--mu-accent);
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(155,93,229,0.15);
}
.mu-album-card--soon { opacity: 0.6; }
.mu-album-card--soon:hover { opacity: 0.75; }
.mu-album-card__art {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  background: linear-gradient(135deg, rgba(155,93,229,0.20) 0%, rgba(8,5,16,0.95) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mu-album-card__art--dc {
  background: linear-gradient(135deg, rgba(139,26,26,0.20) 0%, rgba(8,5,16,0.95) 100%);
}
.mu-album-card__art--alien {
  background: linear-gradient(135deg, rgba(26,143,163,0.20) 0%, rgba(8,5,16,0.95) 100%);
}
.mu-album-card__art--v2 {
  background: linear-gradient(135deg, rgba(155,93,229,0.12) 0%, rgba(8,5,16,0.95) 100%);
}
.mu-album-card__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.mu-album-card--has-cover .mu-album-card__art-label { display: none; }

.mu-album-card__art-label {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: rgba(255,255,255,0.12);
  text-align: center;
  line-height: 1.3;
  user-select: none;
}
.mu-album-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  z-index: 2;
}
.mu-album-card__badge--live {
  background: rgba(46,204,113,0.85);
  color: #000;
}
/* Coming Soon — diagonal ribbon across the top-right corner */
.mu-album-card__badge--soon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0.55rem 0;
  border-radius: 0;
  background: #FFD700;
  color: #1a1a1a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-align: center;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.mu-album-card__body {
  padding: 1.25rem 1.1rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.3rem;
}
.mu-album-card__title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.3;
}
.mu-album-card__sub {
  font-size: 0.75rem;
  color: var(--mu-accent);
  letter-spacing: 0.06em;
  margin: 0;
}
.mu-album-card__desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0.25rem 0 0;
}
.mu-album-card__body { min-height: 200px; }
.mu-album-card__actions { margin-top: auto; padding-top: 0.75rem; }
.mu-btn {
  font-size: 0.75rem !important;
  padding: 0.6rem 1.1rem !important;
}

/* ── Close ── */
.mu-close {
  background: var(--mu-bg);
  border-top: 1px solid var(--mu-accent-dim);
  padding: 5rem 0;
  text-align: center;
}
.mu-close__text {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0 auto 2.25rem;
  line-height: 1.5;
}
.mu-close__actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.mu-btn-outline {
  border-color: var(--mu-accent-dim) !important;
  color: var(--mu-accent) !important;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease !important;
}
.mu-btn-outline:hover {
  border-color: var(--mu-accent) !important;
  background: var(--mu-accent-pale) !important;
  box-shadow: 0 0 16px rgba(155,93,229,0.18) !important;
}
.mu-close__legal {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2.5rem;
}

/* ── Music responsive ── */
@media (max-width: 1024px) {
  .mu-albums__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .mu-hero    { padding: 7rem 0 4.5rem; }
  .mu-albums  { padding: 5rem 0; }
  .mu-close   { padding: 4rem 0; }
}
@media (max-width: 480px) {
  .mu-hero__title { font-size: clamp(2.5rem, 12vw, 4rem); }
  .mu-albums__grid { grid-template-columns: 1fr; }
  .mu-close__actions { flex-direction: column; align-items: center; }
}


/* ═══════════════════════════════════════════════
   THE DIRECTOR — front-page section + full page
   ═══════════════════════════════════════════════ */

/* ── Front-page teaser section ── */

.fp-director {
  position: relative;
  padding: 7rem 0 6rem;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.fp-director__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 20% 80%, rgba(155,93,229,0.08), transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 20%, rgba(43,140,255,0.06), transparent 55%);
  pointer-events: none;
}

.fp-director__bleed {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  max-width: 46%;
  object-fit: cover;
  object-position: left center;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.5) 25%, rgba(0,0,0,0.95) 55%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.5) 25%, rgba(0,0,0,0.95) 55%, #000 100%);
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 900px) {
  .fp-director__bleed { display: none; }
}

.fp-director__inner {
  position: relative;
  z-index: 1;
}

.fp-director__text {
  max-width: 38rem;
  margin-bottom: 3rem;
}

.fp-director__title {
  font-family: var(--font-display, 'Cinzel', Georgia, serif);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.fp-director__text p {
  color: rgba(255,255,255,0.65);
  line-height: 1.8;
  font-size: 1.05rem;
}

.fp-director__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.fp-director__card {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.fp-director__card:hover {
  border-color: rgba(155,93,229,0.4);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(155,93,229,0.1);
}

.fp-director__card-icon {
  font-size: 1.75rem;
  margin-bottom: 1rem;
  opacity: 0.7;
}

.fp-director__card h3 {
  font-family: var(--font-display, 'Cinzel', Georgia, serif);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: #f0f2f8;
}

.fp-director__card p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
  margin: 0;
}

.fp-director__cta {
  text-align: center;
}

@media (max-width: 900px) {
  .fp-director__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .fp-director__grid {
    grid-template-columns: 1fr;
  }
  .fp-director {
    padding: 5rem 0 4rem;
  }
}


/* ── The Director full page ── */

.dir-hero {
  padding: 10rem 0 5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.dir-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 30% 40%, rgba(155,93,229,0.1), transparent 60%),
    radial-gradient(ellipse 40% 50% at 70% 60%, rgba(43,140,255,0.08), transparent 55%),
    radial-gradient(ellipse 60% 40% at 50% 80%, rgba(168,24,48,0.06), transparent 55%);
  pointer-events: none;
}

.dir-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
}

.dir-hero__title {
  font-family: var(--font-display, 'Cinzel', Georgia, serif);
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 1.25rem;
  position: relative;
}

.dir-hero__sub {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: rgba(255,255,255,0.6);
  max-width: 36rem;
  margin: 0 auto;
  line-height: 1.8;
  position: relative;
}

.dir-section {
  padding: 5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.dir-section:last-of-type {
  border-bottom: none;
}

.dir-section--alt {
  background: rgba(255,255,255,0.015);
}

.dir-section__header {
  max-width: 36rem;
  margin-bottom: 3rem;
}

.dir-section__header h2 {
  font-family: var(--font-display, 'Cinzel', Georgia, serif);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}

.dir-section__header p {
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
}

/* Writer cards */
.dir-writers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.dir-writer-card {
  padding: 2.5rem 2rem;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  transition: border-color 0.3s;
}

.dir-writer-card:hover {
  border-color: rgba(155,93,229,0.3);
}

.dir-writer-card__name {
  font-family: var(--font-display, 'Cinzel', Georgia, serif);
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.dir-writer-card__role {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(155,93,229,0.8);
  margin-bottom: 1rem;
  font-weight: 600;
}

.dir-writer-card p {
  color: rgba(255,255,255,0.55);
  font-size: 0.95rem;
  line-height: 1.7;
}

.dir-writer-card__works {
  margin-top: 1.25rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.4);
}

.dir-writer-card__works strong {
  color: rgba(255,255,255,0.6);
}

/* Series map */
.dir-series-map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.dir-series-item {
  padding: 2rem 1.75rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 3px solid rgba(155,93,229,0.5);
  border-radius: 0 14px 14px 0;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s, transform 0.3s;
}

.dir-series-item:hover {
  transform: translateY(-3px);
  border-left-color: #9B5DE5;
}

.dir-series-item h3 {
  font-family: var(--font-display, 'Cinzel', Georgia, serif);
  font-size: 1.1rem;
  margin: 0 0 0.35rem;
  color: #f0f2f8;
}

.dir-series-item__genre {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.dir-series-item p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
  margin: 0;
}

.dir-series-item--d2010     { border-left-color: rgba(43,140,255,0.6); }
.dir-series-item--d2010:hover { border-left-color: #2B8CFF; }
.dir-series-item--d2010 .dir-series-item__genre { color: #2B8CFF; }

.dir-series-item--ofw       { border-left-color: rgba(168,24,48,0.6); }
.dir-series-item--ofw:hover { border-left-color: #A81830; }
.dir-series-item--ofw .dir-series-item__genre { color: #e85a6f; }

.dir-series-item--ego       { border-left-color: rgba(0,200,150,0.5); }
.dir-series-item--ego:hover { border-left-color: #00C896; }
.dir-series-item--ego .dir-series-item__genre { color: #00C896; }

.dir-series-item--ellie     { border-left-color: rgba(230,126,100,0.5); }
.dir-series-item--ellie:hover { border-left-color: #e67e64; }
.dir-series-item--ellie .dir-series-item__genre { color: #e67e64; }

.dir-series-item--bibx      { border-left-color: rgba(212,169,74,0.5); }
.dir-series-item--bibx:hover { border-left-color: #D4A94A; }
.dir-series-item--bibx .dir-series-item__genre { color: #D4A94A; }

/* Character roster */
.dir-characters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
}

.dir-char {
  padding: 1.75rem 1.5rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  text-align: center;
  transition: border-color 0.3s, transform 0.3s;
}

.dir-char:hover {
  border-color: rgba(168,24,48,0.4);
  transform: translateY(-3px);
}

.dir-char__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.dir-char__name {
  font-family: var(--font-display, 'Cinzel', Georgia, serif);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: #f0f2f8;
}

.dir-char__from {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
}

/* Events timeline */
.dir-events {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 42rem;
}

.dir-event {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 1.5rem;
  padding: 1.75rem 2rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  align-items: center;
  transition: border-color 0.3s;
}

.dir-event:hover {
  border-color: rgba(212,169,74,0.3);
}

.dir-event__when {
  text-align: center;
}

.dir-event__label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(212,169,74,0.8);
  font-weight: 600;
}

.dir-event__date {
  font-family: var(--font-display, 'Cinzel', Georgia, serif);
  font-size: 1.5rem;
  color: #f0f2f8;
  line-height: 1.2;
}

.dir-event h3 {
  font-size: 1.05rem;
  margin: 0 0 0.25rem;
  color: #f0f2f8;
}

.dir-event p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.5);
  margin: 0;
  line-height: 1.5;
}

.dir-event__tag {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}

/* Reading-order guide */
.dir-reading {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 36rem;
  counter-reset: reading-step;
}

.dir-reading__step {
  display: flex;
  gap: 1.25rem;
  align-items: baseline;
  padding: 1.25rem 1.5rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  counter-increment: reading-step;
}

.dir-reading__step::before {
  content: counter(reading-step);
  font-family: var(--font-display, 'Cinzel', Georgia, serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(155,93,229,0.5);
  flex-shrink: 0;
  min-width: 2rem;
  text-align: center;
}

.dir-reading__step h4 {
  font-size: 1rem;
  margin: 0 0 0.2rem;
  color: #f0f2f8;
}

.dir-reading__step p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .dir-event {
    grid-template-columns: 1fr;
  }
  .dir-event__when {
    text-align: left;
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
  }
}


/* ════════════════════════════════════════════════════════════════════
   DC-* — D.2010 CAST PAGE
   Inherits et-page tokens. dc-* for cast-specific additions.
   Page class: class="et-page dc-page"
════════════════════════════════════════════════════════════════════ */

/* ── Timeline ── */
.dc-timeline {
  background: var(--et-bg-mid);
  padding: 6rem 0;
  border-top: 1px solid var(--et-accent-dim);
}
.dc-section__heading {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--text-primary);
  margin: 1rem 0 1.5rem;
}
.dc-timeline__list {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.dc-timeline__item {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--et-accent-dim);
}
.dc-timeline__year {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--et-accent);
  white-space: nowrap;
}
.dc-timeline__item p {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin: 0;
}

/* ── Cast sections ── */
.dc-cast-section {
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--et-accent-dim);
}
.dc-cast-section--core     { background: var(--et-bg); }
.dc-cast-section--shadow   { background: var(--et-bg-mid); }
.dc-cast-section--peripheral { background: var(--et-bg-lift); }
.dc-cast-section--light    { background: var(--et-bg); }
.dc-cast-section--dark     { background: var(--et-bg-mid); }
.dc-cast-section--elder    { background: var(--et-bg); }
.dc-cast-section__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 0% 100%, rgba(26,143,163,0.05) 0%, transparent 60%);
  pointer-events: none;
}
.dc-cast-section__header {
  max-width: 640px;
  margin-bottom: 2.5rem;
}

/* ── Category badges ── */
.dc-cat-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 2px;
  margin-bottom: 0.75rem;
}
.dc-cat-badge--blue   { background: rgba(59,130,246,0.12); color: #60A5FA; }
.dc-cat-badge--red    { background: rgba(239,68,68,0.12);  color: #F87171; }
.dc-cat-badge--grey   { background: rgba(255,255,255,0.06); color: var(--text-muted); }
.dc-cat-badge--purple { background: rgba(155,93,229,0.12);  color: #B47AFF; }
.dc-cat-badge--brown  { background: rgba(180,100,50,0.12);  color: #D4915A; }
.dc-cat-badge--green  { background: rgba(46,204,113,0.12);  color: #2ECC71; }

/* ── Character card grid ── */
.dc-cast-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}
.dc-cast-grid--narrow {
  max-width: 720px;
}

/* ── Character card ── */
.dc-char-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--et-accent-dim);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.dc-char-card:hover {
  border-color: var(--et-accent);
  transform: translateY(-3px);
}
.dc-char-card__initial {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--et-accent-dim);
  border: 1px solid var(--et-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  color: var(--et-accent);
  margin-bottom: 0.85rem;
}
.dc-char-card__number {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--et-accent);
  opacity: 0.4;
  margin-bottom: 0.5rem;
}
.dc-char-card__name {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: var(--text-primary);
  margin: 0 0 0.3rem;
}
.dc-char-card__role {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
  line-height: 1.5;
}
.dc-char-card__alignment {
  display: inline-block;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 2px;
  margin-bottom: 0.6rem;
}
.dc-char-card__alignment--light  { background: rgba(59,130,246,0.10); color: #60A5FA; }
.dc-char-card__alignment--higher { background: rgba(155,93,229,0.10); color: #B47AFF; }
.dc-char-card__alignment--shadow { background: rgba(239,68,68,0.10); color: #F87171; }
.dc-char-card__alignment--neutral { background: rgba(255,255,255,0.05); color: var(--text-muted); }
.dc-section__sub {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 0.75rem;
  font-style: italic;
}

/* ── Alignment key (hero) ── */
.dc-alignment-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
}
.dc-key {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  border-radius: 2px;
}
.dc-key--light  { background: rgba(59,130,246,0.10); color: #60A5FA; }
.dc-key--higher { background: rgba(155,93,229,0.10); color: #B47AFF; }
.dc-key--shadow { background: rgba(239,68,68,0.10); color: #F87171; }
.dc-key--neutral { background: rgba(255,255,255,0.05); color: var(--text-muted); }
.dc-key--assigned { background: rgba(46,204,113,0.10); color: #2ECC71; }
.dc-char-card__meta {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--et-accent);
  opacity: 0.6;
  margin-bottom: 0.5rem;
}
.dc-char-card__divider {
  width: 2rem;
  height: 2px;
  background: var(--et-accent);
  opacity: 0.4;
  margin-bottom: 0.75rem;
}
.dc-char-card__bio {
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--text-secondary);
  margin: 0;
}

/* ── D.2010 Cast responsive ── */
@media (max-width: 768px) {
  .dc-timeline       { padding: 5rem 0; }
  .dc-timeline__item { grid-template-columns: 1fr; gap: 0.25rem; }
  .dc-cast-section   { padding: 5rem 0; }
  .dc-cast-grid      { grid-template-columns: 1fr; }
  .dc-cast-grid--narrow { max-width: none; }
}


/* ════════════════════════════════════════════════════════════════════
   BTS-ART — MAGAZINE-STYLE EDITORIAL PAGE
   "What Is Become The Source" — long-form, clean, readable.
   Page class: class="bts-article"
════════════════════════════════════════════════════════════════════ */

.bts-article {
  --art-bg: #080810;
  --art-bg-mid: #0E0E1A;
  --art-accent: #9B5DE5;
  --art-accent-dim: rgba(155,93,229,0.15);
  --art-text: rgba(255,255,255,0.88);
  --art-text-dim: rgba(255,255,255,0.55);
}
.bts-article section,
.bts-article article { padding: 0; }

.container--article {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

/* ── Hero ── */
.bts-art__hero {
  background: var(--art-bg);
  padding: 11rem 0 6rem !important;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.bts-art__hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 55% at 50% -15%, rgba(155,93,229,0.12) 0%, transparent 55%),
    radial-gradient(ellipse 45% 35% at 80% 100%, rgba(155,93,229,0.06) 0%, transparent 55%);
  pointer-events: none;
}
/* DreamCatcher Vincent & Clara cover */
.dc-vc-cover-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 2.5rem;
}
.dc-vc-cover {
  width: 220px;
  border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
}
/* DreamCatcher hero tint */
.bts-art__hero--dc .bts-art__hero-bg {
  background:
    radial-gradient(ellipse 70% 55% at 30% 0%, rgba(168,24,48,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 75% 100%, rgba(155,93,229,0.08) 0%, transparent 55%);
}
/* Present-day italic block */
.dc-vc-present {
  border-left: 2px solid rgba(168,24,48,0.4);
  padding-left: 1.5rem;
  margin: 2.5rem 0;
  color: rgba(255,255,255,0.75);
  line-height: 1.9;
}
.dc-vc-present p { margin: 0 0 0.75rem; }
.dc-vc-present p:last-child { margin: 0; }
/* Connections footnote */
.dc-vc-connections { margin-top: 1.5rem; }
.dc-vc-connections .bts-art__caption { display: block; margin-bottom: 0.25rem; }
.bts-art__kicker {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--art-accent);
  border: 1px solid var(--art-accent-dim);
  padding: 0.35em 1em;
  border-radius: 2px;
  margin-bottom: 2rem;
  position: relative;
}
.bts-art__title {
  font-family: 'Cinzel', serif;
  font-size: clamp(2.8rem, 8vw, 5rem);
  font-weight: 700;
  line-height: 1.05;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 0 0 1.75rem;
  position: relative;
}
.bts-art__deck {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--art-text-dim);
  line-height: 1.75;
  max-width: 540px;
  margin: 0 auto;
  position: relative;
}
.bts-art__rule {
  width: 50px;
  height: 2px;
  background: var(--art-accent);
  margin: 2.5rem auto 0;
  border-radius: 2px;
  opacity: 0.6;
}

/* ── Article body ── */
.bts-art__body {
  background: var(--art-bg);
  padding: 4.5rem 0 5rem !important;
}
.bts-art__body p {
  font-size: 1.05rem;
  line-height: 1.95;
  color: var(--art-text);
  margin: 0 0 1.6rem;
  font-family: 'Montserrat', sans-serif;
}

/* ── Lede paragraph ── */
.bts-art__lede {
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--art-accent-dim);
}
.bts-art__lede p {
  font-size: 1.25rem;
  line-height: 1.85;
  color: #fff;
  font-weight: 400;
  margin-bottom: 0;
}
.bts-art__lede p::first-letter {
  font-family: 'Cinzel', serif;
  font-size: 3.5rem;
  float: left;
  line-height: 0.85;
  margin: 0.05em 0.12em 0 0;
  color: var(--art-accent);
  font-weight: 700;
}

/* ── Section heads ── */
.bts-art__section-head {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.3rem, 2.8vw, 1.75rem);
  color: #fff;
  margin: 3rem 0 1.25rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--art-accent-dim);
  letter-spacing: 0.02em;
}

/* ── Pull quotes ── */
.bts-art__pull {
  margin: 2.5rem 0;
  padding: 2rem 2.5rem;
  border-left: 3px solid var(--art-accent);
  background: rgba(155,93,229,0.04);
  border-radius: 0 8px 8px 0;
}
.bts-art__pull blockquote {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  color: #fff;
  line-height: 1.65;
  font-style: italic;
  margin: 0;
}

/* ── Series list ── */
.bts-art__series-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 2rem 0 2.5rem;
}
.bts-art__series-item {
  background: var(--art-bg-mid);
  border: 1px solid var(--art-accent-dim);
  border-top: 2px solid var(--art-accent);
  border-radius: 8px;
  padding: 1.5rem 1.5rem;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.bts-art__series-item:hover {
  border-color: var(--art-accent);
  transform: translateY(-3px);
}
.bts-art__series-item h3 {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  color: #fff;
  margin: 0 0 0.5rem;
}
.bts-art__series-item p {
  font-size: 0.85rem !important;
  line-height: 1.7 !important;
  color: var(--art-text-dim) !important;
  margin: 0 !important;
}

/* ── Mission callout ── */
.bts-art__mission {
  text-align: center;
  margin: 3.5rem 0 2.5rem;
  padding: 3rem 2rem;
  background: var(--art-bg-mid);
  border: 1px solid var(--art-accent-dim);
  border-radius: 12px;
}
.bts-art__mission p {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.15rem, 2.5vw, 1.5rem) !important;
  color: #fff !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
.bts-art__mission em {
  color: var(--art-accent);
  font-style: normal;
}

/* ── Nav buttons ── */
.bts-art__nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

/* ── Footer ── */
.bts-art__footer {
  background: var(--art-bg-mid);
  padding: 3rem 0 !important;
  text-align: center;
  border-top: 1px solid var(--art-accent-dim);
}
.bts-art__copyright {
  font-size: 0.72rem;
  color: var(--art-text-dim);
  margin: 0;
}

/* ── EGOTech rule numbers ── */
.ego-rule__num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--art-accent);
  opacity: 0.7;
  margin-right: 0.5rem;
}
.ego-rules .bts-art__series-item h3 {
  display: flex;
  align-items: baseline;
  gap: 0;
}
.ego-reading-order .bts-art__series-item {
  border-left: 3px solid var(--art-accent-dim);
  padding-left: 1.25rem;
}
.ego-reading-order .bts-art__series-item h3 {
  font-size: 1rem;
}

/* ── OFF-World book cards ── */
.ofw-book {
  border-left: 3px solid var(--art-accent-dim);
  padding: 2rem 0 2rem 1.75rem;
  margin: 2.5rem 0;
}
.ofw-book + .ofw-book {
  border-top: 1px solid var(--art-accent-dim);
  padding-top: 2.5rem;
}
.ofw-book__header {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1rem;
}
.ofw-book__num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--art-accent);
  opacity: 0.35;
  line-height: 1;
  flex-shrink: 0;
  min-width: 2.5rem;
}
.ofw-book__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--art-heading);
  margin: 0 0 0.25rem;
  line-height: 1.3;
}
.ofw-book__meta {
  font-size: 0.75rem;
  color: var(--art-text-dim);
  letter-spacing: 0.06em;
  font-style: italic;
}
.ofw-book__bridge {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: rgba(155, 93, 229, 0.06);
  border-left: 2px solid var(--art-accent);
  border-radius: 0 4px 4px 0;
  font-size: 0.9rem;
  color: var(--art-text-dim);
}
.ofw-book__bridge em:first-child {
  color: var(--art-accent);
  font-style: normal;
  font-weight: 600;
}
@media (max-width: 768px) {
  .ofw-book { padding-left: 1.25rem; }
  .ofw-book__num { font-size: 1.5rem; }
  .ofw-book__title { font-size: 1.05rem; }
}

/* ── Magazine responsive ── */
@media (max-width: 768px) {
  .bts-art__hero          { padding: 8rem 0 4.5rem !important; }
  .bts-art__body          { padding: 3rem 0 3.5rem !important; }
  .bts-art__pull          { margin: 2rem 0; padding: 1.5rem 1.5rem; }
  .bts-art__series-list   { grid-template-columns: 1fr; }
  .bts-art__lede p::first-letter { font-size: 2.8rem; }
  .container--article     { padding: 0 1.5rem; }
}
@media (max-width: 480px) {
  .bts-art__title         { font-size: clamp(2rem, 11vw, 3rem); }
  .bts-art__nav           { flex-direction: column; align-items: center; }
  .bts-art__mission       { padding: 2rem 1.25rem; }
  .container--article     { padding: 0 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════════
   SITE DIRECTORY  (page-directory.php)
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.bts-dir__hero {
  background: var(--color-bg);
  border-bottom: 1px solid rgba(155,93,229,0.15);
  padding: 7rem 0 4rem;
  text-align: center;
}
.bts-dir__kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9B5DE5;
  margin-bottom: 1rem;
}
.bts-dir__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3.5rem);
  font-weight: 800;
  color: #f0eaf8;
  margin: 0 0 1rem;
  line-height: 1.1;
}
.bts-dir__deck {
  max-width: 560px;
  margin: 0 auto 2rem;
  color: rgba(240,234,248,0.65);
  font-size: 1.05rem;
  line-height: 1.65;
}

/* ── Search ── */
.bts-dir__search-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 400px;
  margin: 0 auto;
}
.bts-dir__search {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(155,93,229,0.3);
  border-radius: 8px;
  color: #f0eaf8;
  font-size: 0.95rem;
  padding: 0.65rem 1rem;
  outline: none;
  transition: border-color 0.2s;
}
.bts-dir__search::placeholder { color: rgba(240,234,248,0.35); }
.bts-dir__search:focus { border-color: rgba(155,93,229,0.7); }
.bts-dir__search-count {
  font-size: 0.8rem;
  color: rgba(240,234,248,0.45);
  white-space: nowrap;
  min-width: 60px;
}

/* ── Body ── */
.bts-dir__body {
  padding: 4rem 0 6rem;
  background: var(--color-bg);
}

/* ── Responsive grid of category cards ── */
.bts-dir__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.75rem;
  align-items: start;
}

/* ── Category card ── */
.bts-dir__cat {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(155,93,229,0.14);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.bts-dir__cat:hover {
  border-color: rgba(155,93,229,0.32);
}

/* ── Category header (native <summary>) ── */
.bts-dir__cat-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem 0.9rem;
  background: rgba(155,93,229,0.08);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.bts-dir__cat[open] > .bts-dir__cat-header {
  border-bottom: 1px solid rgba(155,93,229,0.12);
}
.bts-dir__cat-header::-webkit-details-marker { display: none; }
.bts-dir__cat-header::marker { content: ''; }
.bts-dir__cat-chevron {
  font-size: 1.1rem;
  color: rgba(196,158,245,0.5);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.bts-dir__cat[open] .bts-dir__cat-chevron {
  transform: rotate(90deg);
}
.bts-dir__cat-icon {
  font-size: 0.85rem;
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(155,93,229,0.18);
  border-radius: 50%;
  color: #c49ef5;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
}
.bts-dir__cat-title {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c49ef5;
  margin: 0;
  flex: 1;
  line-height: 1.3;
}
.bts-dir__cat-count {
  font-size: 0.7rem;
  color: rgba(196,158,245,0.5);
  background: rgba(155,93,229,0.12);
  border-radius: 20px;
  padding: 0.15rem 0.55rem;
  font-family: var(--font-display);
  font-weight: 600;
  flex-shrink: 0;
}

/* ── Page list ── */
.bts-dir__list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
}
.bts-dir__item {
  border-bottom: 1px solid rgba(155,93,229,0.06);
}
.bts-dir__item:last-child { border-bottom: none; }

.bts-dir__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 1.25rem;
  text-decoration: none;
  color: rgba(240,234,248,0.78);
  font-size: 0.88rem;
  line-height: 1.4;
  transition: background 0.15s, color 0.15s;
}
.bts-dir__link:hover {
  background: rgba(155,93,229,0.1);
  color: #f0eaf8;
}
.bts-dir__link-title {
  flex: 1;
}
.bts-dir__link-parent {
  font-size: 0.72rem;
  color: rgba(196,158,245,0.4);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Empty state ── */
.bts-dir__empty {
  text-align: center;
  padding: 3rem;
  color: rgba(240,234,248,0.45);
  font-size: 1rem;
}
.bts-dir__empty em {
  color: rgba(196,158,245,0.7);
  font-style: normal;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .bts-dir__hero   { padding: 5rem 0 3rem; }
  .bts-dir__grid   { grid-template-columns: 1fr; }
  .bts-dir__search-wrap { flex-direction: column; align-items: stretch; }
}
@media (max-width: 480px) {
  .bts-dir__title  { font-size: clamp(1.8rem, 10vw, 2.5rem); }
  .bts-dir__link   { padding: 0.6rem 1rem; }
}

/* ── Default page template (index.php) — force readable text ── */
.page article .container h1,
.page article .container h2,
.page article .container h3,
.page article .container h4,
.page article .container p,
.page article .container li,
.page article .container label,
.page article .container span,
.page article .container a {
  color: rgba(255,255,255,0.88);
}
.page article .container a:hover { color: #fff; }
/* Override Gutenberg blocks that set their own dark text */
.page article .container .wp-block-group,
.page article .container .wp-block-columns,
.page article .container .wp-block-column,
.page article .container .wp-block-paragraph,
.page article .container .wp-block-heading {
  color: rgba(255,255,255,0.88) !important;
}
/* Override inline has-text-color utilities */
.page article .container [class*="has-"][class*="-color"] {
  color: rgba(255,255,255,0.88) !important;
}
/* Override dark background blocks that ship with a contrast colour */
.page article .container .has-background {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.88) !important;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
}