/* ==========================================================================
   jasinscy.org.pl — arkusz stylów serwisu statycznego
   Język wizualny wspólny z opracowaniem ksiąg grodzkich łukowskich:
   papier w odcieniu kremowym, sangwina jako jedyny akcent, kroje szeryfowe.
   Bez zewnętrznych zasobów — żadnych czcionek ani skryptów z obcych serwerów.
   ========================================================================== */

:root{
  --papier:#e9e6dd; --karta:#f6f4ee; --pas:#dfdbcf;
  --atrament:#1d2126; --atrament-2:#4e545c; --atrament-3:#626059;
  --kreska:#cdc8b9;
  --sanguina:#8d3826; --sanguina-tlo:#f0e2dc;
  --uwaga:#f6ecdc; --uwaga-kreska:#b98f4a;
  --cien:0 1px 2px rgba(29,33,38,.05), 0 .5rem 1.5rem -1rem rgba(29,33,38,.35);
  --odwroc:1;           /* motto: biały napis trzeba odwrócić na ciemny */
  /* Każdy krój na liście ma komplet polskich liter (ą ć ę ł ń ó ś ź ż), a lista
     kończy się rodziną ogólną. Jeśli czytelnikowi zabraknie kroju z początku,
     przeglądarka sięgnie po następny — a nie po przypadkowy zapasowy, w którym
     „ł” albo „ń” wypadłoby innym pismem niż reszta słowa. Dołożone Noto, DejaVu
     i Liberation to kroje standardowo obecne w Linuksie i w Androidzie. */
  --szeryf:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",
           "Times New Roman",Georgia,"Noto Serif","DejaVu Serif","Liberation Serif",serif;
  --tekstowy:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,
             "Noto Sans","DejaVu Sans","Liberation Sans",sans-serif;
  --aparat:ui-monospace,"SFMono-Regular",Menlo,Consolas,"DejaVu Sans Mono",
           "Liberation Mono","Noto Sans Mono",monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-motyw="jasny"]){
    --papier:#15171b; --karta:#1c1f24; --pas:#22252b;
    --atrament:#e7e3d8; --atrament-2:#b2b0a7; --atrament-3:#8f8e86;
    --kreska:#343840;
    --sanguina:#d5907a; --sanguina-tlo:#2b1f1b;
    --uwaga:#26211a; --uwaga-kreska:#8a6c2e;
    --cien:0 1px 2px rgba(0,0,0,.4), 0 .625rem 1.875rem -1.125rem rgba(0,0,0,.8);
    --odwroc:0;         /* w ciemnym motto zostaje białe */
    color-scheme:dark;
  }
}
:root[data-motyw="ciemny"]{
  --papier:#15171b; --karta:#1c1f24; --pas:#22252b;
  --atrament:#e7e3d8; --atrament-2:#b2b0a7; --atrament-3:#8f8e86;
  --kreska:#343840;
  --sanguina:#d5907a; --sanguina-tlo:#2b1f1b;
  --uwaga:#26211a; --uwaga-kreska:#8a6c2e;
  --cien:0 1px 2px rgba(0,0,0,.4), 0 .625rem 1.875rem -1.125rem rgba(0,0,0,.8);
  --odwroc:0;
  color-scheme:dark;
}

*{box-sizing:border-box}
/* ------------------------------------------------------ wielkość widoku
   Cały układ — pismo, odstępy, szerokości kolumn, wysokość motta — jest
   wyrażony w „rem”, czyli w wielokrotnościach stopnia pisma korzenia. Ta
   jedna wartość ustawia więc wielkość całej strony: 90 % znaczy tyle, co
   ustawienie powiększenia 90 % w przeglądarce, tylko że działa u każdego
   i jednakowo — w każdej przeglądarce, na każdej stronie i podstronie,
   w obu językach, także w opracowaniu ksiąg grodzkich.
   Nie robimy tego właściwością „zoom”: przeglądarki rozumieją ją różnie
   i w części z nich strona przestaje wypełniać okno (pas pustego tła
   przy prawej krawędzi). Skalowanie stopniem pisma korzenia jest zwykłym,
   powszechnie obsługiwanym mechanizmem CSS.
   Wartość w procentach, a nie w pikselach, bo dzięki temu czytelnik, który
   ustawił sobie w przeglądarce większe pismo, dalej je ma — strona bierze
   90 % jego wielkości, nie narzuca własnej. */
html{font-size:90%;scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--atrament);
     font-family:var(--tekstowy);font-size:.92rem;line-height:1.55;
     -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
a{color:var(--sanguina)}

.wrap{max-width:75rem;margin:0 auto;padding-left:1.25rem;padding-right:1.25rem}
.waski{max-width:62.5rem;margin:0 auto;padding-left:1.25rem;padding-right:1.25rem}

.przeskocz{position:absolute;left:-624.9375rem;top:0;background:var(--karta);
  color:var(--atrament);padding:.625rem 1rem;z-index:100;border:1px solid var(--kreska)}
.przeskocz:focus{left:.75rem;top:.75rem}

/* ------------------------------------------------------- motto rodowe
   „Szukajmy tego, co łączy, unikajmy tego, co dzieli” — grafika z dawnego
   sztandaru strony, wyostrzona i złożona w jedną linijkę. To gotowa ciemna
   tabliczka, z której wycięliśmy same litery: tło jest przezroczyste, litery
   białe, wiersz wyprostowany do poziomu. W trybie jasnym odwracamy barwy
   na czarne — decyduje o tym zmienna --odwroc z palety motywu. */
.motto{border-bottom:1px solid var(--kreska);background:var(--papier)}
.motto .wrap{padding-top:.5625rem;padding-bottom:.5rem}
/* Angielska tabliczka jest złożona tym samym krojem (chancery) i w tej samej
   wysokości liter małych co polska — proporcje obu plików są dobrane tak, że
   przy jednakowej wysokości CSS oba napisy siedzą na tej samej linii i mają
   litery tej samej wielkości. Dlatego żadnych osobnych wysokości dla :lang(en). */
.motto img{display:block;height:1.5625rem;width:auto;max-width:100%;
           filter:invert(var(--odwroc));opacity:.72}
@media(max-width:820px){.motto img{height:1.3125rem}}
@media(max-width:620px){.motto img{height:1.125rem}}

/* ------------------------------------------------------------- nagłówek */
.szczyt{position:sticky;top:0;z-index:40;background:var(--papier);
        border-bottom:1px solid var(--kreska)}
/* Pasek nazwy trzyma się dokładnie tej samej szerokości co motto nad nim
   i bloki treści pod nim — nazwa zaczyna się równo pod początkiem motta,
   a menu kończy się równo z prawą krawędzią kolumny bocznej. Nic z góry
   strony nie wychodzi poza obrys treści (poza fotografią, która jest
   celowo na pełną szerokość). */
.szczyt .wrap{display:flex;align-items:center;gap:.875rem;flex-wrap:wrap;
              padding-top:.6875rem;padding-bottom:.6875rem}
/* Motto zaczyna się cudzysłowem — znakiem lekkim, wiszącym wysoko. Gdyby „J”
   nazwy stanęło dokładnie w tej samej pionowej linii, optycznie wychodziłoby
   przed motto. Kilka pikseli wcięcia wyrównuje to dla oka. */
.marka{display:flex;align-items:center;gap:.6875rem;text-decoration:none;color:inherit;
       flex:0 0 auto;padding-left:.625rem}
.marka svg{width:1.6875rem;height:1.6875rem;flex:0 0 auto;color:var(--sanguina)}
/* Szerokość bloku nadaje nazwa (nie łamie się), a podtytuł układa się pod nią
   z wyrównaniem do prawej. Żadnego rozstrzelenia: dawne text-align-last:justify
   wyrównywało obie linijki co do piksela, ale w angielskim, gdzie nazwa jest
   znacznie dłuższa od podtytułu, rozpychało go na nieczytelne odstępy. */
.marka span{display:block;width:max-content}
.marka b{font-family:var(--szeryf);font-size:1.82rem;font-weight:600;
         display:block;line-height:1.15;letter-spacing:.005em;
         white-space:nowrap}
/* Podtytuł rozłożony na szerokość nazwy: ziemia dosunięta do lewej, parafia
   do prawej, kropka pośrodku. Szerokość wypełnia układ, a nie rozciągane
   odstępy między literami — dzięki temu w obu językach wygląda tak samo. */
.marka small{display:flex;gap:.42em;align-items:baseline;
             font-family:var(--aparat);font-size:.64rem;
             letter-spacing:.12em;text-transform:uppercase;
             color:var(--atrament-2);white-space:nowrap}
.marka small i{font-style:normal;color:var(--atrament-3)}

/* Menu rozkłada się na całej wolnej przestrzeni między nazwą a przyciskami,
   a nie dosuwa do prawej — dzięki temu zajmuje w obu językach ten sam pas,
   mimo że angielskie hasła są krótsze od polskich. */
nav.glowna{flex:1 1 auto;min-width:0;margin-right:1.375rem;display:flex;
           flex-wrap:wrap;justify-content:space-between;align-items:center}
/* Stopień pisma menu dopasowuje się do szerokości okna. Pasek ma teraz
   szerokość treści, więc pismo jest o włos mniejsze niż wcześniej — za to
   nic nie wychodzi poza obrys strony. */
nav.glowna a{font-size:clamp(.72rem,.40rem + .342vw,.82rem);
  color:var(--atrament-2);text-decoration:none;
  padding:.4375rem .375rem;border-radius:.25rem;white-space:nowrap}
nav.glowna a:hover{color:var(--sanguina);background:var(--sanguina-tlo)}
nav.glowna a[aria-current]{color:var(--sanguina);font-weight:600}

.narzedzia{display:flex;gap:.375rem;align-items:center;flex:0 0 auto}
button.ikonka{background:none;border:1px solid var(--kreska);border-radius:.3125rem;
  color:var(--atrament-2);width:2.125rem;height:2.125rem;cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center}
button.ikonka:hover{border-color:var(--sanguina);color:var(--sanguina)}
button.ikonka svg{width:1.0625rem;height:1.0625rem}
a.szukajka-link{display:inline-flex;align-items:center;justify-content:center;
  width:2.125rem;height:2.125rem;border:1px solid var(--kreska);border-radius:.3125rem;
  color:var(--atrament-2);text-decoration:none}
a.szukajka-link:hover{border-color:var(--sanguina);color:var(--sanguina)}
a.szukajka-link svg{width:1.0625rem;height:1.0625rem}
a.szukajka-link[aria-current]{border-color:var(--sanguina);color:var(--sanguina)}
a.jezyk{display:inline-flex;align-items:center;justify-content:center;height:2.125rem;
  padding:0 .625rem;border:1px solid var(--kreska);border-radius:.3125rem;text-decoration:none;
  color:var(--atrament-2);font-family:var(--aparat);font-size:.72rem;letter-spacing:.08em}
a.jezyk:hover{border-color:var(--sanguina);color:var(--sanguina)}
button.ikonka.menu-przycisk{display:none}
/* Przełącznik „widok komputerowy / mobilny” ma sens tylko tam, gdzie strona
   układa się mobilnie — na szerokim ekranie jest zbędny i po prostu go nie ma.
   Po włączeniu widoku pełnego szerokość rysowania rośnie do 1280 px i ta reguła
   przestałaby obowiązywać, więc przycisk zniknąłby razem z drogą powrotną —
   dlatego klasa „widok-pelny” na korzeniu trzyma go widocznym. */
/* O tym, czy przycisk w ogóle istnieje, decyduje RODZAJ URZĄDZENIA, a nie
   szerokość okna. Dwa powody:
   1. Na komputerze z myszą przycisk jest bezużyteczny — znacznik viewport,
      którym przełącza szerokość rysowania, przeglądarki biurkowe ignorują.
      „pointer: coarse” jest prawdziwe tylko dla palca, więc tam go nie ma.
   2. Po przełączeniu na widok komputerowy szerokość rysowania rośnie do
      1280 px. Gdyby o widoczności decydowało „max-width”, przycisk zniknąłby
      razem z drogą powrotną. „pointer: coarse” nie zmienia się przy zmianie
      szerokości, więc przycisk zostaje. */
button.ikonka.przelacz-widok{display:none}
@media (pointer: coarse){button.ikonka.przelacz-widok{display:inline-flex}}
/* urządzenia bez informacji o wskaźniku (starsze przeglądarki) — po szerokości */
@media (max-width:760px) and (pointer: fine){
  button.ikonka.przelacz-widok{display:none}
}
html.widok-pelny button.ikonka.przelacz-widok{border-color:var(--sanguina);
  color:var(--sanguina)}
[data-motyw="ciemny"] .ikona-slonce,
:root:not([data-motyw="jasny"]) .ikona-slonce{display:none}
[data-motyw="ciemny"] .ikona-ksiezyc,
:root:not([data-motyw="jasny"]) .ikona-ksiezyc{display:block}
.ikona-ksiezyc{display:none}
@media (prefers-color-scheme:light){
  :root:not([data-motyw="ciemny"]) .ikona-slonce{display:block}
  :root:not([data-motyw="ciemny"]) .ikona-ksiezyc{display:none}
}
[data-motyw="jasny"] .ikona-slonce{display:block!important}
[data-motyw="jasny"] .ikona-ksiezyc{display:none!important}
[data-motyw="ciemny"] .ikona-slonce{display:none!important}
[data-motyw="ciemny"] .ikona-ksiezyc{display:block!important}

/* Poniżej tej szerokości menu nie mieści się obok nazwy w żadnym
   z języków — zamiast łamać pasek, chowamy je pod przycisk. */
@media (max-width:1049px){
  button.ikonka.menu-przycisk{display:inline-flex;margin-left:auto}
  nav.glowna{order:10;flex:1 0 100%;min-width:0;margin-left:0;margin-right:0;
             flex-direction:column;gap:0;justify-content:flex-start;
             border-top:1px solid var(--kreska);padding-top:.5rem;margin-top:.25rem}
  /* Menu zwija arkusz stylów, a nie skrypt: gdyby robił to skrypt wykonywany
     po wyrysowaniu strony, nagłówek kurczyłby się na oczach czytelnika
     i cała treść podskakiwałaby w górę (CLS 0,28). Klasa „js” pojawia się
     w korzeniu jeszcze przed pierwszym rysowaniem, więc bez JavaScriptu
     menu po prostu zostaje rozwinięte i dalej działa. */
  html.js nav.glowna{display:none}
  html.js nav.glowna.otwarte{display:flex}
  nav.glowna a{padding:.625rem .375rem;font-size:.95rem;border-radius:0}
  .narzedzia{margin-left:.5rem}
}

/* ------------------------------------------------------------ typografia */
h1,h2,h3{font-family:var(--szeryf);font-weight:600;letter-spacing:-.01em;
         text-wrap:balance}
h1{font-size:1.85rem;line-height:1.14;margin:0 0 .5625rem}
h2{font-size:1.34rem;line-height:1.24;margin:1.875rem 0 .625rem}
h3{font-size:1.08rem;line-height:1.32;margin:1.375rem 0 .4375rem}
.nadtytul{font-family:var(--aparat);font-size:.67rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--sanguina);margin:0 0 .75rem}
/* Zdanie wiodące pod tytułem biegnie na szerokość kolumny, tak jak tekst
   pod nim — dawne ograniczenie do 72 znaków łamało je w połowie szerokiej
   strony i zostawiało po prawej pusty pas. */
.wiodacy{font-family:var(--szeryf);font-size:.96rem;line-height:1.48;
         color:var(--atrament-2);margin:0 0 .5rem;max-width:none}
.data{font-family:var(--aparat);font-size:.72rem;letter-spacing:.09em;
      color:var(--atrament-3);text-transform:uppercase}

main{padding-top:1.75rem;padding-bottom:2.875rem}
/* Gołe adresy wklejone w tekst potrafią być dłuższe niż ekran telefonu —
   pozwalamy je łamać, zamiast rozpychać stronę. */
.tekst{font-family:var(--szeryf);font-size:.92rem;line-height:1.56;max-width:none;
       overflow-wrap:break-word}
.tekst a,.opis a{overflow-wrap:anywhere}
.tekst p{margin:0 0 .85em}
/* Wiersze przepisane z dawnego serwisu mają każdą linijkę w osobnym akapicie.
   Pełny odstęp międzyakapitowy rozbijał strofę na luźne zdania — tu linijki
   stoją tak, jak stały na papierze. Pierwszej i ostatniej zostawiamy oddech. */
.tekst p.wers{margin:0 0 .18em}
.tekst p.wers + p:not(.wers){margin-top:1.05em}
.tekst p:not(.wers) + p.wers{margin-top:.2em}
.tekst h2,.tekst h3{font-family:var(--szeryf);font-size:1.1rem;color:var(--atrament);
          margin:1.5em 0 .45em}
.tekst a{color:var(--sanguina);text-decoration:none;
         border-bottom:1px solid var(--kreska)}
.tekst a:hover{border-bottom-color:var(--sanguina)}
/* Odsyłacz stojący samodzielnie w kolumnie tekstu (nie w zdaniu, tylko sam
   w wierszu — tak dawny CMS podawał np. skany testamentu) dostaje wysokość
   pola kliknięcia co najmniej 24 px i odstęp od sąsiadów. WCAG 2.5.8 zwalnia
   z tego wymogu odsyłacze wplecione w zdanie, ale nie takie, które stoją
   jeden pod drugim jak spis — w te trudno trafić palcem. */
.tekst > a{display:inline-block;padding:.4375rem 0;min-height:1.5rem}
.tekst img{border:1px solid var(--kreska);border-radius:.25rem;display:block;
           margin:1.4em auto}
.tekst .srodek{display:block;text-align:center;margin:1.4em 0}
/* Ilustracja dosunięta do lewej krawędzi kolumny tekstu (okładka Księgi Rodu).
   Obrazy w .tekst są blokowe z marginesem „auto”, czyli domyślnie wyśrodkowane —
   samo „text-align:left” na opakowaniu nic by nie dało, marginesu trzeba zdjąć. */
.tekst .lewo{display:block;text-align:left;margin:1.4em 0}
.tekst .lewo img{margin-left:0;margin-right:auto}
.tekst blockquote{margin:1.4em 0;padding:2px 0 2px 1.125rem;
  border-left:2px solid var(--kreska);color:var(--atrament-2);font-style:italic}
.tekst .tabela{overflow-x:auto;margin:1.2em 0}
.tekst .tabela table{margin:0}
.tekst table{border-collapse:collapse;width:100%;font-family:var(--tekstowy);
             font-size:.94rem;margin:1.2em 0}
.tekst td,.tekst th{padding:.4375rem .75rem .4375rem 0;border-bottom:1px solid var(--kreska);
                    vertical-align:top;text-align:left}
.tekst hr{border:0;border-top:1px solid var(--kreska);margin:2em 0}
.zrodlo-art{font-family:var(--tekstowy);font-size:.88rem;color:var(--atrament-3);
  border-top:1px solid var(--kreska);padding-top:.875rem;margin-top:2em}
.przewijana{overflow-x:auto}

/* ------------------------------------------------------------- elementy */
.blok{background:var(--karta);border:1px solid var(--kreska);border-radius:.5rem;
      padding:1.1875rem 1.3125rem;margin:0 0 1.1875rem;box-shadow:var(--cien)}
.uwaga{background:var(--uwaga);border-left:.1875rem solid var(--uwaga-kreska);
  padding:.75rem 1rem;border-radius:0 .3125rem .3125rem 0;margin:1.4em 0;font-size:.97rem}

.przycisk{display:inline-block;font-family:var(--tekstowy);font-size:.9rem;
  color:var(--sanguina);text-decoration:none;border:1px solid var(--kreska);
  border-radius:.3125rem;padding:.5625rem .9375rem;background:var(--karta)}
.przycisk:hover{border-color:var(--sanguina);background:var(--sanguina-tlo)}
.przycisk.mocny{background:var(--sanguina);color:#fff;border-color:var(--sanguina)}
.przycisk.mocny:hover{filter:brightness(1.08)}

/* okruszki */
.okruszki{font-size:.82rem;color:var(--atrament-3);margin:0 0 1.125rem}
/* Odsyłacz w okruszkach musi odróżniać się od otaczającego tekstu czymś
   więcej niż barwą — sama różnica barw nie wystarcza (WCAG 1.4.1). */
.okruszki a{color:var(--atrament-2);text-decoration:underline;
            text-underline-offset:.15em;text-decoration-thickness:1px}
.okruszki a:hover{color:var(--sanguina)}

/* ---------------------------------------------------------- strona główna */
/* Fotografia zjazdowa idzie w całości — nic nie jest przycinane przez
   przeglądarkę (żadnego object-fit:cover), bo kadr jest już gotowy i ludzie
   stoją tuż przy górnej i dolnej krawędzi. */
.hero{position:relative;border-bottom:1px solid var(--kreska);background:var(--pas)}
/* Proporcje wpisane wprost: przeglądarka rezerwuje miejsce na fotografię,
   zanim ta się wczyta, więc treść pod nią nie podskakuje (CLS). */
.hero picture,.hero img{display:block;width:100%;height:auto;aspect-ratio:2400/848}
.hero .podpis{position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));
  color:#f4f1ea;padding:2.875rem 0 .875rem}
.hero .podpis .wrap{padding-bottom:0}
.hero .podpis p{margin:0;font-size:.86rem;text-shadow:0 1px .1875rem rgba(0,0,0,.6)}
/* Na telefonie zdjęcie jest niskie — podpis nie może wtedy leżeć na ludziach,
   więc schodzi pod fotografię. */
@media(max-width:620px){
  .hero .podpis{position:static;background:var(--pas);color:var(--atrament-2);
    padding:.625rem 0 .75rem}
  .hero .podpis p{font-size:.8rem;text-shadow:none}
}

.wstep{padding-top:1.875rem}
.wstep h1{font-size:clamp(1.58rem,3vw,2.16rem)}
.wstep .wiodacy{font-size:1rem}

.kafle{display:grid;gap:1.125rem;grid-template-columns:repeat(auto-fill,minmax(18.125rem,1fr));
       margin:1.875rem 0 0;padding:0;list-style:none}
.kafel{background:var(--karta);border:1px solid var(--kreska);border-radius:.5rem;
  padding:1.0625rem 1.1875rem;box-shadow:var(--cien);display:flex;flex-direction:column}
.kafel h2{margin:0 0 .375rem;font-size:1.1rem;line-height:1.3}
.kafel h2 a{color:var(--atrament);text-decoration:none}
.kafel h2 a:hover{color:var(--sanguina)}
.kafel p{margin:0;color:var(--atrament-2);font-size:.92rem}
.kafel .wiecej{margin-top:auto;padding-top:.875rem;font-family:var(--aparat);
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--sanguina)}

/* Układ strony głównej: treść po lewej, stałe bloki (herb, wskazówki dla
   szukających) w kolumnie po prawej — zaczynają się od razu pod paskiem menu. */
.uklad{display:grid;gap:1.875rem;grid-template-columns:1fr 22.25rem;align-items:start;
       padding-top:1.75rem}
.uklad .wstep{padding-top:0}
@media(max-width:980px){.uklad{grid-template-columns:1fr;gap:1.625rem}}
.dwie-kolumny{display:grid;gap:2.125rem;grid-template-columns:1.35fr .9fr;
              align-items:start;margin-top:2.75rem}
@media(max-width:860px){.dwie-kolumny{grid-template-columns:1fr;gap:1.625rem}}

/* ---------------------------------------------------------- aktualności */
.wpisy{list-style:none;margin:0;padding:0}
.wpisy li{border-bottom:1px solid var(--kreska);padding:.6875rem 0}
.wpisy li:first-child{padding-top:.375rem}
.wpisy li:last-child{border-bottom:0}
.wpisy h3{margin:.1875rem 0 0;font-size:1.04rem}
.wpisy h3 a{color:var(--atrament);text-decoration:none}
.wpisy h3 a:hover{color:var(--sanguina)}
.wpisy p{margin:0;color:var(--atrament-2);font-size:.92rem}
h2.rok{font-family:var(--aparat);font-size:.72rem;letter-spacing:.18em;font-weight:400;
  color:var(--sanguina);border-bottom:1px solid var(--kreska);
  padding-bottom:.3125rem;margin:2.125rem 0 .25rem}

/* ---------------------------------------------------------------- lista */
.spis{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.spis li{display:flex;gap:.75rem;align-items:baseline;
  border-bottom:1px solid var(--kreska);padding-bottom:.6875rem}
.spis li:last-child{border-bottom:0}
.spis a{color:var(--atrament);text-decoration:none;font-weight:500}
.spis a:hover{color:var(--sanguina)}
.spis .opis{color:var(--atrament-2);font-size:.89rem}

/* -------------------------------------------------------------- szukanie
   Całe szukanie dzieje się w przeglądarce na wczytanym spisie treści —
   serwer nie dostaje ani jednego zapytania z wpisanym słowem. */
.szukajka{margin:1.625rem 0 0}
.szukajka .etykieta{display:block;font-family:var(--aparat);font-size:.65rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--sanguina);
  margin:0 0 .4375rem;font-weight:500}
/* Stopień pisma pola nie schodzi poniżej 16 px. Safari na iPhonie przybliża
   całą stronę, gdy dotknie się pola o mniejszym piśmie — i po wpisaniu słowa
   czytelnik zostaje z powiększonym, przesuniętym układem. */
.szukajka input{width:100%;box-sizing:border-box;font-family:var(--tekstowy);
  font-size:16px;padding:.625rem .8125rem;border:1px solid var(--kreska);
  border-radius:.3125rem;background:var(--karta);color:var(--atrament)}
/* Obrys zaznaczenia: najpierw wersja dla starszych przeglądarek (:focus),
   potem :focus-visible, które w nowszych ogranicza obrys do ruchu klawiaturą. */
.szukajka input:focus{outline:2px solid var(--sanguina);outline-offset:1px}
.szukajka input:focus:not(:focus-visible){outline:none}
.szukajka input:focus-visible{outline:2px solid var(--sanguina);outline-offset:1px}
.szukaj-stan{margin:.6875rem 0 0;font-size:.85rem;color:var(--atrament-3)}
.spis.szukaj-wyniki{margin-top:1.25rem}
.spis.szukaj-wyniki li{display:block}
.szukaj-wyniki .dzial{font-family:var(--aparat);font-size:.65rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--sanguina);
  display:block;margin-bottom:.1875rem}
.szukaj-wyniki .urywek{margin:.3125rem 0 0;color:var(--atrament-2);
  font-size:.89rem;line-height:1.5}
.szukaj-wyniki mark{background:var(--sanguina-tlo);color:var(--atrament);
  padding:0 .125rem;border-radius:.125rem}
.uwaga-szukania{margin-top:2.25rem;padding-top:1.0625rem;
  border-top:1px solid var(--kreska);font-size:.85rem;color:var(--atrament-3)}

/* Zapas dla przeglądarek bez „aspect-ratio” (Safari starszy niż 15, przeglądarki
   sprzed 2021): kafelek galerii dostaje wysokość dawnym sposobem — wewnętrznym
   marginesem liczonym od szerokości. Reguła włącza się wyłącznie tam, gdzie
   „aspect-ratio” nie działa, więc w nowszych przeglądarkach nic nie zmienia. */
@supports not (aspect-ratio: 4 / 3){
  .siatka a{position:relative;height:0;padding-top:75%}
  .siatka a img{position:absolute;inset:0;top:0;left:0;width:100%;height:100%}
  .siatka.jedna a,.siatka.zrzuty a{height:auto;padding-top:0}
  .siatka.jedna a img,.siatka.zrzuty a img{position:static}
  .hero picture,.hero img{height:auto}
}

/* --------------------------------------------------------------- galeria */
.siatka{display:grid;gap:.625rem;margin:1.625rem 0 0;padding:0;list-style:none;
  grid-template-columns:repeat(auto-fill,minmax(9.375rem,1fr))}
.siatka a{display:block;border:1px solid var(--kreska);border-radius:.3125rem;
  overflow:hidden;background:var(--pas);aspect-ratio:4/3}
.siatka img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .25s ease}
.siatka a:hover img{transform:scale(1.045)}
/* Galeria z podpisami: pod każdą miniaturą stoi opis przepisany
   z dawnego serwisu. */
.siatka.z-podpisami{grid-template-columns:repeat(auto-fill,minmax(10.625rem,1fr))}
.siatka.z-podpisami li{display:flex;flex-direction:column;gap:.3125rem}
.siatka.z-podpisami a{aspect-ratio:4/3}
.podpis-zdjecia{margin:0;font-size:.78rem;line-height:1.35;color:var(--atrament-3)}
/* Jedno zdjęcie podane jak galeria: powiększa się tym samym skryptem,
   ale zajmuje sensowną szerokość, a nie kafelek wielkości miniatury. */
.siatka.jedna{grid-template-columns:minmax(0,1fr);max-width:47.5rem;margin-top:1.875rem}
.siatka.jedna li{display:flex;flex-direction:column;gap:.4375rem}
.siatka.jedna a{aspect-ratio:auto}
.siatka.jedna img{height:auto;object-fit:contain}
/* Miniatura rysunku, który w powiększeniu ma kilka tysięcy pikseli (drzewo
   rodowe): na stronie stoi mała, a lupa pokazuje go w całości. */
.siatka.jedna.mala{max-width:22.5rem;margin:1.625rem 0 1.5rem}
@media(max-width:520px){.siatka.jedna.mala{max-width:100%}}
/* Zrzuty dawnego serwisu przy wpisie o przebudowie: miniatury stoją obok
   siebie, każda widoczna w całości (bez przycinania), z podpisem pod spodem. */
.siatka.zrzuty{grid-template-columns:repeat(auto-fit,minmax(11.25rem,1fr));
  max-width:42rem;margin:1.625rem 0 1.5rem;gap:.875rem;align-items:start}
.siatka.zrzuty li{display:flex;flex-direction:column;gap:.4375rem}
.siatka.zrzuty a{aspect-ratio:auto}
.siatka.zrzuty img{height:auto;object-fit:contain}
/* Pojedyncza ilustracja pod wpisem — np. okładka książki */
.ilustracja{margin:1.875rem 0 0;padding:0}
.ilustracja img{display:block;width:100%;border:1px solid var(--kreska);border-radius:.3125rem}
.ilustracja figcaption{margin-top:.5rem;font-size:.85rem;color:var(--atrament-3)}
/* Spis treści przepisany z listu — wąskie wiersze, bez punktorów */
.spis-tresci{list-style:none;padding-left:0;margin:0 0 1.1em;
  font-family:var(--tekstowy);font-size:.92rem;line-height:1.45}
.spis-tresci li{margin:0 0 2px}
.spis-tresci ul{list-style:none;padding-left:1.375rem;margin:2px 0 .375rem;
  color:var(--atrament-2)}
.lupa .podpis{position:absolute;left:0;right:0;bottom:2.375rem;margin:0;text-align:center;
  color:#f4f1ea;font-size:.92rem;text-shadow:0 1px .25rem rgba(0,0,0,.9);padding:0 3.75rem}

.albumy{display:grid;gap:1.125rem;grid-template-columns:repeat(auto-fill,minmax(15.625rem,1fr));
  margin:1.625rem 0 0;padding:0;list-style:none}
.album{border:1px solid var(--kreska);border-radius:.5rem;overflow:hidden;
  background:var(--karta);box-shadow:var(--cien)}
.album a{text-decoration:none;color:inherit;display:block}
.album img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  border-bottom:1px solid var(--kreska)}
.album .tresc{padding:.8125rem 1rem}
.album h3{margin:0 0 .1875rem;font-size:1.05rem}
.album p{margin:0;font-size:.84rem;color:var(--atrament-3)}
.album:hover h3{color:var(--sanguina)}

/* lightbox */
.lupa{position:fixed;inset:0;z-index:90;background:rgba(12,12,14,.94);
  display:flex;align-items:center;justify-content:center;padding:1.5rem}
.lupa img{max-width:100%;max-height:100%;object-fit:contain;
  box-shadow:0 1.25rem 3.75rem rgba(0,0,0,.6)}
/* Zrzut całej strony bywa kilkanaście razy wyższy niż szerszy — wpisany
   w okno zrobiłby się nieczytelnym paskiem. Taki obraz pokazujemy na pełną
   szerokość i pozwalamy go przewinąć. */
.lupa.wysoka{display:block;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch}
.lupa.wysoka img{display:block;max-height:none;width:100%;max-width:60rem;
  margin:0 auto 4.5rem;object-fit:fill}
.lupa.wysoka .zamknij,.lupa.wysoka .poprzednie,.lupa.wysoka .nastepne{position:fixed}
/* Przy przewijanym obrazie podpis i licznik zostają przy dolnej krawędzi okna,
   a żeby dało się je odczytać na tle zrzutu — dostają własne tło. */
.lupa.wysoka .podpis,.lupa.wysoka .licznik{position:fixed;background:rgba(12,12,14,.86);
  padding-top:.4rem;padding-bottom:.4rem}
.lupa.wysoka .podpis{bottom:2.6rem}
/* Jedno zdjęcie to nie album — strzałki nie mają czego przewijać. */
.lupa.jedno .poprzednie,.lupa.jedno .nastepne{display:none}
.lupa button{position:absolute;background:rgba(255,255,255,.09);border:0;
  color:#f2efe8;cursor:pointer;font-size:1.7rem;line-height:1;
  width:2.875rem;height:2.875rem;border-radius:50%}
.lupa .zamknij{top:1rem;right:1rem}
.lupa .poprzednie{left:1rem;top:50%;transform:translateY(-50%)}
.lupa .nastepne{right:1rem;top:50%;transform:translateY(-50%)}
.lupa button:hover{background:rgba(255,255,255,.2)}
.lupa .licznik{position:absolute;bottom:1rem;left:0;right:0;text-align:center;
  color:#cfcac0;font-family:var(--aparat);font-size:.72rem;letter-spacing:.1em}

/* ---------------------------------------------------------------- muzyka */
.piesni{list-style:none;margin:1.375rem 0 0;padding:0;display:grid;gap:.625rem}
.piesni li{display:grid;grid-template-columns:2.2rem 1fr;gap:.75rem;
  align-items:center;border-bottom:1px solid var(--kreska);padding-bottom:.625rem}
.piesni li:last-child{border-bottom:0}
.piesni .nr{font-family:var(--aparat);font-size:.76rem;color:var(--atrament-3);
  font-variant-numeric:tabular-nums}
.piesni .nazwa{font-family:var(--szeryf);font-size:1rem}
.piesni audio{grid-column:1/-1;width:100%;height:2.125rem}

/* --------------------------------------------------------------- stopka */
.stopka{border-top:1px solid var(--kreska);background:var(--pas);
        padding:1.625rem 0 2.125rem;font-size:.84rem;color:var(--atrament-2)}
.stopka .wrap{display:grid;gap:1.625rem;grid-template-columns:1.4fr 1fr 1fr}
@media(max-width:760px){.stopka .wrap{grid-template-columns:1fr}}
.stopka h2{font-family:var(--aparat);font-size:.65rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--sanguina);margin:0 0 .5625rem;font-weight:500}
.stopka ul{list-style:none;margin:0;padding:0}
.stopka li{margin:0}
/* Odsyłacz w stopce musi mieć co najmniej 24 px wysokości — inaczej trudno
   w niego trafić palcem (WCAG 2.5.8). Wysokość robi wcięcie, nie odstęp
   listy, bo wtedy powiększa się samo pole kliknięcia. */
.stopka a{color:var(--atrament-2);text-decoration:none;
          display:inline-block;padding:.25rem 0;min-height:1.5rem}
.stopka a:hover{color:var(--sanguina)}
.stopka .daty{margin:1.375rem 0 0;font-family:var(--aparat);font-size:.68rem;
  letter-spacing:.06em;color:var(--atrament-3);grid-column:1/-1;
  border-top:1px solid var(--kreska);padding-top:1rem;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1.5rem}
.stopka .daty p{margin:0}
/* Kontakt trzyma się prawej krawędzi także wtedy, gdy nie zmieści się w jednym
   wierszu z datami — „margin-left:auto” dosuwa go do prawej również we własnym
   wierszu, czego samo justify-content nie robi. Adres nigdy się nie łamie:
   „amj(at)jasinscy.org.pl” przełamane w połowie przestaje być adresem. */
.stopka .daty .prawo{margin-left:auto;text-align:right;white-space:nowrap}
@media(max-width:760px){
  .stopka .daty .prawo{margin-left:0;text-align:left;white-space:normal}
}
/* Cichy licznik wyświetleń: stoi w kolorze tła, więc nikomu nie miga przed
   oczami, a ujawnia się dopiero po zaznaczeniu tego miejsca myszą. */
#licznik{margin:.75rem 0 0;font-family:var(--aparat);font-size:.68rem;
  letter-spacing:.06em;color:transparent}
#licznik::selection{color:var(--atrament-3)}
#licznik::-moz-selection{color:var(--atrament-3)}

@media print{
  .szczyt,.stopka,.okruszki,.narzedzia{display:none!important}
  body{background:#fff;color:#000}
  .blok{box-shadow:none;border:0;padding:0}
}