@charset "UTF-8";
:root{--bg:#ffffff;--ink:#242424;--muted:#808080;--line:#ececec;--panel:#f1f1f1;--soft:#e5e5e5}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:35px}html[data-theme=dark]{--bg:#171717;--ink:#e6e6e6;--muted:#929292;--line:#2c2c2c;--panel:#222;--soft:#353535}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:2px solid var(--muted);outline-offset:5px}::selection{background:#bdbdbd50}.header{position:fixed;top:0;left:max(40px,calc((100vw - 1080px)/2));width:210px;height:100vh;padding:96px 0 40px;border-left:1px dashed var(--line);display:flex;flex-direction:column}.brand{font-family:Arial,sans-serif;font-size:34px;font-weight:900;letter-spacing:-4px;line-height:1;width:fit-content}.brand-dot{letter-spacing:0}.header nav{display:flex;flex-direction:column;align-items:start;gap:15px;margin-top:39px;font-size:14px}nav a{color:var(--muted);transition:color .2s}nav a:hover,nav a.active{color:var(--ink)}.sidebar-contact{margin-top:auto;font-size:12px;color:var(--muted);line-height:2}.sidebar-contact p{margin-bottom:5px}.sidebar-contact a{font-size:12px}.utility{position:absolute;top:98px;right:max(40px,calc((100vw - 1080px)/2));display:flex;align-items:center;gap:15px;color:var(--muted);font-size:12px;letter-spacing:.5px}.utility button{border:0;background:none;color:var(--ink);font-size:20px;cursor:pointer;padding:5px}main,footer{margin-left:max(320px,calc((100vw - 520px)/2));width:560px;border-left:1px dashed var(--line);border-right:1px dashed var(--line)}.hero{padding:100px 0 65px;max-width:460px}.eyebrow{font-size:12px;font-weight:400;color:var(--muted);letter-spacing:.5px;margin:0 0 25px}.hero h1{font-size:16px;font-weight:400;line-height:1.9;margin:0 0 22px}.hero h1 a{border-bottom:1px solid #bbb}.mobile-break{display:none}.intro-copy p{color:var(--muted);font-size:14px;line-height:1.85;margin:0 0 22px}.intro-cta{display:inline-flex;align-items:center;gap:23px;margin-top:6px;padding:11px 18px;border-radius:24px;background:linear-gradient(#555,#161616);color:#fff;font-size:12px;box-shadow:inset 0 1px 1px #ffffff50}.section-label{font-size:12px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;padding:0 0 19px}.section-label span{font-size:12px;letter-spacing:.5px}.project-grid{display:flex;flex-direction:column;gap:0}.project-entry{border-top:1px solid var(--line);padding:23px 0 30px}.project-card{display:block}.project-caption{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}.project-title{display:flex;align-items:center;gap:16px}.project-index{width:34px;height:34px;border:1px solid var(--soft);border-radius:9px;display:grid;place-items:center;font-size:12px;color:var(--muted)}.project-caption h2{font-size:14px;font-weight:500;margin:0 0 5px}.project-caption p{font-size:12px;color:var(--muted);margin:0}.project-open{font-size:12px;color:var(--muted);white-space:nowrap}.project-visual{position:relative;aspect-ratio:1.5;background:var(--panel);border:1px solid var(--line);border-radius:7px;overflow:hidden}.project-visual img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}.project-card:hover img{transform:scale(1.015)}.placeholder{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background-image:radial-gradient(var(--soft) .6px,transparent .6px);background-size:6px 6px}.placeholder-word{font-size:22px;color:var(--muted);font-weight:400;letter-spacing:0;padding:24px;background:var(--panel)}.placeholder-number{position:absolute;top:17px;left:20px;font-size:12px;letter-spacing:1px;color:var(--muted)}.placeholder-note{position:absolute;bottom:18px;left:20px;font-size:12px;color:var(--muted)}.card-arrow{position:absolute;bottom:15px;right:19px;font-size:20px;color:var(--muted)}.project-description{font-size:12px;line-height:1.9;color:var(--muted);margin:19px 0 0;max-width:520px}.about-preview{border-top:1px solid var(--line);margin-top:25px;padding:35px 0 55px}.about-preview p:not(.eyebrow){font-size:14px;color:var(--muted);line-height:2;margin:0}.text-link{display:inline-block;margin-top:20px;border-bottom:1px solid var(--soft);padding-bottom:5px;font-size:12px}.text-link span{margin-left:22px}footer{padding:35px 0 28px;border-top:1px solid var(--line)}.contact-intro{color:var(--muted);font-size:14px;line-height:1.8;margin-bottom:21px}.email{display:block;font-size:14px;width:fit-content;border-bottom:1px solid var(--soft);padding-bottom:5px}.email span{margin-left:18px}.phone{display:block;color:var(--muted);font-size:12px;margin-top:14px;width:fit-content}.footer-bottom{margin-top:50px;display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.back-link{display:inline-block;color:var(--muted);font-size:12px;margin-top:100px}.detail-header{padding:35px 0}.detail-header h1,.about-hero h1{font-size:28px;line-height:1.5;font-weight:500;margin:0 0 15px}.detail-header .eyebrow{font-size:12px;margin-bottom:16px}.detail-subtitle{font-size:14px;line-height:1.8;color:var(--muted);margin:0 0 30px}.detail-meta{display:grid;grid-template-columns:1.3fr 1fr 1fr;border-top:1px solid var(--line);padding-top:19px;gap:16px}.detail-meta small{display:block;font-size:12px;color:var(--muted);margin-bottom:8px}.detail-meta p{margin:0;font-size:12px;line-height:1.7}.project-summary{display:grid;grid-template-columns:1fr;gap:18px;padding:25px 0 35px}.project-summary h2{font-size:14px;font-weight:500;margin:0 0 10px}.project-summary p{font-size:12px;line-height:1.9;color:var(--muted);margin:0 0 15px}.tags{display:flex;flex-wrap:wrap;gap:8px}.tags span{font-size:12px;border:1px solid var(--line);padding:5px 9px;border-radius:5px}.gallery{padding-bottom:30px}.gallery figure{margin:0 0 20px}.gallery button{display:block;width:100%;border:0;background:none;padding:0;cursor:zoom-in}.gallery img{display:block;width:100%;height:auto;border-radius:5px}.gallery figcaption{font-size:12px;line-height:1.8;color:var(--muted);margin-top:10px}.gallery-empty{border:1px dashed var(--soft);border-radius:5px;text-align:center;padding:45px 15px;margin-bottom:20px}.gallery-empty p{font-size:12px;color:var(--muted);line-height:1.8}.gallery-empty span{font-size:12px;letter-spacing:1px;color:var(--muted)}.next-project{border-top:1px solid var(--line);padding:24px 0 45px;display:flex;justify-content:space-between;align-items:center}.next-project small{color:var(--muted);font-size:12px}.next-project h2{font-size:18px;font-weight:400}.next-project>span{font-size:24px}.about-hero{padding:100px 0 40px}.about-hero .intro{color:var(--muted);font-size:14px;line-height:1.9}.about-stats{display:flex;gap:45px;margin-top:30px}.about-stats strong{font-size:26px;font-weight:400;display:block}.about-stats span{color:var(--muted);font-size:12px}.about-section{border-top:1px solid var(--line);padding:28px 0}.about-section>h2{font-size:12px;color:var(--muted);font-weight:400;margin:0 0 25px}.capabilities{display:grid;grid-template-columns:1fr 1fr;gap:25px}.capabilities h3{font-size:14px;font-weight:500;margin:0 0 10px}.capabilities p{font-size:12px;color:var(--muted);line-height:1.9;margin:0}.experience-row{display:flex;justify-content:space-between;gap:15px;padding:0 0 18px;margin-bottom:18px;border-bottom:1px solid var(--line)}.experience-row:last-child{border:0;margin-bottom:0}.experience-row h3{font-size:14px;font-weight:400;margin:0 0 8px}.experience-row p,.experience-row time{font-size:12px;color:var(--muted);line-height:1.8;margin:0}.experience-row time{white-space:nowrap}dialog{border:0;background:transparent;padding:50px 20px 20px;max-width:96vw;max-height:95vh;color:white}dialog::backdrop{background:#111e}dialog img{display:block;max-width:100%;max-height:78vh;object-fit:contain;margin:auto}dialog p{text-align:center;font-size:14px}.close-lightbox{position:fixed;right:24px;top:20px;background:#ffffff20;color:white;border:0;border-radius:50%;width:40px;height:40px;font-size:28px;cursor:pointer}
@media(min-width:1600px){main,footer{width:640px;margin-left:calc((100vw - 600px)/2)}}
@media(max-width:1100px){.header{left:35px;width:190px;padding-top:65px}main,footer{margin-left:270px;width:calc(100vw - 320px);max-width:560px}.utility{right:40px;top:40px}.utility>span{display:none}.hero,.about-hero{padding-top:70px}.back-link{margin-top:70px}.sidebar-contact a{font-size:12px}}
@media(max-width:760px){.header{position:relative;left:auto;width:auto;height:auto;padding:27px 0 24px;margin:0 24px;border-left:0;border-bottom:1px solid var(--line);flex-direction:row;align-items:center;justify-content:space-between}.brand{font-size:30px}.header nav{margin:0 35px 0 0;flex-direction:row;gap:18px;font-size:12px}.header nav .contact-link{display:none}.sidebar-contact{display:none}.utility{top:28px;right:20px}main,footer{margin-left:24px;width:calc(100% - 48px);max-width:none;border-left:0;border-right:0}.hero{padding:43px 0 45px;max-width:460px}.hero h1{font-size:16px}.hero .eyebrow{font-size:12px}.intro-copy p{font-size:14px}.project-caption{gap:10px}.project-title{gap:11px}.project-caption h2{font-size:14px}.project-open{font-size:12px}.placeholder-word{font-size:18px}.project-description{font-size:12px}.detail-header h1,.about-hero h1{font-size:26px}.back-link{margin-top:35px}.detail-meta{grid-template-columns:1fr;gap:16px}.detail-meta small{margin-bottom:4px}.about-hero{padding-top:45px}.capabilities{grid-template-columns:1fr}.experience-row{display:block}.experience-row time{display:block;margin-top:8px}footer{padding-top:28px}.section-label span{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}


/* 阅读字号：桌面与手机正文统一为 16px。 */
body,.hero h1,.intro-copy p,.project-description,.about-preview p:not(.eyebrow),.contact-intro,.detail-subtitle,.project-summary p,.about-hero .intro,.capabilities p{font-size:16px}.project-caption h2,.capabilities h3,.experience-row h3{font-size:16px}.header nav{font-size:14px}.email{font-size:16px}


.project-caption h2{font-weight:600}


.brand{display:block;line-height:0;letter-spacing:0;color:var(--ink)}.brand-mark{display:block;width:82px;height:auto}@media(max-width:760px){.brand-mark{width:66px}}


/* 页面各区域以留白分隔。 */
.header,main,footer,.project-entry,.about-preview,.detail-meta,.next-project,.about-section,.experience-row{border:0}


.brand-mark{width:99px;height:54px;object-fit:contain}html[data-theme=dark] .brand-mark{filter:invert(1)}@media(max-width:760px){.brand-mark{width:82px;height:auto}}


.brand-mark{width:110px;height:auto}@media(max-width:760px){.brand-mark{width:90px}}


.brand-mark{width:88px;height:auto}@media(max-width:760px){.brand-mark{width:76px}}


/* 横向作品列表，保留原生触控与键盘滚动。 */
.project-grid{flex-direction:row;gap:24px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}.project-grid::-webkit-scrollbar{display:none}.project-entry{flex:0 0 100%;min-width:0}.project-grid:focus-visible{outline:2px solid var(--soft);outline-offset:6px}


.theme-button{display:block;margin-bottom:20px;padding:9px 15px;border:1px solid var(--soft);border-radius:24px;background:var(--bg);color:var(--ink);font-size:12px;cursor:pointer;line-height:1.5}.theme-button:hover{background:var(--panel)}@media(max-width:760px){.header{flex-wrap:wrap}.sidebar-contact{display:block;width:100%;margin-top:20px}.sidebar-contact>p,.sidebar-contact>a{display:none}.theme-button{margin-bottom:0}}


.theme-options{border:0;padding:0;margin:0 0 20px;display:flex;gap:20px;color:var(--ink)}.theme-options legend{font-size:12px;color:var(--muted);margin-bottom:10px}.theme-options label{display:inline-flex;gap:7px;align-items:center;font-size:12px;cursor:pointer}.theme-options input{margin:0;width:16px;height:16px;accent-color:var(--ink);cursor:pointer}html[data-theme=dark]{color-scheme:dark}


.theme-switch{position:relative;display:flex;align-items:center;justify-content:space-around;width:100px;height:54px;padding:6px;border:0;border-radius:30px;background:#fff;box-shadow:0 2px 20px #bedff04d;cursor:pointer;margin-bottom:20px}.theme-thumb{position:absolute;left:6px;top:6px;width:42px;height:42px;border-radius:50%;background:#2856ee;transition:transform .25s}.theme-switch svg{position:relative;z-index:1;width:24px;height:24px;transition:color .25s}.theme-sun{color:#fff}.theme-moon{color:#d6dfe1}html[data-theme=dark] .theme-switch{background:#111317;box-shadow:0 2px 20px #0003}html[data-theme=dark] .theme-thumb{transform:translateX(46px)}html[data-theme=dark] .theme-sun{color:#d6dfe1}html[data-theme=dark] .theme-moon{color:#fff}


.theme-switch{width:76px;height:40px;padding:4px;border-radius:22px;box-shadow:0 2px 12px #00000012}.theme-thumb{left:4px;top:4px;width:32px;height:32px;background:#111}.theme-switch svg{width:18px;height:18px}html[data-theme=dark] .theme-thumb{transform:translateX(36px);background:#000}


.theme-segment{display:flex;width:168px;padding:4px;gap:4px;background:#f0f0f0;border-radius:10px;margin-bottom:20px}.theme-segment button{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;padding:9px 8px;border:0;border-radius:8px;background:transparent;color:#98a0af;font-size:14px;font-weight:600;cursor:pointer}.theme-segment svg{width:18px;height:18px}.theme-segment button[aria-pressed=true]{background:#fff;color:#111;box-shadow:0 2px 8px #0000000d}html[data-theme=dark] .theme-segment{background:#292929}html[data-theme=dark] .theme-segment button[aria-pressed=true]{background:#414141;color:#fff}


/* 作品横向区域延伸至视口右缘，正文保持窄栏。 */
#selected-work{width:calc(100vw - max(320px, (100vw - 520px) / 2) - 20px)}#selected-work .section-label{width:560px;max-width:100%}.project-entry{flex:0 0 480px}.project-grid{gap:16px}@media(min-width:1600px){#selected-work{width:calc(100vw - (100vw - 600px) / 2 - 20px)}#selected-work .section-label{width:640px}}@media(max-width:1100px){#selected-work{width:calc(100vw - 290px)}}@media(max-width:760px){#selected-work{width:calc(100vw - 40px)}.project-entry{flex-basis:82vw;max-width:480px}}


/* 用户提供的主题分段控件布局与样式。 */
.theme-segment{display:flex;width:fit-content;padding:var(--Spacing---spacing-xxxs,2px);align-items:center;gap:3px;border-radius:var(--Radius---border-radius-base,6px);background:var(--Fill---fill-1,#F0F1F2)}.theme-segment button{flex:none;gap:6px;padding:10px 12px;border-radius:4px;font-size:14px;line-height:20px;font-weight:500;color:#98a0af}.theme-segment svg{width:18px;height:18px}.theme-segment button[aria-pressed=true]{background:#fff;color:#111;box-shadow:0 1px 4px #0000000d}


/* Figma 2775:1016：RadioButton-Fill */
.theme-segment{display:flex;padding:2px;align-items:center;gap:3px;border-radius:6px;background:#f0f1f2;overflow:hidden}.theme-segment button{height:20px;display:flex;align-items:center;justify-content:center;gap:4px;padding:1px 8px;border-radius:4px;font-family:'PingFang SC','Microsoft YaHei',sans-serif;font-size:12px;line-height:18px;font-weight:500;color:#969fb2;white-space:nowrap;overflow:hidden}.theme-segment button[aria-pressed=true]{font-weight:600;color:#0c1e3d;background:#fff;box-shadow:0 0 2px #00000005,0 0 4px #0000000a,0 2px 8px #0000000a}.theme-segment img{display:block;flex-shrink:0}html[data-theme=dark] .theme-segment img{filter:brightness(0) invert(.65)}html[data-theme=dark] .theme-segment button[aria-pressed=true] img{filter:brightness(0) invert(1)}


/* Figma 更新：选项高 24px，横向内边距 12px。 */
.theme-segment button{height:24px;padding:3px 12px}


@font-face{font-family:'Noto Sans SC';src:url('assets/fonts/NotoSansSC-Regular.otf') format('opentype');font-style:normal;font-weight:100 400;font-display:swap}
@font-face{font-family:'Noto Sans SC';src:url('assets/fonts/NotoSansSC-Medium.otf') format('opentype');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:'Noto Sans SC';src:url('assets/fonts/NotoSansSC-Bold.otf') format('opentype');font-style:normal;font-weight:600 900;font-display:swap}
:root{--site-font:'PingFang SC','Noto Sans SC',sans-serif}
html,body,button,input,select,textarea,.brand,.theme-segment button{font-family:var(--site-font)}

.home-experience{margin-top:25px;padding-top:35px;padding-bottom:36px}.home-experience .experience-row{margin-bottom:32px}.home-education{padding-bottom:52px}


.home-experience .experience-row{display:grid;grid-template-columns:148px minmax(0,1fr);align-items:baseline;gap:20px;margin:0;padding:18px 0;border-bottom:1px solid var(--line)}.home-experience .experience-row:last-child{border-bottom:0}.home-experience .experience-row time{font-size:14px;margin:0;line-height:1.8}.experience-details{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;font-size:14px;line-height:1.8}.experience-role{color:var(--ink)}.experience-company{color:#969696}.home-experience>h2{margin-bottom:10px}@media(max-width:760px){.home-experience .experience-row{grid-template-columns:116px minmax(0,1fr);gap:12px}.home-experience .experience-row time,.experience-details{font-size:12px}}


.experience-company{color:var(--ink)}.experience-role{color:#969696}


button.project-card{width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:zoom-in}.gallery-open{overflow:hidden}#lightbox{width:94vw;max-width:1400px;height:90vh;max-height:94vh;padding:20px;border-radius:12px;background:var(--bg);color:var(--ink)}#lightbox::backdrop{background:#0006;backdrop-filter:blur(8px)}.gallery-toolbar{display:flex;align-items:center;gap:20px;font-size:14px;height:38px}.gallery-title{flex:1}.gallery-count{color:var(--muted)}#lightbox .close-lightbox{position:static;flex-shrink:0;background:var(--panel);color:var(--ink);width:32px;height:32px;line-height:1;font-size:24px}.gallery-stage{height:calc(100% - 74px);display:flex;align-items:center;justify-content:center;gap:16px;position:relative}#lightbox img{min-width:0;max-width:calc(100% - 100px);max-height:100%;object-fit:contain}#lightbox [hidden]{display:none!important}.gallery-prev,.gallery-next{flex-shrink:0;width:36px;height:36px;border:0;border-radius:50%;background:var(--panel);color:var(--ink);font-size:28px;cursor:pointer}.gallery-prev:disabled,.gallery-next:disabled{opacity:.25;cursor:default}.gallery-empty-message{color:var(--muted);font-size:16px}#lightbox p{font-size:12px;color:var(--muted);margin:10px 0 0}@media(max-width:760px){#lightbox{padding:12px;width:96vw;height:88vh}.gallery-stage{gap:6px}#lightbox img{max-width:calc(100% - 72px)}.gallery-prev,.gallery-next{width:30px;height:30px}}

#lightbox .close-lightbox{position:absolute;right:16px;top:16px;z-index:2}.gallery-stage{height:calc(100% - 30px)}.gallery-count{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:12px}


/* 图片保留原始比例，仅在超出可视区域时缩小。 */
#lightbox .gallery-stage{height:calc(100% - 30px);padding-top:30px}
#lightbox .gallery-stage img{width:auto;height:auto;max-width:calc(100% - 100px);max-height:100%;object-fit:contain;flex-shrink:1}
#lightbox .close-lightbox{position:absolute;right:16px;top:16px;background:var(--panel);color:var(--ink);z-index:3}
#lightbox .gallery-prev,#lightbox .gallery-next{background:var(--panel);color:var(--ink)}
#lightbox .close-lightbox:hover,#lightbox .gallery-prev:not(:disabled):hover,#lightbox .gallery-next:not(:disabled):hover{background:var(--soft)}
#lightbox::backdrop{background:rgba(0,0,0,.35)}
html[data-theme=dark] #lightbox::backdrop{background:rgba(0,0,0,.72)}
#lightbox .gallery-count,#lightbox .gallery-empty-message,#lightbox p{color:var(--muted)}
@media(max-width:760px){#lightbox .gallery-stage img{max-width:calc(100% - 72px)}}

/* 全屏图片展览：去除弹窗容器，以留白突出作品。 */
#lightbox{position:fixed;inset:0;margin:0;width:100vw;max-width:none;height:100dvh;max-height:none;padding:0;border:0;border-radius:0;box-shadow:none;overflow:hidden;background:var(--bg)}
#lightbox::backdrop,html[data-theme=dark] #lightbox::backdrop{background:var(--bg);backdrop-filter:none}
#lightbox .gallery-stage{height:100%;padding:72px 80px 100px;gap:0}
#lightbox .gallery-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
#lightbox .close-lightbox{right:22px;top:16px;width:32px;height:32px;background:none;font-size:22px;font-weight:400;color:var(--muted)}
#lightbox .close-lightbox:hover{background:var(--panel)}
#lightbox .gallery-prev,#lightbox .gallery-next{position:absolute;top:50%;transform:translateY(-50%);background:none;color:var(--muted);opacity:0;transition:opacity .2s}
#lightbox .gallery-prev{left:20px}#lightbox .gallery-next{right:20px}
#lightbox .gallery-stage:hover .gallery-prev,#lightbox .gallery-stage:hover .gallery-next,#lightbox .gallery-prev:focus-visible,#lightbox .gallery-next:focus-visible{opacity:.7}
#lightbox .gallery-prev:disabled,#lightbox .gallery-next:disabled{visibility:hidden}
#lightbox p{position:absolute;bottom:46px;left:20px;right:20px;margin:0;text-align:center}
.gallery-dots{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:2px}
.gallery-dots button{display:grid;place-items:center;width:14px;height:20px;border:0;padding:0;background:none;cursor:pointer}
.gallery-dots button:before{content:'';width:5px;height:5px;border-radius:50%;background:var(--soft)}
.gallery-dots button[aria-pressed=true]:before{background:var(--ink)}
@media(max-width:760px){#lightbox .gallery-stage{padding:64px 20px 80px}#lightbox .gallery-stage img{max-width:100%}#lightbox .gallery-prev{left:0}#lightbox .gallery-next{right:0}#lightbox .close-lightbox{right:12px;top:12px}}

.sidebar-contact .theme-segment{margin-top:20px;margin-bottom:0}

.brand{width:78.45px;height:25.992px}.brand .brand-mark{width:auto;height:auto;max-width:none;object-fit:initial;transform:scale(2);transform-origin:top left}

.brand .brand-mark{filter:drop-shadow(.35px 0 0 #111) drop-shadow(-.35px 0 0 #111) drop-shadow(0 .3px 0 #111) blur(.3px) drop-shadow(0 .8px .8px #0006)}html[data-theme=dark] .brand .brand-mark{filter:drop-shadow(.35px 0 0 #111) drop-shadow(-.35px 0 0 #111) drop-shadow(0 .3px 0 #111) blur(.3px) drop-shadow(0 .8px .8px #0006) invert(1)}

.brand .brand-mark{transform:scale(1.9,2.35);filter:drop-shadow(.55px 0 0 #111) drop-shadow(-.55px 0 0 #111) drop-shadow(0 .45px 0 #111) blur(.22px) drop-shadow(-1px .75px .65px #111b) drop-shadow(-1.25px .5px .9px #1116)}.brand{width:74.53px;height:30.54px}html[data-theme=dark] .brand .brand-mark{filter:drop-shadow(.55px 0 0 #111) drop-shadow(-.55px 0 0 #111) drop-shadow(0 .45px 0 #111) blur(.22px) drop-shadow(-1px .75px .65px #111b) drop-shadow(-1.25px .5px .9px #1116) invert(1)}

.brand{position:relative;isolation:isolate}.brand .brand-mark{position:relative;z-index:1;filter:drop-shadow(.2px 0 0 #111) drop-shadow(-.2px 0 0 #111)}.brand::before{content:'';position:absolute;z-index:0;left:-2px;top:1px;width:74.53px;height:30.54px;background:url('assets/wxy-figma.svg') center/100% 100% no-repeat;filter:blur(1.5px);opacity:.5;clip-path:polygon(0 0,38% 0,55% 100%,0 100%);pointer-events:none}html[data-theme=dark] .brand .brand-mark{filter:drop-shadow(.2px 0 0 #111) drop-shadow(-.2px 0 0 #111) invert(1)}html[data-theme=dark] .brand::before{filter:blur(1.5px) invert(1)}

.brand .brand-mark{-webkit-mask-image:linear-gradient(125deg,transparent 0%,transparent 10%,#000 27%,#000 100%);mask-image:linear-gradient(125deg,transparent 0%,transparent 10%,#000 27%,#000 100%)}.brand::before{left:-1px;top:0;opacity:1;filter:blur(2px);clip-path:none;-webkit-mask-image:linear-gradient(125deg,#000 0%,#000 12%,transparent 32%,transparent 100%);mask-image:linear-gradient(125deg,#000 0%,#000 12%,transparent 32%,transparent 100%)}html[data-theme=dark] .brand::before{filter:blur(2px) invert(1)}

.brand{--logo-clear-mask:radial-gradient(ellipse 18% 55% at 5% 5%,transparent 0%,#000 100%),radial-gradient(ellipse 15% 52% at 50% 0%,transparent 0%,#000 100%),radial-gradient(ellipse 20% 55% at 98% 98%,transparent 0%,#000 100%)}.brand .brand-mark{-webkit-mask-image:var(--logo-clear-mask);mask-image:var(--logo-clear-mask);-webkit-mask-composite:source-in;mask-composite:intersect}.brand::before{left:0;top:0;filter:blur(1.8px);-webkit-mask-image:radial-gradient(ellipse 22% 65% at 5% 5%,#000 0%,transparent 100%),radial-gradient(ellipse 19% 62% at 50% 0%,#000 0%,transparent 100%),radial-gradient(ellipse 24% 65% at 98% 98%,#000 0%,transparent 100%);mask-image:radial-gradient(ellipse 22% 65% at 5% 5%,#000 0%,transparent 100%),radial-gradient(ellipse 19% 62% at 50% 0%,#000 0%,transparent 100%),radial-gradient(ellipse 24% 65% at 98% 98%,#000 0%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}html[data-theme=dark] .brand::before{filter:blur(1.8px) invert(1)}

/* Stronger localized diffusion: W upper-left, X top, Y lower-right. */
.brand{--logo-clear-mask:radial-gradient(ellipse 24% 72% at 5% 5%,transparent 0%,transparent 22%,#000 100%),radial-gradient(ellipse 19% 68% at 50% 0%,transparent 0%,transparent 20%,#000 100%),radial-gradient(ellipse 26% 72% at 98% 98%,transparent 0%,transparent 22%,#000 100%)}.brand::before{filter:blur(3px);-webkit-mask-image:radial-gradient(ellipse 30% 90% at 5% 5%,#000 0%,#000 25%,transparent 100%),radial-gradient(ellipse 25% 85% at 50% 0%,#000 0%,#000 25%,transparent 100%),radial-gradient(ellipse 32% 90% at 98% 98%,#000 0%,#000 25%,transparent 100%);mask-image:radial-gradient(ellipse 30% 90% at 5% 5%,#000 0%,#000 25%,transparent 100%),radial-gradient(ellipse 25% 85% at 50% 0%,#000 0%,#000 25%,transparent 100%),radial-gradient(ellipse 32% 90% at 98% 98%,#000 0%,#000 25%,transparent 100%)}html[data-theme=dark] .brand::before{filter:blur(3px) invert(1)}

.brand::before{display:none}.brand .brand-mark{-webkit-mask-image:none;mask-image:none;filter:url(#logo-local-blur)}html[data-theme=dark] .brand .brand-mark{filter:url(#logo-local-blur) invert(1)}

.brand{width:100px;height:50px}.brand::before{display:none}.brand .brand-mark{width:100px;height:50px;object-fit:contain;transform:none;filter:none;-webkit-mask-image:none;mask-image:none}html[data-theme=dark] .brand .brand-mark{filter:invert(1)}

.brand{width:74.53px;height:30.54px}.brand .brand-mark{width:auto;height:auto;object-fit:initial;transform:scale(1.9,2.35);transform-origin:top left;filter:none}html[data-theme=dark] .brand .brand-mark{filter:invert(1)}

/* Preserve the Figma letterforms and apply localized fluid-edge diffusion. */
.brand .brand-mark{filter:url(#logo-local-blur) drop-shadow(0 .35px .3px #0002)}html[data-theme=dark] .brand .brand-mark{filter:url(#logo-local-blur) drop-shadow(0 .35px .3px #0002) invert(1)}

.brand .brand-mark{filter:url(#logo-local-blur) drop-shadow(0 .7px .7px #0003)}html[data-theme=dark] .brand .brand-mark{filter:url(#logo-local-blur) drop-shadow(0 .7px .7px #0003) invert(1)}

.brand .brand-mark{transform:scale(2);filter:none}html[data-theme=dark] .brand .brand-mark{filter:invert(1)}

/* Prompt-only treatment: original vector, soft smooth edges, subtle floating shadow. */
.brand .brand-mark{transform:scale(2);filter:blur(.45px) drop-shadow(0 .65px .65px #0003);mask-image:none;-webkit-mask-image:none}html[data-theme=dark] .brand .brand-mark{filter:blur(.45px) drop-shadow(0 .65px .65px #0003) invert(1)}

.brand{width:78.45px;height:25.992px}.brand::before{display:none}.brand .brand-mark{width:auto;height:auto;transform:scale(2);transform-origin:top left;filter:blur(.6px) drop-shadow(0 .5px .7px rgba(0,0,0,.16));-webkit-mask-image:none;mask-image:none}html[data-theme=dark] .brand .brand-mark{filter:blur(.6px) drop-shadow(0 .5px .7px rgba(0,0,0,.16)) invert(1)}

/* Restore the softer-edge-logo version selected by the user. */
.brand{width:74.53px;height:30.54px}.brand::before{display:none}.brand .brand-mark{width:auto;height:auto;transform:scale(1.9,2.35);transform-origin:top left;filter:url(#logo-local-blur);-webkit-mask-image:none;mask-image:none}html[data-theme=dark] .brand .brand-mark{filter:url(#logo-local-blur) invert(1)}

.project-entry .project-name{font-size:16px;font-weight:600;line-height:1.5;margin:20px 0 8px;color:var(--ink)}.project-entry .project-description{margin-top:0}

/* Hide the page scrollbar while preserving normal scrolling. */
html,body{scrollbar-width:none;-ms-overflow-style:none}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}

#selected-work .section-label{margin-bottom:16px}.project-entry .project-description{font-size:14px;line-height:1.7;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-overflow:ellipsis;max-height:3.4em;margin-top:0}

.hero .intro-cta{display:inline-flex;align-items:center;justify-content:center;gap:18px;background:#000;background-image:none;color:#fff;font-size:14px;line-height:20px;box-shadow:none;padding:10px 18px}.hero .intro-cta span{display:inline-flex;align-items:center;justify-content:center;margin:0;font-size:16px;line-height:20px}.hero .intro-cta:hover{background:#000;background-image:none}html[data-theme=dark] .hero .intro-cta{background:#000;background-image:none;color:#fff}

#selected-work .section-label{padding-bottom:0;margin-bottom:16px}#selected-work .project-entry{padding-top:0}

/* User-approved 14px typography scale. */
.hero h1,.intro-copy p,.project-entry .project-name,.project-entry .project-description,.home-experience .experience-row time,.home-experience .experience-details,.home-experience .experience-company,.home-experience .experience-role,.header nav,.hero .intro-cta,.eyebrow,.section-label,.about-section>h2,.sidebar-contact,.sidebar-contact a,.theme-segment button,.phone,.footer-bottom{font-size:14px}.project-entry .project-name{font-weight:600}.theme-segment button{line-height:20px;height:26px}.theme-segment button img{width:14px;height:14px}

.intro-copy p{color:#000}html[data-theme=dark] .intro-copy p{color:#e6e6e6}

.project-entry .project-name{font-weight:600}

.brand{width:59.624px;height:24.432px}.brand .brand-mark{transform:scale(1.52,1.88)}

.footer-top .email,.footer-top .phone{display:flex;align-items:center;gap:8px;color:#000;font-size:14px;line-height:22px;border:0;padding:0}.footer-top .email span{margin:0}.contact-icon{width:16px;height:16px;flex-shrink:0}html[data-theme=dark] .footer-top .email,html[data-theme=dark] .footer-top .phone{color:#e6e6e6}

.hero .intro-cta span{font-size:14px}

/* Sync About page text with the approved 14px scale. */
.about-hero .intro,.about-stats span,.capabilities h3,.capabilities p,.about-section .experience-row h3,.about-section .experience-row p,.about-section .experience-row time{font-size:14px}

.header nav a{position:relative;isolation:isolate}.header nav a.active::before{content:'';position:absolute;inset:-8px -14px;z-index:-1;background:url('assets/nav-chalk.svg') center/100% 100% no-repeat;pointer-events:none}html[data-theme=dark] .header nav a.active::before{filter:invert(1)}

.sidebar-contact-details .eyebrow{margin:0 0 16px;color:var(--muted)}.sidebar-contact-details .email,.sidebar-contact-details .phone{display:flex;align-items:center;gap:8px;border:0;padding:0;margin:0;color:#000;font-size:14px;line-height:22px;white-space:nowrap}.sidebar-contact-details .phone{margin-top:12px}.sidebar-contact-details .email span{margin:0}.sidebar-contact-details .contact-icon{width:16px;height:16px}html[data-theme=dark] .sidebar-contact-details .email,html[data-theme=dark] .sidebar-contact-details .phone{color:#e6e6e6}.header{width:250px}@media(max-width:1100px){.header{width:220px}}@media(max-width:760px){.header{width:auto}.sidebar-contact-details{display:block}.sidebar-contact-details .eyebrow{display:block}}

.header nav a.active::before{inset:auto -5px -6px;height:7px;background-image:url('assets/nav-chalk-underline.svg')}

.header nav a.active::before{height:9px;background-image:url('assets/nav-chalk-underline.svg?v=2')}

.header nav a.active::before{height:10px;background-image:url('assets/nav-chalk-underline.svg?v=3')}

.header nav a.active::before{height:10px;inset:auto -4px -8px;background-image:url('assets/nav-chalk-underline.svg?v=4')}

.header nav{gap:24px}

.hero h1,.hero .intro-copy p{font-size:16px}

.home-experience>h2{margin-bottom:8px}.home-experience .experience-row:first-child{padding-top:0}.sidebar-contact-details .eyebrow{margin-bottom:8px}#lightbox{background:transparent}#lightbox::backdrop{background:rgba(255,255,255,.82);backdrop-filter:blur(8px)}html[data-theme=dark] #lightbox{background:transparent}html[data-theme=dark] #lightbox::backdrop{background:rgba(23,23,23,.82);backdrop-filter:blur(8px)}

.sidebar-contact .theme-segment{position:relative;margin-top:25px;overflow:visible}.sidebar-contact .theme-segment::before{content:'';position:absolute;left:0;right:0;top:-13px;height:1px;background:var(--line)}

.sidebar-contact .theme-segment{margin-top:41px}.sidebar-contact .theme-segment::before{top:-21px}

#back-top{display:none}@media(max-width:760px){#back-top{display:flex;align-items:center;justify-content:center;position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:10;width:40px;height:40px;padding:0;border:0;border-radius:12px;background:#fff;color:#000;box-shadow:0 3px 16px #0000001f;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s}#back-top.is-visible{opacity:1;visibility:visible;pointer-events:auto}html[data-theme=dark] #back-top{background:#292929;color:#fff;box-shadow:0 3px 16px #0006}.gallery-open #back-top{visibility:hidden}}

/* Work experience timeline: replace horizontal rules with connected nodes. */
.home-experience .experience-row{position:relative;border-bottom:0;padding-left:20px}.home-experience .experience-row::before{content:'';position:absolute;left:3px;top:0;bottom:0;width:1px;background:var(--line)}.home-experience .experience-row::after{content:'';position:absolute;left:0;top:25px;width:7px;height:7px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px var(--bg)}.home-experience .experience-row:first-child::before{top:7px}.home-experience .experience-row:first-child::after{top:7px}.home-experience .experience-row:last-child::before{bottom:calc(100% - 28px)}.about-section:not(.home-experience) .experience-row{position:relative;padding-left:20px;border-bottom:0}.about-section:not(.home-experience) .experience-row::before{content:'';position:absolute;left:3px;top:7px;bottom:-18px;width:1px;background:var(--line)}.about-section:not(.home-experience) .experience-row::after{content:'';position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px var(--bg)}.about-section:not(.home-experience) .experience-row:last-child::before{display:none}

.sidebar-contact-details{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.sidebar-contact .sidebar-contact-details .eyebrow{margin:0;line-height:20px}.sidebar-contact .sidebar-contact-details .email,.sidebar-contact .sidebar-contact-details .phone{margin:0;line-height:22px}

.home-experience .experience-row::after,.about-section:not(.home-experience) .experience-row::after{background:var(--bg);border:1.5px solid var(--ink)}

.hero{max-width:none;width:100%}.about-hero h1{font-weight:600}

/* Smooth light/dark theme transitions. */
body,.header,main,footer,.hero h1,.intro-copy p,.header nav a,.eyebrow,.section-label,.project-visual,.project-name,.project-description,.about-hero h1,.about-hero .intro,.capabilities h3,.capabilities p,.experience-row,.experience-row time,.experience-company,.experience-role,.sidebar-contact-details .email,.sidebar-contact-details .phone,.footer-bottom,.theme-segment,.theme-segment button,#lightbox,#back-top{transition:background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}.brand-mark,.theme-segment img,.header nav a::before{transition:filter .25s ease}.experience-row::before,.experience-row::after,.theme-segment::before,.gallery-dots button::before{transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease}@media(prefers-reduced-motion:reduce){body,.header,main,footer,.hero h1,.intro-copy p,.header nav a,.eyebrow,.section-label,.project-visual,.project-name,.project-description,.about-hero h1,.about-hero .intro,.capabilities h3,.capabilities p,.experience-row,.experience-row time,.experience-company,.experience-role,.sidebar-contact-details .email,.sidebar-contact-details .phone,.footer-bottom,.theme-segment,.theme-segment button,#lightbox,#back-top,.brand-mark,.theme-segment img,.header nav a::before,.experience-row::before,.experience-row::after,.theme-segment::before,.gallery-dots button::before{transition:none}}

/* Consistent heading-to-content spacing on Home and About. */
#selected-work .section-label,.about-section>h2,.home-experience>h2{margin-bottom:16px;padding-bottom:0}.home-experience .experience-row:first-child{padding-top:0}.about-hero h1{margin-bottom:16px}.capabilities h3{margin-bottom:16px}.about-section:not(.home-experience) .experience-row h3{margin-bottom:16px}

.education-details{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px}.about-section .experience-row .education-details h3,.about-section .experience-row .education-details p{margin:0;font-size:14px;line-height:1.8}.education-details h3{color:var(--ink)}.education-details p{color:var(--muted)}

.hero h1 a{position:relative;display:inline-block;isolation:isolate;border-bottom:0;white-space:nowrap}.hero h1 a::before{content:'';position:absolute;inset:-6px -10px;z-index:-1;background:url('assets/name-chalk-circle.svg') center/100% 100% no-repeat;pointer-events:none}html[data-theme=dark] .hero h1 a::before{filter:brightness(1.2)}
html[data-theme=dark] .hero h1 a::before{filter:invert(1)}
@media(max-width:760px){
 footer>.sidebar-contact{display:block;width:100%;margin:0;padding:24px 0 0}
 footer .sidebar-contact-details{width:100%;gap:16px}
 footer .sidebar-contact .theme-segment{width:100%;margin-top:41px}
 footer .theme-segment button{flex:1;height:36px}
 .home-experience .experience-row{grid-template-columns:minmax(0,1fr);gap:8px;padding-bottom:24px}
 .home-experience .experience-row time{white-space:normal}
 .home-experience .experience-details{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
 .home-experience .experience-company,.home-experience .experience-role{overflow-wrap:anywhere}
 .about-section .experience-row .education-details{flex-direction:column;align-items:flex-start;gap:4px}
}
@media(max-width:760px){footer .sidebar-contact .theme-segment{display:none}}
.hero h1 a::before{inset:-8px -13px}
/* Compact module spacing for small screens. */
@media(max-width:760px){
 .hero{padding-top:32px;padding-bottom:32px}
 .hero .intro-cta{display:flex;width:100%;min-height:44px}
 #selected-work .project-entry{padding-bottom:0}
 .about-hero{padding-top:32px;padding-bottom:0}
 .about-section{margin-top:32px;padding-top:0;padding-bottom:0}
 .home-experience{margin-top:32px;padding-top:0;padding-bottom:0}
 .home-experience .experience-row:last-child{padding-bottom:0}
 footer{padding-top:32px;padding-bottom:24px}
 footer>.sidebar-contact{padding-top:0}
 .footer-bottom{margin-top:32px}
}
.hero h1 a{font-weight:600}
.hero h1 a::before{content:none}
.hero h1 a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--muted)}
.contact-bubble{position:fixed;z-index:30;width:280px;padding:20px;border:1px solid #ffffff80;border-radius:20px;background:rgba(255,255,255,.88);color:var(--ink);box-shadow:0 12px 40px #00000020,inset 0 1px 0 #fff;backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);animation:contact-appear .28s ease-out}
.contact-bubble[hidden]{display:none}
.contact-bubble>.eyebrow{margin:0 0 16px;font-size:14px}
.contact-qr{padding:12px;background:#fff;border-radius:12px;text-align:center}
.contact-qr img{display:block;width:176px;height:176px;margin:0 auto}
.contact-qr span{display:block;color:#888;font-size:12px;margin-top:4px}
.bubble-details{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
.bubble-details>.eyebrow{display:none}
.bubble-details a{display:flex;align-items:center;gap:8px;font-size:14px;line-height:22px;border:0;padding:0;margin:0;color:var(--ink)}
.bubble-details .email span{margin:0}
html[data-theme=dark] .contact-bubble{background:rgba(35,35,35,.88);border-color:#ffffff20;box-shadow:0 12px 40px #0006,inset 0 1px 0 #ffffff12}
@keyframes contact-appear{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.contact-bubble{animation:none}}
@media(max-width:760px){.contact-bubble{display:none}}
.hero h1,.hero .intro-copy p{font-size:14px}
/* Compact contact card with a tighter QR quiet zone. */
.contact-bubble{width:232px;padding:16px;border-radius:16px;border-color:rgba(0,0,0,.06);background:rgba(255,255,255,.94);box-shadow:0 8px 28px #00000012,0 2px 6px #00000005}
.contact-qr{padding:8px;border:1px solid #00000005;border-radius:10px}
.contact-qr img{width:164px;height:164px}
.contact-qr span{font-size:11px;line-height:16px;margin-top:6px;color:#999}
.bubble-details{margin-top:12px;padding-top:12px;gap:8px}
.bubble-details a{font-size:13px;line-height:20px}
.bubble-details .contact-icon{width:14px;height:14px}
html[data-theme=dark] .contact-bubble{background:rgba(35,35,35,.94);box-shadow:0 8px 28px #0005,0 2px 6px #0002}
/* Solid contact popover, matching the compact reference. */
.contact-bubble{width:232px;padding:18px;border:0;border-radius:4px;background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 8px 36px rgba(0,0,0,.09)}
.contact-bubble::before{content:'';position:absolute;left:-6px;top:28px;width:12px;height:12px;background:inherit;transform:rotate(45deg)}
.contact-qr{padding:0;border:0;border-radius:0;background:#fff}
.contact-qr img{width:176px;height:176px}
.contact-qr span{display:none}
.bubble-details{margin-top:16px;padding-top:0;border-top:0;gap:10px}
.bubble-details a{font-size:13px;line-height:20px;white-space:nowrap}
html[data-theme=dark] .contact-bubble{background:#262626;box-shadow:0 8px 36px #0005}
.contact-bubble{border-radius:12px}
.contact-qr-image{position:relative;width:176px;height:176px;overflow:hidden;margin:0 auto;background:#fff}
.contact-qr .contact-qr-image img{position:absolute;width:248px;height:auto;max-width:none;left:-36px;top:-84px;margin:0}
.contact-bubble::before{top:calc(50% - 6px)}
.contact-bubble{padding:8px 12px}
.contact-qr-image{width:140.8px;height:140.8px}
.contact-qr .contact-qr-image img{width:198.4px;left:-28.8px;top:-67.2px}
.contact-bubble{padding:20px}
.contact-qr-image{margin:0}
.contact-bubble{width:max-content;max-width:calc(100vw - 32px);padding:20px}
.bubble-details a{width:max-content}
.contact-qr-image{width:var(--contact-qr-size,164px);height:var(--contact-qr-size,164px)}
.contact-qr .contact-qr-image img{width:140.9091%;left:-20.4545%;top:-47.7273%}
.bubble-details a{font-size:14px;line-height:22px}
.bubble-details a{letter-spacing:.5px}
@media(max-width:760px){.contact-bubble:not([hidden]){display:block}.contact-bubble::before{display:none}}
@media(min-width:761px){.hero,.about-hero{padding-top:96px}}
@media(max-width:760px){
 html{scroll-padding-top:88px}
 .header{position:sticky;top:0;z-index:20;margin:0;padding:27px 24px 24px;width:100%;background:var(--bg);box-shadow:0 1px 0 var(--line)}
}
.home-skills .skill-content h3{margin:0 0 8px;font-size:14px;font-weight:600;line-height:1.8;color:var(--ink)}
.home-skills .skill-content p{margin:0;color:var(--muted);font-size:14px;line-height:1.8}
@media(max-width:760px){
 footer .sidebar-contact-details{flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px 16px}
 footer .sidebar-contact-details .eyebrow{flex-basis:100%}
}
.skill-list{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0;color:var(--ink);font-size:14px;line-height:1.8}
@media(max-width:760px){.header nav{margin-right:0}}
.sidebar-contact-details .email,.sidebar-contact-details .phone{letter-spacing:.5px}
.time-greeting{display:flex;align-items:center;gap:10px;margin-bottom:16px;color:var(--muted);font-size:14px;line-height:22px;font-weight:400}
.time-greeting svg{width:18px;height:18px;flex-shrink:0}
.time-greeting .greeting-dot{color:var(--muted)}
.sidebar-contact-details .contact-icon,.bubble-details .contact-icon{width:16px;height:16px;stroke-width:1.5;display:block;flex-shrink:0}
.time-greeting{font-size:14px}
.brand .brand-avatar{width:56px;height:56px;object-fit:contain;transform:none;filter:none}
.brand:has(.brand-avatar){width:56px;height:56px}
html[data-theme=dark] .brand .brand-avatar{filter:none}
@media(max-width:760px){.brand .brand-avatar,.brand:has(.brand-avatar){width:44px;height:44px}}
.brand .brand-avatar,html[data-theme=dark] .brand .brand-avatar{filter:grayscale(1)}
@media(max-width:760px){.header{padding:12px 24px}.hero,.about-hero{padding-top:24px}html{scroll-padding-top:80px}}
@media(min-width:761px){.header,.hero,.about-hero{padding-top:64px}}
@media(max-width:760px){.header{padding:20px 24px}}
.header nav a.active{font-weight:600}
/* Restore the stronger three-region logo treatment from the reference. */
.brand{width:74.53px;height:30.54px;--logo-clear-mask:radial-gradient(ellipse 18% 55% at 5% 5%,transparent 0%,#000 100%),radial-gradient(ellipse 15% 52% at 50% 0%,transparent 0%,#000 100%),radial-gradient(ellipse 20% 55% at 98% 98%,transparent 0%,#000 100%)}
.brand .brand-mark{transform:scale(1.9,2.35);filter:none;-webkit-mask-image:var(--logo-clear-mask);mask-image:var(--logo-clear-mask);-webkit-mask-composite:source-in;mask-composite:intersect}
.brand::before{display:block;content:'';position:absolute;left:0;top:0;width:74.53px;height:30.54px;background:url('assets/wxy-figma.svg') center/100% 100% no-repeat;filter:blur(1.8px);opacity:1;clip-path:none;-webkit-mask-image:radial-gradient(ellipse 22% 65% at 5% 5%,#000 0%,transparent 100%),radial-gradient(ellipse 19% 62% at 50% 0%,#000 0%,transparent 100%),radial-gradient(ellipse 24% 65% at 98% 98%,#000 0%,transparent 100%);mask-image:radial-gradient(ellipse 22% 65% at 5% 5%,#000 0%,transparent 100%),radial-gradient(ellipse 19% 62% at 50% 0%,#000 0%,transparent 100%),radial-gradient(ellipse 24% 65% at 98% 98%,#000 0%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}
html[data-theme=dark] .brand .brand-mark{filter:invert(1)}
html[data-theme=dark] .brand::before{filter:blur(1.8px) invert(1)}
.brand::before{filter:blur(3px);-webkit-mask-image:radial-gradient(ellipse 30% 80% at 5% 5%,#000 0%,transparent 100%),radial-gradient(ellipse 26% 78% at 50% 0%,#000 0%,transparent 100%),radial-gradient(ellipse 32% 80% at 98% 98%,#000 0%,transparent 100%);mask-image:radial-gradient(ellipse 30% 80% at 5% 5%,#000 0%,transparent 100%),radial-gradient(ellipse 26% 78% at 50% 0%,#000 0%,transparent 100%),radial-gradient(ellipse 32% 80% at 98% 98%,#000 0%,transparent 100%)}
.brand{--logo-clear-mask:radial-gradient(ellipse 24% 70% at 5% 5%,transparent 0%,#000 100%),radial-gradient(ellipse 21% 68% at 50% 0%,transparent 0%,#000 100%),radial-gradient(ellipse 26% 70% at 98% 98%,transparent 0%,#000 100%)}
html[data-theme=dark] .brand::before{filter:blur(3px) invert(1)}
.brand{width:44.718px;height:18.324px}
.brand .brand-mark{transform:scale(1.14,1.41)}
.brand::before{transform:scale(.6);transform-origin:top left}
.sidebar-contact-details .contact-icon,.bubble-details .contact-icon{flex:0 0 16px;width:16px;height:16px;min-width:16px;max-width:16px;aspect-ratio:1;transform:none}
.brand{width:53.6616px;height:21.9888px}
.brand .brand-mark{transform:scale(1.368,1.692)}
.brand::before{transform:scale(.72)}
.brand:has(.new-logo-layer){width:30.0576px;height:21.9888px}
.brand:has(.new-logo-layer)::before{display:none}
.new-logo-layer{position:absolute;left:0;top:0;width:19.427px;height:14.214px;transform:scale(1.547);transform-origin:top left}
.new-logo-layer img{position:absolute;max-width:none}
.new-logo-layer .w-mark{left:0;top:0}
.new-logo-layer .w-dot{left:15.231px;top:10px}
.new-logo-layer .w-stroke{left:14.231px;top:9px}
.logo-sharp{-webkit-mask-image:var(--logo-clear-mask);mask-image:var(--logo-clear-mask);-webkit-mask-composite:source-in;mask-composite:intersect}
.logo-soft{filter:blur(1.7px);-webkit-mask-image:radial-gradient(ellipse 30% 80% at 5% 5%,#000 0%,transparent 100%),radial-gradient(ellipse 26% 78% at 50% 0%,#000 0%,transparent 100%),radial-gradient(ellipse 32% 80% at 98% 98%,#000 0%,transparent 100%);mask-image:radial-gradient(ellipse 30% 80% at 5% 5%,#000 0%,transparent 100%),radial-gradient(ellipse 26% 78% at 50% 0%,#000 0%,transparent 100%),radial-gradient(ellipse 32% 80% at 98% 98%,#000 0%,transparent 100%)}
html[data-theme=dark] .logo-sharp{filter:invert(1)}
html[data-theme=dark] .logo-soft{filter:blur(1.7px) invert(1)}
.hero .intro-cta{gap:4px}.hero .intro-cta svg{display:block;width:14px;height:14px;flex-shrink:0}
@media(min-width:761px){.header nav{margin-top:20px}}
@media(max-width:760px){
 .header{background:rgba(255,255,255,.78);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:0 1px 0 rgba(0,0,0,.06)}
 html[data-theme=dark] .header{background:rgba(23,23,23,.78);box-shadow:0 1px 0 rgba(255,255,255,.08)}
}
@media(max-width:760px){footer .sidebar-contact-details{flex-direction:column;align-items:flex-start;gap:16px}footer .sidebar-contact-details .eyebrow{flex-basis:auto}}
@media(min-width:761px){.header nav{margin-top:28px}.home-experience .experience-row{grid-template-columns:132px minmax(0,1fr);column-gap:12px}}
@media(max-width:760px){.header{background:rgba(255,255,255,.5);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%)}html[data-theme=dark] .header{background:rgba(23,23,23,.5)}}
.header nav a.active::before{left:0;right:0;height:14px;bottom:-10px}
.header nav a.active::before{height:16px;bottom:-15px;background-image:url("assets/nav-chalk-underline.svg?v=12")}
.mobile-theme-toggle{display:none}@media(max-width:760px){.header{gap:8px}.header nav{margin-left:auto;gap:20px}.mobile-theme-toggle{display:flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;padding:0;border:0;background:transparent;color:var(--ink);cursor:pointer}.mobile-theme-toggle svg{width:18px;height:18px}.mobile-theme-toggle:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:8px}}
@media(max-width:760px){.header{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;gap:8px}.header nav{justify-self:center;margin-left:0;margin-right:0;gap:20px}.mobile-theme-toggle{justify-self:end}}
.mobile-theme-toggle img{width:18px;height:18px}html[data-theme=dark] .mobile-theme-toggle img{filter:brightness(0) invert(1)}
@media(max-width:760px){.mobile-theme-toggle{background:#fafafa;border-radius:12px}html[data-theme=dark] .mobile-theme-toggle{background:#292929}}
:root{--bg:#fafafa}html[data-theme=dark]{--bg:#171717}
@media(max-width:760px){.mobile-theme-toggle{background:#ededed}html[data-theme=dark] .mobile-theme-toggle img{filter:brightness(0) invert(.7)}}
html[data-theme=dark] .hero .intro-cta{background:#353535;color:#e6e6e6}html[data-theme=dark] .hero .intro-cta:hover{background:#404040}
@media(min-width:761px){.sidebar-contact .theme-segment{display:flex;width:var(--contact-email-width);max-width:none}.sidebar-contact .theme-segment button{flex:1;justify-content:center}}
.hero .intro-cta span{position:relative;width:14px;height:14px}.contact-arrow{position:absolute;left:0;top:0;max-width:none;transform:scale(.2916667);transform-origin:top left;filter:brightness(0) invert(1)}
:root{--reading-size:14px}body,.header nav,.hero h1,.intro-copy p,.project-entry .project-name,.project-entry .project-description,.home-experience .experience-row time,.home-experience .experience-details,.home-experience .experience-company,.home-experience .experience-role,.hero .intro-cta,.eyebrow,.section-label,.about-section>h2,.sidebar-contact,.sidebar-contact a,.theme-segment button,.phone,.footer-bottom,.about-hero .intro,.capabilities h3,.capabilities p,.skill-list,.education-details h3,.education-details p,.experience-row time,.time-greeting{font-size:var(--reading-size)!important}.font-size-control{position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:25;display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px 10px;background:var(--bg);color:var(--muted);border:1px solid var(--line);border-radius:14px;box-shadow:0 3px 14px #0000000d;font-size:14px}.font-size-control>span{font-size:18px;font-weight:600}.font-size-control input{writing-mode:vertical-lr;direction:rtl;width:18px;height:108px;margin:0;accent-color:#929292;cursor:pointer}.font-size-control output{font-size:12px}@media(max-width:760px){.font-size-control{left:8px;top:auto;bottom:20px;transform:none;padding:8px 6px;gap:6px;opacity:.92}.font-size-control input{height:72px}.font-size-control>span{font-size:14px}}

@media(min-width:761px){.font-size-control{left:calc(max(320px, (100vw - 520px) / 2) - 72px);top:100px;bottom:auto;transform:none}}
@media(min-width:1600px){.font-size-control{left:calc((100vw - 600px) / 2 - 72px)}}
@media(min-width:761px) and (max-width:1100px){.font-size-control{left:198px}}

.font-size-control{background:#fff;padding:10px 8px;gap:8px;border-radius:12px}.font-size-control>span{font-size:16px}.font-size-control input{width:16px;height:84px}.font-size-control output{font-size:11px}html[data-theme=dark] .font-size-control{color:#808080;border-color:#e8e8e8}@media(max-width:760px){.font-size-control{padding:7px 5px;gap:5px}.font-size-control>span{font-size:14px}.font-size-control input{height:64px}}

.font-size-control input{appearance:none;-webkit-appearance:none;background:transparent;outline-offset:4px}.font-size-control input::-webkit-slider-runnable-track{width:8px;height:100%;background:#fff;border:1px solid #e3e3e3;border-radius:8px}.font-size-control input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;margin-left:-4px;background:#999;border:1px solid #fff;border-radius:50%;box-shadow:0 1px 3px #00000018}.font-size-control input::-moz-range-track{width:6px;height:100%;background:#fff;border:1px solid #e3e3e3;border-radius:8px}.font-size-control input::-moz-range-progress{background:#fff}.font-size-control input::-moz-range-thumb{width:12px;height:12px;background:#999;border:1px solid #fff;border-radius:50%}

.font-size-control input{--font-progress:33.333333%}.font-size-control input::-webkit-slider-runnable-track{background:linear-gradient(to top,#000 0%,#000 var(--font-progress),#fff var(--font-progress),#fff 100%)}.font-size-control input::-moz-range-progress{background:#000}

.font-size-control input::-webkit-slider-thumb{background:#000;border:1px solid #fff}.font-size-control input::-moz-range-thumb{background:#000;border:1px solid #fff}

@media(max-width:760px){.font-size-control{left:auto;right:20px;top:auto;bottom:calc(72px + env(safe-area-inset-bottom));width:40px;transform:none;opacity:1;border-radius:12px}}

.font-size-control input::-webkit-slider-runnable-track{border:0;background:linear-gradient(to top,#000 0%,#000 var(--font-progress),#f5f5f5 var(--font-progress),#f5f5f5 100%)}.font-size-control input::-moz-range-track{background:#f5f5f5;border:0}.font-size-control input::-webkit-slider-thumb{margin-left:-3px}@media(max-width:760px){.font-size-control{bottom:calc(20px + env(safe-area-inset-bottom));transform:translateY(0);transition:transform .32s cubic-bezier(.22,1,.36,1)}.back-top-visible .font-size-control{transform:translateY(-52px)}}@media(max-width:760px) and (prefers-reduced-motion:reduce){.font-size-control{transition:none}}

.font-size-control input::-webkit-slider-runnable-track{background:linear-gradient(to top,#555 0%,#555 var(--font-progress),#f5f5f5 var(--font-progress),#f5f5f5 100%)}.font-size-control input::-moz-range-progress{background:#555}.font-size-control input::-webkit-slider-thumb{background:#555;border:1.5px solid #fff}.font-size-control input::-moz-range-thumb{background:#555;border:1.5px solid #fff}

.font-size-control input::-webkit-slider-runnable-track{background:linear-gradient(to top,#888 0%,#888 var(--font-progress),#f5f5f5 var(--font-progress),#f5f5f5 100%)}.font-size-control input::-moz-range-progress{background:#888}.font-size-control input::-webkit-slider-thumb{background:#888;border:1.5px solid #fff}.font-size-control input::-moz-range-thumb{background:#888;border:1.5px solid #fff}

.font-size-control input::-webkit-slider-runnable-track{background:linear-gradient(to top,#aaa 0%,#aaa var(--font-progress),#f5f5f5 var(--font-progress),#f5f5f5 100%)}.font-size-control input::-moz-range-progress{background:#aaa}.font-size-control input::-webkit-slider-thumb{background:#aaa;border:1.5px solid #fff}.font-size-control input::-moz-range-thumb{background:#aaa;border:1.5px solid #fff}

/* Theme-aware reading control and mobile type hierarchy. */
.font-size-control{--slider-rest:#f5f5f5;--slider-fill:#aaa}
html[data-theme=dark] .font-size-control{background:#292929;color:#b3b3b3;border-color:#3a3a3a;box-shadow:0 3px 14px #0003;--slider-rest:#3e3e3e;--slider-fill:#aaa}
.font-size-control input::-webkit-slider-runnable-track{background:linear-gradient(to top,var(--slider-fill) 0%,var(--slider-fill) var(--font-progress),var(--slider-rest) var(--font-progress),var(--slider-rest) 100%)}
.font-size-control input::-moz-range-track{background:var(--slider-rest)}
.font-size-control input::-moz-range-progress{background:var(--slider-fill)}
@media(max-width:760px){
 .header nav,.time-greeting,.eyebrow,.section-label,.about-section>h2,.experience-row time,.home-experience .experience-row time,.footer-bottom{font-size:calc(var(--reading-size) - 2px)!important}
 .intro-copy p,.about-hero .intro,.project-entry .project-description{line-height:1.85}
}

/* Contact text follows the reading-size control. */
.contact-bubble .bubble-details a{font-size:var(--reading-size)!important;line-height:1.6}
.contact-bubble .bubble-details .contact-icon{width:1em;height:1em;flex-shrink:0}

/* Clicked contact card uses the same backdrop as project previews. */
.contact-backdrop{position:fixed;inset:0;z-index:29;background:rgba(255,255,255,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:contact-appear .28s ease-out}
.contact-backdrop[hidden]{display:none}
html[data-theme=dark] .contact-backdrop{background:rgba(23,23,23,.82)}
@media(prefers-reduced-motion:reduce){.contact-backdrop{animation:none}}

.contact-close-button{position:fixed;left:50%;transform:translateX(-50%);z-index:31;display:grid;place-items:center;width:40px;height:40px;padding:10px;border:1px solid var(--muted);border-radius:50%;background:var(--bg);color:var(--ink);cursor:pointer;animation:contact-appear .28s ease-out}
.contact-close-button[hidden]{display:none}
.contact-close-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.contact-close-button:hover{background:var(--panel)}
@media(prefers-reduced-motion:reduce){.contact-close-button{animation:none}}

.contact-close-button{background:#fff;color:#555;border:0}
.contact-close-button:hover{background:#fff}

/* Floating close control in light and dark themes. */
.contact-close-button{background:#fff;color:#808080;border:0;box-shadow:0 4px 14px rgba(0,0,0,.10),0 1px 3px rgba(0,0,0,.04)}
.contact-close-button:hover{background:#fff;box-shadow:0 5px 18px rgba(0,0,0,.14)}
html[data-theme=dark] .contact-close-button{background:#292929;color:#d0d0d0;box-shadow:0 4px 16px rgba(0,0,0,.32),0 1px 4px rgba(0,0,0,.20)}
html[data-theme=dark] .contact-close-button:hover{background:#333;box-shadow:0 5px 18px rgba(0,0,0,.4)}

.project-summary p{white-space:pre-line}

/* Match the 1920 x 1080 portfolio covers without cropping. */
.project-visual{aspect-ratio:16/9}
.project-visual img{width:100%;height:100%;object-fit:contain}

/* Centered preview navigation with theme-aware floating surfaces. */
#lightbox .gallery-prev,#lightbox .gallery-next{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;background:#fff;color:#808080;box-shadow:0 4px 14px #0000001a,0 1px 3px #0000000a;opacity:1}
#lightbox .gallery-prev svg,#lightbox .gallery-next svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#lightbox .gallery-stage:hover .gallery-prev,#lightbox .gallery-stage:hover .gallery-next,#lightbox .gallery-prev:focus-visible,#lightbox .gallery-next:focus-visible{opacity:1}
#lightbox .gallery-prev:not(:disabled):hover,#lightbox .gallery-next:not(:disabled):hover{background:#f5f5f5}
html[data-theme=dark] #lightbox .gallery-prev,html[data-theme=dark] #lightbox .gallery-next{background:#292929;color:#d0d0d0;box-shadow:0 4px 16px #0005}
html[data-theme=dark] #lightbox .gallery-prev:not(:disabled):hover,html[data-theme=dark] #lightbox .gallery-next:not(:disabled):hover{background:#333}

#lightbox .gallery-stage{overflow:hidden}
#lightbox .gallery-stage>img{touch-action:none;transform-origin:center;user-select:none}
#lightbox .gallery-prev,#lightbox .gallery-next{z-index:2}
.image-tools{position:absolute;left:50%;bottom:72px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:4px;padding:6px 10px;border-radius:24px;background:#fff;color:#555;box-shadow:0 4px 20px #0000001a}
.image-tools button{display:grid;place-items:center;min-width:32px;height:32px;padding:0 6px;border:0;border-radius:16px;background:transparent;color:inherit;font-size:22px;cursor:pointer}
.image-tools button[data-tool=reset]{min-width:64px;font-size:13px;font-variant-numeric:tabular-nums}
.image-tools button:hover{background:#f0f0f0}
.image-tools button:disabled{opacity:.3;cursor:default}
.tool-divider{height:18px;width:1px;background:#ddd;margin:0 4px}
html[data-theme=dark] .image-tools{background:#292929;color:#ddd;box-shadow:0 4px 20px #0005}
html[data-theme=dark] .image-tools button:hover{background:#3a3a3a}
html[data-theme=dark] .tool-divider{background:#555}
@media(max-width:760px){.image-tools{bottom:68px;max-width:calc(100% - 24px)}}

/* Unified image controls and pagination. */
.image-tools{gap:2px;padding:6px 10px;bottom:32px;border-radius:24px;white-space:nowrap}
.image-tools button{width:32px;min-width:32px;height:32px;padding:6px;line-height:1}
.image-tools button svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.image-tools button[data-tool=reset]{width:60px;min-width:60px;font-size:13px}
.tool-page{min-width:48px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums}
#lightbox .gallery-dots,#lightbox .gallery-count{display:none}
@media(max-width:760px){.image-tools{bottom:24px;padding:6px;gap:0}.image-tools button{width:30px;min-width:30px}.image-tools button[data-tool=reset]{width:50px;min-width:50px}.tool-divider{margin:0 2px}.tool-page{min-width:42px}}

/* Image viewer uses a consistent dark viewing surface. */
#lightbox::backdrop,html[data-theme=dark] #lightbox::backdrop{background:#171717;backdrop-filter:none;-webkit-backdrop-filter:none}
#lightbox,html[data-theme=dark] #lightbox{background:transparent;color:#d0d0d0}
#lightbox .image-tools,html[data-theme=dark] #lightbox .image-tools{background:#292929;color:#d0d0d0;box-shadow:0 4px 20px #0005}
#lightbox .image-tools button:hover,html[data-theme=dark] #lightbox .image-tools button:hover{background:#3a3a3a}
#lightbox .tool-divider,html[data-theme=dark] #lightbox .tool-divider{background:#555}
#lightbox .gallery-prev,#lightbox .gallery-next,html[data-theme=dark] #lightbox .gallery-prev,html[data-theme=dark] #lightbox .gallery-next{background:#292929;color:#d0d0d0;box-shadow:0 4px 16px #0005}
#lightbox .gallery-prev:not(:disabled):hover,#lightbox .gallery-next:not(:disabled):hover{background:#333}
#lightbox .close-lightbox,html[data-theme=dark] #lightbox .close-lightbox{color:#d0d0d0}
#lightbox .gallery-empty-message,#lightbox p{color:#929292}

/* Frosted dark viewer and consistently spaced floating controls. */
#lightbox::backdrop,html[data-theme=dark] #lightbox::backdrop{background:rgba(15,15,15,.78);backdrop-filter:blur(16px) saturate(80%);-webkit-backdrop-filter:blur(16px) saturate(80%)}
#lightbox .image-tools,html[data-theme=dark] #lightbox .image-tools{padding:6px 12px;gap:4px;background:rgba(45,45,45,.76);backdrop-filter:blur(20px) saturate(120%);-webkit-backdrop-filter:blur(20px) saturate(120%);box-shadow:0 6px 24px #0005,inset 0 1px 0 #ffffff0d}
#lightbox .image-tools .tool-divider{margin:0 4px}
#lightbox .gallery-prev,#lightbox .gallery-next,html[data-theme=dark] #lightbox .gallery-prev,html[data-theme=dark] #lightbox .gallery-next{background:rgba(45,45,45,.76);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
@media(max-width:760px){#lightbox .image-tools{padding-left:12px;padding-right:12px;gap:2px}.image-tools button{width:26px;min-width:26px;height:30px;padding:4px}.image-tools button[data-tool=reset]{width:44px;min-width:44px}.image-tools .tool-page{min-width:36px}#lightbox .image-tools .tool-divider{margin:0 2px}}
@media(max-width:380px){#lightbox .image-tools{gap:0}.image-tools button{width:24px;min-width:24px}.image-tools button[data-tool=reset]{width:40px;min-width:40px}.image-tools .tool-page{min-width:32px}}

@media(max-width:760px){
 #lightbox .gallery-stage{padding:48px 0 92px}
 #lightbox .gallery-stage>img{max-width:100%;width:100%;height:auto;max-height:100%;object-fit:contain}
 #lightbox .gallery-prev{left:8px}#lightbox .gallery-next{right:8px}
 #lightbox::after{content:'双指缩放 · 双击放大 · 横屏查看更清晰';position:absolute;left:0;right:0;bottom:78px;text-align:center;font-size:11px;color:#aaa;pointer-events:none}
}
@media(max-height:500px) and (orientation:landscape){
 #lightbox .gallery-stage{padding:12px 40px 62px}
 #lightbox .gallery-stage>img{width:auto;max-width:100%;max-height:100%}
 #lightbox .image-tools{bottom:10px}
 #lightbox::after{display:none}
}

/* White floating controls contrast with the dark frosted backdrop. */
#lightbox .image-tools,html[data-theme=dark] #lightbox .image-tools{background:rgba(255,255,255,.96);color:#666;box-shadow:0 6px 24px #0003;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
#lightbox .image-tools button:hover,html[data-theme=dark] #lightbox .image-tools button:hover{background:#ededed}
#lightbox .tool-divider,html[data-theme=dark] #lightbox .tool-divider{background:#ddd}
#lightbox .gallery-prev,#lightbox .gallery-next,html[data-theme=dark] #lightbox .gallery-prev,html[data-theme=dark] #lightbox .gallery-next{background:#fff;color:#666;box-shadow:0 4px 16px #0003}
#lightbox .gallery-prev:not(:disabled):hover,#lightbox .gallery-next:not(:disabled):hover,html[data-theme=dark] #lightbox .gallery-prev:not(:disabled):hover,html[data-theme=dark] #lightbox .gallery-next:not(:disabled):hover{background:#ededed}

/* Avoid the browser's black focus frame while retaining keyboard feedback. */
.project-card:focus,.project-grid:focus{outline:none}
.project-card:focus-visible .project-visual{box-shadow:inset 0 0 0 2px #8888}
.project-grid:focus-visible{box-shadow:0 2px 0 #8886}
@media(max-width:760px) and (orientation:portrait){
 #lightbox.landscape-viewing{inset:auto;left:50%;top:50%;width:100dvh;height:100vw;max-width:none;max-height:none;transform:translate(-50%,-50%) rotate(90deg)}
 #lightbox.landscape-viewing .gallery-stage{padding:48px 44px 64px}
 #lightbox.landscape-viewing .gallery-stage>img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
 #lightbox.landscape-viewing .image-tools{bottom:10px}
 #lightbox.landscape-viewing::after{display:none}
}
@media(orientation:landscape) and (max-height:760px){
 #lightbox .gallery-stage{padding:48px 44px 64px}
 #lightbox .gallery-stage>img{width:auto;height:auto;max-width:100%;max-height:100%}
 #lightbox .image-tools{bottom:10px}
 #lightbox::after{display:none}
}

/* Center the close icon independently of font metrics and site theme. */
#lightbox .close-lightbox,html[data-theme=dark] #lightbox .close-lightbox{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:#fff;color:#666;box-shadow:0 4px 16px #0003;line-height:1;cursor:pointer}
#lightbox .close-lightbox svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
#lightbox .close-lightbox:hover,html[data-theme=dark] #lightbox .close-lightbox:hover{background:#ededed;color:#444}


/* Keep the close control quiet against the frosted viewing surface. */
#lightbox .close-lightbox,html[data-theme=dark] #lightbox .close-lightbox{background:rgba(255,255,255,.10);color:#d0d0d0;box-shadow:0 2px 8px #00000014;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#lightbox .close-lightbox:hover,html[data-theme=dark] #lightbox .close-lightbox:hover{background:rgba(255,255,255,.20);color:#fff}

/* Match side navigation to the understated close control. */
#lightbox .gallery-prev,#lightbox .gallery-next,html[data-theme=dark] #lightbox .gallery-prev,html[data-theme=dark] #lightbox .gallery-next{background:rgba(255,255,255,.10);color:#d0d0d0;box-shadow:0 2px 8px #00000014;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#lightbox .gallery-prev:not(:disabled):hover,#lightbox .gallery-next:not(:disabled):hover,html[data-theme=dark] #lightbox .gallery-prev:not(:disabled):hover,html[data-theme=dark] #lightbox .gallery-next:not(:disabled):hover{background:rgba(255,255,255,.20);color:#fff}

/* Portrait controls stay upright; only the artwork turns sideways. */
@media(max-width:760px) and (orientation:portrait){
 #lightbox.landscape-viewing{inset:0;left:0;top:0;width:100vw;height:100dvh;transform:none}
 #lightbox.landscape-viewing .gallery-stage{padding:48px 0 92px}
 #lightbox.landscape-viewing .gallery-stage>img{width:auto;height:auto;max-width:calc(100dvh - 140px);max-height:calc(100vw - 32px);flex-shrink:0;object-fit:contain}
 #lightbox.landscape-viewing .image-tools{bottom:24px}
}

/* The close control gains a background only on hover-capable devices. */
#lightbox .close-lightbox,html[data-theme=dark] #lightbox .close-lightbox,#lightbox .close-lightbox:hover,html[data-theme=dark] #lightbox .close-lightbox:hover{background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:#d0d0d0}
@media(hover:hover){
 #lightbox .close-lightbox:hover,html[data-theme=dark] #lightbox .close-lightbox:hover{background:rgba(255,255,255,.20);color:#fff}
}

/* Mobile pagination stays in the toolbar instead of covering the artwork. */
@media(max-width:760px),(pointer:coarse) and (max-height:760px){
 #lightbox .gallery-prev,#lightbox .gallery-next{display:none}
}

/* Indicate close-button keyboard focus through the icon, without a ring. */
#lightbox .close-lightbox:focus,html[data-theme=dark] #lightbox .close-lightbox:focus{outline:none}
#lightbox .close-lightbox:focus-visible,html[data-theme=dark] #lightbox .close-lightbox:focus-visible{outline:none;color:#fff}

/* Give each viewer control and group a little more breathing room. */
#lightbox .image-tools{gap:8px;padding:8px 12px;border-radius:28px}
#lightbox .image-tools .tool-divider{margin:0 6px}
#lightbox .image-tools button{width:34px;min-width:34px;height:34px}
#lightbox .image-tools button[data-tool=reset]{width:64px;min-width:64px}
#lightbox .image-tools .tool-page{min-width:54px}
@media(max-width:760px){
 #lightbox .image-tools{gap:4px;padding:8px 12px;max-width:calc(100vw - 16px)}
 #lightbox .image-tools button{width:26px;min-width:26px;height:32px}
 #lightbox .image-tools button[data-tool=reset]{width:44px;min-width:44px}
 #lightbox .image-tools .tool-page{min-width:36px}
 #lightbox .image-tools .tool-divider{margin:0 3px}
}
@media(max-width:380px){
 #lightbox .image-tools{gap:2px}
 #lightbox .image-tools button{width:24px;min-width:24px}
 #lightbox .image-tools button[data-tool=reset]{width:40px;min-width:40px}
 #lightbox .image-tools .tool-page{min-width:32px}
 #lightbox .image-tools .tool-divider{margin:0 2px}
}

#lightbox .gallery-loading{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:3;padding:8px 12px;border-radius:16px;background:#0006;color:#ddd;font-size:12px;pointer-events:none}
#lightbox .gallery-stage>img{will-change:transform}

.time-greeting{gap:4px}
.time-greeting svg{margin-right:6px}

.project-title-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.project-title-row .project-name{min-width:0}
.project-image-count{flex-shrink:0;color:var(--muted);font-size:12px;font-weight:400;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Gestures inside the size control must not pan the document underneath. */
.font-size-control,.font-size-control input{touch-action:none;overscroll-behavior:contain}
.font-size-control{user-select:none;-webkit-user-select:none}

/* Compact mobile navigation without changing its horizontal alignment. */
@media(max-width:760px){
 .header{padding:10px 24px}
 html{scroll-padding-top:64px}
}

footer#contact{padding-top:24px}
footer#contact .footer-bottom{margin-top:0;align-items:center}
@media(max-width:760px){
  footer#contact .footer-bottom{margin-top:24px}
}