/* Red Line Barbershop: transit-map system. One red route line runs down the page; sections are stops. */
:root{--paper:#fbfbf9;--ink:#111;--red:#d7261e;--red-d:#a51a14;--grey:#5b5b58;--rule:#d9d8d3;--line-x:22px}
body{font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:1.0625rem;line-height:1.55;background:var(--paper);color:var(--ink)}
h1,h2,h3{font-weight:700;line-height:1.05;letter-spacing:-.02em;margin:0 0 .4em}
h1{font-size:clamp(2.5rem,8vw,5rem);max-width:14ch}
h2{font-size:clamp(1.8rem,5vw,3rem)}
p{margin:0 0 1em}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500;font-size:.8rem;letter-spacing:.06em}
.small{font-size:.92rem;color:var(--grey)}
.photo-note,.demo-chip{display:inline-block;font:500 .75rem "JetBrains Mono",monospace;background:#fff2a8;color:#3e3300;padding:2px 7px}
.demo-line{margin:0;background:var(--ink);color:#eee;font:500 .75rem "JetBrains Mono",monospace;text-align:center;padding:7px 12px;letter-spacing:.04em}

/* route header: badge + horizontal stop-line nav */
.route{position:sticky;top:0;z-index:40;background:var(--paper);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px clamp(16px,4vw,40px);border-bottom:2px solid var(--ink)}
.badge{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:1.3rem;letter-spacing:-.02em}
.badge-dot{width:22px;height:22px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px var(--paper),0 0 0 6px var(--ink)}
.badge-sub{font-weight:400;color:var(--grey)}
.route-nav{display:none}
.route-nav ol{list-style:none;margin:0;padding:0;display:flex;position:relative}
.route-nav ol::before{content:"";position:absolute;left:12px;right:12px;top:9px;height:5px;background:var(--red)}
.route-nav li{position:relative}
.route-nav a{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;font:500 .8rem "JetBrains Mono",monospace;padding:0 16px}
.route-nav .stop{width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid var(--ink);position:relative}
.route-nav a:hover .stop{background:var(--red)}
.nav-toggle{width:46px;height:46px;border:2px solid var(--ink);background:#fff;border-radius:50%;cursor:pointer;display:grid;place-items:center}
.nav-toggle span{width:16px;height:16px;border-radius:50%;background:var(--red)}
.mobile-menu{position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:2px solid var(--ink);max-height:calc(100dvh - 100%);overflow:auto}
.mobile-menu ol{list-style:none;margin:0;padding:8px clamp(16px,4vw,40px) 14px;border-left:5px solid var(--red);margin-left:clamp(16px,4vw,40px)}
.mobile-menu a{display:block;padding:11px 0 11px 14px;text-decoration:none;font:500 1rem "JetBrains Mono",monospace}
@media (min-width:960px){.route-nav{display:block}.nav-toggle{display:none}.mobile-menu{display:none!important}}

/* the line */
.line{position:relative;padding-left:calc(var(--line-x) + 28px);padding-right:clamp(16px,4vw,40px)}
.line::before{content:"";position:absolute;left:var(--line-x);top:0;bottom:0;width:7px;background:var(--red)}
.stopblock{position:relative;padding:56px 0 40px;max-width:1080px;border-bottom:1px solid var(--rule)}
.node{position:absolute;left:-37.5px;top:60px;width:26px;height:26px;border-radius:50%;background:#fff;border:5px solid var(--ink);transform:translateX(0)}
.node-big{width:34px;height:34px;left:-41.5px;background:var(--red);border-color:var(--ink)}
.node-end{border-radius:4px;background:var(--ink)}
.stopno{color:var(--red-d);font-weight:700;margin-bottom:6px}
@media (min-width:900px){:root{--line-x:56px}.line{padding-left:calc(var(--line-x) + 56px)}.node{left:-65.5px}.node-big{left:-69.5px}}

/* hero */
.hero{padding-top:40px}
.hero-grid{display:grid;gap:28px}
.lead{font-size:1.2rem;max-width:44ch;color:#2a2a28}
.actions{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}
.ticket{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;text-decoration:none;font:700 .95rem "JetBrains Mono",monospace;padding:13px 18px;border:0;cursor:pointer;border-radius:0}
.ticket::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--red)}
.ticket:hover{background:var(--red-d)}
.textlink{font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:3px;text-underline-offset:5px}
.hero-photo{margin:0;position:relative;background:#ddd;border-radius:0 0 0 80px;overflow:hidden}
.hero-photo img{width:100%;aspect-ratio:11/8;object-fit:cover}
.hero-photo .photo-note{position:absolute;right:10px;top:10px}
@media (min-width:960px){.hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center}}

/* hours */
.now{display:inline-block;font:700 1.05rem "JetBrains Mono",monospace;background:var(--red);color:#fff;padding:8px 12px}
.timetable-wrap{overflow-x:auto;max-width:520px}
.timetable{border-collapse:collapse;width:100%;margin:12px 0 10px;font-variant-numeric:tabular-nums}
.timetable th,.timetable td{text-align:left;padding:10px 14px 10px 0;border-bottom:1px solid var(--rule)}
.timetable thead th{font:500 .75rem "JetBrains Mono",monospace;color:var(--grey);border-bottom:2px solid var(--ink)}
.timetable td{font:700 1.15rem "JetBrains Mono",monospace}

/* board */
.board{list-style:none;padding:0;margin:8px 0 10px;max-width:640px;border-top:2px solid var(--ink)}
.board li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--rule)}
.code{font:700 .85rem "JetBrains Mono",monospace;background:var(--ink);color:#fff;width:40px;height:40px;display:grid;place-items:center;border-radius:50%}
.svc{font-size:1.3rem;font-weight:600}
.price{font:500 .8rem "JetBrains Mono",monospace;color:var(--grey)}

/* crew stations */
.stations{list-style:none;padding:0;margin:20px 0 28px;display:grid;gap:0;position:relative}
.stations li{display:grid;grid-template-columns:28px minmax(0,8rem) minmax(0,1fr);gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px dashed var(--rule)}
.st-dot{width:16px;height:16px;border-radius:50%;border:4px solid var(--red);background:#fff;align-self:center}
.stations strong{font-size:1.3rem}
.stations span:last-child{color:#2d2d2b}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:760px}
.pair button{padding:0;border:0;background:#ddd;cursor:zoom-in}
.pair img{width:100%;aspect-ratio:7/5;object-fit:cover}
@media (max-width:520px){.stations li{grid-template-columns:28px minmax(0,1fr)}.stations li span:last-child{grid-column:2}}

/* perks: interchange pills (not buttons) */
.perks{list-style:none;padding:0;margin:10px 0 12px;display:flex;flex-wrap:wrap;gap:10px}
.perks li{border:2px solid var(--ink);padding:7px 14px;border-radius:999px;font-weight:600;background:#fff}
.perks li:nth-child(3n+1){border-color:var(--red)}

/* promenade */
.prom-grid{display:grid;gap:20px}
.map{background:#ddd;min-height:300px;border:2px solid var(--ink)}
.map iframe{width:100%;height:100%;min-height:300px;border:0}
.addr{font-size:1.35rem;font-weight:600}
@media (min-width:900px){.prom-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}.map iframe{min-height:400px}}

/* terminus form */
.terminus{border-bottom:0;padding-bottom:64px}
.end-form{display:grid;gap:2px 16px;max-width:720px}
.end-form .field{min-width:0}
.end-form label{display:block;font:500 .8rem "JetBrains Mono",monospace;margin-bottom:4px}
.end-form input,.end-form textarea{width:100%;padding:11px 12px;border:2px solid var(--ink);border-radius:0;background:#fff}
.end-form input:focus,.end-form textarea:focus{outline:3px solid var(--red);outline-offset:0}
.end-form .ticket{justify-self:start;margin-top:6px}
.form-success{border:2px solid var(--ink);border-left:8px solid var(--red);padding:16px 18px;background:#fff;max-width:720px}
@media (min-width:700px){.end-form{grid-template-columns:1fr 1fr}.end-form .wide{grid-column:1/-1}}

.foot{background:var(--ink);color:#eee;padding:22px clamp(16px,4vw,40px);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
.foot p{margin:0}
.small-mono{color:#aaa}