/* PetOS typography: Rethink Sans for the interface, Spectral Italic for editorial emphasis. */
:root {
  --petos-font-sans: var(--petos-rethink), Arial, sans-serif;
  --petos-font-editorial: var(--petos-spectral), Georgia, serif;
  --petos-rose: #F5569B;
  font-family: var(--petos-font-sans);
}

body, button, input, select, textarea {
  font-family: var(--petos-font-sans);
  -webkit-font-smoothing: antialiased;
}

body :is(h1, h2) {
  font-weight: 500 !important;
  letter-spacing: -.046em !important;
}

body h1 { line-height: 1.12 !important; }

body h3 { font-weight: 600 !important; }

body :is(h1, h2) :is(em, .editorial-accent),
body h1 .hero-mark {
  font-family: var(--petos-font-editorial) !important;
  font-size: 1.055em;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: -.038em !important;
  color: var(--petos-rose) !important;
}

html[lang^="zh"] body h1 .hero-mark {
  font-family: inherit !important;
  font-size: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
}

html[lang^="zh"] body :is(h1, h2) :is(em, .editorial-accent) {
  font-family: inherit !important;
  font-size: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
}

body :is(.eyebrow, .moment-kicker, .moment-label, .highlight-label, .highlight-number) {
  font-weight: 600;
}

body :is(.button, .text-link, .petos-nav-cta) { font-weight: 600; }

/* Shared outlined wordmark for site headers, footers, and component examples. */
.brand > .site-logo {
  display: block;
  width: 100px;
  height: auto;
  flex: none;
}

@media (max-width: 640px) {
  .brand > .site-logo { width: 92px; }
}