:root {
  color-scheme: dark;
  --night: #081625;
  --deep: #050e19;
  --cream: #fff1d7;
  --gold: #efc783;
  --serif: Georgia, "Times New Roman", serif;
  scroll-behavior: smooth;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--deep); color: var(--cream); font: 1rem/1.55 system-ui, sans-serif; }
button, a { color: inherit; }
button { font: inherit; cursor: pointer; }
a { text-underline-offset: .28em; }
:focus-visible { outline: 2px solid white; outline-offset: 5px; }
.city {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0b1b34;
  --sky: 0px;
  --trail-tail: 150px;
  padding-bottom: var(--trail-tail);
}
.city-art { display: block; width: 100%; height: auto; margin-top: var(--sky); }
.city-shade, #snow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.city-shade { background: linear-gradient(to bottom, #050e1966, transparent 18%, transparent 95%, var(--deep)); }
#snow { position: fixed; height: 100vh; z-index: 1; }
.top, .hero, .trail { position: absolute; z-index: 2; }
.top { inset: 0 0 auto; }
.hero { inset: clamp(5.2rem, 10vw, 10rem) 0 auto; }
.trail { inset: var(--sky) 0 var(--trail-tail); pointer-events: none; }
.stop[data-stop="malkalns"] { top: calc(100% + 35px); }
.top {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .65rem 2rem;
  padding: 1.4rem 0; margin: 0 clamp(1.15rem, 5vw, 5rem); border-bottom: 1px solid #efc78357;
}
.wordmark { text-transform: uppercase; font: 1.1rem var(--serif); letter-spacing: .24em; }
.top nav { display: flex; gap: .8rem 1.5rem; flex-wrap: wrap; align-items: center; font-size: .87rem; }
.top a { text-decoration: none; }
.top a:hover { text-decoration: underline; }
.top button { border: 1px solid #efc78370; border-radius: 99px; padding: .35rem .7rem; background: #081625b8; }
.hero { margin: 0 clamp(1.15rem, 8vw, 9rem);  }
.eyebrow { font-size: .78rem; letter-spacing: .17em; text-transform: uppercase; color: var(--gold); }
.eyebrow span { margin-right: .45rem; }
h1, h2 { font-family: var(--serif); font-weight: 400; line-height: .98; margin: .18em 0; }
h1 { font-size: clamp(3.45rem, 8.6vw, 8rem); letter-spacing: -.065em; text-shadow: 0 3px 22px #050e19c0; }
h2 { font-size: clamp(2.35rem, 5vw, 4.15rem); letter-spacing: -.045em; }
.intro { font: italic clamp(1.2rem, 2.8vw, 1.8rem)/1.3 var(--serif); margin: .75rem 0 1.75rem; }
.primary {
  display: inline-flex; align-items: center; gap: 1.2rem; padding: .8rem 1rem; border-radius: .25rem;
  background: var(--gold); color: var(--deep); font-weight: 650; text-decoration: none;
}
.primary:hover { background: #ffe1a8; }
.lighting { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-light] { --lit: 0; }
.constellation, .individual-lamp, .lamp-lit { opacity: var(--lit); }
.lamp-lit { transition: opacity .7s ease-out; }
.window-dark { fill: #172330; opacity: calc(1 - var(--lit)); transition: opacity .7s ease-out; }
.window-light { pointer-events: none; }
.constellation {
  fill: #ffefca;
  stroke: #ffe6b0;
  stroke-width: 1.7;
  filter: drop-shadow(0 0 5px #ffbc61);
}
.constellation path { fill: none; }
.stop {
  position: absolute; top: var(--stop-y, 40.5%); left: var(--stop-x, 72%); transform: translateX(-50%);
  pointer-events: auto; scroll-margin-top: 52vh;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  color: var(--cream); border: 1px solid #efc78399; border-radius: 50%;
  background: #342715ef; border: 2px solid var(--gold); box-shadow: 0 0 18px #ffc56677;
  transition: box-shadow .25s, background .25s, color .25s;
}
.stop::before { content: ""; position: absolute; inset: -7px; border: 1px solid #ffd68c; border-radius: 50%; pointer-events: none; animation: stop-beacon 2.8s ease-out infinite; }
.stop:hover, .stop:focus-visible, .stop:active { background: #ffda80; color: #081625; box-shadow: 0 0 32px #ffbd65; }
.stop:hover .spark, .stop:focus-visible .spark, .stop:active .spark { color: #081625; }
.stop-label { position: absolute; left: 50%; bottom: calc(100% + 13px); transform: translateX(-50%) translateY(4px); width: max-content; max-width: 200px; padding: .4rem .65rem; border: 1px solid var(--gold); border-radius: 6px; background: #081625f5; color: var(--cream); font-size: .8rem; opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s; pointer-events: none; }
.stop:hover .stop-label, .stop:focus-visible .stop-label { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
@keyframes stop-beacon { 0% { opacity: .8; transform: scale(.8); } 85%, 100% { opacity: 0; transform: scale(1.65); } }
@media (prefers-reduced-motion: reduce) { .stop::before { animation: none; opacity: .5; } }
.text-only .dialog-layout { grid-template-columns: 1fr; }
#stop-image[data-scene]:not([data-scene="foto"]) { height: 460px; object-fit: cover; }
#stop-image[data-scene="piena"] { object-position: 35% 54%; }
#stop-image[data-scene="baznica"] { object-position: 60% 74%; }
#stop-image[data-scene="stacija"] { object-position: 70% 100%; }
.spark { color: var(--gold); font-size: 1.35rem; text-shadow: 0 0 14px #ffbf55; }
.station-audio { position: absolute; right: 5%; bottom: 1%; pointer-events: auto; }
.station-audio button {
  border: 1px solid #efc78370; border-radius: 99px; padding: .35rem .7rem;
  background: #081625ed; font-size: .8rem;
}
.about { max-width: 54rem; padding: 3rem clamp(1.15rem, 5vw, 4rem) 5rem; margin: auto; }
.about p:not(.eyebrow) { max-width: 60ch; color: #e0dfdc; }
.about a { color: var(--gold); }
dialog { padding: 0; width: min(890px, calc(100vw - 2rem)); max-height: 90dvh; overflow-y: auto; border: 1px solid #efc783a0; background: var(--night); color: var(--cream); }
dialog::backdrop { background: #030913d9; }
.dialog-layout { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
#close-stop { position: absolute; right: .65rem; top: .65rem; border: 1px solid #efc783a0; border-radius: 50%; height: 42px; width: 42px; background: var(--deep); font-size: 1.5rem; z-index: 1; }
figure { margin: 0; background: var(--deep); }
figure img { display: block; width: 100%; height: auto; }
figcaption { padding: .6rem .8rem; font-size: .8rem; }
.stop-copy { padding: 3.4rem 1.5rem 1.25rem; align-self: center; }
#stop-date { color: var(--gold); }
[data-paused="true"] { scroll-behavior: auto; }
[data-paused="true"] *, [data-paused="true"] *::before { animation: none !important; transition: none !important; }
@media (max-width: 640px) {
  .city { --sky: 195px; }
  .city-art { mask-image: linear-gradient(transparent, black 17%); }
  .top { padding: .8rem 0; }
  .top nav { gap: .65rem; font-size: .75rem; }
  .hero { top: 6.6rem; }
  h1 { font-size: clamp(2.65rem, 12.5vw, 4.4rem); }
  .dialog-layout { grid-template-columns: 1fr; }
  figure img { max-height: 44dvh; object-fit: cover; }
  .stop-copy { order: -1; padding: 3.4rem 1.15rem 1.25rem; }
  #stop-image[data-scene]:not([data-scene="foto"]) { height: 230px; }
}

.lamp-halo { fill: url(#lamp-glow); opacity: .85; transform-box: fill-box; transform-origin: center; }
.lamp-core { fill: #fff4d6; filter: drop-shadow(0 0 4px #ffb84c); }
.individual-lamp { transition: opacity .65s ease-out; }
.lamp-flare { fill: #fff4d6; opacity: 0; filter: drop-shadow(0 0 5px #ffc36b); transform-box: fill-box; transform-origin: center; }
.is-ignited .lamp-halo { animation: lamp-bloom 2s ease-out both; }
.is-ignited .lamp-flare { animation: lamp-flare 2s ease-out both; }
.is-ignited .lamp-core { animation: bulb-ignite 2s ease-out both; }
@keyframes lamp-bloom {
  0% { opacity: 0; transform: scale(.3); }
  22% { opacity: 1; transform: scale(3); }
  48% { opacity: 1; transform: scale(2); }
  100% { opacity: .85; transform: scale(1.3); }
}
@keyframes lamp-flare {
  0% { opacity: 0; transform: scale(.2) rotate(-15deg); }
  25% { opacity: 1; transform: scale(1.8) rotate(0); }
  65% { opacity: .65; }
  100% { opacity: 0; transform: scale(.65) rotate(15deg); }
}
@keyframes bulb-ignite {
  0% { opacity: 0; }
  25% { opacity: 1; filter: drop-shadow(0 0 12px #fff1ba); }
  100% { opacity: 1; filter: drop-shadow(0 0 5px #ffb84c); }
}
.hero-sound {
  display: block; margin: 0 0 1rem; padding: .5rem .85rem;
  border: 1px solid #efc78380; border-radius: 99px;
  background: #081625c9; color: var(--cream);
}
@media (max-width: 640px) { .city { --sky: 245px; } }

.music-control {
  position: fixed; z-index: 5; right: 1rem; bottom: 1rem; width: 330px;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem 1rem; border: 1px solid #efc78366; border-radius: 12px;
  background: #081625f2; box-shadow: 0 4px 24px #0005;
  font-size: .8rem;
}
.music-control label { display: flex; justify-content: space-between; gap: 1rem; }
.music-settings { flex: 1; min-width: 0; }
.music-control label { font-size: .75rem; gap: .4rem; }
.record-button { position: relative; flex: 0 0 76px; width: 76px; height: 76px; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.record { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; border: 2px solid #efc78399; background: repeating-radial-gradient(circle, #111820 0 2px, #34404b 3px, #111820 4px 5px); box-shadow: 0 0 20px #efc78345; animation: record-spin 7s linear infinite; animation-play-state: paused; }
.record::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: conic-gradient(transparent 0deg, #ffffff30 45deg, transparent 90deg 180deg, #ffffff25 225deg, transparent 270deg); }
.record-label { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: var(--deep); font-size: 1rem; }
.record-symbol { position: absolute; right: -2px; bottom: -1px; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--gold); color: var(--deep); font-size: .75rem; }
[data-playing="true"] .record { animation-play-state: running; }
.record-button:hover .record { box-shadow: 0 0 28px #efc78399; }
@keyframes record-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .record { animation: none; } }
.music-control output { color: var(--gold); font-variant-numeric: tabular-nums; }
.music-control input { display: block; width: 100%; height: 28px; margin: .15rem 0; accent-color: var(--gold); cursor: pointer; }
#music-status { display: block; font-size: .68rem; color: #d3dbe5; }
.about { padding-bottom: 10rem; }
.places-page { background: linear-gradient(#081625c9, #081625ed), url("atteli/tukums-lidzenums.jpg") center top / cover fixed; }
.places-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.5rem 0; margin: 0 5%; border-bottom: 1px solid #efc78357; }
.places-top a { text-decoration: none; }
.places-main { max-width: 940px; margin: auto; padding: 4rem 1.5rem 11rem; }
.places-main h1 { font-size: clamp(3rem, 7vw, 5.7rem); max-width: 12ch; }
.places-note { color: #d3dbe5; max-width: 60ch; }
.places-list { list-style: none; padding: 0; margin: 3rem 0; }
.place-row { display: grid; grid-template-columns: 3rem 1fr; gap: 1.2rem; padding: 2rem 0; border-top: 1px solid #efc78355; }
.place-number { font: 1.6rem var(--serif); color: var(--gold); padding-top: .6rem; }
.place-row .eyebrow { margin-top: 0; }
.place-row h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.12; }
.place-row p { max-width: 58ch; }
.place-address, .map-link { color: var(--gold); }
.scene-instructions { color: var(--gold); font-size: .9rem; }
.mini-scene { position: relative; min-height: 155px; display: flex; align-items: center; justify-content: center; gap: .7rem; padding: 1rem; border: 1px solid #efc78355; border-radius: 12px; background: radial-gradient(ellipse at bottom, #33475c, #071321 75%); }
.mini-scene button { min-width: 44px; min-height: 44px; border: 1px solid #efc78377; background: #101e2b; color: #c5cbd0; border-radius: 8px; transition: color .3s, box-shadow .3s, background .3s; }
.mini-scene button:hover, .mini-scene button:focus-visible, .mini-scene button.revealed { color: #fff3ce; border-color: #ffda80; background: #71562b; box-shadow: 0 0 18px #ffd08388; }
.scene-status { min-height: 3em; color: #f5ddb1; font-size: .85rem; }
.scene-kungsTukums { flex-wrap: wrap; }
.scene-kungsTukums button { padding: .6rem .8rem; font-family: var(--serif); font-size: 1.15rem; }
.scene-pienaIela { height: 180px; }
.scene-pienaIela svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scene-pienaIela path { fill: none; stroke: #ffe0a1; stroke-width: .6; stroke-dasharray: 180; stroke-dashoffset: 180; transition: stroke-dashoffset 1.5s ease; }
.scene-pienaIela.connected path { stroke-dashoffset: 0; }
.scene-pienaIela button { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; font-size: 1.5rem; }
.scene-baznica button { position: relative; width: 29%; height: 130px; background: transparent; border: 0; }
.little-fir { display: block; font-size: 3rem; line-height: .47; color: #799b9b; }
.fir-pearls { position: absolute; top: 50%; left: 0; width: 100%; opacity: .25; font-size: 1.4rem; transition: opacity .5s; }
.revealed .little-fir { color: #b7d1c6; text-shadow: 0 0 20px #ffe6a6; }
.revealed .fir-pearls { opacity: 1; color: #fff9db; text-shadow: 0 0 12px #ffe1a2; }
.scene-stacija { gap: 3px; padding: 1rem .5rem; }
.scene-stacija button { min-width: 0; flex: 1; height: 110px; border-radius: 0 0 6px 6px; background: #f1e5cc; color: #15202d; display: flex; align-items: end; justify-content: center; padding: .4rem 0; font-size: .7rem; }
.scene-stacija button.played { animation: piano-key .7s ease-out; }
@keyframes piano-key { 0%, 25% { background: #ffd075; transform: translateY(4px); box-shadow: 0 0 20px #ffd075; } 100% { background: #f1e5cc; transform: translateY(0); } }
.scene-malkalns { color: var(--gold); font-size: 3rem; }
.stop.discovered { background: #e7bd6b; }
.stop.discovered .spark { color: #081625; }
.map-link { display: inline-block; padding: .5rem 0; }
@media (max-width: 640px) {
  .places-top { font-size: .8rem; }
  .place-row { grid-template-columns: 1.8rem 1fr; gap: .7rem; }
  .music-control { width: min(310px, calc(100vw - 1.3rem)); right: .65rem; bottom: .65rem; gap: .75rem; }
  .record-button { flex-basis: 64px; width: 64px; height: 64px; }
}

/* Paziņojums, ka lapa tiek papildināta */
.about p.aug-zina { margin: 1.6rem 0; padding: 1rem 1.2rem; border: 1px solid #efc783a0; border-left: 4px solid var(--gold); border-radius: 6px; background: #ffffff0d; color: var(--cream); }
.aug-zina span { color: var(--gold); }