/* Reset, page defaults and the Figma text styles as reusable classes. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--core-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Clip decorative bleed (hero art, gallery rows, stickers) sideways without
   clipping it vertically. Done on <main>, not <body>: body's overflow is handed
   to the viewport, where it doesn't contain the overflow. */
main {
  display: block;
  overflow-x: clip;
}

h1, h2, h3, h4, p, figure {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Text styles (Figma "Theme" + "Core" styles) ---------- */

.t-hero-title {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--theme-hero-title-size);
  letter-spacing: var(--theme-hero-title-letter-spacing);
  line-height: normal;
  text-transform: uppercase;
}

.t-stat {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--theme-stat-size);
  letter-spacing: var(--theme-stat-letter-spacing);
  line-height: normal;
  text-transform: uppercase;
}

.t-info {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: var(--theme-info-size);
  letter-spacing: var(--theme-info-letter-spacing);
  line-height: normal;
  text-transform: uppercase;
}

.t-button {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: var(--theme-button-size);
  letter-spacing: var(--theme-button-letter-spacing);
  line-height: normal;
  text-transform: uppercase;
}

.t-display {
  font-weight: 900;
  font-size: var(--core-display-size);
  letter-spacing: var(--core-display-letter-spacing);
  line-height: normal;
  text-transform: uppercase;
}

.t-display-light {
  font-weight: 200;
  font-size: var(--core-display-light-size);
  letter-spacing: var(--core-display-light-letter-spacing);
  line-height: normal;
}

.t-title-xl {
  font-weight: 900;
  font-size: var(--core-title-xl-size);
  letter-spacing: var(--core-title-xl-letter-spacing);
  line-height: normal;
  text-transform: uppercase;
}

.t-title-l {
  font-weight: 900;
  font-size: var(--core-title-l-size);
  letter-spacing: var(--core-title-l-letter-spacing);
  line-height: normal;
  text-transform: uppercase;
}

.t-title-m {
  font-weight: 900;
  font-size: var(--core-title-m-size);
  letter-spacing: var(--core-title-m-letter-spacing);
  line-height: normal;
  text-transform: uppercase;
}

.t-overline {
  font-weight: 700;
  font-size: var(--core-overline-size);
  letter-spacing: var(--core-overline-letter-spacing);
  line-height: normal;
  text-transform: uppercase;
}

.t-label {
  font-weight: 700;
  font-size: var(--core-label-size);
  letter-spacing: var(--core-label-letter-spacing);
  line-height: normal;
  text-transform: uppercase;
}

.t-body-lg-medium {
  font-weight: 500;
  font-size: var(--core-body-large-medium-size);
  line-height: var(--core-body-large-medium-line-height);
  letter-spacing: var(--core-body-large-medium-letter-spacing);
}

.t-body-lg {
  font-weight: 400;
  font-size: var(--core-body-large-regular-size);
  line-height: var(--core-body-large-regular-line-height);
  letter-spacing: var(--core-body-large-regular-letter-spacing);
}

.t-caption {
  font-weight: 400;
  font-size: var(--core-caption-size);
  line-height: var(--core-caption-line-height);
  letter-spacing: var(--core-caption-letter-spacing);
}