:root { --ink: #18211d; --forest: #183c2d; --moss: #79945d; --signal: #d45132; --mist: #edf0eb; }
body { color: var(--ink); background: #f7f8f5; }
h1, h2, h3, p, a, dt, dd, time, span { letter-spacing: 0; }
h1, h2, h3 { font-weight: 700; }
.eyebrow, .route-number { color: var(--signal); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .16rem; }
.hero { min-height: 92vh; color: #fff; background: #111915; }
.hero:after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(10,17,13,.82) 0%, rgba(10,17,13,.45) 38%, rgba(10,17,13,.05) 72%); z-index: 1; }
.hero .content { position: relative; z-index: 2; background: transparent !important; max-width: 44rem; }
.hero .image { position: absolute; inset: 0; width: 100%; }
.hero .image img { object-position: center; }
.hero h1 { font-size: clamp(3.2rem, 7vw, 6.8rem); line-height: .94; margin: .25rem 0 1.25rem; }
.hero p.major { max-width: 30rem; font-size: 1.3rem; }
.button.primary { background: var(--signal); border-color: var(--signal); }
.intro { padding: 5rem 1.5rem; background: var(--mist); }
.intro h2 { font-size: 2.4rem; }
.spotlight .content { padding: 5rem 6rem; }
.spotlight h2 { font-size: 2.7rem; }
.route-facts { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.2rem; margin: 2rem 0 0; }
.route-facts dt { color: #6c756f; }
.route-facts dd { margin: 0; font-weight: 700; }
.dark-section { color: #f4f6f2; background: var(--forest); }
.dark-section .route-facts dt { color: #b9c5bd; }
.prep { padding: 5rem 0 3rem; }
.prep .icon { color: var(--signal); }
.calendar { background: #111915; color: #eef2ed; padding: 5rem 1rem; }
.event-list { border-top: 1px solid rgba(255,255,255,.2); text-align: left; }
.event-list article { display: grid; grid-template-columns: 7rem 1fr auto; gap: 2rem; align-items: center; padding: 1.6rem 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.event-list time { font-weight: 800; color: #a9c28e; }
.event-list h3, .event-list p { margin: 0; }
.event-list span { border: 1px solid #718079; padding: .3rem .7rem; font-size: .72rem; text-transform: uppercase; }
.closing { padding: 5rem 1rem; background: #dfe5da; }
footer { background: #111915; color: #9ba69f; }
@media screen and (max-width: 980px) { .hero { min-height: 80vh; } .hero .content { padding: 5rem 2rem; } .spotlight .content { padding: 4rem 2.2rem; } }
@media screen and (max-width: 736px) { .hero { min-height: 78vh; } .hero:after { background: rgba(10,17,13,.58); } .hero h1 { font-size: 3.5rem; } .hero .image img { object-position: 64% center; } .spotlight h2, .intro h2 { font-size: 2rem; } .event-list article { grid-template-columns: 1fr auto; gap: .5rem 1rem; } .event-list article div { grid-column: 1 / -1; grid-row: 2; } }