@font-face{font-family:"Monaco Digi";src:url(/assets/monaco.woff2) format("woff2");font-display:block}
@font-face{font-family:"PS Face";src:url(/assets/face3.woff2) format("woff2");font-display:block}
:root{--paper:#fff;--ink:#000;--red:#c8102e;--vcr-blue:#0000ff;--vcr-navy:#000066;
  --bios-grey:#c6c6c6;--bios-cyan:#8dfcff;--bios-yellow:#ffe75a;
  --gutter:clamp(16px,2.2vw,32px);--digital:"Monaco Digi",ui-monospace,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--digital);font-size:16px;line-height:20px;-webkit-font-smoothing:none;
  cursor:url(/assets/cursor-32.png) 2 1,auto;cursor:-webkit-image-set(url(/assets/cursor-32.png) 1x,url(/assets/cursor-64.png) 2x) 2 1,auto;
  padding-bottom:84px;text-transform:uppercase}
a,button{color:inherit;text-decoration:none;cursor:inherit;font:inherit;text-transform:inherit}
button{all:unset;box-sizing:border-box}
video,img{display:block}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);padding:18px var(--gutter) 14px;display:grid;
  grid-template-columns:auto 1fr auto;align-items:end;gap:10px 24px;border-bottom:2px solid var(--vcr-navy)}
.top .back{background:var(--vcr-navy);color:#fff;padding:5px 10px 3px;align-self:center}
.top .back:hover,.top .back:focus-visible{background:var(--red);outline:none}
.top h1{font-family:"PS Face",var(--digital);font-weight:400;font-size:clamp(40px,5.4vw,72px);line-height:.86;letter-spacing:0;text-transform:none}
.top .count{color:var(--vcr-blue);text-align:right}
.tabs{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:0;margin-top:4px}
.tabs a{display:inline-flex;gap:8px;padding:4px 12px 2px 10px;border:2px solid var(--vcr-navy);margin-right:-2px;background:#fff}
.tabs a i{font-style:normal;color:var(--vcr-blue)}
.tabs a[aria-current]{background:var(--vcr-blue);color:#fff;border-color:var(--vcr-blue);position:relative;z-index:1}
.tabs a[aria-current] i{color:var(--bios-yellow)}
.tabs a:hover,.tabs a:focus-visible{background:var(--red);color:#fff;border-color:var(--red);outline:none;position:relative;z-index:2}
.tabs a:hover i,.tabs a:focus-visible i{color:#fff}

/* ---------- tile grid (music videos / commercial): video square + label that is always showing ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px 14px;padding:22px var(--gutter) 0}
body[data-page="commercial"] .grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.tile{display:flex;flex-direction:column;width:100%;text-align:left;border:2px solid var(--vcr-navy);background:#fff}
.tile .sq{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:#0b0b0b}
.tile .sq video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .code{position:absolute;left:8px;top:8px;color:#fff;background:rgba(0,0,0,.55);padding:3px 6px 1px;z-index:2}
.tile .lab{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 10px;padding:6px 8px 5px;border-top:2px solid var(--vcr-navy);background:#fff}
.tile .lab .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.tile .lab .y{color:var(--vcr-blue)}
.tile .lab .sub{grid-column:1/-1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#6b6b6b}
.tile:hover,.tile:focus-visible{border-color:var(--red);outline:none}
.tile:hover .lab,.tile:focus-visible .lab{background:var(--red);border-color:var(--red)}
.tile:hover .lab *,.tile:focus-visible .lab *{color:#fff}
.tile:hover .code,.tile:focus-visible .code{background:var(--red)}
.tile.nosig .sq{display:grid;place-items:center;text-align:center;color:#fff;background:#111}
.tile.nosig .sq::before{content:"";position:absolute;inset:-50%;opacity:.28;
  background:repeating-radial-gradient(circle at 17% 32%,#fff 0 1px,transparent 1px 3px),repeating-radial-gradient(circle at 71% 64%,#fff 0 1px,transparent 1px 4px);
  animation:snow .25s steps(3) infinite}
.tile.nosig .msg{position:relative;z-index:1;background:var(--vcr-blue);padding:6px 12px 4px}
@keyframes snow{0%{transform:translate(0,0)}33%{transform:translate(-7%,4%)}66%{transform:translate(5%,-6%)}100%{transform:translate(0,0)}}

/* ---------- player widget ---------- */
.player{position:fixed;inset:0;z-index:50;display:none;place-items:center;background:rgba(0,0,40,.78);padding:18px var(--gutter) 60px}
.player.open{display:grid}
.deck{--bev-hi:#fff;--bev-lo:#5a5a5a;width:min(1320px,100%);max-height:calc(100vh - 78px);display:flex;flex-direction:column;background:var(--bios-grey);
  border:2px solid var(--vcr-navy);box-shadow:8px 8px 0 rgba(0,0,0,.45)}
.deck .bar{display:flex;align-items:center;gap:10px;background:var(--vcr-navy);color:#fff;padding:4px 4px 3px 8px;flex:none}
.deck .bar .ttl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck .bar .ttl i{font-style:normal;color:var(--bios-yellow)}
.deck .screen{position:relative;background:#000;margin:6px 6px 0;border:2px solid;border-color:var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo);
  min-height:0;flex:0 1 auto;overflow:hidden}
.deck .screen video,.deck .screen img{display:block;width:100%;height:auto;max-height:calc(100vh - 250px);aspect-ratio:16/9;object-fit:contain;background:#000}
.deck .osd{position:absolute;left:14px;top:12px;color:#fff;text-shadow:2px 2px 0 #000;pointer-events:none;letter-spacing:.04em}
.deck .osd.r{left:auto;right:14px;color:var(--bios-yellow)}
.deck .osd.wait{top:auto;bottom:12px;color:var(--bios-cyan)}
.deck .ctrl{display:flex;align-items:center;gap:6px;padding:6px;flex:none}
.pbtn{display:inline-grid;place-items:center;width:36px;height:32px;background:var(--bios-grey);border:2px solid;border-color:var(--bev-hi) var(--bev-lo) var(--bev-lo) var(--bev-hi);color:#000;flex:none}
.pbtn svg{width:20px;height:20px;shape-rendering:crispEdges;display:block}
.pbtn:hover,.pbtn:focus-visible{background:var(--red);color:#fff;outline:none}
.pbtn:active,.pbtn.on{border-color:var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo);background:#b4b4b4}
.pbtn.big{width:48px}
.pbtn[disabled]{opacity:.4;pointer-events:none}
.deck .track{position:relative;flex:1;height:22px;min-width:60px;background:#000;border:2px solid;border-color:var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo);touch-action:none}
.deck .track .buf{position:absolute;left:0;top:0;bottom:0;background:#1a1a5a;width:0}
.deck .track .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:repeating-linear-gradient(90deg,var(--vcr-blue) 0 6px,#2b2bff 6px 8px)}
.deck .track .head{position:absolute;top:-2px;bottom:-2px;width:4px;margin-left:-2px;background:var(--bios-yellow);left:0}
.deck .track:focus-visible{outline:2px solid var(--red);outline-offset:1px}
.deck .tc{flex:none;background:#000;color:#8dffa8;padding:5px 8px 3px;border:2px solid;border-color:var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo);font-variant-numeric:tabular-nums}
.deck .info{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;align-items:center;gap:8px 22px;margin:0 6px 6px;padding:8px 10px;background:#fff;
  border:2px solid;border-color:var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo);flex:none}
.deck .info .title{font-family:"PS Face",var(--digital);text-transform:none;font-size:36px;line-height:.9;white-space:nowrap}
.deck .info dl{display:flex;flex-wrap:wrap;gap:2px 18px;min-width:0}
.deck .info dl div{display:flex;gap:8px;min-width:0}
.deck .info dt{color:#7a7a7a}
.deck .info dd{color:var(--vcr-blue)}
.deck .go{display:inline-block;padding:6px 10px 4px;background:var(--vcr-navy);color:#fff;white-space:nowrap}
.deck .go:hover,.deck .go:focus-visible{background:var(--red);outline:none}
.deck .screen:fullscreen{display:grid;place-items:center;border:0;margin:0}
.deck .screen:fullscreen video,.deck .screen:fullscreen img{max-height:none;width:100vw;height:100vh;aspect-ratio:auto}
body.locked{overflow:hidden}

/* ---------- events ---------- */
.events{padding:0 var(--gutter)}
.evt{padding:72px 0 40px;display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:28px 44px;align-items:start}
.evt+.evt{border-top:2px solid var(--vcr-navy)}
.evt.flip{grid-template-columns:minmax(0,1fr) minmax(220px,300px)}
.evt.flip .meta{order:2}
.evt .meta{position:sticky;top:170px}
.evt .no{display:inline-block;background:var(--vcr-navy);color:#fff;padding:3px 8px 1px;margin-bottom:14px}
.evt h2{font-family:"PS Face",var(--digital);font-weight:400;text-transform:none;font-size:clamp(38px,4vw,58px);line-height:.9;margin-bottom:10px}
.evt .who{color:var(--vcr-blue);margin-bottom:18px}
.evt dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;border-top:2px dotted #9a9a9a;padding-top:12px}
.evt dt{color:#8a8a8a}
.evt .n{margin-top:18px;color:#8a8a8a}
.media{display:grid;gap:14px}
.item{position:relative;display:block;width:100%;overflow:hidden;background:#0b0b0b}
.item video,.item img{width:100%;height:100%;object-fit:cover}
.item .code{position:absolute;left:8px;top:8px;color:#fff;background:rgba(0,0,0,.55);padding:3px 6px 1px}
.item:hover .code,.item:focus-visible .code{background:var(--red)}
.item:focus-visible{outline:3px solid var(--vcr-blue);outline-offset:2px}
/* layout: one hero + pair (16:9 material) */
.media.wide{grid-template-columns:1fr 1fr}
.media.wide .item{aspect-ratio:16/9}
.media.wide .item:first-child{grid-column:1/-1}
/* layout: tall hero + 3x2 strip (4:5 material) */
.media.tall{grid-template-columns:2fr 1fr 1fr 1fr}
.media.tall .item{aspect-ratio:4/5}
.media.tall .item:first-child{grid-row:span 2;aspect-ratio:auto;height:100%}
.evt.flip .media.tall{grid-template-columns:1fr 1fr 1fr 2fr}
.evt.flip .media.tall .item:first-child{grid-column:4;grid-row:1/span 2}
/* no tape */
.notape{height:clamp(220px,26vw,380px);background:var(--vcr-blue);color:#fff;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden}
.notape .osd{position:absolute;left:18px;top:14px}
.notape .osd.r{left:auto;right:18px;color:var(--bios-yellow)}
.notape b{font-weight:normal;font-size:32px;line-height:36px;animation:soft 2.4s ease-in-out infinite}
.notape small{display:block;margin-top:10px;font-size:16px;color:#bfc8ff}
@keyframes soft{0%,100%{opacity:1}50%{opacity:.15}}

/* ---------- ticker (fixed) ---------- */
.ticker{position:fixed!important;left:0;right:0;bottom:0;margin:0!important;z-index:30}

@media (max-width:980px){
  .deck .info{grid-template-columns:1fr auto}
  .deck .info dl{grid-column:1/-1;grid-row:2}
  .evt,.evt.flip{grid-template-columns:1fr;padding-top:48px}
  .evt.flip .meta{order:0}
  .evt .meta{position:static}
}
@media (max-width:640px){
  .top{grid-template-columns:auto 1fr;padding-top:14px}
  .top .count{display:none}
  .tabs a{padding:3px 8px 1px 6px}
  .tabs a i{display:none}
  .grid,body[data-page="commercial"] .grid{grid-template-columns:1fr 1fr;gap:12px 8px}
  body[data-page="music-videos"] .grid{grid-template-columns:1fr;gap:18px}
  body[data-page="commercial"] .tile .code{display:none}
  body[data-page="commercial"] .tile .lab .y{display:none}
  .media.wide{grid-template-columns:1fr}
  .media.tall,.evt.flip .media.tall{grid-template-columns:1fr 1fr}
  .media.tall .item:first-child,.evt.flip .media.tall .item:first-child{grid-column:1/-1;grid-row:auto;aspect-ratio:4/5;height:auto}
  .player{padding:8px 8px 44px}
  .deck{max-height:calc(100vh - 52px);overflow:auto}
  .deck .screen video,.deck .screen img{max-height:48vh}
  .deck .ctrl{flex-wrap:wrap;gap:5px}
  .deck .track{order:9;flex-basis:100%}
  .deck .ctrl .pbtn.opt{display:none}
  .deck .info .title{font-size:28px;white-space:normal}
  .ticker{font-size:16px!important;line-height:16px!important;height:36px!important}
  .ticker .tag .clock{display:none}
  body{padding-bottom:60px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tile.nosig::before,.notape b{animation:none}
  .ticker .run{animation:none}
  .ticker .it b.blink,.ticker .it b.blink-blue,.ticker .it b.fade{animation:none}
}
.deck [hidden],.tile [hidden]{display:none!important}