.official-route-directory {
    padding: 6rem 6vw 7rem;
    background: #173c35;
    color: #fff;
}
.official-route-directory h2 {
    max-width: 850px;
    margin: .5rem 0 1rem;
    font: 600 clamp(2.5rem, 5vw, 5rem)/.95 Newsreader, serif;
}
.official-route-intro { max-width: 780px; color: #dce8e2; font-size: 1.05rem; }
.official-route-days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 3rem; }
.official-route-day { border-top: 1px solid rgba(255,255,255,.28); padding-top: 1rem; }
.official-route-day h3 { margin: .2rem 0 1rem; font: 600 1.7rem/1 Newsreader, serif; }
.official-route-day > div { display: grid; gap: .55rem; }
.official-route-stop {
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    gap: .75rem;
    align-items: center;
    min-height: 72px;
    padding: .85rem;
    background: rgba(255,255,255,.07);
    color: inherit;
    text-decoration: none;
}
.official-route-stop.is-linked { background: #f2eee2; color: #173c35; transition: transform .2s, background .2s; }
.official-route-stop.is-linked:hover { transform: translateY(-2px); background: #fff; }
.official-route-number { font-size: .72rem; letter-spacing: .1em; opacity: .65; }
.official-route-stop span:nth-child(2) { display: flex; flex-direction: column; gap: .28rem; }
.official-route-stop strong { font-size: 1rem; }
.official-route-stop small { font-size: .72rem; line-height: 1.35; opacity: .75; }
.official-route-stop b { font-size: 1.15rem; }
.official-route-stop.is-pending { border: 1px dashed rgba(255,255,255,.16); }
@media (max-width: 1000px) { .official-route-days { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 650px) {
    .official-route-days { grid-template-columns: 1fr; }
    .official-route-directory { padding: 4rem 5vw 5rem; }
}