/* Darak FINAL — type system: modular scale 1.25, base 18px. Weights: Plex Arabic 400/600, Amiri 700 (display only). */
@font-face{font-family:"Plex Arabic";src:url(fonts/plexar-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Arabic";src:url(fonts/plexar-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plex Sans";src:url(fonts/plex.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"Amiri";src:url(fonts/amiri-bold.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
 --bg:#11151f;--bg2:#1b2030;--ink:#f1ece2;--mute:#c9c2b6;--line:rgba(241,236,226,.18);--brand:#d9b46a;
 --f-ui:"Plex Arabic","Plex Sans",system-ui,sans-serif;--f-en:"Plex Sans","Plex Arabic",system-ui,sans-serif;--f-disp:"Amiri","Plex Arabic",serif;
 --s-1:.889rem;--s0:1.125rem;--s1:clamp(1.25rem,1.1rem + .6vw,1.406rem);--s2:clamp(1.5rem,1.2rem + 1.2vw,1.758rem);
 --s3:clamp(1.9rem,1.4rem + 2vw,2.747rem);--s4:clamp(2.6rem,1.6rem + 4vw,4.292rem);
 --sp1:.5rem;--sp2:1rem;--sp3:1.5rem;--sp4:2.5rem;--sp5:4rem;--sp6:clamp(3rem,2.25rem + 3vw,5rem);
 --measure:65ch;--r:14px}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--s0)/1.7 var(--f-ui);font-synthesis:none;-webkit-font-smoothing:antialiased}
[lang=en]{font-family:var(--f-en);line-height:1.55}
img{display:block;max-width:100%}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem)}
.skip{position:absolute;inset-block-start:-100px;inset-inline-start:1rem;background:var(--ink);color:var(--bg);padding:.5rem 1rem;border-radius:8px;z-index:50}.skip:focus{inset-block-start:1rem}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
a{color:inherit}
/* header */
.hd{position:fixed;inset-block-start:0;inset-inline:0;z-index:20;background:linear-gradient(var(--bg),rgba(11,14,22,.0));transition:background .3s}
.hd.solid{background:rgba(11,14,22,.92);backdrop-filter:blur(8px);border-block-end:1px solid var(--line)}
.hd-in{display:flex;align-items:center;justify-content:space-between;block-size:64px;gap:var(--sp3)}
.logo{font:700 var(--s2)/1.2 var(--f-disp);text-decoration:none;color:var(--ink)}.hd .logo{display:inline-flex;align-items:center;justify-content:center;min-inline-size:44px;min-block-size:44px;padding-inline:.25rem}
.hd nav{display:flex;gap:clamp(.75rem,2vw,2rem);overflow-x:auto}
.hd nav a{font-size:var(--s-1);font-weight:600;text-decoration:none;color:var(--mute);display:inline-flex;align-items:center;min-block-size:44px;padding-inline:.25rem;white-space:nowrap}.hd nav a:hover{color:var(--ink)}
/* type */
h1,h2,h3{margin:0;font-weight:700}
h1{font:700 var(--s4)/1.25 var(--f-disp)}
h2{font:700 var(--s3)/1.25 var(--f-disp)}
h3{font:600 var(--s1)/1.4 var(--f-ui)}
.sub{display:block;color:var(--brand)}
.kicker{margin:0 0 var(--sp2);font-size:var(--s-1);font-weight:600;color:var(--mute)}
p{margin:0;max-inline-size:var(--measure)}
.lede{margin-block-start:var(--sp3);font-size:var(--s1);line-height:1.7}
.en{color:var(--mute);margin-block-start:var(--sp1);font-size:var(--s0)}
.note{color:var(--mute);font-size:var(--s-1);margin-block-start:var(--sp2)}
.ex{display:inline-block;margin-block-start:var(--sp3);font-size:var(--s-1);color:var(--mute);border:1px dashed var(--line);padding:.25rem .75rem;border-radius:999px}
.ph{font:600 var(--s-1)/1.5 var(--f-en);color:#ffb4a0;border:1px dashed #ffb4a0;display:inline-block;padding:.25rem .75rem;border-radius:6px;margin-block-end:var(--sp3)}
.btn{display:inline-flex;gap:.5rem;align-items:center;margin-block-start:var(--sp4);padding:.75rem 1.5rem;border:1px solid var(--brand);border-radius:999px;color:var(--ink);text-decoration:none;font-weight:600;font-size:var(--s0)}
.btn:hover{background:rgba(217,180,106,.12)}
/* hero */
.hero{position:relative;min-block-size:100svh;display:grid;align-items:end;padding-block:96px var(--sp6);overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-still,.hero-cv{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}
.hero-still{animation:kb 24s ease-in-out infinite alternate}
.hero.film .hero-still{opacity:0}.hero.settled .hero-still{opacity:1;transition:opacity 1.2s ease}
.hero-cv{pointer-events:none}.hero.settled .hero-cv{opacity:0;transition:opacity 1.2s ease}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(0deg,var(--bg) 0%,rgba(11,14,22,.75) 35%,rgba(11,14,22,.15) 70%),linear-gradient(270deg,rgba(11,14,22,.55),transparent 60%)}
.hero-copy{position:relative;inline-size:100%}.hero .kicker{display:inline-block;background:rgba(17,21,31,.85);color:var(--ink);padding:.25rem .75rem;border-radius:6px}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.05)}}
/* hero plates strip (decorative, set B) */
.plates{padding-block:var(--sp4);border-block:1px solid var(--line);overflow:hidden}
.plates .row{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(200px,22vw,300px);gap:var(--sp2);overflow-x:auto;padding-inline:clamp(1.25rem,4vw,3rem);scrollbar-width:none}
.pl{margin:0;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--bg2)}
.pl img,.cm img{inline-size:100%;block-size:100%;object-fit:cover;animation:kb var(--d,20s) ease-in-out infinite alternate}
.pl img[style*="--o:1"]{animation-direction:alternate-reverse}
.off img{animation-play-state:paused}
/* sections */
.sec{padding-block:var(--sp6);border-block-end:1px solid var(--line)}
.sec h2{margin-block-end:var(--sp3)}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.25rem,3vw,2.5rem);max-inline-size:960px}
.keys{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp2)}.keys .k{flex:0 1 calc((100% - 3*var(--sp2))/4)}
.k{all:unset;box-sizing:border-box;cursor:pointer;display:grid;align-content:center;gap:.5rem;min-block-size:132px;padding:var(--sp3);border:1px solid var(--line);border-radius:12px;background:var(--bg2);text-align:start}
.k:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.k .kn{font:700 var(--s3)/1.25 var(--f-disp)}.k .kl{font-size:1rem;color:var(--mute)}
.k.on,.k:hover{border-color:var(--brand)}.k.on .kn{color:var(--brand)}
.kd{margin-block-start:var(--sp3);font-size:var(--s2);line-height:1.6;min-block-size:3.2em;padding:var(--sp3);background:var(--bg2);border-inline-start:3px solid var(--brand);border-radius:8px;max-inline-size:none}
.tabs{display:flex;gap:var(--sp1);border-block-end:1px solid var(--line);margin-block-end:var(--sp3)}
.tabs button{all:unset;cursor:pointer;min-block-size:44px;display:inline-flex;align-items:center;padding:0 1rem;font-weight:600;color:var(--mute);border-block-end:2px solid transparent}
.tabs button.on{color:var(--ink);border-color:var(--brand)}.tabs button:focus-visible{outline:2px solid var(--brand)}
dl{margin:0}dl div{display:flex;justify-content:space-between;gap:var(--sp2);padding-block:.75rem;border-block-end:1px solid var(--line)}
dt{color:var(--mute)}dd{margin:0;font-weight:600}
.clock{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp2);text-align:center}
.clock b{display:block;font:600 var(--s4)/1.15 var(--f-ui);font-variant-numeric:tabular-nums}.clock span{font-size:var(--s0);color:var(--mute)}.clock>div{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:var(--sp3) var(--sp1)}
.bar{block-size:4px;background:var(--line);border-radius:4px;margin-block-start:var(--sp3);overflow:hidden}.bar i{display:block;block-size:100%;background:var(--brand)}
.hub{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:var(--sp2)}
.hub li{display:flex;align-items:center;min-block-size:96px;padding:var(--sp3);border:1px solid var(--line);border-inline-start:3px solid var(--brand);border-radius:12px;background:var(--bg2);font:600 var(--s2)/1.4 var(--f-ui)}
/* cities */
.cities{list-style:none;margin:0;padding:0 clamp(1.25rem,4vw,3rem);display:grid;grid-template-columns:1fr;gap:var(--sp3);max-inline-size:1440px;margin-inline:auto}
.city figure{margin:0;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;block-size:100%}
.cm{position:relative;aspect-ratio:16/9;overflow:hidden}
.city figcaption{padding:var(--sp3);border-block-start:2px solid var(--acc)}
.num{font:600 var(--s-1)/1 var(--f-en);color:var(--acc)}
.cm{background:var(--bg2)}.city h3{font:700 var(--s2)/1.25 var(--f-disp);margin-block:.25rem}
.line{color:var(--ink)}.city .en{font-size:var(--s-1)}
.cap{font-size:var(--s-1);color:var(--mute);margin-block-start:var(--sp1)}
.ft{padding-block:var(--sp5)}.ft .wrap{display:flex;flex-wrap:wrap;gap:var(--sp3);align-items:baseline;justify-content:space-between;color:var(--mute);font-size:var(--s-1)}
@media (max-width:760px){.hd nav a:nth-child(n+4){display:none}.clock{grid-template-columns:repeat(2,1fr)}.clock b{font-size:var(--s3)}.keys .k{flex-basis:calc((100% - var(--sp2))/2)}.k{min-block-size:104px;padding:var(--sp2)}.hub{grid-template-columns:repeat(2,1fr)}.hub li{min-block-size:64px;font-size:var(--s1);padding:var(--sp2)}.hero{align-items:end}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.hero-cv{display:none}.hero.film .hero-still{opacity:1}}

@media (min-width:1280px){.cities{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp2)}.city figcaption{padding:var(--sp2)}}
@media (min-width:600px) and (max-width:1279px){.cities{grid-template-columns:repeat(2,minmax(0,1fr))}}