/* ===================================================================
   TOKENY
   =================================================================== */
:root{
  --paper:        #ffffff;   /* tło główne — biel */
  --paper-deep:   #f6ead4;   /* jasny kremowy beż — panele naprzemienne */
  --paper-deeper: #e2d7c3;   /* przyciemniony beż — linie, obramowania */
  --ink:          #32271e;   /* ciemny brąz — tekst podstawowy */
  --ink-muted:    #5c4540;   /* przygaszony brąz/śliwka — tekst drugoplanowy */
  --accent:       #5da1a8;   /* przygaszony teal — sygnaturowy akcent */
  --accent-deep:  #33595c;   /* teal, przyciemniony — do drobnego tekstu na bieli */
  --accent-warm:  #d47863;   /* terakota — fokus, hover w lightboxie */
  --accent-lamp:  #f3c667;   /* musztardowy żółty — hover na "napisz do mnie" */
  --cream:        #f6ead4;   /* jasny kremowy beż — jasne detale na ciemnym tle lightboxa */

  --font-display: "Bitter", serif;
  --font-body:    "Poppins", sans-serif;

  --container: 1180px;
  /* stała wysokość paska — hero liczy od niej dostępną wysokość ekranu */
  --wysokosc-nav: 3.75rem;
  /* boczny margines sekcji pop-up, żeby kafelki nie dotykały krawędzi */
  --margines-banery: clamp(1rem, 4vw, 3rem);
  /* kanał w galerii własnych projektów — tyle co we wzorze (ok. 2,4% szerokości) */
  --wp-kanal: clamp(0.4rem, 2.4vw, 2.5rem);
  /* jaśniejszy wariant brązu tekstowego — do roli w doświadczeniu */
  --ink-jasny:    #8e6d53;
  --edge: clamp(1.25rem, 4vw, 3.5rem);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a{ color: inherit; }

h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}

:focus-visible{
  outline: 2px solid var(--accent-warm);
  outline-offset: 3px;
}

button{
  font-family: inherit;
  cursor: pointer;
}

/* (usunięto teksturę tła — czysta biel) */

/* ===================================================================
   NAGŁÓWEK / NAWIGACJA
   =================================================================== */
/* Logo jest pierwszym elementem paska nawigacji — osobna belka nad nim zniknęła. */
.logo{
  /* Lewa połowa paska. Logo musi być dzieckiem <nav>, a nie <ul> —
     wewnątrz listy space-between dokładał odstęp także za logo
     i pierwszy przycisk lądował poza połową. */
  flex: 0 0 50%;
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}
.logo a{ display: inline-flex; }
.logo-img{
  /* Logo poziome ma proporcje 4,1:1, więc o jego rozmiarze decyduje szerokość,
     a nie wysokość paska. 3,25rem = 52 px przy pasku 60 px, czyli maksimum,
     jakie mieści się razem z przyciskami. */
  height: clamp(1.9rem, 4.2vw, 3.25rem);
  width: auto;
  display: block;
}

nav{
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--paper);
  padding: 0 var(--edge);
  height: var(--wysokosc-nav);
  display: flex;
  align-items: center;
}

nav > ul{
  list-style: none;
  /* przyciski dosunięte do prawej krawędzi paska, ze stałym odstępem */
  --odstep-nav: clamp(1.5rem, 4.5vw, 3.5rem);
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--odstep-nav);
  margin: 0;
  padding: 0;
}
/* bez tego flex ściska logo niemal do zera, a linki zawijają się na wąskim ekranie.
   display:flex zdejmuje wyrównanie do linii bazowej — inaczej ikona Instagrama,
   jako element liniowy, siedziała 3 px wyżej niż litery sąsiednich przycisków. */
nav > ul > li{ flex: 0 0 auto; display: flex; align-items: center; }
/* Instagram trzyma się bliżej sąsiada — połowa zwykłego odstępu */
nav > ul > li:last-child{ margin-left: calc(var(--odstep-nav) / -2); }

nav a, nav .navlink{
  background: none;
  border: none;
  padding: 0.2rem 0.1rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  position: relative;
  white-space: nowrap;
}

nav .navlink::after{
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -1px;
  height: 2px;
  background: var(--accent-warm);
  transition: right 0.2s ease;
}
nav .navlink:hover,
nav .navlink:focus-visible{
  color: var(--accent-warm);
}
nav .navlink:hover::after,
nav .navlink:focus-visible::after{
  right: 0;
}
nav .navlink[aria-current="page"]{
  color: var(--accent-warm);
}

/* Instagram: sam znaczek. Podkreślenie rysuje reguła dla button.navlink,
   więc link go nie dostaje — zostaje sama zmiana koloru na hover. */
nav a.nav-instagram{
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  transition: color 0.2s ease;
}
nav a.nav-instagram:hover,
nav a.nav-instagram:focus-visible{ color: var(--accent-warm); }
nav a.nav-instagram svg{ display: block; }

/* Hamburger i wysuwana ściana z menu — widoczne dopiero na telefonie.
   Na wąskim ekranie cztery przyciski nie mieściły się obok logo
   i wypychały stronę o kilkanaście pikseli w prawo. */
nav .nav-hamburger{
  display: none;
  margin-left: auto;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
}
nav .nav-hamburger span{
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  background: currentColor;
}
nav .nav-hamburger[aria-expanded="true"]{ color: var(--accent-warm); }
nav .nav-zaslona{ display: none; }

@media (max-width: 760px){
  nav .nav-hamburger{ display: flex; }
  /* position: fixed liczy się od okna, a nie od paska (sticky nie tworzy
     bloku zawierającego), więc ściana sięga od paska do dołu ekranu.
     Schowana leży poza oknem, ale jako element fixed nie powiększa
     szerokości dokumentu — pasek przewijania w poziomie się nie pojawia. */
  nav > ul{
    position: fixed;
    top: var(--wysokosc-nav);
    right: 0;
    bottom: 0;
    z-index: 40;
    width: min(74vw, 17rem);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.6rem;
    padding: 2rem var(--edge);
    background: var(--paper);
    box-shadow: -10px 0 28px rgba(30, 43, 54, 0.16);
    transform: translateX(100%);
    transition: transform 0.25s ease;
  }
  nav.otwarte > ul{ transform: translateX(0); }
  /* Rozwinięta lista podstron potrafi nie zmieścić się na ekranie —
     ściana przewija się wtedy w pionie. */
  nav > ul{ overflow-y: auto; }

  /* Lista konkretnych podstron: wcina się pod swoją pozycję, mniejszym
     stopniem, i — inaczej niż pozycje paska — może zawijać wiersze. */
  .nav-grupa{ flex-direction: column; align-items: flex-start; gap: 0.9rem; }
  .nav-podmenu{
    list-style: none;
    margin: 0;
    padding: 0 0 0 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-left: 1px solid var(--paper-deeper);
  }
  .nav-podmenu a{
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: none;
    color: var(--ink-muted);
    white-space: normal;
    padding: 0;
  }
  .nav-podmenu a[aria-current="page"]{ color: var(--accent-warm); }
  /* atrybut hidden sam nie wystarczy: "display: flex" z arkusza wygrywa
     z regułą przeglądarki i lista stała otworem od początku */
  .nav-podmenu[hidden]{ display: none; }
  nav > ul button.navlink{ font-size: 1.05rem; }

  /* w wysuwanej ścianie wszystkie pozycje mają ten sam odstęp */
  nav > ul > li:last-child{ margin-left: 0; }
  nav .nav-zaslona{
    display: block;
    position: fixed;
    inset: var(--wysokosc-nav) 0 0;
    z-index: 39;
    background: rgba(30, 43, 54, 0.25);
  }
  nav .nav-zaslona[hidden]{ display: none; }
}

/* poza telefonem podmenu nie istnieje — nawet gdyby zostało rozwinięte
   przed obróceniem ekranu */
@media (min-width: 761px){
  .nav-podmenu{ display: none; }
}

/* ===================================================================
   LAYOUT WSPÓLNY
   =================================================================== */
main{
  position: relative;
  z-index: 1;
}

.page{
  animation: fade 0.25s ease;
  padding-top: 1.75rem;
}
/* Podstrony projektów zaczynają się hero tuż pod paskiem — odstęp ustawia ich sekcja 1. */
.projekt-szczegoly{ padding-top: 0; }
/* w "pop-up" pierwsza para kafelków też zaczyna się tuż pod paskiem */
#pop-up{ padding-top: 0; }
.page[hidden]{ display: none; }

@keyframes fade{
  /* samo rozjaśnienie — bez przesunięcia, bo translateY dokładało 6 px wysokości
     i podstrona pocztówek dostawała przez to pasek przewijania */
  from{ opacity: 0; }
  to{ opacity: 1; }
}

.page-head{
  padding: 3rem var(--edge) 1.5rem;
  max-width: var(--container);
  margin: 0 auto;
}
.page-head h1{
  font-size: clamp(2rem, 4vw, 2.8rem);
}
.eyebrow{
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

.podnav{
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0 0 0 0.15em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
}
.podnav li{
  position: relative;
  padding-left: 1.1em;
}
.podnav li::before{
  content: "›";
  position: absolute;
  left: 0;
  color: var(--accent);
}
.podnav a{
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.podnav a:hover{
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* ===================================================================
   POP-UP — BANERY
   =================================================================== */
.banery{
  display: flex;
  flex-direction: column;
  /* odstęp między parami — wcześniej dawał go pionowy padding tekstu */
  gap: clamp(2rem, 5vw, 4rem);
  /* kafelki odsunięte od krawędzi ekranu */
  padding: 0 var(--margines-banery);
}

.baner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: stretch;
  width: 100%;
  /* Kwadratowy kafelek jest tak wysoki, jak szeroka jest kolumna, więc żeby
     cała para mieściła się na ekranie, ograniczamy szerokość pary — nie zdjęcie. */
  max-width: calc(2 * (100vh - var(--wysokosc-nav) - 3rem) + clamp(1.5rem, 4vw, 3rem));
  margin: 0 auto;
}


/* Obie odmiany ustawiają kolejność jawnie, więc o stronie kafelka decyduje
   sama klasa — kolejność w HTML nie ma znaczenia. Dzięki temu wyjęcie
   jednej pozycji z szachownicy to tylko podmiana nazw klas. */
.baner--zdjecie-lewo .baner-zdjecie{ order: 1; }
.baner--zdjecie-lewo .baner-tekst{ order: 2; }
.baner--tekst-lewo .baner-tekst{ order: 1; }
.baner--tekst-lewo .baner-zdjecie{ order: 2; }

.baner-tekst{
  /* bez własnego paddingu: odstęp od krawędzi strony ma być taki sam
     jak przy zdjęciu, a odstęp od zdjęcia daje gap siatki */
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
}

.baner-tekst h2{
  font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.baner-tekst p{
  color: var(--ink-muted);
  max-width: 34ch;
}

.baner-podtytul{
  font-size: 0.85rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  font-style: italic;
}

.baner-zdjecie{
  position: relative;
  overflow: hidden;
  /* kwadrat zamiast rozciągania do wysokości tekstu — źródła są 1400×1400,
     więc przy 1:1 nic nie jest kadrowane */
  aspect-ratio: 1 / 1;
  cursor: pointer;
}
/* kafelki bez podpiętej galerii nie udają klikalnych */
.baner-zdjecie:not([href]){ cursor: default; }

.baner-zdjecie img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

/* --- SYGNATURA: podświetlenie całego zdjęcia przy najechaniu --- */
.baner-zdjecie::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

/* Przyciemnienie i przybliżenie tylko tam, gdzie kafelek prowadzi do podstrony.
   Bez tego pozycje bez własnej strony reagowały na kursor i udawały klikalne. */
a.baner-zdjecie:hover img,
a.baner-zdjecie:focus-visible img{
  transform: scale(1.035);
}
a.baner-zdjecie:hover::after,
a.baner-zdjecie:focus-visible::after{
  opacity: 0.18;
}

@media (max-width: 760px){
  /* Szachownica zostaje także na telefonie: tekst i zdjęcie obok siebie,
     dwa kafelki w rzędzie. Wcześniej kafelki szły jeden pod drugim i układ
     się rozpadał. Napisy muszą przy tym zjechać, bo kafelek ma ok. 180 px. */
  .baner{ max-width: none; }
  /* kafelki mają sięgać krawędzi ekranu — sekcja oddaje boczny margines */
  .banery{ padding-left: 0; padding-right: 0; }
  .baner-tekst{ gap: 0.15rem; }
  .baner-tekst h2{ font-size: clamp(0.8rem, 3.4vw, 1.1rem); line-height: 1.2; }
  .baner-tekst p,
  .baner-podtytul,
  .sc-opis{ font-size: clamp(0.55rem, 2.2vw, 0.75rem); line-height: 1.35; }
}

/* ===================================================================
   ILUSTRACJA — GRID
   =================================================================== */
.galeria-wrap{
  padding: 0 var(--edge) 4rem;
  max-width: var(--container);
  margin: 0 auto;
}

.galeria-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 1.5vw, 1rem);
}

.kafelek-wrap{
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--paper-deep);
}

.kafelek-wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.kafelek-wrap::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.kafelek-wrap:hover img, .kafelek-wrap:focus-within img{
  transform: scale(1.05);
}
.kafelek-wrap:hover::after, .kafelek-wrap:focus-within::after{
  opacity: 0.18;
}

@media (max-width: 760px){
  .galeria-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ===================================================================
   STRONA GŁÓWNA
   =================================================================== */
#home{ padding-top: 0; }

.home-kafle{
  --home-odstep: clamp(1rem, 2.5vw, 2rem);
  /* węższy margines niż w pop-upie — jak we wzorze kafle mają wypełnić ekran */
  --home-margines: clamp(0.75rem, 2vw, 1.75rem);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--home-odstep);
  padding: var(--home-margines);
  min-height: calc(100vh - var(--wysokosc-nav));
}

.home-kafel{
  /* Kwadrat: szerokość to połowa dostępnego miejsca, ale nigdy więcej niż
     zostało wysokości — dzięki temu oba kafle mieszczą się na jednym ekranie. */
  flex: 0 0 auto;
  width: min(
    calc((100% - var(--home-odstep)) / 2),
    calc(100vh - var(--wysokosc-nav) - 2 * var(--home-margines))
  );
  aspect-ratio: 1;
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
}

.home-kafel img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* zdjęcie jest przygaszone, pod kursorem wychodzi mocniej */
  opacity: 0.5;
  transition: opacity 0.25s ease;
}
.home-kafel:hover img,
.home-kafel:focus-visible img{ opacity: 0.75; }

.home-przycisk{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 55%;
  /* jako <span> w <a> nie dziedziczy już wyśrodkowania, które dawał <button> */
  text-align: center;
  padding: 0.95rem 2.25rem;
  background: #fff;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.6vw, 1.3rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  /* czarna poświata jest stała — nie pojawia się dopiero pod kursorem */
  box-shadow: 0 0 28px rgba(0, 0, 0, 0.35);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.home-kafel:hover .home-przycisk,
.home-kafel:focus-visible .home-przycisk{
  border-color: var(--accent-warm);
  color: var(--accent-warm);
}

/* na telefonie kafle jeden pod drugim, na pełną szerokość */
@media (max-width: 760px){
  .home-kafle{
    flex-direction: column;
    min-height: calc(100vh - var(--wysokosc-nav));
    min-height: calc(100dvh - var(--wysokosc-nav));
    justify-content: center;
  }
  /* dwa kafle dzielą wysokość ekranu po połowie; zdjęcia są kwadratowe,
     więc object-fit: cover je przycina zamiast wypychać stronę w dół */
  .home-kafel{
    width: 100%;
    aspect-ratio: auto;
    height: calc((100vh - var(--wysokosc-nav) - 2 * var(--home-margines) - var(--home-odstep)) / 2);
    /* dvh liczy się od realnie widocznej wysokości — na telefonie 100vh to
       wysokość z ukrytym paskiem adresu, więc kafle wystawałyby poza ekran */
    height: calc((100dvh - var(--wysokosc-nav) - 2 * var(--home-margines) - var(--home-odstep)) / 2);
  }
}

/* ===================================================================
   O MNIE
   =================================================================== */
/* portret ma zaczynać się tuż pod paskiem — zostaje tylko tyle miejsca,
   ile potrzebuje wystająca ramka dekoracyjna (::before, -10px) */
#o-mnie{ padding-top: 0; }
.o-mnie-tresc{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0.75rem var(--edge) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.o-mnie-tekst p{
  font-family: var(--font-body);
  line-height: 1.6;
  font-weight: 400;
  margin: 0 0 1.1em;
  color: var(--ink-muted);
}
.o-mnie-tekst p:first-child{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 0.85rem;
}
/* jeden akapit zamiast trzech: nie stosujemy stylu leadu, bo cały tekst
   wyszedłby wielki — regula musi stac PO :first-child (ta sama specyficznosc) */
.o-mnie-naglowek{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 0.9rem;
}
.o-mnie-tekst p:only-of-type{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-muted);
}
.o-mnie-tekst p:last-child{ margin-bottom: 0; }

.o-mnie-zdjecie{
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  /* Portret wypełnia całą wysokość od paska do dolnej krawędzi okna.
     Drugi człon min() to bezpiecznik na wysokie okna: bez niego przy oknie
     1080 px portret miałby ponad 800 px szerokości i ścisnąłby tekst do paska. */
  --portret-max-szer: calc(0.5 * (min(var(--container), 100vw) - 2 * var(--edge)));
  height: min(
    calc(100vh - var(--wysokosc-nav) - 0.75rem),
    calc(var(--portret-max-szer) * 5 / 4)
  );
  width: auto;
}
.o-mnie-zdjecie picture{ display: block; width: 100%; height: 100%; }
.o-mnie-zdjecie img{ width: 100%; height: 100%; object-fit: cover; }
.o-mnie-zdjecie::before{
  content: "";
  position: absolute;
  inset: -10px -10px auto auto;
  width: 90%; height: 90%;
  border: 1px solid var(--accent);
  z-index: -1;
}

@media (max-width: 760px){
  .o-mnie-tresc{ grid-template-columns: 1fr; padding-bottom: 2.5rem; }
  /* poziomy kadr od krawędzi do krawędzi, nad tekstem: ujemny margines
     zdejmuje boczny padding sekcji, a wysokość wraca na naturalną */
  .o-mnie-zdjecie{
    order: -1;
    margin: 0 calc(-1 * var(--edge));
    width: auto;
    height: auto;
    aspect-ratio: auto;
  }
  .o-mnie-zdjecie img{ height: auto; }
  /* ramka dekoracyjna nie ma sensu przy zdjęciu na całą szerokość */
  .o-mnie-zdjecie::before{ display: none; }
}

/* ===================================================================
   WSPÓŁPRACA
   =================================================================== */
.wspolpraca-tresc{
  max-width: 640px;
  margin: 0 auto;
  padding: 1rem var(--edge) 6rem;
  text-align: left;
}

.wspolpraca-tresc p{
  margin: 0 0 1.4em;
  color: var(--ink-muted);
}
.wspolpraca-tresc p:first-of-type{
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 0.85rem;
}

.mail-stempel{
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 0.9rem 1.6rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background 0.15s ease, color 0.15s ease;
}
.mail-stempel:hover{
  background: var(--accent-lamp);
  border-color: var(--accent-lamp);
  color: var(--ink);
}

/* ===================================================================
   WIOSKA — SZCZEGÓŁY PROJEKTU
   =================================================================== */
.stack-sekcja{
  background: var(--paper);
  /* symetrycznie: sąsiednie sekcje dzieli zawsze dwukrotność tej wartości */
  padding: clamp(1.5rem, 3vw, 2rem) var(--edge);
}

/* Pierwsza sekcja startuje tuż pod nawigacją — pełny padding sekcji
   zostawiałby na górze ok. 130 px pustki (reszta strony ma 34 px). */
.projekt-szczegoly .stack-sekcja:first-of-type{
  padding-top: 0.5rem;
}
/* 5. pod karuzelą nie ma już nic — pusty margines na końcu strony jest zbędny */
.projekt-szczegoly .stack-sekcja:last-of-type{
  padding-bottom: 0;
}

/* ===================================================================
   PODSTRONA REALIZACJI FILMOWEJ (scenografia -> pojedynczy tytuł)
   Kadr otwierający na całą szerokość, pod nim metryka i nagrody,
   dalej zdjęcia jedno pod drugim — też od krawędzi do krawędzi.
   Blok musi stać PO regułach .projekt-szczegoly: obie klasy mają tę samą
   specyficzność, więc o pierwszeństwie decyduje kolejność w pliku.
   =================================================================== */
.film-szczegoly .stack-sekcja:first-of-type{ padding-top: 0; padding-bottom: 0; }
/* sekcja z metryką: oddech nad tekstem i pod nim, jak we wzorze */
.film-szczegoly .stack-sekcja--tekst{
  padding-top: clamp(1.75rem, 4vh, 2.75rem);
  padding-bottom: clamp(1.75rem, 4vh, 2.75rem);
}
.film-szczegoly .stack-sekcja--kadry{ padding-top: 0; padding-bottom: 0; }
/* rysunki bez odstępu nad i pod — cała sekwencja zdjęć ma być ciągła */
.film-szczegoly .stack-sekcja--rysunki{ padding-top: 0; padding-bottom: 0; }
/* podpis fotografa — pojawia się tylko tam, gdzie jest we wzorze */
.film-szczegoly .stack-sekcja--podpis{
  padding-top: clamp(0.5rem, 1.5vh, 0.9rem);
  padding-bottom: clamp(1rem, 2.5vh, 1.6rem);
}
.film-szczegoly .stack-sekcja:last-of-type{ padding-bottom: 0; }
/* Strony, które zaczynają się tekstem (a nie kadrem), potrzebują pod nim
   normalnego odstępu — inaczej pierwszy tytuł przykleja się do zdjęcia. */
.film-szczegoly .stack-sekcja--tekst:first-of-type{
  padding-top: clamp(1.75rem, 4vh, 2.75rem);
  padding-bottom: clamp(1.75rem, 4vh, 2.75rem);
}

/* kadr otwierający zachowuje własną proporcję — bez przycinania */
.film-hero{ width: 100%; height: auto; display: block; }
/* ekipa i rok: wiersze ciasno pod sobą, oddzielone od akapitów z nagrodami */
.film-metryka{ margin-bottom: 1.4rem !important; }
/* gdy metryka jest ostatnia w bloku, ten odstęp rozjeżdżał symetrię sekcji */
.film-metryka:last-child{ margin-bottom: 0 !important; }
/* zdjęcia z sekwencji stykają się krawędziami — bez przerw */
.film-kadry{ display: grid; gap: 0; }
/* Część grup na podstronie "Inne realizacje" stoi we wzorze parami,
   po dwa zdjęcia w rzędzie i też bez odstępów. */
.film-kadry--pary{ grid-template-columns: repeat(2, 1fr); }
/* Trzy kadry w rzędzie — inaczej niż pary, te mają między sobą odstęp,
   bo każde zdjęcie ma własne tło i bez przerwy zlewałyby się w jeden pas. */
/* Krótki podpis nadrukowany w lewym dolnym rogu kadru. Rośnie razem
   ze zdjęciem, więc na telefonie też nie ucieka poza róg. Delikatny cień
   ratuje czytelność, gdyby akurat pod napisem trafiło się światło sceny. */
.film-kadr-opis{ position: relative; margin: 0; }
.film-kadr-opis figcaption{
  position: absolute;
  left: clamp(0.5rem, 1.2vw, 0.9rem);
  bottom: clamp(0.35rem, 0.9vw, 0.7rem);
  color: #fff;
  font-style: italic;
  font-size: clamp(0.7rem, 1.5vw, 0.9rem);
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.film-kadry--trojka{
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 2vw, 1.5rem);
}
.film-kadry img,
.film-kadr{ width: 100%; height: auto; display: block; }
/* Zdjęcie, które mieści w sobie dwa ujęcia obok siebie (Maski), na całą
   szerokość ekranu robiło się jednym wielkim banerem. W kolumnie tekstu każde
   z ujęć ma tyle miejsca, ile miałoby jako osobne zdjęcie w parze. */
.stack-sekcja--kadr-maly{ padding-left: 0; padding-right: 0; }
.stack-sekcja--kadr-maly .stack-tresc{ max-width: none; }
.stack-sekcja--kadr-maly .stack-tresc > *{
  width: min(var(--container), calc(100% - 2 * var(--edge)));
  margin-inline: auto;
  /* Odstęp pod kadrem ma być taki sam jak margines po bokach. Procent
     w margin-bottom liczy się od szerokości rodzica, więc to dokładnie
     ta sama wartość, jaką zostawia wyśrodkowanie bloku. */
  margin-bottom: calc((100% - min(var(--container), 100% - 2 * var(--edge))) / 2);
}
/* Tytuł i opis nadrukowane na zdjęciu albo na karuzeli. Blok jest ustawiony
   dokładnie tak jak kolumna tekstu w zwykłych sekcjach: boczny padding sekcji
   plus wyśrodkowany kontener, więc lewa krawędź napisu trzyma tę samą linię. */
.film-nadruk{ position: relative; }
.film-nadruk-tekst{
  position: absolute;
  top: clamp(1rem, 3vh, 2.25rem);
  left: 0;
  right: 0;
  padding: 0 var(--edge);
  /* napis nie przechwytuje kliknięć — strzałki karuzeli pod spodem działają */
  pointer-events: none;
}
.film-nadruk-blok{ max-width: var(--container); margin: 0 auto; }
.film-nadruk-tekst h2{ margin-bottom: 0.4rem; }
.film-nadruk-tekst .film-metryka{ margin-bottom: 0 !important; }
/* jasny — biały napis na ciemnym kadrze; ciemny — na jasnym */
.film-nadruk-tekst--jasny h2,
.film-nadruk-tekst--jasny .film-metryka{ color: #fff; }
.film-nadruk-tekst--ciemny h2{ color: var(--ink); }
.film-nadruk-tekst--ciemny .film-metryka{ color: var(--ink-muted); }

/* Miniatura prowadząca do filmu na YouTube. To zwykły link, a nie osadzony
   odtwarzacz — strona nie dociąga przez to skryptów ani ciasteczek Google'a,
   a sama miniatura leży na naszym serwerze. */
.film-wideo{
  position: relative;
  display: block;
  max-width: 34rem;
  margin-top: 1.4rem;
  overflow: hidden;
}
/* Miniatura filmu i pierwszy kadr stoją obok siebie. Każdy dostaje tyle
   szerokości, ile wynosi jego proporcja, dzięki czemu oba mają równą
   wysokość bez docinania — miniatura jest 16:9, kadr 1.386:1. */
.film-wideo-para{ display: flex; gap: 0; margin-top: 1.4rem; }
/* min-width: 0 jest konieczne — domyślne "auto" bierze naturalną szerokość
   zdjęcia jako minimum i kadr zjada wtedy cały rząd, a miniatura ma 0 px. */
.film-wideo-para .film-wideo{ flex: 1.778 1 0; min-width: 0; max-width: none; margin-top: 0; }
.film-wideo-para > img{ flex: 1.386 1 0; min-width: 0; width: 100%; height: auto; display: block; }
.film-wideo img{ width: 100%; height: auto; display: block; transition: transform 0.35s ease; }
.film-wideo::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.film-wideo:hover img,
.film-wideo:focus-visible img{ transform: scale(1.03); }
.film-wideo:hover::after,
.film-wideo:focus-visible::after{ opacity: 0.18; }
/* białe kółko z trójkątem — czytelny znak, że to film */
.film-wideo-play{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 14px rgba(30, 43, 54, 0.3);
  z-index: 1;
}
.film-wideo-play::before{
  content: "";
  position: absolute;
  left: 56%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 0.6rem 0 0.6rem 1rem;
  border-color: transparent transparent transparent var(--ink);
}
.film-fot{
  margin: 0;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ink-muted);
}
/* Rząd rysunków: trzy równe kolumny bez odstępów — białe marginesy są
   już wewnątrz plików, więc dodatkowa przerwa rozstrzeliłaby je za bardzo. */
.film-rysunki{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
/* Wszystkie trzy komórki mają wysokość najwyższego rysunku, a obrazek mieści
   się w środku (object-fit: contain). Dzięki temu górna i dolna krawędź rzędu
   styka się ze zdjęciami nad i pod nim — bez tego niższe rysunki, wyśrodkowane
   w rzędzie, zostawiały ponad 100 px prześwitu. */
.film-rysunki img{ width: 100%; height: 100%; object-fit: contain; display: block; }

/* Na telefonie trzy rysunki obok siebie mają po ok. 110 px i napisy na nich
   przestają być czytelne — idą wtedy jeden pod drugim. Blok musi stać PO
   regule bazowej, bo specyficzność jest ta sama. */
@media (max-width: 760px){
  .film-rysunki,
  .film-kadry--trojka,
  .film-kadry--fala{ grid-template-columns: 1fr; }
  /* Sesja modowa zostaje w siatce 2x2, FALA schodzi do jednej kolumny. */
  /* Miniatura filmu wchodzi w ciąg zdjęć: pełna szerokość i zero przerwy do
     kolejnego kadru, żeby nie zostawała dziura między nią a zdjęciem pod spodem. */
  .film-wideo{
    max-width: none;
    /* ujemny margines zdejmuje boczny padding sekcji — miniatura staje
       równo z krawędziami zdjęć pod spodem */
    margin-left: calc(-1 * var(--edge));
    margin-right: calc(-1 * var(--edge));
  }
  .film-szczegoly .stack-sekcja--wideo{ padding-bottom: 0; }

  /* Rzeźba obraca się wyłącznie strzałkami — przesuwanie palcem jest
     wyłączone, więc kadr nie zatrzymuje się między ujęciami. Bez gestu
     strzałki muszą być widoczne od razu, bo na telefonie nie ma najechania. */
  .stack-karuzela-wrap--obrot .stack-karuzela{
    overflow-x: hidden;
    touch-action: pan-y;
  }
  .stack-karuzela-wrap--obrot .stack-karuzela-strzalka{
    opacity: 1;
    pointer-events: auto;
  }
  /* Miniatura i kadr obok siebie mają na telefonie po ok. 180 px — idą
     jedno pod drugim, od krawędzi do krawędzi. */
  .film-wideo-para{
    flex-direction: column;
    margin-left: calc(-1 * var(--edge));
    margin-right: calc(-1 * var(--edge));
  }
  /* w kolumnie proporcje nie mają sensu — każde wraca na swóją wysokość */
  .film-wideo-para .film-wideo,
  .film-wideo-para > img{ flex: 0 0 auto; }
  .film-wideo-para .film-wideo{ margin-left: 0; margin-right: 0; }

  /* Napis nadrukowany na zdjęciu jest na telefonie nieczytelny — kadr jest
     za mały, żeby tytuł i metryka miały pod sobą jednolite tło. Tekst
     wraca więc nad zdjęcie jako zwykły blok, w kolorach reszty strony. */
  .film-nadruk{ display: flex; flex-direction: column; }
  .film-nadruk-tekst{
    position: static;
    order: -1;
    padding: clamp(1.75rem, 4vh, 2.75rem) var(--edge) clamp(1.75rem, 4vh, 2.75rem);
  }
  .film-nadruk-tekst--jasny h2,
  .film-nadruk-tekst--ciemny h2{ color: var(--ink); }
  .film-nadruk-tekst--jasny .film-metryka,
  .film-nadruk-tekst--ciemny .film-metryka{ color: var(--ink-muted); }
}

.stack-tresc{
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
}

/* Rzedy zdjec od krawedzi do krawedzi: sekcja oddaje boczny padding,
   a jej tresc - ograniczenie szerokosci. Bez sztuczek na 100vw, wiec
   pasek przewijania nie wywoluje przewijania w poziomie. */
.stack-sekcja--pelna{ padding-left: 0; padding-right: 0; }
.stack-sekcja--pelna .stack-tresc{ max-width: none; }

/* Blok opisu pod hero na podstronach projektów, które nie mają okładki obok. */
.stack-opis{
  max-width: 72ch;
}
.stack-opis h2{ margin-bottom: 0.4rem; }
.stack-opis .stack-podtytul{ margin-bottom: 1.2rem; }
.stack-opis p{
  margin: 0 0 0.9rem;
  color: var(--ink-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* Pocztówki: kartki tuż pod paskiem, tytuł z wymiarami i opis pod nimi.
   Odstępy są oszczędne, żeby całość mieściła się na jednym ekranie. */
#pocztowki-szczegoly .stack-sekcja:first-of-type{
  padding-top: 0;
  padding-bottom: clamp(0.25rem, 1vh, 0.75rem);
}
#pocztowki-szczegoly .stack-sekcja:last-of-type{
  padding-top: clamp(0.75rem, 2vh, 1.25rem);
  padding-bottom: clamp(0.5rem, 1.5vh, 1.25rem);
}
/* margines ostatniego akapitu wychodzi poza blok i dokłada się do sekcji */
#pocztowki-szczegoly .stack-opis p:last-child{ margin-bottom: 0; }
#pocztowki-szczegoly .stack-opis .stack-podtytul{ margin-bottom: 0.75rem; }

.stack-hero-info{
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.stack-hero-info h1{ font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 0.6rem; }
.stack-hero-info .stack-podtytul{
  font-size: 0.9rem;
  font-style: italic;
  color: var(--ink-muted);
  line-height: 1.5;
}
.stack-hero-info img{
  width: 100%;
  height: auto;
  display: block;
}

/* Okładka Wioski sięga od paska do dolnej krawędzi okna — tak samo jak
   portret w "o mnie": o rozmiarze decyduje wysokość, nie szerokość kolumny.
   Drugi człon min() pilnuje, żeby na wysokim oknie okładka nie ścisnęła tekstu
   (plik ma 800x991 px, stąd przelicznik 991/800). */
#wioska-szczegoly .stack-sekcja:first-of-type{ padding-bottom: 0; }
#wioska-szczegoly .stack-hero-info{ grid-template-columns: minmax(0, 1fr) auto; }
#wioska-szczegoly .stack-hero-info img{
  --okladka-max-szer: calc(0.5 * (min(var(--container), 100vw) - 2 * var(--edge)));
  height: min(
    calc(100vh - var(--wysokosc-nav) - 0.5rem),
    calc(var(--okladka-max-szer) * 991 / 800)
  );
  width: auto;
}

.stack-grid-4{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.6rem, 1.5vw, 1.1rem);
}
.stack-grid-4 img{ width: 100%; height: auto; }

.stack-rzad-3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.6rem, 1.5vw, 1.1rem);
}
.stack-rzad-3 img{ width: 100%; height: auto; display: block; }

/* Rzędy detali (sekcje 3–5): zdjęcia mają nieco różne proporcje źródłowe,
   więc przy równej szerokości ich wysokości by się rozjeżdżały. Wspólne
   proporcje + object-fit: cover wyrównują dolną krawędź rzędu; przycięcie
   nie przekracza ~2,5%, bo źródła są do siebie zbliżone. */
.stack-rzad-3.rzad-rowny img{
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
}
.stack-rzad-3.rzad-rowny.poziomy img{
  aspect-ratio: 4 / 3;
}
.stack-rzad-3.rzad-rowny.kwadratowy img{
  aspect-ratio: 1 / 1;
}


/* Sekcja 8: dwa ujęcia tego samego układu obok siebie — wspólne proporcje,
   żeby dolne krawędzie się nie rozjeżdżały. */
.stack-porownanie{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.6rem, 1.5vw, 1.1rem);
}
.stack-porownanie img{
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.stack-proces-tekst{
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 72ch;
  margin: 0 auto 1.1rem;
}
.stack-proces-naglowek{
  text-align: center;
  margin-bottom: 0.5rem;
}

.stack-karuzela-wrap{
  position: relative;
}
.stack-karuzela{
  overflow-x: auto;
  display: flex;
  /* slajdy są kadrowane do 2:1; wyśrodkowanie zabezpiecza, gdyby doszedł inny kadr */
  align-items: center;
  gap: clamp(0.6rem, 1.5vw, 1.1rem);
  scroll-snap-type: x mandatory;
  /* pasek przewijania ukryty — slajdy zmieniają się same */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.stack-karuzela::-webkit-scrollbar{ display: none; }
/* Strzalki sa dodatkiem do pokazu - wychodza dopiero pod kursorem.
   pointer-events wylaczone w spoczynku, zeby niewidoczny przycisk
   nie lapal klikniec w zdjecie. */
.stack-karuzela-strzalka{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--paper-deeper);
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(30,43,54,0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.stack-karuzela-wrap:hover .stack-karuzela-strzalka,
.stack-karuzela-strzalka:focus-visible{
  opacity: 1;
  pointer-events: auto;
}
/* w trybie obracania rzeźby strzalka znika na tym końcu, na którym
   nie ma już dokąd iść */
.stack-karuzela-strzalka[hidden]{ display: none; }
.stack-karuzela-strzalka.lewo{ left: 0.75rem; }
.stack-karuzela-strzalka.prawo{ right: 0.75rem; }

/* Rzeźba osiołka ma być widoczna w całości bez przewijania: kadr nie może
   być wyższy niż to, co zostaje pod paskiem nawigacji. Szerokość wynika
   z proporcji zdjęcia, więc nic nie jest docinane — na niskim laptopie
   kadr po prostu robi się węższy niż kolumna tekstu. */
@media (min-width: 761px){
  .stack-karuzela-wrap--obrot{
    max-width: calc((100vh - var(--wysokosc-nav) - 4rem) * var(--kadr));
    margin-inline: auto;
  }
}

.stack-karuzela img{
  scroll-snap-align: center;
  /* każde zdjęcie wypełnia szerokość sekcji, tak jak hero */
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  display: block;
  /* Wszystkie slajdy mają tę samą wysokość, żeby karuzela nie skakała przy zmianie
     zdjęcia. --kadr to proporcja najszerszego ujęcia w danej karuzeli, więc
     pozostałe są docinane tylko od góry i od dołu, nigdy po bokach. */
  aspect-ratio: var(--kadr, auto);
  object-fit: cover;
}
@media (max-width: 900px){
  .stack-hero-info{ grid-template-columns: 1fr; }
  /* Reguła z id-em wyżej jest mocniejsza niż .stack-hero-info, więc jedna
     kolumna musi być powtórzona z tą samą specyficznością — bez tego kolumna
     tekstu ściskała się na telefonie do 19 px. */
  #wioska-szczegoly .stack-hero-info{ grid-template-columns: 1fr; }
  /* okładka nie może zająć całego ekranu, bo tekst zszedłby
     poniżej krawędzi — dostaje własny, niższy limit i idzie na środek */
  #wioska-szczegoly .stack-hero-info img{ height: min(55vh, 22rem); margin: 0 auto; }
  .stack-grid-4{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  /* pięć elementów w pasku wymaga mniejszej typografii i niższego paska */
  :root{ --wysokosc-nav: 3.5rem; }
  /* przy tej szerokości połowa paska nie pomieści przycisków —
     logo wraca do naturalnej szerokości; przyciski siedzą już w menu hamburgera */
  .logo{ flex: 0 0 auto; margin-right: auto; }
  nav a, nav .navlink{ font-size: 0.72rem; letter-spacing: 0.01em; }
  .logo-img{ height: 1.9rem; }
  /* porównanie obok siebie robi się nieczytelne poniżej ~170 px na kadr */
  .stack-porownanie{ grid-template-columns: 1fr; }
}

/* ===================================================================
   SCENOGRAFIA — przełącznik podstron i banery realizacji
   =================================================================== */
/* Przełącznik siedzi tuż pod paskiem — dlatego podstrony scenografii nie biorą
   wspólnego górnego odstępu .page, a sam przełącznik ma tylko tyle miejsca,
   żeby pigułki nie dotykały paska. */
#scenografia,
#doswiadczenie{ padding-top: 0; }
.sc-przelacznik{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(0.6rem, 1.5vw, 1.25rem);
  /* zero u góry — pigułki mają zaczynać się zaraz pod paskiem */
  padding: 0 var(--margines-banery) clamp(1.25rem, 3vh, 2rem);
}
.sc-przycisk{
  flex: 0 1 clamp(11rem, 25vw, 25rem);
  padding: 0.8rem 1.5rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.sc-przycisk:hover, .sc-przycisk:focus-visible{ border-color: var(--accent-warm); }
/* kolorowy = podstrona, na której właśnie jesteśmy */
.sc-przycisk[aria-current="page"]{
  border-color: var(--accent-warm);
  color: var(--accent-warm);
  cursor: default;
}

/* Szachownica: zerowe odstępy w pionie i w poziomie sprawiają, że kolumna
   zdjęcia ma dokładnie połowę szerokości rzędu — dzięki temu zdjęcia
   z sąsiednich rzędów stykają się rogami. Tekst dostaje własny padding,
   bo bez niego dotykałby krawędzi zdjęcia. */
#scenografia .banery,
#pop-up .banery{ gap: 0; }
#scenografia .baner,
#pop-up .baner{
  gap: 0;
  /* 46.4rem = 58rem pomniejszone o 20% — na ekranie mieści się więcej par */
  max-width: min(100%, 46.4rem);
}
/* Procent w paddingu elementu siatki liczy się od szerokości jego pola,
   czyli od szerokości kafelka — 10% z każdej strony. */
#scenografia .baner-tekst,
#pop-up .baner-tekst{ padding: 10%; }

/* tytuł realizacji siedzi u góry kafelka, nie w jego środku (jak we wzorze);
   odstęp od górnej krawędzi daje już wspólny padding 10% */
.sc-tekst{ justify-content: flex-start; }
.sc-tekst .baner-podtytul{ font-style: normal; }
/* rodzaj realizacji nad rokiem (serial, film krótkometrażowy...) */
.sc-opis{
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-muted);
}
.sc-lista{
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--ink-muted);
}

@media (max-width: 760px){
  /* w małym kafelku tytuł lepiej wygląda na środku niż u góry */
  .sc-tekst{ justify-content: center; }
  /* dwie pigułki nie mieszczą się obok siebie — niech zajmą całą szerokość */
  .sc-przycisk{ flex: 1 1 100%; }
  /* przycisk z adresem na środku kolumny, a nie przy lewej krawędzi */
  .mail-stempel{ display: flex; width: fit-content; margin-left: auto; margin-right: auto; }

  /* Wioska: okładka nad tekstem, a detale jeden pod drugim i bez kadrowania */
  #wioska-szczegoly .stack-hero-info img{ order: -1; }
  #wioska-szczegoly .stack-grid-4,
  #wioska-szczegoly .stack-rzad-3{ grid-template-columns: 1fr; }
  #wioska-szczegoly .stack-rzad-3.rzad-rowny img{
    aspect-ratio: auto;
    object-fit: unset;
    height: auto;
  }

  /* Doświadczenie: funkcja zawsze od nowej linijki, a tytuł z reżyserem
     ma się zmieścić w jednej — stąd mniejszy stopień i ciaśniejsze litery. */
  /* selektor z id-em, bo ten blok @media leży przed regułą bazową .cv-lista
     i przy równej specyficzności to ona by wygrała */
  #doswiadczenie .cv-lista{ font-size: 0.75rem; letter-spacing: -0.015em; line-height: 1.55; }
  .cv-rola{ display: block; }
}

/* ===================================================================
   SCENOGRAFIA — doświadczenie (lista chronologiczna)
   =================================================================== */
.cv{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--margines-banery) clamp(3rem, 8vh, 5rem);
}
.cv-naglowek{
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 600;
  color: var(--ink);
  margin: clamp(2rem, 5vh, 3rem) 0 clamp(0.75rem, 2vh, 1.15rem);
}
.cv > .cv-naglowek:first-child{ margin-top: 0; }
.cv-rok{
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 0 clamp(0.75rem, 2vw, 1.75rem);
  margin-bottom: clamp(1rem, 2.5vh, 1.6rem);
}
.cv-rok-etykieta{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--ink);
}
.cv-lista{
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--ink-muted);
}
/* tytuły realizacji kursywą */
.cv-lista em{ font-style: italic; }
/* pełniona funkcja — jaśniejszy brąz, żeby odcinała się od reszty wiersza */
.cv-rola{ color: var(--ink-jasny); }

@media (max-width: 560px){
  /* rok nad listą, nie obok — inaczej zostaje na tekst ok. 200 px */
  .cv-rok{ grid-template-columns: 1fr; gap: 0.2rem; }
}

/* ===================================================================
   WŁASNE PROJEKTY — galeria justowana
   =================================================================== */
.wp-naglowek{
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  font-weight: 600;
  color: var(--ink);
  /* równe marginesy: tytuł stoi dokładnie pośrodku przerwy między grupami */
  margin: clamp(3.5rem, 8.5vh, 6.5rem) 0;
}
/* pierwszy nagłówek nie rozdziela grup, tylko otwiera stronę — bliżej paska */
#wlasne-szczegoly .wp-naglowek:first-of-type{ margin-top: clamp(1.25rem, 3.5vh, 2.25rem); }

.wp-rzad{
  display: flex;
  /* jeden kanał dla wszystkich odstępów w grupie */
  gap: var(--wp-kanal);
  margin-bottom: var(--wp-kanal);
}
.wp-rzad img{
  /* szerokość proporcjonalna do kadru — dzięki temu wszystkie zdjęcia
     w rzędzie wychodzą na tę samą wysokość, a rząd wypełnia szerokość */
  flex-grow: var(--proporcje);
  flex-shrink: 1;
  flex-basis: 0;
  min-width: 0;
  width: auto;
  display: block;
  /* zdjęcia wczytywane z serwera nie są przycięte, więc kadr wymuszamy tutaj —
     bez tego rzędy w "domkach dla lalek" straciłyby równe wysokości */
  aspect-ratio: var(--proporcje);
  height: auto;
  object-fit: cover;
}
/* strona kończy się na dolnej krawędzi ostatnich zdjęć */
#wlasne-szczegoly .wp-rzad:last-of-type{ margin-bottom: 0; }

@media (max-width: 700px){
  /* trzy kadry obok siebie mają na telefonie ~110 px — czytelniej jedno pod drugim,
     a zasada "rząd wypełnia szerokość" nadal obowiązuje */
  .wp-rzad{ flex-wrap: wrap; }
  .wp-rzad img{ flex-basis: 100%; flex-grow: 0; }
}

/* util */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* Elementy klikalne są teraz linkami (osobne pliki HTML zamiast jednej strony),
   więc trzeba zdjąć podkreślenie i wyrównać tekst tak, jak robił to <button>. */
a.home-kafel,
a.baner-zdjecie,
a.sc-przycisk{ text-decoration: none; }
a.baner-zdjecie{ display: block; }
a.sc-przycisk{ text-align: center; }