/* =====================================================================
   ELWIRA KUSZ — sklep.elwirakusz.com
   Kierunek: Contemporary Sensual Luxury.
   Off-black, ciepłe światło, skóra, powietrze. Zero kart, zero cieni-pudełek.

   Zasada, która rządzi tym plikiem: nic nie ma ramki. Kadr sam jest ramką,
   a jedyne linie na stronie są włosowe i mają kolor skóry, nie szarości.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@200;300;400;500&display=swap');

/* ------------------------------------------------------------------ */
/*  1. Tokeny                                                          */
/* ------------------------------------------------------------------ */
:root {
  /* Czernie są ciepłe. Czysty #000 wygląda jak wyłączony ekran,
     a nie jak cień w ciepłym świetle. */
  --atrament:      #0B0908;
  --atrament-2:    #100E0C;
  --atrament-3:    #17140F;

  --kosc:          #F3EEE9;   /* warm bone  */
  --ecru:          #E9DFD3;
  --cielisty:      #DCC9B6;
  --zloto:         #B08D57;   /* zgaszone złoto */
  --zloto-jasny:   #C9A87C;
  --taupe:         #8A7C6E;

  --mgla:          rgba(243, 238, 233, .46);
  --mgla-cicha:    rgba(243, 238, 233, .26);
  --kreska:        rgba(220, 201, 182, .16);
  --kreska-mocna:  rgba(220, 201, 182, .32);

  /* Typografia */
  --serif:  'Instrument Serif', 'Times New Roman', serif;
  --grotesk:'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Rytm — jedna liczba, od której zależy oddech całej strony */
  --oddech:        clamp(5rem, 11vw, 11rem);
  --margines:      clamp(1.25rem, 5vw, 5.5rem);
  --maks:          88rem;

  /* Krzywe. Wszystko powolne i celowe — nic nie „wskakuje". */
  --wolno:  cubic-bezier(.16, 1, .3, 1);
  --miekko: cubic-bezier(.33, 1, .68, 1);
}

/* ------------------------------------------------------------------ */
/*  2. Reset i podstawa                                                */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  /* Lenis przejmuje scroll; natywne smooth wchodziłoby mu w drogę. */
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--atrament);
  color: var(--kosc);
  font-family: var(--grotesk);
  font-weight: 300;
  font-size: clamp(.95rem, .55vw + .82rem, 1.0625rem);
  line-height: 1.72;
  letter-spacing: .004em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

/* Lenis */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; background: none; border: 0; }
::selection { background: var(--zloto); color: var(--atrament); }

/* ------------------------------------------------------------------ */
/*  3. Typografia                                                      */
/* ------------------------------------------------------------------ */
.display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.022em;
  color: var(--kosc);
}
.display em {
  font-style: italic;
  color: var(--cielisty);
}

.d-xxl { font-size: clamp(2.9rem, 8.6vw, 8.5rem); }
.d-xl  { font-size: clamp(2.4rem, 6.4vw, 6rem); }
.d-l   { font-size: clamp(2rem, 4.4vw, 4rem); }
.d-m   { font-size: clamp(1.5rem, 2.5vw, 2.35rem); line-height: 1.06; }

/* Nadtytuł — jedyne wersaliki na stronie. Muszą oddychać. */
.eyebrow {
  font-family: var(--grotesk);
  font-size: .6875rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: var(--taupe);
  display: flex;
  align-items: center;
  gap: .9rem;
}
.eyebrow::before {
  content: '';
  width: clamp(1.5rem, 4vw, 3.25rem);
  height: 1px;
  background: var(--kreska-mocna);
  flex: none;
}

.lead {
  font-size: clamp(1.05rem, .5vw + .95rem, 1.3rem);
  line-height: 1.66;
  color: var(--mgla);
  font-weight: 300;
  max-width: 44ch;
}

.cicho { color: var(--mgla-cicha); }

/* ------------------------------------------------------------------ */
/*  4. Ziarno + winieta — warstwy, które robią „film"                  */
/* ------------------------------------------------------------------ */
.ziarno {
  position: fixed;
  inset: -120%;
  z-index: 400;
  pointer-events: none;
  opacity: .052;
  mix-blend-mode: overlay;
  background-image: var(--szum);
  background-size: 190px 190px;
  will-change: transform;
  animation: ziarnodryf 700ms steps(1) infinite;
}
@keyframes ziarnodryf {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

.winieta {
  position: fixed;
  inset: 0;
  z-index: 390;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(11, 9, 8, .55) 100%);
}

/* ------------------------------------------------------------------ */
/*  5. Kursor                                                          */
/* ------------------------------------------------------------------ */
.kursor {
  position: fixed;
  top: 0; left: 0;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--kreska-mocna);
  border-radius: 50%;
  pointer-events: none;
  z-index: 500;
  mix-blend-mode: difference;
  transition: width .5s var(--wolno), height .5s var(--wolno),
              margin .5s var(--wolno), opacity .4s, background-color .5s var(--wolno);
  opacity: 0;
}
.kursor.jest { opacity: 1; }
.kursor.duzy {
  width: 84px; height: 84px; margin: -42px 0 0 -42px;
  background: rgba(220, 201, 182, .1);
  border-color: transparent;
}
.kursor__etykieta {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: .5625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kosc);
  opacity: 0;
  transition: opacity .35s;
}
.kursor.duzy .kursor__etykieta { opacity: 1; }
@media (hover: none), (pointer: coarse) { .kursor { display: none; } }

/* ------------------------------------------------------------------ */
/*  6. Kurtyna wejściowa                                               */
/* ------------------------------------------------------------------ */
.kurtyna {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: var(--atrament);
  display: grid;
  place-items: center;
}
.kurtyna__znak {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  letter-spacing: .34em;
  color: var(--taupe);
  text-indent: .34em;
  opacity: 0;
}

/* ------------------------------------------------------------------ */
/*  7. Nawigacja                                                       */
/* ------------------------------------------------------------------ */
.nawigacja {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.15rem var(--margines);
  transform: translateY(-102%);
  background: rgba(11, 9, 8, .72);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border-bottom: 1px solid var(--kreska);
}
.nawigacja__znak {
  font-family: var(--serif);
  font-size: 1.0625rem;
  letter-spacing: .22em;
  text-indent: .22em;
  white-space: nowrap;
}
.nawigacja__linki {
  display: flex;
  gap: clamp(1.2rem, 2.6vw, 2.6rem);
  font-size: .8125rem;
  letter-spacing: .06em;
  color: var(--mgla);
}
.nawigacja__linki a { position: relative; padding-block: .2rem; }
.nawigacja__linki a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--zloto);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .55s var(--wolno);
}
.nawigacja__linki a:hover::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 46rem) { .nawigacja__linki { display: none; } }

/* ------------------------------------------------------------------ */
/*  8. Przyciski                                                       */
/* ------------------------------------------------------------------ */
.przycisk {
  --tlo: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  padding: 1.02rem 1.9rem;
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kosc);
  border: 1px solid var(--kreska-mocna);
  border-radius: 100px;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  white-space: nowrap;
  transition: color .6s var(--wolno), border-color .6s var(--wolno);
}
.przycisk::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ecru);
  transform: translateY(101%);
  transition: transform .68s var(--wolno);
}
.przycisk:hover { color: var(--atrament); border-color: var(--ecru); }
.przycisk:hover::before { transform: translateY(0); }
.przycisk svg { width: 15px; height: 15px; stroke-width: 1.4; }

.przycisk--pelny {
  background: var(--ecru);
  color: var(--atrament);
  border-color: var(--ecru);
}
.przycisk--pelny::before { background: var(--zloto-jasny); }
.przycisk--pelny:hover { color: var(--atrament); }

/* Link tekstowy z podkreśleniem, które wjeżdża od lewej */
.link-cienki {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--cielisty);
  padding-bottom: .4rem;
  cursor: pointer;
}
.link-cienki::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  opacity: .38;
  transform-origin: left;
  transition: transform .6s var(--wolno), opacity .6s;
}
.link-cienki:hover::after { opacity: 1; transform: scaleX(1.03); }

/* ------------------------------------------------------------------ */
/*  9. Wspólne dla sekcji                                              */
/* ------------------------------------------------------------------ */
.sekcja { padding-block: var(--oddech); position: relative; }
.obreb  { width: min(100% - 2 * var(--margines), var(--maks)); margin-inline: auto; }

/* Maska tekstowa: linia wjeżdża spod krawędzi. Ustawiana z GSAP-a. */
.maska { display: block; overflow: hidden; padding-bottom: .06em; }
.maska > span { display: block; will-change: transform; }

.numer {
  font-family: var(--serif);
  font-size: .8125rem;
  color: var(--taupe);
  letter-spacing: .1em;
}

/* ------------------------------------------------------------------ */
/*  10. HERO                                                           */
/* ------------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(2.5rem, 6vh, 5rem);
  overflow: hidden;
}
.hero__kadr {
  position: absolute;
  inset: -8% 0 -8% 0;
  z-index: -2;
  will-change: transform;
}
.hero__kadr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Panorama jest kadrowana z prawej strony; wersja pionowa ma już
     właściwy wycinek wypalony w pliku, więc tam wraca środek. */
  object-position: 68% 42%;
  /* Zdjęcie ma być ciepłe i podbite, ale tekst musi na nim usiąść. */
  filter: brightness(.82) contrast(1.06) saturate(.94);
  transform: scale(1.05);
  will-change: transform;
}
.hero__zaslona {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top,   rgba(11, 9, 8, .96) 0%, rgba(11, 9, 8, .42) 38%, transparent 68%),
    linear-gradient(to right, rgba(11, 9, 8, .88) 0%, rgba(11, 9, 8, .28) 46%, transparent 78%);
}
/* Smuga światła, która raz przechodzi przez kadr przy wejściu */
.hero__smuga {
  position: absolute;
  top: 0; bottom: 0;
  left: -30%;
  width: 42%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(233, 223, 211, .13) 46%, transparent);
  transform: skewX(-14deg);
  pointer-events: none;
  opacity: 0;
}

.hero__tresc { width: min(100% - 2 * var(--margines), var(--maks)); margin-inline: auto; }
.hero__eyebrow { margin-bottom: clamp(1.5rem, 3vw, 2.4rem); }
.hero__tytul   { max-width: 15ch; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.hero__pod {
  max-width: 40ch;
  color: var(--mgla);
  font-size: clamp(1rem, .5vw + .9rem, 1.2rem);
  line-height: 1.62;
}
.hero__pod span { display: block; }
.hero__akcje {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
}

.hero__stopka {
  position: absolute;
  right: var(--margines);
  bottom: clamp(2.5rem, 6vh, 5rem);
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: .625rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--taupe);
  writing-mode: vertical-rl;
}
.hero__stopka::after {
  content: '';
  width: 1px;
  height: 4.5rem;
  background: linear-gradient(var(--kreska-mocna), transparent);
}
@media (max-width: 56rem) { .hero__stopka { display: none; } }

@media (max-width: 46rem), (max-aspect-ratio: 5/4) {
  .hero__kadr img { object-position: 50% 45%; }
  /* W pionie tekst leży na jasnej firanie, a nie na czarnym boku kadru —
     dolna zasłona musi być mocniejsza, żeby utrzymać kontrast. */
  .hero__zaslona {
    background: linear-gradient(to top, rgba(11, 9, 8, .97) 0%, rgba(11, 9, 8, .9) 30%, rgba(11, 9, 8, .68) 46%, transparent 88%);
  }
  /* Nadtytuł w kolorze taupe ginie na firanie — w pionie jaśniejszy. */
  .hero__eyebrow { color: var(--cielisty); }
  .hero__eyebrow::before { background: var(--cielisty); }
}

/* Puls „dostępna do sesji" */
.status {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--taupe);
}
.status::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--zloto-jasny);
  box-shadow: 0 0 0 0 rgba(201, 168, 124, .55);
  animation: puls 3.4s var(--miekko) infinite;
}
@keyframes puls {
  0%      { box-shadow: 0 0 0 0 rgba(201, 168, 124, .5); }
  60%,100%{ box-shadow: 0 0 0 11px rgba(201, 168, 124, 0); }
}

/* ------------------------------------------------------------------ */
/*  11. MANIFEST                                                       */
/* ------------------------------------------------------------------ */
.manifest { padding-block: calc(var(--oddech) * 1.35); }
.manifest__uklad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .62fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
}
@media (max-width: 62rem) { .manifest__uklad { grid-template-columns: 1fr; } }

.manifest__slowa {
  font-family: var(--serif);
  font-size: clamp(1.55rem, 3.1vw, 2.9rem);
  line-height: 1.24;
  letter-spacing: -.014em;
  margin-top: clamp(2rem, 4vw, 3.2rem);
  max-width: 24ch;
}
/* Każde słowo gaśnie i zapala się osobno przy przewijaniu (GSAP). */
.manifest__slowa .slowo { display: inline-block; opacity: .12; will-change: opacity; }
.manifest__slowa .akcent { font-style: italic; color: var(--zloto-jasny); }

.manifest__autor {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
}
.manifest__autor img {
  width: 68px;
  height: 84px;
  flex: none;
  object-fit: cover;
  filter: grayscale(1) brightness(.94) contrast(1.05);
}
.manifest__podpis {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--cielisty);
  line-height: 1.1;
}
.manifest__autor .manifest__opis { margin-top: .4rem; }

.manifest__foto {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.manifest__foto img {
  width: 100%; height: 116%;
  object-fit: cover;
  filter: brightness(.92) saturate(.96);
  will-change: transform;
}
.manifest__opis {
  margin-top: 1.1rem;
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* ------------------------------------------------------------------ */
/*  12. KOLEKCJA                                                       */
/* ------------------------------------------------------------------ */
.kolekcja__glowa {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr);
  gap: clamp(1.6rem, 5vw, 5rem);
  align-items: end;
  padding-bottom: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--kreska);
}
@media (max-width: 56rem) { .kolekcja__glowa { grid-template-columns: 1fr; align-items: start; } }

/* Siatka edytorialowa: nierówna z premedytacją — pozycje nie są
   równoprawnymi „produktami", tylko kadrami o różnej wadze. */
.kolekcja__siatka {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 3vw, 3rem);
  padding-top: clamp(3.5rem, 7vw, 6rem);
}
.pozycja { grid-column: span 4; position: relative; }
.pozycja--szeroka { grid-column: span 6; }
.pozycja--pelna   { grid-column: span 12; }
/* Drugi rząd zsunięty w dół — burzy siatkę, żeby oko szło zygzakiem */
.pozycja--nizej { margin-top: clamp(0rem, 6vw, 6rem); }

@media (max-width: 62rem) {
  .pozycja, .pozycja--szeroka { grid-column: span 6; }
  .pozycja--pelna { grid-column: span 12; }
  .pozycja--nizej { margin-top: 0; }
}
@media (max-width: 40rem) {
  .pozycja, .pozycja--szeroka, .pozycja--pelna { grid-column: span 12; }
}

.pozycja__kadr {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--atrament-2);
}
.pozycja--pelna  .pozycja__kadr { aspect-ratio: 16 / 9; }
.pozycja--poziom .pozycja__kadr { aspect-ratio: 3 / 2; }
.pozycja__kadr img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.86) saturate(.95);
  transform: scale(1.02);
  transition: transform 1.5s var(--wolno), filter 1.1s var(--wolno);
  will-change: transform;
}
.pozycja:hover .pozycja__kadr img { transform: scale(1.07); filter: brightness(1) saturate(1); }

/* Cienka złota linia, która obrysowuje kadr od dołu przy hoverze */
.pozycja__kadr::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--zloto-jasny);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s var(--wolno);
}
.pozycja:hover .pozycja__kadr::after { transform: scaleX(1); }

.pozycja__znacznik {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 2;
  padding: .34rem .8rem;
  font-size: .5625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--atrament);
  background: var(--cielisty);
  border-radius: 100px;
}

.pozycja__tresc { padding-top: 1.4rem; }
.pozycja__gora {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--kreska);
}
.pozycja__nazwa {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.7vw, 1.75rem);
  line-height: 1.14;
  letter-spacing: -.012em;
}
.pozycja__cena {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  color: var(--zloto-jasny);
  white-space: nowrap;
}
.pozycja__cena small {
  font-family: var(--grotesk);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-right: .35rem;
}
.pozycja__opis {
  margin-top: .95rem;
  color: var(--mgla);
  font-size: .9375rem;
  line-height: 1.62;
  max-width: 38ch;
}
.pozycja__meta {
  margin-top: .85rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--taupe);
}
.pozycja__meta span::after { content: ' ·'; color: var(--kreska-mocna); }
.pozycja__meta span:last-child::after { content: ''; }
.pozycja__cta { margin-top: 1.3rem; }

/* ------------------------------------------------------------------ */
/*  13. RETUSZ — suwak przed / po                                      */
/* ------------------------------------------------------------------ */
.retusz {
  margin-top: calc(var(--oddech) * .9);
  padding-top: clamp(3.5rem, 7vw, 6rem);
  border-top: 1px solid var(--kreska);
}
.retusz__uklad {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
@media (max-width: 62rem) { .retusz__uklad { grid-template-columns: 1fr; } }

.suwak {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  background: var(--atrament-2);
}
.suwak img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* Warstwa „po" jest przycinana clip-path — bez przeskoków przy drag */
.suwak__po {
  clip-path: inset(0 0 0 var(--podzial, 50%));
  will-change: clip-path;
}
.suwak__uchwyt {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--podzial, 50%);
  width: 1px;
  background: var(--ecru);
  pointer-events: none;
  will-change: left;
}
.suwak__uchwyt::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  border: 1px solid var(--ecru);
  border-radius: 50%;
  background: rgba(11, 9, 8, .3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.suwak__uchwyt::after {
  content: '‹ ›';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: .9rem;
  letter-spacing: .18em;
  color: var(--ecru);
}
.suwak__etykieta {
  position: absolute;
  bottom: 1.1rem;
  z-index: 3;
  font-size: .5625rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--kosc);
  padding: .3rem .75rem;
  background: rgba(11, 9, 8, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 100px;
  pointer-events: none;
}
.suwak__etykieta--l { left: 1.1rem; }
.suwak__etykieta--p { right: 1.1rem; }

/* Na wąskim ekranie obie etykiety spotykają się na środku kadru. */
@media (max-width: 34rem) {
  .suwak__etykieta { font-size: .5rem; letter-spacing: .12em; padding: .25rem .55rem; bottom: .7rem; }
  .suwak__etykieta--l { left: .7rem; }
  .suwak__etykieta--p { right: .7rem; }
}

.retusz__lista {
  margin-top: 1.8rem;
  display: grid;
  gap: .1rem;
}
.retusz__lista li {
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--kreska);
  font-size: .875rem;
  color: var(--mgla);
}
.retusz__lista li span:last-child {
  font-family: var(--serif);
  color: var(--cielisty);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/*  14. SELECTED WORKS — poziomy scroll                                */
/* ------------------------------------------------------------------ */
.prace { padding-block: 0; overflow: hidden; }
.prace__glowa { padding-block: var(--oddech) clamp(2.5rem, 5vw, 4rem); }

.prace__scena { position: relative; height: 100svh; }
.prace__tor {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3.5vw, 4rem);
  height: 100%;
  padding-inline: var(--margines);
  will-change: transform;
}
.praca { position: relative; flex: none; }
.praca--pion  { width: clamp(15rem, 26vw, 26rem); aspect-ratio: 4 / 5; }
.praca--poziom{ width: clamp(20rem, 38vw, 40rem); aspect-ratio: 3 / 2; }
/* Różne wysokości = rytm kinowy zamiast taśmy produkcyjnej */
.praca--wyzej { align-self: flex-start; margin-top: 12vh; }
.praca--nizej { align-self: flex-end;   margin-bottom: 12vh; }

.praca__kadr { position: relative; width: 100%; height: 100%; overflow: hidden; }
.praca__kadr img {
  width: 100%; height: 112%;
  object-fit: cover;
  filter: brightness(.88) saturate(.94);
  transition: filter 1s var(--wolno);
  will-change: transform;
}
.praca:hover .praca__kadr img { filter: brightness(1.02) saturate(1); }
.praca__opis {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .9rem;
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--taupe);
}
.praca__opis b { font-weight: 400; color: var(--cielisty); }

/* Karta zamykająca tor */
.praca--domkniecie {
  width: clamp(16rem, 24vw, 24rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.6rem;
}

.prace__pasek {
  position: absolute;
  left: var(--margines);
  right: var(--margines);
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  height: 1px;
  background: var(--kreska);
}
.prace__pasek i {
  display: block;
  height: 100%;
  width: 12%;
  background: var(--zloto-jasny);
  transform-origin: left;
  will-change: transform;
}

/* Na wąskich ekranach scroll poziomy jest wrogi — zamieniamy na kolumnę */
@media (max-width: 56rem) {
  .prace__scena { height: auto; }
  .prace__tor {
    flex-direction: column;
    align-items: stretch;
    gap: 3rem;
    transform: none !important;
    padding-block: 1rem 4rem;
  }
  .praca--pion, .praca--poziom { width: 100%; }
  .praca--wyzej, .praca--nizej { align-self: auto; margin: 0; }
  .prace__pasek { display: none; }
}

/* ------------------------------------------------------------------ */
/*  15. GŁOSY                                                          */
/* ------------------------------------------------------------------ */
.glosy { background: var(--atrament-2); }
.glosy__lista { display: grid; gap: 0; padding-top: clamp(3rem, 6vw, 5rem); }

.glos {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 4rem);
  padding-block: clamp(2.6rem, 5vw, 4.2rem);
  border-top: 1px solid var(--kreska);
}
.glos:last-child { border-bottom: 1px solid var(--kreska); }
@media (max-width: 46rem) { .glos { grid-template-columns: 1fr; gap: 1.2rem; } }

.glos__cytat {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.6vw, 2.35rem);
  line-height: 1.26;
  letter-spacing: -.012em;
  color: var(--kosc);
  max-width: 26ch;
  text-wrap: balance;
}
.glos__kto {
  margin-top: 1.3rem;
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* ------------------------------------------------------------------ */
/*  16. OSTATNI ROZDZIAŁ                                               */
/* ------------------------------------------------------------------ */
.rozdzial { position: relative; overflow: hidden; }
.rozdzial__tlo {
  position: absolute;
  inset: -10% 0;
  z-index: -2;
  will-change: transform;
}
.rozdzial__tlo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.34) saturate(.7);
}
.rozdzial__tlo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--atrament), rgba(11, 9, 8, .68) 40%, var(--atrament));
}
.rozdzial__uklad {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
@media (max-width: 62rem) { .rozdzial__uklad { grid-template-columns: 1fr; } }

.rozdzial__foto { aspect-ratio: 3 / 4; overflow: hidden; }
.rozdzial__foto img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 62rem) { .rozdzial__foto { display: none; } }

.formularz { margin-top: clamp(2rem, 4vw, 2.8rem); max-width: 30rem; }
.pole {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--kreska-mocna);
  transition: border-color .5s var(--wolno);
}
.pole:focus-within { border-color: var(--zloto-jasny); }
.pole input {
  flex: 1;
  min-width: 0;
  padding: 1rem 0;
  font-size: 1rem;
  font-weight: 300;
  outline: none;
}
.pole input::placeholder { color: var(--taupe); }
.pole.zle { border-color: #A85B4A; }

.zgoda {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin-top: 1.4rem;
  font-size: .75rem;
  line-height: 1.62;
  color: var(--taupe);
  cursor: pointer;
}
.zgoda input { position: absolute; opacity: 0; pointer-events: none; }
.zgoda i {
  flex: none;
  width: 15px; height: 15px;
  margin-top: .3rem;
  border: 1px solid var(--kreska-mocna);
  border-radius: 2px;
  position: relative;
  transition: background-color .4s var(--wolno), border-color .4s var(--wolno);
}
.zgoda input:checked + i { background: var(--zloto-jasny); border-color: var(--zloto-jasny); }
.zgoda input:checked + i::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid var(--atrament);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg);
}
.zgoda a { color: var(--cielisty); text-decoration: underline; text-underline-offset: 3px; }
.zgoda.zle i { border-color: #A85B4A; }

.formularz__ok {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--cielisty);
  line-height: 1.4;
}

/* ------------------------------------------------------------------ */
/*  17. STOPKA                                                         */
/* ------------------------------------------------------------------ */
.stopka { position: relative; padding-top: var(--oddech); overflow: hidden; }
.stopka__uklad {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, .7fr));
  gap: clamp(2.5rem, 4vw, 4rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}
@media (max-width: 62rem) { .stopka__uklad { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .stopka__uklad { grid-template-columns: 1fr; } }

.stopka__zdanie {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.24;
  max-width: 18ch;
  color: var(--kosc);
}
.stopka__grupa h4 {
  font-size: .625rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 1.15rem;
}
.stopka__grupa ul { list-style: none; display: grid; gap: .62rem; }
.stopka__grupa a {
  font-size: .875rem;
  color: var(--mgla);
  transition: color .45s var(--wolno);
}
.stopka__grupa a:hover { color: var(--kosc); }

/* Wielki znak na dole — obcięty przez krawędź, jak w druku */
.stopka__znak {
  font-family: var(--serif);
  font-size: clamp(3.2rem, 15.5vw, 15rem);
  line-height: .82;
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(220, 201, 182, .17);
  text-align: center;
  white-space: nowrap;
  user-select: none;
  padding-bottom: .06em;
}
.stopka__dol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.6rem;
  border-top: 1px solid var(--kreska);
  font-size: .6875rem;
  letter-spacing: .1em;
  color: var(--taupe);
}
.stopka__dol nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.stopka__dol a:hover { color: var(--cielisty); }

/* ------------------------------------------------------------------ */
/*  18. Dostępność i wersje bez animacji                               */
/* ------------------------------------------------------------------ */
/* Widoczne dla czytnika ekranu, niewidoczne dla oka. */
.tylko-dla-czytnika {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:where(a, button, input):focus-visible {
  outline: 1px solid var(--zloto-jasny);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .ziarno { animation: none; }
  /* Wszystko, co GSAP chowa, musi być widoczne od razu. */
  .maska > span { transform: none !important; }
  .manifest__slowa .slowo { opacity: 1 !important; }
  .kurtyna { display: none; }
}