:root{--ink:#111214;--paper:#f3f1eb;--white:#faf9f5;--orange:#f15a24;--muted:#65655f;--line:rgba(17,18,20,.16);--pad:clamp(22px,5vw,80px)}*{box-sizing:border-box} picture{display:contents} picture>source{display:none}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Helvetica Neue",Arial,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}img{display:block;width:100%}::selection{background:var(--orange);color:#fff}.site-header{position:fixed;z-index:20;top:0;left:0;width:100%;height:82px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;background:rgba(243,241,235,.82);backdrop-filter:blur(18px);border-bottom:1px solid rgba(0,0,0,.06)}.wordmark{font-size:27px;font-weight:800;letter-spacing:-.07em}.wordmark span{font-size:8px;vertical-align:top;margin-left:4px}.site-header nav{display:flex;align-items:center;gap:clamp(20px,4vw,60px);font-size:13px}.nav-contact{border:1px solid var(--ink);padding:11px 16px;border-radius:99px}.nav-contact span{margin-left:10px}.section-index{font-size:11px;font-weight:600;letter-spacing:.18em} .resume{padding:125px var(--pad);background:#e5e3dc}.chapter-head{display:grid;grid-template-columns:100px 1fr auto;align-items:end;border-bottom:2px solid;padding-bottom:22px;margin-bottom:70px}.chapter-head span,.chapter-head p{font-size:11px;letter-spacing:.16em;margin:0}.chapter-head h2{font-size:clamp(52px,7vw,105px);letter-spacing:-.065em;line-height:.8;margin:0}.chapter-head p{color:var(--muted)}.portfolio{padding:125px var(--pad)}.dark-section{background:var(--ink);color:var(--white);padding:115px var(--pad)}.section-index.light{color:#92928d} .chapter-work{margin-bottom:95px}.tools{overflow:hidden}.tools-stage{text-align:center;padding:100px 0 25px}.tools-stage>p{font-family:serif;font-style:italic;color:#888}.tool-marquee{font-size:clamp(70px,13vw,180px);white-space:nowrap;letter-spacing:-.07em;font-weight:700;margin:30px -20vw}.tool-marquee i{font-family:serif;font-weight:400;color:var(--orange);padding:0 .08em}.tools-stage small{display:block;max-width:430px;margin:auto;color:#999;font-size:13px;line-height:1.8} .contact{padding:125px var(--pad) 60px;min-height:86vh;position:relative;display:flex;flex-direction:column;justify-content:space-between}.contact-copy p{font-size:13px;color:var(--muted)}.contact-copy h2{font-size:clamp(62px,11.5vw,166px);line-height:.8;letter-spacing:-.075em;margin:55px 0}.contact-copy h2 span{font-family:serif;font-style:italic;font-weight:400}.contact-details{display:flex;justify-content:space-between;padding-top:38px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.08em}footer{background:var(--ink);color:#8d8d88;display:flex;justify-content:space-between;padding:25px var(--pad);font-size:9px;letter-spacing:.14em}html.js .reveal{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s cubic-bezier(.2,.75,.25,1)}html.js .reveal.visible{opacity:1;transform:none}.cursor-glow{position:fixed;width:360px;height:360px;border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(circle,rgba(241,90,36,.08),transparent 68%);transform:translate(-50%,-50%)}@keyframes float{50%{transform:translateY(10px) rotate(5deg)}} @media(max-width:800px){:root{--pad:20px}.site-header{height:64px}.site-header nav{gap:12px}.site-header nav>a{font-size:11px}.nav-contact{padding:9px 11px}.nav-contact span{display:none}.resume{padding:78px var(--pad)}.chapter-head{grid-template-columns:1fr auto;margin-bottom:38px;padding-bottom:16px}.chapter-head span{grid-column:1/-1;margin-bottom:22px}.chapter-head h2{font-size:48px}.portfolio{padding-top:78px;padding-bottom:78px}.tools{padding-top:78px;padding-bottom:78px}.chapter-work{margin-bottom:65px}.tool-marquee{font-size:20vw;margin:35px -65vw}.contact{min-height:auto;padding-top:88px}.contact-copy h2{font-size:17vw;line-height:.88;margin:40px 0 55px}.contact-details{flex-direction:column;gap:16px}.cursor-glow{display:none}footer{padding-block:22px}} @media(max-width:380px){.site-header nav{gap:7px}.site-header nav>a{font-size:9.5px}.nav-contact{padding-inline:7px}.site-header{padding-inline:14px}.wordmark{font-size:21px}.chapter-head h2{font-size:43px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}html.js .reveal,.reveal{opacity:1;transform:none;transition:none}}/* Resume v3 — experience first{padding-top:95px;padding-bottom:95px} /* Resume v4 — continuous editorial sheet */ .resume-editorial{background:#dedcd5;padding:95px clamp(18px,2vw,38px)}.resume-editorial>.chapter-head,.editorial-sheet{width:min(100%,2200px);margin-inline:auto}.resume-editorial>.chapter-head{margin-bottom:48px}.editorial-sheet{background:var(--white);padding:clamp(38px,4vw,78px)}.resume-mast{display:grid;grid-template-columns:1fr 1.45fr;align-items:end;padding-bottom:clamp(40px,5vw,80px);border-bottom:2px solid var(--ink)}.experience-title>span,.resume-skills>div:first-child>span{font-size:11px;letter-spacing:.2em;color:var(--muted)}.experience-editorial{padding-top:clamp(55px,6vw,100px)}.experience-title{display:grid;grid-template-columns:1fr auto;align-items:end;margin-bottom:35px}.experience-title>span{grid-column:1/-1;margin-bottom:20px}.experience-title h3{font-size:clamp(48px,5vw,90px);letter-spacing:-.06em;margin:0}.experience-title p{font-size:14px;color:var(--muted);margin:0}.experience-editorial article{display:grid;grid-template-columns:70px 150px 1.05fr 1.35fr;gap:clamp(20px,3vw,60px);padding:38px 0;border-top:1px solid var(--line);align-items:start}.experience-editorial article:last-child{border-bottom:1px solid var(--ink)}.exp-index{display:grid;place-items:center;width:42px;height:42px;background:var(--orange);color:#fff;border-radius:50%;font-size:11px}.experience-editorial time{font-size:13px;line-height:1.65;color:var(--muted)}.exp-company h4{font-size:clamp(22px,1.7vw,32px);line-height:1.35;margin:0 0 12px}.exp-company p{font-size:14px;color:var(--muted);margin:0}.exp-summary>p{font-size:16px;line-height:1.75;margin:0 0 20px}.exp-summary ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}.exp-summary li{font-size:12px;border:1px solid #ccc;border-radius:99px;padding:8px 12px}.resume-skills{background:transparent;color:var(--ink);display:grid;grid-template-columns:.75fr 1.5fr .75fr;align-items:center;gap:40px;padding:55px 0 0;font-size:inherit;letter-spacing:normal}.resume-skills h3{font-size:26px;margin:10px 0 0}.skill-cloud{display:flex;flex-wrap:wrap;gap:9px}.skill-cloud span{font-size:14px;border-bottom:1px solid;padding:9px 0;margin-right:18px}.software-line{display:flex;justify-content:flex-end;gap:8px}.software-line b{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--ink);color:#fff;font-size:11px} @media(max-width:1000px){.resume-mast{grid-template-columns:1fr}.experience-editorial article{grid-template-columns:55px 120px 1fr}.exp-summary{grid-column:3}.resume-skills{grid-template-columns:1fr}.software-line{justify-content:flex-start}} @media(max-width:800px){.resume-editorial{padding:70px 20px}.resume-editorial>.chapter-head{margin-bottom:34px}.editorial-sheet{padding:34px 24px}.experience-title{display:block}.experience-title h3{font-size:13vw;margin-bottom:15px}.experience-editorial article{grid-template-columns:45px 1fr;gap:20px;padding:32px 0}.experience-editorial time{grid-column:2}.exp-company,.exp-summary{grid-column:2}.exp-company h4{font-size:20px}.exp-company p{font-size:13px}.exp-summary>p{font-size:14px}.exp-summary ul{display:block}.exp-summary li{display:inline-block;margin:0 5px 7px 0;font-size:11px}.resume-skills{padding-top:45px}.skill-cloud span{font-size:13px}.software-line b{width:50px;height:50px}} /* Restore complete experience descriptions */ .experience-editorial .exp-summary ul{display:block;list-style:none;padding:0;margin:0}.experience-editorial .exp-summary li{position:relative;display:block;border:0;border-radius:0;padding:0 0 0 18px;margin:0 0 13px;font-size:14px;line-height:1.72;color:#555}.experience-editorial .exp-summary li:before{content:"";position:absolute;left:0;top:.7em;width:5px;height:5px;border-radius:50%;background:var(--orange)} @media(max-width:800px){.experience-editorial .exp-summary li{font-size:13px;line-height:1.72;margin-bottom:11px;padding-left:16px}}.resume-editorial .experience-title>span,.resume-editorial .resume-skills>div:first-child>span{font-size:13px}.resume-editorial .experience-title p{font-size:16px}.resume-editorial .experience-editorial article{grid-template-columns:64px 155px .9fr 1.55fr;gap:clamp(24px,2.8vw,58px);padding:46px 0}.resume-editorial .experience-editorial time{font-size:15px;line-height:1.7}.resume-editorial .exp-company h4{font-size:clamp(26px,1.8vw,36px)}.resume-editorial .exp-company p{font-size:16px;line-height:1.55}.resume-editorial .exp-summary li{font-size:17px;line-height:1.78;margin-bottom:16px;max-width:980px}.resume-editorial .resume-skills h3{font-size:30px}.resume-editorial .skill-cloud span{font-size:16px}.resume-editorial .software-line b{font-size:13px} @media(max-width:1000px){.resume-editorial .experience-editorial article{grid-template-columns:55px 135px 1fr}.resume-editorial .exp-summary{grid-column:3}} @media(max-width:800px){.resume-editorial .experience-title>span,.resume-editorial .resume-skills>div:first-child>span{font-size:11px}.resume-editorial .experience-editorial article{grid-template-columns:42px 1fr;gap:18px}.resume-editorial .experience-editorial time{font-size:14px}.resume-editorial .exp-company h4{font-size:22px}.resume-editorial .exp-company p{font-size:15px}.resume-editorial .exp-summary{grid-column:2}.resume-editorial .exp-summary li{font-size:15px;line-height:1.78;margin-bottom:14px}.resume-editorial .skill-cloud span{font-size:14px}} /* Simplified resume masthead */ .resume-mast-simple{grid-template-columns:1.1fr 1fr .7fr;gap:clamp(35px,5vw,95px);align-items:end;padding-bottom:48px}.mast-summary{padding-bottom:3px}.mast-summary strong{display:block;font-size:clamp(24px,2vw,38px);line-height:1.3;letter-spacing:-.035em}.mast-summary strong b{font-size:1.8em;color:var(--orange);font-weight:600}.mast-summary>p{font-size:14px;color:var(--muted);margin:18px 0 0;line-height:1.6}.mast-contact{font-style:normal;display:flex;flex-direction:column;align-items:flex-start;gap:9px}.mast-contact>span{font-size:11px;letter-spacing:.2em;color:var(--muted);margin-bottom:10px}.mast-contact a{font-size:15px;border-bottom:1px solid #aaa;padding-bottom:3px}.mast-contact p{font-size:13px;color:var(--muted);margin:10px 0 0}.resume-mast-simple+.experience-editorial{padding-top:60px} @media(max-width:1000px){.resume-mast-simple{grid-template-columns:1fr 1fr}.resume-mast-simple .mast-contact{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:12px 28px}.resume-mast-simple .mast-contact>span{grid-column:1/-1;margin:0}.resume-mast-simple .mast-contact p{margin:0}} @media(max-width:800px){.resume-mast-simple{grid-template-columns:1fr;gap:38px;padding-bottom:40px}.mast-summary strong{font-size:24px}.mast-summary>p{font-size:13px}.resume-mast-simple .mast-contact{grid-column:auto;display:flex}.mast-contact a{font-size:15px}.resume-mast-simple+.experience-editorial{padding-top:48px}} /* Compact masthead without repeated name */ .resume-mast-compact{grid-template-columns:1fr auto;gap:80px;align-items:end;padding:30px 0 42px}.resume-mast-compact .mast-summary>span{display:block;font-size:11px;letter-spacing:.2em;color:var(--muted);margin-bottom:22px}.resume-mast-compact .mast-summary h3{font-size:clamp(42px,4vw,72px);letter-spacing:-.055em;margin:0 0 15px}.resume-mast-compact .mast-summary strong{font-size:clamp(22px,1.7vw,32px)}.resume-mast-compact .mast-summary strong b{font-size:1.4em}.resume-mast-compact .mast-summary>p{margin-top:14px}.resume-mast-compact .mast-contact{min-width:250px}.resume-mast-compact+.experience-editorial{padding-top:48px} @media(max-width:800px){.resume-mast-compact{grid-template-columns:1fr;gap:35px;padding-top:10px}.resume-mast-compact .mast-summary h3{font-size:11vw}.resume-mast-compact .mast-contact{min-width:0}.resume-mast-compact+.experience-editorial{padding-top:42px}} /* Real portfolio collections */ .portfolio-real{padding-inline:clamp(18px,2vw,38px)}.portfolio-real>.chapter-head,.portfolio-real>.case-study{width:min(100%,2200px);margin-inline:auto}.case-head span{font-size:11px;letter-spacing:.2em;color:var(--muted)}.case-study{padding:95px 0 120px;border-top:1px solid var(--ink)}.case-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:48px}.case-head h3{font-size:clamp(38px,4.5vw,78px);letter-spacing:-.06em;margin:18px 0 0}.case-head>p{font-size:14px;color:var(--muted);margin:0}.mosaic{display:grid;gap:14px}.phone-mosaic{grid-template-columns:1.15fr 1fr 1fr;grid-template-rows:repeat(2,minmax(260px,36vw))}.tile{margin:0;overflow:hidden;background:#e7e7e2}.tile img,.square-gallery img,.appliance-grid img,.apparel-grid img{width:100%;height:100%;object-fit:cover;transition:transform .65s ease}.tile:hover img,.square-gallery img:hover,.appliance-grid img:hover,.apparel-grid img:hover{transform:scale(1.025)}.square-gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.square-gallery img{aspect-ratio:1/1;object-fit:cover}.detail-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}.detail-two{grid-template-columns:repeat(2,1fr)}.detail-one{grid-template-columns:1fr}.appliance-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:14px}.appliance-main{margin:0;min-height:900px}.appliance-grid>div{display:grid;grid-template-columns:1fr 1fr;gap:14px}.appliance-grid img{object-fit:cover;min-height:0}.apparel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.apparel-grid img{aspect-ratio:2/3;object-fit:cover} @media(max-width:1000px){.square-gallery{grid-template-columns:repeat(3,1fr)}.square-gallery img:nth-child(n+4),.square-gallery picture:nth-child(n+4) img{display:none}.square-gallery picture:nth-child(n+4) img,.square-gallery picture:nth-child(n+4) img{display:none}.phone-mosaic{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,65vw)}.phone-mosaic .tile:last-child{grid-column:1/-1}.appliance-grid{grid-template-columns:1fr}.appliance-main{min-height:750px}.detail-row{grid-template-columns:1fr 1fr}.apparel-grid{grid-template-columns:1fr 1fr}} @media(max-width:800px){.portfolio-real{padding:78px 20px}.case-study{padding:65px 0 80px}.case-head{display:block;margin-bottom:32px}.case-head h3{font-size:12vw}.case-head>p{margin-top:15px;font-size:12px}.phone-mosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:none;gap:8px}.phone-mosaic .tile,.phone-mosaic .tile:last-child{grid-column:auto;grid-row:auto;aspect-ratio:3/4}.phone-mosaic .tile:first-child{grid-column:1/-1;aspect-ratio:4/5}.square-gallery{grid-template-columns:1fr 1fr;gap:8px}.square-gallery img:nth-child(3),.square-gallery picture:nth-child(3) img{display:block}.square-gallery picture:nth-child(3) img,.square-gallery picture:nth-child(3) img{display:block}.detail-row,.detail-two,.detail-one{grid-template-columns:1fr;gap:9px;margin-top:9px}.appliance-main{min-height:0;aspect-ratio:3/4}.appliance-grid>div{gap:8px}.appliance-grid{gap:8px}.apparel-grid{gap:8px}} /* Portfolio image integrity + scrollable phone previews */ .phone-mosaic{display:flex;grid-template-columns:none;grid-template-rows:none;gap:16px;overflow-x:auto;padding:0 0 18px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--orange) #ddd}.phone-mosaic .tile,.phone-mosaic .tile:last-child{flex:0 0 clamp(280px,29vw,540px);aspect-ratio:3/4;grid-column:auto;grid-row:auto;scroll-snap-align:start;border-radius:4px} .phone-mosaic .tile img{width:100%;height:100%;object-fit:contain;background:#f7f7f4} .appliance-grid{display:flex;gap:16px;overflow-x:auto;padding-bottom:18px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--orange) #ddd} .appliance-grid>div{display:contents}.appliance-main,.appliance-grid>div>img{flex:0 0 clamp(280px,29vw,540px);width:auto;min-height:0;aspect-ratio:3/4;object-fit:contain;background:#f7f7f4;scroll-snap-align:start}.appliance-main,.appliance-grid>div>picture>img{flex:0 0 clamp(280px,29vw,540px);width:auto;min-height:0;aspect-ratio:3/4;object-fit:contain;background:#f7f7f4;scroll-snap-align:start}.appliance-main{margin:0}.appliance-main img{width:100%;height:100%;object-fit:contain} .detail-hint{margin:58px 0 20px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.12em;color:var(--muted)}.detail-hint-first{margin-top:0} .detail-row,.detail-two,.detail-one{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,42px);margin-top:0;align-items:start}.detail-two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1050px;margin-inline:auto}.detail-one{grid-template-columns:1fr;max-width:520px;margin-inline:auto} .detail-device{width:min(100%,440px);margin-inline:auto;padding:15px 9px 9px;background:#101113;border:1px solid #2c2d30;border-radius:48px;box-shadow:0 28px 65px rgba(0,0,0,.18),inset 0 0 0 2px #050505} .device-speaker{width:82px;height:5px;margin:0 auto 12px;border-radius:99px;background:#3a3b3e} .device-screen{height:clamp(560px,62vw,820px);overflow-y:auto;overscroll-behavior:contain;border-radius:30px;background:#fff;scrollbar-width:thin;scrollbar-color:var(--orange) #e7e7e7;-webkit-overflow-scrolling:touch}.device-screen:focus{outline:2px solid var(--orange);outline-offset:3px}.device-screen img{display:block;width:100%;height:auto;min-height:0;object-fit:contain} .device-link{display:block;padding:14px 8px 7px;color:#fff;text-align:center;font-size:12px;letter-spacing:.04em}.device-link:hover{color:#ff7a48} @media(max-width:1000px){.detail-row,.detail-two{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-row .detail-device:last-child{grid-column:1/-1}.detail-one .detail-device:last-child{grid-column:auto}.device-screen{height:720px}} @media(max-width:800px){.phone-mosaic{display:flex;gap:10px;margin-inline:-20px;padding-inline:20px}.phone-mosaic .tile,.phone-mosaic .tile:first-child,.phone-mosaic .tile:last-child{flex-basis:78vw;aspect-ratio:3/4}.appliance-grid{display:flex;margin-inline:-20px;padding-inline:20px;gap:10px}.appliance-main,.appliance-grid>div>img{flex-basis:78vw}.appliance-main,.appliance-grid>div>picture>img{flex-basis:78vw}.detail-hint{margin-top:42px;line-height:1.6}.detail-hint-first{margin-top:0}.detail-row,.detail-two,.detail-one{grid-template-columns:1fr;gap:32px}.detail-row .detail-device:last-child{grid-column:auto}.detail-device{width:min(100%,410px);border-radius:40px;padding:13px 8px 8px}.device-screen{height:68vh;min-height:520px;max-height:720px;border-radius:25px}.device-link{font-size:12px;padding-top:13px}} /* iPhone 17 Pro Max portfolio stage */ .detail-hint{display:flex;align-items:center;gap:12px;margin-bottom:24px;font-size:13px;letter-spacing:.08em}.detail-hint:before{content:"iPhone 17 Pro Max";display:inline-flex;align-items:center;min-height:29px;padding:0 12px;border:1px solid var(--ink);border-radius:99px;color:var(--ink);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .detail-row,.detail-two,.detail-one{display:flex;grid-template-columns:none;justify-content:center;align-items:flex-start;gap:clamp(30px,3.5vw,70px);max-width:none;padding:clamp(38px,4vw,72px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:clamp(38px,4vw,72px);background:linear-gradient(135deg,#e8e6e0 0%,#f7f5f0 50%,#dfddd7 100%);border-radius:32px;scrollbar-width:thin;scrollbar-color:var(--orange) transparent} .detail-device{position:relative;flex:0 0 clamp(320px,23vw,430px);width:auto;margin:0;padding:8px 8px 52px;border:0;border-radius:58px;background:linear-gradient(120deg,#696a6d 0%,#18191b 18%,#444548 48%,#0c0d0f 82%,#77787b 100%);box-shadow:0 38px 65px rgba(0,0,0,.22),0 8px 18px rgba(0,0,0,.16),inset 0 0 0 1px rgba(255,255,255,.35);scroll-snap-align:center} .detail-device:before,.detail-device:after{content:"";position:absolute;z-index:3;left:-4px;width:4px;background:#333438;border-radius:3px 0 0 3px}.detail-device:before{top:155px;height:72px;box-shadow:0 88px 0 #333438}.detail-device:after{top:86px;height:38px}.device-speaker{position:absolute;z-index:4;top:20px;left:50%;width:104px;height:29px;margin:0;transform:translateX(-50%);border:1px solid #252629;border-radius:99px;background:#050506;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}.device-speaker:after{content:"";position:absolute;right:10px;top:50%;width:7px;height:7px;transform:translateY(-50%);border-radius:50%;background:#101b25;box-shadow:inset 0 0 2px #497094} .device-screen{height:clamp(620px,52vw,850px);border-radius:50px 50px 40px 40px;background:#fff}.device-screen:after{content:"";position:sticky;display:block;bottom:7px;width:105px;height:4px;margin:-12px auto 8px;border-radius:99px;background:rgba(20,20,20,.42);pointer-events:none}.device-link{position:absolute;left:18px;right:18px;bottom:14px;padding:7px 4px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px} .detail-two .detail-device{flex-basis:clamp(350px,27vw,460px)}.detail-one .detail-device{flex-basis:clamp(370px,30vw,500px)} @media(max-width:1180px){.detail-row{justify-content:flex-start}.detail-two,.detail-one{justify-content:center}.detail-device{flex-basis:390px}.device-screen{height:760px}} @media(max-width:800px){.detail-hint{display:block;font-size:12px}.detail-hint:before{display:flex;width:max-content;margin-bottom:12px}.detail-row,.detail-two,.detail-one{justify-content:flex-start;gap:18px;margin-inline:-20px;padding:28px 20px 34px;border-radius:0;scroll-padding-inline:20px}.detail-device,.detail-two .detail-device,.detail-one .detail-device{flex-basis:min(84vw,410px);padding:7px 7px 48px;border-radius:51px}.device-screen{height:70vh;min-height:560px;max-height:760px;border-radius:44px 44px 35px 35px}.device-speaker{top:18px;width:96px;height:27px}.detail-device:before{top:140px;height:64px;box-shadow:0 78px 0 #333438}.detail-device:after{top:78px;height:34px}.device-link{bottom:12px}} /* Clean device edges: hidden scrollbars and labels outside the handset */ .detail-row,.detail-two,.detail-one{padding-bottom:clamp(82px,6vw,105px)} .detail-device{padding:8px;margin-bottom:0;border-radius:58px} .device-screen{scrollbar-width:none;-ms-overflow-style:none;border-radius:50px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)} .device-screen::-webkit-scrollbar{display:none;width:0;height:0} .device-screen:after{display:none} .device-link{left:0;right:0;bottom:-49px;padding:10px 8px;color:var(--ink);font-size:12px;font-weight:600;letter-spacing:.02em;text-align:center}.device-link:hover{color:var(--orange)} .device-link:before{content:"";position:absolute;left:50%;top:-18px;width:94px;height:4px;transform:translateX(-50%);border-radius:99px;background:rgba(255,255,255,.76);box-shadow:0 0 0 1px rgba(0,0,0,.08)} @media(max-width:800px){.detail-row,.detail-two,.detail-one{padding-top:28px;padding-bottom:82px}.detail-device,.detail-two .detail-device,.detail-one .detail-device{padding:7px;border-radius:51px}.device-screen{border-radius:44px}.device-link{bottom:-47px;color:var(--ink)}}/* Hero v4 — one calm canvas{position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:1fr 58px;background:var(--paper)} /* Portfolio edge and sizing corrections */ .detail-device:before,.detail-device:after{display:none} .detail-device{overflow:visible;background:linear-gradient(135deg,#57585b 0%,#111214 22%,#36373a 52%,#0b0c0e 82%,#5f6063 100%);box-shadow:0 32px 58px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.38),inset 0 0 0 1px rgba(255,255,255,.28)} .device-screen{overflow-x:hidden;clip-path:inset(0 round 50px)} .appliance-grid{align-items:flex-start} .appliance-main,.appliance-grid>div>img{flex:0 0 clamp(300px,29vw,540px);width:clamp(300px,29vw,540px);height:auto;min-height:0;aspect-ratio:3/4;align-self:flex-start} .appliance-main,.appliance-grid>div>picture>img{flex:0 0 clamp(300px,29vw,540px);width:clamp(300px,29vw,540px);height:auto;min-height:0;aspect-ratio:3/4;align-self:flex-start} .appliance-main{overflow:hidden;background:transparent} .appliance-main img{width:100%;height:100%;object-fit:cover;object-position:center} @media(max-width:800px){.device-screen{clip-path:inset(0 round 44px)}.appliance-main,.appliance-grid>div>img{flex-basis:78vw;width:78vw}.appliance-main,.appliance-grid>div>picture>img{flex-basis:78vw;width:78vw}} /* Hero v5 — minimal identity canvas */ .hero-minimal{min-height:100svh;padding:82px var(--pad) 0;display:grid;grid-template-rows:auto 1fr auto;background:var(--paper);overflow:hidden} .minimal-top{display:flex;justify-content:space-between;align-items:center;padding:28px 0 20px;border-bottom:1px solid var(--line);font-size:10px;font-weight:600;letter-spacing:.17em} .minimal-center{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(65px,9vh,120px) 0;text-align:center} .minimal-center h1{position:relative;margin:0;font-size:clamp(130px,17vw,330px);font-weight:700;line-height:.72;letter-spacing:-.1em;white-space:nowrap} .minimal-center h1 span{color:var(--orange)} .minimal-center p{display:flex;align-items:center;gap:24px;margin:clamp(64px,8vh,100px) 0 0;font-size:clamp(34px,4vw,76px);font-weight:600;line-height:1;letter-spacing:-.055em} .minimal-center p:before,.minimal-center p:after{content:"";display:block;width:clamp(45px,6vw,120px);height:1px;background:var(--ink)} .minimal-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:45px;padding:28px 0 34px;border-top:1px solid var(--ink)} .minimal-bottom>p{margin:0;font-size:clamp(13px,1vw,17px);line-height:1.75;color:#52524e}.minimal-bottom>small{justify-self:end;font-size:8px;letter-spacing:.18em;color:var(--muted)} .minimal-actions{display:flex;gap:10px}.minimal-actions a{min-width:120px;padding:14px 18px;display:flex;justify-content:space-between;gap:20px;border:1px solid var(--ink);border-radius:99px;font-size:12px;transition:.25s}.minimal-actions a:first-child{background:var(--ink);color:#fff}.minimal-actions a:hover{background:var(--orange);border-color:var(--orange);color:#fff;transform:translateY(-2px)} @media(max-width:800px){.hero-minimal{min-height:100svh;padding:64px 20px 0}.minimal-top{padding:22px 0 16px;font-size:8px}.minimal-top span:last-child{max-width:155px;text-align:right;line-height:1.5}.minimal-center{padding:70px 0}.minimal-center h1{font-size:24vw;line-height:.8}.minimal-center p{gap:12px;margin-top:52px;font-size:10vw}.minimal-center p:before,.minimal-center p:after{width:26px}.minimal-bottom{grid-template-columns:1fr;padding:25px 0 28px;gap:24px}.minimal-bottom>p{font-size:13px}.minimal-actions{width:100%}.minimal-actions a{flex:1;min-width:0}.minimal-bottom>small{display:none}} /* Hero v5 refinement */ .hero-minimal{position:relative;isolation:isolate;background:linear-gradient(135deg,#f5f3ee 0%,#f1efe9 58%,#eeeae2 100%)} .hero-minimal:before{content:"";position:absolute;z-index:-1;right:-12vw;top:4vh;width:55vw;height:55vw;border-radius:50%;background:radial-gradient(circle,rgba(241,90,36,.075) 0%,rgba(241,90,36,.025) 34%,transparent 68%);pointer-events:none} .minimal-top,.minimal-center,.minimal-bottom{width:min(100%,2200px);margin-inline:auto} .minimal-top{color:#3f3f3c;border-bottom-color:rgba(17,18,20,.18)}.minimal-top span:first-child{display:flex;align-items:center;gap:10px}.minimal-top span:first-child:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange)} .minimal-center{min-height:0}.minimal-center h1{font-weight:650;text-rendering:geometricPrecision}.minimal-center h1:after{content:"ZHOU LINGZHI";position:absolute;left:50%;top:calc(100% + 20px);transform:translateX(-50%);font-size:9px;font-weight:600;letter-spacing:.42em;color:var(--muted)} .minimal-center p{font-family:"Songti SC",STSong,serif;font-weight:400;letter-spacing:.015em}.minimal-center p:before,.minimal-center p:after{background:rgba(17,18,20,.48)} .minimal-bottom{align-items:center;padding-block:30px 36px}.minimal-bottom>p{padding-left:15px;border-left:2px solid var(--orange);color:#454541}.minimal-actions a{padding:15px 20px;background:rgba(243,241,235,.58);backdrop-filter:blur(10px)}.minimal-actions a:first-child{background:var(--ink)} @media(max-height:820px) and (min-width:801px){.minimal-center{padding:45px 0}.minimal-center h1{font-size:clamp(118px,14vw,230px)}.minimal-center p{margin-top:58px;font-size:clamp(32px,3.5vw,60px)}.minimal-bottom{padding-block:22px 26px}} @media(max-width:800px){.hero-minimal:before{right:-35vw;top:18vh;width:110vw;height:110vw}.minimal-center h1{font-weight:650}.minimal-center h1:after{top:calc(100% + 13px);font-size:7px;letter-spacing:.28em}.minimal-center p{margin-top:58px;line-height:1.15}.minimal-bottom{padding-block:24px 28px}.minimal-bottom>p{padding-left:13px}.minimal-actions a{padding:14px 16px}} /* Cleaner hero signature */ .minimal-center h1:after{display:none} .minimal-center p{margin-top:clamp(54px,7vh,86px)} @media(max-width:800px){.minimal-center p{margin-top:50px}} /* Expanded creative toolset */ .tools-stage{padding-top:80px}.tool-marquee{max-width:1800px;margin:45px auto 50px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.04em .16em;white-space:normal;font-size:clamp(58px,7vw,125px);line-height:1.05;letter-spacing:-.065em}.tool-marquee span{white-space:nowrap}.tool-marquee i{padding:0;color:var(--orange)} .resume-skills .software-line{flex-wrap:wrap;justify-content:flex-end}.resume-skills .software-line b{width:auto;min-width:58px;padding:0 14px;border-radius:99px;white-space:nowrap} @media(max-width:1000px){.resume-skills .software-line{justify-content:flex-start}} @media(max-width:800px){.tools-stage{padding-top:55px}.tool-marquee{margin:36px auto 42px;gap:.12em .2em;font-size:clamp(42px,13vw,72px)}.resume-skills .software-line{gap:7px}.resume-skills .software-line b{min-width:50px;width:auto;height:46px;padding:0 12px;font-size:10px}} /* Compact tools panel + simplified closing */ .tools.dark-section{padding-top:62px;padding-bottom:62px}.tools .tools-stage{padding:25px 0 0}.tools .tool-marquee{max-width:1450px;margin:28px auto 34px;font-size:clamp(42px,5vw,88px);gap:.02em .14em;line-height:1}.tools .tools-stage small{font-size:12px} .contact-thanks{min-height:78vh;padding-top:95px}.contact-thanks .contact-copy{margin:auto 0;text-align:center}.contact-thanks .contact-copy>p{font-size:10px;letter-spacing:.22em}.contact-thanks .contact-copy h2{margin:42px 0 65px;font-size:clamp(70px,11vw,180px);line-height:.78;letter-spacing:-.075em}.contact-thanks .contact-copy h2 span{color:var(--orange);font-family:"Songti SC",STSong,serif;font-style:italic;font-weight:400}.contact-thanks .contact-details{margin-top:auto} @media(max-width:800px){.tools.dark-section{padding-top:52px;padding-bottom:52px}.tools .tools-stage{padding-top:20px}.tools .tool-marquee{margin:30px auto 34px;font-size:clamp(36px,11vw,58px);gap:.1em .18em;line-height:1.05}.contact-thanks{min-height:72svh;padding-top:76px}.contact-thanks .contact-copy h2{font-size:17vw;line-height:.86;margin:38px 0 58px}.contact-thanks .contact-details{margin-top:0}} /* Simplified portfolio introduction */ .portfolio-real .chapter-work{margin-bottom:0} /* Direct transition from portfolio title to first case */ .portfolio-real .chapter-work{margin-bottom:clamp(75px,8vw,130px)} @media(max-width:800px){.portfolio-real .chapter-work{margin-bottom:64px}} /* The chapter rule already separates the portfolio section */ .portfolio-real>.case-study:first-of-type{border-top:0;padding-top:0} /* Primary hero actions below the role */ .minimal-center .minimal-actions{margin-top:38px}.minimal-bottom{grid-template-columns:1fr 1fr}.minimal-bottom>small{grid-column:2;justify-self:end} @media(max-width:800px){.minimal-center .minimal-actions{width:auto;margin-top:32px}.minimal-center .minimal-actions a{min-width:128px}.minimal-bottom{grid-template-columns:1fr auto}.minimal-bottom>small{display:none}} /* Final mobile layout pass */ @media(max-width:700px){ :root{--pad:18px} .site-header{height:60px;padding-inline:18px}.wordmark{font-size:24px}.site-header nav{gap:9px}.site-header nav>a{font-size:10px}.nav-contact{padding:8px 10px} .hero-minimal{min-height:100svh;padding:60px 18px 0}.minimal-top{padding:18px 0 14px;font-size:7px;letter-spacing:.12em}.minimal-top span:last-child{max-width:145px}.minimal-center{padding:52px 0 46px}.minimal-center h1{font-size:23vw;line-height:.84}.minimal-center p{margin-top:42px;font-size:9.2vw;gap:10px}.minimal-center p:before,.minimal-center p:after{width:20px}.minimal-center .minimal-actions{margin-top:28px;gap:8px}.minimal-center .minimal-actions a{min-width:118px;padding:12px 14px;font-size:11px}.minimal-bottom{padding:19px 0 22px}.minimal-bottom>p{padding-left:11px;font-size:12px;line-height:1.65} .resume-editorial{padding:62px 18px}.resume-editorial>.chapter-head{margin-bottom:28px}.chapter-head{grid-template-columns:1fr auto;padding-bottom:14px}.chapter-head span{margin-bottom:18px}.chapter-head h2{font-size:44px}.editorial-sheet{padding:28px 20px}.resume-mast-compact{gap:28px;padding:4px 0 34px}.resume-mast-compact .mast-summary h3{font-size:10vw}.resume-mast-compact .mast-summary strong{font-size:20px}.resume-mast-compact .mast-summary>p{font-size:12px}.mast-contact a{font-size:14px}.experience-title h3{font-size:12vw}.resume-editorial .experience-editorial article{grid-template-columns:36px 1fr;gap:15px;padding:28px 0}.exp-index{width:34px;height:34px}.resume-editorial .experience-editorial time{font-size:12px}.resume-editorial .exp-company h4{font-size:20px}.resume-editorial .exp-company p{font-size:13px}.resume-editorial .exp-summary li{font-size:14px;line-height:1.75}.resume-skills{gap:25px}.resume-editorial .resume-skills h3{font-size:25px} .portfolio-real{padding:68px 18px}.portfolio-real .chapter-work{margin-bottom:58px}.portfolio-real .chapter-head h2{font-size:48px}.case-study{padding:58px 0 72px}.case-head{margin-bottom:28px}.case-head h3{font-size:10.5vw;line-height:1.15;margin-top:14px}.case-head>p{margin-top:12px}.phone-mosaic,.appliance-grid,.square-gallery,.apparel-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin-inline:-18px;padding:0 18px 14px;scrollbar-width:none}.phone-mosaic::-webkit-scrollbar,.appliance-grid::-webkit-scrollbar,.square-gallery::-webkit-scrollbar,.apparel-grid::-webkit-scrollbar{display:none}.phone-mosaic .tile,.phone-mosaic .tile-tall,.phone-mosaic .tile:first-child,.phone-mosaic .tile:last-child,.square-gallery img,.apparel-grid img{display:block!important;flex:0 0 78vw;width:78vw;aspect-ratio:3/4;scroll-snap-align:center;object-fit:cover}.square-gallery img{aspect-ratio:1/1}.apparel-grid img{aspect-ratio:2/3}.appliance-main,.appliance-grid>div>img,.appliance-grid>div>picture>img{flex:0 0 78vw;width:78vw}.appliance-main,.appliance-grid>div>picture>img,.appliance-grid>div>picture>img{flex:0 0 78vw;width:78vw} .detail-hint{margin-top:38px;padding-top:16px;font-size:11px;letter-spacing:.05em}.detail-hint:before{min-height:26px;padding-inline:10px;font-size:9px}.detail-row,.detail-two,.detail-one{gap:16px;margin-inline:-18px;padding:24px 18px 76px;scroll-padding-inline:18px}.detail-device,.detail-two .detail-device,.detail-one .detail-device{flex-basis:84vw;border-radius:46px}.device-screen{height:66vh;min-height:510px;max-height:690px;border-radius:39px;clip-path:inset(0 round 39px)}.device-speaker{top:15px;width:88px;height:25px}.device-link{font-size:11px} .tools.dark-section{padding:48px 18px}.tools .tools-stage{padding-top:18px}.tools .tool-marquee{font-size:10vw;gap:.12em .18em;margin:28px auto 30px}.tools .tools-stage small{font-size:11px;line-height:1.7} .contact-thanks{min-height:68svh;padding:68px 18px 34px}.contact-thanks .contact-copy h2{font-size:16vw;line-height:.9;margin:32px 0 48px}.contact-thanks .contact-details{gap:12px;padding-top:24px;font-size:10px;overflow-wrap:anywhere} body>footer{padding:19px 18px;font-size:8px} } @media(max-width:390px){.site-header nav{gap:7px}.nav-contact{padding-inline:8px}.minimal-center .minimal-actions{width:100%}.minimal-center .minimal-actions a{min-width:0;flex:1}.resume-editorial .exp-summary li{font-size:13px}.case-head h3{font-size:10vw}.device-screen{min-height:480px}} /* ---- print / 存 PDF：内容不再依赖 JS；只印简历 + 案例缩略图（长图不上纸） ---- */ @media print{ html.js .reveal,.reveal{opacity:1!important;transform:none!important;transition:none!important} .cursor-glow,.site-header,body>footer{display:none!important} .dark-section{background:#fff!important;color:#111214!important} .tool-marquee{font-size:22px!important;color:#111214!important} .tools-stage small{color:#444!important} *{box-shadow:none!important;backdrop-filter:none!important;text-shadow:none!important} .hero-minimal,.contact-thanks{min-height:auto!important} .hero-minimal{padding-top:0!important;background:#fff!important} .minimal-center{padding:20px 0!important} .minimal-center h1{font-size:88px!important} .minimal-center p{font-size:22px!important} .resume-editorial,.portfolio-real,.dark-section{padding:16px 0!important} .editorial-sheet{border:1px solid #ddd!important;padding:16px!important} article,.case-study{break-inside:avoid} .case-study{padding:14px 0!important} /* 长图详情不在纸上印（几十页且巨大），只保留案例主图缩略图 */ .detail-row,.detail-hint,.device-screen,.detail-device{display:none!important} .phone-mosaic,.square-gallery,.appliance-grid,.apparel-grid{display:flex!important;flex-wrap:wrap!important;overflow:visible!important;gap:8px!important} .phone-mosaic .tile,.square-gallery img,.apparel-grid img,.appliance-grid img, .phone-mosaic picture,.square-gallery picture,.apparel-grid picture,.appliance-grid picture{ flex:0 0 22%!important;width:22%!important;max-width:22%!important;aspect-ratio:auto!important;margin:0!important} .phone-mosaic .tile img,.appliance-main img{height:auto!important;max-height:180px!important;object-fit:contain!important} .mosaic{gap:8px!important} a{color:inherit!important;text-decoration:none!important} a[href^="tel"],a[href^="mailto"]{display:inline-block;margin-right:12px} } /* ---- 大图浏览：把手机壳里的长图分段放进全屏查看器（复用已缓存的图片） ---- */ .viewer{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:rgba(12,12,14,.95); backdrop-filter:blur(8px)} .viewer[hidden]{display:none} .viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 18px; border-bottom:1px solid rgba(243,241,235,.16);color:var(--paper);font-size:11.5px;letter-spacing:.12em} .viewer-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .viewer-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto} .viewer-raw,.viewer-close{font:inherit;letter-spacing:.1em;color:var(--paper);background:none; border:1px solid rgba(243,241,235,.4);border-radius:99px;padding:8px 13px;cursor:pointer;transition:.2s} .viewer-raw:hover,.viewer-close:hover{background:var(--orange);border-color:var(--orange)} .viewer-stage{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:16px 0 40px} .viewer-stage img{display:block;width:min(100%,790px);height:auto;margin:0 auto;background:#fff} .viewer-stage picture{display:contents} body.viewer-open{overflow:hidden} /* 工具分组 */ /* 两行共用同一套列轨道，圆点才真正左对齐；.software-group 用 display:contents 让 label 与圆点行分别落进第 1/2 列（这里没有 之类的替换元素，不存在之前的坑） */ .software-rows{display:grid;grid-template-columns:auto auto;gap:12px 14px;justify-content:end;align-items:center} .software-group{display:contents} .software-line{justify-content:flex-start} .sw-label{font-size:10px;letter-spacing:.16em;color:var(--muted);white-space:nowrap;width:52px;text-align:right} .pdf-link{font-size:13px;border-bottom:1px solid #aaa;padding-bottom:3px} .contact-details .pdf-link{font-size:12px} @media(max-width:800px){ .software-rows{justify-content:start;gap:10px 10px} .sw-label{width:46px;font-size:9.5px} .mast-contact .pdf-link{font-size:14px} } @media print{.viewer{display:none!important}} /* ============================ 排版基准层 v4（2026-10-11）============================ 背景：这份 CSS 里同一个选择器被前后几代样式声明了 2–5 次不同 font-size （.chapter-head h2 有 clamp(…105px)/48/43/44 四份，.exp-summary li 有 12/14/13/17/15 五份）， 桌面实测出现 19 档字号 —— 是漂移不是设计。这里收敛成 9 档，并把正文左右轴统一到 --pad。 全部集中在这一块，整块删掉即可回退到改动前。 ================================================================================== */ :root{ /* 字阶：台阶比 ≈0.64 的等比序列（244.8 / 158.4 / 100.8 / 64.8）＋正文段（26 / 17 / 14 / 11 / 10） */ --fs-chapter: clamp(48px,7vw,105px); /* 个人简历 · 作品集 */ --fs-title: clamp(38px,4.5vw,78px); /* 工作经历 · 案例标题 · 简历主标 · 姓名下副标 · 工具跑马灯 */ --fs-lead: clamp(22px,1.8vw,36px); /* 公司名 · 能力与工具 */ --fs-body: 17px; /* 经历正文 */ --fs-meta: 14px; /* 元信息：日期/职位/交付物/联系方式/提示 */ --fs-label: 11px; /* 英文小标：PART · EXPERIENCE · CONTACT · 导航 */ --fs-tiny: 10px; /* ® · SCROLL TO EXPLORE · 页脚 · 手机壳标注 */ /* 对齐轴：出血量 = 图片/纸卡比正文轴多出来的宽度，--axis 把出血容器里的文字拉回 --pad */ --bleed: clamp(18px,2vw,38px); --axis: calc(var(--pad) - var(--bleed)); } /* 1 ▸ 章节大标题（原桌面 100.8 / 移动 44 与 48 两套） */ .chapter-head h2, .resume-editorial > .chapter-head h2, .portfolio-real .chapter-head h2{font-size:var(--fs-chapter)} /* 2 ▸ 二级标题（原 72 / 64.8 / 57.6 三种混用） */ .experience-title h3, .resume-editorial .experience-title h3, .case-head h3, .portfolio-real .case-head h3, .resume-mast-compact .mast-summary h3, .resume-editorial .mast-summary h3, .minimal-center p, .tools .tool-marquee{font-size:var(--fs-title)} /* 3 ▸ 三级（原 26 与 30） */ .resume-editorial .exp-company h4, .experience-editorial .exp-company h4, .resume-editorial .resume-skills h3{font-size:var(--fs-lead)} /* 4 ▸ 正文（桌面 17 / 移动原 13） */ .resume-editorial .exp-summary li, .experience-editorial .exp-summary li{font-size:var(--fs-body)} /* 5 ▸ 元信息（原 16 / 15 / 14.4 / 14 / 13 / 12 混用） */ .resume-editorial .exp-company p, .resume-editorial .experience-title p, .resume-editorial .exp-summary > p, .resume-editorial .skill-cloud span, .resume-editorial .experience-editorial time, .experience-editorial time, .mast-contact a, .mast-contact p, .mast-contact .pdf-link, .mast-summary > p, .case-head > p, .tools-stage > p, .resume-mast-compact .mast-summary > p, .detail-hint, .tools .tools-stage small, .contact-details, .contact-details .pdf-link, .minimal-bottom > p, .device-link, .minimal-center .minimal-actions a{font-size:var(--fs-meta)} /* 5b ▸ 工具区说明的容器宽度：14px 下这句需要 441px，原 430px 会挤出「视觉。」孤字 */ .tools-stage small{max-width:460px} /* 6 ▸ 小标（原 13 / 11 / 10） */ .site-header nav, .site-header nav > a, .section-index, .chapter-head span, .chapter-head p, .case-head span, .exp-index, .mast-contact > span, .resume-editorial .experience-title > span, .resume-skills > div:first-child > span, .resume-editorial .resume-skills > div:first-child > span, .resume-editorial .experience-title > span, .contact-copy p, .resume-editorial .software-line b, .resume-skills .software-line b, .sw-label, .viewer-bar{font-size:var(--fs-label)} /* 7 ▸ 极小字（原 9 / 8 / 手机 7） */ .minimal-top, .minimal-bottom > small, footer, body > footer, .wordmark span, .minimal-center h1:after, .detail-hint:before{font-size:var(--fs-tiny)} /* ── 对齐轴：区块保留下出血量，文字容器补到 --pad 轴（桌面左 72 / 右 1368） ── */ .resume-editorial, .portfolio-real{padding-inline:var(--bleed)} .resume-editorial > .chapter-head, .portfolio-real > .chapter-head, .case-head, .detail-hint, .editorial-sheet{padding-inline:var(--axis)} /* 打印：只中和本层新增的内边距，打印字号沿用原有打印样式 */ @media print{ .resume-editorial, .portfolio-real{padding-inline:0!important} .resume-editorial > .chapter-head, .portfolio-real > .chapter-head, .case-head, .detail-hint, .editorial-sheet{padding-inline:0!important} } @media(max-width:800px){ /* 移动端：正文/元信息下限抬升；纸卡出血到屏幕两边，文字自己承担 --pad 边距 */ :root{--fs-body:14px;--fs-meta:13px;--fs-lead:22px} .resume-editorial{padding-inline:0} .editorial-sheet, .resume-editorial > .chapter-head{padding-inline:var(--pad)} .portfolio-real{padding-inline:var(--bleed)} .portfolio-real > .chapter-head, .case-head, .detail-hint{padding-inline:0} .contact-thanks .contact-details{font-size:var(--fs-meta)} /* 平板上标题原本是 10vw（800px 时 80px，比桌面 64.8 还大），统一走 --fs-title */ .case-head h3, .portfolio-real .case-head h3, .experience-title h3, .resume-editorial .experience-title h3{font-size:var(--fs-title)} } /* ============================ 首屏精修层 v6（2026-10-11）============================ 只动首屏和页头那颗「联系我」，不碰文案、不碰其他区块。整块删掉即可回退。 1 ▸ 光学配平：h1 行高 0.72 让字盒比汉字墨迹大 56.5px，实测名字上留白 127 / 按钮下留白 147； 把中段整体下移 10px（= 偏差的一半）让两侧视觉留白相等（≈137 / 137，改后实测 140 / 140）。 2 ▸ 控件收敛（不是换形制）：两个胶囊高度 52 → 44、标签↔箭头 20 → 14px、箭头缩到 11px、 字距 .02em；次级按钮去掉半透明底（原来底填充＋描边是两条边），描边降到 30% 墨色； 页头「联系我」同步降描边。形制（胶囊/直角/文字链）留给你定。 3 ▸ 底部两行分层：第一行给墨色与 500 字重，第二行退成说明。 4 ▸ 灰阶：眉标 63,63,60 与正文 69,69,65 收成同一级。 =============================================================================== */ :root{--ink:#111214;--ink-2:#454541} .minimal-center{transform:translateY(10px)} .minimal-top{color:var(--ink-2)} .minimal-actions a{ min-height:44px;padding:12px 20px;gap:14px; align-items:center;font-size:var(--fs-meta);letter-spacing:.02em; } .minimal-actions a>span{font-size:var(--fs-label);line-height:1} .minimal-actions a:nth-child(2){background:transparent;border-color:rgba(17,18,20,.3)} .site-header nav>a:last-child{padding:10px 15px;border-color:rgba(17,18,20,.3)} .minimal-bottom>p::first-line{color:var(--ink);font-weight:500} @media(max-width:800px){ /* 移动端实测名字上留白 203 / 按钮下留白 198，本来就平（差 2.5px），撤销桌面那 10px 位移； 再把两个按钮里的字与箭头收成居中一对（原来是 flex:1 + 两端对齐，标签和箭头隔了 160px） */ .minimal-center{transform:none} .minimal-center .minimal-actions a{justify-content:center;gap:12px} } @media print{.minimal-center{transform:none!important}} /* ==================== 手机样机形状 + 首图优先级（2026-10-12）==================== 形变根因：样机的宽由 84vw 决定、高由 66vh + min-height(510/480px) 夹， 两者互相打架 —— 实测屏幕长宽比在 320~430px 手机上漂移 0.531 ~ 0.627（真机 9:19.5 = 0.462）， 短屏手机（375×667）最明显。这里把屏幕比例钉死成真机比例，宽度从高度算出来。 =============================================================================== */ @media(max-width:800px){ .detail-one .detail-device, .detail-two .detail-device, .detail-row .detail-device{ flex:0 0 auto; width:min(84vw, calc(74vh * 0.4615 + 14px)); } .device-screen{ height:auto; width:auto; aspect-ratio:9/19.5; min-height:0; max-height:none; } } /* ---- 三屏显示级字号：−20~25%（首屏 / 工具与方法 / 结尾）---- */ :root{ --fs-name: clamp(118px, 13.2vw, 250px); /* 首屏姓名：17vw 244.8 → 190 */ --fs-hero-sub: clamp(32px, 3.6vw, 56px); /* 首屏副标：4.5vw 64.8 → 52 */ --fs-marquee: clamp(32px, 3.5vw, 56px); /* 工具与方法大列表：4.5vw 64.8 → 50.4 */ --fs-thanks: clamp(72px, 7.8vw, 130px); /* THANK YOU：11vw 158.4 → 112.3 */ } .minimal-center h1{font-size:var(--fs-name)} .minimal-center p{font-size:var(--fs-hero-sub)} .tools .tool-marquee{font-size:var(--fs-marquee)} .contact-thanks .contact-copy h2{font-size:var(--fs-thanks)} /* 结尾两行原来 letter-spacing:-.075em：像素级实测「THANK YOU」8 个字母只分成 5 个墨迹簇 （字母粘连）。负字距是比例量，缩小字号并不会让墨迹分开，所以这里给正字距 +.02em。 */ /* 逐字像素实测后定的值：行1 +.04em、行2（宋斜体）+.08em。 更大的值（+.06/+.12）在 390 手机上会把衬线行挤成两行（实测过）。 */ .contact-thanks .contact-copy h2{letter-spacing:.04em} .contact-thanks .contact-copy h2 span{letter-spacing:.08em} /* ≤345px 的窄屏：+.08em 会让衬线行溢出换行（实测 320px 会变两行），收到 +.05em */ @media(max-width:345px){ .contact-thanks .contact-copy h2 span{letter-spacing:.05em} } @media(max-width:800px){ :root{ --fs-name: 18.5vw; /* 89.7 → 72.2 */ --fs-hero-sub: 8vw; /* 38 → 31.2 */ --fs-marquee: 7.7vw; /* 38 → 30 */ --fs-thanks: 10vw; /* 62.4 → 39（放松字距后要缩小才不换行）*/ } } /* ============================ 音频案例层（2026-10-13）：TWS 耳机 4 张 3:4 主图一排铺满，窄屏转横滑 ============================ */ .case-audio .audio-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .case-audio .audio-gallery .tile{margin:0;overflow:hidden;background:#f7f7f4} .case-audio .audio-gallery img{display:block;width:100%;height:100%;aspect-ratio:3/4;object-fit:contain;transition:transform .65s ease} .case-audio .audio-gallery .tile:hover img{transform:scale(1.025)} @media(max-width:1000px){.case-audio .audio-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:800px){ .case-audio .audio-gallery{display:flex;gap:10px;overflow-x:auto;margin-inline:-20px;padding:0 20px 14px;scroll-snap-type:x mandatory;scrollbar-width:none} .case-audio .audio-gallery::-webkit-scrollbar{display:none} .case-audio .audio-gallery .tile{flex:0 0 78vw;scroll-snap-align:center} }