/* The Still Hour. System fonts, plus one self-hosted OFL Arabic font (rc1.4, D-AR-FONT: no CDN). Logical properties so ar (RTL) mirrors. */
@font-face{font-family:'Noto Naskh Arabic';src:url('fonts/NotoNaskhArabic-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
:root{--bg:#050812;--ink:#ecebe4;--dim:#9aa3b8;--gold:#d9b05c;--line:rgba(217,176,92,.35);--glass:rgba(8,12,26,.72);--r:14px;--serif:"Cormorant Garamond",Georgia,"Noto Serif","Noto Naskh Arabic","Noto Serif Devanagari","Noto Serif TC",serif;--sans:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans Arabic","Noto Sans Devanagari","Noto Sans TC",sans-serif}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--sans)}
body{display:flex;flex-direction:column;min-height:100dvh}
.sr,.skip:not(:focus){position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{position:fixed;inset:8px auto auto 8px;z-index:99;background:#fff;color:#000;padding:8px 12px;border-radius:8px}
a{color:#bcd3ff}
:focus-visible{outline:3px solid #ffd27a;outline-offset:2px}
.hdr{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 14px;background:rgba(5,8,18,.92);border-block-end:1px solid var(--line);z-index:20}
.brand{color:var(--ink);text-decoration:none;font:600 1.15rem var(--serif);letter-spacing:.04em}
.doors{display:flex;gap:4px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.doors a{display:block;padding:6px 10px;border-radius:999px;color:var(--ink);text-decoration:none;font-size:.9rem}
.doors a:hover{background:rgba(255,255,255,.08)}
.tools{margin-inline-start:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
select,input[type=text],input[type=number]{background:#0d1426;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font:inherit;max-inline-size:100%}
.btn{font:inherit;border-radius:999px;border:1px solid var(--line);padding:8px 16px;cursor:pointer;color:var(--ink);background:transparent;min-block-size:40px}
.btn.primary{background:linear-gradient(180deg,#e5bf6c,#b98a32);color:#1a1204;border-color:#e5bf6c;font-weight:600}
.btn.big{padding:18px 28px;font-size:1.1rem}
.btn:disabled{opacity:.45;cursor:not-allowed}
.linkb{background:none;border:0;color:#bcd3ff;text-decoration:underline;cursor:pointer;font:inherit;padding:4px}
body[data-auth=in] .auth-out,body[data-auth=out] .auth-in{display:none}
main{flex:1;position:relative;min-block-size:520px}
#water{position:absolute;inset:0;overflow:hidden}
#sky{position:absolute;inset:0;inline-size:100%;block-size:100%;touch-action:pan-y;cursor:grab}
#hud{position:absolute;inset-block-start:10px;inset-inline-start:12px;max-inline-size:min(430px,92vw);background:var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;backdrop-filter:blur(6px);z-index:5;transition:opacity .8s;background:rgba(5,8,18,.92);max-block-size:min(40vh,330px);overflow:auto}
#hud.quiet{opacity:.35;pointer-events:none}
#hud h1{font:600 clamp(1.6rem,4vw,2.4rem) var(--serif);margin:0 0 4px;letter-spacing:.03em}
#hud .tag{margin:0 0 8px;color:var(--dim)}
#hud .small,.small{font-size:.82rem;color:var(--dim);margin:6px 0}
#hud .dyn{font-variant-numeric:tabular-nums;margin:8px 0}
.cityl{display:block;font-size:.85rem;color:var(--dim)}
#ticker{position:absolute;inset-block-start:16%;inset-inline:0;text-align:center;font:200 clamp(2.4rem,9vw,6rem) var(--sans);letter-spacing:.1em;color:rgba(255,255,255,.88);text-shadow:0 0 30px rgba(120,160,255,.6);pointer-events:none;font-variant-numeric:tabular-nums}
#lights{position:absolute;inset:0;pointer-events:none;z-index:6}
.light{position:absolute;transform:translate(-50%,0);pointer-events:auto;background:none;border:0;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;inline-size:min(19vw,150px);padding:4px;font:inherit}
.light .orb{display:block;inline-size:34px;block-size:34px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.96) 0 20%,rgba(var(--hue),.92) 32%,rgba(var(--hue),0) 72%);box-shadow:0 0 28px 8px rgba(var(--hue),.5);animation:breathe var(--dur,5.5s) ease-in-out infinite;display:grid;place-items:center;color:rgba(26,16,4,.82)}
.light .lname{font:600 .92rem var(--serif);text-align:center;text-shadow:0 1px 6px #000}
.light small{font-size:.72rem;color:#cfd6e6;text-align:center;text-shadow:0 1px 4px #000}
.light .lclock{font-variant-numeric:tabular-nums;color:#ffe3a6}
.light.near .orb{box-shadow:0 0 44px 16px rgba(var(--hue),.75)}
.light.unlit{opacity:.18;filter:grayscale(1)}
.light.lit{opacity:1;transition:opacity 1.2s,filter 1.2s}
.light.ignite .orb{animation:ignite 2.4s ease-out,breathe var(--dur,5.5s) 2.4s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.12);opacity:.88}}
@keyframes ignite{0%{transform:scale(.2);opacity:0}30%{transform:scale(2.6);opacity:1}100%{transform:scale(1)}}
body.inroom #water{visibility:hidden}
.overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(3,5,12,.62);padding:16px;overflow:auto}
.overlay.soft{background:rgba(3,5,12,.25)}
.overlay.solid{background:rgba(3,5,12,.94)}
.card{background:#0b1122;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;max-inline-size:560px;inline-size:100%;box-shadow:0 20px 60px #000}
.card.wide{max-inline-size:980px}
.card h2{font:600 1.5rem var(--serif);margin:.1em 0 .4em}
.card h3{font:600 1.05rem var(--serif);margin:.9em 0 .3em}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-block-start:12px;align-items:center}
.note{color:var(--dim);font-size:.92rem}
.held{border:1px dashed #c9a24a;border-radius:10px;padding:10px 12px;margin-block:10px;color:#f0dca8;background:rgba(201,162,74,.07)}
.chk{display:inline-flex;gap:8px;align-items:center;color:var(--dim)}
.stilllist{padding-inline-start:20px}
/* rooms */
.room{position:absolute;inset:0;overflow:hidden;background:#000;z-index:10}
.stage-cv{position:absolute;inset:0;inline-size:100%;block-size:100%;z-index:0}
.roomhead{position:absolute;inset-block-start:8px;inset-inline:10px;z-index:3;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.roomhead h2{font:600 1.3rem var(--serif);margin:0;text-shadow:0 1px 8px #000}
.roomhead small{color:#cfd6e6;text-shadow:0 1px 6px #000}
.panel{position:absolute;z-index:2;inset-inline:0;inset-block-end:0;margin-inline:auto;max-inline-size:760px;max-block-size:62%;overflow:auto;background:var(--glass);border:1px solid var(--line);border-radius:var(--r) var(--r) 0 0;padding:14px 18px;backdrop-filter:blur(8px)}
.room-christianity .panel,.room-islam .panel{max-block-size:46%}
.sacred{font:1.35rem/1.8 var(--serif);white-space:pre-wrap}
.srcline{font-size:.78rem;color:var(--dim);margin-block-end:4px}
.roomsrc{font-size:.72rem;color:#cfd6e6;text-shadow:0 1px 6px #000}
[lang=ar]{font-family:'Noto Naskh Arabic',var(--serif)}
.seg.dim,.ayah.dim,.ln.dim{opacity:1;color:var(--dim)}
.seg.on,.ayah.on,.ln.on{opacity:1;color:#ffe9b8;text-shadow:0 0 14px rgba(255,200,100,.55)}
.seg.done,.ayah.done,.ln.done{opacity:.75}
.seg,.ayah,.ln{transition:opacity 1.2s,color 1.2s}
.ayah{margin:.1em 0;font-size:1.6rem}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;font-size:1.05rem;line-height:1.55;max-block-size:30vh;overflow:auto}
.cols h3{margin:0 0 6px;font:600 .8rem var(--sans);color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
.chip{font:inherit;border-radius:999px;border:1px solid var(--line);background:#0d1426;color:var(--ink);padding:6px 12px;cursor:pointer;min-block-size:36px}
.chip[aria-pressed=true]{background:#2a2412;border-color:var(--gold);color:#ffe9b8}
.chip:disabled{opacity:.5;cursor:not-allowed}
.cells{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 10px}
.cells li{display:flex;flex-direction:column;max-inline-size:240px}
.cells small{color:var(--dim);font-size:.7rem}
.units{display:flex;flex-wrap:wrap;gap:8px}
.gloop-card{border-block-start:1px solid var(--line);margin-block-start:12px;padding-block-start:8px}
.gh{display:flex;gap:12px;align-items:center}
.ai-label{display:inline-block;font-size:.8rem;color:#9fe8c8;border:1px solid #2f9a78;border-radius:6px;padding:2px 8px;margin:2px 0}
.gloop-out{margin-block-start:8px;white-space:pre-wrap}
.toast{position:fixed;inset-block-end:16px;inset-inline:16px;margin-inline:auto;max-inline-size:480px;background:#2a1414;border:1px solid #c66;border-radius:10px;padding:10px 14px;z-index:90}
.folio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-block:12px}
.fp{margin:0}.fp canvas{inline-size:100%;block-size:auto;border:1px solid var(--line);border-radius:8px}
.fp figcaption{display:flex;gap:6px;flex-wrap:wrap;margin-block-start:6px}
.credits article{border-block-end:1px solid var(--line);padding-block:6px;overflow-wrap:anywhere}
.notice{white-space:pre-wrap;font-size:.7rem;color:var(--dim);max-block-size:140px;overflow:auto}
footer{padding:10px 14px;font-size:.78rem;color:var(--dim);border-block-start:1px solid var(--line);background:#050812}
footer p{margin:2px 0}
.legal{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.stale{color:#ffe3a6}
.ns{padding:20px}
[dir=rtl] .roomhead .btn{transform:none}
@media (max-width:720px){.hdr{padding:6px 8px}.doors a{padding:5px 8px;font-size:.8rem}.cols{grid-template-columns:1fr;max-block-size:none;overflow:visible}.light{inline-size:19vw}.light .lhour{display:none}.light .orb{inline-size:26px;block-size:26px}#hud{max-block-size:46vh;overflow:auto}.panel{max-block-size:70%}.sacred{font-size:1.15rem}}
/* rc1.5 MAJOR-1: on phones .cols no longer scrolls on its own; the .panel is the one scroll box. */
/* rc1.5 MAJOR-2: on phones a lit glow in the room hue sits between the frozen scene (z0) and the panel (z2) once .done is set. */
.room-christianity{--hue:255,200,120}.room-islam{--hue:110,200,220}.room-buddhism{--hue:240,160,200}.room-hinduism{--hue:255,150,70}.room-folk{--hue:200,120,80}
@media (max-width:720px){.room.done::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 95% 55% at 50% 24%,rgba(var(--hue),.62) 0,rgba(var(--hue),.30) 45%,rgba(var(--hue),.10) 75%,rgba(var(--hue),0) 100%)}.room.done .panel{max-block-size:56%}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
body.lapse #lights .light{pointer-events:none}

/* WOW pass */
.glyph{display:block;inline-size:16px;block-size:16px}.glyph svg{display:block;inline-size:100%;block-size:100%}
.overlay.gate{background:rgba(3,5,12,.48);backdrop-filter:blur(3px)}
.hbar{position:absolute;inset-inline:5%;inset-block-end:10px;block-size:44px;z-index:4;pointer-events:none}
.hbar .rail{position:relative;block-size:100%;border-block-end:1px solid var(--line)}
.hbar .tick{position:absolute;inset-block-end:-1px;font-size:.68rem;color:var(--dim);transform:translateX(-50%);padding-block-end:2px}
.hbar .tick[data-h="0"]{inset-inline-start:0}.hbar .tick[data-h="6"]{inset-inline-start:25%}.hbar .tick[data-h="12"]{inset-inline-start:50%}.hbar .tick[data-h="18"]{inset-inline-start:75%}
.hdot{position:absolute;inset-block-start:2px;inline-size:22px;block-size:22px;margin-inline-start:-11px;border-radius:50%;border:0;padding:3px;cursor:default;pointer-events:none;color:#1a1004;background:radial-gradient(circle,#fff 0 25%,rgba(var(--hue),.95) 60%,rgba(var(--hue),0) 100%);box-shadow:0 0 12px 3px rgba(var(--hue),.5)}
.hdot.near{box-shadow:0 0 22px 8px rgba(var(--hue),.85)}
.hdot .glyph{inline-size:100%;block-size:100%}
.nowm{position:absolute;inset-block:0;inline-size:2px;margin-inline-start:-1px;background:linear-gradient(transparent,#ffe3a6 40%,#ffe3a6);box-shadow:0 0 8px #ffe3a6}
body.lapse .hbar{opacity:.9}
.xveil{position:absolute;inset:0;z-index:30;pointer-events:none;background:radial-gradient(circle at var(--x) var(--y),rgba(var(--hue),.95) 0,rgba(var(--hue),.55) 18%,#02040a 60%);clip-path:circle(0 at var(--x) var(--y));animation:xin .8s cubic-bezier(.5,0,.2,1) forwards}
.xveil.out{animation:xout .8s ease-out forwards}
@keyframes xin{to{clip-path:circle(150% at var(--x) var(--y))}}
@keyframes xout{from{clip-path:circle(150% at var(--x) var(--y));opacity:1}to{clip-path:circle(150% at var(--x) var(--y));opacity:0}}
@media (prefers-reduced-motion:reduce){.xveil{display:none}}
.consent{display:flex;gap:8px;align-items:flex-start;margin-block-start:10px;font-size:.85rem;line-height:1.45}.consent.need{outline:2px solid #ffd27a;outline-offset:3px;border-radius:8px}
.ai-text{white-space:pre-wrap}
.skipbtn{position:absolute;inset-block-end:66px;inset-inline-end:16px;z-index:6}
.sacred [aria-current="true"]{text-decoration:underline;text-underline-offset:.18em}
/* SC 2.5.8: meet the 24px target by size, not only by spacing */
.doors a,.brand,footer .legal a,footer .legal .linkb{min-block-size:24px;display:inline-flex;align-items:center}
body.no-content #water{display:none}

/* fix2: RTL lights/ticks anchor on the right edge, so the centring shift mirrors (A2-a11y-2) */
[dir=rtl] .light,[dir=rtl] .hbar .tick{transform:translate(50%,0)}