/* ==========================================================================
   Base: self hosted fonts, typography, links, focus, utilities
   Font URLs are relative to this file, so the site works from any folder.
   ========================================================================== */

/* Polly Rounded: headings H1 to H6 */
@font-face {
  font-family: "Polly Rounded";
  src: url("../fonts/PollyRounded-Light.woff2") format("woff2"),
       url("../fonts/PollyRounded-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Polly Rounded";
  src: url("../fonts/PollyRounded-Regular.woff2") format("woff2"),
       url("../fonts/PollyRounded-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Polly Rounded";
  src: url("../fonts/PollyRounded-Bold.woff2") format("woff2"),
       url("../fonts/PollyRounded-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Helvetica Neue: body text (Latin subset) */
@font-face {
  font-family: "Helvetica Neue";
  src: url("../fonts/HelveticaNeue-Light.woff2") format("woff2"),
       url("../fonts/HelveticaNeue-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("../fonts/HelveticaNeue-Roman.woff2") format("woff2"),
       url("../fonts/HelveticaNeue-Roman.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("../fonts/HelveticaNeue-Italic.woff2") format("woff2"),
       url("../fonts/HelveticaNeue-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("../fonts/HelveticaNeue-Medium.woff2") format("woff2"),
       url("../fonts/HelveticaNeue-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("../fonts/HelveticaNeue-Bold.woff2") format("woff2"),
       url("../fonts/HelveticaNeue-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched fallbacks. Local Arial is scaled to the average width of each
   web font (measured on this site's copy), so text barely reflows when the web
   fonts finish loading. This keeps layout shift low on slow connections. */
@font-face {
  font-family: "Helvetica Neue Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
  font-weight: 300;
  size-adjust: 97.1%;
}
@font-face {
  font-family: "Helvetica Neue Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
  font-weight: 400;
  size-adjust: 101%;
}
@font-face {
  font-family: "Helvetica Neue Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
  font-weight: 500;
  size-adjust: 104.3%;
}
@font-face {
  font-family: "Helvetica Neue Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold");
  font-weight: 700;
  size-adjust: 100%;
}
@font-face {
  font-family: "Polly Rounded Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
  font-weight: 400;
  size-adjust: 121.6%;
}
@font-face {
  font-family: "Polly Rounded Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold");
  font-weight: 700;
  size-adjust: 114.9%;
}

html {
  scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--heading);
  line-height: var(--leading-tight);
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); line-height: var(--leading-snug); }
h4 { font-size: var(--step-1); line-height: var(--leading-snug); }
h5, h6 { font-size: var(--step-0); line-height: var(--leading-snug); font-weight: 400; }

p,
li,
dd {
  text-wrap: pretty;
}

p + p {
  margin-top: 1em;
}

strong,
b {
  font-weight: 700;
}

a {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: currentColor;
  transition: text-decoration-color var(--dur-fast) ease, text-decoration-thickness var(--dur-fast) ease;
}

a:hover {
  text-decoration-thickness: 3px;
  text-decoration-color: var(--link-hover-line);
}

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

::selection {
  background: var(--accent);
  color: var(--lead);
}

/* Skip link: first focusable element on every page */
.skip-link {
  position: absolute;
  left: var(--space-s);
  top: -100px;
  z-index: 100;
  padding: var(--space-xs) var(--space-s);
  background: var(--lead);
  color: var(--clarity);
  font-weight: 500;
  border-radius: var(--radius-s);
}

.skip-link:focus {
  top: var(--space-s);
  --focus: var(--energy);
}

/* Utilities */
.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;
}

.lede {
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.5;
  color: var(--text);
  max-width: 40ch;
}

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

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

.prose > * + * {
  margin-top: 1em;
}

.prose ul,
.prose ol {
  padding-left: 1.25em;
}

.prose li + li {
  margin-top: 0.4em;
}

.prose li::marker {
  color: var(--depth);
}

.mt-s { margin-top: var(--space-s); }
.mt-l { margin-top: var(--space-l); }
.mt-xl { margin-top: var(--space-xl); }