/* Changelog: a dated timeline in the Gate look. Loaded after site.css. */

.cl main { padding-top: calc(var(--nav-h) + clamp(56px, 10vh, 120px)); }
.nav-links a[aria-current="page"] { color: var(--text-1); }
.cl .nav { background: oklch(0 0 0 / .62); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 1px 0 var(--line); isolation: isolate; }
.cl .nav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../img/grain.png"); opacity: .04; pointer-events: none; }

.cl-head, .cl-list { width: min(100% - 2 * var(--gutter), 1080px); margin-inline: auto; }
.cl-head { display: grid; gap: 22px; padding-bottom: clamp(56px, 9vh, 100px); }
.cl-head h1 { font-size: clamp(40px, 6vw, 84px); }
.cl-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cl-links .btn svg { width: 14px; height: 14px; }

/* The timeline: a hairline down the left, a gem at each version, the newest in prism */
.cl-list { position: relative; display: grid; gap: clamp(88px, 14vh, 160px); padding: clamp(48px, 7vh, 80px) 0 clamp(100px, 16vh, 180px); border-top: 1px solid var(--line); }
.cl-list::before { content: ""; position: absolute; left: 4.5px; top: calc(clamp(48px, 7vh, 80px) + 10px); bottom: 0; width: 1px; background: linear-gradient(var(--line-2), var(--line) 85%, transparent); }
.cl-entry { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 40px; scroll-margin-top: 28px; }
.cl-when { position: sticky; top: calc(var(--nav-h) + 30px); align-self: start; display: grid; grid-template-columns: 10px auto; column-gap: 18px; row-gap: 8px; align-items: center; }
.cl-when .gem { grid-row: 1 / span 2; align-self: start; margin-top: 6px; box-shadow: 0 0 0 4px var(--canvas); }
.cl-entry.latest .cl-when .gem { width: 10px; height: 10px; margin: 5px 0 0 -1px; box-shadow: 0 0 0 4px var(--canvas), 0 0 14px oklch(0.70 0.16 268 / .6); }
.cl-ver { font: 600 15px/1 var(--f-tc); color: var(--text-1); display: inline-flex; align-items: center; gap: 10px; }
.cl-entry.latest .cl-ver::after { content: "Latest"; font: 500 10.5px/1 var(--f-tc); letter-spacing: .06em; text-transform: uppercase; color: var(--ion); background: var(--ion-wash); padding: 4px 6px; border-radius: 5px; }
.cl-when time { grid-column: 2; font-size: 13.5px; color: var(--text-3); }

.cl-body { max-width: 700px; display: grid; gap: 26px; align-content: start; }
.cl-body h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.04; }
.cl-prose { display: grid; gap: 16px; color: var(--text-2); font-size: 17px; line-height: 1.65; text-wrap: pretty; }
.cl-prose strong { color: var(--text-1); font-weight: 600; }
.cl-prose h3 { font: 700 21px/1.2 var(--f-brand); font-stretch: 112%; letter-spacing: -.01em; color: var(--text-1); margin-top: 18px; }
.cl-prose ul, .cl-more-body ul { display: grid; gap: 10px; }
.cl-prose li, .cl-more-body li { position: relative; padding-left: 20px; }
.cl-prose li::before, .cl-more-body li::before { content: ""; position: absolute; left: 3px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--steel-6); }
.cl-prose code, .cl-more-body code { font: .88em var(--f-tc); background: var(--raised); padding: 1px 5px; border-radius: 4px; }
.cl-prose a, .cl-more-body a { color: var(--text-1); text-decoration: underline; text-decoration-color: var(--steel-6); text-underline-offset: 3px; }

/* Improvements and fixes: rows that open, as on Linear's changelog */
.cl-mores { border-top: 1px solid var(--line); margin-top: 6px; }
.cl-more { border-bottom: 1px solid var(--line); }
.cl-more summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 17px 2px; font-size: 16px; font-weight: 500; color: var(--text-1); }
.cl-more summary::-webkit-details-marker { display: none; }
.cl-more summary .n { font: 500 11px/1 var(--f-tc); color: var(--text-3); padding: 4px 6px; border-radius: 5px; background: var(--raised); }
.cl-more summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(-45deg); transition: transform .25s var(--e-out); }
.cl-more[open] summary::after { transform: rotate(45deg); }
.cl-more summary:hover::after { border-color: var(--text-1); }
.cl-more-body { padding: 0 2px 24px; color: var(--text-2); font-size: 15.5px; line-height: 1.6; }
.cl-more-body ul { gap: 14px; }
.cl-more-body strong { color: var(--text-1); font-weight: 600; }
.cl-gh { justify-self: start; font-size: 13.5px; color: var(--text-3); transition: color .2s; }
.cl-gh:hover { color: var(--text-1); }

.cl-foot { margin: 0 auto; padding: 0 var(--gutter) 64px; }
.cl-foot a:hover { color: var(--text-1); }

/* The hero picture: drawn at 720 × 420 and scaled to the column */
.cl-hero { position: relative; aspect-ratio: 720 / 420; border-radius: 16px; overflow: hidden; background: var(--ground); box-shadow: 0 0 0 1px var(--line), 0 40px 100px -40px #000; isolation: isolate; margin: 2px 0 4px; }
.cl-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../img/grain.png"); opacity: .04; }
.cl-stage { position: absolute; left: 0; top: 0; width: 720px; height: 420px; transform-origin: 0 0; transform: scale(var(--k, 1)); font-size: 13px; color: var(--text-1); }
.cl-stage .k { font: 500 10px/1.2 var(--f-tc); letter-spacing: .08em; text-transform: uppercase; color: var(--text-4); }

/* 0.3.5: the speed and quality slider */
.h-speed { position: absolute; inset: 0; display: grid; place-items: center; }
.h-speed .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; filter: blur(2px); transform: scale(1.05); }
.h-speed .pop { position: relative; width: 360px; padding: 18px 20px 20px; border-radius: 16px; background: oklch(0.2 0.005 265 / .88); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 0 0 1px oklch(1 0 0 / .14), 0 30px 70px -20px #000; display: grid; gap: 16px; }
.pop-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pop-head b { font-size: 14px; font-weight: 600; }
.pop-head span { margin-left: auto; font-size: 12px; color: var(--text-3); }
.pop-k { font-size: 12.5px; color: var(--text-2); font-weight: 500; }
.stops { display: grid; gap: 9px; }
.stops .track { position: relative; height: 18px; }
.stops .track::before { content: ""; position: absolute; left: 8px; right: 8px; top: 7px; height: 4px; border-radius: 2px; background: var(--hover); }
.stops .fill { position: absolute; left: 8px; top: 7px; height: 4px; border-radius: 2px; background: var(--steel-8); width: 50%; animation: fill 9s var(--e-inout) infinite; }
.stops .dot { position: absolute; top: 6px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--steel-8); }
.stops .d1 { left: 8px; } .stops .d2 { left: 50%; } .stops .d3 { left: calc(100% - 8px); background: var(--line-2); animation: d3 9s steps(1) infinite; }
.stops .knob { position: absolute; top: 1px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--steel-9); box-shadow: 0 1px 3px #000; left: 50%; animation: knob 9s var(--e-inout) infinite; }
.stops .names { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-3); }
.stops .names span { animation: name 9s steps(1) infinite; }
.stops .n2 { animation-name: n2 !important; } .stops .n3 { animation-name: n3 !important; } .stops .n1 { animation-name: n1 !important; }
@keyframes knob { 0%, 30% { left: 50%; } 36%, 63% { left: calc(100% - 8px); } 69%, 94% { left: 8px; } 100% { left: 50%; } }
@keyframes fill { 0%, 30% { width: calc(50% - 8px); } 36%, 63% { width: calc(100% - 16px); } 69%, 94% { width: 0; } 100% { width: calc(50% - 8px); } }
@keyframes d3 { 0% { background: var(--line-2); } 34% { background: var(--steel-8); } 66% { background: var(--line-2); } }
@keyframes n1 { 0% { color: var(--text-3); font-weight: 400; } 67% { color: var(--text-1); font-weight: 500; } 97% { color: var(--text-3); font-weight: 400; } }
@keyframes n2 { 0% { color: var(--text-1); font-weight: 500; } 34% { color: var(--text-3); font-weight: 400; } 97% { color: var(--text-1); font-weight: 500; } }
@keyframes n3 { 0% { color: var(--text-3); font-weight: 400; } 34% { color: var(--text-1); font-weight: 500; } 67% { color: var(--text-3); font-weight: 400; } }
.pop-note { font-size: 12.5px; line-height: 1.5; color: var(--text-3); }

/* 0.3.4: the folder an editing app opens */
.h-export { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 28px; padding: 0 44px; background: radial-gradient(80% 90% at 30% 40%, oklch(0.24 0.02 265 / .6), transparent 70%); }
.finder { border-radius: 12px; background: var(--panel); box-shadow: 0 0 0 1px oklch(1 0 0 / .12), 0 30px 70px -20px #000; overflow: hidden; }
.f-bar { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--raised); }
.f-bar .lights { display: flex; gap: 6px; } .f-bar .lights i { width: 10px; height: 10px; border-radius: 50%; background: var(--hover); }
.f-bar b { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.f-rows { padding: 6px 0 8px; }
.f-rows li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 34px; padding: 0 16px; font-size: 13px; }
.f-rows li:nth-child(odd) { background: oklch(1 0 0 / .022); }
.f-rows li.sub { padding-left: 42px; color: var(--text-2); }
.f-rows li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-rows em { font-style: normal; font-size: 11.5px; color: var(--text-4); }
.ic { width: 16px; height: 16px; display: block; border-radius: 3px; position: relative; }
.ic.doc { background: var(--steel-8); clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%); width: 13px; margin-left: 2px; }
.ic.dir { height: 12px; margin-top: 2px; background: oklch(0.68 0.1 245); }
.ic.dir::before { content: ""; position: absolute; left: 0; top: -3px; width: 7px; height: 4px; border-radius: 2px 2px 0 0; background: oklch(0.6 0.1 245); }
.ic.wav { background: oklch(0.70 0.16 268 / .8); width: 13px; margin-left: 2px; }
.ic.cube { background: linear-gradient(135deg, oklch(0.80 0.13 72), oklch(0.72 0.20 330) 55%, oklch(0.70 0.16 268)); }
.opens { display: grid; gap: 10px; }
.opens b { font: 600 15px/1.2 var(--f-ui); padding: 10px 14px; border-radius: 10px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }

/* 0.3.2: the four tools under the picture */
.h-point { position: absolute; inset: 0; display: grid; grid-template-columns: 420px 1fr; gap: 18px; padding: 28px; align-items: center; background: var(--canvas); }
.pt-left { display: grid; gap: 12px; align-content: start; }
.pt-pic { position: relative; aspect-ratio: 16 / 9; border-radius: 3px; overflow: hidden; background: #000; }
.pt-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pt-pic .box { position: absolute; left: 11%; top: 13%; width: 26%; height: 54%; border: 1.5px solid var(--amber); border-radius: 2px; box-shadow: 0 0 0 999px oklch(0 0 0 / .32); }
.pt-pic .box span { position: absolute; top: -1px; left: -1px; transform: translateY(-100%); background: var(--amber); color: var(--amber-ink); font: 600 10px/1 var(--f-tc); padding: 4px 6px; border-radius: 2px 2px 0 0; white-space: nowrap; }
.pt-pic .box i { position: absolute; width: 6px; height: 6px; background: var(--amber); border-radius: 1px; }
.pt-pic .box i:nth-of-type(1) { left: -3.5px; top: -3.5px; } .pt-pic .box i:nth-of-type(2) { right: -3.5px; top: -3.5px; } .pt-pic .box i:nth-of-type(3) { left: -3.5px; bottom: -3.5px; } .pt-pic .box i:nth-of-type(4) { right: -3.5px; bottom: -3.5px; }
.tools { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); width: max-content; }
.tools span { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; color: var(--text-3); }
.tools svg { width: 14px; height: 14px; }
.tools .on { color: var(--amber); background: var(--amber-wash); }
.pt-sheet { border-radius: 12px; background: var(--ground); box-shadow: 0 0 0 1px var(--line); padding: 14px 0 6px; align-self: start; }
.pt-h { font: 700 14px/1 var(--f-brand); font-stretch: 112%; padding: 0 16px 12px; border-bottom: 1px solid var(--line); }
.pt-row { display: grid; grid-template-columns: 14px 1fr 12px; gap: 6px 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.pt-row:last-child { border-bottom: 0; }
.pt-row b { font: 600 12.5px/1.45 var(--f-tc); color: var(--amber); grid-row: 1 / span 2; }
.pt-row .at { font: 500 10.5px/1 var(--f-tc); color: var(--amber); }
.pt-row p { grid-column: 2; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.pt-row .x { grid-column: 3; grid-row: 1; font-style: normal; font-size: 10px; color: var(--text-4); }
.pt-row.on { background: oklch(0.82 0.13 72 / .06); box-shadow: inset 2px 0 0 var(--amber); }
.pt-row.on p { color: var(--text-1); }
.pt-row .caret { display: inline-block; width: 1.5px; height: 14px; margin-left: 1px; vertical-align: -2px; background: var(--amber); animation: blink 1s steps(1) infinite; }

/* 0.3.1: a Breakdown shot, in plain words */
.h-shot { position: absolute; inset: 0; display: grid; place-items: center; padding: 30px; background: radial-gradient(70% 80% at 25% 30%, oklch(0.22 0.02 250 / .55), transparent 70%); }
.shot { display: grid; grid-template-columns: 300px 1fr; gap: 22px; padding: 18px; border-radius: 14px; background: var(--ground); box-shadow: 0 0 0 1px var(--line), 0 30px 70px -20px #000; width: 100%; }
.shot-board { border-radius: 6px; overflow: hidden; background: oklch(0.13 0.003 265); box-shadow: 0 0 0 1px var(--line); align-self: start; }
.shot-board svg { width: 100%; height: auto; }
.shot-board figcaption { display: flex; justify-content: space-between; gap: 8px; padding: 9px 11px; font: 500 10px/1.3 var(--f-tc); letter-spacing: .06em; text-transform: uppercase; color: var(--text-4); border-top: 1px solid var(--line); }
.shot-board figcaption b { font-weight: 500; color: var(--text-2); }
.shot-text { display: grid; gap: 14px; align-content: start; }
.shot-text .row { display: grid; gap: 5px; }
.shot-text p { font-size: 14px; line-height: 1.45; color: var(--text-1); }
.shot-text .t { font: 500 11.5px/1 var(--f-tc); color: var(--text-3); margin-left: 4px; }

/* 0.3.0: the first release, the lit D */
.h-first { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 18px; background: radial-gradient(60% 70% at 50% 42%, oklch(0.2 0.01 265), var(--canvas) 70%); }
.h-first .mark { width: 230px; }
.first-tags { display: flex; gap: 6px; }
.first-tags .chip { height: 24px; padding: 0 10px; font-size: 11px; }

@media (max-width: 860px) {
  .cl-list::before { display: none; }
  .cl-entry { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .cl-when { position: static; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
  .cl-when .gem { margin: 0; box-shadow: none; }
  .cl-entry.latest .cl-when .gem { margin: 0; box-shadow: 0 0 12px oklch(0.70 0.16 268 / .6); }
  .cl-hero { border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .stops .fill, .stops .knob, .stops .names span, .stops .d3 { animation: none !important; }
}