/* Reset, typography, links, focus, surfaces, utilities */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"], .plain-list { list-style: none; padding: 0; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select { font: inherit; color: inherit; }
table { border-collapse: collapse; }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 250ms; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

body {
  background: var(--ink);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

[data-surface] { background-color: var(--bg); color: var(--fg); }

h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1, .h1 { font-size: var(--step-4); line-height: 1.0; }
h2, .h2 { font-size: var(--step-3); line-height: 1.08; }
h3, .h3 { font-size: var(--step-2); line-height: 1.08; }
p, li, dd { text-wrap: pretty; }
p { max-width: 66ch; }
.lead { font-size: var(--step-1); line-height: 1.45; }
strong, b { font-weight: 700; }
address { font-style: normal; }
[hidden] { display: none !important; }
.stencil {
  font-family: var(--font-stencil);
  font-weight: 700;
  font-optical-sizing: auto;
  letter-spacing: 0.01em;
  font-variant-numeric: lining-nums tabular-nums;
}
.nums { font-variant-numeric: lining-nums tabular-nums; }

a { color: var(--link, var(--forest)); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--focus, var(--forest)); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

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

html:not(.js) .needs-js { display: none !important; }
.js .no-js-only { display: none !important; }

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  background: var(--lime); color: var(--ink); padding: 12px 18px; font-weight: 700;
  transform: translateY(-160%); transition: transform var(--dur-ui) var(--ease-ui);
}
.skip-link:focus { transform: none; }

/* Nothing may widen the page: bleeds are clipped on the x axis only (clip keeps sticky working). */
main, .site-footer { overflow-x: clip; }

/* Layout */
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--margin)); margin-inline: auto; padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gap); }
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}
.section { padding-block: var(--section-pad); position: relative; }
.section--s { padding-block: var(--section-pad-s); }
.section--flush { padding-block: 0; }

/* Page body leaves room for the cab bar on small screens. */
@media (max-width: 1023.98px) {
  body { padding-bottom: calc(var(--cab-h) + env(safe-area-inset-bottom)); }
}

/* Initial hidden states for motion. Only with JS, only when motion is allowed,
   and released by .motion-off if the motion script does not arrive. */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.motion-off) .h1-line > span { transform: translateY(105%); }
  .js:not(.motion-off) .is-loaded .h1-line > span,
  .js:not(.motion-off).is-loaded .h1-line > span {
    transform: none;
    transition: transform var(--dur-reveal) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 80ms + 60ms);
  }
  /* Hoops: the dash length is the hoop's on-screen length (--hl, set by motion.js). */
  .js:not(.motion-off) .hoop:not(.is-done):not(.hoop--hover) path { stroke-dasharray: var(--hl, 4000px); stroke-dashoffset: var(--hl, 4000px); }
  .js:not(.motion-off) .is-drawn > .hoop:not(.is-done):not(.hoop--hover) path,
  .js:not(.motion-off) .hoop.is-drawn:not(.is-done) path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-arch) var(--ease-arch); }
  .js:not(.motion-off) [data-reveal] { clip-path: inset(100% 0 0 0); }
  .js:not(.motion-off) [data-reveal] > img,
  .js:not(.motion-off) [data-reveal] > video { transform: scale(1.08); }
  .js:not(.motion-off) [data-reveal].is-in {
    clip-path: inset(0 0 0 0);
    transition: clip-path var(--dur-reveal) var(--ease-out);
  }
  .js:not(.motion-off) [data-reveal].is-in > img,
  .js:not(.motion-off) [data-reveal].is-in > video {
    transform: none;
    transition: transform var(--dur-reveal) var(--ease-out);
  }
}
.h1-line { display: block; overflow: visible; overflow-y: clip; overflow-clip-margin: 0; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.h1-line > span { display: block; }