/* Reset, typography and layout primitives. No colours here beyond tokens. */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure, blockquote, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
img, svg, canvas { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3 { text-wrap: balance; font-weight: 500; }
p { text-wrap: pretty; }

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

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-left: max(clamp(16px, 4vw, 40px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(16px, 4vw, 40px), env(safe-area-inset-right, 0px));
}

.band { padding-block: clamp(var(--s8), 11vw, var(--s9)); position: relative; }
.band--paper { background: var(--paper); color: var(--ink); }
.band--paper-2 { background: var(--paper-2); color: var(--ink); }
.band--room { background: var(--room); color: var(--paper); }

/* Section label: a running head, as in a reporter. */
.label {
  font: 600 var(--fs-label)/1.2 var(--f-ui);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.band--room .label { color: var(--brass-soft); }
.band--paper .label, .band--paper-2 .label { color: var(--ink-dim); }

.mono { font-family: var(--f-mono); font-feature-settings: "zero" 0; }

h2.display {
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: -.015em;
  font-variation-settings: "opsz" 72;
}
h2.display em { font-style: italic; font-weight: 400; }

.lead {
  font-family: var(--f-display);
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: 46ch;
}

/* The double rule: heavy over light, the mark of a ledger and a statute book.
   It divides sections instead of boxes and shadows. */
.dbl {
  height: 6px;
  border: 0;
  margin: 0;
  background:
    linear-gradient(currentColor, currentColor) top / 100% 3px no-repeat,
    linear-gradient(currentColor, currentColor) bottom / 100% 1px no-repeat;
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

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