:root {
  --color-bg: #f3f1ec;
  --color-surface: #ebe8e1;
  --color-dark: #17191b;
  --color-text: #1b1d1f;
  --color-muted: #6d7073;
  --color-line: #cbc8c1;
  --color-line-dark: #373a3d;
  --color-accent: #354d68;
  --color-accent-hover: #263b52;
  --color-on-dark: #f2f0eb;
  --color-muted-dark: #a6aaad;

  --content-max: 1440px;
  --page-gutter: clamp(1.25rem, 4vw, 4rem);
  --grid-gap: clamp(1rem, 2vw, 2rem);

  --font-sans: Inter, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-display: Inter, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --text-xs: 0.72rem;
  --text-sm: 0.84rem;
  --text-base: clamp(0.96rem, 0.25vw + 0.9rem, 1.08rem);
  --text-lg: clamp(1.15rem, 0.7vw + 1rem, 1.55rem);
  --text-xl: clamp(1.65rem, 1.6vw + 1.2rem, 2.8rem);
  --text-2xl: clamp(2.7rem, 5.7vw, 6.8rem);
  --text-hero: clamp(3.5rem, 7.5vw, 8.6rem);

  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 7rem;
  --space-9: 9rem;

  --radius-sm: 2px;
  --radius-md: 4px;
  --transition-fast: 160ms;
  --transition-base: 260ms;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; width: 100%; height: auto; background: var(--color-surface); }
a { color: inherit; }
button { color: inherit; font: inherit; }
::selection { background: var(--color-accent); color: white; }

.site-header,
.hero,
.section,
.case-study,
.contact-section,
.site-footer {
  width: 100%;
  padding-left: max(var(--page-gutter), calc((100vw - var(--content-max)) / 2 + var(--page-gutter)));
  padding-right: max(var(--page-gutter), calc((100vw - var(--content-max)) / 2 + var(--page-gutter)));
}

.site-header {
  min-height: 5.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  border-bottom: 1px solid var(--color-line);
  background: rgba(243, 241, 236, 0.96);
  position: relative;
  z-index: 20;
}
.brand {
  flex: 0 0 auto;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
}
.brand span { margin-left: var(--space-2); color: var(--color-muted); font-weight: 400; }
.main-nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); }
.main-nav a {
  padding: 0.4rem 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color var(--transition-fast) ease;
}
.main-nav a:hover, .main-nav a:focus-visible { color: var(--color-accent); }
.menu-toggle { display: none; padding: 0.55rem 0.8rem; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: transparent; font-size: var(--text-sm); }

.hero {
  min-height: calc(100vh - 5.25rem);
  padding-top: clamp(5rem, 10vh, 8rem);
  padding-bottom: clamp(5rem, 10vh, 8rem);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: center;
}
.hero-copy { grid-column: 1 / span 7; }
.kicker { margin: 0 0 var(--space-4); color: var(--color-accent); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.hero h1, .case-intro h2, .contact-section h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 580;
  line-height: 0.91;
  letter-spacing: -0.065em;
}
.hero h1 em, .contact-section h2 em { color: var(--color-accent); font-family: inherit; font-style: normal; font-weight: inherit; }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: 0.25rem;
  border-bottom: 1px solid currentColor;
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-fast) ease;
}
.text-link:hover, .text-link:focus-visible { color: var(--color-accent-hover); }

.section { padding-top: var(--space-9); padding-bottom: var(--space-9); border-top: 1px solid var(--color-line); }
.section-header {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: end;
  margin-bottom: var(--space-7);
}
.section-header > div { grid-column: 1 / span 7; }
.section-header > p { grid-column: 8 / -1; max-width: 34rem; margin: 0; color: var(--color-muted); }
.section-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 580;
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.filter {
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-muted);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: color var(--transition-fast) ease, border-color var(--transition-fast) ease, background var(--transition-fast) ease;
}
.filter:hover, .filter:focus-visible { border-color: var(--color-accent); color: var(--color-accent); }
.filter.is-active { border-color: var(--color-accent); background: var(--color-accent); color: white; }

.project-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: var(--space-8); }
.project-card { grid-column: span 6; min-width: 0; }
.project-card a { display: block; text-decoration: none; }
.project-card img { width: 100%; height: auto; border-radius: var(--radius-sm); }
.project-meta { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-line); }
.project-meta span { color: var(--color-muted); font-size: var(--text-xs); letter-spacing: 0.11em; text-transform: uppercase; }
.project-meta h3 { margin: var(--space-2) 0 0.2rem; font-size: var(--text-xl); font-weight: 560; line-height: 1.06; letter-spacing: -0.035em; }
.project-meta p { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }

.case-study {
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  border-top: 1px solid var(--color-line);
}
.case-study--dark { background: var(--color-dark); color: var(--color-on-dark); }
.case-study--sand { background: var(--color-surface); }
.case-intro { grid-column: 1 / span 4; align-self: start; position: sticky; top: var(--space-5); }
.case-intro h2 { font-size: var(--text-2xl); overflow-wrap: anywhere; }
.case-intro > p:last-child { max-width: 26rem; margin-top: var(--space-5); color: var(--color-muted); }
.case-study--dark .case-intro > p:last-child { color: var(--color-muted-dark); }
.case-gallery, .photo-grid { grid-column: 6 / -1; display: grid; gap: var(--grid-gap); align-items: start; }
.case-gallery--covers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-gallery--covers img:first-child { grid-column: 1 / -1; }
#project-editorial .case-gallery--covers { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#project-editorial .case-gallery--covers img {
  grid-column: span 2;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  object-position: center;
  background: #111315;
}
.case-gallery img, .photo-grid img { width: 100%; height: auto; border-radius: var(--radius-sm); }
.photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.photo-grid img:first-child { grid-column: 1 / -1; }
#project-explorations .case-gallery img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.about-lead { grid-column: 1 / span 5; margin: 0; font-size: var(--text-xl); line-height: 1.08; letter-spacing: -0.035em; }
.about-copy { grid-column: 7 / -1; max-width: 40rem; }
.about-copy > p:first-child { margin-top: 0; font-size: var(--text-lg); }

dl { margin: var(--space-6) 0; }
dl div { display: grid; grid-template-columns: 8rem 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--color-line); }
dt { color: var(--color-muted); font-size: var(--text-xs); letter-spacing: 0.11em; text-transform: uppercase; }
dd { margin: 0; color: var(--color-muted); }

.document-links, .contact-links { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-6); }
.disabled-link { color: var(--color-muted); font-size: var(--text-sm); }


.contact-section { min-height: 78vh; padding-top: var(--space-9); padding-bottom: var(--space-9); display: flex; flex-direction: column; justify-content: center; background: var(--color-dark); color: var(--color-on-dark); }
.contact-section h2 { max-width: 68rem; }
.contact-section > p:not(.kicker) { margin: var(--space-6) 0 var(--space-3); color: var(--color-muted-dark); }
.contact-section a { overflow-wrap: anywhere; }
.contact-section .text-link { color: #9eafc1; }
.contact-section .text-link:hover { color: white; }

.site-footer { padding-top: var(--space-4); padding-bottom: var(--space-4); display: flex; justify-content: space-between; gap: var(--space-4); border-top: 1px solid var(--color-line-dark); background: var(--color-dark); color: var(--color-muted-dark); font-size: var(--text-xs); letter-spacing: 0.09em; text-transform: uppercase; }

@media (max-width: 900px) {
  :root { --space-9: 6.5rem; }
  .main-nav { display: none; position: absolute; top: 100%; left: var(--page-gutter); right: var(--page-gutter); padding: var(--space-4); flex-direction: column; align-items: flex-start; gap: var(--space-2); border: 1px solid var(--color-line-dark); background: var(--color-dark); color: var(--color-on-dark); }
  .main-nav.is-open { display: flex; }
  .main-nav a { width: 100%; color: var(--color-on-dark); }
  .menu-toggle { display: block; }
  .hero { min-height: auto; }
  .hero-copy { grid-column: 1 / span 8; }
  .case-intro { grid-column: 1 / span 5; position: static; }
  .case-gallery, .photo-grid { grid-column: 6 / -1; }
}

@media (max-width: 640px) {
  :root { --page-gutter: 1.125rem; --space-8: 5rem; --space-9: 5rem; }
  html { scroll-padding-top: 4.5rem; }
  .site-header { min-height: 4.5rem; }
  .brand span { display: none; }
  .hero { grid-template-columns: 1fr; gap: var(--space-6); padding-top: var(--space-7); padding-bottom: var(--space-7); }
  .hero-copy { grid-column: 1; }
  .hero h1 { font-size: clamp(3.3rem, 15vw, 5.4rem); }
  .section-header, .case-study { grid-template-columns: 1fr; }
  .section-header > div, .section-header > p, .about-lead, .about-copy, .case-intro, .case-gallery, .photo-grid { grid-column: 1; }
  .section-header > p { margin-top: var(--space-3); }
  .project-grid { grid-template-columns: 1fr; row-gap: var(--space-7); }
  .project-card { grid-column: 1; }
  .case-study { gap: var(--space-6); }
  .case-gallery--covers, .photo-grid { grid-template-columns: 1fr; }
  .case-gallery--covers img:first-child, .photo-grid img:first-child { grid-column: 1; }
  #project-editorial .case-gallery--covers { grid-template-columns: 1fr; }
  #project-editorial .case-gallery--covers img:nth-child(n) {
    grid-column: 1;
    aspect-ratio: 3 / 4;
  }
  dl div { grid-template-columns: 1fr; gap: var(--space-1); }
  .site-footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}
/* Header navigation refinement */
.site-header {
  min-height: 4.75rem;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom-color: transparent;
  background: rgba(243, 241, 236, 0.82);
  transition: background-color var(--transition-base) ease, border-color var(--transition-base) ease;
}
.site-header.is-scrolled,
.site-header.menu-is-open {
  border-bottom-color: var(--color-line);
  background: rgba(243, 241, 236, 0.97);
}
@supports (backdrop-filter: blur(10px)) {
  .site-header.is-scrolled,
  .site-header.menu-is-open { backdrop-filter: blur(10px); }
}
.site-header .brand {
  color: var(--color-text);
  outline-offset: 0.35rem;
}
.site-header .brand span { color: var(--color-muted); }
.site-header .main-nav { gap: clamp(1rem, 2vw, 2rem); }
.site-header .main-nav a {
  position: relative;
  color: var(--color-muted);
  font-size: var(--text-sm);
  letter-spacing: 0.015em;
  outline-offset: 0.35rem;
}
.site-header .main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-fast) ease;
}
.site-header .main-nav a:hover,
.site-header .main-nav a:focus-visible,
.site-header .main-nav a.is-current { color: var(--color-text); }
.site-header .main-nav a:hover::after,
.site-header .main-nav a:focus-visible::after,
.site-header .main-nav a.is-current::after { transform: scaleX(1); }
.resume-nav {
  padding: 0.4rem 0;
  border: 0;
  border-radius: 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1;
  cursor: not-allowed;
}
.resume-nav small { margin-left: 0.25rem; color: var(--color-accent); font-size: 0.58rem; letter-spacing: 0.06em; }
.menu-toggle { min-width: 4.1rem; outline-offset: 0.25rem; cursor: pointer; }
.menu-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }
.site-header :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 0.25rem; }
body.menu-open { overflow: hidden; }

@media (max-width: 900px) {
  .site-header { min-height: 4.5rem; }
  .site-header .main-nav {
    display: none;
    position: fixed;
    top: 4.5rem;
    left: 0;
    right: 0;
    max-height: calc(100vh - 4.5rem);
    overflow-y: auto;
    padding: var(--space-5) var(--page-gutter) var(--space-6);
    border: 0;
    border-bottom: 1px solid var(--color-line-dark);
    background: var(--color-dark);
  }
  .site-header .main-nav.is-open { display: flex; }
  .site-header .main-nav a {
    padding: 0.75rem 0;
    color: var(--color-on-dark);
    font-size: var(--text-lg);
  }
  .site-header .main-nav a:hover,
  .site-header .main-nav a:focus-visible,
  .site-header .main-nav a.is-current { color: white; }
  .site-header .main-nav a::after { background: #9eafc1; }
  .resume-nav { margin-top: var(--space-3); align-self: flex-start; border-color: var(--color-line-dark); color: var(--color-muted-dark); }
}

@media (max-width: 420px) {
  .site-header .brand { letter-spacing: 0.08em; }
  .site-header .brand span { display: none; }
}
/* Portfolio hero refinement */
.hero--portfolio {
  min-height: calc(100svh - 4.75rem);
  padding-top: clamp(3.5rem, 7vh, 6rem);
  padding-bottom: clamp(3.5rem, 7vh, 6rem);
  background: var(--color-dark);
  color: var(--color-on-dark);
  overflow: hidden;
}
.hero--portfolio .hero-copy { grid-column: 1 / span 6; align-self: center; min-width: 0; }
.hero-name { display: flex; gap: 0.8rem; margin: 0 0 var(--space-4); color: #b2bac2; font-size: var(--text-xs); font-weight: 650; letter-spacing: 0.14em; }
.hero-name span + span { padding-left: 0.8rem; border-left: 1px solid var(--color-line-dark); }
.hero--portfolio h1 { font-size: clamp(3.2rem, 5.7vw, 6.8rem); animation: hero-title-in 780ms cubic-bezier(.22,.8,.22,1) both; }
.hero--portfolio h1 > span { display: block; margin-top: var(--space-3); color: #aab3bc; font-size: clamp(1.05rem, 1.5vw, 1.55rem); font-weight: 430; letter-spacing: 0.01em; line-height: 1.2; }
.hero-intro-cn { max-width: 39rem; margin: var(--space-6) 0 var(--space-2); color: #d1d0cb; font-size: var(--text-base); }
.hero-intro-en { max-width: 41rem; margin: 0; color: var(--color-muted-dark); font-size: var(--text-sm); line-height: 1.65; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 0.45rem 1rem; margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.hero-tags li { color: #929ba4; font-size: var(--text-xs); letter-spacing: 0.035em; }
.hero-tags li::before { content: "—"; margin-right: 0.4rem; color: #72869c; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero-button { min-height: 2.8rem; padding: 0.72rem 1rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #5b6470; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; line-height: 1; text-decoration: none; transition: background-color var(--transition-fast) ease, border-color var(--transition-fast) ease, color var(--transition-fast) ease; }
.hero-button--primary { border-color: #d9d7d0; background: #e8e5de; color: var(--color-dark); }
.hero-button--primary:hover, .hero-button--primary:focus-visible { border-color: white; background: white; }
.hero-button--disabled { color: #7e848a; cursor: not-allowed; }
.hero-button--disabled small { margin-left: 0.4rem; color: #8da0b3; font-size: 0.58rem; letter-spacing: 0.08em; }
.hero-button:focus-visible { outline: 2px solid #9eafc1; outline-offset: 3px; }

.hero-collage { grid-column: 8 / -1; min-height: min(68vh, 680px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(12, minmax(0, 1fr)); gap: 0.75rem; align-self: center; }
.hero-art { margin: 0; min-width: 0; overflow: hidden; position: relative; background: #24272a; animation: hero-art-in 1050ms cubic-bezier(.22,.8,.22,1) both; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; }
.hero-art figcaption { position: absolute; left: 0; bottom: 0; padding: 0.45rem 0.6rem; background: rgba(20,22,24,.82); color: #d5d3cd; font-size: 0.6rem; letter-spacing: 0.07em; text-transform: uppercase; }
.hero-art--cover { grid-column: 1 / span 7; grid-row: 1 / span 10; }
.hero-art--3d { grid-column: 7 / -1; grid-row: 2 / span 6; animation-delay: 110ms; }
.hero-art--photo { grid-column: 6 / -1; grid-row: 8 / -1; animation-delay: 210ms; }

@keyframes hero-title-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-art-in { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(14px); } to { opacity: 1; clip-path: inset(0); transform: translateY(0); } }

@media (max-width: 900px) {
  .hero--portfolio { min-height: auto; grid-template-columns: 1fr; gap: var(--space-7); padding-top: var(--space-7); padding-bottom: var(--space-7); }
  .hero--portfolio .hero-copy, .hero-collage { grid-column: 1; }
  .hero-collage { width: 100%; min-height: clamp(430px, 78vw, 650px); }
  .hero-art--cover { grid-column: 1 / span 7; }
  .hero-art--3d { grid-column: 7 / -1; }
  .hero-art--photo { grid-column: 6 / -1; }
}

@media (max-width: 520px) {
  .hero--portfolio { gap: var(--space-6); padding-top: var(--space-6); }
  .hero--portfolio h1 { font-size: clamp(2.9rem, 14vw, 4.3rem); }
  .hero-name { flex-direction: column; gap: 0.2rem; }
  .hero-name span + span { padding-left: 0; border-left: 0; color: #8e99a3; }
  .hero-intro-cn { margin-top: var(--space-5); }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-button { width: 100%; padding-inline: 0.65rem; font-size: 0.74rem; }
  .hero-collage { min-height: 420px; gap: 0.5rem; }
  .hero-art figcaption { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero--portfolio h1, .hero-art { animation: none !important; }
}
/* About Me refinement */
.about-section .about-header { margin-bottom: var(--space-7); }
.about-section .about-header h2 span { color: var(--color-muted); font-size: 0.42em; font-weight: 430; letter-spacing: -0.02em; white-space: nowrap; }
.about-editorial { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); align-items: start; }
.about-photo { grid-column: 1 / span 4; margin: 0; }
.about-photo img { width: 100%; height: auto; background: var(--color-surface); }
.about-photo figcaption { margin-top: var(--space-2); color: var(--color-muted); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.about-narrative { grid-column: 6 / -1; max-width: 47rem; }
.about-narrative p { margin: 0 0 var(--space-4); color: var(--color-muted); }
.about-narrative .about-lead-text { margin-bottom: var(--space-5); color: var(--color-text); font-size: var(--text-lg); line-height: 1.55; letter-spacing: -0.018em; }
.capabilities { margin-top: var(--space-8); border-top: 1px solid var(--color-line); }
.capability-item { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); padding: var(--space-5) 0; border-bottom: 1px solid var(--color-line); }
.capability-number { grid-column: 1 / span 2; color: var(--color-accent); font-size: var(--text-xs); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.capability-item > div { grid-column: 4 / -1; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--grid-gap); }
.capability-item h3 { margin: 0; font-size: var(--text-lg); font-weight: 560; line-height: 1.2; letter-spacing: -0.025em; }
.capability-item p { max-width: 35rem; margin: 0; color: var(--color-muted); }

@media (max-width: 760px) {
  .about-section .about-header h2 span { display: block; margin-top: var(--space-2); font-size: 0.36em; }
  .about-editorial { grid-template-columns: 1fr; gap: var(--space-6); }
  .about-photo, .about-narrative { grid-column: 1; }
  .about-photo { width: min(76vw, 22rem); }
  .capabilities { margin-top: var(--space-7); }
  .capability-item { grid-template-columns: 2.25rem 1fr; gap: var(--space-3); }
  .capability-number { grid-column: 1; }
  .capability-item > div { grid-column: 2; grid-template-columns: 1fr; gap: var(--space-2); }
}
/* Selected Works data cards */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.project-card-trigger { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.project-card-trigger:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 5px; }
.project-card-image { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface); }
.project-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-base) ease; }
.project-card-trigger:hover .project-card-image img { transform: scale(1.015); }
.project-card .project-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem var(--space-4); }
.project-card .project-category { grid-column: 1; color: var(--color-accent); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; }
.project-card .project-meta strong { grid-column: 1; margin-top: var(--space-2); font-size: var(--text-xl); font-weight: 560; line-height: 1.08; letter-spacing: -0.035em; overflow-wrap: anywhere; }
.project-title-zh { grid-column: 1; color: var(--color-muted); font-size: var(--text-sm); }
.project-subtitle { grid-column: 1; color: var(--color-muted); font-size: var(--text-xs); letter-spacing:.02em; }
.project-secondary { grid-column: 2; grid-row: 1 / span 4; align-self: start; color: var(--color-muted); font-size: var(--text-xs); text-align: right; }
.project-empty { margin: var(--space-6) 0 0; padding: var(--space-5) 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); color: var(--color-muted); }

@media (max-width: 640px) {
  .project-card .project-meta { grid-template-columns: 1fr; }
  .project-secondary { grid-column: 1; grid-row: auto; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .project-card-image img { transition: none; }
  .project-card-trigger:hover .project-card-image img { transform: none; }
}
/* Selected Works editorial layout */
.work-section .filter-bar { gap: var(--space-4); margin-bottom: var(--space-7); border-bottom: 1px solid var(--color-line); }
.work-section .filter { padding: 0.45rem 0 0.65rem; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; color: var(--color-muted); }
.work-section .filter:hover, .work-section .filter:focus-visible { border-bottom-color: var(--color-accent); background: transparent; color: var(--color-text); }
.work-section .filter.is-active { border-bottom-color: var(--color-accent); background: transparent; color: var(--color-accent); }
.work-section .filter:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.work-section .project-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: clamp(5rem, 9vw, 9rem); align-items: start; }
.work-section .project-card { min-width: 0; }
.work-section .project-grid--all .project-card:first-child { grid-column: 1 / -1; }
.work-section .project-grid--all .project-card:first-child .project-card-image { aspect-ratio: 16 / 7; }
.work-section .project-grid--all .project-card:not(:first-child) { grid-column: span 6; margin-top: 0; }
.work-section .project-grid--all .project-card:not(:first-child) .project-card-image { aspect-ratio: 4 / 3; }
.work-section .project-grid:not(.project-grid--all) .project-card { grid-column: span 6; margin-top: 0; }
.work-section .project-grid:not(.project-grid--all) .project-card:only-child { grid-column: 3 / span 8; }
.work-section .project-grid:not(.project-grid--all) .project-card .project-card-image { aspect-ratio: 4 / 3; }

.work-section .project-card-image { position: relative; border-radius: 0; }
.work-section .project-card-image::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(15, 18, 21, 0.3); opacity: 0; transition: opacity var(--transition-base) ease; pointer-events: none; }
.work-section .project-card-image::after { content: attr(data-view-label); position: absolute; right: var(--space-3); bottom: var(--space-3); z-index: 2; padding: 0.45rem 0.65rem; border: 1px solid rgba(255,255,255,.65); color: white; font-size: var(--text-xs); letter-spacing: .06em; opacity: 0; transform: translateY(6px); transition: opacity var(--transition-base) ease, transform var(--transition-base) ease; pointer-events: none; }
.work-section .project-card-image img { transform: scale(1); transition: transform 520ms cubic-bezier(.22,.8,.22,1); }
.work-section .project-meta { grid-template-columns: minmax(0, 1fr) auto; padding-top: var(--space-3); }
.work-section .project-meta strong { transition: transform var(--transition-base) ease; }
.work-section .project-title-zh { max-width: 28rem; }
.work-section .project-secondary { max-width: 7.5rem; }
.work-section .project-card-trigger:hover .project-card-image::before,
.work-section .project-card-trigger:focus-visible .project-card-image::before,
.work-section .project-card-trigger:hover .project-card-image::after,
.work-section .project-card-trigger:focus-visible .project-card-image::after { opacity: 1; transform: translateY(0); }
.work-section .project-card-trigger:hover .project-card-image img,
.work-section .project-card-trigger:focus-visible .project-card-image img { transform: scale(1.025); }
.work-section .project-card-trigger:hover .project-meta strong,
.work-section .project-card-trigger:focus-visible .project-meta strong { transform: translateX(5px); }

@media (max-width: 760px) {
  .work-section .filter-bar { gap: var(--space-3); overflow-x: auto; scrollbar-width: thin; }
  .work-section .filter { flex: 0 0 auto; }
  .work-section .project-grid { grid-template-columns: 1fr; row-gap: var(--space-7); }
  .work-section .project-grid--all .project-card:first-child,
  .work-section .project-grid--all .project-card:not(:first-child),
  .work-section .project-grid:not(.project-grid--all) .project-card,
  .work-section .project-grid:not(.project-grid--all) .project-card:only-child { grid-column: 1; margin-top: 0; }
  .work-section .project-grid--all .project-card:first-child .project-card-image,
  .work-section .project-grid--all .project-card:not(:first-child) .project-card-image,
  .work-section .project-grid:not(.project-grid--all) .project-card .project-card-image { aspect-ratio: 4 / 3; }
}

.work-section .project-grid .project-card[data-project-id="medical-visualization-collection"] .project-card-image {
  aspect-ratio: 5161 / 1954;
}
.work-section .project-card[data-project-id="medical-visualization-collection"] .project-card-image img {
  object-fit: contain;
  object-position: center;
}

@media (hover: none) {
  .work-section .project-card-image::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .work-section .project-card-image img,
  .work-section .project-meta strong,
  .work-section .project-card-image::before,
  .work-section .project-card-image::after { transition: none; }
}
/* Project detail modal */
body.project-modal-open { overflow: hidden; }
.project-modal[hidden], .image-lightbox[hidden] { display: none; }
.project-modal { position: fixed; inset: 0; z-index: 300; overflow-y: auto; padding: clamp(1rem, 3vw, 2.5rem); background: rgba(12, 14, 16, 0.78); }
.project-dialog { width: min(100%, 1380px); min-height: calc(100vh - clamp(2rem, 6vw, 5rem)); margin: 0 auto; padding: clamp(1.25rem, 4vw, 4rem); position: relative; background: var(--color-bg); color: var(--color-text); }
.project-close { position: sticky; top: 0; z-index: 3; margin-left: auto; padding: 0.55rem 0; display: flex; align-items: center; gap: 0.6rem; border: 0; border-bottom: 1px solid var(--color-text); background: var(--color-bg); color: var(--color-text); font-size: var(--text-sm); cursor: pointer; }
.project-close span { font-size: 1.25rem; line-height: 1; }
.project-dialog button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.project-detail-header { max-width: 72rem; padding: var(--space-6) 0 var(--space-7); }
.project-detail-category, .project-detail-label { margin: 0 0 var(--space-3); color: var(--color-accent); font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.project-detail-header h2 { max-width: 66rem; margin: 0; font-size: var(--text-2xl); font-weight: 580; line-height: .94; letter-spacing: -.055em; overflow-wrap: anywhere; }
.project-detail-title-zh { margin: var(--space-3) 0 0; color: var(--color-muted); font-size: var(--text-lg); }
.project-detail-subtitle { margin: var(--space-2) 0 0; color: var(--color-muted); font-size: var(--text-sm); }
.project-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 var(--space-8); border-top: 1px solid var(--color-line); border-left: 1px solid var(--color-line); }
.project-facts div { display: block; min-width: 0; padding: var(--space-4); border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.project-facts dt { margin-bottom: var(--space-2); }
.project-facts dd { overflow-wrap: anywhere; }
.project-detail-section { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); padding: var(--space-7) 0; border-top: 1px solid var(--color-line); }
.project-detail-label { grid-column: 1 / span 3; }
.project-detail-lead { grid-column: 5 / -1; max-width: 48rem; margin: 0; font-size: var(--text-lg); line-height: 1.55; }
.project-todo { grid-column: 5 / -1; min-height: 13rem; padding: var(--space-5); display: flex; flex-direction: column; justify-content: center; border: 1px dashed var(--color-line); background: var(--color-surface); color: var(--color-muted); }
.project-todo strong { color: var(--color-accent); font-size: var(--text-xs); letter-spacing: .14em; }
.project-todo p { margin: var(--space-2) 0 0; }
.project-gallery { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
.project-gallery button { padding: 0; position: relative; border: 0; background: var(--color-surface); cursor: zoom-in; overflow: hidden; }
.project-gallery img { width: 100%; height: auto; transition: transform var(--transition-base) ease; }
.project-gallery button:hover img, .project-gallery button:focus-visible img { transform: scale(1.015); }
.project-gallery button span { position: absolute; right: var(--space-3); bottom: var(--space-3); padding: .45rem .65rem; background: rgba(18,20,22,.85); color: white; font-size: var(--text-xs); }
.project-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-8); border-top: 1px solid var(--color-line); }
.project-navigation button { min-width: 0; padding: var(--space-5) 0; display: flex; flex-direction: column; gap: .35rem; border: 0; border-bottom: 1px solid var(--color-line); background: transparent; text-align: left; cursor: pointer; }
.project-navigation button + button { padding-left: var(--space-5); border-left: 1px solid var(--color-line); text-align: right; }
.project-navigation span { color: var(--color-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; }
.project-navigation strong { font-size: var(--text-lg); font-weight: 560; overflow-wrap: anywhere; }

.image-lightbox { position: fixed; inset: 0; z-index: 400; padding: clamp(1rem, 3vw, 2.5rem); display: grid; place-items: center; background: rgba(8, 10, 12, .94); color: white; }
.lightbox-dialog { width: 100%; height: 100%; display: grid; grid-template-columns: 3rem minmax(0, 1fr) 3rem; grid-template-rows: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.lightbox-close { grid-column: 1 / -1; justify-self: end; padding: .5rem 0; border: 0; border-bottom: 1px solid #777; background: transparent; color: white; cursor: pointer; }
.lightbox-close span { margin-left: .5rem; font-size: 1.2rem; }
.lightbox-previous, .lightbox-next { width: 3rem; height: 3rem; border: 1px solid #555; background: transparent; color: white; cursor: pointer; }
.lightbox-previous:disabled, .lightbox-next:disabled { opacity: .3; cursor: default; }
.lightbox-dialog figure { min-width: 0; max-width: 100%; max-height: 100%; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.lightbox-dialog figure img { width: auto; max-width: 100%; max-height: calc(100vh - 9rem); object-fit: contain; background: transparent; }
.lightbox-dialog figcaption { margin-top: var(--space-2); color: #aaa; font-size: var(--text-xs); }

@media (max-width: 700px) {
  .project-modal { padding: 0; }
  .project-dialog { min-height: 100vh; padding: var(--space-4) var(--page-gutter) var(--space-6); }
  .project-detail-header { padding-top: var(--space-5); }
  .project-facts { grid-template-columns: 1fr; }
  .project-detail-section { grid-template-columns: 1fr; gap: var(--space-4); }
  .project-detail-label, .project-detail-lead, .project-todo { grid-column: 1; }
  .project-gallery { grid-template-columns: 1fr; }
  .project-navigation { grid-template-columns: 1fr; }
  .project-navigation button + button { padding-left: 0; border-left: 0; text-align: left; }
  .lightbox-dialog { grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; gap: .4rem; }
  .lightbox-previous, .lightbox-next { width: 2.5rem; height: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .project-gallery img { transition: none; }
}
/* Medical & Scientific Visualization detail */
.materials-header + .project-facts { grid-template-columns: 1fr .7fr 2fr 1fr; }
.materials-showcase--dark { margin-left: calc(var(--space-5) * -1); margin-right: calc(var(--space-5) * -1); padding-left: var(--space-5); padding-right: var(--space-5); border-top-color: #3b3e42; background: var(--color-dark); color: var(--color-on-dark); }
.materials-showcase--dark .project-detail-label { color: #9eafc1; }
.materials-primary-image { grid-column: 4 / -1; }
.materials-primary-image button, .materials-secondary-image button, .materials-supplement-grid button { width: 100%; padding: 0; position: relative; border: 0; background: #222528; overflow: hidden; cursor: zoom-in; }
.materials-primary-image img, .materials-secondary-image img, .materials-supplement-grid img { width: 100%; height: auto; }
.materials-primary-image button span, .materials-secondary-image button span, .materials-supplement-grid button span { position: absolute; right: var(--space-3); bottom: var(--space-3); padding: .45rem .65rem; background: rgba(15,17,19,.85); color: white; font-size: var(--text-xs); }
.materials-overview-copy { grid-column: 5 / -1; }
.materials-directions { margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--color-line); list-style: none; }
.materials-directions li { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line); color: var(--color-muted); }
.materials-directions li:nth-child(odd) { padding-right: var(--space-4); }
.materials-directions li:nth-child(even) { padding-left: var(--space-4); border-left: 1px solid var(--color-line); }
.materials-secondary-image { grid-column: 4 / -1; }
.materials-secondary-image > p { margin: var(--space-2) 0 0; color: var(--color-muted-dark); font-size: var(--text-xs); }
.materials-supplement-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); align-items: start; }
.materials-supplement-grid button:nth-child(2) { margin-top: var(--space-6); }
.materials-supplement-grid button:nth-child(3) { margin-top: var(--space-3); }
.materials-process { background: var(--color-bg); }

@media (max-width: 700px) {
  .materials-header + .project-facts { grid-template-columns: 1fr; }
  .materials-showcase--dark { margin-left: 0; margin-right: 0; padding-left: var(--space-3); padding-right: var(--space-3); }
  .materials-primary-image, .materials-overview-copy, .materials-secondary-image, .materials-supplement-grid { grid-column: 1; }
  .materials-directions { grid-template-columns: 1fr; }
  .materials-directions li:nth-child(n) { padding-left: 0; padding-right: 0; border-left: 0; }
  .materials-supplement-grid { grid-template-columns: 1fr; }
  .materials-supplement-grid button:nth-child(n) { margin-top: 0; }
}
/* Retro Repair Shop detail */
.retro-header + .project-facts { grid-template-columns: 1fr .7fr 2fr 1fr; }
.retro-hero-image, .retro-wide-image { grid-column: 4 / -1; }
.retro-hero-image button, .retro-wide-image button, .retro-furnishing-layout button, .retro-props-grid button { width: 100%; padding: 0; position: relative; border: 0; background: var(--color-surface); overflow: hidden; cursor: zoom-in; }
.retro-hero-image img, .retro-wide-image img { width: 100%; height: auto; }
.retro-hero-image button span, .retro-wide-image button span, .retro-furnishing-layout button span, .retro-props-grid button span { position: absolute; right: var(--space-3); bottom: var(--space-3); padding: .45rem .65rem; background: rgba(15,17,19,.85); color: white; font-size: var(--text-xs); }
.retro-hero-image .project-detail-lead { margin-top: var(--space-5); }
.retro-dark-section { margin-left: calc(var(--space-5) * -1); margin-right: calc(var(--space-5) * -1); padding-left: var(--space-5); padding-right: var(--space-5); border-top-color: #3b3e42; background: var(--color-dark); color: var(--color-on-dark); }
.retro-dark-section .project-detail-label { color: #9eafc1; }
.retro-furnishing-layout { grid-column: 4 / -1; display: grid; grid-template-columns: minmax(15rem, .8fr) minmax(0, 1.2fr); gap: var(--grid-gap); align-items: start; }
.retro-furnishing-layout button { aspect-ratio: 16 / 9; }
.retro-furnishing-layout img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }
.retro-design-points { margin: 0; padding: 0; list-style: none; counter-reset: retro-point; border-top: 1px solid var(--color-line); }
.retro-design-points li { counter-increment: retro-point; padding: var(--space-4) 0; display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--space-3); border-bottom: 1px solid var(--color-line); color: var(--color-muted); }
.retro-design-points li::before { content: counter(retro-point, decimal-leading-zero); color: var(--color-accent); font-size: var(--text-xs); }
.retro-props-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); align-items: start; }
.retro-props-grid button { aspect-ratio: 16 / 9; }
.retro-props-grid img { width: 100%; height: 100%; object-fit: cover; }
.retro-props-video { margin: 0; min-width: 0; }
.retro-props-video video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #0f1113; object-fit: contain; }
.retro-props-video figcaption { margin-top: var(--space-2); color: var(--color-muted); font-size: var(--text-xs); letter-spacing: .06em; }

@media (max-width: 700px) {
  .retro-header + .project-facts { grid-template-columns: 1fr; }
  .retro-hero-image, .retro-wide-image, .retro-furnishing-layout, .retro-props-grid { grid-column: 1; }
  .retro-dark-section { margin-left: 0; margin-right: 0; padding-left: var(--space-3); padding-right: var(--space-3); }
  .retro-furnishing-layout, .retro-props-grid { grid-template-columns: 1fr; }
  .retro-furnishing-layout button, .retro-props-grid button { aspect-ratio: 16 / 9; }
}
/* 3D Explorations detail */
.explorations-overview .project-detail-lead { grid-column: 5 / -1; }
.exploration-study { padding-top: clamp(5rem, 9vw, 9rem); padding-bottom: clamp(5rem, 9vw, 9rem); }
.exploration-study figure { margin: 0; }
.exploration-study button { width: 100%; padding: 0; position: relative; border: 0; background: var(--color-surface); overflow: hidden; cursor: zoom-in; }
.exploration-study img { width: 100%; height: auto; }
.exploration-study button span { position: absolute; right: var(--space-3); bottom: var(--space-3); padding: .45rem .65rem; background: rgba(15,17,19,.85); color: white; font-size: var(--text-xs); }
.exploration-study figcaption { margin-top: var(--space-2); color: var(--color-muted); font-size: var(--text-xs); letter-spacing: .06em; }
.exploration-bumper-layout { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); align-items: start; }
.exploration-bumper-layout .exploration-main-image { grid-column: auto; }
.exploration-bumper-video { margin: 0; min-width: 0; }
.exploration-bumper-video video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #0f1113; object-fit: contain; }
.exploration-swan-layout { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); align-items: start; }
.exploration-swan-layout .exploration-swan-image { grid-column: auto; }
.exploration-swan-video { margin: 0; min-width: 0; }
.exploration-swan-video video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #0f1113; object-fit: contain; }
.exploration-carousel-layout { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); align-items: start; }
.exploration-carousel-layout .exploration-carousel-image { grid-column: auto; }
.exploration-carousel-video { margin: 0; min-width: 0; }
.exploration-carousel-video video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #0f1113; object-fit: contain; }
.exploration-main-image, .exploration-carousel-image, .exploration-swan-image { grid-column: 2 / -2; }
.exploration-main-image button, .exploration-carousel-image button, .exploration-swan-image button { aspect-ratio: 16 / 9; }
.exploration-main-image img, .exploration-carousel-image img, .exploration-swan-image img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 700px) {
  .explorations-overview .project-detail-lead, .exploration-main-image, .exploration-carousel-image, .exploration-swan-image { grid-column: 1; }
  .exploration-study { padding-top: var(--space-7); padding-bottom: var(--space-7); }
  .exploration-bumper-layout { grid-template-columns: 1fr; }
  .exploration-swan-layout { grid-template-columns: 1fr; }
  .exploration-carousel-layout { grid-template-columns: 1fr; }
  .exploration-main-image button, .exploration-carousel-image button, .exploration-swan-image button { aspect-ratio: 16 / 9; }
}

/* Between Places detail */
.between-overview .project-detail-lead{grid-column:5/-1}.between-spread{padding-top:clamp(5rem,9vw,9rem);padding-bottom:clamp(5rem,9vw,9rem);align-items:start}
.between-photo{margin:0;min-width:0}.between-photo button{width:100%;padding:0;position:relative;border:0;background:transparent;overflow:hidden;cursor:zoom-in}
.between-photo img{display:block;width:100%;height:auto;max-width:100%;filter:none}.between-photo button span{position:absolute;right:var(--space-3);bottom:var(--space-3);padding:.45rem .65rem;background:rgba(15,17,19,.82);color:#fff;font-size:var(--text-xs)}
.between-photo figcaption{margin-top:var(--space-2);color:var(--color-muted);font-size:var(--text-xs);letter-spacing:.06em}
.between-photo--opener{grid-column:1/-1}.between-photo--platform{grid-column:1/span 7}.between-photo--child{grid-column:9/-1;margin-top:clamp(5rem,11vw,11rem)}
.between-photo--carriage{grid-column:3/-1}.between-photo--fireworks{grid-column:1/span 8}.between-photo--door{grid-column:10/-1;margin-top:clamp(7rem,14vw,14rem)}
.between-photo--interior{grid-column:2/span 5}.between-photo--silhouette{grid-column:8/-1;margin-top:clamp(4rem,8vw,8rem)}
@media(max-width:700px){.between-overview .project-detail-lead,.between-photo{grid-column:1}.between-spread{padding-top:var(--space-7);padding-bottom:var(--space-7)}.between-photo--child,.between-photo--door,.between-photo--silhouette{margin-top:var(--space-6)}}


/* Visual Development & Personal Projects detail */
.visual-development-overview .project-detail-lead{grid-column:5/-1}
.visual-project-section{padding-top:clamp(2.25rem,4vw,4rem);padding-bottom:clamp(2.25rem,4vw,4rem);row-gap:clamp(.85rem,1.5vw,1.35rem)}
.visual-project-figure{margin:0;min-width:0}.visual-project-figure button{width:100%;padding:0;position:relative;border:0;background:transparent;overflow:hidden;cursor:zoom-in}
.visual-project-figure img{display:block;width:100%;height:auto;max-width:100%}.visual-project-figure button span{position:absolute;right:var(--space-3);bottom:var(--space-3);padding:.45rem .65rem;background:rgba(15,17,19,.82);color:#fff;font-size:var(--text-xs)}
.visual-project-figure figcaption{margin-top:var(--space-2);color:var(--color-muted);font-size:var(--text-xs);letter-spacing:.05em}
.visual-sopo-hero .visual-project-figure{grid-column:1/-1}.visual-sopo-main img{max-height:82vh;object-fit:contain;background:#17191b}
.visual-concept-layout{grid-column:4/-1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(14rem,.65fr);gap:var(--space-7);align-items:start}
.visual-concept-layout .project-detail-lead{grid-column:auto;margin:0}.visual-theme-list{margin:0;padding:0;border-top:1px solid var(--color-line);list-style:none;counter-reset:visual-theme}
.visual-theme-list li{counter-increment:visual-theme;padding:var(--space-3) 0 var(--space-3) 2.5rem;position:relative;border-bottom:1px solid var(--color-line);color:var(--color-muted)}
.visual-theme-list li::before{content:counter(visual-theme,decimal-leading-zero);position:absolute;left:0;color:var(--color-accent);font-size:var(--text-xs)}
.visual-environment-grid,.visual-sequence-grid,.visual-narrative-grid,.visual-output-grid{grid-column:1/-1;display:grid;gap:var(--grid-gap);align-items:start}
.visual-environment-grid{grid-template-columns:1fr;max-width:70rem;margin-left:auto;margin-right:auto;align-items:start}
.visual-sequence-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.visual-sequence-grid img{max-height:72vh;object-fit:contain;background:#e8e4dc}
.visual-narrative-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:70rem;margin-left:auto;margin-right:auto}.visual-narrative-grid img{max-height:76vh;object-fit:contain;background:#e8e4dc}.visual-narrative-supporting{grid-column:1/-1;width:100%;max-width:60rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap);justify-self:center;margin-top:var(--space-3)}.visual-narrative-supporting .visual-project-figure{grid-column:auto;width:auto;max-width:none;justify-self:stretch;margin-top:0}.visual-narrative-supporting button{aspect-ratio:4/3;background:#e8e4dc}.visual-narrative-supporting img{width:100%;height:100%;max-height:none;object-fit:contain}
.visual-output-grid{grid-template-columns:1fr;max-width:70rem;margin-left:auto;margin-right:auto;align-items:start}.visual-project-board img{width:100%;max-height:none;object-fit:contain;background:#e8e4dc}
@media(max-width:700px){
  .visual-development-overview .project-detail-lead,.visual-sopo-hero .visual-project-figure,.visual-concept-layout,.visual-environment-grid,.visual-sequence-grid,.visual-narrative-grid,.visual-output-grid{grid-column:1}
  .visual-project-section{padding-top:var(--space-5);padding-bottom:var(--space-5);row-gap:var(--space-3)}
  .visual-narrative-supporting{grid-template-columns:1fr;gap:var(--space-3)}
  .visual-concept-layout,.visual-environment-grid,.visual-sequence-grid,.visual-narrative-grid,.visual-output-grid{grid-template-columns:1fr;gap:var(--space-3)}
  .visual-sequence-grid .visual-project-figure,.visual-narrative-grid .visual-project-figure,.visual-gameplay-frame{margin-top:var(--space-2)}
}

/* Experience editorial timeline */
#experience{scroll-margin-top:5.5rem}
.experience-section .section-header>p{max-width:none;text-align:right}
.experience-timeline{border-top:1px solid var(--color-line)}
.experience-entry{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap);padding:var(--space-6) 0;border-bottom:1px solid var(--color-line);align-items:start}
.experience-entry time{grid-column:1/span 2;color:var(--color-muted);font-size:var(--text-sm);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.experience-index{grid-column:3;color:var(--color-accent);font-size:var(--text-xs);letter-spacing:.12em}
.experience-content{grid-column:4/-1}
.experience-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-5);padding-bottom:var(--space-4)}
.experience-heading h3{margin:0;font-size:var(--text-xl);font-weight:560;line-height:1.08;letter-spacing:-.025em}
.experience-role{margin:var(--space-2) 0 0;color:var(--color-text);font-size:var(--text-sm)}
.experience-todo-label{flex:0 0 auto;color:var(--color-accent);font-size:var(--text-xs);letter-spacing:.06em}
.experience-duties{margin:0;padding:var(--space-4) 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-6);border-top:1px solid var(--color-line);list-style:none;counter-reset:experience-duty}
.experience-duties li{counter-increment:experience-duty;position:relative;padding:var(--space-2) 0 var(--space-2) 2.4rem;color:var(--color-muted);line-height:1.7}
.experience-duties li::before{content:counter(experience-duty,decimal-leading-zero);position:absolute;left:0;top:.72rem;color:var(--color-accent);font-size:var(--text-xs)}
.experience-entry--current{padding-top:var(--space-7);padding-bottom:var(--space-7)}
.experience-entry--current .experience-content{padding-left:var(--space-4);border-left:2px solid var(--color-accent)}
.experience-entry--current .experience-heading h3{font-size:clamp(1.9rem,3vw,3.2rem)}
.experience-entry--secondary{padding-top:var(--space-5);padding-bottom:var(--space-5)}
.experience-entry--secondary .experience-heading h3{font-size:var(--text-lg)}
.experience-entry--secondary .experience-duties{grid-template-columns:1fr;max-width:48rem}
@media(max-width:700px){
  .experience-section .section-header>p{text-align:left}
  .experience-entry{grid-template-columns:1fr;gap:var(--space-2);padding:var(--space-5) 0}
  .experience-entry time,.experience-index,.experience-content{grid-column:1}
  .experience-index{display:none}
  .experience-entry--current .experience-content{margin-top:var(--space-2);padding-left:var(--space-3)}
  .experience-heading{display:block;padding-bottom:var(--space-3)}
  .experience-heading h3,.experience-entry--current .experience-heading h3{font-size:var(--text-xl);line-height:1.15}
  .experience-todo-label{display:block;margin-top:var(--space-3)}
  .experience-duties{grid-template-columns:1fr;padding-top:var(--space-3);column-gap:0}
  .experience-duties li{padding-left:2rem}
}


/* Skills editorial matrix */
#skills{scroll-margin-top:5.5rem}
.skills-section .section-header>p{max-width:none;text-align:right}
.skills-matrix{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));border-top:1px solid var(--color-line)}
.skill-group{grid-column:span 6;padding:var(--space-6) var(--space-5) var(--space-7) 0;border-bottom:1px solid var(--color-line)}
.skill-group:nth-child(even){padding-right:0;padding-left:var(--space-5);border-left:1px solid var(--color-line)}
.skill-group header{display:grid;grid-template-columns:2rem 1fr;gap:var(--space-3);align-items:baseline;margin-bottom:var(--space-6)}
.skill-group header span{color:var(--color-accent);font-size:var(--text-xs);letter-spacing:.1em}
.skill-group h3{margin:0;font-size:clamp(1.7rem,3vw,3rem);font-weight:560;line-height:1;letter-spacing:-.03em}
.skill-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
.skill-column--wide{grid-column:1/-1}
.skill-label{margin:0 0 var(--space-3);color:var(--color-muted);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase}
.skill-column ul{margin:0;padding:0;border-top:1px solid var(--color-line);list-style:none}
.skill-column li{min-height:2.8rem;padding:.72rem 0;display:flex;justify-content:space-between;gap:var(--space-3);align-items:baseline;border-bottom:1px solid var(--color-line);color:var(--color-text);font-size:var(--text-sm)}
.skill-column li small{color:var(--color-accent);font-size:var(--text-xs);font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.skill-group--other .skill-column ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-5)}
@media(max-width:700px){
  .skills-section .section-header>p{text-align:left}
  .skills-matrix{grid-template-columns:1fr}
  .skill-group,.skill-group:nth-child(even){grid-column:1;padding:var(--space-5) 0 var(--space-6);border-left:0}
  .skill-group header{margin-bottom:var(--space-5)}
  .skill-group h3{font-size:var(--text-xl)}
  .skill-columns{grid-template-columns:1fr;gap:var(--space-3)}
  .skill-column--wide{grid-column:1}
  .skill-group--other .skill-column ul{grid-template-columns:1fr;column-gap:0}
}


/* Education & Recognition */
#education{scroll-margin-top:5.5rem}
.education-section{padding-top:var(--space-8);padding-bottom:var(--space-8)}
.education-section .section-header{margin-bottom:var(--space-6)}
.education-section .section-header>p{max-width:none;text-align:right}
.education-recognition-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap);border-top:1px solid var(--color-line)}
.education-record{grid-column:1/span 7;padding:var(--space-5) var(--space-5) var(--space-5) 0;border-right:1px solid var(--color-line)}
.education-meta{display:flex;justify-content:space-between;gap:var(--space-4);color:var(--color-muted);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase}
.education-meta p,.education-main p,.education-label{margin:0}.education-meta time{font-variant-numeric:tabular-nums}
.education-main{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(13rem,.8fr);gap:var(--space-5);align-items:end;padding:var(--space-6) 0}
.education-main h3{margin:0;font-size:clamp(2rem,4vw,4rem);font-weight:560;line-height:1;letter-spacing:-.035em}
.education-main p{color:var(--color-muted);line-height:1.7}
.education-label{color:var(--color-muted);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase}
.education-directions{padding-top:var(--space-4);border-top:1px solid var(--color-line)}
.education-directions ul{margin:var(--space-3) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--space-4);list-style:none}
.education-directions li{padding:.65rem 0;border-bottom:1px solid var(--color-line);font-size:var(--text-sm)}
.recognition-list{grid-column:8/-1;padding:var(--space-5) 0}
.recognition-heading{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);margin-bottom:var(--space-4)}
.recognition-heading h3{margin:0;font-size:var(--text-lg);font-weight:560}
.recognition-list ol{margin:0;padding:0;border-top:1px solid var(--color-line);list-style:none}
.recognition-list li{display:grid;grid-template-columns:2rem 1fr;gap:var(--space-3);padding:.85rem 0;border-bottom:1px solid var(--color-line)}
.recognition-list li>span{color:var(--color-accent);font-size:var(--text-xs);letter-spacing:.08em}
.recognition-list li p{margin:0;font-size:var(--text-sm);line-height:1.5}
.recognition-list li small{color:var(--color-muted);font-size:var(--text-xs)}
@media(max-width:700px){
  .education-section{padding-top:var(--space-7);padding-bottom:var(--space-7)}
  .education-section .section-header>p{text-align:left}
  .education-recognition-grid{grid-template-columns:1fr}
  .education-record,.recognition-list{grid-column:1;padding:var(--space-5) 0;border-right:0}
  .education-record{border-bottom:1px solid var(--color-line)}
  .education-meta{display:grid;gap:var(--space-2)}
  .education-main{grid-template-columns:1fr;gap:var(--space-3);padding:var(--space-5) 0}
  .education-main h3{font-size:var(--text-xl)}
  .education-directions ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .recognition-heading{display:block}.recognition-heading h3{margin-top:var(--space-2)}
}


/* Contact & footer */
#contact{scroll-margin-top:5.5rem}
.contact-section{min-height:82vh;padding-top:var(--space-9);padding-bottom:var(--space-8);display:block;background:var(--color-dark);color:var(--color-on-dark)}
.contact-header{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap);padding-bottom:var(--space-7);border-bottom:1px solid var(--color-line-dark)}
.contact-header>.kicker{grid-column:1/span 3}
.contact-title{grid-column:4/-1}.contact-title h2{max-width:62rem;font-size:clamp(3.4rem,7.5vw,8rem);line-height:.9;letter-spacing:-.055em}
.contact-title-zh{margin:var(--space-3) 0 0;color:var(--color-muted-dark);font-size:var(--text-lg)}
.contact-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap);padding-top:var(--space-7);align-items:start}
.contact-main{grid-column:1/span 8}
.contact-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--color-line-dark)}
.contact-details div{padding:var(--space-3) var(--space-4) var(--space-3) 0;display:grid;grid-template-columns:8rem minmax(0,1fr);gap:var(--space-3);border-bottom:1px solid var(--color-line-dark)}
.contact-details div:nth-child(even){padding-left:var(--space-4);border-left:1px solid var(--color-line-dark)}
.contact-details dt{color:var(--color-muted-dark);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase}
.contact-details dd{color:var(--color-on-dark);overflow-wrap:anywhere}.contact-details a{color:inherit}
.contact-todo{color:#9eafc1!important}
.contact-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.contact-action{min-height:3.25rem;padding:.85rem 1rem;display:inline-flex;justify-content:space-between;align-items:center;gap:var(--space-5);border:1px solid var(--color-line-dark);color:var(--color-on-dark);font-size:var(--text-sm);text-decoration:none;transition:border-color var(--transition),background-color var(--transition),color var(--transition)}
.contact-action:hover,.contact-action:focus-visible{border-color:var(--color-on-dark);background:var(--color-on-dark);color:var(--color-dark)}
.contact-action--primary{background:var(--color-on-dark);color:var(--color-dark)}
.contact-action--disabled{cursor:not-allowed;color:var(--color-muted-dark)}
.contact-action--disabled small{font-size:var(--text-xs);font-weight:400;color:#9eafc1}
.wechat-placeholder{grid-column:10/-1;aspect-ratio:1;min-width:0;padding:var(--space-5);display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--color-line-dark);background:#202326;color:var(--color-muted-dark)}
.wechat-placeholder strong{color:#9eafc1;font-size:var(--text-xs);letter-spacing:.12em}.wechat-placeholder span{font-size:var(--text-sm);line-height:1.6}
.site-footer{padding-top:var(--space-4);padding-bottom:var(--space-4);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);border-top:1px solid var(--color-line-dark);background:var(--color-dark);color:var(--color-muted-dark);font-size:var(--text-xs);letter-spacing:.09em;text-transform:uppercase}
.site-footer span:nth-child(2){text-align:center}.site-footer a{color:inherit;text-align:right;text-decoration:none}.site-footer a:hover,.site-footer a:focus-visible{color:var(--color-on-dark)}
@media(max-width:700px){
  .contact-section{min-height:0;padding-top:var(--space-8);padding-bottom:var(--space-7)}
  .contact-header,.contact-grid{grid-template-columns:1fr}
  .contact-header>.kicker,.contact-title,.contact-main,.wechat-placeholder{grid-column:1}
  .contact-title{margin-top:var(--space-5)}.contact-title h2{font-size:clamp(3.2rem,15vw,5rem);line-height:.92}
  .contact-grid{padding-top:var(--space-6)}
  .contact-details{grid-template-columns:1fr}
  .contact-details div,.contact-details div:nth-child(even){padding:var(--space-3) 0;grid-template-columns:1fr;gap:var(--space-1);border-left:0}
  .contact-actions{display:grid;grid-template-columns:1fr}
  .contact-action{width:100%;min-height:3.5rem}
  .wechat-placeholder{width:min(72vw,17rem);margin-top:var(--space-5)}
  .site-footer{grid-template-columns:1fr}.site-footer span:nth-child(2),.site-footer a{text-align:left}
}


/* Restrained scroll and hover motion */
.reveal{opacity:0;transform:translate3d(0,22px,0);transition:opacity 620ms cubic-bezier(.22,.8,.22,1),transform 620ms cubic-bezier(.22,.8,.22,1);transition-delay:var(--reveal-delay,0ms);will-change:opacity,transform}
.reveal.is-visible{opacity:1;transform:translate3d(0,0,0);will-change:auto}
.motion-ready .section-header h2,.motion-ready .contact-title h2{position:relative}
.motion-ready .section-header h2::after,.motion-ready .contact-title h2::after{content:"";display:block;width:clamp(2.8rem,6vw,5.5rem);height:1px;margin-top:var(--space-3);background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 680ms cubic-bezier(.22,.8,.22,1) 120ms}
.motion-ready .section-header.is-visible h2::after,.motion-ready .contact-header.is-visible .contact-title h2::after{transform:scaleX(1)}
@media(min-width:701px){
  .motion-ready .project-card.reveal .project-card-image{clip-path:inset(0 0 100% 0);transition:clip-path 720ms cubic-bezier(.22,.8,.22,1)}
  .motion-ready .project-card.reveal.is-visible .project-card-image{clip-path:inset(0)}
}
@media(max-width:700px){
  .reveal{transform:none;transition-duration:420ms}
  .motion-ready .project-card.reveal .project-card-image,.motion-ready .project-card.reveal.is-visible .project-card-image{clip-path:none}
}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal.is-visible{opacity:1!important;transform:none!important;transition:none!important}
  .motion-ready .section-header h2::after,.motion-ready .contact-title h2::after{transform:scaleX(1)!important;transition:none!important}
  .motion-ready .project-card.reveal .project-card-image{clip-path:none!important;transition:none!important}
}

/* Photography archive */
#project-photography .photo-grid--archive{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap);align-items:start}
#project-photography .photo-grid--archive img{grid-column:span 6;width:100%;height:auto;object-fit:contain;filter:none}
#project-photography .photo-grid--archive img:nth-child(1),
#project-photography .photo-grid--archive img:nth-child(6),
#project-photography .photo-grid--archive img:nth-child(11),
#project-photography .photo-grid--archive img:nth-child(20){grid-column:1/-1}
#project-photography .photo-grid--archive img:nth-child(16){grid-column:span 4}
#project-photography .photo-grid--archive img:nth-child(17){grid-column:span 8}
.photography-book-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1.25rem,3vw,3rem);align-items:start}
.photography-book-item{grid-column:span 6;margin:0;min-width:0}
.photography-book-item--wide{grid-column:1/-1}
.photography-book-item--portrait{grid-column:span 4}
.photography-book-item--portrait-companion{grid-column:span 8}
.photography-book-item button{position:relative;width:100%;padding:0;border:0;background:transparent;overflow:hidden;cursor:zoom-in}
.photography-book-item img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;filter:none}
.photography-book-item button span{position:absolute;right:var(--space-3);bottom:var(--space-3);padding:.45rem .65rem;background:rgba(15,17,19,.82);color:#fff;font-size:var(--text-xs);opacity:0;transition:opacity var(--transition-fast) ease}
.photography-book-item button:hover span,.photography-book-item button:focus-visible span{opacity:1}
.photography-book-item figcaption{margin-top:var(--space-2);color:var(--color-muted);font-size:var(--text-xs);letter-spacing:.05em}
@media(max-width:700px){
  #project-photography .photo-grid--archive{grid-template-columns:1fr}
  #project-photography .photo-grid--archive img:nth-child(n){grid-column:1}
  .photography-book-grid{grid-template-columns:1fr;gap:var(--space-6)}
  .photography-book-item,.photography-book-item--wide,.photography-book-item--portrait,.photography-book-item--portrait-companion{grid-column:1}
  .photography-book-item button span{display:none}
}
/* About compact layout */
.about-section{padding-top:clamp(4.5rem,7vw,7rem);padding-bottom:clamp(4.5rem,7vw,7rem)}
.about-section .about-header{margin-bottom:var(--space-5)}
.about-section .about-editorial{align-items:start}
.about-section .about-narrative{grid-column:5/-1;max-width:none}
.about-section .about-narrative>p{max-width:48rem}
.about-section .capabilities{margin-top:var(--space-5)}
.about-section .capability-item{grid-template-columns:2.25rem minmax(0,1fr);gap:var(--space-3);padding:var(--space-4) 0}
.about-section .capability-number{grid-column:1}
.about-section .capability-item>div{grid-column:2;grid-template-columns:minmax(10rem,.8fr) minmax(0,1.2fr);gap:var(--space-4)}
@media(max-width:760px){
  .about-section{padding-top:var(--space-7);padding-bottom:var(--space-7)}
  .about-section .about-header{margin-bottom:var(--space-5)}
  .about-section .about-editorial{gap:var(--space-5)}
  .about-section .about-photo{width:min(72vw,18rem)}
  .about-section .about-narrative{grid-column:1}
  .about-section .capabilities{margin-top:var(--space-5)}
  .about-section .capability-item>div{grid-template-columns:1fr;gap:var(--space-2)}
}
/* Complete medical journal archive */
.medical-journal-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--grid-gap);align-items:start}
.medical-journal-item{grid-column:span 2;margin:0;min-width:0}
.medical-journal-item:nth-child(22){grid-column:2/span 2}
.medical-journal-item:nth-child(23){grid-column:4/span 2}
.medical-journal-item button{position:relative;width:100%;aspect-ratio:3/4;padding:0;border:0;background:#111315;overflow:hidden;cursor:zoom-in}
.medical-journal-item img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#111315}
.medical-journal-item button span{position:absolute;right:var(--space-3);bottom:var(--space-3);padding:.45rem .65rem;background:rgba(15,17,19,.84);color:#fff;font-size:var(--text-xs);opacity:0;transition:opacity var(--transition-fast) ease}
.medical-journal-item button:hover span,.medical-journal-item button:focus-visible span{opacity:1}
.medical-journal-item figcaption{margin-top:var(--space-2);color:var(--color-muted);font-size:var(--text-xs);letter-spacing:.04em}
@media(max-width:700px){
  #project-editorial .case-gallery--covers img:nth-child(n){grid-column:1}
  .medical-journal-grid{grid-template-columns:1fr;gap:var(--space-6)}
  .medical-journal-item,.medical-journal-item:nth-child(22),.medical-journal-item:nth-child(23){grid-column:1}
  .medical-journal-item button span{display:none}
}
/* Hero complete image layout */
.hero-collage{min-height:min(58vh,580px);grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto auto;gap:.75rem;align-content:center}
.hero-art{align-self:start}
.hero-art img{width:100%;height:100%;object-fit:contain;object-position:center;background:#24272a}
.hero-art--cover{grid-column:1;grid-row:1/3;aspect-ratio:1920/2570;align-self:center}
.hero-art--3d{grid-column:2;grid-row:1;aspect-ratio:16/9}
.hero-art--photo{grid-column:2;grid-row:2;aspect-ratio:2200/1645}
@media(max-width:900px){
  .hero-collage{width:100%;min-height:clamp(430px,70vw,570px);grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto auto;align-content:center}
  .hero-art--cover{grid-column:1;grid-row:1/3}
  .hero-art--3d{grid-column:2;grid-row:1}
  .hero-art--photo{grid-column:2;grid-row:2}
}
@media(max-width:520px){
  .hero-collage{min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto;align-items:start}
  .hero-art--cover{grid-column:1/-1;grid-row:1;width:min(100%,20rem);justify-self:center}
  .hero-art--3d{grid-column:1;grid-row:2}
  .hero-art--photo{grid-column:2;grid-row:2}
}
/* Medical visualization clients */
.medical-client-layout{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(17rem,.8fr);gap:var(--space-7);align-items:start}
.medical-client-panel{min-width:0}
.medical-client-heading{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) 0;border-top:1px solid var(--color-text);border-bottom:1px solid var(--color-line)}
.medical-client-heading h3{margin:0;font-size:var(--text-xl);font-weight:560;line-height:1.1;letter-spacing:-.03em}
.medical-client-heading p{margin:0;color:var(--color-muted);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase}
.medical-client-group{padding:var(--space-4) 0;border-bottom:1px solid var(--color-line)}
.medical-client-group header{display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:var(--space-3);align-items:baseline}
.medical-client-group header>span,.medical-client-types li>span{color:var(--color-accent);font-size:var(--text-xs);font-variant-numeric:tabular-nums;letter-spacing:.08em}
.medical-client-group h4{margin:0;font-size:var(--text-base);font-weight:600}
.medical-client-group header p{margin:.15rem 0 0;color:var(--color-muted);font-size:var(--text-xs);letter-spacing:.05em}
.medical-client-names{margin:var(--space-3) 0 0 3.25rem;color:var(--color-muted);line-height:1.85}
.medical-client-types{padding-left:var(--space-5);border-left:1px solid var(--color-line)}
.medical-client-types ol{margin:0;padding:0;list-style:none}
.medical-client-types li{display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:var(--space-3);align-items:baseline;padding:var(--space-4) 0;border-bottom:1px solid var(--color-line)}
.medical-client-types strong{font-size:var(--text-base);font-weight:520}
@media(max-width:900px){
  .medical-client-layout{grid-template-columns:1fr;gap:var(--space-6)}
  .medical-client-types{padding-left:0;border-left:0}
}
@media(max-width:520px){
  .medical-client-heading{align-items:flex-start;flex-direction:column;gap:var(--space-1)}
  .medical-client-names{margin-left:0}
}
/* Reference-film art direction */
:root{
  --color-bg:#07080c;
  --color-surface:#11121a;
  --color-dark:#050509;
  --color-text:#f2f0eb;
  --color-muted:#9d9aa8;
  --color-line:rgba(190,181,214,.24);
  --color-line-dark:rgba(190,181,214,.3);
  --color-accent:#8ff5dd;
  --color-accent-hover:#c3fff1;
  --color-on-dark:#f5f2ee;
  --color-muted-dark:#a9a5b4;
  --color-lavender:#81758f;
  --color-violet:#8f7dff;
  --font-display:Georgia,"Times New Roman","Songti SC","SimSun",serif;
}
html{background:#050509}
body{position:relative;background:#07080c;color:var(--color-text)}
body::before{content:"";position:fixed;inset:0;z-index:900;pointer-events:none;opacity:.15;background-image:radial-gradient(circle at center,rgba(255,255,255,.7) 0 .55px,transparent .8px);background-size:5px 5px;mix-blend-mode:soft-light}
body::after{content:"";position:fixed;inset:-20vh -15vw;z-index:-1;pointer-events:none;background:radial-gradient(circle at 14% 10%,rgba(143,125,255,.16),transparent 34%),radial-gradient(circle at 88% 28%,rgba(91,238,210,.1),transparent 30%),#07080c}
::selection{background:var(--color-accent);color:#050509}
.art-intro{position:fixed;inset:0;z-index:1200;display:flex;align-items:flex-end;justify-content:space-between;padding:var(--page-gutter);background:#050509;color:var(--color-accent);font-size:var(--text-xs);font-weight:700;letter-spacing:.16em;pointer-events:none;animation:art-intro-exit 1350ms cubic-bezier(.76,0,.24,1) forwards}
.art-intro span{animation:art-intro-text 650ms cubic-bezier(.22,.8,.22,1) both}
.art-intro span:last-child{animation-delay:100ms}
@keyframes art-intro-text{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes art-intro-exit{0%,52%{clip-path:inset(0);visibility:visible}100%{clip-path:inset(0 0 100% 0);visibility:hidden}}
.scroll-progress{position:fixed;inset:0 0 auto;z-index:1250;height:2px;background:rgba(255,255,255,.12);pointer-events:none}
.scroll-progress span{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--color-accent),var(--color-violet));transform:scaleX(var(--scroll-progress,0));transform-origin:left;will-change:transform}
.site-header{min-height:3rem;z-index:300;border-bottom:1px solid rgba(255,255,255,.22);background:rgba(112,100,128,.92);color:#fff;backdrop-filter:blur(12px);transition:min-height 320ms ease,background-color 320ms ease}
.site-header.is-scrolled,.site-header.menu-is-open{min-height:2.75rem;border-bottom-color:rgba(255,255,255,.2);background:rgba(72,64,86,.94);backdrop-filter:blur(16px)}
.site-header .brand,.site-header .brand span,.site-header .main-nav a{color:#fff}
.site-header .brand{font-size:.66rem;letter-spacing:.13em}
.site-header .main-nav a{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.site-header .main-nav a::after{height:1px;background:var(--color-accent)}
.resume-nav{border-color:rgba(255,255,255,.38);color:rgba(255,255,255,.72)}
.menu-toggle{border-color:rgba(255,255,255,.4);color:#fff}
.hero--portfolio{position:relative;isolation:isolate;min-height:calc(100svh - 3rem);padding-top:clamp(4rem,8vh,7rem);padding-bottom:clamp(4rem,8vh,7rem);background:radial-gradient(circle at 72% 42%,rgba(94,79,139,.24),transparent 35%),linear-gradient(135deg,#050509 0%,#0d0b16 52%,#06070b 100%);overflow:hidden}
.hero--portfolio::before{content:"VISUAL / 3D";position:absolute;left:-.02em;bottom:-.13em;z-index:-1;color:rgba(151,135,190,.09);font-family:var(--font-display);font-size:clamp(6rem,15vw,16rem);font-style:italic;line-height:.8;letter-spacing:-.07em;white-space:nowrap}
.hero--portfolio::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4.2rem;z-index:-1;background-image:radial-gradient(circle,rgba(170,158,205,.55) 0 1px,transparent 1.2px);background-size:12px 12px;mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent)}
.hero--portfolio .hero-copy{position:relative;z-index:3;grid-column:1/span 7}
.hero-name{color:#c9c0da;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase}
.hero-title-zh{display:block!important;margin:0!important;color:var(--color-accent)!important;font-family:var(--font-display);font-size:clamp(3.8rem,6.7vw,8rem)!important;font-weight:500!important;font-style:italic;line-height:.83!important;letter-spacing:-.07em!important;text-shadow:0 0 36px rgba(143,245,221,.14)}
.hero-title-en{display:block!important;max-width:9ch;margin:.25em 0 0!important;color:#f4f0f7!important;font-family:var(--font-display);font-size:clamp(2.25rem,4.4vw,5.4rem)!important;font-weight:400!important;line-height:.86!important;letter-spacing:-.055em!important}
.hero-intro-cn{max-width:35rem;margin-top:var(--space-5);color:#dfdbe4}
.hero-intro-en{max-width:37rem;color:#9e98aa}
.hero-tags{padding:var(--space-3) 0;border-top:1px solid var(--color-line-dark);border-bottom:1px solid var(--color-line-dark)}
.hero-tags li{color:#bcb5c7;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase}
.hero-button{border-color:rgba(255,255,255,.34);border-radius:999px;background:transparent;color:#fff;transition:transform 300ms ease,background-color 300ms ease,color 300ms ease,border-color 300ms ease}
.hero-button--primary{border-color:var(--color-accent);background:var(--color-accent);color:#050509}
.hero-button:hover,.hero-button:focus-visible{transform:translateY(-3px);border-color:var(--color-accent);background:var(--color-accent);color:#050509}
.hero-collage{position:relative;z-index:2;perspective:1000px}
.hero-art{border:1px solid rgba(182,170,211,.35);background:#08090d;box-shadow:0 22px 70px rgba(0,0,0,.42);transform:translate3d(var(--drift-x,0),var(--drift-y,0),0);transition:transform 650ms cubic-bezier(.22,.8,.22,1),border-color 300ms ease,box-shadow 300ms ease}
.hero-art:hover{z-index:5;border-color:var(--color-accent);box-shadow:0 28px 90px rgba(89,64,144,.34)}
.hero-art figcaption{background:rgba(115,101,137,.9);color:#fff;letter-spacing:.12em}
.art-marquee{position:relative;z-index:2;overflow:hidden;border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line);background:#0b0a11;color:#d9d1e5}
.art-marquee::before,.art-marquee::after{content:"";position:absolute;top:0;bottom:0;z-index:2;width:8vw;pointer-events:none}
.art-marquee::before{left:0;background:linear-gradient(90deg,#0b0a11,transparent)}
.art-marquee::after{right:0;background:linear-gradient(-90deg,#0b0a11,transparent)}
.art-marquee-track{display:flex;width:max-content;align-items:center;gap:clamp(1.5rem,3vw,3rem);padding:.8rem 0;animation:art-marquee 30s linear infinite}
.art-marquee span{font-family:var(--font-display);font-size:clamp(1.1rem,1.8vw,2rem);font-style:italic;letter-spacing:-.02em;white-space:nowrap}
.art-marquee i{color:var(--color-accent);font-style:normal}
@keyframes art-marquee{to{transform:translateX(-50%)}}
.section,.case-study{position:relative;border-top-color:var(--color-line);background:#08090e}
.section:nth-of-type(even){background:#0b0a12}
.section-header .kicker,.case-intro .kicker{color:var(--color-accent)}
.section-header h2,.case-intro h2{font-family:var(--font-display);font-weight:400;font-style:italic;letter-spacing:-.065em;text-wrap:balance}
.section-header h2{font-size:clamp(3.6rem,7vw,8.2rem)}
.section-header>p,.case-intro>p:last-child{color:var(--color-muted)}
.motion-ready .section-header h2::after,.motion-ready .contact-title h2::after{height:2px;background:linear-gradient(90deg,var(--color-accent),var(--color-violet),transparent)}
.work-section{background:linear-gradient(180deg,#07080c,#0c0913)}
.work-section .filter-bar{border-bottom-color:var(--color-line)}
.work-section .filter{color:#aaa4b5}
.work-section .filter:hover,.work-section .filter:focus-visible,.work-section .filter.is-active{border-bottom-color:var(--color-accent);color:var(--color-accent)}
.work-section .project-card-image{border:1px solid rgba(177,164,205,.28);background:#050509}
.work-section .project-card-image::before{background:linear-gradient(180deg,transparent 48%,rgba(5,5,9,.78))}
.work-section .project-card-image::after{border-color:var(--color-accent);border-radius:999px;background:rgba(5,5,9,.62);color:var(--color-accent)}
.work-section .project-meta{border-top-color:var(--color-line)}
.work-section .project-meta strong{font-family:var(--font-display);font-size:clamp(1.8rem,3vw,3.4rem);font-weight:400;font-style:italic;color:#f1edf5}
.work-section .project-category{color:var(--color-accent)}
.project-title-zh,.project-secondary{color:#918b9c}
.case-study{overflow:clip;background:#06070b;color:var(--color-on-dark)}
.case-study--dark,.case-study--sand{background:radial-gradient(circle at 88% 10%,rgba(126,105,175,.16),transparent 28%),#06070b;color:var(--color-on-dark)}
.case-study::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.5rem;pointer-events:none;background-image:radial-gradient(circle,rgba(175,162,207,.45) 0 .8px,transparent 1px);background-size:10px 10px;opacity:.5}
.case-intro h2{color:#f1edf5;font-size:clamp(3.8rem,6.6vw,7.8rem)}
.case-gallery img,.photo-grid img{border:1px solid rgba(181,168,208,.22);background:#0b0c12}
.about-section{background:radial-gradient(circle at 12% 28%,rgba(118,96,174,.22),transparent 32%),#0b0912}
.about-photo{position:relative}
.about-photo::before{content:"";position:absolute;inset:-.7rem .7rem .7rem -.7rem;border:1px solid rgba(143,245,221,.38);pointer-events:none}
.about-photo img{position:relative;z-index:1;border:1px solid rgba(255,255,255,.15)}
.about-narrative .about-lead-text{color:#f0ecf3}
.capability-item{transition:padding-left 300ms ease,background-color 300ms ease}
.capability-item:hover{padding-left:var(--space-3);background:rgba(143,125,255,.07)}
.capability-item h3{font-family:var(--font-display);font-weight:400;font-style:italic;color:#eee9f2}
.experience-timeline,.skills-matrix,.education-record,.recognition-list{border-color:var(--color-line)}
.experience-entry,.skill-group,.recognition-list li{border-color:var(--color-line)}
.experience-content h3,.skill-group h3,.education-record h3{font-family:var(--font-display);font-weight:400;font-style:italic;color:#f0ebf4}
.experience-index,.capability-number,.skill-index,.recognition-index{color:var(--color-accent)}
.skill-group:hover{background:rgba(126,107,169,.08)}
.skill-tags li,.skill-competencies li{border-color:rgba(166,153,194,.3);background:rgba(116,101,148,.08);color:#d4cedb}
.contact-section{background:linear-gradient(135deg,#766a86,#4f465d)!important;color:#fff}
.contact-section::before{content:"LET'S CREATE";display:block;color:rgba(143,245,221,.24);font-family:var(--font-display);font-size:clamp(4rem,12vw,12rem);font-style:italic;line-height:.7;letter-spacing:-.07em;white-space:nowrap;transform:translateX(-.03em)}
.contact-title h2,.contact-section h2{font-family:var(--font-display);font-weight:400;font-style:italic;color:var(--color-accent);text-shadow:0 0 30px rgba(143,245,221,.12)}
.contact-section .contact-name,.contact-section .contact-location,.contact-section a{color:#fff}
.contact-actions a,.contact-actions span{border-color:rgba(255,255,255,.5);border-radius:999px;background:rgba(6,7,11,.12)}
.site-footer{background:#050509;color:#aaa4b5;border-top:1px solid var(--color-line)}
.project-modal{background:rgba(3,3,7,.9);backdrop-filter:blur(12px)}
.project-dialog{background:#0b0b11;color:#f1edf4;box-shadow:0 30px 100px rgba(0,0,0,.7)}
.project-detail-header h2{font-family:var(--font-display);font-weight:400;font-style:italic;color:var(--color-accent)}
.project-facts,.project-facts div,.project-detail-section,.project-navigation{border-color:var(--color-line)}
.project-facts dd,.project-detail-lead{color:#ddd7e3}
.project-close,.lightbox-close{border-color:rgba(255,255,255,.32);background:rgba(8,8,12,.72);color:#fff}
.reveal{transform:translate3d(0,34px,0);transition-duration:820ms;transition-timing-function:cubic-bezier(.16,1,.3,1)}
@media(min-width:901px){
  .case-intro{position:sticky;top:6rem;align-self:start}
  .work-section .project-card:nth-child(even){transform:translateY(clamp(1.5rem,4vw,4.5rem))}
}
@media(max-width:900px){
  .site-header{min-height:4.5rem;background:rgba(91,80,106,.96)}
  .site-header.is-scrolled,.site-header.menu-is-open{min-height:4.5rem}
  .site-header .main-nav{background:#09090e}
  .hero--portfolio{min-height:auto;padding-top:var(--space-7)}
  .hero--portfolio .hero-copy{grid-column:1}
  .hero-title-zh{font-size:clamp(3.3rem,12vw,6rem)!important}
  .hero-title-en{font-size:clamp(2.2rem,9vw,4.6rem)!important}
  .case-intro{position:static}
}
@media(max-width:520px){
  body::before{opacity:.09}
  .art-intro{padding:1.1rem;font-size:.58rem}
  .hero--portfolio::before{bottom:.05em;font-size:5.5rem}
  .hero--portfolio::after{height:2.5rem}
  .hero-title-zh{font-size:clamp(3rem,15vw,4.2rem)!important}
  .hero-title-en{font-size:clamp(2rem,11vw,3rem)!important}
  .hero-intro-cn{margin-top:var(--space-4)}
  .art-marquee-track{animation-duration:22s}
  .section-header h2{font-size:clamp(3.1rem,15vw,5rem)}
  .case-intro h2{font-size:clamp(3rem,14vw,4.8rem)}
  .contact-section::before{font-size:4.5rem;white-space:normal}
}
@media(prefers-reduced-motion:reduce){
  .art-intro{display:none}
  .art-marquee-track{animation:none;transform:none}
  .hero-art{transform:none!important;transition:none!important}
}
@keyframes art-panel-in{from{opacity:0;clip-path:inset(0 0 100% 0);filter:blur(5px)}to{opacity:1;clip-path:inset(0);filter:blur(0)}}
.hero-art{animation-name:art-panel-in}

/* Custom cursor -- desktop fine pointers only */
.custom-cursor-dot,
.custom-cursor-ring { position:fixed; top:0; left:0; z-index:3000; pointer-events:none; opacity:0; will-change:transform; transition:opacity 180ms ease,width 220ms ease,height 220ms ease,border-color 220ms ease,background-color 220ms ease; }
.custom-cursor-dot { width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; background:var(--color-accent); box-shadow:0 0 14px rgba(143,245,221,.36); }
.custom-cursor-ring { width:34px; height:34px; margin:-17px 0 0 -17px; border:1px solid rgba(143,245,221,.72); border-radius:50%; background:rgba(143,245,221,.025); }
.has-custom-cursor .custom-cursor-dot,.has-custom-cursor .custom-cursor-ring { opacity:1; }
.has-custom-cursor.cursor-hidden .custom-cursor-dot,.has-custom-cursor.cursor-hidden .custom-cursor-ring { opacity:0; }
.has-custom-cursor.cursor-interactive .custom-cursor-dot { width:5px; height:5px; margin:-2.5px 0 0 -2.5px; background:#fff; }
.has-custom-cursor.cursor-interactive .custom-cursor-ring { width:52px; height:52px; margin:-26px 0 0 -26px; border-color:var(--color-accent); background:rgba(143,245,221,.09); }
.has-custom-cursor.cursor-pressed .custom-cursor-ring { width:26px; height:26px; margin:-13px 0 0 -13px; background:rgba(143,245,221,.18); }
@media (hover:hover) and (pointer:fine) {
  .has-custom-cursor,.has-custom-cursor a,.has-custom-cursor button,.has-custom-cursor [role="button"],.has-custom-cursor input,.has-custom-cursor select,.has-custom-cursor textarea { cursor:none!important; }
}
@media (prefers-reduced-motion:reduce), (hover:none), (pointer:coarse) {
  .custom-cursor-dot,.custom-cursor-ring { display:none!important; }
}


/* Collapsible medical cover archive */
.medical-cover-more{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--grid-gap)}
.medical-cover-more[hidden]{display:none}
.medical-cover-toggle{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:.75rem;margin-top:var(--space-3);padding:.72rem 1.1rem;border:1px solid rgba(143,245,221,.48);border-radius:999px;background:transparent;color:var(--color-accent);font:inherit;font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;transition:color 220ms ease,background-color 220ms ease,border-color 220ms ease}
.medical-cover-toggle::after{content:"+";font-size:1.1rem;line-height:1;transition:transform 260ms ease}
.medical-cover-toggle[aria-expanded="true"]::after{transform:rotate(45deg)}
.medical-cover-toggle:hover,.medical-cover-toggle:focus-visible{background:var(--color-accent);color:#07080c;border-color:var(--color-accent)}
@media(max-width:900px){.medical-cover-more{grid-template-columns:1fr}.medical-cover-toggle{width:100%;justify-content:space-between}}


/* Collapsible photography archive */
.photography-more{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap)}
.photography-more[hidden]{display:none}
.photo-grid .photography-more img:first-child{grid-column:auto}
.photography-toggle{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:.75rem;margin-top:var(--space-3);padding:.72rem 1.1rem;border:1px solid rgba(143,245,221,.48);border-radius:999px;background:transparent;color:var(--color-accent);font:inherit;font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;transition:color 220ms ease,background-color 220ms ease,border-color 220ms ease}
.photography-toggle::after{content:"+";font-size:1.1rem;line-height:1;transition:transform 260ms ease}
.photography-toggle[aria-expanded="true"]::after{transform:rotate(45deg)}
.photography-toggle:hover,.photography-toggle:focus-visible{background:var(--color-accent);color:#07080c;border-color:var(--color-accent)}
@media(max-width:900px){.photography-more{grid-template-columns:1fr}.photography-toggle{width:100%;justify-content:space-between}}


/* All projects: paired first row */
.work-section .project-grid--all .project-card:first-child,
.work-section .project-grid--all .project-card:not(:first-child){grid-column:span 6}
.work-section .project-grid--all .project-card:first-child .project-card-image,
.work-section .project-grid--all .project-card:not(:first-child) .project-card-image{aspect-ratio:4/3}
.work-section .project-grid--all .project-card:last-child{grid-column:1/-1}
.work-section .project-grid--all .project-card:last-child .project-card-image{aspect-ratio:16/7}
@media(min-width:901px){.work-section .project-grid--all .project-card:nth-child(2){transform:none}}
@media(max-width:900px){
  .work-section .project-grid--all .project-card:last-child{grid-column:1}
  .work-section .project-grid--all .project-card:last-child .project-card-image{aspect-ratio:4/3}
}

/* Keep the Chinese hero title on one line */
.hero-title-zh{white-space:nowrap;font-size:clamp(3.6rem,5.5vw,7rem)!important}
@media(max-width:900px){.hero-title-zh{font-size:clamp(2.9rem,9.5vw,5rem)!important}}
@media(max-width:520px){.hero-title-zh{font-size:clamp(2.35rem,10.5vw,3.2rem)!important}}

/* Photography featured six: two images per row */
#project-photography .photo-grid--archive > img:nth-child(n){grid-column:span 6}
#project-photography .photography-more img:nth-child(n){grid-column:auto}

/* All projects: medical visualization leads */
.work-section .project-grid--all .project-card:first-child{grid-column:1/-1}
.work-section .project-grid--all .project-card:first-child .project-card-image{aspect-ratio:16/7}
.work-section .project-grid--all .project-card:not(:first-child){grid-column:span 6}
.work-section .project-grid--all .project-card:not(:first-child) .project-card-image{aspect-ratio:4/3}
.work-section .project-grid--all .project-card:last-child{grid-column:span 6}
.work-section .project-grid--all .project-card:last-child .project-card-image{aspect-ratio:4/3}
@media(min-width:901px){.work-section .project-grid--all .project-card:nth-child(even).is-visible{transform:none}}
@media(max-width:900px){.work-section .project-grid--all .project-card:first-child{grid-column:1}.work-section .project-grid--all .project-card:first-child .project-card-image{aspect-ratio:4/3}}

/* Keep the medical collection cover identical in All and filtered views */
@media(max-width:760px){
  .work-section .project-grid--all .project-card:first-child,
  .work-section .project-grid--all .project-card:not(:first-child){grid-column:1/-1}
  .work-section .project-grid .project-card[data-project-id="medical-visualization-collection"] .project-card-image{aspect-ratio:5161/1954}
}

/* Keep the English hero title on one line */
.hero-title-en{max-width:none!important;white-space:nowrap;font-size:clamp(2.15rem,4vw,5rem)!important}
@media(max-width:900px){.hero-title-en{font-size:clamp(2rem,7.5vw,4rem)!important}}
@media(max-width:520px){.hero-title-en{font-size:clamp(1.65rem,7vw,2.4rem)!important}}

/* WeChat QR: crop source image to the scannable code only */
.wechat-qr{grid-column:10/-1;position:relative;aspect-ratio:1;min-width:0;overflow:hidden;border:1px solid rgba(255,255,255,.32);background:#fff}
.wechat-qr img{position:absolute;left:-11.44%;top:-37.76%;width:122.9%;height:auto;max-width:none;display:block}
@media(max-width:900px){.wechat-qr{grid-column:1;width:min(72vw,17rem);margin-top:var(--space-5)}}

/* Keep Photography Works words intact */
#project-photography .case-intro h2{overflow-wrap:normal;word-break:normal;font-size:clamp(3rem,4.5vw,5.5rem)}
@media(max-width:900px){#project-photography .case-intro h2{font-size:clamp(2.8rem,11vw,4.6rem)}}

/* Photography title tablet width correction */
@media(max-width:900px){
  #project-photography{grid-template-columns:1fr!important}
  #project-photography .case-intro,#project-photography .photo-grid{grid-column:1/-1!important;width:100%}
  #project-photography .case-intro h2{font-size:clamp(2.8rem,8.5vw,4.2rem)}
}

/* Keep 3D exploration title words intact */
#project-explorations .case-intro h2{overflow-wrap:normal;word-break:normal;font-size:clamp(3rem,4.4vw,5.3rem)}
@media(max-width:900px){
  #project-explorations{grid-template-columns:1fr!important}
  #project-explorations .case-intro,#project-explorations .case-gallery{grid-column:1/-1!important;width:100%}
  #project-explorations .case-intro h2{font-size:clamp(2.8rem,8.2vw,4.1rem)}
}

/* Match Retro Repair Shop to Photography Works */
#project-repair-shop .case-intro h2{overflow-wrap:normal;word-break:normal;font-size:clamp(3rem,4.5vw,5.5rem)}
@media(max-width:900px){
  #project-repair-shop{grid-template-columns:1fr!important}
  #project-repair-shop .case-intro,#project-repair-shop .case-gallery{grid-column:1/-1!important;width:100%}
  #project-repair-shop .case-intro h2{font-size:clamp(2.8rem,8.5vw,4.2rem)}
}

/* About portrait layout correction */
.about-section .about-photo{grid-column:1/span 5;width:100%;max-width:none;isolation:isolate}
.about-section .about-narrative{grid-column:7/-1}
.about-section .about-photo img{display:block;width:100%;height:auto;aspect-ratio:1364/1153;object-fit:cover;object-position:center}
.about-section .about-photo::before{z-index:0}
.about-section .about-photo figcaption{position:relative;z-index:1}
@media(max-width:900px){
  .about-section .about-editorial{grid-template-columns:1fr;gap:var(--space-6)}
  .about-section .about-photo,.about-section .about-narrative{grid-column:1/-1}
  .about-section .about-photo{width:min(100%,36rem)}
}

/* Match medical visualization title to Photography Works */
#project-editorial .case-intro h2{font-size:clamp(3rem,4.5vw,5.5rem)}
@media(max-width:900px){
  #project-editorial{grid-template-columns:1fr!important}
  #project-editorial .case-intro,#project-editorial .case-gallery{grid-column:1/-1!important;width:100%}
  #project-editorial .case-intro h2{font-size:clamp(2.8rem,8.5vw,4.2rem)}
}

/* One-inch About portrait */
.about-section .about-photo{grid-column:1/span 4;width:25mm;max-width:100%;justify-self:center;align-self:start}
.about-section .about-narrative{grid-column:5/-1}
.about-section .about-photo::before{content:none!important}
.about-photo-frame{position:relative;width:25mm;max-width:100%;aspect-ratio:5/7;margin:0}
.about-photo-frame::before{content:"";position:absolute;z-index:0;inset:-1.5mm 1.5mm 1.5mm -1.5mm;border:1px solid rgba(143,245,221,.62);pointer-events:none}
.about-section .about-photo-frame img{position:relative;z-index:1;display:block;width:100%;height:100%;aspect-ratio:5/7;object-fit:cover;object-position:50% 45%}
.about-section .about-photo figcaption{position:relative;z-index:1;margin-top:4mm;text-align:center;white-space:nowrap;font-size:.65rem;letter-spacing:.08em}
@media(max-width:900px){
  .about-section .about-photo,.about-section .about-narrative{grid-column:1/-1}
  .about-section .about-photo{width:25mm;justify-self:center}
}

/* About portrait fills the left editorial column */
.about-section .about-photo{grid-column:1/span 4;width:100%;max-width:none;justify-self:stretch}
.about-photo-frame{width:100%;max-width:none;aspect-ratio:1364/1153}
.about-section .about-photo-frame img{width:100%;height:100%;aspect-ratio:1364/1153;object-fit:contain;object-position:center}
@media(max-width:900px){
  .about-section .about-photo,.about-section .about-narrative{grid-column:1/-1}
  .about-section .about-photo{width:min(100%,36rem);justify-self:center}
}

/* Portrait-oriented one-inch ratio, full left-column width */
.about-photo-frame{width:100%;max-width:none;aspect-ratio:5/7}
.about-section .about-photo-frame img{width:100%;height:100%;aspect-ratio:5/7;object-fit:cover;object-position:50% 43%}

/* Match 3D exploration title to medical visualization */
#project-explorations .case-intro h2{font-size:clamp(3rem,4.5vw,5.5rem)}
@media(max-width:900px){#project-explorations .case-intro h2{font-size:clamp(2.8rem,8.5vw,4.2rem)}}

/* Language switch */
.header-actions{display:flex;align-items:center;gap:.65rem;flex:0 0 auto}
.language-switch{display:inline-flex;align-items:center;padding:.15rem;border:1px solid rgba(255,255,255,.4);border-radius:999px;background:rgba(5,5,9,.14)}
.language-switch button{min-width:2.55rem;padding:.38rem .58rem;border:0;border-radius:999px;background:transparent;color:rgba(255,255,255,.68);font-size:.64rem;font-weight:700;line-height:1;letter-spacing:.06em;cursor:pointer;transition:background-color 180ms ease,color 180ms ease,box-shadow 180ms ease}
.language-switch button:hover,.language-switch button:focus-visible{color:#fff}
.language-switch button.is-active{background:var(--color-accent);color:#050509;box-shadow:0 0 18px rgba(143,245,221,.2)}
.language-switch button:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:900px){
  .site-header{gap:.75rem}
  .site-header .main-nav{order:3}
  .header-actions{margin-left:auto}
}
@media(max-width:420px){
  .header-actions{gap:.4rem}
  .language-switch button{min-width:2.25rem;padding:.36rem .45rem}
  .menu-toggle{min-width:3.7rem;padding:.5rem .65rem}
}

/* Bilingual hierarchy: active language leads, alternate language supports */
[data-bilingual-order] > [data-copy-language]{transition:color 180ms ease,opacity 180ms ease,font-size 180ms ease}
.bilingual-heading{display:flex;flex-direction:column;align-items:flex-start}
.bilingual-heading > .is-primary{color:inherit;opacity:1}
.bilingual-heading > .is-secondary{margin-top:.28em;color:inherit;font-family:var(--font-sans);font-size:.24em;font-style:normal;font-weight:650;line-height:1.25;letter-spacing:.08em;opacity:.58;text-transform:uppercase}

.site-header .brand{display:flex;align-items:center;gap:.45rem}
.site-header .brand [data-copy-language]{display:inline!important;margin:0}
.site-header .brand .is-primary{color:#fff;font-weight:700}
.site-header .brand .is-secondary{color:rgba(255,255,255,.55);font-weight:400}
.site-header .brand .is-secondary::before{content:"/";margin-right:.45rem;color:rgba(255,255,255,.3)}

.hero-name{align-items:center}
.hero-name .is-primary{color:#f4f0f7;font-weight:750}
.hero-name .is-secondary{color:#8e99a3;font-size:.88em;font-weight:550}
.hero-name .is-secondary{padding-left:.8rem;border-left:1px solid var(--color-line-dark)}

#hero-title{display:flex;flex-direction:column;align-items:flex-start}
#hero-title .is-primary{display:block!important;max-width:none!important;margin:0!important;color:var(--color-accent)!important;font-family:var(--font-display);font-size:clamp(3.6rem,5.5vw,7rem)!important;font-weight:500!important;font-style:italic;line-height:.83!important;letter-spacing:-.07em!important;text-shadow:0 0 36px rgba(143,245,221,.14)}
#hero-title .is-secondary{display:block!important;max-width:none!important;margin:.28em 0 0!important;color:#f4f0f7!important;font-family:var(--font-display);font-size:clamp(1.7rem,3.2vw,3.7rem)!important;font-weight:400!important;font-style:normal;line-height:.9!important;letter-spacing:-.045em!important;opacity:.72}
#hero-title [data-copy-language="zh"].is-primary{white-space:nowrap!important}
#hero-title [data-copy-language="en"].is-primary{max-width:11ch!important;white-space:normal!important}

.hero-intros{display:flex;flex-direction:column;align-items:flex-start;margin-top:var(--space-5)}
.hero-intros > p{margin:0}
.hero-intros .is-primary{max-width:39rem;color:#dfdbe4;font-size:var(--text-base);line-height:1.7}
.hero-intros .is-secondary{max-width:37rem;margin-top:var(--space-2);color:#9e98aa;font-size:var(--text-sm);line-height:1.65}

.contact-details dd[data-bilingual-order]{display:flex;flex-wrap:wrap;gap:.35rem}
.contact-details dd[data-bilingual-order] .is-secondary{color:var(--color-muted-dark)}
.contact-details dd[data-bilingual-order] .is-secondary::before{content:"/";margin-right:.35rem;color:rgba(255,255,255,.3)}

@media(max-width:900px){
  #hero-title .is-primary{font-size:clamp(2.9rem,9.5vw,5rem)!important}
  #hero-title .is-secondary{font-size:clamp(1.65rem,5.8vw,3rem)!important}
  .hero-name{align-items:flex-start;gap:.2rem}
  .hero-name .is-secondary{padding-left:0;border-left:0}
}
@media(max-width:520px){
  #hero-title .is-primary{font-size:clamp(2.35rem,10.5vw,3.2rem)!important}
  #hero-title .is-secondary{font-size:clamp(1.35rem,5.8vw,2rem)!important}
  .bilingual-heading > .is-secondary{font-size:.3em}
  .hero-intros{margin-top:var(--space-4)}
}
@media(max-width:420px){
  .site-header .brand .is-secondary{display:none!important}
}

/* Desktop header: navigation is the rightmost group */
@media(min-width:901px){
  .site-header .header-actions{order:2;margin-left:auto}
  .site-header .main-nav{order:3}
}

/* Featured visual development and personal work */
#project-visual-development .case-intro h2{overflow-wrap:normal;word-break:normal;font-size:clamp(3rem,4.5vw,5.5rem)}
#project-visual-development .case-gallery--visual-development{grid-template-columns:minmax(0,.916fr) minmax(0,1.084fr)}
#project-visual-development .case-gallery--visual-development>img:first-child{grid-row:span 2;width:100%;height:100%;object-fit:contain}
#project-visual-development .case-gallery--visual-development>img:nth-child(2){width:100%;aspect-ratio:16/9;object-fit:cover}
#project-visual-development .featured-visual-narratives{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap);align-self:start}
#project-visual-development .featured-visual-narratives img{width:100%;aspect-ratio:9/20;object-fit:cover}
@media(max-width:900px){
  #project-visual-development{grid-template-columns:1fr!important}
  #project-visual-development .case-intro,#project-visual-development .case-gallery{grid-column:1/-1!important;width:100%}
  #project-visual-development .case-intro h2{font-size:clamp(2.8rem,8.5vw,4.2rem)}
  #project-visual-development .case-gallery--visual-development{grid-template-columns:1fr}
  #project-visual-development .case-gallery--visual-development>img:first-child{grid-row:auto;height:auto}
}

/* Featured galleries: compact phone layouts */
@media(max-width:760px){
  #project-visual-development .case-gallery--visual-development{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-flow:row dense;
    gap:var(--grid-gap)
  }
  #project-visual-development .case-gallery--visual-development>img:nth-child(2){
    grid-column:1/-1;
    grid-row:1;
    aspect-ratio:16/9
  }
  #project-visual-development .case-gallery--visual-development>img:first-child{
    grid-column:auto;
    grid-row:2;
    width:100%;
    height:auto;
    aspect-ratio:3/4;
    object-fit:cover;
    object-position:top
  }
  #project-visual-development .featured-visual-narratives{display:contents}
  #project-visual-development .featured-visual-narratives img{
    width:100%;
    aspect-ratio:3/4;
    object-fit:cover;
    object-position:center
  }
  #project-editorial .case-gallery--covers{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  #project-editorial .case-gallery--covers>img:nth-child(n){
    grid-column:auto
  }
  #project-editorial .case-gallery--covers>img:first-child{
    grid-column:1/-1
  }
  #project-editorial .case-gallery--covers>img:nth-child(6){
    display:none
  }
  #project-editorial .medical-cover-more{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  #project-editorial .case-gallery--covers .medical-cover-more>img:nth-child(n){
    grid-column:auto
  }
}