:root { color-scheme: dark; background: var(--brand-black); }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; }
body { margin: 0; background: var(--brand-black); color: var(--brand-ivory); }
img, picture, canvas, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }

.hg {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.hg a { color: var(--brass); text-decoration: none; transition: color var(--duration-ui) var(--easing-archive); }
.hg :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.hg :focus:not(:focus-visible) { outline: none; }
.hg h1, .hg h2, .hg h3 { text-wrap: balance; }

.section { background: var(--surface); color: var(--ink); }

.container {
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--grid-margin-desktop));
  margin-inline: auto;
  padding-inline: var(--grid-margin-mobile);
}
@media (min-width: 768px) { .container { padding-inline: var(--grid-margin-tablet); } }
@media (min-width: 1200px) { .container { padding-inline: var(--grid-margin-desktop); } }

.section--pad { padding-block: var(--space-9); }
@media (min-width: 768px) { .section--pad { padding-block: var(--space-10); } }
@media (min-width: 1200px) { .section--pad { padding-block: var(--space-11); } }

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

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; z-index: 100; left: var(--space-4);
  top: calc(env(safe-area-inset-top, 0px) + var(--space-4));
  padding: var(--space-3) var(--space-5);
  background: var(--action); color: var(--on-action) !important;
  transform: translateY(-200%);
  transition: transform var(--duration-ui) var(--easing-archive);
}
.skip-link:focus { transform: translateY(0); }

html.is-locked, html.is-locked body { overflow: hidden; }

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