/* Fonty lokalne (bez zewnętrznych żądań, RODO). Źródło: Google Fonts (SIL OFL), podzbiory latin i latin-ext.
   Fraunces: zmienny (opsz, wght 300-500; SOFT w kroju prostym), kursywa bez SOFT. Source Sans 3: zmienny wght 400-600. */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/fraunces-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/sourcesans3-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/sourcesans3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
   tokens.css  -  makieta strony Marii Pełko (psychoterapiawpoznaniu.pl)
   Etap E1 / B1. Tylko zmienne (bez reguł dla elementów), jeden plik,
   żadnych zewnętrznych zależności poza fontami.

   Kolory są wyjęte ze zdjęć (źródła i obliczenia: makieta/kolory.md).
   Kontrasty policzone wzorem WCAG 2.x (tabela w makieta/kolory.md).

   FONTY (Google Fonts tylko w makiecie; w E3 lokalne .woff2 w podzbiorach latin i latin-ext):
     nagłówki: Fraunces (zmienny: opsz, wght; wagi 300-500; SOFT tylko w kroju prostym, kursywa bez SOFT)
     tekst:    Source Sans 3 (zmienny: wght 400-600; bez kursywy: znaczniki [szkic] są kursywą Fraunces)
   Adres do <head> (oba kroje w jednym żądaniu, display=swap), pobiera dwa podzbiory każdego pliku
   (latin i latin-ext: polskie litery), razem ok. 458 KB (D1b: ok. 666 KB):
   https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..500,0..100;1,9..144,300..500,0&family=Source+Sans+3:wght@400..600&display=swap
   Zmierzone w D1c (pliki woff2, latin + latin-ext): Fraunces prosty 221 KB (z SOFT), kursywa 150 KB (bez SOFT),
   Source Sans 3 87 KB. Bez SOFT także w kroju prostym byłoby 360 KB, ale nagłówki są wtedy widocznie ostrzejsze
   (SOFT 100 zaokrągla zakończenia liter), więc ta oś zostaje w romanie. Zakresy osi nie zmniejszają plików
   (Google zawsze wysyła pełny zakres).

   ŁAMY (media query nie czyta zmiennych, więc wartości są tu tylko jako
   dokumentacja): telefon < 48rem (768 px), reszta od 48rem; menu poziome
   dopiero od 68rem (sześć pozycji + „Zadzwoń" nie mieści się na tablecie).
   Wszystkie przełączenia układu na telefonie dzielą jedną granicę: 47.99rem.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- KOLORY: paleta ze zdjęć ---------- */
  /* tła */
  --papier:   #f3eee5;  /* ciepła mgła / krem; główne tło; kolor, w który zanikają zdjęcia */
  --mgla:     #f7f8f4;  /* jaśniejsze tło sekcji (cienko odcięte od papieru) */
  --piasek:   #cebc9d;  /* tło ramki praktycznej, pasy dekoracyjne. Na nim TYLKO --tusz */
  --swiatlo-miekkie: #f0dba1;  /* delikatne podświetlenie (hover, ramka "Najbliżej"); tekst --tusz */

  /* tekst */
  --tusz:     #212826;  /* tekst główny: grafitowa zieleń, nigdy czysta czerń (13,0:1 na papierze) */
  --tusz-2:   #4c5043;  /* tekst drugorzędny, podpisy, daty (7,2:1 na papierze). Nie na --piasek */

  /* akcenty */
  --bursztyn: #764b1e;  /* LINK i przycisk-słowo (ciemny odcień fotela; 6,5:1 na papierze) */
  --mech-ciemny: #445936; /* zielony tekst/linki alternatywne, przycisk pełny (6,7:1) */
  --lupek-ciemny: #404e59; /* meta, obrys fokusu (7,4:1) */
  --swiatlo:  #e8b32c;  /* ciepły żółty z fotela: TYLKO dekoracja i tło przycisku "Zadzwoń" z tekstem --tusz (jako tekst tylko 1,7:1) */
  --mech:     #728d5f;  /* przygaszona zieleń: TYLKO dekoracja, grafika (3,2:1) */
  --lupek:    #7b8a96;  /* łupkowy błękit: TYLKO dekoracja, grafika (3,1:1) */

  /* linie */
  --linia:    #ddd0ba;  /* cienka linia dekoracyjna (nie niesie informacji) */
  --obrys:    var(--bursztyn);  /* obrys przycisku (wymagane 3:1, jest 6,5:1) */

  /* zanik zdjęcia w papier (gradient od dołu, bez ciemnej nakładki).
     rgb(... / 0) zamiast "transparent", żeby nie było szarej smugi */
  --zanik: linear-gradient(to bottom,
             rgb(243 238 229 / 0) 0%,
             rgb(243 238 229 / 0) 60%,
             rgb(243 238 229 / .85) 90%,
             rgb(243 238 229 / 1) 100%);

  /* ---------- FONTY ---------- */
  --font-naglowek: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-tekst: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* miękkość kroju: oś SOFT we Fraunces (gdy załadowana), opsz dobiera się sam */
  --font-naglowek-ustawienia: "SOFT" 100, "WONK" 0;
  --waga-naglowek: 350;     /* lekko, ale nie cienko */
  --waga-tekst: 400;
  --waga-pogrubienie: 600;

  /* ---------- SKALA TYPOGRAFICZNA (płynna, 375 px -> 1280 px) ---------- */
  --t-xs:   clamp(0.875rem, 0.8491rem + 0.1105vw, 0.9375rem);  /* 14 -> 15 px: drobne meta */
  --t-s:    clamp(1rem, 0.9871rem + 0.05525vw, 1.031rem);      /* 16 -> 16,5 px: podpisy, przyciski */
  --t-0:    clamp(1.125rem, 1.099rem + 0.1105vw, 1.188rem);    /* 18 -> 19 px: tekst główny */
  --t-1:    clamp(1.25rem, 1.172rem + 0.3315vw, 1.438rem);     /* 20 -> 23 px: lead */
  --t-2:    clamp(1.375rem, 1.246rem + 0.5525vw, 1.688rem);    /* 22 -> 27 px: h3 */
  --t-3:    clamp(1.75rem, 1.439rem + 1.326vw, 2.5rem);        /* 28 -> 40 px: h2 */
  --t-4:    clamp(2.25rem, 1.68rem + 2.431vw, 3.625rem);       /* 36 -> 58 px: h1 */
  --t-hero: clamp(1.875rem, 1.305rem + 2.431vw, 3.25rem);      /* 30 -> 52 px: jedno zdanie pod kadrem */

  --lh-tekst: 1.65;
  --lh-lead: 1.5;
  --lh-naglowek: 1.15;
  --ls-naglowek: -0.01em;
  --ls-male: 0.04em;         /* małe, rozstrzelone etykiety (np. "NAJBLIŻEJ"), używać rzadko */

  /* ---------- ODSTĘPY (skala 4/8) ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;  --s-9: 96px;  --s-10: 128px;
  --sekcja: clamp(3.5rem, 2rem + 5vw, 6.5rem);   /* 56 -> 104 px: odstęp góra i dół sekcji (krótka sekcja: .sekcja--krotka) */
  --gutter: clamp(1.25rem, 0.5249rem + 3.094vw, 3rem); /* 20 -> 48 px: margines boczny */
  --akapit: 1.25em;          /* odstęp między akapitami w tekście ciągłym */

  /* ---------- SZEROKOŚCI ---------- */
  --miara: 65ch;             /* wiersz tekstu: 62-68 znaków (min 62ch, max 68ch) */
  --miara-min: 62ch;
  --miara-max: 68ch;
  --w-kontener: 1120px;      /* siatka kart, tekst + zdjęcie */
  --w-szeroki: 1320px;       /* maksimum dla szerokich kadrów w kolumnie */
  --w-karta-min: 280px;      /* karta-wejście nie węższa niż to (auto-fit) */
  --w-obraz-maks-maly: 1200px; /* zdjęcia 1200 px (gabinet, krąg) nie rozciągać ponad to */

  /* ---------- PROMIENIE (małe) i CIENIE (prawie żadne) ---------- */
  --r-s: 2px;  --r-m: 4px;  --r-l: 8px;
  --cien-0: none;
  --cien-1: 0 12px 32px -16px rgb(33 40 38 / .14);   /* tylko gdy karta musi się oderwać; domyślnie --cien-0 */

  /* ---------- PRZEJŚCIA ---------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --czas-krotki: 160ms;      /* hover, fokus */
  --czas: 320ms;             /* menu, rozwijanie */
  --czas-dlugi: 900ms;       /* delikatne wyłanianie zdjęć i sekcji (IntersectionObserver) */
  --przejscie: var(--czas-krotki) var(--ease);

  /* ---------- WYSOKOŚCI HERO (jednostka svh, zawsze ograniczona w px) ---------- */
  --hero-h: min(88svh, 820px);               /* pełny kadr (Psychoterapia, Czytelnia...) */
  --hero-h-a: min(76svh, 760px);             /* wariant A strony głównej (droga) */
  --hero-h-b: min(46svh, 440px);             /* wariant B strony głównej (tory) */
  --hero-h-pol: min(56svh, 520px);           /* kadr podstron (Grupy) */
  --hero-h-tel: min(100vw, 60svh, 520px);    /* telefon, wariant A: prawie kwadrat, pojedynczy plik -d */
  --hero-h-b-tel: min(90vw, 46svh, 380px);   /* telefon, wariant B */
  --hero-h-pol-tel: min(100vw, 56svh, 420px);/* telefon, podstrony */
  --t-slowo: clamp(3rem, 1.9rem + 4.6vw, 5.25rem);  /* wielkie słowo z kropką na podstronie */

  /* ---------- MIĘKKI BRZEG ZDJĘĆ (maska w CSS; zdjęcie rozpuszcza się w papier) ---------- */
  --brzeg: 14%;
  --brzeg-ciemne: 9%;       /* ciemne zdjęcia (klasa .ciemne): węższy brzeg, mniej „poduszkowego" halo */

  /* ---------- DOSTĘPNOŚĆ ---------- */
  --fokus-kolor: var(--lupek-ciemny);  /* 7,4:1 na papierze, 4,6:1 na piasku */
  --fokus-grubosc: 3px;
  --fokus-odstep: 3px;
  --cel-dotyku: 44px;        /* minimalny cel dotyku (WCAG 2.5.8 wymaga 24, my 44) */
  --naglowek-h: 56px;        /* przyklejone menu na telefonie */
  --naglowek-h-d: 72px;      /* przyklejone menu na desktopie */
}

/* Niski ekran (telefon z paskami przeglądarki, mały laptop): kadr niższy, żeby oba
   wejścia („Szukam wsparcia", „Jestem terapeutką, terapeutą") były w pierwszym ekranie */
@media (max-width: 47.99rem) and (max-height: 760px) {
  :root { --hero-h-tel: min(100vw, 44svh); --hero-h-pol-tel: min(100vw, 46svh); }
}
/* bardzo niski telefon (np. 320x568): kadr jeszcze niższy, żeby drugie wejście nie wypadło pod zgięciem */
@media (max-width: 47.99rem) and (max-height: 600px) {
  :root { --hero-h-tel: min(100vw, 38svh); --hero-h-pol-tel: min(100vw, 40svh); }
}
@media (min-width: 48rem) and (max-height: 700px) {
  :root { --hero-h-a: 58svh; }
}

/* Ruch: żaden albo jeden, ledwo widoczny; wyłączony przy reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --czas-krotki: 0.01ms;
    --czas: 0.01ms;
    --czas-dlugi: 0.01ms;
  }
}
/* ==========================================================================
   styles.css  -  makieta strony Marii Pełko (psychoterapiawpoznaniu.pl)
   Etap E1 / B2. Jeden plik. Wymaga tokens.css (link w HTML PRZED tym plikiem).

   Charakter: oniryczny, delikatny, zdjęcie jest światłem (zanika w papier),
   ZARAZEM prosty na telefonie. Zero frameworków, zero JavaScriptu w CSS.

   Spis:
     1. Baza i tło          6. Bloki treści (tekst, lista Mai, ramki)
     2. Typografia          7. Karty-wejścia
     3. Układ               8. Portret w łukowej ramce
     4. Nagłówek i menu     9. Kontakt i stopka
     5. Kadr (hero)        10. Ruch, oznaczenia szkiców, drobiazgi

   Łamy: telefon < 48rem (768 px) i reszta; menu poziome dopiero od 68rem,
   bo sześć pozycji + „Zadzwoń" nie mieści się na tablecie. Jedna granica
   dla telefonu: 47.99rem. Jeden plik zdjęcia na kadr (bez <picture>):
   kadr na telefonie robi object-position.

   Zdjęcia (poza kadrem otwierającym) mają miękki brzeg: jedna reguła maski
   (sekcja 7) i wspólna, łagodniejsza korekta tonalna.
   ========================================================================== */


/* ---------- 1. BAZA I TŁO ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--naglowek-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-tekst);
  font-size: var(--t-0);
  font-weight: var(--waga-tekst);
  line-height: var(--lh-tekst);
  color: var(--tusz);
  background-color: var(--papier);
  /* ciepła mgła z bardzo subtelnym światłem w prawym górnym rogu
     (kolor z fotela) i drugim, chłodnym, w lewym dolnym; bez czystej bieli */
  background-image:
    radial-gradient(72rem 46rem at 100% 0, rgb(240 219 161 / .34), rgb(240 219 161 / 0) 72%),
    radial-gradient(60rem 40rem at 0 100%, rgb(247 248 244 / .75), rgb(247 248 244 / 0) 72%);
  background-repeat: no-repeat;
  /* długie słowo (adres e-mail, „Przewodniczką.") nie może wypchnąć strony przy powiększonym tekście */
  overflow-wrap: break-word;
}

img, picture { display: block; max-width: 100%; }
img { height: auto; }

::selection { background: var(--swiatlo-miekkie); color: var(--tusz); }

/* widoczny fokus (obrys --lupek-ciemny: 7,4:1 na papierze, 4,6:1 na piasku) */
:focus-visible {
  outline: var(--fokus-grubosc) solid var(--fokus-kolor);
  outline-offset: var(--fokus-odstep);
  border-radius: 2px;
}

/* tylko dla czytników ekranu */
.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* link „przejdź do treści" */
.skip {
  position: absolute; left: var(--s-4); top: 0; z-index: 100;
  transform: translateY(-150%);
  padding: .7rem 1.1rem; border-radius: var(--r-l);
  background: var(--tusz); color: var(--papier); text-decoration: none;
}
.skip:focus { top: var(--s-3); transform: none; }


/* ---------- 2. TYPOGRAFIA ---------- */
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-naglowek);
  font-variation-settings: var(--font-naglowek-ustawienia);
  font-weight: var(--waga-naglowek);
  line-height: var(--lh-naglowek);
  letter-spacing: var(--ls-naglowek);
  color: var(--tusz);
  text-wrap: balance;
}
h2 { font-size: var(--t-3); margin-bottom: var(--s-5); }
h3 { font-size: var(--t-2); }

p { margin: 0 0 var(--akapit); text-wrap: pretty; }
.tekst > :last-child { margin-bottom: 0; }

strong, b { font-weight: var(--waga-pogrubienie); }

/* link w tekście: bursztyn, cienkie podkreślenie */
a {
  color: var(--bursztyn);
  text-decoration-line: underline;
  text-decoration-thickness: max(1px, .06em);
  text-underline-offset: .22em;
  text-decoration-color: rgb(118 75 30 / .7);   /* --bursztyn w 70% (podkreślenie ma ok. 3,3:1 na papierze) */
  transition: text-decoration-color var(--przejscie), background-color var(--przejscie);
}
a:hover { text-decoration-thickness: 2px; text-decoration-color: currentColor; }

/* mała etykieta nad nagłówkiem (np. „Najbliżej") */
/* i eyebrow w H1: szeryf, kursywa, zdanie pisane normalnie (bez wersalików) */
.etykieta, h1 .eyebrow {
  font-family: var(--font-naglowek);
  font-variation-settings: var(--font-naglowek-ustawienia);
  font-style: italic; font-weight: 350;
  text-transform: none; letter-spacing: 0;
  line-height: 1.4;
  color: var(--tusz-2);
}
.etykieta { margin: 0 0 var(--s-4); font-size: var(--t-1); }

.lead { font-size: var(--t-1); line-height: var(--lh-lead); }

/* słowa-klucze, które Maja pisze wersalikami (KONTAKT, WIĘŹ…): na ekranie małe litery
   w kursywie szeryfowej (kroju nagłówków), żeby strona nie krzyczała */
/* (w HTML: <strong class="k"> z małymi literami; czytniki ekranu nie literują wersalików) */
.k {
  font-family: var(--font-naglowek); font-variation-settings: var(--font-naglowek-ustawienia);
  font-style: italic; font-weight: 350; font-size: 1.06em;
}


/* ---------- 3. UKŁAD ---------- */
.kontener { width: min(100% - 2 * var(--gutter), var(--w-kontener)); margin-inline: auto; }
.kolumna  { width: min(100% - 2 * var(--gutter), var(--miara)); margin-inline: auto; }

.sekcja { padding-block: var(--sekcja); }
.sekcja--blisko-gora { padding-top: clamp(2rem, 1rem + 4vw, 4rem); }
/* krótka sekcja (dwa zdania): mniej pustki góra i dół */
.sekcja--krotka { padding-block: clamp(2rem, 1rem + 3vw, 3.5rem); }

/* jaśniejsza sekcja: mgła rozpływa się u góry i u dołu (bez twardej krawędzi) */
.tlo-mgla {
  background: linear-gradient(to bottom,
    rgb(247 248 244 / 0), var(--mgla) 10rem,
    var(--mgla) calc(100% - 10rem), rgb(247 248 244 / 0));
}
/* dwa miejsca ciepłego światła (kolor fotela) w emocjonalnych punktach strony */
#czytelnia {
  background:
    radial-gradient(40rem 26rem at 72% 50%, rgb(240 219 161 / .22), rgb(240 219 161 / 0) 70%),
    linear-gradient(to bottom,
      rgb(247 248 244 / 0), var(--mgla) 10rem,
      var(--mgla) calc(100% - 10rem), rgb(247 248 244 / 0));
}
.kontakt {
  background: radial-gradient(44rem 30rem at 78% 45%, rgb(240 219 161 / .38), rgb(240 219 161 / 0) 60%);
}


/* ---------- 4. NAGŁÓWEK I MENU ---------- */
.naglowek {
  position: sticky; top: 0; z-index: 40;
  /* bez linijki u dołu: zdjęcie wyłania się spod mgiełki */
  background: linear-gradient(rgb(243 238 229 / .94) 55%, rgb(243 238 229 / .6));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
/* telefon poziomo: przyklejony pasek jest za drogi */
@media (max-height: 30rem) { .naglowek { position: relative; } }
/* nagłówek zawija się (WCAG 1.4.4, 1.4.12): przy powiększonym tekście „Zadzwoń" i „Menu"
   schodzą do kolejnego wiersza zamiast wypaść poza ekran; marka może się łamać */
.naglowek__wnetrze {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-3); row-gap: 0;
  width: min(100% - 2 * var(--gutter), var(--w-szeroki)); margin-inline: auto;
  min-height: var(--naglowek-h);
}
.marka {
  margin-right: auto;
  display: inline-flex; align-items: center; min-height: var(--cel-dotyku);
  font-family: var(--font-naglowek);
  font-variation-settings: var(--font-naglowek-ustawienia);
  font-size: 1.3rem; font-weight: 400; letter-spacing: var(--ls-naglowek);
  color: var(--tusz); text-decoration: none;
  min-width: 0; overflow-wrap: anywhere;
}
.marka:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }

/* „Zadzwoń" widoczne zawsze: zmiękczone jak lampa, nie jak naklejka;
   tekst tusz na jasnym ciepłym tle (kontrast ok. 10,7:1) */
.zadzwon {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--cel-dotyku); padding: 0 1.15rem;
  border-radius: 999px;
  background: rgb(239 216 159);   /* 38% --swiatlo na --papier (policzone, bez color-mix) */
  box-shadow: 0 0 0 1px rgb(232 179 44 / .7), 0 0 24px rgb(232 179 44 / .35);
  color: var(--tusz);
  font-size: var(--t-s); font-weight: var(--waga-pogrubienie);
  text-decoration: none; text-align: center;
  transition: background-color var(--przejscie);
}
.zadzwon:hover { background: var(--swiatlo-miekkie); text-decoration: none; }

/* menu na telefonie i tablecie: <details> bez JS */
.menu-telefon { position: static; }
.menu-telefon summary {
  display: inline-flex; align-items: center; justify-content: flex-end;
  min-height: var(--cel-dotyku); min-width: 4.75rem;   /* „Menu" i „Zamknij" tej samej szerokości: nic nie skacze */
  padding: 0 .35rem;
  list-style: none; cursor: pointer;
  font-size: var(--t-s); font-weight: var(--waga-pogrubienie); color: var(--tusz);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em;
  text-decoration-color: rgb(33 40 38 / .45);
}
.menu-telefon summary::-webkit-details-marker { display: none; }
.menu-telefon summary .zam { display: none; }
.menu-telefon[open] summary .otw { display: none; }
.menu-telefon[open] summary .zam { display: inline; }

.menu-telefon__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  padding: .25rem var(--gutter) 1.5rem;
  background: var(--papier);
  border-bottom: 1px solid var(--linia);
  max-height: calc(100svh - 100%); /* 100% = faktyczna wysokość nagłówka (zawija się przy powiększonym tekście) */
  overflow-y: auto;
}
.menu-telefon ul { list-style: none; margin: 0 auto; padding: 0; max-width: 34rem; }
.menu-telefon li a {
  display: flex; align-items: center; min-height: 3.25rem;
  font-family: var(--font-naglowek);
  font-variation-settings: var(--font-naglowek-ustawienia);
  font-size: var(--t-2); font-weight: 350;
  color: var(--tusz); text-decoration: none;
  border-bottom: 1px solid rgb(221 208 186 / .45);
}
.menu-telefon li:last-child a { border-bottom: 0; }
.menu-telefon li a:hover { color: var(--bursztyn); }

/* menu poziome (tylko szerokie okna) */
.menu-szerokie { display: none; }
.menu-szerokie ul { display: flex; gap: 1.3rem; list-style: none; margin: 0; padding: 0; }
.menu-szerokie a {
  display: inline-flex; align-items: center; min-height: var(--cel-dotyku);
  font-size: var(--t-s); color: var(--tusz); text-decoration: none;
}
.menu-szerokie a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.menu-szerokie a[aria-current="page"],
.menu-telefon a[aria-current="page"] {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em;
  text-decoration-color: var(--bursztyn);   /* wskaźnik „jesteś tu" co najmniej 3:1 (żółty --swiatlo miał 1,7:1) */
}
.menu-szerokie a[aria-current="page"] { font-weight: var(--waga-pogrubienie); }

/* bardzo wąski telefon (320 px): nagłówek mieści się bez ściskania */
@media (max-width: 22.5rem) {
  .zadzwon { padding: 0 .8rem; }
  .naglowek__wnetrze { column-gap: .375rem; }
  .marka { font-size: 1.15rem; }
  .menu-telefon summary { min-width: 4.5rem; }
}

@media (min-width: 72rem) {
  .naglowek__wnetrze { min-height: var(--naglowek-h-d); column-gap: 1.5rem; }
  .menu-telefon { display: none; }
  .menu-szerokie { display: block; }
  .marka { font-size: 1.45rem; }
}


/* ---------- 5. KADR (HERO): zdjęcie jest światłem ---------- */
/* Zdjęcie na pełną szerokość; dolna część rozpuszcza się w tło strony przez
   maskę (bez ciemnej nakładki). Tekst leży na polu papieru, w miejscu, gdzie
   maska jest już (prawie) przezroczysta: pod pierwszym wersem tekstu zdjęcie
   przeziera jeszcze słabo (odchylenie od papieru do ok. 19/255, kontrast
   eyebrow co najmniej 6:1, patrz kolory.md). */
.hero { position: relative; }

.hero__kadr {
  position: relative;
  height: var(--hero-h);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%, #000 50%, rgb(0 0 0 / .58) 64%, rgb(0 0 0 / .16) 78%, rgb(0 0 0 / 0) 92%);
          mask-image: linear-gradient(to bottom,
    #000 0%, #000 50%, rgb(0 0 0 / .58) 64%, rgb(0 0 0 / .16) 78%, rgb(0 0 0 / 0) 92%);
}
.hero__kadr picture, .hero__kadr img { width: 100%; height: 100%; }
.hero__kadr img {
  object-fit: cover;
  object-position: var(--fokus, 50% 50%);
}

.hero__tekst {
  position: relative;
  margin-top: calc(var(--hero-h) * -.17);
  padding-bottom: clamp(.5rem, 2vw, 1.5rem);
}
.hero__tekst .kontener > * { max-width: 62rem; }

/* H1 = eyebrow (słowa kluczowe) + poetycka linia */
h1 .eyebrow {
  display: block; margin-bottom: var(--s-4); overflow-wrap: anywhere;
  font-size: var(--t-s); line-height: 1.45;
}
h1 .hero-line {
  display: block;
  font-size: var(--t-hero); font-weight: 300; line-height: 1.16;
  letter-spacing: -.012em;
}
/* zdanie łamie się po „Ty," na każdej szerokości (twarde spacje w HTML pilnują „Ty," i „ja chętnie") */
h1 .hero-line .wers { display: block; }

/* dwa wejścia: linki-słowa ze strzałką */
.wejscia {
  display: flex; flex-wrap: wrap; gap: .25rem 2.25rem;
  list-style: none; margin: var(--s-5) 0 0; padding: 0;
}

/* link-słowo: cienkie podkreślenie + strzałka (dekoracyjna, nie czytana);
   ta sama strzałka jest przy tytułach kart */
.slowo {
  display: inline-flex; align-items: center; gap: .5em;
  min-height: var(--cel-dotyku);
  font-size: var(--t-1); line-height: 1.3;
  color: var(--bursztyn); overflow-wrap: anywhere;
  text-decoration-line: underline; text-decoration-thickness: max(1px, .06em);
  text-underline-offset: .32em;
  text-decoration-color: rgb(118 75 30 / .7);
}
.slowo::after {
  content: "→"; content: "→" / "";
  font-family: var(--font-tekst); font-size: .8em; font-weight: 400;
  display: inline-block;
  transition: transform var(--czas) var(--ease);
}
.slowo:hover { text-decoration-thickness: 2px; text-decoration-color: currentColor; }
.slowo:hover::after { transform: translateX(.25em); }
.slowo--maly { font-size: var(--t-0); }
/* słowo-akcja (tel:, mailto:): bez strzałki, bo nie prowadzi do innej strony */
.slowo--akcja::after { content: none; }

/* wariant A: pełny kadr, ale tak, by dwa wejścia mieściły się w pierwszym ekranie
   (niskie okna: tokens.css, @media max-height) */
.hero--a .hero__kadr { height: var(--hero-h-a); }
.hero--a .hero__tekst { margin-top: calc(var(--hero-h-a) * -.17); }
/* burzowe niebo u góry rozjaśnione lekką mgłą (światło, nie nakładka) */
.hero--a .hero__kadr::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 46%; z-index: 1; pointer-events: none;
  /* ciepłe światło u góry kadru (kolor fotela --swiatlo-miekkie), żeby niebo nie było stalowe */
  background: linear-gradient(rgb(243 238 229 / .45), rgb(240 219 161 / .2) 60%, rgb(240 219 161 / 0));
}
.hero--a .hero__kadr img { filter: saturate(.88) brightness(1.04) sepia(.1); }

/* wariant B: niższy pas ze zdjęciem, tekst pod nim */
.hero--b .hero__kadr {
  height: var(--hero-h-b);
  /* niższy pas: zanik zaczyna się później, żeby tory zostały widoczne */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgb(0 0 0 / .5) 77%, rgb(0 0 0 / 0) 97%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgb(0 0 0 / .5) 77%, rgb(0 0 0 / 0) 97%);
}
.hero--b .hero__tekst { margin-top: calc(var(--hero-h-b) * -.08); padding-top: var(--s-5); }
.hero--b h1 .hero-line { font-size: var(--t-4); }

/* podstrony: mały kadr, wielkie słowo z kropką */
.hero--podstrona .hero__kadr { height: var(--hero-h-pol); }
.hero--podstrona .hero__tekst { margin-top: calc(var(--hero-h-pol) * -.15); padding-top: var(--s-4); }
.hero--podstrona h1 .hero-line { font-size: var(--t-slowo); font-weight: 300; line-height: 1.05; }
.hero--podstrona .lead { margin: var(--s-4) 0 0; }

/* telefon: kadr (prawie kwadrat) z tego samego pliku co desktop; kadruje object-position */
@media (max-width: 47.99rem) {
  .hero__kadr, .hero--a .hero__kadr { height: var(--hero-h-tel); }
  .hero__tekst, .hero--a .hero__tekst { margin-top: calc(var(--hero-h-tel) * -.14); }
  .hero--a .hero__kadr {
    /* zanik zaczyna się później, żeby postać (stopy) została widoczna dłużej */
    -webkit-mask-image: linear-gradient(to bottom,
      #000 0%, #000 56%, rgb(0 0 0 / .58) 69%, rgb(0 0 0 / .16) 82%, rgb(0 0 0 / 0) 95%);
            mask-image: linear-gradient(to bottom,
      #000 0%, #000 56%, rgb(0 0 0 / .58) 69%, rgb(0 0 0 / .16) 82%, rgb(0 0 0 / 0) 95%);
  }
  .hero--b .hero__kadr { height: var(--hero-h-b-tel); }
  .hero--b .hero__tekst { margin-top: calc(var(--hero-h-b-tel) * -.06); }
  .hero--podstrona .hero__kadr { height: var(--hero-h-pol-tel); }
  .hero--podstrona .hero__tekst { margin-top: calc(var(--hero-h-pol-tel) * -.13); }
  .wejscia { flex-direction: column; flex-wrap: nowrap; gap: .25rem; }   /* nowrap: kolumna z zawijaniem sizowałaby elementy do max-content, poza kolumną tekstu */
}
/* bardzo wąski telefon (do 360 px): zdanie hero A o stopień mniejsze, żeby „Twoją Przewodniczką."
   mieściło się w jednym wierszu (bez osieroconego „ja" i bez trzeciego wiersza) */
@media (max-width: 22.5rem) { .hero--a h1 .hero-line { font-size: 1.625rem; } }


/* ---------- 6. BLOKI TREŚCI ---------- */
/* tekst z nagłówkiem: kolumna do ok. 65 znaków */
.tekst h2 { margin-bottom: var(--s-5); }

/* lista Mai: myślniki (jak w jej postach), bez ikonek */
.lista-mai { list-style: none; margin: 0 0 var(--akapit); padding: 0; }
.lista-mai li { position: relative; padding-left: 1.7em; margin-bottom: .7em; }
.lista-mai li::before {
  content: "–"; content: "–" / "";
  position: absolute; left: .2em; top: 0;
  color: var(--mech-ciemny); font-weight: var(--waga-pogrubienie);
}
.lista-mai li:last-child { margin-bottom: 0; }

/* cicha ramka praktyczna (Najbliżej): poświata z cienką linią po lewej, bez tła-prostokąta
   i bez zaokrągleń; poświata i linia zanikają u góry i u dołu (maska), więc nigdzie nie ma
   twardej krawędzi. Tekst tuszem na jasnym tle (kontrast bez zmian) */
.ramka {
  --ramka-rgb: 240 219 161;        /* --swiatlo-miekkie */
  --ramka-linia-rgb: 232 179 44;   /* --swiatlo */
  position: relative; isolation: isolate;
  max-width: 54rem;
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem) 0 clamp(1.5rem, 1rem + 2.5vw, 2.75rem) clamp(1.25rem, 1rem + 2vw, 2.5rem);
  color: var(--tusz);
}
.ramka::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-left: 1px solid rgb(var(--ramka-linia-rgb) / .75);
  background: radial-gradient(ellipse 80% 110% at 0 50%,
    rgb(var(--ramka-rgb) / .5), rgb(var(--ramka-rgb) / 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
.ramka a { color: var(--bursztyn); }
.ramka .etykieta { color: var(--tusz); font-size: var(--t-1); margin: 0 0 var(--s-4); }
.ramka h2:not(.etykieta) { font-size: var(--t-2); margin-bottom: var(--s-2); }
.ramka > p:last-child { margin-bottom: 0; }

.wydarzenie + .wydarzenie {
  margin-top: var(--s-6); padding-top: var(--s-6);
  border-top: 1px solid rgb(118 75 30 / .2);
}
.wydarzenie h3, .wydarzenie h4 { margin-bottom: var(--s-2); }
.wydarzenie__meta { margin: 0 0 var(--s-3); color: var(--tusz); font-weight: var(--waga-pogrubienie); font-size: var(--t-s); }
.wydarzenie__meta span { font-weight: var(--waga-tekst); }
.wydarzenie p:last-child { margin-bottom: 0; }
.wydarzenie p + .slowo { margin-top: var(--s-1); }
/* wydarzenie bez szczegółów: jedna linia (tytuł + termin) */
.wydarzenie--krotkie h3, .wydarzenie--krotkie h4 { font-size: var(--t-1); margin-bottom: var(--s-1); }
.wydarzenie h4 { font-family: var(--font-naglowek); font-variation-settings: var(--font-naglowek-ustawienia); font-weight: 350; font-size: var(--t-2); line-height: 1.2; }
.zajawka .ramka { margin: var(--s-5) 0; }
.wydarzenie--krotkie .wydarzenie__meta { margin: 0; }

/* ta sama ramka w tonie piasku (Gabinety): jedyny modyfikator koloru; na niej TYLKO tusz */
.ramka--piasek {
  --ramka-rgb: 206 188 157; --ramka-linia-rgb: 206 188 157;   /* --piasek */
  max-width: none; margin: var(--s-6) 0 0;
}
.ramka--piasek h3 { margin-bottom: var(--s-3); }
.ramka--piasek p { color: var(--tusz); }
.ramka--piasek p:last-child { margin-bottom: 0; }
.ramka--piasek a { color: var(--tusz); text-decoration-color: currentColor; }

/* zdjęcie w treści (krąg dłoni na Grupach) */
.kadr-w-tresci { width: min(100% - 2 * var(--gutter), 60rem); margin: 0 auto; }
.kadr-w-tresci img {
  width: 100%; max-width: var(--w-obraz-maks-maly);
  aspect-ratio: 3 / 2; object-fit: cover;
  object-position: var(--fokus, 50% 50%);
}


/* ---------- 7. KARTY-WEJŚCIA: 2-3 obok siebie, na telefonie jedna pod drugą ---------- */
.karty {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.25rem, 1.5rem + 2vw, 3rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 48rem) {
  .karty--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .karty--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* karty w jednej linii (decyzja Mateusza 18.10.2026: porządek ponad „dryfowanie") */
}
/* tablet (768-1087 px): trzy karty „Drogi" jedna pod drugą, jak na telefonie (trzy wąskie
   karty miały zdjęcia 209 px i zawijane tytuły); bez przesunięcia środkowej karty */
@media (min-width: 48rem) and (max-width: 67.99rem) {
  .karty--3 { grid-template-columns: minmax(0, 1fr); max-width: 36rem; }
  .karty--3 .karta:nth-child(2) { margin-top: 0; }
  .karty--3 .karta img { aspect-ratio: 16 / 9; }
}
.karta { position: relative; display: flex; flex-direction: column; gap: var(--s-3); }
.karta img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  object-position: var(--fokus, 50% 50%);
}
/* „Dla terapeutów" jest cichsze niż „Drogi": niski, szeroki pas */
.karty--2 .karta img { aspect-ratio: 21 / 9; }

/* wszystkie zdjęcia poza kadrem otwierającym: miękki brzeg w papier + łagodniejsza tonacja
   (jedna reguła zamiast zaokrągleń; tła sekcji są prawie jak papier, więc brzeg znika bez szwu) */
.karta img, .zajawka img, .kontakt__kadr img, .kadr-w-tresci img, .portret img {
  border-radius: 0;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 var(--brzeg), #000 calc(100% - var(--brzeg)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--brzeg), #000 calc(100% - var(--brzeg)), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 var(--brzeg), #000 calc(100% - var(--brzeg)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--brzeg), #000 calc(100% - var(--brzeg)), transparent);
  mask-composite: intersect;
  filter: saturate(.8) contrast(.94) brightness(1.04);
}
/* ciemne zdjęcia (krąg dłoni, cis, wzgórze, tunel): węższy brzeg i jaśniejsza tonacja, żeby
   ciemna zieleń nie rozpływała się w papier brudnym, szarym wianuszkiem */
.karta img.ciemne, .zajawka img.ciemne, .kadr-w-tresci img.ciemne {
  --brzeg: var(--brzeg-ciemne);
  filter: saturate(.7) contrast(.9) brightness(1.12);
}
.karta h3 { margin-top: var(--s-1); }
.karta h3 a {
  color: var(--tusz); text-decoration: none;
}
/* cała karta jest klikalna jednym linkiem (nagłówkiem) */
.karta h3 a::before { content: ""; position: absolute; inset: 0; border-radius: var(--r-l); }
.karta h3 a::after {
  content: "→"; content: "→" / "";
  display: inline-block; margin-left: .4em;
  font-family: var(--font-tekst); font-weight: 400; vertical-align: .05em;
  color: var(--bursztyn); font-size: .8em;
  transition: transform var(--czas) var(--ease);
}
.karta:hover h3 a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.karta:hover h3 a::after { transform: translateX(.25em); }
.karta h3 a:focus-visible { outline: none; }
.karta h3 a:focus-visible::before { outline: var(--fokus-grubosc) solid var(--fokus-kolor); outline-offset: 4px; }
.karta p { margin: 0; color: var(--tusz-2); }

/* karta wyłożona poziomo (zajawka Czytelni): zdjęcie + tekst */
.zajawka { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: center; }
@media (min-width: 48rem) {
  .zajawka { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); }
}
.zajawka img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  object-position: var(--fokus, 50% 50%);
}
@media (min-width: 48rem) { .zajawka img { aspect-ratio: 3 / 2; } }
.zajawka h3.tytul {
  font-size: var(--t-1); font-weight: 350; letter-spacing: .06em;
  text-transform: uppercase;   /* tytuły Mai są wersalikami; w HTML zwykłe litery */
  margin-bottom: var(--s-4);
}
.fragment {
  margin: 0 0 var(--s-4);
  font-family: var(--font-naglowek);
  font-variation-settings: var(--font-naglowek-ustawienia);
  font-weight: 300; font-size: var(--t-1); line-height: 1.55;
}
.fragment p { margin: 0 0 .9em; }
.fragment .podpis { margin: 0; font-style: italic; }
/* „Ps." Mai: cichszy, mniejszy, ale czytelny (tusz-2 7,2:1) */
.fragment .ps { margin: var(--s-4) 0 0; font-size: var(--t-s); line-height: 1.55; color: var(--tusz-2); }


/* czytelnia: zaproszenie i trzy tytuły jako wejścia */
.czytelnia { max-width: 40rem; }
.czytelnia .lead { margin-bottom: var(--s-5); }
.tytuly { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; }
.tytuly a { display: inline-flex; align-items: center; min-height: var(--cel-dotyku); font-size: var(--t-1); font-weight: 350; letter-spacing: .06em; text-transform: uppercase; color: var(--tusz); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: rgb(118 75 30 / .7); }
.tytuly a:hover { color: var(--bursztyn); }

/* ---------- 8. PORTRET (wariant P1: 4:5, miękki brzeg jak inne zdjęcia; warianty P2 i P3: portret-warianty.html) ---------- */
.portret { margin: 0; width: min(100%, 19rem); }
@media (min-width: 48rem) { .portret { width: 100%; } }
.portret img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--fokus, 50% 40%); --brzeg: 12%; filter: brightness(1.06) contrast(.94) saturate(.9); }

/* (łuk z wersji 1, nieużywany) */
.o-mai { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); align-items: center; }
@media (min-width: 48rem) {
  .o-mai { grid-template-columns: minmax(0, clamp(12rem, 30vw, 22rem)) minmax(0, 1fr); gap: clamp(2rem, 5vw, 6rem); }
}
.luk-swiatlo { position: relative; width: min(100%, 19rem); }
@media (min-width: 48rem) { .luk-swiatlo { width: 100%; } }
/* sama poświata (nie cała strona) jest przycinana do szerokości sekcji: nie robi poziomego przewijania */
#o-mnie { overflow-x: clip; }
/* miękka poświata za ramką: światło, nie cień */
.luk-swiatlo::before {
  content: ""; position: absolute; z-index: 0; inset: -24% -34% -10%;
  background: radial-gradient(closest-side, rgb(240 219 161 / .85), rgb(240 219 161 / .3) 60%, rgb(240 219 161 / 0));
  pointer-events: none;
}
.luk {
  position: relative; z-index: 1;
  aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 999px 999px 0 0;
  /* dół kadru (czarna bluzka) rozpuszcza się w papier: postać wyłania się z mgły */
  -webkit-mask-image: linear-gradient(#000 58%, transparent 100%);
          mask-image: linear-gradient(#000 58%, transparent 100%);
}
.luk img {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 50% 40%);
  filter: brightness(1.08) contrast(.92) saturate(.9);
}
.o-mai h2 { margin-bottom: var(--s-2); }
.o-mai .podtytul { margin: 0 0 var(--s-5); color: var(--tusz-2); font-size: var(--t-s); letter-spacing: .04em; }
.o-mai .slowo { margin-top: var(--s-2); }


/* ---------- 9. KONTAKT I STOPKA ---------- */
.kontakt__siatka { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); align-items: start; }
@media (min-width: 48rem) {
  .kontakt__siatka { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 5rem); }
}
.kontakt__siatka--jedna { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .kontakt__siatka--jedna { grid-template-columns: minmax(0, 40rem); } }
.kontakt h2 { margin-bottom: var(--s-4); }
.kontakt address { font-style: normal; margin: var(--s-5) 0 var(--s-6); }
.telefon { display: block; margin-bottom: var(--s-2); }
.telefon {
  font-family: var(--font-naglowek);
  font-variation-settings: var(--font-naglowek-ustawienia);
  font-size: var(--t-4); font-weight: 300; line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--tusz);
  overflow-wrap: anywhere;   /* bez nowrap: przy powiększonym tekście numer zawija się między grupami cyfr */
}
.kontakt address .mail {
  display: inline-flex; align-items: center; min-height: var(--cel-dotyku);
  margin-bottom: var(--s-3); font-size: var(--t-1); overflow-wrap: anywhere;
}
.kontakt .adres { display: block; color: var(--tusz); }
.kontakt__kadr { margin: 0; }
.kontakt__prawa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.kontakt__kadr img {
  width: 100%; max-width: var(--w-obraz-maks-maly);
  aspect-ratio: 4 / 3; object-fit: cover;
  object-position: var(--fokus, 50% 50%);
  --brzeg: 22%;   /* szersze rozpuszczenie: zamknięcie strony światłem gabinetu */
}
/* telefon: kadr na całą szerokość ekranu (brzeg rozpuszcza się już poza kolumną tekstu) */
@media (max-width: 47.99rem) {
  .kontakt__kadr { margin-inline: calc(var(--gutter) * -1); }
}

.stopka {
  padding-block: var(--s-8) var(--s-7);
  border-top: 1px solid var(--linia);
  font-size: var(--t-s); color: var(--tusz-2);
}
.stopka__wnetrze {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6);
  width: min(100% - 2 * var(--gutter), var(--w-kontener)); margin-inline: auto;
}
@media (min-width: 48rem) {
  .stopka__wnetrze { grid-template-columns: 1.4fr 1fr; align-items: start; }
}
.stopka p { margin: 0 0 var(--s-2); }
.stopka .nazwa {
  font-family: var(--font-naglowek); font-variation-settings: var(--font-naglowek-ustawienia);
  font-size: var(--t-1); color: var(--tusz);
}
.stopka ul { list-style: none; margin: 0; padding: 0; }
.stopka li a { display: inline-flex; align-items: center; min-height: var(--cel-dotyku); }
.stopka a { color: var(--lupek-ciemny); text-decoration-color: currentColor; }
.stopka a:hover { color: var(--bursztyn); }
.stopka .prawa { grid-column: 1 / -1; margin-top: var(--s-5); font-size: var(--t-xs); max-width: 62rem; }
.stopka .prawa + .prawa { margin-top: 0; }


/* ---------- 10. RUCH, OZNACZENIA SZKICÓW, DROBIAZGI ---------- */
/* Ruch: jeden, ledwo widoczny. Sekcje delikatnie wynurzają się przy
   przewijaniu (translateY do 8 px, krycie od 90%: nawet zatrzymany w trakcie wejścia albo
   sfotografowany bez przewijania tekst ma kontrast co najmniej AA). Gdy przeglądarka nie zna
   animation-timeline albo włączono reduced motion, treść po prostu jest widoczna. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .wynurz {
      animation: wynurz linear both;
      animation-timeline: view();
      /* stała odległość zamiast procentów wysokości: długa sekcja nie jest
         półprzezroczysta przez setki pikseli przewijania */
      animation-range: entry 0% entry 160px;
    }
    @keyframes wynurz {
      from { opacity: .9; transform: translateY(8px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* [szkic]: własne sformułowanie, do poprawy przez Maję; ciche (kursywa, bez ramki),
   ale czytelne (nie mniej niż 13,6 px). Klasy .szkic i .luka są tylko w makiecie
   i nie wchodzą do motywu WordPressa. */
.szkic {
  display: inline; margin-left: .35em; padding: 0;
  font-family: var(--font-naglowek); font-variation-settings: var(--font-naglowek-ustawienia);
  font-size: .85rem; font-weight: 400;   /* kursywa Fraunces (Source Sans 3 nie ma w makiecie kursywy) */
  font-style: italic; letter-spacing: 0; line-height: inherit;
  color: var(--tusz-2); white-space: nowrap; vertical-align: baseline;
}
h2 .szkic, h3 .szkic { font-size: .9rem; }
/* dłuższy znacznik w osobnym wierszu pod zdaniem (bez dziwnego wcięcia po zawinięciu) */
.szkic--wiersz { display: block; margin: var(--s-1) 0 0; white-space: normal; }

/* pytanie Mai na końcu sekcji („Może któraś czeka na Ciebie?"): kursywa jak eyebrow */
.pytanie {
  font-family: var(--font-naglowek); font-variation-settings: var(--font-naglowek-ustawienia);
  font-style: italic; font-weight: 350; font-size: var(--t-1); line-height: var(--lh-lead);
  color: var(--tusz-2);
}
/* „Zadzwoń lub napisz": dwa słowa-linki (tel:, mailto:) z cichym „lub" */
.wybor { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .85rem; margin-top: var(--s-4); }
.wybor .lub { font-family: var(--font-naglowek); font-variation-settings: var(--font-naglowek-ustawienia); font-style: italic; font-weight: 350; font-size: var(--t-1); color: var(--tusz-2); }

/* luka do uzupełnienia (np. adres e-mail do wynajmu) */
.luka {
  padding: 0 .35em; color: var(--tusz);
  background: rgb(232 179 44 / .28);
  border-radius: 3px;
}

@media print {
  .naglowek, .skip { display: none; }
  .hero__kadr { height: 30vh; }
  .hero__tekst { margin-top: 0; }
  .wynurz { animation: none; opacity: 1; transform: none; }
}

/* puste linki makiety (href="#"): kursor pomocy i lekkie przygaszenie przy dotyku */
a[href="#"] { cursor: help; }
a[href="#"]:active { opacity: .6; }

/* main dostaje fokus po skoku z „Przejdź do treści", bez obrysu */
main:focus { outline: none; }

/* kod pocztowy bez łamania w środku */
.nb { white-space: nowrap; }

/* podstrony: nagłówek po lewej, tekst w kolumnie obok (na telefonie jedna kolumna) */
.rozklad { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.rozklad > h2 { margin-bottom: 0; }
.rozklad > .tekst { max-width: var(--miara); }
@media (min-width: 48rem) {
  .rozklad { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 4rem); }
}
.rozklad .kadr-w-tresci { width: 100%; margin: var(--s-7) 0 0; }
/* nagłówek idzie obok tekstu jak notatka na marginesie */
@media (min-width: 48rem) {
  .rozklad > h2 { position: sticky; top: calc(var(--naglowek-h-d) + 1.5rem); align-self: start; }
}


/* ---------- FALLBACKI ----------
   Bez mask-image (stare przeglądarki) zdjęcie kadru nie zanika w papier, więc tekst nie może
   na nim leżeć: zsuwamy go pod zdjęcie. Karty bez mask-composite mają maskę „sumowaną":
   zdjęcie jest po prostu widoczne. Bez animation-timeline sekcje są od razu w pełni widoczne
   (ruch jest w @supports). Wszystkie kolory w CSS to zwykłe rgb() (bez color-mix). */
@supports not ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {
  .hero__tekst, .hero--a .hero__tekst, .hero--b .hero__tekst, .hero--podstrona .hero__tekst {
    margin-top: 0; padding-top: var(--s-5);
  }
}
/* ==========================================================================
   wp.css  -  poprawki dla WordPressa. Wygląd w całości z makiety (tokens.css, styles.css);
   tutaj tylko to, co wynika z markupu WordPressa (klasy wp-block-*, wrapper szablonu, style globalne).
   ========================================================================== */

/* wrapper szablonu: bez dopełnień z theme.json, nagłówek przyklejony do całej strony */
.wp-site-blocks { padding: 0; margin: 0; }
.wp-site-blocks > * { margin-block: 0; }
.wp-site-blocks > header.naglowek { margin-block-start: 0; }

/* bloki grup/nagłówków/akapitów: marginesy ustala makieta, nie style układu WordPressa */
.wp-block-group, .wp-block-post-content { margin-block: 0; }
.wp-block-post-content { display: block; }

/* lista bloku list: bez domyślnych wcięć (makieta ustawia list-style i padding klasami) */
ul.wp-block-list { padding-left: 0; }
ul.wp-block-list.lista-mai { list-style: none; margin: 0 0 var(--akapit); padding: 0; }

/* template part nagłówka: sam jest paskiem .naglowek */
header.wp-block-template-part { margin: 0; }
footer.wp-block-template-part { margin: 0; }

/* sekcja jako <section> z grupy: bez dodatkowych odstępów (padding daje .sekcja) */
section.wp-block-group { margin: 0; }
main.wp-block-group { margin: 0; padding: 0; }

/* WordPress dokłada ten sam odstęp co makieta: kotwice sekcji pod przyklejonym nagłówkiem */
:target { scroll-margin-top: calc(var(--naglowek-h) + 1rem); }
@media (min-width: 72rem) { :target { scroll-margin-top: calc(var(--naglowek-h-d) + 1rem); } }

/* tylko dla czytników ekranu (WP) */
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* admin bar (zalogowany): nagłówek przyklejony pod paskiem */
body.admin-bar .naglowek { top: var(--wp-admin--admin-bar--height, 32px); }


/* ==========================================================================
   Elementy spoza makiety v2 (podstrony, wydarzenia, archiwum). Te same tokeny i ten sam charakter.
   ========================================================================== */

/* kadr otwierający bez zdjęcia (polityka prywatności, wydarzenie): sam tekst na papierze */
.hero--tekst .hero__tekst { margin-top: 0; padding-block: clamp(2.5rem, 1rem + 5vw, 5rem) var(--s-4); }
.hero--tekst h1 .hero-line { max-width: 40ch; }
.hero--tekst .wydarzenie__meta, .hero--tekst .wydarzenie__prowadzenie { margin: var(--s-4) 0 0; }
.hero--tekst .wydarzenie__prowadzenie { color: var(--tusz-2); font-size: var(--t-s); }

/* zdanie zamiast jednego słowa w nagłówku podstrony: skala jak w zdaniu z kadru głównego */
.hero--podstrona h1 .hero-line.hero-line--zdanie,
.hero--tekst h1 .hero-line.hero-line--zdanie,
.o-mai h1 .hero-line.hero-line--zdanie {
  font-size: var(--t-hero); font-weight: 300; line-height: 1.16; letter-spacing: -.012em;
}
.hero--podstrona .hero__tekst .kontener > * { max-width: 62rem; }

/* O mnie: portret obok tekstu, nagłówek strony w kolumnie tekstu */
.o-mai h1 { margin-bottom: var(--s-5); }
.o-mai .tekst > :last-child { margin-bottom: 0; }
.sekcja--omnie .portret { align-self: start; }

/* wydarzenia: linki w jednym wierszu, tytuły z linkiem */
.wydarzenie__linki { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.5rem; margin: var(--s-2) 0 0; }
.wydarzenie__linki .slowo { min-height: var(--cel-dotyku); }
.wydarzenie h3 { font-size: var(--t-2); line-height: 1.2; }
.wydarzenie h3 a { color: var(--tusz); text-decoration-color: rgb(118 75 30 / .5); }
.wydarzenie h3 a:hover { color: var(--bursztyn); }
.ramka .wydarzenie p { margin-bottom: var(--s-3); }
.ramka .wydarzenie p.wydarzenie__meta { margin-bottom: var(--s-3); }
.kolumna-wydarzenia > * { max-width: var(--miara); }
.kolumna-wydarzenia > ul.wejscia { max-width: none; }
.wydarzenie__powrot { margin: var(--s-6) 0 0; }
.wydarzenie__zdjecie { margin: 0 0 var(--s-6); }
.wydarzenie__zdjecie img { width: 100%; max-width: 60rem; aspect-ratio: 3 / 2; object-fit: cover; }

/* sekcje na całą szerokość (Najbliżej, Archiwum): treść do 54rem */
.kolumna-pelna > .lead, .kolumna-pelna > p { max-width: var(--miara); }
.kolumna-pelna > .ramka { margin: 0 0 var(--s-6); }

/* archiwum po latach (minione wydarzenia wchodzą tu same) */
.archiwum { max-width: 54rem; margin-top: var(--s-6); }
.archiwum__rok + .archiwum__rok { margin-top: var(--s-7); }
.archiwum__rok h3 { margin: 0 0 var(--s-4); font-size: var(--t-2); color: var(--tusz-2); }
.archiwum ul { list-style: none; margin: 0; padding: 0; }
.archiwum li { padding: var(--s-4) 0; border-top: 1px solid rgb(118 75 30 / .2); }
.archiwum li:first-child { border-top: 0; padding-top: 0; }
.archiwum p { margin: 0; }
.archiwum__tytul { font-family: var(--font-naglowek); font-variation-settings: var(--font-naglowek-ustawienia); font-weight: 350; font-size: var(--t-1); line-height: 1.25; }
.archiwum__tytul a { color: var(--tusz); }
.archiwum__meta { margin-top: var(--s-1) !important; color: var(--tusz-2); font-size: var(--t-s); }
.archiwum__link { margin-top: var(--s-1) !important; }
.archiwum__termin { margin: 0 0 var(--s-1) !important; color: var(--tusz-2); font-size: var(--t-s); font-weight: var(--waga-pogrubienie); }
.archiwum__zajawka { margin-top: var(--s-2) !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.archiwum__linki { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-top: var(--s-1) !important; }
.hero--tekst .wydarzenie__zajawka { margin: var(--s-5) 0 0; max-width: 40rem; }

/* „wiersz” Mai: krótkie linie jedna pod drugą, jak fragment (szeryf, lekko) */
p.wiersz {
  margin: 0 0 var(--s-5);
  font-family: var(--font-naglowek); font-variation-settings: var(--font-naglowek-ustawienia);
  font-weight: 300; font-size: var(--t-1); line-height: 1.55;
}

/* Czytelnia: lista tekstów i strona tekstu */
.czytelnia__lista { list-style: none; margin: 0; padding: 0; max-width: 54rem; }
.czytelnia__lista li { padding: var(--s-5) 0; border-top: 1px solid rgb(118 75 30 / .2); }
.czytelnia__lista li:first-child { border-top: 0; }
.czytelnia__lista h3 { font-size: var(--t-1); font-weight: 350; letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--s-2); }
.czytelnia__lista h3 a { color: var(--tusz); }
.czytelnia__lista p { margin: 0; color: var(--tusz-2); }
.tekst-czytelni__tytul { font-size: var(--t-3); margin-bottom: var(--s-6); }
.tekst-czytelni .wp-block-post-content p { max-width: var(--miara); }
.tekst-czytelni details { margin: 0 0 var(--s-5); max-width: var(--miara); }
.tekst-czytelni summary { cursor: pointer; min-height: var(--cel-dotyku); display: flex; align-items: center; font-family: var(--font-naglowek); font-size: var(--t-1); }

/* ramka propozycji (do decyzji Mai) */
.ramka--piasek .luka { margin-left: 0; }

/* dialog w tekstach Czytelni: każda kwestia w osobnym wierszu, myślnik wiszący */
p.dialog { margin: 0 0 var(--s-5); }
.dialog__wers { display: block; padding-left: 1.3em; text-indent: -1.3em; margin-bottom: .6em; }
.dialog__wers:last-child { margin-bottom: 0; }
/* części serii („Sześć praw(d)”): rozwijane bloki */
details.wp-block-details { border-top: 1px solid rgb(118 75 30 / .2); padding: var(--s-2) 0; }
details.wp-block-details summary { cursor: pointer; display: flex; align-items: center; min-height: var(--cel-dotyku); font-family: var(--font-naglowek); font-variation-settings: var(--font-naglowek-ustawienia); font-weight: 350; font-size: var(--t-1); }
details.wp-block-details[open] > summary { margin-bottom: var(--s-3); }
.czytelnia__kategoria { margin: 0 0 var(--s-1) !important; font-size: var(--t-s); letter-spacing: .04em; }
.czytelnia__zajawka { font-family: var(--font-naglowek); font-variation-settings: var(--font-naglowek-ustawienia); font-weight: 300; font-size: var(--t-0); line-height: 1.5; }
.hero--czytelnia .hero__tekst .kontener > * { max-width: 62rem; }

/* mapa w Kontakcie: cichy przycisk, iframe po kliknięciu (nic nie łączy się z Google wcześniej) */
.mapa { margin-top: var(--s-4); max-width: 40rem; }
button.slowo { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; text-align: left; }
.mapa__ramka iframe { display: block; width: 100%; height: 22rem; border: 0; filter: saturate(.8) contrast(.94); }
.kontakt .adres a { color: var(--tusz); text-decoration-color: rgb(33 40 38 / .45); }

/* data tekstu w Czytelni: pod tytułem (strona tekstu) i przy pozycji listy */
.tekst-czytelni__data, .czytelnia__data { margin: var(--s-3) 0 0; color: var(--tusz-2); font-size: var(--t-s); letter-spacing: .02em; }
.czytelnia__data { margin: 0 0 var(--s-1) !important; }

/* mini karuzela zdjęć (sekcja Gabinet): przewijany pas, kropki pod spodem; zdjęcia mają tę samą maskę brzegów co reszta (.zajawka img) */
.galeria { position: relative; min-width: 0; }
.galeria__tor {
  display: flex; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.galeria__tor::-webkit-scrollbar { display: none; }
.galeria__slajd { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.galeria__kropki { display: flex; justify-content: center; margin-top: var(--s-1); }
.galeria__kropka {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  width: 2rem; height: var(--cel-dotyku); display: grid; place-items: center;
}
.galeria__kropka::before {
  content: ""; width: .6rem; height: .6rem; border-radius: 50%;
  background: rgb(118 75 30 / .3);
  transition: background-color var(--przejscie), transform var(--przejscie);
}
.galeria__kropka:hover::before { background: rgb(118 75 30 / .6); }
.galeria__kropka[aria-current="true"]::before { background: var(--bursztyn); transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) { .galeria__tor { scroll-behavior: auto; } }

/* O mnie (decyzja Mateusza 20.10.2026): portret w całości, bez maski i bez cieni (strona główna zostaje z miękkim brzegiem) */
.sekcja--omnie .portret img {
  aspect-ratio: 2 / 3; object-fit: contain; filter: none;
  -webkit-mask: none !important; mask: none !important;
}