/* =========================================================
   ALI SEDAIF — site styles
   Anybody (variable width + weight) for every Latin glyph.
   Blaka for the Arabic: blackletter bones, Eastern soul.
   ========================================================= */
@font-face{font-family:"Anybody";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:50% 150%;
  src:url(../fonts/anybody-latin-standard-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Anybody";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:50% 150%;
  src:url(../fonts/anybody-latin-ext-standard-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Blaka";font-display:swap;src:url(../fonts/blaka-arabic-400-normal.woff2) format("woff2")}
@font-face{font-family:"Lalezar";font-display:swap;src:url(../fonts/lalezar-arabic-400-normal.woff2) format("woff2")}
@font-face{font-family:"Blaka Hollow";font-display:swap;src:url(../fonts/blaka-hollow-arabic-400-normal.woff2) format("woff2")}

:root{
  --black:#000;
  --bone:#ECE9E1;
  --dim:#8E8B83;
  --red:#E3241B;
  --yellow:#FFD400;
  --blue:#1D4ED8;
  --green:#00843D;
  --bg:var(--black);
  --fg:var(--bone);
  --accent:var(--red);
  --g:clamp(16px,3.2vw,48px);           /* gutter */
  --any:"Anybody",system-ui,sans-serif;
  --ar:"Lalezar","Anybody",sans-serif;
  --blaka:"Blaka","Lalezar",serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--any);font-size:clamp(16px,1.05vw,18px);line-height:1.5;
  font-stretch:100%;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--accent);color:var(--black)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:var(--g);top:-60px;z-index:200;background:var(--yellow);color:#000;padding:10px 14px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
[lang=ar]{font-family:var(--ar);font-weight:400;letter-spacing:0;direction:rtl}

/* grain over everything — print, not pixels */
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;background:url(../img/grain.png);opacity:.7}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* ---------------- header ---------------- */
.hd{position:fixed;inset:0 0 auto 0;z-index:60;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:16px var(--g);mix-blend-mode:difference;color:#fff;pointer-events:none}
.hd a,.hd span{pointer-events:auto}
.hd .mark{justify-self:start;text-decoration:none;font-weight:850;font-stretch:125%;font-size:17px;letter-spacing:-.01em;display:flex;gap:.5em;align-items:baseline}
.hd .mark [lang=ar]{font-family:var(--blaka);font-size:20px}
.hd .clock{font-size:14px;font-stretch:80%;font-variant-numeric:tabular-nums;opacity:.85}
.hd nav{justify-self:end;display:flex;gap:clamp(14px,2.2vw,30px);font-size:15px;font-weight:600;font-stretch:90%}
.hd nav a{text-decoration:none;position:relative}
.hd nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.hd nav a:hover::after,.hd nav a[aria-current=page]::after{transform:scaleX(1);transform-origin:left}

/* ---------------- intro ---------------- */
.intro{position:fixed;inset:0;z-index:150;background:var(--black);display:grid;place-items:center;pointer-events:none}
.intro svg{width:min(62vw,560px);height:auto;overflow:visible}
.intro .count{position:absolute;left:var(--g);bottom:var(--g);font-weight:900;font-stretch:50%;font-size:clamp(64px,12vw,170px);line-height:.8;color:var(--bone);font-variant-numeric:tabular-nums}
.intro .ar{font-family:var(--blaka);position:absolute;right:var(--g);bottom:calc(var(--g) - .15em);font-size:clamp(40px,7vw,96px);color:var(--red);line-height:1}
html.no-intro .intro{display:none}

/* ---------------- hero ---------------- */
.hero{position:relative;min-height:100svh;padding:calc(64px + 4vh) var(--g) var(--g);display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;isolation:isolate}
.hero .sun{position:absolute;z-index:-1;width:min(78vw,980px);aspect-ratio:1;border-radius:50%;background:var(--red);right:-14vw;top:8vh}
.hero .bar{position:absolute;z-index:-1;left:0;right:0;height:clamp(10px,1.6vw,22px);background:var(--yellow);top:calc(50% + 10vh);transform-origin:left}
.hero .blk{position:absolute;z-index:-1;width:clamp(70px,11vw,170px);aspect-ratio:1;background:var(--blue);left:calc(var(--g) + 4vw);bottom:18vh}
.hero-top{display:flex;justify-content:space-between;gap:24px;align-items:start}
.hero-top p{margin:0;max-width:30ch;font-size:clamp(16px,1.25vw,20px);line-height:1.3;font-weight:500}
.hero-top .tag{font-stretch:75%;font-weight:700;text-align:right}
.name{align-self:center;margin:0;font-weight:900;line-height:.78;letter-spacing:-.02em;color:var(--bone);
  font-size:clamp(68px,17.5vw,330px);user-select:none}
.name .ln{display:block;white-space:nowrap}
.name .ch{display:inline-block;font-stretch:var(--w,100%);font-weight:var(--wt,900);will-change:font-stretch}
.name-ar{font-family:var(--blaka);position:absolute;right:calc(var(--g) + 2vw);bottom:clamp(90px,15vh,170px);margin:0;color:var(--yellow);
  font-size:clamp(70px,13vw,240px);line-height:1;transform:rotate(-7deg);transform-origin:right bottom;text-shadow:.04em .04em 0 var(--black)}
.hero-bot{display:flex;justify-content:space-between;align-items:end;gap:24px;font-size:15px;font-weight:600;font-stretch:85%}
.hero-bot .scroll{display:inline-flex;align-items:center;gap:10px}
.hero-bot .scroll i{display:block;width:2px;height:38px;background:currentColor;transform-origin:top;animation:drip 1.8s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------------- tape (marquee) ---------------- */
.tape{position:relative;z-index:5;background:var(--tape-bg,var(--yellow));color:var(--tape-fg,#000);overflow:hidden;white-space:nowrap;
  transform:rotate(var(--tilt,-2.4deg)) scale(1.06);margin:clamp(30px,5vw,70px) 0;border-block:3px solid #000}
.tape .track{display:inline-flex;align-items:center;gap:.6em;padding:.18em 0;font-weight:900;font-stretch:62%;font-size:clamp(34px,5.4vw,84px);line-height:1;text-transform:uppercase;will-change:transform}
.tape .track [lang=ar]{text-transform:none;font-size:.92em;line-height:1.1;transform:translateY(.06em)}
.tape .star{display:inline-block;width:.55em;height:.55em;background:currentColor;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}

/* ---------------- work index ---------------- */
.index-head{display:flex;justify-content:space-between;align-items:end;gap:24px;padding:clamp(40px,7vw,100px) var(--g) 14px;border-bottom:3px solid var(--bone)}
.index-head h2{margin:0;font-weight:900;font-stretch:150%;font-size:clamp(34px,5vw,76px);line-height:.9;letter-spacing:-.02em}
.index-head p{margin:0;color:var(--dim);font-stretch:85%;font-weight:600;max-width:34ch;text-align:right}
.works{list-style:none;margin:0;padding:0}
.works li{position:relative;border-bottom:1px solid #2b2b2b}
.works a{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;padding:clamp(10px,1.4vw,18px) var(--g);text-decoration:none;overflow:hidden;isolation:isolate}
.works a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--c);transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease)}
.works .t{font-weight:850;font-stretch:56%;font-size:clamp(46px,8.6vw,150px);line-height:.86;letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;
  transition:font-stretch .7s var(--ease),color .3s}
.works .meta{display:grid;justify-items:end;gap:2px;text-align:right;font-stretch:80%;font-weight:600;color:var(--dim);transition:color .3s}
.works .meta [lang=ar]{font-size:clamp(26px,2.4vw,40px);line-height:1.1;color:var(--bone);transition:color .3s}
@media (hover:hover){
  .works a:hover::before,.works a:focus-visible::before{transform:scaleY(1);transform-origin:top}
  .works a:hover .t,.works a:focus-visible .t{font-stretch:108%;color:var(--on,#000)}
  .works a:hover .meta,.works a:hover .meta [lang=ar],.works a:focus-visible .meta{color:var(--on,#000)}
}
.works .thumb{display:none}
.peek{position:fixed;left:0;top:0;z-index:40;width:clamp(220px,24vw,380px);pointer-events:none;opacity:0;transform:translate(-50%,-50%);will-change:transform}
.peek img{width:100%;box-shadow:10px 10px 0 #000;border:3px solid #000}

/* ---------------- sections ---------------- */
.block{padding:clamp(70px,10vw,150px) var(--g) 0}
.statement{margin:0;font-weight:800;font-size:clamp(34px,5.6vw,96px);line-height:.98;letter-spacing:-.02em;max-width:17ch}
.statement .w{display:inline-block;font-stretch:var(--w,100%)}
.statement em{font-style:normal;color:var(--accent)}
.lede{font-size:clamp(20px,1.8vw,28px);line-height:1.28;font-weight:500;max-width:38ch;margin:0 0 .9em}
.prose{max-width:60ch}
.prose p{margin:0 0 1em}
.btn{display:inline-flex;align-items:center;gap:.6em;background:var(--yellow);color:#000;text-decoration:none;font-weight:800;font-stretch:110%;padding:14px 22px;border:3px solid #000;box-shadow:6px 6px 0 var(--bone);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--bone)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--bone)}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--fg);box-shadow:none}
.btn.ghost:hover{background:var(--fg);color:var(--bg)}

/* ---------------- footer ---------------- */
.ft{position:relative;margin-top:clamp(100px,14vw,200px);background:var(--red);color:#000;overflow:hidden;isolation:isolate}
.ft .in{padding:clamp(60px,9vw,130px) var(--g) 24px}
.ft h2{margin:0;font-weight:900;font-stretch:150%;font-size:clamp(40px,8.6vw,150px);line-height:.86;letter-spacing:-.03em}
.ft h2 .ar{display:block;font-size:.62em;line-height:1.25;margin-top:.1em;text-align:right}
.mail{display:inline-block;margin-top:clamp(28px,4vw,56px);background:none;border:0;padding:0;color:#000;cursor:pointer;text-align:left;
  font:900 clamp(26px,4.4vw,74px)/1 var(--any);font-stretch:62%;letter-spacing:-.01em;border-bottom:clamp(3px,.5vw,7px) solid #000}
.mail:hover{color:var(--bone)}
.ft .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;margin-top:clamp(40px,6vw,80px);padding-top:18px;border-top:3px solid #000;font-weight:700;font-stretch:85%}
.colophon{margin-top:18px;font-size:13px;font-weight:600;font-stretch:85%;opacity:.75}
.ft .row a{text-decoration:none;border-bottom:2px solid transparent}
.ft .row a:hover{border-color:#000}
.ft .big-ar{position:absolute;z-index:-1;left:-2vw;bottom:-6vw;font-family:"Blaka Hollow",var(--ar);font-size:34vw;line-height:1;color:#000;opacity:.16;direction:rtl;white-space:nowrap;pointer-events:none}
.toast{position:fixed;left:50%;bottom:24px;z-index:120;transform:translate(-50%,calc(100% + 60px));visibility:hidden;background:var(--yellow);color:#000;border:3px solid #000;padding:12px 18px;font-weight:800;font-stretch:90%;box-shadow:6px 6px 0 #000;transition:transform .5s var(--ease)}
.toast.on{transform:translate(-50%,0);visibility:visible}

/* ---------------- project page ---------------- */
.p-hero{position:relative;min-height:100svh;background:var(--c);color:var(--on);padding:calc(70px + 6vh) var(--g) var(--g);display:grid;grid-template-rows:1fr auto auto;overflow:hidden;isolation:isolate}
.p-hero .ghost-ar{position:absolute;z-index:-1;right:-3vw;top:4vh;font-family:"Blaka Hollow",var(--ar);font-size:clamp(160px,34vw,640px);line-height:.9;direction:rtl;white-space:nowrap;color:var(--on);opacity:.22}
.p-hero .back{align-self:start;justify-self:start;font-weight:700;font-stretch:85%;text-decoration:none;display:inline-flex;gap:.5em;align-items:center;border-bottom:2px solid currentColor;padding-bottom:2px}
.p-title{margin:0;align-self:end;font-weight:900;font-stretch:125%;font-size:clamp(52px,11.5vw,220px);line-height:.84;letter-spacing:-.03em;text-transform:uppercase;max-width:11ch}
.p-title .ch{display:inline-block}
.p-sub{margin:clamp(18px,2.4vw,30px) 0 0;font-size:clamp(19px,1.8vw,28px);line-height:1.25;font-weight:600;max-width:36ch}
.p-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:clamp(30px,4vw,56px) 0 0;padding:16px 0 0;border-top:3px solid currentColor}
.p-meta dt{font-size:13px;font-weight:700;font-stretch:80%;opacity:.7}
.p-meta dd{margin:4px 0 0;font-weight:700;font-stretch:95%}
.cover{position:relative;overflow:hidden;background:#000}
.cover img{width:100%;height:min(92vh,1100px);object-fit:cover}
.cover .print{position:absolute;inset:0}
.cover .print img{height:100%}
.cover .full{clip-path:inset(0 0 100% 0)}
.cover .label{position:absolute;left:var(--g);bottom:var(--g);z-index:3;background:#000;color:var(--bone);padding:8px 12px;font-weight:700;font-stretch:85%;font-size:14px}
.p-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,28px);padding:clamp(60px,8vw,120px) var(--g) 0}
.p-body .lede{grid-column:1/8}
.p-body .prose{grid-column:1/8}
.p-body aside{grid-column:9/-1;grid-row:1/span 2;align-self:start;border-top:3px solid var(--fg);padding-top:14px;color:var(--dim)}
.p-body aside h3{margin:0 0 6px;color:var(--fg);font-size:15px;font-stretch:90%}
.p-body aside p{margin:0 0 16px}
.chap{padding:clamp(80px,10vw,150px) var(--g) 0}
.chap-h{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,28px);align-items:end;border-bottom:3px solid var(--fg);padding-bottom:14px;margin-bottom:clamp(24px,3vw,40px)}
.chap-h h2{grid-column:1/9;margin:0;font-weight:900;font-stretch:118%;font-size:clamp(34px,5.4vw,92px);line-height:.9;letter-spacing:-.025em}
.chap-h [lang=ar]{grid-column:9/-1;justify-self:end;font-size:clamp(34px,4vw,70px);line-height:1;color:var(--c)}
.chap .prose{margin-bottom:clamp(24px,3vw,40px)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(10px,1.4vw,22px)}
.grid figure{margin:0;grid-column:span var(--s,6);align-self:start}
.grid .rv{overflow:hidden;background:#151515}
.grid img{width:100%;cursor:zoom-in}
.grid figcaption{margin-top:8px;font-size:14px;color:var(--dim);font-stretch:90%}
.grid .shot .rv{border:3px solid var(--bone)}
.grid .pixel .rv{background:#fff;display:grid;place-items:center;aspect-ratio:1}
.grid .pixel img{image-rendering:pixelated;width:62%}
.grid .sig{grid-column:1/-1;display:grid;gap:14px;max-width:920px}
.grid .sig img{cursor:default;border:3px solid var(--bone)}
.next{display:block;position:relative;margin-top:clamp(100px,14vw,200px);background:var(--nc);color:var(--non);padding:clamp(50px,8vw,110px) var(--g);text-decoration:none;overflow:hidden;isolation:isolate}
.next small{display:block;font-weight:700;font-stretch:85%;font-size:15px;margin-bottom:10px}
.next b{display:block;font-weight:900;font-stretch:60%;font-size:clamp(56px,13vw,240px);line-height:.84;letter-spacing:-.01em;text-transform:uppercase;transition:font-stretch .8s var(--ease)}
.next:hover b,.next:focus-visible b{font-stretch:140%}
.next [lang=ar]{position:absolute;right:var(--g);bottom:var(--g);font-size:clamp(40px,6vw,110px);line-height:1}

/* ---------------- about ---------------- */
.manifesto{padding:calc(90px + 8vh) var(--g) 0}
.manifesto .statement{max-width:none;font-size:clamp(40px,7.6vw,140px);line-height:.92}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);padding:clamp(70px,9vw,130px) var(--g) 0}
.pillar{border-top:3px solid var(--fg);padding-top:18px}
.pillar .shape{width:clamp(70px,8vw,120px);aspect-ratio:1;margin-bottom:20px}
.pillar h3{margin:0 0 10px;font-weight:850;font-stretch:118%;font-size:clamp(24px,2.3vw,36px);line-height:1}
.pillar p{margin:0;color:var(--dim);max-width:32ch}
.lineup{margin:clamp(80px,10vw,150px) var(--g) 0;background:var(--bone);color:#000;padding:clamp(30px,5vw,70px) clamp(20px,4vw,60px);text-align:center;border:4px solid #000;box-shadow:12px 12px 0 var(--red)}
.lineup .pre{font-weight:800;font-stretch:120%;font-size:clamp(14px,1.3vw,19px);margin:0 0 12px}
.lineup .head{margin:0;font-weight:900;font-stretch:150%;font-size:clamp(34px,7vw,124px);line-height:.88;letter-spacing:-.03em}
.lineup .sup{margin:.3em 0 0;font-weight:900;font-stretch:75%;font-size:clamp(26px,4.4vw,78px);line-height:.95}
.lineup .sup span{white-space:nowrap}
.lineup .sup span+span::before{content:"";display:inline-block;width:.42em;height:.42em;margin:0 .35em .12em;background:var(--red);border-radius:50%}
.lineup .ar{margin:.4em 0 0;font-size:clamp(30px,4vw,64px);line-height:1;color:var(--red)}
.lineup .foot{margin:22px 0 0;font-weight:700;font-stretch:85%}
.cv{padding:clamp(80px,10vw,150px) var(--g) 0}
.cv-top{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;border-bottom:3px solid var(--fg);padding-bottom:16px}
.cv-top h2{margin:0;font-weight:900;font-stretch:150%;font-size:clamp(44px,8vw,140px);line-height:.85;letter-spacing:-.03em}
.cv-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,28px);padding:24px 0;border-bottom:1px solid #2b2b2b}
.cv-row>h3{grid-column:1/4;margin:0;font-weight:800;font-stretch:110%;font-size:18px}
.cv-row>.it{grid-column:4/-1}
.cv-item{margin-bottom:22px}
.cv-item:last-child{margin-bottom:0}
.cv-item .r{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cv-item h4{margin:0;font-size:clamp(19px,1.6vw,24px);font-weight:800;font-stretch:105%}
.cv-item .when,.cv-item .org{color:var(--dim);font-stretch:90%}
.cv-item .org{margin:2px 0 8px}
.cv-item ul{margin:0;padding-left:1.1em}
.cv-item li{margin-bottom:4px}

/* ---------------- lightbox ---------------- */
dialog.lb{padding:0;border:0;background:transparent;max-width:96vw;max-height:96vh;overflow:visible}
dialog.lb::backdrop{background:rgba(0,0,0,.92)}
dialog.lb img{max-width:94vw;max-height:86vh;margin:auto;border:3px solid var(--bone)}
dialog.lb button{display:block;margin:14px auto 0;background:var(--yellow);border:3px solid #000;font:800 15px var(--any);padding:10px 18px;cursor:pointer}

/* ---------------- cursor ---------------- */
.cur{position:fixed;left:0;top:0;z-index:130;pointer-events:none;width:22px;height:22px;margin:-11px 0 0 -11px;mix-blend-mode:difference;display:none}
.cur i{position:absolute;inset:0;background:#fff;transition:clip-path .35s var(--ease),transform .35s var(--ease),border-radius .35s var(--ease)}
.cur[data-s=circle] i{border-radius:50%;clip-path:inset(0)}
.cur[data-s=square] i{border-radius:0;transform:scale(1.6) rotate(45deg);clip-path:inset(0)}
.cur[data-s=tri] i{border-radius:0;transform:scale(2.4);clip-path:polygon(50% 8%,94% 88%,6% 88%)}
@media (hover:hover) and (pointer:fine){.cur{display:block} body.has-cur,body.has-cur a,body.has-cur button{cursor:none}}

/* ---------------- view transitions ---------------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .5s var(--ease) both}
::view-transition-new(root){animation:vt-in .7s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:scale(.96)}}
@keyframes vt-in{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .p-body .lede,.p-body .prose,.p-body aside{grid-column:1/-1;grid-row:auto}
  .p-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chap-h h2,.chap-h [lang=ar]{grid-column:1/-1;justify-self:start}
  .grid figure{grid-column:span var(--m,12)}
  .pillars{grid-template-columns:1fr}
  .cv-row>h3,.cv-row>.it{grid-column:1/-1}
  .hd .clock{display:none}
  .hd{grid-template-columns:1fr auto}
}
@media (max-width:640px){
  .works a{grid-template-columns:1fr;gap:6px}
  .works .meta{justify-items:start;text-align:left;grid-auto-flow:column;align-items:baseline;gap:12px}
  .works .thumb{display:block;margin-top:10px;border:3px solid var(--bone)}
  .hero-top{flex-direction:column}
  .hero-top .tag{text-align:left}
  .index-head{flex-direction:column;align-items:start}
  .index-head p{text-align:left}
  .hd nav{gap:14px;font-size:14px}
  .hero .sun{width:120vw;right:-50vw;top:12vh}
  .name-ar{bottom:110px}
  .lineup .sup span{white-space:normal}
  .name{font-size:27vw;align-self:end;margin-bottom:28vh}
  .p-title{font-size:12.5vw;font-stretch:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .grain{animation:none}
  .intro{display:none}
}

/* =========================================================
   v3 — the record
   ========================================================= */
@font-face{font-family:"VT323";font-display:swap;src:url(../fonts/vt323-latin-400-normal.woff2) format("woff2")}

/* ---- VHS power-on ---- */
.vhs-intro{position:fixed;inset:0;z-index:150;background:#1d1fb0;color:#fff;font-family:"VT323",monospace;pointer-events:none;overflow:hidden}
.vhs-intro .noise{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px),url(../img/grain.png)}
.vhs-intro::after{content:"";position:absolute;left:0;right:0;height:14vh;top:-20vh;background:linear-gradient(transparent,rgba(255,255,255,.35) 45%,rgba(255,255,255,.08) 55%,transparent);animation:roll 1.1s linear infinite}
@keyframes roll{to{transform:translateY(140vh)}}
.vhs-intro .osd{position:absolute;font-size:clamp(34px,4.4vw,64px);line-height:1;text-shadow:3px 3px 0 rgba(0,0,0,.55);letter-spacing:.04em}
.vhs-intro .play{left:6vw;top:7vh}
.vhs-intro .play i{font-style:normal;display:inline-block;animation:blink .6s steps(1) infinite}
.vhs-intro .ch{right:6vw;top:7vh}
.vhs-intro .sp{left:6vw;bottom:8vh}
.vhs-intro .tc{right:6vw;bottom:8vh;font-variant-numeric:tabular-nums}
@keyframes blink{50%{opacity:0}}
html.no-intro .vhs-intro{display:none}

/* ---- record hero ---- */
.record{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:center;
  padding:calc(64px + 3vh) var(--g) clamp(28px,4vw,56px)}
.sleeve-wrap{position:relative;perspective:1400px;justify-self:start;width:min(80vh,100%);aspect-ratio:1}
.sleeve{position:absolute;inset:0;z-index:2;overflow:hidden;background:#000;transform-style:preserve-3d;will-change:transform;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06)}
.sleeve .vhs{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.25) contrast(1.06)}
.sleeve .scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);mix-blend-mode:multiply;pointer-events:none}
.sleeve .tracking{position:absolute;left:0;right:0;height:9%;top:-12%;background:linear-gradient(transparent,rgba(255,255,255,.22),transparent);mix-blend-mode:screen;animation:track 7s linear infinite}
@keyframes track{0%,70%{transform:translateY(0)}100%{transform:translateY(1400%)}}
.sleeve .band{position:absolute;right:4.5%;top:3.5%;margin:0;font-family:var(--blaka);color:#fff;font-size:clamp(30px,4vw,6.6vh);line-height:1;text-align:right;z-index:2;
  text-shadow:.035em .03em 0 var(--red),-.012em -.01em 0 rgba(0,240,255,.6)}
.sleeve-foot{position:absolute;left:5%;bottom:5%;right:42%;display:grid;gap:12px}
.sleeve .album{margin:0;color:#fff;font-weight:900;font-stretch:150%;font-size:clamp(18px,2.3vw,3.6vh);line-height:.92;letter-spacing:-.01em;text-transform:uppercase}
.advisory{justify-self:start;display:grid;border:3px solid #fff;background:#000;color:#fff;text-transform:uppercase;text-align:center;line-height:1}
.advisory b{font-weight:900;font-stretch:110%;font-size:clamp(9px,.9vw,13px);padding:5px 8px 4px;background:#fff;color:#000;letter-spacing:.04em}
.advisory span{font-weight:900;font-stretch:62%;font-size:clamp(18px,2.1vw,30px);padding:4px 8px 5px}
.sleeve .sheen{position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.13) 48%,rgba(255,255,255,.02) 52%,transparent 60%);
  transform:translate(var(--sx,-20%),0);pointer-events:none;mix-blend-mode:screen}
.disc{position:absolute;z-index:1;top:3%;bottom:3%;right:-2%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#111 0 13%,var(--red) 13.4% 27%,#0d0d0d 27.4% 28%,#151515 28% 100%);
  box-shadow:inset 0 0 0 1px #222;transition:transform 1.2s var(--ease)}
.disc::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle,rgba(255,255,255,.035) 0 1px,transparent 1px 4px)}
.disc span{position:absolute;inset:47%;border-radius:50%;background:var(--bg)}
.sleeve-wrap:hover .disc,.record.out .disc{transform:translateX(34%) rotate(40deg)}

.listing{align-self:center;max-width:620px}
.listing .ln{display:block}
.listing .kicker{margin:0 0 14px;font-weight:700;font-stretch:85%;color:var(--yellow);overflow:hidden}
.artist{margin:0;font-weight:900;font-stretch:150%;font-size:clamp(46px,6.4vw,118px);line-height:.86;letter-spacing:-.035em;overflow:hidden}
.listing .title{margin:14px 0 0;font-weight:300;font-stretch:62%;font-size:clamp(28px,3.4vw,58px);line-height:1;overflow:hidden}
.credits{margin:clamp(26px,3.4vw,44px) 0;padding:0;border-top:1px solid #333}
.credits div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:10px 0;border-bottom:1px solid #333}
.credits dt{color:var(--dim);font-weight:600;font-stretch:85%}
.credits dd{margin:0;font-weight:600}
.btn.play i{font-style:normal;font-size:.8em}

/* ---- tracklist ---- */
.tracklist .side{display:flex;align-items:baseline;gap:14px;margin:0;padding:clamp(26px,3vw,40px) var(--g) 10px;font-weight:600;font-stretch:90%;color:var(--dim);font-size:16px;border-bottom:1px solid #2b2b2b}
.tracklist .side span{color:var(--yellow);font-weight:900;font-stretch:120%;font-size:clamp(20px,1.8vw,28px)}
.works a{grid-template-columns:clamp(46px,5vw,90px) 1fr auto}
.works .no{font-family:"VT323",monospace;font-size:clamp(22px,2vw,32px);color:var(--dim);transition:color .3s}
@media (hover:hover){.works a:hover .no{color:var(--on,#000)}}
.small-print{display:flex;gap:clamp(18px,3vw,40px);align-items:center;padding:clamp(30px,4vw,56px) var(--g) 0;color:var(--dim);font-size:13px;font-stretch:85%;font-weight:600}
.small-print p{margin:0;max-width:52ch}
.barcode{width:clamp(130px,14vw,190px);height:56px;fill:var(--bone);background:var(--bone);padding:0;outline:8px solid var(--bone);fill:#000;flex:none}

/* ---- the dancer ---- */
.dancer{position:fixed;left:0;top:0;z-index:125;width:clamp(70px,6.5vw,96px);pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.4);will-change:transform}
.dancer img{width:100%;filter:drop-shadow(6px 6px 0 rgba(0,0,0,.35));animation:boogie .64s steps(1) infinite;transform-origin:50% 90%}
.dancer.on{opacity:1}
@keyframes boogie{
  0%{transform:scaleX(1) rotate(-7deg) translateY(0)}
  25%{transform:scaleX(1) rotate(6deg) translateY(-9%)}
  50%{transform:scaleX(-1) rotate(-7deg) translateY(0)}
  75%{transform:scaleX(-1) rotate(6deg) translateY(-9%)}
}

body.dancing .cur{opacity:0}
@media (hover:none){.dancer{left:auto;top:auto;right:16px;bottom:16px;transform:none}}

/* ---- off the record (about) ---- */
.offrecord{padding:clamp(80px,10vw,150px) var(--g) 0}
.offrecord .chap-h [lang=ar]{color:var(--yellow)}
.contact-sheet{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);align-items:start}
.ph{margin:0;background:var(--bone);padding:10px 10px 0;color:#000;box-shadow:8px 8px 0 #000,8px 8px 0 1px #333}
.ph img{width:100%;aspect-ratio:4/5;object-fit:cover;cursor:default}
.ph figcaption{padding:10px 2px 12px;font-weight:700;font-stretch:85%;font-size:14px}
.ph.r1{grid-column:1/span 3;transform:rotate(-2deg)}
.ph.r2{grid-column:4/span 3;transform:rotate(1.5deg);margin-top:40px}
.ph.r3{grid-column:7/span 3;transform:rotate(-1deg)}
.ph.r4{grid-column:10/span 3;transform:rotate(2.2deg);margin-top:60px}
.ph.r5{grid-column:3/span 3;transform:rotate(1.2deg);margin-top:-20px}
.ph.r6{grid-column:7/span 3;transform:rotate(-2.4deg);margin-top:10px}
.ph{transition:transform .5s var(--ease)}
@media (hover:hover){.ph:hover{transform:rotate(0) scale(1.04);z-index:2}}

/* ---- 404 ---- */
.lost-hero{min-height:100svh;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(24px,5vw,80px);padding:calc(70px + 4vh) var(--g) var(--g)}
.lost-hero .ghillie{height:min(78vh,820px);width:auto;transform:rotate(-4deg)}
.lost-hero .artist{font-size:clamp(90px,16vw,300px)}

@media (max-width:900px){
  .record{grid-template-columns:1fr;align-items:start}
  .sleeve-wrap{width:100%}
  .disc{display:none}
  .contact-sheet .ph{grid-column:span 6!important;margin-top:0!important}
  .lost-hero{grid-template-columns:1fr}
  .lost-hero .ghillie{height:52vh}
}
@media (max-width:640px){
  .works a{grid-template-columns:44px 1fr}
  .works .meta,.works .thumb{grid-column:2}
  .sleeve .band{font-size:8.5vw}
  .sleeve .album{font-size:5vw}
  .credits div{grid-template-columns:96px 1fr}
}
@media (prefers-reduced-motion:reduce){.vhs-intro{display:none}.dancer img{animation:none}}


/* the still plays like tape: tiny camera shake and lamp flicker */
.sleeve .vhs{animation:shake 1.1s steps(1) infinite}
@keyframes shake{
  0%{transform:translate(0,0) scale(1.02)}
  12%{transform:translate(-.4%,.2%) scale(1.024)}
  25%{transform:translate(.3%,-.2%) scale(1.02)}
  37%{transform:translate(.1%,.4%) scale(1.026)}
  50%{transform:translate(-.3%,-.1%) scale(1.022)}
  62%{transform:translate(.4%,.1%) scale(1.025)}
  75%{transform:translate(-.1%,-.3%) scale(1.021)}
  87%{transform:translate(.2%,.3%) scale(1.024)}
}
.sleeve::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:#fff;mix-blend-mode:overlay;animation:flicker 3.3s steps(1) infinite;opacity:0}
@keyframes flicker{0%,100%{opacity:0}31%{opacity:.08}33%{opacity:0}61%{opacity:.05}62%{opacity:0}88%{opacity:.1}89%{opacity:0}}
@media (prefers-reduced-motion:reduce){.sleeve .vhs,.sleeve::after{animation:none}}