* { margin: 0; padding: 0; box-sizing: border-box; }

/* Inter 4.1 (rsms/inter, SIL OFL), self-hosted so every platform gets it rather
   than only machines that have it installed. */
@font-face {
  font-family: "InterVariable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/InterVariable.woff2") format("woff2");
}

@font-face {
  font-family: "InterVariable";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/InterVariable-Italic.woff2") format("woff2");
}

:root {
  --font-sans: "Inter Variable", "InterVariable", "Inter", "SF Pro Display", -apple-system, sans-serif;
  /* How tall the fade under the bar at the foot of the window is; see
     .nav-fade. The column's foot clears it, so the last line can scroll out of
     it at every width. */
  --fade-height: 154px;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}

body { overflow-x: clip; }

/* --safe-bg is what the page paints behind everything: the color the iOS status
   bar, home indicator, and rubber-band overscroll have to land on. It is the
   mesh base on the home page and the flat plate on a legal page.

   Alone among the themed values it keys off prefers-color-scheme rather than
   [data-theme], and nothing may set it from script. iOS Safari re-reads the
   page's background when the system appearance flips, but only across a native
   style recalculation — a background the page reaches by way of a JS-set
   attribute lands too late, and the status bar keeps the light color while the
   page turns dark. The media query is that native recalculation.

   color-scheme goes with it: it is what tells the browser both themes exist, so
   its own furniture — scrollbars, the canvas before the stylesheet lands —
   turns over at the same moment. */
:root {
  color-scheme: light dark;
  --safe-bg: #7D9AB3;
}

@media (prefers-color-scheme: dark) {
  :root { --safe-bg: #434548; }
}

html, body {
  background: var(--safe-bg);
  -webkit-user-select: none;
  user-select: none;
}

/* The moving mesh behind the home page, drawn by mesh.js. The canvas overhangs
   the window so the gradient's edges stay out of sight as it moves. */
#mesh-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #7D9AB3;
  transition: background-color 0.8s ease;
}

:root[data-theme="dark"] #mesh-bg { background: #434548; }

#mesh-bg canvas {
  position: absolute;
  left: -15%;
  top: -15%;
  width: 130%;
  height: 130%;
}

/* The bar at the foot of the window sits over a strip of the mesh, so the copy
   scrolling under it fades out rather than running into the links: mesh.js
   paints the strip of mesh under the bar again, over the copy, masked off
   toward the top. Read from its own bottom edge: solid across the lower 35.71%,
   then the curve out over the 64.29% above it. The curve is alpha = 1 − t²,
   sampled every tenth — a plain two-stop ramp reads as a hard edge, because the
   eye finds the point where the slope starts. A legal page has no mesh, so
   there the same strip is its flat color, painted by body::after below. */
.nav-fade,
body.legal-page::after {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--fade-height);
  z-index: 2;
  pointer-events: none;
  --fade-from: 35.71%;
  --fade-span: 64.29%;
  --fade-ramp:
    #000 var(--fade-from),
    rgba(0, 0, 0, 0.99) calc(var(--fade-from) + var(--fade-span) * 0.1),
    rgba(0, 0, 0, 0.96) calc(var(--fade-from) + var(--fade-span) * 0.2),
    rgba(0, 0, 0, 0.91) calc(var(--fade-from) + var(--fade-span) * 0.3),
    rgba(0, 0, 0, 0.84) calc(var(--fade-from) + var(--fade-span) * 0.4),
    rgba(0, 0, 0, 0.75) calc(var(--fade-from) + var(--fade-span) * 0.5),
    rgba(0, 0, 0, 0.64) calc(var(--fade-from) + var(--fade-span) * 0.6),
    rgba(0, 0, 0, 0.51) calc(var(--fade-from) + var(--fade-span) * 0.7),
    rgba(0, 0, 0, 0.36) calc(var(--fade-from) + var(--fade-span) * 0.8),
    rgba(0, 0, 0, 0.19) calc(var(--fade-from) + var(--fade-span) * 0.9),
    transparent calc(var(--fade-from) + var(--fade-span));
  -webkit-mask-image: linear-gradient(to top, var(--fade-ramp));
  mask-image: linear-gradient(to top, var(--fade-ramp));
}

.nav-fade canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The column. */

#copy {
  position: relative;
  z-index: 1;
}

.article-layout {
  width: 100%;
  max-width: 1278px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

#copy-inner {
  width: 830px;
  padding: 96px 0 calc(var(--fade-height) + 39px);
}

#copy-inner :is(h1, h2, h3) { scroll-margin-top: 32px; }

#copy-inner :is(h1, h2, h3, p) { padding-left: 96px; padding-right: 96px; }

#copy-inner ul {
  padding-left: 122px;
  padding-right: 96px;
}

#copy-inner .table-wrap {
  margin: 24px 96px 0;
  overflow-x: auto;
}

/* The page is unselectable (html and body, above); its copy is the exception. */
#copy :is(h1, h2, h3, p, ul, .table-wrap, .rn-meta) {
  -webkit-user-select: text;
  user-select: text;
}

#copy-inner > * + * { margin-top: 20px; }
#copy-inner h2 { margin-top: 56px; }
#copy-inner h2 + p { margin-top: 20px; }
#copy-inner h3 { margin-top: 40px; }
#copy-inner h3 + p { margin-top: 12px; }
#copy-inner ul { margin-top: 16px; }
#copy-inner ul li + li { margin-top: 2px; }

/* The copy's type, white over the mesh; a legal page recolors it below. */

#copy h1 {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 36px;
  font-weight: 590;
  color: #fff;
}

#copy h2 {
  font-family: var(--font-sans);
  font-size: 26px;
  line-height: 34px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
}

#copy h3 {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
}

#copy p,
#copy-inner ul li {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 28px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
}

#copy p.intro em { font-style: italic; }

#copy-inner ul li em {
  font-style: normal;
  font-weight: 590;
  color: #fff;
}

#copy-inner strong { font-weight: 590; color: #fff; }

#copy-inner p a,
#copy-inner ul a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  transition: text-decoration-color 0.2s;
}

#copy-inner p a:hover,
#copy-inner ul a:hover { text-decoration-color: #fff; }

#copy-inner table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 23px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
}

#copy-inner th,
#copy-inner td {
  padding: 12px;
  text-align: left;
  vertical-align: baseline;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

#copy-inner th {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-weight: 590;
  color: #fff;
}

/* The home page: one short letter. Its title sits flush left with the copy, a
   step down from a legal page's title, and keeps the column, so it wraps after
   "is", never inside "joining Variant". The subtitle sits close under it as one
   heading, a hairline closes the heading off, and the letter opens a clear step
   below, a point larger than a legal page's copy. */

body.home #copy-inner > h1 {
  font-size: 48px;
  line-height: 52px;
  font-weight: 500;
  letter-spacing: -0.025em;
}

.nowrap { white-space: nowrap; }

#copy p.rn-tldr {
  font-size: 22px;
  line-height: 30px;
  letter-spacing: -0.012em;
  color: rgba(255, 255, 255, 0.92);
}

#copy-inner h1 + p.rn-tldr { margin-top: 18px; }

#copy-inner .rn-rule {
  margin: 26px 96px 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

#copy-inner .rn-rule + p { margin-top: 26px; }

body.home #copy p:not(.rn-tldr) {
  font-size: 17px;
  line-height: 29px;
  color: rgba(255, 255, 255, 0.9);
  text-wrap: pretty;
}

body.home #copy-inner > p + p { margin-top: 20px; }

/* A legal page: a crumb over a centred title, then the byline. */

body.legal-page #copy-inner > h1 {
  text-align: center;
  font-size: 56px;
  line-height: 58px;
  font-weight: 500;
  letter-spacing: -0.03em;
}

#copy-inner .rn-meta {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 24px;
  margin: 48px 96px;
  padding: 28px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-sans);
}

.rn-meta-label {
  display: block;
  margin-bottom: 2px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  color: #fff;
}

.rn-meta-value {
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
}

/* The bar at the foot of the window. */

#site-nav .nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  z-index: 53;
  font-family: var(--font-sans);
}

.nav-inner {
  max-width: 1278px;
  height: 100%;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
}

/* No hover treatment either way: off the home page the wordmark is a plain link
   home, and on it the wordmark is decoration only. */
.nav-logo {
  display: flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

span.nav-logo { pointer-events: none; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
}

.nav-links a {
  font-size: 14px;
  line-height: 20px;
  color: #fff;
  text-decoration: none;
  transition: color 0.15s;
}

.nav-links a:hover { color: rgba(255, 255, 255, 0.6); }

/* Narrower windows. */

@media (max-width: 1024px) {
  #copy-inner {
    width: auto;
    flex: 1;
    min-width: 0;
    max-width: 830px;
  }
}

@media (max-width: 1023px) {
  #site-nav .nav-bar { height: 54px; }
  .nav-links { gap: 20px; }
  .nav-links a { font-size: 13px; }
  .nav-inner { padding: 0 24px; }
}

@media (max-width: 900px) {
  #copy-inner :is(h1, h2, h3, p) { padding-left: 48px; padding-right: 48px; }
  #copy-inner ul { padding-left: 74px; padding-right: 48px; }
  #copy-inner :is(.table-wrap, .rn-meta, .rn-rule) { margin-left: 48px; margin-right: 48px; }
}

@media (max-width: 767px) {
  .article-layout { padding: 0 24px; }

  #copy-inner { padding-top: 64px; }

  #copy-inner :is(h1, h2, h3) { scroll-margin-top: 24px; }

  #copy-inner :is(h1, h2, h3, p) { padding-left: 0; padding-right: 0; }
  #copy-inner ul { padding-left: 26px; padding-right: 0; }
  #copy-inner :is(.table-wrap, .rn-meta, .rn-rule) { margin-left: 0; margin-right: 0; }

  body.legal-page #copy-inner > h1,
  body.home #copy-inner > h1 {
    font-size: 44px;
    line-height: 46px;
  }

  #copy p.rn-tldr { font-size: 20px; line-height: 28px; }
  #copy-inner h1 + p.rn-tldr { margin-top: 16px; }
  #copy-inner .rn-rule { margin-top: 22px; }
  #copy-inner .rn-rule + p { margin-top: 22px; }
}

@media (max-width: 520px) {
  body.legal-page #copy-inner > h1,
  body.home #copy-inner > h1 {
    font-size: 37px;
    line-height: 39px;
  }

  #copy-inner .rn-meta {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 20px;
  }
}

/* A legal page is flat: black on white, or white on near-black in the dark. */

html:has(body.legal-page) { --safe-bg: #fff; }

@media (prefers-color-scheme: dark) {
  html:has(body.legal-page) { --safe-bg: #0f0f10; }
}

body.legal-page {
  --pg-bg: #fff;
  --pg-fg: #000;
  --pg-body: rgba(0, 0, 0, 0.85);
  --pg-muted: rgba(0, 0, 0, 0.55);
  --pg-faint: rgba(0, 0, 0, 0.5);
  --pg-hair: rgba(0, 0, 0, 0.12);
  --pg-underline: rgba(0, 0, 0, 0.35);
  background: var(--pg-bg);
}

:root[data-theme="dark"] body.legal-page {
  --pg-bg: #0f0f10;
  --pg-fg: #fff;
  --pg-body: rgba(255, 255, 255, 0.85);
  --pg-muted: rgba(255, 255, 255, 0.55);
  --pg-faint: rgba(255, 255, 255, 0.5);
  --pg-hair: rgba(255, 255, 255, 0.12);
  --pg-underline: rgba(255, 255, 255, 0.35);
}

/* The fade under the bar at the foot of the window; see .nav-fade. */
body.legal-page::after {
  content: "";
  background: var(--pg-bg);
}

body.legal-page #copy :is(h1, h2, h3),
body.legal-page #copy-inner :is(strong, ul li em),
body.legal-page .rn-meta-label,
body.legal-page .nav-logo { color: var(--pg-fg); }

body.legal-page #copy p,
body.legal-page #copy-inner ul li,
body.legal-page #copy-inner table { color: var(--pg-body); }

body.legal-page .rn-meta-value { color: var(--pg-faint); }

body.legal-page #copy-inner p a,
body.legal-page #copy-inner ul a {
  color: var(--pg-fg);
  text-decoration-color: var(--pg-underline);
}

body.legal-page #copy-inner p a:hover,
body.legal-page #copy-inner ul a:hover { text-decoration-color: var(--pg-fg); }

body.legal-page #copy-inner th,
body.legal-page #copy-inner td { border-bottom-color: var(--pg-hair); }
body.legal-page #copy-inner th { border-top-color: var(--pg-hair); }

body.legal-page #copy-inner .rn-meta {
  border-top-color: rgba(0, 0, 0, 0.08);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

:root[data-theme="dark"] body.legal-page #copy-inner .rn-meta {
  border-top-color: rgba(255, 255, 255, 0.08);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.legal-page .nav-links a { color: var(--pg-fg); }
body.legal-page .nav-links a:hover { color: var(--pg-muted); }

/* The field the page paints under the status bar is not the html background on
   every page — on the home page it is #mesh-bg, and on a legal page it is the
   body. iOS Safari samples what is actually painted there, and it re-samples on
   a system appearance change only across a native style recalculation.
   Everything else in this stylesheet reaches dark by way of [data-theme], which
   is set from script: correct, but it arrives after that recalculation, so the
   page turns dark and the status bar stays white. These declarations are the
   same values by the native route, so the chrome turns over with the page. The
   [data-theme] rules above still win on specificity and still say the same
   thing; this is a second path to the same color, not a second opinion about
   it. See also --safe-bg at the top. */
@media (prefers-color-scheme: dark) {
  #mesh-bg { background: #434548; }
  body.legal-page {
    --pg-bg: #0f0f10;
    }
}