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

   IDEA: szew jest w krawiectwie granicą i dowodem naraz — decyduje, ile da
   się jeszcze wypuścić, i zostaje widoczny po każdej zmianie. Cała strona
   jest z niego zbudowana: pasma treści rozdziela ścieg, karty wyglądają jak
   metki wszyte w szew, a nagłówek i stopka zamyka przerywana linia igły.
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  /* powierzchnie ciemne — indygo tkaniny denimowej */
  --indygo-glebia:   #101A33;
  --indygo:          #1B2A54;
  --indygo-2:        #24365F;
  /* powierzchnie jasne — papier wykrojnika i płótno */
  --krem:            #F7F2E8;
  --krem-karta:      #FFFCF6;
  --piasek:          #EDE3D2;
  /* akcent — miedź naparstka */
  --miedz:           #9C4A22;
  --miedz-jasna:     #E2A06A;
  --na-miedzi:       #FFFCF6;
  /* pismo */
  --atrament:        #17202F;
  --atrament-cichy:  #4C5568;
  --na-ciemnym:      #F5F1E9;
  --na-ciemnym-cichy:#C9CEDF;
  /* linie */
  --linia:           #8C7A62;
  --linia-ciemna:    #6F83B5;

  /* tło pasma — nadpisywane na każdym pasie, używane przez „dziurki" metek */
  --tlo-pasa:        var(--krem);
  --szew-kolor:      var(--linia);

  --krój-naglowek: "Playfair Display", Georgia, "Times New Roman", "Nimbus Roman", serif;
  --krój-tekst:    "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ⚠⚠ MIARA W REM: przy rosnącym korzeniu kolumna rośnie razem z pismem,
     więc długość wiersza zostaje stała (~65–72 znaków w Interze), a bramka
     B13 widzi wzrost i w pikselach, i w rozmiarze pisma. */
  --kolumna:   34rem;    /* kolumna prozy — wyśrodkowana, nie dosunięta */
  --szeroko:   100rem;   /* siatki kart, nagłówek, stopka — górny bezpiecznik */
  --brzeg:     clamp(18px, 4.4vw, 84px);
  --barek:     22rem;    /* kolumna marginesowa arkusza (od 1500 px) */

  --promien:      3px;
  --promien-metki: 3px 22px 3px 22px;   /* metka: jeden róg ścięty jak u wszywki */
  --cien-1: 0 1px 2px rgba(23,32,47,.05), 0 8px 22px rgba(23,32,47,.08);
  --cien-2: 0 2px 6px rgba(23,32,47,.07), 0 22px 52px rgba(23,32,47,.14);
  --cien-ciemny: 0 20px 46px rgba(6,11,25,.38);
}

/* --- 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.9rem + 0.32vw, 1.32rem);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }

body {
  margin: 0;
  background: var(--krem);
  color: var(--atrament);
  font-family: var(--krój-tekst);
  font-size: 1rem;
  line-height: 1.68;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--krój-naglowek); font-weight: 600; }
img { max-width: 100%; height: auto; }
svg { display: block; }

/* ⚠⚠ PUŁAPKA: globalne strong{color:…} wchodzi na powierzchnię o odwrotnej
   jasności i tekst znika. Pogrubienie robi WAGA, kolor dziedziczymy. */
strong, b { color: inherit; font-weight: 700; }

:focus-visible { outline: 3px solid var(--miedz); outline-offset: 3px; border-radius: 2px; }
.czolo :focus-visible, .naglowek :focus-visible, .stopka :focus-visible,
.pas--indygo :focus-visible { outline-color: var(--miedz-jasna); }

/* skip-link: pole trafienia 180×48 (bramka B7), ale wizualnie przycięte */
.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(--miedz); color: var(--na-miedzi);
  font-weight: 700; text-decoration: none;
}

/* --- 3. KONTENERY ---------------------------------------------------- */
.szeroko  { width: min(calc(100% - var(--brzeg) * 2), var(--szeroko)); margin-inline: auto; }
.kontener { width: min(100%, var(--kolumna)); margin-inline: auto; }

/* --- 4. NAGŁÓWEK ----------------------------------------------------- */
.naglowek {
  position: relative;
  background: var(--indygo-glebia);
  color: var(--na-ciemnym);
}
.naglowek::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(45deg, rgba(0,0,0,.16) 0 1px, transparent 1px 8px);
}
.naglowek::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline: 0; height: 3px;
  background: repeating-linear-gradient(90deg, var(--miedz-jasna) 0 15px, transparent 15px 27px);
  opacity: .8;
}
.naglowek__pas {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem 1.4rem; flex-wrap: wrap; padding-block: .55rem .75rem;
}
.znak {
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1rem, .9rem + .42vw, 1.32rem); line-height: 1.15;
  color: var(--krem-karta); text-decoration: none; padding-block-end: 6px;
}
.znak::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline: 0; height: 2px;
  background: repeating-linear-gradient(90deg, var(--miedz-jasna) 0 8px, transparent 8px 14px);
  opacity: .85;
}
.znak:hover::after { opacity: 1; }

.menu { flex: 0 1 auto; min-width: 0; }
.menu__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem; }
.menu__poz { margin: 0; }
.menu__link {
  display: flex; align-items: center; min-height: 44px; padding: .1rem .85rem;
  color: var(--na-ciemnym-cichy); text-decoration: none;
  font-size: .93rem; font-weight: 500; letter-spacing: .01em;
  border-radius: 2px 10px 2px 10px; border: 1px solid transparent;
}
.menu__link:hover { color: var(--krem-karta); border-color: var(--linia-ciemna); }
.menu__link[aria-current="page"] {
  background: var(--miedz-jasna); color: var(--indygo-glebia); font-weight: 700;
}

/* --- 5. CZOŁO (hero) -------------------------------------------------- */
.czolo {
  position: relative; overflow: clip; isolation: isolate;
  background: var(--indygo);
  color: var(--na-ciemnym);
}
.czolo__tlo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(45deg, rgba(0,0,0,.13) 0 1px, transparent 1px 9px),
    radial-gradient(120% 90% at 12% 0%, rgba(226,160,106,.20) 0%, transparent 58%),
    linear-gradient(158deg, var(--indygo-2) 0%, var(--indygo) 46%, var(--indygo-glebia) 100%);
}
.czolo__ornament {
  position: absolute; z-index: 1; pointer-events: none;
  color: var(--miedz-jasna); opacity: .5;
  inset-block-start: -14%; inset-inline-end: -8%;
  width: min(52vw, 640px);
}
.czolo--wewn .czolo__ornament {
  inset-block-start: auto; inset-block-end: 14%; inset-inline-end: 3%;
  width: min(30vw, 300px); opacity: .38;
}
/* blok pisma czoła — wyśrodkowany wspólną osią z kolumną prozy */
.czolo__blok { width: min(100%, 46rem); margin-inline: auto; }
.czolo--wewn .czolo__blok { width: min(100%, 44rem); }
.czolo__ornament svg { width: 100%; height: auto; }
.czolo__tasma {
  position: absolute; z-index: 1; pointer-events: none;
  color: var(--na-ciemnym-cichy); opacity: .5;
  inset-block: 0; inset-inline-start: 0; width: 46px;
}
.czolo__tasma svg { width: 100%; height: 100%; }
.czolo__wnetrze {
  position: relative; z-index: 2;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(3.4rem, 8vw, 7rem);
}
.czolo--dom .czolo__wnetrze { padding-block: clamp(3.6rem, 9vw, 8.5rem) clamp(4.4rem, 10vw, 9rem); }
.czolo__metka { margin: 0 0 clamp(1.1rem, 2.4vw, 2rem); height: clamp(44px, 6vw, 84px); display: flex; align-items: flex-end; }
.czolo__nic {
  display: block; width: 2px; height: 100%; position: relative;
  background: linear-gradient(180deg, transparent, var(--miedz-jasna));
}
.czolo__nic::after {
  content: ""; position: absolute; inset-block-end: -5px; inset-inline-start: -4px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--miedz-jasna);
}
.czolo .tytul {
  margin: 0; font-weight: 700; letter-spacing: -.018em; line-height: 1.04;
  color: var(--krem-karta); max-width: 11.5em;
}
.czolo--dom .tytul { font-size: clamp(2.4rem, 5.2vw, 4.6rem); }
.czolo--wewn .tytul { font-size: clamp(1.85rem, 3.5vw, 3.05rem); max-width: 15em; }
.czolo__lid {
  margin: clamp(1.3rem, 2.6vw, 2.1rem) 0 0;
  max-width: 33rem;
  font-size: clamp(1.02rem, .96rem + .3vw, 1.2rem);
  line-height: 1.62; color: var(--na-ciemnym);
}
.czolo--dom .czolo__lid { border-inline-start: 3px solid var(--miedz-jasna); padding-inline-start: clamp(.9rem, 1.8vw, 1.4rem); }
.czolo__stopa {
  position: absolute; z-index: 2; inset-block-end: 0; inset-inline: 0; height: 46px;
  color: var(--miedz-jasna); opacity: .75; pointer-events: none;
}
.szew-linia { width: 100%; height: 100%; display: block; }

/* --- 6. PASMA -------------------------------------------------------- */
.pas { position: relative; overflow-x: clip; padding-block: clamp(2.6rem, 5.6vw, 5.4rem); }
.pas > .szeroko { position: relative; z-index: 1; }
.pas__faktura { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pas__brzeg {
  position: absolute; inset-block-start: 0; inset-inline: 0; height: 12px; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--szew-kolor) 0 16px, transparent 16px 28px);
  background-size: 100% 2px; background-repeat: no-repeat; background-position: 0 0;
}
.pas__brzeg::after {
  content: ""; position: absolute; inset-block-start: 7px; inset-inline: 0; height: 3px;
  background: repeating-linear-gradient(90deg, var(--szew-kolor) 0 3px, transparent 3px 28px);
  opacity: .55;
}
.pas--krem   { background: var(--krem);   --tlo-pasa: var(--krem);   --szew-kolor: var(--linia); }
.pas--piasek { background: var(--piasek); --tlo-pasa: var(--piasek); --szew-kolor: var(--linia); }
.pas--piasek .pas__faktura {
  background: repeating-linear-gradient(45deg, rgba(23,32,47,.035) 0 1px, transparent 1px 9px);
}
.pas--krem .pas__faktura {
  background: repeating-linear-gradient(135deg, rgba(23,32,47,.025) 0 1px, transparent 1px 11px);
}
.pas--indygo {
  background: var(--indygo); color: var(--na-ciemnym);
  --tlo-pasa: var(--indygo); --szew-kolor: var(--miedz-jasna);
}
.pas--indygo .pas__faktura {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(45deg, rgba(0,0,0,.14) 0 1px, transparent 1px 9px),
    radial-gradient(100% 80% at 85% 0%, rgba(226,160,106,.14) 0%, transparent 60%);
}

/* pas wstępny — karta nachodząca na czoło */
.pas--wstep {
  background: transparent; padding-block: 0 clamp(2.4rem, 5vw, 4.6rem);
  margin-block-start: calc(-1 * clamp(2.2rem, 4.6vw, 4.4rem));
  z-index: 3;
}
.karta-wstep {
  position: relative; background: var(--krem-karta);
  border: 1px solid var(--linia); border-radius: var(--promien-metki);
  box-shadow: var(--cien-2);
  padding: clamp(1.5rem, 3.4vw, 2.6rem) clamp(1.3rem, 3vw, 2.4rem);
}
.karta-wstep__szew {
  position: absolute; inset: 9px; pointer-events: none;
  border: 1px dashed rgba(140,122,98,.55); border-radius: 2px 16px 2px 16px;
}
.karta-wstep .akapit:last-child { margin-block-end: 0; }

/* głowa pasma */
.pas__glowa {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: .35rem clamp(.7rem, 1.6vw, 1.15rem);
  margin-block-end: clamp(1.3rem, 2.8vw, 2.1rem);
}
.pas__numer {
  font-family: var(--krój-naglowek); font-weight: 700; line-height: 1;
  font-size: clamp(1.5rem, 2.5vw, 2.3rem); color: var(--miedz);
}
.pas--indygo .pas__numer { color: var(--miedz-jasna); }
.pas__tytul {
  flex: 1 1 12em; min-width: 0; margin: 0;
  font-size: clamp(1.48rem, 2.8vw, 2.4rem); line-height: 1.16;
  letter-spacing: -.012em; color: var(--indygo);
}
.pas--indygo .pas__tytul { color: var(--krem-karta); }
.pas__szew {
  flex: 1 1 100%; height: 7px; margin-block-start: .15rem;
  background: repeating-linear-gradient(90deg, var(--szew-kolor) 0 13px, transparent 13px 23px);
  background-size: 100% 2px; background-repeat: no-repeat; opacity: .6;
}

/* --- 7. PROZA -------------------------------------------------------- */
.akapit { margin: 0 0 1.05em; }
.akapit:last-child { margin-block-end: 0; }
.akapit--lid { font-size: 1.07em; line-height: 1.6; }
.pas--indygo .akapit { color: var(--na-ciemnym); }
/* ⚠⚠ Reguła linku prozy NIE MOŻE dosięgnąć przycisku (pułapka .proza a > .przycisk):
   kolor linku dostają wyłącznie odsyłacze wewnątrz akapitów. */
.akapit a {
  color: var(--miedz); font-weight: 600;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.akapit a:hover { color: var(--indygo); }
.pas--indygo .akapit a { color: var(--miedz-jasna); }
.pas--indygo .akapit a:hover { color: var(--krem-karta); }

/* --- 8. WSUWKA (blok pod H3) ----------------------------------------- */
.wsuwka {
  position: relative;
  margin: clamp(1.4rem, 3vw, 2.2rem) 0;
  padding: clamp(1.2rem, 2.6vw, 1.8rem) clamp(1.1rem, 2.4vw, 1.7rem)
           clamp(1.2rem, 2.4vw, 1.7rem) clamp(1.4rem, 3vw, 2.1rem);
  background: var(--krem-karta);
  border-inline-start: 3px solid var(--miedz);
  border-radius: 2px 16px 2px 16px;
  box-shadow: var(--cien-1);
}
.pas--indygo .wsuwka {
  background: var(--indygo-2); box-shadow: none;
  border-inline-start-color: var(--miedz-jasna);
  border-block: 1px solid var(--linia-ciemna);
  border-inline-end: 1px solid var(--linia-ciemna);
}
.wsuwka__szpilka {
  position: absolute; inset-block-start: -9px; inset-inline-start: -9px;
  width: 18px; height: 18px; background: var(--miedz);
  border-radius: 2px; transform: rotate(45deg);
  box-shadow: 0 2px 6px rgba(23,32,47,.3);
}
.pas--indygo .wsuwka__szpilka { background: var(--miedz-jasna); }
.wsuwka__tytul {
  margin: 0 0 .55em; line-height: 1.25;
  font-size: clamp(1.14rem, 1.7vw, 1.46rem); color: var(--indygo);
}
.pas--indygo .wsuwka__tytul { color: var(--krem-karta); }

/* --- 9. METKI (karty wpisów) ----------------------------------------- */
.metki, .definicje, .lista-wpisow { list-style: none; margin: 0; padding: 0; }
.metki, .definicje {
  display: grid; gap: clamp(1rem, 2.2vw, 1.8rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-block: clamp(1.6rem, 3.4vw, 2.8rem) 0;
}
.metka, .def {
  position: relative; display: flex; flex-direction: column;
  background: var(--krem-karta);
  border: 1px solid var(--linia);
  border-radius: var(--promien-metki);
  box-shadow: var(--cien-1);
  padding: clamp(2.1rem, 3.2vw, 2.7rem) clamp(1.2rem, 2.4vw, 1.7rem) clamp(1.2rem, 2.4vw, 1.7rem);
}
.metka__pas {
  position: absolute; inset-block-start: 0; inset-inline: 0; height: 7px;
  background: linear-gradient(90deg, var(--miedz) 0%, var(--miedz-jasna) 100%);
  border-radius: 2px 20px 0 0;
}
.metka__dziurka {
  position: absolute; inset-block-start: clamp(.9rem, 1.7vw, 1.25rem);
  inset-inline-start: clamp(1.2rem, 2.4vw, 1.7rem);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--tlo-pasa); border: 1px solid var(--linia);
  box-shadow: inset 0 1px 2px rgba(23,32,47,.3);
}
.metka__tytul {
  margin: .35em 0 .5em; line-height: 1.2;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem); color: var(--indygo);
}
.metka__nad {
  display: block; font-family: var(--krój-tekst); font-weight: 700;
  font-size: .58em; letter-spacing: .16em; text-transform: uppercase;
  color: var(--miedz); margin-block-end: .55em;
}
.metka__opis { margin: 0 0 1.15em; color: var(--atrament-cichy); font-size: .96em; }
.metka__akcja { margin: auto 0 0; }

/* definicje — trzy prace w metce z ozdobną cyfrą */
.def { padding-block-start: clamp(1.6rem, 3vw, 2.2rem); }
.def__numer {
  position: absolute; inset-block-start: clamp(.5rem, 1.2vw, .9rem);
  inset-inline-end: clamp(.9rem, 1.8vw, 1.3rem);
  font-family: var(--krój-naglowek); font-weight: 700; line-height: 1;
  font-size: clamp(2.1rem, 3.4vw, 3.2rem); color: var(--miedz);
}
.def__szpilka {
  position: absolute; inset-block-start: -9px; inset-inline-start: clamp(1.2rem, 2.4vw, 1.7rem);
  width: 17px; height: 17px; background: var(--indygo); border-radius: 2px;
  transform: rotate(45deg); box-shadow: 0 2px 6px rgba(23,32,47,.28);
}
.def__tekst { margin: 0 0 clamp(1.4rem, 2.6vw, 2rem); padding-inline-end: clamp(2.2rem, 4vw, 3.4rem); }
.def::after {
  content: ""; position: absolute; inset-inline: clamp(1.2rem, 2.4vw, 1.7rem);
  inset-block-end: clamp(1rem, 2vw, 1.4rem); height: 2px; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--linia) 0 9px, transparent 9px 18px);
  opacity: .55;
}
.def__slowo {
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: 1.14em; color: var(--indygo);
}

/* --- 10. LISTA WPISÓW (regał na paśmie indygo) ----------------------- */
.lista-wpisow {
  display: grid; gap: clamp(1.1rem, 2.4vw, 1.9rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.zapowiedz {
  position: relative; display: flex; flex-direction: column;
  background: var(--indygo-2);
  border: 1px solid var(--linia-ciemna);
  border-radius: var(--promien-metki);
  box-shadow: var(--cien-ciemny);
  padding: clamp(2.2rem, 3.4vw, 2.9rem) clamp(1.3rem, 2.4vw, 1.8rem) clamp(1.3rem, 2.4vw, 1.8rem);
}
.zapowiedz__numer {
  position: absolute; inset-block-start: clamp(.6rem, 1.4vw, 1rem);
  inset-inline-end: clamp(1rem, 2vw, 1.5rem);
  font-family: var(--krój-naglowek); font-weight: 700; line-height: 1;
  font-size: clamp(2rem, 3.2vw, 3rem); color: var(--miedz-jasna);
}
.zapowiedz__dziurka {
  position: absolute; inset-block-start: clamp(1rem, 1.9vw, 1.4rem);
  inset-inline-start: clamp(1.3rem, 2.4vw, 1.8rem);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--indygo-glebia); border: 1px solid var(--linia-ciemna);
}
.zapowiedz__tytul {
  margin: .4em 0 .5em; line-height: 1.22;
  font-size: clamp(1.14rem, 1.8vw, 1.48rem);
  padding-inline-end: clamp(2rem, 3.6vw, 3rem);
}
.zapowiedz__tytul a { display: block; min-height: 44px; color: var(--krem-karta); text-decoration: none; }
.zapowiedz__tytul a:hover { color: var(--miedz-jasna); text-decoration: underline; text-underline-offset: 4px; }
.zapowiedz__tekst { margin: 0 0 1.15em; color: var(--na-ciemnym-cichy); font-size: .97em; }
.zapowiedz__wiecej { margin: auto 0 0; }

/* --- 11. AKCJE ------------------------------------------------------- */
.cta { margin: clamp(1.4rem, 3vw, 2.2rem) 0 0; }
.przycisk {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: .8rem 1.7rem;
  background: var(--miedz); color: var(--na-miedzi);
  font-weight: 700; letter-spacing: .01em; text-decoration: none;
  border-radius: 2px 16px 2px 16px; box-shadow: var(--cien-1);
  transition: background-color .18s ease, transform .18s ease;
}
.przycisk::after {
  content: ""; position: absolute; inset: 5px; pointer-events: none;
  border: 1px dashed rgba(255,252,246,.62); border-radius: 1px 12px 1px 12px;
}
.przycisk:hover { background: var(--indygo); color: var(--krem-karta); transform: translateY(-1px); }
.przycisk--duzy { width: 100%; min-height: 64px; font-size: 1.06em; text-align: center; }

.odsylacz { margin: clamp(1rem, 2.2vw, 1.6rem) 0 0; }
.strzalka {
  display: inline-flex; align-items: center; gap: .6em;
  min-height: 44px; color: var(--miedz); font-weight: 700; text-decoration: none;
  border-block-end: 2px dashed currentColor; line-height: 1.3;
}
.strzalka::after {
  content: ""; flex: none; width: .58em; height: .58em;
  border-inline-end: 2px solid currentColor; border-block-start: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .18s ease;
}
.strzalka:hover { color: var(--indygo); }
.strzalka:hover::after { transform: rotate(45deg) translate(2px, -2px); }
.pas--indygo .strzalka { color: var(--miedz-jasna); }
.pas--indygo .strzalka:hover { color: var(--krem-karta); }

/* --- 12. STOPKA ------------------------------------------------------ */
.stopka {
  position: relative;
  background: var(--indygo-glebia); color: var(--na-ciemnym);
  padding-block: clamp(2.6rem, 5vw, 4.2rem) clamp(1.6rem, 3vw, 2.6rem);
}
.stopka::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(45deg, rgba(0,0,0,.18) 0 1px, transparent 1px 9px);
}
.stopka__szew {
  position: absolute; inset-block-start: 0; inset-inline: 0; height: 40px;
  color: var(--miedz-jasna); opacity: .8; pointer-events: none;
}
.stopka__pas {
  position: relative; z-index: 1;
  display: grid; gap: clamp(.8rem, 2vw, 1.6rem); align-items: center;
}
.stopka__znak {
  position: relative; margin: 0; padding-block-end: 10px;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.05rem, .95rem + .45vw, 1.42rem); color: var(--krem-karta);
}
.stopka__znak::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  width: min(100%, 12em); height: 2px;
  background: repeating-linear-gradient(90deg, var(--miedz-jasna) 0 8px, transparent 8px 14px);
}
.stopka__menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .15rem; }
.stopka__menu a {
  display: flex; align-items: center; min-height: 44px; padding: .1rem .8rem;
  color: var(--na-ciemnym-cichy); text-decoration: none; font-size: .93rem;
  border-radius: 2px 10px 2px 10px;
}
.stopka__menu a:hover { color: var(--krem-karta); text-decoration: underline; text-underline-offset: 4px; }
.stopka__gora { margin: 0; }
.do-gory {
  display: inline-flex; align-items: center; gap: .55em;
  min-height: 44px; padding: .2rem 1.1rem;
  border: 1px solid var(--linia-ciemna); border-radius: 2px 12px 2px 12px;
  color: var(--na-ciemnym); text-decoration: none; font-size: .93rem; font-weight: 600;
}
.do-gory:hover { border-color: var(--miedz-jasna); color: var(--krem-karta); }

/* --- 13. SPECIMEN ---------------------------------------------------- */
.próbki { list-style: none; margin: clamp(1.2rem,2.6vw,2rem) 0 0; padding: 0;
  display: grid; gap: clamp(.7rem,1.6vw,1.1rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.próbka { border: 1px solid var(--linia); border-radius: 2px 14px 2px 14px; overflow: hidden; background: var(--krem-karta); }
.próbka__pole { display: flex; align-items: flex-end; min-height: 96px; padding: .6rem .8rem; font-size: .82rem; font-weight: 700; }
.próbka__opis { display: block; padding: .6rem .8rem; font-size: .84rem; color: var(--atrament-cichy); }

/* --- 14. SZEROKIE EKRANY --------------------------------------------- */
@media (min-width: 900px) {
  .stopka__pas { grid-template-columns: 1fr auto auto; }
}
@media (max-width: 719px) {
  .naglowek__pas { flex-direction: column; align-items: stretch; }
  .znak { justify-content: flex-start; }
  .menu__lista { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
  .menu__link { justify-content: center; text-align: center; border: 1px solid var(--linia-ciemna); }
  .czolo__tasma { display: none; }
  .def__tekst { padding-inline-end: 0; }
  .def__numer { position: static; display: block; margin-block-end: .3rem; }
}

/* --- 14b. ARKUSZ WYKROJU — od 1500 px --------------------------------
   ⭐⭐ zasada użytkownika: powyżej 1366 px makieta MA ROSNĄĆ, a odzyskana
   szerokość MA DOSTAĆ ROLĘ — nie wolno zostawić tego samego układu z węższym
   tłem po bokach. Pomiar wyjściowy: najszerszy moduł treści 1602 px przy
   1920 (po 159 px marginesu), kolumna prozy 698 px.

   Co robi ten blok — trzy zmiany kompozycji, nie jedna liczba:
   1. ARKUSZ. Pasmo przestaje być jedną kolumną wyśrodkowaną w 78rem. Wnętrze
      pasma staje się siatką: [margines arkusza] [kolumna prozy] [odsadzka].
      Kolumna prozy zostaje NIETKNIĘTA (34rem ≈ 698 px, 65–72 znaki) i nadal
      leży dokładnie na osi strony.
   2. BAREK. Głowa pasma (cyfra porządkowa + H2 + ścieg) wychodzi SPOD tekstu
      i przenosi się do lewego marginesu arkusza — jak opis wykroju na brzegu
      papieru. Cyfra rośnie i staje się nagłówkiem barku, ścieg zamyka go od
      dołu. Barek przykleja się WNĘTRZEM (position: sticky w komórce siatki),
      nigdy oknem — panel przyklejony do okna uniemożliwiłby dociągnięcie
      pasm do krawędzi.
   3. TREŚĆ W POZIOMIE. Czoło rozkłada tytuł i lid na dwie kolumny rozdzielone
      nicią; metki „trzech prac” dostają cyfrę OBOK tekstu zamiast nad nim;
      regały kart biorą pełną szerokość arkusza.

   ⚠ Poniżej 1500 px NIC się nie zmienia — układ 360–1366 zostaje 1:1.
   ⚠ overflow-wrap w barku zostaje `normal`: wąska kolumna z regułą
     break-word łamie nagłówek w środku słowa i żadna bramka tego nie widzi. */
@media (min-width: 1500px) {
  :root {
    /* margines arkusza rośnie płynnie od 66 px przy 1500 do ~104 px przy 1920 */
    --brzeg: clamp(66px, calc(9.05vw - 69.75px), 128px);
  }

  /* --- arkusz: margines + proza + odsadzka --- */
  .pas > .szeroko > .kontener:not(.karta-wstep) {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--kolumna)) minmax(0, 1fr);
    column-gap: clamp(2rem, 3.4vw, 4.2rem);
    row-gap: 0;
    align-items: start;
  }
  .pas > .szeroko > .kontener:not(.karta-wstep) > * { grid-column: 2; }

  /* --- barek: głowa pasma na marginesie arkusza --- */
  .pas > .szeroko > .kontener:not(.karta-wstep) > .pas__glowa {
    grid-column: 1;
    grid-row: 1 / span 40;
    justify-self: start;
    align-self: start;
    position: sticky;
    inset-block-start: clamp(1.6rem, 3vw, 2.8rem);
    display: block;
    width: 100%;
    max-width: var(--barek);
    margin-block-end: clamp(1.3rem, 2.8vw, 2.1rem);
    overflow-wrap: normal;
    word-break: normal;
    hyphens: auto;
  }
  .kontener > .pas__glowa > .pas__numer {
    display: block;
    font-size: clamp(3rem, 4.4vw, 5.2rem);
    line-height: .9;
    letter-spacing: -.02em;
    margin-block-end: .16em;
  }
  .kontener > .pas__glowa > .pas__tytul {
    display: block;
    font-size: clamp(1.55rem, 2.2vw, 2.3rem);
    line-height: 1.13;
    text-wrap: balance;
  }
  .kontener > .pas__glowa > .pas__szew {
    display: block;
    width: 100%;
    margin-block-start: clamp(.9rem, 1.7vw, 1.35rem);
    opacity: .75;
  }

  /* --- czoło: tytuł i lid obok siebie, nić między kolumnami --- */
  .czolo__wnetrze > .czolo__blok,
  .czolo--wewn .czolo__blok { width: 100%; }
  .czolo__blok {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    column-gap: clamp(2.4rem, 4vw, 5rem);
    align-items: end;
  }
  /* nić z metki staje się GÓRĄ tego samego szwu, którym jest obwódka lidu:
     nitka schodzi z pustego pola, kończy się węzełkiem i przechodzi w kreskę
     biegnącą wzdłuż całego lidu — dwie kolumny czoła łączy jeden ścieg */
  .czolo__metka { grid-column: 2; grid-row: 1; align-self: end; margin-block-end: 0; }
  .czolo__nic { width: 3px; }
  .czolo .tytul { grid-column: 1; grid-row: 1 / 3; align-self: end; max-width: none; }
  .czolo__lid {
    grid-column: 2; grid-row: 2;
    margin-block-start: 0;
    max-width: min(100%, var(--kolumna));
    border-inline-start: 3px solid var(--miedz-jasna);
    padding-inline-start: clamp(1.1rem, 2vw, 1.6rem);
  }
  /* ornament czoła podstron schodzi poniżej lidu, żeby nie wchodził pod pismo */
  .czolo--wewn .czolo__ornament { inset-block-end: -12%; inset-inline-end: 1%; opacity: .3; }

  /* --- wsuwka: „wypuszczony zapas” — blok wychodzi poza kolumnę prozy
     w odsadzkę i rozkłada się na tytuł OBOK tekstu.
     ⚠ szpilka jest pozycjonowana bezwzględnie: nie wolno jej dać przydziału
       w siatce, bo wtedy blokiem zawierającym staje się komórka i szpilka
       odskakuje od rogu bloku. --- */
  .pas > .szeroko > .kontener:not(.karta-wstep) > .wsuwka {
    grid-column: 2 / 4;
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    column-gap: clamp(1.4rem, 2.4vw, 2.3rem);
    row-gap: 0;
    align-items: start;
  }
  .kontener > .wsuwka > *:not(.wsuwka__szpilka) { grid-column: 2; }
  .kontener > .wsuwka > .wsuwka__tytul {
    grid-column: 1; grid-row: 1 / span 20;
    margin-block-end: 0;
    text-wrap: balance;
  }

  /* --- akcje: ścieg kończący idzie przez kolumnę prozy i odsadzkę --- */
  .pas > .szeroko > .kontener:not(.karta-wstep) > .cta,
  .pas > .szeroko > .kontener:not(.karta-wstep) > .odsylacz { grid-column: 2 / 4; }

  /* --- metki „trzech prac”: cyfra OBOK tekstu, nie nad nim --- */
  .def {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(1rem, 1.8vw, 1.7rem);
    align-items: start;
    padding-block-start: clamp(1.7rem, 2.6vw, 2.3rem);
  }
  .def__numer {
    position: static;
    grid-column: 1; grid-row: 1;
    font-size: clamp(2.4rem, 3vw, 3.2rem);
  }
  .def__tekst { grid-column: 2; grid-row: 1; padding-inline-end: 0; }
}

/* --- 15. RUCH I DRUK ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .przycisk:hover { transform: none; }
}
@media print {
  .naglowek, .stopka, .czolo__ornament, .czolo__tasma, .pas__faktura, .czolo__tlo { display: none !important; }
  body { background: #fff; color: #000; }
  .pas, .czolo { background: #fff !important; color: #000 !important; padding-block: .6rem; }
  .czolo .tytul, .pas__tytul, .wsuwka__tytul, .metka__tytul { color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
}