/* CASTA Website — Ink & Saffron design system */

html { scroll-behavior: smooth; }

:root {
  --ink: #0E1116;
  --ink-soft: #2A2D33;
  --ink-mute: #5A5D63;
  --paper: #F4ECDD;
  --paper-deep: #EAE0CD;
  --paper-soft: #FBF6EB;
  --saffron: #C8851C;
  --saffron-deep: #A66B12;
  --saffron-soft: #E5B868;
  --lapis: #1B3A6B;
  --hairline: rgba(14, 17, 22, 0.16);
  --hairline-strong: rgba(14, 17, 22, 0.34);
  --shadow-card: 0 1px 0 rgba(14, 17, 22, 0.08);

  --serif-display: "Cormorant Garamond", "Noto Serif SC", "Source Han Serif", Georgia, serif;
  --serif-body: "Source Serif 4", "Noto Serif SC", Georgia, serif;
  --sans-body: "Inter Tight", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --cjk: "Noto Serif SC", "Source Han Serif SC", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--serif-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
a:hover { color: var(--saffron-deep); }

img { display: block; max-width: 100%; }

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
  padding: 0;
}

/* --- Layout --- */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
.container-narrow {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 720px) {
  .container, .container-narrow { padding: 0 22px; }
}

.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }
.section-dark { background: var(--ink); color: var(--paper); }
.section-paper-deep { background: var(--paper-deep); }

/* --- Eyebrow --- */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: inline-block;
}
.eyebrow-saffron { color: var(--saffron-deep); }
.eyebrow-paper { color: var(--paper); opacity: 0.65; }

/* --- Type scale --- */
.h-display {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(48px, 6.4vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.012em;
}
.h-page {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.01em;
}
.h-section {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(30px, 2.8vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.006em;
}
.h-card {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.15;
}
.lede {
  font-family: var(--serif-body);
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.lede-light { color: rgba(244, 236, 221, 0.78); }

.cn { font-family: var(--cjk); font-weight: 400; }
.cn-display { font-family: var(--cjk); font-weight: 500; letter-spacing: 0.02em; }

.body-sm { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.body-xs { font-size: 13px; line-height: 1.5; color: var(--ink-mute); }

/* --- Hairlines --- */
.rule { border: 0; border-top: 1px solid var(--hairline); margin: 0; }
.rule-strong { border: 0; border-top: 1px solid var(--hairline-strong); margin: 0; }
.rule-paper { border: 0; border-top: 1px solid rgba(244, 236, 221, 0.18); margin: 0; }

/* --- Buttons --- */
.btn {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px 26px;
  border: 1px solid currentColor;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all 0.16s ease;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-primary:hover { background: var(--saffron-deep); border-color: var(--saffron-deep); color: var(--paper); }
.btn-paper { color: var(--paper); border-color: var(--paper); }
.btn-paper:hover { background: var(--paper); color: var(--ink); }

.btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline-strong);
  padding-bottom: 4px;
  transition: all 0.16s;
}
.btn-arrow:hover { color: var(--saffron-deep); border-color: var(--saffron-deep); }

/* --- Header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  max-width: 1440px;
  margin: 0 auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
  transition: opacity 0.18s ease;
}
.brand:hover { opacity: 0.92; }
.brand-mark {
  flex-shrink: 0;
  display: block;
  color: var(--ink);
  transition: color 0.2s ease;
}
.brand:hover .brand-mark { color: var(--saffron-deep); }
.brand-mark rect,
.brand-mark path,
.brand-mark circle {
  vector-effect: non-scaling-stroke;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand-name {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.06em;
  transition: color 0.2s ease;
}
.brand:hover .brand-name { color: var(--saffron-deep); }
.brand-cn {
  font-family: var(--cjk);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  margin-top: 4px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-link {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  position: relative;
  padding: 6px 0;
  transition: color 0.16s;
}
.nav-link:hover { color: var(--saffron-deep); }
.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--saffron);
}
.locale-toggle {
  display: flex;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 500;
  border: 1px solid var(--hairline-strong);
}
.locale-toggle button,
.locale-toggle a {
  padding: 7px 11px;
  color: var(--ink-mute);
  text-transform: uppercase;
  border-right: 1px solid var(--hairline);
}
.locale-toggle button:last-child,
.locale-toggle a:last-child { border-right: none; }
.locale-toggle button.is-active,
.locale-toggle a.is-active { background: var(--ink); color: var(--paper); }

/* --- Mobile nav hamburger (≤720px only) --- */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--hairline-strong);
  padding: 0;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle:hover { border-color: var(--ink); }
.nav-toggle-bar {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.site-header.is-nav-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(3.25px) rotate(45deg);
}
.site-header.is-nav-open .nav-toggle-bar:nth-child(2) {
  transform: translateY(-3.25px) rotate(-45deg);
}
@media (max-width: 720px) {
  .site-header-inner { padding: 14px 22px; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-name { font-size: 18px; }
  .brand-cn { font-size: 11px; letter-spacing: 0.14em; }
  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--hairline);
    padding: 8px 22px 24px;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 0.22s ease,
                visibility 0s linear 0.22s;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  .site-header.is-nav-open .site-nav {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .nav-link {
    font-size: 13px;
    padding: 14px 0;
    border-bottom: 1px solid var(--hairline);
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .nav-link.is-active::after { display: none; }
  .nav-link.is-active { color: var(--saffron-deep); }
  .locale-toggle {
    margin-top: 18px;
    align-self: flex-start;
  }
  .locale-toggle button { padding: 11px 16px; min-height: 44px; min-width: 56px; }
}

/* --- Hero --- */
.hero {
  position: relative;
  padding: 112px 0 96px;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 860px;
  gap: 0;
  align-items: start;
}
.hero-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.hero-meta-divider {
  width: 24px;
  height: 1px;
  background: var(--hairline-strong);
}
.hero-cn {
  margin-top: 18px;
  font-family: var(--cjk);
  font-size: 22px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.hero-sub {
  margin-top: 0;
  max-width: 560px;
}
.hero-cta-row {
  margin-top: 40px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-lower {
  display: flex;
  align-items: center;
  gap: 72px;
  margin-top: 52px;
}
.hero-lower > div:first-child { flex: 1; }
.hero-accent {
  width: 260px;
  height: 260px;
  flex-shrink: 0;
  pointer-events: none;
  opacity: 0.82;
}
@media (max-width: 860px) {
  .hero-lower { gap: 0; }
  .hero-accent { display: none; }
}
/* Hero corner ornaments */
.hero-coords {
  position: absolute;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  z-index: 3;
  transition: transform 0.3s ease;
}
.hero-coords-tl { top: 28px; left: 40px; }
.hero-coords-tr { top: 28px; right: 40px; }
.hero-coords-bl { bottom: 28px; left: 40px; color: var(--saffron-deep); }
.hero { --mx: 0; --my: 0; }
.hero-coords-tl { transform: translate(calc(var(--mx) * -8px), calc(var(--my) * -6px)); }
.hero-coords-tr { transform: translate(calc(var(--mx) * 8px), calc(var(--my) * -6px)); }
.hero-coords-bl { transform: translate(calc(var(--mx) * -6px), calc(var(--my) * 6px)); }

/* Silk threads canvas */
.silk-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
  mix-blend-mode: multiply;
}

/* Hero headline staggered fade-in */
.hero-headline {
  animation: hero-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  max-width: 900px;
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-cn { animation: hero-rise 0.9s 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hero-sub { animation: hero-rise 0.9s 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hero-cta-row { animation: hero-rise 0.9s 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* Coords ticker */
.coords-ticker {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 36px;
  border-top: 1px solid var(--hairline);
  background: rgba(244, 236, 221, 0.9);
  overflow: hidden;
  z-index: 4;
  display: flex;
  align-items: center;
}
.coords-ticker-track {
  display: inline-flex;
  gap: 48px;
  white-space: nowrap;
  animation: ticker-marquee 60s linear infinite;
  padding-left: 48px;
}
.coords-ticker-item {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  text-transform: uppercase;
  flex-shrink: 0;
}
.coords-ticker-item:nth-child(odd) { color: var(--saffron-deep); }
@keyframes ticker-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .coords-ticker-track { animation: none; transform: translateX(0); }
  .hero-headline, .hero-cn, .hero-sub, .hero-cta-row { animation: none; opacity: 1; transform: none; }
  .hero-coords-tl, .hero-coords-tr, .hero-coords-bl { transform: none !important; }
  .highlight-card:hover .highlight-img img { transform: none; }
  .silk-canvas { opacity: 0.55; }
}
.hero { padding-bottom: 120px; }

/* --- Stat row --- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline-strong);
  border-bottom: 1px solid var(--hairline-strong);
}
.stat-cell {
  padding: 32px 24px;
  border-right: 1px solid var(--hairline);
}
.stat-cell:last-child { border-right: none; }
.stat-num {
  font-family: var(--serif-display);
  font-size: 52px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.stat-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 12px;
}
@media (max-width: 720px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .stat-cell:nth-child(2) { border-right: none; }
  .stat-cell:nth-child(1), .stat-cell:nth-child(2) { border-bottom: 1px solid var(--hairline); }
}

/* --- What we do (3-card pattern) --- */
.threecard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
}
.threecard > * { background: var(--paper); padding: 40px 32px; transition: background 0.25s ease, transform 0.25s ease; }
.threecard-cell:hover { background: var(--paper-soft); }
.threecard-cell:hover .threecard-num { color: var(--saffron); }
@media (max-width: 880px) { .threecard { grid-template-columns: 1fr; } }
.threecard-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--saffron-deep);
}
.threecard-title {
  margin-top: 14px;
  font-family: var(--serif-display);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 500;
}
.threecard-cn {
  font-family: var(--cjk);
  font-size: 14px;
  color: var(--ink-mute);
  margin-top: 6px;
}
.threecard-body {
  margin-top: 18px;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.55;
}
.threecard-evidence {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  line-height: 1.7;
}

/* --- Section header --- */
.section-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  margin-bottom: 56px;
  align-items: end;
}
@media (max-width: 880px) {
  .section-head { grid-template-columns: 1fr; gap: 24px; }
}
.section-head-meta { display: flex; flex-direction: column; gap: 10px; }

/* --- Highlights grid --- */
.highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
}
.highlight-card {
  background: var(--paper);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: background 0.18s;
}
.highlight-card:hover { background: var(--paper-soft); }
.highlight-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--paper-deep);
}
.highlight-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(15%) contrast(1.04);
  transition: transform 0.4s ease;
}
.highlight-card:hover .highlight-img img { transform: scale(1.03); }
.highlight-meta {
  padding: 22px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.highlight-line {
  display: flex;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  gap: 10px;
}
.highlight-title {
  font-family: var(--serif-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.18;
  margin-top: 4px;
}
.highlight-desc {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
@media (max-width: 980px) { .highlights { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .highlights { grid-template-columns: 1fr; } }

/* --- Affiliations text-block (NOT a logo strip) --- */
.affiliations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  padding: 64px 0;
  border-top: 1px solid var(--hairline-strong);
  border-bottom: 1px solid var(--hairline-strong);
}
@media (max-width: 880px) {
  .affiliations { grid-template-columns: 1fr; gap: 36px; }
}
.affiliation-row { margin-bottom: 28px; }
.affiliation-row:last-child { margin-bottom: 0; }
.affiliation-class {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--saffron-deep);
}
.affiliation-list {
  margin-top: 8px;
  font-family: var(--serif-display);
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink);
}
.affiliation-note {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  margin-top: 6px;
}

/* --- Programs teaser (two big cards) --- */
.programs-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 880px) { .programs-pair { grid-template-columns: 1fr; } }
.program-card {
  border: 1px solid var(--hairline-strong);
  padding: 44px 36px;
  background: var(--paper-soft);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.program-card:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.program-card:hover .threecard-cn,
.program-card:hover .body-sm { color: rgba(244, 236, 221, 0.7); }
.program-card-tier {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--saffron-deep);
}
.program-card:hover .program-card-tier { color: var(--saffron-soft); }
.program-card-title {
  margin-top: 20px;
  font-family: var(--serif-display);
  font-size: 44px;
  font-weight: 500;
  line-height: 1.05;
}
.program-card-cn {
  font-family: var(--cjk);
  font-size: 18px;
  color: var(--ink-mute);
  margin-top: 6px;
}
.program-card-body {
  margin-top: 24px;
  flex: 1;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.program-card-cta {
  margin-top: 32px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* --- Footer --- */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: 80px 0 48px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(244, 236, 221, 0.18);
}
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 236, 221, 0.6);
  margin-bottom: 20px;
}
.footer-link {
  display: block;
  margin-bottom: 10px;
  color: var(--paper);
  font-size: 15px;
}
.footer-link:hover { color: var(--saffron-soft); }
.footer-legal {
  margin-top: 36px;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 236, 221, 0.55);
  flex-wrap: wrap;
  gap: 16px;
}

/* --- Page-level (sub-pages) --- */
.page-head {
  padding: 88px 0 56px;
  border-bottom: 1px solid var(--hairline);
}
.page-crumb {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 28px;
}
.page-head-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
}
@media (max-width: 880px) {
  .page-head-split { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 720px) {
  .page-head { padding: 56px 0 40px; }
}

/* --- Timeline --- */
.timeline-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 24px 0;
  border-bottom: 1px solid var(--hairline);
}
.chip {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--hairline-strong);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.15s;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (max-width: 720px) {
  .chip { padding: 13px 16px; min-height: 44px; }
}

.timeline-year {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 56px;
  padding: 56px 0;
  border-bottom: 1px solid var(--hairline);
}
@media (max-width: 880px) { .timeline-year { grid-template-columns: 1fr; gap: 24px; } }
.timeline-year-num {
  font-family: var(--serif-display);
  font-size: 72px;
  font-weight: 500;
  line-height: 1;
  position: sticky;
  top: 100px;
  align-self: start;
  color: var(--ink);
}
.timeline-year-count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  margin-top: 8px;
}
/* --- Spotlight hero card --- */
.tl-spotlight {
  display: grid;
  grid-template-columns: 55fr 45fr;
  border: 1px solid var(--hairline-strong);
  margin-bottom: 64px;
  overflow: hidden;
}
@media (max-width: 880px) { .tl-spotlight { grid-template-columns: 1fr; } }
.tl-spotlight-img {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--paper-deep);
}
@media (max-width: 880px) { .tl-spotlight-img { aspect-ratio: 4/3; } }
.tl-spotlight-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: sepia(12%) saturate(0.88) contrast(1.04);
  transition: filter 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tl-spotlight:hover .tl-spotlight-img img {
  filter: sepia(0%) saturate(1) contrast(1.06);
  transform: scale(1.025);
}
.tl-spotlight-body {
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--paper-deep);
  border-left: 1px solid var(--hairline-strong);
}
@media (max-width: 880px) {
  .tl-spotlight-body { padding: 32px 24px; border-left: none; border-top: 1px solid var(--hairline-strong); }
}
.tl-spotlight-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--saffron-deep);
  margin-bottom: 20px;
}
.tl-spotlight-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
}
.tl-spotlight-class {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.tl-spotlight-title {
  font-family: var(--serif-display);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.18;
  margin-bottom: 16px;
  color: var(--ink);
}
.tl-spotlight-summary {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 24px;
}

/* --- Activity card grid --- */
.activity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 28px;
}
@media (max-width: 720px) { .activity-grid { grid-template-columns: 1fr; } }
.activity-card {
  display: flex;
  flex-direction: column;
  transition: opacity 0.2s ease;
}
.activity-card--lead {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--hairline);
}
@media (max-width: 720px) { .activity-card--lead { grid-column: span 1; grid-template-columns: 1fr; } }
.activity-card--text {
  background: var(--paper-deep);
  border-top: 1px solid var(--saffron-deep);
  padding-top: 20px;
}
.activity-card-img {
  aspect-ratio: 3/2;
  overflow: hidden;
  background: var(--paper-deep);
  flex-shrink: 0;
}
.activity-card--lead .activity-card-img {
  aspect-ratio: 4/3;
}
.activity-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: sepia(12%) saturate(0.88) contrast(1.04);
  transition: filter 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.activity-card:hover .activity-card-img img {
  filter: sepia(0%) saturate(1) contrast(1.06);
  transform: scale(1.03);
}
.activity-card-body {
  padding: 18px 0 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.activity-card--lead .activity-card-body {
  padding: 28px 32px;
  justify-content: center;
  background: var(--paper-deep);
}
.activity-card--lead .activity-card-img + .activity-card-body {
  border-left: 1px solid var(--hairline);
}
.activity-card-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.activity-card-class { color: var(--saffron-deep); }
.activity-card-title {
  font-family: var(--serif-display);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 10px;
  color: var(--ink);
}
.activity-card--lead .activity-card-title { font-size: 22px; margin-bottom: 12px; }
.activity-card-summary {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  flex: 1;
  margin-bottom: 14px;
}
.activity-card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

/* --- Shared people chip (used by spotlight + cards) --- */
.tl-event-people {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.person-chip {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  background: var(--paper-deep);
  color: var(--ink);
  border: 1px solid var(--hairline);
}

/* --- Multi-photo gallery tilings (1–4 photos per event) ---
   Lives inside .activity-card-img and .tl-spotlight-img. Outer aspect ratio
   is preserved by the parent slot; this grid only changes the interior split.
   Hairline gutters use the strong hairline so cells read as separate frames. */
.event-gallery {
  display: grid;
  width: 100%;
  height: 100%;
  gap: 1px;
  background: var(--hairline-strong);
}
.event-gallery--1 {
  grid-template-columns: 1fr;
  gap: 0;
  background: transparent;
}
.event-gallery--2 {
  grid-template-columns: 1fr 1fr;
}
.event-gallery--3 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.event-gallery--3 > .event-gallery-cell:nth-child(1) {
  grid-row: 1 / span 2;
}
.event-gallery--4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.event-gallery-cell {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  background: var(--paper-deep);
  cursor: zoom-in;
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}
.event-gallery-cell:focus { outline: none; }
.event-gallery-cell:focus-visible {
  outline: 2px solid var(--saffron-deep);
  outline-offset: -2px;
  z-index: 1;
}
.event-gallery-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

/* --- Lightbox --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 18, 14, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 56px 64px 80px;
  cursor: zoom-out;
  animation: lightbox-fade 0.2s ease-out;
}
@keyframes lightbox-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lightbox-stage {
  position: relative;
  max-width: min(1200px, 100%);
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}
.lightbox-img {
  max-width: 100%;
  max-height: calc(100vh - 160px);
  object-fit: contain;
  display: block;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.92);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
  z-index: 1;
}
.lightbox-close:hover,
.lightbox-close:focus-visible {
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.55);
  outline: none;
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 64px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.92);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.lightbox-nav:hover,
.lightbox-nav:focus-visible {
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.55);
  outline: none;
}
.lightbox-nav--prev { left: -56px; }
.lightbox-nav--next { right: -56px; }
.lightbox-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 720px) {
  .lightbox { padding: 44px 16px 64px; }
  .lightbox-nav--prev { left: 4px; }
  .lightbox-nav--next { right: 4px; }
  .lightbox-img { max-height: calc(100vh - 140px); }
}

/* --- Leadership --- */
.founder-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 880px) { .founder-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .founder-grid { grid-template-columns: 1fr; } }
.founder-card { display: flex; flex-direction: column; }
.founder-photo {
  aspect-ratio: 3/4;
  background:
    repeating-linear-gradient(135deg,
      var(--paper-deep) 0,
      var(--paper-deep) 8px,
      var(--paper-soft) 8px,
      var(--paper-soft) 16px);
  border: 1px solid var(--hairline);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.founder-photo-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: var(--paper);
  padding: 6px 10px;
  margin-bottom: 14px;
  border: 1px solid var(--hairline);
}
.founder-rank {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  background: var(--ink);
  color: var(--paper);
  padding: 4px 8px;
}
.founder-meta { padding: 18px 0 0; }
.founder-name {
  font-family: var(--serif-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
}
.founder-pinyin {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  margin-top: 4px;
}
.founder-cred {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.founder-status {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* --- Fellow placeholder card --- */
.fellow-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 1240px) { .fellow-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .fellow-grid { grid-template-columns: repeat(2, 1fr); } }
.fellow-card {
  border: 1px solid var(--hairline-strong);
  padding: 24px 20px;
  background: var(--paper-soft);
}
.fellow-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
}
.fellow-stat {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid var(--saffron-deep);
  color: var(--saffron-deep);
  display: inline-block;
}
.fellow-role {
  margin-top: 14px;
  font-family: var(--serif-display);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
}
.fellow-aff {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-soft);
}

/* --- Programs page --- */
.tier-table { width: 100%; border-collapse: collapse; margin-top: 32px; }
.tier-table th, .tier-table td {
  text-align: left;
  padding: 18px 16px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  font-size: 14.5px;
}
.tier-table th {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  border-bottom-color: var(--hairline-strong);
  padding-bottom: 14px;
}
.tier-table tr:hover td { background: var(--paper-soft); }

/* Stack-as-cards reflow on mobile · the 5-col grid is unreadable below 720px */
@media (max-width: 720px) {
  .tier-table, .tier-table thead, .tier-table tbody,
  .tier-table tr, .tier-table th, .tier-table td { display: block; width: auto; }
  .tier-table thead { position: absolute; left: -9999px; top: -9999px; }
  .tier-table th[style] { width: auto !important; }
  .tier-table tbody tr {
    border-top: 1px solid var(--hairline-strong);
    padding: 24px 0 8px;
  }
  .tier-table tbody tr:first-child { border-top: none; }
  .tier-table tbody tr td {
    border-bottom: none;
    padding: 6px 0;
    font-size: 14.5px;
  }
  .tier-table tbody tr td:first-child { padding-bottom: 14px; }
  .tier-table tbody tr td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 4px;
  }
  .tier-table tbody tr:hover td { background: transparent; }
}
.tier-name {
  font-family: var(--serif-display);
  font-size: 20px;
  font-weight: 500;
}
.tier-cn { font-family: var(--cjk); font-size: 13px; color: var(--ink-mute); margin-top: 2px; }

/* --- Contact --- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-block {
  padding: 32px 0;
  border-top: 1px solid var(--hairline);
}
.contact-block:first-child { border-top: none; padding-top: 0; }
.contact-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.contact-value { font-family: var(--serif-display); font-size: 22px; line-height: 1.3; }
.contact-form {
  background: var(--paper-soft);
  border: 1px solid var(--hairline-strong);
  padding: 36px;
}
.field { margin-bottom: 22px; }
.field label {
  display: block;
  font-family: var(--sans-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.field input, .field textarea, .field select {
  width: 100%;
  font-family: var(--serif-body);
  font-size: 16px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline-strong);
  padding: 8px 0;
  outline: none;
  color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus { border-bottom-color: var(--saffron); }
.field textarea { min-height: 90px; resize: vertical; }

/* --- About prose --- */
.prose {
  font-family: var(--serif-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
}
.prose p { margin: 0 0 1.2em; }
.prose blockquote {
  position: relative;
  border-top: 1px solid var(--hairline-strong);
  border-bottom: 1px solid var(--hairline);
  padding: 28px 0 24px;
  margin: 36px 0;
  font-family: var(--serif-display);
  font-size: 24px;
  line-height: 1.35;
  color: var(--ink);
  font-style: italic;
  text-indent: 1.4em;
}
.prose blockquote::before {
  content: "“";
  position: absolute;
  top: 12px;
  left: -2px;
  font-family: var(--serif-display);
  font-style: normal;
  font-size: 64px;
  line-height: 1;
  color: var(--saffron);
  font-weight: 500;
}
.prose blockquote::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 56px;
  height: 1px;
  background: var(--saffron);
}
.prose h3 {
  font-family: var(--serif-display);
  font-size: 28px;
  font-weight: 500;
  margin: 48px 0 16px;
  line-height: 1.2;
}

/* --- Map svg overlay (decorative) --- */
.map-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  z-index: 0;
}

/* --- Partners (home section) — compressed teaser, three rows, one line each --- */
.partners-home { background: var(--paper); }

.partners-teaser {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline-strong);
  border-bottom: 1px solid var(--hairline-strong);
}
.partners-teaser-row + .partners-teaser-row {
  border-top: 1px solid var(--hairline);
}
.partners-teaser-link {
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 24px 4px;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.15s ease;
}
.partners-teaser-link:hover { background: var(--paper-soft); }
.partners-teaser-link:hover .partners-teaser-symbol { transform: translateX(4px); }
.partners-teaser-symbol { transition: transform 0.18s ease; }
.partners-teaser-link:hover .partners-teaser-arrow { transform: translateX(4px); color: var(--saffron-deep); }
.partners-teaser-symbol {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--saffron-deep);
  line-height: 1;
}
.partners-teaser-title {
  font-family: var(--serif-display);
  font-size: 22px;
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.partners-teaser-count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
}
.partners-teaser-arrow {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--ink-mute);
  transition: transform 0.18s ease, color 0.18s ease;
}
@media (max-width: 720px) {
  .partners-teaser-link { padding: 20px 4px; gap: 12px; grid-template-columns: 18px 1fr auto auto; }
  .partners-teaser-title { font-size: 18px; }
}
/* --- Partners page --- */
.partner-tier {
  padding: 48px 0;
  border-top: 1px solid var(--hairline);
}
.partner-tier:first-child { border-top: none; padding-top: 0; }
.partner-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 48px;
  margin-top: 24px;
}
@media (max-width: 720px) { .partner-list { grid-template-columns: 1fr; } }
.partner-item {
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.partner-item:hover { background: var(--paper-soft); }
.partner-name {
  font-family: var(--serif-display);
  font-size: 19px;
  font-weight: 500;
}
.partner-rel {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--saffron-deep);
  white-space: nowrap;
}

/* --- Print/banner ornament --- */
.seal {
  width: 76px;
  height: 76px;
  position: relative;
}

/* --- focus halo --- */
:focus-visible {
  outline: 2px solid var(--saffron);
  outline-offset: 2px;
}
.highlight-card:focus-visible,
.program-card:focus-visible,
.partner-bucket:focus-visible,
.threecard-cell:focus-visible {
  outline: 2px solid var(--saffron);
  outline-offset: -2px;
}

/* ============================================================
   Skip-link · keyboard-only landmark
   ============================================================ */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  border: 1px solid var(--saffron);
  z-index: 200;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 8px;
  outline: none;
}

/* ============================================================
   Scroll-progress bar · saffron, top of viewport
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
  background: var(--saffron);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  transition: transform 0.08s linear;
  opacity: 0.85;
}

/* ============================================================
   Reveal-on-scroll utilities
   Hidden states are gated behind html.js (set inline in <head> by the
   generated pages) so content is fully visible without JavaScript —
   crawlers and no-JS readers never meet an opacity-0 page.
   ============================================================ */
html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--delay, 0s);
  will-change: opacity, transform;
}
html.js .reveal.is-shown {
  opacity: 1;
  transform: translateY(0);
}

/* Cluster: parent is a row of children that stagger-reveal. */
html.js .reveal-stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html.js .reveal-stagger.is-shown > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.is-shown > *:nth-child(1) { transition-delay: 0.00s; }
.reveal-stagger.is-shown > *:nth-child(2) { transition-delay: 0.06s; }
.reveal-stagger.is-shown > *:nth-child(3) { transition-delay: 0.12s; }
.reveal-stagger.is-shown > *:nth-child(4) { transition-delay: 0.18s; }
.reveal-stagger.is-shown > *:nth-child(5) { transition-delay: 0.24s; }
.reveal-stagger.is-shown > *:nth-child(6) { transition-delay: 0.30s; }
.reveal-stagger.is-shown > *:nth-child(7) { transition-delay: 0.36s; }
.reveal-stagger.is-shown > *:nth-child(8) { transition-delay: 0.42s; }
.reveal-stagger.is-shown > *:nth-child(n+9) { transition-delay: 0.48s; }

/* Hairline draw-in for section meta rules. */
html.js .rule-draw {
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s;
}
html.js .is-shown .rule-draw,
html.js .reveal.is-shown.rule-draw {
  transform: scaleX(1);
}

/* ============================================================
   Magnetic CTA · pull-toward-cursor effect
   ============================================================ */
.btn-magnetic,
.btn[data-magnetic],
.btn-primary[data-magnetic] {
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.16s ease,
              color 0.16s ease,
              border-color 0.16s ease;
  will-change: transform;
}

/* ============================================================
   Animated brand mark · draw-on first paint
   ============================================================ */
.brand-mark .bm-globe {
  stroke-dasharray: 91.1;
  stroke-dashoffset: 91.1;
  animation: bm-globe-draw 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s forwards;
}
.brand-mark .bm-equator {
  opacity: 0;
  transform-origin: 20px 20px;
  transform: scaleX(0.1);
  animation: bm-equator-grow 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.55s forwards;
}
.brand-mark .bm-meridian {
  opacity: 0;
  animation: bm-meridian-fade 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.7s forwards;
}
.brand-mark .bm-dot {
  opacity: 0;
  transform-origin: 29px 13px;
  transform: scale(0.2);
  animation: bm-dot-pop 0.5s cubic-bezier(0.18, 1.4, 0.4, 1) 0.95s forwards;
}
@keyframes bm-globe-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes bm-equator-grow {
  to { opacity: 0.55; transform: scaleX(1); }
}
@keyframes bm-meridian-fade {
  to { opacity: 0.55; }
}
@keyframes bm-dot-pop {
  from { opacity: 0; transform: scale(0.2); }
  to { opacity: 1; transform: scale(1); }
}
.brand:hover .brand-mark .bm-dot {
  animation: bm-dot-orbit 1.4s cubic-bezier(0.3, 0.1, 0.3, 1) infinite;
}
@keyframes bm-dot-orbit {
  0%   { transform: scale(1) translate(0, 0); }
  50%  { transform: scale(1.1) translate(-1px, -1px); }
  100% { transform: scale(1) translate(0, 0); }
}

/* ============================================================
   Highlight title · animated underline on hover
   ============================================================ */
.highlight-title {
  background-image: linear-gradient(var(--saffron-deep), var(--saffron-deep));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  padding-bottom: 2px;
}
.highlight-card:hover .highlight-title,
.highlight-card:focus-visible .highlight-title {
  background-size: 100% 1px;
}

.partner-name {
  background-image: linear-gradient(var(--saffron-deep), var(--saffron-deep));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  padding-bottom: 1px;
}
.partner-item:hover .partner-name {
  background-size: 100% 1px;
}

/* ============================================================
   Tier-table · saffron leading glyph on hover
   ============================================================ */
.tier-table tbody tr {
  position: relative;
  transition: background 0.18s ease;
}
.tier-table tbody tr td:first-child {
  position: relative;
  padding-left: 22px;
}
.tier-table tbody tr td:first-child::before {
  content: "▸";
  position: absolute;
  left: 4px;
  top: 18px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  color: var(--saffron);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.22s ease,
              transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tier-table tbody tr:hover td:first-child::before {
  opacity: 1;
  transform: translateX(0);
}
@media (max-width: 720px) {
  /* On stacked-card mobile reflow, suppress the row glyph (no row hover) */
  .tier-table tbody tr td:first-child::before { content: none; }
  .tier-table tbody tr td:first-child { padding-left: 0; }
}

/* ============================================================
   Stat-num · saffron-tint on count-up complete
   ============================================================ */
.stat-num.is-arrived {
  animation: stat-tint 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes stat-tint {
  0%   { color: var(--saffron-deep); transform: translateY(0); }
  35%  { color: var(--saffron-deep); transform: translateY(-1px); }
  100% { color: var(--ink); transform: translateY(0); }
}

/* ============================================================
   Threecard · saffron line slides in beneath number on hover
   ============================================================ */
.threecard-cell {
  position: relative;
  overflow: hidden;
}
.threecard-cell::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 32px;
  right: 32px;
  height: 1px;
  background: var(--saffron-deep);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.threecard-cell:hover::after {
  transform: scaleX(1);
}

/* ============================================================
   Hero silk-road arc · animated dotted route
   ============================================================ */
.hero-route {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
  mix-blend-mode: multiply;
}
.hero-route .route-path {
  fill: none;
  stroke: var(--saffron-deep);
  stroke-width: 1.2;
  stroke-dasharray: 4 6;
  stroke-linecap: round;
  opacity: 0.7;
  animation: route-march 22s linear infinite;
}
.hero-route .route-pulse {
  fill: var(--saffron);
  filter: drop-shadow(0 0 4px rgba(200, 133, 28, 0.6));
}
@keyframes route-march {
  to { stroke-dashoffset: -200; }
}

/* ============================================================
   Footer · faint silk echo background ornament
   ============================================================ */
.site-footer {
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 80% 36% at 12% 100%, rgba(200, 133, 28, 0.10), transparent 60%),
    radial-gradient(ellipse 50% 30% at 92% 0%, rgba(200, 133, 28, 0.06), transparent 60%);
  pointer-events: none;
}
.site-footer > .container { position: relative; z-index: 1; }

/* ============================================================
   Founder placeholder photo · subtle hatched silhouette
   ============================================================ */
.founder-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 50% 38%, rgba(14, 17, 22, 0.06) 0, rgba(14, 17, 22, 0.06) 22%, transparent 23%),
    radial-gradient(ellipse at 50% 96%, rgba(14, 17, 22, 0.10) 0, rgba(14, 17, 22, 0.10) 36%, transparent 37%);
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
.founder-card:hover .founder-photo::before {
  opacity: 1;
}
.founder-card { transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.founder-card:hover { transform: translateY(-2px); }

/* ============================================================
   Locale toggle · animated active indicator
   ============================================================ */
.locale-toggle button,
.locale-toggle a {
  position: relative;
  transition: color 0.18s ease, background 0.18s ease;
}
.locale-toggle button.is-active,
.locale-toggle a.is-active {
  background: var(--ink);
  color: var(--paper);
}

/* ============================================================
   Nav · animated underline on hover
   ============================================================ */
.nav-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 1px;
  background: var(--saffron);
  transition: right 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-link:hover::before {
  right: 0;
}
.nav-link.is-active::before {
  right: 0;
}
/* Suppress the duplicate .is-active ::after that the file already had,
   in favor of the unified ::before behavior. */
.nav-link.is-active::after { display: none; }

/* ============================================================
   Timeline · year scale on viewport entry
   ============================================================ */
.timeline-year-num {
  transition: color 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.timeline-year.is-current .timeline-year-num {
  color: var(--saffron-deep);
}
.activity-card { transition: opacity 0.2s ease; }
.activity-card:hover { opacity: 0.96; }

/* ============================================================
   Person chip · saffron tint on hover
   ============================================================ */
.person-chip {
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.person-chip:hover {
  background: var(--saffron-soft);
  border-color: var(--saffron-deep);
  color: var(--ink);
}

/* ============================================================
   Form fields · saffron pulse on focus
   ============================================================ */
.field input,
.field textarea,
.field select {
  transition: border-color 0.2s ease;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-bottom-color: var(--saffron);
}
.field { position: relative; }
.field-required {
  position: absolute;
  top: 0;
  right: 0;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--saffron-deep);
  text-transform: uppercase;
}

/* ============================================================
   View Transitions · bilingual swap as choreographed metamorphosis
   The root cross-fade carries everything that doesn't have its own
   name. The named groups (hero emphasis, nav links) morph in their
   own frame so the saffron word and the nav read as shared elements,
   not as two cross-fading copies. Wave-staggered nav delays make the
   six links arrive in sequence rather than as a hard cut.
   ============================================================ */
.hero-headline .hero-emphasis { view-transition-name: hero-emphasis; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

::view-transition-group(hero-emphasis) {
  animation-duration: 360ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
::view-transition-old(hero-emphasis),
::view-transition-new(hero-emphasis) {
  animation-duration: 360ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Nav-link morph envelope — slightly tighter and snappier than the root */
::view-transition-group(nav-home),
::view-transition-group(nav-about),
::view-transition-group(nav-timeline),
::view-transition-group(nav-programs),
::view-transition-group(nav-partners),
::view-transition-group(nav-contact) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
::view-transition-old(nav-home),    ::view-transition-new(nav-home)    { animation-delay: 0ms; }
::view-transition-old(nav-about),   ::view-transition-new(nav-about)   { animation-delay: 24ms; }
::view-transition-old(nav-timeline),::view-transition-new(nav-timeline){ animation-delay: 48ms; }
::view-transition-old(nav-programs),::view-transition-new(nav-programs){ animation-delay: 72ms; }
::view-transition-old(nav-partners),::view-transition-new(nav-partners){ animation-delay: 96ms; }
::view-transition-old(nav-contact), ::view-transition-new(nav-contact) { animation-delay: 120ms; }

/* While a lang transition is active, suppress the parallax on hero
   coords — the cursor-tied transform fights the morphed layer. */
html.vt-lang .hero-coords-tl,
html.vt-lang .hero-coords-tr,
html.vt-lang .hero-coords-bl { transform: none !important; }

/* Cross-document view transitions (MPA). Every page is its own URL now
   (D41), including the EN ↔ 中文 toggle at /… ↔ /zh/… — same-origin
   navigations morph through the choreography above instead of hard-cutting. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ============================================================
   Back-to-top · floating affordance for long pages (timeline)
   Appears after the reader has scrolled past one viewport. The
   anchor sits inside the document flow so screen readers can find
   it; visibility is gated by `[hidden]` toggling, not opacity.
   ============================================================ */
.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 70;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
  pointer-events: none;
}
.back-to-top.is-shown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  outline: none;
}
@media (max-width: 720px) {
  .back-to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity 0.15s linear; transform: none; }
}

/* ============================================================
   404 page
   ============================================================ */
.page-404 {
  min-height: calc(100vh - 0px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-404::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(200, 133, 28, 0.06), transparent 70%);
  pointer-events: none;
}
.page-404-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-404-mark {
  margin-bottom: 36px;
  animation: bm-arc-fill 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both;
}
.page-404-mark svg { display: block; }
.page-404-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--saffron-deep);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.page-404-title {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 0 0 14px;
}
.page-404-cn {
  font-family: var(--cjk);
  font-size: 22px;
  color: var(--ink-soft);
  margin: 0 0 28px;
}
.page-404-lede {
  font-family: var(--serif-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 540px;
  margin: 0 0 36px;
}
.page-404-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.page-404-foot {
  margin-top: 52px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  text-transform: uppercase;
}

/* ============================================================
   Reduced-motion · expand the existing media query coverage
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal,
  .reveal-stagger > *,
  .rule-draw {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .scroll-progress { display: none; }
  .brand-mark .bm-globe,
  .brand-mark .bm-equator,
  .brand-mark .bm-meridian,
  .brand-mark .bm-dot {
    animation: none;
    opacity: 1;
    stroke-dashoffset: 0;
    transform: none;
  }
  .brand-mark .bm-equator,
  .brand-mark .bm-meridian { opacity: 0.55; }
  .stat-num.is-arrived { animation: none; }
  .threecard-cell::after { transition: none; }
  .hero-route .route-path { animation: none; }
  .tier-table tbody tr td:first-child::before { transition: opacity 0.15s linear; transform: none; }
  .tl-spotlight-img img,
  .activity-card-img img { transition: none; }
}

/* ============================================================
   Print stylesheet · clean editorial output
   ============================================================ */
@media print {
  .site-header,
  .site-footer,
  .scroll-progress,
  .skip-link,
  .silk-canvas,
  .hero-route,
  .coords-ticker,
  .timeline-filter,
  .contact-form { display: none !important; }
  body { background: white; color: black; font-size: 11pt; line-height: 1.45; }
  .section, .section-tight { padding: 24px 0; }
  .hero { padding: 24px 0; border-bottom: 1px solid #000; }
  a { color: black; text-decoration: underline; }
  .h-display { font-size: 34pt; }
  .h-page { font-size: 26pt; }
  .h-section { font-size: 18pt; }
  .threecard, .highlights {
    grid-template-columns: 1fr 1fr !important;
    background: transparent !important;
    gap: 18px !important;
  }
  .program-card { background: white !important; color: black !important; border: 1px solid #000; }
  .stat-num { color: black !important; }
}

/* ============================================================
   Tweaks: about page header grid, hero CTA balance, contact tightening
   ============================================================ */
.about-head-grid { gap: 64px; }
@media (max-width: 880px) {
  .about-head-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .programs-fellow-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
}

/* Contact form responsive: collapse 2-col rows on narrow */
@media (max-width: 720px) {
  .contact-form > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* Mono-tag utilities · pulled out of repeated inline styles */
.mono-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mono-tag-saffron { color: var(--saffron-deep); }
.mono-tag-mute { color: var(--ink-mute); }
.mono-link-saffron {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--saffron-deep);
  border-bottom: 1px solid var(--saffron-deep);
  margin-top: 6px;
  display: inline-block;
}

/* Reply-time note + post-submit acknowledgment */
.form-reply-note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 16px 0 12px;
}
.form-sent {
  margin-top: 24px;
  padding: 18px 22px;
  border-top: 1px solid var(--saffron-deep);
  background: var(--paper-soft);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.form-sent-mark {
  font-family: var(--mono);
  color: var(--saffron-deep);
  font-size: 16px;
  line-height: 1.4;
  flex-shrink: 0;
}
.form-sent a {
  color: var(--saffron-deep);
  border-bottom: 1px solid var(--saffron-deep);
}

/* ============================================================
   CN-aware micro-typography · improve CJK rendering on critical labels
   ============================================================ */
:lang(zh-CN) .h-display,
:lang(zh-CN) .h-page,
:lang(zh-CN) .h-section,
:lang(zh-CN) .h-card {
  letter-spacing: 0.005em;
  font-feature-settings: "halt" 1;
}
:lang(zh-CN) .lede,
:lang(zh-CN) .body-sm {
  letter-spacing: 0.01em;
}

/* Small but real: the program-card-body needs a slightly tighter CJK leading */
:lang(zh-CN) .program-card-body,
:lang(zh-CN) .threecard-body,
:lang(zh-CN) .activity-card-summary,
:lang(zh-CN) .tl-spotlight-summary {
  line-height: 1.7;
}

/* Affiliate label can wrap awkwardly on narrow viewports */
.tier-name { hyphens: manual; word-break: keep-all; }
@media (max-width: 540px) {
  .tier-name { font-size: 17px; }
}

/* ============================================================
   Header brand · responsive scaling
   ============================================================ */
@media (max-width: 720px) {
  .site-header-inner { padding: 16px 24px; }
  .brand { gap: 10px; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-name { font-size: 19px; letter-spacing: 0.05em; }
  .brand-cn { font-size: 11.5px; letter-spacing: 0.14em; margin-top: 3px; }
}
@media (max-width: 420px) {
  .brand-cn { display: none; }
}