/* A consistent Chinese sans-serif stack for the homepage and reading pages. */
:root {
  --font-chinese: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif;
  --serif: var(--font-chinese);
  --font-body: var(--font-chinese);
  --font-display: var(--font-chinese);
}

body { font-family: var(--font-chinese); font-size: 16px; -webkit-font-smoothing: antialiased; }
h1, h2, h3, button { font-family: var(--font-chinese); }
h2 { font-weight: 600; letter-spacing: -.02em; line-height: 1.5; }
h3 { font-weight: 600; letter-spacing: 0; }
.hero h1 { font-weight: 600; font-size: clamp(48px, 4.5vw, 64px); letter-spacing: -.035em; line-height: 1.4; }
.hero-mobile-break { display: none; }
.hero-subtitle { font-size: 17px; line-height: 2; }
.eyebrow { letter-spacing: 1.5px; font-weight: 500; }
.brand strong { font-weight: 600; letter-spacing: 1px; }
.story-copy .lead { font-size: 21px; font-weight: 500; }
.story-copy p { line-height: 2.1; }
.service-character { font-size: 44px; font-weight: 500; }
.services h3 { font-size: 23px; }
.services p, .section-heading > p { font-size: 15px; }
.mini-label, .tags, .readings small { font-size: 12px; }
.tags { flex-wrap: wrap; gap: 8px 18px; }
.tags a { text-decoration: underline; text-underline-offset: 4px; }
.readings h3 { font-size: 24px; }
.readings p, .hand-copy p, details > div { font-size: 14px; }
.reading-word { font-size: 27px; letter-spacing: 4px; font-weight: 500; }
.facts strong { font-family: var(--font-chinese); font-weight: 500; font-size: 38px; }
.facts span { font-size: 12px; }
.classroom-heading, .hand-copy h3 { font-weight: 600; }
.lesson-note { font-size: 11px; }
.reading-card h1 { font-weight: 600; letter-spacing: -.02em; line-height: 1.55; }
.reading-card h2 { font-weight: 600; }
.reading-card p, .reading-card li { font-size: 16px; }

@media (max-width: 800px) {
  .services h3 { font-size: 21px; }
}

@media (max-width: 600px) {
  .hero h1 { font-size: clamp(37px, 10.8vw, 52px); letter-spacing: -.035em; }
  .hero-mobile-break { display: block; }
  .hero-subtitle { font-size: 15px; }
  h2 { font-size: 29px; letter-spacing: -.02em; }
  .story-copy p, .services p, .section-heading > p { font-size: 14px; }
  .story-copy .lead { font-size: 18px; }
  .service-character { font-size: 33px; }
  .readings h3 { font-size: 20px; }
  .readings p { font-size: 13px; }
  .reading-word { font-size: 23px; }
  .facts span { font-size: 11px; }
  .reading-card p, .reading-card li { font-size: 15px; }
}