/* Design tokens, font faces and base element styles. */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* spacing, 8pt grid */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* type scale, ratio 1.25 */
  --text-xs: 0.8rem;
  --text-sm: 0.9rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.563rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;
  --text-4xl: 3.052rem;
  --text-display: 3.815rem;

  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-body: "Atkinson Hyperlegible Next", "Segoe UI", Verdana, sans-serif;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.6;

  /* timing */
  --duration-instant: 120ms;
  --duration-fast: 220ms;
  --duration-base: 600ms;
  --duration-slow: 1200ms;
  --stagger: 70ms;

  /* easing: one signature curve for entrances, one for presses */
  --ease-primary: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-press: cubic-bezier(0.3, 0.7, 0.4, 1);

  /* shape rule: controls are pills, surfaces 16px, inputs 10px */
  --radius-pill: 999px;
  --radius-surface: 1rem;
  --radius-input: 0.625rem;
  --radius-photo: 1.5rem;

  --border-hairline: 1px;
  --border-strong: 2px;
  --focus-ring: 3px;

  --measure: 62ch;
  --page-max: 78rem;
  --page-gutter: clamp(1.25rem, 4vw, 3rem);
  --header-height: 4.25rem;

  /* z-index scale */
  --z-base: 1;
  --z-sticky: 20;
  --z-header: 40;
  --z-overlay: 60;

  /* color, light theme */
  --color-bg: #f4f6f1;
  --color-surface: #fcfdfa;
  --color-tint: #e6ece2;
  --color-line: #cbd5cc;
  --color-ink: #10201b;
  --color-ink-soft: #3e4f48;
  --color-brand: #0e4a3c;
  --color-brand-deep: #0a2e26;
  --color-accent: #f2a516;
  --color-accent-ink: #10201b;
  --color-on-deep: #eef3ec;
  --color-on-deep-soft: #b7c9c0;
  --color-danger: #a3271b;
  --color-success: #0e6b4a;
  --shadow-surface: 0 1px 2px rgb(14 74 60 / 0.06), 0 12px 32px -12px rgb(14 74 60 / 0.18);
  --shadow-lift: 0 2px 4px rgb(14 74 60 / 0.08), 0 24px 48px -16px rgb(14 74 60 / 0.28);
}


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

html {
  font-size: 112.5%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
  -webkit-text-size-adjust: 100%;
}

html[data-text="large"] {
  font-size: 131.25%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 em,
h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-brand);
}

p {
  text-wrap: pretty;
}

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

img {
  height: auto;
}

a {
  color: var(--color-brand);
  text-decoration-thickness: var(--border-hairline);
  text-underline-offset: 0.2em;
}

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

button {
  cursor: pointer;
}

:focus-visible {
  outline: var(--focus-ring) solid var(--color-accent);
  outline-offset: var(--focus-ring);
  border-radius: var(--radius-input);
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-overlay);
  padding: var(--space-3) var(--space-6);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-radius: var(--radius-pill);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

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

/* Dark theme, chosen by the visitor with the header button. Light is the default. */

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0b1714;
  --color-surface: #11221d;
  --color-tint: #16302a;
  --color-line: #2a473e;
  --color-ink: #e9efe9;
  --color-ink-soft: #a9b9b1;
  --color-brand: #8ad4ba;
  --color-brand-deep: #071210;
  --color-on-deep: #e9efe9;
  --color-on-deep-soft: #a9b9b1;
  --color-danger: #ff9a8d;
  --color-success: #8ad4ba;
  --shadow-surface: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 32px -12px rgb(0 0 0 / 0.5);
  --shadow-lift: 0 2px 4px rgb(0 0 0 / 0.3), 0 24px 48px -16px rgb(0 0 0 / 0.6);
}