*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--f-sans);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }

p { max-width: 65ch; }

a {
  color: var(--c-accent);
  text-decoration: none;
  transition: color var(--ease);
}
a:hover { color: var(--c-accent-hover); }

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

/* Layout */
.container { max-width: 1080px; margin: 0 auto; padding: 0 var(--s-lg); }
.section { padding: var(--s-2xl) 0; }
.text-center { text-align: center; }
.text-muted { color: var(--c-muted); }

.grid {
  display: grid;
  gap: var(--s-lg);
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Animation */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* Bilingual */
[lang="en"] {
  display: block;
  font-size: calc(1em * var(--f-en-ratio));
  color: var(--c-muted);
  font-weight: 300;
  margin-top: 0.2em;
}
h1 [lang="en"], h2 [lang="en"], h3 [lang="en"] {
  font-family: var(--f-serif);
  font-style: italic;
}
.bilingual-inline [lang="en"] {
  display: inline;
  margin-left: 0.4em;
  font-size: 0.8em;
}

/* ── English-primary bilingual (for l10n page) ── */
.en-primary [lang="en"] {
  display: block;
  font-size: 1em;
  color: var(--c-text);
  font-weight: 400;
  margin-top: 0;
}
.en-primary h1 [lang="en"],
.en-primary h2 [lang="en"],
.en-primary h3 [lang="en"] {
  font-style: normal;
}
.en-primary [lang="zh"] {
  display: block;
  font-size: calc(1em * var(--f-en-ratio));
  color: var(--c-muted);
  font-weight: 300;
  margin-top: 0.2em;
}
.en-primary h1 [lang="zh"],
.en-primary h2 [lang="zh"],
.en-primary h3 [lang="zh"] {
  font-family: var(--f-serif);
  font-style: italic;
}
.en-primary .bilingual-inline [lang="zh"] {
  display: inline;
  margin-left: 0.4em;
  font-size: 0.8em;
}