/* Chicago Data Maps — the text pages (landing, about, terms, privacy, 404). A placeholder look, on purpose: the same
   tokens as the map (transit/theme.js) so the pages and the map agree; system fonts, nothing loaded from a third party
   (privacy page: no third-party host sees a visitor's request). The full copy and look pass is CS-71. Light and dark are
   both real: ?theme=light|dark wins, else the system setting. */
:root { --surface:#fcfcfb; --page:#f9f9f7; --ink:#0b0b0b; --ink2:#52514e; --muted:#898781; --grid:#e1e0d9; --axis:#c3c2b7; --border:rgba(11,11,11,.10); --sel:#eef4fc; --s1:#2a78d6; --s2:#eb6834; --critical:#d03b3b; --good:#006300; --fast:#d99a00; --slow:#3d2f8f; color-scheme:light }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface:#1a1a19; --page:#0d0d0d; --ink:#ffffff; --ink2:#c3c2b7; --muted:#898781; --grid:#2c2c2a; --axis:#383835; --border:rgba(255,255,255,.10); --sel:rgba(57,135,229,.18); --s1:#3987e5; --s2:#d95926; --critical:#d03b3b; --good:#0ca30c; --fast:#f2cf55; --slow:#6d5fd9; color-scheme:dark } }
:root[data-theme="dark"] { --surface:#1a1a19; --page:#0d0d0d; --ink:#ffffff; --ink2:#c3c2b7; --muted:#898781; --grid:#2c2c2a; --axis:#383835; --border:rgba(255,255,255,.10); --sel:rgba(57,135,229,.18); --s1:#3987e5; --s2:#d95926; --critical:#d03b3b; --good:#0ca30c; --fast:#f2cf55; --slow:#6d5fd9; color-scheme:dark }
* { box-sizing:border-box }
html, body { margin:0; min-height:100%; background:var(--page); color:var(--ink) }
body { font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif; display:flex; flex-direction:column; min-height:100vh }
a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--axis); text-underline-offset:2px } a:hover { text-decoration-color:var(--s1) }
header.top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; width:min(48rem, 100% - 2.5rem); margin:0 auto; padding:18px 0 0 }
header.top .brand { font-weight:600; text-decoration:none; font-size:15px } header.top .brand small { font-weight:400; color:var(--ink2) }
header.top nav { display:flex; gap:14px; font-size:13px; color:var(--ink2); flex-wrap:wrap } header.top nav a { color:var(--ink2) }
main { width:min(48rem, 100% - 2.5rem); margin:0 auto; flex:1; padding:clamp(1.5rem, 6vh, 4rem) 0 2rem }
h1 { font-size:clamp(1.7rem, 4.5vw, 2.4rem); line-height:1.15; margin:0 0 .6rem; letter-spacing:-.01em }
h2 { font-size:1.05rem; margin:2rem 0 .5rem; letter-spacing:.02em }
h3 { font-size:.95rem; margin:1.4rem 0 .4rem }
p, li { max-width:42rem } p { margin:.5rem 0 }
.lede { font-size:1.15rem; color:var(--ink2); margin:0 0 1.4rem }
ul { padding-left:1.2rem } li { margin:.3rem 0 }
blockquote { margin:.8rem 0; padding:.7rem 1rem; border-left:3px solid var(--axis); background:var(--surface); color:var(--ink) }
.cards { display:grid; gap:14px; margin-top:1.6rem }
.card { display:block; padding:16px 18px; border:1px solid var(--border); border-radius:8px; background:var(--surface); text-decoration:none; color:var(--ink) }
.card:hover { border-color:var(--s1) } .card b { display:block; font-size:1.15rem; margin-bottom:4px } .card span { color:var(--ink2); font-size:.95rem } .card .go { display:block; margin-top:8px; color:var(--s1); font-size:.9rem }
.card .swatch { display:inline-block; width:56px; height:6px; border-radius:3px; background:linear-gradient(90deg, var(--slow), var(--muted) 50%, var(--fast)); vertical-align:middle; margin-right:8px }
.small { font-size:13px; color:var(--ink2) }
.dated { margin-top:2.5rem; color:var(--muted); font-size:13px; border-top:1px solid var(--grid); padding-top:.8rem }
mark.todo { background:color-mix(in srgb, var(--s2) 28%, transparent); color:var(--ink); padding:0 4px; border-radius:3px; font-weight:600 }   /* a placeholder still open — resolved on launch day, never silently */
footer.site { width:min(48rem, 100% - 2.5rem); margin:0 auto; padding:1.2rem 0 2rem; border-top:1px solid var(--grid); font-size:13px; color:var(--ink2); line-height:1.5 }
footer.site p { margin:.35rem 0 } footer.site .links { display:flex; flex-wrap:wrap; gap:6px 14px } footer.site a { color:var(--ink2) }
footer.site .maker { color:var(--ink); font-weight:500 }
code { font:13px/1.4 ui-monospace,Menlo,monospace; background:var(--surface); border:1px solid var(--border); border-radius:3px; padding:0 4px }
button.link { font:inherit; font-size:13px; border:0; padding:0; background:none; color:var(--ink2); text-decoration:underline; text-decoration-color:var(--axis); cursor:pointer }