@font-face{font-family:TradeWinds;src:url("assets/fonts/TradeWinds-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:Prosto;src:url("assets/fonts/ProstoOne-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:Kalam;src:url("assets/fonts/Kalam-Regular.ttf") format("truetype");font-display:swap}

:root{
  --yellow:#f4e500;
  --ink:#0c120f;
  --paper:#f5f1e5;
  --white:#fffdf6;
  --blue:#0a527f;
  --blue-dark:#063d60;
  --cyan:#39b8df;
  --green:#2f7c36;
  --deep:#153e2b;
  --leaf:#80b63f;
  --orange:#ff5824;
  --red:#d92f2f;
  --muted:#5c675f;
  --line:rgba(12,18,15,.14);
  --shadow:0 24px 70px rgba(10,40,25,.16);
  --display:TradeWinds,Georgia,serif;
  --label:Prosto,Arial,sans-serif;
  --body:Kalam,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html{min-width:320px;background:var(--ink);scroll-behavior:smooth;scroll-padding-top:88px}
body{min-height:100vh;margin:0;overflow-x:hidden;color:var(--ink);background:var(--paper);font:18px/1.48 var(--body)}
body::before{content:"";position:fixed;inset:0;z-index:-3;background:radial-gradient(circle at 8% 5%,rgba(244,229,0,.18),transparent 27rem),radial-gradient(circle at 96% 75%,rgba(57,184,223,.14),transparent 32rem)}
button,input,textarea,select{font:inherit}
button,a{touch-action:manipulation}
button{cursor:pointer}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:4px solid var(--orange);outline-offset:4px;box-shadow:0 0 0 7px rgba(255,255,255,.92)}
.screen h1[tabindex="-1"]:focus,.screen h2[tabindex="-1"]:focus{outline:0;box-shadow:none}

.skip{position:fixed;z-index:1000;top:-120px;left:14px;padding:11px 15px;border-radius:12px;color:var(--ink);background:var(--yellow);font:10px var(--label);text-transform:uppercase;text-decoration:none}
.skip:focus{top:14px}
.network-banner{position:fixed;z-index:600;top:0;right:0;left:0;min-height:34px;padding:8px 16px;color:white;background:var(--blue);font:10px var(--label);letter-spacing:.05em;text-align:center;text-transform:uppercase}
.topbar{position:fixed;z-index:500;top:0;right:0;left:0;display:flex;align-items:center;justify-content:space-between;min-height:72px;padding:calc(12px + env(safe-area-inset-top)) clamp(16px,4vw,54px) 12px;color:white;background:rgba(12,18,15,.94);border-bottom:1px solid rgba(255,255,255,.12);backdrop-filter:blur(16px)}
body:has(.network-banner:not([hidden])) .topbar{top:34px}
.brand{display:flex;align-items:center;min-height:44px;color:var(--yellow);font:clamp(18px,2.5vw,27px)/1 var(--display);text-decoration:none;white-space:nowrap}
.mini-button,.round-button,.back-button{min-width:48px;min-height:48px;border:1px solid rgba(255,255,255,.42);border-radius:999px;color:white;background:rgba(255,255,255,.08);font:10px var(--label);text-transform:uppercase}
.mini-button{padding:9px 13px}

.screen{display:none;min-height:100vh}
.screen.active{display:block}
.hero{position:relative;isolation:isolate;display:flex;min-height:min(760px,90vh);flex-direction:column;justify-content:center;overflow:hidden;padding:calc(116px + env(safe-area-inset-top)) clamp(20px,6vw,80px) 88px;color:white;background:#10271e}
.hero::before{content:"";position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,rgba(7,22,16,.94) 0%,rgba(7,22,16,.72) 49%,rgba(7,22,16,.27) 100%),url("assets/media/aventure-60s-poster.jpg") center 58%/cover}
.hero::after{content:"";position:absolute;z-index:-2;width:620px;height:980px;right:10%;top:-390px;border:45px solid rgba(57,184,223,.18);border-left-color:transparent;border-radius:47%;transform:rotate(29deg)}
.eyebrow,.kicker{margin:0 0 12px;font:10px/1.35 var(--label);letter-spacing:.09em;text-transform:uppercase}
.eyebrow{color:var(--yellow)}
.hero h1,.sub-screen>h1,.finish-screen h1{margin:0;font-family:var(--display);font-weight:400;text-wrap:balance}
.hero h1{position:relative;z-index:1;max-width:930px;font-size:clamp(58px,9vw,116px);line-height:.91}
.hero h1 span{display:block;color:var(--yellow)}
.lede{position:relative;z-index:1;max-width:690px;margin:24px 0;font-size:clamp(21px,2.2vw,28px);line-height:1.42}
.route-facts{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px;max-width:650px}
.route-facts div{min-width:130px;padding:13px 16px;border:1px solid rgba(255,255,255,.2);border-radius:17px;background:rgba(255,255,255,.08);backdrop-filter:blur(8px)}
.route-facts strong,.route-facts span{display:block}
.route-facts strong{color:var(--yellow);font:23px var(--label)}
.route-facts span{margin-top:2px;font-size:15px}

.content-stack{position:relative;z-index:2;width:min(920px,calc(100% - 30px));margin:-42px auto 0;padding:0 0 32px}
.card,.card-dark{border:1px solid var(--line);border-radius:30px;padding:clamp(20px,4vw,34px);background:var(--white);box-shadow:var(--shadow)}
.route-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,210px);gap:clamp(17px,4vw,38px);align-items:center;transform:rotate(-.25deg)}
.kicker{color:var(--blue)}
h2{margin:0 0 11px;font:clamp(24px,4vw,36px)/1.08 var(--display);text-wrap:balance}
.route-copy>p:not(.kicker){max-width:600px;margin:0;color:var(--muted)}
.route-preview{display:block;width:100%;height:230px;border-radius:42% 58% 48% 52%/31% 36% 64% 69%;background:linear-gradient(145deg,var(--deep),var(--blue))}
.map-attribution{grid-column:1/-1;display:inline-flex;min-height:48px;align-items:center;color:var(--muted);font-size:13px;line-height:1.35;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px}
.text-button{display:inline-flex;min-height:48px;align-items:center;margin-top:6px;padding:8px 0;border:0;color:var(--blue);background:transparent;font:10px var(--label);text-decoration:none;text-transform:uppercase}

.card-dark{margin-top:20px;color:white;background:linear-gradient(145deg,#0e2d24,#09263a);border-color:rgba(255,255,255,.14);transform:rotate(.18deg)}
.card-dark .kicker{color:var(--yellow)}
.card-dark h2{font-size:clamp(31px,5vw,48px);color:var(--yellow)}
.pilot-notice{max-width:750px;margin:16px 0;padding:13px 15px;border-left:6px solid var(--yellow);border-radius:0 14px 14px 0;background:rgba(244,229,0,.09)}
.pilot-notice strong{font:10px var(--label);color:var(--yellow);letter-spacing:.05em}
.checks{display:grid;gap:4px;margin:24px 0 16px;padding:0;list-style:none}
.checks li{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:11px;align-items:center;min-height:72px;padding:12px 0;border-top:1px solid rgba(255,255,255,.18)}
.checks li>span{color:var(--yellow);font:14px var(--label)}
.checks strong,.checks small{display:block}
.checks strong{font:13px var(--label)}
.checks small{margin-top:4px;color:rgba(255,255,255,.7);font-size:15px;line-height:1.25}
.checks button,.checks li>b{display:grid;place-items:center;min-width:60px;min-height:48px;padding:8px 11px;border:0;border-radius:999px;color:var(--ink);background:white;font:9px var(--label);text-transform:uppercase}
.checks li.ready button,.checks li.ready>b{background:#c9fa82}
.checks li.error button,.checks li.error>b{background:#ff9f8a}
.battery-row{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:7px 10px;margin:9px 0 20px;font-size:14px}
.battery-row span{color:rgba(255,255,255,.6);font:9px var(--label);text-transform:uppercase}
.battery-row strong{text-align:right}
.start{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:58px;padding:15px 18px;border:0;border-radius:15px;color:var(--ink);background:var(--yellow);box-shadow:0 7px 0 #948c00;font:12px var(--label);text-align:left;text-decoration:none;text-transform:uppercase}
.start:disabled{cursor:not-allowed;opacity:.45;box-shadow:none}
.start span{font-size:22px}
.start-help{margin:16px 2px 0;color:var(--yellow);font:10px/1.45 var(--label)}
.screen-note,.nav-footnote{margin:18px 2px 0;color:rgba(255,255,255,.68);font-size:15px;line-height:1.45}
.demo-button{display:block;min-height:48px;margin:18px auto 0;padding:9px 13px;border:1px dashed rgba(255,255,255,.38);border-radius:13px;color:rgba(255,255,255,.78);background:transparent}
.compact-info{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0 36px}
.compact-info div,.compact-info>a{display:flex;min-height:84px;flex-direction:column;justify-content:center;padding:14px 16px;border:1px solid var(--line);border-radius:19px;color:var(--ink);background:var(--white);text-decoration:none}
.compact-info b{font:11px var(--label)}
.compact-info div:nth-child(2) b{color:var(--blue)}
.compact-info span{margin-top:4px;color:var(--muted);font-size:14px}
.compact-info>a{grid-column:1/-1;min-height:58px;align-items:center;color:var(--ink);background:var(--yellow);font:11px var(--label);text-align:center;text-transform:uppercase}

.site-footer{display:flex;flex-wrap:wrap;gap:12px 22px;justify-content:center;padding:28px 18px calc(28px + env(safe-area-inset-bottom));color:white;background:var(--ink);font-size:15px}
.site-footer strong{color:var(--yellow);font-family:var(--display);font-weight:400}
.site-footer a{display:inline-flex;min-height:48px;align-items:center;text-decoration-color:rgba(244,229,0,.5)}

.navigation-screen{width:100%;max-width:none;margin:0;padding:calc(96px + env(safe-area-inset-top)) max(16px,calc((100vw - 820px)/2)) calc(34px + env(safe-area-inset-bottom));color:white;background:linear-gradient(155deg,#071a14 0%,#0c2b22 48%,#08283c 100%)}
.nav-head{display:flex;gap:16px;align-items:center;justify-content:space-between}
.nav-head .eyebrow{margin-bottom:4px}
.nav-head h1{margin:0;color:var(--yellow);font:clamp(28px,6vw,43px)/1.05 var(--display)}
.round-button{flex:0 0 56px;width:56px;height:56px;border:2px solid white;color:white;background:var(--red)}
.status-ribbon{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0}
.status-ribbon span{padding:7px 10px;border:1px solid rgba(255,255,255,.28);border-radius:999px;font:10px var(--label)}
.status-ribbon span:first-child{border-color:var(--yellow);color:var(--ink);background:var(--yellow)}
.status-ribbon .degraded{border-color:var(--orange);color:var(--ink);background:var(--orange)}
.live-map-card{position:relative;overflow:hidden;border:2px solid rgba(255,255,255,.85);border-radius:32px;background:#edf8f3;box-shadow:0 22px 56px rgba(0,0,0,.28)}
.live-map-card canvas{display:block;width:100%;height:min(52vh,520px)}
.map-legend{position:absolute;right:10px;bottom:10px;left:10px;display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.map-legend span{padding:6px 8px;border-radius:10px;color:var(--ink);background:rgba(255,255,255,.92);font:10px var(--label)}
.map-legend i{display:inline-block;width:16px;height:4px;margin-right:5px;border-radius:5px;vertical-align:middle}
.map-legend .outbound{background:var(--ink)}
.map-legend .return{background:var(--blue)}
.map-legend .you{width:9px;height:9px;border-radius:50%;background:var(--red)}
.progress-copy{display:grid;grid-template-columns:auto 1fr;gap:3px 13px;align-items:center;margin:15px 2px 9px}
.progress-copy strong{grid-row:1/3;color:var(--yellow);font:34px var(--display)}
.progress-copy span{color:rgba(255,255,255,.7);font-size:15px}
.progress-copy span:last-child{color:white;font-family:var(--label);font-size:11px}
.progress-track{height:9px;overflow:hidden;border-radius:9px;background:rgba(255,255,255,.16)}
.progress-track i{display:block;width:0;height:100%;background:var(--yellow);transition:width .4s ease}
.audio-card{margin-top:18px;padding:22px;border:1px solid rgba(255,255,255,.18);border-radius:27px;background:rgba(255,255,255,.07)}
.audio-card .kicker{color:var(--yellow)}
.audio-card h2{font-size:clamp(25px,4.5vw,36px);color:var(--yellow)}
.audio-card>p:not(.kicker){max-height:7.2em;margin:0;overflow:auto;color:rgba(255,255,255,.78)}
.audio-controls{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:17px}
.audio-controls button,.nav-actions button{min-height:48px;padding:11px 9px;border:0;border-radius:14px;color:var(--ink);background:white;font:10px var(--label);text-transform:uppercase}
.audio-controls button:disabled{opacity:.4}
.audio-controls button:last-child{grid-column:1/-1;color:var(--ink);background:var(--yellow)}
.nav-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.nav-actions .danger-lite{color:#ffe4e4;background:#633333}
.nav-footnote{text-align:center}

.sub-screen{width:100%;max-width:none;margin:0;padding:calc(100px + env(safe-area-inset-top)) max(18px,calc((100vw - 760px)/2)) calc(48px + env(safe-area-inset-bottom));background:var(--paper)}
.back-button{margin:0 0 32px;padding:10px 14px;border:2px solid var(--ink);color:var(--ink);background:white}
.sub-screen>.eyebrow{color:var(--green)}
.sub-screen>h1{max-width:730px;margin:0 0 32px;font-size:clamp(42px,9vw,70px);line-height:1.02}
.route-list{position:relative;padding-left:24px}
.route-list::before{content:"";position:absolute;top:15px;bottom:15px;left:8px;width:6px;border:2px solid var(--blue);border-radius:8px;background:var(--cyan)}
.route-item{position:relative;margin-bottom:13px;padding:17px 16px 17px 48px;border:1px solid var(--line);border-radius:20px;background:var(--white);box-shadow:0 12px 30px rgba(15,45,28,.08)}
.route-item::before{content:"";position:absolute;top:23px;left:-25px;width:18px;height:18px;border:3px solid var(--ink);border-radius:50%;background:var(--yellow)}
.route-item>b{position:absolute;left:14px;color:var(--green);font:9px var(--label)}
.route-item strong,.route-item small{display:block}
.route-item strong{font:15px var(--label)}
.route-item small{margin-top:5px;color:var(--muted);font-size:14px}
.route-item.halt{background:#e1f2df}
.route-item.turn{background:var(--yellow)}
.attribution{margin-top:26px;color:var(--muted);font-size:13px;line-height:1.45}

.safety-screen{color:var(--ink);background:var(--yellow)}
.safety-screen>*{max-width:760px;margin-right:auto;margin-left:auto}
.safety-screen>.eyebrow{color:var(--ink)}
.safety-list{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.safety-list li{position:relative;padding:15px 15px 15px 48px;border:2px solid var(--ink);border-radius:17px;background:var(--white);font-size:17px;font-weight:700;line-height:1.35}
.safety-list li::before{content:"✓";position:absolute;top:13px;left:16px;color:var(--green);font:18px var(--label)}
.emergency-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.emergency-grid a{display:flex;min-height:94px;flex-direction:column;justify-content:center;padding:15px;border:2px solid var(--ink);border-radius:18px;color:var(--ink);background:white;text-decoration:none}
.emergency-grid a.emergency{color:white;background:var(--red)}
.emergency-grid small,.emergency-grid strong{display:block}
.emergency-grid small{font:9px var(--label);text-transform:uppercase}
.emergency-grid strong{margin-top:5px;font:clamp(18px,4vw,27px) var(--label)}
.bridge-help{margin-top:15px!important;font-weight:700;text-align:center}

.finish-screen{display:none;min-height:100vh;padding:calc(122px + env(safe-area-inset-top)) max(20px,calc((100vw - 720px)/2)) calc(60px + env(safe-area-inset-bottom));color:white;background:linear-gradient(145deg,var(--deep),var(--blue))}
.finish-screen.active{display:block}
.finish-screen h1{margin-bottom:22px;color:var(--yellow);font-size:clamp(56px,11vw,92px);line-height:.96}
.finish-screen>p:not(.eyebrow){max-width:620px;font-size:20px}
.finish-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:25px 0}
.finish-stats div{padding:19px;border:1px solid rgba(255,255,255,.2);border-radius:20px;background:rgba(255,255,255,.08)}
.finish-stats strong,.finish-stats span{display:block}
.finish-stats strong{color:var(--yellow);font:31px var(--display)}
.finish-stats span{font-size:14px}
.finish-screen .review{margin-top:15px}
.finish-screen .text-button{color:white}

.offline-page{display:grid;min-height:100vh;place-items:center;padding:24px;color:white;background:linear-gradient(145deg,var(--deep),var(--blue))}
.offline-page main{width:min(620px,100%);padding:clamp(26px,6vw,55px);border:2px solid rgba(255,255,255,.2);border-radius:32px;background:rgba(12,18,15,.38);box-shadow:var(--shadow)}
.offline-page h1{margin:0 0 16px;color:var(--yellow);font:clamp(44px,11vw,78px)/1 var(--display)}
.offline-page p{font-size:20px}
.offline-page a{display:inline-flex;min-height:50px;align-items:center;padding:12px 16px;border-radius:15px;color:var(--ink);background:var(--yellow);font:10px var(--label);text-decoration:none;text-transform:uppercase}

@media(max-width:680px){
  body{font-size:17px}
  .topbar{min-height:66px;padding-right:14px;padding-left:14px}
  .brand{font-size:18px}
  .hero{min-height:650px;padding:calc(104px + env(safe-area-inset-top)) 18px 82px}
  .hero::before{background:linear-gradient(90deg,rgba(7,22,16,.93),rgba(7,22,16,.64)),url("assets/media/aventure-60s-poster.jpg") center 56%/cover}
  .hero::after{width:370px;height:650px;right:-80px;top:-270px;border-width:27px}
  .hero h1{font-size:clamp(52px,15vw,69px)}
  .lede{font-size:20px}
  .route-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
  .route-facts div{min-width:0;padding:11px 9px}
  .route-facts strong{font-size:17px}
  .route-facts span{font-size:12px;line-height:1.15}
  .content-stack{width:min(100% - 22px,920px);margin-top:-31px}
  .card,.card-dark{padding:20px;border-radius:25px}
  .route-card{grid-template-columns:minmax(0,1fr) 112px;gap:13px;transform:none}
  .route-preview{height:176px}
  .card-dark{transform:none}
  .checks li{grid-template-columns:34px minmax(0,1fr) auto}
  .battery-row{grid-template-columns:auto 1fr}
  .battery-row strong{text-align:right}
  .compact-info{grid-template-columns:1fr}
  .compact-info>a{grid-column:auto}
  .navigation-screen{padding-top:calc(91px + env(safe-area-inset-top))}
  .nav-head h1{font-size:29px}
  .status-ribbon span{font-size:9px}
  .live-map-card canvas{height:min(47vh,440px)}
  .sub-screen{padding-top:calc(91px + env(safe-area-inset-top))}
  .sub-screen>h1{font-size:clamp(40px,12vw,56px)}
  .back-button{margin-bottom:23px}
  .emergency-grid{grid-template-columns:1fr}
  .finish-screen{padding-top:calc(110px + env(safe-area-inset-top))}
}

@media(max-width:500px){
  .route-card{grid-template-columns:1fr}
  .route-preview{height:210px}
}

@media(max-width:390px){
  .mini-button{padding:8px 10px;font-size:8px}
  .hero h1{font-size:50px}
  .route-facts strong{font-size:15px}
  .route-preview{height:205px}
  .checks li{grid-template-columns:31px minmax(0,1fr)}
  .checks button,.checks li>b{grid-column:2;justify-self:start;min-width:74px}
  .nav-head{align-items:flex-start}
  .nav-head h1{font-size:25px}
  .audio-controls,.nav-actions{grid-template-columns:1fr}
  .audio-controls button:last-child{grid-column:auto}
  .finish-stats{grid-template-columns:1fr}
}

@media(min-width:960px){
  .hero{padding-left:max(7vw,calc((100vw - 1160px)/2));padding-right:max(7vw,calc((100vw - 1160px)/2))}
  .content-stack{width:min(980px,calc(100% - 42px))}
}

@media(forced-colors:active){
  *{forced-color-adjust:auto}
  .hero::before{opacity:.35}
  .route-facts div,.card,.card-dark,.live-map-card,.audio-card,.route-item,.safety-list li{border:2px solid CanvasText}
}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
  .hero::after{display:none}
}