:root { color-scheme: dark; --cream:#f5ead3; --ink:#392b23; --gold:#cba86a; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; }
body.site { background:#20160f; color:var(--cream); font-family:'DM Sans',sans-serif; }
.scene { position:relative; width:100%; min-height:100svh; overflow:hidden; background:#d8a890 url('/assets/generated-icons/florence-watercolor-v4.webp') center center/cover no-repeat; }
.scene-shade { position:absolute; inset:0; background:linear-gradient(0deg,rgba(31,23,39,.15),transparent 28%); pointer-events:none; }
.site-header { position:relative; z-index:20; display:flex; align-items:center; justify-content:space-between; padding:35px 5.3%; }
.brand { color:#f6ebd5; font-size:12px; font-weight:700; letter-spacing:.24em; text-decoration:none; text-shadow:0 1px 6px #0008; }
.brand-mark { color:#dab47b; font-size:18px; margin-right:12px; vertical-align:-2px; }
.site-header nav { display:flex; gap:38px; }
.site-header nav button { border:0; background:none; color:#f5e8cd; text-align:center; font-size:12px; font-family:'Noto Serif SC',serif; cursor:pointer; text-shadow:0 1px 6px #000a; }
.site-header nav button small { display:block; margin-top:4px; font:600 9px 'DM Sans',sans-serif; letter-spacing:.22em; opacity:.7; }
.site-header nav button:hover,.site-header nav button:focus-visible { color:#f7c982; }
.portfolio-letters { position:absolute; z-index:5; top:12%; left:50%; transform:translateX(-50%); display:flex; align-items:baseline; gap:.055em; white-space:nowrap; color:#fff; font:600 clamp(44px,5.7vw,84px)/1 'Cormorant Garamond',Georgia,serif; letter-spacing:.015em; }
.intro-hint { position:absolute; z-index:5; top:23%; left:50%; margin:0; transform:translateX(-50%); color:#fff3d9; font:14px 'Noto Serif SC',serif; letter-spacing:.16em; white-space:nowrap; text-shadow:0 2px 6px #201326; pointer-events:none; animation:hint-fade 5s forwards; }
@keyframes hint-fade { 0%,72% { opacity:1; visibility:visible; } 100% { opacity:0; visibility:hidden; } }
.portfolio-letters>span { position:relative; display:inline-block; cursor:pointer; filter:drop-shadow(0 2px 1px #25150faa) drop-shadow(0 0 5px #25150f66); }
.portfolio-letters>span:focus-visible { outline:1px solid #fff; outline-offset:5px; }
.letter-glyph { display:block; }
.letter-image { position:absolute; left:50%; top:50%; width:2.2em; height:2.2em; object-fit:contain; opacity:0; visibility:hidden; pointer-events:none; filter:drop-shadow(2px 4px 4px #1b100dc0); }
.motion-enabled .open-book { animation:none; }
.placed-elements { position:absolute; left:50%; bottom:0; width:min(100%,153.2svh); aspect-ratio:1218/795; transform:translateX(-50%); z-index:4; pointer-events:none; }
.placed-elements.mobile-layout { width:min(100%,46.21svh); aspect-ratio:390/844; }
.placed-elements::before { content:''; position:absolute; inset:0; background:url('/assets/generated-icons/florence-watercolor-v4.webp') center/cover no-repeat; mask-image:linear-gradient(to bottom,transparent,#000 20%); pointer-events:none; }
.placed { position:absolute; display:block; pointer-events:auto; border:0; padding:0; background:transparent; transform-origin:center; }
.placed.asset { height:auto; object-fit:contain; pointer-events:none; }
.placed.desk-object { filter:drop-shadow(4px 6px 3px #38201a77); }
@media (max-aspect-ratio:1218/795) and (min-width:501px) { .scene { background:radial-gradient(circle at 50% 0,#4b457e,#302c56 80%); } }
@media (min-aspect-ratio:1672/941) { .placed-elements:not(.mobile-layout) { top:50%; bottom:auto; width:86.2251vw; transform:translate(-50%,-50%); } }
@media (max-width:500px) and (max-aspect-ratio:390/844) { .scene { background:radial-gradient(circle at 50% 0,#4b457e,#302c56 80%); } }
.placed.desk-coffee { aspect-ratio:1240/1268; pointer-events:auto; cursor:pointer; }
.placed-elements:not(.mobile-layout) .placed.desk-coffee { z-index:19 !important; }
.placed.desk-coffee img { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.placed.desk-coffee:focus-visible { outline:2px solid #fff1d5; outline-offset:5px; }
.placed.desk-coffee.sipping { z-index:10 !important; filter:drop-shadow(10px 17px 8px #38201a99); }
.placed.desk-coffee::after { content:attr(data-tooltip); position:absolute; left:50%; bottom:-24px; transform:translateX(-50%); color:#fff1d5; text-shadow:0 1px 3px #24150f; white-space:nowrap; font:11px 'Noto Serif SC',serif; opacity:0; pointer-events:none; }
.placed.desk-coffee:hover::after,.placed.desk-coffee:focus-visible::after { opacity:1; }
.placed.desk-clock,.placed.desk-candle { pointer-events:auto; cursor:pointer; }
.placed.desk-clock { aspect-ratio:1094/1438; }
.placed.desk-candle { aspect-ratio:1157/1360; isolation:isolate; }
.placed.desk-clock img,.placed.desk-candle img { position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.placed.desk-clock:hover,.placed.desk-clock:focus-visible,.placed.desk-candle:hover,.placed.desk-candle:focus-visible { filter:drop-shadow(5px 9px 5px #38201a99); outline:none; }
.placed.desk-clock:focus-visible img,.placed.desk-candle:focus-visible img { filter:drop-shadow(0 0 5px #fff2c2); }
.placed.desk-clock::after,.placed.desk-candle::after { content:attr(data-tooltip); position:absolute; z-index:3; left:50%; bottom:-24px; transform:translateX(-50%); color:#fff1d5; text-shadow:0 1px 3px #24150f; white-space:nowrap; font:11px 'Noto Serif SC',serif; opacity:0; pointer-events:none; }
.placed.desk-clock:hover::after,.placed.desk-clock:focus-visible::after,.placed.desk-candle:hover::after,.placed.desk-candle:focus-visible::after { opacity:1; }
.candle-glow { position:absolute; z-index:0; left:50%; top:18%; width:150%; height:95%; transform:translate(-50%,-32%); border-radius:50%; background:radial-gradient(ellipse,#ffd57c9c 0%,#ffcc6a55 30%,transparent 68%); opacity:0; pointer-events:none; transition:opacity .35s ease; }
.candle-flame { position:absolute; z-index:2; left:50%; top:25%; width:9%; height:15%; transform:translate(-50%,-100%); clip-path:polygon(50% 0,77% 40%,80% 75%,50% 100%,20% 75%,23% 40%); background:radial-gradient(ellipse at 50% 72%,#fff9d7 4%,#ffda75 48%,#f39a43 85%); filter:drop-shadow(0 0 5px #ffdb82); opacity:0; pointer-events:none; }
.desk-candle.lit .candle-glow,.desk-candle.lit .candle-flame { opacity:1; }
.desk-candle.lit .candle-flame { animation:candle-flicker 2s ease-in-out infinite alternate; }
@keyframes candle-flicker { from { scale:1; } to { scale:.9 1.08; } }
.placed.desk-speaker { aspect-ratio:1; pointer-events:auto; cursor:pointer; transition:translate .2s,filter .2s; }
.placed.desk-speaker img { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.placed.desk-speaker:hover,.placed.desk-speaker:focus-visible { translate:0 -6px; filter:drop-shadow(6px 11px 5px #38201aaa); outline:none; }
.placed.desk-speaker.playing { filter:drop-shadow(0 0 13px #f8cf92) drop-shadow(4px 6px 3px #38201a77); }
.placed.desk-speaker::after { content:attr(data-tooltip); position:absolute; left:50%; bottom:-24px; transform:translateX(-50%); color:#fff1d5; text-shadow:0 1px 3px #24150f; white-space:nowrap; font:11px 'Noto Serif SC',serif; opacity:0; pointer-events:none; }
.placed.desk-speaker:hover::after,.placed.desk-speaker:focus-visible::after { opacity:1; }
.placed-elements.mobile-layout .desk-clock::after { display:none; }
.mobile-clock-label { position:absolute; z-index:16; aspect-ratio:1094/1438; padding:0; border:0; background:none; pointer-events:auto; cursor:pointer; }
.mobile-clock-label::after { content:'时间与记忆'; position:absolute; left:50%; bottom:-24px; transform:translateX(-50%); color:#fff1d5; text-shadow:0 1px 3px #24150f,0 0 6px #24150f; white-space:nowrap; font:11px 'Noto Serif SC',serif; opacity:0; pointer-events:none; }
.mobile-clock-label:hover::after,.mobile-clock-label:focus-visible::after { opacity:1; }
.mobile-clock-label:focus-visible { outline:2px solid #fff1d5; }
.placed-elements.mobile-layout .desk-speaker::after { top:-22px; bottom:auto; left:90%; font-size:10px; }
.notebook { aspect-ratio:.75; cursor:pointer; filter:drop-shadow(6px 9px 4px #27203d80); transition:filter .25s, translate .25s; }
.notebook:hover,.notebook:focus-visible { translate:0 -8px; filter:drop-shadow(11px 17px 7px #27203daa); outline:none; }
.notebook::after { content:attr(data-tooltip); position:absolute; left:50%; bottom:-24px; transform:translate(-50%,5px); color:#fff1d5; text-shadow:0 1px 3px #24150f; white-space:nowrap; font:12px 'Noto Serif SC',serif; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s,transform .2s; }
.notebook:hover::after,.notebook:focus-visible::after { opacity:1; visibility:visible; transform:translate(-50%,0); }
.cover-rule,.cover-small,.cover-year,.cover-flourish { display:none; }
.cover-title { position:absolute; top:43%; left:40%; width:30%; margin:0; transform:rotate(-3deg); font:700 clamp(20px,2.4vw,38px)/1 'Caveat',cursive; text-align:center; text-shadow:0 1px #fff8; }
.lamp { aspect-ratio:.667; cursor:pointer; filter:brightness(.82) saturate(.85) drop-shadow(3px 6px 3px #30234366); transition:filter .4s ease; background:url('/assets/generated-icons/lamp-watercolor-v4.webp') center/contain no-repeat; }
.lamp.lit { filter:brightness(1.18) drop-shadow(0 0 31px #ffe29cbb) drop-shadow(3px 6px 3px #30234366); }
.clock-open { overflow:hidden; }
.clock-overlay[hidden] { display:none; }
.clock-overlay { position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:20px; }
.clock-scrim { position:absolute; inset:0; border:0; background:#100b09ce; backdrop-filter:blur(8px); cursor:pointer; }
.clock-letter.letter-body { position:relative; width:min(670px,94vw); max-height:90svh; overflow:auto; padding:75px 70px 68px; border:0; color:var(--ink); background:transparent url('/assets/generated-icons/letter-page-watercolor-v6.webp') center/100% 100% no-repeat; filter:drop-shadow(12px 20px 25px #24150da1); }
.clock-letter h2 { margin:20px 0 24px; font:500 clamp(30px,3vw,42px)/1.3 'Noto Serif SC',serif; }
.clock-letter h2 em { color:#966746; font-weight:400; }
.dali-artwork { margin:0 0 24px; }
.dali-artwork img { display:block; width:100%; height:auto; box-shadow:5px 9px 17px #3d2d2850; }
.dali-artwork figcaption { margin-top:11px; color:#6d533e; font:12px/1.6 'Noto Serif SC',serif; }
.dali-artwork figcaption span { display:block; color:#947457; font:11px 'Cormorant Garamond',Georgia,serif; letter-spacing:.04em; }
.clock-close { position:absolute; top:22px; right:33px; border:0; background:none; color:#6b4934; cursor:pointer; font:27px Georgia,serif; }
.clock-close:focus-visible { outline:2px solid #8e623d; }
.book-open { overflow:hidden; }
.book-overlay[hidden] { display:none; }
.book-overlay { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:28px; }
.overlay-scrim { position:absolute; inset:0; border:0; background:#100b09ce; backdrop-filter:blur(8px); cursor:pointer; }
.open-book { position:relative; width:min(1220px,96vw); filter:drop-shadow(20px 30px 25px #000a); animation:book-enter .5s cubic-bezier(.2,.75,.2,1) both; }
@keyframes book-enter { from { opacity:0; transform:translateY(35px) scale(.9) rotate(-3deg); } to { opacity:1; transform:translateY(0) scale(1) rotate(0); } }
.book-spread { display:grid; grid-template-columns:1fr 1fr; height:min(790px,88svh); padding:6% 8% 7%; background:url('/assets/generated-icons/open-book-watercolor-v4.webp') center/100% 100% no-repeat; }
.book-page { position:relative; min-width:0; overflow-y:auto; color:var(--ink); padding:28px 28px 24px; background:transparent; scrollbar-color:#bda783 transparent; }
.left-page { border-right:1px solid #a9926d66; }
.right-page { background:transparent; }
.paper-index { font:700 10px 'DM Sans',sans-serif; letter-spacing:.23em; color:#876b4b; border-bottom:1px solid #b49c77; padding-bottom:14px; }
.letter-illustration { color:#a88665; opacity:.62; margin:10px 0 4px; height:85px; overflow:hidden; }
.letter-illustration svg { width:100%; height:100%; }
.letter-body { position:relative; padding:0 12px 20px; border-left:1px solid #bd9f76aa; }
.left-page h2 { margin:8px 0 22px; font:500 clamp(28px,3vw,42px)/1.28 'Noto Serif SC',serif; letter-spacing:.03em; }
.left-page h2 em,.book-content h3 em { color:#966746; font-weight:400; }
.letter-body>p { font:13px/1.9 'Noto Serif SC',serif; letter-spacing:.025em; color:#544233; margin:0 0 14px; }
.letter-body strong { color:#8b5736; font-weight:600; box-shadow:inset 0 -.4em #d8b88377; }
.letter-explain { margin:17px 0; padding:12px 15px; border:1px solid #be9e72; background:#f7edcf99; box-shadow:3px 5px 10px #6b503322; rotate:-1deg; }
.letter-explain span { font:600 10px 'DM Sans',sans-serif; letter-spacing:.18em; color:#976e48; }
.letter-explain p { margin:7px 0 0; font:12px/1.8 'Noto Serif SC',serif; }
.letter-body .letter-source { font-size:10px; color:#987c5f; margin-top:15px; }
.letter-body .letter-source a { color:inherit; text-underline-offset:2px; }
.letter-body .dali-quote { font:italic 19px/1.5 'Cormorant Garamond',Georgia,serif; color:#563b36; margin-top:22px; }
.book-tabs { display:flex; gap:22px; margin:27px 0 25px; }
.book-tabs button { border:0; border-bottom:1px solid transparent; padding:0 0 7px; color:#856e57; background:none; cursor:pointer; font:12px 'Noto Serif SC',serif; }
.book-tabs button.active { color:#513225; border-color:#9d6c47; }
.book-content { min-height:275px; }
.content-kicker { color:#a47f58; font-size:10px; font-weight:700; letter-spacing:.25em; }
.book-content h3 { font:500 clamp(34px,3.6vw,53px)/1.02 'Cormorant Garamond','Noto Serif SC',serif; margin:13px 0 22px; }
.book-content p { font:14px/2 'Noto Serif SC',serif; max-width:355px; color:#5f4b3a; }
.book-content .content-note { color:#9c7964; font-size:12px; border-left:2px solid #bd9a75; padding-left:12px; }
.letter-link { margin-top:16px; padding:9px 14px; border:1px solid #a88159; background:#f2e4c7; color:#684832; cursor:pointer; font:12px 'Noto Serif SC',serif; }
.work-filters { display:flex; flex-wrap:wrap; gap:7px; padding:2px 0 12px; margin:0 0 8px; }
.work-filters button { flex:none; border:1px solid #b8a07c; background:#f4e8cf; color:#765d43; padding:7px 10px; border-radius:20px; font:11px 'Noto Serif SC',serif; cursor:pointer; }
.work-filters button.active { background:#704e36; color:#fff2da; border-color:#704e36; }
.work-group { margin:19px 0 27px; }
.work-group-heading { display:flex; align-items:end; justify-content:space-between; border-bottom:1px solid #b69c76; padding-bottom:7px; margin-bottom:16px; }
.work-group-heading small { display:block; font:9px 'DM Sans',sans-serif; color:#9b7958; letter-spacing:.12em; }
.work-group-heading h4 { margin:4px 0 0; font:500 18px 'Noto Serif SC',serif; }
.work-group-heading>span { font:30px 'Cormorant Garamond',serif; color:#a27e57; }
.work-grid { columns:2; column-gap:14px; padding:3px 3px 13px; }
.work-card { display:flex; flex-direction:column; gap:5px; width:100%; margin:0 0 18px; break-inside:avoid; padding:0; min-width:0; border:0; background:none; cursor:zoom-in; text-align:left; transition:transform .2s; }
.work-card:hover,.work-card:focus-visible { transform:translateY(-5px) scale(1.015); }
.work-card img { display:block; width:100%; height:auto; box-shadow:3px 6px 11px #4b372949; }
.work-video { cursor:pointer; }
.work-video .video-preview { position:relative; display:block; }
.work-video .video-preview::after { content:'▶'; position:absolute; top:50%; left:50%; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:#241c1bc9; color:#fff5dc; font-size:17px; transform:translate(-50%,-50%); }
.brand-story { margin:0 0 22px; padding:12px 16px; border-left:2px solid #a87d63; background:#f6ebd785; }
.brand-story p { margin:0 0 10px; color:#614a3b; font:12px/1.85 'Noto Serif SC',serif; white-space:pre-line; }
.brand-story p:last-child { margin-bottom:0; }
.brand-story strong { display:block; color:#8b5d4d; font-weight:600; }
.category-note { color:#765d4c; font:12px/1.8 'Noto Serif SC',serif; }
.work-card-copy { display:block; padding:3px 4px 6px; }
.work-card-copy strong { display:block; color:#4f3928; font:500 15px/1.4 'Noto Serif SC',serif; }
.work-card-copy small { display:block; margin-top:4px; color:#79614b; font:11px/1.5 'Noto Serif SC',serif; white-space:pre-line; }
.image-viewer[hidden] { display:none; }
.image-viewer { position:fixed; inset:0; z-index:70; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px; padding:35px; background:#130f0de8; cursor:zoom-out; }
.image-viewer img { max-width:min(92vw,1200px); max-height:82svh; object-fit:contain; box-shadow:0 22px 55px #000b; cursor:default; }
.image-viewer.jewelry-view img { filter:brightness(.78) saturate(.88); }
.image-viewer video { max-width:min(92vw,1200px); max-height:82svh; box-shadow:0 22px 55px #000b; cursor:default; }
.image-viewer [hidden] { display:none; }
.image-viewer p { color:#efe4d0; font:12px 'Noto Serif SC',serif; }
.image-viewer p:empty { display:none; }
.viewer-close { position:absolute; top:12px; right:25px; border:0; background:none; color:#fff3dc; font-size:37px; cursor:pointer; }
.sticker-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:6px 0 5px; }
.sticker-row button { border:0; padding:0; width:57px; height:65px; background:transparent; cursor:pointer; transition:transform .2s; }
.sticker-row button:nth-child(1) { rotate:-9deg; }.sticker-row button:nth-child(2) { rotate:7deg; }.sticker-row button:nth-child(3) { rotate:-5deg; }.sticker-row button:nth-child(4) { rotate:11deg; }
.sticker-row button:hover { transform:translateY(-8px) scale(1.08); }
.sticker-row img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(2px 3px 2px #46332652); }
.sticker-caption { color:#9b7b5c; font:11px 'Noto Serif SC',serif; min-height:16px; }
.close-book { position:absolute; z-index:2; top:-19px; right:-19px; border:1px solid #cfb289; width:40px; height:40px; border-radius:50%; background:#422820; color:#f4e5c9; font:28px/1 'Cormorant Garamond',serif; cursor:pointer; }
.book-spread { position:relative; }
.book-layout { position:absolute; inset:0; z-index:3; pointer-events:none; }
.book-layout-sticker.module-sticker { position:absolute; min-height:0; padding:0; aspect-ratio:1; rotate:0; pointer-events:auto; }
.book-layout-sticker.module-sticker img { width:100%; height:100%; object-fit:contain; }
.custom-book-layout .special-grid { display:none; }
.resume-body { padding:18px 14px 25px; font-family:'Noto Serif SC',serif; }
.resume-body h2 { font:500 clamp(38px,4vw,61px) 'Noto Serif SC',serif; margin:20px 0 27px; }
.resume-body h3 { font:500 17px 'Noto Serif SC',serif; margin:20px 0 12px; }
.resume-body p { color:#594637; font:13px/2 'Noto Serif SC',serif; max-width:370px; }
.resume-rule { width:60%; height:1px; margin:25px 0; background:#b49c77; }
.resume-pdf { display:inline-block; margin-top:25px; padding:12px 16px; color:#674328; background:#e9d7b4; border:1px solid #a88159; text-decoration:none; font:12px 'Noto Serif SC',serif; }
.resume-pdf.pending { opacity:.68; cursor:default; }
.mobile-page-cue { display:none; }
.letter-sheet[hidden] { display:none; }
.letter-sheet { position:absolute; z-index:5; inset:7% 16%; overflow:auto; padding:95px 38px 25px; color:var(--ink); background:transparent url('/assets/generated-icons/letter-page-watercolor-v6.webp') center/100% 100% no-repeat; filter:drop-shadow(12px 20px 27px #24150da1); transform:rotate(-1deg); }
.letter-sheet h2 { margin:16px 0 22px; font:500 clamp(28px,3vw,42px)/1.3 'Noto Serif SC',serif; }
.letter-sheet h2 em { color:#966746; font-weight:400; }
.letter-sheet h3 { margin:12px 0 22px; font:500 clamp(30px,3vw,44px)/1.2 'Noto Serif SC',serif; }
.letter-sheet #sheetContent>p { color:#5f4b3a; font:13px/1.9 'Noto Serif SC',serif; }
.letter-close { position:absolute; top:22px; right:26px; display:block; padding:5px 9px; border:1px solid #b49c77; background:#efe0bd; color:#5a3e2d; cursor:pointer; font:11px 'Noto Serif SC',serif; }
.module-intro { margin-bottom:14px; }
.module-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:20px 7px 24px; }
.module-sticker { position:relative; min-height:144px; padding:6px; border:0; background:transparent; color:#58402e; cursor:pointer; text-align:center; }
.module-sticker:nth-child(2n) { rotate:2deg; }.module-sticker:nth-child(3n) { rotate:-2deg; }
.module-sticker:hover,.module-sticker:focus-visible { transform:translateY(-5px) scale(1.05); }
.module-sticker img { display:block; width:100%; height:90px; object-fit:contain; filter:drop-shadow(2px 3px 2px #38271953); }
.module-sticker::after { content:attr(data-tooltip); position:absolute; z-index:3; left:50%; top:calc(100% - 20px); transform:translateX(-50%); color:#403246; text-shadow:0 1px 2px #fff9e9; white-space:nowrap; font:12px 'Noto Serif SC',serif; opacity:0; pointer-events:none; }
.book-layout-sticker.module-sticker::after { top:100%; }
.module-sticker:hover::after,.module-sticker:focus-visible::after { opacity:1; }
.module-sticker span,.module-sticker small { display:block; font-family:'Noto Serif SC',serif; }
.module-sticker span { margin-top:3px; font-size:12px; }.module-sticker small { margin-top:4px; font-size:10px; color:#9b8064; }
.back-to-index { display:block; margin:6px 0 18px; border:0; background:none; color:#855c3f; cursor:pointer; font:11px 'Noto Serif SC',serif; }
.book-content { min-height:0; }
.index-intro { padding:35px 8px 10px; }
.index-intro h2 { margin:16px 0 10px; font:500 clamp(34px,3vw,48px)/1.2 'Noto Serif SC',serif; }
.index-intro h2 em { color:#955d6b; font-style:normal; }
.index-intro p { color:#765c4a; font:13px/1.8 'Noto Serif SC',serif; }
.special-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:24px; }
.special-grid .module-sticker img { height:120px; }
@media (max-width:800px) {
  .portfolio-letters { top:12%; font-size:clamp(31px,8.5vw,49px); gap:.03em; }
  .intro-hint { top:18%; font-size:11px; letter-spacing:.06em; }
  .site-header { padding:22px 5%; }.site-header nav { gap:13px; }.site-header nav button { font-size:10px; }.site-header nav button small { font-size:7px; }
  .brand { font-size:9px; letter-spacing:.11em; }.brand-mark { margin-right:4px; }
  .scene { min-height:100svh; background-position:center; }
  .cover-title { font-size:clamp(17px,5vw,28px); }
  .clock-letter.letter-body { width:96vw; max-height:88svh; padding:65px 32px 44px; }
  .clock-letter .dali-quote { font-size:17px; }
  .clock-close { top:16px; right:22px; }
  .book-overlay { padding:12px; align-items:center; }
  .open-book { width:96vw; }
  .close-book { top:-8px; right:8px; }
  .book-spread { grid-template-columns:1fr 1fr; height:auto; aspect-ratio:1.5; padding:8% 8% 10%; background:url('/assets/generated-icons/open-book-watercolor-v4.webp') center/100% 100% no-repeat; }
  .book-page { padding:4px 6px; overflow-y:auto; background:transparent; }
  .left-page { border-right:1px solid #b9a88677; border-bottom:0; padding-top:clamp(42px,10vw,64px); }
  .letter-illustration { display:none; }
  .paper-index { font-size:7px; padding-bottom:5px; }
  .content-kicker { font-size:7px; }
  .index-intro { padding:6px 2px; }
  .index-intro h2 { font-size:clamp(17px,3.4vw,27px); margin:7px 0; }
  .index-intro p { font-size:9px; line-height:1.5; margin:4px 0; }
  .special-grid { gap:1px; margin-top:18px; }
  .special-grid .module-sticker img { height:88px; }
  .module-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; padding:7px 0 0; }
  .module-sticker { min-height:77px; padding:0; }
  .module-sticker img { height:70px; }
  .book-layout-sticker.module-sticker img { height:100%; }
  .module-sticker span { font-size:9px; margin-top:1px; }
  .module-sticker small { font-size:7px; margin-top:1px; }
  .book-content { min-height:0; }
  .book-content h3 { font-size:clamp(17px,3.5vw,25px); margin:6px 0; }
  .book-content p { font-size:8px; line-height:1.5; margin:2px 0 6px; }
  .book-content .module-intro { display:none; }
  .letter-sheet { inset:4% 4%; padding:95px 18px 20px; }
  .letter-body>p { font-size:12px; }
  .work-grid { column-gap:9px; }
  .work-card { margin-bottom:13px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }
/* Personal journal and work computer share the Florence desk. */
.placed.notebook { aspect-ratio:1.5; filter:drop-shadow(3px 5px 3px #271a1866); }
.book-cover { position:absolute; inset:0; background:url('/assets/generated-icons/closed-book-ilia-brown-v7.webp') center/contain no-repeat; }
.placed.computer { aspect-ratio:1.5; cursor:pointer; filter:drop-shadow(5px 8px 5px #261a1b77); transition:translate .25s,filter .25s; }
.placed.computer:hover,.placed.computer:focus-visible { z-index:20 !important; translate:0 -7px; filter:drop-shadow(10px 15px 8px #261a1baa); outline:none; }
.computer-cover { position:absolute; inset:0; background:url('/assets/generated-icons/laptop-clean-v2.webp') center/contain no-repeat; }
.placed.computer::after { content:attr(data-tooltip); position:absolute; left:50%; bottom:-18px; transform:translateX(-50%); color:#fff1d5; text-shadow:0 1px 3px #24150f,0 0 6px #24150f; white-space:nowrap; font:12px 'Noto Serif SC',serif; opacity:0; pointer-events:none; }
.placed.computer:hover::after,.placed.computer:focus-visible::after { opacity:1; }
.book-overlay .overlay-scrim,.computer-overlay .overlay-scrim { background:#130e18aa; backdrop-filter:blur(2px); }
.open-book { width:min(950px,88vw); max-height:94svh; }
.book-spread { width:100%; height:auto; aspect-ratio:1.44; padding:7% 8% 8%; background:url('/assets/generated-icons/open-book-brown-v6.webp') center/100% 100% no-repeat; }
.book-page { padding:20px 32px 28px; overflow-y:auto; scrollbar-width:thin; }
.left-page { border-right:0; padding-left:48px; }
.right-page { padding-right:53px; }
.book-tabs { position:absolute; z-index:4; top:10px; left:8%; display:flex; gap:5px; max-width:85%; overflow-x:auto; }
.book-tabs button { flex:none; border:1px solid #8e847a; border-bottom:0; border-radius:7px 7px 0 0; padding:6px 11px; background:#ead7b7; color:#4f463f; cursor:pointer; font:11px 'Noto Serif SC',serif; }
.book-tabs button:nth-child(2n) { background:#eebdc0; }.book-tabs button:nth-child(3n) { background:#becdbd; }
.book-tabs button.active { background:#2e5960; color:#fff8e9; }
.book-lead { max-width:280px; color:#725f50; font:14px/1.8 'Noto Serif SC',serif; }
.book-mini-index { display:grid; gap:7px; margin-top:35px; max-width:260px; }
.book-mini-index button { display:flex; gap:15px; border:0; border-bottom:1px solid #c4ae8e; padding:8px 2px; background:none; color:#645446; text-align:left; cursor:pointer; font:14px 'Noto Serif SC',serif; }
.book-mini-index button.active { color:#21616a; font-weight:600; }.book-mini-index span { color:#a58a68; font:12px 'Cormorant Garamond',serif; }
.book-page h2 { margin:12px 0; font:500 clamp(31px,4vw,49px)/1.2 'Noto Serif SC',serif; }
.personal-copy,.personal-gallery { padding:8px 2px 30px; color:#493c33; }
.personal-copy h3,.personal-gallery h3 { margin:22px 0 16px; font:500 clamp(25px,2.8vw,39px)/1.3 'Noto Serif SC',serif; }
.personal-letter h3 { font-size:clamp(26px,2.55vw,34px); overflow-wrap:anywhere; }
.personal-copy p { font:13px/1.9 'Noto Serif SC',serif; }
.mobile-book-lead { display:none; }
.personal-letter p { font-size:12px; line-height:1.85; }.personal-letter small { color:#8d755f; }
.personal-gallery .work-grid { columns:2; }.personal-gallery .work-card-copy strong { font-size:12px; }
.book-spread[data-page="jewelry"] .work-card img { filter:brightness(.78) saturate(.88); }
.personal-accounts h4 { margin:18px 0 10px; font:500 14px 'Noto Serif SC',serif; }
.page-turns { display:flex; justify-content:space-between; padding:5px 12%; }
.page-turns button { border:0; background:none; color:#fff3dc; text-shadow:0 1px 4px #20100e; cursor:pointer; font:12px 'Noto Serif SC',serif; }
.page-turns button:disabled { opacity:.35; cursor:default; }
.book-spread.turn-next .right-page { animation:page-reveal-next .44s cubic-bezier(.35,0,.2,1) both; }
.book-spread.turn-prev .right-page { animation:page-reveal-prev .44s cubic-bezier(.35,0,.2,1) both; }
@keyframes page-reveal-next { from { clip-path:inset(0 0 0 100%); } to { clip-path:inset(0); } }
@keyframes page-reveal-prev { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0); } }
@media (prefers-reduced-motion:reduce) { .book-spread.turn-next .right-page,.book-spread.turn-prev .right-page { animation:none; } }
.computer-overlay[hidden] { display:none; }
.computer-overlay { position:fixed; z-index:50; inset:0; display:grid; place-items:center; padding:30px; }
.computer-open { position:relative; width:min(1000px,92vw,calc(88svh * 1.5)); aspect-ratio:3/2; background:transparent url('/assets/generated-icons/laptop-open-watercolor-v3.webp') center/100% 100% no-repeat; filter:drop-shadow(7px 12px 12px #0b0a12a0); }
.computer-display { position:absolute; left:9.7%; top:6.2%; width:80.7%; height:73.2%; overflow:hidden; border-radius:2px; background:#e8e7da; color:#2d3434; }
.computer-bar { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:8px 18px; border-bottom:1px solid #8d9a9e; background:#d4ddd8; color:#44535a; font:700 11px 'DM Sans',sans-serif; letter-spacing:.16em; }
.computer-bar button { border:0; background:none; color:#45535a; cursor:pointer; font:12px 'Noto Serif SC',serif; }
.computer-content { height:calc(100% - 35px); overflow:auto; padding:25px 30px; background:radial-gradient(circle at 70% 15%,#f4edd9 0,#dfebea 55%,#c9dbdc 100%); }
.desktop-note { text-align:center; }.desktop-note span { font:700 11px 'DM Sans',sans-serif; letter-spacing:.22em; }.desktop-note h2 { margin:7px 0; font:500 37px 'Cormorant Garamond',serif; }.desktop-note p { margin:0; font:12px 'Noto Serif SC',serif; }
.desktop-icons { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:22px 8px; max-width:460px; margin:36px auto 28px; }
.desktop-icons button { display:grid; justify-items:center; gap:6px; border:0; padding:4px; background:none; color:#33494d; cursor:pointer; font:12px 'Noto Serif SC',serif; }
.desktop-icons button { grid-column:span 2; }
.desktop-icons button:nth-child(4) { grid-column:2 / span 2; }
.desktop-icons button:nth-child(5) { grid-column:4 / span 2; }
.desktop-icons button:hover,.desktop-icons button:focus-visible { color:#8e5360; transform:translateY(-3px); }
.folder-symbol { display:grid; place-items:center; width:62px; height:55px; border:2px solid #617a7a; border-radius:5px 5px 9px 9px; background:#f3deb7; box-shadow:3px 5px 0 #77706750; color:#805d59; font:32px 'Cormorant Garamond',serif; }
.folder-art { width:clamp(50px,7vw,84px); height:clamp(50px,7vw,84px); border:0; border-radius:0; background:transparent url('/assets/generated-icons/sticker-sheet-watercolor-v4.webp') 0 0/400% 200% no-repeat; box-shadow:none; filter:drop-shadow(3px 5px 3px #3d2b2944); }
.folder-art-buddha { background-position:0 0; }
.folder-art-brand { background-image:url('/assets/generated-icons/sticker-brand-moodboard-v1.webp'); background-position:center; background-size:contain; }
.folder-art-ai { background-image:url('/assets/generated-icons/icon-8092-watercolor-v1.webp'); background-position:center; background-size:contain; }
.folder-art-letter { background-position:100% 100%; }
.folder-art-seal { background-position:66.666% 0; }
.folder-art-camera { background-position:33.333% 0; }
.folder-art-mask { background-position:33.333% 100%; }
.folder-art-cameo { background-image:url('/assets/generated-icons/icon-cameo-clean-v1.webp'); background-position:center; background-size:contain; }
.folder-art-logo { background-image:url('/assets/generated-icons/shop-logo-watercolor-v4.webp'); background-position:center; background-size:contain; }
.folder-head { display:flex; align-items:center; gap:16px; margin-bottom:15px; }.folder-head button { border:0; background:none; color:#405960; cursor:pointer; }.folder-head h2 { margin:0; font:500 28px 'Noto Serif SC',serif; }
.computer-work { max-width:780px; margin:auto; }.computer-work h3 { font:500 18px 'Noto Serif SC',serif; }.computer-work .work-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.computer-work .work-grid.video-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.computer-work .work-card { max-width:100%; margin:0; }
.computer-work[data-category="ai-content-system"] .work-grid { grid-template-columns:1fr; margin:14px 0 20px; }
.computer-work[data-category="ai-content-system"] .work-card img { width:100%; height:auto; }
.ai-project-intro { max-width:65ch; font:13px/1.75 'Noto Serif SC',serif; }
.computer-work[data-category="brand-logo"] .work-grid,.computer-work[data-category="partners"] .work-grid { display:block; columns:3; column-gap:12px; }
.computer-work[data-category="brand-logo"] .work-card,.computer-work[data-category="partners"] .work-card { break-inside:avoid; margin-bottom:12px; }
.computer-work[data-category="phole-phos-identity"] .work-grid { display:block; columns:2; column-gap:12px; }
.computer-work[data-category="phole-phos-identity"] .work-card { break-inside:avoid; margin-bottom:12px; }
.computer-work[data-category="partners"] .work-card-copy strong { font-size:12px; line-height:1.45; }
.related-work-links { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.related-work-links button { padding:5px 0; border:0; border-bottom:1px solid #9a7758; background:none; color:#6b503b; cursor:pointer; font:12px 'Noto Serif SC',serif; }
@media(max-width:800px) {
  .open-book { width:96vw; }.book-spread { aspect-ratio:1.44; padding:8% 8% 9%; }
  .book-page { padding:4px 10px; }.left-page { padding-left:13px; }.right-page { padding-right:15px; }.book-page h2 { font-size:20px; margin:5px 0; }
  .book-lead { font-size:9px; line-height:1.4; }.book-mini-index { gap:2px; margin-top:9px; }.book-mini-index button { font-size:9px; padding:3px 1px; gap:5px; }
  .book-tabs { max-width:88%; top:1px; }.book-tabs button { padding:5px 7px; font-size:8px; }
  .personal-copy,.personal-gallery { padding:3px 0 15px; }.personal-copy h3,.personal-gallery h3 { font-size:16px; margin:6px 0; }.personal-copy p,.personal-letter p { font-size:9px; line-height:1.45; }
  .personal-gallery .work-grid { columns:1; }.personal-gallery .work-card-copy strong { font-size:9px; }
  .computer-overlay { padding:8px; }.computer-open { width:94vw; aspect-ratio:3/2; height:auto; }
  .computer-display { left:9.7%; top:6.2%; width:80.7%; height:73.2%; }.computer-content { padding:15px; }.desktop-note h2 { font-size:24px; }.desktop-note p { font-size:10px; }.desktop-icons { margin-top:10px; gap:8px 3px; }.desktop-icons button { font-size:9px; line-height:1.3; }
  .computer-work .work-grid { grid-template-columns:1fr; }
  .computer-work .work-grid.video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .computer-work[data-category="brand-logo"] .work-grid,.computer-work[data-category="partners"] .work-grid,.computer-work[data-category="phole-phos-identity"] .work-grid { columns:1; }
}
.book-decor { position:absolute; inset:0; pointer-events:none; z-index:2; }
.book-decor img { position:absolute; height:auto; object-fit:contain; filter:drop-shadow(2px 3px 2px #3b2b2444); }
@media(max-width:500px) {
  .portfolio-letters { top:15.5%; font-size:46px; }
  .computer-overlay { padding:12px; }
  .computer-open { width:min(100%,430px); height:min(60svh,490px); aspect-ratio:auto; padding:8px; border:5px solid #24384d; border-radius:16px; background:#d9c9ad; box-shadow:inset 0 0 0 2px #a77c54; }
  .computer-open.folder-view { height:min(90svh,760px); }
  .computer-display { position:relative; left:auto; top:auto; width:100%; height:100%; border-radius:8px; }
  .computer-open .close-book { z-index:5; top:-45px; right:0; width:38px; height:38px; border:1px solid #cfb289; border-radius:50%; background:#422820; color:#f4e5c9; }
  .computer-open.folder-view .close-book { top:5px; right:5px; }
  .computer-open .close-book:focus-visible { outline:2px solid #45535a; outline-offset:-3px; }
  .computer-bar { padding-right:18px; }
  .computer-open.folder-view .computer-bar { padding-right:58px; }
  .computer-content { height:calc(100% - 35px); padding:18px 16px; }
  .computer-work .work-grid.video-grid { grid-template-columns:1fr; }
  .desktop-note { display:block; }.desktop-note h2 { font-size:29px; }
  .desktop-icons { grid-template-columns:repeat(2,minmax(0,1fr)); margin:22px auto 0; gap:15px 3px; }
  .desktop-icons button,.desktop-icons button:nth-child(4),.desktop-icons button:nth-child(5) { grid-column:auto; }
  .desktop-icons button { padding:3px; gap:4px; font-size:11px; line-height:1.3; }
  .folder-art { width:58px; height:58px; }
  .book-overlay { display:grid; place-items:center; overflow:hidden; padding:12px; }
  .open-book { width:min(100%,430px); max-height:none; margin:0; }
  .book-spread { display:flex; flex-direction:column; width:100%; height:min(84svh,710px); aspect-ratio:auto; overflow:hidden; padding:70px 32px 22px; border:0; border-radius:0; background:transparent url('/assets/generated-icons/letter-page-watercolor-v6.webp') center/100% 100% no-repeat; box-shadow:none; }
  .book-decor { display:none; }
  .book-page { min-width:0; padding:0; }
  .left-page { flex:none; overflow:visible; padding:0 0 13px; border-bottom:1px solid #cbb58d; }
  .right-page { flex:1; min-height:0; overflow-y:auto; padding:8px 0 20px; }
  .book-page h2 { font-size:28px; }
  .book-lead { font-size:12px; line-height:1.7; }
  .book-mini-index { display:none; }
  .personal-copy h3,.personal-gallery h3 { font-size:24px; margin:15px 0; }
  .personal-copy p,.personal-letter p { font-size:12px; line-height:1.8; }
  .book-tabs { top:11px; left:21px; right:58px; max-width:none; gap:5px; }
  .book-tabs button { border:1px solid #b8a692; border-radius:999px; padding:7px 10px; background:#e6d7bd; color:#4d4238; font-size:10px; }
  .book-tabs button:nth-child(2n) { background:#d7e2d5; border-color:#9db49e; }
  .book-tabs button:nth-child(3n) { background:#e8cdd2; border-color:#c8a5ae; }
  .book-tabs button.active { background:#76525d; border-color:#76525d; color:#fff8ec; }
  .page-turns { padding:9px 18px 0; }
  .book-overlay .close-book { top:8px; right:9px; width:36px; height:36px; border:0; border-radius:0; background:transparent; color:#5a3c2e; font:26px/1 Georgia,serif; }
  .book-overlay .close-book:focus-visible { outline:2px solid #8e623d; }
}

.book-spread.hide-book-divider .left-page { border-bottom:0; }
.book-spread.hide-index-lines .paper-index { border-bottom:0; }
.resume-inline { width:100%; margin-top:18px; overflow:hidden; border:1px solid #bda783; background:#f8f2e5; box-shadow:3px 6px 14px #6b503326; }
.resume-inline img { display:block; width:100%; height:auto; }
.book-tabs img { display:none; }
@media(max-width:500px) {
  .book-spread { padding-top:140px; }
  .book-tabs { top:8px; left:22px; right:22px; height:88px; display:block; overflow:visible; }
  .book-tabs button,.book-tabs button:nth-child(2n),.book-tabs button:nth-child(3n) { position:absolute; left:var(--tab-x); top:var(--tab-y); width:30%; height:45%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; padding:0; border:0; border-radius:0; background:none; color:#564234; box-shadow:none; font:10px/1.3 'Noto Serif SC',serif; }
  .book-tabs button.active { color:#7a3650; background:none; border:0; text-shadow:0 1px 2px #fff; }
  .book-tabs button img { display:block; width:32px; height:27px; object-fit:contain; filter:drop-shadow(2px 3px 2px #3b2b2444); }
  .book-tabs button span { white-space:nowrap; }
  .book-page h2 { font-size:22px; }
  .left-page { padding-bottom:8px; }
  .left-page .book-lead { display:none; }
  .book-spread:not([data-page="about"]) .left-page { display:none; }
  .mobile-book-lead { display:block; }
  .right-page { padding-right:16px; }
}

@media(max-width:500px) { .placed-elements { width:min(100%,46.21svh); aspect-ratio:390/844; } }