/* Restrained portfolio: quiet color, clear typography, three equal projects. */
:root{--paper:#f8f8f6;--ink:#252724;--muted:#777b74;--line:#e2e4dd;--blue:#4d61a4;scroll-padding-top:100px}
.wrap,.header-inner{width:min(1120px,calc(100% - 96px))}
.site-header{height:92px;background:rgba(248,248,246,.94)}
.header-inner{justify-content:space-between}
.wordmark{font-weight:600;letter-spacing:-1.05px}
.header-inner nav{position:static;transform:none;gap:34px}
.nav-link{padding:9px 0;border-radius:0;color:#8a8d86;position:relative}
.nav-link.active{background:none;color:var(--ink)}
.nav-link:after{content:"";position:absolute;bottom:3px;left:0;right:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav-link.active:after,.nav-link:hover:after{transform:scaleX(1)}
.hero{grid-template-columns:1.25fr 1fr;min-height:500px;padding:44px 0 73px;gap:50px;border-bottom:1px solid var(--line)}
.eyebrow{letter-spacing:2.5px;font-weight:400;color:#858b80;margin-bottom:24px}
.hero h1{font-weight:500;line-height:1.4;letter-spacing:-2px;margin-bottom:24px}
.serif-word{font-family:var(--font-sans);font-weight:400}
.hero-description{line-height:1.95;color:#81877b;margin-bottom:29px}
.hero-actions{display:block}
.text-link{display:inline-flex;align-items:center;gap:24px;padding:6px 0;border-bottom:1px solid #c6cbbf}
.text-link img{width:13px;height:13px;transition:transform .2s}.text-link:hover img{transform:translateY(3px)}
.hero-art{width:350px;max-width:100%;margin:0 auto;height:auto;padding:0}
.sculpture{width:100%;height:auto;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse at center,#000 42%,transparent 72%);animation:none}
.work-section{padding-top:51px;padding-bottom:75px}
.section-heading{align-items:center;gap:20px;margin-bottom:26px;flex-direction:row}
.section-heading h2{font-weight:500;letter-spacing:-.4px}
.count{vertical-align:baseline;margin-left:13px;color:#9a9f92;letter-spacing:0}
.sample-note{color:#909689;letter-spacing:.2px}
.featured-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.project-cover{height:310px;border-radius:7px;transition:filter .3s}
.cover-orbit{background:#e7edf2}.cover-copilot{background:#eeeee8}.cover-motion{background:#e8ece6}
.project-card:hover .project-cover{box-shadow:none;filter:brightness(.985)}
.cover-topline{left:25px;right:25px;top:22px}
.cover-topline>span:first-child{letter-spacing:-.6px;font-weight:600}
.dashboard-demo{top:83px;left:50%;transform:translateX(-47%) rotate(-5deg) scale(.72);transform-origin:top center;box-shadow:0 12px 27px #30467515}
.project-card:hover .dashboard-demo{transform:translateX(-47%) translateY(-4px) rotate(-5deg) scale(.72)}
.phone-demo{right:50%;top:67px;transform:translateX(50%) rotate(6deg) scale(.77);transform-origin:top center;box-shadow:0 10px 30px #4c503b16}
.project-card:hover .phone-demo{transform:translateX(50%) translateY(-4px) rotate(6deg) scale(.77)}
.car-ui{left:50%;right:auto;top:88px;width:230px;height:181px;max-width:none;padding:19px;transform:translateX(-50%) rotate(-6deg);transform-origin:top center;box-shadow:0 10px 26px #3d534d13;transition:transform .55s}
.car-ui>img{width:87px;height:57px;margin:6px auto}.car-ui>div:first-child>strong{}.car-ui-bottom{padding-top:10px}.car-ui-bottom b{}
.project-card:hover .car-ui{transform:translateX(-50%) translateY(-4px) rotate(-6deg)}
.cover-arrow{width:29px;height:29px;background:rgba(255,255,255,.8);right:16px;bottom:15px;opacity:1;transform:none}
.cover-arrow img{width:15px;height:15px}.project-card:hover .cover-arrow{transform:translate(2px,-2px)}
.project-meta{letter-spacing:.1px;margin-top:19px;margin-bottom:9px;color:#93998a;flex-wrap:nowrap}
.project-card h3{font-weight:500;letter-spacing:-.3px;margin-bottom:6px}
.project-card>p{line-height:1.8;color:#8b9282}
.about-section{padding:44px 0 0;background:none;border-top:1px solid var(--line)}
.about-section .section-heading{margin-bottom:30px}.about-section .section-kicker{margin:0;letter-spacing:2px;color:#9a9f92}
.about-grid{grid-template-columns:1fr 1.5fr;gap:80px}
.profile-card{padding:0;background:none;border:0;border-radius:0}
.profile-card h3{font-weight:500;letter-spacing:-.7px;margin:0 0 7px}
.profile-card>p{color:#8e9584}
.profile-placeholder{border:0;padding:0;margin-top:13px;color:#a1a795}
.about-copy>p{line-height:2;color:#7f8873;margin:0;max-width:510px}
.expertise{display:flex;flex-wrap:wrap;align-items:center;gap:13px;margin-top:22px;color:#979f8b}
.expertise span{color:#c0c6b7}
.contact-strip{margin-top:38px;padding:23px 0 27px;border-color:var(--line);gap:20px;flex-direction:row;align-items:center}
.contact-strip>span{color:#939b87}.contact-pending{color:#9ca58e}
.contact-email{}.copy-email{}
.site-footer{padding:22px 0 28px;grid-template-columns:1fr 1fr;row-gap:0}
.site-footer>p{grid-column:auto;margin:0;color:#a5ac9a}.back-top{color:#959e88;padding:0}
dialog{border-radius:11px}.dialog-toolbar{background:#f8f8f6f5}.detail-body h2{font-weight:500}.detail-story h3{font-weight:500}.detail-visual .car-ui{left:50%;width:280px;height:250px;top:90px;transform:translateX(-50%) rotate(-6deg)}
.detail-visual .cover-topline>span{}.detail-visual .cover-topline{left:32px;top:26px}
.detail-visual .phone-demo{right:50%;transform:translateX(50%) rotate(6deg);transform-origin:top center}
.featured-grid>.will-reveal:nth-child(3){transition-delay:.14s}
@media(min-width:1500px){.hero{min-height:535px;padding-top:50px;padding-bottom:80px}.hero h1{}.hero-art{padding:0}}
@media(max-width:1050px){.wrap,.header-inner{width:calc(100% - 72px)}.hero{min-height:450px;gap:30px;padding:35px 0 60px}.hero h1{}.hero-art{width:300px}.featured-grid{gap:20px}.project-cover{height:280px}.dashboard-demo{transform:translateX(-45%) rotate(-5deg) scale(.62)}.project-card:hover .dashboard-demo{transform:translateX(-45%) translateY(-4px) rotate(-5deg) scale(.62)}.phone-demo{transform:translateX(50%) rotate(6deg) scale(.7)}.project-card:hover .phone-demo{transform:translateX(50%) translateY(-4px) rotate(6deg) scale(.7)}.car-ui{width:196px;padding:16px;top:85px;height:170px}.project-card h3{}.project-card>p{}.project-meta{}.about-grid{gap:50px}}
@media(max-width:800px){.wrap,.header-inner{width:calc(100% - 48px)}.site-header{height:80px}.hero{min-height:400px;padding:34px 0 48px;gap:15px}.hero h1{}.hero-description{}.hero-art{width:255px;margin:0 auto}.eyebrow{}.work-section{padding-top:39px;padding-bottom:48px}.featured-grid{grid-template-columns:1fr;gap:29px}.project-card{display:grid;grid-template-columns:1.25fr 1fr;column-gap:28px;grid-template-rows:1fr auto auto 1fr;align-items:start}.project-cover{grid-row:1 / 5;height:270px}.project-meta{grid-column:2;margin-top:auto;align-self:end;margin-bottom:12px}.project-card h3{grid-column:2;margin:0 0 9px}.project-card>p{grid-column:2;}.dashboard-demo{transform:translateX(-45%) rotate(-5deg) scale(.69);top:72px}.project-card:hover .dashboard-demo{transform:translateX(-45%) translateY(-4px) rotate(-5deg) scale(.69)}.phone-demo{transform:translateX(50%) rotate(6deg) scale(.7);top:58px}.project-card:hover .phone-demo{transform:translateX(50%) translateY(-4px) rotate(6deg) scale(.7)}.car-ui{top:74px;width:210px}.cover-topline>span:first-child{}.about-grid{gap:35px;grid-template-columns:1fr 1.3fr}.about-copy>p{}.profile-card>p{}.detail-visual .phone-demo{transform:translateX(50%) rotate(6deg)}}
@media(max-width:600px){:root{scroll-padding-top:90px}.wrap,.header-inner{width:calc(100% - 40px)}.site-header{height:74px}.wordmark{}.header-inner nav{gap:25px}.nav-link{padding:8px 0}.hero{display:grid;grid-template-columns:1fr auto;min-height:335px;padding:32px 0 40px;gap:0;position:relative;isolation:isolate}.hero-copy{grid-column:1 / -1;z-index:1}.eyebrow{margin-bottom:20px;letter-spacing:2px}.hero h1{letter-spacing:-1.4px;line-height:1.42;margin-bottom:20px}.hero-description{line-height:1.95;margin-bottom:24px;max-width:230px}.hero-art{position:absolute;right:-15px;top:33px;width:155px;height:auto;z-index:0;opacity:.55;pointer-events:none}.sculpture{width:100%;height:auto}.hero-actions .text-link{gap:18px}.work-section{padding-top:31px;padding-bottom:40px}.section-heading{flex-direction:row;align-items:center;margin-bottom:22px;gap:10px}.section-heading h2{}.sample-note{}.count{margin-left:10px}.featured-grid{gap:32px}.project-card{display:block}.project-cover{height:310px}.project-meta{margin-top:16px;margin-bottom:9px;}.project-card h3{margin-bottom:5px}.project-card>p{}.cover-topline{top:23px;left:25px}.cover-topline>span:first-child{}.dashboard-demo{top:84px;transform:translateX(-47%) rotate(-5deg) scale(.79)}.project-card:hover .dashboard-demo{transform:translateX(-47%) translateY(-4px) rotate(-5deg) scale(.79)}.phone-demo{top:67px;transform:translateX(50%) rotate(6deg) scale(.77);right:50%}.project-card:hover .phone-demo{transform:translateX(50%) translateY(-4px) rotate(6deg) scale(.77)}.car-ui{left:50%;top:86px;width:230px;height:180px;padding:19px;transform:translateX(-50%) rotate(-6deg)}.cover-arrow{width:29px;height:29px;right:16px;bottom:15px}.cover-arrow img{width:15px}.about-section{padding-top:30px}.about-section .section-heading{margin-bottom:24px}.about-section .section-heading h2{}.about-grid{grid-template-columns:1fr;gap:22px}.profile-card{padding:0}.profile-card h3{margin:0 0 6px}.profile-card>p{}.profile-placeholder{margin-top:9px}.about-copy>p{line-height:1.95}.expertise{margin-top:18px;gap:12px}.contact-strip{margin-top:27px;padding:22px 0;gap:16px;flex-direction:row;align-items:center}.contact-strip>span{}.contact-pending{text-align:right}.site-footer{grid-template-columns:1fr 1fr;padding-top:20px;padding-bottom:24px;gap:0}.site-footer>p{grid-column:auto;margin:0;}.back-top{}.detail-visual .phone-demo{width:187px;height:365px;top:63px;right:50%;transform:translateX(50%) rotate(6deg) scale(.73)}.detail-visual .car-ui{width:215px;height:170px;top:85px;left:50%;transform:translateX(-50%) rotate(-6deg);padding:15px}.detail-visual .cover-topline{left:23px;top:23px}.detail-visual .cover-topline>span:first-child{}.detail-visual .dashboard-demo{top:78px;transform:translateX(-43%) rotate(-5deg) scale(.7)}.detail-story h3{}.detail-body h2{}.detail-bottom>span{max-width:115px}}
@media(max-width:360px){.wrap,.header-inner{width:calc(100% - 32px)}.hero h1{}.hero-art{width:130px;right:-5px;top:45px;opacity:.4}.hero-description{}.project-cover{height:285px}.dashboard-demo{transform:translateX(-45%) rotate(-5deg) scale(.69);top:82px}.project-card:hover .dashboard-demo{transform:translateX(-45%) translateY(-4px) rotate(-5deg) scale(.69)}.phone-demo{transform:translateX(50%) rotate(6deg) scale(.71)}.project-card:hover .phone-demo{transform:translateX(50%) translateY(-4px) rotate(6deg) scale(.71)}.car-ui{width:215px;top:80px}.detail-body h2{}}
@media print{.hero{min-height:350px}.featured-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.project-card{display:block}.hero-art{position:static;opacity:1}.project-cover{height:240px}.contact-strip{padding-bottom:15px}}

/* Typography system: one bundled family, weights 400/500/600, explicit roles. */
@font-face{font-family:"Portfolio Sans";src:url("./assets/fonts/noto-sans-sc.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
:root{
  --font-sans:"Portfolio Sans","Noto Sans SC","Microsoft YaHei",sans-serif;
  --text-display:48px;--text-heading:24px;--text-title:18px;
  --text-body:14px;--text-caption:12px;
  --weight-regular:400;--weight-medium:500;--weight-semibold:600;
  font-family:var(--font-sans);font-weight:var(--weight-regular);font-size:var(--text-body);line-height:1.75;
  font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body,button,a,input,textarea,select{font-family:var(--font-sans)}
button{font-weight:var(--weight-regular)}
h1,h2,h3,p{font-family:inherit}
.wordmark{font-size:24px;font-weight:var(--weight-semibold);line-height:1.25;letter-spacing:-.6px}
.nav-link,.text-link,.hero-actions .text-link,.back-top,.profile-card>p,.contact-strip>span,.contact-pending,.contact-email,.copy-email{font-size:var(--text-body);font-weight:var(--weight-regular);line-height:1.6;letter-spacing:0}
.eyebrow,.sample-note,.project-meta,.count,.profile-placeholder,.expertise,.about-section .section-kicker,.site-footer>p{font-size:var(--text-caption);font-weight:var(--weight-regular);line-height:1.65;letter-spacing:0}
.eyebrow,.about-section .section-kicker{letter-spacing:1.2px}
.hero h1{font-size:var(--text-display);font-weight:var(--weight-medium);line-height:1.4;letter-spacing:-1.2px;margin-bottom:24px}
.hero-description,.about-copy>p,.project-card>p{font-size:var(--text-body);font-weight:var(--weight-regular);line-height:1.85;letter-spacing:0;color:#72796c}
.hero-description{max-width:420px}
.section-heading h2,.about-section .section-heading h2,.profile-card h3{font-size:var(--text-heading);font-weight:var(--weight-medium);line-height:1.5;letter-spacing:0}
.project-card h3{font-size:var(--text-title);font-weight:var(--weight-medium);line-height:1.6;letter-spacing:0;margin-bottom:7px}
.cover-topline>span:first-child,.detail-visual .cover-topline>span:first-child{font-family:var(--font-sans);font-size:20px;font-weight:var(--weight-medium);line-height:1.4;letter-spacing:-.3px}
.project-meta{color:#858d7e;margin-top:18px;margin-bottom:8px;gap:10px}
.sample-note,.profile-placeholder,.expertise,.count,.about-section .section-kicker,.site-footer>p{color:#858d7e}
.contact-pending,.contact-strip>span,.profile-card>p,.back-top{color:#7c8574}
.profile-card h3{margin-bottom:8px}
.site-footer>p,.back-top{font-size:var(--text-caption)}
.header-inner nav{gap:32px}
.detail-kicker,.detail-facts span,.dialog-toolbar>span,.detail-story section>span,.detail-bottom>span{font-size:var(--text-caption);font-weight:var(--weight-regular);line-height:1.65;letter-spacing:.2px}
.detail-body h2{font-size:32px;font-weight:var(--weight-medium);line-height:1.45;letter-spacing:-.3px}
.detail-intro,.detail-facts strong,.detail-brief,.detail-story section>p,.next-project{font-size:var(--text-body);font-weight:var(--weight-regular);line-height:1.85;letter-spacing:0}
.detail-story h3{font-size:20px;font-weight:var(--weight-medium);line-height:1.6;letter-spacing:0}
.detail-intro,.detail-brief,.detail-story section>p{color:#727b68}
.detail-facts strong{line-height:1.6}
.dashboard-demo,.phone-demo,.car-ui{font-family:var(--font-sans);font-weight:var(--weight-regular)}
.dashboard-demo strong,.phone-demo strong,.car-ui strong,.car-ui b{font-weight:var(--weight-semibold)}
.car-ui>div:first-child>strong{font-size:16px;line-height:1.4;letter-spacing:0}
.car-ui-bottom b{font-size:18px;line-height:1.4}
.project-card>p{min-height:26px}
@media(max-width:1050px){:root{--text-display:42px}}
@media(max-width:800px){:root{--text-display:38px}.project-card h3{font-size:var(--text-title)}.project-meta{font-size:var(--text-caption)}.detail-visual .car-ui>div:first-child>strong{font-size:20px}.detail-visual .car-ui-bottom b{font-size:24px}}
@media(max-width:600px){
  :root{--text-display:34px;--text-heading:22px;--text-title:18px}
  .wordmark{font-size:22px}.header-inner nav{gap:22px}.nav-link{font-size:var(--text-body)}
  .hero{min-height:360px}.hero h1{font-size:var(--text-display);letter-spacing:-.5px}
  .hero-description{max-width:100%;font-size:var(--text-body)}
  .hero-art{width:125px;right:-8px;top:35px;opacity:.45}
  .profile-card>p,.about-copy>p,.project-card>p{font-size:var(--text-body)}
  .contact-strip{align-items:flex-start;gap:12px;flex-wrap:wrap}
  .contact-strip>span,.contact-pending{font-size:var(--text-caption)}
  .project-meta{font-size:var(--text-caption)}.expertise{gap:11px}
  .detail-body h2{font-size:26px}.detail-story h3{font-size:20px}
  .detail-facts strong,.detail-story section>p,.detail-intro,.detail-brief{font-size:var(--text-body)}
  .detail-facts>div{align-items:start}.detail-facts strong{max-width:65%}
  .detail-bottom>span{font-size:var(--text-caption);max-width:125px}.next-project{font-size:var(--text-body);gap:8px}
  .detail-visual .car-ui>div:first-child>strong{font-size:16px}.detail-visual .car-ui-bottom b{font-size:18px}
}
@media(max-width:360px){:root{--text-display:32px}.header-inner nav{gap:18px}.hero-art{width:103px;right:-5px;top:43px}.hero-description{font-size:13px}.detail-body h2{font-size:24px}.detail-bottom{gap:10px}}

/* Independent pages and a centered, type-only introduction. */
.header-inner .return-home{display:inline-flex;align-items:center;gap:9px;color:var(--ink)}
.hero.hero-centered{display:flex;justify-content:center;align-items:center;text-align:center;min-height:475px;padding:76px 0 86px;gap:0;isolation:auto}
.hero-centered .hero-copy{width:100%;max-width:800px;margin:0 auto}
.hero-centered h1{white-space:normal;margin:0 auto 24px;max-width:800px;line-height:1.5;letter-spacing:-.8px}
.hero-centered .hero-description{max-width:480px;margin:0 auto 28px;text-wrap:balance}
.hero-centered .hero-actions{display:flex;justify-content:center}.hero-centered .text-link{gap:20px}
body[data-page="home"] .site-footer{border-top:1px solid var(--line);padding-top:25px}
.page-back{display:inline-flex;align-items:center;gap:10px;font-size:var(--text-caption);line-height:1.7;color:#858d7e;transition:color .2s}.page-back:hover{color:var(--ink)}.page-back img{width:15px;height:15px;opacity:.7}
.page-kicker{font-size:var(--text-caption);font-weight:400;line-height:1.7;letter-spacing:1px;color:#858d7e;margin:0 0 14px}
.project-page{padding-top:35px;padding-bottom:0}
.project-page-header{padding:55px 0 31px;max-width:900px}
.project-page-header h1{font-size:32px;line-height:1.5;font-weight:500;letter-spacing:-.3px;margin:0 0 16px}
.project-lead{font-size:var(--text-body);line-height:1.85;color:#747d6a;margin:0;max-width:700px}
.project-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;border-block:1px solid var(--line);padding:24px 0;margin:0 0 36px;max-width:900px}
.project-facts dt{font-size:var(--text-caption);line-height:1.65;color:#8b9480;margin-bottom:7px}.project-facts dd{font-size:var(--text-body);line-height:1.65;color:#5d6655;margin:0}
.project-page .detail-visual{height:470px;border-radius:8px}
.project-page .detail-visual .dashboard-demo{width:680px;height:399px;top:100px;transform:translateX(-48%) rotate(-5deg)}.project-page .detail-visual .dashboard-main{width:593px}.project-page .detail-visual .chart-content{height:130px}
.project-page .detail-visual .phone-demo{top:70px;right:50%;width:215px;height:400px;transform:translateX(50%) rotate(6deg) scale(1.1)}
.project-page .detail-visual .car-ui{top:130px;left:50%;width:310px;height:250px;transform:translateX(-50%) rotate(-6deg)}.project-page .detail-visual .car-ui>img{width:135px;height:100px}
.project-story{max-width:900px;margin:0 auto}.project-brief{font-size:var(--text-body);line-height:1.95;color:#67725b;margin:0;padding:43px 0;border-bottom:1px solid var(--line)}
.project-story-section{display:grid;grid-template-columns:190px 1fr;gap:40px;padding:37px 0;border-bottom:1px solid var(--line)}.story-number{font-size:var(--text-caption);line-height:1.8;color:#8b9480;padding-top:7px}
.project-story-section h2{font-size:var(--text-heading);font-weight:500;line-height:1.5;margin:0 0 14px;letter-spacing:0}.project-story-section p{font-size:var(--text-body);line-height:1.95;color:#747e68;margin:0}
.project-page-navigation{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:38px 0 48px}
.next-project-link{display:grid;grid-template-columns:1fr auto;column-gap:24px;text-align:right}.next-project-link span{grid-column:1;font-size:var(--text-caption);color:#8b9480;line-height:1.65;margin-bottom:5px}.next-project-link strong{grid-column:1;font-size:var(--text-title);line-height:1.65;font-weight:500}.next-project-link img{grid-column:2;grid-row:1/3;align-self:center;transition:transform .2s}.next-project-link:hover img{transform:translateX(4px)}
body[data-page="project"] .site-footer,body[data-page="about"] .site-footer{border-top:1px solid var(--line)}
.about-page{max-width:900px;padding-top:35px;padding-bottom:35px}.about-page-header{padding:58px 0 51px}
.about-page-header h1{font-size:32px;font-weight:500;line-height:1.5;letter-spacing:0;margin:0 0 12px}.about-page-header>p:not(.page-kicker){font-size:var(--text-body);line-height:1.85;color:#7b856e;margin:0}.about-page-header .profile-placeholder{margin-top:12px}
.about-page-section{display:grid;grid-template-columns:190px 1fr;gap:40px;padding:36px 0;border-top:1px solid var(--line)}.about-page-section h2{font-size:var(--text-title);font-weight:500;line-height:1.65;margin:0}.about-page-section p{font-size:var(--text-body);line-height:1.95;color:#747e68;margin:0 0 16px}.about-page-section p:last-child{margin-bottom:0}
.focus-list{list-style:none;padding:0;margin:0}.focus-list li{display:flex;flex-direction:column;gap:5px;margin-bottom:23px}.focus-list li:last-child{margin-bottom:0}.focus-list strong{font-size:var(--text-body);font-weight:500;line-height:1.85}.focus-list span{font-size:var(--text-body);font-weight:400;line-height:1.85;color:#818b75}
.about-page-contact #contact-slot{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.about-page-contact .copy-email{float:none;margin:0}.about-page-contact .contact-pending{font-size:var(--text-caption);text-align:left}
@media(max-width:800px){.hero.hero-centered{min-height:450px;padding:65px 0 72px}.hero-centered .hero-description{max-width:450px}.project-story-section,.about-page-section{grid-template-columns:145px 1fr;gap:30px}.project-page-header{padding-top:43px}.project-page .detail-visual{height:400px}.project-page .detail-visual .dashboard-demo{width:620px;height:364px;top:90px}.project-page .detail-visual .dashboard-main{width:533px}.project-page .detail-visual .phone-demo{top:50px;transform:translateX(50%) rotate(6deg)}.project-page .detail-visual .car-ui{width:280px;top:100px;height:240px}.project-page .detail-visual .car-ui>img{width:115px;height:87px}}
@media(max-width:600px){
  .hero.hero-centered{min-height:375px;padding:54px 0 58px;display:flex;text-align:center}.hero-centered h1{font-size:var(--text-display);line-height:1.55;letter-spacing:-.5px;margin-bottom:20px}.hero-centered .hero-description{font-size:var(--text-body);max-width:310px;margin-bottom:24px;line-height:1.95}.hero-centered .hero-copy{max-width:100%}.hero-centered .hero-actions .text-link{font-size:var(--text-body)}
  .project-page,.about-page{padding-top:26px}.project-page-header{padding:34px 0 25px}.project-page-header h1{font-size:26px;line-height:1.55;margin-bottom:13px}.page-kicker{font-size:var(--text-caption);letter-spacing:.3px;margin-bottom:12px}
  .project-facts{grid-template-columns:1fr;gap:15px;padding:20px 0;margin-bottom:26px}.project-facts>div{display:flex;justify-content:space-between;gap:20px}.project-facts dt{margin:0;white-space:nowrap}.project-facts dd{text-align:right;font-size:var(--text-body)}
  .project-page .detail-visual{height:300px}.project-page .detail-visual .dashboard-demo{width:510px;height:299px;top:80px;transform:translateX(-43%) rotate(-5deg) scale(.75)}.project-page .detail-visual .dashboard-main{width:423px}.project-page .detail-visual .chart-content{height:67px}
  .project-page .detail-visual .phone-demo{width:187px;height:365px;top:65px;transform:translateX(50%) rotate(6deg) scale(.74)}.project-page .detail-visual .car-ui{width:215px;height:170px;top:89px;transform:translateX(-50%) rotate(-6deg);padding:15px}.project-page .detail-visual .car-ui>img{width:73px;height:47px}.project-page .detail-visual .car-ui-bottom b{font-size:18px}
  .project-brief{padding:28px 0;line-height:1.95}.project-story-section,.about-page-section{grid-template-columns:1fr;gap:14px;padding:28px 0}.story-number{padding:0}.project-story-section h2{font-size:var(--text-heading);line-height:1.6;margin-bottom:12px}
  .project-page-navigation{align-items:flex-start;flex-direction:column;gap:26px;padding:30px 0 35px}.next-project-link{align-self:stretch;text-align:left;grid-template-columns:1fr auto}.next-project-link strong{font-size:var(--text-title)}
  .about-page-header{padding:36px 0}.about-page-header h1{font-size:26px}.about-page{padding-bottom:14px}.about-page-section{gap:18px}.about-page-section h2{font-size:var(--text-title)}.focus-list li{margin-bottom:20px}
}
@media(max-width:360px){.hero-centered h1{font-size:32px}.hero-centered .hero-description{max-width:280px}.project-page-header h1{font-size:24px}.project-story-section h2{font-size:22px}}
@media print{.page-back,.project-page-navigation{display:none}.hero.hero-centered{min-height:320px;padding:40px 0}.project-page-header{padding-top:20px}.project-story-section,.about-page-section{break-inside:avoid}.project-page .detail-visual{print-color-adjust:exact}}

/* Desktop image galleries: original image ratios, quiet sticky table of contents. */
.gallery-page.wrap{width:min(1360px,calc(100% - 64px));padding-top:0;padding-bottom:75px}
.gallery-page-header{display:flex;align-items:center;justify-content:center;min-height:320px;padding:80px 0 94px;text-align:center}
.gallery-page-header h1{font-size:var(--text-display);font-weight:500;line-height:1.45;letter-spacing:-.7px;margin:0}
.gallery-page-header h1:after{content:"";display:block;width:32px;height:1px;margin:28px auto 0;background:#c5ccbd}
.gallery-layout{display:grid;grid-template-columns:160px minmax(0,1fr) 160px;align-items:start;gap:40px}
.gallery-stream{grid-column:2;min-width:0}
.gallery-section{scroll-margin-top:24px}
.gallery-section+.gallery-section{margin-top:48px}
.gallery-figure{margin:0}
.gallery-figure+.gallery-figure{margin-top:24px}
.gallery-image{display:block;width:100%;height:auto;max-width:100%;border-radius:4px}
.gallery-preview{aspect-ratio:var(--preview-ratio,16/9);background:var(--preview-background,#edf0eb);border-radius:4px;overflow:hidden}
.gallery-preview .gallery-image{width:100%;height:100%;object-fit:contain;border-radius:0}
.gallery-sidebar{grid-column:3;grid-row:1;position:sticky;top:124px;align-self:start;min-width:0;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(7px);transition:opacity .28s ease,transform .28s ease,visibility .28s}
.gallery-sidebar.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.gallery-toc{padding-left:20px;border-left:1px solid var(--line)}
.gallery-toc h2{font-size:var(--text-caption);font-weight:400;line-height:1.65;color:#969e8e;letter-spacing:0;margin:0 0 15px}
.gallery-toc-links{display:flex;flex-direction:column;gap:3px;max-height:calc(100vh - 212px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d6dbcf transparent}
.gallery-toc-link{display:flex;align-items:baseline;gap:12px;font-size:var(--text-caption);font-weight:400;line-height:1.8;color:#8a9480;padding:8px 0;transition:color .2s}
.gallery-toc-number{font-size:var(--text-caption);font-variant-numeric:tabular-nums;color:#a2aa98;flex-shrink:0}
.gallery-toc-link.active,.gallery-toc-link:hover{color:var(--ink)}
.gallery-toc-link.active .gallery-toc-number{color:var(--ink)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media print{.gallery-sidebar{display:none}.gallery-layout{display:block}.gallery-page{padding-top:25px}.gallery-figure{break-inside:avoid}}

/* Taste Skill / quiet-instrument. Desktop visual layer only; no route or behavior changes. */
@media screen and (min-width:1000px){
  :root{
    --paper:#f5f6f3;
    --ink:#242823;
    --muted:#697066;
    --blue:#3f5b47;
    --surface:#e8ece5;
    --text-display:68px;
    --text-heading:28px;
    --text-title:20px;
    --text-body:16px;
    --text-caption:13px;
  }
  body{color:var(--ink);font-kerning:normal}
  ::selection{background:#cedacd;color:var(--ink)}
  .site-header{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}
  .site-header.scrolled{box-shadow:none}
  .wordmark{font-size:24px;font-weight:600;letter-spacing:-.8px}
  .header-inner nav{gap:36px}
  .nav-link{font-size:14px;color:var(--muted)}
  .nav-link.active,.nav-link:hover,.header-inner .return-home{color:var(--ink)}
  .nav-link:after{display:none}
  .brand-dot,.blue-period{color:var(--blue)}
  .hero.hero-centered{min-height:510px;padding:82px 0 86px;border:0}
  .hero-centered .hero-copy{max-width:900px}
  .hero-centered h1{max-width:900px;font-size:var(--text-display);font-weight:400;line-height:1.24;letter-spacing:-1.9px;margin-bottom:32px}
  .hero-centered .hero-description{font-size:var(--text-body);line-height:1.8;color:var(--ink);max-width:480px;margin-bottom:30px}
  .hero-actions .text-link{font-size:14px;font-weight:500;line-height:1.5;padding:12px 24px;border:0;background:var(--surface);border-radius:0;color:var(--ink);transition:background-color .2s,color .2s}
  .hero-actions .text-link:hover{background:var(--ink);color:var(--paper)}
  .work-section{padding-top:58px;padding-bottom:96px}
  .section-heading{margin-bottom:30px}
  .section-heading h2{font-size:var(--text-heading);font-weight:500;line-height:1.4;letter-spacing:-.5px}
  .count,.project-meta>span:last-child{display:none}
  .sample-note{font-size:var(--text-caption);color:var(--muted)}
  .featured-grid{gap:28px}
  .project-cover{height:320px;border-radius:0}
  .cover-orbit{background:#e8edf0}.cover-copilot{background:#e9ece5}.cover-motion{background:#e6ebe6}
  .cover-topline{top:25px;left:25px;right:25px}
  .cover-topline>span:first-child{font-size:20px;font-weight:500;letter-spacing:-.4px;color:var(--ink)}
  .dashboard-demo,.phone-demo,.car-ui{box-shadow:none}
  .dashboard-top,.dashboard-list>div,.car-ui-bottom,.confidence,.phone-input{border:0}
  .stats-row>div{border:0;background:#f5f7f8}
  .dashboard-chart{border:0;background:#f8fafb}
  .bar-chart{background:none}
  .confidence i{background:#a5b392}
  .phone-demo{border-color:#fff}
  .project-card:hover .project-cover{box-shadow:none;filter:none}
  .cover-arrow{width:24px;height:24px;right:20px;bottom:19px;background:none;border-radius:0}
  .cover-arrow img{width:18px;height:18px}
  .project-meta{font-size:var(--text-caption);line-height:1.6;color:var(--muted);margin-top:20px;margin-bottom:9px}
  .project-card h3{font-size:var(--text-title);font-weight:500;line-height:1.5;letter-spacing:-.25px;margin-bottom:10px}
  .project-card>p{font-size:var(--text-body);line-height:1.75;color:var(--ink);margin:0;max-width:none}
  body[data-page] .site-footer{border:0;padding-top:28px;padding-bottom:36px}
  .site-footer>p,.back-top{font-size:var(--text-caption);line-height:1.6;color:var(--muted)}
  .back-top:hover{color:var(--ink)}
  .about-page{padding-top:16px;padding-bottom:16px}
  .about-page-header{padding-top:24px;padding-bottom:28px}
  .about-page-header .page-kicker{display:none}
  .about-page-header h1{font-size:var(--text-display);font-weight:400;line-height:1.2;letter-spacing:-1.5px;margin-bottom:14px}
  .about-page-header>p:not(.page-kicker){font-size:var(--text-body);color:var(--ink);line-height:1.75}
  .profile-placeholder{font-size:var(--text-caption);color:var(--muted)}
  .about-page-section{border:0;padding-top:18px;padding-bottom:18px}
  .about-page-section+.about-page-section{margin-top:8px}
  .about-page-section h2{font-size:var(--text-title);line-height:1.5;font-weight:500;letter-spacing:-.2px}
  .about-page-section p,.focus-list strong,.focus-list span{font-size:var(--text-body);line-height:1.7;color:var(--ink)}
  .about-page-section p{margin-bottom:12px}
  .focus-list li{gap:4px;margin-bottom:12px}
  .focus-list strong,.focus-list span{line-height:1.6}
  .focus-list strong{font-weight:500}
  .focus-list span{color:var(--muted)}
  .contact-pending,.contact-email,.copy-email{color:var(--muted)}
  body[data-page="about"] .site-footer{padding-top:20px;padding-bottom:24px}
  .gallery-page-header h1{font-size:var(--text-display);font-weight:400;line-height:1.2;letter-spacing:-1.6px}
  .gallery-page-header h1:after{display:none}
  .gallery-image,.gallery-preview{border-radius:0}
  .gallery-toc{border:0;padding-left:20px}
  .gallery-toc h2{font-size:var(--text-caption);line-height:1.6;font-weight:400;color:var(--muted);margin-bottom:16px}
  .gallery-toc-number{display:none}
  .gallery-toc-link{font-size:14px;line-height:1.7;color:#858d80;padding:9px 0}
  .gallery-toc-link.active,.gallery-toc-link:hover{color:var(--ink)}
}

/* Project covers use the native 1920 × 1080 ratio instead of fixed heights. */
.project-card .project-cover{width:100%;height:auto;aspect-ratio:16/9;container:project-cover / inline-size}
.project-card .project-cover>img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
@media screen and (min-width:1000px){
  .project-card .dashboard-demo{top:64px;transform:translateX(-47%) rotate(-5deg) scale(.42)}
  .project-card:hover .dashboard-demo{transform:translateX(-47%) translateY(-2px) rotate(-5deg) scale(.42)}
  .project-card .phone-demo{top:55px;transform:translateX(50%) rotate(6deg) scale(.36)}
  .project-card:hover .phone-demo{transform:translateX(50%) translateY(-2px) rotate(6deg) scale(.36)}
  .project-card .car-ui{top:68px;transform:translateX(-50%) rotate(-6deg) scale(.6)}
  .project-card:hover .car-ui{transform:translateX(-50%) translateY(-2px) rotate(-6deg) scale(.6)}
}
@container project-cover (max-width:320px){
  .project-card .dashboard-demo{top:56px;transform:translateX(-47%) rotate(-5deg) scale(.35)}
  .project-card:hover .dashboard-demo{transform:translateX(-47%) translateY(-2px) rotate(-5deg) scale(.35)}
  .project-card .phone-demo{top:48px;transform:translateX(50%) rotate(6deg) scale(.3)}
  .project-card:hover .phone-demo{transform:translateX(50%) translateY(-2px) rotate(6deg) scale(.3)}
  .project-card .car-ui{top:57px;transform:translateX(-50%) rotate(-6deg) scale(.5)}
  .project-card:hover .car-ui{transform:translateX(-50%) translateY(-2px) rotate(-6deg) scale(.5)}
}

/* Taste Skill / dark-room. One charcoal field, silver typography, softly lit work.
   Existing routes, cover ratios, gallery layout and interaction states are preserved. */
:root{
  color-scheme:dark;
  --paper:#101113;
  --ink:#eeefef;
  --muted:#a2a5ab;
  --blue:#d5d9e0;
  --surface:#202226;
  --line:#303238;
  --white:#191b1f;
}
body{background:var(--paper);color:var(--ink);padding-top:96px;font-kerning:normal;-webkit-font-smoothing:antialiased}
body[data-page="home"]{overflow-x:clip}
::selection{background:#444a56;color:#fff}
.skip-link{background:var(--ink);color:var(--paper)}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.hero.hero-centered{position:relative;isolation:isolate}
.hero-centered .hero-copy{position:relative;z-index:1}
.home-rays{position:absolute;top:-96px;bottom:-48px;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;pointer-events:none;mask-image:linear-gradient(to bottom,#000 0%,#000 65%,transparent 100%)}
.hero-centered h1,.gallery-page-header h1,.about-page-header h1{color:var(--ink)}
.hero-centered .hero-description,.about-page-section p,.focus-list strong{color:#c4c7cd}
.nav-link,.sample-note,.project-meta,.profile-placeholder,.section-kicker,.site-footer>p,.back-top,.contact-pending,.contact-email,.copy-email,.about-page-header>p:not(.page-kicker),.focus-list span{color:var(--muted)}
.nav-link.active,.nav-link:hover,.return-home,.header-inner .return-home,.back-top:hover{color:var(--ink)}
.hero-actions .text-link{color:var(--ink);background:var(--surface);border:0;border-radius:18px}
.hero-actions .text-link:hover{background:#2a2d33;color:var(--ink)}
.hero-actions .specular-button{font-size:16px;font-weight:400;line-height:1.25;letter-spacing:.025em;padding:16px 32px;box-shadow:none}
.cover-orbit{background:#1b252f}.cover-copilot{background:#24272c}.cover-motion{background:#1e2828}
.cover-topline>span:first-child{color:#dde1e5}
.project-card>p{color:var(--muted)}
.cover-arrow img,.return-home img,.back-top img,.page-back img,.next-project-link img{filter:invert(1);opacity:.7}
.project-card .project-cover{transition:background-color .3s ease}
.project-card:hover .project-cover{filter:none;box-shadow:none}
.project-card h3{transition:color .2s ease}
.project-card:hover h3{color:#fff}
.cover-arrow{transition:transform .25s ease}
.project-card:hover .cover-arrow{transform:translate(2px,-2px)}
.gallery-toc h2{color:var(--muted)}
.gallery-toc-link{color:#92969e}
.gallery-toc-link.active,.gallery-toc-link:hover{color:var(--ink)}
.gallery-toc-link.active{font-weight:500}
.gallery-toc-links{scrollbar-color:#4a4d54 transparent}
.site-footer>p,.back-top{letter-spacing:.015em}

/* Floating controls borrow the same neutral glass and silver as the main action. */
.site-header{position:fixed;top:24px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);height:auto;z-index:50;padding:0;background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none}
.site-header.scrolled{background:transparent;box-shadow:none}
.site-header .header-inner{width:auto;max-width:100%;height:auto;min-height:0;margin:0;display:flex;justify-content:center;position:static}
.site-header .header-inner nav{position:static;left:auto;transform:none;display:flex;align-items:center;gap:4px;margin:0;padding:5px;border-radius:999px;background:#23252a;box-shadow:0 8px 32px #0003;pointer-events:auto}
.site-header .nav-link{display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;font-size:14px;font-weight:400;line-height:1.5;letter-spacing:.015em;padding:10px 22px;border-radius:0;color:#92969e;background:transparent;transition:color .2s}
.site-header .nav-link:after{display:none}
.site-header .nav-link:hover{color:var(--ink);background:transparent}
.site-header .nav-link.active{color:#f1f2f3;background:transparent;font-weight:500}
.site-header .return-home{color:var(--ink);padding-inline:20px}
.site-header .nav-brand{display:flex;align-items:center;justify-content:center;flex:none;width:30px;height:40px;margin-inline:2px}
.site-header .nav-brand img{display:block;width:20px;height:21px;object-fit:contain}
.resume-confirmation{width:min(400px,calc(100% - 40px));margin:auto;padding:28px;border:0;border-radius:16px;background:#23252a;color:#f1f2f3;box-shadow:0 24px 80px #0006}
.resume-confirmation::backdrop{background:#0009;backdrop-filter:none}
.resume-confirmation h2{margin:0 0 10px;font-size:20px;font-weight:500;line-height:1.5}
.resume-confirmation p{margin:0;color:#b5b8c0;font-size:15px;line-height:1.6}
.resume-confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:28px}
.resume-confirm-actions button{padding:10px 22px;border:0;border-radius:8px;font:inherit;font-size:14px;line-height:1.5;cursor:pointer;background:#33363d;color:#d6d9de}
.resume-confirm-actions [data-resume-accept]{background:#e4e6eb;color:#1b1d21}
.resume-confirm-actions button:hover{filter:brightness(1.12)}
.resume-confirm-actions button:focus-visible{outline:2px solid #b5bdca;outline-offset:3px}

@media screen and (min-width:1000px){
  :root{--text-display:clamp(56px,4.7vw,76px);--text-heading:28px;--text-title:22px;--text-body:16px;--text-caption:14px}
  .hero.hero-centered{min-height:548px;padding:88px 0 92px}
  .home-rays{top:-92px;bottom:auto;height:650px}
  .hero-centered .hero-copy{max-width:1040px}
  .hero-centered h1{max-width:1040px;font-size:var(--text-display);font-weight:350;line-height:1.26;letter-spacing:-.035em;margin-bottom:30px}
  .hero-centered .hero-description{font-size:var(--text-body);font-weight:400;line-height:1.9;max-width:480px;margin-bottom:32px;letter-spacing:.015em}
  .work-section{padding-top:40px;padding-bottom:100px}
  .section-heading{align-items:baseline;margin-bottom:30px}
  .section-heading h2{font-size:var(--text-heading);font-weight:400;letter-spacing:-.025em}
  .sample-note{font-size:var(--text-caption);font-weight:400;letter-spacing:.02em}
  .featured-grid{gap:28px}
  .project-cover{border-radius:0}
  .cover-topline>span:first-child{font-size:20px;font-weight:400;letter-spacing:-.025em}
  .project-meta{font-size:var(--text-caption);line-height:1.6;margin-top:22px;margin-bottom:8px}
  .project-card h3{font-size:var(--text-title);font-weight:400;line-height:1.5;letter-spacing:-.025em;margin-bottom:8px}
  .project-card>p{font-size:var(--text-body);line-height:1.75;letter-spacing:0}
  body[data-page] .site-footer{padding-top:32px;padding-bottom:36px}
  .site-footer>p,.back-top{font-size:var(--text-caption);line-height:1.6}
  .about-page{max-width:1000px;padding-top:0;padding-bottom:8px}
  .about-page-header{padding:32px 0 24px}
  .about-page-header h1{font-size:var(--text-display);font-weight:350;line-height:1.26;letter-spacing:-.035em;margin-bottom:18px}
  .about-page-header>p:not(.page-kicker){font-size:18px;line-height:1.8}
  .profile-placeholder{font-size:var(--text-caption);margin-top:10px;color:var(--muted)}
  .about-page-section{padding-top:12px;padding-bottom:12px;gap:64px}
  .about-page-section+.about-page-section{margin-top:8px}
  .about-page-section h2{font-size:var(--text-title);font-weight:400;line-height:1.5;letter-spacing:-.025em}
  .about-page-section p,.focus-list strong,.focus-list span{font-size:var(--text-body);line-height:1.8}
  .about-page-section p{margin-bottom:14px;max-width:42em}
  .focus-list li{gap:4px;margin-bottom:14px}
  .focus-list li:last-child{margin-bottom:0}
  .focus-list strong{font-weight:400}
  body[data-page="about"] .site-footer{padding-top:20px;padding-bottom:24px}
  .gallery-page-header{min-height:300px;padding:72px 0 84px}
  .gallery-page-header h1{font-size:clamp(42px,3.7vw,60px);font-weight:350;line-height:1.3;letter-spacing:-.035em}
  .gallery-toc{padding-left:16px}
  .gallery-toc h2{font-size:var(--text-caption);margin-bottom:18px}
  .gallery-toc-link{font-size:var(--text-caption);line-height:1.7;padding:10px 0}
}
@media(prefers-reduced-motion:reduce){.project-card .project-cover,.cover-arrow,.project-card h3{transition:none}}
@media print{body{padding-top:0}.home-rays{display:none}}

/* About: the printed designer identity becomes an object beside the biography. */
.about-lanyard-stage{position:relative;min-width:0;height:580px;isolation:isolate}
#about-lanyard{position:absolute;inset:0}
.lanyard-fallback{position:absolute;top:26%;left:50%;width:46%;transform:translateX(-50%) rotate(7deg)}
.lanyard-fallback:before{content:"";position:absolute;bottom:100%;left:50%;width:20px;height:240px;transform:translateX(-50%);background:#343943}
.lanyard-fallback img{position:relative;display:block;width:100%;height:auto;border-radius:14px}
.about-lanyard-stage:has(.lanyard-canvas) .lanyard-fallback{visibility:hidden}
.lanyard-canvas:focus-visible{outline:none}
.about-lanyard-stage:has(.lanyard-canvas:focus-visible):after{content:"Enter / 空格 · 翻转名片";position:fixed;left:73%;bottom:28px;transform:translateX(-50%);color:var(--ink);font-size:14px;letter-spacing:.03em;pointer-events:none}
@media screen and (min-width:1000px){
  .about-with-lanyard{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);column-gap:72px;max-width:1200px;padding-top:24px;padding-bottom:56px;align-items:start}
  .about-content{min-width:0}
  .about-with-lanyard .about-page-header{padding:36px 0 44px}
  .about-with-lanyard .about-page-header h1{font-size:clamp(48px,4.4vw,68px);letter-spacing:-.04em;margin-bottom:16px}
  .about-with-lanyard .about-page-header>p:not(.page-kicker){font-size:16px;line-height:1.8;color:var(--muted)}
  .about-with-lanyard .profile-placeholder{display:block;font-size:14px;margin-top:10px}
  .about-with-lanyard .about-page-section{display:block;padding:0;margin:0}
  .about-with-lanyard .about-page-section+.about-page-section{margin-top:36px}
  .about-with-lanyard .about-page-section h2{font-size:22px;font-weight:400;letter-spacing:-.025em;margin:0 0 16px}
  .about-with-lanyard .about-page-section p{font-size:16px;line-height:1.9;margin:0 0 14px;color:#c4c7cd}
  .about-with-lanyard .focus-list li{display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px;margin-bottom:14px;align-items:baseline}
  .about-with-lanyard .focus-list strong,.about-with-lanyard .focus-list span{font-size:16px;font-weight:400;line-height:1.8}
  .about-with-lanyard .focus-list strong{color:var(--ink)}
  .about-with-lanyard .focus-list span{color:var(--muted)}
  .about-with-lanyard .contact-pending{font-size:14px}
  .about-with-lanyard .about-lanyard-stage{position:sticky;top:96px;height:clamp(600px,calc(100vh - 112px),760px);margin-top:0}
  #about-lanyard{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none}
  #about-lanyard .lanyard-canvas{pointer-events:none}
}
@media print{.about-lanyard-stage{display:none}.about-with-lanyard{display:block}}

/* One-screen desktop home; contact details float only while requested. */
.contact-popover-wrap{position:relative;display:inline-flex;justify-content:center}
.contact-popover{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);width:308px;padding:24px;background:#24272d;border-radius:18px;box-shadow:0 16px 48px #0006;text-align:left;z-index:20}
.contact-popover:before{content:"";position:absolute;left:0;bottom:100%;height:14px;width:100%}
.contact-popover-heading h2{font-size:18px;font-weight:400;line-height:1.5;letter-spacing:0;margin:0 0 4px;color:var(--ink)}
.contact-popover-heading p{font-size:13px;font-weight:400;line-height:1.6;color:var(--muted);margin:0}
.contact-qr{display:block;width:168px;height:168px;margin:20px auto 22px;background:#f7f8f7;border-radius:8px}
.contact-methods{display:grid;gap:10px}
.contact-method{display:grid;grid-template-columns:34px minmax(0,1fr) 44px;align-items:center;gap:10px;min-height:30px}
.contact-method-label{font-size:13px;line-height:1.6;color:var(--muted)}
.contact-value{font-size:15px;line-height:1.6;letter-spacing:.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.contact-copy{font-size:13px;font-weight:400;line-height:1.6;color:var(--muted);background:none;border:0;padding:5px 0;text-align:right;cursor:pointer;white-space:nowrap}
.contact-copy:hover,.contact-copy:focus-visible{color:var(--ink)}
@media screen and (min-width:1000px){
  body[data-page="about"]{height:100svh;min-height:0;display:flex;flex-direction:column;padding-top:clamp(88px,10vh,96px);overflow:hidden}
  body[data-page="about"] .about-with-lanyard{flex:1;min-height:0;padding-top:0;padding-bottom:0;align-items:center}
  .about-with-lanyard .about-content{display:flex;flex-direction:column;gap:clamp(16px,2.4vh,28px)}
  .about-with-lanyard .about-page-header{padding:0}
  .about-with-lanyard .about-page-header h1{font-size:clamp(40px,5.6vh,60px);line-height:1.2;margin-bottom:10px}
  .about-with-lanyard .profile-placeholder{margin-top:6px}
  .about-with-lanyard .about-page-section+.about-page-section{margin-top:0}
  .about-with-lanyard .about-page-section h2{font-size:20px;line-height:1.4;margin-bottom:10px}
  .about-with-lanyard .about-page-section p{line-height:1.7;margin-bottom:10px}
  .about-with-lanyard .about-page-section p:last-child{margin-bottom:0}
  .about-with-lanyard .focus-list li{margin-bottom:10px}
  .about-with-lanyard .focus-list li:last-child{margin-bottom:0}
  .about-with-lanyard .about-lanyard-stage{position:relative;top:auto;height:100%;min-height:0;align-self:stretch}
  body[data-page="about"] .site-footer{flex:none;display:block;padding-top:0;padding-bottom:20px}
  body[data-page="about"] .site-footer>p{font-size:13px;margin:0}
}
@media screen and (min-width:1000px){
  body[data-page="home"]{height:100svh;min-height:0;display:flex;flex-direction:column;padding-top:clamp(76px,10vh,96px);overflow:hidden}
  body[data-page="home"] main{display:flex;flex-direction:column;flex:1;min-height:0}
  body[data-page="home"] .hero.hero-centered{flex:1;min-height:0;padding:12px 0 20px;z-index:2}
  body[data-page="home"] .hero-centered h1{font-size:clamp(40px,6vh,64px);line-height:1.23;margin-bottom:18px}
  body[data-page="home"] .hero-centered .hero-description{max-width:720px;font-size:16px;line-height:1.8;margin-bottom:22px}
  body[data-page="home"] .work-section{flex:none;padding-top:16px;padding-bottom:24px}
  body[data-page="home"] .section-heading{margin-bottom:18px}
  body[data-page="home"] .section-heading h2{font-size:22px}
  body[data-page="home"] .project-meta{font-size:13px;margin-top:14px;margin-bottom:5px}
  body[data-page="home"] .project-card h3{font-size:20px;margin-bottom:5px}
  body[data-page="home"] .project-card>p{font-size:14px;line-height:1.6}
  body[data-page="home"] .site-footer{flex:none;display:block;padding-top:0;padding-bottom:20px}
  body[data-page="home"] .site-footer>p{font-size:13px;margin:0}
}
@media screen and (min-width:1000px) and (max-height:760px){
  body[data-page="home"] .hero-centered h1{font-size:40px;margin-bottom:12px}
  body[data-page="home"] .hero-centered .hero-description{margin-bottom:16px;font-size:14px}
  body[data-page="home"] .hero-actions .specular-button{padding:13px 28px;font-size:14px}
  body[data-page="home"] .work-section{padding-top:10px;padding-bottom:16px}
  body[data-page="home"] .section-heading{margin-bottom:12px}
  body[data-page="home"] .site-footer{padding-bottom:14px}
}

/* Quiet work index: one picture and one caption per project. */
.project-caption{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px}
.project-caption h3{display:flex;align-items:baseline;gap:12px;min-width:0;margin:0}
.project-name{font-size:16px;font-weight:400;line-height:1.6;letter-spacing:-.01em;color:var(--ink)}
.project-description{font-size:14px;font-weight:400;line-height:1.6;letter-spacing:0;color:var(--muted)}
.project-link-arrow{flex:none;width:16px;height:16px;filter:invert(1);opacity:.5;transition:opacity .2s,transform .2s}
.project-card:hover .project-link-arrow,.project-card:focus-visible .project-link-arrow{opacity:1;transform:translate(2px,-2px)}
@media screen and (min-width:1000px){
  body[data-page="home"] .section-heading h2{font-size:16px;font-weight:400;line-height:1.6;letter-spacing:0;color:var(--muted)}
  body[data-page="home"] .section-heading{margin-bottom:18px}
  body[data-page="home"] .featured-grid{gap:28px}
  body[data-page="home"] .project-cover{background:#1b1e23}
  body[data-page="home"] .project-caption h3{font-size:16px;margin:0;line-height:1.6}
  body[data-page="home"] .project-card .dashboard-demo{top:32px}
  body[data-page="home"] .project-card .phone-demo{top:24px}
  body[data-page="home"] .project-card .car-ui{top:40px}
}
@media(prefers-reduced-motion:reduce){.project-link-arrow{transition:none}}

/* Real profile: concise resume rows and an unaltered portrait on the badge. */
.experience-list{list-style:none;margin:0;padding:0}
.experience-list li{position:relative;padding-left:22px}
.experience-list li:before{content:"";position:absolute;top:9px;left:0;width:7px;height:7px;border-radius:50%;background:#c3cad6;z-index:1}
.experience-list li:not(:last-child):after{content:"";position:absolute;top:12px;left:3px;width:1px;height:calc(100% + 14px);background:#393e47}
.experience-list li+li{margin-top:14px}
.experience-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:5px}
.experience-heading strong{font-size:16px;line-height:1.6;font-weight:400;color:var(--ink)}
.experience-heading time{flex:none;font-size:13px;line-height:1.6;color:var(--muted);font-variant-numeric:tabular-nums}
.about-with-lanyard .experience-list p{font-size:14px;line-height:1.7;color:var(--muted);margin:0}
.about-contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.contact-item{display:flex;align-items:center;gap:10px;min-width:0;min-height:42px;padding:10px 12px;margin:0;border:0;border-radius:8px;background:#1b1d21;color:var(--ink);text-align:left;text-decoration:none;cursor:pointer;transition:background-color .18s,color .18s}
.contact-item:hover,.contact-item:focus-visible{background:#282b31;color:#fff}
.contact-item.is-copied{background:#2b3036}
.contact-item-icon{flex:none;width:18px;height:18px;color:#c3c8d0}
.contact-item-content{display:flex;align-items:baseline;gap:8px;flex:1;min-width:0}
.contact-item-name{font-size:13px;line-height:1.6;font-weight:400;color:var(--muted);white-space:nowrap}
.contact-item-value{font-size:14px;line-height:1.6;font-weight:400;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.contact-item-action{display:flex;flex:none;align-items:center;justify-content:center;width:14px;color:var(--muted)}
.contact-item-action svg{width:14px;height:14px}
.contact-check-icon,.contact-item.is-copied .contact-copy-icon{display:none}
.contact-item.is-copied .contact-check-icon{display:block;color:var(--ink)}
@media screen and (min-width:1000px) and (max-height:760px){
  .about-with-lanyard .about-content{gap:8px}
  .about-with-lanyard .about-page-header{display:flex;align-items:baseline;gap:16px}
  .about-with-lanyard .about-page-header h1{margin-bottom:0;flex:none}
  .about-with-lanyard .about-page-section h2{margin-bottom:6px}
  .about-with-lanyard .experience-list li+li{margin-top:8px}
  .about-with-lanyard .experience-list li:not(:last-child):after{height:calc(100% + 8px)}
  .about-with-lanyard .about-page-section>div>p{line-height:1.6}
  .about-with-lanyard .about-page-header>p:not(.page-kicker){line-height:1.5}
  .about-contact-grid{gap:6px}
  .contact-item{min-height:40px;padding-top:8px;padding-bottom:8px}
  body[data-page="about"] .site-footer{padding-bottom:14px}
}
@media(prefers-reduced-motion:reduce){.contact-item{transition:none}}
@media screen and (min-width:1000px){
  body[data-page="home"] .project-cover>img{object-fit:contain;transition:opacity .25s ease}
  body[data-page="home"] .project-card:hover .project-cover>img{opacity:.92}
}

/* Compact layouts: natural page scrolling, full-width artwork and a thumb-accessible directory. */
.gallery-mobile-toggle{display:none}
@media screen and (max-width:999px){
  :root{--text-display:32px;--text-heading:22px;--text-title:18px;--text-body:15px;--text-caption:13px;scroll-padding-top:100px}
  body{padding-top:88px;height:auto;min-height:100svh}
  .wrap{width:calc(100% - 40px)}
  .site-header{top:calc(14px + env(safe-area-inset-top,0px))}
  .site-header .nav-link{min-height:44px;padding:10px 18px;font-size:14px}
  .site-header .nav-brand{width:28px}
  .hero.hero-centered{display:flex;min-height:360px;padding:54px 0 56px;text-align:center;border:0;z-index:3}
  .hero-centered .hero-copy{width:100%;max-width:680px;margin:auto}
  .hero-centered h1{font-size:clamp(26px,7.5vw,40px);font-weight:400;line-height:1.4;letter-spacing:-.035em;max-width:100%;margin:0 0 20px}
  .hero-centered .hero-description{font-size:14px;line-height:1.8;max-width:23em;margin:0 auto 26px}
  .hero-centered .hero-actions{justify-content:center}
  .home-rays{top:-88px;bottom:auto;height:510px;opacity:.65}
  .work-section{max-width:680px;padding:24px 0 40px;border:0}
  .section-heading{margin-bottom:18px}
  .section-heading h2{font-size:16px;font-weight:400;color:var(--muted)}
  .featured-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .project-cover{height:auto;aspect-ratio:16/9;border-radius:0}
  .project-caption{margin-top:12px;gap:12px}
  .project-caption h3{gap:10px;margin:0;font-weight:400}
  .project-name{font-size:16px}
  .project-description{font-size:13px}
  .site-footer{max-width:680px;padding:24px 0 calc(24px + env(safe-area-inset-bottom,0px));border:0!important}
  .site-footer>p{font-size:12px}
  .contact-popover{position:fixed;top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));left:16px;right:16px;transform:none;width:auto;max-width:400px;margin:auto;max-height:calc(100svh - 116px);overflow-y:auto;padding:24px;z-index:60}
  .contact-popover:before{display:none}
  .contact-qr{width:184px;height:184px;margin:20px auto}
  .contact-copy{min-width:44px;min-height:44px;font-size:14px}
  .contact-value{font-size:15px}
  .about-with-lanyard{display:flex;flex-direction:column;max-width:680px;padding-top:24px;padding-bottom:0;gap:0}
  .about-with-lanyard .about-content{display:contents}
  .about-with-lanyard .about-page-header{order:0;width:100%;padding:0}
  .about-page-header .page-kicker{display:none}
  .about-with-lanyard .about-page-header h1{font-size:36px;font-weight:400;line-height:1.3;margin:0 0 10px}
  .about-with-lanyard .about-page-header>p{font-size:15px;color:var(--muted)}
  .about-with-lanyard .about-lanyard-stage{order:1;position:relative;width:100%;height:360px;min-height:360px;flex:none;margin:0;top:auto;overflow:visible}
  #about-lanyard{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
  #about-lanyard .lanyard-canvas{pointer-events:auto}
  .lanyard-fallback{top:20%;width:45%;max-width:184px}
  .lanyard-fallback:before{height:80px}
  .about-lanyard-stage:has(.lanyard-canvas:focus-visible):after{display:none}
  .about-with-lanyard .about-page-section{order:2;display:block;width:100%;border:0;padding:0;margin:0 0 32px}
  .about-with-lanyard .about-page-section h2{font-size:19px;font-weight:400;line-height:1.5;margin:0 0 14px}
  .about-with-lanyard .about-page-section p{font-size:15px;line-height:1.85;color:#c4c7cd;margin:0}
  .experience-heading{display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin-bottom:8px}
  .experience-heading strong{font-size:15px;line-height:1.6}
  .experience-heading time{font-size:12px}
  .experience-list li{padding-left:20px}
  .experience-list li+li{margin-top:24px}
  .experience-list li:not(:last-child):after{height:calc(100% + 24px)}
  .about-with-lanyard .experience-list p{font-size:14px;line-height:1.8;color:var(--muted)}
  .about-contact-grid{grid-template-columns:minmax(0,1fr);gap:8px}
  .contact-item{min-height:52px;padding:12px 14px}
  .contact-item-value{font-size:14px}
  .contact-item-content{gap:14px}
  .resume-confirmation{padding:24px;border-radius:14px}
  .resume-confirm-actions button{min-height:44px}
  .gallery-page.wrap{width:100%;padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
  .gallery-page-header{min-height:220px;padding:38px 24px 50px}
  .gallery-page-header h1{font-size:clamp(24px,6.4vw,36px);font-weight:400;line-height:1.5;letter-spacing:-.03em;overflow-wrap:anywhere}
  .gallery-page-header h1:after{display:none}
  .gallery-layout{display:block}
  .gallery-stream{width:100%;min-width:0}
  .gallery-section{scroll-margin-top:0}
  .gallery-section+.gallery-section{margin-top:20px}
  .gallery-figure+.gallery-figure{margin-top:12px}
  .gallery-image{width:100%;height:auto;border-radius:0}
  .gallery-sidebar{position:fixed;top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));left:16px;right:16px;max-width:460px;margin:auto;z-index:45;transform:translateY(7px)}
  .gallery-toc{padding:0;border:0;background:#23252a;border-radius:14px;box-shadow:0 8px 32px #0005}
  .gallery-toc h2{display:none}
  .gallery-mobile-toggle{display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:12px 18px;border:0;border-radius:14px;background:transparent;color:#b5b8c0;font:inherit;font-size:14px;text-align:left;cursor:pointer}
  .gallery-mobile-toggle [data-current-chapter]{flex:1;min-width:0;color:#f1f2f3}
  .gallery-sidebar.is-open .gallery-mobile-toggle svg{transform:rotate(180deg)}
  .gallery-toc-links{display:none;position:absolute;bottom:calc(100% + 8px);left:0;right:0;gap:0;max-height:min(440px,55svh);padding:8px 12px;overflow-y:auto;overscroll-behavior:contain;border-radius:14px;background:#23252a;box-shadow:0 8px 32px #0005}
  .gallery-sidebar.is-open .gallery-toc-links{display:flex}
  .gallery-toc-link{min-height:44px;padding:10px 8px;font-size:14px}
  .gallery-toc-link.active{color:#fff;font-weight:500}
  .gallery-toc-number{display:none}
  body[data-page="project"] .site-footer{padding-bottom:calc(94px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(24px + env(safe-area-inset-bottom,0px));font-size:13px}
}