:root {
  --ink:    #0a0806;
  --deep:   #110e0b;
  --card:   #1a1510;
  --card2:  #201a12;
  --border: #2e2416;
  --amber:  #c8902a;
  --gold:   #e8b84b;
  --pale:   #f0e4c8;
  --muted:  rgba(240, 228, 200, .55);
  --faint:  rgba(240, 228, 200, .35);
  --serif:  system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --sans:   system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--pale);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold); text-decoration-color: rgba(232, 184, 75, .35); text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--gold); }

.topbar {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.4rem 6% .2rem;
  display: flex;
  gap: 1rem;
  align-items: baseline;
}

.crumbs {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--faint);
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: .55rem;
  align-items: center;
  flex-wrap: wrap;
}

.langs {
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .08em;
  flex: none;
  display: flex;
  gap: .5rem;
  align-items: baseline;
}
.langs a { color: var(--muted); text-decoration: none; }
.langs a:hover { color: var(--gold); }
.langs [aria-current] { color: var(--amber); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold); }

main { max-width: 900px; margin: 0 auto; padding: 0 6% 5rem; }

.legend-head { padding: 2.5rem 0 1.5rem; border-bottom: 1px solid var(--border); }

.legend-mark {
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 1.2rem;
  filter: sepia(.3);
}

h1 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.01em;
  margin: 0 0 .6rem;
  color: var(--pale);
  text-wrap: balance;
}

.legend-place {
  font-family: var(--sans);
  font-size: .92rem;
  color: var(--amber);
  margin: 0 0 1.4rem;
  letter-spacing: .02em;
}

.legend-meta { display: flex; flex-wrap: wrap; gap: 0 2.2rem; margin: 0; }
.legend-meta div { display: flex; gap: .5rem; align-items: baseline; }
.legend-meta dt {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
}
.legend-meta dd { margin: 0; font-size: .92rem; color: var(--muted); }

.legend-text { padding: 2rem 0 .5rem; font-size: 1.08rem; }
.legend-text p { margin: 0 0 1.3rem; }
.legend-text p:first-child::first-letter {
  font-size: 3.1rem; float: left; line-height: .85;
  padding: .1rem .55rem .1rem 0; color: var(--amber);
}

.legend-source, .legend-where {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 2px solid var(--amber);
  border-radius: 0 3px 3px 0;
  padding: 1.1rem 1.4rem;
  margin: 1.6rem 0;
}
.legend-source h2, .legend-where h2 {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--amber);
  margin: 0 0 .6rem; font-weight: 600;
}
.legend-source .cite { margin: 0 0 .5rem; font-size: .95rem; font-style: italic; }
.legend-source .note, .legend-where .coords {
  margin: 0 0 .4rem; font-family: var(--sans);
  font-size: .8rem; color: var(--faint);
}
.legend-where p:last-child { margin: 0; font-family: var(--sans); font-size: .85rem; }

.legend-casenote {
  font-family: var(--sans);
  font-size: .82rem;
  line-height: 1.65;
  color: var(--faint);
  border-top: 1px solid var(--border);
  padding-top: 1.2rem;
  margin: 2.2rem 0 0;
}

.cta {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1.1rem 1.3rem;
  margin: 1.4rem 0;
}
.cta-text { flex: 1 1 18rem; min-width: 0; }
.cta h2 {
  font-family: var(--serif); font-size: 1.1rem; font-weight: 600;
  margin: 0 0 .25rem; color: var(--pale);
}
.cta p { margin: 0; font-size: .9rem; color: var(--muted); }

.cta-btn {
  white-space: nowrap;
  display: inline-block;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: .75rem 1.6rem;
  border-radius: 2px;
  background: var(--amber);
  color: var(--ink);
  text-decoration: none;
}
.cta-btn.is-inert {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--faint);
  cursor: default;
}

.back { font-family: var(--sans); font-size: .85rem; margin: 0; }

@media (max-width: 560px) {
  body { font-size: 17px; }
  .topbar { padding: 1.1rem 5% .2rem; gap: .8rem; }
  main { padding: 0 5% 3.5rem; }
  .legend-meta { gap: 0 1.2rem; }
}

.legend-figure { margin: 0 0 1.8rem; }
.legend-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--card);
}
.legend-figure figcaption {
  font-family: var(--sans);
  font-size: .74rem;
  line-height: 1.55;
  color: var(--faint);
  margin-top: .55rem;
  letter-spacing: .01em;
}

.idx-head { padding: 2.5rem 0 1.5rem; border-bottom: 1px solid var(--border); }
.idx-intro { color: var(--muted); margin: .6rem 0 0; font-size: 1rem; }
.idx-count {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--amber); margin: 1rem 0 0;
}
.idx-list { list-style: none; padding: 0; margin: 1.8rem 0 0; }
.idx-list li { border-bottom: 1px solid var(--border); }
.idx-list a {
  display: flex; flex-direction: column; gap: .2rem;
  padding: 1.05rem .2rem; text-decoration: none;
}
.idx-list a:hover { background: var(--card); }
.idx-title { font-size: 1.05rem; color: var(--gold); line-height: 1.35; }
.idx-place { font-family: var(--sans); font-size: .8rem; color: var(--faint); }

.legend-warning {
  font-family: var(--sans); font-size: .85rem; color: var(--amber);
  border: 1px solid var(--border); border-left: 3px solid var(--amber);
  border-radius: 4px; padding: .7rem .9rem; margin: 1.6rem 0 0;
}
.legend-warning strong { color: var(--gold); font-weight: 600; }
.legend-tags {
  font-family: var(--sans); font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); margin: 1.6rem 0 0;
}
.idx-warning { color: var(--amber); }

.map { margin: 0 0 1.6rem; }
.map-canvas {
  height: 360px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--card);
}
.map figcaption {
  font-family: var(--sans); font-size: .78rem; color: var(--faint);
  margin: .5rem 0 0; line-height: 1.5;
}
.legend-where .map-canvas { height: 260px; }
.map-canvas .leaflet-tile { filter: saturate(.72) contrast(.94) brightness(.98); }
.leaflet-container path.map-pin { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)); }
.leaflet-container path.map-pin:hover { fill: var(--gold); }

/* Bublina ma biele pozadie, takze farby stranky v nej neplatia: zlaty odkaz na bielej
   ma kontrast 1.8 : 1 a bledy popisok miesta zmizne uplne. */
.map-popup-img {
  display: block; width: 240px; height: 135px;
  object-fit: cover; border-radius: 2px; margin-bottom: .45rem;
}
.map-popup-title { display: block; min-height: 2.9em; }
.leaflet-popup-content { margin: .55rem .65rem; line-height: 1.45; }
.leaflet-popup-content a { color: #6b4c0f; }
.map-popup-place { font-family: var(--sans); font-size: .78rem; color: rgba(26, 21, 16, .6); margin: .3rem 0 0; }
.leaflet-container { font: inherit; background: var(--card); }
@media (max-width: 600px) { .map-canvas { height: 260px; } }

.idx-index { margin: 1.8rem 0 0; border-top: 1px solid var(--border); }
.idx-index > summary {
  font-family: var(--sans); font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--amber);
  padding: 1rem .2rem; cursor: pointer;
}
.idx-index > summary:hover { color: var(--gold); }
.idx-index[open] > summary { border-bottom: 1px solid var(--border); }
.idx-index .idx-list { margin-top: .8rem; }

@media (max-width: 600px) {
  .cta { padding: 1rem; }
  .cta-btn { width: 100%; text-align: center; }
}

.promo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: .55rem 6% calc(.55rem + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 28px rgba(0, 0, 0, .5);
}
.promo-in { max-width: 900px; margin: 0 auto; display: flex; align-items: center; gap: .9rem; }
.promo-text {
  flex: 1 1 auto; min-width: 0; margin: 0; display: flex; flex-direction: column;
  font-family: var(--sans); line-height: 1.3; overflow: hidden;
}
.promo-text span { font-size: .8rem; color: var(--pale); }
.promo .cta-btn { padding: .62rem 1.15rem; font-size: .72rem; letter-spacing: .1em; }
.promo-close {
  flex: none; background: none; border: 0; color: var(--faint);
  font-size: 1.25rem; line-height: 1; padding: .35rem .3rem; cursor: pointer;
}
.promo-close:hover { color: var(--pale); }
body:has(.promo) { padding-bottom: 5rem; }

@media (max-width: 560px) {
  .promo { padding: .5rem 5% calc(.5rem + env(safe-area-inset-bottom)); }
  .promo-in { gap: .6rem; }
  .promo .cta-btn { width: auto; padding: .58rem .85rem; font-size: .68rem; letter-spacing: .08em; }
}

/* Suhlas si berie spodok obrazovky pred pruhom hry a neprekryva obsah: povest sa da
   citat aj bez rozhodnutia. */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000;
  background: var(--card2);
  border-top: 1px solid var(--amber);
  padding: .9rem 6% calc(.9rem + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 32px rgba(0, 0, 0, .6);
}
.consent-in {
  max-width: 900px; margin: 0 auto;
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
}
.consent-text {
  flex: 1 1 20rem; min-width: 0; margin: 0;
  font-family: var(--sans); font-size: .82rem; line-height: 1.5; color: var(--muted);
}
.consent-text b { display: block; color: var(--pale); font-size: .9rem; margin-bottom: .15rem; }
.consent-actions { display: flex; align-items: center; gap: .6rem; flex: none; }
.consent-btn {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 600;
  padding: .62rem 1.15rem; border-radius: 2px; cursor: pointer;
  border: 1px solid var(--amber); background: transparent; color: var(--gold);
}
.consent-btn.is-primary { background: var(--amber); color: var(--ink); }
.consent-more { font-family: var(--sans); font-size: .76rem; }

@media (max-width: 560px) {
  .consent { padding: .8rem 5% calc(.8rem + env(safe-area-inset-bottom)); }
  .consent-in { gap: .7rem; }
  .consent-actions { width: 100%; }
  .consent-btn { flex: 1 1 0; padding: .85rem .5rem; }
}

/* Vysku drzi slot, nie reklama: ked sa nenacita alebo ju navstevnik odmietne, obsah
   pod nou neposkoci. */
.ad { margin: 2.4rem 0 0; }
.ad-label, .partner-label {
  font-family: var(--sans); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 .45rem;
}
.ad-slot {
  min-height: 250px;
  border: 1px dashed var(--border); border-radius: 3px; background: var(--card2);
}
@media (min-width: 720px) { .ad-slot { min-height: 90px; } }

.partner { margin: 1.6rem 0 0; }
.partner-card {
  display: flex; align-items: center; gap: .9rem;
  padding: .85rem 1rem; text-decoration: none;
  background: var(--card); border: 1px solid var(--border);
  border-left: 2px solid var(--amber); border-radius: 0 3px 3px 0;
}
.partner-card:hover { background: var(--card2); }
.partner-mark {
  flex: none; width: 44px; height: 44px; border-radius: 2px;
  background: var(--card2); border: 1px solid var(--border);
  display: grid; place-items: center; font-size: 1.1rem;
}
.partner-text { display: flex; flex-direction: column; min-width: 0; }
.partner-name { color: var(--gold); font-size: 1rem; line-height: 1.3; }
.partner-note { font-family: var(--sans); font-size: .78rem; color: var(--faint); }

.foot {
  font-family: var(--sans); font-size: .76rem; color: var(--faint);
  border-top: 1px solid var(--border); margin: 2.6rem 0 0; padding: 1rem 0 0;
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
}
.foot a, .foot button {
  font: inherit; color: var(--muted); background: none; border: 0; padding: 0;
  text-decoration: underline; text-underline-offset: .18em; cursor: pointer;
}
.foot a:hover, .foot button:hover { color: var(--gold); }

.doc-section { margin: 2rem 0 0; }
.doc-section h2 {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--amber); margin: 0 0 .7rem; font-weight: 600;
}
.doc-section p { margin: 0 0 .9rem; font-size: .98rem; }
.doc-list { margin: 0 0 .9rem; padding-left: 1.1rem; font-size: .98rem; }
.doc-list li { margin: 0 0 .35rem; }
.doc-section code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86em;
  color: var(--gold); background: var(--card); padding: .1rem .35rem; border-radius: 2px;
}

/* Ilustracia prvej povesti zo setu. Na stranke povesti je obrazok jej vlastny a ma 16:9;
   na rozcestniku je to upútavka a v plnom pomere by zjedla prvu obrazovku aj s nadpisom. */
.idx-figure { margin: 1.5rem 0 0; }
.idx-figure img { aspect-ratio: 21 / 9; max-height: 240px; object-position: 50% 40%; }
.idx-figure figcaption { margin-top: .5rem; }
.idx-figure + .idx-head { padding-top: 1.2rem; }