/* The palette comes from 小白手 · 开放墨线 v7.1. */
:root{--paper:#fdfcf8;--ink:#24241f;--muted:#77776e;--line:#e6e2d8;--orange:#d97757;--soft:#f2efe7;--sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;--serif:Georgia,"Times New Roman",serif}
*{box-sizing:border-box}html{scrollbar-gutter:stable}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button{border:0;background:none}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}button:focus-visible,a:focus-visible,[tabindex="0"]:focus-visible{outline:2px solid var(--orange);outline-offset:6px}button:disabled{cursor:default}button:disabled:focus{outline:none}[hidden]{display:none!important}::selection{background:#f1c7b6;color:var(--ink)}.skip-link{position:fixed;top:-70px;left:20px;padding:12px 18px;background:var(--ink);color:white;z-index:100}.skip-link:focus{top:12px}.site-shell{max-width:1440px;min-height:100svh;margin:auto;padding:0 64px;display:flex;flex-direction:column}.site-header{height:100px;flex:none;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:13px;font-size:23px;font-weight:650;letter-spacing:-.8px}.brand img{border-radius:9px;width:37px;height:37px}.site-header nav{display:flex;gap:30px;align-items:center}.site-header nav button{font-size:14px;padding:12px 2px;position:relative}.site-header nav button:after{content:"";height:1px;background:var(--orange);position:absolute;bottom:5px;left:0;right:0;transform:scaleX(0);transform-origin:left;transition:transform .2s}.site-header nav button:hover:after{transform:scaleX(1)}.nav-count{color:#9c9a91;font-size:9px;vertical-align:super;margin-left:5px;font-family:var(--serif)}main{flex:1;display:flex;flex-direction:column;justify-content:center}.home{display:grid;grid-template-columns:36% 64%;align-items:center;position:relative;min-height:590px;padding:42px 0 0}.intro{align-self:center;z-index:4;padding-bottom:56px;pointer-events:none}.eyebrow{font-family:var(--serif);font-size:23px;margin:0 0 29px;display:flex;align-items:center;gap:14px}.little-line{width:30px;height:1px;background:var(--orange);display:inline-block;transform:rotate(-8deg)}h1{font-size:clamp(42px,4.5vw,66px);letter-spacing:-2.9px;line-height:1.28;font-weight:650;margin:0 0 28px;white-space:nowrap}.orange-period{color:var(--orange)}.welcome{font-size:21px;font-weight:500;letter-spacing:.2px;margin:0 0 12px;white-space:nowrap}.intro-copy{color:var(--muted);font-size:15px;line-height:1.9;margin:0}.small-break{display:none}.now-note{display:flex;align-items:center;gap:8px;margin-top:47px;color:#89867d;font-size:11px;letter-spacing:.5px}.status-dot{display:inline-block;width:5px;height:5px;background:var(--orange);border-radius:50%;flex:none}.world{position:relative;width:114%;margin-left:-12%;aspect-ratio:3/2;isolation:isolate;align-self:center;margin-top:34px}.scene{position:relative;width:100%;z-index:2;pointer-events:none;user-select:none}.hotspot{position:absolute;padding:0;z-index:5}.hotspot-label{display:flex;gap:15px;align-items:center;border:1px solid #dad6cc;border-radius:28px;background:rgba(253,252,248,.95);padding:11px 17px;font-size:13px;white-space:nowrap;box-shadow:0 2px 6px #29261c03;transition:border-color .2s,transform .25s,box-shadow .2s}.hotspot-label>span{font-size:16px;color:#787569;transition:transform .25s,color .2s}.hotspot:hover .hotspot-label{border-color:#c1b6a3;transform:translateY(-3px);box-shadow:0 5px 12px #29261c07}.hotspot:hover .hotspot-label>span{color:var(--orange);transform:translate(2px,-2px)}.connector{position:absolute;display:block;pointer-events:none;border-color:#d4cfc3;border-style:solid}.connector:before{content:"";position:absolute;width:6px;height:6px;background:var(--orange);border-radius:50%}.about-hotspot{top:28%;left:8%}.about-hotspot .connector{top:100%;left:60%;height:37px;width:76px;border-width:0 0 1px 1px;border-radius:0 0 0 90%;transform:rotate(8deg)}.about-hotspot .connector:before{left:-3px;top:-2px}.work-hotspot{top:40%;right:-1%}.work-hotspot .connector{right:62%;top:100%;height:44px;width:48px;border-width:0 1px 1px 0;border-radius:0 0 80% 0}.work-hotspot .connector:before{right:-3px;top:0}.project-peek{z-index:3;position:absolute;left:71%;top:52%;width:13%;min-width:78px;background:#fffefa;border:1px solid #d9d4c8;padding:5px 5px 4px;border-radius:3px;box-shadow:1px 3px 7px #29261c12;transform:rotate(-7deg);transition:transform .25s,box-shadow .25s,opacity .2s}.project-peek img{width:100%;border:1px solid #eeebe3}.peek-caption{display:block;font-family:var(--serif);font-size:6px;letter-spacing:.3px;margin-top:3px}.paper-tab{position:absolute;top:-7px;right:5px;width:20px;height:10px;background:var(--orange);border-radius:1px;transform:rotate(3deg)}.project-peek:hover,.world:has(.work-hotspot:hover) .project-peek{transform:translateY(-9px) rotate(-3deg);box-shadow:1px 7px 12px #29261c13}.contact-object{position:absolute;z-index:4;left:53%;top:84%;width:14%;aspect-ratio:1.55;background:var(--orange);border-radius:2px;transform:rotate(-10deg) skewX(-6deg);color:#412b20;padding:10px 12px;text-align:left;box-shadow:2px 4px 5px #34281c0b;transition:transform .25s,box-shadow .25s,opacity .2s}.contact-object:hover,.world:has(.contact-hotspot:hover) .contact-object{transform:translateY(-5px) rotate(-6deg);box-shadow:3px 8px 10px #34281c16}.postcard-mark{position:absolute;right:8px;top:5px;font-size:17px}.contact-card-title{font-size:clamp(8px,.8vw,11px);font-weight:600;position:absolute;left:11%;bottom:25%;letter-spacing:1px}.contact-card-line{position:absolute;left:12%;bottom:15%;width:26%;height:1px;background:currentColor;opacity:.7}.contact-hotspot{left:72%;top:93%}.contact-hotspot .connector{right:100%;bottom:48%;width:49px;height:27px;border-width:1px 0 0 1px;border-radius:90% 0 0 0;transform:rotate(8deg)}.contact-hotspot .connector:before{left:-3px;bottom:0}.is-lifted{opacity:.16!important;pointer-events:none}.explore-hint{display:flex;justify-content:center;align-items:center;gap:9px;font-size:11px;color:#8d8a81;margin:8px 0 36px;letter-spacing:.6px}.explore-hint svg{color:#a7a195}.site-footer{border-top:1px solid var(--line);height:83px;display:flex;align-items:center;gap:24px;flex:none;font-size:11px;color:#969186}.footer-note{display:flex;gap:16px;letter-spacing:.5px}.footer-note>span{color:var(--orange)}.site-footer p{font-family:var(--serif);font-size:15px;color:#777267;margin-left:auto}.version{font-size:9px;border-left:1px solid var(--line);padding-left:24px;letter-spacing:1px}.noscript{padding:20px;background:var(--soft);line-height:1.7}

/* A continuous paper grid sits over broad daylight, gently softened at the center. */
body{background-color:#fffefa;isolation:isolate}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    radial-gradient(ellipse 72% 76% at 50% 46%,rgba(255,255,255,.56) 0%,rgba(255,255,255,.36) 35%,rgba(255,255,255,0) 78%),
    linear-gradient(to right,rgba(132,112,80,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(132,112,80,.05) 1px,transparent 1px),
    radial-gradient(ellipse 70% 80% at 3% 8%,rgba(244,215,155,.22) 0%,rgba(244,215,155,.09) 45%,rgba(244,215,155,0) 85%),
    radial-gradient(ellipse 62% 68% at 98% 82%,rgba(242,214,162,.2) 0%,rgba(242,214,162,.08) 43%,rgba(242,214,162,0) 85%);
  background-size:auto,40px 40px,40px 40px,auto,auto;
}
.site-shell>.site-header,.site-shell .page-section{border-bottom-color:rgba(132,112,80,.14)}
.site-shell .hero-bottom,.site-shell>.page-footer{border-top-color:rgba(132,112,80,.14)}
@media(max-width:760px){
  body::before{background-size:auto,32px 32px,32px 32px,auto,auto}
}

/* A quiet greeting lives in the existing logo, without moving the header layout. */
.brand{position:relative}
.brand-mark{display:inline-flex;flex:none;transform:rotate(var(--hand-tilt,0deg));transition:transform .24s ease-out}
.brand-mark img{transform-origin:50% 82%}
.brand-greeting{position:absolute;left:0;top:calc(100% + 12px);z-index:6;padding:7px 11px;border:1px solid var(--line);border-radius:4px 12px 12px 12px;background:var(--paper);font-size:11px;font-weight:400;letter-spacing:.5px;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(3px);transition:opacity .22s,transform .22s,visibility .22s}
.brand.is-greeting .brand-greeting{opacity:1;visibility:visible;transform:translateY(0)}
.greeting-dot{color:var(--orange)}
@media(prefers-reduced-motion:reduce){.brand-mark,.brand-greeting{transform:none!important}}

/* Small, local character motion. The original illustration stays intact. */
.living-scene{display:block;overflow:visible}
.world.motion-running .breathing-art{filter:url(#breath-field)}
.world.motion-running .nodding-art{filter:url(#nod-field)}
.steam-wisp{opacity:0;animation:steam-rise 6.8s ease-in-out infinite;animation-play-state:paused}
.steam-wisp-later{animation-duration:7.6s;animation-delay:-3.6s}
.world.motion-running .steam-wisp{animation-play-state:running}
.world:not(.motion-running) .cup-steam{visibility:hidden}
@keyframes steam-rise{0%{opacity:0;transform:translate(0,3px)}30%{opacity:.32}65%{opacity:.22}100%{opacity:0;transform:translate(7px,-23px)}}
@media(prefers-reduced-motion:reduce){.cup-steam{display:none}}
.motion-toggle{display:flex;align-items:center;gap:6px;padding:10px 0;font-size:10px;white-space:nowrap;color:#8a8174}
.motion-dot{width:4px;height:4px;border-radius:50%;background:#c8c2b7}
.motion-toggle[aria-pressed="true"] .motion-dot{background:var(--orange)}
.motion-toggle:hover{color:var(--ink)}
@media(max-width:760px){.motion-toggle{font-size:9px;margin-left:10px;padding:6px 0;min-height:32px}.site-footer .version{margin-left:6px;padding-left:8px}}
@media(prefers-reduced-motion:reduce){.living-scene .breathing-art,.living-scene .nodding-art{filter:none!important}.living-scene .eyelids{opacity:0!important}}

/* Each reading surface is a real dialog; the scene is only its visual origin. */
.modal-open{overflow:hidden}.paper-dialog{padding:0;border:0;width:min(850px,calc(100vw - 64px));max-width:none;max-height:none;background:transparent;color:var(--ink);overflow:visible;perspective:1600px;outline:none}.paper-dialog::backdrop{background:rgba(53,48,37,.14);backdrop-filter:blur(4px)}.dialog-surface{position:relative;transform-style:preserve-3d}.paper-back{position:relative;background:var(--paper);border:1px solid #ddd7c9;border-radius:9px;box-shadow:0 28px 100px #30291e22,0 2px 5px #30291e0c;backface-visibility:hidden}.card-front{display:none;position:absolute;inset:0;border-radius:9px;background:var(--orange);transform:rotateY(180deg);backface-visibility:hidden;align-items:center;justify-content:center;flex-direction:column;font-size:35px;font-weight:600;gap:24px}.card-front small{font-size:14px;font-weight:400}.paper-dialog[data-kind="contact"]{width:min(570px,calc(100vw - 40px))}.paper-dialog[data-kind="contact"] .card-front{display:flex}.close-paper{position:absolute;right:24px;top:21px;display:flex;align-items:center;gap:13px;font-size:11px;color:#817b6f;padding:8px;border-radius:6px;z-index:10}.close-paper:hover{background:#eee9df;color:var(--ink)}.close-paper svg{transition:transform .2s}.close-paper:hover svg{transform:rotate(90deg)}.paper-content{padding:43px 43px 0;max-height:88svh;overflow:auto;overscroll-behavior:contain;border-radius:9px;scrollbar-width:thin;scrollbar-color:#d8d1c3 transparent}.section-kicker{font-size:9px;letter-spacing:1.6px;color:#9a8b77;display:flex;align-items:center;gap:8px;margin:0 0 18px;font-weight:500}.orange-dash{width:15px;height:2px;display:inline-block;background:var(--orange)}.paper-heading h2{font-size:29px;letter-spacing:-.8px;margin:0;font-weight:600}.paper-intro{font-size:13px;color:var(--muted);line-height:1.8;margin:13px 0 28px}.work-tabs{display:flex;border-bottom:1px solid var(--line);gap:29px;padding:0}.work-tabs button{position:relative;display:flex;gap:8px;font-size:12px;align-items:center;padding:15px 0;color:#8b867a}.work-tabs button>span{font-family:var(--serif);font-size:10px;color:#a6a092}.work-tabs button[aria-selected="true"]{color:var(--ink);font-weight:600}.work-tabs button:after{position:absolute;content:"";bottom:-1px;left:0;right:0;height:2px;background:var(--orange);transform:scaleX(0);transition:transform .2s}.work-tabs button[aria-selected="true"]:after{transform:scaleX(1)}.tab-panels{padding:29px 0}.current-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center;min-height:260px}.preview-frame{border:1px solid #e2ddd0;padding:10px;background:#f7f5ee;border-radius:5px;transform:rotate(-1.2deg)}.frame-dots{display:flex;gap:4px;margin-bottom:10px}.frame-dots i{width:4px;height:4px;background:#d0c9b9;border-radius:50%}.preview-frame img{border:1px solid #e8e3d9;width:100%}.image-caption{display:block;text-align:center;font-size:9px;color:#9b9282;padding:12px 0 2px;letter-spacing:1px}.status-tag{font-size:10px;color:#9c735c;display:flex;align-items:center;gap:6px;margin-bottom:14px}.current-copy h3{font-size:23px;line-height:1.5;font-weight:550;letter-spacing:-.4px;margin:0 0 13px}.current-copy p,.idea-copy p,.about-copy p{font-size:14px;color:#7b776e;line-height:1.9;margin:0 0 12px}.text-link{font-size:11px;padding:5px 0;color:#9e573e;display:flex;align-items:center;gap:16px;margin-top:16px}.text-link>span{transition:transform .2s}.text-link:hover>span{transform:translateX(5px)}.paper-footer{display:flex;align-items:center;justify-content:space-between;padding:20px 0 22px;border-top:1px solid var(--line)}.paper-footer>span{font-family:var(--serif);font-size:13px;color:#9a9180;font-style:italic}.paper-footer button{font-size:10px;color:#8b7f6b;padding:6px 0}.paper-footer button span{padding-left:9px}.idea-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center;min-height:260px;padding:14px 6px}.idea-note{background:#e5a084;color:#4b3226;padding:30px 25px 22px;transform:rotate(-4deg);box-shadow:3px 6px 8px #3d2a1910;position:relative}.idea-note:before{content:"";position:absolute;width:64px;height:21px;background:#eadbc3aa;top:-9px;left:calc(50% - 32px);transform:rotate(3deg)}.note-number{font-size:9px;letter-spacing:1.5px;opacity:.65}.idea-note p{font-size:24px;line-height:1.7;letter-spacing:1px;font-weight:500;margin:23px 0 13px}.idea-note svg{width:80%;height:18px;opacity:.5}.idea-copy h3{font-size:19px;font-weight:550;margin:0 0 17px}.idea-copy .handwritten-note{font-family:var(--serif);font-size:14px;color:#9b795d;margin-top:22px}.sketch-image-wrap{background:#f4f1e9;border:1px solid var(--line);padding:10px;border-radius:4px;display:flex;align-items:center;justify-content:center;height:300px}.sketch-image-wrap img{height:100%;width:100%;object-fit:contain}.sketch-caption{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-top:20px}.sketch-caption .section-kicker{font-size:8px;margin:0 0 6px}.sketch-caption h3{font-size:15px;font-weight:550;margin:0 0 5px}.sketch-caption p{font-size:12px;color:#8a8276;line-height:1.7;margin:0;max-width:490px}.sketch-controls{display:flex;align-items:center;gap:12px;flex:none}.sketch-controls button{border:1px solid #ded6c7;border-radius:50%;width:30px;height:30px;display:grid;place-items:center;transition:background .2s}.sketch-controls button:not(:disabled):hover{background:var(--soft)}.sketch-controls button:disabled{opacity:.25}.sketch-controls>span{font-family:var(--serif);font-size:11px;color:#8a7e6a;white-space:nowrap}.about-content{padding-bottom:29px}.about-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:30px;align-items:center;margin-top:30px}.about-portrait img{mix-blend-mode:multiply;max-height:260px;object-fit:contain}.about-copy .about-lead{font-size:26px;line-height:1.5;color:var(--ink);margin-bottom:20px;font-weight:500}.interest-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}.interest-tags span{font-size:10px;border:1px solid var(--line);border-radius:20px;padding:6px 10px;color:#8e8270}.about-quote{border-top:1px solid var(--line);padding-top:24px;margin-top:27px;text-align:center}.about-quote>span{font-family:var(--serif);font-size:23px}.about-quote p{font-size:11px;color:#a09482;margin:10px 0 0}.contact-content{padding:43px 43px 25px}.postcard-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px;padding-right:8px}.postcard-top .section-kicker{margin:0}.hand-stamp{width:53px;height:53px;transform:rotate(10deg);padding:4px;background:var(--paper);border:1px dashed #b6ac99;border-radius:2px;opacity:.75;margin-top:28px}.contact-content h2{font-size:38px;font-weight:550;letter-spacing:-1px;margin:0 0 17px}.contact-lead{font-size:14px;color:#6f675b}.contact-empty{display:flex;gap:16px;padding:22px 0 24px;margin-top:20px;border-top:1px solid var(--line);align-items:center}.contact-empty p{font-size:12px;line-height:1.9;color:#958a79;margin:0}.tiny-envelope{display:grid;place-items:center;background:#f5ede2;width:38px;height:38px;border-radius:50%;font-size:19px;color:#b87856}.copy-button{border:1px solid #d8cdbc;display:flex;align-items:center;gap:10px;padding:11px 15px;border-radius:5px;font-size:11px;background:#fffef9;transition:background .2s}.copy-button:hover{background:#f5eee2}.copy-status{font-size:11px;color:#9b6b50;height:20px;line-height:20px;margin:9px 0 20px}.postcard-footer{display:flex;justify-content:space-between;gap:15px;align-items:center;padding-top:19px;border-top:1px solid var(--line);font-size:11px;color:#857965}.postcard-footer span:last-child{font-family:var(--serif);font-size:12px;font-style:italic}

@media(min-width:1450px){.home{min-height:670px}.world{margin-top:0}.intro{padding-bottom:65px}}
@media(max-width:1100px){.site-shell{padding:0 35px}.home{min-height:530px;grid-template-columns:36% 64%}.world{width:116%;margin-left:-16%;margin-top:70px}.intro{padding-bottom:70px}.welcome{font-size:17px}.intro-copy{font-size:13px}.hotspot-label{font-size:11px;padding:9px 13px;gap:10px}.about-hotspot{left:7%;top:26%}.contact-hotspot{left:72%;top:93%}.eyebrow{font-size:20px}h1{font-size:clamp(39px,4.6vw,56px)}.now-note{font-size:10px}.explore-hint{margin-top:5px;margin-bottom:30px}.site-header{height:84px}}
@media(max-width:760px){.site-shell{padding:0 24px;max-width:560px}.site-header{height:78px}.brand{font-size:19px;gap:9px}.brand img{width:30px;height:30px;border-radius:7px}.site-header nav{gap:18px}.site-header nav button{font-size:12px}.nav-count{display:none}.home{display:flex;flex-direction:column;min-height:0;padding:40px 0 0;align-items:stretch}.intro{padding:0;align-self:stretch}.eyebrow{font-size:18px;margin:0 0 18px}.little-line{width:22px}h1{font-size:46px;letter-spacing:-2px;line-height:1.25;margin-bottom:20px}.welcome{font-size:17px;margin-bottom:9px}.intro-copy{font-size:12px}.now-note{margin-top:19px;font-size:10px}.world{width:calc(100% + 32px);margin-left:-16px;margin-top:18px;margin-bottom:58px;align-self:auto}.about-hotspot{left:0;top:23%}.work-hotspot{right:-1%;top:47%}.contact-hotspot{left:auto;right:8%;top:97%}.hotspot-label{font-size:11px;min-height:40px;padding:10px 12px}.hotspot .connector{opacity:.75}.about-hotspot .connector{height:23px;width:45px}.work-hotspot .connector{height:24px;width:27px}.contact-hotspot .connector{width:26px;height:23px}.project-peek{min-width:58px;width:15%;top:53%;left:71%}.contact-object{min-width:68px;width:17%;top:84%;left:53%;min-height:44px}.contact-card-title{font-size:9px;letter-spacing:0}.postcard-mark{font-size:14px;right:5px;top:2px}.explore-hint{margin:0 0 30px;font-size:10px;letter-spacing:0;gap:6px}.explore-hint svg{width:14px}.site-footer{height:77px;flex-wrap:wrap;gap:4px;justify-content:center;align-content:center;row-gap:8px;padding:12px 0}.footer-note{font-size:9px;width:100%;justify-content:center}.site-footer p{font-size:12px;margin:0}.version{font-size:8px;margin-left:10px;padding-left:12px}.paper-dialog{width:calc(100vw - 28px)}.paper-content{padding:36px 23px 0;max-height:89svh}.close-paper{right:12px;top:12px;font-size:10px;gap:9px}.paper-heading .section-kicker{font-size:8px;letter-spacing:1.1px;margin:0 0 20px}.paper-heading h2{font-size:23px;letter-spacing:-.7px}.paper-intro{font-size:11px;margin:10px 0 17px}.work-tabs{justify-content:space-between;gap:8px}.work-tabs button{gap:5px;font-size:11px;padding:13px 0}.work-tabs button>span{font-size:8px}.tab-panels{padding:22px 0}.current-layout{grid-template-columns:1fr;gap:22px;min-height:0}.preview-frame{max-width:350px;width:100%;margin:0 auto}.current-copy h3{font-size:21px}.current-copy h3 br{display:none}.current-copy p,.idea-copy p,.about-copy p{font-size:13px}.status-tag{margin-bottom:10px}.paper-footer{gap:12px;padding:16px 0}.paper-footer>span{font-size:12px}.paper-footer button{font-size:9px}.idea-layout{grid-template-columns:1fr;gap:29px;padding:7px 0}.idea-note{max-width:240px;margin:0 auto;width:100%;padding:25px 25px 15px}.idea-note p{font-size:23px;margin:15px 0 10px}.idea-copy h3{font-size:18px}.sketch-image-wrap{height:220px;padding:5px}.sketch-caption{align-items:flex-start;flex-direction:column;gap:14px}.sketch-caption h3{font-size:14px}.sketch-caption p{font-size:12px}.sketch-controls{align-self:flex-end}.sketch-controls button{width:38px;height:38px}.about-layout{grid-template-columns:1fr;gap:0;margin-top:12px}.about-portrait{height:175px}.about-portrait img{height:100%;margin:auto}.about-copy .about-lead{font-size:24px;margin-top:8px}.about-copy .about-lead br{display:none}.about-content{padding-bottom:23px}.about-quote{padding-top:20px;margin-top:24px}.about-quote>span{font-size:21px}.paper-dialog[data-kind="contact"]{width:calc(100vw - 28px)}.contact-content{padding:30px 25px 23px}.contact-content h2{font-size:32px}.contact-lead{font-size:12px}.postcard-top{margin-bottom:19px}.hand-stamp{width:45px;height:45px;margin-top:22px}.postcard-footer{flex-wrap:wrap;font-size:10px}.contact-empty p{font-size:11px}.copy-status{height:auto;min-height:20px}.copy-button{min-height:44px}}
@media(max-width:370px){.site-shell{padding:0 18px}.site-header nav{gap:13px}.brand{font-size:17px}h1{font-size:41px}.hotspot-label{font-size:10px;padding:9px 10px}.about-hotspot{left:0}.work-hotspot{right:0}.contact-hotspot{right:2%}.paper-heading h2{font-size:21px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.hotspot:hover .hotspot-label,.hotspot:hover .hotspot-label>span,.contact-object:hover,.world:has(.contact-hotspot:hover) .contact-object,.project-peek:hover,.world:has(.work-hotspot:hover) .project-peek{transform:none}}

.close-paper{background:rgba(253,252,248,.96)}

/* Keep the original desk as a full first screen; readable sections follow it. */
html{scroll-behavior:smooth}
main{display:block;flex:none}
.first-screen{min-height:calc(100svh - 100px);display:flex;flex-direction:column}
.hero-content{flex:1;display:flex;flex-direction:column;justify-content:center}
.hero-bottom{border-top:1px solid var(--line);height:83px;display:flex;align-items:center;gap:24px;flex:none;font-size:11px;color:#969186}
.hero-bottom p{font-family:var(--serif);font-size:15px;color:#777267;margin-left:auto}
.hero-bottom .footer-note a{display:flex;gap:16px;align-items:center}
.hero-bottom .footer-note a span{color:var(--orange)}
.hero-bottom a:hover{color:var(--ink)}
.site-header nav a{font-size:14px;padding:12px 2px;position:relative}
.site-header nav a:after{content:"";position:absolute;bottom:5px;left:0;right:0;height:1px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.site-header nav a:hover:after{transform:scaleX(1)}
.below-desk{padding-top:35px}
.page-section{padding:55px 0 65px;border-bottom:1px solid var(--line);scroll-margin-top:32px}
.page-section-heading{margin-bottom:38px}
.page-section-heading .section-kicker{font-size:10px;letter-spacing:1.5px;margin-bottom:19px}
.page-section-heading h2{font-size:clamp(26px,2.7vw,38px);line-height:1.5;letter-spacing:-1px;font-weight:550;margin:0 0 16px}
.page-section-heading>p:last-child:not(.section-kicker){font-size:14px;line-height:1.9;color:#898071;margin:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.showcase-section .showcase-heading{margin-bottom:16px}
.showcase-tabs{display:flex;gap:36px;margin-bottom:28px}
.showcase-tabs button{min-height:52px;padding:4px 0 9px;font-size:30px;line-height:1.4;font-weight:550;letter-spacing:-.6px;color:#7c756a}
.showcase-tabs button span{padding:0 2px;box-shadow:inset 0 -7px transparent;transition:box-shadow .2s,color .2s}
.showcase-tabs button:hover{color:var(--ink)}
.showcase-tabs button[aria-selected="true"]{color:var(--ink)}
.showcase-tabs button[aria-selected="true"] span{box-shadow:inset 0 -7px rgba(217,119,87,.24)}
.showcase-empty{display:grid;grid-template-columns:56px minmax(0,1fr);gap:28px;align-items:center;min-height:220px;padding:36px 40px;background:rgba(255,254,250,.9);border:1px solid rgba(132,112,80,.18);border-radius:10px}
.showcase-symbol{width:56px;height:56px;fill:none;stroke:#9b8067;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.showcase-empty h3{font-size:23px;font-weight:550;line-height:1.5;letter-spacing:-.5px;margin:0 0 12px}
.showcase-empty p{font-size:14px;line-height:1.9;color:#706b61;margin:0}
@media(max-width:760px){
  .showcase-tabs{gap:26px;margin-bottom:22px}
  .showcase-tabs button{font-size:23px;min-height:48px}
  .showcase-empty{grid-template-columns:1fr;gap:20px;min-height:250px;padding:28px 24px}
  .showcase-symbol{width:40px;height:40px}
  .showcase-empty h3{font-size:20px}
  .showcase-empty p{font-size:14px}
  .showcase-empty p br{display:none}
}
.featured-project{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:center}
.featured-image{padding:25px;background:#f2efe6;border:1px solid var(--line);border-radius:5px;transform:rotate(-.6deg)}
.feature-label{display:block;font-size:9px;letter-spacing:1.6px;color:#a18f78;margin-bottom:19px}
.featured-image img{border:1px solid #e5ded0;width:100%;box-shadow:0 6px 15px #34281c06}
.feature-detail{position:relative;aspect-ratio:3/2;overflow:hidden;border:1px solid #e5ded0;background:var(--paper)}
.feature-detail img{position:absolute;width:167%;max-width:none;height:auto;left:-63%;top:-33%;border:0;box-shadow:none}
.feature-caption{display:block;text-align:center;font-size:10px;color:#a2927e;margin-top:19px}
.featured-copy h3{font-size:29px;font-weight:550;line-height:1.5;letter-spacing:-.7px;margin:16px 0 22px}
.featured-copy p{font-size:14px;line-height:2;color:#817869;margin:0 0 13px;max-width:400px}
.project-tags{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0}
.project-tags span{border:1px solid var(--line);border-radius:20px;font-size:10px;color:#93816b;padding:7px 10px}
.inline-paper-link{display:inline-flex;align-items:center;gap:25px;min-height:44px;font-size:13px;color:#a25e43;border-bottom:1px solid #d8b7a2;padding:8px 0}
.inline-paper-link span{transition:transform .2s}
.inline-paper-link:hover span{transform:translate(2px,-2px)}
.contact-on-page{border-bottom:0;padding-bottom:50px}
.contact-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:25px}
.contact-heading>img{width:70px;height:70px;padding:7px;border:1px dashed #b9ac96;transform:rotate(8deg);border-radius:3px;opacity:.8;margin:20px 10px 0 0}
.contact-directory{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:60px;margin:0;padding:0}
.contact-directory li{display:flex;align-items:center;gap:21px;min-height:110px;padding:22px 4px;border-top:1px solid var(--line)}
.platform-icon{display:block;width:38px;height:38px;flex:0 0 38px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--ink);transform:rotate(-3deg);transition:transform .32s ease;transform-origin:50% 65%}
.platform-icon .ink-echo{opacity:.25;stroke-width:1}
.contact-directory li:nth-child(even) .platform-icon{transform:rotate(2deg)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.contact-directory li:hover .platform-icon{transform:translateY(-2px) rotate(2deg)}.contact-directory li:nth-child(even):hover .platform-icon{transform:translateY(-2px) rotate(-2deg)}}
.contact-directory h3{font-size:21px;line-height:1.5;font-weight:500;margin:0 0 7px;letter-spacing:-.3px}
.platform-alias{font-size:12px;font-weight:400;letter-spacing:0;color:#a39785}
.contact-directory li p{font-size:11px;color:#9d907c;margin:0}
.contact-pending{font-size:10px;white-space:nowrap;color:#a69a87;margin-left:auto;border:1px dashed #ded5c5;border-radius:20px;padding:6px 10px}
.page-footer{justify-content:space-between;height:76px;font-size:10px}
.page-footer>a{padding:14px 0;color:#9c795d}
@media(max-width:1100px){.first-screen{min-height:calc(100svh - 84px)}.featured-project{gap:36px}.featured-copy h3{font-size:28px}.contact-directory{column-gap:35px}}
@media(max-width:760px){.first-screen{min-height:calc(100svh - 78px)}.site-header nav a{font-size:12px}.hero-bottom{height:77px;flex-wrap:wrap;gap:4px;justify-content:center;align-content:center;row-gap:8px;padding:12px 0}.hero-bottom p{font-size:12px;margin:0}.hero-bottom .version{margin-left:6px;padding-left:8px}.below-desk{padding-top:25px}.page-section{padding:44px 0 50px;scroll-margin-top:22px}.page-section-heading{margin-bottom:25px}.page-section-heading .section-kicker{font-size:9px;margin-bottom:15px}.page-section-heading h2{font-size:27px;line-height:1.6;letter-spacing:-.8px}.page-section-heading>p:last-child:not(.section-kicker){font-size:12px}.featured-project{grid-template-columns:1fr;gap:29px}.featured-image{padding:17px}.feature-label{font-size:8px;margin-bottom:14px}.feature-caption{font-size:9px;margin-top:14px}.featured-copy h3{font-size:25px;margin:13px 0 17px}.featured-copy h3 br{display:none}.featured-copy p{font-size:13px}.project-tags{margin:18px 0 10px}.inline-paper-link{font-size:12px}.contact-heading>img{width:47px;height:47px;padding:5px;margin:28px 0 0}.contact-heading .page-section-heading h2{font-size:25px;max-width:260px}.contact-directory{grid-template-columns:1fr;column-gap:0}.contact-directory li{min-height:97px;padding:20px 0;gap:18px}.contact-directory h3{font-size:21px}.contact-pending{font-size:9px}.page-footer{height:auto;min-height:76px;justify-content:space-between;gap:10px;padding:19px 0;font-size:9px}.page-footer>a{padding:8px 0}}
/* Use the native cursor normally; the logo marks clickable targets only. */
@media(min-width:761px) and (hover:hover) and (pointer:fine){
  :where(p,h1,h2,h3,h4,blockquote,input,textarea,[contenteditable="true"]){cursor:text}
  a[href],button:not(:disabled),[role="button"]:not([aria-disabled="true"]){cursor:url("assets/cursor-hand.svg") 9 2,pointer}
  :is(a[href],button:not(:disabled),[role="button"]:not([aria-disabled="true"])) *{cursor:inherit}
  button:disabled,[aria-disabled="true"]{cursor:default}
}

/* One centered reading width gives the whole site generous side margins. */
@media(min-width:761px){
  .site-shell{--header-height:100px;width:calc(100% - clamp(72px,18vw,240px));max-width:880px;padding:0}
  .first-screen{min-height:min(calc(100svh - var(--header-height)),820px)}
  .home{grid-template-columns:minmax(0,2fr) minmax(0,3fr);column-gap:24px;min-height:0;padding:clamp(12px,2svh,32px) 0 28px}
  .world{width:100%;max-width:clamp(480px,calc((100svh - 280px)*1.5),720px);justify-self:center;margin:0}
  .intro{padding-bottom:clamp(8px,2svh,24px)}
  .intro h1{margin-bottom:clamp(20px,3svh,28px)}
  .eyebrow{margin-bottom:clamp(16px,3svh,29px)}
  .now-note{margin-top:clamp(20px,4svh,47px)}
  .work-hotspot{top:calc(52% - 60px)}
  .explore-hint{margin:12px 0 clamp(20px,3svh,32px)}
  .hero-bottom{height:72px}
  .featured-project{gap:36px}
  .featured-image{padding:20px}
  .contact-directory{column-gap:36px}
}
@media(min-width:761px) and (max-width:1100px){.site-shell{--header-height:84px}}

/* Give the name more presence on wide screens, growing smoothly from 1100px. */
@media(min-width:1101px){
  .intro h1{font-size:clamp(50.6px,calc(5.6vw - 11px),71px)}
}

/* The open book and its nearby label share the same introduction. */
.book-entry{position:absolute;inset:0;z-index:5;width:100%;height:100%;padding:0;pointer-events:none;text-align:left}
.book-entry .book-object,.book-entry .about-hotspot{pointer-events:auto}
.book-entry:focus-visible{outline:none}
.book-entry:focus-visible .hotspot-label{outline:2px solid var(--orange);outline-offset:5px}
.world .about-hotspot{left:1%;top:55%}
.book-object{position:absolute;left:9%;top:77%;width:33%;height:18%;min-height:44px;padding:0;z-index:5;border-radius:6px}
.book-entry .hotspot-label{transition:color .2s}
.book-entry .hotspot-label>span:not(.about-arrow){font:inherit;color:inherit;transform:none}
.book-entry .hotspot:hover .hotspot-label{border-color:#dad6cc;transform:none;box-shadow:0 2px 6px #29261c03}
.book-entry .hotspot:hover .hotspot-label>span{transform:none}
.book-highlight{fill:rgba(217,119,87,.06);stroke:var(--orange);stroke-width:3.5;stroke-linejoin:round;opacity:0;transition:opacity .2s}
.book-turning-page{opacity:0;transform-box:view-box;transform-origin:0 0;pointer-events:none}
.book-guide{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}
.book-guide path{fill:none;stroke:#d4cfc3;stroke-width:1;vector-effect:non-scaling-stroke}
.book-guide circle{fill:var(--orange)}
.world:has(.book-entry:focus-visible) .book-highlight{opacity:1}
.book-entry:focus-visible .about-arrow{color:var(--orange)}
@media(hover:hover) and (pointer:fine){
  .world:has(.book-entry:hover) .book-highlight{opacity:1}
  .book-entry:hover .hotspot-label,.book-entry:hover .about-arrow{color:var(--orange)}
}
@media(prefers-reduced-motion:no-preference){
  .paper-dialog.is-book-opening::backdrop{animation:book-backdrop-reveal 500ms ease-out both}
  .paper-dialog.is-closing::backdrop{animation:paper-backdrop-dismiss 290ms ease-out both}
}
@keyframes book-backdrop-reveal{
  0%,24%{background:rgba(53,48,37,0);backdrop-filter:blur(0)}
  100%{background:rgba(53,48,37,.14);backdrop-filter:blur(4px)}
}
@keyframes paper-backdrop-dismiss{
  from{background:var(--closing-backdrop-color);backdrop-filter:var(--closing-backdrop-blur)}
  to{background:rgba(53,48,37,0);backdrop-filter:blur(0)}
}

/* Let phone layouts breathe, and keep labels clear of the illustrated cards. */
@media(max-width:760px){
  .brand{min-height:44px}
  .site-header nav{gap:6px}
  .site-header nav a,.site-header nav button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:12px 5px}
  .world{margin-bottom:82px}
  .hotspot-label{min-height:44px}
  .work-hotspot{top:30%}
  .contact-hotspot{top:110%}
  .hero-bottom{height:auto;min-height:92px;padding:10px 0;row-gap:0}
  .hero-bottom .footer-note a,.motion-toggle{min-height:44px}
  .hero-bottom .footer-note a{justify-content:center}
  .contact-heading{display:block;position:relative}
  .contact-heading .section-kicker{padding-right:54px;min-height:20px}
  .contact-heading .page-section-heading h2{max-width:none}
  .contact-heading>img{position:absolute;right:3px;top:-9px;width:38px;height:38px;margin:0}
  .contact-directory li{display:grid;grid-template-columns:38px minmax(0,1fr) auto;column-gap:16px;min-height:104px}
  .contact-directory h3{font-size:20px}
  .contact-directory li p{line-height:1.7}
  .contact-pending{margin-left:0}
  .page-footer>a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
}

/* Keep the paper palette, with readable supporting text at both sizes. */
.now-note,.explore-hint{font-size:12px;color:#706b61}
.hero-bottom,.page-footer{font-size:12px;color:#706b61}
.motion-toggle{font-size:12px;color:#706b61}
.version{font-size:10px;color:#706b61}
.page-section-heading .section-kicker{font-size:11px;color:#756c5e}
.page-section-heading>p:last-child:not(.section-kicker){font-size:14px;color:#706b61}
.featured-copy .status-tag{font-size:12px;color:#805f4c}
.featured-copy p{font-size:15px;color:#6b655c;line-height:1.9;margin-bottom:22px}
.feature-caption{font-size:12px;color:#706b61;margin-top:16px}
.inline-paper-link{font-size:14px}
.platform-alias,.contact-directory li p{font-size:13px;color:#706b61}
.contact-pending{font-size:11px;color:#756c5e}
.contact-directory li.contact-available{display:block;padding:0}
.contact-profile{display:grid;grid-template-columns:38px minmax(0,1fr) auto;column-gap:21px;align-items:center;min-height:inherit;padding:22px 4px}
.contact-profile-arrow{font-size:20px;color:#925437}
.contact-profile:hover h3,.contact-account:hover .account-name{color:#925437}
.contact-account{display:flex;align-items:center;gap:16px;padding:22px 0 24px;margin-top:20px;border-top:1px solid var(--line)}
.account-name{display:block;font-size:18px;line-height:1.5;font-weight:550}
.account-name>span{color:#925437}
.account-note{display:block;font-size:13px;line-height:1.7;color:#706b61;margin-top:4px}
.page-footer>a{color:#805f4c}
@media(max-width:760px){
  .now-note,.explore-hint,.motion-toggle{font-size:11px}
  .featured-copy p{font-size:14px}
  .page-footer{font-size:11px}
  .contact-directory li{column-gap:12px}
  .contact-profile{column-gap:12px;padding:20px 0}
}

/* English labels describe sections; the serif phrase is a personal signature. */
.section-kicker,.page-section-heading .section-kicker,.note-number,.peek-caption{
  font-family:var(--sans);font-weight:500;letter-spacing:.12em;font-variant-numeric:tabular-nums
}
.section-kicker,.page-section-heading .section-kicker,.note-number{font-size:11px;line-height:1.5}
.eyebrow,.about-quote>span,.paper-footer>span,.postcard-footer span:last-child{
  font-family:var(--serif);font-style:normal;letter-spacing:0
}
.hero-bottom .motion-toggle{margin-left:auto}
.intro-copy{max-width:30ch;text-wrap:pretty}

/* Reading sizes stay consistent inside the paper cards, including narrow screens. */
.paper-dialog{--reading-ink:#625d54;--reading-muted:#706b61;--reading-accent:#925437}
.paper-dialog .section-kicker{font-size:12px;color:var(--reading-muted)}
.paper-dialog .paper-intro,.paper-dialog .current-copy p,.paper-dialog .idea-copy p,.paper-dialog .about-copy p,.paper-dialog .contact-lead{font-size:15px;line-height:1.85;color:var(--reading-ink)}
.paper-dialog .about-copy .about-lead{font-size:26px;line-height:1.5;color:var(--ink)}
.paper-dialog .close-paper{font-size:13px;line-height:1.5;min-height:44px;color:var(--reading-muted)}
.paper-dialog .close-paper:hover{color:var(--ink)}
.paper-dialog .work-tabs button{font-size:14px;line-height:1.5;color:var(--reading-muted)}
.paper-dialog .work-tabs button>span{font-size:12px;color:var(--reading-muted)}
.paper-dialog .work-tabs button[aria-selected="true"]{color:var(--ink)}
.paper-dialog .image-caption{font-size:12px;line-height:1.6;letter-spacing:.04em;color:var(--reading-muted)}
.paper-dialog .status-tag{font-size:12px;color:var(--reading-accent)}
.paper-dialog .text-link,.paper-dialog .inline-paper-link{font-size:14px;line-height:1.6;min-height:44px;color:var(--reading-accent)}
.paper-dialog .paper-footer{flex-wrap:wrap;gap:10px 20px}
.paper-dialog .paper-footer>span{font-size:14px;color:var(--reading-muted)}
.paper-dialog .paper-footer button{font-size:13px;line-height:1.6;min-height:44px;color:var(--reading-muted);margin-left:auto}
.paper-dialog .note-number{font-size:12px;opacity:1}
.paper-dialog .idea-copy .handwritten-note{color:var(--reading-accent)}
.paper-dialog .sketch-caption h3{font-size:16px;line-height:1.6}
.paper-dialog .sketch-caption p{font-size:14px;line-height:1.8;color:var(--reading-ink)}
.paper-dialog .sketch-controls>span{font-size:13px;color:var(--reading-muted)}
.paper-dialog .interest-tags span{font-size:12px;line-height:1.5;color:var(--reading-muted)}
.paper-dialog .about-quote p{font-size:13px;line-height:1.8;color:var(--reading-muted)}
.paper-dialog .contact-empty p{font-size:14px;line-height:1.85;color:var(--reading-muted)}
.paper-dialog .tiny-envelope{flex-shrink:0}
.paper-dialog .copy-button{font-size:14px;line-height:1.5;min-height:44px}
.paper-dialog .copy-status{font-size:13px;line-height:1.6;height:auto;min-height:21px;color:var(--reading-accent)}
.paper-dialog .postcard-footer{font-size:12px;line-height:1.6;color:var(--reading-muted)}
.paper-dialog .postcard-footer span:last-child{font-size:14px}
@media(max-width:760px){
  .paper-dialog .work-tabs button{font-size:13px}
  .paper-dialog .about-copy .about-lead{font-size:24px}
  .paper-dialog .inline-paper-link{gap:14px}
}

@media(max-width:760px){
  .hero-bottom{justify-content:space-between;flex-wrap:nowrap;gap:12px;min-height:68px}
  .hero-bottom .footer-note{font-size:11px;letter-spacing:0}
  .hero-bottom .footer-note a{gap:10px}
  .hero-bottom .motion-toggle{flex-shrink:0}
}