/* One overview before the primary series; individual videos stay with their books. */
.series-video-overview { grid-column:1/-1; display:grid; grid-template-columns:minmax(180px,.75fr) minmax(0,1.25fr); align-items:center; gap:32px 48px; padding:32px; border-block:1px solid var(--line); background:var(--paper-deep); margin-block:8px; }
.series-video-stage { display:grid; place-items:center; min-width:0; }
.series-video-poster { position:relative; display:block; width:min(100%,210px); aspect-ratio:9/16; padding:0; border:0; background:var(--brand-navy); cursor:pointer; color:var(--brand-navy); }
.series-video-poster img { display:block; width:100%; height:100%; object-fit:contain; }
.series-video-play { position:absolute; inset:0; display:grid; place-items:center; }
.series-video-play::before { content:""; width:64px; height:64px; border-radius:50%; background:var(--brand-gold); box-shadow:0 3px 18px #10183244; }
.series-video-play::after { content:""; position:absolute; border-block:10px solid transparent; border-left:16px solid var(--brand-navy); margin-left:5px; }
.series-video-caption { position:absolute; bottom:0; inset-inline:0; padding:12px 8px; background:var(--brand-gold); font:600 13px/1.5 var(--sans); }
.series-video-caption span { display:block; font-size:11px; font-weight:400; }
.series-video-poster:focus-visible,.book-video-action:focus-visible { outline:2px solid var(--brand-navy); outline-offset:4px; }
.series-video-copy { min-width:0; }
.series-video-kicker { color:var(--ink-soft); font:600 11px var(--sans); letter-spacing:.1em; margin:0 0 12px; }
.series-video-copy h3 { font-size:clamp(24px,2.3vw,32px); line-height:1.3; margin:0 0 16px; max-width:24ch; }
.series-video-copy>p:not(.series-video-kicker) { color:var(--ink-soft); font-size:15px; margin:0 0 20px; }
.series-video-volumes { list-style:none; padding:0; margin:0; font-size:14px; }
.series-video-volumes li { display:grid; grid-template-columns:48px minmax(0,1fr); gap:14px; padding:10px 0; border-top:1px solid var(--line); }
.series-video-volumes strong { font-weight:650; }
.book-video-action { display:inline-flex; justify-content:center; align-items:center; min-height:44px; padding:8px 12px; background:transparent; color:var(--brand-navy); border:1px solid var(--brand-navy); font:600 14px var(--sans); cursor:pointer; }
.book-video-action:hover { background:var(--paper-deep); }
body.book-video-open { overflow:hidden; }

/* Size the frame from both viewport dimensions so the portrait video has no side bars. */
.book-video-dialog { width:min(460px,calc(100vw - 24px),calc((100dvh - 148px)*.5625)); max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); margin:auto; padding:0; border:1px solid #ffffff26; border-radius:12px; background:var(--brand-navy); color:#fff; overflow:auto; box-shadow:0 24px 80px #0005; }
.book-video-dialog::backdrop { background:#090f24d9; }
.book-video-dialog header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; margin:0; background:var(--brand-navy); }
.book-video-dialog h2 { min-width:0; margin:0; font:600 16px/1.45 var(--sans); overflow-wrap:anywhere; }
#book-video-close { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; padding:0; border:1px solid #ffffff38; border-radius:50%; background:#ffffff0d; color:#fff; font:26px/1 var(--sans); cursor:pointer; }
#book-video-close:hover { background:var(--brand-gold); color:var(--brand-navy); border-color:var(--brand-gold); }
.book-video-dialog :focus-visible { outline:2px solid var(--brand-gold); outline-offset:3px; }
#book-video-player { display:block; width:100%; height:auto; max-height:none; aspect-ratio:9/16; object-fit:contain; background:#0a1027; }
#book-video-message { color:#fff; font-size:13px; line-height:1.6; margin:0; padding:12px 14px; }
#book-video-message:empty { display:none; }
#book-video-fallback { display:flex; min-height:44px; align-items:center; color:var(--brand-gold); font-size:14px; margin:0 14px 12px; text-decoration:underline; text-underline-offset:3px; }
#book-video-fallback[hidden] { display:none; }
@media(max-width:650px) {
  .series-video-overview { grid-template-columns:minmax(0,1fr); gap:24px; padding:24px 18px; }
  .series-video-poster { width:min(100%,180px); }
  .series-video-copy h3 { font-size:25px; }
}
/* A short landscape screen needs the title beside the video to keep controls visible. */
@media(max-height:550px) and (min-aspect-ratio:1/1) {
  .book-video-dialog { width:min(560px,calc(100vw - 24px)); }
  .book-video-dialog[open] { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:min-content min-content 1fr; }
  .book-video-dialog header { grid-column:1; grid-row:1; align-self:start; }
  #book-video-player { grid-column:2; grid-row:1/4; width:calc((100dvh - 26px)*.5625); }
  #book-video-message { grid-column:1; grid-row:2; }
  #book-video-fallback { grid-column:1; grid-row:3; align-self:start; }
}