/* /changelog. Loads after landing.css (tokens, buttons, footer, .reveal). */

.cl{max-width:880px;margin:0 auto;padding:90px 20px 140px}

/* a release: version and date on the left (sticky), the notes on the right */
.rel{display:grid;grid-template-columns:150px 1fr;gap:28px;padding:44px 0;border-top:1px solid var(--rule)}
.rel-when{position:sticky;top:84px;align-self:start;display:flex;flex-direction:column;gap:6px}
.rel-when b{font:30px/1 var(--disp);font-weight:400;color:var(--ink-0)}
.rel-when span{font:16px/1 var(--disp);letter-spacing:.06em;color:var(--ink-2)}
.rel-body h3{font-size:clamp(30px,4vw,40px);line-height:1;margin:0 0 22px;color:var(--ink)}
.rel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.rel li{display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:baseline}
.rel li p{margin:0;color:var(--ink-1)}
.rel li b{font-weight:600;color:var(--ink-0)}
/* the kind of change, in the notch's pixel type */
.rel i{justify-self:start;font:9px/1 var(--pixel);font-style:normal;letter-spacing:.1em;text-transform:uppercase;padding:5px 7px 4px;border-radius:6px;translate:0 -2px}
.chip-new{background:#111;color:var(--amber)}
.chip-improved{background:color-mix(in srgb,var(--amber) 22%,#fff);color:var(--ink)}
.chip-fixed{background:#fff;color:var(--ink-1);box-shadow:inset 0 0 0 1px var(--rule)}

/* not out yet: a dashed card, the version badge blinks like the notch's clock */
.rel.next{border-top:0;margin-bottom:8px;padding:30px 28px;border-radius:24px;background:#fff;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--amber) 55%,transparent)}
.rel.next .rel-when{position:static}
.rel.next .rel-when span{color:var(--ink);animation:clBlink 1.6s steps(2,jump-none) infinite}
@keyframes clBlink{50%{opacity:.35}}

/* before 1.0: a short dated log on a dotted line */
.cl-pre{margin-top:30px;padding-top:50px;border-top:1px solid var(--rule)}
.cl-pre h3{font-size:30px;margin:0 0 6px}
.cl-pre-sub{margin:0 0 26px;color:var(--ink-2)}
.cl-pre ol{list-style:none;margin:0;padding:0 0 0 22px;border-left:2px dotted var(--rule);display:flex;flex-direction:column;gap:20px}
.cl-pre li{position:relative;display:grid;grid-template-columns:70px 1fr;gap:14px}
.cl-pre li::before{content:"";position:absolute;left:-28px;top:6px;width:10px;height:10px;background:var(--amber)}
.cl-pre li span{font:17px/1.3 var(--disp);letter-spacing:.04em;color:var(--ink)}
.cl-pre li p{margin:0;color:var(--ink-1)}

@media (max-width:640px){
  .cl{padding-top:50px}
  .rel{grid-template-columns:1fr;gap:14px}
  .rel-when{position:static;flex-direction:row;align-items:baseline;gap:12px}
  .rel li{grid-template-columns:1fr;gap:6px}
  .rel.next{padding:24px 20px}
  .cl-pre li{grid-template-columns:1fr;gap:2px}
}
@media (prefers-reduced-motion:reduce){.rel.next .rel-when span{animation:none}}