@font-face{font-family:Alexandria;font-weight:200;font-display:swap;src:url(/fonts/Alexandria_200ExtraLight.ttf)}
@font-face{font-family:Alexandria;font-weight:300;font-display:swap;src:url(/fonts/Alexandria_300Light.ttf)}
@font-face{font-family:Alexandria;font-weight:400;font-display:swap;src:url(/fonts/Alexandria_400Regular.ttf)}
:root{--bg:#050506;--ink:#fff;--soft:rgba(255,255,255,.78);--line:rgba(255,255,255,.16);--gutter:max(20px,calc((100vw - 1180px)/2));--gap:clamp(96px,12vw,168px);--t-title:clamp(36px,5vw,64px);--t-lead:clamp(18px,1.7vw,21px);--t-small:15px}
::selection{background:#f21a80;color:#fff}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font-family:Alexandria,system-ui,sans-serif;font-weight:300;line-height:1.8;background:var(--bg);overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit;text-underline-offset:4px}
a:focus-visible,button:focus-visible{outline:2px solid #fff;outline-offset:3px}
html[lang=ar] .en:not(div),html[lang=en] .ar{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

.aura,.tile{--core:#210819;--bloom:#f21a80;--ground:#c79ebd}
.a-rose{--core:#210819;--bloom:#f21a80;--ground:#c79ebd}
.a-orange{--core:#4d0d08;--bloom:#ff8c38;--ground:#db5c33}
.a-green{--core:#0a1224;--bloom:#dbf2b8;--ground:#99bda6}
.a-red{--core:#330808;--bloom:#e62121;--ground:#ccced1}
.a-blue{--core:#080a29;--bloom:#4d7aff;--ground:#384db0}

.bar{position:absolute;inset:0 0 auto;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px var(--gutter);font-size:var(--t-small)}
.mark{font-size:22px;font-weight:300;text-decoration:none}
.bar nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,28px)}
.bar nav a{text-decoration:none}
.bar nav a:hover{text-decoration:underline}
#lang{font:inherit;font-size:14px;color:#fff;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.4);border-radius:99px;padding:0 16px;min-height:40px;min-width:56px;cursor:pointer}
#lang:hover{background:rgba(0,0,0,.5)}

.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:96px 16px 76px}
.hero .aura{position:absolute;inset:0;background:radial-gradient(circle at 50% 47%,var(--core) 0,var(--core) 13%,var(--bloom) 38%,var(--ground) 66%,#050506 96%);animation:breathe 9s ease-in-out infinite alternate}
.hero .aura::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.34)}
@keyframes breathe{to{transform:scale(1.1)}}
#word{position:relative;display:block;max-width:100%}
.line{position:relative;margin:clamp(-34px,-2vw,-8px) 0 0;font-weight:300;line-height:1.4;font-size:clamp(24px,3.4vw,40px)}
.soon{position:absolute;bottom:28px;margin:0;font-size:var(--t-small)}

.excuses{padding:var(--gap) var(--gutter)}
.excuses h2{font-size:var(--t-lead);font-weight:300;color:var(--soft);margin:0 0 28px;line-height:1.5}
.excuses ul{list-style:none;margin:0;padding:0}
.excuses li{width:fit-content;max-width:100%;position:relative;font-weight:200;font-size:clamp(40px,7.4vw,96px);line-height:1.34;color:#fff;transition:color .7s cubic-bezier(.16,1,.3,1)}
.excuses li::after{content:"";position:absolute;inset-inline-start:0;top:55%;height:2px;width:0;background:#f21a80;transition:width .7s cubic-bezier(.16,1,.3,1);transition-delay:inherit}
.excuses li.on{color:rgba(255,255,255,.5)}
.excuses li.on::after{width:100%}
.answer{margin:clamp(36px,5vw,60px) 0 0;font-size:var(--t-title);font-weight:200;line-height:1.28;max-width:16em}

.count{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,7vw,110px);align-items:center;padding:0 var(--gutter)}
.dial{position:relative;aspect-ratio:1;max-width:460px;width:100%;margin:auto;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#080a29 0,#080a29 34%,#4d7aff 74%,#384db0 100%)}
#ring{position:absolute;inset:0}
#digits{display:grid;gap:7px;direction:ltr}
#digits div{display:flex;gap:7px}
#digits i{width:clamp(10px,1.4vw,15px);aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.1)}
#digits i.on{background:#fff}
h2{font-weight:200;font-size:var(--t-title);line-height:1.28;margin:0 0 18px}
.copy p,.private p{font-size:var(--t-lead);color:var(--soft);margin:0;max-width:32em}

.screens{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.2vw,28px);padding:var(--gap) var(--gutter) clamp(56px,7vw,96px)}
.screens figure{margin:0}
.screens img{display:block;width:100%;height:auto;border-radius:clamp(26px,3vw,38px);border:1px solid var(--line)}
.screens figcaption{margin-top:16px;font-size:var(--t-small);line-height:1.6;color:var(--soft);text-align:center}

.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;padding:0 var(--gutter)}
.tile{position:relative;overflow:hidden;grid-column:span 2;min-height:clamp(220px,23vw,290px);border-radius:32px;padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;justify-content:flex-end;background:radial-gradient(circle at 50% 42%,var(--bloom),var(--ground) 80%)}
.tile:nth-child(1),.tile:nth-child(4){grid-column:span 4}
.tile::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.52)}
.tile>*{position:relative}
.tile h3{margin:0;font-weight:300;line-height:1.3;font-size:clamp(28px,3vw,38px)}
.tile p{margin:6px 0 0;font-size:16px;line-height:1.65;max-width:26em}

.private{padding:var(--gap) var(--gutter) 0;text-align:center}
.private h2{max-width:15em;margin-inline:auto}
.private p{margin-inline:auto}
.end{padding:var(--gap) 20px 40px;text-align:center;color:var(--soft);font-size:var(--t-small)}
.end nav{display:flex;justify-content:center;gap:20px;margin-top:20px}
.end .co{margin-top:18px;font-size:12px;letter-spacing:.04em;opacity:.55;direction:ltr}
.end .big{margin:0 0 14px;font-weight:200;font-size:var(--t-title);line-height:1.28;color:#fff}

@media (max-width:900px){.screens{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0}.screens::-webkit-scrollbar{display:none}.screens figure{flex:0 0 min(68vw,280px);scroll-snap-align:center}}
@media (max-width:720px){.count{grid-template-columns:minmax(0,1fr)}.bar nav a{display:none}.tile,.tile:nth-child(1),.tile:nth-child(4){grid-column:span 6;min-height:210px}.dial{max-width:340px}}
@media (prefers-reduced-motion:reduce){.hero .aura{animation:none}.excuses li,.excuses li::after{transition:none}}

/* Reading pages */
.wrap{max-width:720px;margin:0 auto;padding:0 20px;position:relative}
body:not(.home)::before{content:"";position:absolute;inset:0 0 auto;height:330px;pointer-events:none;background:radial-gradient(70% 100% at 50% 0,#f21a80 0,#7a1447 42%,transparent 76%);opacity:.62}
header.top{position:relative;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:22px 0;font-size:15px}
header.top>a{font-size:20px}
header.top nav{display:flex;gap:18px}
header.top nav a{text-decoration:none}
.en{direction:ltr;text-align:left}
article{position:relative}
article h1{font-weight:200;line-height:1.15;font-size:clamp(38px,9vw,60px);margin:44px 0 8px}
article h2{font-weight:400;font-size:20px;line-height:1.5;margin:44px 0 8px}
article p,article li{color:var(--soft);font-size:17px;line-height:1.9}
article ul{padding-inline-start:20px}
.meta{font-size:14px;color:var(--soft)}
hr{border:0;border-top:1px solid var(--line);margin:56px 0}
footer:not(.end){border-top:1px solid var(--line);margin-top:70px;padding:26px 0 44px;font-size:14px;color:var(--soft)}