/* ─────────────────────────────────────────────────────────────────────────
   DARKROOM — the blog's own furniture. Loaded after cc.css.

   Both pages, index and post, because they are twenty rules between them and
   a second file would be a second cache entry for nothing.

   Every colour here is one of cc.css's four ink rungs, the two rules or the
   signal; nothing invents a value. That is what keeps light and dark working:
   the tokens flip on `html[data-theme]` and this sheet never mentions a hex.
   The kicker, the h1 and the deck repeat the archive's, because the blog does
   not load cc-archive.css and a page head that is nearly the same reads as a
   different site.
   ───────────────────────────────────────────────────────────────────────── */

/* Top padding only, never the shorthand. These pages carry `.blog` on the
   same element as `.shell`, whose `padding:0 var(--pad)` is what lines every
   page's content up with the masthead above it. A shorthand here has equal
   specificity and this sheet loads second, so `padding:62px 0 0` silently won
   and zeroed both sides: /faq, /contact, /blog and every post ran 80px wider
   than their own header, at every width, with no overflow to report it. Caught
   on the live site 2026-08-19. */
.blog{padding-top:62px}

.blog .kick{display:flex; align-items:center; gap:14px; margin-bottom:24px}
.blog .kick .lbl{color:var(--sig); white-space:nowrap}
.blog .kick .ln{flex:1; height:1px; background:var(--rule-2); max-width:180px}

.blog h1{
  font-family:"Instrument Serif",serif; font-weight:400;
  font-size:clamp(32px,5vw,58px); line-height:1.04; letter-spacing:-.012em;
}
.blog h1 em{font-style:italic; color:var(--sig)}
.blog .deck{margin-top:20px; max-width:60ch; font-size:17.5px; line-height:1.6; color:var(--ink-2); font-weight:300}

/* ── the index list ─────────────────────────────────────────────────── */
/* Hairline rows rather than cards, the same way the ledger is: a card grid
   beside a hairline ledger looks like two sites stitched together. */
.posts{margin-top:38px; border-top:1px solid var(--rule)}

.pr{
  display:grid; grid-template-columns:120px minmax(0,1fr); gap:4px 24px; align-items:baseline;
  padding:20px 0; border-bottom:1px solid var(--rule);
  transition:background .18s;
}
.pr:hover{background:var(--sig-ghost)}
.pr .dd{
  grid-row:1 / span 2;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
}
.pr .tt{font-family:"Instrument Serif",serif; font-size:26px; line-height:1.2}
.pr:hover .tt{color:var(--sig)}
.pr .ss{grid-column:2; color:var(--ink-2); font-weight:300; font-size:16.5px; line-height:1.5}

.blog-empty{margin-top:38px; padding:44px 0; border-top:1px solid var(--rule); color:var(--ink-2); font-weight:300}

/* ── one post ───────────────────────────────────────────────────────── */
.bcrumb{display:flex; gap:10px; margin-bottom:28px}
.bcrumb a{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
  border:1px solid var(--rule-2); padding:7px 11px;
  transition:color .18s, border-color .18s;
}
.bcrumb a:hover{color:var(--ink); border-color:var(--ink-3)}

/* The measure is the point of the whole page: 68ch is where a serif column
   stops needing the reader to find the start of the next line. */
.prose{margin-top:34px; max-width:68ch; padding-bottom:56px}
.prose > * + *{margin-top:20px}
.prose p{font-size:18px; line-height:1.65; color:var(--ink)}
.prose h2{font-family:"Instrument Serif",serif; font-weight:400; font-size:31px; line-height:1.15; margin-top:44px}
.prose h3{font-family:"Instrument Serif",serif; font-weight:400; font-size:24px; line-height:1.2; margin-top:34px}
.prose a{color:var(--sig); border-bottom:1px solid var(--sig-dim)}
.prose a:hover{border-bottom-color:var(--sig)}
.prose ul,.prose ol{padding-left:22px}
.prose li + li{margin-top:8px}
.prose li{font-size:18px; line-height:1.6}
.prose blockquote{border-left:2px solid var(--sig-dim); padding-left:18px; color:var(--ink-2); font-style:italic}
.prose hr{border:0; border-top:1px solid var(--rule-2); margin:38px 0}
.prose img{max-width:100%; height:auto}

.prose code{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.86em;
  background:var(--raise); border:1px solid var(--rule); padding:1px 5px;
}
.prose pre{background:var(--bg-2); border:1px solid var(--rule); padding:16px 18px; overflow-x:auto}
.prose pre code{background:none; border:0; padding:0; font-size:13.5px; line-height:1.6}

.prose table{width:100%; border-collapse:collapse; font-size:15.5px}
.prose th,.prose td{border:1px solid var(--rule); padding:8px 11px; text-align:left}
.prose th{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); font-weight:500;
}

@media(max-width:860px){
  .blog{padding-top:38px}
  .blog .kick{margin-bottom:18px}
  .blog .deck{font-size:16.5px; margin-top:16px}
  .posts{margin-top:26px}
  /* The date moves above the title rather than shrinking a 120px column that
     was already the narrowest thing that fits "01 SEP 2026". */
  .pr{grid-template-columns:minmax(0,1fr); gap:6px}
  .pr .dd{grid-row:auto}
  .pr .tt{font-size:23px}
  .prose{margin-top:26px}
  .prose p,.prose li{font-size:17px}
}