@font-face{font-family:WallySans;src:url('assets/body.woff2') format('woff2');font-display:swap;font-weight:100 900}
@font-face{font-family:WallyDisplay;src:url('assets/display.woff2') format('woff2');font-display:swap;font-weight:100 900}
:root{--paper:#faf7ef;--ink:#29241f;--ease:cubic-bezier(.22,1,.36,1);--travel:400svh;--cover-opacity:1;--scene-opacity:1;--flash:0;color-scheme:dark}
*{box-sizing:border-box}
html{scrollbar-width:thin;scrollbar-color:#8f6650 #1b120e;overflow-anchor:none}
body{margin:0;background:#1b120e;color:var(--paper);font-family:WallySans,Arial,sans-serif;overflow-x:clip}
button,a{-webkit-tap-highlight-color:transparent}
button,a{font:inherit;color:inherit}
button{cursor:pointer}
a{text-decoration:none}
:focus-visible{outline:2px solid #dfa35e;outline-offset:6px}
.cinema{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:var(--scene-opacity);background:#1b120e}
.camera{position:absolute;left:0;top:0;width:1672px;height:941px;transform-origin:0 0;will-change:transform}
.room,#rain,.window-light,.reflected-light{position:absolute;inset:0;width:100%;height:100%}
.room{display:block;image-rendering:auto}
#rain{pointer-events:none;image-rendering:pixelated}
.window-light{background:#bed6ff;clip-path:polygon(0 0,22.5% 0,23% 61.5%,0 63%);opacity:calc(var(--flash)*.33);mix-blend-mode:screen}
.reflected-light{background:linear-gradient(105deg,rgba(168,204,255,.7),rgba(168,204,255,.24) 53%,transparent 88%);opacity:calc(var(--flash)*.15);mix-blend-mode:screen}
.shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(20,12,8,.42),rgba(20,12,8,.06) 75%),linear-gradient(0deg,rgba(12,8,6,.48),transparent 30%,transparent 75%,rgba(12,8,6,.3));opacity:var(--cover-opacity)}
.entrance-controls{position:fixed;z-index:5;top:28px;left:36px;right:36px;display:flex;gap:24px;align-items:center;font-size:13px;opacity:var(--cover-opacity)}
.entrance-controls button{border:0;background:transparent;padding:8px 0;text-shadow:0 1px 8px #000}
.entrance-controls button:before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:#b2a399;margin:0 8px 2px 0}
.entrance-controls button[aria-pressed=true]:before{background:#efb970}
.skip{margin-left:auto;padding:8px 0;text-shadow:0 1px 8px #000}
.skip span{margin-left:12px}
.journey{height:calc(100svh + var(--travel));position:relative;pointer-events:none}
.cover{height:100svh;position:fixed;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:var(--cover-opacity)}
.cover-content{text-align:center;transform:translateY(-3svh)}
.wordmark{display:block;width:min(54vw,720px);height:auto;margin:auto;filter:invert(98%) sepia(10%) saturate(329%);animation:logo-arrives 2.6s var(--ease) backwards}
.cover-title{font-family:WallyDisplay,WallySans,sans-serif;font-size:clamp(24px,3.1vw,46px);font-weight:400;letter-spacing:-.025em;line-height:1.2;margin:12px 20px 0;animation:title-arrives 2s .55s var(--ease) backwards;text-shadow:0 2px 30px rgba(0,0,0,.7)}
.byline{font-size:14px;margin-top:24px;animation:title-arrives 1.8s 1s var(--ease) backwards;text-shadow:0 1px 10px #000}
.scroll-invitation{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:18px;font-size:12px;pointer-events:auto;opacity:var(--cover-opacity);animation:title-arrives 1.8s 1.3s var(--ease) backwards;text-shadow:0 1px 8px #000;white-space:nowrap}
.scroll-line{height:34px;width:1px;background:linear-gradient(#f5dec1,rgba(245,222,193,.1))}
.portal{position:fixed;inset:0;background:var(--paper);color:var(--ink);z-index:2;pointer-events:none;visibility:hidden;transform-origin:0 0;overflow:hidden;will-change:transform,opacity}
.portal-header{padding:27px 5vw;font-family:WallyDisplay,sans-serif;font-weight:700;font-size:24px;border-bottom:1px solid #ded8ce}
.portal-copy{margin:10svh auto 0;width:min(680px,80vw)}
.portal-copy>span{font-size:14px}
.portal-copy h2{font-family:WallyDisplay,sans-serif;font-size:clamp(50px,6vw,86px);font-weight:400;letter-spacing:-.035em;line-height:1.02;margin:26px 0 38px}
.ink-line{height:9px;background:#d8d1c5;margin:14px 0;width:98%}.ink-line.short{width:68%}
main{position:relative;z-index:3;background:var(--paper);color:var(--ink);min-height:100svh;margin-top:-100svh;opacity:0;visibility:hidden;outline:none}
.reader-header{display:flex;align-items:center;gap:26px;min-height:90px;padding:22px 5vw;border-bottom:1px solid #ded8ce;font-size:13px}
.reader-header img{width:92px;height:auto}.reader-header button{margin-left:auto;border:0;background:none;padding:10px 0}.reader-header button span{margin-left:10px}
article{max-width:740px;margin:auto;padding:90px 30px 100px}
.reading-note{font-family:WallySans,sans-serif;font-size:13px;margin:0 0 24px;color:#686057}
article h2{font-family:WallyDisplay,sans-serif;font-size:clamp(52px,6.4vw,90px);font-weight:400;line-height:1.02;letter-spacing:-.035em;margin:0 0 46px}
article p{font-family:Georgia,serif;font-size:21px;line-height:1.7;margin:28px 0}
article .reading-note{font-family:WallySans,sans-serif;font-size:13px;margin:0 0 24px}
article .lead{font-size:25px;line-height:1.55}
.chapter-end{font-size:13px;border-top:1px solid #ded8ce;margin-top:70px;padding-top:24px;color:#686057}
@keyframes logo-arrives{from{opacity:0;filter:invert(98%) sepia(10%) saturate(329%) blur(15px);transform:translateY(12px)}to{opacity:1;filter:invert(98%) sepia(10%) saturate(329%) blur(0);transform:translateY(0)}}
@keyframes title-arrives{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0)}}
@media(max-width:650px){:root{--travel:310svh}.entrance-controls{top:17px;left:19px;right:19px;gap:16px;font-size:11px}.skip{font-size:0}.skip span{font-size:19px;margin-left:0}.wordmark{width:82vw}.cover-title{font-size:27px;max-width:300px;margin:12px auto 0}.byline{font-size:12px;margin-top:18px}.cover-content{transform:translateY(-2svh)}.reader-header{min-height:76px;padding:20px;gap:16px}.reader-header img{width:70px}.reader-header>span{display:none}.reader-header button{font-size:12px}article{padding:64px 25px 75px}article h2{font-size:55px}article p{font-size:19px}article .lead{font-size:22px}.portal-copy{width:calc(100vw - 50px)}.portal-copy h2{font-size:55px}}
@media(prefers-reduced-motion:reduce){:root{--travel:100svh}.wordmark,.cover-title,.byline,.scroll-invitation{animation:none}#rain,.window-light,.reflected-light{display:none}.camera,.portal{will-change:auto}}

/* Small discoveries stay attached to the illustrated objects. */
#life{position:absolute;inset:0;width:1672px;height:941px;pointer-events:none}
.fireplace-dark{position:absolute;left:1238px;top:512px;width:129px;height:132px;background:url('assets/library-fire-off.png') -1238px -512px/1672px 941px;pointer-events:none;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.lamp-dimmer{position:absolute;left:951px;top:460px;width:99px;height:132px;background:rgba(25,16,11,.77);mix-blend-mode:multiply;opacity:0;mask-image:radial-gradient(ellipse,#000 15%,transparent 69%);transition:opacity .6s ease;pointer-events:none}
.lamp-dimmer.off{opacity:1}
/* A stationary mask below the laptop bezel keeps the screen and keys still.
   Only the small wrist/sleeve texture inside it moves. */
.typing-hand{position:absolute;left:821px;top:570px;width:23px;height:28px;overflow:hidden;clip-path:polygon(0 16%,30% 0,61% 0,87% 20%,100% 51%,78% 90%,35% 100%,9% 75%);mask-image:radial-gradient(ellipse,#000 30%,transparent 73%);pointer-events:none}
.typing-hand:before{content:'';position:absolute;inset:-3px;background:url('assets/library.png') -818px -567px/1672px 941px;transform-origin:35% 85%;animation:typing 2.8s linear infinite;animation-play-state:inherit}
@keyframes typing{0%,5%,17%,29%,41%,53%,65%,100%{transform:translateY(0)}8%,20%,32%,44%,56%{transform:translateY(-.65px)}11%,23%,35%,47%,59%{transform:translateY(.15px)}}
.hotspots{position:absolute;inset:0;pointer-events:none}
.hotspot{position:absolute;background:transparent;border:0;pointer-events:auto;cursor:pointer;border-radius:12px;color:#fbefdb}
.hotspot:after{content:attr(data-hint);position:absolute;left:50%;bottom:100%;transform:translate(-50%,4px);white-space:nowrap;font-size:12px;background:#2a1c15;padding:8px 13px;border-radius:4px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.hotspot:hover:after,.hotspot:focus-visible:after{opacity:1;transform:translate(-50%,-5px)}
.fireplace-hit{left:1230px;top:500px;width:147px;height:154px}.lamp-hit{left:948px;top:463px;width:92px;height:126px}.book-hit{left:235px;top:786px;width:252px;height:89px}
/* Both poses share a calibrated paw baseline on the chair cushion. */
.cat-shadow{position:absolute;left:342px;top:735px;width:79px;height:13px;background:radial-gradient(ellipse,#100c08 15%,transparent 73%);opacity:0;pointer-events:none;transform-origin:50% 50%;mix-blend-mode:multiply}
.cat{position:absolute;left:318px;top:636px;width:112px;height:112px;visibility:hidden;opacity:0;pointer-events:none;transform-origin:68% 95%;filter:brightness(.70) saturate(.70);will-change:transform}
.cat:before{content:'';position:absolute;inset:0;background:url('assets/cat-scroll-standing.png') center/100% 100% no-repeat}
.cat[data-pose=jumping]:before{background-image:url('assets/cat-scroll-jumping.png');transform:translate(-14px,5px)}
.cat[data-pose=standing]:before{transform:none}
#book-note{border:0;background:#f7e8ca;color:#34261c;max-width:min(480px,calc(100vw - 40px));padding:54px 45px 40px;box-shadow:0 18px 70px #0005;transform:rotate(-1deg)}
#book-note::backdrop{background:#170e09a6;backdrop-filter:blur(3px)}
.note-close{position:absolute;right:17px;top:12px;background:none;border:0;font-size:27px;line-height:1;padding:7px}
.note-label{font-size:12px;margin:0 0 28px}.note-thought{font-family:Georgia,serif;font-size:28px;line-height:1.4;margin:0 0 30px}.note-foot{font-size:13px;margin:0}
@media(prefers-reduced-motion:reduce){.typing-hand:before{animation:none}.cat{will-change:auto}}