/* Long-form reading inside windows: text mode, but readable. */
.prose {
  max-width: 78ch;
  margin: 0 auto;
  padding: 10px 18px 28px;
  font: 21px/1.25 var(--font);
  color: var(--fg);
}
.prose-head { margin-bottom: 10px; }
.kicker { margin: 0; color: var(--fg-dim); }
.prose h1, .prose h2, .prose h3 { font-family: var(--font); font-weight: 400; line-height: 1.1; margin: 1.3em 0 0.4em; }
.prose h1 { margin-top: 0; font-size: clamp(34px, 5vw, 48px); color: #fff; }
.prose h2 { display: table; padding: 0 6px; font-size: 28px; background: var(--acc); color: #000; text-shadow: none; }
.prose h3 { font-size: 24px; }
.prose h3::before { content: "> "; color: var(--acc); }
.prose p, .prose ul, .prose ol { margin: 0 0 0.8em; }
.prose ul { list-style: none; padding-left: 2ch; }
.prose ul > li::before { content: "- "; margin-left: -2ch; color: var(--fg-dim); }
.prose ol { padding-left: 3ch; }
.prose li { margin-bottom: 0.25em; }
.prose li > p { margin: 0; }
.prose strong { font-weight: 400; background: var(--fg-dark); padding: 0 3px; }
.prose em { font-style: normal; text-decoration: underline dotted; }
.prose hr { border: 0; margin: 1.4em 0; text-align: center; overflow: hidden; height: 1.2em; }
.prose hr::before { content: "* * * * * * * * * * * * * * * * * * * * * * * *"; color: var(--fg-dim); }
.prose blockquote { margin: 1em 0; padding: 0 0 0 2ch; border-left: 2px dashed var(--fg-dim); color: var(--fg-dim); }
.prose code { padding: 0 4px; background: var(--fg-dark); font: inherit; }
.prose pre { overflow-x: auto; margin: 0 0 1em; padding: 8px 10px; border: 1px dashed var(--fg-dim); font: 19px/1.2 var(--font); }
.prose pre code { background: none; padding: 0; }
.prose mark { background: #ffd400; color: #000; text-shadow: none; padding: 0 4px; }

.prose img, .prose video { height: auto; margin: 1em auto; border: 2px solid var(--fg-dim); }
.prose video { width: 100%; }
.prose figure { margin: 0; }
.prose .cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-top: 0; }

.prose .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 1em 0; }
.prose .gallery p { display: contents; }
.prose .gallery img { margin: 0; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; cursor: zoom-in; }

.prose .embed { margin: 1em 0; }
.prose .embed iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 2px solid var(--fg-dim); background: #000; }
.prose .embed iframe[src*="itch.io"] { aspect-ratio: auto; height: 167px; }

.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1em; }
.prose th, .prose td { padding: 0 8px; border: 1px dashed var(--fg-dark); text-align: left; vertical-align: top; }
.prose td:first-child { white-space: nowrap; color: var(--fg-dim); }
.prose thead:has(th:empty) { display: none; }

.prose .note { padding: 6px 12px 1px; margin: 1em 0; border: 4px double var(--fg-dim); }
.prose-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 2em; padding-top: 6px; border-top: 1px dashed var(--fg-dim); color: var(--fg-dim); }
.muted { color: var(--fg-dim); }

.prose.cv h1 { margin-bottom: 0; }
.prose.cv h3 + p { margin: 0 0 0.3em; color: var(--fg-dim); }

/* dreams look like every other document, just sleepier */
.prose.dream .kicker::before { content: "zZz "; color: var(--acc); }

@media (max-width: 700px) {
  .prose { padding: 8px 12px 24px; font-size: 20px; }
}