/* Transit Road site: highway-sign green, asphalt, lane-line yellow, sodium streetlight orange */
:root{
  --asphalt:#2a2d31; --asphalt-2:#34383d; --sign:#1f6b45; --sign-dark:#17543a; --lane:#f2c230; --sodium:#f2a541; --paper:#f4f4ef; --muted:#b9bfc6; --danger:#e5484d;
  --display:'Anton',Impact,'Arial Narrow',sans-serif; --body:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--asphalt);color:var(--paper);font:400 19px/1.5 var(--body)}
body{margin:0;min-height:100vh;background:
  linear-gradient(90deg,transparent calc(50% - 3px),var(--lane) calc(50% - 3px),var(--lane) calc(50% + 3px),transparent calc(50% + 3px)) center top/100% 120px repeat-y,
  radial-gradient(120% 60% at 50% 0%,#3a3f45 0%,var(--asphalt) 70%);
  background-size:12px 120px,auto;background-repeat:no-repeat,no-repeat}
a{color:var(--sodium)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--lane);outline-offset:2px}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
header.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0}
.brand{display:flex;align-items:center;gap:10px;color:var(--paper);text-decoration:none;font:400 22px/1 var(--display);letter-spacing:.02em}
.shield{width:38px;height:38px;flex:none;display:grid;place-items:center;background:#fff;color:#111;border-radius:8px 8px 18px 18px;border:2px solid #111;font:400 17px/1 var(--display)}
.who{font-size:17px;color:var(--muted);text-align:right}
.who b{color:var(--paper)}
/* hero: a highway guide sign */
.guide{margin:26px 0 8px;background:var(--sign);border:6px solid #fff;border-radius:18px;box-shadow:0 0 0 6px var(--sign),0 18px 40px rgba(0,0,0,.45);padding:34px 34px 30px;position:relative}
.guide h1{margin:0;font:400 clamp(54px,11vw,118px)/.92 var(--display);letter-spacing:.01em}
.guide .place{margin:10px 0 0;font:600 clamp(22px,3.4vw,32px)/1.2 var(--body)}
.guide .exits{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;font-size:20px}
.guide .exits span{display:flex;align-items:center;gap:8px}
.guide .exits i{font-style:normal;background:#fff;color:var(--sign);font:400 14px/1 var(--display);padding:5px 7px;border-radius:4px}
.posts{display:flex;justify-content:space-around;height:46px;margin:0 18%}
.posts div{width:14px;background:linear-gradient(90deg,#6c7178,#9aa0a7,#6c7178)}
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:18px 0 6px}
.btn{appearance:none;border:0;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:12px;font:400 22px/1 var(--display);letter-spacing:.03em}
.btn.go{background:var(--sodium);color:#1c1d20}
.btn.go:hover{background:#ffb95c}
.btn.plain{background:var(--asphalt-2);color:var(--paper);border:2px solid #4a4f56}
.btn.plain:hover{border-color:var(--muted)}
.btn.danger{background:transparent;color:var(--danger);border:2px solid var(--danger)}
.btn:disabled{opacity:.5;cursor:default}
.note{color:var(--muted);font-size:17px}
section{padding:34px 0 8px}
section h2{margin:0 0 10px;font:400 34px/1.1 var(--display);letter-spacing:.01em}
section p{margin:0 0 12px;max-width:40em}
.cast{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:16px}
.cast article{border-left:6px solid var(--c);padding:4px 0 4px 16px}
.cast h3{margin:0;font:400 28px/1.1 var(--display)}
.cast p{margin:4px 0 0;color:#dfe3e7}
.mile{display:flex;gap:14px;align-items:flex-start;margin:12px 0}
.mile .mm{flex:none;width:44px;height:58px;background:var(--sign);border:2px solid #fff;border-radius:6px;display:grid;place-items:center;font:400 22px/1 var(--display)}
footer{padding:40px 0 30px;color:var(--muted);font-size:16px}
/* account page */
.panel{background:var(--asphalt-2);border:2px solid #444a51;border-radius:16px;padding:24px;margin:22px 0}
.panel h2{margin:0 0 12px;font:400 30px/1.1 var(--display)}
.tabs{display:flex;gap:8px;margin-bottom:16px}
.tabs button{flex:1;min-height:48px;border-radius:10px;border:2px solid #4a4f56;background:transparent;color:var(--paper);font:400 20px/1 var(--display);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--sign);border-color:#fff}
form{display:grid;gap:12px;max-width:420px}
label{display:grid;gap:4px;font-weight:600;font-size:18px}
input{font:400 19px/1.2 var(--body);padding:12px 14px;border-radius:10px;border:2px solid #4a4f56;background:#1f2125;color:var(--paper)}
input:focus{border-color:var(--sodium);outline:none}
.hint{font-weight:400;color:var(--muted);font-size:15px}
.msg{min-height:1.4em;font-size:17px}
.msg.err{color:#ff8c8f}
.msg.ok{color:#8fe0a8}
dl.facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0 0 16px}
dl.facts dt{color:var(--muted)}
dl.facts dd{margin:0}
details{margin-top:14px}
summary{cursor:pointer;font-weight:700;font-size:19px;padding:6px 0}
@media (max-width:560px){ .guide{padding:24px 20px} .posts{margin:0 12%} header.top{flex-wrap:wrap} .who{text-align:left} }
@media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important} }