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

html {
  -webkit-text-size-adjust: 100%;
  
  scroll-padding-top: var(--space-xl);
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul {
  margin: 0;
  padding: 0;
}


ul[class], ol[class] { list-style: none; }

img, svg, video, picture {
  display: block;
  max-width: 100%;
  height: auto;
}



button, input, select, textarea { font: inherit; color: inherit; }


body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--surface-paper);
  
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  
  text-wrap: balance;
}


h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

.t-step-1 { font-size: var(--step-1); }
.t-step-2 { font-size: var(--step-2); }
.t-step-3 { font-size: var(--step-3); }
.t-step-4 { font-size: var(--step-4); }


.t-nowrap { white-space: nowrap; }

p { max-width: var(--measure); }
p + p { margin-top: var(--space-s); }

strong, b { font-weight: 700; }


a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}
a:hover { text-decoration-thickness: 0.14em; }


:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 calc(var(--focus-width) + var(--focus-offset) + 1px) var(--focus-halo);
  border-radius: 2px;
}


a[class], button, summary, [role="button"] {
  min-height: var(--target-min);
}

.skip-link {
  position: absolute;
  left: var(--margin-inline);
  top: 0;
  z-index: 100;
  padding: var(--space-2xs) var(--space-s);
  background: var(--surface-ink);
  color: var(--on-ink);
  transform: translateY(-150%);
}
.skip-link:focus-visible { transform: translateY(0); }


.u-container { padding-inline: var(--margin-inline); }

.u-grid {
  display: grid;
  
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--grid-gutter);
}


.u-span-3, .u-span-4, .u-span-6, .u-span-8, .u-span-12 { grid-column: 1 / -1; }

@media (min-width: 600px) {
  .u-span-3 { grid-column: span 3; }
  .u-span-4 { grid-column: span 4; }
  .u-span-6 { grid-column: span 6; }
  .u-span-8 { grid-column: span 8; }
}


.u-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.u-stack > * + * { margin-top: var(--space-s); }
.u-stack-l > * + * { margin-top: var(--space-l); }

.u-measure { max-width: var(--measure); }




.s-paper  { background: var(--surface-paper);  color: var(--on-paper);   --surface: var(--surface-paper); }
.s-gold   { background: var(--surface-gold);   color: var(--on-gold);    --surface: var(--surface-gold); }
.s-taupe  { background: var(--surface-taupe);  color: var(--on-taupe);   --surface: var(--surface-taupe); }
.s-mint   { background: var(--surface-mint);   color: var(--on-mint);    --surface: var(--surface-mint); }
.s-teal   { background: var(--surface-teal);   color: var(--on-teal);    --surface: var(--surface-teal); }
.s-maroon { background: var(--surface-maroon); color: var(--on-maroon);  --surface: var(--surface-maroon); }
.s-ink    { background: var(--surface-ink);    color: var(--on-ink);     --surface: var(--surface-ink); }


.visually-hidden:not(:focus):not(:active) {
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}


.u-scroll-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}



@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}