/* ============================================================================
 * base.css — the reset, the type scale, and the rules that apply everywhere.
 * ==========================================================================*/

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--s4);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); letter-spacing: -0.01em; }

p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

a { color: var(--violet-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--violet); }

img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 var(--s4); padding-left: 1.15em; }
li { margin-bottom: var(--s2); }
li:last-child { margin-bottom: 0; }
strong, b { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s9) 0; }

button { font: inherit; color: inherit; }

/* Focus: always visible, never only on mouse, and legible on both grounds. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.band--dark :focus-visible, .site-footer :focus-visible { outline-color: var(--focus-on-dark); }

::selection { background: var(--violet); color: #fff; }

/* --- type helpers --------------------------------------------------------
 * .eyebrow lives in components.css; it was defined twice and the two copies
 * disagreed about their margin.
 * ------------------------------------------------------------------------*/
.small { font-size: var(--t-small); color: var(--ink-mute); }
.band--dark .small { color: var(--on-dark-mute); }

/* A line of prose stays readable at about 62 characters however wide the
 * container it sits in happens to be. */
.measure { max-width: 62ch; }

/* Inside a .stack the flex gap sets the rhythm on its own, so a child's own
 * bottom margin would add a second, invisible one on top of it. */
.stack > :is(p, h1, h2, h3, h4, ul, ol) { margin-bottom: 0; }

/* --- accessibility ------------------------------------------------------- */
.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;
}

.skip {
  position: absolute; top: -60px; left: var(--s4); z-index: 200;
  background: var(--violet); color: #fff;
  padding: var(--s3) var(--s5); border-radius: 0 0 var(--r) var(--r);
  font-weight: 600; text-decoration: none;
  transition: top var(--d-ui) var(--ease);
}
.skip:focus { top: 0; color: #fff; }

/* The reveal rule and every other piece of scroll motion live in motion.css,
 * which is loaded last. This file keeps only the switch below, which is the
 * one thing that must be impossible to override. */

/* --- motion off ----------------------------------------------------------
 * One switch. Anything that moves is listed here, and nothing moves.
 * ------------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-parallax] { transform: none !important; }
}