/* ---------------------------------------------------------------------------
   TOKENS — replace these.
   They are a competent starting point, not this site's identity. Pick a real
   direction (colour, type, layout, one memorable element) and change the values
   here first; everything below is written against the tokens, so the whole site
   follows. Keep the structure, replace the surface.
   --------------------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Type */
  --display: 'Newsreader', Georgia, serif;
  --body: 'Public Sans', system-ui, sans-serif;

  /* A modular scale, one ratio. Add steps rather than one-off sizes. */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.33rem, 1.24rem + 0.44vw, 1.6rem);
  --step-2: clamp(1.77rem, 1.58rem + 0.93vw, 2.34rem);
  --step-3: clamp(2.36rem, 2rem + 1.78vw, 3.43rem);

  /* Spacing. One rhythm, used everywhere. */
  --space-xs: 0.5rem;
  --space-sm: 0.875rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: clamp(4rem, 3rem + 5vw, 7rem);

  /* Colour. Neither end is pure black or pure white, on purpose. */
  --ground: #f6f7f5;
  --surface: #fdfdfc;
  --ink: #16201b;
  --muted: #5c6a63;
  --line: #dfe3de;
  --accent: #2f6b4f;
  --accent-ink: #ffffff;

  /* One radius scale. Mixed corner radii read as careless. */
  --radius: 10px;
  --measure: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #101512;
    --surface: #161d19;
    --ink: #e8ede9;
    --muted: #9aa8a0;
    --line: #29332d;
    --accent: #6cc39a;
    --accent-ink: #0d1310;
  }
}

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-sm);
  /* Descenders on italic display type clip against tight leading. */
  padding-bottom: 0.05em;
}

h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }

p, li { max-width: var(--measure); }
p { margin: 0 0 var(--space-md); }

a { color: var(--accent); text-underline-offset: 0.2em; }

img { max-width: 100%; height: auto; display: block; }

small, .caption { font-size: var(--step--1); color: var(--muted); }

/* Never remove the focus ring without replacing it. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.container {
  width: min(100% - 2.5rem, 68rem);
  margin-inline: auto;
}

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

main { padding-block: var(--space-xl); }

.button {
  display: inline-block;
  padding: 0.8rem 1.75rem;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
  transition: transform 150ms ease;
}
.button:hover { transform: translateY(-2px); }

/* One orchestrated arrival beats scattered micro-interactions. */
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.rise { animation: rise 600ms ease both; }
.rise:nth-child(2) { animation-delay: 80ms; }
.rise:nth-child(3) { animation-delay: 160ms; }

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