/* columns (riemer.fyi style): square boxes with thick black lines, a header strip, "→" items.
   Sizes inside a box are in cqi (% of the box's width), so a box looks the same in any window size. */
.co-grid { flex: 1; align-self: center; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: 1.8vw; }
.co-col { display: flex; flex-direction: column; min-width: 0; container-type: inline-size; border: var(--rule) solid var(--ink); }
.co-head { display: flex; align-items: center; gap: 3.5cqi; padding: 4cqi 6cqi; border-bottom: var(--rule) solid var(--ink); }
.co-num { flex: none; background: var(--ink); color: var(--bg); font-size: 6.6cqi; font-weight: 700; line-height: 1; padding: 1.6cqi 2.6cqi; }
.co-title { font-size: 6.4cqi; font-weight: 700; text-transform: uppercase; line-height: 1.15; }
.co-items { display: grid; gap: 2.5cqi; padding: 5cqi 3.5cqi 7cqi; }
/* an item: arrow + text; wipes in from the left; the newest one is a black box */
.co-item { display: grid; grid-template-columns: auto 1fr; gap: 2.4cqi; font-size: 6.8cqi; font-weight: 700; line-height: 1.3;
           padding: 2.2cqi 2.5cqi; clip-path: inset(0 100% 0 0);
           transition: clip-path .45s cubic-bezier(.7,0,.2,1), background .3s ease, color .3s ease; }
.co-item.on { clip-path: inset(0 0 0 0); }
.co-item.now { background: var(--ink); color: var(--bg); }
.no-anim .co-item { transition: none; }