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

   IDEA: serwis uczy zamawiać projekt graficzny, więc sam jest złożony jak
   plansza w programie graficznym — pole spadu, siatka modułowa z punktami
   węzłowymi, znaczniki cięcia, numer planszy w marginesie technicznym
   i pasek próbek koloru wracający na każdym widoku.
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  /* powierzchnie jasne */
  --papier:          #F7F3EC;
  --papier-karta:    #FFFFFF;
  --tlo-2:           #EDE4D6;   /* piasek */
  --morze-jasne:     #DCEBEC;
  --ochra-jasna:     #F7E4BC;
  --wiodaca-jasna:   #FBE3DA;

  /* powierzchnie ciemne — „studio" */
  --noc:             #12141C;
  --noc-2:           #1C2030;
  --glab:            #0C2A31;

  /* farby */
  --wiodaca:         #D2401F;   /* powierzchnie, kreski, próbki */
  --wiodaca-ciemna:  #A32A10;   /* tekst i przyciski na jasnym */
  --akcent:          #0E6B78;
  --akcent-ciemny:   #0B5561;
  --ochra:           #E2A32C;
  --zorza:           #FF8A63;   /* wiodąca na ciemnym tle */
  --laguna:          #6FD3DE;   /* akcent na ciemnym tle */

  /* pismo */
  --atrament:        #14161F;
  --atrament-cichy:  #4E5364;
  --na-nocy:         #F4F1EA;
  --na-nocy-cichy:   #AEB4C6;
  --na-wiodacej:     #FFFFFF;
  --na-akcencie:     #FFFFFF;

  /* linie */
  --linia:           #7C7566;
  --linia-cicha:     #DED5C6;

  /* role wyliczane per pasmo — nadpisywane w .pasmo--* */
  --tlo-pasma:       var(--papier);
  --pismo:           var(--atrament);
  --pismo-ciche:     var(--atrament-cichy);
  --pismo-mocne:     var(--wiodaca-ciemna);
  --kreska:          rgba(20, 22, 31, .10);
  --wezel:           rgba(20, 22, 31, .22);
  --ramka:           var(--linia-cicha);
  --karta-tlo:       var(--papier-karta);

  /* kroje */
  --krój-naglowek: "Archivo", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --krój-tekst:    "Source Serif 4", Georgia, "Times New Roman", "Nimbus Roman", serif;
  --krój-maszyna:  ui-monospace, "DejaVu Sans Mono", "Liberation Mono", Consolas, monospace;

  /* miary */
  --kolumna:       34rem;                    /* łam prozy ≈ 70 znaków */
  --margines:      clamp(20px, 5vw, 96px);
  --kontener:      min(100% - 2 * var(--margines), 1728px);
  --moduł:         44px;                     /* krok siatki ornamentu */
  --promień:       0px;                      /* system detalu: kant, nie zaokrąglenie */
  --rytm:          clamp(2.6rem, 1.6rem + 3.2vw, 5.2rem);
  --cień-karta:    0 1px 0 rgba(20,22,31,.05), 0 18px 34px -22px rgba(20,22,31,.45);
  --cień-plyta:    0 30px 60px -34px rgba(12,20,31,.6);
}

/* --- 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: overflow-x na html,body — clip z zapasem hidden */
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--atrament);
  font-family: var(--krój-tekst);
  font-size: 1rem;
  line-height: 1.68;
  overflow-wrap: break-word;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

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

/* ⚠⚠ pułapka 1, wariant czwarty: globalny kolor pogrubienia wchodzi na
   powierzchnię o odwrotnej jasności. Pogrubiamy WAGĄ, nie barwą. */
strong, b { color: inherit; font-weight: 700; }

:focus-visible {
  outline: 3px solid var(--akcent);
  outline-offset: 3px;
}
.pasmo--noc :focus-visible, .stopka :focus-visible, .naglowek :focus-visible,
.hero :focus-visible { outline-color: var(--laguna); }

/* --- 3. SZKIELET ----------------------------------------------------- */
.kontener {
  width: var(--kontener);
  margin-inline: auto;
}

/* ⚠ pułapka T-B13: proza MUSI zostać bezpośrednim dzieckiem .kontener,
   żeby sonda bramki mierzyła kolumnę tekstu, a nie kartę w siatce.
   Dlatego listy i siatki kart są owinięte w .pole-kart. */
.uklad {
  position: relative;
  display: grid;
  /* ⚠⚠ minmax(0, --kolumna), NIE min(--kolumna, 100%). Procent w torze siatki
     liczy się od CAŁEJ szerokości kontenera, więc na 390 px tor środkowy brał
     całe 350 px, a dwie przerwy po 20 px dokładały się PONAD kontener: dokument
     rósł do 410 px i bramka B5 widziała przewijanie poziome. minmax rozdziela
     wolne miejsce po odjęciu przerw. */
  grid-template-columns:
    [pelny-start] minmax(0, 1fr)
    [kol-start] minmax(0, var(--kolumna))
    [kol-end] minmax(0, 1fr) [pelny-koniec];
  column-gap: 0;
}
/* przerwy mają sens dopiero wtedy, gdy tory boczne naprawdę istnieją */
@media (min-width: 1240px) { .uklad { column-gap: clamp(1.5rem, 3vw, 3.5rem); } }
.uklad > * { grid-column: kol-start / kol-end; min-width: 0; }
.uklad > .szeroko { grid-column: pelny-start / pelny-koniec; }

/* --- 4. ORNAMENT: siatka modułowa, węzły, znaczniki spadu ------------- */
.siatka {
  background-image:
    radial-gradient(circle at 1px 1px, var(--wezel) 0 1.4px, transparent 1.6px),
    repeating-linear-gradient(to right,  var(--kreska) 0 1px, transparent 1px var(--moduł)),
    repeating-linear-gradient(to bottom, var(--kreska) 0 1px, transparent 1px var(--moduł));
  background-size: var(--moduł) var(--moduł), auto, auto;
}

/* pasek próbek koloru — motyw przewodni całej makiety */
.probki {
  height: 10px;
  background: linear-gradient(90deg,
    var(--wiodaca)  0 16.666%,
    var(--ochra)    0 33.333%,
    var(--akcent)   0 50%,
    var(--papier)   0 66.666%,
    var(--laguna)   0 83.333%,
    var(--wiodaca-ciemna) 0 100%);
}
.probki--cienki { height: 6px; }

/* MARGINES TECHNICZNY — pas przy krawędzi arkusza, POZA kontenerem treści.
   ⚠ pułapka 19 i 21: ornament kotwiczony do obszaru siatki wchodził pod ostatnie
   znaki każdego wiersza prozy. Teraz wisi na sekcji i mieści się dokładnie
   w marginesie strony (--margines), więc nie ma prawa dotknąć treści. */
.margines-tech {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 2;
  width: var(--margines);
  display: none;
  pointer-events: none;
}
.margines-tech::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 42%;
  width: 1px;
  background: var(--linia);
  opacity: .45;
}
.margines-tech::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 42%;
  width: 9px;
  background-image: repeating-linear-gradient(to bottom,
    var(--linia) 0 1px, transparent 1px 18px);
  opacity: .5;
}
.margines-tech i {
  position: absolute;
  inset-inline-start: 42%;
  width: 18px;
  height: 18px;
  display: block;
}
.margines-tech i:nth-child(1) { top: 0;    background: var(--wiodaca); }
.margines-tech i:nth-child(2) { top: 22px; background: var(--ochra); }
.margines-tech i:nth-child(3) { top: 44px; background: var(--akcent); }
@media (min-width: 1240px) { .margines-tech { display: block; } }

/* znacznik planszy w prawym torze siatki — przeciwwaga numeru planszy */
.uklad::after {
  content: "";
  display: none;
  grid-column: kol-end / pelny-koniec;
  grid-row: 1;
  align-self: start;
  height: clamp(70px, 8vw, 128px);
  margin-top: clamp(.9rem, 1.6vw, 1.5rem);
  background-image:
    linear-gradient(to right, var(--wiodaca) 0 22px),
    linear-gradient(to right, var(--ochra) 0 22px),
    linear-gradient(to right, var(--akcent) 0 22px),
    repeating-linear-gradient(to bottom, var(--linia) 0 1px, transparent 1px 14px);
  background-repeat: no-repeat;
  background-size: 22px 22px, 22px 22px, 22px 22px, 1px 100%;
  background-position: 0 0, 0 26px, 0 52px, 30px 0;
  opacity: .85;
}
@media (min-width: 1240px) { .uklad::after { display: block; } }

/* ⚠ ODRZUCONE (2026-08-30): kreska planszy jako .uklad::before rozpięta na tory
   [kol-start / pelny-koniec]. Pseudoelement siatki jest ZWYKŁYM ELEMENTEM SIATKI:
   zajmował cały wiersz 1 razem z torem prozy, więc automatyczne rozmieszczanie
   spychało nagłówek do wiersza 2 i na zrzucie stały DWIE kreski — długa u góry
   planszy i własna kreska nagłówka 100 px niżej. Zostaje kreska na nagłówku,
   równa szerokości kolumny, którą otwiera; znacznik w prawym torze domyka rytm. */

/* plansza domknięcia: przycisk stoi w osi planszy, wewnątrz pola spadu */
.domkniecie .uklad > .cta,
.domkniecie .uklad > .odsylacz { text-align: center; }

/* --- 5. NAGŁÓWEK ----------------------------------------------------- */
.naglowek {
  position: relative;
  background-color: var(--noc);
  color: var(--na-nocy);
  --kreska: rgba(244, 241, 234, .07);
  --wezel:  rgba(244, 241, 234, .16);
}
.naglowek::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right, rgba(244,241,234,.07) 0 1px, transparent 1px var(--moduł));
  pointer-events: none;
}
.naglowek__pas {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(.7rem, 1.4vw, 1.15rem);
}
.znak {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .45em;
  min-height: 48px;
  padding-block: .5rem;
  align-content: center;
  font-family: var(--krój-naglowek);
  text-decoration: none;
  color: var(--na-nocy);
  line-height: 1.15;
}
.znak__mocny {
  font-size: clamp(1.12rem, .95rem + .55vw, 1.5rem);
  font-weight: 900;
  letter-spacing: -.022em;
}
.znak__cichy {
  font-size: clamp(.72rem, .66rem + .2vw, .86rem);
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--na-nocy-cichy);
}
.znak:hover .znak__cichy, .znak:focus-visible .znak__cichy { color: var(--laguna); }

.menu { flex: none; }
.menu__lista {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem clamp(.1rem, 1vw, .6rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu__link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: .4rem clamp(.5rem, 1.1vw, .95rem);
  font-family: var(--krój-naglowek);
  font-size: clamp(.82rem, .76rem + .18vw, .95rem);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--na-nocy);
  text-decoration: none;
}
.menu__link::after {
  content: "";
  position: absolute;
  inset-inline: clamp(.5rem, 1.1vw, .95rem);
  bottom: 8px;
  height: 2px;
  background: var(--laguna);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.menu__link:hover::after, .menu__link:focus-visible::after { transform: scaleX(1); }
.menu__link[aria-current="page"] { color: var(--ochra); }
.menu__link[aria-current="page"]::after { background: var(--ochra); transform: scaleX(1); }

.naglowek .probki { position: relative; z-index: 1; }

/* skip-link — musi mieć pole ≥44 px także wtedy, gdy jest schowany (B7) */
.omin {
  position: absolute;
  top: -120px;
  left: 0;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: .6rem 1.4rem;
  background: var(--noc);
  color: var(--na-nocy);
  font-family: var(--krój-naglowek);
  font-weight: 600;
  text-decoration: none;
}
.omin:focus { top: 0; }

/* --- 6. HERO — wielkie pole koloru ----------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background-color: var(--noc);
  background-image:
    radial-gradient(120% 90% at 88% 6%,  rgba(111, 211, 222, .30) 0%, rgba(111, 211, 222, 0) 58%),
    radial-gradient(90% 80% at 6% 96%,   rgba(210, 64, 31, .42)  0%, rgba(210, 64, 31, 0)  62%),
    linear-gradient(155deg, #171B2B 0%, #12141C 42%, #0C2A31 100%);
  color: var(--na-nocy);
  --pismo: var(--na-nocy);
  --pismo-ciche: var(--na-nocy-cichy);
  --kreska: rgba(244, 241, 234, .085);
  --wezel:  rgba(244, 241, 234, .20);
  overflow: hidden;
}
.hero__siatka {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero__kontener {
  position: relative;
  z-index: 1;
  padding-block: clamp(3rem, 2rem + 6vw, 8.5rem) clamp(2.6rem, 1.6rem + 4.6vw, 6rem);
}
.hero__nad {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: clamp(1.4rem, 3vw, 2.6rem);
}
.hero__nad::before {
  content: "";
  width: clamp(48px, 9vw, 132px);
  height: 3px;
  background: var(--zorza);
}
.hero__nad::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(244,241,234,.32), rgba(244,241,234,0));
}

.tytul {
  margin: 0;
  font-family: var(--krój-naglowek);
  font-weight: 900;
  letter-spacing: -.032em;
  line-height: .94;
  text-wrap: balance;
}
.hero .tytul {
  font-size: clamp(2.35rem, 1.15rem + 6.2vw, 5.1rem);
  max-width: 20ch;
}
.tytul__a { display: inline; font-weight: 900; color: var(--na-nocy); }
.tytul__b {
  display: inline;
  font-weight: 400;
  font-style: normal;
  color: var(--zorza);
  letter-spacing: -.02em;
}

.hero__dol {
  display: grid;
  gap: clamp(1.8rem, 4vw, 3.4rem);
  margin-top: clamp(1.8rem, 3.4vw, 3.2rem);
  align-items: start;
}
@media (min-width: 1000px) {
  .hero__dol { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
.hero__lid > p {
  margin: 0 0 1.1em;
  max-width: 36em;
}
.hero__lid > p:last-child { margin-bottom: 0; }
.hero__lid .wprowadzenie, .hero__lid .zajawka {
  font-size: clamp(1.08rem, .98rem + .5vw, 1.42rem);
  line-height: 1.5;
  color: var(--na-nocy);
}
.hero__lid > p:not(.wprowadzenie):not(.zajawka) {
  color: var(--na-nocy-cichy);
  font-size: .98rem;
}
.hero__lid { border-left: 3px solid var(--ochra); padding-left: clamp(1rem, 2vw, 1.9rem); }

.plyta { position: relative; }
.plyta svg { display: block; width: 100%; height: auto; color: var(--na-nocy); }
.plyta__cien { filter: drop-shadow(0 24px 40px rgba(0,0,0,.45)); }
.ksztalt--wiodaca { fill: var(--zorza); }
.ksztalt--ochra   { fill: var(--ochra); }
.ksztalt--akcent  { fill: var(--laguna); }
.ksztalt--noc     { fill: var(--noc-2); }
.kreska--jasna    { stroke: currentColor; fill: none; }

.hero .probki { position: relative; z-index: 1; }

/* wariant hero dla podstron i wpisów — niższy, ale nadal pełnokolorowy */
.hero--wpis { background-image:
    radial-gradient(110% 90% at 92% 10%, rgba(226, 163, 44, .28) 0%, rgba(226,163,44,0) 60%),
    radial-gradient(90% 90% at 0% 100%,  rgba(14, 107, 120, .55) 0%, rgba(14,107,120,0) 64%),
    linear-gradient(160deg, #12141C 0%, #171B2B 46%, #0C2A31 100%); }
.hero--wpis .tytul { font-size: clamp(2.05rem, 1.05rem + 5.1vw, 4.35rem); max-width: 22ch; }

/* --- 7. PASMA (plansze prezentacji) ---------------------------------- */
.tresc { counter-reset: plansza; display: block; }

.pasmo { position: relative; background-color: var(--tlo-pasma); color: var(--pismo); }
.plansza { counter-increment: plansza; }
.plansza > .kontener { padding-block: var(--rytm); }

.pasmo--papier { --tlo-pasma: var(--papier); }
.pasmo--piasek { --tlo-pasma: var(--tlo-2); }
.pasmo--morze  { --tlo-pasma: var(--morze-jasne); }
.pasmo--rdza   { --tlo-pasma: var(--wiodaca-jasna); }
.pasmo--ochra  { --tlo-pasma: var(--ochra-jasna); }
.pasmo--karta  { --tlo-pasma: var(--papier-karta); }
.pasmo--noc {
  --tlo-pasma: var(--noc);
  --pismo: var(--na-nocy);
  --pismo-ciche: var(--na-nocy-cichy);
  --pismo-mocne: var(--zorza);
  --kreska: rgba(244, 241, 234, .075);
  --wezel:  rgba(244, 241, 234, .17);
  --ramka:  rgba(244, 241, 234, .22);
  --karta-tlo: var(--noc-2);
  --linia: var(--na-nocy-cichy);
  color: var(--na-nocy);
}
.pasmo--noc::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(80% 120% at 100% 0%, rgba(111,211,222,.16) 0%, rgba(111,211,222,0) 60%),
    radial-gradient(70% 100% at 0% 100%, rgba(210,64,31,.22) 0%, rgba(210,64,31,0) 60%),
    radial-gradient(circle at 1px 1px, rgba(244,241,234,.17) 0 1.4px, transparent 1.6px),
    repeating-linear-gradient(to right,  rgba(244,241,234,.06) 0 1px, transparent 1px var(--moduł)),
    repeating-linear-gradient(to bottom, rgba(244,241,234,.06) 0 1px, transparent 1px var(--moduł));
  background-size: auto, auto, var(--moduł) var(--moduł), auto, auto;
  pointer-events: none;
}
.pasmo--noc > .kontener { position: relative; z-index: 1; }

/* cienka kreska otwierająca każde pasmo + numer planszy w marginesie */
.plansza > .kontener > .uklad > h2,
.plansza > .kontener.uklad > h2 {
  position: relative;
  margin: 0 0 clamp(1rem, 2vw, 1.9rem);
  padding-top: clamp(.9rem, 1.6vw, 1.5rem);
  font-family: var(--krój-naglowek);
  font-size: clamp(1.42rem, 1.05rem + 1.5vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -.024em;
  line-height: 1.08;
  color: var(--pismo);
  border-top: 3px solid var(--wiodaca);
  text-wrap: balance;
}
.pasmo--noc h2 { border-top-color: var(--zorza); }
.uklad > h2::before {
  content: counter(plansza, decimal-leading-zero);
  display: block;
  margin-bottom: .35em;
  font-family: var(--krój-maszyna);
  font-size: .62em;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--pismo-mocne);
}
@media (min-width: 1240px) {
  .uklad > h2::before {
    position: absolute;
    top: clamp(.9rem, 1.6vw, 1.5rem);
    right: calc(100% + clamp(1.25rem, 3vw, 3.5rem));
    margin: 0;
    font-size: clamp(2.4rem, 1.2rem + 2.6vw, 4rem);
    line-height: .8;
    letter-spacing: -.04em;
    font-family: var(--krój-naglowek);
    font-weight: 900;
    opacity: .34;
  }
}

.uklad > h3 {
  margin: clamp(1.7rem, 3vw, 2.6rem) 0 .6rem;
  font-family: var(--krój-naglowek);
  font-size: clamp(1.08rem, .98rem + .5vw, 1.34rem);
  font-weight: 700;
  letter-spacing: -.012em;
  line-height: 1.22;
  color: var(--pismo);
}
.uklad > h3::before {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-bottom: .55rem;
  background: var(--akcent);
}
.pasmo--noc .uklad > h3::before { background: var(--laguna); }

.uklad > p {
  margin: 0 0 1.05em;
  color: var(--pismo);
}
.uklad > p:last-child { margin-bottom: 0; }

/* --- 8. LISTY JAKO KARTY --------------------------------------------- */
.pole-kart {
  margin: clamp(1.5rem, 3vw, 2.6rem) 0;
}
.pole-kart:last-child { margin-bottom: 0; }

.karty {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(.85rem, 1.6vw, 1.4rem);
  counter-reset: karta;
  align-items: stretch;
}
@media (min-width: 700px)  { .karty { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .karty { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .karty--gesta { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.karty > li {
  counter-increment: karta;
  position: relative;
  padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1rem, 1.8vw, 1.5rem) clamp(1.1rem, 2vw, 1.5rem);
  background: var(--karta-tlo);
  border: 1px solid var(--ramka);
  border-top: 4px solid var(--wiodaca);
  box-shadow: var(--cień-karta);
  font-size: .96rem;
  line-height: 1.55;
}
.pasmo--noc .karty > li { box-shadow: none; border-top-color: var(--zorza); }
.karty > li::before {
  content: counter(karta, decimal-leading-zero);
  display: block;
  margin-bottom: .5rem;
  font-family: var(--krój-naglowek);
  font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.5rem);
  font-weight: 900;
  line-height: .85;
  letter-spacing: -.05em;
  color: var(--wiodaca-ciemna);
}
.pasmo--noc .karty > li::before { color: var(--zorza); }
.karty > li:nth-child(3n+2) { border-top-color: var(--akcent); }
.karty > li:nth-child(3n+2)::before { color: var(--akcent-ciemny); }
.pasmo--noc .karty > li:nth-child(3n+2) { border-top-color: var(--laguna); }
.pasmo--noc .karty > li:nth-child(3n+2)::before { color: var(--laguna); }
.karty > li:nth-child(3n+3) { border-top-color: var(--ochra); }
.karty > li:nth-child(3n+3)::before { color: var(--atrament-cichy); }
.pasmo--noc .karty > li:nth-child(3n+3)::before { color: var(--ochra); }

/* wyliczenia bez numeracji porządkowej — znacznik zamiast cyfry */
.karty--punkty > li::before {
  content: "";
  width: 30px;
  height: 30px;
  margin-bottom: .7rem;
  background:
    linear-gradient(to right, currentColor 0 30px) 0 0 / 30px 2px no-repeat,
    linear-gradient(to bottom, currentColor 0 30px) 0 0 / 2px 30px no-repeat;
  color: var(--wiodaca);
}
.karty--punkty > li:nth-child(3n+2)::before { color: var(--akcent); }
.karty--punkty > li:nth-child(3n+3)::before { color: var(--ochra); }
.pasmo--noc .karty--punkty > li::before { color: var(--zorza); }
.pasmo--noc .karty--punkty > li:nth-child(3n+2)::before { color: var(--laguna); }
.pasmo--noc .karty--punkty > li:nth-child(3n+3)::before { color: var(--ochra); }

/* --- 9. ODSYŁACZE I PRZYCISKI ---------------------------------------- */
.uklad a, .hero__lid a { color: var(--pismo-mocne); }
.uklad a:not(.strzalka):not(.przycisk) { text-underline-offset: .18em; }

.odsylacz, .cta { margin: clamp(1.3rem, 2.4vw, 2rem) 0 0; }
.odsylacz:last-child, .cta:last-child { margin-bottom: 0; }

.strzalka.strzalka {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 48px;
  padding: .55rem 1.15rem .55rem 1rem;
  background: var(--karta-tlo);
  border: 1px solid var(--linia);
  border-left: 4px solid var(--akcent);
  color: var(--pismo);
  font-family: var(--krój-naglowek);
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.25;
  text-decoration: none;
  box-shadow: var(--cień-karta);
  transition: transform .16s ease, border-color .16s ease;
}
.strzalka.strzalka::after {
  content: "";
  width: 22px;
  height: 10px;
  flex: none;
  background:
    linear-gradient(to right, currentColor 0 22px) left center / 22px 2px no-repeat,
    linear-gradient(to right, currentColor 0 10px) right 0 top 1px / 10px 2px no-repeat;
  clip-path: polygon(0 40%, 78% 40%, 62% 0, 78% 0, 100% 50%, 78% 100%, 62% 100%, 78% 60%, 0 60%);
  background: currentColor;
}
.strzalka.strzalka:hover, .strzalka.strzalka:focus-visible {
  transform: translateX(4px);
  border-left-color: var(--wiodaca);
}
.pasmo--noc .strzalka.strzalka { box-shadow: none; border-left-color: var(--laguna); }

.przycisk.przycisk {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  min-height: 56px;
  padding: .8rem clamp(1.2rem, 2.4vw, 2.1rem);
  background: var(--wiodaca-ciemna);
  color: var(--na-wiodacej);
  border: 0;
  font-family: var(--krój-naglowek);
  font-size: clamp(.95rem, .9rem + .25vw, 1.1rem);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.25;
  text-decoration: none;
  box-shadow: var(--cień-plyta);
  transition: background-color .16s ease, transform .16s ease;
}
.przycisk.przycisk::after {
  content: "";
  width: 26px;
  height: 12px;
  flex: none;
  background: currentColor;
  clip-path: polygon(0 40%, 74% 40%, 58% 0, 76% 0, 100% 50%, 76% 100%, 58% 100%, 74% 60%, 0 60%);
}
.przycisk.przycisk:hover, .przycisk.przycisk:focus-visible {
  background: var(--noc);
  transform: translateY(-2px);
}
.pasmo--noc .przycisk.przycisk { background: var(--zorza); color: var(--noc); }
.pasmo--noc .przycisk.przycisk:hover { background: var(--ochra); color: var(--noc); }

/* pasmo domknięcia — ostatnia plansza widoku */
.domkniecie > .kontener { padding-block: clamp(3rem, 1.8rem + 4.6vw, 6.4rem); }
/* pole spadu domykające widok — ramka znacznikowa, nie treść */
.domkniecie::after {
  content: "";
  position: absolute;
  inset: clamp(.9rem, 1.8vw, 2.2rem);
  border: 1px dashed rgba(244, 241, 234, .20);
  pointer-events: none;
}
.domkniecie .uklad > .odsylacz { margin-top: 0; }
.domkniecie .strzalka.strzalka { background: transparent; color: var(--na-nocy); }

/* --- 10. KARTY ZAPOWIEDZI (blog) ------------------------------------- */
.karty-tematow {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  margin: clamp(1.6rem, 3vw, 2.6rem) 0 0;
}
@media (min-width: 900px) { .karty-tematow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.karta-tematu {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.2rem, 2.2vw, 1.9rem);
  background: var(--karta-tlo);
  border: 1px solid var(--ramka);
  border-top: 5px solid var(--wiodaca);
  box-shadow: var(--cień-karta);
}
.karta-tematu:nth-child(2) { border-top-color: var(--akcent); }
.karta-tematu:nth-child(3) { border-top-color: var(--ochra); }
.karta-tematu__tytul {
  margin: 0;
  font-family: var(--krój-naglowek);
  font-size: clamp(1.06rem, .97rem + .45vw, 1.32rem);
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: 1.16;
  color: var(--pismo);
  text-wrap: balance;
}
.karta-tematu__opis, .karta-tematu > p:first-child { margin: 0; font-size: .97rem; line-height: 1.55; color: var(--pismo); }
.karta-tematu .odsylacz { margin-top: auto; }

.lista-wpisow {
  list-style: none;
  margin: clamp(1.6rem, 3vw, 2.6rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  counter-reset: zapowiedz;
}
@media (min-width: 1000px) { .lista-wpisow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zapowiedz {
  counter-increment: zapowiedz;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.3rem, 2.4vw, 2.1rem);
  background: var(--karta-tlo);
  border: 1px solid var(--ramka);
  box-shadow: var(--cień-karta);
  overflow: hidden;
}
.zapowiedz::before {
  content: counter(zapowiedz, decimal-leading-zero);
  position: absolute;
  top: -.18em;
  right: .1em;
  font-family: var(--krój-naglowek);
  font-size: clamp(4rem, 3rem + 4vw, 7rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.06em;
  color: var(--wiodaca);
  opacity: .13;
  pointer-events: none;
}
.zapowiedz__tytul {
  position: relative;
  margin: 0 0 .8rem;
  padding-top: .9rem;
  border-top: 4px solid var(--wiodaca);
  font-family: var(--krój-naglowek);
  font-size: clamp(1.16rem, 1.02rem + .62vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.14;
}
.zapowiedz:nth-child(2) .zapowiedz__tytul { border-top-color: var(--akcent); }
.zapowiedz:nth-child(3) .zapowiedz__tytul { border-top-color: var(--ochra); }
.zapowiedz__tytul a {
  display: block;
  min-height: 48px;
  color: var(--pismo);
  text-decoration: none;
}
.zapowiedz__tytul a:hover, .zapowiedz__tytul a:focus-visible {
  color: var(--wiodaca-ciemna);
  text-decoration: underline;
  text-underline-offset: .16em;
}
.zapowiedz__tekst { margin: 0 0 1.2rem; font-size: .96rem; line-height: 1.55; color: var(--pismo); }
.zapowiedz__wiecej { margin: auto 0 0; }

/* --- 11. STOPKA ------------------------------------------------------ */
.stopka {
  position: relative;
  background-color: var(--noc);
  color: var(--na-nocy);
  --kreska: rgba(244, 241, 234, .07);
  --wezel:  rgba(244, 241, 234, .16);
}
.stopka::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(60% 120% at 100% 0%, rgba(111,211,222,.16) 0%, rgba(111,211,222,0) 62%),
    radial-gradient(70% 120% at 0% 100%, rgba(210,64,31,.24) 0%, rgba(210,64,31,0) 60%),
    repeating-linear-gradient(to right, rgba(244,241,234,.055) 0 1px, transparent 1px var(--moduł));
  pointer-events: none;
}
.stopka__wnetrze {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1.6rem, 3vw, 3rem);
  padding-block: clamp(2.4rem, 1.6rem + 3.4vw, 4.6rem) clamp(1.6rem, 3vw, 2.6rem);
}
@media (min-width: 900px) {
  .stopka__wnetrze { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: start; }
}
.stopka__znak {
  margin: 0;
  font-family: var(--krój-naglowek);
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.02;
  color: var(--na-nocy);
  max-width: 14ch;
}
.stopka__menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 1.4rem;
}
.stopka__menu a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: .3rem 0;
  color: var(--na-nocy-cichy);
  font-family: var(--krój-naglowek);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.stopka__menu a:hover, .stopka__menu a:focus-visible {
  color: var(--laguna);
  border-bottom-color: var(--laguna);
}
.do-gory.do-gory {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 48px;
  padding: .6rem 1.2rem;
  border: 1px solid var(--na-nocy-cichy);
  color: var(--na-nocy);
  font-family: var(--krój-naglowek);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-decoration: none;
}
.do-gory.do-gory::before {
  content: "";
  width: 12px;
  height: 20px;
  flex: none;
  background: currentColor;
  clip-path: polygon(40% 100%, 40% 26%, 0 26%, 50% 0, 100% 26%, 60% 26%, 60% 100%);
}
.do-gory.do-gory:hover, .do-gory.do-gory:focus-visible {
  border-color: var(--laguna);
  color: var(--laguna);
}
.stopka__spad {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: clamp(1.2rem, 2vw, 2rem);
}
.stopka__spad::before, .stopka__spad::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(244, 241, 234, .18);
}
.stopka__znaczniki {
  flex: none;
  width: 108px;
  height: 22px;
  color: var(--na-nocy-cichy);
}

/* --- 12. SPECIMEN ---------------------------------------------------- */
.probnik { display: grid; gap: 1rem; margin: 1.6rem 0; }
@media (min-width: 700px) { .probnik { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .probnik { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.probnik__pole {
  border: 1px solid var(--ramka);
  background: var(--karta-tlo);
  box-shadow: var(--cień-karta);
}
.probnik__plama { height: 88px; display: block; }
.probnik__opis { margin: 0; padding: .8rem 1rem 1rem; font-family: var(--krój-maszyna); font-size: .8rem; line-height: 1.5; }
.plama--papier { background: var(--papier); }
.plama--piasek { background: var(--tlo-2); }
.plama--morze  { background: var(--morze-jasne); }
.plama--ochra-jasna { background: var(--ochra-jasna); }
.plama--rdza   { background: var(--wiodaca-jasna); }
.plama--wiodaca { background: var(--wiodaca); }
.plama--wiodaca-ciemna { background: var(--wiodaca-ciemna); }
.plama--akcent { background: var(--akcent); }
.plama--ochra  { background: var(--ochra); }
.plama--noc    { background: var(--noc); }
.plama--zorza  { background: var(--zorza); }
.plama--laguna { background: var(--laguna); }

/* --- 12b. SZEROKI ARKUSZ — kompozycja powyżej 1500 px ---------------- */
/* ⭐⭐ zasada użytkownika „skala musi rosnąć powyżej 1366 px", runda druga.
   Pomiar 2026-09-01 (Playwright, 1920 px): margines najszerszego modułu
   treści 96 px — w celu; kolumna prozy w lidzie hero 912 px — za szeroka.
   Zwężenie samo w sobie byłoby cofnięciem skali, więc odzyskana szerokość
   dostaje ROLE, a nie zamienia się w biały margines:
     • nagłówek planszy wychodzi spod prozy do LEWEGO TORU siatki („bark"),
       a numer planszy przestaje być ozdobnikiem na marginesie i staje się
       nadtytułem tego barku — wiersz pierwszy każdej planszy czyta się
       wtedy przez całą szerokość: [numer + tytuł] … [znacznik planszy];
     • lid hero rozpada się na dwie kolumny — akapit wiodący zostaje wąski,
       a akapity uzupełniające stają OBOK niego zamiast pod nim;
     • tytuł hero dostaje szerszy łam, więc mieści się w mniejszej liczbie
       wierszy zamiast schodzić w dół;
     • siatki kart idą na cztery kolumny powyżej 1600 px.
   Poniżej 1500 px układ pozostaje dokładnie taki jak dotąd. */

@media (min-width: 1500px) {
  /* BARK PLANSZY — nagłówek w lewym torze, numer jako jego nadtytuł.
     Selektor musi mieć tę samą wagę co reguła bazowa z sekcji 7, inaczej
     przegrywa marginesem i stopniem pisma. */
  .plansza > .kontener.uklad > h2,
  .plansza > .kontener > .uklad > h2 {
    grid-column: pelny-start / kol-start;
    /* ⚠ pułapka: przy `grid-row: 1` wysokość barku (numer + 2–3 wiersze
       tytułu) rozpychała PIERWSZY wiersz siatki, więc między pierwszym
       a drugim akapitem prozy otwierała się dziura. Bark rozpina się na
       wiele wierszy — nadmiar wysokości rozkłada się po wszystkich i
       żaden odstęp w prozie nie rośnie. */
    grid-row: 1 / span 40;
    align-self: start;
    margin-bottom: 0;
    text-align: right;
    font-size: clamp(1.42rem, 1.05rem + 1.2vw, 2.05rem);
    /* ⚠ pułapka wąskiego toru: globalne overflow-wrap: break-word łamie
       nagłówek W ŚRODKU SŁOWA i żadna bramka tego nie widzi. W barku
       dzielimy wyłącznie przenoszeniem wyrazów. */
    overflow-wrap: normal;
    hyphens: auto;
  }
  /* numer planszy wraca do biegu tekstu — nad tytułem, w tym samym torze */
  .uklad > h2::before {
    position: static;
    display: block;
    margin: 0 0 .28em;
    font-size: clamp(2.2rem, 1.1rem + 2.2vw, 3.4rem);
    line-height: .82;
    letter-spacing: -.04em;
    font-family: var(--krój-naglowek);
    font-weight: 900;
    opacity: .34;
  }
}

/* siatki kart korzystają z szerokości arkusza: cztery tory zamiast trzech.
   ⚠ tylko tam, gdzie jest z czego je zbudować — listy dwu- i trzypunktowe
   dostają dokładnie tyle torów, ile mają pozycji, żeby nie zostawiać dziur. */
@media (min-width: 1240px) {
  .karty:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .karty:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1600px) {
  .karty:has(> li:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* HERO: akapit wiodący zwężony, notatki przeniesione OBOK niego ------- */
@media (min-width: 1700px) {
  .hero .tytul { max-width: 26ch; }
  .hero--wpis .tytul { max-width: 28ch; }

  /* strefa tekstu rośnie kosztem płyty ornamentu — płyta jest ozdobą,
     nie treścią, więc to ona oddaje szerokość, a nie proza. */
  .hero__dol { grid-template-columns: minmax(0, 1.42fr) minmax(0, .58fr); }

  .hero__lid:has(> p + p) {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    column-gap: clamp(1.4rem, 2.1vw, 2.6rem);
    row-gap: 0;
  }
  .hero__lid:has(> p + p) > p { grid-column: 2; }
  .hero__lid:has(> p + p) > .wprowadzenie,
  .hero__lid:has(> p + p) > .zajawka {
    grid-column: 1;
    /* akapit wiodący trzyma się lewej kolumny niezależnie od tego, ile
       notatek stoi obok (widoki mają ich jedną albo dwie) */
    grid-row: 1 / span 4;
    margin-bottom: 0;
    max-width: none;
  }
  /* kolumna notatek dostaje własne otwarcie — nie jest dalszym ciągiem
     akapitu wiodącego, tylko przypisem obok niego */
  .hero__lid:has(> p + p) > .wprowadzenie + p,
  .hero__lid:has(> p + p) > .zajawka + p {
    padding-top: .7rem;
    border-top: 2px solid var(--ochra);
  }

  /* widok, którego lid ma jeden akapit (blog): brak kolumny notatek, więc
     zamiast zostawiać pustą połowę lidu dzielimy hero po równo, a płyta
     ornamentu przejmuje odzyskane miejsce. */
  .hero__dol:has(> .hero__lid > p:only-child) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  /* ⚠ pułapka: `max-width` + `margin-inline: auto` NA elemencie siatki
     wyłącza rozciąganie toru i płyta zwija się do zastępczych 300 px
     obrazu zastępczego. Ograniczamy dopiero rysunek w środku. */
  .hero__dol:has(> .hero__lid > p:only-child) .plyta > svg {
    max-width: 34rem;
    margin-inline: auto;
  }
}

/* --- 13. RUCH I DRUK ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .naglowek, .stopka, .probki, .margines-tech, .hero__siatka, .plyta { display: none !important; }
  body { background: #fff; color: #000; }
  .pasmo, .hero { background: #fff !important; color: #000 !important; }
  .hero .tytul, .tytul__a, .tytul__b { color: #000 !important; }
  a { color: #000; text-decoration: underline; }
  .uklad { display: block; }
}