/* Plik: /css/planeta.css — sekcje „uniwersum”: czarne tablice ze znakami, mieszkańcy, obsada dzieła, rękopisy.
   Ładowany PO /css/sciana.css, tylko na stronach, które tych sekcji używają.
   Grafiki w /img/ppm/ pochodzą z archiwum PPM_4.0 (wycięte postacie, odręczne znaki i napisy artysty). */

/* ---------- Czarna tablica (ten sam zabieg co szyld i Apokalipsa) ---------- */
.tablica-czarna { background-color: var(--sadza); color: var(--na-sadzy); padding: clamp(40px, 7vw, 96px) 0; }
.tablica-czarna .display { color: var(--na-sadzy); }
.tablica-czarna p { color: var(--na-sadzy-muted); }
.tablica-czarna .text-link { color: var(--na-sadzy); }
.tablica-czarna .cytat { color: var(--na-sadzy); }
.tablica-czarna .cytat p { color: var(--na-sadzy); font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.25; }
.tablica-czarna .cytat footer { color: var(--na-sadzy-muted); }

/* Planeta: godło po lewej, tekst po prawej */
.planeta { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 32px 72px; align-items: center; }
.planeta-godlo { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.planeta-godlo .mis { width: min(100%, 240px); height: auto; }
.planeta-godlo .napis { width: min(100%, 320px); height: auto; }
.planeta-tekst > p { max-width: var(--measure); margin-top: 20px; font-size: 1.1875rem; }
.planeta-tekst .cytat { margin-top: 32px; max-width: 30em; }

/* Rząd odręcznych znaków artysty — ozdobnik, nie nawigacja */
.znaki { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px clamp(24px, 6vw, 80px); list-style: none; margin-top: clamp(36px, 6vw, 72px); padding: 0 var(--gutter); }
.znaki img { height: clamp(48px, 7vw, 84px); width: auto; opacity: 0.9; }
/* Te same znaki na jasnej ścianie: biała kreda zamieniona na sadzę */
.znaki.na-scianie img { filter: invert(1); opacity: 0.75; }
.znaki.na-scianie { margin-top: 0; padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(28px, 4vw, 48px); }

/* ---------- Mieszkańcy: wycięte postacie stojące na listwie ---------- */
.mieszkancy { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 20px; list-style: none; margin-top: 32px; align-items: end; }
.mieszkancy a { display: flex; flex-direction: column; height: 100%; justify-content: flex-end; text-decoration: none; color: var(--text-main); }
.mieszkancy img { width: 100%; height: clamp(200px, 26vw, 340px); object-fit: contain; object-position: center bottom; }
.mieszkancy .podpis { display: block; margin-top: 12px; padding-top: 10px; border-top: 3px solid var(--text-main); font-weight: 700; line-height: 1.25; }
.mieszkancy .rola { display: block; font-size: 0.9375rem; font-weight: 400; color: var(--text-muted); margin-top: 2px; }
.mieszkancy a:hover .podpis { border-top-color: var(--accent-red); }
.mieszkancy a:hover img { transform: translateY(-6px); }
@media (prefers-reduced-motion: no-preference) { .mieszkancy img { transition: transform 0.2s ease; } }

/* ---------- Obsada dzieła nr 322: twarze w kwadratach ---------- */
.obsada-uklad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 32px 64px; align-items: start; margin-top: 24px; }
.obsada-opis p { max-width: var(--measure); }
.obsada-opis p + p { margin-top: 1em; }
.obsada-figury { display: flex; align-items: flex-end; gap: 8px; margin-top: 28px; }
.obsada-figury img { height: clamp(220px, 30vw, 380px); width: auto; }
.obsada { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; list-style: none; }
.obsada img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 2px; background-color: var(--lipa); }
.obsada .imie { display: block; margin-top: 8px; font-weight: 700; color: var(--text-main); line-height: 1.25; }
.obsada .kim { display: block; font-size: 0.9375rem; color: var(--text-muted); line-height: 1.4; margin-top: 2px; }

/* ---------- Rękopisy: kartki artysty na czarnym tle ---------- */
.rekopisy-dwa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 980px; margin: 32px auto 0; padding: 0 var(--gutter); }
.rekopisy-dwa img { width: 100%; height: auto; }
.rekopisy-tor { display: flex; gap: 12px; overflow-x: auto; padding: 0 var(--gutter) 14px; margin-top: 32px; scrollbar-color: var(--na-sadzy-muted) transparent; }
.rekopisy-tor figure { flex: none; }
.rekopisy-tor img { height: clamp(320px, 62vh, 620px); width: auto; max-width: none; }
.rekopisy-tor figcaption { margin-top: 8px; font-size: 0.9375rem; color: var(--na-sadzy-muted); }
.tablica-czarna .podpis-tablicy { max-width: var(--measure); margin-top: 16px; }

/* ---------- Kto jest kim: lista postaci z kanonu ---------- */
.aktorzy { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 0 40px; margin-top: 24px; }
.aktorzy > div { border-top: 1px solid var(--border-color); padding: 18px 0; }
.aktorzy dt { font-stretch: 75%; font-variation-settings: "wdth" 75; font-weight: 800; font-size: 1.5rem; line-height: 1.05; color: var(--text-main); }
.aktorzy dd { margin-top: 6px; }

/* Prawa świata: trzy krótkie akapity z wypowiedzią artysty */
.prawa { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 32px 40px; margin-top: 28px; }
.prawa h3 { font-size: 1.0625rem; font-weight: 700; color: var(--text-main); }
.prawa p { margin-top: 8px; }
.prawa .slowa { font-family: var(--font-quote); font-style: italic; font-size: 1.3125rem; line-height: 1.4; color: var(--text-main); padding-left: 16px; border-left: 3px solid var(--accent-red); margin-top: 14px; }

/* Wypowiedź artysty pod opisem cyklu */
.cykl-opis .slowa-artysty { max-width: var(--measure); margin-top: 28px; }
.cykl-opis .slowa-artysty p { font-family: var(--font-quote); font-style: italic; font-size: 1.5rem; line-height: 1.35; color: var(--text-main); padding-left: 16px; border-left: 3px solid var(--accent-red); }
.cykl-opis .slowa-artysty p + p { margin-top: 0.6em; }
.cykl-opis .slowa-artysty footer { margin-top: 10px; padding-left: 19px; font-size: 0.9375rem; font-weight: 600; color: var(--text-muted); }

@media (max-width: 1100px) { .mieszkancy { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mieszkancy { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
    .planeta { grid-template-columns: 1fr; }
    .planeta-godlo { flex-direction: row; justify-content: flex-start; }
    .planeta-godlo .mis { width: 96px; }
    .planeta-godlo .napis { width: 180px; }
    .obsada-uklad { grid-template-columns: 1fr; }
    .rekopisy-dwa { grid-template-columns: 1fr; }
}

/* ---------- Strona artysty ---------- */
.artysta-kadr { background-color: var(--sadza); }
.artysta-kadr img { width: 100%; height: min(78vh, 70vw); min-height: 280px; object-fit: contain; object-position: center bottom; margin: 0 auto; }
/* Tekst obok obrazu; .odwrot zamienia strony */
.para { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px 64px; align-items: start; margin-top: 24px; }
.para p { max-width: var(--measure); }
.para p + p, .para ul + p { margin-top: 1em; }
.para figure img { width: 100%; height: auto; border-radius: 2px; }
.para figcaption, .kadry figcaption { font-size: 0.9375rem; color: var(--text-muted); margin-top: 8px; }
.para .slowa { font-family: var(--font-quote); font-style: italic; font-size: 1.5rem; line-height: 1.35; color: var(--text-main); padding-left: 16px; border-left: 3px solid var(--accent-red); margin-top: 24px; }
.para .slowa + .zrodlo { margin-top: 10px; padding-left: 19px; font-size: 0.9375rem; font-weight: 600; color: var(--text-muted); }
.tablica-czarna .para .slowa { color: var(--na-sadzy); }
.tablica-czarna .para figcaption, .tablica-czarna .kadry figcaption { color: var(--na-sadzy-muted); }
.artysta-metryka { max-width: 720px; }

/* Oś czasu */
.os-czasu { list-style: none; margin-top: 28px; max-width: 980px; }
.os-czasu li { display: grid; grid-template-columns: minmax(96px, 0.22fr) minmax(0, 1fr); gap: 4px 32px; padding: 16px 0; border-top: 1px solid var(--border-color); align-items: baseline; }
.os-czasu li:last-child { border-bottom: 1px solid var(--border-color); }
.os-czasu .rok { font-stretch: 75%; font-variation-settings: "wdth" 75; font-weight: 800; font-size: 1.5rem; line-height: 1.05; color: var(--text-main); }
.os-czasu strong { color: var(--text-main); }

/* Techniki: lista haseł z opisem */
.techniki { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0 40px; margin-top: 24px; }
.techniki > div { border-top: 1px solid var(--border-color); padding: 18px 0; }
.techniki dt { font-weight: 700; color: var(--text-main); font-size: 1.1875rem; }
.techniki dd { margin-top: 6px; }

/* Znaki wypalane w drewnie: zdjęcia w kwadratach */
.runy { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; list-style: none; margin-top: 28px; }
.runy img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 2px; background-color: var(--lipa); }

/* Kadry z pracowni */
.kadry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.kadry img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; }

@media (max-width: 860px) {
    .para { grid-template-columns: 1fr; }
    .runy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kadry { grid-template-columns: 1fr; }
    .kadry img { aspect-ratio: 4 / 3; }
    .os-czasu li { grid-template-columns: 1fr; }
}

/* ---------- Goście na Planecie: ścieżka wizyt ---------- */
.wizyty { list-style: none; margin-top: 12px; }
.wizyty > li { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px 56px; align-items: center; padding: clamp(28px, 4vw, 56px) 0; border-top: 1px solid var(--border-color); }
.wizyty > li:nth-child(even) > figure { order: 2; }
.wizyty figure img { width: 100%; height: auto; max-height: 78vh; object-fit: cover; border-radius: 2px; background-color: var(--lipa); }
.wizyty .data { font-weight: 600; color: var(--accent-red); }
.wizyty h3 { margin-top: 6px; font-size: clamp(1.75rem, 3.2vw, 2.75rem); }
.wizyty p { max-width: var(--measure); margin-top: 14px; }
.wizyty .slowa { font-family: var(--font-quote); font-style: italic; font-size: 1.375rem; line-height: 1.4; color: var(--text-main); padding-left: 16px; border-left: 3px solid var(--accent-red); }
.wizyty .bez-zdjecia { grid-column: 1 / -1; max-width: 980px; }
@media (max-width: 860px) {
    .wizyty > li { grid-template-columns: 1fr; }
    .wizyty > li:nth-child(even) > figure { order: 0; }
}

/* ---------- Chronologia projektu ---------- */
.kronika-rok { padding-top: clamp(40px, 6vw, 80px); border-top: 3px solid var(--text-main); margin-top: clamp(24px, 4vw, 48px); }
.kronika-rok h2.display { font-size: clamp(3.5rem, 11vw, 9rem); }
.kronika-rok .wizyty > li:first-child { border-top: 0; }
.wizyty figure.plakat img { width: auto; max-width: 100%; max-height: 72vh; object-fit: contain; margin: 0 auto; background: none; }
.wizyty > li.szeroki { grid-template-columns: 1fr; }
.klatki { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.klatki img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; background-color: var(--sadza); }
.klatki figcaption { font-size: 0.9375rem; color: var(--text-muted); margin-top: 6px; }
.wizyty .linki { display: flex; flex-wrap: wrap; gap: 8px 24px; }
@media (max-width: 860px) {
    .klatki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Strona artysty: kolejne etapy pracy nad jednym dziełem */
.proces { margin-top: 40px; }
.proces h3 { font-size: 1.1875rem; font-weight: 700; color: var(--text-main); margin: 32px 0 14px; }
.proces h3:first-child { margin-top: 0; }
.klatki.trzy { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.proces .klatki img { background-color: var(--lipa); }
@media (max-width: 860px) {
    .klatki.trzy { grid-template-columns: 1fr; }
    .klatki.trzy img { aspect-ratio: 4 / 3; }
}

/* Rysunki archiwalne: opis kartonu obok jego tabliczki */
.cykl-opis .para.karton { margin-top: 0; align-items: center; }
.cykl-opis .para.karton .desc-text + .desc-text { margin-top: 1em; }
.cykl-opis .para.karton + .desc-card { margin-top: 28px; }
.cykl-opis .para.karton figure { max-width: 460px; }

/* ---------- Rozmowy o dziełach: pytania i odpowiedzi ---------- */
.zastrzezenie { max-width: var(--measure); margin-top: 28px; padding: 18px 20px; background-color: var(--card-bg); border-left: 3px solid var(--accent-red); border-radius: 2px; font-size: 1rem; }
.zastrzezenie p + p { margin-top: 0.8em; }
.cykl-opis .spis { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; max-width: none; }
.rozmowa-sekcja { scroll-margin-top: 16px; }
.rozmowa-sekcja .nagranie { font-size: 0.9375rem; color: var(--text-muted); max-width: var(--measure); }
.rozmowa-sekcja .do-karty { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.rozmowa { margin-top: 24px; max-width: 980px; }
.rozmowa > div { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 6px 40px; padding: 18px 0; border-top: 1px solid var(--border-color); }
.rozmowa > div:last-child { border-bottom: 1px solid var(--border-color); }
.rozmowa dt { font-weight: 700; color: var(--text-main); }
.rozmowa .czas { display: block; font-size: 0.875rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.slowa-krotkie { font-family: var(--font-quote); font-style: italic; font-size: 1.1875em; line-height: 1.35; color: var(--text-main); }
.tabela-przewijana { overflow-x: auto; margin-top: 20px; }
.zrodla { border-collapse: collapse; min-width: 640px; width: 100%; max-width: 980px; font-size: 1rem; }
.zrodla th, .zrodla td { text-align: left; padding: 10px 16px 10px 0; border-top: 1px solid var(--border-color); vertical-align: top; }
.zrodla th { color: var(--text-muted); font-weight: 600; border-top: 0; }
.zrodla td:first-child { font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
    .rozmowa > div { grid-template-columns: 1fr; }
}

/* ---------- Hasła (hashtagi) i wypowiedzi dosłowne ---------- */
.hasla { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 12px; max-width: none; }
.haslo { display: inline-block; font-size: 0.9375rem; font-weight: 600; color: var(--text-main); text-decoration: none; padding: 3px 10px; border: 1px solid var(--text-main); border-radius: 999px; }
.haslo:hover { background-color: var(--text-main); color: var(--bg-color); }
.cykl-opis .spis .haslo { font-size: 1rem; }
.teren-wstep { max-width: var(--measure); font-size: 1.125rem; }
.dzielo-rozmowa { margin-top: 44px; scroll-margin-top: 16px; }
.dzielo-rozmowa > span[id] { display: block; scroll-margin-top: 16px; }
.dzielo-rozmowa h3.display { font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
.dzielo-rozmowa .do-karty { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px; }
.dzielo-rozmowa .rozmowa { margin-top: 16px; }
.rozmowa .wypowiedz { font-family: var(--font-quote); font-size: 1.3125rem; line-height: 1.4; color: var(--text-main); }
.haslo-sekcja { scroll-margin-top: 16px; }
.haslo-miejsca { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px 40px; margin-top: 20px; }
.haslo-miejsca h3 { font-size: 1rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.haslo-miejsca ul { list-style: none; }
.haslo-miejsca li { border-top: 1px solid var(--border-color); }
.haslo-miejsca a { display: block; padding: 9px 0; color: var(--text-main); text-decoration: none; font-weight: 600; }
.haslo-miejsca a:hover { text-decoration: underline; text-decoration-color: var(--accent-red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* Odsyłacz do rozmów na stronach terenów i cykli */
.cykl-opis .do-rozmow { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; max-width: none; }

/* ---------- Przyciski: czarne kafle ze znakami artysty ----------
   Znaki w /img/ppm/przyciski/ to rysunki i wypalanki Michała (biała kreska na przezroczystym tle).
   Kafel = wejście do działu. Guzik = pojedyncze działanie w treści. */
.kafle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; list-style: none; margin-top: 28px; }
.kafel { display: flex; flex-direction: column; height: 100%; min-height: 250px; padding: 20px; background-color: var(--sadza); color: var(--na-sadzy); text-decoration: none; border: 2px solid var(--sadza); border-radius: 2px; }
.tablica-czarna .kafel { background-color: #101010; border-color: #222; }
.kafel-znak { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 120px; }
.kafel-znak img { max-width: 78%; max-height: 132px; width: auto; height: auto; }
.kafel-napis { display: block; margin-top: 16px; font-stretch: 75%; font-variation-settings: "wdth" 75; font-weight: 800; font-size: 1.75rem; line-height: 1; color: var(--na-sadzy); }
.kafel-opis { display: block; margin-top: 6px; font-size: 0.9375rem; line-height: 1.4; color: var(--na-sadzy-muted); }
.kafel:hover, .kafel:focus-visible { border-color: var(--accent-red); }
.kafel:hover .kafel-napis { text-decoration: underline; text-decoration-color: var(--accent-red); text-decoration-thickness: 3px; text-underline-offset: 5px; }
@media (prefers-reduced-motion: no-preference) {
    .kafel-znak img { transition: transform 0.2s ease; }
    .kafel:hover .kafel-znak img { transform: scale(1.06) rotate(-2deg); }
}
.kafel.wyrozniony { border-color: var(--accent-red); }

.guzik { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 20px 8px 12px; background-color: var(--sadza); color: var(--na-sadzy); font-weight: 700; text-decoration: none; border: 2px solid var(--sadza); border-radius: 2px; }
.guzik img { height: 30px; width: auto; }
.guzik:hover, .guzik:focus-visible { border-color: var(--accent-red); }
.guzik.bez-znaku { padding-left: 20px; }
.tablica-czarna .guzik { background-color: var(--na-sadzy); color: var(--sadza); border-color: var(--na-sadzy); }
.tablica-czarna .guzik img { filter: invert(1); }
.tablica-czarna .guzik:hover { border-color: var(--accent-red); }

/* Projekt: role */
.role { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin-top: 24px; }
.role > div { border-top: 3px solid var(--text-main); padding-top: 16px; }
.role .rola-nazwa { font-weight: 600; color: var(--accent-red); }
.role h3.display { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-top: 4px; }
.role p { margin-top: 12px; max-width: 34em; }
.role figure { margin-top: 20px; max-width: 360px; }
.role figure img { width: 100%; height: auto; border-radius: 2px; }
.role figcaption { font-size: 0.9375rem; color: var(--text-muted); margin-top: 8px; }
.opis-artysty { font-family: var(--font-quote); font-size: 1.375rem; line-height: 1.5; color: var(--na-sadzy); white-space: pre-line; max-width: 30em; }

/* Szkice: karty z dostępnością */
.szkice { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 40px 24px; list-style: none; margin-top: 28px; }
.szkice img { width: 100%; height: auto; background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 2px; }
.szkice .tytul { display: block; margin-top: 12px; font-weight: 700; color: var(--text-main); line-height: 1.3; }
.szkice .tytul a { color: inherit; text-decoration: none; }
.szkice .tytul a:hover { text-decoration: underline; text-decoration-color: var(--accent-red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.szkice .metryczka { display: block; font-size: 0.9375rem; color: var(--text-muted); margin-top: 2px; }
.szkice .metryczka a { color: var(--text-muted); }
.szkice .stan { display: inline-block; margin-top: 10px; font-size: 0.875rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--text-main); color: var(--text-main); }
.szkice .stan.dostepny { background-color: var(--accent-red); border-color: var(--accent-red); color: #fff; }
.szkice .guzik { margin-top: 12px; }
.kroki { counter-reset: krok; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 24px 40px; margin-top: 24px; }
.kroki li { counter-increment: krok; border-top: 1px solid var(--border-color); padding-top: 14px; }
.kroki li::before { content: counter(krok); display: block; font-stretch: 75%; font-variation-settings: "wdth" 75; font-weight: 800; font-size: 2.5rem; line-height: 1; color: var(--text-main); margin-bottom: 8px; }

@media (max-width: 1100px) { .kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
    .kafel { min-height: 200px; padding: 16px; }
    .kafel-znak { min-height: 88px; }
    .kafel-znak img { max-height: 96px; }
    .kafel-napis { font-size: 1.5rem; }
    .role { grid-template-columns: 1fr; }
    .role > div + div { margin-top: 32px; }
}

/* Projekt: motto i rozwidlenie Pan Miś / planetapanamisia */
.motto-duze { font-stretch: 75%; font-variation-settings: "wdth" 75; font-weight: 800; font-size: clamp(2.25rem, 6vw, 5rem); line-height: 0.95; color: var(--na-sadzy); text-wrap: balance; }
.tablica-czarna .motto-duze { color: var(--na-sadzy); }
.motto-duze .emoji { font-size: 0.7em; white-space: nowrap; }
.rozwidlenie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 28px; border: 2px solid var(--text-main); border-radius: 2px; }
.rozwidlenie > div { padding: clamp(18px, 3vw, 32px); }
.rozwidlenie > div + div { background-color: var(--sadza); color: var(--na-sadzy-muted); }
.rozwidlenie .rola-nazwa { font-weight: 600; color: var(--accent-red); }
.rozwidlenie h3.display { font-size: clamp(1.75rem, 3.4vw, 3rem); margin-top: 4px; }
.rozwidlenie > div + div h3.display { color: var(--na-sadzy); font-stretch: 100%; font-variation-settings: "wdth" 100; font-weight: 700; letter-spacing: 0; font-size: clamp(1.5rem, 2.8vw, 2.5rem); line-height: 1.1; }
.rozwidlenie p { margin-top: 12px; max-width: 34em; }
.rozwidlenie ul { margin-top: 12px; padding-left: 1.2em; }
.rozwidlenie > div + div .text-link { color: var(--na-sadzy); }
@media (max-width: 860px) { .rozwidlenie { grid-template-columns: 1fr; } }

/* Wystawy: fotorelacja w kolumnach (bez kadrowania) i miniatury plakatów w rejestrze */
.fotorelacja { columns: 2; column-gap: 14px; margin-top: 18px; }
.fotorelacja figure { break-inside: avoid; margin: 0 0 16px; }
.fotorelacja a { display: block; }
.fotorelacja img { display: block; width: 100%; height: auto; border: 1px solid var(--border-color); border-radius: 2px; background-color: var(--card-bg); }
.fotorelacja a:hover img, .fotorelacja a:focus-visible img { border-color: var(--accent-red); }
.fotorelacja figcaption { font-size: 0.875rem; line-height: 1.4; color: var(--text-muted); margin-top: 6px; }
.ex-plakat { flex: none; width: 46px; height: 82px; object-fit: cover; margin-right: 14px; border: 1px solid var(--border-color); border-radius: 2px; background-color: var(--sadza); }
@media (max-width: 520px) { .fotorelacja { columns: 1; } }

/* Kronika: cztery klatki procesu, klatki poziome; fotorelacja w trzech kolumnach (rysunki) */
.klatki.cztery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.klatki.poziome img { aspect-ratio: 4 / 3; }
.fotorelacja.trzy { columns: 3; }
@media (max-width: 760px) {
    .klatki.cztery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fotorelacja.trzy { columns: 2; }
}
.wypowiedz p + p { margin-top: 0.7em; }

/* Źródła: zdjęcie dzieła z katalogu przy rozmowie, odsyłacze między dokumentami, indeks dzieł */
.dzielo-foto { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; min-height: clamp(140px, 18vw, 200px); }
.dzielo-foto.pusta { display: none; }
.dzielo-foto a { display: block; }
.dzielo-foto img { display: block; width: auto; height: clamp(140px, 18vw, 200px); max-width: 100%; object-fit: contain; border-radius: 2px; background-color: var(--lipa); }
.dzielo-foto a:hover img, .dzielo-foto a:focus-visible img { outline: 2px solid var(--accent-red); outline-offset: 2px; }
.takze-w { margin-top: 10px; font-size: 0.9375rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
.siatka-dziel { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px 32px; margin-top: 24px; }
.siatka-dziel > li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; align-items: start; scroll-margin-top: 16px; }
.siatka-dziel .dzielo-foto { margin-top: 0; min-height: 110px; }
.siatka-dziel .dzielo-foto img { width: 110px; height: auto; max-height: 150px; }
.siatka-dziel h3 { font-size: 1.0625rem; line-height: 1.3; }
.siatka-dziel h3 a { color: var(--text-main); }
.siatka-dziel ul { list-style: none; margin-top: 6px; display: flex; flex-direction: column; gap: 2px; font-size: 0.9375rem; }
.siatka-dziel .hasla { margin-top: 8px; }
.lista-slow { margin: 1em 0; padding-left: 1.2em; max-width: var(--measure); }
.lista-slow li + li { margin-top: 0.35em; }
.w-zrodlach-tytul { font-weight: 700; color: var(--text-main); }
.wstep .w-zbiorach { font-size: 0.9375rem; line-height: 1.5; color: var(--text-muted); margin-top: 20px; }
.wstep .w-zbiorach a { color: var(--text-main); }
.dzielo-322-foto { margin-top: clamp(24px, 4vw, 48px); margin-bottom: clamp(24px, 4vw, 48px); }
.dzielo-322-foto img { display: block; width: 100%; max-width: 980px; height: auto; border-radius: 2px; }
.dzielo-322-foto figcaption { font-size: 0.9375rem; color: var(--text-muted); margin-top: 8px; }

/* Szukajka dzieł na stronie Dzieła */
.szukaj-sekcja { padding-top: 8px; padding-bottom: clamp(16px, 3vw, 32px); }
.szukaj label { display: block; font-weight: 600; margin-bottom: 8px; }
.szukaj-wiersz { display: flex; gap: 10px; max-width: 640px; }
.szukaj input { flex: 1; min-width: 0; font: inherit; font-size: 1.0625rem; padding: 10px 14px; border: 2px solid var(--text-main); border-radius: 2px; background: var(--card-bg); color: var(--text-main); }
.szukaj input:focus-visible { outline: 2px solid var(--accent-red); outline-offset: 2px; }
.szukaj .przycisk { font: inherit; font-weight: 600; padding: 10px 18px; border: 2px solid var(--text-main); border-radius: 2px; background: var(--text-main); color: var(--bg-color); cursor: pointer; }
.szukaj .przycisk:hover { background: var(--accent-red); border-color: var(--accent-red); color: #fff; }
.szukaj #szukaj-info { margin-top: 10px; min-height: 1.4em; }
#szukaj-wyniki:empty { display: none; }
#szukaj-wyniki { margin-top: 20px; }