/* ============================================================
   Base: reset, document typography, focus, layout primitives.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--sp-4)); }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: var(--lh-body);
  color: var(--charcoal);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-weight: 700; line-height: var(--lh-snug); text-wrap: balance; }
p { text-wrap: pretty; }

a { color: var(--ocean); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
input, select { caret-color: var(--turquoise); accent-color: var(--turquoise); }

::selection { background: var(--seafoam); color: var(--charcoal); }
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ---- layout primitives ------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section--tint { background: var(--seafoam-tint); }

.sectionHead {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-6);
}
.sectionHead h2 { font-size: var(--fs-2xl); letter-spacing: -.02em; max-width: 22ch; }
.sectionHead p { margin-top: var(--sp-2); font-size: var(--fs-md); color: var(--slate); max-width: 52ch; }

.sr-only {
  position: absolute; 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;
}

.skipLink {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 100;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm);
  background: var(--ocean-deep); color: var(--on-dark); font-weight: 700;
}
.skipLink:focus { top: var(--sp-3); }

.scroller { scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; }
.scroller::-webkit-scrollbar { height: 8px; }
.scroller::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: var(--r-pill); }
.scroller::-webkit-scrollbar-track { background: transparent; }

/* ---- cross-page transition (progressive: Chromium 126+, Safari 18.2+) --- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
::view-transition-group(search) { animation-duration: .42s; animation-timing-function: var(--ease); }
::view-transition-group(site-header) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;  /* a delayed "both" animation would sit on its hidden first frame */
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  @view-transition { navigation: none; }
}