/* Ephesians: one stone wall breaks, and its stones settle into one arch. */
@font-face{font-family:"Oranienbaum Eph";src:url(/assets/books/ephesians/oranienbaum.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{
  --eph-ash:#1b1a17;
  --eph-mortar:#2a2824;
  --eph-char:#2e2c28;
  --eph-light:#f4e6c6;
  --eph-gold:#f0c069;
  --eph-gold-ink:#7f4f10;
  --eph-ivory:#f7f0e2;
  --eph-didone:"Oranienbaum Eph","Bodoni 72",Didot,Georgia,serif;
  --eph-stone:url(/assets/books/ephesians/stone.webp);
}
@view-transition{navigation:auto}
body.eph{background:var(--eph-ash)}
.eph :focus-visible{outline-color:var(--eph-gold)}
.eph .foot .textlink,.eph-more .textlink{color:var(--eph-gold)}
br.m{display:none}

/* shared type */
.eph-lead{font:italic 400 clamp(19px,1.9vw,32px)/1.25 var(--serif);color:var(--eph-ivory);margin-bottom:.35em}
.eph-lead--ink{color:#4a4236}
.eph-poster{font:400 min(15.2vw,27vh)/.86 var(--eph-didone);letter-spacing:-.01em}
.eph-poster em{font-style:normal}
.eph-poster--light{color:var(--eph-ivory);text-shadow:0 2px 30px rgba(10,9,8,.55)}
.eph-poster--light em{color:var(--eph-gold)}
.eph-poster--ink{color:#26231e}

/* ---------- the scene ---------- */
.eph-scene{position:relative;background:var(--eph-mortar)}
.eph-stage{position:relative;height:100vh;min-height:520px;overflow:hidden;background:var(--eph-mortar) var(--eph-stone) 0 0/768px;isolation:isolate}
@supports (height:100svh){.eph-stage{height:100svh}}
.js .eph-stage{background-image:none}
.js .eph-scene:not(.is-still){height:calc(100vh + 250vh)}
@supports (height:100svh){.js .eph-scene:not(.is-still){height:calc(100svh + 250vh)}}
.js .eph-scene:not(.is-still) .eph-stage{position:sticky;top:0}

.eph-light,.eph-seam,.eph-mortar,.eph-wall,.eph-fx,.eph-shade,.eph-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.eph-light{background:radial-gradient(58% 52% at 50% 56%,#fff8e8 0%,rgba(255,248,232,0) 72%),linear-gradient(180deg,#ecd5a2 0%,#f5e8cb 48%,var(--eph-light) 100%);opacity:0}
.js .eph-light{opacity:0}
.eph-seam{left:var(--eph-cx,50%);width:46vw;margin-left:-23vw;background:radial-gradient(closest-side,#fff1cc,rgba(255,214,130,.9) 35%,rgba(240,176,80,.45) 70%,rgba(240,176,80,0));opacity:0;will-change:transform,opacity}
.eph-mortar{opacity:0}
.eph-mortar path{fill:var(--eph-mortar)}
.eph-shade{background:radial-gradient(70% 60% at 50% 52%,rgba(16,15,13,.72),rgba(16,15,13,.25) 70%,rgba(16,15,13,0));opacity:0}
.eph-frame{opacity:1}
.eph-frame path{fill:none;stroke-width:2.5}
.eph-frame__cut{stroke:#2b2925}
.eph-frame__lip{stroke:rgba(255,255,255,.22);transform:translate(0,1.5px)}

/* stones */
.eph-st{position:absolute;left:0;top:0;border-radius:3px;background-color:#7d7c79;background-image:linear-gradient(145deg,rgba(255,255,255,var(--hi,.06)),rgba(0,0,0,var(--lo,.12))),linear-gradient(rgba(150,118,72,var(--wm,0)),rgba(150,118,72,var(--wm,0))),var(--eph-stone);background-size:auto,auto,768px 768px;background-position:0 0,0 0,var(--bx,0) var(--by,0);box-shadow:inset 2px 2px 0 rgba(255,255,255,.16),inset -2px -3px 0 rgba(0,0,0,.24),inset 0 0 22px rgba(0,0,0,.16),0 16px 26px -10px rgba(0,0,0,.5);will-change:transform;backface-visibility:hidden;transform-origin:50% 50%}
.eph-chip{position:absolute;left:0;top:0;background:#8b8986 var(--eph-stone) 0 0/400px;will-change:transform,opacity;opacity:0}
.eph-dust{position:absolute;left:0;top:0;border-radius:50%;background:radial-gradient(closest-side,rgba(226,218,202,.55),rgba(226,218,202,0));will-change:transform,opacity;opacity:0}

/* copy layers */
.eph-copy{position:absolute;inset:0;z-index:6;display:grid;place-items:center;text-align:center;padding:84px var(--gutter) 5vh}
.js .eph-copy--2,.js .eph-copy--3{opacity:0}
.eph-copy--3{top:var(--eph-yc,24%);padding-top:2vh}

/* screen 1: the cover, carved into the wall */
.eph-carve{display:grid;justify-items:center}
.eph-title{font:400 min(23vw,40vh)/.9 var(--eph-didone);letter-spacing:-.012em;color:#141210;text-shadow:0 2px 0 rgba(255,255,255,.3),0 -1px 0 rgba(0,0,0,.45)}
.eph-study,.eph-by{font:600 clamp(13px,1.25vw,20px)/1.3 var(--serif);letter-spacing:.3em;text-transform:uppercase;color:#f5eee2;text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 14px rgba(0,0,0,.35);padding-left:.3em}
.eph-study{margin-top:.6em}
.eph-by{margin-top:clamp(18px,4vh,44px);font-size:clamp(12px,1vw,16px);letter-spacing:.22em}
.eph-orn{display:block;width:min(56vw,620px);aspect-ratio:700/150;background:#2b2925;-webkit-mask:url(/assets/books/ephesians/ornament.webp) center/contain no-repeat;mask:url(/assets/books/ephesians/ornament.webp) center/contain no-repeat;filter:drop-shadow(0 1.5px 0 rgba(255,255,255,.22));margin-bottom:clamp(10px,3vh,34px)}
.eph-orn--low{transform:scaleY(-1);margin:clamp(12px,3.4vh,36px) 0 0}

/* screen 3 accent */
.eph-accent{font:italic 500 clamp(26px,3.2vw,52px)/1.1 var(--serif);color:var(--eph-gold-ink);margin-top:.3em}
.eph-copy--3 .eph-poster{font-size:min(16.5vw,25vh)}

/* ---------- screen 4: through the arch ---------- */
.eph-unity{position:relative;min-height:122vh;padding:clamp(40px,8vh,96px) 0 34vh;text-align:center;background:linear-gradient(180deg,var(--eph-light) 0%,#f3e3c0 52%,#b9a888 74%,#4a4339 89%,var(--eph-ash) 100%);overflow:hidden}
.eph-jamb{position:absolute;top:0;height:78%;width:var(--eph-jw,8vw);background:repeating-linear-gradient(180deg,var(--eph-mortar) 0 6px,transparent 6px var(--eph-bh,125px)),linear-gradient(90deg,rgba(0,0,0,.12),rgba(255,255,255,.05) 50%,rgba(0,0,0,.25)),#7d7c79 var(--eph-stone) 0 0/768px;background-position:0 calc(var(--eph-jo,0px) - 3px),0 0,0 0;-webkit-mask:linear-gradient(180deg,#000 30%,transparent);mask:linear-gradient(180deg,#000 30%,transparent)}
.eph-jamb--l{left:0;box-shadow:inset -3px 0 0 rgba(0,0,0,.25)}
.eph-jamb--r{right:0;background-position:0 calc(var(--eph-jo,0px) - 3px),0 0,-300px -200px}
.eph-unity__in{position:relative;padding-inline:calc(var(--eph-jw,8vw) + var(--gutter))}
.eph-unity__word{font:400 min(40vw,62vh)/.8 var(--eph-didone);color:#26231e;letter-spacing:-.02em;margin-top:.04em}
.eph-bond{display:block;width:min(70vw,1000px);aspect-ratio:700/150;margin:clamp(6px,1.6vh,18px) auto clamp(14px,3vh,34px);background:#a06c1f;-webkit-mask:url(/assets/books/ephesians/ornament.webp) center/contain no-repeat;mask:url(/assets/books/ephesians/ornament.webp) center/contain no-repeat}
.eph-unity__line{font:400 clamp(30px,4.6vw,76px)/1.05 var(--eph-didone);color:#26231e}
.eph-unity__line em{color:var(--eph-gold-ink)}
.eph-unity__body{max-width:46ch;margin:clamp(22px,4vh,44px) auto 0;color:#3d372d;font-size:clamp(17px,1.25vw,21px)}

/* ---------- screen 5: the book on a stone ---------- */
.eph-close{position:relative;margin-top:-18vh;padding:0 0 clamp(26px,5vh,56px);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head head" "buy book" "slab slab" "more more";align-items:end;background:radial-gradient(50% 55% at 74% 60%,rgba(246,196,112,.22),rgba(246,196,112,0) 70%);overflow:hidden}
.eph-close__head{grid-area:head;padding:4vh var(--gutter) 0;position:relative;z-index:1}
.eph-close__poster{font-size:min(10.4vw,20vh);text-align:left}
.eph-close .eph-lead{text-align:left}
.eph-buy{grid-area:buy;padding:clamp(24px,4vh,48px) 0 clamp(22px,3.4vh,40px) var(--gutter);color:var(--eph-ivory)}
.eph-label{font:700 13px/1.3 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--eph-gold)}
.eph-buy__title{font:400 clamp(52px,5.4vw,92px)/.95 var(--eph-didone);margin-top:.15em}
.eph-buy__sub{font:600 clamp(12px,1vw,15px)/1.4 var(--serif);letter-spacing:.28em;text-transform:uppercase;margin-top:.5em;color:#e6dccb}
.eph-buy__by{font-style:italic;color:#e6dccb;margin-top:.35em}
.eph-buy__price{font:400 clamp(40px,3.6vw,60px)/1 var(--eph-didone);margin:.5em 0 .45em;color:var(--eph-gold)}
.eph-btn{background:var(--eph-gold);color:#1b1a17;min-width:164px}
.eph-btn:hover{background:#fff4dc}
.eph-buy__note{font-size:14px;color:#cfc4b2;margin-top:12px}

.eph-book-wrap{grid-area:book;--bkw:clamp(240px,25vw,420px);--bkd:calc(var(--bkw) * .075);perspective:1800px;perspective-origin:50% 100%;padding:0 calc(var(--gutter) + 6vw) 0 0;margin:0 0 -3px;position:relative;z-index:2}
.eph-book{position:relative;width:var(--bkw);aspect-ratio:1000/1400;transform-style:preserve-3d;transform:rotateY(24deg);transform-origin:50% 100%}
.eph-book__front{position:absolute;inset:0;width:100%;height:100%;transform:translateZ(calc(var(--bkd) / 2));border-radius:1px 4px 4px 1px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);view-transition-name:book-ephesians;background:#848484}
.eph-book__spine{position:absolute;top:0;left:0;height:100%;width:var(--bkd);background:linear-gradient(90deg,#5e5e5e,#7c7c7c 40%,#686868);transform-origin:0 50%;transform:translateZ(calc(var(--bkd) / 2)) rotateY(90deg)}
.eph-book__pages{position:absolute;top:1.5%;right:0;height:97%;width:var(--bkd);background:repeating-linear-gradient(90deg,#efe7d6 0 2px,#d9cfbb 2px 3px);transform-origin:100% 50%;transform:translateZ(calc(var(--bkd) / 2)) rotateY(-90deg)}
.eph-book-wrap::after{content:"";position:absolute;left:-18%;right:-10%;bottom:-14px;height:34px;background:radial-gradient(closest-side,rgba(0,0,0,.75),rgba(0,0,0,0));z-index:-1}

.eph-slab{grid-area:slab;position:relative;height:clamp(46px,8vh,90px);background:linear-gradient(180deg,rgba(255,240,210,.32),rgba(255,240,210,0) 10%,rgba(0,0,0,0) 60%,rgba(0,0,0,.45)),linear-gradient(90deg,rgba(0,0,0,.3),rgba(255,214,150,.16) 70%,rgba(0,0,0,.2)),#7d7c79 var(--eph-stone) -200px -300px/768px;box-shadow:0 30px 50px -10px rgba(0,0,0,.6)}
.eph-slab::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:rgba(255,240,210,.5)}
.eph-more{grid-area:more;display:flex;justify-content:space-between;gap:16px;padding:clamp(18px,4vh,40px) var(--gutter) 0}

/* phone */
@media (max-width:760px){
  br.m{display:inline}
  br.d{display:none}
  .eph-poster{font-size:min(22vw,13vh)}
  .eph-copy--3 .eph-poster{font-size:min(18.5vw,10vh)}
  .eph-copy--3{padding-inline:calc(var(--eph-jw,10vw) + 6px)}
  .eph-copy--3 .eph-lead{max-width:15em;margin-inline:auto}
  .eph-title{font-size:min(21vw,40vh)}
  .eph-orn{width:78vw}
  .eph-study{letter-spacing:.2em;font-size:12px}
  .eph-by{letter-spacing:.16em;font-size:11px}
  .eph-unity{min-height:auto;padding-bottom:30vh}
  .eph-unity__word{font-size:34vw}
  .eph-unity__in{padding-inline:calc(var(--eph-jw,14vw) + 12px)}
  .eph-unity__line{font-size:min(9vw,40px)}
  .eph-bond{width:84vw}
  .eph-close{margin-top:-14vh;grid-template-columns:1fr;grid-template-areas:"head" "book" "slab" "buy" "more"}
  .eph-close__poster{font-size:13.4vw}
  .eph-book-wrap{--bkw:60vw;justify-self:center;padding:0 5vw 0 0;margin:28px 0 -3px}
  .eph-buy{text-align:center;padding:30px var(--gutter) 0}
}

/* reduced motion: three finished stills, nothing moves */
.eph-scene.is-still .eph-stage + .eph-stage{margin-top:0}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .eph-st,.eph-chip,.eph-dust{will-change:auto}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
