:root {
  --night: #10141d;
  --night-2: #161b26;
  --cream: #f4eee2;
  --gold: #dfc57e;
  --gold-dim: #c9ad6c;
  --muted: #bdb7ad;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Baskerville, Georgia, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 4.5rem; }
body {
  margin: 0; background: var(--night); color: var(--cream); --fr-ink: #e0c68e;
  font-family: var(--serif); -webkit-font-smoothing: antialiased;
}

main {
  width: min(880px, calc(100% - 2 * clamp(1.25rem, 5vw, 3rem)));
  margin-inline: auto; padding: clamp(5rem, 12vh, 8rem) 0 clamp(4rem, 10vh, 7rem);
}

.routes-head { margin-bottom: clamp(2.5rem, 7vh, 4.5rem); }
.eyebrow {
  margin: 0 0 1rem; color: var(--gold);
  font: 750 .66rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase;
}
h1 {
  max-width: 16ch; margin: 0; color: var(--cream);
  font-size: clamp(2.3rem, 6vw, 4.4rem);
  font-weight: 400; letter-spacing: -.045em; line-height: .98; text-wrap: balance;
}
h1 em { color: var(--gold); font-weight: 400; }

section { padding: clamp(2rem, 5vh, 3rem) 0; border-top: 1px solid rgba(244,238,226,.13); }
h2 {
  margin: 0 0 .4rem; color: var(--gold);
  font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 400; letter-spacing: -.02em;
}

.route-list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; }
.route-list > li {
  display: grid; gap: .3rem;
  padding: 1.15rem 0; border-bottom: 1px solid rgba(244,238,226,.1);
}
.route-list > li:last-child { border-bottom: 0; }
.route-list a {
  color: var(--cream); text-decoration: none;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); letter-spacing: -.015em; line-height: 1.2;
  transition: color .18s ease;
}
.route-list a:hover, .route-list a:focus-visible { color: var(--gold); outline: 0; }
.route-list span { color: var(--gold-dim); font-style: italic; font-size: 1rem; }
.route-list p { margin: .2rem 0 0; max-width: 40rem; color: var(--muted); font-size: .97rem; line-height: 1.5; }

/* annex rooms: shorter entries, no descriptive paragraph */
.room-lede { max-width: 40rem; margin: 1.2rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.5; }
.route-list--rooms > li { grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: baseline; }
.route-list--rooms a { font-size: clamp(1.05rem, 1.8vw, 1.3rem); }
.route-list--rooms span { font-size: .95rem; }

.fr-echo--head { margin-top: .5rem; }
main .fr-echo--head { max-width: 40rem; }

@media (max-width: 620px) {
  h1 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .route-list a { font-size: 1.15rem; }
}