/* Foundation Stones · bespoke series page
   Art direction: the series slides' own cairn, teal stone and distressed yellow lettering.
   The five part names are the stones; the page lays them one at a time, foundation first. */

:root{
  --y:#fede01;          /* the art's yellow (sampled from the slides) */
  --y-deep:#e8c800;
  --ink:#061d1c;        /* the darkest stone shadow */
  --teal:#0c3532;
  --teal-2:#12504b;
  --stone:#2c7a73;
  --paper:#f4f1e6;
  --lime:#b6ff00;       /* SMR accent only */
  --mute:#a9c3bf;
  --gutter:clamp(16px,4.4vw,72px);
  --disp:"Archivo Black","Arial Black",Impact,sans-serif;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
}
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ink);color:#fff;font-family:var(--body);font-size:16px;line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.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}
.nowrap{white-space:nowrap}
blockquote{margin:0}
figure{margin:0}

.label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;margin:0;display:flex;align-items:center;gap:12px;color:#e8f0ee}
.label i{display:inline-block;width:10px;height:10px;background:var(--lime);flex:none}
.label.ink{color:var(--ink)}
.label.ink i{background:var(--ink)}
.src{margin:18px 0 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;opacity:.72}

.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;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.line{background:transparent;border:1px solid rgba(255,255,255,.72);color:#fff}
.btn.line:hover{border-color:var(--y);color:var(--y)}
.btn.sm{min-height:44px;padding:10px 18px;font-size:11px}
.btn.soon{margin:0;border:1px dashed rgba(255,255,255,.6);color:#dfe9e7;cursor:default;background:rgba(6,29,28,.35)}
.btn.soon:hover{transform:none}
.note{margin:10px 0 0;font-size:13px;color:#c8d8d5}

/* the lettering masks: the slides' own yellow type, cut out and recoloured by CSS */
.mw,.st-w{display:block;width:100%;aspect-ratio:var(--ar);background:currentColor;
  -webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}

.wall{font-family:var(--disp);font-weight:400;text-transform:uppercase;line-height:.9;letter-spacing:-.012em;margin:0}
.hl{color:var(--y)}

/* ---------- header (shared SMR lockup) ---------- */
.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;font-weight:600;letter-spacing:.14em;text-transform:uppercase;min-height:44px;display:flex;align-items:center;color:#fff}
.nav a[aria-current]{box-shadow:inset 0 -3px 0 var(--lime)}
.nav a:hover{color:var(--y)}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:#fff}
.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;height:max(100svh,700px,54vw);min-height:640px;background:var(--ink);isolation:isolate}
.hero-art{position:absolute;left:0;right:0;top:-14%;height:100%;z-index:-1;overflow:hidden;-webkit-mask:linear-gradient(180deg,#000 72%,transparent 99%);mask:linear-gradient(180deg,#000 72%,transparent 99%)}
.hero-art picture,.hero-art img{width:100%;height:100%}
.hero-art img{object-fit:cover;object-position:50% 38%}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,29,28,.72) 0,rgba(6,29,28,0) 18%),
             linear-gradient(0deg,rgba(6,29,28,.9) 0,rgba(6,29,28,.55) 22%,rgba(6,29,28,0) 36%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:90px;z-index:0;pointer-events:none;background:linear-gradient(rgba(254,222,1,0),var(--y))}
.crumbs{position:absolute;z-index:3;top:92px;left:var(--gutter)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;gap:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.crumbs li+li::before{content:"/";margin-right:10px;color:#9fbab5}
.crumbs a{color:#fff;text-decoration:none;display:inline-flex;min-height:44px;align-items:center;margin:-14px 0}
.crumbs a:hover{color:var(--y)}
.crumbs [aria-current]{color:#d6e4e1}
.hero-copy{position:absolute;z-index:2;left:var(--gutter);bottom:clamp(36px,5vh,64px);max-width:min(760px,50vw)}
.title{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(30px,3vw,50px);line-height:.95;letter-spacing:-.01em;margin:16px 0 0;color:var(--y)}
.hero-line{margin:16px 0 0;font-size:clamp(16px,1.3vw,19px);line-height:1.5;color:#eaf2f0;max-width:520px}
.action{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero-print{position:absolute;z-index:4;right:calc(var(--gutter) + 1vw);bottom:-15vh;width:clamp(190px,17.5vw,320px);transform:rotate(4deg);view-transition-name:cover-foundational-stones}
.hero-print img{width:100%;height:auto;box-shadow:0 40px 70px -18px rgba(0,0,0,.75),0 6px 14px rgba(0,0,0,.35)}
.hero-print::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.18),rgba(255,255,255,0) 40%);pointer-events:none}

/* ---------- 2 · ask (yellow) ---------- */
.ask{position:relative;background:var(--y);color:var(--ink);padding:clamp(90px,13vh,150px) 0 0;overflow:hidden;isolation:isolate}
.ask-in{position:relative;z-index:2;padding:0 var(--gutter)}
.ask-wall{font-size:clamp(46px,9.3vw,176px);margin-top:22px;color:var(--ink)}
.ask-cols{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,5vw,90px);margin-top:clamp(28px,4.5vw,64px);max-width:1180px}
.verse p{margin:0;font-weight:800;font-size:clamp(20px,1.85vw,30px);line-height:1.32;letter-spacing:-.01em}
.verse cite{display:block;margin-top:14px;font-style:normal;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800}
.ask-story p{margin:0 0 14px;font-size:16px;line-height:1.65}
.ask-story em{font-style:normal;font-weight:800}
.ask-rock{position:relative;z-index:1;margin-top:clamp(20px,3vw,40px);height:clamp(150px,19vw,330px);overflow:hidden}
.ask-rock::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(rgba(6,29,28,0),var(--ink))}
.ask-rock img{position:absolute;left:50%;top:0;width:140vw;max-width:none;height:auto;transform:translateX(-50%);
  -webkit-mask:linear-gradient(180deg,transparent 0,transparent 9%,#000 22%);mask:linear-gradient(180deg,transparent 0,transparent 9%,#000 22%)}

/* ---------- 3 · the stage: lay the stones ---------- */
.lay{position:relative;background:var(--ink)}
.stage{position:relative;height:100svh;min-height:600px;overflow:hidden;overflow:clip;background:var(--ink);isolation:isolate;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.stage-ground{position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 60% at 64% 78%,#16514c 0,rgba(22,81,76,0) 70%),radial-gradient(60% 50% at 20% 10%,#0e3a37 0,rgba(14,58,55,0) 70%),var(--ink)}
.stage-ground::before{content:"";position:absolute;inset:0;background:url(/assets/series/foundational-stones/ground-tile.webp) 50% 0/700px auto repeat;opacity:.22;mix-blend-mode:screen}
.stage-ground::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--ink) 0,rgba(6,29,28,0) 18%)}
.stage-head{position:absolute;z-index:5;top:clamp(30px,7vh,80px);left:var(--gutter);width:min(29vw,440px)}
.stage-h{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(34px,4vw,70px);line-height:.92;margin:14px 0 0}
.stage-count{margin:16px 0 0;font:600 15px/1 var(--cond);letter-spacing:.18em;text-transform:uppercase;color:#cfe0dc}
.stage-count b{font:800 30px/1 var(--cond);color:var(--y);margin-right:4px;letter-spacing:0}
.stage-foot{margin-top:20px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.lay-btn{background:var(--y);color:var(--ink)}
@media (hover:hover){.lay-btn:hover{background:#fff}}
.lay-btn[hidden]{display:none}
.stage-hint{margin:0;font-size:12px;line-height:1.5;color:#cfe0dc;max-width:300px}
.h-m{display:none}
@media (hover:none),(pointer:coarse){.h-d{display:none}.h-m{display:inline}}
.answers{list-style:none;margin:28px 0 0;padding:0}
.answers li{margin:0 0 22px}
.a-n{display:block;font:800 13px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--y)}
.answers q{display:block;margin-top:10px;font-weight:800;font-size:clamp(17px,1.45vw,23px);line-height:1.34;quotes:"\201C" "\201D"}
.answers q::before{content:open-quote}.answers q::after{content:close-quote}
.answers cite{display:block;margin-top:8px;font-style:normal;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:#bcd2ce}
.world{position:absolute;inset:0;z-index:1;transform-origin:64% 100%;will-change:transform}
.bedrock{position:absolute;left:50%;bottom:-15vw;width:132vw;transform:translateX(-50%);pointer-events:none}
.bedrock img{width:100%;max-width:none;height:auto;-webkit-mask:linear-gradient(180deg,transparent 4%,#000 17%);mask:linear-gradient(180deg,transparent 4%,#000 17%)}
.cairn{--w:min(60vw,1000px);list-style:none;margin:0;padding:0;position:absolute;left:64%;bottom:calc(132vw * .2325 * .79 - 15vw);width:var(--w);transform:translateX(-50%);display:flex;flex-direction:column-reverse;align-items:center;z-index:2}
.st{position:relative;width:calc(var(--w) * var(--s,1));margin-top:calc(var(--w) * -.012);color:var(--y);will-change:transform}
.st[data-k="1"]{--s:1}.st[data-k="2"]{--s:.86}.st[data-k="3"]{--s:.95}.st[data-k="4"]{--s:.88}.st[data-k="5"]{--s:.92}
.st-b{display:block;width:100%;padding:0;margin:0;border:0;background:none;color:inherit;border-radius:4px;transition:opacity .25s,color .25s}
.st-b{filter:drop-shadow(0 8px 0 rgba(0,0,0,.3)) drop-shadow(0 20px 22px rgba(0,0,0,.45));-webkit-tap-highlight-color:transparent}
.st-b:focus{outline:none}.st-b:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
.dust{position:absolute;inset:0;z-index:4;width:100%;height:100%;pointer-events:none}

/* motion: pinned stage, stones laid one at a time, one answer showing */
html.js.motion .lay{height:560svh}
html.js.motion .stage{position:sticky;top:0;cursor:pointer}
html.js.motion .st-b{cursor:pointer}
html.js.motion .st-b:hover,html.js.motion .st.asked .st-b{color:#fff7a8}
html.js.motion .answers li{display:none}
html.js.motion .answers li.on{display:block;animation:ans .45s cubic-bezier(.2,.8,.2,1)}
@keyframes ans{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
html.js.motion .st{opacity:0}
html.js.motion .st.laid{opacity:1}
/* no JS / reduced motion: no pin, the cairn stands built, every answer listed beside it */
html:not(.motion) .stage-foot,html:not(.motion) .stage-count{display:none}
html:not(.motion) .stage{height:auto;min-height:clamp(760px,62vw,1100px)}
html:not(.motion) .stage-head{position:relative;top:auto;left:auto;right:auto;padding:clamp(70px,9vh,110px) var(--gutter) 60px;width:auto;max-width:calc(var(--gutter) + 30vw)}
html:not(.motion) .answers q{font-size:17px}
html:not(.motion) .answers li{margin:0 0 20px}

/* ---------- 4-8 · the five stones ---------- */
.band{position:relative;overflow:hidden;isolation:isolate}
.b-word{position:relative;z-index:0;pointer-events:none}
.b-word .mw{transform:translateX(calc(var(--drift,0) * 1vw))}
.b-h{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(30px,3.5vw,58px);line-height:.95;margin:18px 0 0}
.b-p{margin:18px 0 0;font-size:16px;line-height:1.65;max-width:560px}
.b-out{margin:20px 0 0;font-family:var(--cond);font-weight:800;text-transform:uppercase;font-size:clamp(24px,2.3vw,38px);line-height:1.02;letter-spacing:.005em;max-width:640px}
.b-ref{margin:14px 0 0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800}
.b-slide img{width:100%;height:auto;box-shadow:0 50px 80px -24px rgba(0,0,0,.6),0 8px 18px rgba(0,0,0,.28)}

/* stone 1: yellow ground, ink lettering wall, slide off the right edge */
.b1{background:var(--y);color:var(--ink);padding:clamp(40px,6vw,90px) 0 clamp(60px,8vw,120px)}
.b1::before{content:"";position:absolute;left:0;right:0;top:0;height:150px;background:linear-gradient(#123f3b,rgba(18,63,59,0));z-index:1;pointer-events:none}
.b1-word{width:112vw;margin-left:-6vw;color:var(--ink);margin-top:clamp(30px,4vw,60px)}
.b1-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:4vw;padding-left:var(--gutter);margin-top:clamp(16px,2vw,30px);align-items:start}
.b1 .verse{margin-top:26px}
.b1 .verse p{font-size:clamp(19px,1.6vw,26px)}
.b1 .b-p b{font-weight:800}
.b1-slide{transform:rotate(-2.2deg) translateX(5vw);margin-top:clamp(10px,3vw,50px);margin-right:-12vw}

/* stone 2: the week slide is the ground */
.b2{background:var(--teal);min-height:max(100svh,720px);display:flex;align-items:center}
.b2::before{content:"";position:absolute;left:0;right:0;top:0;height:140px;background:linear-gradient(var(--y),rgba(254,222,1,0));z-index:1;pointer-events:none;opacity:.0}
.b2-art{position:absolute;inset:0;z-index:-1;overflow:hidden}
.b2-art img{position:absolute;top:50%;left:22vw;width:max(130vw,calc(100svh * 1.9));max-width:none;height:auto;transform:translateY(-50%)}
.b2-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,29,28,.97) 0,rgba(6,29,28,.9) 34%,rgba(6,29,28,.25) 66%,rgba(6,29,28,.1) 100%),linear-gradient(180deg,var(--y) 0,rgba(254,222,1,0) 9%)}
.b2-in{position:relative;z-index:2;padding:clamp(110px,14vh,170px) var(--gutter) clamp(80px,10vh,120px);max-width:min(1080px,80vw)}
.b2-wall{font-size:clamp(44px,6.7vw,124px);margin-top:20px}
.b2-wall .sm{display:block;font-size:.46em;line-height:1;margin-bottom:.18em;color:#d9e6e3}
.b2 .b-ref{color:#cfe0dc}
.b2-cols{display:grid;grid-template-columns:1fr 1fr;gap:4vw;max-width:880px;margin-top:22px}
.b2-cols .b-p{margin-top:12px}
.b2 .b-out{color:var(--y);margin-top:12px}

/* stone 3: black ground, two walls of three */
.b3{background:#030f0e;padding:clamp(40px,5vw,80px) 0 clamp(70px,8vw,120px)}
.b3-word{width:104vw;margin-left:-2vw;color:var(--y);opacity:.95}
.b3-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:5vw;padding:0 var(--gutter);margin-top:clamp(20px,3vw,50px);align-items:start}
.three{display:grid;grid-template-columns:auto 1fr;column-gap:3vw;align-items:start;border-top:1px solid rgba(255,255,255,.22);padding-top:20px;margin-top:22px}
.three-k{margin:6px 0 0;font:800 14px/1.2 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:#b9d0cb;min-width:9.5em}
.three-w{margin:0;font-family:var(--disp);text-transform:uppercase;font-size:clamp(34px,4.6vw,82px);line-height:.94}
.three-c{grid-column:2;margin:10px 0 0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:#b9d0cb}
.three.obey .three-w{color:#fff}
.b3 .b-p{max-width:640px;margin-top:30px}
.b3-print{margin-top:clamp(20px,6vw,110px);transform:rotate(3.5deg);margin-right:calc(var(--gutter) * -1 - 6vw)}
.b3-print img{width:100%;height:auto;box-shadow:0 40px 70px -20px rgba(0,0,0,.8)}

/* stone 4: deep teal, lettering wall, the lesson page as paper */
.b4{background:var(--teal-2);padding:clamp(40px,5vw,80px) 0 clamp(70px,8vw,120px)}
.b4::before{content:"";position:absolute;left:0;right:0;top:0;height:140px;background:linear-gradient(#030f0e,rgba(3,15,14,0));z-index:1;pointer-events:none}
.b4-word{width:116vw;margin-left:-10vw;color:var(--y);margin-top:20px}
.b4-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5vw;padding-right:var(--gutter);margin-top:clamp(-30px,-1vw,0px);align-items:start}
.b4-sheet{transform:rotate(-3deg) translateX(-7vw);margin-top:20px}
.b4-sheet img{width:100%;height:auto;box-shadow:0 46px 80px -22px rgba(0,0,0,.65),0 6px 14px rgba(0,0,0,.3)}
.b4-wall{font-size:clamp(44px,5.6vw,104px);margin-top:20px}
.b4 .b-ref{color:#d4e5e1}
.b4 .b-out{color:#fff}

/* stone 5: yellow, slide off the left edge */
.b5{background:var(--y);color:var(--ink);padding:clamp(40px,5vw,80px) 0 clamp(80px,9vw,140px)}
.b5::before{content:"";position:absolute;left:0;right:0;top:0;height:110px;background:linear-gradient(var(--teal-2),rgba(18,80,75,0));z-index:1;pointer-events:none}
.b5-word{width:108vw;margin-left:-1vw;color:var(--ink);margin-top:clamp(30px,4vw,60px)}
.b5-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:4vw;padding-right:var(--gutter);margin-top:clamp(-30px,-1.5vw,0px);align-items:start}
.b5-slide{transform:rotate(2deg) translateX(-8vw);margin-top:30px;margin-left:-6vw}
.b5-wall{font-size:clamp(46px,6.4vw,118px);margin-top:20px}
.b5 .hl,.b1 .hl{color:inherit;background:linear-gradient(transparent 58%,rgba(6,29,28,.18) 58%)}
.b1 .hl{background:none;text-decoration:underline;text-decoration-thickness:.09em;text-underline-offset:.08em}
.b5 .hl{background:none;-webkit-text-stroke:0;color:var(--teal-2)}

/* ---------- 9 · the chief corner stone ---------- */
.corner{position:relative;min-height:max(100svh,700px);background:var(--teal);overflow:hidden;isolation:isolate;display:flex;align-items:flex-end}
.corner::before{content:"";position:absolute;inset:0;z-index:-2;background:url(/assets/series/foundational-stones/ground-tile.webp) 50% 0/720px auto repeat;opacity:.8}
.corner::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--y) 0,rgba(254,222,1,0) 60px),linear-gradient(0deg,rgba(6,29,28,.96) 0,rgba(6,29,28,.82) 26%,rgba(6,29,28,0) 46%)}
.corner-art{position:absolute;z-index:-1;left:50%;top:31%;width:128vw;color:var(--y);transform:translate(-37.5%,-78%) rotate(-4deg)}
.corner-art .mw{filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.corner-copy{position:relative;padding:0 var(--gutter) clamp(60px,9vh,110px);max-width:1100px}
.corner-h{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(38px,5.4vw,96px);line-height:.92;margin:18px 0 0}
.corner .verse{margin-top:22px;max-width:720px}
.corner .verse p{font-size:clamp(18px,1.5vw,24px)}
.corner .verse cite{color:#cfe0dc}

/* ---------- 10 · the close: the finished foundation ----------
   One calm finale on the page's own ground. The five lettering stones from "Lay the stones" stand complete on the
   bedrock, each with a stamped STONE # tag (grit-cut like the slides' own lettering), and "built upon the foundation"
   (Ephesians 2:20) on the rock beneath. Beside it: what is included, one lesson page as paper, the free action.
   Then a quiet row of more free series. No boxes; the only motion is one settle of the stones on first view. */
.fin{--w:min(39vw,700px);--rk:110vw;--lab:clamp(56px,5.4vw,96px);position:relative;background:var(--ink);overflow:hidden;overflow:clip;isolation:isolate;padding-top:clamp(40px,4.5vw,90px)}
.fin::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(48% 40% at 74% 58%,#16514c 0,rgba(22,81,76,0) 72%),radial-gradient(46% 36% at 16% 34%,#0e3a37 0,rgba(14,58,55,0) 70%)}
.fin::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(/assets/series/foundational-stones/ground-tile.webp) 50% 0/760px auto repeat;opacity:.2;mix-blend-mode:screen;
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 260px,#000 72%,transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 260px,#000 72%,transparent 100%)}
.fin-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head cairn" "kit cairn";column-gap:clamp(30px,4.5vw,96px);padding:0 var(--gutter)}
.fin-head{grid-area:head}
.fin-wall{font-size:clamp(46px,6.6vw,124px);margin-top:20px}
.fin-kit{grid-area:kit;align-self:end;max-width:560px;padding:clamp(34px,3.4vw,56px) 0 clamp(70px,6.6vw,110px)}
.kit-list{list-style:none;margin:0;padding:0}
.kit-list li{display:grid;grid-template-columns:minmax(0,10.5em) 1fr;gap:16px;padding:14px 0;border-top:1px solid rgba(255,255,255,.16)}
.kit-list li:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.kit-list b{font:800 20px/1.15 var(--cond);letter-spacing:.04em;text-transform:uppercase;color:var(--y)}
.kit-list span{font-size:15px;line-height:1.5;color:#dbe7e4}
.fin-act{margin-top:30px}
.fin-soon{display:inline-flex;align-items:center;gap:14px;min-height:56px;margin:0;padding:14px 26px;background:rgba(255,255,255,.08);color:#eef4f2;font:800 13px/1.4 var(--body);letter-spacing:.06em;text-transform:uppercase;cursor:default}
.fin-soon::before{content:"";width:8px;height:8px;flex:none;background:var(--y)}
.fin-act .note{margin-top:12px}

/* the cairn: stones centred, their tags in one straight column to the left */
.fin-cairn{grid-area:cairn;align-self:end;padding-left:var(--lab)}
.fin-stack{list-style:none;margin:0;padding:0;width:var(--w);display:flex;flex-direction:column-reverse;align-items:center}
.fin-st{position:relative;width:calc(var(--w) * var(--s));margin-top:calc(var(--w) * -.012);color:var(--y);transform:translateX(var(--x)) rotate(var(--r))}
.fin-st[data-k="1"]{--s:1;--x:0%;--r:-.9deg;--g:0% 0%;--i:0}
.fin-st[data-k="2"]{--s:.86;--x:2.2%;--r:1.3deg;--g:100% 100%;--i:1}
.fin-st[data-k="3"]{--s:.95;--x:-1.6%;--r:-.6deg;--g:100% 0%;--i:2}
.fin-st[data-k="4"]{--s:.88;--x:1.8%;--r:1.1deg;--g:0% 100%;--i:3}
.fin-st[data-k="5"]{--s:.92;--x:-1.2%;--r:-1.4deg;--g:50% 100%;--i:4}
.fin-st .mw{filter:drop-shadow(0 7px 0 rgba(0,0,0,.3)) drop-shadow(0 18px 20px rgba(0,0,0,.45))}
.fin-n{position:absolute;top:50%;right:calc(100% + (var(--w) - var(--w) * var(--s)) / 2 + clamp(10px,1.1vw,20px));transform:translateY(-46%);
  font-family:var(--disp);font-size:clamp(26px,2.5vw,44px);line-height:.86;letter-spacing:-.01em;text-align:right;white-space:nowrap;color:var(--y);
  -webkit-mask:url(/assets/series/foundational-stones/icon-grit.webp) var(--g)/300% 200% no-repeat;mask:url(/assets/series/foundational-stones/icon-grit.webp) var(--g)/300% 200% no-repeat}
.fin-n small{display:block;text-transform:uppercase;font-size:.36em;letter-spacing:.1em;line-height:1;margin-bottom:.22em}

/* the bedrock, with the lesson page set down at the cairn's foot and the cornerstone line on the rock */
.fin-ground{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(30px,4.5vw,96px);align-items:start;
  padding:calc(var(--rk) * .2325 * .29) var(--gutter) 0;margin-top:calc(var(--rk) * .2325 * -.2)}
.fin-rock{position:absolute;z-index:0;top:0;left:50%;width:var(--rk);transform:translateX(-50%);pointer-events:none}
.fin-rock img{width:100%;max-width:none;height:auto;-webkit-mask:linear-gradient(180deg,transparent 3%,#000 16%,#000 58%,transparent 98%);mask:linear-gradient(180deg,transparent 3%,#000 16%,#000 58%,transparent 98%)}
.fin-page{position:relative;z-index:1;grid-column:1;justify-self:start;width:min(100%,540px);transform:rotate(-2deg);transform-origin:30% 0}
.fin-page img{width:100%;height:auto;box-shadow:0 44px 70px -22px rgba(0,0,0,.8),0 6px 14px rgba(0,0,0,.4)}
.fin-page .src{margin-top:16px;color:#cfe0dc;opacity:1}
.fin-cap{position:relative;z-index:1;grid-column:2;justify-self:end;width:var(--w);margin:0;text-align:center;text-shadow:0 2px 14px rgba(3,15,14,.75)}
.fin-cap span{display:block;font-family:var(--disp);text-transform:uppercase;font-size:clamp(18px,1.6vw,28px);line-height:1;color:var(--y)}
.fin-cap cite{display:block;margin-top:10px;font-style:normal;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:#e3edeb}

/* more free series: one quiet row */
.more{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 44px;padding:clamp(80px,7vw,120px) var(--gutter) 0}
.more ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 36px;flex:1 1 auto}
.more a{display:inline-flex;align-items:center;gap:8px;min-height:48px;text-decoration:none;font:800 clamp(18px,1.45vw,22px)/1 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:#e8f0ee}
.more a:hover{color:var(--y)}
.more-all{margin-left:auto}
.more-all a{color:var(--y)}

/* motion (once, on first view): the stones settle onto the rock, foundation first */
html.motion .fin-st{transition:opacity .3s ease calc(var(--i) * 140ms),translate .62s cubic-bezier(.3,1.5,.55,1) calc(var(--i) * 140ms)}
html.motion .fin-stack:not(.in) .fin-st{opacity:0;translate:0 -44px}

@media (max-width:1100px){
  .fin{--w:min(42vw,520px)}
}
@media (max-width:900px){
  .fin{--rk:170vw;--w:min(calc(100vw - 2 * var(--gutter) - var(--lab)),600px);display:flex;flex-direction:column;padding-top:80px}
  .fin-grid,.fin-ground,.fin-kit{display:contents}
  .fin-head{order:1;padding:0 var(--gutter)}
  .fin-cairn{order:2;position:relative;z-index:2;margin:44px 0 0;padding:0 var(--gutter) 0 calc(var(--gutter) + var(--lab))}
  .fin-rock{order:3;position:relative;top:auto;flex:none;margin-top:calc(var(--rk) * .2325 * -.2)}
  .fin-cap{order:4;width:var(--w);margin:calc(var(--rk) * .2325 * -.52) 0 0 calc(var(--gutter) + var(--lab))}
  .kit-list{order:5;margin:56px var(--gutter) 0;max-width:600px}
  .fin-page{order:6;width:auto;max-width:600px;margin:48px var(--gutter) 0;transform:rotate(-1.5deg)}
  .fin-act{order:7;margin:36px var(--gutter) 0}
  .more{order:8;padding-top:72px}
}
@media (max-width:700px){
  .fin{--rk:230vw;--lab:46px;--w:calc(100vw - 2 * var(--gutter) - var(--lab));padding-top:64px}
  .fin-wall{font-size:clamp(44px,13vw,64px)}
  .fin-cairn{margin-top:40px}
  .fin-n{font-size:22px;right:calc(100% + (var(--w) - var(--w) * var(--s)) / 2 + 7px)}
  .fin-cap{width:auto;margin-left:var(--gutter);margin-right:var(--gutter)}
  .fin-cap span{font-size:19px}
  .kit-list{margin-top:52px}
  .kit-list li{grid-template-columns:1fr;gap:4px}
  .fin-page{margin-top:44px}
  .fin-soon{display:flex;justify-content:center}
  .more{padding-top:64px;gap:4px 28px}
  .more p.label{flex:1 0 100%}
  .more ul{gap:0 24px}
  .more-all{margin-left:0}
}

/* ---------- footer ---------- */
.foot{background:var(--ink);padding:0 var(--gutter) 40px;position:relative}
.fgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-top:80px;align-items:start;border-top:1px solid rgba(255,255,255,.1);margin-top:70px}
.fbrand{grid-column:1/5}.fbrand p{margin:20px 0 0;font-size:13px;line-height:1.7;color:#b4c6c2;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:#b4c6c2}
.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:#a3b8b4}

/* arrival motion (only with motion allowed) */
@media (prefers-reduced-motion:no-preference){
  .hero-print{animation:set 1.1s cubic-bezier(.2,.9,.25,1.12) .15s both}
  @keyframes set{from{opacity:0;transform:translateY(-60px) rotate(-6deg)}to{opacity:1;transform:rotate(4deg)}}
  html.js .rise{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
  html.js .rise.in{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .nav{display:none}
}
@media (max-width:900px){
  .ask-cols,.b2-cols{grid-template-columns:minmax(0,1fr)}
  .b1-grid,.b3-grid,.b4-grid,.b5-grid{grid-template-columns:minmax(0,1fr)}
  .b1-grid{padding-right:var(--gutter)}
  .b1-slide{margin-right:-22vw;transform:rotate(-2.2deg) translateX(10vw)}
  .b3-print{width:64vw;margin-left:auto}
  .b4-grid{padding-left:var(--gutter)}
  .b4-sheet{order:2;transform:rotate(-3deg) translateX(-14vw);width:110vw}
  .b5-grid{padding-left:var(--gutter)}
  .b5-slide{order:2;margin-left:-16vw;width:118vw}
}
/* portrait tablets: the wide slide at its own shape, copy below it */
@media (min-width:701px) and (max-aspect-ratio:1/1){
  .hero{height:auto;padding-top:120px}
  .hero-art{position:relative;top:auto;height:auto;aspect-ratio:16/9;z-index:0}
  .hero-art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(rgba(6,29,28,0),var(--ink))}
  .hero::before{background:linear-gradient(180deg,rgba(6,29,28,.7) 0,rgba(6,29,28,0) 14%)}
  .hero-copy{position:relative;left:auto;bottom:auto;max-width:none;margin-top:-40px;padding:0 var(--gutter) 110px;z-index:2}
  .hero-print{bottom:-60px;width:200px}
}
@media (max-width:700px){
  .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:76px}
  /* phone hero: the portrait "New series" graphic, full width, handing off into the copy */
  .hero{height:auto;min-height:0}
  .hero{padding-top:112px}
  .hero-art{position:relative;inset:auto;top:auto;height:auto;z-index:0;aspect-ratio:1080/1250;view-transition-name:cover-foundational-stones;-webkit-mask:none;mask:none}
  .hero-art img{object-position:50% 100%}
  .hero::before{background:linear-gradient(180deg,rgba(6,29,28,.7) 0,rgba(6,29,28,0) 14%)}
  .hero-art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(rgba(6,29,28,0),var(--ink))}
  .hero-print{display:none;view-transition-name:none}
  .hero-copy{position:relative;left:auto;bottom:auto;max-width:none;margin-top:-90px;padding:0 var(--gutter) 70px;z-index:2}
  .title{font-size:clamp(34px,10.4vw,48px)}
  .action .btn{flex:1 1 100%}
  .ask{padding-top:56px}
  .ask-wall{font-size:clamp(38px,12.4vw,64px)}
  .ask-wall .nowrap{white-space:normal}
  .ask-rock{height:110px}
  .ask-rock img{width:240vw}
  /* phone stage: heading and answer on top, the cairn on the bedrock below */
  .stage-head{top:22px;left:var(--gutter);right:var(--gutter);width:auto}
  .stage-h{font-size:clamp(30px,9vw,42px)}
  .stage-foot{flex-direction:row;align-items:center;margin-top:14px}
  .stage-count{margin-top:10px}
  .stage-hint{display:none}
  .lay-btn{min-height:48px;padding:12px 20px}
  .answers{margin-top:18px}
  .answers li{margin:0}
  .answers q{font-size:16px}
  .world{transform-origin:50% 100%}
  .cairn{--w:94vw;left:50%}
  .bedrock{width:230vw;bottom:-30vw}
  .cairn{bottom:calc(230vw * .2325 * .79 - 30vw)}
  .b1-word{width:124vw;margin-left:-12vw}
  .b-out{font-size:26px}
  .b2{min-height:0;align-items:stretch}
  .b2-art img{left:-40vw;width:240vw;top:0;transform:none}
  .b2-art::after{background:linear-gradient(180deg,var(--y) 0,rgba(254,222,1,0) 4%,rgba(6,29,28,0) 22%,rgba(6,29,28,.86) 40%,rgba(6,29,28,.97) 60%)}
  .b2-in{padding-top:calc(240vw * .5625 * .62);max-width:none}
  .b2-wall{font-size:clamp(38px,11.4vw,58px)}
  .b3-word{width:112vw;margin-left:-6vw}
  .three{grid-template-columns:1fr}
  .three-k{margin:0 0 6px}
  .three-c{grid-column:1}
  .three-w{font-size:clamp(34px,10.6vw,52px)}
  .b3-print{width:72vw;margin-right:-10vw}
  .b4-word{width:112vw;margin-left:-7vw}
  .b4-wall,.b5-wall{font-size:clamp(40px,12vw,60px)}
  .b5-word{width:110vw;margin-left:-5vw}
  .corner{min-height:780px}
  .corner-art{width:180vw;top:25%}
  .corner-h{font-size:clamp(34px,10vw,52px)}
  .fgrid{display:block;padding-top:48px}.fnav{margin-top:24px}
  html:not(.motion) .stage{min-height:0;padding-bottom:calc(94vw * 1.05 + 70px)}
  html:not(.motion) .stage-head{max-width:none;padding:56px var(--gutter) 30px}
}
@media (max-width:350px){
  .top .btn.sm span{display:none}
  .brand-name{font-size:8.5px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- stone 3 icons: one stamped mark per word (Death / Burial / Resurrection, Repentance / Baptism / Holy Ghost) ----------
   Inline SVG in the art's yellow (light in white), edges roughened by an SVG displacement filter (#fs-rough) and the ink
   cut by icon-grit.webp: six cells of the real grit from inside the slides' STONE # lettering, one cell per icon.
   The label sits above each list so every word has room for its mark at full poster size. */
.three{grid-template-columns:minmax(0,1fr)}
.three-k{margin:0 0 12px}
.three-c{grid-column:1}
.tw{white-space:nowrap}
.ic{display:inline-block;position:relative;width:1em;height:.94em;margin:-.34em .24em 0 0;vertical-align:baseline;top:.01em;color:var(--y);transform:rotate(var(--r,0deg))}
.ic .ink{position:absolute;inset:0;-webkit-mask:url(/assets/series/foundational-stones/icon-grit.webp) var(--g)/300% 200% no-repeat;mask:url(/assets/series/foundational-stones/icon-grit.webp) var(--g)/300% 200% no-repeat}
.ic svg{display:block;width:100%;height:100%;overflow:visible;fill:currentColor}
.ic-defs{position:absolute;width:0;height:0;overflow:hidden}
.ic-res .rays,.ic-res .glow,.ic-hg .fl{transform-box:fill-box}
.ic-res .rays{transform-box:view-box;transform-origin:46px 80px}
.ic-hg .fl{transform-origin:50% 100%}
/* the grit puff that each stamp kicks up (yellow and stone teal, like the stage's dust) */
.ic::after{content:"";position:absolute;left:46%;top:62%;width:.05em;height:.05em;border-radius:50%;opacity:0;pointer-events:none;
  box-shadow:-.52em -.1em 0 var(--y),-.4em .22em 0 #2c7a73,-.18em -.46em 0 var(--y),.2em -.5em 0 #2c7a73,.5em -.2em 0 var(--y),.56em .16em 0 var(--y),.3em .34em 0 #2c7a73,-.62em .3em 0 var(--y),.66em -.04em 0 #2c7a73,0 -.6em 0 var(--y)}
@media (prefers-reduced-motion:no-preference){
  html.motion .ic:not(.in){opacity:0}
  html.motion .ic-res:not(.in) .rays{opacity:0}
  html.motion .ic-res:not(.in) .glow{opacity:0}
  html.motion .ic.in{animation:fs-stamp .62s cubic-bezier(.3,.7,.3,1) var(--d,0ms) both}
  html.motion .ic.in .ink{-webkit-animation:fs-grit .7s ease-out var(--d,0ms) both;animation:fs-grit .7s ease-out var(--d,0ms) both}
  html.motion .ic.in::after{animation:fs-puff .7s ease-out calc(var(--d,0ms) + .2s) both}
  /* Resurrection: the light breaks out of the open tomb after the stamp lands */
  html.motion .ic-res.in .glow{animation:fs-glow .9s ease-out calc(var(--d,0ms) + .5s) both}
  html.motion .ic-res.in .rays{animation:fs-rays 1s cubic-bezier(.2,.9,.25,1.15) calc(var(--d,0ms) + .62s) both}
  /* Holy Ghost: the tongues of fire flicker gently, only while on screen */
  html.motion .ic-hg.lit .fl1{animation:fs-flick 1.25s ease-in-out infinite alternate}
  html.motion .ic-hg.lit .fl2{animation:fs-flick-s 0.95s ease-in-out -.3s infinite alternate}
  html.motion .ic-hg.lit .fl3{animation:fs-flick-s 1.1s ease-in-out -.6s infinite alternate-reverse}
  html.motion .ic-hg.lit:not(.live) .fl{animation-play-state:paused}
}
@keyframes fs-stamp{
  0%{opacity:0;transform:translateY(-.2em) scale(1.75) rotate(calc(var(--r,0deg) - 12deg))}
  42%{opacity:1;transform:scale(.9) rotate(calc(var(--r,0deg) + 3deg))}
  64%{transform:scale(1.05) rotate(calc(var(--r,0deg) - 1.2deg))}
  82%{transform:scale(.985) rotate(var(--r,0deg))}
  100%{opacity:1;transform:rotate(var(--r,0deg))}}
@-webkit-keyframes fs-grit{from{-webkit-mask-size:430% 290%;mask-size:430% 290%}to{-webkit-mask-size:300% 200%;mask-size:300% 200%}}
@keyframes fs-grit{from{-webkit-mask-size:430% 290%;mask-size:430% 290%}to{-webkit-mask-size:300% 200%;mask-size:300% 200%}}
@keyframes fs-puff{0%{opacity:0;transform:scale(.3)}20%{opacity:.95}100%{opacity:0;transform:scale(1.35) translateY(.12em)}}
@keyframes fs-glow{0%{opacity:0}30%{opacity:1}55%{opacity:.75}100%{opacity:1}}
@keyframes fs-rays{0%{opacity:0;transform:scale(.35)}45%{opacity:1}70%{transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@keyframes fs-flick{0%{transform:scale(1,1) skewX(0)}35%{transform:scale(.97,1.05) skewX(-2.5deg)}70%{transform:scale(1.02,.96) skewX(1.5deg)}100%{transform:scale(.98,1.03) skewX(2.5deg)}}
@keyframes fs-flick-s{0%{transform:scale(1,1) skewX(0)}50%{transform:scale(.95,1.08) skewX(3deg)}100%{transform:scale(1.03,.94) skewX(-3deg)}}
/* phone: the same marks, the type sized so the longest word and its mark always fit the column */
@media (max-width:700px){
  .three-w{font-size:min(clamp(34px,10.6vw,52px),calc((100vw - 2 * var(--gutter)) / 10.05))}
  .ic{width:.9em;height:.86em;margin-right:.2em}
}

/* Free-download button */
.btn.freecode{background:#b6ff00;color:#0b0a10;cursor:pointer}
.btn.freecode:hover{background:#fff;color:#0b0a10}
@media (max-width:700px){.btn.freecode{width:100%;justify-content:center;text-align:center}}