/* Blog styling — reuses the theme variables defined in styles.css (:root) */

/* --- Index --- */
.blog-index {
  max-width: 760px;
  margin: 0 auto;
  /* 50px was sized for a page with a heading sitting in it. With the heading
     hidden that became 50px of nothing above the first rule, so the list now
     starts closer to the header. */
  padding: 28px 20px 60px;
}

.post-list { list-style: none; margin: 0; padding: 0; }

.post-item { border-top: 1px solid var(--line); }
.post-item:last-child { border-bottom: 1px solid var(--line); }
.post-item.empty { color: #777; padding: 24px 4px; }

.post-link {
  display: block;
  text-decoration: none;
  padding: 22px 4px;
  transition: background 0.15s ease;
}
.post-link:hover { background: rgba(127, 127, 127, 0.08); }

.post-date {
  display: block;
  color: #777;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.post-name {
  display: block;
  color: var(--text);
  font-size: 1.35em;
  font-weight: 700;
  margin-bottom: 6px;
}
.post-summary { display: block; color: var(--muted); font-size: 1em; line-height: 1.5; }

/* --- Single post --- */
.post {
  max-width: 700px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}

.back-link {
  display: inline-block;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  margin-bottom: 30px;
}
.back-link:hover { text-decoration: underline; }

.post-heading {
  color: var(--text);
  font-size: 2.1em;
  line-height: 1.2;
  margin: 0 0 8px 0;
}
.post-meta {
  color: #777;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 36px 0;
}

/* Readable body typography */
.post-body { color: var(--text); font-size: 1.08rem; line-height: 1.75; }
.post-body h1, .post-body h2, .post-body h3, .post-body h4 { color: var(--text); line-height: 1.3; margin: 1.8em 0 0.6em; }
.post-body h2 { font-size: 1.5em; }
.post-body h3 { font-size: 1.25em; }
.post-body p { margin: 0 0 1.2em; }
.post-body a { color: var(--accent); text-decoration: none; }
.post-body a:hover { text-decoration: underline; }
.post-body ul, .post-body ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.post-body li { margin-bottom: 0.5em; }
.post-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 1em 0; }
.post-body figure { margin: 1.8em 0; }
.post-body figure a { display: block; }
.post-body figure img { display: block; margin: 0 auto; }
.post-body figcaption { color: #777; font-size: 0.85rem; text-align: center; font-style: italic; margin-top: 8px; }
.post-body blockquote {
  margin: 1.4em 0;
  padding: 0.4em 1.2em;
  border-left: 3px solid var(--accent);
  color: var(--muted);
  font-style: italic;
}
.post-body code {
  background: #1e1e1e;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}
.post-body pre {
  background: #1b1b1b;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  overflow-x: auto;
}
.post-body pre code { background: none; padding: 0; }
.post-body hr { border: 0; height: 1px; background: var(--line); margin: 2.4em 0; }

/* --- naming a font in prose -------------------------------------------------
   A font's name set in the font it names, so the paragraph about choosing them
   shows its work. Nothing new is loaded: all three families are already
   declared in styles.css and used elsewhere on every page.

   The mono is stepped down slightly. IBM Plex Mono runs wider and taller than
   Newsreader at the same size, so at 1em it reads as a shout mid-sentence.

   Newsreader is the body face already, so that rule is a no-op today. It stays
   because it records the intent, and because it would still be correct if the
   body face ever changed.
   -------------------------------------------------------------------------- */

.in-newsreader  { font-family: var(--display); }
.in-public-sans { font-family: var(--ui); }
.in-plex-mono   { font-family: var(--micro); font-size: 0.94em; }

/* --- Footer navigation --- */
.post-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: start;
  margin-top: 3.5em;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.post-nav-item {
  display: block;
  text-decoration: none;
  padding: 12px 14px;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.post-nav-item:hover { background: rgba(127, 127, 127, 0.08); }
.post-nav-item.empty { pointer-events: none; }
.post-nav-item.next { text-align: right; }

.post-nav-label {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.post-nav-title {
  display: block;
  color: var(--text);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 4px;
}
.post-nav-date {
  display: block;
  color: #777;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.post-nav-home {
  align-self: center;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 12px 14px;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.post-nav-home:hover { background: rgba(127, 127, 127, 0.08); }

@media (max-width: 600px) {
  .post-heading { font-size: 1.6em; }
  .post-body { font-size: 1rem; }

  .post-nav { grid-template-columns: 1fr; gap: 4px; }
  .post-nav-item { padding: 12px 0; }
  .post-nav-item.next { text-align: left; }
  .post-nav-item.empty { display: none; }
  .post-nav-home { order: 3; text-align: center; margin-top: 12px; }
}