/* Myrias — static site stylesheet.
   Design tokens carried over from the original compiled app (HSL). */
:root {
  --background: hsl(40 33% 96%);
  --foreground: hsl(160 25% 14%);
  --card: hsl(40 25% 93%);
  --primary: hsl(160 35% 22%);
  --primary-foreground: hsl(40 33% 96%);
  --secondary: hsl(35 30% 88%);
  --muted: hsl(40 20% 90%);
  --muted-foreground: hsl(160 10% 45%);
  --accent: hsl(35 60% 60%);
  --border: hsl(40 20% 85%);
  /* two-tone headlines: the lead-in sits in a quieter ink, the <em> phrase lands in full ink */
  --ink-quiet: hsl(160 12% 46%);
  --ink-quiet-on-green: hsl(40 33% 96% / .56);
  --serif: 'Instrument Serif', 'Iowan Old Style', 'Charter', 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 1.1rem 1.5rem;
  transition: background .3s ease, box-shadow .3s ease;
}
.site-header.scrolled,
.site-header.solid {
  background: color-mix(in srgb, var(--background) 92%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--border);
}
.header-inner {
  max-width: 72rem; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.brand-link { display: inline-flex; align-items: center; text-decoration: none; }
.brand-link svg { height: 2rem; width: auto; }
.site-header.light:not(.scrolled) { color: var(--primary-foreground); }
.site-header.light:not(.scrolled) .nav a { color: hsl(40 33% 96% / .85); }
.site-header.light:not(.scrolled) .nav a:hover { color: hsl(40 33% 96%); }
.nav { display: flex; gap: 2rem; }
.nav a {
  font-family: var(--sans);
  font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; color: var(--foreground);
  transition: color .2s ease;
}
.nav a:hover, .nav a.active { color: var(--accent); }

/* mobile nav (hamburger + dropdown panel; desktop >820px keeps inline nav) */
.nav-toggle {
  display: none; position: relative; z-index: 2;
  width: 2.5rem; height: 2.5rem; padding: 0;
  background: transparent; border: 0; cursor: pointer;
  color: var(--foreground);
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.nav-toggle .bar {
  display: block; width: 1.35rem; height: 2px; border-radius: 1px;
  background: currentColor; transition: transform .25s ease, opacity .2s ease;
}
.site-header.nav-open .nav-toggle .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.site-header.nav-open .nav-toggle .bar:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; gap: 0;
    background: var(--background);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 16px 32px hsl(160 25% 14% / .1);
    padding: .4rem 1.5rem 1rem;
  }
  .site-header.nav-open .nav { display: flex; }
  .nav a {
    font-size: .82rem; letter-spacing: .16em;
    padding: .95rem 0;
    border-bottom: 1px solid var(--border);
  }
  .nav a:last-child { border-bottom: 0; }
  .nav a.active { border-bottom-color: var(--accent); }
  .site-header.nav-open {
    background: var(--background);
    box-shadow: 0 1px 0 var(--border);
  }
}

/* ---------- type ---------- */
.kicker {
  font-size: .8rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--primary); font-weight: 500; margin-bottom: 1.5rem;
}
.kicker::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 1.5rem; height: 2px; border-radius: 1px;
  background: var(--accent); margin-right: .8rem; margin-top: -2px;
}
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 400; }
/* restrained display scale: h1 / h2 / h3 step down clearly, nothing outshouts the hero */
h1 { font-size: clamp(2.5rem, 6.5vw, 4.5rem); line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.2; }
/* Emphasis = tone, never italic. A heading that contains <em> is set in quiet ink and
   its <em> phrase in full ink, so the line reads as lead-in + point (annual-report style).
   Headings without <em> stay full ink. Same rule in English and CJK. */
h1:has(em), h2:has(em) { color: var(--ink-quiet); }
h1 em, h2 em { font-style: normal; font-weight: 400; color: var(--foreground); }
/* consistent secondary heading for in-page section titles */
.h2-sub { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 1.5rem; }
.lede { color: var(--muted-foreground); font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.7; max-width: 46rem; }
/* standard rhythm: lede following a heading */
h2 + .lede { margin-top: 1.5rem; }
h3 + .lede { margin-top: 1rem; }
/* footnote-style paragraph */
.note { color: var(--muted-foreground); font-size: .95rem; max-width: 44rem; margin-top: 1.5rem; }

/* ---------- layout ---------- */
.section { padding: clamp(4.5rem, 9vw, 6rem) 1.5rem; }
.section-tight { padding: clamp(3rem, 6vw, 3.75rem) 1.5rem; }
.section-card { background: var(--card); }
/* standard gap between a section's heading block and its content block */
.flow { margin-top: 3rem; }
/* centered closing band */
.section-center { text-align: center; }
.section-center .lede { margin: 1.5rem auto 0; }
.section-center .btn-row { justify-content: center; }
.wrap { max-width: 72rem; margin: 0 auto; }
.wrap-narrow { max-width: 56rem; margin: 0 auto; }
.grid-2 { display: grid; gap: 3rem; }
.grid-3 { display: grid; gap: 2.5rem; }
@media (min-width: 820px) {
  .grid-2 { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- hero (light, dot-motif) ---------- */
.hero {
  position: relative; min-height: 88vh;
  display: flex; align-items: center;
  overflow: hidden;
}
.hero-dots {
  position: absolute; pointer-events: none; color: var(--accent);
}
.hero-dots.d1 { right: -6rem; top: 8rem; width: min(44rem, 48vw); opacity: .55; }
/* d2 sits low in the corner so it never runs under the lede or buttons */
.hero-dots.d2 { left: -12rem; bottom: -9rem; width: 26rem; opacity: .3; color: var(--primary); }
@media (max-width: 900px) {
  /* tuck d1 into the top-right corner, clear of the full-width lede */
  .hero-dots.d1 { width: 16rem; right: -7rem; top: 4.5rem; opacity: .35; }
  .hero-dots.d2 { display: none; }
}
@media (max-width: 520px) { .hero-dots.d1 { display: none; } }
.hero-content { position: relative; z-index: 2; max-width: 72rem; margin: 0 auto; width: 100%; padding: 8rem 1.5rem 4rem; }
.hero-content .lede { margin-top: 2.2rem; max-width: 38rem; }
.hero .kicker { color: var(--accent); font-weight: 600; }
/* keep the short hero kicker on one line at phone width */
@media (max-width: 420px) { .hero .kicker { font-size: .72rem; letter-spacing: .2em; } }
.hero-scroll {
  margin-top: 4.5rem; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted-foreground);
}

/* page hero (inner pages) */
.page-hero { position: relative; overflow: hidden; padding: 9.5rem 1.5rem 3.5rem; }
.page-hero .lede { margin-top: 2rem; }
.page-dots {
  position: absolute; right: -3rem; top: 7.5rem; width: 19rem;
  color: var(--accent); opacity: .45; pointer-events: none;
}
@media (max-width: 900px) {
  .page-dots { width: 11rem; right: -4rem; top: 6.5rem; opacity: .3; }
}

/* ---------- components ---------- */
.pill {
  display: inline-block; padding: .3rem .85rem; border-radius: 999px;
  background: var(--secondary); color: var(--foreground);
  font-size: .68rem; letter-spacing: .15em; text-transform: uppercase;
}
.stat-row { display: grid; gap: 2.5rem; margin-top: 3.5rem; }
@media (min-width: 720px) { .stat-row { grid-template-columns: repeat(3, 1fr); } }
/* two-stat variant used beside a lede */
.stat-row.pair { margin-top: 0; grid-template-columns: 1fr 1fr; gap: 2rem; }
.stat .stat-num { font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1.1; }
.stat .stat-label { color: var(--muted-foreground); font-size: .95rem; margin-top: .5rem; max-width: 18rem; }

.card {
  position: relative;
  background: var(--card); border: 1px solid hsl(35 25% 80%); border-radius: .5rem;
  padding: 2.25rem 2rem;
  box-shadow: 0 1px 2px hsl(160 25% 14% / .04);
}
.card::before {
  content: ''; position: absolute; top: -1px; left: 2rem;
  width: 2.6rem; height: 3px; border-radius: 0 0 2px 2px;
  background: var(--accent);
}
.card h3 { margin-bottom: .9rem; }
.card p { color: var(--muted-foreground); font-size: .98rem; }
.card .step-num { font-family: var(--mono); color: var(--accent); font-size: .85rem; display: block; margin-bottom: 1.1rem; }
.card .traits { margin-top: 1.4rem; }
.card p a, .traits a { color: var(--accent); }
/* cream card on a card-toned band */
.card.card-cream { background: var(--background); }

.steps { counter-reset: step; display: grid; gap: 0; border-top: 2px solid var(--primary); margin-top: 1.5rem; }
.step { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.5rem; padding: 2.2rem 0; border-bottom: 1px solid var(--border); }
.step .n { font-family: var(--mono); color: var(--accent); font-size: .9rem; padding-top: .4rem; }
.step h3 { margin-bottom: .5rem; }
.step p { color: var(--muted-foreground); max-width: 44rem; }

/* accordion */
.acc { border-top: 1px solid var(--border); }
.acc details { border-bottom: 1px solid var(--border); }
.acc summary {
  list-style: none; cursor: pointer; padding: 1.6rem 2.5rem 1.6rem 0;
  position: relative; outline-offset: 4px;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ''; position: absolute; right: .4rem; top: 50%;
  width: .6rem; height: .6rem; border-right: 1.5px solid var(--muted-foreground);
  border-bottom: 1.5px solid var(--muted-foreground);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s ease;
}
.acc details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.acc .pill { margin-bottom: .8rem; }
.acc h3 { font-size: clamp(1.25rem, 3vw, 1.9rem); margin-bottom: .4rem; }
.acc .scale { color: var(--accent); font-size: .9rem; font-weight: 500; letter-spacing: .02em; }
.acc .body { padding: 0 0 2rem; max-width: 48rem; }
.acc .body p { color: var(--muted-foreground); margin-bottom: 1rem; }
.acc .body a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.acc .body a:hover { text-decoration: none; }
.acc .role-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.4rem; }
.acc .role-head h3 { margin-bottom: 0; }
.acc .role-head .headline { color: var(--muted-foreground); font-size: .95rem; }

/* careers: open roles, always expanded, set apart from the profiles accordion */
.open-roles { display: grid; gap: 3.5rem; margin-top: 2.5rem; }
.open-role { border-top: 2px solid var(--accent); padding-top: 1.6rem; }
.open-role .pill { margin-bottom: 1rem; }
.open-role h3 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin-bottom: .4rem; }
.open-role .headline { color: var(--foreground); font-size: 1.02rem; margin-bottom: 1.2rem; }
.open-role p { color: var(--muted-foreground); max-width: 48rem; margin-bottom: 1rem; }
.open-role p a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.open-role p a:hover { text-decoration: none; }
.open-role .apply { margin: 1.4rem 0 0; font-size: .85rem; letter-spacing: .06em; }

/* trait list */
.traits { list-style: none; display: grid; gap: 1.1rem; }
.lede + .traits { margin-top: 2.5rem; }
.traits li { display: flex; gap: 1.1rem; font-size: 1.02rem; }
.traits .n { font-family: var(--mono); color: var(--accent); font-size: .85rem; padding-top: .2rem; }

/* buttons */
.btn {
  display: inline-block; padding: .85rem 1.9rem; border-radius: .5rem;
  background: var(--primary); color: var(--primary-foreground);
  text-decoration: none; font-size: .9rem; letter-spacing: .04em;
  transition: opacity .2s ease;
}
.btn:hover {
  opacity: 1;
  background: var(--accent); color: hsl(160 25% 14%);
  border-color: var(--accent);
}
.btn-outline { background: transparent; color: var(--foreground); border: 1px solid var(--foreground); }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }

/* footer */
.site-footer {
  border-top: 2px solid var(--accent);
  background: var(--card);
  padding: 3.25rem 1.5rem 3rem;
}
.footer-inner {
  max-width: 72rem; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem; text-align: center;
}
.site-footer svg { height: 1.45rem; width: auto; }
.site-footer .brand-link { color: var(--primary); }
.site-footer p {
  font-family: var(--serif);
  color: var(--muted-foreground); font-size: 1.1rem;
}
.footer-links { display: flex; gap: 1.6rem; flex-wrap: wrap; justify-content: center; }
.footer-links a { color: var(--muted-foreground); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.footer-links a:hover { color: var(--accent); }
@media (min-width: 820px) {
  .footer-inner { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- insights ---------- */
.article-meta {
  font-family: var(--mono); font-size: .78rem; color: var(--muted-foreground);
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1rem;
}
.article-meta .tag { color: var(--accent); }
.article-title { font-size: clamp(2rem, 4.5vw, 3rem); }
.article-back { margin-top: 3rem; }
.article-back a { color: var(--accent); text-decoration: none; }
.insight-list { display: grid; gap: 2rem; max-width: 56rem; }
.insight-card { display: block; text-decoration: none; transition: border-color .2s ease; }
.insight-card:hover { border-color: var(--accent); }
.insight-card h3 { margin-bottom: .7rem; }
.insight-card .dek { color: var(--muted-foreground); font-size: .98rem; }
.insight-card .read { display: inline-block; margin-top: 1.2rem; color: var(--accent); font-size: .85rem; letter-spacing: .06em; transition: transform .2s ease; }
.insight-card:hover .read { transform: translateX(5px); }
.article-body { max-width: 46rem; }
.article-body p { color: var(--foreground); font-size: 1.04rem; line-height: 1.75; margin-bottom: 1.4rem; }
.article-body h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 2.8rem 0 1.1rem; position: relative; padding-top: 1.1rem; }
.article-body h2::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 2.4rem; height: 2px; border-radius: 1px; background: var(--accent);
}
.article-body ul { margin: 0 0 1.4rem 1.2rem; }
.article-body li { margin-bottom: .5rem; line-height: 1.65; }
.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.article-body a:hover { text-decoration: none; }
.article-body .sources { border-top: 1px solid var(--border); margin-top: 3rem; padding-top: 1.5rem; }
.article-body .sources p, .article-body .sources li { font-size: .88rem; color: var(--muted-foreground); }

/* ---------- home v2 (additive — used by index.html only) ---------- */

/* photo strip */
.home-strip { display: grid; gap: 1.5rem; }
@media (min-width: 720px) { .home-strip { grid-template-columns: repeat(3, 1fr); } }
.home-strip figure { margin: 0; }
.home-strip a { display: block; text-decoration: none; }
.home-strip img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: .5rem;
}
.home-strip figcaption {
  display: flex; align-items: baseline; gap: .9rem; margin-top: 1rem;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--foreground);
  transition: color .2s ease;
}
.home-strip figcaption .n { color: var(--accent); }
.home-strip a:hover figcaption { color: var(--accent); }

/* ruled stats */
.stat-row.lined .stat { border-top: 2px solid var(--accent); padding-top: 1.4rem; }

/* four-pillar grid */
.pillars { display: grid; gap: 3rem 2.5rem; margin-top: 3.5rem; }
@media (min-width: 640px) { .pillars { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillar { border-top: 1px solid var(--border); padding-top: 1.6rem; }
.pillar .n { font-family: var(--mono); color: var(--accent); font-size: .8rem; display: block; margin-bottom: 1rem; }
.pillar h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: .7rem; }
.pillar p { color: var(--muted-foreground); font-size: .95rem; }
/* three-pillar variant (Invest / Incubate / Partner) */
@media (min-width: 640px) { .pillars.pillars-3 { grid-template-columns: 1fr; } }
@media (min-width: 860px) { .pillars.pillars-3 { grid-template-columns: repeat(3, 1fr); } }
/* support layer under the pillars: research as the evidence behind every bet */
.pillar-base {
  display: grid; gap: .6rem 2.5rem; margin-top: 3rem;
  border-top: 2px solid var(--primary); padding-top: 1.5rem;
}
.pillar-base .label {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--primary); padding-top: .2rem;
}
.pillar-base p { color: var(--muted-foreground); font-size: .98rem; max-width: 46rem; }
@media (min-width: 860px) { .pillar-base { grid-template-columns: 14rem 1fr; } }

/* quiet text link */
.text-link {
  display: inline-block; margin-top: 2.8rem;
  color: var(--foreground); text-decoration: none;
  font-size: .9rem; letter-spacing: .04em;
  border-bottom: 1px solid var(--accent); padding-bottom: .2rem;
  transition: color .2s ease;
}
.text-link:hover { color: var(--accent); }

/* large serif statement */
.statement {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.4vw, 2.75rem);
  line-height: 1.3; letter-spacing: -.01em;
  max-width: 56rem; text-wrap: balance;
}
.statement { color: var(--ink-quiet); }
.statement em { font-style: normal; color: var(--foreground); }
.statement-sub { margin-top: 2rem; color: var(--muted-foreground); max-width: 44rem; line-height: 1.7; }

/* focus-area index rows — a refined index: number / name / one-liner / arrow */
.area-list { border-top: 2px solid var(--primary); margin-top: 3.5rem; }
.area-row {
  display: grid; grid-template-columns: 2.6rem 1fr 2rem;
  align-items: baseline; column-gap: 1rem; row-gap: .3rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--border);
  text-decoration: none;
}
.area-row .n { font-family: var(--mono); color: var(--accent); font-size: .8rem; }
.area-row h3 { font-size: clamp(1.3rem, 2vw, 1.55rem); line-height: 1.25; transition: color .2s ease; }
.area-row .dek { grid-column: 2; color: var(--muted-foreground); font-size: .95rem; line-height: 1.55; }
.area-row .arrow { grid-row: 1; grid-column: 3; justify-self: end; color: var(--muted-foreground); transition: transform .2s ease, color .2s ease; }
.area-row:hover .arrow { transform: translateX(6px); color: var(--accent); }
.area-row:hover h3 { color: var(--accent); }
.area-list + .note { margin-top: 1.75rem; }
@media (min-width: 820px) {
  .area-row { grid-template-columns: 4.5rem 16rem 1fr 2.5rem; padding: 1.6rem 0; }
  .area-row .dek { grid-column: 3; grid-row: 1; }
  .area-row .arrow { grid-column: 4; }
}

/* closing band */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--primary); color: var(--primary-foreground);
  padding: clamp(5.5rem, 11vw, 7rem) 1.5rem;
}
.cta-band .kicker { color: var(--accent); }
.cta-band .lede { color: hsl(40 33% 96% / .72); }
.cta-band .cta-dots {
  position: absolute; right: 2.5rem; bottom: 3rem;
  width: 9rem; color: var(--accent); opacity: .55; pointer-events: none;
}
@media (max-width: 720px) { .cta-band .cta-dots { display: none; } }
.btn-cream { background: var(--background); color: var(--foreground); }
.btn-outline-light { background: transparent; color: var(--primary-foreground); border: 1px solid hsl(40 33% 96% / .5); }

/* single full-bleed photo band (replaces triptych) */
.photo-band { padding: 0; line-height: 0; }
.photo-band img { width: 100%; height: clamp(280px, 55vh, 560px); object-fit: cover; display: block; }
/* taller hero-grade variant */
.photo-band--tall img { height: clamp(340px, 68vh, 640px); }
/* per-image framing when the wide crop would cut the subject */
.photo-band img.pos-up { object-position: 50% 22%; }
.photo-band img.pos-mid-up { object-position: 50% 40%; }
.photo-band img.pos-left { object-position: 32% 50%; }

/* ---------- vibrancy pass (additive) ---------- */

/* brand selection + focus */
::selection { background: hsl(35 60% 60% / .9); color: hsl(160 25% 14%); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* deep-green content band (light text over primary) */
.section-green {
  background: var(--primary);
  color: var(--primary-foreground);
}
.section-green .kicker { color: hsl(40 33% 96% / .85); }
.section-green .kicker::before { background: var(--accent); }
.section-green h2, .section-green h3 { color: var(--primary-foreground); }
.section-green .lede, .section-green p { color: hsl(40 33% 96% / .78); }
.section-green .statement { color: var(--ink-quiet-on-green); }
.section-green .statement em,
.section-green h1 em, .section-green h2 em,
.cta-band h2 em { color: var(--primary-foreground); }
.section-green h1:has(em), .section-green h2:has(em),
.cta-band h2:has(em) { color: var(--ink-quiet-on-green); }
.section-green .statement-sub { color: hsl(40 33% 96% / .72); }
.section-green .lede a {
  color: var(--primary-foreground) !important;
  text-decoration: underline; text-decoration-color: var(--accent);
  text-underline-offset: 4px;
}
.section-green .lede a:hover { color: var(--accent) !important; }
.section-green .text-link { color: var(--primary-foreground); }
.section-green .text-link:hover { color: var(--accent); }
.section-green .btn { background: var(--background); color: var(--foreground); }
.section-green .btn-outline {
  background: transparent; color: var(--primary-foreground);
  border: 1px solid hsl(40 33% 96% / .55);
}
.section-green .btn:hover,
.section-green .btn-outline:hover {
  background: var(--accent); color: hsl(160 25% 14%); border-color: var(--accent);
}

/* ---------- zh-CN (additive — used by /cn/ only) ---------- */
html[lang="zh-CN"] {
  --serif: 'Instrument Serif', 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', serif;
  --sans: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', -apple-system, sans-serif;
}
html[lang="zh-CN"] body { line-height: 1.9; line-break: strict; }
/* CJK display type: upright, slight positive tracking, looser leading */
html[lang="zh-CN"] h1 { letter-spacing: .04em; line-height: 1.28; }
html[lang="zh-CN"] h2 { letter-spacing: .03em; line-height: 1.35; }
html[lang="zh-CN"] h3 { letter-spacing: .02em; line-height: 1.45; }
/* headline emphasis: the sitewide two-tone rule (quiet lead-in, full-ink <em>) applies to CJK too */
html[lang="zh-CN"] .statement { letter-spacing: .02em; line-height: 1.6; }
/* kicker: no caps in CJK — a small, generously tracked label instead */
html[lang="zh-CN"] .kicker { font-size: .82rem; letter-spacing: .26em; font-weight: 500; }
html[lang="zh-CN"] .nav a { font-size: .85rem; letter-spacing: .14em; }
html[lang="zh-CN"] .footer-links a { font-size: .82rem; letter-spacing: .12em; }
html[lang="zh-CN"] .pill { letter-spacing: .08em; }
html[lang="zh-CN"] .btn { font-size: .95rem; letter-spacing: .08em; }
/* body copy: CJK wants looser leading and (a Chinese print convention) justified edges */
html[lang="zh-CN"] .lede { line-height: 1.95; letter-spacing: .01em; }
html[lang="zh-CN"] .note { line-height: 1.85; }
html[lang="zh-CN"] .statement-sub { line-height: 1.9; }
html[lang="zh-CN"] .stat .stat-label { line-height: 1.75; }
html[lang="zh-CN"] .lede,
html[lang="zh-CN"] .card p,
html[lang="zh-CN"] .step p,
html[lang="zh-CN"] .pillar p,
html[lang="zh-CN"] .statement-sub,
html[lang="zh-CN"] .note { text-align: justify; }
/* card label is Chinese text, not code: sans with wide tracking, not mono */
html[lang="zh-CN"] .card .step-num { font-family: var(--sans); font-size: .8rem; letter-spacing: .22em; font-weight: 500; }
/* focus-area index: CJK names need a wider name column and a touch less size */
html[lang="zh-CN"] .area-row h3 { font-size: clamp(1.15rem, 1.9vw, 1.45rem); }
html[lang="zh-CN"] .area-row .dek { line-height: 1.7; }
@media (min-width: 820px) {
  html[lang="zh-CN"] .area-row { grid-template-columns: 4.5rem 19rem 1fr 2.5rem; }
}

/* vertical rhythm: CJK text blocks read denser, so the hand-off from a lede (or a
   section heading) to the content block below needs an explicit band gap — matching
   the 3.5rem rhythm the stat rows and pillars already use */
html[lang="zh-CN"] .lede + .grid-2 { margin-top: 3.5rem; }
html[lang="zh-CN"] h2 + .acc { margin-top: 2.5rem; }
/* accordion rows: a touch more air around the CJK summary lines */
html[lang="zh-CN"] .acc summary { padding-top: 1.75rem; padding-bottom: 1.75rem; }

html[lang="zh-CN"] .pillar-base .label { font-family: var(--sans); text-transform: none; letter-spacing: .2em; font-weight: 500; }
html[lang="zh-CN"] .pillar-base p { line-height: 1.9; text-align: justify; }
/* three pillars on the CN page; justified CJK paragraphs are dense,
   so rows separate a touch more than columns */
html[lang="zh-CN"] .pillars { row-gap: 3.5rem; }
@media (min-width: 1020px) { html[lang="zh-CN"] .pillars { grid-template-columns: repeat(3, 1fr); } }

/* cross-cutting technologies strip: a first-class coda below the focus accordions,
   quieter than the four sector rows — hairline pillar rules, amber ＋ markers */
html[lang="zh-CN"] .xcut { margin-top: 3.5rem; border-top: 2px solid var(--primary); padding-top: 2.25rem; }
html[lang="zh-CN"] .xcut-head h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin-bottom: .8rem; }
html[lang="zh-CN"] .xcut-head p {
  color: var(--muted-foreground); font-size: .95rem; line-height: 1.85;
  max-width: 44rem; text-align: justify;
}
html[lang="zh-CN"] .xcut-grid {
  list-style: none; display: grid; gap: 1.4rem; margin-top: 2rem;
}
@media (min-width: 640px) { html[lang="zh-CN"] .xcut-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem 2rem; } }
@media (min-width: 1020px) { html[lang="zh-CN"] .xcut-grid { grid-template-columns: repeat(4, 1fr); } }
html[lang="zh-CN"] .xcut-grid li { border-top: 1px solid var(--border); padding-top: 1.1rem; }
html[lang="zh-CN"] .xcut-grid .n {
  font-family: var(--mono); color: var(--accent); font-size: .85rem;
  display: block; margin-bottom: .55rem;
}
html[lang="zh-CN"] .xcut-grid h4 {
  font-family: var(--serif); font-weight: 400;
  font-size: 1.15rem; letter-spacing: .02em; line-height: 1.5; margin-bottom: .45rem;
}
html[lang="zh-CN"] .xcut-grid p {
  color: var(--muted-foreground); font-size: .9rem; line-height: 1.85; text-align: justify;
}