/* Psalms, The Prayer Journal. One place under a living sky: stand behind them, pull back until they are small, lift into the page, come down to first light, and follow the lit path to the two journals. */
@view-transition{navigation:auto}

.ps{
  --paper:#eaebe5;
  --ink:#0a5a68;
  --tint:#bfe9d4;
  --accent:#c9f5d6;
  --glow:rgba(170,255,226,.55);
  --deep:#06303a;
  --lt:#c6ffe4;
  --dawn:#e6fff2;
  --a1:#3fe0c4;--a2:#27c0d8;--a3:#7fe39a;
  --px0:0px;
  --rock:#0b0f17;
  --u:min(calc(56svh / 583), calc(100vw / 600));
  background:var(--rock);
  overflow-x:clip;
}
.ps:has(#ed-women:checked){--ink:#33237a;--tint:#f0b6e2;--accent:#f8cdef;--glow:rgba(246,182,255,.55);--deep:#24124d;--lt:#ffd2f5;--dawn:#fff0fb;--a1:#b05be6;--a2:#6d5cf0;--a3:#ef6fd2}
.ps-defs{position:absolute;width:0;height:0;overflow:hidden}.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0}

/* header: a tinted veil of the sky, not a dark bar */
.ps .top::before{background:linear-gradient(180deg,color-mix(in srgb,var(--deep) 48%,transparent),transparent)}
.ps .top.is-solid{background:color-mix(in srgb,var(--deep) 82%,transparent)}

/* the sky */
.ps-still,.ps-sky{position:fixed;inset:0;width:100%;height:100lvh;z-index:0;pointer-events:none}
.ps-still span{position:absolute;inset:0 0 -40lvh;background:center top/cover no-repeat;transition:opacity 1.2s ease}
.ps-still .ps-still__men{background-image:url(/assets/books/psalms/sky-men.webp)}
.ps-still .ps-still__women{background-image:url(/assets/books/psalms/sky-women.webp);opacity:0}
.ps:has(#ed-women:checked) .ps-still .ps-still__women{opacity:1}
.ps-sky{opacity:0;transition:opacity .9s ease}
.ps-sky.is-live{opacity:1}

/* track and stage */
.ps-main{position:relative;z-index:1}
.ps-track{position:relative}
.ps-stage{position:relative}
.sc{position:relative;min-height:100svh;overflow:clip}
.ps-ink,.tip{display:none}

/* ---------- 1. hero ---------- */
.sc-hero{color:#fff}
.flow-land{position:absolute;left:50%;bottom:calc(var(--u) * -86);width:calc(var(--u) * 3248);height:calc(var(--u) * 463);margin-left:calc(var(--u) * -1624);background:url(/assets/books/psalms/far.webp) center bottom/100% 100% no-repeat}
.figs{position:absolute;left:50%;top:calc(100svh - var(--u) * 583);width:calc(var(--u) * 533);height:calc(var(--u) * 1440);margin-left:calc(var(--u) * -287);z-index:3;pointer-events:none}
.fig{position:absolute;top:0;left:0;width:100%;height:auto;transition:opacity 1s ease}
.fig--women{width:calc(515 / 533 * 100%);left:calc(6 / 533 * 100%);top:calc(11 / 1440 * 100%);opacity:0}
.ps:has(#ed-women:checked) .fig--women{opacity:1}
.ps:has(#ed-women:checked) .fig--men{opacity:0}

.ps-h1{position:absolute;inset:0;z-index:2;margin:0;font-weight:400;pointer-events:none}
.ink-word{display:block;overflow:visible;height:auto}
.ink-psalms{position:absolute;left:50%;top:10svh;width:min(84vw,140svh);transform:translateX(-50%)}
.ink-word__glow{fill:var(--glow);filter:url(#f-soft)}
.ink-psalms .ink-word__glow{opacity:.85;transition:opacity 1.6s ease}
.film .ink-psalms:not(.is-done) .ink-word__glow{opacity:0}
.gt0{stop-color:#fff}
.gt1{stop-color:var(--tint);transition:stop-color 1s}
.nib{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round}
.ps-h1__sub{position:absolute;right:calc(50% + var(--u) * 290);bottom:calc(var(--u) * 455);font:700 clamp(12px,1vw,15px)/1 var(--label);letter-spacing:.26em;text-transform:uppercase;color:#fff;padding:.95em 1.2em .9em 1.45em;border:1px solid rgba(255,255,255,.78);white-space:nowrap;text-shadow:0 1px 14px rgba(0,40,60,.35)}
.ps-by{position:absolute;z-index:5;right:calc(50% + var(--u) * 290);bottom:calc(var(--u) * 455 - 3.4em);font:700 12px/1 var(--label);letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.ps-ed{position:absolute;z-index:5;left:calc(50% + var(--u) * 250);bottom:calc(var(--u) * 400);display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:0;padding:0;border:0;min-width:0}
.ps-ed input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.ps-ed label{display:inline-flex;align-items:center;gap:.7em;min-height:46px;padding:0 22px 0 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.7);color:#fff;font:700 13px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;background:rgba(255,255,255,.06);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .35s,color .35s,border-color .35s;text-shadow:0 1px 10px rgba(0,30,50,.3)}
.ps-ed label::before{content:"";width:10px;height:10px;border-radius:50%;border:1.5px solid currentColor;transition:background .35s}
.ps-ed input:checked+label{background:#fff;color:var(--deep);border-color:#fff;text-shadow:none}
.ps-ed input:checked+label::before{background:var(--ink);border-color:var(--ink)}
.ps-ed label:hover{border-color:#fff}
.ps-ed input:focus-visible+label{outline:3px solid #fff;outline-offset:3px}

/* ---------- 2. read, pray, and reflect: words in the sky, one person under it ---------- */
.sc-words{color:#fff;text-align:center}
.ps-read{position:relative;z-index:2;margin:0;padding-top:calc(84px + 2.4svh);font:700 clamp(46px,min(10vw,18.5svh),196px)/.92 var(--label);text-transform:uppercase;letter-spacing:.01em;text-shadow:0 0 2px color-mix(in srgb,var(--deep) 45%,transparent),0 3px 40px color-mix(in srgb,var(--deep) 62%,transparent)}
.ps-read .w{display:inline-block}
.ps-read .w2{margin-left:.16em}
.ps-read .w3{display:block;font-style:normal;color:#fff}
.ps-read .w3a{display:inline;font:italic 400 .56em/1 var(--serif);text-transform:none;letter-spacing:0;color:#fff;margin-right:.2em}

/* ---------- 3. the page ---------- */
.sc-page{color:var(--ink)}
.sc-page::before{content:"";position:absolute;inset:-20svh 0;background:var(--paper) repeating-linear-gradient(180deg,transparent 0 calc(9svh - 1px),color-mix(in srgb,var(--ink) 22%,transparent) calc(9svh - 1px) 9svh);-webkit-mask:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.ps-lead{position:absolute;left:6vw;right:6vw;top:27svh;font:italic 400 clamp(20px,2.1vw,36px)/1.3 var(--serif);color:var(--ink)}
.ps-heart{position:absolute;left:0;right:0;top:40svh;margin:0;font-weight:400}
.ink-heart{width:min(92vw,175svh);margin:0 auto;fill:var(--ink);transition:fill 1s}
.ink-heart--two{display:none}

/* ---------- 4. awaken, illuminate: the light does it on the ground ---------- */
.sc-light{color:#fff;text-align:center}
.ps-wake{position:relative;z-index:2;margin:0;padding-top:calc(84px + 1.4svh);font:italic 400 clamp(25px,min(3.3vw,6svh),62px)/1.05 var(--serif);text-shadow:0 0 2px color-mix(in srgb,var(--deep) 45%,transparent),0 3px 34px rgba(2,12,20,.72)}
.ps-wake .l1,.ps-wake .l2{display:block}
.ps-wake .l1a,.ps-wake .l2a{font:700 clamp(44px,min(7.4vw,12.2svh),150px)/.98 var(--label);font-style:normal;text-transform:uppercase;letter-spacing:.01em;margin-right:.14em}
.ps-wake .l2{color:#fff}
.ps-wake__p{position:absolute;z-index:2;left:6vw;bottom:6.5svh;width:min(25ch,27vw);margin:0;font:italic 400 clamp(18px,1.55vw,28px)/1.32 var(--serif);text-align:left;color:#fff;text-shadow:0 1px 3px rgba(2,10,18,.8),0 1px 22px rgba(2,10,18,.8)}

/* ---------- 5. the close ---------- */
.sc-close{color:#fff;text-align:center}
.flow-close{position:absolute;inset:0;pointer-events:none}
.flow-close::before{content:"";position:absolute;left:50%;bottom:calc(120px - var(--u) * 86);width:calc(var(--u) * 3248);height:calc(var(--u) * 463);margin-left:calc(var(--u) * -1624);background:url(/assets/books/psalms/far.webp) center bottom/100% 100% no-repeat}
.flow-close::after{content:"";position:absolute;left:50%;bottom:0;width:calc(var(--u) * 3360);height:calc(var(--u) * 552);margin-left:calc(var(--u) * -1680);max-height:44svh;background:url(/assets/books/psalms/near.webp) center top/100% auto no-repeat}
.ps-journey{position:absolute;left:0;right:0;top:max(84px,12svh);font:italic 400 clamp(22px,2.7vw,48px)/1.1 var(--serif);text-shadow:0 0 2px rgba(10,20,60,.35),0 4px 50px rgba(10,20,60,.5)}
.ps-journey span{display:block;font:700 clamp(30px,6.2vw,118px)/.92 var(--label);font-style:normal;text-transform:uppercase;letter-spacing:.01em}
.ps-journey em{display:block;margin-top:.35em}
.shelf{position:absolute;left:0;right:0;bottom:0;height:70svh;display:flex;justify-content:center;align-items:flex-end;gap:clamp(36px,10vw,200px);padding-bottom:22px}
.shelf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg,rgba(11,15,23,0),var(--rock) 92%);z-index:0;pointer-events:none}
.buy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:clamp(128px,min(24vw,32svh),300px)}
.book{position:relative;width:100%;perspective:1400px;margin-bottom:18px}
.book__obj{position:relative;transform-style:preserve-3d;transform:rotateY(var(--ry,16deg)) rotateX(3deg);transform-origin:50% 100%}
.book--women .book__obj{--ry:-16deg}
.book__front{position:relative;display:block;width:100%;height:auto;border-radius:1px 3px 3px 1px;backface-visibility:hidden}
.book__obj::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:1px 3px 3px 1px;background:linear-gradient(100deg,rgba(255,255,255,0) 0 58%,rgba(255,255,255,.18) 70%,rgba(255,255,255,0) 84%),linear-gradient(90deg,rgba(0,0,0,.3),rgba(0,0,0,0) 5% 95%,rgba(0,0,0,.14))}
.book--women .book__obj::before{background:linear-gradient(260deg,rgba(255,255,255,0) 0 58%,rgba(255,255,255,.18) 70%,rgba(255,255,255,0) 84%),linear-gradient(90deg,rgba(0,0,0,.14),rgba(0,0,0,0) 5% 95%,rgba(0,0,0,.3))}
.book__spine{position:absolute;top:0;left:0;width:16px;height:100%;transform-origin:0 50%;transform:rotateY(-90deg);background:linear-gradient(90deg,#076f86,#0aa3b8 45%,#07667c)}
.book__pages{position:absolute;top:3px;right:0;width:15px;height:calc(100% - 6px);transform-origin:100% 50%;transform:rotateY(90deg);background:repeating-linear-gradient(90deg,#f4f2ea 0 1px,#d6d3c8 1px 2px)}
.book--women .book__spine{left:auto;right:0;transform-origin:100% 50%;transform:rotateY(90deg);background:linear-gradient(90deg,#3a2a88,#6a3fa0 50%,#35267c)}
.book--women .book__pages{right:auto;left:0;transform-origin:0 50%;transform:rotateY(-90deg)}
.book::after{content:"";position:absolute;left:-10%;right:-40%;bottom:-14px;height:30px;background:radial-gradient(closest-side,rgba(0,0,0,.9),rgba(0,0,0,.4) 60%,rgba(0,0,0,0));z-index:-1}
.book--women::after{left:-34%;right:-14%}
.book::before{content:"";position:absolute;inset:-30% -40% 10%;background:radial-gradient(closest-side,var(--halo-c,rgba(150,255,220,.35)),rgba(255,255,255,0));z-index:-2;pointer-events:none}
.book--women::before{--halo-c:rgba(240,170,255,.35)}
.buy__name{font:700 13px/1.2 var(--label);letter-spacing:.16em;white-space:nowrap;text-transform:uppercase;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.buy__price{font:800 clamp(26px,2.3vw,36px)/1 var(--poster);margin:8px 0 14px;letter-spacing:.02em;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.buy__btn{background:#fff;color:var(--rock);min-width:150px}
.buy--men .buy__btn:hover{background:#c9f5d6}
.buy--women .buy__btn:hover{background:#f8cdef}
.close-foot{position:relative;z-index:2;background:var(--rock);text-align:center;padding:18px var(--gutter) 64px;color:#fff}
.ps-note{font-size:15px;color:rgba(255,255,255,.78)}
.ps-more{display:flex;justify-content:center;gap:28px;margin-top:10px}
.ps-more .textlink{color:#fff}

/* footer joins the rock without a line */
.ps .foot{background:var(--rock);border-top:0}

/* ---------- stills: the same pictures for reduced motion and no script ---------- */
.still{position:absolute;inset:0;background:center bottom/cover no-repeat;-webkit-mask-image:linear-gradient(transparent,#000 9%,#000 93%,transparent);mask-image:linear-gradient(transparent,#000 9%,#000 93%,transparent)}
.film .still,.film .flow-land,.film .flow-close{display:none}
.still--2{background-image:url(/assets/books/psalms/still-2-men.webp)}
.still--4{background-image:url(/assets/books/psalms/still-4-men.webp)}
.ps:has(#ed-women:checked) .still--2{background-image:url(/assets/books/psalms/still-2-women.webp)}
.ps:has(#ed-women:checked) .still--4{background-image:url(/assets/books/psalms/still-4-women.webp)}

html:not(.film) .sc-hero{-webkit-mask-image:linear-gradient(#000 84%,transparent);mask-image:linear-gradient(#000 84%,transparent)}
html:not(.film) .ps-h1{height:100svh}
html:not(.film) .sc-page{overflow:visible;z-index:1}

/* ---------- the world: far, ridge, near, each its own depth ---------- */
.wld{display:none}
.w__l{position:absolute;left:0;top:0;width:2800px;transform-origin:0 0;will-change:transform;pointer-events:none}
.w__l picture{display:contents}
.w__img{display:block;width:100%;height:auto;max-width:none}
.tint,.rim{position:absolute;top:0;left:calc(var(--px0) * -1);width:2800px;height:100%;opacity:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.tint{background:linear-gradient(90deg,var(--a2),var(--a1) 34%,var(--a3) 62%,var(--a1))}
.tint--far{-webkit-mask-image:url(/assets/books/psalms/aur-far.webp);mask-image:url(/assets/books/psalms/aur-far.webp)}
.tint--mid{-webkit-mask-image:url(/assets/books/psalms/aur-mid.webp);mask-image:url(/assets/books/psalms/aur-mid.webp)}
.rim{background:var(--dawn);-webkit-mask-image:url(/assets/books/psalms/rim.webp);mask-image:url(/assets/books/psalms/rim.webp)}
.lt{position:absolute;left:calc((var(--x) * 1px) - var(--px0));top:calc(var(--y) * 1px);width:calc(var(--w) * 1px);height:calc(var(--h) * 1px);background:var(--lt);opacity:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.lt--p,.gp--p{display:none}
.w__knob{position:absolute;left:calc(1180px - var(--px0));top:0;width:620px;height:245px;max-width:none;opacity:0}
.w__small{width:89px;height:240px}
.fig-s{position:absolute;left:0;top:0;width:89px;height:240px;margin:0;transition:opacity .8s ease}
.fig-s--women{opacity:0}
.ps:has(#ed-women:checked) .fig-s--women{opacity:1}
.ps:has(#ed-women:checked) .fig-s--men{opacity:0}

/* ---------- film mode: one pinned stage, one camera ---------- */
.film .ps-track{height:calc(var(--screens,10.7) * 100svh)}
.film .ps-stage{position:sticky;top:0;height:100svh;overflow:clip}
.film .sc{position:absolute;inset:0;min-height:0;will-change:transform,opacity;z-index:4}
.film .sc-hero{z-index:1}
.film .sc-words,.film .sc-page,.film .sc-light,.film .sc-close{opacity:0}
.film .sc-page::before{display:none}
.film .wld{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;overflow:clip}
.film .figs{position:absolute;left:0;top:0;width:533px;height:1440px;margin:0;z-index:auto;transform-origin:0 0;will-change:transform,opacity}
.film .ps-stage>.ps-sky,.film .ps-stage>.ps-still{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.film .ps-ink{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible;-webkit-mask-image:linear-gradient(transparent 62px,#000 108px);mask-image:linear-gradient(transparent 62px,#000 108px)}
.film .tip{display:block;position:absolute;left:0;top:0;width:0;height:0;z-index:7;pointer-events:none}
.tip::before,.tip::after{content:"";position:absolute;border-radius:50%;transform:translate(-50%,-50%)}
.tip::before{width:64px;height:64px;background:radial-gradient(closest-side,var(--glow),rgba(255,255,255,0));opacity:var(--halo,1)}
.tip::after{width:7px;height:7px;background:#fff;box-shadow:0 0 10px 3px rgba(255,255,255,.9),0 0 26px 8px var(--glow)}
.ln{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ln--core{stroke:url(#g-line);stroke-width:2.3}
.ln--glow{stroke:url(#g-line);stroke-width:7;opacity:.2}
.gs{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:calc(var(--w,4) * var(--k,1) * 1px)}
.gs--g{stroke:var(--lt)}
.film .ink-word__body{opacity:1}

/* ---------- portrait and phone: the cover's own stack, title over the head ---------- */
@media (max-width:900px){
  .ps{--u:min(calc(48svh / 583), calc(100vw / 560))}
  .ink-psalms{top:12svh;width:94vw}
  .ps-h1__sub{right:auto;left:50%;bottom:auto;top:calc(12svh + 30vw);transform:translateX(-50%);font-size:11px;letter-spacing:.24em}
  .ps-by{right:auto;left:0;width:100%;text-align:center;bottom:auto;top:calc(12svh + 30vw + 46px);font-size:11px}
  .ps-ed{left:50%;bottom:auto;top:calc(12svh + 30vw + 72px);transform:translateX(-50%);flex-direction:row;gap:8px}
  .ps-ed label{padding:0 12px 0 10px;font-size:10.5px;letter-spacing:.08em;gap:.45em;white-space:nowrap}
  .ps-wake .l1a,.ps-wake .l2a{display:block;font-size:min(12.4vw,8.4svh);margin-right:0}
  .ps-wake{font-size:min(6.6vw,4.4svh);line-height:1.02}
  .ps-wake .l2{margin-top:.34em}
}
@media (max-width:700px){
  .ps{--px0:712px}
  .w__l{width:1500px}
  .w__small{width:89px}
  .lt--d,.gp--d{display:none}
  .lt--p{display:block}
  .gp--p{display:inline}
  .still--2{background-image:url(/assets/books/psalms/still-2-men-p.webp)}
  .still--4{background-image:url(/assets/books/psalms/still-4-men-p.webp)}
  .ps:has(#ed-women:checked) .still--2{background-image:url(/assets/books/psalms/still-2-women-p.webp)}
  .ps:has(#ed-women:checked) .still--4{background-image:url(/assets/books/psalms/still-4-women-p.webp)}
  .flow-land,.flow-close::before{background-image:url(/assets/books/psalms/far-p.webp);width:calc(var(--u) * 1740);margin-left:calc(var(--u) * -870)}
  .flow-close::after{background-image:url(/assets/books/psalms/near-p.webp);width:calc(var(--u) * 1800);margin-left:calc(var(--u) * -900)}
  .ps-read{font-size:min(16vw,12.5svh);padding-top:calc(76px + 1.6svh)}
  .ps-read .w{display:block}
  .ps-read .w2{margin-left:0}
  .ps-read .w3a{display:block;font-size:.46em;margin:.1em 0 .02em}
  .ink-heart--wide{display:none}
  .ink-heart--two{display:block;width:90vw}
  .ps-heart{top:36svh}
  .ps-lead{top:22svh;font-size:18px}
  .ps-wake{padding-top:calc(74px + 1svh)}
  .ps-wake__p{left:9vw;right:9vw;width:auto;bottom:3.4svh;font-size:clamp(15px,4.4vw,18px);line-height:1.3;text-align:center}
  .ps-journey{top:max(78px,10svh)}
  .ps-journey span{font-size:9.6vw}
  .ps-journey em{font-size:6.4vw}
  .shelf{gap:7vw;height:64svh}
  .buy{width:min(38vw,24svh)}
  .buy__name{font-size:10px;letter-spacing:.08em;white-space:nowrap}
  .buy__btn{min-width:0;padding:0 22px}
}
@media (max-width:360px){
  .ps-ed{gap:5px}
  .ps-ed label{font-size:9.5px;padding:0 9px 0 8px;letter-spacing:.03em;gap:.35em}
  .ps-ed label::before{width:8px;height:8px}
}

@media (prefers-reduced-motion:reduce){
  .ps-still span,.fig,.ps-sky,.fig-s{transition:none}
}