/* The plain pages' base: the three.js pages' fonts, tokens and pills, as
   story/src/base.css sets them, and the skip link. The nav and footer are
   the frame's (frame.css, which every page loads). */

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'RER Display';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(/assets/fonts/rer-display.woff2) format('woff2');
}

:root {
  color-scheme: dark;
  --ink: #000;
  --paper: #f3f1ec;
  --text: #ecebe7;
  --text-soft: #d9d8d3;
  --text-faint: #a9a8a4;
  --hairline: rgba(236, 235, 231, 0.62);
  --rule: rgba(236, 235, 231, 0.16);
  --ring: rgba(242, 241, 237, 0.9);
  --gutter: clamp(16px, 5.21vw, 80px);
  --section-space: clamp(120px, 12vw, 230px);
  --ui: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* RER Display, the RER lettering as a variable font (story/assets/fonts/
   rer-display.woff2, from scripts/rer-font/build.mjs): wght 400 Regular to
   700 Bold, wdth 75% to 125% through font-stretch. Its em is the cap height,
   so the font-size is the cap height, as on the RER display lines. P, A, R
   and 0 are the closed text forms; .rer-wordmark-forms sets the wordmark's
   open ones (ss01). No page uses it yet. */
.rer-display {
  font-family: 'RER Display', var(--ui);
  font-weight: 700;
  font-stretch: 100%;
  font-synthesis: none;
  font-kerning: normal;
  line-height: 1.18;
  letter-spacing: 0;
  text-transform: uppercase;
}
.rer-wordmark-forms { font-feature-settings: 'ss01'; }

/* The skip link, as story/src/base.css sets it: styled from the page's
   head, so it is never drawn before the frame's stylesheet (linked after it
   in the header block) arrives. */
.skip-link {
  position: absolute;
  z-index: 10;
  left: var(--gutter);
  top: 12px;
  --rer-h: calc(1lh + 20px);
  padding: 10px 18px;
  border-radius: calc(var(--rer-h) * var(--rer-corner)) var(--rer-radius);
  background: var(--paper);
  color: #0d0d0d;
  font-size: 15px;
  font-weight: 500;
  transform: translateY(calc(-100% - 24px));
}
.skip-link:focus { transform: none; outline: 2px solid #fff; outline-offset: 3px; }

/* Pills */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  --rer-h: clamp(44px, 3.4vw, 54px);
  height: var(--rer-h);
  padding: 0 clamp(20px, 2.2vw, 34px);
  border-radius: calc(var(--rer-h) * var(--rer-corner)) var(--rer-radius);
  font-size: clamp(15px, 1.17vw, 18px);
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.pill .arrow { font-weight: 400; transform: translateY(-0.02em); }
.pill-solid { background: var(--paper); color: #0d0d0d; }
.pill-solid:hover { background: #fff; }
.pill-outline { border: 1px solid rgba(236, 235, 231, 0.78); color: var(--text); }
.pill-outline:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); }
.pill:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.nav .nav-cta { --rer-h: clamp(40px, 3.3vw, 51px); padding: 0 clamp(18px, 1.95vw, 30px); }

/* Narrow: the story's spacing. */

@media (max-width: 900px) {
  :root { --section-space: clamp(96px, 16vw, 136px); }
}

@media (max-width: 480px) {
  :root { --gutter: 16px; --section-space: 96px; }
}