/* Edition 03 — deterministic rendering and progressively enhanced atlas.
   No blur layers, long-running image transforms, or invisible page sections. */
:root { color-scheme: light; }
html, body, #main { background: var(--paper, #f8f6f1); }
html { scroll-behavior: auto; }
.site-header, .site-header.is-scrolled {
  background: #f8f6f1; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none; transition: none; isolation: auto;
}
.hero > .photo img, .photo img, .photo:hover img {
  animation: none; transform: none; filter: none; will-change: auto;
  transition: none;
}
.reveal, .reveal.is-pending, .reveal.is-visible {
  opacity: 1; transform: none; transition: none; animation: none;
}
.hero:after, .page-hero:after { pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .btn, .text-link, .atlas-label, .destination-rail a { transition: background-color .15s, color .15s, border-color .15s; }
  .text-link:hover { gap: 20px; }
}
/* An uninterrupted vertical document on touch devices. */
@media (hover: none), (pointer: coarse) {
  html { scroll-behavior: auto !important; }
  .photo img, .photo:hover img, .reveal, .hero, .atlas-card { transform: none !important; animation: none !important; }
  .detail-panel { position: static; }
}

.atlas-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; align-items: stretch; }
.map-stage {
  height: auto; min-height: 0; aspect-ratio: auto; overflow: visible;
  background: #e7ede6; border: 1px solid #ccd5c8; isolation: auto;
  display: flex; flex-direction: column;
}
.map-heading { position: static; padding: 22px 25px 17px; border: 0; border-bottom: 1px solid #cfd8ca; color: #3c5141; }
.map-heading .eyebrow { font-size: 10px; margin-bottom: 6px; }
.map-heading #map-selected-title { font-size: 17px; max-width: none; line-height: 1.4; }
.map-heading p { margin: 8px 0 0; color: #5a695d; font-size: 12px; line-height: 1.5; }
.atlas-map-canvas {
  position: relative; aspect-ratio: 800 / 920; width: 100%; max-width: 560px;
  margin: auto; flex: none; background: #e7ede6;
  overflow: hidden;
}
.map-stage #croatia-map { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; user-select: none; touch-action: pan-y pinch-zoom; cursor: default; }
#map-geography, #map-points { transition: none; }
#croatia-map .landmass { fill: #f4f1e8; stroke: #c3cfbf; stroke-width: .8; }
#croatia-map .croatia-land { fill: #d0ddc6; }
#croatia-map .map-country { font-size: 11px; fill: #6d7e6b; }
#croatia-map .map-sea { fill: #81958b; }
.atlas-leaders { pointer-events: none; }
.atlas-leaders line { stroke: #7e927a; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .65; }
.atlas-leaders line.is-selected { stroke: #8b703e; stroke-width: 1.5; opacity: 1; }
.map-point-link { cursor: pointer; }
.map-point-hit { fill: transparent; stroke: none; pointer-events: all; }
.map-point { fill: #536b55; stroke: #fffdf7; stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.map-point-link.is-selected .map-point { fill: #99783e; }
.atlas-labels { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.atlas-label {
  position: absolute; left: var(--label-x); top: var(--label-y); width: fit-content; min-width: 130px; max-width: 42%;
  min-height: 44px; display: flex; align-items: center; gap: 9px;
  border: 1px solid #becbbb; border-radius: 3px; background: #fdfbf5;
  padding: 10px 12px; color: #2f4437; box-shadow: 0 2px 5px #233c2410;
  text-decoration: none; pointer-events: auto; line-height: 1.4;
  font-family: var(--sans); font-size: 14px; font-weight: 400;
}
.atlas-label:hover { border-color: #6b7f61; background: #fffefa; }
.atlas-label[aria-pressed="true"] { background: #475d45; border-color: #475d45; color: #fffdf7; }
.atlas-label[aria-pressed="true"] .marker-ordinal { color: #e3e9d9; }
.atlas-label:focus-visible { outline: 3px solid #9b7b42; outline-offset: 3px; }
.marker-ordinal { flex: none; font-size: 11px; letter-spacing: .02em; color: #6c7d66; }
.marker-name { display: block; min-width: 0; overflow-wrap: normal; }
.map-toolbar { min-height: 78px; border-top: 1px solid #cfd8ca; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.map-controls { position: static; display: flex; gap: 7px; }
.map-controls[hidden], .map-finder[hidden], .atlas-pagination[hidden] { display: none; }
.map-controls button { width: 44px; height: 44px; min-width: 44px; border-radius: 2px; background: #fffdf7; font-size: 24px; }
.map-controls .map-reset { width: auto; min-width: 90px; font-size: 12px; padding: 0 12px; letter-spacing: 0; }
.map-controls button:disabled { opacity: .42; }
.map-orientation { display: flex; align-items: center; gap: 16px; white-space: nowrap; color: #64765e; font-size: 13px; }
.map-orientation span { font-size: 9px; letter-spacing: .18em; }
.atlas-card { min-height: 0; }
#atlas-card-content, .atlas-panel:not([hidden]) { display: flex; flex-direction: column; flex: 1; }
.atlas-panel[hidden] { display: none; }
.atlas-panel > .photo { aspect-ratio: 1 / 1.1; min-height: 0; }
.atlas-card h3 { font-size: 38px; }
.atlas-card p { min-height: 0; font-size: 15px; line-height: 1.8; }
.atlas-card-body { padding: 28px; }
.atlas-pagination { margin-top: auto; }
.destination-rail { display: flex; flex-wrap: wrap; overflow: visible; gap: 8px; padding-top: 22px; }
.destination-rail a { display: flex; align-items: center; gap: 9px; min-height: 44px; font-size: 13px; line-height: 1.5; padding: 10px 14px; border: 1px solid #c5d0bf; border-radius: 2px; background: #f5f6ef; color: var(--ink); }
.destination-rail a span { color: #687b60; font-size: 11px; }
.destination-rail a[aria-pressed="true"] { background: #475d45; color: #fffdf7; border-color: #475d45; }
.destination-rail a[aria-pressed="true"] span { color: #e2e8d8; }
.map-selection-hint { font-size: 12px; color: #5d6c5e; margin: 14px 0 0; }
@media(max-width: 1100px) {
  .atlas-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; }
  .atlas-label { font-size: 13px; padding: 9px; gap: 7px; }
  .map-heading { padding: 20px; }
  .atlas-card-body { padding: 24px; }
  .map-orientation span { display: none; }
}
@media(max-width: 850px) {
  .atlas-layout { grid-template-columns: 1fr; gap: 20px; }
  .atlas-map-canvas { max-width: 620px; }
  .atlas-card .atlas-panel:not([hidden]) { display: grid; grid-template-columns: 42% minmax(0, 1fr); }
  .atlas-panel > .photo { height: 100%; aspect-ratio: auto; }
  .atlas-label { font-size: 14px; }
  .map-orientation span { display: inline; }
}
@media(max-width: 560px) {
  .map-stage { height: auto; min-height: 0; }
  .map-heading { padding: 19px 18px 16px; }
  .map-heading #map-selected-title { font-size: 16px; line-height: 1.5; }
  .map-heading p { font-size: 12px; }
  .atlas-map-canvas { max-width: none; }
  .atlas-label { font-size: 12px; line-height: 1.4; padding: 8px; gap: 6px; min-height: 44px; width: 42%; min-width: 0; }
  .marker-ordinal { font-size: 10px; }
  .map-toolbar { padding: 14px; min-height: 73px; }
  .map-orientation span { display: none; }
  .map-controls .map-reset { min-width: 90px; }
  .atlas-card .atlas-panel:not([hidden]) { display: flex; }
  .atlas-panel > .photo { height: auto; aspect-ratio: 1.6; }
  .atlas-card-body { padding: 25px 22px; }
  .atlas-card h3 { font-size: 37px; }
  .destination-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .destination-rail a { min-height: 48px; padding: 10px; font-size: 12px; white-space: normal; }
  .map-selection-hint { font-size: 12px; line-height: 1.7; }
}
@media(max-width: 350px) {
  #explore-map > .wrap { padding-left: 14px; padding-right: 14px; }
  .atlas-label { padding: 7px 5px; gap: 4px; }
  .marker-ordinal { font-size: 9px; }
}
@media(prefers-reduced-motion: reduce) { *, *:before, *:after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print { .map-toolbar, .map-finder, .atlas-pagination { display: none !important; } }

/* In the portable file, native fragments still reveal a destination when a viewer
   blocks scripts. Public-site anchors retain ordinary destination-page URLs. */
#explore-map:not([data-map-ready="true"]) #atlas-card-content .atlas-panel:target { display: flex !important; }
#explore-map:not([data-map-ready="true"]) #atlas-card-content:has(.atlas-panel:target) .atlas-panel:not(:target) { display: none !important; }

.atlas-panel { scroll-margin-top: 105px; }