/*
Theme Name: Kartoteka marek
Theme URI: https://www.dellmont.com.pl
Author: AA
Version: 1.0.0
Text Domain: aa-dellmont-kartoteka
*/
/* =====================================================================
   dellmont.com.pl — arkusz PREMIUM „Kartoteka marek” (Fable 5.1, 2026-09-06)
   Metafora: szuflada kartoteki — serwis jest katalogiem 23 siostrzanych
   usług jednego operatora; każdy wpis to karta katalogowa z zakładką-datą.
   Dwa kroje z systemowego stosu, zero zasobów z sieci, treść 1:1.
   Sekcje: 1 tokeny · 2 reset · 2b arkusz · 3 kontener · 4 nagłówek ·
   5 hero · 6 pasma o rolach · 7 typografia · 8 karta katalogowa ·
   9 przegródki · 10 okruszki i paginacja · 11 wpis · 12 stopka ·
   13 menu mobilne · 14 skala powyżej 1366 px · 15 ruch i druk
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  /* łupek — ziemia i płyty ciemne (szuflada) */
  --lupek-900: #121820;
  --lupek-800: #1B2530;
  --lupek-700: #27343F;
  --lupek-600: #3D4B59;
  /* papier — arkusz, karty, pole obrazu */
  --papier:        #F5F0E7;
  --papier-karta:  #FCF9F2;
  --papier-cien:   #EAE2D3;
  /* liniatura i obwódki */
  --linia:         #D6CCB8;   /* liniatura, ramki kart — dekoracja */
  --linia-mocna:   #B9AC93;   /* kreski działowe — dekoracja */
  --linia-ui:      #7F7460;   /* obwódki pól formularza i paginacji, próg 3:1 */
  /* pismo */
  --atrament:        #1C232B;
  --atrament-cichy:  #5A6470;
  --kosc:            #F3EDE1;   /* pismo na płycie ciemnej */
  --kosc-cicha:      #CFC7B8;
  /* barwy znaczące */
  --bursztyn:        #D08A2F;   /* zakładki, wyróżnienia — pismo ciemne */
  --bursztyn-ciemny: #8A4F0E;   /* odsyłacze na papierze */
  --bursztyn-jasny:  #E9B15C;   /* odsyłacze i akcenty na łupku */
  --karmin:          #B85A4A;   /* pierwsza linia karty — wyłącznie dekoracja */

  --kroj-naglowek: "Noto Serif", "Liberation Serif", Georgia, "Times New Roman", serif;
  --kroj-tekst:    "Noto Sans", "Segoe UI", Roboto, "Liberation Sans", Arial, sans-serif;

  /* miary — w REM, żeby rosły razem z pismem powyżej 1366 px (blok 14) */
  --kontener:      86.5rem;                      /* przy 20 px = 1730 px → ~95 px marginesu na 1920 */
  --margines:      clamp(1rem, 4vw, 3.5rem);
  --rama:          clamp(0px, (100vw - 1400px) / 5.4, 96px);  /* 0 do 1400 px, 96 px przy 1920 */
  --kolumna-prozy: 42rem;
  --bok:           21rem;                        /* kolumna przegródek */
  --zakladka:      1.5rem;                       /* wysokość zakładki karty */

  --promien:       4px;
  --promien-plyta: 10px;
  --cien-karta:    0 1px 0 rgba(255, 255, 255, .8) inset, 0 12px 26px -16px rgba(28, 35, 43, .45);
  --cien-arkusz:   0 0 0 1px rgba(255, 255, 255, .05), 0 40px 90px -40px rgba(0, 0, 0, .9);
  --przejscie:     .16s ease;
}

/* --- 2. RESET I PODSTAWA --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* ⭐ skala: 16 px do 1366 px, płynnie do 20 px przy 1920 px */
  font-size: clamp(1rem, .384rem + .722vw, 1.25rem);
}
body {
  margin: 0;
  font-family: var(--kroj-tekst);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--atrament);
  background-color: var(--lupek-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--bursztyn-ciemny); overflow-wrap: anywhere; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--bursztyn); outline-offset: 3px; border-radius: var(--promien); }

/* skip-link z pełnym polem trafienia (B7: nie „1 px + clip”) */
.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-color: var(--bursztyn); color: var(--atrament);
  font-weight: 700; text-decoration: none;
}
/* nagłówek tylko dla czytnika ekranu (nie jest celem UI) */
.czytnik {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- 2b. ARKUSZ — jedna płyta papieru na łupkowej ziemi ---------------
   Do 1400 px rama = 0 (układ mobilny i laptopowy bez zmian). Powyżej
   z każdej strony odsłania się łupek, przy 1920 px po ~96 px. */
.arkusz {
  position: relative;
  margin-inline: var(--rama);
  min-height: 100vh;
  background-color: var(--papier);
  box-shadow: var(--cien-arkusz);
  overflow-x: clip;
}

/* --- 3. KONTENER ------------------------------------------------------ */
.kontener {
  width: 100%;
  max-width: var(--kontener);
  margin-inline: auto;
  padding-inline: var(--margines);
}
/* układ główny: treść + przegródki */
.uklad {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.4rem);
  align-items: start;
  padding-block: clamp(2rem, 1.2rem + 2.4vw, 3.6rem) clamp(2.6rem, 1.6rem + 3vw, 4.6rem);
}
.uklad__tresc { min-width: 0; }
@media (min-width: 1024px) {
  .uklad { grid-template-columns: minmax(0, 1fr) var(--bok); }
}

/* --- 4. NAGŁÓWEK — grzbiet szuflady ---------------------------------- */
.naglowek {
  position: relative;
  background-color: var(--lupek-800);
  color: var(--kosc);
}
/* listwa górna z bursztynową zakładką — ta sama zakładka, co na karcie w hero */
.naglowek__grzbiet {
  height: 6px;
  background-color: var(--lupek-700);
  background-image: linear-gradient(90deg, var(--bursztyn) 0 11rem, rgba(208, 138, 47, 0) 11rem);
}
.naglowek__pas {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem 1rem;
  min-height: 4.6rem;
}
.znak {
  display: inline-flex; align-items: center; gap: .75rem;
  min-height: 44px;
  margin-inline-end: auto;
  color: var(--kosc); text-decoration: none;
  font-family: var(--kroj-naglowek); font-weight: 600;
  font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem);
  letter-spacing: .005em;
}
.znak:hover .znak__slowo { color: var(--bursztyn-jasny); }
/* glif sygnatury: karta z zakładką i karminową linią */
.znak__karta {
  position: relative; flex: none;
  width: 1.5rem; height: 1.1rem; margin-block-start: .35rem;
  background-color: var(--kosc);
  border-radius: 2px;
}
.znak__karta::before {
  content: ""; position: absolute; inset-block-start: -.32rem; inset-inline-start: .12rem;
  width: .62rem; height: .34rem;
  background-color: var(--bursztyn);
  border-radius: 2px 2px 0 0;
}
.znak__karta::after {
  content: ""; position: absolute; inset-inline: .2rem; inset-block-start: .32rem; height: 1px;
  background-color: var(--karmin);
}
.znak__slowo { transition: color var(--przejscie); }

/* menu główne — etykiety 1:1 ze źródła (7 pozycji, pierwsza to „Menu”) */
.menu__lista { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; list-style: none; }
.menu__link {
  display: inline-flex; align-items: center;
  min-height: 44px; min-width: 44px; padding: .2rem .8rem;
  color: var(--kosc-cicha); text-decoration: none;
  font-weight: 600; font-size: .92rem; letter-spacing: .01em;
  border-block-end: 2px solid transparent;
  transition: color var(--przejscie), border-color var(--przejscie);
}
.menu__link:hover { color: var(--kosc); border-block-end-color: var(--lupek-600); }
.menu__link[aria-current="page"] { color: var(--kosc); border-block-end-color: var(--bursztyn); }
.menu__przelacznik { display: none; }
#menu-przelacznik { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

/* --- 5. HERO — szuflada kartoteki ------------------------------------ */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--lupek-800);
  background-image:
    radial-gradient(46rem 26rem at 88% 100%, rgba(61, 75, 89, .55), rgba(27, 37, 48, 0) 70%),
    linear-gradient(180deg, #1B2530 0%, #17202A 100%);
  color: var(--kosc);
}
/* ciepła poświata od góry, jak lampa nad biurkiem */
.hero__mgla {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(70rem 32rem at 18% -10%, rgba(233, 177, 92, .16), rgba(233, 177, 92, 0) 66%);
}
/* liniatura karty — rytm poziomych kresek, wygasa ku prawej i dołowi */
.hero__linie {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(180deg, rgba(207, 199, 184, .11) 0 1px, rgba(207, 199, 184, 0) 1px 2.4rem);
  -webkit-mask-image: linear-gradient(100deg, #000 20%, rgba(0, 0, 0, .35) 55%, transparent 80%);
          mask-image: linear-gradient(100deg, #000 20%, rgba(0, 0, 0, .35) 55%, transparent 80%);
}
/* przyciemnienie pod kolumną tytułową; bez własnej background-color */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(90deg, rgba(23, 32, 42, .85) 0%, rgba(23, 32, 42, .55) 42%, rgba(23, 32, 42, 0) 68%);
}
.hero__kontener {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.6rem, 1rem + 2vw, 3rem);
  align-items: end;
  padding-block: clamp(2.6rem, 1.6rem + 4vw, 5.6rem) 0;
}
.hero__tekst { padding-block-end: clamp(2.2rem, 1.4rem + 3vw, 4.6rem); }
/* nadtytuł: mała zakładka i kreska — czysta dekoracja */
.hero__znacznik {
  display: flex; align-items: center; gap: .7rem;
  margin-block-end: clamp(1rem, .7rem + .8vw, 1.7rem);
}
.hero__znacznik::before {
  content: ""; flex: none; width: 1.3rem; height: .55rem;
  background-color: var(--bursztyn); border-radius: 3px 3px 0 0;
}
.hero__znacznik::after {
  content: ""; flex: 1 1 auto; height: 1px; max-width: 8rem;
  background-image: linear-gradient(90deg, rgba(208, 138, 47, .9), rgba(208, 138, 47, 0));
}
.hero .tytul {
  margin: 0 0 clamp(.9rem, .6rem + 1vw, 1.5rem);
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(2.4rem, 1.3rem + 3.5vw, 4.1rem);
  line-height: 1.02; letter-spacing: -.018em;
  color: var(--kosc);
  overflow-wrap: normal; word-break: keep-all;   /* nazwa domeny w jednym wierszu */
}
.hero .tytul a { color: inherit; text-decoration: none; overflow-wrap: normal; }
.hero .tytul a:hover { color: var(--bursztyn-jasny); }
.hero__lid {
  max-width: 30rem;
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--bursztyn);
  font-size: clamp(1.08rem, 1rem + .5vw, 1.42rem);
  line-height: 1.5; color: var(--kosc-cicha);
}
.hero__rysunek {
  position: relative; z-index: 2;
  width: min(100%, 34rem); margin-inline: auto;
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .55));
}
.hero__rysunek svg { width: 100%; height: auto; }
/* próg szuflady — dolna krawędź płyty */
.hero__prog {
  position: absolute; inset-block-end: 0; inset-inline: 0; height: 2px; z-index: 3;
  background-image: linear-gradient(90deg,
      rgba(208, 138, 47, 0) 0%, rgba(208, 138, 47, .9) 18%, rgba(243, 237, 225, .55) 55%, rgba(243, 237, 225, 0) 100%);
}
@media (min-width: 900px) {
  .hero__kontener { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .hero__rysunek { width: 100%; max-width: 46rem; margin-inline: 0 auto; }
}
@media (max-width: 899px) {
  .hero__scrim { background-image: linear-gradient(180deg, rgba(23, 32, 42, .6), rgba(23, 32, 42, 0) 70%); }
  .hero__tekst { padding-block-end: 0; }
}

/* --- 6. PASMA O ROLACH ----------------------------------------------- */
.pasmo { position: relative; }
/* nagłówek pasma: zakładka + tytuł + kreska */
.pasmo__tytul {
  display: flex; align-items: center; gap: .85rem;
  margin: 0 0 clamp(1.1rem, .8rem + 1vw, 1.8rem);
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(1.45rem, 1.2rem + 1vw, 2.1rem);
  line-height: 1.15; letter-spacing: -.01em; color: var(--atrament);
}
.pasmo__tytul::before {
  content: ""; flex: none; width: 1.35rem; height: .6rem;
  background-color: var(--bursztyn); border-radius: 3px 3px 0 0;
  margin-block-start: .35rem;
}
.pasmo__tytul::after { content: ""; flex: 1 1 auto; height: 1px; background-color: var(--linia-mocna); }
/* pasmo wysunięte — cztery karty z przodu szuflady (w źródle bez nagłówka) */
.pasmo--wysuniete { margin-block-end: clamp(2.4rem, 1.6rem + 2.6vw, 4.2rem); }
.wysuniete {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, .8rem + 1vw, 1.6rem);
  align-items: start;
}
/* karta-rząd: pole obrazu z lewej, tytuł z prawej — dla kart bez zajawki */
.karta.karta--rzad { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; padding-block-end: 0; }
.karta--rzad .karta__obraz { margin: 1rem 0 1rem 1rem; aspect-ratio: 4 / 3; font-size: .6rem; }
.karta--rzad .karta__obraz-etykieta { padding: .2rem .4rem; white-space: nowrap; }
.karta--rzad .karta__tytul { margin: 1rem 1.1rem; font-size: 1.15rem; }
.karta--rzad .karta__zajawka, .karta--rzad .karta__dalej { grid-column: 1 / -1; }
.karta--rzad .karta__zakladka { inset-inline-start: auto; inset-inline-end: 1rem; }
@media (min-width: 760px) {
  .wysuniete { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-auto-rows: auto; }
  .wysuniete > .karta:first-child { grid-row: 1 / span 3; }
}
/* pasmo katalogu — Latest Articles */
.katalog {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.1rem, .8rem + 1.2vw, 1.8rem);
  align-items: start;
}
@media (min-width: 640px)  { .katalog { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .katalog { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- 7. TYPOGRAFIA TREŚCI -------------------------------------------- */
.proza { max-width: var(--kolumna-prozy); }
.proza > p {
  margin: 0 0 1.25em;
  font-size: clamp(1.02rem, .98rem + .2vw, 1.12rem);
  line-height: 1.72;
}
.proza > p:last-child { margin-block-end: 0; }
.proza a { color: var(--bursztyn-ciemny); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.proza a:hover { color: var(--atrament); }
/* inicjał pierwszego akapitu — jak pieczątka na karcie */
.proza > p:first-of-type::first-letter {
  float: left;
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: 3.6em; line-height: .82;
  padding: .12em .12em 0 0;
  color: var(--bursztyn-ciemny);
}

/* --- 8. KARTA KATALOGOWA ---------------------------------------------- */
.karta {
  position: relative;
  display: flex; flex-direction: column;
  margin-block-start: var(--zakladka);          /* miejsce na zakładkę */
  padding-block-end: 1.1rem;
  background-color: var(--papier-karta);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  box-shadow: var(--cien-karta);
  transition: transform var(--przejscie), box-shadow var(--przejscie);
}
.karta:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 18px 30px -18px rgba(28, 35, 43, .55); }
/* zakładka-data: wystaje nad kartę; trzy pozycje jak w kartotece */
.karta__zakladka {
  order: -1;
  position: absolute; inset-block-start: calc(-1 * var(--zakladka)); inset-inline-start: 1rem;
  display: inline-flex; align-items: center;
  height: calc(var(--zakladka) + 1px); padding: 0 .8rem;
  background-color: var(--papier-karta);
  border: 1px solid var(--linia); border-block-end: 0;
  border-radius: var(--promien) var(--promien) 0 0;
  box-shadow: inset 0 3px 0 var(--bursztyn);
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--atrament-cichy); white-space: nowrap;
}
.katalog > .karta:nth-child(3n+2) .karta__zakladka { inset-inline-start: auto; left: 50%; transform: translateX(-50%); }
.katalog > .karta:nth-child(3n)   .karta__zakladka { inset-inline-start: auto; inset-inline-end: 1rem; }
/* pole obrazu: etykieta [OBRAZ: bez alt] ZAMIAST grafiki, na liniaturze karty */
.karta__obraz {
  display: grid; place-items: center;
  margin: 1rem 1rem 0;
  aspect-ratio: 16 / 9;
  background-color: var(--papier-cien);
  background-image:
    linear-gradient(180deg, rgba(184, 90, 74, 0) 0 1.4rem, rgba(184, 90, 74, .55) 1.4rem calc(1.4rem + 1px), rgba(184, 90, 74, 0) calc(1.4rem + 1px)),
    repeating-linear-gradient(180deg, rgba(159, 176, 196, 0) 0 calc(1.4rem + 1px), rgba(159, 176, 196, .45) calc(1.4rem + 1px) calc(1.4rem + 2px), rgba(159, 176, 196, 0) calc(1.4rem + 2px) 2.4rem);
  border: 1px solid var(--linia);
  border-radius: 3px;
  color: var(--atrament-cichy); text-decoration: none;
  font-size: .78rem; letter-spacing: .06em;
}
.karta__obraz:hover { color: var(--atrament); }
.karta__obraz-etykieta {
  padding: .3rem .7rem;
  background-color: var(--papier-karta);
  border: 1px solid var(--linia);
  border-radius: 3px;
}
.karta__tytul {
  margin: .95rem 1.1rem .15rem;
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: 1.28rem; line-height: 1.25; letter-spacing: -.008em;
}
.karta__tytul a { display: inline-block; min-height: 44px; padding-block: .45rem; margin-block: -.45rem; color: var(--atrament); text-decoration: none; }
.karta__tytul a:hover { color: var(--bursztyn-ciemny); }
.karta__zajawka { margin: .55rem 1.1rem 0; font-size: .96rem; line-height: 1.6; }
.karta__dalej {
  display: inline-flex; align-items: center;
  min-height: 44px;
  margin: auto 1.1rem 0; padding-block-start: .4rem;
  align-self: flex-start;
  color: var(--bursztyn-ciemny); font-weight: 700; font-size: .9rem;
  text-decoration: none; border-block-end: 1px solid transparent;
}
.karta__dalej:hover { border-block-end-color: currentColor; }
/* karta wysunięta: większy tytuł, bez zajawki poza pierwszą */
.karta--wysunieta .karta__tytul { font-size: 1.2rem; }
/* mini-karta w „Related” */
.karta--mini .karta__tytul { font-size: 1.05rem; margin-block-end: 0; }
.karta--mini { padding-block-end: .9rem; }

/* --- 9. PRZEGRÓDKI (panel boczny) ------------------------------------- */
.przegrodki { display: grid; gap: 1.3rem; align-content: start; }
.przegrodka {
  background-color: var(--papier-karta);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  padding: 1rem 1.15rem 1.15rem;
  box-shadow: var(--cien-karta);
}
.przegrodka__tytul {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 .7rem;
  font-family: var(--kroj-tekst);
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--atrament-cichy);
}
.przegrodka__tytul::before {
  content: ""; flex: none; width: .95rem; height: .5rem;
  background-color: var(--bursztyn); border-radius: 3px 3px 0 0;
}
.przegrodka__lista { list-style: none; }
.przegrodka__lista a {
  display: flex; align-items: center;
  min-height: 44px; padding-block: .15rem;
  border-block-end: 1px solid var(--linia);
  color: var(--atrament); text-decoration: none; font-weight: 500; font-size: .96rem;
  transition: color var(--przejscie), padding var(--przejscie);
}
.przegrodka__lista li:last-child a { border-block-end: 0; }
.przegrodka__lista a:hover { color: var(--bursztyn-ciemny); padding-inline-start: .35rem; }
/* szukaj: pole ze źródła (Search) + przycisk bez etykiety */
.szukaj { display: flex; gap: .5rem; }
.szukaj__pole {
  flex: 1 1 auto; min-width: 0; min-height: 44px;
  padding: .5rem .8rem;
  background-color: var(--papier);
  border: 1px solid var(--linia-ui); border-radius: 3px;
  color: var(--atrament);
}
.szukaj__pole::placeholder { color: var(--atrament-cichy); opacity: 1; }
.szukaj__przycisk {
  flex: none; display: inline-grid; place-items: center;
  min-width: 44px; min-height: 44px;
  background-color: var(--lupek-800); color: var(--kosc);
  border: 0; border-radius: 3px; cursor: pointer;
}
.szukaj__przycisk svg { width: 18px; height: 18px; }
.szukaj__przycisk:hover { background-color: var(--lupek-700); }
/* reklama: pole obrazu w proporcji baneru */
.reklama { margin: 0; aspect-ratio: 5 / 4; }

/* --- 10. OKRUSZKI I PAGINACJA ----------------------------------------- */
.okruszki { padding-block: 1rem 0; }
.okruszki ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5rem; list-style: none; font-size: .86rem; color: var(--atrament-cichy); }
.okruszki li { display: inline-flex; align-items: center; gap: .5rem; }
.okruszki li + li::before { content: "/"; color: var(--linia-mocna); }
.okruszki a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--atrament-cichy); text-decoration: none; font-weight: 600; }
.okruszki a:hover { color: var(--bursztyn-ciemny); }
.okruszki a[aria-current="page"] { color: var(--atrament); }

.paginacja { margin-block-start: clamp(1.8rem, 1.2rem + 2vw, 3rem); }
.paginacja ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }
.paginacja a, .paginacja span {
  display: inline-grid; place-items: center;
  min-width: 44px; min-height: 44px; padding: 0 .7rem;
  background-color: var(--papier-karta);
  border: 1px solid var(--linia-ui); border-radius: 3px;
  color: var(--atrament); font-weight: 700; text-decoration: none;
}
.paginacja a:hover { background-color: var(--papier-cien); }
.paginacja [aria-current="page"] { background-color: var(--bursztyn); border-color: var(--bursztyn); }

/* --- 11. WPIS I STRONA ------------------------------------------------ */
.wpis__naglowek { margin-block-end: clamp(1.2rem, 1rem + 1vw, 2rem); }
/* kategorie jako zakładki stojące na linii */
.wpis__kategorie {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .4rem;
  border-block-end: 1px solid var(--linia-mocna);
  margin-block-end: 1.2rem;
}
.wpis__kategorie a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 .85rem;
  background-color: var(--papier-karta);
  border: 1px solid var(--linia); border-block-end: 0;
  border-radius: var(--promien) var(--promien) 0 0;
  box-shadow: inset 0 3px 0 var(--bursztyn);
  color: var(--atrament-cichy); text-decoration: none;
  font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.wpis__kategorie a:hover { color: var(--atrament); }
.wpis__tytul {
  margin: 0 0 .6rem;
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.7rem);
  line-height: 1.06; letter-spacing: -.016em; color: var(--atrament);
  text-wrap: balance;
}
.wpis__data { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--atrament-cichy); }
.wpis__obraz { margin: 0 0 clamp(1.4rem, 1rem + 1.4vw, 2.2rem); aspect-ratio: 21 / 9; max-width: var(--kolumna-prozy); }
.powiazane { margin-block-start: clamp(2.4rem, 1.6rem + 2.6vw, 4rem); }
.powiazane__siatka {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.9rem, .7rem + 1vw, 1.4rem); align-items: start;
}
@media (min-width: 720px) { .powiazane__siatka { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.powiazane__lista { list-style: none; max-width: var(--kolumna-prozy); }
.powiazane__lista a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 44px; padding: .3rem .1rem;
  border-block-end: 1px solid var(--linia);
  color: var(--atrament); text-decoration: none; font-weight: 600;
}
.powiazane__lista a:hover { color: var(--bursztyn-ciemny); }
.powiazane__lista .data { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--atrament-cichy); white-space: nowrap; }

/* --- 12. STOPKA — dno szuflady ---------------------------------------- */
.stopka {
  position: relative; overflow: hidden;
  background-color: var(--lupek-900);
  background-image: linear-gradient(180deg, #1B2530 0%, #121820 40%);
  color: var(--kosc-cicha);
  border-block-start: 1px solid var(--lupek-700);
}
.stopka__zakladki { position: absolute; inset-block-start: 0; inset-inline: 0; height: 2.2rem; color: var(--kosc); opacity: .42; pointer-events: none; }
.stopka__zakladki svg { width: 100%; height: 100%; }
.stopka .kontener {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 1.6rem clamp(1.5rem, 3vw, 4rem);
  align-items: end;
  padding-block: clamp(3rem, 2rem + 2.8vw, 5rem) clamp(2rem, 1.4rem + 2vw, 3.2rem);
}
@media (min-width: 800px) { .stopka .kontener { grid-template-columns: max-content minmax(0, 1fr); } .stopka__menu { justify-self: end; } .stopka__menu ul { justify-content: flex-end; } }
.stopka__sygnatura { display: grid; gap: .6rem; }
.stopka__znak {
  display: inline-flex; align-items: center; gap: .7rem; min-height: 44px;
  font-family: var(--kroj-naglowek); font-weight: 600;
  font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); color: var(--kosc); text-decoration: none;
  overflow-wrap: normal; word-break: keep-all; white-space: nowrap;
}
.stopka__znak:hover { color: var(--bursztyn-jasny); }
.stopka__kreska { width: clamp(4rem, 12vw, 9rem); height: 1px; background-image: linear-gradient(90deg, var(--bursztyn), rgba(208, 138, 47, 0)); }
.stopka__prawa { display: grid; gap: .2rem; font-size: .9rem; }
.stopka__prawa p { margin: 0; line-height: 1.6; }
.stopka__prawa a { display: inline-block; padding-block: .7rem; margin-block: -.7rem; color: var(--bursztyn-jasny); text-decoration: none; }  /* pole 44 px bez łamania wiersza */
.stopka__prawa a:hover { color: var(--kosc); text-decoration: underline; text-underline-offset: .18em; }
.stopka__menu ul { display: flex; flex-wrap: wrap; gap: 0 1.2rem; list-style: none; }
.stopka__menu a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  color: var(--kosc-cicha); text-decoration: none;
  font-size: .8rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  border-block-end: 2px solid transparent;
}
.stopka__menu a:hover { color: var(--kosc); border-block-end-color: var(--bursztyn); }

/* --- 13. MENU MOBILNE (checkbox-hack, bez JS) ------------------------- */
@media (max-width: 860px) {
  .menu__przelacznik {
    display: inline-grid; place-items: center;
    width: 46px; height: 44px;
    border: 1px solid rgba(243, 237, 225, .35); border-radius: 3px;
    cursor: pointer; color: var(--kosc);
  }
  .menu__kreski, .menu__kreski::before, .menu__kreski::after {
    content: ""; display: block; width: 20px; height: 2px;
    background-color: currentColor; border-radius: 2px; position: relative;
    transition: transform var(--przejscie), opacity var(--przejscie);
  }
  .menu__kreski::before { position: absolute; inset-block-start: -6px; }
  .menu__kreski::after  { position: absolute; inset-block-start: 6px; }
  .menu { display: none; flex-basis: 100%; padding-block: .3rem 1rem; }
  #menu-przelacznik:checked ~ .menu { display: block; }
  #menu-przelacznik:checked ~ .menu__przelacznik .menu__kreski { background-color: transparent; }
  #menu-przelacznik:checked ~ .menu__przelacznik .menu__kreski::before { transform: translateY(6px) rotate(45deg); }
  #menu-przelacznik:checked ~ .menu__przelacznik .menu__kreski::after  { transform: translateY(-6px) rotate(-45deg); }
  .menu__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .menu__link { display: flex; min-height: 48px; padding: .4rem .2rem; border-block-end: 1px solid rgba(243, 237, 225, .1); font-size: 1rem; }
  .menu__link[aria-current="page"] { border-block-end-color: var(--bursztyn); }
}

/* --- 14. SKALA POWYŻEJ 1366 px — kompozycja rośnie, nie tylko pismo ---
   html{font-size} rośnie (blok 2), kontener i przegródki są w rem, katalog
   przechodzi z 2 na 3 karty w rzędzie, hero dostaje szerszy rysunek. */
@media (min-width: 1600px) {
  :root { --bok: 23rem; }
  .hero__kontener { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4rem; }
  .hero__rysunek { max-width: 50rem; }
  .karta__tytul { font-size: 1.36rem; }
}

/* --- 15. RUCH I DRUK -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .karta:hover { transform: none; }
}
@media print {
  html { font-size: 11pt; }
  body, .arkusz { background: #FFFFFF; color: #000000; box-shadow: none; margin: 0; }
  .naglowek, .hero, .stopka { background: #FFFFFF; color: #000000; }
  .hero__mgla, .hero__linie, .hero__scrim, .hero__rysunek, .hero__prog, .stopka__zakladki, .naglowek__grzbiet { display: none !important; }
  .hero .tytul, .hero__lid, .znak, .stopka__znak, .menu__link, .stopka__menu a, .stopka__prawa a { color: #000000; }
  .karta, .przegrodka { box-shadow: none; border-color: #000000; }
  .uklad { grid-template-columns: 1fr; }
  a { color: #000000; }
}