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

html,
body {
  height: 100%;
}

html {
  /* iOS inflates text in landscape unless this is pinned. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-ink);
  background-color: var(--color-paper);
  background-image:
    radial-gradient(
      120% 90% at 12% 0%,
      oklch(99% 0.02 88 / 0.9) 0%,
      transparent 60%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  /* No rubber-band or pull-to-refresh behind a full-viewport app. */
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

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

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

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  /* Skip the double-tap-to-zoom wait on touch devices. */
  touch-action: manipulation;
}

/* Controls are targets, not text: dragging one must never start a selection. */
button,
select,
input,
label {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

button:disabled {
  cursor: not-allowed;
}

svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:where(button, a, select, input, [tabindex]):focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.eyebrow {
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

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

.icon {
  width: 1.25rem;
  height: 1.25rem;
}

.icon--sm {
  width: 1rem;
  height: 1rem;
}