/* Písmo stránky je Helvetica. Na Apple zariadeniach je v systéme, inde ju
   nahradí Nimbus Sans – voľný klon Helvetice od URW (licencia AGPL
   s výnimkou pre písma, viď assets/fonts/LICENSE-NimbusSans.txt). Súbory
   sú zúžené na latinku vrátane slovenskej diakritiky. */
@font-face {
  font-family: "Nimbus Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/nimbus-sans-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Nimbus Sans";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("fonts/nimbus-sans-bold.woff2") format("woff2");
}

:root {
  --paper: #efeedc;
  --paper-deep: #e7e4cf;
  --ink: #080908;
  --muted: #5f5f58;
  --line: rgba(8, 9, 8, 0.22);
  --pink: #ff2d87;
  --pink-deep: #f32378;
  --orange: #ff5c3d;
  --cream: #f7f5e8;
  --radius-xl: 42px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --page-pad: clamp(22px, 4vw, 64px);
  --header-h: 82px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body::before {
  position: fixed;
  z-index: 1000;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: .12;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}

body.menu-open {
  overflow: hidden;
}

::selection {
  color: var(--cream);
  background: var(--pink);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3,
.footer-wordmark {
  font-family: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -.06em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[hidden] {
  display: none !important;
}

.scroll-progress {
  position: fixed;
  z-index: 1200;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  pointer-events: none;
}

.scroll-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--pink), var(--orange));
}

.site-header {
  position: fixed;
  z-index: 900;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  padding: 14px var(--page-pad);
  transition: background .35s ease, box-shadow .35s ease, transform .35s ease;
}

.site-header.is-scrolled {
  background: rgba(239, 238, 220, .89);
  box-shadow: 0 1px 0 rgba(8, 9, 8, .12);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.brand {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.8vw, 42px);
}

.main-nav > a:not(.nav-pill) {
  position: relative;
  padding: 10px 0;
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.02em;
}

.main-nav > a:not(.nav-pill)::after {
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 5px;
  height: 2px;
  content: "";
  background: var(--ink);
  transition: right .3s var(--ease);
}

.main-nav > a:hover::after,
.main-nav > a.is-active::after {
  right: 0;
}

.nav-pill,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 48px;
  padding: 0 25px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  transition: transform .25s var(--ease), background .25s ease, color .25s ease, border-color .25s ease;
}

.nav-pill {
  min-height: 46px;
  color: var(--paper);
  background: var(--ink);
}

.nav-pill:hover,
.button:hover {
  transform: translateY(-3px);
}

.nav-pill span,
.button span,
.text-link span {
  font-size: 1.05rem;
  transition: transform .25s var(--ease);
}

.nav-pill:hover span,
.button:hover span,
.text-link:hover span {
  transform: translate(3px, -3px);
}

.menu-toggle {
  display: none;
  position: relative;
  z-index: 3;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.menu-toggle span {
  position: absolute;
  left: 13px;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform .3s var(--ease), top .3s var(--ease);
}

.menu-toggle span:first-child { top: 18px; }
.menu-toggle span:last-child { top: 27px; }

body.menu-open .menu-toggle span:first-child {
  top: 22px;
  transform: rotate(45deg);
}

body.menu-open .menu-toggle span:last-child {
  top: 22px;
  transform: rotate(-45deg);
}

.hero {
  position: relative;
  min-height: 100svh;
  padding: calc(var(--header-h) + clamp(45px, 6vh, 90px)) var(--page-pad) clamp(42px, 6vh, 72px);
  overflow: hidden;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  background:
    radial-gradient(circle at 56% 45%, rgba(255,255,255,.72), rgba(255,255,255,0) 27%),
    linear-gradient(110deg, rgba(255,255,255,.28), transparent 52%),
    var(--paper);
}

.hero-copy {
  position: relative;
  z-index: 5;
  width: min(54%, 730px);
}

.hero h1 {
  margin: 0 0 clamp(22px, 3.5vh, 44px);
  font-size: clamp(5rem, 11.5vw, 11.8rem);
  line-height: .78;
  white-space: nowrap;
  letter-spacing: -.092em;
}

.hero h1 span {
  letter-spacing: -.17em;
}

.hero-meta {
  display: grid;
  grid-template-columns: minmax(145px, .72fr) minmax(190px, 1fr);
  width: min(510px, 100%);
  margin-bottom: 24px;
  padding-top: 20px;
  border-top: 2px solid var(--ink);
}

.hero-meta p {
  margin-bottom: 0;
  text-transform: uppercase;
}

.hero-date {
  font-size: clamp(2rem, 4.2vw, 4rem);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.07em;
}

.hero-date strong {
  font-family: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, sans-serif;
  font-size: 1.08em;
}

.hero-date span {
  display: inline-block;
  margin-top: 7px;
}

.hero-intro {
  width: min(330px, 100%);
  margin-bottom: 28px;
  font-size: .98rem;
  line-height: 1.22;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.button-dark {
  color: var(--paper);
  background: var(--ink);
}

.button-dark:hover {
  color: var(--ink);
  background: var(--pink);
  border-color: var(--pink);
}

.button-outline {
  background: rgba(239, 238, 220, .48);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.button-outline:hover {
  color: var(--paper);
  background: var(--ink);
}

.hero-mark {
  position: absolute;
  z-index: 6;
  top: 43%;
  right: 6.2%;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
  justify-items: center;
  width: 62px;
  height: 62px;
  color: var(--paper);
  border: 3px solid var(--paper);
  border-radius: 45% 55% 50% 45%;
  background: var(--ink);
  box-shadow: 0 0 0 4px var(--ink);
  transform: rotate(7deg);
}

.hero-mark span {
  font-size: 1rem;
  font-weight: 900;
}

.hero-mark i {
  width: 1px;
  height: 32px;
  background: var(--paper);
  transform: rotate(-25deg);
}

.hero-side-note {
  position: absolute;
  z-index: 4;
  right: 4.5%;
  bottom: 26%;
  margin: 0;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.12;
  text-align: center;
  text-transform: uppercase;
}

.hero-scroll {
  position: absolute;
  z-index: 5;
  right: 3.4%;
  bottom: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: .62rem;
  font-weight: 800;
}

.hero-scroll b {
  font-size: 1.35rem;
  animation: scrollBounce 1.7s ease-in-out infinite;
}

.section {
  position: relative;
  padding: clamp(88px, 11vw, 170px) var(--page-pad);
}

.section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(36px, 6vw, 82px);
  font-size: .73rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.section-label span {
  display: inline-grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: .65rem;
}

.section h2 {
  margin-bottom: 0;
  font-size: clamp(2.65rem, 6.4vw, 7rem);
  line-height: .91;
  text-transform: uppercase;
}

.about {
  padding-bottom: 0;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, .72fr);
  gap: clamp(42px, 8vw, 140px);
  align-items: end;
}

.about-copy {
  padding-bottom: .7rem;
}

.about-copy p {
  margin-bottom: 1.2rem;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.38;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--ink);
  font-size: .83rem;
  font-weight: 800;
  text-transform: uppercase;
}

.festival-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(62px, 9vw, 130px);
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}

.festival-facts article {
  min-height: 210px;
  padding: 27px;
  border-right: 1.5px solid var(--ink);
}

.festival-facts article:last-child {
  border-right: 0;
}

.festival-facts strong {
  display: block;
  margin-bottom: 58px;
  font-family: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, sans-serif;
  font-size: clamp(2.2rem, 4.1vw, 4.8rem);
  line-height: .85;
  letter-spacing: -.07em;
}

.festival-facts span {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
}

.marquee {
  position: relative;
  left: calc(var(--page-pad) * -1);
  width: calc(100% + (var(--page-pad) * 2));
  margin-top: clamp(70px, 8vw, 115px);
  overflow: hidden;
  color: var(--paper);
  background: var(--ink);
  transform: rotate(-1.2deg);
}

.marquee-track {
  display: flex;
  width: max-content;
  padding: 18px 0 15px;
  animation: marquee 24s linear infinite;
}

.marquee span {
  font-family: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, sans-serif;
  font-size: clamp(2rem, 5.2vw, 5.4rem);
  line-height: .9;
  white-space: nowrap;
  letter-spacing: -.06em;
}

.program {
  z-index: 2;
  margin-top: -20px;
  color: var(--paper);
  border-radius: var(--radius-xl);
  background: var(--ink);
}

.program::before {
  position: absolute;
  top: 7%;
  right: -5%;
  width: 38vw;
  height: 38vw;
  min-width: 320px;
  min-height: 320px;
  content: "";
  opacity: .75;
  border-radius: 50%;
  background: conic-gradient(from 210deg, var(--pink), var(--orange), transparent 58%, var(--pink));
  filter: blur(100px);
  pointer-events: none;
}

.section-label-light {
  color: var(--paper);
}

.program-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .55fr);
  gap: 60px;
  align-items: end;
}

.program-head p {
  margin-bottom: 0;
  color: rgba(239, 238, 220, .72);
  font-size: 1.02rem;
}

.program-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 0 clamp(20px, 4vw, 52px);
  border: 0;
  border-radius: 999px;
  color: rgba(239, 238, 220, .62);
  background: transparent;
  cursor: pointer;
  transition: color .25s ease, background .25s ease;
}

.program-tab span {
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.program-tab strong {
  font-size: clamp(1.35rem, 2.4vw, 2.3rem);
  letter-spacing: -.05em;
}

.program-tab.is-active {
  color: var(--ink);
  background: var(--paper);
}

.program-panel {
  display: block;
}

.visual-one::before {
  width: 72%;
  height: 72%;
  top: 14%;
  left: 14%;
  border-radius: 52% 48% 64% 36%;
  background: linear-gradient(135deg, var(--pink), var(--orange));
  transform: rotate(24deg);
  filter: blur(2px);
}

.visual-one::after {
  width: 42%;
  height: 120%;
  top: -10%;
  left: 42%;
  border: 24px solid var(--paper);
  border-top: 0;
  border-bottom: 0;
  transform: rotate(-17deg);
  opacity: .88;
}

.visual-one span {
  width: 48%;
  height: 22px;
  left: 9%;
  bottom: 21%;
  border-radius: 999px;
  background: var(--orange);
  transform: rotate(-8deg);
}

.visual-two {
  background: var(--paper-deep);
}

.visual-two::before {
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(8,9,8,.12) 46px 48px), repeating-linear-gradient(0deg, transparent 0 46px, rgba(8,9,8,.12) 46px 48px);
}

.visual-two::after {
  width: 130%;
  height: 72px;
  left: -16%;
  top: 42%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pink), var(--orange), var(--pink));
  box-shadow: 0 0 38px var(--pink);
  transform: rotate(-14deg);
}

.visual-two span {
  width: 26px;
  height: 26px;
  top: 20%;
  right: 16%;
  border-radius: 50%;
  background: var(--ink);
}

.visual-two i {
  width: 16px;
  height: 16px;
  left: 13%;
  bottom: 17%;
  border-radius: 50%;
  background: var(--ink);
}

.visual-three::before {
  inset: 0;
  background: radial-gradient(circle at 28% 44%, var(--orange) 0 6%, transparent 6.5%), radial-gradient(circle at 58% 28%, var(--pink) 0 8%, transparent 8.5%), radial-gradient(circle at 72% 68%, var(--orange) 0 10%, transparent 10.5%);
}

.visual-three::after {
  width: 76%;
  height: 76%;
  top: 12%;
  left: 12%;
  border: 3px solid var(--paper);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(239,238,220,.14), 0 0 0 56px rgba(239,238,220,.08);
}

.visual-three span {
  width: 3px;
  height: 78%;
  top: 11%;
  left: 50%;
  background: var(--paper);
  transform: rotate(38deg);
}

.visual-three i {
  width: 3px;
  height: 78%;
  top: 11%;
  left: 50%;
  background: var(--paper);
  transform: rotate(-38deg);
}

.visual-four {
  background: linear-gradient(135deg, var(--paper-deep), #ffffff);
}

.visual-four::before {
  width: 86%;
  height: 86%;
  top: 7%;
  left: 7%;
  background: repeating-linear-gradient(135deg, var(--ink) 0 5px, transparent 5px 18px);
  opacity: .82;
  clip-path: polygon(5% 14%, 81% 0, 100% 74%, 22% 100%);
}

.visual-four::after {
  width: 58%;
  height: 58%;
  top: 21%;
  left: 21%;
  border-radius: 47% 53% 42% 58%;
  background: linear-gradient(145deg, var(--pink), var(--orange));
  mix-blend-mode: screen;
  transform: rotate(24deg);
}

.visual-four span {
  width: 34%;
  height: 34%;
  top: 33%;
  left: 33%;
  border: 5px solid var(--ink);
  border-radius: 50%;
}

.info {
  color: var(--paper);
  border-radius: var(--radius-xl);
  background: var(--ink);
}

.route-map {
  padding: clamp(20px, 3vw, 36px);
  border: 1.5px solid rgba(239,238,220,.44);
  border-radius: var(--radius-lg);
  background: rgba(239, 238, 220, .035);
}

.route-map-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(239,238,220,.24);
}

.route-map-head p {
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
}

.route-map-head span {
  color: rgba(239,238,220,.58);
  font-size: .7rem;
  text-transform: uppercase;
}

.route-map svg {
  margin: 15px 0 8px;
}

.route-note {
  margin: 0;
  color: rgba(239,238,220,.58);
  font-size: .76rem;
}

.info .button-dark {
  color: var(--ink);
  border-color: var(--paper);
  background: var(--paper);
}

.info .button-dark:hover {
  border-color: var(--pink);
  background: var(--pink);
}

.partners-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(230px, .45fr);
  gap: 60px;
  align-items: end;
}

.partners-head p {
  margin-bottom: 0;
  font-size: 1.03rem;
}

.partner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 205px;
  padding: 24px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transition: color .25s ease, background .25s ease;
}

.partner:hover {
  color: var(--paper);
  background: var(--ink);
}

.partner small {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.partner strong {
  font-family: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, sans-serif;
  font-size: clamp(1.7rem, 3vw, 3.2rem);
  line-height: .9;
  letter-spacing: -.06em;
}

.newsletter {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 720px;
  margin: 0 var(--page-pad) clamp(20px, 3vw, 45px);
  overflow: hidden;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-xl);
  background: var(--paper-deep);
}

.newsletter-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
}

.newsletter-form input {
  min-width: 0;
  padding: 10px 4px;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: clamp(1.1rem, 2vw, 1.65rem);
}

.newsletter-form input::placeholder {
  color: rgba(8,9,8,.42);
}

.newsletter-form button {
  padding: 0 0 0 20px;
  border: 0;
  background: transparent;
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
}

.form-status {
  min-height: 21px;
  margin: 12px 0 0;
  color: var(--pink-deep);
  font-size: .78rem;
  font-weight: 800;
}

.newsletter-note {
  max-width: 500px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: .75rem;
}

.site-footer {
  padding: 55px var(--page-pad) 25px;
  overflow: hidden;
  color: var(--paper);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--ink);
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: clamp(40px, 7vw, 120px);
  align-items: start;
}

.footer-links,
.footer-social {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.footer-links a,
.footer-social a {
  transition: color .2s ease;
}

.footer-links a:hover,
.footer-social a:hover {
  color: var(--pink);
}

.footer-wordmark {
  margin: clamp(60px, 10vw, 160px) 0 28px;
  font-size: clamp(4.4rem, 15.1vw, 14rem);
  line-height: .69;
  white-space: nowrap;
  letter-spacing: -.095em;
}

.footer-wordmark span {
  color: var(--pink);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(239,238,220,.24);
  color: rgba(239,238,220,.62);
  font-size: .67rem;
  font-weight: 800;
  text-transform: uppercase;
}

.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

@media (max-width: 1120px) {
  :root {
    --header-h: 76px;
  }

  .main-nav {
    gap: 20px;
  }

  .hero-copy {
    width: 60%;
  }

  .hero-side-note {
    display: none;
  }

  .festival-facts article {
    min-height: 190px;
    padding: 22px;
  }

  .newsletter {
    min-height: 650px;
  }}

@media (max-width: 900px) {
  .menu-toggle {
    display: block;
  }

  .main-nav {
    position: fixed;
    z-index: 2;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
    padding: 90px var(--page-pad) 40px;
    color: var(--paper);
    background: var(--ink);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-18px);
    transition: opacity .3s ease, visibility .3s ease, transform .4s var(--ease);
  }

  body.menu-open .main-nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  body.menu-open .site-header .brand {
    color: var(--paper);
  }

  body.menu-open .menu-toggle {
    color: var(--paper);
    border-color: var(--paper);
  }

  .main-nav > a:not(.nav-pill) {
    font-family: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, sans-serif;
    font-size: clamp(2.2rem, 9vw, 5.2rem);
    line-height: .95;
    letter-spacing: -.06em;
  }

  .main-nav > a:not(.nav-pill)::after {
    display: none;
  }

  .main-nav .nav-pill {
    margin-top: 28px;
    color: var(--ink);
    border-color: var(--paper);
    background: var(--paper);
  }

  .hero {
    min-height: 940px;
    padding-top: calc(var(--header-h) + 42px);
  }

  .hero-copy {
    width: 100%;
  }

  .hero h1 {
    font-size: clamp(4.5rem, 18vw, 9.5rem);
  }

  .hero-meta {
    width: min(470px, 82%);
  }

  .hero-mark {
    top: auto;
    right: 7%;
    bottom: 27%;
  }

  .about-grid,
.program-head,
.partners-head {
    grid-template-columns: 1fr;
  }

  .about-grid,
.program-head,
.partners-head {
    gap: 35px;
  }

  .festival-facts {
    grid-template-columns: repeat(2, 1fr);
  }

  .festival-facts article:nth-child(2) {
    border-right: 0;
  }

  .festival-facts article:nth-child(-n+2) {
    border-bottom: 1.5px solid var(--ink);
  }

  .newsletter {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }

  .brand-footer {
    grid-column: span 2;
  }}

@media (max-width: 640px) {
  :root {
    --radius-xl: 26px;
    --radius-lg: 22px;
    --header-h: 70px;
  }

  .site-header {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .menu-toggle {
    width: 44px;
    height: 44px;
  }

  .menu-toggle span {
    left: 11px;
  }

  .hero {
    min-height: 875px;
    padding-bottom: 34px;
  }

  .hero h1 {
    margin-bottom: 24px;
    font-size: clamp(4rem, 19vw, 6.3rem);
  }

  .hero-meta {
    grid-template-columns: 105px 1fr;
    width: 88%;
    margin-bottom: 18px;
    padding-top: 14px;
  }

  .hero-date {
    font-size: clamp(1.9rem, 10vw, 3.1rem);
  }

  .hero-intro {
    width: 75%;
    font-size: .85rem;
  }

  .hero-actions {
    gap: 9px;
  }

  .button {
    min-height: 44px;
    padding: 0 18px;
    font-size: .68rem;
  }

  .hero-mark {
    right: 5%;
    bottom: 20%;
    width: 52px;
    height: 52px;
  }

  .hero-scroll {
    right: 5%;
    bottom: 17px;
  }

  .section {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .section-label {
    margin-bottom: 34px;
  }

  .section h2 {
    font-size: clamp(2.4rem, 13vw, 4.4rem);
  }

  .about-copy p {
    font-size: 1rem;
  }

  .festival-facts {
    margin-top: 54px;
  }

  .festival-facts article {
    min-height: 155px;
    padding: 17px;
  }

  .festival-facts strong {
    margin-bottom: 38px;
    font-size: 2rem;
  }

  .festival-facts span {
    font-size: .6rem;
  }

  .marquee {
    margin-top: 70px;
  }

  .program {
    padding-bottom: 88px;
  }

  .program-tab {
    min-height: 66px;
    padding: 0 17px;
  }

  .program-tab span {
    font-size: .61rem;
  }

  .program-tab strong {
    font-size: 1.3rem;
  }

  .route-map {
    padding: 16px;
  }

  .route-map-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .partner {
    min-height: 150px;
  }

  .newsletter {
    margin-left: 12px;
    margin-right: 12px;
  }

  .newsletter-form {
    grid-template-columns: 1fr;
  }

  .newsletter-form button {
    justify-self: start;
    padding: 8px 0 0;
  }

  .site-footer {
    padding-top: 42px;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 40px 25px;
  }

  .brand-footer {
    grid-column: span 2;
  }

  .footer-wordmark {
    margin-top: 80px;
    font-size: 19vw;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }}

/* ==========================================================
   NOX:ART v2 — supplied hero artwork, 17 works and map points
   ========================================================== */
html {
  overflow-x: clip;
}

.route-map,
section[id] {
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.program,
.partners {
  overflow: hidden;
}

.hero {
  isolation: isolate;
  min-height: max(820px, 100svh);
  background: var(--paper);
}

.hero::before,
.hero::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.hero::before {
  z-index: -2;
  /* WebP s JPG záložkou; na mobile menšia verzia (8 kB namiesto 320 kB). */
  background-image: url("site/pozadie-1.jpg");
  background-image: image-set(url("site/pozadie-1-1600.webp") type("image/webp"), url("site/pozadie-1.jpg") type("image/jpeg"));
  background-repeat: no-repeat;
  background-position: center 75%;
  background-size: cover;
}

.hero::after {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(239,238,220,.86) 0%, rgba(239,238,220,.55) 30%, rgba(239,238,220,.08) 55%, rgba(239,238,220,0) 74%),
    linear-gradient(180deg, rgba(239,238,220,.13), rgba(239,238,220,0) 38%, rgba(239,238,220,.12));
}

.hero-copy {
  width: min(50%, 700px);
}

.hero h1 {
  margin: 0 0 20px;
  font-size: clamp(5rem, 10.8vw, 11rem);
  line-height: .79;
}

.hero-meta {
  width: min(470px, 100%);
  margin-bottom: 21px;
  border-top-width: 1.5px;
}

.hero-intro {
  width: min(350px, 100%);
}

.visual-five {
  background: var(--ink);
}
.visual-five::before {
  width: 190px;
  height: 190px;
  top: 20px;
  left: 50%;
  border: 26px solid var(--pink);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 0 20px rgba(255,92,61,.42), 0 0 48px rgba(255,45,135,.8);
}
.visual-five::after {
  width: 58%;
  height: 4px;
  left: 21%;
  top: 50%;
  background: var(--paper);
  transform: rotate(-17deg);
}
.visual-five span {
  width: 16px;
  height: 16px;
  top: 31px;
  left: 22%;
  border-radius: 50%;
  background: var(--orange);
}
.visual-five i {
  width: 10px;
  height: 10px;
  right: 23%;
  bottom: 31px;
  border-radius: 50%;
  background: var(--pink);
}

.visual-six {
  background: var(--paper-deep);
}
.visual-six::before {
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 34px, rgba(8,9,8,.11) 34px 36px);
}
.visual-six::after {
  width: 38px;
  height: 120%;
  top: -10%;
  left: 27%;
  border-radius: 999px;
  background: linear-gradient(var(--pink), var(--orange));
  box-shadow: 92px 0 0 var(--pink), 184px 0 0 var(--orange), 0 0 38px var(--pink);
  transform: rotate(11deg);
}
.visual-six span {
  inset: 24px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  opacity: .42;
}

.visual-seven {
  background: linear-gradient(145deg, #0b0b0b, #262626);
}
.visual-seven::before {
  width: 72%;
  height: 42%;
  left: 7%;
  top: 13%;
  border-radius: 8px;
  background: linear-gradient(120deg, var(--pink), var(--orange));
  transform: rotate(-10deg);
}
.visual-seven::after {
  width: 68%;
  height: 38%;
  right: 5%;
  bottom: 11%;
  border: 3px solid var(--paper);
  border-radius: 8px;
  transform: rotate(8deg);
}
.visual-seven span {
  width: 34%;
  height: 34%;
  left: 33%;
  top: 33%;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 10px rgba(239,238,220,.25);
}

.visual-eight {
  background: linear-gradient(135deg, var(--paper-deep), #fff);
}
.visual-eight::before {
  width: 120%;
  height: 46px;
  left: -10%;
  top: 34%;
  border-radius: 999px;
  background: var(--ink);
  transform: rotate(18deg);
}
.visual-eight::after {
  width: 120%;
  height: 46px;
  left: -10%;
  top: 52%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pink), var(--orange));
  transform: rotate(-18deg);
}
.visual-eight span {
  width: 84px;
  height: 84px;
  right: 12%;
  top: 13%;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
}
.visual-eight i {
  width: 24px;
  height: 24px;
  left: 14%;
  bottom: 15%;
  border-radius: 50%;
  background: var(--pink);
}

.route-map {
  overflow: hidden;
}

.route-map-stage {
  position: relative;
  margin: 18px 0 12px;
  overflow: hidden;
  border: 1px solid rgba(239,238,220,.18);
  border-radius: 20px;
  background:
    radial-gradient(circle at 72% 20%, rgba(255,45,135,.10), transparent 34%),
    rgba(239,238,220,.025);
}

.route-map-stage svg {
  width: 100%;
  min-height: 430px;
  margin: 0;
}

@media (max-width: 1180px) {
  .hero-copy {
    width: min(56%, 660px);
  }}

@media (max-width: 900px) {
  .hero {
    min-height: 930px;
  }

  .hero::before {
    background-position: 58% 75%;
  }

  .hero::after {
    background:
      linear-gradient(180deg, rgba(239,238,220,.96) 0%, rgba(239,238,220,.82) 48%, rgba(239,238,220,.12) 76%, rgba(239,238,220,.16) 100%),
      linear-gradient(90deg, rgba(239,238,220,.70), rgba(239,238,220,0) 86%);
  }

  .hero-copy {
    width: 100%;
  }

  .hero h1 {
    font-size: clamp(4.7rem, 17vw, 8.5rem);
  }

  .hero-intro {
    width: min(390px, 72%);
  }

  .route-map-stage svg {
    min-height: 0;
  }}

@media (max-width: 640px) {
  .hero {
    min-height: 900px;
    padding-top: calc(var(--header-h) + 35px);
  }

  .hero::before {
    background-position: 61% 75%;
    background-size: auto 100%;
  }

  .hero h1 {
    margin-bottom: 14px;
    font-size: clamp(4rem, 20vw, 5.7rem);
  }

  .hero-meta {
    width: 84%;
  }

  .hero-intro {
    width: 78%;
  }

  .route-map-stage svg {
    width: 620px;
    min-width: 620px;
    transform: none;
  }}

/* ==========================================================
   NOX:ART v4 — supplied logos + “Sídlisko Píly / Zažiari”
   ========================================================== */
.brand {
  align-items: center;
  gap: clamp(8px, 1vw, 13px);
}

.brand-ars-logo {
  display: block;
  width: clamp(64px, 6.2vw, 92px);
  height: auto;
  flex: 0 0 auto;
  object-fit: contain;
}

body.menu-open .site-header .brand-ars-logo {
  filter: invert(1);
}

.brand-footer .brand-ars-logo {
  width: clamp(105px, 10vw, 148px);
  filter: invert(1);
}

.hero-copy {
  width: min(52%, 735px);
}

.hero-location-title {
  margin: 0 0 clamp(4px, .7vh, 9px);
  font-size: clamp(.9rem, 1.35vw, 1.25rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0 0 clamp(14px, 2.2vh, 26px);
  font-size: clamp(6.1rem, 13.4vw, 13rem);
  line-height: .72;
  letter-spacing: -.095em;
  white-space: nowrap;
}

.hero::after {
  background:
    linear-gradient(90deg, rgba(239,238,220,.90) 0%, rgba(239,238,220,.64) 31%, rgba(239,238,220,.13) 55%, rgba(239,238,220,0) 75%),
    linear-gradient(180deg, rgba(239,238,220,.13), rgba(239,238,220,0) 38%, rgba(239,238,220,.12));
}

.hero-mark {
  display: block;
  width: clamp(68px, 6.7vw, 104px);
  height: clamp(68px, 6.7vw, 104px);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transform: rotate(-3deg);
}

.hero-mark img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

@media (max-width: 1180px) {
  .hero-copy {
    width: min(58%, 690px);
  }

  .hero h1 {
    font-size: clamp(5.7rem, 13vw, 10.2rem);
  }}

@media (max-width: 900px) {
  .hero-copy {
    width: 100%;
  }

  .hero h1 {
    font-size: clamp(5rem, 18.5vw, 8.8rem);
  }}

@media (max-width: 640px) {
  .brand {
    gap: 6px;
  }

  .site-header .brand-ars-logo {
    width: 54px;
  }

  .brand-footer .brand-ars-logo {
    width: 104px;
  }

  .hero-location-title {
    margin-bottom: 5px;
    font-size: .76rem;
  }

  .hero h1 {
    margin-bottom: 12px;
    font-size: clamp(4.45rem, 22.6vw, 6rem);
    line-height: .76;
  }

  .hero-mark {
    width: 70px;
    height: 70px;
  }}

/* ==========================================================
   NOX:ART v5 — restored compact hero + official supplied title
   ========================================================== */
.brand {
  align-items: center;
  gap: clamp(8px, 1vw, 13px);
}

.brand-nox-logo {
  display: block;
  width: clamp(126px, 11vw, 166px);
  height: auto;
  flex: 0 0 auto;
  object-fit: contain;
}

body.menu-open .site-header .brand-nox-logo {
  filter: invert(1);
}

.brand-footer .brand-nox-logo {
  width: clamp(132px, 12vw, 180px);
  filter: invert(1);
}

.hero {
  min-height: clamp(560px, 62svh, 760px);
  padding-top: calc(var(--header-h) + clamp(34px, 5.4vh, 62px));
  padding-bottom: clamp(34px, 5vh, 54px);
}

.hero-copy {
  width: min(40.5vw, 535px);
}

.hero-location-title {
  margin: 0 0 8px;
  font-size: clamp(.98rem, 1.25vw, 1.18rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.hero-meta {
  display: block;
  width: auto;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.hero-date {
  font-size: clamp(2.85rem, 4.55vw, 4.45rem);
  line-height: .82;
  letter-spacing: -.075em;
}

.hero-date strong {
  font-size: 1em;
}

.hero-date span {
  margin-top: 7px;
}

.hero-intro {
  width: min(310px, 100%);
  margin-bottom: 26px;
  font-size: clamp(.86rem, 1vw, .98rem);
  line-height: 1.2;
}

.hero-actions {
  gap: 13px;
}

.hero::after {
  background:
    linear-gradient(90deg, rgba(239,238,220,.92) 0%, rgba(239,238,220,.74) 28%, rgba(239,238,220,.23) 48%, rgba(239,238,220,0) 69%),
    linear-gradient(180deg, rgba(239,238,220,.11), rgba(239,238,220,0) 42%, rgba(239,238,220,.10));
}

.hero-mark {
  top: 38%;
  right: 6.5%;
}

.hero-side-note {
  right: 4.5%;
  bottom: 24%;
}

@media (max-width: 1180px) {
  .hero-copy {
    width: min(45vw, 500px);
  }}

@media (max-width: 900px) {
  .hero {
    min-height: 640px;
    padding-top: calc(var(--header-h) + 42px);
  }

  .hero-copy {
    width: min(100%, 540px);
  }

  .hero::after {
    background:
      linear-gradient(180deg, rgba(239,238,220,.97) 0%, rgba(239,238,220,.85) 53%, rgba(239,238,220,.16) 78%, rgba(239,238,220,.14) 100%),
      linear-gradient(90deg, rgba(239,238,220,.76), rgba(239,238,220,0) 88%);
  }

  .hero-mark {
    top: auto;
    right: 7%;
    bottom: 25%;
  }}

@media (max-width: 640px) {
  .brand {
    gap: 6px;
  }

  .site-header .brand-nox-logo {
    width: 112px;
  }

  .site-header .brand-ars-logo {
    width: 48px;
  }

  .brand-footer .brand-nox-logo {
    width: 132px;
  }

  .hero {
    min-height: 620px;
    padding-top: calc(var(--header-h) + 34px);
  }

  .hero-location-title {
    margin-bottom: 6px;
    font-size: .78rem;
  }

  .hero-date {
    font-size: clamp(2.55rem, 13vw, 3.35rem);
  }

  .hero-intro {
    width: min(77vw, 310px);
    margin-bottom: 23px;
    font-size: .84rem;
  }

  .hero-actions {
    gap: 9px;
  }

  .hero-mark {
    right: 5%;
    bottom: 20%;
  }}

/* NOX:ART v5 final spacing — compact desktop layout from the selected reference */
@media (min-width: 901px) {
  .hero {
    min-height: clamp(650px, 63.5vw, 780px);
    padding-top: calc(var(--header-h) + clamp(12px, 2vh, 24px));
    padding-bottom: clamp(28px, 3vw, 42px);
  }

  .hero-copy {
    width: min(48.5vw, 620px);
  }

  .hero-location-title {
    margin-bottom: 6px;
  }

  .hero-meta {
    margin-bottom: 14px;
  }

  .hero-intro {
    margin-bottom: 23px;
  }

  .hero-mark {
    top: 42%;
    right: 3.4%;
    width: clamp(52px, 5.1vw, 70px);
    height: clamp(52px, 5.1vw, 70px);
  }

  .hero-side-note {
    display: block;
    right: 3.4%;
    bottom: 26%;
  }

  .hero-scroll {
    right: 2.6%;
    bottom: 15px;
  }}

@media (min-width: 901px) and (max-width: 1120px) {
  .hero-date {
    font-size: clamp(2.55rem, 5vw, 3.55rem);
  }

  .hero-intro {
    width: min(285px, 100%);
    font-size: .84rem;
  }

  .hero-actions .button {
    min-height: 42px;
    padding-inline: 20px;
    font-size: .7rem;
  }

  .hero-side-note {
    font-size: .62rem;
  }}

/* =========================================================================
   Reálna mapa (Mapbox GL) namiesto pôvodnej dekoratívnej SVG schémy.
   ========================================================================= */
.site-map-wrap{position:relative;width:100%;min-height:430px;border-radius:20px;overflow:hidden}
.site-map{position:absolute;inset:0}
.site-map .mapboxgl-canvas{outline:none}
.site-map .mapboxgl-ctrl-logo{opacity:.55}
/* Značka je len obal – otáča sa kvapka vnútri, nie ona samotná. Mapbox
   totiž na značku zapisuje vlastný transform (posun po mape) a akékoľvek
   otočenie na nej by prepísal. */
.site-marker{
  /* POZOR: žiadne position – Mapbox značke sám nastavuje position:absolute
     a vlastné súradnice. Prepísať mu to znamená, že značky prestanú držať
     svoje miesto a pri posúvaní mapy sa rozbehnú. Absolútne umiestneným
     deťom vnútri stačí práve to Mapboxove absolute. */
  width:28px;height:28px;cursor:pointer;
}
.site-marker i{
  position:absolute;inset:1px;
  transition:transform .2s var(--ease), box-shadow .2s ease;
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  /* Farbu podľa kategórie nastavuje JS cez --pin; bez nej platí pôvodná. */
  background:var(--pin, linear-gradient(135deg, var(--pink), var(--orange)));
  border:2px solid var(--paper);box-shadow:0 3px 10px rgba(0,0,0,.35);
}
/* Prejdenie kurzorom nad dlaždicou v zozname zväčší jej značku na mape.
   z-index dvíha značku nad susedné, aby ju v zhluku nezakryli. */
.site-marker.is-hovered{z-index:5}
.site-marker.is-hovered i{
  transform:rotate(-45deg) scale(1.35);
  box-shadow:0 5px 16px rgba(0,0,0,.45);
}
/* Číslo leží nad kvapkou a samo sa neotáča – stojí teda vždy rovno. */
.site-marker b{position:absolute;inset:0;display:grid;place-items:center;
  color:var(--paper);font-size:.72rem;font-weight:800;line-height:1}

/* =========================================================================
   Obranné pravidlá – tvrdo vynútia layout hlavičky/menu aj keby sa odniekiaľ
   (mimo enqueue systému, napr. vlastný <style> blok témy) primiešal
   konfliktný globálny štýl (napr. button{display:...}).
   ========================================================================= */
.nox-art-site .site-header{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;width:100% !important;margin:0 !important;max-width:none !important;border-radius:0 !important;box-sizing:border-box !important}
.nox-art-site .menu-toggle{display:none !important}
.nox-art-site .main-nav > a:not(.nav-pill){color:var(--ink) !important}
@media (max-width:900px) {
  .nox-art-site .menu-toggle{display:block !important}}
.nox-art-site img{max-width:100%}

/* =========================================================================
   Keď je viditeľný WP admin panel (prihlásený používateľ), treba fixnú
   hlavičku posunúť pod neho – inak sa jej horná časť prekrýva s admin
   lištou a vyzerá to stlačené/zarovnané úplne navrch.
   ========================================================================= */
.nox-art-site.admin-bar .site-header{top:32px !important}
@media (max-width:782px) {
  .nox-art-site.admin-bar .site-header{top:46px !important}}

/* =========================================================================
   Rozloženie po zjednodušení: žiadne fixované karty ani "stack" animácia –
   stránka scrolluje natívne a obsah je rozdelený na podstránky. Zostávajú
   len dve úpravy oproti pôvodnému prototypu.
   ========================================================================= */

/* 1) Text v hero sekcii (dátum, popis, tlačidlá) je zarovnaný dole.
      margin-top:auto namiesto justify-content:flex-end – pri justify-content
      by sa vrchná časť obsahu nedala doscrollovať, keby sa raz nezmestila. */
.nox-art-site .hero{
  display:flex;
  flex-direction:column;
}
.nox-art-site .hero > .hero-copy{
  margin-top:auto;
}

/* 2) Prvá sekcia na podstránke začína hneď pod fixnou hlavičkou, takže musí
      mať o jej výšku väčšie horné odsadenie (hero si to rieši sám). */
.nox-art-site main > .section:first-child{
  padding-top:calc(var(--header-h) + clamp(38px, 6vh, 86px));
}

/* 3) Hero (prvá strana) je na celú výšku okna. Prototyp ho na viacerých
      breakpointoch znižoval pevnými pixelmi – jedno pravidlo s vyššou
      špecifickosťou ich prebije naraz. min-height (nie height): keby sa raz
      obsah do výšky okna nezmestil, sekcia môže narásť namiesto orezania. */
.nox-art-site .hero{
  min-height:100svh;
  /* Tlačidlá sú zarovnané na spodok hero, takže odsadenie zdola určuje,
     ako blízko k hrane sedia. Prototyp ho mal na desktope len ~30px, čo
     pôsobí natesno. */
  padding-bottom:clamp(54px, 7vh, 110px);
}

/* =========================================================================
   Filtrovanie podľa kategórie + galéria diel (dlaždice s číslom miesta
   a názvom priamo na fotke). Rovnaký filtrovací pruh používa Program aj
   Diela – líši sa len farebným variantom pre svetlý/tmavý podklad.
   ========================================================================= */
.filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:clamp(22px, 4vh, 44px);
}
.filter-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 20px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.01em;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.filter-chip:hover{
  border-color:var(--ink);
}
.filter-chip.is-active{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
}
/* Kvapka pri "Všetky" – rovnaký tvar ako značka na mape, aby bolo vidieť,
   že filter pracuje s miestami na mape. */
.chip-pin{
  flex:0 0 auto;
  width:11px;
  height:11px;
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  background:var(--pin, linear-gradient(135deg, var(--pink), var(--orange)));
}

/* Variant na tmavom podklade (sekcia Program). */
.filter-bar-light .filter-chip{
  border-color:rgba(239, 238, 220, .3);
  color:var(--paper);
}
.filter-bar-light .filter-chip:hover{
  border-color:var(--paper);
}
.filter-bar-light .filter-chip.is-active{
  background:var(--paper);
  border-color:var(--paper);
  color:var(--ink);
}

.is-filtered-out{
  display:none !important;
}
.filter-empty{
  margin-top:28px;
  color:var(--muted);
  font-size:.92rem;
}
.program .filter-empty{
  color:var(--paper);
  opacity:.7;
}

/* --- Galéria diel ------------------------------------------------------ */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:clamp(10px, 1.2vw, 18px);
  margin-top:clamp(18px, 3vh, 34px);
}
.gallery-tile{
  position:relative;
  aspect-ratio:4 / 3;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--ink);
  isolation:isolate;
}
.tile-media{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transition:transform .5s var(--ease);
}
/* Fotka dlaždice je <img>, nie pozadie – prehliadač ju tak vie odložiť
   (loading="lazy") a stiahnuť vo veľkosti podľa obrazovky (srcset). */
.tile-media-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.gallery-tile:hover .tile-media{
  transform:scale(1.04);
}
.tile-media-empty{
  display:grid;
  place-items:center;
}
/* Tmavý prechod pod názvom – bez neho by sa biely text stratil na svetlej
   fotke. Kryje len spodnú tretinu, aby fotka zostala čitateľná. */
.gallery-tile::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:62%;
  background:linear-gradient(to top, rgba(8,9,8,.88), rgba(8,9,8,.45) 42%, transparent);
  pointer-events:none;
}
.tile-pin{
  position:absolute;
  top:14px;
  left:14px;
  z-index:2;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  background:var(--pin, linear-gradient(135deg, var(--pink), var(--orange)));
  box-shadow:0 3px 10px rgba(0,0,0,.35);
}
.tile-pin b{
  transform:rotate(45deg);
  color:var(--paper);
  font-size:.78rem;
  font-weight:800;
  line-height:1;
}
.tile-caption{
  position:absolute;
  inset:auto 16px 14px;
  z-index:2;
}
.tile-caption h3{
  margin:0;
  color:var(--paper);
  font-size:clamp(.95rem, 1.1vw, 1.08rem);
  font-weight:700;
  line-height:1.25;
}
.tile-caption p{
  margin:4px 0 0;
  color:rgba(239, 238, 220, .72);
  font-size:.78rem;
}
/* Odkaz kryje celú dlaždicu – kliknúť sa dá kdekoľvek, nielen na text. */
.tile-link{
  position:absolute;
  inset:0;
  z-index:3;
}
.gallery-tile:focus-within{
  outline:2px solid var(--pink);
  outline-offset:2px;
}
.gallery-tile.is-map-active{
  outline:2px solid var(--pink);
  outline-offset:-2px;
}

@media (max-width: 620px) {
  .gallery-grid{
    grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  }
  .filter-chip{
    padding:9px 15px;
    font-size:.75rem;
  }}

/* =========================================================================
   Zoznam vľavo (2/3), mapa vpravo (1/3). Mapa je prilepená, takže zostáva
   na očiach aj počas prechádzania dlhého zoznamu. Pod 1000px sa rozloženie
   zlomí do jedného stĺpca a mapa klesne pod zoznam – na úzkej obrazovke by
   tretinový stĺpec nebol na nič použiteľný.
   ========================================================================= */
/* .program má z prototypu overflow:hidden kvôli dekoratívnym tvarom, lenže
   to z nej robí posuvný kontajner a prilepenie mapy by prestalo fungovať.
   overflow:clip oreže rovnako, ale posuvný kontajner nevytvára; staršie
   prehliadače tento riadok ignorujú a zostane im pôvodné hidden. */
.nox-art-site .program{
  overflow:clip;
  /* Prvých --radius-xl pixelov sekcie je zasunutých pod hero, takže z
     odsadenia toľko "ujde" – pripočítavame ich, aby bola viditeľná medzera
     naozaj taká, akú tu nastavíme. */
  padding-top:calc(var(--radius-xl) + clamp(34px, 4vw, 70px));
  padding-bottom:clamp(40px, 5vw, 90px);
  /* Tmavá sekcia musí siahať až za celý oblúk zaoblených rohov hero, inak
     v nich presvitá pozadie stránky. Prototyp ju podsúval len o 20px, čo je
     menej než polomer zaoblenia. */
  margin-top:calc(-1 * var(--radius-xl));
}
.program-layout{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:clamp(18px, 2.2vw, 36px);
  align-items:start;
  margin-top:clamp(18px, 3vh, 34px);
}
.program-layout-list{
  min-width:0;
}
.program-layout-list .gallery-grid{
  margin-top:0;
  /* Najviac päť dlaždíc v rade. Minimálna šírka stĺpca je väčšia z 200px a
     pätiny riadku – keď sa teda zmestí viac stĺpcov, pätina ich zhora
     obmedzí na päť, a na užších obrazovkách sa ich počet prirodzene znižuje
     podľa tých 200px. */
  grid-template-columns:repeat(auto-fill, minmax(max(200px, calc((100% - 4 * clamp(10px, 1.2vw, 18px)) / 5)), 1fr));
}
/* --map-gap je medzera medzi menu a prilepenou mapou; dole zostáva o niečo
   menšia, aby mapa nepôsobila, že visí. */
.program-layout-map{
  --map-gap:34px;
  position:sticky;
  top:calc(var(--header-h) + var(--map-gap));
  /* Vytiahnuté hore o výšku hlavičky rámčeka, aby s prvým radom dlaždíc
     vľavo lícovalo samotné plátno mapy, nie okraj rámčeka. Hodnota sa
     skladá z odsadenia rámčeka a pevnej časti (nadpis + medzery), takže
     drží aj keď sa odsadenie so šírkou okna mení. */
  margin-top:calc(-1 * (clamp(12px, 1.2vw, 18px) + 50px));
  /* Mapa je presne na výšku okna pod hlavičkou: hore sa tak nemá čím
     prekryť a dole nezostáva prázdne miesto. Rámček dopĺňa zvyšnú výšku,
     plátno mapy ju vyplní. */
  /* Rovnaká medzera hore aj dole – preto --map-gap dvakrát. */
  height:calc(100svh - var(--header-h) - var(--map-gap) * 2);
  display:flex;
  flex-direction:column;
}
.program-layout-map .route-map{
  flex:1;
  min-height:0;
}
.program-layout-map .route-map-stage{
  flex:1;
  min-height:0;
}
.program-layout-map .site-map-wrap{
  height:100%;
}
.program-layout-map .route-map{
  display:flex;
  flex-direction:column;
  /* Rámček mal okolo mapy zbytočne veľa miesta – samotná mapa je tu obsah,
     nie ozdoba, tak nech ho využije. */
  padding:clamp(12px, 1.2vw, 18px);
}
/* Hlavička s nadpisom "Mapa diel" a jej linka idú cez celú šírku rámčeka. */
.program-layout-map .route-map-head{
  padding-bottom:12px;
  padding-inline:0;
}
.program-layout-map .route-map-stage{
  margin:12px 0 8px;
}
/* Popisok je pod rámčekom, nie v ňom – je to pokyn k mape, nie jej súčasť.
   Vodorovne lícuje s plátnom mapy, teda o odsadenie rámčeka a jeho linku
   dovnútra, nie s okrajom rámčeka. */
.program-layout-map .route-note{
  margin:10px 0 0;
  padding-inline:calc(clamp(12px, 1.2vw, 18px) + 1px);
}

@media (max-width: 1000px) {
  .program-layout{
    grid-template-columns:1fr;
  }
  .program-layout-map{
    position:static;
    height:auto;
    /* V jednom stĺpci mapa nasleduje za dlaždicami, takže vytiahnutie hore
       (ktoré ju v dvojstĺpci zarovnávalo s prvým radom) by ju naňho
       posunulo – tu naopak potrebuje odstup. */
    margin-top:clamp(28px, 5vh, 60px);
  }
  .program-layout-map .site-map-wrap{
    height:auto;
    min-height:420px;
  }}

/* =========================================================================
   Prekrytie sekcií: prvá strana leží NAD druhou. Hero má zaoblené spodné
   rohy a presahuje cez vrch tmavej sekcie – tá preto nesmie mať zaoblený
   vrch (inak by boli vidieť dva zaoblené okraje nad sebou) a musí byť
   v nižšej vrstve.
   ========================================================================= */
.nox-art-site .hero{
  position:relative;
  z-index:2;
}
.nox-art-site .program{
  z-index:1;
  border-radius:0 0 var(--radius-xl) var(--radius-xl);
}

/* Druhý rad filtrov je spresnenie v rámci skupiny, nie rovnocenná voľba –
   preto nemá rámčeky ako hlavný rad, ale je to riadok drobných textových
   prepínačov. Rozdiel vo veľkosti sám o sebe nestačil: dva rady rovnako
   orámovaných tlačidiel pod sebou vyzerali ako jeden dlhý zoznam. */
.filter-bar-sub{
  align-items:baseline;
  gap:4px;
  margin-top:12px;
  padding-left:2px;
}
.filter-bar-sub::before{
  content:"Spresniť:";
  align-self:center;
  margin-right:6px;
  color:rgba(239, 238, 220, .5);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.filter-bar-sub .filter-chip{
  padding:5px 11px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:rgba(239, 238, 220, .68);
  font-size:.76rem;
  font-weight:600;
}
.filter-bar-sub .filter-chip:hover{
  color:var(--paper);
  background:rgba(239, 238, 220, .09);
}
.filter-bar-sub .filter-chip.is-active{
  background:rgba(239, 238, 220, .16);
  color:var(--paper);
}

@media (max-width: 620px) {
  .filter-bar-sub::before{
    width:100%;
    margin:0 0 2px;
  }}

/* Prototyp má na <body> overflow-x:hidden. Tým sa z neho stáva posuvný
   kontajner – prilepená mapa pri zozname sa potom vzťahuje naň, lenže body
   sa neposúva (posúva sa <html>), takže by neprilepila vôbec. overflow:clip
   oreže vodorovné presahy rovnako, ale posuvný kontajner nevytvára. */
.nox-art-site{
  overflow-x:clip;
}

/* Text patrí pod nadpis, nie vedľa neho. */
.nox-art-site .program-head{
  display:block;
}
.nox-art-site .program-head p{
  max-width:46ch;
  margin-top:clamp(14px, 2.5vh, 28px);
}

/* Keď je prihlásený používateľ, WordPress posúva stránku o admin lištu –
   fixná hlavička ide nižšie a prilepená mapa sa pod ňu musí posunúť tiež,
   inak jej vrch zmizne za menu. Výšku mapy o to isté zmenšujeme. */
.nox-art-site.admin-bar .program-layout-map{
  top:calc(var(--header-h) + 32px + var(--map-gap));
  height:calc(100svh - var(--header-h) - 32px - var(--map-gap) * 2);
}
@media (max-width: 782px) {
  .nox-art-site.admin-bar .program-layout-map{
    top:calc(var(--header-h) + 46px + var(--map-gap));
    height:calc(100svh - var(--header-h) - 46px - var(--map-gap) * 2);
  }}
@media (max-width: 1000px) {
  .nox-art-site.admin-bar .program-layout-map{
    height:auto;
  }}

/* =========================================================================
   Časový harmonogram – druhý pohľad sekcie Program a diela. Je na tmavom
   podklade sekcie, takže farby sú svetlé.
   ========================================================================= */
.schedule{
  margin-top:clamp(18px, 3vh, 34px);
}
.schedule-day + .schedule-day{
  margin-top:clamp(26px, 4vh, 52px);
}
.schedule-day-title{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin:0 0 6px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(239, 238, 220, .3);
  color:var(--paper);
  font-size:clamp(1rem, 1.3vw, 1.2rem);
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.schedule-day-title span{
  color:rgba(239, 238, 220, .55);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.04em;
}
.schedule-list{
  margin:0;
  padding:0;
  list-style:none;
}
/* Riadok: čas, farebná kvapka kategórie, názov, doplnok. Pod 700px sa
   doplnok presunie pod názov, čas zostáva vľavo. */
.schedule-row{
  display:grid;
  grid-template-columns:auto auto 1fr;
  align-items:baseline;
  gap:4px 12px;
  padding:10px 2px;
  border-bottom:1px solid rgba(239, 238, 220, .12);
  color:var(--paper);
}
.schedule-time{
  min-width:7.5em;
  font-size:.86rem;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.schedule-dot{
  width:9px;
  height:9px;
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  background:var(--pin, linear-gradient(135deg, var(--pink), var(--orange)));
}
.schedule-name{
  font-weight:700;
}
.schedule-meta{
  grid-column:3;
  color:rgba(239, 238, 220, .6);
  font-size:.86rem;
}
@media (min-width: 701px) {
  .schedule-row{
    grid-template-columns:auto auto 1fr auto;
  }
  .schedule-meta{
    grid-column:4;
    text-align:right;
  }}

/* =========================================================================
   Detail položky – otvára sa v ľavom stĺpci namiesto zoznamu, mapa vpravo
   sa medzitým priblíži na jej miesto.
   ========================================================================= */
.gallery-tile{
  cursor:pointer;
}
.detail-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:clamp(16px, 3vh, 30px);
  padding:10px 18px;
  border:1px solid rgba(239, 238, 220, .3);
  border-radius:999px;
  background:transparent;
  color:var(--paper);
  font:inherit;
  font-size:.82rem;
  font-weight:700;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.detail-back:hover{
  border-color:var(--paper);
  background:rgba(239, 238, 220, .1);
}
.detail-title{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0;
  color:var(--paper);
  font-size:clamp(1.5rem, 3vw, 2.4rem);
  line-height:1.1;
}
/* Číslo pred názvom – tá istá kvapka a farba ako na dlaždici a na mape. */
.detail-pin{
  position:relative;
  flex:0 0 auto;
  width:34px;
  height:34px;
}
.detail-pin::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  background:var(--pin, linear-gradient(135deg, var(--pink), var(--orange)));
}
.detail-pin b{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:var(--paper);
  font-size:.85rem;
  font-weight:800;
}
/* Autor, miesto a čas každé na vlastnom riadku. */
.detail-facts{
  margin:16px 0 0;
  padding:0;
  list-style:none;
  color:rgba(239, 238, 220, .66);
  font-size:.95rem;
  line-height:1.7;
}
/* Fotka je doplnok k popisu, nie hlavný obsah – stačí jej tretina šírky.
   Na úzkej obrazovke, kde je stĺpec sám osebe úzky, ide cez celú šírku. */
.detail-foto{
  display:block;
  width:min(33%, 340px);
  margin-top:clamp(18px, 3vh, 32px);
  border-radius:var(--radius-md);
}
@media (max-width: 620px) {
  .detail-foto{
    width:100%;
  }}
.detail-text{
  max-width:70ch;
  margin-top:clamp(18px, 3vh, 32px);
  color:rgba(239, 238, 220, .82);
  line-height:1.65;
}
.detail-text p{
  margin:0 0 1em;
}
.detail-text a{
  color:var(--pink);
}

/* V detaile položky ustúpi hlavička sekcie – na obrazovke zostane mapa,
   popis s fotkou a odkaz na návrat. */
.nox-art-site .program.is-detail > .section-label,
.nox-art-site .program.is-detail .program-head{
  display:none;
}

/* V detaile nie je vľavo mriežka dlaždíc, s ktorou sa mapa zarovnávala –
   vytiahnutie hore by ju tak posunulo pod hlavičku. Začína preto rovno
   pri tlačidle späť. */
/* V detaile je nad dvojstĺpcom len tlačidlo späť – odstup, ktorý v zozname
   oddeľuje mriežku od filtrov, by mapu posunul mimo jej prilepenú polohu. */
.nox-art-site .program.is-detail .program-layout{
  margin-top:0;
}
.nox-art-site .program.is-detail .program-layout-map{
  margin-top:0;
  /* V detaile sa stránka zarovná tak, že vrch tmavej sekcie sedí pod menu –
     mapa teda začína o jej horné odsadenie nižšie a musí byť o to isté
     nižšia, aby jej pod spodkom zostala rovnaká medzera ako inde. */
  height:calc(100svh - var(--header-h) - clamp(34px, 4vw, 70px) - var(--map-gap));
}
.nox-art-site.admin-bar .program.is-detail .program-layout-map{
  height:calc(100svh - var(--header-h) - 32px - clamp(34px, 4vw, 70px) - var(--map-gap));
}

/* Detail je kratší než mapa vedľa neho – nech aspoň nekončí hneď pod
   textom a stĺpce pôsobia ako jeden celok. */
.nox-art-site .program.is-detail .program-layout-list{
  display:flex;
  flex-direction:column;
}
.nox-art-site .program.is-detail [data-view-panel="detail"]{
  flex:1;
}

/* Rovnaký odstup nad označením sekcie ako má Program – prototyp mal
   v sekciách odsadenie takmer dvojnásobné. */
.nox-art-site .about,
.nox-art-site .partners{
  padding-top:clamp(34px, 4vw, 70px);
}

/* Riadok harmonogramu, ktorý niekam vedie, sa správa ako odkaz. */
.schedule-row[data-row-detail],
.schedule-row[data-row-kategoria]{
  cursor:pointer;
  transition:background .18s ease;
}
.schedule-row[data-row-detail]:hover,
.schedule-row[data-row-kategoria]:hover{
  background:rgba(239, 238, 220, .07);
}

/* Značka mimo práve zobrazeného výberu. */
.site-marker.is-map-hidden{
  display:none;
}

/* Prepínanie pohľadov mení výšku stránky – bez tohto by prehliadač polohu
   sám dorovnával a prebíjal by návrat na miesto, kde človek v zozname bol.
   Musí to byť na posúvanom dokumente, nie na meniacom sa prvku. */
.nox-art-site{
  overflow-anchor:none;
}

/* Značka zastupujúca viac vecí na jednom mieste – namiesto čísla tri bodky. */
.site-marker.is-cluster b{
  font-size:.62rem;
  letter-spacing:.5px;
}
/* Rozložené značky ležia nad ostatnými, nech sa dá kliknúť presne. */
.site-marker.is-expanded{
  z-index:6;
}

/* =========================================================================
   Newsletter ako vysúvací panel na pravom okraji. Zavretý je úplne mimo
   obrazovky – vysunie ho až odkaz "Sleduj nás" (kotva #kontakt).
   ========================================================================= */
.newsletter-dock {
  position: fixed;
  z-index: 70;
  top: 50%;
  right: 0;
  display: flex;
  align-items: stretch;
  transform: translate(100%, -50%);
  transition: transform .5s var(--ease);
}

.newsletter-dock.is-open {
  transform: translate(0, -50%);
}

.newsletter-panel {
  position: relative;
  width: min(430px, calc(100vw - 36px));
  max-height: min(640px, calc(100svh - 120px));
  padding: clamp(26px, 3vw, 40px);
  overflow: auto;
  border: 1.5px solid var(--ink);
  border-right: 0;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background: var(--paper-deep);
  /* Zavretý panel nemá byť dostupný klávesnicou ani čítačkou obrazovky. */
  visibility: hidden;
  transition: visibility 0s linear .5s;
}

.newsletter-dock.is-open .newsletter-panel {
  visibility: visible;
  transition-delay: 0s;
}

.newsletter-panel .section-label {
  margin: 0 0 22px;
}

.newsletter-panel h2 {
  margin: 0 0 30px;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.02;
  text-transform: uppercase;
}

.newsletter-panel .newsletter-form input {
  font-size: 1.05rem;
}

.newsletter-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.newsletter-close:hover {
  color: var(--cream);
  background: var(--ink);
}

@media (max-width: 720px) {
  .newsletter-panel {
    max-height: calc(100svh - 150px);
  }}

@media (prefers-reduced-motion: reduce) {
  .newsletter-dock {
    transition: none;
  }}

/* =========================================================================
   Partneri po skupinách – logá v riadkoch, veľkosť podľa dôležitosti
   skupiny (organizátor a generálny partner najväčšie).
   ========================================================================= */
.partner-group {
  margin-top: clamp(44px, 5vw, 72px);
}

.partner-group-title {
  margin: 0 0 24px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.partner-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Logá stoja voľne vedľa seba – žiadne rámčeky ani dlaždice. */
.partner-logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  transition: opacity .25s ease;
}

.partner-logo:hover {
  opacity: .62;
}

.partner-logo a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.partner-logo img {
  width: auto;
  max-width: 100%;
  height: var(--logo-h, 64px);
  object-fit: contain;
}

.partner-logo-text {
  font-family: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, sans-serif;
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

/* Organizátor a generálny partner sú rovnako veľkí, zvyšné skupiny polovičné. */
.partner-group[data-skupina="organizator"] .partner-logo,
.partner-group[data-skupina="generalny"] .partner-logo {
  --logo-h: 110px;
}

.partner-group[data-skupina="organizator"] .partner-logo-text,
.partner-group[data-skupina="generalny"] .partner-logo-text {
  font-size: 1.7rem;
}

.partner-group[data-skupina="partner"] .partner-logo,
.partner-group[data-skupina="medialny"] .partner-logo {
  --logo-h: 55px;
}

.partner-group[data-skupina="partner"] .partner-logo-text,
.partner-group[data-skupina="medialny"] .partner-logo-text {
  font-size: 1rem;
}

.partners-empty {
  margin-top: 40px;
  color: var(--muted);
  font-size: .9rem;
}

@media (max-width: 720px) {
  .partner-logos {
    gap: 26px;
  }

  .partner-group[data-skupina="organizator"] .partner-logo,
  .partner-group[data-skupina="generalny"] .partner-logo {
    --logo-h: 76px;
  }

  .partner-group[data-skupina="partner"] .partner-logo,
  .partner-group[data-skupina="medialny"] .partner-logo {
    --logo-h: 38px;
  }}

/* =========================================================================
   Výkon na mobile: menšie pozadie, obrázky mimo obrazovky sa nevykresľujú,
   <picture> nesmie rozbiť rozloženie značiek.
   ========================================================================= */
.brand picture,
.brand-footer picture,
.hero-mark picture {
  display: contents;
}

@media (max-width: 760px) {
  .hero::before {
    background-image: url("site/pozadie-1.jpg");
    background-image: image-set(url("site/pozadie-1-900.webp") type("image/webp"), url("site/pozadie-1.jpg") type("image/jpeg"));
  }}

/* Sekcie mimo obrazovky prehliadač nemusí vykresľovať – šetrí to čas
   hlavného vlákna pri prvom vykreslení. Odhad výšky drží scrollbar. */
.about,
.partners,
.site-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
/* Čokoľvek cudzie vložené nad našu hlavičku (oznamovacie lišty tém
   a pluginov) nezobrazujeme – stránka má vlastnú hlavičku. Rovnaké
   upratovanie robí aj site.js pre prehliadače bez :has(). */
body.nox-art-site > *:not(.scroll-progress):not(#wpadminbar):not(script):not(style):not(link):not(noscript):has(~ .site-header) {
  display: none !important;
}

/* =========================================================================
   Mobil: hlavička a tlačidlo menu
   ========================================================================= */

/* Na telefónoch s "celoobrazovkovým" prehliadačom siaha stránka až pod
   stavový riadok – pruh nad hlavičkou, v ktorom presvital obsah. Hlavička
   si preto o túto bezpečnú zónu rozšíri vlastnú výplň aj pozadie. */
.nox-art-site .site-header {
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
}

@media (max-width: 760px) {
  .nox-art-site .site-header {
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
  }
}

/* Pozadie hlavičky po odrolovaní musí prekryť aj tú bezpečnú zónu, inak
   cez ňu presvitá obsah stránky. */
.nox-art-site .site-header.is-scrolled {
  background: rgba(239, 238, 220, .92);
}

/* Tlačidlo menu: téma webu má vlastné štýly pre <button> (rozmery, rámček,
   polomer, farba), ktoré nám z koliečka robili veľký ružový obdĺžnik.
   Vynucujeme si vlastný vzhľad. */
.nox-art-site .menu-toggle {
  width: 46px !important;
  height: 46px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1.5px solid currentColor !important;
  border-radius: 50% !important;
  color: var(--ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-transform: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.nox-art-site .menu-toggle span {
  left: 12px !important;
  width: 22px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: currentColor !important;
}

.nox-art-site .menu-toggle span:first-child { top: 17px !important; }
.nox-art-site .menu-toggle span:last-child { top: 27px !important; }

.nox-art-site.menu-open .menu-toggle {
  color: var(--paper) !important;
}

.nox-art-site.menu-open .menu-toggle span:first-child {
  top: 22px !important;
  transform: rotate(45deg);
}

.nox-art-site.menu-open .menu-toggle span:last-child {
  top: 22px !important;
  transform: rotate(-45deg);
}

/* Otvorené menu musí rovnako prekryť bezpečnú zónu a začínať pod hlavičkou. */
@media (max-width: 900px) {
  .nox-art-site .main-nav {
    padding-top: calc(90px + env(safe-area-inset-top, 0px));
  }
}

/* Admin lišta WordPressu je do šírky 600 px odrolovateľná (position:absolute),
   takže hlavička nad ňu nesmie byť odsadená – inak nad ňou zostal pruh, cez
   ktorý presvital obsah stránky. */
@media (max-width: 600px) {
  .nox-art-site.admin-bar .site-header {
    top: 0 !important;
  }
}

@media (max-width: 600px) {
  .nox-art-site.admin-bar .program-layout-map {
    top: calc(var(--header-h) + var(--map-gap));
  }
}

/* =========================================================================
   Mobil: hlavička presahuje nad okraj okna. Telefóny (iOS Safari) kreslia
   stránku aj pod stavový riadok, kde sa fixná hlavička s top:0 už
   nenachádza – v tom páse presvital obsah. Hlavička preto začína nad
   okrajom okna a o rovnako veľkú výplň má posunutý obsah: viditeľná časť
   ostáva na mieste, presah navyše prekryje stavový riadok.
   ========================================================================= */
@media (max-width: 900px) {
  .nox-art-site .site-header {
    --hlavicka-presah: 80px;
    top: calc(-1 * var(--hlavicka-presah)) !important;
    padding-top: calc(var(--hlavicka-presah) + 10px + env(safe-area-inset-top, 0px)) !important;
  }

  /* 601–782 px: admin lišta je ešte fixovaná, hlavička patrí pod ňu. */
  .nox-art-site.admin-bar .site-header {
    top: calc(46px - var(--hlavicka-presah)) !important;
  }

  /* Pozadie musí byť nepriehľadné – cez priesvitné by presah nepomohol. */
  .nox-art-site .site-header.is-scrolled {
    background: var(--paper);
  }
}

@media (max-width: 600px) {
  /* Admin lišta je tu odrolovateľná, hlavička teda ide úplne nahor. */
  .nox-art-site.admin-bar .site-header {
    top: calc(-1 * var(--hlavicka-presah)) !important;
  }
}

/* Rozostrené pozadie (backdrop-filter) si prehliadač kreslí do vlastnej
   vrstvy, ktorú na mobile oreže presne na okraj okna – presah hlavičky nad
   okraj sa tak vôbec nevykreslil a pás nad ňou zostal priehľadný. Na malých
   obrazovkách preto rozostrenie nepoužívame, len plnú farbu. */
@media (max-width: 900px) {
  .nox-art-site .site-header,
  .nox-art-site .site-header.is-scrolled {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .nox-art-site .site-header.is-scrolled {
    background: var(--paper) !important;
  }

  /* Istota pre prípad, že by presah orezalo niečo iné: pás nad hlavičkou
     vyplní jej vlastný "strop" nalepený na horný okraj okna. */
  .nox-art-site .site-header::before {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--hlavicka-presah, 80px) + env(safe-area-inset-top, 0px));
    content: "";
    background: var(--paper);
    transform: translateY(-100%);
  }

  .nox-art-site .site-header.is-scrolled::before {
    transform: none;
  }
}

/* S viewport-fit=cover siaha stránka aj pod spodný ovládací pruh telefónu –
   päte preto pridáme spodnú bezpečnú zónu, nech text nekončí pod ním. */
@media (max-width: 900px) {
  .nox-art-site .site-footer {
    padding-bottom: calc(clamp(28px, 4vw, 48px) + env(safe-area-inset-bottom, 0px));
  }
}

/* =========================================================================
   Ikony sociálnych sietí v hlavičke (za tlačidlom Newsletter) a v päte.
   ========================================================================= */
.nav-social {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
}

.nav-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  color: inherit;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.nav-social a:hover {
  color: var(--cream);
  border-color: var(--ink);
  background: var(--ink);
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer-social svg {
  flex: 0 0 auto;
}

/* V rozbalenom menu na mobile idú ikony na vlastný riadok pod odkazy. */
@media (max-width: 900px) {
  .nav-social {
    margin: 18px 0 0;
    gap: 10px;
  }

  .nav-social a {
    width: 44px;
    height: 44px;
    border-color: rgba(247, 245, 232, .4);
  }

  .nav-social a:hover {
    color: var(--ink);
    border-color: var(--paper);
    background: var(--paper);
  }
}

/* Doložky o finančnej podpore pod logami partnerov – jeden stĺpec
   s odrážkami, drobným písmom. */
.partner-support {
  margin: clamp(48px, 6vw, 80px) 0 0;
  padding-left: 1.2em;
  list-style: disc;
  color: var(--ink);
  font-size: clamp(.82rem, 1.1vw, .95rem);
  line-height: 1.6;
}

.partner-support li {
  margin-bottom: 2px;
}

.partner-support li:last-child {
  margin-bottom: 0;
}

/* Sekcie O festivale a Partneri stoja na rovnakom papierovom podklade ako
   úvodná strana – inak cez ne presvitalo biele pozadie témy. */
.nox-art-site .about,
.nox-art-site .partners {
  background: var(--paper);
}

/* Organizátor a generálny partner vedľa seba; zvyšné skupiny ostávajú
   pod sebou cez celú šírku. */
.partner-row-top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
}

.partner-row-top .partner-group {
  margin-top: clamp(44px, 5vw, 72px);
}

@media (max-width: 760px) {
  .partner-row-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

/* Podklad celej stránky (teda aj plocha okolo tmavej päty a pod ňou) má byť
   papierový ako úvodná strana – téma webu inak presadí biele pozadie. */
html:has(body.nox-art-site),
body.nox-art-site {
  background: var(--paper) !important;
}

/* =========================================================================
   Základ sadzby. Blokové témy (napr. Twenty Twenty-Five) si cez globálne
   štýly nastavujú vlastnú veľkosť písma a tá sa prenášala do našich clamp()
   výpočtov – stránka potom vyzerala väčšia než na pôvodnom webe. Pre
   festivalovú stránku si preto základ držíme sami.
   ========================================================================= */
html:has(body.nox-art-site) {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body.nox-art-site {
  font-size: 16px !important;
  line-height: 1.35;
  font-family: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, sans-serif;
}

/* Písmo stránky: Helvetica (Nimbus Sans ako náhrada). Selektory začínajú .nox-art-site, lebo globálne
   štýly blokových tém (:root :where(h2)) majú vyššiu váhu než holé h1–h3
   a prebíjali by nám písmo. Nadpisy sú v reze Bold s veľmi tesným
   prestrkaním – rovnako ako logo NOX:ART. */
body.nox-art-site,
.nox-art-site p,
.nox-art-site a,
.nox-art-site li,
.nox-art-site span,
.nox-art-site small,
.nox-art-site strong,
.nox-art-site button,
.nox-art-site input,
.nox-art-site label,
.nox-art-site .section-label,
.nox-art-site .filter-chip {
  font-family: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, sans-serif;
}

.nox-art-site h1,
.nox-art-site h2,
.nox-art-site h3,
.nox-art-site .partner-logo-text,
.nox-art-site .tile-caption h3,
.nox-art-site .detail-title {
  font-family: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -.06em;
}

/* Dátum v úvode a nápis v päte majú vlastné, ešte tesnejšie prestrkanie
   (−0,075 em, resp. −0,095 em) – tu im meníme len písmo a hrúbku. */
.nox-art-site .hero-date,
.nox-art-site .footer-wordmark {
  font-family: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, sans-serif;
  font-weight: 700;
}

/* Nadpisy si držia vlastné proporcie aj proti globálnym štýlom témy. */
.nox-art-site .section h2 {
  font-size: clamp(2.65rem, 6.4vw, 7rem);
  line-height: .91;
  text-transform: uppercase;
}

.nox-art-site h3 {
  letter-spacing: -.03em;
}

/* Štýly Mapboxu sa načítavajú až keď sa mapa blíži do zorného poľa, teda
   po našich – a ich .mapboxgl-map { position: relative } by prebilo naše
   absolútne roztiahnutie, takže by mal kontajner mapy výšku 0. Preto
   silnejší selektor. */
.site-map-wrap #nox-site-map,
.site-map-wrap .site-map.mapboxgl-map {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* =========================================================================
   Text na svetlom podklade nie je čisto čierny, ale tmavosivý – ako na
   pôvodnom vizuáli festivalu. Čierna (--ink) ostáva pre tmavé plochy,
   tlačidlá a tmavú sekciu Program.
   ========================================================================= */
.nox-art-site {
  --text: #2d2d2d;
}

body.nox-art-site,
.nox-art-site .hero,
.nox-art-site .about,
.nox-art-site .partners {
  color: var(--text);
}

.nox-art-site .hero :is(h1, h2, h3, p, strong, span, li):not(.button *):not(.hero-scroll *),
.nox-art-site .about :is(h1, h2, h3, p, strong, span, li, a):not(.button *),
.nox-art-site .partners :is(h1, h2, h3, p, strong, span, li),
.nox-art-site .partner-group-title,
.nox-art-site .partner-support {
  color: var(--text);
}

/* Odkazy v hlavičke na svetlom podklade (desktop). */
@media (min-width: 901px) {
  .nox-art-site .main-nav > a:not(.nav-pill) {
    color: var(--text) !important;
  }
}

/* Dátum a miesto v úvode sú hrubšie než Bold. Helvetica ani Nimbus Sans
   ťažší rez nemajú, preto písmená zosilníme obrysom v ich vlastnej farbe –
   zhrubnú rovnomerne a tvar ostane helveticový. */
.nox-art-site .hero-date,
.nox-art-site .hero-location-title {
  -webkit-text-stroke: .045em currentColor;
  paint-order: stroke fill;
}

.nox-art-site .hero-location-title {
  -webkit-text-stroke-width: .035em;
}

/* Obrys písmená rozširuje – o toľko ich odsunieme, nech sa neslievajú
   (vodorovne aj medzi riadkami). */
.nox-art-site .hero-date {
  letter-spacing: -.015em;
  line-height: .94;
  -webkit-text-stroke-width: .035em;
}

.nox-art-site .hero-location-title {
  letter-spacing: .01em;
}

/* Názov NOX:ART v hlavičke – text namiesto obrázka loga. Veľkosť je
   zvolená tak, aby zaberal rovnakú šírku ako pôvodné logo. */
.nox-art-site .brand-nox-text {
  display: block;
  flex: 0 0 auto;
  color: var(--text);
  font-family: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, sans-serif;
  font-size: clamp(2.2rem, 3.1vw, 2.95rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.06em;
  white-space: nowrap;
  -webkit-text-stroke: .02em currentColor;
  paint-order: stroke fill;
}

/* Otvorené menu na mobile má tmavé pozadie – názov sa prefarbí na svetlo. */
.nox-art-site.menu-open .site-header .brand-nox-text {
  color: var(--paper);
}

@media (max-width: 760px) {
  .nox-art-site .brand-nox-text {
    font-size: 1.95rem;
  }
}

/* =========================================================================
   Čierne prvky (tlačidlá, ikony, obrysy, podčiarknutia) majú tú istú
   tmavosivú ako text. Veľké tmavé plochy – sekcia Program, päta, otvorené
   menu na mobile, dlaždice – ostávajú čierne.
   ========================================================================= */
.nox-art-site .nav-pill,
.nox-art-site .button-dark {
  border-color: var(--text);
  background: var(--text);
}

.nox-art-site .button-outline {
  color: var(--text);
  border-color: var(--text);
}

.nox-art-site .button-outline:hover {
  color: var(--paper);
  background: var(--text);
}

.nox-art-site .button-dark:hover {
  color: var(--text);
}

@media (min-width: 901px) {
  .nox-art-site .main-nav > a:not(.nav-pill)::after {
    background: var(--text);
  }

  .nox-art-site .nav-social a {
    color: var(--text);
  }

  .nox-art-site .nav-social a:hover {
    color: var(--cream);
    border-color: var(--text);
    background: var(--text);
  }
}

.nox-art-site .menu-toggle {
  color: var(--text) !important;
}

.nox-art-site.menu-open .menu-toggle {
  color: var(--paper) !important;
}

.nox-art-site .hero-mark {
  background: var(--text);
  box-shadow: 0 0 0 4px var(--text);
}

.nox-art-site .hero-side-note,
.nox-art-site .section-label {
  color: inherit;
}

.nox-art-site .newsletter-panel {
  color: var(--text);
  border-color: var(--text);
}

.nox-art-site .newsletter-panel .newsletter-form {
  border-bottom-color: var(--text);
}

.nox-art-site .newsletter-panel .newsletter-form input {
  color: var(--text);
}

.nox-art-site .newsletter-close {
  color: var(--text) !important;
}

.nox-art-site .newsletter-close:hover {
  color: var(--cream) !important;
  background: var(--text);
}

/* Logo Ars Preuge je čierny obrázok na priehľadnom podklade – jemným
   invertovaním z neho spravíme rovnakú tmavosivú (#2d2d2d). Otvorené menu
   a päta ho majú naďalej svetlé (invert 1). */
.nox-art-site .site-header .brand-ars-logo {
  filter: invert(.176);
}

.nox-art-site.menu-open .site-header .brand-ars-logo {
  filter: invert(1);
}

/* Bežiaci pás v sekcii O festivale: biele, hrubé písmo na čiernom pruhu.
   Pravidlo pre tmavosivý text sekcie O festivale ho nesmie prefarbiť a
   Helvetica Bold dostane rovnaké zosilnenie obrysom ako dátum v úvode. */
.nox-art-site .about .marquee span {
  color: var(--paper);
  font-weight: 700;
  -webkit-text-stroke: .035em currentColor;
  paint-order: stroke fill;
  letter-spacing: -.04em;
}


/* Ikonka hodín pred „Časový harmonogram“ – na mieste, kde majú ostatné
   tlačidlá farebný špendlík, a v aktuálnej farbe textu tlačidla. */
.filter-chip .chip-icon {
  flex: 0 0 auto;
  display: block;
}

/* =========================================================================
   Partneri – prerobené rozloženie. Bez veľkého nadpisu; hore vedľa seba
   organizátor a generálny partner s najväčšími logami, pod nimi partneri
   a mediálni partneri s polovičnými logami, na konci doložky o podpore.
   ========================================================================= */
.nox-art-site .partners {
  padding-bottom: clamp(56px, 7vw, 110px);
}

.nox-art-site .partners .section-label {
  margin-bottom: clamp(28px, 4vw, 56px);
}

.nox-art-site .partner-row-top {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 96px);
  align-items: end;
}

.nox-art-site .partner-row-top .partner-group,
.nox-art-site .partners > .partner-group {
  margin-top: 0;
}

.nox-art-site .partners > .partner-group {
  margin-top: clamp(44px, 5vw, 80px);
}

.nox-art-site .partner-group-title {
  margin: 0 0 18px;
  color: var(--text);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  opacity: .7;
}

.nox-art-site .partner-logos {
  align-items: center;
  gap: clamp(26px, 3.5vw, 52px);
}

/* Najväčšie: organizátor a generálny partner. */
.nox-art-site .partner-row-top .partner-logo {
  --logo-h: clamp(84px, 9vw, 132px);
}

/* Polovičné: partneri a médiá. */
.nox-art-site .partners > .partner-group .partner-logo {
  --logo-h: clamp(40px, 4.4vw, 62px);
}

.nox-art-site .partner-row-top .partner-logo-text {
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
}

.nox-art-site .partners > .partner-group .partner-logo-text {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
}

.nox-art-site .partner-support {
  margin-top: clamp(56px, 6vw, 96px);
}

@media (max-width: 760px) {
  .nox-art-site .partner-row-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

/* Hlavička sekcie Partneri: veľké „Ďakujeme.“ a pod ním veta o tom, komu
   ďakujeme – menšia, ale stále výrazná. Pod tým nasledujú logá. */
.nox-art-site .partners .partners-head {
  display: block;
  margin-bottom: clamp(48px, 6vw, 96px);
}

.nox-art-site .partners .partners-head h2 {
  margin: 0;
  font-size: clamp(3.2rem, 9vw, 9.5rem);
  line-height: 1.05;   /* priestor pre dĺžeň nad Ď */
}

.nox-art-site .partners .partners-lead {
  max-width: 26ch;
  margin: clamp(14px, 1.6vw, 24px) 0 0;
  color: var(--text);
  font-size: clamp(1.4rem, 2.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.035em;
}

/* Čísla v rámčeku O festivale (02, PÍLY, ≈20, ’26) sú hrubé – rovnako ako
   dátum v úvode: Bold zosilnený obrysom, trochu voľnejšie prestrkanie. */
.nox-art-site .festival-facts strong {
  font-weight: 700;
  letter-spacing: -.04em;
  -webkit-text-stroke: .04em currentColor;
  paint-order: stroke fill;
}

/* Rámčeky a linky v O festivale v tej istej tmavosivej ako text. */
.nox-art-site .festival-facts,
.nox-art-site .festival-facts article {
  border-color: var(--text);
}

/* Bežiaci pás ide vyššie a jemne prekrýva spodok rámčeka nad ním. */
.nox-art-site .about .marquee {
  z-index: 2;
  margin-top: clamp(-16px, -1vw, -8px);
}

/* O festivale má o odtieň svetlejší podklad než zvyšok stránky. */
.nox-art-site .about {
  background: var(--cream);
}

/* Opticky rovnako veľké logá: každé logo má rovnakú plochu, nie výšku.
   Výška = základ / √(šírka/výška), takže široké logá sú nižšie
   a štvorcové vyššie. --pomer dopĺňa šablóna z rozmerov obrázka. */
.nox-art-site .partner-logos {
  gap: clamp(36px, 4.5vw, 72px) clamp(48px, 6.5vw, 104px);
}

.nox-art-site .partner-row-top .partner-logo {
  --logo-zaklad: clamp(78px, 8vw, 116px);
}

.nox-art-site .partners > .partner-group .partner-logo {
  --logo-zaklad: clamp(34px, 3.4vw, 46px);
}

.nox-art-site .partner-logo img {
  height: var(--logo-zaklad);
  height: clamp(
    calc(var(--logo-zaklad) * .38),
    calc(var(--logo-zaklad) / sqrt(var(--pomer, 1))),
    calc(var(--logo-zaklad) * 1.15)
  );
  max-width: min(100%, calc(var(--logo-zaklad) * 2.8));
}

.nox-art-site .partner-logos .partner-logo {
  width: auto;
}

/* Generálny partner tesne vedľa organizátora; nadpisy oboch skupín v jednej línii. */
.nox-art-site .partner-row-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(36px, 4.5vw, 72px) clamp(72px, 9vw, 150px);
}

.nox-art-site .partner-row-top .partner-logos {
  min-height: calc(var(--logo-zaklad, 110px) * 1.15);
  align-items: center;
}

.nox-art-site .partner-row-top .partner-group:first-child .partner-logo {
  --logo-zaklad: clamp(78px, 8vw, 116px);
}

/* WordPress dáva fotke atribút height – bez height:auto by sa pri zúžení
   na šírku stĺpca natiahla do výšky. */
.nox-art-site .detail-foto {
  height: auto !important;
  max-width: 100%;
  object-fit: contain;
}

/* Autori – pohľad sekcie Program a diela. */
.nox-art-site .authors-list {
  display: grid;
  gap: clamp(22px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nox-art-site .author {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
  padding-bottom: clamp(20px, 2.6vw, 34px);
  border-bottom: 1px solid rgba(239, 238, 220, .16);
}

.nox-art-site .author:not(:has(.author-foto)) {
  grid-template-columns: minmax(0, 1fr);
}

.nox-art-site .author-foto {
  width: clamp(84px, 9vw, 120px);
  height: clamp(84px, 9vw, 120px);
  border-radius: 50%;
  object-fit: cover;
}

.nox-art-site .author-name {
  margin: 0 0 8px;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
}

.nox-art-site .author-bio {
  max-width: 62ch;
  color: rgba(239, 238, 220, .72);
  font-size: .95rem;
  line-height: 1.6;
}

.nox-art-site .author-works {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.nox-art-site .author-work {
  padding: 7px 14px;
  border: 1px solid rgba(239, 238, 220, .3);
  border-radius: 999px;
  background: transparent;
  color: var(--paper);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.nox-art-site .author-work:hover {
  background: var(--paper);
  color: var(--ink);
}

/* Dlaždice autorov: kliknuteľné, bez čísla ani odkazu na mapu. */
.nox-art-site .author-tile {
  cursor: pointer;
}

.nox-art-site .author-tile:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}

.nox-art-site .detail .author-works {
  margin-top: 22px;
}

/* Ikony pohľadov majú farbu ako značky kategórií: autori zelená,
   časový harmonogram tyrkysová. */
.nox-art-site .filter-chip[data-view="autori"] .chip-icon {
  color: #2fc77a;
}

.nox-art-site .filter-chip[data-view="harmonogram"] .chip-icon {
  color: #19c3d6;
}

/* Filtre sa len zobrazia (bez "vyjazdenia"): posunutý pruh by pri zarovnaní
   stránky pod hlavičku ešte ~pol sekundy sedel o desiatky pixelov nižšie. */
.nox-art-site .filter-bar.reveal,
.nox-art-site .filter-bar.reveal.is-visible {
  transform: none;
}

/* Posúvaný je celý dokument (html), nie <body> – vlastnosť overflow-anchor
   sa pritom nededí a na body sa pre posúvaný dokument neuplatní. Bez toho
   si prehliadač pri každej zmene výšky zoznamu (prepnutie záložky, načítanie
   obrázkov) sám dorovnáva polohu a bojuje s našim zarovnaním pod hlavičku. */
html,
html:has(body.nox-art-site) {
  overflow-anchor: none;
}

/* Hlavička je plnofarebná (aj úplne hore). Safari na macOS podľa fixného
   prvku pri hornom okraji tónuje svoj panel s adresou a kariet: pri
   priesvitnej hlavičke cez ňu videl rozmazaný obsah stránky, pri plnej
   farbe použije jej farbu. */
.nox-art-site .site-header,
.nox-art-site .site-header.is-scrolled {
  background: #efeedc !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Mobil: hlavička už nepresahuje nad okraj okna. Presah (-80 px) iOS Safari
   orezal po okraj okna a nepomohol, no hlavička tým prestala ležať rovno na
   hornom okraji – Safari 26 podľa takéhoto prvku tónuje stavový riadok.
   Teraz je hlavička priamo na hornom okraji (top: 0) a plnofarebná; výplň
   pre výrez/stavový riadok dopĺňa env(safe-area-inset-top). */
@media (max-width: 900px) {
  .nox-art-site .site-header {
    --hlavicka-presah: 0px;
  }
}

/* Počet diel stojí hneď za názvom, miesto vpravo. */
.nox-art-site .schedule-count {
  margin-left: 6px;
  color: rgba(239, 238, 220, .6);
  font-size: .86rem;
  font-weight: 400;
  white-space: nowrap;
}

/* Lišta so súhlasom s meraním (zobrazí sa len pri zadanom ID merania). */
.nox-art-site .consent {
  position: fixed;
  z-index: 960;
  left: clamp(12px, 2vw, 24px);
  bottom: calc(clamp(12px, 2vw, 24px) + env(safe-area-inset-bottom, 0px));
  width: min(360px, calc(100vw - 24px));
  padding: 18px 20px 16px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 24px;
  background: rgba(247, 245, 232, .96);
  box-shadow: 0 18px 50px rgba(45, 45, 45, .28);
  color: #2d2d2d;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.nox-art-site .consent[hidden] {
  display: none;
}

.nox-art-site .consent-title {
  margin: 0 0 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.nox-art-site .consent-text {
  margin: 0 0 14px;
  font-size: .88rem;
  line-height: 1.5;
}

.nox-art-site .consent-actions {
  display: flex;
  gap: 8px;
}

.nox-art-site .consent-btn {
  flex: 1;
  min-height: 42px;
  border: 1.5px solid #2d2d2d;
  border-radius: 999px;
  background: transparent;
  color: #2d2d2d;
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
}

.nox-art-site .consent-btn-main {
  background: #2d2d2d;
  color: #f7f5e8;
}

/* Pole newslettera: pasca pre roboty (neviditeľná) a súhlas. */
.nox-art-site .newsletter-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.nox-art-site .newsletter-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  grid-column: 1 / -1;
  margin-top: 6px;
  font-size: .8rem;
  line-height: 1.45;
  cursor: pointer;
}

.nox-art-site .newsletter-consent input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  padding: 0;
}