/* 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?v=da9149f0") 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/kpop/: the same filmstrip header, built from the K-pop thumbnails */
body.kpop #topheader{background-image:url("../images/site/bg-kpop.jpg?v=378a11e2")}

/* /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))}
/* on wide screens the logo uses the whole header height beside the nav plate (like the filmstrip on /video/): it is taken
   out of flow and pinned to the header's top, its old line box stays as a spacer so the header height does not change.
   Below 1100px the centred logo would run under the nav plate, so it stays in flow under the menu. */
@media (min-width:1100px){
  /* the header is its own stacking context, so the logo at z-index:-1 paints above the header background but under the nav plate */
  body.technews #topheader, #topheader.tn{isolation:isolate}
  .tex-logo img, .tn-logo img{position:absolute; z-index:-1; top:8px; left:50%; transform:translateX(-50%); height:146px; max-width:none}
}

/* /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{position:relative; height:auto; padding-bottom:16px; background:#f4dbb3 url("../images/site/tn_bg.jpg?v=b9734213") repeat-x center top / auto 100%}
/* the nav rows and the language menu sit on translucent white plates, laid out exactly like the dark plates on /video/,
   so the logo can slide under them on wide screens and the header wraps the same way on phones */
body.tn .navs{display:inline-block; max-width:calc(100% - 170px); border-radius:0 6px 6px 0; background:rgba(255,255,255,.72)}
body.tn .navbar{display:flex; margin:0; padding:4px 14px 5px calc(var(--gutter) + var(--safe-l))}
body.tn .subnav{padding:0 14px 6px calc(var(--gutter) + var(--safe-l))}
body.tn .lang-switch{position:absolute; right:0; top:0; margin:0; padding:4px calc(var(--gutter) + var(--safe-r)) 6px 14px; border-radius:6px 0 0 6px; background:rgba(255,255,255,.72)}
body.tn .lang-menu{right:calc(var(--gutter) + var(--safe-r))}
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}
  body.tn .navs{max-width:calc(100% - 72px)}
  body.tn .navbar{padding:4px 10px 5px calc(var(--gutter) + var(--safe-l))}
  body.tn .subnav{padding:0 10px 5px calc(var(--gutter) + var(--safe-l))}
  body.tn .lang-switch{padding:4px calc(var(--gutter) + var(--safe-r)) 5px 10px}
  .tn-page h1{margin-top:18px}
}