@font-face {
  font-family: "Familjen Grotesk";
  src: url(/assets/fonts/familjen-grotesk.woff2) format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* While Familjen Grotesk loads, its own letters draw in Arial (Macs, iPhones, Windows) or Roboto (Android), scaled to its
   widths and heights so no line moves when it arrives. The range is the font's own; other characters keep the system font. */
@font-face { font-family: "Familjen Grotesk Arial"; src: local("Arial"), local("ArialMT"); font-weight: 400 500; size-adjust: 93.6%; ascent-override: 109.5%; descent-override: 24%; line-gap-override: 0%; unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+2002-200B, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2052, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Familjen Grotesk Arial"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 700; size-adjust: 91.6%; ascent-override: 111.9%; descent-override: 24.6%; line-gap-override: 0%; unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+2002-200B, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2052, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Familjen Grotesk Roboto"; src: local("Roboto"), local("Roboto-Regular"); font-weight: 400 500; size-adjust: 94.4%; ascent-override: 108.6%; descent-override: 23.8%; line-gap-override: 0%; unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+2002-200B, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2052, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Familjen Grotesk Roboto"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 600 700; size-adjust: 97.7%; ascent-override: 104.9%; descent-override: 23%; line-gap-override: 0%; unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+2002-200B, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2052, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
:root {
  --field: #c8321e;
  --on: #fff5e9;
  --on-2: #fff5e9;
  --on-hair: rgba(255, 245, 233, .28);
  --on-line: rgba(255, 245, 233, .5);
  --sheet: #fffaf3;
  --well: #f6ebdf;
  --ink: #24110c;
  --ink-2: #5a3f37;
  --muted: #7a6159;
  --hair: rgba(36, 17, 12, .11);
  --act: #c8321e;
  --act-on: #fff5e9;
  --act-text: #c8321e;
  --ok: #2f6b45;
  --bad: #a12a16;
  /* Night: the near-black the posts sit on in the launch video. */
  --night: #0d0807;
  --on-night: #f6ece4;
  --on-night-2: rgba(246, 236, 228, .62);
  --night-hair: rgba(246, 236, 228, .14);
  --scrim: rgba(60, 10, 4, .42);
  --shadow: 0 0 0 .5px rgba(60, 10, 4, .22), 0 1px 2px rgba(60, 10, 4, .10), 0 10px 24px rgba(70, 8, 0, .14), 0 32px 72px rgba(70, 8, 0, .20);
  --font: "Familjen Grotesk", "Familjen Grotesk Arial", "Familjen Grotesk Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ios: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color-scheme: only light;
}
/* The scale. Type: one family, set tight; each step has its own size, leading and tracking (the classes below). */
:root {
  --fs-display: clamp(46px, 6.6vw, 96px);
  --fs-hold: clamp(52px, 10vw, 144px);
  --fs-title: clamp(38px, 4.8vw, 72px);
  --fs-heading: clamp(34px, 3.4vw, 48px);
  --fs-head: 24px;
  --fs-lede: 19px;
  --fs-read: 17px;
  --fs-body: 16px;
  --fs-small: 14.5px;
  --fs-meta: 13px;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Roboto Mono", monospace;
  /* Space, on 4 px: 4 8 12 16 20 24 32 44 56 84 120. A section is --sec tall at each end. */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-7: 32px; --s-8: 44px; --s-9: 56px; --s-10: 84px; --s-11: 120px;
  --sec: 120px;
  /* The grid: a 1440 px page with 56 px margins, 12 columns on a 24 px gutter; text runs 680 px at most, a sheet 880. */
  --page: 1440px; --margin: 56px; --gutter: 24px; --measure: 680px; --sheet-w: 880px;
  /* Shape: controls 12, cards and posts 14, sheets 22; inline code and focus rings 4. One shadow: --shadow. */
  --r-inline: 4px; --r-control: 12px; --r-card: 14px; --r-sheet: 22px;
  /* Motion: fast and quiet, never on scroll. */
  --ease: cubic-bezier(.2, 0, 0, 1); --fast: 150ms; --base: 220ms; --slow: 400ms;
}
@media (max-width: 959px) { :root { --sec: 84px; --gutter: 16px; } }
@media (max-width: 759px) { :root { --sec: 64px; --margin: 20px; --fs-display: min(46px, 11.6vw); --fs-hold: min(52px, 13.3vw); --fs-lede: 17px; --fs-head: 22px; } }
@media (max-width: 359px) { :root { --margin: 16px; } }

/* Loading: the flag is up before the post is. Chrome and known words are real; a value not known yet is a flat, hard
   bar on the surface, on the type it stands for. Nothing shows for the first 150 ms, so a fast load never flashes. The
   bars hold still. One thing moves, the hollow pennant, filling hoist to fly. */
.skel-line { position: relative; display: block; width: var(--w, 100%); max-width: 100%; height: 1.35em; height: 1lh; animation: skel-arrive 180ms ease-out 150ms both; }
.skel-line::before { content: "\200b"; }
.skel-line::after { content: ""; position: absolute; inset: .2lh 0; border-radius: 3px; background: var(--skel, var(--well)); }
.skel-tile { display: block; background: var(--skel, var(--well)); animation: skel-arrive 180ms ease-out 150ms both; }
.skel-pen { position: relative; display: block; height: 52px; overflow: hidden; border-radius: 12px 0 0 12px; clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%); background: var(--skel, var(--well)); animation: skel-arrive 180ms ease-out 150ms both; }
.skel-pen::before { content: ""; position: absolute; inset: 0; background: rgba(200, 50, 30, .16); transform: scaleX(0); transform-origin: 0 50%; animation: skel-hoist 1.6s cubic-bezier(.2, 0, 0, 1) 330ms infinite; }
@keyframes skel-arrive { from { opacity: 0; } }
@keyframes skel-hoist { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .skel-line, .skel-tile, .skel-pen, .skel-pen::before { animation: none; } .skel-pen::before { transform: none; opacity: 0; } }