@import url("fonts.css");

/* ---------------------------------------------------------------
   Moshi Metrics
   Ground: chart paper. Ink: plotter blue. Second trace: madder red,
   spent only where two readings disagree.
   --------------------------------------------------------------- */

:root {
  --paper:      #e9ede4;
  --paper-2:    #f3f6ee;
  --rule:       #c6d0c0;
  --grid:       rgba(18, 33, 28, .055);
  --grid-major: rgba(18, 33, 28, .10);
  --ink:        #12211c;
  --graphite:   #4e5c55;
  --blue:       #17389b;
  --blue-lift:  #2c55d4;
  --madder:     #a8342a;

  --measure: 63ch;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --rail: 4.5rem;
  --shell: 74rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(to right,  var(--grid) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(to bottom, var(--grid) 0 1px, transparent 1px 32px);
  color: var(--ink);
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-optical-sizing: auto;
  font-size: clamp(1.0625rem, .55vw + .95rem, 1.1875rem);
  line-height: 1.62;
  font-weight: 380;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .nav, .btn, .key, .spec span, .facts dt, .tags li, .foot-name, .wordmark-text, .steps > li::before {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-optical-sizing: none;
}

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--madder); }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: .75rem 1rem;
  z-index: 50;
}
.skip:focus { left: 0; }

/* --- chart rail ------------------------------------------------ */

.rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rail);
  z-index: 5;
  pointer-events: none;
  display: none;
}

.rail-line {
  position: absolute;
  top: 0; bottom: 0;
  right: 0;
  width: 1px;
  background: var(--rule);
}

.rail-marker {
  position: absolute;
  right: 0;
  width: 1.375rem;
  height: 2px;
  background: var(--madder);
  transform: translateY(0);
  will-change: transform;
}

.rail-ticks {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rail-ticks li {
  position: absolute;
  right: 0;
  display: flex;
  align-items: flex-start;
  gap: .375rem;
}

.rail-ticks li::after {
  content: "";
  flex: none;
  width: .6875rem;
  height: 1px;
  margin-top: .3125rem;
  background: var(--ink);
  opacity: .5;
}

.rail-ticks span {
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 78;
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--graphite);
  white-space: nowrap;
  writing-mode: vertical-rl;
  padding-top: .125rem;
}

.rail-ticks li.is-current span { color: var(--madder); }
.rail-ticks li.is-current::after { opacity: 1; background: var(--madder); }

@media (min-width: 68rem) {
  .rail { display: block; }
  body { padding-left: var(--rail); }
}

/* --- masthead --------------------------------------------------- */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 1.5rem var(--gutter) 1.125rem;
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  color: var(--ink);
  text-decoration: none;
}
.wordmark:hover { color: var(--ink); }
.wordmark-mark { display: block; width: 2.75rem; color: var(--blue); }
.wordmark-mark svg { display: block; width: 100%; height: auto; }

.wordmark-text {
  font-variation-settings: "wdth" 108;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.005em;
}

.nav {
  display: flex;
  gap: clamp(.875rem, 2vw, 1.75rem);
  font-variation-settings: "wdth" 92;
  font-size: .875rem;
  font-weight: 500;
}
.nav a { color: var(--graphite); text-decoration: none; padding-bottom: .125rem; }
.nav a:hover { color: var(--ink); box-shadow: inset 0 -1px 0 var(--madder); }
.nav a.nav-say { color: var(--blue); }
.nav a.nav-say:hover { color: var(--blue); box-shadow: inset 0 -1px 0 var(--blue); }

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

.hero {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(2.75rem, 7vw, 5.5rem) var(--gutter) clamp(3.5rem, 8vw, 6rem);
}

.hero-top { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }

@media (min-width: 62rem) {
  .hero-top {
    grid-template-columns: minmax(0, 1.12fr) minmax(24ch, .88fr);
    align-items: end;
    column-gap: clamp(2rem, 4.5vw, 4rem);
  }
}

.hero-title {
  margin: 0;
  font-size: clamp(3.5rem, 10.2vw, 9.25rem);
  font-variation-settings: "wdth" 125;
  font-weight: 700;
  line-height: .82;
  letter-spacing: -.035em;
  text-transform: none;
}

/* the plot: the one place the design raises its voice */

.plot {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
}

.plot canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 3px;
}

@media (min-width: 34rem) { .plot canvas { aspect-ratio: 16 / 9; } }
@media (min-width: 52rem) { .plot canvas { aspect-ratio: 1600 / 470; } }

.plot-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem 1.5rem;
  margin: .75rem 0 .5rem;
}

.key {
  font-variation-settings: "wdth" 85;
  font-size: .75rem;
  font-weight: 500;
  color: var(--graphite);
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
}
.key::before {
  content: "";
  width: 1.125rem;
  height: 2px;
  background: currentColor;
}
.key-a { color: var(--blue); }
.key-b { color: var(--graphite); }
.key-b::before { height: 0; border-top: 2px dotted currentColor; }
.key-d { color: var(--madder); }
.key-d::before { width: .5rem; height: .5rem; border-radius: 50%; }

.plot figcaption {
  max-width: 58ch;
  margin: 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--graphite);
}

.hero-deck {
  max-width: 48ch;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.hero-deck > p { margin: 0 0 1.5rem; font-size: 1.0625em; line-height: 1.55; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-bottom: 0 !important;
}

.btn {
  display: inline-block;
  font-variation-settings: "wdth" 96;
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 3px;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.btn-primary {
  background: var(--blue);
  color: var(--paper-2);
  padding: .8125rem 1.5rem;
}
.btn-primary:hover { background: var(--ink); color: var(--paper-2); }

.btn-quiet {
  color: var(--ink);
  padding: .8125rem 0;
  box-shadow: inset 0 -1px 0 var(--ink);
  border-radius: 0;
}
.btn-quiet:hover { color: var(--madder); box-shadow: inset 0 -1px 0 var(--madder); }

/* --- bands ------------------------------------------------------ */

.band {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5.5rem) var(--gutter);
  border-top: 1px solid var(--rule);
}

.band-title {
  max-width: 24ch;
  margin: 0 0 clamp(2rem, 4vw, 3.25rem);
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  font-variation-settings: "wdth" 90;
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.018em;
}

/* --- what we build: a ledger, not a card grid ------------------- */

.ledger { display: grid; gap: 0; }

.entry {
  padding: 1.75rem 0;
  border-top: 1px solid var(--rule);
}
.entry:first-child { border-top: 0; padding-top: 0; }

.entry h3 {
  margin: 0 0 .625rem;
  font-size: 1.375rem;
  font-variation-settings: "wdth" 104;
  font-weight: 600;
  letter-spacing: -.012em;
}

.entry-lede { margin: 0 0 1.125rem; max-width: var(--measure); }

.entry-lead .entry-lede { font-size: 1.1875em; line-height: 1.52; }

.spec { list-style: none; margin: 0; padding: 0; max-width: 68ch; }
.spec li {
  padding: .5rem 0;
  border-top: 1px solid var(--grid-major);
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--graphite);
  display: grid;
  grid-template-columns: 1fr;
  gap: .125rem;
}
@media (min-width: 34rem) {
  .spec li { grid-template-columns: 9.5rem 1fr; gap: 0 1.25rem; }
}
.spec span {
  font-variation-settings: "wdth" 84;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--blue);
  padding-top: .1875rem;
}

@media (min-width: 52rem) {
  .ledger { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 4rem); }
  .entry-lead { grid-column: 1 / -1; }
  .entry { border-top: 1px solid var(--rule); padding-top: 1.75rem; }
  .entry-lead { border-top: 0; padding-top: 0; }
}

@media (min-width: 52rem) {
  .spec li { grid-template-columns: 8rem 1fr; }
}

/* --- method: a real sequence, so it gets real numbers ----------- */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.steps > li {
  counter-increment: step;
  position: relative;
  padding: 1.5rem 0 1.5rem 3.25rem;
  border-top: 1px solid var(--rule);
}
.steps > li:first-child { border-top: 0; padding-top: 0; }
.steps > li:last-child { padding-bottom: 0; }

.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1.5rem;
  width: 2rem;
  font-variation-settings: "wdth" 70;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1;
  color: var(--graphite);
  opacity: .42;
  font-variant-numeric: tabular-nums;
}
.steps > li:first-child::before { top: 0; }

.steps h3 {
  margin: 0 0 .5rem;
  font-size: 1.25rem;
  font-variation-settings: "wdth" 104;
  font-weight: 600;
  letter-spacing: -.01em;
}
.steps p { margin: 0; max-width: var(--measure); color: var(--graphite); }

@media (min-width: 52rem) {
  .steps { grid-template-columns: 1fr 1fr; column-gap: clamp(2.5rem, 5vw, 5rem); }
  .steps > li { padding-top: 1.5rem; border-top: 1px solid var(--rule); }
  .steps > li:nth-child(-n+2) { padding-top: 0; border-top: 0; }
  .steps > li:nth-child(-n+2)::before { top: 0; }
}

/* --- platforms -------------------------------------------------- */

.two-col { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 52rem) { .two-col { grid-template-columns: 1.05fr 1fr; } }

.col-head {
  margin: 0 0 1.125rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--ink);
  font-size: .9375rem;
  font-variation-settings: "wdth" 88;
  font-weight: 600;
  letter-spacing: .005em;
}

.tags { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.tags li {
  font-variation-settings: "wdth" 88;
  font-size: .875rem;
  font-weight: 500;
  padding: .375rem .6875rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 3px;
}

.col-note { margin: 0; max-width: 42ch; font-size: .9375rem; color: var(--graphite); }

.facts { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 34rem) {
  .facts { grid-template-columns: 7.5rem 1fr; }
  .facts dt { padding: .625rem 1.25rem .625rem 0; }
  .facts dd { padding: .5rem 0; border-top: 1px solid var(--grid-major); }
}
.facts dt {
  font-variation-settings: "wdth" 84;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--blue);
  padding: .625rem 1.25rem .125rem 0;
  border-top: 1px solid var(--grid-major);
}
.facts dd {
  margin: 0;
  padding: 0 0 .625rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--graphite);
}
.facts dt:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 34rem) { .facts dd:first-of-type { border-top: 0; padding-top: 0; } }

/* --- contact: the one dark band --------------------------------- */

.contact {
  max-width: none;
  background: var(--ink);
  color: var(--paper);
  border-top: 0;
  padding: 0;
}

.contact-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter);
}

.contact-title {
  margin: 0 0 1.5rem;
  font-size: clamp(2.75rem, 8vw, 6.25rem);
  font-variation-settings: "wdth" 118;
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--paper);
}

.contact-lede {
  max-width: 56ch;
  margin: 0 0 1.25rem;
  color: #c3cec6;
  font-size: 1.0625em;
}

.contact-mail {
  display: inline-block;
  margin: 1.5rem 0 0;
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 96;
  font-size: clamp(1.125rem, 2.6vw, 1.75rem);
  font-weight: 600;
  color: var(--paper);
  text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--madder);
  padding-bottom: .125rem;
  transition: box-shadow .16s ease, color .16s ease;
}
.contact-mail:hover { color: var(--paper); box-shadow: inset 0 -.75em 0 var(--madder); }

.contact-meta { margin: 1.75rem 0 0; font-size: .9375rem; color: #8d9a92; }

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

.foot {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 1.75rem var(--gutter) 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 2rem;
  font-size: .875rem;
  color: var(--graphite);
}
@media (max-width: 33.99rem) {
  .foot { flex-direction: column; align-items: flex-start; gap: .625rem; }
  .foot-links { flex-direction: column; gap: .375rem; }
}
.foot p { margin: 0; }
.foot-name { font-variation-settings: "wdth" 100; font-weight: 600; color: var(--ink); }
.foot-links { display: flex; gap: 1.5rem; }

/* --- legal pages ------------------------------------------------ */

.legal {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) clamp(3rem, 6vw, 5rem);
}
.legal h1 {
  margin: 0 0 .5rem;
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.028em;
}
.legal .updated { margin: 0 0 2.5rem; font-size: .875rem; color: var(--graphite); }
.legal h2 {
  margin: 2.5rem 0 .75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: 1.1875rem;
  font-variation-settings: "wdth" 96;
  font-weight: 600;
  letter-spacing: -.008em;
}
.legal p, .legal li { max-width: var(--measure); }
.legal p { margin: 0 0 1rem; }
.legal ul { padding-left: 1.125rem; margin: 0 0 1rem; }
.legal li { margin-bottom: .5rem; }
.legal .lead { font-size: 1.125em; }

/* --- motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}