@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Special+Elite&display=swap";
:root{--paper:#f4f0e5;--ink:#34392f;--red:#a74632;--green:#526448}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{background:var(--paper);color:var(--ink);margin:0;font-family:DM Sans,Arial,sans-serif;font-size:15px}body:before{content:"";pointer-events:none;opacity:.055;z-index:1000;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E");position:fixed;inset:0}a{color:inherit;text-underline-offset:5px}button{font:inherit;color:inherit}button,a{-webkit-tap-highlight-color:transparent}:focus-visible{outline:3px solid var(--red);outline-offset:7px}header{justify-content:space-between;align-items:center;max-width:1280px;margin:auto;padding:30px 50px;display:flex}.wordmark{font-family:Georgia,serif;font-size:24px;text-decoration:none}.wordmark span{color:var(--red);margin-left:12px}nav{gap:32px;font-size:13px;display:flex}nav a{text-decoration:none}nav a:hover{text-decoration:underline}.skip-link{z-index:100;position:fixed;top:-100px;left:10px}.skip-link:focus{background:#fff;padding:10px;top:10px}main{max-width:1180px;margin:auto}.scene{isolation:isolate;position:relative}.opening{height:870px}.intro{z-index:2;width:57%;position:absolute;top:95px;left:33%}.eyebrow{letter-spacing:2.3px;color:#707468;font-size:10px}h1,h2,h3{font-family:Georgia,serif;font-weight:400}h1{letter-spacing:-5px;margin:20px 0 25px;font-size:clamp(60px,7vw,94px);line-height:1.05}.title-star{color:var(--red);vertical-align:top;margin-left:15px;font-size:54px;display:inline-block;transform:rotate(12deg)}.intro p{line-height:1.8}.handwriting{font-family:Special Elite,Courier New,monospace;font-size:17px;line-height:1.5}.intro-note{color:var(--red);margin:28px 0;display:block;transform:rotate(-4deg)}.margin-mark{letter-spacing:2px;color:#808374;font-size:10px;position:absolute;bottom:45px;left:35px}.scroll-note{font-size:12px;position:absolute;bottom:85px;left:43%}.archive-object{left:var(--x);top:var(--y);width:var(--width);cursor:grab;-webkit-user-select:none;user-select:none;touch-action:pan-y;z-index:3;perspective:1200px;background:0 0;border:0;padding:0;position:absolute}.archive-object:active{cursor:grabbing}.archive-object.raised{z-index:20}.object-turn{transform-style:preserve-3d;transition:transform .45s;display:grid}.is-flipped .object-turn{transform:rotateY(180deg)}.face{backface-visibility:hidden;grid-area:1/1;min-width:0}.back{height:100%;transform:rotateY(180deg)}.object-front,.object-back{background:#fffdf6;box-shadow:2px 5px 9px #453c2724,0 1px 2px #453c2720}.object-front.photo{padding:11px 11px 30px}.image-window{overflow:hidden}.image-window img{width:100%;height:auto;display:block}.photo-caption{padding-top:18px;font-family:Special Elite,monospace;font-size:13px;display:block}.object-front.doodle{background:#fff;padding:8px}.doodle.cat .image-window{aspect-ratio:1.55}.doodle.cat img{width:162%;max-width:none;transform:translate(-1%,-2%)}.doodle.person .image-window{aspect-ratio:.68}.doodle.person img{width:300%;max-width:none;transform:translate(-65%)}.note{text-align:left;clip-path:polygon(0 1%,98% 0,100% 97%,75% 99%,53% 97%,24% 100%,0 98%);background:#eee6c9;min-height:220px;padding:30px 24px}.note-text{white-space:pre-line;font-family:Special Elite,monospace;font-size:20px;line-height:1.6}.object-back{text-align:left;background:repeating-linear-gradient(#fffaf0 0 29px,#b3bdab45 30px,#fffaf0 31px);flex-direction:column;justify-content:center;height:100%;min-height:240px;padding:28px;display:flex}.object-back h3{margin:18px 0 10px;font-size:27px}.object-back p{font-size:14px;line-height:1.7}.catalog-label{letter-spacing:1.5px;font-size:9px}.back-mark{color:var(--red);align-self:flex-end;font-family:Georgia,serif}.clover{z-index:4;width:250px;position:absolute;top:440px;left:44%;transform:rotate(-4deg)}.clover button{cursor:pointer;background:#e3e8d6;border:0;padding:8px;transition:transform .15s;box-shadow:3px 5px 8px #453c2724}.clover img{object-fit:cover;object-position:35% center;width:100%;height:185px;display:block}.clover-note{margin-bottom:15px;font-family:Special Elite,monospace;font-size:13px;display:block;transform:rotate(5deg)}.clover-speech{text-align:center;color:var(--green);margin-top:14px;font-family:Special Elite,monospace;display:block}.mood-1 button{transform:rotate(3deg)}.mood-2 button{transform:rotate(-5deg)scale(1.05)}.mood-2 .clover-speech{color:var(--red)}.mood-3 button{transform:rotate(2deg)}.section-label{padding-left:40px}.section-label h2{letter-spacing:-1.8px;margin:15px 0;font-size:48px}.section-label p{font-size:13px}.doodle-scene{height:690px}.doodle-scene .section-label{margin-left:32%}.doodle-note{color:var(--red);position:absolute;top:490px;left:12%;transform:rotate(-6deg)}.photo-scene{height:1000px}.photo-note{color:var(--green);position:absolute;top:680px;left:41%;transform:rotate(-5deg)}.made-scene{height:620px}.about{max-width:600px;margin:0 auto;padding:70px 35px 100px;transform:rotate(-1deg)}.about h2{font-size:44px}.about p{font-size:17px;line-height:1.9}.about .handwriting{color:var(--red);margin-top:35px;display:block}.contact{text-align:center;padding:20px 20px 80px}.contact h2{font-size:35px}.contact small{color:#747769;font-size:11px}.secret{width:240px;min-height:360px;margin:0 auto;position:relative}.secret .archive-object{top:65px}.secret>span{color:var(--red);position:absolute;top:10px;left:-100px}.mobile-hint{display:none}footer{text-align:center;padding:40px 20px 70px;font-size:13px}footer p{font-family:Georgia,serif;font-size:28px}footer>span,footer>a,footer>small{margin:22px;display:block}footer b{letter-spacing:4px;font-family:monospace;font-size:17px}footer small{color:#747769}.inspect-dialog{background:#eee6d8;border:0;width:440px;max-width:calc(100vw - 40px);padding:35px 15px 15px;box-shadow:0 15px 80px #0005}.inspect-dialog::backdrop{background:#24271fd0}.inspect-dialog .object-back{min-height:330px}.close-inspect{cursor:pointer;background:0 0;border:0;font-size:28px;position:absolute;top:1px;right:10px}@media (max-width:760px){header{align-items:flex-start;gap:15px;padding:24px 22px}.wordmark{white-space:nowrap;font-size:20px}nav{flex-wrap:wrap;justify-content:flex-end;gap:12px;max-width:190px;font-size:11px}main{overflow:clip}.scene{flex-direction:column;gap:28px;padding:30px 24px 80px;display:flex;height:auto!important}.intro{order:0;width:auto;padding:0 6px 15px;position:relative;top:auto;left:auto}h1{letter-spacing:-3px;font-size:63px}.title-star{font-size:35px}.intro-note{font-size:14px}.archive-object{width:min(var(--width),85%);order:var(--order);cursor:pointer;flex-shrink:0;align-self:center;margin:10px 0;position:relative;top:auto;left:auto;transform:rotate(var(--rotation))!important}.archive-object:active{cursor:pointer;filter:brightness(.96)}.opening .archive-object:nth-of-type(2){align-self:flex-end;width:65%}.opening .archive-object:nth-of-type(3){align-self:flex-start;width:52%}.clover{order:2;align-self:flex-end;width:230px;margin:5px 10px 15px;position:relative;top:auto;left:auto}.margin-mark{bottom:20px;left:30px}.scroll-note{text-align:center;order:10;position:relative;bottom:auto;left:auto}.section-label{order:0;padding:0}.doodle-scene .section-label{margin:0}.section-label h2{font-size:39px}.doodle-note,.photo-note{order:9;align-self:center;position:relative;top:auto;left:auto}.photo-scene .archive-object{width:min(var(--width),95%)}.photo-scene .archive-object:nth-of-type(2){align-self:flex-end;width:60%}.photo-scene .archive-object:nth-of-type(4){align-self:flex-start;width:55%}.about{padding:60px 32px}.about h2{font-size:36px}.about p{font-size:16px}.secret{margin-top:10px}.secret .archive-object{width:240px;position:absolute;top:70px}.desktop-hint{display:none}.mobile-hint{display:block}.secret>span{left:-20px}.object-back{padding:22px}.note-text{font-size:18px}}@media (pointer:coarse){.archive-object{cursor:pointer}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition:none!important;animation:none!important}.is-flipped .object-turn{transform:none}.is-flipped .front{visibility:hidden}.is-flipped .back{backface-visibility:visible;transform:none}.clover button{transform:none!important}}