@font-face{font-family:Pagkaki;src:url('assets/pagkaki.woff2') format('woff2');font-display:swap}@font-face{font-family:Schoolbell;src:url('assets/schoolbell.woff2') format('woff2');font-display:swap}
:root{--paper:#f9f8f3;--blue:#2f589c;--red:#ad302d;--ink:#573e36;--hand:'Kaiti SC','STKaiti','KaiTi',serif;--body:'PingFang SC','Microsoft YaHei',sans-serif}*{box-sizing:border-box}body{margin:0;background:#faf9f3 url('assets/grid.svg') repeat;background-size:100px;color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button{border:0;background:none}a:focus-visible,button:focus-visible{outline:2px dashed var(--blue);outline-offset:7px}::selection{background:#e9d0a4}img{max-width:100%;user-select:none}button img{pointer-events:none}[hidden]{display:none!important}.site{width:min(1440px,100%);margin:auto}.site-header{height:132px;width:84%;margin:auto;display:flex;align-items:center;gap:34px}.wordmark{font:76px/.82 Pagkaki,sans-serif;color:var(--blue);display:flex;flex-direction:column;transform:rotate(-3deg);margin-right:auto}.wordmark span{font:12px/1.8 var(--hand);letter-spacing:3px;padding-left:4px;padding-top:8px}.site-header nav{display:flex;gap:32px;align-items:center}.site-header nav a{position:relative;text-align:center;min-width:66px;transition:transform .25s}.site-header nav a:hover{transform:rotate(-5deg) translateY(-3px)}.site-header nav a:before{content:'';position:absolute;inset:2px -14px 13px;background:url('assets/circle.png') center/100% 100% no-repeat;opacity:0;transform:scale(.6) rotate(-7deg);transition:.25s}.site-header nav a[aria-current=page]:before{opacity:1;transform:scale(1) rotate(-7deg)}.nav-en{font:34px/1 Pagkaki,sans-serif;color:var(--blue);position:relative}.nav-cn{display:block;font:12px/1.3 var(--hand);margin-top:6px;color:var(--blue);letter-spacing:2px}.record{width:85px;height:85px;position:relative;padding:0;margin-left:10px;flex-shrink:0}.record img{width:82px;animation:spin 12s linear infinite}.record[aria-pressed=false] img{animation-play-state:paused}.record-arm{position:absolute;right:-12px;top:4px;width:13px;height:56px;border-right:4px solid #99978e;border-bottom:5px solid #aaa89e;border-radius:0 0 12px 0;transform:rotate(14deg);filter:drop-shadow(1px 2px 1px #7776)}.record-arm:after{content:'';width:6px;height:12px;background:#dfded5;position:absolute;bottom:-7px;left:-2px;transform:rotate(20deg)}@keyframes spin{to{transform:rotate(360deg)}}
.book{position:relative;width:100%;aspect-ratio:1888/971;isolation:isolate;perspective:1600px}.book-cover{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}.spread{position:absolute;inset:0}.half{position:absolute;top:9%;height:79%;width:33%;display:flex;flex-direction:column;align-items:center}.left{left:10%}.right{left:53%}.eyebrow{font:16px/1.3 Schoolbell,cursive;color:var(--blue);letter-spacing:2px}.home-title{text-align:center;margin-top:3%}h1{font:clamp(38px,4.5vw,67px)/1.25 var(--hand);font-weight:900;color:var(--red);margin:10px 0 11px;letter-spacing:5px;position:relative}.little-star{font:38px/1 Georgia;position:absolute;right:-40px;top:-5px;color:var(--blue);transform:rotate(15deg)}.role{font:clamp(14px,1.55vw,23px)/1.5 var(--hand);margin:0}.tiny-label{font-size:10px;letter-spacing:2px;display:block;margin-top:12px;opacity:.68}.polaroid-pair{position:relative;width:100%;height:57%;margin-top:10px}.polaroid{position:relative;background:url('assets/polaroid.png') center/100% 100% no-repeat;filter:drop-shadow(2px 6px 4px #392c2925);transition:transform .4s}.portrait,.moment{position:absolute;width:49%;aspect-ratio:501/607}.portrait{left:8%;top:5%;transform:rotate(-7deg);z-index:2}.moment{right:2%;top:24%;transform:rotate(7deg)}.portrait:hover{transform:rotate(-2deg) translateY(-8px)}.moment:hover{transform:rotate(2deg) translateY(-8px);z-index:3}.photo-blank{position:absolute;left:9%;right:10%;top:7%;height:74%;background:#e7ddd0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.photo-blank:after{content:'';position:absolute;inset:0;opacity:.25;background:repeating-linear-gradient(25deg,transparent 0 3px,#b5a48a22 3px 4px);pointer-events:none}.photo-blank.blue{background:#d9e1e3}.photo-blank svg{width:72%;height:68%;fill:none;stroke:#8b8376;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.photo-blank.blue svg{stroke:#7f959e}.photo-blank span{font:12px/1.5 var(--hand);color:#736d66}.polaroid-caption{position:absolute;bottom:7%;left:8%;width:82%;font:clamp(10px,1.2vw,17px)/1.3 var(--hand);text-align:center}.home-intro{text-align:center;margin-top:3%}.home-intro h2{font:clamp(17px,1.9vw,28px)/1.7 var(--hand);margin:0 0 13px;font-weight:600}.home-intro p{font:clamp(12px,1.18vw,17px)/1.9 var(--hand);margin:0}.text-link{display:inline-block;color:var(--blue);font:14px/1.5 var(--hand);margin-top:13px;border-bottom:1px solid #2f589c65}.text-link span{display:inline-block;transition:transform .2s}.text-link:hover span{transform:translate(3px,-3px)}.tv{position:relative;width:65%;aspect-ratio:641/855;margin-top:2%;padding:0;transition:transform .4s;max-height:66%}.tv img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.tv:hover{transform:rotate(-2deg) scale(1.025)}.tv-screen{position:absolute;left:8%;top:10%;width:64%;height:40%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;font-family:var(--hand);color:#687570;background:radial-gradient(ellipse,#e7ece6,#d5ddd7);border-radius:16%;overflow:hidden}.tv-screen:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 3px,#536d6a10 3px 4px);pointer-events:none}.play-symbol{font:34px/1 var(--body);color:var(--red);transition:transform .2s}.tv:hover .play-symbol{transform:scale(1.2)}.tv-screen strong{font-size:15px}.tv-screen small{font:10px/1.4 var(--body);opacity:.7}.page-turn{position:absolute;right:1.8%;top:45%;width:9%;height:13%;padding:10px;transition:transform .2s}.page-turn:hover{transform:translateX(6px)}.page-turn svg{width:100%;fill:none;stroke:var(--red);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(2px 2px 0 #471c1c44)}.book-bottom{width:82%;display:flex;justify-content:space-between;margin:13px auto 5px;font:12px/1.5 var(--hand);color:var(--blue)}.book-bottom button{padding:6px 0}.book-bottom button:hover{text-decoration:underline}.book-bottom #page-indicator{font:16px/1.8 Schoolbell;letter-spacing:2px}footer{width:80%;margin:20px auto 30px;display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--blue)}.footer-center{font-family:var(--hand);font-size:12px;opacity:.7}.section-title{text-align:center;width:100%;margin-top:2%}.section-title h2,.work-title h2{font:clamp(22px,2.5vw,35px)/1.5 var(--hand);font-weight:800;color:var(--red);margin:10px 0 15px}.about-note{font:clamp(13px,1.32vw,19px)/1.9 var(--hand);width:92%;margin-top:6%}.about-note p{margin:0 0 18px}.interest-tags{display:flex;gap:10px;margin:10px 0}.interest-tags span{padding:5px 13px;background:#ded5be6b;font:14px/1.4 var(--hand);transform:rotate(-4deg)}.interest-tags span:nth-child(2n){transform:rotate(4deg);background:#cad8df70}.margin-note{font:20px/1.5 Schoolbell;color:var(--red);align-self:flex-end;transform:rotate(-6deg);margin-top:auto}.about-photo{width:46%;aspect-ratio:501/607;transform:rotate(5deg);margin:2% 0 5%}.about-photo:hover{transform:rotate(0deg)}.qualities{width:91%}.qualities>div{position:relative;padding:10px 0 10px 43px;border-bottom:1px dashed #b9ad9870}.quality-number{position:absolute;left:0;top:14px;font:25px/1 Schoolbell;color:var(--red)}.qualities h3{font:25px/1.3 var(--hand);margin:0 0 7px;color:var(--red)}.qualities p{font:15px/1.6 var(--hand);margin:0}
.folder-tabs{position:absolute;top:3%;left:10%;width:77%;height:10%;display:flex;align-items:end;justify-content:space-between;z-index:2}.folder-tabs button{height:95%;width:24%;background:url('assets/folder-tab.png') center bottom/100% 100% no-repeat;padding:12px 0 2px;font:19px/1.1 var(--hand);transition:height .2s,color .2s;color:#867f70}.folder-tabs button[aria-selected=true]{height:112%;color:var(--red);font-weight:bold}.folder-paper{position:absolute;top:12%;bottom:5%;left:7.8%;width:80%;background:#f9f8f3;box-shadow:0 -2px 5px #776f6233;display:flex;flex-direction:column;padding:3% 4%;border-radius:2px}.work-title{text-align:center}.work-title h2{margin:4px 0}.work-title p{font:14px/1.5 var(--hand);margin:5px 0 20px}.project-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:2%;align-items:start}.project{padding:0;text-align:left;transition:transform .3s;min-width:0}.project:nth-child(odd){transform:rotate(-2deg)}.project:nth-child(even){transform:rotate(2deg)}.project:hover{transform:rotate(0deg) translateY(-9px)}.project-visual{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;aspect-ratio:.85;border:8px solid #f2efe6;border-bottom-width:22px;box-shadow:2px 4px 8px #4c3c3126}.rust{background:#dfc9bc}.sage{background:#d3d9cc}.denim{background:#cad7dc}.ochre{background:#e5d8b9}.project-visual svg{width:90%;fill:none;stroke:#665951;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;opacity:.7}.project-number{position:absolute;left:10px;top:7px;font:20px/1.2 Schoolbell;color:#66595177}.waiting{font:12px/1.5 var(--hand);color:#5f584f}.project-title{font:18px/1.5 var(--hand);display:flex;justify-content:space-between;margin-top:14px}.project-title>span{color:var(--red)}.project-subtitle{display:block;font:10px/1.7 var(--body);opacity:.6;margin-top:5px}.work-footnote{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:15px}.work-footnote>span{font:19px/1.5 Schoolbell;color:var(--red);transform:rotate(-3deg)}.work-footnote small{font:11px/1.5 var(--hand);opacity:.65}
.contact-intro{font:23px/1.8 var(--hand);text-align:center;margin:4% 0 9%}.contact-note{background:#e8e0c9;width:82%;padding:25px 30px 20px;transform:rotate(-5deg);box-shadow:3px 5px 5px #4d3d2520;position:relative}.tape{width:38%;height:24px;background:#c4a67780;position:absolute;top:-13px;left:30%;transform:rotate(3deg);clip-path:polygon(2% 2%,98% 0,100% 100%,0 93%)}.note-eyebrow{display:block;font:14px/1.5 var(--hand)}.contact-note strong{display:block;font:33px/1.7 var(--hand);color:var(--red);margin:14px 0}.note-sign{font:15px/1.5 var(--hand);display:block;text-align:right}.letter{position:relative;width:91%;padding:9% 8%;margin-top:2%;min-height:88%;background:#eee7d9;background-image:repeating-linear-gradient(0deg,transparent 0 29px,#c5bca326 29px 30px);transform:rotate(3deg);box-shadow:3px 5px 9px #67594026;clip-path:polygon(0 1%,99% 0,100% 98%,96% 100%,90% 98.5%,84% 100%,78% 98.5%,72% 100%,66% 98.5%,60% 100%,54% 98.5%,48% 100%,42% 98.5%,36% 100%,30% 98.5%,24% 100%,18% 98.5%,12% 100%,6% 98.5%,0 100%)}.letter-kicker{font:14px/1.5 Schoolbell;letter-spacing:2px;color:var(--blue)}.letter h3{font:28px/1.4 var(--hand);color:var(--red);margin:25px 0 20px}.letter p{font:16px/1.9 var(--hand);margin:0 0 22px}.phone-label{display:block;font:12px/1.5 var(--body);color:#857461}.phone-number{display:block;font:clamp(21px,2.3vw,33px)/1.8 Schoolbell;color:var(--blue);white-space:nowrap}.copy-phone{border-bottom:1px solid #958369;padding:5px 0;font:14px/1.5 var(--hand)}.copy-phone span{color:var(--red);margin-left:10px}.letter-sign{display:block;font:45px/1.3 Pagkaki;color:var(--blue);margin-top:30px;transform:rotate(-8deg)}.letter-stamp{position:absolute;right:10%;bottom:10%;border:3px double var(--red);border-radius:50%;color:var(--red);padding:10px;font:14px/1.2 var(--hand);transform:rotate(-15deg)}
.appear{animation:arrive .7s both}.appear:nth-child(2){animation-delay:.07s}.appear:nth-child(3){animation-delay:.14s}.appear:nth-child(4){animation-delay:.2s}@keyframes arrive{from{opacity:0;translate:0 15px}to{opacity:1;translate:0 0}}.flip-sheet{display:none;position:absolute;left:48%;width:39%;top:3%;height:93%;background:linear-gradient(90deg,#d9d5ca,#faf9f5 12%,#f5f2e9);transform-origin:left center;z-index:5;box-shadow:4px 8px 20px #342a2733;pointer-events:none;backface-visibility:hidden}.turning .flip-sheet{display:block;animation:page-flip .65s cubic-bezier(.45,0,.25,1) both}@keyframes page-flip{0%{transform:rotateY(0deg);opacity:0}10%{opacity:1}80%{opacity:1}100%{transform:rotateY(-170deg);opacity:0}}.turning .book-cover{animation:book-nudge .65s ease}@keyframes book-nudge{50%{transform:rotate(-.7deg)}}
.skip-link{position:fixed;top:-100px;background:white;z-index:50;padding:10px}.skip-link:focus{top:10px}dialog{border:none;background:var(--paper);padding:45px;width:min(490px,calc(100% - 32px));box-shadow:0 10px 70px #1c160a55;color:var(--ink);transform:rotate(-1deg)}dialog::backdrop{background:#211c166b;backdrop-filter:blur(3px)}dialog h2{font:32px/1.3 var(--hand);color:var(--red);margin:15px 0 20px}dialog p{font:16px/1.9 var(--hand)}.close-dialog{position:absolute;right:10px;top:5px;font-size:30px}.dialog-done{font:16px/1.5 var(--hand);color:var(--blue);margin-top:20px;border-bottom:1px solid}.placeholder-fields{display:grid;gap:9px;margin-top:20px}.placeholder-fields span{padding:10px;border-bottom:1px dashed #ccc;font-size:13px;color:#8e8575}#toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,20px);background:#304d72;color:white;padding:12px 22px;font:14px/1.5 var(--body);opacity:0;transition:.2s;pointer-events:none;z-index:20}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:1440px){h1{font-size:67px}.role{font-size:23px}.home-intro h2{font-size:28px}.home-intro p{font-size:17px}.section-title h2,.work-title h2{font-size:35px}.about-note{font-size:19px}.polaroid-caption{font-size:17px}.phone-number{font-size:33px}}
@media(min-width:761px) and (max-width:1100px){.site-header{height:112px}.wordmark{font-size:60px}.site-header nav{gap:20px}.nav-en{font-size:28px}.record{width:65px;height:65px}.record img{width:64px}.home-title{margin-top:0}.eyebrow{font-size:12px}.tiny-label{font-size:8px}.home-intro{margin-top:0}.home-intro h2{margin-bottom:5px}.home-intro p{line-height:1.6}.text-link{font-size:12px;margin-top:8px}.tv{margin-top:2%;width:63%}.about-note{margin-top:0;line-height:1.7}.about-note p{margin-bottom:10px}.interest-tags{margin:0;gap:5px}.interest-tags span{font-size:11px}.qualities h3{font-size:20px}.qualities p{font-size:12px}.qualities>div{padding-top:6px;padding-bottom:6px}.about-photo{width:42%}.project-grid{gap:12px;margin-top:0}.work-title p{font-size:12px;margin-bottom:10px}.project-title{font-size:14px;margin-top:10px}.project-subtitle{font-size:8px}.folder-tabs button{font-size:16px}.project-visual{border-width:5px;border-bottom-width:14px}.waiting{font-size:10px}.work-footnote{padding-top:8px}.work-footnote>span{font-size:15px}.contact-intro{font-size:17px}.contact-note{padding:18px}.contact-note strong{font-size:26px}.letter{padding:7%}.letter h3{font-size:22px;margin:16px 0 13px}.letter p{font-size:12px;margin-bottom:10px}.letter-sign{margin-top:10px;font-size:34px}.letter-stamp{font-size:10px;padding:7px}.tv-screen strong{font-size:12px}.tv-screen small{font-size:8px}.play-symbol{font-size:24px}}
@media(max-width:760px){.site{padding:0 13px}.site-header{height:150px;width:94%;display:grid;grid-template-columns:1fr 65px;gap:8px;padding-top:14px;padding-bottom:17px}.wordmark{font-size:54px;grid-row:1}.wordmark span{font-size:10px;letter-spacing:2px;padding-top:6px}.record{grid-column:2;grid-row:1;width:57px;height:57px;margin-left:0}.record img{width:57px}.record-arm{height:39px;right:-4px}.site-header nav{grid-row:2;grid-column:1/3;justify-content:space-between;gap:12px;padding:0 10px}.nav-en{font-size:29px}.nav-cn{font-size:11px;margin-top:3px}.site-header nav a:before{inset:0 -7px 12px}.book{aspect-ratio:auto;background:#33332f;border-radius:12px 8px 10px 12px;padding:13px 19px 14px 14px;box-shadow:inset 0 0 0 4px #5c5b52,3px 6px 10px #30251825}.book:before{content:'';position:absolute;inset:6px;border:2px dashed #b4ad99;border-radius:7px;z-index:-1}.book-cover{display:none}.spread{position:relative;background:var(--paper);min-height:600px;box-shadow:2px 0 2px #cbc6b9;border-radius:1px;overflow:hidden}.half{position:relative;left:auto;top:auto;width:100%;height:auto;padding:30px 22px}.home-left{padding-bottom:15px}.home-right{padding-top:30px;border-top:1px dashed #c5bcaa}.home-title{margin:0}.eyebrow{font-size:13px}h1{font-size:48px;margin:10px 0 9px}.little-star{font-size:26px;right:-27px;top:-3px}.role{font-size:21px}.tiny-label{font-size:9px;margin-top:8px}.polaroid-pair{height:295px;width:100%;max-width:335px;margin-top:28px}.portrait,.moment{width:54%}.portrait{left:0;top:0}.moment{right:0;top:25%}.polaroid-caption{font-size:13px}.photo-blank span{font-size:11px}.home-intro h2{font-size:23px}.home-intro p{font-size:16px}.text-link{font-size:14px}.tv{width:240px;max-width:90%;height:auto;max-height:none;margin:18px auto -2px}.tv-screen strong{font-size:14px}.tv-screen small{font-size:10px}.mobile-binding{position:absolute;right:-5px;top:20px;bottom:20px;width:37px;background:url('assets/rings.avif') right top/100% auto repeat-y;z-index:8;pointer-events:none}.page-turn{display:none}.book-bottom{width:92%;margin-top:14px}footer{width:92%;margin:18px auto 25px;font-size:9px;gap:10px}.footer-center{display:none}.section-title h2,.work-title h2{font-size:29px}.about-note{font-size:18px;line-height:1.9;margin-top:13px;width:100%}.about-note p{margin-bottom:17px}.interest-tags{gap:7px;flex-wrap:wrap}.interest-tags span{font-size:14px;padding:5px 12px}.margin-note{margin-top:18px;font-size:19px}.about-right{padding-top:15px}.about-photo{width:63%;max-width:220px;margin-bottom:28px}.qualities{width:100%;padding-bottom:20px}.qualities h3{font-size:25px}.qualities p{font-size:15px}.contact-intro{font-size:21px;margin:8px 0 35px}.contact-note{width:94%;padding:25px}.contact-note strong{font-size:31px}.contact-right{padding-top:15px;padding-bottom:45px}.letter{width:98%;min-height:440px;padding:28px 23px}.letter h3{font-size:27px}.letter p{font-size:16px}.phone-number{font-size:30px}.letter-sign{margin-top:25px}.letter-stamp{bottom:30px}.work{background:none;overflow:visible;padding-top:53px}.folder-tabs{top:5px;left:1%;width:98%;height:55px;gap:0}.folder-tabs button{font-size:12px;height:49px;padding:10px 0 0}.folder-tabs button[aria-selected=true]{height:57px}.folder-paper{position:relative;left:auto;top:auto;bottom:auto;width:100%;padding:30px 16px;min-height:540px}.work-title p{font-size:13px;margin-bottom:20px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 13px;margin:5px 0 35px}.project-visual{border-width:5px;border-bottom-width:14px}.project-title{font-size:15px;margin-top:10px}.project-subtitle{font-size:9px;line-height:1.6}.waiting{font-size:11px}.work-footnote{gap:15px}.work-footnote>span{font-size:17px}.work-footnote small{font-size:10px;max-width:110px}.flip-sheet{left:7%;width:88%;height:96%;top:2%}.turning .flip-sheet{animation-duration:.5s}dialog{padding:36px 25px}dialog h2{font-size:28px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.flip-sheet{display:none!important}}
/* Fine paper grid and exact screen placement inside the television cutout. */
body{background-image:linear-gradient(#faf9f3f0,#faf9f3f0),url('assets/grid.svg');background-size:auto,36px}
.tv-screen{left:10%;top:8%;width:58%;height:31%;border-radius:15%}
.tv{flex-shrink:0;max-height:none;width:58%}.tv-screen{height:37%}
@media(max-width:760px){.tv{width:240px}}
/* V2: five chapters, playful Chinese headings, readable clean body type. */
@font-face{font-family:ChineseNote;src:url('assets/zcool-kuaile.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--hand:ChineseNote,'PingFang SC','Microsoft YaHei',sans-serif}
.site-header{width:84%;gap:25px}.site-header nav{gap:23px}.nav-en{font-size:31px}.nav-cn{font:12px/1.5 var(--body);letter-spacing:0;margin-top:7px;white-space:nowrap}.nav-cn i{font:12px/1.5 Schoolbell;font-style:normal;opacity:.65;margin-right:3px}.site-header nav a{min-width:65px}.wordmark{font-size:70px}.wordmark span{font:12px/1.7 var(--hand);letter-spacing:2px;padding-top:10px}.record{width:75px;height:75px;margin-left:0}.record img{width:75px}
h1{font-weight:400;font-size:clamp(40px,4.7vw,68px);letter-spacing:4px}.section-title h2,.work-title h2{font-weight:400;line-height:1.35;margin-bottom:10px}.home-intro h2{font-weight:400;line-height:1.65;letter-spacing:1px}.home-intro p,.about-note,.qualities p,.contact-intro,.letter p,dialog p{font-family:var(--body);font-weight:400}.home-intro p{font-size:clamp(12px,1.1vw,16px);line-height:1.9}.role{font-family:var(--body);font-size:clamp(15px,1.4vw,20px);font-weight:500}.tiny-label{font-size:11px;letter-spacing:1.3px}.photo-blank span{font-family:var(--body);font-size:11px}.polaroid-caption{font-size:clamp(12px,1.1vw,16px)}.text-link{font-family:var(--body);font-size:13px}.section-caption{font:12px/1.8 var(--body);color:#83796b;margin:0;letter-spacing:1px}.about-note{font-size:15px;line-height:1.9;margin-top:5%;width:92%}.about-note p{margin:24px 0 10px}.bio-facts{margin:0}.bio-facts>div{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px dashed #b8ac9266}.bio-facts dt{font-size:12px;color:#8c806f}.bio-facts dd{margin:0;font-size:16px;font-weight:500}.career-note{position:relative;background:#e9e2cf;padding:22px 25px;width:91%;transform:rotate(-3deg);box-shadow:2px 4px 5px #51432f15;margin-top:18px}.career-note h3{font:25px/1.4 var(--hand);color:var(--red);margin:12px 0}.career-note p{font:13px/1.8 var(--body);margin:0}.about-photo{width:43%;margin-top:1%;margin-bottom:2%}.note-eyebrow{font:12px/1.5 var(--body);color:#7f725e}.interest-tags span{font-size:15px}.project-title{font-size:19px}.project-subtitle{font-size:11px;line-height:1.8}.work-title p,.work-footnote small{font-family:var(--body);font-size:12px}.work-footnote small{font-size:11px}.folder-tabs button{font-weight:400}.folder-tabs button[aria-selected=true]{font-weight:400}.waiting{font:11px/1.5 var(--body)}
.skills-left .section-title,.strengths-left .section-title{margin-top:2%}.skills-right{padding-top:2%}.skill-sheet{position:relative;width:94%;margin-top:35px;background:#eee7d3;padding:30px 26px;transform:rotate(-3deg);box-shadow:3px 5px 7px #55492c1c;min-height:62%}.sheet-heading{display:flex;gap:13px;align-items:center}.sheet-heading h3{font:28px/1.3 var(--hand);font-weight:400;color:var(--red);margin:0}.note-index{font:26px/1 Schoolbell;color:var(--red)}.pending-label{font:10px/1.6 var(--body);color:#8d806c;border:1px solid #bbaf986e;padding:2px 7px;white-space:nowrap}.sheet-heading .pending-label{margin-left:auto}.skill-sheet p,.skill-note p{font:13px/1.8 var(--body);margin:22px 0 4px;color:#7f7463}.writing-lines{height:120px;background:repeating-linear-gradient(transparent 0 38px,#a28b6540 38px 39px)}.hand-note{display:block;font:18px/1.5 Schoolbell;color:var(--blue);margin-top:15px;transform:rotate(-3deg)}.skill-note{width:96%;padding:27px 25px;position:relative;box-shadow:3px 5px 6px #51432f12}.tools-note{background:#dbe4e2;transform:rotate(3deg);margin-top:10px}.method-note{background:#ede5d7;transform:rotate(-2deg);margin-top:32px}.tool-slots{display:flex;gap:13px;margin-top:20px}.tool-slots span{display:flex;width:52px;height:48px;justify-content:center;align-items:center;border:1px dashed #7d969483;border-radius:7px;color:#809796;font-size:22px}.method-path{display:flex;align-items:center;justify-content:space-between;margin-top:28px;gap:8px}.method-path span{height:33px;width:65px;border:1px dashed #a9937388;border-radius:50%}.method-path i{font:23px/1 Schoolbell;color:var(--red)}.skills-right .margin-note{margin-top:22px;font-size:19px}.strength-card{position:relative;width:95%;padding:30px 28px;box-shadow:3px 6px 6px #57493218}.strength-card .quality-number{position:static;font:25px/1 Schoolbell;display:block}.strength-card h3{font:38px/1.4 var(--hand);color:var(--red);font-weight:400;margin:10px 0 18px}.strength-card p{font:15px/2 var(--body);margin:0}.perception{background:#e7dfc8;transform:rotate(-4deg);margin-top:28px}.empathy{background:#dce3e5;transform:rotate(3deg);margin-top:20px}.strength-card .hand-note{margin-top:22px}.value-note{width:91%;margin-top:28px;padding-left:18px;border-left:2px solid #b742344a}.value-note h3{font:23px/1.5 var(--hand);font-weight:400;color:var(--red);margin:8px 0}.value-note p{font:13px/1.8 var(--body);margin:8px 0 12px}.contact-intro{font-size:20px}.contact-note strong{font-weight:400}.letter{padding:7% 8%;min-height:92%}.letter h3{font-size:28px;margin:20px 0 15px;font-weight:400}.letter p{font-size:14px;margin-bottom:15px}.letter-sign{font-family:Pagkaki;margin-top:20px;font-size:38px}.contact-extras{margin-top:19px;padding-top:10px;border-top:1px solid #ac977748;display:flex;flex-direction:column;gap:7px}.contact-extras>div{display:flex;align-items:center;justify-content:space-between;font:12px/1.7 var(--body);color:#706454}.contact-extras small{font-size:10px;color:#9b8e7b}.letter-stamp{bottom:6%;font-size:14px}.copy-phone{font-family:var(--body);font-size:12px}.book-bottom{font-family:var(--body)}.book-bottom #page-indicator{font-family:Schoolbell,var(--body);font-size:13px}footer .footer-center{font-family:var(--body);font-size:11px}.tv-screen strong{font-weight:400}.dialog-done{font-family:var(--body);font-size:14px}
@media(min-width:761px) and (max-width:1100px){.site-header{width:87%;gap:17px}.site-header nav{gap:14px}.nav-en{font-size:25px}.nav-cn{font-size:10px}.nav-cn i{display:none}.wordmark{font-size:52px}.wordmark span{font-size:10px;letter-spacing:0}.record{width:57px;height:57px}.record img{width:57px}.site-header nav a{min-width:50px}.about-note{font-size:12px;margin-top:8px}.about-note p{margin:12px 0 8px}.bio-facts>div{padding:5px 0}.bio-facts dd{font-size:13px}.career-note{margin-top:12px;padding:16px}.career-note h3{font-size:19px;margin:8px 0}.career-note p{font-size:11px}.skill-sheet{margin-top:20px;padding:19px 18px;min-height:57%}.sheet-heading{gap:8px}.sheet-heading h3{font-size:22px}.note-index{font-size:20px}.pending-label{font-size:9px;padding:1px 4px}.skill-sheet p,.skill-note p{font-size:11px;margin-top:13px}.writing-lines{height:87px;background-size:auto 29px}.skill-note{padding:19px 18px}.tools-note{margin-top:3px}.method-note{margin-top:22px}.tool-slots{margin-top:14px;gap:8px}.tool-slots span{width:40px;height:36px}.method-path{margin-top:15px}.method-path span{width:45px;height:26px}.hand-note{font-size:15px}.skills-right .margin-note{font-size:16px;margin-top:14px}.strength-card{padding:19px;margin-top:16px}.strength-card h3{font-size:29px;margin:8px 0 12px}.strength-card p{font-size:12px}.strength-card .hand-note{margin-top:14px}.value-note{margin-top:15px}.value-note h3{font-size:17px}.value-note p{font-size:11px}.project-title{font-size:16px}.project-subtitle{font-size:9px}.letter h3{font-size:22px;margin:14px 0 10px}.letter p{font-size:11px;margin-bottom:8px}.contact-extras{margin-top:10px;padding-top:6px;gap:3px}.contact-extras>div{font-size:10px}.contact-extras small{font-size:9px}.letter-sign{font-size:30px;margin-top:9px}.contact-intro{font-size:17px}.section-caption{font-size:10px}.work-title p{font-size:11px}}
@media(max-width:760px){.site-header{width:96%;height:163px;gap:10px;padding-top:16px;padding-bottom:20px}.wordmark{font-size:54px}.wordmark span{font-size:11px;letter-spacing:1px;padding-top:5px}.record{width:57px;height:57px}.record img{width:57px}.site-header nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:0}.site-header nav a{min-width:0}.nav-en{font-size:24px}.nav-cn{font-size:10px;letter-spacing:0;margin-top:7px}.nav-cn i{display:none}.site-header nav a:before{inset:0 -4px 13px}.half{padding-left:23px;padding-right:23px}h1{font-size:51px;font-weight:400}.role{font-size:17px}.tiny-label{font-size:10px}.home-intro h2{font-size:25px;letter-spacing:0}.home-intro p{font-size:14px}.polaroid-caption{font-size:13px}.section-title h2,.work-title h2{font-size:32px}.section-caption{font-size:12px}.about-note{font-size:14px;margin-top:25px;width:100%}.bio-facts>div{padding:10px 0}.bio-facts dd{font-size:16px}.about-note p{margin:23px 0 12px;line-height:2}.about-photo{width:65%;margin:5px 0 15px}.career-note{width:96%;margin:20px 0 20px;padding:24px 20px}.career-note h3{font-size:25px}.career-note p{font-size:13px}.skills-left{padding-bottom:15px}.skill-sheet{width:100%;min-height:290px;margin:35px 0 10px;padding:25px 21px}.writing-lines{height:115px}.skills-right{padding-top:16px;padding-bottom:40px}.skill-note{width:100%;padding:25px 21px}.tools-note{margin-top:10px}.method-note{margin-top:28px}.sheet-heading{gap:12px}.sheet-heading h3{font-size:28px}.note-index{font-size:24px}.skill-sheet p,.skill-note p{font-size:12px}.pending-label{font-size:9px}.strengths-left{padding-bottom:15px}.strength-card{width:100%;padding:25px 22px;margin-top:25px}.strength-card h3{font-size:35px}.strength-card p{font-size:13px;line-height:2}.strengths-right{padding-top:10px;padding-bottom:40px}.value-note{margin-top:30px;width:100%;padding-left:14px}.value-note h3{font-size:21px}.value-note p{font-size:13px}.contact-intro{font-size:18px;line-height:1.9;margin-top:18px}.letter{min-height:520px;padding:28px 20px}.letter h3{font-size:28px}.letter p{font-size:13px}.letter-sign{font-size:38px;margin-top:22px}.contact-extras{gap:9px;margin-top:25px}.contact-extras>div{font-size:12px}.letter-stamp{bottom:5%}.project-title{font-size:17px}.project-subtitle{font-size:9px}.folder-tabs button{font-size:13px}.work-title p{font-size:12px}.work-footnote small{font-size:10px}.book-bottom{font-size:11px}}
@media(max-width:380px){.nav-en{font-size:21px}.site-header nav{gap:5px}.nav-cn{font-size:9px}.sheet-heading{gap:7px}.sheet-heading h3{font-size:24px}}

/* Keep the remaining footer note centered after removing the copyright. */
footer{display:grid;grid-template-columns:1fr auto 1fr}footer .footer-center{grid-column:2}footer>span:last-child{grid-column:3;justify-self:end}
@media(max-width:760px){footer{display:flex;justify-content:flex-end}}

/* Contact: proportions measured against the reference's 1888 × 971 book. */
.contact{container-type:inline-size;overflow:hidden;clip-path:inset(0 0 1.8% 0)}
.contact-reference-left,.contact-reference-right{position:absolute;inset:0;pointer-events:none}
.contact-handset{position:absolute;left:3.71%;top:3.01%;width:20.75%;height:37.1%;object-fit:fill}
.contact-copy{position:absolute;left:16.35%;top:17.25%;width:23%;color:#440308}
.contact-copy h2{margin:0 0 1cqw;font:2.385cqw/.9 Pagkaki,sans-serif;color:#c51b25;font-weight:400}
.contact-copy p{font:1.13cqw/1.6 var(--body);margin:0 0 .45cqw}
.contact-collage{position:absolute;left:12.156%;top:38.904%;width:25.786%;height:46.517%;object-fit:fill}
.contact-glasses{position:absolute;left:28.91%;top:37.53%;width:11.26%;height:20.21%;transform:rotate(12deg);object-fit:fill;z-index:2}
.contact-socials{position:absolute;left:16.15%;top:50.61%;width:20.37%;height:14.73%;display:flex;gap:.85cqw;pointer-events:auto}
.contact-social{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1cqw;padding:0;color:#4d0000;font:1.3cqw/1.3 Schoolbell,var(--hand);cursor:pointer}
.contact-social svg{width:1.65cqw;height:1.65cqw}
.contact-social:hover{color:#9b2525}
.contact-accounts{position:absolute;left:17.3%;top:65.8%;width:18%;margin:0;text-align:center;color:#4d0000;font:.92cqw/1.5 var(--body)}
.contact-typewriter{position:absolute;left:51.016%;top:12.607%;width:34.085%;aspect-ratio:645/926;pointer-events:auto}
.contact-typewriter>img{width:100%;height:100%;display:block}
.contact-phone-form{position:absolute;left:19%;top:11%;width:60%;display:flex;flex-direction:column;align-items:flex-start}
.contact-phone-form label{font:1.7cqw/1.4 Schoolbell,var(--hand);color:#315e86;margin-bottom:1.1cqw}
.contact-phone-form input{width:100%;border:1px solid #e5e5e5;border-radius:0;background:white;box-shadow:0 1px 2px #00000008;color:#315e86;font:1.6cqw/1.2 Schoolbell,sans-serif;height:2.4cqw;padding:.2cqw .5cqw;outline-offset:3px}
.contact-phone-form input:focus-visible{outline:2px dashed #315e86}
.contact-phone-form #copy-phone{margin-top:2.1cqw;padding:.55cqw .65cqw;background:#315e86;color:white;font:.85cqw/1.3 var(--body);border:0;border-radius:0}
.contact-phone-form #copy-phone:hover{background:#244966}
.contact-paper-sign{position:absolute;left:18.7%;top:58.4%;width:62%;height:11.5%;background:#efeadd url('assets/contact-typewriter.avif') 49% 37% / 161.29% auto no-repeat;color:#27251f;font:.85cqw/1.25 ui-monospace,'Courier New',var(--body);padding:.1cqw .2cqw}
.contact-paper-sign p{margin:0 0 .5cqw;padding-bottom:.5cqw;border-bottom:1px solid #9f9a8b}
.contact-paper-sign>span{font:1.05cqw/1.3 ui-monospace,'Courier New',monospace}
.book:has(.contact:not([hidden])) .page-turn{display:none}
@media(max-width:760px){
.contact{min-height:0;clip-path:none;padding:0 0 15px}
.contact-reference-left{position:relative;inset:auto;height:115cqw;width:100%}
.contact-reference-right{position:relative;inset:auto;height:139cqw;width:100%;overflow:hidden}
.contact-handset{left:-18%;top:0;width:63%;height:58%}
.contact-copy{left:24%;top:12%;width:70%}
.contact-copy h2{font-size:8cqw;margin-bottom:4cqw}
.contact-copy p{font-size:3.5cqw;line-height:1.7;margin-bottom:2cqw}
.contact-collage{left:5%;top:42%;width:86%;height:69%}
.contact-glasses{left:60%;top:39%;width:36%;height:28%}
.contact-socials{left:19%;top:59%;width:65%;height:20%;gap:3cqw}
.contact-social{font-size:4.4cqw;gap:3cqw}
.contact-social svg{width:6cqw;height:6cqw}
.contact-accounts{left:20%;top:84%;width:61%;font-size:2.8cqw}
.contact-typewriter{left:1%;top:0;width:98%}
.contact-phone-form label{font-size:5cqw;margin-bottom:3cqw}
.contact-phone-form input{font-size:5cqw;height:8cqw;padding:.5cqw 1.5cqw}
.contact-phone-form #copy-phone{font-size:3cqw;padding:1.6cqw 2cqw;margin-top:7cqw}
.contact-paper-sign{font-size:2.45cqw;padding:.3cqw .6cqw}
.contact-paper-sign p{margin-bottom:1.5cqw;padding-bottom:1.5cqw}
.contact-paper-sign>span{font-size:3cqw}
}

.contact-accounts{pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:.3cqw;white-space:nowrap}.contact-accounts button{font:inherit;padding:0}.contact-accounts a{font-family:Schoolbell,sans-serif;font-size:1.12cqw}.contact-accounts button:hover,.contact-accounts a:hover{text-decoration:underline}
@media(max-width:760px){.contact-accounts{gap:1cqw;top:82%}.contact-accounts a{font-size:3.4cqw}}

/* Self-hosted Xiaolai supplies all Chinese handwriting on the contact page. */
@font-face{font-family:ContactHand;src:url('assets/xiaolai-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block}
.contact{--contact-hand:Schoolbell,ContactHand;font-synthesis:none}
.contact-copy p{font-family:var(--contact-hand);font-size:1.28cqw;line-height:1.55;margin-bottom:.55cqw}
.contact-socials{top:53.2%}
.contact-social{font-family:var(--contact-hand)}
.contact-accounts{top:68.3%}
.contact-phone-form label{font-family:var(--contact-hand);font-size:1.7cqw;margin-bottom:1cqw}
.contact-phone-form input{font-family:var(--contact-hand)}
.contact-phone-form input+label{margin-top:2.6cqw}
.contact-phone-form #copy-phone{font-family:var(--contact-hand);font-size:1.12cqw;margin-top:2.1cqw;padding:.45cqw .65cqw}
.contact-paper-sign{font-family:var(--contact-hand);font-size:1.03cqw;line-height:1.25}
.contact-paper-sign>span{font-family:Schoolbell;font-size:1.16cqw}
.book:has(.contact:not([hidden]))~.book-bottom,body:has(.contact:not([hidden])) #toast{font-family:Schoolbell,ContactHand}
@media(max-width:760px){
.contact-copy p{font-size:3.95cqw;line-height:1.6;margin-bottom:2cqw}
.contact-socials{top:63%}
.contact-accounts{top:87%}
.contact-phone-form label{font-size:5cqw;margin-bottom:3cqw}
.contact-phone-form input+label{margin-top:7.5cqw}
.contact-phone-form #copy-phone{font-size:3.4cqw;margin-top:6cqw;padding:1.4cqw 2cqw}
.contact-paper-sign{font-size:3cqw}
.contact-paper-sign>span{font-size:3.4cqw}
}

/* Interview basics replace the personality tag and personal travel paragraph. */
.about .about-note{margin-top:4%;font-family:Schoolbell,ContactHand}
.about .bio-facts>div{min-height:32px;padding:6px 0;align-items:center}
.about .bio-facts dt{font-size:14px}
.about .bio-facts dd{font-size:17px;font-weight:400;min-height:1.5em}
.about .bio-empty{width:52%}
.about .interest-tags{margin-top:18px}
@media(min-width:761px) and (max-width:1100px){.about .bio-facts>div{min-height:25px;padding:3px 0}.about .bio-facts dt{font-size:11px}.about .bio-facts dd{font-size:13px}.about .interest-tags{margin-top:10px}}
@media(max-width:760px){.about .about-note{margin-top:25px}.about .bio-facts>div{padding:9px 0}.about .bio-facts dt{font-size:14px}.about .bio-facts dd{font-size:17px}}

/* Shorter rules, labels aligned left, and values aligned right. */
.about .about-note{width:76%;max-width:270px}
.about .bio-facts>div{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:24px;justify-content:normal}
.about .bio-facts dt{text-align:left}
.about .bio-facts dd{text-align:right;overflow-wrap:anywhere}
@media(min-width:761px) and (max-width:1100px){.about .bio-facts>div{column-gap:18px}}
@media(max-width:760px){.about .about-note{width:100%;max-width:270px}.about .bio-facts>div{column-gap:18px}}
@media(max-width:380px){.about .bio-facts>div{column-gap:14px}.about .bio-facts dd{font-size:15px}}

/* Work turns the same notebook clockwise into a tall portfolio. */
@media(min-width:761px){
  .site{container-type:inline-size}
  main{overflow:clip}
  .book{aspect-ratio:auto;height:51.43cqw;transition:height 1.05s cubic-bezier(.4,0,.2,1)}
  .book-cover{inset:auto;left:50%;top:50%;width:100%;height:auto;max-width:none;transform:translate(-50%,-50%) rotate(0deg);transition:width 1.05s cubic-bezier(.4,0,.2,1),transform 1.05s cubic-bezier(.4,0,.2,1);will-change:transform}
  .book.is-work{height:175cqw}
  .book.is-work .book-cover{width:175%;transform:translate(-50%,-50%) rotate(90deg)}
  .turning .book-cover{animation:none}
  .book.is-work .page-turn{display:none}
  .book.is-work .folder-tabs{left:9%;width:82%;top:6.2%;height:5%;gap:1%}
  .book.is-work .folder-tabs button{font-size:clamp(16px,2cqw,25px)}
  .book.is-work .folder-paper{left:7.6%;width:84.8%;top:10.5%;bottom:11%;padding:5% 6%;background:var(--paper)}
  .book.is-work .work-title{margin:3% 0 7%}
  .book.is-work .work-title h2{font-size:clamp(30px,3.5cqw,48px)}
  .book.is-work .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6cqw 4cqw;margin:0}
  .book.is-work .project-visual{aspect-ratio:1.2}
  .book.is-work .project-title{font-size:clamp(20px,2.3cqw,30px)}
  .book.is-work .project-subtitle{font-size:clamp(11px,1.1cqw,15px)}
  .book.is-work .waiting{font-size:clamp(12px,1.2cqw,16px)}
  .book.is-work .work-footnote{margin-top:auto;padding-top:6%}
  .reorienting .spread:not([hidden]){animation:orientation-content 1.05s both}
  .reorienting .appear{animation:none}
  .reorienting .page-turn{animation:orientation-content 1.05s both}
  .reorienting .flip-sheet{display:none}
  @keyframes orientation-content{0%,35%{opacity:0;translate:0 12px}100%{opacity:1;translate:0 0}}
}
@media(max-width:760px){
  .reorienting .spread:not([hidden]){animation:arrive .45s both}
}

/* Three distinct categories; no aggregate tab. */
.folder-tabs button{width:32%}

/* The same journal scales into place while its worn cover opens. */
html{scrollbar-gutter:stable}
body.intro-active{overflow:hidden}
.intro-active .site{opacity:0;pointer-events:none}
.intro-active.intro-opening .site{opacity:1}
.book-entry{position:fixed;inset:0;z-index:30;overflow:hidden}
.closed-book{position:fixed;left:50%;top:48%;width:min(325.6px,59.84vw,51.04vh);aspect-ratio:.82104;padding:0;transform:translate(-50%,-50%) rotate(-3deg);outline-offset:16px;filter:drop-shadow(4px 14px 12px #221b182b)}
.closed-cover-image{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:fill;transition:filter .25s}
.closed-book:hover .closed-cover-image{filter:brightness(1.055)}
.closed-pages{position:absolute;inset:2% -1% -1% 2%;border-radius:4%;background:#fffefa;box-shadow:inset -1px -1px 2px #deddd7,1px 1px 0 #f2f1ed,2px 2px 0 #fffefa,2px 4px 4px #201d162b}
.intro-opening main{overflow:visible}
.intro-opening .site-header,.intro-opening .book-bottom,.intro-opening footer{animation:entry-chrome 1.8s both}
.intro-opening .page-turn{visibility:hidden}
.intro-opening .opening-left-source{visibility:hidden}
.intro-opening .appear{animation:none}
.opening-flap{position:absolute;z-index:15;transform-origin:left center;transform-style:preserve-3d;pointer-events:none}
.opening-face{position:absolute;inset:0;backface-visibility:hidden}
.opening-outside img{display:block;width:100%;height:100%;max-width:none}
.opening-inside{transform:rotateY(180deg);background:url('assets/cover.avif') left center/208.333333% 100% no-repeat}
.opening-inside .about-left{left:20.833333%;width:68.75%;top:9%;height:79%}
.opening-inside .appear{animation:none}
@keyframes entry-chrome{0%,58%{opacity:0}100%{opacity:1}}
.intro-active:not(.intro-opening) .book,.intro-active:not(.intro-opening) .book-cover{transition:none}
#main:focus{outline:none}
@media(max-width:760px){
  .closed-book{width:min(264px,61.6vw,51.04vh)}
  .opening-inside{background:linear-gradient(90deg,#d6cebd,#f9f8f3 10%);border:5px solid #3c3c35;border-radius:5px}
}

.entry-settled .appear{animation:none}
.opening-outside img{position:relative}
.intro-opening .about-right{animation:entry-right-page 1.8s both}
@keyframes entry-right-page{0%,13%{opacity:0}30%,100%{opacity:1}}

/* Reference-shaped ornamental lettering travels with the leather cover. */
.closed-book,.opening-outside{container-type:inline-size}
.cover-word{position:absolute;top:22%;left:50%;transform:translateX(-50%);display:block;width:84%;aspect-ratio:2138/736;font-size:0;background:#b9b3a3;opacity:.88;pointer-events:none;mask:url('assets/portfolio-ornamental.png') center/contain no-repeat}

/* The needle and vinyl follow actual audio playback, including pause/failure. */
.record{isolation:isolate}
.record::before{content:'';position:absolute;inset:-7%;border-radius:50%;background:#2f589c;opacity:0;z-index:-1;transform:scale(.88);transition:opacity .45s,transform .45s}
.record[aria-pressed=true]::before{opacity:.14;transform:scale(1.06)}
.record-arm{right:-30%;top:6%;width:60%;height:81%;border:0;border-radius:0;background:url('assets/record-arm.svg') center/contain no-repeat;transform-origin:92% 5%;transform:rotate(-14deg);filter:drop-shadow(0 1px 1px #463f3430);transition:transform .65s cubic-bezier(.4,0,.2,1);pointer-events:none}
.record-arm::after{display:none}
.record[aria-pressed=true] .record-arm{transform:rotate(3deg)}
@media(prefers-reduced-motion:reduce){.record-arm,.record::before{transition:none}.record img{animation:none}}