/* Styleguide page only (/styleguide/) — not used by any production page. */

.styleguide {
  display: grid;
  gap: var(--space-12);
}

.styleguide__section {
  display: grid;
  gap: var(--space-6);
}

.styleguide__section-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-small);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.styleguide__section-copy {
  margin: 0;
  max-width: 58ch;
  color: var(--color-text-muted);
}

.styleguide__stack {
  display: grid;
  gap: var(--space-8);
}

.font-compare {
  display: grid;
  gap: var(--space-8);
}

.font-compare__row {
  display: grid;
  gap: var(--space-2);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.font-compare__label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-small);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.font-compare__sample {
  margin: 0;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1;
  color: var(--color-text);
}

@media (max-width: 720px) {
  .styleguide__page {
    padding-inline: var(--space-6);
  }
}