/* WALID HEEBA — "Screening Room" */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/assets/fonts/archivo-latin-wdth.woff2) format("woff2-variations"),url(/assets/fonts/archivo-latin-wdth.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:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/assets/fonts/archivo-latin-ext-wdth.woff2) format("woff2-variations"),url(/assets/fonts/archivo-latin-ext-wdth.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Arabic";font-weight:300;font-display:swap;src:url(/assets/fonts/plex-arabic-300.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex Arabic";font-weight:400;font-display:swap;src:url(/assets/fonts/plex-arabic-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex Arabic";font-weight:500;font-display:swap;src:url(/assets/fonts/plex-arabic-500.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

:root{
  --ink:#101114; --surface:#1C1E23; --surface-2:#24272d; --line:rgba(236,232,225,.10); --line-2:rgba(236,232,225,.18);
  --text:#ECE8E1; --muted:#8E8B85; --brass:#D5B68A; --brass-dim:rgba(213,182,138,.55);
  --font:"Archivo","Plex Arabic",ui-sans-serif,system-ui,"Segoe UI",Tahoma,sans-serif;
  --gutter:clamp(16px,3.2vw,40px); --max:1600px;
  --sec:clamp(96px,11vw,160px);
  --ease:cubic-bezier(.2,.7,0,1);
  --lamp:.86;
  --hdr:64px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px);background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.6;font-weight:400;font-stretch:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
:lang(ar) body,body:lang(ar){font-size:18px;line-height:1.8}
img,video,svg{display:block;max-width:100%}
picture{display:contents}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0;padding:0}
ol,ul{list-style:none}
.num{font-variant-numeric:tabular-nums lining-nums;font-family:"Archivo",ui-sans-serif,sans-serif}
.muted{color:var(--muted)}
.lat{white-space:nowrap}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}
::selection{background:var(--brass);color:var(--ink)}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:fixed;inset-inline-start:12px;top:-60px;z-index:100;background:var(--brass);color:var(--ink);padding:10px 14px;border-radius:2px;transition:top .2s}
.skip:focus{top:12px}

/* metadata voice */
.sec-label,.credits-meta,.card-meta,.hero-index,.nav,.filters button,.proj-credits dt,.next-label,.player figcaption,.back,.tag-ai,.review-bar,.ftr,.group-h,.about-list dt,.proj-idx{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;line-height:1.5}
:lang(ar) :is(.sec-label,.credits-meta,.card-meta,.hero-index,.nav,.filters button,.proj-credits dt,.next-label,.player figcaption,.back,.tag-ai,.review-bar,.ftr,.group-h,.about-list dt){font-size:13px;letter-spacing:0;text-transform:none}

/* review bar */
.review-bar{position:relative;background:rgba(213,182,138,.94);color:var(--ink);text-align:center;padding:6px 12px;font-weight:600}

/* header */
.hdr{position:fixed;inset-block-start:0;inset-inline:0;z-index:50;height:var(--hdr);display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:var(--gutter);background:linear-gradient(to bottom,rgba(16,17,20,.72),rgba(16,17,20,0));transition:background .4s var(--ease)}
.hdr.solid{background:rgba(16,17,20,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:baseline;gap:12px;white-space:nowrap}
.brand-main{font-weight:600;font-stretch:78%;letter-spacing:.18em;font-size:14px}
:lang(ar) .brand-main{letter-spacing:0;font-size:17px;font-weight:500}
.brand-alt{color:var(--muted);font-size:13px}
.brand-alt:lang(en){letter-spacing:.14em;font-size:10px;font-stretch:78%}
.nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px)}
.nav a{color:var(--muted);transition:color .2s;padding-block:8px}
.nav a:hover,.nav a[aria-current]{color:var(--text)}
.nav .lang{color:var(--brass);border:1px solid var(--line-2);padding:6px 12px;border-radius:999px;letter-spacing:0;text-transform:none;font-size:13px}
.nav .lang:lang(ar){font-family:"Plex Arabic",var(--font)}
.nav .lang:hover{border-color:var(--brass)}
@media (max-width:720px){
  .nav a:not(.lang):not([href$="#work"]){display:none}
  .brand-alt{display:none}
}

/* frames & lamp */
.frame{position:relative;overflow:hidden;background:var(--surface);isolation:isolate}
.frame img{width:100%;height:100%;object-fit:cover;filter:brightness(var(--lamp));transition:filter .3s var(--ease),transform 1.2s var(--ease)}
a:hover .frame img,a:focus-visible .frame img{filter:brightness(1)}
.scrub{position:absolute;inset:0;background-repeat:no-repeat;background-size:auto 100%;opacity:0;transition:opacity .12s;pointer-events:none}
.frame.scrubbing .scrub{opacity:1}
.tag-ai{position:absolute;inset-block-start:12px;inset-inline-end:12px;background:rgba(16,17,20,.72);color:var(--text);padding:3px 8px;border-radius:2px;font-size:10px;backdrop-filter:blur(6px)}

/* hero — the title card lives inside the frame; tagline + shot index sit below it */
.hero{position:relative;padding-block-start:var(--hdr)}
.hero-frame{position:relative;width:100%;aspect-ratio:2.39/1;max-height:calc(100svh - var(--hdr) - 132px);min-height:420px;overflow:hidden;background:#000}
.hero-frame :is(.hero-poster,.hero-reel){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-reel{opacity:0;transition:opacity .6s var(--ease)}
.hero-reel.playing{opacity:1}
.hero-still{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease)}
.hero-still.on{opacity:1}
.hero-still img{width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform 5.7s linear}
.hero-still.on img{transform:scale(1.03)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(16,17,20,.92) 0%,rgba(16,17,20,.35) 30%,rgba(16,17,20,0) 50%);pointer-events:none}
.hero-title{position:absolute;inset-inline:0;inset-block-end:0;padding-block-end:clamp(20px,3vw,40px);z-index:2}
.hero-name{font-weight:350;font-stretch:78%;font-size:clamp(3rem,8vw,9.5rem);line-height:.92;letter-spacing:-.02em}
:lang(ar) .hero-name{font-family:"Plex Arabic",var(--font);font-weight:400;font-size:clamp(3.2rem,8.6vw,10rem);line-height:1.15;letter-spacing:0}
.hero-alt{margin-block-start:10px}
.hero-alt:lang(ar){font-family:"Plex Arabic",var(--font);font-weight:300;font-size:clamp(1.5rem,2.4vw,2.25rem);line-height:1.3;color:rgba(236,232,225,.7)}
.hero-alt:lang(en){letter-spacing:.2em;font-size:11px;font-stretch:78%;font-weight:500;color:var(--brass)}
.hero-meta{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:start;padding-block:22px 0}
.hero-tag{grid-column:1 / span 6;color:var(--text);opacity:.88;font-size:clamp(16px,1.4vw,19px);max-width:34em}
.hero-index{grid-column:7 / span 6;display:grid;grid-template-columns:repeat(3,auto);justify-content:end;gap:4px 28px}
.hero-index a{display:flex;gap:10px;color:var(--muted);padding-block:3px;transition:color .2s}
.hero-index li.on a,.hero-index a:hover{color:var(--text)}
.hero-index li.on .num{color:var(--brass)}
@media (max-width:900px){
  .hero-frame{aspect-ratio:4/5;max-height:76svh;min-height:0}
  .hero-still img{object-position:var(--fp,50% 50%)}
  .hero-meta{grid-template-columns:1fr;row-gap:16px;padding-block-start:16px}
  .hero-tag,.hero-index{grid-column:1}
  .hero-index{grid-template-columns:1fr 1fr;justify-content:stretch;column-gap:16px;border-block-start:1px solid var(--line);padding-block-start:12px}
}

/* letterbox intro */
.intro .hero-frame::before,.intro .hero-frame::after{content:"";position:absolute;inset-inline:0;height:50.5%;background:#000;z-index:3;animation:bars .9s var(--ease) .15s forwards}
.intro .hero-frame::before{top:0}
.intro .hero-frame::after{bottom:0}
.intro .hero-frame > :not(.hero-shade){animation:lampup 1.1s var(--ease) .2s both}
@keyframes bars{to{height:0}}
@keyframes lampup{from{filter:brightness(0)}to{filter:brightness(1)}}

/* sections */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;border-block-start:1px solid var(--line);padding-block:20px 48px}
.sec-head h2{font-weight:400;font-stretch:78%;font-size:clamp(1.6rem,2.6vw,2.4rem);letter-spacing:-.01em;line-height:1.1}
:lang(ar) .sec-head h2{font-family:"Plex Arabic",var(--font);letter-spacing:0;font-size:clamp(1.8rem,3vw,2.7rem)}
.sec-count{color:var(--brass);font-size:13px;letter-spacing:.14em}
.work{padding-block-start:var(--sec)}
@media (max-width:900px){.work{padding-block-start:56px}}
.index,.about,.contact{margin-block-start:var(--sec)}

/* featured */
.feat{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;margin-block-end:clamp(72px,9vw,128px)}
.feat-link{grid-column:1 / -1;display:block}
.feat-frame{aspect-ratio:16/9}
.credits{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;padding-block-start:20px;border-block-start:1px solid transparent}
.idx{grid-column:span 1;color:var(--brass);font-size:13px;letter-spacing:.1em;padding-block-start:8px}
.credits-title{grid-column:span 7}
.credits-title h3{display:inline;font-weight:400;font-stretch:84%;font-size:clamp(1.6rem,3vw,3.2rem);line-height:1.05;letter-spacing:-.01em;background:linear-gradient(var(--brass),var(--brass)) no-repeat 0 100%/0 1px;transition:background-size .24s var(--ease);padding-block-end:4px}
[dir=rtl] .credits-title h3{background-position:100% 100%}
:lang(ar) .credits-title h3{font-family:"Plex Arabic",var(--font);font-size:clamp(1.7rem,3.2vw,3.4rem);line-height:1.35;letter-spacing:0}
.feat-link:hover .credits-title h3,.feat-link:focus-visible .credits-title h3{background-size:100% 1px}
.credits-title p{color:var(--muted);margin-block-start:10px;max-width:36em}
.credits-meta{grid-column:span 4;display:grid;gap:4px;color:var(--muted);padding-block-start:10px}
.credits-meta .role{color:var(--text)}
:lang(ar) .credits-meta{line-height:1.7}
:lang(ar) .credits-meta .role{font-size:14px;font-weight:500}
:lang(ar) :is(.credits-meta,.card-meta) > span:not(.role){font-weight:400}
@media (max-width:900px){
  .feat-link{grid-column:1 / -1}
  .feat-frame{aspect-ratio:4/3}
  .feat-frame img{object-position:var(--fp,50% 50%)}
  .credits{grid-template-columns:auto 1fr;column-gap:16px;row-gap:8px}
  .idx{grid-column:1;grid-row:1 / span 2;padding-block-start:6px}
  .credits-title,.credits-meta{grid-column:2}
  .credits-meta{padding-block-start:0}
}

/* index / archive */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-block-end:40px}
.filters button{border:1px solid var(--line-2);border-radius:999px;padding:8px 14px;color:var(--muted);transition:color .2s,border-color .2s,background .2s}
.filters button:hover{color:var(--text);border-color:var(--muted)}
.filters button[aria-pressed=true]{color:var(--brass);border-color:var(--brass)}
.group-h{color:var(--muted);margin-block:8px 16px}
.grid-h{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,40px) 24px;margin-block-end:64px}
.grid-v{display:grid;grid-template-columns:repeat(6,1fr);gap:24px 16px}
.card a{display:block}
.card-frame{aspect-ratio:16/9}
.card.is-v .card-frame{aspect-ratio:9/16}
.card h3{font-weight:400;font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.3;margin-block-start:14px;font-stretch:90%}
:lang(ar) .card h3{font-family:"Plex Arabic",var(--font);font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.5}
.card.is-v h3{font-size:clamp(.95rem,1.1vw,1.05rem)}
.card h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.card-meta{color:var(--muted);margin-block-start:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:lang(ar) .card-meta{font-weight:400}
.card[hidden]{display:none}
.empty{color:var(--muted)}
@media (max-width:1100px){.grid-v{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){
  .grid-h{grid-template-columns:1fr}
  .grid-v{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);padding-block-end:12px;scrollbar-width:none}
  .grid-v::-webkit-scrollbar{display:none}
  .grid-v .card{flex:0 0 44vw;scroll-snap-align:start}
}

/* about & contact */
.about{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;border-block-start:1px solid var(--line);padding-block-start:20px}
.about-label{grid-column:1 / -1;color:var(--muted);margin-block-end:clamp(32px,4vw,56px)}
.about-head{grid-column:1 / span 5;align-self:start}
.about-name{font-weight:350;font-stretch:78%;font-size:clamp(2.6rem,5.6vw,6rem);line-height:.95;letter-spacing:-.02em}
:lang(ar) .about-name{font-family:"Plex Arabic",var(--font);font-weight:400;font-size:clamp(2.6rem,5.4vw,5.6rem);line-height:1.25;letter-spacing:0}
.about-sub{margin-block-start:18px;color:var(--brass);font-size:clamp(1.05rem,1.35vw,1.25rem);line-height:1.45;max-width:22em}
:lang(ar) .about-sub{font-family:"Plex Arabic",var(--font);font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.7}
.about-body{grid-column:7 / span 6}
.about-body p{color:rgba(236,232,225,.74);max-width:40em;line-height:1.75}
:lang(ar) .about-body p{line-height:1.95}
.about-body p+p{margin-block-start:1.05em}
.about-body .lead{color:var(--text);font-weight:350;font-stretch:90%;font-size:clamp(1.25rem,1.8vw,1.6rem);line-height:1.45;margin-block-end:1.3em}
:lang(ar) .about-body .lead{font-family:"Plex Arabic",var(--font);font-weight:400;line-height:1.75}

/* skill cards */
.skill-grid{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-block-start:clamp(56px,7vw,96px)}
.skill-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:26px 24px 28px;background:linear-gradient(180deg,var(--surface),rgba(28,30,35,.35));border:1px solid var(--line);border-radius:2px;transition:border-color .3s var(--ease),background .3s var(--ease)}
.js .skill-card.reveal{transition:opacity .7s var(--ease) var(--d,0ms),transform .7s var(--ease) var(--d,0ms),border-color .3s var(--ease),background .3s var(--ease)}
.skill-card::before{content:"";position:absolute;inset-block-start:-1px;inset-inline:-1px;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
[dir=rtl] .skill-card::before{transform-origin:right}
.skill-card:hover{border-color:rgba(213,182,138,.32);background:linear-gradient(180deg,var(--surface-2),rgba(28,30,35,.45))}
.skill-card:hover::before{transform:scaleX(1)}
.skill-head{display:flex;align-items:center;justify-content:space-between}
.skill-idx{color:var(--brass);font-size:12px;letter-spacing:.14em}
.skill-icon{width:22px;height:22px;fill:none;stroke:var(--muted);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.skill-card:hover .skill-icon{stroke:var(--brass)}
.skill-title{margin-block:30px 16px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.5;color:var(--text)}
:lang(ar) .skill-title{font-size:16px;font-weight:500;letter-spacing:0;text-transform:none;line-height:1.6}
.skill-list li{padding-block:11px;border-block-start:1px solid var(--line);font-size:15px;line-height:1.45;color:rgba(236,232,225,.86);overflow-wrap:anywhere}
:lang(ar) .skill-list li{font-size:16px;line-height:1.65}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding-block-start:4px}
.chips li{font-family:"Archivo",var(--font);font-size:13px;line-height:1.3;font-weight:450;padding:7px 12px;border:1px solid var(--line-2);border-radius:999px;color:var(--text);white-space:nowrap;transition:border-color .25s,color .25s}
.chips li:hover{border-color:var(--brass);color:var(--brass)}
@media (max-width:1180px){.skill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .about{grid-template-columns:1fr}
  .about-label,.about-head,.about-body,.skill-grid{grid-column:1}
  .about-body{margin-block-start:28px}
}
@media (max-width:600px){.skill-grid{grid-template-columns:1fr;gap:12px}.skill-card{padding:22px 20px 24px}.skill-title{margin-block-start:22px}}
.contact{border-block-start:1px solid var(--line);padding-block:20px var(--sec)}
.contact .sec-label{color:var(--muted)}
.contact-line{font-weight:350;font-stretch:84%;font-size:clamp(2rem,5vw,4.6rem);line-height:1.05;letter-spacing:-.015em;margin-block:24px 32px;max-width:16em}
:lang(ar) .contact-line{font-family:"Plex Arabic",var(--font);font-weight:400;line-height:1.4;letter-spacing:0}
.contact-list{display:flex;flex-wrap:wrap;gap:12px 32px;font-size:clamp(1.1rem,1.6vw,1.4rem)}
.contact-list a{border-block-end:1px solid var(--brass-dim);padding-block-end:2px}
.contact-list a:hover{border-color:var(--brass);color:var(--brass)}
.pending{color:var(--brass);border:1px dashed var(--brass-dim);padding:14px 16px;max-width:40em}
@media (max-width:900px){
}

/* footer */
.ftr{border-block-start:1px solid var(--line);color:var(--muted);padding-block:24px 56px}
.ftr-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}

/* project */
.proj-hero{position:relative;min-height:min(86svh,980px);display:flex;align-items:flex-end}
.proj-cover{position:absolute;inset:0;overflow:hidden;background:#000}
.proj-cover img{width:100%;height:100%;object-fit:cover}
.proj-hero.is-v .proj-cover{background:radial-gradient(120% 90% at 78% 40%,#24272d 0%,var(--ink) 62%)}
.proj-hero.is-v .proj-cover img{object-fit:contain;object-position:88% 58%!important;padding-block:calc(var(--hdr) + 12px) 0;padding-inline:var(--gutter)}
[dir=rtl] .proj-hero.is-v .proj-cover{background:radial-gradient(120% 90% at 22% 40%,#24272d 0%,var(--ink) 62%)}
[dir=rtl] .proj-hero.is-v .proj-cover img{object-position:12% 58%!important}
.proj-hero.is-v .proj-head > *{max-width:min(52%,11em)}
.proj-hero.is-v .proj-head .back{max-width:none}
@media (max-width:900px){.proj-hero.is-v{min-height:auto;display:block}.proj-hero.is-v .proj-cover{position:relative;height:72svh}.proj-hero.is-v .proj-cover img{object-position:50% 100%!important;padding-inline:15%}.proj-hero.is-v .proj-head > *{max-width:none}.proj-hero.is-v .proj-head{padding-block-start:24px}}
.proj-head{position:relative;padding-block:calc(var(--hdr) + 24px) clamp(32px,5vw,64px)}
.back{display:inline-flex;align-items:center;gap:10px;color:var(--muted);margin-block-end:28px;transition:color .2s}
.back:hover{color:var(--text)}
.back .i{width:18px;height:18px;transform:scaleX(-1)}
[dir=rtl] .back .i{transform:none}
.proj-idx{color:var(--brass);margin-block-end:12px}
.proj-head h1{font-weight:350;font-stretch:80%;font-size:clamp(2.4rem,6.4vw,7rem);line-height:.98;letter-spacing:-.02em;max-width:14em}
:lang(ar) .proj-head h1{font-family:"Plex Arabic",var(--font);font-weight:400;line-height:1.3;letter-spacing:0}
.proj-intro{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;padding-block:clamp(40px,6vw,88px)}
.proj-desc{grid-column:1 / span 7;font-weight:350;font-stretch:90%;font-size:clamp(1.25rem,2vw,1.8rem);line-height:1.4}
:lang(ar) .proj-desc{font-family:"Plex Arabic",var(--font);font-weight:400;line-height:1.75}
.proj-credits{grid-column:9 / span 4;display:grid;align-content:start}
.proj-credits div{display:grid;grid-template-columns:8.5em 1fr;gap:12px;padding-block:12px;border-block-start:1px solid var(--line)}
.proj-credits div:last-child{border-block-end:1px solid var(--line)}
.proj-credits dt{color:var(--muted);padding-block-start:3px}
:lang(ar) .proj-credits dt{padding-block-start:2px}
.proj-credits dd{font-size:15px}
@media (max-width:900px){
  .proj-hero{min-height:72svh}
  .proj-intro{grid-template-columns:1fr;row-gap:32px}
  .proj-desc,.proj-credits{grid-column:1}
  .proj-credits div{grid-template-columns:7.5em 1fr}
}

/* players */
.players{display:grid;gap:40px;padding-block-end:clamp(48px,7vw,104px)}
.players-h{display:grid;gap:40px}
.players-v{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),340px));gap:24px;justify-content:center}
.player{position:relative;margin:0}
.player-stage{position:relative;width:100%;height:100%;background:#000;overflow:hidden}
.player-stage img,.player-stage video{width:100%;height:100%;object-fit:cover}
.player-stage video{object-fit:contain;background:#000}
.player figcaption{position:absolute;inset-block-start:100%;inset-inline:0;display:flex;justify-content:space-between;color:var(--muted);padding-block-start:10px}
.player.is-v figcaption{position:static}
.players-h .player{margin-block-end:22px}
.play{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;color:var(--text);background:radial-gradient(circle at center,rgba(16,17,20,.25),rgba(16,17,20,0) 60%)}
.play .i{width:76px;height:76px;padding:22px;border:1px solid rgba(236,232,225,.55);border-radius:50%;background:rgba(16,17,20,.35);backdrop-filter:blur(6px);transition:transform .3s var(--ease),border-color .3s,background .3s}
.play-t{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
:lang(ar) .play-t{font-size:13px;letter-spacing:0}
.play:hover .i,.play:focus-visible .i{transform:scale(1.06);border-color:var(--brass);background:rgba(16,17,20,.55)}
.player-stage img{filter:brightness(.8);transition:filter .3s}
.play:hover~img,.player-stage:hover img{filter:brightness(.92)}
.player-err{color:var(--brass);padding-block-start:36px}
.player.is-loading .play .i{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}

/* galleries */
.g-block{padding-block-end:clamp(48px,7vw,104px)}
.g-block .sec-label{color:var(--muted);border-block-start:1px solid var(--line);padding-block:16px 24px}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.gallery.is-pages{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
.g-item a{display:block;aspect-ratio:var(--ar);overflow:hidden;background:var(--surface)}
.g-item img{width:100%;height:100%;object-fit:cover;filter:brightness(.92);transition:filter .3s,transform .9s var(--ease)}
.g-item a:hover img{filter:brightness(1);transform:scale(1.015)}
.gallery:not(.is-pages) .g-item.is-v{grid-row:span 2}
@media (max-width:720px){.gallery{grid-template-columns:1fr}.gallery.is-pages{grid-template-columns:1fr 1fr}}

/* next */
.next{position:relative;display:block;height:min(62svh,620px);overflow:hidden;margin-block-start:clamp(24px,4vw,48px)}
.next-frame{position:absolute;inset:0}
.next-frame img{width:100%;height:100%;object-fit:cover;filter:brightness(.6);transition:filter .5s var(--ease),transform 1.4s var(--ease)}
.next:hover .next-frame img,.next:focus-visible .next-frame img{filter:brightness(1);transform:scale(1.02)}
.next::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,17,20,.85),rgba(16,17,20,0) 55%)}
.next-meta{position:absolute;inset-block-end:0;inset-inline:0;z-index:1;display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 24px;padding-block-end:clamp(28px,4vw,48px)}
.next-label{color:var(--brass);width:100%}
.next-title{font-weight:350;font-stretch:80%;font-size:clamp(1.8rem,4.6vw,4.4rem);line-height:1.05;letter-spacing:-.015em}
:lang(ar) .next-title{font-family:"Plex Arabic",var(--font);font-weight:400;line-height:1.35;letter-spacing:0}
.next-meta .i{width:36px;height:36px;margin-block-end:.4em;transition:transform .3s var(--ease)}
[dir=rtl] .next-meta .i{transform:scaleX(-1)}
.next:hover .next-meta .i{transform:translateX(6px)}
[dir=rtl] .next:hover .next-meta .i{transform:scaleX(-1) translateX(6px)}

/* lightbox */
.lb{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(10,11,13,.97);color:var(--text)}
.lb::backdrop{background:rgba(0,0,0,.7)}
.lb[open]{display:grid;place-items:center}
.lb-fig{display:grid;gap:12px;justify-items:center;max-width:calc(100vw - 140px)}
.lb-img{max-width:100%;max-height:calc(100dvh - 120px);width:auto;height:auto;object-fit:contain}
.lb-cap{color:var(--muted);font-size:13px}
.lb-btn{position:fixed;width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:50%;background:rgba(16,17,20,.6)}
.lb-btn:hover{border-color:var(--brass)}
.lb-btn .i{width:22px;height:22px}
.lb-close{inset-block-start:18px;inset-inline-end:18px}
.lb-prev{inset-inline-start:18px;top:50%;translate:0 -50%}
.lb-next{inset-inline-end:18px;top:50%;translate:0 -50%}
[dir=rtl] :is(.lb-prev,.lb-next) .i{transform:scaleX(-1)}
.lb-count{position:fixed;inset-block-end:22px;inset-inline-start:24px;color:var(--muted);font-size:12px;letter-spacing:.14em}
@media (max-width:720px){.lb-fig{max-width:100vw}.lb-prev,.lb-next{top:auto;bottom:14px;translate:none}.lb-count{inset-inline-start:50%;translate:-50% 0}[dir=rtl] .lb-count{translate:50% 0}}

/* 404 */
.nf-in{min-height:100vh;display:grid;align-content:center;gap:16px}
.nf-code{font-size:clamp(4rem,12vw,10rem);font-stretch:78%;font-weight:300;color:var(--brass);line-height:1}
.nf a{color:var(--brass);border-block-end:1px solid}

/* reveal */
.js .reveal{opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* view transitions (cover morph) */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.7,0,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .js .reveal{opacity:1;transform:none}
  .hero-still img,.hero-still.on img{transform:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
@media (hover:none){.frame img{filter:brightness(.94)}}