/* --------------------------------------------------------------- reset */

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

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

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-ui);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

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

ul, ol { padding: 0; list-style: none; }

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

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

address { font-style: normal; }

::selection {
  background: var(--c-accent);
  color: var(--c-bg);
}

/* ------------------------------------------------------------ typography */

h1, h2, h3, .display {
  font-family: var(--f-display);
  font-weight: 400;
  font-variation-settings: "opsz" var(--opsz), "SOFT" 0, "WONK" 0;
  line-height: var(--lh-head);
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.display--hero {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: -0.022em;
}

h1, .display--1 { font-size: var(--fs-h1); }
h2, .display--2 { font-size: var(--fs-h2); }
h3, .display--3 { font-size: var(--fs-h3); }

.serif-italic {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" var(--opsz);
}

.eyebrow {
  display: block;
  font-family: var(--f-ui);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--c-ink-soft);
  max-width: 44ch;
}

.prose p + p { margin-top: var(--s-3); }
.prose p { max-width: 62ch; }

.caption {
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
}

.caps {
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  font-size: var(--fs-micro);
}

/* --------------------------------------------------------------- a11y */

.skip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: calc(var(--z-preloader) + 1);
  padding: 0.75rem 1.25rem;
  background: var(--c-ink);
  color: var(--c-bg);
  transform: translateY(-120%);
  transition: transform var(--t-chrome) var(--e-soft);
}

.skip:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 1px solid var(--c-accent);
  outline-offset: 3px;
}

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

main:focus { outline: none; }

/* Smaller screens get a lower optical size (sturdier strokes) and a touch more
   weight, so the display face does not thin out on a phone. */
@media (max-width: 767px) {
  :root { --opsz: 40; }
  .display--hero { font-weight: 450; letter-spacing: -0.015em; }
}

@media (min-width: 768px) and (max-width: 1200px) {
  :root { --opsz: 72; }
}