/* 1 · the hero: the same night as the museum stage, the piece and its name */
.stage{--night:#1E2237;position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);gap:26px 40px;align-items:center;padding:70px 40px 64px;margin:38px -28px 0;color:#F4F2EE}
.stage::before{content:'';position:absolute;inset:22px 14px;background:var(--night);border-radius:120px 140px 130px 120px / 90px 100px 110px 90px;filter:blur(30px);z-index:-2}
.stage::after{content:'';position:absolute;left:22%;top:12%;width:56%;height:70%;border-radius:50%;background:radial-gradient(closest-side at 32% 42%,rgba(246,212,106,.5),rgba(246,212,106,.12) 55%,rgba(246,212,106,0) 100%);filter:blur(28px);z-index:-1;pointer-events:none}
@media (min-width:860px){ .stage{grid-template-columns:auto minmax(0,420px);justify-content:center;gap:26px 28px;padding:104px 72px 96px} }
@media (min-width:641px) and (max-width:859px){ .stage{padding:96px 64px 90px} }
@media (max-width:859px){ .stage .floor{width:100%} }
@media (max-width:640px){ .stage{padding:84px 70px 84px;margin:20px -18px 0;gap:36px} .stage::before{inset:10px 26px;border-radius:64px;filter:blur(18px)} .stage .floor .art .doorart{width:78%} .stage .plaque h1{font-size:27px} .stage .plaque .q{font-size:17px} .stage::after{left:10%;width:80%;top:6%;height:44%} }
.stage .floor{position:relative;z-index:1;width:520px;max-width:100%;justify-self:center;display:grid;place-items:end center}
.stage .floor .art{position:relative;z-index:1;width:100%;display:flex;align-items:flex-end;justify-content:center}
.stage .floor .art .doorart{width:90%;height:auto;overflow:visible}
.stage .plaque{position:relative;z-index:1;display:grid;gap:16px;align-self:center;justify-items:start}
.stage .plaque .m-label{color:rgba(244,242,238,.62)}
.stage .plaque h1{font:700 clamp(34px,4.2vw,54px)/1.02 Syne,Manrope,sans-serif;letter-spacing:-.03em;margin:0;color:#FFF9E8}
.stage .plaque .q{margin:0;font:400 clamp(18px,1.7vw,21px)/1.45 Manrope,sans-serif;color:rgba(244,242,238,.86);max-width:24em}
.stage .plaque .q i{font-style:normal;color:#F6D46A}
.stage .plaque .meta{font:400 14px/1.5 Manrope,sans-serif;color:rgba(244,242,238,.55)}
.stage .plaque .go{position:relative;isolation:isolate;margin-top:12px;background:transparent;color:#141416;box-shadow:none;justify-self:end;margin-right:56px}   /* right, with the same margin as the museum stage's button */
.stage .plaque .go::before{content:'';position:absolute;inset:-1px;border-radius:999px;background:#F6D46A;filter:blur(3.5px);z-index:-1}   /* the same airbrushed yellow button as the museum stage */
.stage .plaque .go:hover::before{filter:blur(5px)}
/*TOWER-ANIM*/
@media (prefers-reduced-motion:reduce){ .shop *{animation:none!important} }
/* 2 · the thesis: the thought alone, on black */
.thesis{background:var(--wall);color:var(--ink);margin:10px calc(50% - 50vw) 0;padding:clamp(60px,8vw,100px) 0 40px}   /* the same wall as the page: no seam under the night's fade */
.thesis .in{max-width:960px;margin:0 auto;padding:0 28px}   /* the same column as the world below */
@media (max-width:640px){ .thesis .in{padding:0 18px} }
.thesis .m-label{color:var(--mute);display:block;margin-bottom:26px}
.thesis p{margin:0 0 20px;font:400 clamp(19px,2vw,25px)/1.5 Manrope,sans-serif;letter-spacing:-.005em;max-width:32em;color:var(--ink)}
.thesis p:last-child{margin-bottom:0}
[data-project="digital-post-office"] .thesis p{font-size:clamp(18px,1.8vw,22px);line-height:1.6;max-width:38em}
/* 3 · the piece's own world: paper, ink and the two hands */
.world{background:var(--paper);color:var(--ink);margin:0 calc(50% - 50vw);padding:clamp(60px,8vw,100px) 0 48px;font:20px/1.45 var(--hand)}   /* the piece's own hand, everywhere in its world */
.world .in{max-width:960px;margin:0 auto;padding:0 28px}
.world .m-foot{margin-top:70px}   /* the foot stays on the world's own paper: the page's colour runs to the bottom */
.m-wrap{padding-bottom:0}
@media (max-width:640px){ .world .in{padding:0 18px} }
.world .sign{display:block;font:700 clamp(30px,4vw,44px)/1.1 var(--hand);text-transform:uppercase;letter-spacing:.08em;color:var(--ink);margin:0 0 14px}   /* the app's top-bar type, at a size that answers the thought above: capitals, spaced, bold */
.world .lead{margin:18px 0 0;color:var(--soft);max-width:34em}
/* the bleed: the night runs between the thought and the world, fading into both */
.bleed{height:200px;margin:0 calc(50% - 50vw);background:linear-gradient(180deg,var(--wall),var(--paper));display:grid;place-content:center;align-items:center;gap:30px}   /* the dots sit in the middle, the same air above and below */   /* the wall becomes the paper, seamlessly; three dots mark the way from type to hand */
.bleed .mark{height:128px;width:auto;overflow:visible;display:block}   /* the mark: a full stop set in type, the same dot by a hand, the hand giving up on neatness */
.world{padding-top:40px}
/* the app's own motion rules, lifted at build: the keeper's blink and the objects' idle moves */
/*WORLD-ANIM*/
/*SIZES-CSS*/
/* the world, in three scenes: the counter, the pile, and the receiver's page to play in */
.scene{margin-top:72px}.scene.counter{margin-top:42px}.scene.unbox{margin-top:22px}
.scene .art svg{width:100%;height:auto;overflow:visible;display:block}
.scene.counter{display:grid;grid-template-columns:1fr;gap:18px;justify-items:center}
.scene.counter .art{width:min(100%,520px)}
.scene.counter .say{margin:0;font:400 20px/1.4 var(--hand);color:var(--soft);text-align:center;max-width:26em}
.scene.pile{display:grid;grid-template-columns:1fr;gap:20px 40px;align-items:center;margin-top:72px}
@media (min-width:760px){ .scene.pile{grid-template-columns:1fr 1.1fr} }
.scene.pile .rides{width:min(100%,460px);justify-self:center;display:grid;gap:4px;justify-items:center}
@media (max-width:759px){ .scene.pile .rides{transform:translateY(-10px)} }
.rides .stack{position:relative;width:100%;display:grid;place-items:end center}   /* as tall as the carriers' frame, no more */
.rides .stack .r{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;animation:rideShow 16s infinite}
.rides .stack .r0{position:relative;height:auto}
[data-project="digital-post-office"] .rides .stack .r0{scale:1.05}
.rides .r .rd1{animation:rdA 1.5s steps(1) infinite}.rides .r .rd2{animation:rdB 1.5s steps(1) infinite}   /* the carriers keep their two-pose habit, one pose at a time */
.rides .stack .r1{animation-delay:2.67s}.rides .stack .r2{animation-delay:5.33s}.rides .stack .r3{animation-delay:8s}.rides .stack .r4{animation-delay:10.67s}.rides .stack .r5{animation-delay:13.33s}
@keyframes rideShow{0%{opacity:0;transform:translateY(10px)}3%,14%{opacity:1;transform:none}17%,100%{opacity:0;transform:translateY(-8px)}}
.rides .cap{position:relative;height:1.6em;width:100%;margin:0;text-align:center;font:700 18px/1.6 var(--hand);color:#000}
.rides .cap span{position:absolute;left:0;right:0;opacity:0;animation:rideShow 16s infinite}
.rides .cap .c1{animation-delay:2.67s}.rides .cap .c2{animation-delay:5.33s}.rides .cap .c3{animation-delay:8s}.rides .cap .c4{animation-delay:10.67s}.rides .cap .c5{animation-delay:13.33s}
@media (prefers-reduced-motion:reduce){ .rides .stack .r,.rides .cap span,.rides .r .rd1,.rides .r .rd2{animation:none} .rides .stack .r0,.rides .cap .c0{opacity:1} .rides .r .rd2{visibility:hidden} }
.scene h3{font:400 clamp(26px,3.2vw,34px)/1.1 var(--hand);margin:0 0 10px}
.scene .words p{margin:0;color:var(--soft);max-width:30em}
.scene.play{margin-top:82px}
.scene.play .words{margin-bottom:16px}
.window{position:relative;margin:6px 0 0}
.window iframe{display:block;width:100%;height:640px;border:0;background:transparent;transition:height .4s ease}.window iframe:not([src]){visibility:hidden}   /* the app shows through with no ground of its own, so it sits on the page */
@media (max-width:640px){ .window iframe{height:520px} }
/* the unboxing: three parcels on the paper; a tap opens a drawn bubble with the unwrapping inside it */
.gifts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:end;margin:30px auto 0;max-width:720px}
.gifts .gift{background:none;border:0;padding:8px 12px;cursor:pointer;transition:transform .18s;border-radius:16px}
.gifts .gift svg{width:100%;height:auto;overflow:visible;display:block}
.gifts .gift:hover{transform:translateY(-6px) rotate(-2deg)}.gifts .gift.on{transform:translateY(-4px)}
.bubble{position:relative;margin:26px 0 0;padding:0;background:transparent;border:0}   /* no drawn bubble: the stage inside fades into the paper at its own edges */
.bubble .tail{display:none;position:absolute;top:-22px;left:var(--tail,16%);width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:24px solid var(--ink);transform:translateX(-50%)}
.bubble .tail::after{content:'';position:absolute;left:-10px;top:5px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:19px solid #fff}
.bubble iframe{display:block;width:100%;height:min(80vh,680px);border:0;background:transparent}
.bubble .bhint{margin:10px 0 4px;text-align:center;font:400 16px var(--hand);color:var(--muted)}
/* the unwrapping plays on a phone: the same shell as piece 02's showcase (its showcase.html), the paper behind the app */
.bubble .phone-shell{width:calc(100% - 24px);max-width:380px;margin:8px auto 0;border:2px solid #202024;border-radius:46px;padding:10px;background:transparent}
.bubble .phone-top{height:27px;position:relative}.bubble .phone-top::after{content:'';position:absolute;left:50%;top:2px;transform:translateX(-50%);width:92px;height:17px;border-radius:12px;background:#202024}
.bubble .phone-screen{overflow:hidden;border-radius:25px;isolation:isolate;background:var(--paper,#F3EEE4)}.bubble .phone-screen iframe{display:block;border:0;width:100%;height:auto;aspect-ratio:400/711.111;background:transparent}
.bubble .phone-home{width:98px;height:4px;margin:13px auto 4px;border-radius:4px;background:#202024}
@media (max-width:640px){ .gifts{gap:6px;margin-top:22px} .gifts .gift{padding:4px} .bubble iframe{height:78vh} }
@media (prefers-reduced-motion:reduce){ .gifts .gift{transition:none} }
.enter{margin-top:72px;display:grid;justify-content:center}
.tm-btn{display:inline-block;font:400 24px/1 var(--hand);color:var(--ink);text-decoration:none;background:var(--yellow);border:2px solid var(--yellow);border-radius:120px 10px 110px 10px / 10px 110px 10px 120px;padding:16px 34px 17px;transition:transform .1s}   /* the app's own primary button */
.tm-btn:hover{transform:translateY(-1px)}