/* This is That – The Bible Study. The page is the flip chart: five full-bleed sheets on one spiral hinge. */
@font-face{font-family:"Fraunces";src:url(/assets/books/this-is-that/fraunces-latin.woff2) format("woff2");font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/assets/books/this-is-that/fraunces-latin-italic.woff2) format("woff2");font-weight:700 900;font-style:italic;font-display:swap}
@view-transition{navigation:auto}

.tit{
  --cream:#FBF6DE;
  --cream-2:#F1E7C4;
  --red:#EC3E2B;
  --blue:#5787BF;
  --orange:#D87D1A;
  --ink:#231F20;
  --ink-2:#4F463D;
  --hinge:72px;
  --fr:"Fraunces",Georgia,"Times New Roman",serif;
  --coil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='40' viewBox='0 0 22 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23595b60'/%3E%3Cstop offset='.5' stop-color='%23f2f3f4'/%3E%3Cstop offset='1' stop-color='%237c7f84'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='7.5' y='28' width='7' height='9' rx='3.5' fill='%231c1917' fill-opacity='.82'/%3E%3Cpath d='M13 32.5C14.5 20 14 9 10.5 3.2' fill='none' stroke='%23000' stroke-opacity='.35' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M9 33C9.5 18 11 7.5 15 3' fill='none' stroke='url(%23g)' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background:var(--midnight);
}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* the stage */
.chart{position:relative;background:var(--cream)}
.chart__stage{position:relative;overflow:clip}
.chart__runway{display:none}
.flip-on .chart__stage{position:sticky;top:0;perspective:2600px;perspective-origin:50% var(--hinge)}
.flip-on .chart__runway{display:block;height:400vh;height:400svh}

/* the hinge: the easel rail and its wire coil, over every sheet */
.hinge{position:absolute;inset:0 0 auto 0;height:var(--hinge);z-index:10;background:linear-gradient(180deg,#110f0e,#2b2724);box-shadow:0 2px 0 rgba(0,0,0,.25);pointer-events:none}
.hinge__coil{position:absolute;left:0;right:0;bottom:-14px;height:40px;background:var(--coil) repeat-x 50% 0/22px 40px;filter:drop-shadow(0 2px 1px rgba(0,0,0,.28))}

/* sheets */
.sheet{position:relative;overflow:clip;min-height:clamp(600px,100vh,1000px)}
.sheet__face{position:relative;min-height:inherit;height:100%}
.sheet__shade{position:absolute;inset:0;z-index:6;opacity:0;pointer-events:none;background:linear-gradient(180deg,rgba(28,22,16,.05) 10%,rgba(28,22,16,.72));box-shadow:inset 0 -5px 0 rgba(255,251,236,.85),inset 0 -9px 6px rgba(0,0,0,.18)}
.sheet__cast{position:absolute;left:0;right:0;top:var(--hinge);height:34vh;z-index:5;opacity:0;pointer-events:none;background:linear-gradient(180deg,rgba(28,22,16,.62),rgba(28,22,16,.22) 30%,rgba(28,22,16,0));will-change:transform,opacity}
.sheet + .sheet{box-shadow:inset 0 22px 26px -18px rgba(28,22,16,.45)}
.flip-on .sheet[data-sheet]{position:absolute;inset:0 0 auto 0;height:100vh;height:100svh;min-height:0;transform-origin:50% var(--hinge);backface-visibility:hidden;will-change:transform;box-shadow:none}
.flip-on .sheet--close{min-height:100vh;min-height:100svh;box-shadow:none}
.sheet--cover{z-index:5}.sheet--red{z-index:4}.sheet--blue{z-index:3}.sheet--orange{z-index:2}.sheet--close{z-index:1}
[data-rise]{will-change:transform,opacity}

/* the four-colour stripe from the foot of every page */
.stripe{position:absolute;left:0;right:0;bottom:0;height:clamp(14px,2.3vh,26px);background:linear-gradient(90deg,var(--red) 0 33.4%,var(--blue) 33.4% 66.7%,var(--orange) 66.7%)}

/* 1. cover */
.sheet--cover{background:var(--cream);color:var(--ink)}
.sheet--cover .sheet__face{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(var(--hinge) + 4vh) var(--gutter) calc(9vh + 26px)}
.cover__kicker{font:700 13px/1.3 var(--label);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2);margin-bottom:clamp(20px,4.5vh,48px)}
.cover__title{--lw:min(86vw,1560px,calc((100vh - 330px) * 4.08));display:flex;flex-direction:column;align-items:center}
.lockup{position:relative;display:block;width:var(--lw);aspect-ratio:731/179}
.lockup img,.easel__lockup img{position:absolute;height:auto;max-width:none}
.lockup__this{left:0;top:10.06%;width:35.16%}
.lockup__is{left:37.62%;top:0;width:22.57%}
.lockup__that{left:61.97%;top:13.4%;width:38.03%}
.lockup__sub{width:calc(var(--lw) * .3967);margin-top:calc(var(--lw) * .042)}
.cover__by{margin-top:clamp(18px,3.4vh,40px);font:italic 600 clamp(18px,1.5vw,26px)/1.2 var(--serif);color:var(--ink)}
.cover__cue{position:absolute;right:var(--gutter);bottom:calc(clamp(14px,2.3vh,26px) + 18px);display:flex;align-items:center;gap:8px;font:700 12px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.cover__cue svg{width:16px;height:16px}
html:not(.flip-on) .cover__cue{display:none}
.flip-on .cover__cue svg{animation:tit-nudge 2.4s ease-in-out infinite}
@keyframes tit-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* 2. red: illustrated Bible Study chart */
.sheet--red{background:var(--red);color:var(--cream)}
.red__wall{position:relative;z-index:2;padding:calc(var(--hinge) + 3.2vh) var(--gutter) 0;font-family:var(--fr);font-weight:900;line-height:.86;letter-spacing:-.025em}
.red__big{display:block;font-size:min(17.2vw,30vh);margin-left:-.04em}
.red__line{display:block;font-size:min(6.6vw,12vh);margin-top:.2em;letter-spacing:-.015em}
.red__line em{font-style:italic;font-weight:800;color:var(--ink)}
.red__page{position:absolute;z-index:1;width:min(76vw,1650px);right:-4vw;top:56%;transform:rotate(-2.6deg);transform-origin:0 0;border-radius:2px;box-shadow:0 2px 0 rgba(0,0,0,.08),0 30px 60px -10px rgba(70,10,0,.55),0 8px 18px rgba(70,10,0,.3)}

/* 3. blue: 3 lesson */
.sheet--blue{background:radial-gradient(ellipse 70% 80% at 78% 60%,#6a98cd,var(--blue) 60%,#4c79ae);color:var(--cream)}
.blue__pillar{position:absolute;z-index:1;right:-7vw;bottom:-14vh;height:116vh;width:auto;max-width:none;filter:drop-shadow(0 30px 50px rgba(14,30,60,.35))}
.blue__wall{position:absolute;z-index:2;left:var(--gutter);bottom:5vh;display:flex;align-items:baseline;gap:.12em;font-family:var(--fr);font-weight:900;line-height:.78;letter-spacing:-.03em}
.blue__num{font-size:min(74vh,52vw);margin-left:-.05em}
.blue__word{font-style:italic;font-weight:800;font-size:min(19vh,13vw)}

/* 4. orange: Teachers Manual */
.sheet--orange{background:radial-gradient(ellipse 80% 60% at 50% 100%,#e8902c,var(--orange) 70%);color:var(--ink)}
.orange__text{position:relative;z-index:2;padding:calc(var(--hinge) + 5vh) var(--gutter) 0}
.orange__kicker{font:700 clamp(14px,1.05vw,16px)/1.3 var(--label);letter-spacing:.22em;text-transform:uppercase}
.orange__wall{margin-top:.18em;font:900 min(12.6vw,25vh)/.84 var(--fr);letter-spacing:-.03em;margin-left:-.04em}
.orange__accent{margin-top:.35em;font:italic 800 min(4.4vw,8.4vh)/1 var(--fr);letter-spacing:-.01em}
.orange__accent em{font-style:italic}
.orange__tomb{position:absolute;z-index:1;left:50%;bottom:-9vh;width:min(98vw,2250px);transform:translateX(-44%);max-width:none;filter:drop-shadow(0 -10px 40px rgba(90,40,0,.25))}

/* 5. close: the chart as an object, in light */
.sheet--close{background:radial-gradient(ellipse 52% 60% at 72% 46%,#fffdf2,var(--cream) 58%,var(--cream-2));color:var(--ink)}
.sheet--close .sheet__face{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:auto 1fr auto;grid-template-areas:"type easel" "buy easel" "after after";column-gap:2vw;padding:calc(var(--hinge) + 4.5vh) var(--gutter) 0;min-height:100vh;min-height:100svh}
.close__type{grid-area:type;position:relative;z-index:2}
.close__kicker{font:700 13px/1.3 var(--label);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2)}
.close__wall{margin-top:.06em;font:900 min(21vw,42vh)/.8 var(--fr);letter-spacing:-.04em;color:var(--blue);white-space:nowrap;margin-left:-.05em}
.close__wall em{font-style:italic;font-weight:800;color:var(--red);font-size:.62em;margin:0 .02em}

.easel{grid-area:easel;position:relative;z-index:3;align-self:end;justify-self:end;width:min(104%,860px);margin:0 -1vw 10vh 0;perspective:1800px}
.easel::before{content:"";position:absolute;inset:-30% -20% -10% -30%;z-index:-2;background:radial-gradient(closest-side,rgba(255,253,240,.95),rgba(255,253,240,0));pointer-events:none}
.easel__chart{position:relative;aspect-ratio:4/3;transform:rotateX(11deg) rotateY(-22deg) rotateZ(.8deg);transform-style:preserve-3d;transform-origin:50% 100%}
.easel__front{position:absolute;inset:0;background:var(--cream);border-radius:2px;overflow:hidden;view-transition-name:book-this-is-that;
  box-shadow:1px 2px 0 #e7dcbb,2px 4px 0 #f6efd5,3px 6px 0 #ddd1ad,4px 8px 0 #f3ead0,5px 10px 0 #d6c9a3,6px 12px 0 #efe5c8,7px 14px 0 #d6c9a3,8px 16px 0 #efe5c8,9px 18px 0 #cdbf98,10px 20px 0 #e8ddbd,11px 22px 0 #bfb08a,14px 26px 6px rgba(60,40,10,.3)}
.easel__front::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.55),rgba(255,255,255,0) 38%,rgba(60,40,10,0) 62%,rgba(60,40,10,.12));pointer-events:none}
.easel__lockup{position:absolute;left:15%;top:33%;width:70%;aspect-ratio:731/179}
.easel__sub{position:absolute;left:36.1%;top:56.5%;width:27.8%;height:auto}
.easel__front .stripe{height:6%}
.easel__coil{position:absolute;left:2.5%;right:2.5%;top:-14px;height:28px;background:var(--coil) repeat-x 50% 0/15px 28px;transform:translateZ(1px);filter:drop-shadow(0 2px 1px rgba(0,0,0,.25))}
.easel__back,.easel__stack{display:none}
.easel__shadow{position:absolute;left:2%;right:-10%;bottom:-9%;height:20%;z-index:-1;background:radial-gradient(closest-side,rgba(60,40,10,.42),rgba(60,40,10,0));filter:blur(6px)}

.buy{grid-area:buy;position:relative;z-index:2;align-self:end;padding-bottom:4vh}
.buy__title{font:900 clamp(28px,2.5vw,42px)/1 var(--fr);letter-spacing:-.015em}
.buy__title span{display:block;margin-top:.35em;font:700 13px/1.2 var(--label);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2)}
.buy__by{margin-top:14px;font:italic 600 19px/1.3 var(--serif)}
.buy__variant{margin-top:18px;font:700 13px/1.3 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.buy__price{margin-top:6px;font:900 clamp(34px,3vw,48px)/1 var(--fr);letter-spacing:-.02em}
.buy__btn{margin-top:20px;min-width:180px;background:var(--ink);color:var(--cream)}
.buy__btn:hover{background:#000}
.buy__note{margin-top:12px;font-size:15px;color:var(--ink-2)}
.sheet--close :focus-visible{outline-color:var(--ink)}
.after{grid-area:after;position:relative;z-index:2;display:flex;justify-content:space-between;gap:24px;padding:6px 0 calc(4vh + 40px)}
.after .textlink{color:var(--ink)}
.sheet--close .sheet__face::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40px;background:linear-gradient(180deg,rgba(5,11,26,0),var(--midnight));pointer-events:none}

/* phone and narrow */
@media (max-width:980px){
  .sheet--close .sheet__face{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;grid-template-areas:"type" "easel" "buy" "after";padding-top:calc(var(--hinge) + 4vh)}
  .close__wall{font-size:min(31vw,22vh)}
  .easel{justify-self:center;align-self:start;width:min(88vw,560px);margin:3vh 0 6vh}
  .buy{align-self:start}
}
@media (max-width:760px){
  .tit{--hinge:68px}
}
/* phone, and any tall portrait screen, get their own crops */
@media (max-width:760px), (max-aspect-ratio:4/5){
  .cover__title{--lw:min(88vw,calc((100vh - 360px) / .863))}
  .lockup{aspect-ratio:1/.863}
  .lockup .lockup__this{left:0;top:0;width:66%}
  .lockup .lockup__is{left:67%;top:25.5%;width:30%}
  .lockup .lockup__that{left:14%;top:64.9%;width:76%}
  .lockup__sub{width:calc(var(--lw) * .62);margin-top:calc(var(--lw) * .07)}
  .cover__kicker{font-size:12px;letter-spacing:.2em;max-width:22ch}
  .cover__cue{right:50%;transform:translateX(50%);white-space:nowrap}
  .red__wall{padding-top:calc(var(--hinge) + 4vh)}
  .red__big{font-size:min(17.4vw,24vh)}
  .red__line{font-size:min(10.6vw,7vh);margin-top:.28em}
  .red__line em{display:block}
  .red__page{width:172vw;right:auto;left:-18vw;top:46%;transform:rotate(-4deg)}
  .blue__wall{top:calc(var(--hinge) + 2.5vh);bottom:auto;flex-direction:column;align-items:flex-start;gap:0}
  .blue__num{font-size:min(70vw,38vh)}
  .blue__word{font-size:min(19vw,10vh);margin-top:-.05em}
  .blue__pillar{height:auto;width:152vw;right:-50vw;bottom:-9vh}
  .orange__wall{font-size:min(19vw,12vh)}
  .orange__accent{font-size:min(7.4vw,4.6vh);margin-top:.5em}
  .orange__tomb{width:178vw;bottom:-3vh;transform:translateX(-52%)}
  .buy__btn{width:100%;max-width:340px}
}
@media (max-width:380px){
  .after{gap:12px}
}