/* The Ribbon: intro, earlier stations, sticky screen with station texts, roles */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.rb-hero .kicker{max-width:60ch}

.rb-intro .split{align-items:start}
.rb-text p+p{margin-top:18px}
.rb-text .prize{margin-top:26px}
.rb-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 28px}
.rb-links .minor{color:var(--text-dim);font-size:15px;text-underline-offset:.2em}
.rb-links .minor:hover{color:var(--text)}

.earlier{margin-top:56px;border-top:1px solid var(--line-2);padding-top:22px;display:grid;gap:12px;color:var(--text-dim);scroll-margin-top:96px}
.earlier p{display:flex;flex-wrap:wrap;gap:8px 32px}
.earlier .lbl{color:var(--text-dim)}
.earlier b{color:var(--text);font-weight:500;margin-right:6px}

/* ---------- project site band (Nachtrag 4, E2) ---------- */
.rb-site{background:var(--green);color:var(--ink);padding-block:clamp(56px,7vw,96px)}
.rb-site-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.rb-site-text{display:grid;gap:18px;justify-items:start}
.rb-site h2{font-size:clamp(34px,5vw,72px)}
.rb-site-text > p:not(.mono){max-width:var(--measure)}
.rb-site-img{margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--ink-2)}
.rb-site-img img{width:100%;height:100%;object-fit:cover}
.btn.on-green{background:var(--ink);color:var(--green);border-color:var(--ink)}
.rb-site :focus-visible{outline-color:var(--ink)}
@media (max-width:820px){.rb-site-in{grid-template-columns:1fr;gap:28px}}
.rb-more{margin:8px 0 72px;max-width:42ch}
.rb-more a,.rb-card-links a{color:var(--text);text-underline-offset:.2em}
.rb-card-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin:10px 0 0}

/* ---------- trail ---------- */
.trail{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);position:relative}
.trail .screen{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--ink-2)}
.trail .scr{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.trail .scr.on{opacity:1}
.trail .screen::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,13,11,0) 70%,rgba(13,13,11,.55) 100%);pointer-events:none}
.trail .screen .vplay{top:auto;bottom:24px;right:24px}
.rail-line{position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--line)}
.rail-line i{display:block;width:100%;height:0;background:linear-gradient(var(--red),var(--yellow),var(--blue),var(--green))}
.stops{position:relative;padding-left:40px;padding-right:var(--gut-r)}
.stop{min-height:92vh;display:flex;flex-direction:column;justify-content:center;gap:14px;max-width:42ch;scroll-margin-top:0}
.stop h3{font-size:clamp(28px,3vw,46px);font-weight:800;font-stretch:112%;line-height:1}
.stop .mono{color:var(--green)}
/* Inactive stations swap colours instead of fading, so every line stays
   above 4.5:1 (Nachtrag 1, A3). Without JS all stations look active. */
.trail.js .stop,.trail.js .stop .mono{color:var(--text-dim);transition:color .4s ease}
.trail.js .stop.on{color:var(--text)}
.trail.js .stop.on .mono{color:var(--green)}
.stop .thumb{display:none}
.stop:last-child{min-height:100vh}

@media (max-width:900px){
  .trail{grid-template-columns:1fr}
  .trail .screen{display:none}
  .stops{padding-left:calc(var(--gut) + 22px)}
  .stop,.stop:last-child{min-height:0;padding-block:40px;max-width:none;scroll-margin-top:72px}
  .trail.js .stop,.trail.js .stop .mono{color:inherit}
  .trail.js .stop{color:var(--text)}
  .trail.js .stop .mono{color:var(--green)}
  .stop > *{max-width:42ch}
  .stop .thumb{display:block;width:100%;max-width:none;aspect-ratio:16/9;object-fit:cover;margin-bottom:6px;background:var(--ink-2)}
}

/* ---------- route map (Nachtrag 1, B1) ---------- */
.route-map{margin:0}
.route-map svg{display:block;width:100%;height:auto;overflow:hidden}
.route-map.desk{position:absolute;left:24px;bottom:24px;z-index:3;width:230px;padding:8px;background:rgba(13,13,11,.86)}
.route-map.mob{display:none}
.rt-sea{fill:var(--ink)}
/* Land must read against the sea: #2a2925 with a 1px #4a4740 coast (Nachtrag 2, R5). */
.rt-land{fill:#2a2925;stroke:#4a4740;stroke-width:1px;vector-effect:non-scaling-stroke}
.rt-place{fill:var(--text-dim);font-family:var(--mono);letter-spacing:.06em;paint-order:stroke;stroke:var(--ink);stroke-linejoin:round}
/* Mini map on phones: sticky under the header while the station list is in
   view; a zero-height holder so it takes no space in the list. */
.rt-mini-hold{display:none}
.rt-shadow{fill:none;stroke:rgba(0,0,0,.65);stroke-linecap:round;stroke-linejoin:round}
.rt-ribbon{fill:none;stroke-linecap:round;stroke-linejoin:round}
.rt-dot{fill:var(--text);opacity:0;transition:opacity .6s ease,fill .6s ease}
.rt-dot.past{opacity:.9}
.rt-dot.on{opacity:1;fill:var(--green)}
.rt-label{fill:var(--text);font-family:var(--mono);paint-order:stroke;stroke:var(--ink);stroke-linejoin:round}
@media (max-height:700px){.route-map.desk{width:170px}}
@media (max-width:900px){
  .route-map.mob{display:block;max-width:440px;margin:24px 0 8px}
  .rt-mini-hold{display:block;position:sticky;top:82px;height:0;z-index:5}
  /* Clip (not hidden: that would end the sticky) so the mini map leaves with the list. */
  .stops{overflow:clip}
  .route-map.mini{position:absolute;right:0;top:0;width:96px;padding:4px;background:rgba(13,13,11,.92);border:1px solid var(--line-2)}
}

/* ---------- route globe (Nachtrag 6, N4) ----------
   Made by js/globe-route.js; absolutely placed over the flat map it
   replaces (no layout shift). The flat map hides only once the globe has
   drawn its first frame, and only after the globe has faded in. */
.rt-globe{position:absolute;z-index:3;border-radius:50%;background:#05070a;opacity:0;pointer-events:none;transition:opacity .4s ease}
.rt-globe canvas{display:block;width:100%;height:100%;border-radius:50%}
.screen .rt-globe{left:30px;bottom:30px;width:300px;height:300px;box-shadow:0 0 0 6px rgba(13,13,11,.86),0 0 0 7px var(--line-2)}
.rt-globe-name{position:absolute;left:50%;top:22px;transform:translateX(-50%);margin:0;padding:3px 8px;font-size:12px;line-height:1.3;white-space:nowrap;color:var(--text);background:rgba(13,13,11,.86)}
.rt-globe-name:empty{display:none}
.trail.globe-live .rt-globe{opacity:1}
.trail.globe-live .route-map.desk,.trail.globe-live .route-map.mini{visibility:hidden;transition:visibility 0s .4s}
@media (max-height:700px){.screen .rt-globe{width:220px;height:220px}}
@media (max-width:900px){
  .rt-mini-hold .rt-globe{right:4px;top:4px;width:120px;height:120px;box-shadow:0 0 0 3px rgba(13,13,11,.92),0 0 0 4px var(--line-2)}
  .rt-globe.mini .rt-globe-name{display:none}
}

/* ---------- roles ---------- */
.roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--line);border:2px solid var(--line)}
.role{background:var(--ink);padding:32px 28px;display:grid;gap:14px;align-content:start}
.role h3{font-size:clamp(30px,3vw,46px)}
.role ul{margin:0;padding-left:18px;color:var(--text-dim);display:grid;gap:6px}
.role .mono{color:var(--green)}
@media (max-width:900px){.roles{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .trail .scr{transition:none}
}