@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,700;1,9..144,300&display=swap');

:root {
  --void: #0a0a10; --deep: #0f0f1a; --surface: #161625;
  --edge: #2a2a44; --muted: #8888aa; --text: #d0d0e2;
  --bright: #eeeef5; --white: #f5f5ff; --amber: #e8a83e;
  --amber-dim: #c4882a; --teal: #4ecdc4;
}

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

body {
  font-family: 'DM Mono', 'SF Mono', monospace;
  background: var(--void); color: var(--text);
  line-height: 1.7; min-height: 100vh;
}

a { color: var(--amber); text-decoration: none; }
a:visited { color: var(--amber); }
a:hover { color: var(--text); }

main {
  max-width: 720px; margin: 0 auto;
  padding: 3rem 1.5rem 2rem;
}

nav {
  font-size: 0.62rem; color: var(--muted);
  letter-spacing: 0.04em; margin-bottom: 1.5rem;
}
nav a { color: var(--muted); border-bottom: 1px solid var(--edge); }
nav a:hover { color: var(--amber); border-color: var(--amber-dim); }

h1 {
  font-family: 'Fraunces', serif; font-weight: 300;
  font-size: 2.6rem; color: var(--white);
  letter-spacing: -0.02em; margin-bottom: 0.5rem;
}

main > p:first-of-type {
  color: var(--muted); font-size: 0.78rem;
  letter-spacing: 0.04em; line-height: 1.8;
  max-width: 55ch; margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--edge);
  position: relative;
}
main > p:first-of-type::after {
  content: ''; position: absolute;
  bottom: -1px; left: 0; width: 80px; height: 1px;
  background: var(--amber);
}

section { margin-bottom: 2.5rem; }

h2 {
  font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 1rem; padding-left: 2px;
}

.player {
  background: var(--deep); border: 1px solid var(--edge);
  border-radius: 6px; padding: 1.2rem 1.3rem;
}
.player audio { width: 100%; margin-bottom: 0.8rem; border-radius: 4px; }
.player p { font-size: 0.7rem; color: var(--muted); line-height: 1.8; }
.player strong { color: var(--bright); }

.topic {
  background: var(--deep); border: 1px solid var(--edge);
  border-left: 3px solid var(--amber); border-radius: 4px;
  padding: 0.8rem 1.1rem; margin-bottom: 0.6rem;
}
.topic h3 {
  font-size: 0.72rem; color: var(--bright);
  font-weight: 500; margin-bottom: 0.2rem;
}
.topic p {
  font-size: 0.68rem; color: var(--muted); line-height: 1.7;
}
.topic strong { color: var(--teal); }
.topic audio { width: 100%; height: 32px; margin-top: 0.5rem; border-radius: 3px; }

.cast {
  list-style: none; padding: 0;
  background: var(--deep); border: 1px solid var(--edge);
  border-radius: 6px; padding: 1.2rem 1.3rem;
}
.cast li {
  font-size: 0.72rem; line-height: 1.8;
  padding: 0.2rem 0; border-bottom: 1px solid var(--edge);
}
.cast li:last-child { border-bottom: none; }
.cast strong { color: var(--bright); }

section p {
  font-size: 0.78rem; color: var(--text);
  line-height: 1.8; max-width: 60ch;
  margin-bottom: 1rem;
}
section p:last-child { margin-bottom: 0; }

.sources p { font-size: 0.68rem; color: var(--muted); }

.transcript { margin-top: 1rem; }
.transcript .line {
  margin-bottom: 0.5rem; padding: 0.4rem 0.7rem;
  border-radius: 4px; font-size: 0.75rem; line-height: 1.8;
}
.transcript .line .speaker {
  font-size: 0.5rem; letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: 0.1rem; font-weight: 500;
}
.transcript .line p { margin: 0; max-width: none; font-size: 0.75rem; }
.transcript .line.rich { background: var(--deep); border-left: 3px solid var(--teal); }
.transcript .line.rich .speaker { color: var(--teal); }
.transcript .line.octopus { background: var(--deep); border-left: 3px solid #5588dd; }
.transcript .line.octopus .speaker { color: #5588dd; }
.transcript .line.crab { background: var(--deep); border-left: 3px solid #cc8844; }
.transcript .line.crab .speaker { color: #cc8844; }
.transcript .line.james { background: var(--deep); border-left: 3px solid var(--amber); }
.transcript .line.james .speaker { color: var(--amber); }
.transcript .line.stage {
  background: transparent; border-left: 3px solid #2a2a44;
  font-size: 0.7rem; font-style: italic;
}
.transcript .line.stage .speaker { color: var(--muted); }
.transcript .break { margin: 1rem 0; height: 1px; background: #2a2a44; }

footer {
  max-width: 720px; margin: 0 auto;
  padding: 0 1.5rem 3rem;
  border-top: 1px solid var(--edge);
  padding-top: 1.5rem;
  font-size: 0.62rem; color: var(--muted);
}
footer a { color: var(--muted); border-bottom: 1px solid var(--edge); }
footer a:hover { color: var(--amber); border-color: var(--amber-dim); }
footer p { margin-top: 1rem; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
main { animation: fadeUp 0.4s ease-out both; }

@media (max-width: 600px) {
  main { padding: 1.5rem 1rem 2rem; }
  h1 { font-size: 1.8rem; }
  footer { padding: 1rem 1rem 2rem; }
}