/* Compact release index with room around the chapter. */
:is(.studio-page,.approach-page) #changelog {
  padding-block: var(--rhythm-changelog);
}
:is(.studio-page,.approach-page) #changelog .home-changelog-heading {
  margin-bottom: var(--rhythm-section-heading);
}
:is(.studio-page,.approach-page) #changelog .home-changelog-list.home-ruled-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--color-structure);
  background: transparent;
}
:is(.studio-page,.approach-page) #changelog .home-changelog-list.home-ruled-grid > li {
  padding: 0;
  border: 0;
  background: transparent;
}
:is(.studio-page,.approach-page) #changelog .home-changelog-list.home-ruled-grid > li + li {
  border-left: 1px solid var(--color-structure);
}
:is(.studio-page,.approach-page) #changelog .home-changelog-list .home-changelog-entry {
  box-sizing: border-box;
  display: block;
  height: 100%;
  min-height: 100px;
  padding: 20px 24px;
  border: 0;
  border-radius: 0;
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color 140ms ease-out;
}
:is(.studio-page,.approach-page) #changelog .home-changelog-entry time {
  margin-bottom: 7px;
  font-size: 12px;
  line-height: 18px;
}
:is(.studio-page,.approach-page) #changelog .home-changelog-entry h3 {
  display: flex;
  align-items: flex-start;
  min-height: 0;
  padding: 0;
  color: inherit;
  gap: 20px;
  font-size: 15px;
  font-weight: 500;
  line-height: 21px;
  text-decoration: none;
}
:is(.studio-page,.approach-page) #changelog .home-changelog-entry h3 > span {
  flex: 1;
  min-width: 0;
}
:is(.studio-page,.approach-page) #changelog .home-changelog-entry .directional-link__icon {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0;
  color: var(--color-text-supporting);
}
:is(.studio-page,.approach-page) #changelog .home-changelog-entry:focus-visible {
  background: var(--color-bg-surface);
}
:is(.studio-page,.approach-page) #changelog .home-changelog-entry:focus-visible .directional-link {
  --directional-head-shift: 0px;
  --directional-shaft-reveal: 0px;
}
@media (hover: hover) {
  :is(.studio-page,.approach-page) #changelog .home-changelog-entry:hover {
    background: var(--color-bg-surface);
  }
  :is(.studio-page,.approach-page) #changelog .home-changelog-entry:hover .directional-link {
    --directional-head-shift: 0px;
    --directional-shaft-reveal: 0px;
  }
}
:is(.studio-page,.approach-page) #changelog .home-changelog-entry:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--text-primary);
  outline-offset: -3px;
}
@media (max-width: 760px) {
  :is(.studio-page,.approach-page) #changelog {
    padding-block: var(--space-12);
  }
  :is(.studio-page,.approach-page) #changelog .home-changelog-heading {
    margin-bottom: var(--rhythm-content-gap);
  }
  :is(.studio-page,.approach-page) #changelog .home-changelog-list.home-ruled-grid {
    grid-template-columns: 1fr;
  }
  :is(.studio-page,.approach-page) #changelog .home-changelog-list.home-ruled-grid > li + li {
    border-left: 0;
    border-top: 1px solid var(--color-structure);
  }
  :is(.studio-page,.approach-page) #changelog .home-changelog-list .home-changelog-entry {
    min-height: 92px;
    padding: 18px 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.studio-page,.approach-page) #changelog .home-changelog-entry {
    transition: none;
  }
}

/* A readable release chapter rather than another oversized transition. */
.approach-page #changelog {padding-block:var(--space-16)}
.approach-page #changelog .home-changelog-heading {margin-bottom:var(--space-6)}
.approach-page #changelog h2 {font-size:28px;line-height:1.2;letter-spacing:-.02em}
@media(max-width:760px) {
 .approach-page #changelog {padding-block:var(--space-10)}
 .approach-page #changelog h2 {font-size:24px}
}