/* video thumbnails that turn into a YouTube player on click (index hero and /video), plus the /video page itself */
.video-box{position:relative; width:100%; aspect-ratio:16/9; background:#000}
.video-box iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.vthumb{display:block; position:relative; width:100%; padding:0; border:0; background:none; cursor:pointer; aspect-ratio:16/9}
.vthumb img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .25s}
.vthumb:hover img{transform:scale(1.02)}
.vthumb .play{position:absolute; left:50%; top:50%; width:74px; height:52px; margin:-26px 0 0 -37px; background:rgba(0,0,0,.72); border-radius:12px}
.vthumb .play::after{content:""; position:absolute; left:29px; top:15px; border-style:solid; border-width:11px 0 11px 20px; border-color:transparent transparent transparent #fff}
.vthumb:hover .play{background:#ff0000}

/* /video: YouTube's own dark (#0f0f0f), so the thumbnails' cut top-left corner disappears */
body.video{background:#0f0f0f}
/* header: a filmstrip of the episodes (images/site/bg-video.jpg, built from the thumbnails) fading into the page; nav on its dark plate */
body.video #topheader{height:auto; padding-bottom:16px; background:#0f0f0f url("../images/site/bg-video.jpg") repeat-x center top / auto 170px}
body.video .navs{display:inline-block; max-width:calc(100% - 170px); border-radius:0 6px 6px 0; background:rgba(15,15,15,.9)}
body.video .navbar{display:flex; margin:0; padding:4px 14px 5px calc(var(--gutter) + var(--safe-l))}
body.video #topheader h1{color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.8); margin-top:6px}
/* subscribe: YouTube's red pill, under the title */
.subscribe{margin:10px 0 0; text-align:center}
/* YouTube's own dark-theme Subscribe: white pill, black label, red icon */
.yt-subscribe{display:inline-flex; align-items:center; gap:8px; padding:8px 18px 9px; border:0; border-radius:20px; background:#f1f1f1; color:#0f0f0f; font-weight:bold; font-size:15px; line-height:1; box-shadow:0 2px 12px rgba(0,0,0,.45)}
body.dark .yt-subscribe, body.dark .yt-subscribe:visited{color:#0f0f0f; border:0}
body.dark .yt-subscribe:hover{background:#fff; color:#0f0f0f}
.yt-subscribe .ico{width:18px; height:18px}
.yt-handle{margin-left:12px; color:#bbb; border-bottom-color:rgba(255,255,255,.25); text-shadow:0 1px 6px rgba(0,0,0,.8)}
.yt-handle:hover{color:#fff}
.video-page .lede{margin-top:16px; color:#ccc}
.video-list{max-width:640px; margin:8px auto 0}
.vcard{margin-top:44px}
.vcard:first-child{margin-top:28px}
.vcard h2{font-size:22px; font-weight:bold; line-height:1.25; margin-top:12px}
.vmeta{color:#aaa; margin-top:4px}
.vblurb{margin-top:6px}

@media (max-width:560px){
  body.video #topheader{padding-bottom:12px; background-size:auto 160px}
  body.video .navs{max-width:calc(100% - 72px)}
  body.video .navbar{padding:4px 10px 5px calc(var(--gutter) + var(--safe-l))}
  .vcard h2{font-size:19px}
}

/* /video/technews/: the TEX letters from the channel banner on the banner's #2a2a2a, the nav plates a little darker */
body.technews, body.technews #topheader{background:#2a2a2a}
body.technews #topheader{padding-bottom:16px}
body.technews .navs, body.technews .lang-switch{background:rgba(15,15,15,.8)}
/* the logos take exactly the line box of the /video/ h1 (font clamp × line-height 1.1), so all four video headers are the same height */
.tex-logo, .tn-logo{height:calc(clamp(32px, 6vw, 52pt) * 1.1); margin:6px 16px 0; text-align:center; line-height:0}
.tex-logo img, .tn-logo img{width:auto; height:100%; max-width:100%; object-fit:contain}
.tex-logo img{filter:drop-shadow(0 6px 14px rgba(0,0,0,.55))}

/* /video/translations/ and /video/other/: the 2013 Tech News look — the floral wallpaper (fades to white at the bottom)
   with the Tech News logo, the list on white; YouTube's light-theme Subscribe (black pill) */
#topheader.tn{height:auto; padding-bottom:16px; background:#f4dbb3 url("../images/site/tn_bg.jpg") repeat-x center top / auto 100%}
/* same nav-row metrics as the dark plates on /video/ */
#topheader.tn .navbar{padding-bottom:5px}
body.tn .yt-subscribe, body.tn .yt-subscribe:visited{background:#0f0f0f; color:#fff; box-shadow:0 2px 10px rgba(0,0,0,.25)}
body.tn .yt-subscribe:hover{background:#3a3a3a; color:#fff}
body.tn .yt-handle{color:#555; text-shadow:none; border-bottom-color:rgba(0,0,0,.2)}
body.tn .yt-handle:hover{color:#ff8f00}
.tn-page h1{font-size:clamp(32px, 6vw, 52pt); line-height:1.1; text-align:center; color:#062c51; margin-top:26px}
.tn-page .lede{color:#444; text-align:center; max-width:640px; margin:12px auto 0}
body.tn .vmeta{color:#666}
body.tn .vthumb img{border-radius:3px}

@media (max-width:560px){
  #topheader.tn, body.technews #topheader{padding-bottom:12px}
  .tn-page h1{margin-top:18px}
}