:root {
  --bg: #eeede8;
  --text: #1c1c1a;
  --muted: #74726c;
  --line: #c4362a;
  --hover: #c4362a;
  --box: #d8d6cf;
  --ink: #c4362a;
  color-scheme: light;
}

body {
  margin: auto;
  padding: 2rem 1rem 4rem;
  max-width: 36rem;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
  color: var(--text);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 640px) { body { padding: 2rem 2rem 5rem; } }

a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
a:hover { color: var(--hover); }
::selection { background: var(--line); color: #fff; }

.nav { color: var(--muted); }
.nav a { color: var(--muted); border: 0; }
.nav a:hover { color: var(--hover); }

h1 { font-size: 1.5em; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; margin: 2em 0 0.4em; line-height: 1.3; }
h2 { font-size: 1.05em; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; margin: 2.6em 0 0.6em; }
.date { color: var(--muted); margin: 0 0 2em; }

.post p, .post li { font-family: "IBM Plex Sans", Avenir, sans-serif; font-weight: 300; line-height: 1.8em; }
p { line-height: 1.8em; margin: 1em 0 1.4em; }
ul { padding-left: 1.2em; }
li { line-height: 1.8em; margin: 0.3em 0; }
strong { font-weight: 600; }

blockquote { border-left: 3px solid var(--line); margin: 2.4em 0; padding: 0 1.4em; }
blockquote p { font-size: 1.1em; margin: 0; }

.list { display: grid; gap: 1.4em; margin-top: 1.2em; }
.list a { border: 0; display: block; }
.list a span { display: block; color: var(--muted); font-size: 0.85em; margin-top: 0.3em; }
.list a:hover span { color: var(--muted); }

.video { position: relative; aspect-ratio: 16 / 9; margin: 1.6em 0 0.4em; border: 1px solid var(--box); background: rgba(255,255,255,.35); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video .empty, .gallery .empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 0.85em; }
.cap { color: var(--muted); font-size: 0.85em; margin: 0 0 2em; }

.facts { margin: 1.6em 0; display: grid; grid-template-columns: 7.5em 1fr; gap: 0.5em 1em; font-size: 0.9em; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

.gallery { display: grid; gap: 1em; margin-top: 1em; }
.gallery img { width: 100%; height: auto; display: block; }
.gallery .empty { position: relative; aspect-ratio: 16 / 9; border: 1px dashed var(--box); }

.table { overflow-x: auto; margin: 1.4em 0; }
table { border-collapse: collapse; min-width: 32rem; font-size: 0.85em; }
th, td { text-align: left; vertical-align: top; padding: 0.6em 0.8em 0.6em 0; border-bottom: 1px solid var(--box); }
th { color: var(--muted); font-weight: 400; }

.next { margin-top: 3.5em; }

/* The one hand-made touch: a pen line that writes itself in. */
.post .script, .post .note { font-family: "Homemade Apple", cursive; color: var(--ink); font-weight: 400; letter-spacing: 0; text-transform: none; animation: write 1.8s cubic-bezier(.55,.1,.35,1) .2s both; }
.post .script { font-size: clamp(2.4em, 9vw, 3.4em); line-height: 1.5; margin: 1.1em 0 0.1em; transform: rotate(-3deg); transform-origin: left center; }
.post .note { font-size: 1.05em; line-height: 1.9; max-width: 32rem; margin: -0.6em 0 1.8em 0.1em; transform: rotate(-2deg); transform-origin: left center; width: fit-content; }
.kicker { color: var(--muted); letter-spacing: 3px; text-transform: uppercase; font-size: 0.85em; margin: 1.4em 0 2em; }
@keyframes write { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% -5% -20% 0); } }
@media (prefers-reduced-motion: reduce) { .script, .note { animation: none; } }
.soon { color: var(--muted); }