/* ═══════════════════════════════════════════════════════════════════
   BLOG — loaded only on /blog pages, after styles.css.

   styles.css stays the design API: every colour, radius, and easing here
   is one of its tokens. Nothing in this file is a new design decision —
   it re-establishes normal document flow for long-form prose, which the
   base reset deliberately strips (`h1,h2,h3,h4,p,ul,dl,dd,dt{margin:0}`
   and `ul{padding:0;list-style:none}`) because the homepage lays every
   block out by hand.

   Kept separate rather than appended to styles.css so the homepage ships
   byte-identical — a blog change can't regress the page that sells.
   ═══════════════════════════════════════════════════════════════════ */

/* ── header: in flow on reading pages ────────────────────────────── */
/* styles.css sets .site-head to position:absolute so the homepage hero can run
   underneath it; the hero pays for that with its own padding-top:96px. A
   reading page has no hero, and .nav is flex-wrap:wrap — so between roughly
   720px and 900px the nav wraps to two lines (measured: 141px tall) and would
   sit on top of the first line of content. Putting the header back in normal
   flow here means it reserves exactly its own height at every width, with no
   magic number to keep in sync. */
body.paper .site-head {
  position: relative;
  top: 0;
}

/* ── shared band spacing ─────────────────────────────────────────── */
/* Purely aesthetic now that the header reserves its own space above. */
.band-blog,
.band-post {
  position: relative;
  z-index: 1;
  padding-block: clamp(34px, 6vh, 64px) clamp(70px, 10vh, 120px);
}

/* ── index ───────────────────────────────────────────────────────── */
.blog-lede {
  max-width: 62ch;
  margin-top: 18px;
  font-size: clamp(17px, 2vw, 19.5px);
  line-height: 1.65;
  color: var(--tp-ink);
  text-shadow: var(--halo);
}

.post-list {
  margin-top: clamp(38px, 6vh, 62px);
  display: grid;
  gap: 18px;
}

.post-card {
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(12, 34, 34, 0.12);
  border-radius: var(--r-card);
  backdrop-filter: blur(6px);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.post-card:hover {
  transform: translateY(-3px);
  border-color: var(--tp-ember-deep);
  background: rgba(255, 255, 255, 0.76);
}

.post-link {
  display: block;
  padding: clamp(20px, 3vw, 30px);
  text-decoration: none;
  color: inherit;
}

.post-card-title {
  font-size: clamp(20px, 2.5vw, 25px);
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--tp-ink);
}
.post-card:hover .post-card-title { color: var(--tp-ember-deep); }

.post-card-excerpt {
  margin-top: 10px;
  max-width: 60ch;
  color: rgba(12, 34, 34, 0.78);
  line-height: 1.6;
}

.post-card-meta {
  margin-top: 14px;
  font-size: 13px;
  color: var(--tp-teal-deep);
}

/* ── tags ────────────────────────────────────────────────────────── */
.post-tags {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.post-tag {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: var(--r-chip);
  color: var(--tp-ocean-deep);
  background: var(--tp-cyan-soft);
  border: 1px solid rgba(11, 121, 168, 0.22);
}
.post-tags-head { margin-top: 16px; }

/* ── post header ─────────────────────────────────────────────────── */
.post-back { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.post-back:hover { color: var(--tp-ember-deep); }

.post-h1 {
  margin-top: 8px;
  font-size: clamp(31px, 5.2vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--tp-ink);
  text-shadow: var(--halo);
}

.post-figure {
  margin-top: clamp(28px, 4vh, 44px);
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid rgba(12, 34, 34, 0.14);
  background: rgba(255, 255, 255, 0.5);
}
.post-figure img { display: block; width: 100%; height: auto; }
.post-figure figcaption {
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tp-teal-deep);
  border-top: 1px solid rgba(12, 34, 34, 0.1);
}
/* Inline figures sit inside .prose, which spaces its own children. */
.prose .post-figure { margin-top: 1.5em; }

/* ── prose ───────────────────────────────────────────────────────── */
.prose {
  margin-top: clamp(32px, 5vh, 52px);
  font-size: clamp(16.5px, 1.9vw, 18.5px);
  line-height: 1.72;
  color: var(--tp-ink);
}
.prose > * + * { margin-top: 1.15em; }

.prose p { max-width: 68ch; text-shadow: var(--halo); }

.prose h2 {
  margin-top: 1.9em;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.24;
  letter-spacing: -0.02em;
  text-shadow: var(--halo);
}
.prose h3 {
  margin-top: 1.6em;
  font-size: clamp(18px, 2.2vw, 21px);
  line-height: 1.32;
  color: var(--tp-teal-deep);
  text-shadow: var(--halo);
}

.prose ul, .prose ol {
  max-width: 68ch;
  padding-left: 1.35em;
  display: grid;
  gap: 0.5em;
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { text-shadow: var(--halo); }
.prose li::marker { color: var(--tp-ember-deep); }

.prose strong { font-weight: 650; }

.prose a {
  color: var(--tp-ocean-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.prose a:hover { color: var(--tp-ember-deep); }

.prose code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 2px 6px;
  border-radius: var(--r-badge);
  background: rgba(12, 34, 34, 0.07);
  border: 1px solid rgba(12, 34, 34, 0.1);
}

.prose pre {
  margin-top: 1.3em;
  padding: clamp(15px, 2.4vw, 22px);
  border-radius: var(--r-card);
  background: var(--tp-ink);
  border: 1px solid rgba(12, 34, 34, 0.2);
  overflow-x: auto;          /* long lines scroll in the block, never the page */
  -webkit-overflow-scrolling: touch;
}
.prose pre code {
  padding: 0;
  border: 0;
  background: none;
  color: #e8efe8;
  font-size: 14px;
  line-height: 1.62;
  white-space: pre;
}

/* ── post nav ────────────────────────────────────────────────────── */
.post-nav {
  margin-top: clamp(46px, 7vh, 74px);
  padding-top: 26px;
  border-top: 1px solid rgba(12, 34, 34, 0.14);
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.post-nav-link {
  display: grid;
  gap: 5px;
  padding: 15px 17px;
  border-radius: var(--r-card);
  border: 1px solid rgba(12, 34, 34, 0.12);
  background: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  color: var(--tp-ink);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.post-nav-link:hover { transform: translateY(-2px); border-color: var(--tp-ember-deep); }
.post-nav-link .mono { font-size: 12px; color: var(--tp-teal-deep); }
.post-nav-next { text-align: right; }

.post-return { margin-top: 30px; }

@media (max-width: 640px) {
  .post-nav-next { text-align: left; }
}

/* The motion failsafe deliberately does NOT live here. It ships inline in each
   page's <head> (see build-blog.py), because this stylesheet is exactly the
   thing that can be stale in cache when the guard is needed. */