/* ============================================================
   Worlds — light, airy, glass. Layered over the base stylesheet.
   ============================================================ */
:root, :root:not([data-theme="dark"]) {
  --bg: #f5f7fb;
  --bg-elevated: rgba(255, 255, 255, 0.62);
  --ink: #0f1a2e;
  --ink-muted: #46526a;
  --ink-faint: #7a859b;
  --divider: rgba(15, 26, 46, 0.09);
  --divider-strong: rgba(15, 26, 46, 0.18);
  --copper: #2f5fd0;            /* legacy accent name, now clinical azure */
  --copper-ink: #1d4bb8;
  --marine: #0f7d86;
  --accent: #2f5fd0;
  --aura-1: rgb(190 225 250); --aura-2: rgb(214 236 246); --aura-3: rgb(236 228 250);
  --glass: rgba(255, 255, 255, 0.52);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --glass-edge: rgba(255, 255, 255, 0.85);
  --glass-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 0 0 1px rgba(15,26,46,0.05), 0 18px 50px -18px rgba(24, 44, 88, 0.22), 0 2px 6px -2px rgba(24,44,88,0.08);
  --blur: saturate(1.7) blur(22px);
  --font-serif: "Zodiak", "Iowan Old Style", Georgia, serif;
  --font-sans: "Switzer", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radius-glass: 26px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="dark"]) {
    --bg: #f5f7fb; --ink: #0f1a2e; --ink-muted: #46526a; --ink-faint: #7a859b;
    --divider: rgba(15, 26, 46, 0.09); --divider-strong: rgba(15, 26, 46, 0.18);
    --copper: #2f5fd0; --copper-ink: #1d4bb8; --marine: #0f7d86;
  }
}
[data-theme="dark"] {
  --bg: #070b14;
  --bg-elevated: rgba(20, 28, 46, 0.6);
  --ink: #eef2fa; --ink-muted: #aab4c8; --ink-faint: #7c879d;
  --divider: rgba(255,255,255,0.10); --divider-strong: rgba(255,255,255,0.2);
  --copper: #7fa6ff; --copper-ink: #a8c2ff; --accent: #7fa6ff; --marine: #5fd6d0;
  --glass: rgba(18, 26, 44, 0.46);
  --glass-strong: rgba(14, 20, 36, 0.8);
  --glass-edge: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 0 0 1px rgba(255,255,255,0.06), 0 24px 60px -20px rgba(0,0,0,0.6);
}
[data-theme="dark"] body::before { opacity: 0.16; }

html { background: var(--bg); }
body {
  background: transparent;
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "kern";
  letter-spacing: -0.003em;
  position: relative;
  overflow-x: clip;
}

/* ---------- the world layers ---------- */
body::before {                 /* aurora */
  content: ""; position: fixed; inset: -10vmax; z-index: -3; pointer-events: none;
  background:
    radial-gradient(38vmax 34vmax at 78% 18%, var(--aura-1), transparent 70%),
    radial-gradient(34vmax 30vmax at 12% 72%, var(--aura-2), transparent 70%),
    radial-gradient(30vmax 26vmax at 58% 96%, var(--aura-3), transparent 70%);
  transition: background 0.6s linear;
  animation: aura-drift 38s ease-in-out infinite alternate;
}
body::after {                  /* fine grain for tactility */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.35; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@keyframes aura-drift { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(-3vmax, 2vmax, 0) scale(1.06); } }
#world-canvas {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: -2; pointer-events: none;
  opacity: 0; transition: opacity 1.4s var(--ease-out);
}
.world-ready #world-canvas { opacity: 1; }

/* ---------- glass primitive ---------- */
.glass, .card, .ep-item, .featured-inner, .press-card, .newsletter-block .wrap, .comments-section,
.ep-hero, .ep-marginalia, .site-footer .footer-grid, .essay-sheet, .page-sheet, .chip, .topic-tag {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .card, .ep-item, .featured-inner, .press-card, .essay-sheet, .page-sheet { background: var(--glass-strong); }
}

/* ---------- type ---------- */
h1, h2, h3, .hero-title, .essay-title, .ep-title-h1, .podcast-hero-title {
  font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.022em; color: var(--ink);
}
h1 { font-size: clamp(2.6rem, 1.4rem + 4.2vw, 5.2rem); line-height: 0.98; }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.1rem); line-height: 1.04; }
h3 { font-size: clamp(1.18rem, 1rem + 0.5vw, 1.42rem); line-height: 1.22; letter-spacing: -0.012em; }
em, .brand-name em { font-family: var(--font-serif); font-style: italic; }
.kicker, .eyebrow, .ep-num, .ep-meta, .section-rule span {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
}
.deck { color: var(--ink-muted); font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.28rem); line-height: 1.5; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ---------- header: floating glass pill ---------- */
.site-header {
  position: sticky; top: 14px; z-index: 60; background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 0 max(12px, env(safe-area-inset-left));
}
.site-header .header-wrap {
  max-width: min(1180px, 100%); min-height: 60px; padding: 0 10px 0 18px; border-radius: 999px;
  background: color-mix(in srgb, var(--glass-strong) 80%, transparent);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow);
}
.brand { font-size: 19px; }
.brand-mark img { width: 30px; height: 30px; border-radius: 50%; }
.nav-link { font-size: 14px; padding: 8px 12px; border-radius: 999px; color: var(--ink-muted); transition: background .25s var(--ease-out), color .25s; }
.nav-link:hover { color: var(--ink); background: rgba(255,255,255,0.55); }
[data-theme="dark"] .nav-link:hover { background: rgba(255,255,255,0.07); }
.nav-link.is-active { text-decoration: none; color: var(--ink); background: rgba(255,255,255,0.7); box-shadow: 0 0 0 1px var(--divider); }
[data-theme="dark"] .nav-link.is-active { background: rgba(255,255,255,0.1); }
.site-nav { gap: 2px; }
.nav-cta, .btn-primary {
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink); border-radius: 999px;
  box-shadow: 0 8px 22px -10px rgba(15,26,46,0.55), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .25s;
}
.nav-cta { margin-left: 8px; padding: 9px 16px; }
.nav-cta:hover, .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-1px); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn { border-radius: 999px; padding: 13px 22px; font-weight: 500; letter-spacing: 0; }
.btn-secondary {
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-edge); color: var(--ink); box-shadow: var(--glass-shadow);
  transition: transform .35s var(--ease-out), background .25s;
}
.btn-secondary:hover { transform: translateY(-1px); background: var(--glass-strong); color: var(--ink); }
.theme-toggle { border-radius: 999px; }
@media (max-width: 900px) {
  .site-header { top: 10px; }
  .site-nav.is-open, .site-nav[data-open="true"] {
    background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
    border: 1px solid var(--glass-edge); border-radius: 24px; box-shadow: var(--glass-shadow);
  }
}

/* ---------- shared components ---------- */
main { position: relative; }
.card { border-radius: var(--radius-glass); padding: 28px; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background .3s; }
a.card:hover, .card:hover { transform: translateY(-4px); background: var(--glass-strong); }
.card h3 { margin-top: 14px; }
.card p { color: var(--ink-muted); }
.card-grid { gap: 18px; }
.ep-list { display: grid; gap: 12px; border: 0; }
.ep-item {
  border-radius: 22px; padding: 22px 26px; border-bottom: 1px solid var(--glass-edge) !important;
  transition: transform .45s var(--ease-out), background .3s;
}
.ep-item:hover { transform: translateX(4px); background: var(--glass-strong); }
.ep-title a, .card, .card h3 { text-decoration: none; }
.ep-title a::after { content: ""; position: absolute; inset: 0; }
.ep-item { position: relative; }
.featured, .proof, .topic-explorer, .newsletter-block { background: transparent !important; border: 0 !important; }
.featured-inner { border-radius: 32px; padding: clamp(20px, 3vw, 40px); }
.featured-cover img { border-radius: 20px; box-shadow: 0 20px 50px -20px rgba(15,26,46,0.45); }
.section-rule { border: 0; display: flex; align-items: center; gap: 14px; margin: var(--space-7) 0 var(--space-5); }
.section-rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--divider-strong), transparent); }
.section-rule span { background: none; padding: 0; }
.topic-tag, .chip { border-radius: 999px; padding: 10px 16px; transition: transform .35s var(--ease-out), background .25s; text-decoration: none; }
.topic-tag:hover, .chip:hover { transform: translateY(-2px); background: var(--glass-strong); }
.input {
  border-radius: 999px; background: rgba(255,255,255,0.7); border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 2px rgba(15,26,46,0.06); padding: 13px 20px;
}
[data-theme="dark"] .input { background: rgba(255,255,255,0.06); }
.input:focus { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); }
.newsletter-block .wrap { border-radius: 32px; padding: clamp(28px, 5vw, 64px) !important; }
.press-card { border-radius: var(--radius-glass); }
.comments-section { border-radius: var(--radius-glass); padding: clamp(20px, 3vw, 36px); margin-top: var(--space-7); }
.mini-player { color: var(--ink); transform: translateX(-50%) translateY(180%); opacity: 0; transition: transform .5s var(--ease-out), opacity .3s; }
.mini-player.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.mini-player { background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); border-radius: 20px; }
table td { border-color: var(--divider) !important; }

/* episode body */
.ep-body > .wrap { border-radius: 34px; padding: clamp(22px, 4vw, 56px); background: color-mix(in srgb, var(--glass-strong) 88%, transparent); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); }
.ep-marginalia { align-self: start; position: sticky; top: 96px; border-radius: 22px; padding: 20px; background: rgba(255,255,255,0.45); box-shadow: none; }
[data-theme="dark"] .ep-marginalia { background: rgba(255,255,255,0.04); }
@media (max-width: 900px) { .ep-marginalia { position: static; } .ep-body > .wrap { border-radius: 26px; } }

/* reading pages: a sheet of frosted glass under the text */
.page-sheet, .essay-sheet {
  border-radius: 34px; padding: clamp(24px, 5vw, 72px) !important;
  background: color-mix(in srgb, var(--glass-strong) 88%, transparent);
  margin-top: var(--space-6) !important; margin-bottom: var(--space-8) !important;
}
.essay .essay-header { border-bottom: 1px solid var(--divider); padding-bottom: var(--space-5); }
.essay-content { font-size: 1.08rem; line-height: 1.75; }
.essay-content blockquote {
  font-family: var(--font-serif); font-size: 1.45rem; line-height: 1.35; border: 0; margin: 2em 0; padding: 22px 26px;
  border-radius: 22px; background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--ink);
}
.dropcap { font-family: var(--font-serif); color: var(--accent); }

/* hub heroes: leave the right side for the world */
.page-hero { padding: clamp(72px, 12vh, 150px) 0 clamp(40px, 8vh, 90px) !important; min-height: min(78vh, 760px); display: flex; flex-direction: column; justify-content: center; }
.page-hero > * { max-width: 620px; }
.page-hero h1 { max-width: 13ch; }

/* footer */
.site-footer { background: transparent; border: 0; padding: var(--space-8) 0 var(--space-6); }
.site-footer .footer-grid { border-radius: 34px; padding: clamp(28px, 4vw, 52px); }
.footer-motto { font-family: var(--font-serif); font-size: 1.9rem; }
.footer-meta { border: 0; }

/* ============================================================
   Homepage — five chapters
   ============================================================ */
.page-home main { overflow: clip; }
.chapter { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: clamp(90px, 14vh, 160px) 0; }
.chapter-inner { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.chapter[data-side="left"] .chapter-copy { grid-column: 2; }
.chapter[data-side="center"] .chapter-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.chapter-copy { max-width: 580px; }
.chapter-mark {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 26px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted);
}
.chapter-mark .num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); color: var(--ink); letter-spacing: 0; }
.chapter-mark .line { width: 44px; height: 1px; background: currentColor; opacity: .4; }
.chapter h2 { margin: 0 0 18px; }
.chapter .deck { max-width: 46ch; }
.chapter-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* hero (breath) */
.home-hero .chapter-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.home-hero h1 { font-size: clamp(3.2rem, 1.6rem + 6vw, 7.4rem); line-height: 0.92; margin: 0; letter-spacing: -0.035em; }
.home-hero .hero-rotator-word { color: var(--accent); }
.home-hero .hero-motto { font-family: var(--font-serif); font-style: italic; font-size: 1.35rem; color: var(--ink-muted); margin: 22px 0 10px; }
.hero-portrait-glass {
  position: relative; justify-self: center; width: min(340px, 100%); border-radius: 32px; padding: 10px;
  transform: rotate(1.5deg);
}
.hero-portrait-glass img { border-radius: 26px; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; }
.hero-portrait-glass figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 8px 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.hero-portrait-glass .live { display: inline-flex; align-items: center; gap: 8px; }
.hero-portrait-glass .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1f9d55; box-shadow: 0 0 0 0 rgba(31,157,85,0.5); animation: live 2.2s infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(31,157,85,0.45); } 70% { box-shadow: 0 0 0 10px rgba(31,157,85,0); } 100% { box-shadow: 0 0 0 0 rgba(31,157,85,0); } }
.scroll-cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); text-decoration: none !important; }
.scroll-cue span { width: 1px; height: 46px; background: linear-gradient(var(--ink-faint), transparent); animation: cue 2.4s var(--ease-out) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* pulse — the podcast */
.ep-feature { border-radius: 32px; padding: clamp(18px, 2.2vw, 28px); display: grid; grid-template-columns: 132px 1fr; gap: 22px; align-items: center; margin-top: 30px; text-decoration: none !important; transition: transform .5s var(--ease-out), background .3s; }
.ep-feature:hover { transform: translateY(-3px); background: var(--glass-strong); }
.ep-feature img { width: 132px; height: 132px; border-radius: 20px; object-fit: cover; }
.ep-feature h3 { margin: 8px 0 6px; }
.ep-feature p { margin: 0; color: var(--ink-muted); font-size: 0.95rem; }
.ep-mini { display: grid; gap: 8px; margin-top: 14px; }
.ep-mini a { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: baseline; padding: 14px 20px; border-radius: 18px; text-decoration: none !important; transition: background .3s, transform .4s var(--ease-out); }
.ep-mini a:hover { background: var(--glass-strong); transform: translateX(4px); }
.ep-mini .n { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-faint); }
.ep-mini .t { font-size: 0.98rem; color: var(--ink); line-height: 1.35; }
.ep-mini .d { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }

/* code — the essays */
.essay-stack { display: grid; gap: 14px; margin-top: 30px; }
.essay-stack a { display: block; border-radius: 26px; padding: 24px 28px; text-decoration: none !important; transition: transform .5s var(--ease-out), background .3s; }
.essay-stack a:nth-child(2) { margin-left: clamp(0px, 3vw, 40px); }
.essay-stack a:nth-child(3) { margin-left: clamp(0px, 6vw, 80px); }
.essay-stack a:hover { transform: translateY(-3px); background: var(--glass-strong); }
.essay-stack h3 { margin: 10px 0 6px; }
.essay-stack p { margin: 0; color: var(--ink-muted); font-size: 0.95rem; }

/* signal — the topics */
.topic-constellation { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.topic-constellation .topic-tag { font-size: 0.95rem; display: inline-flex; align-items: center; gap: 10px; }
.topic-constellation .topic-tag .count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
.topic-constellation .topic-tag:nth-child(3n+1) { transform: translateY(6px); }
.topic-constellation .topic-tag:nth-child(3n+1):hover { transform: translateY(3px); }

/* monitor — vitals + subscribe */
.vitals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: min(980px, 100%); margin: 36px auto 0; }
.vital { border-radius: 24px; padding: 18px 20px; text-align: left; }
.vital .lbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); display: flex; justify-content: space-between; }
.vital .lbl i { font-style: normal; width: 8px; height: 8px; border-radius: 50%; background: var(--vc, #1f9d55); margin-top: 2px; }
.vital .val { font-family: var(--font-mono); font-weight: 500; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); letter-spacing: -0.04em; color: var(--vc, #1f9d55); line-height: 1.1; margin-top: 8px; }
.vital:nth-child(2) { --vc: #0e8fb0; } .vital:nth-child(3) { --vc: #c2415a; } .vital:nth-child(4) { --vc: #5b4fd0; }
[data-theme="dark"] .vital { --vc: #4ef08a; } [data-theme="dark"] .vital:nth-child(2) { --vc: #5ad8ff; } [data-theme="dark"] .vital:nth-child(3) { --vc: #ff7b92; } [data-theme="dark"] .vital:nth-child(4) { --vc: #a79bff; }
.subscribe-glass { width: min(760px, 100%); margin: 16px auto 0; border-radius: 32px; padding: clamp(24px, 4vw, 44px); text-align: left; }
.subscribe-glass h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 0 0 8px; }
.subscribe-glass .newsletter-form { margin-top: 18px; }
.coda { font-family: var(--font-serif); font-style: italic; font-size: clamp(2.4rem, 1.2rem + 4vw, 5rem); letter-spacing: -0.03em; margin-top: 48px; line-height: 1; }
.coda small { display: block; font-family: var(--font-mono); font-style: normal; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); margin-top: 16px; }

/* chapter index (right rail) */
.world-index { position: fixed; right: 12px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 999px; }
.world-index a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 30px; padding: 0 8px; text-decoration: none !important; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); border-radius: 999px; }
.world-index a b { font-weight: 400; max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .5s var(--ease-out); }
.world-index a:hover b { max-width: 90px; }
.world-index a i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .35; transition: transform .4s var(--ease-out), opacity .3s; flex: none; }
.world-index a.is-current { color: var(--ink); }
.world-index a.is-current i { opacity: 1; transform: scale(1.35); background: var(--accent); }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out), filter 1s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; filter: none; }
.reveal[data-d="1"] { transition-delay: .08s; } .reveal[data-d="2"] { transition-delay: .16s; } .reveal[data-d="3"] { transition-delay: .24s; } .reveal[data-d="4"] { transition-delay: .32s; }

/* ---------- responsive ---------- */
@media (max-width: 1360px) { .world-index a span { display: none; } .world-index a { padding: 0 6px; } }
@media (max-width: 900px) {
  .chapter-inner, .home-hero .chapter-inner { grid-template-columns: 1fr; }
  .chapter[data-side="left"] .chapter-copy { grid-column: auto; }
  .chapter { min-height: auto; padding: 96px 0; }
  .chapter-copy { padding: 26px; border-radius: 30px; background: color-mix(in srgb, var(--glass) 70%, transparent); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); }
  .home-hero .chapter-copy { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; }
  .home-hero { min-height: auto; padding-top: 70px; }
  .hero-portrait-glass { justify-self: center; transform: none; width: min(360px, 100%); }
  .world-index { display: none; }
  .vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ep-feature { grid-template-columns: 88px 1fr; } .ep-feature img { width: 88px; height: 88px; }
  .ep-mini a { grid-template-columns: 52px 1fr; } .ep-mini .d { display: none; }
  .essay-stack a:nth-child(n) { margin-left: 0; }
  .page-hero { min-height: auto; }
  .scroll-cue { display: none; }
}
@media (max-width: 720px) {
  .ep-item { grid-template-columns: minmax(0, 1fr) !important; padding: 18px 20px; row-gap: 6px; }
  .ep-item > * { min-width: 0; grid-column: 1 / -1 !important; }
  .ep-item:hover { transform: none; }
  .ep-marginalia, .ep-marginalia dl { min-width: 0; max-width: 100%; }
  .ep-marginalia dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .ep-marginalia dd { overflow-wrap: anywhere; }
  .ep-body-grid > * { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .reveal { opacity: 1; transform: none; filter: none; }
}

/* long raw URLs in show notes and essays */
.ep-body a, .essay-sheet a, .page-sheet a { overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 560px) {
  .ep-feature { grid-template-columns: 1fr; gap: 14px; }
  .ep-feature img { width: 88px; height: 88px; border-radius: 16px; }
}
[data-theme="dark"] img[src*="ugo-logo"] { filter: invert(1) hue-rotate(180deg); }

/* media page */
.media-sheet { max-width: 960px; }
.media-block { margin-top: 36px; }
.media-block .eyebrow, .yt-copy .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; display: block; }
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.follow-pill { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px 10px 13px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink) !important; text-decoration: none !important; background: rgba(255,255,255,.55); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform .3s var(--ease-out), background .2s, box-shadow .3s; }
.follow-pill svg { width: 17px; height: 17px; flex: none; }
.follow-pill:hover { transform: translateY(-2px); background: rgba(255,255,255,.85); box-shadow: 0 10px 24px -12px rgba(15,26,46,.35); }
.follow-pill.is-primary { background: var(--ink); color: var(--bg) !important; border-color: transparent; }
.follow-pill.is-primary svg { color: #ff3b30; }
[data-theme="dark"] .follow-pill { background: rgba(255,255,255,.06); }
[data-theme="dark"] .follow-pill:hover { background: rgba(255,255,255,.12); }
.yt-card { margin-top: 36px; display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 22px 24px; border-radius: 28px; text-decoration: none !important; color: var(--ink) !important; transition: transform .4s var(--ease-out); }
.yt-card:hover { transform: translateY(-3px); }
.yt-mark { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: #ff0033; color: #fff; }
.yt-mark svg { width: 30px; height: 30px; }
.yt-copy { display: flex; flex-direction: column; gap: 3px; }
.yt-copy .eyebrow { margin-bottom: 2px; }
.yt-copy strong { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; }
.yt-copy span:last-child { color: var(--ink-muted); font-size: .95rem; }
@media (max-width: 640px) { .yt-card { grid-template-columns: auto 1fr; } .yt-cta { grid-column: 1 / -1; justify-self: start; } }
.vital .val-word { font-size: clamp(1.25rem, 2.2vw, 1.7rem); letter-spacing: -0.01em; }
.vital .sub { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }