/* Base: reset, type roles, frame. Native scroll only; motion is reduced to changes in place when asked. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-main) + 16px); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: var(--body-size);
  line-height: 1.6; font-weight: 400; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
p, ul, ol, dl, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--amber); color: var(--black); }
main { display: block; }
main:focus { outline: none; }
em, i, cite { font-style: normal; }

/* Type roles */
h1, h2, h3, h4, .display { margin: 0; text-wrap: balance; }
.display { font-size: var(--display-size); font-weight: var(--display-weight); letter-spacing: var(--display-track); line-height: 0.95; }
h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); letter-spacing: -0.04em; line-height: 1.02; }
h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); letter-spacing: -0.035em; line-height: 1.04; }
h3 { font-size: var(--h3-size); font-weight: 480; letter-spacing: -0.02em; line-height: 1.15; }
h4 { font-size: var(--body-size); font-weight: 600; letter-spacing: -0.005em; line-height: 1.35; }
.lede { font-size: var(--lede-size); line-height: 1.42; max-width: 42ch; }
p, li, dd { text-wrap: pretty; }
.small, small { font-size: var(--small-size); line-height: 1.5; }
.label { display: block; font-size: var(--label-size); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3; color: var(--muted); }
.muted { color: var(--muted); }
.amber { color: var(--ember-ink); }

/* Focus: a 3 px ring at 3 px offset; black on light, amber on dark, black on the gradient. */
:focus-visible { outline: 3px solid var(--focus-light); outline-offset: 3px; }
.band--dark :focus-visible, .hero :focus-visible, .site-header :focus-visible, .site-footer :focus-visible,
.panel--dark :focus-visible, .image-band :focus-visible, .tile :focus-visible, .page-opening :focus-visible,
.case-hero :focus-visible, .closing :focus-visible, .case-figures :focus-visible { outline-color: var(--focus-dark); }
.band--gradient :focus-visible { outline-color: var(--focus-gradient); }

/* Frame */
.frame { width: 100%; max-width: calc(var(--frame) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.frame.narrow, .narrow { max-width: calc(760px + 2 * var(--gutter)); }

/* Screen-reader only */
.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; }

/* Entrances: cards and panels rise once as they arrive (site.js adds .rise only to what starts below the fold). */
@media (prefers-reduced-motion: no-preference) {
  /* The transition is on the arrived state only, so a card hides at once when the page loads and never fades out. */
  .js .rise { opacity: 0; transform: translateY(36px); }
  .js .rise.is-in { opacity: 1; transform: none; transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}