/* ============================================================
   Vital Vybez — Changelog (/changelog/)
   Builds strictly on css/brand.css tokens; shares css/public.css
   Components: solo hero, the dated log, the source-of-truth band
   ============================================================ */

/* ---------- Solo hero (no art panel) ---------- */
.changelog-hero__in { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.changelog-hero__title { max-width: 20ch; }
.changelog-hero__sub { max-width: 56ch; }

/* ---------- The log ---------- */
.log { max-width: 880px; }
.entry {
  display: grid; grid-template-columns: 190px minmax(0, 1fr);
  gap: var(--space-6); padding: var(--space-8) 0;
  border-top: 3px solid var(--vv-black);
}
.entry:last-child { border-bottom: 3px solid var(--vv-black); }
.entry__when {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: #4a463d; padding-top: 7px;
}
.entry__body h2 { color: var(--vv-dark-green); font-size: 1.5rem; }
.entry__body p { margin-top: var(--space-4); font-size: .98rem; line-height: 1.7; color: #2b2b26; }
.entry__body ul { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.entry__body li { position: relative; padding-left: 24px; font-size: .96rem; line-height: 1.65; color: #2b2b26; }
.entry__body li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 10px; height: 10px; background: var(--vv-yellow); border: 2px solid var(--vv-black);
}
@media (max-width: 720px) {
  .entry { grid-template-columns: 1fr; gap: var(--space-3); }
  .entry__when { padding-top: 0; }
}

/* ---------- Source of truth ---------- */
.source {
  border: 3px solid var(--vv-black); border-radius: var(--radius-sm);
  background: var(--vv-white); padding: var(--space-8);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-8); align-items: center;
}
.source__body p { margin-top: var(--space-4); font-size: .98rem; line-height: 1.7; color: #2b2b26; }
.source__act { flex: 0 0 auto; }
@media (max-width: 780px) { .source { grid-template-columns: 1fr; gap: var(--space-6); } }