@charset "UTF-8";
/** Reset default styles and load bootstrap breakpoint variables/mixins.
    Only the pieces we actually use (breakpoint mixins) are pulled in —
    the full grid/utility classes from bootstrap-grid are not used anywhere
    in this project's hand-written BEM/flex/grid CSS. */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
img {
  display: block;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

button,
input[type=submit],
input[type=reset] {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

/* stylelint-disable */
/* stylelint-disable */
/** Design tokens */
/** Design tokens — Figma "Strona_KSFF", node 245:230.

    UWAGA o skali: frame w Figmie ma 1145px szerokości i jest podglądem
    projektu zbudowanego na 1440px (1145/1440 = 79,51%). Każda wartość
    poniżej to wartość odczytana z Figmy przemnożona przez 1440/1145
    = 1,2576 i zaokrąglona do pełnego piksela — dlatego np. H1 raportowany
    przez Figmę jako 81,2px to tutaj 102px. Odczytując nowe wartości
    z tego samego frame'u trzeba zastosować ten sam mnożnik. */
/** Self-hosted fonts (podzbiory z Google Fonts, format woff2):
    - Barlow Condensed — nagłówki, nawigacja, etykiety
    - Barlow           — tekst ciągły
    - Orbitron         — licznik i duże liczby

    Każdy krój jest wczytywany w dwóch podzbiorach: `latin` i `latin-ext`.
    Polskie znaki diakrytyczne (ą ć ę ł ń ś ź ż) leżą w `latin-ext`
    (U+0100-02BA), więc oba podzbiory są wymagane — poza Orbitronem,
    który w Google Fonts nie ma wariantu latin-ext. Orbitron jest w projekcie
    używany wyłącznie do cyfr, więc nie stanowi to problemu; gdyby trafił
    kiedyś na polski tekst, znaki spadną na Barlow Condensed z $font-numeric. */
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-900-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-900-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-600-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-600-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Orbitron";
  src: url("../fonts/orbitron-900-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/** UWAGA o breakpointach. `media-breakpoint-down(X)` z bootstrapa 4 znaczy
    "do początku NASTĘPNEGO breakpointu", a $grid-breakpoints w tym motywie
    to (xs: 0, md: 768, lg: 992, xl: 1200, xxl: 1600, xxxl: 1800) — bez `sm`
    i z przesuniętym `xxl`. Realne górne granice są więc takie:

        down(md)   -> max-width  991.98px
        down(lg)   -> max-width 1199.98px
        down(xl)   -> max-width 1599.98px
        down(xxl)  -> max-width 1799.98px

    Czyli `down(xl)` łapie także projektowe 1440px i nadpisuje styl desktopowy.
    Do zawężania widoku desktopowego używamy `down(lg)` i `down(md)`. */
/** Nagłówki — Barlow Condensed Black. Figma raportuje dla nich leading
    "auto", więc line-height 1 odwzorowuje projekt 1:1.

    Rozmiary skalują się płynnie przez clamp() zamiast skokowo w
    breakpointach: projekt nie zawiera osobnych ramek mobilnych, więc
    interpolacja po szerokości viewportu jest wierniejsza niż wymyślanie
    własnych wartości na małe ekrany. Środkowy człon to rozmiar docelowy
    wyrażony jako procent szerokości viewportu ($size / 1440 * 100), czyli
    przy 1440px font ma dokładnie rozmiar z projektu. */
/** Etykiety — Barlow Condensed Bold, uppercase, mocno rozstrzelone.
    Warianty różnią się tylko skalą; letter-spacing jest w px zgodnie
    z tym, co raportuje Figma. */
/** Nagłówek sekcji w formie "/ nazwa" — powtarza się w każdej sekcji
    projektu (np. "/ na kulturalnej mapie polski", "/ repertuar"). */
/** Główne CTA. W projekcie pod przyciskiem leży rozmyta kopia jego tła
    (blur 24px → 30px, krycie 60%, szersza o 22px), dająca efekt poświaty.
    Odwzorowana box-shadow, nie pseudoelementem z filter: blur() —
    pseudoelement z `z-index: -1` uciekałby za tło sekcji, bo `.section`
    ma `position: relative` bez własnego kontekstu układania, i poświata
    w ogóle nie byłaby widoczna. */
/** Import theme styles */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}
@media (max-width: 1199.98px) {
  html {
    scroll-padding-top: 64px;
  }
}

/** Strona przeplata sekcje ciemne i jasne (projekt: hero ciemny → "O festiwalu"
    biały → "Miejsce" #111 → "Dla kogo" #0a0a0a → "Program" biały → "Bilety"
    #0a0a0a → "Partnerzy" biały → stopka #0a0a0a). Bazą jest ciemne tło, bo
    taki jest pierwszy ekran; każda sekcja deklaruje swoje tło samodzielnie. */
body {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.6;
  color: #f5f5f0;
  background-color: #0a0a0a;
  -webkit-font-smoothing: antialiased;
}

.page-wrapper {
  position: relative;
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

svg {
  display: block;
}

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

button {
  font-family: inherit;
  color: inherit;
}

.container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 80px;
}
@media (max-width: 1199.98px) {
  .container {
    padding-inline: 40px;
  }
}
@media (max-width: 991.98px) {
  .container {
    padding-inline: 20px;
  }
}

/** Wspólny rytm pionowy sekcji. Wartości z projektu: odstępy między
    sekcjami wahają się od 96px do 128px (po przeskalowaniu ×1,2576),
    więc 120px to wartość reprezentatywna, a sekcje o innym rytmie
    nadpisują ją u siebie. */
.section {
  position: relative;
  padding-block: 120px;
}
@media (max-width: 1199.98px) {
  .section {
    padding-block: 80px;
  }
}
@media (max-width: 991.98px) {
  .section {
    padding-block: 56px;
  }
}
.section--light {
  color: #0a0a0a;
  background-color: #ffffff;
}
.section--dark {
  color: #f5f5f0;
  background-color: #0a0a0a;
}
.section--dark-soft {
  color: #f5f5f0;
  background-color: #111111;
}

.section__eyebrow {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.53;
  letter-spacing: 4.53px;
  text-transform: uppercase;
  display: block;
  color: #e8192c;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 30px 50px;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 3.47vw, 50px);
  line-height: 1.5;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #f5f5f0;
  background-color: #e8192c;
  border: 0;
  cursor: pointer;
  box-shadow: 0 0 34px 6px rgba(232, 25, 44, 0.55);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 44px 10px rgba(232, 25, 44, 0.7);
}
.btn .icon {
  display: flex;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}
.btn .icon svg {
  width: 100%;
  height: 100%;
}
@media (max-width: 449.98px) {
  .btn {
    width: 100%;
    padding: 20px 25px;
  }
}

/** Animacje wejścia.

    Elementy oznaczone `data-animate` startują lekko przesunięte i
    przezroczyste, a klasę `is-visible` nadaje im IntersectionObserver
    z main.js, gdy wjadą w widok.

    Trzy zabezpieczenia:

    1. Stan początkowy obowiązuje wyłącznie pod `.has-js` — klasa jest
       nadawana inline w <head>, i tylko gdy przeglądarka zna
       IntersectionObserver. Bez JS-a treść jest po prostu widoczna.
    2. Skrypt w <head> zdejmuje `.has-js` po 2,5 s, jeśli main.js się nie
       wczytał — treść nie zostanie uwięziona w stanie niewidocznym.
    3. Cała mechanika jest zamknięta w `prefers-reduced-motion:
       no-preference`, więc przy wyłączonych animacjach systemowych
       elementy są od razu widoczne, bez żadnych przejść. */
@media (prefers-reduced-motion: no-preference) {
  .has-js [data-animate] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--animate-delay, 0ms);
  }
  .has-js [data-animate=left] {
    transform: translateX(-32px);
  }
  .has-js [data-animate=right] {
    transform: translateX(32px);
  }
  .has-js [data-animate=zoom] {
    transform: scale(0.94);
  }
  .has-js [data-animate].is-visible {
    opacity: 1;
    transform: none;
  }
}
/** Mikrointerakcje — subtelne, żeby nie odciągały od treści. */
.dla-kogo__card {
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.dla-kogo__card-photo {
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .dla-kogo__card:hover {
    transform: translateY(-6px);
  }
  .dla-kogo__card:hover .dla-kogo__card-photo {
    transform: scale(1.06);
  }
}

.harmonogram__item {
  transition: background-color 0.25s ease;
}
@media (hover: hover) {
  .harmonogram__item:hover {
    background-color: rgba(245, 245, 240, 0.04);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .o-festiwalu__feature:hover .o-festiwalu__feature-icon {
    transform: scale(1.08);
  }
}

.o-festiwalu__feature-icon {
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/** Nagłówek. W projekcie (node 245:414) leży bez własnego tła na ciemnym
    hero — jest więc przezroczysty na samej górze strony. Projekt nie
    określa zachowania przy przewijaniu, a strona przeplata sekcje jasne
    i ciemne, więc po odjechaniu od góry nagłówek dostaje ciemne tło
    (klasa `is-scrolled` nadawana z main.js) — bez tego linki znikałyby
    na białych sekcjach.

    Nagłówek ma własny, szerszy margines niż treść sekcji: projekt daje mu
    48px przy 64px dla sekcji (po przeskalowaniu 60px vs 80px). */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
  /** Podkreślenie linku: w projekcie to pasek 2px w kolorze $red o
      szerokości 0, czyli wskaźnik rozwijany dopiero w interakcji. */
  /** Przy desktopie backdrop musi być wyłączony, a nie tylko niewidoczny:
      jako trzecie dziecko flexa z `justify-content: space-between` zabierał
      jedną „szczelinę" i menu kończyło się 183px przed prawą krawędzią
      (1197px zamiast 1380px), mimo zerowej szerokości. */
}
.header.is-scrolled {
  background-color: rgba(10, 10, 10, 0.92);
  border-bottom-color: rgba(245, 245, 240, 0.15);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: 1440px;
  min-height: 120px;
  margin-inline: auto;
  padding: 20px 60px;
}
@media (max-width: 1199.98px) {
  .header__inner {
    min-height: 64px;
    padding: 8px 40px;
  }
}
@media (max-width: 991.98px) {
  .header__inner {
    padding: 8px 20px;
  }
}
.header__logo {
  display: block;
  flex-shrink: 0;
}
.header__logo img {
  display: block;
  width: 240px;
  height: auto;
}
@media (max-width: 1199.98px) {
  .header__logo img {
    width: 160px;
  }
}
@media (max-width: 991.98px) {
  .header__logo img {
    width: 170px;
  }
}
.header__nav {
  display: flex;
  align-items: center;
  gap: 40px;
}
@media (max-width: 1199.98px) {
  .header__nav {
    position: fixed;
    top: 64px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    padding: 32px 40px;
    overflow-y: auto;
    background-color: #0a0a0a;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0.3s ease;
  }
  .header.is-open .header__nav {
    transform: translateX(0);
    visibility: visible;
  }
}
@media (max-width: 991.98px) {
  .header__nav {
    padding: 24px 20px;
  }
}
.header__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.53;
  letter-spacing: 2.29px;
  text-transform: uppercase;
  color: #f5f5f0;
  transition: color 0.2s ease;
}
@media (max-width: 1199.98px) {
  .header__link {
    align-items: flex-start;
    width: 100%;
    padding-block: 12px;
    font-size: 24px;
  }
}
.header__link-text {
  position: relative;
  display: block;
  padding-bottom: 8px;
}
.header__link-text::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #e8192c;
  transition: width 0.25s ease;
}
.header__link:hover, .header__link:focus-visible {
  color: #f5f5f0;
}
.header__link:hover .header__link-text::after, .header__link:focus-visible .header__link-text::after {
  width: 100%;
}
.header__burger {
  display: none;
  padding: 8px;
  background: none;
  border: 0;
  cursor: pointer;
  color: #f5f5f0;
}
@media (max-width: 1199.98px) {
  .header__burger {
    display: block;
    position: relative;
    z-index: 101;
  }
}
.header__burger svg {
  width: 32px;
  height: 32px;
}
.header__burger-icon {
  display: block;
}
.header__burger-icon--close {
  display: none;
}
.header.is-open .header__burger-icon--open {
  display: none;
}
.header.is-open .header__burger-icon--close {
  display: block;
}
.header__backdrop {
  display: none;
}
@media (max-width: 1199.98px) {
  .header__backdrop {
    display: block;
    position: fixed;
    inset: 64px 0 0 0;
    z-index: 98;
    background-color: rgba(10, 10, 10, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .header.is-open .header__backdrop {
    opacity: 1;
    visibility: visible;
  }
}

/** Hero — Figma node 245:232 / 245:237.

    W projekcie treść jest przyklejona do dołu ramki (flex justify-end
    + padding-bottom 96px → 121px), a ilustracja leży absolutnie po prawej
    i wychodzi ponad górną krawędź (top -60px → -75px). Nagłówek strony
    jest przezroczysty i nakłada się na tę sekcję, dlatego hero rezerwuje
    na niego miejsce górnym paddingiem. */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 820px;
  padding-block: 80px 64px;
  overflow: hidden;
  background-color: #0a0a0a;
  /** Tytuł: cztery wiersze Orbitron Black, każdy w osobnym <span>.
      Figma podaje font-size 81,2px i leading 71,456px, czyli
      line-height 0,88 — wiersze zachodzą na siebie ciaśniej niż
      wysokość glifów. */
  /** Licznik. Każda komórka ma jasne, półprzezroczyste tło i czerwoną
      kreskę na górze. Dwukropki między komórkami są dekoracyjne, więc
      powstają z ::after zamiast osobnych elementów w markupie. */
  /** Ilustracja. W projekcie leży absolutnie względem kontenera treści:
      left 386px, szerokość 737px, przycinana przez object-cover. Licząc
      od krawędzi ramki to 64 + 386 = 450px, czyli po przeskalowaniu
      566px z 1440px szerokości (39,3%), przy szerokości 927px (64,4%).
      Suma przekracza 1440px, więc grafika wychodzi za prawą krawędź
      i jest ucinana — dokładnie jak w projekcie.

      Wartości są w procentach, nie w pikselach z breakpointami: progi
      bootstrapa w tym motywie są przesunięte ($grid-breakpoints ma
      xxl: 1600px), więc sztywne kroki rozjeżdżały się na 1440px.
      Proporcje trzymają projekt na każdej szerokości. */
  /** Ilustracja jest celowo wyższa niż sekcja i zaczepiona u góry, więc
      jej dolna część wychodzi poza dolną krawędź hero i zostaje przycięta
      przez `overflow: hidden` — kadr domyka się dołem sekcji.
      68% szerokości to kompromis: więcej niż projektowe 64,4%, ale bez
      agresywnego ucinania, jakie dawało 76%. */
}
@media (max-width: 1199.98px) {
  .hero {
    min-height: 0;
    padding-block: 24px 56px;
  }
}
.hero__inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 80px;
  /** Poniżej lg ilustracja przestaje być pozycjonowana absolutnie
      i wchodzi w normalny przepływ. Kontener staje się kolumną flex,
      żeby dało się ją wyświetlić nad treścią (`order`) bez zmiany
      kolejności w HTML — nagłówek <h1> ma pozostać pierwszy
      w dokumencie dla czytników ekranu i indeksowania. */
}
@media (max-width: 1199.98px) {
  .hero__inner {
    display: flex;
    flex-direction: column;
    padding-inline: 40px;
  }
}
@media (max-width: 991.98px) {
  .hero__inner {
    padding-inline: 20px;
  }
}
.hero__content {
  position: relative;
  z-index: 2;
  max-width: 1288px;
}
.hero__eyebrow {
  margin: 0;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #f5f5f0;
}
@media (max-width: 991.98px) {
  .hero__eyebrow {
    font-size: 15px;
    letter-spacing: 3px;
  }
}
.hero__title {
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  font-family: "Orbitron", "Barlow Condensed", sans-serif;
  font-weight: 900;
  font-size: clamp(44px, 7.08vw, 102px);
  line-height: 0.88;
  text-transform: uppercase;
  color: #f5f5f0;
}
.hero__title-line--accent {
  color: #e8192c;
}
.hero__lead {
  margin: 15px 0 0;
  max-width: 724px;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(20px, 2.08vw, 30px);
  line-height: 1.5;
  letter-spacing: 0.6px;
  color: rgba(245, 245, 240, 0.85);
}
.hero__countdown {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin-top: 50px;
}
@media (max-width: 991.98px) {
  .hero__countdown {
    gap: 2px;
  }
}
.hero__countdown-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 88px;
  padding: 17px 20px 15px;
  background-color: rgba(255, 255, 255, 0.06);
  border-top: 2px solid #e8192c;
}
@media (max-width: 991.98px) {
  .hero__countdown-cell {
    min-width: 0;
    flex: 1;
    padding: 12px 8px 10px;
  }
}
.hero__countdown-cell:not(:last-child)::after {
  content: ":";
  position: absolute;
  top: 50%;
  right: -4px;
  transform: translate(50%, -50%);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 900;
  font-size: 36px;
  line-height: 1;
  color: #e8192c;
}
@media (max-width: 991.98px) {
  .hero__countdown-cell:not(:last-child)::after {
    display: none;
  }
}
.hero__countdown-value {
  font-family: "Orbitron", "Barlow Condensed", sans-serif;
  font-weight: 900;
  font-size: 64px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  color: #e8192c;
}
@media (max-width: 991.98px) {
  .hero__countdown-value {
    font-size: 34px;
  }
}
.hero__countdown-label {
  margin-top: 5px;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 2.21px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.hero__art {
  position: absolute;
  bottom: -295px;
  left: 38%;
  z-index: 1;
  width: 68%;
  aspect-ratio: 1/1;
  height: auto;
  max-width: none;
  -o-object-fit: cover;
  object-fit: cover;
  pointer-events: none;
}
@media (max-width: 1199.98px) {
  .hero__art {
    position: relative;
    bottom: auto;
    left: auto;
    display: block;
    order: -1;
    width: 100%;
    max-width: 100%;
    aspect-ratio: auto;
    margin-top: 0;
    margin-bottom: 32px;
    opacity: 1;
  }
}

/** "O festiwalu" — Figma node 245:284.

    Sekcja jasna (bg-white). W projekcie treść leży w dwóch absolutnie
    pozycjonowanych kolumnach po 476,4px z przerwą 64px (po przeskalowaniu
    599px + 81px), co w sumie daje 1279px — czyli dokładnie szerokość
    kontenera treści. Odtworzone gridem, bo daje to ten sam podział bez
    pozycjonowania absolutnego i samo radzi sobie z dłuższą treścią z CMS-a.

    Projekt ma tu odstępy 106px / 181px (84px i 144px przed przeskalowaniem),
    ale 181px odstawało od pozostałych sekcji, więc sekcja jedzie wspólnym
    rytmem strony z `.section` (120 / 80 / 56). */
.o-festiwalu {
  padding-block: 120px;
  /** Nagłówek: Orbitron Black 69,6px → 88px, leading 62,64px → 79px,
      czyli line-height 0,9. */
  /** Akapity z linią akcentu. Pierwszy ma cienką niebieską kreskę
      (1,6px → 2px), trzeci grubszą czerwoną (4px → 5px) i dodatkowe
      wypełnienie — w projekcie jest to wyodrębniony blok. */
}
@media (max-width: 1199.98px) {
  .o-festiwalu {
    padding-block: 80px;
  }
}
@media (max-width: 991.98px) {
  .o-festiwalu {
    padding-block: 56px;
  }
}
.o-festiwalu__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 81px;
}
@media (max-width: 1199.98px) {
  .o-festiwalu__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}
.o-festiwalu__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: "Orbitron", "Barlow Condensed", sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 6.11vw, 88px);
  line-height: 0.9;
  text-transform: uppercase;
  color: #0a0a0a;
}
.o-festiwalu__eyebrow {
  margin: 8px 0 0;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 4.83px;
  text-transform: uppercase;
  color: #4db8e8;
}
.o-festiwalu__features {
  margin: 50px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.o-festiwalu__feature {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.o-festiwalu__feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background-color: #e8192c;
  color: #f5f5f0;
}
.o-festiwalu__feature-icon svg {
  width: 23px;
  height: 23px;
}
.o-festiwalu__feature-text {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.6;
  color: #0a0a0a;
}
.o-festiwalu__body {
  display: flex;
  flex-direction: column;
  gap: 23px;
}
.o-festiwalu__quote {
  margin: 0;
}
.o-festiwalu__quote p {
  margin: 0;
}
.o-festiwalu__quote p + p {
  margin-top: 1em;
}
.o-festiwalu__quote--blue {
  padding-left: 32px;
  border-left: 2px solid #4db8e8;
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.77;
  color: #0a0a0a;
}
.o-festiwalu__quote--red {
  padding: 30px 30px 30px 35px;
  border-left: 5px solid #e8192c;
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.76;
  color: #0a0a0a;
}
.o-festiwalu__text {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.76;
  color: #0a0a0a;
}
.o-festiwalu__text p {
  margin: 0;
}
.o-festiwalu__text p + p {
  margin-top: 1em;
}
.o-festiwalu__accent {
  font-weight: 600;
  color: #4db8e8;
}

/** "Miejsce" — Figma node 245:435.

    Tło sekcji to #111 (nieco jaśniejsza czerń niż w pozostałych ciemnych
    sekcjach — tak jest w projekcie). Zdjęcie obiektu ma 638px wysokości
    (→ 802px), przykryte gradientem od rgba(10,10,10,.9) po lewej do
    rgba(10,10,10,.1) po prawej, żeby nagłówek był czytelny.

    Kolumny pod zdjęciem są w projekcie przesunięte o -25px (→ -31px)
    w górę, czyli nachodzą na dolną krawędź zdjęcia. */
/** Sekcja nie ma paddingu górnego — zdjęcie ma dochodzić do krawędzi,
    a poprzednia sekcja domyka rytm swoim paddingiem dolnym. Dolny padding
    idzie wspólną skalą strony. */
.miejsce {
  padding-bottom: 120px;
  /** Nagłówek: dwa pierwsze wiersze Orbitron Black 104,4px → 131px
      (leading 93,96 → 118px, czyli 0,9), trzeci o połowę mniejszy —
      52,2px → 66px. */
  /** Kolumny: w projekcie szerokości 382px i 512px (→ 480px i 644px)
      z przerwą 72px, wciągnięte o 31px na zdjęcie. */
}
@media (max-width: 1199.98px) {
  .miejsce {
    padding-bottom: 80px;
  }
}
@media (max-width: 991.98px) {
  .miejsce {
    padding-bottom: 56px;
  }
}
.miejsce__media {
  position: relative;
  height: 802px;
  overflow: hidden;
}
@media (max-width: 1199.98px) {
  .miejsce__media {
    height: 560px;
  }
}
@media (max-width: 991.98px) {
  .miejsce__media {
    height: 420px;
  }
}
.miejsce__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 50% 50%;
  object-position: 50% 50%;
}
.miejsce__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.5) 50%, rgba(10, 10, 10, 0.1) 100%);
}
.miejsce__media-inner {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 100%;
  padding-bottom: 80px;
}
@media (max-width: 991.98px) {
  .miejsce__media-inner {
    padding-bottom: 40px;
  }
}
.miejsce__eyebrow {
  margin: 0;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 4.83px;
  text-transform: uppercase;
  color: #4db8e8;
}
.miejsce__title {
  margin: 15px 0 0;
  display: flex;
  flex-direction: column;
  font-family: "Orbitron", "Barlow Condensed", sans-serif;
  font-weight: 900;
  font-size: clamp(44px, 9.1vw, 131px);
  line-height: 0.9;
  letter-spacing: -1.31px;
  text-transform: uppercase;
  color: #f5f5f0;
}
.miejsce__title-line--accent {
  color: #e8192c;
}
.miejsce__title-line--small {
  font-size: clamp(24px, 4.58vw, 64px);
  line-height: 1.14;
}
.miejsce__columns {
  position: relative;
  display: grid;
  grid-template-columns: 480fr 644fr;
  gap: 72px;
  margin-top: -31px;
}
@media (max-width: 1199.98px) {
  .miejsce__columns {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 40px;
  }
}
.miejsce__column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.miejsce__column-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  background-color: #e8192c;
  color: #f5f5f0;
}
.miejsce__column-icon svg {
  width: 28px;
  height: 28px;
}
.miejsce__column-heading {
  margin: 0;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: 28px;
  line-height: 1.5;
  letter-spacing: 0.85px;
  text-transform: uppercase;
  color: #f5f5f0;
}
.miejsce__column-text {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.71;
  color: rgba(245, 245, 240, 0.7);
}
.miejsce__column-text p {
  margin: 0;
}
.miejsce__column-text p + p {
  margin-top: 1.35em;
}

/** "Dla kogo" — Figma node 245:463.

    Karty mają w projekcie 338,925px szerokości i leżą na pozycjach
    0 / 338,93 / 677,86 — czyli stykają się bez odstępu i razem wypełniają
    dokładnie 1017px szerokości treści (→ 1279px). Dlatego grid bez gapa. */
.dla-kogo {
  /** Karta: 480px wysokości → 604px, zdjęcie w tle, pasek 4px → 5px
      u góry. Kolor paska bierze się z pola ACF, bo w projekcie środkowa
      karta jest niebieska, a skrajne czerwone.

      Grid z pierwszym wierszem o stałej wysokości, nie flex z justify-end:
      w projekcie nagłówki wszystkich trzech kart są wyrównane do siebie
      (326px od górnej krawędzi karty), a teksty o różnej długości schodzą
      w dół. Dociąganie treści do dołu rozjeżdżałoby nagłówki. */
  /** Liczba porządkowa: Orbitron Black 128px → 161px w kolorze
      rgba(255,255,255,.08). W projekcie ma leading 64px (połowę rozmiaru),
      więc glify wychodzą poza swój wiersz i są przycinane górną krawędzią
      karty — stąd pozycjonowanie absolutne i overflow: hidden na karcie. */
}
.dla-kogo__eyebrow {
  margin: 0;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 4.83px;
  text-transform: uppercase;
  color: #4db8e8;
}
.dla-kogo__title {
  margin: 12px 0 0;
  font-family: "Orbitron", "Barlow Condensed", sans-serif;
  font-weight: 900;
  font-size: clamp(34px, 5.21vw, 75px);
  line-height: 1.05;
  text-transform: uppercase;
  color: #f5f5f0;
}
.dla-kogo__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 1199.98px) {
  .dla-kogo__cards {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
.dla-kogo__card {
  position: relative;
  display: grid;
  grid-template-rows: 326px auto;
  align-content: start;
  min-height: 604px;
  padding: 40px;
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 991.98px) {
  .dla-kogo__card {
    grid-template-rows: 220px auto;
    min-height: 440px;
    padding: 28px;
  }
}
.dla-kogo__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 5px;
}
.dla-kogo__card--red::before {
  background-color: #e8192c;
}
.dla-kogo__card--blue::before {
  background-color: #4db8e8;
}
.dla-kogo__card-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.dla-kogo__card-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.95) 30%, rgba(10, 10, 10, 0.4) 100%);
}
.dla-kogo__card-number {
  position: absolute;
  top: 24px;
  left: 40px;
  z-index: 2;
  font-family: "Orbitron", "Barlow Condensed", sans-serif;
  font-weight: 900;
  font-size: 161px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  line-height: 0.8;
  color: rgba(255, 255, 255, 0.08);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
@media (max-width: 991.98px) {
  .dla-kogo__card-number {
    top: 16px;
    left: 28px;
    font-size: 112px;
  }
}
.dla-kogo__card-body {
  position: relative;
  z-index: 2;
  grid-row: 2;
  align-self: start;
}
.dla-kogo__card-heading {
  margin: 0;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 3.06vw, 44px);
  line-height: 1;
  text-transform: uppercase;
  color: #f5f5f0;
}
.dla-kogo__card-text {
  margin: 16px 0 0;
  max-width: 346px;
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.67;
  line-height: 1.67;
  color: rgba(245, 245, 240, 0.75);
}

/** "Program" — Figma node 245:336.

    Repertuar w trzech równych kolumnach z wąską szczeliną. Wiersze mają
    naprzemienne tło, a nagłówek kolumny szare tło i czerwoną kreskę pod
    spodem.

    Uwaga: w projekcie tabela repertuaru leży jako element nałożony na
    ramkę-placeholder i jej lewa krawędź (42px od brzegu) nie pokrywa się
    z marginesem treści pozostałych sekcji (80px). Trzymamy tu wspólny
    kontener motywu — inaczej ta jedna sekcja odstawałaby od reszty
    strony. */
.program {
  /** Wiersz: godzina i dzień w wąskiej kolumnie po lewej, tytuł i nota
      po prawej. Naprzemienne tło jak w projekcie. */
}
.program__eyebrow {
  margin: 0;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 4.83px;
  text-transform: uppercase;
  color: #4db8e8;
}
.program__title {
  margin: 12px 0 0;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 6.11vw, 88px);
  line-height: 1;
  text-transform: uppercase;
  color: #0a0a0a;
}
.program__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 48px;
}
@media (max-width: 1199.98px) {
  .program__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.program__column {
  background-color: #ffffff;
}
.program__column-head {
  padding: 28px 24px 20px;
  background-color: #f5f5f5;
  border-bottom: 2px solid #e8192c;
}
.program__dash {
  display: block;
  width: 34px;
  height: 4px;
  margin-bottom: 16px;
  background-color: #e8192c;
}
.program__column-label {
  margin: 0;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 900;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #0a0a0a;
}
.program__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.program__item {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid #f0f0f0;
}
.program__item:nth-child(even) {
  background-color: #fafafa;
}
.program__item:last-child {
  border-bottom: 0;
}
.program__when {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.program__time {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 900;
  font-size: 17px;
  line-height: 1.2;
  color: #e8192c;
}
.program__day {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  color: rgba(10, 10, 10, 0.45);
}
.program__what {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.program__name {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #0a0a0a;
}
.program__note {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(10, 10, 10, 0.55);
}

/** "Harmonogram" — Figma node 245:520.

    Wartości przeskalowane ×1,2576 (frame 1145px → projekt 1440px):
    nagłówek Orbitron 70px → 88px, zakładki 15,2px → 19px, pasek pod
    zakładkami 2,4px → 3px, wiersz 97,6px → 123px wysokości, godzina
    24px → 30px, tytuł 20px → 25px, opis 13,2px → 17px. */
.harmonogram {
  /** Pasek zakładek: biała linia 3px biegnie pod całą szerokością,
      a aktywna zakładka ma czerwone tło dochodzące do tej linii. */
  /** Wiersz: godzina w stałej kolumnie po lewej, tytuł i opis po prawej,
      cienka jasna linia u dołu. */
}
.harmonogram__eyebrow {
  margin: 0;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 3.52px;
  text-transform: uppercase;
  letter-spacing: 5.07px;
  color: #4db8e8;
}
.harmonogram__title {
  margin: 8px 0 0;
  font-family: "Orbitron", "Barlow Condensed", sans-serif;
  font-weight: 900;
  font-size: clamp(38px, 6.11vw, 88px);
  line-height: 1.1;
  letter-spacing: -3.21px;
  text-transform: uppercase;
  color: #f5f5f0;
}
@media (max-width: 991.98px) {
  .harmonogram__title {
    letter-spacing: -1px;
  }
}
.harmonogram__tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-top: 48px;
  border-bottom: 3px solid #f5f5f0;
}
.harmonogram__tab {
  padding: 18px 35px;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: 19px;
  line-height: 1.53;
  letter-spacing: 1.91px;
  text-transform: uppercase;
  color: #f5f5f0;
  background: none;
  border: 0;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
@media (max-width: 991.98px) {
  .harmonogram__tab {
    padding: 12px 18px;
    font-size: 15px;
    letter-spacing: 1px;
  }
}
.harmonogram__tab:hover {
  background-color: rgba(245, 245, 240, 0.1);
}
.harmonogram__tab.is-active {
  background-color: #e8192c;
  color: #f5f5f0;
}
.harmonogram__panel {
  margin-top: 32px;
}
.harmonogram__panel[hidden] {
  display: none;
}
.harmonogram__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.harmonogram__item {
  display: grid;
  grid-template-columns: 155px 1fr;
  gap: 16px;
  align-items: center;
  min-height: 123px;
  padding: 20px 10px;
  border-bottom: 1px solid rgba(245, 245, 245, 0.25);
}
@media (max-width: 991.98px) {
  .harmonogram__item {
    grid-template-columns: 84px 1fr;
    gap: 12px;
    min-height: 0;
    padding: 18px 0;
  }
}
.harmonogram__time {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 900;
  font-size: 30px;
  line-height: 1.5;
  color: #e8192c;
}
@media (max-width: 991.98px) {
  .harmonogram__time {
    font-size: 22px;
  }
}
.harmonogram__what {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.harmonogram__name {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: 25px;
  line-height: 1.5;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  color: #f5f5f0;
}
@media (max-width: 991.98px) {
  .harmonogram__name {
    font-size: 19px;
  }
}
.harmonogram__desc {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.47;
  color: rgba(245, 245, 245, 0.65);
}
@media (max-width: 991.98px) {
  .harmonogram__desc {
    font-size: 15px;
  }
}
.harmonogram__empty {
  margin: 0;
  padding: 40px 0;
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.6;
  color: rgba(245, 245, 240, 0.4);
}

/** "Bilety" — Figma node 245:343.

    Cała treść wyśrodkowana w kolumnie. Odstępy wewnętrzne odczytane
    z projektu i przeskalowane ×1,2576: nadtytuł → nagłówek 31px,
    nagłówek → lead 60px (w projekcie pb-48), lead → przycisk 41px,
    przycisk → informacja 42px.

    Padding sekcji: projekt daje 143px u góry, ale to odstawało od reszty
    strony, więc obowiązuje wspólny rytm 120 / 80 / 56. */
.bilety {
  padding-block: 120px;
  /** Nagłówek: Orbitron Black 128px → 161px, leading 130px → 163px.
      Na wąskich ekranach schodzi płynnie przez clamp() — przy 1440px
      ma dokładnie 161px. */
  /** Informacja o starcie sprzedaży: półprzezroczyste niebieskie tło
      z cienką ramką (w projekcie 0,8px → 1px). */
}
@media (max-width: 1199.98px) {
  .bilety {
    padding-block: 80px;
  }
}
@media (max-width: 991.98px) {
  .bilety {
    padding-block: 56px;
  }
}
.bilety__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.bilety__eyebrow {
  margin: 0;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 4.83px;
  text-transform: uppercase;
  color: #4db8e8;
}
.bilety__title {
  margin: 31px 0 0;
  display: flex;
  flex-direction: column;
  font-family: "Orbitron", "Barlow Condensed", sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 11.18vw, 161px);
  line-height: 1.016;
  text-transform: uppercase;
  color: #f5f5f0;
}
.bilety__title-line--accent {
  color: #e8192c;
}
.bilety__lead {
  margin: 60px 0 0;
  max-width: 644px;
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.6;
  color: rgba(245, 245, 240, 0.7);
}
.bilety__cta {
  margin-top: 41px;
}
.bilety__cta--inactive {
  cursor: default;
}
.bilety__cta--inactive:hover {
  transform: none;
  box-shadow: 0 0 34px 6px rgba(232, 25, 44, 0.55);
}
.bilety__notice {
  margin: 42px 0 0;
  padding: 16px 31px;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 4.83px;
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 3.02px;
  color: #4db8e8;
  background-color: rgba(77, 184, 232, 0.1);
  border: 1px solid rgba(77, 184, 232, 0.3);
}
@media (max-width: 991.98px) {
  .bilety__notice {
    padding: 12px 20px;
    font-size: 15px;
    letter-spacing: 2px;
  }
}

/** "Partnerzy" — Figma node 245:370.

    Sekcja jasna, treść wyśrodkowana w kolumnie o szerokości 896px → 1127px.
    Logotypy leżą w projekcie jako absolutnie pozycjonowane bitmapy o
    różnych wymiarach; tutaj są flexowym, zawijanym rzędem wyrównanym do
    środka — daje ten sam efekt wizualny, ale znosi dowolną liczbę
    logotypów dodanych z panelu. */
.partnerzy {
  padding-block: 120px;
  /** Rząd logotypów zawija się naturalnie. Ograniczenie szerokości do
      820px odtwarza podział z projektu (Partnerzy 3+3), a jednocześnie
      znosi dowolną liczbę logotypów — przy większej liczbie mniejszych
      plików w rzędzie zmieści się ich po prostu więcej. */
  /** Logotypy mają bardzo różne proporcje (od 377×134 do 3551×4008),
      więc zamiast stałej szerokości ograniczamy wysokość — wszystkie
      wyglądają wtedy na optycznie podobnej wielkości niezależnie od
      tego, czy są poziome, czy pionowe. */
  /** Grupa z dużą liczbą logotypów (patroni medialni) — w projekcie są
      mniejsze i układają się po cztery w rzędzie, nie po trzy. */
}
@media (max-width: 1199.98px) {
  .partnerzy {
    padding-block: 80px;
  }
}
@media (max-width: 991.98px) {
  .partnerzy {
    padding-block: 56px;
  }
}
.partnerzy__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1127px;
  text-align: center;
}
.partnerzy__eyebrow {
  margin: 0;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 4.83px;
  text-transform: uppercase;
  color: #e8192c;
}
.partnerzy__title {
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 900;
  font-size: clamp(34px, 5.07vw, 73px);
  line-height: 1;
  text-transform: uppercase;
  color: #0a0a0a;
}
.partnerzy__title-line--accent {
  color: #e8192c;
}
.partnerzy__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 56px;
}
.partnerzy__divider {
  display: block;
  width: 80px;
  height: 1px;
  margin-bottom: 56px;
  background-color: #0a0a0a;
}
.partnerzy__group-label {
  margin: 0;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.53;
  letter-spacing: 4.53px;
  text-transform: uppercase;
  color: #0a0a0a;
}
.partnerzy__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 48px 64px;
  max-width: 820px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 991.98px) {
  .partnerzy__logos {
    gap: 24px 25px;
  }
}
.partnerzy__group--dense .partnerzy__logos {
  max-width: 1060px;
  gap: 40px 56px;
}
.partnerzy__group--dense .partnerzy__logo img {
  max-width: 180px;
  max-height: 56px;
}
@media (max-width: 991.98px) {
  .partnerzy__group--dense .partnerzy__logo img {
    max-width: 120px;
    max-height: 44px;
  }
}
.partnerzy__logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.partnerzy__logo img {
  width: auto;
  max-width: 220px;
  max-height: 72px;
  -o-object-fit: contain;
  object-fit: contain;
}
@media (max-width: 991.98px) {
  .partnerzy__logo img {
    max-width: 140px;
    max-height: 52px;
  }
}
.partnerzy__logo a {
  display: block;
  transition: opacity 0.2s ease;
}
.partnerzy__logo a:hover {
  opacity: 0.7;
}

/** Stopka — Figma node 245:498.

    Wszystkie teksty w Barlow Condensed Bold 11,2px → 14px, uppercase,
    wyśrodkowane. Na samym dole pasek 4px → 5px z gradientem
    czerwony → niebieski → czerwony. */
.stopka {
  position: relative;
  padding-top: 46px;
  background-color: #0a0a0a;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  /** Ikony społecznościowe: kwadraty 38px → 48px na tle
      rgba(255,255,255,.05), ikona 16px → 20px. SVG-e są wstawiane inline
      i mają currentColor, więc kolor bierze się z CSS-a. */
}
.stopka__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 40px;
  text-align: center;
}
.stopka__logo {
  display: block;
}
.stopka__logo img {
  display: block;
  width: 215px;
  height: auto;
}
@media (max-width: 991.98px) {
  .stopka__logo img {
    width: 160px;
  }
}
.stopka__tagline {
  margin: 32px 0 0;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 3.52px;
  text-transform: uppercase;
  color: #f5f5f0;
}
.stopka__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 40px;
  margin-top: 20px;
}
.stopka__link {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 3.52px;
  text-transform: uppercase;
  color: rgba(245, 245, 240, 0.4);
  transition: color 0.2s ease;
}
.stopka__link:hover {
  color: #f5f5f0;
}
.stopka__link--plain:hover {
  color: rgba(245, 245, 240, 0.4);
}
.stopka__socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.stopka__social a, .stopka__social-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: rgba(255, 255, 255, 0.05);
  color: #f5f5f0;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.stopka__social a svg, .stopka__social-placeholder svg {
  width: 20px;
  height: 20px;
}
.stopka__social a:hover {
  background-color: #e8192c;
  color: #f5f5f0;
}
.stopka__credits {
  margin: 28px 0 0;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 3.52px;
  text-transform: uppercase;
  color: #f5f5f0;
}
.stopka__bar {
  display: block;
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, #e8192c 0%, #4db8e8 50%, #e8192c 100%);
}