@charset "utf-8";
/* =====================================================================
   PLANISFERA — system projektowy makiety atlasnieba.pl
   Seria STRONY-WWW-ST-CBF. Makieta HTML+CSS: zero JavaScriptu, zero zdjęć,
   zero znaków firmowych, zero formularzy. Wszystkie barwy przez zmienne.

   IDEA: planisfera to obrotowa mapa nieba — krążek, na którym brzeg jest
   horyzontem, a środek zenitem. Cała makieta jest ciemna, bo serwis uczy
   obserwacji nocą, a jasna strona otwarta w terenie niszczy adaptację oczu.
   Treść leży na niej jak arkusz podświetlony czerwonawym światłem: pasma
   sekcji unoszą się nad tłem nocy, nagłówki dostają złote oznaczenie gwiazdy,
   a stopka jest dolnym pasem mapy z podziałką azymutu.

   ⚠⚠ BARWY TŁA DEKLARUJEMY W NAJJAŚNIEJSZYM PUNKCIE GRADIENTU.
   Bramka B6 mierzy kontrast wobec `background-color`, a nie wobec obrazka
   tła. Gdyby zadeklarowana barwa była ciemniejsza od najjaśniejszego miejsca
   gradientu, pomiar byłby ŁATWIEJSZY niż rzeczywistość i bramka świeciłaby
   na zielono przy realnie gorszym kontraście. Dlatego każdy gradient maluje
   WYŁĄCZNIE ciemniej niż zadeklarowana barwa danej powierzchni.
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  /* powierzchnie — od najgłębszej nocy do poświaty horyzontu */
  --papier:          #070B14;   /* ziemia całej strony */
  --tlo-2:           #141F36;   /* pasmo „arkusz" — partie praktyczne */
  --papier-karta:    #182741;   /* karty katalogu, płyty uniesione */
  --wiodaca-jasna:   #1B2B45;   /* pola wezwania, ramki numerów */
  --poswiata:        #22375A;   /* hero i stopka — najjaśniejszy punkt gradientu */

  /* pismo */
  --atrament:        #EEF2F9;
  --atrament-cichy:  #B7C3D6;

  /* barwy znaczące */
  --wiodaca:         #5E8FD0;   /* błękit gwiazdy — kreski i powierzchnie */
  --wiodaca-ciemna:  #A6C7F2;   /* nagłówki i odsyłacze (w motywie ciemnym: JAŚNIEJSZA) */
  --akcent:          #F2C879;   /* bursztyn — oznaczenia gwiazd, wezwania */
  --linia:           #7C8CA8;   /* obwódki — element nietekstowy, próg 3:1 */
  --linia-cicha:     #223050;   /* wyłącznie dekoracja */

  /* pismo NA powierzchni jasnej — motyw ciemny odwraca role */
  --na-wiodacej:     #070B14;
  --na-akcencie:     #0A1120;

  --krój-naglowek: "Cormorant Garamond", Georgia, "Times New Roman", "Nimbus Roman", serif;
  --krój-tekst:    "Mulish", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --krój-maszyna:  ui-monospace, "DejaVu Sans Mono", "Liberation Mono", Consolas, monospace;

  /* ⚠ MIARA W REM, NIE W EM — w em ta sama liczba dawała inną szerokość
     w pikselach dla każdego bloku i kreska pod nagłówkiem bywała dwa razy
     dłuższa niż tekst pod nią. W rem wszystkie bloki mają JEDNĄ krawędź.
     ⚠ 34rem, nie 36rem: miara w rem jest ślepa na krój — zmierzone na zrzutach
     34rem daje 66–79 znaków w wierszu dla wszystkich krojów serii. */
  --kolumna:         34rem;   /* kolumna prozy: h2 i akapity */
  --kolumna-hero:    38rem;   /* kolumna tytułowa — szersza, bo pismo większe */
  --kolumna-szeroka: 58rem;   /* karty katalogu i arkusz systemu */
  --margines:        clamp(20px, 5vw, 112px);

  /* ⭐⭐ SKALA POWYŻEJ 1366 px — patrz blok 2b (ARKUSZ) i blok 16 na końcu pliku.
     PŁYTA to szerokość kompozycji powyżej 1600 px: bark z nagłówkiem sekcji,
     wąska kolumna prozy i margines mapy z podziałką azymutu. Suma jest ta sama
     w pasmach (23 + 34 + 8 + 2 x 3) i w hero (19 + 38 + 8 + 2 x 3) = 71rem,
     więc wszystkie widoki stoją na jednej krawędzi. */
  --bark:            23rem;   /* zewnętrzna kolumna pasma: nagłówek H2 */
  --bark-hero:       19rem;   /* zewnętrzna kolumna hero: znacznik i krążek */
  --rowek:            3rem;   /* rowek między kolumnami płyty */
  --skala:            8rem;   /* margines mapy — podziałka azymutu */
  --plyta:  calc(var(--bark) + var(--kolumna) + var(--skala) + 2 * var(--rowek));
  /* rama arkusza: 0 px do 1600, potem płynnie do 96 px (przy 1920 wypada 95,5) */
  --rama:   clamp(0px, (100vw - 1600px) / 3.35, 96px);

  /* jeden system detalu */
  --promień:       3px;    /* drobne: przyciski, znaczniki */
  --promień-płyta: 12px;   /* płyty: karty, pola wezwania */
  --kreska:        1px;
  --kreska-mocna:  2px;
  --cień-płyta:    0 26px 60px -34px rgba(0, 0, 0, .95);
  --cień-uniesiona: 0 34px 70px -30px rgba(0, 0, 0, 1);
}

/* --- 2. RESET I PODSTAWA --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* ⭐⭐ zasada użytkownika: makieta MA ROSNĄĆ powyżej 1366 px (bramka B13) */
  font-size: clamp(1rem, 0.875rem + 0.35vw, 1.4rem);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* ⚠ pułapka 6: `clip` leczy przepełnienia od pasów pełnej szerokości
   i ornamentów, nie psując pozycjonowania. `hidden` tylko jako zapas. */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }

body {
  margin: 0;
  color: var(--atrament);
  font-family: var(--krój-tekst);
  font-size: 1rem;
  line-height: 1.68;
  /* ⚠ długie adresy http w prozie rozpychały widok na 360 px (bramka B5) */
  overflow-wrap: break-word;
  /* ⚠ TŁO PRZENIESIONE NA .arkusz (blok 2b): pył gwiezdny ma leżeć WEWNĄTRZ
     arkusza, a wokół niego — sama przestrzeń. <body> nie nosi już żadnego
     tekstu poza odsyłaczem pomijającym, więc pomiar bramki B6 się nie zmienia. */
  background-color: #01030A;
}

/* --- 2b. ARKUSZ ATLASU — jedna płyta z symetryczną ramą ---------------
   ⭐⭐ ZASADA UŻYTKOWNIKA: makieta ma ROSNĄĆ powyżej 1366 px. Dotąd rosła sama
   kolumna prozy, a KOMPOZYCJA zamierała: przy 1920 px najszerszy moduł treści
   miał 788 px i zostawiał po 566 px pustego tła z każdej strony.
   Naprawa jest dwuczęściowa i obie części są potrzebne:
     • cała strona (nagłówek + treść + stopka) to jeden ARKUSZ z ramą — przy
       1920 px zostaje po 96 px z KAŻDEJ strony, zamiast 566 px,
     • odzyskana szerokość dostaje ROLĘ (blok 16): nagłówki sekcji wychodzą
       spod tekstu do BARKU obok prozy, pola wezwania i siatki kart rozlewają
       się szerzej, a kolumna prozy ZOSTAJE WĄSKA (34rem ≈ 66–79 znaków).
   ⚠ Do 1600 px --rama wynosi 0 px, więc układ mobilny i laptopowy nie zmienia
   się ANI O PIKSEL. To nie jest przebudowa mobilna.
   ⚠ Zadeklarowana barwa arkusza to nadal --papier, ta sama, którą dotąd nosił
   <body> — pomiar kontrastu (B6 liczy wobec background-color) nie drgnął.
   -------------------------------------------------------------------- */
.arkusz {
  position: relative;
  margin-inline: var(--rama);
  background-color: var(--papier);
  /* ziemia nocy: dwie odległe poświaty, obie CIEMNIEJSZE od zadeklarowanego
     papieru po zmieszaniu — patrz uwaga o bramce B6 na górze pliku */
  /* pył gwiezdny — inline SVG w data: URI (bez obcego hosta, działa z file://),
     pod nim dwie odległe poświaty. Pasma „arkusz" są nieprzezroczyste, więc
     gwiazdy widać wyłącznie w pasmach nocy — stąd ich rytm na stronie. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='900' viewBox='0 0 1200 900'%3E%3Cg fill='%23D8E2F2'%3E%3Ccircle cx='275.2' cy='401.0' r='1.3' opacity='0.36'/%3E%3Ccircle cx='997.6' cy='483.9' r='0.7' opacity='0.52'/%3E%3Ccircle cx='1094.7' cy='560.0' r='1.5' opacity='0.37'/%3E%3Ccircle cx='1052.0' cy='108.8' r='0.8' opacity='0.41'/%3E%3Ccircle cx='1065.8' cy='93.2' r='0.7' opacity='0.48'/%3E%3Ccircle cx='692.2' cy='258.4' r='1.1' opacity='0.15'/%3E%3Ccircle cx='799.3' cy='188.7' r='0.9' opacity='0.47'/%3E%3Ccircle cx='986.6' cy='528.1' r='0.7' opacity='0.26'/%3E%3Ccircle cx='177.4' cy='473.3' r='1.1' opacity='0.49'/%3E%3Ccircle cx='828.0' cy='84.8' r='1.8' opacity='0.18'/%3E%3Ccircle cx='527.0' cy='196.4' r='1.5' opacity='0.14'/%3E%3Ccircle cx='213.6' cy='856.3' r='0.8' opacity='0.34'/%3E%3Ccircle cx='1063.6' cy='837.8' r='1.1' opacity='0.18'/%3E%3Ccircle cx='113.5' cy='155.4' r='0.7' opacity='0.1'/%3E%3Ccircle cx='565.5' cy='794.1' r='1.1' opacity='0.47'/%3E%3Ccircle cx='202.2' cy='108.0' r='1.8' opacity='0.27'/%3E%3Ccircle cx='784.5' cy='448.0' r='1.5' opacity='0.29'/%3E%3Ccircle cx='533.8' cy='530.5' r='1.3' opacity='0.4'/%3E%3Ccircle cx='726.0' cy='47.4' r='0.7' opacity='0.5'/%3E%3Ccircle cx='448.6' cy='809.9' r='1.5' opacity='0.17'/%3E%3Ccircle cx='344.9' cy='595.0' r='1.5' opacity='0.11'/%3E%3Ccircle cx='337.3' cy='322.4' r='1.8' opacity='0.17'/%3E%3Ccircle cx='389.6' cy='828.9' r='1.1' opacity='0.24'/%3E%3Ccircle cx='187.9' cy='501.4' r='1.8' opacity='0.36'/%3E%3Ccircle cx='103.9' cy='894.6' r='0.8' opacity='0.25'/%3E%3Ccircle cx='463.9' cy='600.2' r='1.0' opacity='0.38'/%3E%3Ccircle cx='771.4' cy='95.1' r='1.1' opacity='0.31'/%3E%3Ccircle cx='676.9' cy='485.4' r='1.5' opacity='0.12'/%3E%3Ccircle cx='239.1' cy='313.2' r='0.9' opacity='0.29'/%3E%3Ccircle cx='894.0' cy='703.3' r='0.7' opacity='0.47'/%3E%3Ccircle cx='785.3' cy='422.0' r='0.8' opacity='0.25'/%3E%3Ccircle cx='768.5' cy='616.5' r='0.7' opacity='0.16'/%3E%3Ccircle cx='1040.6' cy='713.0' r='0.9' opacity='0.4'/%3E%3Ccircle cx='1089.9' cy='441.3' r='1.0' opacity='0.23'/%3E%3Ccircle cx='70.0' cy='628.6' r='1.3' opacity='0.51'/%3E%3Ccircle cx='1018.4' cy='689.8' r='1.8' opacity='0.21'/%3E%3Ccircle cx='1078.6' cy='347.9' r='1.0' opacity='0.12'/%3E%3Ccircle cx='325.9' cy='564.8' r='1.1' opacity='0.31'/%3E%3Ccircle cx='349.5' cy='194.1' r='0.7' opacity='0.11'/%3E%3Ccircle cx='768.1' cy='878.8' r='1.8' opacity='0.28'/%3E%3Ccircle cx='473.8' cy='399.5' r='1.3' opacity='0.1'/%3E%3Ccircle cx='323.2' cy='504.2' r='1.8' opacity='0.47'/%3E%3Ccircle cx='929.1' cy='631.7' r='1.8' opacity='0.44'/%3E%3Ccircle cx='616.5' cy='142.1' r='1.1' opacity='0.23'/%3E%3Ccircle cx='849.1' cy='354.6' r='1.3' opacity='0.45'/%3E%3Ccircle cx='392.7' cy='156.3' r='0.8' opacity='0.46'/%3E%3Ccircle cx='688.2' cy='315.2' r='0.9' opacity='0.18'/%3E%3Ccircle cx='536.1' cy='769.9' r='1.1' opacity='0.15'/%3E%3Ccircle cx='965.5' cy='443.8' r='0.7' opacity='0.37'/%3E%3Ccircle cx='626.2' cy='123.8' r='1.8' opacity='0.47'/%3E%3Ccircle cx='755.5' cy='336.5' r='1.8' opacity='0.1'/%3E%3Ccircle cx='915.5' cy='618.2' r='1.8' opacity='0.16'/%3E%3Ccircle cx='275.9' cy='61.8' r='1.1' opacity='0.32'/%3E%3Ccircle cx='794.4' cy='694.5' r='0.8' opacity='0.22'/%3E%3Ccircle cx='770.4' cy='656.2' r='1.1' opacity='0.4'/%3E%3Ccircle cx='107.1' cy='597.5' r='0.7' opacity='0.11'/%3E%3Ccircle cx='538.9' cy='377.7' r='0.7' opacity='0.48'/%3E%3Ccircle cx='1046.1' cy='871.9' r='0.8' opacity='0.48'/%3E%3Ccircle cx='801.1' cy='273.4' r='1.5' opacity='0.18'/%3E%3Ccircle cx='806.8' cy='32.6' r='1.8' opacity='0.16'/%3E%3Ccircle cx='946.4' cy='688.5' r='0.9' opacity='0.42'/%3E%3Ccircle cx='5.4' cy='11.4' r='1.8' opacity='0.49'/%3E%3Ccircle cx='1037.6' cy='80.4' r='0.9' opacity='0.4'/%3E%3Ccircle cx='1083.3' cy='898.6' r='0.8' opacity='0.25'/%3E%3Ccircle cx='942.8' cy='15.3' r='1.3' opacity='0.22'/%3E%3Ccircle cx='1072.0' cy='578.9' r='0.9' opacity='0.5'/%3E%3Ccircle cx='400.1' cy='380.8' r='0.9' opacity='0.44'/%3E%3Ccircle cx='93.7' cy='590.5' r='1.0' opacity='0.46'/%3E%3Ccircle cx='853.0' cy='712.4' r='1.0' opacity='0.46'/%3E%3Ccircle cx='619.7' cy='755.1' r='0.8' opacity='0.5'/%3E%3Ccircle cx='66.3' cy='37.9' r='1.3' opacity='0.28'/%3E%3Ccircle cx='630.5' cy='730.1' r='0.9' opacity='0.41'/%3E%3Ccircle cx='936.8' cy='803.1' r='1.1' opacity='0.11'/%3E%3Ccircle cx='529.0' cy='522.4' r='1.1' opacity='0.21'/%3E%3Ccircle cx='806.9' cy='321.2' r='1.0' opacity='0.54'/%3E%3Ccircle cx='368.1' cy='837.5' r='1.5' opacity='0.43'/%3E%3Ccircle cx='176.7' cy='871.1' r='1.3' opacity='0.52'/%3E%3Ccircle cx='509.0' cy='692.1' r='1.0' opacity='0.42'/%3E%3Ccircle cx='447.7' cy='505.7' r='1.8' opacity='0.38'/%3E%3Ccircle cx='784.8' cy='3.5' r='0.9' opacity='0.11'/%3E%3Ccircle cx='847.0' cy='368.6' r='1.8' opacity='0.4'/%3E%3Ccircle cx='1063.2' cy='11.9' r='0.7' opacity='0.19'/%3E%3Ccircle cx='796.7' cy='385.9' r='1.0' opacity='0.55'/%3E%3Ccircle cx='1014.9' cy='66.8' r='1.3' opacity='0.42'/%3E%3Ccircle cx='713.2' cy='555.3' r='0.7' opacity='0.31'/%3E%3Ccircle cx='265.3' cy='301.8' r='1.0' opacity='0.31'/%3E%3Ccircle cx='968.1' cy='593.5' r='1.1' opacity='0.44'/%3E%3Ccircle cx='455.1' cy='794.7' r='1.1' opacity='0.18'/%3E%3Ccircle cx='1011.0' cy='65.8' r='1.3' opacity='0.54'/%3E%3Ccircle cx='342.4' cy='527.5' r='0.9' opacity='0.19'/%3E%3Ccircle cx='171.6' cy='557.8' r='0.7' opacity='0.54'/%3E%3Ccircle cx='1138.4' cy='257.5' r='0.9' opacity='0.46'/%3E%3Ccircle cx='841.4' cy='477.4' r='1.0' opacity='0.42'/%3E%3Ccircle cx='348.5' cy='616.1' r='0.7' opacity='0.27'/%3E%3Ccircle cx='777.7' cy='156.6' r='0.9' opacity='0.49'/%3E%3Ccircle cx='592.8' cy='349.8' r='1.1' opacity='0.55'/%3E%3Ccircle cx='489.4' cy='866.5' r='1.3' opacity='0.49'/%3E%3Ccircle cx='89.7' cy='664.6' r='1.5' opacity='0.46'/%3E%3Ccircle cx='649.4' cy='320.9' r='0.8' opacity='0.32'/%3E%3Ccircle cx='427.1' cy='373.0' r='1.3' opacity='0.14'/%3E%3Ccircle cx='477.1' cy='41.0' r='0.9' opacity='0.37'/%3E%3Ccircle cx='830.3' cy='549.7' r='1.0' opacity='0.27'/%3E%3Ccircle cx='886.3' cy='155.0' r='0.8' opacity='0.37'/%3E%3Ccircle cx='1066.9' cy='224.2' r='1.5' opacity='0.36'/%3E%3Ccircle cx='78.6' cy='864.9' r='1.8' opacity='0.3'/%3E%3Ccircle cx='473.9' cy='315.2' r='1.3' opacity='0.31'/%3E%3Ccircle cx='784.7' cy='533.6' r='0.8' opacity='0.19'/%3E%3Ccircle cx='296.8' cy='301.5' r='0.8' opacity='0.21'/%3E%3Ccircle cx='622.7' cy='496.1' r='1.1' opacity='0.15'/%3E%3Ccircle cx='641.8' cy='837.2' r='1.0' opacity='0.4'/%3E%3Ccircle cx='310.8' cy='794.9' r='0.9' opacity='0.24'/%3E%3Ccircle cx='991.0' cy='355.6' r='1.3' opacity='0.27'/%3E%3Ccircle cx='789.2' cy='409.8' r='1.5' opacity='0.51'/%3E%3Ccircle cx='589.0' cy='862.7' r='0.8' opacity='0.12'/%3E%3Ccircle cx='1126.2' cy='126.2' r='1.8' opacity='0.15'/%3E%3Ccircle cx='1054.2' cy='715.1' r='1.0' opacity='0.28'/%3E%3Ccircle cx='139.3' cy='360.0' r='1.3' opacity='0.22'/%3E%3Ccircle cx='76.3' cy='770.5' r='1.1' opacity='0.43'/%3E%3Ccircle cx='577.8' cy='669.7' r='0.8' opacity='0.39'/%3E%3Ccircle cx='1149.4' cy='797.1' r='1.5' opacity='0.28'/%3E%3Ccircle cx='804.8' cy='160.5' r='1.0' opacity='0.21'/%3E%3Ccircle cx='825.0' cy='191.9' r='0.8' opacity='0.45'/%3E%3Ccircle cx='646.6' cy='899.8' r='1.3' opacity='0.34'/%3E%3Ccircle cx='54.1' cy='61.2' r='0.9' opacity='0.29'/%3E%3Ccircle cx='388.6' cy='394.8' r='1.3' opacity='0.44'/%3E%3Ccircle cx='1122.9' cy='269.1' r='0.7' opacity='0.33'/%3E%3Ccircle cx='680.3' cy='466.1' r='0.8' opacity='0.22'/%3E%3Ccircle cx='571.7' cy='737.7' r='0.8' opacity='0.17'/%3E%3Ccircle cx='628.2' cy='880.1' r='0.9' opacity='0.18'/%3E%3Ccircle cx='723.7' cy='203.7' r='1.8' opacity='0.22'/%3E%3Ccircle cx='1024.6' cy='837.4' r='0.9' opacity='0.38'/%3E%3Ccircle cx='618.2' cy='806.6' r='1.0' opacity='0.45'/%3E%3Ccircle cx='91.7' cy='200.7' r='0.8' opacity='0.37'/%3E%3Ccircle cx='298.4' cy='68.1' r='1.0' opacity='0.27'/%3E%3Ccircle cx='102.6' cy='384.2' r='1.1' opacity='0.14'/%3E%3Ccircle cx='762.9' cy='66.3' r='1.8' opacity='0.53'/%3E%3Ccircle cx='670.6' cy='565.3' r='1.3' opacity='0.19'/%3E%3Ccircle cx='875.2' cy='63.5' r='1.5' opacity='0.32'/%3E%3Ccircle cx='59.6' cy='356.5' r='1.1' opacity='0.23'/%3E%3Ccircle cx='131.9' cy='338.9' r='1.5' opacity='0.36'/%3E%3Ccircle cx='932.8' cy='606.2' r='1.5' opacity='0.13'/%3E%3Ccircle cx='1177.4' cy='221.7' r='0.8' opacity='0.29'/%3E%3Ccircle cx='1090.5' cy='220.9' r='1.0' opacity='0.35'/%3E%3Ccircle cx='479.3' cy='547.8' r='0.9' opacity='0.22'/%3E%3Ccircle cx='331.1' cy='134.5' r='0.9' opacity='0.25'/%3E%3Ccircle cx='99.1' cy='895.1' r='0.9' opacity='0.47'/%3E%3Ccircle cx='111.0' cy='605.7' r='1.0' opacity='0.53'/%3E%3Ccircle cx='940.6' cy='783.5' r='1.3' opacity='0.35'/%3E%3Ccircle cx='671.4' cy='476.1' r='0.7' opacity='0.19'/%3E%3Ccircle cx='735.7' cy='132.4' r='1.5' opacity='0.38'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(74rem 46rem at 84% -6%, rgba(46, 78, 130, .30), rgba(7, 11, 20, 0) 68%),
    radial-gradient(60rem 40rem at 6% 108%, rgba(30, 52, 92, .26), rgba(7, 11, 20, 0) 70%);
  background-size: 1200px 900px, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
  background-attachment: scroll;
}

img, svg { max-width: 100%; height: auto; }
a { color: var(--wiodaca-ciemna); overflow-wrap: anywhere; }

:focus-visible { outline: 3px solid var(--akcent); outline-offset: 3px; border-radius: var(--promień); }

/* skip-link — niewidoczny, ale z PEŁNYM polem trafienia.
   ⚠ pułapka: wariant „1 px + clip" daje prostokąt 1×1, a bramka B7 mierzy
   getBoundingClientRect, nie widoczność. */
.omin {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 180px; height: 48px;
  display: flex; align-items: center;
  padding: 0; margin: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.omin:focus {
  position: fixed; z-index: 60;
  width: auto; height: auto; clip-path: none;
  padding: .9rem 1.4rem;
  background: var(--akcent); color: var(--na-akcencie);
  font-weight: 700; text-decoration: none;
}

/* --- 3. KONTENER ------------------------------------------------------
   ⚠ Bez sztywnego max-width: przy 1920 px kolumna ma rosnąć razem z pismem,
   a nie zamierać na jednej szerokości (bramka B13). */
.kontener { width: 100%; padding-inline: var(--margines); }
/* CZĘŚĆ pasma = nagłówek H2 wraz z akapitami, które po nim następują.
   ⚠ Opakowanie nosi też klasę „kontener" CELOWO: bramka B13 mierzy kolumnę
   prozy selektorem „main .kontener > p" i bez tej klasy mierzyłaby hero.
   Wewnętrzny kontener nie powtarza marginesu zewnętrznego. */
.czesc { padding-inline: 0; }

/* wspólna oś: wszystko, co nie jest komponentem szerokim, stoi w kolumnie */
.pasmo > .kontener > *      { max-width: var(--kolumna); margin-inline: auto; }
.hero .kontener > *         { max-width: var(--kolumna-hero); margin-inline: auto; }
.pasmo > .kontener > .lista-wpisow,
.pasmo > .kontener > .próbki { max-width: var(--kolumna-szeroka); }

/* --- 4. NAGŁÓWEK ------------------------------------------------------
   Pasek świtu: włos gradientu bursztyn → błękit, pod nim ciemna belka. */
.naglowek {
  position: relative; z-index: 20;
  background-color: var(--papier);
  background-image: linear-gradient(180deg, #0A1122 0%, #070B14 100%);
}
.naglowek__brzask {
  position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px;
  background: linear-gradient(90deg,
      rgba(242, 200, 121, 0) 0%, var(--akcent) 14%,
      var(--wiodaca) 46%, rgba(94, 143, 208, .25) 72%, rgba(94, 143, 208, 0) 100%);
}
.naglowek::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline: 0; height: 1px;
  background: linear-gradient(90deg, rgba(124, 140, 168, 0), rgba(124, 140, 168, .55) 30%, rgba(124, 140, 168, .18) 100%);
}
.naglowek__pas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .4rem clamp(1rem, 3vw, 3rem);
  padding-block: clamp(.85rem, 1.5vw, 1.5rem);
}

/* sygnatura słowna — typograficzna; nigdy nie udaje logotypu firmy */
.znak {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 44px; text-decoration: none; color: var(--atrament);
}
.znak__gwiazda {
  flex: none; width: .82rem; height: .82rem; background: var(--akcent);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}
.znak__slowo {
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.24rem, 1.05rem + .7vw, 1.72rem);
  letter-spacing: .012em; line-height: 1.1;
}
.znak:hover .znak__slowo { color: var(--wiodaca-ciemna); }

.menu__lista {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 clamp(.3rem, 1.3vw, 1.5rem);
  margin: 0; padding: 0; list-style: none;
}
.menu__link {
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px;   /* B7 */
  padding-inline: .55em;
  font-weight: 600; font-size: .86rem; letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none; color: var(--atrament-cichy);
  transition: color .18s ease;
}
.menu__link::after {
  content: ""; position: absolute; inset-block-end: 9px; inset-inline: .55em;
  height: 2px; background: var(--akcent); transform: scaleX(0); transform-origin: left;
  transition: transform .18s ease;
}
.menu__link:hover { color: var(--atrament); }
.menu__link:hover::after { transform: scaleX(1); }
.menu__link[aria-current="page"] { color: var(--akcent); }
.menu__link[aria-current="page"]::after { transform: scaleX(1); }

/* --- 5. HERO — planisfera --------------------------------------------
   Pełnokolorowe pasmo: gradient nocy, rozsiane gwiazdy (inline SVG),
   siatka azymutalna i poświata Drogi Mlecznej. Wszystko dekoracyjne. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--poswiata);
  background-image:
    radial-gradient(58rem 40rem at 78% 6%, rgba(64, 102, 158, .32), rgba(11, 20, 37, 0) 62%),
    radial-gradient(46rem 34rem at 10% 104%, rgba(31, 54, 92, .5), rgba(5, 8, 15, 0) 64%),
    linear-gradient(168deg, #0B1425 0%, #070B14 54%, #05080F 100%);
  border-block-end: 1px solid var(--linia-cicha);
}
.hero__niebo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  color: var(--atrament);
}
.hero__niebo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* poświata Drogi Mlecznej — skośny pas mgły, wyłącznie CSS */
.hero__mgla {
  position: absolute; z-index: 0; pointer-events: none;
  inset-block: -30%; inset-inline: -20%;
  background: radial-gradient(closest-side, rgba(122, 158, 214, .16), rgba(122, 158, 214, .05) 55%, rgba(122, 158, 214, 0) 78%);
  transform: rotate(-19deg) scale(1.15);
}
/* siatka współrzędnych — rytm, nie mapa */
.hero__siatka {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image:
    repeating-linear-gradient(90deg, rgba(124, 140, 168, .16) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg,  rgba(124, 140, 168, .12) 0 1px, transparent 1px 96px);
  -webkit-mask-image: radial-gradient(70% 90% at 50% 45%, #000 12%, transparent 78%);
          mask-image: radial-gradient(70% 90% at 50% 45%, #000 12%, transparent 78%);
}
/* przyciemnienie pod kolumną tytułową: jasna gwiazda potrafi wejść w środek
   wyrazu i wygląda jak błąd składu. Warstwa nie ma własnej `background-color`,
   więc pomiar bramki B6 dalej idzie wobec najjaśniejszego punktu pasma. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(58% 62% at 50% 50%, rgba(5, 8, 15, .86), rgba(5, 8, 15, .42) 58%, rgba(5, 8, 15, 0) 82%);
}
.hero__kontener { position: relative; z-index: 2; }
.hero .kontener {
  padding-block: clamp(3.2rem, 1.6rem + 7vw, 8.4rem) clamp(3rem, 1.6rem + 6vw, 7.2rem);
}
/* horyzont — dolna krawędź pasma, jak brzeg planisfery */
.hero__horyzont {
  position: absolute; inset-block-end: 0; inset-inline: 0; height: 1px; z-index: 3;
  background: linear-gradient(90deg,
      rgba(242, 200, 121, 0) 0%, rgba(242, 200, 121, .55) 22%,
      rgba(166, 199, 242, .55) 55%, rgba(166, 199, 242, 0) 100%);
}

/* nadtytuł hero — czysta dekoracja: krótka kreska ze znakiem gwiazdy */
.hero__znacznik {
  display: flex; align-items: center; gap: .7rem;
  margin-block-end: clamp(1.1rem, .8rem + .8vw, 1.9rem);
}
.hero__znacznik::before {
  content: ""; flex: none; width: .78rem; height: .78rem; background: var(--akcent);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}
.hero__znacznik::after {
  content: ""; flex: 1 1 auto; height: 1px; max-width: 9rem;
  background: linear-gradient(90deg, rgba(242, 200, 121, .8), rgba(242, 200, 121, 0));
}

.hero .tytul {
  /* ⚠ pułapka: skrót `margin` kasuje `margin-inline: auto` z reguły kolumny,
     więc tytuł uciekał do lewej krawędzi paska, a lid zostawał na osi. */
  margin-block: 0 clamp(1.1rem, .7rem + 1.2vw, 2rem); margin-inline: auto;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(2.35rem, 1.5rem + 3.5vw, 4.6rem);
  line-height: 1.04; letter-spacing: -.018em;
  color: var(--atrament);
  text-wrap: balance;
}
.hero .wprowadzenie, .hero .zajawka, .hero .tytul + p {
  font-size: clamp(1.06rem, .98rem + .42vw, 1.3rem);
  line-height: 1.6; color: var(--atrament);
}
.hero .zajawka {
  color: var(--wiodaca-ciemna); font-weight: 500;
  padding-inline-start: 1.1rem;
  border-inline-start: 2px solid var(--akcent);
}
.hero p { margin: 0 0 1.05em; }
.hero p:last-child { margin-block-end: 0; }

/* --- 6. PASMA TREŚCI --------------------------------------------------
   Strona nie jest białą płachtą: każde pasmo stoi na własnej powierzchni,
   a między nimi biegnie cienki włos podziałki. */
.pasmo { position: relative; overflow: hidden; }
.pasmo > .kontener { padding-block: clamp(2.4rem, 1.4rem + 3.4vw, 5.2rem); }

/* pasmo nocy — ziemia strony widoczna wprost */
.pasmo--noc { background: transparent; }

/* pasmo arkusza — partie praktyczne na uniesionej, jaśniejszej płycie */
.pasmo--arkusz {
  background-color: var(--tlo-2);
  background-image: linear-gradient(180deg, #131E33 0%, #0E1728 100%);
  border-block: 1px solid var(--linia-cicha);
  box-shadow: var(--cień-płyta), inset 0 1px 0 rgba(166, 199, 242, .12);
}
/* narożnikowy ornament pasma arkusza — dwie kreski jak róg ramki mapy */
.pasmo--arkusz::before,
.pasmo--arkusz::after {
  content: ""; position: absolute; width: clamp(28px, 4vw, 64px); height: clamp(28px, 4vw, 64px);
  pointer-events: none;
}
.pasmo--arkusz::before {
  inset-block-start: 18px; inset-inline-start: calc(var(--margines) * .42 + 6px);
  border-block-start: 1px solid rgba(242, 200, 121, .45);
  border-inline-start: 1px solid rgba(242, 200, 121, .45);
}
.pasmo--arkusz::after {
  inset-block-end: 18px; inset-inline-end: calc(var(--margines) * .42 + 6px);
  border-block-end: 1px solid rgba(94, 143, 208, .45);
  border-inline-end: 1px solid rgba(94, 143, 208, .45);
}

/* linie prowadzące: podziałka biegnąca wzdłuż kolumny prozy — jak margines
   mapy. ⚠ Ornament wieszamy na KONTENERZE, nie na oknie (pułapka 19), i tylko
   od 1200 px, żeby przy wąskim oknie nie wchodził pod tekst. */
@media (min-width: 1200px) {
  .pasmo > .kontener { position: relative; }
  .pasmo > .kontener::before,
  .pasmo > .kontener::after {
    content: ""; position: absolute; pointer-events: none;
    inset-block: clamp(1.8rem, 3vw, 3.6rem);
    inset-inline-start: calc(50% - var(--kolumna) / 2 - 2.9rem);
  }
  .pasmo > .kontener::before {
    width: 1px;
    background: linear-gradient(180deg, rgba(124, 140, 168, 0), rgba(124, 140, 168, .8) 8%,
                                        rgba(124, 140, 168, .8) 92%, rgba(124, 140, 168, 0));
  }
  .pasmo > .kontener::after {
    width: 14px;
    background-image: repeating-linear-gradient(180deg,
        rgba(166, 199, 242, .85) 0 1px, rgba(166, 199, 242, 0) 1px 32px);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  }
  /* ⚠ Pasmo z komponentem SZEROKIM (karty katalogu, arkusz próbek) ma inną
     krawędź niż kolumna prozy. Bez tego wyjątku podziałka biegła W POPRZEK
     pierwszej karty — zmierzone na blog.html i specimen.html. */
  .pasmo--szeroki > .kontener::before,
  .pasmo--szeroki > .kontener::after {
    inset-inline-start: calc(50% - var(--kolumna-szeroka) / 2 - 2.9rem);
  }
  /* łuk planisfery w prawym marginesie pasma nocy — brzeg krążka mapy */
  .pasmo--noc::before {
    content: ""; position: absolute; pointer-events: none;
    /* ⚠ pułapka 19 i B13c: ornament NIE MOŻE wchodzić pod kolumnę tekstu.
       Kotwiczymy go do prawej krawędzi kolumny prozy, nie do krawędzi okna. */
    inset-block-start: 50%; inset-inline-start: calc(50% + var(--kolumna) / 2 + 2.4rem);
    width: 44rem; height: 44rem; transform: translateY(-50%);
    border: 1px solid rgba(124, 140, 168, .34); border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(242, 200, 121, .12),
                inset 0 0 0 6rem rgba(94, 143, 208, .07),
                inset 0 0 0 14rem rgba(94, 143, 208, .05);
  }
  .pasmo--noc.pasmo--szeroki::before {
    inset-inline-start: calc(50% + var(--kolumna-szeroka) / 2 + 2.4rem);
  }
}

/* --- 7. TYPOGRAFIA TREŚCI -------------------------------------------- */
.tytul {
  font-family: var(--krój-naglowek); font-weight: 700;
  color: var(--atrament);
}
/* ⚠ krój nagłówkowy ma domyślnie cyfry mediewalowe: „1." w nagłówku wygląda
   wtedy jak kapitalikowe „I." i czyta się jak literówka. Wymuszamy wersaliki
   cyfr wszędzie, gdzie nagłówek albo numer jest składany szeryfem. */
.tytul, .pasmo h2, .pasmo h3, .znak__slowo, .stopka__znak,
.zapowiedz::before, .kroki li::before {
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: "lnum" 1;
}

.pasmo h2 {
  position: relative;
  margin: clamp(2.6rem, 1.6rem + 2.4vw, 4.4rem) 0 .85rem;
  padding-block-start: 2.05rem;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.44rem, 1.14rem + 1.15vw, 2.24rem);
  line-height: 1.2; letter-spacing: -.008em;
  color: var(--wiodaca-ciemna);
  text-wrap: balance;
}
.pasmo > .kontener > h2:first-child,
.pasmo > .kontener > .czesc:first-child > h2:first-child { margin-block-start: 0; }
/* oznaczenie gwiazdy: bursztynowy znak i włos podziałki biegnący w prawo */
.pasmo h2::before {
  content: ""; position: absolute; inset-block-start: .35rem; inset-inline-start: 0;
  width: .8rem; height: .8rem; background: var(--akcent);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}
.pasmo h2::after {
  content: ""; position: absolute; inset-block-start: .73rem;
  inset-inline-start: 1.25rem; inset-inline-end: 0; height: 1px;
  background: linear-gradient(90deg, rgba(242, 200, 121, .62), rgba(124, 140, 168, .28) 34%, rgba(124, 140, 168, 0) 100%);
}

.pasmo h3 {
  margin: clamp(1.8rem, 1.2rem + 1.4vw, 2.6rem) 0 .5rem;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.14rem, 1rem + .55vw, 1.5rem);
  line-height: 1.3; color: var(--atrament);
}

.pasmo p { margin: 0 0 1.1em; }
/* pierwszy akapit sekcji jest lidem: większy stopień i pełna jasność pisma */
.pasmo h2 + p {
  font-size: clamp(1.04rem, .99rem + .28vw, 1.2rem);
  line-height: 1.6; color: var(--atrament);
}
/* ozdobny inicjał — otwiera każde pasmo arkusza. Czysta typografia:
   ::first-letter nie zmienia ANI JEDNEGO znaku treści. */
.pasmo--arkusz > .kontener > h2:first-child + p::first-letter,
.pasmo--arkusz > .kontener > .czesc:first-child > h2:first-child + p::first-letter {
  float: inline-start;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: 3.35em; line-height: .82;
  color: var(--akcent);
  padding-inline-end: .14em; padding-block-start: .06em;
  margin-inline-end: .02em;
}
.pasmo p:last-child { margin-block-end: 0; }
.wprowadzenie { font-size: clamp(1.04rem, .98rem + .34vw, 1.24rem); line-height: 1.62; }

/* pierwszy akapit pasma po tytule — lekki oddech nad kolumną */
.pasmo p a, .pasmo li a {
  color: var(--wiodaca-ciemna);
  text-decoration-line: underline; text-decoration-thickness: 1px;
  text-decoration-color: rgba(166, 199, 242, .45);
  text-underline-offset: .2em;
  transition: color .16s ease, text-decoration-color .16s ease;
}
.pasmo p a:hover, .pasmo li a:hover {
  color: var(--akcent); text-decoration-color: var(--akcent); text-decoration-thickness: 2px;
}

/* --- 8. LISTY W PROZIE ----------------------------------------------- */
.wyliczenie { margin: 0 0 1.4em; padding: 0; list-style: none; }
.wyliczenie li { position: relative; padding-inline-start: 1.7em; margin-block-end: .6em; }
.wyliczenie li::before {
  content: ""; position: absolute; inset-block-start: .62em; inset-inline-start: .1em;
  width: .62em; height: .62em; background: var(--wiodaca);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}

.kroki { margin: 0 0 1.6em; padding: 0; list-style: none; counter-reset: krok; }
.kroki li {
  counter-increment: krok; position: relative;
  padding: .7em 0 .7em 3.2em;
  border-block-end: 1px solid var(--linia-cicha);
}
.kroki li:last-child { border-block-end: 0; }
.kroki li::before {
  content: counter(krok, decimal-leading-zero); position: absolute;
  inset-inline-start: 0; inset-block-start: .55em;
  width: 2.2em; height: 2.2em;
  display: grid; place-items: center;
  background: var(--wiodaca-jasna); color: var(--akcent);
  border: 1px solid rgba(242, 200, 121, .5); border-radius: 50%;
  font-family: var(--krój-naglowek); font-weight: 700; font-size: .82em; letter-spacing: .04em;
}

/* --- 9. BLOK WIERSZOWY (schemat ze źródła) --------------------------- */
.wzor {
  margin: 1.5em 0 1.9em;
  padding: clamp(1rem, .6rem + 1.4vw, 1.9rem) clamp(1rem, .6rem + 1.6vw, 2.1rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-inline-start: 3px solid var(--wiodaca);
  border-radius: var(--promień-płyta);
  box-shadow: var(--cień-płyta);
  font-family: var(--krój-maszyna);
  font-size: clamp(.82rem, .78rem + .22vw, .96rem);
  line-height: 1.9; letter-spacing: .01em;
  color: var(--atrament);
}

/* --- 10. POLE ODSYŁACZA KIERUNKOWEGO --------------------------------- */
.odsylacz {
  margin: 1.3em 0 1.8em;
  padding: .9em 1.2em .9em 1.25em;
  background: var(--wiodaca-jasna);
  border: 1px solid var(--linia-cicha);
  border-inline-start: 3px solid var(--akcent);
  border-radius: var(--promień-płyta);
  font-size: .98rem; color: var(--atrament);
}
.odsylacz a { font-weight: 700; }

/* akapit, którego CAŁĄ treścią jest odsyłacz — w źródle osobny wiersz.
   ⚠ bramka B7 traktuje go jak samodzielny cel UI, więc musi mieć 44 px. */
.przejscie { margin-block: 1.2em 1.8em; }
.przejscie > a:not(.przycisk) {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 44px; padding: .3rem 0;
  font-weight: 700; letter-spacing: .02em; color: var(--akcent);
  text-decoration: none;
  border-block-end: 2px solid rgba(242, 200, 121, .45);
  transition: border-color .16s ease, gap .16s ease;
}
.przejscie > a:not(.przycisk)::after {
  content: ""; width: .5rem; height: .5rem; flex: none;
  border-block-start: 2px solid currentColor; border-inline-end: 2px solid currentColor;
  transform: rotate(45deg);
}
.przejscie > a:not(.przycisk):hover { border-block-end-color: var(--akcent); gap: .95rem; }

/* pozycja listy, której CAŁĄ treścią jest odsyłacz.
   ⚠ Bramka B7 traktuje taki odsyłacz jak samodzielny cel interfejsu. */
.pasmo li > a:only-child {
  display: inline-flex; align-items: center; min-height: 44px; padding-block: .2rem;
}

/* --- 11. POLE WEZWANIA I PRZYCISK ------------------------------------
   Akapit ze źródła, którego treścią jest przycisk, dostaje własną płytę:
   bursztynowy włos u góry, ciemne pole, róg podziałki. */
.cta {
  position: relative; overflow: hidden;
  margin-block: clamp(2rem, 1.3rem + 1.8vw, 3.2rem) 0;
  padding: clamp(1.4rem, 1rem + 1.5vw, 2.3rem) clamp(1.2rem, .9rem + 1.4vw, 2.2rem);
  background-color: var(--wiodaca-jasna);
  background-image: linear-gradient(135deg, #1A2A44 0%, #101B2E 100%);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promień-płyta);
  box-shadow: var(--cień-uniesiona);
}
.cta::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px;
  background: linear-gradient(90deg, var(--akcent), rgba(242, 200, 121, .15) 48%, rgba(94, 143, 208, 0));
}
.cta::after {
  content: ""; position: absolute; inset-block-start: -3.6rem; inset-inline-end: -3.6rem;
  width: 11rem; height: 11rem; border-radius: 50%;
  border: 1px solid rgba(166, 199, 242, .22);
  box-shadow: inset 0 0 0 1px rgba(242, 200, 121, .09);
  pointer-events: none;
}
.cta.przejscie { margin-block-end: 0; }

.przycisk, .pasmo a.przycisk, .hero a.przycisk {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  min-height: 54px; padding: .8rem 1.9rem;
  background-color: var(--akcent);
  background-image: linear-gradient(135deg, #F7D896 0%, #E9B75C 100%);
  color: var(--na-akcencie);
  border: 1px solid #F7D896; border-radius: var(--promień);
  font-family: var(--krój-tekst); font-weight: 700; font-size: 1.02rem; letter-spacing: .015em;
  text-decoration: none;
  box-shadow: 0 14px 32px -18px rgba(242, 200, 121, .9);
  transition: transform .16s ease, box-shadow .16s ease;
}
.przycisk::after {
  content: ""; width: .5rem; height: .5rem; flex: none;
  border-block-start: 2px solid currentColor; border-inline-end: 2px solid currentColor;
  transform: rotate(45deg);
}
.przycisk:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -18px rgba(242, 200, 121, 1); }
/* ⚠ pułapka „.proza a bije .przycisk" — tekst przycisku znikał */
.pasmo p a.przycisk, .hero p a.przycisk { color: var(--na-akcencie); text-decoration: none; }

/* w hero przycisk stoi sam — pole wezwania jest komponentem pasm treści */
.hero .cta {
  margin-block: clamp(1.7rem, 1.1rem + 1.4vw, 2.6rem) 0;
  padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
}
.hero .cta::before, .hero .cta::after { content: none; }

/* --- 12. KARTY KATALOGU (lista wpisów) --------------------------------
   Karta obiektu w katalogu: duża ozdobna cyfra, złoty włos, tytuł i zapowiedź. */
.lista-wpisow {
  margin: clamp(1.8rem, 1.2rem + 1.6vw, 3rem) 0 0; padding: 0; list-style: none;
  display: grid; gap: clamp(1rem, .6rem + 1.3vw, 1.9rem);
  counter-reset: obiekt;
}
@media (min-width: 900px)  { .lista-wpisow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .lista-wpisow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.zapowiedz {
  counter-increment: obiekt;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(1.4rem, 1rem + 1.2vw, 2.1rem);
  background-color: var(--papier-karta);
  background-image: linear-gradient(160deg, #172640 0%, #0E1728 100%);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promień-płyta);
  box-shadow: var(--cień-płyta);
  transition: transform .18s ease, border-color .18s ease;
}
.zapowiedz::before {
  content: counter(obiekt, decimal-leading-zero);
  position: absolute; inset-block-start: -.42em; inset-inline-end: .18em;
  font-family: var(--krój-naglowek); font-weight: 700; font-size: 6.2rem; line-height: 1;
  color: rgba(166, 199, 242, .17); pointer-events: none;
}
.zapowiedz::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px;
  background: linear-gradient(90deg, var(--akcent), rgba(94, 143, 208, .5) 60%, rgba(94, 143, 208, 0));
}
.zapowiedz:hover { transform: translateY(-3px); border-color: rgba(124, 140, 168, .55); }

/* ⚠ tytuł karty JEST nagłówkiem h2, więc łapią go reguły „.pasmo h2" —
   znacznik gwiazdy i włos podziałki pojawiały się w środku karty. */
.pasmo .zapowiedz__tytul {
  position: relative; z-index: 1;
  margin: 0 0 .6rem; padding: 0; border: 0; max-width: none;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.16rem, 1.02rem + .52vw, 1.48rem); line-height: 1.26;
}
.pasmo .zapowiedz__tytul::before, .pasmo .zapowiedz__tytul::after { content: none; }
/* ⚠ specyficzność: „.pasmo li a" (0-1-2) bije „.zapowiedz__tytul a" (0-1-1) */
.pasmo .zapowiedz__tytul a {
  display: block; min-height: 44px;
  color: var(--atrament); text-decoration: none;
}
.pasmo .zapowiedz__tytul a:hover { color: var(--wiodaca-ciemna); }
.pasmo .zapowiedz__tekst {
  position: relative; z-index: 1;
  margin: 0 0 1.4rem; color: var(--atrament-cichy); font-size: .99rem;
}
.pasmo .zapowiedz__wiecej { position: relative; z-index: 1; margin: auto 0 0; }
.pasmo .zapowiedz__wiecej > a { min-height: 44px; }

/* --- 13. STOPKA — dolny pas mapy nieba -------------------------------- */
.stopka {
  position: relative; overflow: hidden;
  background-color: var(--poswiata);
  background-image:
    radial-gradient(46rem 22rem at 50% 128%, rgba(64, 102, 158, .42), rgba(10, 17, 32, 0) 66%),
    linear-gradient(180deg, #070B14 0%, #0B1424 46%, #101C33 100%);
  border-block-start: 1px solid var(--linia-cicha);
}
.stopka::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 1px;
  background: linear-gradient(90deg,
      rgba(166, 199, 242, 0), rgba(166, 199, 242, .5) 28%, rgba(242, 200, 121, .5) 68%, rgba(242, 200, 121, 0));
}
/* podziałka azymutu wzdłuż dolnej krawędzi — czysta dekoracja */
.stopka::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline: 0; height: 14px;
  background-image: repeating-linear-gradient(90deg,
      rgba(124, 140, 168, .55) 0 1px, rgba(124, 140, 168, 0) 1px 26px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000);
          mask-image: linear-gradient(180deg, transparent, #000);
}
.stopka__niebo {
  position: absolute; inset-block: 0 30%; inset-inline: 0; z-index: 0;
  pointer-events: none; color: var(--atrament); opacity: .85;
}
.stopka__niebo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stopka .kontener {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.4rem clamp(1rem, 3vw, 3.5rem);
  padding-block: clamp(2.4rem, 1.5rem + 2.6vw, 4.4rem) clamp(2.6rem, 1.7rem + 2.6vw, 4.6rem);
}
.stopka__sygnatura { display: flex; flex-direction: column; gap: .55rem; }
.stopka__gwiazda {
  width: 1.05rem; height: 1.05rem; background: var(--akcent);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}
.stopka__znak {
  margin: 0; font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.2rem); line-height: 1.1;
  color: var(--atrament); letter-spacing: .012em;
}
.stopka__kreska {
  width: clamp(64px, 14vw, 148px); height: 1px;
  background: linear-gradient(90deg, var(--akcent), rgba(94, 143, 208, .5) 60%, rgba(94, 143, 208, 0));
}
.stopka__menu ul {
  display: flex; flex-wrap: wrap; gap: 0 clamp(.6rem, 2vw, 2rem);
  margin: 0; padding: 0; list-style: none;
}
.stopka__menu a {
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px;   /* B7 */
  padding-inline: .2em; text-decoration: none;
  color: var(--atrament-cichy); font-weight: 600; font-size: .86rem;
  letter-spacing: .09em; text-transform: uppercase;
  transition: color .16s ease;
}
.stopka__menu a::after {
  content: ""; position: absolute; inset-block-end: 9px; inset-inline: .2em; height: 2px;
  background: var(--akcent); transform: scaleX(0); transform-origin: left;
  transition: transform .16s ease;
}
.stopka__menu a:hover { color: var(--atrament); }
.stopka__menu a:hover::after { transform: scaleX(1); }

/* --- 14. ARKUSZ SYSTEMU (specimen.html) ------------------------------ */
.próbki {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin: 1.5rem 0 2.2rem; padding: 0; list-style: none;
}
.próbka {
  border: 1px solid var(--linia-cicha); border-radius: var(--promień-płyta);
  background: var(--papier-karta); padding: 0; overflow: hidden;
  box-shadow: var(--cień-płyta);
}
.próbka__pole { display: block; height: 82px; }
.próbka__opis {
  display: block; padding: .8rem 1rem;
  font-family: var(--krój-maszyna); font-size: .82rem;
  color: var(--atrament); line-height: 1.55;
}

/* =====================================================================
   16. POWYŻEJ 1600 px — PŁYTA ATLASU: BARK, PROZA, MARGINES MAPY
   ---------------------------------------------------------------------
   Rozciąganie samej prozy nic nie daje: 1728 px szerokiego wiersza to około
   160 znaków, czyli WADA, nie poprawa. Dlatego odzyskana szerokość jest tutaj
   ROZDZIELONA na role, dokładnie jak na arkuszu mapy nieba:
     • BARK (23rem) — nagłówek sekcji wychodzi spod tekstu do zewnętrznej
       kolumny i zostaje tam na całą wysokość części; gwiazda i podziałka
       przenoszą się spod niego pod spód, żeby pierwszy wiersz prozy i nagłówek
       zaczynały się na jednej linii,
     • PROZA (34rem) — bez zmian, około 66–79 znaków w wierszu,
     • MARGINES MAPY (8rem) — podziałka azymutu biegnąca wzdłuż całej części,
       a pola wezwania rozlewają się na prozę razem z tym marginesem,
     • HERO — tytuł idzie przez bark i prozę naraz (60rem), zajawka zostaje
       wąska, a w barku pojawia się krążek planisfery,
     • PASMA SZEROKIE — karty dziennika i próbki arkusza systemu dostają całą
       płytę (71rem zamiast 58rem), więc w rzędzie mieści się ich więcej.
   ⚠ 1600 px, nie 1366: przy 1600 px płyta (71rem = 1392 px) mieści się
   w kontenerze (1440 px) bez ściskania kolumn.
   ===================================================================== */
@media (min-width: 1600px) {

  /* ---- 16a. pasma tekstowe: BARK | PROZA | MARGINES MAPY ---- */
  .pasmo:not(.pasmo--szeroki) > .kontener > .czesc {
    max-width: none; margin-inline: 0;
    display: grid;
    grid-template-columns:
      [bark-start] minmax(0, var(--bark)) [bark-end]
      var(--rowek)
      [proza-start] minmax(0, var(--kolumna)) [proza-end]
      var(--rowek)
      [skala-start] minmax(0, var(--skala)) [skala-end];
    justify-content: center;
    column-gap: 0; row-gap: 0;
    align-items: start;
  }
  /* ⚠ nagłówek stracił w siatce swój górny margines (musi stać w jednej linii
     z pierwszym wierszem prozy), więc odstęp między częściami niesie opakowanie.
     Bez tego akapit jednej części dotykał lidu następnej. */
  .czesc + .czesc { margin-block-start: clamp(2.8rem, 1.6rem + 2.6vw, 4.8rem); }
  .pasmo > .kontener > .czesc > * { grid-column: proza-start / proza-end; }
  /* nagłówek zajmuje bark na całą wysokość części, więc akapity układają się
     obok niego od pierwszego wiersza w dół */
  .pasmo > .kontener > .czesc > h2 {
    grid-column: bark-start / bark-end;
    grid-row: 1 / span 60;
    align-self: start;
    margin-block: 0; padding-block: 0 1.75rem;
    font-size: clamp(1.6rem, 1rem + 1.55vw, 2.5rem);
    /* ⚠⚠ PUŁAPKA: body ma overflow-wrap:break-word i w wąskiej kolumnie
       łamie nagłówek W ŚRODKU SŁOWA („geograficz|na"). Żadna bramka tego nie
       widzi — w barku łamiemy wyłącznie na spacjach, z przenoszeniem. */
    overflow-wrap: normal; hyphens: auto;
  }
  /* gwiazda i włos podziałki spod górnej krawędzi nagłówka na jego spód */
  .pasmo > .kontener > .czesc > h2::before {
    inset-block-start: auto; inset-block-end: .1rem;
  }
  .pasmo > .kontener > .czesc > h2::after {
    inset-block-start: auto; inset-block-end: .48rem;
  }
  /* pole wezwania rozlewa się na prozę razem z marginesem mapy */
  .pasmo > .kontener > .czesc > .cta { grid-column: proza-start / skala-end; }

  /* ornamenty części: włos przy krawędzi barku i podziałka azymutu w marginesie.
     ⚠ Oba są dziećmi SIATKI, a nie okna — nie mogą więc wejść pod kolumnę
     tekstu przy żadnej szerokości (pułapka 19, bramka B13c). */
  .pasmo > .kontener > .czesc::before,
  .pasmo > .kontener > .czesc::after {
    content: ""; grid-row: 1 / span 60; align-self: stretch; pointer-events: none;
  }
  .pasmo > .kontener > .czesc::before {
    grid-column: bark-start / bark-end; justify-self: end;
    width: 1px; margin-inline-end: calc(var(--rowek) / -2);
    background: linear-gradient(180deg, rgba(124, 140, 168, 0), rgba(124, 140, 168, .75) 8%,
                                        rgba(124, 140, 168, .75) 92%, rgba(124, 140, 168, 0));
  }
  .pasmo > .kontener > .czesc::after {
    grid-column: skala-start / skala-end; justify-self: start;
    /* ⚠ same kreski co 32 px czytały się jak lista myślników. Podziałka to
       PION z kreskami: pionowa linia przy krawędzi prozy i krótkie kreski
       wychodzące w margines, gęstsze niż wiersz tekstu. */
    width: 11px; margin-inline-start: calc(var(--rowek) / -2 - 5px);
    background-image:
      linear-gradient(180deg, rgba(124, 140, 168, .55), rgba(124, 140, 168, .55)),
      repeating-linear-gradient(180deg,
        rgba(166, 199, 242, .55) 0 1px, rgba(166, 199, 242, 0) 1px 18px);
    background-size: 1px 100%, 100% 100%;
    background-position: 0 0, 0 0;
    background-repeat: no-repeat, repeat;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
            mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
  }
  /* ornamenty kontenera z bloku „od 1200 px" są kotwiczone do osi wyśrodkowanej
     kolumny — powyżej 1600 px tej osi już nie ma, więc ustępują miejsca */
  .pasmo:not(.pasmo--szeroki) > .kontener::before,
  .pasmo:not(.pasmo--szeroki) > .kontener::after { content: none; }
  .pasmo--szeroki > .kontener::before,
  .pasmo--szeroki > .kontener::after {
    inset-inline-start: calc(50% - var(--plyta) / 2 - 2.9rem);
  }
  /* łuk planisfery kotwiczy się do prawej krawędzi PŁYTY, nie kolumny prozy */
  .pasmo--noc::before,
  .pasmo--noc.pasmo--szeroki::before {
    inset-inline-start: calc(50% + var(--plyta) / 2 + 2.4rem);
  }

  /* ---- 16b. hero: tytuł przez bark i prozę, krążek planisfery w barku ---- */
  .hero > .kontener {
    display: grid;
    grid-template-columns:
      [bark-start] minmax(0, var(--bark-hero)) [bark-end]
      var(--rowek)
      [proza-start] minmax(0, var(--kolumna-hero)) [proza-end]
      var(--rowek)
      [skala-start] minmax(0, var(--skala)) [skala-end];
    justify-content: center;
    column-gap: 0; row-gap: 0;
    align-items: start;
  }
  .hero .kontener > * { grid-column: proza-start / proza-end; max-width: none; margin-inline: 0; }
  /* ⚠ znacznik i tytuł MUSZĄ zajmować kolumnę prozy w wierszach 1 i 2, inaczej
     samoczynne układanie wstawi zajawkę OBOK znacznika, nad tytułem. */
  .hero .kontener > .hero__znacznik { grid-column: bark-start / skala-end; grid-row: 1; }
  .hero .kontener > .tytul { grid-column: bark-start / proza-end; grid-row: 2; margin-inline: 0; }
  /* krążek planisfery w barku hero — czysta ozdoba, zero treści */
  .hero .kontener::after {
    content: ""; grid-column: bark-start / bark-end; grid-row: 3 / span 20;
    align-self: stretch; min-height: 13rem;
    margin-block-start: .6rem; margin-inline-end: var(--rowek);
    pointer-events: none;
    /* ⚠ środek krążka leży POZA barkiem, po lewej: w barku widać brzeg
       planisfery, czyli łuki wchodzące w kolumnę — a nie pełne koła. */
    background-image:
      repeating-radial-gradient(circle at -34% 46%, rgba(166, 199, 242, 0) 0 3.05rem,
                                rgba(166, 199, 242, .26) 3.05rem 3.15rem),
      radial-gradient(circle at -34% 46%, rgba(94, 143, 208, .16), rgba(94, 143, 208, 0) 72%);
    -webkit-mask-image: linear-gradient(90deg, #000 0 46%, rgba(0,0,0,.35) 78%, transparent 99%);
            mask-image: linear-gradient(90deg, #000 0 46%, rgba(0,0,0,.35) 78%, transparent 99%);
  }

  /* ---- 16c. pasma szerokie: siatki dostają całą płytę ---- */
  .pasmo--szeroki > .kontener {
    display: grid;
    grid-template-columns: [plyta-start] minmax(0, var(--plyta)) [plyta-end];
    justify-content: center;
  }
  /* ⚠ nagłówek i akapit zostają WĄSKIE — rozciągnięty wiersz na 71rem to
     około 160 znaków. Szerokość dostają wyłącznie komponenty siatkowe. */
  .pasmo--szeroki > .kontener > * { max-width: var(--kolumna); margin-inline: 0; }
  .pasmo--szeroki > .kontener > .lista-wpisow,
  .pasmo--szeroki > .kontener > .próbki { max-width: none; }
}

/* Rama arkusza jest już wyraźna (36 px i więcej), więc odsunięcie od krawędzi
   ma czytać się jako decyzja, a nie luz: płyta dostaje zaokrąglenie, cienki
   rant i miękki cień rzucany na przestrzeń wokół. */
@media (min-width: 1720px) {
  .arkusz {
    border-radius: 22px; overflow: hidden;
    box-shadow: 0 50px 120px -60px rgba(0, 0, 0, 1), 0 0 0 1px rgba(124, 140, 168, .20);
  }
}

/* --- 15. RUCH I DRUK ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  html { font-size: 11pt; }
  body { background: #FFFFFF; color: #000000; background-image: none; }
  .hero, .pasmo--arkusz, .cta, .zapowiedz, .stopka {
    background: #FFFFFF; color: #000000; box-shadow: none; border-color: #000000;
  }
  .hero__niebo, .hero__mgla, .hero__siatka, .stopka__niebo, .zapowiedz::before { display: none !important; }
  .pasmo > .kontener > *, .hero .kontener > *, .czesc > * { max-width: none; }
  .arkusz { margin: 0; background: #FFFFFF; border-radius: 0; box-shadow: none; }
  .czesc, .pasmo--szeroki > .kontener, .hero > .kontener { display: block; }
  .tytul, .pasmo h2, .stopka__znak, .znak__slowo { color: #000000; }
  a { color: #000000; }
}