@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src:
    url("/assets/fonts/newsreader-variable.woff2") format("woff2-variations"),
    url("/assets/fonts/newsreader-variable.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src:
    url("/assets/fonts/inter-variable.woff2") format("woff2-variations"),
    url("/assets/fonts/inter-variable.ttf") format("truetype");
}

:root {
  color-scheme: light;

  --color-shell: #f6f0e4;
  --color-paper: #fffaf2;
  --color-marine-ink: #1c2525;
  --color-deep-tide: #0e2b32;
  --color-tide-soft: #183d42;
  --color-sea-mist: #e7eeeb;
  --color-lagoon: #5f8f91;
  --color-lagoon-ink: #315f62;
  --color-bronze: #80542f;
  --color-bronze-light: #e2c49f;
  --color-muted: #596360;
  --color-line: rgba(28, 37, 37, 0.18);
  --color-line-dark: rgba(255, 250, 242, 0.24);
  --color-focus-light: #0e2b32;
  --color-focus-dark: #fffaf2;
  --color-danger: #713a32;
  --color-danger-ground: #f4e4de;
  --color-internal-ground: #eee1ce;

  /*
    Semantic surface colours keep copy legible when a component moves between
    shell, paper, and deep-tide compositions. Components should consume the
    surface aliases instead of assuming that muted or bronze text sits on a
    light background.
  */
  --color-text-on-light: var(--color-marine-ink);
  --color-muted-on-light: var(--color-muted);
  --color-accent-on-light: var(--color-bronze);
  --color-line-on-light: var(--color-line);
  --color-text-on-dark: var(--color-paper);
  --color-muted-on-dark: #cbd7d3;
  --color-accent-on-dark: var(--color-bronze-light);
  --color-line-on-dark: var(--color-line-dark);
  --surface-text: var(--color-text-on-light);
  --surface-muted: var(--color-muted-on-light);
  --surface-accent: var(--color-accent-on-light);
  --surface-line: var(--color-line-on-light);
  --surface-focus: var(--color-focus-light);

  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Inter", "Aptos", "Segoe UI", Helvetica, Arial, sans-serif;

  --content-max: 1440px;
  --editorial-max: 1280px;
  --reading-max: 58ch;
  --page-gutter: clamp(24px, 4vw, 64px);
  --section-space: clamp(88px, 8.5vw, 144px);
  --section-space-tight: clamp(56px, 5.5vw, 88px);
  --flow-space: clamp(22px, 2.2vw, 32px);
  --grid-gap: clamp(28px, 5vw, 80px);

  --text-xs: 0.75rem;
  --text-sm: 0.88rem;
  --text-base: clamp(1rem, 0.97rem + 0.16vw, 1.125rem);
  --text-lead: clamp(1.08rem, 1rem + 0.34vw, 1.28rem);
  --text-h3: clamp(1.4rem, 1.25rem + 0.62vw, 1.75rem);
  --text-h2: clamp(2.1rem, 1.88rem + 1.05vw, 2.75rem);
  --text-page-h1: clamp(2.9rem, 2.5rem + 1.8vw, 3.75rem);
  --text-home-h1: clamp(3.75rem, 3rem + 3vw, 5rem);
  --text-h1: var(--text-page-h1);

  --line-body: 1.68;
  --line-display: 1.04;
  --line-heading: 1.12;
  --tracking-display: -0.012em;
  --tracking-heading: -0.01em;
  --target-size: 44px;
  --media-radius: 3px;
  --button-radius: 2px;
  --rule-width: 1px;
  --route-accent: var(--color-bronze);
}

html:lang(zh-CN) {
  --font-display: "Noto Serif SC", "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", "STSong", "Microsoft YaHei", sans-serif;
  --font-body: "Noto Sans SC", "Source Han Sans SC", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --reading-max: 34em;
  --line-body: 1.76;
  --line-display: 1.2;
  --line-heading: 1.25;
  --tracking-display: 0;
  --tracking-heading: 0;
}

@media (max-width: 1240px) {
  :root {
    --page-gutter: clamp(28px, 4vw, 48px);
    --grid-gap: clamp(26px, 4vw, 54px);
  }
}

@media (max-width: 680px) {
  :root {
    --page-gutter: 24px;
    --section-space: clamp(70px, 18vw, 96px);
    --section-space-tight: clamp(48px, 12vw, 70px);
  }
}

@media (max-width: 420px) {
  :root {
    --page-gutter: 20px;
    --text-page-h1: clamp(2.5rem, 11vw, 2.9rem);
    --text-home-h1: clamp(3rem, 13vw, 3.45rem);
    --text-h2: clamp(1.875rem, 8.5vw, 2.125rem);
  }
}