/* A clear role for each supplied typeface: display, reading and brand accents. */
:root {
  --font-display: 'Peralta', Georgia, serif;
  --font-reading: 'Grandstander', 'Trebuchet MS', sans-serif;
  --font-accent: 'Chicle', Georgia, serif;
  --body: var(--font-reading);
}

body {
  font-family: var(--font-reading);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.16;
  text-wrap: balance;
}

h2, .section-heading h2, .centred-heading h2, .bundle-copy h2, .faq-section h2 {
  font-size: clamp(34px, 3.5vw, 46px);
}

h2 span { display: inline-block; }

.hero h1 {
  font-size: clamp(62px, 6.1vw, 80px);
  line-height: 1.08;
  letter-spacing: 0;
}

h3, .product h3, .steps h3 {
  font-family: var(--font-reading);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.brand {
  font-family: var(--font-reading);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.15;
}
.brand b { font-size: 24px; font-weight: 750; }
.footer-brand { font-family: var(--font-accent); font-size: 32px; }
.desktop-nav, .mobile-nav { font-size: 14px; font-weight: 500; }
.announcement { font-size: 13px; font-weight: 500; }

.eyebrow, .hero .eyebrow {
  font-family: var(--font-reading);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .1em;
  line-height: 1.6;
}

.hero-intro {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  max-width: 45ch;
}
.hero-note, .benefits-inner { font-size: 13px; }
.hero-note { line-height: 1.65; }
.section-heading > p, .centred-heading > p:not(.eyebrow),
.steps p, .bundle-copy > p:not(.eyebrow):not(.bundle-footnote),
.faq-section > div > p:not(.eyebrow), details p, #preview-description {
  font-size: 15px;
  line-height: 1.8;
}
.section-heading > p { max-width: 40ch; text-wrap: pretty; }
.bundle-list { font-size: 14px; line-height: 1.7; }
.bundle-footnote, .shop-note, .resource-count { font-size: 12px; line-height: 1.7; }

.button, .button-small, .nav > .button, .hero-actions .button,
.bundle-copy .button, .closing .button {
  font-family: var(--font-reading);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
}
.button { font-size: 17px; }
.button-small, .nav > .button { font-size: 15px; }
.hero-actions .button, .bundle-copy .button, .closing .button { font-size: 16px; }
.text-button, .hero-actions .text-button, .product-link,
.filter, .peek-tag, .preview-controls button {
  font-family: var(--font-reading);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
.preview-controls button { font-weight: 600; }

.product:not([hidden]) { display: flex; flex-direction: column; }
.product-media { flex-shrink: 0; }
.product-meta {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .025em;
  line-height: 1.6;
  text-transform: none;
}
.product h3 { min-height: 0; margin-bottom: 12px; }
.product-description {
  font-size: 15px;
  line-height: 1.75;
  min-height: 0;
  flex-grow: 1;
}
.product-link { margin-top: auto; }

.cat-band figcaption {
  font-family: var(--font-reading);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
}
summary, .faq-list summary { font-size: 15px; font-weight: 600; line-height: 1.7; }
.closing h2 { font-size: clamp(35px, 3.8vw, 50px); }
.closing p:not(.eyebrow) { font-size: 16px; line-height: 1.7; }
.footer p, .footer > a:not(.footer-brand), .footer small { font-size: 12px; line-height: 1.7; }
.preview-header h2 { font-size: 32px; line-height: 1.2; }
.preview-note { font-size: 12px; line-height: 1.7; }

/* Chicle is reserved for short, playful accents. */
.round-sticker, .step-number { font-family: var(--font-accent); }
.art-caption { font-family: var(--font-reading); font-size: 13px; font-weight: 500; }
.bundle-label { font-size: 10px; font-weight: 600; letter-spacing: .07em; }

@media (max-width: 1100px) {
  .hero h1 { font-size: clamp(40px, 6.2vw, 68px); }
  .hero-intro { font-size: 15px; }
  .hero-actions { gap: 20px; }
  .section-heading { gap: 30px; }
  .section-heading > p { font-size: 14px; max-width: 34ch; }
}

@media (max-width: 800px) {
  h2, .section-heading h2, .centred-heading h2, .bundle-copy h2, .faq-section h2 {
    font-size: 34px;
  }
  .brand { font-size: 14px; }
  .brand b { font-size: 22px; }
  .nav > .button { font-size: 14px; }
  .hero-intro { font-size: 14px; }
  .hero-actions .button { font-size: 14px; }
  .hero-actions .text-button { font-size: 12px; }
  .hero .eyebrow { font-size: 10px; letter-spacing: .07em; }
  .hero-note, .benefits-inner { font-size: 12px; }
  .steps h3, .product h3 { font-size: 22px; }
  .steps p { font-size: 14px; }
  .cat-band figcaption { font-size: 15px; }
  .bundle-copy .button { font-size: 14px; }
  .bundle-list { font-size: 13px; }
  .bundle-label { font-size: 9px; }
}

@media (max-width: 580px) {
  .hero h1 { font-size: clamp(40px, 12.6vw, 61px); line-height: 1.12; }
  .hero .eyebrow, .eyebrow { font-size: 10px; letter-spacing: .085em; }
  .announcement { font-size: 11px; }
  .hero-intro { font-size: 16px; line-height: 1.8; max-width: 38ch; }
  .hero-actions { gap: 20px; }
  .hero-actions .button { font-size: 16px; }
  .hero-actions .text-button { font-size: 13px; }
  .hero-note, .benefits-inner { font-size: 11px; }
  h2, .section-heading h2, .centred-heading h2, .bundle-copy h2, .faq-section h2 {
    font-size: 31px;
    line-height: 1.2;
  }
  .section-heading > p, .centred-heading > p:not(.eyebrow), .steps p,
  .bundle-copy > p:not(.eyebrow):not(.bundle-footnote),
  .faq-section > div > p:not(.eyebrow), details p {
    font-size: 15px;
  }
  .product-meta { font-size: 10px; }
  .product h3 { font-size: 20px; line-height: 1.35; }
  .product-description { font-size: 13px; line-height: 1.8; }
  .product-link, .peek-tag, .filter { font-size: 12px; }
  .peek-tag { padding: 6px 9px; }
  .filter { padding-inline: 12px; }
  .steps h3 { font-size: 22px; }
  .bundle-copy .button { font-size: 16px; }
  .bundle-list { font-size: 14px; }
  .bundle-label { font-size: 9px; }
  .art-caption { font-size: 12px; }
  summary, .faq-list summary { font-size: 14px; }
  .closing h2 { font-size: 32px; max-width: 24ch; }
  .closing p:not(.eyebrow) { font-size: 15px; }
  .closing .button { font-size: 15px; }
  .preview-header h2 { font-size: 27px; }
  #preview-description { font-size: 14px; }
}

@media (max-width: 360px) {
  .brand { font-size: 12px; }
  .brand b { font-size: 19px; }
  .nav > .button { font-size: 12px; }
  .product h3 { font-size: 18px; }
  .filter { padding-inline: 10px; font-size: 11px; }
  .benefits-inner { font-size: 10px; }
}