/* ============================================================
   RELEASES — /releases/
   A vertical timeline of customer-facing releases, newest first.
   Colour comes only from the tokens in /styles.css, so both themes work
   unchanged. Sentence-case headings (`.display-soft`); mono for dates,
   month markers and chips.

   Only what a customer can use goes here. Internal refactors,
   architecture work and fixes stay in the product changelog.
   ============================================================ */

.rl-hero h1 { max-width: 15ch; }
.rl-hero .lede { max-width: 50ch; }

/* ---------- the timeline ---------- */
.rl-wrap { padding-top: clamp(8px, 2vw, 24px); }
.rl-list { list-style: none; margin: 0; padding: 0; position: relative; }
/* the rail: one hairline behind every dot */
.rl-list::before {
  content: ''; position: absolute; top: 10px; bottom: 10px;
  left: calc(var(--rl-date) + var(--rl-gap) + 15px); width: 1.5px; background: var(--rule-strong);
}
.rl-list { --rl-date: 150px; --rl-gap: 24px; }

.rl-month {
  display: grid; grid-template-columns: var(--rl-date) 32px minmax(0, 1fr); column-gap: var(--rl-gap);
  align-items: center; padding: 28px 0 10px;
}
.rl-month:first-child { padding-top: 0; }
.rl-month span {
  grid-column: 3; font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.rl-month i {
  grid-column: 2; justify-self: center; width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--rule-strong); position: relative; z-index: 1;
}

.rl-item {
  display: grid; grid-template-columns: var(--rl-date) 32px minmax(0, 1fr); column-gap: var(--rl-gap);
  align-items: start; padding: 14px 0;
}
.rl-date { text-align: right; padding-top: 22px; }
.rl-date time { display: block; font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--ink); }
.rl-date small { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-3); }

.rl-dot {
  justify-self: center; margin-top: 22px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; position: relative; z-index: 1;
  background: var(--surface); border: 1.5px solid var(--rule-strong); color: var(--ink-2);
}
.rl-dot svg { width: 16px; height: 16px; display: block; }
.rl-item.is-latest .rl-dot {
  background: var(--violet-500); border-color: var(--violet-500); color: #fff;
  box-shadow: 0 0 0 6px var(--accent-soft);
}

.rl-card {
  min-width: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px;
  padding: 22px 26px 22px;
}
.rl-item.is-latest .rl-card { border-color: color-mix(in oklab, var(--accent) 45%, var(--rule)); box-shadow: 0 18px 44px oklch(0.15 0.02 274 / 0.08); }
.rl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.rl-chip {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px; color: var(--ink-2); background: var(--bg-2); border: 1px solid var(--rule);
}
.rl-chip.latest { color: #fff; background: var(--violet-500); border-color: var(--violet-500); }
.rl-chip.early { color: var(--accent-hover); background: var(--accent-soft); border-color: transparent; }
.rl-card h2 { margin: 0; font-size: clamp(19px, 1.9vw, 23px); font-weight: 600; letter-spacing: -.018em; line-height: 1.25; }
.rl-card p { margin-top: 10px; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; max-width: 68ch; }
.rl-points { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; max-width: 70ch; }
.rl-points li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.rl-points li::before {
  content: ''; position: absolute; left: 2px; top: .52em; width: 8px; height: 4.5px;
  border-left: 1.7px solid var(--accent); border-bottom: 1.7px solid var(--accent); transform: rotate(-45deg);
}
.rl-points b { color: var(--ink); font-weight: 600; }
.rl-more { margin-top: 16px; }
.rl-more a {
  font-size: 14.5px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-strong); padding-bottom: 1px;
}
.rl-more a:hover { color: var(--accent); border-color: var(--accent); }

/* the date inside the card, shown only on narrow screens */
.rl-card-date { display: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em; color: var(--ink-2); margin-bottom: 10px; }

@media (max-width: 760px) {
  .rl-list { --rl-date: 0px; --rl-gap: 14px; }
  .rl-list::before { left: 15px; }
  .rl-month, .rl-item { grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; }
  .rl-month span { grid-column: 2; }
  .rl-month i { grid-column: 1; }
  .rl-date { display: none; }
  .rl-dot { grid-column: 1; margin-top: 18px; }
  .rl-card { grid-column: 2; padding: 18px 18px 18px; }
  .rl-card-date { display: block; }
}

/* ---------- closing band ---------- */
.rl-closer { background: var(--panel); color: var(--panel-ink); padding: clamp(56px, 7vw, 92px) 0; }
.rl-closer-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; }
.rl-closer .display-soft { color: var(--panel-ink); max-width: 22ch; }
.rl-closer p { color: var(--panel-ink-2); margin-top: 14px; max-width: 52ch; font-size: 16.5px; }
.rl-closer .tag { color: var(--panel-ink-2); }
.rl-closer .direct { margin-top: 18px; font-family: var(--font-mono); font-size: 13px; }
.rl-closer .direct a { color: var(--violet-300); }
@media (max-width: 760px) { .rl-closer-in { grid-template-columns: 1fr; } }