*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--atlantic-deep); }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0 0 .4em;
  line-height: 1.05;
}
h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); text-transform: uppercase; letter-spacing: .04em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); text-transform: uppercase; letter-spacing: .03em; }
h3 { font-size: 1.25rem; letter-spacing: .02em; }

.editorial {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--atlantic-deep);
}

p { margin: 0 0 1em; max-width: var(--measure); }

.ob-wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.ob-section { padding: clamp(48px, 8vw, 112px) 0; }
.ob-section--tight { padding: clamp(24px, 4vw, 48px) 0; }
.ob-rule { height: 1px; background: color-mix(in oklab, var(--ink) 12%, transparent); border: 0; margin: 0; }

.eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .75rem;
  color: color-mix(in oklab, var(--ink) 55%, transparent);
}

.standfirst {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  color: var(--atlantic-deep);
  max-width: 52ch;
}