/* Blog index: oversized title, posts grouped by year. */

.blog-hero { position: relative; max-width: var(--maxw); margin: 0 auto; padding: clamp(140px, 22vw, 270px) var(--gutter) clamp(48px, 8vw, 96px); }
.blog-hero__title { margin-top: 14px; font-family: var(--font-serif); font-size: clamp(5.5rem, 22vw, 21rem); font-weight: 400; letter-spacing: -0.035em; line-height: 0.82; padding-bottom: 0.1em; }
.blog-hero__title em { color: var(--accent); }
.blog-hero__lede { margin-top: clamp(20px, 3vw, 40px); font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--text-dim); }

.blog-index { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) clamp(96px, 14vw, 200px); }
.year { display: grid; grid-template-columns: minmax(80px, 180px) 1fr; gap: 16px 40px; margin-top: clamp(32px, 5vw, 72px); }
.year__label { padding-top: 2.1em; font-family: var(--font-mono); font-size: 0.9rem; font-weight: 400; color: var(--text-dim); }
.post-list { border-top: 1px solid var(--line); }

.post-row {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 96px 1fr auto 24px;
  gap: 16px 32px;
  align-items: baseline;
  padding: 30px 16px;
  border-bottom: 1px solid var(--line);
}
.post-row::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: oklch(0.185 0.014 255 / 0.85);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.55s var(--ease);
}
.post-row:hover::before, .post-row:focus-visible::before { transform: scaleY(1); transform-origin: top; }
.post-row__date, .post-row__meta { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-dim); }
.post-row__meta { white-space: nowrap; }
.post-row__title { font-family: var(--font-serif); font-size: clamp(1.8rem, 3.4vw, 3rem); font-weight: 400; letter-spacing: -0.015em; line-height: 1.05; transition: transform 0.6s var(--ease); }
.post-row__tags { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 0.76rem; font-weight: 400; letter-spacing: 0; color: var(--text-dim); }
.post-row:hover .post-row__title, .post-row:focus-visible .post-row__title { transform: translateX(14px); }
.post-row__arrow { color: var(--text-dim); transition: transform 0.5s var(--ease), color 0.3s; }
.post-row:hover .post-row__arrow, .post-row:focus-visible .post-row__arrow { color: var(--accent); transform: translateX(6px); }

@media (max-width: 820px) {
  .year { grid-template-columns: 1fr; }
  .year__label { padding-top: 0; }
  .post-row { grid-template-columns: 1fr auto; padding-inline: 4px; }
  .post-row__date { grid-column: 1 / -1; }
  .post-row__arrow { display: none; }
}

/* ---------- legibility over the planet: the list sits on a dark slab, the small text in a soft shadow ---------- */

.post-list { background: oklch(0.13 0.011 255 / 0.62); }
.blog-hero__lede, .post-row__date, .post-row__meta, .post-row__tags, .year__label {
  text-shadow: 0 0 12px oklch(0.12 0.01 255), 0 0 26px oklch(0.12 0.01 255 / 0.8);
}