:root{color-scheme:dark;--red:#c12127;--tile:#1a1a1a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#000;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:3px solid white;outline-offset:4px;box-shadow:0 0 20px #c1212780}header{position:sticky;top:0;background:#000;z-index:10;text-align:center;padding:25px 5vw 30px;transition:padding .2s}#logo{display:block;object-fit:contain;height:200px;max-width:90%;margin:auto;transition:height .2s}header.compact{padding:10px 5vw 12px}header.compact #logo{height:105px}header.compact #show-nav{display:none}nav{display:flex;gap:28px;max-width:1450px;margin:15px auto 0}nav button,.top-button,.player-bottom button{border:3px solid #fff;background:#191919;border-radius:12px;font-weight:700;min-height:82px;padding:15px 22px;flex:1;font-size:clamp(13px,1.4vw,22px);transition:background .15s,transform .15s}nav button:hover,.top-button:hover,.player-bottom button:hover{background:var(--red);transform:scale(1.02)}#feature-nav{justify-content:center}#feature-nav button{max-width:420px}main{max-width:1800px;margin:0 auto;padding:10px 5vw 70px}h1{font-size:clamp(25px,2.3vw,34px);margin:0 0 30px;font-weight:750}h2{font-size:clamp(23px,2.1vw,31px);margin:0 0 20px}.year-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px}.year{height:86px;background:var(--tile);border:3px solid #fff;border-radius:12px;font-size:34px;font-weight:700;transition:transform .13s,background .13s}.year:hover,.year:focus-visible{background:var(--red);transform:scale(1.05);z-index:1}.top-button{display:block;width:100%;margin-top:38px}.category{margin:0 0 36px}.feature-row{display:flex;gap:30px;overflow-x:auto;scroll-snap-type:x proximity;padding:12px 5px 20px;scrollbar-color:#555 #111}.feature{flex:0 0 min(420px,65vw);width:min(420px,65vw);background:transparent;border:0;padding:0;text-align:left;scroll-snap-align:start;border-radius:12px}.feature img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;background:#292929}.feature .fallback{display:grid;place-items:center;aspect-ratio:16/9;background:#292929;border-radius:12px;font-size:45px}.feature span{display:block;margin-top:12px;font-size:24px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.feature:hover img,.feature:focus-visible img,.feature:hover .fallback{outline:3px solid var(--red);transform:scale(1.015)}#status{color:#aaa;font-size:18px}.player-modal{position:fixed;inset:0;background:#000;z-index:30;display:flex;flex-direction:column}.player-modal[hidden],[hidden]{display:none!important}.player-top{display:flex;justify-content:space-between;align-items:center;padding:12px 22px;font-size:20px;font-weight:700;gap:20px}.player-top button{background:#242424;border:1px solid #666;border-radius:8px;font-size:22px;padding:8px 14px}#player-stage{flex:1;min-height:0;display:flex;justify-content:center;align-items:center;position:relative;background:#000}video{width:100%;height:100%;max-height:calc(100vh - 120px);background:#000}#image-ad{position:absolute;inset:0;background:#000;display:grid;place-items:center}#ad-image{width:100%;height:100%;object-fit:contain}.ad-label,#video-ad-label{position:absolute;bottom:22px;right:25px;background:#000b;padding:10px 15px;border-radius:6px;font-size:15px;letter-spacing:.05em}#video-ad-label{z-index:2}#ad-next{position:absolute;bottom:80px;right:30px;background:var(--red);border:0;padding:12px;border-radius:6px}.player-bottom{display:flex;justify-content:center;align-items:center;gap:18px;padding:10px 20px}.player-bottom button{min-height:45px;max-width:170px;font-size:14px}.player-bottom button:disabled{opacity:.25;cursor:default}#playlist-position{color:#aaa;min-width:70px;text-align:center}@media(max-width:1000px){.year-grid{grid-template-columns:repeat(4,1fr);gap:15px}#logo{height:145px}nav{gap:10px}nav button{min-height:65px;padding:10px}main{padding-inline:4vw}}@media(max-width:600px){.year-grid{grid-template-columns:repeat(3,1fr);gap:12px}.year{height:66px;font-size:24px}#logo{height:95px}header.compact #logo{height:65px}nav{flex-wrap:wrap}nav button{font-size:11px;min-height:50px;flex:1 1 29%;padding:7px}h1{margin-bottom:20px}.feature span{font-size:18px}.player-top{font-size:15px}}

/* SHOWS: year and catalog metadata */
.year{height:auto;min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:12px 6px}
.year-number{font-size:clamp(23px,2.2vw,34px);font-weight:750;line-height:1.05}
.year-meta{font-size:clamp(10px,.85vw,13px);font-weight:500;line-height:1.3;color:#d7d7d7;max-width:100%;overflow-wrap:anywhere;text-align:center}
.year:hover .year-meta,.year:focus-visible .year-meta{color:#fff}
/* FEATURES: click-to-scroll controls */
.feature-scroller{position:relative}
.feature-row{scrollbar-width:thin;scroll-padding-inline:8px}
.row-arrow{position:absolute;top:calc((100% - 45px)/2 - 20px);z-index:3;width:54px;height:74px;border:1px solid #ffffff70;border-radius:10px;background:#111e;color:#fff;font-size:60px;line-height:1;display:grid;place-items:center;padding:0 0 9px;box-shadow:0 3px 16px #000b;transition:background .15s,opacity .15s}
.row-arrow-left{left:0}.row-arrow-right{right:0}
.row-arrow:hover:not(:disabled),.row-arrow:focus-visible{background:#c12127}
.row-arrow:disabled{opacity:0;pointer-events:none}
@media(max-width:600px){.year{min-height:88px}.year-meta{font-size:10px}.row-arrow{width:38px;height:60px;font-size:42px}}

/* Slightly shorter SHOWS year buttons; no playback changes. */
.year{min-height:82px;padding:8px 6px}
@media(max-width:600px){.year{min-height:66px;padding:6px 4px}}

/* Match the exact desktop height of the three top navigation buttons. */
@media(min-width:601px){.year{height:82px;min-height:82px;max-height:82px;padding:0 6px;box-sizing:border-box}}

/* Keep the shrinking sticky logo on FEATURES, but hide SHOWS after scrolling. */
body:has(#features-page:not([hidden])) header.compact #feature-nav { display: none; }

/* FEATURES only: fixed header with a permanent layout spacer.
   Shrinking the logo or hiding SHOWS cannot alter scroll position. */
#header-spacer{display:none}
body.features-active #header-spacer{display:block}
body.features-active #header{position:fixed;top:0;left:0;right:0;width:100%;z-index:10}
body.features-active #header.compact #feature-nav{display:none}

/* Stable header on both pages: never change document height at the scroll threshold. */
#header-spacer{display:block}
#header{position:fixed;top:0;left:0;right:0;width:100%;z-index:10}


/* FEATURES navigation: subtle back link instead of the full-width SHOWS tile.
   Positioning it outside normal flow keeps the stable header/spacer unchanged. */
body.features-active #header #feature-nav,
body.features-active #header.compact #feature-nav,
body:has(#features-page:not([hidden])) header.compact #feature-nav {
  display:flex;
  position:absolute;
  top:50%;
  left:5vw;
  transform:translateY(-50%);
  width:auto;
  max-width:none;
  margin:0;
  align-items:center;
  justify-content:flex-start;
  z-index:2;
}
#feature-nav #shows-button {
  flex:0 0 auto;
  min-height:0;
  max-width:none;
  padding:10px 14px;
  border:1px solid #484848;
  border-radius:9px;
  background:#151515;
  font-size:14px;
  font-weight:650;
  white-space:nowrap;
  transition:background .15s,border-color .15s;
}
#feature-nav #shows-button:hover {background:#292929;border-color:#aaa;transform:none}
#feature-nav #shows-button span {font-size:23px;vertical-align:-1px;margin-right:5px;line-height:0}
@media(max-width:700px){
  body.features-active #header #feature-nav,
  body.features-active #header.compact #feature-nav,
  body:has(#features-page:not([hidden])) header.compact #feature-nav {
    top:auto;bottom:6px;left:10px;transform:none;
  }
  #feature-nav #shows-button {font-size:12px;padding:7px 10px}
}