/* ==========================================================================
   blog.html — page-specific rules (tokens only, no new colours)
   ========================================================================== */

/* Meta line reads "date / category" — same separator as the breadcrumbs */
.post__meta > * + *::before { content: "/"; margin-right: 16px; opacity: 0.6; }

/* Featured article: image in cols 1–2, text in cols 3–4,
   read-more link pinned to the bottom edge of the image */
.featured .ph { align-self: start; }
.featured .post { gap: 24px; }
.featured .post__title { font-size: clamp(24px, 2.5vw, 36px); line-height: 1.3; text-transform: uppercase; }
.featured .post__excerpt { font-size: 16px; line-height: 1.4; color: var(--ink); max-width: 560px; }
.featured .post__link { margin-top: auto; }

/* Category tabs sit on a full-width hairline, 60px above the cards */
.articles .tabs { margin-bottom: 60px; }
.articles .tabs button:last-child { margin-right: 0; }

/* Card images: outlined word inside the placeholder, sized for a 325px column */
.post .ph__display { font-size: clamp(32px, 3.33vw, 48px); }

@media (max-width: 1023px) {
  .featured .post__link { margin-top: 0; }
}

@media (max-width: 639px) {
  .articles .tabs { margin-bottom: 40px; }
  .articles .tabs button { margin-right: 24px; }
  .featured .post__excerpt { max-width: none; }
}