/* A stationary frame: detail/flight modes hide the band without resizing it. */
.explorer{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;background:var(--paper)}
.landscape{position:relative;inset:auto;grid-row:1;min-height:0;width:100%;height:100%;background:var(--paper);overflow:clip}
.vignette{bottom:var(--chapter-height,190px);background:linear-gradient(180deg,#f6f2e8e8 0,#f6f2e850 15%,#f6f2e800 30%,#f6f2e800 88%,#f6f2e873 100%)}
.chapter-band{position:relative;grid-row:2;z-index:6;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(28px,5vw,90px);padding:17px clamp(24px,3vw,55px) 19px;background:var(--paper);border-top:1px solid #69715b24;min-height:150px}
.timeline{position:relative;inset:auto;width:auto;height:auto;display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:18px;row-gap:12px;align-items:center;min-width:0;z-index:auto}
.timeline-label{grid-column:2;grid-row:1;margin:0;font-size:8px;letter-spacing:.18em}
.timeline-track{grid-column:2;grid-row:2;flex-direction:row;justify-content:space-between;gap:3px;min-width:0}
.timeline-track:before{left:6px;right:6px;top:5px;bottom:auto;border-left:0;border-top:1px solid var(--line)}
.timeline-track button{flex-direction:column;gap:10px;align-items:center;text-align:center;min-width:52px;min-height:60px;padding:0 3px;background:transparent}
.timeline-track button:last-child{padding-bottom:0}
.timeline-track button>span{font-size:24px}
.timeline-track small{font-size:9px;padding-top:4px;white-space:nowrap}
.timeline-track button:focus-visible{outline-offset:1px;border-radius:10px}
.timeline>.life-companion{position:static;grid-column:1;grid-row:1 / 3;display:block;width:72px;margin:0;padding:0;pointer-events:none}
.timeline>.life-companion svg{width:72px;height:49px}
.timeline>.life-companion>span{display:block;font-size:10px;line-height:1.3;margin-top:5px}
.stage-caption{position:static;inset:auto;width:auto;min-width:0;z-index:auto;text-shadow:none;transition:none}
.stage-meta{margin-bottom:7px}
.stage-year{display:none}
.stage-meta .status{border:0;padding:0;font-size:8px}
.stage-caption h2{font-size:clamp(25px,2.4vw,35px);margin-bottom:8px}
.stage-caption>p{max-width:520px;font-size:12px;line-height:1.65}
.stage-caption .explore-hint{display:none}
.is-farm .chapter-band,.is-detail .chapter-band{visibility:hidden;pointer-events:none}
.is-farm .landscape,.is-detail .landscape{inset:auto}
.hotspot[data-edge=left] .hotspot-label{left:50%;text-align:left;max-width:250px;white-space:normal}
.hotspot[data-edge=right] .hotspot-label{right:50%;text-align:right;max-width:250px;white-space:normal}
.hotspot[data-place=farmland] .hotspot-label{top:calc(50% + 24px)}
.hotspot[data-place=buildings] .hotspot-label{bottom:calc(50% + 24px)}
@media(max-width:1050px){
 .chapter-band{grid-template-columns:1fr;gap:16px;padding:17px 25px 20px;min-height:225px}
 .timeline{grid-template-columns:58px minmax(0,1fr);column-gap:16px}
 .timeline>.life-companion{width:58px}.timeline>.life-companion svg{width:58px;height:39px}
 .timeline-track button>span{font-size:22px}.timeline-track button{min-height:54px}
 .stage-caption{padding-left:74px;min-height:100px}.stage-caption h2{font-size:28px}.stage-caption>p{max-width:760px}
 .stage-caption .explore-hint{display:none}
 .header{padding:19px 24px}.heading{top:23px;width:420px}.heading h1{font-size:30px}
}
@media(max-width:760px){
 .header{padding:16px 18px}.heading{top:77px;width:100%;padding-inline:18px}.heading h1{font-size:29px}
 .chapter-band{gap:12px;padding:14px 17px 17px;min-height:226px}
 .timeline{grid-template-columns:1fr;gap:8px}.timeline-label{grid-column:1;grid-row:1;font-size:7px}
 .timeline-track{grid-column:1;grid-row:2;gap:0}.timeline-track button{min-width:49px;min-height:51px;gap:8px}.timeline-track button>span{font-size:21px}.timeline-track small{font-size:8px}
 .timeline>.life-companion{display:none}
 .stage-caption{padding:0;min-height:104px}.stage-caption h2{font-size:27px}.stage-caption>p{font-size:11px;line-height:1.6}
 .stage-meta{margin-bottom:6px}.hotspot{min-width:44px;min-height:44px}.hotspot-label{font-size:23px}
 .hotspot[data-edge=left] .hotspot-label,.hotspot[data-edge=right] .hotspot-label{max-width:165px}
 .vignette{background:linear-gradient(180deg,#f6f2e8ec,#f6f2e842 25%,#f6f2e800 46%,#f6f2e800 90%,#f6f2e856)}
 .scene-image{mask-image:linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent)}
}
@media(max-height:650px){
 .chapter-band{min-height:148px;padding-block:12px;gap:12px}.timeline-label{display:none}.timeline-track{grid-row:1}.timeline>.life-companion{grid-row:1}
 .stage-caption{min-height:0}.stage-caption h2{font-size:25px;margin-bottom:5px}.stage-caption>p{font-size:11px;line-height:1.5}.stage-caption .explore-hint{display:none}
 .header{padding-block:13px}.heading{top:16px}.heading h1{font-size:27px}.header .heading .eyebrow{font-size:8px}
}
@media(max-width:760px) and (max-height:650px){
 .chapter-band{min-height:202px;gap:10px}.heading{top:67px}.heading h1{font-size:24px}.stage-caption h2{font-size:24px}.stage-caption>p{font-size:10px}
}

/* The added sky fills tall screens while the village remains a single unwarped plane. */
.landscape{background:#99cdef}
.sky-extension{position:absolute;inset:0 0 auto;height:calc(var(--sky-height,0px) + 15px);background:#99cdef url('assets/village-sky.webp') center bottom/cover no-repeat;pointer-events:none}
.scene-image{mask-image:linear-gradient(180deg,transparent,#000 10px,#000 100%)}
.explorer[data-stage="2026"] .landscape{background:var(--paper)}
.explorer[data-stage="2026"] .sky-extension{opacity:0}
.vignette{background:linear-gradient(180deg,#f6f2e88a 0,#f6f2e820 12%,transparent 25%,transparent 94%,#f6f2e840)}
@media(max-width:760px){.scene-image{mask-image:linear-gradient(180deg,transparent,#000 5px,#000 100%)}.vignette{background:linear-gradient(180deg,#f6f2e873,transparent 24%,transparent 96%,#f6f2e830)}}