:root { --navy:#002b67; --yellow:#ffcc00; --ink:#14213d; --paper:#f5f7fa; }
* { box-sizing:border-box; }
body { margin:0; font-family:Arial,Helvetica,sans-serif; color:var(--ink); background:var(--paper); }

.back-fab {
  position: fixed; left: 14px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 1000;
  display: inline-flex; align-items: center; gap: 7px; padding: 11px 18px 11px 14px;
  background: #10233F; color: #FFC72C; border: 2px solid #FFC72C; border-radius: 999px;
  font-size: 15px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.45);
}
.back-fab:active { transform: translateY(1px); }

.site-header { display:flex; justify-content:space-between; align-items:center; gap:2rem; padding:1.5rem clamp(1rem,5vw,4rem); background:var(--navy); color:white; border-bottom:10px solid var(--yellow); }
.site-header h1 { margin:.2rem 0; font-size:clamp(1.35rem,3vw,2.25rem); text-transform:uppercase; }
.site-header p { margin:.2rem 0; }
.eyebrow { color:var(--yellow); font-weight:800; letter-spacing:.06em; font-size:clamp(1.4rem,3vw,2.4rem); }

main { width:min(1500px,100%); margin:auto; padding-bottom: 5rem; }
.hero { padding:2rem clamp(1rem,4vw,3rem); background:linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)); }
.hero h2 { text-align:center; margin:.2rem 0; color:var(--navy); font-size:clamp(2rem,5vw,3.2rem); }
.hero>p { text-align:center; margin:.5rem 0 2rem; color:#5f6672; }
.section-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.route-card { background:white; border-left:10px solid var(--navy); border-radius:14px; padding:1.2rem; box-shadow:0 8px 28px rgba(0,43,103,.09); }
.route-card h3 { color:var(--navy); text-transform:uppercase; margin:0 0 .45rem; font-size:1.4rem; }
.route-card p { min-height:2.5rem; color:#5f6672; }
.actions { display:flex; flex-wrap:wrap; gap:.7rem; }
.btn { appearance:none; border:0; border-radius:999px; padding:.7rem 1rem; font-weight:800; cursor:pointer; text-decoration:none; background:var(--yellow); color:var(--navy); display:inline-block; font-size:.95rem; }
.btn.secondary { background:var(--navy); color:white; }
.btn:hover { filter:brightness(.94); }

.datasection { padding: 1rem clamp(1rem,4vw,3rem) 2.5rem; scroll-margin-top: 1rem; }
.datasection h2 { color: var(--navy); border-bottom: 4px solid var(--yellow); padding-bottom: .4rem; }
.datasection h3 { color: var(--navy); margin-top: 2rem; }
.note { color:#5f6672; font-size:.9rem; margin:0 0 1rem; }

.daycard { background:white; border-radius:12px; box-shadow:0 6px 20px rgba(0,43,103,.08); margin-bottom:1.5rem; overflow:hidden; }
.daycard h4 { margin:0; padding:.8rem 1rem; background:var(--navy); color:white; font-size:1rem; }
.daycard .note { margin: .6rem 1rem 0; }

pre {
  margin: 0; padding: 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
  font-family: "SF Mono", "Courier New", monospace; font-size: 11px; line-height: 1.5;
  white-space: pre; background: #fbfcfe; color: var(--ink);
}
@media (max-width: 700px) { pre { font-size: 10px; } }

.page-img, .roster-img {
  display:block; width:100%; height:auto; background:#e9edf2;
}
.img-link { display:block; position: relative; }
.img-link::after {
  content: "Tap to zoom in";
  position: absolute; right: .6rem; bottom: .6rem;
  background: rgba(0,43,103,.85); color: #fff; font-size: .75rem; font-weight: 700;
  padding: .3rem .6rem; border-radius: 999px; pointer-events: none;
}
.daycard { overflow: hidden; }

.download { appearance:none; border:0; border-radius:999px; padding:.75rem 1rem; font-weight:800; cursor:pointer; text-decoration:none; background:var(--navy); color:white; display:inline-block; }