/* =========================================================
   Lucid Academy — nowa strona
   Kolory, typografia i tło według wykładu „Alignment” (IX 2026),
   ilustracje z obecnej strony, logo z plików fundacji (sygnet 3D i neonowy napis).
   ========================================================= */

/* ---------- Fonty: lokalnie, woff2, podzbiory latin + latin-ext ---------- */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonty/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonty/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonty/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonty/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonty/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonty/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokeny ---------- */

:root {
  --ground: #0C0720; --ink: #F4F0FF; --muted: #A294D2; --dim: #7C6DA8;
  --violet: #A855F7; --cyan: #3DE3F0; --magenta: #F0369F;
  --line: rgba(168, 85, 247, .26); --surface: rgba(124, 58, 237, .10);
  --display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --body: "Archivo", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  /* Pochodne. --dim ma na tle tylko 4,3:1, więc nie służy do tekstu poniżej 24 px. */
  --violet-glebia: #7C3AED;  /* kolor bazowy --surface; jasny tekst na nim ma 5,1:1 */
  --linia-mocna: rgba(168, 85, 247, .55);
  /* Jasne odcienie akcentów na tekst znaczników (co najmniej 5,5:1 także na najjaśniejszej poświacie tła) */
  --violet-jasny: #C9A6FF;   /* ten sam co w gradiencie słowa-klucza */
  --magenta-jasna: #F791CA;  /* magenta rozjaśniona bielą */
  --blekit: #7AA2FF;         /* czwarty kolor znaczników: między fioletem a cyjanem, 7,4:1 na tle */
  --margines: clamp(16px, 4.5vw, 48px);
  --szerokosc: 1240px;
  --nav-h: 64px;
  --promien: 10px;
  --wejscie: .7s cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 900px) {
  :root { --nav-h: 76px; }
}

/* ---------- Podstawa ---------- */

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

html {
  background: var(--ground);
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Tło strony maluje <html> (--ground) i warstwy .tlo; body musi być przezroczyste,
   inaczej przykryłoby warstwy z z-index: -1. */
body {
  margin: 0;
  min-height: 100vh;
  background: transparent;
  color: var(--muted);
  font: 400 1.0625rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; text-wrap: pretty; }

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

::selection { background: rgba(168, 85, 247, .45); color: var(--ink); }

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

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pomin {
  position: absolute;
  top: -100px;
  left: var(--margines);
  z-index: 100;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--violet-glebia);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.pomin:focus { top: 12px; }

.kontener {
  width: min(100% - 2 * var(--margines), var(--szerokosc));
  margin-inline: auto;
}

/* Przyklejona nawigacja nie może ucinać nagłówka sekcji po kliknięciu w menu */
section { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* ---------- Tło: niebo, siatka, linie skanu (stałe, pod treścią) ---------- */

.tlo {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.tlo > div { position: absolute; inset: 0; }

.tlo__niebo {
  background:
    radial-gradient(ellipse 70% 60% at 0% 0%, rgba(124, 58, 237, .42), transparent 70%),
    radial-gradient(ellipse 60% 55% at 100% 100%, rgba(61, 227, 240, .20), transparent 70%),
    radial-gradient(ellipse 45% 40% at 88% 0%, rgba(240, 54, 159, .14), transparent 70%),
    linear-gradient(160deg, #110A2C 0%, #0C0720 50%, #0A0618 100%);
}

.tlo__siatka {
  background-image:
    linear-gradient(rgba(168, 85, 247, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, .16) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: center center;
  opacity: .30;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 25%, transparent 80%);
          mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 25%, transparent 80%);
}

.tlo__skan {
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .035) 0 1px, transparent 1px 4px);
  opacity: .30;
}

/* ---------- Motywy typograficzne ---------- */

/* Etykieta sekcji w stylu terminala: > 05 · co budujemy */
.etykieta {
  margin: 0 0 1.25rem;
  font: 400 1rem/1.4 var(--mono);
  color: var(--muted);
}
.etykieta__znak {
  color: var(--violet);
  transition: color .4s ease, text-shadow .4s ease;
}
/* Sekcja na środku ekranu: jej znak > świeci jak aktywny link w menu */
.etykieta--aktywna .etykieta__znak {
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(61, 227, 240, .55);
}

/* Słowo-klucz w hero: gradient tekstu i poświata. Jedyne takie miejsce na stronie. */
.slowo-klucz { white-space: nowrap; }
.slowo-klucz__tekst {
  display: inline-block;
  padding-right: .04em;
  background: linear-gradient(100deg, #FFFFFF 0%, var(--violet-jasny) 48%, #6FE9F3 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 .3em rgba(168, 85, 247, .4));
}

/* Fioletowe podświetlenie całego słowa — najwyżej jedno na sekcję.
   Półprzezroczyste, bo jasny tekst na pełnym --violet miałby tylko 3,5:1;
   na tym tle ma 9,8:1. Tekst zawsze jasny (--ink): przygaszony --muted
   z akapitów kart miałby tu tylko 4,05:1. */
.podswietlenie {
  /* Ujemny margines oddaje wypełnienie, żeby sąsiednie znaki (np. dwukropek) nie odskakiwały */
  margin-inline: -.12em;
  padding: .02em .16em;
  border-radius: .2em;
  color: var(--ink);
  background: rgba(168, 85, 247, .42);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* ---------- Przyciski i linki ---------- */

.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 48px;
  padding: .7em 1.35em;
  border: 1px solid transparent;
  border-radius: var(--promien);
  color: var(--ink);
  font: 600 1.0625rem/1.2 var(--body);
  text-decoration: none;
  text-align: center;
  touch-action: manipulation;
  transition: background-color .2s, border-color .2s, box-shadow .2s, transform .2s;
}

.przycisk--glowny {
  background: var(--violet-glebia);
  border-color: rgba(201, 166, 255, .35);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, .25), 0 10px 32px -12px rgba(168, 85, 247, .65);
}
.przycisk--glowny:hover {
  box-shadow: 0 0 0 1px var(--violet), 0 14px 40px -12px rgba(168, 85, 247, .9);
  transform: translateY(-1px);
}

.przycisk--obrys {
  background: rgba(12, 7, 32, .35);
  border-color: var(--linia-mocna);
}
.przycisk--obrys:hover {
  background: var(--surface);
  border-color: var(--violet);
}

/* Strzałka „otwiera nową kartę” rysowana maską — podzbiory fontów nie mają ↗ */
.przycisk--zewn::after {
  content: "";
  flex: none;
  width: .8em;
  height: .8em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 11.5l7-7M6 4.5h5.5V10' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 11.5l7-7M6 4.5h5.5V10' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.link-cichy {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 48px;
  color: var(--muted);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(162, 148, 210, .45);
  text-underline-offset: .3em;
  transition: color .2s, text-decoration-color .2s;
}
.link-cichy:hover {
  color: var(--ink);
  text-decoration-color: var(--violet);
}

/* ---------- Nawigacja ---------- */

.naglowek {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition: background-color .3s, border-color .3s;
}
.naglowek--tlo,
.menu-otwarte .naglowek {
  background: rgba(12, 7, 32, .82);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}

.nawigacja {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Logo: logo-nav.webp to poziomy układ logo fundacji, sygnet 3D obok neonowego napisu
   (oba z plików fundacji, kształt i kolor bez zmian), 478 × 156 px, czyli 3× rozmiaru w pasku. */
.logo {
  --skala: .282;
  flex: none;
  display: block;
  width: calc(478px * var(--skala));
  height: calc(156px * var(--skala));
  border-radius: 2px;
}
.logo img {
  width: 100%;
  height: 100%;
}
@media (min-width: 900px) {
  .logo { --skala: .333; }
}

.menu {
  display: flex;
  gap: clamp(14px, 2vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  font: 500 1rem/1 var(--body);
  text-decoration: none;
  transition: color .2s;
}
.menu a:hover,
.menu a.aktywny { color: var(--ink); }
.menu a.aktywny::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  height: 2px;
  background: var(--violet);
}

.menu-przycisk { display: none; }

/* Wejście do trybu sieci (pilot wersji 3). Bez JavaScriptu przycisk ma atrybut hidden. */
.tryb-sieci {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  margin-left: auto;
  padding: 0 14px 0 11px;
  border: 1px solid rgba(61, 227, 240, .45);
  border-radius: 999px;
  background: rgba(12, 7, 32, .45);
  color: var(--ink);
  font: 400 1rem/1 var(--mono);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.tryb-sieci[hidden] { display: none; }
.tryb-sieci:hover {
  border-color: var(--cyan);
  background: rgba(61, 227, 240, .06);
  box-shadow: 0 0 0 1px rgba(61, 227, 240, .3), 0 0 22px -6px rgba(61, 227, 240, .7);
}
.tryb-sieci[aria-busy="true"] { cursor: progress; opacity: .7; }
.tryb-sieci__ikona { flex: none; color: var(--violet); fill: var(--cyan); }
.tryb-sieci__ikona circle:first-of-type { animation: tryb-puls 2.4s ease-in-out infinite; }
@keyframes tryb-puls { 50% { opacity: .35; } }

/* Sama ikona tam, gdzie brakuje miejsca; nazwa zostaje dla czytników ekranu */
@media (max-width: 419.98px), (min-width: 900px) and (max-width: 1099.98px) {
  .tryb-sieci { width: 44px; padding: 0; }
  .tryb-sieci__tekst {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 899.98px) {
  .nawigacja { gap: 12px; }
  .menu-przycisk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--promien);
    background: rgba(12, 7, 32, .4);
    color: var(--ink);
    cursor: pointer;
  }
  .menu-przycisk__ikona,
  .menu-przycisk__ikona::before {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    transition: transform .25s;
  }
  .menu-przycisk__ikona { position: relative; transform: translateY(-4px); }
  .menu-przycisk__ikona::before {
    content: "";
    position: absolute;
    top: 8px;
  }
  [aria-expanded="true"] > .menu-przycisk__ikona { transform: translateY(0) rotate(45deg); }
  [aria-expanded="true"] > .menu-przycisk__ikona::before { transform: translateY(-8px) rotate(-90deg); }

  .menu {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 8px var(--margines) 24px;
    background: rgba(12, 7, 32, .97);
    border-bottom: 1px solid var(--line);
  }
  .menu-otwarte .menu { display: flex; }
  .menu a {
    width: 100%;
    min-height: 56px;
    border-bottom: 1px solid rgba(168, 85, 247, .14);
    color: var(--ink);
    font: 700 1.375rem/1 var(--display);
    letter-spacing: -.02em;
  }
  .menu a.aktywny::after { display: none; }

  /* Bez JavaScriptu menu po prostu stoi pod logo */
  html:not(.js) .naglowek { position: static; height: auto; padding-block: 12px; }
  html:not(.js) .nawigacja { flex-wrap: wrap; }
  html:not(.js) .menu-przycisk { display: none; }
  html:not(.js) .menu { position: static; display: flex; flex-flow: row wrap; gap: 4px 16px; padding: 0; background: none; border: 0; }
  html:not(.js) .menu a { width: auto; min-height: 44px; border: 0; font: 500 1rem/1 var(--body); }
}

/* ---------- Ruch: wejścia przy scrollu ---------- */

.js [data-wejscie] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--wejscie), transform var(--wejscie);
  transition-delay: var(--opoznienie, 0s);
}
.js [data-wejscie].widoczny {
  opacity: 1;
  transform: none;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow-x: clip; /* ilustracja wychodzi za prawą krawędź, ale nie poszerza strony */
  padding: calc(var(--nav-h) + 4px) 0 clamp(64px, 10vw, 128px);
}

/* Sieć neuronowa (js/neurony.js). W hero po stronie tekstu, pod nim; książka zostaje
   osobno. Na telefonie zaczyna się pod książką (jej wysokość: 2/3 szerokości, najwyżej
   64vh), na szerokim ekranie zajmuje lewą część i gaśnie przed ilustracją. */
.neurony {
  position: absolute;
  pointer-events: none;
}
/* Płótno to element zastępowany: samo top i bottom nie rozciągnie go na wysokość,
   wysokość wzięłaby się z proporcji bitmapy. Stąd jawne width i height. */
.neurony--hero {
  --siec-gora: calc(var(--nav-h) + 4px + min(66.667vw, 64vh) - 48px);
  top: var(--siec-gora);
  left: 0;
  width: 100%;
  height: calc(100% - var(--siec-gora));
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 96px);
          mask-image: linear-gradient(180deg, transparent, #000 96px);
}
@media (min-width: 1024px) {
  .neurony--hero {
    --siec-gora: 0px;
    width: 54%;
    -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent);
            mask-image: linear-gradient(90deg, #000 62%, transparent);
  }
}

/* Małe fragmenty sieci w wolnych miejscach: obok nagłówków sekcji (z prawej, w wysokości
   etykiety) i przy głosach uczestników. Tylko na szerokim ekranie, bo na telefonie nie ma
   wolnego miejsca. Brzegi wygaszone, żeby wyglądały jak kawałek większej sieci. */
/* Fragmenty leżą pod treścią (z-index: -1, nad warstwami tła .tlo), więc linie nigdy nie
   wchodzą na tekst ani karty; brzegi wygasają w maskę */
.neurony--fragment {
  display: none;
  z-index: -1;
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent);
          mask-image: radial-gradient(closest-side, #000 70%, transparent);
}
@media (min-width: 1100px) {
  .neurony--fragment { display: block; }
  /* Nad wykładami: w odstępie nad nagłówkiem, po prawej, bez wchodzenia na karty */
  .wyklady,
  .gdzie { position: relative; }
  .neurony--wyklady {
    top: -110px;
    right: 0;
    width: 50%;
    height: 190px;
  }
  /* Pod mapą: lewa kolumna kończy się wcześniej niż lista instytucji */
  .neurony--gdzie {
    bottom: -150px;
    left: 0;
    width: 52%;
    height: 300px;
  }
  /* Kontakt: prawa kolumna pod ilustracją, nad stopką */
  .neurony--kontakt {
    bottom: 24px;
    right: max(var(--margines), calc((100% - var(--szerokosc)) / 2));
    width: min(36vw, 500px);
    height: 280px;
  }
  .neurony--naglowek {
    top: clamp(88px, 12vw, 168px);
    right: max(var(--margines), calc((100% - var(--szerokosc)) / 2));
    width: min(32vw, 440px);
    height: 240px;
  }
  .glosy { position: relative; }
  .neurony--glosy {
    right: 0;
    bottom: -24px;
    width: 44%;
    height: 46%;
  }
}

.hero__ilustracja {
  position: relative;
  z-index: -1;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 64vh;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 74% 72% at 50% 44%, #000 50%, transparent 100%);
          mask-image: radial-gradient(ellipse 74% 72% at 50% 44%, #000 50%, transparent 100%);
}
.hero__ilustracja img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

.hero__tresc {
  position: relative;
  margin-top: clamp(-96px, -8vw, -20px);
}

.hero__tytul {
  max-width: 12em;
  font-size: clamp(2.5rem, 1.1rem + 3.7vw, 4.4rem);
  line-height: .98;
}

.hero__lead {
  max-width: 34em;
  margin-top: clamp(20px, 2.4vw, 32px);
  color: var(--ink);
  font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem);
  line-height: 1.55;
}

.hero__akcje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: clamp(28px, 3.2vw, 44px);
}

@media (max-width: 599.98px) {
  .hero__akcje .przycisk { width: 100%; }
}

@media (min-width: 1024px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: min(100svh, 980px);
  }
  .hero__ilustracja {
    position: absolute;
    top: 50%;
    /* Wystaje za prawą krawędź tylko trochę: szklana kulka na prawo od książki
       (85% szerokości obrazu) mieści się w kadrze także po powiększeniu paralaksy */
    right: -3vw;
    width: min(64vw, 1180px);
    max-height: none;
    transform: translateY(-47%);
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 56% 50%, #000 42%, transparent 100%);
            mask-image: radial-gradient(ellipse 50% 50% at 56% 50%, #000 42%, transparent 100%);
  }
  .hero__tresc { margin-top: 0; }
  .hero__tytul { max-width: 8.8em; }
  .hero__lead { max-width: 30em; }
}

/* Zatrzymanie ruchu sieci w hero (WCAG 2.2.2): cichy przycisk w lewym dolnym rogu,
   w linii z treścią. Ikona pauzy z dwóch pasków, po zatrzymaniu trójkąt odtwarzania. */
.ruch-przelacznik {
  position: absolute;
  bottom: clamp(12px, 2.4vw, 28px);
  left: max(var(--margines), calc((100% - var(--szerokosc)) / 2));
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: 44px;
  padding: 0 .25em;
  border: 0;
  background: none;
  color: var(--muted);
  font: 400 1rem/1 var(--mono);
  cursor: pointer;
}
.ruch-przelacznik[hidden] { display: none; }
.ruch-przelacznik:hover { color: var(--ink); }
.ruch-przelacznik__ikona {
  width: 10px;
  height: 12px;
  background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%);
}
.ruch-przelacznik--stop .ruch-przelacznik__ikona {
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ---------- Sekcje ---------- */

.sekcja {
  position: relative;
  padding-block: clamp(72px, 9vw, 128px);
}

.sekcja__naglowek {
  max-width: 46rem;
  margin-bottom: clamp(32px, 4vw, 48px);
}

/* Skala nagłówków i odstępów przycięta o ~10–15% (jak strona oglądana przy 90%):
   na laptopie widać od razu cały akapit; tekst akapitów zostaje 17 px */
.sekcja__tytul { font-size: clamp(2rem, 1.1rem + 2.9vw, 3.6rem); }

.sekcja__lead {
  max-width: 34em;
  margin-top: clamp(16px, 2vw, 24px);
  color: var(--ink);
  font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem);
  line-height: 1.55;
}

/* ---------- 05 · Co budujemy: filtr ---------- */

.filtr {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.filtr[hidden] { display: none; }

.filtr__przycisk {
  min-height: 44px;
  padding: .55em 1.05em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(12, 7, 32, .45);
  color: var(--muted);
  font: 500 1rem/1.2 var(--body);
  cursor: pointer;
  touch-action: manipulation;
  transition: color .2s, border-color .2s, background-color .2s;
}
.filtr__przycisk:hover {
  color: var(--ink);
  border-color: var(--linia-mocna);
}
.filtr__przycisk[aria-pressed="true"] {
  color: var(--ink);
  border-color: var(--violet);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(168, 85, 247, .35);
}

.filtr__licznik {
  min-height: 1.4em;
  margin-top: 14px;
  color: var(--muted);
  font: 400 1rem/1.4 var(--mono);
}

/* ---------- 05 · Co budujemy: kafle ---------- */

.kafle {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2.2vw, 28px);
  margin: clamp(20px, 2.6vw, 32px) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 720px) {
  .kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.kafel { display: flex; }
.kafel[hidden] { display: none; }

.kafel__karta {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(124, 58, 237, .09), rgba(12, 7, 32, .62) 42%);
  transition: border-color .25s;
}
.kafel__karta:hover { border-color: var(--linia-mocna); }

.kafel__podglad {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #0A0618;
}
.kafel__podglad img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fokus, 50% 0%);
}

/* Strony robione pod telefon: pionowy kadr, nigdy rozciągnięty do poziomu */
.kafel--pionowy .kafel__podglad img {
  width: auto;
  max-width: none;
  height: 100%;
  margin-inline: auto;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* Miniatura z galerią: cała ramka podglądu jest przyciskiem, w rogu licznik zrzutów */
.kafel__galeria {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: zoom-in;
}
.kafel__galeria:focus-visible { outline-offset: -4px; }
.kafel__galeria img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.kafel__galeria:hover img { transform: scale(1.03); }

/* Demo na życzenie: linie skanu na miniaturze. Estetyka, nie zabezpieczenie —
   o tym, co widać, decyduje kadr zapisanego pliku. */
.kafel--na-zyczenie .kafel__podglad::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .05) 0 1px, transparent 1px 4px);
  pointer-events: none;
}

.kafel__zrzuty {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 2;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(12, 7, 32, .84);
  color: var(--ink);
  font: 400 1rem/1 var(--mono);
  transition: border-color .2s;
}
.kafel__zrzuty .etykieta__znak { margin-right: .1ch; }
.kafel__galeria:hover .kafel__zrzuty,
.kafel__galeria:focus-visible .kafel__zrzuty { border-color: var(--violet); }

/* Gdy obrazu brak, zostaje spokojna plansza zamiast ikony zepsutego pliku */
.kafel__podglad--brak img { visibility: hidden; }
.kafel__podglad--brak::before {
  content: "> podgląd w przygotowaniu";
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  background: none;
  color: var(--muted);
  font: 400 1rem/1 var(--mono);
}

.kafel__opis {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: clamp(18px, 2.2vw, 26px);
}

.kafel__typ {
  color: var(--muted);
  font: 400 1rem/1.4 var(--mono);
}

.kafel__nazwa {
  font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.12;
}

.kafel__dopisek {
  padding-left: 12px;
  border-left: 2px solid var(--line);
}

/* Wymagane oznaczenie źródła (np. dane OpenStreetMap na zrzucie) */
.kafel__atrybucja {
  color: var(--muted);
  font: 400 1rem/1.4 var(--mono);
}

.kafel__stopka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(168, 85, 247, .16);
}

.kafel__status {
  display: inline-flex;
  align-items: center;
  gap: .6ch;
  color: var(--ink);
  font: 400 1rem/1.4 var(--mono);
}
.kafel__status::before {
  content: "";
  width: .55em;
  height: .55em;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(61, 227, 240, .6);
}
/* Magenta tylko jako trzeci akcent, drobny: tutaj i w trzecim znaczniku zestawu */
.kafel__status--na-zyczenie::before {
  background: var(--magenta);
  box-shadow: 0 0 10px rgba(240, 54, 159, .55);
}

.kafel__akcje {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 719.98px) {
  .kafel__stopka { flex-direction: column; align-items: stretch; }
  .kafel__akcje .przycisk { flex: 1 1 0; }
}

.kafle__komunikat {
  margin-top: 24px;
  color: var(--ink);
}

/* ---------- Wspólne: etykiety mono, podtytuły, karty ---------- */

.zajecia__naglowek,
.instytucje__nazwa,
.osoba__rola,
.kontakt__etykieta,
.stopka__znak {
  color: var(--muted);
  font: 400 1rem/1.4 var(--mono);
  letter-spacing: 0;
}

/* Znacznik: nieklikalna pigułka jak na planszach z zajęć (filar, wątek, obszar, rodzaj nagrania).
   Kolor rozróżnia pozycje w zestawie: fiolet, cyjan, magenta jako trzeci. Bez hovera i bez
   kursora rączki, mniejszy od przycisków filtra, żeby nie udawał przycisku. */
.znacznik {
  --znacznik-kolor: var(--violet-jasny);
  --znacznik-tlo: rgba(168, 85, 247, .12);
  --znacznik-linia: rgba(168, 85, 247, .36);
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: .28em .85em;
  border: 1px solid var(--znacznik-linia);
  border-radius: 999px;
  background: var(--znacznik-tlo);
  color: var(--znacznik-kolor);
  font: 500 1rem/1.3 var(--mono);
  letter-spacing: 0;
  white-space: nowrap;
}
.znacznik--cyjan {
  --znacznik-kolor: var(--cyan);
  --znacznik-tlo: rgba(61, 227, 240, .08);
  --znacznik-linia: rgba(61, 227, 240, .32);
}
.znacznik--magenta {
  --znacznik-kolor: var(--magenta-jasna);
  --znacznik-tlo: rgba(240, 54, 159, .10);
  --znacznik-linia: rgba(240, 54, 159, .38);
}
/* Czwarty kolor, gdy zestaw ma cztery pozycje (kategorie instytucji) */
.znacznik--blekit {
  --znacznik-kolor: var(--blekit);
  --znacznik-tlo: rgba(122, 162, 255, .10);
  --znacznik-linia: rgba(122, 162, 255, .38);
}

.podtytul {
  margin-bottom: clamp(24px, 3vw, 36px);
  font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.25rem);
  line-height: 1.08;
}

.wyklad__karta,
.obszar {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(124, 58, 237, .09), rgba(12, 7, 32, .62) 42%);
}

.sekcja__uwaga {
  max-width: 38em;
  margin-top: clamp(24px, 3vw, 32px);
  padding-left: 16px;
  border-left: 2px solid var(--linia-mocna);
}

/* ---------- Układ: tekst obok ilustracji (Misja, Uniwersytet, Kontakt) ---------- */

.uklad-dwa {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
@media (min-width: 1024px) {
  .uklad-dwa { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
  .uklad-dwa--odwrocony { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
  .uklad-dwa--odwrocony > .ilustracja { order: -1; }
}

.sekcja__tytul--zdanie {
  font-size: clamp(1.875rem, 1.1rem + 2.2vw, 3rem);
  line-height: 1.04;
}

/* Ilustracja wtopiona w tło. Maska schodzi do zera na krawędziach,
   więc przesunięcie parallaxu nigdy nie odsłania brzegu obrazu. */
.ilustracja {
  position: relative;
  width: min(100%, 600px);
  margin: 0 auto;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent);
          mask-image: radial-gradient(closest-side, #000 50%, transparent);
}
.ilustracja img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 1024px) {
  .ilustracja { width: 100%; }
}

/* ---------- 01 · Misja: filary ---------- */

.filary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px clamp(24px, 3vw, 40px);
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 600px) {
  .filary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.filar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.filar__tytul {
  font-size: clamp(1.375rem, 1.2rem + .5vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.12;
}

/* ---------- 02 · Uniwersytet: trzy wątki zajęć ---------- */

.zajecia { margin-top: clamp(28px, 3.5vw, 40px); }
.zajecia__naglowek { margin-bottom: 10px; }
.zajecia__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}
.zajecia__lista li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px 24px;
  padding-block: 14px;
  border-top: 1px solid var(--line);
}
/* Nazwy wątków w znacznikach równej szerokości, żeby stały jak kolumna */
.zajecia__nazwa.znacznik {
  justify-content: center;
  width: 8.5rem;
}
/* Znacznik na środku wysokości opisu: przy dwuwierszowych opisach nie wisi przy pierwszym wierszu */
@media (min-width: 600px) {
  .zajecia__lista li {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    align-items: center;
  }
}

/* ---------- 02 · Uniwersytet: pasek trzech liczb ---------- */

.liczby { margin: clamp(56px, 6.5vw, 96px) 0 0; }

.liczby__lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--line);
}

/* Na telefonie wykres po lewej w kolumnie stałej szerokości (liczby stoją w jednej linii),
   liczba i opis obok; wyżej wykres nad liczbą, w kolumnach. Bez JavaScriptu kropek i siatki
   nie ma, więc wykresy znikają i zostaje jedna kolumna z liczbami. */
.liczba {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  grid-template-areas: "wykres wartosc" "wykres opis";
  align-items: center;
  column-gap: 16px;
  row-gap: 4px;
  padding-block: clamp(18px, 2.4vw, 32px);
}
.liczba + .liczba { border-top: 1px solid var(--line); }
.liczba__wykres { grid-area: wykres; justify-self: center; }
html:not(.js) .liczba { grid-template-columns: minmax(0, 1fr); grid-template-areas: "wartosc" "opis"; }
html:not(.js) .liczba__wykres { display: none; }
.liczba__wartosc { grid-area: wartosc; align-self: end; }
.liczba__opis { grid-area: opis; align-self: start; }

@media (min-width: 720px) {
  .liczby__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .liczba {
    grid-template-columns: minmax(0, 1fr);
    /* Wiersz wykresu tej samej wysokości w trzech kolumnach: liczby i opisy w jednej linii */
    grid-template-rows: 80px auto auto;
    grid-template-areas: "wykres" "wartosc" "opis";
    align-content: start;
    justify-items: start;
    row-gap: 10px;
    padding-inline: clamp(20px, 3vw, 44px);
  }
  .liczba__wykres { justify-self: start; margin-bottom: 10px; }
  .liczba:first-child { padding-left: 0; }
  .liczba + .liczba { border-top: 0; border-left: 1px solid var(--line); }
}

/* Wykresy przy liczbach, w kolorach trójki akcentów; zgaszone pole to ten sam kolor
   w małym kryciu. Wysokość ta sama w trzech kolumnach. */
.wykres-kropki,
.wykres-siatka { display: grid; }
.wykres-kropki { grid-template-columns: repeat(16, 4px); gap: 3px; }
.wykres-siatka { grid-template-columns: repeat(10, 5px); gap: 2px; }
.wykres-kropki > i,
.wykres-siatka > i {
  aspect-ratio: 1;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.wykres-kropki > i { border-radius: 50%; background: rgba(168, 85, 247, .18); }
.wykres-kropki > i.zapalone { background: var(--violet-jasny); box-shadow: 0 0 6px rgba(168, 85, 247, .7); }
.wykres-siatka > i { border-radius: 1px; background: rgba(240, 54, 159, .16); }
.wykres-siatka > i.zapalone { background: var(--magenta); box-shadow: 0 0 6px rgba(240, 54, 159, .55); }

/* Pierścień: łuk to --udzial ze 100 (pathLength), start u góry */
.wykres-pierscien {
  width: 56px;
  height: 56px;
  overflow: visible;
  rotate: -90deg;
}
.wykres-pierscien circle { fill: none; stroke-width: 9; }
.wykres-pierscien__tor { stroke: rgba(61, 227, 240, .16); }
.wykres-pierscien__luk {
  stroke: var(--cyan);
  stroke-linecap: round;
  stroke-dasharray: var(--udzial) 100;
  filter: drop-shadow(0 0 4px rgba(61, 227, 240, .5));
}

@media (min-width: 720px) {
  .wykres-kropki { grid-template-columns: repeat(16, 6px); gap: 4px; }
  .wykres-siatka { grid-template-columns: repeat(10, 6px); gap: 2px; }
  .wykres-pierscien { width: 76px; height: 76px; }
}

.liczba__wartosc {
  color: var(--ink);
  font: 600 clamp(2.75rem, 2rem + 2vw, 3.75rem)/1 var(--body);
  font-variant-numeric: proportional-nums lining-nums;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.liczba__skala {
  color: var(--muted);
  font-size: .4em;
  font-weight: 500;
  letter-spacing: 0;
}
.liczba__opis { color: var(--ink); }

.liczby__podpis {
  max-width: 48em;
  margin-top: 16px;
  font-size: 1rem;
  line-height: 1.55;
}

/* ---------- 02 · Uniwersytet: wykłady i rozmowy ---------- */

.wyklady,
.glosy { margin-top: clamp(64px, 7vw, 104px); }

.wyklady__lista,
.glosy__lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2.2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 720px) {
  .wyklady__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.wyklad { display: flex; }

.wyklad__miniatura {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #0A0618;
}
.wyklad__miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wyklad__opis {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: clamp(18px, 2.2vw, 26px);
}

.wyklad__tytul {
  font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.18;
}

.wyklad__meta { font-size: 1rem; }

.wyklad__linki {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
}

/* ---------- 02 · Uniwersytet: głosy uczestników ---------- */

/* Dymki rozrzucone jak kartki z ankiet: na przemian, w różnych wysokościach, lekko obrócone,
   w kolorach trójki akcentów. Obrót i przesunięcie przez właściwości rotate i translate,
   bo transform należy do animacji wejścia. Kąt siedzi w --obrot, żeby wejście mogło zacząć
   od mocniejszego przechylenia. Ogonek dymka to jeden mniej zaokrąglony róg. */
.glosy__lista { gap: 18px; }
.glosy__lista > li {
  --glos-linia: rgba(168, 85, 247, .38);
  --glos-tlo: rgba(168, 85, 247, .07);
  max-width: 34rem;
  rotate: var(--obrot, 0deg);
}
.glosy__lista > li:nth-child(1) { --obrot: -1.5deg; margin-right: 14%; }
.glosy__lista > li:nth-child(2) {
  --glos-linia: rgba(61, 227, 240, .32);
  --glos-tlo: rgba(61, 227, 240, .05);
  --obrot: 1.2deg;
  justify-self: end;
  margin-left: 14%;
}
.glosy__lista > li:nth-child(3) {
  --glos-linia: rgba(240, 54, 159, .36);
  --glos-tlo: rgba(240, 54, 159, .06);
  --obrot: -.6deg;
  margin-right: 6%;
}

.glos {
  margin: 0;
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--glos-linia);
  border-radius: 22px 22px 22px 6px;
  background: var(--glos-tlo);
  color: var(--ink);
  font: 600 clamp(1.25rem, 1.1rem + .55vw, 1.5rem)/1.25 var(--display);
  letter-spacing: -.015em;
}
.glosy__lista > li:nth-child(2) .glos { border-radius: 22px 22px 6px 22px; }

@media (min-width: 900px) {
  /* Siatka 12 kolumn: lewy u góry, prawy niżej, trzeci pod pierwszym, wsunięty w lukę */
  .glosy__lista {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 clamp(16px, 2.2vw, 28px);
    align-items: start;
  }
  .glosy__lista > li { max-width: none; margin: 0; }
  .glosy__lista > li:nth-child(1) { --obrot: -2deg; grid-column: 1 / span 5; }
  .glosy__lista > li:nth-child(2) { --obrot: 1.6deg; grid-column: 7 / span 5; margin-top: clamp(56px, 6vw, 88px); }
  .glosy__lista > li:nth-child(3) { --obrot: -.8deg; grid-column: 2 / span 5; margin-top: clamp(-8px, -1vw, 0px); translate: 4% 0; }
  .glosy__lista > li:nth-child(1) .glos { font-size: clamp(1.5rem, 1.1rem + 1vw, 1.875rem); }
}

/* ---------- 03 · Oferta ---------- */

.oferta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2.2vw, 28px);
}
@media (min-width: 720px) {
  .oferta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .obszar--wiodacy { grid-column: 1 / -1; }
}

.obszar__obraz {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
/* Obraz przechodzi w kartę maską, bez doklejonego koloru */
.obszar__obraz img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
          mask-image: linear-gradient(180deg, #000 55%, transparent);
}

.obszar__tresc {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 4px clamp(20px, 2.6vw, 36px) clamp(22px, 2.8vw, 36px);
}

.obszar__tytul {
  font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}

@media (min-width: 900px) {
  .obszar--wiodacy { flex-direction: row; }
  .obszar--wiodacy .obszar__obraz {
    flex: 0 0 48%;
    aspect-ratio: auto;
    min-height: 380px;
  }
  .obszar--wiodacy .obszar__obraz img {
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent);
            mask-image: linear-gradient(90deg, #000 55%, transparent);
  }
  .obszar--wiodacy .obszar__tresc {
    justify-content: center;
    padding: clamp(28px, 3.6vw, 56px) clamp(28px, 3.6vw, 56px) clamp(28px, 3.6vw, 56px) 8px;
  }
  .obszar--wiodacy .obszar__tytul { font-size: clamp(1.75rem, 1.1rem + 1.6vw, 2.5rem); }
}

.oferta__akcja { margin-top: clamp(32px, 4vw, 48px); }

/* ---------- 04 · Gdzie już byliśmy / Z kim pracowaliśmy ---------- */

.gdzie {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(48px, 6vw, 96px);
}
@media (min-width: 1024px) {
  .gdzie {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* Fragment mapy (narzedzia/mapa.py): ląd z kropek, wybrzeże, granica, Wisła i Odra
   w rzucie PUWG 1992. Czerń i przezroczystość w maskach to wartości maski, nie kolory.
   Kropki leżą w siatce viewBoxu, więc rosną z mapą: na wąskiej mapie rzadsza siatka
   (odstęp 20 zamiast 12), żeby gęstość na ekranie była podobna. */
.mapa {
  position: relative;
  aspect-ratio: 1000 / 681.4;
  margin: clamp(28px, 4vw, 48px) 0 3.5rem;
  container: mapa / inline-size;
}
/* Okno odsłaniania mapy (efekt w bloku „Efekty przy przewijaniu”); bez efektów stoi w miejscu */
.mapa__odslona {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.mapa__tlo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  /* Fragment, nie cała mapa: ląd wygasa ku bokom i ku dołowi */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, #000 76%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, #000 76%, transparent);
          mask-composite: intersect;
}
.mapa__polska { stroke: rgba(168, 85, 247, .5); }
.mapa__sasiedzi { stroke: rgba(168, 85, 247, .2); }
.mapa__brzeg { stroke: var(--linia-mocna); stroke-width: 1; }
.mapa__granica { stroke: rgba(168, 85, 247, .45); stroke-width: 1; stroke-dasharray: 2 4; }
.mapa__rzeka { stroke: rgba(61, 227, 240, .3); stroke-width: 1.25; }
.mapa__kropki--rzadko { display: none; }
@container mapa (max-width: 520px) {
  .mapa__kropki--gesto { display: none; }
  .mapa__kropki--rzadko { display: inline; }
}

/* Miasta nad mapą: --x i --y to pozycja punktu w ramce mapy, w tym samym rzucie.
   Strona podpisu zależy od sąsiadów (skupisko Bydgoszcz, Toruń, Ciechocinek, Lipno).
   Pozycjonuje właściwość translate, bo transform należy do animacji wejścia. */
.miasta {
  --odstep: clamp(8px, 1.1vw, 13px);
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  cursor: default;
}

.miasto {
  position: absolute;
  left: var(--x);
  top: var(--y);
  color: var(--ink);
  font: 700 clamp(1rem, .75rem + .9vw, 1.5rem)/1 var(--display);
  letter-spacing: -.02em;
  white-space: nowrap;
  /* Ciemna otoczka: podpis czytelny także nad kropkami lądu */
  text-shadow: 0 0 6px var(--ground), 0 0 14px var(--ground);
}
.miasto::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(61, 227, 240, .12), 0 0 16px rgba(61, 227, 240, .55);
}

/* Nad punktem, w stronę wschodu: na wąskiej mapie nie wchodzi na kropkę Bydgoszczy */
.miasto--nad-w-prawo { translate: 0 -100%; padding-bottom: var(--odstep); padding-left: calc(var(--odstep) * .4); }
.miasto--nad-w-prawo::before { left: 0; bottom: 0; translate: -50% 50%; }

/* Pod punktem, w stronę zachodu: nie wchodzi na podpis sąsiada ze wschodu */
.miasto--pod-w-lewo { translate: -100% 0; padding-top: var(--odstep); padding-right: calc(var(--odstep) * .4); }
.miasto--pod-w-lewo::before { right: 0; top: 0; translate: 50% -50%; }

.miasto--w-lewo { translate: -100% -50%; padding-right: var(--odstep); }
.miasto--w-lewo::before { right: 0; top: 50%; translate: 50% -50%; }

.miasto--w-prawo { translate: 0 -50%; padding-left: var(--odstep); }
.miasto--w-prawo::before { left: 0; top: 50%; translate: -50% -50%; }

.gdzie__instytucje { container-type: inline-size; }

.instytucje {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px 32px;
}
@container (min-width: 470px) {
  .instytucje { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.instytucje__grupa {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
/* Kategorie instytucji w znacznikach czterech kolorów. Krój tekstu, nie monospace: węższy,
   więc „Samorząd i administracja” mieści się w jednym wierszu także w wąskiej kolumnie. */
.instytucje__nazwa.znacznik {
  margin-bottom: 12px;
  padding-inline: .75em;
  font-family: var(--body);
  font-weight: 600;
}
.instytucje__grupa ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.instytucje__grupa li {
  color: var(--ink);
  line-height: 1.4;
}

/* ---------- 06 · Zespół ---------- */

.zespol {
  display: grid;
  gap: clamp(48px, 6vw, 88px);
}

.osoba {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px clamp(28px, 4vw, 64px);
  align-items: start;
}
@media (min-width: 720px) {
  .osoba { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
}

.osoba__zdjecie {
  width: min(100%, 300px);
  border: 1px solid var(--line);
  border-radius: 14px;
}
@media (max-width: 719.98px) {
  .osoba__zdjecie { width: min(100%, 240px); }
}

.osoba__opis {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 40em;
}
.osoba__imie { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); }
.osoba__rola { margin-top: -6px; }

/* Obszary osoby: te same znaczniki co przy filarach, w jednym kolorze, bo to cechy osoby,
   a nie kolejne pozycje zestawu */
.osoba__obszary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -2px 0 2px;
  padding: 0;
  list-style: none;
}

.zdjecie-grupowe { margin: 0; }
.zdjecie-grupowe img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.zdjecie-grupowe figcaption {
  margin-top: 12px;
  color: var(--muted);
  font: 400 1rem/1.4 var(--mono);
}
@media (min-width: 1100px) {
  .zdjecie-grupowe { width: min(100%, 980px); margin-left: auto; }
}

/* ---------- 07 · Kontakt ---------- */

.kontakt {
  display: grid;
  gap: 16px;
  margin-top: clamp(28px, 3.5vw, 40px);
}

.kontakt__karta,
.kontakt__formalne {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(12, 7, 32, .5);
  font-style: normal;
}
.kontakt__etykieta { margin-bottom: 4px; }

.kontakt__nazwa {
  color: var(--ink);
  font: 700 clamp(1.375rem, 1.2rem + .6vw, 1.75rem)/1.15 var(--display);
  letter-spacing: -.02em;
}

/* Jedyny klikalny kontakt: mail */
.kontakt__mail {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  max-width: 100%;
  color: var(--ink);
  font: 600 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.3 var(--body);
  text-decoration: underline;
  text-decoration-color: var(--violet);
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
  overflow-wrap: anywhere;
  transition: text-decoration-color .2s;
}
.kontakt__mail:hover { text-decoration-color: var(--cyan); }

.kontakt__telefon {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.formalne {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin: 0 0 6px;
}
.formalne div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.formalne dt {
  color: var(--muted);
  font: 400 1rem/1.6 var(--mono);
}
.formalne dd {
  margin: 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- Stopka ---------- */

.stopka {
  padding-block: 28px 40px;
  border-top: 1px solid var(--line);
}
.stopka__wnetrze {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
}

/* ---------- Galeria zrzutów (okno <dialog>) ---------- */

html.galeria-otwarta { overflow: hidden; }

.galeria {
  width: min(100% - 32px, 1280px);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--linia-mocna);
  border-radius: 16px;
  background: #0E0826;
  color: var(--muted);
  box-shadow: 0 30px 120px -20px rgba(0, 0, 0, .8);
}
.galeria::backdrop {
  background: rgba(6, 3, 16, .84);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.galeria__ramka { position: relative; }

.galeria__naglowek {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 10px 10px 20px;
  border-bottom: 1px solid var(--line);
}
.galeria__licznik {
  flex: none;
  color: var(--muted);
  font: 400 1rem/1 var(--mono);
  font-variant-numeric: tabular-nums;
}
.galeria__tytul {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.galeria__kadr {
  margin: 0;
  padding: 18px 84px 20px;
  touch-action: pan-y;
}
.galeria__obraz {
  width: auto;
  max-width: 100%;
  max-height: calc(100dvh - 210px);
  margin-inline: auto;
  border-radius: 8px;
  background: #0A0618;
}
.galeria__podpis {
  max-width: 48em;
  margin: 14px auto 0;
  color: var(--ink);
  text-align: center;
}

.galeria__przycisk {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(12, 7, 32, .82);
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .2s, background-color .2s;
}
.galeria__przycisk:hover { border-color: var(--violet); background: var(--surface); }
.galeria__przycisk[hidden] { display: none; }
.galeria__przycisk::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--ikona) center / contain no-repeat;
          mask: var(--ikona) center / contain no-repeat;
}
.galeria__zamknij { border-radius: var(--promien); --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.galeria__poprzedni,
.galeria__nastepny {
  position: absolute;
  top: calc(50% + 30px);
  translate: 0 -50%;
}
.galeria__poprzedni { left: 18px; --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 3.5L5.5 8l4.5 4.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.galeria__nastepny { right: 18px; --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5l4.5 4.5L6 12.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Telefon: okno na cały ekran, strzałki pod zrzutem */
@media (max-width: 719.98px) {
  .galeria {
    width: 100%;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .galeria__ramka {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .galeria__kadr {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: 12px 0 96px;
  }
  .galeria__obraz { border-radius: 0; max-height: calc(100dvh - 220px); }
  .galeria__podpis { padding-inline: var(--margines); }
  .galeria__poprzedni,
  .galeria__nastepny { top: auto; bottom: 24px; translate: none; }
  .galeria__poprzedni { left: calc(50% - 64px); }
  .galeria__nastepny { right: calc(50% - 64px); }
}

/* ---------- Ruch: efekty przy przewijaniu (js/przewijanie.js) ---------- */

/* Klasę .efekty-przewijania dodaje dopiero skrypt, i to tylko bez ograniczonego ruchu.
   Bez niej (bez JavaScriptu, przy prefers-reduced-motion) mapa, miasta, znaczniki i zdania
   stoją od razu w stanie końcowym. Przejścia siedzą w stanie docelowym, więc stan wyjściowy
   (wygaszony, zasłonięty) zapada od razu, gdy skrypt dodaje klasę. */

/* Zdania-tytuły: słowa jaśnieją po kolei w miarę przewijania i gasną przy cofaniu
   (próg liczy skrypt) */
.efekty-przewijania .slowo {
  opacity: .28;
  transition: opacity .35s ease;
}
.efekty-przewijania .slowo--jasne { opacity: 1; }

/* Znaczniki: wjeżdżają wygaszone i po chwili zapalają się swoim kolorem z jednym
   krótkim rozbłyskiem. Na liście kolejne znaczniki odrobinę później. */
.efekty-przewijania [data-wejscie]:not(.widoczny) .znacznik {
  border-color: var(--line);
  background-color: transparent;
  color: var(--muted);
}
.efekty-przewijania [data-wejscie].widoczny .znacznik {
  --opoznienie-znacznika: calc(var(--opoznienie, 0s) + .45s + var(--kolejnosc, 0) * 110ms);
  position: relative;
  transition: color .5s ease, background-color .5s ease, border-color .5s ease;
  transition-delay: var(--opoznienie-znacznika);
}
/* Rozbłysk to poświata w pseudo-elemencie: zmienia się tylko jej przezroczystość,
   więc przeglądarka nie maluje znacznika od nowa w każdej klatce */
.efekty-przewijania [data-wejscie].widoczny .znacznik::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 18px 1px var(--znacznik-linia), inset 0 0 10px var(--znacznik-tlo);
  opacity: 0;
  pointer-events: none;
  animation: znacznik-blysk 1.2s ease-out var(--opoznienie-znacznika);
}
.zajecia__lista li:nth-child(2) .znacznik,
.osoba__obszary .znacznik:nth-child(2) { --kolejnosc: 1; }
.zajecia__lista li:nth-child(3) .znacznik,
.osoba__obszary .znacznik:nth-child(3) { --kolejnosc: 2; }
@keyframes znacznik-blysk {
  30% { opacity: 1; }
}

/* Mapa odsłania się z zachodu na wschód, gdy widać jej większą część (klasa .mapa--odslonieta).
   Okno z overflow: hidden wjeżdża z lewej, a mapa w nim przesuwa się o tyle samo w drugą
   stronę, więc stoi w miejscu, a krawędź okna sunie po niej na wschód. Obie transformacje
   liczy kompozytor: kropek SVG nie trzeba malować w każdej klatce, jak przy clip-path.
   Miasta wchodzą w tej samej kolejności: --opoznienie w index.html to chwila, w której ta krzywa
   dochodzi do --x miasta (Szczecin 330 ms … Warszawa 1120 ms); dla nowego miasta poda je narzedzia/mapa.py. */
.efekty-przewijania .mapa:not(.mapa--odslonieta) .mapa__odslona { transform: translateX(-100%); }
.efekty-przewijania .mapa:not(.mapa--odslonieta) .mapa__tlo { transform: translateX(100%); }
.efekty-przewijania .mapa--odslonieta .mapa__odslona,
.efekty-przewijania .mapa--odslonieta .mapa__tlo { transition: transform 1.6s cubic-bezier(.5, 0, .3, 1); }
.efekty-przewijania .mapa:not(.mapa--odslonieta) .miasto {
  opacity: 0;
  transform: translateY(10px);
}
.efekty-przewijania .mapa--odslonieta .miasto {
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--opoznienie, 0s);
}

/* Dymki z głosami opadają na miejsce: zaczynają mocniej przechylone i dochodzą do swojego
   kąta z lekkim odbiciem */
.efekty-przewijania .glosy__lista > li[data-wejscie]:not(.widoczny) { rotate: calc(var(--obrot, 0deg) * 4); }
.efekty-przewijania .glosy__lista > li.widoczny {
  transition: opacity var(--wejscie), transform var(--wejscie), rotate 1.1s cubic-bezier(.34, 1.56, .64, 1);
  transition-delay: var(--opoznienie, 0s);
}

/* ---------- Ograniczony ruch: bez scramble i bez parallaxu ---------- */

@media (prefers-reduced-motion: reduce) {
  .js [data-wejscie] { opacity: 1; transform: none; transition: none; }
  .tryb-sieci__ikona circle { animation: none; }
  .przycisk--glowny:hover { transform: none; }
  .kafel__galeria:hover img { transform: none; }
}