/* =============================================================
   blog.css — the blog listing and the articles themselves.

   Loaded by blog/index.html and every blog/<slug>.html, on top of
   core.css. Nothing here is needed by a tool page or the homepage,
   which is why it is its own file rather than an addition to
   core.css.

   Numbered sections:
     1. Listing head
     2. Post cards
     3. Listing filter
     4. Article head
     5. Article head + prose seam
     6. Article furniture (tools row, takeaway, prev/next)
     7. Responsive
   ============================================================= */

/* ---------- 1. Listing head ---------------------------------- */

.blog-head {
  display: grid;
  gap: 18px;
  max-width: 62ch;
  margin-bottom: clamp(34px, 4.5vw, 56px);
}

.blog-head h1 { text-wrap: balance; }

/* ---------- 2. Post cards ------------------------------------ */

/* A row in an index, set the way a printed page sets one: kicker, headline,
   dateline, standfirst, all on one measure from the left margin. There is
   no picture and so no column reserved for one, which is what puts the
   title where the cover used to sit. The hairline that separates the rows
   is also the hover — it draws itself in the category colour under the
   cursor, which is the only affordance a row of text needs. */
.post-list {
  display: grid;
}

.post-card {
  position: relative;
  display: grid;
  padding-block: clamp(22px, 2.6vw, 32px);
  border-top: 1px solid var(--line);
}

.post-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--hue, var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t) var(--ease);
}

.post-card:hover::before { transform: scaleX(1); }

/* The whole row is the link target; the visible links inside it are
   the ones a keyboard reaches, so they stay real anchors. */
.post-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.post-card__cat {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hue, var(--accent));
}

.post-card__title {
  margin-top: 9px;
  max-width: 52ch;
  font-family: var(--font-display);
  font-size: clamp(1.32rem, 2.4vw, 1.8rem);
  font-weight: 550;
  line-height: 1.18;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.post-card__title a { color: inherit; transition: color var(--t) var(--ease); }
.post-card:hover .post-card__title a { color: var(--hue, var(--accent)); }

/* The dateline, under the headline, which is where a dateline belongs. It
   needs the room: at less than this the descenders of the headline above
   sit on top of it. */
.post-card__date {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

/* The standfirst: deliberately narrower than the headline above it. */
.post-card__excerpt {
  margin-top: 16px;
  font-size: 0.9rem;
  line-height: 1.66;
  color: var(--ink-2);
  max-width: 52ch;
}

/* ---------- 3. Listing filter -------------------------------- */

.post-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.post-filter__btn {
  height: 30px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}

.post-filter__btn:hover { color: var(--ink); border-color: var(--line-3); }

.post-filter__btn.is-on {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

/* Set by blog.js when a filter hides a card. */
.post-card[hidden] { display: none; }

/* ---------- 4. Article head ---------------------------------- */

/* The breadcrumb is its own class rather than the tool pages' `.crumbs`,
   because the blog loads core + blog only and a page should not have to
   pull in the tool stylesheet to draw three links. */
.post-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
  font-size: 0.78rem;
  color: var(--ink-3);
}

.post-crumbs a { color: var(--ink-3); transition: color var(--t-fast) var(--ease); }
.post-crumbs a:hover { color: var(--accent); }
.post-crumbs svg { width: 12px; height: 12px; color: var(--ink-4); flex-shrink: 0; }
.post-crumbs [aria-current] { color: var(--ink-2); }

.post-head {
  display: grid;
  gap: 20px;
  max-width: 78ch;
  padding-bottom: clamp(26px, 3.4vw, 40px);
}


.post-head h1 {
  font-size: clamp(2.1rem, 5vw, 3.5rem);
  text-wrap: balance;
}

.post-head__lede {
  font-size: clamp(1.02rem, 1.6vw, 1.16rem);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 62ch;
}

.post-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--ink-3);
}

.post-byline time { font-variant-numeric: tabular-nums; }
.post-byline b { color: var(--ink-2); font-weight: 600; }

.post-byline__avatar {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-ink);
  background: linear-gradient(157deg, var(--accent-2), var(--accent));
}

.post-byline__sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink-4);
}

/* ---------- 5. Article head + prose seam --------------------- */

/* The head closes with a hairline, and the room under it is what separates
   the title from the piece. The rule goes on the prose rather than the head
   so it measures to the prose; along the head it would overhang the text
   below it by a word. The .prose block itself now lives in core.css, since
   every tool page reads with it too. */
.post-head + .prose {
  margin-top: clamp(24px, 3vw, 36px);
  padding-top: clamp(26px, 3.4vw, 40px);
  border-top: 1px solid var(--line);
}

/* ---------- 6. Article furniture ----------------------------- */

.post-foot {
  max-width: 70ch;
  margin-top: clamp(46px, 5vw, 70px);
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--line-2);
  display: grid;
  gap: 26px;
}

.post-foot h2 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.71rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.post-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.post-tool {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.post-tool:hover {
  border-color: color-mix(in srgb, var(--hue, var(--accent)) 34%, transparent);
  background: var(--surface-3);
}

.post-tool__icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--inset);
  color: var(--hue, var(--accent));
}

.post-tool__icon svg { width: 16px; height: 16px; }

.post-tool__text { min-width: 0; }

.post-tool__name {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
}

.post-tool__note {
  display: block;
  margin-top: 2px;
  font-size: 0.76rem;
  color: var(--ink-3);
}

/* Prev / next — two cards, newest-first reading order preserved. */
.post-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.post-nav__item {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card-face);
  box-shadow: var(--card-shadow);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}

.post-nav__item:hover {
  border-color: color-mix(in srgb, var(--hue, var(--accent)) 34%, transparent);
  transform: translateY(-2px);
}

.post-nav__item--next { text-align: right; }

.post-nav__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.post-nav__title {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--ink);
}

/* The closing invitation back to the tools. */
.post-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  background: var(--card-face);
  box-shadow: var(--card-shadow);
}

.post-cta p {
  max-width: 52ch;
  font-size: 0.92rem;
  color: var(--ink-2);
}

.post-cta b {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 550;
  color: var(--ink);
}

/* ---------- 7. Responsive ------------------------------------ */

@media (max-width: 700px) {
  .post-nav { grid-template-columns: minmax(0, 1fr); }
  .post-nav__item--next { text-align: left; }
  .post-cta { flex-direction: column; align-items: flex-start; }
}