*{box-sizing:border-box;margin:0;padding:0}
html{background:#0a0a0b}
body{background:#0a0a0b;color:#efe9df;font-family:'Hanken Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:1440px;margin:0 auto}
a{color:inherit}
.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:12px;top:12px;z-index:200;background:#efe9df;color:#0a0a0b;padding:8px 12px}
header{display:flex;justify-content:space-between;align-items:center;padding:30px 48px 22px}
.brand{font:400 30px/1 'Anton',sans-serif;letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
.brand small{display:block;font:500 10px/1 'Hanken Grotesk',sans-serif;letter-spacing:.38em;opacity:.55;margin-top:8px}
nav{display:flex;gap:28px;align-items:center;font-size:12px;letter-spacing:.22em;text-transform:uppercase}
nav a{text-decoration:none;opacity:.7;transition:opacity .2s}nav a:hover,nav a[aria-current]{opacity:1}
nav .btn{opacity:1;border:1px solid #efe9df;padding:11px 18px;border-radius:2px;transition:background .2s,color .2s}
nav .btn:hover{background:#efe9df;color:#0a0a0b}
.burger{display:none}
.filters{display:flex;gap:10px;padding:0 48px 22px;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.filters button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:#efe9df;background:none;cursor:pointer;padding:8px 14px;border:1px solid rgba(239,233,223,.18);border-radius:999px;opacity:.7;transition:opacity .2s,border-color .2s}
.filters button:hover{opacity:1;border-color:rgba(239,233,223,.5)}
.filters button.on{background:#efe9df;color:#0a0a0b;opacity:1;border-color:#efe9df}
.grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(130px,12.1vw,174px);grid-auto-flow:dense;gap:6px;padding:0 48px}
.tile{position:relative;display:block;color:inherit;text-decoration:none;overflow:hidden}
.tile[hidden]{display:none}
.tile .frame{position:absolute;inset:0}
.tile .frame img{transition:transform .6s ease}
.tile.big{grid-column:span 2;grid-row:span 2}
.tile.wide{grid-column:span 2}
.tile.playable,.tile.ext{cursor:pointer}
.tile.playable:hover,.tile.ext:hover,.tile:focus-visible{outline:1px solid rgba(239,233,223,.85);outline-offset:-1px}
.tile.playable:hover img,.tile.ext:hover img{transform:scale(1.04)}
.cap{position:absolute;z-index:6;left:0;right:0;bottom:0;padding:14px 16px;display:flex;justify-content:space-between;align-items:flex-end;background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,0))}
.cap h3{font:400 20px/1 'Anton',sans-serif;letter-spacing:.03em;text-transform:uppercase}
.big .cap h3{font-size:34px}
.cap p{font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.7;margin-top:6px}
.cap .t{font-size:11px;opacity:.75;font-variant-numeric:tabular-nums}
.tag{position:absolute;z-index:6;top:12px;left:12px;font-size:9px;letter-spacing:.24em;text-transform:uppercase;background:#d9b483;color:#111;padding:5px 8px}
.yt,.soon{position:absolute;z-index:6;top:12px;right:12px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;background:rgba(0,0,0,.55);padding:5px 8px}
.soon{color:rgba(239,233,223,.8);border:1px solid rgba(239,233,223,.25);background:rgba(0,0,0,.45)}
.play{position:absolute;z-index:6;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);width:58px;height:58px;border-radius:50%;border:1px solid rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);background:rgba(0,0,0,.25);opacity:0;transition:opacity .25s,transform .25s}
.play::after{content:"";border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.big .play{opacity:1;transform:translate(-50%,-50%);width:72px;height:72px}
.tile:hover .play,.tile:focus-visible .play{opacity:1;transform:translate(-50%,-50%)}
.mcta{display:none;text-decoration:none}
footer{padding:40px 48px 36px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
footer a{text-decoration:none}
/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:56px 16px 24px}
.lb[hidden]{display:none}
.lb .stage{position:relative;width:min(92vw,1100px);aspect-ratio:16/9;max-height:84vh}
.lb.vertical .stage{width:min(92vw,calc(84vh * 9 / 16),460px);aspect-ratio:9/16}
.lb iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.lb .close{position:absolute;top:14px;right:16px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(239,233,223,.5);background:none;color:#efe9df;font-size:22px;line-height:1;cursor:pointer}
body.lb-open{overflow:hidden}
@media (max-width:1000px){
 .grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:700px){
 header{padding:22px 18px 16px}
 .brand{font-size:24px}.brand small{font-size:8px;letter-spacing:.3em;margin-top:7px}
 nav{display:none}
 nav.open{display:flex;position:absolute;top:76px;right:18px;z-index:50;flex-direction:column;align-items:stretch;gap:0;background:#141416;border:1px solid rgba(239,233,223,.18);min-width:200px}
 nav.open a{padding:16px 18px;opacity:1}nav.open .btn{border:0;border-top:1px solid rgba(239,233,223,.18)}
 header{position:relative}
 .burger{display:flex;flex-direction:column;gap:6px;background:none;border:1px solid rgba(239,233,223,.35);width:42px;height:42px;align-items:center;justify-content:center;border-radius:50%;cursor:pointer}
 .burger i{display:block;width:16px;height:1.5px;background:#efe9df}
 .filters{overflow-x:auto;flex-wrap:nowrap;padding:0 18px 18px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
 .filters::-webkit-scrollbar{display:none}
 .filters button{white-space:nowrap;flex:none}
 .grid{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:8px;padding:0 18px}
 .tile{aspect-ratio:16/10}
 .tile.big,.tile.wide,.tile.new,.tile.mfull{grid-column:span 2;grid-row:auto;aspect-ratio:16/9}
 .cap{padding:10px 11px}
 .cap h3{font-size:15px}.big .cap h3,.new .cap h3,.wide .cap h3,.mfull .cap h3{font-size:24px}
 .cap p{font-size:8px;letter-spacing:.18em}
 .tile:not(.big):not(.new):not(.wide):not(.mfull) .cap p{display:none}
 .tag,.yt,.soon{font-size:8px;top:9px}.tag{left:9px}.yt,.soon{right:9px}
 .tile:not(.big):not(.new):not(.wide):not(.mfull) .soon{font-size:7px;letter-spacing:.14em;padding:4px 6px}
 .play{display:none}
 .tile.playable::after,.tile.ext::after{content:"";position:absolute;z-index:7;right:10px;bottom:10px;width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.75);background:rgba(0,0,0,.35) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><path d='M10 8l8 5-8 5z' fill='white'/></svg>") center/26px no-repeat}
 .cap .t{display:none}
 .mcta{display:block;margin:22px 18px 0;text-align:center;border:1px solid #efe9df;padding:16px;font-size:12px;letter-spacing:.24em;text-transform:uppercase}
 footer{flex-direction:column;gap:10px;padding:28px 18px 36px}
 .lb .close{top:10px;right:10px}
}
@media (prefers-reduced-motion:reduce){.frame::after{animation:none}.tile .frame img{transition:none}}
.frame picture{display:block;width:100%;height:100%}
/* MrBeast hero: no play cue at rest (any device); button + badge appear on hover/keyboard focus */
.big .play{opacity:0}
.big .yt{opacity:0;transition:opacity .35s ease}
.big:hover .play,.big:focus-visible .play,.big:hover .yt,.big:focus-visible .yt{opacity:1}
.tile.big.playable::after{opacity:0;transition:opacity .35s ease}
.tile.big.playable:hover::after,.tile.big.playable:focus-visible::after{opacity:1}
/* Mobile only: Season 15 Supertease sits directly below Steven Bartlett (desktop order unchanged) */
@media (max-width:700px){
 .grid>.tile.big,.grid>.tile[aria-label="Play Steven Bartlett"]{order:-2}
 .grid>.tile[aria-label="Watch Shark Tank Season 15 Supertease on IMDb"]{order:-1}
}