/* Shared look for the splash and the road pages. The peristyle (human.html) keeps its own inline styles. */
:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#0d211a;color:#f3f5e9}
*{box-sizing:border-box}
body{margin:0}
header,main,footer{max-width:900px;margin:auto;padding:1rem}
header{border-bottom:2px solid #d87926}
h1{margin:.2rem 0}
small,.note{color:#b3c9b7}
a{color:#ffd08e}
a:focus-visible{outline:3px solid #f7a94a;outline-offset:3px}
.panel{background:#163528;border:1px solid #5e836d;border-radius:1rem;padding:1rem;margin:1rem 0}
.roads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1rem 0;padding:0;list-style:none}
.road{display:block;height:100%;text-decoration:none;color:inherit;background:#163528;border:1px solid #5e836d;border-radius:1rem;padding:1.1rem}
.road:hover{background:#1d4535;border-color:#d87926}
.road h2{margin:.1rem 0 .5rem;color:#ffd08e;font-size:1.35rem}
.road p{margin:.3rem 0}
.road .state{display:inline-block;margin-top:.6rem;font-size:.85rem;border:1px solid #5e836d;border-radius:999px;padding:.15rem .6rem;color:#b3c9b7}
.road .state.open{border-color:#a8e1bb;color:#a8e1bb}
footer{font-size:.88rem}
@media(max-width:620px){.roads{grid-template-columns:1fr}header,main,footer{padding:.8rem}}