@charset "utf-8";

/* ============================================================
   Śladami Niepodległości — XX edycja
   Baza (tokeny i komponenty) + skóra [data-skin="1846"] „Kraków 1846” na końcu pliku.
   Poprzednie warianty (A/B/D) i palety: _kopia-2026-09-07-warianty-ABCD.zip.
   ============================================================ */

:root {
  /* --- papier i tusz --- */
  --paper:        #e4dfd1;
  --paper-lit:    #eee9dd;
  --paper-deep:   #d6d0bf;
  --ink:          #241f1c;
  --ink-soft:     #56504a;
  --ink-faint:    #8b847b;

  /* --- kolory tuszu --- */
  --violet:       #4b2e83;
  --violet-lit:   #6a49a8;
  --red:          #a3242b;
  --verdigris:    #2f6f62;
  --brick:        #8c3a2b;

  /* --- typografia --- */
  --display: "Bricolage Grotesque", "Segoe UI", "Helvetica Neue", sans-serif;
  --text:    "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --mono:    "Bricolage Grotesque", "Segoe UI", sans-serif;   /* wariant B podmienia na Kode Mono */

  --t-hero:  clamp(2.1rem, 10.8vw, 8.4rem);
  --t-h1:    clamp(2.1rem, 5.2vw, 3.5rem);
  --t-h2:    clamp(1.55rem, 3.1vw, 2.3rem);
  --t-h3:    clamp(1.15rem, 1.6vw, 1.35rem);
  --t-lede:  clamp(1.1rem, 1.55vw, 1.35rem);
  --t-body:  1.0625rem;
  --t-small: 0.875rem;
  --t-tiny:  0.75rem;

  /* --- rytm --- */
  --gutter:  clamp(1.25rem, 4vw, 3.5rem);
  --measure: 62ch;
  --band-y:  clamp(4rem, 9vw, 8.5rem);
  --sheet:   1220px;
  --bar:     66px;

  /* --- kreska --- */
  --hair:    1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  --hair-2:  1px solid color-mix(in srgb, var(--ink) 32%, transparent);
}

/* ============================================================
   Reset i podstawy
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar) + 1rem);
  -webkit-text-size-adjust: 100%;
  /* clip, nie hidden: przycina tla pasm rozciagniete na 100vw,
     ale nie robi z html/body kontenera przewijania, wiec belka
     nadal trzyma sie gory przez position: sticky */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--t-body)/1.68 var(--text);
  font-synthesis-weight: none;
  overflow-x: clip;
}

/* ziarno papieru — jedna warstwa na całą stronę */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--violet); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--red); }

:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: color-mix(in srgb, var(--violet) 22%, transparent); }

.skip {
  position: absolute;
  left: -9999px;
  top: .5rem;
  background: var(--ink);
  color: var(--paper-lit);
  padding: .7rem 1.1rem;
  z-index: 200;
  font-family: var(--display);
}
.skip:focus { left: .5rem; }

/* ============================================================
   Layout: arkusz i pasma
   ============================================================ */

.sheet {
  width: 100%;
  max-width: var(--sheet);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band-y); position: relative; }
.band--tight { padding-block: calc(var(--band-y) * .55); }

/* zagięcie arkusza między pasmami */
.band--creased::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  height: 3px;
  background:
    linear-gradient(90deg,
      transparent 0 4%,
      color-mix(in srgb, var(--ink) 20%, transparent) 8%,
      color-mix(in srgb, var(--ink) 8%, transparent) 46%,
      color-mix(in srgb, var(--ink) 22%, transparent) 74%,
      transparent 96% 100%);
}

/* pasmo wciete w arkusz - tlo idzie na pelna szerokosc okna,
   niezaleznie od tego, ze sekcja jest ograniczona szerokoscia arkusza */
.band--sunk { isolation: isolate; }
.band--sunk::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--paper-deep) 62%, var(--paper));
  z-index: -1;
}

/* pasmo finałowe dostaje rysowaną scenę przy dolnej krawędzi (assets/tools/grafiki.py) */
#final::after {
  background-image: url("../img/kafle/pasmo-final.jpg"),
                    linear-gradient(color-mix(in srgb, var(--paper-deep) 62%, var(--paper)),
                                    color-mix(in srgb, var(--paper-deep) 62%, var(--paper)));
  background-repeat: no-repeat, repeat;
  background-position: bottom center, center;
  background-size: min(1500px, 130%) auto, auto;
  background-blend-mode: multiply, normal;
}

.band-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.band-head h2 { font-size: var(--t-h2); }
.band-head .band-note {
  font-family: var(--display);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: -.01em;
  text-align: right;
  max-width: 26ch;
  line-height: 1.35;
}
.band-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: none;
}

.nb { white-space: nowrap; }

.lede {
  font-size: var(--t-lede);
  line-height: 1.55;
  max-width: 44ch;
  color: var(--ink);
}

.twocol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
}
.twocol h2 { font-size: var(--t-h2); margin-bottom: 1rem; }

/* ============================================================
   Przyciski — wycięte z papieru, dociśnięte tuszem
   ============================================================ */

.btn {
  --btn-ink: var(--red);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--paper-lit);
  background: var(--btn-ink);
  border: 0;
  padding: .95rem 1.5rem;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 45%, transparent) inset,
              3px 3px 0 0 color-mix(in srgb, var(--ink) 78%, transparent);
  transition: transform .13s ease, box-shadow .13s ease, background-color .13s ease;
}
.btn:hover {
  color: var(--paper-lit);
  background: color-mix(in srgb, var(--btn-ink) 88%, var(--ink));
  transform: translate(1px, 1px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 45%, transparent) inset,
              2px 2px 0 0 color-mix(in srgb, var(--ink) 78%, transparent);
}
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 45%, transparent) inset; }

.btn--quiet {
  background: transparent;
  color: var(--ink);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ink) 55%, transparent) inset;
}
.btn--quiet:hover {
  color: var(--paper-lit);
  background: var(--ink);
  box-shadow: none;
}

.btn--violet { --btn-ink: var(--violet); }

/* ============================================================
   Górna belka + linia postępu
   ============================================================ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(9px) saturate(1.1);
  border-bottom: var(--hair);
}
.topbar-in {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: var(--bar);
  /* belka może być szersza od arkusza treści — inaczej nazwa i menu nie mieszczą się
     w 1220 px i nazwa ucina się do „Ślad…” */
  max-width: min(1460px, 100%);
}
.progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--red);
  transform-origin: 0 50%;
  transform: scaleX(var(--read, 0));
  pointer-events: none;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
.mark svg { width: 38px; height: 38px; flex: none; color: var(--violet); font-family: var(--display); }
.mark { flex: 0 0 auto; min-width: 0; }
/* bez ellipsis: nazwa albo mieści się w całości, albo znika (znak niesie identyfikację) */
.mark-words { white-space: nowrap; }
.mark-words b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -.03em;
  line-height: 1.05;
  display: block;
}
.mark-words > span {
  display: block;
  font-family: var(--display);
  font-size: var(--t-tiny);
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: .02em;
}

.nav { display: flex; align-items: center; gap: .1rem; }
.nav a {
  font-family: var(--display);
  /* stopień pisma menu trzymamy w bazie, nie w skórze — inaczej reguła skóry
     (wyższa specyficzność) wygrywa z media queries i menu nie zwęża się */
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink);
  text-decoration: none;
  padding: .5rem .55rem;
  border-radius: 3px;
  white-space: nowrap;
}
.nav a:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.nav a[aria-current="page"] {
  color: var(--red);
  box-shadow: 0 2px 0 var(--red);
}
.nav .nav-results { color: var(--violet); font-weight: 700; }
.nav .btn { margin-left: .5rem; padding: .62rem 1.05rem; font-size: .9rem; }

.burger {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: var(--hair-2);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  position: relative;
}
.burger i {
  position: absolute;
  left: 11px; right: 11px;
  height: 2px;
  background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
.burger i:nth-child(1) { top: 15px; }
.burger i:nth-child(2) { top: 21px; }
.burger i:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   HERO — arkusz mapy
   ============================================================ */

.hero {
  position: relative;
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5.5rem);
  overflow: hidden;
}

.hero-sheet { position: relative; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
  margin-top: clamp(1.75rem, 4vw, 3.25rem);
}

.hero-say { position: relative; z-index: 3; }

.hero-edition {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .55rem 1rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
  color: var(--violet);
  margin-bottom: .9rem;
  max-width: none;
}
.hero-edition b { font-size: 1.5em; font-weight: 800; letter-spacing: -.04em; }
.hero-motto {
  font-weight: 600;
  color: var(--ink-faint);
  padding-left: 1rem;
  border-left: 2px solid color-mix(in srgb, var(--violet) 40%, transparent);
}

.hero h1 {
  font-size: var(--t-hero);
  letter-spacing: -.05em;
  line-height: .86;
  margin: 0;
}
.hero h1 .l2 { display: block; }

.hero-lede {
  font-size: var(--t-lede);
  line-height: 1.5;
  max-width: 34ch;
  margin-bottom: 1.9rem;
}

.hero-when {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1.25rem, 2.4vw, 2rem);
  margin-bottom: 2rem;
}
.hero-when div { padding-top: .7rem; border-top: var(--hair-2); min-width: 7rem; }
.hero-when dt {
  font-family: var(--display);
  font-size: var(--t-tiny);
  font-weight: 600;
  color: var(--ink-faint);
  margin-bottom: .15rem;
}
.hero-when dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -.02em;
}

.hero-do { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; max-width: none; }

/* mapa */
.hero-map { position: relative; }
.hero-map .map-frame { position: relative; z-index: 1; }
.hero-map svg { width: 100%; height: auto; display: block; }
.hero-map image { image-rendering: auto; }

/* kolory mapy zaszyte w SVG podążają za tokenami — dzięki temu palety
   i skóra B przebarwiają mapę bez ruszania pliku SVG */
.hero-map .map-meta path { fill: var(--red); stroke: var(--red); }
.hero-map .map-meta circle { stroke: var(--red); }
.hero-map [fill="#4b2e83"] { fill: var(--violet); }
.hero-map [stroke="#4b2e83"] { stroke: var(--violet); }
.hero-map [fill="#a3242b"] { fill: var(--red); }
.hero-map [stroke="#a3242b"] { stroke: var(--red); }
.hero-map [fill="#2f6f62"] { fill: var(--verdigris); }
.hero-map [stroke="#2f6f62"] { stroke: var(--verdigris); }
.hero-map [fill="#8c3a2b"] { fill: var(--brick); }
.hero-map [stroke="#8c3a2b"] { stroke: var(--brick); }
.hero-map [fill="#241f1c"] { fill: var(--ink); }
.hero-map [stroke="#241f1c"] { stroke: var(--ink); }
.hero-map [fill="#eee9dd"] { fill: var(--paper-lit); }
.hero-map [stroke="#e4dfd1"] { stroke: var(--paper); }
.hero-map [stroke="#eee9dd"] { stroke: var(--paper-lit); }
.hero-map [fill="#3f5c70"] { fill: var(--water-deep, #3f5c70); }

.map-frame {
  position: relative;
  border: 1.5px solid color-mix(in srgb, var(--ink) 38%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--paper-lit) 90%, transparent), color-mix(in srgb, var(--paper-deep) 55%, transparent));
  box-shadow: 6px 7px 0 0 color-mix(in srgb, var(--ink) 12%, transparent);
  padding: 10px;
}
.map-frame::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  pointer-events: none;
}

.map-caption {
  font-family: var(--display);
  font-size: var(--t-tiny);
  font-weight: 600;
  color: var(--ink-faint);
  padding: .55rem .35rem 0;
  letter-spacing: .01em;
  max-width: none;
}

/* pieczęć jubileuszowa */
.seal {
  position: absolute;
  z-index: 6;
  width: clamp(112px, 13.5vw, 196px);
  right: clamp(-1.5rem, -1.2vw, -.5rem);
  top: clamp(-3.75rem, -4.5vw, -2rem);
  transform: rotate(-11deg) scale(1);
  mix-blend-mode: multiply;
  pointer-events: none;
  opacity: .93;
  color: var(--violet);
  font-family: var(--display);
}
.seal svg { width: 100%; height: auto; }

/* ============================================================
   Odliczanie
   ============================================================ */

.clock {
  border-top: var(--hair-2);
  border-bottom: var(--hair-2);
  padding-block: clamp(1.35rem, 2.5vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
}
.clock-say {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  letter-spacing: -.02em;
  max-width: 20ch;
  line-height: 1.2;
}
.clock-say em {
  display: block;
  margin-top: .3rem;
  font-style: normal;
  font-size: var(--t-tiny);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.clock-units { display: flex; gap: clamp(1rem, 2.5vw, 2.5rem); margin-left: auto; }
.clock-units div { text-align: center; min-width: 3.6rem; }
.clock-units b {
  display: block;
  font-family: var(--mono);
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}
.clock-units span {
  font-family: var(--display);
  font-size: var(--t-tiny);
  font-weight: 600;
  color: var(--ink-faint);
}

/* ============================================================
   Bento „W skrócie”
   ============================================================ */

.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.75rem, 1.5vw, 1.1rem);
}
.bento-tile {
  position: relative;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border: 1.5px solid color-mix(in srgb, var(--ink) 25%, transparent);
  background: color-mix(in srgb, var(--paper-lit) 72%, transparent);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-height: 9rem;
}
.bento-wide { grid-column: span 2; }
.bento-tile--lead {
  background: var(--ink);
  color: var(--paper-lit);
  border-color: var(--ink);
}
.bento-tile--lead .bento-label { color: color-mix(in srgb, var(--paper) 60%, transparent); }
.bento-tile--lead p { color: color-mix(in srgb, var(--paper) 80%, transparent); }
.bento-label {
  font-family: var(--display);
  font-size: var(--t-tiny);
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: .02em;
}
.bento-tile b {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  letter-spacing: -.035em;
  line-height: 1.05;
  text-wrap: balance;
}
.bento-tile--lead b { font-size: clamp(1.9rem, 3.6vw, 2.9rem); color: var(--paper-lit); }
.bento-tile b.bento-b--text { font-size: clamp(1.15rem, 1.9vw, 1.5rem); }
.bento-tile p { font-size: var(--t-small); line-height: 1.45; color: var(--ink-soft); margin-top: auto; }

/* ============================================================
   Opowieść 1846 — scrollytelling
   ============================================================ */

.story {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.story-stage {
  position: sticky;
  top: calc(var(--bar) + 1.25rem);
}
.stage-card {
  border: 1.5px solid color-mix(in srgb, var(--ink) 38%, transparent);
  background: color-mix(in srgb, var(--paper-lit) 85%, transparent);
  box-shadow: 6px 7px 0 0 color-mix(in srgb, var(--ink) 12%, transparent);
  padding: clamp(1rem, 2vw, 1.5rem);
}
.stage-read {
  font-family: var(--mono);
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--red);
  margin-bottom: .9rem;
  min-height: 1.4em;
  max-width: none;
}
.stage-map { width: 100%; height: auto; display: block; color: var(--brick); }
.stage-cap {
  font-family: var(--display);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: .9rem;
  min-height: 2.8em;
  line-height: 1.4;
  max-width: none;
}
.sc { display: none; }
.story[data-scene="1"] .sc-1, .story[data-scene="2"] .sc-2, .story[data-scene="3"] .sc-3,
.story[data-scene="4"] .sc-4, .story[data-scene="5"] .sc-5, .story[data-scene="6"] .sc-6 { display: inline; }

/* warstwy mapki */
.st-north { fill: var(--violet); fill-opacity: .12; stroke: var(--ink); stroke-width: 1.6; stroke-opacity: .5; transition: fill .5s, fill-opacity .5s; }
.st-south { fill: var(--brick); fill-opacity: .1; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 4 3; opacity: .55; transition: opacity .5s, fill .5s; }
.st-river { fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 9 5 3 5; opacity: .8; }
.st-bridge { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; opacity: 0; transition: opacity .4s; }
.st-square { fill: none; stroke: var(--ink); stroke-width: 2; stroke-opacity: .7; }
.st-wawel { fill: var(--brick); fill-opacity: .16; stroke: var(--brick); stroke-width: 2; }
.st-fire circle { fill: var(--red); opacity: 0; transition: opacity .4s; }
.st-fire circle:first-child { fill-opacity: .18; }
.st-fire circle:last-child { fill-opacity: .45; }
.st-x { stroke: var(--red); stroke-width: 3; stroke-linecap: round; opacity: 0; transition: opacity .4s; }
.st-q { font-family: var(--display); font-weight: 800; font-size: 96px; fill: var(--red); opacity: 0; transition: opacity .4s; }
.st-route { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 8 6; opacity: 0; transition: opacity .4s; }
.st-route-dots circle { fill: var(--red); stroke: var(--paper-lit); stroke-width: 2; opacity: 0; transition: opacity .4s; }
.story[data-scene="6"] .st-route, .story[data-scene="6"] .st-route-dots circle { opacity: 1; }
.st-l { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 2px; fill: var(--ink);
        paint-order: stroke; stroke: var(--paper-lit); stroke-width: 3.5; stroke-linejoin: round; }
.st-l-south, .st-l-one { opacity: 0; transition: opacity .4s; }
.st-l-south { fill: var(--brick); }

.story[data-scene="3"] .st-south, .story[data-scene="4"] .st-south { opacity: 1; fill: url(#kreska2); fill-opacity: .8; }
.story[data-scene="3"] .st-bridge, .story[data-scene="4"] .st-bridge,
.story[data-scene="5"] .st-bridge, .story[data-scene="6"] .st-bridge { opacity: 1; }
.story[data-scene="3"] .st-l-south, .story[data-scene="4"] .st-l-south { opacity: 1; }
.story[data-scene="4"] .st-fire circle { opacity: 1; }
.story[data-scene="4"] .st-north { fill: var(--red); fill-opacity: .2; }
.story[data-scene="5"] .st-x { opacity: 1; }
.story[data-scene="5"] .st-north, .story[data-scene="6"] .st-north,
.story[data-scene="5"] .st-south, .story[data-scene="6"] .st-south { fill: var(--brick); fill-opacity: .15; opacity: 1; }
.story[data-scene="5"] .st-l-one, .story[data-scene="6"] .st-l-one { opacity: 1; }
.story[data-scene="5"] .st-l-north, .story[data-scene="6"] .st-l-north { opacity: 0; }
.st-l-north { transition: opacity .4s; }
.story[data-scene="6"] .st-q { opacity: 1; }
.story[data-scene="5"] .st-q { opacity: 1; }
.story[data-scene="6"] .st-q { opacity: 0; }
.story[data-scene="6"] .st-north { fill: var(--violet); fill-opacity: .12; }
.story[data-scene="6"] .st-south { fill: url(#kreska2); fill-opacity: .8; }

.story-text { padding-top: .5rem; }
.story-chapter {
  min-height: 58vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 1.5rem;
  border-left: 2px solid transparent;
  padding-left: clamp(1rem, 2vw, 1.75rem);
  margin-left: calc(clamp(1rem, 2vw, 1.75rem) * -1);
  opacity: .42;
  transition: opacity .35s ease, border-color .35s ease;
}
.story-chapter.is-live { opacity: 1; border-color: var(--red); }
.story-chapter:last-child { min-height: 40vh; }
.story-chapter .lede { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; margin-bottom: .7rem; }
.story-chapter p:not(.lede) { max-width: 52ch; }
.year-1846 { color: var(--red); position: relative; display: inline-block; }

/* ============================================================
   Kto w jakiej sprawie
   ============================================================ */

.who { display: grid; gap: 0; margin: 0; }
.who > div {
  padding: 1.25rem 0;
  border-bottom: var(--hair);
}
.who > div:first-child { border-top: var(--hair-2); }
.who dt {
  font-family: var(--display);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink-faint);
  margin-bottom: .45rem;
  max-width: 34ch;
  line-height: 1.4;
}
.who dd { margin: 0; }
.who .who-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -.03em;
  color: var(--violet);
  display: block;
  margin-bottom: .3rem;
}
.who .who-reach { font-size: var(--t-small); line-height: 1.7; }
.who-head { font-size: var(--t-h3); margin-bottom: 1rem; }
.who-note { font-size: var(--t-small); color: var(--ink-soft); margin-top: 1rem; }

.about {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.about-text h2 { font-size: var(--t-h1); margin-bottom: 1.3rem; }
.about-text h3 { font-size: var(--t-h3); margin: 1.6rem 0 .4rem; }
.about-text p:not(.lede) { max-width: 54ch; }

/* ============================================================
   Dwadzieścia stempli — z kartą edycji
   ============================================================ */

.jub-intro .lede { margin-bottom: 1.5rem; }

.years {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  /* szerokosc dobrana tak, zeby dwadziescia stempli ulozylo sie
     w dwa rowne rzedy po dziesiec, a na telefonie w cztery po piec */
  max-width: 41rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.years-slot {
  position: relative;
  flex: 0 0 auto;
  width: 3.25rem;
}
.years-item {
  appearance: none;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--violet) 42%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--violet) 82%, var(--ink));
  font-family: var(--display);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: -.01em;
  transform: rotate(var(--tilt, 0deg));
  mix-blend-mode: multiply;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.years-slot:hover .years-item, .years-slot.is-open .years-item, .years-item:focus-visible {
  transform: rotate(0deg) scale(1.08);
  background: color-mix(in srgb, var(--violet) 12%, transparent);
}
.years-item--now {
  border: 2.5px solid var(--red);
  color: var(--paper-lit);
  background: var(--red);
  font-size: .84rem;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 20%, transparent);
}
.years-slot:hover .years-item--now, .years-slot.is-open .years-item--now { background: var(--red); }
.years-cap {
  font-family: var(--display);
  font-size: var(--t-tiny);
  font-weight: 600;
  color: var(--ink-faint);
  margin-top: .85rem;
}

/* karta edycji — rodzeństwo przycisku, bo mix-blend-mode stempla tworzy kontekst */
.years-pop {
  position: absolute;
  top: calc(100% + .6rem);
  left: 50%;
  transform: translate(-50%, -4px);
  width: 15rem;
  padding: .9rem 1rem 1rem;
  background: var(--paper-lit);
  border: 1.5px solid color-mix(in srgb, var(--ink) 40%, transparent);
  box-shadow: 5px 6px 0 0 color-mix(in srgb, var(--ink) 14%, transparent);
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  font-size: var(--t-small);
}
.years-pop--left { left: 0; transform: translate(0, -4px); }
.years-pop--right { left: auto; right: 0; transform: translate(0, -4px); }
.years-slot:hover .years-pop, .years-slot:focus-within .years-pop, .years-slot.is-open .years-pop {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.years-slot:hover .years-pop--left, .years-slot:focus-within .years-pop--left, .years-slot.is-open .years-pop--left,
.years-slot:hover .years-pop--right, .years-slot:focus-within .years-pop--right, .years-slot.is-open .years-pop--right { transform: translate(0, 0); }
.years-pop b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: -.03em; color: var(--violet); }
.years-pop > span { font-family: var(--mono); font-size: var(--t-tiny); font-weight: 700; color: var(--ink-faint); letter-spacing: .08em; }
.years-pop p { margin: .45rem 0 .6rem; line-height: 1.4; color: var(--ink-soft); }
.years-pop img { width: 100%; height: auto; margin-bottom: .6rem; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.years-pop a { font-family: var(--display); font-weight: 700; font-size: var(--t-small); }

/* ============================================================
   Taśma zdjęć
   ============================================================ */

.film {
  position: relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  display: flex;
  overflow: hidden;
  margin-block: clamp(2rem, 4vw, 3.5rem);
  padding-block: .9rem;
  border-top: var(--hair-2);
  border-bottom: var(--hair-2);
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 55%, transparent) 0 10px, transparent 10px 24px) top / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 55%, transparent) 0 10px, transparent 10px 24px) bottom / 100% 6px no-repeat;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.film-track {
  display: flex;
  gap: .7rem;
  padding-inline: .35rem;
  width: max-content;
  flex: none;
  animation: film 70s linear infinite;
}
.film:hover .film-track, .film:focus-within .film-track { animation-play-state: paused; }
.film .ph { flex: none; }
.film .ph img { height: 190px; width: auto; }
@keyframes film { to { transform: translateX(-100%); } }

/* ============================================================
   Zdjęcia: kafle, rzędy, masonry
   ============================================================ */

.ph {
  display: block;
  position: relative;
  border: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent);
  background: var(--paper-deep);
  overflow: hidden;
  padding: 0;
  color: var(--ink-faint);
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease;
}
a.ph:hover, a.ph:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 0 color-mix(in srgb, var(--violet) 28%, transparent);
}
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph--empty {
  aspect-ratio: 4 / 3;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 1rem;
  font-family: var(--display);
  font-size: var(--t-tiny);
  font-weight: 600;
  letter-spacing: .01em;
  cursor: default;
  background-image:
    linear-gradient(135deg, transparent 49%, color-mix(in srgb, var(--ink) 12%, transparent) 49% 51%, transparent 51%),
    linear-gradient(45deg, transparent 49%, color-mix(in srgb, var(--ink) 12%, transparent) 49% 51%, transparent 51%);
}
.ph--wide { aspect-ratio: 21 / 5; max-height: 11rem; max-width: 40rem; }

.ph-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  gap: .7rem;
}
.ph-row .ph { aspect-ratio: 4 / 3; }
.ph-row .ph--empty { grid-column: 1 / -1; }

.masonry { columns: 3 16rem; column-gap: .9rem; }
.masonry .ph { break-inside: avoid; margin-bottom: .9rem; }
.masonry .ph--empty { aspect-ratio: 4 / 3; }

/* podglad zdjecia */
.lightbox:not([open]) { display: none; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  border: 0;
  padding: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  background: color-mix(in srgb, var(--ink) 93%, transparent);
  display: grid;
  place-items: center;
  color: var(--paper-lit);
}
.lightbox::backdrop { background: color-mix(in srgb, var(--ink) 88%, transparent); }
.lightbox img { max-width: min(92vw, 1100px); max-height: 80vh; width: auto; }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--paper) 55%, transparent);
  background: color-mix(in srgb, var(--ink) 60%, transparent);
  color: var(--paper-lit);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  display: grid;
  place-items: center;
  padding: 0;
}
.lightbox-close { top: 1rem; right: 1rem; }
.lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); font-size: 2rem; }
.lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); font-size: 2rem; }
.lightbox-cap {
  position: absolute;
  bottom: 1.2rem;
  inset-inline: 4.5rem;
  text-align: center;
  color: color-mix(in srgb, var(--paper) 80%, transparent);
  font-family: var(--display);
  font-size: var(--t-small);
  max-width: none;
}
.lightbox-n { font-family: var(--mono); font-weight: 700; letter-spacing: .1em; margin-right: 1rem; color: var(--paper); }

/* ============================================================
   Oś czasu — szyna pozioma
   ============================================================ */

.timeline { position: relative; }

.timeline-rail {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  padding-bottom: 1.5rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
}
.timeline-track {
  display: flex;
  gap: 0;
  min-width: max-content;
  position: relative;
  padding-top: 4.2rem;
}
.timeline-track::before {
  content: "";
  position: absolute;
  top: 3.05rem;
  left: 0; right: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--ink) 45%, transparent) 0 9px,
    transparent 9px 16px);
}
.timeline-track::after {
  content: "";
  position: absolute;
  top: 3.05rem;
  left: 0;
  width: var(--progress, 0%);
  height: 2px;
  background: var(--red);
  transition: width .45s cubic-bezier(.2,.7,.3,1);
}

.tl {
  position: relative;
  scroll-snap-align: start;
  width: clamp(210px, 24vw, 268px);
  flex: none;
  padding-inline: 0 clamp(1.25rem, 2.5vw, 2rem);
}
.tl::before {
  content: "";
  position: absolute;
  top: -1.15rem;
  left: 0;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--paper);
  border: 2.5px solid var(--ink);
}
.tl.is-past::before { background: var(--red); border-color: var(--red); }
.tl b {
  display: block;
  font-family: var(--mono);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -.045em;
  line-height: 1;
  margin-bottom: .5rem;
  font-variant-numeric: tabular-nums;
}
.tl strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin-bottom: .4rem;
}
.tl p { font-size: var(--t-small); line-height: 1.5; color: var(--ink-soft); max-width: 30ch; }

.rail-hint {
  font-family: var(--display);
  font-size: var(--t-tiny);
  font-weight: 600;
  color: var(--ink-faint);
  margin-top: .5rem;
}

/* ============================================================
   Kategorie — trzy ścieżki
   ============================================================ */

.cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.cat {
  --cat-ink: var(--cat, var(--violet));
  position: relative;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  background-color: color-mix(in srgb, var(--paper-lit) 75%, transparent);
  background-image: var(--tlo, none);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 118% auto;
  border: 2px solid color-mix(in srgb, var(--cat-ink) 55%, transparent);
  display: flex;
  flex-direction: column;
  gap: .85rem;
  transition: box-shadow .16s ease, transform .16s ease;
}
.cat:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 color-mix(in srgb, var(--cat-ink) 26%, transparent);
}
/* liczby rzymskie w kroju szeryfowym - w Bricolage I, II, III
   czytaja sie jak kreski, a nie jak numer kategorii */
.cat .cat-roman {
  font-family: var(--text);
  font-weight: 600;
  font-size: clamp(2.5rem, 4.6vw, 3.6rem);
  line-height: .9;
  letter-spacing: .02em;
  color: var(--cat-ink);
  margin: 0;
}
.cat .cat-level { display: flex; gap: .3rem; margin: -.3rem 0 0; }
.cat .cat-level i {
  width: 1.4rem; height: .38rem;
  border: 1px solid color-mix(in srgb, var(--cat-ink) 60%, transparent);
  border-radius: 2px;
}
.cat .cat-level i.on { background: var(--cat-ink); }
.cat h3 { font-size: var(--t-h3); }
.cat p { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.5; }
.cat .cat-tag {
  margin-top: auto;
  padding-top: .85rem;
  border-top: 1px solid color-mix(in srgb, var(--cat-ink) 30%, transparent);
  font-family: var(--display);
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--cat-ink);
  letter-spacing: -.015em;
}

/* ============================================================
   Podgórze — rozszerzenie
   ============================================================ */

.dlc {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.dlc-box {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 2px solid color-mix(in srgb, var(--brick) 65%, transparent);
  background: color-mix(in srgb, var(--paper-lit) 75%, transparent);
  box-shadow: 8px 8px 0 0 color-mix(in srgb, var(--brick) 22%, transparent);
}
.dlc-box h2 { font-size: var(--t-h1); margin-bottom: .9rem; }
.dlc-stamp {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brick);
  border: 1.5px solid var(--brick);
  padding: .3rem .6rem;
  transform: rotate(-2deg);
  margin-bottom: 1.1rem;
}
.dlc-list { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.dlc-list li { padding: .6rem 0; border-top: var(--hair); font-size: var(--t-small); line-height: 1.5; }
.dlc-list b { font-family: var(--display); color: var(--brick); }
.dlc-meta { margin: 0 0 1.4rem; display: grid; gap: 0; max-width: 34rem; }
.dlc-meta > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; padding: .45rem 0; border-top: var(--hair); font-size: var(--t-small); }
.dlc-meta dt { font-family: var(--display); font-weight: 700; color: var(--ink-soft); }
.dlc-meta dd { margin: 0; }
.dlc-do { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; max-width: none; }
.dlc-wink { font-family: var(--display); font-size: var(--t-small); font-weight: 600; color: var(--ink-faint); }
.dlc-pic .ph { aspect-ratio: 4 / 3; transform: rotate(1.5deg); }
.dlc-cap {
  font-family: var(--display);
  font-size: var(--t-tiny);
  font-weight: 600;
  color: var(--ink-faint);
  margin-top: 1rem;
}

/* ============================================================
   Kalendarium
   ============================================================ */

.cal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  counter-reset: cal;
}
.cal li { position: relative; padding-top: 1rem; border-top: 2px solid var(--ink); }
.cal li::before {
  content: "";
  position: absolute;
  top: -8px; left: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--paper);
  border: 2.5px solid var(--ink);
}
.cal li:nth-child(3) { border-top-color: var(--red); }
.cal li:nth-child(3)::before { background: var(--red); border-color: var(--red); }
.cal time { display: block; margin-bottom: .5rem; }
.cal time b {
  display: block;
  font-family: var(--mono);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  letter-spacing: -.035em;
  line-height: 1;
}
.cal time span { font-family: var(--display); font-size: var(--t-tiny); font-weight: 600; color: var(--ink-faint); }
.cal strong { display: block; font-family: var(--display); font-size: var(--t-h3); font-weight: 700; letter-spacing: -.02em; margin-bottom: .35rem; }
.cal p { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.5; }

/* ============================================================
   Kroki
   ============================================================ */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: clamp(1.5rem, 2.5vw, 1.75rem);
  counter-reset: step;
  margin-top: 1.25rem;   /* miejsce na numery zachodzące na krawędź kafelków */
}
/* krok = kafelek z numerem zachodzącym na górną krawędź (jak w strefie finałowej) */
.step {
  counter-increment: step;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.6rem 1.3rem 1.4rem;
}
.step::before {
  content: counter(step);
  position: absolute;
  top: -1rem; left: 1.2rem;
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper-lit);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
}
.steps .step h3 { font-size: 1.15rem; line-height: 1.15; margin: 0; text-wrap: balance; }
.step p { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.55; margin: 0; }

/* ============================================================
   Aktualności
   ============================================================ */

.news {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.news-item {
  padding: 1.3rem 1.4rem 1.5rem;
  border: 1.5px solid color-mix(in srgb, var(--ink) 25%, transparent);
  background: color-mix(in srgb, var(--paper-lit) 70%, transparent);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.news-date { font-family: var(--mono); font-size: var(--t-tiny); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.news-item h3 { font-size: var(--t-h3); }
.news-item h3 a { color: var(--ink); text-decoration: none; }
.news-item h3 a:hover { color: var(--red); }
.news-item p { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.5; }

/* ============================================================
   Partnerzy — kartusze i poziomy
   ============================================================ */

.partners {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
  gap: .8rem;
}
.partner {
  min-height: 5.6rem;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem .9rem;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  background: color-mix(in srgb, var(--paper-lit) 70%, transparent);
  font-family: var(--display);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink-soft);
  max-width: none;
}
.partner img { max-height: 3.4rem; width: auto; }
.partner--todo { border-style: dashed; color: var(--ink-faint); font-style: italic; }
.partners--lead { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.partners--lead .partner { min-height: 7rem; font-size: .98rem; font-weight: 700; color: var(--ink); }
.partners--lead .partner img { max-height: 4.6rem; }
.partners--small { grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); gap: .5rem; }
.partners--small .partner { min-height: 4.2rem; font-size: .74rem; font-weight: 600; color: var(--ink-faint); background: transparent; }
.partners--small .partner img { max-height: 2.4rem; filter: grayscale(1); opacity: .75; }
.tier { margin-bottom: clamp(2rem, 4vw, 3rem); }
.tier h3 {
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--ink-faint);
  letter-spacing: .01em;
  margin-bottom: .8rem;
  padding-bottom: .5rem;
  border-bottom: var(--hair-2);
}

/* ============================================================
   FAQ
   ============================================================ */

.faq { max-width: 46rem; }
.faq details { border-top: var(--hair-2); }
.faq details:last-child { border-bottom: var(--hair-2); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 2.5rem 1rem 0;
  position: relative;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: .4rem; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--violet);
  border-bottom: 2px solid var(--violet);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:hover { color: var(--red); }
.faq details p { padding: 0 0 1.1rem; font-size: var(--t-small); color: var(--ink-soft); max-width: 60ch; }

/* ============================================================
   Wykłady, miejsca
   ============================================================ */

.vids {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.vid-frame { aspect-ratio: 16 / 9; margin-bottom: .9rem; }
.vid-tag { font-family: var(--mono); font-size: var(--t-tiny); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin-bottom: .25rem; }
.vid h3 { font-size: var(--t-h3); margin-bottom: .4rem; }
.vid p:last-child { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.5; }

.places {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(.9rem, 2vw, 1.4rem);
}
.place {
  padding: 1.2rem 1.3rem 1.4rem;
  border: 1.5px solid color-mix(in srgb, var(--ink) 25%, transparent);
  background: color-mix(in srgb, var(--paper-lit) 70%, transparent);
}
.place b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.03em; }
.place span { display: block; font-family: var(--mono); font-size: var(--t-tiny); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin: .25rem 0 .6rem; }
.place p { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.5; }
.place--new { border-color: var(--brick); }
.place--new span { color: var(--brick); }

/* ============================================================
   Oś „20 lat Gry” i karty edycji
   ============================================================ */

.jub { list-style: none; margin: 0; padding: 0; position: relative; }
.jub::before {
  content: "";
  position: absolute;
  left: 3.3rem; top: 0; bottom: 0;
  width: 0;
  border-left: 2px dashed color-mix(in srgb, var(--ink) 40%, transparent);
}
.jub-stage {
  position: relative;
  display: grid;
  grid-template-columns: 6.6rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}
.jub-year { position: relative; text-align: center; }
.jub-year b {
  display: grid;
  place-items: center;
  width: 6.6rem;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--violet) 55%, transparent);
  background: var(--paper);
  color: var(--violet);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -.04em;
  mix-blend-mode: multiply;
}
.jub-year span { display: block; font-family: var(--mono); font-size: var(--t-tiny); font-weight: 700; letter-spacing: .08em; color: var(--ink-faint); margin-top: .5rem; }
.jub-stage--now .jub-year b { background: var(--red); border: 2.5px solid var(--red); color: var(--paper-lit); }
.jub-body h3 { font-size: var(--t-h3); margin-bottom: .9rem; max-width: 40ch; }
.jub-more { font-family: var(--display); font-weight: 700; font-size: var(--t-small); margin-top: .8rem; }

.ed {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: var(--hair-2);
}
.ed:first-child { border-top: 0; padding-top: 0; }
.ed .ed-roman {
  font-family: var(--text);
  font-weight: 600;
  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  line-height: .9;
  color: var(--violet);
  margin: 0 0 .3rem;
}
.ed .ed-year { font-family: var(--mono); font-weight: 700; font-size: var(--t-small); letter-spacing: .08em; color: var(--ink-faint); margin: 0; }
.ed-main h2 { font-size: var(--t-h2); margin-bottom: 1rem; max-width: 30ch; }
.ed-meta { margin: 0 0 1.4rem; display: grid; gap: 0; max-width: 46rem; }
.ed-meta > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; padding: .45rem 0; border-top: var(--hair); font-size: var(--t-small); }
.ed-meta dt { font-family: var(--display); font-weight: 700; color: var(--ink-soft); }
.ed-meta dd { margin: 0; }
.ed-links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; max-width: none; }
.ed .ph-row { max-width: 52rem; }

/* ============================================================
   Stopka
   ============================================================ */

.foot {
  background: var(--ink);
  color: color-mix(in srgb, var(--paper) 88%, transparent);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}
.foot a { color: var(--paper-lit); }
.foot a:hover { color: color-mix(in srgb, var(--paper) 70%, var(--red)); }
.foot h2 { font-size: var(--t-h2); color: var(--paper-lit); margin-bottom: 1rem; }
.foot .btn--violet { color: var(--paper-lit); }
.foot-grid {
  display: grid;
  /* 12.5rem, nie 15rem: przy 3.5rem odstepu cztery kolumny musza sie zmiescic
     w arkuszu 1220 px, inaczej "Na skroty" spada do drugiego rzedu */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  gap: clamp(1.75rem, 3vw, 2.75rem);
  padding-bottom: 2.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
}
.foot-grid h3 {
  font-size: var(--t-small);
  font-weight: 700;
  color: color-mix(in srgb, var(--paper) 55%, transparent);
  margin-bottom: .85rem;
  letter-spacing: -.005em;
}
.foot-grid p, .foot-grid li { font-size: var(--t-small); line-height: 1.65; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-people li + li { margin-top: .9rem; }
.foot-note {
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2rem;
  font-family: var(--display);
  font-size: var(--t-tiny);
  color: color-mix(in srgb, var(--paper) 48%, transparent);
  max-width: none;
}
.foot-alt { margin-left: auto; color: color-mix(in srgb, var(--paper) 60%, transparent); }

/* ============================================================
   Strony wewnętrzne
   ============================================================ */

.pagehead {
  padding-block: clamp(2.5rem, 5vw, 4.25rem) clamp(2rem, 4vw, 3.25rem);
  border-bottom: var(--hair-2);
}
.pagehead-in {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}
.pagehead h1 {
  font-size: clamp(2.4rem, 7vw, 5rem);
  letter-spacing: -.045em;
  line-height: .92;
  margin-bottom: 1.1rem;
}

.pagehead-aside { padding-top: .8rem; border-top: var(--hair-2); }
.pagehead-aside .aside-label {
  font-family: var(--display);
  font-size: var(--t-tiny);
  font-weight: 600;
  color: var(--ink-faint);
  margin-bottom: .2rem;
}
.pagehead-aside .aside-value {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.9vw, 1.4rem);
  letter-spacing: -.025em;
  line-height: 1.25;
  margin-bottom: 1.1rem;
  max-width: 28ch;
  overflow-wrap: anywhere;
}
.pagehead-aside .aside-note { font-size: var(--t-small); color: var(--ink-soft); margin-top: 1rem; max-width: 40ch; }
.pagehead-aside p:last-child { margin-bottom: 0; }
.crumb {
  font-family: var(--display);
  font-size: var(--t-tiny);
  font-weight: 600;
  color: var(--ink-faint);
  margin-bottom: 1rem;
}
.crumb a { color: inherit; }

.prose { max-width: 68ch; }
.prose h2 { font-size: var(--t-h2); margin: 2.75rem 0 1rem; }
.prose h3 { font-size: var(--t-h3); margin: 2rem 0 .6rem; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.2em; }
.prose li { margin-bottom: .45em; max-width: var(--measure); }
.prose > :first-child { margin-top: 0; }
.prose em { color: var(--brick); font-style: italic; }

.note {
  border-left: 3px solid var(--violet);
  background: color-mix(in srgb, var(--paper-lit) 70%, transparent);
  padding: 1.1rem 1.35rem;
  margin: 1.75rem 0;
  font-size: var(--t-small);
}
.note p { max-width: 58ch; }

.table-wrap { overflow-x: auto; margin: 1.75rem 0; }
table { border-collapse: collapse; width: 100%; min-width: 32rem; font-size: var(--t-small); }
th, td { text-align: left; padding: .7rem .9rem; border-bottom: var(--hair); vertical-align: top; }
th {
  font-family: var(--display);
  font-weight: 700;
  border-bottom: var(--hair-2);
  white-space: nowrap;
}
tbody tr:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }

/* ============================================================
   Logo gry (SVG z src/partials/logo.svg) — kolory przez tokeny,
   żeby skóry mogły je przebarwić
   ============================================================ */

:root {
  --logo-red:   #d13b22;
  --logo-text:  #d1261b;
  --logo-grey:  #b8b4ad;
  --logo-paper: #ffffff;
}
.logo { display: block; width: 100%; height: auto; overflow: visible; }
.logo .lg-frame, .logo .lg-tower { stroke: var(--logo-red); }
.logo .lg-shadow { stroke: var(--logo-grey); }
.logo .lg-t1 { fill: var(--logo-paper); stroke: var(--logo-grey); stroke-width: 2.5; }
.logo .lg-t2 { fill: var(--logo-text); }
.logo .lg-seal-bg { fill: var(--logo-red); }
.logo .lg-seal-ring { fill: none; stroke: var(--logo-paper); stroke-width: 5; opacity: .9; }
.logo .lg-seal-ring--in { stroke-width: 1.6; opacity: .7; }
.logo .lg-seal text { fill: var(--logo-paper); font-family: var(--display); font-weight: 800; }
.logo .lg-seal-arc { font-weight: 700; }

.mark .logo--mark { width: auto; height: 48px; flex: none; }
.mark .logo--mark .lg-shadow { display: none; }
.mark .logo--mark .lg-seal-arc, .mark .logo--mark .lg-seal-ed { display: none; }
.mark .logo--mark .lg-seal-xx { font-size: 150px; transform: translateY(20px); }
.mark .logo--mark .lg-seal-ring { display: none; }

/* ============================================================
   Intro — logo rysuje się przy pierwszym wejściu (site.js: intro())
   ============================================================ */

.intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  place-content: center;
  gap: 1.5rem;
  padding: var(--gutter);
  background: var(--paper);
  color: var(--ink);
  text-align: center;
}
.has-intro .intro { display: grid !important; }
.intro-logo { width: min(46rem, 88vw); margin-inline: auto; }
.intro-line {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(.95rem, 1.6vw, 1.2rem);
  letter-spacing: .02em;
  color: var(--ink-faint);
  max-width: none;
  opacity: 0;
}
.intro-skip {
  position: absolute;
  right: var(--gutter);
  bottom: var(--gutter);
  font: 600 var(--t-small) var(--display);
  color: var(--ink-faint);
  background: none;
  border: var(--hair-2);
  border-radius: 999px;
  padding: .55rem 1.1rem;
  cursor: pointer;
}
.intro-skip:hover { color: var(--ink); border-color: var(--ink); }

/* stan startowy: linie schowane (dasharray z data-len ustawia JS), napisy i pieczęć niewidoczne */
.intro.is-on .lg-lines path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.intro.is-on .lg-text path { opacity: 0; }
/* transform-box: fill-box → skala i obrót liczone od środka samej pieczęci,
   dzięki temu ląduje dokładnie w wycięciu ramki */
.intro .lg-seal-in { transform-box: fill-box; transform-origin: 50% 50%; }
.intro.is-on .lg-seal-in { opacity: 0; transform: translate(-40px, -190px) scale(2.4) rotate(-28deg); }
.intro.is-on .lg-seal-shadow { opacity: 0; }

/* kolejność: ramka → wieże → cień → napisy → pieczęć wrzucona na koniec (ok. 5 s) */
.intro.is-drawing .lg-frame { animation: lg-draw 1.7s cubic-bezier(.4,0,.2,1) forwards; }
.intro.is-drawing .lg-tower { animation: lg-draw 2s cubic-bezier(.4,0,.2,1) 1s forwards; }
.intro.is-drawing .lg-shadow { animation: lg-draw 1.6s ease-out 2.2s forwards; }
.intro.is-drawing .lg-t1 { animation: lg-in .6s ease-out 3.3s forwards; }
.intro.is-drawing .lg-t2 { animation: lg-in .6s ease-out 3.6s forwards; }
.intro.is-drawing .lg-seal-in { animation: lg-throw 1s cubic-bezier(.3,.55,.35,1.08) 4.25s forwards; }
.intro.is-drawing .lg-seal-shadow { animation: lg-shadow 1s ease-out 4.25s forwards; }
.intro.is-drawing .intro-line { animation: lg-in .6s ease-out 5.1s forwards; }
.intro.is-out { animation: lg-out .5s ease-in forwards; }

@keyframes lg-draw { to { stroke-dashoffset: 0; } }
@keyframes lg-in { to { opacity: 1; } }
/* pieczęć leci z góry, obraca się, uderza i lekko odbija; zostaje z niewielkim przechyłem */
@keyframes lg-throw {
  0%   { opacity: 0; transform: translate(-30px, -240px) scale(2.6) rotate(-30deg); }
  12%  { opacity: 1; }
  65%  { transform: translate(0, 0) scale(1.12) rotate(-11deg); }
  80%  { transform: translate(0, 0) scale(.94) rotate(-4deg); }
  90%  { transform: translate(0, 0) scale(1.04) rotate(-7deg); }
  100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(-6deg); }
}
@keyframes lg-shadow {
  0%   { opacity: 0; }
  70%  { opacity: .4; }
  100% { opacity: .25; }
}
@keyframes lg-out { to { opacity: 0; visibility: hidden; } }

/* ============================================================
   Pasek skrótów pod hero
   ============================================================ */

.icons {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: var(--hair-2);
  border-bottom: var(--hair-2);
}
.icon-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: 1.3rem .6rem 1.15rem;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-small);
  letter-spacing: -.01em;
  text-align: center;
  line-height: 1.2;
  border-right: var(--hair);
  transition: background-color .15s ease, color .15s ease;
}
.icon-tile:last-child { border-right: 0; }
.icon-tile svg { width: 34px; height: 34px; color: var(--violet); }
.icon-tile:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--red); }
.icon-tile:hover svg { color: var(--red); }

/* ============================================================
   Strona zapowiedzi (wkrotce.html) — hero bez mapy
   ============================================================ */

/* zapowiedź: po lewej tekst, po prawej karta z tematem edycji */
.hero-grid--wkrotce { grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); }
.wkrotce-obok {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: clamp(.5rem, 3vw, 2.5rem);
}
.wkrotce-obok .torn--temat { max-width: 26rem; padding: 1.4rem 1.6rem 1.5rem; }
.wkrotce-tag {
  display: inline-block;
  margin: 1.4rem 0 .2rem;
  padding: .45rem 1.1rem;
  background: var(--red);
  color: var(--paper-lit);
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-small);
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
  box-shadow: 3px 4px 0 0 color-mix(in srgb, var(--ink) 16%, transparent);
}
.torn--temat { max-width: 26rem; }
.torn-label {
  font-family: var(--display);
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 .35rem;
}
.torn-temat {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.55rem, 2.7vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--navy, var(--ink));
  margin: 0;
}
.torn-kontekst {
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.45;
  margin: .85rem 0 0;      /* miejsce na pociągnięcie pędzla pod tematem */
}

.wkrotce-lede {
  max-width: 46ch;
  margin: .9rem 0 1.4rem;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ============================================================
   Cytat na oderwanej kartce
   ============================================================ */

.torn {
  margin: 2rem 0 0;
  max-width: 24rem;
  padding: 1.1rem 1.4rem 1.2rem;
  background: var(--paper-lit);
  color: var(--ink);
  transform: rotate(-1.5deg);
  box-shadow: 3px 4px 0 0 color-mix(in srgb, var(--ink) 14%, transparent);
  clip-path: polygon(0 4%, 3% 0, 97% 2%, 100% 6%, 99% 95%, 96% 100%, 4% 98%, 0 94%);
}
.torn p {
  font-family: var(--text);
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.4;
  margin: 0;
}

/* ============================================================
   Teka uczestnika — pięć kart
   ============================================================ */

.teka {
  list-style: none;
  margin: 0;
  padding: .5rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: clamp(.9rem, 2vw, 1.4rem);
}
.teka-card a {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  min-height: 15rem;
  padding: 1.2rem 1.1rem 1.1rem;
  text-decoration: none;
  color: var(--ink);
  /* rysunek (assets/img/kafle) siedzi przy dolnej krawędzi, tekst idzie nad nim */
  background-color: var(--paper-lit);
  background-image: var(--tlo, none);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
  background-blend-mode: multiply;
  border: 1.5px solid color-mix(in srgb, var(--ink) 28%, transparent);
  box-shadow: 4px 5px 0 0 color-mix(in srgb, var(--ink) 12%, transparent);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .18s ease, box-shadow .18s ease;
}
.teka-card a:hover, .teka-card a:focus-visible {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 6px 8px 0 0 color-mix(in srgb, var(--violet) 22%, transparent);
  color: var(--ink);
}
.teka-card b {
  font-family: var(--mono);
  font-weight: 800;
  font-size: var(--t-small);
  letter-spacing: .12em;
  color: var(--red);
}
.teka-card strong {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  letter-spacing: -.03em;
  line-height: 1.05;
}
.teka-card span {
  font-family: var(--text);
  font-style: italic;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.4;
}
.teka-card svg {
  width: 40px; height: 40px;
  margin-top: auto;
  color: var(--violet);
  opacity: .8;
}

/* ============================================================
   Trasy w kartach kategorii
   ============================================================ */

.cat { --cat-ink: var(--cat, var(--violet)); }
.cat:nth-child(2) { --cat-ink: var(--cat, var(--verdigris)); }
.cat:nth-child(3) { --cat-ink: var(--cat, var(--brick)); }
.cat-route { font-size: var(--t-small); }
.cat-route-head {
  font-family: var(--display);
  font-weight: 700;
  color: var(--cat-ink);
  margin: 0 0 .4rem;
  display: flex;
  justify-content: space-between;
  gap: .5rem;
}
.cat-route-head span { color: var(--ink-faint); font-weight: 600; }
.cat-route ol {
  margin: 0;
  padding: 0 0 0 1.3rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.cat-route li::marker { color: var(--cat-ink); font-family: var(--display); font-weight: 700; }
.cat .cat-motto {
  font-family: var(--display);
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cat-ink);
}
.cats-note {
  margin-top: 1.5rem;
  max-width: 60ch;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.55;
}

/* ============================================================
   Finał na Stradomskiej — cztery kroki
   ============================================================ */

.finale {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.final-step {
  position: relative;
  padding: 1.5rem 1.4rem 1.4rem;
  background: color-mix(in srgb, var(--paper-lit) 78%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.final-n {
  position: absolute;
  top: -.9rem; left: 1.2rem;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: var(--paper-lit);
  font: 800 .95rem var(--display);
}
.final-step svg { width: 38px; height: 38px; color: var(--violet); margin-top: .3rem; }
.final-step h3 { font-size: var(--t-h3); }
.final-step p { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.5; }

/* ============================================================
   Panorama w stopce
   ============================================================ */

.foot-sky {
  position: relative;
  margin-top: calc(-1 * clamp(3rem, 6vw, 5rem));
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  color: color-mix(in srgb, var(--paper) 10%, var(--ink));
}
.foot-sky .sky {
  display: block;
  width: 100%;
  height: clamp(70px, 10vw, 150px);
  color: color-mix(in srgb, var(--paper) 14%, var(--ink));
}
.foot-sky-in {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
}
.foot-motto {
  font-family: var(--text);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--paper-lit);
  max-width: none;
}
.foot-date {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-small);
  color: color-mix(in srgb, var(--paper) 70%, transparent);
  max-width: none;
}
.foot-date b { color: var(--paper-lit); margin-right: .4rem; }
.foot-credits { flex-basis: 100%; }

/* ============================================================
   Zapisy — jedyny panel z formularzem
   ============================================================ */

.enrol {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  background: var(--paper-lit);
  border: 2px solid var(--ink);
  box-shadow: 8px 9px 0 0 color-mix(in srgb, var(--violet) 22%, transparent);
}
.enrol-label {
  font-family: var(--mono);
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: .5rem;
}
.enrol h2 { font-size: var(--t-h2); margin-bottom: .8rem; }
.enrol-meta { display: flex; flex-wrap: wrap; gap: .8rem 2rem; margin: 1.25rem 0 0; }
.enrol-meta div { border-top: var(--hair-2); padding-top: .5rem; min-width: 8rem; }
.enrol-meta dt { font: 600 var(--t-tiny) var(--display); color: var(--ink-faint); }
.enrol-meta dd { margin: 0; font: 700 1.05rem var(--display); letter-spacing: -.02em; }
.enrol-do { text-align: center; }
.btn--big { font-size: 1.2rem; padding: 1.15rem 2rem; width: 100%; justify-content: center; }
.enrol-note { margin-top: 1rem; font-size: var(--t-small); color: var(--ink-soft); line-height: 1.5; }

/* ============================================================
   Formularz zgłoszenia klasy (assets/js/zapisy.js)
   ============================================================ */

.enrol-form { max-width: 54rem; }
.form-part {
  border: 0;
  border-top: var(--hair-2);
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  padding: 1.25rem 0 0;
}
.form-part:first-of-type { border-top: 0; padding-top: 0; }
.form-info {
  max-width: 62ch;
  margin: 1rem 0 1.5rem;
  padding-left: .9rem;
  border-left: 3px solid var(--verdigris);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-soft);
}
.form-part legend {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-h3);
  color: var(--violet);
  padding: 0 .6rem 0 0;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1rem clamp(1rem, 2.5vw, 1.75rem);
  margin-top: 1rem;
}
.field { margin: 0; max-width: none; display: flex; flex-direction: column; gap: .35rem; }
/* .field ma display: flex, więc atrybut hidden musi być wymuszony — inaczej pola
   zależne (dostosowanie, wersja językowa) są widoczne mimo ukrycia */
.enrol-form [hidden], .szukaj [hidden] { display: none !important; }
.field--wide { grid-column: 1 / -1; }
.field label {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-small);
  letter-spacing: -.005em;
}
.field label b { color: var(--red); }
.field-hint {
  display: block;
  font-family: var(--text);
  font-weight: 400;
  font-size: var(--t-tiny);
  color: var(--ink-faint);
  line-height: 1.35;
}
.field input, .field select, .field textarea {
  font: 1rem/1.4 var(--text);
  color: var(--ink);
  background: var(--paper-lit);
  border: 1.5px solid color-mix(in srgb, var(--ink) 32%, transparent);
  border-radius: 3px;
  padding: .7rem .8rem;
  width: 100%;
  box-shadow: 1px 1px 0 0 color-mix(in srgb, var(--ink) 8%, transparent) inset;
}
.field textarea { resize: vertical; min-height: 5rem; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 1px;
  border-color: var(--violet);
}
.field.is-bad input, .field.is-bad select, .field.is-bad textarea { border-color: var(--red); background: color-mix(in srgb, var(--red) 6%, var(--paper-lit)); }
.field-err { font-family: var(--display); font-size: var(--t-tiny); font-weight: 600; color: var(--red); margin: 0; }
.field-err:empty { display: none; }

.field--check { flex-direction: row; margin-bottom: .9rem; }
.field--check label { display: flex; gap: .7rem; align-items: flex-start; font-weight: 400; font-family: var(--text); font-size: var(--t-small); line-height: 1.5; }
.field--check input { width: 1.4rem; height: 1.4rem; flex: none; margin-top: .1rem; accent-color: var(--violet); }
.field--check.is-bad label { color: var(--red); }
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-do { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: .5rem; }
.form-msg { margin: 0; font-family: var(--display); font-size: var(--t-small); font-weight: 600; max-width: 40ch; }
.form-msg:empty { display: none; }
.form-msg--bad { color: var(--red); }
.form-msg--info { color: var(--ink-soft); }
.form-foot { margin-top: 1.5rem; font-size: var(--t-small); color: var(--ink-soft); line-height: 1.55; max-width: 60ch; }

.enrol-ok {
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: var(--paper-lit);
  border: 2px solid var(--violet);
  box-shadow: 6px 7px 0 0 color-mix(in srgb, var(--violet) 18%, transparent);
  max-width: 44rem;
}
.enrol-ok-mark {
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--violet);
  color: var(--paper-lit);
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
.enrol-ok h3 { font-size: var(--t-h2); margin-bottom: .7rem; }
.enrol-ok p { font-size: var(--t-small); line-height: 1.6; }

/* ============================================================
   Lekcje — karty na stronie „Przygotuj się”
   ============================================================ */

.lessons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.lesson-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.5rem 1.4rem;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper-lit);
  border: 2px solid color-mix(in srgb, var(--violet) 55%, transparent);
  transition: transform .16s ease, box-shadow .16s ease;
}
.lesson-card:hover, .lesson-card:focus-visible {
  color: var(--ink);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 color-mix(in srgb, var(--violet) 26%, transparent);
}
.lesson-grp {
  font: 700 var(--t-tiny) var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
}
.lesson-card strong { font-family: var(--display); font-weight: 800; font-size: var(--t-h3); letter-spacing: -.03em; line-height: 1.1; }
.lesson-card > span { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.5; }
.lesson-card em { margin-top: auto; padding-top: .8rem; font: 600 var(--t-tiny) var(--display); color: var(--ink-faint); border-top: var(--hair); }

/* ============================================================
   Nagrania: YouTube po kliknięciu, link, archiwum
   ============================================================ */

.vids--tight { gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.vids--tight .vid { max-width: 28rem; }
.vid-frame { position: relative; overflow: hidden; border: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent); background: var(--ink); }
.vid-yt { display: block; width: 100%; padding: 0; cursor: pointer; }
.vid-yt img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.vid-play {
  position: absolute; inset: 0; margin: auto;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--paper-lit) 35%, transparent);
}
.vid-play::after {
  content: ""; position: absolute; left: 25px; top: 20px;
  border-left: 20px solid var(--paper-lit); border-top: 12px solid transparent; border-bottom: 12px solid transparent;
}
.vid-yt:hover .vid-play { transform: scale(1.06); }
.vid-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid-link { display: grid; place-items: center; text-decoration: none; color: var(--paper-lit); font: 700 1rem var(--display); }
.vid-who { display: block; font-size: var(--t-small); color: var(--ink-soft); line-height: 1.45; }
.vid p:last-child { font-size: var(--t-small); }
.ed-arch, .ed-vids { margin-top: 1.5rem; }
.ed-arch h3, .ed-vids h3 { font-size: var(--t-small); color: var(--ink-faint); margin-bottom: .7rem; letter-spacing: -.005em; }

/* zajawka kreatora postaci na „Przygotuj się” */
.creator-teaser {
  display: grid;
  grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.creator-teaser-pic { display: block; transform: rotate(-2deg); transition: transform .2s ease; }
.creator-teaser-pic:hover { transform: rotate(0) scale(1.02); }
.creator-teaser-pic img { width: 100%; border: 1.5px solid color-mix(in srgb, var(--ink) 35%, transparent); box-shadow: 6px 8px 0 0 color-mix(in srgb, var(--violet) 18%, transparent); background: var(--paper-lit); }
.creator-teaser-list { margin: 1rem 0 1.5rem; padding-left: 1.2rem; font-size: var(--t-small); color: var(--ink-soft); line-height: 1.55; }
.creator-teaser-list li + li { margin-top: .4rem; }
@media (max-width: 860px) { .creator-teaser { grid-template-columns: 1fr; } .creator-teaser-pic { max-width: 18rem; } }

/* oś „20 lat Gry” tylko z tytułami */
.jub--titles .jub-stage { padding-block: .9rem; }
.jub--titles .jub-body h3 { font-size: 1.1rem; }
.jub-todo { color: var(--ink-faint); font-style: italic; font-weight: 400; }
.jub-meta { font-family: var(--display); font-size: var(--t-tiny); font-weight: 600; color: var(--ink-faint); margin: .2rem 0 0; }
.jub--titles .jub-more { font-size: var(--t-small); }

/* ryciny z domeny publicznej */
.hist { margin: 0; }
.hist img { width: 100%; border: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent); }
.hist figcaption { font: 600 var(--t-tiny) var(--display); color: var(--ink-faint); padding-top: .5rem; }
.hist-src { font-weight: 400; }

.partner--logo img { max-height: 3.5rem; width: auto; object-fit: contain; }
.band-head--sub { margin-top: clamp(2rem, 4vw, 3rem); }
.band-head--sub h3 { font-size: var(--t-h3); }

@media (max-width: 1040px) {
  .icons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .icon-tile:nth-child(3) { border-right: 0; }
  .icon-tile:nth-child(-n+3) { border-bottom: var(--hair); }
  .enrol { grid-template-columns: 1fr; }
  .enrol-do { text-align: left; }
  .btn--big { width: auto; }
}
@media (max-width: 960px) {
  .mark .logo--mark { height: 38px; }
}
@media (max-width: 520px) {
  .icons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .icon-tile:nth-child(3) { border-right: var(--hair); }
  .icon-tile:nth-child(even) { border-right: 0; }
  .icon-tile:nth-child(-n+4) { border-bottom: var(--hair); }
  .icon-tile { padding: 1rem .4rem; font-size: var(--t-tiny); }
  .torn { max-width: none; }
  .teka-card a { min-height: 0; }
  .teka-card svg { display: none; }
}

/* ============================================================
   Lekcje interaktywne (assets/js/lekcja.js)
   ============================================================ */

@charset "utf-8";

/* ============================================================
   Śladami Niepodległości — lekcje przed grą (.lesson)
   Tylko tokeny z site.css: ten sam arkusz obsługuje wariant A,
   skórę B i palety. Kolory wprost wyłącznie w SVG mapki/odznaki.
   ============================================================ */

.lesson { max-width: 46rem; }
.lesson-loading { color: var(--ink-faint); font-family: var(--display); }
/* .btn ma display: inline-flex, co wygrywa z regułą [hidden] z arkusza przeglądarki */
.lesson [hidden] { display: none !important; }

/* --- nagłówek kroku: licznik i pasek postępu --- */
.lesson-head { margin-bottom: 1.1rem; }
.lesson-count {
  font-family: var(--display);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 .5rem;
}
.lesson-bar {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
  overflow: hidden;
}
.lesson-bar i {
  display: block;
  height: 100%;
  background: var(--red);
  border-radius: inherit;
  transition: width .35s ease;
}

/* --- karta kroku --- */
.lesson-card {
  background: color-mix(in srgb, var(--paper-lit) 80%, transparent);
  border: var(--hair-2);
  border-radius: 6px;
  padding: clamp(1.25rem, 3.5vw, 2.25rem);
  box-shadow: 4px 4px 0 0 color-mix(in srgb, var(--ink) 12%, transparent);
}
.lesson-kicker {
  font-family: var(--display);
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--violet);
  margin: 0 0 .6rem;
}
.lesson-title {
  font-size: var(--t-h2);
  margin-bottom: .9rem;
  outline-offset: 6px;
}
.lesson-text { max-width: var(--measure); }
.lesson-text b { font-family: var(--display); font-weight: 700; }
.lesson-text i { color: var(--brick); }
.lesson-lede { font-size: var(--t-lede); line-height: 1.5; }
.lesson-body { margin-top: 1.25rem; }

.lesson-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: var(--hair);
}
.lesson-meta div { margin: 0; }
.lesson-meta dt {
  font-family: var(--display);
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lesson-meta dd { margin: .2rem 0 0; font-family: var(--display); font-weight: 700; }

.lesson-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
  margin-top: 1.5rem;
  max-width: none;
}

/* --- informacja zwrotna --- */
.lesson-feedback {
  margin: 1.25rem 0 0;
  padding: 0;
  font-size: var(--t-small);
  line-height: 1.55;
  max-width: none;
  color: var(--ink-soft);
}
.lesson-feedback:empty { display: none; }
.lesson-feedback.is-right,
.lesson-feedback.is-wrong,
.lesson-feedback.is-half,
.lesson-feedback.is-empty {
  padding: .85rem 1.1rem;
  border-left: 3px solid var(--ink-faint);
  background: color-mix(in srgb, var(--paper) 70%, transparent);
}
.lesson-feedback.is-right { border-left-color: var(--verdigris); }
.lesson-feedback.is-wrong { border-left-color: var(--red); }
.lesson-feedback.is-half  { border-left-color: var(--brick); }
.lesson-feedback.is-empty { border-left-color: var(--violet); }

/* --- opcje: duże przyciski --- */
.lesson-options { display: grid; gap: .6rem; }

.lesson-opt {
  font: 700 1rem/1.35 var(--display);
  text-align: left;
  color: var(--ink);
  background: var(--paper-lit);
  border: 0;
  border-radius: 4px;
  padding: .85rem 1.1rem .85rem 2.6rem;
  cursor: pointer;
  position: relative;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ink) 40%, transparent) inset;
  transition: box-shadow .12s ease, background-color .12s ease, transform .12s ease;
}
.lesson-opt::before {
  content: "";
  position: absolute;
  left: .95rem;
  top: 50%;
  width: .95rem;
  height: .95rem;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--ink) 55%, transparent);
  background: transparent;
}
.lesson-opt:hover { box-shadow: 0 0 0 2px var(--violet) inset; }
.lesson-opt[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--violet) inset;
  background: color-mix(in srgb, var(--violet) 12%, var(--paper-lit));
}
.lesson-opt[aria-pressed="true"]::before {
  border-color: var(--violet);
  background: var(--violet);
  box-shadow: 0 0 0 3px var(--paper-lit) inset;
}
.lesson-opt:disabled { cursor: default; }

.lesson-opt.is-right {
  box-shadow: 0 0 0 2px var(--verdigris) inset;
  background: color-mix(in srgb, var(--verdigris) 16%, var(--paper-lit));
}
.lesson-opt.is-right::before { border-color: var(--verdigris); background: var(--verdigris); box-shadow: 0 0 0 3px var(--paper-lit) inset; }
.lesson-opt.is-wrong {
  box-shadow: 0 0 0 2px var(--red) inset;
  background: color-mix(in srgb, var(--red) 12%, var(--paper-lit));
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.lesson-opt.is-wrong::before { border-color: var(--red); }
.lesson-opt.is-done {
  opacity: .55;
  box-shadow: 0 0 0 1.5px var(--verdigris) inset;
  background: color-mix(in srgb, var(--verdigris) 12%, var(--paper-lit));
}
.lesson-opt.is-done::before { border-color: var(--verdigris); background: var(--verdigris); box-shadow: 0 0 0 3px var(--paper-lit) inset; }

.lesson-opt--sm { padding: .55rem .9rem .55rem 2.2rem; font-size: var(--t-small); }
.lesson-opt--sm::before { left: .75rem; width: .8rem; height: .8rem; }

/* migotanie błędnej pary */
.lesson-opt.is-flash { animation: lesson-flash .45s ease; }
@keyframes lesson-flash {
  0%, 100% { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ink) 40%, transparent) inset; transform: translateX(0); }
  20%, 60% { box-shadow: 0 0 0 2.5px var(--red) inset; transform: translateX(-3px); }
  40%, 80% { box-shadow: 0 0 0 2.5px var(--red) inset; transform: translateX(3px); }
}

/* --- prawda / fałsz --- */
.lesson-tf { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.lesson-tf-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .6rem 1rem;
  align-items: center;
  padding: .7rem 0;
  border-top: var(--hair);
}
.lesson-tf-row:last-child { border-bottom: var(--hair); }
.lesson-tf-text { font-size: var(--t-body); line-height: 1.45; }
.lesson-tf-btns { display: inline-flex; gap: .4rem; }
.lesson-tf-row.is-right .lesson-tf-text::before,
.lesson-tf-row.is-wrong .lesson-tf-text::before {
  font-family: var(--display);
  font-weight: 800;
  margin-right: .5rem;
}
.lesson-tf-row.is-right .lesson-tf-text::before { content: "✓"; color: var(--verdigris); }
.lesson-tf-row.is-wrong .lesson-tf-text::before { content: "✕"; color: var(--red); }

/* --- dopasuj: dwie kolumny --- */
.lesson-match {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem 1rem;
}
.lesson-match-col { display: grid; gap: .6rem; align-content: start; }
.lesson-opt--match { padding-left: 1.1rem; font-weight: 600; font-size: var(--t-small); }
.lesson-opt--match::before { display: none; }
.lesson-opt--match[aria-pressed="true"] { transform: translate(-2px, -2px); }
.lesson-match-status,
.lesson-map-status {
  font-family: var(--display);
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin: .9rem 0 0;
  min-height: 1.4em;
  max-width: none;
}

/* --- kolejność: strzałki ▲▼ --- */
.lesson-order { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; counter-reset: none; }
.lesson-order-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  padding: .6rem .8rem;
  background: var(--paper-lit);
  border-radius: 4px;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ink) 30%, transparent) inset;
}
.lesson-order-n { font-family: var(--display); font-weight: 800; color: var(--ink-faint); min-width: 1.4em; }
.lesson-order-text { font-family: var(--display); font-weight: 600; line-height: 1.35; }
.lesson-order-btns { display: inline-flex; gap: .3rem; }
.lesson-move {
  font: 700 .9rem/1 var(--display);
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 4px;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 8%, var(--paper-lit));
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ink) 40%, transparent) inset;
  cursor: pointer;
}
.lesson-move:hover:not(:disabled) { color: var(--paper-lit); background: var(--violet); }
.lesson-move:disabled { opacity: .35; cursor: default; }
.lesson-order-row.is-right { box-shadow: 0 0 0 2px var(--verdigris) inset; }
.lesson-order-row.is-wrong { box-shadow: 0 0 0 2px var(--red) inset; }
.lesson-key-label {
  font-family: var(--display);
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--ink-soft);
  margin: 1.2rem 0 .5rem;
}
.lesson-order--key { list-style: decimal; padding-left: 1.6rem; gap: .25rem; }
.lesson-order--key li { font-size: var(--t-small); color: var(--ink-soft); }

/* --- luka: select w zdaniu --- */
.lesson-gap { font-size: var(--t-lede); line-height: 1.8; max-width: none; }
.lesson-select {
  font: 700 1rem/1.3 var(--display);
  color: var(--ink);
  background: var(--paper-lit);
  border: 0;
  border-radius: 4px;
  padding: .45rem 2rem .45rem .8rem;
  margin: 0 .2em;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ink) 45%, transparent) inset;
  cursor: pointer;
  vertical-align: baseline;
  max-width: 100%;
}
.lesson-select.is-right { box-shadow: 0 0 0 2px var(--verdigris) inset; }
.lesson-select.is-wrong { box-shadow: 0 0 0 2px var(--red) inset; text-decoration: line-through; }
.lesson-gap-answer { font-family: var(--display); font-size: var(--t-small); font-weight: 700; color: var(--verdigris); }

/* --- mapka 1846 --- */
.lesson-map {
  max-width: 32rem;
  border: var(--hair-2);
  border-radius: 4px;
  overflow: hidden;
  background: var(--paper-lit);
}
.lesson-map-svg { display: block; width: 100%; height: auto; }
.lesson-map a { cursor: pointer; outline: none; }
/* obszary leżą na rysunku — podświetla je przezroczystość wypełnienia, nie kolor */
.lesson-map a > path:first-child,
.lesson-map a > rect:first-child { fill-opacity: .02; transition: fill-opacity .12s ease, stroke .12s ease; }
.lesson-map a:hover > path:first-child,
.lesson-map a:hover > rect:first-child { fill-opacity: .2; }
.lesson-map a:focus-visible > path:first-child,
.lesson-map a:focus-visible > rect:first-child,
.lesson-map a.is-picked > path:first-child,
.lesson-map a.is-picked > rect:first-child {
  fill-opacity: .26;
  stroke: var(--violet);
  stroke-width: 4;
  stroke-opacity: 1;
  stroke-dasharray: none;
}
.lesson-map a.is-right > path:first-child,
.lesson-map a.is-right > rect:first-child { fill-opacity: .26; stroke: var(--verdigris); stroke-width: 4; stroke-opacity: 1; stroke-dasharray: none; }
.lesson-map a.is-wrong > path:first-child,
.lesson-map a.is-wrong > rect:first-child { fill-opacity: .22; stroke: var(--red); stroke-width: 4; stroke-opacity: 1; stroke-dasharray: 6 3; }
.lesson-map a[aria-disabled="true"] { cursor: default; }
.lesson-map-legend { font-size: var(--t-small); color: var(--ink-faint); margin: .6rem 0 0; }

/* --- dyskusja --- */
.lesson-questions { padding-left: 1.4rem; margin: 0; display: grid; gap: .7rem; }
.lesson-questions li { font-size: var(--t-lede); line-height: 1.5; max-width: var(--measure); }
.lesson-questions li::marker { font-family: var(--display); font-weight: 800; color: var(--violet); }

/* --- ekran końcowy i odznaka --- */
.lesson-card--end { text-align: center; }
.lesson-card--end .lesson-text,
.lesson-card--end .lesson-score { margin-inline: auto; }
.lesson-card--end .lesson-actions { justify-content: center; }
.lesson-score { font-family: var(--display); font-size: var(--t-lede); margin-bottom: 1.25rem; }
.lesson-score b { color: var(--red); }
.lesson-badge {
  width: min(13rem, 60vw);
  margin: 0 auto 1.25rem;
  filter: drop-shadow(2px 3px 0 color-mix(in srgb, var(--ink) 25%, transparent));
}
.lesson-badge svg { display: block; width: 100%; height: auto; }
.lesson-card--end .lesson-badge { animation: lesson-stamp .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes lesson-stamp {
  from { transform: scale(1.6) rotate(-8deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}

/* --- notatka dla nauczyciela --- */
.lesson-teacher {
  max-width: 46rem;
  margin-top: 2rem;
  border-top: var(--hair-2);
  border-bottom: var(--hair-2);
}
.lesson-teacher summary {
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  padding: .9rem 0;
  list-style: none;
  position: relative;
}
.lesson-teacher summary::-webkit-details-marker { display: none; }
.lesson-teacher summary::after {
  content: "";
  position: absolute;
  right: .4rem;
  top: 50%;
  width: .55rem;
  height: .55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .15s ease;
}
.lesson-teacher[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.lesson-teacher summary:hover { color: var(--red); }
.lesson-teacher p { padding: 0 0 1.1rem; font-size: var(--t-small); color: var(--ink-soft); max-width: 60ch; }

/* --- RWD --- */
@media (max-width: 560px) {
  .lesson-match { grid-template-columns: 1fr; }
  .lesson-match-col + .lesson-match-col { border-top: var(--hair); padding-top: .6rem; }
  .lesson-tf-row { grid-template-columns: 1fr; }
  .lesson-order-row { grid-template-columns: auto minmax(0, 1fr); }
  .lesson-order-btns { grid-column: 2; justify-self: end; }
  .lesson-actions .btn { width: 100%; justify-content: center; }
}

/* --- ruch --- */
@media (prefers-reduced-motion: reduce) {
  .lesson-bar i, .lesson-opt, .lesson-map a > path:first-child, .lesson-map a > rect:first-child { transition: none; }
  .lesson-opt.is-flash { animation: none; box-shadow: 0 0 0 2.5px var(--red) inset; }
  .lesson-card--end .lesson-badge { animation: none; }
  .lesson-opt--match[aria-pressed="true"] { transform: none; }
}

/* ============================================================
   Kreator postaci (assets/js/postac.js)
   ============================================================ */

@charset "utf-8";

/* ============================================================
   Śladami Niepodległości — kreator postaci (.creator)
   Tylko tokeny z site.css: ten sam plik obsługuje cztery skóry.
   Kolory postaci (--p-skin, --p-hair, --p-cloth) ustawia JS
   na .creator; wartości domyślne są w atrybucie style w HTML.
   ============================================================ */

.creator {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

/* ---------- podgląd / karta ---------- */

.creator-stage {
  position: sticky;
  top: calc(var(--bar) + 1rem);
}

.creator-card {
  background: var(--paper-lit);
  border: var(--hair-2);
  box-shadow: 3px 3px 0 0 color-mix(in srgb, var(--ink) 78%, transparent);
  padding: .55rem;
  position: relative;
}
.creator-card::before {
  content: "";
  position: absolute;
  inset: .3rem;
  border: 1px dashed color-mix(in srgb, var(--violet) 55%, transparent);
  pointer-events: none;
}

.creator-svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 520;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  background: var(--paper-lit);
}
.creator-svg text { font-family: var(--display), sans-serif; }

.creator-badges {
  list-style: none;
  margin: .6rem 0 0;
  padding: 0 .3rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  font-family: var(--display);
  font-size: var(--t-tiny);
  font-weight: 700;
  color: var(--violet);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.creator-badges li::before {
  content: "";
  display: inline-block;
  width: .7em;
  height: .7em;
  border-radius: 50%;
  margin-right: .4em;
  background: var(--violet);
  vertical-align: -.02em;
}

.creator-who { margin-top: 1.5rem; }
.creator-who h2 {
  font-size: var(--t-h3);
  margin-bottom: .5rem;
}
.creator-who p {
  font-size: var(--t-small);
  color: var(--ink-soft);
  max-width: 48ch;
  border-left: 3px solid var(--violet);
  padding-left: 1rem;
}

/* ---------- panel wyboru ---------- */

.creator-panel { min-width: 0; }

.creator-group {
  border: 0;
  border-top: var(--hair-2);
  margin: 0 0 1.4rem;
  padding: .9rem 0 0;
  min-width: 0;
}
.creator-group legend {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-h3);
  letter-spacing: -.02em;
  padding: 0 .4rem 0 0;
  float: left;            /* legend nad kreską, kreska pod nim */
  width: 100%;
  margin-bottom: .7rem;
}
.creator-group legend + * { clear: both; }

.creator-opts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr));
  gap: .55rem;
}
.creator-opts--wide { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
.creator-opts--swatch { grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); }
.creator-opts--sub { margin-top: .7rem; }

.creator-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .45rem .3rem .5rem;
  background: color-mix(in srgb, var(--paper-lit) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  font-family: var(--display);
  font-size: var(--t-tiny);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink-soft);
  user-select: none;
  transition: border-color .13s ease, box-shadow .13s ease, transform .13s ease;
}
.creator-opt:hover {
  border-color: color-mix(in srgb, var(--ink) 55%, transparent);
  color: var(--ink);
}

/* radio ukryte wizualnie, ale dostępne z klawiatury */
.creator-opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.creator-opt svg {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  background: var(--paper);
  border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.creator-opt--hair svg  { color: var(--p-hair); }
.creator-opt--cloth svg { color: var(--p-cloth); }
.creator-opts--wide .creator-opt svg { aspect-ratio: 400 / 520; }

/* próbka koloru */
.creator-opt--sw::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 1.6;
  border-radius: 3px;
  background: var(--sw);
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--paper-lit) 60%, transparent);
}

/* stan wybrany — przez :has, z zapasem na rodzeństwo */
.creator-opt:has(input:checked),
.creator-opt input:checked ~ svg,
.creator-opt input:checked ~ span {
  color: var(--ink);
}
.creator-opt:has(input:checked) {
  border-color: var(--violet);
  box-shadow: 0 0 0 2px var(--violet), 2px 2px 0 0 color-mix(in srgb, var(--ink) 70%, transparent);
  background: var(--paper-lit);
}
.creator-opt input:checked ~ svg { outline: 2px solid var(--violet); outline-offset: -2px; }
.creator-opt input:checked ~ span { font-weight: 800; }

/* fokus klawiatury — na całej etykiecie */
.creator-opt:has(input:focus-visible) {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
}
.creator-opt input:focus-visible ~ svg,
.creator-opt input:focus-visible ~ span { text-decoration: underline; }

/* ---------- pola tekstowe ---------- */

.creator-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6rem;
  gap: .9rem;
}
.creator-field {
  margin: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.creator-fields .creator-field:last-child { grid-column: 1 / -1; }
.creator-field label {
  font-family: var(--display);
  font-size: var(--t-small);
  font-weight: 700;
}
.creator-field label small {
  font-weight: 500;
  color: var(--ink-faint);
  font-size: var(--t-tiny);
}
.creator-field input,
.creator-field select {
  font: var(--t-body)/1.4 var(--text);
  color: var(--ink);
  background: var(--paper-lit);
  border: var(--hair-2);
  border-radius: 4px;
  padding: .6rem .8rem;
  min-width: 0;
  width: 100%;
}
.creator-field input::placeholder { color: var(--ink-faint); }
.creator-field input:focus-visible,
.creator-field select:focus-visible {
  border-color: var(--violet);
  outline: 3px solid var(--violet);
  outline-offset: 1px;
}

/* ---------- akcje i komunikat ---------- */

.creator-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.6rem;
}
.creator-actions .btn { font-size: .95rem; padding: .8rem 1.25rem; }
.creator-actions .btn:disabled { opacity: .55; cursor: wait; transform: none; }

/* zapis karty postaci na serwerze: krótki kod zamiast konta */
.creator-kod {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: var(--hair);
  display: grid;
  gap: .7rem;
}
.creator-kod-lede { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.5; max-width: 46ch; margin: 0; }
.creator-kod-do { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: 0; }
.creator-kod-out { font-size: var(--t-small); color: var(--ink-soft); }
.creator-kod-out b { font-family: var(--mono); font-size: 1.05rem; letter-spacing: .16em; color: var(--red); }
.creator-kod-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.creator-kod-row input {
  width: 11rem;
  font-family: var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.creator-msg {
  min-height: 1.5em;
  margin: 1rem 0 0;
  font-family: var(--display);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--verdigris);
  max-width: none;
}
.creator-msg.is-error { color: var(--red); }

/* ---------- mrugnięcie po losowaniu ---------- */

.creator.is-shuffled .creator-svg { animation: creator-pop .38s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes creator-pop {
  0%   { transform: scale(.97) rotate(-.6deg); }
  60%  { transform: scale(1.012) rotate(.3deg); }
  100% { transform: none; }
}

/* ---------- RWD ---------- */

@media (max-width: 960px) {
  .creator { grid-template-columns: 1fr; }
  .creator-stage { position: static; }
  .creator-card { max-width: 26rem; }
}
@media (max-width: 520px) {
  .creator-opts { grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: .4rem; }
  .creator-opts--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creator-opts--swatch { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .creator-fields { grid-template-columns: 1fr; }
  .creator-actions .btn { flex: 1 1 calc(50% - .7rem); justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .creator.is-shuffled .creator-svg { animation: none; }
  .creator-opt { transition: none; }
}

/* ---------- wydruk: tylko karta postaci, A5 ---------- */

@media print {
  @page { size: A5 portrait; margin: 10mm; }

  body.is-page > :not(main),
  main > :not(.creator-band),
  .creator-band > :not(.creator),
  .creator > :not(.creator-stage),
  .creator-stage .creator-msg { display: none !important; }

  .creator-band { padding: 0 !important; }
  .creator { display: block; }
  .creator-stage { position: static; }
  .creator-card {
    max-width: none;
    width: 100%;
    box-shadow: none;
    border: 1px solid #000;
    break-inside: avoid;
  }
  .creator-svg { border: 0; }
  .creator-badges { color: #000; }
  .creator-badges li::before { background: #000; }
  .creator-who { margin-top: 6mm; }
  .creator-who h2 { font-size: 12pt; }
  .creator-who p { font-size: 10pt; color: #000; border-left-color: #000; max-width: none; }
}

/* ============================================================
   RWD
   ============================================================ */

@media (max-width: 1320px) {
  /* poniżej tej szerokości nazwa słowna nie mieści się obok menu; zostaje znak
     (link ma aria-label z pełną nazwą) */
  .mark-words { display: none; }
}
@media (max-width: 1460px) {
  .mark-words > span { display: none; }
  .mark-words b { font-size: .96rem; }
}
@media (max-width: 1200px) {
  .nav a { font-size: .74rem; padding: .5rem .35rem; }
}
@media (max-width: 1120px) {
  /* pas tuż nad burgerem: menu musi się zmieścić razem z przyciskiem i znakiem */
  .nav a { font-size: .7rem; padding: .5rem .25rem; letter-spacing: .03em; }
  .nav .btn { margin-left: .3rem; padding: .5rem .7rem; font-size: .72rem; }
  .mark .logo--mark { height: 40px; }
}

@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  /* .hero-say ma order: 1, więc karta bez kolejności wskakiwałaby nad tekst */
  .wkrotce-obok { order: 2; justify-content: flex-start; padding-top: 0; }
  .hero-say { order: 1; }
  .hero-map { order: 2; }
  /* pieczec zostaje na naroznku mapy, ale nie wchodzi w przyciski nad nia */
  .seal {
    width: clamp(96px, 21vw, 140px);
    top: -1.25rem;
    right: -.5rem;
  }
  .about { grid-template-columns: 1fr; }
  .dlc { grid-template-columns: 1fr; }
  .dlc-pic { max-width: 34rem; }
  .story { grid-template-columns: 1fr; gap: 1.5rem; }
  .story-stage { top: var(--bar); z-index: 2; }
  .stage-card { padding: .8rem 1rem; background: var(--paper-lit); }
  .stage-map { max-height: 30vh; }
  .story-chapter { min-height: 0; padding-block: 2rem; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .burger { display: block; }
  .mark-words { display: block; }
  .mark-words > span { display: block; }
  .nav {
    position: fixed;
    inset: var(--bar) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper-lit);
    border-bottom: var(--hair-2);
    box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--ink) 45%, transparent);
    padding: .5rem var(--gutter) 1.5rem;
    max-height: calc(100dvh - var(--bar));
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform .2s ease, opacity .2s ease, visibility .2s;
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav a { padding: .85rem .2rem; border-bottom: var(--hair); font-size: 1.05rem; white-space: normal; }
  .nav a[aria-current="page"] { box-shadow: none; }
  .nav .btn { margin: 1rem 0 0; justify-content: center; }
}

@media (max-width: 860px) {
  .band-head { grid-template-columns: 1fr; align-items: start; }
  .pagehead-in { grid-template-columns: 1fr; align-items: start; }
  .band-head .band-note { text-align: left; max-width: 40ch; }
  .clock-units { margin-left: 0; width: 100%; justify-content: space-between; }
  .jub::before { left: 2.3rem; }
  .jub-stage { grid-template-columns: 4.6rem minmax(0, 1fr); }
  .jub-year b { width: 4.6rem; font-size: 1rem; }
  .ed { grid-template-columns: 1fr; gap: .5rem; }
  .ed-side { display: flex; align-items: baseline; gap: .8rem; }
  .ed .ed-roman { font-size: 2rem; margin: 0; }
  .lightbox-cap { inset-inline: 1rem; bottom: 4.5rem; }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 1rem; transform: none; }
}

@media (max-width: 520px) {
  .hero-when { gap: 1.25rem; }
  .hero-when div { min-width: 0; flex: 1 1 8rem; }
  .clock-units div { min-width: 0; }
  .years-slot { width: 2.9rem; }
  .years-item { font-size: .7rem; }
  .bento { grid-template-columns: 1fr; }
  .bento-wide { grid-column: auto; }
  .film .ph img { height: 140px; }
  .dlc-meta > div { grid-template-columns: 1fr; gap: .15rem; }
  .ed-meta > div { grid-template-columns: 1fr; gap: .15rem; }
}

/* ============================================================
   Ruch
   ============================================================ */

/* stan startowy sekwencji hero — zdejmowany klasą .is-drawn */
.js .hero-map .route { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .hero-map .cp { opacity: 0; }
.js .seal { opacity: 0; transform: rotate(-11deg) scale(1.55); }

.hero.is-drawn .route {
  animation: draw 2.3s cubic-bezier(.55,.05,.35,1) .35s forwards;
}
.hero.is-drawn .cp { animation: land .38s cubic-bezier(.2,1.5,.4,1) forwards; }
.hero.is-drawn .cp:nth-of-type(1) { animation-delay: .55s; }
.hero.is-drawn .cp:nth-of-type(2) { animation-delay: .95s; }
.hero.is-drawn .cp:nth-of-type(3) { animation-delay: 1.35s; }
.hero.is-drawn .cp:nth-of-type(4) { animation-delay: 1.85s; }
.hero.is-drawn .cp:nth-of-type(5) { animation-delay: 2.45s; }
.hero.is-drawn .seal { animation: thud .42s cubic-bezier(.3,1.7,.45,1) 2.85s forwards; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes land { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
@keyframes thud {
  0%   { opacity: 0; transform: rotate(-11deg) scale(1.55); }
  70%  { opacity: .95; transform: rotate(-11deg) scale(.97); }
  100% { opacity: .93; transform: rotate(-11deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero-map .route { stroke-dashoffset: 0; }
  .js .hero-map .cp { opacity: 1; }
  .js .seal { opacity: .93; transform: rotate(-11deg) scale(1); }
  .hero.is-drawn .route,
  .hero.is-drawn .cp,
  .hero.is-drawn .seal { animation: none; }
  .timeline-track::after { transition: none; }
  .film { overflow-x: auto; mask-image: none; -webkit-mask-image: none; scrollbar-width: thin; }
  .film-track { animation: none; }
  .film-track[aria-hidden="true"] { display: none; }
  .story-chapter { opacity: 1; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

@media print {
  .topbar, .burger, .btn, .lightbox, .film, .foot-alt, .intro, .icons { display: none !important; }
  body { background: #fff; }
  body::after { display: none; }
  .story-chapter { opacity: 1; min-height: 0; }
}

/* ============================================================
   SKÓRA „Kraków 1846” (obowiązująca od 8 IX 2026): kremowy papier, granat i karmin,
   fotografie Kriegera, pismo odręczne, lakowe pieczęcie.
   Te same komponenty, inne tokeny + detale.
   ============================================================ */

:root[data-skin="1846"] {
  /* Paleta „krakowiak”: kobalt kamizeli, czerwień krakuski i korali, mosiądz ćwieków,
     zieleń pawiego pióra, biel lnianej koszuli. */
  --paper:        #f1e8d6;      /* len */
  --paper-lit:    #fdfaf2;      /* biel koszuli */
  --paper-deep:   #ded1b4;
  --ink:          #1e2230;
  --ink-soft:     #4b5061;
  --ink-faint:    #7e8494;
  --violet:       #1d3c74;      /* kobalt kamizeli — rola granatu */
  --violet-lit:   #2d5aa8;
  --red:          #c1121f;      /* krakuska i korale */
  --verdigris:    #0f6f66;      /* pawie pióro */
  --brick:        #6d4326;      /* skórzany pas */
  --gold:         #c08a2e;      /* mosiądz ćwieków */
  --navy:         #1d3c74;
  --map-city:     #e6dabc;
  --water:        #9fb8cc;
  --water-deep:   #47617a;
  /* papier kart i pasm — trzymane w tokenach, żeby paleta mogła je podmienić */
  --card-a:       #fdfaf2;
  --card-b:       #f2e8d2;
  --card-c:       #ecdfc0;
  --sky:          #142a52;
  --seal-text:    #fdf0e4;

  --logo-red:   #c1121f;
  --logo-text:  #c1121f;
  --logo-grey:  #9a9a96;
  --logo-paper: #fdfaf2;

  --display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --text:    "Lora", Georgia, serif;
  --mono:    "Playfair Display", Georgia, serif;
  --script:  "Caveat", "Segoe Script", cursive;

  --hair:    1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  --hair-2:  1px solid color-mix(in srgb, var(--ink) 30%, transparent);
}

[data-skin="1846"] h1, [data-skin="1846"] h2, [data-skin="1846"] h3, [data-skin="1846"] h4 {
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1.05;
}
[data-skin="1846"] h2 { color: var(--navy); }
[data-skin="1846"] .hero h1 { letter-spacing: -.03em; line-height: .92; color: var(--navy); }
[data-skin="1846"] .hero h1 .l2 { color: var(--red); }

/* włókna papieru + winieta zamiast ziarna */
[data-skin="1846"] body::after {
  opacity: 1;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(ellipse at center, transparent 55%, rgba(90,60,20,.16) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
}
[data-skin="1846"] a { color: var(--red); }
[data-skin="1846"] a:hover { color: var(--navy); }
[data-skin="1846"] :focus-visible { outline-color: var(--red); }
[data-skin="1846"] ::selection { background: color-mix(in srgb, var(--red) 22%, transparent); }

/* pociągnięcie pędzla pod nagłówkami sekcji */
[data-skin="1846"] .band-head h2, [data-skin="1846"] .pagehead h1, [data-skin="1846"] .enrol h2 {
  position: relative;
  display: inline-block;
  padding-bottom: .55rem;
}
[data-skin="1846"] .band-head h2::after, [data-skin="1846"] .pagehead h1::after, [data-skin="1846"] .enrol h2::after {
  content: "";
  position: absolute;
  left: -.2rem; right: 10%; bottom: 0;
  height: .55rem;
  background: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 40 3 90 9 150 5 S 260 8 298 4' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' opacity='.85'/%3E%3Cpath d='M6 9 C 60 7 120 10 200 7 S 270 9 292 8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E") no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 40 3 90 9 150 5 S 260 8 298 4' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' opacity='.85'/%3E%3Cpath d='M6 9 C 60 7 120 10 200 7 S 270 9 292 8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E") no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
[data-skin="1846"] .band-head .band-note { font-family: var(--script); font-weight: 500; font-size: 1.15rem; color: var(--ink-soft); letter-spacing: 0; line-height: 1.2; }

/* belka */
[data-skin="1846"] .topbar { background: color-mix(in srgb, var(--paper) 92%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--navy) 22%, transparent); }
[data-skin="1846"] .nav a { color: var(--navy); }
[data-skin="1846"] .nav a[aria-current="page"] { color: var(--red); box-shadow: 0 2px 0 var(--red); }
/* .nav a ma wyższą specyficzność niż .btn — bez tego napis na przycisku jest granatowy */
[data-skin="1846"] .nav a.btn, [data-skin="1846"] .nav a.btn:hover { color: var(--paper-lit); }
[data-skin="1846"] .mark-words b { font-family: var(--display); font-weight: 900; color: var(--navy); }
[data-skin="1846"] .mark-words > span { font-family: var(--script); font-size: 1rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
[data-skin="1846"] .progress { background: var(--red); }

/* przyciski: karmin z lekkim światłem, jak na plakacie */
[data-skin="1846"] .btn {
  color: var(--paper-lit);
  border-radius: 4px;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .92rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--btn-ink) 88%, #fff), var(--btn-ink) 55%, color-mix(in srgb, var(--btn-ink) 80%, #000));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--btn-ink) 70%, #000) inset, 0 1px 0 rgba(255,255,255,.25) inset, 0 4px 10px -4px rgba(0,0,0,.45);
  transform: none;
}
[data-skin="1846"] .btn:hover { color: var(--paper-lit); transform: translateY(-1px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--btn-ink) 70%, #000) inset, 0 6px 14px -5px rgba(0,0,0,.5); }
[data-skin="1846"] .btn:active { transform: translateY(1px); }
[data-skin="1846"] .btn--quiet { background: transparent; color: var(--navy); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--navy) 60%, transparent) inset; }
[data-skin="1846"] .btn--quiet:hover { background: var(--navy); color: var(--paper-lit); box-shadow: none; }
[data-skin="1846"] .btn--violet { --btn-ink: var(--navy); }

/* pasma: zagięcie → cienka linia, wcięcie → ciemniejszy pergamin */
[data-skin="1846"] .band--creased::before { height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--navy) 35%, transparent) 20% 80%, transparent); }
[data-skin="1846"] .band--sunk::after { background: color-mix(in srgb, var(--paper-deep) 70%, var(--paper)); box-shadow: 0 0 60px -20px rgba(90,60,20,.25) inset; }

/* hero: fotografia Kriegera wygaszona do papieru, herb w lakowej pieczęci */
[data-skin="1846"] .hero { padding-top: 0; }
[data-skin="1846"] .hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: min(78%, 780px);
  background: url("../img/hist/rynek-1872.jpg") center 30% / cover no-repeat;
  opacity: .28;
  filter: sepia(1) contrast(.9);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  pointer-events: none;
}
[data-skin="1846"] .hero-sheet { padding-top: clamp(2.5rem, 5vw, 4.5rem); }
[data-skin="1846"] .hero-edition { font-family: var(--display); color: var(--red); text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; }
[data-skin="1846"] .hero-edition b { font-size: 1.6em; }
[data-skin="1846"] .hero-motto { font-family: var(--script); text-transform: none; letter-spacing: 0; font-size: 1.25rem; font-weight: 500; color: var(--ink-soft); border-left-color: color-mix(in srgb, var(--red) 40%, transparent); }
[data-skin="1846"] .hero-lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); }
[data-skin="1846"] .hero-when dt { font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; }
[data-skin="1846"] .hero-when dd { color: var(--navy); }
[data-skin="1846"] .torn { font-family: var(--script); transform: rotate(-2deg); background: var(--card-a); box-shadow: 3px 5px 12px -6px rgba(0,0,0,.45); }
[data-skin="1846"] .torn p { font-family: var(--script); font-style: normal; font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.25; color: var(--navy); }
[data-skin="1846"] .torn p::after { content: ""; display: block; width: 6rem; height: .35rem; margin-top: .4rem; background: var(--red); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C 30 2 60 7 98 3' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C 30 2 60 7 98 3' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
/* kartka z tematem edycji: pismo odręczne zostaje tylko w podpisie, sam temat
   ma być czytelny — nadpisujemy regułę skóry dla cytatu */
[data-skin="1846"] .torn--temat .torn-label { font-family: var(--display); font-size: var(--t-tiny); color: var(--ink-faint); }
[data-skin="1846"] .torn--temat .torn-temat { font-family: var(--display); font-weight: 800; font-size: clamp(1.55rem, 2.7vw, 2.1rem); line-height: 1.1; color: var(--navy); }
[data-skin="1846"] .torn--temat .torn-kontekst { font-family: var(--text); font-size: var(--t-small); color: var(--ink-soft); }
[data-skin="1846"] .torn--temat p::after { display: none; }
[data-skin="1846"] .torn--temat .torn-temat::after {
  content: "";
  display: block;
  width: 8rem; height: .4rem;
  margin-top: .45rem;
  background: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C 30 2 60 7 98 3' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C 30 2 60 7 98 3' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}

/* mapa jak rycina */
[data-skin="1846"] .map-frame { background: linear-gradient(180deg, var(--card-a), var(--card-c)); border-color: color-mix(in srgb, var(--brick) 55%, transparent); box-shadow: 0 12px 30px -18px rgba(60,40,10,.6), 6px 7px 0 0 color-mix(in srgb, var(--navy) 10%, transparent); }
[data-skin="1846"] .map-frame::before { border-color: color-mix(in srgb, var(--brick) 35%, transparent); }
[data-skin="1846"] .hero-map text { font-family: var(--display); }
[data-skin="1846"] .hero-map .cp circle { fill: var(--navy); }
[data-skin="1846"] .hero-map .map-new rect { fill: var(--red); }

/* lakowa pieczęć XX */
[data-skin="1846"] .seal { color: var(--red); mix-blend-mode: normal; opacity: 1; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
[data-skin="1846"] .seal svg circle:first-of-type { fill: color-mix(in srgb, var(--red) 92%, #000); stroke: color-mix(in srgb, var(--red) 70%, #000); }
[data-skin="1846"] .seal svg circle:nth-of-type(2) { stroke: color-mix(in srgb, var(--red) 60%, #fff); }
[data-skin="1846"] .seal svg text { fill: var(--seal-text); }
[data-skin="1846"] .seal svg g { fill: var(--seal-text); }

/* odliczanie w granatowych kaflach */
[data-skin="1846"] .clock { border-color: color-mix(in srgb, var(--navy) 30%, transparent); }
/* hasło i podpis po lewej mają trzymać ten sam rytm, co podpisy pod liczbami */
[data-skin="1846"] .clock-say { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--navy); }
[data-skin="1846"] .clock-say em { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: var(--t-tiny); color: var(--ink-faint); }
[data-skin="1846"] .clock-units div { background: var(--navy); color: var(--paper-lit); padding: .7rem .6rem .6rem; border-radius: 4px; min-width: 5rem; box-shadow: 0 4px 10px -5px rgba(0,0,0,.5); }
[data-skin="1846"] .clock-units b { font-family: var(--display); font-weight: 700; color: var(--paper-lit); letter-spacing: 0; }
[data-skin="1846"] .clock-units span { color: color-mix(in srgb, var(--paper) 70%, transparent); text-transform: uppercase; letter-spacing: .1em; }

/* pasek ikon: granatowe ikony, pionowe kreski */
[data-skin="1846"] .icons { border-color: color-mix(in srgb, var(--navy) 25%, transparent); }
[data-skin="1846"] .icon-tile { font-family: var(--display); text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; color: var(--navy); }
[data-skin="1846"] .icon-tile svg { color: var(--navy); }

/* kafle i karty jak pożółkłe kartki */
[data-skin="1846"] .bento-tile, [data-skin="1846"] .cat, [data-skin="1846"] .news-item, [data-skin="1846"] .place,
[data-skin="1846"] .final-step, [data-skin="1846"] .lesson-card, [data-skin="1846"] .step, [data-skin="1846"] .years-pop,
[data-skin="1846"] .stage-card, [data-skin="1846"] .enrol, [data-skin="1846"] .dlc-box {
  background: linear-gradient(180deg, var(--card-a), var(--card-b));
  border-color: color-mix(in srgb, var(--brick) 40%, transparent);
  box-shadow: 0 8px 18px -14px rgba(60,40,10,.6);
}
/* karty lekcji: ten sam rysunek, co przy ścieżce dla tej grupy klas */
[data-skin="1846"] .lesson-card {
  background-image: var(--tlo, none), linear-gradient(180deg, var(--card-a), var(--card-b));
  background-repeat: no-repeat, repeat;
  background-position: bottom center, center;
  background-size: 100% auto, auto;
  background-blend-mode: multiply, normal;
}
[data-skin="1846"] .bento-tile--lead { background: var(--navy); border-color: var(--navy); }
[data-skin="1846"] .bento-tile--lead b { color: var(--paper-lit); }
[data-skin="1846"] .bento-label, [data-skin="1846"] .cat .cat-tag, [data-skin="1846"] .dlc-stamp, [data-skin="1846"] .vid-tag,
[data-skin="1846"] .teka-card b, [data-skin="1846"] .enrol-label, [data-skin="1846"] .lesson-grp, [data-skin="1846"] .news-date,
[data-skin="1846"] .cal time span, [data-skin="1846"] .crumb, [data-skin="1846"] .pagehead-aside .aside-label, [data-skin="1846"] .tier h3 {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: var(--t-tiny);
}
[data-skin="1846"] .teka-card a {
  transform: rotate(var(--tilt, 0deg));
  /* rysunek (--tlo) leży NA gradiencie karty; skrót `background` skasowałby go,
     więc obie warstwy podajemy razem */
  background-image: var(--tlo, none), linear-gradient(180deg, var(--card-a), var(--card-c));
  background-repeat: no-repeat, repeat;
  background-position: bottom center, center;
  background-size: 100% auto, auto;
  background-blend-mode: multiply, normal;
  border: 1px solid color-mix(in srgb, var(--brick) 45%, transparent);
  box-shadow: 3px 4px 12px -6px rgba(60,40,10,.6);
}
[data-skin="1846"] .teka-card b { color: var(--navy); font-size: 1rem; }
[data-skin="1846"] .teka-card strong { color: var(--navy); }
[data-skin="1846"] .teka-card span { font-family: var(--text); font-style: italic; color: var(--brick); }
[data-skin="1846"] .teka-card svg { color: var(--brick); }

/* opowieść: sceniczna karta w sepii */
[data-skin="1846"] .stage-read { color: var(--red); font-family: var(--display); letter-spacing: .08em; }
[data-skin="1846"] .st-north { fill: var(--navy); stroke: var(--navy); }
[data-skin="1846"] .st-south { fill: var(--brick); }
[data-skin="1846"] .st-river { stroke: var(--red); }
[data-skin="1846"] .story-chapter.is-live { border-color: var(--red); }
[data-skin="1846"] .story-chapter .lede { font-family: var(--display); font-weight: 700; color: var(--navy); }
[data-skin="1846"] .year-1846 { color: var(--red); }

/* oś czasu i kalendarium */
[data-skin="1846"] .tl b { font-family: var(--display); color: var(--red); }
[data-skin="1846"] .tl::before { background: var(--paper-lit); border-color: var(--navy); }
[data-skin="1846"] .timeline-track::before { background: color-mix(in srgb, var(--navy) 30%, transparent); }
[data-skin="1846"] .timeline-track::after { background: var(--red); }
[data-skin="1846"] .cal time b { font-family: var(--display); color: var(--navy); }
[data-skin="1846"] .cal li:nth-child(3)::before { background: var(--red); border-color: var(--red); }

/* kategorie: kolory tras jak na planie */
[data-skin="1846"] .cat {
  background-image: var(--tlo, none), linear-gradient(180deg, var(--card-a), var(--card-b));
  background-repeat: no-repeat, repeat;
  background-position: bottom center, center;
  background-size: 100% auto, auto;
  background-blend-mode: multiply, normal;
}
[data-skin="1846"] .cat .cat-roman { font-family: var(--display); font-weight: 900; }
[data-skin="1846"] .cat:hover { box-shadow: 0 14px 24px -14px rgba(60,40,10,.6); }

/* Podgórze */
[data-skin="1846"] .dlc-stamp { color: var(--red); border-color: var(--red); }
[data-skin="1846"] .dlc-list b { color: var(--navy); }

/* pieczęcie edycji: lak */
[data-skin="1846"] .years-item { mix-blend-mode: normal; color: var(--paper-lit); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--red) 70%, #fff), var(--red) 45%, color-mix(in srgb, var(--red) 70%, #000)); border: 0; border-radius: 50%; box-shadow: 0 3px 6px -2px rgba(0,0,0,.5), 0 0 0 2px color-mix(in srgb, var(--red) 60%, #000) inset; font-family: var(--display); font-weight: 700; }
[data-skin="1846"] .years-item--now { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--navy) 60%, #fff), var(--navy) 45%, #0d1526); box-shadow: 0 3px 6px -2px rgba(0,0,0,.5), 0 0 0 2px #0d1526 inset; }
[data-skin="1846"] .years-pop b { color: var(--red); font-family: var(--display); }
[data-skin="1846"] .jub-year b { mix-blend-mode: normal; color: var(--paper-lit); background: var(--red); border-color: color-mix(in srgb, var(--red) 70%, #000); border-radius: 50%; font-family: var(--display); }
[data-skin="1846"] .jub-stage--now .jub-year b { background: var(--navy); border-color: #0d1526; }

/* zdjęcia w sepiowych ramkach */
[data-skin="1846"] .ph { border: 1px solid color-mix(in srgb, var(--brick) 45%, transparent); padding: 4px; background: var(--card-a); box-shadow: 0 6px 14px -10px rgba(60,40,10,.7); }
[data-skin="1846"] .film { border-color: color-mix(in srgb, var(--brick) 40%, transparent); }

/* finał, lekcje, zapisy */
[data-skin="1846"] .final-n { background: var(--navy); }
[data-skin="1846"] .final-step svg { color: var(--red); }
[data-skin="1846"] .lesson-card { border-color: color-mix(in srgb, var(--navy) 45%, transparent); }
[data-skin="1846"] .enrol { border: 1px solid color-mix(in srgb, var(--brick) 50%, transparent); box-shadow: 0 16px 30px -20px rgba(60,40,10,.7); }
[data-skin="1846"] .enrol-meta dd { color: var(--navy); }

/* strony wewnętrzne */
[data-skin="1846"] .pagehead { background: linear-gradient(180deg, color-mix(in srgb, var(--paper-deep) 55%, var(--paper)), var(--paper)); border-bottom: 1px solid color-mix(in srgb, var(--navy) 22%, transparent); }
[data-skin="1846"] .pagehead h1 { color: var(--navy); }
[data-skin="1846"] .pagehead-aside .aside-value { font-family: var(--display); color: var(--navy); }
[data-skin="1846"] .prose h2, [data-skin="1846"] .prose h3, [data-skin="1846"] .twocol h2 { color: var(--navy); }
[data-skin="1846"] .note { background: var(--card-a); border-left: 4px solid var(--red); }
[data-skin="1846"] .form-part legend { color: var(--navy); font-weight: 900; }
[data-skin="1846"] .field input, [data-skin="1846"] .field select, [data-skin="1846"] .field textarea { background: var(--card-a); border-color: color-mix(in srgb, var(--brick) 45%, transparent); }
[data-skin="1846"] .field input:focus-visible, [data-skin="1846"] .field select:focus-visible, [data-skin="1846"] .field textarea:focus-visible { border-color: var(--navy); outline-color: var(--navy); }
[data-skin="1846"] .field--check input { accent-color: var(--navy); }
[data-skin="1846"] .enrol-ok { border-color: var(--navy); background: linear-gradient(180deg, var(--card-a), var(--card-b)); }
[data-skin="1846"] .enrol-ok-mark { background: var(--navy); }
[data-skin="1846"] .enrol-ok h3 { color: var(--navy); }
[data-skin="1846"] .faq summary { font-family: var(--display); font-weight: 700; }
[data-skin="1846"] .step::before { background: var(--navy); color: var(--paper-lit); font-family: var(--display); box-shadow: 0 2px 6px -2px rgba(20,30,60,.6); }
[data-skin="1846"] table th { font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: var(--t-tiny); color: var(--navy); }
[data-skin="1846"] .partner { background: var(--card-a); border-color: color-mix(in srgb, var(--brick) 40%, transparent); }

/* stopka: granat z panoramą, motto odręczne, czerwony pasek z datą */
[data-skin="1846"] .foot { background: var(--navy); color: color-mix(in srgb, var(--paper) 85%, transparent); }
[data-skin="1846"] .foot-sky .sky { color: var(--sky); }
[data-skin="1846"] .foot-sky { color: var(--sky); }
[data-skin="1846"] .foot-sky-in { border-top-color: color-mix(in srgb, var(--paper) 18%, transparent); }
[data-skin="1846"] .foot-motto { font-family: var(--script); font-style: normal; font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 500; }
[data-skin="1846"] .foot-date { background: var(--red); color: var(--paper-lit); padding: .55rem 1rem; border-radius: 3px; text-transform: uppercase; letter-spacing: .08em; font-size: var(--t-tiny); clip-path: polygon(2% 0, 100% 4%, 98% 100%, 0 96%); }
[data-skin="1846"] .foot-date b { color: var(--paper-lit); }
[data-skin="1846"] .foot h2 { color: var(--paper-lit); font-weight: 900; }
[data-skin="1846"] .foot-grid h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: var(--t-tiny); }
[data-skin="1846"] .foot .btn--violet { --btn-ink: var(--red); }
[data-skin="1846"] .foot a { color: var(--paper-lit); }
[data-skin="1846"] .foot a:hover { color: var(--gold); }
[data-skin="1846"] .foot-note { font-family: var(--display); }

/* intro: kremowe tło, granatowa linia */
[data-skin="1846"] .intro { background: var(--paper); }
[data-skin="1846"] .intro-line { font-family: var(--script); font-size: 1.5rem; font-weight: 500; letter-spacing: 0; color: var(--navy); }

/* lightbox */
[data-skin="1846"] .lightbox { background: color-mix(in srgb, var(--ink) 94%, transparent); }

@media (max-width: 1040px) {
  [data-skin="1846"] .hero::before { height: 60%; }
}

/* ============================================================
   Akcenty pawiego pióra (zieleń) — drobne, ale rozsiane po stronie
   ============================================================ */

[data-skin="1846"] .icon-tile svg,
[data-skin="1846"] .teka-card svg,
[data-skin="1846"] .final-step svg { color: var(--verdigris); }
[data-skin="1846"] .icon-tile:hover { background: color-mix(in srgb, var(--verdigris) 8%, transparent); color: var(--verdigris); }
[data-skin="1846"] .icon-tile:hover svg { color: var(--verdigris); }
[data-skin="1846"] a:hover { color: var(--verdigris); }
[data-skin="1846"] .prose a, [data-skin="1846"] .foot a { text-decoration-color: color-mix(in srgb, var(--verdigris) 60%, transparent); }
[data-skin="1846"] .cat:nth-child(1) { --cat-ink: var(--red); }
[data-skin="1846"] .cat:nth-child(2) { --cat-ink: var(--navy); }
[data-skin="1846"] .cat:nth-child(3) { --cat-ink: var(--verdigris); }
[data-skin="1846"] .tl::before { border-color: var(--verdigris); }
[data-skin="1846"] .cal li::before { border-color: var(--verdigris); }
[data-skin="1846"] .faq summary::after { border-color: var(--verdigris); }
[data-skin="1846"] .years-cap, [data-skin="1846"] .rail-hint,
[data-skin="1846"] .jub-meta { color: var(--verdigris); }
[data-skin="1846"] .hist figcaption { color: var(--verdigris); }
[data-skin="1846"] .lesson-card { border-color: color-mix(in srgb, var(--verdigris) 55%, transparent); }
[data-skin="1846"] .lesson-card:hover { box-shadow: 6px 6px 0 0 color-mix(in srgb, var(--verdigris) 26%, transparent); }
[data-skin="1846"] .enrol-ok { border-color: var(--verdigris); }
[data-skin="1846"] .enrol-ok-mark { background: var(--verdigris); }
[data-skin="1846"] .enrol-ok h3 { color: var(--verdigris); }
[data-skin="1846"] .foot-date { background: var(--red); }
[data-skin="1846"] .hero::before { filter: sepia(.75) saturate(.9) hue-rotate(-8deg); opacity: .24; }

/* ============================================================
   Dokumenty do pobrania (regulamin, klauzula RODO)
   ============================================================ */

.doks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.dok {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: clamp(1.2rem, 2.5vw, 1.75rem);
  text-decoration: none;
  color: var(--ink);
  background: linear-gradient(180deg, var(--card-a), var(--card-b));
  border: 1.5px solid color-mix(in srgb, var(--brick) 45%, transparent);
  box-shadow: 5px 6px 0 0 color-mix(in srgb, var(--navy) 14%, transparent);
  transition: transform .16s ease, box-shadow .16s ease;
}
.dok:hover, .dok:focus-visible {
  color: var(--ink);
  transform: translate(-2px, -2px);
  box-shadow: 7px 8px 0 0 color-mix(in srgb, var(--verdigris) 28%, transparent);
}
.dok svg { width: 40px; height: 40px; flex: none; color: var(--red); }
.dok-txt { display: flex; flex-direction: column; gap: .35rem; }
.dok-txt b { font-family: var(--display); font-weight: 800; font-size: var(--t-h3); line-height: 1.15; color: var(--navy); }
.dok-txt span { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.5; }
.dok-txt em {
  font-style: normal;
  font-family: var(--display);
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--verdigris);
}
.dok-ref {
  margin-top: 1.2rem;
  font-family: var(--display);
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--verdigris);
}

/* klauzula RODO: skrót w formie definicji + pełny tekst w rozwijaniu */
.rodo { margin: 1.5rem 0; display: grid; gap: 1rem; }
.rodo > div { display: grid; grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr); gap: .3rem 1.5rem; padding-top: .9rem; border-top: var(--hair); }
.rodo dt { font-family: var(--display); font-weight: 700; font-size: var(--t-small); color: var(--navy); }
.rodo dd { margin: 0; font-size: var(--t-small); line-height: 1.6; color: var(--ink-soft); max-width: 60ch; }
.rodo-full { margin-top: 2rem; border-top: var(--hair-2); padding-top: 1rem; }
.rodo-full > summary {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-h3);
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.rodo-full > summary::-webkit-details-marker { display: none; }
.rodo-full > summary::before { content: "+"; font-size: 1.2em; color: var(--verdigris); }
.rodo-full[open] > summary::before { content: "–"; }
.dok-tekst { margin-top: 1.5rem; max-width: 68ch; }
.dok-tekst h3 { font-size: var(--t-h3); color: var(--navy); margin: 1.75rem 0 .6rem; }
.dok-tekst p { font-size: var(--t-small); line-height: 1.65; color: var(--ink-soft); }
.dok-tekst ol.gl { padding-left: 1.3rem; }
.dok-tekst ol.gl > li { font-size: var(--t-small); line-height: 1.6; color: var(--ink-soft); margin-bottom: .6rem; }
.dok-tekst ol.lit { list-style: lower-alpha; padding-left: 1.2rem; margin: .4rem 0; }
.dok-tekst ul.pkt { padding-left: 1.2rem; margin: .4rem 0; }
.dok-tekst li::marker { color: var(--verdigris); }

/* ============================================================
   Wyszukiwarka szkół w formularzu
   ============================================================ */

.szukaj { position: relative; margin-bottom: 1.5rem; }
.szukaj input[type="search"] {
  background: var(--paper-lit);
  border: 2px solid color-mix(in srgb, var(--verdigris) 55%, transparent);
}
.szukaj input[type="search"]:focus-visible { border-color: var(--verdigris); outline-color: var(--verdigris); }
.szukaj-lista {
  position: absolute;
  z-index: 20;
  left: 0; right: 0;
  margin: .2rem 0 0;
  padding: 0;
  list-style: none;
  max-height: 22rem;
  overflow-y: auto;
  background: var(--paper-lit);
  border: 1.5px solid color-mix(in srgb, var(--navy) 40%, transparent);
  box-shadow: 0 18px 34px -22px rgba(20, 30, 60, .8);
}
.szukaj-opt {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .65rem .9rem;
  cursor: pointer;
  border-bottom: var(--hair);
  font-size: var(--t-small);
  line-height: 1.35;
}
.szukaj-opt:last-child { border-bottom: 0; }
.szukaj-opt b { color: var(--red); font-weight: 700; }
.szukaj-opt.is-on, .szukaj-opt:hover { background: color-mix(in srgb, var(--verdigris) 12%, transparent); }
.szukaj-adr { font-size: var(--t-tiny); color: var(--ink-faint); }
.szukaj-info { margin: .5rem 0 0; font-size: var(--t-small); color: var(--verdigris); max-width: 60ch; }
.szukaj-info:empty { display: none; }

/* pola wyboru w formularzu (dostępność, wersja językowa) */
.wybor { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.wybor-opt {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  border: 1.5px solid color-mix(in srgb, var(--ink) 28%, transparent);
  border-radius: 999px;
  background: var(--paper-lit);
  font-size: var(--t-small);
  cursor: pointer;
}
.wybor-opt input { accent-color: var(--navy); width: 1.1rem; height: 1.1rem; }
.wybor-opt:has(input:checked) { border-color: var(--navy); background: color-mix(in srgb, var(--navy) 10%, var(--paper-lit)); font-weight: 600; }
.wybor-opt:has(input:focus-visible) { outline: 3px solid var(--navy); outline-offset: 2px; }
.field-pyt { font-family: var(--display); font-weight: 700; font-size: var(--t-small); }
.field-pyt b { color: var(--red); }
.field-kat {
  margin: .5rem 0 0;
  font-size: var(--t-small);
  color: var(--verdigris);
  border-left: 3px solid var(--verdigris);
  padding-left: .8rem;
  max-width: 60ch;
}
.field.is-ok input { border-color: var(--verdigris); background: color-mix(in srgb, var(--verdigris) 6%, var(--paper-lit)); }
.form-part legend { color: var(--navy); }

@media (max-width: 700px) {
  .rodo > div { grid-template-columns: 1fr; }
  .dok { flex-direction: column; gap: .8rem; }
}

/* ============================================================
   Strona partnerów: formy wsparcia i dane do darowizny
   ============================================================ */

.sposoby {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.sposob {
  padding: 1.4rem 1.3rem;
  background: linear-gradient(180deg, var(--card-a), var(--card-b));
  border: 1.5px solid color-mix(in srgb, var(--brick) 40%, transparent);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.sposob svg { width: 34px; height: 34px; color: var(--verdigris); }
.sposob h3 { font-size: var(--t-h3); color: var(--navy); }
.sposob p { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.5; }

.przelew { margin: 1.25rem 0 0; display: grid; gap: .8rem; }
.przelew > div { padding-top: .8rem; border-top: var(--hair); }
.przelew dt {
  font-family: var(--display);
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--verdigris);
  margin-bottom: .2rem;
}
.przelew dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--navy); }

.partner-form { max-width: 46rem; }