/* changelog.css — the public /changelog page. Sibling of the Notes family:
   extends page.css + lab-page.css, dark, site tokens, mono dates, restrained.
   Accent is the brand blue (--page-library), used only on the version number. */

.changelog-list { max-width: 760px; }

.clog-entry { padding: 4px 0; }

.clog-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 16px;
}
.clog-version {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--page-library);
  letter-spacing: 0.02em;
}
.clog-date {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--faint);
  letter-spacing: 0.02em;
}
.clog-date--soon { color: var(--dim); }

.clog-para {
  font-size: var(--fs-lead);
  font-weight: 500;
  color: var(--dim);
  line-height: 1.55;
  max-width: 620px;
  margin-bottom: 18px;
  text-wrap: pretty;
}
.clog-para:last-child { margin-bottom: 0; }

.clog-bullets {
  list-style: none;
  max-width: 640px;
  margin: 0;
}
.clog-bullets li {
  position: relative;
  padding-left: 20px;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--dim);
  margin-bottom: 9px;
}
.clog-bullets li:last-child { margin-bottom: 0; }
.clog-bullets li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 5px;
  height: 5px;
  background: var(--page-library);
  opacity: 0.7;
}

.clog-para code,
.clog-bullets code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--code-plain);
  background: var(--hover);
  padding: 1px 5px;
}
.clog-para strong,
.clog-bullets strong { color: var(--ink); font-weight: 600; }

/* Dithered divider between entries — a fading pixel grid, cheap echo of the
   notes-src dither grammar, no generator. */
.clog-divider {
  height: 12px;
  margin: 40px 0;
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 6px 6px;
  background-position: 0 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  opacity: 0.7;
}

@media (max-width: 599px) {
  .clog-head { gap: 10px; }
  .clog-divider { margin: 30px 0; }
}