:root{--ink:#262824;--blue:#183e97;--pink:#ec75a5;--paper:#faf5e8;--yellow:#fcf7a0;font-family:'DM Sans','Noto Sans SC',sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:6px}button{border:0}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.topbar{height:96px;padding:24px 4.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #24354926;position:relative;z-index:20;background:var(--paper)}.wordmark{font-size:17px;font-weight:900;letter-spacing:-.7px}.wordmark span{display:block;font-size:11px;letter-spacing:2px;font-weight:500;margin-top:5px}.steps{display:flex;align-items:center;gap:16px;font-size:13px;color:#929184}.steps span.active{color:var(--blue);font-weight:700}.steps i{width:32px;height:1px;background:#babdaf}.quiet{padding:10px 0;background:none;font-size:14px;border-bottom:1px solid currentColor}.parcel{min-height:calc(100svh - 96px);position:relative;display:grid;grid-template-columns:40% 60%;align-items:center;padding:35px 5% 80px;overflow:hidden;background-image:linear-gradient(#6184b52a 1px,transparent 1px),linear-gradient(90deg,#6184b52a 1px,transparent 1px);background-size:58px 58px}.intro{z-index:2;padding-left:3%}.eyebrow{font-size:12px;font-weight:700;letter-spacing:2px}.intro h1{font-size:clamp(44px,5.2vw,84px);line-height:1.25;letter-spacing:-3px;margin:28px 0 25px;position:relative}.intro h1 em{font-style:normal;color:var(--blue);position:relative;white-space:nowrap}.intro h1 em:after{content:'';position:absolute;bottom:-8px;left:0;width:90%;height:5px;background:var(--pink);transform:rotate(-3deg)}.asterisk{color:var(--pink);font-size:65px;display:inline-block;position:absolute;transform:rotate(13deg);top:-10px;right:8%}.intro-note{font-size:17px;line-height:1.9;color:#555e60;margin-top:35px}.delivery{display:inline-block;font-size:11px;letter-spacing:1px;border-top:1px dashed #828781;border-bottom:1px dashed #828781;padding:13px 0;margin-top:28px}.box-stage{position:relative;width:100%;max-width:820px;justify-self:center;perspective:1200px}.image-button{padding:0;background:transparent;display:block}.image-button img{display:block;width:100%;user-select:none;-webkit-user-drag:none}.closed-box{width:100%;position:relative;filter:drop-shadow(5px 20px 15px #6b53232b);transition:transform .35s}.closed-box:hover{transform:translateY(-8px) rotate(-1deg)}.closed-box>.tape{position:absolute;inset:0;clip-path:polygon(16% 10%,24% 5%,90% 25%,88% 35%);opacity:0;pointer-events:none;transform-origin:88% 28%}.action-tag{position:absolute;bottom:10%;left:18%;background:var(--pink);padding:14px 24px;transform:rotate(-7deg);font-size:15px;box-shadow:3px 4px 0 #263b7226;white-space:nowrap}.action-tag b{margin-left:20px}.closed-box.tearing{pointer-events:none;animation:boxTug 1.45s ease both}.tearing .tape{opacity:1;animation:peel 1.3s ease-in both}.tearing .action-tag{opacity:0}.opened-box{position:relative;animation:openIn .75s ease both}.opened-box>img{width:100%;display:block}.opened-box #player{position:absolute;left:17%;top:22%;width:31%;height:42%;background:transparent;transform:rotate(-8deg);border-radius:12%;border:2px dashed #fff8;transition:background .25s}.opened-box #player:hover{background:#ffbde225}.opened-box #player span{position:absolute;bottom:0;left:5%;background:#f9eaf1;color:#27335b;font-size:14px;padding:10px 18px;white-space:nowrap;box-shadow:3px 4px 0 #ef89b4}.box-stage.zooming{animation:zoomIn .75s ease both;transform-origin:35% 50%}.parcel-footer{position:absolute;bottom:23px;left:5%;right:5%;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.5px;color:#636b68}.parcel-footer #scene-hint{font-size:13px;letter-spacing:1px}.about{background-color:var(--yellow);background-image:radial-gradient(circle,#faf7ed 0 11px,transparent 12px);background-size:91px 91px;padding:44px 20px 25px;animation:fadeIn .7s ease}.about-heading{text-align:center;position:relative;z-index:1}.about-heading h1{font-size:clamp(55px,8vw,105px);line-height:.9;letter-spacing:-6px;margin:24px 0 30px}.about-heading .script{font-family:Georgia,serif;font-weight:400;font-style:italic;font-size:.95em;letter-spacing:-8px}.about-heading strong{font-size:1.6em;color:#f270ac;font-weight:900;letter-spacing:-11px}.about-heading sup{font-size:.27em;letter-spacing:-3px;vertical-align:45%}.about-heading h1 b{font-weight:900}.about-heading h1 em{font-family:Georgia,serif;font-weight:400;display:inline-block;transform:rotate(-8deg);margin-left:14px}.about-heading>p:last-child{font-size:14px;letter-spacing:2px}.collage{position:relative;width:min(100%,1050px);aspect-ratio:1/1.43;margin:24px auto 0}.record{position:absolute;width:77%;left:11.5%;top:10%;border-radius:50%;animation:spin 30s linear infinite;clip-path:ellipse(49% 49% at 50% 50%)}.profile{position:absolute;left:0;top:47%;width:100%;z-index:5;transition:filter .3s}.profile:hover{filter:drop-shadow(0 4px 2px #68451c33)}.folder-prompt{position:absolute;top:11%;left:12%;font-size:14px;background:#f78fb9;padding:10px 17px;transform:rotate(-5deg);box-shadow:2px 3px #8b60463b}.phone{position:absolute;z-index:7;top:53%;left:62%;width:32%;transform:rotate(3deg);transition:filter .2s}.phone:hover{filter:drop-shadow(0 5px 4px #ab547738)}.phone.shake{animation:shake .65s ease}.paper-note{z-index:8;position:absolute;left:51%;top:66%;padding:13px 18px;background:#f6a9bf;font-family:Georgia,serif;font-style:italic;text-align:center;transform:rotate(-13deg);font-size:clamp(10px,1.7vw,20px);box-shadow:1px 3px 5px #644a2820;pointer-events:none}.projects-orbit{position:absolute;inset:0;z-index:9;pointer-events:none}.project-folder{position:absolute;width:23%;left:38.5%;top:49%;opacity:0;transform:translateY(25%) scale(.5);transition:top .85s cubic-bezier(.2,.8,.2,1.12),left .85s cubic-bezier(.2,.8,.2,1.12),transform .85s cubic-bezier(.2,.8,.2,1.12),opacity .4s;transition-delay:calc(var(--i)*.10s);pointer-events:none}.project-folder img{width:100%;filter:drop-shadow(1px 6px 3px #46371826);transition:transform .25s}.expanded .project-folder{opacity:1;pointer-events:auto;left:var(--x);top:var(--y);transform:rotate(var(--r));}.project-folder:hover img,.project-folder:focus-visible img{transform:translateY(-12px) scale(1.05)}.expanded .folder-prompt{background:#ffcadf}.about-bottom{display:flex;gap:20px;align-items:center;justify-content:space-between;max-width:1050px;margin:0 auto;font-size:10px;letter-spacing:1px}.project-nav{position:sticky;top:0;z-index:10;padding:18px 5%;background:#faf5e8ed;backdrop-filter:blur(12px);border-bottom:1px solid #292f2822;display:flex;justify-content:space-between;align-items:center}.pill{background:#fff9ed;border:1px solid #434e40;border-radius:40px;padding:11px 20px;font-size:14px}.pill:hover{background:#ffdbeb}.project-heading{text-align:center;padding:55px 20px}.project-heading h1{font-size:clamp(27px,4vw,52px);margin:17px 0;letter-spacing:-1px}.project-heading p:last-child{font-size:14px;color:#637064}#project-pages{width:min(1200px,100%);margin:auto;display:flex;flex-direction:column;gap:12px}.page-image{padding:0;display:block;background:#ece8df;cursor:zoom-in;width:100%;position:relative}.page-image img{display:block;width:100%;height:auto}.page-image:after{content:'＋';position:absolute;right:16px;bottom:16px;border-radius:50%;background:#fffdf2df;width:35px;height:35px;display:grid;place-items:center;opacity:0;transition:opacity .2s}.page-image:hover:after{opacity:1}.project-end{display:flex;flex-direction:column;align-items:center;gap:25px;padding:65px 20px;font-size:11px;letter-spacing:1px}dialog{border:0;padding:0;background:#222520;color:white;width:100vw;max-width:none;height:100dvh;max-height:none}dialog::backdrop{background:#000b}.lightbox-toolbar{height:70px;display:flex;align-items:center;gap:12px;padding:12px 24px}.lightbox-toolbar>span{margin-right:auto;font-size:14px}.lightbox-scroll{height:calc(100dvh - 70px);overflow:auto;text-align:center;padding:0 20px 30px}.lightbox-scroll img{max-width:100%;height:auto;display:block;margin:auto}.lightbox-scroll.actual img{max-width:none}.paused *, .paused *:before,.paused *:after{animation-play-state:paused!important}.paused .tearing,.paused .tearing .tape,.paused .zooming,.paused .opened-box,.paused .about,.paused .phone.shake{animation-play-state:running!important}@keyframes spin{to{transform:rotate(360deg)}}@keyframes peel{0%{transform:none}40%{transform:translate(-2%,-3%) rotateX(30deg) rotate(-4deg)}100%{transform:translate(-48%,-40%) rotateX(75deg) rotate(-35deg);opacity:0}}@keyframes boxTug{0%,100%{transform:none}25%{transform:rotate(-2deg) scale(.98)}65%{transform:rotate(1deg) scale(1.025)}90%{opacity:1}100%{opacity:0}}@keyframes openIn{from{opacity:0;transform:scale(.85) rotate(-3deg)}to{opacity:1;transform:none}}@keyframes zoomIn{to{transform:scale(2.5);opacity:0}}@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@keyframes shake{0%,100%{transform:rotate(3deg)}15%,45%,75%{transform:translateX(-4px) rotate(0deg)}30%,60%,90%{transform:translateX(4px) rotate(6deg)}}
@media(min-width:1500px){.parcel{padding-left:10%;padding-right:10%}.intro h1{font-size:82px}.box-stage{max-width:740px}}@media(max-width:850px){.topbar{height:80px;padding:18px 5%}.steps{display:none}.parcel{min-height:calc(100svh - 80px);grid-template-columns:1fr;padding:30px 7% 80px}.intro{text-align:center;padding:0}.intro h1{font-size:48px;letter-spacing:-2px;margin:15px 0}.intro h1 br{display:none}.intro h1 em:after{height:3px}.asterisk{font-size:30px;right:-1%;top:-10px}.intro-note{font-size:14px;margin-top:26px}.intro-note br{display:none}.delivery{display:none}.box-stage{max-width:520px;margin:8px auto 10px}.parcel-footer>span:first-child,.parcel-footer>span:last-child{display:none}.parcel-footer{justify-content:center}.about{padding:34px 10px 20px}.about-heading .eyebrow{font-size:10px}.about-heading h1{font-size:70px;letter-spacing:-4px}.about-heading strong{letter-spacing:-7px}.about-heading>p:last-child{font-size:12px}.about-bottom{flex-wrap:wrap;justify-content:center}.about-bottom>span{width:100%;text-align:center;order:3}.folder-prompt{font-size:11px;padding:7px 10px}.collage{margin-top:20px}.paper-note{padding:7px 10px}.about-bottom .quiet{font-size:12px}}@media(max-width:480px){.wordmark{font-size:14px}.wordmark span{font-size:10px;letter-spacing:1px}.quiet{font-size:12px}.intro h1{font-size:38px}.eyebrow{font-size:10px}.action-tag{font-size:12px;padding:10px 15px}.about-heading h1{font-size:54px}.about-heading strong{letter-spacing:-4px}.about-heading .script{letter-spacing:-4px}.about-heading h1 em{margin-left:5px}.about-heading>p:last-child{letter-spacing:0}.about .collage{margin-top:35px}.folder-prompt{font-size:10px;padding:5px 7px;left:9%;top:9%}.opened-box #player span{font-size:11px;padding:6px 10px}.lightbox-toolbar{padding:10px}.lightbox-toolbar .pill{padding:9px 12px;font-size:12px}.lightbox-scroll{padding:0 0 20px}.project-nav{padding:12px 4%}#project-number{font-size:12px}.project-heading{padding:35px 15px}.project-heading h1{font-size:26px}.paper-note{font-size:8px}.project-folder{width:25%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.record{animation:none}}
@media(min-width:851px){.box-stage{width:min(100%,calc(100svh - 205px));min-width:380px}.parcel{padding-top:25px;padding-bottom:65px}}
/* Opening sequence: arrival, seal, invitation, then open box. */
.parcel{display:block;height:calc(100svh - 96px);min-height:620px;padding:0;isolation:isolate}
.parcel .intro{position:absolute;top:20px;left:50%;width:min(94%,740px);padding:0;text-align:center;z-index:5;opacity:0;pointer-events:none;transform:translate(-50%,130px) scale(.3) rotate(-9deg);transition:opacity .35s,transform .8s cubic-bezier(.16,1.2,.3,1)}
.parcel .intro h1{font-size:clamp(36px,4vw,58px);line-height:1.13;letter-spacing:-2px;margin:8px 0 0}
.parcel .intro h1 br{display:block}.parcel .intro h1 em:after{height:3px;bottom:-5px;left:5%}
.parcel .intro .asterisk{font-size:43px;top:12px;right:calc(50% - 175px)}
.parcel .intro-note{font-size:16px;line-height:1.6;margin:18px 0 8px}.parcel .intro-note br{display:none}
.parcel .delivery{display:inline-block;font-size:12px;letter-spacing:.5px;margin:0;padding:8px 5px;border-top:1px dashed #82878188;border-bottom:1px dashed #82878188}
.parcel .box-stage{position:absolute;width:min(49vw,520px,calc((100svh - 96px)*.64));min-width:0;max-width:none;left:50%;top:49%;transform:translate(-50%,-50%);transition:top .8s cubic-bezier(.2,.7,.3,1),width .7s;perspective:1200px}
.parcel .closed-box{transform:none;transform-origin:50% 70%;filter:drop-shadow(3px 17px 12px #6b532329)}
.arriving .closed-box{animation:parcelRoll 1.4s cubic-bezier(.18,.75,.24,1) both}
.parcel .closed-box:disabled{cursor:default}.parcel .closed-box:hover{transform:none}
.parcel .closed-box>.tape{opacity:0;clip-path:polygon(16% 10%,24% 5%,90% 25%,88% 35%);transform-origin:88% 28%}
.seal-peeling .closed-box>.tape{animation:sealLift 1.2s cubic-bezier(.5,.05,.4,1) both}
.intro-ready .intro{opacity:1;transform:translate(-50%,0) scale(1) rotate(0)}
.intro-ready .box-stage{top:65%}
.parcel .action-tag{left:50%;bottom:6%;transform:translateX(-50%) rotate(-6deg);opacity:0;transition:opacity .4s .4s;font-size:13px;padding:12px 18px}
.intro-ready .action-tag{opacity:1}.intro-ready .closed-box:hover{filter:drop-shadow(3px 22px 12px #6b532342)}
.parcel.is-open .intro{opacity:0;transform:translate(-50%,-30px) scale(.8);transition-duration:.3s}
.parcel.is-open .box-stage{top:49%;width:min(65vw,760px,calc((100svh - 160px)*1.04));}
.parcel .opened-box{animation:openIn .7s ease both}
.opened-box>.player-cutout{position:absolute;inset:0;width:100%;height:100%;clip-path:polygon(17.4% 25.3%,43.2% 21.5%,48.3% 59.2%,22.5% 63.2%);transform-origin:33% 43%;pointer-events:none;z-index:2;transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s}
.opened-box:has(#player:hover)>.player-cutout,.opened-box:has(#player:focus-visible)>.player-cutout{transform:scale(1.14);filter:drop-shadow(3px 9px 5px #45253c55)}
.opened-box #player{left:18%;top:23%;width:29%;height:40%;transform:rotate(-8deg);border:0;border-radius:8%;z-index:3;background:transparent}
.opened-box #player:hover{background:transparent}
.player-note{position:absolute;left:101%;top:34%;width:155px;padding:20px 14px;background:#ffcee1;transform:rotate(8deg);font-size:16px;line-height:1.6;text-align:center;box-shadow:4px 5px 0 #9d6c4e20;color:#263758;white-space:nowrap}
.player-note:before{content:'';position:absolute;width:56px;height:18px;left:48px;top:-8px;background:#eee2b6bd;transform:rotate(-13deg)}
.player-note b{font-size:23px;font-weight:700}
.parcel .box-stage.zooming{animation:zoomCentered .75s ease both;transform-origin:33% 43%}
.collage{width:min(80%,1050px);aspect-ratio:1/1.43}.project-folder{width:29%}.phone{top:58%;left:61%;width:34%}.paper-note{top:70%;left:49%;font-size:clamp(10px,1.6vw,19px)}
.about-bottom{padding-top:25px}
@keyframes parcelRoll{0%{opacity:0;transform:translateX(-110vw) rotate(-310deg) scale(.75)}12%{opacity:1}72%{transform:translateX(30px) rotate(12deg) scale(1)}86%{transform:translateX(-9px) rotate(-5deg)}100%{transform:translateX(0) rotate(0)}}
@keyframes sealLift{0%{opacity:1;transform:none}25%{transform:translate(-2%,-2%) rotateX(20deg) rotate(-3deg)}65%{opacity:1;transform:translate(-19%,-24%) rotateX(45deg) rotate(-15deg)}100%{opacity:0;transform:translate(-75%,-80%) rotateX(65deg) rotate(-40deg)}}
@keyframes zoomCentered{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-30%,-35%) scale(2.5);opacity:0}}
@media(max-width:850px){.parcel{height:calc(100svh - 80px);min-height:650px}.parcel .intro{top:26px}.parcel .intro h1{font-size:43px}.parcel .box-stage{width:min(65vw,440px);top:49%}.intro-ready .box-stage{top:65%}.parcel.is-open .box-stage{width:min(75vw,600px);top:46%}.player-note{left:70%;top:102%;width:140px;font-size:14px;padding:12px;transform:rotate(-6deg)}.player-note b{font-size:21px}.player-note:before{left:42px}.collage{width:82%}.project-folder{width:29%}.paper-note{font-size:clamp(8px,1.6vw,15px)}}
@media(max-width:480px){.parcel{min-height:610px}.parcel .intro{top:28px}.parcel .intro h1{font-size:38px}.parcel .intro-note{font-size:13px;margin-top:17px}.parcel .delivery{font-size:10px;letter-spacing:0;padding:7px 0}.parcel .intro .asterisk{font-size:30px;right:calc(50% - 132px)}.parcel .box-stage{width:82vw}.intro-ready .box-stage{top:65%}.parcel.is-open .box-stage{width:87vw;top:43%}.player-note{left:55%;top:105%;width:133px}.parcel-footer #scene-hint{font-size:11px;letter-spacing:0}.collage{width:82%;margin-top:42px}.paper-note{font-size:8px;padding:5px 7px}.folder-prompt{font-size:9px}.about-bottom{padding-top:15px}}
@media(prefers-reduced-motion:reduce){.arriving .closed-box{animation:none}.seal-peeling .closed-box>.tape{animation:none;opacity:0}.parcel .intro,.parcel .box-stage{transition:none}}
@media(min-width:851px){.parcel .box-stage{width:min(49vw,520px,calc((100svh - 96px)*.56))}.intro-ready .box-stage{top:66%}.parcel.is-open .box-stage{top:49%;width:min(65vw,760px,calc((100svh - 160px)*1.04))}}