/* Shared visual tokens and component styling. Loaded after layout-specific rules. */
:root{--bg:#0C0E11;--panel:#15181D;--fg:#F2F4F7;--muted:#A5ADB8;--line:#2A3038;--accent:#B9DEFF;--ink:#112131;--media-bg:#090B0E;--radius:12px;--button-radius:8px;--section-space:88px;--nav-height:64px}
body{font-family:Arial,'Microsoft YaHei',sans-serif;color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased}
.wrap{max-width:1440px;padding-inline:5%;margin-inline:auto}
body>header.portfolio-header{position:fixed;inset:0 0 auto;z-index:200;height:64px;padding:10px 5%;display:flex;align-items:center;justify-content:center;background:rgba(12,14,17,.94);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);transform:translateY(-100%);visibility:hidden;pointer-events:none;transition:transform 220ms ease,visibility 220ms}
body>header.portfolio-header.is-visible{transform:translateY(0);visibility:visible;pointer-events:auto}
.portfolio-header>nav{width:100%;max-width:1296px;margin:0;gap:8px;align-items:center;scrollbar-width:none}
.portfolio-header>nav::-webkit-scrollbar{display:none}
.portfolio-header>nav>a{border:1px solid transparent;border-radius:var(--button-radius);padding:10px 16px;min-height:44px;display:flex;align-items:center;font-size:13px;color:var(--muted);background:transparent;transition:background 160ms,color 160ms}
.portfolio-header>nav>a:hover{background:var(--panel);border-color:var(--line);color:var(--fg)}
.portfolio-header>nav>a[aria-current=true]{background:var(--accent);border-color:var(--accent);color:var(--ink)}
#home.hero{height:100svh;min-height:420px;top:0}
#home .hero-title{--hero-size:clamp(30px,min(10.5vw,calc((100svh - 120px)/3.8)),150px)}
main.wrap>section{padding-block:var(--section-space);border-color:var(--line)}
.section-head{margin-bottom:36px;gap:32px}
h2{font-size:clamp(32px,4vw,52px);font-weight:700;line-height:1.2;letter-spacing:-.035em}
h3{line-height:1.4;color:var(--fg)}
small,.eyebrow,.meta,.section-head p,.gallery-help,.gift-toolbar p,.group-label,.gift-heading span,.series-phase,.academic-caption,.personal-project h4,.video-card figcaption,.about-grid p,.resume-lead,footer{color:var(--muted)}
small,.eyebrow{font-size:11px;letter-spacing:2px}
.profile-banner{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:28px 32px;margin-bottom:48px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);color:var(--fg)}
.profile-banner .brand{font-size:26px;color:var(--fg);letter-spacing:-.02em}
.profile-banner p{font-size:17px;color:var(--fg);margin:10px 0 0}
.profile-banner p span,.profile-contact{color:var(--muted);font-size:13px}
.profile-contact a:hover{color:var(--accent)}
#about .resume-lead{font-size:20px;max-width:780px;line-height:1.9}
.about-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:8%;margin-top:48px}
.timeline article{padding:28px 0;border-color:var(--line)}
.timeline h3{font-size:21px;margin:8px 0}
.skills{border-color:var(--line);padding-top:26px}
.button,.filters button{border:1px solid var(--line);border-radius:var(--button-radius);padding:11px 20px;background:var(--panel);color:var(--fg);min-height:44px;transition:background 160ms,border-color 160ms}
.button:hover,.filters button:hover{background:#202630;border-color:#627489}
.button.primary,.filters button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--ink)}
a:focus-visible,button:focus-visible,video:focus-visible,img:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.group-media,.group-media img,.group-media video,.personal-project img,.series-cell img,.series-cell video{background:var(--media-bg)}
.group-pair{gap:24px}.gift-heading h3,.series-screen h3{font-size:28px}
#gift-tabs button::after,.academic-picker button::after{background:#647181}
#gift-tabs button[aria-pressed=true]::after,.academic-picker button[aria-pressed=true]::after{background:var(--accent)}
.suite-jump-nav{background:rgba(12,14,17,.97);border-color:var(--line);padding-block:10px;scrollbar-width:none}
.suite-jump-nav::-webkit-scrollbar{display:none}
.suite-jump-nav button{min-height:44px;padding:9px 15px;border-radius:var(--button-radius);border-color:var(--line);background:var(--panel);color:var(--muted)}
.suite-jump-nav button:hover{color:var(--fg);border-color:#627489}
.suite-jump-nav button[aria-current=true]{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.personal-project,.academic-project{padding-block:32px 48px;margin-bottom:24px;border-color:var(--line)}
.personal-project h3,.academic-project h3{font-size:28px;margin-bottom:24px}
.personal-gallery{gap:20px}
.video-card{background:var(--panel);border-radius:var(--radius)}
.video-card video{background:var(--media-bg)}
.video-card figcaption{font-size:12px;padding:12px 14px;line-height:1.7}
.video-card a{color:var(--accent);border-color:var(--line)}
.academic-coverflow img,.academic-coverflow img.is-front{background:transparent;border:0;box-shadow:none}
.academic-caption{margin:16px 0 8px;line-height:1.7}
dialog,#image-viewer,#video-viewer{background:var(--media-bg);color:var(--fg);border-color:var(--line)}
dialog::backdrop{background:rgba(0,0,0,.88)}
.viewer-top,.video-viewer-top{color:var(--muted);font-size:13px}
.contact h2{font-size:clamp(40px,7vw,88px);line-height:1.2}
.contact a.email{color:var(--fg);border-color:var(--line)}
.contact-row p{color:var(--muted)}
footer{gap:20px;border-top:1px solid var(--line);padding-block:28px;font-size:12px}
footer a:hover{color:var(--accent)}
@media(max-width:650px){:root{--section-space:48px;--radius:8px;--nav-height:64px}.wrap{padding-inline:16px}body>header.portfolio-header{height:64px;padding:10px 16px}.portfolio-header>nav{gap:4px}.portfolio-header>nav>a{font-size:12px;padding:10px 12px}.section-head{margin-bottom:24px}.profile-banner{display:flex;flex-direction:column;align-items:flex-start;padding:22px 20px;gap:20px;margin-bottom:32px}.profile-banner .brand{font-size:23px}.profile-banner p{font-size:15px}.profile-banner p span,.profile-contact{font-size:12px}#about .resume-lead{font-size:17px}.about-grid{grid-template-columns:1fr;gap:28px;margin-top:32px}.personal-gallery{gap:16px}.personal-project h3,.academic-project h3,.gift-heading h3,.series-screen h3{font-size:23px}.contact-row{display:block}.contact-row .button{margin-top:20px}.suite-jump-nav{padding-block:8px}.personal-project,.academic-project{padding-block:24px 32px}#home.hero{padding-inline:16px}#home .scroll-cue{left:16px}}
@media(prefers-reduced-motion:reduce){body>header.portfolio-header,.button,.portfolio-header>nav>a{transition:none}#home.hero{position:relative;top:auto}}
html{scroll-behavior:auto}body{overflow-anchor:none}
/* Compact resume rhythm while retaining every entry. */
main.wrap>#about{padding-block:48px}
#about .profile-banner{padding:22px 26px;margin-bottom:28px}
#about .section-head{margin-bottom:18px}
#about .resume-lead{font-size:18px;line-height:1.65;margin:12px 0}
#about .actions{margin-top:18px;margin-bottom:22px}
#about .about-grid{gap:6%;margin-top:24px}
#about .about-grid p{line-height:1.65;margin:8px 0}
#about .about-grid h3{font-size:19px;margin:10px 0 6px}
#about .skills{padding-top:16px;margin-top:18px}
#about .timeline article{padding:18px 0}
#about .timeline article:first-child{padding-top:16px}
#about .timeline h3{font-size:21px;margin:6px 0}
#about .language-skill{color:var(--fg);font-size:14px}
#about .language-skill span{color:var(--muted);margin-right:10px}
@media(max-width:650px){main.wrap>#about{padding-block:32px}#about .profile-banner{padding:20px;margin-bottom:24px}#about .resume-lead{font-size:16px}#about .about-grid{gap:22px;margin-top:20px}#about .about-grid h3{font-size:18px}#about .timeline article{padding-block:16px}}
/* Identity stays in the resume; a compact copy accompanies subsequent work. */
body>header.portfolio-header{--profile-dock-height:120px;flex-direction:column}
.portfolio-header .profile-dock{display:none}
body>header.portfolio-header.profile-pinned{height:calc(64px + var(--profile-dock-height))}
.portfolio-header.profile-pinned .profile-dock{display:flex;width:100%;max-width:1296px;height:var(--profile-dock-height);min-height:var(--profile-dock-height);margin:0;padding:16px 22px;border:0;border-radius:0;background:transparent;flex-direction:row;align-items:center;justify-content:space-between}
.portfolio-header.profile-pinned>nav{flex-shrink:0}
.profile-dock .brand{font-size:22px}.profile-dock p{font-size:15px;margin-top:6px}.profile-dock .profile-contact{font-size:12px}
@media(max-width:650px){body>header.portfolio-header{--profile-dock-height:140px}.portfolio-header.profile-pinned .profile-dock{padding:10px 0;gap:12px;flex-direction:row}.profile-dock .brand{font-size:18px}.profile-dock p{font-size:12px}.profile-dock p span{font-size:10px}.profile-dock .profile-contact{font-size:10px;overflow-wrap:anywhere;max-width:44%}}
body>header.portfolio-header.profile-pinned{gap:0;padding-top:10px;padding-bottom:9px}

/* Short descriptions of the work in each portfolio section. */
.section-head .work-description{max-width:420px;font-size:14px;line-height:1.8;margin:0;text-align:right}
.work-description span{display:block}
@media(max-width:650px){.section-head .work-description{margin-top:18px;margin-left:auto;font-size:13px;line-height:1.8}}