/* ==========================================================================
   Base: font, reset, focus, motion, utilities
   ========================================================================== */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-ext-wght.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, ol, figure, dl, dd {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-ink);
  text-decoration: none;
}

a:hover {
  color: var(--color-accent);
}

button, input, textarea {
  font: inherit;
  color: inherit;
}

button {
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-6);
  opacity: 1;
}

::selection {
  background: var(--color-ink);
  color: var(--color-bg);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

input:focus-visible,
textarea:focus-visible {
  outline: none; /* fields draw their own ring */
}

/* ---- Entrance animations ------------------------------------------------ */

@keyframes hr-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes hr-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hr-spin {
  to { transform: rotate(360deg); }
}

@keyframes hr-draw {
  from { stroke-dashoffset: 24; }
  to { stroke-dashoffset: 0; }
}

@keyframes hr-pulse {
  0% { box-shadow: 0 0 0 0 var(--color-success-ring); }
  70%, 100% { box-shadow: 0 0 0 7px oklch(0.62 0.15 150 / 0); }
}

/* Add .enter to any element; set --delay inline for the stagger. */
.enter {
  animation: hr-up var(--duration-enter) var(--ease-out) var(--delay, 0s) both;
}

.enter-fade {
  animation: hr-fade 0.6s ease both;
}

/* ---- Page transitions --------------------------------------------------- */

/* Cross-document View Transitions: every link is still a full page load; the
   browser fades the old page out and the new page's .enter animations take
   over. The header is identical on both pages, so it appears to stay put.
   Browsers without support just navigate. Off for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

::view-transition-old(root) {
  animation: hr-fade 0.2s ease reverse both;
}

::view-transition-new(root) {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---- Utilities ---------------------------------------------------------- */

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

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-bg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  color: var(--color-bg);
}

.tabular {
  font-variant-numeric: tabular-nums;
}

[hidden] {
  display: none !important;
}