@font-face { font-family: MG; src: url('/assets/MG-B-BiU9T5KX.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: MG; src: url('/assets/MG-BL-BdR8LHFG.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: MG; src: url('/assets/MG-EB-DCIsQNoG.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: ManropeLocal; src: url('/assets/manrope.woff2') format('woff2'); font-weight: 700 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Syne Portfolio"; src: url('/assets/typography/syne-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Serif SC Portfolio"; src: url('/assets/typography/noto-serif-sc-portfolio-subset.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "LXGW WenKai Portfolio"; src: url('/assets/typography/lxgw-wenkai-about-subset.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --bg-primary-light:#f3f2ee;
  --bg-primary-dark:#0d0d0f;
  --bg-lavender:#bb91ff;
  --bg-blue:#497bff;
  --bg-peach:#ffbd80;
  --text-on-light-primary:var(--bg-primary-dark);
  --text-on-light-secondary:rgba(13,13,15,.72);
  --text-on-light-meta:rgba(13,13,15,.56);
  --text-on-dark-primary:var(--bg-primary-light);
  --text-on-dark-secondary:rgba(243,242,238,.72);
  --text-on-dark-meta:rgba(243,242,238,.56);
  --border-light:rgba(13,13,15,.18);
  --border-light-strong:rgba(13,13,15,.28);
  --border-dark:rgba(243,242,238,.18);
  --border-dark-strong:rgba(243,242,238,.28);
  --accent-interactive:var(--bg-blue);
  --accent-active:var(--accent-interactive);
  --accent-hover:var(--accent-interactive);
  --accent-selected:var(--accent-interactive);
  --nav-on-light:var(--text-on-light-primary);
  --nav-on-dark:var(--text-on-dark-primary);
  --focus-outline:var(--text-on-dark-primary);
  --focus-shadow:var(--text-on-light-primary);
  /* Compatibility aliases retained while route-local CSS migrates. */
  --cream:var(--bg-primary-light);
  --ink:var(--bg-primary-dark);
  --paper:var(--text-on-dark-primary);
  --green:var(--bg-lavender);
  --lavender:var(--bg-lavender);
  --blue:var(--bg-blue);
  --peach:var(--bg-peach);
  --line:var(--border-light);
  --line-on-dark:var(--border-dark-strong);
  --meta:11px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
* { box-sizing:border-box; }
html { background:var(--bg-primary-light); scroll-behavior:smooth; scrollbar-width:none; }
::-webkit-scrollbar { width:0; height:0; }
body { margin:0; background:var(--bg-primary-light); color:var(--text-on-light-primary); font-family:ManropeLocal, Manrope, Arial, sans-serif; font-size:16px; letter-spacing:.02em; }
a { color:inherit; text-decoration:none; }
button { border:0; color:inherit; background:none; font:inherit; padding:0; cursor:pointer; }

.site-header { position:fixed; inset:0 0 auto; z-index:50; display:grid; grid-template-columns:1fr auto; padding:14px 28px 0; font-size:var(--meta); font-weight:800; line-height:1; pointer-events:none; }
.site-header > * { pointer-events:auto; }
.site-status { display:flex; align-items:center; gap:18px; }
.site-status::before { content:''; width:5px; height:5px; display:block; border-radius:50%; background:currentColor; }
.site-nav { display:flex; gap:32px; }
.nav-link { position:relative; display:inline-flex; padding:8px 6px; margin:-8px -6px; }
.micro-link { position:relative; display:inline-flex; overflow:hidden; height:1.1em; }
.nav-link-visual, .micro-link { position:relative; display:block; height:1.1em; overflow:hidden; }
.nav-link-visual span, .micro-link span { display:block; transition:transform .45s var(--ease); }
.nav-link-visual span + span, .micro-link span + span { position:absolute; inset:100% 0 auto; }
.nav-link:hover .nav-link-visual span:first-child, .micro-link:hover span:first-child { transform:translateY(-100%); }
.nav-link:hover .nav-link-visual span + span, .micro-link:hover span + span { transform:translateY(-100%); }

.mg-title { font-family:MG, Impact, sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.01em; line-height:.75; }
.home-hero { min-height:100svh; padding:5.2vw 2vw 2vw; position:relative; overflow:hidden; }
.home-name { margin:0; text-align:center; font-size:clamp(96px, 19.4vw, 282px); white-space:nowrap; }
.hero-stage { position:absolute; inset:42% 0 auto; height:350px; display:grid; grid-template-columns:1fr minmax(390px, 33vw) 1fr; align-items:center; gap:24px; }
.hero-side { font-size:clamp(30px, 4.45vw, 64px); text-align:center; }
.hero-media-wrap { align-self:start; margin-top:2.2vw; }
.hero-meta { display:flex; justify-content:space-between; font-size:var(--meta); font-weight:700; margin-bottom:7px; }
.hero-media { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; transition:opacity .4s ease, transform .8s var(--ease); }
.hero-media.is-changing { opacity:0; transform:scale(1.02); }
.scroll-cue { position:absolute; bottom:8.5%; left:50%; transform:translateX(-50%); font-size:var(--meta); font-weight:800; text-transform:uppercase; }

.home-purpose { min-height:100vh; padding:12vw 2vw; background:var(--bg-lavender); color:var(--text-on-light-primary); overflow:hidden; }
.purpose-copy { max-width:1000px; margin:0 auto; font-size:clamp(44px, 8vw, 120px); line-height:.82; text-align:center; }
.purpose-copy em { font-family:Georgia, serif; font-size:.68em; font-weight:400; }
.section-kicker { display:flex; justify-content:space-between; font-size:var(--meta); font-weight:800; text-transform:uppercase; margin-bottom:32px; }
.featured { padding:10vw 2vw 12vw; background:var(--bg-primary-light); }
.section-word { margin:0 0 4vw; font-size:clamp(68px, 12vw, 175px); }
.featured-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.project-tile { position:relative; min-height:24vw; overflow:hidden; background:#d6d3ca; }
.project-tile img { width:100%; height:100%; min-height:24vw; display:block; object-fit:cover; transition:transform .8s var(--ease), filter .5s ease; }
.project-tile:hover img { transform:scale(1.04); filter:saturate(1.12); }
.tile-meta { position:absolute; inset:auto 18px 16px; display:flex; justify-content:space-between; align-items:end; color:white; text-shadow:0 1px 8px #0008; }
.tile-title { font-size:clamp(20px, 2.8vw, 40px); font-weight:800; text-transform:uppercase; }
.break-section { padding:10vw 2vw 12vw; background:var(--bg-primary-dark); color:var(--text-on-dark-primary); overflow:hidden; }
.break-list { display:grid; gap:0; }
.break-row { display:grid; grid-template-columns:70px 1fr 1fr; align-items:center; border-top:1px solid var(--line-on-dark); padding:20px 0; font-size:clamp(26px, 4.5vw, 64px); line-height:.9; text-transform:uppercase; }
.break-row:last-child { border-bottom:1px solid var(--line); }
.break-row small { font-size:var(--meta); align-self:start; }
.break-row span:last-child { font-family:Georgia, serif; font-size:.54em; text-align:right; text-transform:none; }

body[data-page="home"] #top { --route-style-ready: home; }
body[data-page="works"] .works-page { --route-style-ready: works; }
.works-page { min-height:100svh; background:var(--bg-primary-dark); color:var(--text-on-dark-primary); overflow:hidden; }
.works-stage { height:100svh; min-height:640px; display:grid; grid-template-columns:1fr 1.16fr 1fr; grid-template-rows:32% 36.5% 31.5%; position:relative; background:linear-gradient(to right, transparent 31.6%, rgba(238,233,209,.25) 31.6%, rgba(238,233,209,.25) calc(31.6% + 1px), transparent calc(31.6% + 1px), transparent 68.4%, rgba(238,233,209,.25) 68.4%, rgba(238,233,209,.25) calc(68.4% + 1px), transparent calc(68.4% + 1px)), linear-gradient(to bottom, transparent 32%, rgba(238,233,209,.25) 32%, rgba(238,233,209,.25) calc(32% + 1px), transparent calc(32% + 1px), transparent 68.5%, rgba(238,233,209,.25) 68.5%, rgba(238,233,209,.25) calc(68.5% + 1px), transparent calc(68.5% + 1px)); }
.works-cell { display:none; }
.works-title { grid-column:1 / -1; grid-row:1; display:flex; align-items:end; justify-content:center; padding-bottom:44px; text-align:center; font-size:clamp(15px, 1.35vw, 20px); font-weight:800; text-transform:uppercase; z-index:1; }
.works-prev, .works-next { grid-row:1; align-self:end; padding:0 28px 18px; font-size:var(--meta); font-weight:800; text-transform:uppercase; z-index:2; }
.works-prev { grid-column:1; }
.works-next { grid-column:3; text-align:right; }
.works-card { grid-column:2; grid-row:2; align-self:center; margin:0 13px; aspect-ratio:1.68; position:relative; overflow:hidden; border:1px solid var(--border-dark-strong); background:var(--bg-primary-dark); z-index:1; }
.works-card img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease), opacity .35s ease; }
.works-card:hover img { transform:scale(1.045); }
.works-card::after { content:'HOVER TO PLAY'; position:absolute; inset:auto 12px 10px; opacity:0; font-size:9px; font-weight:800; transition:opacity .3s ease; }
.works-card:hover::after { opacity:1; }
.works-side { grid-row:2; align-self:center; aspect-ratio:1.68; margin:0 5px; overflow:hidden; opacity:.96; }
.works-side img { width:100%; height:100%; display:block; object-fit:cover; }
.works-side.left { grid-column:1; grid-row:2; }
.works-side.right { grid-column:3; grid-row:2; }
.works-bottom { grid-column:2; grid-row:3; display:flex; flex-direction:column; align-items:center; padding-top:54px; gap:26px; z-index:1; }
.works-count { display:flex; align-items:center; gap:16px; font-size:14px; }
.works-count button { opacity:.45; }
.works-count button[aria-current="true"] { opacity:1; font-size:18px; }
.works-counter { font-size:var(--meta); font-weight:800; }
.play-state { position:fixed; z-index:55; inset:auto 28px 38px; display:flex; justify-content:space-between; font-size:var(--meta); font-weight:800; text-transform:uppercase; }
.play-state::first-letter { color:#ef233c; }
body[data-page="works"] .site-header, body[data-page="about"] .site-header { color:var(--paper); }

body[data-page="about"] .about-page { --route-style-ready: about; }
.about-page { background:var(--bg-primary-light); }
.about-banner { min-height:158vw; max-height:2260px; background:linear-gradient(to bottom, var(--bg-lavender) 0 35.5%, var(--bg-primary-light) 35.5% 100%); color:var(--text-on-light-primary); padding-top:9vw; position:relative; overflow:hidden; }
.about-title { margin:0; font-size:clamp(96px, 19.5vw, 282px); text-align:center; white-space:nowrap; }
.profile-labels { width:min(682px, 47.4vw); margin:8vw auto 16px; display:flex; justify-content:space-between; font-size:var(--meta); font-weight:800; }
.profile-wrap { width:min(682px, 47.4vw); margin:0 auto; background:var(--cream); }
.profile-img { width:100%; aspect-ratio:1708/2560; display:block; object-fit:cover; }
.profile-actions { display:flex; justify-content:center; gap:28px; padding:16px; background:var(--cream); }
.pill { background:var(--ink); color:var(--paper); border-radius:99px; padding:4px 14px; font-size:10px; font-weight:800; }
.profile-notes { position:absolute; bottom:7vw; left:0; right:0; display:flex; justify-content:space-between; padding:0 2vw; font-size:var(--meta); font-weight:800; text-transform:uppercase; }
.about-gallery { height:370px; display:flex; justify-content:center; gap:48px; align-items:center; overflow:hidden; }
.about-gallery img { width:217px; height:217px; object-fit:cover; }
.about-copy { padding:0 2vw 10vw; display:grid; grid-template-columns:1fr minmax(280px, 560px) 1fr; gap:5vw; align-items:center; }
.about-copy p { grid-column:2; margin:0; font-size:clamp(24px, 2.7vw, 40px); line-height:.98; text-align:center; font-weight:800; text-transform:uppercase; }
.capabilities { background:var(--bg-lavender); color:var(--text-on-light-primary); overflow:hidden; padding:0 0 4vw; }
.capability-track { display:flex; flex-direction:column; white-space:nowrap; }
.capability-track span { font-family:MG, Impact, sans-serif; font-size:clamp(88px, 16.5vw, 238px); line-height:.89; letter-spacing:.01em; }
.awards { background:var(--bg-primary-dark); color:var(--text-on-dark-primary); min-height:1186px; padding:11vw 2vw 8vw; position:relative; overflow:hidden; }
.awards h2 { margin:0; font-size:clamp(24px, 2vw, 32px); }
.award-heading { margin:6vw -1vw 0; font-family:MG, Impact, sans-serif; font-size:clamp(78px, 9.5vw, 136px); line-height:.82; text-transform:uppercase; max-width:900px; }
.award-body { width:min(330px, 28vw); margin:7vw 0 0 auto; font-size:14px; line-height:1.3; font-weight:700; }

.site-footer { min-height:550px; padding:66px 28px 24px; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto 1fr auto; gap:40px; background:var(--bg-primary-light); color:var(--text-on-light-primary); }
.footer-label { font-size:var(--meta); font-weight:800; text-transform:uppercase; }
.footer-links { display:flex; flex-direction:column; gap:13px; font-size:22px; font-weight:800; }
.footer-links a { position:relative; padding:6px 8px; margin:-6px -8px; }
.footer-cta { grid-column:1 / -1; align-self:center; font-family:MG, Impact, sans-serif; font-size:clamp(80px, 18vw, 250px); line-height:.75; text-align:center; text-transform:uppercase; }
.footer-bottom { grid-column:1 / -1; display:flex; justify-content:space-between; font-size:var(--meta); font-weight:800; text-transform:uppercase; }

@media (max-width: 500px) {
  :root { --meta:9px; }
  .site-header { padding:12px 18px 0; }
  .site-status { gap:12px; }
  .site-status span:not(:first-of-type) { display:none; }
  .site-nav { gap:19px; }
  .home-hero { min-height:920px; padding:65px 18px 16px; }
  .home-name { font-size:clamp(86px, 32.55vw, 126px); line-height:.8; white-space:normal; max-width:330px; margin:0 auto; }
  .hero-stage { inset:330px 18px auto; height:auto; display:flex; flex-direction:column; gap:0; }
  .hero-media-wrap { order:1; margin:0; width:100%; }
  .hero-media { aspect-ratio:1.475; }
  .hero-side { font-size:clamp(48px, 15.3vw, 70px); line-height:.84; text-align:center; margin-top:58px; }
  .hero-side:first-child { order:2; }
  .hero-side:last-child { order:3; margin-top:20px; }
  .scroll-cue { bottom:12px; }
  .home-purpose { min-height:900px; padding:72px 18px; }
  .purpose-copy { font-size:clamp(50px, 14vw, 84px); }
  .featured { padding:68px 18px 84px; }
  .featured-grid { grid-template-columns:1fr; }
  .project-tile, .project-tile img { min-height:288px; }
  .break-section { padding:68px 18px 84px; }
  .break-row { grid-template-columns:28px 1fr; gap:10px; font-size:48px; padding:18px 0; }
  .break-row span:last-child { grid-column:2; text-align:left; }

  .works-stage { min-height:844px; height:100svh; grid-template-columns:18px minmax(0, 1fr) 18px; grid-template-rows:36.5% 27% 36.5%; background:linear-gradient(to right, transparent 18px, rgba(238,233,209,.25) 18px, rgba(238,233,209,.25) 19px, transparent 19px calc(100% - 19px), rgba(238,233,209,.25) calc(100% - 19px), rgba(238,233,209,.25) calc(100% - 18px), transparent calc(100% - 18px)), linear-gradient(to bottom, transparent 36.5%, rgba(238,233,209,.25) 36.5%, rgba(238,233,209,.25) calc(36.5% + 1px), transparent calc(36.5% + 1px), transparent 63.5%, rgba(238,233,209,.25) 63.5%, rgba(238,233,209,.25) calc(63.5% + 1px), transparent calc(63.5% + 1px)); }
  .works-title { padding-bottom:85px; font-size:14px; }
  .works-prev, .works-next { padding:0 18px 16px; }
  .works-card { margin:0 14px; }
  .works-side { margin:0 4px; }
  .works-bottom { padding-top:100px; gap:18px; }
  .works-count { gap:13px; }
  .play-state { inset:auto 18px 21px; }

  .about-banner { min-height:1539px; padding-top:91px; background:linear-gradient(to bottom, var(--bg-lavender) 0 31%, var(--cream) 31% 100%); }
  .about-title { white-space:normal; width:312px; margin:0 auto; font-size:clamp(86px, 32.55vw, 126px); line-height:.8; }
  .profile-labels, .profile-wrap { width:100%; }
  .profile-labels { padding:0 18px; margin-top:112px; justify-content:center; }
  .profile-labels span:last-child { display:none; }
  .profile-wrap { margin-top:58px; }
  .profile-img { aspect-ratio:390/474; }
  .profile-actions { padding:14px; }
  .profile-notes { bottom:32px; padding:0 14px; font-size:8px; }
  .about-gallery { height:163px; gap:18px; }
  .about-gallery img { width:109px; height:109px; }
  .about-copy { display:block; padding:60px 18px 82px; }
  .about-copy p { font-size:24px; }
  .capabilities { padding-bottom:30px; }
  .capability-track span { font-size:90px; line-height:.9; }
  .awards { min-height:930px; padding:76px 18px 50px; }
  .award-heading { margin-top:70px; font-size:88px; }
  .award-body { width:100%; margin:64px 0 0; font-size:12px; }
  .site-footer { min-height:444px; padding:48px 18px 20px; grid-template-columns:1fr auto; gap:24px; }
  .footer-links { font-size:18px; gap:10px; }
  .footer-cta { font-size:84px; }
}

@media (min-width: 501px) and (max-width: 900px) {
  .hero-stage { inset:46% 0 auto; height:300px; grid-template-columns:1fr 33vw 1fr; }
  .hero-media-wrap { margin-top:0; }
  .hero-side { align-self:start; margin-top:77px; }
  .scroll-cue { bottom:40px; }
  .works-stage { grid-template-rows:40% 20% 40%; background:linear-gradient(to right, transparent 31.6%, rgba(238,233,209,.25) 31.6%, rgba(238,233,209,.25) calc(31.6% + 1px), transparent calc(31.6% + 1px), transparent 68.4%, rgba(238,233,209,.25) 68.4%, rgba(238,233,209,.25) calc(68.4% + 1px), transparent calc(68.4% + 1px)), linear-gradient(to bottom, transparent 40%, rgba(238,233,209,.25) 40%, rgba(238,233,209,.25) calc(40% + 1px), transparent calc(40% + 1px), transparent 60%, rgba(238,233,209,.25) 60%, rgba(238,233,209,.25) calc(60% + 1px), transparent calc(60% + 1px)); }
  .works-title { padding-bottom:0; }
  .works-prev, .works-next { padding-bottom:10px; }
  .works-card { margin-left:7px; margin-right:7px; }
  .works-bottom { padding-top:20px; }
  .profile-labels { margin-top:9.5vw; }
  .about-banner { min-height:1214px; }
  .profile-labels, .profile-wrap { width:47.4vw; }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .home-name, .about-title { font-size:19vw; }
  .hero-stage { inset:44% 0 0; grid-template-columns:1fr 33vw 1fr; }
  .works-stage { grid-template-rows:32% 36.5% 31.5%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* P2.1 Works personalization: preserve the Jasmine stage, with Wang Xiuli project identity. */
body[data-page="works"] { background:var(--ink); color:var(--paper); font-family:var(--font-body-cn); }
body[data-page="works"] .site-nav .nav-link[aria-current="page"] { color:var(--accent-active); }
body[data-page="works"] .works-stage { background:linear-gradient(to right, transparent 31.6%, rgba(243,242,238,.15) 31.6%, rgba(243,242,238,.15) calc(31.6% + 1px), transparent calc(31.6% + 1px), transparent 68.4%, rgba(243,242,238,.15) 68.4%, rgba(243,242,238,.15) calc(68.4% + 1px), transparent calc(68.4% + 1px)), linear-gradient(to bottom, transparent 32%, rgba(243,242,238,.15) 32%, rgba(243,242,238,.15) calc(32% + 1px), transparent calc(32% + 1px), transparent 68.5%, rgba(243,242,238,.15) 68.5%, rgba(243,242,238,.15) calc(68.5% + 1px), transparent calc(68.5% + 1px)); }
body[data-page="works"] .works-title { position:relative; flex-direction:column; align-items:center; gap:7px; padding-bottom:30px; font-family:var(--font-display-cn); font-size:clamp(22px, 2.1vw, 34px); font-weight:800; letter-spacing:-.04em; text-transform:none; line-height:1; }
body[data-page="works"] .works-title::before { content:'SELECTED WORK'; color:var(--text-on-dark-meta); font-family:ManropeLocal, Arial, sans-serif; font-size:9px; font-weight:800; letter-spacing:.12em; line-height:1; }
body[data-page="works"] .works-active-meta { grid-column:2; grid-row:1; align-self:end; justify-self:center; display:flex; gap:14px; padding-bottom:12px; color:var(--blue); font-size:10px; font-weight:600; line-height:1.2; z-index:2; transform:none; }
body[data-page="works"] .works-active-meta span:last-child { color:var(--text-on-dark-meta); }
body[data-page="works"] .works-prev, body[data-page="works"] .works-next { padding-bottom:18px; color:var(--text-on-dark-secondary); font-family:var(--font-body-cn); font-size:11px; font-weight:600; text-transform:none; letter-spacing:.03em; transition:color .3s ease, transform .3s ease; }
body[data-page="works"] .works-prev:hover, body[data-page="works"] .works-prev:focus-visible { color:var(--blue); transform:translateX(-4px); }
body[data-page="works"] .works-next:hover, body[data-page="works"] .works-next:focus-visible { color:var(--blue); transform:translateX(4px); }
body[data-page="works"] .works-side { position:relative; margin:0 11px; opacity:.34; filter:saturate(.65); transition:opacity .4s ease, filter .4s ease; }
body[data-page="works"] .works-side:hover { opacity:.58; filter:saturate(.9); }
body[data-page="works"] .works-side-label { position:absolute; z-index:1; inset:10px auto auto 12px; color:var(--text-on-dark-secondary); font-size:9px; font-weight:600; letter-spacing:.08em; }
body[data-page="works"] .works-side.right .works-side-label { inset:10px 12px auto auto; }
body[data-page="works"] .works-card { margin:0 17px; border-color:rgba(73,123,255,.72); box-shadow:0 0 0 1px rgba(243,242,238,.08), 0 20px 55px rgba(0,0,0,.28); }
body[data-page="works"] .works-card::after { content:'打开项目'; color:var(--paper); font-family:var(--font-body-cn); font-size:10px; letter-spacing:.04em; }
body[data-page="works"] .works-card:hover { border-color:var(--blue); }
body[data-page="works"] .works-count { gap:18px; font-family:ManropeLocal, Arial, sans-serif; }
body[data-page="works"] .works-count button { color:var(--text-on-dark-meta); font-size:11px; transition:color .25s ease, transform .25s ease; }
body[data-page="works"] .works-count button:hover, body[data-page="works"] .works-count button:focus-visible { color:var(--accent-hover); transform:translateY(-2px); }
body[data-page="works"] .works-count button[aria-current="true"] { color:var(--blue); font-size:16px; }
body[data-page="works"] .works-counter { color:var(--blue); font-family:ManropeLocal, Arial, sans-serif; font-size:12px; letter-spacing:.08em; }
body[data-page="works"] .play-state { color:var(--text-on-dark-meta); font-family:var(--font-body-cn); font-size:9px; font-weight:500; text-transform:none; }
body[data-page="works"] .works-status-dot { display:inline-block; width:5px; height:5px; margin-right:5px; border-radius:50%; background:var(--lavender); vertical-align:middle; }

@media (max-width:500px) {
  body[data-page="works"] .works-title { gap:6px; padding-bottom:74px; font-size:22px; letter-spacing:-.035em; }
  body[data-page="works"] .works-title::before { font-size:8px; }
  body[data-page="works"] .works-active-meta { grid-column:2; grid-row:1; max-width:calc(100vw - 76px); padding-bottom:32px; font-size:9px; text-align:center; transform:none; }
  body[data-page="works"] .works-active-meta span:last-child { display:none; }
  body[data-page="works"] .works-prev, body[data-page="works"] .works-next { position:absolute; top:calc(36.5% - 58px); bottom:auto; width:auto; padding:0; white-space:nowrap; font-size:10px; }
  body[data-page="works"] .works-prev { left:18px; }
  body[data-page="works"] .works-next { right:18px; }
  body[data-page="works"] .works-side { margin:0 4px; opacity:.22; }
  body[data-page="works"] .works-side-label { display:none; }
  body[data-page="works"] .works-card { margin:0 14px; }
  body[data-page="works"] .works-card::after { content:'打开项目'; opacity:1; }
  body[data-page="works"] .works-bottom { padding-top:100px; }
}

/* P2.2 Works polish: sharpen hierarchy and state feedback without changing the stage model. */
body[data-page="works"] { --works-ink:var(--bg-primary-dark); --works-paper:var(--text-on-dark-primary); --works-ease:cubic-bezier(.496,.004,0,1); background:var(--works-ink); color:var(--works-paper); }
body[data-page="works"] .works-page { background:var(--works-ink); color:var(--works-paper); }
body[data-page="works"] .works-stage { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr); }
body[data-page="works"] .works-title-wrap { grid-column:1 / -1; grid-row:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:12px; padding:92px 24px 0; z-index:1; pointer-events:none; }
body[data-page="works"] .works-kicker { display:flex; align-items:baseline; gap:9px; color:var(--text-on-dark-secondary); font-family:ManropeLocal, Arial, sans-serif; font-size:10px; font-weight:800; letter-spacing:.1em; line-height:1; text-transform:none; }
body[data-page="works"] .works-kicker small { color:var(--text-on-dark-meta); font-size:8px; letter-spacing:.14em; text-transform:uppercase; }
body[data-page="works"] .works-title { grid-column:auto; grid-row:auto; display:block; max-width:100%; padding:0; color:var(--works-paper); font-family:var(--font-display-cn); font-size:clamp(25px,2.5vw,38px); font-weight:800; letter-spacing:-.035em; line-height:1.04; text-transform:none; pointer-events:auto; transition:opacity .46s ease, transform .72s var(--works-ease); }
body[data-page="works"] .works-title::before { content:none; }
body[data-page="works"] .works-prev, body[data-page="works"] .works-next { padding-bottom:22px; color:var(--text-on-dark-secondary); font-family:var(--font-body-cn); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:none; transition:color .35s ease, transform .5s var(--works-ease); }
body[data-page="works"] .works-prev:hover, body[data-page="works"] .works-prev:focus-visible { color:var(--accent-hover); transform:translateX(-5px); }
body[data-page="works"] .works-next:hover, body[data-page="works"] .works-next:focus-visible { color:var(--accent-hover); transform:translateX(5px); }
body[data-page="works"] .works-active-meta { grid-column:2; grid-row:1; align-self:end; justify-self:center; display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.28fr); gap:10px 18px; width:min(calc(100% - 28px),460px); padding:0 14px 10px; color:var(--works-paper); font-family:var(--font-body-cn); font-size:10px; line-height:1.25; z-index:2; transform:none; transition:opacity .38s ease, transform .72s var(--works-ease); }
body[data-page="works"] .works-meta-group { min-width:0; display:flex; flex-direction:column; gap:5px; border-top:1px solid var(--border-dark); padding-top:7px; }
body[data-page="works"] .works-meta-label { color:var(--text-on-dark-meta); font-family:ManropeLocal, Arial, sans-serif; font-size:8px; font-weight:800; letter-spacing:.1em; line-height:1; text-transform:uppercase; }
body[data-page="works"] .works-meta-focus strong { color:var(--blue); font-size:11px; font-weight:700; }
body[data-page="works"] .works-meta-scope { grid-column:2; }
body[data-page="works"] .works-meta-scope span:last-child { color:var(--text-on-dark-secondary); overflow-wrap:anywhere; }
body[data-page="works"] .works-meta-year { grid-column:1 / -1; flex-direction:row; align-items:baseline; justify-content:space-between; gap:12px; padding-top:6px; }
body[data-page="works"] .works-meta-year span:last-child { color:var(--text-on-dark-meta); font-family:ManropeLocal, Arial, sans-serif; font-size:9px; letter-spacing:.08em; }
body[data-page="works"] .works-card { margin:0 10px; border-color:rgba(73,123,255,.78); background:var(--bg-primary-dark); box-shadow:none; cursor:pointer; transition:opacity .38s ease, transform .72s var(--works-ease), border-color .35s ease; }
body[data-page="works"] .works-card::before { content:'当前项目'; position:absolute; inset:12px auto auto 14px; color:var(--text-on-dark-secondary); font-family:var(--font-body-cn); font-size:9px; font-weight:600; letter-spacing:.06em; opacity:0; transition:opacity .35s ease; z-index:2; }
body[data-page="works"] .works-card::after { content:'打开项目'; inset:auto 14px 12px; color:var(--works-paper); font-family:var(--font-body-cn); font-size:10px; letter-spacing:.04em; }
body[data-page="works"] .works-card img { transition:transform .72s var(--works-ease), filter .5s ease, opacity .38s ease; }
body[data-page="works"] .works-card:hover { border-color:var(--blue); }
body[data-page="works"] .works-card:hover::before, body[data-page="works"] .works-card:focus-visible::before { opacity:1; }
body[data-page="works"] .works-card:hover img { transform:scale(1.02); filter:brightness(1.035); }
body[data-page="works"] .works-card:focus-visible { outline:1px solid var(--focus-outline); outline-offset:5px; }
body[data-page="works"] .works-side { position:relative; margin:0 9px; opacity:.3; filter:saturate(.68) brightness(.72); transition:opacity .52s ease, filter .52s ease, transform .72s var(--works-ease); }
body[data-page="works"] .works-side::after { content:''; position:absolute; inset:0; background:rgba(5,5,8,.25); pointer-events:none; transition:background .5s ease; }
body[data-page="works"] .works-side img { transition:transform .72s var(--works-ease), filter .5s ease; }
body[data-page="works"] .works-side:hover { opacity:.55; filter:saturate(.9) brightness(.86); transform:scale(1.012); }
body[data-page="works"] .works-side:hover::after { background:rgba(5,5,8,.08); }
body[data-page="works"] .works-side:hover img { transform:scale(1.02); }
body[data-page="works"] .works-side-label { color:var(--text-on-dark-secondary); font-family:ManropeLocal, Arial, sans-serif; font-size:8px; letter-spacing:.12em; text-transform:uppercase; }
body[data-page="works"] .works-bottom { padding-top:48px; gap:28px; }
body[data-page="works"] .works-count { gap:22px; font-family:ManropeLocal, Arial, sans-serif; font-size:11px; }
body[data-page="works"] .works-count button { color:var(--text-on-dark-meta); font-size:11px; letter-spacing:.08em; transition:color .3s ease, opacity .3s ease, transform .45s var(--works-ease); }
body[data-page="works"] .works-count button:hover, body[data-page="works"] .works-count button:focus-visible { color:var(--accent-hover); opacity:1; transform:translateY(-3px); }
body[data-page="works"] .works-count button[aria-current="true"] { color:var(--accent-active); font-size:16px; opacity:1; }
body[data-page="works"] .works-count button:focus-visible { outline:1px solid var(--focus-outline); outline-offset:6px; }
body[data-page="works"] .works-counter { color:var(--blue); font-family:ManropeLocal, Arial, sans-serif; font-size:12px; letter-spacing:.1em; }
body[data-page="works"] .play-state { color:var(--text-on-dark-meta); font-family:var(--font-body-cn); font-size:9px; font-weight:500; letter-spacing:.08em; text-transform:none; }
body[data-page="works"] .works-status-dot { width:5px; height:5px; background:var(--lavender); }
body[data-page="works"].is-switching .works-card { opacity:.54; transform:scale(.985); }
body[data-page="works"].is-switching .works-card img { transform:scale(.985); opacity:.72; }
body[data-page="works"].is-switching .works-title, body[data-page="works"].is-switching .works-active-meta { opacity:.18; transform:translateY(8px); }
body[data-page="works"].is-switching .works-side { opacity:.16; }

@media (min-width:501px) and (max-width:900px) {
  body[data-page="works"] .works-stage { grid-template-columns:minmax(0,.84fr) minmax(0,1.24fr) minmax(0,.84fr); grid-template-rows:34% 31% 35%; }
  body[data-page="works"] .works-title-wrap { gap:10px; padding:64px 18px 0; }
  body[data-page="works"] .works-title { font-size:clamp(24px,3.3vw,32px); }
  body[data-page="works"] .works-prev, body[data-page="works"] .works-next { padding-bottom:15px; }
  body[data-page="works"] .works-active-meta { width:min(calc(100% - 18px),360px); padding:0 9px 8px; gap:8px 12px; }
  body[data-page="works"] .works-card { margin:0 5px; }
  body[data-page="works"] .works-side { margin:0 5px; opacity:.26; }
  body[data-page="works"] .works-bottom { padding-top:34px; gap:22px; }
}

@media (max-width:500px) {
  body[data-page="works"] .works-title-wrap { gap:7px; padding:0 18px 18px; }
  body[data-page="works"] .works-kicker { gap:7px; font-size:9px; }
  body[data-page="works"] .works-kicker small { font-size:7px; }
  body[data-page="works"] .works-title { max-width:calc(100vw - 74px); font-size:22px; line-height:1.1; }
  body[data-page="works"] .works-active-meta { grid-column:2; grid-row:3; align-self:start; width:100%; grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:20px 18px 0; gap:9px 12px; font-size:9px; }
  body[data-page="works"] .works-meta-group { gap:4px; padding-top:6px; }
  body[data-page="works"] .works-meta-label { font-size:7px; }
  body[data-page="works"] .works-meta-focus strong { font-size:10px; }
  body[data-page="works"] .works-meta-scope { grid-column:1 / -1; }
  body[data-page="works"] .works-meta-year { grid-column:1 / -1; }
  body[data-page="works"] .works-prev, body[data-page="works"] .works-next { top:calc(36.5% - 58px); padding:0; font-size:10px; }
  body[data-page="works"] .works-prev { left:18px; }
  body[data-page="works"] .works-next { right:18px; }
  body[data-page="works"] .works-card { margin:0 14px; }
  body[data-page="works"] .works-card::before { inset:10px auto auto 11px; font-size:8px; }
  body[data-page="works"] .works-card::after { opacity:1; inset:auto 11px 10px; font-size:9px; }
  body[data-page="works"] .works-side { margin:0 4px; opacity:.18; }
  body[data-page="works"] .works-bottom { padding-top:138px; gap:16px; }
  body[data-page="works"] .works-count { gap:18px; }
  body[data-page="works"] .works-count button[aria-current="true"] { font-size:15px; }
}

/* Wang Xiuli P1 identity layer: keeps the clone's geometry and interaction contracts intact. */
body[data-identity="wang-xiuli"] .site-header,
body[data-identity="wang-xiuli"] .site-nav .nav-link[href="/"] { color:var(--ink); }
body[data-page="works"] .site-header,
body[data-page="about"] .site-header,
body[data-page="break"] .site-header { color:var(--paper); }
body[data-page="home"] .site-nav .nav-link[href="/"] { color:var(--accent-active); }
.site-nav .nav-link[href="/break/"] { min-width:4.8em; }

.wang-home-hero { background:var(--cream); }
.wang-home-hero .hero-side { color:var(--blue); }
.wang-home-hero .hero-meta { color:var(--blue); }
.hero-subline, .hero-statement { position:absolute; bottom:17%; max-width:33vw; font-size:clamp(12px, 1.1vw, 16px); font-weight:800; line-height:1.25; }
.hero-subline { left:2vw; color:var(--blue); }
.hero-statement { right:2vw; color:var(--ink); text-align:right; }
.home-purpose { background:var(--lavender); color:var(--ink); }
.featured { background:var(--cream); }
body[data-page="home"] .featured-grid { grid-template-columns:repeat(3, 1fr); }
.tile-meta { display:grid; grid-template-columns:1fr; gap:10px; align-items:end; }
.tile-detail { display:flex; flex-direction:column; gap:5px; max-width:74%; }
.tile-detail small { font-size:10px; line-height:1.15; font-weight:800; }
.tile-description { font-size:12px !important; line-height:1.25 !important; font-weight:700 !important; text-transform:none; }
.wang-archive-teaser { min-height:72vh; background:var(--peach); color:var(--ink); }
.archive-link { display:block; margin:7vw 0 2vw; color:var(--accent-active); font-size:clamp(90px, 18vw, 260px); }
.wang-archive-teaser p { max-width:420px; margin:0 0 2vw auto; font-size:clamp(18px, 2vw, 28px); line-height:1.05; font-weight:800; }
.site-footer { background:var(--cream); color:var(--ink); }
.footer-links span { display:block; }

@media (min-width:501px) and (max-width:900px) {
  body[data-page="home"] .featured-grid { grid-template-columns:repeat(2, 1fr); }
  .hero-subline, .hero-statement { max-width:31vw; bottom:15%; font-size:11px; }
  .wang-archive-teaser { min-height:640px; }
}

@media (max-width:500px) {
  .hero-subline, .hero-statement { left:18px; right:18px; max-width:none; bottom:78px; font-size:10px; text-align:center; }
  .hero-statement { bottom:45px; }
  body[data-page="home"] .featured-grid { grid-template-columns:1fr; }
  .tile-detail { max-width:100%; }
  .tile-description { font-size:11px !important; }
  .wang-archive-teaser { min-height:520px; padding-top:68px; }
  .archive-link { margin:72px 0 24px; font-size:94px; }
  .wang-archive-teaser p { margin:0; font-size:20px; }
}

/* P1.5 Home editorial enrichment: Chinese-first details over the protected clone skeleton. */
body[data-page="home"] .site-status { gap:14px; }
body[data-page="home"] .site-status-secondary { color:var(--blue); font-size:9px; letter-spacing:.08em; }
body[data-page="home"] .site-nav .nav-link span + span { color:var(--blue); font-size:.72em; letter-spacing:.1em; opacity:.7; }
body[data-page="home"] .site-nav .nav-link[href="/"] { color:var(--accent-active); }
body[data-page="home"] .site-header { letter-spacing:.01em; }

body[data-page="home"] .home-hero { isolation:isolate; }
.hero-index { position:absolute; top:5.3vw; left:2vw; z-index:3; display:flex; align-items:center; gap:8px; color:var(--blue); font-size:var(--meta); font-weight:800; letter-spacing:.04em; }
.editorial-dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--blue); }
.hero-rail { position:absolute; top:52%; right:2vw; z-index:3; display:flex; flex-direction:column; gap:10px; padding-inline-start:10px; border-inline-start:1px solid var(--blue); color:var(--blue); font-size:9px; font-weight:800; letter-spacing:.08em; line-height:1.1; writing-mode:vertical-rl; }
.hero-meta { color:var(--blue); }
.hero-meta-english { font-size:9px; letter-spacing:.08em; opacity:.58; }
.hero-side { letter-spacing:-.03em; text-transform:none; }
.scroll-cue { display:flex; align-items:center; gap:8px; color:var(--ink); }

.home-editorial-arrow { position:relative; display:inline-block; width:16px; height:10px; flex:0 0 16px; transition:transform .35s var(--ease); }
.home-editorial-arrow::before { content:""; position:absolute; top:5px; left:0; width:13px; height:1px; background:currentColor; }
.home-editorial-arrow::after { content:""; position:absolute; top:2px; right:1px; width:6px; height:6px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg); }
.tile-action:hover .home-editorial-arrow, .archive-link:hover .home-editorial-arrow { transform:translateX(5px); }
.scroll-cue .home-editorial-arrow { transform:rotate(90deg); }

body[data-page="home"] .home-purpose { position:relative; display:flex; flex-direction:column; justify-content:center; isolation:isolate; }
body[data-page="home"] .home-purpose .section-kicker,
body[data-page="home"] .featured .section-kicker,
body[data-page="home"] .wang-archive-teaser .section-kicker { position:relative; z-index:2; color:var(--ink); }
body[data-page="home"] .home-purpose .section-kicker span:last-child,
body[data-page="home"] .featured .section-kicker span:last-child,
body[data-page="home"] .wang-archive-teaser .section-kicker span:last-child { font-size:9px; letter-spacing:.12em; opacity:.62; }
.purpose-bg-word { position:absolute; right:-2vw; bottom:5vw; z-index:-1; color:var(--ink); font-family:"Microsoft YaHei", "Noto Sans CJK SC", sans-serif; font-size:clamp(100px, 18vw, 260px); font-weight:800; letter-spacing:-.08em; line-height:.8; opacity:.12; white-space:nowrap; }
.purpose-copy { display:flex; flex-direction:column; align-items:center; gap:12px; font-family:"Microsoft YaHei", "Noto Sans CJK SC", sans-serif; font-weight:800; letter-spacing:-.06em; line-height:.9; }
.purpose-copy span { font-size:clamp(56px, 10vw, 148px); }
.purpose-copy em { font-family:Georgia, "Songti SC", serif; font-size:clamp(38px, 6vw, 92px); font-weight:400; letter-spacing:-.04em; }

body[data-page="home"] .featured { border-top:1px solid var(--line); }
body[data-page="home"] .featured-grid { gap:16px; }
body[data-page="home"] .section-word { font-family:"Microsoft YaHei", "Noto Sans CJK SC", sans-serif; font-size:clamp(66px, 11vw, 164px); font-weight:800; letter-spacing:-.08em; line-height:.85; text-transform:none; }
body[data-page="home"] .project-tile { min-height:28vw; border-top:1px solid var(--paper); background:var(--ink); }
body[data-page="home"] .project-tile::before { content:""; position:absolute; inset:12px; z-index:2; border:1px solid rgba(243,242,238,.46); pointer-events:none; transition:inset .6s var(--ease), border-color .35s ease; }
body[data-page="home"] .project-tile::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(13,13,15,.86), rgba(13,13,15,.08) 60%, transparent 78%); pointer-events:none; }
body[data-page="home"] .project-tile:hover::before, body[data-page="home"] .project-tile:focus-visible::before { inset:18px; border-color:var(--peach); }
body[data-page="home"] .project-tile img { min-height:28vw; filter:none; }
body[data-page="home"] .project-tile:hover img { filter:none; }
body[data-page="home"] .tile-index { position:absolute; top:21px; left:26px; z-index:3; color:var(--paper); font-size:9px; font-weight:800; letter-spacing:.1em; }
body[data-page="home"] .tile-meta { inset:auto 26px 25px; z-index:3; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:end; color:var(--paper); text-shadow:none; }
body[data-page="home"] .tile-copy { min-width:0; }
body[data-page="home"] .tile-title { display:block; font-family:"Microsoft YaHei", "Noto Sans CJK SC", sans-serif; font-size:clamp(22px, 2.25vw, 34px); letter-spacing:-.04em; line-height:1; text-transform:none; }
body[data-page="home"] .tile-detail { max-width:100%; margin-top:10px; gap:4px; }
body[data-page="home"] .tile-detail small { display:block; font-size:9px; letter-spacing:.04em; }
body[data-page="home"] .tile-description { color:var(--paper); font-family:"Microsoft YaHei", "Noto Sans CJK SC", sans-serif; font-size:12px !important; letter-spacing:0; }
body[data-page="home"] .tile-action { display:inline-flex; align-items:center; gap:7px; align-self:end; color:var(--peach); font-size:11px; font-weight:800; white-space:nowrap; }

body[data-page="home"] .wang-archive-teaser { position:relative; min-height:72vh; border-top:1px solid var(--ink); }
.archive-composition { position:relative; min-height:38vh; display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:24px; }
.archive-rail { display:block; align-self:stretch; padding-inline-end:10px; border-inline-end:1px solid var(--ink); color:var(--ink); font-size:10px; font-weight:800; letter-spacing:.1em; writing-mode:vertical-rl; }
.archive-title { font-family:"Microsoft YaHei", "Noto Sans CJK SC", sans-serif; font-size:clamp(68px, 12vw, 180px); font-weight:800; letter-spacing:-.08em; line-height:.85; text-transform:none; }
body[data-page="home"] .archive-link { display:inline-flex; align-items:center; gap:14px; margin:0; color:var(--ink); font-family:"Microsoft YaHei", "Noto Sans CJK SC", sans-serif; font-size:clamp(26px, 3vw, 44px); letter-spacing:-.06em; line-height:1; text-transform:none; }
body[data-page="home"] .wang-archive-teaser p { max-width:none; margin:0 0 0 auto; padding-top:14px; border-top:1px solid rgba(13,13,15,.45); color:var(--ink); font-family:"Microsoft YaHei", "Noto Sans CJK SC", sans-serif; font-size:clamp(16px, 1.4vw, 20px); font-weight:800; letter-spacing:0; }

body[data-page="home"] .site-footer { border-top:1px solid var(--line); }
body[data-page="home"] .footer-label { color:var(--accent-interactive); }
body[data-page="home"] .footer-links a { position:relative; width:max-content; }
body[data-page="home"] .footer-links a::after { content:""; position:absolute; right:0; bottom:2px; left:0; height:1px; background:var(--blue); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease); }
body[data-page="home"] .footer-links a:hover::after, body[data-page="home"] .footer-links a:focus-visible::after { transform:scaleX(1); transform-origin:left; }
body[data-page="home"] .footer-cta { color:var(--ink); font-family:"Microsoft YaHei", "Noto Sans CJK SC", sans-serif; font-size:clamp(84px, 18vw, 250px); letter-spacing:-.08em; text-transform:none; }

@media (min-width:501px) and (max-width:900px) {
  .hero-index { top:6.6vw; }
  .hero-rail { top:52%; }
  body[data-page="home"] .project-tile, body[data-page="home"] .project-tile img { min-height:34vw; }
  .archive-composition { min-height:420px; }
}

@media (max-width:500px) {
  body[data-page="home"] .site-status-secondary { display:none; }
  .hero-index { top:64px; left:18px; }
  .hero-rail { top:50%; right:18px; font-size:8px; }
  .hero-meta-english { display:none; }
  .purpose-bg-word { right:-18px; bottom:80px; font-size:104px; }
  .purpose-copy { gap:10px; }
  .purpose-copy span { font-size:clamp(52px, 15vw, 78px); }
  .purpose-copy em { font-size:clamp(36px, 10vw, 54px); }
  body[data-page="home"] .section-word { font-size:clamp(58px, 19vw, 86px); }
  body[data-page="home"] .project-tile, body[data-page="home"] .project-tile img { min-height:344px; }
  body[data-page="home"] .project-tile::before { inset:10px; }
  body[data-page="home"] .tile-index { top:19px; left:22px; }
  body[data-page="home"] .tile-meta { inset:auto 22px 22px; grid-template-columns:1fr auto; gap:12px; }
  body[data-page="home"] .tile-title { font-size:24px; }
  body[data-page="home"] .tile-detail { margin-top:8px; }
  body[data-page="home"] .tile-description { font-size:11px !important; line-height:1.35 !important; }
  body[data-page="home"] .tile-action { font-size:10px; }
  .archive-composition { min-height:330px; grid-template-columns:26px minmax(0,1fr); gap:14px; }
  .archive-rail { font-size:8px; }
  .archive-title { font-size:clamp(60px, 20vw, 90px); }
  body[data-page="home"] .archive-link { grid-column:2; font-size:24px; }
  body[data-page="home"] .wang-archive-teaser p { margin-top:24px; font-size:16px; }
  body[data-page="home"] .footer-cta { font-size:82px; }
}

/* P1.6 Home Motion Spine: one scroll-critical Hero and restrained secondary layers. */
:root { --motion-ease:cubic-bezier(0.496, 0.004, 0, 1); --hero-progress:0; }
.site-nav .nav-link span, .site-nav .micro-link span { transition:transform .8s var(--motion-ease) .06s; }
.site-nav .nav-link span + span, .site-nav .micro-link span + span { transition:transform .8s var(--motion-ease); }

body[data-page="home"] .home-hero[data-home-motion="hero"] { min-height:220svh; padding:0; overflow:clip; }
body[data-page="home"] .hero-motion-frame { position:sticky; top:0; min-height:100svh; padding:5.2vw 2vw 2vw; overflow:clip; isolation:isolate; }
body[data-page="home"] .hero-stage { position:absolute; inset:0; display:block; height:100%; }
body[data-page="home"] .hero-stage > .hero-side { position:absolute; top:50%; z-index:1; transform:translateY(-50%); transition:opacity .45s var(--motion-ease), transform .65s var(--motion-ease); }
body[data-page="home"] .hero-stage > .hero-side:first-child { left:2vw; }
body[data-page="home"] .hero-stage > .hero-side:last-child { right:2vw; }
body[data-page="home"] .hero-motion-frame.is-expanding .hero-stage > .hero-side:first-child { transform:translate(-2vw,-50%); opacity:.32; }
body[data-page="home"] .hero-motion-frame.is-expanding .hero-stage > .hero-side:last-child { transform:translate(2vw,-50%); opacity:.32; }
body[data-page="home"] .hero-media-wrap { position:absolute; left:50%; top:50%; z-index:2; width:var(--hero-media-width,32.4vw); height:var(--hero-media-height,20.25vw); margin:0; transform:translate(-50%,-50%); }
body[data-page="home"] .hero-media-frame { position:absolute; inset:0; overflow:hidden; background:var(--ink); }
body[data-page="home"] .hero-media { width:100%; height:100%; min-height:0; object-fit:cover; transition:none; }
body[data-page="home"] .hero-media-wrap .hero-meta { position:absolute; top:-18px; left:0; z-index:3; width:100%; margin:0; }
body[data-page="home"] .hero-motion-note { position:absolute; right:0; bottom:10px; z-index:3; color:var(--paper); font-size:8px; font-weight:800; letter-spacing:.08em; opacity:.68; }
body[data-page="home"] .hero-motion-frame.is-fullscreen .hero-motion-note { opacity:.42; }
body[data-page="home"] .hero-subline, body[data-page="home"] .hero-statement { z-index:3; }

body[data-page="home"] .home-name .hero-char { display:inline-block; opacity:0; transform:translateY(105%); transition:transform .65s var(--motion-ease), opacity .35s ease; transition-delay:calc(var(--char-delay, 0) * 1ms); }
body[data-page="home"] .home-name.is-revealed .hero-char { opacity:1; transform:translateY(0); }
body[data-page="home"] .home-name .hero-char:nth-child(1) { --char-delay:0; }
body[data-page="home"] .home-name .hero-char:nth-child(2) { --char-delay:35; }
body[data-page="home"] .home-name .hero-char:nth-child(3) { --char-delay:70; }
body[data-page="home"] .home-name .hero-char:nth-child(4) { --char-delay:105; }
body[data-page="home"] .home-name .hero-char:nth-child(5) { --char-delay:140; }
body[data-page="home"] .home-name .hero-char:nth-child(6) { --char-delay:175; }
body[data-page="home"] .home-name .hero-char:nth-child(7) { --char-delay:210; }
body[data-page="home"] .home-name .hero-char:nth-child(8) { --char-delay:245; }
body[data-page="home"] .home-name .hero-char:nth-child(9) { --char-delay:280; }
body[data-page="home"] .home-name .hero-char:nth-child(10) { --char-delay:315; }
body[data-page="home"] .hero-motion-frame.is-fullscreen .home-name .hero-char { opacity:.16; transform:translateY(-105%); }

body[data-page="home"] .home-purpose[data-manifesto] { min-height:100svh; padding:8vw 2vw; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
body[data-page="home"] .manifesto-copy { position:relative; z-index:1; display:flex; flex-direction:column; gap:clamp(10px,1.2vw,20px); width:min(1200px,100%); margin:0 auto; font-family:"Microsoft YaHei","Noto Sans CJK SC",sans-serif; font-size:clamp(48px,8.2vw,124px); font-weight:800; letter-spacing:-.08em; line-height:.82; }
body[data-page="home"] .manifesto-line { width:max-content; max-width:100%; overflow:clip; }
body[data-page="home"] .manifesto-line:nth-child(2) { align-self:flex-end; }
body[data-page="home"] .manifesto-line:nth-child(3) { align-self:center; }
body[data-page="home"] .manifesto-line > span { display:block; opacity:0; transform:translateX(-10vw); transition:transform .8s var(--motion-ease), opacity .35s ease; }
body[data-page="home"] .manifesto-line:nth-child(2) > span { transform:translateX(10vw); }
body[data-page="home"] .manifesto-line:nth-child(3) > span { transform:translateY(60%); }
body[data-page="home"] .manifesto-line.is-inview > span { opacity:1; transform:translate(0,0); }
body[data-page="home"] .manifesto-line:nth-child(2).is-inview > span { transition-delay:.08s; }
body[data-page="home"] .manifesto-line:nth-child(3).is-inview > span { transition-delay:.16s; }

body[data-page="home"] .featured[data-featured-works] { position:relative; }
body[data-page="home"] .project-tile { --project-parallax:0px; }
body[data-page="home"] .project-tile img[data-motion-media] { transform:translate3d(0,var(--project-parallax),0) scale(1); transition:transform .9s var(--motion-ease), filter .5s ease; will-change:auto; }
body[data-page="home"] .project-tile.is-active img[data-motion-media] { will-change:transform; }
body[data-page="home"] .project-tile:hover img[data-motion-media], body[data-page="home"] .project-tile:focus-visible img[data-motion-media] { transform:translate3d(0,var(--project-parallax),0) scale(1.035); }
body[data-page="home"] .featured-cta { display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-top:clamp(28px,5vw,72px); padding-top:16px; border-top:1px solid var(--line); color:var(--ink); font-size:clamp(18px,2vw,28px); font-weight:800; letter-spacing:-.04em; }
body[data-page="home"] .featured-cta span { transition:transform .35s var(--motion-ease); }
body[data-page="home"] .featured-cta:hover span, body[data-page="home"] .featured-cta:focus-visible span { transform:translateX(6px); }

body[data-page="home"] .footer-marquee { overflow:hidden; width:100%; color:var(--ink); }
body[data-page="home"] .footer-marquee-track { display:flex; width:max-content; white-space:nowrap; animation:wang-home-marquee 28s linear infinite; }
body[data-page="home"] .footer-marquee-track > span { flex:0 0 auto; padding-right:4vw; }
@keyframes wang-home-marquee { to { transform:translate3d(-25%,0,0); } }

@media (max-width:500px) {
  body[data-page="home"] .home-hero[data-home-motion="hero"] { min-height:100svh; }
  body[data-page="home"] .hero-motion-frame { position:relative; min-height:100svh; padding:64px 18px 18px; }
  body[data-page="home"] .hero-stage { position:relative; inset:auto; display:grid; grid-template-columns:1fr; grid-template-rows:auto auto auto; gap:12px; height:auto; margin-top:17vh; }
  body[data-page="home"] .hero-stage > .hero-side { position:relative; top:auto; right:auto; left:auto; transform:none; text-align:center; }
  body[data-page="home"] .hero-stage > .hero-side:first-child { grid-row:1; }
  body[data-page="home"] .hero-media-wrap { position:relative; top:auto; left:auto; width:100%; height:auto; aspect-ratio:16/10; transform:none; }
  body[data-page="home"] .hero-stage > .hero-side:last-child { grid-row:3; }
  body[data-page="home"] .hero-motion-note { display:none; }
  body[data-page="home"] .home-purpose[data-manifesto] { min-height:100svh; padding:96px 18px; }
  body[data-page="home"] .manifesto-copy { gap:12px; font-size:clamp(42px,13vw,70px); line-height:.86; letter-spacing:-.07em; }
  body[data-page="home"] .manifesto-line, body[data-page="home"] .manifesto-line:nth-child(2), body[data-page="home"] .manifesto-line:nth-child(3) { align-self:flex-start; width:100%; }
  body[data-page="home"] .manifesto-line > span, body[data-page="home"] .manifesto-line:nth-child(2) > span, body[data-page="home"] .manifesto-line:nth-child(3) > span { transform:translateY(40%); }
  body[data-page="home"] .featured-cta { justify-content:flex-start; font-size:20px; }
  body[data-page="home"] .footer-marquee { font-size:82px; }
  body[data-page="home"] .footer-marquee-track { animation-duration:32s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto !important; }
  body[data-page="home"] .home-hero[data-home-motion="hero"] { min-height:100svh; }
  body[data-page="home"] .hero-motion-frame { position:relative; }
  body[data-page="home"] .hero-media-wrap { width:32.4vw; height:20.25vw; transform:translate(-50%,-50%); }
  body[data-page="home"] .home-name .hero-char, body[data-page="home"] .home-name.is-revealed .hero-char, body[data-page="home"] .hero-motion-frame.is-fullscreen .home-name .hero-char { opacity:1; transform:none; transition:none; }
  body[data-page="home"] .manifesto-line > span, body[data-page="home"] .manifesto-line:nth-child(2) > span, body[data-page="home"] .manifesto-line:nth-child(3) > span { opacity:1; transform:none; transition:none; }
  body[data-page="home"] .project-tile img[data-motion-media], body[data-page="home"] .project-tile:hover img[data-motion-media], body[data-page="home"] .project-tile:focus-visible img[data-motion-media] { transform:none; transition:none; }
  body[data-page="home"] .footer-marquee-track { animation:none; transform:none; }
}

/* P1.7 Home Visual Refinement: Chinese-first hierarchy, spatial takeover, and a restrained archive preview. */
:root {
  --font-display-en:"Syne Portfolio","Syne",sans-serif;
  --font-display-cn:"Noto Sans SC","Noto Sans CJK SC","Source Han Sans SC","Microsoft YaHei",sans-serif;
  --font-body-cn:"Noto Sans SC","Noto Sans CJK SC","Source Han Sans SC","Microsoft YaHei",sans-serif;
  --font-editorial-cn:"Noto Serif SC Portfolio","Noto Serif SC",serif;
  --font-ui-en:"ManropeLocal","Manrope",Arial,sans-serif;
  --font-human-cn:"LXGW WenKai Portfolio","LXGW WenKai",cursive;
}

body[data-identity="wang-xiuli"] { font-family:var(--font-body-cn); }
body[data-page="home"] .home-name,
body[data-page="home"] .section-word,
body[data-page="home"] .manifesto-copy,
body[data-page="home"] .archive-title,
body[data-page="home"] .footer-marquee { font-family:var(--font-display-cn); font-weight:800; }
body[data-page="home"] .site-nav,
body[data-page="home"] .site-status,
body[data-page="home"] .hero-meta,
body[data-page="home"] .hero-rail,
body[data-page="home"] .hero-subline,
body[data-page="home"] .hero-statement,
body[data-page="home"] .scroll-cue,
body[data-page="home"] .section-kicker,
body[data-page="home"] .tile-description,
body[data-page="home"] .archive-rail,
body[data-page="home"] .archive-preview-system,
body[data-page="home"] .footer-links,
body[data-page="home"] .footer-bottom { font-family:var(--font-body-cn); font-weight:500; }
body[data-page="home"] .hero-meta,
body[data-page="home"] .section-kicker,
body[data-page="home"] .tile-index,
body[data-page="home"] .archive-rail,
body[data-page="home"] .footer-label { font-weight:500; }
body[data-page="home"] .tile-description { font-weight:500 !important; }

body[data-page="home"] .home-hero[data-home-motion="hero"] { min-height:230svh; }
body[data-page="home"] .hero-motion-frame { padding:clamp(72px,5.2vw,96px) 2vw 2vw; }
body[data-page="home"] .hero-stage > .hero-side { font-size:clamp(52px,5.8vw,96px); letter-spacing:-.08em; }
body[data-page="home"] .hero-stage > .hero-side:first-child { left:calc(50% - 34vw); top:46%; }
body[data-page="home"] .hero-stage > .hero-side:last-child { right:calc(50% - 34vw); top:56%; }
body[data-page="home"] .hero-motion-frame.is-expanding .hero-stage > .hero-side:first-child { transform:translate(-1.5vw,-50%); }
body[data-page="home"] .hero-motion-frame.is-expanding .hero-stage > .hero-side:last-child { transform:translate(1.5vw,-50%); }
body[data-page="home"] .hero-media-wrap { top:var(--hero-media-top,50%); transform:translate(-50%,calc(-50% + var(--hero-translate-y,0px))); }
body[data-page="home"] .hero-media-frame { border-radius:var(--hero-radius,14px); transition:border-radius .45s var(--motion-ease); }
body[data-page="home"] .hero-media { border-radius:inherit; }
body[data-page="home"] .hero-media-wrap .hero-meta { padding-bottom:6px; border-bottom:1px solid rgba(73,123,255,.5); }
body[data-page="home"] .hero-subline { max-width:31vw; font-weight:700; }
body[data-page="home"] .hero-statement { max-width:29vw; font-weight:700; }

body[data-page="home"] .home-purpose[data-manifesto] { min-height:100svh; background:var(--lavender); }
body[data-page="home"] .manifesto-copy { gap:clamp(18px,2vw,30px); font-size:clamp(48px,6.2vw,94px); letter-spacing:-.08em; line-height:.94; }
body[data-page="home"] .manifesto-line { width:max-content; max-width:100%; }
body[data-page="home"] .manifesto-line:first-child { align-self:flex-start; }
body[data-page="home"] .manifesto-line:nth-child(2) { align-self:flex-end; }
body[data-page="home"] .manifesto-line > span { transform:translateX(-8vw); }
body[data-page="home"] .manifesto-line:nth-child(2) > span { transform:translateX(8vw); }
body[data-page="home"] .manifesto-line.is-inview > span { transform:translateX(0); }
body[data-page="home"] .purpose-bg-word,
body[data-page="home"] [data-manifesto-ghost] { font-family:var(--font-display-cn); font-size:clamp(100px,15vw,220px); font-weight:800; opacity:.1; }

body[data-page="home"] .featured[data-featured-works] { background:var(--cream); }
body[data-page="home"] .featured .section-word { font-size:clamp(72px,10.5vw,156px); }

body[data-page="home"] .wang-archive-teaser { min-height:78vh; padding-bottom:8vw; background:var(--peach); }
body[data-page="home"] .archive-composition { min-height:52vh; grid-template-columns:44px minmax(0,1fr) minmax(260px,32vw); grid-template-rows:1fr auto; align-items:center; gap:clamp(16px,2.4vw,36px); }
body[data-page="home"] .archive-title { align-self:center; font-size:clamp(78px,11.5vw,172px); }
body[data-page="home"] .archive-link { grid-column:2; grid-row:2; align-self:end; justify-self:start; font-family:var(--font-body-cn); font-size:clamp(24px,2.5vw,38px); font-weight:800; }
body[data-page="home"] .archive-arrow { display:inline-block; transition:transform .35s var(--motion-ease); }
body[data-page="home"] .archive-link:hover .archive-arrow, body[data-page="home"] .archive-link:focus-visible .archive-arrow { transform:translate(4px,-4px); }
body[data-page="home"] .archive-preview-system { grid-column:3; grid-row:1 / span 2; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(70px,.65fr); gap:10px; align-self:center; }
body[data-page="home"] .archive-preview-system figure { margin:0; }
body[data-page="home"] .archive-preview-system img { display:block; width:100%; object-fit:cover; border:1px solid rgba(13,13,15,.45); }
body[data-page="home"] .archive-preview-primary img { aspect-ratio:1.08; }
body[data-page="home"] .archive-preview-small-list { display:grid; grid-template-rows:repeat(2,1fr); gap:10px; }
body[data-page="home"] .archive-preview-small img { height:100%; min-height:0; aspect-ratio:1; }
body[data-page="home"] .archive-preview-system figcaption { margin-top:6px; font-size:10px; font-weight:500; letter-spacing:.03em; }
body[data-page="home"] .wang-archive-teaser > p { max-width:430px; margin:0 0 0 auto; font-family:var(--font-body-cn); font-size:clamp(16px,1.4vw,20px); font-weight:700; }

body[data-page="home"] .site-footer { background:var(--ink); color:var(--paper); }
body[data-page="home"] .footer-label { color:var(--blue); }
body[data-page="home"] .footer-links a::after { background:var(--lavender); }
body[data-page="home"] .footer-marquee { color:var(--paper); letter-spacing:-.08em; }

@media (max-width:900px) and (min-width:501px) {
  body[data-page="home"] .hero-stage > .hero-side:first-child { left:4vw; }
  body[data-page="home"] .hero-stage > .hero-side:last-child { right:4vw; }
  body[data-page="home"] .hero-stage > .hero-side { font-size:clamp(46px,6.5vw,70px); }
  body[data-page="home"] .manifesto-copy { font-size:clamp(54px,9vw,90px); }
  body[data-page="home"] .archive-composition { grid-template-columns:34px minmax(0,1fr) minmax(190px,30vw); }
}

@media (max-width:500px) {
  body[data-page="home"] .home-hero[data-home-motion="hero"] { min-height:160svh; }
  body[data-page="home"] .hero-motion-frame { position:sticky; min-height:100svh; padding:64px 18px 18px; }
  body[data-page="home"] .home-name { width:100%; max-width:100%; font-size:clamp(74px,25.5vw,100px); line-height:.78; white-space:normal; }
  body[data-page="home"] .hero-stage { position:absolute; inset:0; display:block; height:100%; margin:0; }
  body[data-page="home"] .hero-stage > .hero-side { position:absolute; right:auto; left:auto; top:auto; font-size:clamp(44px,12vw,58px); }
  body[data-page="home"] .hero-stage > .hero-side:first-child { left:18px; top:50%; transform:translateY(-50%); }
  body[data-page="home"] .hero-stage > .hero-side:last-child { right:18px; top:84%; transform:translateY(-50%); }
  body[data-page="home"] .hero-motion-frame.is-expanding .hero-stage > .hero-side:first-child { transform:translate(-10px,-50%); opacity:.24; }
  body[data-page="home"] .hero-motion-frame.is-expanding .hero-stage > .hero-side:last-child { transform:translate(10px,-50%); opacity:.24; }
  body[data-page="home"] .hero-media-wrap { position:absolute; top:var(--hero-media-top,65%); left:50%; width:var(--hero-media-width,calc(100vw - 36px)); height:var(--hero-media-height,calc((100vw - 36px) * .625)); aspect-ratio:auto; transform:translate(-50%,calc(-50% + var(--hero-translate-y,0px))); }
  body[data-page="home"] .hero-subline { left:18px; right:auto; top:35%; bottom:auto; max-width:52vw; font-size:10px; text-align:left; }
  body[data-page="home"] .hero-statement { right:18px; bottom:8%; max-width:72vw; font-size:10px; text-align:right; }
  body[data-page="home"] .scroll-cue { bottom:2.5%; font-size:9px; }
  body[data-page="home"] .manifesto-copy { gap:16px; font-size:clamp(40px,11.5vw,60px); line-height:.92; letter-spacing:-.08em; }
  body[data-page="home"] .manifesto-line,
  body[data-page="home"] .manifesto-line:nth-child(2) { align-self:flex-start; width:100%; }
  body[data-page="home"] .manifesto-line:nth-child(2) { padding-left:10vw; }
  body[data-page="home"] .archive-composition { min-height:650px; grid-template-columns:24px minmax(0,1fr); grid-template-rows:auto auto 1fr; gap:14px; }
  body[data-page="home"] .archive-title { font-size:clamp(60px,18vw,88px); }
  body[data-page="home"] .archive-link { grid-column:2; justify-self:start; font-size:24px; }
  body[data-page="home"] .archive-preview-system { grid-column:2; grid-row:3; display:grid; grid-template-columns:1.25fr 1fr; align-self:start; width:100%; }
  body[data-page="home"] .archive-preview-small-list { grid-template-rows:repeat(2,1fr); }
  body[data-page="home"] .archive-preview-system figcaption { font-size:9px; }
  body[data-page="home"] .wang-archive-teaser > p { margin:0; font-size:16px; }
  body[data-page="home"] .footer-marquee { font-size:56px; }
  body[data-page="home"] .footer-marquee-track { animation-duration:32s; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .home-hero[data-home-motion="hero"] { min-height:100svh; }
  body[data-page="home"] .hero-motion-frame { position:relative; }
  body[data-page="home"] .hero-media-wrap { top:50%; width:calc(100vw - 36px); height:auto; aspect-ratio:16/10; transform:translate(-50%,-50%); }
  body[data-page="home"] .hero-media-frame { border-radius:0; transition:none; }
  body[data-page="home"] .hero-media { border-radius:0; }
  body[data-page="home"] .hero-stage > .hero-side { opacity:1; transform:translateY(-50%); transition:none; }
  body[data-page="home"] .home-name .hero-char,
  body[data-page="home"] .home-name.is-revealed .hero-char { opacity:1; transform:none; transition:none; }
  body[data-page="home"] .manifesto-line > span,
  body[data-page="home"] .manifesto-line:nth-child(2) > span { opacity:1; transform:none; transition:none; }
  body[data-page="home"] .project-tile img[data-motion-media],
  body[data-page="home"] .project-tile:hover img[data-motion-media],
  body[data-page="home"] .project-tile:focus-visible img[data-motion-media] { transform:none; transition:none; }
  body[data-page="home"] .footer-marquee-track { animation:none; transform:none; }
}

/* P1.8A Hero Takeover Correction: separate the fullscreen state from the opening composition. */
body[data-page="home"] .hero-motion-frame {
  --hero-support-opacity:1;
  --hero-support-y:0px;
}

body[data-page="home"] .hero-motion-frame.is-expanding .home-name,
body[data-page="home"] .hero-motion-frame.is-expanding .hero-subline,
body[data-page="home"] .hero-motion-frame.is-expanding .hero-statement,
body[data-page="home"] .hero-motion-frame.is-expanding .hero-rail,
body[data-page="home"] .hero-motion-frame.is-expanding .hero-index,
body[data-page="home"] .hero-motion-frame.is-expanding .scroll-cue {
  opacity:var(--hero-support-opacity);
  transform:translate3d(0,var(--hero-support-y),0);
  transition:opacity .35s var(--motion-ease), transform .65s var(--motion-ease);
}

body[data-page="home"] .hero-motion-frame.is-expanding .hero-stage > .hero-side {
  opacity:var(--hero-support-opacity);
  transition:opacity .35s var(--motion-ease), transform .65s var(--motion-ease);
}
body[data-page="home"] .hero-motion-frame.is-expanding .hero-stage > .hero-side:first-child {
  opacity:var(--hero-support-opacity);
  transform:translate3d(calc(-1.5vw + var(--hero-support-y) * .35),-50%,0);
}
body[data-page="home"] .hero-motion-frame.is-expanding .hero-stage > .hero-side:last-child {
  opacity:var(--hero-support-opacity);
  transform:translate3d(calc(1.5vw + var(--hero-support-y) * .35),-50%,0);
}

body[data-page="home"] .hero-motion-frame.is-fullscreen-hold .home-name,
body[data-page="home"] .hero-motion-frame.is-fullscreen-hold .hero-stage > .hero-side,
body[data-page="home"] .hero-motion-frame.is-fullscreen-hold .hero-subline,
body[data-page="home"] .hero-motion-frame.is-fullscreen-hold .hero-statement,
body[data-page="home"] .hero-motion-frame.is-fullscreen-hold .hero-rail,
body[data-page="home"] .hero-motion-frame.is-fullscreen-hold .hero-index,
body[data-page="home"] .hero-motion-frame.is-fullscreen-hold .scroll-cue {
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}

body[data-page="home"] .hero-motion-frame.is-fullscreen-hold .hero-media-wrap .hero-meta {
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}
body[data-page="home"] .hero-motion-frame.is-fullscreen-hold .hero-media-wrap {
  z-index:10;
}
body[data-page="home"] .hero-motion-frame.is-fullscreen-hold .hero-media-frame,
body[data-page="home"] .hero-motion-frame.is-fullscreen-hold .hero-media {
  border-radius:0;
}

@media (max-width:500px) {
  body[data-page="home"] .hero-motion-frame.is-expanding .hero-stage > .hero-side:first-child {
    opacity:var(--hero-support-opacity);
    transform:translate3d(-10px,calc(-50% + var(--hero-support-y)),0);
  }
  body[data-page="home"] .hero-motion-frame.is-expanding .hero-stage > .hero-side:last-child {
    opacity:var(--hero-support-opacity);
    transform:translate3d(10px,calc(-50% + var(--hero-support-y)),0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .hero-motion-frame.is-expanding .home-name,
  body[data-page="home"] .hero-motion-frame.is-expanding .hero-subline,
  body[data-page="home"] .hero-motion-frame.is-expanding .hero-statement,
  body[data-page="home"] .hero-motion-frame.is-expanding .hero-rail,
  body[data-page="home"] .hero-motion-frame.is-expanding .hero-index,
  body[data-page="home"] .hero-motion-frame.is-expanding .scroll-cue,
  body[data-page="home"] .hero-motion-frame.is-expanding .hero-stage > .hero-side {
    opacity:1;
    transform:none;
    transition:none;
  }
  body[data-page="home"] .hero-motion-frame.is-fullscreen-hold .home-name,
  body[data-page="home"] .hero-motion-frame.is-fullscreen-hold .hero-stage > .hero-side,
  body[data-page="home"] .hero-motion-frame.is-fullscreen-hold .hero-subline,
  body[data-page="home"] .hero-motion-frame.is-fullscreen-hold .hero-statement,
  body[data-page="home"] .hero-motion-frame.is-fullscreen-hold .hero-rail,
  body[data-page="home"] .hero-motion-frame.is-fullscreen-hold .hero-index,
  body[data-page="home"] .hero-motion-frame.is-fullscreen-hold .scroll-cue {
    visibility:visible;
    opacity:1;
    pointer-events:auto;
  }
  body[data-page="home"] .hero-motion-frame.is-fullscreen-hold .hero-media-wrap .hero-meta {
    visibility:visible;
    opacity:1;
    pointer-events:auto;
  }
}

/* P1.8A Hero takeover architecture: the source composition and viewport takeover are separate layers. */
body[data-page="home"] .hero-motion-frame {
  --hero-title-y:0px;
  --hero-title-opacity:1;
  --hero-brand-x:0px;
  --hero-brand-y:0px;
  --hero-brand-opacity:1;
  --hero-content-x:0px;
  --hero-content-y:0px;
  --hero-content-opacity:1;
  --hero-quick-y:0px;
  --hero-quick-opacity:1;
  --hero-takeover-left:var(--hero-takeover-source-left,0px);
  --hero-takeover-top:var(--hero-takeover-source-top,0px);
  --hero-takeover-width:var(--hero-takeover-source-width,32.4vw);
  --hero-takeover-height:var(--hero-takeover-source-height,20.25vw);
  --hero-takeover-radius:14px;
}

body[data-page="home"] .hero-takeover-layer {
  position:absolute;
  inset:0;
  z-index:12;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  overflow:visible;
}
body[data-page="home"] .hero-takeover-layer.is-visible {
  visibility:visible;
  opacity:1;
}
body[data-page="home"] .hero-takeover-frame {
  position:absolute;
  left:var(--hero-takeover-left);
  top:var(--hero-takeover-top);
  width:var(--hero-takeover-width);
  height:var(--hero-takeover-height);
  overflow:hidden;
  border-radius:var(--hero-takeover-radius);
  background:var(--ink);
  will-change:left, top, width, height;
  transition:none;
}
body[data-page="home"] .hero-takeover-frame .hero-media,
body[data-page="home"] .hero-takeover-media {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
}
body[data-page="home"] .hero-media-placeholder {
  display:none;
  position:absolute;
  inset:0;
  background:var(--ink);
}
body[data-page="home"] .hero-media-placeholder.is-active { display:block; }

/* State B: independent exits keep the source media static while the composition clears. */
body[data-page="home"] .hero-motion-frame.is-hero-composition-exit .home-name {
  opacity:var(--hero-title-opacity);
  transform:translate3d(0,var(--hero-title-y),0);
  transition:opacity .32s var(--motion-ease), transform .68s var(--motion-ease);
}
body[data-page="home"] .hero-motion-frame.is-hero-composition-exit .hero-stage > .hero-side:first-child {
  opacity:var(--hero-brand-opacity);
  transform:translate3d(var(--hero-brand-x),calc(-50% + var(--hero-brand-y)),0);
  transition:opacity .25s ease, transform .56s var(--motion-ease);
}
body[data-page="home"] .hero-motion-frame.is-hero-composition-exit .hero-stage > .hero-side:last-child {
  opacity:var(--hero-content-opacity);
  transform:translate3d(var(--hero-content-x),calc(-50% + var(--hero-content-y)),0);
  transition:opacity .25s ease, transform .62s var(--motion-ease);
}
body[data-page="home"] .hero-motion-frame.is-hero-composition-exit .hero-subline,
body[data-page="home"] .hero-motion-frame.is-hero-composition-exit .hero-statement,
body[data-page="home"] .hero-motion-frame.is-hero-composition-exit .hero-rail,
body[data-page="home"] .hero-motion-frame.is-hero-composition-exit .hero-index,
body[data-page="home"] .hero-motion-frame.is-hero-composition-exit .scroll-cue {
  opacity:var(--hero-quick-opacity);
  transform:translate3d(0,var(--hero-quick-y),0);
  transition:opacity .2s ease, transform .42s var(--motion-ease);
}

/* State C: the original stage is removed before the dedicated takeover layer grows. */
body[data-page="home"] .hero-motion-frame.is-hero-takeover .hero-stage,
body[data-page="home"] .hero-motion-frame.is-hero-takeover .hero-media-wrap {
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}
body[data-page="home"] .hero-motion-frame.is-hero-takeover .home-name,
body[data-page="home"] .hero-motion-frame.is-hero-takeover .hero-subline,
body[data-page="home"] .hero-motion-frame.is-hero-takeover .hero-statement,
body[data-page="home"] .hero-motion-frame.is-hero-takeover .hero-rail,
body[data-page="home"] .hero-motion-frame.is-hero-takeover .hero-index,
body[data-page="home"] .hero-motion-frame.is-hero-takeover .scroll-cue {
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}

/* State D: a real viewport takeover hold, not a resized child of the source stage. */
body[data-page="home"] .hero-motion-frame.is-fullscreen-hold .hero-takeover-layer {
  visibility:visible;
  opacity:1;
}
body[data-page="home"] .hero-motion-frame.is-fullscreen-hold .hero-takeover-frame {
  left:0;
  top:0;
  width:100vw;
  height:100vh;
  border-radius:0;
}

/* State E: release the sticky pin after the hold and let the fullscreen layer leave with document flow. */
body[data-page="home"] .hero-motion-frame.is-hero-handoff {
  position:relative;
  top:var(--hero-handoff-top,0px);
}
body[data-page="home"] .hero-motion-frame.is-hero-handoff .hero-takeover-layer {
  visibility:visible;
  opacity:1;
}
body[data-page="home"] .hero-motion-frame.is-hero-handoff .home-name,
body[data-page="home"] .hero-motion-frame.is-hero-handoff .hero-stage,
body[data-page="home"] .hero-motion-frame.is-hero-handoff .hero-subline,
body[data-page="home"] .hero-motion-frame.is-hero-handoff .hero-statement,
body[data-page="home"] .hero-motion-frame.is-hero-handoff .hero-rail,
body[data-page="home"] .hero-motion-frame.is-hero-handoff .hero-index,
body[data-page="home"] .hero-motion-frame.is-hero-handoff .scroll-cue {
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .hero-takeover-layer,
  body[data-page="home"] .hero-takeover-layer.is-visible {
    visibility:hidden !important;
    opacity:0 !important;
  }
  body[data-page="home"] .hero-motion-frame.is-hero-handoff {
    position:relative;
    top:auto;
  }
  body[data-page="home"] .hero-motion-frame.is-hero-composition-exit .home-name,
  body[data-page="home"] .hero-motion-frame.is-hero-composition-exit .hero-stage > .hero-side:first-child,
  body[data-page="home"] .hero-motion-frame.is-hero-composition-exit .hero-stage > .hero-side:last-child,
  body[data-page="home"] .hero-motion-frame.is-hero-composition-exit .hero-subline,
  body[data-page="home"] .hero-motion-frame.is-hero-composition-exit .hero-statement,
  body[data-page="home"] .hero-motion-frame.is-hero-composition-exit .hero-rail,
  body[data-page="home"] .hero-motion-frame.is-hero-composition-exit .hero-index,
  body[data-page="home"] .hero-motion-frame.is-hero-composition-exit .scroll-cue {
    visibility:visible;
    opacity:1;
    transform:none;
    pointer-events:auto;
    transition:none;
  }
  body[data-page="home"] .hero-motion-frame.is-hero-takeover .hero-stage,
  body[data-page="home"] .hero-motion-frame.is-hero-takeover .hero-media-wrap {
    visibility:visible;
    opacity:1;
    pointer-events:auto;
  }
}

/* P1.8A-3: keep the media and Manifesto surfaces touching through handoff. */
body[data-page="home"] .hero-manifesto-handoff {
  position:absolute;
  inset:0;
  z-index:13;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  overflow:hidden;
  background:transparent;
}
body[data-page="home"] .hero-manifesto-handoff.is-visible {
  visibility:visible;
  opacity:1;
}
body[data-page="home"] .hero-manifesto-handoff-content {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:100%;
  transform:translate3d(0,var(--hero-manifesto-handoff-y,100vh),0);
  overflow:hidden;
  background:var(--lavender);
}
body[data-page="home"] .hero-manifesto-handoff-content .manifesto-line > span {
  opacity:1;
  transform:none;
  transition:none;
}
body[data-page="home"] .hero-manifesto-handoff.is-fixed {
  position:fixed;
  inset:0;
  z-index:20;
  visibility:visible;
  opacity:1;
}
body[data-page="home"] .hero-manifesto-handoff.is-fixed .hero-manifesto-handoff-content {
  transform:translate3d(0,0,0);
}
body[data-page="home"] .hero-motion-frame.is-hero-handoff:not(.is-handoff-released) {
  position:sticky;
  top:0;
}
body[data-page="home"] .hero-motion-frame.is-hero-handoff:not(.is-handoff-released) .hero-takeover-frame {
  transform:translate3d(0,var(--hero-handoff-media-y,0px),0);
}
body[data-page="home"] .hero-motion-frame.is-hero-handoff.is-handoff-released {
  position:relative;
  top:auto;
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .hero-manifesto-handoff,
  body[data-page="home"] .hero-manifesto-handoff.is-visible,
  body[data-page="home"] .hero-manifesto-handoff.is-fixed {
    visibility:hidden !important;
    opacity:0 !important;
  }
  body[data-page="home"] .hero-motion-frame.is-hero-handoff:not(.is-handoff-released) {
    position:relative;
    top:auto;
  }
}

/* P1.8B: scroll-linked Manifesto typography entrance. The handoff clone above stays static. */
body[data-page="home"] .home-purpose[data-manifesto] {
  --manifesto-kicker-opacity:0;
  --manifesto-kicker-x:0px;
  --manifesto-kicker-y:0px;
  --manifesto-line-one-opacity:0;
  --manifesto-line-one-x:0px;
  --manifesto-line-one-y:0px;
  --manifesto-line-two-opacity:0;
  --manifesto-line-two-x:0px;
  --manifesto-line-two-y:0px;
  --manifesto-ghost-opacity:0;
  --manifesto-ghost-x:0px;
  --manifesto-ghost-y:0px;
}
body[data-page="home"] .home-purpose[data-manifesto] .section-kicker[data-manifesto-kicker] {
  opacity:var(--manifesto-kicker-opacity);
  transform:translate3d(var(--manifesto-kicker-x),var(--manifesto-kicker-y),0);
  will-change:opacity,transform;
}
body[data-page="home"] .home-purpose[data-manifesto] .manifesto-line-one > span,
body[data-page="home"] .home-purpose[data-manifesto] .manifesto-line-two > span {
  opacity:var(--manifesto-line-one-opacity);
  transform:translate3d(var(--manifesto-line-one-x),var(--manifesto-line-one-y),0);
  will-change:opacity,transform;
}
body[data-page="home"] .home-purpose[data-manifesto] .manifesto-line-two > span {
  opacity:var(--manifesto-line-two-opacity);
  transform:translate3d(var(--manifesto-line-two-x),var(--manifesto-line-two-y),0);
}
body[data-page="home"] .home-purpose[data-manifesto] [data-manifesto-ghost] {
  opacity:calc(.1 * var(--manifesto-ghost-opacity));
  transform:translate3d(var(--manifesto-ghost-x),var(--manifesto-ghost-y),0);
  will-change:opacity,transform;
}
body[data-page="home"] .home-purpose[data-manifesto].is-revealing .section-kicker[data-manifesto-kicker],
body[data-page="home"] .home-purpose[data-manifesto].is-revealing .manifesto-line > span,
body[data-page="home"] .home-purpose[data-manifesto].is-revealing [data-manifesto-ghost] {
  transition:none;
}
body[data-page="home"] .home-purpose[data-manifesto].is-settled .section-kicker[data-manifesto-kicker],
body[data-page="home"] .home-purpose[data-manifesto].is-settled .manifesto-line-one > span,
body[data-page="home"] .home-purpose[data-manifesto].is-settled .manifesto-line-two > span,
body[data-page="home"] .home-purpose[data-manifesto].is-settled [data-manifesto-ghost] {
  transform:none;
  will-change:auto;
}
body[data-page="home"] .home-purpose[data-manifesto].is-settled .section-kicker[data-manifesto-kicker],
body[data-page="home"] .home-purpose[data-manifesto].is-settled .manifesto-line-one > span,
body[data-page="home"] .home-purpose[data-manifesto].is-settled .manifesto-line-two > span {
  opacity:1;
}
body[data-page="home"] .home-purpose[data-manifesto].is-settled [data-manifesto-ghost] {
  opacity:.1;
}
body[data-page="home"] .hero-manifesto-handoff-content.is-revealing .section-kicker[data-manifesto-kicker],
body[data-page="home"] .hero-manifesto-handoff-content.is-revealing .manifesto-line > span,
body[data-page="home"] .hero-manifesto-handoff-content.is-revealing [data-manifesto-ghost] {
  transition:none;
}
body[data-page="home"] .hero-manifesto-handoff-content.is-settled .section-kicker[data-manifesto-kicker],
body[data-page="home"] .hero-manifesto-handoff-content.is-settled .manifesto-line-one > span,
body[data-page="home"] .hero-manifesto-handoff-content.is-settled .manifesto-line-two > span,
body[data-page="home"] .hero-manifesto-handoff-content.is-settled [data-manifesto-ghost] {
  transform:none;
  will-change:auto;
}
body[data-page="home"] .hero-manifesto-handoff-content.is-settled .section-kicker[data-manifesto-kicker],
body[data-page="home"] .hero-manifesto-handoff-content.is-settled .manifesto-line-one > span,
body[data-page="home"] .hero-manifesto-handoff-content.is-settled .manifesto-line-two > span {
  opacity:1;
}
body[data-page="home"] .hero-manifesto-handoff-content.is-settled [data-manifesto-ghost] {
  opacity:.1;
}
@media (max-width:900px) and (min-width:501px) {
  body[data-page="home"] .home-purpose[data-manifesto] .manifesto-copy { gap:clamp(14px,1.8vw,24px); }
}
@media (max-width:500px) {
  body[data-page="home"] .home-purpose[data-manifesto] .section-kicker[data-manifesto-kicker] { transform:translate3d(var(--manifesto-kicker-x),var(--manifesto-kicker-y),0); }
  body[data-page="home"] .home-purpose[data-manifesto] .manifesto-line-one > span,
  body[data-page="home"] .home-purpose[data-manifesto] .manifesto-line-two > span { will-change:opacity,transform; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .home-purpose[data-manifesto] .section-kicker[data-manifesto-kicker],
  body[data-page="home"] .home-purpose[data-manifesto] .manifesto-line-one > span,
  body[data-page="home"] .home-purpose[data-manifesto] .manifesto-line-two > span,
  body[data-page="home"] .home-purpose[data-manifesto] [data-manifesto-ghost] {
    transform:none;
    transition:none;
    will-change:auto;
  }
  body[data-page="home"] .home-purpose[data-manifesto] .section-kicker[data-manifesto-kicker],
  body[data-page="home"] .home-purpose[data-manifesto] .manifesto-line-one > span,
  body[data-page="home"] .home-purpose[data-manifesto] .manifesto-line-two > span {
    opacity:1;
  }
  body[data-page="home"] .home-purpose[data-manifesto] [data-manifesto-ghost] {
    opacity:.1;
  }
}

/* P1.8D Home Footer Visual Identity: Peach ending chapter, unchanged marquee mechanism. */
body[data-page="home"] .site-footer[data-footer] {
  min-height:560px;
  padding:clamp(62px,6vw,94px) clamp(18px,4vw,58px) 24px;
  border-top:1px solid var(--border-light);
  background:var(--peach);
  color:var(--ink);
}
body[data-page="home"] .site-footer[data-footer] .footer-label { color:var(--accent-interactive); font-size:10px; font-weight:600; letter-spacing:.08em; }
body[data-page="home"] .site-footer[data-footer] .footer-links {
  gap:12px;
  color:var(--ink);
  font-size:clamp(15px,1.3vw,19px);
  font-weight:600;
  line-height:1.15;
}
body[data-page="home"] .site-footer[data-footer] .footer-links a {
  position:relative;
  width:max-content;
  color:var(--ink);
  transition:color .35s var(--motion-ease), transform .45s var(--motion-ease);
}
body[data-page="home"] .site-footer[data-footer] .footer-links a::after {
  background:var(--accent-hover);
  transition:transform .45s var(--motion-ease);
}
body[data-page="home"] .site-footer[data-footer] .footer-links a:hover,
body[data-page="home"] .site-footer[data-footer] .footer-links a:focus-visible { color:var(--accent-hover); transform:translateX(3px); }
body[data-page="home"] .site-footer[data-footer] .footer-links a:focus-visible {
  outline:2px solid var(--focus-outline);
  outline-offset:4px;
}
body[data-page="home"] .site-footer[data-footer] .footer-cta.footer-marquee {
  align-self:center;
  width:100%;
  padding-block:clamp(22px,3vw,42px);
  border-top:1px solid var(--border-light);
  border-bottom:1px solid var(--border-light);
  color:var(--ink);
  font-family:var(--font-display-cn);
  font-size:clamp(82px,15.5vw,224px);
  font-weight:800;
  letter-spacing:-.09em;
  line-height:.78;
  text-align:left;
  text-transform:none;
}
body[data-page="home"] .site-footer[data-footer] .footer-marquee-track { width:max-content; }
body[data-page="home"] .site-footer[data-footer] .footer-marquee-track > span { padding-right:4vw; }
body[data-page="home"] .site-footer[data-footer] .footer-bottom {
  padding-top:16px;
  border-top:1px solid var(--border-light);
  color:var(--ink);
  font-size:10px;
  font-weight:600;
  letter-spacing:.04em;
}

@media (max-width:900px) and (min-width:501px) {
  body[data-page="home"] .site-footer[data-footer] { min-height:510px; padding-top:58px; }
  body[data-page="home"] .site-footer[data-footer] .footer-cta.footer-marquee { font-size:clamp(68px,14vw,120px); }
}

@media (max-width:500px) {
  body[data-page="home"] .site-footer[data-footer] {
    min-height:540px;
    padding:48px 18px 20px;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto auto 1fr auto;
    gap:24px;
  }
  body[data-page="home"] .site-footer[data-footer] .footer-links { gap:10px; font-size:16px; }
  body[data-page="home"] .site-footer[data-footer] .footer-cta.footer-marquee {
    align-self:center;
    min-width:0;
    margin-block:8px;
    padding-block:20px;
    font-size:clamp(52px,14.5vw,70px);
    line-height:.84;
  }
  body[data-page="home"] .site-footer[data-footer] .footer-marquee-track > span { padding-right:10vw; }
  body[data-page="home"] .site-footer[data-footer] .footer-bottom { font-size:9px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .site-footer[data-footer] .footer-marquee-track { animation:none; transform:none; }
  body[data-page="home"] .site-footer[data-footer] .footer-links a,
  body[data-page="home"] .site-footer[data-footer] .footer-links a::after { transition:none; }
  body[data-page="home"] .site-footer[data-footer] .footer-links a:hover,
  body[data-page="home"] .site-footer[data-footer] .footer-links a:focus-visible { transform:none; }
}

/* P1.8C Home Archive teaser: dark editorial index with contextual preview. */
body[data-page="home"] .wang-archive-teaser[data-archive-teaser] {
  --archive-preview-right:clamp(24px,10vw,145px);
  --archive-preview-width:min(28vw,390px);
  --archive-index-right-gap:max(clamp(18px,4vw,58px),calc(100% - clamp(18px,4vw,58px) - 1140px));
  --archive-preview-gap:32px;
  position:relative;
  min-height:100svh;
  padding:clamp(78px,7vw,112px) clamp(18px,4vw,58px) clamp(38px,4vw,58px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--ink);
  color:var(--paper);
  border-top:1px solid var(--line-on-dark);
}
body[data-page="home"] .wang-archive-teaser[data-archive-teaser] .section-kicker {
  position:relative;
  z-index:4;
  margin:0;
  color:var(--paper);
}
body[data-page="home"] .wang-archive-teaser[data-archive-teaser] .section-kicker span:last-child { color:var(--lavender); }
body[data-page="home"] .archive-teaser-heading {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
body[data-page="home"] .archive-teaser-header {
  position:relative;
  z-index:4;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:clamp(42px,7vh,82px);
  color:rgba(243,242,238,.72);
  font-size:11px;
  letter-spacing:.02em;
}
body[data-page="home"] .archive-teaser-intro,
body[data-page="home"] .archive-teaser-perspective { display:inline-flex; align-items:center; gap:10px; }
body[data-page="home"] .archive-status-dot { width:6px; height:6px; border-radius:50%; background:var(--blue); }
body[data-page="home"] .archive-teaser-perspective { color:var(--lavender); }
body[data-page="home"] .archive-index {
  position:relative;
  z-index:3;
  width:min(100%,1140px);
  margin-top:clamp(32px,4.5vh,58px);
}
body[data-page="home"] .archive-index-item {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:stretch;
  column-gap:clamp(12px,1.8vw,28px);
  width:100%;
  padding:clamp(15px,1.7vw,25px) 0 clamp(12px,1.3vw,19px);
  border-top:1px solid var(--line-on-dark);
  color:var(--paper);
  transition:color .3s var(--motion-ease), border-color .3s var(--motion-ease), opacity .3s var(--motion-ease);
}
body[data-page="home"] .archive-index-item:last-child { border-bottom:1px solid var(--line-on-dark); }
body[data-page="home"] .archive-index-item:nth-child(2) { padding-left:clamp(16px,4.5vw,64px); }
body[data-page="home"] .archive-index-item:nth-child(3) { padding-left:clamp(6px,1.5vw,22px); }
body[data-page="home"] .archive-index-item:nth-child(4) { padding-left:clamp(22px,6vw,86px); }
body[data-page="home"] .archive-index-toggle {
  display:grid;
  grid-template-columns:clamp(38px,4.5vw,64px) minmax(0,1fr);
  grid-template-rows:auto 0fr;
  align-items:baseline;
  column-gap:clamp(12px,1.8vw,28px);
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:grid-template-rows .32s var(--motion-ease);
}
body[data-page="home"] .archive-index-number {
  color:var(--blue);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
}
body[data-page="home"] .archive-index-title {
  display:block;
  width:max-content;
  max-width:100%;
  overflow-wrap:anywhere;
  font-family:var(--font-display-cn);
  font-size:clamp(56px,8.25vw,122px);
  font-weight:800;
  letter-spacing:-.1em;
  line-height:.82;
  transition:color .3s var(--motion-ease), transform .35s var(--motion-ease);
}
body[data-page="home"] .archive-index-detail {
  grid-column:2;
  min-height:0;
  overflow:hidden;
  color:currentColor;
  font-family:var(--font-body-cn);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.3;
  opacity:0;
  transform:translateY(-5px);
  transition:opacity .22s ease, transform .32s var(--motion-ease);
}
body[data-page="home"] .archive-index-item.is-active .archive-index-toggle { grid-template-rows:auto minmax(0,auto); }
body[data-page="home"] .archive-index-item.is-active .archive-index-detail {
  opacity:.72;
  transform:none;
}
body[data-page="home"] .archive-index-action {
  align-self:center;
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-right:max(0px, calc(var(--archive-preview-right) + var(--archive-preview-width) + var(--archive-preview-gap) - var(--archive-index-right-gap)));
  color:rgba(243,242,238,.55);
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
  transition:color .3s var(--motion-ease), transform .35s var(--motion-ease);
}
body[data-page="home"] .archive-index-item:focus-within,
body[data-page="home"] .archive-index-item.is-active { color:var(--lavender); }
body[data-page="home"] .archive-index-item:focus-within .archive-index-title,
body[data-page="home"] .archive-index-item.is-active .archive-index-title { transform:translateX(8px); color:var(--lavender); }
body[data-page="home"] .archive-index-item:focus-within .archive-index-action,
body[data-page="home"] .archive-index-item.is-active .archive-index-action { color:var(--paper); transform:translateX(-4px); }
@media (hover: hover) and (pointer: fine) {
  body[data-page="home"] .archive-index-item:hover { color:var(--lavender); }
  body[data-page="home"] .archive-index-item:hover .archive-index-title { transform:translateX(8px); color:var(--lavender); }
  body[data-page="home"] .archive-index-item:hover .archive-index-action { color:var(--paper); transform:translateX(-4px); }
}
@media (min-width:901px) {
  body[data-page="home"] .wang-archive-teaser[data-archive-teaser] {
    --archive-preview-right:clamp(24px,5.5vw,80px);
    --archive-index-right-gap:max(clamp(18px,4vw,58px),calc(100vw - clamp(18px,4vw,58px) - 1140px));
  }
  body[data-page="home"] .archive-index-item { grid-template-columns:minmax(0,1fr); }
  body[data-page="home"] .archive-index-action {
    position:absolute;
    top:50%;
    right:max(0px, calc(var(--archive-preview-right) + var(--archive-preview-width) + var(--archive-preview-gap) - var(--archive-index-right-gap)));
    margin-right:0;
    z-index:6;
    transform:translateY(-50%);
  }
  body[data-page="home"] .archive-index-item:focus-within .archive-index-action,
  body[data-page="home"] .archive-index-item.is-active .archive-index-action { transform:translate(-4px,-50%); }
}
@media (min-width:901px) and (hover: hover) and (pointer: fine) {
  body[data-page="home"] .archive-index-item:hover .archive-index-action { transform:translate(-4px,-50%); }
}
body[data-page="home"] .archive-index-item:focus-visible {
  outline:1px solid var(--blue);
  outline-offset:6px;
}
body[data-page="home"] .archive-index-toggle:focus-visible,
body[data-page="home"] .archive-index-action:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
body[data-page="home"] .archive-index.has-active .archive-index-item:not(.is-active) { opacity:.52; }
body[data-page="home"] .archive-teaser-preview {
  position:absolute;
  z-index:5;
  top:var(--archive-preview-top,23%);
  right:var(--archive-preview-right);
  width:var(--archive-preview-width);
  margin:0;
  opacity:0;
  pointer-events:none;
  transform:translate3d(12px,18px,0) scale(.97);
  transition:opacity .45s var(--motion-ease), transform .55s var(--motion-ease);
}
body[data-page="home"] .wang-archive-teaser[data-archive-teaser].has-preview .archive-teaser-preview { opacity:1; transform:none; }
body[data-page="home"] .archive-preview-frame {
  position:relative;
  aspect-ratio:1.08;
  overflow:hidden;
  border:1px solid rgba(243,242,238,.65);
  background:var(--bg-primary-dark);
  box-shadow:0 22px 54px rgba(0,0,0,.34);
}
body[data-page="home"] .archive-preview-frame::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(73,123,255,.16),transparent 44%,rgba(187,145,255,.18));
  mix-blend-mode:screen;
  pointer-events:none;
}
body[data-page="home"] .archive-preview-image,
body[data-page="home"] .archive-preview-frame img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity .35s var(--motion-ease), transform .45s var(--motion-ease);
}
  body[data-page="home"] .archive-preview-frame img.is-changing { opacity:.25; transform:scale(.98); }
body[data-page="home"] .archive-teaser-preview figcaption {
  display:flex;
  justify-content:space-between;
  gap:18px;
  margin-top:9px;
  color:var(--paper);
  font-size:10px;
  font-weight:700;
}
body[data-page="home"] .archive-teaser-preview figcaption span:first-child { color:var(--blue); }
body[data-page="home"] .archive-teaser-cta {
  position:relative;
  z-index:4;
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:auto;
  padding-top:clamp(22px,3vw,42px);
  color:var(--paper);
  font-family:var(--font-body-cn);
  font-size:clamp(18px,2vw,28px);
  font-weight:800;
  border-top:1px solid var(--line-on-dark);
  transition:color .35s var(--motion-ease);
}
body[data-page="home"] .archive-teaser-cta:hover,
body[data-page="home"] .archive-teaser-cta:focus-visible { color:var(--blue); }
body[data-page="home"] .archive-teaser-cta .archive-arrow { display:inline-block; transition:transform .35s var(--motion-ease); }
body[data-page="home"] .archive-teaser-cta:hover .archive-arrow,
body[data-page="home"] .archive-teaser-cta:focus-visible .archive-arrow { transform:translate(4px,-4px); }

@media (max-width:900px) and (min-width:501px) {
  body[data-page="home"] .wang-archive-teaser[data-archive-teaser] {
    --archive-preview-right:5vw;
    --archive-preview-width:min(31vw,260px);
    min-height:100svh;
  }
  body[data-page="home"] .archive-index-title { font-size:clamp(48px,7.4vw,78px); }
  body[data-page="home"] .archive-teaser-preview { top:var(--archive-preview-top,26%); }
  body[data-page="home"] .archive-index-item:hover .archive-index-title,
  body[data-page="home"] .archive-index-item:focus-visible .archive-index-title,
  body[data-page="home"] .archive-index-item.is-active .archive-index-title { transform:translateX(4px); }
}

@media (max-width:500px) {
  body[data-page="home"] .wang-archive-teaser[data-archive-teaser] {
    min-height:0;
    padding:70px 18px 32px;
  }
  body[data-page="home"] .archive-teaser-header { margin-top:34px; font-size:10px; }
  body[data-page="home"] .archive-teaser-perspective { display:none; }
  body[data-page="home"] .archive-index { margin-top:30px; }
  body[data-page="home"] .archive-index-item,
  body[data-page="home"] .archive-index-item:nth-child(2),
  body[data-page="home"] .archive-index-item:nth-child(3),
  body[data-page="home"] .archive-index-item:nth-child(4) {
    grid-template-columns:minmax(0,1fr) auto;
    padding:16px 0 14px;
    column-gap:8px;
  }
  body[data-page="home"] .archive-index-toggle { grid-template-columns:30px minmax(0,1fr); column-gap:8px; }
  body[data-page="home"] .archive-index-title { width:auto; font-size:clamp(39px,13.8vw,58px); line-height:.9; letter-spacing:-.09em; }
  body[data-page="home"] .archive-index-action { margin-right:0; font-size:9px; }
  body[data-page="home"] .archive-index-item.is-active .archive-index-title,
  body[data-page="home"] .archive-index-item:focus-within .archive-index-title { transform:none; }
  body[data-page="home"] .archive-index-detail { font-size:9px; }
  body[data-page="home"] .archive-teaser-preview {
    position:relative;
    top:auto;
    right:auto;
    width:100%;
    margin-top:28px;
    visibility:hidden;
    opacity:0;
    transform:translateY(10px) scale(.98);
  }
  body[data-page="home"] .wang-archive-teaser[data-archive-teaser].has-preview > .archive-teaser-preview {
    visibility:hidden;
    opacity:0;
    transform:translateY(10px) scale(.98);
  }
  body[data-page="home"] .archive-index-item > .archive-teaser-preview {
    grid-column:1 / -1;
    margin-top:20px;
    visibility:visible;
    opacity:1;
    transform:none;
  }
  body[data-page="home"] .archive-teaser-preview figcaption { font-size:9px; }
  body[data-page="home"] .archive-teaser-cta { margin-top:34px; padding-top:20px; font-size:20px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .archive-index-item,
  body[data-page="home"] .archive-index-toggle,
  body[data-page="home"] .archive-index-title,
  body[data-page="home"] .archive-index-detail,
  body[data-page="home"] .archive-index-action,
  body[data-page="home"] .archive-teaser-preview,
  body[data-page="home"] .archive-preview-image,
  body[data-page="home"] .archive-preview-frame img,
  body[data-page="home"] .archive-teaser-cta,
  body[data-page="home"] .archive-teaser-cta .archive-arrow { transition:none; }
  body[data-page="home"] .archive-index-item:hover .archive-index-title,
  body[data-page="home"] .archive-index-item:focus-within .archive-index-title,
  body[data-page="home"] .archive-index-item.is-active .archive-index-title { transform:none; }
  body[data-page="home"] .archive-index-item.is-active .archive-index-detail { transform:none; }
  body[data-page="home"] .wang-archive-teaser[data-archive-teaser].has-preview .archive-teaser-preview { transform:none; }
  body[data-page="home"] .archive-preview-frame img.is-changing { opacity:1; transform:none; }
}

/* P2.3 Works motion: directional, editorial movement inside the approved stage. */
body[data-page="works"] .works-page {
  --works-motion-duration:760ms;
  --works-motion-ease:cubic-bezier(.496,.004,0,1);
}
body[data-page="works"] .works-page .works-title-wrap,
body[data-page="works"] .works-page .works-title,
body[data-page="works"] .works-page .works-active-meta,
body[data-page="works"] .works-page .works-card,
body[data-page="works"] .works-page .works-side,
body[data-page="works"] .works-page .works-bottom {
  will-change:transform, opacity;
}
body[data-page="works"] .works-page .works-title-wrap {
  transition:opacity .56s ease, transform .68s var(--works-motion-ease);
}
body[data-page="works"] .works-page .works-title,
body[data-page="works"] .works-page .works-active-meta {
  transition:opacity .42s ease, transform .64s var(--works-motion-ease);
}
body[data-page="works"] .works-page .works-card {
  transition:opacity var(--works-motion-duration) ease, transform var(--works-motion-duration) var(--works-motion-ease), border-color .35s ease;
}
body[data-page="works"] .works-page .works-side {
  transition:opacity var(--works-motion-duration) ease, filter .52s ease, transform var(--works-motion-duration) var(--works-motion-ease);
}
body[data-page="works"] .works-page .works-bottom {
  transition:opacity .52s ease, transform .62s var(--works-motion-ease);
}
body[data-page="works"] .works-page.is-motion-prep .works-card,
body[data-page="works"] .works-page.is-motion-prep .works-side {
  transition:none;
}
body[data-page="works"] .works-page.is-motion-prep.is-forward .works-card {
  opacity:.14;
  transform:translateX(68%) scale(.985);
}
body[data-page="works"] .works-page.is-motion-prep.is-forward .works-side.left {
  opacity:.18;
  transform:translateX(92%) scale(.97);
}
body[data-page="works"] .works-page.is-motion-prep.is-forward .works-side.right {
  opacity:.16;
  transform:translateX(22%) scale(.985);
}
body[data-page="works"] .works-page.is-motion-prep.is-backward .works-card {
  opacity:.14;
  transform:translateX(-68%) scale(.985);
}
body[data-page="works"] .works-page.is-motion-prep.is-backward .works-side.right {
  opacity:.18;
  transform:translateX(-92%) scale(.97);
}
body[data-page="works"] .works-page.is-motion-prep.is-backward .works-side.left {
  opacity:.16;
  transform:translateX(-22%) scale(.985);
}
body[data-page="works"] .works-page.is-meta-outgoing .works-title,
body[data-page="works"] .works-page.is-meta-outgoing .works-active-meta {
  opacity:0;
  transform:translateY(-13px);
}
body[data-page="works"] .works-page.is-meta-incoming .works-title,
body[data-page="works"] .works-page.is-meta-incoming .works-active-meta {
  opacity:0;
  transform:translateY(13px);
}
body[data-page="works"] .works-page .works-counter {
  overflow:hidden;
}
body[data-page="works"] .works-page .works-counter-number {
  display:inline-block;
  min-width:2ch;
  transition:opacity .22s ease, transform .46s var(--works-motion-ease);
}
body[data-page="works"] .works-page.is-counter-out .works-counter-number {
  opacity:0;
  transform:translateY(-100%);
}
body[data-page="works"] .works-page.is-counter-in .works-counter-number {
  opacity:0;
  transform:translateY(100%);
}
body[data-page="works"] .works-page.is-keyboard-feedback .works-count button[aria-current="true"],
body[data-page="works"] .works-page.is-keyboard-feedback .works-counter {
  color:var(--lavender);
}
body[data-page="works"] .works-page.is-entering .works-card {
  opacity:0;
  transform:translateY(12px) scale(.985);
}
body[data-page="works"] .works-page.is-entering .works-title-wrap,
body[data-page="works"] .works-page.is-entering .works-active-meta {
  opacity:0;
  transform:translateY(8px);
}
body[data-page="works"] .works-page.is-entering .works-side {
  opacity:0;
  transform:translateY(14px);
}
body[data-page="works"] .works-page.is-entering .works-bottom {
  opacity:0;
  transform:translateY(10px);
}
body[data-page="works"] .works-page.is-entering .works-card { transition-delay:.04s; }
body[data-page="works"] .works-page.is-entering .works-title-wrap,
body[data-page="works"] .works-page.is-entering .works-active-meta { transition-delay:.14s; }
body[data-page="works"] .works-page.is-entering .works-side { transition-delay:.26s; }
body[data-page="works"] .works-page.is-entering .works-bottom { transition-delay:.32s; }

@media (min-width:501px) and (max-width:900px) {
  body[data-page="works"] .works-page { --works-motion-duration:620ms; }
  body[data-page="works"] .works-page.is-motion-prep.is-forward .works-card { transform:translateX(54%) scale(.988); }
  body[data-page="works"] .works-page.is-motion-prep.is-backward .works-card { transform:translateX(-54%) scale(.988); }
  body[data-page="works"] .works-page.is-motion-prep.is-forward .works-side.left { transform:translateX(70%) scale(.98); }
  body[data-page="works"] .works-page.is-motion-prep.is-backward .works-side.right { transform:translateX(-70%) scale(.98); }
}

@media (max-width:500px) {
  body[data-page="works"] .works-page .works-stage { grid-template-columns:18px minmax(0,1fr) 18px; }
  body[data-page="works"] .works-page { --works-motion-duration:500ms; }
  body[data-page="works"] .works-page.is-motion-prep.is-forward .works-card { transform:translateX(32%) scale(.99); }
  body[data-page="works"] .works-page.is-motion-prep.is-backward .works-card { transform:translateX(-32%) scale(.99); }
  body[data-page="works"] .works-page.is-motion-prep.is-forward .works-side.left { transform:translateX(42%) scale(.985); }
  body[data-page="works"] .works-page.is-motion-prep.is-backward .works-side.right { transform:translateX(-42%) scale(.985); }
  body[data-page="works"] .works-page.is-motion-prep.is-forward .works-side.right { transform:translateX(14%) scale(.99); }
  body[data-page="works"] .works-page.is-motion-prep.is-backward .works-side.left { transform:translateX(-14%) scale(.99); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="works"] .works-page .works-title-wrap,
  body[data-page="works"] .works-page .works-title,
  body[data-page="works"] .works-page .works-active-meta,
  body[data-page="works"] .works-page .works-card,
  body[data-page="works"] .works-page .works-side,
  body[data-page="works"] .works-page .works-bottom,
  body[data-page="works"] .works-page .works-counter-number { transition:none; }
  body[data-page="works"] .works-page.is-entering .works-title-wrap,
  body[data-page="works"] .works-page.is-entering .works-active-meta,
  body[data-page="works"] .works-page.is-entering .works-card,
  body[data-page="works"] .works-page.is-entering .works-side,
  body[data-page="works"] .works-page.is-entering .works-bottom,
  body[data-page="works"] .works-page.is-motion-prep .works-card,
  body[data-page="works"] .works-page.is-motion-prep .works-side,
  body[data-page="works"] .works-page.is-meta-outgoing .works-title,
  body[data-page="works"] .works-page.is-meta-outgoing .works-active-meta,
  body[data-page="works"] .works-page.is-meta-incoming .works-title,
  body[data-page="works"] .works-page.is-meta-incoming .works-active-meta,
  body[data-page="works"] .works-page.is-counter-out .works-counter-number,
  body[data-page="works"] .works-page.is-counter-in .works-counter-number { opacity:1; transform:none; }
}

/* P4.1 About personalization: Wang Xiuli content inside the frozen Jasmine composition. */
body[data-page="about"] .profile-notes > span { display:flex; flex-direction:column; gap:4px; max-width:31%; }
body[data-page="about"] .profile-notes { color:var(--ink); }
body[data-page="about"] .profile-notes > span strong { display:block; font-size:inherit; line-height:1; overflow-wrap:anywhere; }
body[data-page="about"] .profile-notes > span small { display:block; color:rgba(13,13,15,.72); font-size:.78em; line-height:1.25; letter-spacing:0; text-transform:none; overflow-wrap:anywhere; }
body[data-page="about"] .profile-actions .profile-cta {
  display:inline-flex;
  min-height:52px;
  align-items:center;
  justify-content:center;
  padding:13px 28px;
  border:1px solid var(--ink);
  border-radius:0;
  font-size:14px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
  transition:color .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
body[data-page="about"] .profile-actions .profile-cta-primary {
  background:var(--ink);
  color:var(--paper);
}
body[data-page="about"] .profile-actions .profile-cta-secondary {
  background:transparent;
  color:var(--ink);
}
body[data-page="about"] .profile-actions .profile-cta-primary:hover,
body[data-page="about"] .profile-actions .profile-cta-primary:focus-visible {
  background:var(--blue);
  border-color:var(--blue);
  color:var(--paper);
}
body[data-page="about"] .profile-actions .profile-cta-secondary:hover,
body[data-page="about"] .profile-actions .profile-cta-secondary:focus-visible {
  background:var(--ink);
  color:var(--paper);
}
body[data-page="about"] .pill-placeholder { cursor:default; }
body[data-page="about"] .about-gallery-placeholder { width:217px; height:217px; background:rgba(13,13,15,.04); border:1px solid rgba(13,13,15,.14); }
body[data-page="about"] .capability-track > span { display:flex; flex-direction:column; align-items:flex-start; gap:0; font-family:var(--font-display-cn); line-height:.86; letter-spacing:-.08em; }
body[data-page="about"] .capability-track > span > strong { display:block; font:inherit; }
body[data-page="about"] .capability-track > span > small { display:block; margin-top:.12em; color:rgba(243,242,238,.72); font:700 clamp(10px,1.1vw,16px)/1 ManropeLocal, Manrope, Arial, sans-serif; letter-spacing:.08em; }
body[data-page="about"] .award-body { display:flex; flex-direction:column; gap:24px; }
body[data-page="about"] .impact-item { display:flex; flex-direction:column; gap:4px; }
body[data-page="about"] .impact-item strong { display:block; font-size:clamp(24px,2.6vw,38px); line-height:.9; }
body[data-page="about"] .impact-item span { display:block; font-size:14px; line-height:1.2; }

@media (max-width:500px) {
  body[data-page="about"] .profile-notes { align-items:flex-end; gap:8px; }
  body[data-page="about"] .profile-notes > span { max-width:31%; gap:3px; }
  body[data-page="about"] .profile-notes > span strong { font-size:7px; line-height:1.05; }
  body[data-page="about"] .profile-notes > span small { font-size:7px; line-height:1.15; }
  body[data-page="about"] .about-gallery-placeholder { width:109px; height:109px; }
  body[data-page="about"] .capability-track > span > small { font-size:8px; letter-spacing:.05em; }
  body[data-page="about"] .award-body { gap:18px; }
  body[data-page="about"] .impact-item strong { font-size:32px; }
  body[data-page="about"] .impact-item span { font-size:12px; }
}

/* P4.2 About polish: compress the handoff, make Chinese the reading layer, and reuse Home's footer language. */
body[data-page="about"] .about-banner { min-height:clamp(1760px,122vw,2020px); max-height:2020px; }
body[data-page="about"] .about-gallery { height:260px; }
body[data-page="about"] .about-copy { padding-top:2vw; padding-bottom:8vw; }
body[data-page="about"] .bio-copy { grid-column:2; display:flex; flex-direction:column; gap:3.2rem; text-align:center; }
body[data-page="about"] .bio-cn { margin:0; color:var(--ink); font-family:"STKaiti","KaiTi","Kaiti SC","Noto Serif CJK SC","Microsoft YaHei",sans-serif; font-size:clamp(26px,2.5vw,38px); font-weight:500; letter-spacing:-.03em; line-height:1.22; text-transform:none; }
body[data-page="about"] .bio-en { margin:0; color:rgba(13,13,15,.72); font-family:ManropeLocal,Manrope,Arial,sans-serif; font-size:clamp(9px,.85vw,13px); font-weight:700; letter-spacing:.04em; line-height:1.45; text-transform:none; }

/* P4.5 About bio reveal pilot v2: hold the copy while scroll controls a continuous reading frontier. */
body[data-page="about"] .about-copy[data-bio-reveal] { min-height:240vh; }
body[data-page="about"] .about-copy[data-bio-reveal] .bio-copy {
  position:sticky;
  top:clamp(24px,calc(50vh - 426px),120px);
  align-self:start;
}
body[data-page="about"] .bio-reveal-phrase {
  display:inline;
  color:var(--ink);
  opacity:.18;
}
/* P4.6 About capabilities focus pilot: keep the lavender field while desktop scroll chooses the reading focus. */
@media (min-width:901px) {
  body[data-page="about"] .capabilities[data-capability-focus] {
    position:relative;
    min-height:260vh;
    box-sizing:border-box;
    padding-block:0;
    overflow:clip;
  }
  body[data-page="about"] .capabilities[data-capability-focus] > .section-kicker {
    position:absolute;
    inset:0 0 auto;
    z-index:2;
    margin:0;
  }
  body[data-page="about"] .capabilities[data-capability-focus] .capability-track[data-capability-focus-track] {
    position:sticky;
    top:calc(50vh - min(43vh,390px));
    display:block;
    height:min(86vh,780px);
    overflow:hidden;
    --capability-focus-progress:0;
    --capability-track-shift:0px;
    --capability-band-height:clamp(190px,21vh,220px);
    --capability-band-step:clamp(190px,21vh,220px);
  }
  body[data-page="about"] .capabilities[data-capability-focus] .capability-track[data-capability-focus-track] > span {
    position:absolute;
    inset-inline:0;
    top:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:var(--capability-band-height);
    height:var(--capability-band-height);
    box-sizing:border-box;
    padding:0 clamp(20px,4vw,72px);
    text-align:center;
    overflow:hidden;
    background:rgba(243,242,238,.035);
    border-top:1px solid rgba(243,242,238,.12);
    border-bottom:1px solid rgba(243,242,238,.12);
    transform:translate3d(0,calc((var(--capability-index) * var(--capability-band-step)) + var(--capability-track-shift,0px)),0);
    will-change:transform,opacity;
    letter-spacing:-.035em;
    font-weight:650;
    line-height:.86;
    opacity:.24;
  }
  body[data-page="about"] .capabilities[data-capability-focus] .capability-track[data-capability-focus-track] > span:nth-child(1) { --capability-index:0; }
  body[data-page="about"] .capabilities[data-capability-focus] .capability-track[data-capability-focus-track] > span:nth-child(2) { --capability-index:1; }
  body[data-page="about"] .capabilities[data-capability-focus] .capability-track[data-capability-focus-track] > span:nth-child(3) { --capability-index:2; }
  body[data-page="about"] .capabilities[data-capability-focus] .capability-track[data-capability-focus-track] > span:nth-child(4) { --capability-index:3; }
  body[data-page="about"] .capabilities[data-capability-focus] .capability-track[data-capability-focus-track] > span:nth-child(5) { --capability-index:4; }
  body[data-page="about"] .capabilities[data-capability-focus] .capability-track[data-capability-focus-track] > span > small {
    align-self:center;
    color:rgba(243,242,238,.58);
    letter-spacing:.1em;
  }
}
@media (max-width:900px) and (min-width:501px) {
  body[data-page="about"] .capabilities[data-capability-focus] {
    min-height:200vh;
    padding-block:0;
    overflow:clip;
  }
  body[data-page="about"] .capabilities[data-capability-focus] > .section-kicker {
    position:absolute;
    inset:0 0 auto;
    z-index:2;
    margin:0;
  }
  body[data-page="about"] .capabilities[data-capability-focus] .capability-track[data-capability-focus-track] {
    position:sticky;
    top:clamp(30px,7vh,64px);
    display:block;
    height:min(78vh,600px);
    overflow:hidden;
    --capability-focus-progress:0;
    --capability-track-shift:0px;
    --capability-band-height:clamp(150px,21vw,185px);
    --capability-band-step:clamp(150px,21vw,185px);
  }
  body[data-page="about"] .capabilities[data-capability-focus] .capability-track[data-capability-focus-track] > span {
    position:absolute;
    inset-inline:0;
    top:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:var(--capability-band-height);
    height:var(--capability-band-height);
    box-sizing:border-box;
    padding:0 28px;
    text-align:center;
    overflow:hidden;
    background:rgba(243,242,238,.035);
    border-top:1px solid rgba(243,242,238,.12);
    border-bottom:1px solid rgba(243,242,238,.12);
    transform:translate3d(0,calc((var(--capability-index) * var(--capability-band-step)) + var(--capability-track-shift,0px)),0);
    will-change:transform,opacity;
    font-size:clamp(78px,12vw,112px);
    letter-spacing:-.045em;
    line-height:.86;
    font-weight:650;
    opacity:.24;
  }
  body[data-page="about"] .capabilities[data-capability-focus] .capability-track[data-capability-focus-track] > span > small {
    color:rgba(243,242,238,.62);
    font-size:clamp(9px,1.4vw,12px);
    letter-spacing:.08em;
  }
  body[data-page="about"] .capabilities[data-capability-focus] .capability-track[data-capability-focus-track] > span:nth-child(1) { --capability-index:0; }
  body[data-page="about"] .capabilities[data-capability-focus] .capability-track[data-capability-focus-track] > span:nth-child(2) { --capability-index:1; }
  body[data-page="about"] .capabilities[data-capability-focus] .capability-track[data-capability-focus-track] > span:nth-child(3) { --capability-index:2; }
  body[data-page="about"] .capabilities[data-capability-focus] .capability-track[data-capability-focus-track] > span:nth-child(4) { --capability-index:3; }
  body[data-page="about"] .capabilities[data-capability-focus] .capability-track[data-capability-focus-track] > span:nth-child(5) { --capability-index:4; }
}

@media (max-width:500px) {
  body[data-page="about"] .capabilities[data-capability-focus] {
    min-height:auto;
    padding:0 0 24px;
  }
  body[data-page="about"] .capabilities[data-capability-focus] > .section-kicker {
    position:relative;
    inset:auto;
    z-index:auto;
    margin:0 18px 20px;
  }
  body[data-page="about"] .capabilities[data-capability-focus] .capability-track[data-capability-focus-track] {
    position:relative;
    top:auto;
    display:flex;
    height:auto;
    overflow:visible;
    --capability-focus-progress:0;
    --capability-band-height:clamp(116px,31vw,140px);
    --capability-band-step:clamp(116px,31vw,140px);
  }
  body[data-page="about"] .capabilities[data-capability-focus] .capability-track[data-capability-focus-track] > span {
    position:relative;
    inset-inline:auto;
    top:auto;
    display:flex;
    flex:0 0 var(--capability-band-height);
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:var(--capability-band-height);
    height:var(--capability-band-height);
    box-sizing:border-box;
    padding:0 16px;
    text-align:center;
    overflow:hidden;
    background:rgba(243,242,238,.035);
    border-top:1px solid rgba(243,242,238,.12);
    border-bottom:1px solid rgba(243,242,238,.12);
    transform:none;
    font-size:clamp(56px,15.5vw,70px);
    letter-spacing:-.045em;
    line-height:.86;
    font-weight:650;
    opacity:.24;
  }
  body[data-page="about"] .capabilities[data-capability-focus] .capability-track[data-capability-focus-track] > span > small {
    color:rgba(243,242,238,.62);
    font-size:8px;
    letter-spacing:.04em;
  }
}
body[data-page="about"] .capability-track > span { padding:.08em 0 .1em; font-size:clamp(72px,12.5vw,180px); line-height:1.02; letter-spacing:-.06em; }
body[data-page="about"] .capability-track > span > small { margin-top:0; color:rgba(13,13,15,.72); font-size:clamp(9px,.8vw,12px); letter-spacing:.06em; }
body[data-page="about"] .awards h2 { display:flex; flex-direction:column; gap:6px; font-family:var(--font-body-cn); text-transform:none; }
body[data-page="about"] .awards h2 > span { font-size:clamp(26px,2.2vw,34px); font-weight:800; letter-spacing:-.05em; line-height:1; }
body[data-page="about"] .awards h2 > small { color:rgba(243,242,238,.58); font-family:ManropeLocal,Manrope,Arial,sans-serif; font-size:10px; font-weight:700; letter-spacing:.1em; line-height:1; }
body[data-page="about"] .award-heading { display:flex; flex-direction:column; gap:10px; margin-top:6vw; text-transform:none; }
body[data-page="about"] .award-heading > span { font-family:var(--font-display-cn); font-size:clamp(68px,8vw,118px); font-weight:800; letter-spacing:-.07em; line-height:.9; text-transform:none; }
body[data-page="about"] .award-heading > small { color:rgba(243,242,238,.56); font-family:ManropeLocal,Manrope,Arial,sans-serif; font-size:10px; font-weight:700; letter-spacing:.1em; line-height:1; }
body[data-page="about"] .impact-item > span { font-family:var(--font-body-cn); font-size:clamp(16px,1.3vw,20px); font-weight:700; letter-spacing:-.03em; line-height:1.12; text-transform:none; }
body[data-page="about"] .impact-item > small { color:rgba(243,242,238,.58); font-family:ManropeLocal,Manrope,Arial,sans-serif; font-size:10px; font-weight:700; letter-spacing:.02em; line-height:1.2; }

body[data-page="about"] .site-footer[data-footer] { min-height:560px; padding:clamp(62px,6vw,94px) clamp(18px,4vw,58px) 24px; border-top:1px solid var(--border-light); background:var(--peach); color:var(--ink); }
body[data-page="about"] .site-footer[data-footer] .footer-label { color:var(--accent-interactive); font-size:10px; font-weight:600; letter-spacing:.08em; }
body[data-page="about"] .site-footer[data-footer] .footer-links { gap:12px; color:var(--ink); font-size:clamp(15px,1.3vw,19px); font-weight:600; line-height:1.15; }
body[data-page="about"] .site-footer[data-footer] .footer-links a { position:relative; width:max-content; color:var(--ink); transition:color .35s var(--motion-ease),transform .45s var(--motion-ease); }
body[data-page="about"] .site-footer[data-footer] .footer-links a::after { content:""; position:absolute; right:0; bottom:2px; left:0; height:1px; background:var(--accent-hover); transform:scaleX(0); transform-origin:right; transition:transform .45s var(--motion-ease); }
body[data-page="about"] .site-footer[data-footer] .footer-links a:hover,
body[data-page="about"] .site-footer[data-footer] .footer-links a:focus-visible { color:var(--accent-hover); transform:translateX(3px); }
body[data-page="about"] .site-footer[data-footer] .footer-links a:hover::after,
body[data-page="about"] .site-footer[data-footer] .footer-links a:focus-visible::after { transform:scaleX(1); transform-origin:left; }
body[data-page="about"] .site-footer[data-footer] .footer-links a:focus-visible { outline:2px solid var(--focus-outline); outline-offset:4px; }
body[data-page="about"] .site-footer[data-footer] .footer-cta.footer-marquee { align-self:center; width:100%; padding-block:clamp(22px,3vw,42px); border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-light); color:var(--ink); font-family:var(--font-display-cn); font-size:clamp(82px,15.5vw,224px); font-weight:800; letter-spacing:-.09em; line-height:.78; text-align:left; text-transform:none; }
body[data-page="about"] .site-footer[data-footer] .footer-marquee { overflow:hidden; }
body[data-page="about"] .site-footer[data-footer] .footer-marquee-track { display:flex; width:max-content; white-space:nowrap; animation:wang-home-marquee 28s linear infinite; }
body[data-page="about"] .site-footer[data-footer] .footer-marquee-track > span { flex:0 0 auto; padding-right:4vw; }
body[data-page="about"] .site-footer[data-footer] .footer-bottom { padding-top:16px; border-top:1px solid var(--border-light); color:var(--ink); font-size:10px; font-weight:600; letter-spacing:.04em; }

@media (max-width:900px) and (min-width:501px) {
  body[data-page="about"] .about-banner { min-height:clamp(1160px,150vw,1540px); }
  body[data-page="about"] .about-gallery { height:220px; }
  body[data-page="about"] .about-copy[data-bio-reveal] { min-height:170vh; }
  body[data-page="about"] .about-copy[data-bio-reveal] .bio-copy { top:clamp(20px,calc(50vh - 360px),72px); }
  body[data-page="about"] .site-footer[data-footer] { min-height:510px; padding-top:58px; }
  body[data-page="about"] .site-footer[data-footer] .footer-cta.footer-marquee { font-size:clamp(68px,14vw,120px); }
}

@media (max-width:500px) {
  body[data-page="about"] .about-banner { min-height:1160px; max-height:none; }
  body[data-page="about"] .about-gallery { height:128px; }
  body[data-page="about"] .about-copy { padding-top:28px; padding-bottom:68px; }
  body[data-page="about"] .about-copy[data-bio-reveal] { min-height:120vh; }
  body[data-page="about"] .about-copy[data-bio-reveal] .bio-copy { position:relative; top:auto; align-self:auto; }
  body[data-page="about"] .bio-copy { gap:28px; }
  body[data-page="about"] .bio-cn { font-size:24px; line-height:1.28; }
  body[data-page="about"] .bio-en { font-size:9px; line-height:1.4; }
  body[data-page="about"] .capability-track > span { font-size:clamp(52px,17vw,74px); line-height:1.04; }
  body[data-page="about"] .capability-track > span > small { font-size:8px; letter-spacing:.04em; }
  body[data-page="about"] .awards { min-height:930px; }
  body[data-page="about"] .award-heading { margin-top:70px; gap:8px; }
  body[data-page="about"] .award-heading > span { font-size:clamp(58px,20vw,82px); }
  body[data-page="about"] .award-heading > small { font-size:8px; }
  body[data-page="about"] .impact-item > span { font-size:16px; }
  body[data-page="about"] .impact-item > small { font-size:9px; }
  body[data-page="about"] .site-footer[data-footer] { min-height:540px; padding:48px 18px 20px; grid-template-columns:1fr auto; grid-template-rows:auto auto auto 1fr auto; gap:24px; }
  body[data-page="about"] .site-footer[data-footer] .footer-links { gap:10px; font-size:16px; }
  body[data-page="about"] .site-footer[data-footer] .footer-cta.footer-marquee { align-self:center; min-width:0; margin-block:8px; padding-block:20px; font-size:clamp(52px,14.5vw,70px); line-height:.84; }
  body[data-page="about"] .site-footer[data-footer] .footer-marquee-track { animation-duration:32s; }
  body[data-page="about"] .site-footer[data-footer] .footer-marquee-track > span { padding-right:10vw; }
  body[data-page="about"] .site-footer[data-footer] .footer-bottom { font-size:9px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="about"] .about-copy[data-bio-reveal] { min-height:auto; }
  body[data-page="about"] .about-copy[data-bio-reveal] .bio-copy { position:relative; top:auto; align-self:auto; }
  body[data-page="about"] .bio-reveal-phrase { opacity:1; }
  body[data-page="about"] .capabilities[data-capability-focus] { min-height:auto; }
  body[data-page="about"] .capabilities[data-capability-focus] .capability-track[data-capability-focus-track] {
    position:relative;
    top:auto;
    display:flex;
    flex-direction:column;
    height:auto;
    overflow:visible;
  }
  body[data-page="about"] .capabilities[data-capability-focus] .capability-track[data-capability-focus-track] > span {
    position:static;
    inset-inline:auto;
    top:auto;
    width:auto;
    min-height:0;
    height:auto;
    padding:0;
    text-align:left;
    background:transparent;
    border:0;
    transform:none;
    opacity:1;
  }
  body[data-page="about"] .site-footer[data-footer] .footer-marquee-track { animation:none; transform:none; }
  body[data-page="about"] .site-footer[data-footer] .footer-links a,
  body[data-page="about"] .site-footer[data-footer] .footer-links a::after { transition:none; }
  body[data-page="about"] .site-footer[data-footer] .footer-links a:hover,
  body[data-page="about"] .site-footer[data-footer] .footer-links a:focus-visible { transform:none; }
}

/* P4.13 About capabilities responsive reduced-motion fallback: keep bands readable without sticky control. */
@media (prefers-reduced-motion: reduce) and (max-width:900px) {
  body[data-page="about"] .capabilities[data-capability-focus] {
    min-height:auto;
  }
  body[data-page="about"] .capabilities[data-capability-focus] .capability-track[data-capability-focus-track] {
    position:relative;
    top:auto;
    display:flex;
    flex-direction:column;
    height:auto;
    overflow:visible;
  }
  body[data-page="about"] .capabilities[data-capability-focus] .capability-track[data-capability-focus-track] > span {
    position:relative;
    inset-inline:auto;
    top:auto;
    flex:0 0 var(--capability-band-height);
    width:100%;
    min-height:var(--capability-band-height);
    height:var(--capability-band-height);
    padding:0 16px;
    text-align:center;
    overflow:hidden;
    background:rgba(243,242,238,.035);
    border-top:1px solid rgba(243,242,238,.12);
    border-bottom:1px solid rgba(243,242,238,.12);
    transform:none;
    opacity:1;
  }
}

/* P4.3 About gallery: keep the Jasmine three-slot geometry and center supplied transparent artwork. */
body[data-page="about"] .about-gallery > .about-gallery-slot { width:217px; height:217px; display:flex; flex:0 0 auto; align-items:center; justify-content:center; background:transparent; border:0; box-shadow:none; }
body[data-page="about"] .about-gallery > .about-gallery-slot > img { width:100%; height:100%; display:block; object-fit:contain; object-position:center; border:0; box-shadow:none; }

@media (max-width:500px) {
  body[data-page="about"] .about-gallery > .about-gallery-slot { width:109px; height:109px; }
}

/* P4.3A About responsive fix: tighten tablet impact and keep the mobile title to two lines. */
@media (max-width:900px) and (min-width:501px) {
  body[data-page="about"] .awards { min-height:820px; padding:64px 18px 42px; }
}

@media (max-width:500px) {
  body[data-page="about"] .about-title {
    width:calc(100% - 18px);
    font-size:clamp(94px,30vw,118px);
    line-height:.84;
  }
}

/* P4.4 About Selected Impact: turn the frozen right-side window into an editorial data field. */
body[data-page="about"] .impact-loop { position:relative; width:min(620px,45vw); height:clamp(360px,34vw,500px); margin:2vw 0 0 auto; overflow:hidden; -webkit-mask-image:none; mask-image:none; }
body[data-page="about"] .impact-loop .impact-anchor { position:absolute; z-index:0; pointer-events:none; user-select:none; color:rgba(243,242,238,.42); font-family:ManropeLocal,Manrope,Arial,sans-serif; }
body[data-page="about"] .impact-loop .impact-anchor-label { top:6%; left:4%; display:flex; flex-direction:column; gap:3px; }
body[data-page="about"] .impact-loop .impact-anchor-label strong { display:block; color:rgba(243,242,238,.5); font-family:var(--font-body-cn); font-size:10px; font-weight:700; letter-spacing:-.04em; line-height:1; }
body[data-page="about"] .impact-loop .impact-anchor-label small { display:block; color:rgba(243,242,238,.32); font-size:7px; font-weight:700; letter-spacing:.11em; line-height:1; }
body[data-page="about"] .impact-loop .impact-anchor-rule { top:62%; left:69%; width:32px; height:1px; background:rgba(243,242,238,.34); transform:rotate(-3deg); }
body[data-page="about"] .impact-loop .impact-anchor-dot { top:40%; left:28%; width:5px; height:5px; background:rgba(243,242,238,.4); }
body[data-page="about"] .impact-loop .impact-anchor-note { top:91%; left:52%; color:rgba(243,242,238,.38); font-family:var(--font-body-cn); font-size:9px; letter-spacing:-.04em; line-height:1; }
body[data-page="about"] .impact-loop .impact-item { position:absolute; top:50%; left:50%; right:auto; width:max-content; display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-height:68px; text-align:left; transform:translate(-50%,-50%) scale(.58); transform-origin:center center; opacity:0; transition:left .8s var(--ease), top .8s var(--ease), transform .8s var(--ease), opacity .8s ease; will-change:left, top, transform, opacity; }
body[data-page="about"] .impact-loop .impact-item strong { display:block; white-space:nowrap; font-size:clamp(52px,4.2vw,60px); line-height:.86; letter-spacing:-.07em; }
body[data-page="about"] .impact-loop .impact-item span { display:block; font-size:clamp(18px,1.55vw,22px); line-height:1.22; }
body[data-page="about"] .impact-loop .impact-item[data-impact-position="current"] { z-index:3; left:48%; top:52%; transform:translate(-50%,-50%) scale(1); opacity:1; }
body[data-page="about"] .impact-loop .impact-item[data-impact-position="previous"] { z-index:2; left:11%; top:25%; transform:translate(-50%,-50%) scale(.58); opacity:.58; }
body[data-page="about"] .impact-loop .impact-item[data-impact-position="next"] { z-index:2; left:80%; top:21%; transform:translate(-50%,-50%) scale(.62); opacity:.58; }
body[data-page="about"] .impact-loop .impact-item[data-impact-position="previous-2"] { z-index:1; left:14%; top:81%; transform:translate(-50%,-50%) scale(.5); opacity:.3; }
body[data-page="about"] .impact-loop .impact-item[data-impact-position="next-2"] { z-index:1; left:76%; top:84%; transform:translate(-50%,-50%) scale(.52); opacity:.3; }
body[data-page="about"] .impact-loop .impact-item[data-impact-position="hidden"] { z-index:0; pointer-events:none; }

@media (max-width:900px) and (min-width:501px) {
  body[data-page="about"] .impact-loop { width:min(500px,64vw); height:300px; margin-top:64px; }
  body[data-page="about"] .impact-loop .impact-item[data-impact-position="current"] { left:48%; top:52%; }
  body[data-page="about"] .impact-loop .impact-item[data-impact-position="previous"] { left:10%; top:24%; }
  body[data-page="about"] .impact-loop .impact-item[data-impact-position="next"] { left:78%; top:20%; }
  body[data-page="about"] .impact-loop .impact-item[data-impact-position="previous-2"] { left:15%; top:80%; }
  body[data-page="about"] .impact-loop .impact-item[data-impact-position="next-2"] { left:82%; top:84%; }
}

@media (max-width:500px) {
  body[data-page="about"] .impact-loop { width:100%; height:260px; margin-top:64px; }
  body[data-page="about"] .impact-loop .impact-anchor-label { top:6%; left:2%; gap:2px; }
  body[data-page="about"] .impact-loop .impact-anchor-label strong { font-size:8px; }
  body[data-page="about"] .impact-loop .impact-anchor-label small { font-size:6px; }
  body[data-page="about"] .impact-loop .impact-anchor-rule { top:65%; left:68%; width:24px; }
  body[data-page="about"] .impact-loop .impact-anchor-dot { top:39%; left:24%; width:4px; height:4px; }
  body[data-page="about"] .impact-loop .impact-anchor-note { top:92%; left:49%; font-size:8px; }
  body[data-page="about"] .impact-loop .impact-item strong { font-size:clamp(38px,10vw,48px); }
  body[data-page="about"] .impact-loop .impact-item span { font-size:14px; line-height:1.2; }
  body[data-page="about"] .impact-loop .impact-item { gap:7px; }
  body[data-page="about"] .impact-loop .impact-item[data-impact-position="current"] { left:45%; top:52%; }
  body[data-page="about"] .impact-loop .impact-item[data-impact-position="previous"] { left:12%; top:24%; }
  body[data-page="about"] .impact-loop .impact-item[data-impact-position="next"] { left:77%; top:21%; }
  body[data-page="about"] .impact-loop .impact-item[data-impact-position="previous-2"] { left:16%; top:80%; }
  body[data-page="about"] .impact-loop .impact-item[data-impact-position="next-2"] { left:74%; top:84%; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="about"] .impact-loop .impact-item { transition:none; }
}
/* GLOBAL FOOTER: keep the Peach contact layer, then separate statement and meta bands. */
body[data-page="home"] .site-footer[data-footer] .footer-cta.footer-marquee {
  background:var(--bg-lavender);
  color:var(--text-on-dark-primary);
  width:auto;
  margin-inline:calc(-1 * clamp(18px,4vw,58px));
  padding-inline:clamp(18px,4vw,58px);
  border-top-color:var(--border-light);
  border-bottom-color:var(--border-light);
}
body[data-page="home"] .site-footer[data-footer] .footer-bottom {
  background:transparent;
  color:var(--ink);
  margin-top:-40px;
  margin-inline:calc(-1 * clamp(18px,4vw,58px));
  padding-inline:clamp(18px,4vw,58px);
}
body[data-page="about"] .site-footer[data-footer] .footer-cta.footer-marquee {
  background:var(--bg-lavender);
  color:var(--text-on-dark-primary);
  width:auto;
  margin-inline:calc(-1 * clamp(18px,4vw,58px));
  padding-inline:clamp(18px,4vw,58px);
  border-top-color:var(--border-light);
  border-bottom-color:var(--border-light);
}
body[data-page="about"] .site-footer[data-footer] .footer-bottom {
  background:transparent;
  color:var(--ink);
  margin-top:-40px;
  margin-inline:calc(-1 * clamp(18px,4vw,58px));
  padding-inline:clamp(18px,4vw,58px);
}

@media (max-width:500px) {
  body[data-page="home"] .site-footer[data-footer] .footer-bottom { align-self:start; margin-top:-24px; }
  body[data-page="about"] .site-footer[data-footer] .footer-bottom { align-self:start; margin-top:-24px; }
}

/* ABOUT FOOTER: reuse Home's body typography tokens without replacing About copy. */
body[data-page="home"] .site-footer[data-footer] .footer-label,
body[data-page="home"] .site-footer[data-footer] .footer-links,
body[data-page="home"] .site-footer[data-footer] .footer-bottom,
body[data-page="about"] .site-footer[data-footer] .footer-label,
body[data-page="about"] .site-footer[data-footer] .footer-links,
body[data-page="about"] .site-footer[data-footer] .footer-bottom {
  font-family:var(--font-body-cn);
}

/* GLOBAL COLOR SYSTEM v1.0 — Phase A: surface pairing and focus visibility. */
body[data-page="works"] .site-nav .nav-link { color:var(--paper); }
body[data-page="works"] .site-nav .nav-link[href="/"] { color:var(--paper); }
body[data-page="works"] .site-nav .nav-link[aria-current="page"] { color:var(--blue); }
body[data-page="about"] .site-header { color:var(--ink); }
body[data-page="about"] .site-nav .nav-link { color:var(--ink); }

.site-nav .nav-link[aria-current="page"]::after {
  content:'';
  position:absolute;
  right:6px;
  bottom:1px;
  left:6px;
  height:1px;
  background:currentColor;
  pointer-events:none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline:2px solid var(--focus-outline) !important;
  outline-offset:3px !important;
  box-shadow:0 0 0 4px var(--focus-shadow) !important;
}

/* GLOBAL COLOR SYSTEM v1.0 — Phase C/D final route alignment and safe UI cleanup. */
body[data-page="home"] .site-footer[data-footer] .footer-cta.footer-marquee {
  background:var(--bg-lavender);
  color:var(--text-on-dark-primary);
  border-top-color:var(--border-light);
  border-bottom-color:var(--border-light);
}
body[data-page="home"] .site-footer[data-footer] .footer-bottom {
  background:transparent;
  color:var(--text-on-light-primary);
  border-top:1px solid var(--border-light);
}
body[data-page="about"] .site-footer[data-footer] .footer-cta.footer-marquee {
  background:var(--bg-lavender);
  color:var(--text-on-dark-primary);
  border-top-color:var(--border-light);
  border-bottom-color:var(--border-light);
}
body[data-page="about"] .site-footer[data-footer] .footer-bottom {
  background:transparent;
  color:var(--text-on-light-primary);
  border-top:1px solid var(--border-light);
}
body[data-page="works"] .site-header,
body[data-page="works"] .site-nav .nav-link,
body[data-page="works"] .site-nav .nav-link[href="/"] {
  color:var(--nav-on-dark);
}
body[data-page="works"] .works-page {
  background:var(--bg-primary-dark);
  color:var(--text-on-dark-primary);
}
body[data-page="works"] .works-card {
  background:var(--bg-primary-dark);
  border-color:var(--accent-interactive);
}
body[data-page="works"] .works-card:hover { border-color:var(--accent-hover); }
body[data-page="works"] .works-meta-group { border-top:1px solid var(--border-dark); }
body[data-page="works"] .works-side-label { color:var(--text-on-dark-secondary); }
body[data-page="works"] .works-count button { color:var(--text-on-dark-meta); }
body[data-page="works"] .works-count button:hover,
body[data-page="works"] .works-count button:focus-visible,
body[data-page="works"] .works-count button[aria-current="true"] { color:var(--accent-active); }

/* HOME HERO — restore giant typography with bounded position. */
@media (min-width:901px) {
  body[data-page="home"] .home-name {
    position:relative;
    left:-1.2vw;
  }
  body[data-page="home"] .hero-media-wrap .hero-meta { top:-10px; }
}
@media (min-width:501px) and (max-width:900px) {
  body[data-page="home"] .home-name {
    width:calc(100% - 4vw);
    max-width:none;
    margin-inline:auto;
    letter-spacing:-.12em;
    position:relative;
    left:-1.2vw;
  }
}

/* Typography Production Migration v1.0 — bounded role mapping. */
body[data-page="home"] .home-name {
  font-family:var(--font-display-en);
  font-weight:700;
  letter-spacing:-.045em;
  line-height:.84;
  white-space:nowrap;
}
body[data-page="home"] .home-editorial-accent {
  font-family:var(--font-editorial-cn);
  font-weight:400;
}
body[data-page="about"] .about-personal-voice {
  font-family:var(--font-human-cn);
  font-weight:500;
}
@media (min-width:901px) {
  body[data-page="home"] .home-name { font-size:clamp(96px,14.4vw,208px); }
}
@media (min-width:501px) and (max-width:900px) {
  body[data-page="home"] .home-name {
    font-size:clamp(86px,32.55vw,126px);
    line-height:.84;
    letter-spacing:-.045em;
    max-width:calc(100% - 4vw);
    white-space:normal;
  }
}
@media (max-width:900px) {
  body[data-page="home"] .home-name .hero-char:nth-child(5) {
    display:block;
    width:100%;
    height:0;
    font-size:0;
    line-height:0;
  }
}
@media (max-width:500px) {
  body[data-page="home"] .home-name {
    font-size:clamp(68px,20vw,82px);
    line-height:.92;
    letter-spacing:-.035em;
    max-width:100%;
    white-space:normal;
  }
}

/* FINAL RESPONSIVE RHYTHM FIX — preserve the frozen desktop composition while
   removing mobile/tablet-only viewport slack from the handoff surfaces. */
@media (max-width:900px) and (min-width:501px) {
  body[data-page="home"] .home-hero[data-home-motion="hero"] { min-height:190svh; }
  body[data-page="home"] .home-purpose[data-manifesto] { min-height:76svh; }
  body[data-page="works"] .works-stage {
    height:min(100svh,820px);
    min-height:min(100svh,820px);
    grid-template-rows:26% 36% 38%;
  }
  body[data-page="about"] .about-copy[data-bio-reveal] { min-height:clamp(720px,90vh,900px); }
}

@media (max-width:500px) {
  body[data-page="home"] .home-hero[data-home-motion="hero"] { min-height:140svh; }
  body[data-page="home"] .home-purpose[data-manifesto] { min-height:76svh; }
  body[data-page="works"] .works-stage {
    height:min(100svh,820px);
    min-height:min(100svh,820px);
    grid-template-rows:26% 36% 38%;
  }
  body[data-page="works"] .works-prev,
  body[data-page="works"] .works-next { top:calc(26% - 58px); }
  body[data-page="about"] .about-copy[data-bio-reveal] { min-height:clamp(720px,90vh,900px); }
}

/* FINAL RESPONSIVE RHYTHM PASS 2 — mobile/tablet-only handoff tightening.
   The sticky Hero frame and desktop stage remain unchanged. */
@media (max-width:900px) and (min-width:501px) {
  body[data-page="home"] .home-hero[data-home-motion="hero"] { min-height:150svh; }
  body[data-page="home"] .home-purpose[data-manifesto]:not(.hero-manifesto-handoff-content) {
    height:auto;
    min-height:62svh;
  }
  body[data-page="works"] .works-stage {
    height:720px;
    min-height:720px;
    grid-template-rows:28% 38% 34%;
  }
  body[data-page="works"] .works-bottom { padding-top:24px; gap:20px; }
  body[data-page="about"] .about-copy[data-bio-reveal] { min-height:640px; }
  body[data-page="about"] .capabilities[data-capability-focus] { min-height:clamp(1080px,140vh,1260px); }
}

@media (max-width:500px) {
  body[data-page="home"] .home-hero[data-home-motion="hero"] { min-height:112svh; }
  body[data-page="home"] .home-purpose[data-manifesto]:not(.hero-manifesto-handoff-content) {
    height:auto;
    min-height:62svh;
  }
  body[data-page="works"] .works-stage {
    height:680px;
    min-height:680px;
    grid-template-rows:20% 40% 40%;
  }
  body[data-page="works"] .works-prev,
  body[data-page="works"] .works-next { top:calc(20% - 40px); }
  body[data-page="works"] .works-bottom { padding-top:68px; gap:14px; }
}