@font-face{font-family:ThmanyahSans;src:url('assets/sans.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:ThmanyahSans;src:url('assets/sans-bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:ThmanyahDisplay;src:url('assets/display.woff2') format('woff2');font-weight:700;font-display:swap}
:root{color-scheme:dark;--bg:#050505;--surface:#151310;--ink:#f2ebdd;--muted:#b8b0a4;--accent:#c8a273;--line:#484035;--reading:700px;--wide:1120px;--body:clamp(18px,1.4vw,20px);--heading:clamp(36px,4.9vw,66px);--small:14px;--radius:4px;--ease:cubic-bezier(.2,.7,.3,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:94px}body{margin:0;background:var(--bg);color:var(--ink);font:var(--body)/1.95 ThmanyahSans,sans-serif;overflow-x:clip}button,input{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration-color:var(--accent);text-underline-offset:5px}a:hover{color:var(--accent)}button{cursor:pointer;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:var(--radius);padding:8px 18px}button:hover{border-color:var(--accent)}button:active{transform:translateY(1px)}:focus-visible{outline:2px solid var(--accent);outline-offset:5px}::selection{background:#8c693e;color:#fff}img{max-width:100%;display:block}h1,h2,h3,p,figure{margin:0}h1,h2{font-family:ThmanyahDisplay,ThmanyahSans,sans-serif;font-weight:700}h2{font-size:var(--heading);line-height:1.5}h3{font-size:clamp(23px,2.5vw,30px);line-height:1.7}p+p{margin-top:1.5em}.skip{position:fixed;top:-100px;right:20px;z-index:30;background:var(--ink);color:var(--bg);padding:8px}.skip:focus{top:8px}
/* Layers: scene 0, content 1, header 10, native dialog top layer. */
.site-header{position:fixed;inset:0 0 auto;z-index:10;display:flex;align-items:center;gap:20px;height:76px;padding:0 clamp(20px,4vw,72px);background:linear-gradient(#050505b8,#05050500);border-bottom:1px solid #f2ebdd12;backdrop-filter:blur(6px)}.brand img{width:36px;height:36px}.work-name{font-family:ThmanyahDisplay;font-size:24px;text-decoration:none}.site-header nav{display:flex;align-items:center;gap:24px;margin-inline-start:auto;font-size:var(--small)}.site-header button{border:0;padding:10px 0;min-height:44px}.site-header nav a{text-decoration:none;padding:10px 0}.opening{position:relative;min-height:135svh;isolation:isolate}.room{position:sticky;top:0;height:100svh;z-index:-1;overflow:hidden;margin-bottom:-100svh}.room picture,.room img{width:100%;height:100%;object-fit:cover}.room-shade{position:absolute;inset:0;background:linear-gradient(90deg,transparent 15%,#05050518 50%,#0505059c 100%),linear-gradient(0deg,var(--bg),transparent 30%)}.hero{min-height:100svh;max-width:1600px;margin:auto;display:flex;align-items:center;padding:90px 9vw 30px}.hero-copy{width:46%;max-width:620px}.hero h1{font-size:clamp(112px,13vw,188px);line-height:1.3}.hero-sub{font-size:clamp(26px,3vw,42px);line-height:1.6;margin-top:12px}.hero-description{color:var(--muted);font-size:clamp(16px,1.4vw,20px);margin-top:24px;line-height:1.9}.start{display:inline-flex;gap:28px;align-items:center;font-size:16px;margin-top:36px;padding:10px 0;text-decoration:none;border-bottom:1px solid var(--accent)}.start span{font-size:24px;color:var(--accent)}.opening-bridge{padding:40px 24px 100px;text-align:center;font-family:ThmanyahDisplay;font-size:clamp(30px,4vw,48px);line-height:1.9}.opening-bridge span{color:var(--muted)}
.prose{width:min(var(--reading),calc(100% - 48px));margin-inline:auto}.prose p{margin-bottom:1.5em}.prose p+p{margin-top:0}.prose h3{margin:2.5em 0 1em}.prose strong{font-weight:700}.prose .thought{font-size:1.1em;color:var(--ink);margin-top:2em}.prose i,.prose em{font-style:normal;color:var(--ink)}.introduction{padding:45px 0 100px}.introduction h3:first-child{margin-top:0;font-family:ThmanyahDisplay;font-size:clamp(30px,4vw,44px);margin-bottom:45px}.chapter{padding:105px 0 40px}.chapter-heading{width:min(var(--wide),calc(100% - 48px));margin:0 auto 58px}.chapter-heading h2{max-width:850px}.chapter-5 .chapter-heading{max-width:900px;text-align:center}.chapter-5 .prose .thought:first-of-type{font-family:ThmanyahDisplay;font-size:30px}.chapter-12{background:linear-gradient(0deg,var(--bg),#12100d 50%,var(--bg))}.chapter-12 .chapter-heading{max-width:var(--reading)}.citation{font-size:12px;vertical-align:super;line-height:0;margin-inline:5px}.citation a{color:var(--accent);padding:7px 3px;text-decoration:none}.quran{padding:40px 0;border-block:1px solid var(--line);margin:48px 0!important;background:var(--bg);color:var(--ink)}.quran-text{display:block;font-size:clamp(26px,2.9vw,36px);line-height:2.1}.quran strong{font-size:16px;color:var(--accent);display:inline-block;margin-top:22px}.quran .citation{line-height:1.6}.scene{width:min(1300px,100%);margin:50px auto 70px}.scene img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}.scene figcaption,.documentary figcaption{font-size:13px;line-height:1.9;color:var(--muted);padding:18px 24px;max-width:900px;margin:auto}.chapter-6 .scene img{mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}.documentary{max-width:var(--wide);margin:40px auto 55px}.documentary img{width:100%;height:auto;object-fit:contain}.dolphin{max-width:820px}.dolphin img{border-radius:var(--radius)}.study-layout{max-width:var(--wide);width:calc(100% - 48px);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:64px;margin:60px auto}.study-layout figure{margin:0;width:100%;max-width:400px}.study-layout img{max-height:540px;object-fit:contain}.study-layout .visual-statement{font-family:ThmanyahDisplay;font-size:clamp(32px,3.3vw,48px);line-height:1.8}.study-layout p+p{color:var(--muted);font-size:18px}.study-layout figcaption{padding-inline:0}
.explorer{width:min(960px,calc(100% - 48px));margin:65px auto 20px;padding:36px clamp(20px,4vw,54px);background:var(--surface);border:1px solid #f2ebdd13;border-radius:var(--radius)}.explorer-title{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:25px}.explorer-title h3{font-size:25px}.explorer-title span{font-size:12px;color:var(--muted);white-space:nowrap}.explorer .choices{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 30px}.choices button{font-size:15px;min-height:44px}.choices button[aria-pressed=true]{border-color:var(--accent);background:#c8a27320;color:var(--ink)}.diagram{display:block;width:100%;height:auto;overflow:visible;direction:ltr}.diagram path,.diagram line,.diagram polyline{vector-effect:non-scaling-stroke}.diagram text{font-family:ThmanyahSans;fill:var(--muted);font-size:16px}.diagram .curve{stroke:var(--accent);stroke-width:2;fill:none}.diagram .secondary{stroke:var(--ink);opacity:.7}.diagram .grid{stroke:#484035;stroke-width:1}.diagram .label{font-size:18px;fill:var(--ink)}.explanation{font-size:18px;min-height:4em;margin:18px 0 14px}.explorer small{font-size:13px;color:var(--muted);display:block;line-height:1.9}.explorer label{font-size:16px;display:block;margin:20px 0 12px}.explorer input[type=range]{width:100%;accent-color:var(--accent);direction:ltr;min-height:32px;cursor:pointer}.explorer input[type=checkbox]{accent-color:var(--accent);width:18px;height:18px;margin-inline-end:8px}.explorer output{display:block;font-size:16px;color:var(--accent)}.big-reading{font-size:clamp(22px,2.6vw,30px);line-height:1.8;min-height:6em;padding:20px 0 30px}.clock-pair{display:flex;align-items:center;gap:25px;font-size:clamp(32px,5vw,62px);font-variant-numeric:tabular-nums}.clock-line{height:1px;background:var(--line);flex:1}.overlap-rows>div{display:flex;justify-content:space-between;gap:24px;padding:22px 0;border-bottom:1px solid var(--line);font-size:20px}.overlap-rows>div span:last-child{color:var(--accent)}.response-track{display:flex;gap:8px;height:145px;align-items:end;padding:20px 0}.response-track span{flex:1;background:var(--accent);height:30px;transition:height .3s ease}.response-track .miss{background:transparent;border:1px dashed var(--muted)}
.ending{position:relative;margin-top:130px;padding:0 0 80px}.dawn-scene{height:65vw;max-height:800px;overflow:hidden;mask-image:linear-gradient(transparent,#000 18%,#000 75%,transparent);margin-bottom:-60px}.dawn-scene img{width:100%;height:100%;object-fit:cover}.ending .chapter-heading{max-width:var(--reading)}.tasbih{font-family:ThmanyahDisplay;font-size:clamp(58px,8vw,110px);text-align:center;margin:80px 0!important}.next-journey{position:relative;isolation:isolate;padding:130px 24px 110px;max-width:1400px;margin:auto;text-align:center}.next-stars{position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--bg),#050505c0,var(--bg)),url('assets/sky.jpg') center/cover}.next-journey .prose{width:min(var(--reading),100%)}.next-link{font-family:ThmanyahDisplay;font-size:clamp(60px,10vw,125px);text-decoration:none;display:block;line-height:1.5;margin-top:42px}.next-link span{display:block;font:16px/2 ThmanyahSans;color:var(--accent)}.sources{width:min(var(--wide),calc(100% - 48px));margin:40px auto 100px}.sources details{border-top:1px solid var(--line);padding:24px 0}.sources summary{cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:22px;min-height:44px}.sources summary span+span{font-size:14px;color:var(--muted)}.sources summary::marker{content:''}.sources ol{padding-inline-start:28px;margin-top:30px}.sources li{font-size:15px;overflow-wrap:anywhere;margin:0 0 25px;padding:12px 8px;scroll-margin-top:100px}.sources li:target{background:var(--surface);outline:1px solid var(--accent)}.sources li::marker{color:var(--accent)}.source-link{direction:auto}.backlinks{display:inline-flex;gap:12px;margin-inline-start:16px;color:var(--accent)}.backlinks a{padding:8px;text-decoration:none}.sources details p{font-size:16px;margin-top:24px;color:var(--muted)}footer{padding:38px max(24px,5vw);border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:25px;font-size:14px}.footer-brand{display:flex;align-items:center;gap:20px;text-decoration:none}dialog{background:#10100e;color:var(--ink);border:1px solid var(--line);width:min(650px,calc(100% - 30px));max-height:85svh;padding:28px;overscroll-behavior:contain}dialog::backdrop{background:#000a;backdrop-filter:blur(10px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:22px}.dialog-title{font:700 30px/1.5 ThmanyahDisplay;margin:0}dialog nav{display:grid;gap:8px}dialog nav a{padding:10px 8px;font-size:18px;text-decoration:none}dialog nav a:hover{background:#c8a27315}dialog button{font-size:14px}.dialog-tools{display:flex;align-items:center;gap:22px;border-top:1px solid var(--line);margin-top:22px;padding-top:18px}.dialog-tools a,.dialog-tools button{min-height:44px;display:inline-flex;align-items:center;color:var(--ink);text-decoration:none}
@supports(animation-timeline:scroll()){@media(prefers-reduced-motion:no-preference){body:not(.motion-off) .room picture{display:block;animation:room-in linear both;animation-timeline:scroll();animation-range:0px 110vh}body:not(.motion-off) .hero-copy{animation:hero-out linear both;animation-timeline:scroll();animation-range:0px 85vh}}}
@keyframes room-in{from{transform:scale(1);opacity:1}to{transform:scale(1.05);opacity:.18}}@keyframes hero-out{from{transform:translateY(0);opacity:1}to{transform:translateY(-60px);opacity:0}}
@media(max-width:767px){.site-header{height:68px;gap:12px;padding-inline:18px}.site-header nav{gap:15px;font-size:12px}.brand img{width:30px;height:30px}.work-name{font-size:21px}.hero{align-items:start;padding:110px 28px 35px;min-height:94svh}.hero-copy{width:100%;max-width:440px}.hero h1{font-size:112px}.hero-sub{font-size:30px}.hero-description{font-size:16px}.room picture,.room img{object-position:35% center}.room-shade{background:linear-gradient(0deg,var(--bg),#05050518 22%,#05050566 58%,#050505a3)}.opening{min-height:125svh}.opening-bridge{padding:35px 24px 70px}.prose{width:calc(100% - 44px)}.chapter{padding-top:72px}.chapter-heading{width:calc(100% - 44px);margin-bottom:35px}.chapter-heading h2{line-height:1.5}.study-layout{grid-template-columns:1fr;gap:28px}.study-layout figure{max-width:340px;margin:auto}.study-layout .visual-statement{font-size:32px}.scene{margin:28px auto 40px}.scene img{aspect-ratio:4/3}.explorer{width:calc(100% - 28px);padding:26px 18px}.explorer-title{display:block}.explorer-title h3{font-size:23px}.explorer-title span{display:block;margin-top:8px}.choices button{padding:8px 12px;font-size:14px}.explanation{font-size:16px}.big-reading{font-size:23px;min-height:7em}.overlap-rows>div{font-size:17px}.dawn-scene{height:90vw;margin-bottom:10px}.ending{margin-top:70px}.next-journey{padding:80px 24px}.sources{width:calc(100% - 40px)}.sources summary{font-size:20px}.sources li{font-size:14px}footer{align-items:start;flex-direction:column}.quran-text{font-size:27px;line-height:2}.quran{padding:30px 0}.tasbih{font-size:68px}.clock-pair{font-size:38px}.diagram text{font-size:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.room{position:absolute;width:100%}}body.motion-off{scroll-behavior:auto}body.motion-off *,body.motion-off *::before,body.motion-off *::after{animation:none!important;transition:none!important}html:has(body.motion-off){scroll-behavior:auto}
@media print{.site-header,.opening,.explorer,.scene,.documentary,.next-journey,footer,dialog{display:none}body{background:white;color:black}.prose,.chapter-heading{width:100%}.quran{color:black;background:white}.sources details:not([open])>*{display:block}.chapter{padding:30px 0}.sources{width:100%}}
.chapter-transition{margin-top:65px;margin-bottom:35px}.chapter-transition .thought{color:var(--accent);font-size:clamp(22px,2.4vw,29px);font-family:ThmanyahDisplay}.chapter-transition .thought strong{font-weight:700}@media(max-width:767px){.room-shade{background:linear-gradient(90deg,#05050505,#05050575),linear-gradient(0deg,var(--bg),#05050518 22%,#05050550 58%,#050505a3)}}
@media(max-width:767px){.diagram text{font-size:30px}.diagram .label{font-size:30px}}
.window-transition{height:55vh;max-height:650px;overflow:hidden;position:relative;margin-top:-25px;mask-image:linear-gradient(transparent,#000 25%,#000 60%,transparent)}.window-transition img{width:100%;height:100%;object-fit:cover;object-position:left center;transform:scale(1.25);transform-origin:18% 40%;opacity:.6}@supports(animation-timeline:view()){@media(prefers-reduced-motion:no-preference){body:not(.motion-off) .window-transition img{animation:window-open linear both;animation-timeline:view();animation-range:entry 0% exit 100%}}}@keyframes window-open{from{transform:scale(1.2);opacity:.15}45%{opacity:.6}to{transform:scale(1.9);opacity:0}}@media(max-width:767px){.window-transition{height:38vh}.window-transition img{object-position:16% center}}