:root{--vwu:min(1vw,19.2px)}   /* patrz index.html: HD = UHD */
/* ===== LGRID — wspólny renderer layoutów (layouts/*.json) =====
   Siatka: 12 kolumn; wiersz = 1/3 szerokości kolumny (drobna jednostka pionowa),
   dzięki czemu kadry 3:2 (h=8 przy w=4), 4:3 (h=9), piony itd. wychodzą jak na stronie. */
/* 12 kolumn treści + kolumny MARGINESOWE po bokach (ta sama szerokość kolumny).
   Szerokość siatki i liczbę kolumn ustawia lgrid.js; x bloku < 0 = lewy margines,
   x+w > 12 = prawy. Nadmiar przycina .scroll (overflow-x:hidden) — bleed przy krawędzi. */
/* align-content:start — siatka z blokami „free" dostaje `min-height` (zapas na bloki poza
   siatką, patrz placeAll w lgrid.js), a grid domyślnie ROZCIĄGA wiersze, żeby tę wysokość
   wypełnić. Bez tego każdy wiersz urósłby o ułamek piksela i cała galeria by się rozjechała
   (dokładnie ten błąd zjadł pół dnia na kanwie edytora — tam ta sama linia jest w .cnv). */
.lgrid{position:relative;z-index:0;display:grid;align-content:start;
  grid-template-columns:repeat(var(--lg-cols,12),var(--u,120px));
  grid-auto-rows:minmax(calc((var(--u,120px) + var(--lg-gap,18px))/3 - var(--lg-gap,18px)),auto);
  gap:var(--lg-gap,18px);margin:clamp(48px,6vh,90px) 0 clamp(80px,10vh,140px)}
.lgrid .blk{position:relative;min-width:0;min-height:0}
/* pełna szerokość okna — niezależnie od kolumn (grid-area = cała siatka, więc 50% = pół siatki) */
.lgrid .blk.bleed{grid-column:1 / -1;width:var(--bleed-w,100vw);margin-left:calc(50% - var(--bleed-w,100vw)/2)}
@media(max-width:1024px){.lgrid .blk.bleed{width:auto;margin-left:0}}
/* BLOK POZA SIATKĄ („free"): pozycję i rozmiar liczy JS (freeRect) w procentach szerokości
   pola treści, więc układ jest ten sam przy każdej szerokości okna. Na wąskim ekranie blok
   wraca do zwykłego stosu — robi to media query na dole pliku. */
.lgrid .blk.free{position:absolute;z-index:2}
/* blok przypięty: stoi przy górze okna, dopóki jego pole w siatce nie przewinie się do końca */
.lgrid .blk.pin{position:sticky;top:var(--pin-top,110px);align-self:start;height:max-content;z-index:4}
.lgrid .blk.pin{height:var(--pin-h,max-content)}  /* wysokość z wierszy bloku; pole (grid-row) sięga zasięgu przypięcia */
/* ...ALE blok z tekstem musi mieć wysokość SWOJEJ TREŚCI — inaczej przy węższym oknie
   tekst wychodzi poza ramkę nagłówka (sztywna wysokość z wierszy go nie mieści) */
.lgrid .blk.pin.blk-head,.lgrid .blk.pin.blk-txt{height:max-content}
@media(max-width:1024px){.lgrid .blk.pin{position:static}}
.lgrid .blk-media{display:flex;flex-direction:column;min-height:0;align-self:start;height:var(--blk-h,100%)}
.lgrid .blk-media.pin{height:var(--pin-h,var(--blk-h,100%))}
/* ZAOKRAGLENIE NAROZNIKOW: --r to piksele policzone z krotszego boku bloku (patrz roundPx
   w js/lgrid.js), --rp to zapas na uklad waski, gdzie o rozmiarze decyduje CSS, nie JS. */
.lgrid .m-box,.lgrid .vid{border-radius:var(--r,0);clip-path:var(--clip,none)}
.lgrid .m-box{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--cream-2)}
/* media pozycjonowane absolutnie: ich naturalny rozmiar NIE wpływa na wysokość wiersza
   (przy grid-auto-rows:minmax(...,auto) film 1080p rozdymał wiersz do własnej wysokości) */
.lgrid .m-box img,.lgrid .m-box video{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.lgrid .fit-cover img,.lgrid .fit-cover video{object-fit:cover}
.lgrid .fit-contain img,.lgrid .fit-contain video{object-fit:contain}
.lgrid .m-box img{cursor:zoom-in;transition:opacity .4s}
.lgrid .m-box img:hover{opacity:.92}
.lgrid .blk-cap{margin-top:10px;font-size:12px;letter-spacing:.06em;color:var(--accent);flex:0 0 auto}
/* WARIANTY PODPISU (2026-08-17). `kicker` odtwarza podpis z sekcji „Sesje" na dole galerii
   (dawne `.g-tiles span`), żeby przeniesienie tych kafelków do layoutu nie zmieniło wyglądu. */
.lgrid .blk-cap.cap-kicker{margin-top:13px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);transition:color .3s}
.lgrid .blk:has(.blk-lnk):hover .blk-cap.cap-kicker{color:var(--ink)}
/* LINK NA BLOKU (2026-08-17) — przezroczysta warstwa na całym bloku, razem z podpisem.
   `.blk` ma już position:relative (wyżej), więc nic więcej nie potrzeba. */
.lgrid .blk-lnk{position:absolute;inset:0;z-index:4;border-radius:inherit;text-decoration:none}
.lgrid .blk:has(.blk-lnk) .m-box img,.lgrid .blk:has(.blk-lnk) .m-box video{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.lgrid .blk:has(.blk-lnk):hover .m-box img,.lgrid .blk:has(.blk-lnk):hover .m-box video{transform:scale(1.04)}
.lgrid .blk:has(.blk-lnk):hover .blk-cap{color:var(--ink)}

/* PRZYCISK (2026-08-17) — kształt i wypełnienie klasami, żeby dało się je przestawiać z panelu */
/* POPRAWKI PO TESTACH JARKA (2026-08-17):
   1. `cursor` tylko na samym przycisku — rączka pojawiała się wokół, bo kontener zajmuje
      cały blok siatki, a przycisk jest w nim wyśrodkowany;
   2. koło miało napis dosunięty do obwodu — doszedł minimalny odstęp i wyższe min-width;
   3. „pełne" nie działało na rombie i sześciokącie, bo reguły kształtu stały PO regule
      `.fill` i nadpisywały tło — teraz `.fill` jest na końcu i ma własne warianty. */
.lgrid .blk-btn{display:flex;align-items:center;cursor:default}
.lgrid .blk-btn.al-center{justify-content:center}
.lgrid .blk-btn.al-right{justify-content:flex-end}
.lgrid .lg-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;width:fit-content;
  font-family:var(--sans,inherit);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);background:transparent;border:1px solid var(--ink);cursor:pointer;
  padding:16px 38px;border-radius:40px;text-decoration:none;transition:.35s;text-align:center}
.lgrid .lg-btn:hover{background:var(--ink);color:var(--cream)}
.lgrid .lg-btn.fill{background:var(--ink);color:var(--cream)}
.lgrid .lg-btn.fill:hover{background:transparent;color:var(--ink)}
.lgrid .lg-btn.ks-rect{border-radius:0}
.lgrid .lg-btn.ks-soft{border-radius:8px}
.lgrid .lg-btn.ks-circle{border-radius:50%;aspect-ratio:1/1;padding:0 22px;min-width:128px;letter-spacing:.1em;line-height:1.35}
/* romb przez clip-path, NIE przez rotate — obrót obracalby tez napis */
.lgrid .lg-btn.ks-romb{border-radius:0;aspect-ratio:1/1;padding:0 12px;min-width:132px;letter-spacing:.08em;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);border:0;background:var(--cream-2)}
.lgrid .lg-btn.ks-romb:hover,.lgrid .lg-btn.ks-romb.fill{background:var(--ink);color:var(--cream)}
.lgrid .lg-btn.ks-hex{border-radius:0;aspect-ratio:1.15/1;padding:0 14px;min-width:132px;border:0;background:var(--cream-2);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.lgrid .lg-btn.ks-hex:hover{background:var(--ink);color:var(--cream)}
/* .fill NA SAMYM KOŃCU — musi wygrać z regułami kształtu, które ustawiają własne tło */
.lgrid .lg-btn.fill,.lgrid .lg-btn.ks-romb.fill,.lgrid .lg-btn.ks-hex.fill,.lgrid .lg-btn.ks-circle.fill{background:var(--ink);color:var(--cream)}
.lgrid .lg-btn.fill:hover{background:transparent;color:var(--ink)}
.lgrid .lg-btn.ks-romb.fill:hover,.lgrid .lg-btn.ks-hex.fill:hover{background:var(--cream-2);color:var(--ink)}
.lgrid .m-ovl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(16,16,16,.42);color:#F5F1E5;font-family:var(--serif);font-size:20px;letter-spacing:.04em;pointer-events:none}
.lgrid video.vnative{background:#101010;object-fit:contain;cursor:default}


/* dosunięcie do sąsiada — kasuje odstęp siatki (przydatne przy blokach z tłem,
   żeby między nimi nie prześwitywało zdjęcie leżące pod spodem) */
.lgrid .blk.snap-t{margin-top:calc(-1 * var(--lg-gap,18px))}
.lgrid .blk.snap-b{margin-bottom:calc(-1 * var(--lg-gap,18px))}
/* ===== TŁO BLOKU (czytelność, gdy coś leży pod spodem) =====
   bg: cream | cream2 | ink — na ciemnym tle teksty i linie przechodzą na kremowe. */
.lgrid .blk.bg-cream{background:var(--cream)}
.lgrid .blk.bg-cream2{background:var(--cream-2)}
.lgrid .blk.bg-ink{background:var(--ink);color:var(--cream)}
.lgrid .blk.has-bg{padding:clamp(14px,calc(var(--vwu) * 1.6),32px)}
.lgrid .blk-head.hs-frame.has-bg{padding:clamp(22px,5cqw,90px) clamp(18px,5.5cqw,106px) clamp(22px,5cqw,90px) calc(var(--inline) + clamp(18px,5cqw,108px))}
.lgrid .blk.bg-ink .h-kicker,.lgrid .blk.bg-ink .h-title,.lgrid .blk.bg-ink .h-back{color:var(--cream)}
.lgrid .blk.bg-ink .h-desc,.lgrid .blk.bg-ink .h-no{color:rgba(245,241,229,.75)}
.lgrid .blk.bg-ink .h-title::after,.lgrid .blk.bg-ink .h-back{border-color:rgba(245,241,229,.55)}
.lgrid .blk.bg-ink .h-title::after{background:rgba(245,241,229,.55)}
.lgrid .blk.bg-ink.hs-frame{border-color:rgba(245,241,229,.45)}
.lgrid .blk.bg-ink.hs-frame::before{background:rgba(245,241,229,.45)}
.lgrid .blk.bg-ink .t-body,.lgrid .blk.bg-ink .t-serif,.lgrid .blk.bg-ink .t-serif-xl,.lgrid .blk.bg-ink .t-kicker,.lgrid .blk.bg-ink .t-filmhead{color:var(--cream)}
/* ===== NAGŁÓWEK GALERII JAKO BLOK SIATKI (type:"head") =====
   Trzy presety: frame (rama jak dotąd) · plain (bez ramki) · minimal (tytuł + kreska).
   Treść bierze się z pól layoutu: no, kicker, title, desc. Gdy layout ma taki blok
   albo head:false, lgrid.js chowa statyczną sekcję .g-head na stronie. */
.lgrid .blk-head{display:flex;flex-direction:column;justify-content:flex-start;position:relative;min-width:0;container-type:inline-size;
  align-self:start;height:max-content}  /* wysokość = treść; wiersze dokłada fitRigid, więc nie ma pętli rozrostu */
.lgrid .blk-head .h-no{position:absolute;top:0;left:0;font-family:var(--serif);font-size:13px;letter-spacing:.05em;color:var(--accent)}
.lgrid .blk-head .h-kicker{font-size:clamp(10px,2.2cqw,12px);letter-spacing:.3em;text-transform:uppercase;color:var(--ink);font-weight:500;margin-bottom:clamp(10px,2cqw,18px)}
.lgrid .blk-head .h-title{display:inline-block;position:relative;font-family:var(--serif);font-weight:300;font-size:clamp(30px,10cqw,100px);line-height:.98;padding-bottom:clamp(10px,1.6cqw,24px);align-self:flex-start}
.lgrid .blk-head .h-title::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--line)}
.lgrid .blk-head .h-desc{max-width:560px;margin-top:clamp(12px,2cqw,20px);font-size:clamp(13px,1.9cqw,15px);line-height:1.7;color:var(--accent)}
.lgrid .blk-head.hs-frame{--inline:clamp(22px,6cqw,80px);border:1px solid var(--line);border-right:0;
  padding:clamp(22px,5cqw,90px) clamp(18px,5.5cqw,106px) clamp(22px,5cqw,90px) calc(var(--inline) + clamp(18px,5cqw,108px))}
.lgrid .blk-head.hs-frame::before{content:"";position:absolute;top:0;bottom:0;left:var(--inline);width:1px;background:var(--line)}
/* Kolumna tekstu wewnątrz nagłówka (blok może być na całą szerokość treści,
   a tekst zajmować tylko część — jak na stronie). --h-tw liczy lgrid.js z pola `tw`. */
.lgrid .blk-head .h-kicker,.lgrid .blk-head .h-title,.lgrid .blk-head .h-desc,.lgrid .blk-head .h-back{max-width:var(--h-tw,100%)}
.lgrid .blk-head.hs-frame .h-no{top:clamp(9px,1.8cqw,22px);left:clamp(6px,1.2cqw,28px);font-size:clamp(10px,1.2cqw,13px)}
.lgrid .blk-head.hs-minimal .h-kicker,.lgrid .blk-head.hs-minimal .h-desc{display:none}
/* link powrotny — 1:1 z .backlink ze stron galerii */
.lgrid .blk-head .h-back{display:inline-flex;align-items:center;gap:10px;margin:clamp(14px,2.4cqw,26px) 0 0;font-size:clamp(10px,1.4cqw,11.5px);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:5px;transition:.3s;align-self:flex-start}
.lgrid .blk-head .h-back:hover{gap:18px}
.lgrid .blk-txt{display:flex;flex-direction:column;justify-content:center;align-self:start;height:max-content}
.lgrid .blk-txt b,.lgrid .blk-txt strong{font-weight:600}
.lgrid .blk-txt i,.lgrid .blk-txt em{font-style:italic}
.lgrid .t-serif{font-family:var(--serif);font-weight:300;line-height:1.05;font-size:clamp(30px,calc(var(--vwu) * 2.6),56px)}
.lgrid .t-serif-xl{font-family:var(--serif);font-weight:300;line-height:.98;font-size:clamp(44px,calc(var(--vwu) * 4.6),100px)}
/* NAGŁÓWEK FILMU — jeden blok zamiast trzech (tytuł + podtytuł + linia).
   Odstępy z line-height i margin, nie z siatki; linia to border-bottom bloku, nie osobny divider.
   Treść: "<b>MARKA</b> Klient<br><i>podtytuł</i>" — txt() w lgrid.js przepuszcza <b> <i> <br>. */
.lgrid .t-filmhead{font-family:var(--serif);font-weight:300;font-size:clamp(24px,calc(var(--vwu) * 1.9),36px);line-height:1.2;
  padding-bottom:13px;border-bottom:1px solid var(--line-soft)}
.lgrid .t-filmhead b{font-weight:600}
.lgrid .t-filmhead i{display:block;margin-top:8px;font-family:var(--sans);font-style:normal;
  font-size:15.5px;line-height:1.4;letter-spacing:.02em;color:var(--mid)}
.lgrid .blk-txt.at-end{justify-content:flex-end}
.lgrid .t-kicker{font-size:12px;letter-spacing:.3em;text-transform:uppercase;font-weight:500}
.lgrid .t-body{font-size:15px;line-height:1.7;color:var(--accent);max-width:640px}
.lgrid .al-center{text-align:center;align-items:center}
.lgrid .al-right{text-align:right;align-items:flex-end}
.lgrid .blk-divider{display:flex;align-items:center}
.lgrid .blk-divider::before{content:"";width:100%;height:1px;background:var(--line)}
.lgrid .blk-divider.soft::before{background:var(--line-soft)}
.lgrid .blk-divider.vert{justify-content:center}
.lgrid .blk-divider.vert::before{width:1px;height:100%}
/* pozycja linii w bloku: la-start = góra/lewo, la-end = dół/prawo (domyślnie środek) */
.lgrid .blk-divider.la-start{align-items:flex-start}
.lgrid .blk-divider.la-end{align-items:flex-end}
.lgrid .blk-divider.vert.la-start{justify-content:flex-start;align-items:stretch}
.lgrid .blk-divider.vert.la-end{justify-content:flex-end;align-items:stretch}
.lgrid .anim-reveal{opacity:0;transform:translateY(26px);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.lgrid .anim-fade{opacity:0;transition:opacity 1.4s ease}
.lgrid .anim-reveal.in,.lgrid .anim-fade.in{opacity:1;transform:none}
/* player wideo strony (HD/4K, dźwięk, pełny ekran, pasek postępu) */
/* poster jako TŁO boksu, nie tylko atrybut <video poster> — zwykły obrazek ładuje się od razu przy wejściu
   i stoi także wtedy, gdy film był już odtwarzany i został zatrzymany (atrybut poster wtedy nie wraca) */
.lgrid .vid{position:relative;flex:1;min-height:0;overflow:hidden;background:#0d0d0d center/cover no-repeat}
.lgrid .vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
.lgrid .vid .vbar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(245,241,229,.28);opacity:0;transition:opacity .3s,height .2s;cursor:pointer;z-index:3}
.lgrid .vid:hover .vbar,.lgrid .vid:focus-within .vbar{opacity:1}
.lgrid .vid .vbar:hover{height:9px}
.lgrid .vid .vbar-fill{height:100%;width:0;background:var(--cream);pointer-events:none}
.lgrid .vid .vctrl{position:absolute;right:14px;bottom:14px;display:flex;gap:8px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;z-index:2}
.lgrid .vid:hover .vctrl,.lgrid .vid:focus-within .vctrl{opacity:1;transform:none}
.lgrid .vid .vctrl button{font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:rgba(245,241,229,.92);border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer}
.lgrid .vid .vctrl button:hover{background:var(--ink);color:var(--cream)}
.lgrid .vid:fullscreen,.lgrid .vid:-webkit-full-screen{background:#000}
.lgrid .vid:fullscreen video,.lgrid .vid:-webkit-full-screen video{object-fit:contain}
.lgrid .lgrid-err{grid-column:1/span 12;padding:60px 0;color:var(--accent);font-size:14px;letter-spacing:.1em}
/* UKLAD WASKI: dwie kolumny zdjec, filmy i teksty na cala szerokosc.
   Prog: 1024px (ponizej desktopowa siatka 12 kolumn jest juz nieczytelna). */
@media(max-width:1024px){
  .lgrid{display:grid!important;grid-template-columns:1fr 1fr;align-items:start;
    grid-auto-rows:auto!important;grid-auto-flow:row!important;   /* KLUCZOWE: wiersze z treści, nie z desktopu */
    width:auto!important;margin-left:clamp(18px,calc(var(--vwu) * 4),46px)!important;margin-right:clamp(18px,calc(var(--vwu) * 4),46px)!important}
  .lgrid .blk{grid-column:auto!important;grid-row:auto!important;width:auto!important;height:auto!important;
    margin-left:0!important;margin-top:0!important;margin-bottom:0!important;position:relative!important;top:auto!important;left:auto!important}
  .lgrid .blk.vid-blk,.lgrid .blk-txt,.lgrid .blk-head,.lgrid .blk-divider,.lgrid .blk.bleed{grid-column:1 / -1!important}
  .lgrid .blk-spacer{display:none}
  .lgrid .blk-media{height:auto!important;align-self:start}
  /* dwie kolumny: wszystkie zdjęcia w kwadracie — pion obok poziomu wyglądał źle.
     Filmy i bloki pełnej szerokości trzymają swoją proporcję. */
  .lgrid .m-box,.lgrid .vid{border-radius:var(--rp,0)}   /* waski ekran: procent krotszego boku */
  /* ksztalt zostaje takze na telefonie — opisany procentami, wiec skaluje sie sam */
  .lgrid .m-box{aspect-ratio:1 / 1;height:auto!important;flex:0 0 auto}
  .lgrid .vid,.lgrid .blk.vid-blk .m-box,.lgrid .blk.bleed .m-box,.lgrid .blk.solo .m-box{aspect-ratio:var(--ar,16 / 9);height:auto!important;flex:0 0 auto}
  /* samotne zdjęcie na końcu serii (nieparzysta liczba) — obie kolumny zamiast dziury obok */
  .lgrid .blk.solo{grid-column:1 / -1!important}
  .lgrid .m-box img,.lgrid .m-box video,.lgrid .vid video{position:absolute;inset:0;height:100%}
  .lgrid .blk-head .h-kicker,.lgrid .blk-head .h-title,.lgrid .blk-head .h-desc,.lgrid .blk-head .h-back{max-width:none}
  .lgrid .blk-head.hs-frame{padding:clamp(18px,calc(var(--vwu) * 5),34px);border-right:1px solid var(--line)}
  .lgrid .blk-head.hs-frame::before{display:none}
  .lgrid .blk-divider::before{margin:8px 0}
}
/* KADR PRZYKRYTY W CAŁOŚCI przez inny (film na swojej klatce zastępczej, zdjęcie schowane pod
   drugim przez z:-1) — na wąskim ekranie siatka staje się stosem, więc bez tej reguły ten sam
   kadr pokazywałby się dwa razy. Klasę nadaje mobNakladki() w js/lgrid.js. */
@media(max-width:1024px){.lgrid .blk.mob-kryty{display:none!important}}

/* wąski telefon: jedna kolumna — przy dwóch kadr ma ~150px i nic z niego nie widać */
@media(max-width:560px){
  .lgrid{grid-template-columns:1fr;margin-left:clamp(12px,calc(var(--vwu) * 3.5),22px)!important;margin-right:clamp(12px,calc(var(--vwu) * 3.5),22px)!important}
  .lgrid .blk{grid-column:1 / -1!important}
  .lgrid .m-box{aspect-ratio:var(--ar,3 / 2)}  /* jedna kolumna: naturalne proporcje, nic nie kadrujemy */
}


/* ===== WYBOR KLIENTA (galeria z ?wybor=1) =====
   Cala warstwa wchodzi TYLKO przy klasie `lg-wybor` na <html>, ktora ustawia lgrid.js po
   sprawdzeniu adresu. Publiczne galerie nie widza tych regul w ogole. */
html.lg-wybor .blk-media{position:relative}
.wyb-znak{position:absolute;top:12px;right:12px;z-index:6;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:rgba(245,241,229,.82);color:var(--mid);
  display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1;
  cursor:pointer;padding:0;backdrop-filter:blur(6px);transition:background .15s,color .15s,transform .12s}
.wyb-znak:hover{transform:scale(1.06);color:var(--ink)}
.blk-media.wyb .wyb-znak{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.blk-media.wyb .m-box{outline:2px solid var(--ink);outline-offset:4px}
.blk-media.wyb::after{content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 9999px rgba(28,28,26,.10)}

.wyb-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--frame,30px) + 78px);
  z-index:900;display:flex;align-items:center;gap:18px;padding:12px 18px;
  background:var(--cream);border:1px solid var(--line);box-shadow:0 10px 34px rgba(0,0,0,.18);
  font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:var(--ink);max-width:calc(100vw - 40px)}
.wyb-bar .wyb-n{text-transform:uppercase;font-weight:500;white-space:nowrap}
.wyb-bar .wyb-info{color:var(--mid);letter-spacing:.02em;text-transform:none}
.wyb-bar.pusty .wyb-info{display:block}
.wyb-btns{display:flex;gap:8px}
.wyb-bar button{height:34px;padding:0 16px;border:1px solid var(--line);background:transparent;
  color:var(--ink);font:inherit;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.wyb-bar button:hover{background:var(--ink);color:var(--cream)}
.wyb-bar button.ghost{border-color:var(--line-soft);color:var(--mid)}
.wyb-txt{position:fixed;left:50%;bottom:120px;transform:translateX(-50%);z-index:901;
  width:min(560px,calc(var(--vwu) * 90));height:160px;font-size:12px;padding:10px;border:1px solid var(--line);
  background:var(--cream);color:var(--ink)}
@media(max-width:760px){
  .wyb-bar{flex-wrap:wrap;justify-content:center;gap:10px;bottom:74px;padding:10px 12px;text-align:center}
  .wyb-bar .wyb-info{display:none}
  .wyb-znak{width:34px;height:34px;top:8px;right:8px}
}

/* ===== ODWROCONE KOLORY GALERII (settings.invert) =====
   Ten sam zestaw zmiennych co w `:root` strony, tylko wywrocony: kremowe tlo staje sie atramentem,
   a tekst i linie kremem. Klasa siedzi na <html>, wiec przykrywa `:root` (wyzsza specyficznosc)
   i odwraca CALA strone galerii — rame, menu, stopke i siatke naraz.
   UWAGA: dokladnie ten sam zestaw musi byc w `<style>` edytora jako `#gwrap.inv` — pilnuje
   tego `node _tinvert.mjs`. */
html.lg-inv{
  --cream:#14140F;--cream-2:#1F1F19;--ink:#F2EEE2;--mid:#9B9B8E;--accent:#C9C9BC;
  --line:rgba(242,238,226,.5);--line-soft:rgba(242,238,226,.18);
}

/* Rzeczy, ktore w odwroconej galerii NIE odwroca sie same:
   1) logo to czarny PNG — filtrem robimy z niego kremowe (zmierzone w Chromium: `invert(1)
      brightness(.95)` daje rgb(242,242,242), czyli praktycznie krem #F2EEE2);
   2) tlo lightboxa jest wpisane na sztywno w kazdym galeria_*.html (`rgba(245,241,229,.97)`),
      wiec nie idzie za zmiennymi — podmieniamy je tutaj, jednym miejscem dla wszystkich stron.
   Reszta (ramy, menu, stopka, przyciski lightboxa, licznik) leci ze zmiennych i odwraca sie sama. */
html.lg-inv .s-logo img{filter:invert(1) brightness(.95)}
html.lg-inv .lb{background:var(--lb-bg,rgba(20,20,15,.97))}
/* tlo lightboxa idzie za wlasnym tlem galerii takze w wersji jasnej (reguly `.lb` siedza
   na sztywno w kazdym galeria_*.html, ta ma wyzsza specyficznosc i je przykrywa) */
html .lb{background:var(--lb-bg,rgba(245,241,229,.97))}
/* LICZNIK GLEBOKOSCI (v11.58) — `position:fixed`, wiec nie rusza siatki ani o piksel.
   Domyslnie przygaszony; rozjasnia sie pod kursorem i w trakcie pisania. */
/* POŁOŻENIE (v11.65, uwaga Jarka): na dole prawego rogu licznik wchodził na przełącznik PL/EN.
   Teraz stoi w POŁOWIE WYSOKOŚCI okna, przy prawej krawędzi, wewnątrz ramy strony. */
.lg-gleb{position:fixed;right:calc(var(--frame,30px) + 24px);top:50%;transform:translateY(-50%);
  z-index:60;display:flex;align-items:center;gap:7px;background:var(--cream,#F5F1E5);
  border:1px solid var(--line,rgba(0,0,0,.12));border-radius:99px;padding:7px 14px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid,#6a6a5f);
  box-shadow:0 6px 22px rgba(0,0,0,.10);opacity:.45;transition:opacity .25s}
.lg-gleb:hover,.lg-gleb.pisze{opacity:1}
.lg-gleb .lg-g-i{width:3.6em;border:0;background:transparent;color:var(--ink,#1C1C1A);
  font:inherit;font-weight:600;letter-spacing:.06em;text-align:right;padding:0;
  font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.lg-gleb .lg-g-i:focus{outline:none}
.lg-gleb.pisze .lg-g-i{box-shadow:0 1px 0 0 var(--ink,#1C1C1A)}
.lg-gleb .lg-g-n{font-variant-numeric:tabular-nums;opacity:.65}
html.lg-wybor .lg-gleb{top:50%}   /* pasek wyboru stoi na dole, więc nic tu nie koliduje */
/* TELEFON: na dole ekranu stoi pasek strony (data + PL/EN), wiec licznik musi byc NAD nim —
   inaczej wchodzi wprost na przelacznik jezyka. 76 px = wysokosc paska (z powiekszonym
   celem dotyku dla PL/EN) plus zapas. */
@media(max-width:560px){.lg-gleb{right:calc(var(--frame,16px) + 8px);padding:6px 11px;font-size:9px}}
@media print{.lg-gleb{display:none}}
/* TELEFON: powrot („← Strona glowna") w bloku naglowka mial 24 px wysokosci — pod palec za malo.
   Regula musi byc TUTAJ, bo w pliku strony przegrywa specyficznoscia z `.lgrid .blk-head .h-back`. */
@media(max-width:640px){.lgrid .blk-head .h-back{padding:10px 0}}
/* otwarte powiekszenie: licznik glebokosci znika (na telefonie staja w tym samym rogu) */
html.lb-on .lg-gleb{opacity:0;pointer-events:none}