:root {
  /* Projekt jest jasny z zalozenia. Deklarujemy jednak obsluge obu schematow,
     bo "color-scheme: light" mowi przegladarce dokladnie to, czego szuka funkcja
     "Auto dark theme for web contents" w Chrome na Androidzie: ze strona umie
     tylko jasny wariant i wolno ja przyciemnic algorytmicznie. Wlasny blok
     prefers-color-scheme na koncu pliku odbiera Chrome ten powod. */
  color-scheme: light dark;
  --paper: #f4eddf;
  --paper-2: #e9ddc5;
  --ink: #24251f;
  --muted: #6a675d;
  --line: #c9baa0;
  --green: #214d3a;
  --green-pale: #dfe8df;
  --red: #923731;
  --red-pale: #f0dfdc;
  --blue: #315875;
  --blue-pale: #dce7ee;
  --gold: #a77c32;
  --white: #fffdf8;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; }

/* Kto prosi system o mniej ruchu, dostaje mniej ruchu takze tutaj. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav a, .card-link { transition: none; }
  .card-link:hover { transform: none; }
}
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 0%, rgba(167,124,50,.13), transparent 28rem),
    linear-gradient(180deg, #eee4d1 0, var(--paper) 29rem, #faf6ed 100%);
  font-family: var(--sans);
  line-height: 1.68;
  text-rendering: optimizeLegibility;
}
a { color: var(--blue); text-underline-offset: .18em; }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

/* Warstwa 40, nie 20. Przyklejony pasek naglowka ma 30, wiec przy nizszej
   wartosci sfokusowany link ladowal pod nim: na telefonie pasek jest
   nieprzezroczysty i zakrywal go w calosci, a na szerokim ekranie przeswitywal
   przez rgba .9 z blurem, co daje 1,22:1 zamiast 15,45:1. */
.skip {
  position: fixed;
  top: -6rem;
  left: 1rem;
  z-index: 40;
  padding: .65rem .9rem;
  background: var(--ink);
  color: white;
}
.skip:focus { top: 1rem; }

.notice {
  padding: .55rem 1rem;
  color: #eee8dc;
  background: var(--ink);
  font-size: .82rem;
  text-align: center;
}
.notice strong { color: #ddc48f; font-weight: 650; }

.site-head {
  position: sticky;
  top: .65rem;
  z-index: 30;
  width: min(1180px, calc(100% - 1rem));
  margin: .65rem auto 0;
  border: 1px solid rgba(169, 149, 116, .72);
  border-radius: .85rem;
  background: rgba(255, 253, 248, .9);
  box-shadow: 0 12px 32px rgba(53, 43, 26, .14);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(12px);
}
.head-inner {
  width: calc(100% - 1.5rem);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
}
.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 700;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.8rem;
  border: 1px solid var(--red);
  border-radius: .3rem;
  color: var(--red);
  background: var(--white);
  box-shadow: 3px 4px 0 rgba(146,55,49,.13);
  font-size: 1.3rem;
}
.nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .15rem; }
.nav a {
  padding: .45rem .62rem;
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  font-size: .88rem;
  white-space: nowrap;
  transition: color .16s ease, background-color .16s ease, transform .16s ease;
}
.nav a:hover { transform: translateY(-1px); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--green); background: var(--green-pale); }
.nav a[aria-current="page"] { box-shadow: inset 0 0 0 1px rgba(33, 77, 58, .16); }

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero::after {
  content: "♣  ♦  ♥  ♠";
  position: absolute;
  right: -1.5rem;
  bottom: -2.4rem;
  color: rgba(146,55,49,.08);
  font-family: var(--serif);
  font-size: clamp(5rem, 14vw, 11rem);
  letter-spacing: -.18em;
  white-space: nowrap;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  width: min(1020px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 7.7rem) 0 clamp(4rem, 8vw, 6.7rem);
}
.crumb { color: var(--red); font-size: .92rem; font-weight: 650; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.12; text-wrap: balance; }
h1 { max-width: 900px; margin: .45rem 0 1.1rem; font-size: clamp(3rem, 8vw, 6.8rem); letter-spacing: -.055em; }
.subpage h1 { font-size: clamp(2.9rem, 7vw, 5.8rem); }
.lead { max-width: 790px; margin: 0; color: #4d4b43; font-family: var(--serif); font-size: clamp(1.18rem, 2.4vw, 1.62rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.button {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: .65rem 1rem;
  border: 1px solid var(--green);
  border-radius: .35rem;
  color: white;
  background: var(--green);
  text-decoration: none;
  font-weight: 650;
}
.button.alt { color: var(--green); background: transparent; }
.button:hover { color: white; background: var(--red); border-color: var(--red); }

main { display: block; }
.section { width: min(1020px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(3.8rem, 7vw, 6rem) 0; }
.section + .section { border-top: 1px solid var(--line); }
.section-head { display: grid; grid-template-columns: minmax(190px, .35fr) minmax(0, 1fr); gap: 2rem; margin-bottom: 2rem; }
.section-kicker { color: var(--red); font-size: .9rem; font-weight: 700; }
.section h2 { margin: 0 0 .75rem; font-size: clamp(2rem, 4.5vw, 3.5rem); letter-spacing: -.035em; }
.section-intro { max-width: 720px; margin: 0; color: var(--muted); font-size: 1.05rem; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.card {
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: .55rem;
  background: rgba(255,253,248,.75);
  box-shadow: 0 8px 28px rgba(55,43,25,.055);
}
.card h3 { margin: 0 0 .55rem; font-size: 1.42rem; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card-link { color: inherit; text-decoration: none; }
.card-link:hover { border-color: var(--red); color: inherit; transform: translateY(-2px); }
.card-link { transition: transform .18s ease, border-color .18s ease; }
.tone-green { background: var(--green-pale); border-color: #aebfad; }
.tone-red { background: var(--red-pale); border-color: #caa8a2; }
.tone-blue { background: var(--blue-pale); border-color: #a8bdca; }

.prose { max-width: 790px; }
.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin: 2rem 0 .55rem; font-size: 1.5rem; }
.prose p { margin: 0 0 1rem; }
.prose li + li { margin-top: .45rem; }
.prose blockquote {
  margin: 1.8rem 0;
  padding: 1.1rem 1.25rem;
  border-left: 4px solid var(--red);
  background: var(--white);
  font-family: var(--serif);
  font-size: 1.18rem;
}
.aside {
  margin: 1.6rem 0;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: .45rem;
  background: var(--white);
}
.aside strong { color: var(--green); }

.hypothesis {
  position: relative;
  margin: 2rem 0 2.6rem;
  padding: clamp(1.35rem, 4vw, 2.25rem);
  border: 1px solid #a8bdca;
  border-radius: .65rem;
  background:
    linear-gradient(135deg, rgba(220,231,238,.94), rgba(255,253,248,.92)),
    var(--blue-pale);
  box-shadow: 0 12px 34px rgba(49,88,117,.09);
}
.hypothesis::before {
  content: "?";
  position: absolute;
  right: 1.2rem;
  top: .65rem;
  color: rgba(49,88,117,.1);
  font-family: var(--serif);
  font-size: 5.5rem;
  line-height: 1;
}
.hypothesis-label {
  display: inline-block;
  margin: 0 0 .75rem;
  padding: .25rem .55rem;
  border: 1px solid rgba(49,88,117,.35);
  border-radius: 999px;
  color: var(--blue);
  background: rgba(255,255,255,.55);
  font-size: .78rem;
  font-weight: 750;
}
.hypothesis h3 { position: relative; margin: 0 0 1rem; font-size: clamp(1.65rem, 3.4vw, 2.35rem); }
.hypothesis p { position: relative; }
.hypothesis-boundary {
  position: relative;
  margin: 1.35rem 0 0;
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--blue);
  color: #384a56;
  background: rgba(255,255,255,.62);
}
.hypothesis-boundary strong { color: var(--blue); }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin: 0 0 2rem; }
.fact { padding: 1rem; border-top: 3px solid var(--green); background: rgba(255,253,248,.72); }
.fact b { display: block; font-family: var(--serif); font-size: 1.35rem; }
.fact span { color: var(--muted); font-size: .88rem; }

/* Sygnal przewijania ten sam co w nawigacji: gradient na krawedzi, bo pasek
   przewijania jest ukryty i bez tego nie widac, ze tabela ma dalszy ciag. */
.table-wrap {
  overflow-x: auto;
  margin: 1.5rem 0;
  background:
    linear-gradient(90deg, var(--paper) 30%, rgba(244,237,223,0)) left / 28px 100% no-repeat,
    linear-gradient(90deg, rgba(244,237,223,0), var(--paper) 70%) right / 28px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(53,43,26,.16), rgba(53,43,26,0)) left / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(53,43,26,.16), rgba(53,43,26,0)) right / 12px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
table { width: 100%; min-width: 650px; border-collapse: collapse; background: rgba(255,253,248,.72); }
th, td { padding: .8rem .9rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--green); background: var(--green-pale); font-family: var(--serif); font-size: 1.05rem; }

.timeline { margin: 2rem 0; padding: 0; list-style: none; }
.timeline li { position: relative; margin-left: .7rem; padding: 0 0 1.6rem 2rem; border-left: 1px solid var(--line); }
.timeline li::before { content: ""; position: absolute; left: -.36rem; top: .35rem; width: .65rem; height: .65rem; border-radius: 50%; background: var(--red); }
.timeline time { display: block; color: var(--red); font-weight: 700; }

.history-map {
  margin: 2rem 0 2.5rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: .55rem;
  background: var(--white);
  box-shadow: 0 8px 28px rgba(55,43,25,.055);
}
.history-map iframe {
  display: block;
  width: 100%;
  height: 430px;
  border: 0;
  background: var(--paper-2);
}
.map-caption {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: start;
  padding: 1rem 1.15rem;
  color: var(--muted);
  font-size: .9rem;
}
.map-caption strong { color: var(--ink); }
.map-caption p { margin: 0; }
.map-caption a { white-space: nowrap; }

/* Photo Dog fix: responsive Drewutnia gallery - ref: design-system.md#Responsive-breakpoints */
.drewutnia-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
  max-width: 666px;
  margin: 1.5rem 0 .75rem;
}
.drewutnia-photo {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: .55rem;
  background: var(--white);
}
.drewutnia-photo--wide { grid-column: 1 / -1; }
.drewutnia-photo img { display: block; width: 100%; height: auto; }
.drewutnia-photo figcaption {
  padding: .75rem .85rem;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.5;
}
.drewutnia-photo figcaption strong { color: var(--ink); }
.gallery-note { max-width: 666px; color: var(--muted); font-size: .84rem; }

.source-list { display: grid; gap: 1rem; margin: 1.5rem 0; padding: 0; list-style: none; counter-reset: sources; }
.source-list li { position: relative; padding: 1.25rem 1.25rem 1.25rem 4rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--white); counter-increment: sources; }
.source-list li::before { content: counter(sources); position: absolute; left: 1.15rem; top: 1.15rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: white; background: var(--green); font-family: var(--serif); font-weight: 700; }
.source-list h3 { margin: 0 0 .35rem; font-size: 1.2rem; }
.source-list p { margin: .25rem 0; }
.source-list small { color: var(--muted); }

.verdict { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; margin: 2rem 0; padding: 1.4rem; border: 1px solid #aebfad; border-radius: .55rem; background: var(--green-pale); }
.verdict-mark { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; color: white; background: var(--green); font-family: var(--serif); font-size: 1.25rem; }
.verdict h2, .verdict h3 { margin: 0 0 .35rem; font-size: 1.45rem; }
.verdict p { margin: 0; }

.site-foot { margin-top: 2rem; color: #ddd6ca; background: var(--ink); }
.foot-inner { width: min(1020px, calc(100% - 2rem)); margin: 0 auto; padding: 2.6rem 0; display: flex; justify-content: space-between; gap: 2rem; }
.site-foot a { color: #ddc48f; }
.site-foot p { max-width: 650px; margin: 0; }
.foot-mark { font-family: var(--serif); font-size: 1.2rem; color: white; }

@media (max-width: 820px) {
  /* Zmierzone przy 375 px, nie zgadywane: przyklejony pasek ma 60 px wysokosci,
     siedzi na "top: .4rem" (6,4 px), wiec jego dolna krawedz po przyklejeniu
     wypada na 66,4 px. scroll-padding-top 5.5rem to 88 px, czyli 21,6 px zapasu.
     Skoki po kotwicach (#zagraj, #o-projekcie, #tresc) juz sie miescily i to nie
     tu byla usterka; wartosc zostaje, a komentarz ma powstrzymac kolejna probe
     "naprawienia" liczby, ktora jest poprawna. Przemierzyc po kazdej zmianie
     wysokosci paska: document.querySelector('.site-head').getBoundingClientRect(). */
  html { scroll-padding-top: 5.5rem; }
  /* Prawdziwa usterka na zrzucie z historia.html: pasek byl polprzezroczysty
     (rgba .9 plus backdrop-filter), wiec naglowek przewijajacy sie pod nim
     przebijal przez tlo i czytal sie jako uciety w polowie linii. Na waskim
     ekranie pasek zajmuje cala szerokosc i nie ma powodu, zeby cokolwiek przez
     niego przeswitywalo. Desktop zostaje przezroczysty, bez zmian. */
  .site-head {
    /* Przyklejamy do samej krawedzi. Przy "top: .4rem" nad paskiem zostawal
       pasek 6,4 px, przez ktory przewijal sie tekst, wiec nad naglowkiem stale
       widac bylo scieta gorna polowe liter. Margines .4rem zostaje, wiec
       na niescrollowanej stronie pasek nadal odstaje od paska informacyjnego. */
    top: 0;
    width: calc(100% - .75rem);
    margin-top: .4rem;
    background: #fffdf8;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* Trzecia kolumna slownika chowala sie za krawedzia, bo tabela mialaby zawsze
     650 px. Ponizej 820 px kolumny ukladaja sie same i nic nie wypada z kadru. */
  table { min-width: 0; }
  th, td { padding: .6rem .55rem; }
  /* Cel dotykowy 44 px. Mieszcza sie w tym samym pasku, bo min-height 58 px
     zostawia po odjeciu paddingu 46,8 px miejsca. */
  .nav a { padding: .65rem .62rem; }
  .nav a:focus-visible { outline-offset: 1px; }
  .head-inner { align-items: center; flex-direction: row; gap: .65rem; min-height: 58px; padding: .35rem 0; }
  .brand { flex: 0 0 auto; gap: .5rem; font-size: 1.1rem; }
  .brand-mark { width: 1.95rem; height: 2.35rem; font-size: 1rem; box-shadow: 2px 3px 0 rgba(146,55,49,.13); }
  .nav {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding: .2rem 0;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  /* The scrollbar is hidden, so fade whichever end still has links behind it.
     navigation.js toggles these classes; an end with nothing beyond it is never
     faded, so the first and last link are never clipped for decoration alone. */
  .nav--fade-start {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 100%);
  }
  .nav--fade-end {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
  }
  .nav--fade-start.nav--fade-end {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 22px), transparent 100%);
  }
  .nav a { flex: 0 0 auto; scroll-snap-align: center; }
  .section-head { grid-template-columns: 1fr; gap: .55rem; }
  .grid, .grid.two { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .brand > span:last-child { display: none; }
  .nav a { padding: .7rem .44rem; font-size: .82rem; }
  .hero-inner { padding-top: 3.4rem; }
  .facts { grid-template-columns: 1fr; }
  .drewutnia-gallery { grid-template-columns: 1fr; }
  .drewutnia-photo--wide { grid-column: auto; }
  .foot-inner { flex-direction: column; }
  .history-map iframe { height: 340px; }
  .map-caption { grid-template-columns: 1fr; }
}
@media print {
  .notice, .nav, .hero-actions, .skip { display: none; }
  body { background: white; }
  .site-head { position: static; width: 100%; margin: 0; border: 0; box-shadow: none; }
  .hero-inner, .section { padding: 2rem 0; }
  .card, .source-list li { break-inside: avoid; box-shadow: none; }
  a { color: inherit; }
}

/* ---------------------------------------------------------------------------
   Tryb ciemny: świadoma deklaracja, nie zmiana wyglądu.

   Powód. Na telefonie Brunona Chrome na Androidzie renderował kremowy papier
   (--paper) jako ciemną oliwkę, białe karty jako szare, a tekst bez kontrastu.
   Ta sama strona w Firefoksie na tym samym telefonie wyglądała poprawnie, więc
   przyczyna nie leży w arkuszu. Odtworzyliśmy to lokalnie, uruchamiając Chrome
   z flagą --enable-features=WebContentsForceDark: obraz zgadza się ze zrzutami
   z telefonu co do odcienia. To funkcja „Auto dark theme for web contents”.

   Mechanizm. Chrome przyciemnia algorytmicznie strony, które same deklarują, że
   umieją tylko jasny wariant. Wcześniejsze „color-scheme: light” było więc nie
   zabezpieczeniem, lecz dokładnie tym sygnałem. Deklaracja „light dark” razem
   z tym blokiem mówi przeglądarce, że stroną zajmuje się autor.

   Dlaczego paleta zostaje jasna. Serwis jest archiwum udającym papier; ciemny
   wariant nie jest tu wersją tego samego projektu, tylko innym projektem, a na
   taki nikt nie patrzył. Utrzymujemy więc jedną paletę na obu ustawieniach.

   ⚠️ Gotcha: ten blok nie jest miejscem, w którym podmienia się paletę.
   Tokeny z :root na górze pliku obowiązują tu bez zmian, bo media query ich nie
   nadpisuje. Prawdziwy wariant ciemny wymagałby przejścia po całym arkuszu,
   gdzie trzynaście kolorów jest wpisanych wprost, poza systemem tokenów.
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  /* Płótno dokumentu malowane wprost, z pełnym gradientem. Przy
     „color-scheme: light dark” przeglądarka w trybie ciemnym pomalowałaby tło
     sama, zanim dojdzie do reguły na body, i pod przezroczystymi krawędziami
     widać byłoby ciemny pas. Gradient musi być powtórzony co do wartości, bo
     płaskie „var(--paper)” dawało telefonowi w trybie ciemnym inne tło niż
     reszcie świata. */
  html { background: var(--paper); }
  body {
    color: var(--ink);
    background:
      radial-gradient(circle at 8% 0%, rgba(167,124,50,.13), transparent 28rem),
      linear-gradient(180deg, #eee4d1 0, var(--paper) 29rem, #faf6ed 100%);
  }
}

/* Podpis wersji budowy: dyskretny, ale czytelny, zeby bylo wiadomo, co sie testuje. */
.wersja-budowy { margin-top: 1.4rem; font-size: .82rem; opacity: .72; }
.wersja-budowy strong { font-variant-numeric: tabular-nums; }