/* Homepage type families and a shared reading scale across every page. */
:root {
  --display: 'Outfit', Arial, sans-serif;
  --sans: 'DM Sans', Arial, sans-serif;
  --nav: 'Outfit', Arial, sans-serif;
  --site-copy-size: 20px;
  --site-lead-size: 22px;
  --site-copy-leading: 1.6;
}

body h1, body h2, body h3 { font-family: var(--display); }
body:not([data-concept]) h1 em,
body:not([data-concept]) h2 em { font-style: normal; }
body:not([data-concept]) :is(.about-closing p, .photo-note, .form-heading) { font-style: normal; }

/* Collection controls and product-page details follow the homepage's readable scale. */
body:not([data-concept]) .collection-tabs button { font-size: 20px; font-weight: 600; }
body:not([data-concept]) :is(.size-label, .size-label .text-link, .collection-link) { font-size: 20px; }
body:not([data-concept]) .product-options button { font-size: 22px; line-height: 1.4; min-height: 90px; }
body:not([data-concept]) .product-options button small { font-size: 18px; }
body :is(.category-kicker, .about-eyebrow, .category-product-stage, .about-detail-grid article > span) { font-size: 14px; }
body .category-product-card h2 { font-size: clamp(28px, 2.3vw, 36px); }
body .category-product-weights { font-size: 18px; }
body :is(.category-home-link, .about-closing a) { font-size: 20px; line-height: 1.5; }

/* Wipes photographs have square white margins: frame the whole pack more closely. */
body #collection-panel[aria-labelledby="tab-wipes"] .product-canvas > img {
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 1.5;
  object-fit: cover;
  object-position: center;
}
body .category-product-card--wipes .category-product-image {
  height: auto;
  aspect-ratio: 1.5;
  padding: 12px;
}
body .category-product-card--wipes .category-product-image img {
  height: auto;
  aspect-ratio: 1.5;
  min-height: 0;
  object-fit: cover;
}

body:not([data-concept]) :is(.intro-aside, .model-chapter, .product-details, .layer-list, .contact-copy) > p,
body:not([data-concept]) .layer-list p,
body:not([data-concept]) .fit-banner-right > p,
body:not([data-concept]) .category-product-card .category-product-copy,
body:not([data-concept]) :is(.about-story-card, .about-values-copy, .about-detail-grid) p,
body:not([data-concept]) .about-value-list span {
  font-size: var(--site-copy-size);
  line-height: var(--site-copy-leading);
  max-width: 60ch;
}

body:not([data-concept]) :is(.collection-heading, .details-heading, .category-panel, .about-heading, .about-details-heading) > p,
body:not([data-concept]) .moment-story > p {
  font-size: var(--site-lead-size);
  line-height: var(--site-copy-leading);
  max-width: 55ch;
}

body:not([data-concept]) .collection-heading > p,
body:not([data-concept]) .details-heading > p {
  max-width: 34ch;
}

body:not([data-concept]) .moment-story > p {
  max-width: 36ch;
}

/* Give the legacy homepage heading the same columns as its story copy. */
body:not([data-concept]) .moments-title {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .9fr);
  gap: 9vw;
  align-items: start;
  margin: 0 0 40px;
}

body:not([data-concept]) .moments-title h2 {
  min-width: 0;
  margin: 0;
}

body:not([data-concept]) .moments-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .9fr);
  gap: 9vw;
}

body:not([data-concept]) .about-values-copy > .about-eyebrow {
  justify-content: flex-start;
}

/* Larger copy can determine the animated chapter's height without overlapping controls. */
body:not([data-concept]) .motion-chapters {
  display: grid;
  height: auto;
  min-height: 200px;
}

body:not([data-concept]) .model-chapter {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
}

body .footer-links p {
  font-size: 22px;
  line-height: 1.65;
  max-width: 36ch;
}

/* Footer and product-menu links use the same readable type scale. */
body .footer-links {
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.2vw, 60px);
  align-items: start;
}
body .footer-links > div { min-width: 0; }
body .footer-links > div:last-child { grid-column: auto; display: block; }
body .footer-links h3,
body .footer-links > div:last-child h3 {
  font: 600 20px/1.4 var(--nav);
  letter-spacing: 0;
  width: auto;
  margin: 0 0 18px;
}
body .footer-links a,
body .footer-links button,
body .products-menu a {
  font: 500 20px/1.5 var(--nav);
  min-height: 44px;
}
body .footer-links a,
body .footer-links button { padding-block: 7px; }
body .footer-top > span { font-size: 22px; line-height: 1.4; }
body .footer-top .motion-toggle { font-size: 16px; line-height: 1.4; min-height: 44px; }
body .footer-bottom { font-size: 14px; line-height: 1.6; flex-wrap: wrap; }
body .products-menu { min-width: 330px; max-width: calc(100vw - 48px); }
body .products-menu a { gap: 24px; padding: 16px 20px; white-space: normal; }
body .products-menu a > span:last-child { font-size: 23px; flex: none; }
body .mobile-nav > a { font: 500 20px/1.5 var(--nav); min-height: 48px; }

@media (max-width: 900px) {
  body .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
  body .footer-links > div:first-child { grid-column: 1 / -1; }
  body .footer-links > div:last-child { grid-column: auto; display: block; }
  body .footer-links p { max-width: 48ch; }
}

@media (max-width: 700px) {
  body .footer-top { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
  body .footer-top > .brand { flex-basis: 100%; }
  body .footer-top > span { font-size: 20px; }
  body .footer-links h3,
  body .footer-links > div:last-child h3 { font-size: 19px; margin-bottom: 12px; }
  body .footer-links a,
  body .footer-links button,
  body .products-menu a,
  body .mobile-nav > a { font-size: 18px; }
}

@media (max-width: 480px) {
  body .footer-links { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  body .footer-links > div:first-child,
  body .footer-links > div:last-child { grid-column: auto; }
  body .footer-top > span { flex-basis: 100%; }
}

body .size-dialog > p {
  font-size: 20px;
  line-height: 1.6;
  max-width: 55ch;
}

body .contact-form label,
body .size-dialog form > label,
body .contact-form input,
body .contact-form textarea {
  font-size: 18px;
  line-height: 1.5;
}

body .contact-form .form-status {
  font-size: 18px;
  line-height: 1.6;
}

@media (max-width: 700px) {
  :root {
    --site-copy-size: 18px;
    --site-lead-size: 20px;
  }

  body:not([data-concept]) .collection-tabs button { font-size: 17px; white-space: normal; line-height: 1.3; }
  body:not([data-concept]) :is(.size-label, .size-label .text-link, .collection-link) { font-size: 18px; }
  body:not([data-concept]) .product-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .category-product-weights { font-size: 16px; }
  body :is(.category-home-link, .about-closing a) { font-size: 18px; }

  body:not([data-concept]) .moments-title {
    display: block;
    margin-bottom: 30px;
  }

  body:not([data-concept]) .moments-title h2 {
    margin-top: 18px;
  }

  body:not([data-concept]) .moments-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 35px;
  }

  body:not([data-concept]) .moment-story {
    width: 100%;
    padding: 0;
  }

  body:not([data-concept]) .moment-story > p,
  body:not([data-concept]) .collection-heading > p,
  body:not([data-concept]) .details-heading > p {
    max-width: none;
  }

  body .footer-links p {
    font-size: 20px;
  }

  body .size-dialog > p {
    font-size: 18px;
  }

  body .contact-form label,
  body .size-dialog form > label,
  body .contact-form input,
  body .contact-form textarea,
  body .contact-form .form-status {
    font-size: 16px;
  }
}