/* fonts, self-hosted (2026-10-24) so pages make no request to Google before the cookie choice. Google Fonts' own
   variable woff2 files (Archivo v25, Public Sans v21), latin + latin-ext; licences: fonts/OFL-*.txt. To update: re-fetch
   from fonts.googleapis.com/css2 with a current browser's user agent, and bump the version in the file names. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url("fonts/archivo-v25-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url("fonts/archivo-v25-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Public Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/public-sans-italic-v21-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Public Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/public-sans-italic-v21-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/public-sans-v21-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/public-sans-v21-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* BusSchedules.com prototype. Tokens: see /brand/ */
:root {
  --ink: #0E2238;
  --ink-2: #1B3554;
  --steel: #2B4C7E;
  --accent: #A9C1E0;      /* Pale Steel: on Ink only (highlights, .com, hero buttons, focus), and the logo */
  --accent-dk: #8FAAD0;
  --accent-fg: #0E2238;   /* text on the accent */
  --logo: var(--accent);
  --link: var(--steel);   /* text links on light */
  --link-dk: var(--ink);
  --btn: var(--ink);      /* buttons on light */
  --btn-dk: var(--steel);
  --btn-fg: #FFFFFF;
  --focus: var(--steel);
  --tld-light: var(--steel); /* ".com" on white */
  --nextday: var(--steel);
  --new: #137A45;         /* the New tag only (white text, 5.4:1), chosen 2026-10-23 */
  --link-line: currentColor;
  --paper: #F5F7FA;
  --card: #FFFFFF;
  --rule: #DCE1E8;
  --muted: #4A5568;
  --on-ink: #FFFFFF;
  --on-ink-muted: #C9D4E3;
  --radius: 12px;
  --head: "Archivo", "Arial Narrow", Arial, sans-serif;
  --body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--body); }
/* short pages (a one-airport state) keep the footer at the bottom of the window: main takes the spare height. As a
   flex item, main no longer lets the last section's 32px margin (or a closing note's) merge into the footer's 56px, so the last
   element's bottom margin at each of the top levels is dropped to keep the 56px gap */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
main > :last-child:not(.hero), main > :last-child:not(.hero) > :last-child,
main > :last-child:not(.hero) > :last-child > :last-child { margin-bottom: 0; }
img, svg { max-width: 100%; }
a { color: var(--link); text-underline-offset: .15em; text-decoration-color: var(--link-line); }
a:hover { color: var(--link-dk); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.top :focus-visible, .foot :focus-visible { outline-color: var(--accent); }
.hero :focus-visible { outline-color: var(--hero-focus); }
h1, h2, h3 { font-family: var(--head); line-height: 1.15; margin: 0 0 .4em; letter-spacing: -.01em; }
h2 { font-size: 1.45rem; font-weight: 800; }
h3 { font-size: 1.1rem; font-weight: 700; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 10; background: var(--accent); color: var(--accent-fg); padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.skip:focus { top: 8px; }
main:focus { outline: none; }
.time, .facts dd, .stats b { font-variant-numeric: tabular-nums; }

/* header */
.top { background: var(--ink); color: var(--on-ink); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.logo .mark { width: 32px; height: 40px; flex: none; }
/* Hover: the wordmark keeps its colour (the general a:hover navy would vanish on the navy header); the roundel and "bus" pill light up white instead */
a.logo:hover { color: inherit; --logo: #FFFFFF; }
.logo .mark circle, .word .w1 { transition: fill .15s, background-color .15s; }
@media (prefers-reduced-motion: reduce) { .logo .mark circle, .word .w1 { transition: none; } }
.word { font-family: var(--head); font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; }
.word .w1 { background: var(--logo); color: var(--accent-fg); border-radius: 999px; padding: 0 .38em .06em; margin-right: .1em; }
.word .tld { color: var(--accent); font-weight: 700; }
.nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav a { color: var(--on-ink); text-decoration: none; font-weight: 600; padding: 8px 12px; border-radius: 8px; display: block; }
.nav a:hover { background: var(--ink-2); color: var(--on-ink); }

/* breadcrumb: on the navy band between the header and the hero, so the three read as one block (2026-10-22) */
.crumb-bar { background: var(--hero-bg); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 14px 0 0; margin: 0; font-size: .9rem; color: var(--on-ink-muted); }
.crumbs li + li::before { content: "›"; margin: 0 6px 0 2px; color: var(--on-ink-muted); }
.crumbs a { color: var(--on-ink); text-decoration-color: rgba(255,255,255,.5); }
.crumbs a:hover { color: var(--on-ink); text-decoration-color: currentColor; }
.crumbs [aria-current] { color: var(--on-ink-muted); font-weight: 600; }
.crumb-bar :focus-visible { outline-color: var(--accent); }

/* hero: navy, lightening to Steel on the right (the user's request, 2026-10-25, from the Deep Blue & Cyan test); no pattern.
   The breadcrumb band shares it, so the two line up. At the light end: white 8.6:1, lede 5.8:1, highlights 4.7:1, hero Book button 4.0:1. */
:root { --hero-bg: linear-gradient(90deg, var(--ink), var(--steel)); --hero-fg: var(--on-ink); --hero-lede: var(--on-ink-muted); --hero-hl: var(--accent); --hero-eyebrow: var(--accent); --hero-focus: var(--accent); }
.hero { background: var(--hero-bg); color: var(--hero-fg); margin: 14px 0 0; padding: 36px 0 40px; position: relative; overflow: hidden; }
.crumb-bar + .hero { margin-top: 0; padding-top: 22px; }
main > .hero:first-child { margin-top: 0; }
.hero h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 800; max-width: 22ch; }
.hero .eyebrow { color: var(--hero-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; margin: 0 0 10px; }
.hero .eyebrow a { color: var(--hero-eyebrow); }
.hero .lede { color: var(--hero-lede); font-size: 1.12rem; max-width: 62ch; margin: 0 0 18px; }
.hero .hl { color: var(--hero-hl); }
.hero .lede-strong { color: var(--hero-fg); }
.hero .lede-strong:hover { font-weight: 700; }
.hero-home { padding: 56px 0 48px; }
.hero-home h1 { font-size: clamp(2.1rem, 5.4vw, 3.6rem); max-width: 18ch; }
/* home hero graphic: the logo's bus stop as a big sign, right of the headline (chosen 2026-10-22) */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: center; }
.hero-main { min-width: 0; }
.hero-art { margin: 0; }
@media (max-width: 1000px) { .hero-grid { display: block; } .hero-art { display: none; } }   /* phones/tablets: text + search only */
.art-stop svg { display: block; width: 100%; height: auto; max-height: 400px; }
.art-stop .sh { fill: rgba(0,0,0,.28); }
.art-stop .pole { fill: #8FA3BF; } .art-stop .pole-hi { fill: #C9D4E3; }
.art-stop .disc { fill: var(--accent); } .art-stop .rim { fill: none; stroke: var(--on-ink); stroke-width: 7; }
.art-stop .arrow { fill: none; stroke: var(--ink); stroke-width: 17; stroke-linecap: round; stroke-linejoin: round; }
.art-stop .pill { fill: var(--accent); stroke: var(--on-ink); stroke-width: 4; } .art-stop .pill-t { fill: var(--ink); font: 800 30px var(--head); }
.art-stop .case { fill: var(--paper); stroke: var(--ink-2); stroke-width: 3; } .art-stop .case-top { fill: var(--steel); }
.art-stop .case-t { fill: var(--on-ink); font: 700 9px var(--body); letter-spacing: .14em; }
.art-stop .ln { fill: var(--rule); } .art-stop .hl { fill: var(--steel); } .art-stop .clip { fill: #6F829C; }
.ctas { display: flex; gap: 10px; flex-wrap: wrap; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; background: var(--btn); color: var(--btn-fg); border: 0; border-radius: 10px; padding: 12px 18px;
  font: 700 1rem/1.2 var(--body); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--btn-dk); color: var(--btn-fg); }
.btn .ext { font-size: .9em; }
.btn-sm { padding: 7px 12px; font-size: .9rem; border-radius: 8px; }
.btn-sky, .hero .btn { background: var(--accent); color: var(--accent-fg); }
.btn-sky:hover, .hero .btn:hover { background: var(--accent-dk); color: var(--accent-fg); }
.btn-ghost { background: transparent; color: var(--link); border: 2px solid var(--link); }
.btn-ghost:hover { background: var(--btn); color: var(--btn-fg); border-color: var(--btn); }
.return .btn, .ctas .btn { white-space: normal; max-width: 100%; }   /* long city names wrap instead of widening the page */

/* search */
.search { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; background: #fff; color: var(--ink); padding: 14px; border-radius: 16px; max-width: 820px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.search .field { display: flex; flex-direction: column; gap: 4px; }
.search label { font-weight: 700; font-size: .85rem; }
.search .opt { font-weight: 400; color: var(--muted); }
.search input { font: 1.05rem var(--body); padding: 11px 12px; border: 1.5px solid #6B7685; border-radius: 10px; min-width: 0; width: 100%; color: var(--ink); }
.search input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.search .btn { padding: 13px 20px; }
.search .btn:focus-visible { outline-color: var(--focus); }
.search-msg { grid-column: 1 / -1; margin: 0; font-size: .95rem; }
.search-msg:empty { display: none; }
.stats { display: flex; flex-wrap: wrap; gap: 8px 28px; list-style: none; padding: 0; margin: 22px 0 0; color: var(--hero-lede); }
.stats b { color: var(--hero-fg); font-family: var(--head); font-size: 1.35rem; margin-right: 4px; }

/* blocks */
.block { margin: 32px 0; }
.block > .sub, .sub { color: var(--muted); margin: -2px 0 12px; }
.card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 20px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 24px; }
.cols .card { margin: 16px 0; }
.note { color: var(--muted); font-size: .92rem; }

/* key facts */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); margin: -28px 0 0; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); position: relative; box-shadow: 0 6px 18px rgba(14,34,56,.08); }
.facts.five { grid-template-columns: repeat(5, 1fr); }
.fare-note { margin: 12px 0 0; }
.row-fare { display: block; font-weight: 700; margin: 0 0 6px; }
.tt thead th:last-child { white-space: normal; min-width: 80px; max-width: 110px; }
.fare { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.facts div { padding: 14px 18px; border-left: 1px solid var(--rule); }
.facts div:first-child { border-left: 0; }
.facts dt { color: var(--muted); font-size: .85rem; font-weight: 600; }
.facts dd { margin: 2px 0 0; font-family: var(--head); font-weight: 800; font-size: 1.6rem; }

/* tables */
.table-wrap { position: relative; overflow-x: auto; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: .97rem; }
caption { text-align: left; padding: 12px 14px 0; font-weight: 700; color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
th, td { padding: 10px 14px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
thead th { font-size: .85rem; color: var(--muted); font-weight: 700; white-space: nowrap; }
tbody tr:last-child > * { border-bottom: 0; }
tbody th { font-weight: 600; }
th.num, td.num { text-align: right; }
.tt th.time, .tt .time { font-weight: 800; font-family: var(--head); font-size: 1.08rem; white-space: nowrap; }
.tt td { white-space: nowrap; }
.tt .wrap-cell { white-space: normal; display: inline-block; min-width: 220px; }
.nextday { font-size: .78rem; font-weight: 700; color: var(--nextday); }
.small { font-size: .85rem; }
.arrow { color: var(--muted); }

/* line timetable grid */
.grid { width: auto; min-width: 100%; }
.grid th, .grid td { white-space: nowrap; text-align: center; padding: 8px 12px; }
.grid thead th { vertical-align: bottom; }
.grid .tn { display: block; font-family: var(--head); color: var(--ink); font-size: .95rem; }
.grid .days { display: block; font-weight: 600; font-size: .78rem; }
.grid .stopcell { text-align: left; position: sticky; left: 0; background: var(--card); z-index: 1; min-width: 230px; max-width: 320px; white-space: normal; padding-left: 34px; position: sticky; }
.grid tbody .stopcell { font-weight: 600; }
.grid .stopcell .dot { position: absolute; left: 14px; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.grid .stopcell .dot::after { content: ""; position: absolute; left: -4px; top: 14px; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 2.5px solid var(--ink); box-sizing: border-box; }
.grid tbody tr:first-child .dot { top: 18px; }
.grid tbody tr:last-child .dot { bottom: calc(100% - 18px); }
.grid .sn { display: block; }
.grid .sc { display: block; font-weight: 400; font-size: .85rem; }
.grid td.time { font-weight: 700; }
.grid td.skip { color: var(--muted); }

/* stops lists */
.stops { list-style: none; margin: 0; padding: 0; }
.stops li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--rule); }
.stops li:first-child { border-top: 0; }
.stop-name { font-weight: 600; flex: 1 1 220px; }
.stop-by { color: var(--muted); font-size: .9rem; flex: 1 1 200px; }

/* cards & lists */
.route-grid, .carrier-grid, .why-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.route-card, .carrier-card { display: flex; flex-direction: column; gap: 4px; height: 100%; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px 18px; color: var(--ink); text-decoration: none; border-top: 4px solid var(--accent); }
.route-card:hover, .carrier-card:hover { border-color: var(--link); border-top-color: var(--link); color: var(--ink); box-shadow: 0 6px 18px rgba(14,34,56,.1); }
.rc-cities, .cc-name { font-family: var(--head); font-weight: 800; font-size: 1.15rem; }
.rc-meta, .cc-meta { color: var(--muted); font-size: .92rem; }
.rc-by { font-size: .85rem; color: var(--link); font-weight: 600; }
.why-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.why-grid li { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px; }
.why-grid p { margin: 0; color: var(--muted); }
.state-list { list-style: none; padding: 0; margin: 0; columns: 4 180px; column-gap: 24px; }
.state-list li { break-inside: avoid; padding: 4px 0; }
.state-list.big a { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.state-list.big a:hover { background: #fff; }
.state-list .n { color: var(--muted); font-weight: 400; font-size: .9rem; }
.links { padding-left: 1.1em; margin: 0 0 8px; }
.links li { padding: 3px 0; }
.links.cols3 { columns: 3 220px; column-gap: 24px; }
.links.inline { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.links.inline a { display: inline-block; background: #fff; border: 1px solid var(--rule); border-radius: 999px; padding: 6px 14px; text-decoration: none; font-weight: 600; }
.return { margin: 8px 0 24px; }

/* faq */
.faq details { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; margin: 0 0 8px; }
.faq summary { cursor: pointer; padding: 14px 16px; font-weight: 700; }
.faq p { margin: 0; padding: 0 16px 14px; }

.prose { max-width: 760px; padding-top: 12px; padding-bottom: 24px; }
.prose h2 { margin-top: 1.4em; }
.brand-logos { display: flex; flex-wrap: wrap; gap: 12px; }
.brand-logos > div { padding: 22px 26px; border-radius: 12px; border: 1px solid var(--rule); }
.brand-logos .on-light { background: #fff; color: var(--ink); }
.brand-logos .on-light .tld { color: var(--tld-light); }
.brand-logos .on-dark { background: var(--ink); color: #fff; }
.swatches { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.swatches li { display: grid; grid-template-columns: 44px 1fr; gap: 0 10px; align-items: center; background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 10px; font-size: .9rem; }
.swatches .sw { grid-row: span 3; width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--rule); }
.swatches span:last-child { color: var(--muted); }

/* footer */
.foot { background: var(--ink); color: var(--on-ink-muted); margin-top: 56px; padding: 36px 0 10px; }
.foot-in { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: 28px; }
.foot h2 { font-size: .95rem; color: var(--on-ink); text-transform: uppercase; letter-spacing: .06em; }
.foot a, .foot .link-btn { color: var(--on-ink-muted); text-decoration-color: rgba(201, 212, 227, .45); }   /* quieter than the page's links (the user's request, 2026-10-24) */
.foot a:hover, .foot .link-btn:hover { color: var(--on-ink); text-decoration-color: var(--on-ink); }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { padding: 3px 0; }
.foot .logo { color: var(--on-ink); }
.legal { border-top: 1px solid var(--ink-2); margin-top: 24px; padding-top: 6px; font-size: .88rem; }

@media (max-width: 760px) {
  .search { grid-template-columns: 1fr; }
  .search .btn { justify-content: center; }
  .facts, .facts.five { grid-template-columns: repeat(2, 1fr); }
  .facts div:nth-child(odd) { border-left: 0; }
  .facts div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .foot-in { grid-template-columns: 1fr; }
  .word { font-size: 1.2rem; }
  .nav ul { gap: 0; }   /* five links (Airports, 2026-10-24) on one line from 375 px */
  .nav a { padding: 6px 7px; font-size: .94rem; }
}
@media (max-width: 380px) {
  .facts dd { font-size: 1.3rem; }
  .grid .stopcell { min-width: 160px; }
}

/* carrier pages: federal safety record (FMCSA), build.py federal_record() */
.fed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.fed-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px 18px; }
.fed-card h3 { margin: 0; font: 700 1.1rem var(--head); }
.fed-dba { margin: 2px 0 0; color: var(--muted); font-size: .9rem; }
.fed-card dl { margin: 12px 0 0; }
.fed-card dl > div { display: grid; grid-template-columns: 10.5em 1fr; gap: 12px; padding: 7px 0; border-top: 1px solid var(--rule); }
.fed-card dt { font-weight: 700; font-size: .9rem; }
.fed-card dd { margin: 0; font-size: .95rem; }
.fed-card .muted { color: var(--muted); font-size: .88rem; }
@media (max-width: 480px) { .fed-card dl > div { grid-template-columns: 1fr; gap: 2px; } }

/* stop pages: where the stop is (text + map), and nearest addresses in city stop lists */
.where { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.where h2 { margin-top: 0; }
.stop-address .k { display: block; font-size: .85rem; font-weight: 700; color: var(--muted); }
.stop-address { font-weight: 600; }
.stop-address .muted { font-weight: 400; font-size: .85rem; }
.stop-addr { display: block; font-weight: 400; color: var(--muted); font-size: .88rem; }
.stop-map { height: 340px; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: var(--paper, #F5F7FA); position: relative; }
/* pins: 24 x 24 px targets (WCAG 2.2) around the visible dot */
.stop-map .pin { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; cursor: pointer; }
.stop-map .pin span { display: block; border-radius: 50%; box-sizing: border-box; }
.stop-map .pin-other span { width: 14px; height: 14px; background: #fff; border: 3px solid var(--steel); }
.stop-map .pin-here span { width: 22px; height: 22px; background: var(--ink); border: 4px solid #fff; box-shadow: 0 0 0 2px var(--ink); }
.stop-map .pin-other:hover span { background: var(--accent); }
.stop-map canvas:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.pan-ctrl button { font-size: 15px; line-height: 1; color: var(--ink); }
.stop-map .map-msg { margin: 0; padding: 16px; color: var(--muted); font-size: .9rem; }
.card > .stop-map { margin: 4px 0 12px; }
.map-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: var(--muted); font-size: .88rem; margin: 10px 0 0; }
.map-key span { display: inline-block; flex: none; }
.key-board { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--ink); margin-left: 4px; }
.key-alight { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--steel); margin-left: 10px; }
.key-city { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); margin-left: 4px; }
.stop-map.network { height: 440px; }
.key-line { width: 26px; height: 4px; border-radius: 2px; background: var(--steel); margin-left: 10px; }   /* city page: map above the stop list */
@media (max-width: 760px) { .where { grid-template-columns: 1fr; } .stop-map { height: 280px; } }

/* Book buttons: bright blue, so they stand out from the Ink header and hero (chosen 2026-10-22 over Ink, green, teal,
   amber and orange). The hero's Book button is the same blue as the timetable's (user's request, 2026-10-25; it was a
   lighter #7DB2FF with Ink text). WCAG AA: white on #1D5BD6 is 6.0:1 (hover 8.2:1). In the hero, hover goes lighter
   (#2F6FE8, white 4.6:1) since the darker hover would sink into the navy. Other buttons (search, return trip) keep the brand colours. */
:root { --book: #1D5BD6; --book-hv: #1748AB; --book-hero-hv: #2F6FE8; }
a.btn[data-carrier] { background: var(--book); color: #fff; }
a.btn[data-carrier]:hover { background: var(--book-hv); color: #fff; }
.hero a.btn[data-carrier] { background: var(--book); color: #fff; }   /* beats .hero .btn (Pale Steel) */
.hero a.btn[data-carrier]:hover { background: var(--book-hero-hv); color: #fff; }

/* timetable grid: one column per bus; a letter after the days links to the dates it runs (below the table) */
.grid .tt-ref { display: inline-block; min-width: 1.4em; padding: 0 .3em; border-radius: 999px; background: var(--paper); border: 1px solid var(--rule); font-size: .72rem; font-weight: 700; text-decoration: none; color: var(--link); }
.tt-notes { list-style: none; margin: 10px 0 0; padding: 0; color: var(--muted); font-size: .88rem; }
.tt-notes li { padding: 2px 0; }
.tt-notes b { display: inline-block; min-width: 1.4em; color: var(--ink); }
.tt-notes li:target { background: #FFF6D6; }

/* timetable grid: stop and city links each get a 24px-tall target (WCAG 2.2 target size) */
.grid .stopcell .sn a, .grid .stopcell .sc a { display: inline-block; min-height: 24px; line-height: 24px; }
.grid .stopcell .sn { display: block; }

/* freshness line under page headings; schedule changes */
.hero .fresh { color: var(--hero-lede); font-size: .9rem; margin: 16px 0 0; }
.hero .fresh a { color: var(--hero-fg); }
.new { display: inline-block; margin-left: .45em; padding: 0 .45em; border: 1.5px solid var(--new); border-radius: 999px; background: var(--new); color: #FFFFFF;
  font: 700 .7rem/1.5 var(--body); letter-spacing: .04em; text-transform: uppercase; vertical-align: .1em; white-space: nowrap; }
.grid th .new { margin: 3px 0 0; }
.muted { color: var(--muted); }
/* airport pages (2026-10-24): the town under an airport's name in lists; links to airport pages from city and stop pages */
.ap-town { display: block; font-weight: 400; font-size: .9rem; }
.ap-links { margin: 14px 0 0; font-weight: 600; }

/* bus / Amtrak filter over mixed lists (build.py mode_filter, site.js) */
.mode-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.mode-filter[hidden] { display: none; }
.mode-filter legend { float: left; padding: 0; margin: 0 4px 0 0; font-weight: 700; font-size: .92rem; }
.mode-filter label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--card); font-size: .92rem; cursor: pointer; }
.mode-filter label:has(input:checked) { border-color: var(--ink); font-weight: 700; }
.mode-filter input { margin: 0; accent-color: var(--ink); }
/* a trip that stops at an airport (city pages): the airport's code, outlined like a quiet New tag */
.ap-tag { display: inline-block; margin-left: .45em; padding: 0 .45em; border: 1.5px solid var(--steel); border-radius: 999px; color: var(--steel);
  font: 700 .7rem/1.5 var(--body); letter-spacing: .04em; vertical-align: .1em; white-space: nowrap; }

/* phones and small tablets: schedule tables become one card per row instead of scrolling sideways (build.py table(cards=...)).
   The cells keep explicit ARIA table roles, so screen readers still get a table; the column headings are visually hidden. */
.m-only { display: none; }
@media (min-width: 960px) {   /* city and stop pages: table columns centred (2026-10-24); the first column (city, time) stays left */
  .cards-dest th, .cards-dest td, .cards-dep th, .cards-dep td { text-align: center; }
  .cards-dest tr > :first-child, .cards-dep tr > :first-child { text-align: left; }
  /* connections: company names wrap and the Leg 1 / Leg 2 buttons stack, so the table fits and the buttons stay on screen */
  .cards-conn td[data-c="co"] { white-space: normal; min-width: 9em; max-width: 13em; }
  .cards-conn td[data-c="tick"] .btn { display: flex; width: max-content; }
  .cards-conn td[data-c="tick"] .btn + .btn { margin-top: 6px; }
}
@media (min-width: 960px) and (max-width: 1099px) {   /* small laptops / tablets sideways: tighter timetables keep Book on screen */
  .tt th, .tt td { padding-left: 8px; padding-right: 8px; }
  .tt .wrap-cell { min-width: 150px; }
}
.tt td[data-c="days"] { white-space: normal; min-width: 6.5em; max-width: 9em; }   /* "Mon, Tue, Fri, Sat, Sun" wraps instead of pushing Book off the side */
@media (max-width: 959px) {
  .m-only { display: inline; }
  .mode-filter { gap: 6px; }
  .mode-filter label { padding: 4px 10px; font-size: .88rem; }
  .cards, .cards tbody { display: block; width: 100%; }
  .cards caption { display: block; }
  .cards thead tr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cards tbody tr { display: grid; gap: 2px 12px; align-items: baseline; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
  /* long lists only (New York's 500+ destinations; build.py LONG_LIST): cards off screen skip layout and paint until
     scrolled near; "auto" remembers each card's real height once seen. Not on shorter lists, where it saves little and
     makes accessibility checkers misjudge the size of the Book buttons in cards not drawn yet. Desktop rows are table
     rows, which content-visibility doesn't apply to */
  .cards.long tbody tr { content-visibility: auto; contain-intrinsic-size: auto 92px; }
  .cards tbody tr[hidden] { display: none; }
  .cards tbody tr:last-child { border-bottom: 0; }
  .cards tbody th, .cards tbody td { display: block; padding: 0; border: 0; white-space: normal; text-align: left; min-width: 0; }
  .cards .wrap-cell { min-width: 0; display: inline; }
  .cards [data-c] { grid-area: var(--a); }
  .cards [data-c="dep"] { --a: dep; } .cards [data-c="arr"] { --a: arr; } .cards [data-c="dur"] { --a: dur; }
  .cards [data-c="days"] { --a: days; } .cards [data-c="stops"] { --a: stops; } .cards [data-c="stop"] { --a: stop; }
  .cards [data-c="co"] { --a: co; } .cards [data-c="tick"] { --a: tick; } .cards [data-c="to"] { --a: to; }
  .cards [data-c="dest"] { --a: dest; } .cards [data-c="wk"] { --a: wk; } .cards [data-c="fast"] { --a: fast; }
  .cards [data-c="days"], .cards [data-c="stops"], .cards [data-c="stop"], .cards [data-c="wk"], .cards [data-c="fast"] { color: var(--muted); font-size: .92rem; }
  .cards [data-c="tick"] { justify-self: end; align-self: center; text-align: right; white-space: nowrap; }
  .cards [data-c="tick"] .row-fare { display: inline; margin: 0 10px 0 0; }
  .cards [data-c="tick"] > span[aria-hidden="true"] { display: none; }   /* the table's "–" for no booking link; screen readers still hear why */
  .cards [data-c="co"] br { display: none; }
  .cards td a:not(.btn), .cards th a { display: inline-block; min-height: 24px; line-height: 24px; }   /* 24 px targets when names wrap (WCAG 2.5.8) */
  .cards [data-c="co"] .small { margin-left: 10px; }
  .cards [data-c="arr"]::before { content: "→ " / ""; color: var(--muted); font-weight: 400; }
  .cards [data-c="dur"] { justify-self: end; color: var(--muted); }
  /* route timetable: 7:40 AM → 11:35 AM · 3h 55m / days / stops / company · fare + Book */
  .cards-trip tbody tr { grid-template-columns: auto auto 1fr; grid-template-areas: "dep arr dur" "days days days" "stops stops stops" "co co tick"; }
  .cards-trip [data-c="co"] { margin-top: 6px; }
  .cards-trip [data-c="tick"] { margin-top: 6px; }
  /* departures: time + where to / days / stop / company + Book */
  .cards-dep tbody tr { grid-template-columns: auto 1fr auto; grid-template-areas: "dep to to" "days days days" "stop stop stop" "co co tick"; }
  .cards-dep [data-c="to"] { font-weight: 700; }
  .cards-dep [data-c="co"], .cards-dep [data-c="tick"] { margin-top: 6px; }
  /* destinations: city + fare and Book / buses a week · fastest / company */
  .cards-dest tbody tr { grid-template-columns: auto 1fr auto; grid-template-areas: "dest dest tick" "wk fast fast" "co co co"; }
  .cards-dest [data-c="dest"] { align-self: center; }
  .cards-dest [data-c="wk"] { white-space: nowrap; }
  .cards-dest [data-c="fast"]::before { content: "· " / ""; }
  .cards-dest [data-c="co"] { color: var(--muted); font-size: .92rem; }
  /* one-change connections: 6:00 AM → 9:15 PM · 15h 15m / Change in Atlanta · arrive 12:30 PM / Wait 1h 05m · leaves
     1:35 PM / days / companies / Leg 1 and Leg 2 buttons */
  .cards [data-c="hub"] { --a: hub; } .cards [data-c="wait"] { --a: wait; } .cards [data-c="leave"] { --a: leave; }
  .cards-conn tbody tr { grid-template-columns: auto auto 1fr; grid-template-areas: "dep arr dur" "hub hub hub" "wait leave leave" "days days days" "co co co" "tick tick tick"; }
  .cards-conn [data-c="hub"] { display: flex; flex-wrap: wrap; column-gap: .3em; }
  .cards-conn [data-c="hub"] br { display: none; }
  .cards-conn [data-c="hub"] .hub-city { order: -1; font-size: inherit; font-weight: 700; }
  .cards-conn [data-c="hub"] .time, .cards-conn [data-c="leave"] .time { font-family: inherit; font-size: inherit; font-weight: 400; }
  .cards-conn [data-c="wait"], .cards-conn [data-c="leave"] { color: var(--muted); font-size: .92rem; }
  .cards-conn [data-c="leave"]::before { content: "· " / ""; }
  .cards-conn [data-c="co"] { margin-top: 4px; }
  .cards-conn [data-c="tick"] { justify-self: start; margin-top: 6px; }
  .cards [data-c="name"] { --a: name; } .cards [data-c="a"] { --a: a; } .cards [data-c="b"] { --a: b; }
  .cards [data-c="city"] { --a: city; } .cards [data-c="addr"] { --a: addr; } .cards [data-c="fare"] { --a: fare; }
  .cards [data-c="a"], .cards [data-c="b"], .cards [data-c="addr"], .cards [data-c="city"] { color: var(--muted); font-size: .92rem; }
  .cards [data-c="a"] { white-space: nowrap; }
  .cards [data-c="b"]::before, .cards [data-c="addr"]:not(:empty)::before { content: "· " / ""; }
  /* state lists: city / departures a week · destinations / companies */
  .cards-cities tbody tr { grid-template-columns: auto 1fr; grid-template-areas: "name name" "a b" "co co"; }
  .cards-cities [data-c="co"], .cards-stops [data-c="co"] { color: var(--muted); font-size: .92rem; }
  /* stop lists: stop / city · address / departures a week · companies. A flex row, so each line runs the full width (an
     empty full-width ::before, ordered between them, breaks the line before the counts) */
  .cards-stops tbody tr { display: flex; flex-wrap: wrap; column-gap: 6px; }
  .cards-stops tbody tr::before { content: ""; flex-basis: 100%; height: 0; order: 2; }
  .cards-stops [data-c="name"] { flex-basis: 100%; order: 0; }
  .cards-stops [data-c="city"], .cards-stops [data-c="addr"] { order: 1; }
  .cards-stops [data-c="a"], .cards-stops [data-c="co"] { order: 3; }
  .cards-stops [data-c="co"]::before { content: "· " / ""; }
  /* carrier timetables: route + fare range / stops · departures this week / days */
  .cards-lines tbody tr { grid-template-columns: auto 1fr auto; grid-template-areas: "name name fare" "a b b" "days days days"; }
  .cards-lines [data-c="fare"] { justify-self: end; font-weight: 700; white-space: nowrap; }
  .cards-lines [data-c="fare"] > span[aria-hidden="true"] { display: none; }
}

/* carrier timetable grids on phones: a narrower stop column and wrapping trip names, so 2-3 trips fit beside the stops */
@media (max-width: 760px) {
  .grid .stopcell { min-width: 112px; max-width: 140px; padding-left: 24px; font-size: .88rem; }
  .grid .stopcell .dot { left: 9px; }
  .grid .stopcell .sc { display: none; }
  .grid th, .grid td { padding: 8px 8px; }
  .grid .tn { white-space: normal; min-width: 6.5em; max-width: 8.5em; font-size: .8rem; line-height: 1.25; }
}

/* cookie banner (2026-10-24): a bar along the bottom, not a modal; Accept and Reject look the same (equal choice) */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--card); color: var(--ink); border-top: 1px solid var(--rule);
  box-shadow: 0 -6px 24px rgba(14, 34, 56, .14); }
.consent[hidden] { display: none; }
.consent-in { max-width: 1120px; margin: 0 auto; padding: 14px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; justify-content: space-between; }
.consent h2 { font-size: 1rem; margin: 0 0 2px; }
.consent p { margin: 0; font-size: .92rem; max-width: 62ch; }
.consent-btns { display: flex; gap: 10px; }
.consent-btn { font: 700 .95rem var(--body); min-height: 40px; padding: 8px 20px; border-radius: 10px; border: 2px solid var(--ink); background: var(--ink); color: #FFFFFF; cursor: pointer; }
.consent-btn:hover { background: var(--ink-2); border-color: var(--ink-2); }
.link-btn { font: inherit; color: var(--on-ink); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
@media (max-width: 640px) {
  .consent-in { padding: 12px 16px; }
  .consent-btns { width: 100%; }
  .consent-btn { flex: 1; }
}

/* privacy policy (/privacy/): the storage table, and the draft marks shown while build.py PRIVACY_DRAFT is on */
.policy { width: 100%; border-collapse: collapse; font-size: .94rem; }
.policy th, .policy td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.policy thead th { background: var(--paper); }
.policy tbody tr:last-child th, .policy tbody tr:last-child td { border-bottom: 0; }
.prose h3 { margin: 1.2em 0 .3em; font-size: 1.05rem; }
.draft-note { border: 2px solid var(--ink); border-radius: var(--radius); padding: 12px 16px; background: var(--card); }
mark.todo { background: #FFF1B8; color: var(--ink); padding: 0 .2em; border-radius: 3px; }

/* map preview (2026-10-24): site.js draws the route, stops or network over the background in data-base (sketch_base.py);
   "Show interactive map" loads MapLibre and the tiles */
.stop-map .map-sketch { position: absolute; inset: 0; display: block; }
.sk-grid line { stroke: var(--rule); stroke-width: 1; opacity: .7; }
.sk-net { fill: none; stroke: var(--steel); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; opacity: .75; }
.sk-casing { fill: none; stroke: #FFFFFF; stroke-width: 7; stroke-linejoin: round; stroke-linecap: round; }
.sk-line { fill: none; stroke: var(--steel); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.sk-city { fill: #FFFFFF; stroke: var(--ink); stroke-width: 2; }
.sk-pin { fill: #FFFFFF; stroke: var(--steel); stroke-width: 3; }
.sk-here { fill: var(--ink); stroke: #FFFFFF; stroke-width: 4; }
.sk-label { font: 600 13px var(--body); fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.map-cta { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.map-cta .btn { pointer-events: auto; box-shadow: 0 2px 10px rgba(14, 34, 56, .18); background: var(--book); color: #fff; }   /* the Book blue (user's request, 2026-10-25): white on it is 6.0:1, and it's 6.0:1 against the white map */
.map-cta .btn:hover { background: var(--book-hv); color: #fff; }
.map-cta .btn[disabled] { opacity: .85; cursor: progress; }
.sk-city-name { font: 700 15px var(--head); }
/* background (data-base): water, land with state lines, the roads buses take, nearby towns */
.sk-water, .sk-lake { fill: #E4ECF5; }
.sk-land { fill: #FFFFFF; stroke: #C3CCD8; stroke-width: 1; stroke-dasharray: 5 3; stroke-linejoin: round; }
.sk-road { fill: none; stroke: #D3DAE3; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sk-town { font: 600 12px var(--body); fill: #5B6675; paint-order: stroke; stroke: #FFFFFF; stroke-width: 3px; stroke-linejoin: round; }
.sk-town-dot { fill: #5B6675; }
/* airport pages: the airfield (a pale band around each runway) and the runways at their real width (OurAirports, 2026-10-25) */
.sk-apron { fill: none; stroke: #EEF1F5; stroke-linecap: round; }
.sk-runway { fill: none; stroke: #A9B4C2; stroke-linecap: butt; }
.sk-campus { fill: #3E4A5A; stroke: #FFFFFF; stroke-width: 2; }   /* college pages: the campus point (IPEDS) */
.sk-airport { font: 700 13px var(--body); fill: #3E4A5A; paint-order: stroke; stroke: #FFFFFF; stroke-width: 4px; stroke-linejoin: round; }