/* Three typefaces, three jobs, so the page stops reading as one long block of the same
   text. Instrument Serif carries the two big statements, Archivo the section headings, and
   the monospace stack every number and label, which is what a board about drive times and
   dollars should look like. All self-hosted; the page still loads nothing from anyone. */
/* One variable file, 400 to 700, so the body text is the same family as the headings rather
   than whatever grotesque the operating system supplies. */
@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url("/static/fonts/archivo-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: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("/static/fonts/instrument-serif.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: "Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url("/static/fonts/plex-mono-500.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: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url("/static/fonts/instrument-serif-italic.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;
}

:root {
  /* Without it the browser paints its own light autofill over the fields. */
  color-scheme: dark;

  --bg: #07080a;
  --bg-lift: #0d0f13;
  --panel: #12151a;
  --panel-2: #171b21;
  --line: #232830;
  --line-soft: #1b1f26;
  --edge: #646a76;
  --edge-hover: #8b919c;

  --text: #eceae7;
  --muted: #9a968f;
  /* 5.4:1 on the page and 4.9:1 on the panel a field is drawn on. */
  --dim: #8a857e;

  --accent: #4ea1ff;
  --accent-press: #2e84e6;
  /* The mark's own pink. Decoration and figures only, never the sole carrier of meaning. */
  --brand: #ff6e9c;
  --brand-deep: #b32f4d;

  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-head: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --r-tight: 8px;   /* things you press */
  --r-card: 18px;   /* things that hold content */
  --r-shot: 14px;   /* things that hold a picture */
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* The sticky header would otherwise cover whatever an anchor jumps to. */
  scroll-padding-top: 88px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* One soft light behind the first screen, so the page does not open on flat black. Absolute,
   not fixed: fixed followed the viewport and tinted every screen on the way down. */
.hero { position: relative; }

.hero::before {
  content: "";
  position: absolute;
  /* Kept inside the page: a negative side inset made the document wider than the window and
     put a horizontal scrollbar on every screen. */
  inset: -120px 0 -40px 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55% 60% at 16% 10%, rgba(255, 110, 156, 0.13), transparent 70%),
    radial-gradient(45% 55% at 84% 18%, rgba(78, 161, 255, 0.10), transparent 72%);
}

h1, h2, h3, .wordmark { margin: 0; text-wrap: balance; }

h1 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
}

h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1.14;
  letter-spacing: -0.02em;
}

p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-tight);
}

.wrap { width: min(1120px, calc(100% - var(--s6))); margin-inline: auto; }

/* A small line of mono over a heading, so every section opens with something that is not
   another paragraph of the same text. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s4);
  font: 600 12px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, var(--brand), transparent);
}

/* ---------- header ---------- */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  /* Solid. Anything less let the page smear through the bar as it scrolled under it. */
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
}

.top .wrap {
  display: flex;
  align-items: center;
  gap: var(--s5);
  min-height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: var(--s3);
  margin-right: auto;
  color: inherit;
  text-decoration: none;
}

.brand svg { width: 30px; height: 30px; }

.wordmark {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.top-link {
  color: var(--muted);
  text-decoration: none;
  font: 600 13px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.top-link:hover { color: var(--text); }

.signin {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s3);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  /* Never below 44px tall, so it is a comfortable target on a phone. */
  min-height: 44px;
  padding: var(--s3) var(--s5);
  border: 1px solid transparent;
  border-radius: var(--r-tight);
  font: 600 16px/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease,
              transform 80ms ease;
}

.btn-primary {
  background: var(--accent);
  color: #05111f;
}
.btn[aria-disabled="true"] { opacity: 0.6; cursor: default; }

.btn-primary:hover { background: #6bb2ff; }
.btn-primary:active { background: var(--accent-press); transform: translateY(1px); }

.btn-quiet {
  background: transparent;
  border-color: var(--edge);
  color: var(--text);
}
.btn-quiet:hover { border-color: var(--edge-hover); background: var(--bg-lift); }

/* ---------- hero ---------- */

.hero { padding: var(--s8) 0 var(--s7); }

.hero h1 {
  font-size: clamp(42px, 6vw, 74px);
  line-height: 1.04;
  max-width: 16ch;
}

/* The turn of the sentence, set apart by colour alone. */
.hero h1 em {
  font-style: normal;
  color: var(--brand);
}

.hero .lede {
  margin-top: var(--s5);
  max-width: 54ch;
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--muted);
}

.hero .lede b { color: var(--text); font-weight: 600; }

.fineprint {
  margin-top: var(--s4);
  font: 13px/1.6 var(--font-mono);
  color: var(--muted);
}

.fineprint b { color: var(--text); font-weight: 700; }

/* The reply line above it already holds a line of space, so the usual gap on top of that
   left the fine print floating away from the form it qualifies. */
.hero .fineprint { margin-top: 0; }

/* ---------- the board picture ---------- */

.shot {
  margin-top: var(--s6);
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-shot);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

/* It sits inside a block now, which supplies its own gap. */
.block .shot { margin-top: 0; }

.shot img { width: 100%; border-radius: 4px; }

/* The phone crop is a different shape from the wide one, and some browsers ignore width and
   height on a source element, which reserved the box at the wrong ratio. */
@media (max-width: 700px) {
  .shot img { aspect-ratio: auto 560 / 840; }
}

/* ---------- live counts ---------- */

.counts:not(:has(.count:not([hidden]))) { display: none; }

.counts {
  display: grid;
  /* Three across where they fit. At 320 pixels a six-figure count overflowed its third of
     the row, and a number has nowhere to break. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr));
  gap: var(--s3);
  margin-top: var(--s7);
}

.count {
  padding: var(--s4) var(--s4) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), transparent);
}

.count b {
  display: block;
  font: 700 30px/1.1 var(--font-mono);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.count span {
  display: block;
  margin-top: var(--s2);
  font: 11px/1.3 var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ---------- alternating blocks ---------- */

.block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 424px);
  align-items: start;
  gap: var(--s8);
  padding: var(--s8) 0;
}

.block.solo { grid-template-columns: 1fr; }
.block.solo p { max-width: 62ch; }

/* The picture leads on one, the words on the other. Reading order in the markup stays
   words-then-picture whichever side the picture is drawn on. */
.block.picture-left { grid-template-columns: minmax(0, 424px) minmax(0, 1fr); }
.block.picture-left .words { order: 2; }
.block.picture-left .figure { order: 1; }

.block p { margin-top: var(--s4); color: var(--muted); max-width: 46ch; text-wrap: pretty; }

/* A rule between sections instead of a stretch of nothing. The coverage block opens its own
   section, so the sibling selector alone would skip the one divider before it. */
.block + .block,
#coverage.block { border-top: 1px solid var(--line-soft); }

/* The hero already ends in padding of its own, and the two together left a band of nothing
   between the last line of the hero and the first section. */
.hero + .wrap > .block:first-child { padding-top: var(--s6); }

/* Pictures are framed as shipped. Nothing here crops: a ratio plus cover once shaved the
   legend off the bottom of the housing figure. */
.figure {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-shot);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

/* Never drawn wider than the file: the match card is 387 pixels and was being stretched to
   398, which softened its text. */
.figure img { width: auto; margin-inline: auto; border-radius: 4px; }

/* The frame is capped instead of the picture, so the mat is 12 pixels on every side rather
   than 12 above and 70 at the sides. */
.figure { max-width: 424px; }
.figure img { max-width: 100%; }

/* ---------- the field ---------- */

.form.signup {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s6);
  max-width: 520px;
}

.form.signup label { flex: 1 1 240px; display: flex; }

.form input {
  width: 100%;
  min-height: 48px;
  padding: var(--s3) var(--s4);
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r-tight);
  color: var(--text);
  font: 16px/1.4 var(--font-body);
}

.form input::placeholder { color: var(--dim); }
.form input:hover { border-color: var(--edge-hover); }
.form.signup .btn { min-height: 48px; }

/* A field a person never sees and never fills. */
.trap,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Holds its line whether or not it has anything to say, so nothing moves on submit. */
.answer { margin-top: var(--s2); font: 14px/1.5 var(--font-mono); min-height: 1.5em; }
.answer.good { color: #7ad3a4; }
.answer.bad { color: #ff9b8f; }

/* Who is actually hiring on the board. The only proof a new board has. */
.names {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--line-soft);
  font: 15px/1.7 var(--font-body);
  color: var(--muted);
}

/* The coverage list is not a claim, and was shouting at the same size as the three that are. */
#coverage h2 { font-size: clamp(21px, 2vw, 26px); }
#coverage h2 { max-width: 40ch; }

/* ---------- closing ---------- */

.closing {
  position: relative;
  padding: var(--s9) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(70% 130% at 50% 0%, rgba(255, 110, 156, 0.10), transparent 70%),
    var(--bg-lift);
  text-align: center;
}

.closing h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 52px);
  letter-spacing: -0.01em;
  margin-bottom: var(--s5);
}

.closing .form { justify-content: center; margin-inline: auto; margin-top: 0; }
.closing .answer,
.closing .fineprint { text-align: center; }

/* ---------- footer ---------- */

.foot {
  padding: var(--s7) 0 var(--s8);
  font: 13px/1.7 var(--font-mono);
  color: var(--dim);
}

.foot .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s8); }
.foot p { max-width: 54ch; }

/* A phone has no hover, so a link that only underlines on hover never looks like a link. */
.foot a { color: var(--accent); text-decoration: underline; transition: color 120ms ease; }
.foot a:hover { color: #6bb2ff; }

/* ---------- narrow ---------- */

@media (max-width: 860px) {
  body { font-size: 16px; }
  .wrap { width: calc(100% - var(--s5)); }

  /* A phone column is 366 pixels wide. Desktop breathing room between sections reads as a
     third of a screen carrying nothing. */
  .hero { padding: var(--s5) 0 var(--s6); }
  .hero h1 { max-width: 16ch; }
  .hero .lede { margin-top: var(--s4); }
  .form.signup { margin-top: var(--s5); }
  .fineprint { margin-top: var(--s3); }
  /* The three figures have to clear the fold, which is about 664 pixels down. */
  /* Three across, always. The desktop minimum of 128 pixels needs 400 to fit three, so a
     390 phone put the third figure alone on a second row. */
  .counts { margin-top: var(--s4); gap: var(--s2); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .count { padding: var(--s3); border-radius: 12px; }
  /* A column is 101 pixels at 360, so a six-figure count has to fit in it. */
  .count b { font-size: clamp(17px, 5.4vw, 22px); }
  .count span { font-size: 10px; letter-spacing: 0.06em; }
  .names { margin-top: var(--s4); padding-top: var(--s4); font-size: 12.5px; }

  .block,
  .block.solo,
  .block.picture-left {
    grid-template-columns: 1fr;
    gap: var(--s5);
    padding: var(--s6) 0;
  }
  /* One column reads top to bottom, so the words come first in every block. */
  .block.picture-left .words,
  .block.picture-left .figure { order: 0; }
  .figure { margin-inline: auto; }

  /* The bar is 57 pixels here, not 68, so an anchor jump was landing 31 pixels low. */
  html { scroll-padding-top: 72px; }

  .closing { padding: var(--s7) 0; }

  .top .wrap { min-height: 56px; }
  .top-link { display: none; }
  .top-link.signin { display: inline-flex; }

  /* A button beside a field that already fills the width ends up half a thumb wide. */
  .form.signup label { flex: 1 1 100%; }
  .form.signup .btn { flex: 1 1 100%; width: 100%; }

  /* One column. Two 136px columns broke the attribution into five ragged lines. */
  .foot { padding: var(--s6) 0 var(--s7); }
  .foot .wrap { grid-template-columns: 1fr; gap: var(--s4); }
  .foot p a { display: inline-block; padding: var(--s3) 0; }
}

/* At 320 a third of the row is 93 pixels, and the padding alone took a quarter of it. */
@media (max-width: 380px) {
  .count { padding: var(--s3) var(--s2); }
}

/* ---------- wide hero ---------- */

/* Everything in the hero lived in the left half, so the first thing a visitor saw was a
   large hole on the right. The counts move opposite the form. */
@media (min-width: 1024px) {
  .hero .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
    column-gap: var(--s9);
    align-items: start;
  }

  .hero .eyebrow,
  .hero h1,
  .hero .lede,
  .hero-form,
  .hero .answer,
  .hero .fineprint { grid-column: 1; }

  .counts {
    grid-column: 2;
    grid-row: 1 / span 6;
    grid-template-columns: 1fr;
    align-self: start;
    gap: var(--s3);
    margin-top: var(--s1);
  }

  .names { grid-column: 1 / -1; }
}

/* ---------- plain text page ---------- */

.prose { padding: var(--s8) 0 var(--s9); }

.prose h1 {
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.06;
}

.prose h2 { font-size: 21px; margin-top: var(--s7); }
.prose p { margin-top: var(--s3); color: var(--muted); max-width: 66ch; }
.prose ul { margin-top: var(--s3); padding-left: 1.25em; color: var(--muted); max-width: 66ch; }
.prose li + li { margin-top: var(--s2); }
.prose table { margin-top: var(--s3); border-collapse: collapse; color: var(--muted); max-width: 66ch; }
.prose th, .prose td { border: 1px solid var(--line); padding: var(--s2) var(--s3); text-align: left; vertical-align: top; }