/*
 * 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; }