@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,500&display=swap');
:root{--paper:#f4f3ed;--ink:#303128;--line:#ddded3;--accent:#f47743}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Golos Text',Arial,sans-serif;transition:background .6s}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #303128;outline-offset:7px}.eyebrow{font-size:9px;letter-spacing:1.8px}#home{min-height:100svh;padding:27px 0 24px;position:relative}.eyebrow{color:#727565}em{font-family:'Playfair Display',Georgia,serif;font-weight:500}.universe{position:relative;width:min(850px,100%);aspect-ratio:800/660;margin:-30px auto -24px}#scene{width:100%;height:100%;position:absolute;inset:0;overflow:visible;pointer-events:none}.orbit{fill:none;stroke:#bfc2b2;stroke-width:1;stroke-dasharray:2 8}.cross{fill:none;stroke:#bfc2b2;stroke-width:1}#menu button{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:190px;height:100px;background:none;border:0;border-radius:50%;font-size:19px;letter-spacing:-.5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;transition:transform .25s}#menu button .number{font-size:9px;letter-spacing:1px;opacity:.55}.menu-hint{font-size:9px;letter-spacing:0;opacity:.6}#menu button.ready{transform:translate(-50%,-50%) scale(1.12)}#menu button.ready .menu-hint{opacity:1}#handle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:0;background:none;border-radius:50%;width:180px;height:180px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}#handle:active{cursor:grabbing}#handle>span{font-size:25px;font-weight:500;line-height:1.05;letter-spacing:-.8px;pointer-events:none}#handle small{font-size:7px;letter-spacing:1.5px;pointer-events:none}body.dragging #handle{cursor:grabbing}#instruction{text-align:center;font-size:12px;position:relative;margin:0 20px;color:#535747}.alternative{text-align:center;font-size:9px;color:#8b8e80;margin:10px 15px 0}#wash{position:fixed;inset:0;z-index:10;pointer-events:none;clip-path:circle(0% at 50% 50%)}#detail{position:relative;min-height:100svh;padding:38px 8% 75px;overflow:hidden;outline:none}#back{position:relative;z-index:2;background:none;border:1px solid #30312845;border-radius:30px;padding:13px 20px;font-size:11px}.detail-content{position:relative;z-index:1;margin:100px auto 90px;max-width:1050px}.detail-content .eyebrow{color:inherit;opacity:.6}h2{font-size:clamp(65px,10vw,145px);line-height:1;letter-spacing:-6px;font-weight:400;margin:27px 0}.detail-content p{font-size:18px;line-height:1.7;max-width:480px}.coming{display:block;font-size:11px;margin-top:35px;opacity:.55}.detail-orb{position:absolute;right:-110px;bottom:10%;width:480px;height:480px;border:1px solid #30312818;border-radius:44% 56% 64% 36%;transform:rotate(-25deg);box-shadow:0 0 0 55px #ffffff08,0 0 0 110px #ffffff08}.no-script{text-align:center}[hidden]{display:none!important}@media(min-width:1100px) and (max-height:900px){.universe{width:650px;margin:-60px auto -60px}#home{padding-top:20px}#handle{width:140px;height:140px}#handle>span{font-size:23px}}@media(max-width:600px){#home{min-height:100svh;padding-top:42px;display:flex;flex-direction:column;justify-content:center}.universe{margin:5px auto 35px}#menu button{width:135px;height:75px;font-size:14px;gap:5px}.menu-hint{font-size:7px;max-width:110px}.number{font-size:8px!important}#handle{width:115px;height:115px;gap:9px}#handle>span{font-size:19px}#handle small{font-size:5px;letter-spacing:.9px}#instruction{font-size:10px;line-height:1.6}.alternative{font-size:8px}#detail{min-height:100svh;padding:28px 7% 55px}.detail-content{margin-top:100px}h2{letter-spacing:-3px;font-size:64px}.detail-content p{font-size:15px}.detail-orb{right:-260px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
/* Type and shape share one scale, so every label stays inside its pool. */
.universe{container-type:inline-size;width:min(900px,100%);margin:-18px auto -18px}
#menu button{width:22%;height:27%;gap:0;font-weight:600;letter-spacing:-1.2px;transition:transform .25s,opacity .25s}
#menu button .number{font-size:8px;font-size:1cqw;letter-spacing:1.6px;font-weight:500;opacity:.7;margin-bottom:12px;margin-bottom:1.5cqw}
#menu .menu-title{font-size:31px;font-size:3.9cqw;line-height:.96;letter-spacing:-.055em;font-weight:600}
#menu .menu-hint{font-size:20px;font-size:2.5cqw;line-height:1;opacity:.85;margin-top:12px;margin-top:1.5cqw;min-height:1em}
#menu button.ready{transform:translate(-50%,-50%) scale(1.045)}
#menu button.ready .menu-hint{font-family:'Golos Text',Arial,sans-serif;font-size:1.15cqw;letter-spacing:1.2px;line-height:2.17}
#menu button:focus-visible{outline:1px dashed #303128;outline-offset:4px}
#handle{width:24%;height:29%;gap:10px;gap:1.25cqw}
#handle>span{font-size:37px;font-size:4.6cqw;line-height:.92;letter-spacing:-.055em;font-weight:600;transition:opacity .12s,transform .2s}
#handle>span em{font-weight:500}
#handle small{font-size:6px;font-size:.78cqw;letter-spacing:1.2px;font-weight:500;transition:opacity .12s}
#handle .handle-bottom{margin-top:5px;margin-top:.6cqw}
body.dragging #handle>span,body.dragging #handle small{opacity:0;transform:scale(.9)}
body.dragging #menu button:not(.ready){opacity:.65}
body.dragging #handle:focus-visible{outline:none}


#instruction{font-size:11px;letter-spacing:.1px}
.alternative{font-size:9px;opacity:.8}
@media(min-width:1100px) and (max-height:900px){.universe{width:min(700px,calc((100svh - 255px)*1.212));margin:-20px auto -16px}#home{padding-top:18px}}
@media(max-width:600px){.universe{margin:0 auto 22px}#home{padding-top:30px}#menu button .number{font-size:1.35cqw;letter-spacing:.8px}#menu .menu-title{font-size:4.1cqw}#menu .menu-hint{font-size:3cqw}#menu button.ready .menu-hint{font-size:1.4cqw}#handle small{font-size:.92cqw;letter-spacing:.65px}#handle>span{font-size:5cqw}}
/* Full-screen corner navigation. SVG coordinates follow this stage on resize. */
#home{height:100svh;min-height:580px;padding:0;display:block;isolation:isolate}
.universe{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;margin:0;container-type:normal}



.orbit,.cross{display:none}
#menu button{width:calc(var(--pool-size)*2);height:calc(var(--pool-size)*2);border-radius:40%}
#menu button .number{font-size:clamp(7px,calc(var(--pool-size)*.075),11px);letter-spacing:1.5px;margin-bottom:calc(var(--pool-size)*.13)}
#menu .menu-title{font-size:calc(var(--pool-size)*.38);line-height:.98}
#menu .menu-hint{font-size:calc(var(--pool-size)*.24);margin-top:calc(var(--pool-size)*.14)}
#menu button.ready .menu-hint{font-size:calc(var(--pool-size)*.11)}
#handle{width:calc(185px * var(--core-unit));height:calc(185px * var(--core-unit));gap:calc(10px * var(--core-unit))}
#handle>span{font-size:calc(37px * var(--core-unit))}
#handle small{font-size:calc(6px * var(--core-unit));letter-spacing:1px}
#handle .handle-bottom{margin-top:4px}
#instruction{position:absolute;bottom:35px;left:50%;transform:translateX(-50%);width:36%;margin:0;font-size:11px;line-height:1.6;pointer-events:none}
.alternative{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);width:36%;margin:0;pointer-events:none;font-size:8px}
@media(max-width:700px){#home{height:100svh;min-height:600px}#instruction{bottom:19px;width:85%;font-size:10px}.alternative{display:none}#menu button .number{letter-spacing:.8px}}
@media(max-width:700px){}
/* Paint arrives as many drops; no radial wipe or circular clipping. */
#wash{clip-path:none;display:none;overflow:hidden}
#wash.painting{display:block;pointer-events:auto}
#wash svg{position:absolute;inset:0;width:100%;height:100%}
body{transition:none}
/* The selected label stays above the paint and travels between its two layouts. */
.shared-heading{position:fixed;inset:0;z-index:20;pointer-events:none;color:var(--ink)}
.shared-hidden{visibility:hidden!important}
#detail-title{width:max-content;max-width:100%;font-weight:600;line-height:.96;letter-spacing:-.055em;text-align:center}
#detail-number{display:block;width:max-content;font-weight:500;letter-spacing:1.5px}
.measuring-detail{position:absolute!important;left:0;right:0;visibility:hidden!important;pointer-events:none}
.measuring-home{position:absolute!important;top:0;left:0;right:0;visibility:hidden!important;pointer-events:none}
@media(max-width:600px){.measuring-home{top:0}}
/* Personal introduction belongs to the home composition, not a site header. */
.identity{position:absolute;top:clamp(22px,4svh,42px);left:24px;right:24px;text-align:center;z-index:1}
.identity h1{font-size:clamp(22px,2.1vw,32px);font-weight:500;letter-spacing:-1px;line-height:1.15;margin:0 0 9px}
.identity p{font-size:12px;line-height:1.5;margin:0;color:#66695d}
.identity p>span[aria-hidden]{margin:0 10px;color:#a3a599}
.identity .location{white-space:nowrap}
.universe{top:110px;bottom:52px;height:auto}
@media(max-width:700px){.identity{top:23px}.identity p{font-size:11px}.identity p>span[aria-hidden]{margin:0 6px}.universe{top:95px;bottom:42px}}
#handle>.drag-label{font-size:calc(24px * var(--core-unit));line-height:1.12;font-weight:500;letter-spacing:-.7px}
/* A compact paper-colored organic return button. */
#back{border:0;background:transparent;padding:18px 14px;isolation:isolate;font-size:11px;font-weight:500;width:116px;min-height:88px;line-height:1.45;text-wrap:balance}

#back:focus-visible{outline:2px dashed var(--ink);border-radius:42%;outline-offset:6px}

/* Its paper-colored silhouette stays above the paint throughout entry. */
#back{display:block}
#back:disabled{opacity:1;color:var(--ink);cursor:default}
#back.paint-reserved .back-label{opacity:0}

.back-filter{position:absolute;pointer-events:none}
.back-liquid{position:absolute;left:-36px;top:-36px;width:188px;height:160px;z-index:-1;pointer-events:none;overflow:visible}

#back .back-label{pointer-events:none}

.back-liquid{transform-origin:50% 50%;will-change:transform}

#home{cursor:default}
#home:has(#menu .ready){cursor:pointer}
.detail-cursor{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:visible;display:none}
.has-detail-cursor #back .back-liquid{visibility:hidden}
#back{z-index:3}
.back-arrow{position:absolute;transform:translate(-50%,-50%);font-size:16px;line-height:1;opacity:0;pointer-events:none}
#back.paint-reserved .back-arrow{visibility:hidden}
#back{user-select:none;-webkit-user-select:none}
#back{width:80px;min-height:72px;padding:0;display:grid;place-items:center}
#back .back-label{font-size:28px;line-height:1}
.detail-cursor{z-index:22}
.has-detail-cursor #back{z-index:23}
.has-detail-cursor #back.paint-reserved .back-liquid{visibility:visible}



#back::before{content:"";position:absolute;inset:-30px;border-radius:45%;z-index:-1}

#back .back-symbol{width:36px;height:26px;overflow:visible;display:block}

#career-ladder{display:none;pointer-events:none;position:fixed;right:3%;top:0;width:44%;height:100svh;min-height:640px;overflow:visible;z-index:19}
body[data-page="experience"] #career-ladder{display:block;position:fixed;right:3%;top:0;width:44%;height:100svh;min-height:640px;overflow:visible}
body[data-page="experience"] .detail-content{margin-left:0;width:48%}
body[data-page="experience"] #detail-title{font-size:clamp(64px,8vw,125px)}
body[data-page="experience"] .detail-orb{display:none}
@media(max-width:800px){body[data-page="experience"] .detail-content{width:100%;margin-bottom:35px}body[data-page="experience"] #career-ladder{position:absolute;top:650px;right:0;width:86%;height:500px;min-height:0;margin:0}body[data-page="experience"] #detail-title{font-size:64px}}

@media(max-width:800px){body[data-page="experience"] #detail{min-height:1200px}}

.career-labels{font-family:"Golos Text",Arial,sans-serif;font-size:16px;fill:var(--ink)}
/* Experience: compact introduction below, career history nearer the center. */
body[data-page="experience"] .detail-content{position:absolute;left:8%;top:58svh;width:31%;margin:0}
body[data-page="experience"] #detail-title{font-size:clamp(42px,4.6vw,72px);margin:20px 0;text-align:left}
body[data-page="experience"] .detail-content p{font-size:14px;line-height:1.65;max-width:310px}
body[data-page="experience"] .coming{font-size:10px;margin-top:22px}
body[data-page="experience"] #career-ladder{right:15%;top:3svh}
@media(max-width:800px){body[data-page="experience"] #career-ladder{right:0;top:125px;width:100%;height:480px}body[data-page="experience"] .detail-content{left:7%;top:720px;width:86%}body[data-page="experience"] #detail-title{font-size:48px}body[data-page="experience"] #detail{min-height:1120px}}

body[data-page="experience"] #career-ladder{right:4%;width:52%}
@media(max-width:800px){body[data-page="experience"] #career-ladder{right:0;width:100%;height:580px}body[data-page="experience"] .detail-content{top:800px}body[data-page="experience"] #detail{min-height:1200px}}

/* Experience: a compact cluster of living paper bubbles. */
body[data-page="experience"] .detail-content{top:30svh;left:8%;width:25%}
body[data-page="experience"] #career-ladder{top:15svh;right:6%;width:57%;height:76svh;min-height:0}
@media(max-width:800px){body[data-page="experience"] .detail-content{top:140px;left:8%;width:84%}body[data-page="experience"] #career-ladder{position:absolute;top:430px;right:5%;width:90%;height:850px}body[data-page="experience"] #detail{min-height:1320px}}