/* Self-hosted web fonts: the latin subsets Google Fonts serves (Inter Tight is
   one variable file for every weight; OFL). The pages use no other subset.
   Shared by both pages (index.html, how-it-works.html): the fonts, the
   tokens, the nav, the pills, the RER display lines and the error surfaces. */

@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);
  --ring: rgba(242, 241, 237, 0.9);
  --gutter: clamp(16px, 5.21vw, 80px);
  --headline-cap: clamp(34px, 4.4vw, 84px);
  --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;
}

/* Navigation */

.nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  display: flex;
  align-items: center;
  padding: clamp(18px, 3.9vw, 40px) clamp(16px, 4.95vw, 76px) 0 var(--gutter);
}

.wordmark { display: block; width: clamp(64px, 6.64vw, 102px); line-height: 0; }
.wordmark svg { display: block; width: 100%; height: auto; }

.nav-links {
  display: flex;
  gap: clamp(28px, 4.2vw, 65px);
  margin-left: clamp(40px, 6.6vw, 101px);
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--text-soft);
}
.nav-links a { transition: color 160ms ease; }
.nav-links a:hover { color: #fff; }

.nav-cta { margin-left: auto; }

/* 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, .nav-links a:focus-visible, .wordmark: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); }

/* RER display lines (src/brand.js): the font-size is the cap height, each
   word an outline one cap tall, the words --space apart (the lettering's
   own space). Sentences keep together while the column allows; the line's
   rows are 1.29 caps apart. */

.rer-line, .rer-sentence { display: flex; flex-wrap: wrap; gap: 0.29em var(--space); }
.rer-line { line-height: 0; }
.rer-sentence { min-width: 0; }
.rer-word { display: block; flex: none; height: 1em; overflow: visible; fill: currentColor; }

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

/* A line the lettering could not set shows its error in place. */
.inline-error {
  display: inline-block;
  padding: 10px 14px;
  border: 1px solid #ff6b5b;
  border-radius: 10px;
  background: rgba(40, 6, 4, 0.92);
  color: #ffd9d4;
  font: 13px/1.45 var(--mono);
  letter-spacing: 0;
  white-space: pre-wrap;
}

/* A scene that cannot be drawn (src/errors.js): its still in the canvas's
   place and a plain notice over it. A still (assets/stills/, a capture of
   the scene at rest) is hidden until errors.js marks the page, or its
   stage, .scene-failed, or scripts are off (src/no-script.css); hidden, a
   lazy image is never fetched. */
.scene-still { display: none; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.scene-still img { display: block; width: 100%; height: 100%; object-fit: cover; }
.scene-failed .scene-still { display: block; }

.stage-error {
  position: absolute;
  z-index: 4;
  left: var(--gutter);
  bottom: 32px;
  max-width: min(520px, calc(100% - 32px));
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--text-soft);
  font: 400 14px/1.45 var(--ui);
}

/* Narrow: the nav wraps under its own padding. At 900 px and below the
   frame (assets/frame/frame.css) folds the links behind its menu button,
   and it styles the skip link. */

@media (max-width: 900px) {
  .nav { position: relative; flex-wrap: wrap; row-gap: 14px; padding: 18px var(--gutter) 0; }
  :root { --headline-cap: clamp(28px, 9vw, 64px); }
}

@media (max-width: 640px) {
  .nav-links { order: 3; width: 100%; margin-left: 0; gap: 24px; font-size: 15px; }
  .nav .nav-cta { font-size: 14px; }
}

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