:root { color-scheme: light; --bg:#f8f4f0; --surface:#fffdfb; --text:#2f211b; --muted:#725f55; --line:#e4d7cd; --accent:#944304; --accent-text:#fff; --shadow:0 10px 28px rgb(74 38 19 / .08); }
:root[data-theme="dark"] { color-scheme: dark; --bg:#211714; --surface:#30211c; --text:#fff4ed; --muted:#d9c1b2; --line:#5c4033; --accent:#efa16b; --accent-text:#351805; --shadow:0 10px 28px rgb(0 0 0 / .26); }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--text); font:1rem/1.5 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
main { max-width:920px; margin:auto; padding:3rem 1.25rem 2rem; } header { display:flex; justify-content:space-between; gap:1.5rem; align-items:start; border-bottom:1px solid var(--line); padding-bottom:2rem; } .header-controls { display:flex; gap:.5rem; flex-wrap:wrap; justify-content:end; }
h1 { font-size:clamp(2.15rem,6vw,3.5rem); line-height:1; margin:0; letter-spacing:-.045em; } h2 { font-size:1.2rem; margin:0 0 1rem; } .intro,.note { color:var(--muted); margin:.8rem 0 0; }
.location { background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:1.25rem; margin:2rem 0; } form { display:grid; gap:.8rem; grid-template-columns:1fr 1fr auto auto; align-items:end; } label { display:grid; gap:.3rem; color:var(--muted); font-size:.9rem; } input { width:100%; min-width:0; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); font:inherit; padding:.65rem .7rem; }
button { border:0; border-radius:8px; background:var(--accent); color:var(--accent-text); padding:.68rem .9rem; font:600 .95rem/1.25 inherit; cursor:pointer; min-height:2.75rem; } button.secondary,#theme,#units { background:transparent; color:var(--text); border:1px solid var(--line); } button:disabled { opacity:.6; cursor:wait; }
.results-heading { display:flex; justify-content:space-between; gap:1rem; align-items:baseline; margin:2rem 0 1rem; } .results-heading h2 { margin:0; } #result-status { color:var(--muted); font-size:.88rem; margin:0; text-align:right; } .empty { color:var(--muted); border:1px dashed var(--line); border-radius:12px; padding:1.25rem; }
.lookup-details { border:1px solid var(--line); border-radius:12px; color:var(--muted); font-size:.88rem; margin:0 0 1rem; padding:.8rem 1rem; } .lookup-details summary { color:var(--text); cursor:pointer; font-weight:650; } .lookup-details dl { display:grid; gap:.35rem .8rem; grid-template-columns:max-content 1fr; margin:.85rem 0 0; } .lookup-details dt { font-weight:650; } .lookup-details dd { margin:0; }
ol { list-style:none; margin:0; padding:0; display:grid; gap:.7rem; } article { display:grid; grid-template-columns:7rem 1fr auto; gap:1rem; align-items:start; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:1rem; } .reference { color:var(--accent); font-weight:750; } h3 { margin:0; font-size:1rem; line-height:1.3; } .park p,.time span { color:var(--muted); font-size:.86rem; margin:.25rem 0 0; } .time { text-align:right; display:grid; gap:.15rem; } .time strong { font-size:.9rem; font-variant-numeric:tabular-nums; }
footer { max-width:920px; margin:0 auto; padding:1.5rem 1.25rem 3rem; color:var(--muted); font-size:.85rem; } footer div + div { margin-top:.35rem; } footer a { color:var(--accent); }
@media (max-width:720px) { main{padding-top:1.5rem} header{padding-bottom:1.5rem} form{grid-template-columns:1fr 1fr} form button{grid-column:span 2} article{grid-template-columns:1fr;gap:.35rem}.time{text-align:left;margin-top:.25rem}.results-heading{align-items:start;flex-direction:column;gap:.25rem}#result-status{text-align:left} }