.view--page {
  width: min(100% - var(--gutter) * 2, var(--maxw));
  margin: 0 auto;
  padding: calc(var(--bar-h) + clamp(2rem, 6vh, 4rem)) 0 clamp(3.5rem, 8vh, 6rem);
}

.page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 22rem);
  align-items: center;
  gap: 1.5rem;
  min-height: min(42vh, 24rem);
}
.page-head__copy { display: grid; gap: 1rem; justify-items: start; }
.page-title { font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: .98; max-width: 13ch; }
.page-lede { color: var(--dim); font-size: clamp(1rem, 1.3vw, 1.15rem); max-width: 44ch; }
.page-head__emblem { width: 100%; aspect-ratio: 1; }

.features { margin-top: 2rem; display: grid; }
.fgroup {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: 1rem 3rem;
  padding: 2.2rem 0;
  border-top: 1px solid var(--line);
}
.fgroup__head { display: grid; align-content: start; gap: .7rem; }
.fgroup__head h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.fgroup__icon {
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
}
.fgroup__icon svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fgroup__body { display: grid; gap: 1.4rem; }
.fgroup__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem 2rem; }
.fgroup__list li {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .55rem 0;
  font-size: 1rem; line-height: 1.45;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.fgroup__list li::before { content: ''; flex: none; width: .35rem; height: .35rem; border-radius: 50%; translate: 0 -.15rem; background: var(--faint); }
.fgroup__list span { flex: 1; }
.fgroup__shots { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .4rem; scrollbar-width: none; }
.fgroup__shots::-webkit-scrollbar { display: none; }
.fgroup__shots figure { flex: none; display: grid; gap: .5rem; }
.fgroup__shots img {
  height: clamp(15rem, 34vh, 24rem); width: auto;
  border-radius: 1rem;
  border: 1px solid var(--line-strong);
  background: #0c0d0f;
}
.fgroup__shots figcaption { font-size: .8rem; color: var(--faint); }
.ftag {
  flex: none;
  padding: .1rem .5rem; border-radius: 999px;
  font-style: normal; font-size: .7rem; font-weight: 600;
  color: var(--dim); background: var(--surface-2);
}

.page-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2.5rem; }
.page-cta .btn { min-height: 3rem; padding: 0 1.5rem; }

.changelog { margin-top: 1.5rem; display: grid; }
.release {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: .5rem 2.5rem;
  padding: 2rem 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--bar-h) + 1.25rem);
}
.release__head { display: grid; align-content: start; justify-items: start; gap: .45rem; }
.release__version { font-family: var(--accent-font); font-size: 1.7rem; font-weight: 600; letter-spacing: -.02em; }
.release__latest { padding: .1rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 600; color: var(--live); background: rgba(82, 255, 182, .1); }
.release__upcoming { padding: .1rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 600; color: var(--blue); background: rgba(101, 208, 255, .1); }
.release__date { font-size: .82rem; color: var(--faint); }
.release__items { display: grid; gap: .1rem; }
.release__item { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: baseline; gap: 1rem; padding: .45rem 0; font-size: 1rem; line-height: 1.45; }
.release__type { justify-self: start; padding: .1rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.release__item--new .release__type { color: var(--text); background: var(--surface-3); }
.release__item--improved .release__type { color: var(--blue); background: rgba(101, 208, 255, .1); }
.release__item--fixed .release__type { color: var(--live); background: rgba(82, 255, 182, .1); }
.release__empty { padding: 2.5rem 0; color: var(--dim); }
.release__empty a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.release--ghost { min-height: 14rem; position: relative; overflow: hidden; }
.release--ghost::after {
  content: ''; position: absolute; inset: 2rem 0;
  border-radius: 1rem;
  background: linear-gradient(100deg, rgba(255, 255, 255, .02) 20%, rgba(255, 255, 255, .06) 40%, rgba(255, 255, 255, .02) 60%) 0 0 / 300% 100%;
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer { to { background-position: -100% 0; } }

@media (max-width: 900px) {
  .fgroup { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .fgroup__list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .page-head { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: .5rem; }
  .page-head__emblem { order: -1; width: 9rem; justify-self: center; }
  .page-head__copy { justify-items: center; text-align: center; }
  .page-title { margin-inline: auto; }
  .release { grid-template-columns: minmax(0, 1fr); gap: .9rem; padding: 1.5rem 0; }
  .release__head { grid-auto-flow: column; align-items: center; justify-content: start; gap: .75rem; }
  .release__item { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
}