@font-face{font-family:"Overpass";src:url(fonts/overpass.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Overpass Mono";src:url(fonts/overpass-mono.woff2) format("woff2");font-weight:500;font-display:swap}
:root{--green:#116b46;--white:#f5f8f0;--yellow:#f2b705;--asphalt:#2b2d2a;--ink:#1a1a17;--steel:#8b928c}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--asphalt);color:var(--white);font:400 18px/1.5 "Overpass",system-ui,sans-serif}
a{color:inherit}
code,pre{font-family:"Overpass Mono",ui-monospace,monospace}
/* retroreflective microprism sheeting: faint hex grid */
.sign{position:relative;background-color:var(--green);border-radius:18px;padding:28px 32px;
  box-shadow:inset 0 0 0 8px var(--green),inset 0 0 0 13px var(--white);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='24'%3E%3Cpath d='M7 0l7 4v8l-7 4-7-4V4zM7 16v8' fill='none' stroke='%23ffffff' stroke-opacity='.05'/%3E%3C/svg%3E")}
.bolt{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--steel)}
.b1{top:22px;left:22px}.b2{top:22px;right:22px}.b3{bottom:22px;left:22px}.b4{bottom:22px;right:22px}
/* gantry hero */
.gantry{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;padding:0 3vw 24px;background:var(--asphalt);overflow:hidden;position:relative}
.truss{width:110vw;height:34px;margin-bottom:14px;background:
  repeating-linear-gradient(60deg,transparent 0 14px,var(--steel) 14px 18px),repeating-linear-gradient(-60deg,transparent 0 14px,var(--steel) 14px 18px);
  border-top:5px solid var(--steel);border-bottom:5px solid var(--steel)}
.guide{width:min(1100px,100%);padding:48px 56px 0;transform-origin:50% 0}
.legend{display:flex;gap:32px;align-items:center}
.shield{width:clamp(72px,11vw,128px);height:auto;flex:none}
.kicker{margin:0;font-weight:800;letter-spacing:.06em;font-size:clamp(18px,2.2vw,26px)}
h1{margin:0;line-height:.95;font-weight:900;letter-spacing:-.01em}
.dest{display:block;font-size:clamp(56px,11vw,150px)}
.thru{display:inline-block;font-size:clamp(22px,3vw,40px);font-weight:700;margin-top:6px}
.sub{max-width:40em;font-size:clamp(16px,1.6vw,20px);margin:18px 0 0}
.legend{padding-bottom:34px}
.exitonly{display:flex;justify-content:space-between;align-items:center;margin:0 -56px;padding:14px 56px;background:var(--yellow);color:var(--ink);
  border-radius:0 0 18px 18px;font-weight:800;font-size:clamp(14px,2vw,24px);letter-spacing:.04em;box-shadow:inset 0 -5px 0 var(--white),inset 5px 0 0 var(--white),inset -5px 0 0 var(--white)}
.exitonly b{font-weight:900;border:3px solid var(--ink);padding:2px 12px}
/* road */
.road{perspective:420px;width:min(900px,100%);height:min(32vh,260px);margin-top:6px}
.lanes{display:flex;height:100%;transform:rotateX(52deg);transform-origin:50% 100%;
  background:linear-gradient(var(--white),var(--white)) left/6px 100% no-repeat,linear-gradient(var(--white),var(--white)) right/6px 100% no-repeat}
.lane{flex:1;display:grid;place-items:center;position:relative}
.lane+.lane::before{content:"";position:absolute;left:-2px;top:0;bottom:0;width:4px;
  background:repeating-linear-gradient(var(--white) 0 26px,transparent 26px 52px);animation:dash 0.9s linear infinite}
.lane.l20{background:repeating-linear-gradient(90deg,transparent 0 12px,rgba(242,183,5,.12) 12px 14px)}
.lane svg{width:34px;height:70px;fill:none;stroke:var(--white);stroke-width:5;stroke-linecap:square}
.l20 svg{stroke:var(--yellow)}
@keyframes dash{to{background-position:0 52px}}
.vms{margin-top:10px;background:#111310;border:6px solid var(--steel);border-radius:4px;padding:10px 20px;min-width:min(560px,92vw);perspective:600px}
.vms-face{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;color:var(--yellow);font:500 clamp(14px,2vw,20px)/1.3 "Overpass Mono",monospace;letter-spacing:.06em;
  background-image:radial-gradient(rgba(0,0,0,.55) 1px,transparent 1.4px);background-size:4px 4px;transform-origin:50% 50%}
.vms-face.flip{animation:flip .5s ease-in-out}
@keyframes flip{50%{transform:rotateX(90deg)}}
/* intro choreography */
.guide{animation:approach 1.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes approach{from{transform:scale(.55) translateY(40px)}to{transform:none}}
.exitonly{animation:laneends 1s 1.6s ease-in both}
@keyframes laneends{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.l20{animation:merge 1.2s 2.2s ease-in-out both}
@keyframes merge{from{flex-grow:1;opacity:1}to{flex-grow:.25;opacity:.35}}
/* highway */
.highway{position:relative;max-width:1100px;margin:0 auto;padding:40px 4vw 80px}
.centerline{position:absolute;left:50%;top:0;bottom:0;width:8px;margin-left:-4px;
  background:repeating-linear-gradient(var(--yellow) 0 60px,transparent 60px 120px);background-position:0 var(--drive,0px)}
.roadside{position:relative;display:flex;flex-direction:column;width:calc(50% - 40px);margin:0 0 64px}
.roadside.right{margin-left:auto}
.roadside .sign{z-index:1}
.post{width:12px;height:60px;background:var(--steel);margin:0 auto}
.post.twin{width:auto;height:60px;background:linear-gradient(90deg,transparent 22%,var(--steel) 22% calc(22% + 12px),transparent 0 calc(78% - 12px),var(--steel) 0 78%,transparent 0)}
.exitno{display:inline-block;margin:0 0 6px;background:var(--white);color:var(--green);font-weight:900;padding:2px 12px;border-radius:6px;font-size:15px;letter-spacing:.06em}
h2{margin:0 0 12px;font-size:clamp(30px,4vw,48px);font-weight:900;line-height:1}
.sign pre{margin:0 0 14px;padding:14px;background:var(--asphalt);color:var(--white);border-radius:6px;overflow-x:auto;font-size:13px;line-height:1.55}
.sign p{margin:0}
.sign p code{background:rgba(0,0,0,.25);padding:0 4px;border-radius:3px;font-size:.9em}
.distance{position:relative;display:flex;flex-direction:column}
.wide ul{list-style:none;margin:0;padding:8px 20px;display:flex;flex-direction:column;gap:6px}
.wide li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:2px solid rgba(245,248,240,.25);padding:8px 0;flex-wrap:wrap}
.wide li:last-child{border:0}
.wide a{font-weight:900;font-size:clamp(26px,3.4vw,40px);text-decoration:none}
.wide a:hover,.wide a:focus-visible{text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:6px}
.wide span{font-size:16px;opacity:.85}
.reveal{opacity:0;transform:translateY(60px) scale(.92);transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
footer{text-align:center;padding:24px;font-size:14px;color:var(--steel)}
@media (max-width:760px){
  .guide{padding:40px 26px 0}.exitonly{margin:0 -26px;padding:12px 26px}
  .legend{flex-direction:column;align-items:flex-start;gap:12px}
  .centerline{left:14px}
  .roadside,.roadside.right{width:auto;margin-left:28px}
  .road{height:110px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .l20{flex-grow:.25;opacity:.35}
}