/* Ordering Your Private World: a bespoke series page.
   Art direction: the series' own window blinds, orange paper, the torn "Private" scrap, the blue frame
   and the photographed slanted blinds with their cord. The page is a window: closed on the public face,
   opened (scroll or pull the cord) on the private world behind it.
   Grounds: orange paper -> the window -> electric blue -> orange blinds -> blue blinds -> cage red
   -> orange paper -> night ink -> orange blinds. Lime is SMR's accent only (buy, focus, label tick).
   The accent voice on every screen is the marker lettering of the series title (Permanent Marker). */

@view-transition { navigation: auto; }

:root{
  --paper:#dd5824;
  --paper-d:#b8441a;
  --amber:#f4931a;
  --gold:#ffb21f;
  --blue:#2b45d4;
  --blue-d:#1a2a9a;
  --red:#c8141b;
  --wo:#d0100f;
  --ink:#16103a;
  --ink-2:#2a2160;
  --cord:#5b2bd1;
  --bone:#fff6ee;
  --lime:#b6ff00;
  --gutter:64px;
  --mk:'Permanent Marker','Marker Felt','Comic Sans MS',cursive;
  --cond:'Barlow Condensed',Impact,sans-serif;
  --body:Manrope,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ink)}
body.oypw{margin:0;background:var(--ink);color:var(--bone);font-family:var(--body);overflow-x:hidden}
a{color:inherit}
img{max-width:100%}
: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:.18em;text-transform:uppercase;font-weight:800;margin:0;display:flex;align-items:center;gap:12px;color:var(--ink)}
.label i{display:inline-block;width:10px;height:10px;background:var(--lime);flex:none;box-shadow:0 0 0 1px rgba(22,16,58,.35)}
.label.light{color:var(--bone)}
.label.ink{color:var(--ink)}
.mk{font-family:var(--mk);font-weight:400;text-transform:none;letter-spacing:0}
.cite{display:block;margin-top:14px;font:800 11px/1.4 var(--body);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,246,238,.82)}
.cite.ink{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:56px;padding:14px 26px;font:800 13px/1.4 var(--body);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;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:#0b0a14;box-shadow:0 10px 30px rgba(22,16,58,.28)}.btn.lime:hover{background:#fff}
.btn.line{border:1px solid rgba(255,246,238,.6);color:var(--bone)}.btn.line:hover{border-color:var(--lime);color:var(--lime)}
.btn.sm{min-height:44px;padding:10px 18px;font-size:11px;white-space:nowrap}
.note{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--ink);font-weight:600}
.note.ink{color:var(--ink)}

/* header: the shared SMR lockup, floating over the blinds */
.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;font-weight:800;letter-spacing:.14em;text-transform:uppercase;min-height:44px;display:flex;align-items:center;color:var(--bone);transition:color .15s}
.nav a:hover{color:var(--ink)}
.nav a[aria-current]{box-shadow:inset 0 -3px 0 var(--lime)}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:var(--bone)}
.brand-mark{height:40px;width:40px;display:block;flex:none}
.brand-name{font-size:11px;font-weight:800;letter-spacing:.16em;line-height:1.3;text-transform:uppercase;white-space:nowrap}
.brand-lg{gap:14px}.brand-lg .brand-mark{height:52px;width:52px}.brand-lg .brand-name{font-size:12px}

/* ---------- 1 · the blinds ---------- */
.blinds{position:relative;background:var(--paper)}
.stage{position:relative;display:flex;flex-direction:column}
.face{position:relative;order:1;min-height:max(720px,100svh);padding:118px var(--gutter) 80px;overflow:hidden;
  background:var(--paper) url(/assets/series/ordering-your-private-world/paper-1920.webp) center/cover no-repeat}
.crumbs ol{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--ink)}
.crumbs li+li::before{content:'/';margin-right:10px;color:var(--ink-2)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.crumbs a:hover{color:var(--bone)}
.crumbs [aria-current]{display:inline-flex;align-items:center;min-height:44px;color:var(--bone)}

.logo{margin:22px 0 0;font-family:var(--mk);font-weight:400;font-size:clamp(60px,8.4vw,170px);line-height:1;letter-spacing:.005em;text-transform:uppercase;color:#fff;
  text-shadow:0 .04em 0 rgba(120,30,0,.35),0 10px 40px rgba(90,20,0,.25)}
.logo .l1{display:block}
.logo .l2{display:flex;align-items:center;gap:.08em;margin-top:.02em;padding-left:.6em}
.scrap{display:inline-block;flex:none;width:2.3em;margin:-.06em 0 -.12em;transform:rotate(-4deg);filter:drop-shadow(0 .06em .08em rgba(60,10,0,.45))}
.scrap img{display:block;width:100%;height:auto}
.wd{display:inline-block;color:var(--ink);text-shadow:none}
.wd b{font-weight:400;color:var(--wo);-webkit-text-stroke:.035em #fff;paint-order:stroke fill}
.lede{margin:34px 0 0;max-width:560px;font:700 clamp(18px,1.55vw,23px)/1.42 var(--body);letter-spacing:-.01em;color:var(--ink)}
.buyrow{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px}
.follow{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink);border-bottom:2px solid rgba(22,16,58,.45)}
.follow:hover{color:var(--bone);border-color:var(--bone)}

/* the cover: a print leaning in the window light, crossing the stage's bottom edge */
.face-cover{position:absolute;z-index:4;right:9vw;bottom:-15vh;width:clamp(250px,25vw,440px)}
.print{display:block;position:relative;transform:rotate(4.5deg);box-shadow:-26px 44px 70px rgba(70,16,0,.5),-6px 10px 18px rgba(70,16,0,.35);view-transition-name:cover-ordering-your-private-world}
.print img{display:block;width:100%;height:auto}
.print::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.22),rgba(255,255,255,0) 38%,rgba(0,0,0,0) 70%,rgba(0,0,0,.18))}
.print.big{view-transition-name:none;transform:rotate(-5deg)}

/* the window behind the blinds */
.scene{position:relative;order:2;height:100svh;min-height:600px;overflow:hidden;background:var(--paper-d)}
.scene picture,.scene img{display:block;width:100%;height:100%}
.scene img{object-fit:cover;object-position:50% 50%}
.reveal-line{position:absolute;left:var(--gutter);bottom:7vh;max-width:min(31vw,470px);z-index:2}
.rl-quote{margin:0;font-family:var(--mk);font-size:clamp(28px,2.7vw,46px);line-height:1.12;color:#fff;text-shadow:0 2px 0 rgba(60,10,0,.5),0 8px 30px rgba(40,6,0,.65)}
.rl-cite{margin:14px 0 0;font:800 11px/1.4 var(--body);letter-spacing:.18em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(40,6,0,.8)}
.reveal-line::before{content:'';position:absolute;inset:-60px -80px -60px -120px;z-index:-1;background:radial-gradient(closest-side,rgba(70,14,0,.55),rgba(70,14,0,0))}

.slats,.cord{display:none}

/* motion mode: the stage pins and the slats take over (JS adds .motion only without reduced motion) */
.motion .blinds{height:290vh}
.motion .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:block;perspective:1500px;perspective-origin:50% 45%}
.motion .scene{position:absolute;inset:0;height:auto;min-height:0;z-index:1}
.motion .slats{display:block;position:absolute;inset:0;z-index:2;pointer-events:none}
.motion .face{position:absolute;inset:0;min-height:0;z-index:3;background:none}
.motion .reveal-line{opacity:var(--rev,0);transform:translateY(calc((1 - var(--rev,0)) * 24px))}
.slat{position:absolute;left:0;width:100%;top:0;overflow:hidden;will-change:transform;backface-visibility:hidden;transform-origin:50% 50%;
  background:var(--paper) url(/assets/series/ordering-your-private-world/paper-1920.webp) no-repeat}
.slat::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,236,214,.16) 0,rgba(255,236,214,0) 22%,rgba(0,0,0,0) 70%,rgba(90,24,0,.22) 100%);
  box-shadow:inset 0 -1px 0 rgba(90,24,0,.38),inset 0 1px 0 rgba(255,220,190,.18)}
.slat::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:#4a1203;opacity:var(--shade,0)}
.slat .face{position:absolute;inset:auto;left:0;width:100%;z-index:1;padding:118px var(--gutter) 80px;background:none}
.motion .face.live .face-copy{opacity:var(--live,1);visibility:var(--livev,visible)}
.face-cover{will-change:transform}
.slats.blank .slat .face{visibility:hidden}
.slat .face{opacity:var(--g,1)}
.tassel,.cord-line{transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.cord.dragging .tassel,.cord.dragging .cord-line{transition:none}

/* the cord: the twisted ladder string from the photographed blinds, with a tassel to pull */
.motion .cord{display:block;position:absolute;z-index:6;top:0;right:12px;width:56px;height:62%;pointer-events:none}
.cord-line{position:absolute;left:50%;top:0;bottom:46px;width:4px;margin-left:-2px;transform-origin:top;
  background:repeating-linear-gradient(160deg,#7d4cf0 0 3px,#3a1694 3px 6px);box-shadow:0 0 0 1px rgba(30,8,80,.2);transform:scaleY(var(--stretch,1))}
.tassel{position:absolute;left:50%;bottom:-40px;width:56px;height:96px;margin-left:-28px;padding:0;border:0;background:none;cursor:grab;pointer-events:auto;touch-action:none;
  transform:translateY(var(--pull,0px));display:flex;flex-direction:column;align-items:center;justify-content:flex-start;color:#fff}
.tassel:active{cursor:grabbing}
.tassel-knob{display:block;width:18px;height:44px;margin-top:6px;border-radius:9px 9px 6px 6px;background:linear-gradient(90deg,#3a1694,#7d4cf0 45%,#3a1694);box-shadow:0 8px 16px rgba(30,8,80,.45)}
.tassel-word{margin-top:6px;font-family:var(--mk);font-size:18px;line-height:1;color:#fff;text-shadow:0 2px 8px rgba(40,6,0,.6);transform:rotate(-8deg)}
.tassel:focus-visible{outline-offset:2px}

/* ---------- 2 · two worlds ---------- */
.worlds{position:relative;overflow:hidden;background:var(--blue);color:#fff;padding:0 0 13vh}
.worlds::before{content:'';position:absolute;left:0;right:0;top:0;height:16vh;z-index:2;background:linear-gradient(180deg,var(--paper-d),rgba(184,68,26,0));pointer-events:none}
.worlds-art{position:absolute;inset:0 0 auto 0;height:min(78vh,860px);z-index:0;
  -webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 100%);mask-image:linear-gradient(180deg,#000 50%,transparent 100%)}
.worlds-art picture,.worlds-art img{display:block;width:100%;height:100%}
.worlds-art img{object-fit:cover;object-position:60% 40%}
.worlds-art::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,42,154,.62),rgba(26,42,154,.2) 60%,rgba(26,42,154,0))}
.worlds-in{position:relative;z-index:3;padding:22vh var(--gutter) 0}
.wall{margin:22px 0 0;max-width:1260px;font:800 clamp(44px,6.5vw,118px)/.9 var(--cond);text-transform:uppercase;letter-spacing:-.005em;text-shadow:0 6px 40px rgba(14,20,90,.45)}
.wall .mk{display:block;margin-top:.12em;color:var(--gold);font-size:1.08em;line-height:1.02;text-shadow:0 4px 0 rgba(14,20,90,.35)}
.two{display:grid;grid-template-columns:1fr 60px 1fr;gap:0 3vw;margin-top:8vh;max-width:min(1100px,66vw)}
.world-col{padding:6px 0}
.wtag{margin:0;font-family:var(--mk);font-size:clamp(30px,3vw,52px);line-height:1;color:#fff}
.outer .wtag{color:var(--gold)}
.wq{margin:18px 0 0;font:600 clamp(18px,1.6vw,24px)/1.45 var(--body);color:#fff}
.string{display:block;justify-self:center;width:4px;height:100%;min-height:200px;background:repeating-linear-gradient(160deg,#7d4cf0 0 3px,#3a1694 3px 6px)}
.inside{position:relative;margin:10vh 0 0}
.io{display:block;font-size:clamp(84px,17vw,330px);line-height:.82;color:var(--gold);margin-left:-.04em;white-space:nowrap;text-shadow:0 8px 0 rgba(14,20,90,.35)}
.io-rest{display:block;max-width:520px;margin:3vh 0 0 auto;margin-right:24vw;font:700 clamp(18px,1.55vw,23px)/1.45 var(--body);color:#fff}
.inside .cite{max-width:520px;margin-left:auto;margin-right:24vw}
.worlds-strip{position:absolute;z-index:1;right:0;top:34%;width:min(23vw,420px);height:62%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%)}
.worlds-strip img{display:block;width:100%;height:100%;object-fit:cover;object-position:30% 50%}

/* ---------- 3-5 · the three parts ---------- */
.part{position:relative;overflow:hidden}
.part-in{position:relative;z-index:3;padding:20vh var(--gutter) 16vh}
.part-art{position:absolute;inset:0;z-index:0}
.part-art picture,.part-art img{display:block;width:100%;height:100%}
.part-art img{object-fit:cover}
.ptitle{margin:20px 0 0;font-family:var(--mk);font-weight:400;font-size:clamp(52px,7.4vw,140px);line-height:1;color:var(--ink)}
.ptitle.light{color:#fff}
.pgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:30px 24px;margin-top:8vh}
.psum{grid-column:1/6;margin:0;font:600 clamp(17px,1.4vw,21px)/1.55 var(--body)}
.pq{grid-column:7/13;margin:0}
.pq p{margin:0;font:800 clamp(30px,3.2vw,56px)/1.04 var(--cond);text-transform:uppercase}
.pref{grid-column:1/13;margin:0;font:600 15px/1.6 var(--body)}
.pref span{display:inline-block;margin-right:14px;font:800 11px/1 var(--body);letter-spacing:.18em;text-transform:uppercase}
.pref em{font-style:normal;font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-left:6px}

/* Part I: orange blinds, the word sinking */
.p1{background:var(--amber);color:var(--ink)}
.p1::before{content:'';position:absolute;left:0;right:0;top:0;height:22vh;z-index:2;background:linear-gradient(180deg,var(--blue),rgba(43,69,212,0));pointer-events:none}
.p1 .part-art img{object-position:50% 50%;transform:scaleX(-1)}
.p1 .part-art::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(244,147,26,.72),rgba(244,147,26,.28) 55%,rgba(244,147,26,.1))}
.p1 .ptitle{display:flex;flex-direction:column;align-items:flex-start}
.p1 .sm{font-size:.5em;line-height:1}
.p1 .the{margin-left:.1em}
.p1 .syn{align-self:flex-start;margin:.7em 0 0 4.2em}
.sink{display:inline-flex;font-size:2.2em;line-height:.9;color:var(--ink)}
.sink span[aria-hidden]{display:inline-block}
.sink .br{display:none}
.sink span:nth-of-type(2){transform:translateY(0)}
.sink span:nth-of-type(3){transform:translateY(.02em)}
.sink span:nth-of-type(4){transform:translateY(.05em) rotate(1deg)}
.sink span:nth-of-type(5){transform:translateY(.09em) rotate(2deg)}
.sink span:nth-of-type(6){transform:translateY(.15em) rotate(3deg)}
.sink span:nth-of-type(7){transform:translateY(.23em) rotate(5deg)}
.sink span:nth-of-type(8){transform:translateY(.33em) rotate(7deg)}
.sink span:nth-of-type(9){transform:translateY(.46em) rotate(10deg)}
.p1 .pq p{color:var(--ink)}
.p1 .pq{border-left:4px solid var(--ink);padding-left:24px}

/* Part II: blue blinds, the bridge */
.p2{background:var(--blue-d);color:#fff}
.p2::before{content:'';position:absolute;left:0;right:0;top:0;height:22vh;z-index:2;background:linear-gradient(180deg,var(--amber),rgba(244,147,26,0));pointer-events:none}
.p2 .part-art img{object-position:40% 50%}
.p2 .part-art::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,42,154,.15),rgba(26,42,154,.55) 55%,rgba(20,28,110,.92))}
.prov{margin:7vh 0 0;max-width:1300px;font:800 clamp(40px,5.4vw,100px)/.94 var(--cond);text-transform:uppercase;text-shadow:0 6px 40px rgba(10,14,70,.5)}
.prov .mk{color:var(--gold);font-size:1.1em}
.p2 .psum{color:#fff}
.well{grid-column:7/13;margin:0;font:600 clamp(17px,1.4vw,21px)/1.55 var(--body)}
.well .mk{display:block;margin-bottom:12px;font-size:clamp(30px,2.8vw,48px);line-height:1.08;color:#fff}

/* Part III: the cage, on red */
.p3{background:var(--red);color:#fff}
.p3::before{content:'';position:absolute;left:0;right:0;top:0;height:18vh;z-index:2;background:linear-gradient(180deg,rgb(20,28,110),rgba(20,28,110,0));pointer-events:none}
.cage{position:relative;z-index:1;height:min(56vh,620px);margin-top:12vh;overflow:hidden}
.cage img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.cage::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(200,20,27,0) 55%,var(--red))}
.p3 .part-in{padding-top:0;margin-top:-17vh}
.p3 .ptitle{font-size:clamp(48px,6vw,110px);text-shadow:0 6px 30px rgba(80,0,0,.4)}
.p3 .ptitle .mk{display:block;font-size:2.05em;line-height:.92;color:var(--gold);text-shadow:0 6px 0 rgba(90,0,0,.45)}
.p3 .pq p{color:#fff}
.dc{grid-column:1/6;grid-row:1}
.dc p,.anti{margin:0 0 18px;font:600 clamp(17px,1.4vw,21px)/1.5 var(--body)}
.dc-k{display:block;font-family:var(--mk);font-size:clamp(28px,2.4vw,40px);line-height:1.1;color:var(--gold)}
.anti{grid-column:1/13;max-width:820px;font-size:clamp(20px,1.9vw,28px);font-weight:800}

/* ---------- 6 · peace, a wall on the paper ---------- */
.peace{position:relative;padding:22vh var(--gutter) 20vh;color:var(--ink);overflow:hidden;
  background:var(--paper) url(/assets/series/ordering-your-private-world/paper-1920.webp) center/cover no-repeat}
.peace::before{content:'';position:absolute;left:0;right:0;top:0;height:20vh;background:linear-gradient(180deg,var(--red),rgba(200,20,27,0));pointer-events:none}
.pwall{position:relative;margin:0;max-width:1400px;font:800 clamp(46px,7.4vw,140px)/.9 var(--cond);text-transform:uppercase;letter-spacing:-.01em}
.pwall .mk{display:block;margin-top:.1em;font-size:1.2em;line-height:1;color:#fff;text-shadow:0 .05em 0 rgba(120,20,0,.55)}

/* ---------- 7 · the kit ---------- */
.kit{position:relative;overflow:hidden;background:var(--ink);padding:18vh 0 12vh;color:#fff}
.kit::before{content:'';position:absolute;left:0;right:0;top:0;height:22vh;background:linear-gradient(180deg,var(--paper-d),rgba(184,68,26,0));pointer-events:none}
.kit::after{content:'';position:absolute;right:-20vw;top:30%;width:80vw;height:80vw;border-radius:50%;background:radial-gradient(closest-side,rgba(43,69,212,.55),rgba(43,69,212,0));pointer-events:none}
.kit-head{position:relative;z-index:2;padding:0 var(--gutter)}
.kwall{margin:22px 0 0;font:800 clamp(46px,6.8vw,124px)/.9 var(--cond);text-transform:uppercase}
.kwall .mk{display:block;color:var(--amber);font-size:1.1em}
/* the rollout: one phone plays the five stories in order (new series, next week, tomorrow, today, tonight);
   beside it every other piece of the zip appears once, as a print in the night: a lesson page, the title slide, a feed post */
.kit-stage{position:relative;z-index:2;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:96px;margin:9vh 0 0;padding:0 var(--gutter);align-items:start}
.story{grid-column:1/5;grid-row:1;justify-self:center;width:100%;max-width:400px;margin:0}
.phone{position:relative;width:min(340px,100%);margin:0 auto;padding:10px;border-radius:52px;transform:rotate(-2deg);
  background:linear-gradient(150deg,#3a3f86 0%,#100c2c 36%,#07051a 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),inset 0 0 0 5px #07051a,0 0 0 1px rgba(43,69,212,.55),0 70px 90px -40px rgba(0,0,0,.8),0 0 120px -20px rgba(43,69,212,.55)}
.phone::before,.phone::after{content:'';position:absolute;width:4px;border-radius:2px;background:#1c1846}
.phone::before{left:-3px;top:21%;height:62px;box-shadow:0 78px 0 #1c1846}
.phone::after{right:-3px;top:28%;height:92px}
.phone-screen{position:relative;aspect-ratio:9/16;border-radius:42px;overflow:hidden;background:var(--blue);isolation:isolate;cursor:pointer;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:pan-y}
.phone-screen::before{content:'';position:absolute;z-index:4;top:11px;left:50%;width:31%;height:27px;margin-left:-15.5%;border-radius:20px;background:#000}
.phone-screen::after{content:'';position:absolute;z-index:2;inset:0 0 auto;height:22%;background:linear-gradient(180deg,rgba(10,6,40,.42),rgba(10,6,40,0));pointer-events:none}
.story-shot{position:absolute;inset:0;width:100%;max-width:none;height:100%;object-fit:cover;opacity:0;transition:opacity .26s ease;-webkit-user-drag:none}
.story-shot.on{opacity:1;z-index:1}
.story-bars{position:absolute;z-index:3;left:12px;right:12px;top:48px;display:flex;gap:4px;pointer-events:none}
.story-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.38);overflow:hidden}
.story-bars b{display:block;height:100%;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
.story-cap{display:flex;align-items:center;gap:8px;width:100%;margin:30px auto 0}
.sc-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.sc-k{font:800 15px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--bone);white-space:nowrap}
.sc-n{color:var(--amber);margin-left:4px}
.sc-v{font:400 30px/1 var(--mk);color:var(--amber);min-height:1.3em;display:flex;align-items:center;text-wrap:balance}
.sc-btn{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid rgba(255,246,238,.4);background:rgba(43,69,212,.28);color:var(--bone);cursor:pointer;transition:background .15s,border-color .15s}
.sc-btn:hover{background:var(--blue);border-color:var(--bone)}
.sc-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sc-play{position:absolute;z-index:5;top:58px;right:6px;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:none;color:#fff;cursor:pointer;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
.sc-play:hover{background:rgba(255,255,255,.16)}
.sc-play svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sc-play .i-play{display:none;fill:currentColor;stroke-width:1.6}
.sc-play[aria-pressed="true"] .i-play{display:inline}
.sc-play[aria-pressed="true"] .i-pause{display:none}
.sc-play[hidden]{display:none}
html:not(.js) .sc-btn,html:not(.js) .sc-play{visibility:hidden}
.piece{margin:0}
.obj{transform:rotate(var(--t,0deg))}
.obj img{display:block;width:100%;height:auto;background:#fff;box-shadow:0 50px 80px -30px rgba(0,0,0,.75),0 14px 26px -8px rgba(0,0,0,.5)}
.piece-l{margin:24px 0 0;display:flex;flex-direction:column;gap:6px}
.piece-l strong{font:800 18px/1.1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--amber);display:flex;align-items:center;gap:10px}
.piece-l strong::before{content:'';flex:none;width:9px;height:9px;background:var(--lime);box-shadow:0 0 0 1px rgba(22,16,58,.35)}
.piece-l span{font-size:14px;line-height:1.5;color:rgba(255,246,238,.8)}
.story .piece-l{align-items:center;text-align:center;margin-top:20px}
.piece-page{grid-column:5/13;grid-row:1;--t:-1.6deg;margin-top:40px}
.piece-slide{grid-column:5/10;grid-row:2;--t:1.8deg;margin-top:10px}
.piece-feed{grid-column:10/13;grid-row:2;--t:-3deg;margin-top:-40px}
.piece-slide .obj img{box-shadow:0 0 0 6px var(--red),0 50px 80px -30px rgba(0,0,0,.75),0 14px 26px -8px rgba(0,0,0,.5)}
.inc{grid-column:1/5;grid-row:2;list-style:none;margin:0;padding:0;align-self:start;max-width:400px;justify-self:center;width:100%}
.inc li{display:grid;grid-template-columns:52px 1fr;gap:4px 12px;padding:20px 0;border-top:1px solid rgba(255,246,238,.18)}
.inc li:last-child{border-bottom:1px solid rgba(255,246,238,.18)}
.inc .n{grid-row:1/3;font:800 30px/1 var(--cond);color:var(--amber)}
.inc .t{font-family:var(--mk);font-size:clamp(22px,1.8vw,28px);line-height:1.1}
.inc .d{font-size:14px;line-height:1.55;color:rgba(255,246,238,.82)}
.credit{position:relative;z-index:2;margin:5vh var(--gutter) 0;max-width:760px;font-size:13px;line-height:1.6;color:rgba(255,246,238,.75)}

/* ---------- 8 · get the series ---------- */
.get{position:relative;overflow:hidden;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;background:var(--amber);color:var(--ink);padding:20vh var(--gutter) 14vh}
.get::before{content:'';position:absolute;left:0;right:0;top:0;height:22vh;z-index:1;background:linear-gradient(180deg,var(--ink),rgba(22,16,58,0));pointer-events:none}
.get-art{position:absolute;inset:0;z-index:0}
.get-art picture,.get-art img{display:block;width:100%;height:100%}
.get-art img{object-fit:cover;object-position:30% 50%}
.get-art::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(244,147,26,0) 0,rgba(244,147,26,.35) 45%,rgba(244,147,26,.86) 62%)}
.get-cover{position:relative;z-index:2;align-self:end;margin:0 0 -22vh -2vw;width:min(36vw,560px)}
.get-in{position:relative;z-index:2;max-width:620px}
.steps{margin:0;font-size:clamp(30px,3vw,52px);line-height:1.1}
.steps .mk{color:var(--ink)}
.gwall{margin:8vh 0 0;font:800 clamp(48px,5.6vw,100px)/.9 var(--cond);text-transform:uppercase}
.gdesc{margin:22px 0 0;font:600 17px/1.6 var(--body)}
.pricerow{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:28px}
.price{margin:0;display:flex;align-items:baseline;gap:8px}
.price strong{font:800 64px/1 var(--cond)}
.price span{font-size:12px;font-weight:800;letter-spacing:.16em}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin:30px 0 0}
.facts div{padding:12px 0;border-top:1px solid rgba(22,16,58,.3)}
.facts dt{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.facts dd{margin:4px 0 0;font-size:15px;font-weight:700}
.facts a{display:inline-flex;align-items:center;min-height:44px;font-weight:800}
.facts a:hover{color:#fff}
.src{margin:18px 0 0;font-size:12px;line-height:1.5;color:var(--ink-2);font-weight:600}
.back{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:18px;font:800 clamp(24px,2vw,32px)/1 var(--cond);text-transform:uppercase;text-decoration:none}
.back:hover{color:#fff}

/* footer */
.foot{position:relative;z-index:2;padding:40px var(--gutter) 40px;background:var(--ink)}
.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(255,246,238,.14)}
.fbrand{grid-column:1/5}.fbrand p{margin:20px 0 0;font-size:13px;line-height:1.7;color:rgba(255,246,238,.75);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:rgba(255,246,238,.78)}
.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:rgba(255,246,238,.7)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  :root{--gutter:40px}
  .nav{gap:20px}
  .kit-stage{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:76px;margin-top:7vh}
  .story{grid-column:1/-1;grid-row:auto;max-width:380px}
  .piece-page{grid-column:1/-1;grid-row:auto;justify-self:center;width:100%;max-width:820px;margin-top:0}
  .piece-slide{grid-column:1/5;grid-row:auto;margin-top:30px}
  .piece-feed{grid-column:5/7;grid-row:auto;margin-top:0}
  .inc{grid-column:1/-1;grid-row:auto;max-width:820px}
}
@media (max-width:900px){
  .nav{display:none}
  .face-cover{width:40vw;right:7vw;bottom:-6vh}
  .top .btn{margin-left:auto}
  .two{grid-template-columns:1fr;gap:28px}
  .string{width:100%;min-height:0;height:4px;background:repeating-linear-gradient(70deg,#7d4cf0 0 3px,#3a1694 3px 6px)}
  .io-rest,.inside .cite{margin-right:0;margin-left:0}
  .worlds-strip{display:none}
  .two{max-width:none}
  .psum,.pq,.well,.dc{grid-column:1/13}
  .dc{grid-row:auto}
  .get{grid-template-columns:1fr;padding-top:18vh}
  .get-in{order:1}
  .get-cover{order:2;align-self:auto;margin:8vh 0 -20vh 4vw;width:68vw}
  .get-art::after{background:linear-gradient(180deg,rgba(244,147,26,.88) 0,rgba(244,147,26,.7) 60%,rgba(244,147,26,.2))}
  .fgrid{display:block}.fnav{margin-top:24px}
}
@media (max-width:700px){
  :root{--gutter:20px}
  .top{height:72px}
  .brand-name{font-size:10px}
  .top .btn{padding:10px 14px}
  .face{padding:92px var(--gutter) 60px}
  .slat .face{padding:92px var(--gutter) 60px}
  .crumbs ol{margin-bottom:0}
  .logo{margin-top:12px;font-size:14vw;line-height:1.02}
  .logo .l2{padding-left:0;margin-top:.06em}
  .scrap{width:2.1em}
  .lede{margin-top:22px;font-size:17px;max-width:none;padding-right:44px}
  .buyrow{margin-top:22px;gap:6px 22px}
  .note{padding-right:44px}
  .face-cover{right:-6vw;bottom:-4vh;width:46vw}
  .motion .face-cover{bottom:-9vh}
  .motion .cord{right:-6px;height:58%}
  .reveal-line{left:var(--gutter);right:var(--gutter);bottom:5vh;max-width:none}
  .rl-quote{font-size:clamp(26px,8vw,36px)}
  .scene img{object-position:50% 40%}
  .worlds-in{padding-top:16vh}
  .worlds-art{height:62vh}
  .wall{font-size:12.6vw}
  .io{font-size:21vw;white-space:normal;line-height:.9}
  .part-in{padding:16vh var(--gutter) 13vh}
  .sink{font-size:1.9em;flex-wrap:wrap}
  .sink .br{display:block;flex-basis:100%;height:0}
  .sink span:nth-of-type(6){margin-left:.5em}
  .p1 .syn{margin:2.4em 0 0 3.2em}
  .p1 .ptitle{font-size:14vw}
  .p1 .part-art::after{background:linear-gradient(180deg,rgba(244,147,26,.55),rgba(244,147,26,.78))}
  .pq p{font-size:9.4vw}
  .prov{font-size:11vw}
  .cage{height:46vh;margin-top:10vh}
  .p3 .ptitle{font-size:11vw}
  .p3 .ptitle .mk{font-size:1.75em}
  .pwall{font-size:12.4vw}
  .peace{padding:18vh var(--gutter) 16vh}
  .kwall{font-size:13vw}
  .kit-stage{display:block;margin-top:6vh}
  .phone{width:min(74vw,300px);border-radius:46px;padding:9px}
  .phone-screen{border-radius:37px}
  .phone-screen::before{top:9px;height:22px}
  .story-bars{top:38px;left:10px;right:10px;gap:3px}
  .sc-play{top:46px;right:4px}
  .story-cap{gap:6px}
  .sc-v{font-size:26px}
  .piece{margin-top:72px}
  .piece-slide .obj{margin:0 2%}
  .piece-feed{width:76%;margin-left:auto;margin-right:auto}
  .inc{margin-top:72px;max-width:none}
  .gwall{font-size:13vw}
  .facts{grid-template-columns:1fr}
  .price strong{font-size:56px}
}
@media (max-width:360px){
  .logo{font-size:14vw}
  .top .btn{display:none}
}
@media (min-width:1700px){
  :root{--gutter:96px}
}

@media (prefers-reduced-motion: reduce){
  @view-transition { navigation: none; }
  *,*::before,*::after{transition:none!important;animation:none!important}
  .btn:hover{transform:none}
}