/* Atlas Vivo, with the journey beside the map and quieter, readable place cards. */
body:not(.immersive) main{grid-template-columns:minmax(0,1fr) minmax(310px,350px);align-items:start}
body:not(.immersive) .world,body:not(.immersive) #place{min-width:0;min-height:0}
body:not(.immersive) #place{overflow:hidden}
body:not(.immersive) .map-top .map-heading{max-width:none}

body:not(.immersive) .world>.journey{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:12px 18px 0;padding:16px 18px;border:1px solid #e3bd7840;border-radius:12px;background:linear-gradient(115deg,#1c3538,#10272d)}
.world>.journey .journey-symbol{display:none}
.world>.journey .journey-info{min-width:0}
.world>.journey .eyebrow{font-size:10px;line-height:1.6;letter-spacing:1.3px;color:#ddc596}
.world>.journey h2{font-size:clamp(22px,2.2vw,28px);margin:5px 0;line-height:1.2;overflow-wrap:anywhere}
.world>.journey p{font-size:14px;line-height:1.5;margin:7px 0 10px;color:#c3d3cc}
.world>.journey progress{display:block;width:100%;max-width:240px;height:6px}
.world>.journey .journey-actions{margin:0;width:100%;display:flex;flex-wrap:wrap;gap:8px}
.world>.journey .journey-actions button{min-height:44px;min-width:44px;font-size:14px}
.world>.journey #play{flex:1 1 160px;padding:12px 16px}
.world>.journey #browse-routes{width:auto;flex:0 1 auto}
.world>.journey [hidden]{display:none!important}

.guide,.world:has(#map-peek:not([hidden])) .guide{grid-template-columns:124px minmax(0,1fr);gap:12px;padding:20px 18px 16px;border-color:#7dc4b64a}
.guide-title strong{font-size:28px}
.guide-title span{font-size:13px;color:#bcd0c9}
#guide-caption{font-size:16px;line-height:1.65;margin:10px 0 14px;max-height:158px;color:#e0e9e2}
.guide-character .mundi-puppet{width:124px;height:124px}
#mundi-state{font-size:12px}
.guide .narration-controls{display:flex;flex-wrap:wrap;gap:8px}
.guide .narration-controls button{font-size:14px;min-height:46px;padding:11px 14px}
#narration-play{background:var(--gold);border-color:var(--gold);color:#12292e;font-weight:700;flex:1 1 135px}
#narration-play:hover{background:#f4d59c}
#narration-settings{flex:0 1 auto;background:#ffffff04}
.audio-progress{gap:8px;flex-wrap:wrap}
.audio-progress progress{min-width:100px;flex:1 1 140px}
.audio-progress span{font-size:12px;color:#bcd0c9}
#narration-tools,#narration-transcript{grid-column:1/-1;margin-top:8px;font-size:14px;color:#c6d7d1}
#narration-tools summary,#narration-transcript summary{display:list-item;min-height:44px;padding:12px 0;line-height:1.4;color:#e3bd78;cursor:pointer}
.playback-tools{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.playback-tools button{min-height:44px;padding:10px 13px;border:1px solid #ffffff25;border-radius:6px;font-size:14px}
#audio-seek{min-height:40px}
#narration-transcript p{font-size:16px;line-height:1.7}

#place .place-content{padding:0 22px 22px;min-width:0}
#place .place-title{font-size:clamp(34px,3vw,42px);overflow-wrap:anywhere}
#place .place-description{font-size:16px;line-height:1.75;color:#d5e1db}
#place .location{font-size:11px;line-height:1.7;overflow-wrap:anywhere}
#place .place-actions{padding:0 0 18px;gap:8px}
#place .place-actions button{font-size:14px;min-height:44px}
#place .place-disclosure{margin:0;border:0;border-top:1px solid #afc6bb29;border-radius:0;background:transparent;padding:0}
#place .place-disclosure>summary{min-height:52px;padding:16px 2px;line-height:1.4;font:500 15px/1.4 'DM Sans',sans-serif;color:#dfd8bc;cursor:pointer;overflow-wrap:anywhere}
#place .place-disclosure>summary::marker{color:var(--gold)}
#place .place-disclosure[open]>summary{color:var(--gold)}
#place .place-disclosure>:not(summary){margin-bottom:18px}
#place .historical-context{padding:0;border:0;border-radius:0;margin-top:0;background:none}
#place .historical-context p,#place .fact p,#place .time-comparison p{font-size:15px;line-height:1.75}
#place .fact{margin:2px 0 18px}
#place .reflection{margin-top:0}
#place .reflection textarea{width:100%;max-width:100%;font-size:16px}
#place [data-place-section=sources]>.source-link{display:block;padding:10px 0;margin:0 0 4px;min-height:44px;font-size:14px;overflow-wrap:anywhere}
#place .place-disclosure .source-link{overflow-wrap:anywhere}
body:not(.immersive) .timebar{margin:0}

@media(min-width:1400px){
 body:not(.immersive) .world>.journey{grid-template-columns:minmax(0,1fr) minmax(260px,auto);align-items:center}
 .world>.journey .journey-actions{max-width:340px;justify-self:end}
}
@media(max-width:1024px){
 body:not(.immersive) header{height:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding-top:12px;padding-bottom:0}
 body:not(.immersive) header .header-actions{grid-column:2;grid-row:1}
 body:not(.immersive) header nav{display:flex;grid-column:1/-1;grid-row:2;width:100%;overflow-x:auto;justify-content:flex-start;gap:20px;min-width:0;scrollbar-width:thin}
 body:not(.immersive) header nav .nav{flex:0 0 auto;white-space:nowrap;min-height:44px}
 body:not(.immersive) main{display:flex;flex-direction:column;padding:16px 16px 0;gap:16px}
 body:not(.immersive) .world,body:not(.immersive) main>aside{width:100%;min-width:0;min-height:0}
 body:not(.immersive) .timebar{width:100%}
 body:not(.immersive) #globe{height:clamp(350px,58vw,500px)}
 body:not(.immersive) #place .place-photo{height:clamp(200px,32vw,300px)}
}
@media(max-width:600px){
 body:not(.immersive) main{padding:12px 10px 0;gap:14px}
 body:not(.immersive) .world>.journey{margin:12px 10px 0;padding:14px;gap:12px}
 body:not(.immersive) #globe{height:clamp(330px,100vw,420px)}
 .guide,.world:has(#map-peek:not([hidden])) .guide{grid-template-columns:96px minmax(0,1fr);padding:16px 12px 12px;gap:8px 12px;margin:0 10px 12px;width:calc(100% - 20px)}
 .guide-content{display:contents}
 .guide-character{grid-column:1;grid-row:1/3}
 .guide-character .mundi-puppet{width:100px;height:100px}
 .guide-title{grid-column:2;padding-right:26px;display:block}
 .guide-title strong{font-size:26px}
 .guide-title span{font-size:12px;line-height:1.5}
 #guide-caption{grid-column:2;font-size:16px;line-height:1.55;max-height:150px;margin:4px 0 10px}
 #mundi-state{max-width:96px;font-size:12px}
 .guide .narration-controls{display:flex;grid-column:1/-1}
 .guide .narration-controls button:last-child{grid-column:auto}
 #place .place-content{padding:0 18px 18px}
 .view-switch button{white-space:normal;line-height:1.3}
 .immersive .guide,.immersive .world:has(#map-peek:not([hidden])) .guide{margin:0}
}
@media(max-width:360px){
 .guide,.world:has(#map-peek:not([hidden])) .guide{grid-template-columns:80px minmax(0,1fr);gap:8px}
 .guide-character .mundi-puppet{width:84px;height:84px}
 #mundi-state{max-width:80px}
 #guide-caption{grid-column:1/-1;max-height:130px}
 .guide-character{grid-row:1}
}
