.media-main{max-width:2100px;margin:0 auto;padding:0 24px 38px;display:grid;grid-template-columns:clamp(280px,26vw,420px) minmax(0,1fr);gap:26px;align-items:start}.media-browser{border:1px solid #373737;background:#1b1b1b;border-radius:7px;overflow:hidden;position:sticky;top:18px}.media-list-heading{padding:16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #373737;gap:10px}.media-list-heading h2{font-size:13px;margin:0;text-transform:uppercase;letter-spacing:1px}.media-list-heading span{font-size:11px;color:#999}.media-item-list{max-height:calc(100dvh - 90px);overflow:auto;overscroll-behavior:contain}.media-choice{display:block;text-decoration:none;color:#eee;border-left:3px solid transparent;padding:15px;border-bottom:1px solid #373737}.media-choice:hover{background:#272727}.media-choice[aria-current]{border-left-color:#f5d06f;background:#302817}.media-thumb{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 25%;border-radius:4px;margin-bottom:12px;background:#080808}.media-thumb-empty{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#342d1c,#171717);color:#bfa258;font-weight:900;font-size:27px;letter-spacing:-1px}.media-choice time{font-size:11px;display:block;color:#aaa;margin-bottom:7px}.media-choice strong{font-size:18px;line-height:1.35;color:#f5d06f;display:block}.media-choice p{font-size:13px;line-height:1.5;color:#bbb;margin:9px 0 0}.media-panel{min-width:0;scroll-margin-top:12px}.media-article h2{font-size:clamp(25px,2.8vw,44px);line-height:1.15;margin:0 0 14px;letter-spacing:-.7px}.media-intro{font-size:clamp(16px,1.2vw,20px);color:#ccc;line-height:1.65;margin:18px 0 24px;max-width:1100px}.media-frame{display:grid;grid-template-columns:clamp(65px,6vw,130px) minmax(0,1fr) clamp(65px,6vw,130px);gap:9px;margin:0 0 18px}.media-ad{border:1px dashed #665528;background:#272211;min-width:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;color:#c9b77c;font-size:11px;line-height:1.5}.media-ad small{display:block;color:#9e916d;font-size:10px;margin-top:5px}.media-ad-top,.media-ad-bottom{grid-column:1/-1;min-height:72px}.media-viewer{aspect-ratio:16/9;position:relative;min-width:0;background:#070707;border:1px solid #444;display:flex;justify-content:center;align-items:center;overflow:hidden}.media-viewer iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.media-photo{padding:0;border:0;background:#070707;position:absolute;inset:0;width:100%;height:100%;cursor:zoom-in}.media-photo img{width:100%;height:100%;object-fit:contain;display:block}.media-placeholder,.video-invitation{text-align:center;padding:22px}.media-placeholder strong{display:block;font-size:clamp(17px,2vw,29px);margin-top:13px}.media-placeholder p,.video-invitation p{font-size:12px;color:#999;line-height:1.6;margin-bottom:0}.media-photo-caption{font-size:12px;color:#aaa;line-height:1.6}.media-panel .article-body{max-width:1100px;line-height:1.8}.media-panel .article-actions{max-width:1100px}.media-choice .preview-label{font-size:9px}.media-main .empty{margin:0}@media(min-width:1600px){.masthead,.magazine-header nav,.department-heading{max-width:2100px}.media-choice{display:grid;grid-template-columns:110px minmax(0,1fr);gap:13px}.media-thumb{margin:0;aspect-ratio:4/3}.media-thumb-empty{font-size:19px}.media-choice strong{font-size:16px}.media-choice p{font-size:12px}}@media(min-width:801px) and (max-width:1050px){.media-main{grid-template-columns:240px minmax(0,1fr);gap:18px}.media-ad-left,.media-ad-right{display:none}.media-frame{grid-template-columns:1fr}.media-article h2{font-size:28px}}@media(max-width:800px){.media-main{grid-template-columns:1fr;padding:0 16px 28px;gap:22px}.media-browser{position:static;border-radius:5px}.media-list-heading{padding:12px 14px}.media-item-list{display:flex;overflow-x:auto;overflow-y:hidden;max-height:none;scroll-snap-type:x proximity;padding:8px;gap:8px;overscroll-behavior-x:contain}.media-choice{flex:0 0 min(72vw,285px);padding:10px;border:1px solid #444;border-radius:5px;scroll-snap-align:start}.media-choice[aria-current]{border-color:#f5d06f}.media-choice strong{font-size:15px}.media-choice p{font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.media-choice time{font-size:10px}.media-thumb{aspect-ratio:16/8;height:auto;max-height:135px;object-position:center 20%;margin-bottom:10px}.media-thumb-empty{font-size:24px}.media-ad-left,.media-ad-right{display:flex;min-height:55px;grid-row:3}.media-frame{grid-template-columns:1fr 1fr;gap:7px}.media-viewer{grid-column:1/-1;grid-row:2}.media-ad-top{grid-row:1;min-height:56px}.media-ad-bottom{grid-row:4;min-height:56px}.media-ad{padding:8px;font-size:10px}.media-article h2{font-size:28px}.media-intro{font-size:16px}.media-placeholder,.video-invitation{padding:15px}.media-placeholder p{font-size:11px}.media-panel .article-body{font-size:17px}.magazine-header nav{flex-wrap:nowrap;overflow-x:auto;padding:0 10px 10px;scrollbar-width:thin}.magazine-header nav a{white-space:nowrap;flex:none;padding:9px 11px}.department-heading{padding-bottom:18px}.department-heading h1{font-size:34px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Keep all main media viewers comfortable on large desktop screens. */
.media-main .media-frame{width:100%;max-width:1100px}
.media-main .media-viewer{width:100%;max-width:900px;justify-self:center}
/* Pinned viewer with independently scrolling reading areas. Enabled by JS. */
body.media-watch-page{height:100dvh;overflow:hidden}
.media-watch-page .media-main{height:var(--media-space,60dvh);min-height:0;grid-template-rows:auto minmax(0,1fr);padding-bottom:0;gap:0 26px;overflow:hidden}
.media-watch-page .media-browser{grid-column:1;grid-row:1/3;position:static;min-height:0;max-height:100%;height:100%;display:flex;flex-direction:column}
.media-watch-page .media-item-list{min-height:0;max-height:none;flex:1;overflow:auto;overscroll-behavior:contain}
.media-watch-page .media-watch{grid-column:2;grid-row:1;min-width:0;padding-bottom:14px;background:#111}
.media-watch-page .media-watch .media-frame{margin:0;width:100%;max-width:min(1100px,calc(var(--media-player-width,900px) + 190px))}
.media-watch-page .media-watch .media-viewer{max-width:var(--media-player-width,900px)}
.media-watch-page .media-ad-top,.media-watch-page .media-ad-bottom{min-height:32px;padding:5px}
.media-watch-page .media-ad-top small,.media-watch-page .media-ad-bottom small{margin-top:0}
.media-watch-page .media-panel{grid-column:2;grid-row:2;min-height:0;overflow:auto;overscroll-behavior:contain;padding-right:12px;scrollbar-gutter:stable}
.media-watch-page .media-panel .magazine-footer{margin-top:25px}
@media(max-width:800px){
.media-watch-page .media-main{display:grid;grid-template-columns:1fr;gap:0;padding:0 12px}
.media-watch-page .media-watch{grid-column:1;grid-row:1;padding-bottom:12px}
.media-watch-page .media-panel{grid-column:1;grid-row:2;padding-right:3px}
.media-watch-page .media-panel .media-browser{height:auto;max-height:none;display:block;margin-bottom:20px}
.media-watch-page .media-panel .media-item-list{display:flex;max-height:none;overflow-x:auto;overflow-y:hidden}
.media-watch-page .media-ad-left,.media-watch-page .media-ad-right{min-height:32px;padding:4px}
.media-watch-page .media-ad-left small,.media-watch-page .media-ad-right small{margin-top:0}
.media-watch-page .media-watch .media-frame{max-width:min(1100px,var(--media-player-width,900px));margin:0 auto}
}
@media (min-width: 801px) {
    .media-watch-page .media-main {
        grid-template-rows: max-content minmax(0, 1fr);
    }

    .media-watch-page .media-panel {
        min-height: 0;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }
}
@media(max-height:500px){.media-watch-page .department-heading{padding-top:8px;padding-bottom:8px}.media-watch-page .department-heading h1{font-size:24px;margin:3px 0}.media-watch-page .department-heading .eyebrow,.media-watch-page .department-heading p,.media-watch-page .tagline{display:none}.media-watch-page .masthead{padding-top:8px;padding-bottom:6px}.media-watch-page .media-ad-top,.media-watch-page .media-ad-bottom,.media-watch-page .media-ad-left,.media-watch-page .media-ad-right{display:none}.media-watch-page .media-frame{display:block}.media-watch-page .media-watch .media-viewer{margin:0 auto}.media-watch-page .media-watch{padding-bottom:6px}}

/* Viewer-first server layout, even before enhancement starts. */
.media-main{grid-template-rows:auto minmax(0,1fr);gap:0 26px}
.media-main>.media-watch{grid-column:2;grid-row:1;padding-bottom:14px;min-width:0}
.media-main>.media-browser{grid-column:1;grid-row:1/3}
.media-main>.media-panel{grid-column:2;grid-row:2}
@media(max-width:800px){.media-main{grid-template-columns:1fr}.media-main>.media-watch{grid-column:1;grid-row:1}.media-main>.media-panel{grid-column:1;grid-row:2}.media-main>.media-browser{grid-column:1;grid-row:3}}

/* Two banners share the exact width of the centered viewer. */
.media-main .media-watch .media-frame{grid-template-columns:minmax(0,1fr);gap:7px;max-width:var(--media-player-width,900px);margin:0 auto;display:grid}
.media-main .media-watch .media-viewer{grid-column:1;grid-row:2;max-width:none;width:100%}
.media-main .media-watch .media-ad-top{grid-column:1;grid-row:1;display:flex;min-height:32px;padding:5px}
.media-main .media-watch .media-ad-bottom{grid-column:1;grid-row:3;display:flex;min-height:32px;padding:5px}
.media-main .media-watch .media-ad-left,.media-main .media-watch .media-ad-right{display:none}
@media(max-width:800px){
.media-main .media-browser .media-item-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:10px;padding:10px;overflow:visible;scroll-snap-type:none;max-height:none;flex:none}
.media-main .media-browser .media-choice{display:block;min-width:0;width:auto;flex:none;scroll-snap-align:none;padding:10px}
.media-main .media-browser .media-thumb{width:100%;max-height:none;aspect-ratio:16/9}
.media-main .media-panel{touch-action:pan-y;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
}

/* Compact pages scroll naturally; the viewer stays sticky above their content. */
@media(max-width:800px){
body.media-watch-page{height:auto;min-height:100dvh;overflow:auto}
.media-watch-page .media-main{display:block;height:auto;min-height:0;overflow:visible;padding:0 12px 28px}
.media-watch-page .media-main>.media-watch{position:sticky;top:0;z-index:20;padding-top:6px;padding-bottom:12px;background:#111}
.media-watch-page .media-main>.media-panel{height:auto;max-height:none;overflow:visible;overscroll-behavior:auto;padding:0;scrollbar-gutter:auto;touch-action:auto}
.media-watch-page .media-panel .media-browser{height:auto;max-height:none;overflow:visible;display:block}
.media-watch-page .media-panel .media-item-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));overflow:visible;max-height:none;scroll-snap-type:none}
}

/* Phone enhancement: desktop retains its existing workspace rules. */
.media-expand{display:none}
.media-phone .media-viewer:has(.media-play),.media-phone .media-viewer:has(iframe){height:var(--media-phone-player-height,240px);min-height:200px;aspect-ratio:auto}
.media-phone .media-watch .media-frame{max-width:100%}
.media-phone .media-watch .media-viewer{max-width:100%}
.media-phone .media-expand{display:grid;place-items:center;position:absolute;top:8px;right:8px;z-index:3;background:#111b;color:#fff;border:1px solid #ffffff66;border-radius:5px;width:44px;height:44px;padding:0;cursor:pointer}
.media-phone .media-expand:focus-visible{outline:3px solid #f5d06f;outline-offset:3px}
.media-phone-landscape.media-main{display:grid;grid-template-columns:clamp(160px,26vw,250px) minmax(0,1fr);grid-template-rows:auto auto;height:auto;overflow:visible;gap:0 14px;padding:0 12px}
body.media-watch-page:has(.media-phone-landscape){height:auto;overflow:auto}
.media-phone-landscape.media-main>.media-browser{grid-column:1;grid-row:1/3;position:sticky;top:8px;height:var(--media-space);max-height:var(--media-space);display:flex;flex-direction:column;overflow:hidden}
.media-phone-landscape.media-main>.media-watch{grid-column:2;grid-row:1;position:static}
.media-phone-landscape.media-main>.media-panel{grid-column:2;grid-row:2;overflow:visible;padding-right:0}
.media-phone-landscape .media-browser .media-item-list{display:block;overflow:auto;min-height:0;flex:1;padding:4px}
.media-phone-landscape .media-choice{margin-bottom:8px}
.media-phone-landscape .media-choice strong{font-size:14px}
.media-phone-landscape .media-article h2{font-size:24px}
.media-phone:not(.media-phone-landscape).media-main{display:block;height:auto;overflow:visible}
body.media-video-open{overflow:hidden!important}
.media-video-space{grid-column:1;grid-row:2;width:100%;pointer-events:none}
.media-phone .media-viewer.media-video-expanded{position:fixed;inset:0;z-index:10000;width:100%;max-width:none!important;height:100dvh!important;min-height:0;aspect-ratio:auto;border:0;padding-top:60px;background:#000;box-sizing:border-box}
.media-video-expanded iframe{top:60px;bottom:0;height:calc(100% - 60px)}
.media-video-expanded .media-expand{top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right))}
.media-viewer:fullscreen,.media-viewer:-webkit-full-screen{width:100%;height:100%;background:#000}

/* Billy Joel feature: the full photo and description stay together. */
.media-main .media-choice-feature{display:block}
.media-main .media-choice-feature .media-thumb{width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain;margin:0 0 14px}
.media-main .media-choice-feature time{font-size:13px;font-weight:700;color:#eee}
.media-main .media-choice-feature .media-feature-copy{display:block;font-size:14px;line-height:1.65;color:#ddd;overflow:visible;-webkit-line-clamp:unset}
@media(max-width:800px){
 .media-main .media-browser .media-choice-feature{grid-column:1/-1}
 .media-main .media-choice-feature .media-thumb{max-width:515px;margin-left:auto;margin-right:auto}
 .media-main .media-choice-feature .media-feature-copy{font-size:16px}
}

/* Only the existing desktop media column gets a draggable divider. */
@media(min-width:801px){
 .media-watch-page .media-main>.media-watch.media-resizable{position:relative;padding-bottom:20px}
 .media-splitter{position:absolute;bottom:0;left:0;right:0;height:18px;display:flex;align-items:center;justify-content:center;cursor:row-resize;touch-action:none;user-select:none;z-index:4}
 .media-splitter::before{content:'';width:64px;height:4px;border-radius:3px;background:#777}
 .media-splitter:hover::before,.media-splitter:focus-visible::before{background:#f5d06f}
 .media-splitter:focus-visible{outline:1px solid #f5d06f;outline-offset:-2px}
}
.media-splitter[hidden]{display:none}
body.media-split-dragging,body.media-split-dragging *{cursor:row-resize!important;user-select:none!important}
body.media-split-dragging iframe{pointer-events:none!important}

/* Keep both video ads aligned with the player at the artwork's 12:1 ratio. */
.media-main .media-watch .media-frame:has(.media-viewer :is(iframe, .media-play))
  > :is(.media-ad-top, .media-ad-bottom) {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  aspect-ratio: 12 / 1;
  padding: 0;
}

.media-ad-link {
  position: absolute;
  inset: 0;
}

.media-ad-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.media-ad-link:focus-visible {
  outline: 2px solid #f5d06f;
  outline-offset: -3px;
}