/* blog.css — component rules for /blog and /blog/<slug>.
 *
 * Loaded after base.css and only by the blog pages. It declares NO tokens:
 * every colour, radius, shadow and duration below resolves to a custom
 * property from base.css's :root, which is the only declaration site in this
 * project. See CLAUDE.md § One token namespace.
 *
 * What lives elsewhere on purpose:
 *   - the <article> shell and all of .prose are in base.css, shared with
 *     story.html, so article typography has one definition
 *   - the post cards reuse .feature-card from base.css for their raised
 *     treatment and gradient crown; only the blog-specific parts are here
 *
 * These pages are generated by tools/build-blog.mjs, but this file is not —
 * it is hand-written source.
 */

/* ── Index shell ─────────────────────────────────────────────────
   Wider than the 720px reading column because it holds a card grid, not
   prose; the 1240px container is DESIGN.md's marketing width. */
.blog-shell {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 140px max(24px, 5vw) 60px;
}

.blog-head {
  max-width: 720px;
  margin-bottom: 4rem;
}
.blog-head p {
  font-family: var(--body-font), serif;
  font-size: 1.075rem;
  line-height: 1.85;
  color: var(--text-body);
  margin-top: 1.25rem;
  text-wrap: pretty;
}

/* ── Post grid ───────────────────────────────────────────────────
   Three across, collapsing to one at the 960px marketing breakpoint —
   DESIGN.md's grid rule. */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

/* Overrides .feature-card's uniform padding so the cover can run full-bleed
   to the card edge; the text block carries its own padding instead. */
.post-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  text-decoration: none;
  color: inherit;
}
.post-card-cover {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border: 0;
  border-radius: 0;
}
.post-card-body {
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.post-card h2 {
  font-family: var(--display-font), serif;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-heading);
  margin-bottom: 0.75rem;
  text-wrap: balance;
}
.post-card p {
  font-family: var(--body-font), serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-body);
  margin-bottom: 1.25rem;
}
/* Pushes the date + CTA block to the card floor so a short excerpt and a long
   one still align across a row. This sits on the wrapper rather than on the
   date, because a post with no date would otherwise leave the CTA unpinned —
   and two `margin-top: auto` siblings split the free space between them rather
   than both settling at the bottom. */
.post-card-foot { margin-top: auto; }

/* Reads as a link and is not one: the whole card is already an anchor, so this
   is a <span> (see the note in tools/build-blog.mjs). It therefore has to take
   its hover from the card, not from itself. Mirrors .blog-back below — the
   quiet text-link treatment this page already uses — so /blog has one link
   language rather than two. */
.post-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 0.9rem;
  font-family: var(--body-font), serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--coral-ink);
  transition: gap var(--dur-base) var(--ease-standard);
}
/* Split on the same three triggers as THE LIFT in base.css, and for the same
   reason: an ungated :hover is applied on tap on a phone and left there until
   the next tap, so the arrow would slide out and stay out. This rides along
   with the card's own lift rather than being a second, differently-triggered
   interaction — :active is what a finger gets, and it needs main.js's empty
   touchstart listener to fire at all on WebKit. */
@media (hover: hover) {
  .post-card:hover .post-card-cta { gap: 12px; }
}
.post-card:active .post-card-cta,
.post-card:focus-visible .post-card-cta { gap: 12px; }

.post-meta {
  font-family: var(--body-font), serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Post page furniture ─────────────────────────────────────── */
.post-header {
  padding-bottom: 2.5rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--border-hairline);
}
.post-header .post-meta { display: block; margin-top: 1.25rem; }

.post-cover {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-card);
  border: 1px solid var(--border-hairline);
  margin-bottom: 3rem;
}

/* A quiet text link, not a button: it leaves the page rather than acting on
   it, so it carries no elevation. */
.blog-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--body-font), serif;
  font-size: 0.9rem;
  color: var(--text-muted);
  text-decoration: none;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-hairline);
  transition: color var(--dur-base) var(--ease-standard);
}
.blog-back:hover { color: var(--coral-ink); }

.blog-empty {
  font-family: var(--body-font), serif;
  font-size: 1.075rem;
  line-height: 1.85;
  color: var(--text-muted);
}

@media (max-width: 960px) {
  .post-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .blog-shell { padding: 110px 20px 40px; }
  .blog-head { margin-bottom: 2.5rem; }
}

@media (max-width: 640px) {
  /* Card radii step down one notch below 640px — DESIGN.md. */
  .post-cover { border-radius: var(--radius-tile); }
}