@font-face{font-family:"Barlow Condensed";font-weight:700;src:url(/fonts/BarlowCondensed-700.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Barlow Condensed";font-weight:800;src:url(/fonts/BarlowCondensed-800.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;src:url(/fonts/Atkinson-400.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;src:url(/fonts/Atkinson-700.ttf) format("truetype");font-display:swap}
@font-face{font-family:"IBM Plex Mono";font-weight:500;src:url(/fonts/PlexMono-500.ttf) format("truetype");font-display:swap}
@font-face{font-family:"IBM Plex Mono";font-weight:600;src:url(/fonts/PlexMono-600.ttf) format("truetype");font-display:swap}

:root{
  --paper:#F4EEE3;--ink:#1F1C19;--signal:#E8562A;--stop:#F3B83A;--lake:#9CC9D9;--rule:#CFC6B8;--muted:#5E564D;
  --display:"Barlow Condensed",Impact,sans-serif;--body:"Atkinson Hyperlegible",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
  --rail:120px;--gut:32px;--max:1360px;--line:4px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;height:auto}

.ribbon{background:var(--stop);color:var(--ink);font:600 13px/1.4 var(--mono);letter-spacing:.02em;padding:8px var(--gut) 8px calc(var(--rail) + 8px);position:relative;z-index:6}
.ribbon a{font-weight:600}

/* the rail: one continuous line down the page, the van rides it */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:7;pointer-events:none}
.rail-line,.rail-fill{position:absolute;left:calc(var(--rail)/2 - var(--line)/2);top:0;width:var(--line);background:var(--rule);bottom:0}
.rail-fill{background:var(--ink);bottom:auto;height:0}
.van{position:absolute;width:52px;left:calc(var(--rail)/2 - 26px);top:0;transform:rotate(90deg);transition:transform .2s}

.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px var(--gut) 14px calc(var(--rail) + 8px);background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--rule)}
.brand img{width:250px;display:block}

/* ticket buttons: square, punched notch, signal fill, ink text */
.ticket{--bg:var(--signal);display:inline-flex;align-items:center;position:relative;background:var(--bg);color:var(--ink);text-decoration:none;border:0;cursor:pointer;
  font:600 15px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:16px 22px 16px 30px;border-radius:2px;
  -webkit-mask:radial-gradient(circle 7px at 0 50%,#0000 98%,#000) ;mask:radial-gradient(circle 7px at 0 50%,#0000 98%,#000);transition:transform .15s, box-shadow .15s}
.ticket::after{content:"";position:absolute;left:16px;top:8px;bottom:8px;border-left:2px dashed color-mix(in srgb,var(--ink) 45%,transparent)}
.ticket:hover{transform:translateX(4px)}
.ticket:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.ticket-light{--bg:var(--stop)}

main,footer{position:relative}
.stop{position:relative;max-width:calc(var(--max) + var(--rail));padding:120px var(--gut) 120px calc(var(--rail) + 8px)}
.stop .dot{position:absolute;left:calc(var(--rail)/2 - 13px);top:126px;width:26px;height:26px;border-radius:50%;background:var(--paper);border:var(--line) solid var(--rule);z-index:5;transition:all .35s}
.stop.passed .dot{border-color:var(--ink);background:var(--ink)}
.stop.current .dot{border-color:var(--ink);background:var(--signal);transform:scale(1.35)}
.label{font:600 13px/1 var(--mono);letter-spacing:.14em;color:var(--muted);margin:0 0 22px}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:.92;letter-spacing:-.005em;margin:0}
h1{font-size:clamp(60px,8.4vw,136px);max-width:13ch}
h2{font-size:clamp(44px,5.6vw,88px);max-width:16ch}
h3{font-size:28px;line-height:1;font-weight:700}
.u{background:linear-gradient(var(--signal),var(--signal)) 0 92%/0 .1em no-repeat;transition:background-size 1.1s .3s cubic-bezier(.2,.7,.2,1)}
.loaded .u{background-size:100% .1em}
.lede{font-size:22px;max-width:38ch;margin:28px 0 0;color:var(--ink)}

/* departure board */
.board{margin-top:64px;max-width:1300px!important;background:var(--ink);color:var(--paper);border-radius:3px;padding:28px 32px 30px;max-width:1100px;box-shadow:0 30px 60px -30px rgba(31,28,25,.6)}
.board-head,.brow{display:grid;grid-template-columns:110px 1.6fr 1.2fr 1fr;gap:18px;align-items:center}
.board-head{font:600 12px/1 var(--mono);letter-spacing:.16em;color:#A99F92;padding-bottom:14px;border-bottom:1px solid #3a3530}
.brow{font:600 clamp(18px,2vw,26px)/1 var(--mono);padding:16px 0;border-bottom:1px solid #3a3530;transition:background .3s}
.brow .town{font-family:var(--display);font-weight:800;font-size:clamp(26px,3vw,40px);letter-spacing:.02em;text-transform:uppercase}
.flap{display:inline-block;min-width:.62em;text-align:center;background:#2b2723;border-radius:2px;margin-right:2px;padding:2px 1px;box-shadow:inset 0 -1px 0 #000, inset 0 1px 0 #3a3530}
.brow .status{font-size:14px;letter-spacing:.12em;color:#A99F92}
.brow.today .status{color:var(--ink);background:var(--signal);padding:8px 10px;justify-self:start;border-radius:2px}
.brow.today .day,.brow.today .town{color:var(--signal)}
.brow.match{background:#2b2723;box-shadow:inset 6px 0 0 var(--stop)}
.zip{margin-top:26px}
.zip label{display:block;font:700 22px/1.2 var(--body);margin-bottom:12px}
.zip-row{display:flex;gap:12px;flex-wrap:wrap}
.zip input{font:600 22px/1 var(--mono);letter-spacing:.12em;width:200px;padding:14px 16px;background:var(--paper);color:var(--ink);border:0;border-radius:2px}
.zip input:focus-visible{outline:3px solid var(--stop);outline-offset:2px}
.zipout{font-size:20px;min-height:1.6em;margin:14px 0 0;color:var(--paper)}
.zipout b{color:var(--stop)}

/* map */
.map{margin-top:56px;max-width:1180px}
@media (max-width:900px){.map{margin-left:-14px;margin-right:-14px}}
.map svg{width:100%;height:auto;display:block}
.lake{fill:var(--lake);opacity:.55}
.laketext{font:600 14px var(--mono);letter-spacing:.3em;fill:#3f6f80}
.laketext.small{font-size:11px;letter-spacing:.2em}
.routebase{fill:none;stroke:var(--rule);stroke-width:8;stroke-linecap:round}
.routedraw{fill:none;stroke:var(--ink);stroke-width:8;stroke-linecap:round}
.mstop circle{fill:var(--paper);stroke:var(--ink);stroke-width:6;transition:all .3s}
.mstop.on circle{fill:var(--signal)}
.mstop .mday{font:600 15px var(--mono);letter-spacing:.14em;fill:var(--muted)}
.mstop .mtown{font:800 30px var(--display);text-transform:uppercase;fill:var(--ink)}

/* fares */
.fares{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:56px;max-width:1180px}
.fare{position:relative;background:#fff8ee;border:2px solid var(--ink);border-radius:3px;padding:26px 24px 24px;display:flex;flex-direction:column;gap:6px;transition:transform .25s}
.fare:hover{transform:translateY(-4px) rotate(-.4deg)}
.fare::before,.fare::after{content:"";position:absolute;top:calc(62% - 12px);width:24px;height:24px;border-radius:50%;background:var(--paper);border:2px solid var(--ink)}
.fare::before{left:-13px;clip-path:inset(0 0 0 50%)}.fare::after{right:-13px;clip-path:inset(0 50% 0 0)}
.fare .size{font:800 40px/1 var(--display);text-transform:uppercase}
.fare .lbs{font:500 14px var(--mono);color:var(--muted);letter-spacing:.06em}
.fare .perf{border-top:2px dashed var(--ink);margin:26px -24px 12px}
.fare .price{font:600 44px/1 var(--mono)}
.fare .mins{font:500 14px var(--mono);color:var(--muted);letter-spacing:.06em}
.fare.pop{background:var(--signal)}
.fare.pop .lbs,.fare.pop .mins{color:var(--ink)}
.addons{font:500 15px/1.6 var(--mono);letter-spacing:.04em;margin-top:26px;max-width:1100px}
.addons span{background:var(--ink);color:var(--paper);padding:3px 8px;margin-right:8px}

/* stations */
.stations{list-style:none;padding:0;margin:56px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;max-width:1180px;position:relative}
.stations::before{content:"";position:absolute;left:0;right:0;top:21px;height:var(--line);background:var(--ink)}
.stations li{position:relative;padding-top:70px}
.stations b{position:absolute;top:0;left:0;width:46px;height:46px;border-radius:50%;background:var(--paper);border:var(--line) solid var(--ink);display:grid;place-items:center;font:600 14px var(--mono)}
.stations li:first-child b{background:var(--signal)}
.stations p{margin:12px 0 0;max-width:28ch}

/* vets */
.vets{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.vets .lede{margin-bottom:22px}
.facts{list-style:none;padding:0;margin:0 0 32px;font:600 16px/2 var(--mono)}
.facts li::before{content:"● ";color:var(--signal)}
.card-mock{perspective:1200px}
.card{position:relative;width:min(520px,100%);aspect-ratio:3.5/2;background:#fff8ee;border-radius:6px;padding:26px 28px;box-shadow:0 40px 70px -30px rgba(31,28,25,.55);transform:rotate(-4deg);display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;gap:8px 20px;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card-mock:hover .card{transform:rotate(0) translateY(-6px)}
.card-logo{grid-column:1/3;width:270px}
.card-line{margin:6px 0 0;font:700 17px/1.3 var(--body)}
.card-route{grid-column:1;font:600 12px/1.6 var(--mono);letter-spacing:.08em;align-self:end}
.card-qr{grid-column:2;grid-row:2/4;width:118px;align-self:end}
.card-demo{position:absolute;right:16px;top:14px;font:600 10px var(--mono);letter-spacing:.2em;background:var(--stop);padding:3px 6px}

/* request */
.request{display:grid;grid-template-columns:2fr 1fr;gap:40px;margin-top:48px;max-width:1180px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
.form label{display:flex;flex-direction:column;gap:6px;font:600 13px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.form input,.form select{font:400 19px var(--body);padding:14px;border:2px solid var(--ink);border-radius:2px;background:#fff8ee;color:var(--ink);letter-spacing:0;text-transform:none}
.form input:focus-visible,.form select:focus-visible{outline:3px solid var(--signal);outline-offset:1px}
.form .ticket{grid-column:1/-1;justify-self:start}
.fineprint{grid-column:1/-1;margin:0;font:500 13px var(--mono);color:var(--muted)}
.summary{background:var(--ink);color:var(--paper);padding:26px;border-radius:3px;align-self:start;position:sticky;top:110px}
.summary .label{color:#A99F92}
.summary dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font:600 16px var(--mono)}
.summary dt{color:#A99F92;font-size:12px;letter-spacing:.14em;align-self:center}
.summary dd{margin:0}
.done{margin:18px 0 0;background:var(--signal);color:var(--ink);padding:12px;font:700 16px var(--body)}

/* footer: end of the line, same paper */
.end{padding-top:90px;padding-bottom:70px;border-top:2px solid var(--ink)}
.end .dot{top:-15px}
.end-dot{width:30px!important;height:30px!important;background:var(--ink)!important;border-color:var(--ink)!important;box-shadow:0 0 0 6px var(--paper),0 0 0 10px var(--ink)}
.recap{font:600 15px/1.6 var(--mono);letter-spacing:.06em;margin:22px 0 10px}
.demo-note,.powered{font-size:15px;color:var(--muted);margin:6px 0}

/* arrivals: things travel in along the line, left to right */
.arrive{clip-path:inset(0 100% 0 0);transform:translateX(-18px);transition:clip-path .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.arrive.in{clip-path:inset(0 0 0 0);transform:none}
.arrive.arrived{clip-path:none}

@media (max-width:900px){
  :root{--rail:44px;--gut:20px}
  .van{width:34px;left:calc(var(--rail)/2 - 17px)}
  .brand img{width:180px}
  .top .ticket{padding:12px 14px 12px 24px;font-size:12px}.top .ticket::after{left:12px}
  .stop{padding-top:80px;padding-bottom:80px}
  .stop .dot{top:84px;width:20px;height:20px;left:calc(var(--rail)/2 - 10px)}
  .lede{font-size:19px}
  .board{padding:18px 16px;margin-left:-6px}
  .board-head{display:none}
  .brow{grid-template-columns:52px 1fr;gap:4px 12px;padding:12px 0}
  .brow .hours{grid-column:2;font-size:15px}.brow .status{grid-column:2}
  .zip input{width:100%}
  .fares{grid-template-columns:1fr 1fr;gap:14px}.fare{padding:18px 16px}.fare .size{font-size:30px}.fare .price{font-size:32px}.fare .perf{margin:16px -16px 10px}
  .stations{grid-template-columns:1fr;gap:34px}.stations::before{left:21px;right:auto;top:0;bottom:0;width:var(--line);height:auto}
  .stations li{padding:0 0 0 70px}
  .vets,.request{grid-template-columns:1fr}
  .card{transform:rotate(-2deg)}.card-logo{width:200px}.card-qr{width:80px}
  .form{grid-template-columns:1fr}
  .summary{position:static}
  .mstop .mtown{font-size:40px}.mstop .mday{font-size:20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.arrive{clip-path:none;transform:none}}

.hero{display:grid;grid-template-columns:1.7fr .8fr;gap:40px;align-items:end;max-width:1300px}
.sign{justify-self:end;display:flex;flex-direction:column;align-items:center;transform-origin:50% 100%;animation:sway 5s ease-in-out 1.6s infinite}
.sign-plate{background:var(--ink);color:var(--paper);width:330px;border-radius:4px;padding:26px 26px 22px;text-align:center;box-shadow:0 30px 50px -28px rgba(31,28,25,.7)}
.sign-plate img{width:96px;display:block;margin:0 auto 14px}
.sign-k{font:600 13px var(--mono);letter-spacing:.24em;color:#A99F92}
.sign-town{font:800 64px/1 var(--display);text-transform:uppercase;color:var(--signal);margin:8px 0 4px}
.sign-hrs{font:600 20px var(--mono);letter-spacing:.06em}
.sign-pole{width:14px;height:150px;background:linear-gradient(90deg,#3a3530,#1F1C19 60%)}
.sign-base{width:90px;height:12px;background:var(--ink);border-radius:2px}
@keyframes sway{0%,100%{transform:rotate(0)}50%{transform:rotate(1.2deg)}}
@media (max-width:900px){.hero{grid-template-columns:1fr}.sign{justify-self:start;flex-direction:row;align-items:stretch;animation:none}.sign-pole,.sign-base{display:none}.sign-plate{width:100%;display:grid;grid-template-columns:56px 1fr;gap:4px 14px;text-align:left;align-items:center;padding:16px}.sign-plate img{width:56px;margin:0;grid-row:1/4}.sign-town{font-size:40px;margin:0}.sign-hrs{font-size:16px}}