/* ============================================================
   VIDEO PAGES

   A transcript is a long column of spoken prose with a timecode down the
   left. It has to read like a document, not like a log file, which is the
   whole reason the cues are joined into paragraphs before they get here.

   Loaded only on a single video (see functions.php).
   ============================================================ */

.vwrap{max-width:860px}

/* who is speaking, when, how long */
.vcredit{
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#5C6A76;margin:0 0 22px}
.vcredit time{color:#5C6A76}

.vembed{
  position:relative;aspect-ratio:16/9;background:#0F1114;
  border-radius:var(--r);overflow:hidden;margin:0 0 30px}
.vembed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.vsummary{margin:0 0 34px}

/* ---------- Chapters ----------
   A numbered list of what is said and when. It is the part somebody scans
   before deciding to read, and the part a model reads to decide what the
   video is about. */
.vchapters{
  border:1px solid #D3E2EC;border-left:4px solid #5B3097;
  padding:22px 26px 20px;margin:0 0 34px}
.vchapters h2{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#5B3097;margin:0 0 12px}
.vchapters ol{margin:0;padding:0;list-style:none;counter-reset:vch}
.vchapters li{margin:0 0 7px;padding:0}
.vchapters li:last-child{margin-bottom:0}
/* main.css underlines every link inside a list and inside a paragraph, which
   is right for prose and wrong for a contents list and a timecode. Those rules
   name `main li a` and `main p a`, so these have to be at least as specific to
   win; weight, not !important. */
.vchapters li .vchapters__a{
  display:flex;gap:12px;align-items:baseline;
  font-size:15.5px;line-height:1.5;color:#1C2025;text-decoration:none}
.vchapters li .vchapters__a:hover{color:#5B3097}
.vchapters li .vchapters__a:hover .vchapters__t{color:#5B3097}
.vchapters__t{
  flex:0 0 auto;min-width:48px;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-variant-numeric:tabular-nums;font-size:13px;font-weight:600;
  color:#5C6A76}

/* ---------- The transcript ---------- */
/* The note sits between two hairlines: the one it draws itself and the one
   the related block draws. 14px above it and 38px below read as a mistake, so
   the block's own bottom margin matches the note's padding and the line is
   centred between the two rules. */
.vtranscript{margin:0 0 14px}
.vtranscript h2{
  font-family:'Fraunces','Georgia',serif;font-weight:500;
  font-size:1.7rem;line-height:1.2;letter-spacing:-.01em;
  color:#002E48;margin:0 0 18px}

.vcue{
  display:grid;grid-template-columns:62px 1fr;gap:0 14px;
  font-size:17px;line-height:1.75;color:#2B3238;
  margin:0 0 18px;scroll-margin-top:90px}
.vcue:target{background:#F3EEFA;border-radius:4px;padding:8px 10px;margin-left:-10px}

/* the timecode plays the video from that line; it is a link, and it looks
   like a label rather than like body text so the column stays quiet */
.vtranscript p .vcue__t{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600;
  letter-spacing:.02em;color:#8A96A0;text-decoration:none;
  padding-top:5px}
.vtranscript p .vcue__t:hover{color:#5B3097;text-decoration:underline;text-underline-offset:3px}

.vnote{
  font-size:13px;line-height:1.6;color:#5C6A76;
  border-top:1px solid #E2E5E9;padding-top:14px;margin:26px 0 0}

/* ---------- Related ---------- */
.vrelated{border-top:1px solid #E2E5E9;padding-top:26px}
.vrelated h2{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#5C6A76;margin:0 0 14px}
.vrelated ul{margin:0;padding:0;list-style:none}
.vrelated li{margin:0 0 10px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.vrelated a{
  font-family:'Fraunces','Georgia',serif;font-size:18px;line-height:1.3;
  color:#002E48;text-decoration:none}
.vrelated a:hover{color:#5B3097;text-decoration:underline;text-underline-offset:3px}
.vrelated__tag{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#5B3097;border:1px solid #D9CCEC;border-radius:2px;padding:2px 6px}

@media(max-width:620px){
  /* the timecode column costs more than it gives on a phone: it goes above
     the line it belongs to rather than squeezing the prose */
  .vcue{grid-template-columns:1fr;gap:2px}
  .vtranscript p .vcue__t{padding-top:0}
  .vchapters{padding:18px 18px 16px}
  .vtranscript h2{font-size:1.4rem}
}