/* God Built — bespoke series page, full-bleed pass (round 3).
   Art direction: the page is a set of construction drawings, and every screen is one full-size
   sheet. You scroll down one plumb line: the plans with the cover lying huge on the drafting
   table (the plan), the house going up across the whole screen (the process), then three lesson
   sheets where each poster is drawn at full scale and cropped by the screen edges, on grounds
   that climb out of the pit: night navy (Part I, the pit and the prison) → full cobalt
   (Part II) → open sky (Part III, altitude) → whiteprint paper (Ephesians 2:10) → the blueprint
   rising back through the paper (the foundation and the buy) → SMR charcoal.
   Lime #b6ff00 stays SMR's accent only (sheet markers, buy, focus). The series accent is the
   cover's stamped typewriter (Special Elite). */

@view-transition{navigation:auto}

:root{
  --bp:#155ac0;          /* the cover's blueprint blue */
  --bp2:#1252b3;
  --deep:#0a2f72;
  --pit:#04122f;         /* Part I: the pit and the prison */
  --cobalt:#0b3ad0;      /* Part II: full saturated cobalt */
  --sky:#a9d6ff;         /* Part III: altitude */
  --paper:#e9eef4;       /* whiteprint */
  --chalk:#eef6ff;       /* the cover's white ink */
  --ink-on-paper:#0b2f73;
  --body-on-paper:#24365c;
  --acc:#a8d4ff;         /* accent phrase on blue */
  --lime:#b6ff00;        /* SMR accent only */
  --char:#101111;
  --mute:#c3d5f2;
  --g:64px;              /* side gutter */
  --lx:34px;             /* plumb line x */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bp)}
body{margin:0;background:var(--bp);color:var(--chalk);font-family:Manrope,Arial,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
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:var(--char);padding:12px 18px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}
.wrap{padding-left:var(--g);padding-right:var(--g)}

/* buttons (SMR system) */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:56px;padding:14px 26px;font:800 13px/1.4 Manrope,Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;transition:transform .12s,background .15s,color .15s,border-color .15s}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(1px)}
.btn.green{background:var(--lime);color:var(--char);box-shadow:0 14px 30px rgba(3,18,52,.35)}.btn.green:hover{background:#fff}
.btn.line{border:1px solid rgba(238,246,255,.55);color:var(--chalk)}.btn.line:hover{border-color:var(--lime);color:var(--lime)}
.btn.sm{min-height:44px;padding:10px 18px;font-size:11px}

/* header + brand (SMR lockup), floating on the blueprint */
.top{position:absolute;left:0;right:0;top:0;z-index:20;height:80px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.top::before{content:'';position:absolute;left:0;right:0;top:0;height:150px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(15,72,170,.94) 0%,rgba(15,72,170,.7) 45%,rgba(15,72,170,0) 100%)}
.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:#fff}
.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:#fff}
.brand-mark{height:40px;width:40px;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}

/* the continuous drafting grid + plumb line (one sheet from top to bottom).
   Sections are not stacking contexts: grounds paint first, art at z 1, the grid at z 2, copy and marks above. */
main{position:relative;display:block}
main::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:linear-gradient(rgba(150,190,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(150,190,255,.10) 1px,transparent 1px);
  background-size:56px 56px;background-position:-1px -1px;
  -webkit-mask-image:linear-gradient(#000,#000 calc(100% - 240px),transparent);mask-image:linear-gradient(#000,#000 calc(100% - 240px),transparent)}
.plumb{position:absolute;top:0;bottom:200px;left:var(--lx);width:1px;z-index:3;pointer-events:none}
.plumb-line{position:absolute;inset:0;background:linear-gradient(#8fc0ff,#7fb0f0 70%,rgba(127,176,240,0));transform-origin:top;transform:scaleY(var(--plumb,1))}
.js .plumb-line{transform:scaleY(var(--plumb,0))}
section{position:relative}
main .wrap,.part-copy,.found-in{position:relative;z-index:3}

/* sheet marker: an SMR lime square that sits on the plumb line */
.sheet{position:relative;margin:0;display:flex;align-items:baseline;gap:14px;font:800 11px/1.2 Manrope,Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.sheet i{display:inline-block;flex:none;width:11px;height:11px;background:var(--lime);align-self:center}
.plan-in>.sheet i,.process-in>.sheet i,.build-head>.sheet i,.design-in>.sheet i{position:absolute;left:calc(var(--lx) - var(--g) - 5px);top:50%;margin-top:-6px}
.sheet span{font-family:'Special Elite',monospace;font-weight:400;letter-spacing:.06em;font-size:14px;text-transform:none;color:var(--chalk)}

.hd{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.015em;line-height:.88;margin:22px 0 0;font-size:clamp(46px,5.6vw,88px);color:#fff;text-wrap:balance}
.acc{font-family:'Special Elite','Courier New',monospace;font-weight:400;text-transform:none;letter-spacing:-.01em;color:var(--acc)}
.hd .acc{display:block;font-size:.7em;line-height:1.06;margin-top:.14em}
.body{font-size:18px;line-height:1.7;color:#dbe8fb;max-width:520px;margin:26px 0 0}

/* ---------- SHEET 01 · THE PLAN: the plans fill the screen, the cover lies huge on the table ---------- */
.plan{min-height:max(100svh,780px);background:var(--bp);overflow:clip}
.plan-art{position:absolute;inset:0;z-index:0;pointer-events:none}
.plan-art img{width:100%;height:100%;object-fit:cover;object-position:30% 0;opacity:.78;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.35) 100%);mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.35) 100%)}
.plan::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,rgba(16,74,170,.9) 0%,rgba(16,74,170,.66) 30%,rgba(16,74,170,.12) 52%,rgba(16,74,170,0) 70%),
  linear-gradient(0deg,var(--bp2) 0%,rgba(18,82,179,0) 26%)}
/* the cover as a printed sheet lying on the drafting table, huge, running off the right and bottom edges */
.drawing{position:absolute;z-index:1;left:46vw;top:150px;width:min(64vw,1180px);perspective:2200px}
.sheet-obj{position:relative;transform:rotateX(8deg) rotateY(-13deg) rotateZ(2.2deg);transform-origin:30% 40%;box-shadow:-44px 64px 90px rgba(3,16,46,.6),-8px 12px 22px rgba(3,16,46,.38)}
.sheet-obj::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 34%,rgba(0,12,40,0) 62%,rgba(0,12,40,.28) 100%)}
.plan::after{content:'';position:absolute;left:0;right:0;bottom:0;height:150px;z-index:2;pointer-events:none;background:linear-gradient(0deg,var(--bp2) 0%,rgba(18,82,179,.7) 35%,rgba(18,82,179,0) 100%)}
.cover-img{width:100%;height:auto;aspect-ratio:4/5;view-transition-name:cover-god-built}
.plan-in{padding-top:104px;padding-bottom:56px;min-height:inherit;display:flex;flex-direction:column;pointer-events:none}
.plan-in a,.plan-in .btn{pointer-events:auto}
.crumbs ol{list-style:none;margin:0 0 26px;padding:0;display:flex;gap:10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--mute)}
.crumbs li+li::before{content:'/';margin-right:10px;opacity:.6}
.crumbs a{text-decoration:none;display:inline-flex;min-height:44px;align-items:center;margin:-14px 0}
.crumbs a:hover{color:#fff}
.title{margin:14px 0 0;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(140px,17.6vw,330px);line-height:.78;letter-spacing:-.02em}
.title span{display:block}
.t-plan{color:transparent;-webkit-text-stroke:2.5px var(--chalk);paint-order:stroke}
.t-built{color:var(--chalk);text-shadow:0 20px 50px rgba(3,18,52,.45)}
.plan-foot{margin-top:auto;padding-top:30px;display:grid;grid-template-columns:max-content minmax(0,300px);column-gap:36px;align-items:end;max-width:min(39vw,680px)}
.stamp{margin:0;font-family:'Special Elite','Courier New',monospace;font-size:clamp(20px,1.65vw,32px);line-height:1.15;color:var(--acc)}
.plan-lede{margin:0;font-size:15px;line-height:1.65;color:#dbe8fb}
.buy{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:22px}
.price{margin:0;display:flex;align-items:baseline;gap:8px}
.price strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:64px;line-height:.9;letter-spacing:-.01em}
.price span{font-size:11px;letter-spacing:.16em;font-weight:800;color:var(--mute)}
.buy-note{margin:14px 0 0;font-size:13px;color:var(--mute)}
@media(prefers-reduced-motion:no-preference){
  .js .sheet-obj{animation:lift 1.4s cubic-bezier(.2,.7,.2,1) both}
  .js .t-built{animation:fillin 1.1s .55s cubic-bezier(.3,.6,.2,1) both}
}
@keyframes lift{from{transform:rotateX(24deg) rotateY(-4deg) rotateZ(5deg) translateY(60px);box-shadow:-6px 8px 10px rgba(3,16,46,.4)}}
@keyframes fillin{from{color:transparent;-webkit-text-stroke:2.5px var(--chalk)}to{color:var(--chalk);-webkit-text-stroke:2.5px var(--chalk)}}

/* ---------- SHEET 02 · THE PROCESS: the house goes up across the whole screen ---------- */
.process{min-height:max(100svh,820px);overflow:clip;background:var(--deep);display:flex;flex-direction:column}
.house{position:absolute;inset:0;z-index:0;pointer-events:none}
.house img{width:100%;height:calc(100% + 80px);object-fit:cover;object-position:30% 40%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.45) 14%,rgba(0,0,0,.6) 40%,#000 70%,rgba(0,0,0,.8) 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.45) 14%,rgba(0,0,0,.6) 40%,#000 70%,rgba(0,0,0,.8) 86%,transparent 100%)}
.js .house img{transform:translateY(calc(var(--rise,0px) - 40px))}
.process::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,var(--bp2) 0%,rgba(10,47,114,.9) 18%,rgba(10,47,114,.8) 44%,rgba(10,47,114,.35) 62%,rgba(10,47,114,0) 74%,rgba(4,18,47,0) 86%,var(--pit) 100%),linear-gradient(90deg,rgba(10,47,114,.9) 0%,rgba(10,47,114,.72) 36%,rgba(10,47,114,0) 60%)}
.process-in{padding-top:110px;padding-bottom:80px}
.wall{font-size:clamp(58px,8.2vw,160px);line-height:.86;max-width:15ch;text-shadow:0 6px 40px rgba(4,18,47,.55)}
.wall .acc{font-size:.62em;color:#d3e9ff}
.process-foot{margin-top:6px}
.process .body{max-width:470px;color:#eef6ff;text-shadow:0 2px 16px rgba(4,18,47,.8)}
.tools{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0}
.tools li{font:800 13px/1 Manrope,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#fff;padding:12px 18px 12px 0;margin-right:18px;border-right:1px solid rgba(168,212,255,.5);text-shadow:0 2px 12px rgba(4,18,47,.9)}
.tools li:last-child{border-right:0}

/* ---------- SHEET 03 · THE BUILD ---------- */
.build{background:var(--pit)}
.build-head{padding-top:120px;padding-bottom:40px}
.sold{font-size:clamp(58px,9.4vw,180px);line-height:.86;max-width:none}
.sold .acc{font-size:.72em;margin-top:.1em}
.build-head .body{margin-top:34px}

/* each part is one full-screen sheet: the poster at full scale, cropped by the edges */
.part{position:relative;min-height:max(100svh,820px);overflow:clip;display:flex;align-items:center;padding:110px var(--g)}
.poster{position:absolute;z-index:1;width:min(64vw,1060px);aspect-ratio:4/5}
.poster img{width:100%;height:100%;object-fit:cover}
.poster::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 36%,rgba(0,12,40,0) 60%,rgba(0,12,40,.26) 100%)}
.part-copy{width:min(36vw,560px)}
.part-no{margin:0;font-family:'Special Elite',monospace;font-size:20px;color:var(--acc)}
.part-t{margin:14px 0 0;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(56px,6.6vw,124px);line-height:.86;letter-spacing:-.015em;color:#fff;text-wrap:balance}
.pull{margin:30px 0 0;padding:0}
.pull p{margin:0;font-size:clamp(20px,1.75vw,28px);line-height:1.45;font-weight:600;color:#e7f0ff}
.pull .acc{font-size:1.06em}
.refs{margin:26px 0 0;padding-top:16px;border-top:1px solid rgba(168,212,255,.32);font-size:13px;line-height:1.7;color:var(--mute);letter-spacing:.02em}
.numeral{position:absolute;z-index:1;font-family:'Special Elite',monospace;font-size:clamp(260px,34vw,600px);line-height:.8;pointer-events:none;user-select:none;color:rgba(168,212,255,.09)}

/* Part I: the pit. Night navy; the poster runs off the left edge and the top. */
.p1{background:var(--pit)}
.p1 .poster{left:-11vw;bottom:7vh;transform:rotate(-2.6deg)}
.part::before,.part::after{content:'';position:absolute;left:0;right:0;z-index:2;pointer-events:none}
.p1::before{top:0;height:24%;background:linear-gradient(180deg,var(--pit) 0%,rgba(4,18,47,.85) 30%,rgba(4,18,47,0) 100%)}
.p1 .part-copy{margin-left:auto}
.p1 .numeral{right:calc(var(--g) - 2vw);top:4vh}

/* Part II: the well. Full cobalt; the poster runs off the right edge and the bottom. */
.p2{background:linear-gradient(180deg,var(--pit) 0%,#0a2a9e 12%,var(--cobalt) 26%,var(--cobalt) 100%)}
.p2 .poster{right:-12vw;top:8vh;transform:rotate(2deg)}
.p2::after{bottom:0;height:26%;background:linear-gradient(0deg,var(--cobalt) 0%,rgba(11,58,208,.85) 30%,rgba(11,58,208,0) 100%)}
.p2 .part-copy{margin-right:auto}
.p2 .numeral{left:calc(var(--g) - 3vw);top:4vh;color:rgba(200,225,255,.12)}
.p2 .pull p{color:#fff}
.p2 .refs{color:#dbe8fb}

/* Part III: altitude. Open sky; the poster climbs off the left edge and the bottom; ink type. */
.p3{background:linear-gradient(180deg,var(--cobalt) 0%,#3f86f2 12%,#86c2ff 24%,var(--sky) 34%,#c6e3ff 82%,var(--paper) 100%);color:var(--ink-on-paper)}
.p3 .poster{left:-8vw;top:9vh;transform:rotate(-1.6deg)}
.p3::after{bottom:0;height:28%;background:linear-gradient(0deg,var(--paper) 0%,rgba(233,238,244,.85) 30%,rgba(233,238,244,0) 100%)}
.p3 .part-copy{margin-left:auto}
.p3 .part-no{color:#1f5fc4}
.p3 .part-t{color:var(--ink-on-paper)}
.p3 .pull p{color:#14306a}
.p3 .acc{color:#1650c2}
.p3 .refs{color:#2b4377;border-top-color:rgba(11,47,115,.3)}
.p3 .numeral{right:calc(var(--g) - 2vw);top:14vh;color:rgba(11,47,115,.08)}
.p3 :focus-visible{outline-color:var(--ink-on-paper)}
.build-src{margin:26px 0 0;font-size:13px;line-height:1.6;color:#2b4377}
.build-src a{color:var(--ink-on-paper);text-underline-offset:4px;font-weight:700;display:inline-flex;min-height:44px;align-items:center}

/* posters settle onto the sheet as they arrive */
@media(prefers-reduced-motion:no-preference){
  .js .part .poster{opacity:0;translate:0 70px;scale:.97;transition:opacity 1s ease,translate 1.3s cubic-bezier(.2,.7,.2,1),scale 1.3s cubic-bezier(.2,.7,.2,1)}
  .js .part.on .poster{opacity:1;translate:0 0;scale:1}
  .js .part .part-t{opacity:0;translate:0 30px;transition:opacity .8s ease .25s,translate 1s cubic-bezier(.2,.7,.2,1) .25s}
  .js .part.on .part-t{opacity:1;translate:0 0}
}

/* ---------- SHEET 04 · THE DESIGN (whiteprint) ---------- */
.design{color:var(--ink-on-paper);background:linear-gradient(180deg,var(--paper) 0%,var(--paper) calc(100% - 380px),var(--bp) 100%);min-height:100svh;overflow:clip}
.design-in{padding-top:120px;padding-bottom:40px}
.design .sheet{color:#4a5f86}
.design .sheet span{color:var(--ink-on-paper)}
.verse{margin:34px 0 0}
.verse p{margin:0;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(46px,6.2vw,124px);line-height:.9;letter-spacing:-.015em;color:var(--ink-on-paper);text-wrap:balance;max-width:none}
.verse .acc{color:var(--bp);font-size:1.02em;letter-spacing:-.04em;line-height:.9}
.verse footer{margin-top:30px;display:flex;gap:16px;align-items:baseline;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--body-on-paper)}
.verse cite{font-style:normal;font-weight:800;color:var(--ink-on-paper)}
.design-note{margin:56px 0 0 auto;max-width:520px;font-size:20px;line-height:1.55;color:var(--body-on-paper);padding-left:22px;border-left:3px solid var(--bp)}
.design-note span{display:block;margin-top:10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:#4a5f86}
.design :focus-visible{outline-color:var(--ink-on-paper)}
/* the blueprint rises back up through the paper into the foundation */
.design-art{position:relative;z-index:1;display:block;height:clamp(300px,34vw,560px);margin-top:-40px;pointer-events:none}
.design-art img{width:100%;height:100%;object-fit:cover;object-position:50% 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 26%,#000 56%,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 26%,#000 56%,#000 72%,transparent 100%)}

/* ---------- SHEET 05 · THE FOUNDATION: the cover stands at scale, off the left edge ---------- */
.found{background:linear-gradient(180deg,var(--bp) 0%,#0e4396 55%,#0b2a5c 84%,var(--char) 100%);min-height:max(calc(min(50vw,70svh,880px) * 1.25 + 200px),820px);overflow:clip;display:flex;align-items:center;padding:60px 0 140px}
.stand{position:absolute;z-index:1;left:-7vw;top:56px;width:min(50vw,70svh,880px);perspective:1800px;padding-bottom:40px}
.stand>img{width:100%;height:auto;aspect-ratio:4/5;transform:rotateY(16deg) rotateZ(-1deg);transform-origin:50% 100%;box-shadow:40px 40px 80px rgba(2,10,32,.5)}
.stand::after{content:'';position:absolute;left:4%;right:4%;bottom:14px;height:54px;background:radial-gradient(50% 50% at 50% 50%,rgba(2,10,32,.55),transparent 70%);z-index:-1}
.found-in{width:100%;display:flex;justify-content:flex-end}
.found-copy{width:min(46vw,720px)}
.found .hd{font-size:clamp(52px,6vw,112px)}
.facts{margin:34px 0 0;display:grid;grid-template-columns:repeat(3,auto);justify-content:start;column-gap:40px;row-gap:16px;border-top:1px solid rgba(168,212,255,.3);padding-top:18px}
.facts div{min-width:0}
.facts dt{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--mute)}
.facts dd{margin:6px 0 0;font-size:15px;font-weight:600;color:#fff}
.found .buy{margin-top:34px}
.more{font-size:14px;font-weight:600;text-underline-offset:5px;min-height:44px;display:inline-flex;align-items:center}
.more:hover{color:var(--lime)}
.back{margin-top:42px;display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;text-decoration:none;color:var(--mute)}
.back:hover{color:#fff}
@media(prefers-reduced-motion:no-preference){
  .js .stand>img{opacity:0;transform:rotateY(40deg) rotateZ(-1deg) translateY(30px);transition:opacity 1s ease,transform 1.4s cubic-bezier(.2,.7,.2,1)}
  .js .stand.on>img{opacity:1;transform:rotateY(16deg) rotateZ(-1deg)}
}

/* ---------- Sheet 05, the pop-up: the cover's own house drawing rises off the sheet ----------
   Five pieces cut from the cover art (ground/steps, walls, porch, roof, chimneys), each its own
   linework closed into a paper cut-out. .popup sits exactly over the cover and carries its pose.
   The pieces start coplanar with the drawing, swing up off a hinge at their base, and stand at their
   own depth in front of the cover on a floor page that unfolds from the cover's foot; they leave a
   darker cut-out behind (knockouts) and cast soft blueprint-navy shadows on the cover.
   The depth is projected in 2D (each piece is a plane parallel to the cover, so perspective is a pure
   scale about the eye: k = 900 / (900 - z), eye at 40% / 60% of the cover), which renders the same in
   every engine and keeps iPhone compositing cheap. JS adds .up once (IntersectionObserver), --s
   (cover width / 630) and, on fine pointers, --tx/--ty for the parallax tilt. */
.popup{position:absolute;left:0;top:0;width:100%;aspect-ratio:4/5;pointer-events:none;transform-origin:50% 100%;transform:rotateY(16deg) rotateZ(-1deg);--s:1}
.pop-flat,.pop-rig{position:absolute;left:0;top:62.4%;width:68%;height:37.6%}
.popup .pk,.popup .psh,.popup .ply,.popup .ply img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;display:block}
.popup .pk{background:#123e96;-webkit-mask:var(--m) 0 0/100% 100% no-repeat;mask:var(--m) 0 0/100% 100% no-repeat;opacity:0}
.popup .psh{opacity:0}
/* the floor page: hinge on the cover's foot (100% of the rig), front edge 220 deep */
.pop-floor{position:absolute;top:100%;overflow:visible;transform-origin:50% 0;transform:scaleY(0);opacity:0}
/* depth (z at a 630px cover) → k; hinge line (--o); parallax share (--p); the order they go up: foundation first */
.py-ground,.ps-ground,.pk-ground{--z:200;--k:1.2857;--o:100%;--p:.86;--d:0s}
.py-walls,.ps-walls,.pk-walls{--z:140;--k:1.1842;--p:.55;--o:100%;--d:.24s}
.py-porch,.ps-porch,.pk-porch{--z:175;--k:1.2414;--p:.72;--o:100%;--d:.44s}
.py-roof,.ps-roof,.pk-roof{--z:105;--k:1.1321;--p:.4;--o:61%;--d:.66s}
.py-chimney,.ps-chimney,.pk-chimney{--z:70;--k:1.0843;--p:.25;--o:37%;--d:.9s}
.popup .ply{opacity:0;transform-origin:0 0;transform:none}
.popup .ply img{transform:translate(calc(var(--tx,0px) * var(--p)),calc(var(--ty,0px) * var(--p)))}
/* standing (the end state; reduced motion shows only this) */
.popup.up .ply{opacity:1;transform:translate(58.82%,-6.38%) scale(var(--k)) translate(-58.82%,6.38%)}
.popup.up .pk{opacity:.86}
.popup.up .psh{opacity:.75;transform:translate(calc(var(--z) * var(--s) * .2px),calc(var(--z) * var(--s) * .16px))}
.popup.up .pop-floor{opacity:1;transform:none}
.pop-dim{transform-origin:58.82% -6.38%;transform:translate(calc(var(--tx,0px) * .55),calc(var(--ty,0px) * .55)) scale(1.1842)}
@media(prefers-reduced-motion:no-preference){
  .js .stand .popup{transform:rotateY(40deg) rotateZ(-1deg) translateY(30px);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
  .js .stand.on .popup{transform:rotateY(16deg) rotateZ(-1deg)}
  .popup.up .ply{animation:gb-rise 1.7s cubic-bezier(.3,.1,.25,1) var(--d) both}
  .popup.up .pop-floor{animation:gb-unfold 1.3s cubic-bezier(.3,.1,.25,1) both}
  .popup.up .pk{transition:opacity .5s ease calc(var(--d) + .12s)}
  .popup.up .psh{transition:opacity 1.2s ease calc(var(--d) + .2s),transform 1.5s cubic-bezier(.3,.1,.25,1) var(--d)}
}
/* the paper swings up off its base (foreshortened while it leans), overshoots and settles upright */
@keyframes gb-unfold{
  0%{opacity:0;transform:scaleY(0)}
  15%{opacity:1}
  70%{transform:scaleY(1.06)}
  100%{opacity:1;transform:none}
}
@keyframes gb-rise{
  0%{opacity:0;transform:translate(58.82%,-6.38%) scale(1) translate(-58.82%,6.38%) translateY(var(--o)) scaleY(1) translateY(calc(var(--o) * -1))}
  12%{opacity:1}
  50%{transform:translate(58.82%,-6.38%) scale(calc(1 + (var(--k) - 1) * .74)) translate(-58.82%,6.38%) translateY(var(--o)) scaleY(.84) translateY(calc(var(--o) * -1))}
  78%{transform:translate(58.82%,-6.38%) scale(calc(1 + (var(--k) - 1) * 1.06)) translate(-58.82%,6.38%) translateY(var(--o)) scaleY(1.03) translateY(calc(var(--o) * -1))}
  100%{opacity:1;transform:translate(58.82%,-6.38%) scale(var(--k)) translate(-58.82%,6.38%) translateY(var(--o)) scaleY(1) translateY(calc(var(--o) * -1))}
}
.pop-sense{position:absolute;left:0;bottom:40px;width:62%;height:32%;pointer-events:none;visibility:hidden}

/* footer (SMR) */
.foot{background:var(--char);color:#f4f4ee;padding-bottom:40px}
.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:#c9ccd1;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:#c9ccd1}
.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:#c9ccd1}

/* ---------- large screens ---------- */
@media(min-width:1700px){
  :root{--g:max(96px,calc((100vw - 1720px)/2))}
  :root{--lx:calc(var(--g) - 34px)}
}

/* ---------- tablet ---------- */
@media(max-width:1180px){
  :root{--g:44px;--lx:22px}
  .nav{gap:22px}
  .drawing{left:44vw;top:170px;width:68vw}
  .plan-foot{grid-template-columns:1fr;row-gap:22px;max-width:40vw}
  .part-copy{width:38vw}
  .part .poster{width:62vw}
  .p1 .poster{left:-12vw}.p3 .poster{left:-10vw}.p2 .poster{right:-14vw}
  .found-copy{width:52vw}
}

/* ---------- phone: its own composition ---------- */
@media(max-width:900px){
  :root{--g:20px;--lx:9px}
  .nav{display:none}
  .top{gap:12px}
  .plan{min-height:0;display:flex;flex-direction:column}
  .plan-in{order:1}.drawing{order:2}
  .plan::before{background:linear-gradient(180deg,rgba(16,74,170,.55) 0%,rgba(16,74,170,.75) 40%,rgba(16,74,170,.2) 70%,var(--bp2) 100%)}
  .plan-art img{object-position:22% 0}
  .plan-in{padding-top:100px;padding-bottom:0;min-height:0}
  .crumbs ol{margin-bottom:20px}
  .title{font-size:33vw;line-height:.8;margin-top:12px}
  .t-plan{-webkit-text-stroke-width:1.5px}
  .plan-foot{margin-top:0;padding-top:20px;grid-template-columns:1fr;row-gap:16px;max-width:none}
  .stamp{font-size:24px}
  .buy{gap:18px;margin-top:20px}
  .price strong{font-size:52px}
  .plan .btn.green,.found .btn.green{flex:1 1 220px}
  /* the cover runs off the right edge and is cut by the next sheet */
  .drawing{position:relative;left:auto;top:auto;width:104vw;margin:44px 0 -16vw 14vw;display:block}
  .sheet-obj{transform:rotateX(6deg) rotateY(-10deg) rotateZ(2.2deg)}
  .process{min-height:0;padding-top:0}
  .house{inset:auto 0 0 0;height:118vw}
  .house img{height:100%;object-position:24% 50%;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 80%,transparent 100%)}
  .process::before{background:linear-gradient(180deg,var(--bp2) 0%,var(--deep) 30%,rgba(10,47,114,.4) 64%,rgba(4,18,47,0) 80%,var(--pit) 100%)}
  .process-in{padding-top:12vw;padding-bottom:96vw}
  .plan::after{height:30vw}
  .hd{font-size:clamp(40px,12.4vw,60px)}
  .wall{font-size:clamp(46px,14.6vw,74px)}
  .process-foot{display:block}
  .body{font-size:16px}
  .tools li{font-size:11px;padding:10px 12px 10px 0;margin-right:12px}
  .build-head{padding-top:40px;padding-bottom:10px}
  .sold{font-size:clamp(46px,15vw,76px)}
  .part{display:block;min-height:0;padding:0 var(--g) 80px}
  .part .poster{position:relative;width:110vw;max-width:none;left:auto;right:auto;top:auto;bottom:auto}
  .p1{padding-top:22vw}
  .p1 .poster{margin:0 0 0 -12vw}
  .p2 .poster{margin:0 0 0 -4vw;padding-top:0}
  .p2{padding-top:28vw}
  .p3{padding-top:30vw}
  .p3 .poster{margin:0 0 0 -14vw}
  .part .poster::after{display:none}
  .part .poster img{-webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 22%);mask-image:linear-gradient(0deg,transparent 0%,#000 22%)}
  .part-copy{width:auto;margin:-18vw 0 0;position:relative}
  .numeral{display:none}
  .p1::before{height:30vw}
  .p2::after,.p3::after{height:22vw}
  .part-t{font-size:clamp(48px,14.4vw,76px)}
  .pull p{font-size:19px}
  .design{min-height:0}
  .design-in{padding-top:70px}
  .verse p{font-size:clamp(38px,11.6vw,60px)}
  .verse footer{flex-direction:column;gap:4px}
  .design-note{margin-top:46px;font-size:17px}
  .design-art{height:300px}
  .design-art img{object-position:30% 100%}
  .found{display:block;padding:0 0 80px;min-height:0}
  .stand{position:relative;left:auto;top:auto;width:96vw;margin:-40px 0 0 -12vw}
  .found-in{display:block}
  .found-copy{width:auto;margin-top:30px}
  .found .hd{font-size:clamp(42px,12.6vw,64px)}
  .facts{grid-template-columns:1fr 1fr;column-gap:24px}
  .facts div:nth-child(2){grid-column:1/-1;grid-row:2}
  .fgrid{display:block}.fnav{margin-top:24px}
}
@media(min-width:600px) and (max-width:900px){
  .drawing{width:86vw;margin-left:20vw}
  .part .poster{width:92vw}
  .p1 .poster,.p3 .poster{margin-left:-8vw}
  .p1,.p2,.p3{padding-top:14vw}
  .part-copy{max-width:640px}
  .stand{width:76vw}
}
@media(max-width:420px){
  .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}
  .tools{gap:0}
}
@media(max-width:350px){
  .top .btn.sm span{display:none}.brand-name{font-size:8.5px}
  .title{font-size:31vw}
  .price strong{font-size:44px}
  .btn{padding:14px 18px;font-size:12px}
}

/* ---------- round 2: the draftsman at work (marks drawn by god-built.js; never on the art) ---------- */
.js .dims{display:none}
.dr{position:absolute;z-index:4;overflow:visible;pointer-events:none;--dr:#cfe6ff;color:var(--dr)}
.dr.ink{--dr:#1f5fc4}
.dr .ln{fill:none;stroke:var(--dr);stroke-width:1;stroke-linecap:butt;opacity:.9}
.dr .ln.f{opacity:.5}
.dr .cm{fill:none;stroke:var(--dr);stroke-width:1;opacity:.85}
.dr .rq{fill:var(--dr);opacity:.85}
.dr .ar{fill:var(--dr)}
.dr .lb{font-family:'Special Elite','Courier New',monospace;font-size:12px;letter-spacing:.04em;fill:var(--dr)}
.dr .lb.cap{font-family:Manrope,Arial,sans-serif;font-weight:800;font-size:9.5px;letter-spacing:.18em}
.dr .bn{font-size:9.5px;letter-spacing:.02em;font-family:Manrope,Arial,sans-serif;font-weight:800}
.dr .hatch{opacity:.55}
.datum .cm{opacity:.6}.datum .bn{opacity:.75}
.foot-d .ln{opacity:.75}
.snap,.reg,.grow{transform-box:fill-box}
.reg{transform-origin:50% 50%}
.grow{transform-origin:0 50%}
.snap{transform-origin:var(--o,50% 50%)}
/* hidden until drawn (JS only); .done = already drawn, no replay */
.js .dr .ln{stroke-dasharray:1 1;stroke-dashoffset:1}
.js .dr .pop{opacity:0}
.js .dr .snap{opacity:0;transform:scale(2.2)}
.js .dr .reg{opacity:0;transform:rotate(-120deg) scale(.2)}
.js .dr .grow{transform:scaleX(0)}
.dr.on .ln{stroke-dashoffset:0;transition:stroke-dashoffset var(--t,.9s) cubic-bezier(.5,0,.25,1) var(--d,0s)}
.dr.on .pop{opacity:1;transition:opacity .3s ease var(--d,0s)}
.dr.on .snap{opacity:1;transform:none;transition:opacity .12s linear var(--d,0s),transform .42s cubic-bezier(.3,1.7,.55,1) var(--d,0s)}
.dr.on .reg{opacity:1;transform:none;transition:opacity .25s linear var(--d,0s),transform .7s cubic-bezier(.2,1.25,.4,1) var(--d,0s)}
.dr.on .grow{transform:none;transition:transform .9s cubic-bezier(.5,0,.25,1) var(--d,0s)}
.dr.done *{transition:none!important}
@media(max-width:900px){
  .dr .lb{font-size:11px}
  .dr .lb.cap{font-size:8.5px}
  .dr .bn{font-size:8px}
}

/* the drafting crosshair (fine pointers; JS adds it) */
.xh{position:fixed;inset:0;z-index:30;pointer-events:none;opacity:0;transition:opacity .25s ease;--xc:rgba(207,230,255,.42);--xt:#e4f1ff;--xb:rgba(8,40,104,.72)}
.xh.show{opacity:1}
.xh.ink{--xc:rgba(21,90,192,.38);--xt:#0b2f73;--xb:rgba(233,238,244,.86)}
.xh i{position:absolute;left:0;top:0;display:block;will-change:transform}
.xh .xh-h{width:100%;height:1px;background:var(--xc)}
.xh .xh-v{height:100%;width:1px;background:var(--xc)}
.xh .xh-n{width:9px;height:9px;margin:-4px 0 0 -4px;border:1px solid var(--xc)}
.xh-l{position:absolute;left:0;top:0;display:flex;flex-direction:column;gap:4px;padding:6px 8px 5px;will-change:transform;color:var(--xt);white-space:pre;background:var(--xb);border-left:1px solid var(--xc)}
.xh-l b{font:400 12px/1 'Special Elite','Courier New',monospace;letter-spacing:.04em}
.xh-l em{font:800 9px/1 Manrope,Arial,sans-serif;font-style:normal;letter-spacing:.2em;opacity:.75}
.xh-on main{cursor:crosshair}
.xh-on main a,.xh-on main button{cursor:pointer}


@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .plumb-line{transform:scaleY(1)}
  .js .house img{transform:translateY(-40px)}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .js .dr .ln{stroke-dashoffset:0}.js .dr .pop,.js .dr .snap,.js .dr .reg{opacity:1;transform:none}.js .dr .grow{transform:none}
}