/* What's New inherits the deployed context-relay.app editorial system, then
   lowers the volume: smaller display type, hairline chronology, and quiet
   release entries instead of promotional cards. */

.release-hero {
  max-width: 820px;
  padding: clamp(84px, 11vw, 132px) 0 clamp(68px, 8vw, 96px);
  border-bottom: 1px solid var(--line);
}

.release-hero h1 {
  max-width: 760px;
  font-size: clamp(46px, 6.8vw, 78px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.release-hero > p:last-child {
  max-width: 650px;
  margin: 30px 0 0;
  color: var(--muted);
  font-size: clamp(18px, 1.8vw, 21px);
  line-height: 1.58;
}

.release-layout {
  display: grid;
  grid-template-columns: 180px minmax(0, 760px);
  gap: clamp(52px, 8vw, 104px);
  align-items: start;
  padding: clamp(64px, 8vw, 92px) 0 128px;
}

.release-index {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 5px;
  font-size: 13px;
}

.release-index strong {
  margin-bottom: 12px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.release-index a {
  padding: 5px 0;
  color: var(--muted);
  text-decoration: none;
}

.release {
  scroll-margin-top: 96px;
}

.release + .release {
  margin-top: 96px;
  padding-top: 88px;
  border-top: 1px solid var(--line);
}

.release-heading {
  margin-bottom: 34px;
}

.release-label {
  margin: 0 0 10px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.release-heading h2 {
  margin: 0;
  font-size: clamp(35px, 4.2vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.release-intro {
  max-width: 66ch;
  margin: 0 0 24px;
  color: var(--muted);
}

.change-group {
  margin-top: 54px;
}

.change-group > h3 {
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.change-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.change {
  padding: 27px 0 30px;
  border-bottom: 1px solid var(--line);
}

.change h4 {
  max-width: 33ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(21px, 2.3vw, 25px);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.25;
  text-wrap: balance;
}

.change p {
  max-width: 70ch;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.68;
}

.change > p:first-child {
  margin-top: 0;
}

.change strong {
  color: var(--ink);
  font-weight: 600;
}

.change code {
  padding: 2px 5px;
  background: var(--wash);
  font-family: var(--mono);
  font-size: 0.84em;
}

@media (max-width: 780px) {
  .release-hero {
    padding: 84px 0 64px;
  }

  .release-layout {
    grid-template-columns: 1fr;
    gap: 44px;
    padding: 48px 0 88px;
  }

  .release-index {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-bottom: 28px;
    border-bottom: 1px solid var(--line);
  }

  .release-index strong {
    grid-column: 1 / -1;
  }

  .release + .release {
    margin-top: 72px;
    padding-top: 64px;
  }

  .change-group {
    margin-top: 44px;
  }
}