.vids .vid-grid { display: grid; gap: clamp(24px, 3vw, 40px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }
.vid { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.vid video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #21122B; }
.vid figcaption { padding: 20px 24px 24px; }
.vid h3 { margin: 0; font-size: 24px; }
.vid .len { margin: 6px 0 0; color: var(--mid); font-size: 15px; }
.vid .vd { margin: 10px 0 0; }
.vid details { margin-top: 14px; }
.vid summary { cursor: pointer; color: var(--violet); font-weight: 700; }
:is(.vid, .chap) ol.chapters { list-style: none; margin: 10px 0 0; padding: 0; columns: 2 240px; column-gap: 24px; }
:is(.vid, .chap) ol.chapters li { break-inside: avoid; margin: 0 0 6px; }
:is(.vid, .chap) ol.chapters button { all: unset; cursor: pointer; display: inline-flex; gap: 10px; color: var(--ink); }
:is(.vid, .chap) ol.chapters button:hover span, :is(.vid, .chap) ol.chapters button:focus-visible span { text-decoration: underline; }
:is(.vid, .chap) ol.chapters button:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
:is(.vid, .chap) ol.chapters time { color: var(--violet); font-variant-numeric: tabular-nums; min-width: 3.2em; }
.vid-one { max-width: 960px; }
.vids-page .vid { max-width: 960px; margin-bottom: clamp(32px, 4vw, 56px); }
.vid h3 a { color: inherit; text-decoration: none; }
.vid h3 a:hover, .vid h3 a:focus-visible { text-decoration: underline; }
.watch .vid { max-width: 1040px; }
.watch .vid figcaption { padding: 0; }
.watch-head .crumbs { margin: 0 0 12px; }
.watch-head h1 { margin: 0; }
.watch-head .len { margin: 10px 0 0; color: var(--mid); }
.watch-body { max-width: 1040px; display: grid; gap: 32px; margin-top: 28px; }
.watch-body .chap h2, .transcript h2 { font-size: 28px; margin: 0 0 12px; }
.transcript h3 { font-size: 20px; margin: 28px 0 8px; }
.transcript h3 time { color: var(--violet); font-family: var(--body); font-size: 15px; margin-left: 10px; }
.transcript p { max-width: 72ch; }
.vlist { display: grid; gap: clamp(20px, 3vw, 32px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.vcard { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: inherit; text-decoration: none; }
.vcard img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.vcard div { padding: 18px 22px 22px; }
.vcard b { display: block; font-family: var(--head); font-size: 22px; font-weight: 400; color: var(--aubergine); line-height: 1.25; }
.vcard:hover b, .vcard:focus-visible b { text-decoration: underline; }
.vcard span { display: block; margin-top: 6px; color: var(--mid); font-size: 15px; }
.vcard p { margin: 10px 0 0; }
.vcard p, .vcard span { font-weight: 400; }