/* City refinement: the geography fills the viewport; controls sit at its edges. */
.view-switch { display: flex; align-items: center; gap: 28px; }
body[data-stage="countries"] .view-switch { display: none; }
#about-button { display: flex; align-items: center; justify-content: center; }
#about-button svg { display: none; }
.breadcrumbs { gap: 18px; }
.breadcrumbs button { font-size: 9px; }
.breadcrumbs button[aria-current="page"] { cursor: default; }
body[data-stage="region"] .map-fade {
  background: linear-gradient(0deg, var(--paper), transparent 12%, transparent 94%, var(--paper));
}
body[data-stage="region"] .place-caption { left: 38px; bottom: 32px; }
body[data-stage="region"] .place-caption h1 { font-size: clamp(46px, 5.2vw, 70px); margin: 0; }
body[data-stage="region"] .place-detail { font-size: 8px; margin-top: 10px; }
.map-place { font-size: 8px; letter-spacing: .13em; }
body[data-stage="region"][data-render="survey"] .map-place { color:var(--ink); }
.map-zoom-controls {position:absolute;right:32px;bottom:32px;display:flex;border:1px solid var(--line);background:var(--paper);pointer-events:auto}
.map-zoom-controls button {font-size:20px;line-height:1;width:44px;height:44px;padding:0}
.map-zoom-controls button+button {border-left:1px solid var(--line)}
@media(max-width:760px){.map-zoom-controls{right:20px;bottom:94px}}
@media(max-width:760px){body[data-stage="region"][data-region="kapadokya"] .place-caption{bottom:96px}}
#photo-areas {position:absolute;inset:0;pointer-events:none}
.photo-area-callout {position:absolute;display:flex;align-items:center;min-height:44px;padding:0 4px 0 64px;white-space:nowrap;pointer-events:auto;font-size:11px;line-height:1.3}
.photo-area-callout>svg {position:absolute;left:0;top:0;width:64px;height:44px;overflow:visible;fill:none;stroke:var(--ink);stroke-width:.8;pointer-events:none}
.photo-area-callout.is-left {transform:translateX(calc(-100% + 24px));padding:0 64px 0 4px}
.photo-area-callout.is-left>svg {left:auto;right:0;transform:scaleX(-1)}
.photo-area-cross {transform-origin:12px 22px;animation:photo-area-cross calc(200ms * var(--marker-time-scale,1)) ease-out both}
.photo-area-leader {stroke-dasharray:1;animation:photo-area-leader calc(600ms * var(--marker-time-scale,1)) calc(100ms * var(--marker-time-scale,1)) ease-out both}
.photo-area-name {display:flex;align-items:center;gap:9px;background:#f3f0e9f2;border:1px solid #24272325;animation:photo-area-name calc(250ms * var(--marker-time-scale,1)) calc(500ms * var(--marker-time-scale,1)) ease-out both;padding:5px 9px 5px 5px;text-align:left}
.photo-area-thumb {width:37px;height:30px;object-fit:cover;display:block}
.photo-area-title {display:block;font-size:12px;color:var(--ink)}
.photo-area-count {display:block;font-size:9px;color:var(--muted);margin-top:3px}
.photo-area-preview {position:absolute;bottom:calc(100% + 6px);left:64px;width:170px;background:var(--paper);padding:5px;border:1px solid var(--line);opacity:0;transform:translateY(7px);pointer-events:none;transition:opacity 180ms,transform 180ms}
.photo-area-preview img {width:100%;height:120px;object-fit:cover;display:block}
.photo-area-preview>span {display:block;font-size:8px;color:var(--muted);padding:6px 2px 2px;white-space:normal}
.photo-area-callout.is-left .photo-area-preview {left:auto;right:64px}
.photo-area-callout.preview-below .photo-area-preview {bottom:auto;top:calc(100% + 6px)}
.photo-area-callout:is(:hover,:focus-visible) {z-index:10}
.photo-area-callout:is(:hover,:focus-visible) .photo-area-preview {opacity:1;transform:translateY(0)}
@keyframes photo-area-cross {from{transform:scale(0)}to{transform:scale(1)}}
@keyframes photo-area-leader {from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes photo-area-name {from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.photo-area-cross,.photo-area-leader,.photo-area-name{animation:none}.photo-area-preview{transition:none}}
@media(hover:none){.photo-area-preview{display:none}}
/* Photograph-level reading scale, independent of the geographic map labels. */
body[data-stage="photo"] .breadcrumbs button,
body[data-stage="photo"] .breadcrumbs span,
body[data-stage="photo"] .collection-nav button{font-size:14px}
body[data-stage="photo"] .breadcrumbs{gap:20px}
body[data-stage="photo"] #photo-return{font-size:14px;min-height:44px}
body[data-stage="photo"] #photo figcaption{font-size:13px;line-height:1.6;gap:32px;flex-wrap:wrap;justify-content:center}
body[data-stage="photo"] .photo-actions{gap:48px;bottom:20px}
body[data-stage="photo"] .photo-actions button{font-size:14px;min-height:44px;min-width:44px}
body[data-stage="photo"] #enter-spatial{padding-inline:14px;font-size:14px}
@media(max-width:760px){
 body[data-stage="photo"] .breadcrumbs button,body[data-stage="photo"] .breadcrumbs span{font-size:12px}
 body[data-stage="photo"] .breadcrumbs{gap:12px}
 body[data-stage="photo"] #photo-return{font-size:13px}
 body[data-stage="photo"] #photo figcaption{font-size:12px;gap:8px 22px}
 body[data-stage="photo"] .photo-actions{gap:24px;bottom:24px}
 body[data-stage="photo"] .photo-actions button{font-size:13px}
 body[data-stage="photo"] #enter-spatial{font-size:13px}
}
.map-place:nth-last-child(1) { transform: translate(-50%, -50%) rotate(-53deg); }
dialog#about {
  width: min(560px, calc(100vw - 64px));
  max-width: 560px;
  max-height: calc(100dvh - 70px);
  padding: 25px 38px 36px;
  overflow: auto;
  scrollbar-width: thin;
}
.about-header { display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.about-header button { color: var(--muted); font-size: 10px; }
#about h1 { font-size: 50px; line-height: 1; margin: 27px 0 23px; }
#about p { font-size: 11px; line-height: 1.8; max-width: 390px; }
#about .about-note { color: var(--muted); font-size: 10px; margin-top: 19px; }
.about-credits { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 28px; }
#about .about-credits p { font-size: 9px; margin: 16px 0 0; color: var(--muted); }
.about-credits a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.about-credits p span { font-size: 8px; }
@media (max-width: 760px) {
  .product-header { top: 14px; left: 22px; right: 16px; align-items: center; }
  .breadcrumbs { gap: 10px; min-width: 0; }
  .breadcrumbs button { font-size: 8px; white-space: nowrap; }
  .breadcrumbs span { font-size: 8px; }
  .collection-nav { margin-left: auto; gap: 0; }
  #about-button { width: 44px; height: 44px; padding: 10px; color: var(--muted); }
  #about-button > span { display: none; }
  #about-button svg { display: block; }
  .view-switch {
    position: fixed;
    right: 18px;
    bottom: max(20px, env(safe-area-inset-bottom));
    gap: 2px;
    padding: 3px;
    border: 1px solid #d6d4cbcc;
    border-radius: 28px;
    background: #f3f0e9f2;
    box-shadow: 0 2px 14px #24272306;
  }
  .collection-nav .view-switch #terrain-tab,
  .collection-nav .view-switch #photos-tab {
    display: block;
    position: static;
    font-size: 9px;
    min-height: 44px;
    padding: 9px 14px;
    border-radius: 22px;
    color: var(--muted);
    text-decoration: none;
  }
  .collection-nav .view-switch button[aria-pressed="true"] {
    background: var(--ink);
    color: var(--paper) !important;
  }
  body[data-stage="countries"] .view-switch,
  body[data-stage="photo"] .view-switch,
  body[data-stage="perspective"] .view-switch { display: none; }
  body[data-stage="region"] .place-caption { left: 22px; bottom: 29px; }
  body[data-stage="region"] .place-caption h1 { font-size: 44px; }
  body[data-stage="region"] .place-detail { display: none; }
  body[data-stage="region"] .map-fade {
    background: linear-gradient(0deg, var(--paper), transparent 12%, transparent 95%, var(--paper));
  }
  #country .place-caption { left: 22px; bottom: 29px; }
  #country .place-caption h1 { font-size: 44px; margin-top: 10px; }
  #country .place-caption .small-label { display: none; }
  #unplaced { bottom: 90px; right: 24px; }
  #photo-return { top: 72px; }
  #photo figure { inset: 120px 22px 110px; }
  #grid { padding: 94px 23px 105px; }
  .grid-heading { margin-bottom: 28px; }
  dialog#about {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    max-width: none;
    max-height: 86dvh;
    margin: 0;
    padding: 17px 27px max(30px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    border-radius: 0;
  }
  #about h1 { font-size: 44px; margin-top: 24px; }
  #about p { font-size: 10px; line-height: 1.8; }
  #about .about-note { font-size: 9px; }
  .about-header .small-label { font-size: 8px; }
  .about-header button { font-size: 9px; }
  .about-credits { padding-top: 19px; margin-top: 24px; }
  #about .about-credits p { font-size: 9px; }
  dialog#about[open] { animation: about-arrive 280ms cubic-bezier(.2,.7,.2,1); }
  @keyframes about-arrive { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
}
/* The geographic cross remains fixed while its caption is fitted to the viewport. */
.photo-area-callout,.photo-area-callout.is-left {width:0;height:44px;min-width:0;padding:0;transform:none}
.photo-area-callout>svg,.photo-area-callout.is-left>svg {left:var(--anchor-x,0px);right:auto;transform:none}
.photo-area-name {position:absolute;left:var(--caption-x,64px);top:50%;transform:translateY(-50%)}
.photo-area-preview,.photo-area-callout.is-left .photo-area-preview {left:var(--caption-x,64px);right:auto}

/* Cards can move independently of the fixed cross; the leader bridges both. */
.photo-area-callout,.photo-area-callout.is-left {pointer-events:none}
.photo-area-name {top:var(--caption-y,0px);transform:none;pointer-events:auto}
.photo-area-preview,.photo-area-callout.is-left .photo-area-preview {top:auto;bottom:calc(44px - var(--caption-y,0px) + 6px)}
.photo-area-callout.preview-below .photo-area-preview {top:calc(var(--caption-y,0px) + 48px);bottom:auto}
.photo-area-callout:focus-visible {outline:none}
.photo-area-callout:focus-visible .photo-area-name {outline:2px solid var(--petrol);outline-offset:4px}

/* One explicit city-map stack: context stays behind opaque photo index cards. */
body[data-stage="region"] #map-labels{isolation:isolate}
body[data-stage="region"] .country-symbols{z-index:1}
body[data-stage="region"] .transport-motion{z-index:2}
body[data-stage="region"] #photo-areas{z-index:3}
body[data-stage="region"] .photo-area-name{background:var(--paper)}