/* Homepage Watch section. All component styles are scoped. */
.watch,#watch-dialog{--line:var(--soft);--panel:var(--bg2);--stripe:var(--ac-soft);font:16px/1.5 var(--body)}
:is(.watch,[id="watch-dialog"]) :is(p,h2,h3){margin:0}
:is(.watch,[id="watch-dialog"]) button{font:inherit;cursor:pointer;color:inherit;background:transparent;border:0}
:is(.watch,[id="watch-dialog"]) :is(.eyebrow,time,.post-links,.watch-bottom,.channels,.cover-action,.player-note){font:14px/1.6 var(--body)}
:is(.watch,[id="watch-dialog"]) .eyebrow{font:500 14px/1.5 var(--body);text-transform:none;letter-spacing:0}
:is(.watch,[id="watch-dialog"]) .accent{color:var(--ac)}
body:has(#watch-dialog[open]){overflow:hidden}
.watch{max-width:1600px;margin:auto;border-bottom:1px solid var(--ink);padding:0 24px}:is(.watch,[id="watch-dialog"]) .watch-top{display:flex;justify-content:space-between;gap:16px;padding:17px 0;border-bottom:1px solid var(--line)}:is(.watch,[id="watch-dialog"]) .watch-top p:last-child{color:var(--muted)}:is(.watch,[id="watch-dialog"]) .watch-layout{display:grid;grid-template-columns:minmax(185px,.85fr) minmax(0,3fr);gap:36px;padding:28px 0 24px}:is(.watch,[id="watch-dialog"]) .watch-intro{display:flex;flex-direction:column;align-items:stretch;min-width:0}:is(.watch,[id="watch-dialog"]) .watch-intro h2{font:700 clamp(76px,8vw,126px)/.83 var(--head);text-transform:uppercase;letter-spacing:-.03em;margin:0 0 24px}:is(.watch,[id="watch-dialog"]) .watch-intro h2 span{color:var(--ac)}:is(.watch,[id="watch-dialog"]) .watch-intro>p{max-width:22ch;font-size:17px}:is(.watch,[id="watch-dialog"]) .watch-intro .intro-small{font-size:14px;color:var(--muted);margin-top:24px}:is(.watch,[id="watch-dialog"]) .channels{margin-top:16px;max-width:230px}:is(.watch,[id="watch-dialog"]) .channels a{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);min-height:44px}:is(.watch,[id="watch-dialog"]) .channels a:last-child{border-bottom:1px solid var(--line)}:is(.watch,[id="watch-dialog"]) .channels a:hover{color:var(--ac);text-decoration:none}:is(.watch,[id="watch-dialog"]) .slashes{margin-top:auto;height:54px;max-width:230px;background:repeating-linear-gradient(-55deg,transparent 0 12px,var(--stripe) 12px 23px);border-bottom:1px solid var(--ac)}:is(.watch,[id="watch-dialog"]) .video-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;min-width:0}:is(.watch,[id="watch-dialog"]) .video-card{min-width:0;display:flex;flex-direction:column}:is(.watch,[id="watch-dialog"]) .cover{display:block;position:relative;border:1px solid var(--line);background:#081413}:is(.watch,[id="watch-dialog"]) .cover:hover{text-decoration:none;border-color:var(--ac)}:is(.watch,[id="watch-dialog"]) .cover img{width:100%;height:auto;aspect-ratio:9/16;display:block;object-fit:contain}:is(.watch,[id="watch-dialog"]) .cover-action{display:flex;align-items:center;gap:8px;background:#101010;color:#f3f3ef;padding:8px 10px;border-top:1px solid #657170;transition:transform 160ms ease,border-color 160ms ease}:is(.watch,[id="watch-dialog"]) .cover:hover .cover-action{border-color:var(--ac);background:var(--ac-soft)}:is(.watch,[id="watch-dialog"]) .play{display:grid;place-items:center;background:var(--ac);color:var(--ac-ink);width:28px;height:28px;font-size:13px}:is(.watch,[id="watch-dialog"]) .duration{margin-left:auto;font-size:13px}:is(.watch,[id="watch-dialog"]) .video-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;margin-top:14px}:is(.watch,[id="watch-dialog"]) .video-meta time{font-size:13px;color:var(--muted)}:is(.watch,[id="watch-dialog"]) .video-card h3{font:700 clamp(23px,2.2vw,34px)/1.03 var(--head);text-transform:uppercase;margin:8px 0 16px;letter-spacing:-.008em}:is(.watch,[id="watch-dialog"]) .post-links{display:flex;flex-wrap:wrap;gap:0 14px;padding-top:4px;margin-top:auto;border-top:1px solid var(--line);font-size:13px}:is(.watch,[id="watch-dialog"]) .post-links a{display:flex;align-items:center;min-height:40px}:is(.watch,[id="watch-dialog"]) .watch-bottom{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;color:var(--muted)}:is(.watch,[id="watch-dialog"]) .watch-bottom span{color:var(--ac);margin:0 8px}:is(.watch,[id="watch-dialog"]) .watch-bottom a{color:var(--ink);min-height:32px;display:flex;align-items:center}:is(.watch,[id="watch-dialog"]) .mobile-hint{display:none}
#watch-dialog{width:min(850px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line);background:var(--bg);color:var(--ink);overflow:auto}#watch-dialog::backdrop{background:#000d;backdrop-filter:blur(7px)}:is(.watch,[id="watch-dialog"]) .player-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:1}:is(.watch,[id="watch-dialog"]) .player-bar button{min-height:44px}:is(.watch,[id="watch-dialog"]) .player-layout{display:grid;grid-template-columns:minmax(220px,.95fr) 1fr}:is(.watch,[id="watch-dialog"]) .player-detail{padding:28px}:is(.watch,[id="watch-dialog"]) .player-detail h2{font:700 40px/.98 var(--head);text-transform:uppercase;margin:12px 0 24px}:is(.watch,[id="watch-dialog"]) .player-note{color:var(--muted);margin:18px 0}:is(.watch,[id="watch-dialog"]) .player-detail nav{display:flex;flex-direction:column}:is(.watch,[id="watch-dialog"]) .player-detail nav a{padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}:is(.watch,[id="watch-dialog"]) #player-mount{background:#000;aspect-ratio:9/16;width:min(100%,calc((100dvh - 108px)*9/16));align-self:start;justify-self:center;min-width:200px}:is(.watch,[id="watch-dialog"]) #player-mount iframe{display:block;width:100%;height:100%;border:0}
@media(min-width:1440px){:is(.watch,[id="watch-dialog"]) .watch-layout{gap:48px}:is(.watch,[id="watch-dialog"]) .video-rail{gap:24px}.watch{padding:0 40px}}@media(max-width:1000px){:is(.watch,[id="watch-dialog"]) .watch-layout{display:block}:is(.watch,[id="watch-dialog"]) .watch-intro{display:grid;grid-template-columns:1fr 1fr;column-gap:30px;margin-bottom:24px}:is(.watch,[id="watch-dialog"]) .watch-intro h2{grid-row:span 2;font-size:94px;margin-bottom:0}:is(.watch,[id="watch-dialog"]) .watch-intro>p{max-width:30ch}:is(.watch,[id="watch-dialog"]) .watch-intro .intro-small,:is(.watch,[id="watch-dialog"]) .slashes{display:none}:is(.watch,[id="watch-dialog"]) .channels{display:flex;gap:20px;max-width:none;margin-top:6px}:is(.watch,[id="watch-dialog"]) .channels a,:is(.watch,[id="watch-dialog"]) .channels a:last-child{border:0;gap:8px}:is(.watch,[id="watch-dialog"]) .video-card h3{font-size:28px}}@media(max-width:640px){:is(.watch,[id="watch-dialog"]) .review-bar{padding:8px 16px}:is(.watch,[id="watch-dialog"]) .review-bar>span{display:none}.watch{padding:0 16px}:is(.watch,[id="watch-dialog"]) .watch-top{padding:12px 0}:is(.watch,[id="watch-dialog"]) .watch-top .eyebrow{font-size:13px}:is(.watch,[id="watch-dialog"]) .watch-intro{display:block;margin-bottom:20px}:is(.watch,[id="watch-dialog"]) .watch-intro h2{font-size:86px;margin-bottom:18px}:is(.watch,[id="watch-dialog"]) .watch-intro>p{font-size:16px}:is(.watch,[id="watch-dialog"]) .channels{gap:24px;margin-top:10px}:is(.watch,[id="watch-dialog"]) .watch-layout{padding-top:24px;padding-bottom:18px}:is(.watch,[id="watch-dialog"]) .video-rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:6px 6px 14px;margin:-6px -6px 0;scrollbar-width:thin;scrollbar-color:var(--ac) var(--panel)}:is(.watch,[id="watch-dialog"]) .video-card{flex:0 0 76%;scroll-snap-align:start}:is(.watch,[id="watch-dialog"]) .video-card h3{font-size:28px}:is(.watch,[id="watch-dialog"]) .post-links{gap:0 14px}:is(.watch,[id="watch-dialog"]) .post-links a{min-height:44px}:is(.watch,[id="watch-dialog"]) .cover-action{left:12px;right:12px}:is(.watch,[id="watch-dialog"]) .watch-bottom{flex-wrap:wrap;font-size:13px;gap:6px 20px}:is(.watch,[id="watch-dialog"]) .watch-bottom>p:first-child{display:none}:is(.watch,[id="watch-dialog"]) .mobile-hint{display:block}:is(.watch,[id="watch-dialog"]) .watch-bottom a{min-height:44px}:is(.watch,[id="watch-dialog"]) .player-layout{display:block}:is(.watch,[id="watch-dialog"]) #player-mount{width:min(100%,330px);height:auto;min-height:200px;max-height:none;margin:auto}:is(.watch,[id="watch-dialog"]) .player-detail{padding:22px}:is(.watch,[id="watch-dialog"]) .player-detail h2{font-size:32px}#watch-dialog{max-height:calc(100dvh - 16px);width:calc(100% - 16px)}}@media(prefers-reduced-motion:reduce){:is(.watch,[id="watch-dialog"]) *,:is(.watch,[id="watch-dialog"]) *::before,:is(.watch,[id="watch-dialog"]) *::after{scroll-behavior:auto!important;transition:none!important}}

:is(.watch,[id="watch-dialog"]) .related-reading{border-top:1px solid var(--line);padding-top:22px;margin-top:28px}:is(.watch,[id="watch-dialog"]) .related-reading a{display:block;font:700 26px/1.1 var(--head);text-transform:uppercase;padding:12px 0}
:is(.watch,[id="watch-dialog"]) .youtube-cover img{object-fit:cover}:is(.watch,[id="watch-dialog"]) .feed-message{grid-column:1/-1;align-self:start;border-top:1px solid var(--line);padding:24px 0;font:700 34px/1.1 var(--head)}

.watch{max-width:none;margin:0;padding:0 24px;scroll-margin-top:24px}
@media(max-width:640px){.watch{padding:0 16px}}

/* Portrait gallery: the media owns the space, with a compact editorial heading. */
.watch{display:grid;grid-template-columns:190px minmax(0,1fr);gap:32px;padding:40px 32px;background:var(--bg2);border-top:1px solid var(--soft);border-bottom:1px solid var(--soft)}
.watch .watch-top{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:24px;padding:0;border:0}
.watch .watch-top h2{font:700 64px/1 var(--head);margin-top:12px}
.watch .watch-top .eyebrow{font:500 14px/1.5 var(--body);text-transform:none;letter-spacing:0}
.watch .watch-top .story-link{font-size:14px}
.watch .watch-layout{display:block;padding:0;min-width:0}
.watch .video-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.watch .video-card{display:flex;flex-direction:column;min-width:0;width:100%;max-width:250px;justify-self:center}
.watch .cover{width:100%;max-width:250px;align-self:center}
.watch .cover img{aspect-ratio:9/16;object-fit:contain}
.watch .cover-action{font:14px/1.5 var(--body);padding:10px 12px;gap:10px}
.watch .play{width:24px;height:24px;flex:none}
.watch .video-meta{display:flex;justify-content:space-between;margin-top:18px;gap:4px 12px}
.watch .video-meta span,.watch .video-meta time{font:13px/1.5 var(--body);text-transform:none}
.watch .video-card h3{font:700 24px/1.12 var(--head);margin:10px 0 18px;overflow-wrap:break-word;text-transform:none;text-wrap:pretty}
/* Video titles are sentences, here and in the player (Brand C). */
[id="watch-dialog"] .player-detail h2{text-transform:none}
.watch .post-links{font:14px/1.5 var(--body);margin-top:auto}
.watch .watch-bottom{grid-column:1/-1;margin-top:0;padding:12px 0 0;font:14px/1.5 var(--body)}
.watch .channels{display:flex;flex-wrap:wrap;gap:24px;max-width:none;margin:0;font:14px/1.5 var(--body)}
.watch .channels a,.watch .channels a:last-child{border:0;min-height:44px}
#watch-dialog :is(.player-note,.post-links,time){font:14px/1.6 var(--body)}
@media(max-width:1100px){.watch{grid-template-columns:1fr}.watch .watch-top{flex-direction:row;align-items:center;justify-content:space-between}.watch .watch-top h2{font-size:44px;margin-top:6px}.watch .cover{max-width:240px}}
@media(max-width:640px){
 .watch{padding:28px 16px;gap:22px}.watch .watch-top{gap:12px}.watch .watch-top h2{font-size:40px}
 .watch .video-rail{display:flex;overflow-x:auto;scroll-snap-type:x proximity;margin:0;padding:0 0 16px;gap:20px}
 .watch .video-card{flex:0 0 67%;max-width:none;scroll-snap-align:start}
 .watch .cover{max-width:none}
 .watch .video-card h3{font-size:22px}.watch .watch-bottom{gap:4px 16px}
 .watch .mobile-hint{display:block}
 .watch .watch-top .story-link{font-size:14px;max-width:12ch}
}

/* A source outage must be visible without squeezing the existing portrait rail. */
.watch .watch-status{grid-column:1/-1;font:14px/1.6 var(--body);color:var(--muted)}

/* One way into each video: the cover. The per-video YouTube link stays in the markup for the player dialog's platform links. */
.watch .video-card .post-links{display:none}

/* Watch is a home section like the others (Oct 9): the standard head, then the six newest Shorts in the same row as
   the newest reveals. Six across, cover on top, then the title and "Short · Oct 8" in the reveals' small line; hover
   lifts the cover like a reveal. Titles hold two lines, as on YouTube, so every date sits on one line across the row
   (the full title stays in the link's label and the player). Tablets and phones scroll the row sideways, edge to edge.
   The whole tile is one link (the cover's link covers it), and nothing is drawn over the cover art. */
.home-page .watch{display:block;padding:40px 32px}
.home-page .watch .watch-top{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:20px;margin:0 0 24px;padding:0;border:0}
.home-page .watch .watch-top .eyebrow{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.home-page .watch .watch-top h2{font:700 44px/1 var(--head);text-transform:uppercase;letter-spacing:-.015em;margin:0}
.home-page .watch .watch-top .story-link{font-size:15px;white-space:nowrap;max-width:none}
.home-page .watch .watch-layout{display:block}
.home-page .watch .video-rail{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px;margin:0;padding:0;overflow:visible}
.home-page .watch .video-card{position:relative;display:flex;flex-direction:column;gap:2px;width:auto;max-width:none;min-width:0;flex:none}
.home-page .watch .cover,.home-page .watch .cover:hover{position:static;width:100%;max-width:none;margin:0 0 10px;border:1px solid var(--soft);background:var(--bg);transition:transform .2s ease}
.home-page .watch .cover img{aspect-ratio:9/16;object-fit:cover}
.home-page .watch .cover::after{content:'';position:absolute;inset:0;z-index:1}
.home-page .watch .cover-action{display:none}
.home-page .watch .video-card h3{font:600 16px/1.3 var(--body);text-transform:none;letter-spacing:0;margin:0;overflow-wrap:break-word;text-wrap:balance;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-height:2.6em}
.home-page .watch .video-meta{display:block;margin:0;font:13px/1.5 var(--mono);color:var(--muted)}
.home-page .watch .video-meta :is(.eyebrow,time){font:inherit;color:inherit;text-transform:none;letter-spacing:0}
.home-page .watch .video-meta time{white-space:nowrap}
.home-page .watch .video-meta time::before{content:' · '}
@media(hover:hover){.home-page .watch .video-card:hover .cover{transform:translateY(-4px)}.home-page .watch .video-card:hover h3{color:var(--ac)}}
.home-page .watch .video-card:has(.cover:focus-visible) .cover{transform:translateY(-4px)}
.home-page .watch .video-card:has(.cover:focus-visible){outline:2px solid var(--ink);outline-offset:4px}
.home-page .watch .cover:focus-visible{outline:0}
.home-page .watch :is(.watch-bottom,.mobile-hint){display:none}
@media(prefers-reduced-motion:reduce){.home-page .watch .cover{transition:none}}
/* From 1,280 px down the columns are narrow enough that titles need three lines. */
@media(max-width:1280px){.home-page .watch .video-card h3{-webkit-line-clamp:3;line-clamp:3;min-height:3.9em}}
/* Tablets: six columns would be too narrow for the titles, so the row scrolls sideways, about four and a half in view,
   running to the screen edges. */
@media(max-width:1100px){
 /* 8 px of headroom so the hover and focus lift is not clipped by the scrolling row. */
 .home-page .watch .video-rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;margin:-8px -32px 0;padding:8px 32px 16px;scroll-padding-inline:32px}
 .home-page .watch .video-card{flex:0 0 22%;scroll-snap-align:start}
}
/* Phones: the reveals' sideways row, two and a half tiles in view; titles hold three lines at this width. */
@media(max-width:600px){
 .home-page .watch{padding:32px 16px}
 .home-page .watch .watch-top{margin-bottom:20px;gap:12px}
 .home-page .watch .watch-top h2{font-size:34px}
 .home-page .watch .watch-top .story-link{font-size:14px}
 .home-page .watch .video-rail{gap:14px;margin:-8px -16px 0;padding:8px 16px 16px;scroll-padding-inline:16px}
 .home-page .watch .video-card{flex:0 0 38%}
}
@media(max-width:360px){.home-page .watch .watch-top h2{font-size:29px}}