/* One viewport: identity, flexible story area, then an always-visible map menu.
   Content flows in grid rows rather than relying on minimum page heights. */
html, body { margin: 0; min-height: 100%; }
.experience,
.experience[data-view=destination] {
  --page-gutter: clamp(16px, 3.8vw, 64px);
  --page-space: clamp(12px, 2.8dvh, 28px);
  --card-height: clamp(150px, 28dvh, 235px);
  height: 100svh;
  height: 100dvh;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(12px, 2.2dvh, 24px);
  padding: max(var(--page-space), env(safe-area-inset-top)) var(--page-gutter)
    max(var(--page-space), env(safe-area-inset-bottom));
}
.masthead { position: relative; inset: auto; padding: 0; gap: 12px; min-width: 0; }
.masthead nav { flex: none; }
.masthead nav button { min-width: 44px; min-height: 44px; }
.story-stage {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 3vw, 40px);
  padding-inline: 2vw;
}
.intro {
  position: relative;
  inset: auto;
  grid-area: 1 / 1 / 2 / -1;
  max-width: none;
  min-width: 0;
}
.intro .overline { margin: 0; font-size: 9px; }
.intro h1 {
  font-size: clamp(38px, min(5.8vw, 8.5dvh), 90px);
  line-height: 1.02;
  margin: clamp(8px, 1.6dvh, 18px) 0;
}
.intro-text { margin: 0; font-size: 14px; line-height: 1.5; }
.experience[data-view=destination] .intro { display: none; }
.destination-detail {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
  width: auto;
  max-width: none;
  max-height: 100%;
  min-width: 0;
  overflow: auto;
  scrollbar-width: thin;
  padding: 4px 8px 8px 0;
}
.destination-detail h2 {
  font-size: clamp(28px, min(4.7vw, 6.8dvh), 66px);
  line-height: 1.03;
  margin: 12px 0 10px;
  max-width: none;
}
.destination-detail > p:not(.destination-number) { margin: 8px 0; }
.destination-number { top: 10px; font-size: min(120px, 18dvh); }
.enter-map { margin-top: 8px; min-height: 44px; padding: 12px 18px; }
.map-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.edit-map { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d8f67c99; border-radius: 4px; color: #eaf0e3; padding: 12px 18px; margin-top: 8px; min-height: 44px; font-size: 12px; text-decoration: none; }
.edit-map:hover { background: #d8f67c22; }
.edit-map[hidden] { display: none; }
@media(max-width:650px){.map-actions{gap:6px}.edit-map{padding:10px 12px;font-size:11px}}
.not-ready { padding-top: 8px; }
.area-overview {
  position: relative;
  inset: auto;
  grid-area: 1 / 2;
  width: 100%;
  height: min(100%, 300px);
  max-height: 100%;
  min-height: 0;
  transform: none;
}
.area-overview img { object-fit: contain; }
.overview-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #d8f67c88;
  border-radius: 50%;
  color: #e7f5cf;
  background: #102b28ed;
  box-shadow: 0 3px 14px #00181555;
  cursor: pointer;
}
.overview-close:hover { background: #d8f67c; color: #102b28; }
.overview-close:focus-visible { outline: 2px solid #d8f67c; outline-offset: 3px; }
.area-overview .overview-north { left: 12px; right: auto; }
.overview-placeholder { height: calc(100% - 29px); display: grid; place-items: center; padding: 54px 14px 20px; text-align: center; color: #c4d2c9; font-size: 13px; }
.overview-placeholder[hidden] { display: none; }
.destinations {
  position: relative;
  inset: auto;
  justify-self: center;
  min-width: 0;
  width: min(100%, calc(var(--card-height) * 3.6 + 60px));
  transform: none;
}
.destinations-heading { margin-bottom: 12px; }
.village-rail { min-width: 0; }
.village { min-height: 0; aspect-ratio: 3 / 5; }
.experience.is-entering .destinations { transform: translateY(20px); }

@media (max-width: 650px) {
  .experience, .experience[data-view=destination] {
    --page-gutter: 5vw;
    --page-space: clamp(12px, 2.3dvh, 20px);
    --card-height: clamp(177px, 27dvh, 230px);
    gap: clamp(10px, 2dvh, 18px);
  }
  .masthead { padding: 0; }
  .masthead nav button { min-width: 44px; min-height: 44px; padding: 10px 4px; font-size: 12px; }
  .story-stage { padding: 0; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
  .intro h1 { font-size: clamp(30px, min(9vw, 8dvh), 58px); margin: 10px 0; }
  .intro .overline { font-size: 8px; letter-spacing: .09em; }
  .intro-text { font-size: 13px; line-height: 1.5; }
  .destinations { width: 100%; }
  .destinations-heading { margin-bottom: 10px; font-size: 9px; }
  .village-rail { grid-auto-columns: calc(var(--card-height) * .6); margin-bottom: 0; padding-bottom: 10px; }
  .village { padding: 10px 9px 16px; }
  .village-name { font-size: 13px; }
  .village-province { font-size: 10px; }
  .experience[data-view=destination] .story-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(80px, 1fr) auto; align-items: stretch; gap: 10px; }
  .destination-detail { grid-area: 2 / 1; padding: 0; overflow: visible; }
  .detail-top { gap: 8px; font-size: 8px; letter-spacing: .07em; }
  .detail-top button { flex: none; width: 32px; height: 32px; }
  .destination-detail h2 { font-size: clamp(24px, 5.8vw, 34px); margin: 8px 0; }
  .destination-detail > p:not(.destination-number) { font-size: 12px; line-height: 1.4; margin: 6px 0; max-width: none; }
  .enter-map, .edit-map { font-size: 13px; min-width: 44px; min-height: 44px; gap: 10px; padding: 10px 14px; margin-top: 4px; }
  .area-overview { grid-area: 1 / 1; height: 100%; max-height: 230px; align-self: end; }
  .area-overview img { object-fit: cover; padding: 0; height: calc(100% - 25px); }
  .area-overview figcaption { font-size: 10px; line-height: 1.3; padding: 6px 10px; }
  .overview-north { top: 6px; right: 6px; font-size: 9px; }
  .overview-close { top: 6px; right: 6px; }
  .area-overview .overview-north { left: 6px; right: auto; }
  .overview-placeholder { font-size: 12px; height: calc(100% - 25px); padding: 12px 54px; }
}

@media (max-width: 380px) {
  .experience, .experience[data-view=destination] { --page-gutter: 4vw; }
  .masthead { gap: 6px; }
  .identity { gap: 9px; }
  .identity-name { font-size: 24px; }
  .identity small { font-size: 9px; }
  .destinations-heading { gap: 8px; letter-spacing: .05em; }
  .destinations-heading .little-line { width: 10px; margin-right: 4px; }
  .destinations-heading > span > span { font-size: 9px; }
}

/* Short laptop windows and landscape phones keep the menu in the same screen. */
@media (max-height: 600px) {
  .experience, .experience[data-view=destination] {
    --page-space: 12px;
    --card-height: 160px;
    gap: 10px;
  }
  .intro h1 { font-size: clamp(28px, min(5vw, 7dvh), 42px); margin: 8px 0; }
  .intro-text { font-size: 12px; line-height: 1.4; }
  .intro .overline { font-size: 8px; }
  .destination-detail h2 { font-size: clamp(24px, 4vw, 36px); margin: 6px 0; }
  .destination-copy { display: none; }
  .destinations-heading { margin-bottom: 8px; }
  .village { padding: 9px 7px 13px; }
  .village-name { font-size: 12px; margin-bottom: 5px; }
  .village-province { font-size: 10px; }
  .village-num, .north { font-size: 9px; }
  .village-picture.awaited { font-size: 11px; padding-bottom: 25px; }
}

@media (max-height: 450px) {
  .experience, .experience[data-view=destination] { --page-space: 10px; --card-height: 135px; gap: 8px; }
  .identity { gap: 10px; }
  .identity-name { font-size: 24px; }
  .identity small { font-size: 10px; line-height: 1.2; margin-top: 4px; }
  .intro h1 { font-size: 28px; margin: 6px 0; }
  .intro-text { font-size: 11px; line-height: 1.25; }
  .intro .overline { font-size: 7px; }
  .village-rail { gap: 8px; }
  .destinations { width: min(100%, 650px); }
  .village { aspect-ratio: auto; height: var(--card-height); }
  .detail-top button { width: 28px; height: 28px; }
  .destination-detail { padding-top: 0; padding-bottom: 0; }
  .destination-detail h2 { font-size: 25px; margin: 4px 0; }
  .destination-detail > p:not(.destination-number) { line-height: 1.3; margin: 4px 0; }
  .enter-map { margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .experience.is-entering .destinations { transform: none; }
}