:root {
  --navy: #0b1f3a;
  --navy-2: #102a4c;
  --ink: #0f172a;
  --blue: #1f6feb;
  --teal: #00b8a9;
  --teal-ink: #007a70;
  --grey: #f4f6fa;
  --slate: #5b6675;
  --white: #ffffff;
  --line: oklch(0.25 0.04 255 / 0.12);
  --line-dark: oklch(1 0 0 / 0.14);

  --color-bg: var(--white);
  --color-text: var(--ink);
  --color-primary: var(--blue);

  --font-display: 'Cabinet Grotesk', 'Noto Sans TC', 'Noto Sans SC', system-ui, sans-serif;
  --font-body: 'Satoshi', 'Noto Sans TC', 'Noto Sans SC', system-ui, sans-serif;

  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.25rem + 1.1vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --text-hero: clamp(3.25rem, 1.6rem + 7.5vw, 8.5rem);

  --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; --space-32: 8rem;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-interactive: 180ms var(--ease);
  --wrap: 1200px;
}
.lang-zh-cn { --font-display: 'Cabinet Grotesk', 'Noto Sans SC', system-ui, sans-serif; --font-body: 'Satoshi', 'Noto Sans SC', system-ui, sans-serif; }

body { font-family: var(--font-body); }
a { color: inherit; }
.wrap { width: min(100% - 2 * clamp(1.25rem, 4vw, 3rem), var(--wrap)); margin-inline: auto; }
.num { font-family: 'Cabinet Grotesk', system-ui, sans-serif; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }

.skip { position: absolute; left: -999px; top: 0; background: var(--white); color: var(--ink); padding: var(--space-3) var(--space-4); z-index: 100; }
.skip:focus { left: var(--space-4); top: var(--space-4); }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; background: oklch(from var(--navy) l c h / 0.94); backdrop-filter: blur(12px); color: var(--white); border-bottom: 1px solid var(--line-dark); }
.header-inner { display: flex; align-items: center; gap: var(--space-8); min-height: 64px; }
.brand { font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; text-decoration: none; letter-spacing: -0.01em; }
.nav { display: flex; gap: var(--space-6); margin-inline-start: auto; font-size: var(--text-sm); }
.nav a { text-decoration: none; opacity: 0.8; padding-block: var(--space-2); }
.nav a:hover, .nav a[aria-current] { opacity: 1; }
.nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--teal); }
.lang { display: flex; gap: 2px; font-size: var(--text-xs); border: 1px solid var(--line-dark); border-radius: 999px; padding: 2px; }
.lang a, .lang span { padding: 4px 10px; border-radius: 999px; text-decoration: none; min-width: 32px; text-align: center; }
.lang span { background: var(--white); color: var(--navy); font-weight: 700; }
.lang a:hover { background: var(--line-dark); }

/* buttons */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-6); border-radius: var(--radius-md); font-weight: 700; font-size: var(--text-sm); text-decoration: none; border: 1px solid transparent; }
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: #185bc4; }
.btn-ghost { border-color: currentColor; }
.btn-ghost:hover { background: oklch(1 0 0 / 0.08); }

.eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); }
.lede { font-size: var(--text-lg); max-width: 40ch; opacity: 0.86; margin-top: var(--space-4); }

/* hero */
.hero { background: var(--navy); color: var(--white); padding-block: clamp(var(--space-16), 9vw, var(--space-32)) var(--space-12); position: relative; overflow: hidden; }
.hero::before, .case-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(90deg, transparent 30%, #000 100%); opacity: 0.45; }
.hero > *, .case-hero > * { position: relative; }
.hero-grid { display: grid; grid-template-columns: 1fr auto; gap: var(--space-12); align-items: end; }
.hero h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-hero); letter-spacing: -0.03em; line-height: 0.95; margin-top: var(--space-4); }
.hero-stat { text-align: right; }
.num-hero { display: block; font-size: clamp(3.5rem, 2rem + 7vw, 9rem); color: var(--teal); }
.hero-stat figcaption { font-size: var(--text-sm); opacity: 0.75; margin-top: var(--space-3); }

.kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(var(--space-12), 7vw, var(--space-24)); border-top: 1px solid var(--line-dark); }
.kpi { padding: var(--space-6) var(--space-4) 0 0; display: flex; flex-direction: column; gap: var(--space-2); }
.kpi + .kpi { padding-left: var(--space-4); border-left: 1px solid var(--line-dark); }
.kpi .num { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); color: var(--white); }
.kpi-label { font-size: var(--text-sm); opacity: 0.82; }
.kpi-src { font-size: var(--text-xs); color: var(--teal); }

/* sections */
.section { padding-block: clamp(var(--space-12), 7vw, var(--space-24)); }
.section.alt, .academic-band { background: var(--grey); }
.section h2, .page-hero h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }
.section h2 { font-size: var(--text-xl); }
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-12); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-8); }
.section-head a { font-size: var(--text-sm); font-weight: 700; color: var(--blue); text-decoration: none; }
.label-h { font-size: var(--text-sm) !important; text-transform: uppercase; letter-spacing: 0.1em; color: var(--slate); margin-bottom: var(--space-6); font-family: var(--font-body) !important; }

.ov-list { display: grid; gap: 0; }
.ov-list li { display: grid; grid-template-columns: 3rem 14rem 1fr; gap: var(--space-4); padding-block: var(--space-6); border-top: 1px solid var(--line); align-items: baseline; }
.ov-list li:last-child { border-bottom: 1px solid var(--line); }
.ov-no { font-family: 'Cabinet Grotesk'; font-weight: 700; color: var(--teal-ink); }
.ov-list h3 { font-size: var(--text-lg); }
.ov-list p { color: var(--slate); }

/* case list */
.case-list { border-top: 1px solid var(--line); }
.case-row a { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) minmax(12rem, 18rem); grid-template-areas: 'no main metric' 'no cta metric'; column-gap: var(--space-6); row-gap: var(--space-3); padding-block: var(--space-8); border-bottom: 1px solid var(--line); text-decoration: none; }
.case-row a:hover { background: var(--grey); }
.case-row a:hover .case-cta { color: var(--blue); }
.case-no { grid-area: no; font-family: 'Cabinet Grotesk'; font-weight: 700; color: var(--slate); padding-top: 4px; }
.case-main { grid-area: main; display: flex; flex-direction: column; gap: var(--space-2); }
.case-company { font-size: var(--text-sm); font-weight: 700; }
.case-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1.25; max-width: 36ch; }
.case-tags { font-size: var(--text-xs); color: var(--slate); }
.case-metric { grid-area: metric; text-align: right; display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-end; }
.case-metric .num { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); color: var(--teal-ink); }
.case-metric-label { font-size: var(--text-xs); color: var(--slate); max-width: 20ch; }
.case-cta { grid-area: cta; font-size: var(--text-sm); font-weight: 700; color: var(--slate); }

/* education */
.edu-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.edu { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.section:not(.alt):not(.academic-band) .edu { background: var(--grey); border-color: transparent; }
.edu-years { font-family: 'Cabinet Grotesk'; font-weight: 800; font-size: var(--text-xl); color: var(--teal-ink); font-variant-numeric: tabular-nums; }
.edu h3 { font-size: var(--text-base); font-weight: 700; }
.edu p { font-size: var(--text-sm); color: var(--slate); }

/* contact */
.contact-band { background: var(--navy); color: var(--white); padding-block: clamp(var(--space-16), 8vw, var(--space-24)); }
.contact-title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); letter-spacing: -0.02em; max-width: 20ch; }
.contact-band p { opacity: 0.82; margin-top: var(--space-4); }

/* page hero */
.page-hero { background: var(--navy); color: var(--white); padding-block: clamp(var(--space-12), 7vw, var(--space-24)); }
.page-hero h1 { font-size: var(--text-2xl); margin-top: var(--space-3); max-width: 24ch; }

/* case page */
.case-hero { background: var(--navy); color: var(--white); padding-block: clamp(var(--space-12), 8vw, var(--space-24)); position: relative; overflow: hidden; }
.case-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-12); align-items: end; }
.case-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); letter-spacing: -0.02em; max-width: 22ch; margin-top: var(--space-4); }
.case-hero-company { margin-top: var(--space-4); font-weight: 700; }
.case-hero-company span { font-weight: 400; opacity: 0.75; }
.glance { padding-bottom: 0; }
.glance-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.glance-grid > div { padding: var(--space-6) var(--space-4) 0 0; }
.glance-grid > div + div { padding-left: var(--space-4); border-left: 1px solid var(--line); }
.glance-grid dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--slate); margin-bottom: var(--space-2); }
.glance-grid dd { font-size: var(--text-sm); font-weight: 500; }
.prose p + p { margin-top: var(--space-4); }
.prose-lg { font-size: var(--text-lg); }
.chapters { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); padding-bottom: clamp(var(--space-12), 7vw, var(--space-24)); }
.chapter { border-top: 2px solid var(--ink); padding-top: var(--space-6); }
.chapter-no { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-ink); }
.chapter h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); margin-block: var(--space-2) var(--space-4); }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-6); }
.gallery img { border-radius: var(--radius-md); width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.gallery figcaption { font-size: var(--text-xs); color: var(--slate); margin-top: var(--space-2); }
.results-band { background: var(--grey); }
.results-band h2 { margin-bottom: var(--space-8); }
.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.result { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); border: 1px solid var(--line); }
.result .num { font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); color: var(--teal-ink); white-space: normal; }
.result span:last-child { font-size: var(--text-sm); color: var(--slate); }
.next-case a { display: flex; flex-direction: column; gap: var(--space-2); padding-block: var(--space-16); text-decoration: none; }
.next-title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); letter-spacing: -0.02em; }
.next-sub { color: var(--slate); }
.next-case .eyebrow { color: var(--teal-ink); }
.next-case a:hover .next-title { color: var(--blue); }

/* academic / about */
.proj-list li { display: grid; grid-template-columns: 6rem 1fr; gap: var(--space-4); padding-block: var(--space-4); border-top: 1px solid var(--line); }
.proj-code { font-family: 'Cabinet Grotesk'; font-weight: 800; color: var(--teal-ink); }
.quote { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; }
.plain li { padding-block: var(--space-3); border-top: 1px solid var(--line); font-size: var(--text-sm); }
.about-list li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-12); padding-block: var(--space-8); border-top: 1px solid var(--line); }
.about-list h2 { font-size: var(--text-lg) !important; }

/* footer */
.site-footer { background: var(--ink); color: oklch(1 0 0 / 0.72); font-size: var(--text-xs); }
.footer-inner { display: flex; flex-wrap: wrap; gap: var(--space-6); justify-content: space-between; padding-block: var(--space-6); }

/* reveal */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* responsive */
@media (max-width: 960px) {
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .kpi, .kpi + .kpi { padding: var(--space-4) var(--space-4) var(--space-4) 0; border-left: 0; border-bottom: 1px solid var(--line-dark); }
  .kpi:nth-child(even) { padding-left: var(--space-4); border-left: 1px solid var(--line-dark); }
  .glance-grid { grid-template-columns: 1fr 1fr; }
  .glance-grid > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .edu-list { grid-template-columns: 1fr; }
  .split, .about-list li { grid-template-columns: 1fr; gap: var(--space-6); }
  .ov-list li { grid-template-columns: 2.5rem 1fr; }
  .ov-list p { grid-column: 2; }
}
@media (max-width: 720px) {
  .header-inner { flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding-block: var(--space-2); }
  .nav { order: 3; width: 100%; margin: 0; justify-content: space-between; gap: var(--space-2); }
  .nav a { padding-block: var(--space-3); }
  .lang { margin-inline-start: auto; }
  .hero-grid, .case-hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .hero-stat { text-align: left; }
  .chapters, .two-col { grid-template-columns: 1fr; }
  .case-row a { grid-template-columns: 2.25rem 1fr; grid-template-areas: 'no main' 'no metric' 'no cta'; }
  .case-metric { text-align: left; align-items: flex-start; }
  .glance-grid { grid-template-columns: 1fr; }
  .glance-grid > div, .glance-grid > div + div { padding: var(--space-4) 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .proj-list li { grid-template-columns: 1fr; gap: var(--space-2); }
}
.kpi, .case-row, .edu, .result, .ov-list li, .about-list li, .proj-list li, .glance-grid > div { max-width: none; }