:root {
  /* color */
  --bg: #faeee4;
  --bg-alt: #fdf6ef;
  --bg-peach: #fde6d9;
  --bg-card: #ffffff;
  --ink: #1c1b1a;
  --ink-2: #5a504a;
  --ink-3: #8a7f79;
  --accent: #e9573c;
  --accent-strong: #d8462c;
  --accent-soft: #f7c9b3;
  --footer-bg: #313131;
  --footer-ink: #f2ece7;
  --line: rgba(28, 27, 26, 0.1);
  --line-strong: rgba(28, 27, 26, 0.16);

  /* type */
  --font-sans: 'PingFang SC','Microsoft YaHei','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --font-mono: "SFMono-Regular", "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;
  --fs-hero: clamp(38px, 4.05vw, 58px);
  --fs-h2: 26px;
  --fs-h3: 17px;
  --fs-body: 15px;
  --fs-small: 12.5px;
  --fs-micro: 11.5px;

  /* shape & spacing */
  --r-card: 10px;
  --r-image: 8px;
  --r-pill: 999px;
  --shadow-card: 0 6px 18px rgba(80, 50, 35, 0.06);
  --shadow-poster: 0 18px 40px rgba(70, 40, 25, 0.18);
  --wrap: 1360px;
  --gutter: 40px;

  /* section heights (1440 design width, measured from UI mockup) */
  --h-header: 100px;
  --h-hero: 451px;
  --h-cat: 222px;
  --h-quick: 273px;
  --h-latest: 273px;
  --h-check: 197px;
  --h-style: 197px;
  --h-faq: 256px;
  --h-footer: 191px;
}

@media (max-width: 1023px) {
  :root {
    --gutter: 28px;
    --fs-h2: 23px;
  }
}

@media (max-width: 599px) {
  :root {
    --gutter: 18px;
    --fs-h2: 21px;
    --h-header: 64px;
  }
}