:root{--paper:#f5f5f3;--ink:#343635;--muted:#898b88;--line:#c7c8c4;--rail:300px}*{box-sizing:border-box}body{margin:0;background:#eeeeeb;color:var(--ink);font-family:'SFMono-Regular','Courier New','PingFang SC',monospace;font-weight:400}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:2px solid #257793;outline-offset:7px}button{border:0;background:none}.rail{width:var(--rail);position:fixed;inset:0 auto 0 0;border-right:1px solid #b8bab5;padding:20px;z-index:10}.receipt{background:#fafaf8;height:100%;max-height:960px;position:relative;padding:30px 22px 22px;display:flex;flex-direction:column;box-shadow:1px 2px 3px #00000008;overflow:hidden}.receipt:after,.thermal:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23777' filter='url(%23n)' opacity='.8' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.receipt nav{z-index:1;position:relative}.receipt nav a{display:block;font-size:16px;padding:10px 0;white-space:nowrap;letter-spacing:1px}.receipt nav a span{font-size:14px;margin-right:10px}.receipt nav .about-link{font-size:22px;display:table;padding:0 0 6px}.receipt nav a.active{ text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}.receipt nav a:hover{color:#111}.perforation{border-top:1px dashed #80847e;margin:23px 0 20px}.thermal{position:relative;flex:1;min-height:140px;display:flex;align-items:center;justify-content:center;margin:26px -6px 16px;overflow:hidden;filter:grayscale(1) contrast(1.25);background:#f1f1ed}.thermal img.portrait-small{height:100%;max-height:100%;width:100%;object-fit:contain;mix-blend-mode:multiply}.thermal:after{opacity:.38}.receipt-bottom{margin-top:auto}.barcode{height:34px;background:repeating-linear-gradient(90deg,#50534f 0 2px,transparent 2px 4px,#50534f 4px 5px,transparent 5px 8px,#50534f 8px 12px,transparent 12px 14px,#50534f 14px 15px,transparent 15px 19px,#50534f 19px 24px,transparent 24px 26px);width:100%}.serial{font-size:10px;letter-spacing:1px;text-align:center;margin-top:10px;color:#777}main{margin-left:var(--rail);min-height:100vh}.scene{min-height:100vh;display:grid;grid-template-columns:52% 48%;align-items:center;padding:35px 4%;animation:enter .5s ease}.portrait-stage{height:85vh;display:flex;justify-content:center}.portrait-stage img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.bio{padding:20px 6% 20px 0;max-width:600px}.bio h1{font-family:'PingFang SC',sans-serif;font-weight:400;font-size:clamp(40px,4vw,64px);letter-spacing:10px;margin:0 0 16px}.english{letter-spacing:2px;font-size:15px}.bio .description{margin-top:92px}.description{font-family:'PingFang SC',sans-serif;font-size:18px;line-height:2.1;letter-spacing:1px}.email{display:inline-block;font-size:17px;margin-top:58px;border-bottom:1px solid transparent;padding-bottom:5px}.email:hover{border-color:currentColor}.book-scene{grid-template-columns:53% 47%}.book-stage{perspective:1400px;height:78vh;min-height:440px;display:flex;align-items:center;justify-content:center}.book-button{width:min(91%,430px);aspect-ratio: .69;padding:0;transform:rotateY(-13deg) rotateZ(-2deg);transform-style:preserve-3d;transition:transform .5s,filter .5s;filter:drop-shadow(15px 27px 14px #0002);position:relative;text-align:left}.book-button:hover,.book-button:focus-visible{transform:translateY(-13px) rotateY(-22deg) rotateZ(-3deg);filter:drop-shadow(24px 36px 18px #0003)}.cover{width:100%;height:100%;position:relative;display:flex;flex-direction:column;border-left:25px solid #f2f0e5;background:var(--accent);box-shadow:inset 3px 0 4px #0003,1px 0 2px #0002;overflow:hidden}.cover:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0002,transparent 4%,#ffffff09 70%,#0001);pointer-events:none}.spine-label{position:absolute;z-index:2;left:5px;top:24px;writing-mode:vertical-rl;font-size:12px;color:#3d8f9b;letter-spacing:2px}.cover-heading{padding:30px 20px 18px;color:var(--coverink,#fff);position:relative;z-index:1}.cover-heading small{font-size:11px;letter-spacing:2px}.cover-heading h2{font-family:'PingFang SC',sans-serif;white-space:nowrap;font-size:clamp(23px,2.9vw,43px);letter-spacing:-1px;margin:13px 0 18px;font-weight:800}.cover-heading p{margin:0;font-size:15px;letter-spacing:2px;line-height:1.8}.cover-art{flex:1;min-height:0;width:100%;object-fit:cover;object-position:center;clip-path:polygon(0 3%,8% 1%,17% 0,28% 3%,39% 5%,50% 3%,62% 1%,72% 2%,84% 5%,94% 3%,100% 2%,100% 100%,0 100%);margin-top:-3px}.book-button:before{content:'';position:absolute;inset:6px -8px -5px 8px;background:repeating-linear-gradient(0deg,#fdfcf6 0 2px,#d7d7d0 2px 3px);transform:translateZ(-8px);box-shadow:2px 3px 3px #0002}.book-copy{padding-left:8%;max-width:520px}.book-copy h1{font-family:'PingFang SC',sans-serif;font-size:clamp(32px,3.2vw,52px);font-weight:400;margin:0 0 18px;letter-spacing:2px}.book-copy .description{margin:54px 0 28px}.companies{font-size:14px;line-height:2.2;letter-spacing:1px}.open-book{display:inline-block;margin-top:42px;border-bottom:1px solid #777;padding:0 0 8px;font-size:14px;letter-spacing:1px}.open-book:hover{color:#157d99;border-color:#157d99}.book-hint{position:absolute;bottom:-45px;left:0;width:100%;text-align:center;font-size:12px;letter-spacing:2px;opacity:0;transition:opacity .3s}.book-button:hover .book-hint{opacity:1}.mini-book{width:77%;aspect-ratio:.69;transform:perspective(800px) rotateY(-14deg) rotateZ(-4deg);box-shadow:9px 13px 9px #0002;position:relative}.mini-book .cover{border-left-width:12px}.mini-book .cover-heading{padding:16px 9px 9px}.mini-book .cover-heading h2{font-size:20px;letter-spacing:-1px;margin:8px 0}.mini-book .cover-heading p{font-size:9px;letter-spacing:0}.mini-book .cover-heading small{font-size:7px}.mini-book .spine-label{font-size:7px;left:2px;top:14px}dialog{border:0;padding:0;background:#f7f7f3;color:var(--ink);width:min(1040px,88vw);max-height:90vh;box-shadow:0 30px 100px #0005}dialog::backdrop{background:#21272280;backdrop-filter:blur(5px)}.reader-toolbar{position:sticky;top:0;background:#f7f7f3;display:flex;justify-content:space-between;align-items:center;padding:24px 36px;border-bottom:1px dashed #aaa;z-index:3;font-size:16px}.reader-toolbar button{font-size:14px;padding:8px}#reader-body{padding:35px 48px 55px}.chapter{padding:25px 0 35px;border-bottom:1px solid #d4d5d0;display:grid;grid-template-columns:32% 68%;gap:25px}.chapter:last-child{border-bottom:0}.chapter h2{font-size:25px;font-weight:400;margin:8px 0}.chapter .role{font-size:13px;color:#777;line-height:1.8}.chapter p{font-family:'PingFang SC',sans-serif;font-size:17px;line-height:1.9;margin:8px 0 20px}.chapter h3{font-size:14px;font-weight:400;color:#888;letter-spacing:2px;margin:20px 0 8px}.chapter .tag{font-size:12px;letter-spacing:2px;color:#888}.reader-note{font-size:13px;color:#777;margin-bottom:25px;line-height:1.8}@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(max-height:750px){.receipt{padding-top:22px}.thermal{margin-top:14px}.perforation{margin:17px 0 13px}.receipt nav a{padding:8px 0}.book-button{max-height:76vh;width:auto;height:70vh}.portrait-stage{height:87vh}.bio .description{margin-top:55px}.email{margin-top:35px}}@media(max-width:1150px){:root{--rail:250px}.rail{padding:15px}.receipt{padding-left:17px;padding-right:17px}.scene{padding:24px 3%;grid-template-columns:49% 51%}.bio h1{letter-spacing:5px}.description{font-size:16px}.book-copy{padding-left:7%}.book-copy .description{margin-top:32px}.cover-heading{padding:25px 12px 15px}.cover-heading h2{font-size:28px}.cover-heading p{font-size:12px}.book-button{max-width:90%}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Greeting: a single click brings the existing portrait and receipt into focus. */
.rail,#main{transition:filter 1.2s cubic-bezier(.2,.65,.2,1),opacity 1.2s ease}
.intro-pending body{overflow:hidden}
.intro-pending .rail,.intro-pending #main{filter:blur(25px);opacity:.65;pointer-events:none;user-select:none}
.intro-greeting{position:fixed;inset:0;z-index:100;width:100%;height:100%;padding:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:26px;color:#fff;background:radial-gradient(ellipse at center,rgba(57,72,86,.26),rgba(91,106,121,.13) 55%,rgba(255,255,255,.35));opacity:0;visibility:hidden;pointer-events:none;transition:opacity .65s ease,visibility .65s;font-family:'PingFang SC',sans-serif}
.intro-pending .intro-greeting{opacity:1;visibility:visible;pointer-events:auto;cursor:pointer}
.intro-hello{font-size:clamp(90px,11vw,180px);font-weight:300;letter-spacing:8px;line-height:1.2;padding-left:8px;text-shadow:0 2px 30px #4051620a}
.intro-invitation{font-size:16px;font-weight:400;letter-spacing:3px;line-height:2}
.intro-greeting:focus-visible{outline:0}.intro-greeting:focus-visible .intro-invitation{outline:1px solid #fff;outline-offset:10px}
.intro-greeting:hover .intro-invitation{transform:translateY(2px)}.intro-invitation{transition:transform .3s}
.bio h1:focus{outline:none}
@media(prefers-reduced-motion:reduce){.rail,#main,.intro-greeting,.intro-invitation{transition:none!important}}
/* Thermal receipt: warm thin stock, stippled ink and slightly uneven feed. */
.receipt{background:#f6f3e9;box-shadow:2px 7px 12px #38362b12,inset -3px 0 8px #9f997716;clip-path:polygon(0 0,100% 0,100% calc(100% - 5px),96% 100%,92% calc(100% - 4px),88% 100%,84% calc(100% - 4px),80% 100%,76% calc(100% - 4px),72% 100%,68% calc(100% - 4px),64% 100%,60% calc(100% - 4px),56% 100%,52% calc(100% - 4px),48% 100%,44% calc(100% - 4px),40% 100%,36% calc(100% - 4px),32% 100%,28% calc(100% - 4px),24% 100%,20% calc(100% - 4px),16% 100%,12% calc(100% - 4px),8% 100%,4% calc(100% - 4px),0 100%)}
.receipt:after{opacity:.065}.thermal{background:transparent;filter:none}.thermal:after{opacity:.18;background:repeating-linear-gradient(0deg,transparent 0 31px,#f6f3e9a0 31px 32px,transparent 32px 63px)}
.thermal .thermal-dots{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;mix-blend-mode:multiply}.thermal img[hidden]{display:none}
.receipt nav{color:#363831;text-shadow:.35px 0 #36383166}.receipt nav:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 19px,#f6f3e965 19px 19.6px,transparent 19.6px 32px)}
.intro-opening body{overflow:hidden}.intro-opening .rail{filter:none;opacity:1;transition:none}.intro-opening #main{filter:none;opacity:1;transition:none}
.intro-opening .scene{animation:none}
.intro-opening .receipt{animation:paper-feed .7s cubic-bezier(.2,.8,.3,1) both}
.intro-opening .receipt nav>*{animation:print-strip .34s steps(12,end) both;animation-delay:.3s}
.intro-opening .receipt nav>*:nth-child(2){animation-delay:.45s}.intro-opening .receipt nav>*:nth-child(3){animation-delay:.55s}.intro-opening .receipt nav>*:nth-child(4){animation-delay:.68s}.intro-opening .receipt nav>*:nth-child(5){animation-delay:.81s}
.intro-opening .thermal{animation:print-strip 1.15s steps(70,end) .85s both}
.intro-opening .receipt-bottom{animation:print-strip .35s steps(16,end) 2s both}
.intro-opening .portrait-stage{animation:portrait-arrives 1.25s cubic-bezier(.2,.65,.2,1) 1.25s both}
.intro-opening .bio>*{animation:bio-arrives .9s ease 1.65s both}
.intro-opening .bio>.english{animation-delay:1.8s}.intro-opening .bio>.description{animation-delay:1.95s}.intro-opening .bio>.email{animation-delay:2.15s}
@keyframes print-strip{from{clip-path:inset(0 0 100% 0);opacity:.3}to{clip-path:inset(0);opacity:1}}
@keyframes paper-feed{from{transform:translateY(-16px);opacity:.3}to{transform:translateY(0);opacity:1}}
@keyframes portrait-arrives{from{opacity:0;filter:blur(14px);transform:translateY(15px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@keyframes bio-arrives{from{opacity:0;filter:blur(5px);transform:translateY(9px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
/* Keep the about scene settled when the opening state is removed. */
#main .scene:has(.bio){animation:none}
/* Native silhouette clipping keeps the generated backdrop outside the paper. */
.portrait-stage{perspective:1300px;align-items:center}
.portrait-paper{height:96%;aspect-ratio:946/1662;transform:rotate(-1.2deg);transform-origin:50% 78%;filter:drop-shadow(2px 3px 0 #b8ae983f) drop-shadow(9px 15px 9px #302b242b);transition:transform .65s cubic-bezier(.2,.65,.2,1),filter .65s;will-change:transform}
.portrait-paper img{height:100%;width:100%;object-fit:fill;mix-blend-mode:normal;clip-path:polygon(49% 4.5%,53% 4.6%,57% 6.2%,59% 9%,60.3% 14%,62% 18%,63.6% 20.4%,66% 21.2%,69% 25%,72% 30%,73.4% 34%,73% 37%,71% 40.6%,69.5% 43%,68.5% 46%,69% 50%,69.5% 54%,68% 55.5%,66% 56%,68% 61%,70% 67%,71.5% 70.4%,71.5% 73%,73.6% 77.1%,71% 78%,66% 78.5%,61.2% 79%,59.5% 83%,58.5% 87%,59.5% 89%,62% 92%,63% 94.7%,60.5% 95.2%,55% 95.2%,52% 94.8%,50.5% 94%,46.5% 94%,43% 93.6%,40.6% 93%,40.7% 91%,42.2% 89%,44.7% 87%,43% 83.8%,42.3% 80%,38% 79.8%,32% 79.2%,30% 78.8%,31% 75%,32% 71%,29.8% 70.3%,30.4% 66%,31% 61%,31.5% 56%,29% 55.4%,27.8% 53.5%,28.6% 50%,28.6% 46%,30% 42%,28% 40%,26% 39%,25% 37%,24.5% 34%,26% 30%,28% 25%,30% 21.8%,34% 20.8%,36.8% 18%,38.5% 14%,40% 10%,42.5% 7%,46% 5%,49% 4.5%)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.portrait-paper:hover{transform:translateY(-7px) rotate(.3deg) rotateY(-4deg);filter:drop-shadow(2px 3px 0 #b8ae983f) drop-shadow(15px 22px 13px #302b2433)}}
@media(prefers-reduced-motion:reduce){.portrait-paper{transition:none;will-change:auto}}

.portrait-paper img{clip-path:none;mask-image:url("assets/portrait-silhouette.svg");mask-size:100% 100%;mask-repeat:no-repeat}