* { box-sizing: border-box; }

[hidden] { display: none !important; }

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

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper-100);
  font: 400 var(--step-0)/1.6 var(--font-body);
  overflow-x: clip;
}

body,
button,
input,
textarea { font-family: var(--font-body); }

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--leading-display);
  text-wrap: balance;
}

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

p,
ul,
ol { margin-block: 0 1em; }

/* Smaller headings need explicit breathing room; the old scale faked it with size alone. */
:is(h1, h2, h3) + :is(p, ul, ol, dl) { margin-top: var(--space-s); }

a {
  color: inherit;
  text-decoration-thickness: .08em;
  text-underline-offset: .2em;
}

a:hover { text-decoration-color: var(--brick); }

button,
input,
textarea { font-size: inherit; }

button { cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--brick);
  outline-offset: 4px;
}

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

.skip-link {
  position: fixed;
  z-index: 100;
  top: var(--space-s);
  left: var(--space-s);
  padding: .7rem 1rem;
  color: var(--white);
  background: var(--brick);
  transform: translateY(-180%);
}

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

.container {
  width: min(calc(100% - 2 * var(--space-m)), var(--content));
  margin-inline: auto;
}

.reading { max-width: var(--reading); }
.section { padding-block: var(--space-xl); }

.section--dark {
  color: var(--paper-100);
  background: var(--forest-900);
}

.section-intro {
  display: grid;
  gap: var(--space-m);
  margin-bottom: var(--space-l);
}

.section-intro p {
  max-width: 40rem;
  margin: 0;
  color: var(--muted);
}

.section--dark .section-intro p { color: var(--paper-200); }

.editorial-label {
  margin: 0 0 var(--space-s);
  color: var(--brick);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.section--dark .editorial-label { color: var(--brick-on-dark); }

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

@media (min-width: 48rem) {
  .section-intro { grid-template-columns: minmax(0, 1.3fr) minmax(18rem, .7fr); }
}

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

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