:root { --ink:#182019; --paper:#f3eee2; --paper-deep:#e6ddcc; --copper:#9b5939; --copper-light:#bb8056; --muted:#5c625a; --hairline:rgba(24,32,25,.28); --serif:Georgia,"Times New Roman",serif; --sans:Inter,"Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
html { background:var(--paper); }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.masthead { min-height:82px; padding:0 4.5vw; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--hairline); }
.wordmark { display:inline-flex; gap:.7rem; align-items:center; font-size:.98rem; font-weight:700; letter-spacing:.14em; text-decoration:none; }
.mark { position:relative; display:inline-block; width:29px; height:12px; background:radial-gradient(circle at 4px 6px,var(--copper-light) 0 3.5px,transparent 4px),radial-gradient(circle at 25px 6px,var(--paper) 0 3px,var(--ink) 3.5px 4.5px,transparent 5px); }
.mark::after { content:""; position:absolute; inset:5px 8px auto; border-top:1px dashed var(--copper); }
.masthead > p,.eyebrow,.route-number { margin:0; color:var(--copper); font-size:.76rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.masthead > p { color:var(--muted); }
.opening { position:relative; min-height:56vh; padding:clamp(5.5rem,12vw,10rem) 16vw 6rem; display:flex; flex-direction:column; justify-content:center; }
.opening::before { content:""; position:absolute; top:0; bottom:0; left:9.5vw; border-left:1px solid var(--hairline); }
.opening > * { position:relative; }
.opening h1,.route h2 { margin:1.3rem 0 0; font-family:var(--serif); font-weight:400; letter-spacing:-.04em; line-height:.98; }
.opening h1 { max-width:11ch; font-size:clamp(3.15rem,6.8vw,7rem); }
.lead { max-width:49ch; margin:2rem 0 0; font-size:clamp(1.04rem,1.3vw,1.25rem); color:var(--muted); }
.routes { border-top:1px solid var(--hairline); }
.route { display:grid; grid-template-columns:minmax(5rem,16vw) minmax(0,1fr); gap:1rem; padding:clamp(3.5rem,7vw,6.75rem) 16vw; border-bottom:1px solid var(--hairline); }
.route-wml { background:var(--ink); color:var(--paper); }
.route-wml .eyebrow,.route-wml .route-number { color:var(--copper-light); }
.route h2 { font-size:clamp(2.5rem,5vw,5rem); }
.route > div > p:not(.eyebrow) { max-width:48ch; margin:1.5rem 0 0; color:var(--muted); }
.route-wml > div > p:not(.eyebrow) { color:rgba(243,238,226,.72); }
.route a { display:inline-flex; justify-content:space-between; gap:2.5rem; min-width:min(100%,290px); margin-top:2.6rem; padding:.75rem 0; border-top:1px solid currentColor; border-bottom:1px solid currentColor; text-decoration:none; font-weight:650; }
.route a:focus-visible,.wordmark:focus-visible { outline:3px solid var(--copper-light); outline-offset:5px; }
.route-dv { background:var(--paper-deep); }
footer { padding:4rem 16vw 3.2rem; display:flex; justify-content:space-between; gap:3rem; color:var(--muted); font-size:.92rem; }
footer p { margin:0; max-width:55ch; }
footer p:last-child { color:var(--ink); white-space:nowrap; }
@media (max-width:700px) { .masthead { min-height:70px; padding:0 1.25rem; } .masthead > p { display:none; } .opening { min-height:auto; padding:6.5rem 1.6rem 4.5rem 3.8rem; } .opening::before { left:1.55rem; } .opening h1 { font-size:clamp(2.85rem,13vw,4.2rem); } .lead { margin-top:1.6rem; } .route { grid-template-columns:1fr; gap:1.6rem; padding:3.7rem 1.6rem 3.8rem; } footer { flex-direction:column; gap:1.4rem; padding:3rem 1.6rem; } }