@font-face { font-family: Stencil; src: url(/fonts/stencil.ttf); font-weight: 900; font-display: swap; }
@font-face { font-family: Barlow; src: url(/fonts/barlow-600.ttf); font-weight: 600; font-display: swap; }
@font-face { font-family: Barlow; src: url(/fonts/barlow-700.ttf); font-weight: 700; font-display: swap; }
@font-face { font-family: Plex; src: url(/fonts/plex-400.ttf); font-weight: 400; font-display: swap; }
@font-face { font-family: Plex; src: url(/fonts/plex-500.ttf); font-weight: 500; font-display: swap; }
@font-face { font-family: PlexMono; src: url(/fonts/mono-500.ttf); font-weight: 500; font-display: swap; }

:root {
  --paper: #EDE4CF; --sheet: #FFFDF8; --ink: #1C1A16; --soft: #5E574A;
  --rule: #D8CCB0; --signal: #E5481B; --go: #2E6A3A; --stripe: #1C1A16;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #070A08; --sheet: #121A15; --ink: #EEF4EF; --soft: #9FB0A4;
    --rule: #26302A; --signal: #3DDC84; --go: #3DDC84; --stripe: #070A08;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.65 Plex, -apple-system, "Segoe UI", sans-serif;
}
.hazard {
  height: 10px;
  background: repeating-linear-gradient(-45deg, var(--signal) 0 12px, var(--stripe) 12px 24px);
}
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px 64px; }
header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 28px 0 20px; flex-wrap: wrap; }
.mast { text-decoration: none; color: var(--ink); line-height: .86; display: block; }
.mast .go { font: 900 26px/1 Stencil, sans-serif; color: var(--signal); letter-spacing: .02em; }
.mast .launch { font: 900 56px/.9 Stencil, sans-serif; display: block; }
nav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
nav a {
  font: 600 13px/1 Barlow, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; border: 2px solid var(--ink); padding: 8px 10px;
}
nav a[aria-current] { background: var(--ink); color: var(--paper); }
nav .langs { display: flex; }
nav .langs a { border-width: 2px 0 2px 2px; padding: 8px 8px; }
nav .langs a:last-child { border-right-width: 2px; }
.sheet { background: var(--sheet); border: 2px solid var(--ink); padding: 28px 22px 32px; position: relative; }
.eyebrow { font: 500 13px/1 PlexMono, monospace; letter-spacing: .08em; color: var(--signal); text-transform: uppercase; }
h1 { font: 700 40px/1.05 Barlow, sans-serif; margin: 10px 0 6px; }
h2 {
  font: 700 15px/1.2 Barlow, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  margin: 34px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--ink);
}
h2 .n { color: var(--signal); margin-right: 10px; font-family: PlexMono, monospace; font-weight: 500; letter-spacing: 0; }
h3 { font: 700 19px/1.3 Barlow, sans-serif; margin: 22px 0 4px; }
p, li { color: var(--ink); }
.muted { color: var(--soft); font-size: 14px; }
a { color: var(--signal); }
ul { padding-left: 20px; }
li { margin: 6px 0; }
.stamp {
  display: inline-block; font: 900 18px/1 Stencil, sans-serif; letter-spacing: .1em;
  color: var(--go); border: 2px solid currentColor; outline: 1.5px solid currentColor; outline-offset: 3px;
  padding: 5px 9px; transform: rotate(-6deg); position: absolute; right: 22px; top: 24px;
}
.stamp + .eyebrow { padding-right: 84px; }
.tldr { border: 2px dashed var(--rule); padding: 14px 16px; margin: 18px 0 0; }
.tldr p { margin: 0; }
.mail { font: 500 16px/1.4 PlexMono, monospace; white-space: nowrap; }
footer { margin-top: 28px; font: 500 12px/1.6 PlexMono, monospace; color: var(--soft); text-transform: uppercase; letter-spacing: .06em; }
.hero { text-align: left; }
.hero img { width: 112px; height: 112px; border-radius: 25px; display: block; margin-bottom: 18px; border: 2px solid var(--ink); }
.hero .lede { font-size: 20px; line-height: 1.5; margin: 8px 0 22px; }
.badge {
  display: inline-block; font: 700 15px/1 Barlow, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); padding: 14px 18px; text-decoration: none;
}
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 28px; }
.cell { border: 2px solid var(--ink); padding: 14px; background: var(--paper); }
.cell b { font: 700 17px/1.2 Barlow, sans-serif; display: block; margin-bottom: 4px; }
.cell span { font-size: 15px; color: var(--soft); line-height: 1.5; }
@media (max-width: 520px) {
  .mast .launch { font-size: 44px; }
  h1 { font-size: 32px; }
  .sheet { padding: 24px 16px 28px; }
  .stamp { right: 14px; top: 18px; font-size: 15px; }
}