@font-face{font-family:Shippori;src:url('assets/shippori-mincho.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Zen Kaku;src:url('assets/zen-kaku.ttf') format('truetype');font-weight:400;font-display:swap}
:root{--paper:#f4f2ec;--ink:#1a1a1a;--grey:#646462;--seal:#2f4b9a;--mincho:Shippori,'Times New Roman',serif;--body:'Zen Kaku',sans-serif}
*{box-sizing:border-box}html{background:var(--paper);color:var(--ink);scroll-behavior:auto}body{margin:0;font-family:var(--body);font-weight:400}body::after{content:'';position:fixed;inset:0;z-index:15;pointer-events:none;opacity:.055;background-image:url('assets/grain.svg')}
main{overflow:clip}p,figure{margin:0}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:1px solid var(--seal);outline-offset:5px}button{font:inherit}::selection{background:#d5d5d1;color:#111}
.x-mark{position:fixed;top:26px;right:30px;width:48px;height:48px;z-index:20;display:grid;place-items:center}.x-mark svg{width:15px;height:15px;fill:currentColor}.x-mark:hover,.paw-back:hover{color:var(--seal)}
.pane{height:100vh;height:100svh;position:relative;isolation:isolate;background:#f4f4f0;overflow:hidden}.pane h1{position:absolute;z-index:0;top:23%;left:50%;transform:translateX(-50%);font:400 17vw/.95 var(--mincho);letter-spacing:.025em;margin:0;color:#1a1a1a;opacity:.095;white-space:nowrap}
.behind-glass{position:absolute;z-index:1;width:105vh;height:105vh;max-width:none;left:50%;top:12%;transform:translateX(-50%);object-fit:contain;filter:blur(19px);opacity:.72;mix-blend-mode:multiply}
.pane-frost{position:absolute;inset:0;z-index:2;background:rgba(250,251,252,.39);backdrop-filter:blur(3px)}
.edge-note{position:absolute;right:47px;top:126px;writing-mode:vertical-rl;font:400 15px/1.8 var(--mincho);letter-spacing:.1em;z-index:3;color:#575754}.pane-caption{position:absolute;bottom:48px;left:52px;font-size:12px;letter-spacing:.13em;z-index:3;color:#676763}
.press{position:relative;height:100vh;view-timeline-name:--press;view-timeline-axis:block;background:#f4f4f0}.press-stage{height:100vh;height:100svh;position:sticky;top:0;overflow:hidden}.scene{position:absolute;width:120vh;height:120vh;left:50%;top:-3vh;transform:translateX(-50%);isolation:isolate}.scene>img,.scene>svg{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.face-layer{mix-blend-mode:multiply;filter:blur(0);opacity:1;transition:filter 1100ms ease-out,opacity 1100ms ease-out}.paw-layer{mix-blend-mode:multiply;transform-origin:42% 85%;transform:translateY(0);filter:blur(0)}.pad{filter:brightness(.93);transform:scale(1.055,.975);transition:transform 1000ms cubic-bezier(.2,.65,.25,1),filter 900ms ease-out}.pad-a{transform-origin:170px 638px}.pad-b{transform-origin:445px 489px}.pad-c{transform-origin:725px 601px}.pad-d{transform-origin:895px 829px}.pad-palm{transform-origin:470px 919px}
.frost-layer{pointer-events:none}.pad-clearing{opacity:1;transition:opacity 300ms ease-out}.melt-halo{transform-origin:50% 62%;transform:scale(1.03);opacity:1;transition:transform 1000ms cubic-bezier(.18,.6,.3,1) 100ms,opacity 800ms ease 100ms}.compression-rim{opacity:.28;filter:blur(7px);transition:opacity 850ms ease-out;transform:scale(1.012);transform-origin:45% 64%}
.breath{position:absolute;left:62%;top:29%;width:22%;height:14%;border-radius:50%;background:rgba(250,251,252,.9);filter:blur(18px);opacity:0;pointer-events:none}.press-line{position:absolute;right:6vw;bottom:10vh;font:400 clamp(17px,1.6vw,25px)/1.9 var(--mincho);color:#4a4a46;letter-spacing:.03em;opacity:1;transition:opacity 1s ease 400ms}.contact-sentinel{position:absolute;top:95vh;left:0;width:1px;height:1px;pointer-events:none}
.js.motion .press{height:250vh}
.js.motion .press-stage:not(.contact) .face-layer{filter:blur(23px);opacity:.48}.js.motion .press-stage:not(.contact) .pad{transform:scale(.96,1.02);filter:brightness(1.3)}.js.motion .press-stage:not(.contact) .pad-clearing{opacity:0}.js.motion .press-stage:not(.contact) .melt-halo{transform:scale(.58);opacity:0}.js.motion .press-stage:not(.contact) .compression-rim{opacity:0}.js.motion .press-stage:not(.contact) .press-line{opacity:0}
.js.motion .contact .breath{animation:breath 1600ms ease-out both}@keyframes breath{0%,100%{opacity:0;transform:scale(.6)}38%{opacity:.72;transform:scale(1)}100%{transform:scale(1.3)}}
@supports(animation-timeline:view()){
 .js.motion .paw-layer{animation:approach linear both;animation-timeline:--press;animation-range:contain 0% contain 29%}
 @keyframes approach{from{transform:translateY(64%) scale(.88);filter:blur(9px)}to{transform:translateY(0) scale(1);filter:blur(0)}}
 .js.motion .scroll-track{animation:unroll linear both;animation-timeline:--hand-scroll;animation-range:contain 0% contain 100%}
 @keyframes unroll{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--travel,0px)))}}
}
.placard{min-height:95vh;display:grid;place-items:center;padding:130px 32px}.wall-label{width:360px;max-width:100%;padding-top:20px;border-top:1px solid #bab9b2}.label-name{font:400 40px/1.4 var(--mincho);letter-spacing:-.035em}.species{font:400 16px/1.7 var(--mincho);color:#686862;margin-top:4px}.species span{font-size:13px;margin-left:8px}dl{font-size:12px;line-height:1.9;letter-spacing:.04em;color:var(--grey);margin:35px 0 31px}dl div{display:flex;gap:7px;margin:7px 0}dt::after{content:':'}dd{margin:0}.notice{font:400 15px/1.8 var(--mincho);color:#4c4c47}
.hand-scroll{position:relative;view-timeline-name:--hand-scroll;view-timeline-axis:block}.scroll-stage{display:none}.js.motion .hand-scroll{height:250vh}.js.motion .scroll-stage{display:block;position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}.scroll-preface{position:absolute;left:7vw;top:8vh;color:#686862;font:400 14px/1.8 var(--mincho);letter-spacing:.05em}.scroll-track{position:absolute;left:0;top:17vh;width:calc(228vh + 20vw);padding:0 10vw;will-change:transform}.scroll-track>img{width:228vh;height:76vh;max-width:none;mix-blend-mode:multiply}.scroll-captions{position:absolute;left:10vw;right:10vw;top:0;display:flex;z-index:2}.scroll-captions p{width:25%;font:400 16px/1.5 var(--mincho);letter-spacing:.08em;writing-mode:vertical-rl;height:175px;box-sizing:border-box;padding-right:12%;transform:translateY(-3vh);color:#4d4d48}.scroll-captions p:last-child{padding-right:9%}.js.motion .scroll-still{display:none}
.scroll-still{padding:80px 0}.still-preface{padding:0 8vw 60px;font:400 15px/1.8 var(--mincho);color:var(--grey)}.scroll-still figure{position:relative;width:min(620px,100%);margin:0 auto 120px}.scroll-still figure>div{overflow:hidden;width:100%;aspect-ratio:3/4}.scroll-still img{width:400%;height:100%;max-width:none;transform:translateX(calc(var(--episode)*-25%));mix-blend-mode:multiply}.scroll-still figcaption{position:absolute;z-index:1;right:7%;top:10%;font:400 17px/1.6 var(--mincho);writing-mode:vertical-rl;letter-spacing:.06em}
.fogged-patch{position:relative;min-height:95vh;display:grid;place-items:center;padding:135px 30px;isolation:isolate}.fog-oval{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);width:min(750px,91vw);height:460px;max-height:80%;background:rgba(255,255,255,.65);border-radius:48% 52% 55% 45%/44% 50% 50% 56%;filter:blur(26px);box-shadow:0 0 35px 14px rgba(250,251,252,.65);z-index:-1}.contract-note{width:410px;max-width:100%;text-align:center}.contract-note>p:first-child{font:400 18px/2.1 var(--mincho);color:#555550}.address-line{border-bottom:1px solid #b6b6ae;display:flex;align-items:center;gap:10px;margin:30px auto 0;min-height:51px;text-align:left;width:100%;color:#777770}#contract-address{font:400 11px/1.8 var(--body);letter-spacing:.07em;word-break:break-all;user-select:all;flex:1}#contract-copy{border:0;background:transparent;padding:0 8px;min-width:44px;min-height:44px;font-size:11px;color:#55554d;cursor:pointer}#contract-copy:disabled{color:#92928a;cursor:default}#contract-status{font-size:11px;line-height:1.7;letter-spacing:.02em;min-height:20px;margin-top:10px;color:#66665e}.buy-link{font-size:12px;min-height:44px;padding:14px 10px;display:inline-flex;align-items:center;justify-content:center}.buy-link[hidden]{display:none}.paw-back{display:inline-flex;gap:12px;align-items:center;justify-content:center;min-height:48px;margin-top:14px;font:400 13px/1.7 var(--mincho);letter-spacing:.04em}.paw-back svg{width:12px;height:12px;fill:currentColor}
.the-print{min-height:65vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:50px 32px 45px;position:relative;overflow:hidden}.print-art{position:relative;width:200px;height:200px;margin-bottom:90px;transform:rotate(-9deg)}.print-art>*{position:absolute;inset:0;width:100%;height:100%}.left-print{opacity:.12;filter:blur(.4px)}.withdrawing-paw{display:none;mix-blend-mode:multiply}.js.motion .withdrawing-paw{display:block;opacity:.65}.js.motion .departed .withdrawing-paw{animation:withdraw 1300ms cubic-bezier(.25,.1,.35,1) both}@keyframes withdraw{from{transform:translateY(0);opacity:.65;filter:blur(0)}to{transform:translateY(100px);opacity:0;filter:blur(7px)}}.the-print>p{font-size:10px;letter-spacing:.04em;line-height:1.9;text-align:center;color:#77776e;max-width:610px}
@media(max-width:800px){.pane h1{font-size:16vw;top:27%}.behind-glass{width:120vw;height:120vw;top:27%;left:40%;filter:blur(17px)}.edge-note{right:27px;font-size:13px;top:110px}.pane-caption{left:30px;bottom:38px;font-size:11px}.x-mark{top:20px;right:12px}.scene{width:125vw;height:125vw;top:15vh;left:43%}.press-line{right:8vw;bottom:8vh;font-size:20px}.placard{min-height:85vh}.scroll-track{top:24vh;width:calc(174vh + 16vw);padding:0 8vw}.scroll-track>img{width:174vh;height:58vh}.scroll-captions{left:8vw;right:8vw}.scroll-captions p{font-size:15px}.scroll-preface{top:10vh}.print-art{margin-bottom:80px}}
@media(max-width:500px){.pane h1{top:22%;font-size:16vw;letter-spacing:0}.behind-glass{width:155vw;height:155vw;top:31%;left:34%;opacity:.6;filter:blur(15px)}.edge-note{right:24px;font-size:12px;letter-spacing:.08em;top:106px}.pane-caption{left:25px;bottom:35px;font-size:10px}.scene{width:146vw;height:146vw;top:20vh;left:45%}.press-line{left:25px;right:auto;bottom:8vh;font-size:18px;line-height:1.9}.placard{padding:120px 34px;min-height:85vh}.label-name{font-size:34px}dl{font-size:11px;letter-spacing:.015em;line-height:2}dl div{gap:5px}.notice{font-size:14px}.scroll-preface{left:25px;right:25px;font-size:12px}.scroll-track{top:31vh;width:calc(135vh + 16vw)}.scroll-track>img{width:135vh;height:45vh}.scroll-captions p{font-size:14px;transform:translateY(-8vh);padding-right:17%;height:150px}.scroll-captions p:last-child{padding-right:16%}.fogged-patch{min-height:85vh;padding:100px 30px}.contract-note>p:first-child{font-size:15px;line-height:2.2}.fog-oval{height:390px}#contract-address{font-size:10px;letter-spacing:.025em}.the-print{min-height:65vh;padding:40px 25px}.the-print>p{font-size:9px;line-height:2}.print-art{width:160px;height:160px;margin-bottom:75px}.scroll-still figure{margin-bottom:80px}.still-preface{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.press{height:100vh}.press-stage{position:relative}.js.motion .hand-scroll{height:auto}.js.motion .scroll-stage{display:none}.js.motion .scroll-still{display:block}.withdrawing-paw{display:none!important}}

/* The paper and frost have no hard cut edges. */
.scene{mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 88%,transparent);mask-composite:intersect}
.scroll-track>img,.scroll-still figure>div{mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 90%,transparent);mask-composite:intersect}
.placard,.fogged-patch{grid-template-columns:minmax(0,1fr);justify-items:center}
.wall-label{width:min(360px,100%);min-width:0}
.contract-note{width:min(410px,100%);min-width:0}
@media(min-width:501px) and (max-width:1100px){.press-line{left:34px;right:auto;top:7vh;bottom:auto;font-size:18px}}
.scroll-still figcaption{left:8%;right:auto;top:8%}