/* Galatians. One live balance, cast from the cover's ornament, over one cloth ground that is re-lit from screen to screen. */
@font-face{font-family:"Oranienbaum";src:url(/assets/books/galatians/oranienbaum-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@view-transition{navigation:auto}

.gal{
  --grey:#6D7170;--char:#232524;--ivory:#F4F0E7;--brass:#E9BE62;--brass-d:#7A4F12;--crim:#7E0E15;--dusk:#120C08;
  --disp:"Oranienbaum","Bodoni 72","Didot",Georgia,serif;
  background:var(--dusk);overflow-x:clip;
}
.gal main{display:block}
.gal .top::before{background:linear-gradient(180deg,rgba(10,10,10,.62),rgba(10,10,10,.3) 55%,rgba(10,10,10,0))}
.gal .top.is-solid{background:none;box-shadow:none;backdrop-filter:none}
.gal .top.is-solid::before{opacity:1}
.gal :focus-visible{outline-color:#fff}
.gal .nav .nav__cta{border-color:rgba(255,255,255,.7)}
.gal .nav a:hover{color:#fff}

/* ---- the world: two sticky stages either side of the type ---- */
.world{position:relative}
.back,.front{display:none}
.hold{display:none}
.gal-live .hold{display:block;position:absolute;inset:0;pointer-events:none}
.gal-live .back,.gal-live .front{display:block;position:sticky;top:0;width:100%;height:100vh;height:100lvh;overflow:clip}
.gal-live .hold--b{z-index:0}
.gal-live .hold--f{z-index:3}
.gal-live .back{background:var(--grey)}
.gal-live .front{pointer-events:none}
.sc{position:relative}
.gal-live .sc1{height:130svh}
.gal-live .sc2{height:260svh}
.gal-live .sc3{height:300svh}
.gal-live .sc4{height:250svh}
.gal-live .sc5{height:220svh}
.gal-live .sc6{height:190svh}
.gal-live .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:clip;z-index:1}
/* words that must read lie above the brass; the walls stay under it for depth */
.gal-live .sc3 .pin,.gal-live .sc5 .pin,.gal-live .sc6 .pin{z-index:4;pointer-events:none}
.gal-live .pin a,.gal-live .pin .lean{pointer-events:auto}
.gal-live .pin--top{z-index:4;margin-top:-100vh;margin-top:-100svh;pointer-events:none}
.pin--top *{visibility:hidden}
.pin--top [data-over],.pin--top [data-over] *{visibility:visible}
.is-lifted,.is-lifted *{color:transparent!important;text-shadow:none!important}
.gal-live .still{display:none}

/* ---- grounds ---- */
.g{position:absolute;inset:-2px;opacity:0;display:none;will-change:opacity}
.g--grey{opacity:1;display:block;background:radial-gradient(120% 110% at 22% 12%,#8d918f 0%,#747877 38%,#5e6261 68%,#454847 100%)}
.g--iron{background:radial-gradient(90% 80% at 68% 8%,#3a3f46 0%,#1f2226 42%,#0d0e11 78%,#07080a 100%)}
.g--shaft{background:radial-gradient(70% 90% at 26% 0%,#23262b 0%,#101114 40%,#060607 100%)}
.g--crim{background:radial-gradient(90% 85% at 24% 30%,#c0141f 0%,#8e0e16 40%,#4f070c 76%,#220305 100%)}
.g--gold{background:radial-gradient(95% 90% at 26% 22%,#ffd877 0%,#eeb042 34%,#c07a1a 68%,#6e390b 100%)}
.g--linen{background:radial-gradient(100% 95% at 30% 18%,#fbf0d4 0%,#ecd7a8 40%,#cda96a 74%,#8f6a33 100%)}
.g--dusk{background:radial-gradient(70% 62% at 30% 52%,#9c6a2a 0%,#5d3a18 36%,#2c1a0c 68%,#120c08 100%)}

/* the cover's double frame, pressed in the cloth */
.frame{position:absolute;inset:0;width:100%;height:100%;will-change:opacity}
.frame path{fill:none;vector-effect:non-scaling-stroke}
.frame__lo{stroke:#232524;stroke-width:2}
.frame__hi{stroke:rgba(255,255,255,.17);stroke-width:1;transform:translate(1.5px,1.5px)}
.orn-foot{position:absolute;left:50%;bottom:clamp(58px,8.6svh,84px);width:min(38vw,560px);height:auto;max-width:none;transform:translateX(-50%) scaleY(-1);opacity:.8;will-change:opacity}

/* the cloth lies over ground and type alike, under the brass */
.weave{position:absolute;inset:0;background-size:384px 384px;will-change:opacity}
.weave--d{background-image:url(/assets/books/galatians/cloth-d.webp);opacity:.34}
.weave--l{background-image:url(/assets/books/galatians/cloth-l.webp);opacity:.1}

.front.is-end .weave{-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 96%);mask-image:linear-gradient(180deg,#000 72%,transparent 96%)}

/* ---- the rig: rig units, scaled down from full size only ---- */
.rig{position:absolute;left:0;top:0;width:0;height:0;will-change:transform;transform-origin:0 0}
.rig img,.rig i{display:block;position:absolute;max-width:none}
.beam{left:-580px;top:-120px;width:1160px;height:320px;transform-origin:580px 120px;will-change:transform}
.hanger{left:-18px;bottom:36px;width:36px;height:2200px;background:url(/assets/books/galatians/chain.webp) center bottom/36px 46.5px repeat-y}
.cr{position:absolute;left:0;top:0;width:0;height:0;will-change:transform;transform-origin:0 0}
.spr{left:-230px;top:56px;width:460px;height:70px}
.ch{left:-210px;top:98px;width:36px;height:calc(var(--L,640px) - 98px);background:url(/assets/books/galatians/chain.webp) center top/36px 46.5px repeat-y}
.ch--r{left:174px}
.ch--t{left:-18px;top:6px;height:70px}
.pan{left:-220px;top:calc(var(--L,640px) - 32px);width:440px;height:107.5px}
.load{position:absolute;left:0;top:calc(var(--L,640px) + 28px);width:0;height:0}
.it{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;max-width:none;display:block}
.hit{position:absolute;left:-230px;top:calc(var(--L,640px) - 200px);width:460px;height:340px;background:none;border:0;padding:0;margin:0;pointer-events:auto;cursor:grab;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.hit:active{cursor:grabbing}
.hit[hidden]{display:none}

/* shadows on the cloth */
.rig--sh{opacity:.5}
.sh-beam{left:-580px;top:-120px;width:1160px;height:320px;transform-origin:580px 120px;will-change:transform;opacity:.8}
.sh-c{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}
.sh-chain{left:-199px;top:94px;width:15px;height:calc(var(--L,640px) - 94px);background:linear-gradient(90deg,transparent,rgba(0,0,0,.3) 42%,rgba(0,0,0,.3) 58%,transparent)}
.sh-chain--r{left:184px}
.sh-pan{left:-210px;top:calc(var(--L,640px) + 8px);width:420px;height:80px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.72),rgba(0,0,0,.42) 62%,transparent)}
.sh-load{left:-176px;top:calc(var(--L,640px) - 450px);width:352px;height:480px;border-radius:12px;background:rgba(0,0,0,.62);filter:blur(26px);opacity:0;will-change:opacity}

.sparks{position:absolute;inset:0}
.sparks i{position:absolute;left:0;top:0;width:4px;height:4px;border-radius:50%;background:#ffe9b0;box-shadow:0 0 8px 2px rgba(255,190,90,.8);opacity:0;will-change:transform,opacity}
.shaft{position:absolute;left:0;top:-4svh;width:58vw;height:116lvh;margin-left:-29vw;background:url(/assets/books/galatians/shaft.webp) center/100% 100% no-repeat;opacity:0;display:none;will-change:opacity,transform}
.motes{position:absolute;inset:0}
.motes i{position:absolute;display:block;background:url(/assets/books/galatians/mote.webp) center/100% 100% no-repeat;animation:drift 19s ease-in-out infinite alternate;will-change:transform}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(46px,-90px,0)}}
.fall{position:absolute;left:0;right:0;bottom:-1px;height:26lvh;opacity:0;background:linear-gradient(180deg,rgba(18,12,8,0),rgba(18,12,8,.6) 46%,var(--dusk) 92%);will-change:opacity}

/* ---- type ---- */
.pin{position:relative}
.pin>*,.t2 span,.t3 span,.t4 span,.t5 span{display:block}
.t1,.t2__a,.t2__b,.t3__a,.t3__b,.t3__c,.t4__a,.t5__w,.t6{font-family:var(--disp);font-weight:400;letter-spacing:-.012em;line-height:.92;font-kerning:normal}

/* 1 the cover */
.t1{position:absolute;left:0;right:0;top:23svh;text-align:center;color:var(--char);font-size:min(25.2vw,46svh);letter-spacing:-.018em;text-shadow:0 1.5px 0 rgba(255,255,255,.14)}
.t1__sub{position:absolute;left:0;right:0;top:calc(23svh + min(25.2vw,46svh)*1.02);text-align:center;font:400 clamp(15px,1.8vw,27px)/1 var(--disp);letter-spacing:.3em;text-transform:uppercase;color:var(--ivory);padding-left:.3em}
.t1__line{position:absolute;left:0;right:0;top:calc(23svh + min(25.2vw,46svh)*1.02 + 4.4svh);text-align:center;font:italic 400 clamp(16px,1.3vw,20px)/1.3 var(--serif);color:var(--ivory)}
.t1__by{position:absolute;left:0;right:0;bottom:clamp(20px,3.4svh,34px);text-align:center;font:400 clamp(13px,1.15vw,17px)/1.2 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--ivory)}

/* 2 legalism */
.t2{position:absolute;left:var(--gutter);right:var(--gutter);top:19svh;font-weight:400}
.t2__pre,.t3__pre,.t4__pre,.t5__pre{font:italic 400 clamp(19px,2.08vw,34px)/1.2 var(--serif);color:var(--ivory)}
.t2__a{font-size:min(13vw,24svh);color:var(--ivory);margin-top:.12em}
.t2__b{font-size:min(19vw,37svh);color:#D9DCDD;margin-left:-.02em;margin-top:-.02em;line-height:.86}

/* 3 solely */
.t3{position:absolute;left:var(--gutter);right:var(--gutter);top:13svh;font-weight:400;color:var(--ivory)}
.t3__a{font-size:min(21.4vw,36svh);margin-left:-.02em;line-height:.9}
.t3__b{font-size:min(11.4vw,20svh);margin-top:.15em}
.t3__b em{color:var(--brass)}
.t3__c{font-size:min(3.95vw,7.2svh);margin-top:.14em}

/* 4 grace */
.t4{position:absolute;left:var(--gutter);right:var(--gutter);top:27.5svh;font-weight:400;color:#2A1505}
.t4__pre{color:#2A1505;font-size:clamp(18px,1.86vw,31px)}
.t4__a{font-size:min(33vw,58svh);line-height:.86;margin-left:-.03em;color:#2A1505}
.t4__line{position:absolute;left:37vw;bottom:8svh;max-width:17em;font:italic 400 clamp(20px,2.3vw,34px)/1.2 var(--serif);color:#2A1505}

/* 5 balance */
.t5{position:absolute;left:0;right:0;top:23svh;text-align:center;font-weight:400;color:#2A1505}
.t5__pre{color:#2A1505}
.t5__w{display:flex!important;justify-content:center;align-items:baseline;gap:.2em;margin-top:.16em;font-size:min(13.4vw,25svh)}
.t5__g,.t5__o{display:inline-block!important;will-change:transform}
.t5__g{transform-origin:100% 80%;color:#7A1117}
.t5__o{transform-origin:0 80%}
.t5__and{display:inline-block!important;font:italic 400 .34em/1 var(--serif)}
.lean{position:absolute;left:50%;bottom:6svh;transform:translateX(-50%);display:block;min-width:44px;min-height:44px;text-align:center}
.lean__t{display:block;font:italic 400 18px/44px var(--serif);color:#2A1505}
.lean__r{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.lean:focus-within{outline:3px solid #2A1505;outline-offset:3px;border-radius:2px}

.t1__sub,.t1__line,.t1__by{text-shadow:0 0 7px #5e6261,0 0 2px #5e6261}
.t2__pre,.t2__a{text-shadow:0 0 8px #101216,0 0 2px #101216}
.t3__pre,.t3__a,.t3__b,.t3__c{text-shadow:0 0 9px rgba(70,5,10,.75)}
.t4__pre,.t4__line{text-shadow:0 0 8px #e6a93e,0 0 2px #e6a93e}
.t5__pre,.t5__w{text-shadow:0 0 9px #efe0b9,0 0 2px #efe0b9}
.t6{text-shadow:0 0 9px rgba(18,12,8,.85)}

/* 6 close */
.t6{position:absolute;left:50%;top:23svh;width:min(41vw,36svh + 22vw);transform:translateX(-50%);text-align:center;font-size:min(6.2vw,10.4svh);line-height:1;color:var(--ivory)}
.t6 em{color:var(--brass)}
.buy{position:absolute;left:50%;top:48svh;width:min(38vw,520px);transform:translateX(-50%);text-align:center;color:var(--ivory)}
.buy__k{font:700 12px/1.3 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.buy__t{font:400 clamp(30px,3vw,44px)/1 var(--disp);margin-top:8px}
.buy__t span{display:block;font-size:.42em;letter-spacing:.24em;text-transform:uppercase;margin-top:.7em;padding-left:.24em}
.buy__by{font:italic 400 17px/1.3 var(--serif);margin-top:10px}
.buy__btn{margin-top:18px;background:var(--brass);color:#241405;min-width:160px}
.buy__btn:hover{background:#fff}
.buy__p{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.buy__n{font:400 14px/1.35 var(--serif);margin-top:10px;color:#E8E0D0}
.after{display:flex;justify-content:center;gap:26px;margin-top:6px}
.after .textlink{color:var(--ivory)}
.foot{background:var(--dusk);border-top:0}
.foot .textlink{color:var(--ice-2)}

/* the price, struck into the brass weight */
.stamp{position:absolute;left:0;top:0;font:400 52px/1 var(--disp);color:#3a2206;letter-spacing:-.005em;white-space:nowrap;text-shadow:0 1px 0 rgba(255,236,190,.55),0 -1px 0 rgba(40,20,0,.5);opacity:0;will-change:opacity}

/* the book */
.object{perspective:2600px;perspective-origin:50% 100%;width:330px;height:463px}
.book{position:relative;width:330px;height:463px;transform-style:preserve-3d;transform:rotateY(17deg);--t:38px}
.book__front,.book__lit{position:absolute;left:0;top:0;width:100%;height:100%;transform:translateZ(calc(var(--t)/2))}
.book__front{view-transition-name:book-galatians;border-radius:1px 3px 3px 1px}
.book__lit{background:linear-gradient(104deg,rgba(0,0,0,.36) 0,rgba(0,0,0,0) 3.4%,rgba(255,236,190,.1) 4.4%,rgba(255,206,130,.17) 26%,rgba(255,206,130,.04) 62%,rgba(0,0,0,.22) 100%);border-radius:1px 3px 3px 1px}
.book__spine{position:absolute;left:0;top:0;width:var(--t);height:100%;transform-origin:0 50%;transform:translateZ(calc(var(--t)/2)) rotateY(90deg);background:linear-gradient(90deg,#3e4140,#5c605f 30%,#4a4d4c 70%,#2f3130)}
.book__pages{position:absolute;right:0;top:0;width:var(--t);height:100%;transform-origin:100% 50%;transform:translateZ(calc(var(--t)/2)) rotateY(-90deg);background:repeating-linear-gradient(90deg,#efe9dc 0 1px,#cfc8b8 1px 2px);backface-visibility:hidden}
.book__back{position:absolute;left:0;top:0;width:100%;height:100%;transform:translateZ(calc(var(--t)/-2));background:#55595a}

/* ---- without motion: finished stills, feathered into each other ---- */
html:not(.gal-live) .gal{background:var(--dusk)}
html:not(.gal-live) .world{background:linear-gradient(180deg,#6d7170 0,#6d7170 12%,#16181c 24%,#16181c 34%,#7e0e15 46%,#c98a2a 60%,#e6d3a6 76%,#3a2412 90%,#120c08 100%)}
html:not(.gal-live) .sc{min-height:100svh;margin-top:-14svh;z-index:auto}
html:not(.gal-live) .sc1{margin-top:0}
html:not(.gal-live) .pin{min-height:100svh;height:100svh;z-index:1}
html:not(.gal-live) .still{display:block;position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14svh,#000 calc(100% - 14svh),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14svh,#000 calc(100% - 14svh),transparent 100%)}
html:not(.gal-live) .sc1 .still{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 14svh),transparent 100%);mask-image:linear-gradient(180deg,#000 calc(100% - 14svh),transparent 100%)}
html:not(.gal-live) .sc6 .still{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14svh);mask-image:linear-gradient(180deg,transparent 0,#000 14svh)}
html:not(.gal-live) .still img{width:100%;height:100%;object-fit:cover}
html:not(.gal-live) .lean{display:none}
html:not(.gal-live) .buy__p{position:static;width:auto;height:auto;overflow:visible;clip-path:none;font:400 clamp(40px,4vw,60px)/1 var(--disp);margin-top:10px}

.object{display:none}
.gal-live .load .object{display:block;position:absolute;left:0;top:0}

@media (max-aspect-ratio:21/20){
  .front.is-end .hit{pointer-events:none}
  .t1{top:34svh;font-size:25.2vw}
  .t1__sub{top:calc(34svh + 25.2vw*1.08);font-size:clamp(12px,3vw,21px);letter-spacing:.16em;padding-left:.16em}
  .t1__line{top:calc(34svh + 25.2vw*1.08 + 30px);padding-inline:var(--gutter)}
  .t2{top:14svh}
  .t2__pre,.t3__pre,.t4__pre,.t5__pre{font-size:clamp(19px,5.2vw,30px)}
  .t2__a{font-size:17vw}
  .t2__b{font-size:29.4vw}
  .t3{top:12svh}
  .t3__a{font-size:37vw}
  .t3__b{font-size:18vw;margin-top:.1em}
  .t3__c{font-size:9.6vw}
  .t4{top:13svh}
  .t4__a{font-size:42vw}
  .t4__line{left:var(--gutter);right:var(--gutter);max-width:none;font-size:clamp(20px,5.2vw,30px)}
  .t5{top:22svh}
  .t5__w{flex-direction:column;align-items:center;gap:.04em;font-size:22vw}
  .t5__g{transform-origin:50% 50%}.t5__o{transform-origin:50% 50%}
  .t6{top:calc(env(safe-area-inset-top) + 74px);left:50%;width:var(--cw,70vw);transform:translateX(-50%);font-size:var(--t6,10.4vw)}
  .buy{top:auto;bottom:calc(env(safe-area-inset-bottom) + 12px);left:var(--gutter);right:var(--gutter);width:auto;transform:none;display:grid;grid-template-columns:1fr auto;column-gap:14px;align-items:center;text-align:left}
  .buy__k,.buy__by{display:none}
  .buy__t{grid-column:1;font-size:26px;margin:0}
  .buy__t span{font-size:11px;letter-spacing:.14em;padding-left:0;margin-top:.4em}
  .buy__p{position:static;width:auto;height:auto;overflow:visible;clip-path:none;grid-column:2;grid-row:1;font:400 40px/1 var(--disp);margin:0}
  .buy__btn{grid-column:1/-1;margin-top:10px}
  .buy__n{grid-column:1/-1;text-align:center;margin-top:6px;font-size:13px}
  .after{grid-column:1/-1;margin-top:0}
}
/* a phone on its side */
@media (max-height:520px) and (min-aspect-ratio:21/20){
  .t1{top:19svh}
  .t1__sub{top:calc(19svh + min(25.2vw,46svh)*1.02)}
  .t1__line{top:calc(19svh + min(25.2vw,46svh)*1.02 + 7svh)}
  .t1__by{bottom:8px}
  .orn-foot{display:none}
  .t6{top:15svh;font-size:9svh;width:44vw}
  .buy{top:37svh;width:44vw}
  .buy__k,.buy__by{display:none}
  .buy__t{font-size:22px;margin:0}
  .buy__t span{margin-top:.3em}
  .buy__btn{min-height:44px;margin-top:6px}
  .buy__n{margin-top:2px;font-size:13px}
  .after{margin-top:0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}