/* The changelog: an 840 column of cards. Own namespace (.cl) so nothing here
   collides with another page's sheet. */

.cl-shell {
  max-width: 840px;
  margin: 0 auto;
  padding: 0 28px;
}

.cl-page { padding: 52px 0 76px; }

.cl__eyebrow {
  display: block;
  font: var(--dm11);
  letter-spacing: var(--track-eyebrow);
  color: var(--ph-dim);
  -webkit-font-smoothing: none;
}

.cl__title {
  margin: 14px 0 30px;
  font: var(--dm22-title);
  letter-spacing: 0;
  color: var(--ph-bright);
  -webkit-font-smoothing: none;
}

/* The lede borrows the title's 30px and gives it back, so the negative margin. */
.cl__lede {
  margin: -18px 0 30px;
  font: var(--t-body);
  color: var(--ph-mute);
  max-width: 44em;
}

.cl__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cl__entry {
  border: var(--line) solid var(--ph-l3);
  background: var(--surface);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.cl__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Nothing has a version, so the first slot carries the area of the system that changed. */
.cl__area { font: var(--dm11); letter-spacing: var(--track-micro); color: var(--ph); -webkit-font-smoothing: none; }

.cl__when { font: var(--dm11); letter-spacing: var(--track-micro); color: var(--ph-dim); -webkit-font-smoothing: none; }

/* A card title: 11px, sentence case, pixel bold. */
.cl__title-row {
  margin: 0;
  font: var(--dm11-title);
  text-shadow: var(--px-bold);
  letter-spacing: 0;
  color: var(--ph-bright);
  -webkit-font-smoothing: none;
}

.cl__body {
  margin: 0;
  font: 400 14.5px/1.6 var(--face-mono);
  color: var(--ph-mute2);
}

.cl__body strong { color: var(--ph-text); }

/* What this page will not claim, drawn as a hairline block so it doesn't read as a shipped change. */
.cl__omit {
  margin-top: 30px;
  border-top: var(--line) solid var(--ph-l2);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cl__omit-head {
  font: var(--dm11);
  letter-spacing: var(--track-micro);
  color: var(--ph-dim);
  -webkit-font-smoothing: none;
}

@media (max-width: 700px) {
  .cl-page { padding: 28px 0 52px; }
  .cl__entry { padding: 18px; }
}