/* ═══════════════════════════════════════════════════════════════════
   home.css — the index only
   ═════════════════════════════════════════════════════════════════ */

/* ── the lake ─────────────────────────────────────────────────────── */
/* The masthead and the band below it sit on one body of water. Its canvas
   is pinned to the screen while the lake scrolls past and draws whatever
   part of the lake is in view (water.js): the evening fills the first
   screen edge to edge, the water runs on under the paragraph, and over the
   last stretch it takes on the evening's colours and dissolves into the
   page. By day both blocks wear the night ground (.on-night) because they
   sit on dark water. */
.lake { position: relative; isolation: isolate; }
.lake-stage { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.lake-canvas { position: sticky; top: 0; display: block; width: 100%; height: 100svh; }   /* released at the lake's end */
/* A touch screen scrolls the page on a thread of its own, and a pinned canvas,
   redrawn from script for each new scroll position, trails the letters in
   steps. There the canvas covers the whole lake and simply scrolls with it:
   the water is part of the page, as steady as the words on it. */
@media (hover: none), (pointer: coarse) {
  .lake-canvas { position: absolute; top: 0; left: 0; height: 100%; }
}
.lake .intro-band { background: transparent; --text-3: #a3abbe; padding-bottom: clamp(24px, 3vw, 44px); }   /* labels a step brighter on the water */
/* the fade carries content: the ticker rides its dark start, and the next
   section begins on its last, lightest stretch (pale enough for the page's
   own type) rather than waiting below it */
.lake-fade { padding-bottom: clamp(110px, 15vh, 170px); }
.lake + .section { margin-top: -16px; padding-top: 0; }

/* ── masthead ─────────────────────────────────────────────────────── */
/* One idea on the first screen: the name standing on the horizon, mirrored
   in live water. Everything else waits below. */
.hero {
  --name: clamp(34px, 8.6vw, 250px);   /* site.js refines this to fit the line exactly */
  position: relative; isolation: isolate;
  min-height: max(640px, 100svh);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto minmax(40svh, auto);
  padding-top: var(--nav-h);
  overflow: hidden;
}
.hero-name {
  grid-row: 2;
  margin: 0; padding-inline: var(--mx);
  font: 800 var(--name)/0.8 var(--f-disp);
  font-stretch: 125%;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  
  text-align: center;
  white-space: nowrap;
  /* moonlit silver at night; by day a silhouette against the sunset, standing on the horizon like the hills */
  color: #c3cbe2;
  /* letters stand on the water line; nothing shows below it */
  clip-path: inset(-60% -20% var(--cut, 0px) -20%);
}
.hero-name .word { display: inline-block; white-space: nowrap; }
[data-theme="light"] .hero-name { color: #0b0713; }
.hero-name .glyph { display: inline-block; will-change: transform; }
.intro-run .hero-name .glyph { transform: translateY(0.95em); }
.intro-go .hero-name .glyph {
  transform: none;
  transition: transform 1.9s cubic-bezier(0.19, 1, 0.22, 1) calc(360ms + var(--g) * 75ms);
}
.intro-run .hero-water { opacity: 0; transform: translateY(10px); }
.intro-go .hero-water { opacity: 1; transform: none; transition: opacity 1.2s var(--ease) 1.6s, transform 1.4s var(--ease) 1.6s; }

.hero-water {
  grid-row: 3;
  display: flex; align-items: flex-end;
  padding-block: calc(var(--name) * 0.9) clamp(28px, 5vh, 56px);
}
.mh-tagline {
  font: 500 var(--step-0)/1.5 var(--f-sans); font-stretch: var(--wd-label);
  color: var(--text-2); max-width: 44ch;
  text-shadow: 0 1px 18px rgba(5, 7, 14, 0.55);
}
html[lang="zh-CN"] .mh-tagline { letter-spacing: 0.02em; }
@media (max-width: 900px) { .hero { grid-template-rows: minmax(0, 1fr) auto minmax(42svh, auto); } }

/* ── intro band: the paragraph, the facts, the four figures ───────── */
.intro-band { position: relative; background: var(--bg); padding-block: clamp(56px, 8vw, 128px) clamp(48px, 6vw, 96px); }
.intro-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(36px, 6vw, 112px); align-items: start;
}
.hero-lead {
  font: 450 var(--step-2)/1.38 var(--f-sans);
  letter-spacing: -0.012em; color: var(--text);
  max-width: 36ch; text-wrap: pretty;
}
.hero-meta { margin: 0; display: grid; border-top: 1px solid var(--line-2); }
.hero-meta > div { display: grid; grid-template-columns: minmax(7.5em, auto) minmax(0, 1fr); gap: 16px; padding: 14px 0; }
.hero-meta > div + div { border-top: 1px solid var(--line); }
.hero-meta dt { font: 600 var(--step--1)/1.5 var(--f-sans); font-stretch: var(--wd-label); color: var(--text-3); }
.hero-meta dd { margin: 0; font-size: 16px; line-height: 1.45; color: var(--text); display: flex; align-items: center; gap: 10px; }
.school-mark { width: 20px; height: 20px; border-radius: 50%; background: #fff; padding: 1px; flex: none; }
html[lang="zh-CN"] .hero-meta dt { letter-spacing: 0.04em; }
.hero-figs { grid-column: 1 / -1; margin-top: clamp(24px, 3vw, 48px); }
.mh-fig-n {
  font: 620 clamp(38px, 1.3rem + 2.8vw, 68px)/0.95 var(--f-disp); font-stretch: 75%;
  letter-spacing: -0.01em; color: var(--text); font-variant-numeric: tabular-nums;
}
.mh-fig-l { margin-top: 12px; font: 500 var(--step--1)/1.4 var(--f-sans); font-stretch: var(--wd-label); color: var(--text-3); }
@media (max-width: 900px) { .intro-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── ticker ───────────────────────────────────────────────────────── */
/* on the lake it runs over the water: no band of its own, its ends
   fading by a mask rather than by page-coloured overlays */
.lake .ticker { background: transparent; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.lake .ticker::before, .lake .ticker::after { display: none; }
.lake .ticker-item { color: var(--text); }
.ticker { position: relative; overflow: hidden; border-block: 1px solid var(--line); background: var(--bg); padding-block: clamp(16px, 2.2vw, 26px); }
.ticker::before, .ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 2; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.ticker::after { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }
.ticker-track { display: flex; width: max-content; animation: tick 70s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
  display: inline-flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); padding-right: clamp(20px, 2.4vw, 36px);
  font: 600 clamp(19px, 0.9rem + 1.2vw, 32px)/1 var(--f-disp); letter-spacing: -0.02em; white-space: nowrap; color: var(--text-2);
}
.ticker-item .star { color: var(--accent); font-size: 0.55em; }
@keyframes tick { to { transform: translate3d(-50%, 0, 0); } }

/* ── about ────────────────────────────────────────────────────────── */
.about-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 7vw, 128px); align-items: start; }
.about-copy { display: grid; gap: clamp(22px, 3vh, 32px); }
.about-copy .display { max-width: 12ch; }
.lede-first { color: var(--text); }
.lede-first .cap { font: inherit; color: inherit; }
.about-stats { margin-top: 8px; }
.about-plate { position: sticky; top: calc(var(--nav-h) + 36px); }
.about-plate .frame { border-radius: 0; }
.about-plate .frame img { filter: saturate(1.05) contrast(1.02); }
.plate-tag { color: var(--text-2); }

.sig-wrap { margin-top: 10px; display: grid; gap: 14px; max-width: 460px; }
.sig { width: 100%; height: auto; stroke: var(--text); opacity: 0.9; }
.sig path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.can-reveal .sig-wrap:not(.is-in) .sig path { stroke-dashoffset: 1; }
.can-reveal .sig-wrap.is-in .sig path { transition: stroke-dashoffset 3.2s cubic-bezier(0.55, 0.1, 0.25, 1) 0.4s; }
.sig-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.sig-label { font: 500 12px/1 var(--f-sans); font-stretch: var(--wd-label); letter-spacing: 0.005em; color: var(--text-3);  }
@media (max-width: 900px) {
  .about-grid { grid-template-columns: minmax(0, 1fr); }
  .about-plate { position: static; max-width: 520px; }
}

/* ── worlds: three stacked panels ─────────────────────────────────── */
.worlds { display: grid; gap: clamp(22px, 4vh, 44px); }
.world {
  position: sticky; top: calc(var(--nav-h) + 20px);
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  min-height: min(76vh, 740px);
  border: 1px solid var(--line);
  border-radius: 0;
  overflow: hidden;
  background: var(--bg-raise);
  box-shadow: 0 -30px 80px -40px rgba(0, 0, 0, 0.6), var(--shadow);
  transition: border-color 0.6s var(--ease);
}
.world { transform: scale(calc(1 - var(--cover, 0) * 0.06)); transform-origin: 50% 0; filter: brightness(calc(1 - var(--cover, 0) * 0.45)); will-change: transform; }
.world:nth-child(2) { top: calc(var(--nav-h) + 38px); }
.world:nth-child(3) { top: calc(var(--nav-h) + 56px); }
.world:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.world-media { position: relative; overflow: hidden; background: var(--bg-deep); }
.world-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.8s var(--ease-img); }
.world:hover .world-media img { transform: scale(1.07); }
.world-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, color-mix(in srgb, var(--bg-raise) 70%, transparent)); }
.world-body {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 18px;
  padding: clamp(28px, 4.2vw, 68px);
  background: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 60%);
}
.world-k { font: 500 var(--step--1)/1 var(--f-mono); letter-spacing: 0.2em; color: var(--accent); display: flex; align-items: center; gap: 12px; }
html[lang="zh-CN"] .world-k { letter-spacing: 0.08em; }
.world-t { font: 700 clamp(38px, 1.2rem + 3.6vw, 84px)/0.95 var(--f-disp); letter-spacing: -0.045em; color: var(--text); text-wrap: balance; }
html[lang="zh-CN"] .world-t { letter-spacing: 0; line-height: 1.15; }
.world-meta { font: 500 var(--step--1)/1.5 var(--f-mono); letter-spacing: 0.04em; color: var(--text-3); }
.world-p { color: var(--text-2); max-width: 54ch; }
.world-p strong { color: var(--text); }
.world-go {
  align-self: flex-start; margin-top: 8px;
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 22px;
  border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--text); font-weight: 600; font-size: 15px;
  transition: background-color 0.4s var(--ease), color 0.4s;
}
.world-go svg { width: 16px; height: 16px; transition: transform 0.6s var(--ease); }
.world:hover .world-go { background: var(--accent); color: var(--on-accent); }
.world:hover .world-go svg { transform: translate(3px, -3px); }
@media (max-width: 900px) {
  .world { position: relative; top: auto !important; grid-template-columns: minmax(0, 1fr); min-height: 0; transform: none; filter: none; }
  .world-media { aspect-ratio: 4 / 3; }
  .world-media::after { background: linear-gradient(to top, color-mix(in srgb, var(--bg-raise) 80%, transparent), transparent 50%); }
}


/* ── numbers: scores set on a graduated scale ─────────────────────── */
.num-head { align-items: end; }
.num-logos { display: grid; gap: 12px; justify-items: end; }
.num-logos-row { display: flex; gap: 20px; align-items: center; }
.num-logos-row img, .ledger-top img { height: 26px; width: auto; filter: grayscale(1) brightness(1.8) contrast(0.9); opacity: 0.75; }
[data-theme="light"] .num-logos-row img, [data-theme="light"] .ledger-top img { filter: grayscale(1) contrast(1.1); opacity: 0.7; }
.num-logos-note { font: 500 var(--step--1)/1 var(--f-sans); font-stretch: var(--wd-label); letter-spacing: 0.005em;  color: var(--accent); }
@media (max-width: 860px) { .num-logos { justify-items: start; } }

.ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.ledger-row {
  position: relative; overflow: hidden;
  display: grid; gap: 18px; align-content: start;
  padding: clamp(26px, 3vw, 44px);
  border: 1px solid var(--line); border-radius: 0;
  background: radial-gradient(80% 60% at 100% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%), var(--bg-raise);
}
.ledger-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ledger-label { font: 500 var(--step--1)/1.3 var(--f-sans); font-stretch: var(--wd-label); letter-spacing: 0.005em;  color: var(--text-2); }
html[lang="zh-CN"] .ledger-label { letter-spacing: 0.04em; }
.ledger-top img { height: 20px; }
.ledger-score { display: flex; align-items: baseline; gap: 12px; }
.ledger-score .big { font: 800 clamp(72px, 2rem + 6vw, 148px)/0.82 var(--f-disp); letter-spacing: -0.06em; color: var(--text); font-variant-numeric: tabular-nums; }
.ledger-score .rit, .ledger-score .sub { font: 500 15px/1 var(--f-mono); color: var(--text-3); letter-spacing: 0.06em; }
.ledger-score .rit { order: 2; }
.ledger-pct { font: 500 14px/1.5 var(--f-mono); color: var(--accent); }
.ledger-bar {
  position: relative; height: 30px;
  background:
    repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 10%) 0 100% / 100% 10px no-repeat,
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 2%) 0 100% / 100% 5px no-repeat,
    linear-gradient(var(--line-2), var(--line-2)) 0 100% / 100% 1px no-repeat;
}
.ledger-bar span {
  position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--pct, 0) * 100%);
  background: linear-gradient(90deg, transparent, var(--accent));

  transform-origin: left; transition: transform 1.8s var(--ease) 0.3s;
}
.ledger-bar span::after {
  content: ''; position: absolute; right: -1px; bottom: 0; width: 2px; height: 26px; background: var(--accent);

}
.can-reveal .ledger-row:not(.is-in) .ledger-bar span { transform: scaleX(0); }
.ledger-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.ledger-badges .badge { color: var(--text-2); background: transparent; border-color: var(--line-2); }
.ledger-badges .badge.seal { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
@media (max-width: 860px) { .ledger { grid-template-columns: minmax(0, 1fr); } }

/* ── timeline ─────────────────────────────────────────────────────── */
.tl-sub { color: var(--text-2); max-width: 34ch; }
.tl { display: grid; gap: clamp(56px, 7vw, 96px); }
.tl-tier-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid var(--line-2); }
.tl-tier-title { font: 700 clamp(22px, 1rem + 1vw, 32px)/1.1 var(--f-disp); letter-spacing: -0.025em; }
.tl-tier-note { font: 500 var(--step--1)/1 var(--f-sans); font-stretch: var(--wd-label); letter-spacing: 0.005em;  color: var(--text-3); }
html[lang="zh-CN"] .tl-tier-note { letter-spacing: 0.03em; }
.tl-row { display: grid; grid-template-columns: minmax(150px, 190px) minmax(0, 1fr); gap: 12px clamp(20px, 3vw, 44px); padding: clamp(24px, 2.8vw, 34px) 0; border-bottom: 1px solid var(--line); }
.tl-when { display: grid; gap: 10px; align-content: start; }
.tl-track { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--f-sans); font-stretch: var(--wd-label); letter-spacing: 0.005em;  color: var(--accent); }
html[lang="zh-CN"] .tl-track { letter-spacing: 0.04em; }
.tl-date { font: 500 13px/1.4 var(--f-mono); color: var(--text-3); }
.tl-body { display: grid; gap: 8px; }
.tl-role { font: 650 clamp(19px, 0.95rem + 0.6vw, 24px)/1.25 var(--f-sans); letter-spacing: -0.015em; color: var(--text); }
.tl-org { font-size: 15px; color: var(--text-2); font-weight: 500; }
.tl-desc { color: var(--text-2); font-size: 15.5px; line-height: 1.65; margin-top: 4px; }
@media (max-width: 640px) { .tl-row { grid-template-columns: minmax(0, 1fr); } .tl-when { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } }

/* ── community ────────────────────────────────────────────────────── */
.comm-list { display: grid; border-top: 1px solid var(--line-2); }
.comm-item {
  position: relative;
  display: grid; grid-template-columns: 80px minmax(0, 1fr) 64px; gap: clamp(16px, 3vw, 48px); align-items: start;
  padding: clamp(30px, 4vw, 54px) 0;
  border-bottom: 1px solid var(--line-2);
}
.comm-item::before {
  content: ''; position: absolute; inset: 0 calc(-1 * var(--mx)); z-index: -1;
  background: radial-gradient(60% 120% at 30% 50%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
  opacity: 0; transition: opacity 0.6s var(--ease);
}
.comm-item:hover::before { opacity: 1; }
.comm-num { font: 600 14px/1 var(--f-mono); color: var(--text-3); padding-top: 12px; }
.comm-main { display: grid; gap: 12px; }
.comm-tag { font: 500 var(--step--1)/1 var(--f-sans); font-stretch: var(--wd-label); letter-spacing: 0.005em;  color: var(--accent); }
html[lang="zh-CN"] .comm-tag { letter-spacing: 0.04em; }
.comm-title { font: 700 clamp(30px, 1rem + 2.6vw, 60px)/1 var(--f-disp); letter-spacing: -0.045em; color: var(--text); transition: color 0.4s; }
.comm-item:hover .comm-title { color: var(--accent); }
.comm-desc { color: var(--text-2); max-width: 68ch; }
.comm-arrow {
  justify-self: end; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--text); transition: background-color 0.4s, color 0.4s, transform 0.7s var(--ease), border-color 0.4s;
}
.comm-item:hover .comm-arrow { background: var(--accent); color: var(--on-accent); border-color: transparent; transform: rotate(45deg); }
@media (max-width: 700px) { .comm-item { grid-template-columns: minmax(0, 1fr); } .comm-arrow { justify-self: start; } }

/* ── contact ──────────────────────────────────────────────────────── */
.contact { overflow: hidden; }
.contact-head { display: grid; gap: clamp(20px, 2.6vw, 30px); margin-bottom: clamp(44px, 6vw, 84px); }
.contact-title { max-width: 22ch; font-size: clamp(34px, 1.2rem + 3.1vw, 76px); line-height: 1.02; }
.contact-sub { color: var(--text-2); max-width: 52ch; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.cf-wrap { position: relative; }
.cf-form { display: grid; gap: 22px; transition: opacity 0.35s ease, transform 0.35s var(--ease); }
.cf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.cf-field { display: grid; gap: 8px; }
.cf-label { font: 500 12px/1 var(--f-sans); font-stretch: var(--wd-label); letter-spacing: 0.005em;  color: var(--text-3); }
html[lang="zh-CN"] .cf-label { letter-spacing: 0.04em; }
.cf-input {
  width: 100%; min-height: 50px; padding: 12px 16px;
  border-radius: 0; border: 1px solid var(--line-2);
  background: var(--bg); color: var(--text); font-size: 16px;
  transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
}
.cf-input::placeholder { color: var(--text-3); }
.cf-input:hover { border-color: var(--text-3); }
.cf-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.cf-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cf-input.cf-invalid { border-color: var(--ember); }
.cf-input.cf-valid { border-color: color-mix(in srgb, #6fe3a4 60%, var(--line-2)); }
.cf-textarea { min-height: 170px; resize: vertical; line-height: 1.6; }
.cf-select-wrap { position: relative; }
.cf-select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.cf-select option { background: var(--bg-raise); color: var(--text); }
.cf-select-caret { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-3); }
.cf-error { min-height: 0; font-size: 13px; color: var(--ember); opacity: 0; transform: translateY(-4px); transition: opacity 0.3s, transform 0.3s var(--ease); }
.cf-error.cf-err-show { opacity: 1; transform: none; }
.cf-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 4px; }
.cf-submit { border: 0; }
.cf-submit:disabled { opacity: 0.7; cursor: progress; }
.cf-spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.8s linear infinite; }
.cf-loading .cf-spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.cf-srv-err { color: var(--ember); font-size: 14px; }
.cf-success {
  position: absolute; inset: 49px 0 0 0; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 32px;
  opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s;
}
.cf-success.cf-vis { opacity: 1; visibility: visible; transition: opacity 0.5s var(--ease); }
.cf-success-circle { width: 72px; height: 72px; stroke: var(--accent); }
.cf-success-check { stroke-dasharray: 40; stroke-dashoffset: 40; }
.cf-anim .cf-success-check { stroke-dashoffset: 0; transition: stroke-dashoffset 0.8s var(--ease) 0.2s; }
.cf-success-title { font: 700 32px/1.1 var(--f-disp); letter-spacing: -0.03em; }
.cf-success-body { color: var(--text-2); }
.cf-again { margin-top: 8px; min-height: 44px; font-weight: 600; color: var(--accent); }
@media (max-width: 640px) { .cf-row { grid-template-columns: minmax(0, 1fr); } }

.contact-direct { display: grid; gap: 22px; align-content: start; padding-top: 12px; }
.contact-direct-label { font: 500 12px/1 var(--f-sans); font-stretch: var(--wd-label); letter-spacing: 0.005em;  color: var(--text-3); }
html[lang="zh-CN"] .contact-direct-label { letter-spacing: 0.04em; }
.contact-email {
  font: 700 clamp(22px, 0.9rem + 1.35vw, 36px)/1.1 var(--f-disp); letter-spacing: -0.03em; color: var(--text); overflow-wrap: anywhere;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat; padding-bottom: 6px;
  transition: background-size 0.7s var(--ease), color 0.4s;
}
.contact-email:hover { color: var(--accent); background-size: 100% 2px; }
.contact-socials { display: flex; flex-wrap: wrap; gap: 10px; }
.social-link {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px;
  border-radius: var(--r-pill); border: 1px solid var(--line-2);
  color: var(--text-2); font-size: 14px; font-weight: 500;
  transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}
.social-link:hover { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── footer extras on the index ───────────────────────────────────── */
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 10px; color: var(--text-3); }
.footer-links a:hover { color: var(--accent); }

/* Featured runs straight into All projects: one topic, one gap, not two section paddings */
#projects { padding-bottom: clamp(56px, 6vw, 96px); }
.section.ix-section { padding-top: 0; }