:root {
  --sky-0: oklch(0.13 0.05 265);
  --navy: oklch(0.19 0.07 263);
  --navy-deep: oklch(0.15 0.06 266);
  --cream: oklch(0.9 0.05 88);
  --text: oklch(0.96 0.012 250);
  --text-dim: oklch(0.83 0.04 252);
  --line: oklch(0.9 0.04 250 / 0.3);
  --river: oklch(0.74 0.14 238);
  --river-hi: oklch(0.87 0.09 232);
  --river-core: oklch(0.985 0.012 230);
  --popup-bg: oklch(0.165 0.065 264 / 0.97);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: clamp(16px, calc(8px + 0.65vw), 40px);
  background: var(--sky-0);
  scrollbar-color: oklch(0.45 0.08 250) var(--sky-0);
  scrollbar-width: thin;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--sky-0);
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: oklch(0.74 0.14 238 / 0.45); color: #fff; }

:focus-visible {
  outline: 2px solid var(--river-hi);
  outline-offset: 4px;
  border-radius: 2px;
}

[lang="sr-Cyrl"] { font-feature-settings: "locl" 1; }

/* ───────── Sky ───────── */

.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(to bottom, oklch(0.2 0.08 262), var(--sky-0) 75%);
}

.sky__layer {
  position: absolute;
  inset: 0;
  transform: translate3d(calc(var(--mx, 0) * -12px), calc(var(--my, 0) * -8px - var(--sy, 0) * 0.07px), 0);
  will-change: transform;
}
.sky__layer--mid {
  transform: translate3d(calc(var(--mx, 0) * -26px), calc(var(--my, 0) * -16px - var(--sy, 0) * 0.16px), 0);
}

.sky canvas, .sky img { display: block; }

#photo {
  position: absolute;
  inset: -12%;
  width: 124%; height: 124%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2.4s ease-out;
  animation: drift-photo 200s ease-in-out infinite alternate;
}
.sky.is-painted #photo { opacity: 0.58; } /* faded so the lettering stays readable */
@keyframes drift-photo {
  from { transform: translate3d(1%, 0.5%, 0) scale(1); }
  to   { transform: translate3d(-1.5%, -1%, 0) scale(1.08); }
}

#clouds {
  position: absolute;
  left: 52%;
  top: 38%;
  opacity: 0;
  transition: opacity 2.4s ease-out;
}
#clouds {
  width: 130vmax; height: 130vmax;
  margin: -65vmax 0 0 -65vmax;
  animation: drift-mid 120s ease-in-out infinite alternate;
}
.sky.is-painted #clouds { opacity: 0.85; }

@keyframes drift-far {
  from { transform: translate3d(0, 0, 0) rotate(-1.2deg) scale(1); }
  to   { transform: translate3d(-2.2%, 1.6%, 0) rotate(2.2deg) scale(1.06); }
}
@keyframes drift-mid {
  from { transform: translate3d(1.8%, -1%, 0) rotate(1.5deg) scale(1.04); }
  to   { transform: translate3d(-2.6%, 1.4%, 0) rotate(-1.8deg) scale(1); }
}

.sky__stars { position: absolute; inset: 0; width: 100%; height: 100%; }

.sky__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, oklch(0.12 0.055 266 / 0.92) 0%, oklch(0.12 0.055 266 / 0.55) 22%, transparent 48%),
    radial-gradient(ellipse 85% 75% at 50% 32%, transparent 40%, oklch(0.09 0.05 266 / 0.75) 100%);
}

.frame {
  position: fixed;
  inset: 0.65rem;
  z-index: 5;
  pointer-events: none;
  border: 1px solid var(--line);
}
.frame::after {
  content: "";
  position: absolute;
  inset: 0.28rem;
  border: 1px solid oklch(0.9 0.04 250 / 0.14);
}

/* ───────── Stage ───────── */

.stage {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(clamp(22rem, 54svh, 52rem), 1fr) auto auto;
  padding-inline: clamp(1.1rem, 2.6vw, 2.8rem);
}

.head {
  padding-top: clamp(1.4rem, 4svh, 3rem);
  text-align: center;
  animation: rise 1.4s var(--ease-out) 0.15s both;
}

h1 {
  margin: 0;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
  font-size: clamp(1.25rem, min(2.8vw, 5svh), 2.8rem);
  text-wrap: balance;
  text-shadow: 0 2px 28px oklch(0.1 0.06 266 / 0.8);
}
h1 span { display: block; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ───────── Map ───────── */

.map {
  position: relative;
  margin-inline: calc(clamp(1.1rem, 2.6vw, 2.8rem) * -1);
}

.river {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bgmap {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  z-index: -1;
  pointer-events: none;
}

.bm { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bm-border { stroke: oklch(0.86 0.07 245 / 0.5); stroke-width: calc(1.3px * var(--k, 1)); }
.bm-trib   { stroke: oklch(0.8 0.09 240 / 0.4); stroke-width: calc(1.2px * var(--k, 1)); }

.rv {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rv-wide { stroke: var(--river);    stroke-width: calc(var(--k, 1) * 30px); opacity: 0.07; }
.rv-mid  { stroke: var(--river);    stroke-width: calc(var(--k, 1) * 18px); opacity: 0.12; }
.rv-soft { stroke: var(--river-hi); stroke-width: calc(var(--k, 1) * 11px); opacity: 0.2; }
.rv-edge { stroke: oklch(0.82 0.1 236); stroke-width: calc(var(--k, 1) * 6.5px); opacity: 0.95; }
.rv-core { stroke: var(--river-core); stroke-width: calc(var(--k, 1) * 2.6px); }

.rv-flow {
  stroke: #fff;
  opacity: 0;
  transition: opacity 1.6s ease-out;
}
.map.is-flowing .rv-flow { opacity: 1; }
.rv-flow-a {
  stroke-width: calc(var(--k, 1) * 3.4px);
  stroke-dasharray: 0.5 17.5;
  stroke: oklch(0.99 0.01 230 / 0.85);
  animation: flow-a 70s linear infinite;
}
.rv-flow-b {
  stroke-width: calc(var(--k, 1) * 2px);
  stroke-dasharray: 9 151;
  stroke: oklch(0.93 0.05 232 / 0.7);
  animation: flow-b 36s linear infinite;
}
@keyframes flow-a { to { stroke-dashoffset: -1080; } }
@keyframes flow-b { to { stroke-dashoffset: -960; } }

.rv-glints { opacity: 0; transition: opacity 1.6s ease-out; }
.map.is-flowing .rv-glints { opacity: 1; }
.glint circle:nth-child(1) { fill: var(--river); opacity: 0.1; }
.glint circle:nth-child(2) { fill: var(--river-hi); opacity: 0.28; }
.glint circle:nth-child(3) { fill: #fff; }

.rv-pen { opacity: 0; }
.rv-pen circle:nth-child(1) { fill: var(--river); opacity: 0.16; }
.rv-pen circle:nth-child(2) { fill: var(--river-hi); opacity: 0.45; }
.rv-pen circle:nth-child(3) { fill: #fff; }

/* City markers */

.cities { position: absolute; inset: 0; pointer-events: none; }

.city {
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.city::before { /* 48px touch target */
  content: "";
  position: absolute;
  width: 48px; height: 48px;
  left: -24px; top: -24px;
  border-radius: 50%;
}

.city__dot {
  position: absolute;
  left: 0; top: 0;
  width: 1.3rem; height: 1.3rem;
  margin: -0.65rem 0 0 -0.65rem;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff 0%, oklch(0.9 0.05 235) 70%);
  box-shadow:
    0 0 0 3px oklch(0.19 0.07 263),
    0 0 0 4.5px oklch(0.92 0.05 232 / 0.95),
    0 2px 22px 3px oklch(0.74 0.14 238 / 0.6);
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.5s ease-out, transform 0.7s var(--ease-out);
}
.city__dot::after {
  content: "";
  position: absolute;
  inset: -4.5px;
  border-radius: 50%;
  border: 1px solid oklch(0.92 0.06 232);
  opacity: 0;
}
.city.is-lit .city__dot { opacity: 1; transform: none; }
.city.is-lit .city__dot::after { animation: ping 3.6s var(--ease-out) var(--ping-delay, 0s) infinite; }

@keyframes ping {
  0%   { transform: scale(1);   opacity: 0.8; }
  70%  { transform: scale(3.1); opacity: 0; }
  100% { transform: scale(3.1); opacity: 0; }
}

.city.is-lit:hover .city__dot,
.city.is-hot .city__dot,
.city[aria-expanded="true"] .city__dot {
  transform: scale(1.22);
  transition-duration: 0.3s;
}

.city__label {
  position: absolute;
  top: 0;
  display: grid;
  gap: 0.02em;
  text-align: left;
  font-size: clamp(0.82rem, 1.55vw, 1.4rem);
  line-height: 1.16;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
  text-shadow: 0 1px 2px oklch(0.08 0.05 266 / 0.95), 0 0 16px oklch(0.08 0.05 266 / 0.85);
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.9s ease-out 0.1s, color 0.3s;
  pointer-events: none;
}
.city__label b { font-weight: 500; }

.city__thumb {
  display: block;
  height: clamp(2.3rem, 3.6vw, 3.6rem);
  width: auto;
  margin-bottom: 0.35rem;
  padding: 0.25rem 0.35rem 0;
  border: 1px solid oklch(0.9 0.05 250 / 0.28);
  border-radius: 0.45rem;
  background: oklch(0.14 0.06 266 / 0.72);
  box-shadow: 0 6px 18px oklch(0.05 0.05 266 / 0.6);
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px) scale(0.6);
  transform-origin: 50% 100%;
  transition: opacity 0.35s ease-out 0.35s, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s, border-color 0.3s;
}
.city.is-lit .city__thumb { opacity: 0.92; transform: none; }
.city.is-pass .city__thumb { animation: bump 1.6s var(--ease-out); }
.city.is-pass .city__dot { animation: flare 1.6s var(--ease-out); }
.city:hover .city__thumb, .city.is-hot .city__thumb { border-color: oklch(0.92 0.06 235 / 0.8); opacity: 1; }
.city[data-side="left"] .city__label { justify-items: end; }
.city[data-side="below"] .city__label,
.city[data-side="above"] .city__label { justify-items: center; }

@keyframes bump {
  0%, 100% { transform: none; }
  30% { transform: translateY(-6px) scale(1.12); border-color: oklch(0.95 0.08 235 / 0.9); }
}
@keyframes flare {
  0%, 100% { box-shadow: 0 0 0 3px oklch(0.19 0.07 263), 0 0 0 4.5px oklch(0.92 0.05 232 / 0.95), 0 2px 22px 3px oklch(0.74 0.14 238 / 0.6); }
  35% { box-shadow: 0 0 0 3px oklch(0.19 0.07 263), 0 0 0 4.5px #fff, 0 0 38px 12px oklch(0.8 0.14 238 / 0.9); }
}
.city.is-lit .city__label { opacity: 1; }

.city[data-side="right"] .city__label { left: 1.55rem; }
.city[data-side="ne"] .city__label { left: 1.5rem; top: auto; bottom: -0.5em; transform: none; }
.city[data-side="left"]  .city__label { right: 1.55rem; text-align: right; }
.city[data-side="below"] .city__label { top: 1.5rem; left: 0; transform: translateX(-50%); text-align: center; }
.city[data-side="above"] .city__label { top: auto; bottom: 1.5rem; left: 0; transform: translateX(-50%); text-align: center; }
.city[data-city="belgrade"][data-side="above"] .city__label { transform: translateX(-32%); } /* clear of the river arriving from Dalj */

.map[data-active] .city:not([aria-expanded="true"]):not(.is-hot) .city__label { opacity: 0.5; }
.city:hover .city__label, .city.is-hot .city__label { color: #fff; }

/* Quote */

.quote {
  position: absolute;
  left: clamp(1.6rem, 7vw, 8rem);
  bottom: 6%;
  margin: 0;
  max-width: min(30rem, 30vw);
  font-style: italic;
  font-size: clamp(0.98rem, 1.55vw, 1.55rem);
  line-height: 1.35;
  color: oklch(0.95 0.02 250);
  text-shadow: 0 1px 14px oklch(0.08 0.05 266 / 0.85);
  animation: rise 1.6s var(--ease-out) 3.4s both;
}
.quote p { margin: 0 0 0.12em; text-wrap: balance; }

.map[data-mode="port"] .quote { top: 0.3rem; bottom: auto; left: 1.4rem; right: 1.4rem; max-width: none; text-align: center; font-size: clamp(0.95rem, 4.2vw, 1.3rem); }

/* ───────── Strip ───────── */

.strip {
  position: relative;
  margin-inline: calc(clamp(1.1rem, 2.6vw, 2.8rem) * -1);
  padding-inline: clamp(0.6rem, 2vw, 2.4rem);
  padding-top: clamp(1.2rem, 7svh, 4.5rem); /* keeps the last city label clear of the buildings */
  background: linear-gradient(to bottom, transparent 0, oklch(0.13 0.06 266 / 0.55) 40%, oklch(0.13 0.06 266 / 0.8) 100%);
  animation: rise 1.4s var(--ease-out) 0.7s both;
}

.places {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.place + .place { border-left: 1px solid var(--line); }

.place__btn {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto auto auto auto 1fr;
  justify-items: center;
  align-content: start;
  text-align: center;
  cursor: pointer;
  padding: 0 clamp(0.6rem, 1.4vw, 1.6rem) 0.7rem;
  -webkit-tap-highlight-color: transparent;
}
.place__btn:focus-visible { outline: 2px solid var(--river-hi); outline-offset: -4px; }

.place__img {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(7rem, 20svh, 16rem);
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 6px 14px oklch(0.06 0.05 266 / 0.55));
  transition: filter 0.5s var(--ease-out);
}
.place:hover .place__img, .place.is-hot .place__img, .place.is-active .place__img {
  filter: brightness(1.14) drop-shadow(0 6px 14px oklch(0.06 0.05 266 / 0.55));
}

.names {
  display: grid;
  margin-top: 0.6rem;
  font-size: clamp(0.95rem, min(1.6vw, 2.9svh), 1.5rem);
  line-height: 1.12;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.names b { font-weight: 500; }

.rule {
  display: block;
  width: min(100%, 17rem);
  height: 12px;
  margin: 0.4rem 0;
  background:
    linear-gradient(var(--line), var(--line)) left center / calc(50% - 12px) 1px no-repeat,
    linear-gradient(var(--line), var(--line)) right center / calc(50% - 12px) 1px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cg fill='none' stroke='%23c9d8f5' stroke-width='1'%3E%3Cpath d='M8 1.2 12.4 6 8 10.8 3.6 6Z'/%3E%3Ccircle cx='2.2' cy='6' r='1.3'/%3E%3Ccircle cx='13.8' cy='6' r='1.3'/%3E%3C/g%3E%3C/svg%3E") center / 16px 12px no-repeat;
}

.years {
  font-size: clamp(0.95rem, 1.3vw, 1.2rem);
  letter-spacing: 0.04em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--text-dim);
}

.inst {
  display: grid;
  align-content: start;
  font-size: clamp(0.72rem, min(1vw, 1.9svh), 0.95rem);
  line-height: 1.18;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--text);
  text-wrap: balance;
}

.place .note { display: none; }
.popup .note {
  display: grid;
  gap: 0.15rem;
  margin-top: 0.9rem;
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.28;
  color: var(--text);
  text-wrap: balance;
}

.place__btn:hover .names, .place.is-hot .names, .place.is-active .names { color: #fff; }

/* ───────── Credit ───────── */

.credit {
  position: relative;
  padding: 0.2rem clamp(0.6rem, 2vw, 2.4rem) 1rem;
  margin-inline: calc(clamp(1.1rem, 2.6vw, 2.8rem) * -1);
  background: oklch(0.14 0.06 266 / 0.9);
}
.credit__map { border-top: 0 !important; padding-top: 0.2rem !important; font-size: 0.72rem !important; opacity: 0.8; }
.credit p {
  margin: 0 auto;
  max-width: 62rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: clamp(0.74rem, 0.95vw, 0.9rem);
  letter-spacing: 0.02em;
  color: var(--text-dim);
  text-wrap: balance;
}

/* ───────── Popup ───────── */

.popup {
  --ax: 50%;
  position: fixed;
  z-index: 20;
  left: 0; top: 0;
  width: min(23rem, calc(100vw - 2rem));
  max-height: calc(100svh - var(--bar-h, 5.6rem) - 2rem);
  overflow: auto;
  background: var(--popup-bg);
  border: 1px solid oklch(0.9 0.05 250 / 0.38);
  box-shadow: 0 18px 50px -8px oklch(0.05 0.05 266 / 0.8), 0 4px 14px oklch(0.05 0.05 266 / 0.5);
  visibility: hidden;
  opacity: 0;
  transform: translate(var(--sx, 0), var(--sy, 10px));
  transition: opacity 0.16s ease-out, transform 0.16s ease-out, visibility 0s linear 0.16s;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.popup.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.32s var(--ease-out), transform 0.45s var(--ease-out), visibility 0s;
}
.popup[data-side="above"] { --sy: -10px; }
.popup[data-side="right"] { --sx: -10px; --sy: 0px; }
.popup[data-side="left"]  { --sx: 10px;  --sy: 0px; }

.popup__arrow {
  position: absolute;
  left: var(--ax);
  width: 12px; height: 12px;
  background: var(--popup-bg);
  border: 1px solid oklch(0.9 0.05 250 / 0.38);
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}
.popup[data-side="below"] .popup__arrow { top: -7px; border-right: 0; border-bottom: 0; }
.popup[data-side="above"] .popup__arrow { bottom: -7px; border-left: 0; border-top: 0; }
.popup[data-side="right"] .popup__arrow { left: -7px; top: var(--ay); transform: translateY(-50%) rotate(45deg); border-top: 0; border-right: 0; }
.popup[data-side="left"]  .popup__arrow { left: auto; right: -7px; top: var(--ay); transform: translateY(-50%) rotate(45deg); border-left: 0; border-bottom: 0; }
.popup[data-side="sheet"] .popup__arrow { display: none; }

.popup__img {
  display: block;
  width: 100%;
  aspect-ratio: 1.7;
  object-fit: cover;
  object-position: 50% 24%;
}

.popup__close {
  all: unset;
  position: sticky;
  top: 0.6rem;
  z-index: 2;
  margin: 0.6rem 0.6rem -3.1rem auto; /* stays pinned while the card scrolls, takes no room */
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  cursor: pointer;
  color: oklch(0.2 0.07 264);
  border-radius: 50%;
  background: oklch(0.95 0.025 250 / 0.94);
  box-shadow: 0 2px 10px oklch(0.05 0.05 266 / 0.55);
  transition: background 0.2s, transform 0.2s;
}
.popup__close:hover { background: #fff; transform: scale(1.08); }
.popup__close:focus-visible { outline: 2px solid var(--river-hi); outline-offset: 2px; }
.popup__close svg { width: 1.15rem; height: 1.15rem; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }

.popup__body {
  display: grid;
  justify-items: center;
  text-align: center;
  padding: 0.2rem 1.5rem 1.3rem;
}
.popup .names { margin-top: 0; font-size: 1.7rem; }
.popup .years { font-size: 1.2rem; }
.popup .inst { font-size: 0.98rem; }
.popup .rule { width: 100%; }

.popup__nav {
  width: 100%;
  margin-top: 1rem;
  padding-top: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid oklch(0.9 0.04 250 / 0.14);
}
.popup__count { font-size: 0.9rem; letter-spacing: 0.12em; color: oklch(0.85 0.03 250); font-variant-numeric: tabular-nums; }
.popup__step {
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid oklch(0.9 0.04 250 / 0.25);
  border-radius: 50%;
  background: transparent;
  color: oklch(0.92 0.03 250);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.popup__step:hover { background: oklch(0.3 0.08 255 / 0.9); color: #fff; border-color: oklch(0.9 0.05 250 / 0.5); }
.popup__step:focus-visible { outline: 2px solid var(--river-hi); outline-offset: 2px; }
.popup__step svg { width: 1rem; height: 1rem; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.timeline { width: 100%; margin-top: 1.1rem; }
.timeline__axis {
  position: relative;
  display: block;
  height: 1px;
  background: var(--line);
}
.timeline__seg {
  position: absolute;
  top: -2px;
  height: 5px;
  background: var(--river-hi);
  border-radius: 3px;
  box-shadow: 0 0 12px oklch(0.74 0.14 238 / 0.7);
  transform-origin: left center;
  animation: grow 0.9s var(--ease-out) 0.15s both;
}
@keyframes grow { from { transform: scaleX(0); } to { transform: none; } }
.timeline__ends {
  display: flex;
  justify-content: space-between;
  margin-top: 0.55rem;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-variant-numeric: lining-nums tabular-nums;
}

@media (max-width: 719px) {
  .popup[data-side="sheet"] {
    left: 0.75rem !important; top: auto !important;
    bottom: calc(0.75rem + env(safe-area-inset-bottom));
    width: calc(100% - 1.5rem);
    max-height: min(74svh, calc(100svh - var(--bar-h, 4.2rem) - 1.5rem));
    border-radius: 0.6rem;
    --sx: 0px; --sy: 40px;
  }
  .popup[data-side="sheet"] .popup__img { aspect-ratio: 1.55; object-position: 50% 22%; }
}

/* ───────── Narrow screens ───────── */

@media (max-width: 719px) {
  .stage { grid-template-rows: auto auto auto auto; }
  .map { height: min(150vw, 74svh); min-height: 30rem; }
  h1 { font-size: min(4.5vw, 1.5rem); }
  .places { grid-template-columns: 1fr 1fr; }
  .place:nth-child(3) { border-left: 0; }
  .place:nth-child(n+3) { border-top: 1px solid var(--line); padding-top: 1.1rem; }
  .place:nth-child(2n) { border-left: 1px solid var(--line); }
  .place__img { width: 100%; height: 40vw; max-height: 15rem; object-fit: contain; object-position: 50% 100%; }
  .names { font-size: 1.1rem; }
  .inst { font-size: 0.74rem; }
}

@media (min-width: 720px) and (max-width: 1000px) {
  .names { font-size: 1.05rem; }
}

/* ───────── Reduced motion ───────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
  .rv-flow, .rv-glints { display: none; }
}

/* ───────── Language ───────── */

html[data-lang="hr"] :is(h1, .quote, .names, .city__label, .inst, .note) [lang]:not([lang="hr"]),
html[data-lang="sr"] :is(h1, .quote, .names, .city__label, .inst, .note) [lang]:not([lang="sr-Cyrl"]),
html[data-lang="en"] :is(h1, .quote, .names, .city__label, .inst, .note) [lang]:not([lang="en"]) { display: none; }

.bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 5.6rem;
  padding: 0 clamp(1rem, 2.6vw, 2.8rem);
  background: #fff;
  box-shadow: 0 1px 0 oklch(0.85 0.01 250), 0 6px 18px oklch(0.1 0.05 266 / 0.25);
}
.bar__home { display: block; height: 100%; padding: 0.45rem 0; }
.bar__home img { display: block; height: 100%; width: auto; }
.bar__home:focus-visible { outline: 2px solid oklch(0.5 0.15 255); outline-offset: 2px; }

.lang {
  display: flex;
  padding: 0.18rem;
  border: 1px solid oklch(0.85 0.01 250);
  border-radius: 999px;
}
.lang button {
  all: unset;
  box-sizing: border-box;
  min-width: 2.6rem;
  padding: 0.38rem 0.7rem;
  text-align: center;
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  color: oklch(0.4 0.03 255);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.lang button:hover { color: oklch(0.2 0.07 264); }
.lang button[aria-pressed="true"] { background: oklch(0.25 0.08 264); color: #fff; }
.lang button:focus-visible { outline: 2px solid var(--river-hi); outline-offset: 2px; }

@media (max-width: 719px) {
  .bar { height: 4.2rem; }
  .lang button { min-width: 2.3rem; padding: 0.32rem 0.55rem; font-size: 0.85rem; }
}