/* ================================================
   PERSONAL KOSMOLOGY — STYLES
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');

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

/* ---- DESIGN TOKENS ---- */
:root {
  /* Backgrounds — dark spectrum */
  --bg-hero:   #07090d;
  --bg-deeper: #090b11;
  --bg-dark:   #0d1018;
  --bg-mid:    #111520;
  --bg-card:   #161c2b;
  --bg-cta:    #0b0e17;

  /* Brand — green (leaves) */
  --green-deep:   #193227;
  --green-mid:    #2d6a4f;
  --green-bright: #52b788;

  /* Brand — blue (hexagons) */
  --blue-deep:    #172040;
  --blue-mid:     #2c4e8a;
  --blue-bright:  #4f7ec5;

  /* Brand book — exact palette (used for graphic accents / atmosphere) */
  --brand-teal:      #306170;   /* Teal Blue — primary */
  --brand-teal-dark: #0F4B57;   /* Dark Teal */
  --brand-steel:     #0A83BA;   /* Steel Blue */
  --brand-fountain:  #08AEC7;   /* Fountain Blue */
  --brand-mist:      #B1CDD3;   /* Jungle Mist */
  --brand-green:     #04995C;   /* Green */
  --brand-forest:    #004F1D;   /* Forest Green */
  --brand-amber:     #FFAF02;   /* Accent Orange */

  /* Text */
  --text-1: #ece8e1;   /* primary */
  --text-2: #8a8680;   /* secondary */
  --text-3: #474440;   /* muted */

  /* Borders */
  --border:       rgba(255, 255, 255, 0.07);
  --border-light: rgba(255, 255, 255, 0.13);

  /* Type */
  /* Brand typeface: Proxima Nova (commercial). Montserrat is the free
     Google-Fonts stand-in until/unless a licensed Proxima Nova is embedded.
     --serif keeps its name for the italic "display" voice; both are Montserrat. */
  --serif: 'Montserrat', system-ui, -apple-system, sans-serif;
  --sans:  'Montserrat', system-ui, -apple-system, sans-serif;

  /* Layout */
  --max-w:      1120px;
  --max-narrow: 740px;
  --gap:        clamp(80px, 10vw, 130px);
  --pad:        clamp(24px, 5vw, 48px);
}

/* ---- BASE ---- */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  background: var(--bg-dark);
  color: var(--text-1);
  overflow-x: hidden;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button { font-family: var(--sans); }

/* ---- LAYOUT UTILITIES ---- */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.container-narrow {
  max-width: var(--max-narrow);
}

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

.bg-dark   { background: var(--bg-dark); }
.bg-deeper { background: var(--bg-deeper); }
.bg-mid    { background: var(--bg-mid); }
.bg-cta    { background: var(--bg-cta); }

/* ---- NAVIGATION ---- */
#nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 200;
  padding: 22px 0;
  transition: background 0.35s ease, backdrop-filter 0.35s ease, padding 0.35s ease, border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}

#nav.scrolled {
  background: rgba(7, 9, 13, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 14px 0;
  border-bottom-color: var(--border);
}

.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--text-1);
  flex-shrink: 0;
}

.nav-logo-img {
  height: 34px;
  width: auto;
}

.nav-wordmark {
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
}

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links a {
  text-decoration: none;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  transition: color 0.2s;
}

.nav-links a:hover { color: var(--text-1); }

.nav-links .nav-cta {
  color: var(--green-bright);
  border: 1px solid rgba(82, 183, 136, 0.3);
  padding: 6px 18px;
  border-radius: 1px;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.nav-links .nav-cta:hover {
  background: var(--green-bright);
  border-color: var(--green-bright);
  color: var(--bg-hero);
}

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

.nav-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--text-2);
  transition: transform 0.25s, opacity 0.25s;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---- HERO ---- */
#hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-hero);
  overflow: hidden;
}

.hero-cosmos {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("cosmos-deepfield.jpg") center / cover no-repeat;
  filter: brightness(0.62) contrast(1.04) saturate(0.82) blur(2px);
  transform: scale(1.07);
}

.hero-cosmos::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 52% at 50% 45%, rgba(7, 9, 13, 0.48) 0%, rgba(7, 9, 13, 0.18) 48%, rgba(7, 9, 13, 0.58) 100%),
    linear-gradient(180deg, rgba(7, 9, 13, 0.62) 0%, transparent 24%, transparent 72%, rgba(7, 9, 13, 0.92) 100%),
    linear-gradient(135deg, rgba(45, 106, 79, 0.13), rgba(44, 78, 138, 0.15));
}

#constellation-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--pad);
  gap: 28px;
}

.hero-logo {
  width: min(500px, 88vw);
  height: auto;
  filter: drop-shadow(0 4px 40px rgba(82, 183, 136, 0.12));
}

.hero-descriptor {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
}

.hero-scroll {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.hero-scroll-line {
  display: block;
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, transparent, var(--text-3));
  animation: grow-line 2.2s ease-in-out infinite;
}

@keyframes grow-line {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  70%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ---- SECTION ANATOMY ---- */
.label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-bright);
  margin-bottom: 18px;
}

.heading {
  font-family: var(--serif);
  font-size: clamp(32px, 4.7vw, 54px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--text-1);
  margin-bottom: 48px;
}

.subheading {
  font-family: var(--serif);
  font-size: clamp(17px, 2.2vw, 22px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-2);
  max-width: 680px;
  margin-bottom: 64px;
}

/* ---- PROSE ---- */
.prose { max-width: 680px; }

.prose p {
  font-size: 17px;
  line-height: 1.85;
  color: var(--text-1);
  margin-bottom: 22px;
}

/* Guest quote woven through an episode article — lighter than a pull-quote */
.prose blockquote.ep-quote {
  margin: 26px 0;
  padding: 2px 0 2px 26px;
  border-left: 2px solid var(--green-bright);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: 1.62;
  color: var(--text-1);
  max-width: 680px;
}
.prose blockquote.ep-quote p { margin: 0; font: inherit; color: inherit; }

.prose-large p {
  font-family: var(--serif);
  font-size: clamp(18px, 2.3vw, 23px);
  font-weight: 300;
  line-height: 1.8;
  color: var(--text-1);
  margin-bottom: 28px;
}

/* ---- PULL QUOTE ---- */
.pull-quote {
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 34px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-1);
  max-width: 820px;
  padding: 44px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 44px 0;
  quotes: none;
}

/* ---- KOSMOLOGY SECTION ---- */
.kosmology-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 48px;
  align-items: start;
}

.k-glyph {
  font-family: var(--serif);
  font-size: clamp(100px, 14vw, 180px);
  font-style: italic;
  font-weight: 300;
  line-height: 0.82;
  color: var(--green-mid);
  opacity: 0.35;
  user-select: none;
  flex-shrink: 0;
  padding-top: 8px;
}

.k-text p {
  font-family: var(--serif);
  font-size: clamp(16px, 1.9vw, 20px);
  font-weight: 300;
  line-height: 1.8;
  color: var(--text-1);
  margin-bottom: 22px;
}

.k-text em { font-style: italic; color: var(--text-1); }

.k-premise {
  font-size: clamp(17px, 2vw, 21px) !important;
  color: var(--text-2) !important;
  margin-top: 12px !important;
}

/* ---- THREE MOVEMENTS ---- */
.movements {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-bottom: 56px;
}

.movement {
  padding: 40px 36px;
  background: var(--bg-card);
  border-top: 2px solid var(--green-mid);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.movement-roman {
  font-family: var(--serif);
  font-size: 44px;
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  color: var(--green-mid);
  opacity: 0.6;
}

.movement h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--text-1);
}

.movement p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-2);
}

.topics-panel {
  max-width: 720px;
  padding: 36px 40px;
  border-left: 2px solid var(--blue-mid);
  background: rgba(44, 78, 138, 0.06);
}

.topics-panel p {
  font-family: var(--serif);
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 300;
  line-height: 1.8;
  color: var(--text-2);
  margin-bottom: 16px;
}

.topics-panel p:last-child { margin-bottom: 0; }
.topics-panel em { color: var(--text-1); font-style: italic; }

/* ---- LEAD PITCH ---- */
.pitch-section { text-align: center; }

.pitch-question {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 44px);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.18;
  color: var(--text-1);
  margin: 0 auto clamp(32px, 5vw, 44px);
}

.pitch-lead {
  font-family: var(--serif);
  font-size: clamp(21px, 2.9vw, 30px);
  font-weight: 300;
  line-height: 1.62;
  color: var(--text-1);
  margin: 0 auto;
}

.pitch-lead + .pitch-lead { margin-top: 1.5em; }

.pitch-actions {
  margin-top: clamp(38px, 5vw, 54px);
}

.story-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 30px;
  background: transparent;
  border: 1px solid rgba(82, 183, 136, 0.35);
  border-radius: 1px;
  color: var(--green-bright);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}

.story-toggle:hover {
  background: var(--green-bright);
  border-color: var(--green-bright);
  color: var(--bg-hero);
}

.story-toggle-chevron {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.3s ease;
}

.story-toggle[aria-expanded="true"] .story-toggle-chevron {
  transform: translateY(2px) rotate(-135deg);
}

/* ---- FULL STORY (collapsible) ---- */
.full-story {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.full-story.is-open { grid-template-rows: 1fr; }

.full-story-inner {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
  transition: visibility 0s linear 0.7s;
}

.full-story.is-open .full-story-inner {
  visibility: visible;
  transition-delay: 0s;
}

/* ---- OPENING STATEMENT ---- */
.opening-statement {
  font-family: var(--serif);
  font-size: clamp(20px, 2.8vw, 28px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-1);
  text-align: center;
  padding: 24px 0;
}

/* ---- PROSE WIDE (crisis section) ---- */
.prose-wide {
  max-width: 760px;
}

.prose-wide p {
  font-size: 17px;
  line-height: 1.85;
  color: var(--text-1);
  margin-bottom: 22px;
}

/* ---- TOPICS PANEL — label inside ---- */
.topics-panel .label {
  margin-bottom: 16px;
}

/* ---- INVITATION SECTION ---- */
.section-invitation {
  border-top: 1px solid var(--border);
}

.invitation-prose p {
  margin-bottom: 28px;
}

.chorus-block {
  padding: 48px 0 40px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 8px 0 40px;
}

.chorus-line {
  font-family: var(--serif);
  font-size: clamp(24px, 3.5vw, 42px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.4;
  color: var(--green-bright);
  text-align: center;
}

.invitation-close {
  font-family: var(--serif);
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-2);
}

/* ---- ABOUT ---- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 80px;
  align-items: start;
}

.inline-quote {
  display: block;
  font-family: var(--serif);
  font-size: clamp(19px, 2.5vw, 26px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-1);
  border-left: 2px solid var(--green-mid);
  padding: 10px 0 10px 32px;
  margin: 36px 0;
  quotes: none;
}

.about-byline {
  font-size: 14px;
  color: var(--text-2);
  margin-top: 32px;
}

.about-byline a {
  color: var(--green-bright);
  text-decoration: none;
  transition: opacity 0.2s;
}

.about-byline a:hover { opacity: 0.75; }

.about-visual {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12px;
}

.about-watermark {
  width: 100%;
  max-width: 220px;
  opacity: 0.1;
  filter: brightness(3) saturate(0);
}

/* ---- CTA / LISTEN ---- */
.cta-wrap {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.cta-heading {
  font-family: var(--serif);
  font-size: clamp(36px, 5.5vw, 58px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.1;
  color: var(--text-1);
  margin-bottom: 20px;
}

.cta-sub {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-2);
  margin-bottom: 48px;
}

.subscribe-form { margin-bottom: 56px; }

.form-row {
  display: flex;
  gap: 0;
}

.form-input {
  flex: 1;
  min-width: 0;
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-light);
  border-right: none;
  color: var(--text-1);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
}

.form-input::placeholder { color: var(--text-3); }
.form-input:focus { border-color: rgba(82, 183, 136, 0.45); }

.form-btn {
  padding: 15px 28px;
  background: var(--green-mid);
  border: 1px solid var(--green-mid);
  color: #fff;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
}

.form-btn:hover:not(:disabled) {
  background: var(--green-bright);
  border-color: var(--green-bright);
}

.form-btn:disabled { opacity: 0.5; cursor: default; }

.form-msg {
  margin-top: 14px;
  font-size: 14px;
  color: var(--green-bright);
  min-height: 22px;
  text-align: left;
}

.follow {
  border-top: 1px solid var(--border);
  padding-top: 40px;
}

.follow-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 16px;
}

.follow-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.follow-link {
  font-size: 14px;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.2s;
}

.follow-link:hover { color: var(--text-1); }

.follow-link.is-pending {
  color: var(--text-3);
  cursor: default;
}

.follow-link.is-pending:hover { color: var(--text-3); }

.follow-dot { color: var(--text-3); }

/* Primary follow buttons (YouTube / Spotify) */
.follow-btns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
}
.follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-1);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.follow-btn svg { flex-shrink: 0; }
.follow-btn:hover {
  border-color: var(--green-bright);
  background: rgba(82, 183, 136, 0.10);
  transform: translateY(-1px);
}

/* ---- FOOTER ---- */
#footer {
  background: var(--bg-deeper);
  padding: 60px 0 36px;
  border-top: 1px solid var(--border);
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 40px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-icon {
  height: 44px;
  width: auto;
  opacity: 0.7;
}

.footer-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  font-weight: 400;
  color: var(--text-1);
  line-height: 1.3;
}

.footer-tag {
  font-size: 13px;
  color: var(--text-3);
  margin-top: 2px;
}

.footer-mission {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.footer-links a {
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover { color: var(--green-bright); }

.footer-copy {
  font-size: 12px;
  color: var(--text-3);
  border-top: 1px solid var(--border);
  padding-top: 24px;
}

.footer-credit {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  opacity: 0.75;
}

/* ---- REVEAL ANIMATIONS ---- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- SECTION DIVIDER (mandala motif) ---- */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 30px);
  margin-bottom: clamp(40px, 6vw, 66px);
}

.divider-constellation {
  height: auto;
  max-width: min(300px, 80vw);
  overflow: visible;
  filter: drop-shadow(0 0 9px rgba(82, 183, 136, 0.22));
}

.divider-constellation line {
  stroke: rgba(130, 175, 205, 0.38);
  stroke-width: 1;
}

.divider-constellation circle { fill: #e2e8f2; }
.divider-constellation .s-green { fill: var(--green-bright); }
.divider-constellation .s-blue  { fill: var(--blue-bright); }

.divider-constellation .newest {
  transform-box: fill-box;
  transform-origin: center;
  animation: star-twinkle 3.4s ease-in-out infinite;
}

@keyframes star-twinkle {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* ---- SECTION WATERMARK + STARFIELD LAYERS ---- */
.has-watermark,
.has-starfield {
  position: relative;
  overflow: hidden;
}

.has-watermark > .container,
.has-starfield > .container {
  position: relative;
  z-index: 1;
}

.section-watermark {
  position: absolute;
  z-index: 0;
  width: min(820px, 88vw);
  height: auto;
  opacity: 0.13;
  pointer-events: none;
  user-select: none;
  filter: saturate(0.9);
}

.wm-right { top: 50%; right: -12%; transform: translateY(-50%); }
.wm-left  { top: 44%; left: -14%; transform: translateY(-50%); }

/* ============================================================
   BRAND ATMOSPHERE — composable background accents
   These are the ACTUAL accent graphics from the brand book's
   "Accents & Elements" page (page 15), extracted as artwork and
   laid behind content at low opacity. They render on a black
   field, so `mix-blend-mode: screen` drops the black away and
   leaves only the coloured accent glowing on the dark page.

   Usage: add `atmo` + one accent class + one position class to a
   section, e.g.  class="section bg-deeper atmo atmo-hex pos-bl".
   Optional colour wash: add `wash-teal` / `wash-green`.
   Accents live in accent-hex.png / accent-flower.png /
   accent-starburst.png / accent-green-star.png / accent-lattice.png
   ============================================================ */
.atmo { position: relative; overflow: visible; isolation: isolate; }
.atmo > .container { position: relative; z-index: 1; }

/* Accent layer (::before). Screen-blends the black-background artwork
   so only the coloured line-work shows against the dark page. */
.atmo::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  mix-blend-mode: screen;
  opacity: 0.26;
  transition: opacity 0.6s ease;
}

.atmo-hex::before {
  background-image: url("accent-hex-t.png");        /* blue hexagon cluster */
  width: min(520px, 72vw);
  aspect-ratio: 869 / 900;
  opacity: 0.22;
}
.atmo-flower::before {
  background-image: url("accent-flower-t.png");     /* flower of life */
  width: min(500px, 72vw);
  aspect-ratio: 840 / 900;
  opacity: 0.16;
}
.atmo-starburst::before {
  background-image: url("accent-starburst-t.png");  /* amber radiating starburst */
  width: min(320px, 52vw);
  aspect-ratio: 900 / 770;
  opacity: 0.3;
}
.atmo-green-star::before {
  background-image: url("accent-green-star-t.png"); /* green constellation network */
  width: min(460px, 66vw);
  aspect-ratio: 759 / 900;
  opacity: 0.24;
}
.atmo-lattice::before {
  background-image: url("accent-lattice-t.png");    /* blue lattice network */
  width: min(520px, 72vw);
  aspect-ratio: 900 / 765;
  opacity: 0.2;
}
.atmo-amber-circles::before {
  background-image: url("accent-amber-circles-t.png"); /* amber overlapping circles */
  width: min(360px, 58vw);
  aspect-ratio: 900 / 874;
  opacity: 0.26;
}

/* Position variants — accents bleed in from an edge/corner */
.pos-tr::before { top: -9%;  right: -8%; }
.pos-tl::before { top: -9%;  left: -8%; }
.pos-br::before { bottom: -11%; right: -7%; }
.pos-bl::before { bottom: -11%; left: -7%; }
.pos-r::before  { top: 50%; right: -9%; transform: translateY(-50%); }
.pos-l::before  { top: 50%; left: -9%;  transform: translateY(-50%); }

/* Fully-in-frame variants — the whole accent sits inside the section,
   tucked into the empty side margin rather than bleeding off the edge. */
.pos-r-in::before  { top: 50%; right: 3%; transform: translateY(-50%); }
.pos-l-in::before  { top: 50%; left: 3%;  transform: translateY(-50%); }
.pos-tr-in::before { top: 7%;  right: 3%; }
.pos-br-in::before { bottom: 7%; right: 3%; }

/* Optional soft colour wash (::after), radial, in brand colours */
.wash-teal::after,
.wash-green::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.wash-teal::after {
  background: radial-gradient(ellipse 55% 75% at 82% 22%,
              rgba(10, 131, 186, 0.10), transparent 68%);
}
.wash-green::after {
  background: radial-gradient(ellipse 55% 75% at 18% 78%,
              rgba(4, 153, 92, 0.09), transparent 68%);
}

/* Amber overlapping-circles accent for the Host section, anchored to the
   line "And honestly, that scares me." so its centre sits on the gap above
   that line. Placed in the clear space to the right of the 680px prose. */
.host-accent-anchor { position: relative; }
.host-accent-anchor::before {
  content: "";
  position: absolute;
  top: -11px;                 /* midpoint of the 22px gap above this line */
  left: 100%;
  transform: translateY(-50%);
  margin-left: clamp(-360px, -20vw, -160px);
  width: min(820px, 62vw);
  aspect-ratio: 900 / 874;
  background: url("accent-amber-circles-t.png") center / contain no-repeat;
  opacity: 0.55;
  pointer-events: none;
}

@media (max-width: 640px) {
  /* On phones there is no side margin for accents, so centre each motif
     behind the text as a faint, complete watermark instead of bleeding it
     off to one side (where it lands cut-off or invisible). */
  .atmo::before {
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(440px, 92vw) !important;
    opacity: 0.44;
  }
  .atmo-flower::before { opacity: 0.32; }

  .host-accent-anchor::before {
    display: block;
    left: 50%;
    top: 50%;
    margin-left: 0;
    transform: translate(-50%, -50%);
    width: min(460px, 94vw);
    opacity: 0.40;
  }

  .pull-quote.pq-green-star::after {
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: min(380px, 84vw);
  }
}

/* ---- INVITATION STARFIELD ---- */
#invitation-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ---- FULL-BLEED QUOTE MOMENT ---- */
.pull-quote {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: clamp(56px, 8vw, 96px);
  margin-bottom: clamp(56px, 8vw, 96px);
  padding: clamp(54px, 8vw, 88px) var(--pad);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
  overflow: hidden;
}

.pull-quote::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 52% 130% at 50% 50%, rgba(82, 183, 136, 0.16), transparent 66%),
    radial-gradient(ellipse 82% 130% at 50% 50%, rgba(79, 126, 197, 0.10), transparent 72%);
}

.pull-quote span {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 860px;
  margin: 0 auto;
}

/* Accent anchored to the pull-quote itself, so the accent's centre lines
   up with the quote's centre (rather than the whole section's). Sits at the
   far-right edge, vertically centred; overflow is opened so the round motif
   isn't sliced by the quote's shorter height. */
.pull-quote.pq-green-star { overflow: visible; }
.pull-quote.pq-green-star::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
  z-index: 0;
  width: min(460px, 42vw);
  aspect-ratio: 759 / 900;
  background: url("accent-green-star-t.png") center / contain no-repeat;
  opacity: 0.5;
  pointer-events: none;
}

/* ---- THREE MOVEMENTS: HEXAGON GLYPHS ---- */
.movement { position: relative; }

.movement::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 130px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(79, 126, 197, 0.12), transparent 70%);
}

.movement > * { position: relative; z-index: 1; }

.movement-roman {
  position: relative;
  width: 58px;
  height: 64px;
  opacity: 1;
  margin-bottom: 4px;
}

.movement-roman .hex {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 12px rgba(79, 126, 197, 0.30));
}

.movement-roman .hex polygon {
  fill: rgba(44, 78, 138, 0.14);
  stroke: var(--blue-mid);
  stroke-width: 2.5;
}

.movement-roman .hex-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 25px;
  line-height: 1;
  color: var(--green-bright);
}

/* ================================================
   EPISODE PAGE
   ================================================ */

/* Solid nav on interior pages (no hero behind it) */
#nav.nav-solid {
  position: sticky;
  background: rgba(7, 9, 13, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--border);
}

.container-wide { max-width: 960px; }

.section-tight { padding: clamp(34px, 5vw, 56px) 0; }

/* ---- Episode header ---- */
.episode-header {
  padding: clamp(48px, 8vw, 96px) 0 clamp(30px, 4vw, 48px);
  text-align: center;
  border-bottom: 1px solid var(--border);
  background: var(--bg-hero);
}

.ep-backlink {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  text-decoration: none;
  margin-bottom: 28px;
  transition: color 0.2s;
}
.ep-backlink:hover { color: var(--green-bright); }

.ep-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--green-bright);
  margin-bottom: 18px;
}

.ep-title {
  font-size: clamp(30px, 4.6vw, 52px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--text-1);
  margin-bottom: 16px;
}

.ep-guest {
  font-style: italic;
  font-weight: 300;
  font-size: clamp(17px, 2.2vw, 22px);
  color: var(--text-2);
  margin-bottom: 24px;
}

.ep-dek {
  max-width: 620px;
  margin: 0 auto 28px;
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.7;
  color: var(--text-1);
}

.ep-meta {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.ep-meta-dot { margin: 0 10px; }

/* ---- Section divider (reuse of home constellation slot, simpler) ---- */
.ep-divider {
  width: 42px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--green-mid), transparent);
  margin: 0 0 26px;
}

/* ---- YouTube facade ---- */
.yt-facade {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  background: #05060a center / cover no-repeat;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.yt-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(5, 6, 10, 0.45));
  transition: background 0.3s;
}
.yt-facade:hover::after { background: radial-gradient(ellipse at center, transparent 55%, rgba(5, 6, 10, 0.3)); }

.yt-play {
  position: absolute;
  z-index: 1;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.5));
}
.yt-play .yt-play-bg { fill: #212433; opacity: 0.92; transition: fill 0.25s; }
.yt-facade:hover .yt-play .yt-play-bg { fill: var(--green-mid); }

.yt-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Listen row ---- */
.listen-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-bright);
  text-align: center;
  margin-bottom: 22px;
}
.listen-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.listen-btn {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-1);
  text-decoration: none;
  padding: 10px 18px;
  border: 1px solid var(--border-light);
  border-radius: 1px;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.listen-btn:hover {
  border-color: var(--green-bright);
  background: rgba(82, 183, 136, 0.08);
  color: var(--green-bright);
}
.listen-btn-rss { color: var(--text-2); }

/* ---- Guest card ---- */
.guest-card {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 32px;
  align-items: start;
}
.guest-photo {
  width: 132px;
  height: 132px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--border-light);
}
.guest-name {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 500;
  color: var(--text-1);
  margin-bottom: 4px;
}
.guest-role {
  font-style: italic;
  font-weight: 300;
  color: var(--green-bright);
  margin-bottom: 16px;
}
.guest-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 18px;
}
.guest-links a {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.guest-links a:hover { color: var(--green-bright); border-color: var(--green-bright); }

/* ---- Chapters ---- */
.chapters { list-style: none; max-width: 640px; }
.chapter {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: opacity 0.2s;
}
.chapter:hover { opacity: 0.75; }
.chapter-time {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--green-bright);
  min-width: 52px;
}
.chapter-title { font-size: 15px; color: var(--text-1); }

/* ---- Transcript ---- */
.transcript {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.transcript-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-1);
}
.transcript-summary::-webkit-details-marker { display: none; }
.transcript-chevron {
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--text-2);
  border-bottom: 1.5px solid var(--text-2);
  transform: rotate(45deg);
  transition: transform 0.3s;
}
.transcript[open] .transcript-chevron { transform: rotate(-135deg); }
.transcript-body { padding: 8px 0 34px; max-width: 680px; }
.transcript-body p { color: var(--text-2); }
.transcript-body strong { color: var(--text-1); font-weight: 600; }

/* ---- Show notes ---- */
.shownotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
}
.shownotes-h {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 16px;
}
.shownotes-list { list-style: none; }
.shownotes-list li {
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.shownotes-list a {
  font-size: 15px;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.2s;
}
.shownotes-list a:hover { color: var(--green-bright); }

/* ---- Share ---- */
.share-block { text-align: center; }
.share-heading {
  font-style: italic;
  font-weight: 300;
  font-size: clamp(19px, 2.6vw, 26px);
  color: var(--text-1);
  margin-bottom: 26px;
}
.share-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.share-btn {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-1);
  text-decoration: none;
  padding: 10px 20px;
  border: 1px solid var(--border-light);
  border-radius: 1px;
  background: none;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.share-btn:hover {
  border-color: var(--green-bright);
  background: rgba(82, 183, 136, 0.08);
  color: var(--green-bright);
}
.share-copy.copied {
  border-color: var(--green-bright);
  color: var(--green-bright);
}

/* ================================================
   EPISODES INDEX (library)
   ================================================ */
.episodes-header {
  padding: clamp(48px, 8vw, 100px) 0 clamp(28px, 4vw, 44px);
  text-align: center;
  background: var(--bg-hero);
}
.episodes-header .ep-dek { margin-top: 6px; }

/* ---- Filter bar ---- */
.episodes-filterbar {
  position: sticky;
  top: 62px;
  z-index: 100;
  background: rgba(9, 11, 17, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}
.ep-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.ep-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-2);
  background: none;
  border: 1px solid var(--border-light);
  border-radius: 100px;
  padding: 7px 15px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.ep-filter-btn svg { width: 15px; height: 15px; }
.ep-filter-btn:hover { color: var(--text-1); border-color: var(--text-2); }
.ep-filter-btn.active {
  color: var(--bg-hero);
  background: var(--green-bright);
  border-color: var(--green-bright);
}

/* ---- Grid ---- */
.ep-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.ep-card {
  display: flex;
  gap: 22px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  text-decoration: none;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.ep-card:hover {
  border-color: rgba(82, 183, 136, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
}
.ep-card-media {
  flex-shrink: 0;
  width: 150px;
  height: 150px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-hero);
}
.ep-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ep-card.is-upcoming { opacity: 0.72; }
.ep-card.is-upcoming .ep-card-title { font-style: italic; }
.ep-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 4px;
}
.ep-card-num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-bright);
  margin-bottom: 9px;
}
.ep-card-title {
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-1);
  margin-bottom: 7px;
}
.ep-card-guest {
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  color: var(--text-2);
}
.ep-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
  padding-top: 16px;
}
.ep-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--text-2);
  border: 1px solid var(--border-light);
  border-radius: 100px;
  padding: 4px 10px 4px 8px;
}
.ep-tag svg { width: 13px; height: 13px; color: var(--green-bright); }

.ep-card.is-hidden { display: none; }

.ep-empty {
  text-align: center;
  color: var(--text-2);
  font-style: italic;
  padding: 40px 0;
}

/* ---- Prev / next pager ---- */
.episode-pager { border-top: 1px solid var(--border); background: var(--bg-deeper); }
.episode-pager .container {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 40px;
  padding-bottom: 40px;
}
.pager-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 46%;
  text-decoration: none;
}
.pager-next { text-align: right; margin-left: auto; }
.pager-dir {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-bright);
}
.pager-title { font-size: 15px; color: var(--text-1); transition: color 0.2s; }
.pager-link:hover .pager-title { color: var(--text-2); }

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
  .movements {
    grid-template-columns: 1fr;
    max-width: 520px;
    gap: 3px;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .about-visual { display: none; }

  .kosmology-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .k-glyph { font-size: 80px; }

  .guest-card { grid-template-columns: 1fr; gap: 20px; }
  .guest-photo { width: 104px; height: 104px; }
  .shownotes { grid-template-columns: 1fr; gap: 32px; }

  .ep-grid { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 480px) {
  .ep-card { gap: 16px; padding: 14px; }
  .ep-card-media { width: 96px; height: 96px; }
  .ep-card-tags { padding-top: 12px; }
}

@media (max-width: 640px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: fixed;
    inset: 0;
    background: rgba(7, 9, 13, 0.97);
    padding: 100px var(--pad) 40px;
  }
  .nav-links.open li { width: 100%; }
  .nav-links.open a {
    display: block;
    padding: 18px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
  }
  .nav-links.open .nav-cta {
    border: none;
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }

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

  .form-row { flex-direction: column; }
  .form-input {
    border-right: 1px solid var(--border-light);
    border-bottom: none;
  }
  .form-btn { padding: 15px; }

  .footer-row { flex-direction: column; align-items: flex-start; gap: 24px; }
}

@media (max-width: 480px) {
  .pull-quote { font-size: 20px; }
  .chorus-line { font-size: 20px; }
  .movement { padding: 28px 24px; }
  .topics-panel { padding: 28px 24px; }
}