@font-face{font-family:Public;src:url(../adii/fonts/public-sans-variable.woff2) format("woff2");font-weight:100 900}
@font-face{font-family:News;src:url(../adii/fonts/newsreader-variable.woff2) format("woff2");font-weight:200 800}
@font-face{font-family:Plex;src:url(../adii/fonts/ibm-plex-mono-400.woff2) format("woff2")}
@font-face{font-family:Arabic;src:url(../fonts/ibm-plex-sans-arabic-300.woff2) format("woff2");font-weight:300}
@font-face{font-family:Arabic;src:url(../fonts/ibm-plex-sans-arabic-400.woff2) format("woff2");font-weight:400}
:root{color-scheme:dark;--ground:#07070a;--ink:#ece7dc;--dim:#8f8c99;--soft:#cfcac0;--warm:#ffad57;--rule:#ffffff22;--hover:#fff}
/* light mode (js/theme.js): the sections below the film take light tokens; the film, the header and the sentences over it stay dark */
[data-theme=light] :is(.principle,.system,.close){--ground:#f3f1ec;--ink:#121118;--dim:#5b5763;--soft:#37343e;--warm:#9a4a00;--rule:#12111826;--hover:#34313b;color:var(--ink)}
[data-theme=light] .principle{background:var(--ground)}[data-theme=light] .principle::before{display:none}[data-theme=light] .principle h2{text-shadow:none}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:Public,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}[hidden]{display:none!important}
a:focus-visible,button:focus-visible{outline:2px solid var(--warm);outline-offset:6px}
.mono{font-family:Plex,monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
#film{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;background:var(--ground)}
header{position:absolute;top:0;inset-inline:0;height:92px;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:0 5vw}
.side{display:flex;align-items:center;gap:24px}
#theme{display:block;padding:4px;color:var(--soft)}#theme:hover{color:var(--warm)}#theme svg{display:block}
.note{position:absolute;inset-inline-start:5vw;bottom:18px;margin:0;color:var(--dim)}
.wordmark{display:inline-flex;align-items:center;font-family:Public,sans-serif;font-size:26px;font-weight:720;letter-spacing:-1.5px}.wordmark span{font-weight:340}.seal{flex:none;display:block;margin-right:12px}
.top{font-size:14px;color:var(--soft);border-bottom:1px solid var(--rule);padding-bottom:4px}.top:hover{color:var(--warm);border-color:var(--warm)}
main{position:relative;z-index:2;height:100svh;padding:0 5vw;overflow:hidden}
.line,.landing{position:absolute;inset-inline-start:5vw;bottom:17vh;max-width:min(860px,90vw);margin:0;opacity:0;visibility:hidden;transition:opacity .6s,visibility 0s .6s}
.line{font-family:News,serif;font-weight:300;font-size:clamp(30px,3.6vw,54px);line-height:1.08;letter-spacing:-.02em;text-shadow:0 2px 28px #07070a,0 0 2px #07070a}
header::before{content:"";position:absolute;inset:0 0 -56px;z-index:-1;pointer-events:none;background:linear-gradient(#07070ae6,#07070ab3 55%,transparent)}
main::after{content:"";position:absolute;inset-inline:0;bottom:0;height:150px;z-index:-1;pointer-events:none;background:linear-gradient(transparent,#07070acc 40%,#07070af7)}
.principle::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 75% 60% at 28% 50%,#07070ae0,#07070a99 50%,transparent 80%)}
.line::before,.landing::before{content:"";position:absolute;inset-block:-12vh -14vh;inset-inline:-10vw -28vw;z-index:-1;background:radial-gradient(ellipse at 35% 55%,#07070ab8,#07070a66 45%,transparent 72%)}
[dir=rtl] .principle::before{background:radial-gradient(ellipse 75% 60% at 72% 50%,#07070ae0,#07070a99 50%,transparent 80%)}
[dir=rtl] .line::before,[dir=rtl] .landing::before{background:radial-gradient(ellipse at 65% 55%,#07070ab8,#07070a66 45%,transparent 72%)}
.on{opacity:1;visibility:visible;transition:opacity .6s,visibility 0s}
.landing{visibility:visible}.landing nav{transition:visibility 0s .6s}.landing:not(.on) nav{visibility:hidden}.landing.on nav{transition:visibility 0s}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body[data-state=still] .line{transition:none}
.no-js .landing{animation:unveil .6s 6s forwards}@keyframes unveil{to{opacity:1;visibility:visible}}
.landing h1{font-family:News,serif;font-weight:300;font-size:clamp(34px,4.4vw,66px);line-height:1.04;letter-spacing:-.02em;margin:0;text-shadow:0 2px 28px #07070a,0 0 2px #07070a}
.landing nav{display:flex;gap:28px;align-items:center;margin-top:28px;flex-wrap:wrap}
.solid{display:inline-flex;align-items:center;background:var(--ink);color:var(--ground);font-size:15px;padding:16px 22px;min-height:52px}.solid:hover{background:var(--hover)}
.plain{font-size:15px;border-bottom:1px solid var(--rule);padding-bottom:6px}.plain:hover{color:var(--warm);border-color:var(--warm)}
#replay::before{content:"";position:absolute;inset:-12px -18px;z-index:-1;pointer-events:none;background:radial-gradient(farthest-side,#07070af0 55%,#07070a00)}
#replay{position:absolute;z-index:0;inset-inline-end:5vw;bottom:17vh;color:var(--dim);border-bottom:1px solid var(--rule);padding-bottom:4px}#replay:hover{color:var(--ink);border-color:var(--ink)}
@media(max-width:760px){header{height:70px;padding:0 20px}.side{gap:16px}.wordmark{font-size:22px}.top{font-size:13px}main{padding:0 20px}.note{inset-inline-start:20px;bottom:14px}
 .line,.landing{inset-inline:20px;bottom:14vh;max-width:none}.line{font-size:28px}.landing h1{font-size:30px}.landing nav{gap:18px;margin-top:18px}.solid{font-size:14px;padding:13px 16px;min-height:46px}.plain{font-size:14px}
 #replay{inset-inline-end:20px;bottom:calc(14vh - 36px)}}
@media(max-width:480px){.side .to{display:none}}
.principle{position:relative;z-index:2;min-height:72svh;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:0 5vw}
.principle small,.system small{color:var(--warm)}
.principle h2,.close h2{font-family:News,serif;font-weight:300;font-size:clamp(34px,4.4vw,66px);line-height:1.04;letter-spacing:-.02em;margin:0}
.principle h2{text-shadow:0 2px 28px #07070a,0 0 2px #07070a}
.system{position:relative;z-index:2;background:var(--ground);display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:center;padding:88px 5vw;border-top:1px solid var(--rule)}
.system .seq{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.system h2{font-family:News,serif;font-weight:300;font-size:clamp(30px,3.2vw,48px);line-height:1.08;letter-spacing:-.02em;margin:10px 0 22px}
.system p{font-size:17px;line-height:1.55;color:var(--soft);margin:0 0 14px;max-width:48ch}
.system .cond{color:var(--dim);font-size:14px}
.route{display:inline-block;margin-top:8px;font-size:15px;border-bottom:1px solid var(--rule);padding-bottom:4px}.route:hover{color:var(--warm);border-color:var(--warm)}
.close{position:relative;z-index:2;background:var(--ground);padding:120px 5vw 40px;border-top:1px solid var(--rule)}
.close nav{display:flex;gap:28px;align-items:center;margin-top:32px;flex-wrap:wrap}.close nav .mono{color:var(--dim)}
.close footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:120px;color:var(--dim)}.close footer a:hover{color:var(--ink)}
@media(max-width:760px){.principle{padding:0 20px;min-height:60svh}.system{grid-template-columns:1fr;gap:28px;padding:56px 20px}.system h2{font-size:28px}.system p{font-size:16px}.close{padding:80px 20px 32px}.close footer{margin-top:72px}}
/* Arabic (ar/): the Arabic type, never letter-spaced (it breaks the joins), taller lines for its marks; Latin names keep their own */
:lang(ar) body{font-family:Arabic,Public,sans-serif}
:lang(ar) .mono{font-family:Plex,Arabic,monospace;font-size:12px;letter-spacing:0;text-transform:none}
:lang(ar) :is(.line,.landing h1,.principle h2,.close h2,.system h2){font-family:Arabic,sans-serif;font-weight:300;letter-spacing:0;line-height:1.45;text-wrap:balance}
@media(max-width:760px){:lang(ar) .landing h1{font-size:26px}}
:lang(ar) .system p{line-height:1.85}
:lang(ar) [lang=en]{unicode-bidi:isolate;white-space:nowrap}   /* a Latin name in Arabic text stays whole, in its own order */
@media(prefers-reduced-motion:reduce){.line,.landing,.on{transition:none}}