@font-face{font-family:Fraunces;src:url('/assets/fraunces-semibold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
:root{--paper:#f6f4ed;--olive:#424b2f;--olive-light:#65704b;--ink:#43473a;--muted:#77796b;--line:#d9dbce;--page-gutter:clamp(22px,5vw,64px);--section-top:clamp(32px,5svh,52px);--serif:Fraunces,Georgia,'Times New Roman',serif;--sans:'Helvetica Neue',Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{margin:0;background:var(--paper);color:var(--olive);font:16px var(--sans);-webkit-font-smoothing:antialiased}
body:has(dialog[open]){overflow:hidden}
body[data-page=notes]{overflow-x:clip}
body[data-page=home]{overflow-x:clip}
html:has(body[data-page=home]){overflow-x:clip}
button,input,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
button:disabled{cursor:default;opacity:.35}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--olive);outline-offset:6px}
::selection{background:#dbe0c7;color:#303a25}
h1,h2,p{margin:0}
h1,h2{font-family:var(--serif);font-weight:600}
main{flex:1}
.site-wrap{width:min(880px,calc(100% - var(--page-gutter)*2));margin:0 auto;min-height:100svh;display:flex;flex-direction:column}
body[data-page=home] .site-wrap{width:min(1064px,calc(100% - var(--page-gutter)*2))}
.site-header{height:88px;display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}
nav{display:flex;gap:32px;font-size:14px}
nav a{position:relative;display:flex;align-items:center;min-height:44px;padding:10px 0;color:var(--muted);transition:color .2s}
nav a:hover,nav a[aria-current]{color:var(--olive)}
nav a[aria-current]:after{content:'';position:absolute;bottom:1px;left:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background:var(--olive)}
.site-footer{position:relative;min-height:160px;display:flex;align-items:flex-end;padding:25px 0 29px;font-size:10px;letter-spacing:.4px;color:var(--muted);flex-shrink:0}
.eyebrow{text-transform:uppercase;font-size:10px;letter-spacing:1.8px;font-weight:500;line-height:1.6}
/* A quiet welcome leads directly into About me. */
.gateway-main{padding:clamp(72px,14svh,136px) 0 48px;display:flex;align-items:flex-start;min-height:0}
.opener-screen h1{font-size:clamp(48px,5.5vw,74px);line-height:1.1;letter-spacing:-2.8px;margin-left:-3px}
.about-main{padding:var(--section-top) 0 72px;width:100%}
.about-main>.intro{margin-top:0;font-size:32px;letter-spacing:-.7px;line-height:1.3}
.entry-arrow{position:absolute;right:0;bottom:61px;width:58px;height:58px;display:grid;place-items:center;color:var(--olive);transition:transform .25s}
.entry-arrow svg{width:44px;height:32px}
.entry-arrow:hover{transform:translateX(5px)}
body[data-page=home] .figure-dock{right:82px}
.end-dot{color:inherit}
.intro{font-family:var(--serif);font-size:27px;font-weight:600;letter-spacing:-.5px;margin-top:32px}
.pronunciation{font-family:var(--sans);font-size:15px;font-weight:400;letter-spacing:0;margin-left:4px;color:var(--muted);white-space:nowrap}
.biography{max-width:56ch;margin-top:24px;font-size:18px;line-height:1.75;color:var(--ink);letter-spacing:-.1px}
.biography p+p{margin-top:20px}
.text-link{display:inline-flex;align-items:center;gap:16px;font-size:13px;line-height:1.6;border-bottom:1px solid #adb39d;padding-bottom:5px}
.text-link:hover{border-color:var(--olive)}
.figure-dock{position:absolute;right:0;bottom:26px;width:112px;height:140px;color:var(--olive);z-index:3}
.figure-button{position:relative;width:100%;height:100%;padding:0;border:0;background:none;touch-action:manipulation}
.figure{width:100%;height:100%;display:block;overflow:visible;transform-origin:80% 98.14%;user-select:none}
.figure-shadow{position:absolute;left:21%;bottom:0;width:65%;height:5px;border-radius:50%;background:#505b321c;filter:blur(3px)}
.figure-button:not([data-moving]):hover .mascot-head{transform-box:fill-box;transform-origin:50% 90%;transform:rotate(-3deg);transition:transform .2s}
.page-intro{padding:var(--section-top) 0 0}
.page-intro h1{font-size:32px;line-height:1.3;letter-spacing:-.7px}
.library-main{width:100%}
.collection-intro{min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:8px 0 18px}
.collection-still-life{display:block;width:180px;height:85px;background:var(--olive);-webkit-mask:url('/assets/shortlist-still-life.webp') center/contain no-repeat;mask:url('/assets/shortlist-still-life.webp') center/contain no-repeat}
.collection-intro h1{font:600 clamp(12.25px,4.05vw,26px)/1.35 var(--serif);letter-spacing:-.018em;text-align:center;white-space:nowrap}
.library-shelves{margin:0 0 48px}
.shelf-section+.shelf-section{margin-top:52px}
.shelf-heading{display:flex;align-items:center;min-height:44px;margin-bottom:12px}
.shelf-heading h2{display:flex;align-items:center;gap:10px;font:500 17px/1.4 var(--sans);letter-spacing:.1px}
/* Fixed slots align labels; offsets align the visible artwork, including its
   transparent padding and optical center, rather than only the image boxes. */
.shelf-icon{display:block;flex:0 0 28px;width:28px;height:28px;background:var(--olive);-webkit-mask:var(--shelf-icon) center/contain no-repeat;mask:var(--shelf-icon) center/contain no-repeat;transform:translate(var(--icon-x,0),var(--icon-y,0))}
[data-category=films]{--shelf-icon:url('/assets/shortlist-films.webp');--icon-x:4.147%;--icon-y:-1.672%}
[data-category=tv]{--shelf-icon:url('/assets/shortlist-tv.webp');--icon-x:7.576%;--icon-y:-6.876%}
[data-category=songs]{--shelf-icon:url('/assets/shortlist-songs.webp');--icon-x:5.343%;--icon-y:-.413%}
[data-category=books]{--shelf-icon:url('/assets/shortlist-books.webp');--icon-x:18.341%;--icon-y:-2.468%}
[data-category=restaurants]{--shelf-icon:url('/assets/shortlist-restaurants.webp');--icon-x:18.66%;--icon-y:3.044%}
.paper-invitation{position:absolute;left:0;bottom:64px;width:min(425px,calc(100% - 136px));padding:24px 26px;border:1px solid #dedfd4;background:#fbf9ef;color:var(--olive);font:600 22px/1.35 var(--serif);letter-spacing:-.4px;text-align:left;box-shadow:0 2px 5px #424b2f0d;transform:rotate(-1deg);transition:transform .2s,box-shadow .2s}
.pencil-icon{display:inline-block;width:22px;height:22px;margin-left:7px;vertical-align:-3px;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.paper-invitation:hover{transform:rotate(0deg) translateY(-2px);box-shadow:0 4px 10px #424b2f12}
.shelf-objects{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding:0 24px;align-items:end}
.library-item{position:relative;border:0;padding:0;background:none;width:100%;display:block;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
/* Artwork keeps its original proportions. The shared columns and shelf
   baseline provide alignment without adding mats or cropping poster art. */
.cover-wrap{display:flex;width:100%;aspect-ratio:1/1.15;align-items:flex-end;justify-content:center;position:relative}
.cover-image{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(3px 3px 3px #21261b20)}
.library-item:hover,.library-item:focus-visible{transform:translateY(-10px) rotate(-1.5deg)}
.library-item:nth-child(even):hover{transform:translateY(-10px) rotate(1.5deg)}
.library-item:hover .cover-image{filter:drop-shadow(5px 12px 9px #21261b1e)}
.wood-shelf{height:10px;background:linear-gradient(180deg,#aa8160 0,#946d4b 32%,#7d5739 35%,#805a3d 85%,#705035 100%);box-shadow:0 9px 10px -5px #5d402947,0 21px 22px -12px #51422c25;position:relative;border-radius:1px}
.wood-shelf:before{content:'';position:absolute;inset:3px 0 0;background:repeating-linear-gradient(0deg,transparent 0 2px,#f7c89812 2px 3px);opacity:.7}
[data-category=restaurants] .cover-wrap{overflow:hidden;box-shadow:2px 3px 4px #21261b20}
[data-category=restaurants] .cover-image{object-fit:cover;object-position:center;filter:none}
[data-item=cozinha-das-flores] .cover-image{object-position:46% center}
[data-item=ju-ni] .cover-image{object-position:57% center}
[data-item=four-horsemen] .cover-image{object-position:58% center}
/* One note is one continuous sheet; only navigation turns a page. */
.notes-main{width:100%;min-height:0;display:flex;flex-direction:column;padding:12px 0 28px}
.notebook{width:100%;overflow-anchor:none;display:grid;place-items:center;flex:1;min-height:0;margin:0;perspective:1600px}
.notebook-cover{position:relative;display:block;width:clamp(200px,calc((100svh - 320px)*.72),300px);height:auto;aspect-ratio:330/448;border:1px solid #ced0bc;border-left:20px solid #70785c;background:#eeede2;text-align:left;transform:rotate(-5deg);transform-origin:4% 50%;box-shadow:2px 2px #eeede2,4px 4px #cdd0bf,6px 6px #f9f7ee,7px 7px #d1d1c0,13px 18px 22px #3d44351a;transition:transform .3s,box-shadow .3s}
.notebook-cover:before{content:'';position:absolute;left:3px;top:0;bottom:0;border-left:1px solid #c9ccb8}
.notebook-cover:hover{transform:rotate(-2deg) translateY(-5px);box-shadow:2px 2px #eeede2,4px 4px #cdd0bf,6px 6px #f9f7ee,7px 7px #d1d1c0,17px 24px 28px #3d44351d}
.cover-label{position:absolute;top:18%;left:12%;right:12%;font-family:var(--serif);font-size:37px;letter-spacing:-1.2px}
.cover-lines{display:block;margin-top:20px;height:29px;border-top:1px solid #a8af94;border-bottom:1px solid #a8af94}
.cover-edition{position:absolute;bottom:8%;left:12%;font-size:11px;letter-spacing:1.4px}
.cover-corner{position:absolute;bottom:7%;right:10%;font-size:20px;color:#7e866c}
.notebook[data-open]{place-items:start center}
.notebook-open{width:min(740px,100%);padding-top:0}
.book-toolbar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;height:52px;margin:0 0 78px;padding:0 2px;background:var(--paper)}
.book-toolbar button{border:0;background:none;padding:8px 0;font-size:12px;color:var(--muted);min-height:44px}
.book-toolbar button:hover:not(:disabled){color:var(--olive)}
.book-position{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.4px}
.book-close{display:flex;gap:10px;align-items:center}
.book-close span{font-size:21px}
.book-spread{--book-height:clamp(326px,calc(100svh - 348px),430px);position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);align-items:stretch;box-shadow:1px 2px #dedfcd,2px 4px #fbf9ee,3px 6px #cccfbb,4px 8px #f5f3e7,5px 10px #b9bea7,9px 18px 30px #424b2f15;border-radius:2px}
.book-endpaper{position:relative;background:#eaeadd url('/assets/paper-grid.svg');border:1px solid #d0d3bf;border-right:0;border-radius:2px 0 0 2px;box-shadow:inset -5px 0 6px #565e3910}
.book-ribbon{position:absolute;left:10px;top:-2px;width:7px;height:64px;background:#848d6b;clip-path:polygon(0 0,100% 0,100% 100%,50% 91%,0 100%)}
.book-leaf{position:relative;min-width:0;min-height:var(--book-height);background:#fbf9ef;border:1px solid #d0d3bf;border-left-color:#c4c8b4;border-radius:0 2px 2px 0;box-shadow:inset 6px 0 8px #565e3909;display:flex;flex-direction:column;perspective:1600px}
.notebook-page{padding:36px clamp(28px,5vw,64px) 20px;flex:1;min-width:0;overflow-wrap:anywhere}
.notebook-page h2{font-size:34px;letter-spacing:-1px;line-height:1.18;outline:none;scroll-margin-top:90px}
.notebook-page h2:focus-visible{outline:none}
.notebook-page[data-note-page="0"]{padding-top:26px;padding-bottom:12px}
.contents-list{list-style:none;margin:16px 0 0;padding:0}
.contents-list li+li{margin-top:6px}
.contents-list a{display:flex;gap:10px;align-items:baseline;font-size:16px;line-height:1.3;padding:5px 0;min-height:44px}
.contents-list a:hover .contents-title{text-decoration:underline;text-underline-offset:4px}
.contents-title{flex:0 1 auto}
.contents-title small{display:block;font-size:10px;letter-spacing:.2px;color:#8a8e7b;margin-top:6px}
.contents-dots{flex:1;min-width:10px;border-bottom:1px dotted #bbc2aa}
.contents-number{font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted)}
.book-pagination{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px clamp(18px,4vw,48px) 16px;font-size:11px;color:var(--muted);margin-top:auto}
.book-pagination button{min-height:44px;min-width:44px;border:0;background:none;font-size:12px;color:var(--olive);padding:8px 0}
.book-pagination button span{margin:0 6px}
.book-bottom-contents{color:var(--muted)!important}
.notebook-meta{font-size:10px;color:var(--muted);letter-spacing:.2px;margin-bottom:15px;line-height:1.6}
.sample-label{font-size:12px;line-height:1.6;color:var(--muted);margin-top:15px}
.blank-grid{height:150px;margin-top:25px;background:url('/assets/paper-grid.svg')}
.notebook-prose{margin-top:30px;font-size:17px!important;line-height:1.85!important;max-width:60ch}
.notebook-prose h2{font-size:26px!important}
.permalink{display:inline-block;font-size:11px;color:var(--muted);margin-top:16px;border-bottom:1px solid var(--line);padding-bottom:5px}
.notes-fallback{line-height:2.5;padding-left:20px;margin:50px 0}
.book-guide{position:absolute;right:-3px;top:-72px;width:50px;height:72px;pointer-events:none;transform:scaleX(-1);z-index:4;color:var(--olive)}
.book-guide .figure{transform-origin:center bottom}
.book-corner{position:absolute;right:0;top:0;width:86px;height:86px;overflow:visible;opacity:0;pointer-events:none;z-index:3;fill:#eeeee0;stroke:#c8ccba;stroke-width:.7}
/* A single temporary actor connects the footer, cover, and reading corner. */
body[data-notebook-travel] .site-footer .figure-dock,body[data-notebook-travel] .book-guide{visibility:hidden}
.notebook-traveler{position:fixed;left:0;top:0;width:896px;height:1288px;transform-origin:0 0;color:var(--olive);z-index:14;pointer-events:none}
.notebook-traveler-direction{width:100%;height:100%;transform-origin:center}
.notebook-flying-paper,.notebook-flying-cover{position:fixed!important;left:0;top:0;margin:0!important;transform-origin:0 0;pointer-events:none;backface-visibility:hidden}
.notebook-flying-paper{overflow:hidden;visibility:visible!important}
.notebook-flying-paper .book-leaf{min-height:0}
.notebook-flying-cover{display:block!important;max-width:none;min-width:0;aspect-ratio:auto;transition:none;visibility:visible!important}
.book-turn{position:absolute;inset:0 0 auto;height:var(--turn-height);pointer-events:none;z-index:2;perspective:1600px}
.book-turn-sheet{position:absolute;inset:0;background:#fbf9ef;border:1px solid #d0d3bf;box-shadow:3px 2px 9px #424b2f12;transform-origin:left top;backface-visibility:hidden;overflow:hidden}
.book-turn-sheet .notebook-page{width:100%;height:100%;margin:0}
.book-turn[data-backward] .book-turn-sheet{transform-origin:right top}
body[data-notebook-open] .site-footer{min-height:64px;padding-bottom:22px}
body[data-notebook-open] .site-footer .figure-dock{display:none}
body[data-notebook-open] .notes-main{flex:1}
.post-main{width:min(650px,100%);margin:var(--section-top) auto 72px}
.back-link{font-size:12px;color:var(--muted)}
.post-heading{margin:48px 0 32px}
.post-heading h1{font-size:56px;letter-spacing:-2px;line-height:1.12;margin:18px 0 24px}
.note-meta{font-size:11px;color:var(--muted);line-height:1.6}
.prose{font-size:18px;line-height:1.8;color:var(--ink)}
.prose p,.prose ul,.prose ol,.prose pre,.prose blockquote{margin-bottom:25px}
.prose h2{font-size:32px;letter-spacing:-1px;margin:45px 0 20px;line-height:1.3;color:var(--olive)}
.prose h3{font-size:22px;margin:36px 0 18px}
.prose a{text-decoration:underline;text-underline-offset:4px}
.prose blockquote{border-left:2px solid #bcc5a6;padding-left:24px;margin-left:0;color:var(--muted)}
.prose img{width:auto;max-width:100%;height:auto}
.prose pre{overflow:auto;padding:20px;background:#e9e9df;font-size:13px}
.prose code{font-size:.85em;overflow-wrap:anywhere}
.post-back{margin-top:45px}
.error-main{padding:100px 0}
.error-main h1{font-size:60px;margin:25px 0}
.error-main p{margin-bottom:25px}
dialog{padding:0;border:1px solid #d8dacc;background:var(--paper);color:var(--olive);box-shadow:0 30px 100px #222a1930;max-height:90svh;overflow:auto}
dialog::backdrop{background:#30352855;backdrop-filter:blur(7px)}
dialog[open]{animation:dialog-in .25s cubic-bezier(.2,.7,.2,1)}
@keyframes dialog-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.dialog-close{position:absolute;top:13px;right:16px;border:0;background:none;font-size:28px;font-weight:300;width:44px;height:44px;z-index:2;line-height:1}
.dialog-close:hover{background:#e9eadf;border-radius:50%}
.item-dialog{width:min(780px,calc(100% - 48px))}
.item-detail{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:40px;padding:56px 40px}
.detail-art img{display:block;width:100%;max-height:350px;object-fit:contain;filter:drop-shadow(2px 6px 7px #222a1920)}
.detail-copy h2{font-size:34px;letter-spacing:-1.2px;line-height:1.2;margin-top:12px}
.detail-subtitle{font-size:13px;color:var(--muted);line-height:1.6;margin-top:12px}
.detail-rule{width:35px;height:1px;background:#b6bca6;margin:26px 0}
.detail-description{font-size:15px;line-height:1.8;white-space:pre-line}
.detail-description:empty{display:none}
.recommend-dialog{width:min(510px,calc(100% - 40px));padding:56px 40px 32px}
.recommend-dialog h2{font-size:35px;letter-spacing:-1.3px;line-height:1.16}
.recommend-types{border:0;padding:0;margin:0;min-width:0}
.recommend-types legend{padding:0;font-size:12px;line-height:1.5;margin-bottom:8px}
.recommend-choices{display:flex;flex-wrap:wrap;gap:6px}
.recommend-choices label{position:relative;margin:0;cursor:pointer}
.recommend-choices input[type=radio]{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.recommend-choices span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 11px;border:1px solid #c5cbb6;font-size:12px;line-height:1.4}
.recommend-choices label:hover span{background:#e5e9d8}
.recommend-choices input:checked+span{background:var(--olive);color:var(--paper);border-color:var(--olive)}
.recommend-choices input:focus-visible+span{outline:2px solid var(--olive);outline-offset:3px}
#recommend-verification:not(:empty){margin-top:20px;min-height:65px}
#recommend-verification iframe{max-width:100%}
form{margin-top:24px}
form label{display:block;font-size:12px;line-height:1.5;margin:20px 0 8px}
.optional{font-size:10px;color:var(--muted);margin-left:7px}
input:not([type=hidden]),textarea{width:100%;padding:12px 13px;border:1px solid #c9cdbd;color:var(--olive);background:#faf9f3;border-radius:0;font-size:14px;line-height:1.5}
textarea{resize:vertical;min-height:100px}
input::placeholder,textarea::placeholder{color:#929586;font-size:13px}
.submit-button{width:100%;background:var(--olive);color:var(--paper);padding:15px 17px;border:1px solid var(--olive);display:flex;justify-content:space-between;font-size:13px;margin-top:25px}
.submit-button:hover{background:#343e25}
#form-status{font-size:13px;line-height:1.65;margin-top:16px}
#form-status:empty{display:none}
.recommend-done{min-height:44px;padding:8px 0;border:0;background:none;font-size:13px;text-decoration:underline;text-decoration-color:#b7bca8;text-underline-offset:5px}
.recommend-done:hover{text-decoration-color:var(--olive)}
.recommend-handoff{--actor-right:26%;height:175px;position:relative;overflow:hidden;margin:15px 0 8px}
.recommend-guide{position:absolute;right:var(--actor-right);bottom:12px;width:87px;height:130px;transform-origin:center bottom;animation:receive-note 1.25s cubic-bezier(.22,.65,.3,1) both}
.recommend-slip{position:absolute;left:calc(100% - var(--actor-right) - 188px);top:72px;width:42px;height:31px;border:1px solid #b3bba1;background:#eeefdf;box-shadow:2px 3px 5px #424b2f16;opacity:0;animation:pass-note 1.25s cubic-bezier(.22,.65,.3,1) both}
.recommend-slip:before,.recommend-slip:after{content:'';position:absolute;left:8px;right:8px;border-top:1px solid #b4bea2;top:10px}
.recommend-slip:after{top:16px;right:14px}
.recommend-guide .mascot-arm-left{transform-origin:417px 365px;animation:receive-note-arm 1.25s ease both}
.recommend-guide .mascot-head{transform-origin:535px 290px;animation:receive-note-nod 1.25s ease both}
@keyframes pass-note{0%,12%{opacity:0;transform:translate(-10px,6px) rotate(-8deg)}26%{opacity:1}60%{opacity:1;transform:translate(78px,0) rotate(8deg)}83%,100%{opacity:0;transform:translate(99px,16px) rotate(14deg) scale(.6)}}
@keyframes receive-note{0%,100%{transform:none}45%{transform:translateX(-5px) rotate(-2deg)}75%{transform:translateX(-2px) rotate(1deg)}}
@keyframes receive-note-arm{0%,100%{transform:none}44%,62%{transform:rotate(8deg)}81%{transform:rotate(-3deg)}}
@keyframes receive-note-nod{0%,30%,100%{transform:none}62%{transform:rotate(-5deg)}}
.honeypot{position:absolute;left:-10000px;opacity:0;width:1px;height:1px;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-80px;left:20px;background:var(--olive);color:var(--paper);padding:12px 18px;z-index:10}
.skip-link:focus{top:12px}
@media(max-width:1050px){
 .opener-screen h1{font-size:63px;letter-spacing:-2.7px}
 .shelf-objects{gap:24px;padding-inline:20px}
 .figure-dock{width:98px;height:121px}
}
@media(max-width:700px){
 .site-header{height:76px}
 nav{gap:28px;font-size:13px}
 .gateway-main{padding:clamp(64px,12svh,92px) 0 48px}
 .opener-screen h1{font-size:clamp(39px,8.8vw,57px);letter-spacing:-1.7px;line-height:1.1;max-width:490px}
 .opener-screen h1 br{display:none}
 .about-main{padding-bottom:56px}
 .about-main>.intro{font-size:28px}
 .entry-arrow{width:48px;height:48px;bottom:37px}
 .entry-arrow svg{width:36px}
 body[data-page=home] .figure-dock{right:64px}
 .intro{font-size:25px;margin-top:28px}
 .pronunciation{font-size:13px}
 .biography{font-size:16px;line-height:1.75;margin-top:24px;max-width:56ch}
 .biography p+p{margin-top:20px}
 .text-link{font-size:11px;gap:12px}
 .figure-dock{right:0;bottom:17px;width:80px;height:99px}
 .site-footer{font-size:9px;letter-spacing:.2px;padding:22px 0;min-height:125px}
 .page-intro h1{font-size:24px;letter-spacing:-.4px}
 .collection-intro{min-height:138px;gap:12px;padding:8px 0 16px}
 .collection-still-life{width:142px;height:67px}
 .library-shelves{margin:0 0 32px}
 .shelf-section+.shelf-section{margin-top:32px}
 .shelf-heading{margin-bottom:8px}
 .shelf-heading h2{font-size:15px;gap:8px}
 .shelf-icon{width:24px;height:24px;flex-basis:24px}
 body[data-page=shortlist] .site-footer{min-height:175px}
 .paper-invitation{bottom:57px;width:calc(100% - 96px);padding:20px;font-size:21px;letter-spacing:-.5px}
 .shelf-objects{gap:12px;padding:0 8px}
 .wood-shelf{height:7px}
 .notes-main{padding:6px 0 22px}
 .notebook-cover{width:min(260px,84%,calc((100svh - 290px)*.72));min-width:180px;border-left-width:16px}
 .cover-label{font-size:30px}
 /* Let the paper reach the screen edge on phones so its inset does not
    stack with the site's outer gutter. Desktop keeps its bound notebook. */
 .notebook-open{width:calc(100% + var(--page-gutter)*2);margin-inline:calc(var(--page-gutter)*-1)}
 .book-toolbar{height:48px;margin:0 var(--page-gutter) 72px}
 .book-toolbar button{font-size:11px}
 .book-spread{grid-template-columns:6px minmax(0,1fr);--book-height:clamp(326px,calc(100svh - 328px),430px)}
 .book-ribbon{left:1px;width:3px;height:44px}
 .notebook-page{padding:32px 20px 24px}
 .notebook-page h2{font-size:30px}
 .contents-list{margin-top:14px}
 .contents-list li+li{margin-top:4px}
 .contents-list a{font-size:16px;line-height:1.45}
 .book-pagination{padding:8px 20px 18px}
 .book-pagination button{font-size:11px}
 .book-pagination button span{margin:0 2px}
 .notebook-prose{font-size:17px!important;line-height:1.65!important;margin-top:28px}
 .notebook-meta{font-size:11px}
 .book-guide{width:45px;height:65px;top:-65px;right:10px}
 .item-dialog{width:calc(100% - 40px)}
 .item-detail{padding:56px 24px 32px;grid-template-columns:1fr;gap:24px}
 .detail-art{width:min(230px,78%);margin:auto}
 .detail-art img{max-height:260px}
 .detail-copy h2{font-size:30px}
 .detail-rule{margin:20px 0}
 .recommend-dialog{padding:56px 24px 24px}
 input:not([type=hidden]),textarea{font-size:16px}
 .recommend-dialog h2{font-size:29px}
 .recommend-handoff{--actor-right:18%}
 .post-main{margin-bottom:56px}
 .post-heading{margin:36px 0 28px}
 .post-heading h1{font-size:40px;letter-spacing:-1.5px}
 .prose{font-size:17px;line-height:1.65}
 .prose h2{font-size:28px}
 .error-main h1{font-size:44px}
}
@media(max-width:360px){.paper-invitation{width:calc(100% - 80px);font-size:20px}.paper-invitation .pencil-icon{width:20px;height:20px;margin-left:6px}}
@media(max-width:300px){.collection-intro h1{white-space:normal;font-size:14px;text-wrap:balance}}
@media(hover:none){.library-item:hover,.library-item:nth-child(even):hover{transform:none}.notebook-cover:hover{transform:rotate(-5deg)}.paper-invitation:hover{transform:rotate(-1deg)}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*:before,*:after{animation:none!important;transition:none!important}
 .library-item:hover,.library-item:focus-visible,.library-item:nth-child(even):hover,.figure-button:not([data-moving]):hover .mascot-head{transform:none}
 .notebook-cover:hover{transform:rotate(-5deg)}
 .paper-invitation:hover{transform:rotate(-1deg)}
}

/* One drawn arrow family: olive, fine strokes, no font-dependent glyphs. */
.direction-arrow{display:inline-block;width:1.15em;height:1.15em;flex:none;vertical-align:-.15em;stroke:currentColor;stroke-width:1.35;stroke-linecap:butt;stroke-linejoin:miter}
.direction-arrow--right{transform:rotate(45deg)}
.direction-arrow--left{transform:rotate(-135deg)}

.biography-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:#9b9f8e;transition:text-decoration-color .2s}
.biography-link:hover{text-decoration-color:currentColor}