/* ============================================================
   Alexander Wegener — portfolio
   Direction: instrument panel. Borrowed from the subject's own
   world: HUD readouts, scope channel strips, Rerun timelines.
   ============================================================ */

:root{
  /* --- stage accents. Structural, not decorative.
         Used ONLY in the rail, section rules, and eyebrows. --- */
  --collect:  #17697B;
  --curate:   #33529E;
  --train:    #3D7A4B;
  --evaluate: #96690F;
  --nudge:    #A32E88;

  /* --- neutrals --- */
  --paper:  #F6F8F8;
  --panel:  #FFFFFF;
  --ink:    #14181A;
  --body:   #3D4548;
  --mute:   #788386;
  --faint:  #A6AFB1;
  --rule:   #DCE2E3;
  --rule-2: #EBEFF0;

  /* --- type --- */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --text:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --data:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- metrics --- */
  --rail: 68px;
  --col: 1120px;
  --measure: 68ch;
}

*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:var(--text);
  font-size:16.5px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img,video,svg{ max-width:100%; height:auto; display:block }

a{ color:inherit }

/* ============================================================
   TELEMETRY RAIL — the signature element
   A scope channel strip. Shows which loop stage you're reading.
   ============================================================ */
/* Vertical text does not shrink, so once the column's content exceeds the
   viewport height the items overlap. Scroll the whole rail instead. */
.rail{
  position:fixed; top:0; left:0; bottom:0; width:var(--rail);
  background:var(--panel);
  border-right:1px solid var(--rule);
  display:flex; flex-direction:column; align-items:center;
  padding:22px 0; z-index:50;
  overflow-y:auto; scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none }
.rail__mark, .rail__more{ flex:none }
.rail__mark{
  font-family:var(--data); font-size:10px; font-weight:700;
  letter-spacing:.18em; color:var(--ink); text-decoration:none;
  writing-mode:vertical-rl; text-orientation:mixed;
}
.rail__stages{
  flex:1 0 auto; display:flex; flex-direction:column; justify-content:center;
  gap:22px; padding:28px 0;
}
.rail__stage{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  text-decoration:none; color:var(--faint);
  font-family:var(--data); font-size:9.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  writing-mode:vertical-rl; text-orientation:mixed;
  transition:color .25s ease;
}
.rail__dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--rule); flex:none;
  transition:background .25s ease, box-shadow .25s ease;
}
.rail__stage:hover{ color:var(--body) }
.rail__stage.is-active{ color:var(--ink); font-weight:700 }
.rail__stage.is-active .rail__dot{ background:var(--stage) }
/* Control is the substrate the loop runs on, not a loop stage — neutral dot. */
.rail__stage[data-stage="control"]  { --stage:var(--ink) }
.rail__stage[data-stage="collect"]  { --stage:var(--collect) }
.rail__stage[data-stage="curate"]   { --stage:var(--curate) }
.rail__stage[data-stage="train"]    { --stage:var(--train) }
.rail__stage[data-stage="evaluate"] { --stage:var(--evaluate) }
.rail__stage[data-stage="nudging"]  { --stage:var(--nudge) }
.rail__foot{
  font-family:var(--data); font-size:9px; letter-spacing:.14em;
  color:var(--faint); writing-mode:vertical-rl;
}
.rail__more{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  padding-top:20px; margin-top:4px;
  border-top:1px solid var(--rule);
}
.rail__sub{
  text-decoration:none; color:var(--mute);
  font-family:var(--data); font-size:9.5px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  writing-mode:vertical-rl; text-orientation:mixed;
  transition:color .25s ease;
}
.rail__sub:hover{ color:var(--ink) }
.rail__sub.is-current{ color:var(--ink); font-weight:700 }
/* label that says the stage dots belong to the flagship, not the whole site */
.rail__label{
  font-family:var(--data); font-size:8px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--faint);
  writing-mode:vertical-rl; text-orientation:mixed;
  padding-bottom:14px;
}

/* ============================================================
   SHELL
   ============================================================ */
.shell{ margin-left:var(--rail) }
.wrap{ max-width:var(--col); margin:0 auto; padding:0 44px }
.measure{ max-width:var(--measure) }

section{ padding:104px 0; border-top:1px solid var(--rule) }
section:first-of-type{ border-top:0 }

/* ============================================================
   TYPE
   ============================================================ */
h1,h2,h3,h4{ font-family:var(--display); color:var(--ink); margin:0 }
h1{ font-size:clamp(38px,6vw,68px); line-height:1.02; font-weight:700; letter-spacing:-.035em }
h2{ font-size:clamp(27px,3.6vw,40px); line-height:1.1; font-weight:650; letter-spacing:-.024em }
h3{ font-size:20px; line-height:1.28; font-weight:650; letter-spacing:-.012em }
h4{ font-size:15.5px; line-height:1.35; font-weight:650; letter-spacing:-.005em }

p{ margin:0 0 1.05em; text-wrap:pretty }
p:last-child{ margin-bottom:0 }
h1,h2,h3{ text-wrap:balance }

.lede{ font-size:clamp(17px,1.9vw,20.5px); line-height:1.5; color:var(--body) }
.small{ font-size:14.5px; line-height:1.58 }
.tiny{ font-size:13px; line-height:1.55; color:var(--mute) }

strong{ font-weight:650; color:var(--ink) }

/* eyebrow — carries the stage colour */
.eyebrow{
  font-family:var(--data); font-size:10.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--mute); margin:0 0 14px; display:block;
}
.stage-rule{ height:3px; width:56px; background:var(--mute); margin-bottom:20px }

[data-stage="control"]  .eyebrow{ color:var(--ink) }
[data-stage="control"]  .stage-rule{ background:var(--ink) }
[data-stage="collect"]  .eyebrow{ color:var(--collect) }
[data-stage="collect"]  .stage-rule{ background:var(--collect) }
[data-stage="curate"]   .eyebrow{ color:var(--curate) }
[data-stage="curate"]   .stage-rule{ background:var(--curate) }
[data-stage="train"]    .eyebrow{ color:var(--train) }
[data-stage="train"]    .stage-rule{ background:var(--train) }
[data-stage="evaluate"] .eyebrow{ color:var(--evaluate) }
[data-stage="evaluate"] .stage-rule{ background:var(--evaluate) }
[data-stage="nudging"]  .eyebrow{ color:var(--nudge) }
[data-stage="nudging"]  .stage-rule{ background:var(--nudge) }

.sechead{ margin-bottom:36px }
.sechead h2{ margin-bottom:14px }

/* ============================================================
   HERO — identity first. A reader must know whose site this is
   and what it contains before they meet the flagship project.
   ============================================================ */
.hero{ padding-top:104px; padding-bottom:78px }

.hero__eyebrow{
  font-family:var(--data); font-size:10.5px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--mute);
  display:block; margin-bottom:26px;
}
.hero h1{
  font-size:clamp(44px,8.2vw,104px); line-height:.94;
  letter-spacing:-.045em; margin-bottom:26px; max-width:none;
}
/* Broken manually at the em dash — the sentence hinges there, and left to
   itself it wrapped onto "— at" and "when". `balance` is the fallback for
   narrow screens, where .brk is suppressed. */
.hero__role{
  font-family:var(--display); color:var(--ink);
  font-size:clamp(20px,2.5vw,28px); line-height:1.24;
  font-weight:600; letter-spacing:-.02em;
  max-width:none; margin-bottom:26px;
  text-wrap:balance;
}
@media (max-width:760px){
  .hero__role .brk{ display:none }
  .hero__role{ max-width:32ch }
}
.hero__lede{ max-width:62ch; margin-bottom:28px }
.hero__affil{
  font-family:var(--data); font-size:11.5px; line-height:1.9;
  letter-spacing:.08em; color:var(--mute); margin-bottom:40px;
}
.hero__affil b{
  color:var(--ink); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; font-size:10px;
  margin-right:10px;
}

/* contents row — the explicit signal that this is a portfolio */
.contents{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid var(--rule); margin-top:40px;
}
.contents a{
  display:block; text-decoration:none; padding:18px 22px 18px 0;
  border-right:1px solid var(--rule-2);
  transition:background .2s ease;
}
.contents a:last-child{ border-right:0 }
.contents a:hover .contents__t{ border-bottom-color:var(--ink) }
.contents__n{
  display:block; font-family:var(--data); font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
  margin-bottom:9px;
}
.contents__t{
  display:inline; font-family:var(--display); font-size:15px;
  font-weight:650; color:var(--ink); letter-spacing:-.01em;
  border-bottom:1px solid var(--rule); padding-bottom:2px;
  transition:border-color .2s ease;
}
.contents__d{
  display:block; font-size:12.5px; line-height:1.45;
  color:var(--mute); margin-top:9px;
}
@media (max-width:900px){
  .contents{ grid-template-columns:1fr 1fr }
  .contents a{ padding-right:18px; border-bottom:1px solid var(--rule-2) }
  .contents a:nth-child(2n){ border-right:0 }
}
@media (max-width:560px){
  .contents{ grid-template-columns:1fr }
  .contents a{ border-right:0 }
}

/* ============================================================
   FLAGSHIP — the lead exhibit, framed as one of several projects
   ============================================================ */
.flagship .sechead{ margin-bottom:30px }
.flagship .lede{ max-width:64ch; margin-top:20px }
.flagship .specs{ margin-top:34px }
/* Headline is manually broken — "Bimanual teleoperation" must not split. */
.flagship__h{
  max-width:none; text-wrap:nowrap;
  font-size:clamp(26px,4.4vw,48px); letter-spacing:-.028em; line-height:1.06;
}
.flagship__h .arrow{
  display:inline-block; font-family:var(--data); font-weight:400;
  font-size:.66em; color:var(--ink); vertical-align:.08em;
  margin:0 .14em; letter-spacing:0;
}
@media (max-width:620px){
  .flagship__h{ text-wrap:balance; font-size:clamp(24px,7vw,34px) }
}

/* status line — reads as a system readout, because it is one */
.status{
  display:flex; flex-wrap:wrap; gap:8px 26px;
  font-family:var(--data); font-size:11.5px; letter-spacing:.04em;
  color:var(--mute); margin-top:22px;
  padding-top:18px; border-top:1px solid var(--rule);
}
.status span{ display:flex; align-items:center; gap:8px }
.status i{ width:6px; height:6px; border-radius:50%; background:var(--collect); flex:none; font-style:normal }
.status i.wip{ background:var(--evaluate) }

/* ============================================================
   SPEC STRIP — the fifteen-second read
   ============================================================ */
.specs{
  display:grid; grid-template-columns:repeat(5,1fr);
  border-top:2px solid var(--ink); border-bottom:1px solid var(--rule);
  margin:22px 0 0;
}
.specs--4{ grid-template-columns:repeat(4,1fr) }
.specs--3{ grid-template-columns:repeat(3,1fr) }
/* scope strip: figures that describe the body of work, set larger */
.specs--scope > div{ padding:22px 22px 20px }
.specs--scope b{ font-size:26px; letter-spacing:-.03em }
@media (max-width:1080px){ .specs--scope b{ font-size:22px } }
.specs > div{ padding:17px 20px 16px; border-right:1px solid var(--rule-2) }
.specs > div:last-child{ border-right:0 }
.specs b{
  display:block; font-family:var(--data); font-size:18px; font-weight:700;
  color:var(--ink); letter-spacing:-.02em; line-height:1.2;
}
.specs span{
  display:block; font-family:var(--data); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--mute); margin-top:7px;
}

/* ============================================================
   MEDIA
   ============================================================ */
.media{ margin:0 0 14px }
figure{ margin:0 }
figcaption{
  font-size:13.5px; line-height:1.5; color:var(--mute); margin-top:12px;
  max-width:78ch;
  /* stops single-word last lines like "not nominal." hanging alone */
  text-wrap:pretty;
}
figcaption .sim{
  font-family:var(--data); font-size:10px; font-weight:700; letter-spacing:.14em;
  color:#8A3A3A; border:1px solid #E0C4C4; padding:2px 6px; border-radius:2px;
  margin-right:8px; vertical-align:1px;
}

/* placeholder slot — replace with <video> */
.slot{
  background:var(--panel); border:1px dashed var(--rule);
  aspect-ratio:16/9; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:9px; text-align:center;
  padding:26px; border-radius:2px;
}
.slot--flat{ aspect-ratio:auto; min-height:190px }
.slot b{
  font-family:var(--data); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--mute);
}
.slot span{ font-size:13px; color:var(--faint); max-width:44ch }

video{ border-radius:2px; background:#000 }

/* ============================================================
   GRIDS
   ============================================================ */
.g2{ display:grid; grid-template-columns:1fr 1fr; gap:26px }
.g3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.g-2-1{ display:grid; grid-template-columns:1.9fr 1fr; gap:34px }
.g-1-1{ display:grid; grid-template-columns:1fr 1fr; gap:40px }
.stack > * + *{ margin-top:16px }
.mt-l{ margin-top:56px } .mt-m{ margin-top:34px } .mt-s{ margin-top:20px }

/* ============================================================
   PANEL — white card, used sparingly
   ============================================================ */
.panel{
  background:var(--panel); border:1px solid var(--rule);
  padding:26px 28px; border-radius:2px;
}
.panel h4{ margin-bottom:10px }
.panel--accent{ border-left:3px solid var(--mute) }
[data-stage="nudging"] .panel--accent{ border-left-color:var(--nudge) }
[data-stage="collect"] .panel--accent{ border-left-color:var(--collect) }

/* claim block — the single largest statement after the hero */
.claim{
  font-family:var(--display); font-size:clamp(21px,2.7vw,30px);
  line-height:1.24; font-weight:600; letter-spacing:-.02em;
  color:var(--ink); max-width:26ch;
}

/* two-stage research framing */
.finding{ border-top:1px solid var(--rule); padding-top:22px }
.finding__tag{
  font-family:var(--data); font-size:10px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; margin-bottom:12px; display:block;
}
.finding--done .finding__tag{ color:var(--nudge) }
.finding--open .finding__tag{ color:var(--mute) }
.finding--train .finding__tag{ color:var(--train) }
/* the two models are separated top-to-bottom, not side by side, so a
   result can never be read against the wrong model */
.finding--train{ border-top-width:2px; border-top-color:var(--ink); padding-top:24px }

/* ============================================================
   DATA LISTS & TABLES
   ============================================================ */
.deflist{ margin:0; font-size:14.5px }
/* Fixed term column — `auto` sized every row independently, which made the
   definitions start at a different x on every line and read as crooked. */
.deflist div{
  display:grid; grid-template-columns:186px 1fr; gap:18px;
  padding:11px 0; border-bottom:1px solid var(--rule-2);
}
.deflist--narrow div{ grid-template-columns:132px 1fr }
.deflist div:last-child{ border-bottom:0 }
.deflist dt{
  font-family:var(--data); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mute); padding-top:3px;
}
.deflist dd{ margin:0; color:var(--body) }

table{ width:100%; border-collapse:collapse; font-size:14.5px }
th,td{ text-align:left; padding:11px 14px 11px 0; border-bottom:1px solid var(--rule-2) }
th{
  font-family:var(--data); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--mute); font-weight:500;
  border-bottom:1px solid var(--rule);
}
td.num{ font-family:var(--data); font-variant-numeric:tabular-nums }
.tag{
  font-family:var(--data); font-size:9.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; padding:3px 7px; border-radius:2px;
  border:1px solid var(--rule); color:var(--mute); white-space:nowrap;
}
.tag--sim{ color:#8A3A3A; border-color:#E0C4C4 }
.tag--hw{ color:var(--collect); border-color:#BCD5DA }
.tag--pending{ color:var(--faint) }

/* state ladder — lifted from the quality controller */
.ladder{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:18px 0 14px }
.ladder b{
  font-family:var(--data); font-size:10.5px; font-weight:700; letter-spacing:.11em;
  padding:7px 11px; border:1px solid var(--rule); background:var(--panel);
  color:var(--body); border-radius:2px;
}
.ladder b.crit{ color:#8A3A3A; border-color:#E0C4C4 }
.ladder i{ color:var(--faint); font-style:normal; font-size:12px }

/* stacked variant: one state per row, parameters aligned in a column */
.ladder--rows{
  display:grid; grid-template-columns:max-content 1fr;
  gap:8px 16px; align-items:center; flex-wrap:nowrap;
}
.ladder--rows b{ text-align:center }
.ladder--rows i{
  font-family:var(--data); font-size:11.5px; letter-spacing:.02em;
  color:var(--mute);
}
@media (max-width:560px){
  .ladder--rows{ grid-template-columns:1fr; gap:4px 0 }
  .ladder--rows b{ justify-self:start }
  .ladder--rows i{ margin-bottom:8px }
}

/* ============================================================
   LINKS
   ============================================================ */
.link{
  display:inline-flex; align-items:baseline; gap:9px;
  font-family:var(--data); font-size:12.5px; letter-spacing:.05em;
  color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--rule); padding-bottom:3px;
  transition:border-color .2s ease;
}
.link:hover{ border-bottom-color:var(--ink) }
.link em{ font-style:normal; font-size:9.5px; letter-spacing:.14em; color:var(--faint) }

.linkrow{ display:flex; flex-wrap:wrap; gap:14px 32px; margin-top:26px }

/* exits — three-way handoff at the end of a section */
.exits{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
  margin-top:48px; padding-top:36px; border-top:1px solid var(--rule);
}
.exit{ display:flex; flex-direction:column; gap:9px }
.exit .link{ align-self:flex-start }
.exit p{ font-size:13.5px; color:var(--mute); margin:0 }
@media (max-width:900px){ .exits{ grid-template-columns:1fr } }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ border-top:1px solid var(--rule); padding:76px 0 96px }
.foot__links{ display:flex; flex-wrap:wrap; gap:14px 34px; margin-bottom:44px }
.foot__note{ max-width:64ch; font-size:14px; color:var(--mute) }
.foot__meta{
  font-family:var(--data); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint); margin-top:40px;
}

/* ============================================================
   MOTION — one device, applied once
   ============================================================ */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease }
.reveal.is-in{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none }
}

:focus-visible{ outline:2px solid var(--collect); outline-offset:3px }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .g-2-1,.g-1-1{ grid-template-columns:1fr; gap:28px }
  .specs{ grid-template-columns:repeat(3,1fr) }
  .specs > div:nth-child(3){ border-right:0 }
  .specs--4{ grid-template-columns:repeat(2,1fr) }
  .specs--4 > div:nth-child(2n){ border-right:0 }
  .specs--4 > div:nth-child(3){ border-right:1px solid var(--rule-2) }
  .specs--4 > div:nth-child(1),
  .specs--4 > div:nth-child(2){ border-bottom:1px solid var(--rule-2) }
}

@media (max-width:900px){
  :root{ --rail:0px }
  .rail{
    position:sticky; top:0; left:auto; bottom:auto; right:0;
    width:100%; height:auto; flex-direction:row; align-items:center;
    justify-content:flex-start; gap:0; padding:0 16px;
    border-right:0; border-bottom:1px solid var(--rule);
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  .rail__mark{ writing-mode:horizontal-tb; font-size:9.5px; margin-right:18px; flex:none }
  .rail__stages{ flex-direction:row; gap:18px; padding:12px 0; flex:none; overflow:visible }
  .rail__label{ display:none }
  .rail__stage{ writing-mode:horizontal-tb; flex-direction:row; gap:7px; font-size:9px }
  .rail__more{
    flex-direction:row; gap:16px; padding:0 0 0 18px; margin:0;
    border-top:0; border-left:1px solid var(--rule);
  }
  .rail__sub{ writing-mode:horizontal-tb; font-size:8.5px }
  .rail__foot{ display:none }
  .shell{ margin-left:0 }
  .wrap{ padding:0 22px }
  section{ padding:72px 0 }
  .hero{ padding-top:56px }
  .g2,.g3{ grid-template-columns:1fr; gap:22px }
  .specs{ grid-template-columns:repeat(2,1fr) }
  .specs > div{ border-right:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2) }
  .specs > div:nth-child(2n){ border-right:0 }
  .deflist div{ grid-template-columns:1fr; gap:4px }
}

@media (max-width:560px){
  .specs{ grid-template-columns:1fr }
  .specs > div{ border-right:0 }
  table{ font-size:13px }
  th,td{ padding:9px 8px 9px 0 }
}

/* ============================================================
   TIMELINE — a measurement track, not a résumé
   ============================================================ */
.track{
  list-style:none; margin:0; padding:0;
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  border-top:1px solid var(--ink);
}
.track__item{
  position:relative;
  padding:26px 20px 0 0;
  border-right:1px solid var(--rule-2);
}
.track__item:last-child{ border-right:0; padding-right:0 }

/* tick mark on the rule */
.track__item::before{
  content:""; position:absolute; top:-1px; left:0;
  width:1px; height:11px; background:var(--ink);
}

.track__item > *,
.track__item > a{ display:block; text-decoration:none; color:inherit }
.track__item > a > *{ display:block }
.track__item > a{ padding-bottom:4px }

.track__yr{
  font-family:var(--data); font-size:10.5px; letter-spacing:.11em;
  color:var(--mute); margin-bottom:9px;
}
.track__role{
  font-family:var(--display); font-size:14.5px; font-weight:650;
  line-height:1.24; color:var(--ink); letter-spacing:-.008em;
  margin-bottom:5px;
}
.track__note{
  font-size:12.5px; line-height:1.4; color:var(--mute);
}

/* the one clickable entry earns a visible affordance */
.track__item--wide > a .track__role{
  border-bottom:1px solid var(--rule);
  display:inline; padding-bottom:2px;
  transition:border-color .2s ease;
}
.track__item--wide > a:hover .track__role{ border-bottom-color:var(--ink) }

/* current position */
.track__item--now::before{ background:var(--collect); width:2px; height:15px }
.track__item--now .track__yr{ color:var(--collect) }

@media (max-width:900px){
  .track{ grid-auto-flow:row; grid-auto-columns:auto; border-top:0 }
  .track__item{
    border-right:0; border-top:1px solid var(--rule-2);
    padding:18px 0 18px 20px;
  }
  .track__item::before{ top:-1px; left:0; width:11px; height:1px }
  .track__item--now::before{ width:15px; height:2px }
}