/* ISKRA (MrOffice): jasny papier, granatowy atrament, złota iskra, czerwień tylko jako wstążka i pieczęć.
   Krój: Brygada 1918 (polski krój na 10-lecie niepodległości, odlany w 1928, cyfrowy od 2018) + Figtree (interfejs strony MrOffice).
   Bez skrótu `font:` (zeruje cyfry). Elementy animowane przez GSAP nie mają przejść CSS na opacity/transform. */
:root {
  --papier: #f5efe2;            /* = kolor tła tekstury mapy (mapa_dane.py PAPIER) */
  --papier-jasny: #fbf8f0;
  --papier-ciemny: #ebe3d0;
  --karta: #fffdf7;
  --granat: #1b3149;
  --granat-2: #224356;          /* tekst strony MrOffice */
  --zloto: #c8973a;
  --zloto-jasne: #edd08a;
  --zloto-tekst: #7a5518;
  --czerwien: #b8262c;
  --szalwia: #6f8a64;
  --teal: #339999;
  --tlo: var(--papier);
  --tekst: var(--granat);
  --tekst-2: #4a5f74;
  --linia: rgba(27, 49, 73, .16);
  --akcent: var(--zloto); --akcent-jasny: var(--zloto-jasne); --akcent-ciemny: var(--zloto-tekst); --akcent-tekst: var(--zloto-tekst);
  --atrament: var(--granat); --noc: var(--granat); --wapien: var(--papier);
  --f-szeryf: "Brygada 1918", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-ui: Figtree, "Segoe UI", system-ui, sans-serif;
  --f-kap: var(--f-ui);
  --pasek-h: 58px;
  --mr-h: 76px;                 /* wysokość nagłówka MrOffice: na starcie zasłania dół przypiętej sceny, więc dolne elementy hero stoją wyżej */
  --bok: calc(var(--gutter) + max(0px, (100vw - 2 * var(--gutter) - var(--max)) / 2));
  --szesciokat: polygon(13px 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 13px 100%, 0 50%);
}
html { scroll-padding-top: calc(var(--pasek-h) + 16px); }
body { background: var(--papier); color: var(--granat); }
::selection { background: var(--zloto-jasne); color: var(--granat); }
:focus-visible { outline: 2px solid var(--zloto-tekst); outline-offset: 3px; }
h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
dl, dd, ol, fieldset { margin: 0; padding: 0; border: 0; }
ol { list-style: none; }
button { color: inherit; }
svg use { pointer-events: none; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------ wstęp: znak rysuje się złotą kreską */
.wstep { background: var(--papier); color: var(--granat); gap: 22px; }
.wstep__znak { width: clamp(84px, 11vw, 132px); height: auto; overflow: visible; }
.wstep__napis { font-family: var(--f-szeryf); font-size: clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing: .34em; margin-right: -.34em; color: var(--granat); }

/* ------------------------------------------------------------ nagłówek MrOffice i pasek ISKRY */
.mr { position: relative; z-index: 61; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; height: var(--mr-h); padding: 0 var(--bok);
  background: #fff; color: var(--granat-2); font-family: var(--f-ui); }
.mr__logo { display: inline-flex; align-items: center; min-height: 44px; width: fit-content; }
.mr__logo img { width: 135px; height: auto; }
.mr__menu { display: flex; justify-content: center; gap: clamp(18px, 2.6vw, 46px); font-size: 1rem; font-weight: 600; }
.mr__menu span { opacity: .86; cursor: default; white-space: nowrap; }
.mr__iskra { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 22px 0 18px; border-radius: 999px; background: var(--granat-2); color: #fff;
  font-weight: 700; font-size: .98rem; letter-spacing: .06em; }
.mr__iskra svg { width: 15px; height: 15px; color: var(--zloto-jasne); }

.pasek { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: clamp(14px, 3vw, 44px); height: var(--pasek-h); padding: 0 var(--bok);
  background: rgba(245, 239, 226, .88); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--linia); font-family: var(--f-ui); }
.pasek__znak { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 44px; min-height: 44px; color: var(--granat); }
.pasek__znak svg { width: 17px; height: 28px; color: var(--zloto); }
.pasek__znak b { font-family: var(--f-szeryf); font-weight: 600; font-size: 1.12rem; letter-spacing: .2em; }
.pasek__lista { display: flex; gap: clamp(4px, 1.4vw, 22px); margin: 0 auto 0 0; }
.pasek__lista a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; font-size: .98rem; font-weight: 500; color: var(--tekst-2); transition: color .3s; }
.pasek__lista a::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 9px; height: 9px; translate: -50% 0; scale: 0; background: var(--zloto);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); transition: scale .45s var(--ease); }
.pasek__lista a:hover, .pasek__lista a[aria-current="true"] { color: var(--granat); }
.pasek__lista a[aria-current="true"]::after { scale: 1; }
.pasek__cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; background: var(--granat); color: var(--papier); clip-path: var(--szesciokat);
  font-size: .95rem; font-weight: 600; white-space: nowrap; }

/* ------------------------------------------------------------ drobne wspólne */
.numer { display: flex; align-items: baseline; gap: 12px; font-family: var(--f-ui); font-size: .95rem; font-weight: 600; color: var(--zloto-tekst); }
.numer b { font-family: var(--f-szeryf); font-weight: 600; font-size: 1.12rem; font-variant-numeric: lining-nums tabular-nums; color: var(--granat); }
.numer b::after { content: ""; display: inline-block; width: clamp(26px, 3vw, 44px); height: 1px; margin-left: 12px; vertical-align: .32em; background: var(--zloto); }
.tytul { margin-top: 18px; font-size: clamp(2.3rem, 4.6vw, 4.5rem); line-height: 1.06; letter-spacing: -.012em; color: var(--granat); }
.tytul em { color: var(--zloto-tekst); }
.nadtytul { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-ui); font-weight: 600; font-size: 1rem; color: var(--granat); }
.nadtytul svg { width: 14px; height: 14px; color: var(--zloto); }

.guzik { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 56px; padding: 0 34px; border: 0; cursor: pointer; isolation: isolate; overflow: hidden;
  background: var(--granat); color: var(--papier); clip-path: var(--szesciokat); font-family: var(--f-ui); font-weight: 600; font-size: 1.04rem; line-height: 1; white-space: nowrap; }
.guzik::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 30%, rgba(237, 208, 138, .5) 50%, transparent 70%); translate: -120% 0; transition: translate .9s var(--ease); }
.guzik:hover::after, .guzik:focus-visible::after { translate: 120% 0; }
.guzik:hover .strzalka { width: 46px; }
.guzik--zloty { background: linear-gradient(135deg, #e6c36c, #c8973a 55%, #b58226); color: var(--granat); }
.guzik--cichy { width: 100%; min-height: 52px; background: var(--papier-ciemny); color: var(--tekst-2); cursor: not-allowed; flex-wrap: wrap; gap: 4px 10px; }
.guzik--cichy small { font-weight: 500; font-size: .84rem; opacity: .9; }
.lacze { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 6px 0 10px; font-family: var(--f-szeryf); font-style: italic; font-size: 1.22rem; line-height: 1.1; color: var(--granat); }
.lacze::before { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: currentColor; opacity: .34; }
.lacze::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 1px; height: 11px; clip-path: inset(0 100% 0 0); transition: clip-path .7s var(--ease);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6.6C60 3.4 120 7.6 180 4.8S270 4 298 5.6' fill='none' stroke='%23c8973a' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.lacze:hover::after, .lacze:focus-visible::after { clip-path: inset(0 0 0 0); }
.ai { color: #fff; background: rgba(27, 49, 73, .58); font-family: var(--f-ui); font-weight: 600; letter-spacing: .02em; }

/* ------------------------------------------------------------ ŚWIT */
.swit { position: relative; height: 185vh; background: #c9cfe0; }
.swit__scena { position: sticky; top: var(--pasek-h); height: calc(100vh - var(--pasek-h)); height: calc(100svh - var(--pasek-h)); overflow: hidden; }
.swit__obraz { position: absolute; inset: 0; }
.swit__obraz picture, .swit__obraz img { width: 100%; height: 100%; }
.swit__obraz img { object-fit: cover; object-position: var(--kadr-x, 72%) 50%; }
.swit__obraz--po { --r: 0; --ix: 86%; --iy: 81%;
  -webkit-mask-image: radial-gradient(circle at var(--ix) var(--iy), #000 calc(var(--r) * .45px), transparent calc(var(--r) * 1px));
  mask-image: radial-gradient(circle at var(--ix) var(--iy), #000 calc(var(--r) * .45px), transparent calc(var(--r) * 1px)); }
.swit__iskry { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.swit__tresc { position: absolute; z-index: 3; left: var(--bok); top: clamp(34px, 10vh, 120px); width: min(47rem, 58vw); isolation: isolate; color: var(--granat); }
.swit__tresc::before { content: ""; position: absolute; z-index: -1; inset: -26% -34% -34% -34%; pointer-events: none;
  background: radial-gradient(ellipse closest-side at 50% 50%, rgba(251, 248, 240, .72), rgba(251, 248, 240, .36) 55%, transparent); }
.swit h1 { margin-top: 20px; font-family: var(--f-szeryf); font-weight: 400; font-size: clamp(2.5rem, 5.5vw, 5.7rem); line-height: 1.03; letter-spacing: -.016em; }
.swit h1 em { position: relative; display: block; width: fit-content; }
.podkreslenie { position: absolute; left: -1%; bottom: -.08em; width: 102%; height: .2em; overflow: visible; }
.podkreslenie path { fill: none; stroke: var(--zloto); stroke-width: 3.6; stroke-linecap: round; }   /* bez non-scaling-stroke: DrawSVG rysowałby kreskę w kawałkach */
.swit__lead { margin-top: clamp(16px, 2.6vh, 28px); max-width: 30em; font-size: clamp(1.12rem, 1.5vw, 1.42rem); line-height: 1.45; }
.swit__przyciski { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 34px; margin-top: clamp(22px, 3.6vh, 40px); }
.wartosci { position: absolute; z-index: 3; left: var(--bok); bottom: calc(var(--mr-h) + clamp(14px, 3vh, 30px)); display: flex; flex-wrap: wrap; gap: 6px 0; padding: 9px 20px 10px; margin: 0;
  background: rgba(251, 248, 240, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); clip-path: var(--szesciokat);
  font-family: var(--f-szeryf); font-style: italic; font-size: clamp(1.05rem, 1.35vw, 1.3rem); color: var(--granat); }
.wartosci li + li::before { content: ""; display: inline-block; width: 9px; height: 9px; margin: 0 14px; vertical-align: .08em; background: var(--zloto);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.swit__ai { right: var(--bok); top: 16px; }
.swit__przewin { position: absolute; z-index: 3; left: 50%; bottom: calc(var(--mr-h) + 8px); translate: -50% 0; display: grid; justify-items: center; gap: 6px; font-family: var(--f-ui); font-size: .86rem; font-weight: 600; color: var(--granat); }
.swit__przewin span { padding: 6px 14px 7px; background: rgba(251, 248, 240, .82); border-radius: 999px; white-space: nowrap; }
.swit__przewin i { width: 1.5px; height: 22px; background: linear-gradient(var(--papier-jasny), rgba(251, 248, 240, 0)); animation: przewin 2.2s var(--ease) infinite; transform-origin: 50% 0; }
@keyframes przewin { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ------------------------------------------------------------ 01 IDEA */
.sekcja { padding: clamp(84px, 13vh, 170px) var(--gutter); }
.idea__gora { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 6vw, 110px); align-items: end; }
.manifest { font-size: clamp(1.32rem, 1.85vw, 1.86rem); line-height: 1.42; color: var(--granat); }
.idea__misja { margin-top: 26px; font-family: var(--f-ui); font-size: 1.04rem; line-height: 1.62; color: var(--tekst-2); max-width: 34em; }
.kroki { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 3vw, 46px); margin-top: clamp(70px, 11vh, 130px); padding-top: 74px; }
.kroki__nic { position: absolute; left: 0; right: 0; top: 4px; height: 40px; }
.kroki__nic svg { width: 100%; height: 100%; overflow: visible; }
.kroki__nic path { fill: none; stroke: var(--zloto); stroke-width: 1.3; }
.kroki__nic i { position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; color: var(--zloto); filter: drop-shadow(0 0 10px rgba(237, 180, 70, .9)); }
.kroki__nic i svg { overflow: visible; }
.krok__nr { display: grid; place-items: center; width: 46px; height: 52px; margin-bottom: 18px; font-family: var(--f-szeryf); font-weight: 600; font-size: 1.3rem; color: var(--granat);
  background: var(--papier-ciemny); clip-path: polygon(50% 0, 100% 27%, 100% 73%, 50% 100%, 0 73%, 0 27%); transition: background-color .6s, color .6s; }
.krok.jest-zapalony .krok__nr { background: var(--granat); color: var(--zloto-jasne); }
.krok h3 { font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.1; }
.krok p { margin-top: 10px; font-family: var(--f-ui); font-size: 1rem; line-height: 1.55; color: var(--tekst-2); }

/* okno: trzy szyby = trzy perspektywy, na jednej ramie */
.okno { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(80px, 12vh, 150px); border: 1.5px solid var(--granat); background: var(--granat); gap: 1.5px; }
.okno__wstep { grid-column: 1 / -1; padding: 16px clamp(18px, 2.4vw, 34px) 17px; background: var(--granat); color: var(--papier); font-style: italic; font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.3; }
.szyba { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 8px; padding: clamp(18px, 2.2vw, 30px) clamp(18px, 2.4vw, 34px) clamp(20px, 2.4vw, 30px); background: var(--papier-jasny); transition: background-color .5s; }
.szyba:hover, .szyba:focus-visible { background: #fffaea; }
.szyba__obraz { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; margin-bottom: 12px; overflow: hidden; background: var(--papier-ciemny); }
.szyba__obraz img { transition: scale 1.2s var(--ease); }
.szyba:hover .szyba__obraz img { scale: 1.06; }
.szyba__obraz--mapa img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 30%; scale: 1.02; }
.szyba__obraz--mapa i { position: absolute; left: 47%; top: 34%; width: 22px; height: 22px; color: var(--zloto); filter: drop-shadow(0 0 8px rgba(255, 190, 70, .95)) drop-shadow(0 1px 1px rgba(27, 49, 73, .5)); animation: puls 2.6s ease-in-out infinite; }
.szyba__obraz--ksiega img { width: 46%; height: auto; }
.szyba__obraz--rachunek { align-content: center; gap: 2px; font-family: var(--f-szeryf); color: var(--granat); }
.szyba__obraz--rachunek b { font-weight: 600; font-size: clamp(3.2rem, 5.6vw, 5.2rem); line-height: 1; }
.szyba__obraz--rachunek small { font-family: var(--f-ui); font-size: .86rem; font-weight: 500; color: var(--tekst-2); }
.szyba__nazwa { font-size: clamp(1.7rem, 2.5vw, 2.4rem); line-height: 1.05; }
.szyba__pytanie { font-style: italic; font-size: 1.14rem; line-height: 1.3; color: var(--zloto-tekst); }
.szyba__nowe { margin-top: 8px; font-family: var(--f-ui); font-size: .96rem; line-height: 1.45; color: var(--tekst-2); }
.szyba__nowe b { display: block; font-weight: 700; color: var(--granat); }
.szyba__rola { padding-top: 14px; margin-top: 8px; border-top: 1px solid var(--linia); font-family: var(--f-ui); font-size: .92rem; font-weight: 600; color: var(--granat); }
@keyframes puls { 0%, 100% { scale: .82; opacity: .85; } 50% { scale: 1.18; opacity: 1; } }

/* ------------------------------------------------------------ 02 MAPA */
.mapa { position: relative; height: 240vh; background: var(--papier); }
.mapa__scena { position: sticky; top: var(--pasek-h); height: calc(100vh - var(--pasek-h)); height: calc(100svh - var(--pasek-h)); overflow: hidden; background: var(--papier); }
.mapa__plotno { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.mapa__plotno:active { cursor: grabbing; }
.mapa__plaska { position: absolute; left: 50%; top: 50%; width: auto; height: 96%; max-width: none; translate: -50% -50%;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); }
.mapa__pinezki { position: absolute; z-index: 2; inset: 0; pointer-events: none; overflow: hidden; }
.mapa__naglowek { position: absolute; z-index: 4; left: var(--bok); top: clamp(22px, 5vh, 54px); max-width: 26rem; pointer-events: none; }
.mapa__naglowek::before { content: ""; position: absolute; z-index: -1; inset: -40px -90px -50px -90px; background: radial-gradient(closest-side, rgba(245, 239, 226, .92), rgba(245, 239, 226, .6) 60%, transparent); }
.mapa__naglowek .tytul { font-size: clamp(2.2rem, 4vw, 3.9rem); margin-top: 10px; }
.mapa__naglowek .tytul em { display: inline; }
.mapa__lead { margin-top: 10px; font-family: var(--f-ui); font-size: 1.02rem; line-height: 1.5; color: var(--tekst-2); }
.mapa__kategorie { position: absolute; z-index: 4; left: var(--bok); bottom: clamp(74px, 11vh, 100px); display: grid; gap: 6px; }
.kat { display: flex; align-items: center; gap: 11px; min-height: 48px; padding: 4px 18px 4px 5px; border: 0; border-radius: 999px; cursor: pointer; text-align: left;
  background: rgba(251, 248, 240, .9); box-shadow: inset 0 0 0 1px var(--linia); font-family: var(--f-ui); color: var(--granat); transition: background-color .35s, color .35s, box-shadow .35s; }
.kat img { width: 40px; height: 40px; flex: none; }
.kat b { display: block; font-weight: 600; font-size: .96rem; line-height: 1.15; }
.kat small { display: block; font-size: .8rem; line-height: 1.2; color: var(--tekst-2); transition: color .35s; }
.kat:hover { box-shadow: inset 0 0 0 1px var(--granat); }
.kat[aria-pressed="true"] { background: var(--granat); color: var(--papier); box-shadow: none; }
.kat[aria-pressed="true"] small { color: rgba(245, 239, 226, .78); }
.kat--wszystko { padding-left: 18px; }

.mapa__karta { position: absolute; z-index: 5; right: var(--bok); top: 50%; translate: 0 -50%; width: min(380px, 31vw); max-height: 82%; overflow: auto; padding: 26px 26px 24px;
  background: var(--karta); box-shadow: 0 1px 0 var(--linia), 0 30px 60px -34px rgba(27, 49, 73, .5); border-top: 3px solid var(--zloto); font-family: var(--f-ui); }
.mapa__karta.jest-przyklad { border-top-color: var(--tekst-2); background: repeating-linear-gradient(-45deg, var(--karta) 0 14px, #f8f3e6 14px 15px); }
.karta-m__gora { display: flex; align-items: center; gap: 14px; }
.karta-m__gora img { width: 62px; height: 62px; flex: none; }
.karta-m__kat { font-size: .86rem; font-weight: 700; color: var(--zloto-tekst); }
.karta-m__gdzie { font-size: .9rem; color: var(--tekst-2); line-height: 1.3; }
.mapa__karta h3 { margin-top: 16px; font-family: var(--f-szeryf); font-size: 1.62rem; line-height: 1.12; color: var(--granat); }
.mapa__karta p { margin-top: 10px; font-size: .98rem; line-height: 1.55; color: var(--granat); }
.mapa__karta dl { display: grid; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linia); }
.mapa__karta dt { font-size: .8rem; font-weight: 700; color: var(--tekst-2); }
.mapa__karta dd { font-size: .96rem; line-height: 1.45; }
.karta-m__stan { display: flex; gap: 9px; align-items: flex-start; margin-top: 16px; padding: 10px 12px; background: var(--papier); font-size: .84rem !important; line-height: 1.4 !important; color: var(--tekst-2) !important; }
.karta-m__stan::before { content: ""; flex: none; width: 9px; height: 9px; margin-top: .32em; border-radius: 50%; background: var(--tekst-2); }
.karta-m__stan.jest-potwierdzony::before { background: var(--szalwia); }
.karta-m__stan.jest-przyklad::before { background: none; box-shadow: inset 0 0 0 1.5px var(--tekst-2); }
.karta-m__znaczek { display: inline-block; margin-left: 8px; padding: 2px 8px; font-size: .74rem; font-weight: 700; vertical-align: .2em; color: var(--tekst-2); box-shadow: inset 0 0 0 1px var(--tekst-2); border-radius: 3px; font-family: var(--f-ui); }
.mapa__karta .lacze { margin-top: 12px; font-size: 1.14rem; }
.karta-m__legenda { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: .9rem !important; color: var(--tekst-2) !important; }
.karta-m__legenda svg { flex: none; width: 15px; height: 15px; margin-top: .22em; color: var(--zloto); }
.karta-m__zamknij { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; color: var(--tekst-2); }
.karta-m__zamknij svg, .arkusz__zamknij svg, .lupa button svg, .mapa__guzik svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.mapa__sterowanie { position: absolute; z-index: 4; left: var(--bok); bottom: clamp(16px, 3vh, 30px); display: flex; gap: 6px; }
.mapa__guzik { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(251, 248, 240, .92); box-shadow: inset 0 0 0 1px var(--linia); color: var(--granat); transition: box-shadow .3s; }
.mapa__guzik:hover { box-shadow: inset 0 0 0 1px var(--granat); }
.mapa__kompas svg { rotate: var(--obrot, 0deg); }
.mapa__kompas .igla { fill: var(--czerwien); stroke: none; }
.mapa__kompas span { position: absolute; right: 2px; top: -2px; font-family: var(--f-ui); font-size: .76rem; font-weight: 700; color: var(--tekst-2); }
.mapa__zrodla { position: absolute; z-index: 3; left: calc(var(--bok) + 290px); bottom: clamp(16px, 3vh, 30px); display: flex; align-items: center; min-height: 46px; max-width: 34%; font-family: var(--f-ui); font-size: .76rem; line-height: 1.35; color: var(--tekst-2); }

/* pinezki i napisy: punkt zaczepienia = dolny środek elementu o zerowym rozmiarze */
.pin, .napis { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; will-change: transform; transition: opacity .35s; }
.pin { border: 0; padding: 0; background: none; cursor: pointer; pointer-events: auto; font-family: var(--f-ui); color: var(--granat); }
.pin__kropka { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--granat); box-shadow: 0 0 0 3px rgba(251, 248, 240, .9); }
.pin__maszt { position: absolute; left: -.5px; bottom: 0; width: 1px; height: var(--maszt, 46px); background: linear-gradient(to top, var(--granat), rgba(27, 49, 73, .35)); }
.pin__medalion { position: absolute; left: -26px; bottom: var(--maszt, 46px); width: 52px; height: 52px; border-radius: 50%; background: var(--karta); box-shadow: 0 8px 16px -8px rgba(27, 49, 73, .65); transition: scale .45s var(--ease), box-shadow .45s; transform-origin: 50% 100%; }
.pin__medalion img { width: 100%; height: 100%; }
.pin__nazwa { position: absolute; left: 32px; bottom: calc(var(--maszt, 46px) + 13px); padding: 4px 10px 5px; white-space: nowrap; font-size: .86rem; font-weight: 600; line-height: 1.15; background: rgba(251, 248, 240, .94); box-shadow: inset 0 0 0 1px var(--linia);
  opacity: 0; translate: -6px 0; transition: opacity .3s, translate .4s var(--ease); pointer-events: none; }
.pin__nazwa small { display: block; font-weight: 500; font-size: .76rem; color: var(--tekst-2); }
.pin:hover .pin__medalion, .pin:focus-visible .pin__medalion, .pin.jest-wybrany .pin__medalion { scale: 1.22; box-shadow: 0 14px 22px -10px rgba(27, 49, 73, .7), 0 0 0 3px var(--zloto); }
.pin:hover .pin__nazwa, .pin:focus-visible .pin__nazwa, .pin.jest-wybrany .pin__nazwa, .pin--iskra .pin__nazwa { opacity: 1; translate: 0 0; }
.pin:hover, .pin.jest-wybrany { z-index: 50 !important; }
.pin--przyklad .pin__medalion { outline: 1.5px dashed var(--tekst-2); outline-offset: 3px; }
.pin--iskra .pin__kropka { background: var(--zloto); }
.pin--iskra .pin__kropka::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--zloto); animation: krag 2.6s ease-out infinite; }
.pin--iskra .pin__medalion { box-shadow: 0 8px 16px -8px rgba(27, 49, 73, .65), 0 0 0 2px var(--zloto), 0 0 26px 6px rgba(237, 190, 90, .55); }
@keyframes krag { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(3.4); opacity: 0; } }
.napis { pointer-events: none; font-family: var(--f-szeryf); font-style: italic; color: var(--granat); }
.napis span { position: absolute; left: 0; top: 0; translate: -50% 30%; white-space: nowrap; font-size: .98rem; line-height: 1.1; text-align: center;
  text-shadow: 0 0 4px var(--papier), 0 0 4px var(--papier), 0 0 8px var(--papier), 0 0 2px var(--papier); }
.napis small { display: block; font-family: var(--f-ui); font-style: normal; font-weight: 600; font-size: .78rem; color: var(--tekst-2); }
.napis--szczyt span { translate: -50% -135%; font-style: normal; font-weight: 600; font-size: 1.06rem; }
.napis--szczyt::before { content: ""; position: absolute; left: -5px; top: -5px; border: 5px solid transparent; border-bottom: 8px solid var(--granat); border-top: 0; }
.napis--woda span { color: #3e6d88; translate: -50% -50%; }
.napis--wies span { font-size: .88rem; color: var(--tekst-2); }

/* ------------------------------------------------------------ 03 KSIĘGA I RACHUNEK */
.ksiega { position: relative; background: var(--papier-jasny); padding-bottom: clamp(70px, 10vh, 130px); }
.ksiega__wstep { padding: clamp(84px, 13vh, 160px) var(--gutter) 0; }
.ksiega__lead { margin-top: 18px; max-width: 30em; font-size: clamp(1.14rem, 1.5vw, 1.4rem); line-height: 1.45; color: var(--tekst-2); }

.otwarcie { display: grid; place-items: center; min-height: 100vh; min-height: 100svh; padding: clamp(30px, 6vh, 80px) var(--gutter); overflow: hidden; }
.ksiazka { --kat: 0deg; position: relative; width: min(1060px, 100%); aspect-ratio: 3 / 2; max-height: 78vh; perspective: 2400px; }
.ksiazka::after { content: ""; position: absolute; z-index: -1; left: calc(4% + 48% * (1 - var(--otw, 1))); right: 4%; bottom: -5%; height: 12%; background: radial-gradient(closest-side, rgba(27, 49, 73, .28), transparent); filter: blur(10px); }
.ksiazka__prawa, .ksiazka__skrzydlo { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; }
.ksiazka__prawa { display: grid; align-content: center; justify-items: center; gap: clamp(12px, 2.4vh, 26px); padding: clamp(18px, 3vw, 44px); background: linear-gradient(90deg, #e9e0cb, var(--karta) 9%, var(--karta)); border-radius: 0 10px 10px 0;
  box-shadow: inset 0 0 0 1px rgba(27, 49, 73, .1), 3px 3px 0 #efe7d4, 6px 6px 0 #e6dcc6; }
.odbitka { width: min(86%, 400px); padding: 12px 12px 0; background: #fff; rotate: -2.4deg; box-shadow: 0 16px 30px -18px rgba(27, 49, 73, .65), 0 0 0 1px rgba(27, 49, 73, .08); }
.odbitka img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; cursor: zoom-in; }
.odbitka figcaption { padding: 9px 4px 11px; font-style: italic; font-size: 1.02rem; text-align: center; color: var(--granat); }
.ksiazka__podpis { font-size: clamp(.96rem, 1.2vw, 1.14rem); line-height: 1.3; text-align: center; color: var(--tekst-2); }
.ksiazka__skrzydlo { transform-style: preserve-3d; transform-origin: 0 50%; transform: rotateY(var(--kat)); }
.okladka, .strona-lewa { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.okladka { display: grid; align-content: center; justify-items: center; gap: clamp(8px, 1.6vh, 16px); padding: 8%; border-radius: 3px 10px 10px 3px; color: var(--zloto-jasne); text-align: center;
  background: radial-gradient(120% 90% at 30% 20%, #2a4664, #1b3149 60%, #15273b); box-shadow: inset 0 0 0 1px rgba(237, 208, 138, .22), inset 14px 0 18px -10px rgba(0, 0, 0, .5); }
.okladka::before { content: ""; position: absolute; inset: 5.5%; border: 1px solid rgba(237, 208, 138, .55); outline: 1px solid rgba(237, 208, 138, .25); outline-offset: 5px; pointer-events: none; }
.okladka__znak { width: clamp(54px, 9vw, 104px); height: clamp(88px, 14.6vw, 169px); color: var(--zloto); filter: drop-shadow(0 0 14px rgba(237, 190, 90, .35)); }
.okladka__seria { margin-top: clamp(6px, 1.4vh, 18px); font-family: var(--f-ui); font-size: clamp(.8rem, 1vw, .96rem); font-weight: 600; letter-spacing: .12em; }
.okladka__tom { font-size: clamp(1.5rem, 3vw, 2.7rem); line-height: 1.08; color: #f6e3ae; }
.okladka__rok { font-style: italic; font-size: clamp(.92rem, 1.2vw, 1.12rem); opacity: .86; }
.strona-lewa { transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: center; padding: clamp(18px, 4vw, 58px); background: linear-gradient(270deg, #e9e0cb, var(--karta) 9%, var(--karta)); border-radius: 10px 0 0 10px;
  box-shadow: inset 0 0 0 1px rgba(27, 49, 73, .1), -3px 3px 0 #efe7d4, -6px 6px 0 #e6dcc6; }
.strona-lewa__tom { font-style: italic; font-size: clamp(1rem, 1.4vw, 1.3rem); color: var(--tekst-2); text-align: center; }
.strona-lewa__tytul { margin-top: 6px; font-weight: 600; font-style: italic; font-size: clamp(1.3rem, 2.3vw, 2.1rem); line-height: 1.14; text-align: center; color: var(--granat); }
.ornament { width: 150px; height: 12px; margin: clamp(10px, 2vh, 20px) auto clamp(12px, 2.4vh, 24px); fill: none; stroke: var(--zloto); stroke-width: 1; }
.ornament .pelny { fill: var(--zloto); stroke: none; }
.wiersz-ksiegi { font-size: clamp(.96rem, 1.34vw, 1.2rem); line-height: 1.5; color: var(--granat); }
.wiersz-ksiegi + .wiersz-ksiegi { margin-top: .9em; }
.lacze--ksiega { align-self: flex-start; margin-top: clamp(10px, 2.2vh, 24px); }
.ksiazka__wstazka { position: absolute; z-index: 3; left: calc(50% - 9px); top: -1.5%; width: 18px; height: 70%; transform-origin: 50% 0; transform: scaleY(var(--wstazka, 1));
  background: linear-gradient(90deg, #8e1c22, var(--czerwien) 35%, #cf3a40 60%, #9b2026); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 12px), 0 100%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); }

.czytelnia { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(30px, 5.4vw, 96px); align-items: start; padding: clamp(30px, 6vh, 70px) var(--gutter) 0; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; }
.rozdzial { position: relative; max-width: 47rem; padding-left: clamp(22px, 3vw, 44px); }
.rozdzial__wstazka { position: absolute; left: 0; top: 6px; bottom: 0; width: 3px; background: rgba(184, 38, 44, .14); }
.rozdzial__wstazka b { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--p, 0) * 100%); background: var(--czerwien); }
.rozdzial__wstazka b::after { content: ""; position: absolute; left: -4.5px; bottom: -14px; width: 12px; height: 16px; background: var(--czerwien); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 62%, 0 100%); }
.rozdzial__meta { display: flex; flex-wrap: wrap; gap: 4px 0; font-family: var(--f-ui); font-size: .92rem; font-weight: 600; color: var(--zloto-tekst); }
.rozdzial__meta > * + *::before { content: "·"; margin: 0 10px; color: var(--tekst-2); }
.rozdzial__naglowek h3 { margin-top: 14px; font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 1.07; letter-spacing: -.01em; }
.rozdzial__lid { margin-top: 16px; font-style: italic; font-size: clamp(1.14rem, 1.5vw, 1.36rem); line-height: 1.45; color: var(--tekst-2); }
.proza { margin-top: clamp(26px, 4.4vh, 46px); }
.proza p { font-size: clamp(1.1rem, 1.25vw, 1.24rem); line-height: 1.72; }
.proza p + p { margin-top: 1.05em; }
.proza h4 { margin-bottom: .6em; font-style: italic; font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.2; }
.inicjal::first-letter { float: left; margin: .09em .1em 0 0; font-weight: 600; font-size: 3.5em; line-height: .84; color: var(--zloto-tekst); }
.kadr { margin-top: clamp(26px, 4.4vh, 46px); }
.kadr img { width: 100%; height: auto; background: var(--papier-ciemny); cursor: zoom-in; }
.kadr figcaption { margin-top: 9px; font-family: var(--f-ui); font-size: .9rem; line-height: 1.45; color: var(--tekst-2); }
.tablica { margin-top: clamp(34px, 5.6vh, 60px); padding: clamp(26px, 4vw, 52px) clamp(20px, 3.6vw, 50px); background: var(--karta); text-align: center; box-shadow: inset 0 0 0 1px var(--granat), inset 0 0 0 5px var(--karta), inset 0 0 0 6px rgba(27, 49, 73, .35); }
.tablica p { font-size: clamp(1.04rem, 1.2vw, 1.16rem); line-height: 1.66; }
.tablica p + p { margin-top: 1em; }
.tablica .tablica__tytul { font-weight: 700; font-style: italic; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.15; margin-bottom: .8em; }
.tablica .tablica__mocne { font-weight: 700; font-size: clamp(1.1rem, 1.36vw, 1.3rem); line-height: 1.5; }
.tablica footer { margin-top: 1.4em; padding-top: 1em; border-top: 1px solid var(--linia); font-family: var(--f-ui); font-size: .86rem; line-height: 1.45; color: var(--tekst-2); }
.galeria { columns: 2; column-gap: clamp(12px, 1.6vw, 22px); margin-top: clamp(30px, 5vh, 54px); }
.galeria .kadr { margin: 0 0 clamp(14px, 2vw, 26px); break-inside: avoid; }
.rozdzial__stopka { margin-top: clamp(30px, 5vh, 56px); padding-top: 22px; border-top: 1px solid var(--linia); font-family: var(--f-ui); }
.rozdzial__robocze { font-size: .92rem; color: var(--tekst-2); }
.rozdzial__nawigacja { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: 20px; }
.rozdzial__krok { display: grid; gap: 2px; min-height: 44px; font-size: .84rem; color: var(--tekst-2); }
.rozdzial__krok b { font-family: var(--f-szeryf); font-style: italic; font-weight: 400; font-size: 1.1rem; color: var(--granat); }
.rozdzial__krok--dalej { text-align: right; }
.rozdzial__krok--brak b { color: var(--tekst-2); }
.rozdzial__licznik { font-family: var(--f-szeryf); font-size: 1.06rem; font-variant-numeric: lining-nums tabular-nums; color: var(--tekst-2); }

.rachunek { position: sticky; top: calc(var(--pasek-h) + 22px); padding: clamp(20px, 2.2vw, 30px); background: var(--karta); border-top: 3px solid var(--zloto); box-shadow: 0 1px 0 var(--linia), 0 34px 60px -40px rgba(27, 49, 73, .45); font-family: var(--f-ui); }
.rachunek__glowa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.rachunek h3 { display: flex; align-items: center; gap: 10px; font-family: var(--f-szeryf); font-size: 1.5rem; line-height: 1.1; }
.rachunek h3 svg { width: 16px; height: 16px; color: var(--zloto); }
.przelacznik { display: inline-flex; padding: 3px; background: var(--papier); }
.przelacznik button { min-height: 44px; padding: 0 13px; border: 0; background: none; cursor: pointer; font-family: var(--f-ui); font-size: .86rem; font-weight: 600; color: var(--tekst-2); transition: background-color .3s, color .3s; }
.przelacznik button[aria-pressed="true"] { background: var(--granat); color: var(--papier); }
.rachunek__procent { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; margin-top: 20px; padding: 16px 0 18px; border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); }
.rachunek__procent b { font-family: var(--f-szeryf); font-weight: 600; font-size: clamp(3.4rem, 5vw, 4.9rem); line-height: .95; color: var(--granat); }
.rachunek__procent p { font-size: .94rem; line-height: 1.45; color: var(--tekst-2); }
.rachunek__projekt { margin-top: 18px; font-family: var(--f-szeryf); font-size: 1.24rem; line-height: 1.2; }
.rachunek__projekt span { display: block; margin-top: 3px; font-family: var(--f-ui); font-size: .84rem; color: var(--tekst-2); }
.rachunek h4 { margin-top: 18px; font-family: var(--f-ui); font-size: .82rem; font-weight: 700; color: var(--zloto-tekst); }
.pozycje { display: grid; margin-top: 4px; }
.pozycje > div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--linia); }
.pozycje dt { font-size: .96rem; font-weight: 600; line-height: 1.3; }
.pozycje dt small { display: block; font-weight: 400; font-size: .8rem; line-height: 1.35; color: var(--tekst-2); }
.pozycje dd { font-size: .84rem; font-style: italic; color: var(--tekst-2); text-align: right; white-space: nowrap; }
.rachunek.jest-przyklad .pozycje dd { font-family: var(--f-szeryf); font-style: normal; font-weight: 600; font-size: 1.18rem; color: var(--granat); font-variant-numeric: lining-nums tabular-nums; }
.rachunek.jest-przyklad .pozycje dd::after { content: "przykład"; display: block; font-family: var(--f-ui); font-weight: 700; font-size: .68rem; color: var(--czerwien); }
.rachunek__slupek { display: none; height: 10px; margin-top: 16px; gap: 2px; }
.rachunek.jest-przyklad .rachunek__slupek { display: flex; }
.rachunek__slupek i { flex: var(--u) 0 0; background: var(--granat); transform-origin: 0 50%; }
.rachunek__slupek i:nth-child(2) { background: var(--szalwia); }
.rachunek__slupek i:nth-child(3) { background: var(--zloto); }
.rachunek__ile { margin-top: 14px; font-size: .9rem; color: var(--tekst-2); }
.rachunek__ile b { font-family: var(--f-szeryf); font-size: 1.3rem; color: var(--granat); margin: 0 4px 0 0; }
.rachunek__ile b + b, .rachunek__ile b:nth-of-type(2) { margin-left: 14px; }
.rachunek__stan { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 10px 12px; background: var(--papier); font-size: .9rem; font-weight: 600; color: var(--granat); }
.rachunek__stan i { flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--zloto-tekst); }
.rachunek.jest-przyklad .rachunek__stan i { background: var(--czerwien); box-shadow: none; }
.rachunek__zasada { margin: 10px 0 16px; font-size: .82rem; line-height: 1.45; color: var(--tekst-2); }

.polka { padding: clamp(60px, 9vh, 110px) var(--gutter) 0; }
.polka__tytul { font-size: clamp(1.6rem, 2.6vw, 2.4rem); }
.polka__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); margin-top: 26px; }
.tom > a, .tom__wnetrze { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; column-gap: 16px; align-items: start; height: 100%; min-height: 132px; padding: 18px 18px 18px 16px; background: var(--karta); box-shadow: inset 0 0 0 1px var(--linia); }
.tom img, .tom svg { grid-row: 1 / 4; width: 62px; height: 62px; }
.tom svg { width: 34px; height: 56px; margin: 3px 14px; color: var(--tekst-2); opacity: .6; }
.tom__nr { font-family: var(--f-ui); font-size: .82rem; font-weight: 700; color: var(--zloto-tekst); }
.tom b { font-weight: 400; font-size: 1.16rem; line-height: 1.2; margin-top: 3px; }
.tom small { font-family: var(--f-ui); font-size: .82rem; line-height: 1.35; color: var(--tekst-2); margin-top: 6px; }
.tom--otwarty > a { box-shadow: inset 0 0 0 1.5px var(--zloto), 0 20px 34px -26px rgba(200, 151, 58, .9); transition: translate .5s var(--ease); }
.tom--otwarty > a:hover { translate: 0 -4px; }
.tom:not(.tom--otwarty) .tom__wnetrze { background: transparent; box-shadow: inset 0 0 0 1px var(--linia); }
.tom:not(.tom--otwarty) img { filter: grayscale(.7); opacity: .7; }
.tom--pusty .tom__wnetrze { box-shadow: none; outline: 1.5px dashed rgba(27, 49, 73, .3); outline-offset: -1.5px; }

/* ------------------------------------------------------------ karta projektu */
.karta-projektu { background: var(--papier-ciemny); }
.karta-projektu__uklad { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(30px, 6vw, 110px); align-items: center; }
.karta-projektu__opis > p:not(.numer) { margin-top: 20px; max-width: 30em; font-size: clamp(1.1rem, 1.3vw, 1.26rem); line-height: 1.6; }
.karta-projektu__widoki { display: flex; flex-wrap: wrap; gap: 6px 30px; margin-top: 22px; }
.fiszka { position: relative; padding: clamp(22px, 3vw, 40px); background: var(--karta); rotate: .6deg; box-shadow: 0 1px 0 rgba(27, 49, 73, .2), 0 40px 60px -44px rgba(27, 49, 73, .6); }
.fiszka header { position: relative; min-height: clamp(104px, 10vw, 128px); margin: 0 calc(-1 * clamp(22px, 3vw, 40px)); padding: 0 calc(130px + clamp(22px, 3vw, 40px)) 16px clamp(22px, 3vw, 40px); border-bottom: 2px solid var(--czerwien); }
.fiszka__id { font-family: var(--f-ui); font-size: .8rem; font-weight: 700; letter-spacing: .1em; color: var(--tekst-2); }
.fiszka h3 { margin-top: 8px; font-size: clamp(1.6rem, 2.7vw, 2.4rem); line-height: 1.08; }
.fiszka__pod { font-style: italic; font-size: 1.1rem; color: var(--tekst-2); }
.pieczec { position: absolute; right: clamp(22px, 3vw, 40px); top: 0; display: grid; justify-items: center; gap: 2px; padding: 9px 12px 8px; rotate: -7deg; color: var(--czerwien); box-shadow: inset 0 0 0 2px currentColor, inset 0 0 0 4px var(--karta), inset 0 0 0 5px currentColor;
  font-family: var(--f-ui); font-size: .78rem; font-weight: 800; line-height: 1.25; text-align: center; letter-spacing: .04em; opacity: .9; }
.pieczec svg { width: 12px; height: 12px; }
.fiszka dl { display: grid; margin: 4px calc(-1 * clamp(22px, 3vw, 40px)) 0; }
.fiszka dl > div { display: grid; grid-template-columns: 11.5rem 1fr; gap: 14px; align-items: baseline; min-height: 40px; padding: 7px clamp(22px, 3vw, 40px) 6px; border-bottom: 1px solid rgba(27, 49, 73, .1); }
.fiszka dl > div:last-child { border-bottom: 0; }
.fiszka dt { font-family: var(--f-ui); font-size: .82rem; font-weight: 700; color: var(--tekst-2); }
.fiszka dd { font-size: 1.04rem; line-height: 1.38; }

/* ------------------------------------------------------------ 04 LUDZIE */
.ludzie__lead { margin-top: 20px; max-width: 34em; font-size: clamp(1.12rem, 1.4vw, 1.32rem); line-height: 1.5; color: var(--tekst-2); }
.grupy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3.4vw, 56px); margin-top: clamp(40px, 7vh, 76px); }
.grupa h3 { padding-bottom: 12px; border-bottom: 1.5px solid var(--granat); font-size: clamp(1.3rem, 1.9vw, 1.7rem); }
.grupa ul { display: grid; gap: 10px; margin-top: 16px; }
.tabliczka { display: grid; gap: 6px; align-content: center; min-height: 96px; padding: 16px 20px; background: var(--karta); box-shadow: inset 0 0 0 1px var(--linia); }
.tabliczka small { font-family: var(--f-ui); font-size: .82rem; font-weight: 700; color: var(--zloto-tekst); }
.tabliczka b { font-weight: 400; font-size: 1.22rem; line-height: 1.2; }
.tabliczka--mr img { width: 118px; height: auto; }
.tabliczka--pusta { background: transparent; box-shadow: none; outline: 1.5px dashed rgba(27, 49, 73, .3); outline-offset: -1.5px; }
.tabliczka--pusta small, .tabliczka--pusta b { color: var(--tekst-2); }
.tabliczka--pusta b { font-style: italic; }
.grupa__uwaga, .ludzie__zrodlo { margin-top: 14px; font-family: var(--f-ui); font-size: .88rem; line-height: 1.5; color: var(--tekst-2); }
.ludzie__zrodlo { margin-top: clamp(28px, 4vh, 44px); }

/* ------------------------------------------------------------ WŁĄCZ SIĘ */
.wlacz { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); background: var(--papier-jasny); }
.wlacz__foto { position: relative; min-height: min(92vh, 900px); overflow: hidden; }
.wlacz__foto img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; object-position: 64% 50%; }
.wlacz__foto figcaption { position: absolute; left: var(--gutter); bottom: 18px; padding: 6px 12px; background: rgba(27, 49, 73, .62); color: #fff; font-family: var(--f-ui); font-size: .86rem; }
.wlacz__tresc { align-self: center; padding: clamp(60px, 9vh, 120px) var(--gutter) clamp(60px, 9vh, 120px) clamp(28px, 5vw, 90px); }
.wlacz .tytul { font-size: clamp(2.1rem, 3.7vw, 3.7rem); }
.wlacz__lead { margin-top: 18px; font-size: clamp(1.12rem, 1.4vw, 1.3rem); line-height: 1.5; color: var(--tekst-2); }
.zgloszenie { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; margin-top: 30px; font-family: var(--f-ui); }
.zgloszenie__co { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.zgloszenie__co legend { float: left; margin-right: 6px; padding: 0; font-size: .98rem; font-weight: 600; }
.zgloszenie__co label { position: relative; cursor: pointer; }
.zgloszenie__co input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.zgloszenie__co span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linia); background: var(--karta); font-size: .98rem; font-weight: 500; transition: background-color .3s, color .3s; }
.zgloszenie__co input:checked + span { background: var(--granat); color: var(--papier); box-shadow: none; }
.zgloszenie__co input:focus-visible + span { outline: 2px solid var(--zloto-tekst); outline-offset: 3px; }
.pole { display: grid; gap: 4px; }
.pole--szerokie, .zgloszenie .guzik, .zgloszenie__stan { grid-column: 1 / -1; }
.pole span { font-size: .86rem; font-weight: 600; color: var(--tekst-2); }
.pole input, .pole textarea { width: 100%; padding: 10px 2px; border: 0; border-bottom: 1.5px solid rgba(27, 49, 73, .4); border-radius: 0; background: transparent; color: var(--granat); font-family: var(--f-szeryf); font-size: 1.14rem; outline: none; resize: vertical; }
.pole input::placeholder { color: rgba(74, 95, 116, .75); font-style: italic; }
.pole input:focus, .pole textarea:focus { border-bottom-color: var(--zloto); box-shadow: 0 1.5px 0 var(--zloto); }
.zgloszenie .guzik { justify-self: start; margin-top: 6px; }
.zgloszenie__stan { padding: 12px 16px; background: var(--papier); font-size: .96rem; line-height: 1.45; }

/* ------------------------------------------------------------ stopka */
.stopka { padding: clamp(70px, 11vh, 130px) var(--gutter) calc(34px + env(safe-area-inset-bottom)); background: var(--granat); color: var(--papier); font-size: 1rem; }
.stopka__gora { display: grid; justify-items: center; gap: 22px; text-align: center; max-width: 54rem; margin: 0 auto; }
.stopka__znak { width: 58px; height: 94px; color: var(--zloto); filter: drop-shadow(0 0 18px rgba(237, 190, 90, .4)); }
.stopka__motto { font-size: clamp(1.7rem, 3.4vw, 3.1rem); line-height: 1.14; letter-spacing: -.008em; }
.stopka__motto em { color: var(--zloto-jasne); }
.stopka__opis { max-width: 36em; font-family: var(--f-ui); font-size: 1.02rem; line-height: 1.6; color: rgba(245, 239, 226, .8); }
.stopka__dol { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px clamp(20px, 4vw, 60px); max-width: var(--max); margin: clamp(50px, 8vh, 90px) auto 0; padding-top: 30px; border-top: 1px solid rgba(245, 239, 226, .18); }
.stopka__dol > img { width: 128px; height: auto; padding: 10px 14px; box-sizing: content-box; background: var(--papier-jasny); border-radius: 3px; }
.stopka__wartosci { font-style: italic; font-size: 1.18rem; color: var(--zloto-jasne); }
.stopka__inspiracja { display: flex; align-items: center; gap: 12px; font-family: var(--f-ui); font-size: .82rem; color: rgba(245, 239, 226, .72); }
.stopka__inspiracja img { width: 64px; height: 64px; border-radius: 50%; }
.stopka__drobne { grid-column: 1 / -1; font-family: var(--f-ui); font-size: .82rem; line-height: 1.55; color: rgba(245, 239, 226, .66); max-width: 70em; }

/* ------------------------------------------------------------ okna dialogowe: rachunek na telefonie, lupa, legenda */
dialog { border: 0; padding: 0; color: var(--granat); }
dialog::backdrop { background: rgba(20, 32, 48, .5); }
.rachunek-przycisk { position: fixed; z-index: 56; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); white-space: nowrap; display: none; align-items: center; gap: 10px; min-height: 50px; padding: 0 26px; border: 0; cursor: pointer;
  background: var(--granat); color: var(--papier); clip-path: var(--szesciokat); font-family: var(--f-ui); font-size: 1rem; font-weight: 600; }
.rachunek-przycisk svg { width: 14px; height: 14px; color: var(--zloto-jasne); }
.arkusz { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: 86svh; margin: 0; overflow: auto; background: var(--karta); border-top: 3px solid var(--zloto); }
.arkusz__tresc .rachunek { position: static; border-top: 0; box-shadow: none; padding: 22px var(--gutter) 34px; }
.arkusz__zamknij { position: absolute; z-index: 2; right: 6px; top: 6px; display: grid; place-items: center; width: 46px; height: 46px; border: 0; background: none; cursor: pointer; }
.lupa { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; background: rgba(20, 32, 48, .94); color: var(--papier); }
.lupa[open] { display: grid; place-items: center; }
.lupa figure { display: grid; justify-items: center; gap: 14px; max-width: min(1500px, 92vw); }
.lupa img { max-width: 100%; max-height: 80vh; width: auto; height: auto; box-shadow: 0 30px 80px -30px #000; }
.lupa figcaption { max-width: 44em; font-family: var(--f-ui); font-size: .96rem; line-height: 1.45; text-align: center; color: rgba(245, 239, 226, .88); }
.lupa button { position: absolute; display: grid; place-items: center; width: 50px; height: 50px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(245, 239, 226, .12); color: var(--papier); }
.lupa__zamknij { right: 16px; top: 16px; }
.lupa__nawi { top: 50%; translate: 0 -50%; }
.lupa__nawi--wstecz { left: 14px; }
.lupa__nawi--dalej { right: 14px; }
.legenda-przycisk { position: fixed; z-index: 57; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(251, 248, 240, .94); box-shadow: inset 0 0 0 1px var(--granat), 0 10px 24px -14px rgba(27, 49, 73, .6); font-family: var(--f-ui); font-size: .86rem; font-weight: 700; color: var(--granat); }
.legenda-przycisk span { font-weight: 500; color: var(--tekst-2); }
.legenda { position: fixed; inset: auto 14px calc(68px + env(safe-area-inset-bottom)) auto; width: min(440px, calc(100vw - 28px)); max-height: 78vh; margin: 0; overflow: auto; padding: 26px 26px 22px; background: var(--karta); border-top: 3px solid var(--granat); box-shadow: 0 30px 70px -30px rgba(27, 49, 73, .7); font-family: var(--f-ui); }
.legenda h2 { font-family: var(--f-szeryf); font-size: 1.5rem; font-weight: 400; }
.legenda ul { display: grid; gap: 14px; margin-top: 16px; }
.legenda li { font-size: .94rem; line-height: 1.5; }
.znaczek { display: block; width: fit-content; margin-bottom: 4px; padding: 2px 9px; font-size: .76rem; font-weight: 700; border-radius: 3px; }
.znaczek--tak { background: #dfe8d8; color: #2f4a26; }
.znaczek--rob { background: #f3e3b8; color: #5d4011; }
.znaczek--nie { background: #f1d6d3; color: #7c1b20; }
.legenda__przelacz { display: flex; align-items: center; gap: 12px; min-height: 48px; margin-top: 18px; padding: 8px 12px; background: var(--papier); cursor: pointer; font-size: .96rem; font-weight: 600; }
.legenda__przelacz input { width: 20px; height: 20px; accent-color: var(--granat); }
.legenda__drobne { margin-top: 8px; font-size: .8rem; color: var(--tekst-2); }

/* ------------------------------------------------------------ mniejsze ekrany */
@media (max-width: 1180px) {
  .mr__menu { display: none; }
  .mr { grid-template-columns: 1fr auto; }
  .polka__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mapa__karta { width: min(340px, 38vw); }
}
@media (max-width: 860px) {
  :root { --pasek-h: 52px; --mr-h: 60px; }
  .mr__logo img { width: 108px; }
  .mr__iskra { min-height: 44px; padding: 0 16px 0 13px; font-size: .9rem; }
  .pasek { gap: 6px; }
  .pasek__znak b, .pasek__cta { display: none; }
  .pasek__lista { flex: 1; justify-content: space-between; gap: 0; margin: 0; }
  .pasek__lista a { padding: 0 7px; font-size: .92rem; }
  .swit { height: 150vh; }
  .swit__obraz img { object-position: var(--kadr-x, 80%) 50%; }
  .swit__tresc { width: auto; right: var(--gutter); top: clamp(22px, 5vh, 46px); }
  .swit__tresc::before { inset: -18% -16% -20% -16%; background: radial-gradient(ellipse closest-side at 50% 50%, rgba(251, 248, 240, .8), rgba(251, 248, 240, .45) 60%, transparent); }
  .swit h1 { font-size: clamp(2.2rem, 10.4vw, 3.4rem); margin-top: 12px; }
  .swit__przewin { display: none; }
  .swit__ai { top: 10px; right: 10px; }
  .wartosci { bottom: calc(var(--mr-h) + 70px); font-size: 1rem; padding: 7px 18px 8px; }   /* nad przyciskiem legendy makiety */
  .wartosci li + li::before { margin: 0 9px; width: 7px; height: 7px; }
  .idea__gora, .karta-projektu__uklad, .grupy, .wlacz { grid-template-columns: minmax(0, 1fr); }
  .kroki { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-top: 0; row-gap: 34px; }
  .kroki__nic { display: none; }
  .okno { grid-template-columns: minmax(0, 1fr); }
  .szyba__obraz { aspect-ratio: 16 / 8; }
  .szyba__obraz--ksiega img { width: 30%; }

  .mapa { height: auto; }
  .mapa__scena { position: relative; top: 0; height: auto; overflow: visible; display: grid; grid-template-columns: minmax(0, 1fr); }
  .mapa__naglowek { position: relative; left: 0; top: 0; max-width: none; padding: 64px var(--gutter) 6px; }
  .mapa__naglowek::before { display: none; }
  .mapa__plotno, .mapa__pinezki { position: relative; grid-row: 3; grid-column: 1; height: 68svh; min-height: 420px; }
  .mapa__plotno { position: relative; inset: auto; }
  .mapa__plaska { grid-row: 3; grid-column: 1; position: relative; left: 0; top: 0; translate: none; width: 100%; height: auto; }
  .mapa__kategorie { position: relative; grid-row: 2; left: 0; bottom: 0; display: flex; gap: 8px; overflow-x: auto; padding: 14px var(--gutter) 12px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .mapa__kategorie::-webkit-scrollbar { display: none; }
  .kat { flex: none; }
  .kat small { display: none; }
  .mapa__karta { position: relative; grid-row: 4; right: 0; top: 0; translate: none; width: auto; max-height: none; margin: -40px var(--gutter) 0; }
  .mapa__sterowanie { grid-row: 3; grid-column: 1; align-self: start; justify-self: end; position: relative; left: 0; bottom: 0; margin: 12px var(--gutter) 0 0; z-index: 6; }
  .pin__medalion { left: -21px; width: 42px; height: 42px; }
  .pin__nazwa { left: 26px; bottom: calc(var(--maszt, 28px) + 8px); font-size: .8rem; }
  .mapa__zrodla { position: relative; grid-row: 5; left: 0; bottom: 0; display: block; min-height: 0; max-width: none; padding: 14px var(--gutter) 40px; }

  .otwarcie { min-height: 0; padding-top: 30px; padding-bottom: 10px; }
  .ksiazka { aspect-ratio: auto; max-height: none; perspective: none; display: grid; gap: 0; }
  .ksiazka::after, .ksiazka__wstazka { display: none; }
  .ksiazka__prawa, .ksiazka__skrzydlo { position: relative; left: 0; width: 100%; height: auto; }
  .ksiazka__skrzydlo { order: -1; transform: none; display: grid; }
  .okladka, .strona-lewa { position: relative; inset: auto; transform: none; -webkit-backface-visibility: visible; backface-visibility: visible; }
  .okladka { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 20px; row-gap: 2px; padding: 22px 26px; border-radius: 8px 8px 0 0; }
  .okladka::before { inset: 8px; }
  .okladka__znak { grid-row: 1 / 4; width: 44px; height: 72px; }
  .okladka__seria { margin-top: 0; align-self: end; }
  .strona-lewa { padding: 30px 26px 34px; border-radius: 0; background: var(--karta); box-shadow: inset 0 0 0 1px rgba(27, 49, 73, .1); }
  .wiersz-ksiegi { font-size: 1.1rem; }
  .ksiazka__prawa { border-radius: 0 0 8px 8px; background: var(--karta); padding: 8px 20px 34px; box-shadow: inset 0 0 0 1px rgba(27, 49, 73, .1); }
  .czytelnia { grid-template-columns: minmax(0, 1fr); }
  .czytelnia > .rachunek { display: none; }
  .rachunek-przycisk { display: inline-flex; }
  .rozdzial { padding-left: 18px; }
  .polka__lista { grid-template-columns: minmax(0, 1fr); }
  .fiszka { rotate: 0deg; }
  .fiszka dl > div { grid-template-columns: 1fr; gap: 0; }
  .fiszka header { min-height: 104px; }
  .wlacz__foto { min-height: 56vh; }
  .wlacz__tresc { padding: 54px var(--gutter) 70px; }
  .zgloszenie { grid-template-columns: minmax(0, 1fr); }
  .zgloszenie__co legend { float: none; width: 100%; margin-bottom: 4px; }
  .stopka__dol { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .legenda-przycisk span { display: none; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .swit__przyciski .lacze { display: none; }
}
@media (max-width: 420px) {
  .galeria { columns: 1; }
  .kroki { grid-template-columns: minmax(0, 1fr); }
  .wartosci { left: 12px; padding: 7px 14px 8px; font-size: .94rem; }
  .wartosci li + li::before { margin: 0 7px; }
  .pasek__znak { min-width: 30px; }
  .pasek__znak svg { width: 15px; height: 24px; }
  .pasek__lista a { padding: 0 4px; font-size: .88rem; }
}
/* niskie ekrany (laptopy 1280x720, 1366x768): ciaśniejsze kategorie mapy, żeby nie wchodziły na tytuł */
@media (max-height: 830px) and (min-width: 861px) {
  .kat { min-height: 44px; padding: 3px 16px 3px 4px; }
  .kat img { width: 34px; height: 34px; }
  .kat small { display: none; }
  .mapa__kategorie { gap: 5px; }
  .mapa__naglowek { top: clamp(14px, 3vh, 30px); }
  .mapa__naglowek .tytul { font-size: clamp(2rem, 3.4vw, 3rem); }
}
@media (max-height: 640px) and (min-width: 861px) {
  .swit__tresc { top: 20px; }
  .swit h1 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
  .wartosci { display: none; }
  .mapa__kategorie { grid-template-columns: 1fr 1fr; }
  .mapa__lead { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .swit { height: auto; }
  .swit__scena { position: relative; top: 0; }
  .swit__obraz--po { -webkit-mask-image: none; mask-image: none; }
  .swit__przewin, .swit__iskry { display: none; }
  .mapa { height: auto; }
  .mapa__scena { position: relative; top: 0; }
  .pin--iskra .pin__kropka::after, .szyba__obraz--mapa i { animation: none; }
  * { scroll-behavior: auto !important; }
}