/* Riwaq Obaid: sandstone niche design. Warm stone, carved arches, sunlight through a lattice. */
:root{--head:#4b111b;--stone:#ead9b9;--stone-deep:#d7bf94;--lime:#f7eedc;--wine:#4b111b;--wine-2:#6a1d2a;--gold:#a77f3c;--gold-lt:#e2c47f;--olive:#566236;--ink:#2b1c16;--soft:#6a5444;--lattice:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'%3E%3Cg fill='none' stroke='%236b4721' stroke-width='14' stroke-linejoin='round'%3E%3Cpath d='M95 8L124 66 182 95 124 124 95 182 66 124 8 95 66 66Z'/%3E%3Ccircle cx='0' cy='0' r='36'/%3E%3Ccircle cx='190' cy='0' r='36'/%3E%3Ccircle cx='0' cy='190' r='36'/%3E%3Ccircle cx='190' cy='190' r='36'/%3E%3C/g%3E%3Ccircle cx='95' cy='95' r='10' fill='%236b4721'/%3E%3C/svg%3E");--arch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='64' viewBox='0 0 120 64' fill='none' stroke='%23a77f3c' stroke-width='2'%3E%3Cpath d='M10 62V34C10 14 34 4 60 4s50 10 50 30v28'/%3E%3Cpath d='M22 62V36C22 22 40 14 60 14s38 8 38 22v26' opacity='.6'/%3E%3Cpath d='M60 22l5 8 9 1-6 6 2 9-10-5-10 5 2-9-6-6 9-1z' fill='%23a77f3c' stroke='none'/%3E%3C/svg%3E")}
html{background:#e9d7b4}
body{background:transparent!important;isolation:isolate;color:var(--ink)}
body::before{content:'';position:fixed;inset:-10% -10%;z-index:-2;pointer-events:none;background:linear-gradient(180deg,#f6ead2 0%,#ead8b6 55%,#dcc59b 100%)}
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:var(--lattice);background-size:190px 190px;opacity:.07;transform:skewX(-14deg) rotate(-3deg) scale(1.25);filter:blur(1.4px);-webkit-mask-image:linear-gradient(270deg,#000,transparent 80%);mask-image:linear-gradient(270deg,#000,transparent 80%)}
/* Library: sunlight through the lattice, the one big moment */
body.library-mode::after{opacity:.2;animation:light-enter 2.4s cubic-bezier(.2,.7,.2,1) both,light-drift 38s ease-in-out 2.4s infinite alternate}
body.library-mode::before{background:radial-gradient(ellipse at 88% 8%,#fff6dd 0,transparent 42%),linear-gradient(180deg,#f7ecd4 0%,#ecd9b6 60%,#dcc59b 100%)}
.library-mode header{background:#f7eedcd9;backdrop-filter:blur(16px);border-bottom:3px double var(--gold);color:var(--head);padding:16px max(24px,calc((100vw - 1240px)/2))}
.library-mode .brand{color:var(--head);font-size:2.2rem}.library-mode .brand span{color:var(--soft)}
.library-mode header nav{border:1px solid #a77f3c88;padding:4px;border-radius:30px;background:#fff7e6aa}
.library-mode header nav button{color:var(--head);border-radius:24px}.library-mode header nav button:hover{background:#ead9b9}.library-mode header nav [aria-pressed=true]{background:var(--wine);color:#f4dca0;border-color:var(--wine)}
.library-mode main{max-width:1320px;background:transparent;border:0;box-shadow:none;padding:30px 28px 56px;min-height:75vh}
.library-intro{text-align:center;margin:0 auto 18px;max-width:760px}
.library-intro::before{content:'';display:block;height:64px;margin:0 auto 4px;background:var(--arch) center/auto 64px no-repeat;animation:fade-in 1.2s .5s both}
.library-intro .eyebrow{color:var(--gold);font-size:1rem;display:block}
.library-intro h1{color:var(--head);font-size:clamp(2rem,4.6vw,3.5rem);line-height:1.6;margin:6px 0;text-shadow:0 1px 0 #fff8e6;animation:ink-in 1.5s cubic-bezier(.3,.7,.2,1) .3s both}
.library-intro p{color:var(--soft);font-size:1.125rem;animation:fade-in 1.2s 1s both}
/* Niches */
.book-shelf{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px;perspective:1400px;padding:26px 6px 44px;position:relative}
.shelf-card{min-width:0;position:relative;animation:niche-rise 1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(1.1s + var(--i)*.15s)}
.card-surface{position:relative;border:0;border-radius:50% 50% 16px 16px/20% 20% 16px 16px;background:radial-gradient(ellipse at 50% 22%,#f6ebd2,#e0cba2 70%,#d3b98b);padding:34px 20px 22px;box-shadow:inset 0 26px 34px -14px #6b47226e,inset 0 -8px 14px #fff4dc99,0 0 0 6px #f3e6c9,0 0 0 7.5px var(--gold),0 26px 40px -16px #4b2c1070;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s ease,box-shadow .45s;overflow:hidden}
.card-surface::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--px,50%) var(--py,25%),#fff3c8aa,transparent 52%);opacity:0;transition:opacity .4s}
.card-surface::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,#fffbe880 48%,transparent 60%);transform:translateX(-140%);animation:card-sheen 14s ease-in-out infinite;animation-delay:calc(var(--i)*1.3s + 3s)}
.shelf-count{font-size:.875rem;color:var(--olive);display:block;text-align:center;font-weight:600}
.book-stage{height:clamp(240px,24vw,320px);display:flex;align-items:center;justify-content:center;perspective:800px;position:relative;margin:10px 0 24px}
.book-stage::before{content:'';position:absolute;left:-20px;right:-20px;bottom:-12px;height:18px;border-radius:3px;background:linear-gradient(180deg,#fbf3e0,#e7d3ab 70%,#cfb384);box-shadow:0 8px 12px -4px #4b2c1066,inset 0 1px #fff}
.book-stage::after{content:'';position:absolute;width:80%;height:14px;bottom:4px;background:#3a2208;opacity:.35;filter:blur(11px);border-radius:50%;transition:opacity .4s,transform .4s}
.book-object{position:relative;width:78%;aspect-ratio:.72;max-height:100%;transform:rotateY(-10deg) rotateZ(-1deg);transform-origin:50% 80%;filter:drop-shadow(10px 12px 9px #3a220899);transition:transform .7s cubic-bezier(.2,.8,.2,1);animation:book-breathe 7s ease-in-out infinite;animation-delay:calc(var(--i)*-1.1s)}
.book-object:not(.scene-book){border-radius:2px 5px 5px 2px;box-shadow:4px 1px 0 #d9ccb2,7px 2px 0 #6b5547;overflow:hidden}
.book-object img{display:block;width:100%;height:100%;object-fit:fill}.scene-book img{position:absolute;width:280%;height:auto;max-width:none;left:-35%;top:-12%;clip-path:polygon(12.6% 11%,16.2% 9.5%,48.3% 13.8%,48.2% 81.5%,16% 83%,12.5% 81%)}
.shelf-copy{text-align:center;position:relative;z-index:1}.shelf-copy h2{font-size:1.4rem;line-height:1.7;color:var(--head);margin:6px 0 2px}.shelf-copy p{font-size:.9375rem;color:var(--soft);line-height:1.8;min-height:3.6em;margin:2px 0 14px}
.shelf-open{border:3px double #c49b52;border-radius:8px;min-height:48px;width:100%;font-size:1.0625rem;color:#f4dca0;background:var(--wine);position:relative;transition:background .3s,box-shadow .3s,transform .3s}
.shelf-open:hover{background:var(--wine-2)}.shelf-card:focus-within .card-surface{box-shadow:inset 0 26px 34px -14px #6b47226e,0 0 0 6px #f3e6c9,0 0 0 8px var(--wine),0 26px 40px -16px #4b2c1070}.shelf-open:focus-visible{outline:3px solid var(--olive);outline-offset:4px}
@media(hover:hover) and (pointer:fine){.shelf-card:hover{z-index:2}.shelf-card:hover .card-surface{box-shadow:inset 0 26px 34px -14px #6b47226e,inset 0 0 50px #fff0c4cc,0 0 0 6px #f3e6c9,0 0 0 7.5px #c49b52,0 34px 48px -16px #4b2c1088}.shelf-card:hover .card-surface::before{opacity:1}.shelf-card:hover .book-object{animation-play-state:paused;transform:translateY(-12px) rotateY(0) rotateZ(0)}.shelf-card:hover .book-stage::after{opacity:.55;transform:scaleX(1.12)}.shelf-card:hover .shelf-open{background:linear-gradient(110deg,var(--wine),var(--wine-2),var(--wine));box-shadow:0 6px 16px #4b111b55}}
.library-divider{display:flex;align-items:center;gap:22px;color:var(--gold);justify-content:center;margin:6px 0 24px;font-size:1.2rem}.library-divider::before,.library-divider::after{content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.library-mode .dialogue-book{background:#fbf4e3;border:1px solid #c9a766;color:var(--ink);border-radius:80px 80px 14px 14px/46px 46px 14px 14px;padding:26px 30px 20px;max-width:720px;margin:auto;box-shadow:0 0 0 5px #f3e6c9,0 0 0 6px #c9a766,0 18px 30px -14px #4b2c1066;transition:transform .4s,box-shadow .4s}.library-mode .dialogue-book:hover{transform:translateY(-4px);background:#fffaf0}.library-mode .dialogue-book strong{font-size:1.4rem;color:var(--head)}.library-mode .dialogue-book .quiet,.library-mode .availability{color:var(--soft)}.library-mode .collection-number{color:var(--gold)}
.library-mode footer{background:var(--wine);color:#e2c47f;border-top:3px double var(--gold)}.swipe-hint{display:none}
/* Reading pages: same stone, carved tablets */
body:not(.library-mode) main{background:#fbf4e3;border:1px solid #c9a766;box-shadow:0 30px 70px -24px #4b2c1066;border-radius:6px}
body:not(.library-mode) .unit{background:var(--lime);border:1px solid #cfb27a;border-radius:14px;margin:0 0 14px;padding:20px 22px;position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
body:not(.library-mode) .unit-grid{border-top:0;gap:0 22px}
body:not(.library-mode) .unit::before{content:'';position:absolute;inset-block:0;inset-inline-start:0;width:5px;background:linear-gradient(180deg,var(--gold),var(--wine))}
body:not(.library-mode) .unit:hover{transform:translateY(-4px);box-shadow:0 16px 26px -14px #4b2c1077;border-color:var(--gold)}
.unit .tag,.tag{border-color:#9aa36f;color:var(--olive);background:#f2f0dc}.tag.pending{border-color:#ba7042;color:#813c19;background:#fbeadb}
.back{border-radius:30px;background:var(--wine);color:#f4dca0;border-color:var(--wine)}.back:hover{background:var(--wine-2)}
.answer-group{border-radius:12px;border-inline-start:4px solid var(--gold);background:#fffdf6;transition:box-shadow .3s}.answer-group[open]{box-shadow:0 14px 26px -18px #4b2c1066}
.section-heading h1,.section-heading h2,#unit-heading h1{color:var(--head)}
.primary{background:var(--wine);color:#f4dca0}
@keyframes light-enter{from{opacity:0;clip-path:inset(0 0 0 100%)}to{opacity:.2;clip-path:inset(0)}}
@keyframes light-drift{from{transform:skewX(-14deg) rotate(-3deg) scale(1.25) translate(0,0)}to{transform:skewX(-14deg) rotate(-3deg) scale(1.25) translate(-90px,36px)}}
@keyframes ink-in{from{clip-path:inset(-1em -.5em -1em 100%);opacity:.2}to{clip-path:inset(-1em -.5em -1em -.5em);opacity:1}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes niche-rise{from{opacity:0;transform:translateY(46px) scale(.96)}to{opacity:1;transform:none}}
@keyframes book-breathe{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes card-sheen{0%,62%{transform:translateX(-140%)}88%,100%{transform:translateX(140%)}}
@media(max-width:1000px) and (min-width:701px){.book-shelf{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.card-surface{padding:30px 12px 18px}.book-stage{height:240px}.book-object{width:88%}.shelf-copy h2{font-size:1.15rem}.shelf-copy p{min-height:5.4em}}
@media(max-width:700px){.library-mode header{padding:14px 16px;gap:10px;flex-wrap:wrap}.library-mode .brand{font-size:1.7rem}.library-mode header nav button{padding:4px 10px;font-size:.875rem}.library-mode main{padding:20px 0 34px;overflow:hidden}.library-intro{padding:0 20px}.library-intro h1{font-size:1.9rem}.book-shelf{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:30px;padding:28px 30px 40px;gap:24px;perspective:none;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#a77f3c transparent}.shelf-card{flex:0 0 min(74vw,320px);scroll-snap-align:center}.book-stage{height:285px}.book-object{width:66%;max-width:210px}.shelf-copy p{min-height:0}.swipe-hint{display:block;text-align:center;color:var(--soft);font-size:.9375rem;margin:0 0 20px}.library-divider{margin-inline:24px}.library-mode .dialogue-book{width:calc(100% - 48px);padding:24px 16px 16px;gap:16px}body:not(.library-mode) main{border-radius:0}}
@media(max-width:360px){.book-stage{height:245px}.library-intro h1{font-size:1.65rem}}
body.paused .card-surface,body.paused .book-object{transform:none!important;transition:none!important}body.paused *,body.paused *::before,body.paused *::after,body.paused::before,body.paused::after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.card-surface,.book-object{transform:none!important;translate:none!important}}
::view-transition-old(root){animation:library-close .26s ease both}::view-transition-new(root){animation:library-open .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes library-close{to{opacity:0;transform:scale(1.02)}}@keyframes library-open{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none!important}}
/* Listen buttons */
.speak{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:36px;height:36px;min-height:36px;padding:0;margin-inline-end:.5em;border-radius:50%;border:1px solid #c49b52;background:#fbf1d9;color:var(--head);transition:background .25s,color .25s,transform .25s,box-shadow .25s;flex:none}
.speak:hover{background:var(--wine);color:#f4dca0;transform:scale(1.07)}.speak:focus-visible{outline:3px solid var(--olive);outline-offset:3px}
.speak.speaking{background:var(--wine);color:#f4dca0;box-shadow:0 0 0 4px #a77f3c55}
.speak .w1,.speak .w2{opacity:.35}.speak.speaking .w1{animation:wave 1s ease-in-out infinite}.speak.speaking .w2{animation:wave 1s ease-in-out .25s infinite}
@keyframes wave{0%,100%{opacity:.25}50%{opacity:1}}
.word-card h3 .speak,.lesson-heading h1 .speak,#unit-heading h1 .speak{width:40px;height:40px}
.speak-toast{position:fixed;inset-inline:16px;bottom:max(18px,env(safe-area-inset-bottom));max-width:520px;margin:auto;padding:12px 18px;border-radius:12px;background:var(--wine);color:#f4dca0;font-size:.9375rem;line-height:1.8;box-shadow:0 14px 30px #0005;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .3s,transform .3s;z-index:50}
.speak-toast.show{opacity:1;transform:none}
.speak-toast.show{pointer-events:auto}.speak-toast a{display:inline-block;min-height:44px;line-height:44px;color:#f4dca0;text-decoration:underline;text-underline-offset:4px;font-weight:700}

/* Phone polish */
#motion{display:inline-flex;align-items:center;justify-content:center}#motion .play{display:none}#motion[aria-pressed=true] .play{display:inline}#motion[aria-pressed=true] .bars{display:none}
@media(max-width:700px){
 body:not(.library-mode) header{padding:10px 14px 8px;gap:6px}
 body:not(.library-mode) .brand{font-size:1.45rem;line-height:1.4}body:not(.library-mode) .brand span{display:none}
 body:not(.library-mode) header nav{border-top:0;padding-top:0}body:not(.library-mode) header nav button{min-height:40px;padding:4px 12px}
 body:not(.library-mode) main{padding:14px 12px 40px;border-inline:0}
 #unit-view{border:0;padding:6px 0;background:none}#unit-view::after{display:none}
 .section-heading{margin:20px 0 12px}.unit{padding:16px 16px}
 .lesson-summary p,.composition-prose p{display:flow-root}.lesson-summary p .speak,.composition-prose p .speak{float:inline-start;margin-top:4px;margin-inline-end:10px}
 .answers li{display:flow-root}.answers li .speak{float:inline-start;margin-inline-end:10px;margin-top:2px}
 .answer-body{padding:12px}.question-block{padding:12px 10px}
 .speak{width:40px;height:40px;min-height:40px}
}
@media(max-width:700px){body:not(.library-mode) .brand{display:inline-flex;align-items:center;min-height:44px;padding:0 12px}}

/* Theme toggle */
#theme{display:inline-flex;align-items:center;justify-content:center;min-width:44px}#theme .ico-sun{display:none}html[data-theme=dark] #theme .ico-sun{display:inline}html[data-theme=dark] #theme .ico-moon{display:none}
/* Readable gold text on light paper */
.eyebrow,.library-intro .eyebrow,.library-divider,.library-mode .collection-number{color:#7a5a20}

/* Volume 3 uses a centered front cover, unlike the older angled scene assets.
   Isolate its full 585 x 922 cover bounds without the scene-book polygon. */
.book-object.qasas3-cover{aspect-ratio:585/922;overflow:hidden;border-radius:4px}
.book-object.qasas3-cover img{position:absolute;max-width:none;width:262.5641%;height:111.0629%;left:-81.1966%;top:-6.0738%;object-fit:fill;clip-path:none}