/* whereisthe.cat · HotWired v2 · 2026-10-28 */
:root{--k:#000;--w:#fff;--y:#ffef00;--g:#00ff3c;--m:#ff00a8;--c:#00d8ff;--r:#ff2a00;--o:#ff7a00;--acc:var(--y)}
body.sec-tariq{--acc:var(--m)}
body.sec-rave{--acc:var(--c)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--k);color:var(--w)}
body{font:13px/1.4 Verdana,Geneva,sans-serif;overflow-x:hidden}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* masthead */
.mast{display:grid;grid-template-columns:auto 1fr;align-items:stretch;border-bottom:4px solid var(--w)}
.mast .cat{background:var(--m);display:flex;align-items:flex-end;padding:14px 18px 10px}
.mast .cat img{width:220px;height:auto;display:block}
.mast .name{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:14px 18px 12px}
.mast .base{white-space:nowrap}
.wordmark{display:block;margin:0;font:900 clamp(44px,7.4vw,96px)/.86 "Arial Black","Helvetica Neue",Arial,sans-serif;letter-spacing:-.05em;text-transform:lowercase;color:var(--w);text-decoration:none}
.wordmark{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:800;font-style:italic;letter-spacing:-.055em;padding-right:.08em}
.wordmark span{color:var(--g)}
.mast .base{margin:14px 0 0;font:bold clamp(15px,1.9vw,22px)/1.25 "Courier New",monospace;color:var(--c);text-transform:uppercase;letter-spacing:.06em}
.mast .base::after{content:"";display:inline-block;width:.6em;height:1.05em;margin-left:.15em;vertical-align:-.15em;background:currentColor;animation:blink 1s steps(1) infinite}
@media(prefers-reduced-motion:reduce){.mast .base::after{animation:none}}
.mast .base.js::after{display:none}
.mast .base .cur{display:inline-block;width:.6em;height:1.05em;margin-left:.15em;vertical-align:-.15em;background:currentColor;animation:blink 1s steps(1) infinite}
.mast .base.typing .cur{animation:none}
.mast .base .rest{visibility:hidden}
@media(prefers-reduced-motion:reduce){.mast .base .cur{animation:none}}

/* channel buttons */
.nav{display:grid;grid-template-columns:repeat(2,1fr)}
.nav a{display:block;padding:12px 14px 10px;font:900 22px/1 "Arial Black",Arial,sans-serif;text-transform:uppercase;letter-spacing:-.03em;text-decoration:none;color:var(--k)}
.nav a:nth-child(1){background:var(--y)}
.nav a:nth-child(2){background:var(--c)}
.nav a small{display:block;margin-top:6px;font:11px/1 "Courier New",monospace;text-transform:none;letter-spacing:0}
.nav a[aria-current]{outline:4px solid var(--w);outline-offset:-4px}
@media(hover:hover){.nav a:hover{filter:invert(1)}}

/* listing: sidebar + grid */
.body{display:grid;grid-template-columns:180px minmax(0,1fr);border-top:4px solid var(--w)}
.side{border-right:2px solid var(--w);min-width:0}
.side h2{margin:0;padding:8px 10px;background:var(--r);font:900 14px/1 "Arial Black",Arial,sans-serif;text-transform:uppercase;color:var(--w)}
.side button{display:flex;justify-content:space-between;gap:8px;width:100%;padding:7px 10px;border:0;border-bottom:1px solid #333;background:var(--k);color:var(--w);font:12px/1.2 Verdana,sans-serif;text-align:left;cursor:pointer}
.side button span{font:11px "Courier New",monospace;color:#888}
@media(hover:hover){.side button:hover{background:#222;color:var(--g)}}
.side button[aria-pressed=true]{background:var(--g);color:var(--k)}
.side button[aria-pressed=true] span{color:var(--k)}
.side .find{padding:10px;border-bottom:2px solid var(--w)}
.side input{width:100%;padding:5px 6px;border:2px inset #999;background:var(--w);color:var(--k);font:12px "Courier New",monospace}
.main{padding:14px 14px 30px;min-width:0}
.bar{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 12px;padding-bottom:8px;border-bottom:2px dotted var(--g)}
.bar h1{margin:0;font:900 30px/1 "Arial Black",Arial,sans-serif;text-transform:uppercase;letter-spacing:-.04em;color:var(--acc)}
.bar p{margin:0;font:12px "Courier New",monospace;color:var(--g);white-space:nowrap}
.banner{display:flex;align-items:center;justify-content:center;height:60px;max-width:468px;margin:0 0 16px;border:2px solid var(--m);font:900 15px/1 "Arial Black",Arial,sans-serif;text-transform:uppercase;letter-spacing:.02em;color:var(--m);background:repeating-linear-gradient(45deg,#111 0 6px,#000 6px 12px)}
.banner span{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.banner span{animation:none}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px 12px}
.tape{display:block;text-decoration:none}
.tape .pic{position:relative;aspect-ratio:4/3;background:#111;border:2px solid var(--w);overflow:hidden}
.tape img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.3) contrast(1.1)}
.tape .none{display:flex;align-items:center;justify-content:center;height:100%;font:11px "Courier New",monospace;color:#777}
.tape .yr{position:absolute;left:0;bottom:0;padding:2px 5px;background:var(--y);color:var(--k);font:bold 11px "Courier New",monospace}
.tape .t{margin-top:5px;font:bold 12px/1.2 Verdana,sans-serif;color:var(--w)}
.tape .s{margin-top:2px;font:11px/1.2 "Courier New",monospace;color:var(--c)}
@media(hover:hover){.tape:hover .pic{border-color:var(--g)}.tape:hover .t{color:var(--g);text-decoration:underline}}
.empty{font:13px "Courier New",monospace;color:var(--g)}

/* detail pages */
.film-main{padding:16px 18px 30px;border-top:4px solid var(--w)}
.back-link{display:inline-block;margin-bottom:16px;font:12px "Courier New",monospace;color:var(--g);text-transform:uppercase;letter-spacing:.06em}
.back-link::before{content:"◀ "}
.film-style{display:inline-block;margin:0 0 10px;padding:3px 7px;background:var(--acc);color:var(--k);font:bold 11px "Courier New",monospace;text-transform:uppercase}
body.sec-tariq .film-style{color:var(--w)}
.film-heading h1{margin:0 0 10px;font:900 clamp(34px,6vw,72px)/.92 "Arial Black",Arial,sans-serif;letter-spacing:-.045em;text-transform:uppercase;color:var(--acc)}
.film-meta{margin:0 0 6px;font:13px "Courier New",monospace;color:var(--c)}
.film-rating{margin:0 0 16px;font:12px "Courier New",monospace;color:#888}
.film-rating a{display:inline-block;margin-right:10px;padding:2px 6px;background:var(--y);color:var(--k);font-weight:bold;text-decoration:none}
#screen{position:relative;aspect-ratio:16/9;border:2px solid var(--w);background:#111}
#screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.dialog-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:8px 0;border-bottom:2px dotted var(--g);font:12px "Courier New",monospace;color:var(--c)}
.dialog-foot p{margin:0}
.dialog-foot a{color:var(--g)}
.playback-note{font:11px "Courier New",monospace;color:#777}
.synopsis,.film-credits{margin-top:22px;max-width:860px}
.synopsis h2,.film-credits h2{display:inline-block;margin:0 0 10px;padding:6px 10px;background:var(--r);font:900 14px/1 "Arial Black",Arial,sans-serif;text-transform:uppercase;color:var(--w)}
.synopsis p{margin:0 0 8px;font:14px/1.5 Verdana,sans-serif}
.synopsis a{color:var(--g)}
.film-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0;margin:0;border-top:1px solid #333}
.film-facts div{padding:8px 10px 8px 0;border-bottom:1px solid #333}
.film-facts dt{font:11px "Courier New",monospace;color:var(--g);text-transform:uppercase}
.film-facts dd{margin:2px 0 0;font:13px/1.35 Verdana,sans-serif}
.film-credits h3{margin:20px 0 8px;font:900 16px "Arial Black",Arial,sans-serif;text-transform:uppercase;color:var(--acc)}
.cast-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px 14px;margin:0;padding:0;list-style:none}
.cast-list span{display:block;font:bold 12px Verdana,sans-serif}
.cast-list small{display:block;font:11px "Courier New",monospace;color:#999}
.credit-source{margin-top:14px;font:11px "Courier New",monospace;color:#777}
.credit-source a{color:var(--c)}

.foot{border-top:4px solid var(--w);padding:10px 12px 30px;font:11px "Courier New",monospace;color:#888}
.foot p{margin:0}

@media(max-width:760px){
 .mast{grid-template-columns:1fr}
 .mast .cat img{width:160px}
 .nav a{font-size:16px;padding:10px 8px}
 .body{grid-template-columns:minmax(0,1fr)}
 .side{border-right:0;border-bottom:2px solid var(--w)}
 .side .list{display:flex;overflow-x:auto}
 .side .list button{flex:none;width:auto;min-height:44px;align-items:center;padding:0 14px;font-size:14px;border-right:1px solid #333}
 .side input{font-size:16px;padding:9px 8px}
 .back-link{padding:10px 0;font-size:14px}
 .nav a{-webkit-tap-highlight-color:transparent}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .banner{display:none}
 .film-main{padding:14px}
}

#screen.yt-out{display:block;overflow:hidden;text-decoration:none}
#screen.yt-out img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.2) brightness(.55)}
#screen.yt-out span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:14px 22px;background:var(--r);color:var(--w);font:900 clamp(16px,2.4vw,26px)/1 "Arial Black",Arial,sans-serif;text-transform:uppercase;white-space:nowrap}
@media(hover:hover){#screen.yt-out:hover span{background:var(--g);color:var(--k)}}
#screen.yt-lazy button{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer;overflow:hidden}
#screen.yt-lazy img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.2) brightness(.55)}
#screen.yt-lazy span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:14px 22px;background:var(--r);color:var(--w);font:900 clamp(16px,2.4vw,26px)/1 "Arial Black",Arial,sans-serif;text-transform:uppercase;white-space:nowrap}
#screen.yt-lazy button:hover span,#screen.yt-lazy button:focus-visible span{background:var(--g);color:var(--k)}
.more{grid-column:1/-1;height:1px}
#screen.dead img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}