html { background: var(--paper); color: var(--ink); }

body {
  min-width: 320px;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.is-leaving { opacity: 0; transition: opacity var(--motion-fast) ease; }
body.menu-open { overflow: hidden; }
main { display: block; }

.canvas {
  width: min(calc(100% - (2 * var(--page-margin))), var(--max-width));
  margin-inline: auto;
}

.fullbleed { width: 100vw; margin-left: calc(50% - 50vw); }
.section { padding-block: var(--section-space); }
.section--tight { padding-block: var(--section-space-tight); }
.section-label { margin-bottom: 28px; }

.meta, .kicker {
  font-size: 10px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.muted { color: var(--muted); }
.serif { font-family: var(--font-serif); }
.rule { border-top: 1px solid var(--rule); }

.media { display: block; width: 100%; height: 100%; overflow: hidden; background: var(--paper-dark); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--contain img { object-fit: contain; }
.ratio-portrait { aspect-ratio: 3 / 4; }
.ratio-landscape { aspect-ratio: 4 / 3; }
.ratio-square { aspect-ratio: 1; }
.ratio-wide { aspect-ratio: 16 / 9; }

.accent-orange { --accent: var(--orange); }
.accent-blue { --accent: var(--blue); }
.accent-neutral { --accent: var(--ink); }

::selection { background: var(--blue); color: var(--paper); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

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