.changelog-page {
  background: var(--home-hover-surface);
  color: var(--home-dark-text);
}

.changelog-page .landing-site-navbar { background: var(--home-menu-surface); }

.changelog-shell {
  display: grid;
  gap: clamp(3rem, 8vw, 8rem);
  grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr);
  margin: 0 auto;
  max-width: 1220px;
  padding: clamp(9rem, 12vw, 11rem) clamp(1rem, 4vw, 3rem) 7rem;
}

.changelog-intro {
  align-self: start;
  max-width: 440px;
  position: sticky;
  top: 8rem;
}

.changelog-kicker {
  color: var(--home-primary-blue);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .15em;
  margin: 0 0 1.35rem;
  text-transform: uppercase;
}

.changelog-intro h1 {
  color: var(--home-menu-text);
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 6.4vw, 6.3rem);
  font-weight: 650;
  letter-spacing: -.078em;
  line-height: .84;
  margin: 0;
}

.changelog-lead {
  color: var(--home-menu-copy);
  font-size: .88rem;
  line-height: 1.75;
  margin: 1.7rem 0 2rem;
  max-width: 410px;
}

.changelog-legend {
  border-bottom: 1px solid var(--primary-l-color);
  border-top: 1px solid var(--primary-l-color);
  display: flex;
  flex-wrap: wrap;
  gap: .85rem 1.2rem;
  padding: 1.15rem 0;
}

.changelog-legend span {
  align-items: center;
  color: var(--home-footer-link);
  display: flex;
  font-size: .65rem;
  font-weight: 750;
  gap: .4rem;
}

.changelog-legend i { color: var(--home-primary-blue); font-size: .9rem; }
.changelog-count { color: var(--home-menu-label); font-size: .62rem; line-height: 1.55; margin: 1rem 0 0; }
.changelog-count strong { color: var(--home-menu-text); font-size: .72rem; }
.changelog-stream { position: relative; }

.changelog-stream::before {
  background: linear-gradient(var(--home-primary-blue), var(--primary-l-color));
  bottom: 0;
  content: "";
  left: 20px;
  position: absolute;
  top: 42px;
  width: 2px;
}

.changelog-release {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: 42px minmax(0, 1fr);
  padding: 0 0 4.2rem;
  position: relative;
}

.changelog-release:last-child { padding-bottom: 0; }

.changelog-marker {
  align-items: center;
  background: var(--home-hover-surface);
  border: 2px solid var(--home-primary-blue);
  border-radius: 50%;
  display: flex;
  height: 42px;
  justify-content: center;
  position: relative;
  width: 42px;
  z-index: 1;
}

.changelog-marker span { color: var(--home-primary-blue); font-size: .55rem; font-weight: 800; letter-spacing: .06em; }

.changelog-release-header {
  align-items: center;
  border-bottom: 1px solid var(--primary-l-color);
  display: flex;
  justify-content: space-between;
  min-height: 42px;
  padding: 0 0 1rem;
}

.changelog-release-header time {
  color: var(--home-menu-text);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 680;
  letter-spacing: -.035em;
}

.changelog-release-header > span { color: var(--home-menu-label); font-size: .58rem; font-weight: 780; letter-spacing: .08em; text-transform: uppercase; }
.changelog-items { display: grid; grid-column: 2; }

.changelog-item {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 112px minmax(0, 1fr);
  padding: 1.35rem 0;
}

.changelog-item + .changelog-item { border-top: 1px solid var(--primary-l-color); }

.changelog-category {
  align-items: center;
  align-self: start;
  border-radius: 999px;
  display: inline-flex;
  font-size: .57rem;
  font-weight: 800;
  gap: .35rem;
  justify-self: start;
  letter-spacing: .06em;
  margin: .15rem 0 0;
  padding: .42rem .62rem;
  text-transform: uppercase;
}

.changelog-category--feature { background: var(--home-changelog-feature-surface); color: var(--home-changelog-feature-text); }
.changelog-category--improvement { background: var(--home-changelog-improvement-surface); color: var(--home-changelog-improvement-text); }
.changelog-category--fix { background: var(--home-changelog-fix-surface); color: var(--home-changelog-fix-text); }
.changelog-category i { font-size: .72rem; }
.changelog-item h2 { color: var(--home-menu-text); font-family: var(--font-display); font-size: 1.25rem; font-weight: 680; letter-spacing: -.035em; line-height: 1.15; margin: 0 0 .45rem; }
.changelog-item div > p { color: var(--home-menu-copy); font-size: .75rem; line-height: 1.7; margin: 0; max-width: 600px; }

@media (max-width: 860px) {
  .changelog-shell { gap: 4rem; grid-template-columns: 1fr; max-width: 760px; padding-top: 8rem; }
  .changelog-intro { max-width: 640px; position: static; }
  .changelog-intro h1 { font-size: clamp(3.7rem, 13vw, 6rem); }
  .changelog-lead { max-width: 520px; }
}

@media (max-width: 650px) {
  .changelog-shell { padding: 7rem 1rem 5rem; }
  .changelog-stream::before { left: 15px; }
  .changelog-release { gap: 1rem; grid-template-columns: 32px minmax(0, 1fr); padding-bottom: 3.3rem; }
  .changelog-marker { height: 32px; width: 32px; }
  .changelog-marker span { font-size: .48rem; }
  .changelog-release-header { align-items: flex-start; min-height: 32px; padding-bottom: .8rem; }
  .changelog-release-header time { font-size: 1.35rem; }
  .changelog-release-header > span { margin-top: .28rem; }
  .changelog-items { grid-column: 2; }
  .changelog-item { gap: .6rem; grid-template-columns: 1fr; padding: 1.15rem 0; }
  .changelog-category { margin: 0; }
  .changelog-item h2 { font-size: 1.17rem; }
}