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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad-x); }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink-blue); color: var(--ink); padding: var(--gap-xs) var(--gap-s);
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--ink-blue); outline-offset: 3px; }

/* --- pasek górny --- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-s) var(--gap-m);
  padding: var(--gap-s) var(--pad-x);
  /* Bez backdrop-filter. Rozmycie tła na przyklejonym pasku jest przeliczane
     przy każdej klatce przewijania na całej szerokości okna i to jedna
     z najczęstszych przyczyn szarpania. Na czerni i tak nic nie wnosiło. */
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}
.wordmark { font-weight: 900; letter-spacing: -0.02em; color: var(--ink-blue); }
.wordmark b { color: var(--paper); font-weight: 900; }

.scenenav { display: flex; flex-wrap: wrap; gap: var(--gap-s); margin-inline-end: auto; }
.scenenav a {
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
.scenenav a:hover, .scenenav a[aria-current="true"] { color: var(--paper); }

.langswitch { display: flex; gap: 2px; }
.langswitch button {
  font-family: var(--font-mono); font-size: var(--step--1);
  background: transparent; color: var(--muted);
  border: 1px solid var(--line-2); padding: 4px 8px; cursor: pointer;
}
.langswitch button[aria-pressed="true"] { color: var(--ink); background: var(--ink-blue); border-color: var(--ink-blue); }

/* --- sceny --- */
section[data-scene] { padding-block: var(--gap-xl); border-bottom: 1px solid var(--line); }
section[data-scene] > .wrap > * + * { margin-block-start: var(--gap-s); }

h1 { font-size: var(--step-4); line-height: 0.98; letter-spacing: -0.035em; font-weight: 900; margin: 0; text-wrap: balance; max-width: 18ch; }
h2 { font-size: var(--step-3); line-height: 1.02; letter-spacing: -0.03em;  font-weight: 900; margin: 0; text-wrap: balance; }
h3 { font-size: var(--step-1); letter-spacing: -0.01em; font-weight: 700; margin: 0; }
p  { margin: 0; max-width: 62ch; }
.lead { font-size: var(--step-1); color: var(--paper); max-width: 40ch; text-wrap: balance; }
.note { color: var(--muted); font-family: var(--font-mono); font-size: var(--step--1); }

.kicker {
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-blue);
}

/* --- listy --- */
.parts-lead {
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--muted);
}
.parts, .clients { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--gap-xs) var(--gap-s); }
.parts li, .clients li {
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--line-2); padding: 6px 10px; color: var(--muted);
}

/* 320px daje 1, 2 albo 3 kolumny - kazda dzieli szesc kompetencji bez reszty.
   Przy czterech kolumnach dwie ostatnie komorki zostaja puste i przeswituje
   przez nie tlo siatki, co wyglada jak niedokonczony kafelek. */
.skills { counter-reset: skill; list-style: none; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.skills li { background: var(--ink); padding: var(--gap-s); }
.skills li::before { content: "0" counter(skill) " "; counter-increment: skill; font-family: var(--font-mono); color: var(--ink-blue); }

.stats { display: flex; flex-wrap: wrap; gap: var(--gap-m); margin: 0; }
.stats div { min-width: 6ch; }
.stats dt { font-size: var(--step-3); font-weight: 900; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.stats dd { margin: 0; font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }

.timeline { list-style: none; padding: 0; display: grid; gap: var(--gap-xs); }
.timeline b { font-family: var(--font-mono); color: var(--ink-blue); margin-inline-end: var(--gap-xs); }

.branches { list-style: none; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.branches li { background: var(--ink); padding: var(--gap-s); }
.branches a { color: var(--ink-blue); }

/* Tabela jest szeroka - przewija się wewnątrz siebie, nigdy nie rozpycha strony.
   content-visibility tylko tutaj: to jedyny naprawdę ciężki fragment DOM (31 wierszy).
   Świadome odejście od specu par. 6.4, który sugerował objęcie nim całych sekcji -
   w połączeniu ze ScrollTriggerem i przypinaniem z planu 2 powoduje to skakanie
   przewijania, a zysk na siedmiu sekcjach i tak byłby żaden. */
.projects {
  width: 100%; border-collapse: collapse; display: block; overflow-x: auto;
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
.projects th, .projects td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--step--1); white-space: nowrap; }
.projects th { color: var(--muted); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; }

/* Sloty na materiał zdjęciowy. Puste mają wyglądać na celowe, a nie na dziurę:
   pokazują ramkę kadru z podpisem, tak jak pusty kadr w dokumentacji zdjęciowej.
   Po wstawieniu zdjęcia ramka znika sama. */
.slot { margin-block-start: var(--gap-m); }
.slot:empty::before {
  content: attr(data-caption);
  display: grid; place-items: center;
  /* Wąski pasek, nie kadr 21:9. Pusty prostokąt na pełną szerokość czyta się
     jak niedokończona strona - a slot ma znaczyć miejsce, nie ziać pustką. */
  min-height: 5rem;
  border: 1px dashed var(--line-2);
  color: var(--muted-2);
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: var(--track-label); text-transform: uppercase;
  text-align: center; padding: var(--gap-s);
}
.slot img, .slot video { display: block; width: 100%; height: auto; }

/* Canvas jest ozdobą - równoległa tabela realizacji niesie tę samą treść
   i to ona jest dostępna dla czytników ekranu. */
.map-wrap { position: relative; margin-block: var(--gap-m); }
.map-wrap canvas { display: block; width: 100%; aspect-ratio: 16 / 8; background: #070A0D; border: 1px solid var(--line); }
.map-progress {
  position: absolute; left: var(--gap-s); bottom: var(--gap-s); margin: 0; max-width: none;
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted);
}
.map-progress b { color: var(--paper); font-size: var(--step-1); font-variant-numeric: tabular-nums; }

/* Objaśnienie dwóch znaków na mapie */
.map-key {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  margin-block-start: var(--gap-s); max-width: none;
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted);
}
.map-key span + span { margin-inline-end: var(--gap-s); }
.map-key .k-site, .map-key .k-branch {
  width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto;
}
.map-key .k-site   { background: #8FD3FF; box-shadow: 0 0 0 3px rgba(79,179,232,0.22); }
.map-key .k-branch { border: 1px solid rgba(232,234,236,0.75); }

/* Legenda krajowa. Kafelki, nie tabela: ma się czytać jednym rzutem oka
   i zawijać samo z siebie na każdej szerokości. */
.legend-title {
  margin-block: var(--gap-m) var(--gap-s);
  font-family: var(--font-mono); font-size: var(--step--1); font-weight: 400;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted);
}
.maplegend {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.maplegend li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  background: #0B1014;
  font-size: var(--step--1);
}
.maplegend i {                       /* kod ISO - ta sama etykieta co na mapie */
  font-family: var(--font-mono); font-style: normal;
  letter-spacing: var(--track-label); color: var(--ink-blue);
}
.maplegend b {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--paper);
}

/* --- stopka --- */
.sitefoot {
  /* Bez marginesu górnego: sekcje mają własny duży odstęp dolny i po dodaniu
     drugiego między kontaktem a stopką robiła się prawie połowa ekranu pustki. */
  border-top: 1px solid var(--line);
  background: var(--ink-2);
  padding-block: var(--gap-l) var(--gap-m);
}
.foot-grid {
  display: grid; gap: var(--gap-m);
  /* 260px, nie mniej: przy węższej kolumnie adres oddziału łamie się
     w środku ulicy i stopka wygląda na zepsutą. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.foot-logo { margin: 0 0 var(--gap-xs); font-size: var(--step-1); }
.foot-claim { margin: 0; color: var(--muted); font-size: var(--step--1); }

.foot-col h2 {
  margin: 0 0 var(--gap-s);
  font-family: var(--font-mono); font-size: var(--step--1); font-weight: 400;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted);
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot-col a { color: var(--paper); text-decoration: none; border-bottom: 1px solid transparent; }
.foot-col a:hover, .foot-col a:focus-visible { border-bottom-color: var(--ink-blue); }
.foot-col li span { display: block; color: var(--muted); font-size: var(--step--1); }

/* Tabelka rysunkowa - dokładnie ta sama konwencja co w prawym dolnym rogu
   rysunku technicznego: pola opisowe w ramkach, treść monospace'em. */
.titleblock {
  display: grid; margin-block: var(--gap-m) var(--gap-s);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  /* Kreski robi tło prześwitujące przez jednopikselowe szczeliny, a nie
     obramowania pól. Przy zawinięciu do dwóch rzędów obramowania zostawiały
     wiszące krechy i brak linii poziomej; szczeliny wyglądają poprawnie
     przy każdej liczbie kolumn. */
  gap: 1px; background: var(--line-2); border: 1px solid var(--line-2);
}
.titleblock > div { padding: 8px 12px; background: var(--ink-2); }
.titleblock dt {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted-2);
}
.titleblock dd {
  margin: 2px 0 0;
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.foot-legal {
  margin: 0; max-width: none;
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted-2);
}

/* --- oznaczenie wersji koncepcyjnej; usuwane przed wdrożeniem --- */
.concept {
  margin: 0;
  max-width: none;          /* globalna reguła p{max-width:62ch} zwężałaby pasek */
  padding: 6px var(--pad-x);
  background: #2A1E0C;
  border-bottom: 1px solid #6B4A16;
  color: #E0B970;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-align: center;
}