*{box-sizing:border-box}body{margin:0;background:#b8d2db;color:#fff;font-family:Arial,sans-serif;font-size:16px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}#scene,.shade{position:fixed;inset:0}.shade{pointer-events:none;background:linear-gradient(180deg,rgba(8,29,38,.82),transparent 48%,rgba(8,29,38,.66))}canvas{display:block;width:100%;height:100%;touch-action:none}header{position:relative;display:flex;justify-content:space-between;align-items:center;padding:28px 4vw}.brand{display:flex;gap:14px;align-items:center;font-family:Georgia,serif;font-size:38px;color:#edc584}.brand span{font:600 15px Arial;color:#fff;letter-spacing:2px}.brand small{display:block;font-size:11px;letter-spacing:1.5px;margin-top:7px}header button,.controls button{background:#143640b8;border:1px solid #ffffff60;color:white;border-radius:8px;padding:12px 16px}main{position:relative;padding:28px 4vw;pointer-events:none}.intro{max-width:660px}.eyebrow{font-size:12px;letter-spacing:2px;color:#efc584;font-weight:bold}h1{font:normal clamp(32px,4.3vw,62px)/1.08 Georgia,serif;margin:18px 0}p{line-height:1.6;max-width:480px}nav{display:flex;gap:10px;margin-top:25px;flex-wrap:wrap;pointer-events:auto}nav button{display:flex;align-items:center;gap:10px;color:white;background:#0e2c36dd;border:1px solid #ffffff45;padding:15px 18px;border-radius:8px;box-shadow:0 6px 22px #0002}nav i{color:#edc584;font-size:12px;font-style:normal}nav button:hover,nav button:focus-visible{background:#285361;border-color:#edc584}.controls{position:fixed;bottom:110px;left:4vw;display:flex;align-items:center;gap:14px;pointer-events:auto}.controls span{font-size:13px;text-shadow:0 1px 4px #000}footer{position:fixed;bottom:0;left:0;right:0;padding:24px 4vw;display:flex;align-items:center;justify-content:space-between;gap:16px;background:#0c2630e8}footer span{font-size:12px;color:#bbccd1}.cta{display:inline-block;background:#eac083;color:#142c34;font-weight:bold;padding:15px 22px;border-radius:6px}.cta:hover{background:#f7d9aa}aside{position:fixed;right:4vw;top:24%;width:390px;max-width:92vw;background:#0c2630f5;border:1px solid #78929a;border-radius:14px;padding:30px;box-shadow:0 20px 80px #0005}aside h2{font:normal 34px/1.12 Georgia;margin:20px 0}aside p,aside li{color:#d7e2e6;font-size:16px;line-height:1.55}aside ul{padding-left:20px;margin-bottom:26px}#close{position:absolute;right:12px;top:8px;font-size:28px;background:none;border:0;color:white}button:focus-visible,a:focus-visible{outline:3px solid #ffd089;outline-offset:4px}body.simple #scene{opacity:.15}body.simple .shade{background:#0c2630d9}body.simple nav{max-width:630px}body.simple nav button{flex:1 0 45%}.simple .controls{display:none}@media(max-width:650px){header{padding:20px}.brand{font-size:30px}.brand span{font-size:11px;letter-spacing:1px}.brand small{font-size:9px}header button{font-size:12px;padding:10px}main{padding:16px 20px}h1{font-size:36px}.intro p{font-size:14px;max-width:310px}nav{gap:8px;margin-top:18px}nav button{font-size:13px;padding:12px;flex:1 0 43%}footer{padding:16px 20px}footer span{max-width:120px;font-size:10px}.cta{font-size:13px;padding:14px}aside{top:auto;bottom:87px;right:4vw;padding:24px;max-height:65vh;overflow:auto}aside h2{font-size:28px}.controls{bottom:105px;left:20px;right:20px;justify-content:center}.controls span{font-size:11px}.controls button{padding:9px 14px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

#walk{background:#eac083;color:#142c34;border-color:#eac083;font-weight:bold}#walking-controls{position:fixed;bottom:100px;right:4vw;pointer-events:auto;display:flex;align-items:center;gap:18px}#walking-controls[hidden]{display:none}.walk-help{text-align:right;font-size:14px;text-shadow:0 1px 5px #000}.walk-help span{font-size:12px}.dpad{display:grid;grid-template-columns:48px 48px 48px;grid-template-rows:48px 48px;gap:6px;touch-action:none}.dpad button{background:#102e39e8;border:1px solid #edc584aa;color:#ffe0af;border-radius:10px;font-size:24px;user-select:none;touch-action:none}.dpad button.active{background:#edc584;color:#102e39}.dpad button[data-move=up]{grid-column:2}.dpad button[data-move=left]{grid-column:1;grid-row:2}.dpad button[data-move=down]{grid-column:2;grid-row:2}.dpad button[data-move=right]{grid-column:3;grid-row:2}body.walking .intro h1{font-size:30px}body.walking .intro p,body.walking .intro .eyebrow{display:none}body.walking nav{margin-top:12px}body.walking .controls{bottom:110px}body.walking aside{z-index:5}@media(max-width:650px){body.walking .intro{display:none}body.walking nav{margin-top:0}#walking-controls{bottom:100px;right:20px;flex-direction:column;gap:8px}.walk-help{font-size:11px}.walk-help span{display:none}body.walking .controls{left:20px;right:auto;bottom:111px;gap:7px}body.walking #walk{font-size:11px;padding:12px 9px}body.walking .controls>button:not(#walk){padding:9px;font-size:18px}.dpad{grid-template-columns:44px 44px 44px;grid-template-rows:44px 44px}}

/* A clear exploration surface: quiet branding, route rail and unobstructed city. */
header{padding:22px 3vw;background:linear-gradient(#0c26308c,transparent)}.header-tools{display:flex;gap:8px}header button{font-size:13px;padding:10px 14px;border-color:#ffffff30;backdrop-filter:blur(12px)}main{position:static;padding:0}.shade{background:linear-gradient(180deg,#0c263045,transparent 35%,#0c263045)}.intro{position:fixed;left:3vw;bottom:126px;width:420px;padding:26px;background:#0c2630e8;border:1px solid #ffffff25;border-radius:14px;backdrop-filter:blur(15px);pointer-events:auto}h1{font-size:42px;line-height:1.08;margin:15px 0}.intro p{font-size:15px;margin-bottom:20px}.intro .cta{border:0;font-size:14px}.route-heading{position:fixed;left:3vw;top:116px;font-size:10px;letter-spacing:1.8px;font-weight:bold;text-shadow:0 1px 4px #000}.route-heading span{margin-left:15px;color:#ffe0af}nav{position:fixed;left:3vw;top:143px;display:flex;flex-direction:column;margin:0;gap:7px}nav button{min-width:224px;background:#0c2630de;padding:12px 15px;font-size:14px;backdrop-filter:blur(14px);text-align:left;border-radius:8px}nav button.visited i{background:#edc584;color:#102e39;border-radius:50%;padding:5px;font-size:10px}nav button.selected{border-color:#edc584;background:#244651}.controls{left:auto;right:3vw;bottom:113px;gap:8px}.controls>button{backdrop-filter:blur(12px)}footer{padding:20px 3vw;background:#0c2630f2}aside{right:3vw;top:135px;bottom:auto;width:380px;border-color:#eac08355;backdrop-filter:blur(18px);max-height:calc(100dvh - 245px);overflow:auto}aside h2{margin:14px 0}aside .cta{display:block;text-align:center}#next-stop{display:block;width:100%;background:transparent;border:0;color:#e8c88e;font-size:13px;margin-top:16px;padding:7px}#walking-controls{right:3vw;bottom:173px;flex-direction:column;gap:10px}.walk-help{text-align:center}.dpad{display:none}#joystick{width:104px;height:104px;border-radius:50%;background:#102e398c;border:1px solid #fff6;position:relative;touch-action:none;box-shadow:inset 0 0 0 15px #ffffff08;backdrop-filter:blur(12px)}#stick{width:42px;height:42px;position:absolute;left:30px;top:30px;border-radius:50%;background:#edc584;border:3px solid #fce8c5;box-shadow:0 4px 16px #0004;pointer-events:none}body.walking .intro{display:none}body.walking .controls{left:auto;right:3vw;bottom:113px}#travel-status{position:fixed;bottom:115px;left:50%;transform:translateX(-50%);background:#102e39ef;color:#ffe0af;border:1px solid #edc58455;padding:12px 20px;border-radius:40px;font-size:14px;max-width:80vw;text-align:center;pointer-events:none}body.simple .intro{display:block}body.simple nav{max-width:none}body.simple nav button{flex:none}.simple .route-heading{display:block}@media(max-width:650px){header{padding:16px}.brand{font-size:26px;gap:8px}.brand span{font-size:10px}.brand small{font-size:8px;letter-spacing:.7px}.header-tools{gap:5px}header button{font-size:10px;padding:9px 8px}.route-heading{left:16px;top:85px;font-size:9px}.route-heading span{margin-left:8px}nav,body.walking nav{left:16px;right:16px;top:106px;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0}nav button{min-width:0;font-size:12px;padding:10px;gap:7px}.intro{left:16px;right:16px;bottom:133px;width:auto;padding:20px;max-width:360px}h1{font-size:32px}.intro .eyebrow{font-size:9px}.intro p{font-size:13px;margin:10px 0 15px}.intro .cta{padding:12px 16px;font-size:12px}.controls,body.walking .controls{right:16px;left:auto;bottom:92px;gap:5px}#walk,body.walking #walk{font-size:11px;padding:10px}.controls button{padding:8px 10px}footer{padding:12px 16px;min-height:72px}footer span{font-size:9px;max-width:105px}footer .cta{font-size:11px;padding:12px}#walking-controls{right:19px;bottom:150px}.walk-help{font-size:10px;max-width:100px}#joystick{width:94px;height:94px}#stick{left:25px;top:25px}aside{top:auto;bottom:86px;right:16px;width:calc(100% - 32px);max-height:calc(100dvh - 285px);padding:22px}aside p,aside li{font-size:14px}aside h2{font-size:28px}aside ul{margin-bottom:18px}#travel-status{left:16px;transform:none;bottom:99px;max-width:48vw;font-size:11px;padding:9px 13px}body.simple .intro{bottom:110px}}

.journey-choices{display:grid;gap:8px;margin:18px 0}.journey-choices button{padding:13px 15px;text-align:left;border:1px solid #ffffff35;border-radius:7px;color:#f0f5f6;background:#173640;font-size:15px;line-height:1.35}.journey-choices button:hover,.journey-choices button.chosen{border-color:#edc584;background:#31515a}.journey-feedback p{font-size:14px}.journey-feedback strong{color:#edc584;font-size:15px}.method-note{border-left:2px solid #edc584;padding-left:12px;font-size:13px!important;color:#c4d7dc!important}.journey-next{width:100%;padding:13px;background:#edc584;border:0;border-radius:6px;color:#102e39;font-weight:bold;font-size:14px;margin:12px 0 0}.journey-next[hidden]{display:none}.journey-skip{display:block;width:100%;padding:10px;margin:6px 0 10px;background:transparent;color:#c4d7dc;border:0;font-size:12px;text-decoration:underline}.journey-summary{padding-left:20px;margin-bottom:22px}.journey-summary li{margin-bottom:10px}#journey[hidden]{display:none}@media(max-width:650px){.journey-choices{gap:6px;margin:12px 0}.journey-choices button{font-size:13px;padding:11px 12px}.journey-feedback p{font-size:13px}aside:has(#journey:not([hidden])){max-height:calc(100dvh - 200px)}}

.intro .tour-hint{font-size:12px;line-height:1.5;color:#c4d7dc;margin:12px 0 0}

/* Keep navigation, introduction and branding in separate vertical bands. */
@media(min-width:651px){
 .route-heading{top:91px;left:3vw}
 nav,body.walking nav,body.simple nav{top:114px;left:3vw;right:auto;width:min(940px,94vw);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;max-width:none}
 nav button{min-width:0;padding:12px 14px;font-size:13px}
 .intro,body.simple .intro{left:3vw;bottom:110px;width:400px;max-height:calc(100dvh - 290px);overflow:auto;padding:22px}
 .intro h1{font-size:32px;line-height:1.12;margin:13px 0}
 .intro .eyebrow{font-size:10px}
 .intro p{font-size:14px;margin:12px 0 16px}
 .intro .tour-hint{font-size:12px;margin:10px 0 0}
 aside{top:176px;max-height:calc(100dvh - 280px)}
}
@media(min-width:651px) and (max-width:900px){
 nav,body.walking nav,body.simple nav{width:94vw;grid-template-columns:repeat(2,minmax(0,1fr))}
 .intro,body.simple .intro{max-height:calc(100dvh - 340px)}
 aside{top:225px;max-height:calc(100dvh - 320px)}
}
@media(max-width:650px){.intro,body.simple .intro{max-height:calc(100dvh - 330px);overflow:auto}}
@media(max-height:500px) and (min-width:651px){
 header{padding-top:12px;padding-bottom:12px}.brand{font-size:28px}.brand small{font-size:9px}
 .route-heading{top:63px}nav,body.walking nav,body.simple nav{top:82px;grid-template-columns:repeat(4,minmax(0,1fr));width:94vw}
 .intro,body.simple .intro{bottom:87px;max-height:calc(100dvh - 220px);padding:16px}
 .intro h1{font-size:24px}.intro p{font-size:12px}.intro .eyebrow{display:none}
 footer{padding-top:12px;padding-bottom:12px}.controls,body.walking .controls{bottom:86px}
 aside{top:135px;max-height:calc(100dvh - 220px)}
}

#cinematic{position:fixed;left:0;right:0;bottom:108px;text-align:center;z-index:6;pointer-events:none;text-shadow:0 2px 12px #000}#cinematic[hidden]{display:none}#cinematic span{display:block;font-size:12px;letter-spacing:3px;margin-bottom:16px;color:#fff0d9}#skip-intro{pointer-events:auto;border:1px solid #ffffff60;background:#102e39c9;color:white;border-radius:30px;padding:10px 18px;font-size:13px}.entering main{visibility:hidden}.ricardo-portrait{display:block;width:100%;height:210px;object-fit:cover;object-position:40% 23%;border-radius:8px;margin:16px 0 22px}aside:has(.ricardo-portrait){max-height:calc(100dvh - 260px)}@media(max-width:650px){#cinematic{bottom:108px;padding:0 20px}#cinematic span{font-size:10px;letter-spacing:2px}.ricardo-portrait{height:165px}aside:has(.ricardo-portrait){max-height:calc(100dvh - 190px)}footer .whatsapp-link{max-width:195px;text-align:center;font-size:11px}}

#area-info{position:fixed;right:3vw;top:82px;pointer-events:auto;background:#102e39bd;border:1px solid #fff4;color:#e1e9eb;font-size:12px;border-radius:6px;padding:8px 12px}#area-info.selected{border-color:#edc584}@media(max-width:1100px) and (min-width:651px){#area-info{top:72px}}@media(max-width:650px){#area-info{top:73px;right:16px;padding:5px 9px;font-size:10px}.route-heading{letter-spacing:1px}nav button{font-size:11px}}.entering #area-info{visibility:hidden}

#music[aria-pressed=true]{border-color:#edc584;color:#ffe0ad}@media(max-width:650px){header{align-items:flex-start}.header-tools{display:grid;grid-template-columns:auto auto;gap:4px}.header-tools #music{grid-column:1 / -1;justify-self:end;padding:5px 9px}.header-tools button{font-size:9px;padding:6px 8px}.brand{margin-top:5px}}

.example-note{font-size:12px!important;line-height:1.5;color:#e7c894!important;background:#ffffff08;border:1px solid #e7c89430;border-radius:6px;padding:10px 12px;margin:12px 0}footer>span{max-width:330px}@media(max-width:650px){footer>span{max-width:130px;font-size:9px}}

#visit-site{position:fixed;right:3vw;top:82px;pointer-events:auto;background:#102e39bd;border:1px solid #fff4;color:#e1e9eb;font-size:12px;border-radius:6px;padding:8px 12px}nav .your-house{border-color:#edc584;color:#ffe0ad;background:#2e4443}.entering #visit-site{visibility:hidden}@media(min-width:901px){nav,body.walking nav,body.simple nav{grid-template-columns:repeat(5,minmax(0,1fr));width:min(1000px,94vw)}}@media(min-width:651px) and (max-width:900px){nav,body.walking nav,body.simple nav{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:650px){#visit-site{top:73px;right:16px;padding:5px 9px;font-size:10px}.intro,body.simple .intro{max-height:calc(100dvh - 380px)}aside:has(#journey:not([hidden])){max-height:calc(100dvh - 240px)}}@media(max-height:500px) and (min-width:651px){nav,body.walking nav,body.simple nav{grid-template-columns:repeat(5,minmax(0,1fr))}#visit-site{top:51px;padding:5px 9px;font-size:10px}}

.portrait-frame{position:relative;overflow:hidden;width:100%;height:235px;margin:16px 0 22px;border-radius:8px;background:#17232b}.portrait-frame .ricardo-portrait{position:absolute;display:block;width:155%;max-width:none;height:auto;left:0;top:-32px;margin:0;border-radius:0}aside:has(.portrait-frame){max-height:calc(100dvh - 260px)}@media(max-width:650px){.portrait-frame{height:215px}.portrait-frame .ricardo-portrait{top:-28px}aside:has(.portrait-frame){max-height:calc(100dvh - 190px)}}

@media(min-width:901px){nav,body.walking nav,body.simple nav{grid-template-columns:repeat(6,minmax(0,1fr));width:min(1150px,94vw)}nav button{font-size:12px;padding:11px 10px;gap:6px}.intro,body.simple .intro{max-height:calc(100dvh - 310px)}}@media(max-height:500px) and (min-width:651px){nav,body.walking nav,body.simple nav{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* Six stages and a clear destination state, including during the journey. */
nav button.selected{border:2px solid #f1ce91;background:#355762;box-shadow:0 0 0 2px #eac08325}
nav button.travelling{background:#eac083;color:#102e39;border-color:#fff1d5}
nav button.travelling i{color:#102e39;background:transparent}
nav button.travelling::after{content:'A caminho';font-size:12px;margin-left:auto;font-weight:bold}
#reopen-panel{position:fixed;right:3vw;bottom:170px;z-index:5;background:#102e39;color:#ffe0ad;border:1px solid #eac083;border-radius:8px;padding:13px 18px;min-height:44px;font-size:14px}
#reopen-panel[hidden]{display:none}
#close{min-width:44px;min-height:44px;z-index:2}
@media(min-width:901px){nav,body.walking nav,body.simple nav{grid-template-columns:repeat(7,minmax(0,1fr));width:94vw}nav button{font-size:14px;flex-wrap:wrap;padding:10px;min-height:56px}nav button.travelling::after{width:100%;margin:0}aside{top:194px;max-height:calc(100dvh - 280px)}.intro,body.simple .intro{max-height:calc(100dvh - 320px)}}
@media(min-width:651px) and (max-width:900px){nav,body.walking nav,body.simple nav{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;width:94vw;padding-bottom:5px}nav button{flex:0 0 172px;min-height:56px;font-size:14px}aside{top:190px;max-height:calc(100dvh - 280px)}}
/* Phone layout: one swipeable route rail, open city and a readable bottom sheet. */
@media(max-width:650px){
 body{--safe-bottom:env(safe-area-inset-bottom,0px)}
 header{padding:12px 12px 0;display:flex;flex-wrap:wrap;gap:9px;align-items:center;position:fixed;inset:0 0 auto;z-index:3;background:linear-gradient(#0c2630f2,#0c2630b0,transparent)}
 .brand{font-size:28px;gap:9px;margin:0;min-height:32px}.brand span{font-size:12px;letter-spacing:.8px}.brand small{font-size:10px;letter-spacing:0;margin-top:4px}
 .header-tools{display:flex;gap:6px;width:100%;justify-content:flex-start}.header-tools button,.header-tools #music{font-size:14px;padding:9px 10px;min-height:44px;grid-column:auto;white-space:nowrap}
 #visit-site{top:15px;right:12px;z-index:4;font-size:12px;padding:8px;max-width:70px;text-align:center;line-height:1.35}
 .brand{padding-right:75px}
 .route-heading{top:119px;left:12px;font-size:12px;letter-spacing:.4px;right:12px;display:flex;justify-content:space-between}.route-heading span{margin-left:8px;white-space:nowrap}
 nav,body.walking nav,body.simple nav{top:143px;left:12px;right:0;width:calc(100% - 12px);max-width:none;display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:8px;padding:3px 12px 9px 2px;scroll-padding-inline:12px;scrollbar-width:thin;scrollbar-color:#eac083 #102e39;pointer-events:auto}
 nav button,body.simple nav button{flex:0 0 158px;min-width:0;min-height:52px;font-size:14px;padding:10px;line-height:1.3;gap:7px;flex-wrap:wrap;align-content:center}nav i{font-size:12px}nav button.visited i{font-size:12px;padding:3px}nav button.travelling::after{width:100%;margin:0;font-size:12px}
 .intro,body.simple .intro{left:12px;right:12px;bottom:calc(82px + var(--safe-bottom));width:auto;max-width:none;max-height:calc(100dvh - 310px - var(--safe-bottom));padding:20px;overflow:auto}.intro h1{font-size:30px}.intro p{font-size:16px;max-width:none;line-height:1.45;margin:12px 0}.intro .eyebrow{font-size:12px}.intro .cta{font-size:16px;padding:14px;min-height:48px;width:100%}.intro .tour-hint{font-size:14px}
 aside,aside:has(#journey:not([hidden])),aside:has(.portrait-frame),aside:has(.ricardo-portrait){left:8px;right:8px;top:auto;bottom:calc(72px + var(--safe-bottom));width:auto;max-width:none;max-height:min(52dvh,calc(100dvh - 285px - var(--safe-bottom)));padding:22px 18px;border-radius:18px 18px 10px 10px;overflow-y:auto;overscroll-behavior:contain;z-index:6;scrollbar-width:thin}
 aside h2{font-size:26px;padding-right:24px;line-height:1.15;margin:12px 0}aside p,aside li,.journey-feedback p{font-size:16px;line-height:1.5}aside .eyebrow{font-size:12px;letter-spacing:.8px;display:block;padding-right:30px}.example-note,.method-note{font-size:14px!important}.journey-choices button{font-size:16px;padding:13px;min-height:48px}.journey-next{font-size:16px;padding:15px;min-height:48px}.journey-skip{font-size:14px;min-height:44px}.journey-feedback strong{font-size:16px}aside .cta{font-size:16px;padding:15px}
 footer{min-height:64px;padding:8px 12px calc(8px + var(--safe-bottom));z-index:7;gap:8px}footer>span{font-size:12px;max-width:110px;line-height:1.3}footer .whatsapp-link{font-size:14px;max-width:none;text-align:center;padding:12px;min-height:44px;flex:1}
 .controls,body.walking .controls{left:auto;right:12px;bottom:calc(79px + var(--safe-bottom));gap:6px;z-index:4}.controls button,.controls #walk,body.walking #walk{font-size:14px;padding:10px;min-height:44px}.controls>button:not(#walk){min-width:44px;font-size:22px}
 #walking-controls{left:12px;right:auto;bottom:calc(79px + var(--safe-bottom));z-index:4;gap:5px}.walk-help{font-size:12px;max-width:100px}.walk-help span{display:none}#joystick{width:90px;height:90px}#stick{left:23px;top:23px}
 body:has(#panel:not([hidden])) .controls,body:has(#panel:not([hidden])) #walking-controls{display:none}
 body:not(.walking) .controls{display:none}body.simple #walking-controls,body.simple .controls{display:none}
 #travel-status{top:213px;bottom:auto;left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);width:max-content;font-size:14px;padding:10px 16px;z-index:4;line-height:1.3}
 #reopen-panel{left:12px;right:auto;bottom:calc(191px + var(--safe-bottom));font-size:14px;padding:12px}
 #cinematic{bottom:calc(90px + var(--safe-bottom))}.portrait-frame{height:215px}
}
@media(max-width:650px) and (max-height:600px){.intro h1{font-size:24px}.intro .tour-hint{display:none}aside,aside:has(#journey:not([hidden])),aside:has(.portrait-frame){max-height:calc(100dvh - 245px)}.intro,body.simple .intro{max-height:calc(100dvh - 285px);padding:14px}}
@media(max-height:500px) and (min-width:651px){header{padding:8px 3vw}.route-heading{top:60px}nav,body.walking nav,body.simple nav{top:82px;display:flex;flex-wrap:nowrap;overflow-x:auto;flex-direction:row}nav button{flex:0 0 165px;min-height:48px}aside{top:145px;max-height:calc(100dvh - 220px)}}

@media(max-width:650px){.brand{flex:1;min-width:0}.brand span{min-width:0}.brand small{max-width:180px;font-size:9px;line-height:1.25}.header-tools button,.header-tools #music{flex:1;padding-inline:6px}}
@media(max-width:340px){.header-tools button,.header-tools #music{font-size:13px}.brand{font-size:25px}.brand span{font-size:11px}.route-heading{font-size:11px}}
@media(min-width:651px){aside:has(.portrait-frame),aside:has(.ricardo-portrait){max-height:calc(100dvh - 280px)}}
@media(max-width:360px){.controls #walk,body.walking #walk{max-width:116px;font-size:13px;line-height:1.2}.controls{gap:4px}.controls>button:not(#walk){padding:8px;min-width:40px}}

/* Keep travel information in its own bottom band, away from the route cards. */
nav button.travelling::after{content:none}
body.travelling .controls,body.travelling #walking-controls{display:none}
#travel-status{top:auto;bottom:110px;z-index:4;line-height:1.4;max-width:calc(100vw - 32px)}
@media(max-width:650px){
 #travel-status{top:auto;bottom:calc(88px + env(safe-area-inset-bottom,0px));left:16px;right:16px;transform:none;width:auto;max-width:none;border-radius:12px;padding:13px 16px;font-size:14px}
 nav button,body.simple nav button{min-height:56px}
}
/* A single header row owns the site link; route cards keep a stable layout. */
#visit-site{position:static;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:10px 14px;font-size:13px;max-width:none;line-height:1.2;white-space:nowrap;background:#102e39dd;border:1px solid #eac08388;border-radius:8px}
.header-tools{align-items:center}
nav button{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;align-content:center;flex-wrap:nowrap;gap:7px;height:60px;font-size:13px;line-height:1.3}
nav i,nav button.visited i{display:flex;align-items:center;justify-content:center;width:24px;height:24px;font-size:12px;padding:0;border-radius:50%}
nav button.selected{border-width:1px;box-shadow:0 0 0 2px #f1ce9180}
@media(min-width:651px){header{padding-top:18px;padding-bottom:18px;gap:16px}.brand{font-size:32px}.brand span{font-size:13px}.brand small{font-size:10px;letter-spacing:.6px}.header-tools{gap:7px}.header-tools button{font-size:12px;padding:9px 10px;min-height:40px}#visit-site{font-size:12px;padding:9px 10px}.route-heading{top:86px}nav,body.walking nav,body.simple nav{top:112px}.intro,body.simple .intro{bottom:106px;max-height:calc(100dvh - 296px);padding:20px}.intro h1{font-size:30px;margin:10px 0}.intro p{font-size:15px;margin:12px 0}.intro .tour-hint{font-size:13px}.intro .eyebrow{font-size:11px}aside{top:194px}}
@media(min-width:651px) and (max-width:850px){.brand{gap:8px;font-size:28px}.brand span{font-size:11px}.brand small{font-size:9px;letter-spacing:0}.header-tools{gap:4px}.header-tools button,#visit-site{padding:8px;font-size:11px}}
@media(max-width:650px){
 .brand{padding-right:0}.header-tools{display:flex;align-items:stretch;gap:5px;max-width:100%}
 .header-tools button,.header-tools #music,#visit-site{flex:1;min-width:0;min-height:44px;padding:6px 4px;font-size:12px;line-height:1.25;white-space:normal}
 #visit-site{position:static;top:auto;right:auto;max-width:none;z-index:auto}
 nav button,body.simple nav button{display:grid;grid-template-columns:24px minmax(0,1fr);height:60px;min-height:60px;font-size:14px;gap:6px}
 .intro .tour-hint{font-size:13px}.intro p{font-size:15px}.intro .cta{font-size:15px}
}
@media(max-height:500px) and (min-width:651px){header{padding:8px 3vw}.route-heading{top:60px}nav,body.walking nav,body.simple nav{top:82px}nav button{height:48px;min-height:48px}.intro,body.simple .intro{bottom:86px;max-height:calc(100dvh - 230px);padding:14px}.intro h1{font-size:24px}.intro p{font-size:13px}.intro .tour-hint{font-size:12px}aside{top:146px;max-height:calc(100dvh - 230px)}}
.method-highlights{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.intro .method-highlights p{margin:0;padding:10px;border:1px solid #edc58455;border-radius:7px;background:#ffffff08;line-height:1.3}
.method-highlights strong{display:block;font-size:21px;color:#f0cc93}
.method-highlights span{display:block;font-size:12px;color:#d7e2e6;margin-top:5px}
@media(min-width:651px){.intro h1{font-size:27px;line-height:1.1;margin:9px 0}.intro .tour-hint{font-size:12px;line-height:1.4;margin-top:10px}.intro .cta{padding:12px 14px}.intro .method-highlights{margin:12px 0}.intro .eyebrow{letter-spacing:1.3px}}
@media(max-width:650px){.method-highlights strong{font-size:22px}.method-highlights span{font-size:12px}}