@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Noto+Sans+Arabic:wght@400;500&display=swap');
:root{color-scheme:light;--ink:#fffdf7;--hair:rgba(255,255,255,.35);font-family:'DM Sans',Arial,sans-serif;color:var(--ink);background:#ddd9cf}*{box-sizing:border-box}html,body{margin:0;min-width:320px}html{overscroll-behavior:none}body{font-size:13px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;cursor:pointer;background:none}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #fff;outline-offset:5px}button[hidden],[hidden]{display:none!important}#stage{position:fixed;inset:0;overflow:hidden}#stage canvas{display:block;width:100%;height:100%}.scene-shade{position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(16,24,29,.35),transparent 21%,transparent 46%,rgba(14,20,22,.40) 76%,rgba(9,17,19,.80))}header{position:fixed;inset:0 0 auto;z-index:3;padding:30px 3.4%;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;flex-direction:column;align-items:center;line-height:1}.brand{flex-shrink:0}.brand-wordmark{display:block;width:126px;height:auto}.brand small{font-size:8px;letter-spacing:4px;margin-top:6px;margin-right:-4px}.header-end{display:flex;align-items:center;gap:30px}.location{font-size:9px;letter-spacing:2px}#language{border:1px solid var(--hair);border-radius:50px;padding:10px 18px;font-size:12px;backdrop-filter:blur(10px);background:#ffffff09;min-width:78px}#language:hover{background:#ffffff22}.story{position:fixed;inset:auto auto 176px 3.4%;max-width:440px;z-index:2;pointer-events:none;transition:opacity .25s}.eyebrow{font-size:9px;letter-spacing:2px;display:flex;align-items:center;gap:11px;margin:0 0 16px}.dash{width:29px;height:1px;background:currentColor;opacity:.55}h1{font:normal clamp(40px,4.4vw,68px)/.99 Georgia,serif;letter-spacing:-2px;margin:0}h1 em{font-weight:normal;color:#e8e3d6}#chapter-description{font-size:12px;line-height:1.6;max-width:315px;color:#e9e7df;margin:17px 0 0}.begin{pointer-events:auto;display:flex;align-items:center;gap:30px;padding:13px 0 9px;border-bottom:1px solid var(--hair);margin-top:16px;font-size:11px}.begin span:last-child{font-size:23px;line-height:16px}.begin:hover{gap:44px}.story:not(.intro) h1{font-size:clamp(32px,3.1vw,46px);line-height:1.02}.story:not(.intro) #chapter-description{max-width:290px}.story:not(.intro){bottom:172px}#scroll-track{height:1700vh;pointer-events:none}footer{position:fixed;z-index:4;inset:auto 3.4% 18px}.footer-top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:24px}.scroll-cue{display:flex;align-items:center;gap:10px;font-size:8px;letter-spacing:2px}.scroll-cue i{width:12px;height:19px;border:1px solid #ffffff80;border-radius:9px;position:relative}.scroll-cue i:before{content:'';position:absolute;width:1px;height:5px;background:currentColor;left:4.5px;top:4px;animation:scroll-tick 1.8s infinite}.utilities{display:flex;gap:22px;align-items:center}.utilities button{font-size:10px;padding:5px 0;opacity:.85}.utilities button:hover{opacity:1}.utilities #autoplay{display:flex;gap:12px;align-items:center}#autoplay span:last-child{font-size:16px}#journey-nav{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}#journey-nav button{text-align:start;display:flex;gap:9px;align-items:center;padding:0 0 13px;opacity:.54;white-space:nowrap;font-size:10px;transition:opacity .25s}#journey-nav button span:first-child{font-size:8px;opacity:.7}#journey-nav button[aria-current],#journey-nav button:hover{opacity:1}.progress-line{height:1px;background:#ffffff30}#progress{height:1px;background:#ece5d6;width:0}.footer-bottom{display:flex;justify-content:space-between;align-items:center;font-size:7px;letter-spacing:1.7px;margin-top:13px;opacity:.65}.footer-bottom #percentage{font-variant-numeric:tabular-nums}#loading{position:fixed;inset:0;z-index:12;background:#eae6dd;color:#3b3b32;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .6s}#loading.done{opacity:0;pointer-events:none}.loading-brand{display:block;width:186px;height:auto;filter:brightness(0) saturate(100%) opacity(.76)}#loading-label{font-size:10px;letter-spacing:1px}.load-line{width:130px;height:1px;background:#3332}.load-line i{display:block;height:100%;width:4%;background:#6d7466;transition:width .35s}#error,.no-js{position:fixed;z-index:13;inset:0;padding:20vh 10%;color:#eee;background:#25302b}#error h2{font:36px Georgia,serif}#error p{max-width:440px;line-height:1.7}#error a,#error button{display:inline-block;padding:12px 18px;border:1px solid #ffffff66;margin:18px 12px 0 0}.skip{position:fixed;z-index:20;inset:10px auto auto 10px;background:#26352c;padding:13px;transform:translateY(-200%)}.skip:focus{transform:none}html[dir=rtl]{font-family:'Noto Sans Arabic',Arial,sans-serif}html[dir=rtl] .story{inset-inline-start:3.4%;inset-inline-end:auto}html[dir=rtl] h1{font-family:'Noto Sans Arabic',Arial,sans-serif;font-size:48px;line-height:1.5;letter-spacing:0}html[dir=rtl] .story:not(.intro) h1{font-size:33px;line-height:1.5}html[dir=rtl] .eyebrow,html[dir=rtl] .location,html[dir=rtl] .scroll-cue{letter-spacing:0}html[dir=rtl] .brand small{letter-spacing:1px;margin-top:8px}@keyframes scroll-tick{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(4px);opacity:1}}@media(min-width:1600px){.story{bottom:195px}footer{bottom:25px}.story:not(.intro){bottom:190px}}@media(max-width:700px){header{padding:24px 6%}.brand-wordmark{width:106px}.brand small{font-size:6px;letter-spacing:3px}.location{display:none}.header-end{gap:0}#language{padding:8px 13px;min-width:67px;font-size:11px}.story,.story:not(.intro){inset-inline-start:6%;bottom:195px;max-width:85%}h1{font-size:48px}.story:not(.intro) h1{font-size:34px}#chapter-description{font-size:11px;margin-top:12px;max-width:250px}.eyebrow{margin-bottom:11px;font-size:8px}.begin{margin-top:9px}footer{inset-inline:6%;bottom:21px}.footer-top{margin-bottom:19px;align-items:center}.scroll-cue{font-size:7px;letter-spacing:1px}.utilities{gap:15px}.utilities button{font-size:9px}#restart{display:none}#journey-nav{grid-template-columns:repeat(4,1fr);gap:2px 13px}#journey-nav button{font-size:9px;gap:6px;padding-bottom:13px}.footer-bottom{font-size:6px;letter-spacing:1px}.footer-bottom span:last-child{max-width:130px;text-align:end}.scene-shade{background:linear-gradient(180deg,#10191d50,transparent 19%,transparent 40%,#0e141a33 54%,#091113cc 88%)}html[dir=rtl] h1{font-size:33px;line-height:1.5}html[dir=rtl] .story:not(.intro) h1{font-size:28px}html[dir=rtl] .story{inset-inline-start:6%}}@media(max-height:600px) and (min-width:701px){header{padding-top:18px}.story,.story:not(.intro){bottom:146px}h1{font-size:42px}.story:not(.intro) h1{font-size:32px}#chapter-description{display:none}.footer-top{margin-bottom:17px}footer{bottom:12px}.begin{margin-top:5px;padding-top:8px}}@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}

/* Touch controls and a stable scroll track on mobile browser chrome changes. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#resident-services{display:flex;gap:8px;min-width:0}
#resident-services a{
 display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px;
 padding:10px 17px;border:1px solid #ffffff66;border-radius:6px;
 background:rgba(20,30,28,.76);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
 font-size:12px;line-height:1.4;text-align:center;transition:background .2s,border-color .2s;
}
#resident-services a:hover{background:rgba(44,58,50,.94);border-color:#f3ecda}
@media(max-width:700px){
 .footer-top .scroll-cue{display:none}
 #resident-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%}
 #resident-services a{padding:7px 6px;gap:0;font-size:11px;min-width:0}
}
#stage{pointer-events:none}#scroll-track{height:1300vh;height:1300svh}
@media(max-width:700px),(pointer:coarse){
 #scroll-track{height:900vh;height:900svh}
 #resident-services a,#language{backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media(max-width:700px){
 #language{min-height:44px;min-width:76px}
 .utilities button{min-height:40px;font-size:11px}
 .utilities{gap:16px}.footer-top{margin-bottom:10px}
 #journey-nav button{min-height:40px;padding:8px 0;font-size:10px}
 #journey-nav button span:first-child{font-size:8px}
 .story,.story:not(.intro){bottom:215px}
 .eyebrow{font-size:9px}.scroll-cue{font-size:8px}
 footer{bottom:max(16px,env(safe-area-inset-bottom))}
}
@media(max-width:700px) and (max-height:650px){
 .story,.story:not(.intro){bottom:185px}
 .story h1,.story:not(.intro) h1{font-size:28px}
 #chapter-description{display:none}
 #journey-nav button{min-height:34px}
}
@media(max-width:700px){#journey-nav button{min-height:44px}.story,.story:not(.intro){bottom:225px}}

/* Final responsive rules keep every control usable when a phone rotates. */
html,body{min-width:0}
:root{--page-gutter:max(3.4vw,20px)}
header{
 padding-left:max(var(--page-gutter),calc(env(safe-area-inset-left) + 12px));
 padding-right:max(var(--page-gutter),calc(env(safe-area-inset-right) + 12px));
 padding-top:max(24px,calc(env(safe-area-inset-top) + 12px));
}
footer{
 left:max(var(--page-gutter),calc(env(safe-area-inset-left) + 12px));
 right:max(var(--page-gutter),calc(env(safe-area-inset-right) + 12px));
 bottom:max(14px,calc(env(safe-area-inset-bottom) + 8px));
}
#language,.utilities button,#journey-nav button,.begin{min-height:44px}
.utilities button{min-width:44px}
#journey-nav button{min-width:0}
.story,.story:not(.intro){
 inset-inline-start:max(var(--page-gutter),calc(env(safe-area-inset-left) + 12px));
 inset-inline-end:auto;
}
html[dir=rtl] .story{
 inset-inline-start:max(var(--page-gutter),calc(env(safe-area-inset-right) + 12px));
}
@media(max-width:700px){
 :root{--page-gutter:6vw}
 .footer-top{gap:12px}
 .utilities{gap:12px;flex-shrink:0}
 .scroll-cue{min-width:0;max-width:105px;line-height:1.5}
 .scroll-cue i{flex:0 0 12px}
 #journey-nav{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:10px}
 #journey-nav button{font-size:10px;gap:5px}
}
@media(max-width:700px) and (max-height:650px) and (orientation:portrait){
 .story,.story:not(.intro){bottom:calc(220px + env(safe-area-inset-bottom))}
 .story h1,.story:not(.intro) h1{font-size:28px;line-height:1.04}
 html[dir=rtl] .story h1,html[dir=rtl] .story:not(.intro) h1{font-size:28px;line-height:1.35}
 #chapter-description{display:none}
 #journey-nav button{min-height:44px}
}
@media(min-width:701px) and (min-height:501px) and (max-height:600px){
 .story,.story:not(.intro){bottom:166px}
}
@media(max-height:500px) and (orientation:landscape){
 :root{--page-gutter:max(3.4vw,18px)}
 header{padding-top:max(10px,env(safe-area-inset-top));padding-bottom:8px}
 .brand-wordmark{width:88px}
 .brand small{font-size:6px;margin-top:4px;letter-spacing:2px}
 html[dir=rtl] .brand small{margin-top:4px}
 .location{display:none}
 .story,.story:not(.intro){bottom:calc(132px + env(safe-area-inset-bottom));max-width:min(48vw,370px)}
 .story h1,.story:not(.intro) h1{font-size:28px;line-height:1.03;letter-spacing:-.8px}
 html[dir=rtl] .story h1,html[dir=rtl] .story:not(.intro) h1{font-size:24px;line-height:1.2;letter-spacing:0}
 .eyebrow{font-size:8px;margin-bottom:6px}
 #chapter-description{display:none}
 .begin{min-height:44px;margin-top:4px;padding-top:8px;padding-bottom:8px}
 footer{bottom:max(8px,env(safe-area-inset-bottom))}
 .footer-top{justify-content:flex-end;margin-bottom:0;gap:10px}
 .scroll-cue{display:none}
 .utilities{gap:20px}
 .utilities button{min-height:44px;font-size:11px}
 #restart{display:block}
 #journey-nav{
  display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:thin;scrollbar-color:#ffffff77 #ffffff18;padding-bottom:2px;
 }
 #journey-nav button{flex:0 0 auto;min-height:44px;padding:6px 4px;font-size:10px}
 #journey-nav::-webkit-scrollbar{height:3px}
 #journey-nav::-webkit-scrollbar-thumb{background:#ffffff77;border-radius:3px}
 .footer-bottom{margin-top:7px;font-size:6px}
}
@media(max-height:350px) and (orientation:landscape){
 .story .eyebrow{display:none}
 .story h1,.story:not(.intro) h1{font-size:26px}
 html[dir=rtl] .story h1,html[dir=rtl] .story:not(.intro) h1{font-size:22px}
}