/* HZF Portfolio v7.0 — consolidated page/component rules */

/* migrated from style.css */
:root {
  --background: #ffffff;
  --surface: #ffffff;
  --foreground: #111111;
  --text-secondary: #3d3d3d;
  --text-muted: #5f5f5f;
  --text-tertiary: #6b6b6b;
  --border: rgba(17, 17, 17, 0.22);
  --disabled: #a3a3a3;
  --ai-accent: #111111;
  --font-sans: "Inter", "SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-cjk: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Inter", system-ui, sans-serif;
  --font-mono: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --max-width: 1500px;
  --page-pad: clamp(18px, 3.2vw, 48px);
  --section-gap: clamp(76px, 9vw, 124px);
  --radius: 14px;
  --hairline: 0 0 0 1px rgba(0, 0, 0, 0.08);
  --header-height: 64px;
  --media-surface: #f4f4f2;
  --media-line: rgba(17, 17, 17, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; scroll-padding-top: calc(var(--header-height) + 28px); }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-cjk);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.lb-locked { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
button { color: inherit; }
::selection { background: #e9e9e7; color: var(--foreground); }

:focus-visible {
  outline: 2px solid var(--foreground);
  outline-offset: 4px;
}
.skip-link {
  position: fixed;
  z-index: 999;
  top: 10px;
  left: 10px;
  transform: translateY(-160%);
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--foreground);
  color: white;
}
.skip-link:focus { transform: none; }
.shell, .page-shell, .site-nav, .footer-grid {
  width: min(calc(100% - (var(--page-pad) * 2)), var(--max-width));
  margin-inline: auto;
}
.page-shell { width: min(calc(100% - (var(--page-pad) * 2)), var(--max-width)); }

/* Header */
.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  height: var(--header-height);
  border-bottom: 1px solid transparent;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 180ms ease, background-color 180ms ease;
}
.site-header[data-scrolled="true"] { border-color: var(--border); background: rgba(255, 255, 255, 0.96); }
.site-nav {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 24px;
  border: 1px solid var(--foreground);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}
.brand-name, .brand-zh { font-size: 14px; font-weight: 500; letter-spacing: -0.02em; }
.brand-en { display: none; }
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2vw, 30px); }
.nav-links > a, .nav-dd-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-secondary);
  font-size: 13px;
  white-space: nowrap;
  transition: color 180ms ease;
}
.nav-links > a:hover, .nav-dd-trigger:hover, .nav-links > a[aria-current="true"] { color: var(--foreground); }
.nav-links > a[aria-current="true"]::after {
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
}
.nav-resume { padding-left: 20px; border-left: 1px solid var(--border); }
.nav-toggle { display: none; border: 0; background: transparent; width: 44px; height: 44px; padding: 12px; cursor: pointer; }
.nav-toggle span { display: block; height: 1px; background: var(--foreground); transition: transform 180ms ease; }
.nav-toggle span + span { margin-top: 7px; }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.nav-dd, .nav-tools, .tool-btn, .mode-toggle, .stage-aurora, .scroll-progress { display: none; }

/* Shared typography and controls */
.eyebrow, .kicker, .cs-eyebrow, .case-meta .cm-k, .proc-k, .tf-k, .kj-k, .cue-label, .scope-label, .sg-label, .asset-code, .asset-status, .exp-period, .project-tag, .col-tag {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  color: var(--text-secondary);
  font-size: 14px;
}
.text-link span { transition: transform 180ms ease; }
.text-link:hover { color: var(--foreground); text-decoration: underline; text-underline-offset: 5px; }
.text-link:hover span { transform: translate(2px, -1px); }
.primary-button, .secondary-button, .pill, .pcta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius);
  font-size: 14px;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.primary-button { border: 1px solid var(--foreground); background: var(--foreground); color: white; }
.primary-button:hover { background: #222222; }
.secondary-button, .pill, .pcta-link { border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); }
.secondary-button:hover, .pill:hover, .pcta-link:hover { border-color: var(--disabled); color: var(--foreground); }
.pill svg { width: 14px; margin-right: 8px; }

/* Home hero */
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  align-items: end;
  gap: clamp(48px, 7vw, 112px);
  padding-top: clamp(84px, 10vw, 128px);
  padding-bottom: clamp(76px, 8vw, 112px);
}
.hero-copy { min-width: 0; align-self: end; }
.home-hero h1 {
  margin-top: 24px;
  font-size: clamp(68px, 8.4vw, 112px);
  font-weight: 420;
  line-height: .88;
  letter-spacing: -0.07em;
}
.hero-role {
  margin-top: 30px;
  font-size: clamp(23px, 2.35vw, 34px);
  font-weight: 420;
  line-height: 1.2;
  letter-spacing: -0.04em;
}
.hero-tagline-home {
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
}
.hero-intro {
  max-width: 790px;
  margin-top: 30px;
  color: var(--text-secondary);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.68;
}
.hero-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 26px;
  list-style: none;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.hero-skills li + li::before { margin-right: 16px; color: var(--disabled); content: "·"; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: 26px; color: var(--text-muted); font-size: 13px; }
.hero-meta > span { min-height: 44px; display: inline-flex; align-items: center; }
.status { gap: 8px; }
.status i { width: 6px; height: 6px; border-radius: 50%; background: var(--ai-accent); box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08); }
.workflow-status {
  align-self: end;
  padding: 15px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--hairline);
  font-family: var(--font-mono);
}
.workflow-head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); color: var(--text-tertiary); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; }
.workflow-head span:last-child { color: var(--ai-accent); }
.workflow-status ol { list-style: none; margin-top: 4px; }
.workflow-status li { display: grid; grid-template-columns: 28px 1fr 8px; align-items: center; gap: 8px; min-height: 35px; color: var(--text-tertiary); font-size: 11px; letter-spacing: 0.04em; transition: color 180ms ease; }
.workflow-status li span { color: var(--disabled); }
.workflow-status li b { font-weight: 400; text-transform: uppercase; }
.workflow-status li i { width: 6px; height: 6px; border: 1px solid var(--disabled); border-radius: 50%; }
.workflow-status li[data-state="done"], .workflow-status li[data-state="active"] { color: var(--foreground); }
.workflow-status li[data-state="done"] i { border-color: var(--ai-accent); background: var(--ai-accent); }
.workflow-status li[data-state="active"] i { border-color: var(--ai-accent); box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.10); }
.workflow-status > p { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--text-tertiary); font-size: 10px; line-height: 1.55; }

/* Sections */
.section { padding-block: var(--section-gap); border-top: 1px solid var(--border); }
.section-heading { display: grid; grid-template-columns: minmax(150px, 0.35fr) minmax(0, 1fr) auto; align-items: start; gap: 24px; margin-bottom: clamp(38px, 5vw, 64px); }
.section-heading h2, .section-aside h2 {
  max-width: 760px;
  font-size: clamp(34px, 4.2vw, 58px);
  font-weight: 420;
  line-height: 1.02;
  letter-spacing: -0.05em;
  text-wrap: balance;
}
.section-copy { max-width: 520px; color: var(--text-secondary); font-size: 15px; }

/* Selected work */
.selected-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(64px, 7vw, 96px) clamp(24px, 3.2vw, 44px);
  align-items: start;
}
.selected-card { min-width: 0; }
.selected-card.feature-wide { grid-column: 1 / -1; }
.selected-card.feature-tall { width: 76%; justify-self: start; }
.selected-card > a { display: block; }
.selected-card.feature-lead > a {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(300px, .72fr);
  align-items: end;
  gap: clamp(34px, 5vw, 72px);
}
.selected-media {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--media-line);
  background: var(--media-surface);
}
.selected-media::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .24);
  pointer-events: none;
  content: "";
}
.selected-media img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  object-fit: contain;
  transition: transform 260ms ease;
}
.selected-card.feature-lead .selected-media { max-width: 760px; }
.selected-card.feature-lead .selected-meta { align-self: end; max-width: 410px; padding: 0 0 10px; }
.selected-card.feature-wide:not(.feature-lead) .selected-meta { max-width: 860px; }
.selected-card:hover img, .selected-card:focus-within img { transform: scale(1.012); }
.selected-meta { padding-top: 16px; }
.selected-meta > p:first-child {
  display: flex;
  gap: 12px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.selected-meta > p:first-child span { color: var(--foreground); }
.selected-meta h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  font-size: clamp(21px, 2.2vw, 30px);
  font-weight: 430;
  line-height: 1.22;
  letter-spacing: -0.022em;
  text-wrap: pretty;
}
.selected-card.feature-lead .selected-meta h3 { font-size: clamp(28px, 3.2vw, 43px); line-height: 1.15; }
.selected-meta h3 i { flex: 0 0 auto; font-style: normal; font-size: .72em; font-weight: 400; transition: transform 180ms ease; }
.selected-card:hover h3 i, .selected-card:focus-within h3 i { transform: translate(3px, -3px); }
.selected-type { margin-top: 8px; color: var(--text-secondary); font-size: 14px; line-height: 1.55; }
.selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 14px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: .72;
  transition: opacity 180ms ease;
}
.selected-card:hover .selected-tags { opacity: 1; }

/* All work */
.all-work-section { padding-bottom: calc(var(--section-gap) + 8px); }
.work-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.filter-scroll { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.035em;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.chip span { margin-left: 7px; color: var(--text-tertiary); }
.chip:hover { border-color: var(--disabled); color: var(--foreground); }
.chip[aria-pressed="true"] { border-color: var(--foreground); background: var(--foreground); color: white; }
.chip[aria-pressed="true"] span { color: #cfcfcf; }
.work-count { flex: 0 0 auto; color: var(--text-tertiary); font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
.project-index { border-top: 1px solid var(--foreground); }
.index-row { border-bottom: 1px solid var(--border); }
.index-row[hidden] { display: none; }
.index-row > a { display: grid; grid-template-columns: 48px 112px minmax(240px, 1fr) minmax(180px, .55fr) 24px; align-items: center; gap: 20px; min-height: 118px; padding-block: 16px; }
.index-number { align-self: start; padding-top: 3px; color: var(--text-tertiary); font-family: var(--font-mono); font-size: 10px; }
.index-row figure {
  display: grid;
  place-items: center;
  width: 112px;
  aspect-ratio: 1.4 / 1;
  overflow: hidden;
  border: 1px solid var(--media-line);
  background: var(--media-surface);
}
.index-row img { width: 100%; height: 100%; object-fit: cover; transition: transform 220ms ease; }
.index-row figure.media-square img,
.index-row figure.media-portrait img { object-fit: contain; padding: 4px; }
.index-row figure.media-page img { object-position: center top; }
.index-row:hover img, .index-row:focus-within img { transform: scale(1.025); }
.index-title h3 { font-size: clamp(17px, 1.5vw, 21px); font-weight: 430; line-height: 1.2; letter-spacing: -0.025em; }
.index-title p { max-width: 620px; margin-top: 6px; color: var(--text-tertiary); font-size: 13px; line-height: 1.45; }
.index-category { color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.index-arrow { justify-self: end; transition: transform 180ms ease; }
.index-row:hover .index-arrow, .index-row:focus-within .index-arrow { transform: translate(3px, -3px); }
.works-empty { padding: 40px 0; color: var(--text-muted); }

/* About and capabilities */
.about-section { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: clamp(48px, 8vw, 120px); }
.section-aside .eyebrow { margin-bottom: 26px; }
.about-copy { max-width: 820px; }
.about-copy > p { color: var(--text-secondary); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.64; }
.about-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 42px; }
.about-pillars article { padding-top: 16px; border-top: 1px solid var(--foreground); }
.about-pillars h3 { font-size: 15px; font-weight: 500; }
.about-pillars p { margin-top: 9px; color: var(--text-secondary); font-size: 13px; line-height: 1.58; }
.profile-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 42px; padding-top: 18px; border-top: 1px solid var(--border); }
.profile-meta dt { color: var(--text-tertiary); font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.profile-meta dd { margin-top: 8px; color: var(--text-secondary); font-size: 13px; }
.capability-list { list-style: none; border-top: 1px solid var(--foreground); }
.capability-list li { display: grid; grid-template-columns: 44px minmax(260px, .82fr) minmax(320px, 1.18fr); align-items: start; gap: 24px; padding-block: 24px; border-bottom: 1px solid var(--border); transition: padding-left 180ms ease; }
.capability-list li:hover { padding-left: 6px; }
.capability-list li > span { padding-top: 5px; color: var(--text-tertiary); font-family: var(--font-mono); font-size: 10px; }
.capability-list h3 { font-size: clamp(21px, 2.1vw, 29px); font-weight: 420; line-height: 1.15; letter-spacing: -0.035em; }
.capability-list h3 small { display: block; margin-top: 7px; color: var(--text-tertiary); font-family: var(--font-mono); font-size: 9px; font-weight: 400; letter-spacing: .045em; text-transform: uppercase; }
.capability-list p { padding-top: 3px; color: var(--text-secondary); font-size: 14px; line-height: 1.62; }

/* Contact and footer */
.contact-section { padding-block: clamp(80px, 10vw, 132px); border-top: 1px solid var(--border); background: var(--surface); }
.contact-inner h2 { margin-top: 24px; font-size: clamp(48px, 6.2vw, 80px); font-weight: 420; line-height: .98; letter-spacing: -0.058em; }
.contact-inner > p:not(.eyebrow) { max-width: 760px; margin-top: 28px; color: var(--text-secondary); font-size: 16px; line-height: 1.62; }
.contact-details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 44px; border-top: 1px solid var(--foreground); }
.contact-details > div { min-width: 0; padding: 18px 20px 18px 0; border-bottom: 1px solid var(--border); }
.contact-details span { display: block; color: var(--text-tertiary); font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.contact-details a, .contact-details b { display: block; margin-top: 8px; overflow-wrap: anywhere; font-size: 15px; font-weight: 430; }
.contact-details a:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact-resume-link { margin-top: 28px; }
.site-footer { border-top: 1px solid var(--border); }
.footer-grid, .foot-grid { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(260px, 1fr); align-items: start; gap: 22px 40px; padding-block: 30px; color: var(--text-tertiary); font-size: 11px; }
.footer-grid p:first-child { color: var(--foreground); }
.footer-grid p:first-child span { display: block; margin-top: 4px; color: var(--text-tertiary); font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
.footer-grid p:last-child { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid var(--border); line-height: 1.55; }

/* Case pages — editorial rebuild of existing semantic content */
body:not(.portfolio-page) .site-header + .page-shell { padding-top: 0; }
.page-hero { padding: clamp(84px, 10vw, 132px) 0 clamp(52px, 7vw, 86px); }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text-tertiary); font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.crumb svg { width: 12px; }
.crumb a:hover { color: var(--foreground); }
.page-title { max-width: 1120px; margin-top: 28px; font-size: clamp(42px, 6vw, 76px); font-weight: 420; line-height: .98; letter-spacing: -0.056em; text-wrap: balance; }
.pt-en, .page-name { display: block; margin-top: 14px; color: var(--text-tertiary); font-family: var(--font-mono); font-size: clamp(11px, 1vw, 14px); font-weight: 400; line-height: 1.4; letter-spacing: .045em; text-transform: uppercase; }
.page-lede { max-width: 760px; margin-top: 30px; color: var(--text-secondary); font-size: clamp(17px, 1.7vw, 22px); line-height: 1.5; }
.case-page { border-top: 1px solid var(--border); }
.case-section { padding-block: clamp(70px, 8vw, 108px); border-bottom: 1px solid var(--border); }
.cs-title { max-width: 900px; margin-top: 22px; font-size: clamp(32px, 4vw, 52px); font-weight: 420; line-height: 1.05; letter-spacing: -0.048em; text-wrap: balance; }
.cs-text { max-width: 790px; margin-top: 24px; color: var(--text-secondary); font-size: 16px; line-height: 1.62; }
.cs-text b, .deliver-lead b, .reuse b, .proc-v b { color: var(--foreground); font-weight: 500; }
.case-overview { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(270px, .45fr); gap: clamp(28px, 5vw, 68px); align-items: start; margin-top: 28px; }
.co-hero {
  grid-row: auto;
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--media-line);
  background: var(--media-surface);
}
.co-hero img, .co-hero video { display: block; width: 100%; height: 100%; object-fit: contain; }
.co-hero.media-landscape { aspect-ratio: 1.6 / 1; }
.co-hero.media-square { width: min(100%, 760px); aspect-ratio: 1 / 1; justify-self: center; }
.co-hero.media-portrait { width: min(100%, 680px); aspect-ratio: 4 / 5; justify-self: center; }
.co-hero.media-page { aspect-ratio: 4 / 3; }
.co-hero.media-page img { object-fit: cover; object-position: center top; }
.co-hero.media-landscape img,
.co-hero.media-square img,
.co-hero.media-portrait img { object-fit: contain; }
.case-meta { border-top: 1px solid var(--foreground); }
.cm-item { display: grid; grid-template-columns: 115px 1fr; gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--border); }
.cm-v { color: var(--text-secondary); font-size: 13px; }
.case-overview-side {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
  min-width: 0;
}
.case-overview-side > .cs-text { margin-top: 0; font-size: 14px; }
.keyjudge, .transfer, .reuse { max-width: 860px; margin-top: 34px; padding: 18px 0 18px 22px; border-left: 1px solid var(--foreground); color: var(--text-secondary); }
.keyjudge .kj-k { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--ai-accent); }
.keyjudge svg { width: 14px; }
.flowline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 34px; }
.flowstep { padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-secondary); font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.flowstep.key { border-color: rgba(17,17,17,.28); color: var(--ai-accent); }
.flow-sep { color: var(--disabled); }
.proc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 30px; background: var(--border); border: 1px solid var(--border); }
.proc-card { min-height: 190px; padding: 22px; background: var(--surface); }
.proc-k { display: flex; align-items: center; gap: 8px; color: var(--text-tertiary); }
.proc-k svg { width: 14px; }
.proc-v { margin-top: 26px; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.media-grid, .pg-grid, .pages, .collection { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; margin-top: 38px; }
.media-grid.cols-3, .pg-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.media-grid.duo, .pg-grid.duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shot, .pg-item, .page-full, .page-sec, .feature, .scale-item {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: zoom-in;
}
.shot-fig, .pg-thumb {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--media-line);
  background: var(--media-surface);
}
.shot-fig.media-landscape { aspect-ratio: 4 / 3; }
.shot-fig.media-square { aspect-ratio: 1 / 1; }
.shot-fig.media-portrait, .shot-fig.media-page { aspect-ratio: 4 / 5; }
.pg-thumb.media-landscape { aspect-ratio: 1.35 / 1; }
.pg-thumb.media-square { aspect-ratio: 1 / 1; }
.pg-thumb.media-portrait, .pg-thumb.media-page { aspect-ratio: 4 / 5; }
.shot-fig img, .pg-thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform 240ms ease; }
.shot-fig.media-page img, .pg-thumb.media-page img { object-fit: cover; object-position: center top; }
.shot:hover img, .pg-item:hover img, .shot:focus-visible img, .pg-item:focus-visible img { transform: scale(1.018); }
.shot-cap, .pg-cap { display: block; padding-top: 12px; }
.shot-cap b, .pg-cap b { display: block; font-size: 14px; font-weight: 500; }
.shot-cap span, .pg-cap span { display: block; margin-top: 4px; color: var(--text-tertiary); font-size: 12px; }
.shot-zoom, .pg-zoom { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(23,23,23,.72); color: white; }
.shot-zoom svg, .pg-zoom svg { width: 14px; }
.pg-wrap { margin-top: 36px; }
.pg-grid.duo .pg-item:last-child .pg-thumb.media-page { max-height: 720px; }
.deliver-lead { max-width: 760px; margin-top: 26px; color: var(--text-secondary); }
.deliver-list { display: flex; flex-wrap: wrap; gap: 8px; max-width: 900px; margin-top: 26px; list-style: none; }
.deliver-list li { padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-secondary); font-family: var(--font-mono); font-size: 10px; letter-spacing: .03em; }
.next-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: stretch; padding-block: 48px; }
.nn-link, .nn-all { min-height: 96px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.nn-link { display: flex; flex-direction: column; justify-content: space-between; }
.nn-next { text-align: right; }
.nn-dir { display: flex; align-items: center; gap: 7px; color: var(--text-tertiary); font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.nn-next .nn-dir { justify-content: flex-end; }
.nn-dir svg { width: 13px; }
.nn-name { margin-top: 16px; font-size: 14px; }
.nn-center { display: grid; }
.nn-all { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 12px; }
.nn-all svg { width: 14px; }

/* Legacy case variants */
.page-bar, .scale-row { margin-top: 30px; }
.page-full img, .page-sec img, .pages img, .collection img, .feature img, .scale-item img { width: 100%; height: auto; }
.page-sec, .feature, .scale-item { cursor: default; }
.scale-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.scale-item { min-height: 130px; padding: 20px; background: var(--surface); }
.scale-k { color: var(--text-tertiary); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; }
.scale-v { margin-top: 10px; color: var(--text-secondary); }
.cover-video, .video-cover { width: 100%; background: #f4f4f2; }
.cover-sound-toggle { position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: rgba(23,23,23,.68); color: white; cursor: pointer; }
.cover-sound-toggle svg { width: 18px; margin: auto; }

/* Lightbox */
.lightbox { position: fixed; z-index: 500; inset: 0; display: none; padding: 22px; }
.lightbox[data-open="true"] { display: grid; place-items: center; }
.lb-backdrop { position: absolute; inset: 0; background: rgba(15,15,15,.92); }
.lb-stage { position: relative; width: min(94vw, 1440px); height: min(92vh, 1000px); display: grid; grid-template-rows: 1fr auto; background: #111; color: white; }
.lb-scroll { min-height: 0; overflow: auto; display: grid; place-items: start center; }
.lb-scroll img { width: auto; max-width: 100%; height: auto; margin: auto; }
.lb-btn { position: absolute; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(17,17,17,.75); color: white; cursor: pointer; }
.lb-btn svg { width: 18px; }
.lb-close { top: 14px; right: 14px; }
.lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.lb-caption { display: grid; grid-template-columns: 1fr auto auto; gap: 20px; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.14); font-size: 12px; }
.lb-hint { color: #999; }

/* Existing footer markup */
.foot-grid { grid-template-columns: 1fr auto; }
.foot-brand { font-size: 14px; color: var(--foreground); }
.fb-en { display: block; margin-top: 5px; color: var(--text-tertiary); font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.foot-note { padding-bottom: 28px; color: var(--text-tertiary); font-size: 11px; }

/* Resume page */
body.resume-page { background: var(--background); }
.layout-grid { width: min(calc(100% - (var(--page-pad) * 2)), var(--max-width)); margin-inline: auto; display: grid; grid-template-columns: minmax(300px, .42fr) minmax(0, 1fr); gap: clamp(42px, 7vw, 96px); padding-block: 70px 100px; }
.col-left { position: relative; }
.col-right { min-width: 0; }
body.resume-page .hero { position: sticky; top: calc(var(--header-height) + 32px); padding: 0; }
body.resume-page .hero-name { font-size: clamp(44px, 5vw, 68px); font-weight: 420; line-height: .95; letter-spacing: -.055em; }
.hero-tagline, .hero-subrole, .hero-roles-en, .hero-statement { margin-top: 18px; color: var(--text-secondary); }
.hero-roles { margin-top: 26px; font-size: 24px; line-height: 1.18; letter-spacing: -.035em; }
.hero-statement { font-size: 15px; line-height: 1.65; }
.hero-statement strong, .accent-strong { color: var(--foreground); font-weight: 500; }
.hero-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 28px; border: 1px solid var(--border); background: var(--border); }
.hero-metric { padding: 14px; background: var(--surface); }
.hm-n { display: block; font-size: 24px; letter-spacing: -.04em; }
.hm-l { display: block; margin-top: 3px; color: var(--text-tertiary); font-size: 11px; }
.role-aim { margin-top: 28px; }
.role-tags, .contact-pills, .tag-row, .stack-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.role-tag, .capsule-tag, .bullet-tag, .stack-tags span { padding: 7px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary); font-family: var(--font-mono); font-size: 9px; }
.contact-pills a { min-height: 36px; padding: 0 10px; border-bottom: 1px solid var(--border); color: var(--text-secondary); font-size: 12px; }
.hero-portrait { display: block; width: min(176px, 52%); margin-bottom: 28px; }
.hero-portrait .hp-frame { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid var(--border); border-radius: var(--radius); background: #f4f4f2; }
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.scroll-cue { display: none; }
body.resume-page .section { padding-block: 56px; }
body.resume-page .section:first-child { padding-top: 0; border-top: 0; }
body.resume-page .section-head { display: grid; grid-template-columns: minmax(180px,.36fr) 1fr; gap: 24px; margin-bottom: 28px; }
body.resume-page .section-title { font-size: clamp(28px, 3vw, 42px); font-weight: 420; line-height: 1.05; letter-spacing: -.045em; }
.sub-en, .ct-en, .project-title-en { display: block; margin-top: 6px; color: var(--text-tertiary); font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
body.resume-page .section-desc { color: var(--text-secondary); font-size: 14px; }
.summary-card, .competency-card, .exp-item, .project-card, .asset-card, .edu-card { background: transparent; border-top: 1px solid var(--foreground); padding-top: 22px; }
.summary-lead { color: var(--text-secondary); font-size: 17px; line-height: 1.65; }
.summary-pillars, .competency-grid, .asset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; margin-top: 30px; }
.summary-pillar h3, .competency-card h3, .asset-card-name { font-size: 19px; font-weight: 450; letter-spacing: -.025em; }
.summary-pillar p, .competency-card p, .asset-value, .edu-note { margin-top: 10px; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.summary-scope { margin-top: 30px; }
.stack-groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-top: 30px; }
.stack-strip { padding-top: 18px; border-top: 1px solid var(--border); }
.stack-strip-head { display: flex; justify-content: space-between; gap: 16px; }
.exp-item + .exp-item, .project-card + .project-card { margin-top: 46px; }
.exp-head, .project-head { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start; }
.exp-org, .project-title-zh { font-size: 22px; font-weight: 450; letter-spacing: -.035em; }
.exp-role { margin-top: 8px; color: var(--text-secondary); }
.exp-summary { margin-top: 18px; color: var(--text-secondary); }
.exp-bullets { margin-top: 18px; padding-left: 20px; color: var(--text-secondary); }
.exp-bullet + .exp-bullet { margin-top: 12px; }
.case-body { display: grid; gap: 18px; margin-top: 22px; }
.case-row { display: grid; grid-template-columns: 100px 1fr; gap: 20px; }
.case-k { color: var(--text-tertiary); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; }
.case-v { color: var(--text-secondary); }
.case-did { padding-left: 18px; }
.case-link { display: inline-flex; margin-top: 20px; border-bottom: 1px solid var(--foreground); font-size: 13px; }
.portfolio-cta { margin-top: 48px; padding: 28px; border: 1px solid var(--border); background: var(--surface); }
.pcta-main { font-size: 24px; letter-spacing: -.035em; }
.pcta-sub { margin-top: 8px; color: var(--text-tertiary); }
.pcta-link { margin-top: 20px; }
.edu-school { font-size: 24px; font-weight: 450; letter-spacing: -.035em; }
.edu-major { margin-top: 8px; color: var(--text-secondary); }
.mobile-section, .section-nav, .site-bar { display: none; }

/* Reveals */
.reveal { opacity: 1; transform: none; }
.motion-ready .reveal { opacity: 0; transform: translateY(12px); transition: opacity 520ms ease, transform 520ms cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .home-hero { grid-template-columns: 1fr; align-items: start; }
  .workflow-status { width: min(100%, 420px); justify-self: end; }
  .section-heading { grid-template-columns: 150px 1fr; }
  .section-heading .text-link, .section-heading .section-copy { grid-column: 2; }
  .index-row > a { grid-template-columns: 38px 86px minmax(0, 1fr) 24px; }
  .index-row figure { width: 86px; }
  .index-category { display: none; }
  .about-section { grid-template-columns: 1fr; }
  .section-aside h2 { max-width: 760px; }
  .case-overview { grid-template-columns: 1fr; }
  .co-hero { grid-row: auto; }
  .case-overview-side > .cs-text { grid-column: auto; }
  .layout-grid { grid-template-columns: 1fr; }
  body.resume-page .hero { position: static; }
}

@media (max-width: 900px) {
  .selected-card.feature-lead > a { display: block; }
  .selected-card.feature-lead .selected-media { max-width: none; }
  .selected-card.feature-lead .selected-meta { max-width: 720px; padding: 18px 0 0; }
}

@media (max-width: 760px) {
  :root { --page-pad: 18px; --section-gap: 72px; }
  .site-header { height: 60px; }
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed;
    top: 60px;
    right: 0;
    left: 0;
    display: grid;
    align-content: start;
    gap: 0;
    padding: 12px var(--page-pad) 20px;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,.98);
    transform: translateY(-130%);
    visibility: hidden;
    transition: transform 200ms ease, visibility 200ms ease;
  }
  .nav-links[data-open="true"] { transform: none; visibility: visible; }
  .nav-links > a { min-height: 48px; border-bottom: 1px solid var(--border); font-size: 15px; }
  .nav-links > a[aria-current="true"]::after { display: none; }
  .nav-resume { padding-left: 0; border-left: 0; }
  .home-hero { gap: 44px; padding-top: 68px; padding-bottom: 68px; }
  .home-hero h1 { font-size: clamp(58px, 20vw, 82px); }
  .hero-role { margin-top: 24px; font-size: clamp(22px, 7vw, 29px); }
  .hero-tagline-home { font-size: 13px; }
  .hero-intro { margin-top: 24px; font-size: 15px; line-height: 1.65; }
  .hero-skills { gap: 8px 12px; }
  .hero-skills li + li::before { margin-right: 12px; }
  .about-pillars { grid-template-columns: 1fr; gap: 24px; }
  .contact-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-details > div:nth-child(odd) { padding-right: 16px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid p:last-child { grid-column: auto; }
  .workflow-status { width: 100%; justify-self: stretch; }
  .section-heading { display: block; }
  .section-heading h2 { margin-top: 20px; }
  .section-heading .text-link, .section-heading .section-copy { margin-top: 20px; }
  .selected-grid { grid-template-columns: 1fr; gap: 58px; }
  .selected-card.feature-wide { grid-column: auto; }
  .selected-card.feature-tall { width: 100%; justify-self: stretch; }
  .selected-card.feature-lead > a { display: block; }
  .selected-card.feature-lead .selected-media { max-width: none; }
  .selected-card.feature-lead .selected-meta { max-width: none; padding: 16px 0 0; }
  .work-toolbar { display: block; }
  .filter-scroll { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--page-pad) * -1); padding: 2px var(--page-pad) 12px; scrollbar-width: thin; }
  .chip { flex: 0 0 auto; min-height: 40px; }
  .work-count { margin-top: 10px; }
  .index-row > a { grid-template-columns: 32px 70px minmax(0, 1fr) 18px; gap: 12px; min-height: 104px; }
  .index-row figure { width: 70px; }
  .index-title p { display: none; }
  .profile-meta { grid-template-columns: 1fr; gap: 18px; }
  .capability-list li { grid-template-columns: 32px 1fr; gap: 14px; }
  .capability-list p { grid-column: 2; padding-top: 0; }
  .contact-inner h2 { font-size: clamp(42px, 13vw, 60px); }
  .contact-links { align-items: stretch; }
  .primary-button, .secondary-button { width: 100%; overflow-wrap: anywhere; }
  .footer-grid, .foot-grid { grid-template-columns: 1fr; gap: 14px; align-items: start; }
  .footer-grid p:last-child { margin-top: 12px; }
  .foot-links { justify-content: flex-start; }
  .page-hero { padding-top: 72px; }
  .page-title { font-size: clamp(40px, 12vw, 58px); }
  .proc-grid { grid-template-columns: 1fr; }
  .media-grid, .pg-grid, .pages, .collection, .media-grid.cols-3, .pg-grid.cols-3, .media-grid.duo, .pg-grid.duo { grid-template-columns: 1fr; }
  .next-nav { grid-template-columns: 1fr 1fr; }
  .nn-center { grid-column: 1 / -1; grid-row: 2; }
  .nn-all { min-height: 52px; justify-content: center; }
  .lb-stage { width: 100%; height: 100%; }
  .lightbox { padding: 0; }
  .lb-caption { grid-template-columns: 1fr auto; }
  .lb-hint { display: none; }
  .layout-grid { padding-top: 52px; }
  .hero-portrait { width: 132px; margin-bottom: 22px; }
  body.resume-page .section-head { grid-template-columns: 1fr; }
  .summary-pillars, .competency-grid, .asset-grid, .stack-groups { grid-template-columns: 1fr; }
  .exp-head, .project-head { grid-template-columns: 1fr; }
  .case-row { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 420px) {
  .brand-name { display: none; }
  .hero-meta { gap: 2px 14px; }
  .hero-meta > span, .text-link { min-height: 40px; }
  .selected-meta h3 { font-size: 22px; }
  .index-row > a { grid-template-columns: 26px 58px minmax(0, 1fr) 14px; gap: 9px; }
  .index-row figure { width: 58px; }
  .index-title h3 { font-size: 15px; }
  .capability-list h3 { font-size: 21px; }
  .contact-details { grid-template-columns: 1fr; }
  .hero-skills li + li::before { display: none; }
  .next-nav { grid-template-columns: 1fr; }
  .nn-center { grid-column: auto; grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motion-ready .reveal { opacity: 1; transform: none; transition: none; }
  .selected-media img, .index-row img, .workflow-status li, .capability-list li { transform: none; transition: none; }
}
.toolbar { display: none; }
.summary-pillar .sp-k,
.summary-pillar .sp-v,
.competency-card .ct-zh,
.competency-card .ct-desc,
.asset-card .asset-value { display: block; }
.summary-pillar .sp-k { font-size: 15px; font-weight: 500; }
.summary-pillar .sp-k .en,
.competency-card .ct-en {
  display: block;
  margin-top: 3px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.summary-pillar .sp-v { margin-top: 8px; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.competency-card .ct-zh { margin-top: 12px; font-size: 18px; font-weight: 500; }
.competency-card .ct-desc { margin-top: 10px; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
@media (max-width: 980px) {
  body.resume-page .hero { top: auto; }
}



/* Chinese editorial typography and resume project experience — v3 */
body.resume-page {
  font-family: var(--font-cjk);
  font-kerning: normal;
}
body.resume-page .hero-name,
body.resume-page .section-title,
body.resume-page .project-title-zh,
body.resume-page .exp-org,
body.resume-page .pcta-main {
  font-family: var(--font-cjk);
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
body.resume-page .hero-name { letter-spacing: -.032em; }
body.resume-page .section-head {
  grid-template-columns: minmax(220px, .38fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px);
  margin-bottom: clamp(34px, 4.5vw, 52px);
}
body.resume-page .section-title {
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.16;
  letter-spacing: -.022em;
}
body.resume-page .section-desc {
  max-width: 680px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.75;
}
body.resume-page .sub-en {
  margin-top: 8px;
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: .055em;
}

#projects .project-card {
  padding-top: 0;
  border-top: 1px solid var(--foreground);
  background: transparent;
}
#projects .project-card + .project-card { margin-top: clamp(64px, 7vw, 88px); }
#projects .project-overview {
  --project-rail: clamp(176px, 23%, 224px);
  display: grid;
  grid-template-columns: var(--project-rail) minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 44px);
  align-items: start;
  padding-block: clamp(24px, 3vw, 34px);
}
#projects .project-rail { min-width: 0; }
#projects .project-tag {
  color: var(--text-muted);
  font-family: var(--font-cjk);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: .015em;
  text-transform: none;
}
#projects .project-title-en {
  max-width: 210px;
  margin-top: 16px;
  color: var(--text-tertiary);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .045em;
  overflow-wrap: normal;
  word-break: normal;
}
#projects .role-tags {
  display: grid;
  gap: 5px;
  margin-top: 28px;
}
#projects .role-tag {
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--text-muted);
  font-family: var(--font-cjk);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
}
#projects .role-tag::before {
  margin-right: 7px;
  color: var(--disabled);
  content: "—";
}
#projects .project-summary { min-width: 0; }
#projects .project-title-zh {
  max-width: 760px;
  font-size: clamp(27px, 3.1vw, 38px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -.022em;
}
#projects .case-value {
  max-width: 740px;
  margin-top: 20px;
  color: var(--text-secondary);
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.72;
}
#projects .case-value strong,
#projects .transferable strong,
#projects .case-deliver b {
  color: var(--foreground);
  font-weight: 600;
}
#projects .case-body {
  --project-rail: clamp(176px, 23%, 224px);
  display: block;
  margin-top: 0;
  border-top: 1px solid var(--border);
}
#projects .case-row {
  display: grid;
  grid-template-columns: var(--project-rail) minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 44px);
  padding-block: 22px;
  border-bottom: 1px solid var(--border);
}
#projects .case-k {
  padding-top: 2px;
  color: var(--text-tertiary);
  font-family: var(--font-cjk);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .02em;
  text-transform: none;
}
#projects .case-v {
  max-width: 760px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.76;
}
#projects .case-did {
  margin: 0;
  padding-left: 1.15em;
}
#projects .case-did li + li { margin-top: 7px; }
#projects .case-deliver b { margin-right: 8px; }
#projects .project-closing {
  display: grid;
  grid-template-columns: var(--project-rail) minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 44px);
  align-items: start;
  padding-top: 24px;
}
#projects .transferable {
  grid-column: 2;
  grid-row: 1;
  max-width: 760px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.76;
}
#projects .case-link {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 8px;
  min-height: 44px;
  margin-top: -10px;
  border-bottom: 0;
  color: var(--foreground);
  font-size: 13px;
}
#projects .case-link::after {
  position: absolute;
  right: 0;
  bottom: 7px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
  content: "";
}
#projects .case-link { position: relative; }
#projects .case-link:hover::after,
#projects .case-link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
#projects .case-link svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  transition: transform 180ms ease;
}
#projects .case-link:hover svg,
#projects .case-link:focus-visible svg { transform: translateX(3px); }

#projects .portfolio-cta {
  margin-top: clamp(72px, 8vw, 104px);
  padding: 0;
  border: 0;
  background: transparent;
}
#projects .portfolio-cta .pcta-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 26px 0;
  border: 0;
  border-top: 1px solid var(--foreground);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}
#projects .portfolio-cta .pcta-text { display: block; min-width: 0; }
#projects .portfolio-cta .pcta-main {
  display: block;
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 450;
  line-height: 1.2;
  letter-spacing: -.022em;
}
#projects .portfolio-cta .pcta-sub {
  display: block;
  margin-top: 8px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .04em;
}
#projects .portfolio-cta svg {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  transition: transform 180ms ease;
}
#projects .portfolio-cta .pcta-link:hover svg,
#projects .portfolio-cta .pcta-link:focus-visible svg { transform: translateX(4px); }

@media (max-width: 1120px) {
  .layout-grid {
    grid-template-columns: 1fr;
    gap: clamp(68px, 9vw, 96px);
  }
  body.resume-page .hero {
    position: static;
    max-width: 820px;
  }
}

@media (max-width: 820px) {
  body.resume-page .section-head { grid-template-columns: 1fr; gap: 18px; }
  body.resume-page .section-desc { max-width: 720px; }
  #projects .project-overview,
  #projects .case-row,
  #projects .project-closing {
    --project-rail: 150px;
    gap: 24px;
  }
}

@media (max-width: 620px) {
  #projects .project-card + .project-card { margin-top: 64px; }
  #projects .project-overview { grid-template-columns: 1fr; gap: 24px; padding-block: 22px 26px; }
  #projects .project-title-en { max-width: none; margin-top: 8px; }
  #projects .role-tags { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-top: 16px; }
  #projects .role-tag::before { margin-right: 6px; }
  #projects .project-title-zh { font-size: clamp(25px, 7.6vw, 31px); line-height: 1.28; }
  #projects .case-value { margin-top: 16px; font-size: 16px; line-height: 1.7; }
  #projects .case-row { grid-template-columns: 1fr; gap: 8px; padding-block: 18px; }
  #projects .case-k { font-size: 11px; }
  #projects .case-v, #projects .transferable { font-size: 14px; line-height: 1.72; }
  #projects .project-closing { grid-template-columns: 1fr; gap: 18px; padding-top: 20px; }
  #projects .transferable { grid-column: 1; grid-row: 1; }
  #projects .case-link { grid-column: 1; grid-row: 2; margin-top: 0; }
  #projects .portfolio-cta .pcta-link { padding-block: 22px; }
  #projects .portfolio-cta svg { width: 22px; height: 22px; }
}

@media print {
  .hero-portrait { width: 118px; break-inside: avoid; }
  .hero-portrait .hp-frame { border-color: #dededb; }
}

/* v5 — image-led editorial system */
:root {
  --font-cjk: "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Inter", system-ui, sans-serif;
  --section-gap: clamp(104px, 11vw, 152px);
  --media-surface: #f4f4f2;
  --media-line: rgba(17, 17, 17, 0.12);
}
body { font-family: var(--font-cjk); letter-spacing: -0.006em; }
.brand-mark { width: auto; height: auto; border: 0; border-radius: 0; font-size: 10px; letter-spacing: .08em; }
.brand-mark::after { margin-left: 8px; color: var(--disabled); content: "/"; }
.brand-name { font-weight: 500; letter-spacing: -.02em; }
.section { padding-block: var(--section-gap); }
.section-heading {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: clamp(58px, 7vw, 92px);
}
.section-heading > .eyebrow { grid-column: 1 / 4; }
.section-heading h2 { grid-column: 4 / 9; max-width: none; font-size: clamp(36px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -.045em; }
.section-heading > .text-link,
.section-heading > .section-copy { grid-column: 10 / 13; justify-self: stretch; }
.section-heading > .text-link { justify-self: end; align-self: start; }
.section-heading > .section-copy { max-width: none; font-size: 14px; line-height: 1.7; }

/* Hero: identity, statement and a quiet workflow rail */
.home-hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: 20px;
  row-gap: clamp(52px, 7vw, 84px);
  min-height: calc(100svh - var(--header-height));
  padding-top: clamp(92px, 11vw, 150px);
  padding-bottom: clamp(88px, 10vw, 136px);
}
.hero-identity { grid-column: 1 / 4; grid-row: 1; min-width: 0; }
.hero-copy { grid-column: 4 / 10; grid-row: 1; min-width: 0; align-self: start; }
.workflow-status { grid-column: 10 / 13; grid-row: 2; align-self: end; }
.home-hero h1 { margin-top: 38px; font-size: clamp(38px, 4vw, 54px); font-weight: 430; line-height: 1.05; letter-spacing: -.045em; }
.hero-role { margin-top: 0; max-width: 760px; font-size: clamp(34px, 4.25vw, 58px); font-weight: 420; line-height: 1.13; letter-spacing: -.042em; text-wrap: balance; }
.hero-tagline-home { max-width: 670px; margin-top: 22px; font-size: 14px; line-height: 1.65; }
.hero-intro { max-width: 760px; margin-top: 28px; font-size: 15px; line-height: 1.72; }
.hero-skills { gap: 7px 15px; margin-top: 28px; font-size: 9px; }
.hero-meta { margin-top: 27px; }
.workflow-status {
  padding: 15px 0 0;
  border-top: 1px solid var(--foreground);
  border-radius: 0;
  background: transparent;
}
.workflow-head { padding-bottom: 11px; }
.workflow-status li { min-height: 32px; }
.workflow-status > p { line-height: 1.65; }

/* Selected work: every image gets its own spatial role */
.selected-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(104px, 12vw, 168px) 20px;
  align-items: start;
}
.selected-card { min-width: 0; }
.selected-card > a { display: block; }
.selected-card.layout-lead { grid-column: 1 / 13; }
.selected-card.layout-lead > a { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; align-items: end; }
.selected-card.layout-lead .selected-media { grid-column: 1 / 9; }
.selected-card.layout-lead .selected-meta { grid-column: 9 / 13; align-self: end; padding: 0 0 8px; }
.selected-card.layout-portrait { grid-column: 1 / 6; }
.selected-card.layout-landscape-offset { grid-column: 7 / 13; margin-top: clamp(84px, 10vw, 140px); }
.selected-card.layout-panorama { grid-column: 1 / 13; }
.selected-card.layout-left { grid-column: 1 / 7; }
.selected-card.layout-right { grid-column: 7 / 13; }
.selected-card.layout-left-wide { grid-column: 1 / 8; }
.selected-card.layout-right-narrow { grid-column: 8 / 13; margin-top: clamp(70px, 8vw, 116px); }
.selected-media {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--media-line);
  background: var(--media-surface);
}
.selected-media::after { display: none; }
.selected-media img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform 260ms ease; }
.layout-lead .selected-media { aspect-ratio: 1.5 / 1; }
.layout-lead .selected-media.media-square img { width: auto; height: 88%; }
.layout-portrait .selected-media { aspect-ratio: 4 / 5; }
.layout-portrait .selected-media img { width: auto; height: 100%; }
.layout-landscape-offset .selected-media { aspect-ratio: 1.55 / 1; }
.layout-panorama .selected-media { aspect-ratio: 2.15 / 1; }
.layout-left .selected-media,
.layout-right .selected-media,
.layout-left-wide .selected-media,
.layout-right-narrow .selected-media { aspect-ratio: 1.5 / 1; }
.selected-card:hover .selected-media img,
.selected-card:focus-within .selected-media img { transform: scale(1.012); }
.selected-meta { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 18px; padding-top: 16px; }
.selected-meta > p:first-child { grid-column: 1; grid-row: 1 / span 3; display: grid; align-content: start; gap: 6px; line-height: 1.45; }
.selected-meta > p:first-child span { display: block; }
.selected-meta h3 { grid-column: 2; margin: 0; font-size: clamp(20px, 2vw, 29px); line-height: 1.24; letter-spacing: -.026em; }
.selected-card.layout-lead .selected-meta { display: block; }
.selected-card.layout-lead .selected-meta > p:first-child { display: flex; }
.selected-card.layout-lead .selected-meta h3 { margin-top: 10px; font-size: clamp(30px, 3.1vw, 43px); line-height: 1.14; }
.selected-type { grid-column: 2; margin-top: 8px; font-size: 13px; }
.selected-tags { grid-column: 2; margin-top: 12px; }
.selected-card.layout-lead .selected-type,
.selected-card.layout-lead .selected-tags { grid-column: auto; }

/* Project archive: visual index rather than dense rows */
.work-toolbar { margin-bottom: 38px; }
.project-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(66px, 7vw, 94px) 20px; border-top: 0; }
.index-card { min-width: 0; }
.index-card[hidden] { display: none; }
.index-card > a { display: block; min-height: 0; padding: 0; }
.index-media {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--media-line);
  background: var(--media-surface);
}
.index-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform 240ms ease; }
.index-media.media-square img { inset: 7%; width: 86%; height: 86%; }
.index-media.media-portrait img { width: auto; max-width: 88%; height: 100%; left: 50%; transform: translateX(-50%); }
.index-media.media-page img { object-fit: cover; object-position: center top; }
.index-card:hover .index-media img,
.index-card:focus-within .index-media img { transform: scale(1.015); }
.index-card:hover .index-media.media-portrait img,
.index-card:focus-within .index-media.media-portrait img { transform: translateX(-50%) scale(1.015); }
.index-meta { position: relative; padding-top: 14px; }
.index-number { color: var(--text-tertiary); font-family: var(--font-mono); font-size: 9px; line-height: 1; }
.index-meta h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 10px; font-size: clamp(17px, 1.55vw, 21px); font-weight: 430; line-height: 1.28; letter-spacing: -.024em; }
.index-meta h3 i { flex: 0 0 auto; font-style: normal; font-size: .72em; transition: transform 180ms ease; }
.index-card:hover h3 i,
.index-card:focus-within h3 i { transform: translate(3px,-3px); }
.index-type { margin-top: 6px; color: var(--text-secondary); font-size: 12px; line-height: 1.55; }
.index-description { margin-top: 10px; color: var(--text-tertiary); font-size: 12px; line-height: 1.62; }

/* Make supporting sections feel editorial, not card-based */
.about-section { column-gap: 20px; }
.about-copy > p { font-size: clamp(19px, 2vw, 27px); line-height: 1.58; letter-spacing: -.018em; }
.about-pillars { margin-top: 52px; }
.capability-list li { padding-block: 30px; }
.capability-list h3 { letter-spacing: -.022em; }

/* Case studies: the opening image is the project, not a sidebar thumbnail */
.case-overview { display: block; margin-top: 34px; }
.co-hero { width: 100%; max-width: none; aspect-ratio: 16 / 9; justify-self: auto; }
.co-hero.media-square,
.co-hero.media-portrait { width: 100%; max-width: none; aspect-ratio: 16 / 9; }
.co-hero.media-page { aspect-ratio: 16 / 9; }
.co-hero.media-square img { width: auto; max-width: 84%; height: 88%; }
.co-hero.media-portrait img { width: auto; max-width: 72%; height: 92%; }
.co-hero.media-landscape img { width: 100%; height: 100%; }
.co-hero.media-page img { object-fit: cover; object-position: center top; }
.case-overview-side { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 20px; align-items: start; margin-top: 50px; }
.case-meta { grid-column: 1 / 5; }
.case-overview-side > .cs-text { grid-column: 6 / 13; max-width: 760px; font-size: 15px; line-height: 1.72; }
.cm-item { grid-template-columns: 118px minmax(0,1fr); }
.media-grid, .pg-grid, .pages, .collection { gap: clamp(54px, 6vw, 88px) 20px; margin-top: 52px; }
.media-grid.cols-3, .pg-grid.cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.shot-fig, .pg-thumb { border-color: var(--media-line); }
.shot-cap, .pg-cap { padding-top: 14px; }
.next-nav { grid-template-columns: 1fr auto 1fr; gap: 20px; padding-block: 54px; border-top: 1px solid var(--border); }
.nn-link, .nn-all { min-height: 0; padding: 22px 0; border: 0; border-top: 1px solid var(--foreground); border-radius: 0; background: transparent; }
.nn-all { border-top-color: var(--border); }
.nn-name { font-size: 15px; }

@media (max-width: 1080px) {
  .hero-identity { grid-column: 1 / 5; }
  .hero-copy { grid-column: 5 / 13; }
  .workflow-status { grid-column: 5 / 10; }
  .selected-card.layout-portrait { grid-column: 1 / 6; }
  .selected-card.layout-landscape-offset { grid-column: 6 / 13; }
  .project-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .home-hero { row-gap: 46px; }
  .hero-identity, .hero-copy { grid-column: 1 / 13; }
  .hero-copy { grid-row: 2; }
  .workflow-status { grid-column: 7 / 13; grid-row: 3; }
  .section-heading > .eyebrow { grid-column: 1 / 4; }
  .section-heading h2 { grid-column: 4 / 9; }
  .section-heading > .text-link, .section-heading > .section-copy { grid-column: 9 / 13; }
  .selected-card.layout-lead > a { display: block; }
  .selected-card.layout-lead .selected-media,
  .selected-card.layout-lead .selected-meta { grid-column: auto; }
  .selected-card.layout-lead .selected-meta { padding-top: 18px; }
  .case-overview-side { grid-template-columns: 1fr; gap: 36px; }
  .case-meta, .case-overview-side > .cs-text { grid-column: auto; }
}
@media (max-width: 760px) {
  :root { --page-pad: 18px; --section-gap: 82px; }
  .home-hero { display: block; min-height: 0; padding-top: 70px; padding-bottom: 88px; }
  .hero-copy { margin-top: 42px; }
  .home-hero h1 { font-size: clamp(54px, 17vw, 72px); }
  .hero-role { font-size: clamp(30px, 9vw, 42px); line-height: 1.16; }
  .hero-intro { font-size: 15px; line-height: 1.72; }
  .workflow-status { width: 100%; margin-top: 50px; }
  .section-heading { display: block; margin-bottom: 48px; }
  .section-heading h2 { margin-top: 18px; }
  .section-heading > .text-link, .section-heading > .section-copy { margin-top: 20px; }
  .selected-grid { display: block; }
  .selected-card { width: 100%; margin: 0; }
  .selected-card + .selected-card { margin-top: 74px; }
  .selected-card.layout-landscape-offset, .selected-card.layout-right-narrow { margin-top: 74px; }
  .layout-lead .selected-media { aspect-ratio: 4 / 3; }
  .layout-lead .selected-media.media-square img { width: auto; max-width: 92%; height: 92%; }
  .layout-landscape-offset .selected-media,
  .layout-left .selected-media,
  .layout-right .selected-media,
  .layout-left-wide .selected-media,
  .layout-right-narrow .selected-media { aspect-ratio: 4 / 3; }
  .selected-meta, .selected-card.layout-lead .selected-meta { display: grid; grid-template-columns: 54px minmax(0,1fr); column-gap: 14px; padding-top: 15px; }
  .selected-card.layout-lead .selected-meta > p:first-child, .selected-meta > p:first-child { grid-column: 1; grid-row: 1 / span 3; display: grid; gap: 4px; }
  .selected-card.layout-lead .selected-meta h3, .selected-meta h3 { grid-column: 2; margin-top: 0; font-size: 23px; line-height: 1.28; }
  .selected-card.layout-lead .selected-type, .selected-card.layout-lead .selected-tags, .selected-type, .selected-tags { grid-column: 2; margin-top: 0; }
  .work-toolbar { display: block; }
  .filter-scroll { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--page-pad) * -1); padding: 2px var(--page-pad) 12px; scrollbar-width: thin; }
  .chip { flex: 0 0 auto; min-height: 40px; }
  .work-count { margin-top: 10px; }
  .project-index { grid-template-columns: 1fr; gap: 68px; }
  .index-media { aspect-ratio: 4 / 3; }
  .index-meta h3 { font-size: 22px; }
  .page-title { font-size: clamp(40px, 11.5vw, 58px); line-height: 1.1; }
  .case-section { padding-block: 78px; }
  .co-hero, .co-hero.media-square, .co-hero.media-portrait, .co-hero.media-page { aspect-ratio: 4 / 3; }
  .co-hero.media-square img { max-width: 94%; height: 94%; }
  .co-hero.media-portrait img { max-width: 88%; height: 95%; }
  .proc-grid { grid-template-columns: 1fr; }
  .proc-card { min-height: 0; }
  .media-grid, .pg-grid, .pages, .collection, .media-grid.cols-3, .pg-grid.cols-3, .media-grid.duo, .pg-grid.duo { grid-template-columns: 1fr; gap: 58px; }
  .shot-cap, .pg-cap { grid-template-columns: 1fr; }
  .shot-cap span, .pg-cap span { text-align: left; }
  .shot-zoom, .pg-zoom { opacity: 1; }
  .next-nav { grid-template-columns: 1fr 1fr; }
  .nn-center { grid-column: 1 / -1; grid-row: 2; }
  .nn-all { min-height: 52px; }
}
@media (max-width: 460px) {
  .selected-meta, .selected-card.layout-lead .selected-meta { grid-template-columns: 44px minmax(0,1fr); gap: 6px 12px; }
  .selected-card.layout-lead .selected-meta h3, .selected-meta h3, .index-meta h3 { font-size: 20px; }
  .index-description { font-size: 12px; }
  .next-nav { grid-template-columns: 1fr; }
  .nn-center { grid-column: auto; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .selected-media img, .index-card img, .shot img, .pg-item img { transform: none; transition: none; }
}

/* migrated from mouthwash-system.css */
/*
  Studio system v6
  Image-first editorial portfolio system inspired by MOUTHWASH's principles:
  one neutral canvas, expressive scale, project-led pacing, direct navigation,
  and typography that supports rather than frames the work.
*/
:root {
  --background: #ffffff;
  --surface: #ffffff;
  --foreground: #111111;
  --text-secondary: #3d3d3d;
  --text-muted: #5f5f5f;
  --text-tertiary: #6b6b6b;
  --border: rgba(17, 17, 17, 0.22);
  --border-soft: rgba(17, 17, 17, 0.12);
  --disabled: #a3a3a3;
  --ai-accent: #111111;
  --media-surface: #f4f4f2;
  --media-line: rgba(17, 17, 17, 0.12);
  --font-sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-cjk: "PingFang SC", "Noto Sans SC", "Source Han Sans SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --max-width: 1500px;
  --page-pad: clamp(18px, 3vw, 48px);
  --section-gap: clamp(112px, 12vw, 190px);
  --header-height: 60px;
  --radius: 14px;
  --hairline: 0 0 0 1px rgba(17, 17, 17, 0.14);
}

html { scroll-padding-top: calc(var(--header-height) + 24px); }
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-cjk);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.006em;
}
::selection { background: var(--foreground); color: var(--background); }
:focus-visible { outline: 1px solid var(--foreground); outline-offset: 5px; }
.shell, .page-shell, .site-nav, .footer-grid {
  width: min(calc(100% - (var(--page-pad) * 2)), var(--max-width));
}

/* Navigation — direct, flat and typographic */
.site-header {
  height: var(--header-height);
  border-bottom: 1px solid transparent;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-header[data-scrolled="true"] {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.985);
}
.site-nav { gap: 32px; }
.brand { gap: 9px; }
.brand-mark {
  display: inline-flex;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}
.brand-mark::after {
  margin-left: 9px;
  color: var(--text-tertiary);
  font-weight: 400;
  content: "/";
}
.brand-name, .brand-zh {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.nav-links { gap: clamp(20px, 2.2vw, 38px); }
.nav-links > a, .nav-dd-trigger {
  min-height: 42px;
  color: var(--foreground);
  font-size: 13px;
  letter-spacing: -0.012em;
}
.nav-links > a::after {
  position: absolute;
  right: 0;
  bottom: 5px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 190ms ease;
  content: "";
}
.nav-links > a:hover::after,
.nav-links > a:focus-visible::after,
.nav-links > a[aria-current="true"]::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav-resume { padding-left: 0; border-left: 0; }

/* Small labels no longer carry a product-system mono aesthetic */
.eyebrow, .kicker, .cs-eyebrow, .case-meta .cm-k, .proc-k, .tf-k,
.kj-k, .cue-label, .scope-label, .sg-label, .asset-code, .asset-status,
.exp-period, .project-tag, .col-tag {
  color: var(--text-tertiary);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.text-link {
  position: relative;
  gap: 8px;
  min-height: 42px;
  color: var(--foreground);
  font-size: 13px;
}
.text-link::after {
  position: absolute;
  right: 0;
  bottom: 5px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 190ms ease;
  content: "";
}
.text-link:hover { text-decoration: none; }
.text-link:hover::after, .text-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}
.primary-button, .secondary-button, .pill, .pcta-link {
  border-radius: 0;
  box-shadow: none;
}

/* Hero — statement first, interface detail second */
.home-hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: 0 20px;
  min-height: 0;
  padding-top: clamp(74px, 8vw, 122px);
  padding-bottom: clamp(96px, 10vw, 152px);
}
.hero-identity { grid-column: 1 / 4; }
.hero-copy { grid-column: 4 / 13; }
.home-hero h1 {
  margin-top: clamp(42px, 7vw, 92px);
  font-size: clamp(48px, 5.4vw, 78px);
  font-weight: 560;
  line-height: 0.98;
  letter-spacing: -0.055em;
}
.hero-role {
  max-width: 980px;
  margin-top: 0;
  font-size: clamp(48px, 6.1vw, 92px);
  font-weight: 590;
  line-height: 0.97;
  letter-spacing: -0.058em;
  text-wrap: balance;
}
.hero-tagline-home {
  margin-top: 28px;
  color: var(--foreground);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
}
.hero-intro {
  max-width: 850px;
  margin-top: 38px;
  color: var(--text-secondary);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.8;
}
.hero-skills {
  gap: 7px 0;
  margin-top: 36px;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.045em;
}
.hero-skills li { display: inline-flex; align-items: center; }
.hero-skills li + li::before {
  margin-inline: 14px;
  color: var(--text-tertiary);
  content: "/";
}
.hero-meta {
  gap: 4px 24px;
  margin-top: 30px;
  color: var(--foreground);
  font-size: 13px;
}
.status i {
  width: 6px;
  height: 6px;
  background: var(--foreground);
  box-shadow: none;
}
.workflow-status {
  grid-column: 4 / 13;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: start;
  gap: 0 24px;
  margin-top: clamp(72px, 8vw, 116px);
  padding: 0;
  border-top: 1px solid var(--foreground);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-sans);
}
.workflow-head {
  display: block;
  padding: 14px 0 0;
  border: 0;
  color: var(--foreground);
  font-size: 10px;
  line-height: 1.5;
}
.workflow-head span { display: block; }
.workflow-head span:last-child { margin-top: 4px; color: var(--foreground); }
.workflow-status ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  list-style: none;
}
.workflow-status li {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 18px 8px;
  min-height: 0;
  padding: 14px 12px 18px 0;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-tertiary);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.workflow-status li + li { padding-left: 12px; border-left: 1px solid var(--border-soft); }
.workflow-status li span { grid-column: 1; color: inherit; }
.workflow-status li b { grid-column: 1; grid-row: 2; font-weight: 500; }
.workflow-status li i {
  grid-column: 2;
  grid-row: 1;
  width: 6px;
  height: 6px;
  border-color: var(--text-tertiary);
}
.workflow-status li[data-state="done"] i { border-color: var(--foreground); background: var(--foreground); }
.workflow-status li[data-state="active"] i { border-color: var(--foreground); box-shadow: 0 0 0 2px var(--background), 0 0 0 3px var(--foreground); }
.workflow-status > p {
  grid-column: 2;
  margin-top: 10px;
  padding: 0;
  border: 0;
  color: var(--text-tertiary);
  font-size: 10px;
}

/* Sections — black rules and large editorial hierarchy */
.section {
  padding-block: var(--section-gap);
  border-top: 1px solid var(--foreground);
}
.section-heading {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
  margin-bottom: clamp(68px, 8vw, 120px);
}
.section-heading > .eyebrow { grid-column: 1 / 4; padding-top: 10px; }
.section-heading h2 {
  grid-column: 4 / 10;
  max-width: none;
  font-size: clamp(50px, 6vw, 88px);
  font-weight: 590;
  line-height: 0.95;
  letter-spacing: -0.06em;
}
.section-heading > .text-link,
.section-heading > .section-copy {
  grid-column: 10 / 13;
  max-width: none;
}
.section-copy {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.7;
}

/* Selected work — native image ratios and art-directed cadence */
.selected-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 20px;
  align-items: start;
}
.selected-card { min-width: 0; }
.selected-card > a { display: block; }
.selected-card.layout-lead { grid-column: 1 / 13; }
.selected-card.layout-lead > a {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: 20px;
}
.selected-card.layout-lead .selected-media { grid-column: 1 / 9; max-width: none; }
.selected-card.layout-lead .selected-meta { grid-column: 9 / 13; max-width: none; padding: 0 0 2px; }
.selected-card.layout-portrait { grid-column: 1 / 6; margin-top: clamp(120px, 14vw, 220px); }
.selected-card.layout-landscape-offset { grid-column: 7 / 13; margin-top: clamp(220px, 26vw, 400px); }
.selected-card.layout-panorama { grid-column: 1 / 13; margin-top: clamp(150px, 18vw, 270px); }
.selected-card.layout-left { grid-column: 1 / 7; margin-top: clamp(150px, 18vw, 260px); }
.selected-card.layout-right { grid-column: 7 / 13; margin-top: clamp(250px, 28vw, 430px); }
.selected-card.layout-left-wide { grid-column: 1 / 8; margin-top: clamp(150px, 18vw, 270px); }
.selected-card.layout-right-narrow { grid-column: 9 / 13; margin-top: clamp(300px, 32vw, 480px); }
.selected-media {
  position: relative;
  display: block;
  overflow: hidden;
  border: 0;
  background: transparent;
}
.selected-media::after { display: none; }
.selected-media img {
  position: static;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: initial;
  transform-origin: center;
  transition: transform 350ms cubic-bezier(.2,.7,.2,1), opacity 220ms ease;
}
.selected-card:hover .selected-media img,
.selected-card:focus-within .selected-media img { transform: scale(1.006); }
.selected-meta {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 0 18px;
  padding-top: 18px;
  border-top: 1px solid var(--foreground);
}
.selected-meta > p:first-child {
  grid-column: 1;
  grid-row: 1 / span 4;
  display: block;
  color: var(--text-tertiary);
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.selected-meta > p:first-child span { display: block; margin-bottom: 5px; color: var(--foreground); }
.selected-meta h3,
.selected-card.layout-lead .selected-meta h3 {
  grid-column: 2;
  display: flex;
  align-items: flex-start;
  margin: 0;
  font-size: clamp(24px, 2.55vw, 39px);
  font-weight: 560;
  line-height: 1.08;
  letter-spacing: -0.042em;
}
.selected-card.layout-lead .selected-meta h3 { font-size: clamp(36px, 4.2vw, 62px); }
.selected-meta h3 i { margin-top: 0.12em; font-size: .58em; }
.selected-type {
  grid-column: 2;
  margin-top: 12px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
}
.selected-tags {
  grid-column: 2;
  display: flex;
  gap: 0;
  margin-top: 14px;
  color: var(--text-tertiary);
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: none;
  opacity: 1;
}
.selected-tags span + span::before { margin-inline: 9px; content: "/"; }

/* Archive — visual catalogue, never a miniature dashboard */
.all-work-section { padding-bottom: var(--section-gap); }
.work-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  margin-bottom: clamp(56px, 7vw, 94px);
  padding-top: 18px;
  border-top: 1px solid var(--foreground);
}
.filter-scroll { display: flex; flex-wrap: wrap; gap: 0 24px; }
.chip {
  position: relative;
  min-height: 42px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: -0.005em;
}
.chip::after {
  position: absolute;
  right: 0;
  bottom: 6px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
  content: "";
}
.chip:hover { color: var(--foreground); }
.chip[aria-pressed="true"] { border: 0; background: transparent; color: var(--foreground); }
.chip[aria-pressed="true"]::after { transform: scaleX(1); }
.chip span, .chip[aria-pressed="true"] span { margin-left: 5px; color: inherit; font-size: 9px; vertical-align: super; }
.work-count {
  color: var(--text-tertiary);
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .05em;
}
.project-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(110px, 12vw, 190px) 20px;
  align-items: start;
  border-top: 0;
}
.index-card { min-width: 0; }
.index-card:nth-child(4n + 2), .index-card:nth-child(4n + 4) { margin-top: clamp(50px, 7vw, 110px); }
.index-card > a { display: block; }
.index-media {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  overflow: hidden;
  border: 0;
  background: var(--media-surface);
}
.index-media.media-landscape { aspect-ratio: 16 / 10; }
.index-media.media-square { aspect-ratio: 1 / 1; }
.index-media.media-portrait { aspect-ratio: 3 / 4; }
.index-media.media-page { aspect-ratio: 4 / 3; }
.index-media img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 320ms cubic-bezier(.2,.7,.2,1);
}
.index-media.media-square img,
.index-media.media-portrait img { width: 100%; height: 100%; max-width: none; padding: 0; transform: none; }
.index-media.media-page img { object-fit: cover; object-position: center top; }
.index-card:hover .index-media img,
.index-card:focus-within .index-media img { transform: scale(1.006); }
.index-meta {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 0 16px;
  padding-top: 17px;
  border-top: 1px solid var(--foreground);
}
.index-number {
  grid-column: 1;
  grid-row: 1 / span 4;
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 10px;
}
.index-meta h3 {
  grid-column: 2;
  margin: 0;
  font-size: clamp(22px, 2.35vw, 35px);
  font-weight: 560;
  line-height: 1.08;
  letter-spacing: -0.04em;
}
.index-type {
  grid-column: 2;
  margin-top: 10px;
  color: var(--text-secondary);
  font-size: 13px;
}
.index-description {
  grid-column: 2;
  max-width: 620px;
  margin-top: 14px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.7;
}

/* About, capabilities and contact retain the same words but use a studio rhythm */
.about-section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}
.section-aside { grid-column: 1 / 4; }
.section-aside h2 {
  margin-top: 22px;
  font-size: clamp(48px, 5vw, 76px);
  font-weight: 590;
  line-height: .96;
  letter-spacing: -.055em;
}
.about-copy { grid-column: 4 / 13; max-width: none; }
.about-copy > p {
  max-width: 1050px;
  color: var(--foreground);
  font-size: clamp(25px, 2.8vw, 42px);
  font-weight: 520;
  line-height: 1.35;
  letter-spacing: -.035em;
}
.about-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(72px, 8vw, 116px);
}
.about-pillars article { padding-top: 14px; border-top: 1px solid var(--foreground); }
.about-pillars h3 { font-size: 16px; font-weight: 560; }
.about-pillars p { margin-top: 20px; color: var(--text-secondary); font-size: 13px; line-height: 1.72; }
.profile-meta {
  gap: 20px;
  margin-top: 70px;
  padding-top: 16px;
  border-top-color: var(--foreground);
}
.profile-meta dt { font-family: var(--font-sans); }
.profile-meta dd { color: var(--foreground); }
.capability-list { border-top: 1px solid var(--foreground); }
.capability-list li {
  grid-template-columns: 54px minmax(280px, .85fr) minmax(320px, 1.15fr);
  gap: 20px;
  padding-block: clamp(30px, 4vw, 52px);
  border-bottom: 1px solid var(--border);
  transition: none;
}
.capability-list li:hover { padding-left: 0; }
.capability-list li > span { font-family: var(--font-sans); }
.capability-list h3 {
  font-size: clamp(28px, 3.4vw, 50px);
  font-weight: 570;
  line-height: 1.02;
  letter-spacing: -.05em;
}
.capability-list h3 small {
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .055em;
}
.capability-list p { max-width: 670px; color: var(--text-secondary); font-size: 14px; line-height: 1.75; }
.contact-section {
  padding-block: clamp(112px, 13vw, 200px);
  border-top: 1px solid var(--foreground);
  background: var(--foreground);
  color: var(--background);
}
.contact-section .eyebrow, .contact-section .contact-inner > p { color: rgba(255,255,255,.72); }
.contact-inner h2 {
  margin-top: 34px;
  font-size: clamp(68px, 10vw, 148px);
  font-weight: 590;
  letter-spacing: -.065em;
}
.contact-inner > p:not(.eyebrow) { max-width: 860px; font-size: 15px; line-height: 1.7; }
.contact-details { margin-top: 70px; border-top-color: var(--background); }
.contact-details > div { border-bottom-color: rgba(255,255,255,.28); }
.contact-details span { color: rgba(255,255,255,.58); font-family: var(--font-sans); }
.contact-details a, .contact-details b { color: var(--background); }
.contact-section .text-link { color: var(--background); }
.site-footer { border-top: 0; background: var(--foreground); }
.footer-grid, .foot-grid { color: rgba(255,255,255,.62); }
.footer-grid p:first-child { color: var(--background); }
.footer-grid p:first-child span { color: rgba(255,255,255,.55); font-family: var(--font-sans); }

/* Project detail — image opens the story and is never squeezed into a card */
.page-shell { max-width: var(--max-width); }
.page-hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  padding: clamp(88px, 10vw, 150px) 0 clamp(94px, 11vw, 170px);
}
.crumb { grid-column: 1 / 4; align-self: start; padding-top: 10px; font-family: var(--font-sans); }
.page-title {
  grid-column: 4 / 13;
  max-width: none;
  margin: 0;
  font-size: clamp(52px, 7.2vw, 108px);
  font-weight: 590;
  line-height: .94;
  letter-spacing: -.064em;
}
.pt-en {
  display: block;
  margin-top: 22px;
  color: var(--text-tertiary);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.page-lede {
  grid-column: 4 / 10;
  max-width: none;
  margin-top: 40px;
  color: var(--text-secondary);
  font-size: clamp(18px, 1.7vw, 25px);
  line-height: 1.6;
  letter-spacing: -.018em;
}
.case-section {
  padding-block: clamp(92px, 10vw, 154px);
  border-top: 1px solid var(--foreground);
  border-bottom: 0;
}
.cs-eyebrow { margin-bottom: clamp(38px, 5vw, 68px); color: var(--foreground); }
.cs-title {
  max-width: 1060px;
  font-size: clamp(43px, 5.8vw, 82px);
  font-weight: 580;
  line-height: 1.01;
  letter-spacing: -.055em;
}
.cs-text { max-width: 860px; margin-top: 32px; color: var(--text-secondary); font-size: 15px; line-height: 1.82; }
.case-overview { display: block; margin-top: 0; }
.co-hero {
  display: block;
  width: 100%;
  max-width: none;
  aspect-ratio: auto;
  overflow: hidden;
  border: 0;
  background: transparent;
}
.co-hero img, .co-hero video {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: initial;
}
.co-hero.media-square { width: min(100%, 1040px); max-width: 1040px; margin-inline: auto; aspect-ratio: auto; }
.co-hero.media-portrait { width: min(100%, 760px); max-width: 760px; margin-inline: auto; aspect-ratio: auto; }
.co-hero.media-landscape { aspect-ratio: auto; }
.co-hero.media-page {
  aspect-ratio: 16 / 10;
  background: var(--media-surface);
}
.co-hero.media-page img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.case-overview-side {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(62px, 8vw, 112px);
  padding-top: 18px;
  border-top: 1px solid var(--foreground);
}
.case-meta { grid-column: 1 / 6; }
.case-overview-side > .cs-text { grid-column: 7 / 13; max-width: none; margin-top: 0; font-size: 15px; }
.cm-item { grid-template-columns: 130px minmax(0, 1fr); border-bottom-color: var(--border); }
.cm-k { font-family: var(--font-sans); }
.keyjudge, .transfer, .reuse {
  max-width: 920px;
  margin-top: 50px;
  padding: 22px 0 0;
  border-top: 1px solid var(--foreground);
  border-left: 0;
}
.keyjudge .kj-k { color: var(--foreground); }
.flowline {
  display: grid;
  grid-template-columns: repeat(9, auto);
  justify-content: start;
  gap: 0;
  margin-top: 48px;
  border-top: 1px solid var(--foreground);
}
.flowstep {
  padding: 14px 16px 14px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 10px;
}
.flowstep.key { border: 0; color: var(--foreground); text-decoration: underline; text-underline-offset: 4px; }
.flow-sep { padding: 14px 16px 0 0; color: var(--text-tertiary); }
.proc-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 70px;
  border: 0;
  background: transparent;
}
.proc-card {
  min-height: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--foreground);
  background: transparent;
}
.proc-v { margin-top: 32px; font-size: 14px; line-height: 1.75; }
.media-grid, .pg-grid, .pages, .collection {
  gap: clamp(88px, 9vw, 142px) 20px;
  margin-top: clamp(70px, 8vw, 120px);
}
.media-grid.cols-3, .pg-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shot, .pg-item, .page-full, .page-sec, .feature, .scale-item { color: inherit; }
.shot-fig, .pg-thumb {
  display: block;
  overflow: hidden;
  border: 0;
  background: var(--media-surface);
}
.shot-fig.media-landscape, .pg-thumb.media-landscape { aspect-ratio: auto; }
.shot-fig.media-square, .pg-thumb.media-square { aspect-ratio: 1 / 1; }
.shot-fig.media-portrait, .pg-thumb.media-portrait { aspect-ratio: auto; }
.shot-fig.media-page, .pg-thumb.media-page { aspect-ratio: 4 / 5; }
.shot-fig img, .pg-thumb img {
  position: static;
  width: 100%;
  height: auto;
  object-fit: initial;
  transition: transform 320ms cubic-bezier(.2,.7,.2,1);
}
.shot-fig.media-square img { width: 100%; height: 100%; object-fit: contain; }
.shot-fig.media-page img, .pg-thumb.media-page img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.shot:hover img, .pg-item:hover img, .shot:focus-visible img, .pg-item:focus-visible img { transform: scale(1.006); }
.shot-cap, .pg-cap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--foreground);
}
.shot-cap b, .pg-cap b { font-size: 13px; font-weight: 560; }
.shot-cap span, .pg-cap span { margin-top: 0; font-size: 11px; text-align: right; }
.shot-zoom, .pg-zoom {
  right: 12px;
  bottom: 12px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--foreground);
  border-radius: 50%;
  background: var(--background);
  color: var(--foreground);
}
.deliver-list { gap: 0; margin-top: 42px; border-top: 1px solid var(--foreground); }
.deliver-list li {
  flex: 1 1 33.333%;
  padding: 14px 18px 14px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 11px;
}
.next-nav {
  gap: 20px;
  padding-block: clamp(72px, 8vw, 118px);
  border-top: 1px solid var(--foreground);
}
.nn-link, .nn-all {
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid var(--foreground);
  border-radius: 0;
  background: transparent;
}
.nn-dir { color: var(--foreground); font-family: var(--font-sans); }
.nn-name { margin-top: 30px; font-size: clamp(18px, 1.7vw, 24px); font-weight: 550; line-height: 1.2; }
.nn-all { border-top-color: var(--border); }

/* Lightbox */
.lightbox { background: rgba(17,17,17,.96); }
.lb-stage { border-radius: 0; background: var(--background); }
.lb-btn { border-radius: 50%; }

/* Resume inherits the same neutral system without changing its factual copy */
body.resume-page .layout-grid,
body.resume-page .resume-section,
body.resume-page .portfolio-cta { border-color: var(--foreground); }
body.resume-page .hero-name,
body.resume-page .section-title,
body.resume-page .project-title-zh { font-weight: 570; }
body.resume-page .summary-pillar,
body.resume-page .competency-card,
body.resume-page .asset-card { border-radius: 0; background: transparent; box-shadow: none; }

@media (max-width: 1080px) {
  .hero-identity { grid-column: 1 / 4; }
  .hero-copy { grid-column: 4 / 13; }
  .workflow-status { grid-column: 4 / 13; }
  .selected-card.layout-portrait { grid-column: 1 / 6; }
  .selected-card.layout-landscape-offset { grid-column: 6 / 13; }
  .selected-card.layout-right-narrow { grid-column: 8 / 13; }
}

@media (max-width: 900px) {
  :root { --section-gap: clamp(92px, 14vw, 132px); }
  .home-hero { row-gap: 0; }
  .hero-identity { grid-column: 1 / 13; }
  .hero-copy { grid-column: 1 / 13; margin-top: 60px; }
  .home-hero h1 { margin-top: 26px; }
  .workflow-status { grid-column: 1 / 13; margin-top: 76px; }
  .section-heading > .eyebrow { grid-column: 1 / 4; }
  .section-heading h2 { grid-column: 4 / 10; }
  .section-heading > .text-link, .section-heading > .section-copy { grid-column: 10 / 13; }
  .selected-card.layout-lead .selected-media { grid-column: 1 / 9; }
  .selected-card.layout-lead .selected-meta { grid-column: 9 / 13; }
  .project-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap-row: 110px; }
  .about-copy > p { font-size: clamp(24px, 4vw, 36px); }
  .page-title { grid-column: 3 / 13; }
  .page-lede { grid-column: 3 / 11; }
  .crumb { grid-column: 1 / 3; }
}

@media (max-width: 760px) {
  :root { --page-pad: 18px; --header-height: 56px; }
  .site-header { height: var(--header-height); }
  .nav-links {
    background: var(--background);
    border-bottom-color: var(--foreground);
  }
  .home-hero { display: block; padding-top: 64px; padding-bottom: 96px; }
  .hero-copy { margin-top: 52px; }
  .home-hero h1 { font-size: clamp(48px, 15vw, 66px); }
  .hero-role { font-size: clamp(42px, 12.4vw, 58px); line-height: 1; }
  .hero-tagline-home { margin-top: 24px; font-size: 15px; }
  .hero-intro { margin-top: 30px; font-size: 15px; line-height: 1.78; }
  .hero-skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
  .hero-skills li + li::before { display: none; }
  .workflow-status { display: block; margin-top: 66px; }
  .workflow-head { display: flex; justify-content: space-between; padding-bottom: 12px; }
  .workflow-head span:last-child { margin-top: 0; }
  .workflow-status ol { grid-template-columns: 1fr; border-top: 1px solid var(--border-soft); }
  .workflow-status li { grid-template-columns: 32px 1fr auto; grid-template-rows: 1fr; gap: 10px; padding: 13px 0; }
  .workflow-status li + li { padding-left: 0; border-left: 0; }
  .workflow-status li span { grid-column: 1; grid-row: 1; }
  .workflow-status li b { grid-column: 2; grid-row: 1; }
  .workflow-status li i { grid-column: 3; grid-row: 1; }
  .workflow-status > p { margin-top: 12px; }
  .section-heading { display: block; margin-bottom: 58px; }
  .section-heading h2 { margin-top: 22px; font-size: clamp(46px, 14vw, 66px); }
  .section-heading > .text-link, .section-heading > .section-copy { margin-top: 26px; }
  .selected-grid { display: block; }
  .selected-card,
  .selected-card.layout-lead,
  .selected-card.layout-portrait,
  .selected-card.layout-landscape-offset,
  .selected-card.layout-panorama,
  .selected-card.layout-left,
  .selected-card.layout-right,
  .selected-card.layout-left-wide,
  .selected-card.layout-right-narrow {
    width: 100%;
    margin-top: 0;
  }
  .selected-card + .selected-card { margin-top: 94px; }
  .selected-card.layout-lead > a { display: block; }
  .selected-card.layout-lead .selected-meta { padding-top: 17px; }
  .selected-meta, .selected-card.layout-lead .selected-meta {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0 12px;
    padding-top: 14px;
  }
  .selected-meta h3, .selected-card.layout-lead .selected-meta h3 { font-size: clamp(24px, 7.6vw, 31px); }
  .selected-type { font-size: 12px; }
  .selected-tags { flex-wrap: wrap; }
  .work-toolbar { display: block; margin-bottom: 62px; }
  .filter-scroll {
    gap: 0 22px;
    margin-inline: calc(var(--page-pad) * -1);
    padding-inline: var(--page-pad);
  }
  .chip { flex: 0 0 auto; }
  .work-count { margin-top: 12px; }
  .project-index { grid-template-columns: 1fr; gap: 96px; }
  .index-card:nth-child(n) { margin-top: 0; }
  .index-meta h3 { font-size: clamp(24px, 7vw, 30px); }
  .about-section { display: block; }
  .about-copy { margin-top: 56px; }
  .about-copy > p { font-size: clamp(23px, 7.2vw, 31px); line-height: 1.42; }
  .about-pillars, .profile-meta { grid-template-columns: 1fr; gap: 42px; }
  .capability-list li { grid-template-columns: 36px minmax(0, 1fr); gap: 0 12px; }
  .capability-list h3 { grid-column: 2; font-size: 30px; }
  .capability-list p { grid-column: 2; margin-top: 26px; }
  .contact-inner h2 { font-size: clamp(62px, 18vw, 88px); }
  .contact-details { grid-template-columns: 1fr 1fr; }
  .page-hero { display: block; padding-top: 74px; padding-bottom: 100px; }
  .page-title { margin-top: 50px; font-size: clamp(48px, 14vw, 68px); line-height: 1; }
  .page-lede { margin-top: 34px; font-size: 18px; }
  .case-section { padding-block: 92px; }
  .cs-title { font-size: clamp(40px, 12vw, 58px); }
  .co-hero.media-square, .co-hero.media-portrait { width: 100%; max-width: none; }
  .case-overview-side { display: block; margin-top: 56px; }
  .case-overview-side > .cs-text { margin-top: 46px; }
  .flowline { display: flex; border-top: 1px solid var(--foreground); }
  .proc-grid { grid-template-columns: 1fr; gap: 50px; }
  .media-grid, .pg-grid, .pages, .collection,
  .media-grid.cols-3, .pg-grid.cols-3,
  .media-grid.duo, .pg-grid.duo { grid-template-columns: 1fr; gap: 86px; }
  .shot-cap, .pg-cap { grid-template-columns: 1fr; }
  .shot-cap span, .pg-cap span { text-align: left; }
  .deliver-list li { flex-basis: 50%; }
  .next-nav { grid-template-columns: 1fr; }
  .nn-center { grid-column: auto; grid-row: auto; }
}

@media (max-width: 460px) {
  .brand-name { display: none; }
  .brand-mark::after { display: none; }
  .contact-details { grid-template-columns: 1fr; }
  .deliver-list li { flex-basis: 100%; }
  .index-meta { grid-template-columns: 42px minmax(0, 1fr); gap: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .selected-media img, .index-media img, .shot img, .pg-item img,
  .nav-links > a::after, .text-link::after, .chip::after { transition: none; transform: none; }
}

/* Native-ratio safeguards against legacy artboard rules. */
.selected-media.media-square img,
.selected-media.media-portrait img,
.selected-media.media-landscape img {
  position: static;
  left: auto;
  width: 100%;
  max-width: none;
  height: auto;
  transform: none;
}
.selected-card:hover .selected-media.media-square img,
.selected-card:hover .selected-media.media-portrait img,
.selected-card:hover .selected-media.media-landscape img,
.selected-card:focus-within .selected-media.media-square img,
.selected-card:focus-within .selected-media.media-portrait img,
.selected-card:focus-within .selected-media.media-landscape img {
  transform: scale(1.006);
}

@media (max-width: 760px) {
  .hero-role {
    max-width: 340px;
    font-size: clamp(32px, 9.6vw, 39px);
    line-height: 1.03;
    letter-spacing: -0.048em;
  }
}

/* Remove the previous fixed artboards completely: selected work follows source ratios. */
.selected-card.layout-lead .selected-media,
.selected-card.layout-portrait .selected-media,
.selected-card.layout-landscape-offset .selected-media,
.selected-card.layout-panorama .selected-media,
.selected-card.layout-left .selected-media,
.selected-card.layout-right .selected-media,
.selected-card.layout-left-wide .selected-media,
.selected-card.layout-right-narrow .selected-media {
  aspect-ratio: auto;
}
.selected-card.layout-lead .selected-media.media-square img,
.selected-card.layout-portrait .selected-media.media-portrait img,
.selected-card.layout-landscape-offset .selected-media img,
.selected-card.layout-panorama .selected-media img,
.selected-card.layout-left .selected-media img,
.selected-card.layout-right .selected-media img,
.selected-card.layout-left-wide .selected-media img,
.selected-card.layout-right-narrow .selected-media img {
  position: static;
  left: auto;
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: initial;
  transform: none;
}
.selected-card:hover .selected-media img,
.selected-card:focus-within .selected-media img { transform: scale(1.006); }
.hero-role span { display: inline; }
@media (max-width: 760px) {
  .hero-role { max-width: none; font-size: clamp(29px, 8.6vw, 34px); }
  .hero-role span { display: block; white-space: nowrap; }
}

/* Keep the workflow rail aligned to the editorial grid at every desktop width. */
.workflow-status {
  width: 100%;
  min-width: 0;
  justify-self: stretch;
}
.workflow-status ol,
.workflow-status li,
.workflow-status li b { min-width: 0; }

/* v6.2 — case gallery label and long-page thumbnail repair
   `.page-full` is an overlay label in the current case markup. Earlier legacy
   rules treated the same class as a media container, allowing its SVG to use
   the browser's default 300×150 size and push the real project image down. */
.pg-thumb > .page-length-badge {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  min-width: 0;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 7px 9px 6px;
  border: 0;
  background: var(--foreground);
  color: var(--background);
  font-family: var(--font-cjk);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
  pointer-events: none;
}
.pg-thumb > .page-length-badge svg {
  display: block;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  stroke-width: 1.8;
}

/* Page and interface screenshots are previews, not full documents. Give every
   thumbnail a stable viewing window and preserve the page header/top context. */
.pg-thumb > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Keep gallery controls above the image without affecting its layout. */
.pg-thumb > .pg-zoom {
  position: absolute;
  z-index: 3;
}

@media (max-width: 600px) {
  .pg-thumb > .page-length-badge {
    top: 8px;
    left: 8px;
    max-width: calc(100% - 16px);
    padding: 6px 7px 5px;
    font-size: 9px;
  }
  .pg-thumb > .page-length-badge svg {
    width: 11px;
    height: 11px;
  }
}

/* v6.3 — embedded PDF reader */
.pdf-viewer {
  width: 100%;
  margin-top: clamp(36px, 5vw, 72px);
  border-top: 1px solid var(--foreground);
  border-bottom: 1px solid var(--foreground);
  background: var(--background);
}
.pdf-viewer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 58px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.pdf-viewer-label {
  margin: 0;
  color: var(--foreground);
  font-family: var(--font-cjk);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
}
.pdf-viewer-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 0 0 auto;
}
.pdf-viewer-action {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  cursor: pointer;
  transition: text-decoration-color 180ms ease, opacity 180ms ease;
}
.pdf-viewer-action:hover,
.pdf-viewer-action:focus-visible {
  text-decoration-color: currentColor;
}
.pdf-embed {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  background: #202020;
}
.pdf-embed-frame {
  display: block;
  width: 100%;
  height: clamp(720px, 82vh, 1080px);
  min-height: 720px;
  border: 0;
  background: #202020;
}
.pdf-viewer:fullscreen {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  margin: 0;
  border: 0;
  background: var(--background);
}
.pdf-viewer:fullscreen .pdf-viewer-bar {
  flex: 0 0 auto;
  padding-inline: max(20px, env(safe-area-inset-left));
}
.pdf-viewer:fullscreen .pdf-embed {
  flex: 1 1 auto;
  min-height: 0;
}
.pdf-viewer:fullscreen .pdf-embed-frame {
  height: 100%;
  min-height: 0;
}
@media (max-width: 760px) {
  .pdf-viewer-bar {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    padding-block: 14px;
  }
  .pdf-viewer-actions {
    width: 100%;
    justify-content: space-between;
  }
  .pdf-embed-frame {
    height: 72svh;
    min-height: 520px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pdf-viewer-action { transition: none; }
}


/* v6.4 — locked-layout MOUTHWASH visual system
   Visual tokens and media treatment only. Existing grids, section order,
   dimensions, breakpoints, copy, and image paths remain unchanged. */
:root {
  --background: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f7f7f5;
  --foreground: #111111;
  --text-secondary: #3d3d3d;
  --text-muted: #5f5f5f;
  --text-tertiary: #6b6b6b;
  --border: rgba(17, 17, 17, 0.18);
  --border-soft: rgba(17, 17, 17, 0.09);
  --disabled: #a3a3a3;
  --ai-accent: #111111;
  --media-surface: #f4f4f2;
  --media-line: rgba(17, 17, 17, 0.08);
  --font-sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-cjk: "PingFang SC", "Noto Sans SC", "Source Han Sans SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --radius: 14px;
  --radius-media: 16px;
  --radius-media-large: 20px;
  --radius-control: 999px;
  --hairline: 0 0 0 1px rgba(17, 17, 17, 0.09);
  --ease-studio: cubic-bezier(.2, .72, .2, 1);
  --motion-fast: 180ms;
  --motion-media: 360ms;
}

html { background: #ffffff; }
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-cjk);
  font-weight: 400;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--foreground); color: #ffffff; }
:focus-visible { outline: 1.5px solid var(--foreground); outline-offset: 4px; }

/* Typography — Chinese-first and studio-neutral. */
h1, h2, h3, h4, h5, h6,
.home-hero h1, .hero-role, .section-heading h2, .page-title, .cs-title,
.contact-inner h2, .hero-name, .project-title, .pcta-main {
  font-family: var(--font-cjk);
  font-weight: 500;
  font-synthesis: none;
}
.home-hero h1, .hero-role, .section-heading h2, .page-title, .contact-inner h2 {
  letter-spacing: -0.035em;
}
.hero-intro, .section-copy, .about-copy > p, .capability-list p,
.page-lede, .cs-text, .case-v, .cm-v, .project-description,
.index-description, .summary-lead, .exp-summary, .exp-bullets {
  color: var(--text-secondary);
}
.eyebrow, .kicker, .cs-eyebrow, .crumb, .pt-en, .page-name,
.index-number, .case-meta .cm-k, .proc-k, .tf-k, .kj-k,
.cue-label, .scope-label, .sg-label, .asset-code, .asset-status,
.exp-period, .project-tag, .col-tag, .workflow-head, .work-count {
  font-family: var(--font-sans);
  color: var(--text-tertiary);
  font-weight: 500;
}

/* Navigation — white canvas, direct type, quiet rule. */
.site-header {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: transparent;
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
}
.site-header[data-scrolled="true"] {
  background: rgba(255, 255, 255, 0.985);
  border-bottom-color: var(--border-soft);
}
.brand-mark, .brand-name, .brand-zh, .nav-links > a, .nav-dd-trigger {
  color: var(--foreground);
  font-family: var(--font-sans);
  font-weight: 500;
}
.nav-links > a::after, .text-link::after { height: 1px; }
.nav-links > a, .text-link, .nav-dd-trigger {
  transition: color var(--motion-fast) ease, opacity var(--motion-fast) ease;
}
.nav-links > a:hover, .text-link:hover, .nav-dd-trigger:hover { opacity: .62; }

/* Controls — rounded, compact, black/white only. */
.primary-button, .secondary-button, .pill, .pcta-link,
.pdf-viewer-action, .flowstep {
  border-radius: var(--radius-control);
  font-family: var(--font-cjk);
  font-weight: 500;
  transition: color var(--motion-fast) ease,
              background-color var(--motion-fast) ease,
              border-color var(--motion-fast) ease,
              transform var(--motion-fast) var(--ease-studio),
              opacity var(--motion-fast) ease;
}
.primary-button {
  border-color: var(--foreground);
  background: var(--foreground);
  color: #ffffff;
}
.primary-button:hover, .primary-button:focus-visible { background: #2a2a2a; transform: translateY(-1px); }
.secondary-button, .pill, .pcta-link {
  border-color: var(--border);
  background: #ffffff;
  color: var(--foreground);
}
.secondary-button:hover, .pill:hover, .pcta-link:hover,
.secondary-button:focus-visible, .pill:focus-visible, .pcta-link:focus-visible {
  border-color: var(--foreground);
  transform: translateY(-1px);
}
.primary-button:active, .secondary-button:active, .pill:active, .pcta-link:active { transform: translateY(0); }

/* Filters and compact tags. */
.filter-scroll { gap: 8px; }
.chip {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-cjk);
  font-weight: 500;
  transition: color var(--motion-fast) ease,
              background-color var(--motion-fast) ease,
              border-color var(--motion-fast) ease,
              transform var(--motion-fast) var(--ease-studio);
}
.chip::after { display: none; }
.chip:hover, .chip:focus-visible { border-color: var(--border-soft); background: var(--surface-soft); color: var(--foreground); }
.chip[aria-pressed="true"] { border-color: var(--foreground); background: var(--foreground); color: #ffffff; }
.chip[aria-pressed="true"] span { color: rgba(255, 255, 255, .72); }
.chip:active { transform: scale(.98); }
.selected-tags { gap: 6px; }
.selected-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: var(--radius-control);
  background: var(--surface-soft);
  color: var(--text-muted);
  font-family: var(--font-cjk);
  font-size: 10px;
  letter-spacing: 0;
}
.selected-tags span + span::before { display: none; }
.flowstep {
  border-color: var(--border-soft);
  background: var(--surface-soft);
  color: var(--text-secondary);
  text-decoration: none;
}
.flowstep.key { border: 1px solid var(--foreground); background: var(--foreground); color: #ffffff; text-decoration: none; }
.page-length-badge { border-radius: var(--radius-control); }

/* Media — rounded, image-first, ratio-aware. */
.selected-media, .index-media, .co-hero, .shot-fig, .pg-thumb,
.hero-portrait .hp-frame, .video-cover, .pdf-embed, .lb-stage {
  overflow: hidden;
  border: 1px solid var(--media-line);
  background: var(--media-surface);
  box-shadow: none;
  isolation: isolate;
}
.selected-media, .index-media, .shot-fig, .pg-thumb,
.hero-portrait .hp-frame, .video-cover { border-radius: var(--radius-media); }
.co-hero, .pdf-embed, .lb-stage { border-radius: var(--radius-media-large); }
.selected-media img, .index-media img, .co-hero img, .co-hero video,
.shot-fig img, .pg-thumb img, .hero-portrait img {
  display: block;
  backface-visibility: hidden;
  transition: transform var(--motion-media) var(--ease-studio),
              opacity var(--motion-fast) ease,
              filter var(--motion-media) ease;
}
.selected-card:hover .selected-media img,
.selected-card:focus-within .selected-media img,
.index-card:hover .index-media img,
.index-card:focus-within .index-media img,
.shot:hover .shot-fig img, .shot:focus-visible .shot-fig img,
.pg-item:hover .pg-thumb img, .pg-item:focus-visible .pg-thumb img {
  transform: scale(1.012);
  filter: saturate(1.015) contrast(1.005);
}
.selected-card:active .selected-media img,
.index-card:active .index-media img,
.shot:active .shot-fig img, .pg-item:active .pg-thumb img { transform: scale(1.004); }

/* Selected work keeps source composition. */
.selected-media img,
.selected-media.media-square img,
.selected-media.media-portrait img,
.selected-media.media-landscape img {
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
}

/* Index uses the existing artboards with media-aware fitting. */
.index-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  padding: 0;
  object-fit: cover;
  object-position: center;
}
.index-media.media-square img,
.index-media.media-portrait img {
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  transform: none;
}
.index-media.media-page img { object-fit: cover; object-position: center top; }
.index-card:hover .index-media.media-portrait img,
.index-card:focus-within .index-media.media-portrait img { transform: scale(1.012); }

/* Case hero retains its existing width rules and shows the original composition. */
.co-hero img, .co-hero video { width: 100%; height: auto; object-fit: contain; }
.co-hero.media-page img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* Gallery: natural ratios for normal media; bounded viewport only for long pages. */
.shot-fig.media-landscape, .pg-thumb.media-landscape,
.shot-fig.media-portrait, .pg-thumb.media-portrait { aspect-ratio: auto; }
.shot-fig img, .pg-thumb img { width: 100%; height: auto; object-fit: contain; object-position: center; }
.shot-fig.media-square, .pg-thumb.media-square { aspect-ratio: 1 / 1; }
.shot-fig.media-square img, .pg-thumb.media-square img { width: 100%; height: 100%; object-fit: contain; }
.shot-fig.media-page, .pg-thumb.media-page { aspect-ratio: 4 / 5; }
.shot-fig.media-page img, .pg-thumb.media-page img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.shot-zoom, .pg-zoom {
  border-color: rgba(255,255,255,.56);
  background: rgba(17,17,17,.72);
  color: #ffffff;
  transition: background-color var(--motion-fast) ease,
              transform var(--motion-fast) var(--ease-studio);
}
.shot:hover .shot-zoom, .pg-item:hover .pg-zoom,
.shot:focus-visible .shot-zoom, .pg-item:focus-visible .pg-zoom {
  background: rgba(17,17,17,.9);
  transform: scale(1.05);
}

/* Captions and arrows respond without moving the layout. */
.selected-meta h3 i, .index-meta h3 i, .nn-link svg, .pcta-link svg {
  transition: transform var(--motion-fast) var(--ease-studio);
}
.selected-card:hover .selected-meta h3 i,
.selected-card:focus-within .selected-meta h3 i,
.index-card:hover .index-meta h3 i,
.index-card:focus-within .index-meta h3 i { transform: translate(3px, -3px); }
.nn-link:hover svg, .pcta-link:hover svg { transform: translateX(4px); }

/* White studio canvas across sections; black contact/footer remains the closing contrast. */
.section, .case-page, .case-section, .portfolio-cta,
.summary-card, .competency-card, .exp-item, .project-card, .asset-card, .edu-card {
  background-color: #ffffff;
}
.contact-section, .site-footer { background: var(--foreground); }
.contact-section { color: #ffffff; }
.contact-section .eyebrow, .contact-section .contact-inner > p,
.footer-grid, .foot-grid { color: rgba(255,255,255,.68); }
.contact-details > div { border-bottom-color: rgba(255,255,255,.22); }
.contact-details span { color: rgba(255,255,255,.58); }
.contact-details a, .contact-details b, .contact-section .text-link,
.footer-grid p:first-child { color: #ffffff; }

/* Resume and PDF media receive the same rounded visual language. */
.hero-portrait .hp-frame { border-color: var(--media-line); background: var(--media-surface); }
.portfolio-cta { border-color: var(--border-soft); border-radius: var(--radius-media); }
.pdf-viewer { border-color: var(--border); background: #ffffff; }
.pdf-viewer-bar { border-bottom-color: var(--border-soft); }
.pdf-viewer-action {
  min-height: 38px;
  padding-inline: 14px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--foreground);
  text-decoration: none;
}
.pdf-viewer-action:hover, .pdf-viewer-action:focus-visible { border-color: var(--foreground); transform: translateY(-1px); }
.pdf-embed, .pdf-embed-frame { background: #1f1f1f; }
.lightbox { background: rgba(17,17,17,.94); }

@media (max-width: 760px) {
  :root { --radius-media: 12px; --radius-media-large: 14px; }
  .site-header, .nav-links { background: #ffffff; }
  .filter-scroll { gap: 6px; }
  .chip { min-height: 36px; padding: 7px 11px; }
  .selected-tags span { min-height: 24px; padding: 3px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .selected-media img, .index-media img, .co-hero img, .co-hero video,
  .shot-fig img, .pg-thumb img, .hero-portrait img,
  .primary-button, .secondary-button, .pill, .pcta-link, .pdf-viewer-action,
  .chip, .selected-meta h3 i, .index-meta h3 i, .nn-link svg, .pcta-link svg,
  .shot-zoom, .pg-zoom {
    transition: none;
    transform: none;
    filter: none;
  }
}

/* migrated from studio-refinement.css */
/*
 * Studio refinement v6.5
 * Visual-only refinement: removes residual product-system decoration,
 * strengthens Chinese editorial typography, and adds quiet studio interaction.
 */
:root {
  --studio-black: #0d0d0d;
  --studio-ink: #272727;
  --studio-muted: #686868;
  --studio-faint: #909090;
  --studio-white: #ffffff;
  --studio-soft: #f5f5f3;
  --studio-line: rgba(13, 13, 13, .12);
  --studio-radius: 14px;
  --studio-radius-large: 18px;
  --studio-ease: cubic-bezier(.22, .61, .36, 1);
  --font-display: "Helvetica Neue", "Arial Nova", Arial, "PingFang SC", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --font-body: "PingFang SC", "Noto Sans SC", "Source Han Sans SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

html, body { background: var(--studio-white); }
body {
  color: var(--studio-black);
  font-family: var(--font-body);
  font-kerning: normal;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.008em;
}
html[data-lang="en"] body { font-family: var(--font-display); letter-spacing: -.012em; }

/* Quiet navigation: no product-style divider, underline, or separated resume action. */
.site-header,
.site-header[data-scrolled="true"] {
  border-bottom: 0;
  background: rgba(255, 255, 255, .95);
  box-shadow: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.site-nav { min-height: 64px; }
.brand-mark::after { color: var(--studio-faint); }
.nav-links { gap: clamp(18px, 2.1vw, 34px); }
.nav-links > a,
.lang-switch {
  min-height: 42px;
  color: var(--studio-black);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 450;
  letter-spacing: -.015em;
}
.nav-links > a::after,
.text-link::after,
#projects .case-link::after { display: none; }
.nav-links > a { opacity: .56; transition: opacity 180ms ease; }
.nav-links > a:hover,
.nav-links > a:focus-visible,
.nav-links > a[aria-current="true"],
.nav-links > a[aria-current="page"] { opacity: 1; }
.nav-resume { border-left: 0; padding-left: 0; }
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}
.lang-switch .lang-option { opacity: .36; transition: opacity 180ms ease; }
.lang-switch .lang-separator { color: var(--studio-faint); opacity: .65; }
html[data-lang="zh"] .lang-switch [data-lang-code="zh"],
html[data-lang="en"] .lang-switch [data-lang-code="en"] { opacity: 1; }

/* Remove decorative arrows and lines that compete with the work. */
.selected-meta h3 i,
.index-meta h3 i,
.index-arrow,
.flow-sep,
.case-link svg,
.pcta-link svg,
.nn-link svg,
.text-link > [aria-hidden="true"] { display: none !important; }
.section,
.case-section,
.contact-section,
.about-pillars article,
.capability-list,
.capability-list li,
.project-index,
.index-meta,
.case-overview-side,
.keyjudge,
.transfer,
.reuse,
.proc-card,
.deliver-list,
.deliver-list li,
.next-nav,
.nn-link,
.profile-meta,
.contact-details,
.contact-details > div,
body.resume-page .summary-card,
body.resume-page .competency-card,
body.resume-page .exp-item,
body.resume-page .project-card,
body.resume-page .asset-card,
body.resume-page .edu-card,
body.resume-page .stack-strip,
body.resume-page .portfolio-cta,
body.resume-page #projects .case-body,
body.resume-page #projects .case-row,
body.resume-page #projects .project-card,
body.resume-page #projects .pcta-link {
  border-color: transparent !important;
}
.section,
.case-section,
.contact-section { border-top: 0 !important; }

/* Keep only intentional control borders and image framing. */
.selected-media,
.index-media,
.co-hero,
.shot-fig,
.pg-thumb,
.hero-portrait .hp-frame,
.video-cover,
.pdf-embed,
.lb-stage {
  border: 0;
  border-radius: var(--studio-radius);
  background: var(--studio-soft);
}
.co-hero,
.pdf-embed,
.lb-stage { border-radius: var(--studio-radius-large); }
.selected-media img,
.index-media img,
.co-hero img,
.co-hero video,
.shot-fig img,
.pg-thumb img,
.hero-portrait img {
  transform: translateZ(0);
  transition: transform 420ms var(--studio-ease), filter 320ms ease;
}
.selected-card:hover .selected-media img,
.selected-card:focus-within .selected-media img,
.index-card:hover .index-media img,
.index-card:focus-within .index-media img,
.shot:hover .shot-fig img,
.shot:focus-visible .shot-fig img,
.pg-item:hover .pg-thumb img,
.pg-item:focus-visible .pg-thumb img {
  transform: scale(1.008);
  filter: saturate(1.01);
}

/* Work archive: metadata sits below images without a rule or arrow. */
.index-meta {
  grid-template-columns: 52px minmax(0, 1fr);
  padding-top: 18px;
  border-top: 0 !important;
}
.index-meta h3 {
  font-family: var(--font-body);
  font-weight: 560;
  line-height: 1.12;
  letter-spacing: -.035em;
}
.index-number,
.index-type,
.index-description { font-family: var(--font-body); }
.index-number { color: var(--studio-faint); }
.index-type { color: var(--studio-ink); }
.index-description { color: var(--studio-muted); }

/* Selected captions: clean editorial typography, no badges-as-components. */
.selected-meta h3 {
  font-family: var(--font-body);
  font-weight: 560;
  line-height: 1.13;
  letter-spacing: -.035em;
}
.selected-tags { gap: 12px; }
.selected-tags span {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--studio-muted);
  font-size: 11px;
}
.selected-tags span + span::before {
  display: inline;
  margin-right: 12px;
  color: #b5b5b5;
  content: "·";
}

/* Filters are typographic tabs instead of pills. */
.filter-scroll { gap: 20px; }
.chip,
.chip:hover,
.chip:focus-visible,
.chip[aria-pressed="true"] {
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--studio-muted);
  box-shadow: none;
  transform: none;
}
.chip[aria-pressed="true"] { color: var(--studio-black); }
.chip::after {
  display: block;
  bottom: 4px;
  transform: scaleX(0);
}
.chip[aria-pressed="true"]::after { transform: scaleX(1); }
.chip span,
.chip[aria-pressed="true"] span { color: inherit; opacity: .62; }

/* Case studies: use whitespace instead of rules. */
.case-overview-side { padding-top: 0; }
.cm-item { border-bottom: 0; padding-block: 9px; }
.keyjudge,
.transfer,
.reuse { padding-top: 0; }
.flowline { border-top: 0; gap: 8px; }
.flowstep,
.flowstep.key {
  padding: 8px 11px;
  border: 0;
  border-radius: 999px;
  background: var(--studio-soft);
  color: var(--studio-ink);
  text-decoration: none;
}
.flowstep.key { background: var(--studio-black); color: var(--studio-white); }
.proc-card { padding-top: 0; }
.proc-k { color: var(--studio-faint); }
.next-nav { gap: 28px; }
.nn-link { padding-top: 0; }

/* Contact keeps contrast but removes spreadsheet-like rules. */
.contact-details { display: grid; gap: 18px; }
.contact-details > div { padding-block: 0; }

/* Resume: calmer typographic hierarchy, especially Professional Experience. */
body.resume-page {
  --resume-reading: min(72ch, 100%);
  font-family: var(--font-body);
  color: var(--studio-black);
}
body.resume-page .hero-name,
body.resume-page .section-title,
body.resume-page .exp-org,
body.resume-page .project-title-zh,
body.resume-page .pcta-main {
  font-family: var(--font-body);
  font-weight: 590;
  letter-spacing: -.04em;
}
body.resume-page .hero-name { line-height: .92; }
body.resume-page .hero-statement,
body.resume-page .summary-lead,
body.resume-page .section-desc,
body.resume-page .exp-summary,
body.resume-page .exp-bullet,
body.resume-page #projects .case-v,
body.resume-page #projects .transferable {
  color: var(--studio-ink);
  line-height: 1.78;
}
body.resume-page .section-head {
  align-items: end;
  margin-bottom: clamp(54px, 6vw, 82px);
}
body.resume-page .section-title {
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.05;
}
body.resume-page .sub-en {
  margin-top: 10px;
  color: var(--studio-faint);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: .08em;
}
body.resume-page .section-desc { max-width: 720px; font-size: 14px; }

body.resume-page #experience .exp-item {
  padding-top: 0;
  border-top: 0;
}
body.resume-page #experience .exp-item + .exp-item {
  margin-top: clamp(72px, 8vw, 112px);
}
body.resume-page #experience .exp-head {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: start;
}
body.resume-page #experience .exp-org {
  max-width: 760px;
  font-size: clamp(23px, 2.25vw, 32px);
  line-height: 1.24;
  letter-spacing: -.028em;
}
body.resume-page #experience .exp-role {
  max-width: 780px;
  margin-top: 11px;
  color: var(--studio-muted);
  font-size: 14px;
  line-height: 1.55;
}
body.resume-page #experience .exp-period {
  padding-top: 7px;
  color: var(--studio-faint);
  font-size: 10px;
  letter-spacing: .06em;
  white-space: nowrap;
}
body.resume-page #experience .exp-summary {
  max-width: var(--resume-reading);
  margin-top: 27px;
  font-size: 16px;
}
body.resume-page #experience .exp-bullets {
  display: grid;
  gap: 20px;
  max-width: 940px;
  margin-top: 30px;
  padding-left: 0;
}
body.resume-page #experience .exp-bullet {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 24px;
  margin: 0;
  color: var(--studio-ink);
  font-size: 14px;
  line-height: 1.78;
}
body.resume-page #experience .bullet-tag {
  align-self: start;
  padding: 3px 0 0;
  border: 0;
  border-radius: 0;
  color: var(--studio-faint);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .035em;
}
body.resume-page .role-tag,
body.resume-page .capsule-tag,
body.resume-page .stack-tags span {
  border: 0;
  border-radius: 0;
  background: transparent;
}
body.resume-page .hero-metrics {
  gap: 18px 24px;
  border: 0;
  background: transparent;
}
body.resume-page .metric { padding: 0; background: transparent; }

/* Resume projects: remove the remaining spreadsheet rules and arrows. */
body.resume-page #projects .project-card + .project-card { margin-top: clamp(76px, 8vw, 112px); }
body.resume-page #projects .project-overview { padding-block: 0 28px; }
body.resume-page #projects .case-body { border-top: 0; }
body.resume-page #projects .case-row {
  padding-block: 13px;
  border-bottom: 0;
}
body.resume-page #projects .project-closing { padding-top: 24px; }
body.resume-page #projects .case-link,
body.resume-page #projects .pcta-link {
  border: 0;
  background: transparent;
  color: var(--studio-black);
}
body.resume-page #projects .portfolio-cta .pcta-link { padding-block: 0; }


@media (max-width: 760px) {
  .site-nav { min-height: 60px; }
  .nav-links { border-bottom: 0; }
  .nav-links > a,
  .lang-switch { min-height: 48px; }
  .lang-switch { justify-content: flex-start; }
  .selected-tags span + span::before { margin-right: 9px; }
  body.resume-page #experience .exp-head { grid-template-columns: 1fr; gap: 8px; }
  body.resume-page #experience .exp-period { padding-top: 0; }
  body.resume-page #experience .exp-bullet { grid-template-columns: 1fr; gap: 6px; }
  body.resume-page #experience .bullet-tag { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .selected-media img,
  .index-media img,
  .co-hero img,
  .co-hero video,
  .shot-fig img,
  .pg-thumb img,
  .hero-portrait img { transition: none; transform: none !important; filter: none !important; }
}

/* Final line cleanup and resume text-flow corrections. */
.work-toolbar { border-top: 0 !important; }
#projects .role-tag::before { display: none; }
#projects .role-tags { gap: 6px 16px; }
#projects .role-tag { color: var(--studio-muted); }
#projects .role-tag + .role-tag::after { content: none; }

body.resume-page .section-head {
  grid-template-columns: minmax(300px, .44fr) minmax(0, 1fr);
}
body.resume-page .section-title { white-space: nowrap; }
body.resume-page #experience .exp-org {
  max-width: none;
  font-size: clamp(22px, 1.9vw, 28px);
  text-wrap: balance;
}
body.resume-page #experience .exp-bullet-copy {
  min-width: 0;
  grid-column: 2;
}
html[data-lang="en"] body.resume-page .hero-name > .en,
html[data-lang="en"] body.resume-page #experience .exp-role > .en,
html[data-lang="en"] body.resume-page .summary-pillar .sp-k > .en { display: none; }
html[data-lang="en"] body.resume-page .section-title {
  max-width: 360px;
  white-space: normal;
  font-family: var(--font-display);
  font-size: clamp(38px, 3.25vw, 48px);
  line-height: 1.02;
  letter-spacing: -.045em;
  text-wrap: balance;
}
html[data-lang="en"] body.resume-page #experience .exp-org,
html[data-lang="en"] body.resume-page #projects .project-title-zh { font-family: var(--font-display); }

@media (max-width: 1120px) {
  body.resume-page .section-head { grid-template-columns: 1fr; }
  body.resume-page .section-title { white-space: normal; }
}
@media (max-width: 760px) {
  body.resume-page #experience .exp-bullet-copy { grid-column: 1; }
}

/* ================================================================
   V6.6 — locked-layout navigation, media-rule cleanup and resume type
   ================================================================ */

/* Compact studio navigation. Language control must remain the final item. */
.site-nav {
  min-height: 62px;
  align-items: center;
}
.brand {
  color: var(--studio-black);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.022em;
}
.brand-mark,
.brand-name { font: inherit; }
.brand-mark::after {
  margin-inline: 8px;
  font-weight: 400;
  opacity: .45;
}
.nav-links {
  align-items: center;
  gap: clamp(20px, 2vw, 32px);
}
.nav-links > a,
.lang-switch {
  min-height: 40px;
  padding: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 520;
  line-height: 1;
  letter-spacing: -.018em;
  text-transform: none;
}
html[data-lang="en"] .nav-links > a,
html[data-lang="en"] .lang-switch {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.02em;
}
.nav-links > a {
  color: var(--studio-black);
  opacity: .48;
}
.nav-links > a:hover,
.nav-links > a:focus-visible,
.nav-links > a[aria-current="true"],
.nav-links > a[aria-current="page"] { opacity: 1; }
.nav-resume { order: 5; }
.lang-switch {
  order: 6;
  margin-left: clamp(4px, .7vw, 12px);
  color: var(--studio-black);
}
.lang-switch .lang-option { opacity: .28; }
.lang-switch .lang-separator { opacity: .32; }
html[data-lang="zh"] .lang-switch [data-lang-code="zh"],
html[data-lang="en"] .lang-switch [data-lang-code="en"] { opacity: 1; }

/* Remove unintended rules under project imagery. */
.selected-card,
.selected-card > a,
.selected-meta,
.index-card,
.index-card > a,
.index-meta {
  border: 0 !important;
  box-shadow: none !important;
}
.selected-meta,
.index-meta { border-top: 0 !important; }
.selected-media + .selected-meta,
.index-media + .index-meta { border-top: 0 !important; }
.selected-media::before,
.selected-media::after,
.index-media::before,
.index-media::after { border: 0 !important; box-shadow: none !important; }

/* Resume taxonomy: readable Chinese editorial metadata, not tiny UI chips. */
body.resume-page .summary-scope {
  margin-top: clamp(34px, 3.2vw, 48px);
}
body.resume-page .scope-label {
  display: block;
  color: var(--studio-muted);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 560;
  line-height: 1.45;
  letter-spacing: .035em;
  text-transform: none;
}
body.resume-page .summary-scope .role-tags {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px clamp(18px, 2vw, 32px);
  margin-top: 18px;
}
body.resume-page .summary-scope .role-tag,
body.resume-page .competency-card .capsule-tag {
  display: block;
  min-width: 0;
  padding: 0;
  color: var(--studio-ink);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 430;
  line-height: 1.55;
  letter-spacing: -.006em;
  white-space: normal;
}
body.resume-page .competency-card .ct-zh {
  margin-top: 0;
  font-family: var(--font-body);
  font-size: clamp(19px, 1.5vw, 22px);
  font-weight: 570;
  line-height: 1.3;
  letter-spacing: -.022em;
}
body.resume-page .competency-card .ct-en {
  margin-top: 7px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .035em;
}
body.resume-page .competency-card .ct-desc {
  max-width: 46ch;
  margin-top: 14px;
  color: var(--studio-ink);
  font-size: 14px;
  line-height: 1.72;
}
body.resume-page .competency-card .tag-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 24px;
  margin-top: 20px;
}
body.resume-page .competency-card .capsule-tag::before,
body.resume-page .summary-scope .role-tag::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 8px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: .22em;
  opacity: .48;
}

@media (max-width: 980px) {
  body.resume-page .summary-scope .role-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .site-nav { min-height: 58px; }
  .nav-links {
    align-items: stretch;
    gap: 0;
  }
  .nav-links > a,
  .lang-switch {
    width: 100%;
    min-height: 50px;
    justify-content: flex-start;
    font-size: 14px;
  }
  .nav-resume { order: 5; }
  .lang-switch {
    order: 6;
    margin-left: 0;
  }
  body.resume-page .summary-scope .role-tags,
  body.resume-page .competency-card .tag-row {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  body.resume-page .summary-scope .role-tag,
  body.resume-page .competency-card .capsule-tag {
    font-size: 13px;
    line-height: 1.5;
  }
}

/* V6.6 final media-caption cleanup and taxonomy legibility. */
.shot-cap,
.pg-cap {
  border-top: 0 !important;
  box-shadow: none !important;
}
body.resume-page .scope-label { font-size: 12px; }
body.resume-page .summary-scope .role-tag,
body.resume-page .competency-card .capsule-tag { font-size: 13px; }
body.resume-page .competency-card .capsule-tag::before,
body.resume-page .summary-scope .role-tag::before { content: none; }

/* MOUTHWASH-like direct navigation tone: all items remain legible, hover only softens. */
.nav-links > a { opacity: 1; }
.nav-links > a:hover { opacity: .58; }
.nav-links > a:focus-visible,
.nav-links > a[aria-current="true"],
.nav-links > a[aria-current="page"] { opacity: 1; }

/* migrated from mouthwash-navigation-v67.css */
/*
 * V6.7 navigation system.
 * Values are adapted from the user-supplied MOUTHWASH homepage source:
 * 1/6 brand column, compact 2px-radius nav controls, 4px item gap,
 * cap-height padding, neutral translucent hover state, and native cursors.
 * Proprietary MOUTHWASH font files and brand assets are intentionally not copied.
 */
:root {
  --mw-nav-font: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --mw-nav-hover: rgba(219, 219, 219, .52);
  --mw-mobile-menu: #c0c1ba;
  --mw-nav-radius: 2px;
  --mw-nav-duration: 250ms;
}

.site-header,
.site-header[data-scrolled="true"] {
  position: fixed;
  inset: 0 0 auto;
  height: auto;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  pointer-events: none;
}

.site-nav {
  display: flex;
  align-items: flex-start;
  width: min(100%, 2000px);
  min-height: 0;
  margin-inline: auto;
  padding: 16px clamp(20px, 4.15vw, 60px);
  gap: 0;
  pointer-events: none;
}

.brand,
.nav-links,
.nav-toggle { pointer-events: auto; }

.brand {
  flex: 0 0 16.6667%;
  display: flex;
  align-items: baseline;
  gap: 0;
  min-width: 0;
  padding-right: 20px;
  color: #000;
  font-family: var(--mw-nav-font);
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.03em;
  transition: opacity var(--mw-nav-duration) ease;
}
.brand:hover,
.brand:focus-visible { opacity: .5; }
.brand-mark::after {
  margin-inline: .42em;
  color: currentColor;
  opacity: .45;
}

.nav-links {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.nav-links > a,
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: .5em .6em .4em;
  border: 0;
  border-radius: var(--mw-nav-radius);
  background: transparent;
  color: #000;
  font-family: var(--mw-nav-font);
  font-size: clamp(14px, 1.25vw, 20px);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.03em;
  white-space: nowrap;
  opacity: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: color var(--mw-nav-duration) ease,
              background-color var(--mw-nav-duration) ease,
              transform 100ms ease;
}
.nav-links > a:hover,
.nav-links > a:focus-visible,
.nav-links > a[aria-current="true"],
.nav-links > a[aria-current="page"],
.lang-switch:hover,
.lang-switch:focus-visible {
  color: #000;
  background: var(--mw-nav-hover);
  opacity: 1;
}
.nav-links > a:active,
.lang-switch:active { transform: scale(.985); }

.nav-resume { order: 5; }
.lang-switch {
  order: 6;
  margin-left: auto;
  gap: .28em;
  cursor: pointer;
}
.lang-switch .lang-option { opacity: .42; }
.lang-switch .lang-separator { opacity: .42; }
html[data-lang="zh"] .lang-switch [data-lang-code="zh"],
html[data-lang="en"] .lang-switch [data-lang-code="en"] { opacity: 1; }

.nav-toggle { display: none; }

/* Restore MOUTHWASH-like native pointer behaviour. */
html,
body { cursor: auto; }
a,
button,
[role="button"],
[data-gallery] { cursor: pointer; }
input,
textarea,
[contenteditable="true"] { cursor: text; }

@media (max-width: 760px) {
  .site-header,
  .site-header[data-scrolled="true"] { z-index: 1000; }
  .site-nav {
    min-height: 0;
    padding: 16px 20px;
    align-items: flex-start;
  }
  .brand {
    position: relative;
    z-index: 1003;
    flex-basis: auto;
    padding: 0;
    font-size: clamp(27px, 9.4vw, 42px);
    line-height: .9;
    letter-spacing: -.025em;
  }
  .brand-name { display: none; }
  .brand-mark::after { display: none; }

  .nav-toggle {
    position: fixed;
    z-index: 1004;
    top: 16px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 52px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #f0f0f0;
    color: #000;
    transition: background-color var(--mw-nav-duration) ease,
                transform 100ms ease;
  }
  .nav-toggle:hover,
  .nav-toggle:focus-visible { background: #dededb; }
  .nav-toggle:active { transform: scale(.95); }
  .nav-toggle span {
    display: block;
    width: 16px;
    height: 1px;
    border-radius: 0;
    background: currentColor;
    transition: transform 300ms cubic-bezier(.23,1,.32,1), opacity 200ms ease;
  }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(2.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-2.5px) rotate(-45deg); }

  .nav-links {
    position: fixed;
    z-index: 1002;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    height: 100svh;
    padding: clamp(108px, 26vw, 138px) 20px 20px;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--mw-mobile-menu);
    opacity: 0;
    visibility: hidden;
    transform: none;
    transition: opacity 280ms ease, visibility 0s linear 280ms;
  }
  .nav-links[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .nav-links > a,
  .lang-switch,
  html[data-lang="en"] .nav-links > a,
  html[data-lang="en"] .lang-switch {
    flex: 0 0 auto;
    width: auto;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: #000;
    font-family: var(--mw-nav-font);
    font-size: clamp(40px, 13vw, 58px);
    font-weight: 400;
    line-height: .93;
    letter-spacing: -.035em;
  }
  .nav-links > a + a { margin-top: .06em; }
  .nav-links > a[aria-current="true"],
  .nav-links > a[aria-current="page"] { opacity: .5; }
  .nav-links > a:hover,
  .nav-links > a:focus-visible { opacity: .5; }
  .lang-switch {
    order: 6;
    margin: auto 0 0;
    gap: .22em;
    font-size: clamp(24px, 8vw, 34px);
    letter-spacing: -.025em;
  }
  body.nav-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .brand,
  .nav-links,
  .nav-links > a,
  .lang-switch,
  .nav-toggle,
  .nav-toggle span { transition: none !important; }
}

/* Language-specific line breaking: preserve the locked grid without clipping English copy. */
@media (max-width: 760px) {
  html[data-lang="en"] .hero-role {
    max-width: 100%;
    font-size: clamp(28px, 8.1vw, 32px);
    line-height: 1.03;
    letter-spacing: -.042em;
    overflow-wrap: anywhere;
  }
  html[data-lang="en"] .hero-role span {
    display: block;
    white-space: normal;
  }
}

/* migrated from typography-media-v68.css */
/*
 * V6.8 — locked-layout typography, filter affordance and media-quality pass.
 * This layer changes no grid or section order. It only refines type metrics,
 * control affordance and media rendering quality.
 */
:root {
  --v68-font-cjk: "PingFang SC", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --v68-font-latin: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Noto Sans SC", sans-serif;
  --v68-type-body: 16px;
  --v68-type-support: 14px;
  --v68-type-caption: 12px;
  --v68-control-bg: #f3f3f1;
  --v68-control-hover: #e8e8e5;
  --v68-control-active: #111111;
  --v68-control-radius: 5px;
}

body {
  font-family: var(--v68-font-cjk);
  font-size: var(--v68-type-body);
  font-kerning: normal;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
html[data-lang="en"] body { font-family: var(--v68-font-latin); }

/* A consistent minimum caption size across the site. */
.eyebrow,
.kicker,
.cs-eyebrow,
.crumb,
.pt-en,
.page-name,
.index-number,
.case-meta .cm-k,
.proc-k,
.tf-k,
.kj-k,
.cue-label,
.scope-label,
.sg-label,
.asset-code,
.asset-status,
.exp-period,
.project-tag,
.col-tag,
.workflow-head,
.work-count {
  font-size: var(--v68-type-caption);
  line-height: 1.45;
  letter-spacing: .015em;
}
html[data-lang="en"] .eyebrow,
html[data-lang="en"] .kicker,
html[data-lang="en"] .cs-eyebrow,
html[data-lang="en"] .pt-en,
html[data-lang="en"] .page-name,
html[data-lang="en"] .workflow-head {
  letter-spacing: .045em;
}
.selected-type,
.index-type,
.index-description,
.about-pillars p,
.profile-meta dd {
  font-size: var(--v68-type-support);
}
.section-copy { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.68; }

/* Navigation: one metric system for Chinese and English. */
.nav-links > a,
.lang-switch,
html[data-lang="zh"] .nav-links > a,
html[data-lang="zh"] .lang-switch,
html[data-lang="en"] .nav-links > a,
html[data-lang="en"] .lang-switch {
  min-height: 38px;
  padding: .55em .68em .47em;
  font-family: var(--v68-font-latin);
  font-size: clamp(14px, .98vw, 15px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.018em;
  font-synthesis: none;
}
.lang-switch,
html[data-lang="zh"] .lang-switch,
html[data-lang="en"] .lang-switch {
  font-size: clamp(14px, .98vw, 15px);
}

/* More Work filters: obvious secondary navigation, not tiny metadata. */
.work-toolbar {
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
}
.filter-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  padding: 5px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border-radius: 8px;
  background: var(--v68-control-bg);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.filter-scroll::-webkit-scrollbar { display: none; }
.chip,
html[data-lang="zh"] .chip,
html[data-lang="en"] .chip {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--v68-control-radius);
  background: transparent;
  color: #4b4b48;
  font-family: var(--v68-font-cjk);
  font-size: 14px;
  font-weight: 520;
  line-height: 1;
  letter-spacing: -.012em;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: color 180ms ease, background-color 180ms ease, opacity 180ms ease;
}
html[data-lang="en"] .chip { font-family: var(--v68-font-latin); letter-spacing: -.015em; }
.chip::after { display: none !important; }
.chip:hover,
.chip:focus-visible {
  background: var(--v68-control-hover);
  color: #111111;
}
.chip[aria-pressed="true"] {
  background: var(--v68-control-active);
  color: #ffffff;
}
.chip[aria-pressed="true"]:hover,
.chip[aria-pressed="true"]:focus-visible { background: #111111; color: #ffffff; }
.chip span,
.chip[aria-pressed="true"] span {
  margin-left: 7px;
  color: inherit;
  font-size: 11px;
  line-height: 1;
  vertical-align: baseline;
  opacity: .68;
}
.work-count {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 44px;
  color: #666660;
  font-family: var(--v68-font-cjk);
  font-size: 12px;
  letter-spacing: 0;
  white-space: nowrap;
}
html[data-lang="en"] .work-count { font-family: var(--v68-font-latin); }
.chip:focus-visible { outline: 2px solid #111111; outline-offset: 2px; }

/* High-resolution media: never soften covers through transform/filter effects. */
img,
video { image-rendering: auto; }
.selected-media img,
.selected-media video,
.index-media img,
.co-hero img,
.co-hero video {
  backface-visibility: visible;
  filter: none !important;
  transform: none !important;
  will-change: auto;
}
.selected-card:hover .selected-media img,
.selected-card:focus-within .selected-media img,
.selected-card:hover .selected-media video,
.selected-card:focus-within .selected-media video,
.index-card:hover .index-media img,
.index-card:focus-within .index-media img {
  filter: none !important;
  transform: none !important;
}
.selected-media video {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
  background: #000000;
}
.selected-card[data-video-cover="true"] .selected-media {
  background: #000000;
}

/* Resume type hierarchy: readable Chinese metadata, not miniature UI copy. */
body.resume-page .scope-label {
  font-size: 12px;
  line-height: 1.5;
}
body.resume-page .summary-scope .role-tag,
body.resume-page .competency-card .capsule-tag {
  font-size: 13px;
  line-height: 1.66;
}
body.resume-page .competency-card .ct-zh {
  font-size: clamp(20px, 1.55vw, 23px);
  line-height: 1.28;
}
body.resume-page .competency-card .ct-en {
  font-size: 12px;
  line-height: 1.45;
}
body.resume-page .competency-card .ct-desc {
  font-size: 15px;
  line-height: 1.72;
}
body.resume-page #experience .exp-role {
  font-size: 15px;
  line-height: 1.6;
}
body.resume-page #experience .exp-period {
  font-size: 12px;
  line-height: 1.45;
}
body.resume-page #experience .exp-summary {
  font-size: 16px;
  line-height: 1.78;
}
body.resume-page #experience .exp-bullet {
  font-size: 15px;
  line-height: 1.78;
}
body.resume-page #experience .bullet-tag {
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 980px) {
  .work-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
  .filter-scroll { scroll-snap-type: x proximity; }
}

@media (max-width: 760px) {
  .nav-links > a,
  .lang-switch,
  html[data-lang="zh"] .nav-links > a,
  html[data-lang="zh"] .lang-switch,
  html[data-lang="en"] .nav-links > a,
  html[data-lang="en"] .lang-switch {
    min-height: 0;
    padding: 0;
    font-size: clamp(38px, 12vw, 54px);
    font-weight: 400;
    line-height: .94;
    letter-spacing: -.035em;
  }
  .lang-switch,
  html[data-lang="zh"] .lang-switch,
  html[data-lang="en"] .lang-switch {
    font-size: clamp(24px, 7.8vw, 32px);
  }
  .work-toolbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .filter-scroll {
    width: 100%;
    padding: 5px;
  }
  .chip,
  html[data-lang="zh"] .chip,
  html[data-lang="en"] .chip {
    min-height: 44px;
    padding-inline: 13px;
    font-size: 14px;
  }
  .work-count { min-height: 0; padding-inline: 5px; }
  body.resume-page .summary-scope .role-tag,
  body.resume-page .competency-card .capsule-tag { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .chip { transition: none; }
}

/* migrated from readability-v69.css */
/*
 * V6.9 — performance-safe, site-wide readability pass.
 * Layout, content order and media paths remain locked.
 */
:root {
  --v69-body: 16px;
  --v69-support: 15px;
  --v69-label: 13px;
  --v69-small: 12px;
  --v69-reading: #333332;
  --v69-muted: #62625f;
}

html { font-size: 16px; }
body {
  font-size: var(--v69-body);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* No informational text may fall below 12px; Chinese metadata defaults to 13px. */
.eyebrow, .kicker, .cs-eyebrow, .crumb, .pt-en, .page-name,
.index-number, .case-meta .cm-k, .proc-k, .tf-k, .kj-k, .cue-label,
.scope-label, .sg-label, .asset-code, .asset-status, .exp-period,
.project-tag, .col-tag, .workflow-head, .work-count, .profile-meta dt,
.capability-list li > span, .contact-details span, .scale-k, .case-k,
.page-length-badge, .shot-cap span, .pg-cap span, .nn-dir, .fb-en,
.foot-note, .hm-l, .sub-en, .ct-en, .project-title-en {
  font-size: var(--v69-label) !important;
  line-height: 1.5 !important;
  letter-spacing: .01em !important;
}
html[data-lang="en"] .eyebrow,
html[data-lang="en"] .kicker,
html[data-lang="en"] .sub-en,
html[data-lang="en"] .ct-en,
html[data-lang="en"] .project-title-en,
html[data-lang="en"] .pt-en {
  letter-spacing: .035em !important;
}

.hero-skills, .selected-meta > p, .selected-tags, .index-meta,
.index-type, .index-description, .profile-meta dd, .footer-grid,
.foot-grid, .workflow-status li, .workflow-status > p,
.flowstep, .deliver-list li, .nn-dir, .fb-en, .foot-note {
  font-size: var(--v69-label) !important;
  line-height: 1.58 !important;
}
.selected-type, .about-pillars p, .section-copy, .page-intro,
.cs-lead, .case-v, .process p, .deliver-list, .case-note {
  font-size: var(--v69-support) !important;
  line-height: 1.72 !important;
  color: var(--v69-reading);
}
.chip span { font-size: var(--v69-small) !important; }
.chip, .work-count { font-size: 14px !important; }

/* Case-study supporting copy remains readable on large image-led pages. */
.case-meta dd, .proc-v, .tf-v, .kj-v, .cue-copy,
.shot-cap, .pg-cap, .asset-name, .asset-note {
  font-size: 14px !important;
  line-height: 1.65 !important;
}

/* Resume: a coherent editorial hierarchy rather than miniature UI labels. */
body.resume-page { font-size: 16px; line-height: 1.72; }
body.resume-page .hero-kicker,
body.resume-page .scope-label,
body.resume-page .sg-label {
  font-size: 13px !important;
  line-height: 1.55 !important;
}
body.resume-page .hero-summary,
body.resume-page .section-desc,
body.resume-page .sidebar-copy,
body.resume-page .education-copy {
  font-size: 16px !important;
  line-height: 1.76 !important;
}
body.resume-page .hm-l { font-size: 13px !important; line-height: 1.5 !important; }
body.resume-page .role-tag,
body.resume-page .capsule-tag,
body.resume-page .summary-scope .role-tag,
body.resume-page .competency-card .capsule-tag,
body.resume-page .stack-tags .capsule-tag {
  font-size: 14px !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}
body.resume-page .competency-card .ct-zh {
  font-size: clamp(21px, 1.6vw, 24px) !important;
  line-height: 1.28 !important;
}
body.resume-page .competency-card .ct-en {
  font-size: 13px !important;
  line-height: 1.5 !important;
}
body.resume-page .competency-card .ct-desc {
  font-size: 16px !important;
  line-height: 1.76 !important;
  color: var(--v69-reading);
}
body.resume-page .stack-strip-head { font-size: 15px !important; line-height: 1.5 !important; }
body.resume-page #experience .exp-org {
  font-size: clamp(20px, 1.65vw, 24px) !important;
  line-height: 1.3 !important;
  letter-spacing: -.018em !important;
}
body.resume-page #experience .exp-role {
  font-size: 16px !important;
  line-height: 1.62 !important;
}
body.resume-page #experience .exp-role .en {
  font-size: 14px !important;
  line-height: 1.55 !important;
}
body.resume-page #experience .exp-period {
  font-size: 13px !important;
  line-height: 1.5 !important;
}
body.resume-page #experience .exp-summary {
  font-size: 17px !important;
  line-height: 1.78 !important;
  color: #292928;
}
body.resume-page #experience .exp-bullet {
  font-size: 16px !important;
  line-height: 1.8 !important;
  color: var(--v69-reading);
}
body.resume-page #experience .bullet-tag {
  font-size: 13px !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}
body.resume-page #projects .project-tag,
body.resume-page #projects .project-title-en,
body.resume-page #projects .case-k {
  font-size: 13px !important;
  line-height: 1.55 !important;
}
body.resume-page #projects .case-v,
body.resume-page #projects .case-did,
body.resume-page #projects .method-copy {
  font-size: 16px !important;
  line-height: 1.78 !important;
}
body.resume-page #projects .role-tag { font-size: 14px !important; }

/* Remove costly transitions from first paint; interaction remains immediate. */
.motion-ready .reveal { transition-duration: 260ms; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .eyebrow, .kicker, .cs-eyebrow, .crumb, .pt-en, .page-name,
  .index-number, .case-meta .cm-k, .proc-k, .tf-k, .kj-k, .cue-label,
  .scope-label, .sg-label, .asset-code, .asset-status, .exp-period,
  .project-tag, .col-tag, .workflow-head, .work-count, .profile-meta dt,
  .case-k, .shot-cap span, .pg-cap span {
    font-size: 13px !important;
  }
  .selected-type, .index-description, .section-copy, .page-intro,
  .cs-lead, .case-v { font-size: 15px !important; }
  body.resume-page .hero-summary,
  body.resume-page .section-desc { font-size: 16px !important; }
  body.resume-page #experience .exp-org { font-size: 21px !important; }
  body.resume-page #experience .exp-role,
  body.resume-page #experience .exp-bullet { font-size: 16px !important; }
  body.resume-page #experience .exp-summary { font-size: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .reveal { transition: none !important; }
}

/* Explicit overrides for legacy miniature labels in earlier layers. */
.skip-link,
.brand-mark,
.selected-meta > p:first-child,
.selected-tags,
.selected-tags span,
.index-number,
.capability-list h3 small,
.footer-grid p:first-child span,
.contact-pills a,
.page-length-badge,
.pdf-viewer-bar,
.pdf-viewer-actions,
.summary-pillar .sp-k .en,
.summary-pillar .sp-v,
#projects .portfolio-cta .pcta-sub {
  font-size: 13px !important;
  line-height: 1.5 !important;
  letter-spacing: .005em !important;
}
.brand-mark { font-size: 12px !important; }
.text-link { font-size: 14px !important; }
.capability-list p { font-size: 15px !important; line-height: 1.72 !important; }
.flowstep, .deliver-list li { font-size: 13px !important; line-height: 1.55 !important; }

body.resume-page .summary-pillar .sp-v,
body.resume-page .contact-pills a {
  font-size: 14px !important;
  line-height: 1.65 !important;
}
body.resume-page .summary-pillar .sp-k .en,
body.resume-page .sub-en,
body.resume-page #projects .portfolio-cta .pcta-sub {
  font-size: 13px !important;
  line-height: 1.5 !important;
}

@media (max-width: 600px) {
  .page-length-badge { font-size: 12px !important; }
}

/* Resume sidebar and summary readability. */
body.resume-page .hero-subrole,
body.resume-page .hero-roles-en,
body.resume-page .hero-tagline {
  font-size: 15px !important;
  line-height: 1.68 !important;
}
body.resume-page .hero-statement {
  font-size: 16px !important;
  line-height: 1.78 !important;
}
body.resume-page .role-aim-label {
  font-size: 13px !important;
  line-height: 1.5 !important;
}
body.resume-page .contact-pills .pill {
  font-size: 14px !important;
  line-height: 1.5 !important;
}
body.resume-page .summary-lead {
  font-size: 18px !important;
  line-height: 1.76 !important;
}
body.resume-page .summary-pillar .sp-k {
  font-size: 16px !important;
  line-height: 1.45 !important;
}
body.resume-page .summary-pillar .sp-v {
  font-size: 15px !important;
  line-height: 1.72 !important;
}

/* ==========================================================================\n   v7.0 final page system — token-driven normalization and refinement\n   ========================================================================== */
body { background: var(--color-canvas); color: var(--color-text-primary); font-family: var(--font-body); }
body::before, body::after { display: none; }

/* Common section rhythm */
.portfolio-page .section,
.case-detail .case-section,
.resume-page .section { scroll-margin-top: calc(var(--nav-height) + 1.5rem); }
.portfolio-page .section { padding-block: clamp(4.75rem, 9vw, 8.5rem); }
.section-heading { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(0, 2.4fr); gap: var(--grid-gap); align-items: end; margin-bottom: var(--space-12); }
.section-heading h2, .section-title { font-family: var(--font-display); font-size: var(--text-h2); line-height: 1.12; letter-spacing: -.035em; font-weight: 600; }
.eyebrow, .cs-eyebrow, .page-sec, .selected-type, .index-type, .index-number, .work-count, .case-meta dt, .cm-k, .proc-k {
  font-size: var(--text-meta);
  line-height: 1.5;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.section-copy, .hero-intro, .page-lede, .cs-text, .summary-lead, .ct-desc, .index-description { color: var(--color-text-secondary); }

/* Portfolio hero */
.portfolio-page main { overflow: clip; }
.home-hero {
  min-height: calc(100svh - var(--nav-height));
  padding-block: clamp(4rem, 7vw, 7rem) var(--space-20);
  display: grid;
  grid-template-columns: minmax(13rem, .72fr) minmax(0, 1.85fr);
  grid-template-areas: "identity copy" "identity workflow";
  column-gap: clamp(2rem, 6vw, 6rem);
  row-gap: var(--space-16);
  align-content: start;
}
.hero-identity { grid-area: identity; position: sticky; top: calc(var(--nav-height) + var(--space-8)); align-self: start; }
.hero-identity > h1 { font-family: var(--font-display); font-size: clamp(3.25rem, 5.2vw, 5.5rem); line-height: .98; letter-spacing: -.055em; font-weight: 600; margin-top: clamp(4rem, 10vw, 8rem); }
.hero-copy { grid-area: copy; max-width: 61rem; }
.hero-role { max-width: 59rem; margin-bottom: var(--space-8); font-family: var(--font-display); font-size: clamp(2.7rem, 5.6vw, 5.75rem); line-height: 1.01; letter-spacing: -.055em; font-weight: 500; text-wrap: balance; }
.hero-role span { display: inline; }
.hero-tagline-home { max-width: 50rem; margin-bottom: var(--space-6); font-size: var(--text-body-lg); line-height: 1.55; font-weight: 500; }
.hero-intro { max-width: var(--reading-max-width); font-size: var(--text-body); line-height: 1.78; }
.hero-skills { display: flex; flex-wrap: wrap; gap: .45rem .75rem; margin-block: var(--space-8); padding: 0; list-style: none; }
.hero-skills li { padding: .35rem .65rem; border: var(--border-default); border-radius: var(--radius-control); background: color-mix(in srgb, var(--color-surface) 60%, transparent); font-size: var(--text-meta); color: var(--color-text-secondary); }
.hero-meta { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; font-size: var(--text-body-sm); }
.status i { background: var(--color-accent); box-shadow: 0 0 0 .25rem var(--color-surface-accent); }
.workflow-status { grid-area: workflow; border: var(--border-default); border-radius: var(--radius-card); background: var(--color-surface); overflow: hidden; }
.workflow-head { padding: var(--space-4) var(--space-5); border-bottom: var(--border-default); }
.workflow-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.workflow-step { min-height: 6.5rem; padding: var(--space-4); border-right: var(--border-default); }
.workflow-step:last-child { border-right: 0; }
.workflow-step.is-active, .workflow-step[aria-current="step"] { background: var(--color-surface-accent); }

/* Selected and project cards */
.selected-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4.75rem) var(--grid-gap); }
.selected-card { grid-column: span 6; min-width: 0; }
.selected-card.layout-lead, .selected-card.layout-panorama { grid-column: 1 / -1; }
.selected-card a, .index-card a { display: block; color: inherit; text-decoration: none; }
.selected-media, .index-media, .pg-thumb, .shot-fig { overflow: hidden; border-radius: var(--radius-media); background: var(--color-surface-soft); border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); }
.selected-media img, .selected-media video, .index-media img, .pg-thumb img, .shot-fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(.2,.8,.2,1); }
.media-page img, .media-page video { object-fit: contain; background: var(--color-surface-soft); }
.selected-card:hover .selected-media img, .selected-card:hover .selected-media video, .index-card:hover .index-media img { transform: scale(1.018); }
.selected-meta, .index-meta { padding-top: var(--space-5); }
.selected-meta h3, .index-meta h3 { margin-bottom: .45rem; font-size: clamp(1.25rem, 2vw, 1.8rem); line-height: 1.2; letter-spacing: -.025em; font-weight: 600; }
.selected-tags, .tag-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.selected-tags span, .capsule-tag, .role-tag, .col-tag { min-height: 1.75rem; display: inline-flex; align-items: center; padding: .18rem .55rem; border: var(--border-default); border-radius: var(--radius-control); color: var(--color-text-secondary); background: transparent; font-size: .75rem; line-height: 1.25; }
.all-work-section { border-top: var(--border-default); }
.work-toolbar { display: flex; align-items: center; gap: var(--space-5); justify-content: space-between; margin-bottom: var(--space-10); }
.filter-scroll { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { min-height: 2.5rem; padding: .45rem .8rem; border: var(--border-default); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text-secondary); font-size: var(--text-meta); cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast); }
.chip:hover { border-color: var(--color-border-strong); color: var(--color-text-primary); }
.chip[aria-pressed="true"], .chip.is-active { border-color: color-mix(in srgb, var(--color-accent) 65%, var(--color-border)); background: var(--color-surface-accent); color: var(--color-accent-hover); }
.chip span { margin-left: .4rem; font-variant-numeric: tabular-nums; }
.project-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 5rem) var(--grid-gap); }
.index-card { min-width: 0; border-top: var(--border-default); padding-top: var(--space-4); }
.index-card[hidden] { display: none; }
.index-description { font-size: var(--text-body-sm); line-height: 1.65; }

/* About, capabilities and contact */
.about-section { display: grid; grid-template-columns: minmax(12rem, .7fr) minmax(0, 1.7fr); gap: clamp(2rem, 7vw, 7rem); border-top: var(--border-default); }
.about-copy > p { max-width: var(--reading-max-width); font-size: var(--text-body-lg); line-height: 1.7; }
.about-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); margin-top: var(--space-10); }
.about-pillars > * { border-top: var(--border-default); padding-top: var(--space-4); }
.profile-meta { margin-top: var(--space-10); display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--grid-gap); }
.capability-list { border-top: var(--border-default); }
.capability-list > li { display: grid; grid-template-columns: 4rem minmax(12rem,.8fr) minmax(0,1.5fr); gap: var(--grid-gap); padding-block: var(--space-6); border-bottom: var(--border-default); }
.contact-section { background: var(--color-inverse); color: var(--color-on-inverse); padding-block: clamp(5rem, 10vw, 9rem); }
.contact-inner { display: grid; grid-template-columns: minmax(12rem,.7fr) minmax(0,1.7fr); gap: clamp(2rem,7vw,7rem); }
.contact-section h2 { font-size: var(--text-h2); line-height: 1.1; letter-spacing: -.04em; }
.contact-details { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); }
.contact-details a { color: inherit; }

/* Case pages */
.case-detail { background: var(--color-canvas); }
.case-detail .page-shell, .case-detail .case-page { width: min(calc(100% - 2 * var(--page-gutter)), var(--content-max-width)); }
.page-bar { border-bottom: var(--border-default); background: transparent; }
.page-hero { min-height: min(48rem, calc(100svh - var(--nav-height))); padding-block: clamp(4rem,8vw,7rem) var(--space-20); display: grid; grid-template-columns: minmax(11rem, .75fr) minmax(0, 2.15fr); gap: clamp(2rem,6vw,6rem); align-content: start; }
.crumb { padding-top: .45rem; font-size: var(--text-meta); color: var(--color-text-tertiary); }
.page-title { max-width: 60rem; margin-bottom: var(--space-6); font-family: var(--font-display); font-size: clamp(3rem, 6.2vw, 6.25rem); line-height: .98; letter-spacing: -.058em; font-weight: 500; overflow-wrap: anywhere; text-wrap: balance; }
.page-title .pt-en { display: inline; font-weight: 400; }
.page-hero > div:last-child { min-width: 0; }
.page-lede { max-width: 50rem; margin-top: var(--space-12); font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.62; color: var(--color-text-secondary); }
.case-page { border-top: var(--border-default); }
.case-overview { padding-block: clamp(4.5rem,8vw,8rem); display: grid; grid-template-columns: minmax(0,1.65fr) minmax(15rem,.65fr); gap: clamp(2.5rem,7vw,7rem); }
.co-hero { max-width: var(--reading-max-width); }
.case-overview-side { border-left: var(--border-default); padding-left: var(--space-6); }
.case-meta { display: grid; gap: var(--space-5); }
.case-meta > div, .cm-item { padding-bottom: var(--space-4); border-bottom: var(--border-default); }
.cm-v, .case-meta dd { font-size: var(--text-body-sm); color: var(--color-text-primary); }
.proc-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--grid-gap); margin-top: var(--space-10); }
.proc-card { min-height: 10rem; padding: var(--space-5); border: var(--border-default); border-radius: var(--radius-card); background: var(--color-surface); }
.proc-v { font-size: var(--text-body-sm); color: var(--color-text-secondary); }
.case-section { padding-block: clamp(4.75rem,8vw,8rem); border-top: var(--border-default); }
.case-section > .cs-head, .case-section > header { display: grid; grid-template-columns: minmax(10rem,.7fr) minmax(0,1.8fr); gap: clamp(2rem,6vw,6rem); margin-bottom: var(--space-10); }
.cs-title { font-size: var(--text-h2); line-height: 1.12; letter-spacing: -.035em; font-weight: 600; }
.cs-text { max-width: var(--reading-max-width); font-size: var(--text-body); line-height: 1.78; }
.pg-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: var(--grid-gap); }
.pg-item { grid-column: span 6; min-width: 0; }
.pg-item:nth-child(5n+1) { grid-column: span 12; }
.pg-item.media-portrait { grid-column: span 4; }
.pg-wrap { border-radius: var(--radius-media); background: var(--color-surface); }
.pg-zoom, .shot-zoom { border-radius: var(--radius-media); }
.pg-cap, .shot-cap { min-height: 2rem; padding-top: .55rem; font-size: var(--text-meta); line-height: 1.5; color: var(--color-text-secondary); }
.next-nav { margin-top: var(--space-24); border-top: var(--border-default); border-bottom: var(--border-default); display: grid; grid-template-columns: 1fr auto 1fr; }
.nn-link { min-height: 8rem; padding: var(--space-5); text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; }
.nn-center { border-inline: var(--border-default); display: grid; place-items: center; min-width: 10rem; }
.lightbox { background: rgba(12,13,12,.93); }
.lb-stage { border-radius: var(--radius-card); }
.lb-btn, .lb-close { min-width: 2.75rem; min-height: 2.75rem; }

/* Resume */
.resume-page { background: var(--color-canvas); }
.resume-page .page-shell { padding-block: clamp(3rem,6vw,6rem); }
.resume-page .layout-grid { display: grid; grid-template-columns: minmax(17rem,.75fr) minmax(0,1.8fr); gap: clamp(2.5rem,7vw,7rem); align-items: start; }
.resume-page .col-left { position: sticky; top: calc(var(--nav-height) + var(--space-6)); }
.resume-page .hero { padding: 0; }
.hero-glow { display: none; }
.hero-portrait { width: min(11rem, 55%); margin-bottom: var(--space-6); }
.hp-frame { border-radius: var(--radius-media); overflow: hidden; border: var(--border-default); background: var(--color-surface-soft); }
.resume-page .hero-name { font-size: clamp(3rem,5vw,5rem); line-height: .92; letter-spacing: -.055em; font-weight: 600; }
.resume-page .hero-name .en { display: block; margin-top: .4rem; font-size: .42em; line-height: 1.15; letter-spacing: -.025em; }
.hero-statement, .summary-lead { font-size: var(--text-body); line-height: 1.75; color: var(--color-text-secondary); }
.hero-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; margin-block: var(--space-6); }
.hero-metric { padding: .75rem; border: var(--border-default); border-radius: var(--radius-card); background: var(--color-surface); }
.hm-n { font-weight: 700; font-size: 1.05rem; }
.hm-l { font-size: .75rem; color: var(--color-text-secondary); }
.contact-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill { min-height: 2.5rem; padding: .45rem .75rem; border: var(--border-default); border-radius: var(--radius-control); background: var(--color-surface); font-size: var(--text-meta); text-decoration: none; }
.resume-page .col-right { min-width: 0; }
.resume-page .section { padding-block: 0 var(--space-20); }
.resume-page .section + .section { padding-top: var(--space-16); border-top: var(--border-default); }
.resume-page .section-head { margin-bottom: var(--space-6); }
.glass-card, .competency-card, .timeline-card, .project-card, .asset-card { border: var(--border-default); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: none; }
.glass-card:hover, .competency-card:hover { transform: none; border-color: var(--color-border-strong); }
.competency-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--grid-gap); }
.summary-pillars { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--grid-gap); }
.summary-pillar { border-top: var(--border-default); padding-top: var(--space-4); }
.section-nav, .toolbar { border: var(--border-default); background: color-mix(in srgb,var(--color-surface) 92%, transparent); box-shadow: none; }

/* Shared media and interaction */
video { background: var(--color-surface-soft); }
a, button { -webkit-tap-highlight-color: transparent; }
.reveal { transition-duration: 360ms; }
.reveal.is-visible { transform: none; }

@media (max-width: 1100px) {
  .project-index { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .page-title { font-size: clamp(3rem,7.4vw,5.2rem); }
  .resume-page .layout-grid { grid-template-columns: minmax(14rem,.65fr) minmax(0,1.65fr); gap: var(--space-10); }
}

@media (max-width: 800px) {
  .home-hero { min-height: auto; grid-template-columns: 1fr; grid-template-areas: "identity" "copy" "workflow"; padding-top: var(--space-10); row-gap: var(--space-10); }
  .hero-identity { position: static; }
  .hero-identity > h1 { margin-top: var(--space-8); font-size: clamp(3rem,14vw,4.6rem); }
  .hero-role { font-size: clamp(2.25rem,11vw,3.8rem); line-height: 1.04; }
  .hero-intro { font-size: .98rem; }
  .workflow-steps { grid-template-columns: 1fr; }
  .workflow-step { min-height: auto; border-right: 0; border-bottom: var(--border-default); }
  .workflow-step:last-child { border-bottom: 0; }
  .section-heading, .about-section, .contact-inner, .case-section > .cs-head, .case-section > header { grid-template-columns: 1fr; gap: var(--space-5); }
  .selected-grid { grid-template-columns: 1fr; gap: var(--space-16); }
  .selected-card, .selected-card.layout-lead, .selected-card.layout-panorama { grid-column: auto; }
  .project-index { grid-template-columns: 1fr; }
  .work-toolbar { align-items: flex-start; flex-direction: column; }
  .filter-scroll { flex-wrap: nowrap; width: 100%; overflow-x: auto; padding-bottom: .4rem; scrollbar-width: thin; }
  .chip { flex: 0 0 auto; }
  .about-pillars, .profile-meta { grid-template-columns: 1fr; }
  .capability-list > li { grid-template-columns: 2.5rem 1fr; }
  .capability-list > li > *:last-child { grid-column: 2; }
  .page-hero { min-height: auto; grid-template-columns: 1fr; gap: var(--space-6); padding-block: var(--space-10) var(--space-16); }
  .page-title { font-size: clamp(2.65rem,13vw,4.5rem); line-height: 1.02; letter-spacing: -.05em; }
  .page-lede { margin-top: var(--space-8); font-size: 1.12rem; }
  .case-overview { grid-template-columns: 1fr; }
  .case-overview-side { border-left: 0; border-top: var(--border-default); padding-left: 0; padding-top: var(--space-6); }
  .proc-grid { grid-template-columns: 1fr; }
  .pg-grid { grid-template-columns: 1fr; }
  .pg-item, .pg-item:nth-child(5n+1), .pg-item.media-portrait { grid-column: auto; }
  .next-nav { grid-template-columns: 1fr 1fr; }
  .nn-center { grid-column: 1 / -1; grid-row: 2; min-height: 4rem; border-inline: 0; border-top: var(--border-default); }
  .resume-page .layout-grid { grid-template-columns: 1fr; }
  .resume-page .col-left { position: static; }
  .hero-portrait { width: 7rem; }
  .resume-page .hero-name { font-size: clamp(3rem,15vw,4.6rem); }
  .competency-grid, .summary-pillars { grid-template-columns: 1fr; }
  .section-nav, .toolbar { display: none; }
}

@media (max-width: 480px) {
  .home-hero { padding-bottom: var(--space-16); }
  .hero-skills { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hero-skills li { padding-inline: .5rem; }
  .selected-meta h3, .index-meta h3 { font-size: 1.35rem; }
  .page-title { overflow-wrap: break-word; word-break: normal; }
  .next-nav { grid-template-columns: 1fr; }
  .nn-center { grid-column: auto; grid-row: auto; border-top: var(--border-default); }
  .hero-metrics { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .selected-media img, .selected-media video, .index-media img { transform: none !important; }
}

/* v7.0 post-visual-review refinements */
.page-hero .crumb { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
.page-hero .page-title { grid-column: 2; grid-row: 1; }
.page-hero .page-lede { grid-column: 2; grid-row: 2; }
.page-title .pt-en {
  display: block;
  margin-top: var(--space-5);
  font-size: var(--text-meta);
  line-height: 1.45;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  font-weight: 500;
}
@media (max-width: 800px) {
  .hero-identity .eyebrow { max-width: calc(100% - 3.75rem); }
  .page-hero .crumb, .page-hero .page-title, .page-hero .page-lede { grid-column: 1; grid-row: auto; }
  .page-title .pt-en { margin-top: var(--space-4); font-size: .75rem; }
}
.nn-all, .page-length-badge { font-size: var(--text-meta); }
.case-detail .page-length-badge { font-size: var(--text-meta) !important; }