:root {
  --k-tlo: #ffffff;
  --k-powierzchnia: #f2f2f2;
  --k-tekst: #111111;
  --k-tekst-cichy: #555555;
  --k-akcent: #111111;
  --k-na-akcencie: #ffffff;
  --k-akcent-2: var(--k-akcent);
  --k-linia: #d0d0d0;
  --k-odwr-tlo: #111111;
  --k-odwr-tekst: #ffffff;

  --f-display: system-ui, sans-serif;
  --f-tekst: system-ui, sans-serif;
  --f-etykieta: ui-monospace, monospace;

  --r-mega: clamp(3.5rem, 13vw, 12rem);
  --r-h1: clamp(2.75rem, 8vw, 7rem);
  --r-h2: clamp(2.25rem, 5.5vw, 4.5rem);
  --r-h3: clamp(1.375rem, 2.4vw, 2rem);
  --r-tekst: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --r-maly: 0.9375rem;
  --r-etykieta: 0.75rem;

  --kolumna: 1320px;
  --margines: clamp(1rem, 4vw, 3rem);
  --odstep-sekcji: clamp(4.5rem, 11vw, 9rem);

  --zaokr: 0px;
  --krawedz: 1px;
  --cien: none;

  --czas: 700ms;
  --krzywa: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  min-height: 100vh;
  background: var(--k-tlo);
  color: var(--k-tekst);
  font-family: var(--f-tekst);
  font-size: var(--r-tekst);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, iframe, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
h1, h2, h3, h4 { font-weight: inherit; line-height: 1; text-wrap: balance; }
p { text-wrap: pretty; max-width: 62ch; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--k-akcent); outline-offset: 3px; }
::selection { background: var(--k-akcent); color: var(--k-na-akcencie); }

.ukryte {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.przejdz-do-tresci {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--k-tekst); color: var(--k-tlo); padding: .75rem 1rem;
}
.przejdz-do-tresci:focus { top: 1rem; }

.sekcja { position: relative; padding-block: var(--odstep-sekcji); scroll-margin-top: 4rem; }
.kontener {
  width: 100%;
  max-width: calc(var(--kolumna) + 2 * var(--margines));
  margin-inline: auto;
  padding-inline: var(--margines);
}
.odwrocona {
  --k-tlo: var(--k-odwr-tlo);
  --k-tekst: var(--k-odwr-tekst);
  --k-tekst-cichy: color-mix(in srgb, var(--k-odwr-tekst) 72%, var(--k-odwr-tlo));
  --k-linia: color-mix(in srgb, var(--k-odwr-tekst) 22%, var(--k-odwr-tlo));
  --k-powierzchnia: color-mix(in srgb, var(--k-odwr-tekst) 8%, var(--k-odwr-tlo));
  background: var(--k-tlo);
  color: var(--k-tekst);
}

.etykieta {
  font-family: var(--f-etykieta);
  font-size: var(--r-etykieta);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--k-tekst-cichy);
  line-height: 1.3;
}
.naglowek { font-family: var(--f-display); font-size: var(--r-h2); }

main { counter-reset: sekcja; }
.sekcja:has(.nr) { counter-increment: sekcja; }
.nr::before { content: counter(sekcja, decimal-leading-zero); }

.ramka {
  position: relative;
  overflow: hidden;
  background: var(--k-powierzchnia);
  aspect-ratio: 4 / 5;
}
.ramka[data-proporcje="9x16"] { aspect-ratio: 9 / 16; }
.ramka[data-proporcje="4x5"]  { aspect-ratio: 4 / 5; }
.ramka[data-proporcje="3x4"]  { aspect-ratio: 3 / 4; }
.ramka[data-proporcje="1x1"]  { aspect-ratio: 1 / 1; }
.ramka[data-proporcje="16x9"] { aspect-ratio: 16 / 9; }
.ramka[data-proporcje="3x2"]  { aspect-ratio: 3 / 2; }
.ramka > img, .ramka > video { width: 100%; height: 100%; object-fit: cover; }

.ramka-pusta {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 1rem;
  color: var(--k-tekst-cichy);
  background:
    linear-gradient(var(--k-linia), var(--k-linia)) top 10px left 10px / 14px 1px,
    linear-gradient(var(--k-linia), var(--k-linia)) top 10px left 10px / 1px 14px,
    linear-gradient(var(--k-linia), var(--k-linia)) top 10px right 10px / 14px 1px,
    linear-gradient(var(--k-linia), var(--k-linia)) top 10px right 10px / 1px 14px,
    linear-gradient(var(--k-linia), var(--k-linia)) bottom 10px left 10px / 14px 1px,
    linear-gradient(var(--k-linia), var(--k-linia)) bottom 10px left 10px / 1px 14px,
    linear-gradient(var(--k-linia), var(--k-linia)) bottom 10px right 10px / 14px 1px,
    linear-gradient(var(--k-linia), var(--k-linia)) bottom 10px right 10px / 1px 14px,
    var(--k-powierzchnia);
  background-repeat: no-repeat;
}
.ramka-pusta::after {
  content: attr(data-opis);
  font-family: var(--f-etykieta);
  font-size: var(--r-etykieta);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.5;
  max-width: 18ch;
}

.telefon {
  position: relative;
  padding: 7px;
  border-radius: 34px;
  background: #0d0d0d;
  box-shadow: inset 0 0 0 1.5px #2a2a2a;
}
.telefon > .ramka { border-radius: 27px; }
.telefon::before {
  content: ""; position: absolute; z-index: 3;
  top: 14px; left: 50%; translate: -50% 0;
  width: 28%; height: 16px; border-radius: 10px; background: #0d0d0d;
}

.wideo { position: absolute; inset: 0; background: #000; }
.wideo-okladka, .wideo iframe, .wideo video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0;
}
.wideo iframe, .wideo video { z-index: 1; }
.wideo-play, .wideo-dzwiek {
  position: absolute; z-index: 2;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, #000 55%, transparent);
  color: #fff;
  backdrop-filter: blur(6px);
  transition: transform 200ms var(--krzywa), background 200ms;
}
.wideo-play { left: 50%; top: 50%; width: 64px; height: 64px; translate: -50% -50%; }
.wideo-dzwiek { right: 12px; bottom: 12px; width: 40px; height: 40px; opacity: 0; pointer-events: none; }
.wideo.gra .wideo-dzwiek, .wideo.wstrzymane .wideo-dzwiek { opacity: 1; pointer-events: auto; }
.wideo-play:hover, .wideo-dzwiek:hover { transform: scale(1.06); }
.wideo-play::before {   content: ""; width: 0; height: 0; margin-left: 4px;
  border-left: 16px solid currentColor; border-top: 10px solid transparent; border-bottom: 10px solid transparent;
}
.wideo.gra .wideo-play { opacity: 0; }
.wideo.gra:hover .wideo-play, .wideo.gra .wideo-play:focus-visible { opacity: 1; }
.wideo.gra .wideo-play::before {   border: 0; margin: 0; width: 14px; height: 18px;
  background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%);
}
.wideo-dzwiek::before {   content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3zm13.6 3 2.7-2.7-1.4-1.4-2.7 2.7-2.7-2.7-1.4 1.4 2.7 2.7-2.7 2.7 1.4 1.4 2.7-2.7 2.7 2.7 1.4-1.4-2.7-2.7z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3zm13.6 3 2.7-2.7-1.4-1.4-2.7 2.7-2.7-2.7-1.4 1.4 2.7 2.7-2.7 2.7 1.4 1.4 2.7-2.7 2.7 2.7 1.4-1.4-2.7-2.7z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wideo.dzwiek .wideo-dzwiek::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E");
}
.wideo:has(> .ramka-pusta) { background: none; }

.tasma { overflow: hidden; display: flex; user-select: none; }
.tasma-tor {
  display: flex; flex-shrink: 0; align-items: center; min-width: 100%;
  animation: tasma var(--tasma-czas, 38s) linear infinite;
}
.tasma:hover .tasma-tor { animation-play-state: paused; }
@keyframes tasma { to { transform: translateX(-100%); } }

[data-kategoria].ukryta-filtrem { display: none; }
[data-limit] > .ukryta-wiecej { display: none; }

.menu-przelacznik { display: none; }
@media (max-width: 860px) {
    .menu .menu-przelacznik { display: inline-flex; }
  .menu .menu-linki { display: none; }
  .menu.otwarte .menu-linki { display: flex; }
}

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

.js [data-odslon] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--czas) var(--krzywa), transform var(--czas) var(--krzywa);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-odslon="maska"] {
    opacity: 1; transform: none;
  clip-path: inset(-0.5em -0.3em calc(100% + 0.5em) -0.3em);
  transition: clip-path calc(var(--czas) * 1.3) var(--krzywa);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-odslon="skala"] { transform: scale(.94); }
.js [data-odslon].widoczne { opacity: 1; transform: none; }
.js [data-odslon="maska"].widoczne { clip-path: inset(-0.5em -0.3em -0.5em -0.3em); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .js [data-odslon] { opacity: 1; transform: none; clip-path: none; }
  .tasma-tor { animation: none; }
  .tasma { overflow-x: auto; }
}