/* blong.dev — /blog/ — same aesthetic as /about and /portfolio.
 *
 * Everything visible relies on site.css conventions: Georgia serif
 * body, Courier-New uppercase-letter-spaced headers in --gold,
 * --parchment text on --obsidian, gold links via the site-level
 * `a` rule. This file only adds the prose-column widths, the meta
 * strip, blockquote/code/table styling that prose pages need, and
 * the per-post back link. No new colors, no font swaps, no
 * decorative accents.
 */

/* ── shared column ──────────────────────────────────────── */
.bloglist, .post{max-width:760px;margin:0 auto;padding:46px 22px 64px}

/* ── blog index ─────────────────────────────────────────── */
.bloglist > h1{
  font-family:'Courier New',monospace;
  font-size:1.5rem;color:var(--gold);
  margin:0 0 6px;letter-spacing:2px;text-transform:uppercase;
}
.bloglist > .lede{color:var(--parchment-dim);margin:0 0 32px;font-size:.95rem}
.bloglist ul{list-style:none;padding:0;margin:0}
.bloglist li{padding:32px 0;border-top:1px solid var(--line)}
.bloglist li:first-child{border-top:none;padding-top:0}
.bloglist .meta{
  font-family:'Courier New',monospace;font-size:.78rem;color:var(--parchment-dim);
  text-transform:uppercase;letter-spacing:2px;margin:0 0 8px;
}
.bloglist h2{
  font-family:'Courier New',monospace;font-size:1.15rem;letter-spacing:1px;
  text-transform:uppercase;margin:0 0 10px;line-height:1.3;
}
.bloglist h2 a{color:var(--parchment);text-decoration:none}
.bloglist h2 a:hover{color:var(--gold)}
.bloglist li > p:last-child{margin:0;color:var(--parchment-dim);font-size:1rem;line-height:1.55}

/* ── post page ──────────────────────────────────────────── */
.post .back{
  display:inline-block;
  font-family:'Courier New',monospace;font-size:.78rem;
  color:var(--parchment-dim);text-decoration:none;
  letter-spacing:2px;text-transform:uppercase;
  margin-bottom:30px;
}
.post .back:hover{color:var(--gold)}
.post .meta{
  font-family:'Courier New',monospace;font-size:.78rem;color:var(--parchment-dim);
  text-transform:uppercase;letter-spacing:2px;margin:0 0 12px;
}

.post h1{
  font-family:'Courier New',monospace;color:var(--gold);
  font-size:1.8rem;margin:0 0 28px;letter-spacing:1.5px;
  text-transform:uppercase;line-height:1.25;
}
.post h2{
  font-family:'Courier New',monospace;color:var(--gold);
  font-size:1.25rem;margin:42px 0 14px;letter-spacing:1.5px;
  text-transform:uppercase;
}
.post h3{
  font-family:'Courier New',monospace;font-size:1.05rem;color:var(--parchment);
  margin:32px 0 10px;letter-spacing:1px;text-transform:uppercase;
}
.post h4{
  font-family:'Courier New',monospace;font-size:.9rem;color:var(--parchment);
  margin:24px 0 8px;letter-spacing:1px;text-transform:uppercase;
}

.post p{margin:0 0 18px;line-height:1.65}
.post strong{color:var(--parchment)}
.post hr{border:none;border-top:1px solid var(--line);margin:30px 0}

/* No `.post a` rule — the site-wide `a{color:var(--gold)}` from
 * site.css already covers it, including hover underline. */

.post ul,.post ol{padding-left:22px;margin:0 0 18px}
.post li{margin:6px 0;line-height:1.6}

/* Blockquote mirrors site.css's `.creed` — gold left bar, dim text. */
.post blockquote{
  margin:24px 0;padding:4px 0 4px 14px;
  border-left:3px solid var(--gold);
  color:var(--parchment-dim);font-style:italic;
}
.post blockquote p{margin:0}

/* ── code ──────────────────────────────────────────────── */
.post code{
  font-family:'Courier New',monospace;
  background:var(--obsidian-2);border:1px solid var(--line);border-radius:4px;
  padding:2px 6px;font-size:.9em;color:var(--parchment);
}
.post pre{
  background:var(--obsidian-2);border:1px solid var(--line);border-radius:6px;
  padding:14px 16px;overflow-x:auto;margin:0 0 20px;
  font-size:.9rem;line-height:1.55;
}
.post pre code{background:none;border:none;padding:0;font-size:.9rem}

/* ── tables ────────────────────────────────────────────── */
.post table{border-collapse:collapse;width:100%;margin:18px 0 22px;font-size:.9rem}
.post th,.post td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.post th{
  font-family:'Courier New',monospace;color:var(--parchment-dim);
  text-transform:uppercase;letter-spacing:1.2px;font-size:.78rem;font-weight:bold;
}
.post tr:last-child td{border-bottom:none}

/* ── narrow viewports ──────────────────────────────────── */
@media (max-width:620px){
  .post h1{font-size:1.4rem}
  .post h2{font-size:1.1rem}
  .bloglist > h1{font-size:1.3rem}
  .bloglist h2{font-size:1.05rem}
}