:root { --ink:#10201f; --paper:#f3f0e6; --lime:#d8ff50; --line:rgba(16,32,31,.22); --muted:#61706b; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--paper); font-family:"DM Mono", monospace; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.13; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E"); }
main { width:min(1160px, calc(100% - 48px)); min-height:100svh; margin:auto; display:flex; flex-direction:column; padding:28px 0 24px; }
header, footer, .route-top { display:flex; align-items:center; justify-content:space-between; }
header { padding-bottom:16px; border-bottom:1px solid var(--line); }
.brand { color:inherit; font-size:16px; font-weight:500; letter-spacing:.17em; text-decoration:none; }
.brand span { color:#5a7c00; }
.state, footer { font-size:10px; letter-spacing:.1em; }
.state i { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#6c9800; box-shadow:0 0 0 4px rgba(108,152,0,.13); }
.hero { max-width:800px; padding:clamp(86px, 15vh, 170px) 0 66px; }
.eyebrow { margin:0 0 20px; color:#587100; font-size:11px; letter-spacing:.08em; }
h1 { max-width:780px; margin:0; font:600 clamp(54px, 9vw, 116px)/.91 "Playfair Display", Georgia, serif; letter-spacing:-.06em; }
h1 em { color:#527000; font-style:italic; }
.lede { width:min(535px, 100%); margin:32px 0 0; color:var(--muted); font-size:13px; line-height:1.75; }
.routes { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--ink); }
.route { min-height:260px; padding:20px; display:flex; flex-direction:column; }
.route + .route { border-left:1px solid var(--ink); }
.route-b { background:var(--ink); color:var(--paper); }
.route-top { color:var(--muted); font-size:10px; letter-spacing:.06em; }
.route-b .route-top { color:#afbbb5; }
h2 { margin:auto 0 3px; font:600 clamp(30px, 4vw, 46px)/1 "Playfair Display", Georgia, serif; letter-spacing:-.045em; }
.route p { margin:0; color:var(--muted); font-size:11px; }
.route-b p { color:#afbbb5; }
.connect { display:flex; justify-content:space-between; align-items:center; margin-top:30px; padding:13px 15px; color:inherit; border:1px solid currentColor; font-size:12px; text-decoration:none; transition:background .2s, color .2s, transform .2s; }
.connect b { font-size:18px; font-weight:400; line-height:0; }
.route-a .connect:hover { color:var(--ink); background:var(--lime); transform:translate(3px,-3px); }
.route-b .connect:hover { color:var(--ink); background:var(--lime); transform:translate(3px,-3px); }
footer { margin-top:auto; padding-top:22px; color:var(--muted); }
@media (max-width:620px) { main { width:min(100% - 28px, 1160px); } .hero { padding:80px 0 48px; } .routes { grid-template-columns:1fr; } .route + .route { border-top:1px solid var(--ink); border-left:0; } .route { min-height:230px; } footer { gap:14px; line-height:1.5; } }