/* Cast page: a dark, cinematic stage for a row of presenters. */
.cast-page { --bg: #07080b; --bg2: #0f1116; background: var(--bg); }
.cast-hero { position: relative; padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 48px) 32px; text-align: center; display: grid; justify-items: center; overflow: hidden; }
.cast-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(50% 45% at 50% 78%, rgba(233, 165, 90, .20), transparent 70%),
  radial-gradient(35% 30% at 18% 20%, rgba(90, 120, 200, .10), transparent 70%),
  radial-gradient(35% 30% at 82% 22%, rgba(200, 100, 58, .12), transparent 70%),
  linear-gradient(180deg, #0b0c10, #07080b 60%); }
.cast-hero .lede { margin: 18px auto 20px; }
.cast-hero h1 { font-size: clamp(44px, 7vw, 104px); }
.cast { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 2vw, 28px); width: min(100%, 1320px); margin: clamp(24px, 4vw, 48px) 0 0; padding: 0; }
.alive-cast-card { margin: 0; display: grid; gap: 12px; justify-items: center; }
.alive-cast-card:nth-child(even) { transform: translateY(clamp(8px, 2.4vw, 34px)); }
.alive-portrait { position: relative; width: 100%; aspect-ratio: 4 / 5; --arch-x0: .05; --arch-x1: .95; --arch-top: .16; touch-action: pan-y; border-radius: 10px; }
.alive-portrait::before { content: ""; position: absolute; left: calc(var(--arch-x0) * 100%); right: calc((1 - var(--arch-x1)) * 100%); top: calc(var(--arch-top) * 100%); bottom: 0; border-radius: 9999px 9999px 0 0;
  background: radial-gradient(90% 70% at 50% 25%, #2c3244 0%, #151822 55%, #0b0d12 100%);
  box-shadow: inset 0 0 0 1px rgba(246, 215, 168, .28), inset 0 -60px 80px -40px rgba(233, 165, 90, .35), 0 30px 80px -30px rgba(0, 0, 0, .9); }
.alive-cast-card:nth-child(3) .alive-portrait::before { background: radial-gradient(90% 70% at 50% 25%, #7a3d24 0%, #3a1c14 55%, #120a08 100%); }
.alive-portrait img, .alive-portrait canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.alive-portrait canvas { opacity: 0; }
.alive-cast-card figcaption { display: grid; gap: 2px; text-align: center; }
.alive-cast-card figcaption b { font: 600 18px/1.2 var(--display); }
.alive-cast-card figcaption span { font-size: 13px; color: var(--muted); }
.cast-note { margin: clamp(40px, 5vw, 64px) 0 0; font-size: 13px; color: var(--muted); }
.embed { max-width: 920px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) clamp(16px, 4vw, 48px); }
.embed h2 { font-size: clamp(30px, 4vw, 48px); }
.embed p { color: #cfc8bd; }
.embed pre { overflow-x: auto; background: #0f1116; border: 1px solid var(--line); border-radius: 14px; padding: 18px; font-size: 13px; line-height: 1.55; margin: 20px 0 32px; }
.embed code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .92em; }
.embed details { border-top: 1px solid var(--line); }
.embed summary { cursor: pointer; font: 600 18px/1.3 var(--display); padding: 14px 0; min-height: 44px; }
@media (max-width: 860px) {
  .cast { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 28px; }
  .alive-cast-card { grid-column: span 2; }
  .alive-cast-card:nth-child(4) { grid-column: 2 / span 2; }
  .alive-cast-card:nth-child(even) { transform: none; }
}
@media (max-width: 560px) {
  .alive-cast-card, .alive-cast-card:nth-child(4) { grid-column: span 3; }
  .alive-cast-card:nth-child(5) { grid-column: 2 / span 4; }
}