:root {
  --paper: #ECEEEA;
  --ink: #16202C;
  --muted: #4A5563;
  --signal: #2747C9;
  --rule: rgba(22, 32, 44, 0.14);
  --ghost: 0.2;

  /* Geometry of the chart. The fixed point sits at (--kx, --ky). */
  --kx: 50%;
  --kx-len: 50vw;  /* the same position as a length, for sizes */
  --ky: 46%;
  --amp: min(30vh, 260px);

  /* The infinity: two loops through the fixed point, one in the upper-right
     quadrant and one in the lower-left, so the label quadrant stays clear.
     Widths are capped so the left loop stays on screen on phones. */
  --lobe-lw: min(calc(2 * var(--amp)), calc(var(--kx-len) - 10px));
  --lobe-rw: min(calc(2 * var(--amp)), calc(100vw - var(--kx-len) - 24px), calc(var(--lobe-lw) * 1.6));
  --lobe-lh: min(var(--amp), var(--lobe-lw));
  --lobe-rh: min(var(--amp), var(--lobe-rw));

  /* Type scale and spacing, shared by every page on the site. */
  --text-display: clamp(2rem, 1.35rem + 2.2vw, 3.5rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --leading-body: 1.45;
  --measure: 34rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.85rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --gutter: 16px;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "URW Palladio L", P052, Charter, "Bitstream Charter", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@supports (height: 1svh) {
  :root { --amp: min(30svh, 260px); }
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0E151E;
    --ink: #DCE2E9;
    --muted: #97A3B1;
    --signal: #8FA4FF;
    --rule: rgba(220, 226, 233, 0.13);
    --ghost: 0.24;
  }
}

@media (max-width: 640px) {
  :root { --kx: 28%; --kx-len: 28vw; --ky: 44%; }
}

/* Base, shared by every page. */

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

html,
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
}

body {
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
}

/* Home page and 404: the chart. */

.field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.axis {
  position: absolute;
  background: var(--rule);
}

.axis-x { left: 0; right: 0; top: var(--ky); height: 1px; }
.axis-y { top: 0; bottom: 0; left: var(--kx); width: 1px; }

/* The static fan: 1 svg unit = 1/1000 of the page width, so the script
   can draw the same curves at the same scale. */
.fan {
  position: absolute;
  left: calc(var(--kx) - 100%);
  top: calc(var(--ky) - var(--amp));
  width: 200%;
  height: calc(2 * var(--amp));
  overflow: visible;
}

.fan path {
  fill: none;
  stroke: var(--ink);
  stroke-opacity: var(--ghost);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.fan path.signal {
  stroke: var(--signal);
  stroke-opacity: 1;
  stroke-width: 1.5;
}

/* The static infinity, drawn as two loops that meet at the fixed point. */
.lobe {
  position: absolute;
  overflow: visible;
}

.lobe-r {
  left: var(--kx);
  top: calc(var(--ky) - var(--lobe-rh));
  width: var(--lobe-rw);
  height: var(--lobe-rh);
}

.lobe-l {
  left: calc(var(--kx) - var(--lobe-lw));
  top: var(--ky);
  width: var(--lobe-lw);
  height: var(--lobe-lh);
}

.lobe path {
  fill: none;
  stroke: var(--signal);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.live {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.js-live /* The static infinity, drawn as two loops that meet at the fixed point. */
.lobe {
  position: absolute;
  overflow: visible;
}

.lobe-r {
  left: var(--kx);
  top: calc(var(--ky) - var(--lobe-rh));
  width: var(--lobe-rw);
  height: var(--lobe-rh);
}

.lobe-l {
  left: calc(var(--kx) - var(--lobe-lw));
  top: var(--ky);
  width: var(--lobe-lw);
  height: var(--lobe-lh);
}

.lobe path {
  fill: none;
  stroke: var(--signal);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.live { display: block; }
.js-live .fan,
.js-live .lobe { visibility: hidden; }

.point {
  position: absolute;
  left: var(--kx);
  top: var(--ky);
  width: 13px;
  height: 13px;
  margin: -6px 0 0 -6px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
}

/* The name labels the fixed point, in the one quadrant no curve crosses. */

.label {
  position: absolute;
  left: calc(var(--kx) + 34px);
  top: calc(var(--ky) + 34px);
  max-width: calc(100% - var(--kx) - 50px);
}

.label::before {
  content: "";
  position: absolute;
  left: -27px;
  top: -27px;
  width: 31px;
  height: 1px;
  background: var(--ink);
  opacity: 0.55;
  transform: rotate(45deg);
  transform-origin: 0 0;
}

.label h1 {
  margin: 0;
  padding-top: 0.06em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--text-display);
  line-height: 1;
  letter-spacing: -0.012em;
  font-kerning: normal;
  white-space: nowrap;
}

.label p {
  margin: var(--space-3) 0 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--muted);
  letter-spacing: 0.005em;
}

.label a {
  color: var(--signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.label a:hover { text-decoration-thickness: 2px; }

.label a:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Short screens (phones in landscape): pull the label closer. */
@media (max-height: 420px) {
  :root { --ky: 40%; --amp: min(28vh, 260px); }
  .label { top: calc(var(--ky) + 26px); }
}

.label p.next { margin-top: var(--space-2); }