*{box-sizing:border-box}html{color-scheme:dark;background:#161511;scroll-behavior:smooth}body{margin:0;color:#fff8e9;font-family:Georgia,'Times New Roman',serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible{outline:2px solid #f5d8a4;outline-offset:6px}button{min-height:44px}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5}.art-world{position:fixed;inset:0;z-index:0;overflow:hidden;background:#161511}.art-clear>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform,opacity;transform-origin:center;opacity:0}.art-clear>img:first-child{opacity:1}.reading-shade{position:absolute;inset:0;background:linear-gradient(180deg,#0009,transparent 25%,transparent 42%,#0008 90%),linear-gradient(90deg,#000a,transparent 82%);transition:background .6s}.text-right .reading-shade{background:linear-gradient(180deg,#0009,transparent 25%,transparent 42%,#0008 90%),linear-gradient(270deg,#000a,transparent 82%)}.immersive-header{position:fixed;z-index:10;top:0;left:0;right:0;padding:18px 4vw;display:flex;align-items:center;gap:24px;background:linear-gradient(#0008,transparent);text-shadow:0 1px 8px #000}.immersive-header button:first-child{display:grid;place-items:center}.immersive-header #chapter-control{font-size:20px;letter-spacing:.5px}.immersive-header #chapter-control span{font:14px Arial;margin-left:7px}.edition-label{margin-left:auto;font:12px/1.5 Arial,sans-serif;letter-spacing:2px;color:#eee2ce}.verse-scene{position:relative;z-index:1;min-height:100svh;display:flex;align-items:flex-end;padding:24vh 9vw 19vh;background-image:linear-gradient(#0003,#0007),var(--scene-image);background-size:cover;background-position:center}.js-motion .verse-scene{background:none}.scripture{width:min(580px,48vw);text-shadow:0 2px 14px #000,0 1px 3px #000;position:relative}.scripture::before{content:'';position:absolute;inset:-30px -34px;z-index:-1;background:radial-gradient(ellipse,#0005,transparent 72%);pointer-events:none}.verse-reference{font:12px/1.5 Arial,sans-serif;letter-spacing:2.4px;color:#e9d5b4;margin-bottom:22px}.scripture p{font-size:clamp(24px,2.25vw,36px);line-height:1.46;margin:0 0 20px;letter-spacing:-.3px;text-wrap:pretty}.scripture sup{font:12px/1 Arial,sans-serif;margin-right:8px;color:#e5cba3;vertical-align:super}.verse-scene.right{justify-content:flex-end}.verse-scene.middle{align-items:center}.verse-scene.top{align-items:flex-start}.immersive-footer{position:fixed;left:0;right:0;bottom:0;z-index:10;padding:18px 4vw 22px;display:flex;align-items:center;justify-content:space-between;gap:30px;background:linear-gradient(transparent,#000b);text-shadow:0 1px 6px #000;font:12px/1.5 Arial,sans-serif}.immersive-footer button{text-align:left;max-width:65%;padding:0}.immersive-footer #artist-label{display:block;font-size:13px;letter-spacing:.5px}.immersive-footer #artwork-title{display:block;opacity:.7;font-size:12px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.reading-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:#fff2}.reading-progress i{display:block;width:0;height:100%;background:#e9d5b4}.end-scene{position:relative;z-index:1;min-height:100svh;display:grid;place-items:center;padding:15vh 8vw;text-align:center;background:#0004}.end-scene h1{font-size:clamp(36px,5vw,68px);font-weight:400}.end-scene button,.end-scene a{display:block;margin:20px auto;font:15px/1.5 Arial,sans-serif;text-underline-offset:5px}.end-scene button{border:1px solid #fff6;padding:12px 22px}dialog{color:#f8f0df;background:#25231e;border:1px solid #c1a77a44;padding:30px;width:min(600px,calc(100% - 32px));max-height:85svh;overflow:auto;box-shadow:0 24px 100px #0008}dialog::backdrop{background:#0009;backdrop-filter:blur(8px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;font:12px Arial,sans-serif;letter-spacing:2px}.dialog-top button{font-size:30px;line-height:1;width:44px}dialog h2{font-size:28px;font-weight:400;margin:26px 0 18px}dialog p{font:15px/1.6 Arial,sans-serif;color:#d2c8b7}.version-options{display:grid;gap:8px}.version-options a{display:flex;gap:20px;padding:18px;text-decoration:none;border:1px solid #b8a48444;align-items:center;font-size:22px}.version-options a[aria-current]{background:#e9d5b414;border-color:#e9d5b4}.version-options a>span{font:12px Arial;color:#c2a878}.version-options small{display:block;font:14px Arial;color:#c9bfad;margin-top:8px}.version-options b{margin-left:auto;font-size:16px}.chapter-link{display:flex;justify-content:space-between;width:100%;padding:12px 0;border-bottom:1px solid #fff2;font-size:19px}.chapter-link span{font:14px/1.6 Arial;color:#d2c8b7}.sources-link{margin-top:22px;text-decoration:underline;text-underline-offset:4px;font:15px Arial}.menu-note{margin-bottom:0}.immersive-credits article{display:grid;grid-template-columns:95px 1fr;gap:18px;padding:24px 0;border-bottom:1px solid #fff2}.immersive-credits img{width:95px;height:120px;object-fit:cover}.immersive-credits h3{font-size:20px;font-weight:400;margin:0}.immersive-credits p{margin:8px 0;font-size:13px}.immersive-credits a{font:14px Arial}
@media(max-width:650px){.immersive-header{padding:12px 20px;gap:14px}.immersive-header #chapter-control{font-size:18px}.edition-label{font-size:11px;letter-spacing:1.5px}.verse-scene{padding:26vh 26px 18vh;min-height:100svh;align-items:flex-end}.scripture{width:100%;max-width:440px}.scripture p{font-size:25px;line-height:1.43;margin-bottom:19px}.verse-reference{font-size:12px;margin-bottom:18px;letter-spacing:1.8px}.verse-scene.top{align-items:flex-start;padding-top:20vh}.verse-scene.middle{align-items:center}.reading-shade,.text-right .reading-shade{background:linear-gradient(180deg,#0008,transparent 20%,#0001 35%,#0009 65%,#0009)}.text-top .reading-shade{background:linear-gradient(180deg,#0009,#0009 45%,#0002 74%,#0008)}.immersive-footer{padding:12px 22px 18px;gap:14px}.immersive-footer #artist-label{font-size:12px}.immersive-footer #artwork-title{font-size:11px}.immersive-footer #reading-reference{white-space:nowrap;font-size:12px}dialog{padding:22px}.version-options a{padding:15px;font-size:21px}.chapter-link{gap:12px}.chapter-link span{font-size:13px}.scripture::before{inset:-25px -20px;background:radial-gradient(ellipse,#0004,transparent 75%)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.art-clear>img{will-change:auto}.reading-shade{transition:none}}

.art-clear{position:absolute;inset:0;overflow:hidden}.art-blur{display:none;position:absolute;inset:0;overflow:hidden}.art-blur img{position:absolute;inset:-30px;width:calc(100% + 60px);height:calc(100% + 60px);object-fit:cover;filter:blur(24px) brightness(.48);opacity:0}.art-blur img:first-child{opacity:1}
.scripture p{font-size:clamp(21px,1.8vw,28px)}
@media (max-width:900px) and (orientation:portrait),(max-height:600px) and (max-width:1100px) and (orientation:landscape){
html,body{height:100%;overflow:hidden}.art-blur{display:block}.art-clear{top:50dvh;bottom:0}.art-clear>img{height:100%;width:100%}.reading-shade,.text-right .reading-shade,.text-top .reading-shade{bottom:50dvh;background:linear-gradient(#0005,#0003);transition:none}
main{position:fixed;z-index:2;top:0;left:0;width:100%;height:50dvh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ead8b444 transparent;scroll-behavior:smooth}
.verse-scene,.verse-scene.top,.verse-scene.middle,.verse-scene.right{min-height:50dvh;padding:86px 26px 26px;align-items:center;justify-content:flex-start;background:none}.scripture{width:100%;max-width:640px;margin:auto}.scripture p{font-size:18px;line-height:1.5;letter-spacing:0;margin-bottom:16px}.scripture p:last-child{margin-bottom:0}.verse-reference{font-size:11px;letter-spacing:1.5px;margin-bottom:14px}.scripture sup{font-size:10px}.scripture::before{display:none}.immersive-header{padding:10px 20px;gap:14px}.immersive-header #chapter-control{font-size:18px}.edition-label{font-size:10px}.immersive-footer{padding:10px 20px 14px}.end-scene{min-height:50dvh;padding:86px 26px 30px;background:none}.end-scene h1{font-size:28px}.end-scene .verse-reference{font-size:10px}.end-scene button,.end-scene a{font-size:14px;margin:12px auto}
}
@media (max-height:600px) and (max-width:1100px) and (orientation:landscape){
.art-clear{top:0;left:50%;bottom:0}.reading-shade,.text-right .reading-shade,.text-top .reading-shade{bottom:0;right:50%}main{width:50%;height:100dvh}.immersive-header{width:50%;padding:8px 18px}.edition-label{display:none}.verse-scene,.verse-scene.top,.verse-scene.middle,.verse-scene.right{min-height:100dvh;padding:68px 24px 24px}.scripture p{font-size:17px;line-height:1.48}.immersive-footer{left:50%;padding:8px 16px 12px}.immersive-footer #reading-reference{font-size:10px}.immersive-footer #artwork-title{font-size:10px}.end-scene{min-height:100dvh;padding:70px 24px 25px}
}
@media(prefers-reduced-motion:reduce){main{scroll-behavior:auto}}

/* Blurred artwork lies over the clear canvas and dissolves across their overlap. */
@media (max-width:900px) and (orientation:portrait),(max-height:600px) and (max-width:1100px) and (orientation:landscape){
.art-clear{top:40dvh;z-index:1}.art-blur{z-index:2;pointer-events:none;mask-image:linear-gradient(to bottom,#000 0%,#000 43%,#000c 47%,#0005 52%,#0001 56%,transparent 59%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 43%,#000c 47%,#0005 52%,#0001 56%,transparent 59%)}
.reading-shade,.text-right .reading-shade,.text-top .reading-shade{z-index:3;inset:0;pointer-events:none;background:linear-gradient(to bottom,#0005,#0003 42%,#0001 54%,transparent 64%)}
}
@media (max-height:600px) and (max-width:1100px) and (orientation:landscape){
.art-clear{top:0;left:40%}.art-blur{mask-image:linear-gradient(to right,#000 0%,#000 43%,#000c 47%,#0005 52%,#0001 56%,transparent 59%);-webkit-mask-image:linear-gradient(to right,#000 0%,#000 43%,#000c 47%,#0005 52%,#0001 56%,transparent 59%)}
.reading-shade,.text-right .reading-shade,.text-top .reading-shade{inset:0;background:linear-gradient(to right,#0005,#0003 42%,#0001 54%,transparent 64%)}
}

.art-blur img{filter:blur(48px) brightness(.27)}.immersive-footer{flex-wrap:wrap;row-gap:8px}#art-commentary{flex-basis:100%;max-width:650px;text-align:left}#art-commentary p{font:14px/1.4 Georgia,serif;margin:0 0 5px;color:#fff6e5}#art-commentary a{font:12px/1.3 Arial,sans-serif;color:#ddc49c;text-underline-offset:3px}.immersive-footer:has(#art-commentary:not([hidden])){background:linear-gradient(transparent,#000d 25%,#000e)}
@media (max-width:900px) and (orientation:portrait),(max-height:600px) and (max-width:1100px) and (orientation:landscape){#art-commentary p{font-size:13px;line-height:1.35}#art-commentary a{font-size:11px}.art-blur img{filter:blur(52px) brightness(.23)}}

.art-clear{background-size:cover;background-position:center}.art-clear::before{content:'';position:absolute;inset:0;backdrop-filter:blur(32px) brightness(.2);-webkit-backdrop-filter:blur(32px) brightness(.2)}.art-clear>img{z-index:1}

.reading-runway{display:none;pointer-events:none}.reading-flow{position:relative}
@media (max-width:900px) and (orientation:portrait),(max-height:600px) and (max-width:1100px) and (orientation:landscape){
html,body{height:auto;overflow:visible}html{overflow-x:clip}body{overflow-x:clip}.reading-runway{display:block}main{overflow:clip;overscroll-behavior:auto;scroll-behavior:auto}.reading-flow{will-change:transform}.art-world,.immersive-header,.immersive-footer{touch-action:pan-y pinch-zoom}html:has(dialog[open]){overflow:hidden}
}
@media (max-width:900px) and (orientation:portrait),(max-height:600px) and (max-width:1100px) and (orientation:landscape){
main{top:50dvh}.art-clear{top:0;bottom:40dvh}.art-blur{mask-image:linear-gradient(to top,#000 0%,#000 43%,#000c 47%,#0005 52%,#0001 56%,transparent 59%);-webkit-mask-image:linear-gradient(to top,#000 0%,#000 43%,#000c 47%,#0005 52%,#0001 56%,transparent 59%)}.reading-shade,.text-right .reading-shade,.text-top .reading-shade{background:linear-gradient(to top,#0005,#0003 42%,#0001 54%,transparent 64%)}.immersive-header{top:50dvh}.immersive-footer{bottom:50dvh}
}
@media (max-height:600px) and (max-width:1100px) and (orientation:landscape){
main{top:0;left:50%;width:50%}.art-clear{top:0;left:0;right:40%;bottom:0}.art-blur{mask-image:linear-gradient(to left,#000 0%,#000 43%,#000c 47%,#0005 52%,#0001 56%,transparent 59%);-webkit-mask-image:linear-gradient(to left,#000 0%,#000 43%,#000c 47%,#0005 52%,#0001 56%,transparent 59%)}.reading-shade,.text-right .reading-shade,.text-top .reading-shade{background:linear-gradient(to left,#0005,#0003 42%,#0001 54%,transparent 64%)}.immersive-header{top:0;left:50%}.immersive-footer{left:0;right:50%;bottom:0}
}
.reading-progress{position:fixed;bottom:0}

/* Continuous scripture: identical spacing within and between verse groups. */
.reading-flow{padding:110px 0 40px}.verse-scene,.verse-scene.top,.verse-scene.middle,.verse-scene.right{min-height:0;padding:0 9vw;display:block;margin:0}.scripture{margin:0}.scripture p,.scripture p:last-child{margin:0 0 .65em}.scripture .verse-reference,#reading-reference{display:none}
@media (max-width:900px) and (orientation:portrait),(max-height:600px) and (max-width:1100px) and (orientation:landscape){
.reading-flow{padding:80px 0 30px}.verse-scene,.verse-scene.top,.verse-scene.middle,.verse-scene.right{min-height:0;padding:0 26px;display:block;margin:0}.scripture{margin:0;width:100%;max-width:none}.scripture p,.scripture p:last-child{margin:0 0 .65em}
}
@media (max-height:600px) and (max-width:1100px) and (orientation:landscape){.reading-flow{padding-top:68px}.verse-scene,.verse-scene.top,.verse-scene.middle,.verse-scene.right{padding:0 24px}}
.immersive-header{top:0;left:0;right:0;width:100%}
@media (max-width:900px) and (orientation:portrait){.reading-flow{padding-top:22px}}
@media (max-height:600px) and (max-width:1100px) and (orientation:landscape){.edition-label{display:inline}.immersive-header{top:0;left:0;right:0;width:100%}}

.immersive-header{flex-wrap:wrap;row-gap:8px}.immersive-header #art-commentary{flex-basis:100%;max-width:none;margin:0;padding:0 0 8px}.immersive-header #art-commentary p{max-width:700px}.immersive-header:has(#art-commentary:not([hidden])){background:linear-gradient(#000e,#000c 72%,transparent)}

.immersive-header #artwork-info{flex-basis:100%;max-width:100%;text-align:left;padding:0;min-height:36px;font:13px/1.4 Arial,sans-serif}.immersive-header #artist-label{display:block;color:#fff1da}.immersive-header #artwork-title{display:block;font-size:12px;opacity:.72}.immersive-footer{padding:0;min-height:0;height:0;background:none;pointer-events:none}.immersive-header{background:linear-gradient(#000d,#0008 75%,transparent)}

/* Keep the artwork physically below its opaque, content-sized header. */
:root{--header-height:120px}
.immersive-header,.immersive-header:has(#art-commentary:not([hidden])){background:#000}
.art-world{top:var(--header-height)}
.reading-flow{padding-top:calc(var(--header-height) + 24px)}
@media (max-width:900px) and (orientation:portrait){
.art-clear{left:0;right:0;top:0;bottom:40%}
main{top:calc(var(--header-height) + (100dvh - var(--header-height))/2);height:calc((100dvh - var(--header-height))/2)}
.reading-flow{padding-top:22px}
}
@media (max-height:600px) and (max-width:1100px) and (orientation:landscape){
main{top:var(--header-height);height:calc(100dvh - var(--header-height))}
.reading-flow{padding-top:22px}
}
/* Scripture dissolves as it scrolls out of the reading pane. */
@media (max-width:900px) and (orientation:portrait),(max-height:600px) and (max-width:1100px) and (orientation:landscape){
main{mask-image:linear-gradient(to bottom,transparent 0,#000 32px,#000 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 32px,#000 100%)}
.reading-flow{padding-top:36px}
}

/* Source links live together in the artwork credits at the end. */
.source-links{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:10px}.source-links a{font:12px/1.4 Arial,sans-serif;color:#ddc49c;text-underline-offset:3px}.immersive-credits article>div{min-width:0}
@media(max-width:650px){.source-links{display:grid;gap:6px}.source-links a{font-size:11px}}

/* Reading chrome hides while moving forward and returns while scrolling back. */
.immersive-header{transition:transform .28s ease,opacity .28s ease;background:#000}.header-hidden .immersive-header{transform:translateY(-105%);opacity:0;pointer-events:none}
.art-world{top:0}
.reading-flow{padding-top:24px}
@media (max-width:900px) and (orientation:portrait){
.art-world{top:0}.art-clear{top:0;bottom:50%}.art-blur{inset:0}.reading-shade,.text-right .reading-shade,.text-top .reading-shade{inset:0;bottom:50%;background:linear-gradient(to top,#0005,#0003 42%,#0001 54%,transparent 64%)}
main{top:50dvh;height:50dvh}.reading-flow{padding-top:22px}
}
@media (max-height:600px) and (max-width:1100px) and (orientation:landscape){
.art-world{top:0}.art-clear{top:0;left:0;right:50%;bottom:0}.art-blur{inset:0}.reading-shade,.text-right .reading-shade,.text-top .reading-shade{inset:0;right:50%;background:linear-gradient(to left,#0005,#0003 42%,#0001 54%,transparent 64%)}
main{top:0;left:50%;width:50%;height:100dvh}.reading-flow{padding-top:22px}
}
@media(prefers-reduced-motion:reduce){.immersive-header{transition:none}}

/* Let the scripture fade over the artwork instead of being clipped behind it. */
@media (max-width:900px) and (orientation:portrait){
main{
z-index:4;
top:calc(50dvh - 56px);
height:calc(50dvh + 56px);
mask-image:linear-gradient(to bottom,transparent 0,#000 56px,#000 100%);
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 56px,#000 100%);
}
}
@media (max-height:600px) and (max-width:1100px) and (orientation:landscape){
main{
z-index:4;
left:calc(50% - 56px);
width:calc(50% + 56px);
mask-image:linear-gradient(to right,transparent 0,#000 56px,#000 100%);
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 56px,#000 100%);
}
}

/* Commentary remains fixed over the painting without an opaque backdrop. */
:root{--commentary-height:40px}
#art-commentary{
position:fixed;
z-index:12;
top:0;
left:4vw;
right:4vw;
height:40px;
min-height:40px;
max-height:40px;
overflow:hidden;
padding:0;
background:transparent;
pointer-events:none;
text-align:left;
text-shadow:0 2px 8px #000,0 1px 2px #000;
}
.immersive-header{top:var(--commentary-height)}
.header-hidden .immersive-header{transform:translateY(calc(-105% - var(--commentary-height)))}
#art-commentary p{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
height:40px;
max-height:40px;
overflow:hidden;
margin:0;
font:14px/1.4 Georgia,serif;
color:#fff6e5;
}

/* Mobile performance: the backdrop uses tiny pre-blurred derivatives while
   only the active museum-resolution painting remains on the GPU. */
.art-blur img{
filter:none;
transform:scale(1.08);
will-change:opacity;
}
.art-clear{
background-size:cover;
background-position:center;
}
.art-clear::before{
background:#0009;
backdrop-filter:none;
-webkit-backdrop-filter:none;
}
.art-clear>img{
will-change:auto;
backface-visibility:hidden;
contain:paint;
}
.art-clear>img.is-active{will-change:transform,opacity}
.reading-progress i{
width:100%;
transform:scaleX(0);
transform-origin:left center;
will-change:transform;
}
@media (max-width:900px) and (orientation:portrait),(max-height:600px) and (max-width:1100px) and (orientation:landscape){
main{contain:layout paint}
.art-blur img{filter:none}
.art-clear>img.is-active{will-change:transform}
}

/* The reading surface is now solid, with the existing mask preserving the
   soft dissolve into the artwork at the shared edge. */
@media (max-width:900px) and (orientation:portrait),(max-height:600px) and (max-width:1100px) and (orientation:landscape){
.art-blur{display:none!important}
main{background:#12110f}
}
#art-commentary.is-empty{visibility:hidden}
@media (max-width:900px) and (orientation:portrait){
:root{--commentary-height:36px}
#art-commentary{left:20px;right:20px;height:36px;min-height:36px;max-height:36px}
#art-commentary p{height:36px;max-height:36px;font-size:13px;line-height:1.35}
}
@media (max-height:600px) and (max-width:1100px) and (orientation:landscape){
:root{--commentary-height:36px}
#art-commentary{left:18px;right:calc(50% + 18px);height:36px;min-height:36px;max-height:36px}
#art-commentary p{height:36px;max-height:36px;font-size:12px;line-height:1.35}
}