/* Changelog index + entry pages (blog.css supplies illustrations, header, prose and motion). */
.cl-top { padding: 113px var(--pad) 80px; }
.cl-h1 { margin-top: 24px; font: 700 56px/62px var(--sans); letter-spacing: -0.03em; }
.cl-lede { margin-top: 28px; font-size: 19px; line-height: 1.5; letter-spacing: -0.01em; color: var(--muted); }

/* Entry rows: sticky date column + body */
.cl__e { display: grid; grid-template-columns: 280px 1fr; }
.cl__e + .cl__e { border-top: 1px solid var(--line); }
.cl__when { border-right: 1px solid var(--line); padding: 48px var(--pad); }
.cl__stick { position: sticky; top: 40px; }
.cl__date { font-size: 16px; line-height: 1.4; letter-spacing: -0.01em; }
.cl__v { margin-top: 8px; color: var(--muted); }
.cl__body { padding: 48px var(--pad) 68px; min-width: 0; }
.cl__h { margin-top: 26px; font: 600 28px/1.2 var(--sans); letter-spacing: -0.02em; }
.cl__h a { transition: color .2s; }
.cl__h a:hover { color: var(--signal); }
.cl__p { margin-top: 22px; max-width: 632px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.cl__art { display: block; margin-top: 30px; max-width: 776px; aspect-ratio: 776 / 482; border: 1px solid var(--line); background: var(--bg); }
.cl__more { margin-top: 44px; }

/* Previous / next update */
.pn { display: flex; justify-content: space-between; gap: 32px; padding: 48px var(--pad) 46px; }
.pn__a { display: flex; flex-direction: column; gap: 10px; }
.pn__a--next { align-items: flex-end; text-align: right; }
.pn__l { color: var(--muted); transition: color .2s; }
.pn__v { color: var(--signal); }
.pn__t { margin-top: 8px; font: 600 22px/1.25 var(--sans); letter-spacing: -0.015em; transition: color .2s; }
.pn__a:hover .pn__t, .pn__a:hover .pn__l { color: var(--signal); }

@media (max-width: 900px) {
  .cl-top { padding: 72px var(--pad) 56px; }
  .cl-h1 { font-size: 40px; line-height: 46px; }
  .cl-lede { font-size: 17px; }
  .cl__e { grid-template-columns: 1fr; }
  .cl__when { border-right: 0; padding: 32px var(--pad) 0; }
  .cl__stick { position: static; display: flex; align-items: baseline; gap: 12px; }
  .cl__v { margin-top: 0; }
  .cl__body { padding: 20px var(--pad) 44px; }
  .cl__h { font-size: 24px; margin-top: 20px; }
  .cl__more { margin-top: 32px; }
  .pn { flex-direction: column; padding: 40px var(--pad); }
  .pn__a--next { align-items: flex-start; text-align: left; }
  .pn__t { font-size: 20px; }
}