/* ============================================================
   STRONA GŁÓWNA SERWISU
   Ta sama paleta i typografia, co skóra wspólna podstron
   (szablony/skora/wspolna) — jasny papier, ciemny atrament,
   jeden akcent patynowy. Strona główna nie ma własnego rejestru
   barwnego, bo nie należy do żadnego miasta: jest rozdrożem,
   z którego się do nich wchodzi.

   Plik jest krótki celowo: strona główna nie ma siatki skanów,
   powiększenia ani filtrów, więc nie potrzebuje ich stylów.
   ============================================================ */

:root{
  --bg:            #f4f1ea;
  --bg-deep:       #e9e4d9;
  --bg-raise:      #fffdf8;
  --line:          #d6cec0;
  --line-soft:     #e4ddd0;
  --ink:           #1b232c;
  --ink-soft:      #414c58;
  --ink-faint:     #6b7682;
  --pat:           #2f6152;
  --pat-soft:      #4b7d6d;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

body{
  margin:0;
  background:
    radial-gradient(1020px 560px at 6% -10%, rgba(47,97,82,.045), transparent 60%),
    radial-gradient(900px 520px at 96% 0%, rgba(120,105,70,.05), transparent 58%),
    var(--bg);
  color:var(--ink);
  font-family:"Source Serif 4", Georgia, serif;
  font-size:17.5px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2{font-family:"Old Standard TT", Georgia, serif; font-weight:700; margin:0; text-wrap:balance}
a{color:var(--pat); text-underline-offset:3px}
a:hover{color:#1f463b}
:focus-visible{outline:2px solid var(--pat); outline-offset:3px}

.skip-link{
  position:absolute; left:-999px; top:0; z-index:300;
  background:var(--pat); color:#fff; padding:10px 16px;
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-size:13px;
}
.skip-link:focus{left:12px; top:12px}

/* ---------- pasek przyklejony do góry (Etap 15, D-42) ----------

   Do czternastego etapu nagłówek wymieniał sześć miast obok siebie,
   zawijał się na telefonie do dwóch rzędów i ODJEŻDŻAŁ przy przewijaniu.
   Przy ósmym mieście urósłby do trzech rzędów: rząd odsyłaczy rośnie
   z liczbą stron, a miejsca na ekranie nie przybywa.

   Teraz jest wąski pasek, który zostaje na wierzchu: znak i nazwa po
   lewej (odsyłacz na stronę główną), nazwa bieżącej strony pośrodku,
   rozwijana lista siedmiu podstron po prawej. Lista nie rośnie wszerz
   — rośnie w dół, we własnym okienku.

   DWA PRZYKLEJONE PASKI, NIE JEDEN. Pod tym stoi drugi: filtry (.index).
   Oba miały `top:0`, więc drugi wjechałby pod pierwszy i zniknął.
   Dlatego wysokość paska jest zapisana w `--nav-h` i filtry przyklejają
   się DOKŁADNIE POD nim. Jedna liczba rządzi obiema rzeczami — inaczej
   przy każdej zmianie wysokości paska trzeba by pamiętać o drugim
   miejscu, a nikt nie pamięta. */

:root{ --nav-h:48px; }

.sg-bar{
  position:sticky; top:0; z-index:120;
  background:rgba(255,253,248,.94);
  backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line);
}
.sg-bar-inner{
  max-width:1320px; margin:0 auto; padding:0 32px; height:var(--nav-h);
  display:flex; align-items:center; gap:16px;
}

/* znak + nazwa = odsyłacz na stronę główną. To jest cały „powrót
   na stronę główną" — nie ma osobnego przycisku, bo logo w nagłówku
   jest miejscem, w które i tak każdy klika. */
.sg-home{
  display:flex; align-items:center; gap:9px; flex:0 0 auto;
  text-decoration:none; color:var(--pat); transition:color .18s ease;
}
.sg-home:hover{color:#1f463b}
.sg-mark{display:block; flex:0 0 auto}
.sg-word{
  font-family:"Old Standard TT", Georgia, serif; font-style:italic;
  font-size:16.5px; line-height:1; white-space:nowrap;
}
.sg-here{
  flex:1 1 auto; min-width:0; margin:0; text-align:center;
  font-family:"Old Standard TT", Georgia, serif; font-style:italic;
  font-size:15.5px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Rozwijana lista miast. <details>/<summary> — działa BEZ JavaScriptu,
   także wtedy, gdy skrypt strony się nie wczyta. Skrypty różnią się
   między miastami (Jarosław umie karty jednostronne, Kraków ma starszy
   filtr) i nawigacja nie ma prawa od nich zależeć. */
.sg-menu{flex:0 0 auto; position:relative}
.sg-menu > summary{
  list-style:none; cursor:pointer; -webkit-user-select:none; user-select:none;
  display:inline-flex; align-items:center; gap:7px;
  font-weight:500; font-family:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:12.5px; letter-spacing:.03em; color:var(--ink-soft);
  background:var(--bg-raise); border:1px solid var(--line);
  padding:6px 12px; transition:color .18s ease, border-color .18s ease;
}
.sg-menu > summary::-webkit-details-marker{display:none}
.sg-menu > summary::marker{content:""}
.sg-menu > summary::after{
  content:""; width:0; height:0; margin-top:1px;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid var(--pat-soft);
}
.sg-menu > summary:hover{color:var(--pat); border-color:var(--pat-soft)}
.sg-menu[open] > summary{color:var(--pat); border-color:var(--pat-soft)}
.sg-menu[open] > summary::after{transform:rotate(180deg)}
.sg-list{
  position:absolute; right:0; top:calc(100% + 8px); z-index:130;
  min-width:232px; margin:0; padding:5px 0; list-style:none;
  background:var(--bg-raise); border:1px solid var(--line);
  box-shadow:var(--shadow-card);
}
.sg-list a{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:8px 16px; text-decoration:none; color:var(--ink);
  font-family:"Old Standard TT", Georgia, serif; font-size:17px; line-height:1.3;
}
.sg-list a:hover{background:rgba(47,97,82,.07); color:var(--pat)}
.sg-list a[aria-current="page"]{color:var(--pat); font-style:italic}
.sg-list .sg-n{
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:11.5px; color:var(--ink-faint); flex:0 0 auto;
  font-variant-numeric:tabular-nums;
}
.site-foot-x{color:var(--pat); text-decoration:none; border-bottom:1px solid var(--line)}
.site-foot-x:hover{border-bottom-color:var(--pat-soft)}


/* Strona główna nie ma pod paskiem drugiego paska (filtrów), ale
   wysokość zostaje ta sama, co na podstronach — pasek ma być tym samym
   paskiem, nie podobnym. */

/* ---------- pieczęć we wstępie ---------- */
.hero-znak{display:block; margin:0 0 26px; color:var(--pat)}


/* ---------- wstęp ---------- */
.hero{padding:72px 32px 52px; max-width:1320px; margin:0 auto}
.hero-inner{max-width:800px}
.eyebrow{
  margin:0 0 22px; font-weight:500; font-family:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-size:12px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--pat);
}
.hero h1{
  font-size:clamp(33px, 5.2vw, 54px); line-height:1.12; font-style:italic;
  margin-bottom:26px; letter-spacing:-.01em;
}
.lede{font-size:18.6px; line-height:1.7; color:var(--ink-soft); max-width:64ch; margin:0}
.lede + .lede{margin-top:15px}
.hero-rule{border:0; border-top:1px solid var(--line); margin:34px 0 22px; max-width:800px}
.hero-stats{display:flex; gap:52px; flex-wrap:wrap}
.hero-stats > div{display:flex; flex-direction:column; gap:5px}
.hero-stats b{
  font-family:"Old Standard TT", serif; font-weight:700; font-size:30px;
  color:var(--pat); font-variant-numeric:tabular-nums; line-height:1;
}
.hero-stats span{
  font-weight:500; font-family:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-size:11.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-faint);
}

/* ---------- zdjęcie na wejściu (Etap 28 → Etap 30, D-60, D-69) ----------
   Do Etapu 28 strona główna nie miała ANI JEDNEGO obrazka w dokumencie —
   właściciel odrzucił ją z tego właśnie powodu. Etap 28 dołożył siedem
   kafelków, po jednym z każdego miasta (`.hero-gallery`/`.hero-tile`) —
   Etap 30 je USUWA: siatka mieszała pocztówki pionowe z poziomymi,
   `align-items:stretch` rozciągał każdy kafelek do wysokości najwyższego
   w rzędzie, a pozioma pocztówka w takim rzędzie zostawiała puste tło
   dookoła (zgłoszone przez właściciela, D-69).

   Zamiast siedmiu kafelków — JEDNO zdjęcie, tym samym wzorcem co na
   trzech stronach miejskich z Etapu 28: `.hero-photo`, skopiowane bajt
   w bajt ze skóry wspólnej (`szablony/skora/wspolna/css/style.css`), nie
   nowy komponent. Kolumna tekstu `.hero-inner` ma 800 px w środku
   1320-pikselowego `.hero`; po prawej stronie stoi puste miejsce,
   dokładnie tam, gdzie teraz wchodzi zdjęcie. Na telefonie tego marginesu
   nie ma: `.hero--foto` schodzi do jednej kolumny i zdjęcie wskakuje NAD
   wstęp (D-60, ta sama reguła co na podstronach miejskich). */
.hero--foto{display:flex; flex-wrap:wrap; align-items:flex-start; gap:44px}
.hero--foto .hero-inner{flex:1 1 420px; max-width:800px}
.hero-photo{
  display:block; flex:1 1 320px; max-width:420px;
  border:1px solid var(--line); box-shadow:var(--shadow-card,
    0 2px 8px rgba(40,34,24,.10), 0 8px 20px rgba(40,34,24,.08));
  text-decoration:none; overflow:hidden; background:var(--bg-raise);
  transition:border-color .18s ease;
}
.hero-photo:hover, .hero-photo:focus-visible{border-color:var(--pat-soft)}
.hero-photo img{display:block; width:100%; height:auto}

/* ---------- spis miast ---------- */
.miasta{max-width:1320px; margin:0 auto; padding:0 32px 10px}
.miasta h2{
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-weight:500; font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint);
  padding-bottom:11px; border-bottom:1px solid var(--line-soft); margin-bottom:0;
}
.miasta-lista{list-style:none; margin:0; padding:0}
.miasta-lista li{border-bottom:1px solid var(--line-soft)}
.m{
  display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
  padding:19px 4px; text-decoration:none; color:inherit;
  transition:background .18s ease, padding .18s ease;
}
.m:hover, .m:focus-visible{background:rgba(47,97,82,.055); padding-left:12px}
.m-nazwa{
  font-family:"Old Standard TT", serif; font-weight:700; font-style:italic;
  font-size:27px; line-height:1.1; color:var(--ink); flex:0 0 auto;
}
.m:hover .m-nazwa{color:var(--pat)}
.m-liczby{
  font-weight:500; font-family:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-size:12.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint); flex:1 1 auto;
}
.m-strzalka{
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-size:12.5px; color:var(--pat-soft);
  flex:0 0 auto;
}

/* ---------- ciekawostka ze zbioru: DZF:1:60 (Etap 29, D-67, D-68) ----------

   Osobna, mała sekcja — NIE siódmy kafelek miejski. WYMAGANIA 32 dotyczy
   wyłącznie kafelków miast (seria PT); ta karta ma serię DZF i jest
   jednym, jawnie wybranym wyjątkiem (D-67), nie wynikiem algorytmu.
   Własne klasy, celowo nie dzielone z `.hero-tile` ani z `.pc-*` z podstron
   miejskich — gdyby ktoś kiedyś połączył oba mechanizmy „dla porządku”,
   wyjątek D-67 rozlałby się na resztę serii DZF. Patrz też komentarz
   w `skrypty/generator_glownej.py`, przy `SYGNATURA_OSOBLIWOSCI`. */
.osob{max-width:1320px; margin:0 auto; padding:14px 32px 46px}
.osob h2{
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-weight:500; font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint);
  padding-bottom:11px; border-bottom:1px solid var(--line-soft); margin:0 0 22px;
}
.osob-wrap{display:flex; gap:40px; flex-wrap:wrap}
.osob-zdjecia{display:flex; gap:16px; flex:1 1 320px; max-width:460px}
.osob-foto{margin:0; flex:1 1 0; min-width:0}

/* Skan leży w pliku na boku — ten sam rodzaj usterki co D-44, ale NIE ten
   sam spis (`dane/obroty.json` jest ograniczony do kart na stronach
   miejskich; ta karta na żadną nie wchodzi — patrz generator). Obraca
   WYŁĄCZNIE przeglądarka, plik na dysku zostaje bajt w bajt (WYMAGANIA
   21). `--ar` niesie proporcje PO obrocie (generator zamienia boki);
   ograniczenie rozmiaru idzie na krzyż — `cqw`/`cqh` mierzą gablotę,
   obrócony obraz mierzy się bokiem przeciwnym, inaczej wyszedłby z ramy. */
.osob-stage{
  position:relative; container-type:size;
  aspect-ratio:var(--ar); background:var(--bg-raise); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; padding:8px;
  box-shadow:0 2px 8px rgba(40,34,24,.10), 0 8px 20px rgba(40,34,24,.08);
}
.osob-obrot{
  max-width:100cqh; max-height:100cqw; width:auto; height:auto; display:block;
  transform:rotate(90deg);
}
.osob-foto figcaption{
  margin-top:7px; text-align:center;
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:11px; letter-spacing:.05em; color:var(--ink-faint);
}

.osob-tresc{flex:1 1 380px; min-width:0; max-width:64ch}
.osob-opis{margin:0 0 12px; color:var(--ink-soft)}
.osob-opis--en{color:var(--ink-faint); font-style:italic}

/* Zdanie właściciela: JEGO ustalenie, nie treść katalogu (nie przeszło
   przez sito, bo z katalogu nie pochodzi) — wizualnie odróżnione krojem
   i tłem, jak „w przygotowaniu” przy stronach fotografów (D-48), żeby
   nikt nie wziął go za opis katalogowy. */
.osob-wlasciciel{
  margin:16px 0 0; padding:12px 16px;
  border-left:3px solid var(--pat-soft); background:rgba(47,97,82,.06);
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:14px; line-height:1.6; color:var(--ink-soft);
}
/* Miejsce na trzecie zdjęcie (pod światłem) — WYŁĄCZNIE tekst, nigdy
   grafika udająca efekt (żadnej ikony błysku, żadnego pustego kafla). */
.osob-wkrotce{margin:12px 0 0; color:var(--ink-faint); font-style:italic; font-size:15px}

.osob-syg{
  margin:16px 0 0;
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:11.5px; letter-spacing:.05em; color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}

/* ---------- stopka ---------- */
.site-foot{border-top:1px solid var(--line); margin-top:46px; background:rgba(255,253,248,.6)}
.site-foot-inner{margin:0 auto; padding:32px 32px 78px; max-width:880px}
.site-foot p{
  margin:0; font-family:"Source Serif 4", Georgia, serif; font-size:14.5px; line-height:1.75;
  color:var(--ink-faint);
}
.site-foot p + p{margin-top:14px}

@media (max-width: 720px){
  :root{--nav-h:42px}
  .hero-znak{width:104px; height:104px}
  .hero, .miasta, .osob, .site-foot-inner{padding-left:20px; padding-right:20px}
  .sg-bar-inner{padding-left:20px; padding-right:20px; gap:11px}
  .sg-word{font-size:15px}
  .sg-here{font-size:14.5px}
  .sg-menu > summary{font-size:12px; padding:6px 10px}
  .sg-list{min-width:210px}
  .hero{padding-top:54px; padding-bottom:40px}
  .lede{font-size:18px}
  .hero-stats{gap:28px}
  /* Telefon nie ma pustego marginesu, w którym stoi zdjęcie na pulpicie —
     schodzi więc NAD wstęp, jedną kolumną (D-60). */
  .hero--foto{flex-direction:column; gap:20px}
  .hero-photo{order:-1; max-width:none}
  .m{padding:17px 0; gap:6px 14px}
  .m:hover, .m:focus-visible{padding-left:0}
  .m-nazwa{font-size:24px}
  .m-liczby{flex-basis:100%}
  .m-strzalka{display:none}
  .osob-zdjecia{max-width:280px; margin:0 auto}
}