/* Modern DS stack: route map page + homepage entry band */
.metro { width: 100%; height: auto; overflow: visible; display: block; }
.metro-track { stroke: rgba(20, 24, 28, .1); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.metro-line { stroke: var(--teal); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.metro-more { stroke: var(--amber); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 2 12; }
.metro-dot { fill: var(--surface); stroke: var(--ink); stroke-width: 4; transition: fill .25s, stroke .25s, transform .3s var(--ease); transform-box: fill-box; transform-origin: center; }
.metro-stop:hover .metro-dot, .metro-stop:focus .metro-dot { fill: var(--ink); transform: scale(1.18); }
.metro-stop:hover .metro-n, .metro-stop:focus .metro-n { fill: #fff; }
.metro-n { font: 700 15px 'JetBrains Mono', monospace; fill: var(--ink); pointer-events: none; transition: fill .25s; }
.metro-label { font: 600 17px 'Inter', sans-serif; fill: var(--ink); }
.metro-label.soft { font-weight: 500; font-size: 14px; fill: var(--amber); }
.metro-pulse { fill: rgba(217, 138, 0, .25); animation: pulse 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.metro-core { fill: var(--amber); stroke: #fff; stroke-width: 2; }
@keyframes pulse { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
.stack-band .metro-wrap { padding: 8px 0; }

/* Page */
.stack-page { padding-top: 96px; }
.stack-hero { display: grid; grid-template-columns: minmax(260px, 1fr) 1.3fr; gap: clamp(24px, 5vw, 72px); align-items: center; max-width: 1320px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) clamp(20px, 6vw, 96px) 24px; }
.stack-hero h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); letter-spacing: -.035em; margin: 14px 0 20px; }
.stack-hero p.lead { color: var(--muted); font-size: 1.15rem; max-width: 48ch; margin: 0; }
.stack-hero .back { display: inline-block; margin-bottom: 8px; }

.route { position: relative; max-width: 1100px; margin: 0 auto; padding: 40px clamp(20px, 6vw, 96px) 40px calc(clamp(20px, 6vw, 96px) + 56px); }
.route::before, .route::after { content: ''; position: absolute; left: calc(clamp(20px, 6vw, 96px) + 18px); top: 60px; bottom: 60px; width: 8px; border-radius: 4px; z-index: 0; }
.route::before { background: rgba(20, 24, 28, .08); }
.route::after { background: linear-gradient(var(--teal), var(--amber)); transform-origin: 50% 0; transform: scaleY(var(--rt, 0)); }
.stop { position: relative; z-index: 1; padding: 0 0 clamp(56px, 8vw, 96px); }
.stop-n { position: absolute; left: -56px; top: 0; width: 44px; height: 44px; margin-left: -4px; border-radius: 50%; background: var(--surface); border: 4px solid var(--ink); display: grid; place-items: center; font: 700 1rem 'JetBrains Mono', monospace; z-index: 1; transition: background .4s, color .4s, transform .4s var(--ease); }
.stop.in .stop-n { background: var(--ink); color: #fff; transform: scale(1.06); }
.stop .kicker { margin: 4px 0 8px; }
.stop h2 { max-width: 22ch; margin-bottom: 18px; }
.stop > p { color: #2a3138; max-width: 62ch; margin: 0 0 18px; }
.tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; }
.tools li { font: 500 .78rem 'JetBrains Mono', monospace; padding: 5px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.stop-posts-title { font: 500 .8rem 'JetBrains Mono', monospace; color: var(--teal); margin: 0 0 12px; }
.stop-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.stop-empty { border: 1.5px dashed rgba(20, 24, 28, .2); border-radius: var(--radius); padding: 22px 24px; color: var(--muted); font-size: .92rem; grid-column: 1 / -1; max-width: 62ch; }
.more-stops { display: flex; align-items: center; gap: 14px; color: var(--amber); font: 500 .9rem 'JetBrains Mono', monospace; }
.more-stops::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 18px 0 0 var(--amber), 36px 0 0 var(--amber); margin-right: 36px; }

@media (max-width: 820px) {
  .stack-hero { grid-template-columns: 1fr; }
  .route { padding-left: calc(20px + 52px); }
  .route::before, .route::after { left: 34px; }
}
@media (prefers-reduced-motion: reduce) { .metro-pulse { animation: none; } }

/* Locomotive hero band: text sits in the sky over the animation */
.train-hero { position: relative; max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 6vw, 96px); }
.train-hero .band-text { position: absolute; z-index: 2; top: clamp(36px, 5vw, 72px); left: clamp(20px, 6vw, 96px); max-width: 760px; }
.title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 32px; margin-bottom: 18px; }
.title-row h2 { margin: 0; max-width: none; }
@media (min-width: 821px) { .title-row { flex-wrap: nowrap; } .title-row h2 { white-space: nowrap; } .train-hero .band-text { max-width: 900px; } }
.train-hero .title-row .cta { margin: 0; }
.train-hero .band-text p:not(.kicker) { color: var(--muted); max-width: 46ch; }
.train-hero .cta { margin-top: 24px; }
.train-canvas { display: block; width: 100%; height: clamp(440px, 42vw, 580px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
@media (max-width: 820px) {
  .train-hero .band-text { position: relative; top: auto; left: auto; padding-top: 56px; }
  .train-canvas { height: 360px; margin-top: -20px; }
}