@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { font-family: 'DM Sans', sans-serif; color: #142a27; background: #f5f3ee; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: #f5f3ee; }
svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.topbar { height: 92px; padding: 0 max(28px, calc((100vw - 1160px)/2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #d9d8d1; }
.brand { color: #163b35; display: flex; align-items: center; gap: 11px; text-decoration: none; font: 600 11px/1.05 'Manrope'; letter-spacing: .14em; }
.brand svg { width: 35px; height: 35px; stroke-width: 1.6; }
.brand strong { font-size: 15px; }
.current-time { display: flex; align-items: baseline; gap: 13px; }
.current-time span { font: 700 10px 'Manrope'; letter-spacing: .17em; color: #73807c; }
.current-time strong { font: 500 25px 'Manrope'; letter-spacing: -.04em; }
.hero { max-width: 1160px; margin: auto; padding: 74px 28px 58px; position: relative; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: #d84e36; font: 700 11px 'Manrope'; letter-spacing: .18em; margin-bottom: 25px; }
.eyebrow svg { width: 18px; }
h1 { font: 500 clamp(48px, 7vw, 88px)/.94 'Manrope'; letter-spacing: -.065em; margin: 0; max-width: 780px; }
h1 em { font-family: Georgia, serif; font-weight: 400; color: #2c685d; }
.hero > p { color: #68746f; font-size: 17px; line-height: 1.6; max-width: 490px; margin: 27px 0 0; }
.day-controls { position: absolute; right: 28px; bottom: 62px; display: flex; flex-direction: column; gap: 8px; }
.day-controls label { font: 700 10px 'Manrope'; letter-spacing: .14em; color: #7b837f; text-transform: uppercase; }
select { appearance: none; border: 1px solid #cacbc4; border-radius: 2px; background: #eeece6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23142a27' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; padding: 12px 42px 12px 14px; color: #263c38; font: 600 13px 'DM Sans'; min-width: 195px; }
.departures { background: #173c36; color: #f8f6ef; padding: 55px max(28px, calc((100vw - 1160px)/2)) 35px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 25px; }
.section-heading span { color: #9cb0aa; font: 700 10px 'Manrope'; letter-spacing: .18em; }
.section-heading h2 { margin: 6px 0 0; font: 500 27px 'Manrope'; letter-spacing: -.035em; }
#refresh { border: 1px solid #46645e; background: transparent; color: #dce5e1; width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer; border-radius: 50%; }
#refresh:hover { background: #214a43; }
#refresh svg { width: 18px; }
.cards { display: flex; flex-direction: column; gap: 1px; }
.bus-card { min-height: 118px; display: grid; grid-template-columns: 40px 78px minmax(210px, 1fr) 130px 170px 42px; align-items: center; gap: 18px; background: #214740; padding: 18px 25px; position: relative; border-left: 3px solid transparent; transition: transform .2s, background .2s; }
.bus-card:hover { background: #284f48; transform: translateX(3px); }
.bus-card.best { background: #f8f6ef; color: #173c36; border-left-color: var(--route); min-height: 134px; }
.rank { color: #809b94; font: 500 11px 'Manrope'; letter-spacing: .12em; }
.route-badge { width: 62px; height: 62px; display: grid; place-items: center; background: var(--route); border-radius: 50%; color: white; font: 800 22px 'Manrope'; letter-spacing: -.03em; box-shadow: inset 0 0 0 5px rgba(255,255,255,.14); }
.route-info h3 { margin: 3px 0 4px; font: 700 18px 'Manrope'; letter-spacing: -.03em; }
.route-info p { margin: 0; color: #a9bbb6; font-size: 13px; }
.best .route-info p { color: #70807b; }
.best-label { color: #d84e36; font: 800 9px 'Manrope'; letter-spacing: .16em; }
.departure-time span { display: block; color: #8ca39d; font: 700 9px 'Manrope'; letter-spacing: .15em; margin-bottom: 6px; }
.departure-time strong { font: 600 26px 'Manrope'; letter-spacing: -.04em; }
.best .departure-time span { color: #7b8985; }
.wait { display: flex; align-items: center; gap: 9px; color: #c4d1cd; }
.wait svg { width: 19px; }
.wait strong { font: 600 14px 'Manrope'; }
.wait.urgent { color: #f0735b; }
.bus-card > a { width: 40px; height: 40px; border: 1px solid #537069; color: inherit; display: grid; place-items: center; border-radius: 50%; }
.best > a { border-color: #c8ceca; }
.bus-card > a svg { width: 17px; }
.updated { text-align: right; color: #819b94; font-size: 11px; margin: 18px 0 0; text-transform: capitalize; }
footer { max-width: 1160px; margin: auto; padding: 34px 28px 45px; display: flex; align-items: center; justify-content: space-between; color: #6f7a76; font-size: 12px; }
footer > div { display: flex; align-items: center; gap: 14px; }
footer p { margin: 0; line-height: 1.5; }
footer strong { color: #344a46; }
footer a { display: flex; align-items: center; gap: 8px; color: #335c54; font-weight: 700; text-decoration: none; }
footer a svg { width: 16px; }

@media (max-width: 800px) {
  .hero { padding-top: 52px; }
  .hero > p { max-width: 100%; }
  .day-controls { position: static; margin-top: 32px; align-items: flex-start; }
  .bus-card { grid-template-columns: 30px 66px 1fr 96px 40px; gap: 12px; padding: 18px 16px; }
  .route-badge { width: 54px; height: 54px; font-size: 19px; }
  .wait { grid-column: 3 / 5; margin-top: -12px; }
  .departure-time strong { font-size: 22px; }
}
@media (max-width: 520px) {
  .topbar { height: 78px; padding: 0 18px; }
  .brand svg { width: 30px; }
  .current-time span { display: none; }
  .hero { padding: 45px 18px 44px; }
  h1 { font-size: 46px; }
  .hero > p { font-size: 15px; }
  .departures { padding: 42px 14px 25px; }
  .bus-card { grid-template-columns: 54px 1fr 76px; min-height: 118px; }
  .bus-card.best { min-height: 132px; }
  .rank { display: none; }
  .route-badge { grid-row: 1 / 3; }
  .route-info { align-self: end; }
  .route-info h3 { font-size: 16px; }
  .route-info p { font-size: 11px; }
  .departure-time { grid-column: 3; grid-row: 1; align-self: end; text-align: right; }
  .wait { grid-column: 2 / 4; grid-row: 2; align-self: start; margin: 3px 0 0; }
  .bus-card > a { display: none; }
  footer { padding: 28px 18px 38px; display: block; }
  footer > a { margin: 24px 0 0 38px; }
}