/* Final typography layer: one font family and exactly two size levels. */
:root {
  --type-font: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  --type-title: 32px;
  --type-body: 16px;
  --sans: var(--type-font);
  --serif: var(--type-font);
}

/* Important declarations deliberately replace every earlier local type rule,
   including secondary-page selectors and responsive font shorthands. */
body,
body * {
  font-family: var(--type-font) !important;
  font-size: var(--type-body) !important;
  letter-spacing: normal !important;
}

body {
  font-weight: 400;
  line-height: 1.8;
}

body h1,
body h2 {
  font-size: var(--type-title) !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  letter-spacing: -.015em !important;
}

body h3 {
  font-size: var(--type-body) !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
}

/* The name and studio share a level wherever they form a brand identity. */
.brand strong,
.footer-name {
  font-size: var(--type-body) !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
}

.brand-studio,
.brand-studio small,
.footer-name span {
  font-size: var(--type-body) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

.secondary-page .about-intro h1 > span {
  font-size: var(--type-title) !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: -.015em !important;
  margin-top: 6px;
}

/* Keep links readable when the former small captions become body-sized. */
.section-heading,
.hero-caption {
  flex-wrap: wrap;
  row-gap: 14px;
}

.hero-caption p {
  flex-wrap: wrap;
}

.hero-caption h2 > span,
.text-link span,
.secondary-page .text-link > span[aria-hidden],
.card-arrow {
  font-size: var(--type-body) !important;
}

@media (max-width: 760px) {
  :root {
    --type-title: 26px;
    --type-body: 14px;
  }
}