/* Marvin type scale. All website and PNG-export sizes come from these tokens. */
:root {
  --text-h1: 40px;
  --text-hero: 52px;
  --text-h2: 36px;
  --text-h3: 32px;
  --text-h4: 28px;
  --text-h5: 24px;
  --text-h6: 20px;
  --text-p1: 18px;
  --text-p2: 16px;
  --text-p3: 14px;
  --leading-h1: 1.25;
  --leading-h2: 1.25;
  --leading-h3: 1.2;
  --leading-h4: 1.2;
  --leading-ui: 1.4;
  --leading-body: 1.5;
  --page-title-size: var(--text-h1);
  --section-title-size: var(--text-h2);
  --card-title-size: var(--text-h4);
}

body {
  font-size: var(--text-p2);
  line-height: var(--leading-body);
}

/* Libre Baskerville heading variants from the brand guide. */
.text-h1,
h1,
.hero h1,
.question-body h1,
.result-copy h1,
.reveal-view h1 {
  font-family: var(--display);
  font-size: var(--page-title-size);
  line-height: var(--leading-h1);
  letter-spacing: -0.03em;
}

.hero h1 {
  font-size: var(--text-hero);
}

.text-h2,
h2,
.how-heading h2,
.gallery-header h2,
.marvin-updates-header h2 {
  font-family: var(--display);
  font-size: var(--section-title-size);
  line-height: var(--leading-h2);
  letter-spacing: -0.025em;
}

.text-h3 {
  font-family: var(--display);
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  letter-spacing: -0.025em;
}

.text-h4,
.result-card h2 {
  font-family: var(--display);
  font-size: var(--card-title-size);
  line-height: var(--leading-h4);
  letter-spacing: -0.025em;
}

/* Inter variants: smaller titles, body copy, controls, and labels. */
.text-h5 {
  font-family: var(--body);
  font-size: var(--text-h5);
  line-height: var(--leading-ui);
}

.text-h6,
.how-step h3,
.marvin-update-card h3,
.result-discover-title {
  font-family: var(--body);
  font-size: var(--text-h6);
  line-height: var(--leading-ui);
  letter-spacing: 0;
}

.text-p1,
.hero-description {
  font-size: var(--text-p1);
  line-height: var(--leading-body);
  letter-spacing: 0;
}

.text-p2,
p,
.button,
.question-bottom .button,
.result-actions .button,
.gallery-footer .button,
.answer-title,
.result-description,
.reason-box p,
.marvin-update-card p,
.marvin-updates-header p,
.marvin-update-link,
.marvin-text-link,
.button-linkedin .linkedin-mark,
.toast {
  font-size: var(--text-p2);
  line-height: var(--leading-body);
  letter-spacing: 0;
}

.text-p3,
.header-note,
.brand-edition,
.text-button,
.site-header > .text-button,
.quiz-topline .text-button,
.result-topline .text-button,
.edition,
.result-topline .edition,
.quiz-facts,
.mini-proof,
.ghost-tile > span,
.art-sticker,
.art-caption,
.eyebrow,
.how-heading > .eyebrow,
.how-step p,
.step-number,
.question-count,
.question-side-note,
.question-hint,
.answer-letter,
.answer-subtitle,
.question-bottom > span,
.reveal-view p,
.card-topline,
.card-bottomline,
.card-caption,
.trait-pill,
.reason-label,
.reroll-button,
.result-footnote,
.gallery-header p,
.gallery-item figcaption,
.gallery-footer > span,
.marvin-update-tag,
.marvin-jump-link,
.share-formats,
.share-preview,
.share-help,
#share-caption,
.skip-link {
  font-size: var(--text-p3);
  line-height: var(--leading-body);
  letter-spacing: 0;
}

.edition,
.eyebrow,
.reason-label,
.card-topline,
.card-bottomline,
.card-caption {
  letter-spacing: 0.06em;
}

.brand {
  line-height: 1;
}
.reason-label {
  letter-spacing: 0;
}

/* Decorative glyphs use the same scale; they are not additional text styles. */
.tiny-spark,
.text-button span,
.button span,
.reason-label > span,
.close-button {
  font-size: var(--text-h5);
  line-height: 1;
}

.answer-check,
.reroll-button > span {
  font-size: var(--text-h6);
  line-height: 1;
}

.spark-two,
.art-caption > span,
.result-star {
  font-size: var(--text-h3);
  line-height: 1;
}

.spark-one,
.question-doodle,
.star-right {
  font-size: var(--text-h1);
  line-height: 1;
}

@media (max-width: 1100px) {
  :root {
    --text-hero: var(--text-h1);
    --page-title-size: var(--text-h3);
    --section-title-size: var(--text-h3);
  }
}

@media (max-width: 760px) {
  :root {
    --text-hero: var(--text-h3);
    --page-title-size: var(--text-h5);
    --section-title-size: var(--text-h5);
    --card-title-size: var(--text-h5);
  }
}