/* If My People: a bespoke series page (round 2, full-bleed standard).
   Art direction: the series' own art at the scale of the screen. A flat warm taupe ground (sampled #756c5b), cream lettering
   (#eacda5) and one image: neon-line praying hands that glow. Every screen is a scene made from that art. The hero is the
   series' title screen rebuilt live at viewport scale (the hands huge and cropped, the title a wall of tracked capitals).
   Then the lights go out and 2 Chronicles 7:14 is prayed clause by clause while the neon hands power on (the signature
   motion; tap or click to lift your own voice). Lesson 1 runs on the wall, Lesson 2 turns the ground to the art's own cream,
   Lesson 3 is the night, the feed is lettering on the wall, the kit is cream again and the close is dark, with the cover
   standing in its own light. Ground changes are hard and saturated (taupe, black, cream) but always handed off by fades.
   The hands are a separated layer of the store art (Screen_Main minus Screen_Main_NoHands, solved for alpha), never redrawn.
   Corben is the one added face: the closest Google face to the art's Freehouse accent lettering (PRAYER, EVERYDAY, PASSWORD).
   It is the accent voice, one phrase per screen. Lime is SMR's accent only (buy, label tick, focus). */

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

:root{
  --wall:#766c5b;      /* the art's ground, sampled: rgb(118,108,91) */
  --cream:#eacda5;     /* the art's lettering, sampled; also the Lesson 2 and kit ground */
  --neon:#fef2e1;      /* the neon tube colour, solved from the art */
  --white:#fbf4e8;     /* body text on the wall (AA on the wall) */
  --dark:#15120e;      /* lights down */
  --night:#1b1712;
  --ink:#271f15;       /* text on cream */
  --ink-2:#4c4132;     /* secondary text on cream (AA) */
  --deep:#5a4e3c;      /* the wall colour, deepened: poster type on cream */
  --mute-d:#c9bba1;    /* secondary text on dark */
  --lime:#b6ff00;
  --gutter:64px;
  --display:'Corben',Georgia,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(--dark)}
body.imp{margin:0;background:var(--dark);color:var(--white);font-family:var(--body);overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
main{display:block;overflow-x:clip}
figure{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:60;background:var(--lime);color:#000;padding:12px 18px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}

/* ---------- shared atoms ---------- */
.label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;margin:0;display:flex;align-items:center;gap:12px;color:var(--white)}
.label i{display:inline-block;width:10px;height:10px;background:var(--lime);flex:none}
.acc{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;color:var(--cream)}
.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;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}.btn.lime:hover{background:var(--neon)}
.btn.line{border:1px solid rgba(251,244,232,.55);color:var(--white)}.btn.line:hover{border-color:var(--lime);color:var(--lime)}
.btn.sm{min-height:44px;padding:10px 18px;font-size:11px}
.note{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--white);opacity:.86}
.body{margin:20px 0 0;max-width:520px;font-size:17px;line-height:1.7}
.pull{margin:22px 0 0;max-width:560px;font:700 clamp(21px,1.8vw,27px)/1.4 var(--body);letter-spacing:-.01em}
.key{margin:28px 0 0;padding:0 0 0 22px;border-left:2px solid rgba(234,205,165,.6);max-width:540px}
.key p{margin:0;font:600 18px/1.6 var(--body)}
.key footer{margin-top:12px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;opacity:.9}
.refs{margin:22px 0 0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;line-height:1.8;opacity:.9}
.lh{margin:0;font:800 clamp(24px,2.1vw,32px)/1.12 var(--body);letter-spacing:-.02em;text-wrap:balance}
.lh .ln{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.lh .ln::before{content:'';width:10px;height:10px;background:var(--lime);flex:none}
/* poster walls: the art's tracked capitals at the scale of the screen */
.wallh{margin:0;font:800 clamp(40px,6vw,120px)/.98 var(--body);letter-spacing:.04em;text-transform:uppercase;text-wrap:balance}
.wallh .acc{letter-spacing:.005em}

/* ---------- header (shared SMR lockup, floating on the wall) ---------- */
.top{position:absolute;top:0;left:0;right:0;z-index:30;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(--white);opacity:.92;transition:opacity .15s}
.nav a:hover,.nav a[aria-current]{opacity:1}
.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(--white)}
.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}

/* ---------- covers: the poster as an object in its own light ---------- */
.cover{position:relative}
.cover::before{content:'';position:absolute;left:-55%;right:-55%;top:-40%;bottom:-40%;background:radial-gradient(closest-side,rgba(255,232,196,.30),rgba(255,232,196,.12) 45%,rgba(255,232,196,0));pointer-events:none}
.cover::after{content:'';position:absolute;left:4%;right:4%;bottom:-6%;height:7%;background:radial-gradient(closest-side,rgba(10,8,5,.5),rgba(10,8,5,0));filter:blur(6px);pointer-events:none}
.cover-obj{position:relative;display:block;box-shadow:0 2px 0 rgba(255,244,228,.08) inset,0 50px 90px -20px rgba(10,8,5,.7),0 14px 30px rgba(10,8,5,.4)}
.cover-obj::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,246,232,.14),rgba(255,246,232,0) 38%,rgba(0,0,0,0) 70%,rgba(0,0,0,.12));pointer-events:none}
.cover-img{width:100%;height:auto}

/* ---------- 1 · the wall (hero): the title screen, rebuilt at the scale of the screen ---------- */
.hero{position:relative;z-index:2;min-height:max(100svh,760px);padding:150px var(--gutter) 0;display:flex;flex-direction:column;
  background:
    radial-gradient(ellipse 46% 60% at 56% 40%,rgba(160,146,120,.75),rgba(118,108,91,0) 72%),
    linear-gradient(180deg,var(--wall) 0,var(--wall) 64%,#5d5546 80%,#2c271f 92%,var(--dark) 100%)}
.hero-hands{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hh-tube,.hh-bloom{position:absolute;left:56%;top:-4svh;height:max(124svh,940px);width:auto;max-width:none;aspect-ratio:1346/1713;transform:translateX(-50%)}
.hh-tube{z-index:3;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 46%,rgba(0,0,0,.28) 66%,rgba(0,0,0,.12) 100%);mask-image:linear-gradient(180deg,#000 0,#000 46%,rgba(0,0,0,.28) 66%,rgba(0,0,0,.12) 100%)}
.hh-bloom{z-index:1;height:max(150svh,1140px);top:-16svh;opacity:.32;mix-blend-mode:screen}
.crumbs{position:absolute;z-index:5;left:var(--gutter);top:94px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex-wrap:wrap;gap:0 10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800}
.crumbs li+li::before{content:'/';margin-right:10px;opacity:.6}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;opacity:.92}
.crumbs a:hover{opacity:1;text-decoration:underline}
.title{position:relative;z-index:2;margin:0 -.17em 0 0;text-align:center;font:800 clamp(60px,13.4vw,280px)/.9 var(--body);letter-spacing:.17em;text-transform:uppercase;color:var(--cream);
  text-shadow:0 2px 40px rgba(60,52,40,.25)}
.title span{display:block}
.hero-foot{position:relative;z-index:4;flex:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;margin-top:clamp(28px,3vw,56px)}
.hero-copy{grid-column:1/7;padding-bottom:clamp(60px,9svh,110px)}
.series-line{margin:18px 0 0;font:800 14px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--white)}
.hero-copy{text-shadow:0 0 22px rgba(90,82,68,.75)}
.series-line .acc{font-size:2.05em;letter-spacing:.02em;vertical-align:-.12em;margin-left:.15em}
.lede{margin:24px 0 0;max-width:540px;font:700 clamp(21px,1.75vw,27px)/1.4 var(--body);letter-spacing:-.01em}
.aud{margin:12px 0 0;max-width:500px;font-size:16px;line-height:1.6}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:28px}
.jump{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:800 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(251,244,232,.45)}
.jump:hover{border-color:var(--lime)}
.cover-hero{grid-column:9/13;justify-self:end;width:min(100%,24vw,440px);margin-bottom:-9svh;transform:rotate(1.6deg)}
.cover-hero .cover-obj{view-transition-name:cover-if-my-people}

/* ---------- 2 · the voice (signature) ----------
   Default (no JS, reduced motion): a still room with the sign lit and the whole verse lit.
   With motion: the section is ~3.4 screens tall, the room pins, and scroll lights the verse clause by clause. */
.voice{position:relative;background:var(--dark);color:var(--neon);--L:1;--B:.9}
.pin{position:relative;min-height:100svh;overflow:hidden;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;padding:90px var(--gutter) 120px;-webkit-tap-highlight-color:transparent}
.room{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 52% 62% at 70% 46%,rgba(214,186,140,.30),rgba(214,186,140,.08) 46%,rgba(214,186,140,0) 72%);opacity:calc(var(--L) * .9)}
.sign{position:absolute;z-index:1;right:max(2vw,calc(50% - 680px));top:50%;height:min(96svh,1000px);aspect-ratio:1346/1713;transform:translateY(-50%);pointer-events:none}
.sign img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.sign .tube{opacity:.13;filter:grayscale(1) brightness(.8)}
.sign .lit{opacity:min(1,var(--L))}
.sign .bloom{inset:-22% -30%;width:160%;height:144%;opacity:calc(var(--B) * .85);mix-blend-mode:screen}
.rise-layer{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.voice-copy{grid-column:1/7;position:relative;z-index:4}
.voice .label{color:var(--mute-d)}
.voice-h{margin:18px 0 0;font:800 clamp(18px,1.5vw,22px)/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--cream)}
.verse{margin:26px 0 0}
.verse p{margin:0;font:700 clamp(25px,2.6vw,44px)/1.26 var(--body);letter-spacing:-.015em;text-wrap:pretty}
.cl{color:var(--neon);text-shadow:0 0 22px rgba(254,236,206,.28);transition:color .7s ease,text-shadow .9s ease,opacity .7s}
.cl-hear .acc{color:var(--neon);font-size:1.06em;letter-spacing:.005em;text-shadow:0 0 26px rgba(254,236,206,.55),0 0 2px rgba(254,242,225,.8)}
.verse footer{margin-top:22px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--mute-d)}
.answer{margin:22px 0 0;font:700 clamp(19px,1.6vw,24px)/1.3 var(--body);color:var(--cream)}
.lift-wrap{display:none}

/* ---------- 3 · Lesson 1, on the wall ---------- */
.l1{position:relative;background:linear-gradient(180deg,var(--dark) 0,#3b352b 8svh,var(--wall) 19svh,var(--wall) 100%);padding-top:22svh}
.screen-bleed{position:relative;width:100%;overflow:hidden}
.screen-bleed img{width:100%;height:auto}
.l1-copy{position:relative;z-index:2;margin:calc(-56.25vw * .335) 0 0;padding:0 0 0 4vw;display:flex;justify-content:space-between;align-items:flex-start}
.l1-main{width:min(30vw,460px)}
.l1-key{width:min(24vw,380px);margin:0 9vw 0 0}
.l1-copy .pull{color:var(--cream)}
.ask{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;padding:150px var(--gutter) 150px}
.ask-words{grid-column:1/13;grid-row:1;margin:0 0 0 -.06em;display:flex;flex-direction:column;font:800 clamp(78px,11.6vw,208px)/.9 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--cream)}
.ask-words .aw{display:flex;align-items:center;gap:.16em}
.ask-words .aw + .aw{margin-top:.1em}
.ask-words .aw:nth-child(2){padding-left:.3em}
.ask-words .aw:nth-child(3){padding-left:1.04em}
/* The three neon signs: the art's cream exactly, one tube weight, round ends, a faint halo like the hands'. */
.ask-ic{flex:none;width:.9em;height:1.08em;margin:-.08em 0 -.12em;overflow:visible;fill:none;stroke:var(--cream);stroke-width:4.6;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 .045em rgba(254,236,206,.42)) drop-shadow(0 0 .012em rgba(254,242,225,.5))}
.ask-copy{grid-column:8/13;grid-row:1;padding-top:10px;position:relative;z-index:2}
.ask-copy .acc{font-size:1.12em}
.key-plain p{font-size:19px}

/* ---------- 4 · Lesson 2: the ground turns to the art's cream ---------- */
.l2{position:relative;color:var(--ink);background:linear-gradient(180deg,var(--wall) 0,#b6a184 90px,var(--cream) 220px,var(--cream) 100%);padding:150px 0 170px}
.l2 .acc{color:var(--deep)}
.l2 .key{border-color:rgba(90,78,60,.5)}
.l2-open{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:0 var(--gutter)}
.l2-h{grid-column:1/7;grid-row:1}
.humble{grid-column:1/13;grid-row:2;margin:24px 0 0;position:relative;z-index:1}
.humble .hw{display:block;margin-left:-.05em;font:700 clamp(60px,13.6vw,270px)/.86 var(--display);text-transform:uppercase;letter-spacing:-.005em;color:var(--deep)}
.humble .hr{display:block;margin-top:.2em;font:800 clamp(26px,3.9vw,76px)/1.05 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.humble .hr .acc{letter-spacing:.01em}
.print-l2{grid-column:9/13;grid-row:2/4;align-self:start;position:relative;z-index:2;width:calc(100% + var(--gutter) + 3vw);margin-top:11vw;transform:rotate(2.6deg)}
.print img,.sheet img{width:100%;height:auto;box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 50px 80px -20px rgba(42,34,22,.55),0 12px 26px rgba(42,34,22,.24)}
.l2-copy{grid-column:1/8;grid-row:3;padding-top:56px}
.submit{margin:44px 0 0;font:800 clamp(30px,3.4vw,58px)/1.08 var(--body);letter-spacing:-.02em;text-wrap:balance}
.letgo{position:relative;padding:150px var(--gutter) 0}
.letgo-lead{margin:0;max-width:880px;font:800 clamp(26px,2.8vw,46px)/1.15 var(--body);letter-spacing:-.02em;text-wrap:balance}
.tenses{list-style:none;margin:56px 0 0;padding:0}
.tenses li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;padding:22px 0 26px;border-top:3px solid var(--ink)}
.tenses h3{grid-column:1/10;margin:0;font:800 clamp(64px,12.4vw,240px)/.84 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--deep)}
.tenses h3 span{display:block;font-size:13px;line-height:1;letter-spacing:.24em;color:var(--ink);margin:0 0 14px .3em}
.tenses p{grid-column:10/13;margin:0;font-size:17px;line-height:1.6;color:var(--ink)}
.surrender{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;padding:110px var(--gutter) 0}
.sheet-l2{grid-column:1/9;margin-left:calc(var(--gutter) * -1 - 3vw);transform:rotate(-2deg)}
.sheet figcaption{margin-top:18px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--ink-2)}
.sheet-l2 figcaption{padding-left:calc(var(--gutter) + 3vw)}
.hymn{grid-column:9/13;margin:0;font:800 clamp(26px,2.6vw,44px)/1.12 var(--body);letter-spacing:-.01em}
.hymn span{display:block}
.hymn .acc{font-size:1.16em;line-height:1;margin:.12em 0 .3em;white-space:nowrap}
.hymn .h2l{font-weight:600;font-size:.62em;line-height:1.4}
.hymn small{display:block;margin-top:18px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--ink-2)}

/* ---------- 5 · Lesson 3, at night ---------- */
.l3{position:relative;color:var(--neon);background:linear-gradient(180deg,var(--cream) 0,#a99678 70px,#4a4236 170px,var(--night) 270px,var(--night) 100%);padding:300px 0 140px}
.projected{position:relative;width:100%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 72%,transparent 100%)}
.projected img{width:100%;height:auto}
.l3-h{position:relative;z-index:2;margin:-6vw var(--gutter) 0;color:var(--neon)}
.called{position:relative;z-index:2;margin:26px var(--gutter) 0;max-width:15em;font:800 clamp(38px,6.1vw,118px)/.98 var(--body);letter-spacing:.02em;text-transform:uppercase;color:var(--neon);text-wrap:balance}
.called .acc{color:var(--cream);text-shadow:0 0 34px rgba(254,236,206,.35)}
.l3-copy{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:56px var(--gutter) 0}
.l3-copy .key{grid-column:6/10;margin:0;border-color:rgba(234,205,165,.5)}
.l3-copy .body{grid-column:10/13;margin:0;font-size:18px;color:var(--neon)}
.cry{position:relative;margin-top:170px;padding:0 var(--gutter)}
.cry::before{content:'';position:absolute;left:-10%;right:10%;top:-20%;bottom:-10%;background:radial-gradient(ellipse at 40% 70%,rgba(214,186,140,.14),rgba(214,186,140,0) 62%);pointer-events:none}
.cry-lines{position:relative;margin:0;font:800 clamp(30px,3.6vw,64px)/1.06 var(--body);letter-spacing:-.01em;color:var(--cream)}
.cry-lines span{display:block}
.cry-lines span:nth-child(1){opacity:.55}
.cry-lines span:nth-child(2){opacity:.72;padding-left:1em;font-size:1.14em}
.cry-lines span:nth-child(3){opacity:.88;padding-left:2em;font-size:1.3em}
.cry-lines .defer em{display:block;font-style:normal;padding-left:1.5em}
.cry-lines .defer{margin:.1em 0 0 -.04em;font:700 clamp(70px,15.6vw,310px)/.86 var(--display);text-transform:uppercase;letter-spacing:-.01em;color:var(--neon);
  text-shadow:0 0 40px rgba(254,236,206,.38),0 0 3px rgba(254,242,225,.7)}
.cry-src{position:relative;margin:24px 0 0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--mute-d)}
.cry-end{position:relative;margin:90px 0 0 auto;max-width:640px;text-align:right}
.cry-q{margin:0;font:700 clamp(26px,2.6vw,42px)/1.25 var(--body)}
.l3 .refs{color:var(--mute-d)}

/* ---------- 6 · the feed: lettering on the wall ---------- */
.feed{position:relative;color:var(--white);background:linear-gradient(180deg,var(--night) 0,#3e382d 12svh,var(--wall) 26svh,var(--wall) 100%);padding:34svh 0 170px;overflow:hidden}
.feed-head{position:relative;z-index:2;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:0 var(--gutter)}
.feed-head .label{grid-column:1/13}
.feed-h{grid-column:1/12;margin:26px 0 0;font:800 clamp(40px,6.6vw,128px)/.96 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--cream);text-wrap:balance}
.feed-h .acc{display:inline-block;font-size:1.08em;letter-spacing:.01em}
.feed-head .body{grid-column:1/7;color:var(--white)}
.rows{position:relative;margin-top:90px;display:flex;flex-direction:column;gap:3vw}
.row{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2.6vw;width:max-content;transform:translate3d(var(--x,0),0,0);will-change:transform}
.row-a{--x:-4vw}
.row-b{--x:-38vw}
.row li{flex:none;width:24vw;transform:rotate(var(--r,0deg))}
.row li.wide{width:50vw}
.row li.tall{width:19vw}
.row li:nth-child(odd){--r:-1.2deg}.row li:nth-child(even){--r:1.4deg}
.row img{width:100%;height:auto;box-shadow:0 36px 60px -24px rgba(26,21,14,.62),0 8px 18px rgba(26,21,14,.22)}

/* ---------- 7 · the kit, on cream ---------- */
.kit{position:relative;color:var(--ink);background:linear-gradient(180deg,var(--wall) 0,#b6a184 90px,var(--cream) 220px,var(--cream) 100%);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;padding:200px var(--gutter) 120px}
.kit .label{color:var(--ink)}
.kit .acc{color:var(--deep)}
.kit-h{grid-column:1/13;position:relative;z-index:3;margin:0;font:800 clamp(44px,8.6vw,170px)/.92 var(--body);letter-spacing:.05em;text-transform:uppercase;color:var(--ink);text-wrap:balance}
.kit-h .acc{font-size:1.04em;letter-spacing:.005em}
.kit-copy{grid-column:1/6;padding-top:70px;position:relative;z-index:2}
.src-inline{display:block;margin-top:6px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--ink-2)}
.files{list-style:none;margin:30px 0 0;padding:0;max-width:520px}
.files li{display:flex;flex-direction:column;gap:4px;padding:15px 0;border-top:1px solid rgba(39,31,21,.28)}
.files li:last-child{border-bottom:1px solid rgba(39,31,21,.28)}
.fn{font:800 18px/1.2 var(--cond);letter-spacing:.06em}
.fd{font-size:15px;line-height:1.5;color:var(--ink)}
.small{font-size:15px;color:var(--ink-2)}
.desk{grid-column:6/13;position:relative;margin-top:3vw;margin-right:calc(var(--gutter) * -1 - 6vw);padding:20px 0 40px}
.sheet-back{position:absolute;right:2%;top:0;width:74%;transform:rotate(5deg)}
.sheet-front{position:relative;width:100%;margin-top:14vw;transform:rotate(-2.4deg)}
.sheet-front figcaption{transform:rotate(2.4deg)}

/* ---------- 8 · close in a time of prayer ---------- */
.close{position:relative;color:var(--neon);background:
    radial-gradient(ellipse 44% 56% at 28% 56%,rgba(214,186,140,.24),rgba(214,186,140,0) 72%),
    linear-gradient(180deg,var(--cream) 0,#a99678 80px,#3c352b 200px,var(--dark) 320px,var(--dark) 100%);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;padding:280px var(--gutter) 160px}
.cover-end{grid-column:1/6;width:min(100%,40vw,80svh * .8,620px);justify-self:center;transform:rotate(-1.4deg)}
.get{grid-column:7/13}
.get .label{color:var(--mute-d)}
.close-h{margin:22px 0 0;font:800 clamp(42px,6vw,116px)/.96 var(--body);letter-spacing:.04em;text-transform:uppercase;text-wrap:balance}
.close-h .acc{font-size:1.06em;letter-spacing:.005em;text-shadow:0 0 34px rgba(254,236,206,.3)}
.get-src{margin:14px 0 0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--mute-d)}
.price-row{display:flex;flex-wrap:wrap;align-items:center;gap:20px 30px;margin-top:38px}
.price{margin:0;display:flex;align-items:baseline;gap:10px}
.price strong{font:800 72px/1 var(--cond);color:var(--neon)}
.price span{font-size:12px;letter-spacing:.18em;font-weight:800;color:var(--mute-d)}
.close .note{color:var(--mute-d);opacity:1}
.facts{margin:36px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;max-width:560px}
.facts div{padding:13px 0;border-top:1px solid rgba(254,242,225,.16)}
.facts dt{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--mute-d)}
.facts dd{margin:5px 0 0;font-size:15px;line-height:1.45}
.quiet{margin:30px 0 0;display:flex;flex-wrap:wrap;gap:6px 28px}
.quiet a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;text-decoration:none;color:var(--neon)}
.quiet a:hover{color:var(--lime)}

/* ---------- footer ---------- */
.foot{position:relative;z-index:2;padding:0 var(--gutter) 40px;background:var(--dark);color:var(--neon)}
.foot .brand{color:var(--neon)}
.fgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-top:40px;align-items:start;border-top:1px solid rgba(254,242,225,.12)}
.fbrand{grid-column:1/5}.fbrand p{margin:20px 0 0;font-size:13px;line-height:1.7;color:var(--mute-d);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-d)}
.fnav a:hover{color:var(--neon)}
.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-d)}

/* ======================================================================
   MOTION (only when the visitor allows it and JS has started)
   ====================================================================== */
@media (prefers-reduced-motion: no-preference){
  .cover-hero .cover-obj{animation:hang 1.3s .35s cubic-bezier(.2,.8,.2,1) both}
  .hh-tube{animation:neon-on 1.6s ease-out both}
  .hh-bloom{animation:bloom-on 2.2s ease-out both}
  @keyframes hang{from{opacity:0;transform:translate3d(0,-26px,0) rotate(-1.4deg)}to{opacity:1;transform:none}}
  @keyframes neon-on{0%{opacity:.12}18%{opacity:.12}22%{opacity:.8}26%{opacity:.3}34%{opacity:.95}38%{opacity:.55}50%,100%{opacity:1}}
  @keyframes bloom-on{0%,30%{opacity:0}48%{opacity:.26}54%{opacity:.1}100%{opacity:.32}}

  .motion .voice{height:max(340svh,2400px)}
  .motion .pin{position:sticky;top:0;height:100svh;min-height:0;padding-top:70px;padding-bottom:110px;cursor:pointer}
  .motion .voice .cl{color:rgba(234,205,165,.2);text-shadow:none}
  .motion .voice .cl-hear .acc{color:inherit;text-shadow:none}
  .motion .voice .cl.on{color:var(--neon);text-shadow:0 0 22px rgba(254,236,206,.3)}
  .motion .voice .cl-hear.on .acc{color:var(--neon);text-shadow:0 0 26px rgba(254,236,206,.6),0 0 2px rgba(254,242,225,.9)}
  .motion .answer{opacity:0;transform:translate3d(0,12px,0);transition:opacity .8s,transform .8s}
  .motion .answer.on{opacity:1;transform:none}
  .motion .lift-wrap{display:flex;position:absolute;z-index:6;left:var(--gutter);bottom:34px;align-items:center;gap:20px;flex-wrap:wrap}
  .motion .room{transition:none}

  .rise{position:absolute;left:0;top:0;white-space:nowrap;font:800 40px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--neon);
    text-shadow:0 0 14px rgba(254,236,206,.7),0 0 2px rgba(254,242,225,.9);will-change:transform,opacity;opacity:0}
  .rise.ghost{font:700 13px/1 var(--body);letter-spacing:.04em;text-transform:none;opacity:0;color:var(--cream)}

  /* ASK / SEEK / KNOCK: each sign draws its tube in, word by word, then powers on; the knock marks knock three times.
     The JS measures each path (--len) and staggers it (--d, --dur); reduced motion never gets here, so the signs stay drawn. */
  .motion .ask-ic path{stroke-dasharray:var(--len,400) var(--len,400);stroke-dashoffset:var(--len,400)}
  .motion .ask-ic{filter:none}
  .motion .ask-ic .km{stroke-dasharray:none;stroke-dashoffset:0;opacity:0}
  .motion .ask-words.on .ask-ic path{stroke-dashoffset:0;transition:stroke-dashoffset var(--dur,.6s) cubic-bezier(.45,.05,.35,1) var(--d,0s)}
  .motion .ask-words.on .ask-ic{animation:ic-on 1.1s var(--gd,0s) both}
  .motion .ask-words.on .ic-knock .km{animation:knock 1.15s var(--kd,0s) both}
  @keyframes ic-on{
    0%{filter:drop-shadow(0 0 0 rgba(254,236,206,0)) drop-shadow(0 0 0 rgba(254,242,225,0))}
    14%{filter:drop-shadow(0 0 .07em rgba(254,236,206,.6)) drop-shadow(0 0 .016em rgba(254,242,225,.75))}
    22%{filter:drop-shadow(0 0 .02em rgba(254,236,206,.12)) drop-shadow(0 0 0 rgba(254,242,225,.2))}
    34%{filter:drop-shadow(0 0 .06em rgba(254,236,206,.55)) drop-shadow(0 0 .014em rgba(254,242,225,.7))}
    42%{filter:drop-shadow(0 0 .03em rgba(254,236,206,.22)) drop-shadow(0 0 .006em rgba(254,242,225,.3))}
    100%{filter:drop-shadow(0 0 .045em rgba(254,236,206,.42)) drop-shadow(0 0 .012em rgba(254,242,225,.5))}}
  .ic-knock .km{transform-box:fill-box;transform-origin:0 50%}
  @keyframes knock{
    0%{opacity:0;transform:none}
    100%{opacity:1;transform:none}
    6%,36%,66%{opacity:1;stroke-width:6.4;transform:translateX(3px)}
    24%,54%{opacity:.2;stroke-width:4.6;transform:none}
    84%{opacity:.75;stroke-width:4.6;transform:none}}
  .motion [data-rise]{opacity:0;transform:translate3d(0,36px,0);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.8,.2,1)}
  .motion [data-rise].in{opacity:1;transform:none}
  .motion .print-l2[data-rise]{transform:translate3d(0,60px,0) rotate(6deg)}
  .motion .print-l2[data-rise].in{transform:rotate(2.6deg)}
  .motion .sheet-l2[data-rise]{transform:translate3d(-40px,40px,0) rotate(-5deg)}
  .motion .sheet-l2[data-rise].in{transform:rotate(-2deg)}
  .motion .sheet-front[data-rise]{transform:translate3d(0,60px,0) rotate(-6deg)}
  .motion .sheet-front[data-rise].in{transform:rotate(-2.4deg)}
  .motion .sheet-back[data-rise]{transform:translate3d(0,30px,0) rotate(9deg)}
  .motion .sheet-back[data-rise].in{transform:rotate(5deg)}
  .motion .humble .hw[data-rise]{transform:translate3d(-6vw,0,0)}
  .motion .humble .hw[data-rise].in{transform:none}
  .motion .defer[data-rise]{opacity:.15;text-shadow:none;transform:none;transition:opacity 1.4s ease,text-shadow 1.6s ease}
  .motion .defer[data-rise].in{opacity:1;text-shadow:0 0 40px rgba(254,236,206,.38),0 0 3px rgba(254,242,225,.7)}
}
.lift{min-height:48px;padding:12px 24px;border:1.5px solid rgba(254,242,225,.75);border-radius:999px;background:rgba(21,18,14,.35);color:var(--neon);
  font:800 12px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;box-shadow:0 0 18px rgba(254,236,206,.18),inset 0 0 12px rgba(254,236,206,.12);transition:box-shadow .2s,border-color .2s,transform .14s}
.lift:hover{border-color:var(--neon);box-shadow:0 0 26px rgba(254,236,206,.38),inset 0 0 14px rgba(254,236,206,.2)}
.lift:active{transform:scale(.97)}
.lift-hint{margin:0;max-width:360px;font-size:12px;line-height:1.5;color:var(--mute-d)}
.h-mouse{display:none}
@media (hover:hover) and (pointer:fine){.h-touch{display:none}.h-mouse{display:inline}}

/* ======================================================================
   RESPONSIVE
   ====================================================================== */
@media (max-width:1180px){
  :root{--gutter:44px}
  .nav{gap:22px}
}
/* ASK / SEEK / KNOCK with their signs need the width: below 1280 the scripture copy steps under the words. */
@media (min-width:1025px) and (max-width:1279px){
  .ask-copy{grid-column:6/13;grid-row:2;margin-top:56px}
}
@media (max-width:1024px){
  .nav{display:none}
  .hero-copy{grid-column:1/8}
  .cover-hero{grid-column:8/13;width:min(100%,32vw,400px)}
  .voice-copy{grid-column:1/8}
  .sign{right:-4vw;height:min(80svh,780px)}
  .ask-copy{grid-column:5/13;grid-row:2;margin-top:50px}
  .ask-words{font-size:12.6vw}
  .l1-copy{margin-top:20px;padding:0 var(--gutter);flex-direction:column;gap:10px}
  .l1-main,.l1-key{width:auto;max-width:600px;margin:0}
  .l2-copy{grid-column:1/7}
  .print-l2{grid-column:7/13;margin-top:22vw}
  .tenses h3{grid-column:1/13}
  .tenses p{grid-column:1/9;margin-top:16px}
  .sheet-l2{grid-column:1/11}
  .hymn{grid-column:3/13;margin-top:60px}
  .l3-copy .key{grid-column:1/8}
  .l3-copy .body{grid-column:8/13}
  .kit-copy{grid-column:1/8}
  .desk{grid-column:3/13;margin-top:40px}
  .cover-end{grid-column:1/6}
  .get{grid-column:6/13}
}
@media (max-width:760px){
  :root{--gutter:20px}
  .top{height:72px}
  .top .btn{display:none}
  .crumbs{top:76px}
  body.imp{font-size:16px}

  /* phone hero: its own crop. The hands stand tall behind a narrower title, cropped by both side edges. */
  .hero{min-height:0;padding:132px var(--gutter) 0;
    background:radial-gradient(ellipse 90% 40% at 50% 26%,rgba(160,146,120,.7),rgba(118,108,91,0) 72%),linear-gradient(180deg,var(--wall) 0,var(--wall) 74%,#5d5546 84%,#2c271f 94%,var(--dark) 100%)}
  .hh-tube{left:50%;top:116px;height:min(112vw * 1.27,620px);-webkit-mask-image:linear-gradient(180deg,#000 0,#000 50%,rgba(0,0,0,.16) 70%,rgba(0,0,0,.1) 100%);mask-image:linear-gradient(180deg,#000 0,#000 50%,rgba(0,0,0,.16) 70%,rgba(0,0,0,.1) 100%)}
  .hero-copy{text-shadow:0 0 18px rgba(90,82,68,.9)}
  .hh-bloom{left:50%;top:40px;height:min(140vw * 1.27,780px);opacity:.22}
  .title{font-size:clamp(46px,16.2vw,96px);letter-spacing:.14em;margin-right:-.14em;margin-top:clamp(70px,24vw,130px)}
  .hero-foot{display:flex;flex-direction:column;margin-top:clamp(110px,36vw,200px)}
  .hero-copy{padding-bottom:40px}
  .series-line{font-size:12px}
  .cta{flex-direction:column;align-items:flex-start}
  .cta .btn{width:100%}
  .cover-hero{align-self:center;width:min(78vw,360px);margin:10px 0 -26vw}

  .pin{display:block;padding:0 var(--gutter)}
  .sign{right:auto;left:50%;top:5svh;height:min(52svh,460px);transform:translateX(-50%)}
  .room{background:radial-gradient(ellipse 80% 40% at 50% 28%,rgba(214,186,140,.32),rgba(214,186,140,.08) 50%,rgba(214,186,140,0) 76%)}
  .voice-copy{padding-top:52svh}
  .voice-copy::before{content:'';position:absolute;left:calc(var(--gutter) * -1);right:calc(var(--gutter) * -1);top:42svh;bottom:-40px;background:linear-gradient(180deg,rgba(21,18,14,0),rgba(21,18,14,.82) 9svh);z-index:-1}
  .voice-copy .label{display:none}
  .voice-h{margin:0;font-size:13px}
  .verse{margin-top:12px}
  .verse p{font-size:clamp(17px,5.1vw,21px);line-height:1.32}
  .verse footer{margin-top:12px;font-size:10px}
  .answer{margin-top:12px;font-size:17px}
  .motion .pin{padding-top:0;padding-bottom:0}
  .motion .lift-wrap{left:var(--gutter);right:var(--gutter);bottom:20px;gap:10px 16px}
  .lift-hint{font-size:11px;max-width:200px}
  .rise{font-size:30px;letter-spacing:.08em;white-space:normal;width:max-content;max-width:80vw;text-align:center;line-height:1.08}
  .voice{padding-top:22vw}

  /* Lesson 1: the title screen cropped to a phone-height scene */
  .l1{padding-top:12svh}
  .screen-bleed img{width:114vw;max-width:none;margin-left:-7vw}
  .l1-copy{margin-top:0}
  .ask{display:block;padding:90px var(--gutter) 130px}
  .ask-words{font-size:clamp(46px,17.2vw,120px);letter-spacing:.1em;margin-left:-.04em}
  .ask-words .aw{gap:.12em}
  .ask-words .aw:nth-child(2),.ask-words .aw:nth-child(3){padding-left:0}
  .ask-words .aw + .aw{margin-top:.16em}
  .ask-ic{width:.84em;height:1em;margin:-.04em 0 -.08em}
  .ask-copy{margin-top:40px}

  .l2{padding-top:110px}
  .l2-open{display:block}
  .humble{margin-top:22px}
  .humble .hw{font-size:clamp(50px,17.4vw,120px)}
  .humble .hr{font-size:clamp(22px,7vw,40px)}
  .print-l2{width:76vw;margin:36px -12vw 0 auto}
  .l2-copy{padding-top:30px}
  .submit{font-size:clamp(28px,8.6vw,44px)}
  .letgo{padding-top:100px}
  .tenses h3{font-size:clamp(50px,18.6vw,110px)}
  .tenses p{font-size:16px}
  .surrender{display:block;padding-top:80px}
  .sheet-l2{width:120vw;margin-left:-14vw}
  .sheet-l2 figcaption{padding-left:14vw}
  .hymn{margin-top:60px;font-size:clamp(24px,7.4vw,34px)}

  .l3{padding:220px 0 100px}
  .projected img{width:150vw;max-width:none;margin-left:-25vw}
  .l3-h{margin-top:-14vw}
  .called{font-size:clamp(32px,10.6vw,60px)}
  .l3-copy{display:block;padding-top:40px}
  .l3-copy .body{margin-top:24px}
  .cry{margin-top:110px}
  .cry-lines{font-size:clamp(22px,6.6vw,32px)}
  .cry-lines span:nth-child(2){padding-left:.6em}
  .cry-lines span:nth-child(3){padding-left:1.2em}
  .cry-lines .defer{font-size:clamp(56px,19vw,120px);margin-top:.15em}
  .cry-lines .defer em{padding-left:.6em}
  .cry-end{margin-top:60px}

  .feed{padding:26svh 0 110px}
  .feed-head{display:block}
  .feed-h{font-size:clamp(34px,10.6vw,64px)}
  .rows{margin-top:56px;gap:6vw}
  .row{gap:5vw}
  .row li{width:62vw}
  .row li.wide{width:110vw}
  .row li.tall{width:46vw}

  .kit{display:block;padding:170px var(--gutter) 110px}
  .kit-h{font-size:clamp(40px,13vw,80px)}
  .kit-copy{padding-top:44px}
  .desk{margin:50px -30vw 0 -4vw;padding:10px 0 20px}
  .sheet-back{width:84%;right:6%}
  .sheet-front{margin-top:26vw}
  .sheet-front figcaption{padding-left:6vw}

  .close{display:flex;flex-direction:column;align-items:stretch;padding:240px var(--gutter) 100px;
    background:radial-gradient(ellipse 90% 30% at 50% 24%,rgba(214,186,140,.24),rgba(214,186,140,0) 72%),linear-gradient(180deg,var(--cream) 0,#a99678 70px,#3c352b 170px,var(--dark) 260px,var(--dark) 100%)}
  .cover-end{width:min(84vw,420px);align-self:center}
  .get{margin-top:64px}
  .close-h{font-size:clamp(38px,11.6vw,70px)}
  .price-row .btn{width:100%}
  .facts{grid-template-columns:1fr}

  .foot{padding:0 var(--gutter) 34px}
  .fgrid{display:block}.fnav{margin-top:24px}
}
@media (min-width:761px) and (max-width:1024px) and (orientation:portrait){
  .pin{display:block;padding:0 var(--gutter)}
  .sign{right:auto;left:50%;top:7svh;height:min(48svh,560px);transform:translateX(-50%)}
  .room{background:radial-gradient(ellipse 70% 40% at 50% 30%,rgba(214,186,140,.32),rgba(214,186,140,.08) 50%,rgba(214,186,140,0) 76%)}
  .voice-copy{padding-top:56svh;max-width:680px}
  .verse p{font-size:clamp(22px,3.2vw,30px)}
  .motion .pin{padding-top:0;padding-bottom:0}
  .hh-tube{height:min(92svh,1100px)}
  .hero-foot{margin-top:24svh}
}
@media (max-width:760px) and (max-height:700px){
  .sign{height:36svh;top:4svh}
  .voice-copy{padding-top:37svh}
  .voice-copy::before{top:30svh}
  .verse p{font-size:16px}
  .lift-hint{display:none}
}
@media (min-width:1600px){
  :root{--gutter:max(64px,calc(50vw - 840px))}
  .print-l2{grid-column:10/13}
}