/* ══ tokens ═══════════════════════════════════════════════ */
:root{
  --ground:#241a14;
  --ground-2:#2f231a;
  --cream:#f6efe4;
  --cream-dim:#bfae9c;
  --mint:#3ff0a8;
  --sky:#4fc3ff;
  --pink:#ff5ca8;
  --lemon:#f5e663;

  --face:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --pad:clamp(18px,4vw,64px);
  --rail:18px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ground);
  color:var(--cream);
  font:400 clamp(15.5px,1.05vw,17.5px)/1.6 var(--face);
  overflow-x:hidden;
}
h1,h2,h3,p,dl,dt,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--mint);color:var(--ground)}
:focus-visible{outline:2px solid var(--mint);outline-offset:4px}

/* printed map stock */
.plate{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,rgba(246,239,228,.045) 0 1px,transparent 1px 58px),
    repeating-linear-gradient(90deg,rgba(246,239,228,.045) 0 1px,transparent 1px 58px),
    radial-gradient(120% 90% at 18% 0%,rgba(255,92,168,.12),transparent 62%),
    radial-gradient(110% 80% at 92% 100%,rgba(79,195,255,.12),transparent 60%);
}

.map{
  position:relative;z-index:1;
  max-width:1180px;
  margin:0 auto;
  padding:0 var(--pad);
}

/* ══ origin ═══════════════════════════════════════════════ */
.origin{padding-block:clamp(66px,11vh,124px) clamp(40px,6vh,72px)}
.service{
  display:flex;align-items:center;gap:11px;
  font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--cream-dim);
  margin-bottom:clamp(26px,4vh,44px);
}
.service::before{
  content:"";width:26px;height:4px;border-radius:2px;
  background:var(--lemon);
}

/* the route arriving, and the sign springing off it */
.terminus{position:relative;padding-left:clamp(44px,7vw,96px)}
.terminus__track{
  position:absolute;
  left:0;top:50%;
  height:6px;width:clamp(30px,6vw,80px);
  border-radius:3px;
  background:linear-gradient(90deg,var(--mint),var(--sky));
  transform:scaleX(0);transform-origin:left;
  animation:arrive .7s .1s cubic-bezier(.2,.8,.2,1) forwards;
}
.terminus__node{
  position:absolute;
  left:clamp(24px,5vw,68px);top:50%;
  width:clamp(20px,2.4vw,30px);aspect-ratio:1;
  margin-top:calc(clamp(20px,2.4vw,30px) / -2);
  border-radius:50%;
  border:6px solid var(--sky);
  background:var(--ground);
  opacity:0;transform:scale(.3);
  animation:pop .45s .74s cubic-bezier(.2,1.5,.4,1) forwards;
}
@keyframes arrive{to{transform:scaleX(1)}}
@keyframes pop{to{opacity:1;transform:scale(1)}}

.sign{
  font-size:clamp(2.3rem,8.6vw,6.4rem);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.035em;
  clip-path:inset(0 100% 0 0);
  animation:slide 1s .95s cubic-bezier(.16,.9,.2,1) forwards;
}
@keyframes slide{to{clip-path:inset(0 -6% 0 0)}}

.brief{
  max-width:52ch;
  margin-top:clamp(26px,4vh,42px);
  font-size:clamp(1rem,1.4vw,1.2rem);
  color:#ded0bf;
}
.key{
  display:flex;flex-wrap:wrap;gap:clamp(12px,2.4vw,32px);
  margin-top:clamp(22px,3.4vh,36px);
  font-size:.82rem;
}
.key li{display:inline-flex;align-items:center;gap:10px;color:#e8dccd}
.key i{display:block;width:26px;height:6px;border-radius:3px;background:var(--hue)}

/* ══ legs ═════════════════════════════════════════════════ */
.leg{position:relative;padding:0}
.leg__name{
  margin:0 0 14px calc(var(--rail) + 44px);
  padding-top:22px;
  font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--hue);
}

.stops{position:relative;padding-left:calc(var(--rail) + 44px)}
/* the rail, drawn as the leg is travelled */
.stops::before{
  content:"";
  position:absolute;
  left:var(--rail);top:-54px;bottom:0;
  width:8px;border-radius:4px;
  background:var(--hue);
  transform:scaleY(var(--draw,1));
  transform-origin:top;
}
/* the service running down the line */
.stops::after{
  content:"";
  position:absolute;
  left:calc(var(--rail) - 3px);top:0;
  width:14px;height:14px;border-radius:50%;
  background:var(--cream);
  box-shadow:0 0 16px 4px color-mix(in srgb,var(--hue) 70%,transparent);
  animation:run 7s linear infinite;
}
@keyframes run{0%{top:-2%;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}

.stop{
  position:relative;
  padding:clamp(14px,2vh,22px) 0 clamp(14px,2vh,22px) 0;
}
.stop + .stop{border-top:1px solid rgba(246,239,228,.12)}
.stop__node{
  position:absolute;
  left:-51px;
  top:clamp(18px,2.4vh,28px);
  width:22px;height:22px;border-radius:50%;
  background:var(--ground);
  border:6px solid var(--hue);
}
.stop--junction .stop__node{
  left:-54px;
  width:28px;height:28px;
  border-width:5px;
  border-color:var(--cream);
  box-shadow:0 0 0 5px var(--hue);
}

.stop h2{
  font-size:clamp(1.5rem,3.1vw,2.3rem);
  font-weight:700;letter-spacing:-.03em;line-height:1.1;
  max-width:20ch;
  margin-bottom:.5em;
}
.stop h3{
  font-size:clamp(1.04rem,1.5vw,1.24rem);
  font-weight:600;letter-spacing:-.012em;
  margin-bottom:7px;
}
.stop p{color:var(--cream-dim);font-size:.96rem;max-width:58ch}
.stop .stress{
  margin-top:.7em;
  color:var(--cream);
  border-left:3px solid var(--hue);
  padding-left:14px;
}

/* ── the diagonal between legs ── */
.jog{height:88px;position:relative}
.jog svg{position:absolute;left:0;top:0;overflow:visible}
.jog path{
  fill:none;
  stroke:var(--cream);
  stroke-width:8;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.9;
}
.leg--1 + .jog path{stroke:url(#x1)}
.jog:nth-of-type(1) path{stroke:var(--mint)}
.jog:nth-of-type(2) path{stroke:var(--sky)}
.jog:nth-of-type(3) path{stroke:var(--pink)}

/* ══ terminus block ═══════════════════════════════════════ */
.stops--end{position:relative;padding-left:calc(var(--rail) + 44px);padding-top:8px}
.stops--end::before{
  content:"";
  position:absolute;
  left:var(--rail);top:-54px;
  width:8px;height:66px;border-radius:4px;
  background:var(--hue);
}
.stops--end::after{content:none}
.stop__cap{
  position:absolute;
  left:calc(var(--rail) - 9px);top:10px;
  width:26px;height:10px;border-radius:5px;
  background:var(--hue);
  box-shadow:0 0 0 0 transparent;
}
.endblock{padding-bottom:clamp(50px,8vh,96px)}
.entity{
  font-size:clamp(1.4rem,3.2vw,2.4rem);
  font-weight:700;letter-spacing:-.032em;
  color:var(--lemon);
  margin-bottom:clamp(20px,3.2vh,34px);
}
.board{display:grid;border-top:1px solid rgba(246,239,228,.2);max-width:1020px}
.board > div{
  display:grid;gap:3px clamp(18px,3vw,46px);
  padding-block:clamp(12px,1.9vh,18px);
  border-bottom:1px solid rgba(246,239,228,.2);
}
@media (min-width:720px){.board > div{grid-template-columns:116px 1fr;align-items:baseline}}
.board dt{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream-dim);
}
.board dd{
  margin:0;font-size:clamp(.98rem,1.2vw,1.1rem);font-weight:500;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
.small{margin-top:clamp(22px,3.4vh,34px);font-size:.77rem;color:#9b8b7b}

/* ══ narrow: the line straightens out ═════════════════════ */
@media (max-width:760px){
  .leg{--rail:14px!important}
  .leg__name{margin-left:calc(14px + 36px)}
  .stops,.stops--end{padding-left:calc(14px + 36px)}
  .stop__node{left:calc(14px - 36px - 7px)}
  .jog{height:44px}
  .jog svg{display:none}
  .jog::before{
    content:"";
    position:absolute;left:14px;top:-2px;
    width:8px;height:48px;border-radius:4px;
    background:var(--cream);
  }
  .jog:nth-of-type(1)::before{background:var(--mint)}
  .jog:nth-of-type(2)::before{background:var(--sky)}
  .jog:nth-of-type(3)::before{background:var(--pink)}
}

/* ══ reveal + motion prefs ════════════════════════════════ */
.in{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.75,.2,1)}
.in.is-on{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .terminus__track{transform:scaleX(1);animation:none}
  .terminus__node{opacity:1;transform:scale(1);animation:none}
  .sign{clip-path:none;animation:none}
  .stops::after{display:none}
  .stops::before{transform:scaleY(1)!important}
  .in{opacity:1;transform:none;transition:none}
}