/* ==========================================================================
   Base — reset, document, typography, primitives
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* --- Headings ------------------------------------------------------------
   Heavy, tight and big. The titles carry the brand.                        */

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font);
  font-weight: 800;
  line-height: var(--leading-head);
  letter-spacing: var(--track-head);
  text-wrap: balance;
}

h1 {
  font-size: var(--step-4);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-title);
}

h2 { font-size: var(--step-3); }

h3 {
  font-size: var(--step-2);
  line-height: 1.15;
  letter-spacing: var(--track-sub);
}

h4 {
  font-size: var(--step-1);
  line-height: 1.2;
  letter-spacing: var(--track-sub);
}

p { margin: 0; }

p + p { margin-top: var(--sp-4); }

/* The UA default is `margin: 1em 40px` — that quietly took 80px off the width
   of every record card and endorsement. */
figure,
blockquote,
dl,
dd { margin: 0; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover { text-decoration-thickness: 2px; }

ul, ol { margin: 0; padding: 0; }

strong { font-weight: 700; }

/* --- Focus ---------------------------------------------------------------
   Visible on every interactive element, on both light and dark fields.     */

:focus-visible {
  outline: 2px solid var(--pohutukawa);
  outline-offset: 3px;
  border-radius: 4px;
}

.on-dark :focus-visible { outline-color: var(--white); }

::selection {
  background: var(--ngahere);
  color: var(--white);
}

/* --- Skip link ----------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 100;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--black);
  font-size: var(--step--1);
  font-weight: 700;
  transform: translateY(-200%);
}

.skip-link:focus { transform: none; }

/* --- Shared type primitives ---------------------------------------------- */

.eyebrow {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ngahere);
}

.on-dark .eyebrow { color: var(--moana); }

.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  max-width: var(--measure);
}

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

.prose > :first-child { margin-top: 0; }

.prose p + p,
.prose ul + p,
.prose ol + p { margin-top: var(--sp-4); }

.prose h2 {
  margin-top: var(--sp-7);
  font-size: clamp(1.625rem, 2.4vw, 2.125rem);
  line-height: 1.1;
}

.prose h3 {
  margin-top: var(--sp-6);
  font-size: 1.25rem;
}

.prose h2 + p,
.prose h3 + p,
.prose h2 + ul,
.prose h3 + ul { margin-top: var(--sp-3); }

.prose a { text-decoration-color: currentColor; }

.prose:not(.on-dark *) a { color: var(--ngahere); }

.prose ul {
  margin-top: var(--sp-4);
  padding-left: 0;
  list-style: none;
}

.prose ul li {
  position: relative;
  padding-left: var(--sp-5);
  margin-top: var(--sp-3);
}

.prose ul li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ngahere);
}

.prose ol:not(.steps-list) {
  margin-top: var(--sp-4);
  padding-left: var(--sp-5);
}

.prose ol:not(.steps-list) li + li { margin-top: var(--sp-3); }

.muted { color: var(--muted); }

.on-dark .muted { color: var(--moana); }

/* --- Motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}