/* Shared look for asaaab.com side pages: red banner strip, a Caltrans-style sign, and a white GPS card. */
:root{
  color-scheme:light;
  --page:#e6eef4; --land:#eef0e3; --park:#cfe4b2; --road:#f5c242; --road-edge:#cf8e17;
  --route:#d930c9; --sign:#0b6b3c; --warn:#f7d117; --ink:#16191c; --muted:#5b6268; --card:#fff;
  --guide:#3f9a2f; --yt:#e1261c;
  --hwy:"Overpass","Arial Narrow",system-ui,sans-serif;
  --ui:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--page); color:var(--ink); font-family:var(--ui); font-size:16px; line-height:1.55;
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-bottom:calc(40px + env(safe-area-inset-bottom, 0px)); min-height:100svh}
.hero-strip{
  height:clamp(54px, 11vw, 150px);
  margin:0 calc(-1 * max(16px, env(safe-area-inset-right, 0px))) 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  background:#dc0500 url(/banner-fill.png) repeat-x left top / auto 100%;
  display:flex; justify-content:center;
}
.hero-strip .inner{width:100%; max-width:1012px; height:100%; padding-inline:16px}
main{max-width:760px; margin:0 auto}
.sign{
  margin:28px auto 18px; width:fit-content; max-width:100%;
  background:var(--sign); color:#fff; border-radius:12px; padding:5px; box-shadow:0 4px 0 #07462a, 0 14px 24px -14px rgba(0,0,0,.5);
}
.sign > div{border:3px solid #fff; border-radius:8px; padding:10px 22px 8px; text-align:center}
.sign small{display:block; font-family:var(--hwy); font-weight:800; font-size:12px; letter-spacing:.2em; opacity:.9}
.sign h1{margin:2px 0 0; font-family:var(--hwy); font-weight:900; font-size:clamp(26px, 6vw, 40px); line-height:1.05; letter-spacing:.01em}
.sign .arrow{font-size:.8em; margin-left:.25em}
.card{background:var(--card); border:2px solid var(--ink); border-radius:18px; box-shadow:0 5px 0 var(--ink); padding:22px clamp(18px, 4vw, 32px)}
.card + .card{margin-top:18px}
.card h2{font-family:var(--hwy); font-weight:900; font-size:20px; margin:22px 0 6px; display:flex; align-items:center; gap:10px}
.card h2:first-child{margin-top:0}
.card h2 .n{flex:none; width:28px; height:28px; border-radius:50%; background:var(--route); color:#fff; display:grid; place-items:center; font-size:14px}
.card p,.card li{color:#2a2f33}
.card p{margin:0 0 10px}
.card ul{margin:0 0 10px; padding-left:20px}
.card li{margin:4px 0}
.card a{color:#1f63b8; font-weight:800}
.lede{font-size:17px; font-weight:700; color:var(--ink)!important}
.meta{font-family:var(--hwy); font-weight:800; font-size:12px; letter-spacing:.12em; color:var(--muted); margin-top:16px}
.cta{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; border-radius:12px; border:2px solid var(--ink); box-shadow:0 3px 0 var(--ink);
  background:var(--route); color:#fff!important; text-decoration:none; font-family:var(--hwy); font-weight:900; font-size:16px}
.cta.alt{background:#fff; color:var(--ink)!important}
.cta:hover{transform:translateY(-1px)}
.ctas{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.two{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:6px 0 12px}
.two > div{border:2px solid var(--ink); border-radius:14px; padding:14px 16px}
.two .ok{background:#e3f1d8} .two .ask{background:#fff4c7}
.two h3{margin:0 0 6px; font-family:var(--hwy); font-weight:900; font-size:15px; letter-spacing:.06em}
.two ul{margin:0; padding-left:18px}
@media (max-width:600px){ .two{grid-template-columns:1fr} }
.road{height:26px; margin:34px calc(-1 * max(16px, env(safe-area-inset-right, 0px))) 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  background:linear-gradient(var(--road-edge) 0 3px, var(--road) 3px 23px, var(--road-edge) 23px);
  position:relative; overflow:hidden}
.road::after{content:""; position:absolute; left:0; right:0; top:12px; height:2px;
  background:repeating-linear-gradient(90deg, #fff 0 22px, transparent 22px 44px)}
.foot{text-align:center; font-size:13px; font-weight:700; color:var(--muted); margin-top:14px}
.foot a{color:inherit}