/* Evan Huang — quiet silver, warm typography and a single smoky-lilac accent. */
:root{
  --chrome-bg:#111216;
  --chrome-surface:#1c1e25;
  --chrome-text:#f2efe8;
  --chrome-muted:#aaa6b1;
  --chrome-line:rgba(242,239,232,.15);
  --chrome-lilac:#c5b6dd;
}
body{background:var(--chrome-bg);color:var(--chrome-text)}
::selection{color:#16141b;background:var(--chrome-lilac)}
button:focus-visible,a:focus-visible{outline-color:var(--chrome-lilac)}
.eyebrow,.tiny-label{color:var(--chrome-muted);letter-spacing:.14em}
.reading-progress{height:2px;background:var(--chrome-lilac)}
.brand-symbol{color:var(--chrome-text);background:#ffffff04;border-color:var(--chrome-line)}
.brand-dot{background:var(--chrome-lilac);box-shadow:none}
.desktop-nav{font-size:12px}
.desktop-nav a{color:#d5d1d8}
.desktop-nav a.active,.desktop-nav a:hover{color:var(--chrome-text)}
.desktop-nav a:after{background:var(--chrome-lilac)}
.pill,.pill-white{color:#1c1d22;background:#e6e3dd;border:1px solid #ffffff30;box-shadow:inset 0 1px 0 #ffffff70}
.pill:hover,.pill-white:hover{background:var(--chrome-text);color:#17181d;box-shadow:0 6px 20px #0003,inset 0 1px 0 #fff9}
.pill-outline{color:var(--chrome-text);background:#ffffff03;border-color:#f2efe83b;box-shadow:none}
.pill-outline:hover{color:var(--chrome-text);background:#ffffff09;box-shadow:none}
.round-link,.menu-toggle{color:var(--chrome-text);border-color:#f2efe833;background:#ffffff03}
.round-link:hover{background:#e6e3dd;color:#1c1d22}
.mobile-nav{background:#1c1e25fa;color:var(--chrome-text);border-color:var(--chrome-line)}
.mobile-nav a,.mobile-nav button{border-color:var(--chrome-line)}
.menu-toggle span{background:var(--chrome-text)}

/* A personal name takes the headline; the portrait keeps its existing stage. */
.hero{background:var(--chrome-bg)}
.hero-heading{position:static;padding:132px 4% 0}
.hero-heading>.eyebrow{position:relative;z-index:3;font-size:9px;letter-spacing:.22em;color:#aaa6b1;margin-bottom:18px}
.hero-heading h1{position:relative;z-index:3;font-family:Manrope,'Noto Sans SC',sans-serif;font-weight:600;font-size:clamp(82px,12.6vw,210px);letter-spacing:-.075em;word-spacing:-.08em;line-height:.98;color:var(--chrome-text);text-shadow:none;white-space:nowrap}
.hero-heading h1 span{color:inherit}
.hero-heading h1{display:flex;justify-content:center;gap:.18em;word-spacing:normal}
.hero-identity{position:absolute;left:6.5%;top:43%;z-index:12;max-width:27%;text-align:left}
.hero-identity strong{display:block;font-size:25px;font-weight:600;letter-spacing:.12em;line-height:1.4;color:var(--chrome-text)}
.hero-identity>span{display:block;margin-top:10px;font-size:12px;font-weight:400;line-height:1.85;color:#c3becb;letter-spacing:.01em}
.hero-left{top:57%}
.hero-left>.eyebrow{font-size:8px;letter-spacing:.16em;color:var(--chrome-muted)}
.hero-left>p:nth-child(2){font-size:clamp(17px,1.45vw,21px);font-weight:400;line-height:1.85;color:#d9d5dc;margin-top:12px}
.hero-right{top:50%;right:6.5%;max-width:23%}
.hero-right>.tiny-label{font-size:8px;letter-spacing:.17em;color:var(--chrome-muted)}
.hero-right>p{font-size:15px;font-weight:400;line-height:1.95;color:#d9d5dc;margin:12px 0 0}
.hero-facts{border-color:var(--chrome-line);color:var(--chrome-muted)}
.hero-hint{color:#aaa6b1;font-size:11px;line-height:1.8;margin-top:28px}
.hero-caption{color:#c5c0cc;margin-right:145px;letter-spacing:.08em}
.hero-caption span{color:#aaa6b1;font-size:8px}
.scene-mark{color:#aaa6b1;opacity:.55;letter-spacing:.12em}
.hero .chrome-light-field{opacity:.24;filter:saturate(.42)}
.hero .chrome-light-field:after{background:radial-gradient(ellipse at 50% 56%,#111216ee 0%,#111216ce 32%,#11121645 75%,#11121665 100%),linear-gradient(180deg,#11121666,transparent 42%,#111216 100%)}
.chrome-horizon{opacity:.28;background:radial-gradient(ellipse at 50% 88%,#c5b6dd20,transparent 68%)}
.chrome-orbit{width:clamp(100px,8.4vw,134px);right:4.6%;bottom:67px;opacity:.7}
.chrome-orbit:before{background:#aaa6b114;filter:blur(16px)}
.chrome-orbit>span{color:#aaa6b1;font-size:6px;letter-spacing:.12em}
.chrome-orbit:hover{opacity:1}

/* One neutral surface system lets the covers supply the vivid color. */
.work,.resume{background:#111216}
.about,.contact{background:#15161b}
.work .chrome-dot-field{opacity:.035;filter:grayscale(1);mask-image:linear-gradient(110deg,transparent 18%,#0008 65%,#000 100%)}
.work .chrome-dot-field:after{background:linear-gradient(90deg,#111216c7,#11121675 68%,transparent)}
.about .chrome-dot-field{display:none}
h2{font-weight:600;letter-spacing:-.055em}
.section-heading h2 span{color:var(--chrome-text)}
.section-number{color:#f2efe80c}
.section-intro{color:#aaa6b1;font-size:13px;line-height:1.95}
.filter{color:#c3becb;background:#ffffff02;border-color:#f2efe826;font-size:11px;min-height:39px;padding:9px 14px}
.filter span{font-size:9px;opacity:.75}
.filter:hover{color:var(--chrome-text);background:#ffffff07;border-color:#f2efe84d}
.filter.active{background:var(--chrome-lilac);border-color:var(--chrome-lilac);color:#211c29;box-shadow:none}
.work-deck-help{font-size:11px;line-height:1.7;color:#aaa6b1}
.deck-mode-label{color:#aaa6b1;letter-spacing:.16em}
#work-grid.work-deck .card-open,#work-grid.work-deck .card-open:hover{background:linear-gradient(155deg,#23252d,#1c1e25 70%);border-color:#f2efe82b;box-shadow:0 12px 25px #0006,inset 0 1px 0 #ffffff08}
#work-grid.work-deck .is-selected .card-open{border-color:#c5b6dd94;box-shadow:0 18px 30px #0008,inset 0 1px 0 #ffffff12}
#work-grid.work-deck .card-info h3{color:var(--chrome-text);font-weight:600;letter-spacing:-.015em}
#work-grid.work-deck .card-info p{color:#aaa6b1}
#work-grid.work-deck .card-roles span{border-color:#f2efe821;color:#bbb6c3;background:#ffffff02}
#work-grid.work-deck .card-arrow{color:#c3becb;border-color:#f2efe82b;background:none}
#work-grid.work-deck .card-play,#work-grid.work-deck .card-open:hover .card-play,#work-grid.work-deck .is-selected .card-play{background:#c5b6dd;color:#211c29;border-color:#eee6f55c;box-shadow:0 3px 15px #0005}
#work-grid.work-deck:before{background:linear-gradient(90deg,transparent,#f2efe81c,transparent)}
.deck-controls{max-width:560px;gap:26px;align-items:center;margin-top:6px}
.deck-nav{width:46px;height:46px;color:#d8d2df;background:#ffffff02;border-color:#f2efe830}
.deck-nav:hover{background:#ffffff08;border-color:#c5b6dd8c}
.deck-nav:focus-visible,.deck-dot:focus-visible{outline-color:#c5b6dd}
.deck-reading{max-width:390px;flex:1;min-width:0}
.deck-status{font-size:17px;font-weight:600;color:var(--chrome-text);line-height:1.5;letter-spacing:0;white-space:normal;overflow:visible;text-overflow:clip}
.deck-subtitle{font-size:12px;font-weight:400;line-height:1.7;color:#aaa6b1;margin-top:5px;overflow-wrap:anywhere}
.deck-responsibility{font-size:13px;font-weight:400;line-height:1.75;color:#d6d0df;margin-top:5px;overflow-wrap:anywhere}
.deck-position{font-size:10px;color:#aaa6b1;letter-spacing:.16em;margin-top:9px}
.deck-dot:before{background:#6e6b76}
.deck-dot[aria-pressed="true"]:before{background:#c5b6dd}
.gallery-note,.profile-note{color:#aaa6b1;font-size:12px;line-height:1.85}
.side-scribble{color:#aaa6b1;font-size:8px;opacity:.65;letter-spacing:.06em}

/* Resume details use readable type rather than colored panels. */
.about-copy>.eyebrow{color:#aaa6b1}
.about-role{font-size:13px;color:#d4cbdc;line-height:1.8}
.about-text{font-size:14px;line-height:2;color:#bdb7c6}
.capabilities>div{border-color:var(--chrome-line)}
.capabilities h3{font-size:16px;font-weight:600;color:var(--chrome-text)}
.capabilities p{font-size:12px;line-height:1.8;color:#aaa6b1}
.capabilities>div>span:last-child{color:#aaa6b1}
.skill-icon{color:#d0c7db;background:#ffffff03;border-color:#f2efe830;border-radius:50%;transform:none}
.capabilities>div:hover .skill-icon{color:#e0d6ea;background:#c5b6dd0c;border-color:#c5b6dd65}
.timeline-item{border-color:var(--chrome-line)}
.timeline-year{font-size:12px;line-height:1.8;color:#aaa6b1}
.timeline-tag{font-size:10px;line-height:1.6;color:#c3becb;background:#ffffff02;border-color:#f2efe826;padding:3px 8px}
.timeline h3{font-size:20px;font-weight:600;line-height:1.6;letter-spacing:-.015em;color:var(--chrome-text)}
.timeline p{font-size:14px;line-height:1.95;color:#bdb7c6}
html[data-version="chrome"] .timeline-points{font-size:14px;line-height:1.95;color:#bdb7c6}
.timeline .timeline-role{font-size:13px;font-weight:400;line-height:1.9;color:#aaa6b1}
.education-summary p{font-size:12px;line-height:1.9}
.pending-resume,.outline-button{font-size:12px;color:#d6d0df;border-color:#f2efe838;background:#ffffff02}
.outline-button:hover{background:#ffffff08;border-color:#c5b6dd65}
.contact>.eyebrow{color:#aaa6b1}
.contact-display{font-family:Manrope,'Noto Sans SC',sans-serif;font-weight:600;font-size:clamp(90px,14.5vw,230px);letter-spacing:-.075em;word-spacing:-.03em;line-height:1.12;color:var(--chrome-text);text-shadow:none;margin-top:15px}
.contact-lead{font-size:16px;line-height:1.8;color:#c3becb;font-weight:400}
.contact-display{word-spacing:.06em}
.contact-item{min-width:0}
.contact-item small{font-size:10px;color:#aaa6b1;letter-spacing:.14em}
.contact-item>span,.contact-item>a,.copy-contact{font-size:clamp(15px,1.35vw,20px);font-weight:400;line-height:1.7;color:var(--chrome-text);overflow-wrap:anywhere;word-break:normal;gap:12px;min-width:0;max-width:100%}
.contact-item>a .icon,.copy-contact .icon{flex:none;color:#c5b6dd}
.contact-helper{font-size:12px;line-height:1.9;color:#aaa6b1;max-width:250px}
footer{background:#111216;border-color:var(--chrome-line);color:#d4cfdc}
footer>p,.back-top{color:#aaa6b1}
.project-dialog{background:#1c1e25;border-color:#f2efe82b;color:var(--chrome-text)}
.dialog-close{background:#e6e3dd;color:#1c1d22}
.dialog-content .eyebrow{color:#c5b6dd}
.dialog-content>p:not(.eyebrow){font-size:14px;color:#bdb7c6;line-height:1.9}
.dialog-meta{flex-wrap:wrap}
.dialog-meta span{font-size:11px;color:#c3becb;border-color:#f2efe82b;background:#ffffff02}
.toast{background:#28252f;border-color:#c5b6dd50;color:var(--chrome-text)}

@media(min-width:768px) and (max-width:1050px){
  .hero-heading{padding-top:132px}
  .hero-heading h1{font-size:12.2vw}
  .hero-identity{left:4%;max-width:28%;top:44%}
  .hero-identity strong{font-size:22px}
  .hero-identity>span{font-size:11px}
  .hero-left{top:59%}
  .hero-left>p:nth-child(2){font-size:16px}
  .hero-right{right:4%;max-width:25%;top:51%}
  .hero-right>p{font-size:13px}
  .chrome-orbit{width:100px;bottom:57px;right:4%}
  .hero-caption{margin-right:115px}
  .contact-item>span,.contact-item>a,.copy-contact{font-size:15px;gap:8px}
}
@media(max-height:800px) and (min-width:768px){
  .hero-heading{padding-top:120px}
  .hero-identity{top:43%}
  .hero-left{top:58%}
  .chrome-orbit{width:100px;bottom:57px}
}
@media(max-width:767px){
  .hero{min-height:0;padding-bottom:42px}
  .hero-heading{position:relative;padding:114px 20px 0}
  .hero-heading>.eyebrow{font-size:7px;letter-spacing:.16em;margin-bottom:17px}
  .hero-heading h1{font-size:clamp(34px,11.8vw,84px);line-height:1.06;letter-spacing:-.065em;word-spacing:-.06em}
  .hero-identity{position:static;max-width:none;text-align:center;margin-top:23px}
  .hero-identity strong{font-size:20px;letter-spacing:.15em;line-height:1.5}
  .hero-identity>span{font-size:12px;line-height:1.9;margin-top:6px;letter-spacing:0}
  .hero-left{top:auto;margin-top:27px}
  .hero-left>.eyebrow{font-size:7px;letter-spacing:.15em}
  .hero-left>p:nth-child(2){font-size:16px;line-height:1.85;margin:10px 0 0}
  .hero-right{top:auto;right:auto;max-width:none;margin-top:10px}
  .hero-right>p{display:none}
  .hero-right .mobile-interaction{justify-content:center;max-width:none;margin:0;min-height:32px}
  .hero-right .mobile-interaction p{font-size:11px;line-height:1.8;color:#aaa6b1;text-align:center}
  .hero-bottom{gap:25px}
  .hero-caption{margin-right:0;font-size:8px}
  .hero .chrome-light-field{opacity:.17;filter:none}
  .hero .chrome-orbit{width:56px;right:20px;top:432px;bottom:auto;opacity:.58}
  .hero .chrome-orbit>span{font-size:5px;letter-spacing:.04em}
  .chrome-orbit:before{filter:none}
  .section-intro{font-size:13px;line-height:1.95}
  .work .section-intro{margin-top:12px}
  .work .chrome-dot-field{opacity:.025;filter:none}
  .filter{font-size:11px;min-height:39px;padding:9px 12px}
  .filter span{font-size:8px}
  .filters{gap:6px}
  .work-deck-help{font-size:10px;margin-top:4px;color:#aaa6b1}
  #work-grid.work-deck .card-open,#work-grid.work-deck .card-open:hover{box-shadow:0 9px 18px #0006,inset 0 1px 0 #ffffff08}
  #work-grid.work-deck .is-selected .card-open{box-shadow:0 13px 22px #0007,inset 0 1px 0 #ffffff12}
  #work-grid.work-deck .card-info h3{font-size:15px}
  .deck-controls{max-width:560px;gap:13px;margin-top:4px}
  .deck-reading{max-width:390px}
  .deck-status{font-size:16px;line-height:1.6}
  .deck-subtitle{font-size:11px;line-height:1.75;margin-top:3px}
  .deck-responsibility{font-size:12px;line-height:1.8;margin-top:4px}
  .deck-position{font-size:10px;margin-top:7px}
  .deck-nav{width:44px;height:44px}
  .gallery-note,.profile-note{font-size:12px;line-height:1.9}
  .work .gallery-note{text-align:center;max-width:310px;margin-left:auto;margin-right:auto}
  .about-role{font-size:13px;line-height:1.85}
  .about-text{font-size:14px;line-height:2}
  .capabilities h3{font-size:15px;font-weight:600}
  .capabilities p{font-size:12px;line-height:1.8}
  .capabilities>div{gap:13px}
  .timeline-item{grid-template-columns:65px minmax(0,1fr);gap:14px}
  .timeline-year{font-size:10px;line-height:1.85}
  .timeline-tag{font-size:9px}
  .timeline h3{font-size:17px;line-height:1.7}
  .timeline p{font-size:13px;line-height:1.95}
  html[data-version="chrome"] .timeline-points{font-size:13px}
  .timeline .timeline-role{font-size:12px}
  .education-summary p{font-size:12px}
  .contact{background:#15161b}
  .contact-display{font-size:17.4vw;letter-spacing:-.075em;line-height:1.15;margin-top:18px;white-space:nowrap}
  .contact-lead{font-size:14px;margin-top:18px}
  .contact-details{grid-template-columns:minmax(0,1fr);gap:26px;margin-top:17px;text-align:center}
  .contact-item{max-width:100%}
  .contact-item small{font-size:10px;margin-bottom:8px}
  .contact-item>span,.contact-item>a,.copy-contact{font-size:17px;line-height:1.7;justify-content:center;margin-left:auto;margin-right:auto;gap:10px}
  .contact-helper{font-size:12px;max-width:280px;line-height:1.9}
  .dialog-content>p:not(.eyebrow){font-size:13px;line-height:1.95}
}
@media(max-width:359px){
  .hero-heading{padding-left:16px;padding-right:16px}
  .hero-heading>.eyebrow{font-size:6px;letter-spacing:.12em}
  .hero-identity>span{font-size:11px}
  .hero-left>p:nth-child(2){font-size:15px}
  .filters{gap:5px}
  .filter{font-size:10px;padding:9px 10px}
  .deck-controls{gap:7px}
  .deck-status{font-size:15px}
  .deck-subtitle{font-size:10px}
  .deck-responsibility{font-size:11px}
  .timeline-item{grid-template-columns:minmax(0,1fr);gap:6px}
  .timeline-year{font-size:11px}
  .contact-item>span,.contact-item>a,.copy-contact{font-size:16px}
}
/* Keep the name above the portrait after its entrance animation settles. */
@media(min-width:768px){
  .hero-heading{padding-top:8.6vh}
  .hero-heading>.eyebrow{margin-bottom:10px}
  .hero-heading h1{font-size:clamp(74px,min(12.6vw,16.5vh),210px)}
}
@media(min-width:768px) and (max-height:650px){
  .hero-heading{padding-top:82px}
  .hero-heading>.eyebrow{display:none}
  .hero-heading h1{font-size:min(12.6vw,14vh)}
}