/* web-base fundamentals. Never edit per site; moods override only the color and font tokens. */
:root {
  /* spacing, 4px base */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;  --space-4: 1rem;
  --space-5: 1.25rem;  --space-6: 1.5rem;   --space-8: 2rem;     --space-10: 2.5rem;
  --space-12: 3rem;    --space-16: 4rem;    --space-20: 5rem;    --space-24: 6rem;
  --space-32: 8rem;

  /* type scale, ~1.25 ratio, fluid at the top */
  --text-xs: 0.75rem;   --text-sm: 0.875rem;  --text-base: 1rem;   --text-md: 1.125rem;
  --text-lg: 1.25rem;   --text-xl: 1.5rem;    --text-2xl: 1.875rem;
  --text-3xl: clamp(2rem, 1.5rem + 2vw, 2.5rem);
  --text-4xl: clamp(2.5rem, 1.75rem + 3vw, 3.5rem);
  --text-5xl: clamp(3rem, 2rem + 4.5vw, 4.75rem);

  --leading-tight: 1.1;  --leading-snug: 1.25;  --leading-body: 1.55;
  --tracking-tight: -0.02em;  --tracking-tighter: -0.03em;  --tracking-wide: 0.04em;

  --measure-page: 1200px;  --measure-text: 65ch;  --measure-lede: 42ch;

  --radius-sm: 6px;  --radius-md: 10px;  --radius-lg: 16px;  --radius-xl: 24px;  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px hsl(var(--shadow-hue) 20% 10% / 0.06), 0 1px 1px hsl(var(--shadow-hue) 20% 10% / 0.04);
  --shadow-md: 0 2px 4px hsl(var(--shadow-hue) 20% 10% / 0.06), 0 8px 24px hsl(var(--shadow-hue) 20% 10% / 0.08);
  --shadow-lg: 0 4px 8px hsl(var(--shadow-hue) 20% 10% / 0.06), 0 24px 48px hsl(var(--shadow-hue) 20% 10% / 0.12);

  --dur-fast: 150ms;  --dur-base: 200ms;  --dur-slow: 250ms;  --dur-reveal: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* a damped spring, ~7% overshoot (CSS linear(); browsers without it fall back to ease) */
  --ease-spring: linear(0, 0.03, 0.105, 0.209, 0.328, 0.45, 0.569, 0.677, 0.773, 0.855, 0.921, 0.973, 1.012, 1.039, 1.056, 1.065, 1.068, 1.066, 1.061, 1.054, 1.046, 1.038, 1.03, 1.022, 1.016, 1.01, 1.006, 1.002, 1);

  --target-min: 44px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; max-width: var(--measure-text); text-wrap: pretty; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* scrollbars: thin, rounded, token colored, no arrow buttons; a little stronger on hover */
::-webkit-scrollbar { width: var(--space-3); height: var(--space-3); }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 18%, transparent); border: var(--space-1) solid transparent; border-radius: var(--radius-pill); background-clip: padding-box; }
:hover::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--ink) 34%, transparent); }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent; } }
button, input, select, textarea { font: inherit; color: inherit; }
.wrap { width: min(100% - 2 * var(--space-5), var(--measure-page)); margin-inline: auto; }

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