/* This Is That | The Bible Study: a bespoke series page.
   Art direction: the study's own pages. Cream paper, the red / blue / orange lockup with the blue
   "is" between the words, the four-colour stripe along the foot of every page, the black "Lesson"
   tab, old-style serif headings with blue scripture, red hand-lettering ("FACT!", "THE CHURCH = THE
   ARK"), and hand-inked illustrations: the ark, the door post, the Red Sea, the pillar of cloud and
   fire, the brazen altar and laver, the ark of the covenant, the cross, the tomb sealed and opened,
   the church, and a shelf of the books of the Bible.
   The scroll moves through the study's colours as hard grounds handing off with fades:
   cream (the lockup) -> red (Acts, the bridge; the bookshelf) -> deep blue (Lesson 1, the flood)
   -> orange (Lesson 2, 3000 and 3000) -> ink (1 John 5:8) -> red / blue / orange bands (the three
   witnesses, the signature) -> ink (the resurrection) -> cream (the upper room, the giant "is")
   -> night (the church = the ark) -> red (get the study) -> ink footer.
   Lime is SMR's accent only: the buy button, focus rings and label ticks. */

@view-transition { navigation: auto; }

:root{
  --cream:#fbf5dd;
  --paper:#f3ead0;
  --red:#ed3d2a;
  --red-g:#c92e1c;
  --blue:#5787c0;
  --blue-l:#a9c6ea;
  --blue-d:#2d5a93;
  --gold:#d77d19;
  --ink:#211f1e;
  --night:#14223a;
  --lime:#b6ff00;
  --gutter:clamp(20px,4.4vw,64px);
  --serif:Fraunces,'Iowan Old Style','Palatino Linotype',Georgia,serif;
  --cond:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --body:Manrope,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ink)}
body.tit{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);overflow-x:hidden}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
.l4 :focus-visible,.hero :focus-visible{outline-color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-80px;z-index:60;background:var(--lime);color:var(--ink);padding:12px 18px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}
section{position:relative}
blockquote{margin:0}

/* atoms */
.wall{font-family:var(--serif);font-weight:900;font-variation-settings:"opsz" 144;letter-spacing:-.02em;line-height:.9;margin:0}
.wall em{font-style:italic;font-weight:800}
.label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;margin:0;display:flex;align-items:center;gap:12px;color:var(--ink)}
.label i{display:inline-block;width:10px;height:10px;background:var(--lime);flex:none;box-shadow:0 0 0 1px rgba(33,31,30,.35)}
.label.cream{color:var(--cream)}
.label.cream i{box-shadow:none}
.src{margin:28px 0 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;line-height:1.6;color:var(--ink);position:relative;z-index:2}
.src.cream{color:var(--cream)}
.ref{font-family:var(--cond);font-weight:600;font-size:.82em;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;opacity:.9}
.verse p{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(22px,2vw,32px);line-height:1.18;letter-spacing:-.005em}
.verse cite{display:block;margin-top:12px;font-style:normal;font-family:var(--cond);font-weight:800;font-size:14px;letter-spacing:.16em;text-transform:uppercase}
.tab{position:absolute;right:0;top:0;margin:0;background:var(--ink);color:var(--cream);font-family:var(--serif);font-weight:800;font-size:clamp(22px,2.6vw,42px);line-height:1;padding:.36em .7em .42em .6em;z-index:3}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:56px;padding:14px 26px;font:800 13px/1.4 var(--body);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;transition:transform .14s,background .15s,color .15s,border-color .15s}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(1px)}
.btn.lime{background:var(--lime);color:var(--ink)}.btn.lime:hover{background:#fff}
.btn.line{background:transparent;border:1px solid rgba(33,31,30,.6);color:var(--ink)}.btn.line:hover{border-color:var(--ink);background:var(--ink);color:var(--cream)}
.btn.sm{min-height:44px;padding:10px 18px;font-size:11px}
.note{margin:12px 0 0;font-size:13px;line-height:1.5}

/* header: the shared SMR lockup, ink on the study's cream */
.top{position:absolute;top:0;left:0;right:0;z-index:20;height:84px;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:0 var(--gutter);color:var(--ink)}
.nav{display:flex;gap:32px;margin-left:auto}
.nav a{text-decoration:none;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;min-height:44px;display:flex;align-items:center}
.nav a[aria-current]{box-shadow:inset 0 -3px 0 var(--ink)}
.nav a:hover{color:var(--red-g)}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:inherit}
.brand-mark{height:40px;width:40px;display:block;flex:none}
.top .brand-mark{filter:invert(1)}
.brand-name{font-size:11px;font-weight:800;letter-spacing:.16em;line-height:1.3;text-transform:uppercase;white-space:nowrap}
.brand-lg{gap:14px}.brand-lg .brand-mark{height:52px;width:52px}.brand-lg .brand-name{font-size:12px}

/* ---------- 1 · hero: the lockup at poster scale ---------- */
.hero{background:var(--cream);padding:112px var(--gutter) 0;z-index:3;overflow-x:clip}
.crumbs{position:absolute;z-index:3;top:84px;left:var(--gutter)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.crumbs li+li::before{content:"/";margin-right:10px;color:#8a8270}
.crumbs a{text-decoration:none;display:inline-flex;min-height:44px;align-items:center;margin:-14px 0}
.crumbs a:hover{color:var(--red-g)}
.crumbs [aria-current]{color:#5d574b}
.lockup{margin:18px 0 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;font-size:inherit}
.lk{display:block;transform:translate3d(var(--lx,0),0,0)}
.lk img{display:block;width:100%;height:auto}
.lk-this{width:35.6%}
.lk-is{width:23.2%;margin:0 .2%;transform:rotate(var(--lr,0deg))}
.lk-that{width:38.4%}
.lk-sub{flex-basis:100%;display:flex;justify-content:center;margin-top:clamp(14px,2vw,30px)}
.lk-sub img{width:34%;height:auto;display:block}
.hero-low{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,72px);align-items:start;margin-top:clamp(28px,3.4vw,56px);padding-bottom:clamp(60px,6vw,96px)}
.hero-copy{padding-top:clamp(10px,2vw,40px)}
.hero-line{margin:16px 0 0;max-width:24ch;font-family:var(--serif);font-weight:600;font-size:clamp(26px,2.6vw,42px);line-height:1.1;letter-spacing:-.01em}
.hero-line em{font-style:italic;color:var(--red-g)}
.buyrow{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:28px}
.follow{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid rgba(33,31,30,.35)}
.follow:hover{border-color:var(--ink)}
.sheets{position:relative;aspect-ratio:1200/870;margin-right:calc(-1 * var(--gutter) * .4);margin-bottom:calc(-1 * clamp(150px,13vw,260px))}
.sh{position:absolute;width:86%;height:auto;display:block;background:var(--cream);box-shadow:0 1px 0 rgba(0,0,0,.08),0 30px 60px -18px rgba(70,45,10,.5),0 8px 18px -8px rgba(70,45,10,.35)}
.sh-1{right:0;top:9%;transform:rotate(3.2deg);z-index:3;view-transition-name:cover-this-is-that-the-bible-study}
.sh-2{left:0;top:3%;transform:rotate(-6deg);z-index:2}
.sh-3{left:9%;top:-3%;transform:rotate(-12deg);z-index:1;filter:brightness(.97)}
.stripe{position:relative;z-index:1;display:grid;grid-template-columns:21.6fr 21.6fr 19.5fr 37.3fr;height:clamp(16px,1.6vw,26px);margin:0 calc(-1 * var(--gutter))}
.stripe i:nth-child(1){background:var(--red)}.stripe i:nth-child(2){background:var(--blue)}.stripe i:nth-child(3){background:var(--gold)}.stripe i:nth-child(4){background:var(--ink)}

/* ---------- 2 · Acts, the bridge: the bookshelf on red ---------- */
.bridge{background:var(--red-g);color:var(--cream);padding:clamp(170px,15vw,280px) 0 clamp(60px,5vw,90px);overflow:hidden;z-index:2}
.bridge-top{padding:0 var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(24px,4vw,64px);align-items:end}
.bridge-top .label{grid-column:1/-1}
.bridge .wall{margin-top:22px;font-size:clamp(60px,10.6vw,196px)}
.bridge .wall span{display:block}
.b1{color:var(--ink)}
.b2{font-style:italic;font-weight:800}
.acts-notes{list-style:none;margin:0 0 .6em;padding:0;font-family:var(--cond);font-weight:800;font-size:clamp(18px,1.7vw,26px);letter-spacing:.06em;text-transform:uppercase;line-height:1.25}
.acts-notes li{padding:10px 0;border-top:2px solid rgba(251,245,221,.55)}
.shelf{margin:clamp(40px,5vw,80px) 0 0;position:relative;overflow:hidden}
.shelf-pan{position:relative;width:100%;transform:translate3d(var(--sx,0px),0,0)}
.shelf-pan img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 18px rgba(60,10,0,.35))}
.eras{list-style:none;margin:0;padding:0;position:relative;height:clamp(54px,4.6vw,72px);font-family:var(--cond);font-weight:800;font-size:clamp(11px,1vw,15px);letter-spacing:.1em;text-transform:uppercase}
.eras li{position:absolute;top:0;padding-top:10px;border-top:2px solid var(--cream);white-space:nowrap;overflow:hidden;text-overflow:clip;text-align:center}
.e-law{left:.6%;width:6.3%}.e-his{left:7.3%;width:15.2%}.e-poe{left:22.9%;width:5.8%}.e-pro{left:29.1%;width:30.7%}.e-gos{left:60.2%;width:5.3%}
.e-act{left:65.8%;width:1.8%;overflow:visible!important;color:var(--ink)}
.e-act::before{content:"";position:absolute;left:50%;top:-2px;width:3px;height:clamp(150px,14vw,240px);transform:translate(-50%,-100%);background:var(--ink)}
.e-tea{left:68%;width:28.6%}.e-rev{left:96.9%;width:2.6%;font-size:0;overflow:visible!important;border-top:0!important}
.e-rev::after{content:"Prophecy";font-size:clamp(11px,1vw,15px);position:absolute;right:0;top:12px;writing-mode:vertical-rl}
.arrows{margin:clamp(4px,1vw,14px) 0 0;position:relative;height:clamp(60px,6.2vw,110px);font-family:var(--serif);font-weight:800;font-style:italic;font-size:clamp(34px,4.6vw,84px);line-height:1}
.arrows span{position:absolute;top:0;white-space:nowrap}
.arrows b{font-family:var(--body);font-style:normal;font-weight:400}
.a-this1{right:calc(33.3% + 1.25em)}
.a-that{left:66.7%;transform:translateX(-50%);color:var(--ink);font-style:normal;font-weight:900}
.a-this2{left:calc(66.7% + 1.25em)}
.bridge-low{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,96px);align-items:end;padding:clamp(40px,4vw,70px) var(--gutter) 0}
.verse.big p{font-size:clamp(30px,3.6vw,60px);font-style:italic;line-height:1.04}
.bridge-talk{margin:0;font-size:clamp(19px,1.5vw,22px);line-height:1.5;font-weight:700;max-width:36ch}
.bridge-talk strong{font-family:var(--serif);font-style:italic;font-weight:800;font-size:1.3em;color:var(--ink)}
.bridge > .src{padding:0 var(--gutter)}

/* ---------- 3 · Lesson 1 on deep blue, the ark on the art's water ---------- */
.l1{background:var(--blue-d);color:var(--cream);padding:clamp(110px,10vw,170px) var(--gutter) 0;overflow:hidden}
.l1::before{content:"";position:absolute;inset:0 0 auto;height:90px;background:linear-gradient(var(--red-g),rgba(201,46,28,0))}
.l1 .tab{top:clamp(60px,6vw,100px)}
.l1-top{position:relative;z-index:2}
.l1 .wall{margin-top:24px;font-size:clamp(50px,8.6vw,160px)}
.l1 .wall span{display:block}
.l1-em{color:var(--blue-l);font-style:italic;font-weight:800;padding-left:6vw}
.l1-top .verse{margin-top:clamp(28px,3vw,48px);max-width:30ch}
.l1-top .verse p{font-size:clamp(26px,2.6vw,44px);font-style:italic;color:var(--cream)}
.l1-cols{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,56px);margin-top:clamp(56px,6vw,96px)}
.l1-col{border-top:2px solid rgba(251,245,221,.6);padding-top:18px}
.l1-col h3{margin:0 0 12px;font-family:var(--cond);font-weight:800;font-size:clamp(22px,2vw,30px);letter-spacing:.06em;text-transform:uppercase;color:var(--blue-l)}
.l1-col p{margin:0 0 12px;font-size:17px;line-height:1.55;font-weight:600}
.l1-col .q{font-family:var(--serif);font-size:clamp(20px,1.6vw,24px);line-height:1.2;font-weight:600;font-style:italic}
.flood{position:relative;margin:clamp(30px,4vw,70px) calc(-1 * var(--gutter)) 0;min-height:clamp(420px,46vw,860px)}
.flood::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(70px,7vw,130px);background:linear-gradient(rgba(87,135,192,0),var(--blue) 46%);z-index:0}
.ark{position:absolute;right:-7vw;bottom:clamp(14px,1.6vw,30px);width:78vw;max-width:none;height:auto;z-index:1;transform:translate3d(var(--ax,0px),var(--ay,0px),0) rotate(var(--ar,0deg));transform-origin:50% 90%;filter:drop-shadow(0 20px 26px rgba(8,22,44,.35))}
.gave{position:relative;z-index:2;padding:clamp(10px,2vw,40px) var(--gutter) 0;max-width:46vw}
.gave-h{margin:0;font-family:var(--serif);font-weight:900;font-size:clamp(44px,6vw,112px);line-height:.9;letter-spacing:-.02em}
.gave ol{list-style:none;margin:16px 0 0;padding:0;font-family:var(--serif);font-weight:800;font-size:clamp(30px,3.7vw,68px);line-height:1.05;letter-spacing:-.01em}
.gave li span{color:var(--blue-l);font-style:italic;font-weight:600}
.gave .ref{display:block;margin-top:16px;font-size:15px}


/* ---------- 4 · Lesson 2 on orange: 3000 and 3000 ---------- */
.l2{background:var(--gold);color:var(--ink);padding:clamp(110px,10vw,170px) var(--gutter) clamp(70px,7vw,120px);overflow:hidden}
.l2::before{content:"";position:absolute;inset:0 0 auto;height:70px;background:linear-gradient(var(--blue),rgba(87,135,192,0))}
.l2 .tab{top:clamp(60px,6vw,100px)}
.pillar{position:absolute;left:-12vw;top:clamp(40px,5vw,90px);width:52vw;max-width:none;height:auto;z-index:0;opacity:.96;transform:translate3d(0,var(--py,0px),0)}
.l2-in{position:relative;z-index:2;margin-left:clamp(0px,30vw,560px)}
.l2-h{margin:26px 0 0;font-family:var(--cond);font-weight:800;font-size:clamp(20px,1.9vw,30px);letter-spacing:.08em;text-transform:uppercase}
.thousands{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,56px);margin-top:10px}
.th{border-top:3px solid var(--ink);padding-top:10px}
.th-n{margin:0;font-family:var(--serif);font-weight:900;font-size:clamp(84px,11.4vw,214px);line-height:.86;letter-spacing:-.04em}
.th-spirit .th-n{color:var(--cream);-webkit-text-stroke:clamp(2px,.25vw,4px) var(--ink);paint-order:stroke fill}
.th-v{margin:2px 0 0;font-family:var(--serif);font-style:italic;font-weight:800;font-size:clamp(36px,4.6vw,84px);line-height:1}
.th-t{margin:14px 0 0;font-size:17px;line-height:1.5;font-weight:700;max-width:30ch}
.verse.letter{margin-top:clamp(48px,5vw,90px)}
.verse.letter p{font-size:clamp(34px,4.4vw,80px);line-height:1;font-weight:800;letter-spacing:-.02em}
.verse.letter em{font-style:italic;background:linear-gradient(transparent 62%,var(--cream) 62%,var(--cream) 92%,transparent 92%)}
.l2 > .src{margin-left:clamp(0px,30vw,560px)}

/* ---------- 5 · the signature: three that bear witness ---------- */
.wit{background:var(--ink);color:var(--cream)}
.wit::before{content:"";position:absolute;inset:0 0 auto;height:130px;background:linear-gradient(var(--gold),rgba(215,125,25,0));pointer-events:none}
.wit-intro{position:relative;padding:clamp(130px,11vw,190px) var(--gutter) clamp(50px,5vw,80px)}
.wit-intro .tab{top:clamp(70px,7vw,110px)}
.wit-wall{margin-top:24px;font-size:clamp(40px,6.2vw,116px);font-weight:800;line-height:.98;max-width:15ch}
.wit-wall em{color:var(--gold)}
.wit-stage{position:relative;background:var(--ink)}
.wit-head{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px);padding:0 var(--gutter) 28px}
.eras-ctl{display:contents}
.era{all:unset;box-sizing:border-box;font-family:var(--cond);font-weight:800;font-size:clamp(18px,1.8vw,28px);letter-spacing:.08em;text-transform:uppercase;color:var(--cream);border-top:3px solid var(--gold);padding-top:10px;min-height:44px;cursor:default}
.era-verses{display:contents}
.ev{grid-row:1;font-family:var(--serif)}
.wit:not(.live) .eras-ctl{display:none}
.wit:not(.live) .ev::before{content:attr(data-name);display:block;margin-bottom:12px;padding-top:10px;border-top:3px solid var(--gold);font-family:var(--cond);font-style:normal;font-weight:800;font-size:clamp(18px,1.8vw,28px);letter-spacing:.08em;text-transform:uppercase}
.ev[data-ev="0"]{grid-column:1}.ev[data-ev="1"]{grid-column:2}.ev[data-ev="2"]{grid-column:3}
.ev p{margin:0;font-weight:600;font-style:italic;font-size:clamp(17px,1.4vw,22px);line-height:1.25}
.ev cite{display:block;margin-top:8px;font-family:var(--cond);font-style:normal;font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.band{position:relative;overflow:hidden}
.b-blood{background:var(--red-g);color:var(--cream)}
.b-water{background:var(--blue-d);color:var(--cream)}
.b-spirit{background:var(--gold);color:var(--ink)}
.bname{margin:0;padding:clamp(20px,2vw,32px) var(--gutter) 0;font-family:var(--serif);font-weight:900;font-size:clamp(46px,7vw,120px);line-height:.9;letter-spacing:-.02em}
.track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px);padding:clamp(12px,1.4vw,22px) var(--gutter) clamp(24px,2.4vw,40px)}
.cell{margin:0;display:flex;flex-direction:column}
.cell img{display:block;height:clamp(150px,15vw,260px);width:100%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 14px 14px rgba(0,0,0,.25))}
.cell figcaption{margin-top:14px}
.cn{display:block;font-family:var(--serif);font-weight:800;font-size:clamp(22px,2.1vw,36px);line-height:1}
.cd{display:block;margin-top:8px;font-size:16px;line-height:1.4;font-weight:700}
.ce{display:block;margin-bottom:6px;font-family:var(--cond);font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;opacity:.92}
.wit-hint{display:none}
.h-m{display:none}

/* live: the stage pins and the three bands run as one scroll-driven film */
.wit.live .wit-run{height:330vh;position:relative}
.wit.live .wit-stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-rows:auto 1fr 1fr 1fr;overflow:hidden}
.wit.live .wit-head{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(18px,3vw,56px);padding:14px var(--gutter);min-height:clamp(96px,10vh,124px)}
.wit.live .eras-ctl{display:flex;gap:clamp(4px,1vw,16px)}
.wit.live .era{cursor:pointer;border-top:0;padding:10px 14px;display:inline-flex;align-items:center;color:rgba(251,245,221,.72);box-shadow:inset 0 -3px 0 transparent;transition:color .2s,box-shadow .2s}
.wit.live .era:hover{color:var(--cream)}
.wit.live .era[aria-pressed="true"]{color:var(--cream);box-shadow:inset 0 -3px 0 var(--gold)}
.wit.live .era:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.wit.live .era-verses{display:grid;position:relative}
.wit.live .ev{grid-area:1/1;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;pointer-events:none}
.wit.live .ev.on{opacity:1;transform:none}
.wit.live .band{min-height:0;cursor:pointer}
.wit.live .bname{position:absolute;left:0;top:50%;padding:0 var(--gutter);transform:translateY(-50%);font-size:min(8.4vw,15vh);z-index:2;pointer-events:none}
.wit.live .track{display:flex;width:300%;height:100%;padding:0;gap:0;transform:translate3d(calc(var(--x,0) * -33.3333%),0,0);will-change:transform}
.wit.live .cell{flex:0 0 33.3333%;position:relative;height:100%;display:block}
.wit.live .cell img{position:absolute;left:51%;top:53%;height:88%;width:34%;object-position:50% 50%;transform:translate(-50%,-50%) translate3d(var(--px,0px),var(--py,0px),0) rotate(var(--pr,0deg)) scale(var(--s,1));filter:drop-shadow(0 18px 18px rgba(0,0,0,.28))}
.wit.live figcaption{position:absolute;left:70%;right:var(--gutter);top:50%;transform:translateY(-50%);margin:0;opacity:var(--o,1)}
.wit.live .cn{font-size:clamp(24px,2.5vw,46px)}
.wit.live .cell img{transition:transform .25s ease-out}
.wit.live .wit-hint{display:block;position:absolute;right:var(--gutter);bottom:12px;margin:0;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);z-index:3;pointer-events:none}

/* ---------- 6 · Lesson 3 on ink: the resurrection fact ---------- */
.l3{background:var(--ink);color:var(--cream);overflow:hidden;padding:clamp(110px,10vw,170px) 0 0}
.l3::before{content:"";position:absolute;inset:0 0 auto;height:120px;background:linear-gradient(var(--gold),rgba(215,125,25,0));pointer-events:none}
.wit:not(.live) + .l3::before{background:linear-gradient(var(--gold),rgba(215,125,25,0))}
.l3-in{position:relative;z-index:2;padding:0 var(--gutter)}
.l3-wall{margin-top:24px;font-size:clamp(54px,9.6vw,180px);display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 2vw}
.fact{width:clamp(130px,15vw,280px);height:auto;transform:rotate(-6deg) translateY(-.1em)}
.witnesses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,56px);margin-top:clamp(40px,4vw,70px)}
.witnesses blockquote{border-top:2px solid var(--blue);padding-top:16px}
.witnesses p{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(19px,1.55vw,25px);line-height:1.3;color:var(--blue-l)}
.witnesses cite{display:block;margin-top:14px;font-style:normal;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.doteach{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr) minmax(0,.85fr);gap:clamp(24px,3vw,56px);margin-top:clamp(56px,6vw,100px);align-items:start}
.doteach .verse p{font-size:clamp(30px,3.4vw,58px);line-height:1.02;font-weight:800}
.doteach .verse em{color:var(--red);font-style:italic}
.doteach .verse cite{color:var(--gold)}
.dt h3{margin:0 0 10px;font-family:var(--cond);font-weight:800;font-size:22px;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.dt ul{list-style:none;margin:0;padding:0}
.dt li{padding:9px 0;border-top:1px solid rgba(251,245,221,.25);font-size:17px;font-weight:700;line-height:1.35}
.dt li .ref{display:block;color:var(--gold);font-size:14px}
.risen{display:block;position:relative;z-index:1;width:94vw;max-width:none;height:auto;margin:clamp(-20px,-1vw,0px) 0 0 3vw;filter:drop-shadow(0 0 60px rgba(215,125,25,.32))}

/* ---------- 7 · Lesson 4 on cream: the climb to "this is that" ---------- */
.l4{background:var(--cream);color:var(--ink);overflow:hidden;padding:clamp(120px,11vw,190px) var(--gutter) clamp(90px,8vw,140px)}
.l4::before{content:"";position:absolute;inset:0 0 auto;height:140px;background:linear-gradient(var(--ink),rgba(33,31,30,0));z-index:1;pointer-events:none}
.l4 .tab{top:clamp(70px,7vw,110px)}
.coin{position:absolute;right:-11vw;top:clamp(90px,7vw,130px);width:47vw;max-width:none;height:auto;z-index:0;transform:rotate(var(--cr,0deg))}
.l4-in{position:relative;z-index:2}
.climb{list-style:none;margin:28px 0 0;padding:0;font-family:var(--serif);font-weight:600;max-width:70vw}
.climb li{margin:0 0 .35em;line-height:1.08;letter-spacing:-.01em}
.climb li:nth-child(1){font-size:clamp(19px,1.5vw,24px)}
.climb li:nth-child(2){font-size:clamp(21px,1.85vw,30px)}
.climb li:nth-child(3){font-size:clamp(24px,2.3vw,38px)}
.climb li:nth-child(4){font-size:clamp(27px,2.85vw,48px)}
.climb li:nth-child(5){font-size:clamp(30px,3.5vw,60px)}
.climb li.top-line{margin-top:.25em;font-size:clamp(46px,7.2vw,136px);font-weight:900;line-height:.92;letter-spacing:-.03em;max-width:12.5ch}
.climb em{font-style:italic;font-weight:800;color:var(--red-g)}
.climb .ref{font-size:14px;letter-spacing:.14em;vertical-align:.4em;opacity:.8}
.climb li.top-line .ref{font-size:16px}
.l4-pair{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,3vw,56px);margin-top:clamp(56px,6vw,100px);align-items:start;max-width:none}
.l4-pair .verse{border-top:3px solid var(--ink);padding-top:16px}
.l4-pair .verse p{font-size:clamp(20px,1.6vw,26px);color:var(--blue-d)}
.l4-pair .verse:first-child p{font-size:clamp(28px,2.6vw,44px);font-style:italic;color:var(--ink)}

/* ---------- 8 · Lesson 5 at night: the church = the ark ---------- */
.l5{background:var(--night);color:var(--cream);overflow:hidden;padding:clamp(130px,12vw,200px) var(--gutter) clamp(90px,8vw,140px)}
.l5::before{content:"";position:absolute;inset:0 0 auto;height:150px;background:linear-gradient(var(--cream),rgba(251,245,221,0));z-index:1;pointer-events:none}
.l5 .tab{top:clamp(80px,8vw,120px);background:var(--cream);color:var(--ink)}
.church{position:absolute;left:-5vw;bottom:0;width:36vw;max-width:none;height:auto;z-index:0;filter:drop-shadow(0 0 80px rgba(87,135,192,.35))}
.l5-in{position:relative;z-index:2;margin-left:clamp(0px,33vw,640px)}
.l5-h{margin:26px 0 0}
.hand-ark{display:block;width:clamp(260px,40vw,700px);height:auto;filter:brightness(1.35) saturate(1.1)}
.called{list-style:none;margin:clamp(36px,4vw,64px) 0 0;padding:0;font-family:var(--serif);font-weight:900;font-size:clamp(46px,6.8vw,126px);line-height:.95;letter-spacing:-.025em}
.called li{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .3em}
.called li:nth-child(even){padding-left:.9em;font-style:italic;font-weight:800;color:var(--blue-l)}
.called .ref{font-family:var(--cond);font-style:normal;font-weight:800;font-size:clamp(13px,1vw,16px);letter-spacing:.14em;color:var(--gold);opacity:1}
.l5-in > .verse{margin-top:clamp(36px,4vw,60px);max-width:34ch}
.l5-in > .verse p{font-style:italic}
.l5-in > .verse cite{color:var(--gold)}
.noah{position:relative;margin-top:clamp(56px,6vw,100px);padding-top:18px;border-top:2px solid rgba(251,245,221,.4)}
.ark-sm{position:absolute;right:0;top:-.5em;width:clamp(150px,16vw,300px);height:auto;transform:translateY(-80%)}
.noah-k{margin:0;font-family:var(--cond);font-weight:800;font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.noah-v{margin:8px 0 0;font-family:var(--serif);font-weight:800;font-style:italic;font-size:clamp(30px,3.4vw,58px);line-height:1}
.noah ul{list-style:none;margin:22px 0 0;padding:0;columns:2;column-gap:clamp(24px,3vw,48px)}
.noah li{break-inside:avoid;padding:8px 0;border-top:1px solid rgba(251,245,221,.22);font-size:17px;font-weight:700}

/* ---------- 9 · get the study, on red ---------- */
.get{background:var(--red-g);color:var(--cream);overflow:hidden;padding:clamp(120px,11vw,180px) var(--gutter) clamp(90px,8vw,140px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,4vw,80px);align-items:center}
.get::before{content:"";position:absolute;inset:0 0 auto;height:150px;background:linear-gradient(var(--night),rgba(20,34,58,0));pointer-events:none}
.fan{position:relative;aspect-ratio:1/0.92;margin-left:calc(-1 * var(--gutter) - 4vw)}
.f{position:absolute;left:8%;top:22%;width:84%;height:auto;background:var(--cream);box-shadow:0 2px 0 rgba(0,0,0,.08),0 30px 60px -18px rgba(60,6,0,.6);transform-origin:20% 110%;transform:rotate(var(--fr,0deg)) translate3d(var(--fx,0px),var(--fy,0px),0)}
.f5{--fr:-22deg}.f4{--fr:-14deg}.f3{--fr:-6deg}.f2{--fr:2deg}.f1{--fr:9deg}
.get-copy{position:relative;z-index:2}
.get-wall{margin-top:18px;font-size:clamp(56px,7.6vw,140px)}
.get-wall em{color:var(--ink)}
.store{margin:22px 0 0;font-size:clamp(18px,1.4vw,21px);line-height:1.55;font-weight:700;max-width:40ch}
.kit{margin:28px 0 0;padding:0}
.kit div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;padding:11px 0;border-top:1px solid rgba(251,245,221,.4)}
.kit dt{font-family:var(--cond);font-weight:800;font-size:15px;letter-spacing:.14em;text-transform:uppercase}
.kit dd{margin:0;font-size:16px;line-height:1.45;font-weight:600}
.pricerow{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin-top:30px}
.price{margin:0;display:flex;align-items:baseline;gap:8px}
.price strong{font-family:var(--serif);font-weight:900;font-size:clamp(56px,5vw,80px);line-height:1}
.price span{font-size:12px;font-weight:800;letter-spacing:.16em}
.get .note{color:var(--cream)}
.back{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:16px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid rgba(251,245,221,.45)}
.back:hover{border-color:var(--cream)}

/* footer */
.foot{background:var(--ink);color:#cfc8b8;padding:0 var(--gutter) 40px;position:relative}
.foot::before{content:"";position:absolute;inset:-90px 0 auto;height:90px;background:linear-gradient(rgba(33,31,30,0),var(--ink));pointer-events:none}
.fgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-top:64px;align-items:start}
.fbrand{grid-column:1/5}.fbrand .brand{color:var(--cream)}.fbrand p{margin:20px 0 0;font-size:13px;line-height:1.7;max-width:300px}
.fnav{display:flex;flex-direction:column;gap:4px}
.fnav:nth-of-type(1){grid-column:7/10}.fnav:nth-of-type(2){grid-column:10/13}
.fnav a{text-decoration:none;font-size:11px;letter-spacing:.14em;text-transform:uppercase;min-height:44px;display:flex;align-items:center}
.fnav a:hover{color:#fff}
.fline{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-top:48px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#b3ad9f}

/* entrances (motion only) */
@media (prefers-reduced-motion:no-preference){
  .js .lk-is img{animation:coin-in .9s cubic-bezier(.2,.9,.25,1.15) .15s both}
  .js .lk-this img{animation:slide-l .8s cubic-bezier(.2,.8,.2,1) both}
  .js .lk-that img{animation:slide-r .8s cubic-bezier(.2,.8,.2,1) both}
  .js .sh-1{animation:sheet-in 1s cubic-bezier(.2,.8,.2,1) .35s both}
  @keyframes coin-in{from{transform:scale(.4) rotate(-200deg);opacity:0}to{transform:none;opacity:1}}
  @keyframes slide-l{from{transform:translateX(18%);opacity:0}to{transform:none;opacity:1}}
  @keyframes slide-r{from{transform:translateX(-18%);opacity:0}to{transform:none;opacity:1}}
  @keyframes sheet-in{from{transform:rotate(9deg) translate(10%,8%);opacity:0}to{transform:rotate(3.2deg);opacity:1}}
}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .nav{display:none}
  .hero-low{grid-template-columns:1fr;gap:20px}
  .sheets{width:min(86%,720px);margin:10px 0 calc(-1 * clamp(120px,16vw,200px)) auto}
  .bridge-top{grid-template-columns:1fr}
  .acts-notes{margin-top:24px;max-width:520px}
  .bridge-low{grid-template-columns:1fr}
  .l1-cols{grid-template-columns:1fr 1fr}
  .l1-col:last-child{grid-column:1/-1}
  .gave{max-width:60vw}
  .l2-in,.l2 > .src{margin-left:22vw}
  .pillar{width:60vw;left:-22vw;opacity:.55}
  .witnesses{grid-template-columns:1fr}
  .doteach{grid-template-columns:1fr 1fr}
  .doteach .verse{grid-column:1/-1}
  .l4-pair{grid-template-columns:1fr 1fr}
  .l4-pair .verse:first-child{grid-column:1/-1}
  .l5-in{margin-left:26vw}
  .church{width:40vw;left:-12vw;opacity:.55}
  .get{grid-template-columns:1fr}
  .fan{width:min(92vw,760px);margin:0 auto 0 -6vw}
}

/* ---------- phone: its own crops ---------- */
@media (max-width:700px){
  .top{height:72px}
  .top .btn{display:none}
  .crumbs{top:68px}
  .hero{padding-top:104px}
  .lockup{margin-top:14px;justify-content:flex-start}
  .lk-this{width:66%}
  .lk-is{width:40%;margin:-9% 0 -9% 50%;order:0}
  .lk-that{width:72%;margin-left:auto}
  .lk-sub{justify-content:flex-start;margin-top:14px}
  .lk-sub img{width:62%}
  .hero-copy{order:2}
  .hero-low{display:flex;flex-direction:column;margin-top:22px;padding-bottom:56px}
  .sheets{order:1;width:100%;margin:0 0 10px;aspect-ratio:1200/900}
  .sh{width:92%}
  .hero-line{font-size:27px}
  .buyrow .btn{width:100%}
  .bridge{padding-top:90px}
  .bridge .wall{font-size:clamp(54px,17vw,84px)}
  .shelf-pan{width:1000px;transform:translate3d(var(--sx,-470px),0,0)}
  .eras{font-size:11px;height:56px}
  .arrows{font-size:38px;height:60px}
  .l1 .wall{font-size:clamp(44px,13.4vw,64px)}
  .l1-em{padding-left:0}
  .l1-cols{grid-template-columns:1fr}
  .flood{min-height:0;padding-bottom:62vw}
  .ark{width:140vw;right:-46vw}
  .gave{max-width:none}
  .gave-h{font-size:52px}.gave ol{font-size:36px}
  .tab{font-size:20px}
  .l2{padding-top:70px}
  .pillar{position:relative;display:block;width:118vw;left:auto;top:auto;margin:0 0 -4vw -34vw;opacity:1;transform:none}
  .l5{display:flex;flex-direction:column;padding-bottom:0}
  .church{order:3;position:relative;display:block;left:auto;bottom:auto;width:84vw;margin:40px 0 0 -22vw;opacity:1}
  .l2-in,.l2 > .src{margin-left:0}
  .thousands{grid-template-columns:1fr;gap:26px}
  .th-n{font-size:clamp(96px,32vw,140px)}
  .wit-wall{font-size:clamp(36px,10.6vw,52px)}
  .wit-head{grid-template-columns:1fr}
  .ev{grid-row:auto;grid-column:1!important}
  .track{grid-template-columns:1fr;gap:22px}
  .cell{display:grid;grid-template-columns:44% 1fr;gap:16px;align-items:center}
  .cell img{height:120px}
  .cell figcaption{margin-top:0}
  .wit.live .wit-head{grid-template-columns:1fr;gap:6px;padding:10px var(--gutter) 12px;min-height:0}
  .wit.live .eras-ctl{justify-content:space-between;gap:0;margin:0 -10px}
  .wit.live .era{font-size:16px;padding:8px 10px}
  .wit.live .ev p{font-size:15px;line-height:1.25}
  .wit.live .ev cite{font-size:11px;margin-top:4px}
  .wit.live .era-verses{min-height:78px}
  .wit.live .bname{writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);font-size:min(13vw,7.4vh);padding:0 0 0 12px}
  .wit.live .cell{display:block}
  .wit.live .cell img{left:40%;top:46%;height:72%;width:48%}
  .wit.live figcaption{left:auto;right:var(--gutter);top:auto;bottom:14px;transform:none;width:44%;text-align:right}
  .wit.live .cn{font-size:21px}
  .wit.live .cd{font-size:13px;margin-top:4px}
  .wit.live .ce{font-size:11px;margin-bottom:3px}
  .wit.live .cell img{transform:translate(-50%,-50%) translate3d(var(--px,0px),var(--py,0px),0) rotate(var(--pr,0deg)) scale(var(--s,1))}
  .h-d{display:none}.h-m{display:inline}
  .wit.live .wit-hint{bottom:auto;top:0;opacity:0}
  .l3-wall{font-size:clamp(50px,15vw,74px)}
  .fact{width:120px}
  .doteach{grid-template-columns:1fr}
  .risen{width:150vw;margin-left:-25vw}
  .coin{width:110vw;right:-62vw;top:110px;opacity:.9}
  .climb{max-width:none}
  .climb li.top-line{font-size:clamp(44px,13.6vw,64px)}
  .l4-pair{grid-template-columns:1fr}
  .l5-in{margin-left:0}
  .called{font-size:clamp(42px,13vw,62px)}
  .noah ul{columns:1}
  .ark-sm{width:130px}
  .get{padding-top:110px}
  .fan{width:118vw;margin-left:-14vw}
  .get-wall{font-size:clamp(52px,16vw,76px)}
  .kit div{grid-template-columns:86px minmax(0,1fr)}
  .pricerow .btn{width:100%}
  .fgrid{display:block;padding-top:48px}.fnav{margin-top:24px}
}
@media (max-width:350px){
  .brand-name{font-size:10px}
  .l1 .wall,.bridge .wall{font-size:42px}
}
@media (hover:none),(pointer:coarse){.h-d{display:none}.h-m{display:inline}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}