:root{
  --bg:#f6f6f1;
  --surface:#fbfbf8;
  --text:#171817;
  --muted:#747772;
  --line:#d9dbd5;
  --line-strong:#b8bbb5;
  --accent:#315f52;
  --accent-soft:#e8efeb;
  --shadow:0 18px 50px rgba(20,28,24,.06);
  --max:1120px;
  --reading:760px;
}
html[data-theme="dark"]{
  --bg:#101311;--surface:#151916;--text:#edf1ed;--muted:#9fa7a1;--line:#2a312d;
  --line-strong:#4a534d;--accent:#9bc6b7;--accent-soft:#1c2c26;--shadow:0 20px 60px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  line-height:1.68;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:var(--accent-soft)}
.container{width:min(calc(100% - 48px),var(--max));margin:0 auto}
.reading{width:min(calc(100% - 40px),var(--reading));margin:0 auto}
.lang-en{display:none!important}
html[data-lang="en"] .lang-zh{display:none!important}
html[data-lang="en"] .lang-en{display:revert!important}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(16px);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent);
}
.nav{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-weight:760;letter-spacing:-.025em;font-size:15px}
.brand-mark{display:none}
.nav-links{display:flex;gap:27px;align-items:center}
.nav-links a{font-size:13px;color:var(--muted);transition:color .16s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text)}
.nav-actions{display:flex;align-items:center;gap:7px}
.theme-toggle,.menu-toggle,.lang-toggle{
  border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;transition:border-color .16s,color .16s,background .16s
}
.theme-toggle,.menu-toggle{width:34px;height:34px;border-radius:50%;display:grid;place-items:center}
.lang-toggle{height:34px;min-width:39px;padding:0 9px;border-radius:999px;font-size:11px;font-weight:740}
.theme-toggle:hover,.menu-toggle:hover,.lang-toggle:hover{border-color:var(--line-strong);color:var(--text);background:var(--surface)}
.menu-toggle{display:none}

/* Editorial homepage */
.home-hero{padding:112px 0 102px}
.hero-editorial{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr);gap:82px;align-items:end}
.eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:22px}
.eyebrow .alias{color:color-mix(in srgb,var(--muted) 70%,transparent)}
.hero-intro h1{
  margin:0;font-size:clamp(54px,7.2vw,86px);line-height:1.03;letter-spacing:-.065em;font-weight:760;
}
.hero-intro h1 .soft{color:var(--muted);font-weight:560}
.identity-row{margin-top:28px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:14px}
.identity-row i{font-style:normal;color:var(--line-strong)}
.hero-aside{padding-bottom:5px}
.hero-aside p{margin:0 0 24px;color:var(--muted);font-size:15px;line-height:1.82}
.social-inline{display:flex;gap:18px;flex-wrap:wrap}
.social-inline a{font-size:13px;border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .16s,color .16s}
.social-inline a:hover{border-color:var(--text);color:var(--accent)}

.home-section{padding:92px 0;border-top:1px solid var(--line)}
.section-quiet{background:color-mix(in srgb,var(--surface) 38%,transparent)}
.editorial-heading{display:grid;grid-template-columns:54px 1fr;gap:18px;align-items:start;margin-bottom:38px}
.editorial-heading.compact{margin-bottom:28px}
.section-no{font-size:11px;color:var(--muted);letter-spacing:.12em;padding-top:5px}
.section-label{font-size:11px;text-transform:uppercase;letter-spacing:.14em;font-weight:740;color:var(--accent)}
.editorial-heading h2{margin:7px 0 0;font-size:clamp(30px,3.6vw,44px);line-height:1.12;letter-spacing:-.043em;font-weight:680}

.feature-primary{
  display:grid;grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);gap:64px;
  padding:42px 0 46px;border-top:1.5px solid var(--text);border-bottom:1px solid var(--line);
}
.feature-type{font-size:10px;letter-spacing:.13em;color:var(--muted);font-weight:700}
.feature-primary h3{margin:13px 0 6px;font-size:clamp(42px,5.3vw,64px);line-height:.95;letter-spacing:-.06em}
.feature-tagline{margin:12px 0 0!important;color:var(--text)!important;font-size:16px}
.feature-primary-copy{align-self:end;padding-bottom:2px}
.feature-primary-copy p{margin:0;max-width:55ch;color:var(--muted);font-size:16px}
.feature-link{display:inline-block;margin-top:22px;font-size:13px;border-bottom:1px solid var(--line);padding-bottom:2px}
.feature-primary:hover .feature-link{border-color:var(--text);color:var(--accent)}

.feature-columns{display:grid;grid-template-columns:1fr 1fr}
.feature-item{
  min-height:270px;padding:32px 32px 34px 0;border-bottom:1px solid var(--line);
}
.feature-item + .feature-item{border-left:1px solid var(--line);padding-left:32px;padding-right:0}
.feature-top{display:flex;justify-content:space-between;gap:20px}
.feature-arrow{color:var(--muted);transition:transform .16s}
.feature-item:hover .feature-arrow{transform:translateX(3px);color:var(--accent)}
.feature-item h3{margin:46px 0 10px;font-size:clamp(23px,2.4vw,30px);line-height:1.25;letter-spacing:-.035em}
.feature-item p{margin:0;color:var(--muted);max-width:43ch}
.feature-item small{display:block;margin-top:28px;color:var(--muted);font-size:11px;letter-spacing:.05em}
.minor-project-row{
  display:grid;grid-template-columns:180px 1fr;gap:24px;padding:20px 0 0;color:var(--muted);font-size:13px
}
.minor-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.minor-project-row a:hover{color:var(--text)}

.index-list{border-top:1.5px solid var(--text)}
.index-row{
  display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:18px;align-items:center;
  padding:25px 0;border-bottom:1px solid var(--line);
  transition:padding-left .18s,background .18s;
}
a.index-row:hover{padding-left:8px}
.index-num{font-size:10px;color:var(--muted);letter-spacing:.12em}
.index-main h3{margin:0 0 5px;font-size:20px;letter-spacing:-.025em}
.index-main p{margin:0;color:var(--muted);font-size:13px}
.index-status{font-size:11px;color:var(--accent);white-space:nowrap}
.index-status.muted{color:var(--muted)}
.passive{cursor:default}

.observation-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.65fr);gap:80px;align-items:end}
.observation blockquote{margin:0;font-size:clamp(32px,4.2vw,51px);line-height:1.22;letter-spacing:-.045em;font-weight:570}
.observation blockquote span{color:var(--muted)}
.observation-copy{color:var(--muted);font-size:15px}
.observation-copy p{margin:0 0 22px}
.text-link{font-size:13px;color:var(--text);border-bottom:1px solid var(--line);padding-bottom:2px}
.text-link:hover{border-color:var(--text);color:var(--accent)}

/* Inner page compatibility, simplified editorial */
.page-hero{padding:96px 0 68px}
.page-hero h1{margin:0 0 18px;font-size:clamp(50px,7vw,78px);letter-spacing:-.06em;line-height:1}
.page-hero p{margin:0;color:var(--muted);font-size:18px;max-width:720px}
.page-content{padding:58px 0 108px;border-top:1px solid var(--line)}
.section{padding:80px 0;border-top:1px solid var(--line)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:34px}
.section-title{margin:8px 0 0;font-size:clamp(31px,4vw,46px);letter-spacing:-.045em;line-height:1.08}
.section-link{color:var(--muted);font-size:13px}.section-link:hover{color:var(--text)}
.detail-grid{display:grid;grid-template-columns:190px 1fr;gap:48px;padding:31px 0;border-bottom:1px solid var(--line)}
.detail-label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.12em}
.detail-content h2{margin:0 0 10px;font-size:25px;letter-spacing:-.03em}
.detail-content p{margin-top:0;color:var(--muted)}
.inline-link{border-bottom:1px solid var(--line);padding-bottom:2px}.inline-link:hover{border-color:var(--text)}

.research-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px;border-top:1.5px solid var(--text)}
.research-item{padding:28px 0;border-bottom:1px solid var(--line)}
.research-item .number{color:var(--muted);font-size:10px;letter-spacing:.12em}
.research-item h3{font-size:21px;letter-spacing:-.025em;margin:9px 0}
.research-item p{margin:0;color:var(--muted);font-size:14px}

.pub-card{
  border-top:1.5px solid var(--text);border-bottom:1px solid var(--line);
  padding:34px 0;display:grid;grid-template-columns:155px 1fr;gap:42px;background:transparent;
}
.pub-meta{color:var(--muted);font-size:12px;line-height:1.8}
.pub-meta strong{color:var(--accent);display:block;text-transform:uppercase;letter-spacing:.12em;font-size:10px;margin-bottom:8px}
.pub-body h3{margin:0;font-size:clamp(23px,3vw,32px);line-height:1.22;letter-spacing:-.035em}
.pub-body p{color:var(--muted);margin:14px 0 0}
.pub-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}

.platform-feature{
  display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;
  border-top:1.5px solid var(--text);border-bottom:1px solid var(--line);padding:30px 0
}
.platform-feature h3{margin:6px 0 8px;font-size:27px;letter-spacing:-.03em}
.platform-feature p{margin:0;color:var(--muted);max-width:68ch}
.platform-mark{width:72px;height:72px;border-radius:18px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-weight:850;font-size:19px}
.social-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:22px;border-top:1px solid var(--line)}
.social-card{border-bottom:1px solid var(--line);padding:18px 16px 18px 0;background:transparent}
.social-card + .social-card{padding-left:16px;border-left:1px solid var(--line)}
.social-card strong{display:block;font-size:15px;margin-bottom:3px}
.social-card span{color:var(--muted);font-size:12px}
.identity-line{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.identity-pill,.tag{border:1px solid var(--line);padding:4px 9px;border-radius:999px;font-size:11px;color:var(--muted)}
.note{padding:16px 18px;border-left:2px solid var(--accent);background:color-mix(in srgb,var(--surface) 60%,transparent);color:var(--muted);font-size:13px}

/* Old project page compatibility */
.project-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.project-card{border-top:1.5px solid var(--text);border-bottom:1px solid var(--line);background:transparent;overflow:hidden}
.project-card.large{grid-column:span 12;display:grid;grid-template-columns:1fr 1fr;min-height:370px}
.project-card.small{grid-column:span 6}
.project-visual{min-height:220px;position:relative;overflow:hidden;background:var(--accent-soft)}
.project-card.large .project-visual{min-height:100%}
.project-copy{padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:30px}
.project-kicker{color:var(--accent);font-size:10px;font-weight:740;letter-spacing:.12em;text-transform:uppercase}
.project-copy h3{margin:9px 0;font-size:27px;letter-spacing:-.035em}
.project-copy p{margin:0;color:var(--muted);max-width:48ch}
.project-meta{display:flex;gap:8px;flex-wrap:wrap}
.visual-useful{background:var(--surface);display:flex;align-items:flex-end;padding:28px}
.useful-visual-inner{width:100%;min-width:0}
.useful-caption{position:absolute;left:28px;top:24px;color:var(--muted);font-size:10px;letter-spacing:.1em}
.useful-wordmark{display:flex;flex-direction:column;font-weight:820;letter-spacing:-.07em;line-height:.76;color:var(--text);font-size:clamp(48px,6vw,82px)}
.useful-wordmark span:last-child{margin-left:8%}
.useful-cn{margin-top:18px;color:var(--muted);font-size:11px}
.visual-lab{background:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px),var(--accent-soft);background-size:34px 34px}
.visual-lab::before{content:"stock / scan / trace";position:absolute;left:24px;bottom:22px;color:var(--muted);font-size:11px;letter-spacing:.1em}
.paper-card .project-visual{background:linear-gradient(135deg,var(--accent-soft),var(--surface))}
.paper-lines{position:absolute;inset:24px;display:grid;align-content:center;gap:11px}
.paper-lines::before{content:"CAFM";font-size:48px;font-weight:800;letter-spacing:-.06em;color:var(--accent);margin-bottom:16px}
.paper-lines i{height:1px;background:color-mix(in srgb,var(--accent) 28%,transparent)}
.paper-lines i:nth-child(2){width:78%}.paper-lines i:nth-child(3){width:88%}.paper-lines i:nth-child(4){width:60%}

/* Footer */
.footer{padding:32px 0 45px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
.footer-inner{display:flex;justify-content:space-between;gap:20px}
.footer-links{display:flex;gap:18px}.footer a:hover{color:var(--text)}

/* Link-in-bio page classes inherited from inline styles */

@media(max-width:900px){
  .hero-editorial,.observation-grid{grid-template-columns:1fr;gap:38px}
  .hero-aside{max-width:620px}
  .research-grid{grid-template-columns:1fr}
}
@media(max-width:820px){
  .nav-links{
    display:none;position:absolute;top:64px;left:20px;right:20px;background:var(--surface);
    border:1px solid var(--line);padding:13px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch;gap:3px
  }
  .nav-links.open{display:flex}.nav-links a{padding:10px 11px}
  .menu-toggle{display:grid}
  .feature-primary{grid-template-columns:1fr;gap:25px}
  .feature-primary-copy{max-width:650px}
  .feature-columns{grid-template-columns:1fr}
  .feature-item + .feature-item{border-left:0;padding-left:0}
  .minor-project-row{grid-template-columns:1fr;gap:6px}
  .index-row{grid-template-columns:42px 1fr;gap:13px}
  .index-status{grid-column:2}
  .pub-card,.detail-grid{grid-template-columns:1fr;gap:14px}
  .platform-feature{grid-template-columns:1fr}
  .social-grid{grid-template-columns:1fr}
  .social-card + .social-card{padding-left:0;border-left:0}
  .project-card.large{display:block}.project-card.small{grid-column:span 12}
}
@media(max-width:560px){
  .container,.reading{width:min(calc(100% - 30px),var(--max))}
  .home-hero{padding:82px 0 70px}
  .hero-intro h1{font-size:clamp(45px,13.7vw,61px)}
  .hero-editorial{gap:32px}
  .home-section{padding:68px 0}
  .editorial-heading{grid-template-columns:38px 1fr;gap:10px;margin-bottom:28px}
  .feature-primary{padding:31px 0 35px}
  .feature-primary h3{font-size:45px}
  .feature-columns{display:block}
  .feature-item{min-height:auto;padding:26px 0}
  .feature-item h3{margin-top:30px}
  .index-row{padding:22px 0}
  .index-main p{font-size:12.5px}
  .observation-grid{gap:32px}
  .footer-inner{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}


/* -------------------------------------------------------
   v8 — real-device mobile refinement
   Based on actual phone screenshots, not desktop scaling.
-------------------------------------------------------- */
@media (max-width: 560px) {
  /* Header: lighter, quieter, less like an app toolbar */
  .nav {
    min-height: 56px;
    gap: 10px;
  }

  .brand .lang-zh,
  .brand .lang-en {
    display: none !important;
  }

  .brand-mark {
    display: inline-block;
    font-size: 13px;
    line-height: 1;
    letter-spacing: .09em;
    font-weight: 820;
  }

  .nav-actions {
    gap: 2px;
  }

  .theme-toggle,
  .menu-toggle,
  .lang-toggle {
    border: 0;
    background: transparent;
    color: var(--muted);
    box-shadow: none;
  }

  .theme-toggle,
  .menu-toggle {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 18px;
  }

  .lang-toggle {
    height: 40px;
    min-width: 42px;
    padding: 0 7px;
    font-size: 11px;
  }

  /* Compact popover menu instead of a large full-width panel */
  .nav-links {
    top: 56px;
    left: auto;
    right: 15px;
    width: min(210px, calc(100vw - 30px));
    padding: 7px;
    gap: 0;
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    box-shadow: 0 14px 40px rgba(20,28,24,.11);
  }

  .nav-links a {
    padding: 12px 13px;
    line-height: 1.2;
    font-size: 14px;
    border-radius: 9px;
  }

  .nav-links a + a {
    border-top: 1px solid var(--line);
    border-radius: 0;
  }

  /* Hero: less empty space and a deliberate two-line slogan */
  .home-hero {
    padding: 50px 0 58px;
  }

  .hero-editorial {
    gap: 27px;
  }

  .eyebrow {
    margin-bottom: 18px;
    font-size: 10px;
    letter-spacing: .105em;
  }

  .hero-intro h1 {
    font-size: clamp(39px, 10.6vw, 43px);
    line-height: 1.075;
    letter-spacing: -.048em;
  }

  .identity-row {
    margin-top: 24px;
    gap: 8px;
    font-size: 13px;
  }

  .hero-aside p {
    margin-bottom: 19px;
    max-width: 31em;
    font-size: 14px;
    line-height: 1.75;
  }

  .social-inline {
    gap: 15px;
  }

  .social-inline a {
    font-size: 13px;
  }

  /* Slightly calmer spacing after the first screen */
  .home-section {
    padding: 60px 0;
  }

  .editorial-heading {
    margin-bottom: 24px;
  }

  .feature-primary h3 {
    font-size: 41px;
  }
}


/* -------------------------------------------------------
   v9 — unified editorial hierarchy
   Desktop + mobile audited together.
-------------------------------------------------------- */

/* One identity in the header, one identity in the hero. */
.brand {
  display: inline-flex;
  align-items: center;
  min-width: 54px;
}
.brand-mark {
  display: inline-block !important;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .085em;
  font-weight: 820;
  color: var(--text);
}

/* Slightly tighter desktop header */
.nav {
  min-height: 60px;
}

/* Hero: reduce dead space without making it cramped */
.home-hero {
  padding: 84px 0 76px;
}
.hero-editorial {
  gap: 68px;
}
.hero-intro h1 {
  max-width: 820px;
}
.hero-aside p {
  max-width: 29em;
}

/* Section rhythm: editorial, not presentation-deck spacing */
.home-section {
  padding: 68px 0;
}

/* Simple chapter marker: no second oversized heading */
.editorial-heading-simple {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 24px;
}
.editorial-heading-simple .section-no {
  padding-top: 0;
  min-width: 24px;
}
.editorial-heading-simple .section-label {
  font-size: 12px;
  letter-spacing: .12em;
}

/* Tighten major featured project block now that chapter title is smaller */
.feature-primary {
  padding: 34px 0 38px;
}
.feature-primary h3 {
  margin-top: 11px;
}

/* Writing list becomes the visual content, not the section heading */
.index-list {
  margin-top: 2px;
}

/* Observation section no longer needs large air above */
.observation .editorial-heading {
  margin-bottom: 22px;
}

/* Inner pages: same HCL. header identity */
.page-hero {
  padding-top: 82px;
}

/* Prevent Chinese line breaks that leave isolated final characters where possible */
.section-label,
.feature-primary-title h3,
.feature-item h3,
.index-main h3 {
  word-break: keep-all;
  overflow-wrap: normal;
}

/* Tablet */
@media (max-width: 900px) {
  .home-hero {
    padding: 66px 0 62px;
  }
  .hero-editorial {
    gap: 34px;
  }
  .home-section {
    padding: 58px 0;
  }
}

/* Real phone */
@media (max-width: 560px) {
  .nav {
    min-height: 54px;
  }

  .brand {
    min-width: 46px;
  }

  .brand-mark {
    font-size: 12px;
    letter-spacing: .075em;
  }

  .nav-links {
    top: 54px;
  }

  .home-hero {
    padding: 42px 0 48px;
  }

  .hero-editorial {
    gap: 24px;
  }

  .eyebrow {
    margin-bottom: 15px;
  }

  .hero-intro h1 {
    font-size: clamp(38px, 10.1vw, 42px);
    line-height: 1.08;
  }

  .identity-row {
    margin-top: 21px;
  }

  .hero-aside p {
    line-height: 1.68;
    margin-bottom: 17px;
  }

  .home-section {
    padding: 48px 0;
  }

  .editorial-heading-simple {
    gap: 11px;
    margin-bottom: 20px;
  }

  .editorial-heading-simple .section-no {
    min-width: 20px;
    font-size: 10px;
  }

  .editorial-heading-simple .section-label {
    font-size: 11px;
  }

  .feature-primary {
    padding: 28px 0 31px;
  }

  .feature-primary h3 {
    font-size: 39px;
  }

  .feature-columns {
    margin-top: 0;
  }

  .index-row {
    padding: 20px 0;
  }

  .observation blockquote {
    font-size: clamp(30px, 8.1vw, 37px);
  }

  .page-hero {
    padding: 66px 0 48px;
  }
}


/* =======================================================
   v10 — cohesive editorial refinement
   ======================================================= */

/* Header: one quiet wordmark everywhere */
.site-header {
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}
.nav {
  min-height: 58px;
}
.brand {
  min-width: 48px;
}
.brand-mark {
  display: inline-block !important;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .11em;
  color: var(--text);
}
.nav-links {
  gap: 25px;
}
.nav-links a {
  font-size: 12px;
}
.theme-toggle,
.lang-toggle {
  opacity: .9;
}

/* Inner pages: much less presentation-style whitespace */
.page-hero {
  padding: 54px 0 42px !important;
}
.page-hero .eyebrow {
  margin-bottom: 14px;
}
.page-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(44px, 5.2vw, 64px);
  line-height: 1;
  letter-spacing: -.052em;
}
.page-hero p {
  max-width: 680px;
  font-size: 16px;
  line-height: 1.72;
}
.page-content {
  padding: 42px 0 84px;
}

/* New compact inner hero used by Projects */
.inner-hero {
  padding: 52px 0 42px;
  border-bottom: 1px solid var(--line);
}
.inner-hero-grid {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}
.inner-kicker {
  padding-top: 9px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .15em;
}
.inner-hero h1 {
  margin: 0 0 13px;
  font-size: clamp(46px, 5vw, 62px);
  line-height: 1;
  letter-spacing: -.052em;
}
.inner-hero p {
  margin: 0;
  max-width: 650px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}

/* Projects: text first, dense enough to scan, enough room to breathe */
.index-section {
  padding: 18px 0 82px;
}
.work-list {
  border-top: 1px solid var(--text);
}
.work-row {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr) 210px;
  gap: 34px;
  align-items: start;
  padding: 32px 0 34px;
  border-bottom: 1px solid var(--line);
  transition: padding-left .18s ease, background .18s ease;
}
.work-row:hover {
  padding-left: 6px;
}
.work-meta {
  display: grid;
  gap: 8px;
  padding-top: 5px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.work-meta span:first-child {
  color: var(--text);
  font-weight: 760;
}
.work-title-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}
.work-main h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1;
  letter-spacing: -.045em;
}
.work-arrow {
  color: var(--muted);
  font-size: 16px;
  transition: transform .18s ease, color .18s ease;
}
.work-row:hover .work-arrow {
  color: var(--accent);
  transform: translate(2px,-2px);
}
.work-subtitle {
  margin: 11px 0 12px;
  color: var(--text);
  font-size: 15px;
}
.work-description {
  margin: 0;
  max-width: 58ch;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.72;
}
.work-side {
  min-width: 0;
}
.work-domain {
  display: block;
  margin-bottom: 26px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .06em;
  text-align: right;
}
.mini-wordmark {
  display: inline-flex;
  flex-direction: column;
  float: right;
  max-width: 100%;
  color: var(--text);
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 820;
  line-height: .74;
  letter-spacing: -.07em;
}
.mini-wordmark span:last-child {
  margin-left: 14%;
}
.work-side-text {
  padding-top: 7px;
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}
.project-note {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  gap: 34px;
  padding: 28px 0 0;
}
.project-note-label {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.project-note p {
  margin: 0;
  max-width: 700px;
  color: var(--muted);
  font-size: 13px;
}
.project-note a {
  color: var(--text);
  border-bottom: 1px solid var(--line);
}
.project-note a:hover {
  border-color: var(--text);
}

/* Research and other interior content: reduce giant spacing */
.research-grid {
  border-top: 1px solid var(--text);
}
.research-item {
  padding: 24px 0;
}
.pub-card {
  padding: 28px 0;
}
.detail-grid {
  padding: 26px 0;
}
.platform-feature {
  padding: 26px 0;
}

/* Homepage stays distinctive, but trims excessive air */
.home-hero {
  padding: 72px 0 66px;
}
.home-section {
  padding: 58px 0;
}
.feature-primary {
  padding: 30px 0 34px;
}
.feature-columns .feature-item {
  min-height: 235px;
}

/* Better Chinese heading wrapping */
h1, h2, h3 {
  text-wrap: balance;
}
.lang-zh {
  line-break: strict;
}

/* Tablet */
@media (max-width: 900px) {
  .inner-hero-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .inner-kicker {
    padding-top: 0;
  }
  .work-row {
    grid-template-columns: 110px minmax(0, 1fr);
  }
  .work-side {
    grid-column: 2;
  }
  .work-domain,
  .work-side-text {
    text-align: left;
  }
  .mini-wordmark {
    float: none;
    margin-top: 8px;
  }
  .project-note {
    grid-template-columns: 110px minmax(0, 1fr);
  }
}

/* Phone */
@media (max-width: 560px) {
  .nav {
    min-height: 52px;
  }
  .brand {
    min-width: 42px;
  }
  .brand-mark {
    font-size: 11px;
    letter-spacing: .1em;
  }
  .nav-links {
    top: 52px;
  }

  .home-hero {
    padding: 38px 0 44px;
  }
  .home-section {
    padding: 44px 0;
  }

  .page-hero {
    padding: 36px 0 30px !important;
  }
  .page-hero h1 {
    font-size: 42px;
  }
  .page-hero p {
    font-size: 14px;
  }
  .page-content {
    padding: 30px 0 64px;
  }

  .inner-hero {
    padding: 35px 0 29px;
  }
  .inner-hero-grid {
    gap: 6px;
  }
  .inner-kicker {
    font-size: 9px;
  }
  .inner-hero h1 {
    margin-bottom: 10px;
    font-size: 42px;
  }
  .inner-hero p {
    font-size: 14px;
    line-height: 1.65;
  }

  .index-section {
    padding: 10px 0 58px;
  }
  .work-row {
    display: block;
    padding: 24px 0 26px;
  }
  .work-row:hover {
    padding-left: 0;
  }
  .work-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 12px;
    margin-bottom: 22px;
  }
  .work-main h2 {
    font-size: 34px;
  }
  .work-subtitle {
    margin: 9px 0 10px;
    font-size: 14px;
  }
  .work-description {
    font-size: 13px;
    line-height: 1.68;
  }
  .work-side {
    margin-top: 20px;
  }
  .work-domain {
    margin: 0 0 14px;
    text-align: left;
  }
  .mini-wordmark {
    margin-top: 0;
    font-size: 36px;
  }
  .work-side-text {
    padding-top: 0;
    text-align: left;
  }
  .project-note {
    display: block;
    padding-top: 22px;
  }
  .project-note-label {
    display: block;
    margin-bottom: 10px;
  }
  .project-note p {
    font-size: 12.5px;
    line-height: 1.7;
  }

  .feature-columns .feature-item {
    min-height: auto;
  }
}


/* =======================================================
   v11 — title/favicon/arrow polish
   ======================================================= */

/* Arrow system:
   →  internal navigation
   ↗  external destination
*/
.feature-arrow,
.work-arrow,
.feature-link,
.social-inline a,
.minor-project-row a {
  font-variant-numeric: tabular-nums;
}

.feature-arrow,
.work-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  line-height: 1;
  font-size: 15px;
  color: var(--muted);
  transform: translateY(-1px);
  transition: transform .16s ease, color .16s ease;
}

.feature-item:hover .internal-arrow {
  transform: translate(3px,-1px);
  color: var(--accent);
}

.feature-item:hover .external-arrow,
.work-row:hover .external-arrow {
  transform: translate(2px,-3px);
  color: var(--accent);
}

/* Keep external-link arrows visually consistent in text links */
.social-inline a,
.feature-link,
.minor-project-row a,
.work-domain {
  white-space: nowrap;
}

/* Slightly more compact mobile arrow alignment */
@media (max-width: 560px) {
  .feature-arrow,
  .work-arrow {
    font-size: 14px;
  }
}


/* =======================================================
   v12 — unified page frame
   Same header + same inner hero geometry on every section.
   ======================================================= */

/* Header */
.nav {
  min-height: 64px;
}

/* HCL stays visually restrained, but the actual hit target is large. */
.brand {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 52px;
  min-height: 44px;
  padding: 0 10px;
  margin-left: -10px;
  border-radius: 10px;
  transition: background .16s ease, color .16s ease;
}
.brand:hover {
  background: var(--surface);
}
.brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.brand-mark {
  display: inline-block !important;
  font-size: 14px;
  line-height: 1;
  font-weight: 820;
  letter-spacing: .105em;
}

/* Utility controls also remain comfortably tappable. */
.theme-toggle,
.menu-toggle,
.lang-toggle {
  min-height: 40px;
}
.theme-toggle,
.menu-toggle {
  width: 40px;
}

/* Every interior page uses exactly this geometry. */
.inner-hero {
  padding: 54px 0 44px;
  border-bottom: 1px solid var(--line);
}
.inner-hero-grid {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}
.inner-kicker {
  padding-top: 9px;
  color: var(--accent);
  font-size: 10px;
  line-height: 1.4;
  font-weight: 760;
  letter-spacing: .145em;
  text-transform: uppercase;
}
.inner-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(46px, 5vw, 62px);
  line-height: 1;
  letter-spacing: -.052em;
}
.inner-hero p {
  margin: 0;
  max-width: 680px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}

/* Remove the old second border/vertical offset from inner page bodies. */
.page-content {
  padding: 42px 0 84px;
  border-top: 0 !important;
}
.index-section {
  padding-top: 18px;
}

/* Research content now starts at exactly the same page width as Projects. */
.research-grid,
.pub-card,
.detail-grid,
.platform-feature {
  width: 100%;
}

/* Active navigation should not change metrics and make the header jump. */
.nav-links a,
.nav-links a[aria-current="page"] {
  font-weight: 500;
}
.nav-links a[aria-current="page"] {
  color: var(--text);
}
.nav-links a[aria-current="page"]::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 3px;
  background: currentColor;
  opacity: .45;
}

/* Tablet */
@media (max-width: 900px) {
  .inner-hero-grid {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .inner-kicker {
    padding-top: 0;
  }
}

/* Phone */
@media (max-width: 560px) {
  .nav {
    min-height: 58px;
  }

  .brand {
    min-width: 50px;
    min-height: 44px;
    margin-left: -8px;
    padding: 0 8px;
  }

  .brand-mark {
    font-size: 14px;
  }

  .nav-links {
    top: 58px;
  }

  .inner-hero {
    padding: 36px 0 30px;
  }

  .inner-hero-grid {
    gap: 6px;
  }

  .inner-kicker {
    font-size: 9px;
  }

  .inner-hero h1 {
    margin-bottom: 11px;
    font-size: 42px;
  }

  .inner-hero p {
    max-width: none;
    font-size: 14px;
    line-height: 1.65;
  }

  .page-content {
    padding: 30px 0 64px;
  }
}


/* =======================================================
   v13 — unified body grid
   Hero and body now share the same 160px + 34px frame.
   ======================================================= */

:root {
  --rail: 160px;
  --frame-gap: 34px;
}

/* Common body geometry for Projects / Research / Notes / About */
.body-frame {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--frame-gap);
  align-items: start;
}
.body-rail {
  min-width: 0;
}
.body-main {
  min-width: 0;
}
.rail-label {
  display: inline-block;
  padding-top: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Keep interior content aligned with the hero main column */
.page-content,
.index-section {
  padding-top: 34px;
}
.page-content .research-grid,
.page-content .platform-feature,
.page-content .pub-card,
.page-content .detail-grid,
.index-section .work-list {
  margin-top: 0;
}

/* Research content can still be 3 columns, but only inside the shared main column */
.body-main .research-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 28px;
}

/* Publication heading now aligns with body main column instead of full container left */
.body-main .section-head {
  margin-top: 46px;
}

/* Writing: internal rows should not introduce a second big 190px rail */
.detail-grid-inner {
  grid-template-columns: 135px minmax(0, 1fr);
  gap: 28px;
}
.detail-grid-inner .detail-label {
  padding-top: 4px;
}

/* About */
.about-lead {
  margin: 0 0 22px;
  font-size: 23px;
  line-height: 1.55;
  letter-spacing: -.02em;
}
.elsewhere-note {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
}

/* About page previously used reading width; body-main now controls width */
.body-main > p {
  max-width: 760px;
}
.body-main .identity-line {
  max-width: 760px;
}

/* Projects: the row itself no longer needs another huge left metadata rail;
   keep metadata compact but preserve hierarchy. */
.body-main .work-row {
  grid-template-columns: 120px minmax(0, 1fr) 190px;
  gap: 28px;
}
.body-main .project-note {
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 28px;
}

/* Contact email */
a[href^="mailto:"] {
  font-weight: 600;
}

/* Tablet: collapse common rail cleanly */
@media (max-width: 900px) {
  :root {
    --rail: 1fr;
    --frame-gap: 0px;
  }

  .body-frame {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .body-rail {
    display: none;
  }

  .body-main .research-grid {
    grid-template-columns: 1fr;
  }

  .body-main .work-row {
    grid-template-columns: 110px minmax(0, 1fr);
  }

  .body-main .project-note {
    grid-template-columns: 110px minmax(0, 1fr);
  }
}

/* Phone */
@media (max-width: 560px) {
  .page-content,
  .index-section {
    padding-top: 24px;
  }

  .detail-grid-inner {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .about-lead {
    font-size: 20px;
    line-height: 1.5;
  }

  .body-main .work-row {
    display: block;
  }

  .body-main .project-note {
    display: block;
  }
}


/* =======================================================
   v14 — single-rail editorial structure
   One rail only. No nested indentation.
   ======================================================= */

:root{
  --page-rail:128px;
  --page-gap:28px;
}

/* Hero and every top-level content row share the exact same grid. */
.page-grid{
  display:grid;
  grid-template-columns:var(--page-rail) minmax(0,1fr);
  gap:var(--page-gap);
  align-items:start;
}
.page-rail{min-width:0}
.page-main{min-width:0}

.inner-hero{
  padding:52px 0 42px;
}
.inner-hero-grid{display:none!important}
.inner-hero .inner-kicker{
  padding-top:8px;
}
.inner-hero h1{
  margin:0 0 13px;
  font-size:clamp(46px,5vw,62px);
  line-height:1;
  letter-spacing:-.052em;
}
.inner-hero p{
  margin:0;
  max-width:690px;
  color:var(--muted);
  font-size:15px;
  line-height:1.72;
}

.content-section{
  padding:28px 0 78px;
}
.section-row{
  padding:28px 0 32px;
  border-bottom:1px solid var(--line);
}
.section-row:first-child{
  border-top:1px solid var(--text);
}
.rail-label{
  display:inline-block;
  padding-top:4px;
  color:var(--muted);
  font-size:10px;
  line-height:1.4;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.content-heading{
  margin:0 0 10px;
  font-size:clamp(24px,2.5vw,31px);
  line-height:1.18;
  letter-spacing:-.035em;
}
.content-copy{
  margin:0 0 14px;
  max-width:720px;
  color:var(--muted);
  font-size:14px;
  line-height:1.75;
}
.section-heading-small{
  margin:0 0 22px;
  color:var(--accent);
  font-size:11px;
  font-weight:760;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* Projects: metadata rail is the one and only rail. */
.work-list{
  border-top:1px solid var(--text);
}
.work-row{
  display:grid;
  grid-template-columns:var(--page-rail) minmax(0,1fr) 180px;
  gap:var(--page-gap);
  align-items:start;
  padding:30px 0 32px;
  border-bottom:1px solid var(--line);
}
.work-row:hover{padding-left:0}
.work-meta{
  display:grid;
  gap:7px;
  padding-top:4px;
  color:var(--muted);
  font-size:10px;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.work-index{
  color:var(--text)!important;
  font-weight:760;
}
.work-main h2{
  margin:0;
  font-size:clamp(30px,3vw,38px);
}
.work-side{
  padding-top:3px;
}
.work-domain{
  text-align:right;
}
.mini-wordmark{
  margin-top:24px;
  font-size:42px;
}
.content-note{
  padding:24px 0 0;
}
.content-note p{
  margin:0;
  max-width:760px;
  color:var(--muted);
  font-size:13px;
}

/* Research */
.research-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
  border-top:0;
}
.research-item{
  padding:0 0 20px;
  border-bottom:1px solid var(--line);
}
.research-item h3{
  margin:8px 0 8px;
}
.publication-simple{
  display:block;
  padding:0;
}
.publication-meta{
  margin-bottom:13px;
  color:var(--accent);
  font-size:11px;
  letter-spacing:.05em;
}
.publication-simple h2{
  margin:0 0 15px;
  max-width:900px;
  font-size:clamp(26px,3vw,36px);
  line-height:1.22;
  letter-spacing:-.035em;
}
.publication-simple p{
  margin:0 0 18px;
  max-width:820px;
  color:var(--muted);
  font-size:14px;
  line-height:1.75;
}

/* Writing */
.content-feature{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:28px;
  align-items:start;
}
.content-feature h2{
  margin:7px 0 10px;
  font-size:30px;
  letter-spacing:-.035em;
}
.content-feature p{
  margin:0;
  max-width:720px;
  color:var(--muted);
}
.content-kicker{
  color:var(--accent);
  font-size:10px;
  font-weight:760;
  letter-spacing:.12em;
}
.external-mark{
  color:var(--muted);
  font-size:18px;
}
.social-list{
  border-top:1px solid var(--line);
}
.social-list a{
  display:grid;
  grid-template-columns:130px minmax(0,1fr) auto;
  gap:20px;
  align-items:center;
  padding:15px 0;
  border-bottom:1px solid var(--line);
}
.social-list strong{font-size:14px}
.social-list span{color:var(--muted);font-size:13px}
.social-list em{font-style:normal;color:var(--muted)}
.social-list a:hover em{color:var(--accent)}

/* About */
.about-intro-row{
  padding-top:32px;
}
.about-lead{
  margin:0 0 19px;
  max-width:760px;
  font-size:23px;
  line-height:1.55;
  letter-spacing:-.02em;
}
.contact-email{
  display:inline-block;
  font-size:18px;
  font-weight:650;
  border-bottom:1px solid var(--line);
}
.contact-email:hover{border-color:var(--text)}

/* Old nested-grid rules must not interfere with v14 pages. */
.body-frame,
.body-main .work-row,
.body-main .project-note,
.detail-grid-inner{
  all:unset;
}

/* Tablet/mobile */
@media(max-width:900px){
  :root{
    --page-rail:104px;
    --page-gap:22px;
  }
  .research-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
}
@media(max-width:560px){
  :root{
    --page-rail:1fr;
    --page-gap:0px;
  }
  .page-grid{
    grid-template-columns:1fr;
    gap:7px;
  }
  .page-rail:empty{display:none}
  .inner-hero{
    padding:34px 0 28px;
  }
  .inner-hero .inner-kicker{
    padding-top:0;
  }
  .inner-hero h1{
    font-size:42px;
  }
  .content-section{
    padding:18px 0 56px;
  }
  .section-row{
    padding:22px 0 25px;
  }
  .rail-label{
    margin-bottom:4px;
  }
  .work-row{
    display:block;
    padding:24px 0 26px;
  }
  .work-meta{
    display:flex;
    flex-wrap:wrap;
    gap:7px 12px;
    margin-bottom:18px;
  }
  .work-side{
    margin-top:18px;
  }
  .work-domain{text-align:left}
  .mini-wordmark{
    margin-top:12px;
    font-size:35px;
    float:none;
  }
  .research-grid{display:block}
  .research-item{padding:0 0 20px;margin-bottom:20px}
  .content-feature{grid-template-columns:1fr auto}
  .social-list a{
    grid-template-columns:86px minmax(0,1fr) auto;
    gap:10px;
  }
  .about-lead{font-size:20px}
}


/* =======================================================
   v15 — mobile navigation + touch feedback
   ======================================================= */

/* Remove browser tap flash, while retaining keyboard focus indicators. */
a,
button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Desktop keeps its simple underline active state. */
@media (min-width: 821px) {
  .nav-links a[aria-current="page"]::after {
    display: block;
  }
}

/* Mobile navigation is a single logical group:
   no divider line between each item. */
@media (max-width: 820px) {
  .menu-toggle,
  .lang-toggle,
  .theme-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  .menu-toggle {
    font-size: 22px;
    line-height: 1;
  }

  .nav-links {
    top: 62px;
    right: 16px;
    left: auto;
    width: 184px;
    padding: 8px;
    gap: 2px;
    border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 98%, transparent);
    box-shadow:
      0 18px 46px rgba(20, 28, 24, .10),
      0 2px 8px rgba(20, 28, 24, .04);
    backdrop-filter: blur(18px);
  }

  .nav-links a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 0 14px;
    border: 0 !important;
    border-radius: 10px !important;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.2;
    transition:
      background .14s ease,
      color .14s ease,
      transform .14s ease;
  }

  /* Explicitly remove old separators and desktop underline. */
  .nav-links a + a {
    border-top: 0 !important;
  }

  .nav-links a[aria-current="page"]::after {
    display: none !important;
  }

  .nav-links a[aria-current="page"] {
    background: var(--accent-soft);
    color: var(--text);
  }

  .nav-links a:active {
    background: color-mix(in srgb, var(--accent-soft) 80%, var(--surface));
    transform: scale(.985);
  }

  /* Very light scrim: separates menu from content without feeling modal. */
  body.menu-open::before {
    content: "";
    position: fixed;
    inset: 62px 0 0;
    z-index: 38;
    background: color-mix(in srgb, var(--text) 4%, transparent);
    pointer-events: none;
  }

  .site-header {
    z-index: 50;
  }

  .nav-links {
    z-index: 60;
  }
}

@media (max-width: 560px) {
  .nav-links {
    top: 58px;
    right: 14px;
    width: 176px;
    padding: 7px;
    border-radius: 15px;
  }

  .nav-links a {
    min-height: 46px;
    padding: 0 13px;
  }

  body.menu-open::before {
    inset: 58px 0 0;
  }
}

/* Avoid accidental text-like selection effects on compact controls only. */
.menu-toggle,
.lang-toggle,
.theme-toggle,
.brand {
  user-select: none;
}