/* Post template — step 4. Built against tokens.css + components.css +
   grid.css. Not yet wired into diaryEntry.js/diaryIndex.js; previewed
   via post-preview.html (single entry) and post-index-preview.html
   (the /diary stream).

   Opposite of the homepage: one column, no grid, a real reading
   measure. Chrome (site-shell + site-masthead from grid.css) is
   reused as-is — only the interior changes. */

.post-back {
  display: inline-block;
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
}
.post-back:hover {
  color: var(--color-link);
}

.post-column {
  max-width: 72ch;
}

/* The one deliberate exception to the site's "nothing centered that
   could be left-aligned" rule — used only by /blog entries, to read as
   a quieter, centered reading page against the rest of the site's
   left-hugging chrome. */
.post-column--centered {
  max-width: 68ch;
  margin-inline: auto;
}

/* Per-post generative art -- a deterministic Floyd-Steinberg-dithered
   image, unique per slug (see src/routes/art.js). Real pixels, not a
   filter, so it's sized to fit rather than stretched/blended. */
.post-art {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 var(--space-4);
  border: var(--border-hair) solid var(--color-panel-border);
  border-radius: var(--radius);
}

.post-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  color: var(--color-heading);
}
.post-title a,
.post-title a:visited {
  color: inherit;
  text-decoration: none;
}
.post-title a:hover {
  color: var(--color-link);
}

.post-meta {
  margin: 0 0 var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-faint);
}

/* === Prose === */
.post-body {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  /* Oldstyle figures in running prose — numerals that sit into the line
     like lowercase letters instead of the mono scale's lining/tabular
     digits, so a date or number inside a sentence reads as text, not
     as metadata that wandered in. Falls back silently if unsupported. */
  font-variant-numeric: oldstyle-nums;
}
.post-body li::marker {
  font-family: var(--font-mono);
  color: var(--color-text-faint);
}
.post-body > * + * {
  margin-top: var(--space-4);
}
.post-body h2,
.post-body h3,
.post-body h4 {
  color: var(--color-heading);
  line-height: var(--leading-snug);
  margin-top: var(--space-6);
}
.post-body h2 {
  font-family: var(--font-body);
  font-size: var(--text-xl);
}
.post-body h3 {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.post-body p {
  margin: 0;
}
.post-body a,
.post-body a:visited {
  color: var(--color-link);
}
.post-body a:hover {
  color: var(--color-link-hover);
}
.post-body ul,
.post-body ol {
  margin: 0;
  padding-left: 1.4em;
}
.post-body li + li {
  margin-top: var(--space-2);
}
.post-body blockquote {
  margin: 0;
  padding-left: var(--space-4);
  border-left: var(--border-thick) solid var(--color-panel-border-strong);
  color: var(--color-text-muted);
  font-style: italic;
}
.post-body hr {
  border: none;
  border-top: var(--border-hair) solid var(--color-panel-border);
  margin: var(--space-6) 0;
}
.post-body code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--color-header-bar-bg);
  padding: 0.15em 0.35em;
  border-radius: var(--radius);
}
.post-body pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  background: var(--color-header-bar-bg);
  border: var(--border-hair) solid var(--color-panel-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
}
.post-body pre code {
  background: none;
  padding: 0;
}
.post-body img {
  max-width: 100%;
  height: auto;
  border: var(--border-hair) solid var(--color-panel-border);
}

/* Callouts/sidenotes — the boxed module reused inline in the prose flow,
   stepped back down to the homepage's denser type scale so it reads as
   an aside, not as continued body text. */
.post-body .mod-box {
  font-size: var(--text-base);
  font-family: var(--font-body);
}

/* === Post index / stream (the /diary listing — full entries, not just
   titles, matching how diaryIndex.js already renders them) ===
   Each entry is its own .mod-box now (same bordered-panel language as
   the homepage modules) instead of floating text separated by rules —
   spacing between entries comes from the flex gap, not per-entry
   padding/border-bottom. */
.post-stream {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.post-stream-entry .post-title {
  /* smaller than the page-level h1 use of .post-title, so a stream of
     entries doesn't read as a stack of equally-weighted page titles */
  font-size: var(--text-xl);
  margin-bottom: var(--space-1);
}