/* creatyk.com · /novedades and /en/changelog. Uses the tokens and components of base.css (DESIGN.md has the rules);
   only this area's own rules live here. Owner: the novedades/seguridad agent.
   Landing-page-design pass: spacing (--spacing-*), backgrounds (--bg-*), radii (--radius-*) and motion
   (--ease, --dur-*) come from base.css, with fallbacks until it lands; type comes from the text-style
   classes in the markup (.heading-*, .title-*, .body-*, .caption-*, .button-*), so no sizes here.
   No glows, no gradients: violet is the accent only.
   The timeline: each version is a row whose big number holds (sticky) on the left while its notes
   scroll past on the right. No lines between versions: space and the numbers carry the rhythm. */

/* ── head: the live version and the version index ─────────────────────────────────────────── */
.rel-live { transition: opacity var(--dur-hover, 300ms) var(--ease, cubic-bezier(0.22, 1, 0.36, 1)); }
.rel-live[aria-busy="true"] { opacity: 0.72; }
.rel-live .skeleton--line { width: 72px; flex: 0 0 auto; }
.rel-index ul { margin: var(--spacing-200, 16px) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--spacing-75, 8px); }
.rel-index a {
  display: inline-grid; place-items: center; min-width: 56px; height: 40px; padding: 0 var(--spacing-200, 16px);
  border-radius: var(--radius-full, 999px); background: var(--bg-1, #181818); color: var(--ink-2);
  font-variant-numeric: tabular-nums; text-decoration: none;
  transition: background-color var(--dur-hover, 300ms) var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), color var(--dur-hover, 300ms) var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), transform var(--dur-hover, 300ms) var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.rel-index a:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .rel-index a:hover { background: var(--bg-2, #1f1f1f); color: var(--ink); } }
@media (pointer: coarse) { .rel-index a { height: 44px; } }

/* ── the timeline ─────────────────────────────────────────────────────────────────────────── */
.rels { display: grid; gap: var(--spacing-900, 96px); }
.rel { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: var(--spacing-700, 64px); align-items: start; scroll-margin-top: calc(var(--header-h) + var(--spacing-400, 32px)); }
.rel__side { position: sticky; top: calc(var(--header-h) + var(--spacing-400, 32px)); display: grid; justify-items: start; gap: var(--spacing-75, 8px); }
.rel__num { color: var(--ink); font-variant-numeric: tabular-nums; transition: color var(--dur-hover, 300ms) var(--ease, cubic-bezier(0.22, 1, 0.36, 1)); }
html:not(.js) .rel--latest .rel__num, .rel.is-current .rel__num { color: var(--accent-text); }
.rel__date { margin-top: var(--spacing-75, 8px); color: var(--ink-3); transition: color var(--dur-hover, 300ms) var(--ease, cubic-bezier(0.22, 1, 0.36, 1)); }
.rel.is-current .rel__date { color: var(--ink-2); }
.rel__builds { color: var(--ink-3); }
.rel__flag { margin-top: var(--spacing-75, 8px); }
.rel__body { max-width: 760px; }
.rel__title { text-wrap: balance; }
.rel__intro { margin-top: var(--spacing-100, 12px); color: var(--ink-2); text-wrap: pretty; }
.rel__list { margin-top: var(--spacing-300, 24px); }
.rel__list li { color: var(--ink); }
.rel__body > .rel__builds { margin-top: var(--spacing-100, 12px); }

/* a real crop of the app; "as it looks today" when the capture is newer than the version */
.rel__pic { margin-top: var(--spacing-400, 32px); }
.rel__pic .shot--crop { width: fit-content; max-width: 100%; border-radius: var(--radius-16, 16px); }
.rel__pic .shot--crop img { width: auto; max-width: 100%; }
.rel__caption { margin-top: var(--spacing-100, 12px); display: flex; align-items: center; gap: var(--spacing-75, 8px); color: var(--ink-3); }
.rel__caption .icon { width: 16px; height: 16px; }

/* 2.8: the new mark itself, on a flat panel */
.rel__art { margin-top: var(--spacing-400, 32px); display: grid; place-items: center; aspect-ratio: 16 / 7; border-radius: var(--radius-16, 16px); background: var(--bg-1, #181818); }
.rel__mark { width: clamp(96px, 14vw, 168px); height: auto; aspect-ratio: 1; }

/* ── phones and narrow tablets: the number sits above its notes, nothing holds ─────────────── */
@media (max-width: 899px) {
  .rels { gap: var(--spacing-800, 80px); }
  .rel { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-200, 16px); }
  .rel__side { position: static; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-50, 4px) var(--spacing-200, 16px); }
  .rel__date { margin-top: 0; }
  .rel__flag { margin-top: 0; }
  .rel__art { aspect-ratio: 16 / 9; }
}