/* ============================================================
   JACKOWO — muzeum.css
   Konfigurator zwiedzania. Ładowany tylko przez muzeum.html.
   ============================================================ */

.konfig{display:grid;gap:var(--sp-6);align-items:start}
@media(min-width:960px){
  /* minmax(0,…), nie fr — inaczej długie etykiety rozpychają siatkę poza kontener */
  .konfig{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--sp-7)}
}

.konfig__form{max-width:none;margin:0}

.konfig__grupa{border:0;padding:0;margin:0}
.konfig__legenda{
  padding:0;margin-bottom:var(--sp-3);
  font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;
  font-weight:600;color:var(--c-text-2);
}

/* ---------- wybór rodzaju zwiedzania ---------- */
.konfig__opcje{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

.opcja{position:relative;display:block;cursor:pointer}
.opcja input{
  position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:pointer;
}
.opcja__tresc{
  display:flex;flex-direction:column;gap:2px;align-items:center;text-align:center;
  min-height:var(--tap);padding:var(--sp-4) var(--sp-3);
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);
  transition:border-color .2s var(--ease),background .2s var(--ease),
             box-shadow .2s var(--ease),transform .2s var(--ease);
}
.opcja__tresc strong{font-size:var(--fs-sm);color:var(--c-text)}
.opcja__tresc small{font-size:12px;color:var(--c-text-2)}

.opcja:hover .opcja__tresc{border-color:var(--c-blue);transform:translateY(-2px)}
.opcja input:checked + .opcja__tresc{
  border-color:var(--c-blue);background:var(--c-blue-lt);
  box-shadow:inset 0 0 0 1px var(--c-blue);
}
.opcja input:checked + .opcja__tresc strong{color:var(--c-blue-dk)}
/* obrys fokusa przenosimy na widoczny kafelek — sam input jest przezroczysty */
.opcja input:focus-visible + .opcja__tresc{outline:3px solid var(--c-blue);outline-offset:2px}

/* ---------- panel podsumowania ---------- */
.konfig__panel{
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--sh-1);
}
@media(min-width:960px){.konfig__panel{position:sticky;top:calc(var(--hdr-h) + var(--sp-4))}}
.konfig__panel h3{margin-bottom:var(--sp-4)}

.konfig__lista{margin:0 0 var(--sp-4);display:grid;gap:0}
.konfig__lista > div{
  display:flex;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-3) 0;border-bottom:1px solid var(--c-border);font-size:var(--fs-sm);
}
.konfig__lista > div:last-child{border-bottom:0}
.konfig__lista dt{color:var(--c-text-2);margin:0}
.konfig__lista dd{margin:0;font-weight:600;text-align:right;color:var(--c-text)}

.konfig__uwaga{
  padding:var(--sp-3);border-radius:var(--r-sm);
  background:var(--c-blue-lt);margin-bottom:var(--sp-4);
}

@media(prefers-reduced-motion:reduce){
  .opcja:hover .opcja__tresc{transform:none}
}

/* ============================================================
   „WIECZERZA PAŃSKA" — najmocniej wyeksponowany blok podstrony

   Pas na pełną szerokość okna: kadr po jednej stronie, metryczka po drugiej.
   Nie używamy .hero--pelny, bo tamten wariant ma panel o stałej proporcji
   i własne minimalne wysokości — tutaj rządzi zdjęcie.
   ============================================================ */
.wieczerza{
  display:grid;grid-template-columns:minmax(0,1fr);
  align-items:center;gap:var(--sp-6);
}
@media(min-width:900px){
  .wieczerza{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--sp-8)}
}
.wieczerza__kadr{background:#141210;overflow:hidden}
/* <picture> musi dostać height:100% — inaczej height:100% na <img> nie ma się
   do czego odnieść. Ta sama pułapka co przy .hero__media picture. */
.wieczerza__kadr picture{display:block;width:100%;height:100%}
.wieczerza__kadr img{width:100%;height:auto;display:block}
.wieczerza__opis{padding:var(--sp-6) var(--gutter)}
@media(min-width:900px){.wieczerza__opis{padding:var(--sp-7) var(--sp-7) var(--sp-7) 0}}
.wieczerza__opis h2{margin-bottom:var(--sp-3)}

/* metryczka eksponatu — dane przepisane z tabliczki muzealnej */
.metryczka{margin:var(--sp-5) 0 0;display:grid;gap:var(--sp-3)}
.metryczka > div{
  display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:var(--sp-3);
  padding-top:var(--sp-3);border-top:1px solid var(--c-border);
}
.metryczka dt{
  font-size:var(--fs-label);letter-spacing:.07em;text-transform:uppercase;
  font-weight:600;color:var(--c-brown);margin:0;
}
.metryczka dd{margin:0;color:var(--c-text)}

/* ============================================================
   ULGI BILETOWE — lista pod cennikiem
   ============================================================ */
.ulgi{
  list-style:none;margin:var(--sp-6) auto 0;padding:0;
  max-width:720px;display:grid;gap:var(--sp-3);
}
@media(min-width:560px){.ulgi{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ulgi li{
  display:flex;flex-direction:column;gap:2px;
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);
}
.ulgi strong{font-size:var(--fs-sm)}
.ulgi span{font-size:var(--fs-sm);color:var(--c-text-2)}

/* ============================================================
   WYCENA W KONFIGURATORZE

   Kwota jest największym elementem panelu, bo po nią sięga wzrok.
   Nota pod spodem niesie zastrzeżenia (ulga „do 50%", dzieci gratis) —
   musi być czytelna, a nie schowana szarością na granicy AA.
   ============================================================ */
.konfig__kwota{
  margin:var(--sp-4) 0 0;padding-top:var(--sp-4);
  border-top:1px solid var(--c-border);
  display:flex;flex-direction:column;gap:var(--sp-1);
}
.konfig__kwota:empty{display:none}
.konfig__kwota-etykieta{
  font-size:var(--fs-label);letter-spacing:.07em;text-transform:uppercase;
  font-weight:600;color:var(--c-brown);
}
.konfig__kwota-suma{
  font-family:var(--f-head);font-weight:600;line-height:1.1;
  font-size:clamp(1.5rem,1.3rem + .9vw,2rem);color:var(--c-green);
}
.konfig__kwota-nota{font-size:var(--fs-sm);color:var(--c-text-2)}

/* ============================================================
   WYSTAWA BURSZTYNOWA — jedyna ciemna sekcja w całym serwisie.

   DLACZEGO CIEMNA: siedem z ośmiu rzeźb sfotografowano na czarnym
   aksamicie. Zmierzona jasność narożników: 0, 3, 21, 31, 55 na 255.
   Na kremowym tle każdy kafel był czarnym prostokątem, który walczył
   ze stroną i spychał bursztyn na drugi plan. Na ciemnym tle tło kadru
   zlewa się z sekcją — zostaje sam świecący eksponat.

   DLACZEGO NIE BENTO: kafle bento wymuszają 4/3, a te zdjęcia mają
   proporcje od 0,67 do 1,50. Koń (1296×1600) był przycinany w poprzek.
   Kolumny CSS pozwalają każdej rzeźbie zachować własny kształt.
   ============================================================ */
.section--bursztyn{
  background:var(--c-noc);
  color:var(--c-noc-tx);
}
.section--bursztyn h2,
.section--bursztyn h3{color:var(--c-noc-tx)}
.section--bursztyn .eyebrow{color:var(--c-amber)}
.section--bursztyn .lead,
.section--bursztyn .muted{color:var(--c-noc-tx-2)}
/* podkreślenie nagłówka sekcji — na ciemnym tle zieleń ginie, bursztyn nie */
.section--bursztyn .section__head.is-visible h2::after{background:var(--c-amber)}

/* --- siatka kolumnowa: każdy eksponat zachowuje własne proporcje --- */
.bursztyny{columns:1; column-gap:var(--sp-5); margin-top:var(--sp-7)}
@media(min-width:600px){ .bursztyny{columns:2} }
@media(min-width:1000px){ .bursztyny{columns:3; column-gap:var(--sp-6)} }

.bursztyn{
  break-inside:avoid;
  margin:0 0 var(--sp-5);
  display:flow-root;              /* margines figcaption nie ucieka poza figure */
}
.bursztyn__kadr{
  display:block; overflow:hidden;
  border-radius:var(--r-md);
  background:var(--c-noc-2);
  border:1px solid var(--c-noc-linia);
}
/* Bez height:100% i bez aspect-ratio — o wysokości decyduje samo zdjęcie.
   To jest cały sens tej sekcji, więc nie dopisuj tu kadrowania. */
.bursztyn__kadr img{
  display:block; width:100%; height:auto;
  transition:transform .5s var(--ease);
}
.bursztyn:hover .bursztyn__kadr img{transform:scale(1.03)}

.bursztyn__nazwa{
  font-size:var(--fs-sec-h3); margin:var(--sp-4) 0 var(--sp-1);
  color:var(--c-noc-tx);
}
.bursztyn__opis{
  font-size:var(--fs-sm); color:var(--c-noc-tx-2); margin:0;
}

@media(prefers-reduced-motion:reduce){
  .bursztyn__kadr img{transition:none}
  .bursztyn:hover .bursztyn__kadr img{transform:none}
}

/* Portret właściciela — mniejszy niż zwykła ramka.
   To portret jednej osoby, nie kadr wystawy: na pełną szerokość kolumny
   robił się z tego billboard. Klient poprosił o pomniejszenie. */
.frame.portret{max-width:560px; margin-inline:auto}

/* ============================================================
   RAMY MUZEALNE — passe-partout wokół zdjęć

   Życzenie klienta: ramki jak na starym papierze. Realizacja jest
   celowo POWŚCIĄGLIWA, bo brief tej podstrony mówi wprost:
   „Nie dokładaj tekstur ani filtrów udających zniszczenie — sam krój
   wystarczy, a strona ma zostać czytelna".

   Dlatego: prawdziwa rama (passe-partout z kreską i cieniem), a NIE
   plama, przetarcie ani podarty brzeg. Zdjęcie wygląda jak oprawione
   na ścianie muzeum, a nie jak zniszczony skan. Kolor --c-bg-sand jest
   w tokens.css opisany dokładnie do tego zastosowania.

   Kąt prosty zamiast zaokrągleń: rama muzealna nie ma promienia.
   ============================================================ */
body.p-muzeum .frame{
  padding:clamp(12px, 2.4vw, 26px);
  /* Tekstura WYGENEROWANA w projekcie (scratchpad/pergamin.py): szum
     fraktalny -> rozmycie -> sepia -> przyciemnione brzegi. Nie jest to
     zdjecie stockowe. Klient przyslal wzory ze znakami wodnymi
     pngtree.com i dreamstime — tych nie wolno uzyc bez licencji. */
  background:var(--c-bg-sand) url("../img/brand/pergamin.jpg") center/cover;
  border:1px solid var(--c-border-sand);
  border-radius:2px;
  box-shadow:var(--sh-2);
}
/* Kreska passe-partout — cienka linia między passe-partout a odbitką.
   To ona daje wrażenie oprawy; bez niej zdjęcie wygląda jak wklejone. */
body.p-muzeum .frame > picture,
body.p-muzeum .frame > a > picture{
  box-shadow:0 0 0 1px var(--c-brown-lt);
}
body.p-muzeum .frame figcaption{
  margin-top:var(--sp-3); margin-bottom:0;
  color:var(--c-text-2);
}

/* ============================================================
   STARE FOTOGRAFIE W RAMACH (28.08.2026, prośba klienta)

   Strona jest opowieścią spisaną na pergaminie, a zdjęcia wiszą w niej
   jak stare fotografie w oprawach: pergaminowa mata, cienka ciemna
   ramka, złota linia passe-partout i delikatna sepia, która schodzi
   po najechaniu — zdjęcie „ożywa” wzięte do ręki. Wcześniejsze
   narożniki fotograficzne ustąpiły linii oprawy: rama i narożniki
   naraz to dwa języki. Żaden efekt nie udaje zniszczenia i nie jest
   teksturą — zasada briefu tej podstrony trzyma.
   ============================================================ */
body.p-muzeum .plate{
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;          /* narożniki i cień odbitki nie mogą być ucięte */
}

body.p-muzeum .plate__media{
  position:relative;
  padding:10px;              /* równa mata oprawy, nie margines odbitki */
  background:var(--c-krem-odbitki);
  border:1px solid rgba(74,56,30,.55);
  border-radius:0;           /* stare ramy mają ostre rogi */
  box-shadow:0 1px 2px rgba(58,44,26,.13), 0 12px 24px rgba(58,44,26,.14);
  transform:rotate(var(--kat, 0deg));
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
body.p-muzeum .plate__media picture{box-shadow:0 0 0 1px rgba(92,69,38,.22)}

/* Złota linia passe-partout tuż przy ramce — to ona robi „oprawę”.
   Jeden pseudo-element, zero plików. */
body.p-muzeum .plate__media::after{
  content:"";
  position:absolute;
  inset:4px;
  pointer-events:none;
  z-index:2;
  border:1px solid rgba(146,111,55,.5);
}

/* Kąt zależy od miejsca w rzędzie, więc odbitki nie leżą równo,
   ale też nie losowo: wzór powtarza się co cztery i czyta się jak
   ręczne układanie, a nie jak usterka. */
/* Obrotu NIE MA. Odbitki leżą równo, w jednej linii. To on sprawiał,
   że plansza wyglądała na rozrzuconą, a nie na ułożoną. Zmienna zostaje,
   bo trzymają ją stosy przekładkowe, gdzie przekrzywienie ma sens. */

/* Po najechaniu odbitka prostuje się i unosi, jakby wziąć ją do ręki.
   Swoistość musi być wyższa niż .plate:hover z interakcje.css, bo ten
   plik wczytuje się PO muzeum.css. Stamtąd przejmujemy ruch: całego
   kafla nie ruszamy, rusza się sama odbitka. */
body.p-muzeum .plate:hover{transform:none; box-shadow:none}
body.p-muzeum .plate:hover .plate__media,
body.p-muzeum .plate:focus-within .plate__media{
  transform:rotate(0deg) translateY(-6px) scale(1.03);
  box-shadow:0 3px 6px rgba(58,44,26,.16), 0 26px 46px rgba(58,44,26,.22);
  z-index:3;
}
/* Powiększenie samego zdjęcia w środku wyłączamy: dwa ruchy naraz
   (odbitka + zdjęcie w niej) czytają się jak drganie. */
body.p-muzeum .plate:hover .plate__media img{transform:none}

/* Delikatna sepia jak na starej fotografii; po najechaniu schodzi
   i eksponat wraca do prawdziwych kolorów. Wartość celowo niska —
   ton, nie filtr; zdjęć eksponatów nie wolno przekłamywać. */
body.p-muzeum .plate__media img{
  filter:sepia(.18) saturate(.9);
  transition:filter .4s var(--ease), transform .4s var(--ease);
}
body.p-muzeum .plate:hover .plate__media img,
body.p-muzeum .plate:focus-within .plate__media img{filter:none}
/* Podpisy kursywą, jak odręczne opisy pod fotografiami. */
body.p-muzeum .plate figcaption{font-style:italic}

/* Zdjęcia w stosach mówią tym samym językiem co te w siatkach. */
body.p-muzeum .przekladka__foto picture,
body.p-muzeum .przekladka__foto img{border-radius:1px}
body.p-muzeum .przekladka__foto{
  padding:9px 9px 12px;
  background:var(--c-krem-odbitki);
  box-shadow:0 1px 2px rgba(58,44,26,.13), 0 14px 26px rgba(58,44,26,.16);
}

/* Zasada fail-safe: kto prosi o brak ruchu, dostaje odbitki ułożone
   równo i bez animacji. */
@media(prefers-reduced-motion:reduce){
  body.p-muzeum .plate__media{transform:none; transition:none}
  body.p-muzeum .plate:hover .plate__media,
  body.p-muzeum .plate:focus-within .plate__media{transform:none}
}

/* Wystawa bursztynowa NIE dostaje albumu. Eksponaty sfotografowano
   na czarnym aksamicie i wiszą na ciemnym pasie; biała odbitka
   zrobiłaby wokół nich jasną obwódkę i zabiła cały efekt. To jedyny
   rozdział, który ma wyglądać inaczej niż reszta. */
body.p-muzeum .section--bursztyn .plate__media{
  background:none; box-shadow:none; padding:0; transform:none;
  border:0; border-radius:var(--r-md);
}
body.p-muzeum .section--bursztyn .plate__media::after{content:none}
body.p-muzeum .section--bursztyn .plate__media img{filter:none}

/* Trzy kolumny zamiast czterech. Stary komentarz mówił, że kafle
   „mają być drobne", ale klient prosił odwrotnie: żeby eksponaty były
   widoczne i strona bardziej zjawiskowa. Trzy kolumny dają odbitki
   o połowę większe, a poszarpany ostatni rząd w albumie nie razi,
   tylko wygląda na ułożony ręcznie. */
body.p-muzeum{--cols-plate:3}

/* Wystawa bursztynowa ZOSTAJE BEZ RAM. Eksponaty sfotografowano
   na czarnym aksamicie i stoją na ciemnym pasie — piaskowa rama
   robiłaby wokół nich jasną obwódkę i niszczyła cały efekt. */
body.p-muzeum .section--bursztyn .frame{
  padding:0; background:none; border:0; box-shadow:none;
}

/* ============================================================
   PODROZDZIAŁ WYSTAWY — .wystawa

   Cztery zbiory (PRL, motoryzacja, makiety, kolekcje) stoją w jednym
   rozdziale zamiast w czterech osobnych sekcjach. Wcześniej każdy miał
   własny nagłówek drugiego stopnia i 150–200 znaków tekstu, przez co
   strona rozpadała się na kawałki.

   Kreska nad podrozdziałem zastępuje granicę sekcji: oddziela, ale nie
   rozbija strony na osobne ekrany.
   ============================================================ */
.wystawa + .wystawa{
  margin-top:var(--sp-9);
  padding-top:var(--sp-8);
  border-top:1px solid var(--c-border-sand);
}
.wystawa__glowa{
  max-width:62ch;
  margin:0 auto var(--sp-6);
  text-align:center;
}
.wystawa__glowa h3{
  font-size:var(--fs-h3);
  margin:var(--sp-1) 0 var(--sp-3);
}
.wystawa__glowa p:not(.eyebrow){
  color:var(--c-text-2);
  margin:0;
}

/* ============================================================
   OPOWIEŚĆ NA PERGAMINIE — podstrona muzeum

   POMIAR, KTÓRY WYZNACZYŁ ROZWIĄZANIE: tekst położony wprost na
   teksturze ma w jej najciemniejszych miejscach kontrast 3,29,
   a tekst pomocniczy 1,33 — przy progu 4,5. Dlatego pergamin jest
   PODŁOŻEM, a treść leży na rozjaśnionej warstwie.

   PERGAMIN MALUJEMY RAZ, NA BODY. Wcześniej robiła to każda sekcja
   osobno przez center/cover, więc każda pokazywała inny wycinek
   tekstury: na styku dwóch sekcji wzór startował od nowa i powstawał
   widoczny poziomy pasek. Teraz sekcja kładzie tylko półprzezroczystą
   warstwę, bez własnego obrazka — nie ma czego zszywać.
   ============================================================ */
body.p-muzeum{
  background:var(--c-bg-warm) url("../img/brand/pergamin.jpg") center top / cover fixed;
  /* atrament, nie czerń — ciepły i przygaszony, jak wyblakły zapis */
  --c-text:var(--c-atrament);
  --c-text-2:var(--c-atrament-2);
  --c-text-3:var(--c-atrament-3);
}

/* Warstwa pod treścią. Ciemne rozdziały wyłączone przez :not(), a nie
   nadpisane później — inaczej reguła z :nth-of-type ma wyższą swoistość
   i wygrywa z .section--bursztyn, rozjaśniając akurat tę sekcję, która
   ma być ciemna. */
/* 27.08.2026, prosba klienta o SPOJNIEJSZE tlo: pas nie zalezy juz
   od POZYCJI sekcji (:nth-of-type dawal zebre - kazda sasiednia para
   miala inny odcien), tylko od KLASY. --tint to jasny pergamin,
   --sand to cieplejszy pas dla calego bloku ekspozycji (wystawy stale,
   skansen, warsztat, Z ekspozycji jako jeden ciag). Zmiany tla
   zachodza wylacznie miedzy blokami tematycznymi. */
body.p-muzeum .section:not(.section--bursztyn):not(.section--noc){
  background:rgba(250,245,231,.78);
}
body.p-muzeum .section--sand:not(.section--bursztyn):not(.section--noc){
  background:rgba(244,236,216,.80);
}

/* Ślad starego druku: litery odrobinę rozstrzelone, a nagłówki dostają
   ledwie widoczne rozmycie krawędzi — tak jak atrament wsiąka w papier.
   Cień ma 0,4 px i kolor samych liter, więc odbiera im cyfrową ostrość,
   ale niczego nie rozmazuje. Kontrast zostaje bez zmian. */
body.p-muzeum main{letter-spacing:.006em}
body.p-muzeum main h1,
body.p-muzeum main h2,
body.p-muzeum main h3{
  letter-spacing:.014em;
  text-shadow:0 0 .4px currentColor;
}

/* --- NAPISY DO ŚRODKA --- */
body.p-muzeum .section__head{text-align:center}
body.p-muzeum .section__head > *{margin-inline:auto}
body.p-muzeum .section__head .lead,
body.p-muzeum .section__head p{max-width:62ch}
body.p-muzeum .section__head.is-visible h2::after{margin-inline:auto}
body.p-muzeum .wystawa__glowa{text-align:center}
body.p-muzeum .wystawa__glowa > *{margin-inline:auto;max-width:62ch}

/* Inicjał — pierwsza litera opowieści, jak w rękopisie.
   BEZ float. Litera wyciągnięta floatem wymusza wyrównanie akapitu do lewej,
   a nagłówki mają stać na środku. Sama powiększona pierwsza litera trzyma
   środek i nadal czyta się jak inicjał. */
.opowiesc::first-letter{
  font-family:var(--f-head-muzeum);
  font-size:2em;
  line-height:1;
  color:var(--c-brown);
}
.section--bursztyn .opowiesc::first-letter,
.section--noc .opowiesc::first-letter{color:var(--c-amber)}



/* Duża galeria idzie na cztery kolumny: dziesięć kadrów w trzech
   kolumnach robiło cztery rzędy i 1280 px wysokości. */
@media(min-width:900px){
  body.p-muzeum #galeria-ekspozycja .plates,
  body.p-muzeum .plates--gesta{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ============================================================
   UKŁAD SYMETRYCZNY

   Poprzednia wersja justowała rzędy: kadry miały różne szerokości,
   a ostatni rząd kończył się tym, co zostało — przy pięciu zdjęciach
   wychodził rząd trzech i samotny kadr na 53% szerokości. To czyta się
   jak ciąg, a nie jak kompozycja.

   Zasada teraz: wszystkie kafle IDENTYCZNE, rzędy PEŁNE, a niepełny
   ostatni rząd zostaje WYŚRODKOWANY. Wyśrodkowana reszta jest
   symetryczna, dosunięta do lewej nie jest.

   Liczba kolumn siedzi w zmiennej --kol, dobranej do liczby zdjęć
   w danej siatce, żeby rzędy domykały się same: 4 zdjęcia w 4 kolumnach,
   5 w 5, 6 w 3, 10 w 5.
   ============================================================ */
body.p-muzeum .plates{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;   /* to ono centruje niepełny ostatni rząd */
  gap:var(--odstep, 12px);
  max-width:none;
  grid-template-columns:none;
}

body.p-muzeum .plates > .plate{
  --odstep:12px;
  width:calc((100% - (var(--kol, 4) - 1) * var(--odstep)) / var(--kol, 4));
  aspect-ratio:4/3;
  height:auto;
  flex:none;
  position:relative;
  margin:0;
  background:none;
  border:0;
  border-radius:0;           /* stara rama ma ostre rogi */
  overflow:hidden;
  box-shadow:0 1px 3px rgba(58,44,26,.18), 0 10px 22px rgba(58,44,26,.12);
}

/* STARA RAMKA (28.08.2026, prośba klienta): pergaminowa mata,
   ciemna ramka i złota linia oprawy — fotografie wiszą jak
   w gablotach starego muzeum. */
body.p-muzeum .plates > .plate .plate__media{
  height:100%;
  padding:8px;
  background:var(--c-krem-odbitki);
  box-shadow:none;
  transform:none;
  border:1px solid rgba(74,56,30,.55);
}
body.p-muzeum .plates > .plate .plate__media::after{
  content:"";
  position:absolute;
  inset:3px;
  pointer-events:none;
  z-index:2;
  border:1px solid rgba(146,111,55,.5);
}
body.p-muzeum .plates > .plate .plate__media picture{
  display:block;
  height:100%;
  width:100%;
  aspect-ratio:auto;
  box-shadow:0 0 0 1px rgba(92,69,38,.25);
  overflow:hidden;           /* zoom z hovera nie wyjeżdża na matę */
}
body.p-muzeum .plates > .plate .plate__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:sepia(.18) saturate(.9);
  transition:transform .5s var(--ease), filter .4s var(--ease);
}
body.p-muzeum .plates > .plate:hover .plate__media img,
body.p-muzeum .plates > .plate:focus-within .plate__media img{filter:none}

/* Podpis na przyciemnieniu od dołu. Zmierzone na wszystkich 37 kadrach:
   najgorszy kontrast 10,34 przy progu 4,5. */
body.p-muzeum .plates > .plate figcaption{
  position:absolute;
  inset:auto 9px 9px 9px;    /* podpis leży NA fotografii, mata czysta */
  font-style:italic;
  margin:0;
  padding:30px 12px 10px;
  background:linear-gradient(180deg, rgba(10,8,5,0) 0%, rgba(10,8,5,.55) 45%, rgba(10,8,5,.88) 100%);
  color:var(--c-kosc);
  border:0;
  font-family:var(--f-body);
  font-size:12.5px;
  letter-spacing:.05em;
  text-transform:none;
  font-weight:500;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}

body.p-muzeum .plates > .plate:hover{transform:none; box-shadow:0 4px 12px rgba(58,44,26,.26)}
body.p-muzeum .plates > .plate:hover .plate__media img{transform:scale(1.06)}

/* Wystawa bursztynowa: aksamit ZOSTAJE bez ram, maty i sepii —
   pergaminowa obwódka zabiłaby czarne tło eksponatów. Selektory
   celowo mocniejsze od całego systemu siatek powyżej. */
body.p-muzeum .section--bursztyn .plates > .plate{border-radius:2px}
body.p-muzeum .section--bursztyn .plates > .plate .plate__media{
  padding:0; background:none; border:0;
}
body.p-muzeum .section--bursztyn .plates > .plate .plate__media::after{content:none}
body.p-muzeum .section--bursztyn .plates > .plate .plate__media picture{box-shadow:none}
body.p-muzeum .section--bursztyn .plates > .plate .plate__media img{filter:none}
body.p-muzeum .section--bursztyn .plates > .plate figcaption{
  inset:auto 0 0 0; font-style:normal;
}

/* ============================================================
   HERO NA CAŁĄ SZEROKOŚĆ

   PRZESŁONA POLICZONA, NIE DOBRANA OKIEM. Ten kadr jest najtrudniejszy
   w serwisie: ma rozbłysk słońca rgb(254,254,254) i drewno rgb(1,1,1).
   Liczone dla całego zdjęcia przesłona musiałaby mieć 0,60, żeby jasny
   tekst przeszedł, a wtedy niebo robi się szare.

   Ale słońce siedzi w lewym górnym rogu, a treść staje na środku.
   W pasie pod treścią (środkowe 66% szerokości, 62% wysokości)
   najjaśniejszy punkt to niebo rgb(192,206,221) i tam wystarcza 0,55:
   tekst jasny 6,26, biel 6,70, przy progu 4,5.

   Bursztynowy nadtytuł odpada: nawet przy 0,62 ma 3,83. Dlatego nadtytuł
   jest kremowy, a nie bursztynowy.
   ============================================================ */
.hero-pelny{
  position:relative;
  isolation:isolate;
  display:grid;
  align-items:center;
  min-height:clamp(440px, 66vh, 660px);
  padding-block:var(--sp-9);
  overflow:hidden;
  background:var(--c-czern-scrim);      /* podkład na czas wczytywania zdjęcia */
}

.hero-pelny__foto{
  position:absolute;
  inset:0;
  z-index:-2;
  display:block;
}
.hero-pelny__foto img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;   /* wiatrak i szyld zostają w kadrze */
  display:block;
}

/* Przesłona. Mocniejsza w pasie, w którym stoją litery, słabsza przy
   górnej i dolnej krawędzi, żeby zdjęcie miało czym oddychać. Najsłabszy
   punkt POD TEKSTEM to 0,57, czyli powyżej policzonego minimum. */
.hero-pelny::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,
    rgba(18,14,10,.44) 0%,
    rgba(18,14,10,.57) 26%,
    rgba(18,14,10,.62) 72%,
    rgba(18,14,10,.48) 100%);
}

.hero-pelny__tresc{
  max-width:44ch;
  margin-inline:auto;
  text-align:center;
  color:var(--c-pergamin);
}

/* Nadtytuł: kremowy, bo bursztyn na tym tle nie przechodzi (3,83). */
.hero-pelny__tresc .eyebrow{
  color:var(--c-pergamin-2);
  font-size:.875rem;
  letter-spacing:.2em;
  margin-bottom:var(--sp-3);
}

/* Powiększona treść. Wersaliki i rozstrzelenie zostają z poprzedniego
   hero, bo to one dawały tej stronie muzealny rys. */
.hero-pelny__tresc h1{
  font-family:var(--f-head-muzeum);
  text-transform:uppercase;
  letter-spacing:.13em;
  font-weight:600;
  font-size:clamp(2.3rem, 1.35rem + 3.9vw, 4.6rem);
  line-height:1.1;
  margin:0 0 var(--sp-4);
  color:var(--c-pergamin);
  text-shadow:0 2px 18px rgba(10,8,5,.5);
}
.hero-pelny__tresc .lead{
  font-size:clamp(1.15rem, 1rem + .75vw, 1.6rem);
  line-height:1.55;
  /* Jaśniejszy niż reszta tekstu i to nie jest kaprys: na telefonie lead
     ma 19 px, więc obowiązuje go ostrzejszy próg 4,5, a wypada dokładnie
     nad nasłonecznioną ścianą stodoły. Przy #EDE6D8 wychodziło 4,45.
     Rozjaśnienie samego napisu daje 4,90 i nie kosztuje ani odrobiny
     jasności zdjęcia, w odróżnieniu od mocniejszej przesłony. */
  color:#F5F1E8;
  margin:0 auto var(--sp-6);
  max-width:34ch;
  text-shadow:0 1px 12px rgba(10,8,5,.45);
}
.hero-pelny .btn-row{justify-content:center}

/* Przycisk drugorzędny jest przezroczysty i ma zieleń w literach, więc
   na ciemnym tle znika. Na tym paśmie dostaje biel: kontur i napis. */
.hero-pelny .btn--secondary{
  color:var(--c-pergamin);
  border-color:rgba(250,247,240,.75);
  background:rgba(250,247,240,.07);
}
.hero-pelny .btn--secondary:hover,
.hero-pelny .btn--secondary:focus-visible{
  background:rgba(250,247,240,.16);
  border-color:var(--c-pergamin);
  color:#FFFFFF;
}

@media(max-width:600px){
  .hero-pelny{min-height:clamp(380px, 58vh, 520px); padding-block:var(--sp-8)}
}

@media(max-width:600px){
  /* Wrociły tu dwie reguły, które skasowałem przez pomyłkę, podmieniając
     nie ten blok @media co trzeba. */
  .opowiesc::first-letter{font-size:2.8em}
  /* Na telefonie pergamin przewija się razem ze stroną: tło przypięte
     przez fixed potrafi na iOS szarpać przy każdym zatrzymaniu scrolla. */
  body.p-muzeum{background-attachment:scroll}

  /* NA TELEFONIE GALERIA JUSTOWANA SIE NIE SPRAWDZA. Przy 390 px nie ma
     z czego justowac: kadry maja rozne proporcje, wiec w rzedzie miescil
     sie raz jeden, raz dwa, a samotny rozciagal sie na cala szerokosc
     i przy wysokosci 150 px robil sie pasem o proporcji 2,6 do 1.
     Zmierzone: strona miala tam 25 107 px zamiast 18 387 px.

     Dwie rowne kolumny zawsze wypelniaja rzad i nie zaskakuja. */
  body.p-muzeum .plates{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px;
  }
  body.p-muzeum .plates > .plate{
    /* Szerokosc MUSI wrocic do auto. Regula z desktopu liczy
       100% / --kol, a na telefonie to 100% juz odnosi sie do KOMORKI
       siatki, nie do pojemnika: kafel wychodzil wtedy na 25 px. */
    width:auto;
    flex:none;
    max-width:none;
    height:auto;
    aspect-ratio:4/3;
  }
  body.p-muzeum .plates > .plate figcaption{
    padding:22px 9px 8px;
    font-size:11.5px;
  }
}


/* ============================================================
   OLEJARNIA

   Butelka jest wysoka i wąska, a kafle renderowały się poziomo 4:3,
   bo siedziały w galerii muzealnej. Zmierzone przed zmianą:
   275x206 px, czyli z butelki zostawał poziomy pasek. Inline
   style="--ar:0.75" niczego nie ustawiał: tej zmiennej nie czyta
   żaden arkusz w projekcie.

   Kadr 2:3 zgadza się co do piksela ze źródłami (1360x2048),
   więc nic nie jest przycinane.

   Sześć kafli dzieli się równo przez 6, 3 i 2, więc na żadnym progu
   nie zostaje sierota i nie trzeba sztuczek z rozpinaniem kolumn,
   koniecznych przy pięciu piwach.
   ============================================================ */
.oleje{
  display:grid;
  gap:clamp(14px, 1.7vw, 22px);
  /* kolumny ustawia blok SIEDEM OLEJOW nizej */
  /* 1320 px, zeby kafel wyszedl na okolo 200 px, czyli tyle co karta
     piwa na stronie restauracji. Przy 1240 px wychodzilo 171 px
     i butelka robila sie za drobna. */
  max-width:1320px;
  margin-inline:auto;
}
.olej{margin:0;text-align:center}

.olej__foto{
  aspect-ratio:2/3;
  overflow:hidden;
  border-radius:var(--r-md);
  background:var(--c-bg-sand);
  box-shadow:0 2px 4px rgba(58,44,26,.14), 0 12px 26px rgba(58,44,26,.16);
  margin-bottom:var(--sp-3);
}
.olej__foto picture{display:block;height:100%}
.olej__foto img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease);
}
.olej:hover .olej__foto img{transform:scale(1.05)}

.olej figcaption{margin:0}
.olej h3{
  font-size:clamp(.95rem, 1.1vw, 1.06rem);
  margin:0 0 10px;
  padding-bottom:9px;
  line-height:1.25;
  position:relative;
}
/* kolor etykiety odczytany ze zdjęcia, wchodzi przez --etykieta */
.olej h3::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:24px;height:2px;border-radius:2px;
  background:var(--etykieta, var(--c-brown-lt));
}
.olej p{
  margin:0;
  font-size:12.5px;
  line-height:1.55;
  color:var(--c-text-2);
  max-width:none;      /* p ma w base.css --measure, tu psułoby wyśrodkowanie */
}

@media(prefers-reduced-motion:reduce){
  .olej__foto img{transition:none}
  .olej:hover .olej__foto img{transform:none}
}

/* SIEDEM olejów (od 27.08.2026, doszła czarnuszka). Siedem nie dzieli
   się równo, więc siatka działa na kolumnach-połówkach: kafel zajmuje
   dwie, a ostatni rząd startuje z przesunięciem i sam siada na środku.
   Ten sam wzorzec co karty piwa — bez procentów, które liczą się od
   kolumny zamiast od rozpiętego pola. */
.oleje{grid-template-columns:repeat(8, 1fr)}
.oleje .olej{grid-column:span 2}
.oleje .olej:nth-child(5){grid-column:2 / span 2}
.oleje .olej:nth-child(6){grid-column:4 / span 2}
.oleje .olej:nth-child(7){grid-column:6 / span 2}

@media(max-width:1100px) and (min-width:761px){
  /* POMIAR 27.08: wymuszona kolumna na kaflu 5 wypychała kafel 4
     do samotnego rzędu (układ 3+1+3). Kafle 1–6 idą automatem (3+3),
     ręka ustawia TYLKO siódmy — na środek. */
  .oleje{grid-template-columns:repeat(6, 1fr); max-width:940px}
  .oleje .olej{grid-column:span 2}
  /* reset wymuszen z poziomu bazowego (desktop ustawia kafle 5 i 6
     na konkretne kolumny osemki) - bez tego automat sie gubi */
  .oleje .olej:nth-child(5),
  .oleje .olej:nth-child(6){grid-column:auto / span 2}
  .oleje .olej:nth-child(7){grid-column:3 / span 2}
  .olej p{font-size:13px}
}
@media(max-width:760px){
  .oleje{grid-template-columns:repeat(4, 1fr); gap:16px}
  .oleje .olej{grid-column:span 2}
  .oleje .olej:nth-child(5),
  .oleje .olej:nth-child(6){grid-column:auto / span 2}
  .oleje .olej:nth-child(7){grid-column:2 / span 2}
  .olej p{font-size:12.5px}
}

/* Placeholder kafla bez zdjęcia — ta sama zasada co .kadr-brak przy
   kutrze: uczciwe „zdjęcie wkrótce", nie obcy kadr. */
.olej__foto--brak{
  display:grid;place-items:center;
  border:1px dashed var(--c-border-sand);
  background:var(--c-bg-sand);
  box-shadow:none;
}
.olej__foto--brak span{
  font-family:var(--f-body);font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--c-atrament-2);text-align:center;line-height:1.6;
}


/* ============================================================
   CZYM JEST MUZEUM: KOLAŻ ZAMIAST JEDNEGO WIELKIEGO ZDJĘCIA

   Wcześniej stało tu jedno zdjęcie na całą szerokość kontenera,
   1136 px, pas wysoki na 757 px. Przytłaczało tekst, który szedł
   dopiero pod nim.

   Teraz trzy kadry przekładane po lewej, treść po prawej.

   GEOMETRIA POLICZONA, nie dobrana okiem. Kontener 100/92,
   przy szerokości W:
     A  szer 76%, góra 0         ->  0    .. 0,56W
     C  szer 46%, dół 14%        ->  0,45W .. 0,84W   (zachodzi na A)
     B  szer 34%, dół 0, prawo 4% -> 0,44W .. 0,92W   (zachodzi na A)
   W poziomie B i C się NIE stykają (kończy 0,29W, zaczyna 0,36W),
   więc każdy kadr zachodzi tylko na duży, nigdy jeden na drugi.
   ============================================================ */
.omuzeum{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(30px, 4vw, 62px);
  align-items:center;
}

.kolaz{position:relative;aspect-ratio:100/92}
.kolaz figure{
  position:absolute;margin:0;
  background:var(--c-krem-odbitki);padding:8px;border-radius:0;
  border:1px solid rgba(74,56,30,.55);
  box-shadow:0 2px 5px rgba(58,44,26,.18), 0 16px 34px rgba(58,44,26,.20);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
/* Ta sama złota linia oprawy co w planszach. */
.kolaz figure::after{
  content:"";position:absolute;inset:3px;pointer-events:none;
  border:1px solid rgba(146,111,55,.5);
}
.kolaz img{filter:sepia(.18) saturate(.9);transition:filter .45s var(--ease)}
.kolaz figure:hover img{filter:none}
.kolaz picture{display:block}
.kolaz img{width:100%;height:auto;display:block}

.kolaz__a{width:76%;top:0;left:0;transform:rotate(-1.5deg);z-index:1}
.kolaz__c{width:46%;bottom:14%;left:4%;transform:rotate(-3.5deg);z-index:2}
/* 29.08.2026: klient — „za małe chyba”; kafel rośnie o 10 punktów
   i schodzi minimalnie w prawo, żeby nie najeżdżał na sąsiada. */
.kolaz__b{width:44%;bottom:0;right:2%;transform:rotate(3deg);z-index:3}

/* Po najechaniu odbitka prostuje się i wychodzi na wierzch, tak samo
   jak wsuwki w karcie dań. */
.kolaz figure:hover{
  transform:rotate(0deg) translateY(-5px);
  box-shadow:0 3px 8px rgba(58,44,26,.22), 0 26px 50px rgba(58,44,26,.28);
  z-index:4;
}

@media(prefers-reduced-motion:reduce){
  .kolaz figure{transition:none}
  .kolaz figure:hover{transform:none}
}

/* Poniżej 861 px kolaż i tekst idą jeden pod drugim. Kolaż zostaje
   kolażem, bo jest proporcjonalny, ale dostaje limit szerokości,
   żeby na tablecie nie rozlał się na całą stronę. */
@media(max-width:860px){
  .omuzeum{grid-template-columns:1fr;gap:var(--sp-6)}
  .kolaz{max-width:520px;margin-inline:auto;width:100%}
}
/* Na telefonie obroty są mniejsze: przy wąskim kadrze róg odbitki
   potrafi wyjść poza kontener. */
@media(max-width:520px){
  .kolaz__a{transform:rotate(-1deg)}
  .kolaz__c{transform:rotate(-2deg)}
  .kolaz__b{transform:rotate(2deg)}
}

/* ============================================================
   ODSTĘPY MIĘDZY ROZDZIAŁAMI (28.08.2026, prośba klienta)

   Serwisowe 96px z każdej strony dawało na styku prawie 200px
   pustki — przy kontrastowych przejściach (aksamit bursztynu,
   pas biletowy) czytało się to jak dziury w opowieści. Muzeum
   schodzi o krok: 64px na szerokim ekranie, 48px na wąskim.
   Sekcja „tight" (Czym jest muzeum) ma własny, mniejszy rytm.

   Stopka bez odstępu: globalne margin-top 64px odsłaniało pas
   pergaminowego tła body między ostatnią sekcją a stopką —
   z daleka wyglądał jak rozmyte złote zdjęcie. Olejarnia ma
   przechodzić w stopkę bez szpary.
   ============================================================ */
body.p-muzeum .section:not(.section--tight){padding-block:var(--sp-7)}
@media(min-width:768px){
  body.p-muzeum .section:not(.section--tight){padding-block:var(--sp-8)}
}
body.p-muzeum .foot{margin-top:0}


/* ============================================================
   FINALNE TREŚCI KLIENTA (28.08.2026)
   ============================================================ */

/* OSTATNIA WIECZERZA — unikat. Sekcja dziedziczy ciemny aksamit
   z .section--bursztyn; tu tylko większy kadr (klient prosi
   o „większe zdjęcie eksponatu") i metryczka czytelna na nocy. */
@media(min-width:900px){
  body.p-muzeum .section--wieczerza .wieczerza{
    grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
  }
}
.section--wieczerza .metryczka > div{border-top-color:rgba(243,233,218,.22)}
.section--wieczerza .metryczka dt{color:var(--c-amber)}
.section--wieczerza .metryczka dd{color:var(--c-noc-tx)}

/* ZNAJDŹ BURSZTYN — komnata z morską plażą. Zdjęcia brak, więc
   scenę gra samo tło: noc nad plażą i ciepła poświata latarki
   od dołu. Żadnych zdjęć zastępczych, żadnych grafik z internetu. */
.znajdz{
  background:
    radial-gradient(ellipse 62% 55% at 50% 108%, rgba(174,125,41,.30), transparent 72%),
    linear-gradient(180deg, #14110D 0%, #1C160F 100%);
  color:var(--c-noc-tx);
}
.znajdz h2{color:var(--c-noc-tx)}
.znajdz .eyebrow{color:var(--c-amber)}
.znajdz .lead{color:var(--c-noc-tx-2);max-width:56ch;margin-inline:auto}
.znajdz__nagroda{
  margin:var(--sp-5) auto 0;
  font-family:var(--f-head-muzeum);
  font-size:clamp(1.25rem, 1.05rem + 1vw, 1.625rem);
  font-weight:600;           /* bez kursywy — patrz uwaga przy .motto */
  color:var(--c-amber-bg);   /* jasny złoty — zmierzony kontrast na nocy */
}

/* MOTTO WŁAŚCICIELA — „Ocalić od zapomnienia". Charakterystyczna
   typografia: muzealny EB Garamond kursywą, duży stopień, bursztynowa
   kreska. Bez ozdobników utrudniających czytanie. */
.motto{margin:var(--sp-5) auto var(--sp-6);max-width:30ch}
.motto p{
  margin:0;
  font-family:var(--f-head-muzeum);
  /* BEZ kursywy: EB Garamond jest załadowany tylko w odmianie prostej,
     więc italic byłby pochylany syntetycznie i robił się nieczytelny. */
  font-weight:600;
  font-size:clamp(1.9rem, 1.4rem + 2.6vw, 2.75rem);
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.2;
  color:var(--c-brown);
}
.motto::after{
  content:"";display:block;width:72px;height:3px;
  background:var(--c-amber);margin:var(--sp-4) auto 0;border-radius:2px;
}


/* ============================================================
   SZLIF HISTORYCZNY (28.08.2026, uwagi klienta)
   ============================================================ */

/* STARE RAMY NA .frame — pocztowka i portret mówią tym samym
   językiem co plansze: złota linia passe-partout i delikatna
   sepia. Wystawa bursztynowa dalej bez ram (aksamit). */
body.p-muzeum .frame{position:relative}
body.p-muzeum .frame::after{
  content:"";
  position:absolute;
  inset:5px;
  pointer-events:none;
  z-index:2;
  border:1px solid rgba(146,111,55,.5);
}
body.p-muzeum .frame img{filter:sepia(.12) saturate(.94)}
body.p-muzeum .section--bursztyn .frame::after{content:none}
body.p-muzeum .section--bursztyn .frame img{filter:none}

/* EYEBROW w muzealnym Garamondzie — mały, historyczny nagłówek
   nad każdą sekcją zamiast neutralnego groteskowego. */
body.p-muzeum .eyebrow{
  font-family:var(--f-head-muzeum);
  font-weight:600;
  font-size:.9375rem;
  letter-spacing:.18em;
}

/* INICJAŁ na otwarciu opowieści (pierwszy akapit „Czym jest
   Muzeum”) — jak w starej księdze. Tylko jeden, więcej byłoby
   dekoracją zamiast typografią. */
body.p-muzeum .omuzeum > div:not(.kolaz) > p:first-of-type::first-letter{
  font-family:var(--f-head-muzeum);
  font-weight:600;
  color:var(--c-amber);
  /* Wariant zapasowy (float) dla przeglądarek bez initial-letter:
     litera na oko dwa wiersze, wąska szczelina przy tekście. */
  font-size:3em;
  float:left;
  line-height:.78;
  padding:.02em .06em 0 0;
}
/* WŁAŚCIWY INICJAŁ: initial-letter osadza literę DOKŁADNIE na dwóch
   wierszach — góra równa z linią wersalików, dół na linii bazowej
   drugiego wiersza. Wcześniej litera kończyła się w połowie drugiego
   wiersza i odstawała od tekstu jak osobne słowo (uwaga klienta
   29.08.2026). */
@supports (initial-letter: 2) or (-webkit-initial-letter: 2){
  body.p-muzeum .omuzeum > div:not(.kolaz) > p:first-of-type::first-letter{
    -webkit-initial-letter:2;
    initial-letter:2;
    font-size:inherit;
    float:none;
    line-height:normal;
    padding:0 .1em 0 0;
  }
}


/* ============================================================
   WIECZERZA JAK EKSPONAT (finalny audyt 28.08.2026)

   Kadr wjeżdża z delikatnym zoom-outem, pod nagłówkiem rysuje się
   bursztynowa kreska, wiersze metryczki wchodzą kolejno. Wszystko
   jednorazowe (przy pierwszym wejściu w kadr) i wyłączone przy
   prefers-reduced-motion.
   ============================================================ */
.wieczerza__kadr.reveal img{
  transform:scale(1.045);
  transition:transform 1.1s var(--ease);
}
.wieczerza__kadr.reveal.is-visible img{transform:scale(1)}

.section--wieczerza h2{position:relative;padding-bottom:10px}
.section--wieczerza h2::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:72px;
  background:var(--c-amber);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease) .25s;
}
.wieczerza__opis.reveal.is-visible h2::after{transform:scaleX(1)}

.wieczerza__opis.reveal .metryczka > div{
  opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.wieczerza__opis.reveal.is-visible .metryczka > div{opacity:1;transform:none}
.wieczerza__opis.reveal.is-visible .metryczka > div:nth-child(1){transition-delay:.30s}
.wieczerza__opis.reveal.is-visible .metryczka > div:nth-child(2){transition-delay:.45s}
.wieczerza__opis.reveal.is-visible .metryczka > div:nth-child(3){transition-delay:.60s}

@media(prefers-reduced-motion:reduce){
  .wieczerza__kadr.reveal img{transform:none;transition:none}
  .section--wieczerza h2::after{transform:scaleX(1);transition:none}
  .wieczerza__opis.reveal .metryczka > div{opacity:1;transform:none;transition:none}
}


/* Nagłówki podgrup w wydarzeniach (prośba klienta 29.08.2026:
   osobno wernisaże, osobno giełdy). Mały stopień, muzealny krój,
   światło między siatkami. */
.wydarzenia__grupa{
  font-family:var(--f-head-muzeum);
  font-size:1.125rem;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--c-brown);
  margin:var(--sp-6) 0 var(--sp-4);
  text-align:center;
}
.wydarzenia__grupa:first-of-type{margin-top:var(--sp-5)}


/* ============================================================
   TYTUŁ HERO JAK MUZEALNY SZYLD (29.08.2026, prośba klienta)

   Wzór: złocony szyld „MUZEUM / ZIEMI SŁAWIEŃSKIEJ” na desce.
   Odtwarzamy go krojem, który już mamy — muzealnym EB Garamondem
   w wersalikach, w dwóch stopniach, z rozstrzelonym drugim wierszem.
   Kolor: jasne złoto (--c-amber-bg). Pełny bursztyn odpadał na tym
   kadrze (kontrast 3,83 — patrz komentarz przy .hero-pelny), a jasne
   złoto trzyma czytelność i daje ten sam „szyldowy” ton.
   Cień jest jednopikselowy, tylko do odklejenia liter od nieba.
   ============================================================ */
.hero-pelny .hero-szyld{
  font-family:var(--f-szyld);
  font-weight:400;              /* Pirata One ma jedną wagę */
  /* BEZ wersalików: gotyckie majuskuły są mocno ozdobne i przy
     dłuższym wyrazie robią się nieczytelne. Klient wybrał wariant
     z małymi literami — tak wyglądał w makiecie. */
  text-transform:none;          /* zdejmujemy wersaliki narzucone przez hero */
  color:var(--c-amber-bg);
  text-shadow:0 1px 3px rgba(20,14,6,.6);
  line-height:1.04;
  margin-bottom:var(--sp-4);
}
.hero-pelny .hero-szyld__a,
.hero-pelny .hero-szyld__b{display:block}
.hero-pelny .hero-szyld__a{
  /* Gotyk ma niższe „oczko” niż kapitała, więc stopień wyższy.
     29.08: klient słusznie zauważył, że tytuł był za mały względem
     zdania pod spodem — hierarchia hero musi być jednoznaczna. */
  font-size:clamp(4rem, 2.8rem + 5.2vw, 7.2rem);
  letter-spacing:.005em;
}
.hero-pelny .hero-szyld__b{
  font-size:clamp(2rem, 1.4rem + 2.5vw, 3.4rem);
  letter-spacing:.02em;
  margin-top:.08em;
}


/* ============================================================
   NAGLOWKI SEKCJI W KROJU SZYLDU (29.08.2026, prośba klienta)

   Cinzel wchodzi także na nagłówki sekcji podstrony muzeum — ten sam
   krój co tytuł w hero, więc cała podstrona mówi jednym, szyldowym
   głosem. Krój jest kapitałkowy (małe litery rysowane jak wersaliki),
   więc stopień obniżony o włos i lekko rozstrzelony — inaczej
   nagłówek robi się zbyt ciężki. Podnagłówki (h3, h4) i treść
   zostają w EB Garamondzie: to on trzyma czytelność długich zdań.
   ============================================================ */
body.p-muzeum .section h2,
body.p-muzeum .section__head h2{
  font-family:var(--f-naglowek-muzeum);
  font-weight:600;
  letter-spacing:.035em;
  font-size:clamp(1.45rem, 1.2rem + 1.05vw, 2rem);
  line-height:1.18;
}


/* ============================================================
   PRZYCISKI NA CIEMNYCH SEKCJACH (29.08.2026)

   „Oleje nam się tu zgubiły” — przycisk .btn--secondary ma zieloną
   ramkę i zielony tekst, co na aksamitnej nocy dawało kontrast 2,62:1,
   czyli w praktyce niewidoczny kształt. Na ciemnych sekcjach (wystawa
   bursztynowa, Wieczerza, komnata poszukiwań) przycisk przechodzi
   na jasne złoto: 14,63:1 dla ramki i napisu, a po najećhaniu
   wypełnia się złotem z ciemnym napisem (też 14,63:1).
   ============================================================ */
body.p-muzeum .section--bursztyn .btn--secondary,
body.p-muzeum .znajdz .btn--secondary{
  color:var(--c-amber-bg);
  border-color:var(--c-amber-bg);
  background:rgba(244,227,195,.06);
}
body.p-muzeum .section--bursztyn .btn--secondary:hover,
body.p-muzeum .section--bursztyn .btn--secondary:focus-visible,
body.p-muzeum .znajdz .btn--secondary:hover,
body.p-muzeum .znajdz .btn--secondary:focus-visible{
  background:var(--c-amber-bg);
  border-color:var(--c-amber-bg);
  color:#17130E;
}


/* Zdanie pod tytułem schodzi o stopień (29.08.2026, dwie prośby klienta
   tego samego dnia): najpierw z 25,6 na 21 px, potem — razem z drugim
   powiększeniem szyldu — na 18 px. Stosunek tytuł/lead: ~6,4. */
body.p-muzeum .hero-pelny .lead{
  font-size:clamp(.9375rem, .9rem + .25vw, 1.125rem);
  max-width:42ch;
  margin-inline:auto;
}


/* Trzeci odsyłacz w hero muzeum (29.08.2026) — osobny wiersz pod
   dwoma pierwszymi. Odstęp mniejszy niż między przyciskami w rzędzie,
   żeby czytało się jako doklejony trzeci, a nie osobna sekcja. */
.hero-pelny .hero-oleje{margin-top:var(--sp-3)}