/* ==========================================================================
   blog.1978.io — the only custom stylesheet. Loaded after the 78 UI Kit;
   colors come from kit tokens only, so light and dark both follow the theme.
   ========================================================================== */

:root {
  --blog-fs: 17px;           /* reading size */
  --blog-measure: 66ch;      /* ~70 characters a line at the reading size */
}

/* ---- Page frame ---------------------------------------------------------- */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

.blog-wrap {
  font-size: var(--blog-fs);
  line-height: 1.7;
  max-width: var(--blog-measure);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-6);
  box-sizing: content-box;
}

.blog-skip {
  position: absolute; left: var(--space-2); top: -100px; z-index: 200;
  padding: var(--space-2) var(--space-3);
  background: var(--accent); color: var(--accent-text); border-radius: var(--radius);
}
.blog-skip:focus { top: var(--space-2); }

.blog-home-link {
  flex: 0 0 auto;
  color: var(--dim);
  font-size: var(--fs-base);
  white-space: nowrap;
  padding-right: var(--space-3);
  border-right: 1px solid var(--border);
}
.blog-home-link:hover { color: var(--accent); text-decoration: none; }

.blog-footer { border-top: 1px solid var(--border); background: var(--bg2); }
.blog-footer .blog-wrap { font-size: var(--fs-base); padding-top: var(--space-5); padding-bottom: var(--space-5); }
.blog-footer p + p { margin-top: var(--space-1); }

/* ---- Headings, meta, tags ------------------------------------------------ */
.blog-intro { margin-bottom: var(--space-6); }
.blog-intro h1,
.blog-post-header h1 { font-size: 2em; line-height: 1.2; letter-spacing: -.01em; }
.blog-intro p { margin-top: var(--space-2); }
.blog-404 ._78-btn { margin-top: var(--space-4); }

.blog-meta { color: var(--dim); font-size: var(--fs-base); }
.blog-meta ._78-badge { margin-left: var(--space-1); vertical-align: 1px; }

.blog-tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.blog-tags a:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }

/* ---- Post list ----------------------------------------------------------- */
.blog-list { list-style: none; }
.blog-list-item { padding: var(--space-5) 0; border-top: 1px solid var(--border); }
.blog-list-item:first-child { border-top: 0; padding-top: 0; }
.blog-list-item h2 { font-size: 1.35em; line-height: 1.3; margin-top: var(--space-1); }
.blog-list-item h2 a { color: var(--text); }
.blog-list-item h2 a:hover { color: var(--accent); }
.blog-summary { margin-top: var(--space-2); }
.blog-problems { margin-bottom: var(--space-5); font-size: var(--fs-base); }

/* ---- Post ---------------------------------------------------------------- */
.blog-post-header { margin-bottom: var(--space-5); }
.blog-post-header .blog-meta { margin-top: var(--space-2); }
.blog-draft-note { margin-bottom: var(--space-4); font-size: var(--fs-base); }
.blog-tldr { margin-bottom: var(--space-6); font-size: var(--blog-fs); line-height: 1.6; }
/* Share row: kit ghost buttons in a ._78-btn-group. [hidden] needs restating because
   ._78-btn sets display. */
.blog-share { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.blog-share-title { font-size: var(--fs-base); font-weight: 600; margin-bottom: var(--space-3); }
.blog-share ._78-btn[hidden] { display: none; }
.blog-share + .blog-back { margin-top: var(--space-5); }
.blog-back { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border); font-size: var(--fs-base); }

/* ---- Prose: the Markdown body (the kit's reset zeroes margins) ----------- */
.blog-prose > * + * { margin-top: 1.1em; }
.blog-prose h2 { font-size: 1.5em; margin-top: 1.8em; }
.blog-prose h3 { font-size: 1.2em; margin-top: 1.6em; }
.blog-prose h4 { font-size: 1em; margin-top: 1.4em; }
.blog-prose h2 + *, .blog-prose h3 + *, .blog-prose h4 + * { margin-top: .6em; }
.blog-prose a { text-decoration: underline; text-underline-offset: 2px; }
.blog-prose ul, .blog-prose ol { padding-left: 1.5em; }
.blog-prose li + li { margin-top: .3em; }
.blog-prose li > ul, .blog-prose li > ol { margin-top: .3em; }
.blog-prose blockquote {
  padding: .2em 0 .2em 1em;
  border-left: 3px solid var(--accent);
  color: var(--dim);
}
.blog-prose hr { margin: 2em 0; }
.blog-prose img, .blog-prose video, .blog-prose iframe { max-width: 100%; height: auto; border-radius: var(--radius); }
.blog-prose iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }

.blog-prose code {
  font-size: .86em;
  padding: .12em .35em;
  background: var(--bg3);
  border-radius: var(--radius-sm);
}
.blog-prose pre {
  font-size: 14px;
  line-height: 1.55;
  padding: var(--space-4);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  tab-size: 4;
}
.blog-prose pre code { font-size: inherit; padding: 0; background: none; border-radius: 0; }

.blog-prose ._78-table-wrap { font-size: 15px; line-height: 1.5; }
.blog-prose ._78-table { min-width: 100%; }

/* ---- Phones -------------------------------------------------------------- */
@media (max-width: 480px) {
  :root { --blog-fs: 16px; }
  .blog-wrap { padding: var(--space-5) var(--space-4); }
  .blog-intro h1, .blog-post-header h1 { font-size: 1.7em; }
  ._78-topbar-brand { font-size: var(--fs-base); }
  .blog-home-link { padding-right: var(--space-2); }
  .blog-prose pre { margin-left: calc(-1 * var(--space-4)); margin-right: calc(-1 * var(--space-4)); border-radius: 0; border-left: 0; border-right: 0; }
}