/* changelog.html: what changed in each version. Shares tokens, header, buttons and footer with styles.css; the
   releases are set apart by spacing and gold numerals, no boxes or rules. */
.changelog-shell { max-width: 1080px; }
.changelog { padding: 48px 0 80px; }
/* The title in capitals with open letter spacing, like the guide and the start page headings. */
.changelog h1 { font-size: clamp(24px, 3.4vw, 38px); font-weight: 700; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; margin: 16px 0 12px; text-wrap: balance; }
.changelog-lead { max-width: 60ch; color: var(--muted); font-size: 18px; }
.releases { display: grid; gap: 80px; margin-top: 72px; }
/* Version and date on the left (they stay in view while a long release is read), the changes on the right. */
.release { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 48px; align-items: start; scroll-margin-top: 24px; }
.release-meta { position: sticky; top: 32px; }
.release-version { font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -.02em; background: var(--gold-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.release-date { margin-top: 12px; color: var(--muted); font-size: 14px; letter-spacing: .04em; }
.release-badge { margin-top: 10px; color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }
/* The newest release sits in a soft gold light that fades out before any edge (closest-side), so it never shows a
   box. */
.release-latest { position: relative; isolation: isolate; }
.release-latest::before { content: ""; position: absolute; z-index: -1; inset: -48px 0; background: radial-gradient(closest-side at 30% 42%, var(--gold-glow) 0%, transparent 100%); pointer-events: none; }
.release-summary { color: var(--text); font-size: 21px; font-weight: 600; line-height: 1.45; text-wrap: balance; }
.release-group { margin-top: 30px; color: var(--gold); font-size: 12px; font-weight: 600; line-height: 1.6; letter-spacing: .28em; text-transform: uppercase; }
.release-list { display: grid; gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.release-list li { position: relative; padding-left: 24px; color: var(--text-soft); font-size: 16px; line-height: 1.7; }
.release-list li::before { content: ""; position: absolute; left: 3px; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-gradient); box-shadow: 0 0 12px var(--gold-glow); }
.release-list b { color: var(--text); font-weight: 600; }
.release-note { margin-top: 22px; color: var(--muted); font-size: 14px; }
.changelog-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 88px; }
@media (max-width: 760px) {
  .releases { gap: 60px; margin-top: 52px; }
  .release { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .release-meta { position: static; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
  .release-version { font-size: 38px; }
  .release-date, .release-badge { margin-top: 0; }
  .release-latest::before { inset: -24px 0; background: radial-gradient(closest-side at 40% 16%, var(--gold-glow) 0%, transparent 100%); }
}
@media (max-width: 600px) {
  .changelog { padding: 32px 0 56px; }
  .release-summary { font-size: 18px; }
  .release-list li { font-size: 15px; }
  .changelog-actions { margin-top: 64px; }
  .changelog-actions .button { width: 100%; }
}