:root{--bg:#f6f7f8;--fg:#0d0f12;--mut:#6c737b;--line:#dfe2e5;--soft:#eceef0;--acc:#3a4bff;--accfg:#fff;--art:#0d0f12;--ink:13,15,18;--accr:58,75,255;--r:2px;box-sizing:border-box}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0a0b0d;--fg:#f1f2f3;--mut:#8a9199;--line:#22262b;--soft:#14171a;--acc:#8c98ff;--accfg:#0a0b0d;--art:#e6e8ea;--ink:241,242,243;--accr:140,152,255}}
:root[data-theme="dark"]{--bg:#0a0b0d;--fg:#f1f2f3;--mut:#8a9199;--line:#22262b;--soft:#14171a;--acc:#8c98ff;--accfg:#0a0b0d;--art:#e6e8ea;--ink:241,242,243;--accr:140,152,255}
@view-transition{navigation:auto}
@media(prefers-reduced-motion:no-preference){::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}html{scroll-behavior:smooth}}
html{scroll-padding-top:80px;color-scheme:light dark}:root[data-theme="light"]{color-scheme:light}:root[data-theme="dark"]{color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:'IBM Plex Sans Arabic',Tahoma,sans-serif;font-weight:300;line-height:1.9;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;position:relative}
::selection{background:rgba(var(--accr),.28)}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}img{display:block}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.noscroll{overflow:hidden}
/* background system */
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 50% at 88% -5%,rgba(var(--accr),.13),transparent 70%),radial-gradient(55% 50% at -5% 105%,rgba(var(--accr),.09),transparent 70%)}
body::after{content:"";position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");mix-blend-mode:difference}
main,footer{position:relative;z-index:1}
#prog{position:fixed;top:0;inset-inline:0;height:2px;z-index:60;background:var(--acc);transform:scaleX(0);transform-origin:right;pointer-events:none}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--fg);color:var(--bg);padding:6px 16px;z-index:80;border-radius:var(--r)}.skip:focus{top:10px}
.w{max-width:1440px;margin:auto;padding:0 clamp(18px,3.6vw,64px)}
/* header */
header{position:fixed;top:0;inset-inline:0;z-index:40;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
header.on,.mopen header{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-color:var(--line)}
header .w{display:flex;align-items:center;justify-content:space-between;height:66px;gap:18px}
.logo{display:flex;align-items:baseline;gap:8px;white-space:nowrap}.logo b{font-weight:600;font-size:22px;letter-spacing:.04em}.logo span{font-weight:200;color:var(--mut);font-size:15px}
nav{display:flex;gap:clamp(18px,2.8vw,40px);font-size:14.5px}
nav a{position:relative;color:var(--mut);padding:4px 0;transition:color .2s}nav a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--fg);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
nav a:hover,nav a[aria-current]{color:var(--fg)}nav a:hover::after,nav a[aria-current]::after{transform:scaleX(1)}
.tools-r{display:flex;align-items:center;gap:6px}
.sc,.ic{height:38px;min-width:38px;display:inline-flex;align-items:center;justify-content:center;gap:5px;border-radius:40px;border:1px solid var(--line);background:none;cursor:pointer;font-size:15px;padding:0 12px;transition:border-color .2s,background .2s}
.sc b{font-weight:400;font-size:13px}.sc:hover,.ic:hover{border-color:var(--fg)}.ic{padding:0}
.menu{display:none;flex-direction:column;gap:5px}.menu i{display:block;width:16px;height:1.5px;background:var(--fg);transition:transform .3s}
.mopen .menu i:first-child{transform:translateY(3.2px) rotate(45deg)}.mopen .menu i:last-child{transform:translateY(-3.2px) rotate(-45deg)}
@media(max-width:860px){.menu{display:inline-flex}
 nav{position:fixed;inset:0;background:var(--bg);flex-direction:column;justify-content:center;gap:6px;padding:0 clamp(18px,6vw,48px);font-size:clamp(34px,9vw,56px);font-weight:200;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:-1}
 .mopen nav{opacity:1;visibility:visible}.mopen{overflow:hidden}nav a{color:var(--fg)}}
/* hero */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.1s ease,visibility 1.1s}.slide.on{opacity:1;visibility:visible}
.art{overflow:hidden;background:var(--soft)}.art svg,.art img{width:100%;height:100%;display:block}.art img{object-fit:cover}
.hero .art{position:absolute;inset:0;background:transparent}.hero .slide:not(.has-img) .art svg{opacity:.4}
.scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,color-mix(in srgb,var(--bg) 62%,transparent),transparent 55%)}
.has-img .scrim{background:linear-gradient(to top,rgba(5,6,8,.78),rgba(5,6,8,.15) 55%,rgba(5,6,8,.35))}
.has-img .cap,.has-img .cap *{color:#fff}.has-img .dots button{background:rgba(255,255,255,.35)}.has-img .dots .on::after{background:#fff}
@media(prefers-reduced-motion:no-preference){.slide.on .art img,.slide.on .art svg{animation:kb 16s ease-out both}@keyframes kb{from{transform:scale(1.08)}to{transform:scale(1)}}}
.hero .cap{position:absolute;inset-inline:0;bottom:0;padding-bottom:clamp(40px,8vh,90px)}
.ctr{display:block;font-size:14px;color:var(--mut);margin-bottom:14px;letter-spacing:.05em}
.hero h1{margin:0;font-weight:200;font-size:clamp(42px,9.5vw,160px);line-height:1.08;letter-spacing:-.03em;max-width:12em}
.hero .row{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;margin-top:26px;flex-wrap:wrap}
.hero .meta{font-size:15px;color:var(--mut);display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:0;max-width:34em}.hero .meta u{text-underline-offset:6px;color:var(--fg)}.has-img .meta u{color:#fff}
.dots{display:flex;gap:8px}.dots button{width:44px;height:3px;border:0;background:var(--line);padding:0;cursor:pointer;position:relative;overflow:hidden;border-radius:2px}
.dots .on::after{content:"";position:absolute;inset:0;background:var(--fg);transform-origin:right;animation:pg 7s linear both}@keyframes pg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.scroll{position:absolute;inset-inline-end:clamp(18px,3.6vw,64px);bottom:18px;font-size:12px;color:var(--mut);writing-mode:vertical-rl;letter-spacing:.12em;display:none}
@media(min-width:900px){.scroll{display:block;bottom:auto;top:50%;transform:translateY(-50%)}}
@media(prefers-reduced-motion:reduce){.dots .on::after{animation:none}}
/* sections */
.intro{display:grid;grid-template-columns:1.4fr 1fr;gap:40px 80px;padding:clamp(56px,9vw,120px) 0;border-bottom:1px solid var(--line);align-items:end}
.lead{font-size:clamp(24px,3.4vw,50px);line-height:1.55;font-weight:200;margin:0;letter-spacing:-.01em}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 14px}.stats b{display:block;font-size:clamp(34px,4.4vw,64px);font-weight:200;line-height:1.1}.stats span{color:var(--mut);font-size:13.5px}
@media(max-width:860px){.intro{grid-template-columns:1fr}}
.sec{padding:clamp(48px,7vw,100px) 0 0}.sech{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:30px;gap:12px}
h2{margin:0;font-size:clamp(26px,3.2vw,44px);font-weight:200;letter-spacing:-.01em}
.more{font-size:14px;color:var(--mut);border-bottom:1px solid var(--line);transition:.2s}.more:hover{color:var(--fg);border-color:var(--fg)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:44px 24px}
.mosaic{grid-template-columns:repeat(12,1fr)}.mosaic .pc{grid-column:span 12}
@media(min-width:860px){.mosaic .pc:nth-child(6n+1){grid-column:span 7}.mosaic .pc:nth-child(6n+2),.mosaic .pc:nth-child(6n+3){grid-column:span 5}.mosaic .pc:nth-child(6n+4){grid-column:span 7}.mosaic .pc:nth-child(6n+5),.mosaic .pc:nth-child(6n){grid-column:span 6}
 .mosaic .pc:nth-child(6n+2) .art,.mosaic .pc:nth-child(6n+3) .art{aspect-ratio:1/1}.mosaic .pc:nth-child(6n+5) .art,.mosaic .pc:nth-child(6n) .art{aspect-ratio:3/2}}
.pc{position:relative;display:block}.pc .art{aspect-ratio:4/3;border-radius:var(--r)}
.pc .art svg,.pc .art img{transition:transform 1.3s cubic-bezier(.2,.7,.2,1)}.pc:hover .art svg,.pc:hover .art img{transform:scale(1.05)}
.pm{padding-top:14px;display:flex;justify-content:space-between;gap:14px;align-items:baseline;flex-wrap:wrap}.pm h3{margin:0;font-weight:400;font-size:clamp(18px,1.9vw,24px);background:linear-gradient(currentColor,currentColor) right bottom/0 1px no-repeat;transition:background-size .4s}
.pc:hover .pm h3{background-size:100% 1px}.pm span{color:var(--mut);font-size:13.5px}
.list{display:block}.list .pc{display:grid;grid-template-columns:96px 1fr auto;gap:20px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}.list .pc .art{aspect-ratio:1}.list .pm{padding:0}.list .star{position:static}
.star{position:absolute;top:12px;inset-inline-start:12px;width:36px;height:36px;border-radius:50%;border:0;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(6px);cursor:pointer;font-size:16px;line-height:1;transition:transform .2s,background .2s}.star:hover{transform:scale(1.1)}.star.on{background:var(--fg);color:var(--bg)}
.rows{border-top:1px solid var(--line)}.row-l{display:flex;justify-content:space-between;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line);transition:padding .3s,color .2s}.row-l span{font-size:clamp(22px,3vw,40px);font-weight:200}.row-l em{font-style:normal;color:var(--mut);font-size:14px}.row-l:hover{padding-inline-start:16px;color:var(--acc)}
.srv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:10px 40px;padding:26px 0;border-bottom:1px solid var(--line);transition:padding .3s}.srv:hover{padding-inline-start:14px}.srv:hover h3{color:var(--acc)}
.srv h3{margin:0;font-size:clamp(20px,2.6vw,32px);font-weight:300;transition:color .2s}.srv p{margin:0;color:var(--mut);max-width:34em}
@media(max-width:700px){.srv{grid-template-columns:1fr;gap:2px}}
.cta{border:1px solid var(--line);border-radius:var(--r);padding:clamp(34px,6vw,90px);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;background:linear-gradient(120deg,rgba(var(--accr),.10),transparent 60%)}.cta h2{max-width:14em}
/* archive */
.page{padding-top:calc(66px + clamp(34px,6vw,80px));padding-bottom:clamp(60px,8vw,110px)}
.page h1{font-weight:200;font-size:clamp(38px,6.4vw,96px);line-height:1.12;margin:0 0 34px;letter-spacing:-.025em}
.fbar{position:sticky;top:66px;z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);margin:0 calc(-1*clamp(18px,3.6vw,64px)) 30px;padding:0 clamp(18px,3.6vw,64px);border-bottom:1px solid var(--line)}
.tools{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:14px 0 4px}
.tools input,.tools select{font:inherit;font-weight:300;background:none;color:var(--fg);border:0;border-bottom:1px solid var(--line);padding:6px 2px;min-width:0;border-radius:0}.tools input{flex:1;min-width:180px;font-size:20px}
.tools input:focus,.tools select:focus{outline:none;border-color:var(--acc)}.tools option,.form option{background:var(--bg);color:var(--fg)}
.chips{display:flex;gap:6px;flex-wrap:wrap;padding:10px 0 14px;align-items:center}.chip{border:1px solid var(--line);background:none;border-radius:30px;padding:2px 16px;font-size:14px;cursor:pointer;color:var(--mut);transition:.2s}.chip:hover{color:var(--fg);border-color:var(--fg)}.chip.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}.cnt{color:var(--mut);font-size:14px;margin-inline-start:auto}
/* project */
.back{display:inline-block;color:var(--mut);font-size:14px;margin-bottom:22px;border-bottom:1px solid var(--line)}.back:hover{color:var(--fg)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0 24px;margin:0 0 30px;border-top:1px solid var(--line)}.facts div{padding:14px 0;border-bottom:1px solid var(--line)}.facts dt{color:var(--mut);font-size:13px}.facts dd{margin:0;font-size:17px;font-weight:400}
.pd .big{aspect-ratio:16/8;min-height:260px;border-radius:var(--r)}.pd .big[data-lb]{cursor:zoom-in}
.desc{display:grid;grid-template-columns:1fr 1.7fr;gap:20px 70px;padding:clamp(34px,5vw,70px) 0}.desc p{grid-column:2;font-size:clamp(18px,2vw,26px);line-height:1.85;margin:0;max-width:34em;font-weight:300}.act{grid-column:1;grid-row:1;display:flex;gap:10px;flex-wrap:wrap;align-self:start}
@media(max-width:800px){.desc{grid-template-columns:1fr}.desc p,.act{grid-column:1;grid-row:auto}}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px;margin-bottom:40px}.gal a{display:block;overflow:hidden;border-radius:var(--r);background:var(--soft);aspect-ratio:4/3}.gal a:nth-child(5n+1){grid-column:span 2;aspect-ratio:16/9}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}.gal a:hover img{transform:scale(1.05)}
@media(max-width:700px){.gal a:nth-child(5n+1){grid-column:auto;aspect-ratio:4/3}}
.next{position:relative;display:block;aspect-ratio:21/8;min-height:240px;overflow:hidden;border-radius:var(--r);margin-top:10px}.next .art{position:absolute;inset:0;border-radius:0}.next .art svg,.next .art img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}.next:hover .art svg,.next:hover .art img{transform:scale(1.04)}
.next .nt{position:absolute;inset-inline:0;bottom:0;padding:clamp(18px,3vw,40px)}.next .nt span{display:block;font-size:14px;color:var(--mut)}.next .nt b{font-size:clamp(28px,5vw,72px);font-weight:200;letter-spacing:-.02em;line-height:1.15}
/* lightbox + search */
.lbx{position:fixed;inset:0;z-index:90;background:rgba(5,6,8,.94);display:flex;align-items:center;justify-content:center;padding:clamp(12px,4vw,60px)}.lbx[hidden]{display:none}
.lbx img{max-width:100%;max-height:100%;object-fit:contain}.lbx button{position:absolute;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#fff;font-size:22px;cursor:pointer}.lbx button:hover{background:rgba(255,255,255,.18)}
.lbx .lc{top:16px;inset-inline-end:16px}.lbx .lp{inset-inline-start:16px;top:50%}.lbx .ln{inset-inline-end:16px;top:50%}
.srch{position:fixed;inset:0;z-index:85;background:rgba(5,6,8,.55);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 0}.srch[hidden]{display:none}
.sbox{width:100%;max-width:680px;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:18px 20px;max-height:70vh;overflow:auto}
.srow{display:flex;gap:10px;align-items:center}.srow input{flex:1;font:inherit;font-size:22px;font-weight:200;color:var(--fg);background:none;border:0;border-bottom:1px solid var(--line);padding:8px 2px}.srow input:focus{outline:none;border-color:var(--acc)}
#sres{margin-top:12px}#sres a{display:flex;justify-content:space-between;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line)}#sres a:hover b{color:var(--acc)}#sres a b{font-weight:400}#sres span,.mut{color:var(--mut);font-size:13.5px}
/* misc */
.ni{display:grid;grid-template-columns:160px 1fr;gap:20px;padding:30px 0;border-bottom:1px solid var(--line)}.news{border-top:1px solid var(--line)}
.news time{color:var(--mut);font-size:14px}.news h3{margin:0 0 4px;font-weight:300;font-size:clamp(20px,2.5vw,32px);line-height:1.5}.news p{margin:0;color:var(--mut);max-width:40em}
.two{display:grid;grid-template-columns:1fr 1fr;gap:34px 80px}.two p{margin:0 0 16px;font-size:clamp(17px,1.7vw,21px)}
.off{border-top:1px solid var(--line);padding:16px 0}.off b{font-weight:400;display:block}.off span{color:var(--mut)}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:30px 20px}.tm b{display:block;font-weight:400;margin-top:10px}.tm>span{color:var(--mut);font-size:13.5px}
.tph{aspect-ratio:4/5;background:var(--soft);overflow:hidden;border-radius:var(--r);display:flex;align-items:center;justify-content:center}.tph img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25);transition:filter .5s,transform 1s}.tm:hover .tph img{filter:none;transform:scale(1.04)}.tph span{font-size:64px;font-weight:100;color:var(--mut)}
@media(max-width:800px){.two{grid-template-columns:1fr}.list .pc{grid-template-columns:72px 1fr auto}}@media(max-width:700px){.ni{grid-template-columns:1fr;gap:0}}
.btn{display:inline-flex;align-items:center;border:1px solid var(--fg);padding:9px 30px;border-radius:40px;background:none;cursor:pointer;font-size:15px;transition:background .25s,color .25s}.btn:hover{background:var(--fg);color:var(--bg)}.btn.o{border-color:var(--line)}.btn.o:hover{border-color:var(--fg)}
.form{display:grid;gap:16px;align-content:start}.form input,.form textarea,.form select{font:inherit;font-weight:300;color:var(--fg);background:none;border:0;border-bottom:1px solid var(--line);padding:12px 2px;width:100%;font-size:18px;border-radius:0}.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--acc)}
.hp{position:absolute!important;left:-9999px}.note{padding:12px 16px;font-size:14px;background:var(--fg);color:var(--bg);border-radius:var(--r)}.note.err{background:#c0392b;color:#fff}
.empty{color:var(--mut);padding:60px 0}
footer{margin-top:clamp(50px,8vw,120px);border-top:1px solid var(--line);padding:clamp(40px,6vw,80px) 0 28px}
.fgrid{display:grid;grid-template-columns:1.2fr 1.3fr;gap:40px 60px}.fl{margin:0;color:var(--mut)}.fbig{display:inline-block;font-size:clamp(26px,4.6vw,64px);font-weight:200;letter-spacing:-.02em;line-height:1.3;border-bottom:1px solid var(--line);word-break:break-all;transition:border-color .3s}.fbig:hover{border-color:var(--acc)}
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:24px;font-size:14.5px}.fcols b{display:block;font-weight:400;margin-bottom:6px}.fcols a,.fcols span{display:block;color:var(--mut)}.fcols a:hover{color:var(--fg)}
.fend{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:50px;padding-top:20px;border-top:1px solid var(--line);color:var(--mut);font-size:13px}.fend a:hover{color:var(--fg)}
@media(max-width:800px){.fgrid{grid-template-columns:1fr}}
/* reveal */
@media(prefers-reduced-motion:no-preference){.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}.js .rv.in{opacity:1;transform:none}}
@media print{#bg,#prog,header,.skip,.srch,body::before,body::after{display:none!important}}