/* Viorvo route & city pages (design D) */
:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F6F7F9; --line:#E4E7EC; --line-2:#F0F2F5;
  --ink:#0B0F19; --muted:#5B6474; --btn:#0B0F19; --btn-ink:#FFFFFF; --btn-hover:#262C3A;
  --save:#0E7A55; --save-bg:#E3F4EC; --save-ink:#FFFFFF; --warn-ink:#6E4B00; --warn-bg:#FFF3D6; --focus:#0E7A55;
  --b-bg:#0E1014; --b-line:#1C2029; --b-edge:transparent; --b-ink:#F3F1EA; --b-muted:#C9CCD4; --b-dim:#8A91A0;
  --amber:#FFB020; --b-green:#3DDC97; --flap:linear-gradient(#1D2129 49%,#0B0D11 50%,#1D2129 51%);
  --bar:#D5DAE3;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --board:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B0D12; --surface:#12151C; --surface-2:#181C25; --line:#262B36; --line-2:#1E222B;
    --ink:#EEF0F4; --muted:#9AA2B2; --btn:#EEF0F4; --btn-ink:#0B0F19; --btn-hover:#FFFFFF;
    --save:#3DDC97; --save-bg:#0F2A20; --save-ink:#07130D; --warn-ink:#F1C66A; --warn-bg:#2C2210; --focus:#3DDC97;
    --b-bg:#07080B; --b-edge:#1F2430; --bar:#2E3544; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0B0D12; --surface:#12151C; --surface-2:#181C25; --line:#262B36; --line-2:#1E222B;
  --ink:#EEF0F4; --muted:#9AA2B2; --btn:#EEF0F4; --btn-ink:#0B0F19; --btn-hover:#FFFFFF;
  --save:#3DDC97; --save-bg:#0F2A20; --save-ink:#07130D; --warn-ink:#F1C66A; --warn-bg:#2C2210; --focus:#3DDC97;
  --b-bg:#07080B; --b-edge:#1F2430; --bar:#2E3544; color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--sans)}
a{color:var(--ink)}
a:hover{color:var(--save)}
.wrap{max-width:1200px;margin:0 auto;padding-inline:16px}
@media (min-width:900px){.wrap{padding-inline:32px}}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:8px}
.eyebrow{font:600 12px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}

/* Header */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:700 22px/1 var(--sans);letter-spacing:-.03em}
.brand:hover{color:var(--ink)}
.top nav{display:flex;gap:24px;font-size:15px;font-weight:500}
.top nav a{color:var(--muted);text-decoration:none}
.top nav a:hover{color:var(--ink)}
@media (max-width:640px){.top nav a:not(.keep){display:none}}
.crumbs{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}

/* Hero */
.hero-grid{display:grid;gap:26px;padding-block:22px 12px;align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:1.25fr 1fr;gap:48px;padding-block:32px 16px}}
.hero-grid .code{font:600 14px var(--mono);letter-spacing:.12em;color:var(--muted)}
.hero-grid h1{font:700 clamp(34px,5vw,58px)/1.03 var(--sans);letter-spacing:-.045em;margin:10px 0 14px;text-wrap:balance}
.hero-grid .lede{margin:0;color:var(--muted);font-size:18px;max-width:56ch}

/* Dark board pieces */
.rboard,.board{background:var(--b-bg);border:1px solid var(--b-edge);color:var(--b-ink);border-radius:22px}
.rboard{padding:22px;display:grid;gap:16px}
.rb-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.b-sub{font:600 12px var(--mono);letter-spacing:.1em;color:var(--amber);text-transform:uppercase}
.b-live{display:inline-flex;align-items:center;gap:8px;font:500 12px var(--mono);letter-spacing:.06em;color:var(--b-dim);text-transform:uppercase}
.b-live i{width:7px;height:7px;border-radius:50%;background:var(--b-green);flex:none}
.rb-route{display:flex;align-items:center;gap:10px;min-width:0}
.rb-arrow{color:var(--b-dim);font:700 20px var(--mono)}
.flap{font:700 19px var(--mono);letter-spacing:.06em;background:var(--flap);border-radius:6px;padding:9px 12px;color:var(--b-ink);text-align:center;white-space:nowrap}
.b-dest{color:var(--amber);letter-spacing:.16em;text-transform:uppercase;text-align:left;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rb-route .b-dest{flex:1;font-size:clamp(18px,2.2vw,24px)}
.rb-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--b-line);border-radius:12px;overflow:hidden;margin:0}
.rb-stats div{background:var(--b-bg);padding:12px 14px}
.rb-stats dt{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--b-dim)}
.rb-stats dd{margin:4px 0 0;font:900 28px/1 var(--board);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.board{padding:clamp(16px,2.2vw,26px) clamp(12px,2.2vw,26px) clamp(8px,1.4vw,14px)}
.b-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;padding:0 4px 12px}
.b-title{font:900 clamp(30px,3.6vw,40px)/1 var(--board);letter-spacing:.04em}
.rrow{display:grid;grid-template-columns:110px minmax(0,1fr) 120px 130px;gap:14px;align-items:center;padding:8px 4px;border-top:1px solid var(--b-line);text-decoration:none;color:var(--b-ink)}
.rrow:hover{color:var(--b-ink)}
.rrow:hover .rr-mid b{color:#FFC857}
.rr-mid{display:grid;min-width:0}
.rr-mid b{font:600 17px var(--sans);color:var(--b-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rr-mid small{font:500 13px var(--mono);color:var(--b-muted);letter-spacing:.04em;text-transform:uppercase}
.b-fare{font:900 34px/1 var(--board);font-variant-numeric:tabular-nums;color:var(--b-ink);text-align:right}
.b-cta{justify-self:end;font:600 14px var(--sans);padding:9px 13px;border-radius:10px;background:var(--amber);color:#0B0D11;white-space:nowrap}
.rrow.best .b-cta{background:var(--b-green)}
@media (max-width:620px){
  .rrow{grid-template-columns:1fr auto;grid-template-areas:"mid fare" "date cta";gap:8px 10px;padding:12px 2px}
  .rrow .rr-mid{grid-area:mid}.rrow .b-fare{grid-area:fare}.rrow .flap{grid-area:date;justify-self:start;font-size:14px;padding:6px 9px}.rrow .b-cta{grid-area:cta;font-size:13px;padding:7px 11px}
}
.b-empty{padding:18px 4px;color:var(--b-muted);border-top:1px solid var(--b-line);display:grid;gap:12px;justify-items:start}
.b-skel{height:56px;border-top:1px solid var(--b-line);background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);background-size:200% 100%}
@media (prefers-reduced-motion:no-preference){.b-skel{animation:sh 1.2s linear infinite}}
@keyframes sh{to{background-position:-200% 0}}
.b-foot{padding:10px 4px 4px}

/* Hub destination rows */
.hrow{display:grid;grid-template-columns:minmax(0,1fr) 150px 110px 130px;gap:14px;align-items:center;padding:8px 4px;border-top:1px solid var(--b-line);text-decoration:none;color:var(--b-ink)}
.hrow:hover{color:var(--b-ink)}
.hrow .b-dest{font-size:clamp(17px,2vw,23px);padding:8px 14px}
.hrow .hk{font:600 14px var(--mono);color:var(--b-muted);letter-spacing:.04em;white-space:nowrap}
.hrow .b-fare{font-size:28px}
@media (max-width:620px){.hrow{grid-template-columns:1fr auto;grid-template-areas:"dest fare" "km cta";gap:8px 10px;padding:12px 2px}.hrow .b-dest{grid-area:dest}.hrow .hk{grid-area:km}.hrow .b-fare{grid-area:fare}.hrow .b-cta{grid-area:cta;font-size:13px;padding:7px 11px}}

/* Sections */
main section{padding-top:clamp(34px,5vw,48px)}
h2{font:700 clamp(21px,2.6vw,26px)/1.2 var(--sans);letter-spacing:-.03em;margin:4px 0 14px;text-wrap:balance}
h3{font:600 17px/1.3 var(--sans);margin:0 0 6px}
.notice{display:flex;gap:10px;align-items:flex-start;background:var(--warn-bg);color:var(--warn-ink);border-radius:14px;padding:12px 16px;font-size:14px;margin-top:20px}
.card{border:1px solid var(--line);border-radius:20px;padding:22px;background:var(--surface)}
.card.soft{background:var(--surface-2);border-color:transparent}
.two{display:grid;gap:14px}
@media (min-width:900px){.two{grid-template-columns:1.25fr 1fr}}
.prose p{margin:0 0 12px;max-width:68ch}
.prose ul{margin:0 0 12px;padding-left:20px;max-width:68ch}
.prose li{margin:8px 0}
.links{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:14px;font-size:14px}
.links a{font-weight:600}
.cta{display:inline-flex;align-items:center;gap:6px;background:var(--amber);color:#0B0D11;text-decoration:none;font:600 15px var(--sans);padding:10px 14px;border-radius:10px;white-space:nowrap}

/* Month chart */
.months-scroll{overflow-x:auto}
.months{display:grid;grid-template-columns:repeat(12,minmax(34px,1fr));align-items:end;gap:6px;height:190px;min-width:460px;border-bottom:1px solid var(--line);padding-top:24px}
.mcol{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%;text-decoration:none}
.mbar{background:var(--bar);border-radius:6px 6px 0 0;min-height:4px;transition:background .15s}
.mcol:hover .mbar{background:var(--ink)}
.mcol.low .mbar{background:var(--save)}
.mcol .mp{position:absolute;left:50%;transform:translateX(-50%);font:600 11px var(--mono);color:var(--muted);white-space:nowrap}
.mcol.none .mbar{background:transparent;border:1px dashed var(--line);border-bottom:0;height:10px}
.mlabels{display:grid;grid-template-columns:repeat(12,minmax(34px,1fr));gap:6px;min-width:460px;font:500 12px var(--sans);color:var(--muted);text-align:center;margin-top:6px}
.callout{background:var(--save-bg);color:var(--save);border-radius:14px;padding:12px 16px;margin-bottom:14px;font-size:15px;font-weight:500}

/* Plan cards */
.plan{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.pcard{display:grid;gap:6px;align-content:start;border:1px solid var(--line);border-radius:18px;padding:20px;text-decoration:none;color:var(--ink)}
.pcard:hover{border-color:var(--ink);color:var(--ink)}
.pcard b{font-size:17px;letter-spacing:-.02em}
.pcard span{font-size:14px;color:var(--muted)}
.pcard em{font-style:normal;font-weight:600;font-size:14px;margin-top:4px}

/* FAQ */
.faq details{border-top:1px solid var(--line-2);padding:4px 0}
.faq details:last-of-type{border-bottom:1px solid var(--line-2)}
.faq summary{cursor:pointer;font-weight:600;padding:14px 0}
.faq details p{margin:0 0 16px;color:var(--muted);max-width:72ch}

/* Route lists */
.routes{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.rlink{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);border-radius:14px;padding:12px 14px;text-decoration:none;color:var(--ink);font-weight:600}
.rlink:hover{border-color:var(--ink);color:var(--ink)}
.rlink small{font:600 12px var(--mono);color:var(--muted)}
.group{margin-bottom:26px}
.group h3 a{text-decoration:none}

footer{margin-top:64px;border-top:1px solid var(--line-2);padding-block:26px 40px;font-size:14px;color:var(--muted);display:grid;gap:12px}
footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
footer p{margin:0;max-width:80ch}
footer a{color:var(--muted)}
.b-group{font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--amber);padding:18px 4px 8px;border-top:1px solid var(--b-line)}
.b-group:first-of-type{border-top:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.alert-card{background:var(--b-bg);color:var(--b-ink);border-radius:22px;padding:clamp(22px,4vw,34px);display:grid;gap:16px 32px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.alert-card h2{margin:0 0 6px;color:var(--b-ink)}
.alert-card p{margin:0;color:var(--b-muted);line-height:1.5}
.alert-card small{grid-column:1/-1;color:var(--b-dim);font-size:13px}.alert-card small a{color:var(--b-muted)}
.alert-form{display:flex;flex-wrap:wrap;gap:8px}
.alert-form input{flex:1 1 200px;min-width:0;box-sizing:border-box;border:1px solid #2A2F3A;background:#161A21;color:var(--b-ink);border-radius:12px;padding:13px 14px;font:500 16px var(--sans)}
.alert-form button{flex:0 0 auto;border:0;border-radius:12px;background:var(--amber);color:#0B0F19;font:600 16px var(--sans);padding:13px 20px;cursor:pointer}
@media (max-width:720px){.alert-card{grid-template-columns:1fr}.alert-form button{flex:1 1 100%}}