/* =====================================================================
   BW Digital Systems & Publishing — wspólne style całej strony
   ---------------------------------------------------------------------
   Ten jeden plik obsługuje stronę główną (index.html) ORAZ wszystkie
   podstrony książek (ksiazki/<slug>/index.html). Zmiana koloru albo
   czcionki tutaj = zmiana na całej stronie.

   Kolejność sekcji:
     PALETA · BAZA · PASEK GÓRNY · HERO · SEKCJE · KSIĄŻKI (karty)
     · LIGHTBOX · AUTORZY · STOPKA · ANIMACJE · RWD · CIEMNY MOTYW
     · BANER ZGODY · PODSTRONA KSIĄŻKI
   ===================================================================== */

/* =========================== PALETA =========================== */
/* Jasna, chłodna, czysta – chłodne biele/szarości, akcenty z okładek. */
:root{
  --paper:      #F3F5F7;   /* chłodna, jasna biel – tło strony */
  --paper-2:    #FFFFFF;   /* karty / panele (czysta biel) */
  --paper-3:    #E8ECF0;   /* delikatne pola i wypełnienia */
  --ink:        #1C2126;   /* chłodna, głęboka czerń – tekst */
  --ink-soft:   #5A646E;   /* chłodny szary – tekst drugorzędny */
  --bordo:      #8A2233;   /* Tom I – Lubycza Królewska (akcent) */
  --bordo-deep: #611523;
  --sage:       #6E7E58;   /* Tom II – Bełżec (akcent) */
  --sage-deep:  #3E4A2E;
  --sage-darker:#2C351F;   /* hover dla zielonych przycisków */
  --gold:       #A9842F;   /* rezerwowy akcent (obecnie nieużywany) */
  --rule:       #D5DBE1;   /* chłodna włoskowa linia */
  --accent:     #8A2233;   /* akcent-TEKST (linki, etykiety) – w ciemnym motywie jaśniejszy */
  --accent-2:   #3E4A2E;   /* akcent-TEKST zielony */

  /* Tła kafelków autorów (= kolory okładek serii). W trybie jasnym jaśniejsze,
     w ciemnym głębsze (patrz html[data-theme="dark"]). */
  --tile-bordo:  #8A2233;
  --tile-sage:   #5C6B45;
  --tile-violet: #6A5289;
  --tile-coffee: #7C674F;

  --display: "Spectral", Georgia, "Times New Roman", serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 1120px;
}

/* ---- TON TOMU -------------------------------------------------------
   Każdy tom ma swój kolor (Tom I bordo, Tom II zieleń). Zamiast pisać
   osobne reguły dla każdego tomu, ustawiamy trzy zmienne:
     --tone        kolor TEKSTU (tytuł, obwódki, linki)
     --tone-solid  kolor TŁA przycisków i plakietek
     --tone-deep   ciemniejsze tło na hover
   Klasa .book--i / .book--ii siedzi na karcie książki (strona główna),
   klasa .tone--i / .tone--ii na <body> podstrony książki.
   NOWY TOM: dopisz tu kolejną parę (.book--iii, .tone--iii).            */
.book--i,  .tone--i {  --tone:var(--accent);   --tone-solid:var(--bordo);      --tone-deep:var(--bordo-deep); }
.book--ii, .tone--ii{  --tone:var(--accent-2); --tone-solid:var(--sage-deep);  --tone-deep:var(--sage-darker); }

/* =========================== BAZA ============================= */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  /* ledwie wyczuwalny chłodny refleks – czyste CSS, bez plików */
  background-image:
    radial-gradient(circle at 15% 10%, rgba(138,34,51,.028), transparent 40%),
    radial-gradient(circle at 88% 82%, rgba(110,126,88,.035), transparent 44%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }

h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.12; margin:0; }

/* Etykieta „działu gazety” – eyebrow */
.eyebrow{
  font-family:var(--body);
  font-size:.72rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--tone, var(--accent));
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--tone, var(--accent)); opacity:.6; }

/* Przełącznik widoczności języków (obsługiwany przez data-lang na <html>) */
html[data-lang="pl"] [lang="en"]{ display:none; }
html[data-lang="en"] [lang="pl"]{ display:none; }

/* =========================== PASEK GÓRNY ===================== */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(243,245,247,.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; height:60px;
}
.totop{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  color:var(--ink-soft); font-size:.86rem; font-weight:500; letter-spacing:.03em;
  text-decoration:none;
}
.totop:hover{ color:var(--accent); text-decoration:none; }
.totop .arrow{ font-size:1rem; line-height:1; color:var(--accent); }
.nav{ display:flex; align-items:center; gap:26px; }
.nav a{
  color:var(--ink); font-size:.86rem; font-weight:500;
  letter-spacing:.02em; text-decoration:none;
}
.nav a:hover{ color:var(--accent); text-decoration:none; }
.nav__links{ display:flex; gap:26px; }

.controls{ display:flex; align-items:center; gap:16px; }
.social{ display:flex; gap:14px; }
.social a{ color:var(--ink-soft); display:inline-flex; }
.social a:hover{ color:var(--accent); }
.social svg{ width:22px; height:22px; }

.lang{
  display:inline-flex; border:1px solid var(--rule); border-radius:999px;
  overflow:hidden; font-size:.72rem; font-weight:600; letter-spacing:.06em;
}
.lang button{
  appearance:none; border:0; background:transparent; cursor:pointer;
  padding:5px 11px; color:var(--ink-soft); font:inherit;
}
.lang button.active{ background:var(--bordo); color:#fff; }

/* Hamburger — domyślnie ukryty, włącza się poniżej 860 px (sekcja RWD). */
.navtoggle{
  display:none;
  appearance:none; border:1px solid var(--rule); background:transparent;
  color:var(--ink-soft); width:34px; height:34px; border-radius:999px;
  align-items:center; justify-content:center; cursor:pointer; padding:0; line-height:0;
}
.navtoggle:hover{ color:var(--accent); border-color:var(--accent); }
.navtoggle svg{ width:18px; height:18px; }
.navtoggle .icon-close{ display:none; }
.navtoggle[aria-expanded="true"] .icon-open{ display:none; }
.navtoggle[aria-expanded="true"] .icon-close{ display:inline; }

/* =========================== HERO / WINIETA ================== */
.hero{ padding:64px 0 40px; text-align:center; }
.hero__logo{
  display:block; width:100%; max-width:430px; height:auto;
  margin:0 auto 26px;
  /* logo jest czarno-szare na białym – „multiply” wtapia biel w papier */
  mix-blend-mode:multiply;
}
/* motto w ozdobnej podwójnej linii pod logo */
.hero__motto{
  display:flex; align-items:center; gap:22px;
  max-width:660px; margin:0 auto 40px; color:var(--ink-soft);
}
.hero__motto::before,.hero__motto::after{
  content:""; flex:1; height:0;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
  padding-top:3px; opacity:.7;
}
.hero__motto span{
  font-family:var(--display); font-style:italic; font-size:1.02rem;
  letter-spacing:.01em;
}
@media (max-width:520px){
  .hero__motto span{ font-size:.86rem; }
}
/* datownik – podwójna linia jak w nagłówku gazety */
.dateline{
  display:flex; align-items:center; gap:18px;
  max-width:560px; margin:0 auto 40px;
  font-size:.72rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600;
}
.dateline::before,.dateline::after{
  content:""; flex:1; height:0;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
  padding-top:3px; opacity:.75;
}
.hero__series{
  font-size:clamp(1.85rem, 5vw, 3.2rem);   /* dłuższe hasło – stopień nieco niższy */
  letter-spacing:-.01em; margin:0 auto;
}
.hero__years{
  display:block;
  font-family:var(--display); font-style:italic; font-weight:400;
  color:var(--accent); font-size:clamp(1.2rem,3vw,1.7rem);
  margin-top:.35em;
}
.hero__gloss{
  margin:14px auto 0; color:var(--ink-soft);
  font-family:var(--display); font-size:1rem;
}
.hero__lead{
  max-width:60ch; margin:26px auto 0; color:var(--ink-soft);
  font-size:1.06rem;
}

/* =========================== SEKCJE ========================== */
.section{ padding:76px 0; border-top:1px solid var(--rule); }
.section[id]{ scroll-margin-top:76px; }   /* żeby pasek górny nie zasłaniał nagłówka */
.section__head{ max-width:64ch; margin-bottom:36px; }
.section__head h1,
.section__head h2{
  font-size:clamp(1.7rem,4vw,2.5rem); margin-top:14px;
}
.lede{ font-size:1.12rem; color:var(--ink); margin-top:18px; }

/* Nazwa serii + glosa (w sekcji „Seria wydawnicza”) */
.years{ color:var(--accent); font-style:italic; font-weight:400; white-space:nowrap; }
.series-gloss{
  font-family:var(--display); font-style:italic; color:var(--ink-soft);
  margin:10px 0 0; font-size:1.05rem;
}
/* Serie wydawnicze – dwie kolumny obok siebie (każdy wpis = osobny blok) */
.series-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px 48px; align-items:start; }
/* Kafle serii na stronie głównej — tytuł i JEDNO zdanie. Pełne opisy: /serie/.
   Siatka na sztywno dwukolumnowa: szerokość kafla NIE zależy od długości zdania,
   więc skrócenie jednego opisu nie przestawia całego układu. */
.serieindex{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.serieindex li{
  position:relative; overflow:hidden;
  background:var(--paper-2); border:1px solid var(--rule); border-radius:3px;
  padding:22px 24px;
}
/* Ukośna tasiemka w prawym górnym rogu karty — zwykły tekst obrócony o 45°,
   nadmiar przycina overflow karty. Żadnej grafiki, więc ma wersję PL/EN.
   Kolor: --sage, akcent Tomu II; ten sam w obu motywach.
   Użycie: kafel serii w przygotowaniu („WKRÓTCE”) i karta repozytorium
   w budowie na podstronie IT („W ROZWOJU”). */
.ribbon{
  position:absolute; top:17px; right:-52px; width:170px;
  transform:rotate(45deg);
  background:var(--sage); color:#fff; text-align:center; padding:5px 0;
  font-family:var(--body); font-size:.6rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  white-space:nowrap;
  /* letter-spacing dokleja odstęp także PO ostatniej literze, przez co tekst
     wyrównany do środka siada odrobinę w lewo — text-indent to kompensuje */
  text-indent:.18em;
  box-shadow:0 7px 16px -10px rgba(0,0,0,.65);
}
/* Karta repozytorium w budowie: pas przy lewej krawędzi, w środku ramki.
   Tekst obrócony o 270° — czyta się z dołu do góry, spody liter zwrócone
   w stronę grotu. writing-mode + rotate(180deg) to standardowy sposób na taki
   kierunek. Nadpisujemy tu właściwości .ribbon, które służą wersji ukośnej. */
.pdfcard.is-wip{ padding-left:51px; }
.pdfcard.is-wip .ribbon{
  /* pas JEST lewą krawędzią karty — przylega do samego brzegu, bez włoskowej
     linii obok; grubość 25 px.
     position MUSI być tu powtórzone: reguła .pdfcard > * ustawia dzieciom
     position:relative i nadpisywałaby absolute z komponentu .ribbon. */
  position:absolute;
  top:0; bottom:0; left:0; right:auto; width:25px;
  display:flex; align-items:center; justify-content:center;
  transform:rotate(180deg); writing-mode:vertical-rl;
  padding:0; text-indent:0; box-shadow:none;
  /* rotate(180deg) obraca także narożniki — żeby zaokrąglenie wyszło po lewej,
     trzeba je podać po prawej */
  border-radius:0 3px 3px 0;
  /* dłuższy napis („IN PROGRESS” = 11 znaków) — ciasniejszy odstęp liter,
     żeby zmieścił się także na niższej karcie */
  letter-spacing:.1em;
}

/* tytuł nie może wchodzić pod tasiemkę */
.serieindex li.is-soon .serieindex__name{ padding-right:56px; }
.serieindex__name{ font-family:var(--display); font-size:1.34rem; font-weight:600; line-height:1.24; }
/* Tytuł serii jest CZARNY – i na stronie głównej, i na /serie/ (właściciel,
   06.09.2026). Kolor niesie logo stojące tuż pod tytułem, więc kolorowe wtręty
   w samym tytule – bordowe roczniki .years i wordmark Simulacrum – biłyby się
   z nim o uwagę. Poza tytułem akcenty zostają: plakietka „Zapowiedź”, glosa
   i wordmark w treści opisu są nietknięte.
   „Czarny” = --ink, czyli kolor tekstu strony: w ciemnym motywie jaśnieje,
   więc tytuł zostaje czytelny w obu motywach. */
.serieindex__name,
.serieindex__name .years,
.serieindex__name .wm-hi,
.serieindex__name .wm-lo,
.series__title,
.series__title .years,
.series__title .wm-hi,
.series__title .wm-lo{ color:var(--ink); }
.serieindex__name .wm-lo,
.series__title .wm-lo{ opacity:1; font-weight:600; }
.serieindex__name .years,
.series__title .years{ font-style:normal; }
.serieindex__desc{ margin:12px 0 0; color:var(--ink-soft); }

/* ──────────── KAFEL SERII JAKO LINK (21.09.2026) ────────────
   Cały kafel prowadzi dalej: seria z własną podstroną do niej, pozostałe do
   swojej kotwicy na /serie/. Zachowanie jest jednolite, martwych kafli nie ma.
   Link siedzi na TYTULE, a nie opakowuje całego kafla — dzięki temu czytnik
   ekranu czyta nazwę serii, a nie „więcej o serii”. Klikalność całej karty
   daje przezroczysta warstwa ::after rozciągnięta na kafel („stretched link”);
   działa, bo .serieindex li ma position:relative (wyżej). */
.serieindex__link{ color:inherit; text-decoration:none; }
.serieindex__link::after{ content:""; position:absolute; inset:0; }
.serieindex li{ transition:border-color .18s ease; }
.serieindex li:hover{ border-color:var(--accent); }
.serieindex li:hover .serieindex__link{ text-decoration:underline; text-underline-offset:3px; }
/* Obrys klawiatury ma pokazać CAŁY kafel, nie sam tytuł, więc rysujemy go na
   rozciągniętej warstwie. Offset ujemny, bo kafel ma overflow:hidden i obrys
   narysowany na zewnątrz zostałby przycięty. */
.serieindex__link:focus-visible{ outline:none; }
.serieindex__link:focus-visible::after{ outline:2px solid var(--accent); outline-offset:-2px; }
/* Zachęta pod opisem — NIE jest osobnym linkiem (kafel jest nim w całości),
   tylko sygnałem, że jest dokąd kliknąć. W HTML ma aria-hidden: czytnik dostał
   już nazwę serii z linku na tytule i nie potrzebuje powtórki. */
.serieindex__go{
  display:block; margin-top:14px;
  font-family:var(--body); font-size:.76rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
}
.serieindex__go::after{
  content:"\2192"; display:inline-block; margin-left:.4em;
  transition:transform .18s ease;
}
.serieindex li:hover .serieindex__go::after{ transform:translateX(3px); }
@media (prefers-reduced-motion: reduce){
  .serieindex li,
  .serieindex__go::after{ transition:none; }
}

/* ──────────────── LOGO SERII ────────────────
   Pole reprodukcji logotypu: tytuł → LOGO → jedno zdanie.

   CIEMNY MOTYW – ta sama sztuczka, co przy logo w nagłówku strony: logotyp nie
   dostaje jasnego podkładu, tylko sam się odwraca. Ale `invert(1)`, które
   wystarcza tam (znak jest czarno-biały), tutaj by nie starczyło: odwraca
   również BARWĘ, więc bordo Simulacrum i Dołęgi wychodziłoby cyjanem, a sepia
   „Obrazów Miejscowości” – granatem. Dlatego invert chodzi w parze
   z `hue-rotate(180deg)`, które cofa samo przesunięcie odcienia i zostawia
   odwróconą jasność: czerń bieleje, sepia zostaje złota, bordo przechodzi
   w jasny róż – prawie dokładnie --accent trybu ciemnego (#E9909C).
   Logotypy mają przezroczyste tło, więc żaden mix-blend-mode nie jest potrzebny.

   Kadr każdego pliku jest przycięty do samego rysunku (bez pustych marginesów
   z Inkscape'a), ale proporcje serii są bardzo różne – od 1,5:1 (Obrazy
   Miejscowości) po 3,4:1 (Simulacrum). Ani stała wysokość, ani stała szerokość
   nie da więc równej masy optycznej: przy stałej wysokości szerokie logotypy
   rozpychają się na dwa razy większe pole, przy stałej szerokości znikają
   wysokie. Klatka ogranicza dlatego OBA WYMIARY naraz – dla każdego logo wiąże
   ten wymiar, który jest dla niego skrajny, a dobrane proporcje klatki
   (264 × 112 ≈ 2,4:1, czyli środek zakresu serii) wyrównują POLE:
   ok. 19–21 tys. px² na każde logo. Sama klatka jest przezroczysta – służy
   wyłącznie skali i temu, żeby opis startował w rzędzie na równej wysokości. */
.serieindex__logo{
  margin:14px 0 0;
  min-height:140px; padding:14px 18px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
}
.serieindex__logo img{
  display:block; width:auto; height:auto;
  max-width:min(100%, 264px); max-height:112px;
}
/* Tytuł rezerwuje dwie linie: „Obrazy Miejscowości…” łamie się na dwie, reszta
   ma jedną. Bez tego płytki w rzędzie startowałyby na różnej wysokości. */
.serieindex__name{ min-height:2.48em; }

/* Klatka na podstronie /serie/ – więcej miejsca w kolumnie, więc i logo większe.
   Wyrównane do LEWEJ, do tej samej krawędzi co tytuł i tekst serii. */
.series__logo{
  margin:20px 0 4px;
  min-height:186px; padding:18px 0; box-sizing:border-box;
  display:flex; align-items:center; justify-content:flex-start;
}
.series__logo img{
  display:block; width:auto; height:auto;
  max-width:min(100%, 340px); max-height:150px;
}
/* Odwrócenie z zachowaniem barwy – patrz nota wyżej. NIE zamieniać na samo
   invert(1): bordo i sepia wyszłyby wtedy cyjanem i granatem. */
html[data-theme="dark"] .serieindex__logo img,
html[data-theme="dark"] .series__logo img{
  filter:invert(1) hue-rotate(180deg);
}
/* WYJĄTEK · .logo--art – „Obrazy Miejscowości” to jedyna ILUSTRACJA wśród
   logotypów, i odwrócenie działa na nią inaczej niż na krój pisma: scena
   wychodzi negatywem (gazeta ciemnieje, twarze bieleją). Sepia jest sama
   w sobie jasna, więc na ciemnym tle broni się bez żadnego filtra – czarne
   kontury wtapiają się w tło i zostaje rycina. Decyzja właściciela 06.09.2026.
   Kolejna seria z ilustracją zamiast logotypu = dopisz jej `class="logo--art"`. */
html[data-theme="dark"] .serieindex__logo img.logo--art,
html[data-theme="dark"] .series__logo img.logo--art{
  filter:none;
}

/* Lista serii na podstronie /serie/ — jedna pod drugą, w szerokości kolumny tekstu.
   Siatka .series-grid zostaje na stronie głównej, gdzie są krótkie wizytówki. */
.serieslist{ display:flex; flex-direction:column; gap:54px; }
.serieslist .series{ max-width:74ch; }

.series__title{ font-size:clamp(1.4rem,3.2vw,1.9rem); line-height:1.16; }
/* Wordmark „Simulacrum” – ukryte SACRUM (S + acrum akcentem, „imul” wygaszone) */
.wm-hi{ color:var(--accent); font-weight:600; }
.wm-lo{ color:var(--ink-soft); opacity:.5; font-weight:400; }
/* W ciemnym motywie opacity wciąga litery w tło – zamiast tego jawny, podrzędny szary */
html[data-theme="dark"] .wm-lo{ opacity:1; color:#6F7885; }
/* …ale NIE w tytule serii – tam tytuł jest jednolity (patrz .serieindex__name
   / .series__title). Reguła wyżej ma wyższą specyficzność niż same
   `.serieindex__name .wm-lo` i `.series__title .wm-lo`, więc trzeba ją odwołać
   jawnie dla obu. */
html[data-theme="dark"] .serieindex__name .wm-lo,
html[data-theme="dark"] .series__title .wm-lo{ color:var(--ink); }
.badge-soon{
  display:inline-block; vertical-align:middle; margin-left:14px;
  font-family:var(--body); font-size:.6rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
  color:#fff; background:var(--sage-deep); padding:5px 12px; border-radius:999px;
}

/* --- O firmie: tekst + panel „W skrócie” --- */
.about{ display:grid; grid-template-columns:1.2fr .8fr; gap:52px; align-items:start; }
.about p{ margin:0 0 16px; }
.about__aside{
  background:var(--paper-2); border:1px solid var(--rule);
  padding:26px 28px; border-radius:2px;
}
.about__aside h3{ font-size:1.2rem; margin-bottom:12px; }
.factline{
  display:flex; justify-content:space-between; gap:16px;
  padding:9px 0; border-bottom:1px solid var(--rule); font-size:.92rem;
}
.factline:last-child{ border-bottom:0; }
.factline span:first-child{ color:var(--ink-soft); }
.factline span:last-child{ font-weight:600; text-align:right; }

/* =========================== PRZYCISKI ======================= */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--tone-solid, var(--bordo)); color:#fff;
  border:1px solid var(--tone-solid, var(--bordo));
  padding:11px 22px; border-radius:999px;
  font-family:var(--body); font-size:.86rem; font-weight:600; letter-spacing:.03em;
  text-decoration:none; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover{
  background:var(--tone-deep, var(--bordo-deep));
  border-color:var(--tone-deep, var(--bordo-deep));
  color:#fff; text-decoration:none;
}
.btn::after{ content:"\2192"; font-size:1.05em; line-height:1; }
.btn--ghost{
  background:transparent; color:var(--tone, var(--accent));
  border-color:var(--tone, var(--accent));
}
.btn--ghost:hover{ background:var(--tone-solid, var(--bordo)); color:#fff; }

/* --- Książki (karty na stronie głównej) --- */
.books{ display:grid; grid-template-columns:1fr 1fr; gap:44px; }
.book{ display:block; }
.book__cover{
  position:relative; float:left; width:150px; margin:6px 24px 12px 0;
  box-shadow:0 2px 4px rgba(36,30,24,.12), 0 18px 40px -18px rgba(36,30,24,.5);
  border-radius:2px; overflow:hidden; cursor:zoom-in;
}
.book__cover img{ width:100%; display:block; }
.book__cover:focus-visible{ outline:2px solid var(--tone, var(--accent)); outline-offset:3px; }
/* Okładka jako ODNOŚNIK do podstrony książki (tak jest na stronie głównej) */
a.book__cover{
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
a.book__cover:hover{
  transform:translateY(-4px);
  box-shadow:0 2px 4px rgba(36,30,24,.14), 0 26px 46px -18px rgba(36,30,24,.6);
}
.badge{
  display:inline-block; vertical-align:middle;
  font-size:.6rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; padding:4px 10px; border-radius:999px;
  background:var(--tone-solid, var(--bordo));
}
.badge--sale{ background:var(--bordo); }
.badge--print{ background:var(--sage-deep); }
.badge--sale-ii{ background:var(--sage-deep); }
.book__vol{ display:flex; align-items:center; gap:11px; font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; }
.book__vol .badge{ letter-spacing:.1em; }
.book__title{ font-size:1.85rem; margin:6px 0 4px; color:var(--tone, var(--ink)); }
.book__title a{ color:inherit; text-decoration:none; }
.book__title a:hover{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
.book__meta{ font-size:.92rem; color:var(--ink-soft); font-style:italic; font-family:var(--display); margin-bottom:14px; }
/* NAD KRESKĄ – tekst opisu: jednolity, w kolorze głównym, leciutko mniejszy */
.book__desc, .book__quote, .book__ask{
  font-size:.93rem; line-height:1.62; color:var(--ink); margin:0 0 13px; font-style:normal;
}
/* POD KRESKĄ – wszystko drobnym drukiem, jednolicie */
.book__stats, .book__sum, .book__specs{
  font-size:.76rem; color:var(--ink-soft); line-height:1.6; letter-spacing:.01em; font-weight:400;
}
.book__stats{ clear:both; margin:0 0 10px; padding-top:14px; border-top:1px solid var(--rule); }
.book__sum{ margin:0 0 10px; }
.book__specs{ margin:0 0 22px; padding-top:12px; border-top:1px solid var(--rule); }
/* Przycisk „Czytaj więcej” pod kartą na stronie głównej.
   Karty w siatce .books mają jednakową wysokość, więc przypięcie przycisku
   do dołu wyrównuje go w obu kolumnach niezależnie od długości opisu. */
.book__more{ clear:both; margin-top:18px; }
.books > .book{ position:relative; padding-bottom:74px; }
.books > .book > .book__more{ position:absolute; left:0; bottom:0; margin-top:0; }

/* „Dostępne w” – linki do księgarni */
.avail{ clear:both; margin-top:24px; }
.avail__label{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; margin-bottom:12px; }
.stores{ display:flex; flex-wrap:wrap; gap:10px; }
.store{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--tone, var(--accent)); color:var(--tone, var(--accent));
  padding:8px 15px; border-radius:999px;
  font-size:.86rem; font-weight:500; text-decoration:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.store:hover{
  background:var(--tone-solid, var(--bordo));
  border-color:var(--tone-solid, var(--bordo));
  color:#fff; text-decoration:none;
}
.store::after{ content:"\25B8"; font-size:1em; line-height:1; }
.soon{
  display:inline-block; border:1px dashed var(--accent-2); color:var(--accent-2);
  padding:8px 15px; border-radius:999px; font-size:.86rem; font-weight:500;
}

/* Lightbox – powiększenie okładki albo przykładowej strony po kliknięciu */
.lightbox{
  position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
  padding:5vw; background:rgba(18,20,24,.86); backdrop-filter:blur(3px); cursor:zoom-out;
}
.lightbox[hidden]{ display:none; }
.lightbox img{
  max-width:min(90vw,860px); max-height:88vh; width:auto; height:auto; border-radius:3px;
  box-shadow:0 24px 70px -12px rgba(0,0,0,.7);
}
.lightbox__close{
  position:absolute; top:16px; right:22px; width:44px; height:44px; border:0; border-radius:999px;
  background:rgba(255,255,255,.14); color:#fff; font-size:1.7rem; line-height:1; cursor:pointer;
}
.lightbox__close:hover{ background:rgba(255,255,255,.26); }
@media (prefers-reduced-motion:no-preference){
  .lightbox img{ animation:lb-in .18s ease; }
  @keyframes lb-in{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:none; } }
}

/* --- Autor --- */
.author{ display:grid; grid-template-columns:.9fr 1.1fr; gap:52px; align-items:center; }
.author__card{
  background:var(--sage-deep); color:var(--paper);
  padding:40px; border-radius:2px;
}
.author__card .eyebrow{ color:#D8E0C6; }
.author__card .eyebrow::before{ background:#D8E0C6; }
.author__name{ font-size:2rem; margin:14px 0 0; color:#fff; }
.author__role{ font-family:var(--display); font-style:italic; color:#D8E0C6; margin:4px 0 0; }
.author p{ margin:0 0 16px; }

/* --- Autorzy: kolorowe kafle (3 w wierszu); info pod kafelkiem zwykłym tekstem --- */
/* Kolory kafelków = kolory okładek serii (bordo, zieleń, fiolet, kawa). */
.authors{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; }
.acard{
  background:var(--tile-sage); color:#fff;
  border-radius:6px; padding:20px 22px;
}
.acard--bordo{  background:var(--tile-bordo); }   /* bordo – Tom I */
.acard--sage{   background:var(--tile-sage); }    /* zieleń – Tom II */
.acard--violet{ background:var(--tile-violet); }  /* spokojny fiolet */
.acard--coffee{ background:var(--tile-coffee); }  /* ciemna kawa z mlekiem */
.acard__name{ font-family:var(--display); font-size:1.28rem; font-weight:600; color:#fff; }
/* Krój i grubość MUSZĄ być podane wprost: w kartach z bio .acard__vol siedzi
   wewnątrz <h3 class="acard__name"> i bez tego dziedziczy Spectral 600, a w kartach
   bez bio jest osobnym <p> i wychodzi Interem. Wyglądało to jak dwa różne style. */
.acard__vol{
  margin:8px 0 0; font-family:var(--body); font-size:.8rem; font-weight:500;
  letter-spacing:.03em; color:rgba(255,255,255,.82);
  display:inline-flex; align-items:center; gap:8px;
}
.acard__vol::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:currentColor; flex:0 0 auto;
}
/* Autor z bio = <details class="acol"> + <summary class="acard">.
   Notka rozwija się pod kartą po kliknięciu. Bez JavaScriptu — <details> to
   natywny mechanizm przeglądarki, tak samo jak spis treści na podstronach tomów.
   Autorzy bez bio zostają zwykłym <article class="acard"> i nie są klikalne. */
.acol > summary{ cursor:pointer; list-style:none; }
.acol > summary::-webkit-details-marker{ display:none; }
.acol > summary::marker{ content:""; }
.acol > summary .acard__name{ display:block; position:relative; padding-right:1.3em; }
/* strzałka rozwinięcia — ten sam znak, co w spisie treści na podstronach tomów */
.acol > summary .acard__name::after{
  content:"\25B8"; position:absolute; right:0; top:.16em;
  font-size:.8em; color:rgba(255,255,255,.75);
  transition:transform .16s ease;
}
.acol[open] > summary .acard__name::after{ transform:rotate(90deg); }
.acol > summary:hover .acard__name::after{ color:#fff; }
.acol > summary .acard__vol{ display:flex; margin:8px 0 0; font-size:.8rem; }
/* Zachęta do kliknięcia — znika po rozwinięciu, bo przestaje być potrzebna. */
.acard__more{
  display:block; margin:12px 0 0;
  font-family:var(--body); font-size:.68rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.72);
}
.acol > summary:hover .acard__more{ color:#fff; }
.acol[open] > summary .acard__more{ display:none; }

/* Autorzy z bio: kafelek (rozmiar jak pozostałe) + info pod spodem zwykłym tekstem */
/* overflow:hidden — podczas animacji rozwijania treść ma być przycinana */
.acol__note{ margin:14px 2px 0; font-size:.9rem; line-height:1.6; color:var(--ink); overflow:hidden; }
.acol__note p{ margin:0 0 12px; }
.acol__note p:last-child{ margin:0; }

/* --- Książki: kolejne tomy w przygotowaniu --- */
.upcoming{ margin-top:40px; padding-top:26px; border-top:1px solid var(--rule); }
.upcoming__list{
  list-style:none; margin:16px 0 0; padding:0;
  display:flex; flex-direction:column; gap:9px;
}
.upcoming__list li{
  font-family:var(--display); font-weight:600; font-size:1.2rem;
  color:var(--accent-2);
}
.upcoming__list .by{
  font-family:var(--body); font-weight:400; font-size:.82rem; color:var(--ink-soft);
  margin-left:8px;
}

/* --- Uwaga o dostępności --- */
.note{
  border-left:3px solid var(--tone, var(--accent)); background:var(--paper-3);
  padding:18px 22px; margin-top:30px; font-size:.98rem; color:var(--ink-soft);
  border-radius:0 2px 2px 0;
}
/* Dwie odmiany notki na podstronie gier: ostrzeżenie Windows (bordo) i suma
   kontrolna (zieleń). Kolory z palety tomów, nie surowa czerwień i zieleń –
   mają odróżniać akapity, a nie krzyczeć. Stopień pisma mniejszy, bo obie
   notki są dłuższe niż zwykły przypis i przy .98rem zajmowały pół ekranu. */
.note--warn,
.note--ok{ font-size:.88rem; line-height:1.62; margin-top:20px; padding:15px 20px; }
.note--warn{ border-left-color:var(--bordo); }
.note--ok{ border-left-color:var(--sage); }
.note--ok code,
.note--warn code{ font-size:.94em; }

/* =========================== STOPKA ========================= */
.footer{
  background:var(--ink); color:#AEB6BE;
  padding:60px 0 34px; border-top:4px solid var(--bordo);
}
.footer a{ color:#DCE3E9; }
.footer__top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:36px; }
.footer h3{ color:#fff; font-size:1.4rem; }
.footer h3 span{ color:var(--sage); }
.footer__contact{ font-size:.96rem; line-height:1.9; }
.footer .social a{ color:#AEB6BE; }
.footer .social a:hover{ color:#fff; }
.footer__social{ display:flex; gap:18px; margin-top:14px; }
.footer .social svg{ width:24px; height:24px; }
.footer__bottom{
  margin-top:44px; padding-top:22px; border-top:1px solid #2E343B;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  font-size:.8rem; letter-spacing:.03em; color:#7C858E;
}

/* =========================== ANIMACJE ======================= */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* =========================== CIEMNY MOTYW =================== */
/* Włączany przez atrybut data-theme="dark" na <html>. Odwracamy
   zmienne palety; solidne akcenty (bordo/zieleń) zostają. */
html[data-theme="dark"]{
  --paper:    #13161B;
  --paper-2:  #1B2027;
  --paper-3:  #232A33;
  --ink:      #E7EBEF;
  --ink-soft: #9BA6B1;
  --rule:     #2E3640;
  --accent:   #E9909C;   /* jaśniejsze bordo – czytelne na ciemnym */
  --accent-2: #AEC091;   /* jaśniejsza zieleń */
  /* kafle autorów – głębokie tony w trybie ciemnym */
  --tile-bordo:  #611523;
  --tile-sage:   #3E4A2E;
  --tile-violet: #4C3B63;
  --tile-coffee: #6A5744;
}
html[data-theme="dark"] body{
  background-image:
    radial-gradient(circle at 15% 10%, rgba(233,144,156,.05), transparent 42%),
    radial-gradient(circle at 88% 82%, rgba(174,192,145,.05), transparent 46%);
}
/* pasek górny i stopka: w ciemnym pogłębiamy tło */
html[data-theme="dark"] .topbar{ background:rgba(19,22,27,.9); }
html[data-theme="dark"] .footer{ background:#0E1116; }
/* logo jest czarne na białym – w ciemnym odwracamy i wtapiamy */
html[data-theme="dark"] .hero__logo{ mix-blend-mode:screen; filter:invert(1) brightness(1.08); }

/* płynne przejście motywu */
body, .topbar, .footer{ transition:background-color .25s ease, color .25s ease; }

/* przycisk zmiany motywu */
.theme-toggle{
  appearance:none; border:1px solid var(--rule); background:transparent;
  color:var(--ink-soft); width:34px; height:34px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0; line-height:0;
}
.theme-toggle:hover{ color:var(--accent); border-color:var(--accent); }
.theme-toggle svg{ width:17px; height:17px; }
.theme-toggle .icon-moon{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-moon{ display:inline; }

/* =========================== BANER ZGODY =================== */
.consent{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:100;
  max-width:660px; margin:0 auto;
  background:var(--paper-2); color:var(--ink);
  border:1px solid var(--rule); border-radius:10px;
  box-shadow:0 12px 40px -12px rgba(0,0,0,.45);
  padding:18px 20px;
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; font-size:.9rem;
}
.consent[hidden]{ display:none; }
.consent p{ margin:0; flex:1 1 300px; color:var(--ink-soft); line-height:1.55; }
.consent p strong{ color:var(--ink); }
.consent__actions{ display:flex; gap:10px; flex:0 0 auto; }
.consent button{
  appearance:none; cursor:pointer; font:inherit; font-weight:600;
  padding:8px 16px; border-radius:999px; border:1px solid var(--rule);
}
.consent .accept{ background:var(--bordo); border-color:var(--bordo); color:#fff; }
.consent .accept:hover{ background:var(--bordo-deep); border-color:var(--bordo-deep); }
.consent .decline{ background:transparent; color:var(--ink-soft); }
.consent .decline:hover{ color:var(--ink); border-color:var(--ink-soft); }

/* =====================================================================
   PODSTRONA KSIĄŻKI  (ksiazki/<slug>/index.html)
   ---------------------------------------------------------------------
   Ton kolorystyczny bierze się z klasy .tone--i / .tone--ii na <body>.
   ===================================================================== */

/* Zwykłe odnośniki w treści podstrony biorą kolor tomu (na stronie głównej
   zostaje bordo). Pasek górny i stopka są poza <main>, więc ich to nie dotyczy. */
main a{ color:var(--tone, var(--accent)); }

/* --- Okruszki (ścieżka powrotu) --- */
.crumbs{
  padding:22px 0 0; font-size:.78rem; color:var(--ink-soft); letter-spacing:.02em;
}
.crumbs a{ color:var(--ink-soft); }
.crumbs a:hover{ color:var(--tone, var(--accent)); }
.crumbs .sep{ opacity:.45; margin:0 .55em; }
.crumbs strong{ color:var(--ink); font-weight:600; }

/* --- Pasek skoków w obrębie podstrony --- */
.jumpbar{
  display:flex; flex-wrap:wrap; gap:9px 10px;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--rule);
}
.jumpbar a{
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); border:1px solid var(--rule); border-radius:999px;
  padding:7px 15px; white-space:nowrap;
}
.jumpbar a:hover{ color:var(--tone, var(--accent)); border-color:var(--tone, var(--accent)); text-decoration:none; }

/* --- Nagłówek książki: okładka (przyklejona) + tytuł i opis --- */
.bookhero{
  display:grid; grid-template-columns:300px 1fr; gap:56px;
  align-items:start; padding:38px 0 72px;
}
.bookhero__aside{ position:sticky; top:84px; }
.bookhero__cover{
  display:block; border-radius:2px; overflow:hidden; cursor:zoom-in;
  box-shadow:0 2px 4px rgba(36,30,24,.12), 0 28px 58px -22px rgba(36,30,24,.6);
}
.bookhero__cover:focus-visible{ outline:2px solid var(--tone, var(--accent)); outline-offset:4px; }
.bookhero__zoom{
  margin:13px 0 0; text-align:center;
  font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft);
}
.bookhero__vol{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:.74rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600;
}
.bookhero__series{
  margin:20px 0 0; font-family:var(--display); font-size:1.02rem; font-style:italic;
  color:var(--ink-soft);
}
.bookhero__series a{ color:inherit; text-decoration:underline; text-decoration-color:var(--rule); }
.bookhero__series a:hover{ color:var(--tone, var(--accent)); }
.bookhero__title{
  font-size:clamp(2.5rem,7vw,3.9rem); letter-spacing:-.015em;
  color:var(--tone, var(--ink)); margin:10px 0 0;
}
.bookhero__meta{
  margin:8px 0 0; font-family:var(--display); font-style:italic;
  font-size:1.05rem; color:var(--ink-soft);
}
/* Pełny opis tomu: pierwszy akapit większy, kolejne normalnym stopniem. */
.bookhero__lead{ margin:26px 0 0; font-size:1.14rem; line-height:1.66; }
.bookhero__text{ margin:18px 0 0; }
.bookhero__text em{ color:var(--ink-soft); }

/* Przyciski księgarni — pod pełnym opisem, odcięte włoskową linią. */
.bookhero__buy{ margin-top:34px; padding-top:26px; border-top:1px solid var(--rule); }

/* --- Metryka wydawnicza (lista definicji) --- */
.specs{ margin:28px 0 0; padding:0; border-top:1px solid var(--rule); }
.specs > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:9px 0; border-bottom:1px solid var(--rule); font-size:.84rem;
}
.specs dt{ color:var(--ink-soft); flex:0 0 auto; }
.specs dd{ margin:0; text-align:right; font-weight:600; }

/* --- Nota pod przyciskami księgarni --- */
.buy__note{ margin:16px 0 0; font-size:.8rem; color:var(--ink-soft); line-height:1.6; }

/* --- Liczby (kwerenda) – wyróżniony blok --- */
.figures{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:2px;
  margin:0; background:var(--rule); border:1px solid var(--rule); border-radius:3px;
  overflow:hidden;
}
.figure{ background:var(--paper-2); padding:22px 24px; }
.figure__n{
  font-family:var(--display); font-size:1.9rem; font-weight:600; line-height:1;
  color:var(--tone, var(--accent));
}
.figure__t{ margin:9px 0 0; font-size:.82rem; color:var(--ink-soft); line-height:1.5; }
.figures__sum{ margin:22px 0 0; max-width:74ch; font-size:.92rem; color:var(--ink-soft); }

/* ──────────── WARSZTAT: ETAPY POWSTAWANIA I ZRZUTY EKRANU ────────────
   Używane na podstronie serii (/serie/simulacrum/). Obrazki idą JEDEN POD
   DRUGIM na pełną szerokość kolumny — a nie w dwóch kolumnach obok siebie.
   Powód jest praktyczny: zrzut ekranu aplikacji przy połowie szerokości
   robi się nieczytelny (giną węzły ścieżki, panele, drobny interfejs),
   czyli ginie dokładnie to, co czyni z niego warsztat, a nie ilustrację.
   Kto chce obejrzeć detal, klika — obrazki mają data-zoom i otwierają się
   w lightboksie, tak samo jak okładki tomów. */
.makingof{ display:flex; flex-direction:column; gap:44px; max-width:86ch; }
.makingof__step{ margin:0; }
.makingof__label{
  font-family:var(--body); font-size:.62rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--tone, var(--accent)); margin:0 0 10px;
}
/* Akapit narracji WEWNĄTRZ .makingof — tekst idzie na przemian z obrazkami
   (opis → zdjęcie → opis → zrzut → opis), więc jest zwykłym elementem flexa
   i odstęp daje mu `gap`, a nie własny margines. */
.makingof__note{ margin:0; max-width:74ch; }

/* wspólny wygląd obrazka warsztatowego: zdjęcie i zrzut mają tę samą ramkę */
.makingof__step img, .shot img{
  width:100%; height:auto; display:block;
  border:1px solid var(--rule); border-radius:3px;
  background:var(--paper-2);
}
.makingof__step a, .shot a{ display:block; }
.makingof__step a:hover img, .shot a:hover img{ border-color:var(--tone, var(--accent)); }
.makingof__step figcaption, .shot figcaption{
  margin:12px 0 0; max-width:74ch;
  font-size:.86rem; color:var(--ink-soft); line-height:1.6;
}
.shot{ margin:0 0 26px; max-width:86ch; }

/* ──────────── GALERIA GRY (sekcja na /gry/) ────────────
   Duży zrzut po lewej, przewijany pasek miniatur po prawej. Klik w miniaturę
   podmienia duży obrazek (site.js), klik w duży otwiera lightbox. Bez JS
   miniatura jest zwykłym linkiem do pełnego zrzutu.

   Pasek stoi w osobnej kolumnie ustawionej na position:relative, a sam jest
   absolutny i wypełnia ją w całości. To jedyny pewny sposób, żeby jego wysokość
   zrównała się z wysokością dużego zrzutu – bez tego siatka rozciąga się do
   wysokości paska i miniatury przestają się przewijać. */
/* BEZ max-width: galeria idzie na pełną szerokość kolumny tekstu. Ograniczenie
   do 96ch zabierało dużemu zrzutowi jedną czwartą szerokości – pasek miniatur
   odejmuje swoje i tak. */
.gallery{
  display:grid; grid-template-columns:minmax(0,1fr) 184px; gap:14px; margin:0;
}
/* Belka ukośna „Darmowa" w rogu dużego zrzutu – ten sam komponent .ribbon, co
   na kaflach serii. Kadr musi przycinać jej końce, stąd overflow:hidden, a sama
   belka nie może przechwytywać kliknięć, bo pod nią jest link do lightboksa.
   GRY NA STEAM: dopisz odmianę .ribbon z innym tłem i tekstem „Steam". */
.gallery__main{ margin:0; position:relative; overflow:hidden; border-radius:3px; }
.gallery__main .ribbon{ pointer-events:none; z-index:2; }
.gallery__main img{
  width:100%; height:auto; display:block;
  border:1px solid var(--rule); border-radius:3px; background:var(--paper-2);
}
.gallery__main a{ display:block; }
.gallery__main a:hover img{ border-color:var(--tone, var(--accent)); }
.gallery__col{ position:relative; }
.gallery__strip{
  position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain;
  list-style:none; margin:0; padding:0 4px 0 0;
  display:flex; flex-direction:column; gap:10px;
}
.gallery__strip li{ margin:0; flex:0 0 auto; }
.gallery__strip a{ display:block; }
.gallery__strip img{
  width:100%; height:auto; display:block;
  border:1px solid var(--rule); border-radius:3px; background:var(--paper-2);
  opacity:.74; transition:opacity .16s ease, border-color .16s ease;
}
.gallery__strip a:hover img{ opacity:1; border-color:var(--tone, var(--accent)); }
.gallery__strip a.is-current img{ opacity:1; border-color:var(--tone, var(--accent)); }
.gallery__strip a:focus-visible img{ outline:2px solid var(--accent); outline-offset:2px; }

/* Nota prawna pod opisem gry: drobny druk bez ramki i bez koloru – ma być
   dostępna, a nie zwracać uwagę. Pełne noty są w samych programach. */
.fineprint{
  margin:18px 0 0; max-width:74ch;
  font-size:.78rem; line-height:1.6; color:var(--ink-soft);
}

/* Tytuł gry: większy oddech do zdjęcia niż zwykły nagłówek sekcji. */
.game__head{ margin:0 0 30px; }

@media (max-width:760px){
  /* Na telefonie pasek idzie POD zrzutem i przewija się w poziomie –
     pionowa kolumna miniatur zabrałaby połowę ekranu. */
  .gallery{ grid-template-columns:1fr; }
  .gallery__col{ position:static; }
  .gallery__strip{
    position:static; flex-direction:row; overflow-x:auto; overflow-y:hidden;
    padding:0 0 4px;
  }
  .gallery__strip li{ width:40%; max-width:180px; }
}

/* Kolumna tekstu ciągłego w sekcji, która nie ma własnego kontenera (jak .series
   na /serie/ czy .bookhero w nagłówku). Szerokość 74ch – ta sama miara, co reszta
   tekstu na stronie, żeby wiersz nie robił się za długi do czytania. */
.prose{ max-width:74ch; }
/* blok liczb nie ma własnego marginesu dolnego – odstęp daje tekst pod nim */
.figures + .prose{ margin-top:26px; }
/* Akapit pod zrzutem: .shot daje 26px, dokładamy resztę do oddechu takiego,
   jak między obrazkami warsztatowymi (.makingof gap:44px). Bez tego tekst
   przykleja się do obrazka. */
.shot + .prose{ margin-top:18px; }
/* …i odwrotnie: tekst nad blokiem liczb też potrzebuje odstępu */
.prose + .figures{ margin-top:32px; }
.prose p{ margin:0 0 16px; }
.prose p:last-child{ margin-bottom:0; }

/* Lista części tomu w sekcji „Antologia w trzech tomach” na /serie/simulacrum/.
   Ten sam rytm wiersza, co w metryce .specs, ale tytuł stoi tuż przy numerze i latach
   (do lewej), a nie do prawej — to wykaz treści, nie tabelka parametrów. Tytuły części
   zostają po polsku w obu wersjach językowych: to treść książki, nie interfejs. */
.parts{ list-style:none; margin:14px 0 0; padding:0; border-top:1px solid var(--rule); }
.parts li{
  display:flex; gap:16px; align-items:baseline;
  padding:9px 0; border-bottom:1px solid var(--rule); font-size:.9rem;
}
.parts__no{ flex:0 0 auto; color:var(--ink-soft); white-space:nowrap; }

/* --- Spis treści --- */
/* Bez linii poziomych i bez pionowych kresek przy zagnieżdżeniu — strukturę
   niosą wcięcia, stopień pisma i wielokropki prowadzące do numeru strony. */
.toc, .toc__sub{ list-style:none; margin:0; padding:0; }
.toc{ max-width:78ch; }
.toc__row{ display:flex; align-items:baseline; gap:10px; padding:9px 0; }
.toc__title{ flex:0 1 auto; }
.toc__dots{ flex:1 1 auto; min-width:20px; border-bottom:1px dotted var(--rule); }
.toc__page{
  flex:0 0 auto; color:var(--ink-soft); font-size:.8rem;
  font-variant-numeric:tabular-nums;
}
/* Wiersze najwyższego poziomu (rozdziały) – szeryfowo, niezależnie od tego,
   czy są zwykłym wierszem, czy nagłówkiem rozwijanego <details>. */
.toc > li > .toc__row,
.toc > li > .toc__group > summary{ font-family:var(--display); font-size:1.08rem; font-weight:600; }
.toc__sub{ margin:2px 0 18px; padding-left:22px; }
.toc__sub .toc__row{ padding:5px 0; font-size:.92rem; }
.toc__sub .toc__title{ color:var(--ink); }
/* trzeci poziom – drobniej i podrzędnie */
.toc__sub .toc__sub .toc__row{ padding:4px 0; font-size:.86rem; }
.toc__sub .toc__sub .toc__title{ color:var(--ink-soft); }

/* Rozdział z podrozdziałami = <details class="toc__group"> + <summary class="toc__row">.
   Rozdziały są domyślnie ZWINIĘTE: spis 250+ pozycji rozwalałby stronę.
   Bez JavaScriptu też działa – <details> to natywny mechanizm przeglądarki. */
.toc__group > summary{ cursor:pointer; list-style:none; }
.toc__group > summary::-webkit-details-marker{ display:none; }
.toc__group > summary::marker{ content:""; }
/* strzałka rozwinięcia; wiersze bez podrozdziałów mają ją niewidoczną, żeby
   tytuły trzymały jedną linię wcięcia */
.toc__group > summary::before,
.toc > li > .toc__row::before{
  content:"\25B8"; flex:0 0 auto; width:.85em;
  color:var(--tone, var(--accent)); font-size:.8em;
  transition:transform .16s ease;
}
.toc > li > .toc__row::before{ visibility:hidden; }
.toc__group[open] > summary::before{ transform:rotate(90deg); }
.toc__group > summary:hover .toc__title{ color:var(--tone, var(--accent)); }

/* Nota i przycisk „Rozwiń wszystkie” nad spisem */
.toc__intro{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px 24px; margin-bottom:26px;
}
.toc__note{ margin:0; max-width:62ch; font-size:.88rem; color:var(--ink-soft); }
.toc__all{
  appearance:none; cursor:pointer; font:inherit;
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap; color:var(--ink-soft); background:transparent;
  border:1px solid var(--rule); border-radius:999px; padding:8px 16px;
}
.toc__all:hover{ color:var(--tone, var(--accent)); border-color:var(--tone, var(--accent)); }
.toc__all[data-state="closed"] .lbl-collapse{ display:none; }
.toc__all[data-state="open"] .lbl-expand{ display:none; }

/* --- Karta z fragmentem książki (plik PDF) --- */
/* Prawa krawędź karty to płaski grot (15 px) — cała karta czyta się jak strzałka,
   więc osobny znak „→” jest zbędny. clip-path przycina także obramowanie i cień,
   dlatego zamiast ramki kartę wyróżnia wypełnienie --paper-3. */
.pdfcard{
  position:relative;
  display:flex; align-items:center; gap:22px;
  max-width:640px; padding:22px 41px 22px 26px;
  border-radius:3px; color:inherit; text-decoration:none;
  clip-path:polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
  /* tło elementu widoczne jest tylko na 1 px obwodu — to jest ta ramka */
  background:var(--rule);
  transition:background-color .15s ease, transform .15s ease;
}
/* właściwe tło karty, wsunięte o 1 px, w tym samym kształcie */
.pdfcard::before{
  content:""; position:absolute; inset:1px; border-radius:2px;
  background:var(--paper-3);
  clip-path:polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
}
.pdfcard > *{ position:relative; }   /* treść nad wypełnieniem */
.pdfcard:hover{
  background:var(--tone, var(--accent)); transform:translateX(3px); text-decoration:none;
}
.pdfcard__go{ display:none; }   /* grot zastąpił znak strzałki */
.pdfcard__icon{ flex:0 0 auto; display:inline-flex; color:var(--tone, var(--accent)); }
.pdfcard__icon svg{ width:38px; height:38px; }
.pdfcard__body{ flex:1 1 auto; min-width:0; }
.pdfcard__title{
  display:block; font-family:var(--display); font-size:1.22rem; font-weight:600; line-height:1.2;
}
.pdfcard__meta{
  display:block; margin-top:6px; font-size:.78rem; color:var(--ink-soft); letter-spacing:.02em;
}
.pdfcard__go{ flex:0 0 auto; color:var(--tone, var(--accent)); font-size:1.3rem; line-height:1; }

/* Placeholder na treść, której jeszcze nie ma (spis treści, próbki stron) */
.placeholder{
  border:1px dashed var(--rule); border-radius:3px;
  padding:30px 26px; color:var(--ink-soft); font-size:.95rem;
  background:var(--paper-2);
}
.placeholder strong{ color:var(--ink); font-weight:600; }

/* Karty .pdfcard w kontenerze .othervols (podstrona IT) — zawsze jedna pod drugą.
   Bez tego szerokość karty zależy od długości opisu: po skróceniu jednego z nich
   karty przeskakują z kolumny do rzędu. Szerokość i tak ogranicza .pdfcard{max-width}. */
.othervols .pdfcard{ flex:1 1 100%; }

/* --- Inne tomy w serii --- */
/* Flex, a nie grid: przy jednym tomie karta nie rozciąga się na całą szerokość. */
.othervols{ display:flex; flex-wrap:wrap; gap:22px; }
.volcard{
  flex:1 1 260px; max-width:380px;
  display:flex; gap:18px; align-items:flex-start;
  border:1px solid var(--rule); background:var(--paper-2);
  border-radius:3px; padding:18px; color:inherit; text-decoration:none;
  transition:border-color .15s ease, transform .15s ease;
}
.volcard:hover{ border-color:var(--tone, var(--accent)); transform:translateY(-2px); text-decoration:none; }
.volcard img{ width:76px; flex:0 0 auto; border-radius:1px; box-shadow:0 10px 20px -14px rgba(0,0,0,.6); }
.volcard__vol{ font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); }
.volcard__title{ font-family:var(--display); font-size:1.24rem; font-weight:600; margin:5px 0 0; }
.volcard__more{ margin:8px 0 0; font-size:.78rem; color:var(--tone, var(--accent)); font-weight:600; }

/* =========================== RWD ============================ */
@media (max-width:860px){
  .about,.author,.books{ grid-template-columns:1fr; gap:34px; }
  .authors{ grid-template-columns:repeat(2,1fr); }
  .series-grid{ grid-template-columns:1fr; gap:36px; }
  .serieindex{ grid-template-columns:1fr; }
  .author__card{ order:-1; }
  /* Na telefonie menu chowa się pod hamburgera i zjeżdża spod paska jako panel.
     .topbar jest sticky, czyli jest elementem pozycjonowanym — panel liczy swoje
     współrzędne względem niego. */
  .navtoggle{ display:inline-flex; }
  .nav__links{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--paper); border-bottom:1px solid var(--rule);
    box-shadow:0 18px 34px -24px rgba(36,30,24,.5);
    padding:4px 0;
  }
  .nav__links[data-open]{ display:flex; }
  .nav__links a{ padding:13px 20px; font-size:.95rem; border-bottom:1px solid var(--rule); }
  .nav__links a:last-child{ border-bottom:0; }

  .bookhero{ grid-template-columns:1fr; gap:34px; padding-bottom:52px; }
  .bookhero__aside{ position:static; width:220px; }
  .figures{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  body{ font-size:16px; }
  .topbar .social{ display:none; }   /* ciasno w pasku — ikony zostają w stopce */
  .section{ padding:56px 0; }
  .hero{ padding:44px 0 30px; }
  .dateline{ gap:10px; font-size:.6rem; letter-spacing:.18em; }
  .authors{ grid-template-columns:1fr; }
  .acol{ grid-column:auto; }
  .book__cover{ width:120px; margin-right:18px; }

  .bookhero__aside{ width:170px; }
  .gallery{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:16px; }

  /* Logo serii na telefonie – niższa klatka, żeby kafel nie urósł w słupek.
     Ograniczenie idzie przez max-height; szerokość i tak pilnuje max-width:100%. */
  .serieindex__logo{ min-height:116px; padding:12px 14px; }
  .serieindex__logo img{ max-height:92px; }
  .series__logo{ min-height:140px; padding:14px 0; }
  .series__logo img{ max-height:112px; }
  /* jedna kolumna – tytuły nie stoją już obok siebie, więc rezerwa znika */
  .serieindex__name{ min-height:0; }
}