html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Cormorant's default old-style 1 reads as a dotless i in a quantity, a price or a date. */
  font-variant-numeric: lining-nums;
  /* clip, not hidden: it creates no scroll container, so the sticky header keeps working with the off-canvas menu. */
  overflow-x: clip;
}
* { box-sizing: border-box; }
body { margin: 0; }
/* The UA's font shorthand on form controls resets it. */
input, select, textarea, button { font-variant-numeric: inherit; }

/* The hidden attribute must beat every display: rule (.btn, scrims), or hidden controls leak onto the page. */
[hidden] { display: none !important; }

/* Reserve the scrollbar gutter so the overlay lock below, which removes it, can't reflow the page behind. */
html { scrollbar-gutter: stable; }
/* An anchor jump (#newsletter, the skip link) lands below the sticky header, not under it. */
html { scroll-padding-top: var(--header-clear); }
/* On <html>: the UA only propagates body's overflow when the root's own is `visible`, which `clip` rules out. */
html.scroll-locked { overflow: hidden; }

/* The self-hosted faces stop at 500; anything bolder is a smeared synthetic weight. */
strong, b { font-weight: 500; }

h1, h2, h3, h4, .serif {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
}
/* The UA margin is in em, so it grew with the display sizes (67px around a 100px title); each component spaces its own. */
h1, h2, h3, h4 { margin: 0; }
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-2); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
  font-weight: 500;
}
a.eyebrow { transition: color var(--dur-1); }
a.eyebrow:hover, a.eyebrow:focus-visible { color: var(--ink); }

/* No underline by default; links inside running text opt back in with .underline-links. */
a { color: inherit; text-decoration: none; }
.underline-links a { text-decoration: underline; text-underline-offset: 3px; }

/* One ring for every link and button a keyboard reaches, drawn outside so it shows on dark buttons too. */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Off screen until a keyboard user tabs to it: the first stop on every page jumps past the header. */
.skip-link {
  position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: var(--z-flash);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
  background: var(--ink); color: var(--bg); font-size: var(--step--1);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

.hair { height: 1px; background: var(--line); border: 0; }

.wrap { width: min(1280px, 100% - 48px); margin-inline: auto; }
.wrap-narrow { width: min(780px, 100% - 48px); margin-inline: auto; }

.muted { color: var(--ink-mute); }
.lede { font-size: var(--step-1); color: var(--ink-soft); }
.small { font-size: 12px; }
.center { text-align: center; }

/* Read out, never drawn: a live region's announcement. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* button_to renders a <form>; this keeps inline controls inline. */
.inline-form { display: inline; }

::selection { background: var(--accent); color: var(--bg); }
mark { padding: 0 0.15em; border-radius: var(--r-sm); background: var(--bg-alt); color: var(--ink); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-pill); }
::-webkit-scrollbar-track { background: transparent; }