/* Lecture player for a module page. A video-sized black frame shows, for the passage
   being spoken, the section, a title and the main points on the left and the drawing
   in a box on the right, with captions underneath. The lecture itself is audio.
   Driven by lecture-player.js; every word is in the page's own serif. */
.lecture{margin:2.2rem 0 0}
@media (min-width:720px){
  .lecture{position:relative;left:50%;transform:translateX(-50%);width:min(60rem,calc(100vw - 64px))}
}
.lecture.no-js .lecture-player{display:none}
.lecture-audio{display:block;width:100%}
.lecture.ready .lecture-audio{display:none}

.lecture-player{container-type:inline-size;border:1px solid #000000;background:#000000;color:#FFFFFF}
.lecture-stage{
  position:relative;aspect-ratio:16/9;cursor:pointer;outline:none;
  display:grid;grid-template-columns:minmax(0,41fr) minmax(0,55fr);grid-template-rows:auto 1fr auto;
  grid-template-areas:"label label" "notes doodle" "caption caption";
  column-gap:4cqw;row-gap:1.4cqw;padding:3.4cqw 4.4cqw 2.2cqw;
}
.lecture-stage:focus-visible{box-shadow:inset 0 0 0 2px #FFFFFF}

.lecture-label{grid-area:label;margin:0;font-size:11px;font-size:clamp(9px,1.1cqw,12px);letter-spacing:.14em;text-transform:uppercase;line-height:1.3}
.lecture-label .n{display:inline-block;min-width:1.6em;font-weight:600}

.lecture-notes{grid-area:notes;align-self:center;transition:opacity .35s ease}
.lecture-notes.fade{opacity:0;transition:opacity .16s ease}
.lecture-title{margin:0 0 1.4cqw;font-weight:600;line-height:1.2;letter-spacing:-.01em;font-size:22px;font-size:clamp(15px,2.3cqw,25px)}
.lecture-points{list-style:none;margin:0;padding:0;line-height:1.45;font-size:15px;font-size:clamp(12px,1.5cqw,16.5px)}
.lecture-points li{position:relative;padding-left:1.15em;margin:0 0 .75em}
.lecture-points li:last-child{margin-bottom:0}
.lecture-points li::before{content:"";position:absolute;left:0;top:.72em;width:.55em;border-top:1px solid #FFFFFF}

.lecture-doodle{grid-area:doodle;align-self:center;position:relative;aspect-ratio:16/9;border:1px solid #FFFFFF}
.lecture-doodle .layer{position:absolute;inset:0;background:#000000 center/contain no-repeat;opacity:0;transition:opacity .5s ease}
.lecture-doodle .layer.on{opacity:1}

.lecture-caption{grid-area:caption;margin:0;min-height:2.9em;display:flex;align-items:flex-end;justify-content:center;text-align:center;line-height:1.45;font-size:15px;font-size:clamp(12px,1.55cqw,17px)}
.lecture-caption.off{visibility:hidden}

.lecture-start{
  position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:4.4rem;height:4.4rem;border-radius:50%;
  border:1px solid #FFFFFF;background:#000000;color:#FFFFFF;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
}
.lecture-start svg{width:38%;height:38%;margin-left:8%}
.lecture-start:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}
.lecture.started .lecture-start{display:none}

.lecture-bar{display:flex;align-items:center;gap:.9rem;padding:.55rem .9rem .6rem;border-top:1px solid #FFFFFF;font-size:.78rem;line-height:1}
.lecture-bar button{font:inherit;color:#FFFFFF;background:none;border:0;padding:.2rem 0;margin:0;cursor:pointer;letter-spacing:.06em}
.lecture-bar button:focus-visible,.lecture-seek:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}
.lecture-bar .play{width:1.4rem;height:1.4rem;display:flex;align-items:center;justify-content:center}
.lecture-bar .play svg{width:1rem;height:1rem}
.lecture-bar .time{font-variant-numeric:tabular-nums;white-space:nowrap}
.lecture-bar .cc[aria-pressed="false"]{text-decoration:line-through}
.lecture-bar .rate{min-width:3.2em;text-align:center}

.lecture-seek{flex:1 1 auto;min-width:4rem;height:1.4rem;margin:0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;--p:0%}
.lecture-seek::-webkit-slider-runnable-track{height:3px;background:linear-gradient(to right,#FFFFFF 0 var(--p),transparent var(--p)),repeating-linear-gradient(to right,#FFFFFF 0 2px,transparent 2px 6px)}
.lecture-seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;margin-top:-5px;border-radius:50%;background:#FFFFFF;border:0}
.lecture-seek::-moz-range-track{height:3px;background:repeating-linear-gradient(to right,#FFFFFF 0 2px,transparent 2px 6px)}
.lecture-seek::-moz-range-progress{height:3px;background:#FFFFFF}
.lecture-seek::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#FFFFFF;border:0}

.lecture-chapters{list-style:none;margin:.9rem 0 0;padding:0;font-size:.82rem;line-height:1.45;border-top:1px solid #000000}
.lecture-chapters li{display:flex;align-items:baseline;gap:.7rem;border-bottom:1px solid #000000;padding:.42rem 0}
.lecture-chapters li[aria-current="true"]{box-shadow:inset 3px 0 0 #000000;padding-left:.6rem}
.lecture-chapters button{font:inherit;color:#000000;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left;display:flex;gap:.6rem;align-items:baseline;flex:1 1 auto}
.lecture-chapters li[aria-current="true"] button{font-weight:600}
.lecture-chapters button:focus-visible,.lecture-chapters a:focus-visible,.lecture-links a:focus-visible{outline:2px solid #000000;outline-offset:2px}
.lecture-chapters .t{flex:0 0 2.7rem;font-variant-numeric:tabular-nums}
.lecture-chapters a,.lecture-links a{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:#000000;text-decoration:none;border-bottom:1px solid #000000;white-space:nowrap}
.lecture-links{margin:.8rem 0 0;line-height:1.4}

@container (max-width:600px){
  .lecture-stage{aspect-ratio:auto;grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"label" "doodle" "notes" "caption";row-gap:14px;padding:16px 16px 12px}
  .lecture-label{font-size:10px}
  .lecture-title{font-size:18px;margin-bottom:10px}
  .lecture-points,.lecture-caption{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .lecture-notes,.lecture-notes.fade,.lecture-doodle .layer{transition:none}
}
@media print{.lecture{display:none}}