/* ── Semper Cara — strona spółki ────────────────────────────────────────────
   KIERUNEK (kontrakt)

   THESIS: To jest strona, którą czyta weryfikator — analityk Dun & Bradstreet,
   recenzent Apple, urzędnik, kontrahent. Ma odpowiedzieć na jedno pytanie:
   „czy ta spółka istnieje i czy jest tym, za kogo się podaje”. Wszystko inne
   jest podporządkowane tej odpowiedzi.

   OWN-WORLD: DOKUMENT REJESTROWY, nie landing. Papier i atrament, numerowane
   sekcje, do których da się odesłać, dane w tabeli, kod PKD przy każdej pozycji
   działalności. Rejestr nie jest pasem w środku strony — jest gramatyką całej
   strony i otwiera treść. Świadomie NIE dziedziczy fioletowej nocy z przygrobie.pl;
   wspólne z marką zostają tylko kroje, bo to jedna grupa kapitałowa.

   FORM: Sekcja 1 to dane rejestrowe. Numer sekcji jest adresem, na który można
   się powołać w korespondencji — dlatego numeracja siedzi w treści, nie w CSS.

   SYSTEM: Własna rampa typograficzna (--t-100…--t-900) i własna paleta. Sidecar
   `.impeccable/design.json` opisuje `www/` (fioletowa noc), NIE tę stronę.
   Każdy rozmiar tekstu pochodzi z rampy; literałów `font-size` w regułach nie ma.

   CZEGO TU NIE MA I DLACZEGO: wersalikowych nadtytułów nad nagłówkami (etykieta
   nie niesie informacji, której nie niesie nagłówek), siatek jednakowych kart
   (leniwy kontener; lista definicyjna niesie tę samą treść i nie zostawia sierot),
   kolorowej krawędzi bocznej grubszej niż 1px, gradientów, cieni elewacyjnych.

   ZERO JAVASCRIPTU. Treść i dane rejestrowe są w HTML-u. Strona, której dane
   dorabia skrypt, dla części czytników i crawlerów jest stroną bez danych.
   ──────────────────────────────────────────────────────────────────────── */

:root {
  /* Paleta — papier i atrament */
  --papier:      #f7f5f1;
  --papier-2:    #ece8df;
  --atrament:    #16191f;
  --atrament-2:  #454c57;
  --akcent:      #0d5c56;
  --akcent-mocny:#0a4a45;
  --linia:       #cdc7ba;
  --linia-mocna: #a8a091;
  --uwaga:       #8a5a00;
  --uwaga-tlo:   #fdf0d0;

  /* Rampa typograficzna — dziewięć stopni, nic poza nimi */
  --t-100: 0.78rem;   /* etykieta wersalikowa w metryce i liście definicyjnej */
  --t-200: 0.875rem;  /* stopka, drobne */
  --t-300: 0.95rem;   /* tekst drugorzędny */
  --t-400: clamp(1rem, 0.96rem + 0.2vw, 1.075rem); /* tekst podstawowy */
  --t-500: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);   /* lede */
  --t-600: 1.3rem;    /* h3, nazwa marki na wąskim ekranie */
  --t-700: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem);  /* h2 */
  --t-800: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);    /* wordmark marki */
  --t-900: clamp(2.6rem, 1.3rem + 5.4vw, 5.25rem); /* h1 dokumentu prawnego */
  --t-950: clamp(3.25rem, 1rem + 9vw, 8.5rem);     /* wordmark na pierwszym ekranie */

  /* Miara wiersza — JEDNA wartość na całą stronę. Trzy osobne nadpisania
     (40–44rem) dawały ~93 znaki w wierszu przy zamierzonych ~75. */
  --tekst-max:   36rem;
  --strona-max:  68rem;
  --rytm:        clamp(3.5rem, 7vw, 6rem);
}

/* Ciemność jest CIEPŁA, nie odwrócona. Papier w półmroku żółknie i szarzeje —
   nie robi się niebieski. Mechaniczna inwersja jasnego na zimny grafit gubiła
   temperaturę, na której stoi cała teza „papier i atrament”. */
@media (prefers-color-scheme: dark) {
  :root {
    --papier:      #191612;
    --papier-2:    #221e18;
    --atrament:    #f1ede4;
    --atrament-2:  #b3ab9b;
    --akcent:      #74cfbd;
    --akcent-mocny:#95e0d1;
    --linia:       #37312a;
    --linia-mocna: #524a3f;
    --uwaga:       #f0c264;
    --uwaga-tlo:   #3b2f14;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Powierzchnie przeglądarki należą do projektu tak samo jak reszta. */
  scrollbar-color: var(--linia-mocna) var(--papier);
  accent-color: var(--akcent);
}

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

::selection {
  background: var(--akcent);
  color: var(--papier);
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--atrament);
  caret-color: var(--akcent);
  font-family: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--t-400);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Cardo', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1rem; max-width: var(--tekst-max); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--akcent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--akcent-mocny); }

a:focus-visible,
.skip:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--papier);
  color: var(--atrament);
  padding: 0.7rem 1.1rem;
  z-index: 10;
}
.skip:focus { left: 0.75rem; top: 0.75rem; }

.uklad {
  max-width: var(--strona-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

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

/* Wartości rejestrowe zaznaczają się w całości jednym kliknięciem. Odbiorca tej
   strony przepisuje je do formularza D&B i Apple — ręczne przeciąganie przez
   „ul. Klaudyny Potockiej 25” to moment, w którym powstaje literówka. */
.kopiowalne { user-select: all; -webkit-user-select: all; }

/* Sygnatura sprawy zaznacza się SAMA, nie razem ze zdaniem, w którym stoi:
   zagnieżdżony `user-select: all` wygrywa nad rodzicem przy kliknięciu w niego.
   To jedyna wartość na stronie, którą weryfikator może sprawdzić u źródła. */
.w-toku code { user-select: all; -webkit-user-select: all; }

/* ── Belka ─────────────────────────────────────────────────────────────── */

/* Belka zostaje przy górnej krawędzi przez całe przewijanie. Strona ma kilka
   ekranów, a nawigacja jest jedynym sposobem przejścia między sekcjami — bez
   tego trzeba było wracać na samą górę.

   Tło musi być nieprzezroczyste, inaczej treść przechodzi pod spodem. Zamiast
   cienia elewacyjnego zostaje ta sama włosowa linia, co wcześniej. */
.belka {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--papier);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 2rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--linia);
}

/* Skok kotwicą musi zatrzymać się POD belką, nie za nią. Wartości biorą się
   z realnie zmierzonej wysokości belki: 68 px na desktopie, 127 px na telefonie,
   gdzie nawigacja schodzi do własnego wiersza. */
:target,
section,
.glowka {
  scroll-margin-top: 5.5rem;
}

@media (max-width: 46rem) {
  :target,
  section,
  .glowka {
    scroll-margin-top: 9rem;
  }
}

.belka__marka {
  font-family: 'Cardo', Georgia, serif;
  font-size: var(--t-600);
  letter-spacing: 0.02em;
  color: var(--atrament);
  text-decoration: none;
  margin-right: auto;
  padding-block: 0.25rem;
}

.belka nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.4rem;
  font-size: var(--t-300);
}

/* Każdy cel dotykowy ma co najmniej 24 px wysokości (WCAG 2.2, SC 2.5.8).
   Pięć odnośników w belce i stopce miało 19–23 px. */
.belka nav a,
.jezyk,
.stopka nav a,
.rejestr__poz dd a,
.kontakt__lista dd a,
.metryka dd a,
.marka__nazwa a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 0.25rem;
}

.belka nav a {
  color: var(--atrament-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.belka nav a:hover {
  color: var(--atrament);
  border-bottom-color: var(--linia-mocna);
}

.jezyk {
  font-size: var(--t-200);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--akcent);
  text-decoration: none;
  white-space: nowrap;
}
.jezyk:hover { text-decoration: underline; }

/* Na telefonie pięć pozycji nawigacji zawijało się w cztery wiersze i belka
   zjadała 199 px, zanim zaczynała się treść. Zamiast tego jeden wiersz, który
   przewija się w poziomie wewnątrz siebie — dostęp do sekcji zostaje. */
@media (max-width: 46rem) {
  .belka { gap: 0.25rem 1rem; }
  .belka nav {
    order: 3;
    flex-basis: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0 1.1rem;
    padding-bottom: 0.35rem;
    scrollbar-width: thin;
  }
  .belka nav a { white-space: nowrap; }
}

/* ── Główka dokumentu ──────────────────────────────────────────────────── */

/* Pierwszy ekran to karta tytułowa dokumentu, nie akapit wstępny.
   Cała siła idzie w JEDEN gest: nazwę spółki złożoną Cardo w pełnej skali —
   krojem, który strona już ma, tylko dotąd używanym w połowie mocy. Reszta
   otwarcia schodzi do roli podpisu, żeby ten gest był czytelny.

   Bez kreski i bez paska u góry (decyzja właściciela): kolor akcentu został
   przy odnośnikach, przełączniku języka i wskaźniku fokusu. */
.glowka {
  padding-block: clamp(4rem, 9vw, 7.5rem) clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--linia);
}

.glowka h1 {
  font-size: var(--t-950);
  line-height: 1;
  letter-spacing: -0.015em;
  margin-bottom: 0;
}


/* Firma prawna stoi TUŻ pod nazwą handlową, w pierwszym ekranie. Wcześniej
   pełne brzmienie leżało 3 400 px niżej, a pierwszy ekran — ten, który trafia
   na zrzut w zgłoszeniu do sklepu — niósł tylko nazwę handlową i rok założenia. */
.glowka__firma {
  font-size: var(--t-500);
  font-family: 'Cardo', Georgia, serif;
  color: var(--atrament);
  margin: 0 0 1.5rem;
  max-width: none;
}

.glowka__lede {
  font-size: var(--t-500);
  color: var(--atrament-2);
  max-width: 32rem;
  line-height: 1.5;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
}

/* ── Metryka dokumentu i inne listy etykieta → wartość ─────────────────── */

.metryka,
.kontakt__lista {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.5rem 2.5rem;
  max-width: 52rem;
}

.metryka {
  padding-top: 1.5rem;
  border-top: 1px solid var(--linia);
}

.metryka__poz,
.kontakt__poz { min-width: 0; }

.metryka dt,
.kontakt__lista dt {
  font-size: var(--t-100);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--atrament-2);
  margin-bottom: 0.3rem;
}

.metryka dd,
.kontakt__lista dd {
  margin: 0;
  font-size: var(--t-300);
  line-height: 1.5;
}

.kontakt__lista dd { font-size: var(--t-400); }
.kontakt__lista dd a { font-weight: 500; }

address { font-style: normal; }

/* ── Sekcje ────────────────────────────────────────────────────────────── */

section { padding-block: var(--rytm); }
section + section { border-top: 1px solid var(--linia); }

/* Selektor bez `>`, bo sekcja rejestrowa zagnieżdża nagłówek w kontenerze
   układu. Z `section > h2` nagłówek najważniejszej sekcji na stronie spadał
   do domyślnego stylu przeglądarki: 25,8 px wobec 40 px u pozostałych. */
section h2 {
  font-size: var(--t-700);
  margin-bottom: 1.25rem;
  max-width: 30ch;
}

.wstep {
  color: var(--atrament-2);
  max-width: var(--tekst-max);
  margin-bottom: 2.5rem;
}

/* ── Lista pozycji: przedmiot działalności i zasady ────────────────────── */

.pozycje {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linia);
}

.pozycja {
  display: grid;
  gap: 0.35rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--linia);
}

@media (min-width: 52rem) {
  .pozycja {
    grid-template-columns: 18rem minmax(0, 1fr);
    gap: 0 3rem;
    align-items: start;
  }
}

.pozycja dt {
  font-family: 'Cardo', Georgia, serif;
  font-size: var(--t-600);
  line-height: 1.35;
}

.pozycja dd {
  margin: 0;
  color: var(--atrament-2);
  max-width: var(--tekst-max);
}

/* ── Marka / produkt ───────────────────────────────────────────────────── */

.marka {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--papier-2);
}

@media (min-width: 46rem) {
  .marka { grid-template-columns: 15rem minmax(0, 1fr); gap: 2.5rem; }
}

.marka__nazwa {
  font-family: 'Cardo', Georgia, serif;
  font-size: var(--t-800);
  line-height: 1.1;
  max-width: none;
}

.marka__haslo {
  display: block;
  font-family: 'Libre Franklin', sans-serif;
  font-size: var(--t-200);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--atrament-2);
  margin-top: 0.6rem;
}

/* Nazwa marki jest odnośnikiem do jej witryny. Podkreślenie neutralne, nie
   akcentowe — wordmark ma zostać wordmarkiem, ale musi dać się rozpoznać jako
   odnośnik bez polegania na samym kolorze. Kolor linii dawał 2,12:1, czyli
   poniżej progu 3:1 dla elementu, który JEST jedynym sygnałem klikalności. */
.marka__nazwa a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--atrament-2);
  text-underline-offset: 0.12em;
}
.marka__nazwa a:hover { text-decoration-color: var(--akcent); }

/* Zdanie, na którym stoi cała konstrukcja anty-pracodawcza. Stoi PRZED blokiem
   marki i w stopniu tekstu podstawowego — wcześniej było złożone jako przypis
   pod blokiem, czyli jako najmniej ważny tekst na stronie. */
.zastrzezenie {
  font-size: var(--t-400);
  color: var(--atrament);
  max-width: var(--tekst-max);
  margin-bottom: 2rem;
}
.zastrzezenie b { font-weight: 600; }

/* ── Dane rejestrowe — sekcja otwierająca dokument ─────────────────────── */

/* Sekcja danych rejestrowych nie ma już własnej tinty ani ramki — dzieli grunt
   z resztą strony i oddziela się tą samą włosową linią, co każda inna sekcja.
   Klasa zostaje, bo arkusz do druku nadal obrysowuje ten blok na papierze. */

/* Czternaście par etykieta-wartość w dwóch kolumnach zamiast jednej długiej
   kolumny na cały ekran. Pozycje z długą wartością — sąd, sygnatura, zarząd,
   przedmiot działalności — biorą obie kolumny, bo i tak by się złamały. */
.rejestr__dane {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linia);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 58rem;
}

@media (min-width: 52rem) {
  .rejestr__dane {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
  }
  .rejestr__poz--szeroka { grid-column: 1 / -1; }
}

.rejestr__poz {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: 0 1.25rem;
  align-items: baseline;
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--linia);
  font-size: var(--t-300);
}

.rejestr__poz dt {
  font-weight: 500;
  color: var(--atrament-2);
}

.rejestr__poz dd {
  margin: 0;
  color: var(--atrament);
  font-variant-numeric: tabular-nums;
}

/* Wartość w wierszu pełnoszerokościowym biegła przez całe 740 px — około
   97 znaków w wierszu przy zamierzonych ~75. Pełna szerokość jest tam po to,
   żeby długa wartość się nie łamała w wąskiej kolumnie, a nie po to, żeby
   rozciągnąć wiersz na całą sekcję. */
.rejestr__poz--szeroka dd { max-width: var(--tekst-max); }

@media (max-width: 34rem) {
  .rejestr__poz {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
  }
  .rejestr__poz dt { font-size: var(--t-200); }
}

/* Stan „w toku” zamiast pustej rubryki. Pusta rubryka na stronie spółki
   czyta się jak ukrywanie — gorzej niż jawnie napisany brak. */
.w-toku {
  color: var(--atrament-2);
  font-style: italic;
}
.w-toku code {
  font-family: ui-monospace, monospace;
  font-size: 0.87em;
  font-style: normal;
  background: var(--papier);
  padding: 0.1em 0.35em;
  border: 1px solid var(--linia);
  border-radius: 2px;
  white-space: nowrap;
}

/* Znacznik pola, którego nie wolno opublikować pustym. Ma być widoczny. */
.brak {
  background: var(--uwaga-tlo);
  color: var(--uwaga);
  padding: 0.35em 0.55em;
  font-weight: 500;
}

/* ── Stopka ────────────────────────────────────────────────────────────── */

.stopka {
  border-top: 1px solid var(--linia);
  padding-block: 2.5rem 3.5rem;
  font-size: var(--t-200);
  color: var(--atrament-2);
}

.stopka__wiersz {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  align-items: baseline;
}

.stopka__prawa { margin-right: auto; max-width: var(--tekst-max); }

.stopka nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}

/* ── Dokument prawny (polityka prywatności) ────────────────────────────── */

.dokument { padding-block: var(--rytm); }

.dokument h1 {
  font-size: var(--t-700);
  margin-bottom: 0.75rem;
}

.dokument__data {
  color: var(--atrament-2);
  font-size: var(--t-300);
  margin-bottom: 3rem;
}

.dokument h2 {
  font-size: var(--t-600);
  margin: 2.75rem 0 0.85rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linia);
}

.dokument p,
.dokument li { max-width: var(--tekst-max); }

.dokument ul { padding-left: 1.15rem; margin: 0 0 1rem; }
.dokument li { margin-bottom: 0.4rem; }

/* ── Druk ──────────────────────────────────────────────────────────────── */
/* Analityk D&B i recenzent Apple dołączają dane rejestrowe do akt — drukują
   je albo zapisują jako PDF. Bez tego bloku pas rejestrowy znika na papierze
   (tinta 1,08:1 wobec tła), a adresy odnośników przepadają. */
@media print {
  :root {
    --papier:      #ffffff;
    --papier-2:    #ffffff;
    --atrament:    #000000;
    --atrament-2:  #333333;
    --akcent:      #000000;
    --akcent-mocny:#000000;
    --linia:       #999999;
    --linia-mocna: #000000;
  }

  body { font-size: 10pt; line-height: 1.45; }

  /* Wordmark jest gestem ekranu. Na papierze 136 px zjadałoby pół kartki,
     a dokument rejestrowy ma zaczynać się od danych, nie od nazwy na całą stronę. */
  .glowka h1 { font-size: 24pt; }
  .glowka__lede { font-size: 11pt; }

  .belka nav, .jezyk, .skip { display: none; }
  .belka { border-bottom: 1pt solid var(--linia-mocna); }

  .rejestr { border: 1pt solid var(--linia-mocna); padding: 8pt; }
  .rejestr__dane { max-width: none; }
  .rejestr__poz { padding-block: 2pt; }

  section, .glowka { padding-block: 12pt; break-inside: avoid; }
  .pozycja, .marka, table { break-inside: avoid; }
  h1, h2 { break-after: avoid; }

  /* Odnośnik na papierze bez adresu jest martwy. */
  a[href^="http"]::after,
  a[href^="mailto"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: var(--atrament-2);
    word-break: break-all;
  }
  a[href^="#"]::after { content: none; }
}