/* Changelog page. Uses the shared tokens from styles.css only. */

.changelog-main {
  padding-block:5rem 7rem;
}

.changelog-head {
  max-width:800px;
  margin-bottom:5rem;
}

.changelog-head .eyebrow {
  color:var(--accent);
  font:600 .7rem var(--mono);
  letter-spacing:.12em;
}

.changelog-head h1 {
  font-family:var(--font);
  font-size:clamp(3rem,6vw,5.3rem);
  margin:1.4rem 0;
  line-height:1.04;
}

.changelog-head h1 span {
  color:var(--accent);
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  letter-spacing:-.03em;
}

.changelog-head>p:last-child {
  max-width:32rem;
  color:var(--ink-soft);
  font-size:1.1rem;
}

.changelog-layout {
  display:grid;
  grid-template-columns:200px minmax(0,1fr);
  gap:5rem;
  align-items:start;
}

.version-nav {
  display:grid;
  gap:.5rem;
  position:sticky;
  top:95px;
}

.version-nav a {
  display:flex;
  gap:1rem;
  align-items:center;
  padding:.75rem 0;
  border-bottom:1px solid var(--line);
  font-size:1.1rem;
  font-weight:600;
  text-decoration:none;
  color:var(--ink);
}

.version-nav a span {
  font-size:.7rem;
  font-weight:400;
  color:var(--muted);
}

.version-nav a:hover {
  color:var(--accent);
}

.version-nav .version-feedback {
  display:block;
  margin-top:1.3rem;
  border:0;
  font-size:.85rem;
}

.version-feedback span {
  display:block;
  margin-top:.3rem;
}

.release {
  padding-bottom:4rem;
  margin-bottom:3rem;
  border-bottom:1px solid var(--line);
  scroll-margin-top:95px;
}

.release-meta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem;
  color:var(--muted);
  font-size:.75rem;
  margin-bottom:1.4rem;
}

.release-meta>a {
  font-family:var(--mono);
  color:var(--ink);
  font-size:.8rem;
  text-decoration:none;
}

.release-status {
  background:var(--hero);
  color:var(--accent);
  padding:.2rem .6rem;
  border-radius:999px;
  font-weight:600;
  font-size:.65rem;
}

.release-status--preview {
  background:var(--peach);
  color:var(--on-peach);
}

.release h2 {
  max-width:20ch;
  font-family:var(--font);
  font-size:clamp(2rem,4vw,3rem);
  letter-spacing:-.045em;
}

.release-summary {
  margin:1rem 0 2rem;
  color:var(--ink-soft);
  max-width:42rem;
}

.release-group {
  margin-top:2rem;
}

.release-group h3 {
  font-size:1.1rem;
  margin-bottom:.7rem;
}

.release-group ul {
  padding-left:1.1rem;
  color:var(--ink-soft);
  font-size:1rem;
}

.release-group li {
  padding-left:.4rem;
  margin:.65rem 0;
}

.release-group li::marker {
  color:var(--accent);
}

.release-gallery {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
  background:var(--hero);
  padding:1.5rem 1.5rem 1rem;
  border-radius:16px;
}

.release-gallery img {
  width:100%;
  height:auto;
  border:3px solid var(--device);
  border-radius:18px;
}

.release-gallery figcaption {
  grid-column:1/-1;
  font-size:.65rem;
  text-align:center;
  color:var(--muted);
}

.changelog-source {
  font-size:.8rem;
  color:var(--muted);
}

.changelog-source a,.back-home {
  color:var(--accent);
}

.back-home {
  display:inline-block;
  margin-top:2rem;
  font-weight:600;
}

@media(max-width:800px) {
  .changelog-main {
    padding-top:3rem;
  }
  .changelog-head {
    margin-bottom:3rem;
  }
  .changelog-layout {
    grid-template-columns:1fr;
    gap:2rem;
  }
  .version-nav {
    position:static;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1rem;
  }
  .version-nav a {
    display:block;
  }
  .version-nav span {
    display:block;
    margin-top:.3rem;
  }
  .version-nav .version-feedback {
    display:none;
  }
  .release-gallery {
    padding:1rem .75rem;
    gap:.5rem;
  }
  .release-gallery img {
    border-radius:12px;
  }
}

@media(max-width:560px) {
  .release-gallery {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
    padding:1rem;
  }
}