/* Hand-printed labels, clear biography hierarchy, and coordinated controls. */
:root{--label-art:url('./assets/neon/ink-label.webp')}
.section-shell .section-label{display:inline-flex;align-items:center;gap:18px;min-height:59px;width:max-content;max-width:100%;padding:12px 28px 12px 24px;margin:0 0 28px;background:var(--label-art) center/100% 100% no-repeat;font:600 16px/1.5 BodyCN,sans-serif;letter-spacing:1.4px;color:#e9fffc;transform:rotate(-1.5deg)}
.section-label .section-number{font:italic 27px/1 'Courier New',monospace;letter-spacing:-1px;color:var(--cyan);border-right:1px solid #39dbe76b;padding-right:16px}
.section-label-text{white-space:nowrap}
.about h2{margin:0 0 34px;isolation:auto}
.about h2:before{content:none}
.about h2 img{max-height:174px;max-width:580px;object-position:left center}
.about-main{min-width:0;position:relative;z-index:1}
.about-details{position:relative;padding:5px 0 10px 28px;border-left:3px solid var(--cyan)}
.about-role{display:flex;align-items:center;gap:30px;margin:0 0 28px;line-height:1.2}
.about-role .about-name{font:400 clamp(46px,4.8vw,68px)/1.1 TitleCN,sans-serif;color:var(--pink);margin:0;display:block;flex:none}
.about-role .about-position{font:600 clamp(18px,1.7vw,23px)/1.6 BodyCN,sans-serif;color:#f1f8f5;margin:0;display:block;letter-spacing:.4px}
.about-bio p{font-size:clamp(19px,1.55vw,23px);line-height:1.9;color:#e4efed;max-width:38em}
.about-bio strong{color:#f7fbf7;font-weight:700;text-decoration:underline;text-decoration-color:#33dded88;text-decoration-thickness:2px;text-underline-offset:6px}
.about-bio p+p{margin-top:25px;font-size:19px;color:#b6c9cc;line-height:1.95}
.profile-art{margin-top:160px}
.about .headphone-line{display:none}
.about .profile-label{font-size:14px;line-height:1.8;color:#b7d7d8;margin-top:22px}
.profile-star{top:-32px;right:0;max-width:70px;pointer-events:none}
.about .profile-facts{margin-top:30px;padding-top:25px}
.about-practice{gap:40px}
.about-practice h3{font-size:28px}
.about-practice p{font-size:17px}

.filters,.case-tabs,.layout-modes,.clip-tabs{gap:12px;align-items:center}
.filters button,.case-tabs button,.layout-modes button,.clip-tabs button,.reference-tabs button{position:relative;isolation:isolate;border:1px solid #3f727c;border-radius:0;padding:11px 22px;min-height:48px;font:500 16px/1.5 BodyCN,sans-serif;color:#afc8cb;background:#092029;transition:color .2s,transform .25s,border-color .25s,background .25s}
.filters button::after,.case-tabs button::after,.layout-modes button::after,.clip-tabs button::after{content:'';position:absolute;right:0;top:0;width:9px;height:9px;border-left:1px solid #3f727c;border-bottom:1px solid #3f727c;background:var(--bg);transition:background .25s}
.filters button:hover,.case-tabs button:hover,.layout-modes button:hover,.clip-tabs button:hover,.reference-tabs button:hover{color:#f1fcf8;border-color:var(--cyan);transform:translateY(-3px)}
.filters button.active,.case-tabs button.active,.layout-modes button.active,.clip-tabs button.active,.reference-tabs button[aria-pressed=true]{background:var(--label-art) center/100% 100% no-repeat;border-color:transparent;color:#f1fffa;transform:rotate(-1.5deg)}
.filters button.active::after,.case-tabs button.active::after,.layout-modes button.active::after,.clip-tabs button.active::after{display:none}
.filters small{font:italic 18px/1 'Courier New',monospace;color:var(--cyan);margin-left:10px}
.case-tabs{border:0;padding-bottom:13px;flex-wrap:wrap}
.layout-modes{gap:10px}
.layout-modes button{width:100%;text-align:left;padding-left:20px}
.process-tabs{gap:14px}
.process-tabs button{border:1px solid #3f727c;background:#092029;padding:19px 23px;margin-bottom:13px;font:500 19px/1.5 BodyCN,sans-serif;color:#b9cdd0;transition:transform .25s,color .25s}
.process-tabs button.active{border-color:transparent;background:var(--label-art) center/100% 100% no-repeat;color:#f4fffc;transform:translateX(7px) rotate(-1deg)}
.process-tabs button:hover{color:var(--cyan)}
.process-tabs button span{font:italic 31px/1 'Courier New',monospace;color:var(--cyan);margin-right:21px}
.process-tabs button i{font-size:24px}
.quick-button,.about-links a,.resume-download,.solid-button,.copy-email,.reference-link{border-radius:0;position:relative;isolation:isolate;border:1px solid #4b7d86;min-height:48px;padding:12px 21px;background:#0a252d;color:#dbf1ee;display:inline-flex;align-items:center;justify-content:space-between;gap:24px;font:500 16px/1.5 BodyCN,sans-serif;transition:transform .25s,background .25s,border-color .25s,color .25s}
.quick-button,.solid-button{background:var(--cyan);color:#071d24;border-color:var(--cyan);box-shadow:5px 5px 0 #2484934a}
.quick-button:hover,.solid-button:hover{background:var(--pink);border-color:var(--pink);color:#0a1a22;transform:translate(-2px,-2px)}
.about-links a:hover,.resume-download:hover,.copy-email:hover,.reference-link:hover{background:#113d46;border-color:var(--cyan);color:#f0fffa;transform:translateY(-3px)}
.about-links{gap:18px}
.quick-button span{font-size:23px;margin:0;line-height:1}
.reference-link span{font-size:23px;line-height:1}
.gallery-nav button,.screen-transport>div button,.card-arrow{border-radius:2px;background:#0d2b33;border:1px solid #43848d;color:var(--cyan);box-shadow:3px 3px 0 #24667544}
.gallery-nav button:hover,.screen-transport>div button:hover,.card-arrow:hover{background:var(--cyan);color:#071d24}
.hero-foot{justify-content:space-between}
.hero-foot>span:nth-child(2){color:var(--cyan)}

@media(max-width:1050px){
 .about-role{gap:22px}.about-role .about-position{font-size:19px}
 .about-details{padding-left:23px}.about-bio p{font-size:20px}.about-bio p+p{font-size:18px}
 .process-tabs button{padding:17px 18px;font-size:17px}.process-tabs button span{margin-right:12px}
 .quick-button{padding:10px 15px;font-size:14px;gap:12px}
}
@media(max-width:740px){
 .section-shell .section-label{min-height:55px;font-size:15px;padding:11px 24px 11px 20px;gap:15px;margin-bottom:25px;letter-spacing:.7px}
 .section-label .section-number{font-size:25px;padding-right:13px}
 .about{gap:32px 8%;padding-top:78px}
 .about-main>.section-label{display:inline-flex;grid-column:1/-1;grid-row:1;justify-self:start;margin-bottom:3px}
 .about .profile-art{grid-row:2}
 .about-main h2{grid-row:2}
 .about .profile-label{font-size:11px;margin-top:17px}
 .about h2{margin:0;align-self:center;min-width:0}
 .about h2 img{max-height:145px;max-width:100%}
 .about .profile-art{margin-top:5px}.profile-star{right:-7px;top:-20px}
 .about .about-details{padding:8px 0 3px 19px;margin-top:16px}
 .about-role{gap:20px;margin-bottom:24px}
 .about-role .about-name{font-size:48px}
 .about-role .about-position{font-size:16px;letter-spacing:0;line-height:1.65;margin:0}
 .about-bio p{font-size:18px;line-height:1.95;max-width:none}
 .about-bio p+p{font-size:17px;line-height:1.9;margin-top:21px}
 .about .profile-facts{margin-top:0;padding-top:23px;gap:18px 30px}
 .about-practice{gap:28px}.about-practice h3{font-size:25px}.about-practice p{font-size:16px}
 .about-links{display:grid;grid-template-columns:1fr;gap:13px}
 .about-links a{width:100%;padding:14px 20px}
 .filters{gap:8px;display:flex;flex-wrap:wrap}.filters button{font-size:14px;padding:10px 12px;min-height:46px}.filters small{font-size:15px;margin-left:5px}
 .layout-modes{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;margin-top:22px;gap:12px}
 .layout-modes button{text-align:center;font-size:15px;padding:11px 16px}
 .sketch-controls .text-button{grid-column:1/-1;grid-row:5;justify-self:start;margin-top:20px;font-size:16px}
 .process-tabs{gap:11px;margin-bottom:26px}
 .process-tabs button{margin:0;padding:14px 11px;font-size:15px;text-align:left;white-space:normal}
 .process-tabs button.active{transform:rotate(-1deg)}
 .process-tabs button span{font-size:24px;margin-right:7px}.process-tabs button i{display:none}
 .case-tabs{gap:8px}.case-tabs button,.clip-tabs button,.reference-tabs button{font-size:15px;padding:10px 15px}
 .site-header .quick-button{font-size:0;width:36px;min-width:36px;min-height:36px;padding:6px;gap:0;justify-content:center;box-shadow:3px 3px 0 #2484934a}
 .site-header .quick-button span{font-size:24px}
 .resume-download,.solid-button,.copy-email,.reference-link{font-size:15px;padding:11px 17px;min-height:46px}
 .hero-foot>span:nth-child(2){display:block;font-size:12px}
}