/* v/<slug>.html: one page per video (generated by gen_video_pages.py). The thumbnail in glass, the views ringed,
   one sticker to watch it, the transcript on a printout, more videos below. */
.vp-hero .eyebrow-hand a{text-decoration:none; color:inherit}
.vp-title{margin-top:16px; font-size:clamp(38px,5.4vw,84px); max-width:20ch}
.vp-main{display:grid; grid-template-columns:minmax(0,1fr) clamp(240px,24vw,320px); gap:39px 52px; align-items:end; margin-top:clamp(36px,4vw,56px)}
.vp-shot{display:block; padding:clamp(10px,1.2vw,14px); border-radius:24px}
.vp-shot img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:13px}
.vp-side{display:flex; flex-direction:column; gap:39px; align-items:flex-start}
.vp-views{display:flex; flex-direction:column; gap:10px}
.vp-views b{font-size:clamp(56px,5vw,84px); display:inline-block; align-self:flex-start; padding:0 12px; margin-left:-12px}
.vp-shot{transition:transform .5s var(--settle)} .vp-shot:hover{transform:translateY(-3px)}
.vp-views span{font-size:15px; color:var(--ink-muted)}
@media (max-width:900px){ .vp-views{padding-left:24px} .vp-views b{margin-left:-12px} .vp-main{grid-template-columns:minmax(0,1fr)} .vp-side{flex-direction:row; flex-wrap:wrap; align-items:center; gap:26px 39px} }
.vp-transcript{max-width:860px; padding-top:30px}
.vp-transcript .blank{margin-top:18px; border:1.5px dashed var(--paper-rule); border-radius:4px; padding:clamp(26px,4vw,52px) 16px; text-align:center; color:var(--paper-ink-muted); font-size:15px}
.vp-transcript .ph{font-weight:500; color:var(--paper-ink)}
.vp-text{margin-top:18px; font-size:17px; line-height:1.65; max-width:66ch}
.vp-text p + p{margin-top:14px}
@media (max-width:1000px){ .vids{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .vids{grid-template-columns:minmax(0,1fr)} }