/* Never Forget: a bespoke series page.
   Art direction: the series' own ground, a photograph of Bible pages (Psalms 114 to 118), with the title in heavy white
   wide grotesque and every line of voice in thin, wide, peach capitals (sampled from the quote graphics: #d8a98b).
   The pages never stop: they are one fixed ground behind the whole scroll. Only their light changes, following the
   five lessons: the pages (Part I), darkness as memory fades (Part II), the warm light of the feasts (Part III),
   a ribband of blue (Part IV), and the same pages brought into the light for the bread of the Word (Part V and the close).
   Signature motion: in Part II the truths fade from the page as you scroll (forgetting), and you bring them back
   by moving across the page or tapping it (remembering).
   Lime is SMR's accent only (buy, focus, label tick). Archivo (wide axis) is the one added face, for the art's lockup. */

@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }

:root{
  --ink:#2b2723;          /* the pages, sampled: rgb(48,44,39) */
  --night:#171513;
  --peach:#d8a98b;        /* the art's voice, sampled */
  --bone:#f2ede6;
  --mute:#bdb3a7;
  --paper:#ebe3d6;
  --paper-ink:#24201b;
  --paper-mute:#5e554b;
  --rust:#7f4127;         /* the peach, deepened for the light pages (AA on paper) */
  --blue:#a9c4ff;
  --lime:#b6ff00;
  --gutter:64px;
  --pad:max(var(--gutter),calc((100vw - 1312px) / 2));
  --wide:'Archivo','Helvetica Neue',Arial,sans-serif;
  --cond:'Barlow Condensed',Impact,sans-serif;
  --body:Manrope,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--night)}
body.nf{margin:0;background:var(--night);color:var(--bone);font-family:var(--body);overflow-x:hidden}
a{color:inherit}
img{max-width:100%}
figure,blockquote{margin:0}
:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
.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:50;background:var(--lime);color:#000;padding:12px 18px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}

/* ---------- the ground: fixed pages, light layers set by JS (--deep --amber --blue --light, 0..1) ---------- */
.ground{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--ink)}
.ground picture,.ground img{position:absolute;inset:0;width:100%;height:100%;display:block}
.ground img{object-fit:cover;max-width:none}
.g-pages{filter:brightness(.44) contrast(.86) saturate(.9) blur(.4px);transform:scale(1.01)}
.g-deep{position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(6,5,4,.78),rgba(6,5,4,.92));opacity:var(--deep,0)}
.g-amber{position:absolute;inset:0;opacity:var(--amber,0);
  background:radial-gradient(ellipse 60% 55% at 62% 38%,rgba(255,176,96,.34),rgba(255,140,60,0) 70%),linear-gradient(180deg,rgba(92,42,10,.62),rgba(60,26,6,.7))}
.g-blue{position:absolute;inset:0;opacity:var(--blue,0);
  background:radial-gradient(ellipse 70% 60% at 30% 40%,rgba(70,120,230,.32),rgba(70,120,230,0) 70%),linear-gradient(180deg,rgba(9,22,58,.8),rgba(6,14,38,.86))}
.g-lightwrap{opacity:var(--light,0)}
.g-light{filter:invert(1) sepia(.55) saturate(.55) brightness(1.1) contrast(.32)}
.g-lightwrap::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 70% at 50% 45%,rgba(246,239,227,.56),rgba(232,222,206,.68))}
.g-dawn{position:absolute;inset:0;opacity:var(--dawn,0);background:radial-gradient(ellipse 90% 75% at 50% 42%,rgba(255,214,170,.95),rgba(214,150,100,.9) 55%,rgba(150,96,62,.9))}
.g-vig{position:absolute;inset:0;background:radial-gradient(ellipse 85% 80% at 50% 45%,rgba(0,0,0,0) 45%,rgba(0,0,0,.55));opacity:calc(1 - var(--light,0) * .85)}

main,.top,.foot{position:relative;z-index:1}
.hero,.edge,.party,.fringe,.bread,.kit,.close{overflow-x:clip}

/* shared atoms */
.label{font:800 11px/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase;margin:0;display:flex;align-items:center;gap:12px;color:var(--mute)}
.label i{display:inline-block;width:10px;height:10px;background:var(--lime);flex:none}
.big{margin:22px 0 0;font:850 clamp(34px,4.1vw,66px)/1.0 var(--wide);font-stretch:112%;text-transform:uppercase;letter-spacing:-.022em;color:var(--bone);text-wrap:balance}
.acc{font-family:var(--wide);font-weight:300;font-stretch:112%;color:var(--peach);text-transform:uppercase;letter-spacing:.005em}
.soft{font-weight:300;color:var(--bone)}
.kicker{margin:0;font:600 12px/1.3 var(--wide);font-stretch:118%;letter-spacing:.24em;text-transform:uppercase;color:var(--peach)}
.verse p,.quote p{margin:0;font:500 clamp(19px,1.6vw,25px)/1.5 var(--body);letter-spacing:-.005em;color:var(--bone)}
.verse footer,.quote footer{margin-top:12px;font:600 11px/1.3 var(--wide);font-stretch:115%;letter-spacing:.22em;text-transform:uppercase;color:var(--peach)}
.pull{margin:0;font:600 clamp(21px,1.85vw,29px)/1.4 var(--body);letter-spacing:-.012em;max-width:600px;text-wrap:pretty}
.body{margin:22px 0 0;max-width:520px;font-size:17px;line-height:1.7;color:var(--bone);opacity:.9}
.src{margin:56px 0 0;font-size:12px;line-height:1.6;color:var(--mute);max-width:640px}
.src cite{font-style:normal;font-weight:600}
.ref{margin:14px 0 0;font:600 11px/1.3 var(--wide);font-stretch:115%;letter-spacing:.22em;text-transform:uppercase;color:var(--peach)}
.note{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--mute)}
.h2{margin:22px 0 0;font:850 clamp(32px,3.2vw,52px)/1.02 var(--wide);font-stretch:112%;text-transform:uppercase;letter-spacing:-.02em}
.h2 .acc{display:block}

.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:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;background:none;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:#0b0b0b;border:0}.btn.lime:hover{background:var(--bone)}
.btn.line{border:1px solid rgba(242,237,230,.42);color:var(--bone)}.btn.line:hover{border-color:var(--lime);color:var(--lime)}
.btn.sm{min-height:44px;padding:10px 18px;font-size:11px}

/* header */
.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)}
.nav{display:flex;gap:32px;margin-left:auto}
.nav a{text-decoration:none;font-size:11px;letter-spacing:.14em;text-transform:uppercase;min-height:44px;display:flex;align-items:center;color:var(--mute);transition:color .15s}
.nav a:hover,.nav a[aria-current]{color:var(--bone)}
.nav a[aria-current]{box-shadow:inset 0 -3px 0 var(--lime)}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:var(--bone)}
.brand-mark{height:40px;width:40px;display:block;flex:none}
.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 ---------- */
.hero{position:relative;min-height:max(100svh,760px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-content:start;padding:118px var(--gutter) 9vh}
.crumbs{position:absolute;left:var(--gutter);top:96px;z-index:3}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--mute)}
.crumbs li+li::before{content:'/';margin-right:10px;color:#7d7368}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.crumbs a:hover{color:var(--lime)}
.crumbs [aria-current]{display:inline-flex;align-items:center;min-height:44px;color:var(--bone)}
.hero::before{content:'';position:absolute;left:-10%;top:0;bottom:0;width:75%;pointer-events:none;background:radial-gradient(ellipse 60% 50% at 40% 78%,rgba(14,12,10,.7),rgba(14,12,10,0) 100%)}
.hero-text{grid-column:1/7;grid-row:3;position:relative;z-index:2;margin-top:3vh}
.title{grid-column:1/-1;grid-row:1;position:relative;z-index:3;margin:3vh 0 0;text-align:center;font:900 min(19.6vw,27.5svh)/.8 var(--wide);font-stretch:116%;letter-spacing:-.045em;text-transform:uppercase;color:#f6f3ee;text-shadow:0 10px 60px rgba(0,0,0,.45);pointer-events:none}
.title span{display:block}
.tagline{grid-column:1/-1;grid-row:2;position:relative;z-index:3;text-align:center;margin:2.6vh 0 0;font:400 clamp(14px,1.25vw,19px)/1.3 var(--wide);font-stretch:116%;letter-spacing:.06em;text-transform:uppercase;color:var(--peach)}
.hero-text .label{margin-bottom:22px}
.lede{margin:0;max-width:540px;font:500 clamp(18px,1.4vw,21px)/1.55 var(--body);color:var(--bone)}
.lede .acc{font-size:.9em;letter-spacing:.03em;font-weight:400}
.aud{margin:14px 0 0;max-width:480px;font-size:14px;line-height:1.6;color:var(--mute)}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-cover{position:absolute;z-index:1;right:5vw;top:calc(118px + 3vh + min(19.6vw,27.5svh) * 1.52);width:min(28vw,46svh)}
.cover-light{position:absolute;left:-60%;right:-60%;top:-42%;bottom:-48%;background:radial-gradient(closest-side,rgba(240,196,160,.42),rgba(216,169,139,.16) 42%,rgba(216,169,139,0) 100%);pointer-events:none;mix-blend-mode:screen}
.cover-obj{position:relative;display:block;width:100%;height:auto;transform:rotate(-3.2deg);view-transition-name:cover-never-forget;
  box-shadow:0 0 0 1px rgba(255,236,220,.16),0 2px 0 rgba(255,255,255,.08),0 30px 60px -12px rgba(0,0,0,.75),0 70px 120px -30px rgba(0,0,0,.6),-30px 50px 80px -40px rgba(0,0,0,.55)}

/* ---------- 2 · Part I, the double-edged sword ---------- */
.edge{position:relative;padding:2vh var(--pad) 22vh}
.edge-head{max-width:1120px;position:relative;z-index:2;margin-top:-1vw}
/* the lesson screens at poster scale, full bleed, fading into the same pages */
.band{position:relative;margin:0 calc(-1 * var(--pad));pointer-events:none}
.band img{display:block;width:100%;height:auto;filter:brightness(.74) contrast(.96);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 78%,transparent 100%)}
.band-3 img{filter:sepia(.7) saturate(1.5) hue-rotate(-10deg) brightness(.8)}
.edge .big{font-size:clamp(36px,4.6vw,76px)}
.edges{display:grid;grid-template-columns:minmax(0,1fr) 2px minmax(0,1fr);column-gap:clamp(36px,6vw,110px);margin-top:12vh;align-items:start}
.side{padding-top:6px}
.side .verse,.side .pull{margin-top:22px}
.side-against{padding-top:16vh}
.blade{position:relative;align-self:stretch;width:2px;background:linear-gradient(180deg,rgba(242,237,230,0),rgba(242,237,230,.5) 18%,rgba(242,237,230,.5) 82%,rgba(242,237,230,0));min-height:380px}
.glint{position:absolute;left:-3px;width:8px;height:140px;top:calc(var(--g,.5) * (100% - 140px));border-radius:8px;background:linear-gradient(180deg,rgba(255,236,220,0),rgba(255,236,220,.95),rgba(255,236,220,0));box-shadow:0 0 22px 4px rgba(232,186,150,.45)}

/* ---------- 3 · Part II, spiritual amnesia (signature) ---------- */
.amnesia{position:relative;height:310vh}
.am-stage{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.am-inner{position:relative;z-index:2;width:100%;margin:0 auto;padding:26px var(--pad);display:grid;grid-template-columns:minmax(0,1fr)}
.am-inner>.label{grid-row:1}.am-inner>.am-h{grid-row:2;grid-column:1}.am-inner>.passage{grid-row:3}
.am-inner>.am-foot,.am-inner>.am-calvary{grid-row:4;grid-column:1;align-self:start}
.am-inner>.src{grid-row:5}
/* with motion the Calvary line takes the heading's place when every word is back */
@media (prefers-reduced-motion:no-preference){.js .am-inner>.am-calvary{grid-row:2;align-self:end}}
.am-h{transition:opacity .6s}
.amnesia.done .am-h{opacity:0}
.am-h{margin:16px 0 0;font:850 clamp(28px,min(2.4vw,4.2vh),46px)/1.02 var(--wide);font-stretch:112%;text-transform:uppercase;letter-spacing:-.02em;text-wrap:balance}
.passage{margin-top:4vh}
.couplet{margin:0 0 2.6vh}
.why{display:block;font:700 13px/1.45 var(--wide);font-stretch:108%;letter-spacing:.16em;text-transform:uppercase;color:var(--bone);opacity:.72;max-width:760px}
.mem{display:block;margin-top:6px;font:300 clamp(24px,min(3.3vw,5.1vh),56px)/1.04 var(--wide);font-stretch:112%;letter-spacing:.004em;text-transform:uppercase;color:var(--peach);text-wrap:pretty}
.w{display:inline-block;white-space:pre;will-change:opacity,filter}
.w.again{animation:recall .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes recall{0%{color:#fff;text-shadow:0 0 18px rgba(255,214,180,.9)}100%{color:var(--peach);text-shadow:0 0 0 rgba(255,214,180,0)}}
.am-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin-top:2.4vh;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.amnesia.fading .am-foot{opacity:1;visibility:visible}
.amnesia.done .am-foot{opacity:0;visibility:hidden}
.am-hint,.am-count{margin:0;font:600 12px/1.3 var(--wide);font-stretch:115%;letter-spacing:.2em;text-transform:uppercase}
.am-hint{color:var(--peach)}
.am-count{color:var(--mute)}
.am-count .n{color:var(--bone)}
.h-touch{display:none}
@media (hover:none),(pointer:coarse){.h-fine{display:none}.h-touch{display:inline}}
.am-calvary{margin:16px 0 0;font:850 clamp(28px,min(2.4vw,4.2vh),46px)/1.02 var(--wide);text-wrap:balance;font-stretch:112%;text-transform:uppercase;letter-spacing:-.005em;opacity:0;transform:translateY(10px);transition:opacity .8s,transform .8s}
.amnesia.done .am-calvary{opacity:1;transform:none}
.amnesia .src{margin-top:1.6vh}
.am-ghost{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;opacity:calc(.2 * (1 - var(--amp,0)));filter:brightness(.8);
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 40%,transparent 100%);mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 40%,transparent 100%)}
.am-reveal{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .45s;
  -webkit-mask-image:radial-gradient(circle min(26vw,300px) at var(--lx,-999px) var(--ly,-999px),#000 0,rgba(0,0,0,.55) 45%,transparent 100%);mask-image:radial-gradient(circle min(26vw,300px) at var(--lx,-999px) var(--ly,-999px),#000 0,rgba(0,0,0,.55) 45%,transparent 100%)}
.am-reveal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;filter:sepia(.35) brightness(.86) contrast(1) blur(.4px);transform:scale(1.01)}
.amnesia.lamp-on .am-reveal{opacity:1}
.am-lamp{position:absolute;left:0;top:0;width:360px;height:360px;margin:-180px 0 0 -180px;border-radius:50%;pointer-events:none;z-index:1;opacity:0;transition:opacity .4s;
  background:radial-gradient(closest-side,rgba(255,206,170,.22),rgba(216,169,139,.08) 55%,rgba(216,169,139,0));transform:translate3d(var(--lx,-999px),var(--ly,-999px),0)}
.amnesia.lamp-on .am-lamp{opacity:1}
.am-ripples{position:absolute;inset:0;pointer-events:none;z-index:1}
.ripple{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:1px solid rgba(232,186,150,.7);animation:ripple .9s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes ripple{to{transform:scale(28);opacity:0}}
/* not pinned: reduced motion, no JS, or a viewport too short for the passage */
.no-js .amnesia,.amnesia.nopin{height:auto}
.no-js .am-stage,.amnesia.nopin .am-stage{position:relative;height:auto;padding:12vh 0}
.no-js .am-foot{display:none}
.no-js .am-calvary{opacity:1;transform:none}
.no-js .amnesia{background:linear-gradient(180deg,rgba(8,7,6,0),rgba(8,7,6,.7) 20%,rgba(8,7,6,.7) 80%,rgba(8,7,6,0))}

/* ---------- 4 · Part III, time to party ---------- */
.party{position:relative;padding:8vh var(--pad) 22vh}
.party-head{max-width:980px;position:relative;z-index:2;margin-top:-3vw}
.party-head .verse{margin-top:34px;max-width:620px}
.feasts{list-style:none;margin:12vh 0 0;padding:0}
.feasts li{--lit:1;display:grid;grid-template-columns:56px minmax(0,auto) minmax(0,1fr);align-items:baseline;column-gap:26px;padding:1.6vh 0;margin-left:calc(var(--i,0) * 3.4vw);opacity:calc(.3 + var(--lit) * .7)}
.f-n{font:300 16px/1 var(--wide);font-stretch:112%;color:var(--peach)}
.f-name{font:900 clamp(34px,6.9vw,124px)/.9 var(--wide);font-stretch:118%;letter-spacing:-.035em;text-transform:uppercase;color:#fff7ee;text-shadow:0 0 calc(var(--lit) * 40px) rgba(255,170,100,calc(var(--lit) * .35))}
.f-ref{font:600 11px/1.3 var(--wide);font-stretch:115%;letter-spacing:.2em;text-transform:uppercase;color:var(--peach);padding-left:6px}
.feasts li:nth-child(1){--i:0}.feasts li:nth-child(2){--i:1}.feasts li:nth-child(3){--i:2}.feasts li:nth-child(4){--i:3}.feasts li:nth-child(5){--i:2}.feasts li:nth-child(6){--i:1}.feasts li:nth-child(7){--i:0}
.party-close{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:8vw;margin-top:12vh;align-items:end}
.no-js .party{background:linear-gradient(180deg,rgba(80,36,8,0),rgba(80,36,8,.55) 15%,rgba(80,36,8,.55) 85%,rgba(80,36,8,0))}

/* ---------- 5 · Part IV, fringes of blue ---------- */
.fringe{position:relative;padding:20vh var(--pad) 30vh}
.fringe .acc{color:var(--blue)}
.fringe .verse footer,.fringe .quote footer{color:var(--blue)}
.ribband{position:absolute;left:0;right:0;top:3vh;width:100%;height:clamp(140px,18vw,260px);overflow:visible;pointer-events:none}
.ribband path{fill:none;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--draw,1))}
.rb-main{stroke:#3f74e0;stroke-width:9;filter:drop-shadow(0 6px 14px rgba(20,50,140,.6))}
.rb-thin{stroke:#9cbcff;stroke-width:1.5;opacity:.85}
.tall-4{position:absolute;right:0;top:4vh;width:min(54vw,92vh);margin:0;pointer-events:none}
.tall-4 img{display:block;width:100%;height:auto;filter:grayscale(1) sepia(1) hue-rotate(178deg) saturate(2.6) brightness(.66) contrast(1.05);
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 58% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 62% 58% at 58% 50%,#000 55%,transparent 100%)}
.ribband{z-index:2}
.fringe-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);max-width:min(620px,46vw);margin-top:20vh}
.fringe-text{padding-top:4vh}
.fringe-text .quote{margin-top:6vh;max-width:540px}
.fringe-text .quote p{font-size:clamp(17px,1.3vw,20px);font-weight:500;color:var(--bone);opacity:.92}
.no-js .fringe{background:linear-gradient(180deg,rgba(8,20,54,0),rgba(8,20,54,.7) 15%,rgba(8,20,54,.7) 85%,rgba(8,20,54,0))}

/* ---------- 5b · dawn: the hand-off into the light ---------- */
.dawn{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:16vh var(--gutter);text-align:center;color:#2a1a10;overflow-x:clip}
.rise{max-width:1100px}
.rise p{margin:0;font:850 clamp(30px,4vw,64px)/1.04 var(--wide);font-stretch:112%;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.rise .acc{color:#7a3a1c;font-weight:400}
.rise footer{margin-top:26px;font:600 11px/1.3 var(--wide);font-stretch:115%;letter-spacing:.22em;text-transform:uppercase;color:#6a3a20}
.no-js .dawn{background:#e2b48d}

/* ---------- 6..8 · the light pages: bread, kit, close ---------- */
.bread,.kit,.close{color:var(--paper-ink)}
.bread .label,.kit .label,.close .label{color:var(--paper-mute)}
.bread .acc,.kit .acc,.close .acc{color:var(--rust);font-weight:500}
.bread .big,.kit .h2,.close .big{color:var(--paper-ink)}
.bread .verse p,.bread .pull{color:var(--paper-ink)}
.bread .verse footer,.bread .ref,.close .ref{color:var(--rust)}
.bread .src,.kit .src,.close .note{color:var(--paper-mute)}
.no-js .bread,.no-js .kit,.no-js .close{background:var(--paper)}

.bread{position:relative;padding:12vh 0 16vh}
.bread-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:6vw;align-items:center;padding-left:var(--gutter)}
.bread-text{max-width:640px}
.bread .pull{margin-top:34px}
.bread .verse{margin-top:30px;max-width:560px}
.bread .verse+.verse{margin-top:24px}
.bread .verse p{font-size:clamp(18px,1.45vw,22px)}
.bread-art{position:relative;margin-right:-16vw;margin-left:-2vw}
.bread-art img{display:block;width:100%;height:auto;transform:rotate(2.2deg);box-shadow:0 30px 60px -18px rgba(40,26,12,.55),0 80px 120px -40px rgba(40,26,12,.4)}
.bread .src{padding:0 var(--gutter)}

.kit{position:relative;padding:14vh 0 10vh}
.kit-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:6vw;align-items:center;padding:0 var(--gutter);max-width:1440px;margin:0 auto}
.pages-obj{position:relative;padding:4% 0 0 2%}
.pages-obj img{display:block;width:100%;height:auto}
.p-back{position:absolute;left:9%;top:0;width:86% !important;transform:rotate(4deg);box-shadow:0 20px 40px -14px rgba(40,26,12,.45);filter:brightness(.97)}
.p-front{position:relative;transform:rotate(-2.6deg);box-shadow:0 2px 0 rgba(255,255,255,.4),0 34px 60px -18px rgba(40,26,12,.55),0 70px 110px -40px rgba(40,26,12,.38)}
.pages-obj figcaption{margin-top:30px;font:600 11px/1.3 var(--wide);font-stretch:115%;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-mute)}
.parts{list-style:none;margin:34px 0 0;padding:0}
.parts li{display:flex;align-items:baseline;gap:18px;padding:9px 0;font:850 clamp(19px,1.6vw,25px)/1.15 var(--wide);font-stretch:112%;letter-spacing:-.01em;text-transform:uppercase}
.parts li span{flex:none;width:34px;font:300 15px/1 var(--wide);font-stretch:112%;color:var(--rust)}
.facts{margin:34px 0 0;display:grid;gap:10px}
.facts div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:18px;align-items:baseline}
.facts dt{font:600 11px/1.4 var(--wide);font-stretch:115%;letter-spacing:.2em;text-transform:uppercase;color:var(--rust)}
.facts dd{margin:0;font-size:15px;line-height:1.5;color:var(--paper-ink)}
.reel{position:relative;margin-top:12vh;overflow:hidden;padding:30px 0 50px}
.reel-track{display:flex;gap:22px;width:max-content;padding:0 var(--gutter);transform:translate3d(var(--rx,0px),0,0);will-change:transform}
.reel img{display:block;height:clamp(220px,30vw,440px);width:auto;box-shadow:0 22px 40px -16px rgba(30,20,10,.55)}
.reel img:nth-child(3n+1){transform:rotate(-1.4deg)}.reel img:nth-child(3n+2){transform:rotate(1.2deg) translateY(18px)}.reel img:nth-child(3n){transform:rotate(-.4deg) translateY(-8px)}
.kit-src{padding:0 var(--gutter);max-width:1440px;margin:20px auto 0}
.no-js .reel{overflow-x:auto}

/* the close: the cover stands on the pages in a pool of dawn light (the Isaiah 60:1 peach), the line on the Bible is
   remembered one last time with Part II's recall, and the light goes down into the footer with no line or box */
.close{position:relative;padding:14vh var(--gutter) 26vh}
.close-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);column-gap:6vw;align-items:center;max-width:1280px;margin:0 auto}
.close-cover{position:relative;width:min(100%,470px);justify-self:end}
.close-dawn{position:absolute;left:-75%;right:-75%;top:-52%;bottom:-48%;pointer-events:none;
  background:radial-gradient(closest-side at 50% 46%,rgba(255,212,168,.78),rgba(240,182,134,.5) 34%,rgba(226,160,110,.2) 62%,rgba(226,160,110,0) 100%)}
.close-obj{position:relative;transform:perspective(1400px) rotateY(9deg) rotate(1.5deg);
  box-shadow:-2px 0 0 rgba(255,236,214,.5),0 0 0 1px rgba(60,36,16,.12),0 3px 4px rgba(40,24,10,.28),0 26px 40px -18px rgba(48,28,10,.55),0 70px 110px -36px rgba(70,40,14,.5)}
.close-obj img{display:block;width:100%;height:auto}
/* the dawn falls across the face from the left: a warm sheen on the cover, never a flat card */
.close-obj::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,rgba(255,214,170,.26) 0,rgba(255,214,170,.07) 34%,rgba(0,0,0,0) 58%,rgba(20,10,4,.16) 100%)}
.close-shadow{position:absolute;left:4%;right:-16%;bottom:-7%;height:15%;background:radial-gradient(closest-side,rgba(64,38,16,.5),rgba(64,38,16,0));filter:blur(7px)}
.close .big{font-size:clamp(32px,3.6vw,60px)}
.buyrow{display:flex;align-items:center;flex-wrap:wrap;gap:22px 34px;margin-top:44px}
.price{margin:0;display:flex;align-items:baseline;gap:10px}
.price strong{font:900 clamp(64px,6.4vw,108px)/.86 var(--wide);font-stretch:112%;letter-spacing:-.045em;color:var(--paper-ink)}
.price span{font:600 12px/1 var(--wide);font-stretch:115%;letter-spacing:.22em;color:var(--rust)}
.close .btn.buy{min-height:64px;padding:18px 30px;gap:26px;font-size:14px;letter-spacing:.09em;box-shadow:0 18px 34px -16px rgba(70,42,14,.5)}
.close .btn.lime:hover{background:var(--paper-ink);color:var(--paper)}
.back{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:22px;font:800 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--paper-ink)}
.back:hover{color:var(--rust)}
/* the last recall: the line's words come back once, as in Part II, then hold */
.cw{display:inline-block;white-space:pre}
.js .close .big.forgot .cw{opacity:.06;filter:blur(4.5px)}
.js .close .big.recalled .cw{animation:recall-last 1.15s cubic-bezier(.2,.7,.2,1) both}
@keyframes recall-last{
  0%{opacity:.06;filter:blur(4.5px);text-shadow:0 0 0 rgba(236,150,90,0)}
  42%{opacity:1;filter:blur(0);color:#b4572a;text-shadow:0 0 20px rgba(236,150,90,.75)}
  100%{opacity:1;filter:blur(0);text-shadow:0 0 0 rgba(236,150,90,0)}}
@media (prefers-reduced-motion:no-preference){
  .js .close-dawn{opacity:.25;transform:scale(.86);transition:opacity 2.2s cubic-bezier(.2,.7,.2,1),transform 2.4s cubic-bezier(.2,.7,.2,1)}
  .js .close.lit .close-dawn{opacity:1;transform:none}
  .js .close .buyrow,.js .close .note,.js .close .back{opacity:0;transform:translateY(12px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
  .js .close.lit .buyrow{opacity:1;transform:none;transition-delay:1.05s}
  .js .close.lit .note{opacity:1;transform:none;transition-delay:1.25s}
  .js .close.lit .back{opacity:1;transform:none;transition-delay:1.35s}
}

/* footer: the light pages go down into night, a slow warm dusk with no rule */
.foot{margin-top:-18vh;padding:calc(18vh + 190px) var(--gutter) 40px;background:linear-gradient(180deg,rgba(23,21,19,0) 0,rgba(96,62,38,.22) 12vh,rgba(36,28,22,.82) calc(12vh + 150px),var(--night) calc(18vh + 200px))}
.fgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-top:40px;align-items:start}
.fbrand{grid-column:1/5}.fbrand p{margin:20px 0 0;font-size:13px;line-height:1.7;color:var(--mute);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;color:var(--mute)}
.fnav a:hover{color:var(--bone)}
.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:var(--mute)}

/* ---------- arrival motion (only with motion allowed) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .title span{animation:remember 1.3s cubic-bezier(.2,.7,.2,1) both}
  .js .title .t-forget{animation-delay:.18s}
  .js .tagline,.js .lede,.js .aud,.js .cta,.js .hero-text .note{animation:rise .9s .45s cubic-bezier(.2,.7,.2,1) both}
  .js .cover-obj{animation:settle 1.2s .1s cubic-bezier(.2,.7,.2,1) both}
  @keyframes remember{0%{opacity:0;filter:blur(14px)}60%{opacity:1}100%{opacity:1;filter:blur(0)}}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes settle{from{opacity:0;transform:translateY(-26px) rotate(-6deg)}to{opacity:1;transform:rotate(-3.2deg)}}
  .js .rv{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
  .js .rv.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .btn:hover{transform:none}
  .amnesia{height:auto}
  .am-stage{position:relative;height:auto;padding:12vh 0}
  .am-foot{display:none}
  .am-calvary{opacity:1;transform:none}
  .feasts li{opacity:1}
  .ribband path{stroke-dashoffset:0}
  .reel{overflow-x:auto}
  .reel-track{transform:none}
}

/* ---------- responsive ---------- */
@media (min-width:1700px){
  :root{--gutter:max(64px,calc((100vw - 1640px) / 2))}
}
@media (max-width:1180px){
  :root{--gutter:44px}
  .nav{gap:22px}
  .feasts li{grid-template-columns:44px minmax(0,1fr);row-gap:8px}
  .f-ref{grid-column:2;padding-left:2px}
}
@media (max-width:900px){
  .nav{display:none}
  .hero{grid-template-columns:minmax(0,1fr);padding-top:120px}
  .title,.tagline,.hero-text,.hero-cover{grid-column:1}
  .hero-cover{position:relative;right:auto;top:auto;grid-row:1;width:min(80vw,560px);justify-self:end;margin:4px -10vw 0 0;transform:rotate(2deg)}
  .title{grid-row:2;margin-top:-17vw;text-align:left;font-size:19.6vw}
  .tagline{grid-row:3;text-align:left}
  .hero-text{grid-row:4;margin-top:4vh}
  .tall-4{position:relative;top:auto;right:auto;width:118vw;margin:0 -10vw -14vh calc(-1 * var(--pad) - 4vw)}
  .fringe-grid{max-width:none;margin-top:0}
  .ribband{top:1vh}
  .edges{grid-template-columns:2px minmax(0,1fr);column-gap:28px;row-gap:9vh}
  .blade{grid-column:1;grid-row:1/3}
  .side-for{grid-column:2;grid-row:1}
  .side-against{grid-column:2;grid-row:2;padding-top:0}
  .party-close,.fringe-grid,.bread-grid,.kit-grid,.close-grid{grid-template-columns:1fr}
  .party-close .verse,.fringe-text,.kit-text,.close-text{margin-top:6vh}
  .bread-art{margin:8vh -10vw 0 8vw}
  .close-cover{justify-self:center;width:min(70vw,400px)}
}
@media (max-width:700px){
  :root{--gutter:20px}
  .top{height:72px;gap:12px}
  .brand{gap:9px}.brand-mark{height:36px;width:36px}.brand-name{font-size:9.5px;letter-spacing:.13em}
  .top .btn.sm{padding:10px 12px;font-size:10px;gap:8px}
  .crumbs{top:70px}
  .crumbs ol{font-size:10px}
  .hero{padding:128px var(--gutter) 64px;min-height:0}
  .hero-cover{width:88vw;margin:0 -16vw 0 0}
  .hero-text{margin-top:3.5vh}
  .title{font-size:18.4vw;margin-top:-19vw;letter-spacing:-.05em;text-shadow:0 6px 30px rgba(0,0,0,.55)}
  .tagline{font-size:13px;letter-spacing:.05em}
  .lede{font-size:17px;margin-top:24px}
  .cta{flex-direction:column}
  .cta .btn{width:100%;gap:12px}
  .big{font-size:clamp(28px,8.4vw,40px);letter-spacing:-.02em}
  .edge{padding:2vh var(--pad) 14vh}
  .edge-head{margin-top:3vh}
  .edge .big{font-size:clamp(27px,7.8vw,38px)}
  .edges{margin-top:8vh}
  .am-inner{padding:12px var(--pad) 8px}
  .am-h,.am-calvary{font-size:clamp(23px,6.6vw,30px)}
  .passage{margin-top:2.4vh}
  .couplet{margin-bottom:1.3vh}
  .why{font-size:10px;letter-spacing:.1em;line-height:1.35}
  .mem{font-size:clamp(19px,min(6.4vw,3.1vh),28px);margin-top:4px;line-height:1.05}
  .am-foot{gap:6px 14px;margin-top:2.6vh}
  .am-hint{flex-basis:100%}
  .am-hint,.am-count{font-size:10.5px;letter-spacing:.16em}
  .amnesia .src{font-size:10px;line-height:1.4}

  .party{padding:14vh var(--gutter)}
  .feasts{margin-top:8vh}
  .feasts li{grid-template-columns:30px minmax(0,1fr);row-gap:6px;margin-left:calc(var(--i,0) * 2.6vw);padding:1.4vh 0}
  .f-name{font-size:clamp(24px,8.2vw,44px)}
  .f-ref{grid-column:2;padding-left:2px;font-size:10px}
  .fringe{padding:12vh var(--gutter) 34vh}
  .dawn{min-height:86svh;padding:12vh var(--gutter)}
  .rise p{font-size:clamp(25px,7.6vw,34px)}
  .ribband{top:2vh;height:120px}
  .fringe-grid{margin-top:12vh}
  .bread{padding:8vh 0 10vh}
  .bread-grid{padding:0 var(--gutter)}
  .bread-art{margin:7vh -18vw 0 0}
  .kit{padding:8vh 0 6vh}
  .pages-obj{margin:0 -4vw}
  .facts div{grid-template-columns:90px minmax(0,1fr);gap:12px}
  .reel{margin-top:8vh}
  .reel img{height:220px}
  .close{padding:10vh var(--gutter) 22vh}
  .close .big{font-size:clamp(27px,8vw,36px)}
  .buyrow{flex-direction:column;align-items:stretch;gap:16px;margin-top:34px}
  .price strong{font-size:clamp(68px,21vw,92px)}
  .buyrow .btn{width:100%;gap:12px}
  .close .btn.buy{padding:18px 22px;font-size:13px}
  .foot{margin-top:-14vh;padding-top:calc(14vh + 130px);background:linear-gradient(180deg,rgba(23,21,19,0) 0,rgba(96,62,38,.22) 9vh,rgba(36,28,22,.82) calc(9vh + 110px),var(--night) calc(14vh + 150px))}
  .fgrid{display:block}.fnav{margin-top:24px}
  .top .btn.sm span{display:none}
}
@media (max-width:350px){
  .brand-name{display:none}
  .f-name{font-size:7.2vw}
  .feasts li{margin-left:calc(var(--i,0) * 2vw)}
}
@media (min-width:901px) and (max-height:820px){
  .hero .aud{display:none}
  .hero .lede{font-size:17px}
}