/* Reset, type scale, captions. Two families only: Gloock for headlines, Azeret Mono for everything else. No sans-serif anywhere. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: var(--t-base);
  line-height: 1.6;
  font-feature-settings: "tnum" 1, "liga" 0;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; line-height: .95; letter-spacing: -0.01em; }
h1 { font-size: var(--t-hero); max-width: 520px; }
h2 { font-size: var(--t-h2); line-height: 1; margin: 0 0 var(--s-6); }
h3 { font-size: var(--t-h3); line-height: 1.1; }
p { margin: 0 0 var(--s-4); max-width: 62ch; }
a { color: var(--ion); text-decoration: none; transition: color var(--d-state) var(--ease-settle); }
a:hover { color: var(--text); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
code, pre, kbd { font-family: var(--font-mono); }
pre { margin: 0; }
img, svg { max-width: 100%; height: auto; }
svg { display: block; }
:focus-visible { outline: none; box-shadow: var(--focus); }
::selection { background: var(--ion); color: var(--on-ion); }

/* Captions: 10.5px uppercase tracked .14em, --caption. Used for the exposure line, index, status words, "read more ↗". */
.cap {
  font-family: var(--font-mono); font-size: var(--t-cap); font-weight: 400; line-height: 1.6;
  letter-spacing: .14em; text-transform: uppercase; color: var(--caption);
}
.cap-link { color: var(--ion); }
.cap-link:hover { color: var(--text); }
button.cap-link { letter-spacing: .14em; text-transform: uppercase; font-size: var(--t-cap); }
.muted { color: var(--caption); }
.tnum { font-feature-settings: "tnum" 1, "liga" 0; }
.scroll-x { overflow-x: auto; max-width: 100%; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: 100; padding: var(--s-2) var(--s-3); background: var(--bg); border: 1px solid var(--rule); color: var(--text); font-size: var(--t-cap); letter-spacing: .14em; text-transform: uppercase; }
.skip-link:focus { top: var(--s-4); }

/* Hidden attribute always wins over component display rules */
[hidden] { display: none !important; }