/* Belter, on the web.
   Warm industrial: cream on a near-black that still has brown in it. The belt
   motif is structural rather than a logo dropped in a corner. Amber is the one
   sharp accent and is used sparingly enough to still mean something. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,800&family=Archivo:wght@400;500;700&display=swap');

:root {
  --ink: #17130e;
  --ink-2: #211b14;
  --ink-3: #2d251b;
  --line: #3b3125;
  --cream: #f6efe3;
  --dim: #a2937e;
  --faint: #6f6353;
  --amber: #e68a2e;
  --rust: #c75b12;
  --teal: #3fa294;

  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --body: 'Archivo', 'Helvetica Neue', Helvetica, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 34rem;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.65;
  overflow-x: hidden;
}

/* A little grain, so the flat dark does not read as a void. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

.skip {
  position: absolute;
  left: -9999px;
  background: var(--amber);
  color: var(--ink);
  padding: 0.75rem 1rem;
  z-index: 200;
}
.skip:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* ---------------------------------------------------------------- the belt */

/* The app's mark is a 100 unit square. Here it is the same geometry at
   --slat scale, stretched across the page, so it reads as a belt rather than
   as a stripe pattern. */
.belt {
  --slat: clamp(14px, 2.2vw, 26px);
  --period: calc(var(--slat) * 6.4);
  display: flex;
  flex-direction: column;
  gap: calc(var(--slat) * 0.7);
  overflow: hidden;
}

.belt-row {
  display: flex;
  gap: calc(var(--period) - var(--slat) * 4.8);
  width: max-content;
  will-change: transform;
  animation: roll 3.4s linear infinite;
}
.belt-row span {
  display: block;
  width: calc(var(--slat) * 4.8);
  height: var(--slat);
  border-radius: calc(var(--slat) / 2);
  flex: none;
}

/* Each row is offset and paced differently, exactly as the app's mark is. */
.belt-row:nth-child(1) { margin-left: calc(var(--period) * -0.20); animation-duration: 3.0s; }
.belt-row:nth-child(2) { margin-left: calc(var(--period) * -0.63); animation-duration: 3.9s; }
.belt-row:nth-child(3) { margin-left: calc(var(--period) * -0.42); animation-duration: 3.3s; }
.belt-row:nth-child(4) { margin-left: calc(var(--period) * -0.73); animation-duration: 4.3s; }
.belt-row:nth-child(5) { margin-left: calc(var(--period) * -0.31); animation-duration: 3.6s; }

.belt-row:nth-child(1) span { background: var(--cream); }
.belt-row:nth-child(2) span { background: var(--amber); }
.belt-row:nth-child(3) span { background: var(--teal); }
.belt-row:nth-child(4) span { background: var(--cream); }
.belt-row:nth-child(5) span { background: var(--rust); }

@keyframes roll { to { transform: translateX(calc(var(--period) * -1)); } }

@media (prefers-reduced-motion: reduce) {
  .belt-row { animation: none; }
}

/* ---------------------------------------------------------------- landing */

.hero { padding: 0 0 clamp(3rem, 8vw, 6rem); }
.hero .belt { padding: clamp(1.5rem, 4vw, 2.5rem) 0; border-bottom: 1px solid var(--line); }

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 var(--gutter); }

.lede { padding-top: clamp(2.5rem, 7vw, 5rem); }

h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.4rem, 16vw, 12rem);
  line-height: 0.84;
  letter-spacing: -0.03em;
  margin: 0;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
}

.tagline {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3.4vw, 2.6rem);
  line-height: 1.2;
  font-weight: 400;
  max-width: 24ch;
  margin: 1.5rem 0 0;
  color: var(--cream);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2rem;
  padding: 0.45rem 0.95rem 0.45rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim);
}
.status::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--amber);
}

/* --------------------------------------------------------------- sections */

section.band { padding: clamp(3rem, 8vw, 6rem) 0; border-top: 1px solid var(--line); }

@media (min-width: 60rem) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  section.band > .wrap {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    column-gap: 4rem;
    align-items: start;
  }
  section.band .kicker { grid-column: 1; margin: 0.45rem 0 0; }
  section.band > .wrap > :not(.kicker) { grid-column: 2; }
  /* Same specificity as the rule above, or it loses and the grids stay
     trapped in the narrow column. */
  section.band > .wrap > .grid { grid-column: 1 / -1; }
}

h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}

.kicker {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 1.5rem;
}

p { max-width: var(--measure); }
h2 + p, .big + .big { margin-top: 0; }
.big { font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.55; }

/* Three across on wide screens so both grids fill their rows exactly. Six
   items and three items each divide by three; auto-fit left a hole in the
   second one, which reads as a missing card rather than as white space. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 2.5rem;
}
.cell { background: var(--ink); padding: clamp(1.5rem, 3vw, 2rem); }
.cell h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.cell p { color: var(--dim); margin: 0; font-size: 0.98rem; }

/* The honest section is the one that gets the accent treatment, because on
   this product it is the argument rather than the small print. */
.honest { background: var(--ink-2); }
.honest .cell { background: var(--ink-2); }
.honest .grid { border-color: var(--line); background: var(--line); }
.honest h3 { color: var(--amber); }
.honest .cell:nth-child(2) h3 { color: var(--teal); }

.note {
  border-left: 3px solid var(--rust);
  padding-left: 1.25rem;
  color: var(--dim);
  font-size: 0.95rem;
  max-width: var(--measure);
}

footer {
  border-top: 1px solid var(--line);
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(3rem, 8vw, 5rem);
  color: var(--faint);
  font-size: 0.9rem;
}
footer p { max-width: var(--measure); }
footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1.5rem; }

/* ------------------------------------------------------------------- docs */

body.doc { padding: 0 var(--gutter) 4rem; }
.doc-head { max-width: var(--measure); margin: 0 auto; padding: clamp(2rem, 6vw, 4rem) 0 1.5rem; }
.doc-head h1 { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.05; }
.back {
  display: inline-block;
  margin-bottom: 2rem;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}
.updated { color: var(--faint); font-size: 0.85rem; margin: 0.75rem 0 0; }
/* The faint grey is for metadata like a revision date. Anything somebody has
   to act on gets --dim, which clears 4.5:1 against the page. */
.contact { color: var(--dim); font-size: 1rem; margin: 1rem 0 0; }

body.doc main { max-width: var(--measure); margin: 0 auto; }
body.doc section { margin: 2.5rem 0; }
body.doc h2 {
  font-size: 1.15rem;
  font-family: var(--body);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--amber);
  margin-bottom: 0.75rem;
}
body.doc p { margin: 0 0 1rem; }

.doc-foot {
  max-width: var(--measure);
  margin: 4rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 0.85rem;
}